/* Discovery Foundation Models - ICLR 2027 workshop proposal site.
   One type scale, three weights, one accent, nine colour tokens.
   Borders are alpha. Press is not animated. Exits run 0.67 of entrances. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* colour: nine tokens, one job each */
  --night: #0b1220;        /* dark ground: hero, footer */
  --navy: #0e1b4d;         /* headings, focus-ring outer band */
  --accent: #c2103a;       /* state mark: status, links, section bar, nav underline, primary button */
  --ink: #2f3138;          /* body text */
  --muted: #5d646c;        /* subtitles, metadata, captions, notes */
  --pale: #eef1f8;         /* alternate surface, panel fill, callout fill */
  --hero-lift: #1b2440;    /* the brightest pixel the hero can produce */
  --dim: #ccd3e4;          /* secondary text on the dark ground */
  --line: rgba(14, 27, 77, .14);   /* every border, as alpha */

  /* type: one scale, every size tokenised */
  --ff: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2.0625rem, 1.05rem + 3.1vw, 3.25rem);   /* 33 -> 52 */
  --fs-h2: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);     /* 26 -> 36 */
  --fs-h1-sub: clamp(1.125rem, .8rem + 1.1vw, 1.625rem); /* 18 -> 26 */
  --fs-h3: 1.375rem;                                     /* 22 */
  --fs-lead: 1.1875rem;                                  /* 19 */
  --fs-body: 1.0625rem;                                  /* 17 */
  --fs-sm: 1rem;                                         /* 16 */
  --fs-xs: .875rem;                                      /* 14 */
  --fs-2xs: .8125rem;                                    /* 13 */
  --fw-r: 400;
  --fw-m: 600;
  --fw-b: 700;
  --lh-display: 1.06;
  --lh-tight: 1.22;
  --lh-text: 1.65;
  --tr-display: -.015em;   /* 33-52px mixed case */
  --tr-caps: .03em;        /* 26-36px uppercase */
  --tr-label: .08em;       /* 13px uppercase micro-label */
  --measure: 58ch;
  --read: 578px;      /* what 58ch resolves to at the 17px body size; see the reading column */

  /* space: one 4px multiplier */
  --sp: 4px;
  --s1: var(--sp); --s2: calc(var(--sp)*2); --s3: calc(var(--sp)*3);
  --s4: calc(var(--sp)*4); --s5: calc(var(--sp)*5); --s6: calc(var(--sp)*6);
  --s7: calc(var(--sp)*7); --s8: calc(var(--sp)*8); --s10: calc(var(--sp)*10);
  --s12: calc(var(--sp)*12); --s16: calc(var(--sp)*16); --s20: calc(var(--sp)*20);

  /* motion: press is 0ms; exit is 0.67 of entrance */
  --dur-fast: 120ms; --dur-base: 180ms; --dur-exit: 120ms;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  --header-h: 72px;
  --radius: 4px;
  --tap: 44px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: var(--fw-r) var(--fs-body)/var(--lh-text) var(--ff);
}

/* the single rule that caps every measure on the page */
p, li, blockquote, figcaption, dd { max-width: var(--measure); }

h1, h2, h3, h4 { color: var(--navy); margin: 0; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-b); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: var(--fw-m); }
h4 { font-size: var(--fs-lead); line-height: var(--lh-tight); font-weight: var(--fw-m); }
p { margin: 0 0 var(--s6); }
ul, ol { margin: 0 0 var(--s6); padding-left: var(--s6); }
li { margin: 0 0 var(--s3); }
strong { font-weight: var(--fw-m); }
img { max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-thickness var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--navy); }

/* one focus ring, two-tone, so one band always clears 3:1 on any surface here:
   the white band measures 15.30:1 on the hero and 6.12:1 on the accent band;
   the navy band measures 16.37:1 on white and 14.48:1 on the pale surface.
   [tabindex] is in the selector so the one scrollable region is covered. */
:is(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid transparent;   /* so forced-colors still paints a ring */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--navy);
}

.skip-link {
  position: absolute; z-index: 1100; top: calc(-1 * var(--s20)); left: var(--s4);
  padding: var(--s3) var(--s4); border-radius: var(--radius);
  background: var(--night); color: #fff; font-weight: var(--fw-m);
  font-size: var(--fs-xs); text-decoration: none;
}
.skip-link:focus { top: var(--s3); }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--s6); }
.section { padding: var(--s20) 0; }
.section-alt { background: var(--pale); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ the triplet */
.section-header { position: relative; text-align: center; margin-bottom: var(--s12); padding-bottom: var(--s5); }
.section-header h2 { text-transform: uppercase; letter-spacing: var(--tr-caps); margin-bottom: var(--s3); }
.section-header p { font-size: var(--fs-lead); color: var(--muted); margin: 0 auto; max-width: 54ch; }
.section-header::after {
  content: ""; position: absolute; bottom: 0; left: calc(50% - 30px);
  width: 60px; height: 5px; background: var(--accent);
}

.label {
  display: inline-block; font-size: var(--fs-2xs); font-weight: var(--fw-b);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent);
}

/* --------------------------------------------------------------- the hero */
#top {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 660px;
  padding: calc(var(--header-h) + var(--s16)) 0 var(--s16);
  /* colour first, enrichment second: with every image blocked or 404ing this
     renders as flat --night with white text at 18.72:1 and loses nothing. */
  background: var(--night)
    radial-gradient(1100px 720px at 50% 24%, var(--hero-lift) 0%, rgba(11, 18, 32, 0) 68%)
    no-repeat center center / cover;
}
#top::before {    /* a 48px measurement field, faded out downward */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(204, 211, 228, .075) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(204, 211, 228, .075) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 52%, rgba(0, 0, 0, 0) 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 52%, rgba(0, 0, 0, 0) 88%);
}
.hero-inner { position: relative; z-index: 1; text-align: center; color: #fff; }
.hero-badge {
  display: inline-block; margin-bottom: var(--s6);
  padding: var(--s2) var(--s5); border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: var(--fw-m);
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
#top h1 {
  color: #fff; margin: 0 auto var(--s6); max-width: 30ch;
  font-size: var(--fs-h1); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); font-weight: var(--fw-b);
}
#top h1 .h1-sub {
  display: block; margin-top: var(--s3);
  font-size: var(--fs-h1-sub);
  line-height: var(--lh-tight); letter-spacing: normal; font-weight: var(--fw-r); color: var(--dim);
  max-width: none;
}
.hero-where {
  font-size: var(--fs-lead); line-height: 1.45; color: #fff;
  margin: 0 auto var(--s3); max-width: 40ch;
}
.hero-where b { font-weight: var(--fw-m); }
.hero-note { font-size: var(--fs-xs); color: var(--dim); margin: 0 auto var(--s8); max-width: var(--measure); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); }

/* ------------------------------------------------------------- the button */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: var(--s3) var(--s7);
  border: 2px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-m); line-height: 1.2;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.button:hover { background: #fff; color: var(--accent); }
.button:active { translate: 0 1px; }        /* press: not animated */
.button-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.button-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* -------------------------------------------------------- the status band */
.statusband { background: var(--accent); color: #fff; padding: var(--s6) 0; }
.statusband .container {
  display: grid; grid-template-columns: minmax(0, var(--read)); justify-content: center;
  gap: var(--s2) var(--s6);
}
.statusband p { margin: 0; font-size: var(--fs-sm); }
.statusband .label { color: #fff; padding-top: 2px; }
/* from 960px the label hangs in the left gutter, so the sentence starts on the
   same edge as the reading column below it; under that the gutter is too
   narrow for the label and it stacks above */
@media (min-width: 960px) {
  .statusband .container { grid-template-columns: minmax(0, 1fr) minmax(0, var(--read)) minmax(0, 1fr); }
  .statusband .label { justify-self: end; }
}

/* ---------------------------------------------------------------- the nav */
#header {
  position: fixed; z-index: 1000; inset: 0 0 auto 0; height: var(--header-h);
  background: rgba(11, 18, 32, 0);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
#header.is-scrolled { background: var(--night); box-shadow: 0 1px 0 rgba(255, 255, 255, .12); }

/* With JavaScript off nothing ever adds .is-scrolled, so the bar must not stay
   fixed and transparent over the page copy. This reset is deliberately OUTSIDE
   every media query: inside one it left desktop with #ccd3e4 nav text on #ffffff
   body copy at 1.50:1 and a white wordmark on white at 1.00:1. The bar simply
   scrolls away instead, on its own --night ground: 12.49:1 and 18.72:1. */
.no-js #header { position: static; height: auto; background: var(--night); padding: var(--s3) 0; }
.no-js .header-inner { flex-wrap: wrap; height: auto; }
.no-js #navbar ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.no-js #top { padding-top: var(--s16); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); height: 100%; }
/* the only element on screen at every scroll position and on every deep link,
   so it carries the status: a fragment landing on #speakers never sees the
   status band. The sub-line sits UNDER the wordmark, so the lockup costs the
   header no extra width. */
.brand-lockup { flex: none; }   /* never squashed: the nav yields first, not the wordmark */
.brand {
  display: inline-block; padding: 2px 0;    /* 23px of ink -> 27px target, over the 24px floor */
  color: #fff; text-decoration: none; font-size: var(--fs-xs); font-weight: var(--fw-b);
  line-height: 1.25;                        /* not the 1.65 body leading, which is 2 lines of 23px when it wraps */
  letter-spacing: var(--tr-label); text-transform: uppercase; white-space: nowrap;
}
.brand:hover { color: #fff; }
.brand-status {
  margin: 0; max-width: none; color: var(--dim);   /* 12.49:1 on --night */
  font-size: var(--fs-2xs); line-height: 1.25; white-space: nowrap;
}
#navbar ul { display: flex; align-items: center; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
#navbar li { margin: 0; max-width: none; }
#navbar a {
  position: relative; display: flex; align-items: center; min-height: var(--tap); padding: 0;
  color: var(--dim); text-decoration: none; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: var(--fw-m);
  transition: color var(--dur-fast) var(--ease-out);
}
/* white, not accent: this 2px rule lands on the transparent header over the
   hero, whose lightest real ground is #2e354d. Accent measured 1.98:1 there and
   3.06:1 on the scrolled bar, a 2% margin over the 3:1 non-text floor.
   White measures 12.12:1 and 18.72:1 on the same two grounds. */
#navbar a::after {
  content: ""; position: absolute; left: 0; bottom: 10px; height: 2px; width: 0;
  background: #fff;
  transition: width var(--dur-base) var(--ease-out);
}
#navbar a:hover, #navbar a[aria-current] { color: #fff; }
#navbar a:hover::after, #navbar a[aria-current]::after { width: 100%; }
.menu-toggle { display: none; flex: 0 0 var(--tap); }

/* ----------------------------------------------------------- prose blocks */
.prose h3, .section > .container > h3 { margin: var(--s10) 0 var(--s4); }
.prose h3:first-child { margin-top: 0; }
.prose h4 { margin: var(--s8) 0 var(--s3); }
.lead { font-size: var(--fs-lead); }

.callout {
  /* the fill tracks the measure instead of running the whole container */
  max-width: 64ch; margin: 0 0 var(--s8); padding: var(--s5) var(--s6);
  border-left: 4px solid var(--accent); background: var(--pale);
}
.section-alt .callout { background: #fff; }
.callout > :last-child { margin-bottom: 0; }
.callout-quiet { border-left-color: var(--navy); }
.callout .cite { margin-top: var(--s3); margin-bottom: 0; font-size: var(--fs-xs); color: var(--muted); }

/* --------------------------------------------------------- reading column
   One column, centred under the centred section headers. Prose, sub-heads,
   lists and callouts sit in it; figures, tables and card grids keep the full
   container and break out of it symmetrically. Each block used to be capped
   at the measure but left-aligned in a 1132px container, so every text section
   ran down the left 40% of the page with the right side empty. */
.section > .container > :where(h3, h4, p, blockquote, ul, ol, .callout):not(.panel-list, .people-grid, .date-list),
.prose > :where(h3, h4, p, blockquote, ul, ol, .callout):not(.panel-list, .people-grid, .date-list) {
  max-width: var(--read); margin-inline: auto;
}

blockquote { margin: 0 0 var(--s6); font-size: var(--fs-lead); color: var(--navy); }

.define { font-weight: var(--fw-m); color: var(--navy); }
.note { font-size: var(--fs-xs); color: var(--muted); }

figure { margin: var(--s10) 0; }
figure img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
figcaption { margin-top: var(--s4); font-size: var(--fs-xs); color: var(--muted); }

/* ----------------------------------------------------------------- panels */
.panel-list { display: grid; gap: var(--s6); list-style: none; margin: 0 0 var(--s6); padding: 0; counter-reset: p; }
.panel-list.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
@media (min-width: 960px) {   /* two tracks from here; an odd last card sits centred under the pair */
  .panel-list.cols-2 > :last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--s6)) / 2);
  }
}
.panel-list.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr)); }
.panel {
  counter-increment: p; margin: 0; max-width: none;
  padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--pale);
}
.section-alt .panel { background: #fff; }
.panel h3 { font-size: var(--fs-lead); font-weight: var(--fw-m); margin: 0 0 var(--s3); }
.panel-list.is-numbered .panel h3::before {
  content: counter(p); display: inline-block; min-width: 1.7em;
  color: var(--accent); font-weight: var(--fw-b); font-size: var(--fs-xs);
  letter-spacing: var(--tr-label);
}
.panel p { font-size: var(--fs-sm); margin: 0; max-width: 56ch; }   /* 62ch measured 78 CPL in a one-track 768px grid */

/* ------------------------------------------------------------ date ledger */
.date-list { list-style: none; margin: 0 auto var(--s6); padding: 0; max-width: 820px; }
.date-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5);
  margin: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--line); max-width: none;
}
.date-list span { max-width: 56ch; }
.date-list time, .date-list .date-value {
  flex-shrink: 0; font-weight: var(--fw-m); color: var(--navy); text-align: right;
}
.date-list li.is-key time { color: var(--accent); font-weight: var(--fw-b); }

/* ----------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  /* pure-CSS scroll affordance: a shadow shows at whichever edge hides content */
  background-image:
    linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(11, 18, 32, .22), rgba(11, 18, 32, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(11, 18, 32, .22), rgba(11, 18, 32, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 52px 100%, 52px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { width: 100%; border-collapse: collapse; font-family: var(--ff); background: transparent; }
/* the table note lives OUTSIDE the scrollport, so the asterisk it resolves
   never scrolls away from the table that uses it */
.table-figure { margin: 0; }
.prose > .table-wrap:not(:last-child) { margin-bottom: var(--s8); }
/* the schedule is two short columns; full container width separated each label
   from its time by a median 788px. The paradigms table keeps the full width. */
#schedule .table-figure { max-width: var(--measure); margin-inline: auto; }
.table-figure figcaption { margin-top: var(--s4); }
th, td {
  padding: var(--s3) var(--s5); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
thead th {
  background: var(--pale); color: var(--navy); font-weight: var(--fw-b);
  font-size: var(--fs-xs); letter-spacing: var(--tr-label); text-transform: uppercase;
  vertical-align: bottom;
}
tbody th { font-weight: var(--fw-m); color: var(--ink); }
tbody tr:last-child > * { border-bottom: 0; }

/* paradigms: the row label stays put while the capability columns scroll */
.t-paradigms tbody th, .t-paradigms thead th:first-child {
  position: sticky; left: 0; z-index: 1; min-width: 236px;
  box-shadow: 1px 0 0 var(--line);
}
.t-paradigms tbody th { background: #fff; }
.t-paradigms thead th:first-child { background: var(--pale); }
.t-paradigms tbody tr.is-target th, .t-paradigms tbody tr.is-target td {
  font-weight: var(--fw-b); color: var(--navy); background: var(--pale);
}

/* schedule: breaks recede, the panel stands out */
.t-schedule td { width: 1%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.t-schedule tbody th { font-weight: var(--fw-r); }
.t-schedule tr.r-break th, .t-schedule tr.r-break td { background: var(--pale); color: var(--muted); }
.t-schedule tr.r-panel th { font-weight: var(--fw-b); color: var(--navy); box-shadow: inset 4px 0 0 var(--accent); }
.t-schedule tr.r-talk th { font-weight: var(--fw-m); }

.scroll-hint { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--s3); }
/* read before the table, where the clipped header would otherwise look like a
   rendering fault; from 960px the matrix fits and there is nothing to scroll */
@media (min-width: 960px) { .scroll-hint { display: none; } }

/* ----------------------------------------------------------------- people */
.people-grid {
  /* flex rather than grid so a short last row is centred: eight speakers run
     3-3-2 and four organizers 3-1, and a grid leaves those rows hanging left */
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s12) var(--s6);
  list-style: none; margin: 0 0 var(--s10); padding: 0;
}
.people-grid > .person { flex: 1 1 300px; max-width: calc((100% - 2 * var(--s6)) / 3); }
@media (max-width: 995px) { .people-grid > .person { max-width: calc((100% - var(--s6)) / 2); } }
@media (max-width: 639px) { .people-grid > .person { max-width: none; } }
.person { margin: 0; max-width: none; text-align: center; }
.person-photo {
  display: block; width: 160px; height: 160px; margin: 0 auto var(--s4);
  border-radius: 50%; object-fit: cover; object-position: center 18%;
  background: #fff;
}
.person h3, .person h4 {
  font-size: var(--fs-lead); font-weight: var(--fw-m); line-height: var(--lh-tight);
  margin: 0 0 var(--s1); color: var(--navy);
}
.person h3 a, .person h4 a { color: var(--navy); text-decoration-color: currentColor; text-underline-offset: 3px; }
.person h3 a:hover, .person h4 a:hover { color: var(--accent); }
.person .qualifier {
  display: block; margin: var(--s2) auto; max-width: 30ch;
  font-size: var(--fs-2xs); font-weight: var(--fw-b);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent);
}
.person .affiliation { font-size: var(--fs-sm); color: var(--ink); margin: 0 auto var(--s2); max-width: 32ch; }
.person .slot { font-size: var(--fs-xs); color: var(--navy); font-weight: var(--fw-m); margin: 0 auto var(--s3); max-width: 32ch; }
.person .bio { font-size: var(--fs-xs); color: var(--muted); margin: 0 auto; max-width: 40ch; text-align: left; }

/* ---------------------------------------------------------------- contact */
.contact-line { font-size: var(--fs-lead); margin: 0 0 var(--s4); }

/* ------------------------------------------------------------- back to top */
.back-to-top {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 999;
  display: flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
}
.back-to-top.is-visible {
  visibility: visible; opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}
.back-to-top:active { translate: 0 1px; }
.back-to-top svg { width: 22px; height: 22px; }
.no-js .back-to-top { display: none; }
/* under 576px the 44px disc sits inside a 358px reading column and covers
   the end of whatever line scrolls beneath it; the wordmark in the fixed
   header already links to #top, so the phone loses nothing without it */
@media (max-width: 575px) { .back-to-top { display: none; } }

/* ----------------------------------------------------------------- footer */
#footer { background: var(--night); color: var(--dim); padding: var(--s12) 0; font-size: var(--fs-xs); }
#footer p { max-width: 56ch; }
#footer .container { max-width: calc(var(--read) + 2 * var(--s6)); }
#footer h2 { color: #fff; font-size: var(--fs-lead); margin-bottom: var(--s3); text-transform: none; letter-spacing: normal; }
#footer a { color: #fff; }
#footer a:active { color: var(--dim); }
#footer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ breakpoints */
/* The hamburger must cover every width at which the ten-item desktop nav does not
   fit. Measured: lockup 280.31 + gap 20 + nav 819.92 = 1120.23 of content, so the
   bar needs a 1168.23px viewport. At 991 the old breakpoint left "Organizers" and
   "Contact" 100px past the edge of a 1024px screen with no scroll, no wrap and no
   hamburger to reach them - #header is fixed, so the page scrollWidth never saw it.
   1179 switches at 1180, which is .container's own max-width. */
@media (max-width: 1179px) {
  :root { --header-h: 64px; }
  .js .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); padding: 0;
    border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--radius);
    background: transparent; color: #fff; cursor: pointer;
  }
  .js #navbar {
    display: none; position: absolute; top: var(--header-h); left: var(--s6); right: var(--s6);
    padding: var(--s2) var(--s3); border-radius: var(--radius); background: #fff;
    box-shadow: 0 10px 28px rgba(11, 18, 32, .28);
  }
  .js #header.is-open #navbar { display: block; }
  .js #header.is-open { background: var(--night); }
  #navbar ul { display: block; }
  #navbar a {
    display: flex; align-items: center; min-height: var(--tap);
    padding: 0 var(--s3); font-size: var(--fs-sm);
  }
  /* navy belongs to the white dropdown panel, which only exists with JS.
     Unscoped it painted navy on the --night no-JS bar at 1.14:1; the base
     --dim keeps that list at 12.49:1. */
  .js #navbar a { color: var(--navy); }
  .js #navbar a:hover, .js #navbar a[aria-current] { color: var(--accent); }
  /* the current item must not be carried by colour alone (1.4.1): accent vs
     navy is only 2.67:1 and 12.7 apart for protanopia. A 3px bar on the white
     panel measures 6.12:1, and the weight step is a second non-colour cue. */
  .js #navbar a[aria-current] { font-weight: var(--fw-b); }
  .js #navbar a::after {
    left: 0; top: 50%; bottom: auto; translate: 0 -50%;
    width: 3px; height: 0; background: var(--accent);   /* 6.12:1 on the white panel */
    transition: height var(--dur-base) var(--ease-out);
  }
  .js #navbar a:hover::after, .js #navbar a[aria-current]::after { width: 3px; height: 24px; }
}
@media (max-width: 767px) {
  :root { --fs-h3: 1.25rem; }
  .section { padding: var(--s16) 0; }
  .section-header { margin-bottom: var(--s10); }
  #top { min-height: 0; }
  .date-list li { display: block; }
  .date-list time, .date-list .date-value { display: block; margin-top: var(--s1); text-align: left; }
  th, td { padding: var(--s3) var(--s4); font-size: var(--fs-xs); }
  .t-paradigms th, .t-paradigms td { padding: var(--s2) var(--s3); font-size: var(--fs-2xs); }
  .t-paradigms tbody th, .t-paradigms thead th:first-child { min-width: 132px; }
}
@media (max-width: 575px) {
  .container { padding: 0 var(--s4); }
  .js #navbar { left: var(--s4); right: var(--s4); }
  .hero-actions .button { width: 100%; }
  /* at 320px the nowrap wordmark is 280px wide and pushed the only control that
     opens the nav 24px off screen, shrinking it from 44px to 28px. The bar is
     fixed, so the page scrollWidth never showed it. The wordmark wraps instead. */
  .header-inner { gap: var(--s3); }
  .brand-lockup { flex: 0 1 auto; min-width: 0; }
  .brand { white-space: normal; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;   /* the duration was swept up, the 120ms visibility delay was not */
    scroll-behavior: auto !important;
  }
}