/* Red Banana v3 design system (DESIGN-V3.md is the spec; class names here are the contract for every page).
   Loaded on every page right after rb-v2.css, so its tokens and shell rules win over v2.1.
   Idea: the gallery at night. A dark room, one warm light, a museum label beside the work.
   Motion: one language, "the light comes up": a dark veil lifts off a thing, slowly, once. Nothing rises, nothing bounces.
   Sections: 1 fonts, 2 tokens, 3 base, 4 header, 5 footer, 6 type, 7 layout, 8 components, 9 motion, 10 home hero. */

/* 1. Fonts (the other three families are declared in rb-v2.css) */
@font-face{font-family:"Bodoni Moda";src:url(../fonts/v3/bodoni-moda-italic-var.woff2)format("woff2-variations"),url(../fonts/v3/bodoni-moda-italic-var.woff2)format("woff2");font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00B7,U+2018-2019,U+201C-201D,U+2026}
@font-face{font-family:"Bodoni Moda Fallback";src:local("Times New Roman Italic"),local("Liberation Serif Italic"),local("DejaVu Serif Italic"),local("Times New Roman"),local("Liberation Serif");font-style:italic;size-adjust:108%;ascent-override:92%;descent-override:26%}

/* 2. Tokens */
:root,[data-theme=dark]{
  /* colour: the dark room */
  --v3-ground:#0a0a0a;--v3-ground-2:#111110;--v3-surface:#161615;--v3-line:#2a2a28;--v3-line-strong:#454542;
  --v3-ink:#ecebe7;--v3-ink-2:#c8c6c0;--v3-ink-3:#a4a29c;--v3-ink-4:#82807a;
  --v3-red:#e2422e;--v3-red-fill:#cc3a27;--v3-red-hover:#b9311f;--v3-red-ink:#ff8a78;--v3-coral:#f07a64;
  --v3-paper:#ece8e1;--v3-paper-ink:#151412;--v3-paper-ink-2:#4a4740;--v3-paper-red:#b8301f;
  --v3-scrim:rgba(8,8,8,.86);
  /* type */
  --v3-font-display:"Bricolage Grotesque","Bricolage Grotesque Fallback",ui-sans-serif,sans-serif;
  --v3-font-serif:"Bodoni Moda","Bodoni Moda Fallback",ui-serif,serif;
  --v3-font-text:"Instrument Sans","Instrument Sans Fallback",ui-sans-serif,sans-serif;
  --v3-font-mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,monospace;
  --v3-t-display:clamp(2.75rem,4.6vw + 1.1rem,6rem);
  --v3-t-h2:clamp(2rem,3vw + 1rem,4rem);
  --v3-t-h3:clamp(1.375rem,.9vw + 1rem,1.875rem);
  --v3-t-lede:clamp(1.0625rem,.35vw + 1rem,1.3125rem);
  --v3-t-body:1.0625rem;--v3-t-small:.9375rem;
  --v3-t-label:.8125rem;--v3-t-label-sm:.75rem;
  /* space: a 4 px base */
  --v3-s-1:4px;--v3-s-2:8px;--v3-s-3:12px;--v3-s-4:16px;--v3-s-5:24px;--v3-s-6:32px;--v3-s-7:48px;--v3-s-8:64px;--v3-s-9:96px;--v3-s-10:144px;
  --v3-pad-x:clamp(20px,5vw,64px);--v3-section-y:clamp(72px,10vw,144px);--v3-max:1360px;--v3-gutter:clamp(16px,1.8vw,28px);
  --v3-radius:2px;--v3-radius-lg:6px;--v3-tap:48px;
  --v3-safe-top:env(safe-area-inset-top,0px);--v3-safe-bottom:env(safe-area-inset-bottom,0px);
  --v3-safe-left:env(safe-area-inset-left,0px);--v3-safe-right:env(safe-area-inset-right,0px);
  /* motion: one language */
  --v3-ease:cubic-bezier(.22,1,.36,1);--v3-ease-io:cubic-bezier(.65,0,.35,1);
  --v3-dur-1:160ms;--v3-dur-2:320ms;--v3-dur-3:900ms;--v3-dur-4:1600ms;
  --v3-veil:.62; /* how dark a thing is before its light comes up */
  /* v2 tokens re-pointed at v3, so older page rules follow */
  --ground:var(--v3-ground);--ink:var(--v3-ink);--ink-2:var(--v3-ink-2);--ink-3:var(--v3-ink-3);--ink-4:var(--v3-ink-4);--line:var(--v3-line);--line-strong:var(--v3-line-strong);
  --ease-out:var(--v3-ease);--ease-io:var(--v3-ease-io)
}
[data-theme=light]{
  --v3-ground:#f1ede4;--v3-ground-2:#ebe6db;--v3-surface:#e4dfd3;--v3-line:#d0c9ba;--v3-line-strong:#a9a293;
  --v3-ink:#1b1a17;--v3-ink-2:#3a3832;--v3-ink-3:#57544b;--v3-ink-4:#6b675d;
  --v3-red:#c2362a;--v3-red-fill:#c2362a;--v3-red-hover:#a92f21;--v3-red-ink:#a92f21;--v3-coral:#b8301f;
  --v3-scrim:rgba(241,237,228,.9);
  --ground:var(--v3-ground);--ink:var(--v3-ink);--ink-2:var(--v3-ink-2);--ink-3:var(--v3-ink-3);--ink-4:var(--v3-ink-4);--line:var(--v3-line);--line-strong:var(--v3-line-strong)
}
/* Always dark, whatever the theme: photographs, the hero, kiosk screens */
.v3-dark{
  --v3-ground:#0a0a0a;--v3-ground-2:#111110;--v3-surface:#161615;--v3-line:#2a2a28;--v3-line-strong:#454542;
  --v3-ink:#ecebe7;--v3-ink-2:#c8c6c0;--v3-ink-3:#a4a29c;--v3-ink-4:#82807a;
  --v3-red:#e2422e;--v3-red-fill:#cc3a27;--v3-red-hover:#b9311f;--v3-red-ink:#ff8a78;--v3-coral:#f07a64;
  --ink:var(--v3-ink);--ink-2:var(--v3-ink-2);--ink-3:var(--v3-ink-3);--line:var(--v3-line);--line-strong:var(--v3-line-strong);
  color:var(--v3-ink);color-scheme:dark
}

/* 3. Base */
html,body{background:var(--v3-ground)}
body{color:var(--v3-ink);font-family:var(--v3-font-text);font-size:var(--v3-t-body);line-height:1.6}
::selection{background:var(--v3-red);color:#fff}
:focus-visible{outline:2px solid var(--v3-red-ink);outline-offset:3px}
[data-theme=light] :focus-visible{outline-color:var(--v3-red)}

/* 4. Header (markup unchanged from v2.1: #site-header.v3-nav) */
#site-header.v3-nav{background:color-mix(in srgb,var(--v3-ground) 98%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--v3-line)}
#site-header .wordmark-name{font:700 .875rem/1.05 var(--v3-font-display);letter-spacing:-.01em}
#site-header .v3-nav-links{margin:0 0 0 auto;gap:clamp(2px,1vw,12px)}
#site-header .v3-nav-links a{font:500 .9375rem/1 var(--v3-font-text);color:var(--v3-ink-2);padding:0 10px}
#site-header .v3-nav-links a::after{left:10px;right:10px;bottom:11px;height:1px;background:var(--v3-red)}
#site-header .v3-nav-links a:hover,#site-header .v3-nav-links a[aria-current=page]{color:var(--v3-ink)}
/* Settings: a round icon button, the word stays for screen readers */
.rb-set-btn{min-width:var(--v3-tap);min-height:var(--v3-tap);width:var(--v3-tap);padding:0;justify-content:center;border-color:var(--v3-line-strong);color:var(--v3-ink)}
.rb-set-btn .rb-set-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rb-set-btn:hover,.rb-set-btn[aria-expanded=true]{border-color:var(--v3-ink-3);background:color-mix(in srgb,var(--v3-ink) 8%,transparent)}
@media (max-width:760px){.rb-set-btn,#site-header .rb-set-btn{width:48px;min-width:48px;min-height:48px}}
/* Wide screens: the Settings button says what it is (jurors QA2 R2 read the bare icon as a debug control) */
@media (min-width:1100px){html body #site-header .rb-set-btn{width:auto;gap:8px;padding:0 16px 0 14px;border-radius:999px}html body #site-header .rb-set-btn .rb-set-txt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font:500 .875rem/1 var(--v3-font-text)}}
/* Over a dark hero (home): the bar is clear at the top and fills in as the page scrolls (CSS scroll timeline, no JS).
   Without scroll timelines the bar keeps its normal fill. The ink stays light while the bar is clear, in both themes. */
@supports (animation-timeline:scroll()){
  html.v3-has-hero #site-header.v3-nav{animation:v3-head-fill linear both!important;animation-timeline:scroll(root)!important;animation-range:0 160px!important}
}
@keyframes v3-head-fill{
  0%{background-color:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;--v3-ink:#ecebe7;--v3-ink-2:#d6d4cf;--v3-line-strong:rgba(236,235,231,.4);--ink:#ecebe7}
  99%{background-color:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;--v3-ink:#ecebe7;--v3-ink-2:#d6d4cf;--v3-line-strong:rgba(236,235,231,.4);--ink:#ecebe7}
  100%{background-color:color-mix(in srgb,var(--v3-ground) 98%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--v3-line)}
}
.v3-has-hero #site-header .wordmark-name{color:var(--v3-ink)}

/* 5. Footer (markup unchanged: #site-footer) */
#site-footer{background:var(--v3-ground);border-top:1px solid var(--v3-line);color:var(--v3-ink-3);padding:clamp(40px,5vw,64px) var(--v3-pad-x)}
#site-footer .wrap{max-width:var(--v3-max)}
#site-footer .brand-link{font:700 1rem/1.3 var(--v3-font-display);letter-spacing:-.01em;color:var(--v3-ink)}
#site-footer .legal{font:500 .75rem/1.7 var(--v3-font-mono);letter-spacing:.02em;color:var(--v3-ink-3)}
#site-footer .legal a{color:var(--v3-ink-2)}
#site-footer .legal a:hover{color:var(--v3-ink)}

/* 6. Type */
.v3-display{margin:0;font:700 var(--v3-t-display)/.92 var(--v3-font-display);letter-spacing:-.045em;color:var(--v3-ink);text-wrap:balance}
.v3-h2{margin:0;font:700 var(--v3-t-h2)/.98 var(--v3-font-display);letter-spacing:-.035em;color:var(--v3-ink);text-wrap:balance}
.v3-h3{margin:0;font:700 var(--v3-t-h3)/1.08 var(--v3-font-display);letter-spacing:-.025em;color:var(--v3-ink)}
/* The one serif: an italic Bodoni word inside a display or h2 heading */
html body :is(.v3-display,.v3-h2,.v3-h3) em{font-family:var(--v3-font-serif)!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.02em!important;font-size:1.04em!important;color:var(--v3-ink)!important;font-synthesis:none}
html body :is(.v3-display,.v3-h2,.v3-h3) em.v3-accent{color:var(--v3-coral)!important}
.v3-lede{margin:0;max-width:40ch;font:400 var(--v3-t-lede)/1.5 var(--v3-font-text);color:var(--v3-ink-2);text-wrap:pretty}
.v3-body{max-width:64ch;color:var(--v3-ink-2)}
.v3-mono{font:500 var(--v3-t-label)/1.5 var(--v3-font-mono);letter-spacing:.06em}
/* Eyebrow: a red rule, then a mono line in caps */
.v3-eyebrow{display:flex;align-items:center;gap:14px;margin:0;font:500 var(--v3-t-label)/1.3 var(--v3-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--v3-red-ink)}
.v3-eyebrow::before{content:"";flex:none;width:32px;height:1px;background:currentColor}

/* 7. Layout */
.v3-wrap{max-width:var(--v3-max);margin:0 auto}
.v3-section{padding:var(--v3-section-y) var(--v3-pad-x);scroll-margin-top:var(--head-h,72px)}
.v3-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--v3-gutter)}
@media (max-width:699px){.v3-grid{grid-template-columns:minmax(0,1fr)}.v3-grid>*{grid-column:1/-1!important}}
/* Numbered section head: 02 · Title ............ aside. Same rule as the v2.1 .sx-head, so home and inner pages match. */
.v3-head,.sx-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:clamp(12px,1.6vw,24px);padding:16px 0 clamp(20px,2.4vw,36px);border-top:1px solid var(--v3-line-strong)}
.v3-head__n,.sx-n{font:500 var(--v3-t-label)/1 var(--v3-font-mono);letter-spacing:.12em;color:var(--v3-red-ink)}
.v3-head__n::after{content:" ·";color:var(--v3-ink-4)}
.v3-head__t,.sx-t{margin:0;font:700 var(--v3-t-h2)/.98 var(--v3-font-display);letter-spacing:-.035em;color:var(--v3-ink)}
.v3-head__aside,.sx-sub{margin:0;font:500 var(--v3-t-label)/1.5 var(--v3-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v3-ink-2);text-align:right}
@media (max-width:699px){.v3-head,.sx-head{grid-template-columns:auto minmax(0,1fr)}.v3-head__aside,.sx-sub{grid-column:2;text-align:left;margin-top:8px}}

/* 8. Components */
/* Buttons. Primary: a solid red block, square corners (a museum sign, not a pill). Link: text with a 1 px rule. Ghost: hairline box. */
.v3-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--v3-tap);padding:0 24px;border:1px solid transparent;border-radius:var(--v3-radius);
  font:600 1rem/1 var(--v3-font-text);letter-spacing:0;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--v3-dur-1) var(--v3-ease),border-color var(--v3-dur-1) var(--v3-ease),color var(--v3-dur-1) var(--v3-ease)}
.v3-btn--primary{min-height:52px;background:var(--v3-red-fill);border-color:var(--v3-red-fill);color:#fff}
.v3-btn--primary:hover{background:var(--v3-red-hover);border-color:var(--v3-red-hover)}
.v3-btn--ghost{background:transparent;border-color:var(--v3-line-strong);color:var(--v3-ink)}
.v3-btn--ghost:hover{border-color:var(--v3-ink)}
.v3-btn--link{min-height:var(--v3-tap);padding:0 2px;border:0;border-radius:0;background:none;color:var(--v3-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:color-mix(in srgb,var(--v3-ink) 55%,transparent)}
.v3-btn--link:hover{text-decoration-color:var(--v3-red-ink)}
.v3-btn:focus-visible{outline:2px solid var(--v3-red-ink);outline-offset:4px}
.v3-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
/* Museum label: the caption card beside a work. Paper, mono, a red credit line. Can be a link (a.v3-label) or a plain div. */
.v3-label{display:grid;gap:6px;max-width:320px;padding:18px 20px 16px;background:var(--v3-paper);color:var(--v3-paper-ink);border-radius:var(--v3-radius);text-decoration:none;
  font:500 var(--v3-t-label-sm)/1.45 var(--v3-font-mono);letter-spacing:.02em;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.v3-label__title{font:500 1rem/1.25 var(--v3-font-mono);letter-spacing:.01em;color:var(--v3-paper-ink);margin-bottom:4px}
.v3-label__meta{color:var(--v3-paper-ink-2)}
.v3-label__credit{color:var(--v3-paper-red)}
a.v3-label{transition:transform var(--v3-dur-2) var(--v3-ease)}
a.v3-label:hover .v3-label__title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
a.v3-label:focus-visible{outline:2px solid var(--v3-red-ink);outline-offset:4px}
/* Inline label: the same three lines with no card, on the dark ground (phones, under a photograph) */
.v3-label--inline{max-width:none;padding:0;background:none;box-shadow:none;color:var(--v3-ink-2)}
.v3-label--inline .v3-label__title{color:var(--v3-ink)}
.v3-label--inline .v3-label__meta{color:var(--v3-ink-2)}
.v3-label--inline .v3-label__credit{color:var(--v3-red-ink)}
/* Chip: a small mono control (the hero light, filters) */
.v3-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border:1px solid var(--v3-line-strong);border-radius:var(--v3-radius);background:color-mix(in srgb,var(--v3-ground) 70%,transparent);
  color:var(--v3-ink);font:500 var(--v3-t-label-sm)/1 var(--v3-font-mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v3-chip:hover{border-color:var(--v3-ink-3)}
.v3-chip[aria-pressed=true]{border-color:var(--v3-red-ink);color:var(--v3-red-ink)}
/* Peek: the next section's number and name, a rule to the edge, a round arrow (bottom of the hero) */
.v3-peek{display:flex;align-items:center;gap:20px;min-height:var(--v3-tap);color:var(--v3-red-ink);text-decoration:none;font:500 var(--v3-t-label)/1 var(--v3-font-mono);letter-spacing:.16em;text-transform:uppercase}
.v3-peek__rule{flex:1;height:1px;background:color-mix(in srgb,var(--v3-ink) 22%,transparent)}
.v3-peek__arrow{flex:none;display:grid;place-items:center;width:var(--v3-tap);height:var(--v3-tap);border:1px solid color-mix(in srgb,var(--v3-ink) 40%,transparent);border-radius:50%;color:var(--v3-ink);transition:border-color var(--v3-dur-1) var(--v3-ease),transform var(--v3-dur-2) var(--v3-ease)}
.v3-peek:hover .v3-peek__arrow{border-color:var(--v3-ink);transform:translateY(3px)}
.v3-peek:focus-visible{outline:2px solid var(--v3-red-ink);outline-offset:4px}
/* Slot: an empty section another job fills (kiosk, services map). Visible head, nothing else. */
.v3-slot{padding:clamp(48px,6vw,96px) var(--v3-pad-x) 0}
.v3-slot>.v3-wrap{min-height:1px}

/* 9. Motion: the light comes up.
   A thing waits behind a dark veil (opacity var(--v3-veil)) and the veil lifts over var(--v3-dur-3) with var(--v3-ease). Once.
   Hero light: the WebGL light fades up over var(--v3-dur-4). Kiosk wake: the screen veil lifts over var(--v3-dur-3).
   Map lift: a region lifts 4 px and its light comes up over var(--v3-dur-2). Hover: var(--v3-dur-1) colour, var(--v3-dur-2) movement.
   Section reveal: put data-v3-reveal on a media box; its veil lifts as it enters the screen (CSS scroll timeline; static where unsupported).
   Content is never hidden: the veil is a ::after overlay, text and images are painted at rest, so captures and LCP never wait. */
[data-v3-reveal]{position:relative;isolation:isolate}
[data-v3-reveal]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#000;opacity:0;border-radius:inherit}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html:not(.reduced-motion):not(.is-lite):not(.rb-lite-boot) [data-v3-reveal]::after{animation:v3-light-up linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  }
}
@keyframes v3-light-up{from{opacity:var(--v3-veil)}to{opacity:0}}
@keyframes v3-light-up-once{from{opacity:var(--v3-veil)}to{opacity:0}}
.v3-lift{transition:transform var(--v3-dur-2) var(--v3-ease),filter var(--v3-dur-2) var(--v3-ease)}
.v3-lift:is(:hover,:focus-visible,.is-on){transform:translateY(-4px);filter:brightness(1.12)}
@media (prefers-reduced-motion:reduce){
  :root{--v3-dur-1:0ms;--v3-dur-2:0ms;--v3-dur-3:0ms;--v3-dur-4:0ms}
  [data-v3-reveal]::after{animation:none!important;opacity:0!important}
  .v3-lift:is(:hover,:focus-visible,.is-on){transform:none}
}
html.reduced-motion{--v3-dur-1:0ms;--v3-dur-2:0ms;--v3-dur-3:0ms;--v3-dur-4:0ms}
html.reduced-motion .v3-lift:is(:hover,:focus-visible,.is-on){transform:none}

/* 10. Home hero: "The Wall" (index.html only; markup in DESIGN-V3.md section 9) */
.v3-hero{position:relative;isolation:isolate;overflow:hidden;background:#0a0a0a}
.v3-hero__media{position:absolute;inset:0;z-index:0;margin:0}
.v3-hero__media picture{display:contents}
.v3-hero__photo{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.v3-hero__gl{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;transition:opacity var(--v3-dur-4) var(--v3-ease);pointer-events:none}
.v3-hero__gl.is-on{opacity:1}
/* Without WebGL the photograph waits in the dark and its light comes up once on load */
.v3-hero__veil{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  html:not(.reduced-motion):not(.is-lite):not(.rb-lite-boot) .v3-hero__veil{animation:v3-light-up-once var(--v3-dur-4) var(--v3-ease) 80ms backwards}
}
.v3-hero__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.72) 30%,rgba(8,8,8,.18) 58%,rgba(8,8,8,0) 72%),
             linear-gradient(180deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.3) 10%,rgba(8,8,8,0) 20%,rgba(8,8,8,0) 72%,rgba(8,8,8,.88) 100%)}
.v3-hero__in{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:var(--v3-s-6);
  min-height:clamp(640px,100svh,1100px);max-width:calc(var(--v3-max) + 2 * var(--v3-pad-x));margin:0 auto;padding:calc(var(--head-h,72px) + 32px) var(--v3-pad-x) 24px;pointer-events:none}
.v3-hero__in a,.v3-hero__in button,.v3-hero__copy{pointer-events:auto}
.v3-hero__copy{grid-column:1;grid-row:1;align-self:center;display:grid;gap:clamp(20px,2.2vw,32px);max-width:620px;padding-bottom:48px}
.v3-hero .v3-display{font-size:clamp(3rem,4.4vw + 1rem,5.75rem)}
.v3-hero .v3-display .ln{display:block}
.v3-hero .v3-lede{max-width:34ch;color:#d6d4cf}
.v3-hero .v3-actions{margin-top:8px}
.v3-hero__label{grid-column:2;grid-row:1;align-self:end;justify-self:end;margin-bottom:48px}
.v3-hero__peek{grid-column:1/-1;grid-row:2}
/* The light control: top right, only when the WebGL light runs */
.v3-hero__light{position:absolute;z-index:5;right:var(--v3-pad-x);top:calc(var(--head-h,72px) + 24px)}
.v3-hero__light[hidden],.v3-hero__hint[hidden]{display:none}
.v3-hero__light svg{width:16px;height:10px}
.v3-hero__hint{position:absolute;z-index:5;left:0;top:0;display:flex;align-items:center;gap:12px;pointer-events:none;color:var(--v3-ink);opacity:0;transition:opacity var(--v3-dur-3) var(--v3-ease);will-change:transform}
.v3-hero__hint.is-on{opacity:1}
.v3-hero__hint i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:1.5px solid rgba(236,235,231,.9);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.25)}
.v3-hero__hint span{position:absolute;left:34px;top:-11px;white-space:nowrap;padding:6px 9px;background:rgba(10,10,10,.82);font:500 .75rem/1 var(--v3-font-mono);letter-spacing:.16em;text-transform:uppercase}
/* Tablets and phones: the photograph on top (a portrait crop), the words below it on the dark ground */
@media (max-width:768px){
  .v3-hero__media{position:relative;inset:auto;aspect-ratio:3/4;max-height:44svh;width:100%}
  .v3-hero__photo{object-position:40% 50%}
  .v3-hero__scrim{bottom:auto;height:min(133.34vw,44svh);background:linear-gradient(180deg,rgba(8,8,8,.85) 0%,rgba(8,8,8,.45) 9%,rgba(8,8,8,0) 22%,rgba(8,8,8,0) 80%,rgba(10,10,10,1) 100%)}
  .v3-hero__veil{bottom:auto;height:min(133.34vw,44svh)}
  .v3-hero__in{display:flex;flex-direction:column;min-height:0;max-height:none;padding:20px var(--v3-pad-x) 32px;gap:28px;pointer-events:auto}
  .v3-hero__copy,.v3-hero__label{align-self:stretch}
  .v3-hero__label{order:1;margin:0;justify-self:auto;max-width:none;padding:0;background:none;box-shadow:none;font-size:.8125rem}
  .v3-hero__label .v3-label__title{color:var(--v3-ink)}
  .v3-hero__label .v3-label__meta{color:var(--v3-ink-2)}
  .v3-hero__label .v3-label__credit{color:var(--v3-red-ink)}
  .v3-hero__copy{padding:0;gap:18px}
  .v3-hero .v3-display{font-size:clamp(2.75rem,11.5vw,4.5rem)}
  .v3-hero__peek{order:2;margin-top:8px}
}
@media (min-width:561px) and (max-width:768px){.v3-hero__media{aspect-ratio:4/3;max-height:48svh}.v3-hero__photo{object-position:30% 50%}.v3-hero__scrim,.v3-hero__veil{height:min(75vw,48svh)}}
@media (max-width:420px){.v3-hero .v3-eyebrow{font-size:.75rem;letter-spacing:.12em;gap:10px}.v3-hero .v3-eyebrow::before{width:20px}}
@media (max-width:380px){.v3-hero .v3-actions{gap:10px 18px}.v3-hero .v3-btn--primary{padding:0 18px}}
@media (min-width:769px) and (max-width:1100px){
  .v3-hero__in{grid-template-columns:minmax(0,1fr)}
  .v3-hero__label{grid-column:1;grid-row:2;justify-self:end;margin:0 0 20px}
  .v3-hero__peek{grid-row:3}
  .v3-hero__in{grid-template-rows:1fr auto auto}
}
/* Closing call (home 07 and every inner page): the second line is the one serif accent, as in every v3 display heading */
html body .hend-t em{display:block;font-family:var(--v3-font-serif)!important;font-style:italic!important;font-weight:400!important;font-size:1.04em!important;letter-spacing:-.02em!important;color:var(--v3-coral)!important;font-synthesis:none}
/* Phones and tablets: the museum label sits on the dark foot of the photograph, so the first screen ends on the words and buttons (jurors R2, R3) */
@media (max-width:768px){.v3-hero__in .v3-hero__label{position:absolute;z-index:5;left:var(--v3-pad-x);right:auto;max-width:calc(100% - 2 * var(--v3-pad-x));top:0;transform:translateY(calc(-100% - 14px));order:0;margin:0;padding:10px 12px;gap:2px;background:rgba(10,10,10,.84);border-left:2px solid var(--v3-red);font-size:.75rem;line-height:1.45}}
/* Phones: the museum label is one small line, so the H1 reads first (jurors QA2 R2); the venue is on the Studio page it links to */
@media (max-width:768px){
  html body .v3-hero__in .v3-hero__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:8px 10px;font-size:.75rem;line-height:1.35}
  html body .v3-hero__label .v3-label__title{font-size:.8125rem;margin:0}
  html body .v3-hero__label .v3-label__meta{display:none}
}
@media (max-width:560px){.v3-hero__media{max-height:40svh}.v3-hero__scrim,.v3-hero__veil{height:min(133.34vw,40svh)}}
/* 13 px floor for small mono labels and the footer legal lines, site-wide (jurors QA1 R1 to R3, QA2 R2: low vision) */
html body :is(.v3-label__meta,.v3-label__credit,.v3-hero__light,.wk-n,.wk-kind,.wk-year,.hc-n,.pf-scale-lbl,.pf-filter sup,.pf-play,.pf-fact-l,.pf-h2.mono-h,.pf-credits dt,.st-facts dt,.pf-bi,.pf-still-cap,.pf-pager-lab,.st-cap,.st-badge){font-size:13px!important}
@media (max-width:760px){html body :is(.pf-crumb-n,.pf-crumbs a,.pf-crumbs span,.pf-num,.pf-cat,.pf-year,.pf-card-device,.pf-card-tag,.pf-card-cta,.st-artist,.st-n){font-size:13px!important}}
@media (min-width:769px){html body .v3-hero .v3-label{max-width:360px}}
html body #site-footer .legal,html body #site-footer .legal :is(span,a){font-size:13px!important;line-height:1.6;color:var(--v3-ink-2)}
html body .kx-tag{font-size:12px!important}
@media (min-width:561px) and (max-width:768px){html body .v3-hero__in .v3-hero__label{min-height:48px;box-sizing:border-box}}
/* One light instruction at a time: the chip appears when the pointer hint fades (keyboard focus still shows it) (jurors QA2 R3) */
.v3-hero__light{transition:opacity var(--v3-dur-3) var(--v3-ease)}
.v3-hero.is-hinting .v3-hero__light:not(:focus-visible){opacity:0}
/* Phones: a deeper top scrim so the wordmark and Settings read on the pink wall (jurors QA2 R4) */
@media (max-width:768px){html body .v3-hero__scrim{background:linear-gradient(180deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.7) 14%,rgba(8,8,8,0) 30%,rgba(8,8,8,0) 80%,rgba(10,10,10,1) 100%)}}

/* Word spacing (step 2E). Instrument Sans has a very narrow space (0.2 em, about 3 px at 17 px), so body copy read "servedby" and "StaticHTML".
   Body copy only: paragraphs, list items, definitions, quotes, table cells and captions in the page and the footer. The header, the nav, the phone tab bar,
   headings, the mono labels and the kiosk demo are left as they were. */
:where(main,#site-footer) :is(p,li,dd,blockquote,td,figcaption){word-spacing:.08em}
main :is(.v3-eyebrow,.eyebrow,.bt-num,.bt-method,.sx-sub,.kq-count,.kq-flag,.cl-hint,.cl-no,.cl-checked,.cl-cap,.cl-btn,.cl-tl,.cl-tl li,.lk-kicker,.st-artist,.mono,.byline,.medium,.art-colophon,.pf-crumb-n,.pf-fact-l,.kx-status,.ctl-mail,td.n,time,code,.wk-label,.wk-kind,.wk-spec,.v3-label__title,.v3-label__meta,.v3-label__credit),
main .kx :is(p,li,dd,blockquote,td,figcaption),#site-footer .brand-link{word-spacing:normal}

/* Home on phones (step 2E): a soft dark scrim behind the header while it sits on the hero photograph, so the wordmark and Settings hold contrast; it fades with the header's own fill once the page scrolls */
@media (max-width:768px){html.v3-has-hero #site-header.v3-nav{isolation:isolate}html.v3-has-hero #site-header.v3-nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-28px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(8,8,8,.88),rgba(8,8,8,.55) 55%,rgba(8,8,8,0))}}

/* Step 2F stage A: display tracking, four real numbers on the hero, dark caption rail, full-bleed phone hero */
.v3-display{letter-spacing:-.035em}
.v3-hero__first{display:contents}
.v3-hero__in{grid-template-rows:1fr auto auto}
.v3-hero__facts{grid-column:1;grid-row:2;align-self:end;list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;pointer-events:none}
.v3-hero__facts li{border-top:1px solid rgba(236,235,231,.28);padding-top:14px}
.v3-hero__facts b{display:block;font:700 clamp(2rem,3.1vw,2.875rem)/1 var(--v3-font-display);letter-spacing:-.03em;color:var(--v3-ink);word-spacing:0}
.v3-hero__facts span{display:block;margin-top:10px;font-size:.9rem;line-height:1.4;color:var(--v3-ink-2);max-width:23ch}
html body .v3-hero .v3-hero__label{grid-column:2;grid-row:2;align-self:end;justify-self:end;margin:0 0 20px;max-width:300px;padding:2px 0 2px 16px;gap:2px;background:linear-gradient(90deg,rgba(10,10,10,.55),rgba(10,10,10,0));border-left:2px solid var(--v3-red);border-radius:0;box-shadow:none;color:var(--v3-ink-2)}
html body .v3-hero .v3-hero__label .v3-label__title{color:var(--v3-ink);font-size:.9375rem;margin-bottom:2px}
html body .v3-hero .v3-hero__label .v3-label__meta{color:var(--v3-ink-2)}
html body .v3-hero .v3-hero__label .v3-label__credit{color:var(--v3-red-ink)}
.v3-hero__peek{grid-row:3}
.v3-hero__scrim{background:linear-gradient(90deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.72) 30%,rgba(8,8,8,.18) 58%,rgba(8,8,8,0) 72%),linear-gradient(180deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.3) 10%,rgba(8,8,8,0) 20%),linear-gradient(0deg,rgba(8,8,8,.96) 0,rgba(8,8,8,.55) 18%,rgba(8,8,8,0) 38%)}
@media (min-width:769px) and (max-width:1100px){
  .v3-hero__in{grid-template-rows:1fr auto auto auto}
  .v3-hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .v3-hero .v3-hero__label{grid-column:1;grid-row:3;justify-self:start;margin:0 0 20px}
  .v3-hero__peek{grid-row:4}
}
@media (max-width:768px){
  html body .v3-hero{background:#0a0a0a}
  html body .v3-hero__media{position:absolute;inset:0 0 auto 0;aspect-ratio:auto;max-height:none;width:auto;height:100svh}
  html body .v3-hero__photo{object-position:46% 18%}
  html body .v3-hero__veil{inset:0 0 auto 0;height:100svh;bottom:auto}
  html body .v3-hero__scrim{inset:0 0 auto 0;height:100svh;bottom:auto;background:linear-gradient(180deg,rgba(8,8,8,.9) 0,rgba(8,8,8,.6) 90px,rgba(8,8,8,0) 210px),linear-gradient(0deg,#0a0a0a 0,rgba(10,10,10,.96) 28%,rgba(10,10,10,.62) 46%,rgba(10,10,10,0) 64%)}
  html body .v3-hero__in{display:block;position:relative;min-height:0;padding:0;max-width:none;pointer-events:none}
  html body .v3-hero__first{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding:0 var(--v3-pad-x) 92px;gap:16px;pointer-events:auto}
  html body .v3-hero__in .v3-hero__label{position:static;transform:none;order:-1;align-self:flex-start;display:grid;gap:2px;max-width:none;margin:0;padding:0 0 0 10px;background:none;border-left:2px solid var(--v3-red);min-height:0}
  html body .v3-hero__in .v3-hero__label .v3-label__title{font-size:.8125rem;margin:0}
  html body .v3-hero__in .v3-hero__label .v3-label__meta{display:none}
  html body .v3-hero__copy{padding:0;gap:16px}
  html body .v3-hero .v3-display{font-size:clamp(2.75rem,12vw,4.5rem);line-height:.93}
  .v3-hero__facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;margin:0;padding:28px var(--v3-pad-x) 44px;pointer-events:none}
  .v3-hero__facts b{font-size:2.125rem}
  .v3-hero__facts span{font-size:.875rem}
  .v3-hero__peek{display:none}
}

/* Step 2F stage B (comp 2): the lit wall. One photograph under one dark layer that has a pool of light cut out of it (a radial gradient, no filter, no mask, no extra image).
   The photograph stays the LCP element. This is also the no-WebGL, Lite, reduced-motion and phone state: the light rests at its default spot (--lx, --ly).
   With WebGL on (wide screens, a fine pointer, motion allowed) the canvas draws over this layer and the light follows the pointer. */
.v3-hero{--lx:66%;--ly:42%;--lr:32vmax}
.v3-hero__lit{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle var(--lr) at var(--lx) var(--ly),rgba(8,8,10,0) 0,rgba(8,8,10,.1) 26%,rgba(8,8,10,.52) 58%,rgba(8,8,10,.72) 100%)}
.v3-hero__lit::after{content:"";position:absolute;inset:0;background:radial-gradient(circle 20vmax at var(--lx) var(--ly),rgba(255,150,130,.13),rgba(255,150,130,0) 70%);mix-blend-mode:screen}
@media (max-width:768px){
  html body .v3-hero{--lx:56%;--ly:27%;--lr:62vmin}
  html body .v3-hero__lit{inset:0 0 auto 0;height:100svh}
}
@media (max-width:768px){html body .v3-hero__in .v3-hero__label{min-height:48px;box-sizing:border-box;align-content:center}}

/* Mobile-first polish: Safe-area-insets, canvas touch-action, 360px grid tuning */
canvas,.v3-hero__gl,.pf-stage canvas,.st-replica-stage canvas,#webgl-canvas,#loupe-canvas{touch-action:pan-y!important}

@media (max-width:768px){
  #site-header.v3-nav{padding-top:env(safe-area-inset-top,0px)!important;height:calc(var(--head-h,72px) + env(safe-area-inset-top,0px));padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px))!important;padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))!important}
  html{scroll-padding-top:calc(var(--head-h,72px) + env(safe-area-inset-top,0px) + 12px)}
  html body .v3-hero__first{padding-top:calc(var(--head-h,72px) + env(safe-area-inset-top,0px) + 16px);padding-bottom:calc(92px + env(safe-area-inset-bottom,0px));padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))}
  .v3-hero__light{top:calc(var(--head-h,72px) + 24px + env(safe-area-inset-top,0px));right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))}
  .v3-hero__facts{padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px));padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
  #site-footer{padding-bottom:calc(clamp(40px,5vw,64px) + env(safe-area-inset-bottom,0px));padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))}
  html.mb-on #site-footer{padding-bottom:calc(var(--mb-dock-h,58px) + 24px + env(safe-area-inset-bottom,0px))}
  .v3-section,.kx,.mp,.wk,.hx,.hend,.cl-head,.cl-bar,.cl-wall,.cl-list,.cl-foot,main .wrap,main .wrap.inner{padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))}
  .v3-section--head{padding-top:calc(var(--head-h,72px) + env(safe-area-inset-top,0px) + clamp(40px,6vw,88px))}
  .cl-head{padding-top:calc(clamp(104px,11vw,150px) + env(safe-area-inset-top,0px))}
}

@media (max-width:360px){
  :root{--v3-pad-x:16px;--pad-x:16px;--section-pad-x:16px}
  .v3-hero__facts{gap:16px 12px;padding:24px max(var(--v3-pad-x),env(safe-area-inset-right,0px)) calc(36px + env(safe-area-inset-bottom,0px)) max(var(--v3-pad-x),env(safe-area-inset-left,0px))}
  .v3-hero__facts b{font-size:1.875rem}
  .v3-hero__facts span{font-size:.8125rem}
  .v3-actions{gap:10px 14px}
  .v3-btn--primary{padding:0 18px;min-height:48px}
  .wk-apps-row{gap:4px}
}