/* ============================================================
   bittersuite.co
   Tokens are taken verbatim from "bittersuite - brand deck.pdf"
   (INT - COLOR SYSTEM, INT - TYPOGRAPHY). Nothing is invented.

   The brief's north stars: "Neon's color and life, held inside
   Criterion's minimalist structure."  Resolved as architecture:
   the GROUND is Criterion — ink, ivory, hairlines, type only.
   The LIGHT is Neon — colour arrives only off the films
   themselves and off the wordmark's chromatic split. No colour
   is ever painted onto a box.
   ============================================================ */

:root{
  /* key brand colours */
  --ink:      #222121;   /* Attractive Black */
  --paper:    #f7f0df;   /* Ivory Paper     */
  --teal:     #0c7f85;   /* Egyptian Teal   */

  /* accents — dramatic */
  --cerulean: #047195;
  --amethyst: #663593;
  --amber:    #ca6924;
  --ruby:     #741521;

  /* accents — comedic */
  --aruba:    #81d7d3;
  --electric: #0892d0;
  --mallow:   #e0b0ff;
  --marigold: #eaa221;
  --pink:     #de5b8c;

  /* the splice colour: whichever film is on screen sets this.
     --key    fills, bars, washes — the colour at full strength
     --key-ui small type, where it has to clear contrast on ink
     (main.js lifts --key toward Ivory Paper until it does) */
  --key: #0c7f85;
  --key-ui: #14a4ac;

  /* type scale — sized off a 1470-wide canvas, px ÷ 1470 → vw */
  --fs-mark:   13.6054vw;              /* 200px */
  --fs-huge:   max(40px, 8.1633vw);    /* 120px */
  --fs-big:    max(30px, 4.7619vw);    /*  70px */
  --fs-work:   max(22px, 3.0612vw);    /*  45px */
  --fs-lede:   max(16px, 1.6327vw);    /*  24px */
  --fs-ui:     max(12px, 0.9524vw);    /*  14px */
  --fs-micro:  max(10px, 0.7483vw);    /*  11px */

  --gutter:    max(20px, 3.4014vw);
  --rule:      1px solid rgba(247,240,223,.22);
  --rule-firm: 1px solid rgba(247,240,223,.55);

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cut:  cubic-bezier(0.7, 0, 0.2, 1);
  --runway:    1200vh;
}

*, *::before, *::after{ box-sizing: border-box }

html, body{
  margin:0; padding:0;
  background: var(--ink);
  overscroll-behavior: none;
}
body{
  font-family:'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight:400;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video{ display:block; max-width:100% }

/* the display face is ALWAYS lower case — deck, INT - TYPOGRAPHY */
.display{
  font-family:'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-weight:300;
  text-transform: lowercase;
  letter-spacing:-0.005em;
}

::selection{ background: var(--key); color: var(--ink) }

a{ color:inherit; text-decoration:none }
:focus-visible{
  outline:2px solid var(--key-ui);
  outline-offset:4px;
  border-radius:1px;
}

/* ── grain: the deck's wordmark and every plate carries it ───── */
.grain{
  position:fixed; inset:-60%; z-index:40;
  pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  background-repeat:repeat;
  background-size:170px 170px;
  animation: grainshift 800ms steps(3) infinite;
  will-change: transform;
}
@keyframes grainshift{
  0%  { transform:translate(0,0) }
  33% { transform:translate(-1.4%, 1%) }
  66% { transform:translate(1%, -1.4%) }
  100%{ transform:translate(0,0) }
}

/* ============================================================
   ACT I — the reel.  A fixed stack of films spliced by rotating
   wipes.  The wipe is not decoration: it is the cut.  Two films
   held in one frame by a diagonal edge is what "high-contrast
   stories" looks like as a mechanism.
   ============================================================ */

.stage{
  position:fixed; inset:0; z-index:0;
  opacity: calc(1 - var(--stage-out, 0));
  background: var(--ink);
}
.stage video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

/* A reveal is an overflow-hidden box that GROWS while it rotates.
   The media inside is counter-rotated by the negative angle so the
   picture stays upright, and is locked to 100vw x 100vh centred so
   growth reveals rather than stretches.  Hard edge, no feather —
   it is a splice, not a dissolve. */
.reveal{
  --rot: calc(var(--reveal, 0) * var(--angle));
  position:fixed; top:50%; left:50%;
  width: calc(var(--reveal, 0) * var(--span-w));
  height: var(--span-h);
  transform: translate(-50%, -50%) rotate(var(--rot));
  overflow:hidden; pointer-events:none;
  background: var(--ink);
}
.reveal video{
  position:absolute; top:50%; left:50%;
  width:100vw; height:100vh; object-fit:cover;
  transform: translate(-50%, -50%) rotate(calc(var(--rot) * -1));
}
/* a rect rotated t needs W·cos t + H·sin t; 45° → .707·(W+H) ≈ 72vw+72vh */
.reveal--1{ z-index:5; --angle:-45deg; --span-w:calc(76vw + 76vh); --span-h:calc(76vw + 76vh) }
.reveal--2{ z-index:6; --angle: 34deg; --span-w:calc(76vw + 76vh); --span-h:calc(76vw + 76vh) }
.reveal--3{ z-index:7; --angle:-20deg; --span-w:calc(76vw + 76vh); --span-h:calc(76vw + 76vh) }
.reveal--4{ z-index:8; --angle:  0deg; --span-w:104vw;             --span-h:104vh }

.is-covered{ visibility:hidden }

/* Ink under the type so ivory always holds. Measured, not guessed:
   with only the top/bottom bars, the wordmark sat at 1.31–2.54:1 on
   three of the four films — invisible on the bright close-up. The
   ellipse is a title-card scrim: it controls exposure where the mark
   lands and leaves the rest of the frame alone. It is neutral ink,
   not colour, so the no-colour-on-a-box rule still holds. */
.vignette{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  background:
    radial-gradient(118% 62% at 50% 88%,
      rgba(34,33,33,.80) 0%, rgba(34,33,33,.55) 38%,
      rgba(34,33,33,.18) 66%, rgba(34,33,33,0) 82%),
    linear-gradient(to bottom, rgba(34,33,33,.66) 0%, rgba(34,33,33,0) 24%),
    linear-gradient(to top,    rgba(34,33,33,.62) 0%, rgba(34,33,33,0) 46%);
}

/* ── chrome: everything that floats above the reel ───────────── */
.chrome{
  position:fixed; inset:0; z-index:10;
  pointer-events:none;
  perspective:1200px;
}

/* Criterion: the nav is a hairline of monospace and nothing else */
.header{
  position:absolute; left:0; right:0;
  top: calc(var(--gutter) + env(safe-area-inset-top));
  padding: 0 var(--gutter);
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
}
.header__item{
  font-size:var(--fs-ui);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:auto;
  transition: color 240ms var(--ease-expo), opacity 240ms var(--ease-expo);
}
.header__slug{ opacity:.55; letter-spacing:.2em; pointer-events:none }
@media (hover:hover) and (pointer:fine){
  a.header__item:hover{ color:var(--key) }
}

/* ── the mark.  This is the signature. ───────────────────────────
   Three stacked copies of the word — red channel, cyan channel,
   ivory — whose separation is driven by SCROLL VELOCITY.  Still,
   it registers clean; move, and the image comes apart into its
   channels.  A print-misregistration artifact is already the
   brand's own mark (deck p.1); making it live under motion is the
   one place this page spends its boldness.                       */
.mark{
  position:absolute; left:0; right:0;
  bottom: calc(env(safe-area-inset-bottom) + 5.2vh);
  display:flex; flex-direction:column; align-items:center;
  gap: max(10px, 1.4vw);
  padding: 0 var(--gutter);
}
.mark__tag{
  font-size:var(--fs-ui);
  letter-spacing:.34em; text-transform:uppercase;
  text-align:center;
  text-shadow: 0 1px 12px rgba(34,33,33,.7);
}
.split{
  position:relative;
  font-size:var(--fs-mark);
  line-height:.86;
  white-space:nowrap;
  --sep: 0px;
}
.split__ch{
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  will-change: transform;
}
.split__ch--r{ color:#ff0034; transform:translate3d(calc(var(--sep) * -1), calc(var(--sep) * -.28), 0) }
.split__ch--c{ color:#00e5d0; transform:translate3d(var(--sep),            calc(var(--sep) *  .28), 0) }
.split__base{
  position:relative; color:var(--paper);
  text-shadow: 0 2px 26px rgba(34,33,33,.55), 0 1px 5px rgba(34,33,33,.4);
}

/* the current film's catalogue entry, swapped AT the splice */
.slate{
  position:absolute; left:var(--gutter);
  bottom: calc(env(safe-area-inset-bottom) + 5.2vh);
  max-width:min(38ch, 34vw);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5em;
  font-size:var(--fs-ui);
  transition: opacity 130ms var(--ease-cut), transform 130ms var(--ease-cut);
}
.slate__no{ letter-spacing:.24em; text-transform:uppercase; color:var(--key-ui) }
.slate__title{
  font-size:var(--fs-work); line-height:1;
  text-shadow: 0 2px 18px rgba(34,33,33,.6);
}
.slate__meta{ opacity:.62; letter-spacing:.06em; line-height:1.5 }
.slate__side{
  border:var(--rule); border-radius:999px;
  padding:.3em .85em;
  font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase;
  opacity:.8;
}
/* the entry cuts, it does not fade — a splice has no dissolve */
.slate.is-cutting{ opacity:0; transform:translateY(6px) }

/* ── scroll-exit in 3D.  With perspective at viewport centre, +Z
   both scales the block and pushes it out of frame.  The Z ramp
   stays linear; the projection supplies the acceleration.        */
.exit-3d{
  transform: translate3d(0, 0, calc(var(--exit, 0) * var(--exit-z, 700px)));
  opacity: calc(1 - var(--exit, 0) * var(--exit, 0));
}
.exit-3d.is-exiting{ filter: blur(calc(var(--exit) * var(--exit) * var(--exit-blur, 7px))) }
.exit-3d.is-gone{ visibility:hidden; filter:none }

/* the scroll cue, and how far down the reel you are */
.cue{
  position:absolute; right:var(--gutter);
  bottom: calc(env(safe-area-inset-bottom) + 5.2vh);
  display:flex; flex-direction:column; align-items:flex-end; gap:.7em;
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
}
.cue__bar{
  width:1px; height:9vh;
  background: rgba(247,240,223,.24);
  position:relative; overflow:hidden;
}
.cue__bar::after{
  content:''; position:absolute; inset:0;
  background:var(--key);
  transform-origin: top;
  transform: scaleY(var(--reelprog, 0));
}
.cue__n{ font-variant-numeric: tabular-nums; opacity:.72 }

/* ============================================================
   ACT II — Criterion.  Once the reel is spent, the page becomes a
   catalogue: hairlines, monospace metadata, generous air, ivory
   on ink.  Everything below here is in normal flow.
   ============================================================ */

.runway{ height: var(--runway) }

.doc{
  position:relative; z-index:12;
  background: var(--ink);
  border-top: var(--rule-firm);
}

.section{ padding: clamp(72px, 11vh, 160px) var(--gutter) }
.section + .section{ border-top: var(--rule) }

/* screenplay slug lines — the deck's own device, and it is true:
   INT names who we are, EXT names what you buy */
.slugline{
  display:flex; align-items:center; gap:1.2em;
  font-size:var(--fs-ui); letter-spacing:.22em; text-transform:uppercase;
  opacity:.62;
  margin:0 0 clamp(32px, 5vh, 72px);
}
.slugline::after{
  content:''; flex:1 1 auto; height:1px;
  background: rgba(247,240,223,.18);
}

/* — ethos — */
.ethos__lede{
  font-size:var(--fs-big); line-height:1.08;
  max-width:20ch; margin:0 0 1em;
}
.ethos__grid{
  display:grid; gap: clamp(28px, 4vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items:start;
}
.ethos__body{
  font-size:var(--fs-lede); line-height:1.65;
  opacity:.82; margin:0 0 1.2em; max-width:56ch;
}
.ethos__body:last-child{ margin-bottom:0 }
.ethos__body em{ font-style:normal; color:var(--key-ui) }

/* — the catalogue.  Criterion's real device: a metadata line.
   Rows are films, so the columns carry what a viewer wants to
   know — what, who, how long — not decoration. — */
.cat{ display:block }
.cat__row{
  display:grid;
  grid-template-columns: 4ch minmax(0, 2.1fr) minmax(0, 1.2fr) 8ch;
  gap: clamp(12px, 2vw, 40px);
  align-items:baseline;
  padding: clamp(20px, 2.6vh, 34px) 0;
  border-top: var(--rule);
  position:relative;
  cursor:pointer;
  background:none; border-left:0; border-right:0; border-bottom:0;
  width:100%; text-align:left; color:inherit; font:inherit;
}
.cat__row:last-of-type{ border-bottom: var(--rule) }
.cat__row::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background: var(--key);
  transform: scaleX(0); transform-origin:left;
  transition: transform 620ms var(--ease-expo);
}
@media (hover:hover) and (pointer:fine){
  .cat__row:hover::before, .cat__row:focus-visible::before{ transform:scaleX(1) }
  .cat__row:hover .cat__title, .cat__row:focus-visible .cat__title{ color:var(--key-ui) }
  .cat__row:hover .cat__run::after, .cat__row:focus-visible .cat__run::after{ opacity:1; transform:none }
}
.cat__no{
  font-size:var(--fs-micro); letter-spacing:.16em;
  font-variant-numeric:tabular-nums; opacity:.5;
}
.cat__title{
  font-size:var(--fs-work); line-height:1;
  transition: color 420ms var(--ease-expo);
}
.cat__meta{
  font-size:var(--fs-ui); letter-spacing:.06em; opacity:.6; line-height:1.5;
}
.cat__run{
  font-size:var(--fs-ui); font-variant-numeric:tabular-nums;
  opacity:.6; text-align:right; white-space:nowrap;
}
.cat__run::after{
  content:" \2023"; color:var(--key-ui);
  opacity:0; transform:translateX(-4px); display:inline-block;
  transition:opacity 380ms var(--ease-expo), transform 380ms var(--ease-expo);
}

/* — services.  The deck numbers them take 1 / 2 / 3 and take 00.
   That numbering is the client's own and encodes a real ladder of
   commitment, so it stays. — */
.takes{
  display:grid; gap:0;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  border-top: var(--rule);
}
.take{
  padding: clamp(26px, 3.4vh, 44px) clamp(18px, 2vw, 34px) clamp(34px, 5vh, 60px);
  border-bottom: var(--rule);
  border-right: var(--rule);
  display:flex; flex-direction:column; gap:1em;
}
.take:last-child{ border-right:0 }
.take--bespoke{ background: rgba(12,127,133,.10) }
.take__n{
  font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase;
  color:var(--key-ui);
}
.take__name{ font-size:var(--fs-work); line-height:1 }
.take__body{ font-size:var(--fs-ui); line-height:1.7; opacity:.72; margin:0 }

/* — the two of them — */
.pair{
  display:grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.who__name{ font-size:var(--fs-work); line-height:1; margin:0 0 .35em }
.who__role{
  font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase;
  color:var(--key-ui); margin:0 0 1.4em;
}
.who__body{ font-size:var(--fs-ui); line-height:1.75; opacity:.74; margin:0 0 1em; max-width:46ch }
.who__links{ font-size:var(--fs-ui); opacity:.6; letter-spacing:.06em }
.who__links a{ border-bottom:1px solid rgba(247,240,223,.3) }
.who__links a:hover{ color:var(--key); border-bottom-color:var(--key) }

/* — contact.  "what's your story?" is the deck's closing line and
   it is already a question, so it is the form's label. — */
.close{ text-align:center; padding-bottom: clamp(90px, 14vh, 190px) }
.close__q{ font-size:var(--fs-huge); line-height:1; margin:0 0 .4em }
.close__sub{
  font-size:var(--fs-ui); letter-spacing:.1em; opacity:.66;
  margin:0 auto clamp(36px, 5vh, 64px); max-width:46ch; line-height:1.7;
  text-wrap:balance;
}
.capture{
  display:flex; gap:0; max-width:min(560px, 100%); margin:0 auto;
  border-bottom: var(--rule-firm);
  align-items:stretch;
}
.capture input{
  flex:1 1 auto; min-width:0;
  background:transparent; border:0; color:var(--paper);
  font:inherit; font-size:var(--fs-lede);
  padding:.9em .2em; letter-spacing:.02em;
}
.capture input::placeholder{ color:rgba(247,240,223,.4) }
.capture input:focus{ outline:none }
.capture input:focus-visible{ outline:2px solid var(--key-ui); outline-offset:3px }
.capture:focus-within{ border-bottom-color: var(--key) }
.capture button{
  background:transparent; border:0; color:var(--paper);
  font:inherit; font-size:var(--fs-ui);
  letter-spacing:.2em; text-transform:uppercase;
  padding:0 .2em 0 1.4em; cursor:pointer; white-space:nowrap;
  transition: color 240ms var(--ease-expo);
}
.capture button:hover{ color:var(--key) }
.note{
  font-size:var(--fs-micro); letter-spacing:.1em; opacity:.5;
  margin:1.2em auto 0; max-width:52ch; min-height:1.4em; line-height:1.6;
}
.note[data-state="ok"]{ color:var(--key-ui); opacity:1 }
.note[data-state="err"]{ color:var(--marigold); opacity:1 }

.close__or{
  margin: clamp(44px, 6vh, 80px) auto 0;
  font-size:var(--fs-ui); letter-spacing:.16em; opacity:.6;
}
.brief-link{
  display:inline-flex; align-items:center; gap:.9em;
  margin-top:1.2em;
  font-size:var(--fs-lede); letter-spacing:.02em;
  border-bottom:1px solid rgba(247,240,223,.4);
  padding-bottom:.28em;
  transition: color 300ms var(--ease-expo), border-color 300ms var(--ease-expo);
}
.brief-link:hover{ color:var(--key); border-bottom-color:var(--key) }
.brief-link i{ font-style:normal; transition: transform 380ms var(--ease-expo) }
.brief-link:hover i{ transform:translateX(5px) }

.foot{
  padding: clamp(30px, 4vh, 52px) var(--gutter);
  border-top: var(--rule);
  display:flex; flex-wrap:wrap; gap:1.2em 2.4em; justify-content:space-between;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; opacity:.5;
}
.foot a:hover{ color:var(--key) }

/* ── entrance: the word registers from its channels ──────────── */
.js .mark__tag,
.js .chrome .header__item,
.js .slate,
.js .cue{ opacity:0 }
.js .split{ --sep: 26px; opacity:0 }

.is-ready .split{ opacity:1; transition: opacity 900ms var(--ease-expo) }
.is-ready .mark__tag{ opacity:.7; transition: opacity 700ms var(--ease-expo) 420ms }
.is-ready .slate{ opacity:1; transition: opacity 700ms var(--ease-expo) 560ms }
.is-ready .cue{ opacity:1; transition: opacity 700ms var(--ease-expo) 640ms }
.is-ready .chrome .header__item{ transition: opacity 700ms var(--ease-expo) }
.is-ready .chrome .header__item:nth-child(1){ opacity:1; transition-delay:200ms }
.is-ready .chrome .header__item:nth-child(2){ opacity:.55; transition-delay:280ms }
.is-ready .chrome .header__item:nth-child(3){ opacity:1; transition-delay:360ms }

/* scroll-reveal for Act II blocks */
.rise{
  opacity: var(--in, 0);
  transform: translateY(calc((1 - var(--in, 0)) * var(--rise-y, 26px)));
  transition: opacity 900ms var(--ease-expo), transform 900ms var(--ease-expo);
}

/* ── page transition: ink closes over, then lifts ────────────── */
.wipe{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:var(--ink);
  transform: scaleY(0); transform-origin:bottom;
  transition: transform 560ms var(--ease-cut);
}
.wipe.is-in{ transform: scaleY(1); transform-origin:bottom }
.wipe.is-out{ transform: scaleY(0); transform-origin:top }

/* ── the film viewer.  Scroll shows the reel; click plays the film,
   with sound, at its own speed. ─────────────────────────────── */
.viewer{
  position:fixed; inset:0; z-index:70;
  background:rgba(34,33,33,.97);
  display:grid; place-items:center;
  padding: clamp(16px, 4vh, 56px);
  opacity:0; visibility:hidden;
  transition: opacity 420ms var(--ease-expo), visibility 420ms;
}
.viewer.is-open{ opacity:1; visibility:visible }
.viewer__inner{
  width:min(1180px, 100%);
  display:flex; flex-direction:column; gap:1.1em;
  position:relative;
}
.viewer video{
  width:100%; height:auto; max-height:76vh;
  background:#000;
}
.viewer__bar{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.35em;
  font-size:var(--fs-ui);
  padding-right:9em;   /* keep the metadata clear of the close control */
}
.viewer__title{ font-size:var(--fs-work); line-height:1 }
.viewer__meta{ opacity:.6; letter-spacing:.06em }
.viewer__close{
  position:absolute; right:0; bottom:0; z-index:2;
  background:transparent; color:var(--paper);
  border:var(--rule); border-radius:999px;
  font:inherit; font-size:var(--fs-micro);
  letter-spacing:.22em; text-transform:uppercase;
  padding:.7em 1.5em; cursor:pointer;
  transition: color 240ms var(--ease-expo), border-color 240ms var(--ease-expo);
}
.viewer__close:hover{ color:var(--key-ui); border-color:var(--key-ui) }
.viewer__close:focus-visible{ outline:2px solid var(--key-ui); outline-offset:3px }

/* ============================================================
   inquiry page
   ============================================================ */
.page-brief{ background:var(--ink) }
.page-brief .doc{ border-top:0 }
/* the inquiry page has no reel behind it, so its nav sits in flow */
.header--doc{
  position:static; padding:0;
  margin:0 0 clamp(48px, 8vh, 110px);
  border-bottom:var(--rule); padding-bottom:1.1em;
}
.header--doc .header__item{ opacity:1; flex:0 1 auto }
.header--doc .header__slug{ opacity:.5 }
@media (max-width: 700px){
  .header--doc{ flex-wrap:wrap; gap:.7em 1.4em }
  .header--doc .header__item:last-child{ flex-basis:100% }
}
.brief{ max-width: 86ch; margin:0 auto }
.brief__title{ font-size:var(--fs-huge); line-height:.98; margin:0 0 .3em }
.brief__lede{
  font-size:var(--fs-lede); line-height:1.65; opacity:.8; margin:0 0 2.4em; max-width:56ch;
}
.offer{
  border-top:var(--rule);
  padding: clamp(24px,3vh,40px) 0 clamp(34px,5vh,56px);
  margin:0;
  display:grid; gap:1.4em;
}
.offer__row{ display:flex; gap:1.4em; align-items:baseline; font-size:var(--fs-ui); line-height:1.7 }
.offer__k{ color:var(--key-ui); letter-spacing:.2em; text-transform:uppercase;
  flex:0 0 11ch; font-size:var(--fs-micro); white-space:nowrap }
.offer__v{ opacity:.8; margin:0 }

.field{
  display:flex; flex-direction:column; gap:.7em;
  padding: clamp(20px, 2.6vh, 30px) 0;
  border-top: var(--rule);
}
.field > label, .field > .field__label{
  font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; opacity:.62;
}
.field input, .field textarea, .field select{
  background:transparent; border:0;
  border-bottom:1px solid rgba(247,240,223,.22);
  color:var(--paper); font:inherit; font-size:var(--fs-lede);
  padding:.55em 0; width:100%;
  transition: border-color 260ms var(--ease-expo);
}
.field textarea{ resize:vertical; min-height:6.5em; line-height:1.6 }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-bottom-color: var(--key-ui);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{
  outline:2px solid var(--key-ui); outline-offset:3px;
}
.field select{ appearance:none; cursor:pointer }
.field select option{ background:var(--ink); color:var(--paper) }
.field__hint{ font-size:var(--fs-ui); opacity:.55; letter-spacing:.02em; line-height:1.6 }

.chips{ display:flex; flex-wrap:wrap; gap:.6em }
.chip{ position:relative; display:inline-flex }
.chip input{ position:absolute; opacity:0; width:0; height:0 }
.chip span{
  display:inline-block; cursor:pointer;
  border:var(--rule); border-radius:999px;
  padding:.5em 1.1em;
  font-size:var(--fs-ui); letter-spacing:.1em;
  transition: border-color 240ms var(--ease-expo), color 240ms var(--ease-expo),
              background-color 240ms var(--ease-expo);
}
.chip span:hover{ border-color: rgba(247,240,223,.55) }
.chip input:checked + span{
  border-color: var(--key); color: var(--key);
  background: rgba(12,127,133,.14);
}
.chip input:focus-visible + span{ outline:2px solid var(--key); outline-offset:3px }

.send{
  margin-top: clamp(34px, 5vh, 60px);
  background:transparent; color:var(--paper);
  border:var(--rule-firm); border-radius:999px;
  font:inherit; font-size:var(--fs-ui);
  letter-spacing:.22em; text-transform:uppercase;
  padding:1.1em 2.6em; cursor:pointer;
  transition: color 300ms var(--ease-expo), border-color 300ms var(--ease-expo),
              background-color 300ms var(--ease-expo);
}
.send:hover{ color:var(--ink); background:var(--key); border-color:var(--key) }
.send[disabled]{ opacity:.45; cursor:progress }
.brief .note{ text-align:left; margin-left:0; font-size:var(--fs-ui) }

/* ============================================================
   narrow viewports
   ============================================================ */
@media (max-width: 860px){
  :root{ --fs-mark: 17vw }
  /* three items will not sit on one line at phone widths, and the
     centre slug only repeats what the slate already says */
  .chrome .header__slug{ display:none }
  .header{ gap:.6em }
  .slate{
    left:var(--gutter); right:var(--gutter);
    bottom:auto; top: calc(var(--gutter) + env(safe-area-inset-top) + 4.6em);
    max-width:none;
  }
  .cue{ display:none }
  .mark{ bottom: calc(env(safe-area-inset-bottom) + 4vh) }
  .cat__row{
    grid-template-columns: 3.4ch 1fr auto;
    grid-template-areas: 'no title run' '. meta meta';
    row-gap:.5em;
  }
  .cat__no{ grid-area:no } .cat__title{ grid-area:title }
  .cat__meta{ grid-area:meta } .cat__run{ grid-area:run }
  .take{ border-right:0 }
  .offer__row{ flex-direction:column; gap:.4em }
}

/* iOS: 100vh is toolbars-hidden. Dynamic viewport units so the reel
   never overflows behind Safari's chrome. */
@supports (height: 100dvh){
  .reveal--4{ --span-h: 104dvh }
  .reveal video{ height:100dvh }
  .cue__bar{ height:9dvh }
}

@media (prefers-reduced-motion: reduce){
  .grain{ animation:none }
  .split{ --sep: 0px !important }
  .exit-3d{ filter:none !important }
  .rise{ transform:none }
  .split__ch{ display:none }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:200ms !important;
  }
}