/* ── Field Tape ─────────────────────────────────────────────────────────────
 *
 * The home implements "FIELD TAPE - Home v3.dc.html" from the Claude Design
 * project. v3 turns the page over: v2 was paper all the way down — a cream
 * plate, dark ink, a strip of blue gaff tape carrying the index, and overlay
 * labels that lifted off the photograph with a paper halo behind them. v3
 * replaces the orbit with footage run to all four edges, so the hero is dark
 * and its type is the paper colour: the same two values, swapped.
 *
 * Only the hero turned over. The one section under it — the closing contact
 * panel — is still the paper page it was, and still keys off the tokens below.
 * That is why --paper is still the background and --ink still the text at body
 * level, with the hero the one region that inverts them.

 * The page is down to those two. The field monitor and About were under the
 * panel and have both come off; the menu still carries their rows.
 *
 * WHAT IS NO LONGER HERE. Roughly 680 lines went with the orbit: the
 * preloader, the tape bar and its index, the pinned canvas stage, the scroll
 * cue, the annotation notes, the .ft-tape strip component and the yellow
 * section title it was built for, and the old slate. See the head of script.js.
 * ───────────────────────────────────────────────────────────────────────────*/


:root {
  /* Comp palette */
  --paper:     #E9DFC8;   /* page + backdrop */
  --bar-hi:    #FAF7EE;   /* bar gradient top */
  --bar-lo:    #F0EBDD;   /* bar gradient bottom */
  --ink:       #17181A;
  --ink-dim:   rgba(23, 24, 26, 0.62);
  --ink-faint: rgba(23, 24, 26, 0.42);
  --blue:      #2A4BC7;   /* Field Blue, paper-tone variant */
  /* Tape blue: the colour the bar's strip keys out to, and the comp's own
     #0C7CD2. It was translated to --blue back when the bar was the darker
     strip and this value appeared nowhere; now that the bar is the real thing,
     everything the comp draws as a piece of tape is drawn in it — the section
     title stuck on the picture, and the headline strip on the closing panel.
     --blue stays what it always was, the paper-tone Field Blue that type,
     rules and links are set in. The rule is the object, not the surface: if it
     is tape, it is this. */
  --blue-tape: #0C7CD2;
  --label:     #D8CDB9;   /* aged label */
  --rule:      rgba(23, 24, 26, 0.28);
  --rule-firm: rgba(23, 24, 26, 0.5);

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Signage only — the bar's index. Everything else stays mono or Archivo. */
  --cond: 'Barlow Condensed', 'Archivo Narrow', var(--body);

  --bar-h: 96px;          /* comp bar height */
  /* What the highlighter takes the marked item's type down to. Paper lettering
     on yellow is the one unreadable pair on the site, so it cannot stay
     --bar-hi; both comps answer with this, a blue dark enough to hold on the
     marker and still read as the site's own colour rather than as plain ink. */
  --bar-mark-ink: #0B3D91;
  --edge: 44px;           /* comp overlay gutter */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The mobile comp is drawn to the edges of the device, so the bar and the
     closing panel carry the notch and home-indicator bands themselves. Zero
     everywhere that has no insets, including desktop. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Overlay type sits directly on the photograph — the board forbids tinting
     the image, so labels carry a soft paper halo instead of a scrim panel. */
  --halo: 0 0 7px rgba(233, 223, 200, 0.9), 0 0 20px rgba(233, 223, 200, 0.62);
  /* Small mono labels have strokes too thin for a soft glow alone — they get a
     1px paper outline under it so they hold up over the dark shell. */
  --halo-strong:
    -1px -1px 0 rgba(240, 232, 214, 0.96),
     1px -1px 0 rgba(240, 232, 214, 0.96),
    -1px  1px 0 rgba(240, 232, 214, 0.96),
     1px  1px 0 rgba(240, 232, 214, 0.96),
     0 0 6px  rgba(233, 223, 200, 0.98),
     0 0 18px rgba(233, 223, 200, 0.7);
}
/* ── The hero's own palette ───────────────────────────────────────────────
 * The hero inverts the page, so the cream needs the working opacities the ink
 * has above: on paper the ladder runs --ink-dim / --ink-faint, on footage it
 * runs the other way. Nothing here needs a halo — the scrim does that job once
 * for the whole band instead of per label.
 * ───────────────────────────────────────────────────────────────────────── */
:root {
  --paper-dim:   rgba(233, 223, 200, 0.75);
  --paper-faint: rgba(233, 223, 200, 0.32);
  --paper-ring:  rgba(233, 223, 200, 0.6);

  /* The tally lamp. The one saturated colour on the hero, and the only thing
     on it that is not cream — which is the point: it reads as a lamp on a
     camera body rather than as a UI accent. */
  --rec: #E23B2E;

  /* The comp moves the hero's overlays out to 56px. --edge stays 44 for the
     sections below, which are still drawn to the v2 gutter — there is no bar
     edge left up here for the hero to align to. */
  --hero-edge: 56px;
  --hero-foot: 38px;

  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: #1e38a0; }

/* ── Hero ──────────────────────────────────────────────────────────────────
 * 520vh of scroll around a sticky 100vh pane, straight off the comp.
 * min-height on the sticky pane rather than the wrapper: a short landscape
 * window should letterbox the furniture, not collapse it on top of itself.
 * ────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 520vh;
  background: var(--ink);
  color: var(--paper);
}
.hero__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  /* svh where it exists: on mobile Safari 100vh is the *expanded* viewport, so
     the slate would sit under the retracting URL bar until the user scrolls. */
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}

.hero__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The poster is 16:9 and the pane rarely is, so it has to crop the same way
     the footage does or the swap from still to clip jumps. */
  object-position: center;
  background: var(--ink);
  display: block;
}

/* Two bands, and clear air between them. The stops are the comp's: opaque
 * enough at the very top and bottom to seat the type, fully out by 22% and
 * back in only after 62%, so the middle of the frame is untouched footage. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(23, 24, 26, 0.42) 0%,
    rgba(23, 24, 26, 0)   22%,
    rgba(23, 24, 26, 0)   62%,
    rgba(23, 24, 26, 0.5) 100%
  );
}

/* ── Top bar ───────────────────────────────────────────────────────────────
 * There is no bar. v2 laid a strip of blue tape across the top and put the
 * index in it; v3 drops the strip and stands the lockup and the index directly
 * on the footage. That is why both carry their own shadow — with the strip
 * gone, nothing else separates them from whatever is behind them.
 *
 * align-items: flex-start, then the index nudged down 18px: the two are set to
 * each other by eye in the comp, not to a shared baseline, because the lockup
 * is a drawn mark with its own internal padding.
 * ────────────────────────────────────────────────────────────────────────── */
.topbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(40px + var(--safe-t)) calc(var(--hero-edge) + var(--safe-r)) 0
           calc(var(--hero-edge) + var(--safe-l));
}

.topbar__brand {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(23, 24, 26, 0.5));
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 18px;
}

.topbar__link {
  border: 0;
  background: none;
  padding: 3px 12px;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--paper);
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(23, 24, 26, 0.6);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s linear;
}
/* v2 marked the live section by sticking a chip of yellow tape behind the
 * index item whose frame the orbit was on. There is no live section to mark
 * now — the scroll no longer walks past anything — so hover is the only state,
 * and it is a lift in value rather than a surface. */
.topbar__link:hover { color: var(--bar-hi); }
.topbar__link:focus-visible {
  outline: 1px solid var(--blue-tape);
  outline-offset: 4px;
  color: var(--bar-hi);
}

/* ── Slate ─────────────────────────────────────────────────────────────────
 * Bottom left, 236px wide, mono, tabular figures so the timecode does not
 * shuffle its own columns as it counts.
 * ────────────────────────────────────────────────────────────────────────── */
.slate {
  position: absolute;
  left: calc(var(--hero-edge) + var(--safe-l));
  bottom: calc(var(--hero-foot) + var(--safe-b));
  z-index: 2;
  width: 236px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(23, 24, 26, 0.7);
}
.slate__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.slate__rec {
  display: flex;
  align-items: center;
  gap: 7px;
}
.slate__lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rec);
  display: inline-block;
  flex: none;
}
.slate__track {
  position: relative;
  height: 1px;
  margin-top: 10px;
  background: var(--paper-faint);
}
.slate__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--paper);
}
.slate__row--sub {
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--paper-dim);
}

/* ── Sound ─────────────────────────────────────────────────────────────────
 * The same control it always was, pointed at the hero's own track instead of
 * at a separate ambient file, and recoloured for the dark. The dot fills when
 * it is on — the one place the blue appears as a surface up here rather than
 * as a focus ring.
 * ────────────────────────────────────────────────────────────────────────── */
.sound {
  position: absolute;
  right: calc(var(--hero-edge) + var(--safe-r));
  bottom: calc(var(--hero-foot) + var(--safe-b));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--paper);
  cursor: pointer;
  text-shadow: 0 1px 6px rgba(23, 24, 26, 0.7);
  -webkit-tap-highlight-color: transparent;
}
.sound__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--paper-ring);
  display: inline-block;
  flex: none;
  transition: background 0.25s linear, box-shadow 0.25s linear;
}
.sound[aria-pressed="true"] .sound__dot {
  background: var(--blue-tape);
  box-shadow: none;
}
.sound:focus-visible {
  outline: 1px solid var(--blue-tape);
  outline-offset: 6px;
}

/* Offered only when the clip has been held back — reduced motion, or an
   autoplay the browser declined even muted. Set in the slate's idiom so it
   reads as another line of camera data rather than as a play button. */
.hero__start {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border: 1px solid var(--paper-ring);
  background: rgba(23, 24, 26, 0.55);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hero__start:focus-visible {
  outline: 1px solid var(--blue-tape);
  outline-offset: 4px;
}

/* About used to sit here: the crew's own pelican case with the copy written
   on the notebook packed inside it, and before that the .page shell it shared
   with every section a door flew into. Both have come off the page — the
   section is not on this site at the moment, though the menu still carries its
   row. The artwork it was drawn against is still Assets/HighRes Stills/
   Pelican Case.webp if it comes back. */


/* ── 03 Contact ────────────────────────────────────────────────────────────
 * The closing panel. The headline is stuck down on two hand-torn strips of
 * camera tape — the company's own signature, and this composition's single
 * blue object, which is why the kicker and the submit stay in ink. Beside it
 * the form is set like a call sheet: mono keys, hairline rules, no boxes.
 * ───────────────────────────────────────────────────────────────────────── */

.contact {
  /* ── Tape tuning ─────────────────────────────────────────────────────────
   * Rotation, colour and overlap are read from here directly.
   * --tape-roughness is the `scale` on the #ftTear1/#ftTear2 displacement
   * maps in index.html, which script.js copies out of this variable on boot —
   * so the tear is tunable from here too rather than in the markup.
   * ───────────────────────────────────────────────────────────────────────*/
  --tape-rot-1: -2deg;
  --tape-rot-2: 1.4deg;
  --tape-roughness: 22;
  --tape-overlap: -0.16em;      /* how far line 2 rides up onto line 1 */
  --tape-1-bg:  var(--label);
  --tape-1-ink: var(--ink);
  /* The comp's own #0C7CD2, which is the blue the bar's strip keys out to —
     the two pieces of tape on the site are now the same tape. It is a lighter
     ground than the --blue this used to be, so the paper ink over it falls
     from 5.41:1 to 3.28:1; the headline is 700 weight and never below 24px at
     any width, so it stays large text and clears AA's 3:1 either way. */
  --tape-2-bg:  var(--blue-tape);
  --tape-2-ink: var(--paper);

  position: relative;
  z-index: 2;
  background: var(--paper);
  border-top: 1px dashed var(--rule);
  /* As tall as what is on it, and no taller. It used to be held to a full
     viewport with the pair set in the middle, which is what a closing panel
     wants when something closes it — there was a footer under the form doing
     that. With the footer gone the same rule only banked slack under the last
     field. It stays as tall as its contents now that the panel is the foot of
     the page: a full viewport would only bank empty paper under the last
     field, which is what the footer used to stand in.

     Nothing is lost by the panel being shorter than the window: the page under
     it is the same paper, so arriving here still fills the screen. */
  padding: clamp(4.5rem, 13vh, 8rem) var(--edge) clamp(2rem, 5vh, 3rem);
}

/* The filter definitions carry no layout of their own. */
.tape__filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* No centring and no padding under it any more: both were there to place the
   pair inside a panel taller than they were, and the panel is now exactly as
   tall as they are. */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.contact__kicker {
  /* Blue elsewhere on the site, ink here: the tape has the blue. */
  margin: 0 0 1.6rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}

.contact__copy {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  max-width: 32rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--ink-dim);
}

/* ── The tape heading ──────────────────────────────────────────────────────
 * Two lines, each on its own strip, at slightly different angles and
 * overlapping a little — applied by hand, not typeset. The strip is the
 * ::before: a solid tape-coloured block with a matte weave and paper-tinted
 * ends, roughed up at the short ends by the SVG filter and lifted off the page
 * by a low, flat drop shadow that follows the torn silhouette.
 * ───────────────────────────────────────────────────────────────────────── */

.contact__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

.tape {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.62em 0.24em;
  transform: rotate(var(--tape-rot));
  transform-origin: 30% 50%;
}
/* --tape-tear (the torn-edge filter) is set on the elements themselves — see
   the note in index.html for why it can't live here. */
.tape--1 {
  --tape-rot: var(--tape-rot-1);
  --tape-bg: var(--tape-1-bg);
  color: var(--tape-1-ink);
}
.tape--2 {
  --tape-rot: var(--tape-rot-2);
  --tape-bg: var(--tape-2-bg);
  color: var(--tape-2-ink);
  margin-top: var(--tape-overlap);
  margin-left: 0.9em;   /* stuck down a touch off-square from the line above */
}

.tape::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tape-bg);
  background-image:
    /* Matte weave — fine vertical lines, no sheen. */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      rgba(23, 24, 26, 0.035) 1px 2px,
      rgba(23, 24, 26, 0) 2px 5px),
    /* The torn ends thin out, so the paper reads faintly through them. */
    linear-gradient(90deg,
      rgba(233, 223, 200, 0.34) 0,
      rgba(233, 223, 200, 0) 4%,
      rgba(233, 223, 200, 0) 96%,
      rgba(233, 223, 200, 0.34) 100%);
  /* The shadow follows the torn silhouette rather than the box, so it has to
     be a drop-shadow after the tear — and matte and low, not a glow. */
  filter: var(--tape-tear, none) drop-shadow(0 3px 2px rgba(23, 24, 26, 0.26));
}

/* Both are positioned, so the text paints over the strip on DOM order alone —
   no negative z-index to punch a hole through the paper. */
.tape__text { position: relative; }

/* ── The form — call sheet ─────────────────────────────────────────────────*/

.jobform__head {
  margin: 0 0 1.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-firm);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink);
}

.jobform__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(1.2rem, 2.6vw, 2.2rem);
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.7rem;
}

.field__key {
  margin-bottom: 0.55rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}

/* Clean underlined fields on the paper — no boxes, no radius. */
.field__input {
  width: 100%;
  margin: 0;
  padding: 0.3rem 0 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: var(--ink-faint); }
.field__input:focus {
  outline: none;
  border-bottom-color: var(--blue);
}
.field__input.is-invalid { border-bottom-color: var(--rule-firm); }

.field__area {
  resize: vertical;
  min-height: 5.5rem;
}

/* The caret is drawn rather than native, so the select matches the inputs. */
.field--select { position: relative; }
.field--select::after {
  content: "▾";
  position: absolute;
  right: 2px;
  bottom: 0.45rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  pointer-events: none;
}
.field__select { padding-right: 1.4rem; cursor: pointer; }

.field__msg {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.field__msg:empty { display: none; }

/* Out of sight and out of the tab order — bots only. */
.jobform__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cloudflare's widget, which is a fixed 300×65 iframe and cannot be restyled
   from out here. It is the one thing on the sheet that looks like a web
   control rather than like paper — nothing to be done about that short of not
   having it. Given its own row above the button so it is not competing with
   the one solid block of ink on the panel. Hidden until script.js renders it,
   which it only does when a site key was injected. */
.jobform__check { margin-top: 0.2rem; }
.jobform__check[hidden] { display: none; }

.jobform__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-top: 0.6rem;
}

/* A block of ink on the paper — the one solid thing on the sheet, so the
   last step of the form reads as a button and not another line of the call
   sheet. It goes Field Blue on hover; the arrow rides along, static, at the
   size the label is set in. */
.send {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.send:hover,
.send:focus-visible { background: var(--blue); }
.send:focus-visible { outline: 1px solid var(--blue); outline-offset: 8px; }
.send[disabled] { opacity: 0.45; cursor: default; }
.send[disabled]:hover { background: var(--ink); }

.jobform__error {
  margin: 0;
  max-width: 26rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

.jobform__donetitle {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.jobform__donecopy {
  margin: 0;
  max-width: 28rem;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-dim);
}
.jobform__done:focus-visible { outline: 1px solid var(--blue); outline-offset: 10px; }

/* Links in this panel stay in ink — the tape holds the blue. */
.contact a {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--rule-firm);
}
.contact a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }

/* ── Narrow screens (board: type drops one step, metadata thins out) ───────*/

@media (max-width: 1100px) {
  /* The index at 19/.14em runs into the lockup before the window does. The
     tracking is the first thing to give — it is signage spacing, not a word
     shape — then the size, then the gaps. */
  :root { --hero-edge: 32px; }
  .topbar__nav { gap: 18px; font-size: 17px; letter-spacing: 0.1em; }
  .topbar__link { padding: 3px 7px; }
}

/* ── Phone (comp: "FIELD TAPE - Home v2 Mobile") ───────────────────────────
 * v2 carried down rather than a different composition: the same strip of tape,
 * the same drawn lockup on it, and the same index beside them — the phone comp
 * answers the desktop's 19/.14em with 14/.1em and 4px gaps, which is what
 * condensed caps buy and what settles the question the v1 phone comp put
 * behind a burger. What is left of that comp is the plate itself, run to all
 * four edges at object-position 62% instead of sitting letterboxed in paper.
 *
 * The strip is inset here rather than filling the band. On the desktop the
 * tape is the whole bar; the phone comp draws it as a 64px strip with paper
 * above and below it — the paper carrying the notch, the tape starting under
 * it — so the band needs a paper backing of its own. Everything scrolls under
 * a fixed bar eventually, and 8px of transparent slot above and below the
 * strip would show the picture and then the closing panel travelling through
 * it. Paper is what the comp draws there and paper is what the torn ends have
 * always been read against, so the ends stay ends.
 *
 * Metrics below are the comp's own.
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
  :root {
    --edge: 22px;                            /* comp gutter */
    --hero-edge: 22px;
    --hero-foot: 26px;
  }

  .hero__stick { min-height: 520px; }

  /* The lockup and the index, set down to a size that fits 390px. v2 had a
     64px strip of tape to hold them and the phone comp's own 14/.1em to set
     them at; there is no strip now, so they sit on the footage at the same
     step down. */
  .topbar { padding-top: calc(22px + var(--safe-t)); }
  .topbar__brand { height: 44px; }
  .topbar__nav { gap: 6px; margin-top: 8px; }
  .topbar__link {
    position: relative;
    font-size: 15px;
    padding: 3px 7px;
    letter-spacing: 0.1em;
  }
  /* A word set at 15px is a 20px-tall target, which is not a target on a
     phone. The hit area is a transparent ::after rather than padding, which
     would push the items apart at a width that has none to spare. */
  .topbar__link::after {
    content: "";
    position: absolute;
    inset: -13px -2px;
  }

  /* The slate keeps the width its timecode needs rather than the desktop's
     236px slot. v2 dropped the sound control here, because the phone comp does
     not draw one and the orbit's bed was a separate file nobody had asked for;
     the hero carries its own track, so it stays — moved up above the slate,
     because at 390px the two do not fit on one line and the timecode is not
     allowed to wrap. */
  .slate { width: 200px; font-size: 11px; }
  .slate__track { margin-top: 9px; }
  .slate__row--sub { margin-top: 8px; font-size: 9px; }
  .sound {
    bottom: calc(var(--hero-foot) + var(--safe-b) + 78px);
    font-size: 12px;
  }

  /* The closing panel stacks: headline block first, form under it. It is the
     foot of the page again now the monitor has come off, so it goes back to
     carrying the home-indicator band itself — it gave that up when the monitor
     arrived below it and took the job on. Without it the last field sits under
     the indicator on a notched phone. */
  .contact {
    --tape-roughness: 14;
    padding-bottom: calc(clamp(2rem, 5vh, 3rem) + var(--safe-b));
  }
  .contact__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); }
  .contact__title { font-size: clamp(1.5rem, 8.4vw, 2.2rem); }
  .jobform__row { grid-template-columns: 1fr; }


}

/* The comp is drawn at 430. Three sections and the lockup measure about 300px
   of that, which still clears a 360px window and does not clear the 320 a
   first-generation SE gives — and an index that wraps or pushes off the tape is
   worse than one set a step tighter. Same order the desktop gives way in: the
   tracking first, since that is signage spacing rather than the word's own
   shape, then the size. */
@media (max-width: 360px) {
  .topbar__nav { font-size: 13px; letter-spacing: 0.06em; gap: 2px; }
  .topbar__link { padding: 2px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__link, .sound__dot { transition-duration: 0.01ms; }
  /* The strips are shown as applied rather than settling in — script.js skips
     the reveal to match, so this only guards the case where it never runs. */
  .tape { opacity: 1 !important; visibility: visible !important; }
  .send { transition-duration: 0.01ms; }
}