/* Source Serif 4 and Source Sans 3, served with the site (SIL Open Font License; see fonts/) */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2-variations"), url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2-variations"), url("fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations"), url("fonts/source-sans-3-latin-wght-italic.woff2") format("woff2"); }
[hidden] { display: none !important; }
.sprite { position: absolute; }
.foot-logo { height: 30px; width: auto; }
/* Standard Practise, told as one scroll. The page is a few scenes, each held in place while the scroll plays it.
   One drawing carries the story: two lines with a gap between them, the gap closing, one line running on,
   and that line opening onto the first product. The star's line under the bar marks how far you have read.
   Without scripts, with motion switched off, or in a very short window, every scene is laid out whole and still. */
/* Standard Practise, told as one scroll. The page is a few scenes, each held in place while the scroll plays it.
   One drawing carries the story: two lines with a gap between them, the gap closing, one line running on,
   and that line opening onto the first product. The star's line under the bar marks how far you have read.
   Without scripts, with motion switched off, or in a very short window, every scene is laid out whole and still. */
:root {
  --night: #071022; --navy: #0c1a38; --paper: #fbfaf7; --white: #ffffff;
  --ink: #16202e; --ink-2: #55657a; --ink-3: #687382;
  --line: rgba(22, 32, 46, 0.10); --line-2: rgba(22, 32, 46, 0.18);
  --accent: #21509b; --accent-on: #9dbcf0;
  --on-1: #fbfaf7; --on-2: rgba(251, 250, 247, 0.76); --on-3: rgba(251, 250, 247, 0.58); --on-line: rgba(251, 250, 247, 0.18);
  --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bar: 64px; --pad: 56px; --gap: 128px; --round: 28px;
  /* the bar and the line take their colours from the scene beneath them */
  --bar-bg: var(--paper); --bar-fg: var(--ink); --bar-fg2: var(--ink-2); --bar-btn: var(--navy); --bar-btn-fg: #fff;
  --rule: var(--line-2); --star: var(--accent); --star-edge: var(--paper);
}
:root[data-tone="dark"] {
  --bar-bg: var(--night); --bar-fg: var(--on-1); --bar-fg2: var(--on-2); --bar-btn: var(--paper); --bar-btn-fg: var(--navy);
  --rule: var(--on-line); --star: var(--accent-on); --star-edge: var(--night);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 29px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; overflow-x: clip; }
img { display: block; max-width: none; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; }
::selection { background: rgba(33, 80, 155, 0.2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, [data-tone="dark"] .bar :focus-visible { outline-color: var(--on-1); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 70; padding: 8px 14px; background: var(--navy); color: #fff; border-radius: 8px; font-size: 15px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; transition: background 240ms var(--ease), color 240ms var(--ease); }
.btn:hover { background: #142a57; }
.dark { color: var(--on-1); }
section[id], div[id="product"] { scroll-margin-top: var(--bar); }

/* ---------- The bar ---------- */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 50; background: var(--bar-bg); transition: background 320ms var(--ease); }
.bar-in { display: flex; align-items: center; height: var(--bar); }
.brand { position: relative; display: block; }
.brand img { height: 30px; width: auto; transition: opacity 320ms var(--ease); }
.brand .lt { position: absolute; left: 0; top: 0; opacity: 0; }
[data-tone="dark"] .brand .ink-logo { opacity: 0; } [data-tone="dark"] .brand .lt { opacity: 1; }
.bar nav { margin-left: auto; display: flex; gap: 30px; font-size: 15.5px; color: var(--bar-fg2); transition: color 320ms var(--ease); }
.bar nav a { padding: 6px 0; transition: color 200ms var(--ease); }
.bar nav a:hover, .bar nav a.on { color: var(--bar-fg); }
.bar .btn { margin-left: 34px; height: 38px; padding: 0 17px; font-size: 15px; background: var(--bar-btn); color: var(--bar-btn-fg); }
.bar .btn:hover { background: var(--bar-btn); opacity: 0.9; }
.menu { display: none; }
.drawer { background: var(--bar-bg); border-top: 1px solid var(--rule); color: var(--bar-fg); }
.drawer a { display: block; padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--rule); } .drawer a:last-child { border-bottom: 0; }

/* One line for the whole page. Without scripts it is simply the rule under the headline. */
.datum { position: relative; height: 17px; }
.datum .l { position: absolute; top: 8px; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line-2); }
.datum .star { position: absolute; left: -2px; top: 0; width: 17px; height: 17px; fill: var(--accent); overflow: visible; stroke: var(--paper); stroke-width: 2.6; paint-order: stroke; }
.scrollline { display: none; position: fixed; left: 0; right: 0; top: 0; height: 17px; z-index: 51; pointer-events: none; will-change: transform; }
.lined .scrollline { display: block; }
.lined .open .datum > .l, .lined .open .datum > .star { visibility: hidden; }
.scrollline .l { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--rule); transform-origin: left center; transition: background 320ms var(--ease); }
.scrollline .rt { position: absolute; top: 4px; width: 1px; height: 9px; background: var(--bar-fg2); opacity: 0; transition: opacity 320ms var(--ease), background 320ms var(--ease); }
.scrollline.docked .rt { opacity: 0.6; }
.scrollline .s { position: absolute; left: 0; top: 0; width: 17px; height: 17px; will-change: transform; }
.scrollline svg { display: block; width: 17px; height: 17px; overflow: visible; fill: var(--star); stroke: var(--star-edge); stroke-width: 2.6; paint-order: stroke; transition: fill 320ms var(--ease), stroke 320ms var(--ease); }

/* ---------- Scene one: the opening ---------- */
.open { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--bar); }
.hero-art { position: absolute; left: 50%; top: 8px; z-index: -1; width: min(1180px, 100vw); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.hero-art * { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; }
.hero-art .a1 { stroke: rgba(22, 32, 46, 0.075); }
.hero-art .a2 { stroke: rgba(22, 32, 46, 0.05); }
.hero-art .ring { stroke: rgba(22, 32, 46, 0.09); stroke-dasharray: 0.0022 0.0098; }
.hero-art .run { display: none; stroke: rgba(33, 80, 155, 0.28); stroke-width: 1.25; stroke-linecap: round; }
.open-in { min-height: calc(84vh - var(--bar)); min-height: calc(84svh - var(--bar)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 48px; padding-bottom: 64px; }
.motto { font-family: var(--serif); font-size: 22px; line-height: 30px; color: var(--ink-2); text-wrap: balance; }
.open h1 { margin-top: 22px; font-size: clamp(46px, calc((100vw - 2 * var(--pad)) / 11.3), 112px); line-height: 1.02; letter-spacing: -0.036em; font-weight: 360; }
.open .datum { align-self: stretch; margin-top: 40px; }
.open .lede { margin-top: 38px; max-width: 34em; font-size: 20px; line-height: 31px; color: var(--ink-2); text-wrap: pretty; }
.cta { margin-top: 30px; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes run-back { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes mark { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .motto, .js .open h1, .js .open .lede, .js .open .cta { animation: arrive 760ms var(--ease) both; }
  .js .open h1 { animation-delay: 70ms; } .js .open .lede { animation-delay: 260ms; } .js .open .cta { animation-delay: 340ms; }
  .js .scrollline .l { animation: draw 1300ms var(--ease) 160ms both; }
  .js .scrollline svg { animation: mark 800ms var(--ease) 380ms both; }
  .js .hero-art .a1, .js .hero-art .a2 { stroke-dasharray: 1; animation: trace 2600ms var(--ease) 400ms both; } .js .hero-art .a2 { animation-duration: 3200ms; animation-delay: 700ms; }
  .js .hero-art .ring { transform-box: view-box; transform-origin: 0 0; animation: spin 220s linear infinite, appear 2000ms var(--ease) 1800ms both; }
  .js .hero-art .run { display: inline; }
  .js .hero-art .r1 { stroke-dasharray: 0.07 0.93; animation: run 20s linear infinite, appear 1400ms var(--ease) 2600ms both; }
  .js .hero-art .r1b { stroke-dasharray: 0.07 0.93; animation: run 20s linear -10s infinite, appear 1400ms var(--ease) 2600ms both; }
  .js .hero-art .r2 { stroke-dasharray: 0.05 0.95; animation: run-back 28s linear infinite, appear 1400ms var(--ease) 3000ms both; }
  .js .hero-art .r3 { stroke-dasharray: 0.03 0.97; animation: run 46s linear -14s infinite, appear 1400ms var(--ease) 3200ms both; }
  .art-off .hero-art * { animation-play-state: paused !important; }
}

/* ---------- Scene two: the gap, how it closes, and what the line opens onto ---------- */
.sheet { position: relative; isolation: isolate; background: var(--night); color: var(--on-1); padding: var(--gap) 0; overflow: hidden; }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(var(--night), rgba(7, 16, 34, 0) 150px),
  radial-gradient(40% 60% at 72% -10%, rgba(196, 212, 248, 0.10), rgba(110, 146, 220, 0.05) 46%, transparent 76%),
  radial-gradient(76% 80% at 74% -6%, rgba(48, 88, 176, 0.30), transparent 74%); }
.sheet::after, .close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("img/grain.png") 0 0 / 240px 240px; pointer-events: none; }
.field { display: none; }
.words { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.say { font-family: var(--serif); font-size: 46px; line-height: 57px; letter-spacing: -0.02em; max-width: 20em; text-wrap: pretty; }
.fitbox { margin-top: 96px; }
.fitline { font-size: 56px; line-height: 61px; letter-spacing: -0.026em; font-weight: 380; max-width: 16em; }
.fitline .quiet { color: var(--on-3); }
.fitsub { margin-top: 18px; color: var(--on-2); }
.fit-static { display: block; width: 100%; max-width: 660px; height: auto; margin-top: 64px; overflow: visible; }
.steps { display: none; }
.stages { margin-top: 64px; display: grid; row-gap: 44px; }
.stages .when { font-size: 16px; line-height: 22px; color: var(--on-3); margin-bottom: 8px; }
.stages h3 { font-size: 40px; line-height: 46px; letter-spacing: -0.02em; max-width: 12em; }
.stages .t { margin-top: 16px; color: var(--on-2); max-width: 26em; }
.ln { fill: none; stroke: rgba(251, 250, 247, 0.85); stroke-width: 2; }
.tk { fill: none; stroke: rgba(251, 250, 247, 0.65); stroke-width: 1.25; }
.gm { fill: none; stroke: rgba(251, 250, 247, 0.7); stroke-width: 1; }
.bl { fill: none; stroke: var(--accent-on); stroke-width: 2.5; }
.st { fill: var(--accent-on); }
.sheet svg text { font-family: var(--sans); font-size: 17px; fill: rgba(251, 250, 247, 0.82); }
.sheet svg text.hi { fill: var(--accent-on); font-size: 18px; font-weight: 600; }
.skipscene, .cue { display: none; }

.prod { margin-top: var(--gap); }
.pr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23em); column-gap: 64px; align-items: end; }
.pr-label { font-size: 16px; line-height: 22px; color: var(--on-3); margin-bottom: 14px; }
.pr-head h2 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 370; }
.pr-head p:last-child { color: var(--on-2); padding-bottom: 8px; text-wrap: balance; }
.window { position: relative; margin-top: 44px; height: min(58vh, 540px); }
.glass { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; background: var(--paper); clip-path: inset(calc((1 - var(--o, 1)) * 50%) 0 round 16px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pr-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--ink); opacity: var(--pl, 1); transform: translateY(calc((1 - var(--pl, 1)) * 12px)); }
.pr-kind { font-size: 16px; line-height: 22px; color: var(--ink-3); }
.pr-star { width: 18px; height: 18px; margin: 22px 0 20px; fill: var(--accent); }
.pr-soon { font-family: var(--serif); font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: -0.034em; font-weight: 360; }
.pr-by { margin-top: 22px; font-size: 16px; line-height: 22px; color: var(--ink-2); }

/* ---------- The vision ---------- */
.vision { position: relative; z-index: 2; margin-top: calc(var(--round) * -1); border-radius: var(--round) var(--round) 0 0; background: var(--paper); }
.vi-in { padding-top: var(--gap); padding-bottom: 72px; text-align: center; }
.vi-label { font-size: 16px; line-height: 22px; color: var(--ink-3); }
.vi-text { margin: 22px auto 0; max-width: 18.5em; font-family: var(--serif); font-size: clamp(32px, 4.4vw, 62px); line-height: 1.12; letter-spacing: -0.026em; font-weight: 360; text-wrap: balance; }

/* ---------- Scene three: what every product is held to ---------- */
.rules { position: relative; z-index: 2; background: var(--paper); }
.ru-in { padding-top: var(--gap); }
.ru-title { font-size: 28px; line-height: 34px; letter-spacing: -0.012em; color: var(--ink-2); }
.ru-head .ld-label { margin-bottom: 14px; }
.count, .ru-index { display: none; }
.held { margin-top: 44px; border-bottom: 1px solid var(--line-2); }
.held li { padding: 30px 0 34px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 24px; }
.held li > * { grid-column: 2; }
.ru-n { grid-column: 1 !important; grid-row: 1 / span 2; font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.2; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.held h3 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -0.024em; font-weight: 380; max-width: 18em; }
.held p { margin-top: 12px; font-size: 19px; line-height: 30px; color: var(--ink-2); max-width: 30em; }
.conf { margin-top: 28px; font-size: 16px; line-height: 25px; color: var(--ink-3); }

/* ---------- Leadership: three ruled columns, initials drawn in a circle ---------- */
.leaders { position: relative; z-index: 2; background: var(--paper); padding: var(--gap) 0 calc(var(--gap) + var(--round)); }
.ld-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25em); column-gap: 64px; align-items: end; }
.ld-label, .ld-role { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ld-label { color: var(--ink-3); }
.ld-head h2 { margin-top: 18px; font-size: 52px; line-height: 58px; letter-spacing: -0.024em; }
.ld-head h2 em, .member h3 em { font-style: italic; }
.ld-sub { color: var(--ink-2); padding-bottom: 6px; }
.team { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); transform-origin: left center; transform: scaleX(var(--tr, 1)); }
.member { position: relative; display: flex; flex-direction: column; padding: 44px 40px 6px; min-width: 0; }
.member:first-child { padding-left: 0; } .member:last-child { padding-right: 0; }
.member + .member::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2); transform-origin: center top; transform: scaleY(var(--tr, 1)); }
.mono { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.mono svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mono circle { fill: none; stroke: var(--accent); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mono span { font-family: var(--serif); font-size: 23px; line-height: 1; letter-spacing: 0.04em; color: var(--ink); }
.ld-role { margin-top: 28px; color: var(--accent); }
.member h3 { margin-top: 10px; font-size: 36px; line-height: 42px; letter-spacing: -0.02em; }
.ld-bio { margin-top: 16px; font-size: 16.5px; line-height: 27px; color: var(--ink-2); }
.ld-tags { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.ld-tags li { font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px 5px; }
.ld-line { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line-2); font-family: var(--serif); font-size: 24px; line-height: 34px; letter-spacing: -0.01em; color: var(--ink); }

/* ---------- Scene four: the close, and the foot ---------- */
.close { position: relative; z-index: 3; margin-top: calc(var(--round) * -1); border-radius: var(--round) var(--round) 0 0; background: var(--night); color: var(--on-1); isolation: isolate; overflow: hidden; }
.close-in { max-width: 860px; text-align: center; padding-top: calc(var(--gap) + 8px); padding-bottom: var(--gap); }
.close h2 { font-size: clamp(48px, 7vw, 100px); line-height: 1; letter-spacing: -0.034em; font-weight: 360; }
.close .lede { margin: 26px auto 0; font-size: 20px; line-height: 31px; color: var(--on-2); max-width: 24em; text-wrap: balance; }
.brief { max-width: 560px; margin: 64px auto 0; text-align: left; }
.brief .f { position: relative; margin-bottom: 26px; }
.brief label { display: block; font-size: 15px; line-height: 20px; color: var(--on-3); }
.brief input, .brief textarea { display: block; width: 100%; font: inherit; font-size: 18px; line-height: 28px; color: var(--on-1); background: transparent; border: 0; border-bottom: 1px solid var(--on-line); border-radius: 0; padding: 6px 0 10px; }
.brief textarea { resize: none; min-height: 76px; }
.brief input:focus, .brief textarea:focus { outline: none; border-bottom-color: var(--accent-on); }
.brief .send { margin-top: 12px; text-align: center; }
.brief .btn { background: var(--paper); color: var(--navy); }
.brief .btn:hover { background: #fff; }
.brief .note { margin-top: 14px; font-size: 15px; line-height: 21px; color: var(--on-2); text-align: center; }
.brief .alt { margin-top: 18px; font-size: 15px; line-height: 22px; color: var(--on-3); text-align: center; }
.brief .alt a { color: var(--on-1); border-bottom: 1px solid var(--on-line); padding-bottom: 1px; }
.brief .alt a:hover { border-bottom-color: var(--on-1); }
.foot-in { display: flex; justify-content: space-between; align-items: flex-end; column-gap: 40px; padding: 36px 0 30px; border-top: 1px solid var(--on-line); }
.foot .tag { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 26px; color: var(--on-2); }
.foot nav { display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 4px; font-size: 15.5px; line-height: 30px; color: var(--on-2); }
.foot nav a:hover { color: var(--on-1); }
.legal { padding-bottom: 34px; font-size: 14px; line-height: 20px; color: var(--on-3); }

/* ================= The scroll: scenes held in place and played by it ================= */
.live .theatre .track { height: calc(100vh - var(--bar) + 470vh); height: calc(100svh - var(--bar) + 470svh); background: linear-gradient(rgba(7, 16, 34, 0) calc(100vh - var(--bar)), var(--night) 0); background: linear-gradient(rgba(7, 16, 34, 0) calc(100svh - var(--bar)), var(--night) 0); }
.live .theatre .pin { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); }
.live .sheet { position: absolute; inset: 0; padding: 0; clip-path: inset(var(--m, 0px) var(--m, 0px) 0 var(--m, 0px) round var(--r, 0px) var(--r, 0px) 0 0); }
.live .field { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.live .fit-static { display: none; }
.live .words { position: absolute; left: var(--wl, 56px); top: var(--wt, 0px); width: var(--ww, 60%); height: var(--wh, 100%); max-width: none; margin: 0; padding: 0; display: grid; align-items: center; }
.live .words > * { grid-area: 1 / 1; min-width: 0; }
.live .say { font-size: clamp(30px, min(3.4vw, 6vh), 52px); line-height: 1.22; opacity: 0; }
.live .say span { opacity: 0.45; transition: opacity 420ms var(--ease); } .live .say span.lit { opacity: 1; }
.live .fitbox { margin-top: 0; opacity: 0; }
.live .fitline { font-size: clamp(32px, min(4.2vw, 7.4vh), 64px); line-height: 1.07; }
.live .stagebox { opacity: 0; max-width: var(--sw, 480px); }
.live .steps { display: flex; gap: 6px; margin: 0 0 18px -10px; }
.live .steps button { all: unset; box-sizing: border-box; cursor: pointer; padding: 4px 10px; border-radius: 6px; font-size: 16px; line-height: 24px; color: rgba(251, 250, 247, 0.62); transition: color 300ms var(--ease); }
.live .steps button:focus-visible { outline: 2px solid var(--on-1); outline-offset: 0; }
.live .steps li.on button { color: var(--on-1); font-weight: 500; }
.live .steps i { font-style: normal; font-family: var(--serif); margin-right: 8px; }
.live .stages { margin-top: 0; row-gap: 0; }
.live .stages article { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.live .stages article.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 360ms var(--ease) 140ms, transform 460ms var(--ease) 140ms; }
.live .stages .when { display: none; }
.live .stages h3 { font-size: clamp(27px, min(3vw, 5.4vh), 44px); line-height: 1.14; }
.live .prod { position: absolute; inset: 0; margin: 0 auto; opacity: 0; pointer-events: none; display: flex; flex-direction: column; padding-top: clamp(26px, 6vh, 60px); padding-bottom: clamp(52px, 8vh, 72px); }
.live .pr-head { opacity: var(--hd, 1); transform: translateY(calc((1 - var(--hd, 1)) * 14px)); }
.live .window { flex: 1 1 auto; min-height: 0; height: auto; margin-top: clamp(22px, 4.4vh, 44px); }
.live .glass { transform: scale(calc(0.97 + 0.03 * var(--o, 1))); }
.live .skipscene { display: block; position: absolute; right: var(--pad); bottom: 16px; z-index: 5; font-size: 15px; line-height: 24px; color: var(--on-3); padding: 2px 0; }
.live .skipscene:hover { color: var(--on-1); }
.live .cue { display: block; position: absolute; left: 0; right: 0; top: 30px; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; color: var(--on-3); pointer-events: none; }
.live .member { opacity: var(--in, 1); }
.live .member > :not(.mono) { transform: translateY(calc((1 - var(--in, 1)) * 14px)); }
.live .mono circle { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--in, 1)); }
.live .vi-text span { opacity: 0.54; transition: opacity 520ms var(--ease); } .live .vi-text span.lit { opacity: 1; }

.live .rules:not(.flow) .track { height: calc(100vh - var(--bar) + 190vh); height: calc(100svh - var(--bar) + 190svh); }
.live .rules:not(.flow) .pin { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar)); }
.live .rules:not(.flow) .ru-in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(40px, 6vw, 112px); padding-top: clamp(30px, 8vh, 84px); padding-bottom: clamp(40px, 8vh, 72px); }
.live .rules:not(.flow) .ru-head { align-self: start; }
.live .rules:not(.flow) .ru-title { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.18; color: var(--ink); max-width: 11em; }
.live .rules:not(.flow) .ru-index { display: block; margin-top: clamp(28px, 6vh, 56px); padding: 0; list-style: none; }
.ru-index li { display: flex; gap: 14px; padding: 9px 0 9px 18px; border-left: 2px solid var(--line); font-size: 16px; line-height: 24px; color: var(--ink-3); transition: color 300ms var(--ease), border-color 300ms var(--ease); }
.ru-index li span { font-variant-numeric: tabular-nums; }
.ru-index li.on { color: var(--ink); border-left-color: var(--accent); }
.ru-index li.on span { color: var(--accent); }
.live .rules:not(.flow) .held { margin-top: 0; display: grid; align-self: center; border: 0; }
.live .rules:not(.flow) .held li { grid-area: 1 / 1; display: block; margin: 0; padding: 0; border: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.live .rules:not(.flow) .held li.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 420ms var(--ease) 160ms, transform 520ms var(--ease) 160ms; }
.live .rules:not(.flow) .ru-n { display: flex; align-items: center; gap: 18px; font-size: 32px; margin-bottom: clamp(18px, 3.4vh, 30px); }
.live .rules:not(.flow) .ru-n::after { content: ""; width: 72px; height: 1px; background: var(--accent); opacity: 0.5; }
.live .rules:not(.flow) .held h3 { font-size: clamp(38px, min(4.5vw, 8vh), 68px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 360; max-width: 13em; }
.live .rules:not(.flow) .held p { margin-top: clamp(18px, 3.4vh, 28px); font-size: 21px; line-height: 33px; max-width: 26em; text-wrap: pretty; }
.live .rules:not(.flow) .conf { grid-column: 1 / -1; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.live .rules:not(.flow) .skipscene { color: var(--ink-3); } .live .rules:not(.flow) .skipscene:hover { color: var(--ink); }
.live .rules.flow .skipscene { display: none; }
.live .brief .f::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--on-3); transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease); }
.live .brief.in .f::after { transform: scaleX(1); }
.live .brief .f:nth-child(2)::after { transition-delay: 90ms; } .live .brief .f:nth-child(3)::after { transition-delay: 180ms; } .live .brief .f:nth-child(4)::after { transition-delay: 270ms; }

/* ---------- Narrow windows ---------- */
@media (max-width: 899px) {
  :root { --bar: 58px; --pad: 22px; --gap: 80px; --round: 22px; }
  .bar nav, .bar .btn { display: none; }
  .menu { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; margin-left: auto; height: 40px; padding: 0 2px 0 14px; font-size: 16px; font-weight: 500; color: var(--bar-fg); cursor: pointer; }
  .brand img { height: 26px; }
  .open-in { padding-top: 32px; padding-bottom: 48px; }
  .motto { font-size: 18px; line-height: 25px; }
  .open h1 { font-size: clamp(42px, 12.6vw, 84px); margin-top: 16px; }
  .hero-art { width: 150vw; } .open .datum { margin-top: 28px; } .open .lede { margin-top: 28px; font-size: 18px; line-height: 28px; }
  .say { font-size: 29px; line-height: 38px; }
  .fitbox { margin-top: 64px; } .fitline { font-size: 36px; line-height: 41px; }
  .fit-static { margin-top: 44px; }
  .stages { margin-top: 48px; row-gap: 36px; } .stages h3 { font-size: 29px; line-height: 35px; } .stages .t { font-size: 17px; line-height: 27px; }
  .live .say { font-size: clamp(22px, min(6.9vw, 4.3vh), 34px); font-size: clamp(22px, min(6.9vw, 4.3svh), 34px); line-height: 1.28; }
  .live .fitline { font-size: clamp(27px, min(8.4vw, 5.6vh), 44px); font-size: clamp(27px, min(8.4vw, 5.6svh), 44px); }
  .live .stages h3 { font-size: clamp(24px, min(7vw, 4.4vh), 34px); font-size: clamp(24px, min(7vw, 4.4svh), 34px); }
  .live .stages .t { font-size: 16.5px; line-height: 25px; margin-top: 12px; }
  .live .steps { margin-bottom: 10px; margin-left: -8px; } .live .steps button { font-size: 15px; padding: 4px 8px; }
  .sheet svg text { font-size: 14.5px; } .sheet svg text.hi { font-size: 15px; }
  .pr-head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .live .prod { padding-bottom: 56px; }
  .pr-star { margin: 16px 0 14px; } .pr-by { margin-top: 14px; font-size: 15px; }
  .vi-text { font-size: clamp(28px, 7.4vw, 40px); }
  .ld-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } .ld-head h2 { font-size: 36px; line-height: 42px; }
  .team { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .member, .member:first-child, .member:last-child { padding: 32px 0 30px; }
  .member + .member::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform-origin: left center; transform: scaleX(var(--tr, 1)); }
  .mono { width: 60px; height: 60px; } .mono span { font-size: 20px; } .ld-role { margin-top: 22px; } .member h3 { font-size: 30px; line-height: 36px; } .ld-line { margin-top: 32px; font-size: 20px; line-height: 30px; }
  .ru-title { font-size: 26px; line-height: 32px; color: var(--ink); } .held { margin-top: 28px; } .held li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 24px 0 26px; } .ru-n { font-size: 22px; line-height: 34px; } .held h3 { font-size: 28px; line-height: 34px; } .held p { font-size: 17px; line-height: 27px; }
  .close .lede { font-size: 18px; line-height: 28px; margin-top: 18px; } .brief { margin-top: 44px; }
  .foot-in { flex-direction: column; align-items: flex-start; row-gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- The page that is shown when an address does not exist ---------- */
.nf { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 22px; }
.nf-logo { height: 32px; width: auto; margin: 0 auto 56px; }
.nf h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.024em; font-weight: 380; }
.nf p { margin-top: 18px; color: var(--ink-2); }
.nf .btn { margin-top: 18px; }