/* =====================================================================
   Justice Emmett Hall Memorial Foundation — site styles
   ---------------------------------------------------------------------
   Layout concept: a quiet, left-aligned institutional page. White paper,
   blue-black ink, and one colour taken from the Foundation's logo
   ("Hall red", the scarlet of a Supreme Court robe) used sparingly:
   the current-Laureate band, the years in the Laureate roll, and links.

   To change the brand colour, edit --hall-red below. Everything else
   derives from these tokens. The site is deliberately light-only.
   ===================================================================== */

:root {
  /* Colour — light theme */
  --paper: #ffffff;          /* page background */
  --vellum: #f2f3f5;         /* quiet bands and form fields */
  --ink: #161b24;            /* main text, blue-black */
  --ink-soft: #4b5361;       /* secondary text */
  --rule: #d9dce2;           /* hairlines */
  --hall-red: #c03539;       /* brand colour: the red of the logo */
  --red-tint: #f8e7e8;       /* pale wash of the brand colour */
  --band-bg: #f6eced;        /* soft wash of the logo red, for the Laureate band */
  --band-fg: #161b24;
  --band-soft: #8a2a2d;
  --red-deep: #982a2d;       /* deeper shade of the logo red, for large type */
  --focus: #1b5fb4;
  color-scheme: light;      /* light-only by design, even on devices set to dark mode */

  /* Type */
  --serif: "EB Garamond", Garamond, "Adobe Garamond Pro", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  /* Scale (ratio ~1.25 from an 18px serif body) */
  --t-small: 0.875rem;   /* 14 */
  --t-ui: 1rem;          /* 16 */
  --t-body: 1.25rem;     /* 20 (Garamond runs small) */
  --t-lead: 1.45rem;     /* 23 */
  --t-h3: 1.45rem;
  --t-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --t-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --t-year: clamp(2.5rem, 2rem + 2.4vw, 3.75rem);

  --measure: 66ch;
  --page: 72rem;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-ui);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hall-red); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-h1); font-weight: 500; letter-spacing: -0.015em; }
h2 { font-size: var(--t-h2); font-weight: 500; }
h3 { font-size: var(--t-h3); }
p { margin: 0; }

.prose { font-family: var(--serif); font-size: var(--t-body); line-height: 1.65; max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.lead { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-small); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 4px;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
@media (min-width: 720px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section--vellum { background: var(--vellum); }
.stack > * + * { margin-top: 1.25rem; }

.split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.split > * { min-width: 0; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.1rem;
}
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.1; }
.brand img { height: 64px; width: auto; }
@media (max-width: 560px) { .brand img { height: 44px; } }
/* French wordmark, set in type to echo the logo */
.brand__fr { display: flex; flex-direction: column; font-family: var(--serif); line-height: 1; }
.brand__fr-top { font-size: 1.02rem; color: var(--ink); white-space: nowrap; }
.brand__fr-name { font-size: 2.15rem; color: var(--hall-red); letter-spacing: -0.01em; margin-top: 1px; }
@media (max-width: 560px) { .brand__fr-top { font-size: 0.85rem; } .brand__fr-name { font-size: 1.7rem; } }
.brand__name { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--hall-red); letter-spacing: -0.005em; }
.brand__sub { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.02em; margin-top: 2px; }

.nav { display: flex; align-items: center; gap: 1.3rem; }
.nav ul { list-style: none; display: flex; gap: 1.3rem; margin: 0; padding: 0; }
.nav a { white-space: nowrap; }
.nav a { color: var(--ink); text-decoration: none; font-size: 0.95rem; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { border-bottom-color: var(--hall-red); }
.nav .lang { font-size: 0.9rem; color: var(--ink-soft); }
.nav a.button { color: #fff; border: 2px solid var(--hall-red); padding: 0.55em 1.1em; }
.nav-toggle {
  display: none; font: inherit; font-size: 0.95rem; background: none; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px; padding: 8px 12px; cursor: pointer;
}

@media (max-width: 1100px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem var(--gutter-r) 1.25rem var(--gutter-l); z-index: 20;
  }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding-block: 12px; border-bottom: 1px solid var(--rule); }
  .nav ul a[aria-current="page"] { color: var(--hall-red); border-bottom-color: var(--rule); }
  .nav .button { margin-top: 1rem; align-self: flex-start; }
  .site-header { position: relative; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  padding: 0.7em 1.25em; border-radius: 4px; text-decoration: none; cursor: pointer;
  background: var(--hall-red); color: #fff; border: 2px solid var(--hall-red);
}
.button:hover { filter: brightness(0.92); }
.button--quiet { background: transparent; color: var(--hall-red); }
.button--quiet:hover { background: var(--red-tint); filter: none; }
.button--light { background: var(--band-fg); color: var(--band-bg); border-color: var(--band-fg); }

/* ---------- Page openers ---------- */
.page-head { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: 1.25rem; max-width: 46ch; }

/* ---------- Home hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem); }
.hero h1 { max-width: 22ch; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); }
.hero__aside { display: flex; flex-direction: column; gap: 1.5rem; align-self: end; }
.hero__aside .lead { max-width: 36ch; }

/* ---------- Scarlet Laureate band ---------- */
.band { background: var(--band-bg); color: var(--band-fg); }
.band a:not(.button) { color: var(--band-fg); }
.band .wrap { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.laureate-feature {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 760px) {
  .laureate-feature { grid-template-columns: minmax(0, 1fr) 15rem; }
}
.laureate-feature > * { min-width: 0; }
.laureate-feature__year { font-family: var(--sans); font-size: var(--t-ui); color: var(--band-soft); }
.laureate-feature__name { font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 500; line-height: 1.1; margin-top: 0.4rem; }
.laureate-feature__citation { font-family: var(--serif); font-size: var(--t-body); line-height: 1.6; max-width: 58ch; margin-top: 1rem; color: var(--band-fg); opacity: 0.92; }
.laureate-feature__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.portrait {
  aspect-ratio: 4 / 5; width: 100%; max-width: 15rem;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35);
  display: grid; place-items: center; overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .portrait { max-width: 8rem; order: -1; } .portrait__initials { font-size: 2rem; } }
.portrait__initials { font-family: var(--serif); font-size: 3.5rem; color: var(--band-soft); }

/* ---------- Deadline strip ---------- */
.deadline {
  display: grid; gap: 1.25rem 2.5rem; align-items: center;
  grid-template-columns: 1fr;
  padding-block: 1.75rem; border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) { .deadline { grid-template-columns: auto minmax(0, 1fr) auto; } }
.deadline__date { font-variant-numeric: lining-nums; font-family: var(--serif); line-height: 1; color: var(--hall-red); }
.deadline__date strong { display: block; font-size: 2.6rem; font-weight: 500; }
.deadline__date span { font-family: var(--sans); font-size: var(--t-small); color: var(--ink-soft); }
.deadline p { max-width: 52ch; }

/* ---------- Programs (home) ---------- */
.programs { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 860px) { .programs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.program { border-top: 2px solid var(--ink); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.program:first-child { border-top-color: var(--hall-red); }
.program h3 a { color: var(--ink); text-decoration: none; }
.program h3 a:hover { color: var(--hall-red); }
.program p { color: var(--ink-soft); max-width: 40ch; }
.program .more { margin-top: auto; font-weight: 600; font-size: 0.95rem; }

/* ---------- Hall block (home) ---------- */
.hall-dates { font-variant-numeric: lining-nums; font-family: var(--serif); font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: 0.95; color: var(--hall-red); font-weight: 400; letter-spacing: -0.03em; }
.hall-dates span { display: block; }
.hall-caption { font-size: var(--t-small); color: var(--ink-soft); margin-top: 1rem; max-width: 30ch; }

/* ---------- News list ---------- */
.news { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.news li { display: grid; grid-template-columns: 1fr; gap: 0.35rem 2rem; padding-block: 1.25rem; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .news li { grid-template-columns: 9rem minmax(0, 1fr); } }
.news time { font-size: var(--t-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 0.25rem; }
.news h3 { font-size: 1.2rem; }
.news p { color: var(--ink-soft); margin-top: 0.35rem; max-width: 62ch; }

/* ---------- Laureate roll ---------- */
.roll-decade { margin-top: 3rem; }
.roll-decade > h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); letter-spacing: 0.04em; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
.roll { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { .roll { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.roll li { display: grid; grid-template-columns: 4.4rem 60px minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); align-items: center; }
.roll__photo { width: 60px; height: 75px; object-fit: cover; border-radius: 2px; background: var(--paper); }
.roll__photo--initials { display: grid; place-items: center; font-family: var(--serif); font-size: 1.15rem; color: var(--hall-red); background: var(--red-tint); }
.roll__photo--none { visibility: hidden; }
.roll__year { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--hall-red); font-variant-numeric: lining-nums tabular-nums; font-weight: 400; }
.roll__name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.roll__detail { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.3rem; }
.roll__detail a { font-weight: 600; }
.roll li.roll--gap .roll__year { color: var(--ink-soft); }
.roll li.roll--gap .roll__name { font-weight: 400; font-style: italic; color: var(--ink-soft); }

/* ---------- Criteria ---------- */
.criteria { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.75rem; }
.criteria li { padding-left: 1.25rem; border-left: 2px solid var(--hall-red); }
.criteria h3 { font-size: 1.2rem; }
.criteria p { color: var(--ink-soft); margin-top: 0.35rem; max-width: 60ch; }

/* ---------- Facts (key details) ---------- */
.facts { display: grid; grid-template-columns: 1fr; margin: 1.5rem 0 0; border-top: 1px solid var(--rule); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.facts div { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: var(--t-small); color: var(--ink-soft); }
.facts dd { margin: 0.2rem 0 0; font-family: var(--serif); font-size: 1.15rem; }

/* ---------- Principles ---------- */
.principles { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.principles li { font-family: var(--serif); font-size: 1.05rem; padding: 0.35rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; }

/* ---------- Disclosure (details) ---------- */
details.year { border-bottom: 1px solid var(--rule); }
details.year > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1.5rem;
  padding-block: 1rem; font-family: var(--serif); font-size: 1.35rem;
}
details.year > summary::-webkit-details-marker { display: none; }
details.year > summary::after { content: "+"; margin-left: auto; font-family: var(--sans); color: var(--ink-soft); font-size: 1.3rem; }
details.year[open] > summary::after { content: "\2212"; }
details.year > summary .yr { color: var(--hall-red); font-variant-numeric: tabular-nums; min-width: 3.2rem; }
details.year > summary .names { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); }
.winners { list-style: none; margin: 0 0 1.25rem; padding: 0 0 0 4.7rem; display: grid; gap: 0.4rem; }
.winners span { color: var(--ink-soft); display: inline-block; min-width: 7.5rem; font-size: 0.95rem; }
@media (max-width: 560px) {
  details.year > summary .names { display: none; }
  .winners { padding-left: 0; }
}

/* ---------- Video cards ---------- */
.videos { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 700px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.video { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; }
.video__play { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--hall-red); display: grid; place-items: center; margin-bottom: 0.5rem; }
.video__play::before { content: ""; border-left: 11px solid var(--paper); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.video h3 { font-size: 1.15rem; }
.video .who { font-weight: 600; font-size: 0.95rem; }
.video p { color: var(--ink-soft); font-size: 0.95rem; }
.video a.watch { margin-top: auto; padding-top: 0.5rem; font-weight: 600; font-size: 0.95rem; }

/* ---------- Reading list ---------- */
.filter-bar { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.filter-bar label { font-size: var(--t-small); color: var(--ink-soft); display: block; margin-bottom: 0.35rem; }
.search { width: 100%; max-width: 32rem; font: inherit; font-size: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font: inherit; font-size: 0.875rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reading-count { font-size: var(--t-small); color: var(--ink-soft); }
.topic { margin-top: 2.5rem; }
.topic h3 { font-size: 1.3rem; }
.refs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 78ch; }
.refs li { font-family: var(--serif); font-size: 1.02rem; line-height: 1.55; padding-left: 1.4rem; text-indent: -1.4rem; overflow-wrap: anywhere; }
.refs li a { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; white-space: nowrap; margin-left: 0.25rem; }
.empty-note { margin-top: 2rem; font-family: var(--serif); font-size: 1.1rem; color: var(--ink-soft); }

/* ---------- Board list ---------- */
.board { display: grid; grid-template-columns: 1fr; margin: 1.5rem 0 0; }
@media (min-width: 640px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.board div { padding-block: 0.8rem; border-bottom: 1px solid var(--rule); }
.board dt { font-size: var(--t-small); color: var(--ink-soft); }
.board dd { margin: 0.1rem 0 0; font-family: var(--serif); font-size: 1.15rem; }

.doc-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.doc-list a { font-weight: 600; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; max-width: 40rem; margin-top: 1.5rem; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.form legend { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.25rem; padding: 0; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field .hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--t-small); margin-top: 0.15rem; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--vellum); color: var(--ink);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: var(--t-small); color: var(--ink-soft); max-width: 60ch; }
.form-status { padding: 1rem 1.25rem; border-left: 3px solid var(--hall-red); background: var(--red-tint); font-size: 0.95rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.form-frame { margin-top: 1.5rem; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: #fff; }
.form-frame iframe { display: block; width: 100%; height: 1150px; border: 0; }

/* ---------- Notices ---------- */
.notice { padding: 1.25rem 1.5rem; background: var(--vellum); border-radius: 6px; max-width: 62ch; }
.notice strong { font-family: var(--serif); font-size: 1.1rem; display: block; margin-bottom: 0.25rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--vellum); margin-top: 0; font-size: 0.95rem; }
.site-footer .wrap { padding-block: 3rem 2.5rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .site-footer .wrap { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.site-footer h2 { font-family: var(--sans); font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); margin-bottom: 0.75rem; letter-spacing: 0.02em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--ink); }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 1.5rem; color: var(--ink-soft); font-size: var(--t-small); }
.footer-brand .brand__name { font-size: 1.15rem; }
.footer-brand p { color: var(--ink-soft); margin-top: 0.75rem; max-width: 42ch; }

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

/* ---------- Photographs ---------- */
.photo { margin: 0; }
.photo img { width: 100%; filter: grayscale(0.15); border-radius: 2px; }
.photo figcaption { font-size: var(--t-small); color: var(--ink-soft); margin-top: 0.75rem; max-width: 46ch; line-height: 1.5; }
.photo--portrait { max-width: 16rem; }
.photo--hall { max-width: 24rem; }
.life { color: var(--ink-soft); font-family: var(--sans); font-size: var(--t-small); margin-top: 0.4rem !important; }
.hall-dates + .photo { margin-top: 2rem !important; }

/* ---------- Soft Laureate band ---------- */
.laureate-feature__name { color: var(--red-deep); }
.laureate-feature__citation { opacity: 1; }
.band .button--light { background: var(--hall-red); color: #fff; border-color: var(--hall-red); }
.band .button--quiet { color: var(--hall-red) !important; border-color: var(--hall-red) !important; background: transparent; }
.band .button--quiet:hover { background: #fff; }
.band .portrait { border-color: #e3cfd0; background: #fff; }
.band .portrait__initials { color: var(--hall-red); }

/* ---------- Nomination page ---------- */
.nom-aside { display: flex; flex-direction: column; gap: 1rem; }
.nom-aside h2 { font-size: 1.6rem; }
.nom-criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.nom-criteria li { padding-left: 1rem; border-left: 2px solid var(--hall-red); color: var(--ink-soft); line-height: 1.5; }
.nom-criteria strong { color: var(--ink); font-weight: 600; }
@media (min-width: 860px) { .nom-aside { position: sticky; top: 1.5rem; } }
.field-error { display: block; color: var(--hall-red); font-size: var(--t-small); margin-top: 0.4rem; }

/* ---------- Laureate portraits: home grid ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; }
.more-link { font-weight: 600; font-size: 0.95rem; }
.mosaic { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tile a { display: block; text-decoration: none; color: var(--ink); }
.tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--vellum); }
.tile a:hover img, .tile a:focus-visible img { outline: 2px solid var(--hall-red); outline-offset: 2px; }
.tile__year { display: block; font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 1.1rem; color: var(--hall-red); margin-top: 0.45rem; line-height: 1.1; }
.tile__name { display: block; font-size: 0.85rem; line-height: 1.3; color: var(--ink-soft); margin-top: 0.15rem; }
.tile a:hover .tile__name { color: var(--ink); }
@media (max-width: 560px) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 0.75rem; } }

/* ---------- Laureate portraits: Laureate page cards ---------- */
.gallery { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.lcard { min-width: 0; scroll-margin-top: 1.5rem; }
.lcard__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--vellum); display: block; }
.lcard__year { font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 1.6rem; line-height: 1; color: var(--hall-red); margin-top: 0.7rem; }
.lcard__name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; margin-top: 0.3rem; }
.lcard__detail { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.35rem; line-height: 1.45; }
.lcard__detail a { font-weight: 600; }
.lcard--gap .lcard__blank { aspect-ratio: 4 / 5; border: 1px dashed var(--rule); border-radius: 2px; display: grid; place-items: center; padding: 1rem; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
.lcard--gap .lcard__year { color: var(--ink-soft); }
.lcard--gap .lcard__name { font-weight: 400; font-style: italic; color: var(--ink-soft); }
:target.lcard .lcard__photo { outline: 3px solid var(--hall-red); outline-offset: 3px; }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; } }

/* ---------- Nomination form details ---------- */
.req { color: var(--hall-red); }
.hint-inline { font-weight: 400; color: var(--ink-soft); font-style: italic; }
.word-count { display: block; text-align: right; font-size: var(--t-small); color: var(--ink-soft); margin-top: 0.3rem; font-variant-numeric: tabular-nums; }
.word-count.is-over { color: var(--hall-red); font-weight: 600; }
.nom-intro { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.nom-intro p, .nom-intro ul { margin: 0; }
.nom-intro ul { padding-left: 1.2em; display: grid; gap: 0.3rem; }
.nom-intro em { color: var(--ink); }
.docs input[type=file] { background: var(--paper); }
.docs-text { display: grid; gap: 1rem; font-size: 0.95rem; line-height: 1.55; }
.docs-text p { margin: 0; max-width: 62ch; }
@media (min-width: 860px) { .hero .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ---------- Draft mode (remove at launch) ---------- */
.draft-banner { margin: 0; background: var(--ink); color: #fff; text-align: center; font-size: 0.85rem; padding: 0.45rem max(16px, env(safe-area-inset-right, 0px)) 0.45rem max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- Video thumbnails (YouTube) ---------- */
.video { padding: 0 0 1.25rem; overflow: hidden; gap: 0.5rem; }
.video > :not(.video__thumb) { margin-inline: 1.25rem; }
.video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #1d2530; margin-bottom: 0.75rem; overflow: hidden; }
.video__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.video__thumb .video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.4rem; height: 3.4rem; margin: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.video__thumb .video__play::before { border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px; margin-left: 4px; }
.video__thumb:hover img, .video__thumb:focus-visible img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .video__thumb img { transition: none; } }

/* ---------- Footer credit ---------- */
.site-footer .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 2rem; }
.site-footer .legal p { margin: 0; }
.site-footer .credit a { color: inherit; text-decoration-color: var(--rule); }
.site-footer .credit a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- About page: two-part guide ---------- */
.about-guide { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 760px) { .about-guide { grid-template-columns: 1fr 1fr; } }
.about-guide__item { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-left: 3px solid var(--hall-red); border-radius: 4px; text-decoration: none; color: var(--ink); background: var(--paper); }
.about-guide__item:hover { background: var(--red-tint); }
.about-guide__title { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--red-deep); }
.about-guide__text { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.45; }
#foundation, #board, #reports, #bio-h { scroll-margin-top: 1.5rem; }
.photo--hall + .photo { margin-top: 2rem; }

/* ---------- Essay winners with titles ---------- */
.winners li.winner--detailed { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 0; align-items: baseline; }
.winners li.winner--detailed div { line-height: 1.5; }
.winners li.winner--detailed strong { font-weight: 600; }
.winners li.winner--detailed em { color: var(--ink-soft); }
@media (max-width: 560px) { .winners li.winner--detailed { grid-template-columns: 1fr; } }

/* ---------- Language switch at the far right ---------- */
.site-header .wrap > .nav { margin-left: auto; }
.header-end { display: flex; align-items: center; gap: 0.75rem; padding-left: 1.25rem; margin-left: 1.25rem; border-left: 1px solid var(--rule); }
.header-end .lang { font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; padding-block: 6px; }
.header-end .lang:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 1100px) {
  .header-end { margin-left: auto; border-left: 0; padding-left: 0; }
}

/* ---------- About page layout (v2) ---------- */
.about-guide { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); margin-bottom: 0; }
.page-head--after-guide { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Three Hall images in one row, same height: each figure's width follows its image's shape */
.hall-gallery { display: flex; flex-wrap: wrap; gap: 1.5rem 1.25rem; align-items: flex-start; padding-bottom: clamp(1rem, 0.5rem + 2vw, 2rem); }
.hall-gallery__item { margin: 0; flex: var(--ar) 1 0; min-width: 0; }
.hall-gallery__item img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; display: block; border-radius: 2px; }
.hall-gallery__item figcaption { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45; margin-top: 0.6rem; }
@media (max-width: 700px) {
  .hall-gallery__item--wide { flex-basis: 100%; }
}

/* Dates stay beside the biography as you read */
@media (min-width: 860px) {
  .hall-dates--sticky { position: sticky; top: 1.5rem; }
}

/* ---------- Donate page: embedded CanadaHelps form ---------- */
.donate-form { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 1rem; }
.donate-form iframe { width: 100% !important; border: 0; display: block; }
.donate-fallback { margin-top: 1rem; }

/* ---------- October 24 revisions ---------- */
/* Nomination button at the top of the Laureate page */
.head-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.75rem; }
.head-action p { margin: 0; max-width: 46ch; }

/* About the award: space between heading and photo */
[aria-labelledby="award-h"] .stack h2 + .photo { margin-top: 1.75rem; }

/* Full Laureate list: empty cards for years without a Laureate */
.gallery--full { margin-top: 2rem; }
.lcard--gap .lcard__blank { background: var(--vellum); border: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.6rem; }
.lcard--gap .lcard__blank p { margin: 0; }
.lcard__none { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }

/* Secondary roles on the nomination form */
.roles-other { border: 0; padding: 0; margin: 0; min-width: 0; }
.roles-other__legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.5rem; }
.roles-other__legend .hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--t-small); margin-top: 0.15rem; }
.checks { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.5rem; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--hall-red); margin: 0; }
.check.is-main { color: var(--ink-soft); cursor: default; }

/* Smaller footer text */
.site-footer { font-size: 0.85rem; }
.site-footer h2 { font-size: 0.78rem; }
.site-footer .footer-brand .brand__name { font-size: 1rem; }
.site-footer .legal { font-size: 0.78rem; }
.notice p + p { margin-top: 0.6rem; }

/* Form hints sit just after their label (outside it), so Netlify shows clean field names */
.field label + .hint { margin-top: -0.2rem; margin-bottom: 0.4rem; }

/* ---------- Standalone nominations site header ---------- */
.mini-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.95rem; }
.mini-nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.mini-nav a:hover { text-decoration: underline; }
.mini-nav .lang { color: var(--ink-soft); }
@media (max-width: 560px) { .mini-nav .home-link { display: none; } }