/* Mahasabha Youth Summit — shared theme and layout.
   Used by index.html and apply.html. Page-specific styles stay in each page. */

/* =============================================================================
   Mahasabha Youth Summit — theme (v3)
   -----------------------------------------------------------------------------
   Two systems, matched to each other.

   THE THREE (kept — their spirit, their values)
     #4A7B9D  steel    the blue. Now the loudest voice: hero, call, accents.
     #433633  brown    the warm dark. Quiet now: footer, the chip, a rule.
     #F8F4A6  butter   the highlight. Small doses: button, chips, selection.

   THE MONOCHROME (added — warm-tinted so it sits with the brown)
     #FFFFFF  white    the page. The default ground.
     #F2EFEA  mist     the soft ground. One section breathes on it.
     #1C1917  jet      the ink. All reading text, and one dark section.
     warm greys        for secondary and tertiary text, and the hairlines.

   MEASURED, NOT TASTED — the numbers that decided the roles
     white  on steel    4.55:1   passes AA normal — white text may live on steel
     butter on steel    4.06:1   large text only (the hero's italic line)
     steel  on white    4.55:1   fine at display sizes; below 18px use steel-deep
     steel-deep on white 7.9:1   the small blue that is allowed to be small
     jet    on white   16.8:1   all reading text
     grey-700 on white  7.9:1   lede, secondary reading
     grey-600 on white  5.6:1   labels and meta — the floor for small text
     butter on jet     16.9:1   chips on the dark section
     white  on brown   11.4:1   the footer
     steel-lift on jet  6.8:1   data on the dark section

   TYPE — three families, three jobs, and they never cross.
     Newsreader — display AND reading. A serif that holds a magazine,
                  a letter and a headline without changing clothes.
     Archivo    — structure. Labels, nav, buttons. Small, tracked, quiet.
     IBM Plex   — data. Codes, dates, numbers. Tabular. One weight.
   All three are self-hosted Latin subsets with their variable axes intact,
   so hierarchy comes from size, weight and space — never from a fourth face.
   The files are local: no third-party font request, no cookie, no extra DNS.
============================================================================ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-roman.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/permanent-marker-latin.woff2") format("woff2");
}

:root {
  /* ---- the three, kept ------------------------------------------------- */
  --steel:      #4A7B9D;
  --steel-deep: #2F5573;   /* the text-safe blue for sizes under 18px      */
  --steel-lift: #7FA8C4;   /* the blue that may stand on jet or brown      */

  --brown:      #433633;
  --brown-deep: #352B28;
  --butter:     #F8F4A6;
  --butter-soft:#FAF7D5;   /* the hush of butter — the founder's ground    */

  /* ---- the monochrome --------------------------------------------------- */
  --white:      #FFFFFF;
  --jet:        #1C1917;

  --grey-700:   #57504A;   /* secondary reading                7.9:1      */
  --grey-600:   #6E675F;   /* labels and meta — the small floor 5.6:1      */

  --hairline:   #E4E0D9;   /* every rule on a light ground                 */

  /* ---- grounds, inverted ------------------------------------------------ */
  --text-2:        var(--grey-700);
  --text-3:        var(--grey-600);
  --rule:          var(--hairline);

  /* text on dark grounds */
  --on-dark:       #F7F4F1;
  --on-dark-2:     #BCB4AB;
  --rule-dark:     #3E3733;

  /* ---- type ------------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-struct:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --size-display: clamp(1.9rem, 4.2vw, 3.25rem);
  --size-title:   clamp(1.3rem, 2.2vw, 1.75rem);
  --size-lede:    clamp(1.125rem, 1.5vw, 1.375rem);
  --size-body:    clamp(1.0625rem, 1vw, 1.1875rem);
  --size-small:   0.9375rem;
  --size-label:   0.72rem;
  --size-data:    0.8rem;

  /* ---- space ------------------------------------------------------------ */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.25rem;
  --sp-6: 3.5rem;
  --sp-7: clamp(4rem, 10vh, 6.5rem);
  --sp-8: clamp(5.5rem, 14vh, 10rem);

  --gutter:  max(clamp(1.25rem, 4.5vw, 4.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --bar-h:   2.75rem;

  --measure:      64ch;   /* reading text                                  */
  --measure-lede: 46ch;   /* a lede, never a paragraph                     */

  /* ---- motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.35s;
  --dur:       0.7s;
  --dur-slow:  1.05s;
  --stagger:   45ms;
}


/* =============================================================================
   Mahasabha Youth Summit — the site (v3)
   -----------------------------------------------------------------------------
   One pattern, repeated. Every chapter opens the same way:

       01   Headline                            —————————————   Six lines
       ↑    ↑                                   ↑              ↑
       number (mono)  display serif            rule           meta (label)

   then lede, then content. Left rail never moves; grounds alternate to chunk
   the page; exactly two blue beats (open, close) and one dark beat (standards)
   carry the eye through. Nothing is centred except the closing call.

   Colour comes from theme.css only. This file invents no hex value.
============================================================================ */

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--jet);
  font-family: var(--font-display);
  font-size: var(--size-body);
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--steel-deep));
  outline-offset: 3px;
}
::selection { background: var(--butter); color: var(--jet); }

.skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--butter); color: var(--jet);
  padding: 0.75rem 1rem; font-family: var(--font-struct);
  font-size: var(--size-label); letter-spacing: 0.12em; text-transform: uppercase;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* =============================================================================
   VOICES — three families, three jobs, never crossing.
============================================================================ */

/* display — Newsreader carries every headline. Its optical axis gives it
   contrast at size and calm in a paragraph; it is the only display voice. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

/* structure — Archivo, small and tracked. Labels, nav, buttons, numbers-in-
   tables. It never gets loud; loudness is the serif's job. */
.label {
  font-family: var(--font-struct);
  font-weight: 600;
  font-size: var(--size-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* data — mono. Codes, dates, serial numbers. Tabular, never loud. */
.data {
  font-family: var(--font-data);
  font-weight: 400;
  font-size: var(--size-data);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
/* reading */
.lede {
  font-size: var(--size-lede);
  line-height: 1.5;
  color: var(--text-2);
  max-width: var(--measure-lede);
  margin-bottom: var(--sp-4);
}
/* =============================================================================
   GROUNDS
   Each ground re-points the same five variables, so every rule, label and
   focus ring inside a section re-tones itself. No component knows its colour.
============================================================================ */
.on-butter{ background: var(--butter-soft); }
.on-jet {
  background: var(--jet);
  color: var(--on-dark);
  --text-2: var(--on-dark-2);
  --text-3: var(--on-dark-2);
  --rule: var(--rule-dark);
  --focus-ring: var(--steel-lift);
}
.on-steel {
  background: var(--steel);
  color: var(--white);
  /* White is the only secondary tone that clears 4.5:1 on this steel. */
  --text-2: #fff;
  --text-3: #fff;
  --rule: rgba(255, 255, 255, 0.28);
  --focus-ring: var(--white);
}
.on-brown {
  background: var(--brown);
  color: var(--on-dark);
  --text-2: rgba(255, 255, 255, 0.74);
  --text-3: rgba(255, 255, 255, 0.66);
  --rule: rgba(255, 255, 255, 0.16);
  --focus-ring: var(--butter);
}

/* =============================================================================
   THE PATTERN — every section is this
============================================================================ */
.section { padding: var(--sp-8) var(--gutter); }

.eyebrow { margin-bottom: var(--sp-5); }
.eyebrow__title {
  font-size: var(--size-display);
  text-wrap: balance;
}

/* =============================================================================
   THE BAR — slim. It gets out of the way.
============================================================================ */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--gutter);
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.bar[data-stuck="true"] { border-bottom-color: var(--hairline); }

.bar__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.bar__chip {
  width: 1.25rem; height: 1.25rem;
  background: var(--brown); color: var(--butter);
  display: grid; place-items: center;
  font-family: var(--font-struct);
  font-weight: 700; font-size: 0.56rem; letter-spacing: 0;
}
.bar__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.bar__nav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin-inline: auto;
}
.bar__nav a {
  position: relative;
  text-decoration: none;
  color: var(--grey-600);
  transition: color var(--dur-fast) var(--ease);
}
.bar__nav a:hover { color: var(--jet); }
.bar__right { color: var(--grey-600); }

/* every link on the page draws its own underline */
.draw-link { position: relative; text-decoration: none; }
.draw-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.3em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-fast) var(--ease);
}
.draw-link:hover::after, .draw-link:focus-visible::after { transform: scaleX(1); }

@media (max-width: 720px) { .bar__nav { display: none; } .bar__right { margin-left: auto; } }

/* =============================================================================
   HERO — the first blue beat. White type, one butter line, nothing else.
============================================================================ */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--bar-h) + var(--sp-4)) var(--gutter) var(--sp-5);
}
.hero__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  color: var(--text-3);
}
.hero__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: var(--sp-6);
  border-top: 1px solid var(--rule);
}
.fact { padding: var(--sp-3) var(--sp-4) 0 0; }
.fact dt { color: var(--text-3); }
.fact dd {
  margin: 0.45rem 0 0;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (max-width: 560px) {
  .hero { min-height: 0; grid-template-rows: auto auto auto; padding-top: calc(var(--bar-h) + 2.5rem); }
  .hero__foot { margin-top: 2.5rem; grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   LISTS — one honest table, used by "what a MUN is" and "before you arrive".
   The label column is the rail; the text column never moves.
============================================================================ */
.rows {
  border-top: 1px solid var(--rule);
  max-width: 68rem;
}
.rows__row {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr;
  column-gap: clamp(1.5rem, 4.5vw, 4rem);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.rows__k { color: var(--text-3); padding-top: 0.45em; transition: color var(--dur-fast) var(--ease); }
.rows__v { color: var(--text-2); max-width: 62ch; }
.rows__row:hover .rows__k { color: var(--steel-deep); }

@media (max-width: 640px) {
  .rows__row { grid-template-columns: 1fr; row-gap: var(--sp-2); }
  .rows__k { padding-top: 0; }
}

/* =============================================================================
   THE FOUNDER'S LETTER — the one warm ground. Butter, held at a hush.
============================================================================ */
.letter { max-width: var(--measure); }
.letter p {
  color: var(--text-2);
  margin-bottom: 0.9em;
}
.letter p:first-of-type {
  font-size: 1.3em;
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: -0.012em;
  color: var(--jet);
  margin-bottom: 0.75em;
}
.letter__sign {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.letter__name { font-size: 1.15rem; font-style: italic; }
.letter__role { color: var(--steel-deep); margin-top: 0.5rem; }

/* =============================================================================
   APPLY — steps, then the dates. The steps are the page's spine in miniature:
   number (mono), title (serif), text.
============================================================================ */
.steps { border-top: 1px solid var(--rule); max-width: 62rem; }
.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: clamp(1rem, 3vw, 2.25rem);
  align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
}
.step__no { color: var(--steel-deep); padding-top: 0.35em; }
.step h3 { font-size: var(--size-title); }
.step p { color: var(--text-2); max-width: 56ch; margin-top: 0.6rem; }

.dates { margin-top: var(--sp-7); max-width: 54rem; }
.dates__head { color: var(--text-3); margin-bottom: var(--sp-3); }
.dates__row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  column-gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.dates__row:first-of-type { border-top: 1px solid var(--rule); }
.dates__k { color: var(--text-3); }
.dates__v { font-size: 1.1rem; }
@media (max-width: 560px) {
  .step { grid-template-columns: 2.5rem 1fr; }
  .dates__row { grid-template-columns: 1fr; row-gap: 0.15rem; }
}

/* =============================================================================
   STANDARDS — awards and conduct, carried on jet. The one dark beat: the
   page's rules read like a plaque. Butter returns in the chips.
============================================================================ */
.awards-lede { margin-bottom: var(--sp-5); }
.awards-list { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 44rem; }
.award {
  font-family: var(--font-struct);
  font-weight: 600;
  font-size: var(--size-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7em 1.05em;
  border: 1px solid var(--steel-lift);
  color: var(--butter);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.award:hover { background: var(--butter); border-color: var(--butter); color: var(--jet); }

.rules { max-width: 58rem; }
.rules li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: 1rem;
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.rules li:last-child { border-bottom: 0; }
.rules .data { color: var(--steel-lift); }
.rules p { color: var(--text-2); max-width: 60ch; }

/* =============================================================================
   THE CALL — the second blue beat. The one centred thing on the page,
   because a closing is allowed to be.
============================================================================ */
.call {
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
  text-align: center;
  padding: var(--sp-8) var(--gutter);
}
.call__line {
  font-size: clamp(1.8rem, 4.2vw, 3.1rem);
  max-width: 22ch;
  line-height: 1.12;
}
.call__note { color: var(--text-3); }

.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-family: var(--font-struct);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  background: var(--butter);
  color: var(--jet);
  transition: color var(--dur-fast) var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jet);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--butter); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

/* =============================================================================
   FOOTER — brown, once, as the warm close.
============================================================================ */
.foot { padding: var(--sp-7) var(--gutter) var(--sp-4); }
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-5);
}
.foot__col .label { color: var(--text-3); }
.foot__col ul { margin-top: var(--sp-3); display: grid; gap: 0.5rem; }
.foot__col a { color: var(--text-2); font-size: var(--size-small); }
.foot__col a:hover { color: var(--on-dark); }
.foot__note {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  color: var(--text-3);
  font-size: var(--size-small);
  max-width: 62ch;
}

/* =============================================================================
   MOTION — text-driven, once, and only as the reader arrives.
   Two moves, used everywhere, so the page has one motion grammar:
     · words rise out of a mask (headlines)
     · blocks rise a touch (body, rows, chips) — staggered per index
   Scoped to .js: with no script nothing is ever hidden.
============================================================================ */
.w  { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.w__i  { display: inline-block; }

.js [data-anim="rise"], .js [data-anim="fade"] { opacity: 0; }
.js [data-anim="rise"] { transform: translateY(1rem); }
.js .words .w__i { transform: translateY(115%); }

.js [data-anim="rise"][data-shown="true"] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-anim="fade"][data-shown="true"] {
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .words[data-shown="true"] .w__i {
  transform: translateY(0);
  transition: transform var(--dur) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 42ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anim], .js .words .w__i {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn::before { transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- print: a conference programme is a thing people print ---------------- */
@media print {
  body { background: #fff; color: #000; }
  .bar, .skip { display: none !important; }
  .on-steel, .on-jet, .on-brown, .on-butter { background: #fff !important; color: #000 !important; }
  .on-steel .data, .on-steel .label, .on-jet .data, .on-brown .data { color: #333 !important; }
  .section, .hero, .foot, .call { padding: 1.5cm 0; }
  .hero { min-height: 0; }
  .award { border-color: #999 !important; color: #000 !important; }
  .chip, .btn { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  [data-anim], .words .w__i { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}

/* =============================================================================
   v4 — authenticity pass
   -----------------------------------------------------------------------------
   The page keeps the cassette and the steel/butter/brown palette. What goes is
   the interface costume: no tiny tracked mono labels, no outlined chip rows,
   no hairline stacks, no hard-shadow buttons. Labels read as sentences; data is
   set in the text face; surfaces separate by tone and space.
   Every rule here is an override so the audited v3 layer stays intact beneath.
============================================================================= */
:root {
  --size-label: 0.8125rem;   /* 13px floor for anything meant to be read */
  --size-data:  0.875rem;
  --mist:       #F2EFEA;
}

.label {
  font-family: var(--font-struct);
  font-weight: 600;
  font-size: var(--size-label);
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.5;
}

.data {
  font-family: var(--font-struct);
  font-weight: 500;
  font-size: var(--size-data);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* buttons: one flat fill, normal sentence case, no costume shadow */
.btn {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* the hero facts sit on space, not a rule */
.hero__foot { border-top: 0; margin-top: var(--sp-5); }
.fact { padding-top: var(--sp-2); }

/* a letter signs off with space */
.letter__sign { border-top: 0; padding-top: 0; margin-top: var(--sp-5); }

/* steps: list rhythm, no rules; dates: a tone-stepped table */
.steps { border-top: 0; max-width: none; }
.step { border-bottom: 0; padding: var(--sp-4) 0 var(--sp-5); }
.dates { margin-top: 0; max-width: none; }
.dates__row { border: 0; padding: 0.8rem 1rem; }
.dates__row:first-of-type { border-top: 0; }
.dates__row:nth-child(even) { background: var(--mist); }

/* steps and dates share the width instead of stacking in the left half */
.apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  margin-top: var(--sp-5);
}
.apply__side { display: grid; gap: var(--sp-4); align-content: start; }
.apply__side .apply-cta { justify-self: start; }
.apply__side .dates__head { margin-bottom: var(--sp-1); }

/* awards: filled tags, not outlined boxes */
.awards-list { max-width: none; gap: 0.5rem; }
.award {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.65em 0.9em;
  border: 0;
  background: #2A2422;
  color: var(--butter);
}
.award:hover { background: var(--butter); color: var(--jet); }

/* conduct: a two-column code, separated by air */
.rules { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem); }
.rules li { border-bottom: 0; padding: var(--sp-3) 0; grid-template-columns: 1.6rem 1fr; }
.rules p { max-width: 42ch; }

/* the founder's letter runs as a printed two-column letter on wide screens */
@media (min-width: 960px) {
  .letter { max-width: none; columns: 2; column-gap: clamp(2.5rem, 6vw, 6rem); }
  .letter p:first-of-type { column-span: all; max-width: 34ch; }
  .letter__sign { column-span: all; }
}

/* footer closes with the copyright, no rule above it */
.foot__note { border-top: 0; padding-top: 0; margin-top: var(--sp-5); }
.foot__copy { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--size-small); }

/* next-edition band */
.on-mist { background: var(--mist); }
.next {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.next__head { margin: 0; }
.next__body { margin: 0; max-width: 56ch; color: var(--text-2); }
.next__note { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--size-small); }

@media (max-width: 900px) {
  .apply__grid, .next { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .letter { columns: 1; max-width: var(--measure); }
  .letter p:first-of-type { column-span: none; }
}