/* ==========================================================================
   De Bach au Jazz — design system
   Palette: ink-navy shadow, brass lamplight, burgundy velvet from the film;
   the logo's own taupes in the masthead; a cool paper ground (2027 renewal —
   no warm cream).
   ========================================================================== */

/* Typefaces served from this site, not from Google (security review
   2026-10-25: no visitor address goes to Google, no outside supplier in the
   page path). Variable fonts subset to Latin, Latin-extended and Greek from
   the OFL files in flyer/2027/fonts; licences in /assets/fonts/. */
@font-face {
  font-family: "Commissioner";
  src: url("/assets/fonts/commissioner-vf.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-vf.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic-vf.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}

:root {
  /* ink & paper */
  --ink:        #16202E;   /* deep navy — the shadow in every frame */
  --ink-2:      #1E2B3C;
  --ink-3:      #2C3A4D;
  --paper:      #F0F1F3;   /* cool off-white */
  --paper-2:    #E6E8EC;
  --paper-3:    #C6CAD0;   /* cool grey */

  /* the logo's own colours, for the masthead */
  --taupe:      #7C6865;
  --taupe-soft: #BFA19D;

  /* accents */
  --brass:      #C9A227;   /* lamp brass, piano frame */
  --brass-deep: #7D5F0C;   /* 5.17:1 on paper — the only brass used for text */
  --burgundy:   #6B1F2A;   /* velvet seats, curtains */
  --sage:       #3E5449;   /* jury baize */

  /* semantic */
  --bg:         var(--paper);
  --bg-raised:  #F8F9FA;
  --fg:         var(--ink);
  --fg-soft:    #55617240;
  --fg-muted:   #46515F;   /* darkened 2026-10-16 for contrast (was #5A6675) */
  --rule:       #16202E1F;
  --accent:     var(--burgundy);

  /* type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Palatino, "Times New Roman", serif;
  --font-body: "Commissioner", "Helvetica Neue", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scale — fluid, 1.25 ratio at the small end opening to 1.333 */
  /* raised 2026-10-16 at the client's request: the text read small, above all on phones */
  --step--1: clamp(0.90rem, 0.87rem + 0.14vw, 0.95rem);
  --step-0:  clamp(1.125rem, 1.07rem + 0.25vw, 1.20rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.44vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.39rem + 0.86vw, 2.11rem);
  --step-3:  clamp(1.95rem, 1.64rem + 1.55vw, 3.00rem);
  --step-4:  clamp(2.44rem, 1.90rem + 2.68vw, 4.21rem);
  --step-5:  clamp(3.05rem, 2.15rem + 4.50vw, 6.00rem);

  /* space */
  --sp-1: 0.5rem;  --sp-2: 0.875rem; --sp-3: 1.5rem;
  --sp-4: 2.5rem;  --sp-5: 4rem;     --sp-6: 6.5rem; --sp-7: 10rem;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --radius: 2px;

  color-scheme: light;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600;
     letter-spacing: 0.01em; }
p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
strong { font-weight: 600; }
em { font-style: italic; }
small { font-size: var(--step--1); }
sup { font-size: 0.6em; vertical-align: super; line-height: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 var(--sp-2);
}

/* ---------- links ----------
   Underlined burgundy links are for running text only — not for menus, tabs,
   cards, buttons or the media grids, which carry their own treatment. */
.content a:not(.btn):not(.tab):not(.card--link) {
  color: var(--burgundy);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size .25s ease, color .2s ease;
}
.content a:not(.btn):not(.tab):not(.card--link):hover { color: var(--brass-deep); background-size: 100% 2px; }
.card--link, .edition-nav a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; }

/* ---------- layout ---------- */
.wrap { width: min(100% - var(--gutter) * 2, 1180px); margin-inline: auto; }
.prose { width: min(100% - var(--gutter) * 2, 760px); margin-inline: auto; }
.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }

/* ---------- site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  color: var(--paper);
  border-bottom: 1px solid #ffffff14;
}
.site-header__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 68px;
  padding-block: var(--sp-1);
}
/* The compact logo in the menu bar only appears once the masthead has scrolled
   away — at the top of the page the masthead already carries the logo. */
.brand {
  display: flex; align-items: center; flex: 0 0 auto; text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
}
.brand img { height: 40px; width: auto; max-width: none; }
.site-header[data-stuck="true"] .brand {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s ease, transform .3s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .brand { transition: none; } }

/* ---------- masthead: the client's own header, on every page ---------- */
.masthead {
  position: relative; z-index: 61;                 /* above the fixed film stage */
  background: var(--bg-raised);
  border-bottom: 1px solid var(--rule);
}
.masthead::after {                                 /* a single brass hairline, as in their Word header */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 18%, var(--brass) 82%, transparent);
  opacity: .7;
}
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: clamp(0.9rem, 2vw, 1.4rem);
}
.masthead__logo { display: block; flex: 0 0 auto; line-height: 0; }
.masthead__logo img { height: clamp(56px, 6.2vw, 84px); width: auto; }
.masthead__edition {
  margin: 0; max-width: none; text-align: right;
  display: grid; gap: 0.25rem;
}
.masthead__dates {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.85rem); line-height: 1.1;
  color: var(--ink); letter-spacing: -0.005em;
}
.masthead__sub {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--taupe);
}
@media (max-width: 640px) {
  .masthead__bar { flex-direction: column; gap: var(--sp-2); text-align: center; }
  .masthead__edition { text-align: center; }
  .masthead__sub { letter-spacing: 0.14em; }
}
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; align-items: center; gap: 0.15rem; margin: 0; padding: 0; }
.nav a, .nav .has-sub > button {
  display: inline-block; padding: 0.55rem 0.7rem;
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: #E3E6EA; text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  border-radius: var(--radius);
  transition: color .18s ease, background .18s ease;
}
.nav a:hover, .nav .has-sub > button:hover { color: var(--brass); background: #ffffff0d; }
.nav a[aria-current="page"] { color: var(--brass); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 1px; background: var(--brass); margin-top: 3px;
}
.has-sub { position: relative; }
.has-sub > button::after {
  content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.45em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg); opacity: .6;
  transition: transform .2s ease;
}
.has-sub[data-open="true"] > button::after { transform: translateY(0.05em) rotate(-135deg); }
.has-sub[data-open="true"] > button { color: var(--brass); background: #ffffff0d; }
/* the section you're in is marked on its menu, not only inside the dropdown */
.has-sub:has(a[aria-current="page"]) > button { color: var(--brass); }

.subnav {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 236px;
  background: var(--ink-2); border: 1px solid #ffffff1a;
  border-radius: var(--radius); padding: 0.4rem;
  display: none; flex-direction: column; gap: 1px;
  box-shadow: 0 18px 40px #0b111c66;
}
/* an invisible bridge over the gap, so the pointer never "leaves" on the way down */
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-sub--end .subnav { left: auto; right: 0; }
.has-sub[data-open="true"] .subnav { display: flex; }
.subnav a { padding: 0.65rem 0.85rem; font-size: 0.88rem; border-radius: var(--radius); }
.subnav a:hover, .subnav a:focus-visible { background: #ffffff12; color: var(--brass); }
.subnav a[aria-current="page"] { background: #ffffff0d; }
.subnav a[aria-current="page"]::after { display: none; }
.subnav a[href="/archive/"] { margin-top: 0.3rem; padding-top: 0.75rem; border-top: 1px solid #ffffff1a;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

.nav-toggle { display: none; }

.btn-register {
  margin-left: 0.5rem;
  border: 1px solid var(--brass);
  color: var(--brass) !important;
  border-radius: var(--radius);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
/* "Registration" (client, 2026-10-17) is longer than the old "Register" (89px
   wide in the bar). Smaller letters keep the button that width, so the menu bar
   stays exactly as it was. Desktop bar only; ".nav" is needed to outrank ".nav a". */
@media (min-width: 1001px) {
  .nav .btn-register { font-size: 0.64rem; letter-spacing: 0.04em; padding: 0.62rem 0.3rem; white-space: nowrap; }
  /* every menu item stays on one line ("Master Class" added 2026-10-20) */
  .nav a, .nav .has-sub > button { white-space: nowrap; }
}
/* small laptops: a little less space around each item so the longer menu
   still fits on one line */
@media (min-width: 1001px) and (max-width: 1279px) {
  .nav ul { gap: 0; }
  .nav a, .nav .has-sub > button { padding-inline: 0.42rem; letter-spacing: 0.02em; }
  .nav .btn-register { margin-left: 0.3rem; }
}
.btn-register:hover { background: var(--brass); color: var(--ink) !important; }

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--paper);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
}
.page-hero__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .42; filter: saturate(.85);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, #16202ECC 0%, #16202E8C 45%, #16202EF2 100%),
    radial-gradient(120% 80% at 20% 0%, #C9A2271f, transparent 60%);
}
.page-hero h1 { font-size: var(--step-5); margin-bottom: 0.25rem; }
.page-hero .eyebrow { color: var(--brass); }
.page-hero__meta {
  margin-top: var(--sp-3); color: #D8D0C2; font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- content typography (verbatim page bodies) ---------- */
/* Long rulebook pages need a calm two-step structure: a serif section head
   with a hairline above it, then a brass label for the sub-step. Repeated
   display-scale headings turn a reference page into a shouting match. */
.content h2 {
  font-size: var(--step-2); font-weight: 500; color: var(--burgundy); margin-top: var(--sp-5);
  padding-top: var(--sp-3); border-top: 1px solid var(--rule);
}
.content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* the sub-step ("First round", "Second round"): bold and in colour, as on the old site */
.content h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--step-0); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brass-deep); margin-top: var(--sp-4); margin-bottom: var(--sp-2);
}
/* Program (client, 2026-10-17): the group headings must stand out clearly from
   the repertoire lists — bold sans on a light band with a burgundy edge */
.content--program h2, .content--prizes-2027 h2 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--step-1);
  line-height: 1.3; letter-spacing: 0; color: var(--burgundy);
  background: #6B1F2A0F; border-left: 4px solid var(--burgundy);
  border-top: 0; padding: 0.6rem 0.9rem; margin-top: var(--sp-5);
}
.content--program h2:first-child, .content--prizes-2027 h2:first-child { margin-top: 0; padding-top: 0.6rem; }
.content--program h3, .content--prizes-2027 h3 { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--brass); display: inline-block; padding-bottom: 0.15rem; }
/* Prizes: Group F as a dark framed card, the page's one stand-out block
   (client, 2026-10-17) — the site's night navy, gold amounts, a gold frame */
.content .prize-feature {
  max-width: var(--measure); margin: var(--sp-5) 0;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2.2rem);
  background: var(--ink); color: var(--paper);
  border: 1px solid #C9A22766; border-radius: var(--radius);
  box-shadow: 0 0 0 6px #16202E14, 0 20px 50px #16202E33;
}
.content .prize-feature h2,
.content--prizes-2027 .prize-feature h2 {
  margin: 0 0 var(--sp-2); padding: 0 0 0.7rem; background: none;
  border: 0; border-bottom: 1px solid #C9A22759;
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-3);
  color: var(--brass); letter-spacing: 0.01em;
}
.prize-feature .prize-rows { margin: 0; max-width: none; }
.prize-feature .prize-row { border-bottom-color: #ffffff1f; padding: 0.9rem 0; }
.prize-feature .prize-row:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.prize-feature .prize-row__name { color: var(--paper); font-weight: 600; font-size: var(--step-1); }
.prize-feature .prize-row__amt { color: var(--brass); font-size: var(--step-3); }
.prize-feature .prize-row__note { color: #C9CDD3; font-size: var(--step-0); }
/* Prizes (client, 2026-10-17): the concert engagements all in bold, and the
   two "offered by …" lines clearly visible */
.content .concerts li { font-weight: 600; }
.content--prizes-2027 .prize-row__by {
  font-style: normal; font-weight: 600; font-size: var(--step-0); color: var(--burgundy);
}
.content h4 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.02em; text-transform: none; color: var(--fg);
  margin-top: var(--sp-3);
}
.content ul, .content ol { max-width: var(--measure); padding-left: 1.15rem; margin: 0 0 1.3em; }
.content li { margin-bottom: 0.5em; }
.content li::marker { color: var(--brass); }
.content ul ul, .content ol ol, .content ul ol, .content ol ul { margin-top: 0.5em; }
.content > p:first-child:not(.required-hint):not(.tabs) {
  font-size: var(--step-1); line-height: 1.5; color: #2A3547;
}
.content img { border-radius: var(--radius); }
.content hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--sp-5); }

/* pull-quote-ish first letter for the long legal pages is deliberately NOT used —
   these are rulebooks; clarity beats ornament. */

/* figure: the founder photo on the home practical block */
.portrait {
  float: right; width: min(240px, 38%); margin: 0 0 var(--sp-3) var(--sp-3);
  border-radius: var(--radius); box-shadow: 0 12px 30px #16202e26;
}
@media (max-width: 640px) { .portrait { float: none; width: 100%; margin-inline: 0; } }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.card--accent { border-top: 1px solid var(--brass); }

/* jury cards */
.jury-grid { display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.jury-card { background: var(--bg-raised); padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.jury-card--chair { background: #FFFFFF; box-shadow: inset 0 2px 0 var(--brass); }
.jury-card__role {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep); margin-bottom: 0.6rem;
}
.jury-card__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.jury-card__country { color: var(--burgundy); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0.35rem 0 0.8rem; }
.jury-card__bio { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; margin: 0; }

/* prize table: name | amount in one column on the right; a note on its own line */
.prize-rows { max-width: var(--measure); margin: 0 0 1.3em; }
.prize-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 var(--sp-3);
  align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--rule);
}
.prize-row__name { font-weight: 500; }
.prize-row__amt {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  color: var(--burgundy); white-space: nowrap; text-align: right; min-width: 5.5ch;
}
.prize-row__note { grid-column: 1 / -1; font-size: var(--step--1); color: var(--fg-muted); margin-top: 0.15rem; }
.prize-row__by { grid-column: 1 / -1; font-size: var(--step--1); color: var(--fg-muted); font-style: italic; }
.content .amount { font-weight: 700; }

/* deadline strip */
.dates { display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  border: 1px solid var(--rule); }
.dates > div { background: var(--bg-raised); padding: var(--sp-3); }
.dates dt { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep); margin-bottom: 0.35rem; }
.dates dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); }

/* address blocks */
.address_box { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
address { font-style: normal; }
/* Two addresses set like a masthead: separated by a hairline, not boxed. */
.address_box { gap: 0; }
.address_box address {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-right: 1px solid var(--rule);
}
.address_box address:last-child { border-right: 0; padding-left: var(--sp-4); }
@media (max-width: 560px) {
  .address_box address { border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--sp-3) 0; }
  .address_box address:last-child { border-bottom: 0; padding-left: 0; }
}
.address_box address p { margin: 0; }

/* sponsors */
.sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-3); }
.sponsors img {
  max-height: 62px; width: auto;
  filter: grayscale(1) contrast(0.85) opacity(0.62);
  transition: filter .3s ease;
}
.sponsors img:hover { filter: none; }

/* media galleries */
.media-grid { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.media-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.video-embed { position: relative; aspect-ratio: 16/9; background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* tables (program / fees) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; color: var(--brass-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--burgundy); color: var(--paper); }
.btn--primary:hover { background: #55161F; }
.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--onDark { border-color: var(--brass); color: var(--brass); }
.btn--onDark:hover { background: var(--brass); color: var(--ink); }

/* ---------- forms (registration) ---------- */
.form-grid { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.field { display: grid; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em; }
.field .req { color: var(--burgundy); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--step--1);
  padding: 0.7rem 0.85rem;
  background: var(--bg-raised);
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--fg);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px #C9A2271f;
}
.checks { display: grid; gap: 0.5rem; }
.checks label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--step--1); font-weight: 400; }
.honeypot { position: absolute; left: -9999px; }

/* An editorial note, not a coloured alert bar. */
.notice {
  position: relative;
  border: 1px solid var(--rule);
  background: #F8F9FA;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--step--1);
}
.notice::before {
  content: "Note";
  position: absolute; top: -0.62em; left: var(--sp-3);
  padding-inline: 0.5rem;
  background: #F8F9FA;
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-deep);
}
.notice strong:first-child { display: block; margin-bottom: 0.3em; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink); color: #C6CAD0;
  padding-block: var(--sp-5) var(--sp-4);
  font-size: var(--step--1);
}
.footer-h { color: var(--paper); font-family: var(--font-body); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 var(--sp-2); }
.site-footer a { color: #C6CAD0; text-decoration: none; }
.site-footer a:hover { color: var(--brass); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-grid { display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.footer-base {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid #ffffff14;
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: baseline;
  color: #8A909A;
}
/* the studio credit: quiet, but findable */
.site-footer .credit {
  color: #8A909A; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; transition: color .2s ease;
}
.site-footer .credit strong { color: #C6CAD0; font-weight: 600; letter-spacing: 0.18em; transition: color .2s ease; }
.site-footer .credit:hover, .site-footer .credit:hover strong { color: var(--brass); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: var(--ink); padding: 0.7rem 1.1rem;
}
.skip:focus { left: var(--gutter); top: 0.5rem; }

/* ---------- mobile nav ---------- */
@media (max-width: 1000px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-left: auto;
    background: none; border: 1px solid #ffffff2e; color: var(--paper);
    font: inherit; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.5rem 0.8rem; border-radius: var(--radius); cursor: pointer;
  }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    background: var(--ink); border-bottom: 1px solid #ffffff1a;
    max-height: calc(100dvh - 68px); overflow-y: auto;
    padding: var(--sp-3) var(--gutter) var(--sp-4);
    margin-left: 0;
    display: none;
  }
  .site-header[data-nav-open="true"] .nav { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid #ffffff10; }
  .nav a, .nav .has-sub > button { display: block; width: 100%; text-align: left; padding: 0.9rem 0; font-size: 1rem; }
  .subnav { position: static; display: none; border: 0; background: none; padding: 0 0 0.6rem 1rem; box-shadow: none; }
  .has-sub[data-open="true"] .subnav { display: flex; }
  .btn-register { margin: var(--sp-3) 0 0; display: inline-block; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, #world, .page-hero__img { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- home: edition head + link cards ---------- */
.edition-head { margin-bottom: var(--sp-4); }
.edition-head h2 { font-size: var(--step-3); margin-top: var(--sp-3); }
.edition-head h2 span { font-size: 0.55em; font-family: var(--font-body); color: var(--fg-muted); }
.edition-gif {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 50px #16202e1f;
}
.edition-head p { margin-top: var(--sp-3); }

.card--link { display: block; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card--link:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 14px 34px #16202e17; }
.card--link h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); margin-top: 0.15rem; }
.card--link p { font-size: var(--step--1); color: var(--fg-muted); margin: 0; }
.card--link .eyebrow { color: var(--brass-deep); }

.visually-centered { text-align: center; margin-bottom: var(--sp-4); }

/* the scroll film sits flush under the sticky header */
#world { background: var(--ink); }

/* ---------- jury cards ---------- */
.jury-card { display: grid; align-content: start; }
.jury-card__photo {
  /* the source portraits are only 200-350px wide - never upscale them */
  width: 100%; max-width: 168px; aspect-ratio: 3/4;
  object-fit: cover; object-position: center 18%;
  border-radius: var(--radius); margin-bottom: var(--sp-3);
  filter: saturate(.92) contrast(1.02);
  box-shadow: 0 8px 22px #16202e1a;
}
.jury-card--chair .jury-card__photo { max-width: 200px; }
.jury-card--chair .jury-card__name { font-size: var(--step-3); }

/* ---------- media tabs ---------- */
.tabs {
  display: inline-flex; flex-wrap: wrap; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-4); padding: 0;
}
.tab {
  background: var(--bg-raised); padding: 0.6rem 1.3rem;
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none !important; background-image: none !important; color: var(--fg) !important;
}
.tab:hover { background: var(--paper-3); }
.tab[aria-current="page"] { background: var(--ink); color: var(--paper) !important; }
/* archive media pages: the edition's name as a simple title under the tabs */
.media-edition-title {
  margin: 0 0 var(--sp-2); font-family: var(--font-display); font-weight: 500;
  font-size: calc(var(--step-1) * 1.3); line-height: 1.2; color: var(--fg);   /* 30% larger (client, 2026-10-26) */
}

/* ---------- media grids ---------- */
.media-grid--video { display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.video-block p { font-size: var(--step--1); font-weight: 500; margin: 0 0 0.7rem; max-width: none; }
.video-wrapper {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--radius); background: var(--ink); cursor: pointer;
  border: 1px solid var(--rule);
}
.video-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.video-wrapper:hover img { transform: scale(1.03); opacity: .85; }
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play-button {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 48px;
  display: grid; place-items: center; pointer-events: none;
  transition: transform .25s ease;
}
.play-button svg { width: 68px; height: 48px; fill: #16202ECC; }
.video-wrapper:hover .play-button { transform: scale(1.08); }
.video-wrapper:hover .play-button svg { fill: #6B1F2AE6; }

.media-grid a { background-image: none !important; padding: 0 !important; display: block; }
.media-grid img { transition: transform .5s ease, filter .3s ease; }
.media-grid a:hover img { transform: scale(1.03); filter: brightness(1.06); }

/* laureates poster */
.content > p > img[src*="laureates"] { width: 100%; border-radius: var(--radius); box-shadow: 0 20px 50px #16202e1f; }

/* ---------- registration ---------- */
.required-hint { font-size: var(--step--1); color: var(--fg-muted); margin-top: var(--sp-4); }
.reg-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.reg-form .field { display: grid; gap: 0.4rem; align-content: start; }
.reg-form .lbl { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em; }
.reg-form .req { color: var(--burgundy); margin-left: 0.15em; }
.reg-form input[type="text"], .reg-form input[type="date"], .reg-form input[type="email"],
.reg-form input[type="tel"], .reg-form input[type="url"], .reg-form select, .reg-form textarea {
  font: inherit; font-size: var(--step--1); width: 100%;
  padding: 0.7rem 0.85rem; background: var(--bg-raised);
  border: 1px solid var(--rule); border-radius: var(--radius); color: var(--fg);
}
.reg-form textarea { min-height: 6.5rem; resize: vertical; }
.reg-form .checks label { display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: var(--step--1); font-weight: 400; margin-bottom: 0.45rem; }
.reg-form .checks br { display: none; }
.reg-form input[type="checkbox"] {
  accent-color: var(--burgundy); margin-top: 0.15em;
  width: 18px; height: 18px; flex: 0 0 auto;
}
/* a single tick-box with its sentence: the box hangs in the margin so the * follows the text */
.reg-form .lbl--check { display: block; position: relative; padding-left: calc(18px + 0.55rem); }
.reg-form .lbl--check input[type="checkbox"] { position: absolute; left: 0; top: 0.2em; margin: 0; }
.reg-form input[type="radio"] {
  accent-color: var(--burgundy); margin-top: 0.15em;
  width: 18px; height: 18px; flex: 0 0 auto;
}
.reg-form .inputwrapper:empty { display: none; }
.reg-form a { color: var(--burgundy); }

/* the robot trap: off the page but not display:none (some robots skip those) */
.reg-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* the part for applicants under 18 — shown by apply.js (or by the <noscript> rule) */
.reg-form .reg-guardian {
  gap: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--rule); border-left: 3px solid var(--brass);
  border-radius: var(--radius); background: var(--bg-raised);
}
.reg-form .reg-guardian[hidden] { display: none; }
.reg-guardian__title {
  margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass-deep);
}
.reg-guardian__lead { margin: 0; font-size: var(--step--1); color: var(--fg-muted); }
.reg-guardian__grid { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* a message under the field it belongs to */
.field-error { margin: 0; font-size: var(--step--1); font-weight: 500; color: var(--burgundy); }
.reg-form .field--invalid input:not([type="checkbox"]):not([type="radio"]),
.reg-form .field--invalid select, .reg-form .field--invalid textarea { border-color: var(--burgundy); }

.reg-actions {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
}
.reg-form .btn { font-family: var(--font-body); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.reg-message { flex: 1 1 18rem; margin: 0; font-size: var(--step--1); font-weight: 500; }
/* When empty it takes no room, but stays in the accessibility tree (display:none
   would stop the first message being announced). */
.reg-actions { position: relative; }
.reg-message:empty {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* shown in place of the form once the application is sent */
.reg-result {
  padding: var(--sp-3); margin-block: var(--sp-3);
  border: 1px solid var(--rule); border-left: 3px solid var(--sage);
  border-radius: var(--radius); background: var(--bg-raised);
}
.reg-result:focus { outline: 2px solid var(--brass); outline-offset: 3px; }
.reg-result p { margin: 0 0 var(--sp-1); }
.reg-result p:last-child { margin-bottom: 0; }
.reg-result__preview { font-size: var(--step--1); color: var(--fg-muted); }
.reg-result .btn { margin-top: var(--sp-2); }
.reg-preview { margin-bottom: var(--sp-3); }
.privacy-draft { margin-bottom: var(--sp-3); }

/* phones: 16px fields stop the iPhone zooming in on focus */
@media (max-width: 640px) {
  .reg-form input, .reg-form select, .reg-form textarea { font-size: 1rem; }
  .reg-form .btn { width: 100%; justify-content: center; }
}

/* ---------- the scroll film: theme the engine's own layers ---------- */
#world {
  --sw-bg: #16202E;              /* the scrim + atmosphere read as night, not paper */
  --sw-ink: #F2F4F7;
  --sw-ink-soft: #AEB4BD;
  --sw-accent: #C9A227;
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-body);
}
/* the site header already carries the brand and nav — the engine's own top bar
   would stack a second one on top of it */
#world .sw-topbar { display: none; }
/* scene one's own text is replaced by the edition block below */
#world .sw-copylayer > .sw-copy:first-of-type { display: none; }

:root { --nav-h: 68px; --film-gutter: clamp(18px, 5vw, 64px); }

/* ---------- every scene's text: centred, larger, on a soft see-through panel ----------
   Readable over bright skies and dark interiors alike. Centred with margin:auto, not
   transform — the engine animates transform on these for a gentle drift. */
#world .sw-copylayer::before {          /* replaces the left-side shade: a soft central one */
  width: 100%; height: 100%; top: 0; bottom: auto;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, #16202e59, transparent 75%);
}
#world .sw-copy,
.edition-badge--hero {
  background: #16202e6b;
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid #C9A22738; border-radius: 4px;
  box-shadow: 0 24px 60px #0b111c40;
  text-align: center;
}
#world .sw-copy {
  left: 0; right: 0; top: var(--nav-h); bottom: 0; margin: auto;
  width: min(800px, calc(100vw - 2 * var(--film-gutter))); max-width: none; height: fit-content;
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1.25rem, 4vw, 3.4rem);
}
/* the scene counter ("02 / 06") is hidden at the client's request (2026-10-20) */
#world .sw-copy__num { display: none; }
/* scene headings ("GROUPS A, B …"): larger, bolder and brighter so they read
   easily over the film (client, 2026-10-20) */
#world .sw-copy__eyebrow {
  margin-top: 0; font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: 0.12em;
  color: #E6C25A; text-shadow: 0 1px 12px #0b111c99;
}
#world .sw-copy__title { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.04; }
#world .sw-copy__body {
  max-width: 36em; margin-inline: auto;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem); color: #E6E9ED;
}

/* the page after the film sits on top of the film's pinned layers (z 0–45) and
   below the sticky menu bar (z 60), so the text slides up over the last scene */
#world ~ .section { position: relative; z-index: 50; background: var(--bg); }
/* the footer too: without this the film's fixed layers showed through it, so the
   home page ended on the last scene's text instead of the boxes (client, 2026-10-23) */
main:has(#world) + .site-footer { position: relative; z-index: 50; }
#world .sw-copy__tags, #world .sw-copy__cta { justify-content: center; }

/* shorter laptop screens: smaller, and kept clear of the docked edition block */
@media (min-width: 861px) and (max-height: 820px) {
  #world .sw-copy { top: calc(var(--nav-h) + 132px); padding: 1.3rem 2.4rem 1.5rem; }
  #world .sw-copy__title { font-size: clamp(2rem, 4vw, 3.1rem); }
  #world .sw-copy__body { font-size: 1.02rem; }
}

/* ---------- the edition block on the film (assets/js/edition-badge.js) ---------- */
.edition-badge {
  position: fixed; z-index: 30; pointer-events: none;
  color: var(--paper); will-change: transform, opacity;
}
.edition-badge sup { font-size: 0.55em; line-height: 0; }
.edition-badge span { display: block; }

/* large: centred, in the same panel as every other scene's text */
.edition-badge--hero {
  left: 50%; top: calc(50% + var(--nav-h) / 2);
  width: min(720px, calc(100vw - 2 * var(--film-gutter)));
  transform: translate(-50%, -50%); transform-origin: top left;
  padding: clamp(1.6rem, 3.2vw, 2.8rem) clamp(1.25rem, 4vw, 3.4rem);
}
.edition-badge--hero .edition-badge__place {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 14px;
}
.edition-badge--hero .edition-badge__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.03; letter-spacing: -0.015em;
  text-shadow: 0 2px 20px #16202eb3;
}
.edition-badge--hero .edition-badge__sub {
  margin-top: 20px; font-size: clamp(0.85rem, 1.15vw, 1.02rem); letter-spacing: 0.16em;
  text-transform: uppercase; color: #DDE1E6;
}

/* small: docked top-left for the rest of the film, on dark glass; the venue
   box is its mirror, top-right */
.edition-badge--dock, .edition-badge--venue {
  left: var(--film-gutter); top: calc(var(--nav-h) + 14px);
  opacity: 0; padding: 0.7rem 1rem 0.75rem;
  background: #16202ea6;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid #C9A22747; border-radius: var(--radius);
  box-shadow: 0 10px 30px #0b111c59;
}
.edition-badge--venue { left: auto; right: calc(var(--film-gutter) + 36px); text-align: right; }
.edition-badge--dock .edition-badge__place, .edition-badge--venue .edition-badge__place {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 0.35rem;
}
.edition-badge--dock .edition-badge__title, .edition-badge--venue .edition-badge__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.08;
}
.edition-badge--dock .edition-badge__sub, .edition-badge--venue .edition-badge__sub {
  margin-top: 0.4rem; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #C9CDD3;
}
.edition-badge--venue .edition-badge__sub { text-transform: none; letter-spacing: 0.04em; font-size: 0.74rem; line-height: 1.45; }

@media (max-width: 860px) {
  /* phones: same centred panels, sized for a narrow screen and kept below the docked block */
  .edition-badge--hero .edition-badge__title { font-size: clamp(2rem, 8.4vw, 2.9rem); }
  .edition-badge--hero .edition-badge__place,
  .edition-badge--hero .edition-badge__sub { font-size: 0.74rem; }
  .edition-badge--dock, .edition-badge--venue { top: calc(var(--nav-h) + 10px); padding: 0.55rem 0.8rem 0.6rem; }
  .edition-badge--dock .edition-badge__title { font-size: 1.05rem; }
  /* phones: the venue box sits under the edition box, both on the left */
  .edition-badge--venue { right: auto; left: var(--film-gutter); top: calc(var(--nav-h) + 112px); text-align: left; }
  .edition-badge--venue .edition-badge__title { font-size: 0.95rem; }
  .edition-badge--venue .edition-badge__sub { font-size: 0.66rem; }
  .edition-badge--venue .edition-badge__place { display: none; }
  /* a little narrower than the screen so the scene dots on the right stay clear */
  #world .sw-copy,
  .edition-badge--hero { width: calc(100vw - 2 * var(--film-gutter) - 40px); }
  #world .sw-route { right: 2px; }
  /* below the two docked boxes (edition + venue), which end about 200px under the bar */
  #world .sw-copy { top: calc(var(--nav-h) + 206px); padding: 1.1rem 1rem 1.2rem; }
  #world .sw-copy__title { font-size: clamp(1.85rem, 7.6vw, 2.6rem); }
  #world .sw-copy__body { font-size: 1.08rem; }
  #world .sw-copy__eyebrow { font-size: 1.02rem; letter-spacing: 0.1em; }
}
/* short phones: a little less text size so the longest scene still fits */
@media (max-width: 860px) and (max-height: 700px) {
  #world .sw-copy { top: calc(var(--nav-h) + 196px); padding: 0.9rem 0.9rem 1rem; }
  #world .sw-copy__body { font-size: 1rem; }
  #world .sw-copy__title { font-size: clamp(1.6rem, 6.6vw, 2.2rem); }
}
#world .sw-copy__title { font-weight: 400; letter-spacing: -0.015em; }
#world .sw-copy__eyebrow { font-family: var(--font-body); font-weight: 700; }
#world .sw-copy__tags li {
  font-weight: 500; color: #E9ECF0;
  background: #ffffff14; border-color: #C9A2274d; backdrop-filter: blur(6px);
}
/* a tag that is a link (the Master Class one) looks and works like a button */
#world .sw-copy__tags li.is-link { padding: 0; pointer-events: auto; }
#world .sw-copy__tags li.is-link a {
  display: block; padding: 7px 14px; color: inherit; text-decoration: none; border-radius: inherit;
}
#world .sw-copy__tags li.is-link:hover { background: #ffffff26; border-color: #C9A227; }
#world .sw-copy__tags li.is-link a:focus-visible { outline: 2px solid #E6C25A; outline-offset: 3px; }
#world .sw-btn--primary { background: var(--burgundy); color: var(--paper); }
#world .sw-btn--ghost { color: #E9ECF0; border-color: #E9ECF059; }
/* the site reset's `height:auto` on media was letterboxing the film — the stage
   clips are meant to cover the viewport */
#world .sw-scene__video,
#world .sw-scene__still { width: 100%; height: 100%; object-fit: cover; }
/* the rail label is white-on-white against our dark theme */
#world .sw-route__label {
  color: var(--paper); background: #16202ECC; border-color: #C9A22740;
}

/* ---------- local test builds only (build.py --test-launch) ---------- */
.test-build-banner {
  background: #b00020; color: #fff; padding: .5rem 1rem; text-align: center;
  font: 600 14px/1.4 sans-serif;
}

/* ---------- contact ---------- */
.contact-card { padding: var(--sp-4) var(--sp-3); }
.contact-card p { margin-bottom: 0.9em; font-size: var(--step--1); line-height: 1.6; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card strong { font-weight: 600; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2);
  padding: clamp(1rem, 4vw, 3rem);
  background: #0D141FF2;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox__slot { display: grid; place-items: center; min-width: 0; }
.lightbox__img {
  max-width: 100%; max-height: 88dvh; margin-inline: auto;
  border-radius: var(--radius); box-shadow: 0 30px 80px #00000080;
}
.lightbox__nav, .lightbox__close {
  background: #ffffff14; border: 1px solid #ffffff26; color: var(--paper);
  cursor: pointer; border-radius: 50%; line-height: 1;
  width: 46px; height: 46px; font-size: 1.6rem;
  display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.lightbox__nav:hover, .lightbox__close:hover { background: var(--brass); color: var(--ink); transform: scale(1.06); }
.lightbox__close { position: absolute; top: clamp(0.75rem, 3vw, 2rem); right: clamp(0.75rem, 3vw, 2rem); }
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox__nav { position: absolute; bottom: 1.25rem; }
  .lightbox__nav--prev { left: 25%; } .lightbox__nav--next { right: 25%; }
}

/* route dots: a 24px hit area without growing the visible dot */
#world .sw-route__dot { width: 24px; height: 24px; }

/* ---------- the "scroll" cue (assets/js/scroll-cue.js) ---------- */
/* the engine's own small grey hint is replaced by the cue below */
#world .sw-hint { display: none; }

.scroll-cue {
  position: fixed; left: 50%; z-index: 45;
  bottom: calc(max(28px, 6vh) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.3rem 0.95rem;
  font: inherit; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper); cursor: pointer;
  /* no backdrop blur: a blur over a video that changes every frame is costly
     on weaker machines and Safari; a solid dark pill reads the same */
  background: #16202EC2; border: 1px solid #C9A22747; border-radius: 999px;
  opacity: 1; visibility: visible;
  transition: opacity .35s ease, visibility 0s 0s, background .2s ease;
}
.scroll-cue:hover { background: #16202EE0; }
.scroll-cue:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* hidden = not drawn at all while the film moves (visibility waits for the fade) */
.scroll-cue.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s .35s;
}
.scroll-cue.is-hidden .scroll-cue__arrow { animation-play-state: paused; }
.scroll-cue.is-hidden:focus-visible { opacity: 1; visibility: visible; pointer-events: auto; }
/* the arrow: a chevron, bouncing gently */
.scroll-cue__arrow {
  width: 14px; height: 14px; margin-top: -4px;
  border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  transform: rotate(45deg);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__arrow { animation: none; }
  .scroll-cue { transition: none; }
}
@media (max-width: 860px) {
  /* phones: a round arrow button in the bottom-right corner, clear of the scene
     panels (which end 58px from the right edge); the words would not fit */
  .scroll-cue {
    left: auto; right: 12px; transform: none; width: 44px; height: 44px; padding: 0;
    justify-content: center; gap: 0; border-radius: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .scroll-cue__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .scroll-cue__arrow { width: 12px; height: 12px; margin-top: -5px; }
}

/* scene counter under the dots: "2 / 6" */
#world .scene-count {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 2px; white-space: nowrap;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
  color: var(--paper); opacity: 0.85;
}

/* a visually hidden heading is still a heading */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* a heading that carries a label's weight, not a title's */
.content .label-h {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-deep); margin-top: var(--sp-5);
}

/* card and grid pages carry their own heading treatment */
.jury-card__name, .content .media-grid h2, .card--link h3 { border-top: 0; padding-top: 0; }
.jury-card__name { margin-top: 0; font-size: var(--step-2); }
.content .label-h { border-top: 0; padding-top: 0; }

/* ---------- archive: each edition keeps its own menu ---------- */
.edition-nav {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.edition-nav .wrap { display: flex; gap: 0.25rem; padding-block: 0.5rem; }
.edition-nav a {
  flex: 0 0 auto;
  padding: 0.55rem 0.85rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
  color: var(--fg-muted); text-decoration: none; white-space: nowrap;
  border-radius: var(--radius);
}
.edition-nav a:hover { color: var(--ink); background: var(--paper-2); }
.edition-nav a[aria-current="page"] { color: var(--paper); background: var(--ink); }

.archive-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.archive-list h2 { font-size: var(--step-2); margin: 0.2rem 0 0; border: 0; padding: 0; }

/* the memorial photograph beside the Nathalie Voyatzis award */
.memorial-photo {
  float: right; width: 128px; height: auto; margin: var(--sp-3) 0 var(--sp-2) var(--sp-3);
  border-radius: var(--radius); box-shadow: 0 8px 22px #16202e1a;
}

/* older archive video pages: caption, player, caption — kept together */
.video-block > p { font-size: var(--step--1); margin: 0 0 0.6rem; max-width: none; }
.video-block > p:first-child { font-weight: 500; }
.video-block .video-wrapper { margin-bottom: 0.6rem; }

/* older jury pages: each card keeps its paragraph exactly as written */
.jury-card--verbatim p { font-size: var(--step--1); color: var(--fg-muted); margin: 0; }
.jury-card--verbatim p strong { display: block; font-family: var(--font-display);
  font-weight: 400; font-size: var(--step-2); color: var(--ink); line-height: 1.15; margin-bottom: 0.4rem; }

/* archive pages imported verbatim can carry wide images (laureate tables) */
.content img { max-width: 100%; height: auto; }
/* …but portraits keep their portrait size: the sources are only ~260px wide */
.jury-card .jury-card__photo { max-width: 168px; height: auto; }
.jury-card--chair .jury-card__photo { max-width: 200px; }