/* ================================================================
   HIND ALGERGAWI — OFFICIAL DIGITAL HQ  ·  v2 (light / clay-burst)
   Light editorial theme. Signature: clay targets that burst into
   bright fragments wherever a point lands. Built for static hosting.
   Spacing: strict 8pt · Grid: 12-col · Motion: GSAP + Canvas burst
   ================================================================ */


/* ---- Analytics panel ---------------------------------------------------- */
.ad-analytics-head { font-size: 15px; line-height: 1.5; margin-bottom: 14px; color: var(--ink); }
.ad-kpi .k-note { font-size: 11px; opacity: .55; margin-top: 2px; }
.ad-spark-none { font-size: 11px; opacity: .4; padding: 18px 0 6px; }
.ad-funnel { margin-bottom: 16px; }
.ad-funnel:last-child { margin-bottom: 0; }
.ad-funnel .f-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ad-funnel .f-head b { font-size: 13px; }
.ad-funnel .f-head span { font-size: 12px; opacity: .6; }
.ad-funnel .f-bar { height: 8px; border-radius: 4px; background: rgba(23,25,28,.08); margin: 8px 0 6px; overflow: hidden; }
.ad-funnel .f-bar i { display: block; height: 100%; border-radius: 4px; background: var(--clay); }
.ad-funnel .f-note { font-size: 12px; opacity: .6; }

/* ----------------------------------------------------------------
   0 · TOKENS
---------------------------------------------------------------- */
:root {
  /* light base */
  --cream:  #F6F3EC;  --cream-rgb: 246,243,236;   /* page */
  --paper:  #FFFFFF;  --paper-rgb: 255,255,255;   /* cards */
  --sand:   #ECE4D6;  --sand-rgb: 236,228,214;    /* soft surface */
  --ink:    #17191C;  --ink-rgb: 23,25,28;        /* text */
  --ink-2:  #0E0F12;                               /* deepest */
  --muted:  #5E636B;  --muted-rgb: 94,99,107;     /* secondary text */
  --line:   rgba(23,25,28,.10);                    /* hairline */
  --line-2: rgba(23,25,28,.06);

  /* clay-burst palette (bright — the delight system) */
  --clay:   #F0531C;  --clay-rgb: 240,83,28;       /* primary accent */
  --clay-2: #FF6A2B;
  --gold:   #F2A213;  --gold-rgb: 242,162,19;      /* achievement */
  --pink:   #FF3D7F;  --pink-rgb: 255,61,127;
  --teal:   #10B5A6;  --teal-rgb: 16,181,166;
  --lime:   #7BC62D;  --lime-rgb: 123,198,45;
  --violet: #7A5BF0;  --violet-rgb: 122,91,240;
  --green:  #12A46B;  --green-rgb: 18,164,107;     /* national / success */
  --sky:    #2E90FA;  --sky-rgb: 46,144,250;

  /* legacy palette aliases — admin.css / lab.css were written against the v1
     dark palette; these keep their text/background pairings readable. */
  --pearl:    #FCFAF6;   /* light surface / text-on-dark */
  --stone:    #ECE4D6;   /* light neutral */
  --graphite: #3A4149;   /* dark neutral text */

  /* tint surfaces */
  --tint-clay:  #FDEDE5;
  --tint-mint:  #E8F5EE;
  --tint-sky:   #E9F1FB;
  --tint-gold:  #FDF2DC;

  /* 8pt spacing */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px;
  --s-6: 64px; --s-7: 80px; --s-8: 96px; --s-9: 128px; --s-10: 160px; --s-11: 192px;

  /* type */
  --f-disp: "General Sans", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;

  --fs-hero:  clamp(44px, 8vw, 132px);
  --fs-h2:    clamp(34px, 5.2vw, 78px);
  --fs-h3:    clamp(26px, 3.2vw, 46px);
  --fs-h4:    clamp(19px, 2vw, 27px);
  --fs-lead:  clamp(17px, 1.5vw, 23px);
  --fs-body:  clamp(15px, 1.1vw, 17px);
  --fs-small: 13px;
  --fs-label: 11px;

  /* layout */
  --container: 1360px;
  --gut: clamp(20px, 4vw, 56px);
  --sec-pad: clamp(80px, 10vw, 168px);

  /* radii + shadow (soft, GOLFGRID-like) */
  --r-lg: 28px; --r-md: 18px; --r-sm: 12px; --r-pill: 999px;
  --sh-sm: 0 2px 8px rgba(23,25,28,.05), 0 8px 24px rgba(23,25,28,.05);
  --sh-md: 0 8px 24px rgba(23,25,28,.07), 0 24px 56px rgba(23,25,28,.09);
  --sh-lg: 0 24px 64px rgba(23,25,28,.14);
  --sh-clay: 0 12px 32px rgba(240,83,28,.28);

  /* eases */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-track: cubic-bezier(.65,.05,0,1);
  --t-fast: .35s; --t-med: .6s;
}

/* ----------------------------------------------------------------
   1 · RESET / BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.6;
  color: var(--ink); background: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; min-height: 100vh;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--clay); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: fixed; top: -100px; left: var(--s-3); z-index: 400;
  background: var(--ink); color: #fff; padding: 12px 24px; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; transition: top .3s var(--e-out);
}
.skip:focus-visible { top: var(--s-3); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: var(--clay); border-radius: 6px; border: 3px solid var(--sand); }

/* burst canvas — full-viewport particle overlay */
.burst-canvas {
  position: fixed; inset: 0; z-index: 210; pointer-events: none;
}
html.no-burst .burst-canvas { display: none; }

/* ----------------------------------------------------------------
   2 · TYPOGRAPHY
---------------------------------------------------------------- */
.label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.serif-i { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.sec-title { font-size: var(--fs-h2); }
.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 400; }
.small { font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums; }
.mk-clay { color: var(--clay); }

/* ----------------------------------------------------------------
   3 · LAYOUT
---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: var(--sec-pad); }
/* denser rhythm where a page has to stay short (connect) */
.sec--snug { padding-block: clamp(56px, 6.4vw, 104px); }
.sec--cream { background: var(--cream); --sec-clay: #F0531C; }   /* orange clay */
.sec--paper { background: var(--paper); --sec-clay: #2E7CE4; }   /* blue clay */
.sec--tint  { background: var(--tint-clay); --sec-clay: #E5342B; } /* red clay */
.sec--mint  { background: var(--tint-mint); --sec-clay: #37A860; } /* green clay */
.sec--ink   { background: var(--ink); color: var(--cream); --sec-clay: #EE4B2B; } /* vermilion clay */
.sec--green { background: var(--green); color: #fff; --sec-clay: #F2A213; } /* yellow clay */

/* editorial section header with a clay-target eyebrow */
.sec-head { margin-bottom: clamp(40px, 5vw, 80px); max-width: 900px; }
/* when a header is centred, the 900px box must centre too, or the title sits
   left of the content beneath it (that was the "misaligned title" glitch) */
.sec-head--c, .page-head--c,
.sec-head[style*="center"], .page-head[style*="center"] { margin-inline: auto; text-align: center; }
.sec-head--c .sec-eyebrow, .page-head--c .sec-eyebrow,
.sec-head[style*="center"] .sec-eyebrow, .page-head[style*="center"] .sec-eyebrow { justify-content: center; }
.sec-head--c .sec-sub, .page-head--c .page-lead, .page-head--c .sec-sub,
.sec-head[style*="center"] .sec-sub, .page-head[style*="center"] .page-lead { margin-inline: auto; }
/* SplitText writes text-align on each line; keep it following the parent */
.sl-line { text-align: inherit; }
.sec-head--tight { margin-bottom: clamp(26px, 3vw, 44px); }
.sec-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s-2); }
.sec-num { font-family: var(--f-disp); font-weight: 600; font-size: var(--fs-small); color: var(--sec-clay, var(--clay)); }
.sec-eyebrow .label { color: var(--muted); }
.sec-sub { max-width: 620px; margin-top: var(--s-2); color: var(--muted); }

/* the clay-dot — a bursting bullet marker */
.clay-dot {
  --dot: var(--clay);
  position: relative; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff5, transparent 45%), var(--dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 16%, transparent);
}
.clay-dot--sm { width: 10px; height: 10px; }
.clay-dot::after { /* the burst ring on trigger */
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--dot); opacity: 0; transform: scale(.6);
}
.clay-dot.is-burst::after { animation: dot-burst .7s var(--e-out) forwards; }
@keyframes dot-burst { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }

/* grid overlay */
.gridlines { position: fixed; inset: 0; z-index: 250; pointer-events: none; display: none; padding-inline: var(--gut); max-width: var(--container); margin-inline: auto; }
body.show-grid .gridlines { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s-4); }
.gridlines span { background: rgba(var(--clay-rgb), .06); border-inline: 1px solid rgba(var(--clay-rgb), .16); }

/* ----------------------------------------------------------------
   4 · CURSOR
---------------------------------------------------------------- */
/* hidden until the pointer first moves — no ghost circles parked top-left */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; will-change: transform; transition: opacity .25s; opacity: 0; }
.cur-dot { width: 6px; height: 6px; background: var(--clay); transform: translate(-50%, -50%); }
.cur-ring {
  width: 40px; height: 40px; border: 1.5px solid #fff;
  display: grid; place-items: center; mix-blend-mode: difference;
  transition: width .35s var(--e-out), height .35s var(--e-out), border-color .35s, background-color .35s;
}
.cur-ring .cur-label { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .25s; }
.cur-ring.is-hover { width: 58px; height: 58px; border-color: #fff; }
.cur-ring.is-label { width: 74px; height: 74px; background: var(--clay); border-color: var(--clay); mix-blend-mode: normal; }
.cur-ring.is-label .cur-label { opacity: 1; }
.cur-ring.is-down { width: 32px; height: 32px; }
@media (hover: none), (pointer: coarse) { .cur-dot, .cur-ring { display: none !important; } }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor],
html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor label { cursor: none; }
/* In real full screen the browser draws only the full-screen element and its
   descendants. The two elements above are injected at the end of <body>, so
   they are outside that subtree and cannot appear, while `cursor: none` went
   on hiding the system pointer: the screen was left with nothing to aim with.
   For as long as full screen lasts the real pointer comes back. */
html.native-full, html.native-full a, html.native-full button, html.native-full [data-cursor],
html.native-full input, html.native-full textarea, html.native-full select,
html.native-full label { cursor: auto !important; }
html.native-full .cur-dot, html.native-full .cur-ring { display: none !important; }
/* the reel controls are round buttons, so say so */
html.native-full .rl-btn, html.native-full .rl-back,
html.native-full .rl-sound { cursor: pointer !important; }

/* ----------------------------------------------------------------
   5 · BUTTONS / CHIPS / STATES
---------------------------------------------------------------- */
.btn {
  --bg: var(--clay); --tx: #fff;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx); background: var(--bg);
  transition: transform var(--t-fast) var(--e-out), box-shadow .3s, background-color .3s, color .3s;
  overflow: hidden; box-shadow: var(--sh-clay);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--e-out); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: #fff; }
.btn:active { transform: scale(.97); }
.btn--dark { --bg: var(--ink); --tx: #fff; box-shadow: var(--sh-sm); }
.btn--dark::before { background: var(--clay); }
.btn--ghost { --bg: transparent; --tx: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: #fff; border-color: var(--ink); }
.btn--green { --bg: var(--green); --tx: #fff; box-shadow: 0 12px 32px rgba(var(--green-rgb), .28); }
.btn--green::before { background: var(--ink); }
.btn--white { --bg: #fff; --tx: var(--ink); box-shadow: var(--sh-sm); }
.btn--white::before { background: var(--clay); }
.btn--white:hover { color: #fff; }
.btn--sm { min-height: 42px; padding: 0 var(--s-3); font-size: 11px; }
.btn--lg { min-height: 64px; padding: 0 var(--s-5); font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; filter: saturate(.4); }
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading::before { transform: translateY(101%); }
.btn.is-success { --bg: var(--green); }
.btn.is-error { animation: shake .5s var(--e-out); --bg: #E4442B; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.tlink { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.tlink::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--clay); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--e-track); }
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  box-shadow: var(--sh-sm); transition: transform .3s var(--e-out), box-shadow .3s;
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.chip .clay-dot { width: 8px; height: 8px; }

.badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; }
.badge--clay { background: var(--tint-clay); color: var(--clay); }
.badge--gold { background: var(--tint-gold); color: #B9820B; }
.badge--green { background: var(--tint-mint); color: var(--green); }

.skeleton { position: relative; overflow: hidden; background: var(--sand); color: transparent !important; border-radius: 8px; pointer-events: none; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); animation: shimmer 1.6s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.toast { position: fixed; left: 50%; bottom: var(--s-4); z-index: 320; transform: translate(-50%, 160%); background: var(--ink); color: #fff; border-radius: var(--r-pill); padding: 14px 26px; font-size: var(--fs-small); font-weight: 500; display: flex; align-items: center; gap: 10px; transition: transform .5s var(--e-out); box-shadow: var(--sh-lg); }
.toast.is-on { transform: translate(-50%, 0); }
.toast .clay-dot { width: 7px; height: 7px; }

/* ----------------------------------------------------------------
   6 · PRELOADER
---------------------------------------------------------------- */
.loader { position: fixed; inset: 0; z-index: 350; background: var(--cream); color: var(--ink); display: grid; place-items: center; }
.loader-core { display: grid; place-items: center; gap: var(--s-3); text-align: center; }
.loader-ring { width: 108px; height: 108px; transform: rotate(-90deg); }
.loader-ring circle { fill: none; stroke-width: 2; }
.loader-ring .bg { stroke: var(--line); }
.loader-ring .fg { stroke: var(--clay); stroke-linecap: round; }
.loader-badge { position: relative; display: grid; place-items: center; }
.loader-mono { position: absolute; font-family: var(--f-disp); font-weight: 600; font-size: 22px; letter-spacing: .04em; color: var(--ink); }
.loader-logo { position: absolute; width: 64px; height: 64px; object-fit: contain; }
.loader-line { max-width: 30ch; font-family: var(--f-disp); font-weight: 500; font-size: clamp(17px, 2.2vw, 24px);
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.loader-count { font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--muted); letter-spacing: .2em; }
.loader-word { font-size: var(--fs-label); letter-spacing: .5em; text-transform: uppercase; color: var(--clay); padding-left: .5em; }
/* the nav / footer mark when a real logo has been uploaded */
/* uploaded logo: no box, sized by height so any aspect ratio sits cleanly */
.nav-logo .mark--img { display: block; height: 34px; background: none; box-shadow: none; padding: 0; border-radius: 0; transition: transform .4s var(--e-out); }
.nav-logo .mark--img img { height: 100%; width: auto; max-width: 180px; object-fit: contain; display: block; }
.footer-brand .nav-logo .mark--img { height: 30px; }

/* ----------------------------------------------------------------
   7 · NAVIGATION — utility strip + floating pill
---------------------------------------------------------------- */
.nav-shell { position: fixed; top: 0; left: 0; right: 0; z-index: 240; transition: transform .5s var(--e-out); }
.nav-shell.is-hidden { transform: translateY(-130%); }

/* utility strip */
.nav-utility {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 8px var(--gut); background: var(--ink); color: rgba(255,255,255,.82);
  font-size: 12px; overflow: hidden; transition: height .4s var(--e-out), padding .4s, opacity .3s;
  height: 40px;
}
.nav-shell.is-scrolled .nav-utility { height: 0; padding-block: 0; opacity: 0; }
.nav-utility .u-left { display: flex; align-items: center; gap: 10px; }
.nav-utility .u-loc { display: inline-flex; align-items: center; gap: 8px; }
.nav-utility .u-loc .clay-dot { width: 7px; height: 7px; --dot: var(--lime); }
.nav-utility .u-mail { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.8); font-weight: 500; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.2); }
.nav-utility .u-mail svg { opacity: .8; }
.nav-utility .u-mail:hover { color: var(--gold); }
.nav-utility .u-right { display: flex; align-items: center; gap: var(--s-2); }
.nav-socials { display: flex; align-items: center; gap: 4px; }
.nav-socials a { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.75); transition: background .25s, color .25s, transform .25s var(--e-out); }
.nav-socials a:hover { background: var(--clay); color: #fff; transform: translateY(-2px); }
.nav-u-sponsor { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #fff; }
.nav-u-sponsor .clay-dot { width: 7px; height: 7px; }
.nav-u-sponsor:hover { color: var(--gold); }

/* main pill nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 14px var(--gut); transition: padding .4s; }
.nav-inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.8); border-radius: var(--r-pill);
  padding: 10px 12px 10px 20px; box-shadow: var(--sh-md);
  transition: box-shadow .3s, background .3s;
}
.nav-logo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-disp); font-weight: 600; }
/* No coloured box. An uploaded logo stands on its own; until one is added the
   wordmark alone carries the nav (the "HA" fallback stays hidden).
   :not(.mark--img) so this never hides a real uploaded logo. */
.nav-logo .mark:not(.mark--img) { display: none; }
.nav-logo:hover .mark--img { transform: scale(1.04); }
.nav-logo .word { font-size: 15px; letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { position: relative; padding: 9px 15px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--muted); transition: color .25s, background .25s; }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--clay); transform: translateX(-50%) scale(0); transition: transform .3s var(--e-out); }
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: translateX(-50%) scale(1); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-cta { min-height: 46px; }
.nav-burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); place-items: center; background: #fff; }
.nav-burger span { position: absolute; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--e-out), opacity .3s; }
.nav-burger span:nth-child(1) { transform: translateY(-4px); }
.nav-burger span:nth-child(2) { transform: translateY(4px); }
body.menu-open .nav-burger span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { transform: rotate(-45deg); }

/* mobile fullscreen menu */
.menu { position: fixed; inset: 0; z-index: 235; background: var(--cream); clip-path: circle(0% at calc(100% - 46px) 90px); visibility: hidden; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(84px, 14vh, 120px) var(--gut) var(--s-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); min-height: min-content; }
.menu-links { display: flex; flex-direction: column; gap: 2px; }
.menu-link { display: flex; align-items: baseline; gap: 16px; font-family: var(--f-disp); font-weight: 600; font-size: clamp(30px, 8vw, 52px); letter-spacing: -.02em; padding-block: 8px; color: var(--ink); }
.menu-link .idx { font-size: 13px; color: var(--clay); font-variant-numeric: tabular-nums; }
.menu-link:active { color: var(--clay); }
.menu-foot { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.menu-foot .m-socials { display: flex; gap: 10px; }
.menu-foot .m-socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; }

/* progress rail */
.rail { position: fixed; right: clamp(10px, 1.6vw, 24px); top: 50%; z-index: 220; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.rail-line { position: relative; width: 2px; height: clamp(110px, 22vh, 200px); background: var(--line); border-radius: 2px; }
.rail-dot { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(var(--clay-rgb), .18); }
.rail-label { writing-mode: vertical-rl; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 1100px) { .rail { display: none; } }

/* ----------------------------------------------------------------
   8 · HERO — photographic + annotation pills
---------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; padding-top: 150px; overflow: clip; display: flex; flex-direction: column; }
.hero-stage {
  position: relative; flex: 1; margin: 0 var(--gut) var(--s-3); border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink); box-shadow: var(--sh-lg); min-height: min(72vh, 680px);
}
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; filter: saturate(1.02) contrast(1.03); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,18,.42) 0%, transparent 26%, transparent 46%, rgba(14,15,18,.72) 100%), linear-gradient(90deg, rgba(14,15,18,.55) 0%, transparent 42%); }

.hero-content { position: relative; z-index: 3; margin-top: auto; padding: var(--s-5); color: #fff; max-width: 900px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s-2); color: rgba(255,255,255,.9); }
.hero-kicker .clay-dot { --dot: var(--gold); }
.hero-title { font-size: var(--fs-hero); line-height: .96; letter-spacing: -.03em; text-transform: uppercase; padding-bottom: .08em; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .wd { display: inline-block; }
.hero-title .accent { color: var(--clay-2); }
.hero-sub { max-width: 480px; margin-top: var(--s-3); color: rgba(255,255,255,.82); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); align-items: center; }

/* avatar stack + note */
.hero-social { position: absolute; z-index: 3; top: var(--s-4); left: var(--s-4); display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 7px 16px 7px 8px; color: #fff; }
.avatars { display: flex; }
.avatars img, .avatars .more { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -10px; background: var(--sand); }
.avatars img:first-child { margin-left: 0; }
.avatars .more { display: grid; place-items: center; background: var(--clay); color: #fff; font-size: 11px; font-weight: 700; }
.hero-social .note { font-size: 12px; font-weight: 500; }

/* annotation pills — the pin is a mini clay target (circular, on-theme) */
.hero-annos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.anno { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
.anno .pin { position: relative; width: 26px; height: 26px; border-radius: 50%; }
.anno .pin img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); animation: clay-bob 7s ease-in-out infinite; }
.anno .pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); animation: ping 3s var(--e-out) infinite; }
@keyframes ping { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.anno .tip { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: rgba(255,255,255,.94); color: var(--ink); border-radius: var(--r-pill); padding: 8px 15px; font-size: 12px; font-weight: 600; box-shadow: var(--sh-md); }
.anno .tip::before { content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; background: rgba(255,255,255,.94); border-radius: 50%; }

/* video widget */
.hero-vid { position: absolute; z-index: 3; right: var(--s-4); bottom: var(--s-4); width: 220px; border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.22); padding: 10px; display: flex; align-items: center; gap: 12px; color: #fff; transition: transform .4s var(--e-out); }
.hero-vid:hover { transform: translateY(-4px); }
.hero-vid .thumb { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.hero-vid .thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-vid .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); }
.hero-vid .meta b { font-size: 13px; display: block; } .hero-vid .meta span { font-size: 11px; opacity: .8; }
@media (max-width: 620px) { .hero-vid { display: none; } }

/* ----------------------------------------------------------------
   9 · MARQUEE
---------------------------------------------------------------- */
.strip { background: var(--ink); color: #fff; padding-block: var(--s-3); overflow: clip; }
.marquee { display: flex; white-space: nowrap; will-change: transform; }
.marquee-set { display: flex; align-items: center; flex-shrink: 0; padding-right: var(--s-5); gap: var(--s-5); }
.marquee-set .word { font-family: var(--f-disp); font-weight: 600; font-size: clamp(18px, 2vw, 30px); letter-spacing: .04em; }
.marquee-set .word:nth-child(3n+2) { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.marquee-set .clay-dot { width: 12px; height: 12px; }
.marquee-set .clay-dot:nth-child(6n) { --dot: var(--teal); }
.marquee-set .clay-dot:nth-child(6n+2) { --dot: var(--gold); }
.marquee-set .clay-dot:nth-child(6n+4) { --dot: var(--pink); }

/* ----------------------------------------------------------------
   10 · ABOUT
---------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
/* single portrait stays pinned while the long bio scrolls — no empty space */
.about-media { position: sticky; top: clamp(88px, 12vh, 120px); align-self: start; }
.about-media .img-frame { position: relative; overflow: hidden; aspect-ratio: 4/5; border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media .float-badge { position: absolute; left: -18px; bottom: 40px; background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.about-media .float-badge .clay-dot { --dot: var(--green); }
.about-media .float-badge b { font-family: var(--f-disp); font-size: 22px; }
.about-media .float-badge span { font-size: 11px; color: var(--muted); display: block; }
.about-body .lead { color: var(--ink); }
.about-body .lead .dropcap, .about-body p .dropcap { }
.about-body .dropcap::first-letter { font-family: var(--f-disp); font-weight: 600; font-size: 3em; line-height: .8; float: left; padding: 6px 14px 0 0; color: var(--clay); }
.about-body p + p { margin-top: var(--s-3); color: var(--muted); }
.pullquote { margin-block: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--tint-clay); font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.35; color: var(--ink); position: relative; }
.pullquote::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--clay); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-top: var(--s-5); }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-sm); transition: transform .35s var(--e-out), box-shadow .35s; }
.stat:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.stat-value { font-family: var(--f-disp); font-weight: 600; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-value .suffix { font-size: .5em; color: var(--clay); }
.stat-label { margin-top: 4px; font-weight: 600; font-size: var(--fs-small); }
.stat-note { font-size: 11px; color: var(--muted); }

/* About — official bio + hover cards (EY, Sorbonne, MBRSC…) */
.about-story > p { color: var(--muted); }
.about-story > p + p { margin-top: var(--s-3); }
.about-story .lead { color: var(--ink); font-size: clamp(17px, 1.5vw, 20px); }
.about-sub { display: flex; align-items: center; gap: 10px; margin: var(--s-5) 0 var(--s-3); font-family: var(--f-disp); font-weight: 600; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.01em; color: var(--ink); }
.about-sub .clay-dot { width: 12px; height: 12px; }
.story-link { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--clay); font-weight: 600; cursor: pointer; border-bottom: 1.5px solid rgba(240,83,28,.32); transition: color .2s, border-color .2s; }
.story-link:hover, .story-link:focus-visible { color: #C63E10; border-bottom-color: var(--clay); outline: none; }
.story-link .sl-dot { display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--clay); vertical-align: middle; opacity: .7; }
.story-pop { position: fixed; z-index: 340; width: min(320px, 86vw); background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transition: opacity .22s var(--e-out), transform .22s var(--e-out), visibility .22s; pointer-events: none; }
.story-pop.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.story-pop .sp-imgs { display: flex; gap: 2px; background: var(--sand); }
.story-pop .sp-imgs img { flex: 1; min-width: 0; width: 100%; height: 122px; object-fit: cover; display: block; }
.story-pop .sp-body { padding: 13px 16px 16px; }
.story-pop .sp-body h4 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.story-pop .sp-body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Legal / privacy page */
.legal-body { margin-top: var(--s-4); }
.legal-sec { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.legal-sec:first-child { border-top: 0; }
.legal-sec h2 { font-family: var(--f-disp); font-weight: 600; font-size: clamp(18px, 2vw, 22px); letter-spacing: -.01em; margin-bottom: 8px; color: var(--ink); }
.legal-sec p { color: var(--muted); line-height: 1.65; max-width: 68ch; }

/* ----------------------------------------------------------------
   11 · JOURNEY — center-focus horizontal flight deck
---------------------------------------------------------------- */
.jt { overflow: clip; background: var(--ink); color: var(--cream); }
.jt .sec-eyebrow .label { color: rgba(255,255,255,.6); }
.jt .sec-sub { color: rgba(255,255,255,.65); }
.jt-viewport { position: relative; height: 100svh; display: flex; flex-direction: column; }
.jt-head { padding: 110px var(--gut) 0; max-width: var(--container); margin-inline: auto; width: 100%; }
.jt-stage { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; }
.jt-track { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); padding-inline: max(var(--gut), calc(50vw - 320px)); will-change: transform; }
.jt-card { position: relative; flex: 0 0 clamp(260px, 42vw, 560px); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--sh-lg); transition: opacity .4s; }
.jt-card .jt-img { position: absolute; inset: -8% -8% -8% -8%; }
.jt-card .jt-img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.jt-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,18,.2), transparent 40%, rgba(14,15,18,.85)); }
.jt-card .jt-meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: var(--s-4); color: #fff; }
.jt-card .yr { font-family: var(--f-disp); font-weight: 600; font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: -.03em; }
.jt-card .tag { display: inline-flex; margin-bottom: 10px; }
.jt-card h3 { font-size: var(--fs-h4); margin-top: 6px; }
.jt-card p { font-size: var(--fs-small); color: rgba(255,255,255,.8); margin-top: 8px; max-width: 42ch; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--e-out); }
.jt-card.is-focus p { opacity: 1; transform: none; }
.jt-card--last { outline: 2px solid var(--clay); outline-offset: -2px; }
/* flight line */
.jt-flight { position: absolute; left: 0; right: 0; bottom: clamp(20px, 5vh, 60px); height: 60px; pointer-events: none; z-index: 3; }
.jt-flight svg { width: 100%; height: 100%; overflow: visible; }
.jt-flight .rail { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.jt-flight .prog { fill: none; stroke: var(--clay); stroke-width: 2.5; stroke-linecap: round; }
.jt-flight .clay { fill: var(--clay); filter: drop-shadow(0 0 10px rgba(var(--clay-rgb), .8)); }
.jt-progress { position: absolute; top: 110px; right: var(--gut); font-family: var(--f-disp); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.5); }
.jt-progress b { color: var(--clay); }
.jt-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); z-index: 3; }

/* mobile journey = vertical stack */
.jt-mobile { display: none; }

/* ----------------------------------------------------------------
   12 · TRAINING — cards
---------------------------------------------------------------- */
.tr-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-4); align-items: end; margin-bottom: var(--s-4); }
.tr-hero-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--sh-md); }
.tr-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.tr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.tr-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-sm); transition: transform .4s var(--e-out), box-shadow .4s; position: relative; overflow: hidden; }
.tr-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.tr-card .tr-num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-disp); font-weight: 600; color: var(--clay); font-size: 14px; }
.tr-card h3 { font-size: var(--fs-h4); margin-top: 12px; }
.tr-card p { color: var(--muted); font-size: var(--fs-small); margin-top: 8px; }
.tr-card .metric { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.tr-card:nth-child(3n+1) .tr-num, .tr-card:nth-child(3n+1) .clay-dot { --dot: var(--clay); }
.tr-card:nth-child(3n+2) .tr-num { color: var(--teal); } .tr-card:nth-child(3n+2) .clay-dot { --dot: var(--teal); }
.tr-card:nth-child(3n) .tr-num { color: var(--violet); } .tr-card:nth-child(3n) .clay-dot { --dot: var(--violet); }

/* ----------------------------------------------------------------
   13 · ACHIEVEMENTS
---------------------------------------------------------------- */
.ach-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-bottom: clamp(40px, 5vw, 80px); }
.ach-counter { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-sm); }
.ach-counter .val { font-family: var(--f-disp); font-weight: 600; font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; }
.ach-counter .val .suffix { font-size: .4em; color: var(--muted); }
.ach-counter .lbl { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.ach-list { display: grid; gap: 8px; }
.ach-row { display: grid; grid-template-columns: 76px 1fr auto auto; gap: var(--s-3); align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px var(--s-3); box-shadow: var(--sh-sm); transition: transform .35s var(--e-out), box-shadow .35s; }
.ach-row:hover { transform: translateX(6px); box-shadow: var(--sh-md); }
.ach-row .yr { font-family: var(--f-disp); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ach-row .ev { font-family: var(--f-disp); font-weight: 500; font-size: var(--fs-h4); }
.ach-row .rs { color: var(--muted); font-size: var(--fs-small); text-align: right; }
.ach-row .medal { width: 14px; height: 14px; border-radius: 50%; justify-self: end; }
.medal--gold { background: var(--gold); box-shadow: 0 0 0 4px var(--tint-gold); }
.medal--silver { background: #AEB6BF; box-shadow: 0 0 0 4px #EEF0F2; }
.medal--bronze { background: var(--clay); box-shadow: 0 0 0 4px var(--tint-clay); }
.medal--none { background: transparent; border: 1.5px solid var(--line); }
.ach-note { margin-top: var(--s-3); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .7; }

/* ----------------------------------------------------------------
   14 · COMPETITIONS — cards
---------------------------------------------------------------- */
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.comp-card { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-sm); transition: transform .35s var(--e-out), box-shadow .35s; }
.comp-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.comp-date { text-align: center; min-width: 62px; padding-right: var(--s-3); border-right: 1px solid var(--line); }
.comp-date .d { font-family: var(--f-disp); font-weight: 600; font-size: 28px; line-height: 1; }
.comp-date .m { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.comp-date .y { font-size: 11px; color: var(--muted); }
.comp-body h3 { font-size: var(--fs-h4); font-weight: 500; font-family: var(--f-disp); }
.comp-body .loc { font-size: var(--fs-small); color: var(--muted); margin-top: 4px; }
.comp-body .foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); }
.status--upcoming { color: var(--clay); background: var(--tint-clay); }
.status--done { color: var(--green); background: var(--tint-mint); }
.status .clay-dot { width: 6px; height: 6px; --dot: currentColor; box-shadow: none; }

/* ----------------------------------------------------------------
   15 · GALLERY
---------------------------------------------------------------- */
.gal { display: grid; gap: clamp(16px, 2vw, 28px); }
.gal-row { display: grid; gap: clamp(16px, 2vw, 28px); }
.gal-row--duo { grid-template-columns: 7fr 5fr; }
.gal-row--duo.flip { grid-template-columns: 5fr 7fr; }
.gal-item { position: relative; cursor: pointer; }
.gal-item .img-frame { position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out); }
.gal-item:hover img { transform: scale(1.05); }
.gal-item .img-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14,15,18,.5)); opacity: 0; transition: opacity .5s; }
.gal-item:hover .img-frame::after { opacity: 1; }
.gal-item .cap-over { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: var(--s-3); color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--e-out); }
.gal-item:hover .cap-over { opacity: 1; transform: none; }
.gal-item .cap-over .t { font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--clay); padding: 4px 10px; border-radius: var(--r-pill); }
.gal-wide .img-frame { aspect-ratio: 21/9; }
.gal-tall .img-frame { aspect-ratio: 3/4; }
.gal-std .img-frame { aspect-ratio: 4/3; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 330; background: rgba(14,15,18,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; padding: var(--s-5); opacity: 0; visibility: hidden; }
.lightbox img { max-width: min(1200px, 92vw); max-height: 78vh; object-fit: contain; border-radius: var(--r-sm); }
.lightbox-cap { margin-top: var(--s-2); color: rgba(255,255,255,.75); text-align: center; font-size: var(--fs-small); }
.lightbox-x, .lightbox-nav { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; transition: background .3s, color .3s; }
.lightbox-x:hover, .lightbox-nav:hover { background: var(--clay); border-color: var(--clay); }
.lightbox-x { top: var(--s-4); right: var(--s-4); }
.lightbox-nav.prev { left: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: var(--s-4); top: 50%; transform: translateY(-50%); }

/* ----------------------------------------------------------------
   16 · VIDEOS
---------------------------------------------------------------- */
.vid-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 32px); }
.vid-card { text-align: left; cursor: pointer; }
.vid-card .img-frame { position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: var(--r-md); box-shadow: var(--sh-sm); background: var(--sand); }
.vid-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out); }
.vid-card:hover img { transform: scale(1.05); }
.vid-play { position: absolute; inset: 0; margin: auto; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(240,83,28,.9); box-shadow: var(--sh-clay); transition: transform .4s var(--e-out); }
.vid-card:hover .vid-play { transform: scale(1.1); }
.vid-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-2); }
.vid-meta h3 { font-size: var(--fs-h4); font-weight: 500; }
.vid-meta .dur { font-size: var(--fs-small); color: var(--clay); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------
   17 · CERTIFICATES — upload wall
---------------------------------------------------------------- */
.cert-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.cert { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-sm); min-height: 300px; display: flex; flex-direction: column; transition: transform .5s var(--e-out), box-shadow .5s; cursor: pointer; transform-style: preserve-3d; }
.cert:hover { transform: translateY(-8px) rotateX(3deg); box-shadow: var(--sh-lg); }
.cert-visual { position: relative; aspect-ratio: 4/3; background: linear-gradient(150deg, var(--tint-gold), #fff); overflow: hidden; display: grid; place-items: center; }
/* contain so BOTH landscape and portrait certificates show in full (no crop) */
.cert-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; }
.cert-seal { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 34% 30%, rgba(var(--gold-rgb), .4), transparent 60%); display: grid; place-items: center; color: #B9820B; }
.cert-visual .zoom-hint { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; opacity: 0; transition: opacity .3s; }
.cert:hover .zoom-hint { opacity: 1; }
.cert-info { padding: var(--s-3); flex: 1; display: flex; flex-direction: column; }
.cert-info .issuer { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--green); font-weight: 600; }
.cert-info h3 { font-size: var(--fs-h4); margin-top: 6px; }
.cert-info .meta { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--muted); }
.cert-upload { border: 2px dashed var(--line); background: var(--tint-clay); display: grid; place-items: center; text-align: center; padding: var(--s-4); min-height: 300px; transition: border-color .3s, background .3s; }
.cert-upload:hover, .cert-upload.is-drag { border-color: var(--clay); background: #FBE4D8; }
.cert-upload .plus { width: 52px; height: 52px; border-radius: 50%; background: var(--clay); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; box-shadow: var(--sh-clay); }
.cert-upload b { display: block; font-size: 15px; } .cert-upload span { font-size: 12px; color: var(--muted); }

/* ----------------------------------------------------------------
   18 · VISION / MISSION
---------------------------------------------------------------- */
.vision { text-align: center; overflow: clip; position: relative; }
.vision::before { content: ""; position: absolute; width: 60vw; height: 60vw; left: 50%; top: -30vw; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.vision .label { color: rgba(255,255,255,.75); }
.vision-statement { margin: var(--s-4) auto 0; max-width: 18ch; font-family: var(--f-disp); font-weight: 600; font-size: clamp(30px, 5vw, 72px); line-height: 1.12; letter-spacing: -.02em; }
.vision-statement .w { display: inline-block; }
.vision-support { margin: var(--s-4) auto 0; max-width: 44ch; font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 2vw, 26px); color: rgba(255,255,255,.85); }
.vision-flag { margin-top: var(--s-5); display: inline-flex; gap: 8px; }
.vision-flag i { width: 44px; height: 4px; border-radius: 2px; display: block; }
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: clamp(48px, 6vw, 88px); }
.mission-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md); padding: var(--s-4); text-align: left; transition: background .35s, transform .35s var(--e-out); }
.mission-card:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
.mission-card .num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-disp); font-weight: 600; }
.mission-card .num .clay-dot { --dot: var(--gold); }
.mission-card h3 { margin-top: 12px; font-size: var(--fs-h4); }
.mission-card p { margin-top: 10px; color: rgba(255,255,255,.78); font-size: var(--fs-small); }

/* The v5 vision block (side-by-side photo/quote, clay flight arc, glass
   cards) was replaced by section 35 below: two columns, real clay targets
   on the cards, and a dark state that follows the scroll. */
/* ----------------------------------------------------------------
   19 · FAQ
---------------------------------------------------------------- */
.faq-wrap { max-width: 860px; }
.faq-cta { max-width: 620px; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); text-align: center; }
.faq-cta .clay-dot { --dot: var(--clay); width: 12px; height: 12px; margin-bottom: var(--s-2); }
.faq-cta h3 { font-family: var(--f-disp); font-weight: 600; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.02em; }
.faq-cta p { color: var(--muted); margin: var(--s-2) auto var(--s-4); max-width: 46ch; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; box-shadow: var(--sh-sm); overflow: hidden; transition: box-shadow .3s; }
.faq-item.is-open { box-shadow: var(--sh-md); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3); text-align: left; font-family: var(--f-disp); font-weight: 500; font-size: var(--fs-h4); transition: color .3s; }
.faq-q:hover { color: var(--clay); }
.faq-ico { position: relative; flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--tint-clay); transition: transform .5s var(--e-out), background .3s; }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--clay); }
.faq-ico::before { width: 12px; height: 2px; } .faq-ico::after { width: 2px; height: 12px; transition: transform .4s var(--e-out); }
.faq-item.is-open .faq-ico { transform: rotate(135deg); background: var(--clay); }
.faq-item.is-open .faq-ico::before, .faq-item.is-open .faq-ico::after { background: #fff; }
.faq-a { overflow: hidden; height: 0; }
.faq-a-inner { padding: 0 var(--s-3) var(--s-3); max-width: 64ch; color: var(--muted); line-height: 1.75; }

/* ----------------------------------------------------------------
   20 · SPONSORSHIP — "Take the shot"
---------------------------------------------------------------- */
.spon { position: relative; overflow: clip; text-align: center; }
.spon-kicker { display: inline-flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: var(--s-2); color: rgba(255,255,255,.7); }
.spon-kicker .clay-dot { --dot: var(--gold); }
.spon-concept { font-family: var(--f-disp); font-weight: 600; font-size: clamp(64px, 13vw, 200px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.spon-concept .brk { color: var(--clay); }
.spon-target { position: relative; width: clamp(140px, 20vw, 220px); aspect-ratio: 1; margin: var(--s-4) auto 0; cursor: pointer; }
.spon-target canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* decorative ring must NEVER intercept the click (clay wouldn't break) */
.spon-target .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255,255,255,.3); animation: slowspin 18s linear infinite; pointer-events: none; }
.spon-target .clay-big-host { cursor: pointer; }
@keyframes slowspin { to { transform: rotate(360deg); } }
.spon-target .hit-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); pointer-events: none; }
.spon-pitch { margin: var(--s-4) auto 0; max-width: 640px; font-size: clamp(20px, 2.4vw, 30px); font-family: var(--f-disp); font-weight: 500; color: #fff; }
.spon-sub { margin: var(--s-2) auto 0; max-width: 620px; color: rgba(255,255,255,.7); }
/* "Why back me" — numbered proof points, scannable, not paragraphs */
.spon-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin: var(--s-3) 0 0; text-align: left; counter-reset: sv; }
.spon-value { counter-increment: sv; position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 42px var(--s-3) var(--s-3); transition: background .35s, transform .35s var(--e-out); }
.spon-value::before { content: counter(sv, decimal-leading-zero); position: absolute; top: 16px; left: var(--s-3); font-family: var(--f-disp); font-weight: 700; font-size: 20px; color: var(--gold); }
.spon-value:nth-child(1)::before { color: var(--clay); }
.spon-value:nth-child(2)::before { color: var(--gold); }
.spon-value:nth-child(3)::before { color: var(--teal); }
.spon-value:nth-child(4)::before { color: var(--pink); }
.spon-value:hover { background: rgba(255,255,255,.11); transform: translateY(-4px); }
.spon-value .vhead { display: flex; align-items: center; gap: 10px; }
.spon-value .vhead .clay-dot { display: none; }
.spon-value h3 { font-size: 15px; font-weight: 600; }
.spon-value p { margin-top: 8px; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.72); }
.spon-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5); margin-bottom: var(--s-5); }
.spon-stat .v { font-family: var(--f-disp); font-weight: 600; font-size: clamp(36px, 4.5vw, 64px); color: var(--gold); font-variant-numeric: tabular-nums; }
.spon-stat .v .suffix { font-size: .4em; color: rgba(255,255,255,.6); }
.spon-stat .l { font-size: var(--fs-small); color: rgba(255,255,255,.65); max-width: 22ch; margin: 6px auto 0; }
.spon-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.spon-proof { font-size: var(--fs-small); color: rgba(255,255,255,.55); }

/* connect page: the same pitch, half the scroll */
.spon--tight { padding-top: clamp(52px, 6vw, 84px); padding-bottom: clamp(52px, 6vw, 84px); }
.spon--tight .spon-concept { font-size: clamp(52px, 9vw, 128px); }
.spon--tight .spon-pitch { margin-top: var(--s-3); font-size: clamp(18px, 2vw, 25px); }
/* the clay sits on top, the CTA directly beneath it — one centred column */
.spon-act { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.spon-act .spon-target { margin: 0; width: clamp(150px, 18vw, 200px); }
.spon-act .spon-cta-wrap { align-items: center; text-align: center; max-width: 420px; gap: var(--s-2); }
.spon-act .spon-proof { max-width: 40ch; }
.sup-head { font-size: var(--fs-h4); color: #fff; margin-top: clamp(38px, 4.6vw, 58px); }
.spon--tight .spon-sub { margin-top: 8px; margin-bottom: var(--s-3); }

/* ----------------------------------------------------------------
   21 · DOWNLOADS
---------------------------------------------------------------- */
/* compact download chips in a tidy centred row */
.dl-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1000px; margin-inline: auto; }
.dl-card { flex: 1 1 200px; max-width: 236px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; box-shadow: var(--sh-sm); transition: transform .35s var(--e-out), box-shadow .35s; }
.dl-card .desc { display: none; }
.dl-card .dl-btn { grid-column: 1 / -1; justify-self: stretch; margin-top: 4px; }
.dl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

/* ----------------------------------------------------------------
   21b · CONNECT PAGE · THE FOLDER (files fly out) + THE GATE
---------------------------------------------------------------- */
.dl-split { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(28px, 4vw, 64px); align-items: start; }

/* the folder itself */
/* the folder is built from exact boxes (not a stretched SVG) so the tab and
   the pocket keep their geometry whatever the file list does */
.fldr-stage { --manila: #E7DDC7; --manila-lt: #F1E9D8; --manila-ln: #CDC1A8; --pocket: clamp(84px, 10.6vw, 124px);
  position: relative; perspective: 1200px; padding: 62px clamp(18px, 2.2vw, 30px) calc(var(--pocket) - 16px); }
.fldr-back { position: absolute; inset: 34px 0 0; z-index: 0; background: var(--manila);
  border: 1px solid var(--manila-ln); border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow: 0 22px 40px rgba(23,25,28,.16); }
.fldr-tab { position: absolute; left: -1px; top: -35px; height: 36px; padding: 0 34px 0 18px;
  display: flex; align-items: center; background: var(--manila); border: 1px solid var(--manila-ln); border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0; clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8B7F68; }
.fldr-front { position: absolute; left: 0; right: 0; bottom: -2px; height: var(--pocket); z-index: 3;
  background: var(--manila-lt); border: 1px solid var(--manila-ln); border-radius: var(--r-lg);
  transform-origin: 50% 100%; will-change: transform; box-shadow: 0 -12px 22px rgba(23,25,28,.13); }
.fldr-rule { position: absolute; left: clamp(26px, 3.4vw, 44px); height: 7px; border-radius: 4px; background: var(--manila-ln); }
.fldr-rule:nth-of-type(1) { top: 26px; width: 92px; }
.fldr-rule:nth-of-type(2) { top: 43px; width: 148px; opacity: .55; }
.fldr-tag { position: absolute; z-index: 4; left: clamp(26px, 3.4vw, 44px); bottom: 22px;
  display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #8B7F68; pointer-events: none; }
.fldr-tag .clay-dot { --dot: var(--clay); }

/* the file rows that rise out of it */
.fldr-cards { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.fldr-cards .dl-card { flex: none; max-width: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 4px 14px; padding: 13px 15px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(23,25,28,.07); transform-origin: 50% 100%; }
.fldr-cards .dl-card .dl-btn { grid-column: auto; justify-self: end; margin-top: 0; white-space: nowrap; }
.fldr-cards .dl-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(23,25,28,.12); }
.fldr-cards .dl-ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center;
  background: rgba(var(--clay-rgb), .10); color: var(--clay); }
.fldr-cards .dl-meta h3 { font-size: 15px; font-weight: 600; line-height: 1.25; }
.fldr-cards .dl-type { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fldr-cards .dl-card.is-hero { background: var(--ink); border-color: var(--ink); box-shadow: 0 14px 30px rgba(23,25,28,.24); }
.fldr-cards .dl-card.is-hero .dl-meta h3 { color: #fff; }
.fldr-cards .dl-card.is-hero .dl-type { color: rgba(255,255,255,.6); }
.fldr-cards .dl-card.is-hero .dl-ico { background: rgba(var(--clay-rgb), .22); color: #FF7A45; }
.fldr-cards .dl-card.is-hero .dl-btn { border-color: rgba(255,255,255,.28); color: #fff; }
.fldr-cards .dl-card.is-hero .dl-btn:hover { background: var(--clay); border-color: var(--clay); }
.dl-btn .lk { flex: 0 0 auto; width: 13px; height: 13px; margin-right: -3px; }
.fldr-cards.is-open .dl-card { border-color: rgba(var(--clay-rgb), .35); }

/* the gate */
.dl-gate { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 38px); box-shadow: var(--sh-md); }
.dl-gate.is-calling { animation: gateCall .6s var(--e-out) 2; }
@keyframes gateCall { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.dg-lock { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.dl-gate h3 { font-size: var(--fs-h3); margin-top: var(--s-2); }
.dg-sub { color: var(--muted); margin-top: 8px; font-size: var(--fs-small); max-width: 46ch; }
.dl-gate form { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.dl-gate .field input, .dl-gate .field select { background: #fff; min-height: 48px; }
.dg-submit { width: 100%; margin-top: 4px; }
.dg-note { font-size: 12px; color: var(--muted); text-align: center; }
.dg-note a { color: var(--clay); font-weight: 600; }
.dg-done { text-align: center; display: grid; justify-items: center; gap: 12px; }
/* a display rule must never beat the hidden attribute (that was the old
   "half the form is still showing behind the thank-you" glitch) */
.dl-gate [hidden] { display: none !important; }
.dg-burst { width: clamp(96px, 12vw, 130px); height: auto; }
.dg-done .btn--ghost { margin-top: -4px; }
@media (max-width: 900px) {
  .dl-split { grid-template-columns: 1fr; }
  .dl-gate { max-width: 560px; margin-inline: auto; width: 100%; }
  .fldr { max-width: 560px; margin-inline: auto; width: 100%; }
  .fldr-stage { --pocket: 96px; padding-top: 56px; }
}
.dl-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--tint-clay); display: grid; place-items: center; color: var(--clay); }
.dl-card h3 { font-size: var(--fs-h4); font-weight: 500; }
.dl-card .desc { font-size: var(--fs-small); color: var(--muted); }

/* ----------------------------------------------------------------
   22 · CONTACT
---------------------------------------------------------------- */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.ct-info h2 { font-size: var(--fs-h2); }
.ct-mail { display: inline-flex; align-items: center; gap: 14px; margin-top: var(--s-3); font-family: var(--f-disp); font-weight: 500; font-size: clamp(20px, 2.4vw, 32px); }
.ct-mail .cp { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s; }
.ct-mail .cp:hover { background: var(--clay); color: #fff; border-color: var(--clay); }
.ct-loc { color: var(--muted); margin-top: var(--s-2); }
.ct-socials { display: flex; gap: 10px; margin-top: var(--s-3); }
.ct-socials a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; transition: background .3s, color .3s, transform .3s var(--e-out); }
.ct-socials a:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.ct-card { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 56px); box-shadow: var(--sh-lg); }
.ct-card h3 { font-size: var(--fs-h3); }
.ct-card p { color: rgba(255,255,255,.7); margin-top: var(--s-2); }
.ct-card .btn { margin-top: var(--s-4); }
.ct-card .ct-quick { margin-top: var(--s-3); display: flex; flex-direction: column; gap: 9px; }
.ct-card .ct-quick button { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); text-align: left; color: #fff; transition: background .3s, transform .3s var(--e-out), border-color .3s; }
.ct-card .ct-quick button:hover { background: rgba(255,255,255,.12); transform: translateX(4px); border-color: rgba(255,255,255,.24); }
.ct-card .ct-quick .clay-dot { --dot: var(--gold); flex: 0 0 auto; }
.ct-card .ct-quick .cq-t { flex: 1; display: grid; gap: 1px; min-width: 0; }
.ct-card .ct-quick .cq-t b { font-size: 14.5px; font-weight: 600; }
.ct-card .ct-quick .cq-t i { font-style: normal; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-card .ct-quick button svg { flex: 0 0 auto; color: var(--gold); }
.ct-info .small { max-width: 42ch; }

/* Connect page hero: compact, so the sponsorship button lands in the first screen */
.cx-hero { padding-top: clamp(86px, 10vh, 118px); padding-bottom: clamp(36px, 4.5vw, 60px); overflow: hidden; }
.cx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.cx-hero-copy { min-width: 0; }
.cx-proof { min-width: 0; }
.cx-title { font-family: var(--f-disp); font-weight: 600; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.03em; margin-top: var(--s-2); max-width: 15ch; }
.cx-lead { margin-top: var(--s-2); max-width: 52ch; color: var(--muted); font-size: clamp(15px, 1.3vw, 17px); }
.cx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }
.cx-mail { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3); color: var(--clay); font-weight: 600; font-size: var(--fs-small); }
.cx-mail:hover { color: var(--ink); }
/* why back me, as one glanceable row instead of a whole section */
.cx-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-3); padding: 0; }
.cx-proof li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cx-proof li .clay-dot { --dot: var(--clay); width: 9px; height: 9px; }
.cx-proof li:nth-child(2) .clay-dot { --dot: var(--gold); }
.cx-proof li:nth-child(3) .clay-dot { --dot: var(--teal); }
.cx-proof li:nth-child(4) .clay-dot { --dot: var(--pink); }
/* fills its column so there is no empty gap beside the copy; a plain
   object-fit:cover image (no parallax) stays crisp on fractional-DPI screens */
.cx-hero-media { position: relative; margin: 0; width: 100%; max-width: 520px; justify-self: stretch; }
.cx-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--sh-lg); }
.cx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .cx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-hero-media { max-width: 360px; margin: var(--s-3) auto 0; justify-self: center; }
  .cx-actions { justify-content: flex-start; }
  .cx-title { max-width: none; }
  /* keep the proof chips to one swipeable line instead of four stacked rows */
  .cx-proof { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .cx-proof::-webkit-scrollbar { display: none; }
  .cx-proof li { flex: 0 0 auto; }
}

/* ----------------------------------------------------------------
   23 · MODALS — popup with smooth open
---------------------------------------------------------------- */
.modal-back { position: fixed; inset: 0; z-index: 300; background: rgba(14,15,18,.55); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); opacity: 0; visibility: hidden; transition: opacity .4s, backdrop-filter .4s, visibility .4s; }
.modal-back.is-open { opacity: 1; visibility: visible; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal { position: fixed; z-index: 301; left: 50%; top: 50%; width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-lg); transform: translate(-50%, -46%) scale(.94); opacity: 0; visibility: hidden; transition: transform .55s var(--e-out), opacity .4s, visibility .55s; }
.modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.modal-head { position: relative; padding: var(--s-4) var(--s-4) 0; }
.modal-head .badge { margin-bottom: var(--s-2); }
.modal-head h2 { font-size: var(--fs-h3); }
.modal-head p { color: var(--muted); margin-top: 8px; font-size: var(--fs-small); }
.modal-x { position: absolute; top: var(--s-3); right: var(--s-3); width: 40px; height: 40px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; transition: background .3s, transform .3s var(--e-out); }
.modal-x:hover { background: var(--clay); color: #fff; transform: rotate(90deg); }
.modal-body { padding: var(--s-4); }
.modal-success { position: absolute; inset: 0; background: var(--paper); border-radius: var(--r-lg); display: grid; place-items: center; text-align: center; padding: var(--s-4); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.modal-success.is-on { opacity: 1; visibility: visible; }
.modal-success .ring { width: 88px; height: 88px; margin: 0 auto var(--s-3); }
.modal-success .ring circle, .modal-success .ring path { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.modal-success h3 { font-size: var(--fs-h3); }
.modal-success p { color: var(--muted); margin-top: 8px; }

/* forms */
.form { display: grid; gap: var(--s-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.field { display: grid; gap: 7px; }
.field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 16px; background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-sm); transition: border-color .3s, box-shadow .3s, background .3s; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317191C' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--clay); box-shadow: 0 0 0 4px rgba(var(--clay-rgb), .12); background: #fff; }
.field.is-error input, .field.is-error textarea, .field.is-error select { border-color: #E4442B; }
.field .err { font-size: 12px; color: #E4442B; display: none; }
.field.is-error .err { display: block; }
.form-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.form-foot .btn { flex: 1; }
.form-note { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

/* ----------------------------------------------------------------
   24 · HIND AI
   The old chat widget lived here. It is gone: see section 43, which is
   the character button and the panel of questions that replaced it.
---------------------------------------------------------------- */
/* video modal reuse */
.vid-modal { position: fixed; inset: 0; z-index: 330; background: rgba(14,15,18,.92); display: grid; place-items: center; padding: var(--s-4); opacity: 0; visibility: hidden; }
.vid-modal-box { width: min(1000px, 94vw); aspect-ratio: 16/9; background: var(--ink); border-radius: var(--r-md); display: grid; place-items: center; text-align: center; padding: var(--s-4); overflow: hidden; }
.vid-modal-box .note { color: rgba(255,255,255,.7); max-width: 44ch; }

/* ----------------------------------------------------------------
   25 · FOOTER
---------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--cream); padding-top: var(--s-8); overflow: clip; }
.footer-cta { text-align: center; padding-bottom: var(--s-7); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-cta h2 { font-size: clamp(36px, 6vw, 88px); letter-spacing: -.03em; }
.footer-cta .btn { margin-top: var(--s-4); }
/* full name, centred, sized to FIT the viewport (no edge cropping) */
.footer-mark { width: 100%; font-family: var(--f-disp); font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 9.6vw, 150px); line-height: .9; letter-spacing: -.03em; white-space: nowrap; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.16); user-select: none; padding-top: var(--s-6); overflow: hidden; }
.footer-mark .fm-first { color: #fff; -webkit-text-stroke: 0; }         /* HIND — solid white */
.footer-mark .watername { -webkit-text-stroke: 1px rgba(255,255,255,.28); cursor: default; }
.footer-mark .watername::after { -webkit-text-stroke: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-5); padding-block: var(--s-6); }
.footer-col .label { color: var(--clay); margin-bottom: var(--s-2); display: block; }
.footer-col ul { display: grid; gap: 10px; font-size: var(--fs-small); }
.footer-col a { color: rgba(255,255,255,.65); transition: color .3s, padding-left .3s var(--e-out); }
.footer-col a:hover { color: #fff; padding-left: 6px; }
.footer-brand p { margin-top: var(--s-2); color: rgba(255,255,255,.55); font-size: var(--fs-small); max-width: 34ch; }
.footer-mail { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3); color: var(--gold); font-weight: 600; font-size: var(--fs-small); }
.footer-mail:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-3); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
/* The build credit. It sits between the copyright and the back-to-top button,
   at a fraction of an already-muted footer colour, so at a glance it reads as
   part of the rule rather than as a line of text. The words appear on hover.

   The anchor is exactly the size of the seal, and the word is hung off its left
   edge OUT OF FLOW. In flow the reveal made the anchor ~57px wider, and since it
   is centred by auto margins inside a space-between row that width came out of
   those margins - so the monogram slid ~28px sideways under the cursor that was
   pointing at it. Out of flow, nothing moves but the word. */
.built-by { position: relative; display: inline-flex; align-items: center;
  color: rgba(255,255,255,.22); transition: color .3s var(--e-out);
  text-decoration: none; margin-inline: auto; border-radius: 50%; }
/* the mark is 19px; a 29px target without disturbing the layout, since 19
   would sit under the 24px minimum for a pointer target */
.built-by::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }

/* align-items:center, NOT baseline. An <svg> is a replaced element with no text
   baseline, so CSS synthesises one from its bottom margin edge - which sat the
   words 6.2px below the monogram on a mark only 19px tall. Centre works because
   the ink is centred in its own viewBox and uppercase caps centre on their line
   box to within a rounding error in every face in the stack. */
.built-by-seal { display: inline-flex; }
.built-by-seal svg { display: block; overflow: visible; }

/* The monogram, drawn as a seal. At rest only the letters show and the ring is
   not drawn at all, so it reads as a small mark rather than a button; on hover
   the ring completes itself - a seal being pressed - and the whole thing warms
   to clay. Deliberately NOT her clay-disc motif: this is a signature, not a
   second brand on her site. */
.built-by-seal .bb-ring { opacity: .28; transform-origin: 50% 50%; transform: rotate(-90deg);
  stroke-dasharray: 89.2; stroke-dashoffset: 89.2;
  transition: stroke-dashoffset .55s var(--e-out), opacity .3s var(--e-out); }
.built-by-seal .bb-mono { transition: opacity .3s var(--e-out); }
.built-by:hover .bb-ring, .built-by:focus-visible .bb-ring { stroke-dashoffset: 0; opacity: .9; }
.built-by:hover, .built-by:focus-visible { color: var(--clay); }

/* No max-width clamp. The old one guessed 60px at the text's width; "DESIGN BY"
   measures 56.9px in Inter and 59.3px in the widest fallback face, so it was
   0.7px from being silently truncated mid-letter by overflow:hidden. Out of
   flow the word just takes its intrinsic width, whatever it ends up saying. */
.built-by-word { position: absolute; right: 100%; top: 50%;
  /* letter-spacing is applied after the final character too, so the optical gap
     is this margin plus .1em - take it back out to land on a true 8px */
  margin-right: calc(8px - .1em);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-50%) translateX(5px);
  transition: opacity .28s var(--e-out), transform .38s var(--e-out); }
.built-by:hover .built-by-word, .built-by:focus-visible .built-by-word {
  opacity: 1; transform: translateY(-50%) translateX(0); }

@media (prefers-reduced-motion: reduce) {
  /* state change without animation. The previous version forced
     stroke-dashoffset:0 here, which left the ring permanently closed at rest -
     a different design for these users rather than a calmer one. */
  .built-by-word, .built-by-seal .bb-ring { transition: none; }
  .built-by-word { transform: translateY(-50%); }
}

.dl-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(18px, 3vw, 30px);
  text-align: center;
  font-size: var(--fs-small);
  color: rgba(23, 25, 28, .45);
}

.to-top { display: inline-flex; align-items: center; gap: 10px; }
.to-top .clay-dot { --dot: var(--clay); }
.to-top:hover .clay-dot { animation: dot-burst .6s var(--e-out); }

/* ----------------------------------------------------------------
   26 · PRINT one-pager
---------------------------------------------------------------- */
.onepager { display: none; }
@media print {
  body * { visibility: hidden; }
  .onepager, .onepager * { visibility: visible; }
  .onepager { display: block; position: absolute; inset: 0; background: #fff; color: #17191C; padding: 48px; font-size: 12px; }
  .onepager h1 { font-size: 42px; letter-spacing: -.02em; }
  .onepager .op-rule { height: 3px; background: #F0531C; width: 96px; margin-block: 16px; }
  .onepager .op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
  .onepager h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .12em; color: #12A46B; margin-bottom: 8px; }
  .onepager ul { list-style: none; } .onepager li { border-bottom: 1px solid #ECE4D6; padding-block: 6px; }
}

/* ----------------------------------------------------------------
   27 · REVEAL PRIMITIVES
   CSS transitions driven by IntersectionObserver (see site.js).
   Independent of GSAP/ScrollTrigger so content is NEVER left hidden.
---------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* image reveals: element stays visible, only the frame clips open */
/* a parallax image is over-tall so it can slide without ever being scaled
   (scaling a composited layer is what blurred it) */
.img-frame img[data-parallax], .cx-photo img[data-parallax], img[data-parallax] {
  position: absolute; left: 0; right: 0; top: -9%; bottom: auto;
  width: 100%; height: 118%; object-fit: cover; }
html.js [data-reveal="img"] { opacity: 1; transform: none; }
html.js [data-reveal="img"] .img-frame { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65,.05,0,1); }
html.js [data-reveal="img"].is-in .img-frame { clip-path: inset(0 0 0 0); }

/* failsafe + no-JS: force everything visible INSTANTLY (no transition, so it
   applies even if the compositor never animates it) */
html.reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reveal-all [data-reveal="img"] .img-frame { clip-path: none !important; transition: none !important; }
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js [data-reveal="img"] .img-frame { clip-path: none; }
}

/* ----------------------------------------------------------------
   28 · RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .spon-values { grid-template-columns: 1fr 1fr; }
  .tr-cards { grid-template-columns: 1fr 1fr; }
  .ach-counters { grid-template-columns: 1fr 1fr; }
  .cert-wall { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .about-grid, .ct-grid { grid-template-columns: 1fr; }
  .about-media { position: static; }
  .tr-top { grid-template-columns: 1fr; }
  .comp-grid, .vid-grid, .dl-grid { grid-template-columns: 1fr; }
  .mission-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  /* journey → vertical stack on mobile */
  .jt-viewport { height: auto; }
  .jt-stage, .jt-flight, .jt-progress, .jt-hint { display: none; }
  .jt-mobile { display: grid; gap: var(--s-2); padding: 0 var(--gut) var(--sec-pad); max-width: var(--container); margin-inline: auto; }
  .jt-m-card { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--sh-md); }
  .jt-m-card img { width: 100%; height: 100%; object-fit: cover; }
  .jt-m-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14,15,18,.85)); }
  .jt-m-card .m { position: absolute; z-index: 2; bottom: 0; padding: var(--s-3); color: #fff; }
  .jt-m-card .yr { font-family: var(--f-disp); font-weight: 600; font-size: 40px; line-height: 1; }
  .jt-m-card h3 { font-size: var(--fs-h4); margin-top: 4px; } .jt-m-card p { font-size: 12px; color: rgba(255,255,255,.8); margin-top: 6px; }
  .jt { padding-bottom: 0; }
  .jt-head { padding-top: var(--sec-pad); }
}
@media (max-width: 620px) {
  .nav { padding: 10px var(--gut); }
  .nav-inner { padding: 8px 8px 8px 16px; }
  .nav-utility .u-loc span { display: none; }
  .nav-utility .u-mail span { display: none; }
  .nav-contact { display: none; }
  .hero { padding-top: 120px; }
  .hero-stage { margin-inline: var(--s-2); min-height: 74vh; }
  .hero-content { padding: var(--s-3); }
  .hero-annos { display: none; }
  .hero-social { top: var(--s-2); left: var(--s-2); padding: 5px 12px 5px 6px; }
  .spon-values, .stats-row, .ach-counters, .cert-wall { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .ach-row { grid-template-columns: 56px 1fr auto; }
  .ach-row .rs { grid-column: 2 / -1; text-align: left; }
  .spon-stats { gap: var(--s-3); }
  
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------
   29 · REDUCED MOTION
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js [data-reveal] { opacity: 1; }
}
html.force-reduce *, html.force-reduce *::before, html.force-reduce *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* ================================================================
   V3 · MULTI-PAGE ADDITIONS
   ================================================================ */

/* --- hero v3 --- */
.hero-name { font-family: var(--f-disp); font-weight: 600; line-height: .86; letter-spacing: -.035em; text-transform: uppercase; margin-bottom: 6px; }
.hero-name .hn-first, .hero-name .hn-last { display: block; overflow: hidden; }
.hero-name .hn-first { font-size: clamp(52px, 9vw, 128px); }
.hero-name .hn-last { font-size: clamp(52px, 9vw, 128px); color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.85); padding-bottom: .06em; }
.hero-tagline { margin-top: var(--s-2); font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.6vw, 34px); color: var(--sand); }
.hero-tagline .wm { padding-bottom: .06em; }
.hero-clay-wrap { position: absolute; z-index: 4; top: clamp(56px, 12vh, 118px); right: clamp(16px, 5vw, 80px); width: clamp(150px, 20vw, 280px); aspect-ratio: 1; cursor: pointer; display: grid; place-items: center; }
.hero-clay-wrap canvas { width: 100%; height: 100%; }
.hero-clay-wrap::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.28); animation: slowspin 20s linear infinite; }
.hero-clay-hint { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hero-clay-wrap:hover .hero-clay-hint { color: var(--clay-2); }
@media (max-width: 720px) { .hero-clay-wrap { top: auto; bottom: 32%; right: 50%; transform: translateX(50%); width: 130px; opacity: .95; } }

/* --- inner page layout (tight, consistent top space on every page) --- */
.page-top { height: clamp(92px, 11vh, 124px); }
.page-head { padding: clamp(8px, 1.5vw, 20px) 0 clamp(24px, 3.5vw, 48px); }
.page-title { font-size: clamp(40px, 7vw, 104px); line-height: .98; letter-spacing: -.03em; }
.page-lead { max-width: 640px; margin-top: var(--s-3); font-size: var(--fs-lead); color: var(--muted); }
.page-hero-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/7; box-shadow: var(--sh-md); margin-top: var(--s-2); }
.page-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* --- home highlights --- */
.hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.hl-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--sh-sm); display: block; }
.hl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--e-out); }
.hl-card:hover img { transform: scale(1.06); }
.hl-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14,15,18,.82)); }
.hl-card .hl-body { position: absolute; z-index: 2; inset: auto 0 0; padding: var(--s-3); color: #fff; }
.hl-card .hl-body h3 { font-size: var(--fs-h4); } .hl-card .hl-body p { font-size: var(--fs-small); opacity: .82; margin-top: 6px; }
.hl-card .hl-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clay-2); }
@media (max-width: 820px) { .hl-grid { grid-template-columns: 1fr; } }

/* --- journey list --- */
.jn-list { display: grid; gap: clamp(24px, 4vw, 56px); }
.jn-item { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.jn-item:nth-child(even) { grid-template-columns: 6fr 5fr; }
.jn-item:nth-child(even) .jn-media { order: 2; }
.jn-media .img-frame { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: var(--r-md); box-shadow: var(--sh-md); }
.jn-media img { width: 100%; height: 100%; object-fit: cover; }
.jn-year { font-family: var(--f-disp); font-weight: 600; font-size: clamp(48px, 6vw, 92px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.4px var(--clay); margin: 10px 0 4px; }
.jn-body h3 { font-size: var(--fs-h3); letter-spacing: -.02em; }
.jn-body p { margin-top: var(--s-2); color: var(--muted); max-width: 46ch; }
@media (max-width: 760px) { .jn-item, .jn-item:nth-child(even) { grid-template-columns: 1fr; } .jn-item:nth-child(even) .jn-media { order: 0; } }

/* --- gallery collage: true masonry (columns) — fills, no empty area --- */
.gal-collage { column-count: 4; column-gap: 12px; }
.gal-tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-sm); box-shadow: var(--sh-sm); cursor: pointer; margin: 0 0 12px; break-inside: avoid; }
.gal-tile img { width: 100%; height: auto; display: block; transition: transform 1s var(--e-out); }
.gal-tile:hover img { transform: scale(1.05); }
.gal-tile figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px; color: #fff; background: linear-gradient(180deg, transparent 45%, rgba(14,15,18,.75)); opacity: 0; transition: opacity .35s; }
.gal-tile:hover figcaption { opacity: 1; }
.gal-tile figcaption .t { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-2); }
.gal-tile figcaption .c { font-size: 12px; }
@media (max-width: 900px) { .gal-collage { column-count: 3; } }
@media (max-width: 620px) { .gal-collage { column-count: 2; column-gap: 8px; } .gal-tile { margin-bottom: 8px; } .gal-tile figcaption { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(14,15,18,.78)); } }

/* --- competitions clickable --- */
.comp-card--has { cursor: pointer; }
.comp-card--has:hover { border-color: rgba(var(--clay-rgb), .45); }
.comp-more { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--clay); }
.comp-more svg { flex: 0 0 auto; }

/* --- connect cards --- */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-2); max-width: 1000px; margin-inline: auto; }
.cn-card { --cn: var(--clay); position: relative; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-sm); transition: transform .4s var(--e-out), box-shadow .4s, border-color .3s; overflow: hidden; }
.cn-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cn); }
.cn-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--cn); opacity: .07; transition: transform .5s var(--e-out); }
.cn-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.cn-card:hover::after { transform: scale(1.3); }
.cn-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--cn); }
.cn-card h3 { font-size: var(--fs-h4); margin-top: var(--s-2); letter-spacing: -.01em; }
.cn-card p { color: var(--muted); margin-top: 6px; max-width: 34ch; font-size: var(--fs-small); }
.cn-go { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cn); }
.cn-go svg { transition: transform .35s var(--e-out); } .cn-card:hover .cn-go svg { transform: translateX(5px); }
@media (max-width: 720px) { .cn-grid { grid-template-columns: 1fr; } }

/* --- social cards --- */
.soc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.soc-card { --soc: var(--clay); display: grid; grid-template-columns: 120px 1fr auto; gap: var(--s-3); align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sh-sm); transition: transform .4s var(--e-out), box-shadow .4s, border-color .3s; overflow: hidden; }
.soc-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.soc-thumb { position: relative; width: 120px; height: 120px; border-radius: var(--r-md); overflow: hidden; background: var(--soc); flex: 0 0 auto; }
.soc-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.soc-thumb .soc-ic { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--soc); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.soc-body { min-width: 0; }
.soc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.soc-top b { font-family: var(--f-disp); font-weight: 600; font-size: var(--fs-h4); }
.soc-follow { font-size: 12px; color: var(--muted); }
.soc-handle { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--soc); }
.soc-blurb { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.soc-go { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--soc); flex: 0 0 auto; transition: background .3s, color .3s; }
.soc-card:hover .soc-go { background: var(--soc); color: #fff; }
@media (max-width: 720px) { .soc-grid { grid-template-columns: 1fr; } .soc-card { grid-template-columns: 84px 1fr; } .soc-thumb { width: 84px; height: 84px; } .soc-go { display: none; } }

/* --- proposal card — left-aligned even inside centered sections,
       readable white button on the dark card ---------------------- */
.prop-card { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 2.5vw, 32px); align-items: center; text-align: left; background: #1B1E23; border: 1px solid rgba(255,255,255,.08); color: #fff; border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--sh-lg); max-width: 980px; margin-inline: auto; }
.prop-ic { width: 60px; height: 60px; border-radius: 16px; background: rgba(242,162,19,.14); display: grid; place-items: center; color: var(--gold); flex: 0 0 auto; }
.prop-body { min-width: 0; }
.prop-body h3 { font-size: var(--fs-h3); margin-top: 10px; letter-spacing: -.02em; }
.prop-body p { color: rgba(255,255,255,.72); margin-top: 8px; max-width: 52ch; }
.prop-body .badge { background: rgba(242,162,19,.16); color: var(--gold); }
.prop-card .btn { white-space: nowrap; }
@media (max-width: 820px) { .prop-card { grid-template-columns: 1fr; } .prop-ic { display: none; } .prop-card .btn { width: 100%; } }

.cert-visual .cert-seal { color: var(--gold); }

/* --- certificate rail (home): horizontal snap slider with arrows ---- */
.cert-rail-wrap { position: relative; }
.cert-rail { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px var(--s-2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cert-rail::-webkit-scrollbar { display: none; }
.cert-rail .cert { flex: 0 0 clamp(240px, 24vw, 300px); scroll-snap-align: start; }
.cert-rail-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 90px; background: linear-gradient(90deg, transparent, var(--cream)); pointer-events: none; }
.cert-nav { position: absolute; top: 40%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-md); display: grid; place-items: center; color: var(--ink); transition: background .25s, color .25s, transform .3s var(--e-out), opacity .3s; }
.cert-nav:hover { background: var(--clay); color: #fff; transform: scale(1.08); }
.cert-nav.prev { left: -14px; } .cert-nav.next { right: -14px; }
.cert-nav[disabled] { opacity: .3; pointer-events: none; }
.cert-more-hint { text-align: center; margin-top: 6px; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sec-intro { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.sec-intro .sec-eyebrow { justify-content: center; }

/* ================================================================
   V5 · SYNCHRONISED CLAYS · ROUTINE MAP · VALUES CINEMA · MORE
   ================================================================ */

/* nav: 9 links — slightly tighter so they fit before the burger kicks in */
.nav-links a { padding: 9px 11px; font-size: 13.5px; }

/* marquee clays (replace dots with real colored targets) */
.mq-clay { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); animation: clay-bob 9s ease-in-out infinite; }
.marquee-set .mq-clay:nth-child(4n) { animation-delay: -2s; }
.marquee-set .mq-clay:nth-child(4n+2) { animation-delay: -4s; }

/* --- national pride with Hind's portrait (home) ----------------- */
.pride-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 5vw, 80px); align-items: center; text-align: left; }
.pride-copy .vision-statement { margin: var(--s-4) 0 0; text-align: left; max-width: 16ch; }
.pride-copy .vision-support { margin: var(--s-3) 0 0; text-align: left; }
.pride-media { position: relative; width: clamp(240px, 26vw, 380px); aspect-ratio: 1; flex: 0 0 auto; }
.pride-media .pm-ring { position: absolute; inset: -7%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.35); animation: slowspin 26s linear infinite; }
.pride-media .pm-img { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.pride-media .pm-img img { width: 100%; height: 100%; object-fit: cover; }
.pride-media .pm-clay { position: absolute; right: -6%; bottom: 6%; width: 24%; }
@media (max-width: 860px) { .pride-grid { grid-template-columns: 1fr; text-align: center; } .pride-copy .vision-statement, .pride-copy .vision-support { text-align: center; margin-inline: auto; } .pride-media { margin: var(--s-2) auto 0; } }

/* --- interview film card ---------------------------------------- */
.interview-card { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 16/8; cursor: pointer; max-width: 980px; margin-inline: auto; }
.interview-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out); }
.interview-card:hover img { transform: scale(1.04); }
.interview-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,18,.15), rgba(14,15,18,.65)); }
.interview-card .iv-play { position: absolute; z-index: 2; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(240,83,28,.92); box-shadow: var(--sh-clay); transition: transform .4s var(--e-out); }
.interview-card:hover .iv-play { transform: scale(1.1); }
.interview-card .iv-meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: var(--s-3) var(--s-4); color: #fff; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.interview-card .iv-meta h3 { font-size: var(--fs-h3); } .interview-card .iv-meta .dur { color: var(--gold); font-size: var(--fs-small); }

/* --- routine: points floating OVER Hind's image ------------------ */
.routine-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 16/9; background: var(--ink); }
.routine-stage > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .92; }
.routine-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(14,15,18,.55) 100%); }
.rt-point { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.93); border-radius: var(--r-pill); padding: 8px 16px 8px 8px; box-shadow: var(--sh-md); cursor: default; transition: transform .35s var(--e-out), box-shadow .35s; }
.rt-point:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: var(--sh-lg); z-index: 5; }
.rt-point .clay-mark { width: 30px; height: 30px; }
.rt-point b { font-size: 13px; color: var(--ink); white-space: nowrap; display: block; }
.rt-point .rt-metric { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); white-space: nowrap; display: block; }
.rt-point .rt-tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); width: 230px; background: var(--ink); color: rgba(255,255,255,.85); font-size: 12px; line-height: 1.6; padding: 12px 14px; border-radius: var(--r-sm); opacity: 0; visibility: hidden; transition: opacity .3s, transform .35s var(--e-out), visibility .3s; pointer-events: none; white-space: normal; }
.rt-point:hover .rt-tip, .rt-point:focus-visible .rt-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.routine-list-mobile { display: none; }
@media (max-width: 760px) {
  .routine-stage { aspect-ratio: 4/5; }
  .rt-point { display: none; }
  .routine-list-mobile { display: grid; gap: 10px; margin-top: var(--s-3); }
  .routine-list-mobile .rt-row { display: flex; align-items: flex-start; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
  .routine-list-mobile .clay-mark { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 2px; }
  .routine-list-mobile b { font-size: 14px; }
  .routine-list-mobile p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
  .routine-list-mobile .rt-metric { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
}

/* --- journey: connecting flight line + travelling clay.
       A reserved CENTRE GUTTER keeps the flying clay off the text. --- */
.jn-wrap { position: relative; }
.jn-flightline { position: absolute; left: 50%; top: 0; height: 100%; width: 120px; transform: translateX(-50%); pointer-events: none; z-index: 1; }
.jn-flightline svg { width: 100%; height: 100%; overflow: visible; }
.jn-flightline .jl-rail { fill: none; stroke: rgba(var(--clay-rgb), .25); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.jn-flightline .jl-draw { fill: none; stroke: var(--clay); stroke-width: 2.5; stroke-linecap: round; }
.jn-travel-clay { position: absolute; left: 0; top: 0; width: 32px; height: 32px; z-index: 2; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); will-change: transform; }
.jn-item { position: relative; z-index: 2; }
.jn-year-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 5px rgba(var(--clay-rgb), .15); z-index: 3; }
@media (min-width: 761px) {
  .jn-wrap .jn-item { column-gap: clamp(160px, 15vw, 220px); }   /* clear lane for the clay */
  .jn-body p { max-width: 40ch; }
}
@media (max-width: 760px) { .jn-flightline, .jn-travel-clay, .jn-year-dot { display: none; } }

/* --- Values page: bullet meets target, value appears ------------- */
.vp-list { display: grid; gap: clamp(40px, 6vw, 88px); }
.vp-row { position: relative; display: grid; grid-template-columns: 1fr; }
.vp-anim { position: relative; height: 88px; margin-bottom: var(--s-2); overflow: visible; }
.vp-bullet { position: absolute; left: 0; top: 50%; transform: translate(-120%, -50%); width: clamp(90px, 12vw, 150px); filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.vp-target { position: absolute; right: clamp(4%, 8vw, 12%); top: 50%; transform: translate(0, -50%); width: clamp(56px, 7vw, 84px); height: clamp(56px, 7vw, 84px); }
.vp-target img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
.vp-target .vt-burst { opacity: 0; }
.vp-card { --vc: var(--clay); position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--sh-sm); max-width: 780px; transition: transform .45s var(--e-out), box-shadow .45s, border-color .35s; cursor: default; }
.vp-card::before { content: ""; position: absolute; inset: 0; background: var(--vc); transform: translateY(101%); transition: transform .55s var(--e-out); }
.vp-card > * { position: relative; z-index: 2; }
.vp-card h3 { font-size: var(--fs-h3); letter-spacing: -.02em; transition: color .4s; }
.vp-card p { color: var(--muted); margin-top: var(--s-2); max-width: 62ch; transition: color .4s; }
.vp-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--vc) 55%, transparent); }
.vp-card:hover::before { transform: translateY(0); }
.vp-card:hover h3, .vp-card:hover p { color: #fff; }
.vp-row:nth-child(even) .vp-card { margin-left: auto; }
.vp-row:nth-child(even) .vp-bullet { left: auto; right: 0; transform: translate(120%, -50%) scaleX(-1); }
.vp-row:nth-child(even) .vp-target { right: auto; left: clamp(4%, 8vw, 12%); }

/* Values v6: stacked cards that separate into a grid on scroll (point 18) */
.vp-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); max-width: 1080px; margin: clamp(40px, 6vw, 84px) auto 0; perspective: 1200px; }
.vp-card2 { will-change: transform; }
.vp-inner { position: relative; height: 100%; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--vc, var(--clay)); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-md); transition: transform .4s var(--e-out), box-shadow .4s; }
.vp-card2:hover .vp-inner { transform: translateY(-10px); box-shadow: var(--sh-lg); }
.vp-clay { display: block; width: 46px; height: 46px; margin-bottom: var(--s-2); }
.vp-clay img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0,0,0,.16)); }
.vp-inner h3 { font-size: var(--fs-h4); letter-spacing: -.01em; }
.vp-inner p { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
@media (max-width: 860px) { .vp-deck { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vp-deck { grid-template-columns: 1fr; } }

/* --- support options — fully centred so clay, title, text and CTA
       all sit on one axis (was mixed-alignment) --------------------- */
.sup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.sup-card { position: relative; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; transition: transform .4s var(--e-out), border-color .35s; cursor: pointer; }
/* clay-coloured fill rises to fill the card on hover (matches the solid clay) */
.sup-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 50% 12%, var(--card-clay, var(--clay)), transparent 72%); opacity: 0; transform: translateY(18%); transition: opacity .45s var(--e-out), transform .55s var(--e-out); }
.sup-card > * { position: relative; z-index: 1; }
.sup-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--card-clay, var(--clay)) 55%, transparent); }
.sup-card:hover::before { opacity: .26; transform: translateY(0); }
.sup-card .clay-mark { width: 46px; height: 46px; margin-bottom: 4px; }
.sup-card h3 { font-size: var(--fs-h4); color: #fff; }
.sup-card p { font-size: var(--fs-small); color: rgba(255,255,255,.7); flex: 1; max-width: 30ch; }
.sup-card .sup-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 980px) { .sup-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sup-grid { grid-template-columns: 1fr; } }

/* --- achievement row: attached certificate chip ------------------ */
.ach-row { grid-template-columns: 76px 1fr auto auto auto; }
.ach-cert-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--tint-gold); color: #8a6416; font-size: 11px; font-weight: 700; letter-spacing: .05em; border: 1px solid rgba(242,162,19,.35); transition: background .25s, transform .25s var(--e-out); white-space: nowrap; }
.ach-cert-chip:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }
@media (max-width: 560px) { .ach-row { grid-template-columns: 56px 1fr auto; } .ach-cert-chip { grid-column: 2 / -1; justify-self: start; } }

/* ================================================================
   V4 · REAL CLAY IMAGERY + WATER NAME + MAP
   ================================================================ */

/* clay marker (floating target that shatters) — replaces small clay-dots.
   Bob is slow and gentle (the fast 4.5s/-16% version read as "vibration"). */
.clay-mark { position: relative; display: inline-block; vertical-align: middle; flex: 0 0 auto; animation: clay-bob 8s ease-in-out infinite; }
.clay-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.clay-mark .cm-clay { filter: drop-shadow(0 3px 5px rgba(0,0,0,.16)); }
.clay-mark .cm-burst { opacity: 0; pointer-events: none; }
@keyframes clay-bob { 50% { transform: translateY(-7%) rotate(4deg); } }
.sec-eyebrow { align-items: center; }
/* eyebrow clays sit perfectly on the text axis — no bobbing here */
.sec-eyebrow .clay-mark { margin-right: 2px; margin-top: 0; animation: none; }
.sec-eyebrow .clay-mark img { animation: none; }

/* big clickable clay (hero + sponsorship) */
.clay-big { position: relative; display: grid; place-items: center; cursor: pointer; }
.clay-big img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.clay-big .cb-clay { filter: drop-shadow(0 14px 28px rgba(0,0,0,.3)); }
.clay-big .cb-burst { opacity: 0; pointer-events: none; }

/* success confetti clays */
.clay-confetti { position: absolute; will-change: transform, opacity; }

/* gun accents */
.gun-accent { position: absolute; pointer-events: none; opacity: .9; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }

/* --- water-fill name (hover fills the letters) --- */
.watername { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.85); }
.watername::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  color: transparent; -webkit-text-stroke: 0;
  background-image: linear-gradient(180deg, var(--gold), var(--clay) 60%, var(--clay-2));
  -webkit-background-clip: text; background-clip: text;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s cubic-bezier(.5,0,.2,1);
}
.watername:hover::after, .watername:focus-visible::after { clip-path: inset(0 0 0 0); }
.watername.ink { -webkit-text-stroke-color: rgba(23,25,28,.5); }
/* footer full-name wordmark uses ink stroke on the dark footer? footer is dark → keep light */
.footer-mark.watername { -webkit-text-stroke-color: rgba(255,255,255,.22); }

/* --- location map (point 13) --- */
.map-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, #17222E, #0E0F12 70%); box-shadow: var(--sh-lg); aspect-ratio: 16/9; }
.map-canvas { position: absolute; inset: 0; }
.map-canvas canvas { width: 100%; height: 100%; display: block; }
.map-hint { position: absolute; left: 20px; bottom: 16px; z-index: 3; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.map-card { position: absolute; z-index: 4; width: 260px; background: rgba(255,255,255,.96); border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96); transform-origin: bottom left; transition: opacity .3s, transform .35s var(--e-out), visibility .3s; pointer-events: none; }
.map-card.is-on { opacity: 1; visibility: visible; transform: none; }
.map-card .mc-img { height: 130px; background: var(--sand); overflow: hidden; }
.map-card .mc-img img { width: 100%; height: 100%; object-fit: cover; }
.map-card .mc-imgs { display: flex; height: 120px; background: var(--sand); overflow: hidden; gap: 2px; }
.map-card .mc-imgs img { flex: 1; min-width: 0; height: 100%; object-fit: cover; }

/* ---- interactive 2D map (map2d.js) ---- */
.map2d-pin { position: absolute; transform: translate(-50%, -50%); z-index: 4; background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.map2d-pin .pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(240,83,28,.25), 0 2px 6px rgba(0,0,0,.4); transition: transform .25s var(--e-out); }
.map2d-pin.is-home .pin-dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(242,162,19,.28), 0 2px 6px rgba(0,0,0,.4); }
.map2d-pin .pin-label { position: absolute; top: calc(14px + var(--ly, 0px)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); pointer-events: none; }
.map2d-pin:hover .pin-dot, .map2d-pin:focus-visible .pin-dot { transform: scale(1.3); }
.map2d-pin:focus-visible { outline: none; }
.map2d-ctrls { position: absolute; right: 14px; top: 14px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.map2d-ctrls button { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 18px; font-weight: 600; display: grid; place-items: center; box-shadow: var(--sh-sm); transition: background .2s, transform .2s; }
.map2d-ctrls button:hover { background: var(--clay); color: #fff; transform: translateY(-1px); }
.map2d-card { position: absolute; z-index: 6; width: 240px; background: rgba(255,255,255,.97); border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97); transition: opacity .25s, transform .3s var(--e-out), visibility .25s; pointer-events: none; }
.map2d-card.is-on { opacity: 1; visibility: visible; transform: none; }
.map2d-card .m2-img { height: 128px; background: var(--sand); overflow: hidden; }
.map2d-card .m2-img img { width: 100%; height: 100%; object-fit: cover; }
.map2d-card .m2-body { padding: 12px 14px 14px; }
.map2d-card .m2-loc { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); }
.map2d-card h4 { margin: 4px 0 4px; font-size: 15px; color: var(--ink); }
.map2d-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.map-rotate { position: absolute; z-index: 4; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .25s, color .25s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.map-rotate:hover { background: rgba(255,255,255,.22); }
.map-rotate.is-on { background: var(--clay); border-color: var(--clay); }
.map-card .mc-body { padding: 12px 14px; }
.map-card .mc-body .mc-loc { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }
.map-card .mc-body h4 { font-family: var(--f-disp); font-size: 15px; margin-top: 3px; color: var(--ink); }
.map-card .mc-body p { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.map-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: var(--s-3); }
.map-legend button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); transition: color .25s; }
.map-legend button:hover, .map-legend button.is-active { color: var(--ink); }
.map-legend .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px rgba(var(--clay-rgb),.2); }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-arc { }
.map-pt { position: absolute; z-index: 2; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(var(--clay-rgb), .22), 0 0 14px rgba(var(--clay-rgb), .7); cursor: pointer; transition: transform .25s var(--e-out); border: none; }
.map-pt::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(var(--clay-rgb), .5); animation: ping 2.6s var(--e-out) infinite; }
.map-pt:hover, .map-pt:focus-visible { transform: translate(-50%, -50%) scale(1.4); outline: none; }
.map-pt.is-home { background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .22), 0 0 16px rgba(var(--gold-rgb), .8); }
.map-pt.is-home::after { border-color: rgba(var(--gold-rgb), .6); }

/* --- values (My Values) --- */
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.value-card { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-sm); transition: transform .4s var(--e-out), box-shadow .4s; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.value-card .vc-clay { width: 52px; height: 52px; position: relative; }
.value-card h3 { font-size: var(--fs-h4); }
.value-card p { color: var(--muted); font-size: var(--fs-small); margin-top: 8px; }
@media (max-width: 720px) { .values-grid { grid-template-columns: 1fr; } }

/* --- timed quote popup --- */
/* corner toast — never covers the page centre / interactive targets (fix: was centered + blocked clicks) */
/* centred card (with a dismissible backdrop so it never blocks clicks) */
.qp-back { position: fixed; inset: 0; z-index: 305; background: rgba(14,15,18,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.qp-back.is-open { opacity: 1; visibility: visible; }
.quote-pop { position: fixed; z-index: 306; left: 50%; top: 50%; width: min(540px, 92vw); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; transform: translate(-50%, -46%) scale(.95); opacity: 0; visibility: hidden; transition: transform .55s var(--e-out), opacity .4s, visibility .55s; display: grid; grid-template-columns: 42% 1fr; }
.quote-pop.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.quote-pop .qp-img { position: relative; background: var(--sand); overflow: hidden; }
.quote-pop .qp-img img { width: 100%; height: 100%; object-fit: cover; }
.quote-pop .qp-body { padding: var(--s-4); display: flex; flex-direction: column; }
.quote-pop .qp-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; }
.quote-pop .qp-x:hover { background: var(--clay); color: #fff; }
.quote-pop .qp-quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.3; color: var(--ink); }
.quote-pop .qp-name { margin-top: var(--s-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }
.quote-pop .btn { margin-top: auto; }
@media (max-width: 620px) { .quote-pop { grid-template-columns: 1fr; width: min(440px, 92vw); } .quote-pop .qp-img { height: 150px; } }

/* ================================================================
   30 · BACKGROUND BAND + SHOOTING JOURNEY TIMELINE  (v6)
   ================================================================ */

/* ---- the detailed story columns (background + shooting) ---- */
/* The section header is left-aligned, so the body must be too: same left
   edge, same max width. Previously the header sat left while the text was
   centred, which read as broken alignment. */
.bg-story, .sh-body { max-width: 74ch; margin-inline: 0; }
.bg-story p, .sh-body p { margin-top: var(--s-3); color: var(--muted); font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.75; }
.bg-story p:first-child, .sh-body p:first-child { margin-top: 0; }
.bg-story p:first-child { font-size: clamp(17px, 1.7vw, 21px); color: var(--ink); }

/* ---- full-bleed media band: glides, hover holds + zooms one frame ---- */
.bg-band { position: relative; margin: clamp(28px, 4vw, 52px) 0 clamp(30px, 4vw, 54px);
  padding-block: clamp(10px, 1.4vw, 18px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.bg-track { display: flex; gap: clamp(12px, 1.5vw, 22px); width: max-content; will-change: transform; }
.bg-item { flex: 0 0 clamp(190px, 21vw, 268px); margin: 0; position: relative; z-index: 1;
  transform-origin: center center; will-change: transform; }
.bg-item-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md);
  background: var(--sand); border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.bg-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-item figcaption { margin-top: 9px; display: grid; gap: 1px; }
.bg-item figcaption b { font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bg-item figcaption span { font-size: 11.5px; color: var(--muted); }
.bg-band-hint { position: absolute; right: clamp(14px, 3vw, 34px); top: 0;
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .65; }
@media (hover: none) { .bg-band-hint { display: none; } }



/* ================================================================
   31 · PAGE HEROES (Background / Shooting) + NEXT-PAGE CARDS  v6.1
   Two variants that deliberately do NOT look alike: different bed,
   different accent, mirrored layout, different frame shape.
   ================================================================ */
/* --nav-h is measured by chrome.js and kept up to date on resize; the clamp
   is a safe fallback that already clears the tallest nav on its own. */
.pg-hero { position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--nav-h, 140px) + clamp(30px, 5vh, 76px)) 0 clamp(56px, 7vw, 96px); }
.pg-hero .pgh-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 76px); align-items: center; }
.pgh-title { font-family: var(--f-disp); font-weight: 600; line-height: 1.02;
  letter-spacing: -.035em; font-size: clamp(40px, 6.6vw, 92px); margin-top: var(--s-2); }
.pgh-lead { margin-top: var(--s-3); max-width: 48ch; font-size: clamp(16px, 1.5vw, 19.5px); line-height: 1.65; }
.pgh-copy { min-width: 0; }
.pgh-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); padding: 0; min-width: 0; }
.pgh-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.pgh-chips .clay-dot { width: 9px; height: 9px; }
.pgh-media { margin: 0; position: relative; }
.pgh-frame { position: relative; overflow: hidden; box-shadow: var(--sh-lg); will-change: clip-path; }
.pgh-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* huge outlined word bleeding off the edge */
.pgh-ghost { position: absolute; z-index: 0; font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(110px, 19vw, 300px); line-height: .8; letter-spacing: -.05em;
  color: transparent; pointer-events: none; white-space: nowrap; user-select: none; }
.pgh-orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.pgh-scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 7px; font-size: var(--fs-label);
  letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.pgh-scroll-line { width: 1px; height: 30px; background: currentColor; opacity: .5;
  animation: pghDrop 1.9s ease-in-out infinite; transform-origin: top center; }
@keyframes pghDrop { 0%,100% { transform: scaleY(.35); opacity: .25; } 50% { transform: scaleY(1); opacity: .7; } }

/* ---------------- variant A · BACKGROUND: cool, editorial, image right --------------- */
.pg-hero--bg { background: linear-gradient(168deg, #14171B 0%, #182231 45%, #0F1B28 100%); color: #fff; }
.pg-hero--bg .pgh-ghost { top: 6%; right: -3%; -webkit-text-stroke: 1.2px rgba(120,190,255,.16); }
.pg-hero--bg .pgh-orb { width: clamp(300px, 42vw, 560px); aspect-ratio: 1; left: -14%; bottom: -34%;
  background: radial-gradient(circle, rgba(46,124,228,.30), transparent 66%); }
.pg-hero--bg .pgh-lead { color: rgba(255,255,255,.72); }
.pg-hero--bg .sec-eyebrow .label { color: rgba(255,255,255,.6); }
.pg-hero--bg .pgh-chips li { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.pg-hero--bg .pgh-chips .clay-dot { --dot: #58A6FF; }
/* tall arch */
.pg-hero--bg .pgh-frame { aspect-ratio: 4/5; border-radius: 260px 260px var(--r-lg) var(--r-lg); }
.pg-hero--bg .pgh-media { max-width: 430px; justify-self: end; }
.pg-hero--bg .pgh-scroll { color: rgba(255,255,255,.7); }

/* ---------------- variant B · SHOOTING: warm, wide, image LEFT ---------------- */
.pg-hero--shoot { background:
  radial-gradient(120% 90% at 88% 8%, rgba(240,83,28,.20), transparent 60%),
  radial-gradient(90% 80% at 6% 96%, rgba(242,162,19,.20), transparent 62%),
  var(--cream); color: var(--ink); }
.pg-hero--shoot .pgh-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.pg-hero--shoot .pgh-media { order: -1; max-width: 520px; }        /* image on the LEFT */
.pg-hero--shoot .pgh-ghost { bottom: -4%; left: -2%; -webkit-text-stroke: 1.3px rgba(240,83,28,.20); }
.pg-hero--shoot .pgh-orb { width: clamp(240px, 32vw, 420px); aspect-ratio: 1; right: -8%; top: -18%;
  background: radial-gradient(circle, rgba(240,83,28,.22), transparent 68%); }
.pg-hero--shoot .pgh-lead { color: var(--muted); }
.pg-hero--shoot .pgh-chips li { background: #fff; border: 1px solid var(--line); color: var(--ink); }
/* wide cinematic frame, opposite corner cut to the arch */
.pg-hero--shoot .pgh-frame { aspect-ratio: 5/4; border-radius: var(--r-lg) 190px var(--r-lg) 190px; }
.pg-hero--shoot .pgh-title .accent, .pg-hero--shoot .pgh-title em { color: var(--clay); font-style: normal; }

/* ---------------- next-page cards ---------------- */
.nxt-sec { padding-block: clamp(46px, 6vw, 86px); }
.nxt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-2); }
.nxt-card { position: relative; display: block; overflow: hidden; padding: clamp(22px, 3vw, 34px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); transition: transform .45s var(--e-out), box-shadow .45s, border-color .3s; }
.nxt-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 170px; height: 170px;
  border-radius: 50%; background: var(--clay); opacity: .06; transition: transform .55s var(--e-out); }
.nxt-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: rgba(var(--clay-rgb), .35); }
.nxt-card:hover::after { transform: scale(1.45); }
.nxt-lbl { font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--clay); }
.nxt-card h3 { font-size: var(--fs-h3); margin-top: 8px; letter-spacing: -.02em; }
.nxt-card p { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); max-width: 34ch; }
.nxt-go { display: inline-flex; margin-top: var(--s-3); color: var(--clay); transition: transform .4s var(--e-out); }
.nxt-card:hover .nxt-go { transform: translateX(7px); }

/* ---------------- page heroes on tablet / phone ---------------- */
@media (max-width: 900px) {
  /* must keep reserving the measured nav height here too, or the content
     slides under the fixed bar on phones */
  .pg-hero { padding-top: calc(var(--nav-h, 125px) + clamp(20px, 3.5vh, 40px));
    padding-bottom: clamp(40px, 8vw, 64px); }
  .pg-hero .pgh-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .pg-hero--shoot .pgh-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-hero--bg .pgh-media, .pg-hero--shoot .pgh-media { max-width: 420px; margin-inline: auto; justify-self: center; order: 0; }
  .pgh-ghost { font-size: clamp(84px, 26vw, 170px); opacity: .8; }
  .pg-hero--bg .pgh-frame { border-radius: 190px 190px var(--r-lg) var(--r-lg); }
  .pg-hero--shoot .pgh-frame { border-radius: var(--r-lg) 130px var(--r-lg) 130px; }
  .pgh-scroll { display: none; }
  /* chips stay on one swipeable line rather than stacking into a wall */
  .pgh-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .pgh-chips::-webkit-scrollbar { display: none; }
  .pgh-chips li { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .pgh-title { font-size: clamp(32px, 10vw, 46px); }
  .pg-hero--bg .pgh-media, .pg-hero--shoot .pgh-media { max-width: 100%; }
}

/* ================================================================
   32 · v6.2 DESIGN PASS
   split hero · rising clay line · fill-on-hover cards · duo panels
   ================================================================ */

/* ---------- highlighted phrase inside a heading (soft marker) ---------- */
.hl { position: relative; z-index: 0; }
.hl::before { content: ""; position: absolute; z-index: -1; left: -.12em; right: -.12em;
  top: .12em; bottom: .06em; border-radius: 6px; background: rgba(88,166,255,.22); }
.sec--cream .hl::before, .sec--paper .hl::before { background: rgba(var(--clay-rgb), .16); }

/* ---------------- BACKGROUND hero · athlete | professional ---------------- */
.pgh-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 500px; justify-self: end; }
.pgh-split .pghs-panel { position: relative; }
.pgh-split .pgh-frame { aspect-ratio: 3/4.4; border-radius: var(--r-lg); }
/* the two halves lean toward each other so they read as one composition */
.pgh-split .pghs-a .pgh-frame { border-radius: 200px var(--r-md) var(--r-md) 200px; }
.pgh-split .pghs-b .pgh-frame { border-radius: var(--r-md) 200px 200px var(--r-md); margin-top: 34px; }
.pghs-tag { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 3;
  white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; background: rgba(12,16,22,.72); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); }
/* the hairline that splits the two lives */
.pghs-rule { position: absolute; left: 50%; top: -6%; bottom: -6%; width: 1px; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent); }
/* one image only? collapse to a single panel rather than showing a gap */
.pgh-split.is-single { grid-template-columns: 1fr; max-width: 400px; }
.pgh-split.is-single .pghs-b, .pgh-split.is-single .pghs-rule { display: none; }
.pgh-split.is-single .pghs-a .pgh-frame { border-radius: 230px 230px var(--r-lg) var(--r-lg); }

/* ---------------- SHOOTING hero · a rising line of clays ---------------- */
.pgh-arc { position: relative; }
/* The photo sits on the LEFT of this hero and the headline on the right, so the
   line of clays is anchored over the photo with only a small overhang. A wide
   right-hand overhang would run straight through the headline. */
.clay-arc { position: absolute; z-index: 3; inset: -15% -7% 2% 10%;
  pointer-events: none; color: rgba(240,83,28,.42); }
.clay-arc .arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clay-arc .arc-clay { position: absolute; width: var(--cs, 46px); height: var(--cs, 46px);
  left: var(--cx); top: var(--cy); transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 18px rgba(23,25,28,.28)); will-change: transform; }

/* ---------------- next-page cards · fill sweeps up on hover ---------------- */
.nxt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--s-2); }
.nxt-card { --nc: var(--clay); position: relative; display: block; overflow: hidden; isolation: isolate;
  padding: clamp(24px, 3vw, 36px); min-height: clamp(210px, 24vw, 250px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); will-change: transform;
  transition: box-shadow .45s var(--e-out), border-color .35s; }
/* the fill */
.nxt-card::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--nc), color-mix(in srgb, var(--nc) 62%, #17191C));
  transform: translateY(101%); transition: transform .62s cubic-bezier(.65,.05,0,1); }
.nxt-card:hover::before, .nxt-card:focus-visible::before { transform: translateY(0); }
.nxt-card:hover, .nxt-card:focus-visible { box-shadow: var(--sh-lg); border-color: transparent; }
.nxt-card > * { position: relative; }
.nxt-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--nc);
  transition: color .4s .06s; }
.nxt-card h3 { font-size: var(--fs-h3); margin-top: 10px; letter-spacing: -.02em; transition: color .4s .06s; }
.nxt-card p { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); max-width: 32ch;
  transition: color .4s .06s; }
.nxt-go { position: absolute; right: clamp(22px, 3vw, 34px); bottom: clamp(22px, 3vw, 32px);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nc); color: #fff; transition: transform .45s var(--e-out), background .4s; }
.nxt-card:hover .nxt-lbl, .nxt-card:hover h3, .nxt-card:hover p { color: #fff; }
.nxt-card:hover .nxt-go { transform: translate(6px, -6px) rotate(-8deg); background: rgba(255,255,255,.18); }
/* the floating clay that marks each card */
.nxt-clay { position: absolute; right: -14px; top: -14px; width: 96px; height: 96px; opacity: .16;
  pointer-events: none; transition: opacity .45s, transform .6s var(--e-out); }
.nxt-card:hover .nxt-clay { opacity: .5; transform: scale(1.12) rotate(12deg); }

/* ---------------- duo panels (dark + glass) ---------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  margin-top: clamp(34px, 4.5vw, 60px); align-items: stretch; }
.duo-dark { position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--s-2); padding: clamp(24px, 3.2vw, 40px);
  padding-bottom: clamp(74px, 9vw, 104px); border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(120% 100% at 82% 0%, #1E3557, #0B1220 62%); box-shadow: var(--sh-lg); }
.duo-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 6px 12px; border-radius: 999px; }
.duo-dark h3 { font-size: clamp(20px, 2.3vw, 29px); line-height: 1.22; letter-spacing: -.02em; }
.duo-dark h3 em { font-style: normal; color: #7FB7FF; }
.duo-dark p { color: rgba(255,255,255,.68); font-size: var(--fs-small); line-height: 1.65; max-width: 40ch; }
/* the row of clays along the bottom edge */
.duo-clays { position: absolute; left: 0; right: 0; bottom: -22px; display: flex;
  justify-content: center; gap: clamp(4px, .8vw, 12px); pointer-events: none; }
.duo-clays img { width: clamp(44px, 5.6vw, 68px); height: auto;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
.duo-glass { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 280px;
  background: linear-gradient(150deg, #8FC4F0, #C9DFF2 55%, #EAF2F8);
  box-shadow: var(--sh-lg); display: grid; place-items: stretch; padding: clamp(14px, 1.8vw, 22px); }
.duo-glass-in { border-radius: var(--r-md); padding: clamp(18px, 2.4vw, 28px);
  background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 14px; }
.duo-glass-top { font-size: 12px; font-weight: 600; color: #123; opacity: .8; }
.duo-glass-top b { font-weight: 700; }
.duo-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.5); }
.duo-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.duo-stat-lbl { font-size: 12.5px; color: #1B2A38; opacity: .78; }
.duo-stat-val { font-family: var(--f-disp); font-weight: 600; font-size: clamp(24px, 3vw, 38px);
  color: #0E1B27; letter-spacing: -.02em; }
.duo-stat-val i { font-style: normal; font-size: .42em; font-weight: 600; margin-left: 5px; opacity: .7; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .pgh-split { max-width: 420px; justify-self: center; }
  .nxt-go { position: static; margin-top: var(--s-3); }
  .clay-arc { inset: -11% -4% 2% 16%; }
  .clay-arc .arc-clay { width: calc(var(--cs, 46px) * .74); height: calc(var(--cs, 46px) * .74); }
}
@media (max-width: 560px) {
  .pgh-split { gap: 8px; }
  .pgh-split .pgh-frame { aspect-ratio: 3/4.2; }
  .pghs-tag { font-size: 9.5px; padding: 5px 9px; }
  .duo-clays img { width: 38px; }
}

/* ================================================================
   33 · STORY SECTIONS  (v6.3)
   Each subsection of Background / Shooting is a big card that
   arrives on scroll, with its own images and a sticky chapter rail.
   ================================================================ */

.sty-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start; }

/* ---------- sticky chapter rail ---------- */
.sty-rail { position: sticky; top: calc(var(--nav-h, 140px) + 24px); display: grid; gap: 2px;
  padding-right: 8px; }
.sty-rail-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: center; padding: 9px 0; font-size: 12.5px; line-height: 1.35; color: var(--muted);
  transition: color .35s; }
.sty-rail-item i { justify-self: center; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background .35s, transform .35s var(--e-out); }
.sty-rail-item b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .5; }
.sty-rail-item:hover { color: var(--ink); }
.sty-rail-item.is-on { color: var(--ink); font-weight: 600; }
.sty-rail-item.is-on i { background: var(--clay); transform: scale(1.55); }
.sty-rail::before { content: ""; position: absolute; left: 10.5px; top: 12px; bottom: 12px;
  width: 1px; background: var(--line); z-index: -1; }

/* ---------- the cards ---------- */
.sty-list { display: grid; gap: clamp(26px, 4vw, 54px); }
.sty-card { position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 48px); box-shadow: var(--sh-sm);
  transition: box-shadow .5s var(--e-out), border-color .4s; }
.sty-card:hover { box-shadow: var(--sh-md); }
/* big ghost numeral */
.sty-num { position: absolute; right: clamp(-6px, -0.5vw, 0px); top: -18px; z-index: 0;
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(88px, 12vw, 168px);
  line-height: 1; letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 1.2px rgba(var(--clay-rgb), .16); pointer-events: none; user-select: none; }
.sty-card > * { position: relative; z-index: 1; }

.sty-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-label);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.sty-title { font-family: var(--f-disp); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.08; margin-top: 10px; max-width: 18ch; }
.sty-lead { margin-top: var(--s-3); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55;
  color: var(--ink); max-width: 44ch; }

/* text + media side by side; text-only cards simply run wider */
.sty-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(22px, 3vw, 48px); align-items: start; margin-top: var(--s-4); }
.sty-card.is-textonly .sty-main { grid-template-columns: minmax(0, 1fr); }
.sty-card.is-textonly .sty-body { max-width: 72ch; }
.sty-card:nth-child(even) .sty-main { direction: rtl; }
.sty-card:nth-child(even) .sty-main > * { direction: ltr; }
.sty-body p { margin-top: var(--s-3); color: var(--muted); font-size: clamp(14.5px, 1.25vw, 16.5px);
  line-height: 1.75; max-width: 62ch; }
.sty-body p:first-child { margin-top: 0; }

/* ---------- the image cluster ---------- */
.sty-media { margin: 0; display: grid; gap: 12px; }
.sty-media .sty-img { position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--sand); box-shadow: var(--sh-sm); }
.sty-media .sty-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sty-media .sty-img figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px;
  font-size: 11.5px; line-height: 1.3; color: #fff; padding: 6px 10px; border-radius: 8px;
  background: rgba(12,16,22,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* one image = tall feature; two = stacked; three = feature + pair */
.sty-media[data-n="1"] .sty-img { aspect-ratio: 4/5; }
.sty-media[data-n="2"] .sty-img { aspect-ratio: 4/3; }
.sty-media[data-n="3"] { grid-template-columns: 1fr 1fr; }
.sty-media[data-n="3"] .sty-img:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; }
.sty-media[data-n="3"] .sty-img:not(:first-child) { aspect-ratio: 1; }
.sty-media[data-n="0"] { display: none; }

/* ---------- inline rich text inside paragraphs ---------- */
.sty-body a.rt-link, .bg-story a.rt-link, .sh-body a.rt-link {
  color: var(--clay); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s var(--e-out); }
.sty-body a.rt-link:hover { background-size: 0% 1px; }

/* ---------- the finale card (Andrea Benelli / closing chapter) ---------- */
.sty-card.is-finale { background: radial-gradient(120% 100% at 78% 0%, #1E3557, #0B1220 62%);
  border-color: transparent; color: #fff; }
.sty-card.is-finale .sty-title { color: #fff; }
.sty-card.is-finale .sty-lead { color: rgba(255,255,255,.86); }
.sty-card.is-finale .sty-body p { color: rgba(255,255,255,.66); }
.sty-card.is-finale .sty-kicker { color: #7FB7FF; }
.sty-card.is-finale .sty-num { -webkit-text-stroke-color: rgba(127,183,255,.20); }
.sty-card.is-finale .sty-media .sty-img { box-shadow: 0 18px 40px rgba(0,0,0,.45); }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .sty-wrap { grid-template-columns: minmax(0, 1fr); }
  .sty-rail { display: none; }
}
@media (max-width: 820px) {
  .sty-main { grid-template-columns: minmax(0, 1fr); }
  .sty-card:nth-child(even) .sty-main { direction: ltr; }
  .sty-media { order: -1; }                 /* picture first on a phone */
  .sty-media[data-n="3"] { grid-template-columns: 1fr 1fr; }
  .sty-title { max-width: none; }
  .sty-num { font-size: clamp(64px, 22vw, 110px); top: -10px; }
}
@media (max-width: 520px) {
  .sty-card { padding: 20px 16px; border-radius: var(--r-md); }
  .sty-media[data-n="3"] .sty-img:not(:first-child) { aspect-ratio: 4/3; }
}

/* ============================================================
   34 · ABOUT (home) — the intro as a premium reading column
   The client's words are fixed, so the work is all in the setting:
   a statement-sized opening line, then paragraphs hung off a thread
   of clay targets. No washed-out grey; the text carries full weight.
   ============================================================ */
.about-story { --ab-text: #2A2D33; }          /* deep warm ink, not the muted grey */

.about-story .ab-lead {
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(21px, 2.05vw, 29px);
  line-height: 1.38;
  letter-spacing: -.016em;
  color: var(--ink);
  text-wrap: balance;
}
.about-story .ab-lead::first-letter {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .78;
  float: left;
  margin: 8px 16px 0 0;
  color: var(--clay);
}
/* the opening line sits on its own, with a clay hairline closing it off */
.about-story .ab-lead::after {
  content: "";
  display: block;
  clear: both;
  width: 72px;
  height: 3px;
  margin-top: clamp(22px, 2.4vw, 34px);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--clay), rgba(var(--clay-rgb), 0));
}

/* ---- the thread: each paragraph is a station on the line ---- */
.ab-thread {
  position: relative;
  margin-top: clamp(26px, 2.8vw, 38px);
  display: grid;
  gap: clamp(22px, 2.4vw, 32px);
}
.ab-line {
  position: absolute;
  left: 17px;
  top: 10px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  transform-origin: top center;
  background: linear-gradient(180deg,
    rgba(var(--clay-rgb), .55), rgba(var(--ink-rgb), .16) 55%, rgba(var(--ink-rgb), 0));
}
.ab-block {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
  align-items: start;
}
.ab-mark {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--mc, var(--clay));
  background: var(--cream);
  border-radius: 50%;
}
.ab-mark svg { width: 27px; height: 27px; display: block; transition: transform .35s var(--e-out); }
.ab-block p {
  margin: 0;
  padding-top: 3px;
  color: var(--ab-text);
  font-size: clamp(16.5px, 1.34vw, 18.5px);
  line-height: 1.76;
  letter-spacing: -.003em;
  transition: color .3s ease;
}
/* the paragraph you are reading lifts out of the page */
.ab-block::before {
  content: "";
  position: absolute;
  left: -18px; right: -18px; top: -12px; bottom: -12px;
  border-radius: var(--r-md);
  background: rgba(var(--clay-rgb), .045);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.ab-block:hover::before { opacity: 1; }
.ab-block:hover p { color: var(--ink); }
.ab-block:hover .ab-mark svg { transform: scale(1.06); }

/* ============================================================
   35 · VISION (home) — two columns.
   Left: the label, then her portrait, held in place while you read.
   Right: the quote, then the three visions. The one you have scrolled
   to turns dark; the others wait as quiet outlines.
   ============================================================ */
.vis-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
  /* the section itself is still centred from the old centred layout; both
     columns are left-set now, and the eyebrow is inline-flex so a stray
     centre would push it off the portrait's edge */
  text-align: left;
}

/* ---- left ---- */
.vis-aside {
  position: sticky;
  top: calc(var(--nav-h, 140px) + 28px);
  align-self: start;
  min-width: 0;
}
.vis-eyebrow { margin-bottom: clamp(18px, 2.2vw, 28px); }
.vis-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: clamp(24px, 2.4vw, 38px);      /* the curved rectangle */
  overflow: hidden;
  box-shadow: 0 34px 76px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .16);
}
.vis-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a whisper of the section colour over the photo so it belongs to the green */
.vis-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--green-rgb), 0) 58%, rgba(var(--green-rgb), .34));
  pointer-events: none;
}

/* ---- right ---- */
.vis-main { min-width: 0; }
/* The quote and its support line run the full width of the right column, so
   their right edge lands on the same line as the cards underneath. A narrower
   measure would read fine on its own but leaves the block visibly short of
   the boxes below it. */
.vision .vis-main .vision-statement {
  margin: 0;
  max-width: none;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.9vw, 56px);
  line-height: 1.13;
  letter-spacing: -.015em;
  color: #fff;
  text-align: left;
}
/* the mask the quote's words rise out of */
.vision-statement .vq-line { overflow: hidden; }
.vision .vis-main .vision-support {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: none;
  text-align: left;
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(255, 255, 255, .8);
}

/* ---- the three visions, stacked under the quote ---- */
.vis-missions {
  display: grid;
  gap: clamp(12px, 1.3vw, 18px);
  margin-top: clamp(30px, 3.4vw, 46px);
}
.vis-missions .mission-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 1.8vw, 26px);
  padding: clamp(20px, 2.1vw, 28px) clamp(22px, 2.3vw, 30px);
  border-radius: var(--r-lg);
  background: transparent;
  border: 0;
  cursor: default;
  outline: none;
  transition: transform .6s var(--e-out);
}
/* two stacked layers: the dashed outline at rest, the dark face when live */
.vis-missions .mission-card::before,
.vis-missions .mission-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  transition: opacity .5s ease, transform .6s var(--e-out), box-shadow .6s var(--e-out);
}
.vis-missions .mission-card::before {
  border: 1.5px dashed rgba(255, 255, 255, .30);
  opacity: 1;
}
.vis-missions .mission-card::after {
  background: linear-gradient(150deg, #12161B, #0A0D11);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .40), 0 3px 12px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: scale(.985);
}
.vis-missions .mission-card > * { position: relative; z-index: 2; }

/* the clay target itself, photographed, sitting on the card */
.vis-missions .mc-clay {
  display: block;
  width: clamp(44px, 4.2vw, 56px);
  height: clamp(44px, 4.2vw, 56px);
  transition: transform .6s var(--e-out);
}
.vis-missions .mc-clay .clay-mark { width: 100%; height: 100%; display: block; }

.vis-missions .mc-body { display: block; min-width: 0; }
.vis-missions .mc-num {
  display: block;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .48);
  transition: color .45s ease;
}
.vis-missions .mission-card h3 {
  margin-top: 6px;
  font-size: clamp(18px, 1.62vw, 23px);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: #fff;
}
.vis-missions .mission-card p {
  margin-top: 8px;
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-small);
  line-height: 1.66;
  transition: color .45s ease;
}

/* ---- live: the card you have scrolled to (or are pointing at) ---- */
.vis-missions .mission-card.is-on { transform: translateX(6px) scale(1.02); z-index: 3; }
.vis-missions .mission-card.is-on::before { opacity: 0; }
.vis-missions .mission-card.is-on::after { opacity: 1; transform: scale(1); }
.vis-missions .mission-card.is-on .mc-clay { transform: rotate(-14deg) scale(1.12); }
.vis-missions .mission-card.is-on .mc-num { color: var(--mc); }
.vis-missions .mission-card.is-on p { color: rgba(255, 255, 255, .84); }
.vis-missions .mission-card:focus-visible { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 4px; }

@media (max-width: 1040px) {
  .vis-grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  .vis-aside { position: static; }
  .vis-portrait { max-width: 460px; aspect-ratio: 16 / 11; }
  .vision .vis-main .vision-statement { max-width: none; }
}
@media (max-width: 620px) {
  .vis-missions .mission-card { grid-template-columns: 1fr; gap: 14px; }
  .vis-missions .mission-card.is-on { transform: scale(1.012); }
  .vis-portrait { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .vis-missions .mission-card,
  .vis-missions .mission-card::before,
  .vis-missions .mission-card::after,
  .vis-missions .mc-clay { transition: none; }
}

@media (max-width: 620px) {
  .about-story .ab-lead::first-letter { font-size: 2.7em; margin: 6px 12px 0 0; }
  .ab-block { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
  .ab-mark { width: 30px; height: 30px; }
  .ab-mark svg { width: 23px; height: 23px; }
  .ab-line { left: 14px; }
  /* no bleed on phones: there is no hover there, and the outset would push
     the block wider than its column */
  .ab-block::before { left: 0; right: 0; }
}

/* ============================================================
   36 · BACKGROUND PAGE — hero
   Light, airy and typographic: a floating card on a gradient arc,
   an oversized headline, and the closing word held in a selection
   box the way a design tool would hold it.
   ============================================================ */
.bgh {
  position: relative;
  overflow: clip;
  background: #FCFBF9;
  padding: calc(var(--nav-h, 140px) + clamp(28px, 4vw, 60px)) 0 clamp(56px, 7vw, 110px);
  min-height: min(100vh, 900px);
  /* deliberately NOT flex-centred: when the content is taller than the box,
     centring overflows it equally top and bottom and the headline slides up
     behind the nav. Block flow keeps the top padding honoured. */
  display: block;
}
.bgh-arc {
  position: absolute;
  left: clamp(-60px, -2vw, -10px);
  top: -6%;
  width: clamp(230px, 23vw, 340px);
  height: 112%;
  pointer-events: none;
  /* behind everything: the card sits ON the curve, and on a phone the copy
     runs full width across where the curve would otherwise cross it */
  z-index: 0;
}
.bgh-arc svg { width: 100%; height: 100%; overflow: visible; }

/* the floating picture card */
.bgh-float {
  position: absolute;
  /* centred on the bow: the arc swings out to roughly 286/320 of its box */
  left: clamp(46px, 9.3vw, 150px);
  top: 50%;
  margin: 0;
  width: clamp(132px, 13vw, 186px);
  aspect-ratio: 4 / 5;
  transform: translateY(-50%) rotate(-4deg);
  border-radius: clamp(20px, 2vw, 30px);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(20, 16, 40, .18), 0 4px 14px rgba(20, 16, 40, .10);
  z-index: 2;
}
.bgh-float img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bgh .wrap { position: relative; z-index: 3; }

/* the row above the headline */
.bgh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 42px);
  padding-left: clamp(0px, 21vw, 300px);
}
.bgh-pill {
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .3s var(--e-out), box-shadow .3s ease, border-color .3s ease;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(20, 16, 40, .08);
  box-shadow: 0 12px 30px rgba(20, 16, 40, .08);
}
.bgh-pill:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(20, 16, 40, .14); border-color: rgba(var(--clay-rgb), .35); }
.bgh-pill:hover .bgh-pill-go { background: var(--clay); }
.bgh-pill:hover .bgh-pill-go::before { border-color: #fff; }
.bgh-pill:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.bgh-pill-n { display: grid; line-height: 1.1; }
.bgh-pill-n b { font-family: var(--f-disp); font-size: 17px; color: var(--clay); }
.bgh-pill-n span { font-size: 11px; color: var(--muted); }
.bgh-faces { display: inline-flex; }
.bgh-face {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(20, 16, 40, .12);
}
.bgh-face:first-child { margin-left: 0; }
.bgh-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgh-pill-go {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(var(--clay-rgb), .12);
  position: relative;
}
.bgh-pill-go::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--clay);
  border-top: 1.6px solid var(--clay);
  transform: translate(-60%, -50%) rotate(45deg);
}
.bgh-statement {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: right;
}

/* the headline */
.bgh-title {
  margin: 0;
  padding-left: clamp(0px, 21vw, 300px);
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(46px, 9.4vw, 148px);
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--ink);
  text-wrap: balance;
}
/* the closing word, held like a selection */
.bgh-mark {
  --mark: 1;
  position: relative;
  display: inline-block;
  padding: .02em .12em;
  color: var(--clay);
  background: rgba(var(--clay-rgb), calc(.12 * var(--mark)));
  outline: calc(1.5px * var(--mark)) solid rgba(var(--clay-rgb), calc(.75 * var(--mark)));
  outline-offset: 2px;
}
.bgh-h {
  position: absolute;
  width: 9px; height: 9px;
  background: #fff;
  border: 1.6px solid var(--clay);
  border-radius: 1px;
}
.bgh-h1 { left: -6px;  top: -6px; }
.bgh-h2 { right: -6px; top: -6px; }
.bgh-h3 { left: -6px;  bottom: -6px; }
.bgh-h4 { right: -6px; bottom: -6px; }

/* the row below */
.bgh-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 70px);
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 58px);
  padding-left: clamp(0px, 21vw, 300px);
}
.bgh-actions { display: inline-flex; align-items: center; gap: 12px; }
.bgh-cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .3s ease, transform .3s var(--e-out);
}
.bgh-cta:hover { background: var(--clay-2); transform: translateY(-2px); }
.bgh-play {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(var(--clay-rgb), .16);
  position: relative;
  transition: background .3s ease, transform .3s var(--e-out);
}
.bgh-play::before {
  content: "";
  position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 11px solid var(--clay);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.bgh-play:hover { background: rgba(var(--clay-rgb), .26); transform: scale(1.06); }
.bgh-lead {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.66;
  color: #3A3D45;
}

@media (max-width: 1040px) {
  .bgh { min-height: 0; padding-bottom: clamp(44px, 6vw, 70px); }
  .bgh-float {
    position: relative;
    z-index: 2;
    transform: rotate(-3deg);
    width: clamp(124px, 30vw, 168px);
    margin: 0 0 20px;
  }
  .bgh-top, .bgh-title, .bgh-bottom { padding-left: 0; }
  .bgh-statement { text-align: left; }
  /* only a sliver of the curve shows at the very edge, well clear of the copy */
  .bgh-arc { left: -132px; width: 190px; opacity: .4; }
}
@media (max-width: 620px) {
  .bgh-top { gap: 14px; }
  .bgh-bottom { align-items: flex-start; }
  .bgh-h { width: 7px; height: 7px; }
}

/* ============================================================
   37 · BACKGROUND PAGE — the four categories
   The left panel belongs to whichever chapter you are reading:
   scroll on and its colour, title and media fade to the next one;
   scroll back and the previous one returns. Light throughout, so
   her writing reads like a page rather than a screen.
   ============================================================ */
.bgx {
  position: relative;
  --acc: #D8410B;
  color: var(--ink);
  padding: clamp(60px, 8vw, 120px) 0 clamp(70px, 9vw, 140px);
  overflow: clip;
}
.bgx-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg, #FCF4EF, #F5E5DA);
  transition: background 1s cubic-bezier(.22, 1, .36, 1);
  z-index: 0;
}
.bgx .wrap { position: relative; z-index: 1; }
.bgx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
}

/* ---- left: the panel that swaps ---- */
.bgx-stage {
  position: sticky;
  top: calc(var(--nav-h, 140px) + 20px);
  align-self: start;
  min-width: 0;
  /* the whole panel has to stay on screen while you read past it, so it is
     capped to what is left below the nav and the media sizes itself to fit */
  max-height: calc(100svh - var(--nav-h, 140px) - 34px);
}
.bgx-cards { height: 100%; }
.bgx-cards { position: relative; }
.bgx-card {
  position: absolute;
  min-width: 0;
  max-width: 100%;
  inset: 0 0 auto 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1), visibility .7s;
  pointer-events: none;
}
.bgx-card.is-on {
  position: relative;
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.bgx-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .2em;
  color: var(--acc);
}
.bgx-title {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  /* The heading now carries the panel by itself, so it is set at display size
     rather than sub-head size. */
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: .98;
  letter-spacing: -.038em;
  color: var(--acc);
  text-wrap: balance;
  position: relative;
  z-index: 1;
}
/* the chapter number, oversized and faint, sitting behind the heading */
.bgx-ghost {
  position: absolute;
  top: -.28em;
  right: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(96px, 13vw, 210px);
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--acc);
  opacity: .085;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* a rule that grows under the heading as the chapter comes into view */
.bgx-title::after {
  content: "";
  display: block;
  width: clamp(48px, 6vw, 92px);
  height: 4px;
  margin-top: clamp(14px, 1.6vw, 22px);
  border-radius: 4px;
  background: var(--acc);
  transform-origin: left center;
  transform: scaleX(.35);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.bgx-card.is-on .bgx-title::after { transform: scaleX(1); }
.bgx-lead {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  max-width: 46ch;
  font-size: clamp(14.5px, 1.25vw, 17px);
  line-height: 1.6;
  color: #4A4E57;
}
.bgx-lead strong { color: var(--acc); font-weight: 600; }
.bgx-clay { width: 22px; height: 22px; flex: 0 0 auto; cursor: pointer; }

/* ---- two strips, running against each other ---- */
.bgx-rail {
  position: relative;
  /* the strip inside is thousands of pixels wide; without this the rail, the
     card and the whole column stretch to match it and the button runs off the
     side of the screen */
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(16px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  /* the tiles take their height from the screen, so a short laptop still sees
     the whole panel */
  --tile-h: clamp(76px, 12.6vh, 150px);
}
.bgx-strips {
  display: grid;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* the fade lives here, so the button below it is never washed out */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent);
}
.bgx-track { display: flex; gap: 10px; width: max-content; }
/* the pictures fit the rail as they are: hold them still, and drop the edge
   fade, which would otherwise dim real content that is not cut off */
.bgx-strips.is-still { -webkit-mask-image: none; mask-image: none; }
.bgx-strips.is-still .bgx-track { animation: none; }
/* measuring pass: never animate mid-measurement or the width read is wrong */
.bgx-strips.is-measuring .bgx-track { animation: none; }
.bgx-track--a { animation: bgx-drift-a 52s linear infinite; }
.bgx-track--b { animation: bgx-drift-b 46s linear infinite; }
@keyframes bgx-drift-a { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes bgx-drift-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.bgx-strips:hover .bgx-track,
.bgx-strips:focus-within .bgx-track { animation-play-state: paused; }

.bgx-tile {
  --ar: 1.34;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--tile-h) * 1.3);
  height: var(--tile-h);
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  background: rgba(23, 25, 28, .06);
  box-shadow: 0 8px 20px rgba(23, 25, 28, .10);
  transition: width .6s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease, transform .5s var(--e-out);
}
.bgx-tile img, .bgx-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgx-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 10px 8px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .74));
  opacity: 0;
  transition: opacity .45s ease;
}
/* it opens to its own proportions: a tall picture opens tall, a wide one wide */
.bgx-tile:hover, .bgx-tile:focus-visible {
  width: calc(var(--tile-h) * var(--ar));
  box-shadow: 0 16px 34px rgba(23, 25, 28, .20);
  transform: translateY(-2px);
}
.bgx-tile:hover figcaption, .bgx-tile:focus-visible figcaption { opacity: 1; }
.bgx-tile:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.bgx-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  transition: opacity .4s ease;
}
.bgx-play::before {
  content: "";
  position: absolute; left: 56%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 7px solid #12161B;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.bgx-tile:hover .bgx-play { opacity: 0; }

/* the way into the full gallery */
.bgx-all {
  align-self: flex-start;
  justify-self: start;
  max-width: 100%;
  margin-top: 2px;
  padding: 8px 16px;
  border: 1px solid rgba(23, 25, 28, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.bgx-all:hover { background: var(--acc); border-color: var(--acc); color: #fff; }

/* ---- right: the reading column ---- */
.bgx-flow {
  min-width: 0;
  display: grid;
  gap: clamp(48px, 7vw, 110px);
  /* runway so the sticky panel stays put while the last chapter is read,
     instead of sliding away with the end of the section */
  padding-bottom: clamp(60px, 26vh, 280px);
}
.bgx-chapter { min-width: 0; scroll-margin-top: calc(var(--nav-h, 140px) + 40px); }
/* The chapter's opening sentence, moved here from the panel on the left. It is
   set larger than the body and hangs off a rule in the chapter's own colour, so
   the reader gets a clear way in before the text settles to its normal size. */
.bgx-chapter .bgx-open {
  position: relative;
  margin: 0 0 clamp(20px, 2.2vw, 32px);
  padding-left: clamp(18px, 2vw, 28px);
  font-size: clamp(18px, 1.72vw, 23px);
  line-height: 1.52;
  font-weight: 500;
  letter-spacing: -.012em;
  color: #23262C;
  text-wrap: pretty;
}
.bgx-chapter .bgx-open::before {
  content: "";
  position: absolute;
  left: 0; top: .32em; bottom: .32em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--acc), rgba(0, 0, 0, 0));
}
.bgx-chapter .bgx-open strong { color: var(--acc); font-weight: 700; }
.bgx-chapter .bgx-open .rt-link { color: var(--acc); }
.bgx-chapter p {
  margin: 0 0 clamp(12px, 1.3vw, 17px);
  font-size: clamp(15.5px, 1.35vw, 17.5px);
  line-height: 1.78;
  color: #5A5F68;
  transition: color .7s ease;
}
.bgx-chapter.is-on p { color: #2A2D33; }
.bgx-chapter p:last-child { margin-bottom: 0; }
.bgx-chapter strong { color: var(--acc); font-weight: 600; }
.bgx-chapter em { font-style: italic; }
.bgx-chapter .rt-link { color: var(--acc); }

/* selecting her writing highlights it in the chapter's own colour */
.bgx ::selection { background: var(--acc); color: #fff; }
.bgx ::-moz-selection { background: var(--acc); color: #fff; }

@media (max-width: 1040px) {
  .bgx-grid { grid-template-columns: 1fr; gap: 0; }
  .bgx-rail { --tile-h: clamp(118px, 31vw, 175px); }
  .bgx-flow { gap: clamp(44px, 7vw, 68px); }
}

/* ---- stacked: each chapter carries its own panel and its own pictures ----
   The panel is moved inside its chapter by the script, so every chapter is
   self-contained and the pictures are always the ones you are reading about. */
.bgx.is-stacked .bgx-stage { display: none; }
.bgx.is-stacked .bgx-flow { padding-bottom: 0; }
.bgx.is-stacked .bgx-card,
.bgx.is-stacked .bgx-card.is-on {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  display: block;
  max-height: none;
  margin-bottom: clamp(18px, 3vw, 26px);
}
.bgx.is-stacked .bgx-chapter { scroll-margin-top: calc(var(--nav-h, 140px) + 20px); }
/* every chapter shows its own colour here, not just the one in view */
.bgx.is-stacked .bgx-chapter p { color: #4A4E57; }
.bgx.is-stacked .bgx-chapter.is-on p { color: #2A2D33; }
@media (max-width: 620px) {
  .bgx-rail { --tile-h: clamp(112px, 30vw, 150px); gap: 10px; }
  .bgx-strips { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-track { animation: none; }
  .bgx-card, .bgx-wash, .bgx-tile { transition: none; }
}

/* ============================================================
   38 · BACKGROUND PAGE — one chapter's pictures, opened out
   ============================================================ */
/* above the slideshow, so a picture opened from a slide lands on top of it
   rather than behind it */
.bgg { position: fixed; inset: 0; z-index: 360; }
.bgg[hidden] { display: none; }
.bgg-back {
  position: absolute; inset: 0;
  background: rgba(16, 14, 12, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}
.bgg.is-open .bgg-back { opacity: 1; }
.bgg-panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .4);
  opacity: 0;
  overflow: hidden;
  transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}
.bgg.is-open .bgg-panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bgg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line);
}
.bgg-num { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--acc, var(--clay)); }
.bgg-head h3 { margin: 4px 0 0; font-size: clamp(19px, 2vw, 26px); letter-spacing: -.02em; }
.bgg-close {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s var(--e-out);
}
.bgg-close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.bgg-grid {
  padding: clamp(18px, 2.4vw, 28px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.bgg-item { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(23, 25, 28, .10); }
.bgg-item img, .bgg-item video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bgg-item figcaption { padding: 10px 12px 12px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 620px) {
  .bgg-panel { width: 94vw; max-height: 88vh; }
  .bgg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================
   39 · SHOOTING PAGE — hero
   A full-bleed photograph under a clay-coloured wash, the name of
   the discipline set very large, and the eight chapters stepped
   along the foot of the screen.
   ============================================================ */
.shh {
  /* ONE column definition, shared by the photograph layer and the words
     layer. Change it here and both move together. */
  --shh-cols: minmax(0, 1fr) clamp(196px, 27vw, 410px) minmax(0, 1fr);
  --shh-gap: clamp(14px, 2.1vw, 36px);
  position: relative;
  overflow: clip;
  min-height: min(100svh, 1000px);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h, 140px) + clamp(12px, 2.2vh, 32px)) 0 clamp(40px, 6vh, 84px);
  color: #fff;
  /* the clay burst: brightest up and to the left, falling away to near-black
     at the foot so the words and the numbers always hold */
  background:
    linear-gradient(180deg, rgba(20, 6, 1, 0) 34%, rgba(20, 6, 1, .55) 74%, rgba(12, 4, 1, .95) 100%),
    radial-gradient(118% 88% at 27% 12%, #FF8B3D 0%, #F4601C 27%, #DC400F 50%, #99270A 76%, #3F0E02 100%);
}

/* ---- the photograph, standing in the middle column ---- */
/* The photograph starts at the FOOT of the navigation bar, not at the top of
   the section. Pinned to the top it ran underneath the fixed nav, and the part
   being covered was the top of the picture, which for a photograph of Hind is
   her head. --nav-h is measured and published by chrome.js, so this follows the
   nav if it ever changes height. */
.shh-stage {
  position: absolute;
  inset: var(--nav-h, 140px) 0 0;
  z-index: 1;
  pointer-events: none;
}
.shh-stage-in {
  height: 100%;
  display: grid;
  grid-template-columns: var(--shh-cols);
  gap: var(--shh-gap);
}
.shh-photo { grid-column: 2; grid-row: 1; position: relative; height: 100%; margin: 0; }
/* She dissolves into the dark foot instead of stopping on a hard edge, which
   is what lets any photograph sit in the burst rather than on top of it. */
.shh-photo img,
.shh-photo::after {
  /* TWO masks intersecting: one fades her into the dark foot, one softens the
     left and right seams so a plain rectangular photograph emerges out of the
     burst instead of sitting on it as a visible box. Only the outer eighth of
     each side is touched, so a centred subject is never eaten. */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .72) 77%, rgba(0, 0, 0, .16) 93%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .72) 77%, rgba(0, 0, 0, .16) 93%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.shh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  display: block;
}
/* a warm pass over the picture so whatever photograph she gives us reads as
   lit by the same light as the background */
.shh-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg, rgba(240, 83, 28, .34), rgba(255, 139, 61, .10) 46%, rgba(20, 6, 1, .32));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ---- the wash that deepens the foot over BOTH the burst and the photo ---- */
.shh-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(78% 58% at 50% 106%, rgba(10, 3, 0, .90), rgba(10, 3, 0, 0) 72%),
    linear-gradient(180deg, rgba(10, 3, 0, 0) 54%, rgba(10, 3, 0, .50) 86%, rgba(8, 2, 0, .88) 100%);
}

/* ---- the words ---- */
.shh-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.shh-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--shh-cols);
  gap: var(--shh-gap);
  /* align-CONTENT, not align-items. The implicit row is content-height, so
     centring the items inside it changes nothing; what has to be centred is
     the row itself within the space the flex column hands over. */
  align-content: center;
  align-items: center;
}
.shh-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.shh-aside { grid-column: 3; grid-row: 1; min-width: 0; }

.shh-kicker {
  display: block;
  margin: 0 0 clamp(8px, 1.1vw, 15px);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.shh-title {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(40px, 7.2vw, 114px);
  line-height: .87;
  letter-spacing: -.05em;
  color: #fff;
  /* never hyphenate or re-wrap a headline: the line breaks are authored with
     "|" in the admin panel, so the words land where they were meant to */
  hyphens: none;
  overflow-wrap: normal;
}
.shh-tl { display: block; }
.shh-mark { color: #FFD9C7; }

.shh-aside { padding-top: clamp(16px, 12vh, 122px); }
.shh-statement {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(17px, 1.95vw, 29px);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: #fff;
  max-width: 18ch;
}
.shh-lead {
  margin: clamp(9px, 1.1vw, 15px) 0 0;
  max-width: 34ch;
  font-size: clamp(12.5px, 1.02vw, 15px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .74);
}

/* ---- phones: one column, the photograph behind the words ---- */
@media (max-width: 900px) {
  .shh {
    --shh-cols: minmax(0, 1fr);
    min-height: auto;
    padding: calc(var(--nav-h, 125px) + 16px) 0 30px;
  }
  .shh-photo { grid-column: 1; }
  .shh-photo img {
    object-position: center 8%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .3) 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .3) 88%, transparent 100%);
  }
  /* it is a backdrop here, not a cut-out, so it is pushed well back */
  .shh-photo::after {
    background: linear-gradient(180deg, rgba(20, 6, 1, .40), rgba(20, 6, 1, .70));
    mix-blend-mode: normal;
  }
  .shh-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5.4vw, 32px);
    align-items: start;
  }
  .shh-copy, .shh-aside { grid-column: 1; grid-row: auto; }
  .shh-aside { padding-top: 0; }
  .shh-statement { max-width: 24ch; }
  /* it sits over the photograph here, so it needs more of the white */
  .shh-lead { max-width: 46ch; color: rgba(255, 255, 255, .88); }
}

.shx {
  position: relative;
  background: linear-gradient(180deg, #FAF7F1 0%, #F3EEE4 100%);
  overflow: clip;
}
.shx-viewport {
  height: 100svh;
  /* The nav steps aside for this section (see body.shx-pinned below) rather
     than the run giving up its height to it, which is what left short screens
     with no room for a whole chapter. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 44%;
}
.shx-track {
  display: flex;
  height: 100%;
  align-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.shx-panel {
  flex: 0 0 auto;
  width: min(76vw, 1040px);
  padding: 0 clamp(14px, 1.8vw, 30px);
  display: flex;
  align-items: center;
  height: 100%;
  transform-style: preserve-3d;
}

/* ---- the card ---- */
.shx-card {
  position: relative;
  width: 100%;
  /* an opened picture is allowed to reach past the card edge */
  overflow: visible;
  /* deliberately uncapped: the script decides whether there is room for the
     sideways run by measuring the tallest chapter, so a card never has to clip */
  display: flex;
  flex-direction: column;
  padding: calc(clamp(18px, 2vw, 30px) * var(--fit, 1))
           calc(clamp(20px, 2.4vw, 36px) * var(--fit, 1))
           calc(clamp(14px, 1.6vw, 22px) * var(--fit, 1));
  border-radius: clamp(20px, 2.2vw, 30px);
  background: linear-gradient(158deg, rgba(var(--crgb), .14) 0%, rgba(var(--crgb), .05) 42%, #FFFFFF 100%);
  border: 1px solid rgba(var(--crgb), .26);
  box-shadow: 0 34px 74px rgba(var(--crgb), .18), 0 6px 18px rgba(23, 25, 28, .08);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
/* a clay edge down the left, so each card reads as its own chapter */
.shx-card::before {
  content: "";
  position: absolute;
  left: 0; top: clamp(20px, 2.6vw, 36px); bottom: clamp(20px, 2.6vw, 36px);
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--c), rgba(var(--crgb), 0));
}
/* the clay that names this colour */
.shx-clay {
  position: absolute;
  top: clamp(16px, 2vw, 26px);
  right: clamp(18px, 2.2vw, 32px);
  width: 30px; height: 30px;
}

.shx-n {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: .22em;
  color: var(--c);
}
.shx-title {
  margin: clamp(8px, 1vw, 14px) 0 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(23px, 2.6vw, 40px) * var(--fit, 1));
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
  min-height: 1.05em;
  flex: 0 0 auto;
  text-wrap: balance;
}
/* the caret, showing only while the heading is being written */
.shx-caret {
  display: none;
  width: .06em;
  height: .82em;
  margin-left: .06em;
  background: var(--c);
  vertical-align: -.06em;
}
.shx-panel.is-writing .shx-caret { display: inline-block; animation: shx-blink .55s steps(1) infinite; }
@keyframes shx-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.shx-lead {
  margin: clamp(9px, 1.1vw, 14px) 0 0;
  max-width: 64ch;
  font-size: calc(clamp(13px, 1.05vw, 15px) * var(--fit, 1));
  line-height: 1.5;
  color: #2E3138;
  flex: 0 0 auto;
}
.shx-lead strong, .shx-body strong { color: var(--c); font-weight: 600; }
.shx-body {
  margin-top: clamp(8px, 1vw, 13px);
  /* The column count comes from the chapter, not from the stylesheet: the
     script counts the words and asks for three only when the text is long
     enough to need them. Two is the rest of the time. */
  columns: var(--cols, 3);
  column-gap: clamp(16px, 1.9vw, 30px);
  column-rule: 1px solid rgba(var(--crgb), .16);
  flex: 0 0 auto;
}
/* A shorter chapter hands its spare height to the photographs, so the card
   fills out instead of trailing off into white space under the last line. */
.shx-panel.is-roomy .shx-lead {
  max-width: 72ch;
  font-size: calc(clamp(14px, 1.18vw, 17px) * var(--fit, 1));
  line-height: 1.55;
}
.shx-panel.is-roomy .shx-body p {
  font-size: calc(clamp(12.6px, .95vw, 14px) * var(--fit, 1));
  line-height: 1.62;
  margin-bottom: 10px;
}
.shx-panel.is-roomy .shx-frame {
  --fw: calc(clamp(112px, 11.4vw, 178px) * var(--fit, 1));
}
.shx-panel.is-roomy .shx-fan { gap: clamp(14px, 1.6vw, 24px); }
.shx-body p {
  margin: 0 0 8px;
  font-size: calc(clamp(11.9px, .87vw, 12.9px) * var(--fit, 1));
  line-height: 1.58;
  color: #5C616A;
  break-inside: avoid;
}
.shx-body p:last-child { margin-bottom: 0; }

/* ---- two or three pictures, fanned on a curve ---- */
.shx-fan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: calc(clamp(12px, 1.5vw, 20px) * var(--fit, 1));
  flex: 0 0 auto;
  /* left-aligned on purpose: centred, growing one picture drags its own left
     edge out from under the cursor, which makes the hover flicker on and off */
  justify-content: flex-start;
  /* The outer pictures are pushed down the curve by a transform, which takes
     no room in the layout, so they hung over whatever followed. This gives
     that dip somewhere to live. */
  padding-bottom: calc(30px * var(--fit, 1));
  /* Flat, not preserve-3d. Each frame carries its own perspective() so the
     curve still renders, but a shared 3D space made the outer frames coplanar
     with this container and hit-testing landed on the container instead of the
     picture, which is why only the middle one could be hovered. */
  transform-style: flat;
}
.shx-frame {
  --t: 0; --rot: 0deg; --ry: 0deg; --dip: 0px; --z: 0px;
  position: relative;
  flex: 0 0 auto;
  --fw: calc(clamp(84px, 8.2vw, 126px) * var(--fit, 1));
  width: var(--fw);
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  /* no fill: the picture covers the whole box, and a tint here showed through
     as a grey panel wherever a rotated frame did not */
  background: transparent;
  box-shadow: 0 18px 36px rgba(23, 25, 28, .18);
  transform: perspective(700px) rotateY(var(--ry)) rotate(var(--rot)) translateY(var(--dip)) translateZ(var(--z));
  /* width, not scale: growing the box re-renders the photograph at the bigger
     size, where scaling would only stretch the pixels it already had */
  /* above the fan, so every picture is reachable, not just the front one */
  z-index: 1;
  transition: width .85s cubic-bezier(.16, 1, .3, 1),
              transform .85s cubic-bezier(.16, 1, .3, 1),
              box-shadow .7s ease;
  will-change: width, transform;
}
/* a line of the chapter colour travelling across each picture */
.shx-sheen {
  position: absolute;
  inset: -25% -60%;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(var(--crgb), .34) 46%,
    rgba(255, 255, 255, .85) 50%,
    rgba(var(--crgb), .34) 54%,
    transparent 62%);
  transform: translateX(-72%);
  animation: shx-sheen 4.8s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: calc(var(--k, 0) * 1.2s);
  mix-blend-mode: screen;
}
@keyframes shx-sheen {
  0%        { transform: translateX(-72%); opacity: 0; }
  10%       { opacity: 1; }
  56%       { transform: translateX(72%); opacity: 1; }
  66%, 100% { transform: translateX(72%); opacity: 0; }
}
.shx-frame img, .shx-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shx-frame figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 10px 8px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity .4s ease;
}
/* One picture opens out to two and a half times its size. The others are left
   exactly where they are: shrinking them as well made the whole row reflow
   under the pointer, which is what read as vibration. */
.shx-frame:hover, .shx-frame:focus-visible, .shx-frame.is-hover {
  width: calc(var(--fw) * 2.5);
  /* !important because the chapter's arrival tween leaves a transform written
     straight onto this element, and an inline style beats a stylesheet rule.
     Without it the picture widened but never straightened or lifted, which is
     what read as "some pictures do not enlarge": the ones whose chapter had
     been animated were the ones that stopped working. */
  transform: perspective(700px) rotateY(0deg) rotate(0deg) translateY(-12px) translateZ(90px) !important;
  box-shadow: 0 34px 66px rgba(23, 25, 28, .3);
  z-index: 5;
}
.shx-frame:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.shx-frame:hover figcaption, .shx-frame:focus-visible figcaption,
.shx-frame.is-hover figcaption { opacity: 1; }
.shx-frame:hover .shx-sheen, .shx-frame:focus-visible .shx-sheen,
.shx-frame.is-hover .shx-sheen { opacity: 0; animation-play-state: paused; }

/* the way into every picture from this chapter */
.shx-all {
  /* The pictures above are z-index 1, rise to 5 under the pointer, and dip
     below their own box on the curve, so they were lying across this button:
     a click landed on a photograph and the button appeared dead. It is lifted
     clear of both states, and the fan reserves the height of the dip.
     6, not 2: the chapter's arrival tween starts the pictures 44px lower than
     they end, so for about a second on every visit they cover this button
     even when they are at rest afterwards. A control has to be reachable the
     whole time, not once the animation has finished. */
  position: relative;
  z-index: 6;
  align-self: flex-start;
  flex: 0 0 auto;
  margin-top: clamp(9px, 1.1vw, 14px);
  padding: 7px 15px;
  border: 1px solid rgba(var(--crgb), .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.shx-all:hover { background: var(--c); border-color: var(--c); color: #fff; }

/* ---- where you are ---- */
.shx-dots {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(16px, 2.2vh, 28px) + 52px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}
.shx-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(23, 25, 28, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--e-out), color .3s var(--e-out),
              border-color .3s var(--e-out), opacity .3s var(--e-out),
              transform .3s var(--e-out);
}
.shx-arrow svg { width: 40%; height: 40%; display: block; }
.shx-arrow--prev { left: clamp(10px, 2vw, 26px); }
.shx-arrow--next { right: clamp(10px, 2vw, 26px); }
.shx-arrow:hover, .shx-arrow:focus-visible {
  background: var(--clay); color: #fff; border-color: var(--clay);
}
.shx-arrow--prev:hover, .shx-arrow--prev:focus-visible { transform: translateY(-50%) translateX(-3px); }
.shx-arrow--next:hover, .shx-arrow--next:focus-visible { transform: translateY(-50%) translateX(3px); }
.shx-arrow[disabled] { opacity: .28; pointer-events: none; }
/* on the last chapter it points down instead: the page carries on below */
.shx-arrow--next.is-onward svg { transform: rotate(90deg); }
.shx-arrow--next.is-onward { background: var(--clay); color: #fff; border-color: var(--clay); }

.shx-dot { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; }
.shx-dot i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(23, 25, 28, .2);
  transition: background .35s ease, transform .45s var(--e-out);
}
.shx-dot:hover i { background: rgba(23, 25, 28, .42); }
.shx-dot.is-on i { background: var(--clay); transform: scale(1.6); }

.shx-hint {
  position: absolute;
  left: clamp(18px, 3vw, 42px);
  bottom: clamp(20px, 2.8vh, 36px);
  z-index: 4;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity .5s ease;
}
.shx-hint.is-done { opacity: 0; }

/* The sideways run needs a tall window as well as a wide one. Below either
   threshold the chapters stack instead, where nothing has to fit a fixed
   height and not a word of hers can be cut. */
@media (max-width: 900px) {
  /* stacked: no pinning, each card arrives in turn */
  .shx-viewport { height: auto; display: block; overflow: visible; perspective: none; }
  .shx-track { display: block; height: auto; transform: none !important; }
  .shx-panel {
    width: auto;
    height: auto;
    display: block;
    padding: clamp(12px, 3vw, 20px) 0;
  }
  .shx { padding: clamp(26px, 6vw, 46px) 0 clamp(56px, 9vw, 86px); }
  .shx-viewport { padding-top: 0; }
  .shx-card { max-height: none; padding: clamp(22px, 5vw, 30px) clamp(18px, 4.6vw, 26px); }
  .shx-body { overflow: visible; }
  .shx-body { columns: 1; max-height: none; }
  /* The desktop sizes are tied to the viewport width, which on a phone lands
     at the bottom of every clamp and left the chapter at 12.6px. In a single
     column there is room to read properly. */
  .shx-body p { font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
  .shx-panel.is-roomy .shx-body p { font-size: 15px; line-height: 1.65; }
  .shx-lead, .shx-panel.is-roomy .shx-lead { font-size: 16.5px; line-height: 1.55; }
  /* On a phone the pictures sit in a plain two-column grid: nothing scrolls
     sideways, so nothing is ever half cut off at the edge of the screen. */
  .shx-fan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.4vw, 12px);
    align-items: start;
    overflow: visible;
    padding-bottom: 0;
  }
  .shx-frame {
    --rot: 0deg; --ry: 0deg; --dip: 0px; --z: 0px;
    width: auto;
    /* The tilt is written INLINE by the renderer, and an inline transform beats
       an ordinary stylesheet one. Without !important the pictures stay tilted in
       3D here, which is what left the grey wedges beside them and pushed them
       past the edge of the strip. */
    transform: none !important;
  }
  .shx-fan:hover .shx-frame { width: auto; }
  .shx-frame:hover, .shx-frame:focus-visible, .shx-frame.is-hover { width: auto; transform: translateY(-4px) !important; }
  /* the travelling sheen is a desktop flourish; on a phone it only muddies the
     picture it is sitting on */
  .shx-sheen { display: none; }
  .shx-dots, .shx-hint, .shx-arrow { display: none; }
}

/* The same stacked layout, switched on by the script when the tallest chapter
   will not fit the screen. Kept in step with the media query above. */
.shx.is-stacked .shx-viewport { height: auto; display: block; overflow: visible; perspective: none; padding-top: 0; }
.shx.is-stacked .shx-track { display: block; height: auto; transform: none !important; }
.shx.is-stacked .shx-panel { width: auto; height: auto; display: block; padding: clamp(12px, 3vw, 20px) 0; }
.shx.is-stacked { padding: clamp(26px, 6vw, 46px) 0 clamp(56px, 9vw, 86px); }
.shx.is-stacked .shx-card { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); }
/* Guarded to the desktop width on purpose. This rule is more specific than the
   `columns: 1` inside the phone media query above, so without the guard it won
   there too and a 375px screen was set in two columns about twenty characters
   wide. The script adds .is-stacked on phones as well, so the clash was real
   rather than theoretical. */
@media (min-width: 901px) {
  .shx.is-stacked .shx-body { columns: var(--cols, 2); }
}
.shx.is-stacked .shx-fan { justify-content: flex-start; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.shx.is-stacked .shx-fan::-webkit-scrollbar { display: none; }
/* flat in the stacked layout: with the curve zeroed at the source, GSAP has no
   rotation to bake into its inline transform, so the strip cannot clip a corner */
.shx.is-stacked .shx-frame { --rot: 0deg; --ry: 0deg; --dip: 0px; --z: 0px; }
.shx.is-stacked .shx-fan { padding: 6px 0 14px; }
.shx.is-stacked .shx-dots, .shx.is-stacked .shx-hint,
.shx.is-stacked .shx-arrow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .shx-frame, .shx-dot i { transition: none; }
  .shx-panel.is-writing .shx-caret { animation: none; }
  .shx-sheen { animation: none; opacity: 0; }
}


/* ============================================================
   41 · SHOOTING — the whole story, one chapter to a screen
   Full screen, nothing constrained: every word readable however
   short the window is.
   ============================================================ */
.shx-show {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(16px, 2.2vh, 28px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px 9px 13px;
  border: 1px solid rgba(23, 25, 28, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(23, 25, 28, .1);
  transition: background .3s ease, color .3s ease, transform .3s var(--e-out), border-color .3s ease;
}
.shx-show:hover { background: var(--clay); border-color: var(--clay); color: #fff; transform: translateX(-50%) translateY(-2px); }
.shx-show-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(var(--clay-rgb), .16);
  position: relative;
  flex: 0 0 auto;
  transition: background .3s ease;
}
.shx-show-ico::before {
  content: "";
  position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 7px solid var(--clay);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.shx-show:hover .shx-show-ico { background: rgba(255, 255, 255, .26); }
.shx-show:hover .shx-show-ico::before { border-left-color: #fff; }

.shs {
  position: fixed;
  inset: 0;
  /* above the nav (240), the grid overlay (250) and the assistant (290): a
     full-screen reading view should have nothing floating over it */
  z-index: 340;
  --c: #F0531C;
  background: var(--cream);
}
.shs[hidden] { display: none; }
.shs-stage { position: absolute; inset: 0; }
.shs.is-open { animation: shs-in .34s ease both; }
@keyframes shs-in { from { opacity: 0; } to { opacity: 1; } }

.shs-slide {
  position: absolute;
  inset: 0;
  display: none;
  /* nothing scrolls here: shsFit() scales the slide until it fits */
  overflow: hidden;
  /* the same treatment the cards get, at full-screen scale */
  background:
    radial-gradient(80% 60% at 14% 0%, rgba(var(--crgb), .20) 0%, rgba(var(--crgb), 0) 62%),
    linear-gradient(158deg, rgba(var(--crgb), .13) 0%, rgba(var(--crgb), .05) 44%, #FFFFFF 100%);
}
.shs-slide.is-on { display: block; }
.shs-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  /* minmax(0, 1fr), not auto: an auto row grows to fit whatever is in it, so
     "height: 100%" on the picture column resolved against a row that had
     already stretched to the pictures. Capping the row is what lets the
     pictures divide the space instead of dictating it. */
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 60px);
  /* stretch, not center: the picture column needs a definite height for its
     rows to divide, otherwise the images fall back to their natural size and
     no amount of scaling the words will bring the slide back inside the screen */
  align-items: stretch;
  padding: clamp(36px, 5.4vh, 68px) clamp(24px, 4.6vw, 74px) clamp(84px, 11.5vh, 116px);
  max-width: 1500px;
  margin-inline: auto;
}
.shs-words { min-width: 0; align-self: center; min-height: 0; }
.shs-n {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: calc(clamp(12px, 1.1vw, 15px) * var(--sfit, 1));
  letter-spacing: .24em;
  color: var(--c);
}
.shs-title {
  margin: calc(clamp(10px, 1.3vw, 18px) * var(--sfit, 1)) 0 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(26px, min(3.6vw, 6.4vh), 56px) * var(--sfit, 1));
  line-height: 1.03;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
.shs-lead {
  margin: calc(clamp(14px, 1.8vw, 24px) * var(--sfit, 1)) 0 0;
  max-width: 62ch;
  font-size: calc(clamp(14px, min(1.25vw, 2.35vh), 18px) * var(--sfit, 1));
  line-height: 1.5;
  color: #2A2D33;
}
.shs-body {
  /* one continuous column: her paragraphs read straight down, never split
     across columns */
  margin-top: calc(clamp(12px, 1.6vw, 20px) * var(--sfit, 1));
  max-width: 74ch;
  /* deliberately NOT "columns: 1": one column still creates a multi-column
     fragmentation context, whose trailing box sat 26px past the last line and
     made every fit measurement read as an overflow that shrinking never
     cleared. Plain block flow measures honestly. */
}
.shs-body p {
  margin: 0 0 calc(10px * var(--sfit, 1));
  font-size: calc(clamp(11.6px, min(.95vw, 1.85vh), 14.6px) * var(--sfit, 1));
  line-height: 1.62;
  color: #5C616A;
}
.shs-body p:last-child { margin-bottom: 0; }
.shs-lead strong, .shs-body strong { color: var(--c); font-weight: 600; }
.shs ::selection { background: var(--c); color: #fff; }

/* a strip along the foot of the slide, sized from the height of the window so
   it never crowds the words above it */
.shs-pics {
  display: grid;
  gap: clamp(9px, 1vw, 14px);
  min-width: 0;
  height: 100%;
  max-height: 100%;
  align-content: center;
  grid-auto-rows: minmax(0, 1fr);
}
.shs-pics[data-n="3"], .shs-pics[data-n="4"],
.shs-pics[data-n="5"], .shs-pics[data-n="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shs-pic {
  margin: 0;
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  box-shadow: 0 18px 40px rgba(23, 25, 28, .18);
  transition: transform .5s var(--e-out), box-shadow .5s ease;
}
.shs-pic img, .shs-pic video { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.shs-pic:hover, .shs-pic:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px rgba(23, 25, 28, .28);
}
.shs-pic:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.shs-pic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 8px;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .76));
  opacity: 0;
  transition: opacity .4s ease;
}
.shs-pic:hover figcaption, .shs-pic:focus-visible figcaption { opacity: 1; }

/* the bar along the foot */
.shs-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  /* the dots above, the controls beneath them, both centred; the count sits
     out of the way on the left */
  /* dots and controls on one centred row: stacked, the bar was tall enough to
     tuck the pictures underneath it */
  /* three zones: the count on the left, the controls dead centre, the chapter
     dots on the right. The controls are placed absolutely so nothing beside
     them can shift them off centre. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 28px);
  min-height: calc(42px + clamp(24px, 3.4vh, 38px));
  padding: clamp(12px, 1.6vh, 18px) clamp(20px, 4vw, 60px) clamp(13px, 1.8vh, 20px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .94) 40%);
}
.shs-count {
  position: absolute;
  left: clamp(20px, 4vw, 60px);
  bottom: clamp(22px, 3vh, 34px);
  font-family: var(--f-disp);
  font-weight: 700;
  color: var(--ink);
}
.shs-count b { font-size: 20px; color: var(--c); }
.shs-count i { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 4px; }
.shs-dots { display: flex; gap: 8px; justify-content: center; }
.shs-dot { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; }
.shs-dot i { width: 7px; height: 7px; border-radius: 50%; background: rgba(23, 25, 28, .22); transition: background .3s ease, transform .4s var(--e-out); }
.shs-dot:hover i { background: rgba(23, 25, 28, .48); }
.shs-dot.is-on i { background: var(--c); transform: scale(1.6); }
.shs-tools {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  justify-content: center;
}
.shs-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(23, 25, 28, .16);
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--e-out);
}
.shs-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.shs-close:hover { background: var(--c); border-color: var(--c); transform: rotate(90deg); }
.shs-play-ico { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; margin-left: 3px; }
#shsPlay.is-playing .shs-play-ico {
  width: 10px; height: 12px;
  border: 0;
  margin-left: 0;
  background: linear-gradient(90deg, currentColor 0 3.5px, transparent 3.5px 6.5px, currentColor 6.5px 10px);
}

@media (max-width: 900px) {
  .shs-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 100%;
    align-items: start;
    padding-bottom: clamp(112px, 17vh, 150px);
  }
  .shs-pics { height: auto; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; }
  .shs-pic { height: auto; aspect-ratio: 4 / 3; }
  /* a phone screen cannot hold a whole chapter, so here it may scroll */
  .shs-slide { overflow-y: auto; }
  .shs-count { position: static; bottom: auto; left: auto; }
  .shs-count i { display: none; }
  .shs-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shs.is-open { animation: none; }
  .shs-btn, .shs-dot i { transition: none; }
}


/* ---- the nav steps aside while the sideways run holds the screen ----
   It hides on the way down and returns on the way up, which used to leave it
   sitting over the top of a card. For the length of this one section it is
   moved out of the way entirely, and comes straight back on the way out. */
body.shx-pinned .nav-shell {
  /* the nav carries an inline transform from its own scroll behaviour, so this
     has to out-rank it */
  transform: translateY(-130%) !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: transform .45s var(--e-out), opacity .35s ease;
}


/* ---- the assistant steps aside for the full-screen views ----
   Its button lives in the bottom-right corner and sits above the page, which is
   where the slideshow keeps its own controls. While the slideshow or the gallery
   is open it is taken out of the way, and it returns on close. */
body.shs-open .hai-fab,
body.shs-open .hai {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(24px) !important;
  transition: opacity .3s ease, transform .3s ease;
}

/* A previous-card points the other way: same card, mirrored arrow, so the
   direction reads at a glance without reading the label. */
.nxt-card.is-prev .nxt-go svg { transform: scaleX(-1); }


/* ============================================================
   42  REELS  (.rl)
   ------------------------------------------------------------
   One reel fills one screen. The feed is its own scroller with snap points,
   which is what makes a flick land on a whole reel rather than halfway
   between two, and it releases to the page once the last one is passed so the
   footer is still reachable.
   ============================================================ */
.rl {
  position: relative;
  /* height, not min-height. A minimum leaves the height auto, and a child
     cannot resolve a percentage or a flex-basis against an auto height: that
     is what collapsed the reel frame to nothing. The stage scrolls inside
     this, so a fixed screenful is exactly what is wanted. */
  height: 100svh;
  /* a column: heading takes what it needs, the stage takes the rest. No
     arithmetic to get wrong when the title wraps to two lines. */
  display: flex;
  flex-direction: column;
  background: #0E0A08;
  color: #fff;
  padding-top: var(--nav-h, 140px);
}
.rl-head, .rl-hint { flex: 0 0 auto; }
.rl-head {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(14px, 2.4vh, 26px) var(--gut) clamp(10px, 1.6vh, 18px);
  text-align: center;
}
.rl-eyebrow { color: var(--clay); }
.rl-title {
  margin: clamp(6px, 1vh, 12px) 0 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
}
.rl-intro {
  margin: clamp(6px, .9vh, 12px) auto 0;
  max-width: 56ch;
  font-size: clamp(13px, 1.05vw, 15.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

/* ---- the scroller ---- */
.rl-stage {
  flex: 1 1 auto;
  min-height: 0;
  /* a column of full-height items. flex-basis resolves against the stage,
     which a percentage height cannot once the stage is itself flex-sized:
     that is what collapsed the reel to nothing. */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  outline: none;
  /* deliberately NOT `contain`: once the last reel is passed the page itself
     should carry on to the footer rather than dead-ending */
  overscroll-behavior-y: auto;
  scroll-behavior: smooth;
}
.rl-stage::-webkit-scrollbar { display: none; }

.rl-item {
  flex: 0 0 100%;
  min-height: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  padding: 0 var(--gut);
}

/* ---- one reel ---- */
.rl-frame {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #17110E;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  isolation: isolate;
}
.rl-frame video,
.rl-frame img.rl-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the framing Hind sets in Admin, applied at playback: the file itself is
     never re-encoded, so her original is untouched */
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--fx, 50%) var(--fy, 50%);
  display: block;
}
.rl-frame img.rl-poster { z-index: 1; transition: opacity .4s ease; }
.rl-item.is-playing .rl-frame img.rl-poster { opacity: 0; }

/* a wash at the foot so the caption and the buttons always read */
.rl-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 6, 4, 0), rgba(10, 6, 4, .82));
  pointer-events: none;
}

.rl-cap {
  position: absolute;
  left: clamp(12px, 3.4%, 20px);
  right: clamp(56px, 17%, 76px);
  bottom: clamp(12px, 3.2%, 20px);
  z-index: 3;
  margin: 0;
  font-size: clamp(12.5px, 1vw, 14.5px);
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* ---- the buttons down the right ---- */
.rl-rail {
  position: absolute;
  right: clamp(8px, 2.6%, 14px);
  bottom: clamp(12px, 3.2%, 20px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2%, 16px);
  align-items: center;
}
.rl-btn {
  display: grid;
  place-items: center;
  gap: 2px;
  width: clamp(38px, 9%, 46px);
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: transform .25s var(--e-out);
}
.rl-btn:hover, .rl-btn:focus-visible { transform: translateY(-2px); }
.rl-btn svg { width: 25px; height: 25px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); }
.rl-btn b {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.rl-btn.is-on { color: #FF3B5C; }
.rl-btn.is-on svg { fill: currentColor; }
@keyframes rl-pop { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
.rl-btn.just-liked svg { animation: rl-pop .45s var(--e-out); }

/* sound sits top-right, away from the rest */
.rl-sound {
  position: absolute;
  top: clamp(10px, 2.6%, 16px);
  right: clamp(10px, 2.6%, 16px);
  z-index: 4;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(12, 8, 6, .5);
  backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
}
.rl-sound svg { width: 18px; height: 18px; }

.rl-empty, .rl-hint {
  text-align: center;
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
}
.rl-empty { padding: clamp(40px, 12vh, 110px) var(--gut); }
.rl-hint { margin: 0; padding: clamp(10px, 2vh, 18px) var(--gut) clamp(20px, 4vh, 40px); }

/* ---- the comments sheet ---- */
.rlc { position: fixed; inset: 0; z-index: 380; }
.rlc[hidden] { display: none; }
.rlc-back { position: absolute; inset: 0; background: rgba(10, 6, 4, .62); backdrop-filter: blur(3px); }
.rlc-panel {
  position: absolute;
  right: 0; bottom: 0;
  width: min(440px, 100%);
  max-height: min(78svh, 640px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .3);
}
@media (min-width: 901px) {
  .rlc-panel { right: clamp(20px, 5vw, 64px); bottom: clamp(20px, 5vh, 60px); border-radius: 22px; }
}
.rlc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px;
  border-bottom: 1px solid rgba(23, 25, 28, .09);
}
.rlc-h { margin: 0; font-family: var(--f-disp); font-size: 17px; font-weight: 600; }
.rlc-x { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.rlc-list { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; display: grid; gap: 14px; align-content: start; }
.rlc-c { font-size: 14px; line-height: 1.55; }
.rlc-c p { margin: 0; }
.rlc-when { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.rlc-reply {
  margin: 7px 0 0 14px;
  padding: 8px 11px;
  border-left: 2px solid var(--clay);
  border-radius: 0 10px 10px 0;
  background: rgba(240, 83, 28, .07);
  font-size: 13.4px;
  line-height: 1.5;
}
.rlc-reply b { color: var(--clay); }
.rlc-none { color: var(--muted); font-size: 13.5px; }
.rlc-form { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid rgba(23, 25, 28, .09); }
.rlc-input {
  flex: 1 1 auto; min-width: 0;
  height: 44px; padding: 0 14px;
  border: 1px solid rgba(23, 25, 28, .16);
  border-radius: 999px;
  font: inherit; font-size: 14px;
  background: #fff; color: var(--ink);
}
.rlc-input:focus { outline: none; border-color: var(--clay); }
.rlc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rlc-send {
  flex: 0 0 auto; height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--clay); color: #fff;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.rlc-send[disabled] { opacity: .55; cursor: default; }
.rlc-note { margin: 0; padding: 0 18px 14px; font-size: 12.5px; color: var(--muted); min-height: 18px; }

/* The assistant lives in the bottom-right corner, which is exactly where a
   reel keeps its like, comment and share buttons. On this page it steps aside
   altogether: it is on every other page, and a control a viewer cannot reach
   is worse than one that is somewhere else. */
body.rl-page .hai-fab, body.rl-page .hai {
  display: none !important;
}
body.rl-open .hai-fab, body.rl-open .hai {
  opacity: 0 !important; pointer-events: none !important; transform: translateY(24px) !important;
}

@media (max-width: 900px) {
  .rl { padding-top: calc(var(--nav-h, 125px) - 6px); }
  /* On a phone the reel is the point, so the heading gives up its room:
     the standfirst goes and the title comes down to one compact line. */
  .rl-head { padding-block: 6px 4px; }
  .rl-title { font-size: clamp(19px, 5.4vw, 25px); }
  .rl-eyebrow { font-size: 10.5px; }
  .rl-intro { display: none; }
  .rl-hint { padding-block: 6px 12px; font-size: 12px; }
  .rl-item { padding: 0 10px; }
  .rl-frame { border-radius: 16px; }
}


/* ============================================================
   43  HIND AI  (.hai)
   ------------------------------------------------------------
   A character sitting in the corner, and a panel of questions she has
   already answered. There is no text field: a visitor picks, never types.
   ============================================================ */
.hai-fab {
  position: fixed;
  right: clamp(12px, 2.6vw, 28px);
  bottom: clamp(12px, 2.6vw, 26px);
  z-index: 290;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hai-fab-label {
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(23, 25, 28, .22);
  transition: opacity .4s ease, transform .4s var(--e-out);
}
.hai-fab.is-hidden-hint .hai-fab-label { opacity: 0; transform: translateX(10px); pointer-events: none; }
.hai-fab:hover .hai-fab-label { opacity: 1; transform: none; pointer-events: auto; }

.hai-fab-btn {
  position: relative;
  width: clamp(74px, 9vw, 104px);
  height: clamp(74px, 9vw, 104px);
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .45s var(--e-out);
}
.hai-fab-btn:hover { transform: translateY(-4px) scale(1.05); }
.hai-fab-btn:active { transform: translateY(-1px) scale(1.01); }
.hai-face {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* the character is a cut-out, so it gets its own soft shadow rather than a
     box: a circle behind it would fight the clay she is standing in */
  filter: drop-shadow(0 10px 18px rgba(23, 25, 28, .28));
  pointer-events: none;
}
/* until her picture is uploaded, the clay mark stands in so the button is
   never an empty square */
.hai-face.is-missing {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #FFF 0 16%, transparent 17%),
    radial-gradient(circle at 50% 42%, transparent 0 27%, #FFF 28% 31%, transparent 32%),
    radial-gradient(circle at 50% 50%, var(--clay) 0 70%, transparent 71%);
  filter: drop-shadow(0 8px 16px rgba(240, 83, 28, .34));
}
/* a slow ring, so the corner has a heartbeat without being noisy */
.hai-ping {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 2px solid rgba(var(--clay-rgb), .55);
  animation: ping 2.8s var(--e-out) infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hai-ping { animation: none; opacity: .35; } }

/* ---- the panel ---- */
.hai {
  position: fixed;
  right: clamp(12px, 2.6vw, 28px);
  bottom: calc(clamp(74px, 9vw, 104px) + clamp(22px, 4vw, 40px));
  z-index: 300;
  width: min(392px, calc(100vw - 24px));
  max-height: min(74svh, 660px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FCE9DF 0%, #FFF7F2 34%, #FFFFFF 100%);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(23, 25, 28, .26), 0 2px 0 rgba(255, 255, 255, .7) inset;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity .32s ease, transform .42s var(--e-out), visibility .32s;
}
.hai.is-open { opacity: 1; visibility: visible; transform: none; }

.hai-x {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(23, 25, 28, .07);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease;
}
.hai-x:hover { background: rgba(23, 25, 28, .14); }

.hai-top { padding: 26px 22px 4px; }
.hai-hello {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.hai-hello::after { content: " \1F44B"; }
.hai-intro {
  margin: 6px 0 0;
  font-size: 13.6px;
  line-height: 1.5;
  color: #5C616A;
  max-width: 30ch;
}

/* the answer, when one is open */
.hai-body { padding: 0 22px; overflow-y: auto; }
.hai:not(.is-answering) .hai-body { padding: 0; }
.hai-asked {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--clay);
}
.hai-ans {
  margin-top: 7px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(23, 25, 28, .07);
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink);
  min-height: 46px;
}

/* ---- the questions ---- */
.hai-qs {
  padding: 14px 18px 6px;
  display: grid;
  gap: 9px;
  overflow-y: auto;
}
.hai-q {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(23, 25, 28, .07);
  color: var(--ink);
  font: inherit;
  font-size: 13.8px;
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--e-out), box-shadow .3s ease;
}
.hai-q:hover, .hai-q:focus-visible {
  transform: translateX(3px);
  box-shadow: 0 6px 20px rgba(23, 25, 28, .13);
}
.hai-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--qc, var(--clay));
  display: grid; place-items: center;
  position: relative;
}
/* a small clay ring inside the dot, the site's own mark rather than a stock icon */
.hai-dot::after {
  content: "";
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .92);
}
.hai-q-t { min-width: 0; line-height: 1.4; }
.hai-chev { color: #A8ADB5; flex: 0 0 auto; }
.hai-none { margin: 6px 2px; font-size: 13.5px; color: #6B7078; }

.hai-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  padding: 9px 15px;
  border: 1px solid rgba(23, 25, 28, .14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.hai-back:hover { background: #FFF3EC; border-color: var(--clay); }

.hai-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.hai-cta-btn {
  flex: 1 1 auto;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 12.8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s var(--e-out), background .25s ease;
}
.hai-cta-btn:hover { transform: translateY(-2px); }
.hai-cta-btn--spon { background: var(--clay); }
.hai-ctanote { margin: 0; font-size: 12px; line-height: 1.45; color: #6B7078; }

.hai-foot {
  margin: 0;
  padding: 10px 22px 16px;
  text-align: center;
  font-size: 11.5px;
  color: #8A8F97;
}
.hai-spark { color: var(--clay); }

@media (max-width: 900px) {
  .hai-fab { right: 10px; bottom: 10px; gap: 8px; }
  .hai-fab-btn { width: 72px; height: 72px; }
  .hai-fab-label { font-size: 11.5px; padding: 7px 11px; }
  .hai {
    right: 8px; left: 8px;
    width: auto;
    bottom: calc(72px + 18px);
    max-height: 72svh;
  }
  .hai-top { padding: 22px 18px 4px; }
  .hai-qs { padding: 12px 14px 4px; }
  .hai-body { padding: 0 18px; }
}


/* ---- rich text: a phrase painted in one of the site's colours ----
   Written {clay|like this} in the Admin panel. The names are fixed, so an
   author can never put a raw colour, or anything else, into the page. */
.rt-c { font-weight: 500; }
.rt-c--clay   { color: var(--clay); }
.rt-c--blue   { color: #2E7CE4; }
.rt-c--green  { color: #2E9455; }
.rt-c--purple { color: #7A5BF0; }
.rt-c--pink   { color: #DD3F82; }
.rt-c--yellow { color: #B87400; }
.rt-c--red    { color: #C92B22; }
.rt-c--ink    { color: var(--ink); }
.rt-c--muted  { color: var(--muted); }
/* on a dark section the ink and muted variants would vanish into it */
.sec--ink .rt-c--ink, .shh .rt-c--ink, .rl .rt-c--ink { color: #fff; }
.sec--ink .rt-c--muted, .shh .rt-c--muted, .rl .rt-c--muted { color: rgba(255, 255, 255, .72); }


/* ---- phones: nothing worth tapping should be smaller than a fingertip ----
   The audit found the utility strip, the footer links and the menu links all
   under the 32px that a thumb can reliably hit. The text stays the same size;
   only the area around it grows, so nothing looks different but everything is
   easier to press. */
@media (max-width: 900px) {
  .u-strip a, .u-strip .u-item,
  .footer a, .menu-links a, .m-socials a, .nav-socials a,
  .foot-links a, .footer-grid a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .nav-socials a, .m-socials a { min-width: 34px; justify-content: center; }
  /* the last few the audit found, each with its own class */
  .u-mail, .nav-u-sponsor, .to-top, .cx-mail { min-height: 34px; display: inline-flex; align-items: center; }
  /* the strip mail collapses to an icon on a phone, so it needs width too */
  .u-mail { min-width: 34px; justify-content: center; }
  /* a link sitting inside a line of prose keeps the line spacing, but gets a
     little breathing room around it so a thumb can find it */
  .dg-note a { padding-block: 8px; }
  /* the close button on Hind AI */
  .hai-x { width: 34px; height: 34px; }
  /* the links inside a run of prose are excluded: padding there would break
     the line spacing of the paragraph they sit in */
  .footer p a, .rt-link, .story-link { min-height: 0; display: inline; }
}


/* ============================================================
   44  SUPPORT  (.sx-*)
   ------------------------------------------------------------
   Built on what the reference sites do, not on how they look:

     - the type is the picture. Nothing else competes with it.
     - every line rises out of a mask, so reading feels like arriving.
     - one accent colour, and long stretches with none of it.
     - one idea per screen. The scroll is the edit.

   Dark on purpose. The rest of the site is cream, so arriving here should
   feel like walking into a different room.
   ============================================================ */
.sup-body { background: #12100F; }

.sx {
  position: relative;
  padding: clamp(88px, 16vh, 190px) clamp(20px, 6vw, 96px);
  color: #F4F1EC;
  background: #12100F;
}
/* Several of these sections set their own display (grid/flex), which would
   outrank the browser's own rule for [hidden]. A section that steps aside
   because it has nothing to show must actually go. */
.sx[hidden] { display: none !important; }
.sx-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244, 241, 236, .46);
}
.sx-kicker {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--clay);
}

/* ---- the two type sizes this page uses, and no others ---- */
.sx-huge, .sx-big {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.sx-huge { font-size: clamp(44px, 10.5vw, 168px); }
.sx-big  { font-size: clamp(34px, 6.4vw, 104px); }

/* ---- the mask every line arrives through ---- */
.sx-lmask { display: block; overflow: hidden; }
.sx-lmask > span { display: block; will-change: transform; }
.sx-oneline {
  margin: clamp(16px, 2.4vw, 30px) 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(244, 241, 236, .66);
}
.sx-fine { margin: clamp(16px, 2vw, 24px) 0 0; font-size: 12px; line-height: 1.6; color: rgba(244, 241, 236, .38); max-width: 46ch; }

/* ---- 01 hero ---- */
.sx-hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: clip;
  padding-top: calc(var(--nav-h, 140px) + 6vh);
}
.sx-hero-media { position: absolute; inset: -8% -6% -8% -6%; margin: 0; z-index: 0; }
.sx-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 32%;
  display: block; filter: grayscale(.55) contrast(1.08) brightness(.62);
}
.sx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 16, 15, .55) 0%, rgba(18, 16, 15, .30) 40%, rgba(18, 16, 15, .96) 100%),
    linear-gradient(96deg, rgba(240, 83, 28, .30), transparent 58%);
}
/* film grain: it costs nothing and stops a flat dark panel looking cheap */
.sx-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.sx-hero-in { position: relative; z-index: 3; }
.sx-hero .sx-huge { margin-top: clamp(12px, 1.6vw, 22px); }
.sx-scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  width: 1px; height: 54px; background: rgba(244, 241, 236, .22); overflow: hidden;
}
.sx-scroll i { position: absolute; inset: 0; background: var(--clay); animation: sx-scroll 2.1s var(--e-out) infinite; }
@keyframes sx-scroll { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---- 02 the number ---- */
.sx-figure { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.sx-figure-in { width: min(1100px, 100%); }
.sx-money {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(46px, 11.5vw, 184px);
  line-height: .88; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;   /* digits must not dance while counting */
  color: #fff;
}
.sx-rule { position: relative; height: 2px; margin: clamp(26px, 4vh, 52px) 0 clamp(16px, 2vh, 24px); background: rgba(244, 241, 236, .14); }
.sx-rule-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--clay); box-shadow: 0 0 26px rgba(240, 83, 28, .8); }
.sx-rule-fill::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 9px;
  margin-top: -4.5px; border-radius: 50%; background: var(--clay);
  box-shadow: 0 0 18px rgba(240, 83, 28, .9);
}
.sx-figure-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: clamp(12.5px, 1.1vw, 15px); color: rgba(244, 241, 236, .5);
}
.sx-pct { font-family: var(--f-disp); font-weight: 700; font-size: clamp(20px, 2.4vw, 34px); color: var(--clay); font-variant-numeric: tabular-nums; }
.sx-of em { font-style: normal; color: rgba(244, 241, 236, .82); }
.sx-chip {
  display: inline-block; margin-top: clamp(20px, 3vh, 34px);
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 236, .18);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 241, 236, .7);
}
.sx-chip[data-tone="green"] { border-color: rgba(46, 148, 85, .5); color: #6FD79B; }
.sx-chip[data-tone="yellow"] { border-color: rgba(216, 144, 0, .5); color: #E9B44C; }
.sx-figure .sx-fine { margin-inline: auto; text-align: center; }

/* ---- 03 where it goes ---- */
.sx-rows { list-style: none; margin: clamp(34px, 6vh, 70px) 0 0; padding: 0; }
.sx-row {
  display: grid;
  grid-template-columns: clamp(52px, 6vw, 92px) minmax(0, 1fr) auto;
  align-items: baseline; gap: clamp(14px, 2.4vw, 40px);
  padding: clamp(20px, 3vh, 34px) 0;
  border-top: 1px solid rgba(244, 241, 236, .12);
  position: relative;
}
.sx-rows > .sx-row:last-child { border-bottom: 1px solid rgba(244, 241, 236, .12); }
/* the accent wipes across the row on hover, behind the words */
.sx-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(240, 83, 28, .16), transparent 70%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--e-out);
}
.sx-row:hover::before { transform: scaleX(1); }
.sx-row-n { font-family: var(--f-disp); font-weight: 600; font-size: clamp(13px, 1.2vw, 17px); color: var(--clay); }
.sx-row-t {
  font-family: var(--f-disp); font-weight: 600; text-transform: uppercase;
  font-size: clamp(22px, 3.6vw, 54px); line-height: 1; letter-spacing: -.035em;
  transition: transform .5s var(--e-out);
}
.sx-row:hover .sx-row-t { transform: translateX(clamp(6px, 1vw, 16px)); }
.sx-row-s { display: block; margin-top: 8px; font-family: var(--f-body); font-weight: 400; text-transform: none; font-size: 13.5px; letter-spacing: 0; color: rgba(244, 241, 236, .46); }
.sx-row-a { font-family: var(--f-disp); font-weight: 600; font-size: clamp(15px, 1.6vw, 22px); color: rgba(244, 241, 236, .78); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 04 why ---- */
.sx-why-list { margin-top: clamp(34px, 6vh, 70px); display: grid; gap: clamp(28px, 5vh, 60px); }
.sx-why-item { display: grid; grid-template-columns: clamp(52px, 6vw, 92px) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 40px); max-width: 60ch; }
.sx-why-n { font-family: var(--f-disp); font-weight: 600; font-size: clamp(13px, 1.2vw, 17px); color: var(--clay); }
.sx-why-item h3 {
  margin: 0; font-family: var(--f-disp); font-weight: 600; text-transform: uppercase;
  font-size: clamp(19px, 2.6vw, 36px); line-height: 1.06; letter-spacing: -.03em;
}
.sx-why-item p { margin: 10px 0 0; font-size: clamp(13.5px, 1.2vw, 16px); line-height: 1.6; color: rgba(244, 241, 236, .5); }

/* ---- 05 impact ---- */
.sx-impact { text-align: center; }
.sx-impact .sx-oneline { margin-inline: auto; }
.sx-tiers { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(26px, 4vh, 46px); }
.sx-tier {
  position: relative; overflow: hidden;
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 236, .2);
  background: transparent; color: #F4F1EC;
  font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
/* the fill sweeps up from the floor of the button, as on the reference sites */
.sx-tier::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--clay); transform: translateY(101%);
  transition: transform .45s var(--e-out);
}
.sx-tier:hover { border-color: var(--clay); }
.sx-tier:hover::before, .sx-tier.is-on::before { transform: translateY(0); }
.sx-tier.is-on { border-color: var(--clay); color: #fff; }

.sx-msg, .sx-thanks { max-width: 620px; margin: clamp(22px, 3vh, 34px) auto 0; opacity: 0; transform: translateY(14px); }
.sx-msg p { margin: 0; font-family: var(--f-disp); font-weight: 500; font-size: clamp(17px, 2vw, 27px); line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.sx-thanks { padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid rgba(244, 241, 236, .14); }
.sx-thanks h3 { margin: 0 0 12px; font-family: var(--f-disp); font-weight: 600; text-transform: uppercase; font-size: clamp(16px, 1.8vw, 24px); letter-spacing: -.02em; }
.sx-thanks p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: rgba(244, 241, 236, .6); }
.sx-sign { font-family: var(--f-serif, var(--f-disp)); font-style: italic; color: var(--clay); }
.sx-msg.is-in, .sx-thanks.is-in { animation: sx-rise .7s var(--e-out) forwards; }
@keyframes sx-rise { to { opacity: 1; transform: none; } }

/* ---- buttons ---- */
.sx-acts { display: flex; gap: 12px; margin-top: clamp(24px, 4vh, 40px); flex-wrap: wrap; }
.sx-acts--center { justify-content: center; }
.sx-btn {
  position: relative; overflow: hidden;
  padding: 15px 30px; border-radius: 999px; border: 0;
  background: var(--clay); color: #fff;
  font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: transform .35s var(--e-out);
}
.sx-btn > span { position: relative; z-index: 1; }
.sx-btn::before {
  content: ""; position: absolute; inset: 0;
  background: #fff; transform: translateY(101%); transition: transform .45s var(--e-out);
}
.sx-btn:hover:not([disabled]) { transform: translateY(-2px); }
.sx-btn:hover:not([disabled])::before { transform: translateY(0); }
.sx-btn:hover:not([disabled]) > span { color: var(--ink); }
.sx-btn--ghost { background: transparent; border: 1px solid rgba(244, 241, 236, .26); }
.sx-btn--ghost:hover > span { color: var(--ink); }
.sx-btn[disabled] { opacity: .42; cursor: not-allowed; }
.sx-btn[disabled]::before { display: none; }

/* ---- 06 story ---- */
.sx-story-in { max-width: 1000px; }
.sx-quotes { margin-top: clamp(24px, 4vh, 44px); }
.sx-quotes p {
  margin: 0 0 clamp(20px, 3vh, 38px);
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(20px, 3.2vw, 46px); line-height: 1.16; letter-spacing: -.035em;
  color: #F4F1EC;
}
.sx-quotes p:nth-child(2) { color: rgba(244, 241, 236, .58); }
.sx-quotes p:last-child { color: var(--clay); }

/* ---- 07 straight answers ---- */
.sx-trust-list { list-style: none; margin: clamp(34px, 6vh, 70px) 0 0; padding: 0; display: grid; gap: 0; }
.sx-trust-item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 40px); align-items: baseline;
  padding: clamp(18px, 2.6vh, 30px) 0; border-top: 1px solid rgba(244, 241, 236, .12);
}
.sx-trust-list > .sx-trust-item:last-child { border-bottom: 1px solid rgba(244, 241, 236, .12); }
.sx-trust-item h3 { margin: 0; font-family: var(--f-disp); font-weight: 600; text-transform: uppercase; font-size: clamp(15px, 1.8vw, 24px); letter-spacing: -.02em; }
.sx-trust-item p { margin: 0; font-size: clamp(13px, 1.2vw, 15.5px); line-height: 1.6; color: rgba(244, 241, 236, .48); }

/* ---- 08 timeline ---- */
.sx-tl-list { list-style: none; margin: clamp(34px, 6vh, 70px) 0 0; padding: 0; }
.sx-tl-item { padding: clamp(20px, 3vh, 34px) 0; border-top: 1px solid rgba(244, 241, 236, .12); display: grid; grid-template-columns: clamp(88px, 11vw, 160px) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 40px); }
.sx-tl-list > .sx-tl-item:last-child { border-bottom: 1px solid rgba(244, 241, 236, .12); }
.sx-tl-date { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }
.sx-tl-item h3 { margin: 0; font-family: var(--f-disp); font-weight: 600; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -.03em; }
.sx-tl-item p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: rgba(244, 241, 236, .48); }
.sx-tl-pics { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sx-tl-pics img { width: clamp(110px, 16vw, 190px); aspect-ratio: 4/3; object-fit: cover; filter: grayscale(.4); transition: filter .5s ease, transform .5s var(--e-out); }
.sx-tl-pics img:hover { filter: none; transform: scale(1.03); }

/* ---- 09 gallery ---- */
.sx-masonry { columns: 3 300px; column-gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(34px, 6vh, 70px); }
.sx-tile { break-inside: avoid; margin: 0 0 clamp(12px, 1.6vw, 20px); overflow: hidden; }
.sx-tile img { width: 100%; height: auto; display: block; filter: grayscale(.45); transition: filter .6s ease, transform .8s var(--e-out); }
.sx-tile:hover img { filter: none; transform: scale(1.04); }
.sx-tile figcaption { margin-top: 8px; font-size: 12px; color: rgba(244, 241, 236, .4); }

/* ---- 10 close ---- */
.sx-close { min-height: 78svh; display: grid; place-items: center; text-align: center; }

/* the where-next cards sit on cream; give them their own breathing room */
.sup-body .nxt-sec { background: var(--paper, #F6F3EC); }

@media (max-width: 900px) {
  .sx { padding: clamp(64px, 11vh, 110px) 20px; }
  .sx-row { grid-template-columns: 34px minmax(0, 1fr); }
  .sx-row-a { grid-column: 2; margin-top: 8px; }
  .sx-why-item, .sx-tl-item { grid-template-columns: 34px minmax(0, 1fr); }
  .sx-trust-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sx-masonry { columns: 1; }
  .sx-figure-foot { justify-content: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-scroll i { animation: none; }
  .sx-lmask > span { transform: none !important; opacity: 1 !important; }
  .sx-msg, .sx-thanks { opacity: 1; transform: none; }
}

/* the review-copy notice: quiet, but impossible to mistake for small print */
.sx-fine--warn {
  display: inline-block;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(233, 180, 76, .45);
  background: rgba(233, 180, 76, .10);
  color: #E9B44C !important;
}
.sx-fine--warn strong { color: #F5D08A; }

/* ============================================================
   45 · SUPPORT — the moment an amount is chosen
   A dialog rather than a line of text further up the page: the amount, and
   the distance it moves the campaign, drawn against the goal.
   ============================================================ */
.sx-cel-lock, .sx-cel-lock body { overflow: hidden; }

.sx-cel {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}
.sx-cel[hidden] { display: none; }
.sx-cel-back {
  position: absolute;
  inset: 0;
  background: rgba(9, 8, 7, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}
.sx-cel.is-on .sx-cel-back { opacity: 1; }

.sx-cel-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100svh - clamp(32px, 8vw, 80px));
  overflow-y: auto;
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3.4vw, 40px) clamp(22px, 3vw, 34px);
  border-radius: 26px;
  background: #FBF7F2;
  color: #17191C;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(26px) scale(.965);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.sx-cel.is-on .sx-cel-card { opacity: 1; transform: none; }
/* a band of clay across the top edge, so the card is unmistakably this site's */
.sx-cel-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(90deg, #F0531C, #F2A213 55%, #F0531C);
}

.sx-cel-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 25, 28, .07);
  color: #5C616A;
  font-size: 13px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.sx-cel-x:hover { background: #F0531C; color: #fff; }

.sx-cel-kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #F0531C;
}
.sx-cel-title {
  margin: 10px 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(24px, 3.1vw, 36px);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.sx-cel-title strong { color: #F0531C; }

/* ---- the meter: where the campaign stands, and what this amount adds ---- */
.sx-cel-meter { margin-top: clamp(20px, 2.6vw, 30px); }
.sx-cel-bar {
  position: relative;
  display: flex;
  height: 14px;
  border-radius: 999px;
  background: rgba(23, 25, 28, .09);
  overflow: hidden;
}
.sx-cel-was {
  height: 100%;
  background: rgba(240, 83, 28, .42);
  border-radius: 999px 0 0 999px;
}
/* the new slice: brighter than what is already raised, and it grows in */
.sx-cel-add {
  height: 100%;
  min-width: 0;
  background: linear-gradient(90deg, #F0531C, #F2A213);
  box-shadow: 0 0 18px rgba(240, 83, 28, .55);
  transition: width 1.05s cubic-bezier(.16, 1, .3, 1);
}
/* A real amount can be a twentieth of one percent of the goal, which is under
   a pixel wide. Once it has grown, the slice keeps a floor so it can be seen
   at all; the exact figure is written out beside the bar. The floor is applied
   only after the growth starts, or the slice would be sitting there before the
   animation had anything to show. */
.sx-cel-add.is-grown { min-width: 5px; }

.sx-cel-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #7A7F88;
}
.sx-cel-jump {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(240, 83, 28, .12);
  color: #F0531C;
  font-size: 12px;
  font-weight: 700;
}
.sx-cel-read {
  margin: 14px 0 0;
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  color: #4A4E57;
}
.sx-cel-read b { color: #17191C; font-weight: 700; }
.sx-cel-up { color: #F0531C; font-weight: 700; }
/* the same amount multiplied by a crowd, which is how the goal is actually
   reached and what stops one contribution reading as a rounding error */
.sx-cel-crowd {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(240, 83, 28, .07);
  border: 1px solid rgba(240, 83, 28, .16);
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.55;
  color: #4A4E57;
}
.sx-cel-crowd[hidden] { display: none; }
.sx-cel-crowd b { color: #17191C; font-weight: 700; }

.sx-cel-msg {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  line-height: 1.62;
  color: #3A3E46;
}
.sx-cel-msg strong { color: #F0531C; }

.sx-cel-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 28px);
}
.sx-cel-fine {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8A8F98;
}

/* the page's own buttons are built for the dark sections; inside this light
   card they need their light-background counterparts */
.sx-cel .sx-btn { flex: 1 1 auto; justify-content: center; }
.sx-cel .sx-btn--ghost {
  border-color: rgba(23, 25, 28, .2);
  color: #17191C;
}
.sx-cel .sx-btn--ghost:hover { border-color: #F0531C; color: #F0531C; }

@media (max-width: 560px) {
  .sx-cel-card { border-radius: 22px; }
  .sx-cel-acts .sx-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-cel-card, .sx-cel-back, .sx-cel-add { transition: none; }
}

/* ============================================================
   46 · REELS — full screen
   The page version keeps the site around the film. This takes the site away:
   the reel reaches every edge, the controls float on top of it, and the only
   things on screen are the film and the way back.
   ============================================================ */

/* the way out. Off screen until full screen, so it never sits over the page. */
.rl-back {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 12;
  width: 42px; height: 42px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 10, 9, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.rl-back svg { width: 22px; height: 22px; }
.rl-back:hover { background: rgba(240, 83, 28, .9); transform: scale(1.06); }
body.rl-full .rl-back { display: grid; }

/* ---- the film reaches the edges ---- */
body.rl-full { overflow: hidden; }
body.rl-full .rl {
  position: fixed;
  inset: 0;
  z-index: 400;
  /* dvh, not svh: with the browser chrome retracting on a phone the small
     viewport height leaves a band of page showing under the film */
  height: 100dvh;
  padding-top: 0;
  background: #000;
}
/* everything that is not the film steps aside */
body.rl-full .rl-head,
body.rl-full .rl-hint,
body.rl-full .nav,
body.rl-full .topbar,
body.rl-full .strip,
body.rl-full footer,
body.rl-full .hai-fab,
body.rl-full .nxt-sec { display: none !important; }

body.rl-full .rl-item { padding: 0; }
body.rl-full .rl-frame {
  height: 100%;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
/* the picture fills the screen rather than sitting inside a card */
body.rl-full .rl-frame video,
body.rl-full .rl-frame img.rl-poster { object-fit: contain; }
/* on a phone a vertical film matches the screen, so it can safely fill it */
@media (max-aspect-ratio: 3/4) {
  body.rl-full .rl-frame video,
  body.rl-full .rl-frame img.rl-poster { object-fit: cover; }
}
/* the controls clear the notch and the home bar */
body.rl-full .rl-rail {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
}
body.rl-full .rl-cap {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  padding-right: 84px;
}
body.rl-full .rl-sound {
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
}

/* ---- how far through the reel is ---- */
.rl-prog {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  z-index: 6;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
  pointer-events: none;
}
.rl-prog i {
  display: block;
  height: 100%;
  background: var(--clay, #F0531C);
  transform: scaleX(0);
  transform-origin: left center;
}
body.rl-full .rl-prog { top: calc(env(safe-area-inset-top, 0px)); }

/* ---- the heart a double tap throws up ---- */
.rl-boom {
  position: absolute;
  z-index: 8;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
.rl-boom svg { width: 100%; height: 100%; fill: #F0531C; stroke: #fff; stroke-width: 1.2; }
.rl-boom.is-on { animation: rl-boom .82s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes rl-boom {
  0%   { opacity: 0; transform: scale(.3) rotate(-12deg); }
  22%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  50%  { opacity: 1; transform: scale(.98) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.3) translateY(-26px); }
}

/* the full-screen button is a phone-first control, so it leads on a phone */
@media (max-width: 700px) {
  .rl-exp b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-boom.is-on { animation-duration: .01s; }
  .rl-prog i { transition: none; }
}

/* ============================================================
   47 · SUPPORT — the celebration, with the lights on
   ============================================================ */

/* The shared particle canvas lives at z-index 210 and this dialog at 420, so
   every spark the celebration threw was being painted BEHIND the card that was
   doing the thanking. While the dialog is open the canvas comes over the top.
   It never takes a click: it is pointer-events: none wherever it sits. */
html.sx-cel-lock .burst-canvas { z-index: 460; }

/* ---- rings pushing out from under the card ---- */
.sx-cel-rings {
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 1px;
  pointer-events: none;
}
.sx-cel-rings i {
  position: absolute;
  left: 50%; top: 50%;
  width: 320px; height: 320px;
  margin: -160px 0 0 -160px;
  border: 2px solid rgba(240, 83, 28, .5);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.25);
}
.sx-cel.is-on .sx-cel-rings i { animation: sx-ring 1.5s cubic-bezier(.16, 1, .3, 1) forwards; }
.sx-cel.is-on .sx-cel-rings i:nth-child(2) { animation-delay: .16s; border-color: rgba(242, 162, 19, .45); }
.sx-cel.is-on .sx-cel-rings i:nth-child(3) { animation-delay: .32s; border-color: rgba(255, 255, 255, .32); }
@keyframes sx-ring {
  0%   { opacity: 0;   transform: scale(.25); border-width: 3px; }
  18%  { opacity: .85; }
  100% { opacity: 0;   transform: scale(2.6); border-width: 1px; }
}

/* ---- twinkles scattered over the card ---- */
.sx-cel-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.sx-cel-sparks i {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  /* a four-point star, drawn with two crossed gradients */
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    conic-gradient(from 0deg, transparent 0 12%, #F2A213 12% 13%, transparent 13% 37%,
                   #F2A213 37% 38%, transparent 38% 62%, #F2A213 62% 63%,
                   transparent 63% 87%, #F2A213 87% 88%, transparent 88%);
}
.sx-cel.is-on .sx-cel-sparks i {
  animation: sx-twinkle 1.5s ease-out var(--d, 0s) forwards;
  transform: scale(var(--s, 1));
}
@keyframes sx-twinkle {
  0%   { opacity: 0; transform: scale(0) rotate(-40deg); }
  25%  { opacity: 1; transform: scale(calc(var(--s, 1) * 1.25)) rotate(0deg); }
  60%  { opacity: .9; transform: scale(var(--s, 1)) rotate(30deg); }
  100% { opacity: 0; transform: scale(calc(var(--s, 1) * .5)) rotate(70deg) translateY(-18px); }
}

/* ---- the card lands rather than fades ---- */
.sx-cel.is-on .sx-cel-card { animation: sx-cel-land .8s cubic-bezier(.16, 1, .3, 1); }
@keyframes sx-cel-land {
  0%   { transform: translateY(30px) scale(.94); }
  55%  { transform: translateY(-6px) scale(1.015); }
  100% { transform: none; }
}

/* the clay band across the top sweeps through as it opens */
.sx-cel.is-on .sx-cel-card::before {
  background: linear-gradient(90deg, #F0531C, #F2A213 30%, #ffffff 50%, #F2A213 70%, #F0531C);
  background-size: 250% 100%;
  animation: sx-cel-sweep 1.6s ease-out;
}
@keyframes sx-cel-sweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -60% 0; }
}

/* the running total gets a beat when it arrives at its new figure */
.sx-cel-read b { transition: color .3s ease; }
.sx-cel-read b.is-landed { animation: sx-cel-pop .5s cubic-bezier(.16, 1, .3, 1); color: #F0531C; }
@keyframes sx-cel-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
.sx-cel-read b { display: inline-block; }

/* the new slice keeps a light travelling along it once it has grown */
.sx-cel-add.is-grown { position: relative; overflow: hidden; }
.sx-cel-add.is-grown::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-100%);
  animation: sx-cel-shine 1.4s ease-out .9s 2;
}
@keyframes sx-cel-shine { to { transform: translateX(220%); } }

@media (prefers-reduced-motion: reduce) {
  .sx-cel.is-on .sx-cel-rings i,
  .sx-cel.is-on .sx-cel-sparks i,
  .sx-cel.is-on .sx-cel-card,
  .sx-cel.is-on .sx-cel-card::before,
  .sx-cel-add.is-grown::after,
  .sx-cel-read b.is-landed { animation: none; }
}

/* ============================================================
   48 · FIELDS THE CLIENT HAS EMPTIED
   A heading or a line cleared in the admin panel should leave no trace. These
   elements are always in the markup and are filled at run time, so when they
   are filled with nothing they were still holding their own line height and
   margin open and leaving a gap nobody could account for.
   ============================================================ */
/* the kicker carries a clay dot, so it is hidden by the renderer instead of
   by :empty; this keeps it collapsed even if something re-shows it */
.hero-kicker[hidden] { display: none !important; }
.hero-kicker:empty,
.hero-tagline:empty,
.hero-sub:empty,
.shh-statement:empty,
.shh-lead:empty,
.bgh-statement:empty,
.bgh-lead:empty,
.sec-sub:empty { display: none; }

/* ---- the shooting hero with nothing to the right of the photograph ----
   Two columns instead of three: the words on the left, the picture taking the
   right-hand side rather than sitting marooned in the middle of the screen. */
.shh.is-solo { --shh-cols: minmax(0, 1fr) clamp(240px, 40vw, 660px); }
.shh.is-solo .shh-aside { display: none; }
@media (max-width: 860px) {
  /* stacked on a phone, where the three-column idea never applied anyway */
  .shh.is-solo { --shh-cols: minmax(0, 1fr); }
}

/* ============================================================
   49 · THE JOURNAL
   An index of entries, and one entry opened in place. Editorial rather than
   bloggy: big type, a lot of paper, and the clay palette used sparingly.
   ============================================================ */
.bl {
  position: relative;
  background: var(--cream, #F6F3EC);
  color: var(--ink, #17191C);
  padding: calc(var(--nav-h, 140px) + clamp(24px, 5vh, 60px)) 0 clamp(60px, 9vh, 120px);
}
.bl-body { background: var(--cream, #F6F3EC); }
.bl-reading .bl { display: none; }

/* ---- the masthead ---- */
.bl-head { max-width: 62ch; margin: 0 0 clamp(30px, 5vh, 62px); }
.bl-eyebrow { color: var(--clay, #F0531C); }
.bl-title {
  margin: clamp(8px, 1.2vh, 14px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.bl-intro {
  margin: clamp(12px, 2vh, 20px) 0 0;
  font-size: clamp(16px, 1.5vw, 19.5px);
  line-height: 1.62;
  color: #5A5F68;
}

/* ---- the subject filter ---- */
.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px, 3vh, 30px); }
.bl-tag {
  padding: 7px 15px;
  border: 1px solid rgba(23, 25, 28, .16);
  border-radius: 999px;
  background: transparent;
  color: #5A5F68;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bl-tag:hover { border-color: var(--clay, #F0531C); color: var(--clay, #F0531C); }
.bl-tag.is-on { background: var(--ink, #17191C); border-color: var(--ink, #17191C); color: #fff; }

/* ---- the index ---- */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(22px, 3vw, 40px);
}
.bl-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 25, 28, .05);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
}
.bl-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(23, 25, 28, .14); }
.bl-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EFE9E1; }
.bl-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.bl-card:hover .bl-card-media img { transform: scale(1.05); }
/* an entry with no picture still gets a face: the clay mark, off centre */
.bl-card-media--none {
  position: relative;
  background: linear-gradient(140deg, #2A2D33, #17191C);
}
.bl-card-media--none i {
  position: absolute; right: 14%; top: 50%;
  width: 86px; height: 86px; margin-top: -43px;
  border-radius: 50%;
  border: 2px solid rgba(240, 83, 28, .55);
  box-shadow: 0 0 0 12px rgba(240, 83, 28, .09), inset 0 0 0 10px rgba(240, 83, 28, .16);
}
.bl-card-in { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(18px, 2vw, 26px); }
.bl-card-meta {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #8A8F98;
}
.bl-card-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: block; }
.bl-card-title {
  margin: 10px 0 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.bl-card-x { margin-top: 9px; font-size: 14.5px; line-height: 1.58; color: #5A5F68; }
.bl-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px;
}
.bl-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-card-tags em {
  font-style: normal; font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(240, 83, 28, .09); color: var(--clay, #F0531C);
}
.bl-card-stat { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #8A8F98; }
.bl-card-stat svg { width: 15px; height: 15px; }
.bl-card-stat svg:nth-of-type(2) { margin-left: 8px; }
.bl-empty { margin-top: 30px; color: #8A8F98; font-size: 15px; }

/* ============================================================
   ONE ENTRY
   ============================================================ */
.bl-post {
  background: var(--cream, #F6F3EC);
  padding: calc(var(--nav-h, 140px) + clamp(18px, 3vh, 36px)) 0 clamp(50px, 8vh, 100px);
}
.bl-post[hidden] { display: none; }
.bl-post-in { max-width: 100%; }
.bl-back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: clamp(20px, 3vh, 34px);
  padding: 9px 17px 9px 12px;
  border: 1px solid rgba(23, 25, 28, .16);
  border-radius: 999px;
  background: transparent; color: var(--ink, #17191C);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bl-back svg { width: 17px; height: 17px; }
.bl-back:hover { background: var(--ink, #17191C); border-color: var(--ink, #17191C); color: #fff; }

.bl-cover {
  margin: 0 0 clamp(24px, 4vh, 46px);
  border-radius: 22px; overflow: hidden;
  aspect-ratio: 21 / 9; background: #EFE9E1;
}
.bl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the column: one measure, held wherever the screen goes */
.bl-post-head, .bl-copy, .bl-bar, .bl-comments, .bl-more { max-width: 68ch; margin-inline: auto; }
.bl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #8A8F98;
}
.bl-meta em {
  font-style: normal; letter-spacing: .04em; text-transform: none;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(240, 83, 28, .09); color: var(--clay, #F0531C);
}
.bl-post-title {
  margin: clamp(12px, 2vh, 18px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.bl-post-lead {
  margin: clamp(12px, 2vh, 18px) 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: #4A4E57;
  font-weight: 500;
}
.bl-post-lead[hidden] { display: none; }

/* ---- the writing ---- */
.bl-copy { margin-top: clamp(26px, 4vh, 48px); }
.bl-copy p {
  margin: 0 0 clamp(15px, 2vh, 22px);
  font-size: clamp(16.5px, 1.45vw, 19px);
  line-height: 1.78;
  color: #2E3138;
}
/* the opening line sets the tone, so it is given a little more weight */
.bl-copy > p:first-child { font-size: clamp(18px, 1.6vw, 21px); color: #17191C; }
.bl-h2 {
  margin: clamp(30px, 4.5vh, 52px) 0 clamp(10px, 1.6vh, 16px);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: -.025em;
}
/* a pulled quote: the one place the clay colour is allowed to shout */
.bl-quote {
  position: relative;
  margin: clamp(26px, 4vh, 44px) 0;
  padding: 0 0 0 clamp(20px, 3vw, 34px);
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.32;
  letter-spacing: -.025em;
  color: var(--clay, #F0531C);
  text-wrap: balance;
}
.bl-quote::before {
  content: "";
  position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--clay, #F0531C), rgba(240, 83, 28, 0));
}
.bl-copy strong { font-weight: 700; color: #17191C; }
.bl-copy em { font-style: italic; }
.bl-copy .rt-link { color: var(--clay, #F0531C); }

/* ---- like, share, comments ---- */
.bl-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: clamp(30px, 5vh, 56px);
  padding-top: clamp(20px, 3vh, 30px);
  border-top: 1px solid rgba(23, 25, 28, .12);
}
.bl-act {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(23, 25, 28, .16);
  border-radius: 999px;
  background: transparent; color: #4A4E57;
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.bl-act svg { width: 18px; height: 18px; }
.bl-act:hover { border-color: var(--clay, #F0531C); color: var(--clay, #F0531C); transform: translateY(-2px); }
.bl-like.is-on { background: var(--clay, #F0531C); border-color: var(--clay, #F0531C); color: #fff; }
.bl-like.is-on svg { fill: currentColor; }

.bl-comments { margin-top: clamp(34px, 5vh, 60px); }
.bl-ch {
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  font-family: var(--f-disp); font-weight: 600;
  font-size: clamp(19px, 1.8vw, 25px); letter-spacing: -.02em;
}
.bl-clist { display: grid; gap: 12px; }
.bl-c {
  padding: 15px 18px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(23, 25, 28, .05);
}
.bl-c-body { margin: 0; font-size: 15px; line-height: 1.6; color: #2E3138; }
.bl-c-date { display: block; margin-top: 7px; font-size: 11.5px; color: #9AA0A8; }
.bl-c-reply {
  margin-top: 12px; padding: 11px 14px;
  border-radius: 12px;
  background: rgba(240, 83, 28, .07);
  border-left: 3px solid var(--clay, #F0531C);
}
.bl-c-reply b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--clay, #F0531C); }
.bl-c-reply p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.58; color: #2E3138; }
.bl-c-none { margin: 0; color: #9AA0A8; font-size: 14.5px; }

.bl-cform { display: grid; gap: 10px; margin-top: 18px; position: relative; }
.bl-cinput {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(23, 25, 28, .16);
  border-radius: 14px;
  background: #fff; color: var(--ink, #17191C);
  font: inherit; font-size: 15px; line-height: 1.55;
  resize: vertical;
  transition: border-color .25s ease;
}
.bl-cinput:focus { outline: none; border-color: var(--clay, #F0531C); }
.bl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bl-csend {
  justify-self: start;
  padding: 11px 26px;
  border: 0; border-radius: 999px;
  background: var(--ink, #17191C); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.bl-csend:hover { background: var(--clay, #F0531C); transform: translateY(-2px); }
.bl-csend[disabled] { opacity: .5; pointer-events: none; }
.bl-cnote {
  margin: 10px 0 0; font-size: 13.5px; color: var(--clay, #F0531C);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.bl-cnote.is-on { opacity: 1; transform: none; }

/* ---- more entries ---- */
.bl-more { margin-top: clamp(40px, 6vh, 72px); padding-top: clamp(22px, 3vh, 34px); border-top: 1px solid rgba(23, 25, 28, .12); }
.bl-more h2 {
  margin: 0 0 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #8A8F98;
}
/* The single-line rows these described were replaced by cards. The rules
   outlived the markup and went on matching the cards, which are also
   links inside .bl-more: align-items: baseline stopped the card body
   stretching to the card, and white-space: nowrap stopped the opening
   line wrapping, so it ran past the edge and was clipped mid-word. */

@media (max-width: 620px) {
  .bl-cover { aspect-ratio: 4 / 3; border-radius: 16px; }
  .bl-card { border-radius: 16px; }
  .bl-bar .bl-act { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-card-media img, .bl-act, .bl-more a, .bl-csend { transition: none; }
}

/* ============================================================
   49b · THE JOURNAL, second pass
   Smaller cards on the index so a row holds five rather than three, a proper
   hero picture on an entry, and real cards under it instead of a list.
   ============================================================ */

/* ---- the index: five across on a desktop ----
   208px is chosen against the container: at the widest the wrap is about
   1200px, so five columns and their gaps land just inside it, and the count
   falls to four, three, two and one on its own as the screen narrows. */
.bl-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}
.bl-card { border-radius: 15px; }
.bl-card-media { aspect-ratio: 4 / 3; }
.bl-card-media--none i {
  right: 12%;
  width: 54px; height: 54px; margin-top: -27px;
  box-shadow: 0 0 0 8px rgba(240, 83, 28, .09), inset 0 0 0 6px rgba(240, 83, 28, .16);
}
.bl-card-in { padding: 13px 14px 14px; }
.bl-card-meta { font-size: 10px; gap: 7px; letter-spacing: .08em; }
.bl-card-title {
  margin-top: 7px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.22;
}
/* the opening line is trimmed to three lines so every card in a row is the
   same height however much was written */
.bl-card-x {
  margin-top: 6px;
  font-size: 12.8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-card-foot { padding-top: 11px; gap: 8px; }
.bl-card-tags em { font-size: 9.5px; padding: 3px 7px; }
.bl-card-stat { font-size: 11.5px; gap: 4px; }
.bl-card-stat svg { width: 13px; height: 13px; }
.bl-card-stat svg:nth-of-type(2) { margin-left: 6px; }

/* below a phone-and-a-half the cards go back to being comfortable */
@media (max-width: 700px) {
  .bl-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .bl-card-title { font-size: 16px; }
  .bl-card-x { font-size: 13.5px; -webkit-line-clamp: 2; }
}

/* ---- the entry hero ----
   The same picture that fronts the card, now full width above the title, so
   opening an entry reads as carrying on rather than arriving somewhere new. */
.bl-cover {
  position: relative;
  margin: 0 0 clamp(24px, 4vh, 46px);
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: #EFE9E1;
  box-shadow: 0 24px 60px rgba(23, 25, 28, .16);
}
.bl-cover img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* a wash at the foot, so the picture sits under the words rather than
   competing with them */
.bl-cover::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(246, 243, 236, 0), rgba(246, 243, 236, .55));
  pointer-events: none;
}
@media (max-width: 700px) {
  .bl-cover { aspect-ratio: 16 / 10; border-radius: 15px; }
}

/* ---- more entries: cards, not a list ---- */
.bl-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.bl-more-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 25, 28, .05);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}
.bl-more-card:hover { transform: translateY(-5px); box-shadow: 0 22px 42px rgba(23, 25, 28, .14); }
.bl-more-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EFE9E1; }
.bl-more-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.bl-more-card:hover .bl-more-media img { transform: scale(1.06); }
.bl-more-media--none { position: relative; background: linear-gradient(140deg, #2A2D33, #17191C); }
.bl-more-media--none i {
  position: absolute; right: 13%; top: 50%;
  width: 46px; height: 46px; margin-top: -23px;
  border-radius: 50%;
  border: 2px solid rgba(240, 83, 28, .55);
  box-shadow: 0 0 0 7px rgba(240, 83, 28, .09), inset 0 0 0 5px rgba(240, 83, 28, .16);
}
.bl-more-in { display: flex; flex-direction: column; padding: 12px 14px 14px; }
.bl-more-date {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #9AA0A8;
}
.bl-more-card b {
  margin-top: 6px;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.bl-more-card > .bl-more-in > span:last-child {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6A6F78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .bl-more-card, .bl-more-media img { transition: none; }
}

/* ============================================================
   50 · SUPPORT — not open yet
   Directly under the hero while the campaign state is "soon". It has one job:
   answer honestly, and offer the one thing that IS possible today.
   ============================================================ */
.sx-soon {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(60px, 11vh, 130px) clamp(20px, 6vw, 96px);
  background: #17130F;
}
.sx-soon[hidden] { display: none; }
.sx-soon-in { position: relative; z-index: 1; max-width: 62ch; margin-inline: auto; }

/* a slow clay-coloured bloom behind the words, so the section reads as warm
   rather than as an apology */
.sx-soon-glow {
  position: absolute;
  left: 50%; top: 42%;
  width: min(120vw, 1100px); height: min(120vw, 1100px);
  margin: -50% 0 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 83, 28, .17), rgba(240, 83, 28, 0) 62%);
  pointer-events: none;
  animation: sx-soon-breathe 9s ease-in-out infinite;
}
@keyframes sx-soon-breathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.sx-soon-badge {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(240, 83, 28, .45);
  border-radius: 999px;
  background: rgba(240, 83, 28, .1);
  color: #F0531C;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.sx-soon-title {
  margin: clamp(18px, 3vh, 30px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 74px);
  line-height: .98;
  letter-spacing: -.04em;
  color: #F4F1EC;
}
/* each authored line gets its own row, so the break lands where it was meant to */
.sx-soon-title span { display: block; }
.sx-soon-title span:last-child { color: #F0531C; }

.sx-soon-lead {
  margin: clamp(16px, 2.6vh, 26px) auto 0;
  max-width: 54ch;
  font-size: clamp(15.5px, 1.4vw, 18.5px);
  line-height: 1.68;
  color: rgba(244, 241, 236, .72);
}
.sx-soon-acts { margin-top: clamp(22px, 3.4vh, 34px); display: flex; justify-content: center; }
.sx-soon-fine {
  margin: clamp(14px, 2vh, 20px) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(244, 241, 236, .42);
}

@media (prefers-reduced-motion: reduce) {
  .sx-soon-glow { animation: none; }
}

/* ============================================================
   49c · THE JOURNAL, third pass
   One measure for the whole entry, a picture at the head that belongs to it
   rather than towering over it, and the rest of the media laid out together.
   ============================================================ */

/* ---- one column, declared once ----
   Everything in an entry lines up on this: the picture at the head, the
   words, the collage, the buttons and the comments. Before, the head picture
   was full width and the words were 68ch, so the entry read as two different
   documents stacked on each other. */
/* 780, not 820. Wider than the 680 it was, so the entry no longer looks like
   a narrow strip down the middle of the page, but not so wide that the line
   becomes tiring: at 19px this is about 80 characters, which is the top of
   the comfortable range rather than past it. */
.bl-post-in { --bl-col: min(100%, 780px); }

.bl-post-head,
.bl-copy,
.bl-bar,
.bl-comments,
.bl-more,
.bl-collage,
.bl-cover {
  max-width: var(--bl-col);
  margin-inline: auto;
}

/* the head picture: the same width as the words, and a calmer shape.
   21/9 across the full page was a poster; this is an illustration. */
.bl-cover {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(23, 25, 28, .13);
  margin-bottom: clamp(22px, 3.4vh, 38px);
}
/* the wash existed to lift text off a full-bleed picture; at this size the
   picture sits inside the column and needs no help */
.bl-cover::after { display: none; }

/* a slightly larger measure deserves slightly larger text, or the line just
   gets longer without getting easier to read */
.bl-copy p { font-size: clamp(17px, 1.32vw, 19px); line-height: 1.78; }
.bl-copy > p:first-child { font-size: clamp(19px, 1.55vw, 22px); }

@media (max-width: 900px) {
  .bl-post-in { --bl-col: 100%; }
  .bl-cover { aspect-ratio: 16 / 10; border-radius: 14px; }
}

/* ============================================================
   THE COLLAGE
   The shape follows how many there are. Four equal boxes look deliberate;
   three equal boxes look like one is missing.
   ============================================================ */
.bl-collage {
  display: grid;
  gap: 10px;
  margin: clamp(24px, 4vh, 40px) auto clamp(8px, 1.6vh, 16px);
}
.bl-collage[hidden] { display: none; }

.bl-collage--1 { grid-template-columns: 1fr; }
.bl-collage--2 { grid-template-columns: 1fr 1fr; }
/* one tall on the left, two stacked to its right */
.bl-collage--3 { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
.bl-collage--3 .bl-cl:first-child { grid-row: 1 / span 2; }
.bl-collage--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.bl-cl {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #EFE9E1;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
}
.bl-collage--1 .bl-cl { aspect-ratio: 16 / 9; }
.bl-collage--3 .bl-cl:first-child { aspect-ratio: auto; }
.bl-cl:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(23, 25, 28, .18); }
.bl-cl:focus-visible { outline: 2px solid var(--clay, #F0531C); outline-offset: 3px; }
.bl-cl img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.bl-cl:hover img { transform: scale(1.05); }
.bl-cl-none { position: absolute; inset: 0; background: linear-gradient(140deg, #2A2D33, #17191C); }

/* a film says so */
.bl-cl-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(12, 10, 9, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  pointer-events: none;
}
.bl-cl-play svg { width: 20px; height: 20px; margin-left: 2px; }

/* "+3 more" on the last tile when there are more than four */
.bl-cl-more {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(12, 10, 9, .55);
  color: #fff;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.02em;
  pointer-events: none;
}

@media (max-width: 600px) {
  .bl-collage { gap: 7px; }
  .bl-collage--3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .bl-collage--3 .bl-cl:first-child { grid-row: auto; grid-column: 1 / span 2; aspect-ratio: 16 / 10; }
}

/* ============================================================
   THE SLIDESHOW
   Photographs and films in one sequence, because they were taken on the same
   day and splitting them into two viewers would be an odd thing to do.
   ============================================================ */
.bl-slides-lock, .bl-slides-lock body { overflow: hidden; }

.bl-slides {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
.bl-slides[hidden] { display: none; }
.bl-slides-back {
  position: absolute; inset: 0;
  background: rgba(9, 8, 7, .93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .3s ease;
}
.bl-slides.is-on .bl-slides-back { opacity: 1; }

.bl-slides-in {
  position: relative;
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.bl-slides.is-on .bl-slides-in { opacity: 1; transform: none; }

.bl-slides-bar { display: flex; align-items: center; justify-content: space-between; }
.bl-slides-count {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .6);
}
.bl-slides-x {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 13px;
  cursor: pointer;
  transition: background .25s ease;
}
.bl-slides-x:hover { background: var(--clay, #F0531C); }

.bl-slides-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
.bl-slides-stage img,
.bl-slides-stage video {
  max-width: 100%;
  /* the picture is never taller than the room left after the bar and the
     caption, so nothing is ever cut off at the bottom of the screen */
  max-height: calc(100svh - 190px);
  border-radius: 12px;
  display: block;
  background: #000;
}
.bl-slides-cap {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  min-height: 1.4em;
}

.bl-slides-nav {
  position: absolute;
  top: 50%;
  width: 46px; height: 46px;
  margin-top: -23px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 17px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.bl-slides-nav:hover { background: var(--clay, #F0531C); transform: scale(1.07); }
.bl-slides-prev { left: -8px; }
.bl-slides-next { right: -8px; }
.bl-slides-nav[hidden] { display: none; }

@media (max-width: 700px) {
  .bl-slides-prev { left: 2px; }
  .bl-slides-next { right: 2px; }
  .bl-slides-stage img, .bl-slides-stage video { max-height: calc(100svh - 210px); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-slides-in, .bl-slides-back, .bl-cl, .bl-cl img { transition: none; }
}

/* ============================================================
   51 · WHAT IS SKEET?
   An explainer, so it is built to be read rather than admired: one idea to a
   screen, a picture beside each, and the field drawn instead of photographed.
   ============================================================ */
.sk-body { background: var(--cream, #F6F3EC); }

/* ---- the opening ---- */
.sk-hero {
  position: relative;
  min-height: min(86svh, 820px);
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h, 140px) + 30px) 0 clamp(50px, 8vh, 90px);
  overflow: clip;
}
.sk-hero-media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.sk-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .17; }
.sk-hero-in { position: relative; z-index: 1; max-width: 68ch; }
.sk-eyebrow { color: var(--clay, #F0531C); }
.sk-title {
  margin: clamp(12px, 1.6vw, 20px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 118px);
  line-height: .94;
  letter-spacing: -.045em;
}
.sk-lead {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  max-width: 54ch;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.6;
  color: #4A4E57;
}
/* the one-sentence answer, set apart because it is the whole page in short */
.sk-short {
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
  max-width: 60ch;
  border-left: 3px solid var(--clay, #F0531C);
  background: rgba(240, 83, 28, .06);
  border-radius: 0 14px 14px 0;
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.62;
  color: #2E3138;
}
.sk-scroll {
  display: block; margin-top: clamp(26px, 4vh, 44px);
  width: 22px; height: 34px;
  border: 2px solid rgba(23, 25, 28, .22); border-radius: 12px;
  position: relative;
}
.sk-scroll i {
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: var(--clay, #F0531C);
  animation: sk-scroll 1.9s ease-in-out infinite;
}
@keyframes sk-scroll { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(11px); opacity: 0; } }

/* ---- the numbers ---- */
.sk-facts { background: var(--ink, #17191C); color: #F4F1EC; padding: clamp(26px, 4vh, 44px) 0; }
.sk-facts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(14px, 2vw, 30px);
  text-align: center;
}
.sk-fact b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--clay, #F0531C);
}
.sk-fact span {
  display: block; margin-top: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244, 241, 236, .6);
}

/* ---- the chapters ---- */
.sk-ch { padding: clamp(50px, 9vh, 110px) 0; }
.sk-ch:nth-child(even) { background: rgba(23, 25, 28, .028); }
.sk-ch-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
/* every other chapter puts the picture on the other side, so the eye keeps
   moving down the page instead of settling into one column */
.sk-ch.is-flip .sk-ch-words { order: 2; }

.sk-ch-num {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .22em;
  color: var(--clay, #F0531C);
}
.sk-ch-title {
  margin: clamp(8px, 1vw, 14px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.sk-ch-lead {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: clamp(16.5px, 1.45vw, 20px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--clay, #F0531C);
}
.sk-ch-body { margin-top: clamp(14px, 1.8vw, 22px); }
.sk-ch-body p {
  margin: 0 0 clamp(12px, 1.4vw, 17px);
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.75;
  color: #4A4E57;
}
.sk-ch-body p:last-child { margin-bottom: 0; }
.sk-ch-body strong { color: #17191C; font-weight: 700; }
.sk-ch-body em { font-style: italic; }
.sk-quote {
  margin: clamp(16px, 2vw, 24px) 0;
  padding-left: clamp(16px, 1.8vw, 22px);
  border-left: 3px solid var(--clay, #F0531C);
  font-family: var(--f-disp);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #17191C;
}

.sk-ch-media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #EFE9E1;
}
.sk-ch-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A picture that has not been supplied leaves a labelled frame rather than a
   hole, so the page is finished before a single photograph exists and it is
   obvious to whoever is filling it in what belongs where. */
.sk-frame-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center; gap: 12px;
  align-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(23, 25, 28, .03) 0 10px, transparent 10px 20px),
    linear-gradient(140deg, #F1EBE3, #E7DFD5);
  text-align: center;
  padding: 24px;
}
.sk-frame-empty i {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(240, 83, 28, .5);
  box-shadow: 0 0 0 7px rgba(240, 83, 28, .08), inset 0 0 0 5px rgba(240, 83, 28, .14);
}
.sk-frame-empty em {
  font-style: normal;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em;
  color: #9A9186;
  max-width: 26ch;
  line-height: 1.5;
}

/* ---- the field, drawn ---- */
.sk-diagram { padding: clamp(50px, 9vh, 110px) 0; background: var(--ink, #17191C); color: #F4F1EC; }
.sk-h2 {
  margin: 0 0 clamp(22px, 3vh, 38px);
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.04; letter-spacing: -.035em;
}
.sk-diagram .sk-h2 { color: #F4F1EC; }
.sk-diagram-in svg { width: 100%; height: auto; display: block; }
/* The reference chart draws the ground SOLID and the flight paths DASHED,
   which is the right way round: the arc and the base line are things you can
   walk on, the flight paths are where something was a moment ago. The old
   version had it backwards. */
.sk-arc { fill: none; stroke: rgba(244, 241, 236, .55); stroke-width: 2.5; }
.sk-chord { stroke: rgba(244, 241, 236, .55); stroke-width: 2.5; }
/* the measurements, kept quiet so they read as annotation not as structure */
.sk-dim { stroke: rgba(244, 241, 236, .38); stroke-width: 1.4; color: rgba(244, 241, 236, .38); }
.sk-dim-lbl {
  fill: rgba(244, 241, 236, .72);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.sk-path-lbl {
  fill: rgba(244, 241, 236, .5);
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
}
/* colour on the element itself, so the arrow head (which uses currentColor)
   matches the line it belongs to instead of both arrows being orange */
.sk-flight { fill: none; stroke: currentColor; color: rgba(240, 83, 28, .9); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 6; }
.sk-flight--b { color: rgba(242, 162, 19, .9); }
.sk-cross { fill: #fff; }
.sk-note { fill: rgba(244, 241, 236, .82); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; }
.sk-house { fill: rgba(244, 241, 236, .14); stroke: rgba(244, 241, 236, .5); stroke-width: 2; }
.sk-lbl { fill: rgba(244, 241, 236, .65); font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.sk-stn circle { fill: var(--clay, #F0531C); }
.sk-stn text { fill: #fff; font-size: 14px; font-weight: 700; }
.sk-diagram-note {
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  max-width: 60ch;
  font-size: 14.5px; line-height: 1.6;
  color: rgba(244, 241, 236, .62);
}

/* ---- the words ---- */
.sk-gloss { padding: clamp(50px, 9vh, 110px) 0; }
.sk-gloss-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0;
  border-top: 1px solid rgba(23, 25, 28, .12);
}
.sk-gloss-list > div {
  padding: clamp(14px, 1.8vw, 20px) 0;
  border-bottom: 1px solid rgba(23, 25, 28, .12);
  padding-right: clamp(14px, 2vw, 30px);
}
.sk-gloss-list dt {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: -.02em;
  color: var(--clay, #F0531C);
}
.sk-gloss-list dd {
  margin: 5px 0 0;
  font-size: 14.5px; line-height: 1.6;
  color: #5A5F68;
}

/* ---- close ---- */
.sk-close { padding: clamp(56px, 10vh, 120px) 0; text-align: center; background: rgba(23, 25, 28, .028); }
.sk-close-title {
  margin: 0;
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -.04em;
}
.sk-close-lead {
  margin: clamp(14px, 2vh, 20px) auto clamp(24px, 3.4vh, 34px);
  max-width: 48ch;
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.65;
  color: #5A5F68;
}

@media (max-width: 900px) {
  .sk-ch-in { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
  /* on one column the picture always follows the words, whatever side it
     would have taken on a wide screen */
  .sk-ch.is-flip .sk-ch-words { order: 0; }
  .sk-ch-media { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-scroll i { animation: none; }
}

/* ============================================================
   52 · THE COMPETITION PANEL
   A button that says what is next, a calendar behind it, and a page of
   detail behind each fixture.
   ============================================================ */
.cp-lock, .cp-lock body { overflow: hidden; }

/* ---- the button ---- */
.cp-btn {
  position: fixed;
  left: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 300;
  display: flex; align-items: center; gap: 12px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 11px 18px 11px 12px;
  border: 0; border-radius: 999px;
  background: rgba(23, 25, 28, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #F4F1EC;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}
.cp-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(0, 0, 0, .38); }
.cp-btn-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clay, #F0531C);
  color: #fff;
}
.cp-btn-ico svg { width: 20px; height: 20px; }
.cp-btn-in { min-width: 0; display: block; }
.cp-btn-k {
  display: block;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--clay, #F0531C);
}
.cp-btn-t {
  display: block;
  margin-top: 1px;
  font-size: 13.5px; font-weight: 600;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-btn-d {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(244, 241, 236, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the reels page owns the whole screen, so the button stands down there */
body.rl-page .cp-btn, body.rl-full .cp-btn { display: none; }

@media (max-width: 620px) {
  /* on a phone it keeps the icon and the next event, and drops the date */
  .cp-btn { padding: 9px 14px 9px 9px; gap: 9px; }
  .cp-btn-d { display: none; }
  .cp-btn-t { font-size: 12.5px; }
}

/* ---- the sheet ---- */
.cp { position: fixed; inset: 0; z-index: 410; display: grid; place-items: end center; }
.cp[hidden] { display: none; }
.cp-back {
  position: absolute; inset: 0;
  background: rgba(9, 8, 7, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .32s ease;
}
.cp.is-on .cp-back { opacity: 1; }

.cp-sheet {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88svh, 900px);
  display: flex; flex-direction: column;
  background: var(--cream, #F6F3EC);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
}
.cp.is-on .cp-sheet { transform: none; opacity: 1; }
@media (min-width: 700px) {
  .cp { place-items: center; }
  .cp-sheet { border-radius: 22px; }
}

.cp-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px) clamp(14px, 2vw, 18px);
  border-bottom: 1px solid rgba(23, 25, 28, .1);
}
.cp-kicker {
  display: block;
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: -.03em;
}
.cp-intro { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: #6A6F78; max-width: 46ch; }
.cp-x {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(23, 25, 28, .07);
  color: #5C616A; font-size: 13px; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.cp-x:hover { background: var(--clay, #F0531C); color: #fff; }

.cp-body, .cp-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 20px) clamp(20px, 3vw, 30px) clamp(24px, 4vw, 34px);
}
.cp-body[hidden], .cp-detail[hidden] { display: none; }

/* ---- a month ---- */
.cp-month + .cp-month { margin-top: clamp(16px, 2.4vw, 24px); }
.cp-month h3 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #9AA0A8;
}
.cp-row {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  margin-bottom: 7px;
  border: 1px solid rgba(23, 25, 28, .09);
  border-radius: 13px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.cp-row:hover {
  border-color: var(--clay, #F0531C);
  transform: translateX(3px);
  box-shadow: 0 10px 24px rgba(23, 25, 28, .09);
}
/* one that has already happened steps back without disappearing */
.cp-row.is-past { opacity: .62; }
.cp-row.is-past:hover { opacity: 1; }

.cp-day {
  flex: 0 0 auto;
  width: 46px;
  text-align: center;
  line-height: 1;
}
.cp-day b {
  display: block;
  font-family: var(--f-disp); font-weight: 700;
  font-size: 21px; letter-spacing: -.02em;
  color: #17191C;
}
.cp-day i {
  display: block; margin-top: 2px;
  font-style: normal;
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--clay, #F0531C);
}
.cp-row-in { flex: 1 1 auto; min-width: 0; }
.cp-row-in b {
  display: block;
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: #17191C;
}
.cp-meta {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: #8A8F98;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-tags { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cp-res {
  font-style: normal;
  font-size: 12px; font-weight: 700;
  color: var(--clay, #F0531C);
}
.cp-st {
  font-style: normal;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(23, 25, 28, .07);
  color: #6A6F78;
}
.cp-st--upcoming, .cp-st--confirmed, .cp-st--entered {
  background: rgba(240, 83, 28, .12); color: #C33F13;
}
.cp-st--done { background: rgba(46, 148, 85, .13); color: #1E7A42; }
.cp-st--cancelled { background: rgba(23, 25, 28, .07); color: #9AA0A8; text-decoration: line-through; }

.cp-empty {
  margin: 20px 0;
  text-align: center;
  font-size: 14px; color: #8A8F98;
}

/* ---- one competition ---- */
.cp-back-btn {
  border: 0; background: transparent;
  padding: 0 0 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--clay, #F0531C);
  cursor: pointer;
}
.cp-d-head h3 {
  margin: 8px 0 0;
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.06; letter-spacing: -.03em;
}
.cp-d-meta { margin: 6px 0 0; font-size: 13.5px; color: #8A8F98; }
.cp-d-res {
  margin: 10px 0 0;
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(240, 83, 28, .1);
  color: #C33F13;
  font-size: 13.5px; font-weight: 700;
}
.cp-d-body { margin-top: clamp(14px, 2vw, 20px); }
.cp-d-body p {
  margin: 0 0 12px;
  font-size: 14.5px; line-height: 1.72; color: #4A4E57;
}

.cp-embed {
  margin-top: clamp(14px, 2vw, 20px);
  aspect-ratio: 16 / 9;
  border-radius: 13px;
  overflow: hidden;
  background: #000;
}
.cp-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.cp-shots {
  margin-top: clamp(14px, 2vw, 20px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 9px;
}
.cp-shot { margin: 0; border-radius: 11px; overflow: hidden; background: #EFE9E1; aspect-ratio: 4 / 3; }
.cp-shot img, .cp-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }

.cp-links { margin-top: clamp(14px, 2vw, 20px); display: flex; flex-wrap: wrap; gap: 8px; }
.cp-link {
  padding: 8px 15px;
  border: 1px solid rgba(23, 25, 28, .16);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: #17191C; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.cp-link:hover { border-color: var(--clay, #F0531C); color: var(--clay, #F0531C); }

@media (prefers-reduced-motion: reduce) {
  .cp-btn, .cp-sheet, .cp-back, .cp-row { transition: none; }
}

/* ============================================================
   51b · THE SKEET HERO, WIDENED AND MADE READY FOR FILM

   Three things happen here.

   1. THE FLAG. The page is called "Skeet?" in the navigation, so the page
      itself says "Skeet?" first, in the brand orange, before anything else.
      Somebody who lands here from a search should know inside a second what
      they are looking at.

   2. THE HEADING GETS ITS ROOM BACK. It used to sit in a 68ch column, which
      is the right measure for a paragraph and much too narrow for a 118px
      display face: "What is skeet?" broke across two lines with half the
      screen empty beside it. Prose keeps its measure; the heading does not.

   3. FILM. When a background video is added the hero flips from dark-on-
      cream to light-on-dark, and a scrim goes down between the footage and
      the words. Without it, white text over unknown footage is a gamble:
      any bright frame swallows the sentence. With it the text is legible
      over anything, which is what makes the slot safe to hand over.
   ============================================================ */

/* ---- 1 · the flag ---- */
/* the big orange word and the small section label read as one lockup, so
   they sit on one line and wrap together on a narrow phone */
.sk-flagrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(9px, 1.2vw, 15px);
  margin: 0 0 clamp(10px, 1.4vw, 16px);
}
.sk-flag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--clay, #F0531C);
}
/* a short rule after it, so it reads as a marker rather than a stray word */
.sk-flag::after {
  content: "";
  width: clamp(22px, 3.4vw, 48px);
  height: 2px;
  margin-left: clamp(9px, 1.2vw, 15px);
  background: currentColor;
  opacity: .45;
}
/* on the narrowest phones the label drops under the word rather than
   squeezing the two of them into nothing */
@media (max-width: 420px) {
  .sk-flag::after { display: none; }
  .sk-flagrow { gap: 4px; }
}

/* ---- 2 · the measure ---- */
/* the block is as wide as the page; the paragraphs inside keep their own
   measure, which is what stops this turning into unreadable long lines */
.sk-hero-in { max-width: min(100%, 1180px); }
.sk-title {
  max-width: 100%;
  /* when it genuinely does need two lines, split them evenly rather than
     leaving one word stranded */
  text-wrap: balance;
}

/* ---- 3 · the media layer ---- */
.sk-hero-media { position: absolute; inset: 0; margin: 0; z-index: 0; overflow: hidden; }
.sk-hero-media[hidden] { display: none; }
.sk-hero-img,
.sk-hero-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* a still sits behind the words as a faint wash and needs no scrim */
.sk-hero-img { opacity: .17; }
.sk-hero-vid { opacity: 1; }
.sk-hero-scrim { position: absolute; inset: 0; display: none; }

/* ---- the page as it is with film behind it ---- */
.sk-hero.has-video { background: #0B0A09; }
.sk-hero.has-video .sk-hero-img { opacity: 1; }
.sk-hero.has-video .sk-hero-scrim {
  display: block;
  background:
    linear-gradient(100deg,
      rgba(8, 7, 6, .92) 0%,
      rgba(8, 7, 6, .78) 40%,
      rgba(8, 7, 6, .42) 70%,
      rgba(8, 7, 6, .26) 100%),
    linear-gradient(to top, rgba(8, 7, 6, .6), rgba(8, 7, 6, 0) 58%);
}
.sk-hero.has-video .sk-title { color: #FFFFFF; }
.sk-hero.has-video .sk-lead { color: rgba(255, 255, 255, .82); }
.sk-hero.has-video .sk-eyebrow { color: #FF7A46; }
.sk-hero.has-video .sk-flag { color: #FF7A46; }
.sk-hero.has-video .sk-short {
  color: #F4F1EC;
  background: rgba(255, 255, 255, .09);
  border-left-color: #FF7A46;
  /* the panel has to hold its own over footage, so it gets a real edge */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 0 14px 14px 0;
}
.sk-hero.has-video .sk-scroll { border-color: rgba(255, 255, 255, .4); }
.sk-hero.has-video .sk-scroll i { background: #FF7A46; }

/* on a phone the picture is behind the whole column rather than beside it,
   so the wash has to be flat and heavier or nothing reads */
@media (max-width: 720px) {
  .sk-hero.has-video .sk-hero-scrim {
    background:
      linear-gradient(to top,
        rgba(8, 7, 6, .93) 0%,
        rgba(8, 7, 6, .8) 45%,
        rgba(8, 7, 6, .66) 100%);
  }
}

/* somebody who has asked for less movement gets the poster frame, held
   still, rather than a loop they did not ask for */
@media (prefers-reduced-motion: reduce) {
  .sk-hero-vid { display: none; }
}

/* ============================================================
   53 · THE PAGE WITHOUT JAVASCRIPT
   Almost nobody sees this. The ones who do are either a person with
   scripts switched off or a crawler that has none, and both deserve the
   facts set readably rather than as a wall of unstyled markup.
   ============================================================ */
.ns-profile {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) clamp(20px, 5vw, 40px);
  font-family: var(--f-body, Inter, system-ui, sans-serif);
  color: #2E3138;
  line-height: 1.7;
}
.ns-profile h1 {
  font-family: var(--f-disp, Georgia, serif);
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin: 0 0 .4em;
}
.ns-profile p { margin: 0 0 1.1em; }
.ns-profile ul { margin: 0 0 1.4em; padding-left: 1.2em; }
.ns-profile li { margin-bottom: .35em; }
.ns-profile a { color: var(--clay, #F0531C); }

/* ============================================================
   54 · A COMMENT THAT IS STILL WAITING
   Held for approval, and shown back only to the browser that sent it. It
   has to look unmistakably different from a published one, or its author
   will think it is live and everyone can read it.
   ============================================================ */
.bl-c.is-pending, .rlc-c.is-pending {
  opacity: .82;
  border-left: 2px dashed rgba(240, 83, 28, .55);
  padding-left: 12px;
}
.bl-c-wait, .rlc-wait {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--clay, #F0531C);
}
.rlc-wait { color: #FF7A46; }
@media (max-width: 520px) {
  .bl-c-wait, .rlc-wait { display: block; margin: 4px 0 0; }
}

/* ============================================================
   55 · A CARD WITH NO PICTURE, AND WHY IT WAS CLIPPED

   THE BUG. .bl-more-card is a column flex container and .bl-more-in is a
   flex item, so it carried the default min-width: auto and refused to
   shrink below the intrinsic width of its longest line. Measured on the
   live page: a 255px card holding a 424px block. The card clips what
   overflows, so the opening line was cut off mid-word with no ellipsis,
   and -webkit-line-clamp never fired because the text was never made to
   wrap in the first place. min-width: 0 is the whole fix.

   THE PLACEHOLDERS. A card with no photograph used to fill the slot with
   a dark gradient and an orange ring. That is a decoration standing in for
   a picture, and the brief is that a missing picture should look missing.
   The frame stays - it keeps the cards in a row the same height - but it
   goes quiet: the page's own paper tone, and nothing drawn on it.
   ============================================================ */
.bl-more-in,
.bl-more-card > .bl-more-in > span:last-child { min-width: 0; }
.bl-more-card b { overflow-wrap: anywhere; }

.bl-more-media--none,
.bl-card-media--none {
  position: relative;
  background: #EFE9E1;
}
.bl-more-media--none i,
.bl-card-media--none i { display: none; }

/* ============================================================
   56 · A FILM, FRAMED THE WAY SHE FRAMED IT

   The reels have always honoured the zoom and position set in Admin. Every
   other film on the site was stretched to whatever shape its slot happened
   to be, so a landscape clip in an upright frame lost its top and bottom and
   there was no way to say otherwise.

   data-framed marks a film that carries those settings. The custom
   properties are written inline by the renderer; the defaults here are what
   an unframed film gets, which is exactly what it got before.
   ============================================================ */
video[data-framed] {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}
/* "Show all of it" letter-boxes rather than cropping, so the dark ground
   behind has to be deliberate rather than whatever the slot was */
video[data-framed][style*="contain"] {
  transform: none;
  object-position: center;
}

/* ============================================================
   57 · BLOCKS: LISTS, SUB-HEADINGS AND QUOTES

   These come out of HA_BLOCKS and can appear inside ANY body of text on the
   site — a Skeet chapter, a Background subsection, a journal entry, the
   About story, the Support page. So they are styled once, in relative units,
   and inherit their size and colour from whatever is around them. A bullet
   list in a 17px chapter and the same list in a 15px card both look right
   without either knowing about the other.
   ============================================================ */
.rt-list {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
.rt-list li {
  position: relative;
  margin: 0 0 .5em;
  padding-left: 1.5em;
  line-height: inherit;
}
.rt-list li:last-child { margin-bottom: 0; }
/* a clay-coloured dot rather than a browser bullet, so it belongs to the
   brand and sits on the first line whatever the text does */
.rt-list li::before {
  content: "";
  position: absolute;
  left: .28em;
  top: .58em;
  width: .42em; height: .42em;
  border-radius: 50%;
  background: var(--clay, #F0531C);
}
.rt-list--num { counter-reset: rt; }
.rt-list--num li { padding-left: 1.9em; }
.rt-list--num li::before {
  counter-increment: rt;
  content: counter(rt) ".";
  left: 0; top: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--clay, #F0531C);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rt-h {
  margin: 1.6em 0 .55em;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.22em;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #17191C;
}
.rt-h--sm { font-size: 1.06em; letter-spacing: -.01em; }
.rt-h:first-child { margin-top: 0; }
.rt-quote {
  margin: 1.1em 0;
  padding-left: 1em;
  border-left: 3px solid var(--clay, #F0531C);
  font-family: var(--f-disp);
  font-size: 1.14em;
  line-height: 1.45;
  letter-spacing: -.015em;
  color: #17191C;
}

/* On a dark ground the headings and quotes have to invert, or they vanish.
   Named per section rather than globally, because the ones that are dark are
   a short and knowable list. */
.sk-diagram .rt-h, .sk-facts .rt-h, .rl-page .rt-h,
.sx-story .rt-h, .sx-thanks .rt-h, .sk-hero.has-video .rt-h { color: #F4F1EC; }
.sk-diagram .rt-quote, .sx-story .rt-quote, .sx-thanks .rt-quote { color: #F4F1EC; }
.sx-story .rt-list li, .sx-thanks .rt-list li { color: inherit; }

/* ============================================================
   58 · A CROPPED PICTURE

   The crop is three numbers on the end of the address rather than a second,
   flattened copy of the file. Which means the browser downloads and caches
   the ORIGINAL, the crop can be changed or removed at any time without
   losing anything, and re-cropping always starts from the full picture
   instead of cropping a crop.

   The same three custom properties the films use, so a photograph and a clip
   in the same row are framed by the same mechanism.
   ============================================================ */
img[data-cropped] {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}
/* a picture that is scaled up has to be clipped by something, and a few of
   the older slots never needed to say so because nothing ever overflowed */
img[data-cropped] { will-change: transform; }
.sk-ch-media, .bgx-tile, .shx-frame, .bgg-item, .shs-pic, .gal-item,
.cert-card, .bl-card-media, .bl-more-media, .cp-shot, .sty-img, .qp-media {
  overflow: hidden;
}


/* ============================================================
   59 - ONE PAGE, THREE PARTS

   Skeet, Shooting and Reels were three pages. They are three parts of the
   Shooting page now, in one vertical scroll, each one looking exactly as it
   did when it stood on its own.

   Three things are added, and nothing is redesigned:

     the tiles      three doors under the hero, so nobody is handed the
                    whole thing at once
     the openers    each part says its own name when you arrive in it
     the switcher   three floating buttons, one per part, so moving between
                    them while reading is one click rather than a scroll

   Plus the corrections below: a section written to sit under a fixed
   navigation bar holds a bar's worth of room at its top, and mid-page that
   room is simply a gap.
   ============================================================ */

/* ---- 59.1 the three tiles ---- */
.shpick {
  position: relative;
  background: var(--cream, #F6F3EC);
  padding: clamp(56px, 8vh, 118px) 0 clamp(60px, 9vh, 130px);
}
.shpick-head { text-align: center; max-width: 780px; margin: 0 auto clamp(30px, 4.4vh, 58px); }
.shpick-eyebrow { display: inline-block; color: var(--clay, #F0531C); }
.shpick-title {
  margin: clamp(8px, 1.2vw, 14px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.shpick-lead {
  margin: clamp(10px, 1.4vw, 16px) auto 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(14.5px, 1.1vw, 17px);
  line-height: 1.6;
}
.shpick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
}

/* one tile. Upright on purpose - three tall doors read as a choice, three
   wide bands read as a list of things you have to get through. */
.shpick-tile {
  --c: var(--clay, #F0531C);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(58svh, 560px);
  padding: clamp(20px, 2vw, 30px);
  border-radius: var(--r-lg, 28px);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .22), transparent 58%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--c) 92%, #fff) 0%,
      var(--c) 46%,
      color-mix(in srgb, var(--c) 72%, #17191C) 100%);
  box-shadow: var(--sh-md);
  /* the pop-out. Everything that moves is on one property, so the whole tile
     lifts as one object rather than in pieces. */
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
  will-change: transform;
}
/* a picture, when there is one. Until then the tile is its own colour, which
   is a design rather than a gap waiting to be filled.

   The zoom and the point it grows towards are the crop's own, set on the
   element by chrome.js when the address carries one. Written here rather
   than left to img[data-cropped] because the hover below is a more specific
   selector and would otherwise REPLACE the crop instead of adding to it. */
.shpick-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--fx, 50%) var(--fy, 50%);
  transition: transform .7s var(--e-out);
}
.shpick-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 26%, transparent) 0%,
    color-mix(in srgb, var(--c) 12%, transparent) 34%,
    rgba(12, 9, 8, .78) 100%);
  opacity: 0;
  transition: opacity .5s var(--e-out);
}
.shpick-tile.has-img::after { opacity: 1; }

.shpick-n {
  position: absolute;
  top: clamp(16px, 1.8vw, 26px);
  left: clamp(20px, 2vw, 30px);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .06em;
  opacity: .72;
}
.shpick-t {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.shpick-b {
  margin: clamp(8px, 1vw, 13px) 0 0;
  max-width: 34ch;
  font-size: clamp(13.5px, 1vw, 15.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
}
.shpick-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.shpick-go i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: transform .45s var(--e-out), background-color .45s;
}
.shpick-go svg { width: 15px; height: 15px; }

/* THE POP-OUT, on hover and on keyboard focus alike - a tile reached with the
   tab key has to show the same thing a pointer does or it cannot be used. */
.shpick-tile:hover,
.shpick-tile:focus-visible {
  transform: translateY(-14px) scale(1.035);
  box-shadow: 0 34px 78px rgba(23, 25, 28, .26);
  outline: none;
}
.shpick-tile:focus-visible { box-shadow: 0 34px 78px rgba(23, 25, 28, .26), 0 0 0 3px #fff, 0 0 0 6px var(--c); }
/* the hover MULTIPLIES the crop rather than discarding it. An uncropped
   picture has a --zoom of 1, so it is the same 1.06 it always was. */
.shpick-tile:hover img,
.shpick-tile:focus-visible img { transform: scale(calc(var(--zoom, 1) * 1.06)); }
.shpick-tile:hover .shpick-go i,
.shpick-tile:focus-visible .shpick-go i { transform: translateX(5px); background: rgba(255, 255, 255, .3); }
.shpick-tile:active { transform: translateY(-8px) scale(1.015); }

@media (max-width: 900px) {
  .shpick-grid { grid-template-columns: 1fr; gap: 14px; }
  .shpick-tile { min-height: min(42svh, 340px); }
  .shpick-b { max-width: 46ch; }
}
@media (prefers-reduced-motion: reduce) {
  .shpick-tile, .shpick-tile img, .shpick-go i { transition: none; }
  .shpick-tile:hover, .shpick-tile:focus-visible { transform: none; }
  /* the crop is framing, not motion, so it stays; only the growing stops */
  .shpick-tile:hover img,
  .shpick-tile:focus-visible img { transform: scale(var(--zoom, 1)); }
}

/* ---- 59.2 a part opener ----
   Built to match the Skeet part's own opening, so arriving in either one
   feels like the same page rather than two designs bolted together. */
.shpo {
  background: linear-gradient(180deg, var(--cream, #F6F3EC) 0%, #FAF7F1 100%);
  padding: clamp(54px, 8vh, 108px) 0 clamp(34px, 5vh, 64px);
}
.shpo-in { max-width: min(100%, 1180px); }
.shpo-flagrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(9px, 1.2vw, 15px);
  margin: 0 0 clamp(10px, 1.4vw, 16px);
}
.shpo-flag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--shpo-c, var(--clay, #F0531C));
}
.shpo-flag::after {
  content: "";
  width: clamp(22px, 3.4vw, 48px);
  height: 2px;
  margin-left: clamp(9px, 1.2vw, 15px);
  background: currentColor;
  opacity: .45;
}
.shpo-eyebrow { color: var(--muted); }
.shpo-title {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 78px);
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.shpo-lead {
  margin: clamp(12px, 1.5vw, 20px) 0 0;
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: #4A4E57;
}
.shpo-body { margin-top: clamp(14px, 1.8vw, 24px); max-width: 68ch; }
.shpo-body p { margin: 0 0 .85em; color: var(--muted); line-height: 1.7; }
.shpo-body p:last-child { margin-bottom: 0; }
/* an empty field must leave nothing behind, not an empty gap */
.shpo-title:empty, .shpo-lead:empty, .shpo-body:empty { display: none; }
@media (max-width: 420px) {
  .shpo-flag::after { display: none; }
  .shpo-flagrow { gap: 4px; }
}

/* ---- 59.3 the floating switcher ----
   Appears once the reader has chosen a tile (or scrolled past them under
   their own steam) and stays with them for the rest of the page. Left-hand
   side on a desktop, because the bottom right corner already belongs to Hind
   AI and the right edge of the reel band belongs to its own controls. */
.shfab {
  position: fixed;
  left: clamp(10px, 1.4vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s var(--e-out), visibility .45s;
}
.shfab.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.shfab[hidden] { display: none; }

.shfab-b {
  --c: var(--clay, #F0531C);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--c);
  color: #fff;
  font: 600 13px/1 var(--f-disp);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c) 38%, transparent), 0 2px 6px rgba(23, 25, 28, .16);
  /* each one slides in from the edge, a beat after the one above it */
  transform: translateX(-16px);
  transition: transform .5s var(--e-out), box-shadow .35s var(--e-out), filter .25s;
}
.shfab.is-on .shfab-b { transform: translateX(0); }
.shfab.is-on .shfab-b:nth-child(2) { transition-delay: .06s; }
.shfab.is-on .shfab-b:nth-child(3) { transition-delay: .12s; }
.shfab-b:hover, .shfab-b:focus-visible { filter: brightness(1.06); outline: none; }
.shfab.is-on .shfab-b:hover, .shfab.is-on .shfab-b:focus-visible { transform: translateX(4px); }
.shfab-b:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c); }
.shfab-b i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .5;
  transition: opacity .3s, transform .3s var(--e-out);
}
/* the part the reader is actually in */
.shfab-b.is-here i { opacity: 1; transform: scale(1.25); }
.shfab-b.is-here {
  box-shadow: 0 8px 26px color-mix(in srgb, var(--c) 52%, transparent), 0 0 0 2px rgba(255, 255, 255, .92);
}

/* out of the way when a reel is filling the screen, or the menu is open */
body.rl-full .shfab, body.menu-open .shfab { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 900px) {
  /* along the bottom left, clear of the Hind AI button in the other corner */
  .shfab {
    left: 10px;
    right: auto;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    transform: none;
    flex-direction: row;
    gap: 7px;
  }
  .shfab-b { height: 36px; padding: 0 12px 0 10px; font-size: 12px; gap: 7px; transform: translateY(14px); }
  .shfab.is-on .shfab-b { transform: translateY(0); }
  .shfab.is-on .shfab-b:hover, .shfab.is-on .shfab-b:focus-visible { transform: translateY(-2px); }
  .shfab-b i { width: 8px; height: 8px; }
}
@media (max-width: 400px) {
  /* three labels will not fit next to each other; the colour and the dot are
     what identify them at this size, and the name is still read aloud */
  .shfab-b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .shfab-b { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .shfab, .shfab-b { transition: opacity .2s linear; }
  .shfab-b, .shfab.is-on .shfab-b { transform: none; }
}

/* ---- 59.4 sections that are no longer the top of a page ----
   Both of these hold a navigation bar's worth of room above their words,
   which is right at the top of a page and is simply a gap in the middle of
   one. Nothing else about either of them changes. */
.sh-merged .sk-hero {
  min-height: min(56svh, 600px);
  padding-top: clamp(46px, 7vh, 96px);
}
.sh-merged .sk-hero .sk-scroll { display: none; }
.shpart--skeet { background: var(--cream, #F6F3EC); }
.sh-merged .rl { padding-top: clamp(40px, 6vh, 84px); }
/* full screen still means full screen */
body.sh-merged.rl-full .rl { padding-top: 0; }

/* a hidden part must take no room at all, not collapse to a sliver */
.shpart[hidden] { display: none; }