/* Design 3 "A day at MCHL" — warm theme layered over site.css for every page.
   Picture-book warmth: honey, apricot and cocoa; Young Serif headings; emphasis written by hand (Caveat). */
:root {
  --paper: #fdf5ea; --paper-2: #f8e9d6; --paper-3: #f0d9bd; --card: #fffaf2;
  --ink: #3b2a22; --ink-2: #5f4a3e; --muted: #8b7262; --line: rgba(59,42,34,.12); --line-2: rgba(59,42,34,.22);
  --red: #d2603a; --red-d: #b44c2a; --sun: #f0a531; --sun-d: #d38b17; --blue: #3f7193; --blue-d: #2f5a77; --sage: #87a072;
  --r: 26px; --r-l: 40px;
  --shadow: 0 1px 2px rgba(80,50,30,.06), 0 26px 50px -30px rgba(110,62,30,.42);
  --serif: "Young Serif", Georgia, serif; --sans: "Nunito", system-ui, sans-serif; --hand: "Caveat", "Segoe Print", cursive;
}
body { font: 400 18px/1.7 var(--sans); background: var(--paper) }
body::before { opacity: .5 }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.015em; line-height: 1.08; font-variation-settings: normal }
h1 em, h2 em, h3 em, h4 em, .big em, blockquote em { font: 600 1.18em/0.9 var(--hand); color: var(--red); letter-spacing: 0; font-style: normal; display: inline-block; transform: rotate(-2deg) }
.sec.dark h1 em, .sec.dark h2 em, .sec.dark h3 em, .foot .big em { color: var(--sun) }
::selection { background: #ffd79a }
.eyebrow { font: 800 12px/1.2 var(--sans); letter-spacing: .16em; color: var(--red) }
.eyebrow::before { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); opacity: 1 }
.sec.dark .eyebrow { color: #f3b867 }

/* buttons: rounder, softer, a little bounce */
.btn { font: 800 16px/1 var(--sans); padding: 18px 28px; box-shadow: 0 10px 22px -14px rgba(110,62,30,.55) }
.btn:hover { transform: translateY(-2px) rotate(-.6deg) }
.btn.red { --hover: var(--ink) } .btn.sun { --bg: var(--sun); --fg: var(--ink) }
.btn.ghost { box-shadow: inset 0 0 0 2px var(--line-2) }

/* header floats on the page like a paper label */
.top.scrolled { background: color-mix(in srgb, var(--paper) 82%, transparent); box-shadow: 0 1px 0 var(--line), 0 18px 30px -28px rgba(110,62,30,.5) }
.brand b { font: 400 19px/1.1 var(--serif); font-variation-settings: normal }
.brand small { font: 800 10.5px/1.3 var(--sans) }
.nav > a, .nav .dd > button { font: 700 15.5px var(--sans) }
.nav > a::after, .nav .dd > button::after { height: 3px; border-radius: 3px; background: var(--sun); bottom: 3px }

/* sections */
.sec.tint { background: var(--paper-2) }
.sec.dark { background: #3b2a22; color: #fdf1e2 } .sec.dark .muted { color: #d8bfa8 }
.lede { color: var(--ink-2) }

/* photos on inner pages read like snapshots */
.ph img, .sec figure img, .arch img { border-radius: 18px }

/* cards */
.days a { border-radius: 20px; background: #fffaf2; box-shadow: 0 0 0 2px var(--line) }
.days a b { font: 400 30px/1.1 var(--serif) }
.days a:hover { transform: translateY(-5px) rotate(-2deg); box-shadow: 0 0 0 2px var(--red), 0 18px 30px -18px rgba(110,62,30,.55) }

/* footer: evening */
.foot { background: #2a1f2e; color: #e6d3c4 }
.foot .big { font-family: var(--serif) }
@media (max-width: 560px) { .brand b { font-size: 16px } .brand small { font-size: 9.5px; letter-spacing: .14em } .brand img { width: 42px; height: 42px } .brand { gap: 10px } }
.sec.dark .person .pic { background: #4a372d } .sec.dark .person .mono { background: linear-gradient(160deg, #57412f, #44322a); color: #fdf1e2 } .sec.dark .person .mono small { color: #c9ab92 }

/* production pass 2026-10-16: WCAG AA text contrast on the cream papers (axe: #d2603a 3.2–3.7:1, #8b7262 3.8–4.3:1) */
:root { --muted: #6f5a4c; --red: #ad4323; --red-d: #8f3519; --sun-d: #a86b0c }
.foot h4 { color: #b3a99a } .foot .base { color: #b3a99a } .foot .base a { color: #c9bcab }
.sec.dark .tourcard .muted { color: var(--muted) }

/* AMS member-school badge (footer on every page + Our School) — the logo needs a light ground */
.foot .badges { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 16px }
.ams { display: inline-block; max-width: 100%; box-sizing: border-box; background: #fff; border-radius: 16px; padding: 14px 20px; line-height: 0 }
.foot .ams { padding: 12px 18px } .foot .ams:hover { box-shadow: 0 0 0 3px var(--sun) }
.ams img { display: block; width: 380px; max-width: 100%; height: auto }  /* NOT a % width: Firefox sizes that to 0 inside the shrink-wrapped pill (2026-10-16) */
.ams-hero { margin-top: 26px } .ams-hero .ams { padding: 10px 16px; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px rgba(110,62,30,.5) } .ams-hero .ams img { width: 300px }
.ams-about { margin-top: 26px } .ams-about .ams { box-shadow: 0 0 0 1px var(--line) }
.foot .badges + .base { margin-top: 36px }
/* belt and braces: nothing may widen the page on a phone (2026-10-16: "Down the hall" at 56px made the home page 453px wide on a 390px phone) */
html { overflow-x: clip }
@media (max-width: 560px) { .crew ul { flex-wrap: wrap; row-gap: 8px } .crew li { width: 50px; height: 50px } }
@media (max-width: 370px) { .brand { gap: 10px; flex-shrink: 1; min-width: 0 } .brand img { width: 40px; height: 40px; flex-shrink: 0 } .brand b { font-size: 16px } .brand small { font-size: 9.5px } .burger { flex-shrink: 0 } }

/* language switch, English ⇄ Español (Kris 2026-10-20). Stays visible on phones, beside the menu button. */
.top .lang { font: 700 14px var(--sans); color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); white-space: nowrap; margin-left: 4px; transition: background .2s }
.top .lang:hover { background: var(--paper-2) }
.top .ctas { flex-shrink: 0 } .top .ctas .btn { white-space: nowrap }
.top .wrap { max-width: 1440px; gap: 10px } .nav > a, .nav .dd > button { padding: 10px 8px } .brand b { font-size: 18px } .brand img { width: 44px; height: 44px }  /* room for the switch + Spanish labels */
@media (max-width: 1360px) { .top .lang { margin-left: auto } .top .lang ~ .burger { margin-left: 10px } }
@media (max-width: 560px) { .top .wrap { gap: 10px } .brand { flex-shrink: 1; min-width: 0 } .brand img { flex-shrink: 0 } .top .lang { padding: 7px 11px; font-size: 13px; flex-shrink: 0 } .burger { flex-shrink: 0 } }
.langhint { display: flex; gap: 6px 16px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 48px 10px 16px; background: var(--ink); color: var(--paper); font: 600 15px/1.4 var(--sans); position: relative; text-align: center }
.langhint a { color: var(--sun); font-weight: 800 }
.langhint button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: none; border: 0; color: inherit; font-size: 24px; line-height: 1; cursor: pointer }