/* IRSI · the design floor.
   Six colours per ground and two faces. Everything else derives from these.
   Read off the founders' approved storyboards: warm gold, bone, near-black. */

@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-300-normal-latin.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-300-normal-latin-ext.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-400-normal-latin.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-400-normal-latin-ext.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-500-normal-latin.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-400-italic-latin.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Source;src:url(/assets/fonts/source-sans-3-300-normal-latin.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Source;src:url(/assets/fonts/source-sans-3-400-normal-latin.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Source;src:url(/assets/fonts/source-sans-3-400-normal-latin-ext.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Source;src:url(/assets/fonts/source-sans-3-600-normal-latin.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Source;src:url(/assets/fonts/source-sans-3-400-italic-latin.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root {
  --serif: Cormorant, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  Source, "Source Sans 3", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;

  /* film */
  --film:      #0d0b08;
  --bone:      #f6eee1;
  --bone-soft: #d6cbb8;
  --gold:      #cba64e;
  --gold-hi:   #dcbc71;
  --gold-ink:  #1a1409;

  /* paper */
  --paper:     #faf6ee;
  --paper-2:   #f2ebde;
  --paper-3:   #ebe2d1;
  --ink:       #1b1712;
  --ink-soft:  #574f42;
  --line:      #ded3c1;
  --gold-deep: #7d5f1f;

  /* Paper values that were written as literals where a rule needed a colour
     no palette entry covered. They are tokens now for one reason: the dark
     document ground below has to be able to answer every one of them, and a
     literal is the one thing a token flip cannot reach. */
  --field-bg:    #fff;
  --bad:         #a33a22;
  /* How much of a night photograph survives on paper. A frame graded for the
     film ground is a bruise on cream at full strength, and the same frame is
     the whole point of the page after dark. One number, answered twice, so a
     page can carry the take it wants instead of the take both grounds tolerate.
     Only shots marked `dim` read it. */
  --shot-dim:    .5;
  --cta-line:    rgba(138,106,36,.55);
  --go-line:     rgba(138,106,36,.42);
  --platinum-hi: #f7f2e7;

  --wrap: 74rem;
  --read: 40rem;
  --gut:  clamp(1.25rem, 4vw, 3.5rem);

  /* the scrollcraft engine reads these */
  --sc-canvas: var(--film);
  --sc-surface: #17130e;
  --sc-ink: var(--bone);
  --sc-ink-soft: var(--bone-soft);
  --sc-accent: var(--gold);
  --sc-accent-ink: var(--gold-ink);
  --sc-font-display: var(--serif);
  --sc-font-text: var(--sans);
}

/* ── the document ground, both ways ──────────────────────────────────────
   A document is paper, and on a machine set to light it stays paper. Under a
   dark theme the SAME six palette values are re-pointed at the film ground,
   so doc.css never learns a second palette: every rule it already wrote
   against --paper, --ink, --line and --gold-deep follows on its own. That is
   why this is a token flip and not a rewrite of 60 declarations.

   Scoped to .ground-paper deliberately. film.css uses these same four tokens
   for the paper CARD plates it sets on its film ground; flipping them there
   would turn a light card on a dark page into a dark card on a dark page.
   The film journeys are photographic and stay dark, which is why they have no
   toggle: a light grade of that footage does not exist.

   --gold-deep inverts rather than darkens. It is the accent that carries
   links, list markers and rules, and the deep gold that reads on paper is
   nearly invisible on near-black, so on the film ground it becomes the lit
   gold the rest of the site uses there. */

html.ground-paper { color-scheme: light; }
html.ground-film  { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  html.ground-paper:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:     #0d0b08;
    --paper-2:   #17130e;
    --paper-3:   #1f1912;
    --ink:       #f6eee1;
    --ink-soft:  #d6cbb8;
    --line:      #3a3226;
    --gold-deep: #dcbc71;

    --field-bg:    #14110c;
    --bad:         #f0a68f;
    --shot-dim:    1;
    --cta-line:    rgba(220,188,113,.5);
    --go-line:     rgba(220,188,113,.42);
    --platinum-hi: #241d13;
  }
}
html.ground-paper[data-theme="dark"] {
  color-scheme: dark;
  --paper:     #0d0b08;
  --paper-2:   #17130e;
  --paper-3:   #1f1912;
  --ink:       #f6eee1;
  --ink-soft:  #d6cbb8;
  --line:      #3a3226;
  --gold-deep: #dcbc71;

  --field-bg:    #14110c;
  --bad:         #f0a68f;
  --shot-dim:    1;
  --cta-line:    rgba(220,188,113,.5);
  --go-line:     rgba(220,188,113,.42);
  --platinum-hi: #241d13;
}

*, *::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;
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
body.ground-paper { background: var(--paper); color: var(--ink); }
body.ground-film  { background: var(--film);  color: var(--bone); }

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p, ul, ol, dl { margin: 0; }
a { color: inherit; }

.display { font-family: var(--serif); font-weight: 300; letter-spacing: -.012em; text-wrap: balance; }
.display--xl { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);   line-height: 1.03; }
.display--lg { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.15rem); line-height: 1.14; }
.display--md { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.24; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: .5rem; top: -4rem; z-index: 200;
  background: var(--gold); color: var(--gold-ink); padding: .7rem 1.1rem;
  border-radius: .4rem; font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: .5rem; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.ground-paper :focus-visible { outline-color: var(--gold-deep); }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .005em; line-height: 1; text-decoration: none;
  padding: .95em 1.7em; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--gold {
  background: linear-gradient(180deg, #d8ad52, #b7862f);
  color: var(--gold-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px rgba(80,53,10,.22);
}
.btn--gold:hover { background: linear-gradient(180deg, #e2b95f, #c08f34); }
.btn--ghost {
  background: rgba(20,16,11,.28); color: var(--bone);
  border-color: rgba(246,238,225,.42);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: rgba(246,238,225,.8); background: rgba(20,16,11,.42); }
.btn--quiet {
  background: none; padding: .8em .2em; color: var(--gold);
  text-decoration: underline; text-underline-offset: .35em;
  text-decoration-thickness: 1px; text-decoration-color: rgba(203,166,78,.5);
}
.btn--quiet:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.ground-paper .btn--quiet { color: var(--gold-deep); }

.go, .card__go, .ghost {
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid var(--go-line); padding-bottom: .15em;
  transition: border-color .18s ease, color .18s ease;
}
.go::after, .card__go::after { content: " \2192"; }
.go:hover, .card__go:hover { border-color: currentColor; }
.ground-film .go, .ground-film .card__go, .ground-film .ghost {
  color: var(--gold); border-bottom-color: rgba(203,166,78,.45);
}

/* --------------------------------------------------------------- forms */

label { display: block; font-family: var(--sans); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.ground-paper label { color: var(--ink-soft); }
.ground-film  label { color: var(--bone-soft); }

input, textarea {
  font: inherit; font-size: 1rem; width: 100%;
  padding: .82rem 1rem; border-radius: .45rem;
  border: 1px solid var(--line); background: var(--field-bg); color: var(--ink);
}
.ground-film input, .ground-film textarea {
  background: rgba(14,11,8,.62); border-color: rgba(246,238,225,.28); color: var(--bone);
  backdrop-filter: blur(8px);
}
.ground-film input::placeholder, .ground-film textarea::placeholder { color: rgba(214,203,184,.66); }
input:focus, textarea:focus { outline-offset: 1px; }

.field { display: flex; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.field input { flex: 1 1 12rem; }
.field .btn { flex: 0 0 auto; }
.field__msg { margin-top: .55rem; font-size: .9rem; min-height: 1.2em; }
.field__msg[data-ok] { color: var(--gold-deep); }
.ground-film .field__msg[data-ok] { color: var(--gold-hi); }
.field__msg[data-bad] { color: var(--bad); }
.ground-film .field__msg[data-bad] { color: #f0a68f; }
.field-row { display: grid; gap: .45rem; }

/* ---------------------------------------------------------------- chrome

   The bar, the drawer and the scrim moved to css/bar.css on 31 August, for
   the reason foot.css moved before them: the six section studies do not load
   this file, so they carried a parallel bar of their own and the two drifted.
   One file now serves both class families. Do not put bar rules back here. */

/* --------------------------------------------------------- countdown */

.count__label, .count__when {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
}
.count__dials { display: flex; list-style: none; margin: .55rem 0; padding: 0; gap: clamp(.7rem, 2vw, 1.4rem); }
.count__dials li { display: grid; justify-items: center; gap: .1rem; min-width: 3.2rem;
  border-left: 1px solid var(--line); padding-left: clamp(.7rem, 2vw, 1.4rem); }
.count__dials li:first-child { border-left: 0; padding-left: 0; }
.count__n { font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.count__u { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.ground-film .count__dials li { border-left-color: rgba(246,238,225,.22); }
.count__label, .count__u { color: var(--ink-soft); }
.ground-film .count__label, .ground-film .count__u, .ground-film .count__when { color: var(--bone-soft); }

/* --------------------------------------------------------- key dates */

.dates { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px 0; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.dates li { padding: .1rem clamp(.6rem, 1.6vw, 1.2rem); border-left: 1px solid var(--line); display: grid; gap: .15rem; }
.dates li:first-child { border-left: 0; padding-left: 0; }
.dates__k { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.dates__v { font-family: var(--serif); font-size: 1.05rem; }
.ground-film .dates li { border-left-color: rgba(246,238,225,.2); }
.ground-film .dates__k { color: var(--bone-soft); }

/* The footer is shared: paper pages and both journeys use it, so it lives
   here rather than in doc.css. It is film-coloured on every ground. */

/* --------------------------------------------------------------- footer */



/* The supplied lockup, on the one ground it is specified for. .foot is
   var(--film) in both themes, checked, so the warm-white artwork is always the
   correct version and nothing has to swap when the theme does.

   The brand cell spans two tracks on purpose. The logo guidance puts the
   horizontal lockup's floor at 240px and a single auto-fit track measures
   198px at 1440, and under that floor the SUMMIT / INSTITUTE / INTELLIGENCE
   line stops being readable, which is the reason the floor is there. */













/* ------------------------------------------------------- consent and forms

   The banner sits on the film ground on every page, because it is chrome and
   not content: it has to read the same over a dark cinematic home and a light
   document, and the film palette is the one that does both.

   .btn--consent is the load-bearing rule in this block. Allow and Refuse are
   deliberately identical: same fill, same size, same weight, in source order
   and on screen. Styling Allow as the gold primary and Refuse as a quiet
   ghost is the pattern the Belgian DPA keeps ruling against, and this is the
   file where that would happen by accident. It must not. */

.consent {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  background: rgba(13,11,8,.97); color: var(--bone);
  border-top: 1px solid rgba(203,166,78,.4);
  padding: clamp(1rem, 3vw, 1.6rem) var(--gut);
  box-shadow: 0 -12px 40px rgba(0,0,0,.4);
}
@supports (backdrop-filter: blur(6px)) {
  .consent { background: rgba(13,11,8,.9); backdrop-filter: blur(8px); }
}
.consent[hidden] { display: none; }
.consent__wrap {
  width: min(100%, var(--wrap)); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1rem, 4vw, 2.4rem);
  align-items: center; justify-content: space-between;
}
.consent__say { flex: 1 1 22rem; }
.consent__h {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .17em;
  text-transform: uppercase; font-weight: 600; color: var(--gold);
  margin: 0 0 .45rem;
}
.consent__p { font-size: .88rem; line-height: 1.5; color: var(--bone-soft); margin: 0; }
.consent__p + .consent__p { margin-top: .5rem; }
.consent__p a { color: var(--gold-hi); text-underline-offset: .25em; }
.consent__acts { flex: 0 0 auto; display: flex; gap: .7rem; flex-wrap: wrap; }
.btn--consent {
  background: linear-gradient(180deg, #d8ad52, #b7862f);
  color: var(--gold-ink); min-width: 8.5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px rgba(80,53,10,.22);
}
.btn--consent:hover { background: linear-gradient(180deg, #e2b95f, #c08f34); }
.consent :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 34rem) {
  .consent__acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .btn--consent { min-width: 0; padding-inline: .8rem; }
}

/* the way back to the choice, in the legal line under the footer columns */
.foot__cookie {
  appearance: none; border: 0; padding: 0; background: none; color: inherit;
  font: inherit; text-decoration: underline; cursor: pointer;
}
/* the consent box on a form. Never pre-ticked, and the label is the record:
   whatever it says here is the text sent to HubSpot with the submission. */
.consent-line {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: start; margin: 1rem 0 .2rem; max-width: 46rem;
}
.consent-line input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--gold-deep); }
.consent-line label { font-size: .86rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.ground-film .consent-line label { color: var(--bone-soft); }

/* The form's own layout, and it belongs in the file BOTH grounds load.

   It used to live in film.css, which only the journeys pull in. Every form on
   a document page therefore had no `display: grid` at all: `.reg` fell back to
   block so its `gap` did nothing, `.reg__grid`'s columns were inert so the
   name fields never went two across, and the submit button and the ghost link
   ran together on one line because nothing was placing them. Four forms on
   four paper pages, all squashed, and it looked like a spacing bug rather than
   a missing stylesheet.

   Nothing in here is film-specific. The only rule that was is the note's
   colour, which stayed behind. */
.reg { display: grid; gap: 1rem; justify-items: start; }
.reg__h { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.reg__grid { display: grid; gap: .9rem; width: 100%; }
.reg__note { font-size: .82rem; color: var(--ink-soft); max-width: 46ch; }
.reg .btn { justify-self: start; }

/* The consent line and the status message are sentences, not controls: they
   need the measure, and `justify-items: start` above would otherwise shrink
   them to their own content and hyphenate a paragraph into a column. */
.reg .consent-line, .reg .field__msg { width: 100%; }

/* Primary and secondary action on one row, wrapping rather than colliding.
   These are a pair, and stacking them reads as two unrelated things. */
.reg__do { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }

.reg--committee .reg__grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }