/* ==========================================================================
   The Millionaire Awards · "Nocturne" design system (v4)
   A house, not a website. Plan: Ideas/DESIGN_PLAN.md

   Two rooms. Every colour below is read from the room you are in:
     .room-night  imperial near-black (the wall, the ceremony moments)
     .room-paper  warm uncoated ivory (stories, records, the register)
   Any element can switch rooms; buttons, fields and text follow.
   Gilt is a metal: hairlines, numerals, the Seal. Never a text fill, never a gradient word.
   ========================================================================== */

:root {
  --night: #0c0a10;
  --aubergine: #1c1226;
  --imperial: #3a1f4d;
  --paper: #f3eee4;
  --vellum: #e8e0d0;
  --ink: #16121c;
  --smoke: #8c8494;
  --gilt: #b8975a;
  --gilt-light: #d9c08a;
  --gilt-deep: #866631;
  --oxblood: #7a2338;
  --mark-gold: #C09F5B;      /* the house mark's own gold (Logo/TMA-Trophy-Logo) */

  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --text: "EB Garamond", Garamond, Georgia, serif;
  --ui: Jost, Futura, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --slow: 1.1s;

  /* Paper and film grain: inline SVG noise, under 1KB each. */
  --grain-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .18  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .9  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.room-night {
  --bg: var(--night);
  --surface: var(--aubergine);
  --fg: #efe9f1;
  --fg-soft: rgba(239, 233, 241, .74);
  --muted: #9b92a6;
  --line: rgba(217, 192, 138, .2);
  --line-strong: rgba(217, 192, 138, .55);
  --accent: var(--gilt-light);
  --btn-bg: var(--paper);
  --btn-fg: var(--night);
  --field-bg: rgba(255, 255, 255, .025);
  --field-line: rgba(217, 192, 138, .28);
  --grain: var(--grain-night);
  --mark: var(--mark-gold);
  color: var(--fg);
  background: var(--grain), var(--bg);
}
.room-paper {
  --bg: var(--paper);
  --surface: #faf7f1;
  --fg: var(--ink);
  --fg-soft: #4a4352;
  --muted: #7f7686;
  --line: #ddd3c2;
  --line-strong: #b9a784;
  --accent: var(--gilt-deep);
  --btn-bg: var(--night);
  --btn-fg: var(--paper);
  --field-bg: #fffdf9;
  --field-line: #d3c8b5;
  --grain: var(--grain-paper);
  --mark: #a88745;           /* a deeper gold, for contrast on ivory */
  color: var(--fg);
  background: var(--grain), var(--bg);
}
.room-aubergine { background: var(--grain-night), var(--aubergine); }
/* Native controls (radios, checkboxes, selects, scrollbars) follow the room instead of glaring white on night. */
.room-night, .room-aubergine { color-scheme: dark; }
.room-paper { color-scheme: light; }

/* ---------- Base ---------- */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }   /* anchors land below the sticky header */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }   /* no blue flash on tap; :focus-visible still shows */
html, body { overflow-x: clip; }
body { font: 400 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
::selection { background: var(--gilt-light); color: var(--night); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
img { max-width: 100%; }
a { transition: color .4s var(--ease), opacity .4s var(--ease); }

/* Short pages: the footer sits at the foot of the window, never mid-screen with bare page below it. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* Google Translate injects a top bar and shifts the body. Keep the page still. */
body { top: 0 !important; }
.skiptranslate iframe, .goog-te-banner-frame { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* View transitions between pages (progressive: browsers without support just navigate). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }

/* Running text: old-style numerals (as in a book), no lonely last words, quotes that hang into the margin. */
.lede, .prose-story, .font-text, .story-card .line, .fineprint { font-variant-numeric: oldstyle-nums; }
p, .lede, .field-help, figcaption, .footer-col li { text-wrap: pretty; }
.standfirst, .pull-quote, .voice q, .pr-quote { hanging-punctuation: first; }

/* ---------- Type ---------- */
.font-serif, .display, .display-xl, .display-lg, .display-md { font-family: var(--display); font-optical-sizing: auto; }
.font-text { font-family: var(--text); }
.font-ui { font-family: var(--ui); }
.display-xl { font-weight: 440; letter-spacing: -.018em; line-height: 1.02; font-size: clamp(2.9rem, 7.4vw, 7.25rem); }
.display-lg { font-weight: 440; letter-spacing: -.016em; line-height: 1.06; font-size: clamp(2.3rem, 4.6vw, 4.4rem); }
.display-md { font-weight: 440; letter-spacing: -.01em; line-height: 1.16; font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.italic-serif { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent); }
.text-gold-grad { color: var(--accent); }                       /* legacy name: now a plain accent, never a gradient */
.eyebrow, .smallcaps { font: 500 11px/1.4 var(--ui); letter-spacing: .3em; text-transform: uppercase; }
.eyebrow { color: var(--accent); }
.eyebrow, .smallcaps, .credential-line, .pr-meta { text-wrap: balance; }   /* no lone word on a second line of small capitals */

.lede { font: 400 clamp(1.2rem, 1.6vw, 1.42rem)/1.55 var(--text); color: var(--fg-soft); }
.muted { color: var(--muted); }
.soft { color: var(--fg-soft); }
.accent { color: var(--accent); }
.numeral { font-family: var(--display); font-variant-numeric: lining-nums; }
.wordmark-text { font: 400 15px/1 var(--display); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }

.hairline { height: 1px; background: var(--line); }
.rule { width: 48px; height: 1px; background: var(--accent); }
.rule-center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons: sharp, tracked, quiet ---------- */
.btn-primary, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .9rem;
  font: 500 12px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase;
  padding: 19px 34px; border-radius: 0; cursor: pointer; white-space: nowrap;
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); }
.btn-primary:hover { background: transparent; color: var(--fg); }
.btn-outline { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
.btn-outline:hover { border-color: var(--fg); }
.btn-sm { padding: 13px 20px; font-size: 11px; letter-spacing: .2em; }
.btn-primary[disabled], .btn-outline[disabled] { opacity: .45; pointer-events: none; }
.btn-primary:active, .btn-outline:active { transform: translateY(1px); }
.btn-arrow::after { content: "→"; font-size: 1.15em; letter-spacing: 0; transition: transform .6s var(--ease); }
.btn-arrow:hover::after { transform: translateX(4px); }
.btn-primary.w-full, .btn-outline.w-full { white-space: normal; text-align: center; line-height: 1.4; }

/* The underlined text link: a hairline that draws in on hover. */
.link-line { position: relative; display: inline-flex; align-items: center; gap: .7rem; font: 500 11.5px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase; padding: 6px 0; color: var(--fg); }
.link-line::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-strong); }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.link-line:hover::after { transform: scaleX(1); transform-origin: left; }
.text-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.text-link:hover { text-decoration-color: var(--fg); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; color: var(--fg); background: var(--bg); border-bottom: 1px solid var(--line); transition: background-color .6s var(--ease), border-color .6s var(--ease); }
.site-header .bar { height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; transition: height .6s var(--ease); }
.site-header.is-scrolled .bar { height: 64px; }
body.has-hero .site-header { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; }
body.has-hero .site-header.is-scrolled { background: rgba(12, 10, 16, .92); border-color: var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Phones: the sides take only what they need (menu + flag, Nominate) and the wordmark centers in the rest. */
@media (max-width: 639px) { .site-header .bar { grid-template-columns: auto 1fr auto; gap: 12px; } .site-header .wordmark { justify-self: center; } }
@media (max-width: 400px) {
  .site-header .bar { gap: 10px; }
  .site-header .wordmark { gap: 8px; }
  .site-header .wordmark .wm-mark svg { width: 28px; }
  .site-header .wordmark .w1 { font-size: 11px; letter-spacing: .16em; }
  .site-header .header-links a { letter-spacing: .2em; }
}
@media (max-width: 359px) { .site-header .wordmark .wm-text { display: none; } }   /* the oldest small phones: the trophy alone */
.header-left { justify-self: start; display: flex; align-items: center; gap: clamp(14px, 3vw, 40px); }
.menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: 12px; font: 500 11px/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; padding: 10px 0; }
.menu-btn .bars { width: 22px; height: 9px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.menu-btn .bars::before { top: 0; } .menu-btn .bars::after { bottom: 0; right: 7px; }
.menu-btn:hover .bars::after { right: 0; }
.wordmark { display: flex; align-items: center; gap: 14px; line-height: 1; }
.wordmark .wm-mark svg { display: block; width: 34px; height: auto; transition: transform .8s var(--ease); }
.wordmark:hover .wm-mark svg { transform: translateY(-2px); }
.wordmark .wm-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 768px) { .wordmark .wm-mark svg { width: 44px; } .wordmark { gap: 16px; } }
.site-header.is-scrolled .wordmark .wm-mark svg { width: 34px; }
.wordmark .w1 { font: 400 13px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; padding-left: .3em; }
.wordmark .w2 { font: 500 8px/1 var(--ui); letter-spacing: .5em; text-transform: uppercase; color: var(--accent); margin-top: 7px; padding-left: .5em; }
@media (min-width: 768px) { .wordmark .w1 { font-size: 17px; } .wordmark .w2 { font-size: 8.5px; margin-top: 8px; } }
.header-links { justify-self: end; display: flex; align-items: center; gap: 30px; }
.header-links a { font: 500 11px/1 var(--ui); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.header-links .quiet { color: var(--fg-soft); }
.header-links .quiet:hover { color: var(--fg); }

/* Full-screen menu */
/* Sized by the window's height as well as its width, so all seven items, the top bar and the language row
   always fit (a 13" laptop window is about 560px tall). If a window is shorter still, the panel scrolls. */
.menu-panel { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.menu-panel.is-open { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.menu-panel nav { padding: clamp(8px, 3vh, 40px) 0; }
.menu-panel nav a { display: flex; align-items: center; gap: 22px; padding: clamp(3px, 1.1vh, 10px) 0; font: 440 clamp(1.9rem, min(5.4vw, 6.4vh), 4.2rem)/1.08 var(--display); letter-spacing: -.012em; color: var(--fg); opacity: 0; transform: translateY(18px); transition: color .4s, opacity .8s var(--ease), transform .8s var(--ease); }
@media (min-width: 1024px) { .menu-panel nav a { font-size: clamp(1.9rem, min(3.9vw, 6.4vh), 4.2rem); } }   /* shares the screen with the Seal */
/* The index: small gilt italic numerals, centred on the line (not footnotes on its baseline). */
.menu-panel nav a .no { font: italic 400 15px/1 var(--display); color: var(--accent); width: 2.6rem; flex: none; opacity: .8; transition: opacity .4s, transform .6s var(--ease); }
.menu-panel.is-open nav a { opacity: 1; transform: none; }
.menu-panel.is-open nav a:nth-child(2) { transition-delay: .05s; } .menu-panel.is-open nav a:nth-child(3) { transition-delay: .1s; }
.menu-panel.is-open nav a:nth-child(4) { transition-delay: .15s; } .menu-panel.is-open nav a:nth-child(5) { transition-delay: .2s; }
.menu-panel.is-open nav a:nth-child(6) { transition-delay: .25s; } .menu-panel.is-open nav a:nth-child(7) { transition-delay: .3s; }
/* Hover: the others step back into the dark, the chosen one comes forward. Pointer devices only. */
@media (hover: hover) {
  .menu-panel.is-open nav:hover a, .menu-panel.is-open nav:focus-within a { opacity: .32; transition-delay: 0s; }
  .menu-panel.is-open nav a:hover, .menu-panel.is-open nav a:focus-visible { opacity: 1; color: var(--accent); transform: translateX(10px); }
  .menu-panel nav a:hover .no, .menu-panel nav a:focus-visible .no { opacity: 1; }
}
/* You are here: the current item in gilt italic, its numeral replaced by a short gilt rule. */
.menu-panel nav a[aria-current="page"] { color: var(--accent); font-style: italic; }
.menu-panel nav a[aria-current="page"] .no { position: relative; color: transparent; }
.menu-panel nav a[aria-current="page"] .no::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.4rem; height: 1px; background: var(--accent); }
.menu-feature { flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease) .25s, transform 1s var(--ease) .25s; }
.menu-panel.is-open .menu-feature { opacity: 1; transform: none; }
.menu-feature:hover .link-line::after { transform: scaleX(1); transform-origin: left; }
.menu-close { display: inline-flex; align-items: center; gap: 12px; font: 500 11px/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; padding: 10px 0; }

/* Language menu (in the header: a small flag and the language, opening downward) */
.lang-btn { display: inline-flex; align-items: center; gap: 9px; font: 500 11px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase; padding: 8px 0; color: var(--fg-soft); }
.lang-btn:hover { color: var(--fg); }
.lang-flag { font-size: 17px; line-height: 1; letter-spacing: 0; }
.lang-menu .lang-flag { display: inline-block; width: 28px; }
.lang-menu { position: absolute; left: 0; top: calc(100% + 12px); width: 230px; max-height: 60vh; overflow: auto; padding: 8px 0; z-index: 90;
  background: var(--aubergine); border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.lang-menu a { display: block; padding: 9px 18px; font: 400 14px/1.3 var(--ui); color: var(--fg); }
.lang-menu a:hover, .lang-menu a.is-active { color: var(--gilt-light); background: rgba(217, 192, 138, .06); }

/* ---------- Footer ---------- */
.site-footer a:hover { color: var(--accent); }
.footer-col h4 { font: 500 10.5px/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.footer-col li { margin-bottom: 12px; font-size: 14.5px; color: var(--fg-soft); }
.fineprint { font-size: 12px; line-height: 1.7; color: var(--muted); }

/* ---------- Flash ---------- */
.flash { position: fixed; z-index: 60; left: 50%; top: 92px; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content;
  display: flex; gap: 18px; align-items: center; padding: 16px 20px; font-size: 14.5px;
  background: var(--paper); color: var(--ink); border-left: 2px solid var(--gilt); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .5); animation: flashIn .7s var(--ease); }
.flash-error { border-left-color: var(--oxblood); color: var(--oxblood); }
.flash button { font-size: 20px; line-height: 1; opacity: .55; }
@keyframes flashIn { from { opacity: 0; transform: translate(-50%, -10px); } }

/* ==========================================================================
   The Seal and the Signature
   ========================================================================== */
.seal-stage { position: relative; display: inline-block; }
.seal-stage::before { content: ""; position: absolute; inset: -28%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(217, 192, 138, .13), rgba(217, 192, 138, .04) 55%, transparent); }
.seal-stage svg { position: relative; display: block; width: 100%; height: auto; }

/* The Signature: hairline guilloché on a dial frame (core/Signature.php). Density makes the tone, not weight. */
.signature { display: block; width: 100%; height: auto; }
.signature .sig-outer { opacity: .62; }
.signature .sig-middle { opacity: .46; }
.signature .sig-centre { opacity: .8; }
.signature .sig-rings { opacity: .85; }
.signature .sig-thin { opacity: .55; }
.signature .sig-ticks { opacity: .5; }
.signature .sig-pearls { opacity: .9; }
.signature .sig-middle, .signature .sig-centre, .signature .sig-sweep { transform-box: view-box; transform-origin: 500px 500px; }
/* Live: the light travels round the dial; the middle and centre turn slowly against each other, so the moiré shimmers. */
.signature-slow .sig-sweep { animation: sigTurn 16s linear infinite; }
.signature-slow .sig-middle { animation: sigTurn 320s linear infinite reverse; }
.signature-slow .sig-centre { animation: sigTurn 200s linear infinite; }
.signature .sig-shine { color: #fff4d4; }
.signature .sig-shine .sig-outer, .signature .sig-shine .sig-middle, .signature .sig-shine .sig-centre { opacity: 1; }
.room-paper .signature .sig-shine { color: #5c4214; }
@keyframes sigTurn { to { transform: rotate(360deg); } }
/* Engraving: every line draws itself, one after another (the welcome moment). */
.signature.engrave use { stroke-dasharray: 1; stroke-dashoffset: 1; animation: engrave 2.2s var(--ease) forwards; animation-delay: calc(var(--n) * 22ms + .4s); }
.signature.engrave .sig-rings { opacity: 0; animation: fadeIn 1.2s .2s forwards; }
@keyframes engrave { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* ==========================================================================
   Homepage: the Unveiling
   ========================================================================== */
.unveil { position: relative; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 16px 90px; overflow: hidden; }
.unveil::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 42%, rgba(58, 31, 77, .55), transparent 70%); }
/* The trophy and the line share the first screen on any window: on a short laptop window the trophy gives way,
   so "They did it." is never below the fold. */
/* The engraved dial behind the hero: a guilloché like a watch dial or a banknote, almost invisible.
   The wrapper holds a mask (a faint base everywhere, brighter where the light is); the inner layer turns.
   Light, not movement: one rotation every six minutes. Still on touch screens and with reduced motion. */
.unveil-dial { position: absolute; left: 50%; top: 38%; width: min(150vh, 1500px, 170vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; color: var(--gilt-light); opacity: .16;
  --dx: 50%; --dy: 30%;
  /* Two masks, intersected: the light, and a fade at the top so the lines never run behind the header. */
  -webkit-mask-image: radial-gradient(circle at var(--dx) var(--dy), #000 0, rgba(0,0,0,.55) 9%, rgba(0,0,0,.24) 24%), linear-gradient(to bottom, transparent 25%, #000 38%, #000 70%, transparent 88%);
          mask-image: radial-gradient(circle at var(--dx) var(--dy), #000 0, rgba(0,0,0,.55) 9%, rgba(0,0,0,.24) 24%), linear-gradient(to bottom, transparent 25%, #000 38%, #000 70%, transparent 88%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.unveil-dial-turn { width: 100%; height: 100%; animation: sigTurn 360s linear infinite; will-change: transform; }
.unveil-dial svg { display: block; width: 100%; height: 100%; }
.unveil-dial .sig-middle, .unveil-dial .sig-thin { opacity: .6; }
.unveil > :not(.unveil-dial):not(.scroll-cue) { position: relative; }   /* content above the dial */
@media (hover: none) { .unveil-dial-turn { animation: none; } }
@media (prefers-reduced-motion: reduce) { .unveil-dial-turn { animation: none; } }

.unveil .seal-stage { width: clamp(140px, min(28vw, 30vh), 360px); }
.unveil h1 { margin-top: clamp(20px, 4vh, 60px); font-size: clamp(2.9rem, min(7.4vw, 11.5vh), 7.25rem); }
@media (max-height: 720px) { .unveil { padding-top: 100px; } .scroll-cue { display: none; } }
.unveil .caption { margin-top: 28px; font: 500 11px/1 var(--ui); letter-spacing: .34em; text-transform: uppercase; color: var(--fg-soft); }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; width: 1px; height: 54px; background: var(--line); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gilt-light); animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

/* Intro sequence on the hero */
.rise { opacity: 0; transform: translateY(22px); animation: rise 1.4s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ==========================================================================
   THE WALL: a museum hang
   ========================================================================== */
.wall-stage { position: relative; }
.wall { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
@media (min-width: 1024px) { .wall { grid-template-columns: repeat(20, minmax(0, 1fr)); } }
/* Gallery lighting: the wall dims a little, and a pool of light follows the cursor. */
.wall-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), transparent 0, rgba(12, 10, 16, .1) 45%, rgba(12, 10, 16, .5) 100%); }
.wall-stage.is-lit::after { opacity: 1; }

.seat { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #141019; display: block; isolation: isolate; }
.seat img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.12) contrast(1.06) brightness(.88); transform: scale(1.001);
  transition: filter .9s var(--ease), transform 1.4s var(--ease); }
.seat:hover img, .seat:focus-visible img { filter: none; transform: scale(1.05); }
.seat::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(217, 192, 138, 0); transition: box-shadow .6s var(--ease); pointer-events: none; z-index: 3; }
.seat:hover::after { box-shadow: inset 0 0 0 1px rgba(217, 192, 138, .8); }

/* Initials and private laureates: the house monogram. */
.seat-mono { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #17121e; color: var(--gilt); }
.seat-mono svg { width: 58%; height: auto; opacity: .8; }
.seat-mono .mono-initials { font: 400 clamp(8px, .8vw, 12px)/1 var(--display); color: #efe9f1; letter-spacing: .1em; white-space: nowrap; }
.portrait-room .seat-mono .mono-initials, .feature-portrait .seat-mono .mono-initials { font-size: 30px; }

/* Open seats: an empty frame with its number engraved. */
.seat-open { background: #100d15; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(217, 192, 138, .07); transition: box-shadow .6s var(--ease), background-color .6s; }
.seat-open .seat-num { font: 400 clamp(9px, .95vw, 15px)/1 var(--display); font-variant-numeric: lining-nums; color: rgba(217, 192, 138, .32); transition: color .6s; }
.seat-open:hover { background: #15111b; box-shadow: inset 0 0 0 1px rgba(217, 192, 138, .45); }
.seat-open:hover .seat-num { color: var(--gilt-light); }
.seat-next { box-shadow: inset 0 0 0 1px rgba(217, 192, 138, .5); }
.seat-next .seat-num { display: none; }
.seat-next svg { width: 64%; height: auto; color: var(--gilt-light); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.seat-revoked img { opacity: .2; }

.wall.is-ready .seat { animation: seatIn 1.2s var(--ease) both; animation-delay: calc(var(--i) * 9ms); }
@keyframes seatIn { from { opacity: 0; } }

/* Progress: one gilt hairline that fills. */
.wall-line { position: relative; height: 1px; background: var(--line); }
.wall-line span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gilt-light); }
.wall-tabs a { font: 500 11px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase; padding: 8px 0; margin-right: 22px; color: var(--muted); border-bottom: 1px solid transparent; }
.wall-tabs a.is-active { color: var(--fg); border-color: var(--gilt-light); }
.wall-tabs a:hover { color: var(--fg); }

/* The brass name plate on hover. */
.seat-tip { position: fixed; z-index: 65; pointer-events: none; padding: 9px 16px 10px; text-align: center; white-space: nowrap;
  background: linear-gradient(135deg, #e6cf98, #c4a262 55%, #ddc48c); color: #1b1408; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .25);
  transform: translate(-50%, 10px); opacity: 0; transition: opacity .25s, transform .4s var(--ease); }
.seat-tip.is-on { opacity: 1; transform: translate(-50%, 6px); }
.seat-tip b { display: block; font: 500 15px/1.2 var(--display); }
.seat-tip span { display: block; margin-top: 3px; font: 500 8.5px/1.2 var(--ui); letter-spacing: .24em; text-transform: uppercase; opacity: .75; }

/* ---------- The Portrait Room (overlay) ---------- */
.portrait-room { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: 1fr; grid-template-rows: 52vh 1fr; opacity: 0; transition: opacity .6s var(--ease); }
@media (min-width: 900px) { .portrait-room { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } }
.portrait-room.is-open { opacity: 1; }
.portrait-room .pr-photo { position: relative; background: #0a080d; overflow: hidden; }
.portrait-room .pr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.portrait-room.is-open .pr-photo img { transform: none; }
.portrait-room .pr-body { position: relative; overflow-y: auto; display: flex; flex-direction: column; padding: 40px 24px 32px; }
@media (min-width: 900px) { .portrait-room .pr-body { padding: 96px clamp(40px, 6vw, 96px) 48px; } }
.pr-close { position: absolute; top: 18px; right: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--ui); letter-spacing: .28em; text-transform: uppercase; color: var(--fg); padding: 10px 0; }
.pr-photo .pr-close { display: none; }
.pr-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.pr-nav button { font: 500 11px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-soft); padding: 6px 0; }
.pr-nav button:hover { color: var(--fg); }
.pr-meta { font: 500 10.5px/1.6 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.pr-quote { font: italic 400 clamp(1.45rem, 2.2vw, 2rem)/1.3 var(--display); color: var(--fg); }
.pr-quote:empty { display: none; }

.tag-chip { display: inline-block; font: 500 10px/1 var(--ui); letter-spacing: .22em; text-transform: uppercase; padding: 8px 0; color: var(--accent); }
.tag-chip + .tag-chip::before { content: "·"; margin: 0 10px 0 -2px; color: var(--muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0 14px; }

.credential-line { font: 500 10.5px/1.6 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.credential-line .tick { color: var(--accent); }

/* ==========================================================================
   Homepage movements
   ========================================================================== */
.manifesto p { font: 440 clamp(2rem, 5vw, 4.6rem)/1.1 var(--display); letter-spacing: -.018em; }
.manifesto p + p { margin-top: .25em; }

/* Voices: one speaks at a time. */
/* Every voice sits in the same grid cell, so the stage is exactly as tall as the longest quote. */
.voice-stage { display: grid; }
.voice { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr; gap: 28px; align-content: center; justify-items: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity 1.4s var(--ease), visibility 0s 1.4s; }
.voice.is-on { opacity: 1; visibility: visible; transition: opacity 1.4s var(--ease); }
.voice q { font: italic 400 clamp(1.7rem, 3.4vw, 3rem)/1.22 var(--display); quotes: "“" "”"; max-width: 22ch; }
.voice .who { display: flex; align-items: center; gap: 14px; font: 500 10.5px/1.5 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.voice img, .voice .vmono { width: 40px; height: 52px; object-fit: cover; filter: grayscale(1) sepia(.12); flex: none; }
.voice .vmono { display: flex; align-items: center; justify-content: center; background: #17121e; color: var(--gilt); }
.voice-dots { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.voice-dots button { width: 22px; height: 1px; background: var(--line-strong); transition: background-color .5s, width .5s var(--ease); }
.voice-dots button.is-on { width: 40px; background: var(--accent); }

/* ==========================================================================
   Panels, forms, choices
   ========================================================================== */
.panel { background: var(--surface); border: 1px solid var(--line); }
.panel-quiet { border-top: 1px solid var(--line); }
.invitation { position: relative; }
.invitation::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; }

.field { display: block; }
.field-label { display: block; font: 500 10.5px/1.4 var(--ui); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
.input, .textarea, .select { width: 100%; font: 400 16px/1.4 var(--ui); padding: 15px 16px; border-radius: 0; background: var(--field-bg); border: 1px solid var(--field-line); color: var(--fg);
  transition: border-color .4s var(--ease), background-color .4s; }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .8; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); }
.select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.room-night .select option { background: var(--aubergine); color: #efe9f1; }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field-help { font-size: 13px; margin-top: 8px; color: var(--muted); }
.field-error { font-size: 13px; margin-top: 8px; color: #b3304a; }
.room-night .field-error { color: #f0a3b0; }
.input.is-invalid, .textarea.is-invalid, .select.is-invalid { border-color: #b3304a; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gilt); }
.input:-webkit-autofill, .textarea:-webkit-autofill, .select:-webkit-autofill { -webkit-text-fill-color: var(--fg); caret-color: var(--fg); transition: background-color 600000s 0s; }
.room-night .input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #141019 inset; }
.room-paper .input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fffdf9 inset; }

.choice { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid var(--field-line); background: var(--field-bg); cursor: pointer; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.choice:hover { border-color: var(--line-strong); }
.choice input { margin-top: 4px; width: 16px; height: 16px; flex: none; }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice b { font: 400 19px/1.25 var(--display); color: var(--fg); }

.step-num { font: italic 400 2.4rem/1 var(--display); color: var(--accent); }
.roman { font-family: var(--display); font-style: italic; color: var(--accent); }

/* Timeline (nominate page, how it works). */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.timeline li { position: relative; padding-bottom: 22px; }
.timeline li::before { content: ""; position: absolute; left: -30px; top: 7px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--bg); border: 1px solid var(--accent); }
.timeline b { display: block; font: 400 18px/1.3 var(--display); color: var(--fg); }
.timeline span { display: block; color: var(--fg-soft); font-size: 14.5px; margin-top: 3px; }

/* Questions */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { transition: transform .5s var(--ease); color: var(--accent); }
.faq[open] .plus { transform: rotate(45deg); }

/* ==========================================================================
   The Library: stories, the feature page
   ========================================================================== */
.prose-story { font: 400 1.32rem/1.7 var(--text); color: #2a2430; }
.room-night .prose-story { color: var(--fg-soft); }
.prose-story p { margin: 0 0 1.15em; }
/* The numeral column is wide enough for VIII. and XII., so headings never collide with it. */
.chapter { display: grid; grid-template-columns: 3.6rem 1fr; align-items: baseline; margin: 3.2em 0 1.1em; }
.chapter:first-child { margin-top: 0; }
.chapter .roman { font-size: 1.6rem; white-space: nowrap; }
@media (min-width: 640px) { .chapter { grid-template-columns: 4.4rem 1fr; } }
.chapter h3 { font: 500 11px/1.6 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--fg); }
.dropcap::first-letter { float: left; font: 400 5.2em/.8 var(--display); padding: .06em .12em 0 0; color: var(--fg); }
.pull-quote { font: italic 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.3 var(--display); color: var(--fg); padding: .4em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.standfirst { font: italic 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.32 var(--display); color: var(--fg); }

/* Story cards: editorial, no boxes. */
.story-card { display: block; }
.story-card .story-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #17121e; }
.story-card .story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; filter: grayscale(1) sepia(.12) contrast(1.04); transition: filter 1s var(--ease), transform 1.6s var(--ease); }
.story-card:hover .story-photo img { filter: none; transform: scale(1.035); }
.story-card .name { font: 400 1.7rem/1.15 var(--display); }
.story-card.is-feature .name { font-size: clamp(2rem, 3.4vw, 3rem); }
.story-card .line { font: italic 400 1.2rem/1.45 var(--text); color: var(--fg-soft); }
.story-card.is-feature .story-photo { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) { .story-card.is-feature .story-photo { aspect-ratio: 5 / 6; } }

.feature-portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #17121e; }
.feature-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1) sepia(.1) contrast(1.05); view-transition-name: portrait; }

/* ==========================================================================
   The register (Hall of Laureates)
   ========================================================================== */
.register-row { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: background-color .5s; }
@media (min-width: 768px) { .register-row { grid-template-columns: 76px 52px 1.4fr 1fr 150px; } }
.register-row:hover { background: rgba(184, 151, 90, .05); }
.register-no { font: italic 400 22px/1 var(--display); color: var(--accent); font-variant-numeric: lining-nums; }
.register-photo { width: 52px; height: 66px; overflow: hidden; position: relative; background: #17121e; }
.register-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.12); transition: filter .6s; }
.register-row:hover .register-photo img { filter: none; }
.register-name { font: 400 22px/1.2 var(--display); color: var(--fg); }
.register-head { display: none; }
@media (min-width: 768px) { .register-head { display: grid; grid-template-columns: 76px 52px 1.4fr 1fr 150px; gap: 20px; padding: 0 0 14px; border-bottom: 1px solid var(--line-strong);
  font: 500 10px/1 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } }
.badge-featured { font: 500 10px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }

/* ==========================================================================
   The certificate of authenticity (verify page, the award page)
   ========================================================================== */
.certificate { position: relative; background: var(--grain-paper), #fbf7ef; color: var(--ink); padding: 56px 24px 48px; box-shadow: 0 50px 100px -50px rgba(22, 18, 28, .45); }
@media (min-width: 640px) { .certificate { padding: 76px 64px 60px; } }
.certificate::before { content: ""; position: absolute; inset: 12px; border: 1px solid #c9b48a; pointer-events: none; }
.certificate::after { content: ""; position: absolute; inset: 17px; border: 1px solid #e3d7bf; pointer-events: none; }
/* Micro-text: the award code repeated along the frame, as on a banknote. */
.microtext { position: absolute; overflow: hidden; white-space: nowrap; font: 500 5.5px/1 var(--ui); letter-spacing: .3em; color: #a99366; opacity: .9; pointer-events: none; user-select: none; }
.microtext.t { top: 4px; left: 24px; right: 24px; } .microtext.b { bottom: 4px; left: 24px; right: 24px; }
.microtext.l, .microtext.r { top: 24px; bottom: 24px; writing-mode: vertical-rl; }
.microtext.l { left: 3px; transform: rotate(180deg); } .microtext.r { right: 3px; }
.certificate .sig-watermark { position: absolute; left: 50%; top: 50%; width: min(118%, 760px); transform: translate(-50%, -50%); color: #b39c6c; opacity: .14; pointer-events: none; }
/* The award record, laid out like the Laureate certificate: the gold frame from Nikhil's artwork as a border image. */
.record { position: relative; color: #efe9f1; background: #221a30; border: 112px solid transparent; border-image: url("../img/record-frame.jpg") 290 round; padding: 6px 8px 34px; box-shadow: 0 50px 100px -50px rgba(22, 18, 28, .6); }
.record-seal { display: block; width: 150px; height: auto; margin: -56px auto 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.record.is-withdrawn .record-seal { filter: grayscale(1) brightness(.7); }
.record-title { margin-top: 30px; font: 400 clamp(2.4rem, 6vw, 4.2rem)/1 var(--text); letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: #fbf8f2; }
.record-sub { margin-top: 18px; font: 400 clamp(.85rem, 1.6vw, 1.2rem)/1.3 var(--text); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #e9e2ec; }
.record-italic { font: italic 400 clamp(1.15rem, 2vw, 1.55rem)/1.4 var(--text); color: #ece6ee; }
.record-name { margin-top: 22px; font: 500 clamp(2.1rem, 5.4vw, 3.9rem)/1.1 var(--text); color: #e3c47e; overflow-wrap: anywhere; }
.record-place { margin-top: 12px; font: 500 13px/1.4 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #c9ad6e; }
.record-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px auto 0; max-width: 300px; }
.record-rule::before, .record-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #b8975a); }
.record-rule::after { background: linear-gradient(270deg, transparent, #b8975a); }
.record-rule span { font: italic 8px/1 var(--text); color: #a88c58; }
.record .status-mark.record-status { color: #d9be82; }
.record .status-mark.is-revoked { color: #e39aa9; }
.record-citation { margin-top: 26px; }
@media (max-width: 640px) {
  .record { border-width: 46px; padding: 0 0 22px; }
  .record-seal { width: 104px; margin-top: -18px; }
  .record-title { margin-top: 22px; letter-spacing: .22em; text-indent: .22em; }
  .record-sub { letter-spacing: .2em; text-indent: .2em; }
}
.status-mark { display: inline-flex; align-items: center; gap: 12px; font: 500 11px/1 var(--ui); letter-spacing: .32em; text-transform: uppercase; color: var(--gilt-deep); }
.status-mark::before, .status-mark::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.status-mark.is-revoked { color: var(--oxblood); }
.certificate dt { font: 500 9.5px/1 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: #8c8392; }
.certificate dd { font: 400 1.25rem/1.2 var(--display); margin-top: 8px; font-variant-numeric: lining-nums; }

/* ==========================================================================
   Motion: slow is expensive
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-mask { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-mask.is-in { clip-path: inset(0 0 -10% 0); transform: none; }
.reveal-curtain { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--ease); }
.reveal-curtain.is-in { clip-path: inset(0); }
.laurel-draw path { opacity: 0; animation: fadeIn .6s var(--ease) forwards; }
/* "1 in 140": the crowd gathers, then recedes as the one mark among them lights, and a line names it. */
.odds { width: 100%; max-width: 44rem; }
.odds svg { display: block; width: 100%; height: auto; overflow: visible; }
.odds-p { fill: var(--muted); opacity: 0; }
.odds-lit, .odds-ripple, .odds-you text { opacity: 0; }
.odds-lit, .odds-ripple { transform-box: fill-box; transform-origin: center; }
.odds-you polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.odds-you text { font: 500 7.5px var(--ui); letter-spacing: .32em; text-transform: uppercase; fill: var(--fg-soft); }
@media (max-width: 640px) { .odds-you text { font-size: 11px; letter-spacing: .24em; } }
.odds.is-in .odds-p { animation: oddsCrowd 3.2s var(--ease) var(--d, 0ms) both; }
.odds.is-in .odds-lit { animation: oddsLit 1.6s var(--ease) 1.7s both; }
.odds.is-in .odds-ripple { animation: oddsRipple 2.4s var(--ease) 2.1s both; }
.odds.is-in .odds-you polyline { animation: oddsDraw 1.1s var(--ease) 2.6s both; }
.odds.is-in .odds-you text { animation: fadeIn 1s var(--ease) 3.3s both; }
@keyframes oddsCrowd { 0% { opacity: 0; } 35% { opacity: calc(var(--o, 1) * .62); } 100% { opacity: calc(var(--o, 1) * .38); } }
@keyframes oddsLit { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes oddsRipple { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
@keyframes oddsDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-mask, .reveal-curtain, .rise { opacity: 1; transform: none; clip-path: none; }
  .odds-ripple { animation: none !important; }
  .signature.engrave use { stroke-dashoffset: 0; animation: none; }
  .signature-slow .sig-sweep, .signature-slow .sig-middle, .signature-slow .sig-centre { animation: none; }
}

/* ---------- Utility ---------- */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.no-scroll { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.grid > * { min-width: 0; }
.section { padding-top: clamp(96px, 14vw, 190px); padding-bottom: clamp(96px, 14vw, 190px); }
.section-sm { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.container-x { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 768px) { .container-x { padding-left: 40px; padding-right: 40px; } }
.container-text { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Cards behave as one link: the hairline draws in when the card is hovered. */
.story-card:hover .link-line::after, .register-row:hover .link-line::after { transform: scaleX(1); transform-origin: left; }
.portrait-room .pr-photo .seat-mono svg { width: 40%; }
.story-card .story-text { padding-top: 24px; }
/* The gold corner sash on a featured portrait: its own link to the award record, over the photo's top-right corner. */
.story-card-wrap { position: relative; }
.card-sash { position: absolute; top: 0; right: 0; z-index: 2; width: 30%; min-width: 88px; aspect-ratio: 1; line-height: 0; }
.feature-portrait .laureate-ribbon { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 2; width: 74%; line-height: 0; }
.feature-portrait .laureate-ribbon img { width: 100%; height: auto; object-fit: initial; view-transition-name: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); transition: transform .6s var(--ease), filter .6s var(--ease); }
.feature-portrait .laureate-ribbon:hover img, .feature-portrait .laureate-ribbon:focus-visible img { transform: translateY(-2px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)) brightness(1.06); }
.card-sash img { width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); transition: transform .6s var(--ease), filter .6s var(--ease); transform-origin: top right; }
.card-sash:hover img, .card-sash:focus-visible img { transform: scale(1.06); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)) brightness(1.08); }
.story-card.is-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 28px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.story-card.is-row:last-child { border-bottom: 0; padding-bottom: 0; }
.story-card.is-row .story-text { padding-top: 0; }
@media (max-width: 639px) { .story-card.is-row { align-items: start; gap: 20px; grid-template-columns: 34% 1fr; } }

/* A quiet list: a gilt dash, then the line (how it works, press). */
.dash-list li { display: grid; grid-template-columns: 1.6rem 1fr; padding: 14px 0; border-top: 1px solid var(--line); color: var(--fg-soft); }
.dash-list li:last-child { border-bottom: 1px solid var(--line); }
.dash-list li::before { content: "—"; color: var(--accent); }

/* The laureate kit's share images (welcome page). Desktop: two rows of equal height, the width of each card
   in proportion to its image (1.905 : 1 : 0.5625, then the 4:1 cover across the full width). */
.kit-cards { display: grid; grid-template-columns: 1fr .5625fr; gap: 20px 16px; }   /* phones: post and story side by side, same height */
.kit-card { display: block; }
.kit-frame { display: block; overflow: hidden; background: var(--aubergine); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .6s var(--ease); }
.kit-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.kit-card:hover .kit-frame { box-shadow: 0 0 0 1px var(--line-strong); }
.kit-card:hover .kit-frame img { transform: scale(1.02); }
.kit-label { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); transition: color .4s; }
.kit-card:hover .kit-label { color: var(--accent); }
.kit-og, .kit-linkedin { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .kit-cards { grid-template-columns: 1.905fr 1fr .5625fr; }
  .kit-og { grid-column: auto; }
}

/* ---------- The laureate kit (welcome page) ---------- */
/* The kit's index stays pinned under the header (the page is long), scrolls sideways on phones, and marks where you are. */
.kit-index { position: sticky; top: 64px; z-index: 30; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  margin: 0 -20px; padding: 14px 20px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kit-index::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .kit-index { margin: 0; padding: 14px 0; flex-wrap: wrap; gap: 8px 22px; } }
.kit-index a { font: 500 10.5px/1.8 var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-soft); border-bottom: 1px solid transparent; transition: color .4s, border-color .4s; }
.kit-index a:hover { color: var(--accent); }
.kit-index a[aria-current="true"] { color: var(--fg); border-color: var(--accent); }
.kit-step { display: grid; gap: 22px; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.kit-index + .kit-step { border-top: 0; }
@media (min-width: 768px) { .kit-step { grid-template-columns: 3fr 9fr; gap: 40px; } }
.kit-head h3 { font: 400 24px/1.25 var(--display); margin-top: 12px; }
.kit-body { min-width: 0; }
.kit-cert { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); transition: transform .8s var(--ease); }
.kit-cert:hover { transform: translateY(-3px); }
.kit-cert img { display: block; width: 100%; height: auto; }

/* The Portrait Studio */
.studio { display: grid; gap: 24px; }
@media (min-width: 900px) { .studio { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.studio-stage { background: #07060a; box-shadow: inset 0 0 0 1px var(--line); padding: 18px; display: flex; justify-content: center; }
.studio-stage canvas { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; cursor: grab; touch-action: none; }
.studio-stage canvas:active { cursor: grabbing; }
.studio-controls { display: flex; flex-direction: column; gap: 20px; }

/* Badge preview: the same badge on a light and a dark page */
.badge-preview { display: grid; grid-template-columns: 1fr 1fr; }
.badge-preview-pane { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 24px; }
.badge-preview-pane img { max-width: 100%; height: auto; }
.badge-preview-pane.is-light { background: #ffffff; }
.badge-preview-pane.is-dark { background: #1b1a1f; }
.kit-tablist { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); }
.kit-tablist button { font: 500 10.5px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; padding: 12px 0; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.kit-tablist button[aria-selected="true"] { color: var(--fg); border-color: var(--accent); }
.kit-tabpanel { padding-top: 14px; font-size: 14.5px; color: var(--fg-soft); }

.badge-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 640px) { .badge-styles { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 639px) { .badge-styles .choice { padding: 12px !important; } .badge-styles .muted { display: none; } }
.sig-preview { padding: 26px; background: #ffffff; color: #16121c; }
.kit-fields > div { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.kit-fields dt { font: 500 10px/1.8 var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.kit-fields dd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14.5px; color: var(--fg); }
.kit-guide { white-space: pre-wrap; font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; color: var(--fg-soft); padding: 18px; margin-top: 12px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }

/* Print marks: a visiting card, front and back, and the three marks */
.vcard-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; }
.vcard { position: relative; aspect-ratio: 85 / 55; padding: 7% 8%; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); display: flex; flex-direction: column; }
.vcard-back { align-items: center; justify-content: center; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--line-strong); }
.vcard-mark { margin-top: auto; width: 62%; }
.pm-tile .pm-art { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 14%; background: var(--paper); }
.pm-tile .pm-art img { max-width: 100%; max-height: 100%; }

/* ---------- The laureate kit, shown (The Award page, nominate page) ---------- */
.showcase { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-cert { grid-column: span 2; grid-row: span 2; } }
.sc-tile { display: flex; flex-direction: column; margin: 0; }
.sc-art { flex: none; height: 270px; display: flex; align-items: center; justify-content: center; padding: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.sc-art img, .sc-art canvas { max-width: 100%; max-height: 100%; height: auto; }
.sc-art canvas { width: auto; }
@media (max-width: 767px) { .sc-art { height: auto; min-height: 220px; } .sc-art canvas { max-height: 320px; } }   /* stacked: each tile as tall as it needs */
.sc-cert .sc-art { flex: 1; height: auto; min-height: 270px; padding: clamp(18px, 3vw, 44px); }
.sc-cert .sc-art img { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.sc-paper { background: radial-gradient(70% 70% at 50% 40%, rgba(58, 31, 77, .35), transparent), #0e0b13; }
.sc-dark { background: #07060a; }
.sample-mark { position: relative; display: inline-block; line-height: 0; max-height: 100%; }
.sample-mark::after { content: "SAMPLE"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg); z-index: 3; pointer-events: none; font: 600 clamp(18px, 4.2vw, 64px)/1 var(--ui); letter-spacing: .35em; text-indent: .35em; color: rgba(255, 255, 255, .5); border: 2px solid rgba(255, 255, 255, .42); padding: .32em .55em; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); white-space: nowrap; }
.sc-photo.sample-mark::after { top: 58%; font-size: clamp(15px, 1.7vw, 24px); border-width: 1.5px; color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .6); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.sc-photo { position: relative; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; line-height: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.sc-art .sc-photo img:first-child { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) sepia(.1) contrast(1.05); }
.sc-art .sc-photo .sc-photo-ribbon { position: absolute; left: 50%; bottom: 6%; width: 82%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.sc-art .sc-photo .sc-photo-sash { position: absolute; top: 0; right: 0; width: 34%; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
@media (max-width: 767px) { .sc-photo { height: 300px; } }
.sc-white { background: #ffffff; }
.sc-desk { background: #1a1620; }
.sc-badges { flex-wrap: wrap; gap: 18px 22px; }
.sc-tile figcaption { padding: 18px 2px 0; font-size: 14px; line-height: 1.6; color: var(--fg-soft); }
.sc-tile figcaption b { display: block; font: 400 20px/1.3 var(--display); color: var(--fg); margin-bottom: 4px; }
.kit-glimpse { display: flex; flex-direction: column; gap: 14px; padding: 22px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .6s var(--ease); }
.kit-glimpse:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.kit-glimpse:hover .link-line::after { transform: scaleX(1); transform-origin: left; }
.kit-glimpse-row { display: flex; align-items: center; gap: 14px; }
.kg-cert { width: 46%; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9); }
.kg-seal { width: 18%; }
.kg-plaque { width: 30%; }

/* "Check an award" results (filled in by site.js from /verify/lookup). */
.check-result { display: flex; align-items: flex-start; gap: 16px; }
.check-result .mark { font: 400 22px/1.1 var(--display); }
.check-result.is-bad .mark { color: #c2546a; }

/* Selectable chips (story tags in the story form). */
.choice-chip { display: inline-block; font: 500 10.5px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; padding: 12px 16px; border: 1px solid var(--field-line); color: var(--fg-soft); transition: all .4s var(--ease); }
.choice-chip:hover { border-color: var(--line-strong); }
.peer:checked + .choice-chip { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.peer:focus-visible + .choice-chip { outline: 1px solid var(--accent); outline-offset: 3px; }

/* Phones: the wordmark tightens; Close floats over the portrait; long codes never wrap mid-word. */
@media (max-width: 767px) {
  .wordmark .w1 { font-size: 12px; letter-spacing: .22em; }
  .portrait-room .pr-close { position: fixed; top: 14px; right: 14px; padding: 10px 14px; background: rgba(12, 10, 16, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .certificate dd { font-size: 1.05rem; }
}
.certificate dd { white-space: nowrap; }

/* Large Bodoni: cap the optical size at 40. Left on auto, browsers pick the 96pt cut above ~90px,
   whose hairlines vanish and whose spacing opens up ("w e d d i n g"). Compared side by side, 2026-10-12.
   Kept last on purpose: the `font:` shorthand used above resets font-variation-settings. */
.display-xl, .display-lg, .display-md, .manifesto p, .standfirst, .pull-quote, .voice q, .pr-quote, .menu-panel nav a, .numeral { font-variation-settings: "opsz" 40; }

/* The Signature's centre medallion: a disc in the page colour, carrying the laureate number. */
.signature .sig-medal-disc { fill: var(--bg, #0c0a10); }
.signature.engrave .sig-medal { opacity: 0; animation: fadeIn 1.4s 3s forwards; }

/* Portraits fade in as they load (site.js adds .img-wait only while an image is still loading). Kept last so it wins. */
.story-card .story-photo img, .feature-portrait img, .register-photo img, .voice img { transition: filter 1s var(--ease), transform 1.6s var(--ease), opacity .9s var(--ease); }
img.img-wait { opacity: 0; }

/* Printing a record, a story or a page: the document only, on white. */
@media print {
  .site-header, .site-footer, .menu-panel, .flash, .scroll-cue, .kit-index, [data-copy], form, .unveil-dial { display: none !important; }
  body, .room-night, .room-paper, .room-aubergine { background: #fff !important; color: #111 !important; }
  .reveal, .reveal-mask, .reveal-curtain, .rise { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .certificate { box-shadow: none; }
  a { color: inherit; text-decoration: none; }
}

/* Legibility (Nikhil 2026-10-17: "very stylish but a bit hard to read"). In Bodoni Moda the optical size sets the
   contrast: a lower "opsz" gives sturdier hairlines. Three tiers: the largest headlines keep their elegance, and
   everything at reading size (names, card titles, quotes, numerals) gets the sturdy cut and a touch more weight.
   Kept last: it overrides the opsz 40 cap above, and the `font:` shorthands reset variation settings. */
.font-serif, .italic-serif, .numeral, .roman, .step-num, .seat-tip b, .choice b, .timeline b, .story-card .name, .register-no,
.register-name, .certificate dd, .kit-head h3, .sc-tile figcaption b, .check-result .mark, .menu-panel nav a .no,
.seat-mono .mono-initials, .seat-open .seat-num { font-variation-settings: "opsz" 11; font-weight: 500; }
.wordmark .w1, .wordmark-text { font-variation-settings: "opsz" 11; }
.display-md, .display-lg, .menu-panel nav a, .voice q, .standfirst, .pull-quote, .pr-quote { font-variation-settings: "opsz" 18; font-weight: 480; }
.display-xl, .manifesto p { font-variation-settings: "opsz" 26; font-weight: 470; }
/* Italic words inside a headline follow the headline's cut, not the small one. */
.display-xl em, .display-lg em, .display-md em, .manifesto em { font-variation-settings: inherit; font-weight: inherit; }

/* The Emblem on /for-millionaires (views/partials/emblem.php): product-launch staging. */
.emblem-title { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 8.4vw, 8.2rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.emblem-sub { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--gilt-light); }
.emblem-gilt { background: linear-gradient(100deg, #f6e7ba, #c9a764 40%, #9c7a3e 60%, #e3cb92); -webkit-background-clip: text; background-clip: text; color: transparent; }
.emblem-hero { position: relative; min-height: 100svh; }
/* Slow rays turning behind the mark, and gold dust rising through the dark */
.emblem-rays { position: absolute; left: 50%; top: 66%; width: 170vmax; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(241, 222, 168, .065) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 62%); mask: radial-gradient(closest-side, #000 8%, transparent 62%);
  animation: emblemRays 140s linear infinite; }
@keyframes emblemRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.emblem-dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.emblem-dust span { position: absolute; bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: #f6e7ba;
  box-shadow: 0 0 6px 1px rgba(241, 222, 168, .8); opacity: 0; animation: emblemDust var(--t) linear var(--d) infinite; }
@keyframes emblemDust { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translate(var(--x), -96svh); opacity: 0; } }
.emblem-tilt { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease); will-change: transform; }
.emblem-tilt svg { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.emblem-hero::after { content: ""; position: absolute; left: 50%; bottom: 4%; width: min(120vw, 1100px); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(241, 222, 168, .22), rgba(192, 159, 91, .08) 45%, transparent 70%); animation: emblemGlow 7s ease-in-out infinite; }
@keyframes emblemGlow { 50% { opacity: .55; transform: translateX(-50%) scale(.94); } }
.emblem-stage { position: relative; z-index: 1; width: min(80vw, 600px); margin: clamp(48px, 8vw, 96px) auto 0; padding-bottom: clamp(80px, 10vw, 140px); }
.emblem-stage svg { display: block; width: 100%; height: auto; }
.em-piece { opacity: 0; transform: translate(var(--dx), var(--dy)); transform-box: fill-box; transform-origin: center;
  transition: transform 1.8s var(--ease) var(--d), opacity 1.3s var(--ease) var(--d); }
.em-piece[style*="--dy:0px"] { transform: scale(0); }
.assemble.is-in .em-piece { opacity: 1; transform: none; }
.emblem-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 24px; border-top: 1px solid var(--line); padding-top: 56px; text-align: center; }
@media (min-width: 900px) { .emblem-stats { grid-template-columns: repeat(4, 1fr); } }
.emblem-num { font-family: var(--display); font-size: clamp(3.4rem, 7vw, 6rem); line-height: 1; font-variant-numeric: lining-nums;
  background: linear-gradient(160deg, #f6e7ba, #c9a764 45%, #9c7a3e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.emblem-lab { margin-top: 14px; font: 400 15px/1.4 var(--ui); letter-spacing: .04em; color: var(--fg-soft); }
.emblem-bento { display: grid; gap: 18px; }
@media (min-width: 900px) { .emblem-bento { grid-template-columns: repeat(2, 1fr); } .emblem-tile.is-wide { grid-column: 1 / -1; grid-template-columns: 1.1fr 1fr; display: grid; align-items: center; } }
.emblem-tile { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(28px, 4vw, 52px);
  background: radial-gradient(120% 90% at 50% 0%, #2a1c38 0%, #160f1e 60%, #0f0b14 100%); box-shadow: inset 0 0 0 1px rgba(217, 192, 138, .14); }
.emblem-tile-art { width: min(62%, 280px); margin: 0 auto 32px; transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.emblem-tile.is-wide .emblem-tile-art { width: min(80%, 360px); margin-bottom: 0; }
.emblem-tile-art svg { display: block; width: 100%; height: auto; }
.emblem-tile:hover .emblem-tile-art { transform: scale(1.04); filter: brightness(1.12); }
.emblem-tile-head { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; letter-spacing: -.01em; }
.emblem-tile.is-wide .emblem-tile-head { font-size: clamp(3.6rem, 8vw, 7rem); background: linear-gradient(160deg, #f6e7ba, #c9a764 45%, #9c7a3e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.emblem-close { padding: clamp(96px, 14vw, 200px) 0; border-top: 1px solid var(--line); }
.emblem-triplet { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--fg); }
.emblem-triplet span { color: var(--gilt-light); }
/* The emblem arrives whole: out of a blur, growing into place */
.emblem-arrive.reveal { transform: scale(.86); filter: blur(12px); transition: opacity 2s var(--ease), transform 2.6s var(--ease), filter 2s var(--ease); }
.emblem-arrive.reveal.is-in { transform: none; filter: none; }
/* The journey: the whole emblem fills with gold from the base up as the chapters scroll by (public/js/emblem.js) */
.emblem-journey-grid { display: grid; gap: 24px; padding: 40px 0 10vh; }
@media (min-width: 1024px) { .emblem-journey-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.emblem-journey-art { position: sticky; top: 64px; z-index: 2; height: 36vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(var(--night) 78%, transparent); }
@media (min-width: 1024px) { .emblem-journey-art { top: 12vh; height: 76vh; background: none; } }
.emblem-journey-stack { position: relative; height: 100%; aspect-ratio: 940 / 864; max-width: 100%; }
@media (min-width: 1024px) { .emblem-journey-stack { height: auto; width: min(92%, 460px); } }
.emblem-journey-stack svg { display: block; width: 100%; height: auto; }
.emblem-journey-dim { opacity: .09; }
.emblem-journey-lit { position: absolute; inset: 0; clip-path: inset(var(--lvl, 100%) -40% 0 -40%); transition: clip-path 1.6s var(--ease); }
.emblem-journey-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .9s var(--ease); }
@media (min-width: 1024px) { .emblem-journey-step { min-height: 76vh; } }
.emblem-journey-step.is-active { opacity: 1; }
/* The muse */
.emblem-muse { padding: clamp(40px, 6vw, 80px) 0 clamp(96px, 12vw, 160px); }
.emblem-muse-feature { display: grid; gap: 40px; align-items: center; border-radius: 22px; padding: clamp(32px, 5vw, 72px);
  background: radial-gradient(90% 120% at 0% 50%, #2a1c38 0%, #160f1e 55%, #0f0b14 100%); box-shadow: inset 0 0 0 1px rgba(217, 192, 138, .14); }
@media (min-width: 900px) { .emblem-muse-feature { grid-template-columns: 220px 1fr; gap: 64px; } }
.emblem-muse-line { justify-self: center; width: 22px; height: clamp(220px, 34vw, 420px); border-radius: 50% 50% 46% 46% / 8% 8% 92% 92%;
  background: linear-gradient(100deg, #6e5428 0%, #c9a764 30%, #fbf0c8 48%, #c9a764 62%, #7a5d2c 100%);
  box-shadow: 0 0 40px rgba(241, 222, 168, .35), 0 0 120px rgba(192, 159, 91, .25); transform: rotate(-9deg); }
.emblem-quote { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.emblem-quote-by { margin-top: 22px; font: 500 12px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gilt-light); }
.emblem-quote-by span { color: var(--fg-soft); margin-left: 10px; letter-spacing: .12em; }
/* Homage panels: Leonardo's measured emblem, Picasso's planes (pieces return home on hover) */
.emblem-homage-art { margin: -8px auto 34px; width: min(100%, 420px); }
.emblem-homage-art svg { display: block; width: 100%; height: auto; }
.cubist-piece { transform-box: fill-box; transform-origin: center; transform: translate(var(--tx), var(--ty)) rotate(var(--r)); transition: transform 1.4s var(--ease); }
.emblem-cubist:hover .cubist-piece { transform: none; }
@media (prefers-reduced-motion: reduce) { .emblem-hero::after, .emblem-rays { animation: none; } .emblem-dust { display: none; } .em-piece { transition: none; opacity: 1; transform: none; } }

.emblem-teaser svg { width: min(56vw, 260px); height: auto; filter: drop-shadow(0 0 22px rgba(241, 222, 168, .35)) drop-shadow(0 0 70px rgba(192, 159, 91, .25)); transition: transform 1s var(--ease); }
.emblem-teaser:hover svg { transform: scale(1.04); }

/* The Laureate Award on a Leonardo-style study (views/partials/leonardo_award.php) */
.leo-award { max-width: 600px; margin: 0 auto; }
.leo-sheet { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 40%, #f1e6cd 0%, #e4d2ad 55%, #c9b07f 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 80px rgba(110, 80, 40, .35); }
.leo-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain-paper, none); opacity: .55; mix-blend-mode: multiply; }
.leo-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .26; }
.leo-study { position: absolute; inset: 0; width: 100%; height: 100%; }
.leo-sheet::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(60, 38, 14, .45) 100%); }
.leo-sheet::after { z-index: 1; }
.leo-medal { position: absolute; z-index: 2; left: 49.8%; top: 53%; width: 66.4%; opacity: 1; transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 3px rgba(60, 35, 10, .35)); }
.leo-medal svg { display: block; width: 100%; height: auto; }

/* The sweeping shine on the mark (Trophy::svg $shine): off for reduced motion */
@media (prefers-reduced-motion: reduce) { .tm-shine { display: none; } }

/* A laureate's own award on their page: the medallion with their code, a warm glow and a sweeping shine */
.laureate-medal { position: relative; display: block; width: min(68vw, 240px); margin: 0 auto; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(168, 135, 69, .25), 0 22px 50px -18px rgba(60, 35, 10, .55), 0 0 60px rgba(201, 167, 100, .28); transition: transform .8s var(--ease); }
.laureate-medal svg { display: block; width: 100%; height: auto; }
.laureate-medal::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 250, 235, .55) 50%, transparent 65%); transform: translateX(-120%);
  animation: medalShine 6s ease-in-out 1s infinite; }
@keyframes medalShine { 0% { transform: translateX(-120%); } 38%, 100% { transform: translateX(120%); } }
.laureate-medal:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .laureate-medal::after { display: none; } }

/* The final award icons shown large (For Millionaires hero, the menu tile): a soft gold glow */
.award-glow img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 28px rgba(241, 222, 168, .25)) drop-shadow(0 24px 50px rgba(0, 0, 0, .45)); }

/* A sweeping shine across a round award image (the menu's feature tile) */
.award-shine { position: relative; display: block; border-radius: 50%; overflow: hidden; }
.award-shine::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 250, 235, .5) 50%, transparent 65%); transform: translateX(-120%);
  animation: medalShine 6s ease-in-out 1.5s infinite; }
@media (prefers-reduced-motion: reduce) { .award-shine::after { display: none; } }

/* Personal address field: the domain as a fixed prefix inside the input */
.handle-input { display: flex; align-items: stretch; }
.handle-prefix { display: flex; align-items: center; padding: 0 12px; font: 400 15px var(--ui); color: var(--fg-soft); border: 1px solid var(--line-strong); border-right: 0; white-space: nowrap; }
.handle-input .input { flex: 1; min-width: 0; }
.handle-ok { color: #3f8f5a; }
.room-night .handle-ok { color: #8fd3a5; }
@media (max-width: 520px) { .handle-prefix { font-size: 12.5px; padding: 0 8px; } }

/* The footer's night sky (canvas behind the content) */
.site-footer { position: relative; overflow: hidden; }
.footer-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer-constellation { width: 220px; height: 205px; flex: none; margin-top: 8px; }
@media (max-width: 767px) { .footer-constellation { margin: 0 auto; } }

/* Help icons (help_tip()): a small "i" that opens a short explanation. */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; text-transform: none; letter-spacing: normal; }
.tip-btn { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); background: transparent; font: italic 600 11px/1 var(--display); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .3s var(--ease), color .3s var(--ease); }
.tip-btn:hover, .tip-btn:focus-visible, .tip-btn[aria-expanded="true"] { background: var(--accent); color: var(--bg, #0e0b13); outline: none; }
.tip-pop { position: absolute; z-index: 60; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 14px 16px; background: #1c1524; color: #ece6ee; border: 1px solid rgba(217, 192, 138, .45); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); font: 400 14px/1.55 var(--ui); text-align: left; white-space: normal; }
.room-paper .tip-pop, .library .tip-pop { background: #fffdf8; color: #2a2430; border-color: #d8c9a4; box-shadow: 0 18px 40px -16px rgba(40, 30, 10, .35); }
.tip-pop::before { content: ""; position: absolute; top: -6px; left: var(--arrow, 50%); width: 10px; height: 10px; background: inherit; border-left: 1px solid; border-top: 1px solid; border-color: inherit; transform: translateX(-50%) rotate(45deg); }

/* Application progress (the private /n/ page). */
.app-steps { display: flex; flex-wrap: wrap; gap: 10px 0; list-style: none; padding: 0; }
.app-steps li { display: flex; align-items: center; gap: 10px; font: 500 11px/1.3 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.app-steps li:not(:last-child)::after { content: ""; width: clamp(16px, 4vw, 48px); height: 1px; background: var(--line-strong); margin: 0 12px; }
.app-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font: italic 400 13px/1 var(--display); letter-spacing: 0; text-transform: none; }
.app-steps li.is-done { color: var(--fg-soft); }
.app-steps li.is-done .app-dot { background: var(--accent); border-color: var(--accent); color: var(--bg); font-style: normal; }
.app-steps li.is-now { color: var(--accent); }
.app-steps li.is-now .app-dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217, 192, 138, .14); }
@media (max-width: 640px) { .app-steps li { font-size: 10px; letter-spacing: .14em; } .app-steps li:not(:last-child)::after { width: 10px; margin: 0 8px; } }