/* ABOUTME: The MZMC design system: tokens, base type, layout, and every component used on the site.
   ABOUTME: Pages add no styles of their own; anything new gets added here first. */

/* ── Tokens ─────────────────────────────────────────────────────────────
   Colors are named for where they come from: the lake and the land around it.
   Text pairs, WCAG contrast (AA needs 4.5:1): loon on birch 15.1, limestone 12.8, ice 12.8 · granite on birch 6.1,
   limestone 5.2 · lake on birch 7.5, limestone 6.4, ice 6.4 · white on lake 8.0 · birch on deep 11.1 · white on deep 11.9
   · loon on tamarack 5.0 (today badge) · sumac on birch 6.5.
   Non-text marks (3:1): tamarack on deep 3.7 (next dot) · lake-light on birch 3.7. */
:root {
  --birch: #F8F7F3;      /* page ground: birch bark */
  --limestone: #E9E5DA;  /* secondary surface: Platteville limestone */
  --ice: #DCE7EA;        /* tinted surface: lake ice */
  --loon: #1A2226;       /* text */
  --granite: #56605F;    /* secondary text, 6.1:1 on birch */
  --lake: #24566B;       /* primary action: Bde Maka Ska on a clear day */
  --lake-light: #4F8796; /* the lake in sunlight: decorative rules and fills only, never text (3.7:1 on birch) */
  --deep: #173B4A;       /* today strip, footer, hover for lake */
  --tamarack: #B8862B;   /* every "now" and "today" marker; never text on a light ground */
  --sumac: #9B3A2A;      /* errors */
  --line: #D8D6CC;
  --white: #FFFFFF;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-text: "Public Sans", "Segoe UI", system-ui, sans-serif;

  /* type scale */
  --t-small: 0.875rem;   /* 14 */
  --t-body: 1.0625rem;   /* 17 */
  --t-lead: 1.25rem;     /* 20 */
  --t-h3: 1.5rem;        /* 24 */
  --t-h2: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);   /* 30 → 40 */
  --t-h1: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);  /* 40 → 76 */

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; --s7: 72px; --s8: 112px;

  --measure: 66ch;
  --page: 1120px;
  --gutter: clamp(20px, 4vw, 40px);
  --tap: 48px;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--birch); color: var(--loon); font: 400 var(--t-body)/1.6 var(--font-text); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }  /* long words wrap at large text sizes; names and titles are never hyphenated */
h1 { font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; }
p, ul, ol, dl { margin: 0; }
p, li { max-width: var(--measure); }
a { color: var(--lake); text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
a:hover { color: var(--deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--lake); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--white); }

.skip { position: absolute; left: var(--s4); top: -100px; background: var(--white); color: var(--loon); padding: var(--s3) var(--s4); z-index: 10; }
.skip:focus { top: var(--s4); }
main:focus { outline: none; }
/* the parts the browser draws carry the palette too: selected text, the caret, native controls */
::selection { background: var(--lake); color: var(--white); }
html { accent-color: var(--lake); caret-color: var(--lake); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s7); }
.section:not([class*="section--"]) + .section:not([class*="section--"]) { padding-top: 0; }  /* same ground: one gap, not two */
.section--tint { background: var(--limestone); }
.section--ice { background: var(--ice); }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.lead { font-size: var(--t-lead); line-height: 1.5; }
.quiet { color: var(--granite); }
.small { font-size: var(--t-small); }
.split { display: grid; gap: var(--s6); }
.thirds { display: grid; gap: var(--s6); }
@media (min-width: 800px) {
  .section { padding-block: var(--s8); }
  .split { grid-template-columns: 1.2fr 1fr; gap: var(--s7); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .thirds { grid-template-columns: repeat(3, 1fr); }
}

/* ── Proposal banner: on every page of the hosted preview, saying it is a proposal, not the center's site. Remove at launch ── */
.proposal { background: var(--limestone); font-size: var(--t-small); }
.proposal .wrap { padding-block: var(--s2); }
.proposal p { max-width: none; }

/* ── Today strip ────────────────────────────────────────────────────── */
.today { background: var(--deep); color: var(--birch); font-size: var(--t-small); }
.today .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); padding-block: var(--s3); }
.today strong { font-weight: 600; }
.today ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.today .next-label { font-weight: 600; }
.today li.is-next::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tamarack); margin-right: var(--s2); }
.today a { color: inherit; margin-left: auto; line-height: var(--tap); }  /* a 44px line is the tap target; not a flex box, since flex drops the space inside "Join on " */
/* Phones get one line: the next sitting and the Zoom link. The label stays for screen readers. */
@media (max-width: 479px) {
  .today .wrap:has(.is-next) { flex-wrap: nowrap; padding-block: var(--s1); }
  .today .wrap:has(.is-next) > strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .today ul:has(.is-next) li:not(.is-next), .today li.is-next ~ li { display: none; }
  .today a { flex: none; }  /* on the narrowest phones the sitting wraps, never the link */
  /* the link reads "Zoom"; its accessible name stays "Join on Zoom" */
  .today .today-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Header and navigation ──────────────────────────────────────────── */
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s6); padding-block: var(--s4); }
.site-name { display: inline-flex; align-items: center; gap: var(--s3); font: 500 1.375rem/1.1 var(--font-display); color: var(--loon); text-decoration: none; padding-block: var(--s3); }
/* the center's brush mark, beside the name and never instead of it; drawn at 2x, shown 28px tall */
.site-name img { flex: none; width: auto; height: 28px; }
.nav-toggle { font: 600 var(--t-body) var(--font-text); min-height: var(--tap); padding-inline: var(--s4); background: none; border: 1px solid var(--loon); border-radius: 2px; color: var(--loon); cursor: pointer; }
.site-nav { flex-basis: 100%; }
.site-nav[hidden] { display: none; }
.site-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.site-nav a { display: flex; align-items: center; min-height: var(--tap); color: var(--loon); text-decoration: none; border-top: 1px solid var(--line); }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 479px) {
  .site-head .wrap { column-gap: var(--s4); padding-block: var(--s2); }
  .site-name { font-size: 1.125rem; flex: 1 1 0; min-width: 0; }  /* wraps to two lines, so the Menu button fits beside it */
}
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav[hidden] { display: block; flex-basis: auto; }
  .site-nav ul { flex-direction: row; gap: var(--s5); }
  .site-nav a { border-top: 0; font-size: 1rem; }
  .site-nav .give { margin-left: var(--s4); }  /* giving sits apart from the practice pages, not above them */
}

/* ── Buttons: one solid, one outline, each with an on-photo variant ── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--s2) 22px; border-radius: 2px; border: 1px solid transparent; font: 600 1rem/1.2 var(--font-text); text-decoration: none; cursor: pointer; transition: background-color 150ms; }
.btn--solid { background: var(--lake); color: var(--white); }
.btn--solid:hover { background: var(--deep); color: var(--white); }
.btn--outline { border-color: var(--loon); color: var(--loon); background: transparent; }
.btn--outline:hover { background: var(--loon); color: var(--birch); }
.on-dark .btn--solid { background: var(--white); color: var(--loon); }
.on-dark .btn--solid:hover { background: var(--ice); color: var(--loon); }
.on-dark .btn--outline { border-color: rgba(255,255,255,.75); color: var(--white); }
.on-dark .btn--outline:hover { background: var(--white); color: var(--loon); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 479px) { .btn-row > .btn { flex: 1 1 auto; } }  /* on phones each row of buttons runs the full width, so the stack has one edge */

/* ── Hero: one photograph, text only over the bottom scrim ─────────── */
.hero { position: relative; min-height: min(72vh, 620px); display: flex; align-items: flex-end; background: var(--deep) center/cover no-repeat; color: var(--white); }
/* the photo is an <img> so phones get their own crop and every screen a sized file; it fills the block under the scrim */
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12,20,24,.88), rgba(12,20,24,.4) 55%, rgba(12,20,24,.1)); }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: var(--s6); }
.hero p { font-size: var(--t-lead); line-height: 1.5; max-width: 34em; }
/* on wide screens the words sit right of center, so the sign and its brush mark at the left of the photo stay in view */
@media (min-width: 800px) { .hero .wrap > * { margin-left: auto; width: min(100%, 36rem); } }
.page-head { padding-block: var(--s6) var(--s5); border-bottom: 2px solid var(--lake-light); }
.page-head + .section { padding-top: var(--s6); }
@media (min-width: 800px) { .page-head { padding-block: var(--s7) var(--s6); } .page-head + .section { padding-top: var(--s7); } }
/* a page head led by a photograph beside the title, which stands on the head's rule */
.page-head--photo .wrap { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .page-head--photo .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--s7); align-items: end; } }
/* a single talk: titles run long, so the h1 sets a step smaller than a page title */
.page-head--talk h1 { font-size: var(--t-h2); }

/* ── Doors: the homepage entry point for each top task ─────────────── */
.doors { display: grid; gap: 0; border-top: 1px solid var(--loon); }
.door { display: block; padding: var(--s5) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--loon); }
/* set at heading size, not card size: these are the three ways in, and they carry the page's first screen after the hero */
.door h3 { font-size: var(--t-h2); line-height: 1.1; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color 150ms; }
.door:hover h3, .door:focus-visible h3 { text-decoration-color: currentColor; }
.door p { font-size: var(--t-lead); line-height: 1.5; color: var(--granite); margin-top: var(--s3); }
@media (min-width: 800px) {
  .doors { grid-template-columns: repeat(3, 1fr); gap: var(--s6); border-top: 0; }
  .door { border-top: 1px solid var(--loon); border-bottom: 0; }
}

/* ── Facts: ruled label/value pairs ─────────────────────────────────── */
/* no column gap, so each rule runs unbroken under label and value; the value's padding makes the space instead */
.facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.facts dt, .facts dd { padding-block: var(--s4); border-top: 1px solid var(--line); margin: 0; }
.facts dd { padding-left: var(--s5); max-width: calc(var(--measure) + var(--s5)); }  /* values keep the reading measure on wide screens */
.facts dt { font: 500 var(--t-body)/1.6 var(--font-display); color: var(--granite); }

/* ── Timetable: a day's sittings ────────────────────────────────────── */
.timetable { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
/* the time sits beside the text while the text keeps 11em, and stacks above it when it cannot: on the narrowest phones and with enlarged text */
.timetable li { display: flex; flex-wrap: wrap; column-gap: var(--s4); padding-block: var(--s3); border-top: 1px solid var(--line); max-width: none; }
.timetable li > :first-child { flex: 0 0 5.5em; }
.timetable li > :last-child { flex: 1 1 11em; min-width: 0; }
.timetable time { font-variant-numeric: tabular-nums; color: var(--granite); }
.day { scroll-margin-top: var(--s5); }
.day h4 { font: 500 var(--t-body)/1.6 var(--font-display); color: var(--granite); margin: var(--s5) 0 0; }
/* columns come from the space available in text units, so enlarged text drops to fewer columns instead of overflowing */
.days { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
/* the schedule page's week: each day heads its column at heading size on a loon rule, and today's rule is tamarack */
.days .day { border-top: 1px solid var(--loon); padding-top: var(--s4); }
.days .day h3 { font-size: var(--t-h2); }
.days .day.is-today { border-top: 4px solid var(--tamarack); padding-top: calc(var(--s4) - 3px); }
.day .badge { font: 600 var(--t-small) var(--font-text); text-transform: capitalize; color: var(--loon); background: var(--tamarack); padding: 2px 10px; border-radius: 2px; margin-left: var(--s1); vertical-align: middle; }
@media (max-width: 30em) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: var(--s1); }  /* stacked, a label sits with its value, not halfway to the rule above */
  .facts dd { border-top: 0; padding-top: 0; padding-left: 0; }
}

/* ── Event list: dated rows, not cards ──────────────────────────────── */
.events { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.events li { display: grid; grid-template-columns: 1fr; gap: var(--s1) var(--s5); padding-block: var(--s4); border-top: 1px solid var(--line); max-width: none; }
.events .when { font: 500 var(--t-body)/1.6 var(--font-display); color: var(--granite); }
.events .what { font-weight: 600; }
.events .what a { color: var(--loon); }
.events .meta { color: var(--granite); font-size: var(--t-small); }
.events .tag { justify-self: start; }  /* a label, not a full-width box */
@media (min-width: 700px) {
  .events li { grid-template-columns: 11em 1fr auto; align-items: baseline; }
}
/* The archives: hundreds of short-dated rows, so a narrow date column, tight rows, and the speaker on the title's line.
   Underlines only on hover and focus: in a list where every title is a link, 897 underlines are noise. */
.year .events li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s5); padding-block: var(--s2); }
.year .events .when { flex: 0 0 6em; }
.year .events li > :last-child { flex: 1 1 12em; min-width: 0; }  /* beside the date while there is room, below it when text is enlarged */
.year .events .what { margin-right: var(--s2); }  /* the gap belongs to the title, so a speaker that wraps starts flush left */
.year .events .meta { display: inline-block; }  /* a name moves to the next line whole */
.year .events .what a { text-decoration: none; }
.year .events .what a:hover, .year .events .what a:focus-visible { text-decoration: underline; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag { display: inline-block; font-size: var(--t-small); color: var(--granite); border: 1px solid var(--line); border-radius: 2px; padding: 0 var(--s2); }
.tag--status { border-color: var(--loon); color: var(--loon); }  /* a dark outline shows on any ground, unlike a limestone fill; a solid fill outshouted the titles */

/* ── Feature: the newest item of a list, set large with its person, above the rest of the list ── */
.feature { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.feature > .stack { flex: 1 1 12rem; min-width: 0; }  /* beside the portrait while there is room, below it with enlarged text */
.feature img { flex: 0 0 6rem; width: 6rem; aspect-ratio: 1; object-fit: cover; object-position: center 20%; border-radius: 2px; }
.feature .when { font: 500 var(--t-body)/1.6 var(--font-display); color: var(--granite); }
.feature h3 { font-size: var(--t-h2); }
.feature h3 a { color: var(--loon); }
@media (min-width: 700px) { .feature img { flex-basis: 10rem; width: 10rem; } }

/* ── People: a roster as ruled rows, each one link with a small portrait ── */
.people { list-style: none; padding: 0; display: grid; column-gap: var(--s6); border-bottom: 1px solid var(--line); }
.people li { max-width: none; border-top: 1px solid var(--line); }
.people a { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: center; min-height: 96px; padding-block: var(--s3); color: var(--loon); text-decoration: none; }
.people img, .people .initials { width: 72px; height: 72px; object-fit: cover; object-position: center 20%; border-radius: 2px; }
/* someone with no photo gets their initials on a plain tile, so the roster keeps its rhythm */
.people .initials { display: grid; place-items: center; background: var(--limestone); color: var(--granite); font: 400 1.5rem/1 var(--font-display); }
.section--tint .people .initials { background: var(--birch); }
.people .name { grid-column: 2; font: 500 var(--t-lead)/1.3 var(--font-display); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 150ms; }
.people a:hover .name { text-decoration-color: currentColor; }
@media (min-width: 700px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .people { grid-template-columns: repeat(3, 1fr); } }

/* ── Player: one recording, the browser's own audio control and a download link ── */
.player { border-block: 1px solid var(--loon); padding-block: var(--s5); max-width: 46rem; }
.player audio { display: block; width: 100%; min-height: var(--tap); }
.player p { margin-top: var(--s3); color: var(--granite); font-size: var(--t-small); }

/* ── Transcript: a talk as text, each paragraph led by the time it starts, which plays from there ── */
.transcript p { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--s4); padding-block: var(--s3); max-width: calc(var(--measure) + 6.5em); }
.transcript a { font-variant-numeric: tabular-nums; align-self: start; }
.notice { background: var(--ice); padding: var(--s4); border: 1px solid var(--lake-light); }  /* the hairline frame survives forced colors, where the tint disappears */
@media (max-width: 30em) { .transcript p { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ── Archive filter: search, speaker and year over a long list of talks ── */
.filter { display: grid; gap: var(--s4); align-items: end; }
.filter select { font: inherit; color: var(--loon); background: var(--white); border: 1px solid var(--granite); border-radius: 2px; min-height: var(--tap); padding: var(--s3); width: 100%; }
.filter input, .filter select { height: var(--tap); }
.filter output { color: var(--granite); }
@media (min-width: 800px) { .filter { grid-template-columns: 2fr 1.4fr 1fr; } .filter output { grid-column: 1 / -1; } }
.jump { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s2); margin-inline: calc(-1 * var(--s2)); }  /* the links' tap padding hangs into the gutter, so the first year lines up with the text */
.jump li { max-width: none; }
.jump a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s2); font-variant-numeric: tabular-nums; }
.year { scroll-margin-top: var(--s5); }
.year[hidden], .events li[hidden], .jump li[hidden], .filter[hidden], form[data-search][hidden] { display: none; }

/* ── Links: a directory of pages, each a title and one line about it ── */
.links { list-style: none; padding: 0; display: grid; column-gap: var(--s6); border-bottom: 1px solid var(--line); }
.links li { max-width: none; border-top: 1px solid var(--line); padding-block: var(--s3) var(--s4); }
.links a { display: inline-block; padding-block: var(--s3); font: 500 var(--t-lead)/1.3 var(--font-display); color: var(--loon); }
.links p { color: var(--granite); }
@media (min-width: 800px) { .links:not(.links--one) { grid-template-columns: repeat(2, 1fr); } }
/* search results: one column, each match in its excerpt set in the text's own color, a step heavier */
.links mark { background: none; color: inherit; font-weight: 600; }

/* ── Search box: the field and its button on one line while they fit ── */
.search-row { display: flex; flex-wrap: wrap; gap: var(--s3); max-width: 40rem; }
.search-row input { flex: 1 1 16rem; min-width: 0; }

/* ── Quote: a teacher in their own words ────────────────────────────── */
.quote { margin: 0; max-width: 46rem; }
.quote p { font: 300 var(--t-h3)/1.45 var(--font-display); max-width: none; }
.quote footer { margin-top: var(--s4); color: var(--granite); }

/* ── Details: progressive disclosure for long content ───────────────── */
details { border-top: 1px solid var(--line); max-width: var(--measure); }
details ul { padding-left: 1.2em; }
details li + li { margin-top: var(--s2); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: var(--tap); padding-block: var(--s3); cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 300 1.5rem/1 var(--font-display); color: var(--granite); }
details[open] summary::after { content: "–"; }
details > :not(summary) { padding-bottom: var(--s5); }

/* ── Document: a long policy read top to bottom, its wording the center's own ── */
/* plain lists in running text: a hanging bullet or number, and air between items that run to several lines */
.stack > ul:not([class]), .stack > ol:not([class]) { padding-left: 1.25em; }
.stack > ul:not([class]) > li + li, .stack > ol:not([class]) > li + li { margin-top: var(--s2); }
/* the page's own sections, under the lead; each link a full tap target */
.contents { list-style: none; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--s5); }
.contents a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* the three sets of precepts side by side while each keeps a readable column */
.precepts { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.precepts h4 { font: 500 var(--t-lead)/1.3 var(--font-display); }
/* numbered rules as ruled rows: the number in the label column, like a facts list */
.canons { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.canons > li { display: grid; gap: var(--s1) var(--s5); padding-block: var(--s4); border-top: 1px solid var(--line); max-width: none; }
.canons h3 { font: 500 var(--t-body)/1.6 var(--font-display); color: var(--granite); }
@media (min-width: 700px) { .canons > li { grid-template-columns: 7em minmax(0, 1fr); } }

/* ── Figure ─────────────────────────────────────────────────────────── */
.photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photo--wide img { aspect-ratio: 3 / 2; }
/* stacked in one column, a tall photo would fill the screen, so it turns landscape */
@media (max-width: 799px) { .photo img { aspect-ratio: 3 / 2; } }
/* a teacher's portrait: square, and never larger than a person across a table */
.photo--portrait { max-width: 22rem; }
.photo--portrait img { aspect-ratio: 1; object-position: center 20%; }
/* the only copy of some portraits is about 230 pixels wide; shown at its own size rather than blown up */
.photo--portrait.photo--small { max-width: 14rem; }
.photo figcaption { font-size: var(--t-small); color: var(--granite); margin-top: var(--s2); }
figure { margin: 0; }
/* a band: one photograph across the full width, between sections, for a picture that carries the page; caption below */
.band img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 800px) { .band img { aspect-ratio: 21 / 9; } }
.band figcaption { font-size: var(--t-small); color: var(--granite); margin-top: var(--s2); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label { font-weight: 600; font-size: 1rem; }
.field input, .field textarea { font: inherit; color: var(--loon); background: var(--white); border: 1px solid var(--granite); border-radius: 2px; min-height: var(--tap); padding: var(--s3); width: 100%; }
.field .error { color: var(--sumac); font-size: var(--t-small); }
.form { display: grid; gap: var(--s4); max-width: 28rem; }

/* ── Next step: a page that does not already end on an action ends with one ── */
.next { background: var(--ice); padding-block: var(--s7); }
.next .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); }
/* on the page ground behind a loon rule: for pages whose last section is tinted, so limestone, ice and the dark footer never stack */
.next--quiet { background: none; padding-top: 0; }
/* the rule spans the text column, like every other rule, not the gutters either side of it */
.next--quiet .wrap { padding-top: var(--s6); background: linear-gradient(var(--loon), var(--loon)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-foot { background: var(--deep); color: var(--birch); padding-block: var(--s7) var(--s6); font-size: 1rem; }
.site-foot a { color: inherit; }
.site-foot h2 { font-size: var(--t-h3); }
.site-foot ul { list-style: none; padding: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-foot .field input { border-color: transparent; }
.site-foot .legal { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.2); font-size: var(--t-small); color: #C9D6DA; max-width: none; }

/* ── Print: content only, dark text on white paper ────────────────── */
@media print {
  .skip, .today, .nav-toggle, .site-nav, .btn-row, .next, .filter, .jump { display: none !important; }
  body, .hero, .site-foot, .section--tint, .section--ice { background: none !important; color: var(--loon); }
  .hero { min-height: 0; }
  .hero::before, .hero picture { display: none; }
  .site-foot a, .site-foot .legal { color: var(--loon); }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--t-small); color: var(--granite); }
  h1, h2, h3 { break-after: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}