/* Northbound Studios.
   One page read top to bottom: warm paper for the web design work, then the sun goes down behind the
   gold arc and the page falls into the night of Nightfall.
   Hidden starting states exist only under .motion, so with no script, or in calm mode, everything is
   visible and at rest. Only transform and opacity are ever animated. */

:root {
  --paper: #F2EDE2;
  --paper-2: #E8E1D2;
  --ink: #1E2523;
  --ink-2: #4A524E;
  --gold-text: #6E5A2E;
  --gold-rule: #B8995C;
  --hairline: #CFC6B4;
  --plate: #232A28;
  --plate-ink: #DADACA;
  --plate-ink-2: #A9B2AC;
  --plate-gold: #D8C496;
  --plate-gold-2: #CFBC94;
  --dusk-gold-top: #E9D3AE;
  --dusk-gold-bottom: #C99A6A;
  --dusk-blue-top: #1B2638;
  --dusk-blue-bottom: #6B4A3E;
  --night: #080D10;
  --night-2: #0D181D;
  --horizon: #2A3236;
  --sodium: #C8965F;
  --bar: #020405;
  --nf-ink: #F0F6F2;
  --nf-muted: #B4CCCC;
  --nf-dim: #8FA3A1;
  --nf-accent: #A9F0CC;

  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-expo: cubic-bezier(.76, 0, .24, 1);
  --ease-title: cubic-bezier(.33, 1, .68, 1);
  --ease-breath: cubic-bezier(.37, 0, .63, 1);

  --serif: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --logo-font: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --soon-font: "Roboto Condensed", "Arial Narrow", sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --gap: clamp(16px, 2vw, 32px);
  --sec: clamp(96px, 13vw, 184px);
  --hdr-h: 60px;
  --hero-delay: 1900ms;
  --focus: var(--gold-text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; background: var(--paper); }
html.is-night { background: var(--night-2); }
html.motion { scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.site-header, .sheet, .action-bar { --focus: var(--plate-gold); }
.scene, .site-footer { --focus: var(--nf-accent); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: fixed; z-index: 100; left: 16px; top: 12px; padding: 14px 20px; background: var(--plate); color: var(--plate-ink);
  font: 600 .875rem/1 var(--sans); letter-spacing: .04em; border-radius: 2px; transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: calc(1320px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- type ---------- */
.display { font: 340 clamp(3rem, 1.6rem + 5.2vw, 6.25rem)/1 var(--serif); letter-spacing: -.02em; }
.h2 { font: 340 clamp(2.375rem, 1.5rem + 3.2vw, 4.5rem)/1.04 var(--serif); letter-spacing: -.015em; }
.h3 { font: 400 clamp(1.75rem, 1.4rem + 1.4vw, 2.625rem)/1.08 var(--serif); letter-spacing: -.01em; }
.lead { font: 300 clamp(1.1875rem, 1.05rem + .6vw, 1.5rem)/1.5 var(--serif); max-width: 34ch; }
.display em, .h2 em { color: var(--gold-text); }
.body { max-width: 62ch; }
.eyebrow {
  display: flex; align-items: center; gap: 14px; font: 600 .75rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-text);
}
.eb-n { font-variant-numeric: tabular-nums; }
.eyebrow.draw::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--gold-rule); transform-origin: left; }
.eb-rule { flex: none; width: 40px; height: 1px; background: var(--gold-rule); }

/* word masks: each word rises out of its own line (Headline Rise) */
.ln { display: block; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .1em .18em; margin: -.08em -.1em -.18em; }
.wi { display: inline-block; transform-origin: 0 100%; }

/* ---------- links ---------- */
.uline { position: relative; display: inline-block; }
.uline::before, .uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; }
.uline::before { background: var(--hairline); }
.uline::after { background: var(--gold-rule); transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--ease-soft); }
.uline:hover::after, .uline:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.mag { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform 300ms var(--ease-soft); }
/* the pull is clamped in site.js (10px across, 6px down), so even the long email link only leans */

/* ---------- header: the badge ---------- */
.site-header {
  position: fixed; z-index: 60; top: 12px; left: 16px; right: 16px; height: var(--hdr-h); border-radius: 14px;
  background: var(--plate); box-shadow: inset 0 0 0 1px rgba(218, 218, 202, .08); color: var(--plate-ink);
  transition: transform 450ms var(--ease-soft);
}
.site-header.is-tucked { transform: translate3d(0, -130%, 0); }
.hdr-in { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.lockup { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--plate-ink); }
.lk-mark { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 34px; }
.lk-star { width: 18px; height: 18px; fill: var(--plate-gold); transition: transform 600ms var(--ease-soft); }
.lk-arc { width: 34px; height: 6px; }
.lockup:hover .lk-star { transform: rotate(45deg); }
.lk-text { display: grid; gap: 4px; width: max-content; }
.lk-name { font: 600 1.375rem/1 var(--logo-font); letter-spacing: .02em; color: var(--plate-ink); }
.lk-sub { display: flex; justify-content: space-between; font: 600 .5625rem/1 var(--sans); color: var(--plate-ink-2); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 600 .875rem/1 var(--sans); letter-spacing: .04em;
  color: var(--plate-ink); transition: color 300ms var(--ease-out);
}
.nav-a:hover { color: #fff; }
.nav-a.is-current { color: var(--plate-gold); }
.btn-plate {
  display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border: 1px solid var(--plate-gold); border-radius: 2px;
  color: var(--plate-ink); font: 600 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), transform 300ms var(--ease-soft);
}
.btn-plate:hover { background: var(--plate-gold); color: var(--plate); }
.menu-btn { display: none; min-height: 44px; padding: 0 4px; font: 600 .8125rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--plate-ink); }

.sheet { position: fixed; z-index: 55; inset: 0; overflow: auto; background: var(--plate); color: var(--plate-ink); padding: 112px var(--pad) 48px; }
.sheet[hidden] { display: none; }
.is-night .sheet { background: var(--night-2); }
.sheet-list { display: grid; gap: 4px; }
.sheet-a { display: block; padding: 10px 0; font: 340 2.25rem/1.15 var(--serif); letter-spacing: -.01em; color: var(--plate-ink); }
.sheet-a:hover { color: var(--plate-gold); }
.sheet-contact { display: grid; gap: 6px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(218, 218, 202, .14); }
.sheet-c { display: block; padding: 8px 0; color: var(--plate-ink-2); overflow-wrap: anywhere; }
html.menu-open { overflow: hidden; }

/* ---------- hero: two lights ---------- */
.hero { position: relative; min-height: min(100svh, 980px); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); min-height: inherit; align-items: center; }
.hero-text { grid-column: 1 / 8; padding-block: 118px 72px; position: relative; z-index: 1; }
.hero-eb { margin-bottom: 30px; }
.display .ln, .h2 .ln { white-space: nowrap; }
.hero-lead { margin-top: 34px; color: var(--ink-2); }
.index { margin-top: 48px; max-width: 640px; border-bottom: 1px solid var(--hairline); }
.idx-row {
  position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; min-height: 76px; border-top: 1px solid var(--hairline); color: var(--ink);
}
.idx-row::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold-rule);
  transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-soft);
}
.idx-n { font: italic 300 1.375rem/1 var(--serif); color: var(--gold-text); transition: transform 450ms var(--ease-soft); }
.idx-t { font: 340 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.1 var(--serif); letter-spacing: -.01em; transition: transform 450ms var(--ease-soft); }
.idx-m { font: 600 .75rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.idx-row:hover::after, .idx-row:focus-visible::after { transform: scaleX(1); }
.idx-row:hover .idx-n, .idx-row:focus-visible .idx-n { transform: translate3d(4px, 0, 0); }
.idx-row:hover .idx-t, .idx-row:focus-visible .idx-t { transform: translate3d(10px, 0, 0); }
.dusk-wash { position: absolute; inset: 0; z-index: 3; background: var(--dusk-blue-top); opacity: 0; pointer-events: none; transition: opacity 450ms var(--ease-soft); }
.hero:has(.idx-row[data-door]:is(:hover, :focus-visible)) .dusk-wash { opacity: .07; }

.reel { grid-column: 8 / 13; align-self: stretch; position: relative; overflow: hidden; min-height: 560px; }
.reel-cols { position: absolute; inset: 0; display: flex; justify-content: center; gap: 28px; }
.reel-col { flex: none; align-self: flex-start; width: 190px; display: flex; flex-direction: column; gap: 28px; padding-bottom: 28px; }
.reel-b { margin-top: 160px; }
.screen { flex: none; width: 100%; border: 1px solid var(--hairline); border-radius: 22px; overflow: hidden; background: var(--paper-2); }
.screen img { width: 100%; aspect-ratio: 1170 / 2532; object-fit: cover; }
.reel-fade { position: absolute; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 1; }
.reel-fade-t { top: 0; background: linear-gradient(var(--paper), rgba(242, 237, 226, 0)); }
.reel-fade-b { bottom: 0; background: linear-gradient(rgba(242, 237, 226, 0), var(--paper)); }
.reel-row { display: none; }
.hero.is-off .reel-col, .hero.is-off .reel-track, .reel:hover .reel-col { animation-play-state: paused; }

/* ---------- web design opening ---------- */
.sec { padding-block: var(--sec); }
.web { padding-top: calc(var(--sec) * .8); }
.web .h2 { margin-top: 28px; }
.statement {
  margin: clamp(56px, 7vw, 96px) auto 0; max-width: 20em; text-align: center;
  font: 300 clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem)/1.22 var(--serif); letter-spacing: -.01em;
}
.how { background: var(--paper-2); }
.how .h2 { }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); }
.step { position: relative; padding-top: 28px; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-rule); transform-origin: left; }
.step-n { display: block; font: italic 300 1.375rem/1 var(--serif); color: var(--gold-text); }
.step-h { margin: 22px 0 14px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); letter-spacing: -.01em; max-width: 14ch; }
.step .body { color: var(--ink-2); max-width: 34ch; }
.how-lead { margin-top: clamp(56px, 7vw, 104px); }

/* ---------- the concepts: proof sheets ---------- */
.work-head .h2 { margin-top: 28px; }
.work-intro { margin-top: 34px; color: var(--ink-2); }
@media (min-width: 960px) {
  .work-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .work-head .eyebrow { grid-column: 1 / -1; }
  .work-head .h2 { grid-column: 1 / 9; }
  .work-head .work-intro { grid-column: 9 / 13; margin: 0 0 .6rem; }
}
.spreads { margin-top: clamp(72px, 9vw, 128px); display: grid; row-gap: clamp(96px, 14vw, 200px); }
.spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; --pw: 30.26%; }
.sp-media { position: relative; grid-row: 1; grid-column: 1 / span 8; width: min(56vw, 760px); }
.sp-text { grid-row: 1; grid-column: 9 / span 4; }
/* mirrored spreads: the window steps in by the phone's overhang (18 percent of a 30.26 percent frame),
   so the phone ends on the content edge instead of running into the page margin */
.spread.even .sp-media { grid-column: 5 / span 8; justify-self: end; margin-right: calc(min(56vw, 760px) * .0545); }
.spread.even .sp-text { grid-column: 1 / span 4; }
.window {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--paper-2);
  box-shadow: 0 40px 80px -40px rgba(30, 37, 35, .35), 0 2px 6px rgba(30, 37, 35, .08);
  transition: transform 450ms var(--ease-soft);
}
.strip { display: block; width: 100%; transform: translate3d(0, var(--sy, 0px), 0); }
.strip img { width: 100%; height: auto; aspect-ratio: 1440 / 4320; }
.pframe { position: absolute; z-index: 2; width: var(--pw); right: calc(var(--pw) * -.18); bottom: calc(var(--pw) * -.288); }
.pframe-in {
  border: 6px solid var(--plate); border-radius: 30px; overflow: hidden; background: var(--plate);
  box-shadow: 0 30px 60px -30px rgba(30, 37, 35, .5); transform: translate3d(0, var(--py, 0px), 0);
}
.pframe-in img { width: 100%; aspect-ratio: 1170 / 2532; object-fit: cover; }
.sp-n { font: italic 300 1.375rem/1 var(--serif); color: var(--gold-text); }
.sp-text .h3 { margin-top: 18px; }
.sp-meta { margin-top: 12px; font: 600 .75rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
.sp-text .body { margin-top: 22px; color: var(--ink); }
.sp-tag { margin-top: 24px; }
.tag { display: inline-block; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 999px; font: 500 .8125rem/1.45 var(--sans); letter-spacing: .02em; }
.sp-link { margin-top: 12px; }
.sp-link .uline { padding: 12px 0; font-weight: 600; }
.sp-link .uline::before, .sp-link .uline::after { bottom: 10px; }
.sp-cap { font: 500 .8125rem/1.45 var(--sans); letter-spacing: .02em; color: var(--ink-2); }

/* ---------- contact ---------- */
.contact { background: var(--paper-2); }
.contact .h2 { margin-top: 28px; }
.contact-body { margin-top: 30px; color: var(--ink-2); }
.contact-links { display: grid; justify-items: start; gap: 18px; margin-top: clamp(40px, 5vw, 72px); }
.big { font: 300 clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem)/1.15 var(--serif); letter-spacing: -.01em; }
.big { padding: 6px 0; }
.big::before, .big::after { bottom: 2px; }

/* ---------- the night falls ---------- */
.scene { position: relative; }
.dusk-strip { position: relative; height: 36vh; background: linear-gradient(180deg, var(--paper), var(--dusk-gold-bottom) 38%, var(--dusk-blue-top) 78%, var(--night)); }
.ds-arc { position: absolute; left: 50%; bottom: 14%; width: 120vw; height: clamp(40px, 5vw, 72px); transform: translateX(-50%); }
.stage {
  position: relative; min-height: 100svh; overflow: hidden; background: var(--night);
  --arc-h: clamp(54px, 6vw, 96px);
  --o-hz: 1; --o-glow: 1; --o-night: 1; --o-gold: 0; --o-blue: 0; --o-day: 0; --o-arc: 0; --o-star: 0;
  --y-day: 0px; --y-glow: 0vh; --y-star: 0vh;
}
.l { position: absolute; inset: 0; pointer-events: none; }
.l-gold { background: linear-gradient(180deg, var(--dusk-gold-top), var(--dusk-gold-bottom)); opacity: var(--o-gold); }
.l-blue { background: linear-gradient(180deg, var(--dusk-blue-top), var(--dusk-blue-bottom)); opacity: var(--o-blue); }
.l-night { background: var(--night); opacity: var(--o-night); }
.l-glow {
  inset: auto; left: 50%; top: 80%; width: 140vw; height: 34vh; background: radial-gradient(closest-side, var(--sodium), rgba(200, 150, 95, 0));
  opacity: calc(.16 * var(--o-glow)); transform: translate3d(-50%, -50%, 0) translate3d(0, var(--y-glow), 0);
}
.l-horizon { position: absolute; left: 0; right: 0; top: 80%; height: 0; pointer-events: none; }
.hz-arc { position: absolute; left: 50%; bottom: 0; width: 120vw; height: var(--arc-h); transform: translate3d(-50%, 0, 0); opacity: var(--o-arc); }
.hz-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--horizon); opacity: var(--o-hz); }
.l-star {
  position: absolute; left: 50%; top: 80%; width: clamp(48px, 5.6vw, 80px); pointer-events: none; opacity: var(--o-star);
  transform: translate3d(-50%, calc(-100% - var(--arc-h) - 2vh + var(--y-star)), 0);
}
.sc-star { width: 100%; fill: var(--plate-gold); }
.dayline {
  position: absolute; left: 50%; top: 30%; width: min(18em, calc(100% - 2 * var(--pad))); text-align: center; opacity: var(--o-day);
  font: 300 clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem)/1.22 var(--serif); letter-spacing: -.01em; color: var(--ink);
  transform: translate3d(-50%, var(--y-day), 0);
}
/* The card spans the stage and centers its column, so the logo's own width rules apply in full
   (a left: 50% card would shrink-to-fit at half the stage and clamp the logo on phones). */
.card { position: absolute; left: 0; right: 0; top: 30%; padding-inline: var(--pad); display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-logo { width: clamp(280px, 40vw, 600px); height: auto; }
.soon { margin-top: 28px; }
.soon-t { display: inline-block; padding-left: .52em; font: 700 clamp(.8125rem, .75rem + .25vw, .9375rem)/1 var(--soon-font); letter-spacing: .52em; color: var(--nf-muted); }
.mint { display: block; width: 72px; height: 2px; margin-top: 20px; background: var(--nf-accent); }
.bar { position: absolute; left: 0; right: 0; height: 4.2%; background: var(--bar); pointer-events: none; }
.bar-t { top: 0; transform-origin: top; }
.bar-b { bottom: 0; transform-origin: bottom; }
.grain { position: absolute; inset: -256px; background: url(../img/grain.png); opacity: .05; pointer-events: none; }
.nf-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- footer: night ---------- */
.site-footer { background: var(--night-2); color: var(--nf-ink); padding: 96px 0 40px; }
.ft-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px var(--gap); align-items: start; }
.ft-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 64px; margin-bottom: 20px; }
.ft-star { width: 24px; height: 24px; fill: var(--plate-gold); align-self: center; }
.ft-arc { width: 64px; height: 8px; }
.ft-name { font: 600 1rem/1.4 var(--sans); color: var(--nf-ink); }
.ft-town { color: var(--nf-dim); font-size: .9375rem; }
.ft-contact, .ft-meta { display: grid; justify-items: start; gap: 14px; }
.ft-link { color: var(--nf-ink); padding: 12px 0; }
.ft-link::before, .ft-link::after { bottom: 8px; }
.ft-link::before { background: rgba(143, 163, 161, .35); }
.ft-link::after { background: var(--nf-muted); }
.ft-copy { color: var(--nf-dim); font-size: .875rem; margin-top: 6px; }

/* ---------- action bar (phone) and loupe ---------- */
.action-bar { display: none; }
.loupe { position: fixed; z-index: 80; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; transform: translate3d(var(--lx, -300px), var(--ly, -300px), 0); }
.loupe-in {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--plate); color: var(--plate-ink);
  font: 600 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: scale(.6);
  transition: opacity 250ms var(--ease-soft), transform 250ms var(--ease-soft);
}
.loupe.on .loupe-in { opacity: 1; transform: none; }

/* ---------- privacy and 404 ---------- */
.doc { max-width: calc(62ch + 2 * var(--pad)); margin-inline: auto; padding: 168px var(--pad) 128px; }
.doc .h2 { max-width: none; }
.doc-date { margin-top: 20px; color: var(--ink-2); font-size: .9375rem; }
.doc-h { margin: 48px 0 12px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); letter-spacing: -.01em; }
.doc .body a { padding: 4px 0; }
.page-404 .doc .body { margin-top: 28px; }
.page-doc { display: flex; flex-direction: column; min-height: 100svh; }
.page-doc main { flex: 1 0 auto; }

/* =============================================================== motion: full mode only */
.curtain { display: none; }
.motion[data-page="home"] .curtain {
  display: grid; place-items: center; position: fixed; z-index: 90; inset: 0; background: var(--plate); pointer-events: none;
  animation: cu-lift 1000ms var(--ease-expo) 1550ms both;
}
.cu-core { display: grid; justify-items: center; gap: 18px; animation: cu-out 400ms var(--ease-out) 1500ms both; }
.cu-mark { display: grid; justify-items: center; gap: 14px; }
.cu-star { width: clamp(64px, 9vw, 96px); fill: var(--plate-gold); animation: cu-star 900ms var(--ease-soft) 100ms both; }
.cu-arc { width: min(560px, 80vw); height: 14px; transform-origin: center; animation: cu-arc 800ms var(--ease-soft) 350ms both; }
.cu-word { display: grid; justify-items: center; gap: 12px; }
.cu-name { display: flex; font: 600 clamp(2.5rem, 8vw, 5.5rem)/1 var(--logo-font); letter-spacing: .02em; color: var(--plate-ink); }
.cu-l { display: inline-block; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.cu-c { display: inline-block; animation: cu-char 600ms var(--ease-soft) both; }
.cu-l:nth-child(1) .cu-c { animation-delay: 500ms; } .cu-l:nth-child(2) .cu-c { animation-delay: 540ms; }
.cu-l:nth-child(3) .cu-c { animation-delay: 580ms; } .cu-l:nth-child(4) .cu-c { animation-delay: 620ms; }
.cu-l:nth-child(5) .cu-c { animation-delay: 660ms; } .cu-l:nth-child(6) .cu-c { animation-delay: 700ms; }
.cu-l:nth-child(7) .cu-c { animation-delay: 740ms; } .cu-l:nth-child(8) .cu-c { animation-delay: 780ms; }
.cu-l:nth-child(9) .cu-c { animation-delay: 820ms; } .cu-l:nth-child(10) .cu-c { animation-delay: 860ms; }
.cu-sub { font: 600 .875rem/1 var(--sans); letter-spacing: .42em; padding-left: .42em; color: var(--plate-ink-2); animation: cu-sub 500ms var(--ease-soft) 1000ms both; }
.motion[data-page="home"] .curtain.is-skip { animation: cu-lift-fast 380ms var(--ease-expo) both; }
.motion[data-page="home"] .curtain.is-skip .cu-core { animation: none; opacity: 0; }
@keyframes cu-star { from { opacity: 0; transform: scale(.3) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes cu-arc { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cu-char { from { opacity: 0; transform: translate3d(0, .5em, 0); } to { opacity: 1; transform: none; } }
@keyframes cu-sub { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes cu-out { to { opacity: 0; transform: translate3d(0, -18px, 0); } }
@keyframes cu-lift { 0% { transform: none; visibility: visible; } 99.9% { visibility: visible; } 100% { transform: translate3d(0, -100%, 0); visibility: hidden; } }
@keyframes cu-lift-fast { 0% { transform: none; visibility: visible; } 99.9% { visibility: visible; } 100% { transform: translate3d(0, -100%, 0); visibility: hidden; } }

/* Headline Rise: hero words after the curtain, other headings on entering */
.motion .display .wi { animation: word-up 900ms var(--ease-soft) calc(var(--hero-delay) + var(--i, 0) * 70ms) both; }
.motion.ready [data-words]:not(.display) .wi { transform: translate3d(0, 108%, 0) rotate(4deg); }
.motion.ready [data-words]:not(.display).in .wi { transform: none; transition: transform 900ms var(--ease-soft) calc(var(--i, 0) * 70ms); }
@keyframes word-up { from { transform: translate3d(0, 108%, 0) rotate(4deg); } to { transform: none; } }
.motion .rise { animation: rise 700ms var(--ease-out) calc(var(--hero-delay) + var(--rd, 0ms)) both; }
.hero-eb { --rd: 0ms; }
.hero-lead { --rd: 510ms; }
.index li:nth-child(1) { --rd: 600ms; }
.index li:nth-child(2) { --rd: 690ms; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.motion .reel, .motion .reel-row { animation: fade-in 900ms var(--ease-out) var(--hero-delay) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The Reel */
.motion .reel-a { animation: reel-up 90s linear infinite; }
.motion .reel-b { animation: reel-down 90s linear infinite; }
@keyframes reel-up { to { transform: translate3d(0, -50%, 0); } }
@keyframes reel-down { from { transform: translate3d(0, -50%, 0); } to { transform: none; } }
.motion .hero.is-off .reel-col, .motion .hero.is-off .reel-track { animation-play-state: paused; }

/* Hairline Draw */
.motion.ready .eyebrow.draw::before { transform: scaleX(0); }
.motion.ready .eyebrow.draw.in::before { transform: scaleX(1); transition: transform 800ms var(--ease-soft); }
.motion.ready .step::before { transform: scaleX(0); }
.motion.ready .steps.in .step::before { transform: scaleX(1); transition: transform 800ms var(--ease-soft); }
.motion.ready .steps.in .step:nth-child(2)::before { transition-delay: 120ms; }
.motion.ready .steps.in .step:nth-child(3)::before { transition-delay: 240ms; }

/* Ink Scrub: each word's opacity follows the scroll */
.motion.ready .sw { opacity: clamp(.16, calc(.16 + .84 * ((var(--p, 0) * var(--nw, 40) - var(--i, 0)) / 3)), 1); }

/* Proof sheets: reveal, then the scroll-driven strip and phone */
.motion.ready .sp-text { opacity: 0; transform: translate3d(0, 24px, 0); }
.motion.ready .spread.in .sp-text { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 150ms, transform 700ms var(--ease-out) 150ms; }
.motion.ready .pframe { opacity: 0; transform: translate3d(0, 40px, 0); }
.motion.ready .spread.in .pframe { opacity: 1; transform: none; transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft); }
/* layers only for the spreads on (or next to) the screen: site.js toggles .is-live from each spread's observer */
.motion .spread.is-live .strip, .motion .spread.is-live .pframe-in { will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .window:hover { transform: translate3d(0, -4px, 0); }
}

/* The night falls: a sticky stage scrubbed by scroll */
.motion .dusk-strip { display: none; }
.motion .scene { height: 300vh; }
.motion .stage { position: sticky; top: 0; height: 100vh; min-height: 0; background: var(--paper); }
.motion.ready .stage {
  --o-hz: 0; --o-glow: 0; --o-night: 0; --o-gold: 0; --o-blue: 0; --o-day: 1; --o-arc: 1; --o-star: 1;
  --y-day: 0px; --y-glow: 6vh; --y-star: 0vh;
}
@supports (height: 100svh) { .motion .scene { height: 300svh; } .motion .stage { height: 100svh; } }
.motion .nf-anchor { top: calc((300vh - 100vh) * .62); }
@supports (height: 100svh) { .motion .nf-anchor { top: calc((300svh - 100svh) * .62); } }
.motion .grain { opacity: calc(.05 * var(--o-night)); animation: grain 1s steps(1) infinite; }
.motion .stage.is-off .grain, .motion .stage.is-off .soon-t { animation-play-state: paused; }
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 12.5% { transform: translate3d(-70px, 44px, 0); } 25% { transform: translate3d(38px, -92px, 0); }
  37.5% { transform: translate3d(-120px, -30px, 0); } 50% { transform: translate3d(96px, 80px, 0); } 62.5% { transform: translate3d(-24px, 130px, 0); }
  75% { transform: translate3d(140px, -64px, 0); } 87.5% { transform: translate3d(-90px, 110px, 0); } 100% { transform: translate3d(0, 0, 0); }
}
/* Title Card: replays each time the night is reached */
.motion.ready .bar { transform: scaleY(0); }
.motion.ready .nf-logo { opacity: 0; transform: translate3d(0, 10px, 0); }
.motion.ready .soon { opacity: 0; }
.motion.ready .mint { transform: scaleX(0); }
.motion .stage.card-in .bar { transform: none; transition: transform 700ms var(--ease-expo); }
.motion .stage.card-in .nf-logo { opacity: 1; transform: none; transition: opacity 1400ms var(--ease-title) 300ms, transform 1400ms var(--ease-title) 300ms; }
.motion .stage.card-in .soon { opacity: 1; transition: opacity 1000ms var(--ease-title) 1100ms; }
.motion .stage.card-in .mint { transform: none; transition: transform 600ms var(--ease-soft) 1500ms; }
.motion .stage.card-in .soon-t { animation: breath 1300ms var(--ease-breath) 2500ms infinite alternate; }
@keyframes breath { from { opacity: 1; } to { opacity: .62; } }

/* Phone action bar and header colour never change; the sheet does (see .is-night) */
@media (max-width: 820px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}

/* ---------- below the two-column hero (1100px) ---------- */
@keyframes reel-left { to { transform: translate3d(calc(-1 * var(--reel-period)), 0, 0); } }
@media (max-width: 1099px) {
  .hero { min-height: 0; }
  .hero-grid { display: block; }
  .hero-text { padding-block: 112px 64px; }
  .reel { display: none; }
  .reel-row { display: block; margin: 44px calc(var(--pad) * -1) 0; overflow: hidden; }
  .reel-track { display: flex; gap: 16px; width: max-content; padding-left: var(--pad); padding-right: 16px; --reel-period: 1494px; }
  .screen { width: 150px; flex: none; }
  .motion .reel-track { animation: reel-left 90s linear infinite; }
  .index { max-width: none; }
}

/* ---------- tablet and below ---------- */
@media (max-width: 959px) {
  .spread { display: block; }
  .spread { --pw: 30%; }
  /* the window gives up the phone's overhang (14 percent of a 30 percent frame = 4.2 percent), so the
     phone overlaps the window's corner and ends exactly on the side gutter, never in it */
  .sp-media { width: calc(100% / 1.042); max-width: 729px; margin-top: 8px; }
  .spread.even .sp-media { margin-left: 0; margin-right: 0; justify-self: start; }
  .spread .sp-text, .spread.even .sp-text { margin-top: calc(var(--pw) * .18 + 44px); max-width: 520px; }
  .sp-text { display: flex; flex-direction: column; align-items: flex-start; }
  .spread .pframe, .spread.even .pframe { left: auto; right: calc(var(--pw) * -.14); }
  .nf-logo { width: clamp(280px, 56vw, 600px); }
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .step-h, .step .body { max-width: 34ch; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 700px) {
  :root { --hdr-h: 54px; }
  body { font-size: 1rem; }
  .site-header { top: 10px; left: 10px; right: 10px; }
  .hdr-in { padding: 0 16px; }
  .lk-name { font-size: 1.25rem; }
  .hero-text { padding-block: 84px 56px; }
  /* the two eyebrow lines stack as one block, the rule leading the first line the way every section
     eyebrow does, the town aligned under the name */
  .hero-eb { display: grid; grid-template-columns: 28px auto; justify-content: start; column-gap: 14px; row-gap: 8px; margin-bottom: 22px; }
  .hero-eb .eb-rule { grid-column: 1; grid-row: 1; width: 28px; }
  .hero-eb > span:first-child { grid-column: 2; grid-row: 1; }
  .hero-eb > span:last-child { grid-column: 2; grid-row: 2; }
  /* 48px from 375 up; narrower phones scale it so the authored three lines hold (no lone "you.") */
  .display { font-size: min(3rem, 12.8vw); }
  .display .ln { white-space: normal; }
  .h2 .ln { display: inline; white-space: normal; }
  .hero-lead { margin-top: 24px; font-size: 1.1875rem; }
  .reel-row { margin-top: 36px; }
  .screen { width: 124px; }
  .reel-track { --reel-period: 1260px; }
  .index { margin-top: 32px; }
  .idx-row { grid-template-columns: 44px 1fr; min-height: 64px; row-gap: 0; }
  .idx-m { display: none; }
  .web .statement { text-align: left; margin-left: 0; font-size: 1.75rem; }
  .spreads { row-gap: 64px; }
  .pframe-in { border-width: 4px; border-radius: 22px; }
  .spread .sp-text, .spread.even .sp-text { margin-top: calc(var(--pw) * .18 + 36px); }
  .doc { padding-top: 128px; }
  .big { font-size: 1.75rem; }
  /* the email wraps at its @ here; a text underline follows each line instead of a box-wide rule */
  .big { text-decoration-line: underline; text-decoration-color: var(--gold-rule); text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .big::before, .big::after { display: none; }
  .contact-links { gap: 14px; }
  .nf-logo { width: min(86vw, 340px); }
  .soon { margin-top: 22px; }
  .soon-t { letter-spacing: .42em; padding-left: .42em; }
  .motion .scene { height: 260svh; }
  .motion .nf-anchor { top: calc((260svh - 100svh) * .62); }
  .action-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--plate); color: var(--plate-ink);
    transition: transform 400ms var(--ease-soft);
  }
  .action-bar.is-off { transform: translate3d(0, 100%, 0); }
  .ab-a { display: grid; place-items: center; font: 600 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--plate-ink); }
  .ab-a + .ab-a { border-left: 1px solid rgba(218, 218, 202, .18); }
  .site-footer { padding: 72px 0 calc(32px + 60px + env(safe-area-inset-bottom)); }
  .ft-grid { grid-template-columns: 1fr; gap: 32px; }
  .loupe { display: none; }
}

/* ---------- calm mode and no-script: everything visible and at rest ---------- */
.calm * { transition-duration: 0s !important; }
.calm .window:hover { transform: none; }
.calm .reel-b { margin-top: 160px; }
.calm .pframe-in, .calm .strip { will-change: auto; }

@media print {
  .site-header, .action-bar, .curtain, .sheet, .loupe { display: none !important; }
}

/* Final pass after gate round 2 (2026-10-28): no lone last words, focusable reveals, skip target, hover rules transform/opacity only */
.h3, .dayline, .step-h { text-wrap: balance; }
.statement, .lead, .body { text-wrap: pretty; }
.motion.ready .spread:focus-within .sp-text, .motion.ready .spread:focus-within .pframe { opacity: 1; transform: none; }
main:focus { outline: none; }
.skip { padding: 15px 20px; }
.sp-cap { margin-top: 6px; }
.nav-a { transition: none; }
.btn-plate { transition: transform 300ms var(--ease-soft); }