/* ==========================================================================
   Concept 5 — "Portrait as a switch"
   Geometry locked to Figma node 41:135 "Hero 1440" (1440x1024):
   logo 112x56 at left 56 / top 0 · giant word Archivo Regular 120px on the
   vertical centre, white and #B90000 alternating, 38px gap · columns at
   58.33%+17px and 75%+10px, 14px uppercase, tracking 1.54px, 6px row gap.
   Word size and weight are signed off — do not thicken, enlarge or shrink.
   ========================================================================== */

:root {
  --black:  #000000;
  --white:  #ffffff;
  --red:    #B90000;

  --t-55: rgba(255, 255, 255, 0.55);
  --t-45: rgba(255, 255, 255, 0.45);

  /* 120 / 1440 = 8.3333vw — 120px at the design width, fluid either side */
  --word:     clamp(46px, 8.3333vw, 132px);
  --word-gap: calc(var(--word) * 0.31667);   /* 38 / 120 */

  --edge: 56px;
  --top:  42px;
  --bot:  53px;

  --col-a: calc(58.3333% + 17px);   /* 857px at 1440 */
  --col-b: calc(75% + 10px);        /* 1090px at 1440 */

  --label:   14px;
  --track:   1.54px;
  /* One baseline step for every column line — 15px text + 6px gap in the
     Figma frame. Wrapped lines and new paragraphs land on the same grid, so
     the left and right columns always read as one set of rules. */
  --step:    21px;

  --f: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(.33, 1, .68, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--f);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ── stage ─────────────────────────────────────────────────── */

/* The scene is the scroll budget; the hero is pinned inside it and breaks up
   in place instead of sliding away. */
.scene { position: relative; height: 260vh; background: var(--black); }

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 660px;
  overflow: hidden;
  background: var(--black);
}

/* ── logo, flush to the top edge ───────────────────────────── */

/* fixed, not absolute: the mark hangs off the top edge on every screen, not
   just the hero */
.logo {
  position: fixed;
  top: 0;
  left: var(--edge);
  z-index: 20;
  display: block;
}
.logo .mark { display: block; width: 112px; height: auto; }
/* The mark stays white throughout. Only the two filled squares under O and F
   change: brand red on black, black on the red field — so they never dissolve
   into the background they sit on. */
.logo .sq { fill: var(--red); transition: fill .45s var(--ease); }
body.on-red .logo .sq { fill: var(--black); }

/* ── nav — the left of the two top columns ─────────────────── */

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nav a {
  color: var(--white);
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--t-55); }

/* ── the giant word, drifting right to left ────────────────── */

.band {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  transform: translateY(-50%);
  overflow: hidden;
}

/* The drift is driven in JS, in pixels — see app.js. A CSS percentage
   animation would jolt sideways every time the text length changes, and the
   interludes are three times longer than the discipline words. */
.band-row {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* margin instead of gap so half the row is an exact loop */
.w {
  display: block;
  margin-right: var(--word-gap);
  font-size: var(--word);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}
.w:nth-child(even) { color: var(--red); }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── the figure, standing on the letters ───────────────────── */

.stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.stack {
  position: relative;
  width: clamp(230px, 24vw, 346px);
  height: min(80vh, 820px);
}
.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.layer.is-live { opacity: 1; }

/* placeholder until the four shots exist */
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  line-height: var(--step);
  text-align: center;
  background: rgba(0, 0, 0, 0.62);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-45);
}
.ph b { font-weight: 500; font-size: var(--label); color: var(--white); }
.ph i { font-style: normal; }

/* ── the four mono-ish columns ─────────────────────────────── */

.col {
  position: absolute;
  z-index: 5;
  max-width: 216px;
  font-size: var(--label);
  line-height: var(--step);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
/* no paragraph gap — the line-height IS the rhythm */
.col p + p { margin-top: 0; }
.col-a { left: var(--col-a); }
/* the right column runs to the page edge, so its lines don't break early */
.col-b { left: var(--col-b); max-width: 262px; }
.col-top    { top: var(--top); }
/* The bottom zone is a fixed 7-line box: every block in it — disciplines, NOW
   and the counter — starts on ONE shared line, and nothing shifts when the
   role changes and the fact gets longer or shorter. */
.col-bottom {
  bottom: var(--bot);
  height: calc(var(--step) * 7);
}

/* disciplines — the switch.
   The marker sits OUTSIDE the text box, so every column on the page starts on
   the same vertical line: text aligns to text, never to the red square. */
.disc-rows { display: flex; flex-direction: column; align-items: flex-start; }
.ix {
  position: relative;
  padding-left: 0;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--t-45);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.ix::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: var(--red);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.ix:hover { color: var(--t-55); }
.ix.is-live { color: var(--white); }
.ix.is-live::before { opacity: 1; }

/* now — the line and the fact for the live role.
   Caps are for labels: menu, identity, disciplines, counter. The fact is a
   whole sentence, so it drops to sentence case — word shapes and ascenders
   come back and it reads at a glance. Tracking eases off to match. */
.now-line { color: var(--white); transition: opacity .3s var(--ease); }
.now-fact {
  color: var(--t-55);
  text-transform: none;
  letter-spacing: 0.2px;
  transition: opacity .3s var(--ease);
}
.now.is-swap .now-line,
.now.is-swap .now-fact { opacity: 0; }

/* ── counter, bottom left ──────────────────────────────────── */

.cnt {
  position: absolute;
  left: var(--edge);
  /* top line of the bottom zone — same line the columns start on */
  bottom: calc(var(--bot) + var(--step) * 6);
  z-index: 6;
  font-size: var(--label);
  line-height: var(--step);          /* same baseline as the columns */
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-45);
}
.cnt-n { color: var(--white); }

/* ══ THE BREAK-UP ════════════════════════════════════════════
   Squares land on top of the pinned hero and eat it, until the screen is one
   red field and the lead can stand on it. Tiles drift past at their own
   speeds: mostly behind the headline, two above it. */

/* the squares sit OVER the hero content — that is what makes it break up
   rather than fade */
.mosaic {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(var(--cols, 14), 1fr);
  grid-auto-rows: 1fr;
}
.mosaic i {
  display: block;
  background: var(--red);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* the 1px shadow closes the sub-pixel seams between cells, so a filled
   screen is one flat red field and not a visible grid */
.mosaic i.on { opacity: 1; transform: none; box-shadow: 0 0 0 1px var(--red); }

/* drifting square slots — the photographs don't exist yet */
.tiles {
  position: absolute;
  inset: 0;
  z-index: 12;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.tiles.on { opacity: 1; }
.tile {
  position: absolute;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.tile.front { z-index: 14; background: rgba(0, 0, 0, 0.55); }

/* the lead */
.lead-copy {
  position: absolute;
  inset: 0;
  z-index: 13;
  padding: var(--top) var(--edge) var(--bot);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.lead-copy.on { opacity: 1; }

/* everything rises into place, staggered — headline lines first, then the
   paragraph, then the metrics */
.lead-h span,
.lead-text,
.metrics div {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.lead-copy.on .lead-h span,
.lead-copy.on .lead-text,
.lead-copy.on .metrics div { opacity: 1; transform: none; }

.lead-copy.on .lead-h span:nth-child(1) { transition-delay: .02s; }
.lead-copy.on .lead-h span:nth-child(2) { transition-delay: .10s; }
.lead-copy.on .lead-h span:nth-child(3) { transition-delay: .18s; }
.lead-copy.on .lead-text              { transition-delay: .30s; }
.lead-copy.on .metrics div:nth-child(1) { transition-delay: .38s; }
.lead-copy.on .metrics div:nth-child(2) { transition-delay: .44s; }
.lead-copy.on .metrics div:nth-child(3) { transition-delay: .50s; }

/* the headline sits on the vertical centre and runs the full width;
   the offset is on the FIRST line, the last one squares up to the left edge */
.lead-h {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  top: 50%;
  transform: translateY(-58%);
  display: flex;
  flex-direction: column;
  /* sized so the longest line runs edge to edge without wrapping */
  font-size: clamp(28px, 6.55vw, 100px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--white);
}
/* "The" starts exactly under "person" of the line below. In em, not %, so the
   two stay locked together at any viewport width: this is the measured width
   of "is the " at the headline's own size. */
.lead-h-in { padding-left: 2.46em; }

.lead-cols {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: var(--bot);
  display: grid;
  grid-template-columns: minmax(0, 46ch) minmax(0, 1fr);
  gap: 0 8%;
  align-items: end;
}
/* description reads as one block, not as columns */
.lead-text {
  font-size: var(--label);
  line-height: var(--step);
  color: rgba(255, 255, 255, 0.88);
}

/* contact, where the metrics table used to sprawl — no rule, no big figures,
   just the next step for someone who read this far */
.lead-contact { justify-self: end; text-align: right; }
.lead-k {
  font-size: var(--label);
  line-height: var(--step);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--white);
}
.lead-k i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  background: var(--black);
  vertical-align: middle;
}
.lead-mail {
  display: block;
  margin-top: 6px;
  font-size: clamp(20px, 2.3vw, 34px);
  line-height: 1.2;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lead-mail:hover { color: var(--black); border-color: var(--black); }
.lead-where {
  margin-top: var(--step);
  font-size: var(--label);
  line-height: var(--step);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ══ SECTIONS BELOW THE FOLD ═════════════════════════════════
   Back on black after the red flood. Same tokens throughout: 14px caps at
   1.54 tracking, 21px step, red only as a marker. */

.work, .serve { position: relative; padding: 14vh var(--edge) 12vh; background: var(--black); }

.sec-head { margin-bottom: 7vh; }
.sec-k {
  font-size: var(--label);
  line-height: var(--step);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-55);
}
.sec-k i {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 10px;
  background: var(--red);
  vertical-align: middle;
}
.sec-h {
  margin-top: var(--step);
  font-size: clamp(34px, 5.4vw, 78px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--white);
}
.sec-sub {
  margin-top: var(--step);
  max-width: 48ch;
  font-size: var(--label);
  line-height: var(--step);
  color: var(--t-55);
}

/* ── work register ───────────────────────────────────────── */

.reg { position: relative; }
.reg-rows { list-style: none; }
.reg-rows li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.reg-rows li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.reg-rows a {
  display: grid;
  grid-template-columns: 92px 92px minmax(0, 1fr) auto 132px;
  align-items: center;
  gap: 0 32px;
  padding: 22px 0;
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-55);
  /* transform, never padding — the layout must not re-run on hover */
  transition: color .25s var(--ease), transform .35s var(--ease);
}
.reg-rows a:hover { color: var(--white); transform: translateX(16px); }
.reg-name {
  font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--white);
}
.reg-tags { display: flex; gap: 8px; }
.reg-tags i {
  font-style: normal;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 12px;
}
.reg-go { text-align: right; white-space: nowrap; }
.reg-rows a:hover .reg-go { color: var(--red); }

.reg-shot {
  position: fixed;
  z-index: 5;
  width: min(38vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #0b0b0b;
  border: 1px dashed rgba(255, 255, 255, 0.20);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.97);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
}
.reg-shot.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.reg-shot span {
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-45);
}

/* ── practice accordion ──────────────────────────────────── */

.acc-item { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.acc-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

.acc-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 0 24px;
  width: 100%;
  padding: 26px 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--t-55);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.acc-head:hover { color: var(--white); }
.acc-item.is-open .acc-head { color: var(--white); }

.acc-n {
  font-size: var(--label);
  letter-spacing: var(--track);
  color: var(--t-45);
}
.acc-item.is-open .acc-n { color: var(--red); }
.acc-t {
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* plus that becomes a minus, drawn from two rules */
.acc-sign { position: relative; width: 20px; height: 20px; justify-self: end; }
.acc-sign::before,
.acc-sign::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 20px; height: 1px;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.acc-sign::after { transform: rotate(90deg); }
.acc-item.is-open .acc-sign::after { transform: rotate(0deg); }

/* grid-template-rows animates without laying the text out every frame */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; }
.acc-item.is-open .acc-inner { padding-bottom: 30px; }
.acc-inner p {
  max-width: 62ch;
  font-size: var(--label);
  line-height: var(--step);
  color: var(--t-55);
}
.acc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--step); max-width: none; }
.acc-tags i {
  font-style: normal;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-55);
}

/* ── footer ──────────────────────────────────────────────── */

.foot {
  position: relative;
  padding: 14vh 0 0;
  background: var(--black);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6vh 6%;
  padding: 0 var(--edge);
}
.foot-h {
  display: flex;
  flex-direction: column;
  margin-top: var(--step);
  font-size: clamp(34px, 5.4vw, 78px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--white);
}
.foot-h-in { padding-left: 1.6em; }

.foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 5vh;
  padding: 18px 28px;
  background: var(--red);
  border: 0;
  font: inherit;
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.foot-cta:hover { background: #d10000; transform: translateX(6px); }

.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6%; align-content: start; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col a, .foot-col p {
  font-size: var(--label);
  line-height: var(--step);
  color: var(--t-55);
}
.foot-col a { transition: color .25s var(--ease); }
.foot-col a:hover { color: var(--white); }
.foot-k {
  font-size: var(--label);
  line-height: var(--step);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}

.foot-band { margin-top: 10vh; overflow: hidden; }
.foot-band-row {
  display: flex;
  width: max-content;
  animation: foot-drift 46s linear infinite;
}
.foot-band-row span {
  font-size: clamp(56px, 11vw, 176px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.07);
  margin-right: 5vw;
}
@keyframes foot-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.foot-fine {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: var(--step) var(--edge) 28px;
  font-size: var(--label);
  line-height: var(--step);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-45);
}

/* ── drawer ──────────────────────────────────────────────── */

.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer-veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.drawer.on .drawer-veil { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  padding: 40px var(--edge) 48px;
  background: #0a0a0a;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
}
.drawer.on .drawer-panel { transform: none; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-x {
  background: none; border: 0; font: inherit; font-size: 18px;
  color: var(--t-55); cursor: pointer; padding: 6px;
  transition: color .25s var(--ease);
}
.drawer-x:hover { color: var(--white); }

.drawer-h {
  margin-top: 6vh;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
}
.drawer-note {
  margin-top: var(--step);
  font-size: var(--label);
  line-height: var(--step);
  color: var(--t-55);
}

.drawer-form { margin-top: 5vh; display: flex; flex-direction: column; gap: var(--step); }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > span {
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--t-55);
}
.fld > span i { font-style: normal; color: var(--t-45); }
.fld input, .fld textarea {
  padding: 14px 16px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font: inherit;
  font-size: var(--label);
  line-height: var(--step);
  color: var(--white);
  resize: vertical;
  transition: border-color .25s var(--ease);
}
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--red); }
.fld textarea::placeholder { color: var(--t-45); }

.drawer-send {
  margin-top: var(--step);
  padding: 18px 24px;
  background: var(--red);
  border: 0;
  font: inherit;
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  transition: background-color .3s var(--ease);
}
.drawer-send:hover { background: #d10000; }
.drawer-alt {
  font-size: var(--label);
  line-height: var(--step);
  color: var(--t-55);
}
.drawer-alt a { border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

body.drawer-open { overflow: hidden; }

/* ── narrow screens ────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --col-a: 52%; --col-b: 76%; }
  .col { max-width: 22vw; }
}

/* The headline is nowrap on desktop so the lines stay authored. Below 900px
   that clips it off-screen, so wrapping comes back and the offset goes away. */
@media (max-width: 900px) {
  .lead-h { white-space: normal; font-size: clamp(28px, 7.4vw, 52px); }
  .lead-h-in { padding-left: 0; }
  .lead-h span { display: block; }

  .lead-cols { grid-template-columns: minmax(0, 1fr); gap: var(--step) 0; }
  .lead-contact { justify-self: start; text-align: left; }
  .lead-copy { padding-bottom: calc(var(--bot) + var(--step)); }
}

@media (max-width: 780px) {
  /* label never drops below 14px — Oleg's floor */
  :root { --edge: 24px; --top: 28px; --bot: 28px; --track: 1.1px; }

  .col { max-width: none; width: calc(50% - 32px); }
  .col-a { left: var(--edge); }
  .col-b { left: 50%; }
  .col-top { top: 128px; }
  .col-bottom { bottom: 60px; }

  .stack { width: 54vw; height: 56vh; }
  .stage { align-items: center; }

  .cnt { bottom: 24px; }

  .work, .serve { padding: 10vh var(--edge) 9vh; }

  .reg-rows a { grid-template-columns: 68px minmax(0, 1fr); gap: 6px 16px; }
  .reg-y, .reg-tags { display: none; }
  .reg-name, .reg-go { grid-column: 2; }
  .reg-go { text-align: left; }
  .reg-shot { display: none; }          /* no hover on touch — the row is the link */
  .reg-rows a:hover { transform: none; }

  .acc-head { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 0 14px; padding: 20px 0; }

  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step) 6%; }
  .foot-h-in { padding-left: 0; }
  .foot-fine { flex-direction: column; gap: 6px; }

  .drawer-panel { width: 100%; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .band-row { animation: none; }
  .layer, .band, .now-line, .now-fact { transition-duration: 0.01ms; }
}