/* ===================================================================
   The Large-Format Camera — design system

   Palette is traced to the object: the near-black of an unlit stage, the
   bone white of a printed slate, the amber of a safelight and of edge
   print on the stock, and the greys of anodised and brushed aluminium.

   Type: one oversized condensed grotesk for display (it is the vernacular
   of equipment silkscreen and slate lettering), one quiet sans for body,
   one mono reserved strictly for measured quantities.
   =================================================================== */

:root {
  --black:        #0a0a0a;
  --black-deep:   #050506;
  --bone:         #f4f1ea;
  --amber:        #e8a33d;
  --amber-dim:    #8a6224;

  --grey-900:     #121315;
  --grey-800:     #1b1d20;
  --grey-700:     #2a2d31;
  --grey-500:     #55595e;
  --grey-400:     #7d8186;
  --grey-300:     #a8acb1;

  --ink:          #f4f1ea;
  --ink-soft:     #b9b6ae;
  --ink-mute:     #86837d;

  --display: "Saira Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --gut: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

::selection { background: var(--amber); color: #14100a; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------- canvas ---------------- */

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: var(--black-deep);
}

/* ---------------- boot ---------------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--black-deep);
  display: grid;
  place-items: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.boot[hidden-anim] { opacity: 0; visibility: hidden; pointer-events: none; }

.boot__inner { width: min(320px, 70vw); text-align: center; }

.boot__perf {
  height: 14px;
  margin-bottom: 26px;
  background-image: repeating-linear-gradient(to right,
    var(--grey-700) 0 10px, transparent 10px 26px);
  opacity: 0.65;
}

.boot__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  margin: 0 0 12px;
}

.boot__bar { height: 1px; background: var(--grey-800); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0%; background: var(--amber); transition: width 0.25s linear; }

.fallback {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  padding: var(--gut);
  background: var(--grey-900);
  border-top: 1px solid var(--grey-700);
}
.fallback h2 { font-family: var(--display); font-size: 28px; margin: 0 0 8px; }
.fallback p { margin: 0; max-width: 60ch; color: var(--ink-soft); }

/* ---------------- top bar ---------------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gut);
  mix-blend-mode: difference;
  pointer-events: none;
}
.topbar a { pointer-events: auto; text-decoration: none; }

.topbar__mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar__perf {
  width: 26px; height: 9px;
  background-image: repeating-linear-gradient(to right, var(--bone) 0 4px, transparent 4px 9px);
}

.topbar__nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.topbar__nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.62;
  transition: opacity 0.3s;
}
.topbar__nav a:hover { opacity: 1; }

@media (max-width: 720px) { .topbar__nav { display: none; } }

/* ---------------- film-strip progress rail ---------------- */

.filmrail {
  position: fixed;
  right: max(12px, 2vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  height: min(56vh, 460px);
  width: 26px;
  pointer-events: none;
}
.filmrail__track {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--grey-800);
}
.filmrail__fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: var(--amber);
}
.filmrail__perfs {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, var(--grey-700) 0 6px, transparent 6px 22px);
  background-position: 0 0, 100% 0;
  background-size: 4px 100%, 4px 100%;
  background-repeat: no-repeat;
  opacity: 0.8;
}
.filmrail__counter {
  position: absolute;
  bottom: -26px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .filmrail { height: 34vh; width: 18px; right: 6px; }
  /* Centred on an 18px rail sitting 6px from the edge, the counter hangs off
     the viewport and the whole page becomes draggable sideways. Anchor it to
     the rail's right edge instead. */
  .filmrail__counter { left: auto; right: 0; transform: none; }
}

/* ---------------- sections ---------------- */

main { position: relative; z-index: 10; }

.sec {
  position: relative;
  padding: 0 var(--gut);
  pointer-events: none;
}
.sec > * { pointer-events: auto; }

.sec--hero      { height: 100svh; }
.sec--format    { height: 190vh; }
.sec--exploded  { height: 460vh; }
.sec--enclosure { height: 230vh; }
.sec--eyeline   { height: 200vh; }
.sec--story     { height: 190vh; }
.sec--shoot     { height: auto; }
.shoot__dwell   { height: 150vh; }

/* ---------------- type ---------------- */

.display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 11.2vw, 178px);
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------------- stacked display headline ----------------

   One word per line, set as large as the measure allows, with the first line
   solid and the rest drawn as outlines. Two reasons, both practical:

   - Line breaks are explicit, so "LARGE-FORMAT" can never break at its hyphen
     and leave a "LARGE-" orphan on a narrow screen. Every viewport gets the
     same three lines.
   - The outline lets the headline sit over the machine at full size without
     burying it. Solid type this large either covers the subject or has to
     shrink until it stops being a headline.

   Sizing is one clamp shared by all three lines: 15.5vw fills a phone, the
   172px ceiling stops it running past the copy column on a wide desktop.     */

.stack {
  display: flex;
  flex-direction: column;
  font-size: clamp(56px, 15.5vw, 172px);
  line-height: 0.80;
  letter-spacing: -0.022em;
}
.stack--centred { align-items: center; text-align: center; }

.stack__line { display: block; }

.stack__line--solid { color: var(--bone); }

.stack__line--hollow {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.13vw, 2px) rgba(244, 241, 234, 0.9);
  text-stroke: clamp(1px, 0.13vw, 2px) rgba(244, 241, 234, 0.9);
}

/* Outlined type is a deliberate contrast trade. If the reader has asked for
   more contrast, give up the effect rather than the legibility. */
@media (prefers-contrast: more) {
  .stack__line--hollow {
    color: var(--bone);
    -webkit-text-stroke: 0;
    text-stroke: 0;
  }
}

.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 0.90;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 18px;
}

.lede {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 30ch;
  margin: 22px 0 0;
}

.body {
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 26px;
}

.specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--grey-800); max-width: 42ch; }
.specs > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--grey-800);
}
.specs dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.specs dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right; }

/* ---------------- hero ---------------- */

.sec--hero { display: flex; align-items: flex-end; }
.hero__type {
  position: relative;
  padding-bottom: clamp(48px, 10vh, 120px);
  width: min(100%, 1080px);
}
.hero__type .lede { max-width: 26ch; }

/* The headline overlaps the machine at this size, so it gets its own ground
   to sit on — a scrim, not a panel. It is full-bleed and fades on both axes;
   bounded to the text column it leaves a hard vertical edge straight across
   the machine, which is worse than no scrim at all. */
.hero__type::before {
  content: '';
  position: absolute;
  top: -24vh;
  bottom: calc(var(--gut) * -1);
  left: calc(var(--gut) * -1);
  width: 100vw;
  background: linear-gradient(to top,
    rgba(10,10,10,0.94) 34%,
    rgba(10,10,10,0.66) 58%,
    rgba(10,10,10,0) 92%);
  z-index: -1;
  pointer-events: none;
}

/* On a wide screen the machine occupies the right half, so the scrim is
   masked away before it reaches it. The mask handles the horizontal falloff
   and the background handles the vertical one — stacking two gradients
   instead leaves a visible seam along the top, because the horizontal one
   has no vertical falloff of its own. */
@media (min-width: 901px) {
  .hero__type::before {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 74%);
    mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 74%);
  }
}

/* Keeps "65 mm" from breaking across lines on a phone. */
.eyebrow--tight { white-space: nowrap; font-size: clamp(9px, 2.4vw, 10.5px); }

.hero__hint {
  position: absolute;
  right: var(--gut); bottom: clamp(60px, 12vh, 130px);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; color: var(--ink-mute);
}
.hero__hint i {
  width: 42px; height: 1px; background: var(--grey-500); position: relative; overflow: hidden;
}
.hero__hint i::after {
  content: ''; position: absolute; inset: 0; background: var(--amber);
  transform: translateX(-100%); animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }
@media (max-width: 720px) { .hero__hint { display: none; } }

/* ---------------- copy blocks pinned in-viewport ---------------- */

.copyblock {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(46ch, 42vw);
}
.copyblock--left  { align-items: flex-start; }
.copyblock--right { margin-left: auto; }
.copyblock--corner {
  justify-content: flex-start;
  padding-top: clamp(90px, 14vh, 160px);
  width: min(34ch, 30vw);
}

@media (max-width: 900px) {
  /* 100%, not 92vw: the section already carries a gutter of its own, so a
     viewport-relative width overflows the padded content box by twice the
     gutter and makes the whole page draggable sideways. */
  .copyblock, .copyblock--corner { width: min(48ch, 100%); }
  .copyblock--right { margin-left: 0; }
  .copyblock { justify-content: flex-end; padding-bottom: 12vh; height: 100svh; }
  .copyblock--corner { justify-content: flex-start; padding-bottom: 0; }
}

/* ---------------- exploded view: leaders + labels ---------------- */

.leaders {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.leaders path { fill: none; stroke: var(--grey-500); stroke-width: 1; vector-effect: non-scaling-stroke; }
.leaders circle { fill: none; stroke: var(--amber); stroke-width: 1; }
.leaders .is-active path { stroke: var(--amber); }

.labels {
  position: fixed;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.labels.is-on, .leaders.is-on { opacity: 1; }

.label {
  position: absolute;
  width: 210px;
  pointer-events: auto;
  cursor: default;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  padding: 6px 0 6px 10px;
  border-left: 1px solid var(--grey-700);
}
.label.is-shown { opacity: 1; }
.label[data-side="left"] { border-left: 0; border-right: 1px solid var(--grey-700); text-align: right; padding: 6px 10px 6px 0; }
.label__idx {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--amber); display: block;
}
.label__name {
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0.03em;
  text-transform: uppercase; display: block; line-height: 1.1; margin: 2px 0 3px;
}
.label__spec { font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--ink-mute); display: block; }
.label:hover, .label.is-active { border-color: var(--amber); }
.label:hover .label__spec, .label.is-active .label__spec { color: var(--ink-soft); }

.partlist { display: none; }

/* Copy that only makes sense with a pointer that can hover. */
@media (hover: none), (max-width: 900px) { .only-fine { display: none; } }

@media (max-width: 900px) {
  .leaders, .labels { display: none; }
  /* Mobile exploded layout: the parts become a readout pinned to the bottom
     of the viewport, because leader lines to a 3D point are unusable at this
     width. Fixed rather than sticky — the section is 460vh of scroll with only
     one screen of content in flow, so a sticky element has nothing to stick
     against and scrolls away immediately. */
  .partlist {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 14px var(--gut) max(18px, env(safe-area-inset-bottom));
    list-style: none;
    z-index: 14;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease);
    background: linear-gradient(to top, rgba(10,10,10,0.97) 58%, rgba(10,10,10,0));
  }
  .partlist.is-on { opacity: 1; }

  /* The copy sits over the machine at this width; a plain top-down scrim keeps
     it legible without turning the panel into frosted glass. */
  .sec--exploded .copyblock::before,
  .sec--format .copyblock::before,
  .sec--enclosure .copyblock::before,
  .sec--eyeline .copyblock::before {
    content: '';
    position: absolute;
    inset: -20vh calc(var(--gut) * -1) -8vh;
    background: linear-gradient(to bottom, rgba(10,10,10,0.92) 30%, rgba(10,10,10,0));
    z-index: -1;
  }
  .sec--eyeline .copyblock::before,
  .sec--format .copyblock::before,
  .sec--enclosure .copyblock::before {
    background: linear-gradient(to top, rgba(10,10,10,0.94) 34%, rgba(10,10,10,0));
  }
  /* One row at a time, stacked in place: the bar keeps a constant height so
     the machine never has to fight a list that grows as you scroll. */
  .partlist { height: 92px; }
  .partlist li {
    position: absolute;
    left: var(--gut); right: var(--gut); bottom: 18px;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--grey-700);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .partlist li.is-active { opacity: 1; transform: none; }
  .partlist li.is-active .pl__name { color: var(--amber); }
  .pl__idx {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--amber); padding-top: 2px;
  }
  .pl__idx i { font-style: normal; color: var(--ink-mute); font-size: 9px; }
  .pl__name { font-family: var(--display); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; }
  .pl__spec { font-family: var(--mono); font-size: 9.5px; line-height: 1.5; color: var(--ink-mute); }
}

/* ---------------- enclosure scale figure ---------------- */

.scalebar {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: -100svh;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.scalebar.is-on { opacity: 1; }
.scalebar__figure {
  width: 2px;
  height: clamp(150px, 34vh, 290px);
  background: linear-gradient(to bottom, transparent, var(--grey-500) 12%, var(--grey-500) 88%, transparent);
  position: relative;
}
.scalebar__figure::before, .scalebar__figure::after {
  content: ''; position: absolute; left: -7px; width: 16px; height: 1px; background: var(--grey-500);
}
.scalebar__figure::before { top: 0; }
.scalebar__figure::after { bottom: 0; }
.scalebar__note {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-mute);
  writing-mode: vertical-rl;
}
@media (max-width: 900px) { .scalebar { display: none; } }

/* ---------------- story ---------------- */

.story__inner {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
}
.story__lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.3vw, 50px);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0 0 clamp(40px, 7vh, 84px);
  text-wrap: balance;
}
.story__inner .eyebrow { text-align: center; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 48px); }
.stat { border-top: 1px solid var(--grey-800); padding-top: 14px; text-align: left; }
.stat__num {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.5vw, 38px);
  line-height: 1.05;
  color: var(--bone);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; gap: 18px; } }

/* ---------------- finale ---------------- */

.shoot__ui {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 350px);
  align-items: end;
  gap: clamp(16px, 2.4vw, 40px);
  padding: 0 0 clamp(24px, 5vh, 56px);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.shoot__ui.is-on { opacity: 1; pointer-events: auto; }

/* The viewfinder sits top-left, clear of the machine in the lower half of
   the frame. The machine is the subject; the interface works around it. */
.vf { align-self: start; margin-top: clamp(64px, 9vh, 96px); width: min(360px, 27vw); }
.vf__frame {
  position: relative;
  aspect-ratio: 1.43 / 1;
  border: 1px solid var(--grey-700);
  background: transparent;
  overflow: hidden;
}
.vf__crop {
  position: absolute; left: 0; right: 0;
  top: 0; bottom: 0;
  box-shadow: 0 0 0 2000px rgba(5,5,6,0.72);
  border: 1px solid rgba(232,163,61,0.5);
  opacity: 0;
  transition: opacity 0.45s var(--ease), top 0.6s var(--ease), bottom 0.6s var(--ease);
  pointer-events: none;
}
.vf__crop.is-on { opacity: 1; top: 20.1%; bottom: 20.1%; }
.vf__reticle { position: absolute; inset: 0; width: 100%; height: 100%; }
.vf__reticle path { fill: none; stroke: rgba(244,241,234,0.8); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vf__level {
  position: absolute; left: 22%; right: 22%; top: 50%;
  height: 1px;
  transform-origin: 50% 50%;
}
.vf__level i {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent, rgba(232,163,61,0.85), transparent);
}
.vf__hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  padding: 6px 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: rgba(244,241,234,0.72);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#vf-state { color: var(--ink-mute); }
#vf-state.is-rec { color: #ff4a2a; }
.vf__caption {
  margin: 8px 0 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}

.ctrl {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px;
  border: 1px solid var(--grey-800);
  background: rgba(10,10,10,0.72);
}
.ctrl__row { display: flex; flex-direction: column; gap: 8px; }
.ctrl__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}
.ctrl__ends {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); letter-spacing: 0.1em;
}
#focus-read { color: var(--amber); }
.ctrl__presets { display: flex; gap: 6px; }
.ctrl__presets button {
  flex: 1;
  background: transparent;
  border: 1px solid var(--grey-800);
  color: var(--ink-soft);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 2px; cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.ctrl__presets button:hover { border-color: var(--amber); color: var(--bone); }

.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: ew-resize; }
.slider::-webkit-slider-runnable-track { height: 1px; background: var(--grey-700); }
.slider::-moz-range-track { height: 1px; background: var(--grey-700); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 3px; height: 20px; background: var(--amber); border: 0; border-radius: 0; margin-top: -10px;
}
.slider::-moz-range-thumb { width: 3px; height: 20px; background: var(--amber); border: 0; border-radius: 0; }

.pad {
  position: relative;
  height: 92px;
  border: 1px solid var(--grey-800);
  background:
    linear-gradient(var(--grey-800), var(--grey-800)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--grey-800), var(--grey-800)) 0 50%/100% 1px no-repeat;
  cursor: grab;
  touch-action: none;
}
.pad:active { cursor: grabbing; }
.pad__dot {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border: 1px solid var(--amber);
  background: rgba(232,163,61,0.25);
}
.pad__hint {
  position: absolute; right: 6px; bottom: 4px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500);
}

.ctrl__row--split { flex-direction: row; gap: 8px; }
.btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--grey-700);
  color: var(--ink);
  padding: 11px 10px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  font-family: var(--display); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em;
  transition: border-color 0.25s, background 0.25s;
}
.btn em {
  font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase;
}
.btn:hover { border-color: var(--grey-500); }
.btn--fmt[aria-pressed="true"] { border-color: var(--amber); }
.btn--rec { flex-direction: row; align-items: center; gap: 9px; }
.btn--rec i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grey-700); border: 1px solid var(--grey-500);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn--rec[aria-pressed="true"] { border-color: #ff4a2a; }
.btn--rec[aria-pressed="true"] i { background: #ff2a12; border-color: #ff6a4a; box-shadow: 0 0 12px rgba(255,42,18,0.9); }

.ctrl__row--meta { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
#meta-ft { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); letter-spacing: 0.1em; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); border-bottom: 1px solid var(--grey-700);
}
.linkbtn:hover { color: var(--amber); border-color: var(--amber); }
.linkbtn[aria-pressed="true"] { color: var(--amber); }

@media (max-width: 900px) {
  .shoot__ui {
    grid-template-columns: 1fr;
    align-items: end;
    padding: 0 0 max(16px, env(safe-area-inset-bottom));
    gap: 10px;
  }
  .vf { width: min(230px, 56vw); align-self: start; margin-top: 58px; }
  .ctrl { padding: 14px; gap: 12px; background: rgba(10,10,10,0.86); }
  .pad { height: 64px; }
  .ctrl__presets button { padding: 8px 2px; }
}

/* ---------------- end card ---------------- */

/* The end card lands over the lit sea, where outlined type has nothing to
   read against. A soft radial scrim behind it — no edges, because the
   content is centred and any straight-edged panel would show. */
.endcard::before {
  content: '';
  position: absolute;
  inset: -8vh calc(var(--gut) * -1);
  background: radial-gradient(ellipse 68% 52% at 50% 44%,
    rgba(5,6,10,0.88) 0%, rgba(5,6,10,0.55) 52%, rgba(5,6,10,0) 80%);
  z-index: -1;
  pointer-events: none;
}

.endcard {
  position: relative;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.endcard.is-on { opacity: 1; }
.display--end { font-size: clamp(46px, 12vw, 138px); }
.endcard .lede { max-width: 42ch; text-align: center; }

/* ---------------- footer ---------------- */

.foot {
  position: relative; z-index: 10;
  padding: clamp(50px, 10vh, 110px) var(--gut) clamp(30px, 5vh, 60px);
  border-top: 1px solid var(--grey-800);
  background: var(--black);
}
.foot p { max-width: 60ch; color: var(--ink-mute); font-size: 13px; margin: 0 0 20px; }
.foot__meta {
  display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.foot__meta a { text-decoration: none; border-bottom: 1px solid var(--grey-700); }
.foot__meta a:hover { color: var(--amber); border-color: var(--amber); }

/* ---------------- noscript ---------------- */

.noscript { position: relative; z-index: 50; padding: var(--gut); background: var(--black); }
.noscript h2 { font-family: var(--display); font-size: 44px; text-transform: uppercase; margin: 0 0 16px; }
.noscript ul { max-width: 70ch; color: var(--ink-soft); padding-left: 18px; }
.noscript li { margin-bottom: 6px; }

/* ---------------- reduced motion ---------------- */

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