/* Northbound Studios, v2: The Northbound Annual (DESIGN-v2.md).
   Base rules are the poster version (calm, reduced motion, no JavaScript). Motion rules live under
   .motion.ready; the live world under .world-day / .world-night. Only transform and opacity animate. */

:root {
  --paper-dawn: #EEE9E1; --paper-day: #F3EEE4; --paper-late: #F2E8D5; --paper-golden: #ECD6B0;
  --fiber-shade: #CFC5B2;
  --ink: #1C2321; --ink-2: #485049; --ink-3: #8C8577; --rule: #B9AE98;
  --foil: #B8924E; --foil-light: #F2DFA8; --foil-dark: #6B5226; --sun: #E8B86A;
  --night: #080D10; --bar: #020405; --nf-ink: #F0F6F2; --nf-muted: #B4CCCC; --nf-dim: #8FA3A1; --nf-accent: #A9F0CC;
  --plate: #232A28; --nb-gold: #D8C496; --nb-gold-2: #CFBC94; --nb-ink: #DADACA;

  --f-display: "Noto Serif Display", "NSD Fallback", Georgia, serif;
  --f-text: "Host Grotesk", "HG Fallback", Arial, Helvetica, sans-serif;
  --f-soon: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  --m: clamp(24px, 4.6vw, 88px);
  --gut: 24px;
  --edge: 24px;
  --fine: .78125rem;

  --ease-press: cubic-bezier(.16, 1, .3, 1);
  --ease-sheet: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-bars: cubic-bezier(.76, 0, .24, 1);
  --ease-title: cubic-bezier(.33, 1, .68, 1);
  --ease-breath: cubic-bezier(.37, 0, .63, 1);

  --tile: url("../img/paper/fiber-256@2x.webp");
}
@media (max-width: 1023px) { :root { --m: 40px; } }
@media (max-width: 599px) { :root { --m: 20px; --gut: 16px; --edge: 18px; } }
@media (max-width: 360px) { :root { --m: 16px; } }

@font-face { font-family: "NSD Fallback"; src: local("Georgia"); size-adjust: 78%; ascent-override: 112%; descent-override: 30%; }
@font-face { font-family: "HG Fallback"; src: local("Arial"); size-adjust: 100%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: auto; }
body {
  margin: 0; background: var(--paper-day); color: var(--ink);
  font: 400 .9375rem/1.55 var(--f-text); font-kerning: normal; font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }
sup { line-height: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.is-night :focus-visible, .night :focus-visible, .final :focus-visible { outline-color: var(--nf-accent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper-day); font: 500 .875rem/1 var(--f-text); text-decoration: none; transform: translateY(-160%); }
.skip:focus { transform: none; }
main { position: relative; z-index: 1; display: block; }
main:focus { outline: none; }

/* ---------------------------------------------------------------- the CSS paper (posters, phones by day) */
.cover, .foreword, .concepts, .contact, .doc-page {
  background-image: var(--tile), linear-gradient(var(--p0), var(--p1));
  background-size: 256px 256px, 100% 100%;
  background-blend-mode: soft-light, normal;
}
.cover { --p0: var(--paper-dawn); --p1: #F0EBE2; }
.foreword { --p0: #F0EBE2; --p1: var(--paper-day); }
.concepts { --p0: var(--paper-day); --p1: var(--paper-late); }
.contact { --p0: var(--paper-late); --p1: var(--paper-golden); }
.world-day .cover, .world-day .foreword, .world-day .concepts, .world-day .contact { background: none; }
body.page-doc { background-image: var(--tile), linear-gradient(var(--paper-dawn), var(--paper-day)); background-size: 256px 256px, 100% 100%; background-blend-mode: soft-light, normal; }

.world { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out); }
.world-live .world { opacity: 1; }

/* ---------------------------------------------------------------- type */
.xl { display: block; font-family: var(--f-display); font-stretch: 62.5%; font-weight: 260; font-size: min(16.2vw, 26svh); line-height: .82; letter-spacing: -.02em; margin-left: -.05em; }
.ld { font-family: var(--f-display); font-stretch: 70%; font-weight: 280; font-size: clamp(2.5rem, 1rem + 4.6vw, 6.25rem); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.statement { font-family: var(--f-display); font-stretch: 88%; font-weight: 340; font-size: clamp(1.125rem, .95rem + .55vw, 1.5rem); line-height: 1.4; text-wrap: pretty; max-width: 34em; }
.body { font-size: .9375rem; line-height: 1.55; max-width: 46em; text-wrap: pretty; }
.label { font: 500 var(--fine)/1.35 var(--f-text); letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums; }
.label .num { margin-right: .9em; }
em { font-family: var(--f-display); }
.uline { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }

/* ---------------------------------------------------------------- the corners */
.corners { position: fixed; inset: 0; z-index: 20; pointer-events: none; color: var(--ink); }
.corners > * { position: absolute; pointer-events: auto; }
.c-lockup { left: var(--m); top: var(--edge); display: block; width: 92px; transition: transform .45s var(--ease-press), opacity .45s var(--ease-out); }
.lk { width: 100%; height: auto; overflow: visible; }
.lk-corner .lk-north, .lk-corner .lk-studios { fill: var(--ink); }
.lk-corner .lk-star { fill: var(--foil-dark); }
.lk-corner .lk-g0 { stop-color: #8F7440; }
.lk-corner .lk-g1 { stop-color: var(--foil-dark); }
.c-town, .c-nav, .c-run, .c-mail, .c-menu { font: 500 var(--fine)/1.35 var(--f-text); letter-spacing: .01em; transition: transform .45s var(--ease-press), opacity .45s var(--ease-out); }
.c-town { left: 50%; top: var(--edge); transform: translateX(-50%); color: var(--ink-2); white-space: nowrap; }
.c-nav { right: var(--m); top: calc(var(--edge) - 2px); font-size: .9375rem; }
.c-a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding: 6px 0 2px; transition: background-size .45s var(--ease-press); }
.c-a:hover, .c-a:focus-visible, .c-a[aria-current] { background-size: 100% 1px; }
.c-menu { display: none; right: var(--m); top: calc(var(--edge) - 12px); min-height: 44px; align-items: center; gap: 12px; font-size: .9375rem; }
.c-run { left: var(--m); bottom: var(--edge); color: var(--ink-2); white-space: nowrap; }
.c-run span { display: inline-block; }
.run-b { position: absolute; left: 0; top: 0; opacity: 0; }
.c-mail { right: var(--m); bottom: calc(var(--edge) - 6px); display: flex; align-items: center; gap: 16px; }
.sun-ind { width: 64px; height: 24px; overflow: visible; flex: none; }
.si-arc { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.si-dot { fill: var(--sun); transform: translate(var(--sx, 9px), var(--sy, 13px)); }
.is-night .corners { color: var(--nf-ink); }
.is-night .c-town, .is-night .c-run { color: var(--nf-dim); }
.is-night .lk-corner .lk-north, .is-night .lk-corner .lk-studios { fill: var(--nb-ink); }
.is-night .lk-corner .lk-star { fill: var(--nb-gold); }
.is-night .lk-corner .lk-g0 { stop-color: var(--nb-gold-2); }
.is-night .lk-corner .lk-g1 { stop-color: var(--nb-gold); }
.is-night .si-arc { stroke: var(--nf-dim); }
.is-night .si-dot { fill: var(--nf-ink); }
.tucked .corners > * { opacity: 0; pointer-events: none; }
.tucked .c-lockup, .tucked .c-town, .tucked .c-nav, .tucked .c-menu { transform: translateY(-130%); }
.tucked .c-town { transform: translate(-50%, -130%); }
.tucked .c-run, .tucked .c-mail { transform: translateY(130%); }
.on-cover .c-run { opacity: 0; }

/* phone menu */
.sheet { position: fixed; inset: 0; z-index: 30; background: var(--paper-day); color: var(--ink); }
.sheet[hidden] { display: none; }
.is-night .sheet { background: var(--night); color: var(--nf-ink); }
.sheet-in { min-height: 100%; display: flex; flex-direction: column; padding: 96px var(--m) calc(32px + env(safe-area-inset-bottom)); }
.sheet-list { display: grid; gap: 6px; }
.sheet-a { display: block; padding: 6px 0; font: 300 2.5rem/1.1 var(--f-display); font-stretch: 70%; text-decoration: none; }
.sheet-contact { margin-top: auto; display: grid; gap: 4px; }
.sheet-c { display: flex; align-items: center; min-height: 44px; font-size: 1.0625rem; text-decoration: none; }
.sheet-close { align-self: flex-start; margin-top: 18px; min-height: 44px; font: 500 .9375rem/1 var(--f-text); text-decoration: underline; text-underline-offset: 4px; }
.menu-open { overflow: hidden; }
.menu-open .corners { z-index: 31; }
.menu-open.tucked .corners > * { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------------- cover */
.cover { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.poster { position: absolute; inset: 0; z-index: 0; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.world-day .cover-poster { opacity: 0; transition: opacity .8s var(--ease-out); }
.cover-h { position: absolute; z-index: 1; left: var(--m); right: var(--m); bottom: max(170px, 23.6svh); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: last baseline; font-weight: 400; }
.cover-xl { grid-column: 1 / span 8; white-space: nowrap; }
.cover-cont { grid-column: 9 / span 4; font-family: var(--f-display); font-stretch: 76%; font-weight: 300; font-size: clamp(1.75rem, 1rem + 1.9vw, 2.75rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; max-width: 11em; }
.doors { position: absolute; z-index: 1; left: var(--m); bottom: 70px; width: min(640px, calc(100% - 2 * var(--m))); }
.doors-list { border-bottom: 1px solid var(--rule); }
.door { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; min-height: 44px; border-top: 1px solid var(--rule); text-decoration: none; }
.door-n { font: 500 var(--fine)/1 var(--f-text); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.door-t { font: 500 .9375rem/1 var(--f-text); }
.door-m { font: 500 var(--fine)/1 var(--f-text); color: var(--ink-2); }
.door::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-press); }
.door:hover::after, .door:focus-visible::after { transform: scaleX(1); }
.door .door-t { transition: transform .45s var(--ease-press); }
.door:hover .door-t, .door:focus-visible .door-t { transform: translateX(6px); }

/* ---------------------------------------------------------------- foreword */
.foreword { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px var(--m); }
.fw-grid { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
.fw-label { grid-column: 1 / -1; margin-bottom: 28px; }
.fw-h { grid-column: 1 / span 7; max-width: 9.5em; }
.fw-side { grid-column: 8 / span 5; display: grid; gap: 22px; padding-bottom: .4em; }
.fw-lead { color: var(--ink-2); max-width: 30em; }

/* ---------------------------------------------------------------- contents and plates */
.concepts { position: relative; }
.contents-page { position: relative; min-height: 100vh; min-height: 100svh; padding: 140px var(--m) 120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-content: center; row-gap: 56px; }
.ct-label { grid-column: 1 / span 4; align-self: start; }
.ct-intro { grid-column: 8 / span 5; color: var(--ink-2); max-width: 32em; }
.names { grid-column: 1 / -1; font-family: var(--f-display); font-stretch: 68%; font-weight: 280; font-size: clamp(1.875rem, .4rem + 4.5vw, 5.4rem); line-height: 1.04; letter-spacing: -.012em; text-wrap: pretty; }
.nm { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 92% / 0 1px no-repeat; transition: background-size .45s var(--ease-press); }
.nm sup { font: 500 .8125rem/1 var(--f-text); font-stretch: 100%; letter-spacing: 0; vertical-align: top; position: relative; top: .5em; margin-right: .32em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.names.has-focus .nm { color: var(--ink-2); }
.names.has-focus .nm.is-on { color: var(--ink); background-size: 100% 1px; }
.nm:focus-visible { background-size: 100% 1px; }

.plates { position: relative; padding: 40px var(--m) 160px; }
.stage { position: relative; }
.track { display: grid; row-gap: 160px; }
.folio { display: none; }

.plate { --ph: min(600px, 43.1vw, calc(100svh - 300px)); --pt: min(760px, calc(100svh - 150px)); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 22px; justify-items: center; }
.pl-a { width: 100%; max-width: 1308px; display: flex; align-items: baseline; gap: 18px 24px; flex-wrap: wrap; }
.pl-no { font: 500 var(--fine)/1 var(--f-text); font-variant-numeric: tabular-nums lining-nums; color: var(--ink-2); min-width: 6.4em; }
.pl-of { display: none; }
.pl-name { font-family: var(--f-display); font-stretch: 76%; font-weight: 300; font-size: clamp(1.75rem, 1rem + 2.3vw, 3.25rem); line-height: 1.02; letter-spacing: -.01em; }
.pl-kind { margin-left: auto; font: 500 var(--fine)/1.35 var(--f-text); color: var(--ink-2); text-align: right; }
.pl-fig { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 26px; padding: 22px; }
.s-right .pl-fig { flex-direction: row-reverse; }
.pf { position: relative; display: block; flex: none; }
.pf picture, .pf img { width: 100%; height: 100%; }
.pf img { object-fit: cover; }
.pf.edge img { outline: 1px solid var(--rule); outline-offset: -1px; }
.pf-desk { height: var(--ph); aspect-ratio: 1440 / 900; }
.pf-phone { height: var(--ph); aspect-ratio: 1170 / 2532; }
.pf-chap { height: var(--pt); aspect-ratio: 1440 / 3478; }
.f-tall .pf-phone, .f-phonefirst .pf-phone { height: var(--pt); }
.f-phonefirst .pf-desk { height: calc(var(--pt) * .52); }
.f-wide .pf-desk { height: min(700px, 48.6vw, calc(100svh - 260px)); }
.f-wide .pf-phone { display: none; }
.pl-morph { display: none; }
.pl-b { width: 100%; max-width: 1308px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; row-gap: 14px; align-items: start; }
.pl-note { font-family: var(--f-display); font-stretch: 88%; font-weight: 340; font-size: clamp(1.0625rem, .95rem + .32vw, 1.25rem); line-height: 1.4; max-width: 46em; text-wrap: pretty; }
.pl-labels { font: 500 var(--fine)/1.5 var(--f-text); color: var(--ink-2); }
.pl-labels span { display: block; }
.pl-link { grid-column: 2; font: 600 .9375rem/1 var(--f-text); }
.pl-link a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 78% / 100% 1px no-repeat; transition: background-position .45s var(--ease-press); }
.pl-labels { grid-column: 2; grid-row: 1; }
.pl-note { grid-row: 1 / span 2; }

/* crop marks: two arms at every outside corner, 14 px long, 8 px off the edge */
.cm i { position: absolute; width: 22px; height: 22px; }
.cm i::before, .cm i::after { content: ""; position: absolute; background: var(--ink-3); transition: transform .45s var(--ease-press); }
.cm i::before { width: 14px; height: 1px; }
.cm i::after { width: 1px; height: 14px; }
.cm i:nth-child(1) { left: -22px; top: -22px; }
.cm i:nth-child(1)::before { left: 0; bottom: 0; transform-origin: right; }
.cm i:nth-child(1)::after { right: 0; top: 0; transform-origin: bottom; }
.cm i:nth-child(2) { right: -22px; top: -22px; }
.cm i:nth-child(2)::before { right: 0; bottom: 0; transform-origin: left; }
.cm i:nth-child(2)::after { left: 0; top: 0; transform-origin: bottom; }
.cm i:nth-child(3) { left: -22px; bottom: -22px; }
.cm i:nth-child(3)::before { left: 0; top: 0; transform-origin: right; }
.cm i:nth-child(3)::after { right: 0; bottom: 0; transform-origin: top; }
.cm i:nth-child(4) { right: -22px; bottom: -22px; }
.cm i:nth-child(4)::before { right: 0; top: 0; transform-origin: left; }
.cm i:nth-child(4)::after { left: 0; bottom: 0; transform-origin: top; }
@media (hover: hover) and (pointer: fine) {
  .pf:hover .cm i:nth-child(1), .pf:focus-visible .cm i:nth-child(1) { transform: translate(-6px, -6px); }
  .pf:hover .cm i:nth-child(2), .pf:focus-visible .cm i:nth-child(2) { transform: translate(6px, -6px); }
  .pf:hover .cm i:nth-child(3), .pf:focus-visible .cm i:nth-child(3) { transform: translate(-6px, 6px); }
  .pf:hover .cm i:nth-child(4), .pf:focus-visible .cm i:nth-child(4) { transform: translate(6px, 6px); }
  .cm i { transition: transform .3s var(--ease-press); }
}
/* the sun's shadow on printed plates (flow layouts): two shadows, east-lit and west-lit */
.pf::before, .pf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pf::before { box-shadow: 9px 10px 22px rgba(60, 44, 20, .16); opacity: calc(1 - var(--west, .25)); }
.pf::after { box-shadow: -9px 10px 22px rgba(60, 44, 20, .16); opacity: var(--west, .25); }
.concepts .plate:nth-child(n+5) { --west: .7; }

/* ---------------------------------------------------------------- contact */
.contact { position: relative; padding: 160px var(--m) 0; }
.co-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 26px; align-items: start; }
.co-label { grid-column: 1 / -1; }
.co-h { grid-column: 1 / span 8; max-width: 11em; text-wrap: pretty; }
.co-sub { grid-column: 1 / span 6; color: var(--ink-2); }
.co-links { grid-column: 1 / span 8; display: grid; justify-items: start; gap: 6px; margin-top: 30px; }
.big { position: relative; display: inline-block; white-space: nowrap; font-family: var(--f-display); font-stretch: 72%; font-weight: 280; font-size: clamp(2rem, .4rem + 4.25vw, 5rem); line-height: 1.08; letter-spacing: -.01em; font-variant-numeric: lining-nums; text-decoration: none; padding-bottom: .08em; }
.big-t { position: relative; }
.big-u { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease-press); }
.big:hover .big-u, .big:focus-visible .big-u { transform: scaleX(.0001); transform-origin: right; }
.ls { display: none; position: absolute; left: 0; top: 0; opacity: .055; pointer-events: none; }
.ls span:nth-child(n+11) { display: none; }
.ls span { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--ink); transform: translate(calc(var(--lx, -1px) * var(--k, 1)), calc(var(--ly, 1px) * var(--k, 1))); }
.how { grid-column: 9 / span 4; grid-row: 2 / span 4; }
.how-h { margin-bottom: 26px; }
.steps { display: grid; gap: 28px; }
.step { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; row-gap: 6px; }
.step-n { grid-row: 1 / span 2; font: 500 .9375rem/1.5 var(--f-text); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.step-t { font-family: var(--f-display); font-stretch: 84%; font-weight: 320; font-size: 1.375rem; line-height: 1.18; }
.step .body { color: var(--ink-2); }
.co-small { grid-column: 1 / span 7; margin-top: 70px; }
.after-dark { padding: 18svh 0 9svh; }

/* ---------------------------------------------------------------- night (posters) */
.night { position: relative; background: var(--night); color: var(--nf-ink); }
.nf-anchor { position: absolute; left: 0; top: 100svh; width: 1px; height: 1px; }
.n-sunset { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: linear-gradient(var(--paper-golden), #C9A08E 40%, #5A4A48); }
.n-sunset::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1; background: linear-gradient(var(--paper-golden), rgba(236, 214, 176, 0)); }
.n-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: radial-gradient(120% 70% at 50% 76%, #0E171C, var(--night) 60%); }
.bar { position: absolute; left: 0; right: 0; height: 4.2%; background: var(--bar); z-index: 2; }
.bar-t { top: 0; transform-origin: top; }
.bar-b { bottom: 0; transform-origin: bottom; }
.card { position: absolute; z-index: 3; left: 0; right: 0; top: 25%; display: flex; flex-direction: column; align-items: center; padding: 0 var(--m); }
.nf-logo { width: clamp(300px, 50vw, 960px); height: auto; }
.soon { margin-top: 34px; font: 700 clamp(.875rem, .7rem + .3vw, 1.125rem)/1 var(--f-soon); letter-spacing: .52em; padding-left: .52em; color: var(--nf-muted); }
.mint { display: block; width: 72px; height: 2px; margin-top: 20px; background: var(--nf-accent); }

/* ---------------------------------------------------------------- final lockup (footer) */
.final { position: relative; z-index: 1; background: radial-gradient(60% 46% at 50% 36%, #2E3532, var(--plate) 70%); color: var(--nb-ink); }
.f-pin { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 0 var(--m) calc(var(--edge) + env(safe-area-inset-bottom)); }
.world-night .final { height: 170vh; background: transparent; }
.world-night .f-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.f-mark { align-self: start; justify-self: center; width: min(36vw, 560px); margin-top: 24svh; }
.lk-final .lk-north, .lk-final .lk-studios { fill: var(--nb-ink); }
.lk-final .lk-star { fill: var(--nb-gold); }
.lk-final .lk-g0 { stop-color: var(--nb-gold-2); }
.lk-final .lk-g1 { stop-color: var(--nb-gold); }
.f-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 28px; font: 500 var(--fine)/1.35 var(--f-text); letter-spacing: .01em; color: var(--nb-ink); }
.f-row li { display: flex; align-items: center; min-height: 44px; }
.f-row a { text-decoration: none; }
.f-town, .f-copy { color: var(--nf-dim); }
.f-row li.f-copy { display: block; line-height: 44px; }
.f-calm { min-height: 44px; font: 500 var(--fine)/1.35 var(--f-text); color: var(--nb-ink); background: linear-gradient(currentColor, currentColor) 0 74% / 100% 1px no-repeat; }
.f-calm[aria-pressed="true"]::after { content: " (on)"; }

/* ---------------------------------------------------------------- privacy, 404 */
.page-doc .f-pin { min-height: 0; padding-top: 72px; grid-template-rows: auto auto; row-gap: 56px; }
.page-doc .f-mark { margin-top: 0; width: min(240px, 60vw); }
.doc { max-width: 62ch; margin: 0 auto; padding: 170px var(--m) 140px; min-height: 70vh; }
.doc-h1 { margin-bottom: 16px; }
.doc-date { font: 500 var(--fine)/1.35 var(--f-text); color: var(--ink-2); margin-bottom: 44px; }
.doc-h { font-family: var(--f-display); font-stretch: 80%; font-weight: 320; font-size: 1.5rem; line-height: 1.2; margin: 34px 0 8px; }
.doc .body { font-size: 1rem; }
.doc a { text-decoration: none; }
.page-doc .c-run { display: none; }

/* ---------------------------------------------------------------- tablet: plates as printed spreads */
@media (max-width: 1023px) {
  .c-town { display: none; }
  .plate { --ph: min(430px, calc((100vw - 80px - 26px) / 2.06)); --pt: min(620px, 70vw); }
  .pl-fig { flex-wrap: wrap; }
  .f-wide .pf-phone { display: block; }
  .f-phonefirst .pf-desk { height: calc(var(--pt) * .46); }
  .pl-b { grid-template-columns: 1fr; }
  .pl-labels, .pl-link, .pl-note { grid-column: 1; grid-row: auto; }
  .how { grid-column: 1 / -1; grid-row: auto; margin-top: 60px; }
  .co-h, .co-links, .co-small { grid-column: 1 / -1; }
  .fw-h { grid-column: 1 / -1; }
  .fw-side { grid-column: 1 / -1; margin-top: 36px; }
  .ct-intro { grid-column: 1 / -1; }
  .cover-xl { grid-column: 1 / -1; font-size: min(21vw, 26svh); }
  .cover-cont { grid-column: 1 / span 8; margin-top: 18px; }
  .cover-h { align-items: start; bottom: max(160px, 22svh); }
}
@media (max-width: 1023px) and (min-width: 600px) {
  .pf-desk { height: auto; width: 100%; }
  .pl-fig { width: 100%; }
  .f-pair .pf-phone, .f-reflow .pf-phone, .f-wide .pf-phone { height: auto; width: 34%; }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 599px) {
  .c-nav, .c-mail, .c-run, .c-town { display: none; }
  .c-menu { display: inline-flex; }
  .c-menu .sun-ind { width: 48px; height: 18px; }
  .c-lockup { width: 78px; top: var(--edge); }
  .cover { min-height: 560px; }
  .cover-h { left: var(--m); right: var(--m); bottom: auto; top: 45svh; display: block; container-type: inline-size; }
  .cover-xl { font-size: 31cqi; line-height: .8; }
  .cover-xl .xw { display: block; }
  .cover-cont { display: block; margin-top: 22px; font-size: 1.625rem; max-width: 12em; }
  .doors { left: var(--m); right: var(--m); width: auto; bottom: calc(24px + env(safe-area-inset-bottom)); }
  .door { min-height: 48px; grid-template-columns: 34px 1fr auto; }
  .foreword { min-height: 0; padding: 104px var(--m) 96px; display: block; }
  .fw-grid { display: block; }
  .fw-side { margin-top: 30px; }
  .contents-page { min-height: 0; padding: 96px var(--m) 52px; display: block; container-type: inline-size; }
  .ct-intro { margin-top: 18px; }
  .names { margin-top: 34px; font-size: 9.4cqi; line-height: 1.06; }
  .nm sup { font-size: .6875rem; margin-right: .25em; }
  .plates { padding: 0 0 96px; }
  .track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); gap: 14px; padding: 26px var(--m) 8px; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .plate { flex: 0 0 84vw; justify-items: start; scroll-snap-align: start; row-gap: 14px; align-content: start; }
  .pl-a { display: block; }
  .pl-no { min-width: 0; margin-bottom: 8px; }
  .pl-of { display: inline; }
  .pl-name { font-size: 1.75rem; min-height: 2.04em; text-wrap: balance; }
  .pl-kind { margin: 8px 0 0; text-align: left; }
  .pl-fig { padding: 18px 0; width: 100%; justify-content: flex-start; }
  .pf-desk, .pf-chap { display: none; }
  .pf-phone, .f-tall .pf-phone, .f-phonefirst .pf-phone, .f-wide .pf-phone { display: block; width: 100%; height: auto; }
  .cm i:nth-child(1), .cm i:nth-child(3) { left: -14px; }
  .cm i:nth-child(2), .cm i:nth-child(4) { right: -14px; }
  .cm i:nth-child(1), .cm i:nth-child(2) { top: -16px; }
  .cm i:nth-child(3), .cm i:nth-child(4) { bottom: -16px; }
  .cm i { width: 14px; height: 16px; }
  .cm i::before { width: 10px; }
  .cm i::after { height: 10px; }
  .pl-note { font-size: 1rem; }
  .contact { padding-top: 104px; }
  .co-grid { display: block; container-type: inline-size; }
  .co-h { margin-top: 22px; }
  .co-sub { margin-top: 18px; }
  .co-links { margin-top: 34px; gap: 14px; }
  .big { white-space: normal; }
  .big-u { display: none; }
  .big-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
  .co-h { text-wrap: pretty; max-width: none; }
  .big:first-child { font-size: 10.6cqi; }
  .big:last-child { font-size: 15cqi; }
  .co-small { margin-top: 56px; }
  .after-dark { padding: 120px 0 64px; container-type: inline-size; }
  .after-dark .xw { display: block; }
  .after-dark { font-size: 31cqi; }
  .nf-logo { width: min(86vw, 340px); }
  .card { top: 36%; }
  .soon { margin-top: 22px; letter-spacing: .42em; padding-left: .42em; }
  .final { padding-top: 0; }
  .f-mark { width: 72vw; margin-top: 22svh; }
  .f-row { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .page-doc .doc { padding-top: 120px; }
}
@media (max-width: 599px) and (max-height: 640px) {
  .cover-h { top: 42svh; }
  .cover-xl { font-size: 27cqi; }
  .cover-cont { font-size: 1.3125rem; margin-top: 12px; }
  .door { min-height: 44px; }
  .doors { bottom: 14px; }
}

/* ================================================================ motion (desktop and phone) */
.motion.ready [data-press] { will-change: transform; }
.motion.ready .cover-h .xw, .motion.ready .cover-cont { display: inline-block; }
@media (max-width: 599px) { .motion.ready .cover-h .xw { display: block; } .motion.ready .cover-cont { display: block; } }
.motion.ready .cover-xl { overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.motion.ready.entering .cover-xl .xw { transform: translateY(135%); }
.motion.ready.entering .cover-cont, .motion.ready.entering .doors { opacity: 0; transform: translateY(14px); }
.motion.ready.entering .cover-poster { opacity: 0; }
.motion.ready .cover-xl .xw { transition: transform 1.1s var(--ease-press); }
.motion.ready .cover-xl .xw + .xw { transition-delay: .08s; }
.motion.ready .cover-cont { transition: opacity .9s var(--ease-out) .35s, transform .9s var(--ease-press) .35s; }
.motion.ready .doors { transition: opacity .7s var(--ease-out) .6s, transform .7s var(--ease-press) .6s; }
.motion.ready.entering-corners .corners > * { opacity: 0; }
.motion.ready .corners > * { transition: transform .45s var(--ease-press), opacity .5s var(--ease-out); }

/* line rise (in-house splitter) */
.ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.ln-i { display: inline-block; will-change: transform; transform: translateY(106%); transition: transform 1s var(--ease-press); transition-delay: calc(var(--i, 0) * 90ms); }
.split-in .ln-i { transform: none; }
.motion.ready [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-press); }
.motion.ready [data-rise].in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- the plate stage (desktop, motion) */
.stage-on .plates { padding: 0; height: var(--plates-h, 600vh); }
.stage-on .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage-on .track { position: absolute; inset: 0; display: block; }
.stage-on .plate { position: absolute; inset: 0; padding: 74px var(--m) 70px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; row-gap: 18px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.stage-on .plate.is-cur { pointer-events: auto; }
.stage-on .plate { --ph: min(600px, 43.1vw, calc(100svh - 312px)); --pt: min(760px, calc(100svh - 150px)); }
.stage-on .pl-a, .stage-on .pl-b { will-change: transform, opacity; }
.stage-on .pl-fig { padding: 0; }
.stage-on .f-tall, .stage-on .f-phonefirst { grid-template-columns: auto minmax(0, 360px); column-gap: 64px; align-items: end; justify-content: center; align-content: center; }
.stage-on .f-tall .pl-fig, .stage-on .f-phonefirst .pl-fig { grid-row: 1 / span 2; grid-column: 1; }
.stage-on .f-tall .pl-a, .stage-on .f-phonefirst .pl-a { grid-column: 2; grid-row: 1; display: grid; gap: 14px; align-self: end; }
.stage-on .f-tall .pl-b, .stage-on .f-phonefirst .pl-b { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr; gap: 16px; align-self: end; }
.stage-on .f-tall .pl-kind, .stage-on .f-phonefirst .pl-kind { margin: 0; text-align: left; }
.stage-on .f-tall .pl-note, .stage-on .f-phonefirst .pl-note, .stage-on .f-tall .pl-labels, .stage-on .f-phonefirst .pl-labels, .stage-on .f-tall .pl-link, .stage-on .f-phonefirst .pl-link { grid-column: 1; grid-row: auto; }
.stage-on .f-phonefirst .pf-desk { height: calc(var(--pt) * .5); }
.stage-on .f-wide .pf-desk { height: min(700px, 48.6vw, calc(100svh - 290px)); }
.stage-on .folio { display: flex; position: absolute; left: 50%; bottom: calc(var(--edge) - 13px); transform: translateX(-50%); z-index: 4; }
.fo-list { display: flex; gap: 4px; font: 500 var(--fine)/1 var(--f-text); font-variant-numeric: tabular-nums; }
.fo-a { display: grid; place-items: center; width: 34px; height: 44px; text-decoration: none; color: var(--ink-2); }
.fo-a.is-on { color: var(--ink); }
.fo-bar { position: absolute; left: 9px; bottom: 9px; width: 16px; height: 1px; background: var(--ink); transform: translateX(var(--fx, 0px)); transition: transform .5s var(--ease-out); }
.stage-on .plate .cm i::before, .stage-on .plate .cm i::after { transform: scale(0); }
.stage-on .plate.reg .cm i::before { transform: scaleX(1); }
.stage-on .plate.reg .cm i::after { transform: scaleY(1); }
.stage-on .plate.reg .cm i:nth-child(2)::before, .stage-on .plate.reg .cm i:nth-child(2)::after { transition-delay: .04s; }
.stage-on .plate.reg .cm i:nth-child(3)::before, .stage-on .plate.reg .cm i:nth-child(3)::after { transition-delay: .08s; }
.stage-on .plate.reg .cm i:nth-child(4)::before, .stage-on .plate.reg .cm i:nth-child(4)::after { transition-delay: .12s; }
.world-day.stage-on .pf::before, .world-day.stage-on .pf::after { display: none; }
/* the portal: plate 01's page opened at full width, 1:1 with its pixels */
.portal { position: absolute; left: 0; top: 0; z-index: 5; width: min(100vw, var(--portal-max, 2880px)); aspect-ratio: 1440 / 900; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; }
.portal picture, .portal img { width: 100%; height: 100%; }
@media (min-resolution: 1.5dppx) { :root { --portal-max: 1920px; } }
@media (min-resolution: 2dppx) { :root { --portal-max: 1440px; } }
/* reflow: the desktop frame narrows (outer scaleX, inner counter-scale) while the phone page settles in bands */
.stage-on .f-reflow .pf-phone { display: none; }
.stage-on .f-reflow .pl-fig { gap: 0; }
.rf-clip { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.rf-inner { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.stage-on .f-reflow .pf-desk > picture { position: absolute; inset: 0; }
.bands { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--ph) * 1170 / 2532); transform: translateX(-50%); }
.band { position: absolute; left: 0; right: 0; overflow: hidden; opacity: 0; will-change: opacity, transform; }
.band img { position: absolute; left: 0; width: 100%; height: auto; max-width: none; }
.stage-on .f-reflow .pf-desk .cm { position: absolute; inset: 0; will-change: transform; }
.stage-on .f-reflow .pf-desk .cm i:nth-child(odd) { transform: translateX(var(--dx, 0px)); }
.stage-on .f-reflow .pf-desk .cm i:nth-child(even) { transform: translateX(calc(-1 * var(--dx, 0px))); }
.stage-on .pl-morph { display: block; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font: 500 var(--fine)/1 var(--f-text); color: var(--ink-2); width: 8em; text-align: center; }
.pl-morph span { position: absolute; left: 0; right: 0; }
.mo-p { opacity: 0; }

/* ---------------------------------------------------------------- contact pointer moment */
.world-day .ls { display: block; }

/* ---------------------------------------------------------------- the night, live */
.world-night .night { background: transparent; height: 270vh; }
.world-night .n-sunset { display: none; }
.world-night .n-stage { position: sticky; top: 0; background: none; }
.world-night .night-poster { display: none; }
.world-night .nf-anchor { top: calc((270vh - 100vh) * .66); }
.world-night .final { background: transparent; }
@media (max-width: 599px) { .world-night .night { height: 220svh; } .world-night .nf-anchor { top: calc(120svh * .66); } .world-night .final { height: 150svh; } }
.world-night .bar-t, .world-night .bar-b { transform: scaleY(0); transition: transform .7s var(--ease-bars); }
.world-night .nf-logo { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease-title), transform .4s var(--ease-title); }
.world-night .soon { opacity: 0; transition: opacity .4s var(--ease-title); }
.world-night .mint { transform: scaleX(0); transition: transform .4s var(--ease-press); }
.world-night .card-in .bar-t, .world-night .card-in .bar-b { transform: none; }
.world-night .card-in .nf-logo { opacity: 1; transform: none; transition: opacity 1.4s var(--ease-title) .25s, transform 1.4s var(--ease-title) .25s; }
.world-night .card-in .soon { opacity: 1; transition: opacity 1s var(--ease-title) 1.05s; }
.world-night .card-in .mint { transform: none; transition: transform .6s var(--ease-press) 1.45s; }
.world-night .card-in .soon-t { animation: breath 1.3s var(--ease-breath) 2.45s infinite alternate; display: inline-block; }
.calm-view .card-in .soon-t { animation: none; }
@keyframes breath { from { opacity: 1; } to { opacity: .62; } }
.world-night .f-mark { opacity: var(--lk-o, 0); }
.world-night .final .lk-north, .world-night .final .lk-studios { transform: translateY(calc((1 - var(--lk-r, 0)) * 24px)); }
.world-night .f-row { opacity: var(--row-o, 0); transition: opacity .6s var(--ease-out); }
.night-hide .corners > * { opacity: 0; pointer-events: none; }

/* the door's time-lapse: the content fades and only the clock travels */
main, .corners { transition: opacity .35s var(--ease-out); }
.lapse main, .lapse .corners { opacity: 0; }

/* still mode (posters rendered from the shader): only the canvas */
.still main, .still .corners, .still .final, .still .skip { visibility: hidden; }
.still .world { opacity: 1; transition: none; }
.still body { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .calm *, .calm *::before, .calm *::after { transition-duration: 0s !important; animation: none !important; }
}

/* Concept disclaimer (Coleton, 2026-10-29): a plain note that every site shown is a Northbound-built concept, not the business's actual website */
.ct-disclaimer { grid-column: 8 / span 5; max-width: 32em; margin-top: -28px; padding-top: 16px; border-top: 1px solid var(--rule); font: 500 var(--fine)/1.6 var(--f-text); color: var(--ink-2); }
.ct-disclaimer strong { color: var(--ink); font-weight: 600; }
.f-disc { margin-top: 12px; max-width: none; font: 500 var(--fine)/1.5 var(--f-text); color: var(--nb-ink); opacity: .72; }
@media (max-width: 599px) { .ct-disclaimer { margin-top: 22px; } }