/* ==========================================================================
   Miss Universe France — design system
   Phase 0/1: tokens, shell, homepage.

   Direction: modern French luxury. Editorial, not pageant. The rules are
   (1) one display face doing all the emotional work, (2) enormous white
   space, (3) a near-monochrome palette with a single blue that is used
   about six times on the whole page, (4) no gold gradients, no crown
   iconography, no drop shadows.

   Everything here is written to survive being served from ANY base path —
   /preview/muf-<hash>/ today, the real domain later — so there is not a
   single root-relative URL in this file or the markup.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette. Near-black on warm ivory; the blue is the only chromatic note
     and it earns its place by being rare. */
  /* Warmed. Every institution measured for this — Cannes rgb(24,23,23),
     Nobel rgb(46,42,37) — uses a warm near-black and none uses #000. The old
     #12121a was a blue-black, which is the colour a generator reaches for. */
  /* DARK EDITION, 2026-08-16, by request. The semantics are unchanged —
     --paper is still "the page", --ink is still "the text" — only the values
     flip, and they stay WARM: a dark site in blue-blacks is the same machine
     tell a light site in blue-blacks was. --lit is the one new token: the
     original ivory, kept for text that sits on the deepest panels, where
     the flipped --paper would vanish. */
  --ink:        #f0eade;
  --ink-soft:   #c2b8a8;
  /* Carries every eyebrow, countdown label and date. 5.4:1 on --paper. */
  --ink-faint:  #9a9186;
  --paper:      #141210;
  --paper-warm: #1c1915;
  --rule:       #3b352c;
  /* Two rule weights, two jobs. A single 1px grey everywhere is a template
     signature; Nobel runs 0.5px for structural chrome and 1px for content
     divisions, in two different warm greys. */
  --rule-fine:  #29251f;
  /* The dark passage inverts: on a dark page the deepest black is the beat.
     Ordered by depth: --night < --paper < --paper-warm < the "white" strip. */
  --night:      #0a090b;
  --blue:       #16255c;
  --blue-light: #2c407f;
  /* The licensor's champagne, read off missuniverse.com. On the dark ground
     it clears 5:1, so unlike the light edition it may carry text — sparingly,
     or the page turns pageant-gold. */
  --gold:       #b49b57;
  --gold-deep:  #cbb271;   /* the brighter cut, for gold text on the deepest panels */
  --lit:        #f7f4ee;   /* the original ivory: text on --night and --blue */

  /* Type. See assets/fonts/fonts.css for why both are variable and why the
     previous pair was replaced. */
  /* Fraunces carries the display voice, Schibsted Grotesk everything
     functional. Both variable — see assets/fonts/fonts.css for why that
     matters more than which. */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Schibsted Grotesk", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* A fluid scale. clamp() everywhere so there is no breakpoint at which
     the headline is the wrong size. */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem,  1.3rem  + 1vw,   2.1rem);
  /* Section titles. This step exists because it was MISSING, and its absence
     was the single flattest thing about the site: `.pagehead h1` and every
     `.section-head h2` on the page both computed to 51.12px, so a reader got
     seven equally loud headlines per page and no signal about which one was
     the roof of the page and which were rooms inside it. */
  --step-2h: clamp(1.7rem,  1.38rem + 1.35vw, 2.6rem);
  --step-3:  clamp(2rem,    1.6rem  + 2vw,   3.2rem);
  --step-4:  clamp(2.8rem,  1.9rem  + 4.4vw, 6.5rem);
  /* One moment per page allowed to be enormous. Cannes runs its year at 30vw
     and spends 47 of its 48:1 range in that one place; the rest of the page is
     quiet because of it, not in spite of it. */
  --step-5:  clamp(5.5rem,  1rem    + 24vw,  26rem);

  /* Section padding is a VARIABLE, not a constant. Every .panel on the site
     computed to exactly 99px top and bottom, 297 times — which is why
     scrolling felt like one beat repeated. Cannes uses 48/48, 96/96 and 0/0
     inside a single page. */
  --pad:        clamp(4.5rem, 11vh, 9rem);
  --pad-tight:  clamp(2rem, 5vh, 3rem);
  --pad-air:    clamp(7rem, 17vh, 13rem);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Optical size, driven from the type scale.
   This is the whole reason for the typeface change: a high-contrast serif needs
   a different drawing at 16px than at 100px, and the previous face shipped one
   drawing for both. Set opsz to roughly the size the text is actually rendered
   at and the hairlines take care of themselves. */
.opsz-display { font-variation-settings: "opsz" 144; }
.opsz-text    { font-variation-settings: "opsz" 14; }

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* The sticky masthead is ~4.25rem, so an unpadded in-page jump lands the
     target underneath it. */
  scroll-padding-top: 5.5rem;
}
/* scroll-behavior is motion. It belongs behind the same guard as the entrance
   animation, not applied unconditionally. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  /* -webkit-font-smoothing: antialiased is deliberately NOT set.
     It thins every stroke on macOS relative to the default subpixel rendering.
     On the previous hairline face that was part of why the display type broke
     up; on any face it is trading legibility for a look. */
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  /* Measured across festival-cannes.com, eurovision.tv, ssense.com and
     nobelprize.org: display type is set between 0.80 and 1.08. Not one of them
     leads a large headline at body line-height. Ours was 1.06 everywhere,
     which is fine at 33px and slack at 86px — so it tightens as it grows. */
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { line-height: 1.0; letter-spacing: -0.018em; }
/* Anything set in the display face BELOW about 28px needs the text cut, not
   the display cut. These are the places the old face was quietly failing. */
.crown__year, .crown__name, .factrow dd, .record th, .record td,
.stat__value, .wordmark, .prize__what {
  font-variation-settings: "opsz" 18;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--blue); color: var(--lit); }

/* Keyboard focus must always be visible, and must be visible on both the
   ivory and the blue sections. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 1px;
}
.panel--blue :focus-visible { outline-color: var(--lit); }

.skip-link {
  position: absolute;
  left: 0.5rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--lit);
  color: #14120f;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The small letterspaced label that opens most sections. Doing the tracking
   in the type rather than with a decorative rule keeps the page quiet. */
.eyebrow {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.panel--blue .eyebrow { color: rgba(247, 244, 238, 0.6); }

.lede {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  max-width: var(--measure);
  color: var(--ink-soft);
}
.panel--blue .lede { color: rgba(247, 244, 238, 0.8); }

.panel {
  padding-block: var(--pad);
  border-top: 1px solid var(--rule-fine);
}
/* Height modifiers. A page should use at least two of these — a run of
   identically tall sections is the loudest machine tell there is. */
.panel--tight { padding-block: var(--pad-tight); }
.panel--air   { padding-block: var(--pad-air); }
.panel--flush { padding-block: 0; }

.panel--warm { background: var(--paper-warm); }
/* A white strip between a cream section and a dark one is punctuation. Cannes
   uses one at 0.30vh — four sections away from a 3.32vh epic. */
.panel--white { background: #221e19; border-top-color: var(--rule); }
.panel--night {
  background: var(--night);
  color: var(--lit);
  border-top-color: var(--night);
}
.panel--night .eyebrow { color: rgba(247, 244, 238, 0.55); }
.panel--night .lede    { color: rgba(247, 244, 238, 0.78); }
.panel--night p        { color: rgba(247, 244, 238, 0.8); }
.panel--night h2, .panel--night h3 { color: var(--lit); }
.panel--night :focus-visible { outline-color: var(--gold); }
.panel--blue {
  background: var(--blue);
  color: var(--lit);
  border-top-color: var(--blue);
}

.section-head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* Centred content, by request — but only where the section sits on the page
   axis. Inside .grid12 the head keeps its editorial left edge. */
.shell:not(.grid12) > .section-head {
  justify-items: center;
  text-align: center;
}
.shell:not(.grid12) > .section-head .lede { margin-inline: auto; }
.shell:not(.grid12) > .section-more { text-align: center; }
.shell:not(.grid12) > .linkpair { justify-content: center; }
.section-head h2 { font-size: var(--step-2h); }

.link-quiet {
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s var(--ease);
}
.link-quiet:hover { opacity: 0.55; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* The brand band: the official wordmark, centred, first thing on the page.
   It scrolls away with the page — the slim nav below is what sticks — so the
   logotype can hold real presence without permanently taxing the viewport. */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule-fine);
}
.masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.3rem, 3.5vh, 2.2rem);
}
.brand { display: inline-block; line-height: 0; }
.brand img {
  display: block;
  width: clamp(200px, 8rem + 16vw, 318px);
  height: auto;
}
.brand--footer img { width: clamp(180px, 22vw, 240px); }



/* The one loud action on the site. Everything else is a quiet underlined
   link; the two official forms get an actual button, in the deep gold that
   passes contrast as text. Colour-only transition, per the motion rules. */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #14120f;
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 1rem 2.1rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--gold-deep); border-color: var(--gold); }
/* An email address is a proper noun: it keeps its case and its natural
   spacing, and it may break at any point rather than overflow its card. */
.btn--mail {
  text-transform: none;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
/* The quiet line under a button that says where the data goes. */
.btn-row { margin-top: 1.8rem; }
.btn-note {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
  max-width: 46ch;
}
.panel--night .btn-note, .panel--blue .btn-note { color: rgba(247, 244, 238, 0.62); }

/* The press boilerplate: a paragraph meant to be selected and copied, so it
   is visually a quotation, set off by the gold rule. */
.boiler {
  margin: 1.6rem 0 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
  font-family: var(--display);
  font-size: var(--step-0);
  line-height: 1.6;
  color: rgba(247, 244, 238, 0.88);
}

.lang {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lang a, .lang span { text-decoration: none; }
.lang [aria-current="true"] { color: var(--ink); }
.lang a { color: var(--ink-faint); transition: color 0.25s var(--ease); }
.lang a:hover { color: var(--ink); }
.lang__sep { color: var(--rule); }

/* --------------------------------------------------------------------------
   Main navigation

   Sits BELOW the sticky masthead and does not stick itself. On a phone eight
   items simply wrap onto two or three rows: no hamburger, no disclosure
   widget, no JavaScript, and every destination visible at once. A scrolling
   row would have been tidier and would have hidden half the site.
   -------------------------------------------------------------------------- */

.mainnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 14, 12, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.mainnav ul {
  list-style: none;
  margin: 0;
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
}
@media (min-width: 46rem) {
  .mainnav ul { padding-block: 1.15rem; gap: 0.6rem clamp(1.5rem, 3.5vw, 3rem); }
}
.mainnav .shell {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.mainnav a {
  display: inline-block;
  /* "A lot bigger", by request: this is the primary wayfinding row now that
     the brand band above it is pure logotype. */
  font-size: clamp(0.92rem, 0.85rem + 0.4vw, 1.1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* The language toggle lives in the nav bar, right edge, so the brand band
   above holds nothing but the centred logotype. */
.mainnav .lang { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
@media (max-width: 52rem) {
  .mainnav .lang { position: static; transform: none; margin-left: 1.75rem; }
}
.mainnav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.mainnav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Page head (every page except the homepage)
   -------------------------------------------------------------------------- */

.pagehead {
  padding-block: clamp(3.5rem, 9vh, 7rem) clamp(2.5rem, 6vh, 4.5rem);
}
.pagehead h1 {
  font-size: var(--step-3);
  margin-block: 1.25rem 0;
}
/* No italic file ships (see fonts.css), so if an <em> ever lands back in a
   heading it must not fall through to a synthesised oblique. It gets weight
   instead — which is a real distinction in a variable font. */
.pagehead h1 em, .hero h1 em { font-style: normal; font-variation-settings: "opsz" 144, "wght" 600; }
.pagehead .lede { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.pagehead + .panel { border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Was 88svh with the content ending around 40% down it — so the first
     screen was almost entirely empty ivory, which reads as unfinished rather
     than as luxury. White space needs an object to be around. Now the hero is
     sized to its content and the dark 2026 band crests into the fold, which is
     what gives the first screen something to look at. */
  min-height: min(68svh, 40rem);
  padding-block: clamp(3rem, 7vh, 5rem);
  overflow: hidden;
}

/* A single very soft warm wash, off-centre. It stops the ivory reading as
   flat white without introducing an image we do not have the rights to. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -30%;
  height: 120%;
  background: radial-gradient(
    55% 55% at 50% 30%,
    rgba(180, 155, 87, 0.08) 0%,
    rgba(180, 155, 87, 0) 70%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero__lede { margin-inline: auto; }
.hero__meta { justify-content: center; }

.hero h1 {
  font-size: var(--step-4);
  margin-block: 1.25rem 0;
}
/* The hero headline is a question now, not a two-part slogan, so it wraps on
   its own <br> and needs no second-line treatment. */

.hero__lede {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 46ch;
}

.hero__meta {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__meta .dot { color: var(--rule); }

/* --------------------------------------------------------------------------
   Countdown
   -------------------------------------------------------------------------- */

/* Four units never fit on one line at 375px — "107" alone is three didone
   digits. A 2×2 block is deliberate; letting flex wrap gave an orphaned
   fourth unit hanging under the row. */
.countdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 1.75rem clamp(2rem, 12vw, 4rem);
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 34rem) {
  .countdown {
    grid-template-columns: repeat(4, minmax(0, max-content));
    gap: clamp(1.5rem, 5vw, 4rem);
  }
}

.countdown__unit {
  display: grid;
  gap: 0.4rem;
  min-width: 4.5rem;
  justify-items: center;
  text-align: center;
}
/* Reserve three tabular digits so the grid does not reflow when the placeholder
   em-dash is replaced by "107" on the first tick. */
.countdown__value { min-width: 3ch; }
.countdown__value {
  font-family: var(--display);
  /* Twice the presence of the first version: the countdown IS the hero's
     object now, and on the dark ground the gold can carry it. */
  font-size: clamp(2.8rem, 1.8rem + 5vw, 5.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
  /* Reserve the space so the row does not reflow on the first tick. */
  min-height: 1em;
}
.countdown__label {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel--blue .countdown__label { color: rgba(247, 244, 238, 0.55); }

/* --------------------------------------------------------------------------
   Legacy
   -------------------------------------------------------------------------- */

.legacy {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.crown {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.panel--blue .crown { border-top-color: rgba(247, 244, 238, 0.25); }

.crown__year {
  font-family: var(--display);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 0.9;
  font-variant-numeric: lining-nums;
}
.crown__name {
  font-size: var(--step-1);
  letter-spacing: 0.04em;
}
.crown__note {
  font-size: var(--step-0);
  color: var(--ink-soft);
  max-width: 34ch;
}
.panel--blue .crown__note { color: rgba(247, 244, 238, 0.72); }

/* --------------------------------------------------------------------------
   Editorial columns
   -------------------------------------------------------------------------- */

.columns {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.columns h3 {
  font-size: var(--step-2);
  margin-bottom: 0.9rem;
}
.columns p { color: var(--ink-soft); }
.panel--blue .columns p { color: rgba(247, 244, 238, 0.75); }

/* Two-up editorial split: a sticky heading beside flowing body copy. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split__head { position: sticky; top: 7rem; }
}
.split__head h2 { font-size: var(--step-2h); margin-top: 1.25rem; }
.split__body { display: grid; gap: 1.5rem; max-width: var(--measure); }
.split__body p { color: var(--ink-soft); }
.panel--blue .split__body p { color: rgba(247, 244, 238, 0.78); }

/* --------------------------------------------------------------------------
   Prize list
   -------------------------------------------------------------------------- */

.prize {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.panel--blue .prize li {
  border-bottom-color: rgba(247, 244, 238, 0.22);
}
.panel--blue .prize li:first-child {
  border-top-color: rgba(247, 244, 238, 0.22);
}
.prize li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.prize li:first-child { border-top: 1px solid var(--rule); }
.prize__what {
  font-family: var(--display);
  font-size: var(--step-2);
}
.prize__detail {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel--blue .prize__detail { color: rgba(247, 244, 238, 0.6); }

/* --------------------------------------------------------------------------
   Tables — the comparison table and the palmarès

   Both scroll inside their own container rather than letting the page scroll
   sideways, which is the one thing a phone must never do.
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* A focusable scroll container so a keyboard user can reach the overflow. */
  scrollbar-width: thin;
}
.table-scroll:focus-visible { outline-offset: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--step-0);
}
table th, table td {
  padding: 1.1rem 1.5rem 1.1rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
table thead th {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--ink);
  white-space: nowrap;
}
table tbody th {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-1);
  white-space: nowrap;
}
table td { color: var(--ink-soft); }

/* The two crown years, marked so the eye finds them before it reads. */
.record .is-win th, .record .is-win td { color: var(--ink); }
.record .is-win td:last-child { font-weight: 400; }
.record .is-win th::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  margin-top: 0.4rem;
  background: var(--gold);
}
.row-note {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: 0.35rem;
  max-width: 34ch;
}
.compare td, .compare th { min-width: 11rem; }

/* French ordinals inside uppercased text.
   Fifteen rules on this page set text-transform: uppercase, and the hero
   eyebrow is one of them — so "75<sup>e</sup> Miss Universe" was rendering as
   "75E MISS UNIVERSE". A capital E is not an ordinal in French, it just looks
   like a typo on the first line of the homepage. The superscript keeps its own
   case wherever it appears. */
sup {
  text-transform: none;
  font-size: 0.62em;
  line-height: 0;
  vertical-align: 0.42em;
}

/* Source marks on the palmarès.
   A row that has been checked against its own edition record carries a link to
   that record; a row that has not says so. Deliberately quiet — this is an
   audit trail for the one reader in a hundred who cares, not a design feature —
   but it must never be invisible, because an unchecked row presented as fact is
   the failure this whole mechanism exists to prevent. */
.src {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blue);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.25em;
}
.src--pending {
  color: var(--ink-faint);
  border-bottom: 1px dotted currentColor;
}
@media (forced-colors: active) {
  .src--pending { border-bottom-color: CanvasText; }
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: grid;
  gap: 0.5rem;
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.timeline__item:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) {
  .timeline__item {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 2rem;
    align-items: baseline;
  }
}
.timeline__when {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.timeline__what { font-size: var(--step-2); }
.timeline__detail { color: var(--ink-soft); margin-top: 0.5rem; max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Q&A grid — FAQ, feature lists, contact routes
   -------------------------------------------------------------------------- */

.qa-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
/* Four-item grids specifically: at the default 19rem minimum they land three
   across and strand the fourth on its own row. */
.qa-grid--four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.qa h3 {
  font-size: var(--step-2);
  margin-bottom: 0.75rem;
}
.qa p { color: var(--ink-soft); }
.panel--blue .qa p { color: rgba(247, 244, 238, 0.78); }

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.stat__value {
  font-family: var(--display);
  font-size: clamp(2.8rem, 2rem + 3.5vw, 4.5rem);
  line-height: 0.95;
  font-variant-numeric: lining-nums;
}
.stat__label {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 16ch;
}
.panel--blue .stat__label { color: rgba(247, 244, 238, 0.6); }

/* --------------------------------------------------------------------------
   Small utilities
   -------------------------------------------------------------------------- */

.note {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-size: var(--step-0);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.note--light { color: rgba(247, 244, 238, 0.72); }

/* Marks a fact that is genuinely not known yet. Visually distinct from body
   copy on purpose: on a site that will be read as official, "we have not
   filled this in" must never be mistakable for "this is the answer". */
.placeholder {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 0.7rem 1rem;
  border: 1px dashed var(--rule);
  background: rgba(247, 244, 238, 0.04);
}
.panel--blue .placeholder {
  color: rgba(247, 244, 238, 0.78);
  border-color: rgba(247, 244, 238, 0.35);
  background: rgba(247, 244, 238, 0.06);
}

.section-more { margin-top: clamp(2rem, 5vw, 3rem); }

.legacy--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
/* Four near-miss cards. Without a narrower track the default 20rem minimum
   fits three per row and leaves the fourth stranded on its own line. */
.legacy--four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
/* The near-miss row shrinks as rows are verified, so it needs a track that
   looks deliberate at three as well as at four. */
.legacy--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* --------------------------------------------------------------------------
   Notice (phase-2 placeholder for the application)
   -------------------------------------------------------------------------- */

.notice {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.notice h2 { font-size: var(--step-2); }
.notice p { color: var(--ink-soft); max-width: 52ch; }
.notice .linkpair { justify-content: center; }
.notice .btn-note { margin-inline: auto; }

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */

.news { display: grid; gap: 0; }
.news__item {
  display: grid;
  gap: 0.6rem;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.news__item:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) {
  .news__item {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 2rem;
    align-items: baseline;
  }
}
.news__date {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.news__title { font-size: var(--step-2); }
/* The whole headline is the link. Underline only on hover/focus: at display
   size a permanent rule under a display headline reads as damage. */
.news__title a {
  color: inherit;
  text-decoration: none;
}
.news__title a:hover,
.news__title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.news__excerpt { color: var(--ink-soft); max-width: var(--measure); margin-top: 0.6rem; }

/* An individual announcement. Body copy and nothing else — this is the page a
   journalist quotes from. */
.prose { display: grid; gap: 1.4rem; max-width: var(--measure); }
.prose p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.65; }
.prose p:first-child { color: var(--ink); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--night);
  color: var(--lit);
  padding-block: clamp(3.5rem, 8vh, 6rem);
}
.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.footer h2 {
  font-size: var(--step--1);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.5);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer .footer__social {
  margin-top: 1.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer .footer__social a { color: var(--gold-deep); }
.footer a { text-decoration: none; opacity: 0.85; transition: opacity 0.25s var(--ease); }
.footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
.footer__base {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(247, 244, 238, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: var(--step--1);
  color: rgba(247, 244, 238, 0.55);
}

/* The staging banner. Deliberately loud: this build lives on a URL that can
   be forwarded, and nobody should ever mistake it for the live site. */
.staging {
  background: #7a1220;
  color: #fff;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem var(--gutter);
}

/* --------------------------------------------------------------------------
   Entrance animation

   Progressive enhancement only. Everything is fully visible with no CSS
   animation support and with JS disabled; the `is-ready` class is what opts
   in, and it is set on the very first frame. Nothing on this page is ever
   hidden waiting for a scroll event to fire.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .is-ready .hero__inner > * {
    animation: rise 0.9s var(--ease) backwards;
  }
  .is-ready .hero__inner > :nth-child(2) { animation-delay: 0.08s; }
  .is-ready .hero__inner > :nth-child(3) { animation-delay: 0.16s; }
  .is-ready .hero__inner > :nth-child(4) { animation-delay: 0.24s; }
  .is-ready .hero__inner > :nth-child(5) { animation-delay: 0.32s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}

/* Browsers do not print background colours by default, so every light-on-dark
   panel printed as white text on white paper: the prize list, the stats band,
   every CTA panel and the whole footer. */
@media print {
  .masthead, .mainnav, .staging { display: none; }
  body { background: #fff; color: #000; }
  .panel--blue, .footer, .panel--warm {
    background: #fff !important;
    color: #000 !important;
  }
  .panel--blue *, .footer * { color: #000 !important; }
  .panel { border-top: 1px solid #999; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
  a[href^="#"]::after { content: ""; }
}

/* Windows High Contrast forces colour and background, which erases both of the
   site's non-textual state indicators: the current-page underline and the bar
   marking a winning year. Redraw them with system colours. */
@media (forced-colors: active) {
  .mainnav a[aria-current="page"] { border-bottom-color: Highlight; }
  .record .is-win th::after { background: Highlight; forced-color-adjust: none; }
  .placeholder { border-color: ButtonBorder; }
  .link-quiet { border-bottom-color: LinkText; }
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   Quiet by design. Their job is to orient someone who landed on a deep page
   from a search result, not to compete with the page title.
   -------------------------------------------------------------------------- */

.crumbs { border-bottom: 1px solid var(--rule); background: var(--paper); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0.75rem 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--rule);
}
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
.crumbs [aria-current="page"] { color: var(--ink); }
@media print { .crumbs { display: none; } }

/* --------------------------------------------------------------------------
   FAQ
   Question and answer set as a pair rather than an accordion. Accordions hide
   the answer from anyone using find-in-page, and hide it from most extraction
   too — which defeats the entire purpose of the page.
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.faq__item {
  display: grid;
  gap: 0.9rem;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 6rem;
}
.faq__q {
  font-size: var(--step-2);
  max-width: 30ch;
}
.faq__a { color: var(--ink-soft); max-width: var(--measure); }
/* The first paragraph is the answer proper — the one lifted into the
   structured data and the one a reader needs. The rest is context. */
.faq__a:first-of-type { color: var(--ink); }

/* --------------------------------------------------------------------------
   Fact list (the 2026 edition page)
   -------------------------------------------------------------------------- */

.factlist {
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.factrow {
  padding-block: 1.1rem;
  border-top: 1px solid rgba(247, 244, 238, 0.25);
}
.factrow dt {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.6);
  margin-bottom: 0.4rem;
}
.factrow dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--lit);
}

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; justify-items: start; }

/* Two quiet links side by side. Used where a section has a primary next step
   and one genuinely useful alternative — never more than two. */
.linkpair { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.hero__meta a { color: inherit; text-decoration: none; }
.hero__meta a:hover,
.hero__meta a:focus-visible { text-decoration: underline; text-underline-offset: 0.35em; }

/* Names in the record link to their own page. Underlined only on hover so the
   table stays a table and does not turn into a wall of blue. */
.rowlink { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.rowlink:hover, .rowlink:focus-visible { border-bottom-color: var(--gold); }
.crown__name .rowlink { border-bottom: 0; }
.crown__name .rowlink:hover, .crown__name .rowlink:focus-visible {
  text-decoration: underline; text-underline-offset: 0.16em;
}

/* The fact list appears on a blue panel for winners and a warm one for
   everyone else, so it needs a light-ground variant. */
.factlist--light .factrow { border-top-color: var(--rule); }
.factlist--light .factrow dt { color: var(--ink-faint); }
.factlist--light .factrow dd { color: var(--ink); }

/* Previous / index / next at the foot of a delegate page. */
.siblings { border-top: 1px solid var(--rule); }
.siblings__inner {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  justify-content: space-between; align-items: baseline;
}

/* The delegate fact panel holds five short rows, so the standard section
   padding leaves a large empty block of colour under it. A panel that is
   mostly void is the thing this redesign is trying to get away from. */
.panel--facts { padding-block: clamp(2.5rem, 6vh, 4rem); }
.panel--facts .factlist { margin-bottom: 0; }

/* ==========================================================================
   The epoch — one enormous moment per site
   --------------------------------------------------------------------------
   festival-cannes.com spends 47 of its 48:1 type range in a single place: the
   year, at 432px (30vw), weight 300, gold on warm near-black, with the two
   digit-pairs vertically offset from each other and the top of the second pair
   amputated by the section's own overflow:hidden. A generated page would set
   "2026" as one centred string; the offset and the crop are what say a person
   decided this.

   Light weight, not bold. At this size bold shouts and light is elegant — and
   Fraunces at wght 300 with opsz 144 keeps its hairlines because the optical
   axis is doing its job.

   No photography required, which is the point: this is the emotional beat of
   the page and it is made of four digits.
   ========================================================================== */

.epoch {
  position: relative;
  overflow: hidden;              /* deliberately clips the digits */
  background: var(--night);
  color: var(--lit);
  border-top-color: var(--night);
  padding-block: clamp(3rem, 7vh, 5rem);
}
.epoch__year {
  display: flex;
  /* Pushed right so the overlaid label and heading cross only the thin end of
     the "2" rather than sitting on top of the heavy bowls of "0" and "6".
     White on the gold is about 2.2:1 — fine as a graphic crossing, not fine
     under a whole line of text, and this is a real reading problem rather
     than a taste one. */
  justify-content: flex-end;
  padding-inline-end: var(--gutter);
  align-items: flex-start;
  gap: 0.02em;
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: var(--step-5);
  line-height: 0.74;
  letter-spacing: -0.03em;
  color: var(--gold);
  /* Pulled up so the tops of the digits are cut by the section edge. */
  margin-top: -0.14em;
  user-select: none;
}
/* The two halves do not sit on the same baseline. This is the whole trick. */
.epoch__d--b { transform: translateY(0.13em); }

/* Type crossing in front of type — Cannes lays a 24px label and a 64px
   heading over its numerals on a shared baseline. Needs no image. */
.epoch__over {
  position: relative;
  z-index: 2;
  margin-top: -0.34em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.6rem;
  max-width: min(46rem, 62%);
}
.epoch__label {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lit);
}
.epoch__head {
  font-size: var(--step-2h);
  color: var(--lit);
}
.epoch__meta {
  width: 100%;
  color: rgba(247, 244, 238, 0.6);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Below ~40rem the crop gets aggressive and the overlay collides with the
   digits, so the two separate rather than overlapping. */
@media (max-width: 40rem) {
  .epoch__year { font-size: clamp(5rem, 34vw, 11rem); margin-top: -0.08em; }
  .epoch__over { margin-top: 0.5rem; }
}
@media (forced-colors: active) {
  .epoch__year { color: CanvasText; }
}

/* --------------------------------------------------------------------------
   Bleed — permission to touch the edge of the screen
   Every one of 297 sections wrapped its content in .shell. Nothing on the site
   had ever reached the edge of the viewport, which is why it read as a
   document rather than a designed page.
   -------------------------------------------------------------------------- */
.bleed { width: 100%; max-width: none; padding-inline: 0; }

/* A section whose content runs off the right edge. The visible cut-off is what
   says "there is more here" — Cannes' hero carousel puts the next slide at
   x=1421 in a 1440 viewport so you see a sliver of it. */
.spill {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.spill > * { scroll-snap-align: start; flex: 0 0 min(78vw, 22rem); }

/* An asymmetric three-up. Cannes runs 26vw / 35vw / 26vw with the centre item
   taller as well as wider — it is a composition, not a grid. Equal columns
   with equal heights is the single most reliable template signature there is.
   Only applied where there are exactly three children. */
@media (min-width: 56rem) {
  .legacy:not(.legacy--two):not(.legacy--three):not(.legacy--four) {
    grid-template-columns: 1fr 1.28fr 1fr;
    align-items: start;
  }
  .legacy > :nth-child(2) { padding-top: 0; }
  .legacy > :nth-child(1),
  .legacy > :nth-child(3) { padding-top: 2.25rem; }
  /* Ragged, not equalised. Nobody good forces the bottoms to line up. */
  .legacy > :nth-child(3) { padding-bottom: 1.5rem; }
}

/* Colour as hierarchy, not size. In the Cannes awards list every entry is set
   identically and only the Palme d'Or is gold. The 2026 card is the one that
   has not happened yet — it gets the gold rule, at the same size as the rest. */
.crown--future { border-top-color: var(--gold); }

/* A list of things that will exist. Marked, not bulleted: a bullet says "here
   is a fact", a mark says "this is on the list". */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.ticks li { position: relative; padding-left: 1.6rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.7rem; height: 1px;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   Doors
   Six audiences, six ways in. The whole row is one hairline grid: each door is
   a cell with a rule above it, so the block reads as a departure board rather
   than as six identical cards. Nothing here is a box, and nothing has a
   shadow.
   -------------------------------------------------------------------------- */

.doors {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.door { border-top: 1px solid var(--rule); }
.door__link {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.6rem 1.5rem 2.4rem 0;
  text-decoration: none;
  height: 100%;
  transition: background-color 0.25s var(--ease);
}
.door__label {
  font-family: var(--display);
  font-variation-settings: "opsz" 32;
  font-size: var(--step-1);
  line-height: 1.15;
}
.door__note { color: var(--ink-soft); font-size: var(--step--1); max-width: 30ch; line-height: 1.55; }
/* The rule above the door is the thing that moves, not the card. */
.door__link:hover, .door__link:focus-visible { background: var(--paper-warm); }
.door:has(.door__link:hover), .door:has(.door__link:focus-visible) { border-top-color: var(--gold); }
@media (min-width: 40rem) {
  .door__link { padding-right: 2.5rem; }
}

/* ==========================================================================
   THE GRID
   --------------------------------------------------------------------------
   The measured fault: every section on the site started its content at exactly
   x=64px, and 113 of 113 elements on the homepage computed to text-align:start.
   Content was never *placed*, only stacked. That is why the page reads as
   pressed against the left edge no matter how good the type is.

   A twelve-column grid gives content somewhere to be put. Nobel zigzags its
   media 853 → 40 → 40/504/968 → 736 → 736 down the page; Cannes hangs a
   z-index:20 text block across its numerals. Neither is decoration: an eye
   that has to travel is an eye that is paying attention.
   ========================================================================== */

@media (min-width: 56rem) {
  .grid12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: start;
  }
  /* Placement. Used sparingly and never twice in a row. */
  .at-2   { grid-column: 2 / span 9; }
  .at-3   { grid-column: 3 / span 8; }
  .at-4   { grid-column: 4 / span 8; }
  .at-5   { grid-column: 5 / span 7; }
  .at-right { grid-column: 6 / span 7; }
  .at-left-narrow { grid-column: 1 / span 4; }
  .at-full { grid-column: 1 / -1; }

  /* The hanging label. A small element holds the left edge while the content
     it belongs to sits well inside the page. This is the single move that
     stops a column of text reading as flush-left wallpaper. */
  .hang { grid-column: 1 / span 2; }
  .hang + * { grid-column: 4 / span 8; }
}

/* A section numeral hanging in the gutter. Editorial, quiet, and it gives the
   left edge something to be other than the start of a paragraph. */
.tag-num {
  font-family: var(--display);
  font-variation-settings: "opsz" 32;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold);
  font-weight: 300;
}
.tag-rule { display: block; width: 100%; height: 1px; background: var(--rule); margin-top: 0.9rem; }
.panel--night .tag-rule { background: rgba(247, 244, 238, 0.22); }

/* Reverse the split: head on the right, body on the left. Used once per page
   at most, so the page swings rather than marches. */
@media (min-width: 56rem) {
  .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--flip .split__head { order: 2; }
  .split--flip .split__body { order: 1; margin-left: auto; }
  .split--flip .split__head h2 { text-align: right; }
}

/* A line that is allowed to be wider than the reading measure, for the one or
   two sentences that carry the feeling rather than the information. */
.statement {
  font-family: var(--display);
  font-variation-settings: "opsz" 96;
  font-size: var(--step-2h);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 26ch;
  color: var(--ink);
}
.panel--night .statement { color: var(--lit); }

/* --------------------------------------------------------------------------
   Life
   Every site measured for this animates on pointer only: 0.15s to 0.5s, on
   opacity, transform and colour, with a hard ease-out so it arrives fast and
   settles slowly. Nothing loops, nothing plays on load, nothing is triggered
   by scroll. That is the whole restraint principle, and it costs no JS.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .link-quiet { transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease); }
  .link-quiet:hover { transform: translateX(0.25rem); border-bottom-color: var(--gold); }
  .rowlink { transition: border-color 0.25s var(--ease); }
  .record tbody tr { transition: background-color 0.3s var(--ease); }
  .record tbody tr:hover { background: rgba(180, 155, 87, 0.07); }
  .crown { transition: transform 0.4s var(--ease); }
  .crown:hover { transform: translateY(-0.2rem); }
}

/* Page heads are CENTRED, by request: the roof of every interior page sits on
   the page's axis, like the logotype above it. The asymmetric editorial grid
   survives further down, inside the grid12 sections, where it is a choice
   rather than a default. */
.pagehead { text-align: center; }
.pagehead .lede { margin-inline: auto; }