/* Kshana Media — styles. Tokens mirror DESIGN.md; sections below follow the page order.
   Palette: red, black, white and beige only. */

@property --bg { syntax: "<color>"; inherits: true; initial-value: #0b0908; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #faf7f2; }

:root {
  --ink: #0b0908;
  --ink-2: #17110f;
  --white: #faf7f2;
  --beige: #ebe2d3;
  --red: #830101;
  --red-bright: #d7261e;
  --muted-dark: #a99d90;
  --muted-red: #e6c5ba;
  --muted-beige: #62564e;
  --error-on-dark: #ff8f87;

  --font-sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-deva: "Tiro Devanagari Sanskrit", "Kohinoor Devanagari", serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --font-box: "Satoshi", "Helvetica Neue", Arial, sans-serif;

  --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; --s-11: 192px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(96px, 14vw, 200px);
  --nav-h: 76px;

  --r-frame: 22px;
  --r-panel: 28px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 140ms;
  --t-base: 260ms;

  --glass-blur: blur(18px) saturate(1.3);
  --glass-edge: 1px solid rgb(250 247 242 / .2);

  /* Ground-dependent roles, switched by [data-ground] on <body>. */
  --bg: var(--ink);
  --fg: var(--white);
  --muted: var(--muted-dark);
  --accent: var(--beige);
  --line: rgb(250 247 242 / .16);
}

body[data-ground="maroon"] { --bg: var(--red); --fg: var(--white); --muted: var(--muted-red); --accent: var(--beige); --line: rgb(250 247 242 / .2); }
body[data-ground="beige"] { --bg: var(--beige); --fg: var(--ink); --muted: var(--muted-beige); --accent: var(--red); --line: rgb(11 9 8 / .14); }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: --bg 900ms var(--ease-in-out), --fg 900ms var(--ease-in-out);
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--white); }

:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 4px; }
body[data-ground="beige"] :focus-visible { outline-color: var(--red); }
/* Dark layers keep dark-ground colours whatever the page behind them is doing. */
.lightbox, .menu, .door__box { --fg: var(--white); --muted: var(--muted-dark); }
body[data-ground] .lightbox :focus-visible, body[data-ground] .menu :focus-visible, body[data-ground] .door__box :focus-visible { outline-color: var(--white); }

.skip {
  position: fixed; left: var(--gutter); top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--beige); color: var(--ink); font-weight: 600; text-decoration: none;
  transition: top var(--t-base) var(--ease-out);
}
.skip:focus { top: 12px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[tabindex="-1"]:focus { outline: none; }

/* ---------- Type ---------- */

.mega {
  font-family: var(--font-sans);
  font-size: clamp(76px, 12.4vw, 260px);
  line-height: .84;
  font-weight: 780;
  font-stretch: 75%;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.display { font-size: clamp(52px, 9vw, 160px); line-height: .9; font-weight: 740; font-stretch: 78%; letter-spacing: -.015em; }
.h1 { font-size: clamp(42px, 6vw, 100px); line-height: .94; font-weight: 700; font-stretch: 82%; letter-spacing: -.01em; }
.h2 { font-size: clamp(32px, 4vw, 64px); line-height: 1; font-weight: 650; letter-spacing: -.01em; }
.h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.15; font-weight: 600; }
.lead { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.45; font-weight: 400; }
.small { font-size: 14px; line-height: 1.5; }
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: -.01em;
}
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--btn-bg);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.btn:active { transform: scale(.97); }
/* Primary: a beige pill on dark grounds, ink on beige ones; it turns Kshana red on hover. */
.btn--primary { --btn-bg: var(--beige); color: var(--ink); }
body[data-ground="beige"] .nav .btn--primary { --btn-bg: var(--ink); color: var(--white); }
/* On dark grounds the nav's Open the door is red; on the red ground it turns white with red text so it doesn't vanish. */
body[data-ground="ink"] .nav .btn--primary { --btn-bg: var(--red); color: var(--white); }
body[data-ground="ink"] .nav .btn--primary:hover { --btn-bg: var(--white); color: var(--red); }
body[data-ground="maroon"] .nav .btn--primary { --btn-bg: var(--white); color: var(--red); }
body[data-ground="maroon"] .nav .btn--primary:hover { --btn-bg: var(--ink); color: var(--white); }
.btn--primary:hover { --btn-bg: var(--red); color: var(--white); }
.btn--ghost { border-color: currentColor; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn .arrow { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn[disabled] { opacity: .4; pointer-events: none; }

.quiet {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-base) var(--ease-out);
}
.quiet:hover, .quiet:focus-visible { background-size: 100% 1px; }

/* ---------- Layers: grain and the cursor label ---------- */

.grain {
  position: fixed; inset: -50%; z-index: 41; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .06;
  mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* The normal pointer stays; a short line of text trails just below it where there's something to do. */
.service__media[data-case] { cursor: pointer; }

/* Liquid films: the WebGL water surface sits over its video and fades in once it has the first frame. */
.liquid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.liquid.is-live { opacity: 1; }
video.is-liquid { opacity: 0; transition: opacity .8s ease; }

/* 3D lean: tiles and panels tip towards the pointer, with a soft sheen where the light catches them. */
.tilt { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms var(--ease-out); }
.tilt.is-tilting { transition-duration: 220ms; }
.tilt::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(250 247 242 / .3), rgb(250 247 242 / 0) 55%); mix-blend-mode: soft-light;
}
.tilt.is-tilting::before { opacity: 1; }

/* The cursor label: plain text just below and right of the pointer's tip, no box, fading in and out. */
.cursor-label { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform; }
.cursor-label.is-on { opacity: 1; }
.cursor-label span {
  display: block; translate: 10px 20px; white-space: nowrap;
  font-family: var(--font-box); font-size: 14px; font-weight: 500; letter-spacing: .01em; line-height: 1.2;
  color: rgb(250 247 242 / .94); text-shadow: 0 1px 2px rgb(11 9 8 / .35);
}
body[data-ground="beige"] .cursor-label span { color: var(--ink); text-shadow: none; }
@media (hover: none), (pointer: coarse) { .cursor-label { display: none; } }

/* ---------- Loader ---------- */

.loader {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; align-content: center; gap: 20px;
  background: var(--beige); color: var(--ink);
}
.loader__mark { width: 116px; height: auto; clip-path: inset(var(--hide, 100%) 0 0 0); }
.loader__count {
  display: flex; gap: 14px; margin: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-beige);
}
.loader__count b { color: var(--ink); font-weight: 500; min-width: 3ch; text-align: right; }
html.is-loaded .loader { display: none; }

/* ---------- Nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0 var(--gutter);
  color: var(--fg);
  transition: color 600ms var(--ease-in-out), transform 500ms var(--ease-out);
}
.nav.is-tucked { transform: translateY(-110%); }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
/* The mark always keeps its own maroon, so it sits on a small beige tile. */
.nav__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--beige); flex: none; }
.nav__mark img { width: 32px; height: auto; }
/* The Kshana mark, small, on its beige tile: it is never recoloured or set straight on a dark ground. */
.mark-tile { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--beige); flex: none; }
.mark-tile img { width: 26px; height: auto; }
.nav__name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.nav__name span { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 19px; }
.nav__links {
  display: flex; gap: 4px; padding: 5px;
  border-radius: var(--r-pill);
  background: rgb(11 9 8 / .28);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
body[data-ground="beige"] .nav__links { background: rgb(235 226 211 / .5); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border-radius: var(--r-pill); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__links a:hover, .nav__links a[aria-current="true"] { background: var(--fg); color: var(--bg); }
.nav__end { display: flex; align-items: center; gap: 10px; }
.nav__menu { display: none; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__name { display: none; }
  .nav__menu {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; min-width: 48px; padding: 0 16px;
    border-radius: var(--r-pill); border: 1px solid currentColor; background: transparent; cursor: pointer;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  }
  .nav .btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
}

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: grid; align-content: center; gap: var(--s-2);
  padding: var(--nav-h) var(--gutter) var(--s-7);
  background: var(--ink); color: var(--white);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 600ms var(--ease-out), visibility 0s 600ms;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 600ms var(--ease-out); }
.menu a { font-size: clamp(48px, 14vw, 96px); line-height: 1; font-weight: 760; font-stretch: 75%; text-transform: uppercase; text-decoration: none; }
.menu a em { font-family: var(--font-serif); font-weight: 400; font-stretch: normal; text-transform: none; color: var(--beige); }
.menu .label { margin-top: var(--s-6); color: var(--muted-dark); }

/* ---------- Hero: the film behind, the line in front ---------- */

.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: max(100svh, 640px);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto;
  padding: calc(var(--nav-h) + var(--s-3)) var(--gutter) var(--s-5);
  color: var(--white);
}
.hero__film { position: absolute; inset: 0; z-index: -2; background: var(--ink) url("../assets/media/hero/kshana-film.jpg") center 60% / cover no-repeat; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(11 9 8 / .62) 0%, rgb(11 9 8 / .08) 26%, rgb(11 9 8 / .12) 50%, rgb(11 9 8 / .8) 80%, rgb(11 9 8 / .95) 100%);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 4px rgb(215 38 30 / .22); flex: none; }
.hero__kicker { grid-row: 1; margin: 0; display: flex; align-items: center; gap: 10px; color: rgb(250 247 242 / .8); pointer-events: none; }
.hero__title { grid-row: 3; margin: 0; display: grid; pointer-events: none; }
.hero__mega { display: block; color: var(--white); white-space: nowrap; font-size: clamp(76px, 13.4vw, 270px); }
.hero__possess { display: block; justify-self: end; margin: -.06em 2vw 0 0; font-size: clamp(56px, 8.6vw, 172px); line-height: .92; color: var(--red-bright); }
.hero__foot { grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-5) var(--s-7); margin-top: var(--s-6); }
.hero__lead { margin: 0; max-width: 36ch; color: var(--white); }
.hero__lead em { color: var(--white); font-size: 1.1em; }
.hero .btn--primary { --btn-bg: var(--red); color: var(--white); }
.hero .btn--primary:hover { --btn-bg: var(--white); color: var(--red); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.hero__meta {
  grid-row: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid rgb(250 247 242 / .18);
  color: rgb(250 247 242 / .74);
}
.hero__meta .live { display: inline-flex; align-items: center; gap: 8px; }
.hero__sound {
  min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid rgb(250 247 242 / .42); background: transparent; color: var(--white); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.hero__sound:hover, .hero__sound[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.hero__sound[hidden] { display: none; }

@media (max-width: 860px) {
  .hero { min-height: 100svh; }
  .hero__mega { white-space: normal; font-size: clamp(64px, 22vw, 140px); }
  .hero__possess { justify-self: start; margin: .12em 0 0; font-size: clamp(52px, 15vw, 110px); }
  .hero__foot { grid-template-columns: 1fr; }
  .hero__actions { justify-content: flex-start; }
  .hero__meta { flex-wrap: wrap; }
  .hero__meta .hint { display: none; }
}

/* ---------- Meaning ---------- */

.meaning {
  position: relative;
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5);
  isolation: isolate;
  overflow-x: clip; /* the giant word may be wider than a tablet */
}
.meaning__word {
  grid-column: 1 / -1; grid-row: 1 / span 3;
  position: relative; z-index: -1;
  justify-self: center; align-self: start;
  font-family: var(--font-deva); font-size: min(46vw, 78svh); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgb(250 247 242 / .32);
  user-select: none;
  margin-top: -.12em;
}
.meaning__word .fill {
  position: absolute; inset: 0;
  color: rgb(250 247 242 / .1); -webkit-text-stroke: 0;
  clip-path: inset(100% 0 0 0);
}
.meaning__entry { grid-column: 1 / span 4; grid-row: 1; margin: 0; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.meaning__entry i { font-style: normal; color: var(--fg); }
.meaning__def { grid-column: 1 / span 10; grid-row: 2; margin: var(--s-9) 0 0; max-width: 18ch; }
.meaning__estate {
  grid-column: 4 / -1; grid-row: 3; justify-self: end;
  margin: var(--s-8) 0 0; color: var(--beige);
  font-size: clamp(56px, 9vw, 168px); line-height: .92; text-align: right;
}
.meaning__body { grid-column: 7 / span 5; grid-row: 4; margin: var(--s-8) 0 0; max-width: 36ch; }
.meaning__body em { font-family: var(--font-serif); font-size: 1.12em; color: var(--beige); }

@media (max-width: 860px) {
  .meaning__entry, .meaning__def, .meaning__estate, .meaning__body { grid-column: 1 / -1; }
  .meaning__word { font-size: 78vw; }
  .meaning__estate { justify-self: start; text-align: left; }
}

/* ---------- Everywhere band ---------- */

.band { padding: var(--s-8) 0; overflow: clip; border-block: 1px solid var(--line); }
.band__row { display: flex; width: max-content; }
.band__row + .band__row { margin-top: var(--s-2); }
.band__set { display: flex; align-items: center; flex: none; }
.band__item { padding: 0 .38em; white-space: nowrap; }
.band__row--a .band__item { font-size: clamp(44px, 7vw, 112px); line-height: 1; font-weight: 760; font-stretch: 75%; text-transform: uppercase; }
.band__row--b .band__item { font-family: var(--font-serif); font-style: italic; font-size: clamp(40px, 6vw, 96px); line-height: 1.05; color: var(--muted); }
.band__star { color: var(--beige); font-size: .5em; vertical-align: middle; }
.band__row--b .band__item:nth-child(4n + 2) { color: var(--fg); }

/* Section headers share one shape: a label, then a heading with one italic word. */
.services__head, .brands__head, .process__head { display: grid; gap: var(--s-4); }
.services__head h2, .brands__head h2, .process__head h2 { margin: 0; max-width: 14ch; }
.services__head h2 em, .brands__head h2 em, .process__head h2 em { color: var(--accent); font-size: 1.06em; }

/* ---------- 03 What we make ----------
   Stacked by default (phones, reduced motion, no JS). With html.pinned the four panels sit in a row
   and slide sideways while the section is pinned; each giant word passes behind its frosted box. */

.services { position: relative; }
.services__head { padding: var(--section) var(--gutter) var(--s-8); }
.services__pin { overflow: clip; }

.service { position: relative; padding: var(--s-8) var(--gutter); isolation: isolate; --tint: var(--red); }
.service__word {
  margin: 0 0 -.4em; position: relative; z-index: 0;
  font-size: clamp(72px, 24vw, 360px); line-height: .82; font-weight: 800; font-stretch: 75%;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--white);
  pointer-events: none; overflow-wrap: anywhere;
}
.service__word em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: -.02em; color: var(--red-bright); }
.service__glass {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-panel);
  /* See-through at the top left, where the giant word passes behind; dark where the text sits. */
  background: linear-gradient(150deg, color-mix(in srgb, var(--tint) 42%, rgb(11 9 8 / .34)), rgb(11 9 8 / .82) 72%);
  border: var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  color: var(--white);
}
.service__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-frame); overflow: hidden; background: var(--ink-2); }
.service__media video, .service__media img { width: 100%; height: 100%; object-fit: cover; }
.service__media--still img { animation: drift 14s var(--ease-in-out) infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, -2%); } }
.service__text { display: grid; gap: var(--s-3); align-content: end; padding: var(--s-2); }
.service__text .label { color: var(--muted-dark); }
.service__text h3 { margin: 0; }
.service__text p { margin: 0; max-width: 34ch; }
.service__text a { justify-self: start; font-weight: 600; color: var(--beige); padding: 10px 0; }

html.pinned .services__track { display: flex; width: max-content; }
html.pinned .service { width: 100vw; height: 100svh; padding: calc(var(--nav-h) + var(--s-4)) var(--gutter) var(--s-6); display: grid; align-items: center; }
html.pinned .service__word { position: absolute; left: 3vw; top: 50%; translate: 0 -50%; margin: 0; white-space: nowrap; font-size: clamp(120px, 19vw, 360px); overflow-wrap: normal; }
html.pinned .service__glass { margin-left: auto; margin-right: 6vw; width: min(720px, 56vw); grid-template-columns: auto minmax(0, 1fr); align-items: end; padding: var(--s-5); }
html.pinned .service__media { height: min(62svh, 600px); aspect-ratio: 9 / 16; }

/* ---------- 04 Work (cases) ----------
   One sentence holds still in the middle; the work drifts past it at different speeds. */

.cases { position: relative; padding: var(--section) 0; }
.cases__pin { display: grid; justify-items: center; gap: var(--s-4); padding: 0 var(--gutter) var(--s-8); text-align: center; }
.cases__pin .label { color: var(--muted); }
.cases__title { margin: 0; max-width: 15ch; font-size: clamp(44px, 6.2vw, 112px); line-height: .94; font-weight: 720; font-stretch: 80%; letter-spacing: -.015em; }
.cases__title em { display: block; color: var(--red); font-size: 1.04em; }
.cases__field { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-4); }
.case:nth-child(even) { margin-top: var(--s-9); }
.case__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-frame); }
.case__media { display: block; overflow: hidden; border-radius: var(--r-frame); background: rgb(11 9 8 / .08); }
.case__media img, .case__media video { width: 100%; height: auto; object-fit: cover; transition: transform 700ms var(--ease-out); }
.case__media--reel video { aspect-ratio: 9 / 16; }
.case__media--reel { position: relative; }
.case__media--reel::after {
  content: "▶ Reel"; position: absolute; left: 10px; top: 10px;
  padding: 5px 9px; border-radius: var(--r-pill); background: rgb(11 9 8 / .55); color: var(--white);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.case__open:hover img, .case__open:hover video, .case__open:focus-visible img, .case__open:focus-visible video { transform: scale(1.045); }
.case__cap { margin: var(--s-3) 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.case__cap b { display: block; color: var(--fg); font-weight: 600; font-size: 15px; }

/* Wide screens: the sentence sticks inside a stage as tall as the collage, so it lets go when the work ends. */
@media (min-width: 1024px) {
  .cases__stage { position: relative; height: 280vh; }
  .cases__sticky { position: absolute; inset: 0; z-index: 0; }
  .cases__pin { position: sticky; top: 0; height: 100svh; align-content: center; padding-bottom: 0; }
  .cases__field { position: absolute; inset: 0; z-index: 1; display: block; padding: 0; }
  .case { position: absolute; left: calc(var(--x) * 1vw); top: calc(var(--y) * 1vh); width: calc(var(--w) * 1vw); margin: 0; }
  .case:nth-child(even) { margin-top: 0; }
}

/* ---------- Now screening: the Nisaki Gin spec film in a small theatre ----------
   Default: the bill, then the screen under a valance with seats below; the curtain rises as it arrives.
   With html.pinned the stage pins, the house fills the screen and the curtain rises with the scroll. */

.theatre { position: relative; padding: var(--section) var(--gutter); }
.theatre__bill { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.theatre__bill .label { color: var(--muted); }
.theatre__title { margin: 0; font-size: clamp(44px, 6vw, 96px); line-height: .92; font-weight: 760; font-stretch: 75%; letter-spacing: -.015em; text-transform: uppercase; }
.theatre__title em { display: block; margin-top: .06em; font-size: .62em; text-transform: none; letter-spacing: 0; color: var(--beige); }
.theatre__credits { margin: var(--s-2) 0 0; max-width: 46ch; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.theatre__house { --velvet: var(--red); --fold: color-mix(in srgb, var(--red) 52%, var(--ink)); --sheen: color-mix(in srgb, var(--red) 72%, var(--red-bright));
  position: relative; isolation: isolate; overflow: hidden; margin-top: var(--s-7); padding-bottom: 64px; }
.theatre__frame { position: relative; z-index: 1; display: grid; place-items: center; }
.theatre__screen { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--ink-2) url("../assets/media/spec-work/nisaki-gin-sm.jpg") center / cover no-repeat; cursor: pointer; }
.theatre__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.theatre__film { z-index: 1; cursor: auto; }
.theatre__screen.is-showing { cursor: auto; }
.theatre__screen.is-showing .theatre__loop { visibility: hidden; }
.theatre__play { position: absolute; left: 50%; bottom: var(--s-5); z-index: 2; translate: -50% 0; white-space: nowrap; }
.theatre__screen.is-showing .theatre__play { display: none; }

/* Velvet: soft vertical folds in the mark's red, with a beige hem. */
.theatre__curtain, .theatre__leg, .theatre__valance {
  background: repeating-linear-gradient(90deg, var(--fold) 0, var(--velvet) 22px, var(--sheen) 34px, var(--velvet) 46px, var(--fold) 72px);
}
.theatre__curtain {
  position: absolute; inset: 0 0 64px; z-index: 3; display: grid; place-content: center; justify-items: center; gap: var(--s-3);
  padding: var(--s-5); text-align: center; color: var(--beige); border-bottom: 4px solid var(--beige);
}
.theatre__presents, .theatre__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.theatre__words { font-size: clamp(40px, 7vw, 132px); line-height: .9; font-weight: 760; font-stretch: 75%; letter-spacing: -.015em; text-transform: uppercase; }
.theatre__words em { font-family: var(--font-serif); font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: 0; }
.theatre__hint { display: none; color: var(--muted-red); }
.theatre__mark { margin-bottom: var(--s-2); }
.theatre__leg { display: none; }
.theatre__valance {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 34px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 18px no-repeat, radial-gradient(circle at 50% 0, #000 15px, transparent 16px) 0 18px / 32px 16px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% 18px no-repeat, radial-gradient(circle at 50% 0, #000 15px, transparent 16px) 0 18px / 32px 16px repeat-x;
}
.theatre__seats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; width: 100%; height: 64px; }
.theatre__row path { fill: var(--ink-2); stroke: rgb(250 247 242 / .07); stroke-width: 1.5; }
.theatre__row--front path { fill: #120d0b; }
.theatre__house.is-running .theatre__curtain { opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease-out), visibility 0s 600ms; }
html.no-motion .theatre__curtain { display: none; }
@media (prefers-reduced-motion: reduce) { .theatre__curtain { display: none; } }

@media (min-width: 768px) {
  .theatre__screen { width: min(100%, 880px); }
  .theatre__house { padding-bottom: 96px; }
  .theatre__curtain { bottom: 96px; }
  .theatre__seats { height: 96px; }
}

/* Large screens: the stage pins and the house fills it; legs frame the screen and the curtain rises with the scroll. */
html.pinned .theatre { padding: 0; }
html.pinned .theatre__stage { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100svh; padding-top: calc(var(--nav-h) + var(--s-3)); overflow: clip; }
html.pinned .theatre__bill { gap: var(--s-2); padding: 0 var(--gutter); }
html.pinned .theatre__title { font-size: clamp(36px, 4.2vw, 72px); }
html.pinned .theatre__title em { display: inline; margin: 0 0 0 .2em; font-size: .7em; }
html.pinned .theatre__credits { margin: 0; max-width: none; }
html.pinned .theatre__house { margin-top: var(--s-5); padding: 0; }
html.pinned .theatre__frame { position: absolute; inset: 7svh 9vw 14svh; }
html.pinned .theatre__screen { width: auto; height: min(100%, calc(82vw * 3 / 4)); }
html.pinned .theatre__curtain { inset: 0 0 14svh; }
html.pinned .theatre__hint { display: block; margin-top: var(--s-4); }
html.pinned .theatre__leg { display: block; position: absolute; top: 0; bottom: 14svh; z-index: 4; width: 7vw; }
html.pinned .theatre__leg--l { left: 0; }
html.pinned .theatre__leg--r { right: 0; }
html.pinned .theatre__valance { height: 7svh; -webkit-mask-size: 100% calc(100% - 22px), 48px 22px; mask-size: 100% calc(100% - 22px), 48px 22px;
  -webkit-mask-position: top, 0 100%; mask-position: top, 0 100%;
  -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(circle at 50% 0, #000 22px, transparent 23px); mask-image: linear-gradient(#000 0 0), radial-gradient(circle at 50% 0, #000 22px, transparent 23px); }
html.pinned .theatre__seats { height: 14svh; }

/* ---------- 05 Brands: a ruled list of names ---------- */

.brands { position: relative; padding: var(--section) var(--gutter); }
.brands__list { list-style: none; margin: var(--s-8) 0 0; padding: 0; border-top: 1px solid var(--line); }
.brand {
  width: 100%;
  display: grid; grid-template-columns: 3.5ch minmax(0, 1fr) auto; align-items: center; gap: var(--s-4);
  padding: clamp(14px, 1.8vw, 24px) 0;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  text-align: left; cursor: pointer;
  transition: opacity var(--t-base), padding var(--t-base) var(--ease-out);
}
.brand__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.brand__name { font-size: clamp(30px, 4.6vw, 80px); line-height: 1; font-weight: 700; font-stretch: 80%; letter-spacing: -.01em; }
.brand__what { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; }
@media (hover: hover) {
  .brands__list:hover .brand { opacity: .38; }
  .brands__list .brand:hover { opacity: 1; padding-left: 18px; }
}
.brand:focus-visible { padding-left: 18px; }

/* ---------- 06 Process ----------
   Each step draws its own scribble as it arrives; a hand-drawn thread runs down the margin. */

.process { position: relative; padding: var(--section) var(--gutter); }
.steps { list-style: none; margin: var(--s-9) 0 0; padding: 0; display: grid; gap: clamp(72px, 10vw, 150px); position: relative; z-index: 1; }
.step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
.step__no { grid-column: 1 / span 2; font-size: clamp(64px, 8vw, 140px); line-height: .8; font-weight: 780; font-stretch: 75%; color: var(--red); }
.step__body { grid-column: 3 / span 6; }
.step:nth-child(even) .step__body { grid-column: 4 / span 6; }
.step__title { margin: 0 0 var(--s-4); font-size: clamp(34px, 4.2vw, 72px); line-height: .98; font-weight: 700; font-stretch: 82%; letter-spacing: -.01em; }
.step__body p { margin: 0; max-width: 44ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; }
.step__note {
  grid-column: 10 / span 3; align-self: center; position: relative; margin: 0;
  font-family: var(--font-hand); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.05; font-weight: 600;
  color: var(--red); rotate: -5deg;
}
.step:nth-child(even) .step__note { rotate: 4deg; }

.mark { position: relative; white-space: nowrap; }
.scribble { position: absolute; overflow: visible; pointer-events: none; }
.scribble path {
  fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.scribble--circle { left: -7%; top: -42%; width: 114%; height: 184%; }
.scribble--under { left: -2%; bottom: -.42em; width: 104%; height: .55em; }
.scribble--double { height: .7em; bottom: -.62em; }
.scribble--steam { left: 50%; bottom: 86%; width: 1.5em; height: 1.15em; translate: -50% 0; }
.scribble--steam path { stroke-width: 4; }
.scribble--spark { right: -.95em; top: -.55em; width: .85em; height: .85em; }
.scribble--spark path { stroke-width: 4; }
.scribble--arrow { position: relative; display: block; width: 72px; height: 42px; margin: 6px 0 0 -6px; }
.step:nth-child(even) .scribble--arrow { transform: scaleX(-1); margin-left: 40px; }

.process__thread { position: absolute; z-index: 0; left: calc(var(--gutter) + 1.2vw); top: 26%; width: 60px; height: 66%; overflow: visible; pointer-events: none; }
.process__thread path { fill: none; stroke: rgb(131 1 1 / .28); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }

@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; row-gap: var(--s-4); }
  .step__no, .step__body, .step:nth-child(even) .step__body, .step__note { grid-column: 1; }
  .step__note { justify-self: end; text-align: right; }
  .step:nth-child(even) .scribble--arrow { margin-left: auto; }
  .mark { white-space: normal; }
  .process__thread { display: none; }
}

/* ---------- 07 Open the door ----------
   Default: the film, then the box in the page flow. With html.pinned the stage pins, two doors part
   (each carrying half of the words), the film settles, and the frosted box rises over it.
   Everything inside the box is set in one premium sans (Satoshi), medium to bold. */

.door { position: relative; }
.door__stage { position: relative; isolation: isolate; padding: 44svh var(--gutter) var(--s-8); }
.door__film-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink) url("../assets/media/ciel/ciel-ambiance.jpg") center / cover no-repeat; }
.door__film { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.05); }
.door__film-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ink), rgb(11 9 8 / .25) 22%, rgb(11 9 8 / .4) 70%, var(--ink)); }
.door__leaf, .door__hint { display: none; }

.door__box {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-7);
  margin: 0 auto; padding: clamp(24px, 3.4vw, 52px);
  max-width: 1180px;
  border-radius: var(--r-panel);
  background: linear-gradient(150deg, rgb(23 17 15 / .84), rgb(131 1 1 / .42));
  border: var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  color: var(--white);
  font-family: var(--font-box);
}
.door__box *:not(svg, path) { font-family: var(--font-box); font-style: normal; font-stretch: normal; }
.door__label { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.door__title { margin: var(--s-4) 0 0; font-size: clamp(32px, 3.8vw, 58px); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; }
.door__name { display: block; margin-bottom: .2em; font-size: clamp(44px, 8vw, 120px); line-height: .92; font-weight: 700; letter-spacing: -.035em; text-transform: uppercase; }
.door__title em { color: var(--beige); }
.door__lead { margin: var(--s-5) 0 0; max-width: 44ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; font-weight: 400; color: rgb(250 247 242 / .86); }
.door__contacts { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid rgb(250 247 242 / .16); }
.door__contacts a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-4);
  min-height: 56px; padding: var(--s-3) 0;
  border-bottom: 1px solid rgb(250 247 242 / .16);
  text-decoration: none; font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.01em;
  overflow-wrap: anywhere;
  transition: color var(--t-fast), padding var(--t-base) var(--ease-out);
}
.door__kind { width: 6ch; flex: none; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.door__contacts a:hover { color: var(--beige); padding-left: 10px; }
.door__social { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 0; font-size: 15px; font-weight: 500; }
.door__social a { padding: 8px 0; }
.door__mark { display: grid; margin-top: var(--s-6); }
.door__sign { margin: var(--s-3) 0 0; font-size: 17px; font-weight: 500; letter-spacing: -.005em; color: var(--beige); }
.door__sign span { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--muted-dark); }

.brief { display: grid; gap: var(--s-4); align-content: start; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); padding: 0; }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid rgb(250 247 242 / .26);
  background: rgb(11 9 8 / .45); color: var(--white);
  font-size: 16px; line-height: 1.4; font-weight: 400;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: rgb(250 247 242 / .6); }
.field input:hover, .field textarea:hover { border-color: rgb(250 247 242 / .5); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-color: var(--white); }
.field input[aria-invalid="true"] { border-color: var(--error-on-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid rgb(250 247 242 / .3);
  font-size: 14px; font-weight: 500;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip input:hover + span { border-color: var(--white); }
.chip input:checked + span { background: var(--beige); color: var(--ink); border-color: var(--beige); }
.chip input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.brief__error { margin: 0; min-height: 1.4em; color: var(--error-on-dark); font-weight: 500; font-size: 15px; }
.brief__error:empty { min-height: 0; }
.brief__send { display: flex; flex-wrap: wrap; gap: 10px; }
.door__box .btn { font-size: 15px; font-weight: 700; letter-spacing: .005em; }
.brief__note { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--muted-dark); }
.brief__status { margin: 0; font-size: 14px; color: var(--beige); }
.brief__status:empty { display: none; }

@media (min-width: 861px) {
  .door__box { grid-template-columns: 1.08fr 1fr; align-items: start; }
}

html.pinned .door__stage { height: 100svh; padding: 0; overflow: clip; }
html.pinned .door__film-wrap::after { background: radial-gradient(ellipse at center, rgb(11 9 8 / .2), rgb(11 9 8 / .7)); }
html.pinned .door__leaf {
  display: block; position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 3; overflow: hidden;
  background: linear-gradient(90deg, var(--ink), var(--ink-2));
}
html.pinned .door__leaf--l { left: 0; }
html.pinned .door__leaf--r { right: 0; background: linear-gradient(270deg, var(--ink), var(--ink-2)); }
html.pinned .door__words {
  position: absolute; top: 50%; width: 100vw; translate: 0 -50%;
  text-align: center; white-space: nowrap; color: var(--white);
  font-size: clamp(80px, 12.4vw, 240px); line-height: .84; font-weight: 800; font-stretch: 75%;
  text-transform: uppercase; letter-spacing: -.02em;
}
html.pinned .door__leaf--l .door__words { left: 0; }
html.pinned .door__leaf--r .door__words { right: 0; }
html.pinned .door__handle { position: absolute; top: calc(50% + 7vw); width: 6px; height: 76px; border-radius: var(--r-pill); background: var(--red-bright); }
html.pinned .door__leaf--l .door__handle { right: 22px; }
html.pinned .door__leaf--r .door__handle { left: 22px; }
html.pinned .door__hint { display: block; position: absolute; z-index: 4; left: 50%; bottom: var(--s-6); translate: -50% 0; margin: 0; color: var(--muted-dark); }
html.pinned .door__box {
  position: absolute; left: 50%; top: calc(var(--nav-h) + 16px); translate: -50% 0;
  width: min(1180px, calc(100% - 2 * var(--gutter)));
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(20px, min(3.2vw, 4.4vh), 48px);
}
/* Inside the pinned stage the box is sized by the screen's height too, so it fits most laptops. */
html.pinned .door__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.pinned .door__title { font-size: clamp(28px, min(3.8vw, 5.8vh), 58px); }
html.pinned .door__lead { margin-top: clamp(12px, 2.4vh, 24px); }
html.pinned .door__contacts { margin-top: clamp(16px, 3vh, 32px); }
html.pinned .door__contacts a { min-height: 48px; padding: clamp(6px, 1.2vh, 12px) 0; font-size: clamp(18px, min(1.8vw, 3vh), 26px); }
html.pinned .door__social { margin-top: clamp(12px, 2.2vh, 24px); }
html.pinned .door__mark { margin-top: clamp(14px, 2.6vh, 32px); }
html.pinned .door__sign { margin-top: 10px; }
html.pinned .brief { gap: clamp(10px, 1.8vh, 16px); }
html.pinned .field textarea { min-height: 72px; }
html.pinned .chip span { min-height: 36px; }

/* ---------- Footer ---------- */

.footer { position: relative; padding: var(--s-9) var(--gutter) var(--s-5); overflow: clip; }
.footer__word {
  margin: 0; text-align: center; color: var(--white);
  font-size: 29vw; line-height: .8; font-weight: 800; font-stretch: 75%; letter-spacing: -.03em; text-transform: uppercase;
  user-select: none;
}
.footer__glass {
  position: relative; z-index: 1; margin-top: -10.5vw;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-7); align-items: end;
  padding: clamp(20px, 3vw, 40px);
  padding-top: calc(10.5vw + clamp(16px, 2vw, 28px)); /* the blurred half of the word gets the top of the box to itself */
  border-radius: var(--r-panel);
  background: linear-gradient(150deg, rgb(250 247 242 / .1), rgb(131 1 1 / .38));
  border: var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
}
.footer__mark { grid-column: 1 / -1; width: 48px; height: 48px; border-radius: 12px; }
.footer__mark img { width: 34px; }
.footer__line { grid-column: 1 / -1; margin: 0; font-size: clamp(32px, 4vw, 64px); line-height: 1; color: var(--beige); }
.footer__links { grid-column: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-weight: 600; }
.footer__links a { display: inline-block; padding: 8px 0; }
.footer__top { grid-column: 2; justify-self: end; padding: 8px 0; }
.footer__legal { grid-column: 1 / -1; margin: 0; color: var(--muted-dark); }
@media (max-width: 860px) {
  .footer__glass { grid-template-columns: 1fr; }
  .footer__links, .footer__top { grid-column: 1; }
  .footer__top { justify-self: start; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgb(11 9 8 / .97); color: var(--white);
}
.lightbox::backdrop { background: rgb(11 9 8 / .6); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__bar, .lightbox__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--gutter); }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); touch-action: pan-y; }
.lightbox__stage video, .lightbox__stage img { max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto; border-radius: var(--r-frame); background: var(--ink-2); }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid rgb(250 247 242 / .4); background: transparent;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lb-btn:hover { background: var(--white); color: var(--ink); }
.lb-btn[hidden] { display: none; }
.lb-brand { color: var(--white); }
@media (hover: none) { .lb-hint { display: none; } }

/* ---------- Tap to play (phones, tablets, data saver) ---------- */

.reel-play {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; color: var(--white);
  cursor: pointer;
}
.reel-play span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--r-pill);
  background: rgb(11 9 8 / .55); border: 1px solid rgb(250 247 242 / .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  transition: opacity var(--t-base);
}
.is-playing > .reel-play span { opacity: 0; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain { animation: none; }
}