/* =====================================================================
   CAMOFLUX DESIGN SYSTEM: VOID SIGNAL
   Every value below the token block references a token.
   If you need a new value, add a token first.
   ===================================================================== */

:root {
  /* ---- Color: 1 background family, 3 text levels, 1 accent ---- */
  --c-bg:          #000000;
  --c-panel:       rgba(0, 0, 0, 0.86);   /* reading surface over the ink ground */
  --c-surface:     #0b0c0e;
  --c-surface-2:   #15171a;
  --c-line:        rgba(232, 230, 223, 0.12);
  --c-line-strong: rgba(232, 230, 223, 0.32);
  --c-text:        #e8e6df;
  --c-text-2:      rgba(232, 230, 223, 0.72);
  --c-text-3:      rgba(232, 230, 223, 0.50);
  --c-accent:      #d8ff3a;
  --c-accent-hover:#e6ff7a;
  --c-on-accent:   #0a0b0d;
  --c-scrim:       rgba(0, 0, 0, 0.78);    /* all overlays are pure black */
  --c-error:       #ff8a7a;

  /* ---- Type families ---- */
  --f-display: 'Technical Standard VP', 'Chakra Petch', system-ui, sans-serif;  /* headings */
  --f-sans:  'Inter', system-ui, -apple-system, sans-serif;                        /* reading */
  --f-mono:  'Share Tech Mono', ui-monospace, monospace;   /* metadata; replaced by AB-24h when the Adobe kit is set */
  --f-quote: 'Inter', system-ui, sans-serif;               /* quotes: Inter Italic */

  /* ---- Type scale (8 steps, nothing else) ---- */
  --t-meta:    11px;                         /* mono metadata only */
  --t-small:   13px;
  --t-body:    16px;
  --t-lead:    20px;
  --t-h3:      22px;
  --t-h2:      clamp(28px, 3.2vw, 40px);
  --t-h1:      clamp(36px, 5vw, 56px);
  --t-display: clamp(40px, 7vw, 80px);       /* hero only */

  /* ---- Weights: two ---- */
  --w-regular: 400;
  --w-medium:  500;

  /* ---- Line heights: three ---- */
  --lh-tight: 1.05;   /* display, h1, h2 */
  --lh-snug:  1.35;   /* h3, quotes, buttons */
  --lh-body:  1.6;    /* all running text */

  /* ---- Tracking ---- */
  --ls-display: -0.01em;
  --ls-heading: 0;
  --ls-mono:     0.08em;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter:    var(--s-7);
  --section-y: var(--s-9);
  --label-col: 240px;
  --measure:   64ch;
  --header-h:  64px;

  /* ---- Radius: three values ---- */
  --r-0:     0;        /* surfaces, media, buttons */
  --r-1:     2px;      /* badges, inputs */
  --r-round: 999px;    /* dots, circular controls */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 700ms;
  --stagger:  90ms;
  --lift:     3px;     /* max hover lift anywhere */
}

@media (max-width: 900px) {
  :root { --gutter: var(--s-5); --section-y: var(--s-8); }
}

@font-face { font-family: 'Technical Standard VP'; src: url('fonts/TechnicalStandardVP.otf') format('opentype'); font-display: swap; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { background: var(--c-bg) url('ui/ground-ink.jpg') 0 0 / 520px repeat; }
body {
  background: transparent; color: var(--c-text);
  font: var(--w-regular) var(--t-body)/var(--lh-body) var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--c-accent); color: var(--c-on-accent); padding: var(--s-2) var(--s-4); }
.skip:focus { top: var(--s-4); }

/* ---- Type roles ---- */
.t-display { font: var(--w-regular) var(--t-display)/var(--lh-tight) var(--f-display); letter-spacing: var(--ls-display); }
.t-h1  { font: var(--w-regular) var(--t-h1)/var(--lh-tight) var(--f-display); letter-spacing: var(--ls-display); }
.t-h2  { font: var(--w-regular) var(--t-h2)/var(--lh-tight) var(--f-display); letter-spacing: var(--ls-heading); }
.t-h3  { font: var(--w-regular) var(--t-h3)/var(--lh-snug) var(--f-display); letter-spacing: var(--ls-heading); }
.t-lead  { font-size: var(--t-lead); line-height: var(--lh-body); color: var(--c-text-2); max-width: var(--measure); }
.t-body  { font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-text-2); }
.t-small { font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-text-2); }
.t-meta  { white-space: nowrap; font: var(--w-regular) 12px/var(--lh-snug) var(--f-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-text-3); }
.t-quote { font: italic var(--w-regular) var(--t-small)/1.5 var(--f-quote); color: var(--c-text); }   /* quotes set small, like marginalia */
/* AB-24h has no accented letters: the build wraps them in .acc and they are set in the display face at matching height. */
.has-ab24 .acc { font-family: var(--f-display); font-size: 1.24em; line-height: 0; }
.t-quote--lg { font-size: var(--t-h2); }
.accent { color: var(--c-accent); }
p.t-meta, .card .t-meta, .facts .t-meta { white-space: normal; }

.prose { max-width: var(--measure); }
.prose p { font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-text-2); }
.prose p + p { margin-top: var(--s-4); }
.prose a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.prose a:hover { text-decoration-color: var(--c-accent); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ---- Layout ---- */
.wrap { padding-inline: var(--gutter); max-width: 1520px; margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--alt { background: transparent; }
.panel { background: var(--c-panel); border: 1px solid var(--c-line); padding: var(--s-7); }
.section { padding-block: var(--s-5); }
.section:first-of-type, .page-head + .section { padding-top: var(--s-7); }
main > .section:last-of-type { padding-bottom: var(--s-8); }
@media (max-width: 900px) { .panel { padding: var(--s-5); } }
.section + .section:not(.section--alt) { padding-top: 0; }
.section--alt + .section:not(.section--alt) { padding-top: var(--section-y); }
.split { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: var(--s-8); }
.split > .t-meta { padding-top: var(--s-2); }
.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-6); }
.hairline { border: 0; border-top: 1px solid var(--c-line); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-4); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding-inline: var(--gutter);
  background: rgba(10, 11, 13, 0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.brand { display: flex; align-items: center; gap: var(--s-4); }
.brand img { height: 14px; width: auto; }
.nav { display: flex; gap: var(--s-5); }
.nav a {
  font: var(--t-meta)/1 var(--f-mono); letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--c-text-2); padding-block: var(--s-2);
  background: linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 0 1px no-repeat;
  transition: color var(--dur-fast) var(--ease-out), background-size var(--dur-base) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-text); background-size: 100% 1px; }
.menu-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.menu-toggle svg { width: 20px; height: 20px; }
.header-cta { flex-shrink: 0; }

@media (max-width: 1080px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header[data-open="true"] .nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--c-bg); border-bottom: 1px solid var(--c-line);
    padding: var(--s-2) var(--gutter) var(--s-5);
  }
  .site-header[data-open="true"] .nav a { font-size: var(--t-small); padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); background: none; }
  .site-header[data-open="true"] .nav .btn { margin-top: var(--s-4); border-bottom: 0; }
}
@media (min-width: 1081px) { .nav .btn { display: none; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  position: relative; overflow: hidden;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-0); border: 1px solid transparent;
  font: var(--w-medium) var(--t-small)/1 var(--f-sans); letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: var(--s-3) var(--s-4); font-size: var(--t-meta); }
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); }
/* Ghost: visibly filled at rest, inverts to solid on hover. No glow. */
.btn--ghost { background: rgba(232, 230, 223, 0.08); border-color: var(--c-line-strong); color: var(--c-text); }
.btn--ghost:hover { background: var(--c-text); border-color: var(--c-text); color: var(--c-on-accent); }
.btn .icon { width: 1em; height: 1em; flex-shrink: 0; }
.btn[aria-busy="true"] { cursor: progress; transform: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform-origin: left; animation: progress 1.1s var(--ease-in-out) infinite;
}
@keyframes progress { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 640px) { .actions .btn { flex: 1 1 100%; } }

.link { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-meta)/1 var(--f-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-accent); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ext { font-family: var(--f-sans); letter-spacing: 0; }   /* ↗ marks links that leave the site */

/* ---- Corner frame ---- */
.frame { position: absolute; inset: var(--s-5); pointer-events: none; z-index: 2; }
.frame i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--c-line-strong); }
.frame i:nth-child(1) { top: 0; left: 0;  border-top-width: 1px; border-left-width: 1px; }
.frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame i:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 1px; border-left-width: 1px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ---- Hero ---- */
.hero { position: relative; min-height: clamp(560px, 88vh, 880px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0) 65%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 35%); }
/* 3D hero: poster until the scene is live; the scene fades in over it. */
.hero--3d { background: #000; }
.hero__poster { position: absolute; inset: 0; background-size: cover; background-position: 62% 55%; transition: opacity var(--dur-slow) var(--ease-out); }
.hero--3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.hero--3d.is-live canvas { opacity: 1; }
.hero--3d.is-live .hero__poster { opacity: 0; }
.hero--3d.is-still canvas, .hero--3d.is-still .hero__progress, .hero--3d.is-still .hero__footage { display: none; }
.hero__progress { position: absolute; z-index: 4; top: 0; left: 0; height: 2px; width: 0; background: var(--c-accent); transition: width 200ms var(--ease-out), opacity 400ms var(--ease-out); }
.hero__keys { position: absolute; z-index: 4; right: var(--s-5); bottom: var(--s-5); display: flex; gap: var(--s-2); }
.hero__keys .btn:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
.shotbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(0, 0, 0, 0.94); }
.shotbox[data-open="true"] { display: flex; animation: fade var(--dur-base) var(--ease-out); }
.shotbox__frame { position: relative; width: min(1280px, 100%); }
.shotbox__stage img, .shotbox__stage video { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #000; }
.shotbox__cap { margin-top: var(--s-3); }
.shotbox__close { position: absolute; top: calc(var(--s-6) * -1 - var(--s-2)); right: 0; }
.hud { position: absolute; z-index: 3; top: var(--s-5); width: 104px; opacity: 0.85; pointer-events: none; }
.hud--l { left: var(--s-5); } .hud--r { right: var(--s-5); }
.hero__hint { position: absolute; z-index: 3; right: var(--s-5); bottom: var(--s-5); max-width: 300px; white-space: normal; text-align: right; color: var(--c-text-3); line-height: 1.6; }
.hero--3d { touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
@media (max-width: 720px) { .hero__hint { display: none; } }
.level-label { position: absolute; z-index: 5; pointer-events: none; color: var(--c-text); opacity: 0; transition: opacity 200ms var(--ease-out); }
.level-label[data-show="true"] { opacity: 1; }
.hero .hero__body { transition: opacity 400ms var(--ease-out); }
.hero.is-looking .hero__body { opacity: 0.08; }
.hero.is-looking { cursor: grabbing; }
.hero__footage { position: absolute; z-index: 3; top: calc(var(--s-5) + 16px); left: 150px; color: var(--c-text-2); }
.hero__body .t-meta { display: block; }
.hero--3d .hero__logo { width: min(620px, 100%); }
.hero--3d .hero__body { max-width: 640px; }
@media (max-width: 720px) { .hud { width: 64px; } .hero__footage { left: 96px; top: var(--s-5); } }
.hero__hud { position: absolute; z-index: 3; top: calc(var(--s-5) + var(--s-4)); left: calc(var(--s-5) + var(--s-5)); right: calc(var(--s-5) + var(--s-5)); display: flex; justify-content: space-between; }
.hero__hud .t-meta { color: var(--c-text-2); }
.hero__body { position: relative; z-index: 3; width: 100%; padding: 0 var(--gutter) var(--s-9); }
.hero__logo { width: min(880px, 100%); height: auto; margin-bottom: var(--s-6); }
.hero__body .t-lead { margin-bottom: var(--s-6); color: var(--c-text); max-width: 46ch; }
@media (max-width: 640px) {
  .hero::after { background: linear-gradient(180deg, rgba(10,11,13,0.5) 0%, rgba(10,11,13,0.2) 25%, rgba(10,11,13,0.85) 55%, var(--c-bg) 100%); }
  .hero__hud > :last-child { display: none; }
  .hero__body { padding-bottom: var(--s-8); }
}
.hero--page { min-height: clamp(360px, 52vh, 520px); }

/* One orchestrated entrance: hero only. */
.seq > * { opacity: 0; transform: translateY(12px); animation: rise var(--dur-slow) var(--ease-out) forwards; animation-delay: calc(200ms + var(--i, 0) * var(--stagger) * 2); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- Page head (all subpages share this) ---- */
.page-head { padding-block: var(--s-9) var(--s-8); border-bottom: 1px solid var(--c-line); }
.page-head .t-meta { margin-bottom: var(--s-5); display: block; }
.page-head .t-h1 { max-width: 18ch; margin-bottom: var(--s-5); }

/* ---- Facts / status ---- */
.facts { background: var(--c-panel); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-block: 1px solid var(--c-line); }
.facts > div { padding: var(--s-4) var(--s-5); }
.facts > div + div { border-left: 1px solid var(--c-line); }
.facts dd { font-size: var(--t-small); color: var(--c-text); margin-top: var(--s-1); }
.fact-list > div { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.fact-list dd { color: var(--c-text); }
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div + div { border-left: 0; padding-left: 0; }
  .fact-list > div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---- Media with skeleton + lazy load ---- */
.media { position: relative; overflow: hidden; background: var(--c-surface-2); border-radius: var(--r-0); }
.ar-16x9 { aspect-ratio: 16 / 9; } .ar-21x9 { aspect-ratio: 21 / 9; } .ar-4x3 { aspect-ratio: 4 / 3; } .ar-1x1 { aspect-ratio: 1 / 1; }
.media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(232,230,223,0.05) 50%, transparent 80%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.media__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.media.is-loaded::before, .media.is-error::before { display: none; }
.media.is-loaded .media__img { opacity: 1; }
.media__status { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.media.is-error .media__status { display: flex; }
.media noscript img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes shimmer { to { background-position: -200% 0; } }
.badge { position: absolute; z-index: 2; top: var(--s-3); left: var(--s-3); padding: var(--s-1) var(--s-2); border-radius: var(--r-1); background: var(--c-scrim); }
.badge--right { left: auto; right: var(--s-3); }

/* ---- Cards ---- */
.card { display: block; transition: transform var(--dur-base) var(--ease-out); }
a.card:hover { transform: translateY(calc(var(--lift) * -1)); }
.card > .media { margin-bottom: var(--s-4); }
.card .t-meta { display: block; margin-bottom: var(--s-2); }
.card .t-h3 { margin-bottom: var(--s-2); }
a.card:hover .t-h3 { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.card--text { padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); }
.card--step .t-meta.accent { color: var(--c-accent); }
p.t-meta, .card .t-meta, .facts .t-meta { white-space: normal; }

/* ---- Quotes ---- */
.quotes { display: grid; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); padding: var(--s-6); background: var(--c-surface); transition: background-color var(--dur-base) var(--ease-out); }
.quote:hover { background: var(--c-surface-2); }
.quote footer { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.quote:hover footer .ext-label { color: var(--c-accent); }
.quote--sm .t-quote { font-size: var(--t-small); }
@media (max-width: 900px) { .quotes--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .quotes--2 { grid-template-columns: 1fr; } }

/* ---- Rail: grid on desktop, snap carousel on mobile ---- */
.rail__controls { display: none; }
@media (max-width: 720px) {
  .rail .rail__track {
    display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none;
    background: none; border: 0;
  }
  .rail .rail__track::-webkit-scrollbar { display: none; }
  .rail .rail__track > * { flex: 0 0 84%; scroll-snap-align: start; }
  .rail .quotes .quote { border: 1px solid var(--c-line); }
  .rail__controls { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); }
  .rail__btns { display: flex; gap: var(--s-2); }
  .rail__btn { width: 40px; height: 40px; border: 1px solid var(--c-line-strong); border-radius: var(--r-round); display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
  .rail__btn svg { width: 16px; height: 16px; }
  .rail__btn:hover { border-color: var(--c-text); }
  .rail__btn:disabled { opacity: 0.3; cursor: default; }
}

/* ---- Trailer tile ---- */
.trailer-tile { position: relative; display: block; width: 100%; text-align: left; }
.trailer-tile .play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: var(--r-round); border: 1px solid var(--c-text); background: var(--c-scrim); display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.trailer-tile .play svg { width: 24px; height: 24px; margin-left: 3px; }
.trailer-tile:hover .play { background: var(--c-text); color: var(--c-on-accent); }
.trailer-tile[aria-busy="true"] .play { opacity: 0.5; }

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(10, 11, 13, 0.94); }
.modal[data-open="true"] { display: flex; animation: fade var(--dur-base) var(--ease-out); }
.modal__frame { position: relative; width: min(1280px, 100%); aspect-ratio: 16 / 9; background: var(--c-surface); }
.modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.modal__frame.is-ready iframe { opacity: 1; }
.modal__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.modal__frame.is-ready .modal__loading { display: none; }
.modal__close { position: absolute; top: calc(var(--s-6) * -1 - var(--s-2)); right: 0; }
@keyframes fade { from { opacity: 0; } }

/* ---- Rows (exhibition list, downloads) ---- */
.rows > * { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: baseline; padding-block: var(--s-5); border-bottom: 1px solid var(--c-line); }
.rows > *:first-child { border-top: 1px solid var(--c-line); }
a.row { transition: background-color var(--dur-fast) var(--ease-out); }
a.row:hover .t-h3 { color: var(--c-accent); }
.row .t-h3 { transition: color var(--dur-fast) var(--ease-out); }

/* ---- Work (exhibition entries) ---- */
.work { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.work + .work { margin-top: var(--s-9); }
.work:nth-child(even) .media { order: 2; }
.work .stack .t-meta { color: var(--c-text-3); }
.work--text { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.quote-single { max-width: 720px; }
.page-head__actions { margin-top: var(--s-6); }
.after-grid { margin-top: var(--s-8); }
@media (max-width: 900px) { .work { grid-template-columns: 1fr; gap: var(--s-5); } .work:nth-child(even) .media { order: 0; } }

/* ---- Newsletter ---- */
.newsletter { display: flex; gap: var(--s-2); max-width: 480px; }
.newsletter input { flex: 1; min-width: 0; padding: var(--s-4); border-radius: var(--r-1); border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-text); font: var(--t-small) var(--f-sans); }
.newsletter input:focus-visible { border-color: var(--c-accent); outline: none; }
.form-msg { margin-top: var(--s-3); min-height: 1.6em; }
.form-msg[data-state="error"] { color: var(--c-error); }
.form-msg[data-state="success"] { color: var(--c-accent); }

/* ---- Signup band (every page, above footer) ---- */
.signup { border-top: 1px solid var(--c-line); background: var(--c-surface); padding-block: var(--s-8); }
.signup__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.signup .newsletter { max-width: none; }
@media (max-width: 900px) { .signup__inner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .newsletter { flex-direction: column; } }

/* ---- CTA band ---- */
.cta { position: relative; overflow: hidden; text-align: center; padding-block: var(--s-10); }
.cta__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta::after { content: ""; position: absolute; inset: 0; background: var(--c-scrim); }
.cta { margin-top: var(--s-5); }
.cta__body { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }

/* ---- In play, coverage ---- */
.ar-2x1 { aspect-ratio: 2 / 1; } .ar-wide { aspect-ratio: 16 / 3; }
.clip-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-wrap::before { display: none; }
.clip-fig figcaption, .wide-fig figcaption { margin-top: var(--s-2); }
.wide-fig { margin-top: var(--s-5); }
.card__cap { margin: calc(var(--s-2) * -1) 0 var(--s-2); color: var(--c-text-3); }
.coverage { margin-top: var(--s-6); }
.coverage .t-meta { margin-bottom: var(--s-3); }
.coverage__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.coverage__list a { font-size: var(--t-small); color: var(--c-text-2); transition: color var(--dur-fast) var(--ease-out); }
.coverage__list a:hover { color: var(--c-text); }
@media (max-width: 720px) { .ar-wide { aspect-ratio: 16 / 6; } }

/* ---- Artwork ---- */
.sketch .media, .painting .media { background: #f2f0ea; }
.sketch figcaption, .painting figcaption, .photos figcaption { margin-top: var(--s-2); white-space: normal; }
.paintings { columns: 3 260px; column-gap: var(--s-5); }
.painting { break-inside: avoid; margin-bottom: var(--s-5); }
.painting img { width: 100%; height: auto; background: var(--c-surface); }
.photos { display: grid; gap: var(--s-5); }
.history-photo { max-width: 720px; }
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.shotbox__stage img { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
.history-photo figcaption { margin-top: var(--s-2); white-space: normal; }

/* ---- Footer signup (compact) ---- */
.footer-signup { margin-top: var(--s-6); max-width: 380px; }
.footer-signup .t-meta { margin-bottom: var(--s-3); }
.newsletter--sm input { padding: var(--s-2) var(--s-3); font-size: var(--t-small); }
.rows-more { margin-top: var(--s-5); }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--c-line); padding-block: var(--s-8); background: #000; }
.site-footer .cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s-6); }
.site-footer img { height: 14px; width: auto; margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer li a { font-size: var(--t-small); color: var(--c-text-2); transition: color var(--dur-fast) var(--ease-out); }
.site-footer li a:hover { color: var(--c-text); }
.site-footer .t-meta { display: block; margin-bottom: var(--s-4); }
.site-footer ul + .t-meta { margin-top: var(--s-6); }
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

/* ---- Post ---- */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--c-line); }
.post-nav a:last-child { text-align: right; }
.post-nav .t-meta { display: block; margin-bottom: var(--s-2); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .seq > * { opacity: 1; transform: none; }
}

/* ---- Sign-up bar: fixed to the bottom from the first view ---- */
.signup-bar { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--c-line); transition: transform var(--dur-base) var(--ease-out); }
.signup-bar[hidden] { display: block; transform: translateY(110%); pointer-events: none; }
.signup-bar__inner { max-width: var(--wrap, 1280px); margin: 0 auto; padding: var(--s-3) var(--gutter); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.signup-bar__text { font-size: var(--t-small); color: var(--c-text); margin-right: auto; }
.newsletter--bar { display: flex; gap: var(--s-2); }
.newsletter--bar input { width: 260px; padding: var(--s-2) var(--s-3); font-size: var(--t-small); }
.signup-bar .form-msg:empty { display: none; }
.signup-bar__close { font-size: 20px; line-height: 1; color: var(--c-text-3); padding: var(--s-1, 4px) var(--s-2); }
.signup-bar__close:hover { color: var(--c-text); }
.signup-bar { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.signup-bar.is-away { opacity: 0; transform: translateY(16px); pointer-events: none; }
/* no page padding needed: the bar fades away when the footer arrives */
@media (max-width: 720px) {
  .signup-bar__inner { gap: var(--s-2); padding: var(--s-2) var(--s-4); }
  .signup-bar__text { flex-basis: calc(100% - 40px); }
  .newsletter--bar { flex: 1; } .newsletter--bar input { width: auto; flex: 1; min-width: 0; }
}