/* ══════════════════════════════════════════════════════════════════════════
   Broken Arrow Studio — microsite
   Built from Figma "Broken Arrow Studio Microsite" (node 231:231, 1728px).

   Layout approach: the page is a normal flowing document. Blocks stack in
   source order and take their vertical rhythm from margins. Every off-axis
   placement — the scattered gate collage, the photos that ride over the
   text, the tilted snapshots — is a `transform` on an element that is still
   in flow, so nothing is absolutely positioned into a fixed canvas.

   Three layouts: phones (under 640), a flowing tablet layout (640–1279), and
   the measured desktop composition (1280 up), which scales with the window.
   Type does NOT scale with the window anywhere: it sits on fixed sizes that
   change only at breakpoints — see "type scale" below.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── design canvas ──────────────────────────────────────────────────────
     The desktop composition is expressed in a scaled unit rather than raw
     pixels, so the photographs, columns and gaps stay in proportion between
     1280px and 1728px. At exactly 1728px --u is 1px, so every value resolves
     to the number Figma gives. Type is the exception: it steps (below). */
  --canvas-w: 1728px;
  --canvas-h: 1296px;
  --u:  min(1px, 100vw / 1728);   /* reading content: caps at 1728 */

  /* ── palette (Figma variables + sampled backgrounds) ── */
  --ink:        #25210f;  /* SUN FADED BLACK — PMS BLACK 7 */
  --bone:       #d6d2c4;  /* GRAY PMS 7527 */
  --white:      #ffffff;  /* the gate's lockup and type over the green */
  --moss:       #565f42;  /* sampled from Background_2 */
  --page:       #fdfcf8;  /* the page itself — near-white, not cream */
  --sheet:      #fef7ea;  /* the folded-paper sheet laid over the gear section */
  --sheet-band: #f7f0e3;  /* that sheet's resulting tone over the page, sampled
                             from the desktop render — used as a flat band on
                             the narrow steps, where the sheet image is off */

  /* ── type ── */
  --display: "Sirca Display", "Times New Roman", Times, serif;
  --mono:    "ABC Synt Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Text face for the gate labels and the gear list. ABC Synt's upright cut
     has been retired in favour of Mono; italics still come from ABC Synt
     Regular Italic, registered as Mono's italic in fonts.css. */
  --text:    "ABC Synt Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Leading, measured off the Figma frame rather than guessed. Figma sets
     nearly all of this solid — the type size and the line box are the same
     number — which is much tighter than a typical web default. Ratios, so they
     hold at every step of the type scale. */
  --lh-tagline:   1;          /* 64 on 64 */
  --lh-mono:      1;          /* 20 on 20 */
  /* A length, not a ratio: the italic notes in the list are their own lines,
     and must keep the list's 21-on-18 line rather than their own. Closed up
     from 24 when the list moved to Synt Mono. */
  --lh-gear-list: calc(var(--fs-gear) * 21 / 18);
  --lh-gear-cta:  1;          /* 20 on 20 — solid */

  /* How far from the top the wordmark pins. Tuned by eye — the masthead's own
     position sat too low — and kept in one place so it is easy to adjust. */
  --lockup-pin: 168px;
  --lockup-pin-settled: 60px;   /* where it rests once the cream is at the top */
  --lockup-pin-phone: 24px;     /* the phone's, until it settles above the headline */

  /* How much lower the lockup sits in the gate than dead centre — it crowds
     the photograph above it otherwise. This only
     moves where the wordmark STARTS; --lockup-pin decides where it settles, so
     the sticky position is untouched. */
  --gate-drop: 21.5px;

  /* Stacking: the wordmark passes UNDER the photographs and the film, but OVER
     the text. Text is left unpositioned, so it sits below the mark by default;
     the imagery is lifted above it. */
  /* Figma fills the gear entries with pure black rather than the warm ink the
     rest of the page uses. */
  --gear-ink: #000000;

  --z-mark:      2;   /* over the cream: beneath the photographs */
  --z-image:     3;
  --z-mark-gate: 4;   /* over the green: the lockup reads on top of everything */

  /* ── vertical offsets, block by block ──────────────────────────────────
     Each value is the gap between one block and the next, read off the
     Figma frame. Negative numbers are deliberate overlaps. These are the
     knobs to turn when tuning against the design. */
  --lead-console:    calc(-234 * var(--u));  /* photo lifts up over the gate's bottom edge */
  --lead-lockup:       calc(-212.13 * var(--u));
  --lead-tagline:      calc(96.5 * var(--u));
  --lead-film:        calc(-14.98 * var(--u));
  --lead-scrawl-1:    calc(-8.99 * var(--u));
  --lead-intro:       calc(-211.05 * var(--u));
  --lead-engineer:    calc(-67.34 * var(--u));
  --lead-scrawl-2:   calc(-151.9 * var(--u));
  --lead-gear-intro:  calc(95.16 * var(--u));
  --lead-gear-cta:     calc(126.01 * var(--u));
  --lead-gear-list:   calc(128.5 * var(--u));
  --lead-gear-2:       calc(51.11 * var(--u));  /* Modern Marvels */
  --lead-gear-3:       calc(75.4 * var(--u));  /* Somewhere in between */
  --lead-window:       calc(57.51 * var(--u));
  --lead-sanctuary:  calc(-504.6 * var(--u));
  --lead-control-room: calc(208.41 * var(--u));
  --lead-closing:      calc(104.4 * var(--u));
  --lead-footer:       calc(101.98 * var(--u));  /* photo credits, 45 above the old legal line */
}

/* ── type scale ─────────────────────────────────────────────────────────
   Fixed sizes, changed only at breakpoints — never scaled with the window.
   Reading text never goes below 14px.

     under 375   small phones (iPhone SE, mini): display type a step down
     375–639     phones, at the Figma 402 frame's sizes (15px copy)
     640–1023    tablets in portrait
     1024–1279   tablets in landscape, small laptops
     1280–1439   the desktop composition begins; 13" laptops
     1440–1727   most laptops (MacBook Air, 14" Pro)
     1728 up     the Figma desktop frame (16" Pro): exactly the design

   Within a desktop step the layout keeps scaling, so each step's sizes are
   what the design gives at that step's NARROWEST width, rounded down: type
   can then only ever be a little smaller than the design proportion, never
   bigger, so nothing outgrows its column. The one exception is the 14px floor
   on the gear list and its labels at 1280, 5% over proportion and measured
   to still fit. */
:root {
  --fs-tagline:     48px;
  --fs-pull:        22px;
  --fs-body:        15px;     /* the typewriter copy */
  --fs-cta:         14px;
  --fs-gear-label:  14px;
  --fs-gear:        14.5px;
  --fs-closing:     25px;
  --fs-footer:      14px;
}

@media (max-width: 374px) {
  :root {
    --fs-tagline:   42px;
    --fs-pull:      20px;
    --fs-closing:   22px;
  }
}

@media (min-width: 640px) {
  :root {
    --fs-tagline:     52px;
    --fs-pull:        24px;
    --fs-body:        16px;
    --fs-cta:         14px;
    --fs-gear-label:  14px;
    --fs-gear:        15px;
    --fs-closing:     40px;
    --fs-footer:      14px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-tagline:     56px;
    --fs-pull:        26px;
    --fs-body:        16px;
    --fs-cta:         15px;
    --fs-gear-label:  15px;
    --fs-gear:        16px;
    --fs-closing:     48px;
    --fs-footer:      15px;
  }
}

/* Desktop: the Figma sizes at 1280 / 1440 / 1728, i.e. x0.741 / x0.833 / x1. */
@media (min-width: 1280px) {
  :root {
    --fs-tagline:     47px;     /* 64 */
    --fs-pull:        19px;     /* 26.67 */
    --fs-body:        14px;     /* 20 */
    --fs-cta:         14px;     /* 20 */
    --fs-gear-label:  14px;     /* 18 — floored */
    --fs-gear:        14px;     /* 18 — floored, see above */
    --fs-closing:     47px;     /* 64 */
    --fs-footer:      14px;     /* 20 */
  }
}

@media (min-width: 1440px) {
  :root {
    --fs-tagline:     53px;
    --fs-pull:        22px;
    --fs-body:        16px;
    --fs-cta:         16px;
    --fs-gear-label:  15px;
    --fs-gear:        15px;
    --fs-closing:     53px;
    --fs-footer:      16px;
  }
}

@media (min-width: 1728px) {
  :root {
    --fs-tagline:     64px;
    --fs-pull:        26.67px;
    --fs-body:        20px;
    --fs-cta:         20px;
    --fs-gear-label:  18px;
    --fs-gear:        18px;
    --fs-closing:     64px;
    --fs-footer:      20px;
  }
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* `clip` rather than `hidden`: it contains the photos that bleed past the
   right edge without turning the root into a scroll container. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  /* the footer's About link jumps to the top of the cream section */
  scroll-behavior: smooth;
}

body {
  /* flow-root so the wordmark's top margin offsets the element itself rather
     than collapsing out to the body — otherwise its cancelling negative bottom
     margin drags the gate up the page. */
  display: flow-root;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--display);
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }

figure { margin: 0; }

a { color: inherit; }

/* Photographs and the film ride above the sticky wordmark; running text stays
   below it. See --z-mark / --z-image. */
.snap,
.plate,
.film__frame {
  position: relative;
  z-index: var(--z-image);
}

/* The mat is the one "image" that is really a sheet of paper, so it belongs
   under running text: the tagline's last line overhangs its top-left corner and
   has to stay readable. It keeps z-index auto so it does NOT open a stacking
   context — .film__frame inside it still has to reach above the wordmark.
   Net order: mat < tagline < wordmark < video. */
.film__mat { position: relative; }

/* Paper snapshots carry their own torn/irregular alpha edges, so the shadow
   has to follow the artwork rather than the element box.

   The gate collage and the paper plates carry DIFFERENT shadows in the Figma
   file: the collage has the 0/4/4 at 25% that Figma's own code lists, but the
   photos on the paper barely cast at all — measured just below their edges the
   page only dips ~2-7 levels out of 252, against ~41 for the collage value. */
.snap img {
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.25));
}

.plate img {
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.04));
}

/* The three black-and-white photographs are toned warm in the Figma file; our
   copies of them are untoned. See the filter definition in index.html. */
.snap--oak img,
.snap--pond img,
.plate--console img {
  filter: url("#sepia-tone") drop-shadow(0 4px 4px rgb(0 0 0 / 0.25));
}

.filters { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════════
   SHARED — viewport-independent: colour, type face, filters, the one UI
   control. Nothing here touches size, position or structure.
   ══════════════════════════════════════════════════════════════════════════ */


/* Figma crops each snapshot into a set frame; reproduce the frame and cover. */
.snap img { object-fit: cover; }


.gate__lockup { color: var(--white); }


.plate img        { object-fit: cover; }


/* The soundtrack control is not in the Figma frame — the film needs one, so
   it sits quietly over the bottom-right corner of the picture. */
.film__sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(37 33 15 / 0.45);
  color: var(--bone);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 140ms ease, background-color 140ms ease;
}


.film__sound:hover,
.film__sound:focus-visible {
  opacity: 1;
  background: rgb(37 33 15 / 0.72);
}


.film__sound:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }


.film__sound-icon { width: 22px; height: 22px; }


.film__cone { fill: currentColor; }


.film__waves path,
.film__cross path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}


/* aria-pressed carries the state: not pressed = muted = crossed out. */
.film__sound[aria-pressed="false"] .film__waves { display: none; }

.film__sound[aria-pressed="true"]  .film__cross { display: none; }


.gear__cta a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.gear__cta a:hover,
.gear__cta a:focus-visible { color: color-mix(in srgb, currentColor 55%, transparent); }


.gear__list b { font-weight: 400; }


/* Ask for aligned cap-height digits, which a spec list wants. Note that
   Sirca's figures stay idiosyncratic either way (its 1 is a bare stem, its 0 a
   wide round, so "1073" reads close to "IO73") — only relevant if the list
   ever falls back to it. */
.gear__list { font-variant-numeric: lining-nums; }


.closing__copy a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

.footer__nav a { text-decoration: none; }

.footer__nav a:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BASE — the designer's phone composition, authored first.

   Measured off the mockup: page margin 6.4%, display type runs the full
   content measure, mono copy sits in an indented right-hand column at 30.6%,
   and photos bleed off the left edge. Two measures, not one.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The phone composition is drawn at 402px (BAS Mobile Iphone 17, node
     231:358). --um is one design pixel of that frame, so every value below is
     the number Figma gives and resolves exactly at 402px. */
  --um: calc(100vw / 402);

  --gutter:   5.97%;   /* 24px  — page margin each side */
  --measure:  85.8%;   /* 345px — display type */
  --indent:   30.35%;  /* 122px — where the mono columns start */
  --mono-w:   60.9%;   /* 245px — the mono column's own width */
  --bleed:   -3.5%;    /* 14px  — how far artwork runs off the left edge */

  --space-section: 11vw;
  --space-block:    6vw;
  --space-tight:    3vw;
}

/* ── gate ───────────────────────────────────────────────────────────────── */
.gate {
  /* A full-screen panel. dvh so the panel tracks the address bar on phones
     instead of being cut off by it; the vh line above is the fallback for
     browsers without dvh. min-height keeps the collage and the lockup legible
     on a very short window — below that the panel simply scrolls. */
  height: 100vh;
  height: 100dvh;
  min-height: 34rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No overflow clip. A photograph dragged to the foot of the green is
     allowed to hang over onto the cream, the way the console print does, and
     a clip here would cut it off dead straight along the join instead. The
     design's own bleed doesn't need it: nothing reaches the foot at rest,
     sideways bleed is held by overflow-x: clip on html and body, and anything
     over the top edge is above the document and simply never drawn. */
  background-color: var(--moss);
  background-image: url("../assets/img/bg-green.webp");
  background-size: cover;
  background-position: center;
}

.gate__canvas {
  /* The phone collage is placed from the frame's own coordinates rather than
     dropped into a lattice — four photographs, each running off an edge. */
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  /* minmax(0,1fr), not 1fr: the bare 1fr keyword carries an auto minimum, so
     the collage photographs would force the columns wider than the viewport
     and blow the canvas out sideways. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

.gate__collage { display: contents; }

/* The page-level wordmark is a desktop device. On the narrow steps the gate's
   lockup and the masthead's behave as the designer drew them — the cream one
   scrolls away rather than occupying a phone screen. */
.brandmark { display: none; }

/* ── the collage ──
   The gate is a full screen of any shape, and the design frame is one fixed
   shape, so the photographs can't simply be laid out in the frame's
   coordinates: on a wider or taller screen they would slide off the edges or
   over the lockup. Instead each one is pinned by its centre:

     across — to the middle of the gate, offset by the design's distance times
              --sx, so the collage spreads with the screen;
     down   — to the top, middle or bottom of the gate (--ay), whichever it
              belongs to, offset by the design's distance times --s.

   --s, the size of one design pixel, is the SMALLER of the frame's two scales,
   so on a screen shorter or narrower than the frame the photographs shrink
   rather than collide. --sx may run ahead of it, but not by more than a
   third: on a very wide screen the collage stops spreading and gathers round
   the lockup instead of leaving it alone in the middle. Each photograph is
   drawn at the frame's size and crop (--w x --h) and tilt (--r).

   The frame here is the phone's green: 402 x 577. Four of the six
   photographs survive at this size; the others would be confetti. */
.gate { container: gate / size; }

.snap {
  --s:  min(100cqw / 402, 100cqh / 577);
  --sx: min(100cqw / 402, 1.3 * var(--s));
  position: absolute;
  left: calc(50% + var(--dx) * var(--sx));
  top:  calc(var(--ay) * 100% + var(--dy) * var(--s));
  width:  calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--r));
}
.snap img { display: block; width: 100%; height: 100%; }

/* Two depart from the frame: the wide prism sits a little higher and further
   in, so more than a sliver of it shows without it touching "Broken"; the
   diamond sits lower, beside the wordmark rather than behind "Studio".
                       centre from the frame's middle      size           tilt */
.snap--control-room  { --dx: -132.2; --ay: 0;   --dy:    6.1; --w: 215.5; --h: 144.4; --r: -2.1deg;  }
.snap--prism-wide    { --dx: -245;   --ay: 0.5; --dy:   -160; --w: 253.3; --h: 202.8; --r: -2.1deg;  }
.snap--oak           { --dx:  128.8; --ay: 0;   --dy:   38.4; --w: 203.4; --h: 157.4; --r:  2.42deg; }
.snap--prism-diamond { --dx:  209.7; --ay: 0.5; --dy:     60; --w: 190.5; --h: 122.1; --r:  0.19deg; }

.snap--pond,
.snap--alpacas       { display: none; }

.gate__plate {
  /* In the green the lockup reads over the collage, not under it — the
     under-the-photographs rule is for the cream section. */
  position: relative;
  z-index: var(--z-mark-gate);

  /* Figma centres the lockup on the phone frame (280px of 402) rather than
     hanging it off the gutter — the desktop step re-aligns it to the paper's
     column, where the two become one sticky element. */
  grid-area: 1 / 1 / -1 / -1;
  align-self: center;
  justify-self: center;
  width: 69.7%;
  margin: 0;
  color: var(--white);

  /* The gaps inside the plate are measured in its own width (cqw), not the
     screen's, so the block keeps its proportions when the tablet step caps
     how wide it gets. On phones the two are the same thing. */
  container-type: inline-size;
}

/* The room the password prompt took under the lockup, kept empty so the lockup
   stays where the design centres it: 94.2px below it on a plate 280 wide,
   then the words and button, 3.979 of their 16px type tall. The desktop
   layout hung the prompt outside the plate, so it has nothing to keep. */
.gate__plate::after {
  content: "";
  display: block;
  height: calc(94.2 / 280 * 100cqw + 3.979 * 16px);
}

.lockup {
  display: block;
  width: 100%;
  aspect-ratio: 807.5 / 134.775;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
          mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
}

/* ── paper ──────────────────────────────────────────────────────────────── */
.paper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-bottom: var(--space-section);
  background-color: var(--page);
  background-image: none;      /* the sheet image is a wide-canvas device */
}

/* The ivory band. Desktop gets it from the folded-paper sheet; here the same
   run of content carries it as flat colour, full-bleed, so the gear section
   still separates from the page the way it does on the wide layout. The two
   sections are adjacent, so the band reads as continuous. */
.gear,
.sanctuary {
  background: var(--sheet-band);
}

/* The sheet wrapper only carries the paper on desktop; here it is transparent
   to layout and the band above does the job. */
.sheet { display: contents; }

.gear      { padding-top: var(--space-section); }
.sanctuary { padding-bottom: var(--space-section); }

.gear__intro { margin-top: 0; }

.masthead, .film, .intro, .gear, .sanctuary, .closing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0;
}

/* photos bleed past the left edge rather than sitting inside the gutter */
.plate     { width: max-content; overflow: hidden; margin-left: var(--bleed); }
.plate img { width: 100%; height: auto; max-width: none; margin: 0; }

/* The frame runs this print across the green/cream boundary: it sits at y
   445..635 where the green ends at 577, so roughly two thirds is on the green
   and the last third on the paper. Percentage margins resolve against width,
   and the aspect ratio fixes the height, so the offset is a share of width.
   The tilt is clockwise — measured at +1.15deg off the frame — and carried a
   little further here, as the designer asked.
   On a screen short for its width (a phone on its side) that lift would carry
   it up over the lockup, so it rises no higher than 26.7% of the width plus
   40px below the gate's middle (the plate is centred and scales with the
   width), plus 3% for the tilt's high corner. */
.plate--console          { width: 70.2%; transform: rotate(2.5deg);
                           margin-top: max(-32.8%, calc(29.7% + 40px - max(50dvh, 17rem))); }
.plate--console img      { aspect-ratio: 582.19 / 392.84; object-fit: contain; }
.plate--engineer         { width: 52%; margin-top: var(--space-section); }
.plate--engineer img     { aspect-ratio: 535 / 661; }
.plate--window           { width: 58%; margin: var(--space-block) var(--bleed) 0 auto; }
.plate--window img       { aspect-ratio: 492 / 682; object-fit: cover; }
.plate--control-room     { width: 74%; margin-top: var(--space-block); }
.plate--control-room img { aspect-ratio: 661 / 441; }

/* The phone frame carries a single lockup, in the green. There is no second
   one on the cream, so this is off at every step: below 1280 the gate's own
   lockup is the only one, and above it the sticky wordmark takes over. */
.masthead__lockup { display: none; }

/* full measure, natural wrap — the desktop line breaks and the two mid-line
   gaps are a wide-canvas device, switched off here */
.masthead__tagline {
  width: var(--measure);
  margin: calc(24.5 * var(--um)) 0 0 var(--gutter);   /* clears the tilted print above */
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-tagline);
  line-height: 0.94;                                     /* Figma: 0.94 */
  white-space: normal;
}

/* The line breaks are the desktop composition's; here the tagline wraps to the
   screen. Each break has a space before it in the markup, so the words stay
   apart with the break gone. */
.masthead__tagline br { display: none; }

/* The gap spans are the only separator between "retreat" and "in" — hiding
   them outright would join the words. They collapse to a word space instead. */
.tagline__gap { display: inline-block; width: 0.26em; }

/* ── the phone's wordmark ──
   The gate's lockup lifts off as the page scrolls: it pins near the top of the
   screen while the green goes by, then settles into a space held open above
   the headline and scrolls away with it — site.js stops it there. Unlike the
   desktop's it does not carry on down the page.

   It is a page-level element (see index.html) that starts exactly over the
   gate's lockup, which hands its appearance over to it. The plate is centred
   in the gate and holds the lockup and the empty room below it, so the
   lockup's top is the gate's centre less half of both. Percentages in margins
   resolve against the width, so the lockup's height (69.7% wide at
   134.775 / 807.5) and the room's gap (94.2 / 280 of the plate) can be written
   as shares of it; the rest of the room is 3.979 of 16px. The margins cancel,
   so it adds no height to the page. */
@media (max-width: 639px) {
  .brandmark {
    --lockup-h: calc(69.7% * 134.775 / 807.5);
    --gate-centre: max(50dvh, 17rem);
    --mark-top: calc(var(--gate-centre)
                     - (var(--lockup-h) + 69.7% * 94.2 / 280 + 3.979 * 16px) / 2);

    display: block;
    position: sticky;
    top: var(--lockup-pin-phone);
    z-index: var(--z-mark-gate);
    width: 69.7%;
    aspect-ratio: 807.5 / 134.775;
    margin: var(--mark-top) 0 calc(-1 * var(--mark-top) - var(--lockup-h)) 15.15%;
    background-color: currentColor;
    -webkit-mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
            mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
    color: var(--white);
    pointer-events: none;
    transition: color 220ms ease;
  }

  /* over the cream: as on desktop */
  .brandmark.is-ink {
    mix-blend-mode: difference;
    color: var(--bone);
    z-index: var(--z-mark);
  }

  .gate__lockup { visibility: hidden; }

  /* the space it settles into, above the headline, at the gate's width and
     place so it drops straight down into it */
  .masthead__lockup {
    display: block;
    visibility: hidden;
    width: 69.7%;
    margin: calc(24.5 * var(--um)) 0 0 15.15%;   /* clears the tilted print above */
  }

  .masthead__tagline { margin-top: calc(34 * var(--um)); }
}

/* The frame sets the still on a white card, 245 x 152 with the picture inset
   3px left and right and 2.5px at the foot — a thin border rather than a mat. */
.film__mat   { width: 60.9%; margin: var(--space-block) 0 0 31.3%;
               padding: 0 calc(3 * var(--um)) calc(2.5 * var(--um));
               background: #fff; }
.film__frame { position: relative; width: 100%; }
.film__video { width: 100%; height: auto; aspect-ratio: 782 / 489;
               object-fit: cover; background: var(--ink); }

.scrawl                  { height: auto; }
.scrawl--find-your-space { width: 70.6%;   /* 284px */ margin: calc(var(--space-block) * 0.25) 0 calc(var(--space-block) * -1.57) 1.25%; }
.scrawl--make-your-music { width: 64%; margin: var(--space-block) 0 0 var(--indent); }

/* mono copy sits in the indented right-hand column */
.intro, .gear__intro, .sanctuary__copy {
  font-family: var(--mono);
  font-size: var(--fs-body);
  line-height: 1.2;                                      /* Figma: 1.2 */
}

.intro__copy     { width: var(--mono-w); margin: var(--space-block) 0 0 var(--indent); }
.intro__copy p   { margin: 0; }

/* Figma sets the intro copy in an 800px column with hard breaks, and indents a
   few continuation lines with literal runs of spaces. Those are typographic
   decisions about THAT measure, so they are carried as elements that collapse
   away below the desktop step rather than as white-space: pre-wrap on the
   paragraph — pre-wrap would also render the HTML source's own indentation.
   Where a break falls mid-hyphenate (state-of-the- / art) the source carries no
   space, so the word rejoins intact when the break is switched off. */
.figbr { display: none; }
.figsp { display: none; }
.gear__intro     { width: var(--mono-w); margin: var(--space-section) 0 0 var(--indent); }
/* The intro runs to two paragraphs, a blank line apart. The pair outranks the
   desktop .gear__intro margin, which only the first should take. */
.gear__intro + .gear__intro { margin-top: 1lh; }
.sanctuary__copy { width: var(--mono-w); margin: var(--space-block) 0 0 var(--indent); }

/* The pull line follows the DISPLAY measure, not the mono one: it starts at the
   gutter where the paragraphs around it start at the indent. */
.intro__pull {
  /* Figma: 342px wide at 22px — kept as that ratio, so the justified line
     holds its shape at every size, and never wider than the screen allows */
  width: min(15.55em, 88vw);
  margin: var(--space-block) 0 var(--space-tight) calc(-98 * var(--um)) !important;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-pull);
  line-height: 1.1;
  white-space: pre-wrap;
  text-align: justify;          /* the frame justifies this on mobile too */
  text-align-last: justify;
  text-transform: uppercase;
}

.gear__cta {
  width: var(--measure);
  margin: var(--space-block) 0 0 var(--gutter);
  font-family: var(--mono);
  font-size: var(--fs-cta);
  line-height: 1.5;
  text-transform: uppercase;
}

/* one column per group, label above its entries, leader suppressed — the
   leader is a fixed-width device with no meaning in a single-column rail */
.gear__group {
  display: block;
  width: var(--measure);
  margin: var(--space-block) 0 0 var(--gutter);
}

/* The list wants a clearer break from the call to action above it than the
   gaps between the groups themselves. The wide step overrides this with its
   own measured lead. */
.gear__group:first-of-type { margin-top: var(--space-section); }

.gear__label {
  position: relative;
  margin: 0 0 var(--space-tight);
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-gear-label);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* One underlined line, trailing off in dots, the way the narrow mockup sets
     it: the label's own lines run together rather than stacking. */
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.gear__leader { display: none; }

.gear__list {
  display: grid;
  /* two up the moment the rail is wide enough, one up below that — no
     breakpoint needed, the track size decides */
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--space-tight) 5%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gear__group .gear__list { margin-top: 0; }

.gear__list li {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  font-family: var(--text);
  font-size: var(--fs-gear);
  line-height: 1.25;
}

.closing__copy {
  width: var(--measure);
  margin: var(--space-section) 0 0 var(--gutter);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-closing);
  line-height: 1.06;
  white-space: normal;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  width: var(--measure);
  margin: var(--space-section) 0 0 var(--gutter);
  font-family: var(--mono);
  /* no mobile reference for the footer; this follows the desktop treatment —
     mono, solid, tracking 0, set in the case it is written in */
  font-size: var(--fs-footer);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.footer__credits { margin: 0; }
/* Figma leaves one empty line between the credits and the legal line */
.footer__legal   { margin: 1em 0 0; }
.footer__nav     { display: flex; gap: 0.8em; }


/* ══════════════════════════════════════════════════════════════════════════
   TABLET — 640 to 1279: tablets either way up, and small laptops. The single
   column opens up: the gear list goes to two columns and the measures widen.
   The gate collage is the phone's, which scales to any screen by itself. No Figma reference exists for this
   step; it is ours, and interpolates the two ends.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  :root {
    --gutter:  7.4%;
    --measure: 85.2%;
    --indent:  34%;

    --space-section: 7vw;
    --space-block:   4vw;
    --space-tight:   2vw;
  }

  /* The lockup stops growing with the screen: past this it would be wider
     than the desktop one. */
  .gate__plate { width: min(69.7%, 560px); }

  /* no width override: it stays on --measure so it keeps matching the
     lockup on the paper below */

  /* Lifted by 65% of its own height (48% wide at 582:393 is 32.4% tall), so
     it straddles the green's edge as in both Figma frames. The phone value,
     applied to this narrower print, would lift it clear onto the green —
     and up over the lockup on a landscape screen. Capped as on phones, from
     this step's plate: 35.3% of the plate's width below the middle, and the
     tilt adds 2.1%. */
  .plate--console      { width: 48%;
                         margin-top: max(-21%, calc(0.353 * min(69.7%, 560px) + 2.1% + 40px - max(50dvh, 17rem))); }
  .plate--engineer     { width: 38%; }
  .plate--window       { width: 40%; }
  .plate--control-room { width: 52%; }

  .film__mat { width: 56%; margin-left: 34%; }

  /* two columns of entries; the label keeps its own row above them */
  .gear__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-tight) 4%; }

  /* the nav sits on the legal line, the last line of the left column */
  .footer { flex-direction: row; justify-content: space-between; align-items: last baseline; }
}


/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP — the measured Figma composition, proportional within the step.
   From 1280: below that the composition is too small to read, so the tablet
   layout carries on instead.
   ══════════════════════════════════════════════════════════════════════════ */

/* The desktop gate — the full collage on its 1728 x 1296 canvas — also takes
   over on landscape screens from 1024 (tablets on their side, small laptops),
   even though the site below it stays on the tablet layout until 1280. The
   canvas is landscape-shaped (at 1024 wide it is exactly 768 tall), so it fits
   those screens where the phone collage, placed by width, loses most of its
   photographs off the bottom. */
@media (min-width: 1280px), (min-width: 1024px) and (orientation: landscape) {

  /* ══════════════════════════════════════════════════════════════════════════
     GATE
     ══════════════════════════════════════════════════════════════════════════ */

  .gate {
    display: flex;
    justify-content: center;
    /* no overflow clip — see the base rule */
    background-color: var(--moss);
    background-image: url("../assets/img/bg-green.webp");
    background-size: cover;
    background-position: center;
  }


  /* The canvas is the gate itself; the plate is laid over it as the grid's
     one cell, and the photographs are placed on it as on the phone step. */
  .gate__canvas {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }


  /* The same pinning as the phone step (see "the collage" above), on the
     desktop frame: 1728 x 1296. As on phones, the wide prism is drawn further
     in than the frame has it (which shows only a sliver of it), and the
     diamond lower, clear of "Studio". */
  .snap {
    --s:  min(100cqw / 1728, 100cqh / 1296);
    --sx: min(100cqw / 1728, 1.3 * var(--s));
  }

  /*                     centre from the frame's middle        size            tilt */
  .snap--control-room  { --dx: -701.5; --ay: 0;   --dy:   19.9; --w: 464;   --h: 311;   --r: -2.1deg;  }
  .snap--prism-wide    { --dx: -900;   --ay: 0.5; --dy:   -257; --w: 542.6; --h: 434.4; --r: -2.1deg;  }
  .snap--alpacas       { --dx: -112.5; --ay: 0.5; --dy: -272.1; --w: 464;   --h: 311;   --r: -2.1deg;  }
  .snap--oak           { --dx:  380.5; --ay: 0.5; --dy:   -395; --w: 497.6; --h: 385.1; --r:  2.42deg; }
  .snap--prism-diamond { --dx:  777.6; --ay: 0.5; --dy:    200; --w: 486.1; --h: 311.6; --r:  0.19deg; }
  .snap--pond          { --dx: -707.3; --ay: 1;   --dy: -452.2; --w: 486.1; --h: 410;   --r:  0.19deg; }


  /* the phone composition drops these two; the full collage returns here */
  .snap--pond,
  .snap--alpacas { display: block; }

  /* On a landscape tablet the lockup sits off to the right of the print, so
     the height cap from the tablet step isn't needed. 1280 up sets its own. */
  .plate--console { margin-top: -21%; }


  /* ── the plate: the lockup ── */
  .gate__plate {
    /* The lockup here and the one on the paper below must share a horizontal
       origin at every width — they are going to become a single sticky element
       that stays put while the green scrolls away. The collage fills the
       gate, but the plate rides the capped, centred column that .paper uses
       (--u), so the two lockups always line up:

         50% of the gate
         - half the capped column (864)
         + the design's 666 offset        =  50% - 198 * --u

       At 1728 that is 666px, matching Figma. Above it, both lockups sit on
       the centred 1728 column; below it, both scale together. */
    grid-area: 1 / 1 / -1 / -1;
    align-self: center;
    justify-self: start;
    width: calc(807.5 * var(--u));
    margin: 0 0 0 calc(50% - 198 * var(--u));
    transform: translateY(calc(var(--gate-drop) * var(--u) / 1px));
    color: var(--white);
  }

  .gate__plate::after { display: none; }


  .lockup {
    display: block;
    width: calc(807.5 * var(--u));
    height: calc(134.775 * var(--u));
    background-color: currentColor;
    -webkit-mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
            mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
  }

  /* .lockup above also matches the masthead's lockup, which only the desktop
     page layout (1280 up) brings back; on a landscape tablet it stays off. */
  .masthead__lockup { display: none; }
}


@media (min-width: 1280px) {
  /* ══════════════════════════════════════════════════════════════════════════
     PAPER
     ══════════════════════════════════════════════════════════════════════════ */

  .paper {
    /* A flex column rather than a plain block: it stops adjacent margins from
       collapsing, so every `--lead-*` below lands exactly where it is set. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--canvas-w);
    max-width: 100%;
    margin-inline: auto;
    /* Figma's frame ends at 6506 and the footer's legal line sits at 6433,
       about 19 tall, so the design leaves 54 below it. */
    padding-bottom: calc(54 * var(--u));
    background-color: var(--page);
  }


  /* One sheet of folded paper laid over the gear and sanctuary sections — not
     a texture on the whole page. Figma has it at x 44, y 3420, 1624 x 2464,
     which is 220 above the gear section's top and 90.7 short of the sanctuary's
     foot: the engineer photo overhangs its top edge, the control-room photo its
     bottom. The wrapper reaches up those 220 (margin out, padding back, so
     nothing inside moves) and the sheet stops 90.7 short of the wrapper's foot.
     It is sized to the wrapper, not fixed, so it stretches with the content —
     the type steps between breakpoints change how tall that is. */
  .sheet {
    --sheet-top:  calc(220 * var(--u));
    --sheet-foot: calc(90.7 * var(--u));

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: calc(-1 * var(--sheet-top));
    padding-top: var(--sheet-top);
    background: url("../assets/img/paper-sheet.webp") no-repeat
                calc(44 * var(--u)) 0 / calc(1624 * var(--u)) calc(100% - var(--sheet-foot));
  }


  /* Sections are transparent to the layout: they group the markup semantically
     while their children keep the same exact-margin behaviour as .paper. */
  .masthead { position: relative; z-index: 1; }


  .masthead, .film, .intro, .gear, .sanctuary, .closing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
  }


  /* Blocks are laid out with a left indent + width taken from the design and
     stacked by margin-top. The `--lead-*` vars above hold the vertical gaps. */
  /* Each photo reproduces the crop Figma applies inside its rect. Most fill the
     rect from the full 3000x3000 canvas (object-fit: cover); the console print
     fits inside it; the window photo uses an explicit crop, all measured off the
     frame rather than guessed. */
  .plate            { width: max-content; overflow: hidden; }


  .plate--console       { width: max-content; margin: 0 0 0 calc(145 * var(--u));
                          transform: translateY(var(--lead-console)); }

  .plate--console img   { width: calc(582.19 * var(--u)); height: calc(392.84 * var(--u)); object-fit: contain; }


  .masthead__lockup     { color: var(--ink); margin: var(--lead-lockup) 0 0 calc(666 * var(--u)); }


  .masthead__tagline {
    width: calc(1459 * var(--u));
    margin: var(--lead-tagline) 0 0 calc(48 * var(--u));
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--fs-tagline);
    line-height: var(--lh-tagline);
  }


  /* The design opens two deliberate gaps mid-line. Spacers rather than runs of
     spaces, so the widths are the measured ones and survive a font change. */
  .tagline__gap      { display: inline-block; }

  .masthead__tagline br { display: inline; }

  .tagline__gap--a   { width: calc(108 * var(--u)); }

  .tagline__gap--b   { width: calc(82 * var(--u)); }


  /* ── film ── */


  /* The film sits on a paper mat. Figma's own mat is the "Framig_Device"
     artwork, deliberately oversized (1015x702) inside an 810x504 frame that
     CLIPS it, so what the canvas actually shows is a thin paper edge: 9 left,
     0 top, 19 right, 15 bottom. Uncropping the artwork instead would put 41 /
     27 / 65 / 71 around the still and blow the block out to 887 x 587, far
     wider and taller than anything the design draws.

     So we keep the design's border WEIGHT and even it out to 20 all round —
     inside the 9-19 the canvas shows, and giving the top edge the border it is
     missing only because the frame cuts it off. The mat then lands at 822 x 529
     against Figma's 810 x 504 block.

     The border is padding and the asset is trimmed to its painted paper, so the
     element box and the visible ink are one rectangle: the height falls out of
     the video plus the padding, nothing is absolutely positioned, and changing
     --film-border moves only this block. */
  .film__mat {
    --film-border: calc(20 * var(--u));
    position: relative;
    width: calc(782 * var(--u) + 2 * var(--film-border));
    margin: var(--lead-film) 0 0 calc(667 * var(--u));
    padding: var(--film-border);
    background: url("../assets/img/framing-device.webp") 0 0 / 100% 100% no-repeat;
  }

  .film__frame {
    position: relative;
    width: calc(782 * var(--u));
    margin: 0;
  }

  .film__video {
    display: block;
    width: calc(782 * var(--u));
    height: calc(489 * var(--u));
    object-fit: cover;
    background: var(--ink);
  }


  /* ── handwriting ── */
  .scrawl { height: auto; }


  .scrawl--find-your-space {
    width: calc(689 * var(--u));
    margin: var(--lead-scrawl-1) 0 0 calc(73 * var(--u));
  }


  .scrawl--make-your-music {
    width: calc(674 * var(--u));
    margin: var(--lead-scrawl-2) 0 0 calc(828 * var(--u));
  }


  /* ── typewriter body copy ── */
  .intro,
  .gear__intro,
  .sanctuary__copy {
    font-family: var(--mono);
    font-size: var(--fs-body);
    line-height: var(--lh-mono);
    letter-spacing: 0;
  }




  .intro__copy {
    width: calc(800 * var(--u));
    margin: var(--lead-intro) 0 0 calc(687 * var(--u));
  }


  .intro__copy p { margin: 0; }

  /* The hand-placed Figma line breaks only hold where the type is exactly the
     design's size relative to its column — at 1728 and up. See below. */


  /* Figma: Sirca Display Medium (500), 26.67px, line-height 100%, tracking 0,
     uppercase, justified. The uneven word gaps are justification doing its work
     across the 800px column, not hand-placed spacing. */
  .intro__pull {
    /* Figma: Sirca Display Medium 26.667 / 100% / justified, and the spacing
       is literal — "Great  art    can    come from anywhere." with runs of
       spaces that justification then stretches. pre-wrap keeps them; without
       it justify spreads the words evenly and the rhythm goes flat. */
    white-space: pre-wrap;
    width: auto;                   /* the phone and tablet steps give it a measure */
    margin-left: 0 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.4em !important;
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--fs-pull);
    line-height: 1;
    letter-spacing: 0;
    text-align: justify;
    text-align-last: justify;
    text-transform: uppercase;
  }


  .plate--engineer      { margin: var(--lead-engineer) 0 0 calc(150 * var(--u)); }

  .plate--engineer img  { width: calc(535 * var(--u)); height: calc(661 * var(--u)); }


  /* ── gear ── */
  .gear__intro {
    width: calc(764 * var(--u));
    margin: var(--lead-gear-intro) 0 0 calc(715 * var(--u));
  }


  .gear__cta {
    width: calc(736 * var(--u));
    margin: var(--lead-gear-cta) 0 0 calc(569 * var(--u));
    font-family: var(--mono);
    font-size: var(--fs-cta);
    line-height: var(--lh-gear-cta);
    letter-spacing: 0;         /* measured: 48-char line is 563px, not 660px */
    text-transform: uppercase;
  }


  .gear__group {
    display: grid;
    grid-template-columns: calc(432 * var(--u)) 1fr;   /* label rail, then the entries */
    align-items: start;
    width: calc(1577 * var(--u));
    margin-left: calc(137 * var(--u));
  }


  .gear__group:nth-of-type(1) { margin-top: var(--lead-gear-list); }

  .gear__group:nth-of-type(2) { margin-top: var(--lead-gear-2); }

  .gear__group:nth-of-type(3) { margin-top: var(--lead-gear-3); }


  /* In the Figma file the label rail and the entries do not share a baseline:
     each group sets its own relationship, so the drop is per group rather than
     one rule. Measured off the frame. */
  /* the three labels are not on a common left edge in the frame */
  .gear__group:nth-of-type(2) .gear__label { padding-left: calc(5 * var(--u)); }
  .gear__group:nth-of-type(3) .gear__label { padding-left: calc(14 * var(--u)); }

  /* Leader line top, from the label's first line top: level with it on
     Reliquary, half a line down on Marvels, a full line down on In Between. */
  .gear__group:nth-of-type(1) { --leader-top: 0px; }

  .gear__group:nth-of-type(2) { --leader-top: calc(12 * var(--u)); }

  .gear__group:nth-of-type(3) { --leader-top: calc(24 * var(--u)); }


  .gear__group:nth-of-type(1) .gear__list { margin-top: calc(2 * var(--u)); }

  .gear__group:nth-of-type(2) .gear__list { margin-top: calc(27 * var(--u)); }

  .gear__group:nth-of-type(3) .gear__list { margin-top: calc(20 * var(--u)); }


  .gear__label {
    position: relative;
    margin: 0;
    font-family: var(--mono);
    font-weight: 400;
    font-size: var(--fs-gear-label);
    line-height: calc(24 / 18);
    letter-spacing: 0;   /* Figma sets no tracking here */
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
  }

  /* back to the stacked label and the long dot leader */
  .gear__label-line { display: block; }

  .gear__label-tail { display: none; }


  /* The dot leader is its own text node in the Figma file, not something
     trailing the label: an irregular run of dots (with a stray comma) set in
     ABC Synt Regular Italic 18 / 24, starting at design x 222. It sits at a
     fixed offset from the label, which is why it looks raised next to a
     two-line label — the label wraps downward while the leader stays put. */
  .gear__leader {
    display: block;            /* the mobile base hides it */
    position: absolute;
    left: calc(85 * var(--u)); /* design x 222, and the group starts at x 137 */
    top: var(--leader-top);
    font-family: var(--text);
    font-style: italic;
    font-size: var(--fs-gear-label);
    line-height: calc(24 / 18);
    white-space: nowrap;
  }


  .gear__list {
    display: grid;
    grid-template-columns: repeat(4, calc(253 * var(--u)));
    gap: calc(44 * var(--u)) 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }


  .gear__list li {
    display: flex;
    flex-direction: column;
    width: calc(247 * var(--u));
    padding-left: calc(6 * var(--u));   /* Figma insets the text inside each column frame */
    font-family: var(--text);
    /* Figma: ABC Synt Mono 18 / 21, tracking 0; the italic notes are ABC
       Synt Regular Italic at the same 18 / 21. */
    font-size: var(--fs-gear);
    line-height: var(--lh-gear-list);
    color: var(--gear-ink);
  }


  /* The ivory band is a narrow-step device: on desktop the folded-paper sheet
     laid over .paper does this job, so the flat band and its padding come off. */
  .gear,
  .sanctuary { background: none; }

  .gear      { padding-top: 0; }
  .sanctuary { padding-bottom: 0; }

  /* ── the wordmark ───────────────────────────────────────────────────────
     One visible lockup on this step. It begins centred on the gate, scrolls up
     with it, then pins at --lockup-pin and stays for the rest of the page.

     The margins cancel to zero so the element adds no height: it starts at the
     gate's centre (the plate is the lockup alone)
     and gives that space back below. --gate-centre matches the gate's own height rule so
     a short window, where min-height wins over 100dvh, still lines up. */
  .brandmark {
    --lockup-h: calc(134.775 * var(--u));
    --gate-centre: max(50dvh, 17rem);

    display: block;
    position: sticky;
    top: var(--lockup-pin);
    z-index: var(--z-mark-gate);
    width: calc(807.5 * var(--u));
    height: var(--lockup-h);
    margin-top: calc(var(--gate-centre) - 67.39 * var(--u) + var(--gate-drop) * var(--u) / 1px);
    margin-bottom: calc(-1 * var(--gate-centre) - var(--lockup-h) + 67.39 * var(--u) - var(--gate-drop) * var(--u) / 1px);
    margin-left: calc(50% - 198 * var(--u));
    background-color: currentColor;
    -webkit-mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
            mask: url("../assets/img/lockup.svg") no-repeat center / 100% 100%;
    color: var(--white);
    pointer-events: none;
    transition: color 220ms ease;
  }

  /* Flipped by js once the cream edge passes the wordmark's centre: it turns
     to ink and, at the same moment, drops beneath the photographs — over the
     green it belongs on top, over the cream it belongs underneath. */
  .brandmark.is-ink {
    /* Over the cream the mark is mixed with what is behind it rather than
       given a flat colour: bone against the page comes out close to ink, and
       where it crosses the typewriter copy it lightens instead, so the two
       always separate. Kept off the gate, where difference against the green
       goes purple. */
    mix-blend-mode: difference;
    color: var(--bone);
    z-index: var(--z-mark);
  }


  /* the in-flow pair keep their boxes — so the tagline stays at its measured
     position — but hand the appearance over to the sticky one */
  .gate__lockup { visibility: hidden; }

  /* restored to hold its box — the tagline's measured position depends on it —
     but handed over visually to the sticky wordmark */
  .masthead__lockup { display: block; visibility: hidden; }

  /* ── sanctuary ── */
  .plate--window        { margin: var(--lead-window) 0 0 calc(1132 * var(--u)); }

  .plate--window        { width: calc(492 * var(--u)); height: calc(682 * var(--u)); }

  .plate--window img    { width: calc(892.2 * var(--u)); height: calc(892.2 * var(--u)); max-width: none;
                          object-fit: fill; margin: calc(-105.7 * var(--u)) 0 0 calc(-200.7 * var(--u)); }


  .sanctuary__copy {
    width: calc(579 * var(--u));
    margin: var(--lead-sanctuary) 0 0 calc(260 * var(--u));
  }


  .plate--control-room     { margin: var(--lead-control-room) 0 0 calc(230 * var(--u)); }

  .plate--control-room img { width: calc(661 * var(--u)); height: calc(441 * var(--u)); }


  /* ── closing + footer ── */
  .closing__copy {
    width: calc(1418 * var(--u));
    margin: var(--lead-closing) 0 0 calc(82 * var(--u));
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--fs-closing);            /* Figma: 64px / 100% / 0 tracking */
    line-height: 1;
    letter-spacing: 0;
    white-space: pre-wrap;    /* the design breaks this per sentence */
  }


  .footer {
    display: flex;
    flex-direction: row;       /* the mobile base stacks it */
    justify-content: space-between;
    align-items: last baseline;  /* nav on the legal line, under the credits */
    width: calc(1608 * var(--u));
    margin: var(--lead-footer) 0 0 calc(82 * var(--u));
    font-family: var(--mono);
    /* Figma: ABC Synt Mono Trial 20, solid, tracking 0 — and the frame renders
       it in the case it is written in, not uppercased. */
    font-size: var(--fs-footer);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
  }


  .footer__credits { margin: 0; }


  .footer__legal { margin: 1em 0 0; }


  .footer__nav { display: flex; gap: 0.8em; }

}


/* ══════════════════════════════════════════════════════════════════════════
   THE FIGMA FRAME — 1728 and up, where the type is exactly the design's size
   relative to its column. The hand-placed line breaks and indents in the intro
   copy were set for that measure; anywhere narrower the type steps (see the
   type scale) and those breaks would strand short fragments, so the text
   wraps naturally instead.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1728px) {
  .figbr { display: inline; }
  .figsp { display: inline; white-space: pre; }
}


/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

  html { scroll-behavior: auto; }}