@font-face { font-family: "Charakter"; src: url(assets/fonts/AetheryaCharakterNo1-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Charakter"; src: url(assets/fonts/AetheryaCharakterNo1-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }

/* ------------------------------------------------ tokens: the brand's colours and faces, five type steps, one pair of margins */
:root {
  --bg: #f7f6f5;
  --surface: #e9ece8;
  --ink: #0e0d0c;
  --muted: #5a5854;
  --accent: #225946;
  --night: #0d1f19;
  --night-ink: #eef1ed;
  --night-muted: rgba(238, 241, 237, .74);
  --night-accent: #8fd1b4;
  --paper: #fff;
  --dot-b: rgba(14, 107, 78, .9); --dot-a: #86827b; --dot-c: #c9c5bd;
  --serif: "Charakter", Georgia, "Times New Roman", serif;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --t-small: 15px;
  --t-body: clamp(18px, 1vw, 22px);
  --t-state: clamp(26px, 2.5vw, 36px);
  --t-head: clamp(30px, 3.4vw, 64px);
  --t-display: clamp(40px, 5vw, 96px);
  --margin: clamp(16px, 2.2vw, 32px);
  --gap: 160px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-exit: cubic-bezier(.55, .055, .675, .19);
}
@media (max-width: 1023px) { :root { --gap: 96px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; hyphens: none; }
h1 { font-size: var(--t-display); line-height: .98; letter-spacing: -0.03em; }
h2 { font-size: var(--t-head); line-height: 1.04; letter-spacing: -0.02em; }
h3 { font-size: var(--t-body); line-height: 1.35; font-family: var(--sans); font-weight: 500; }
p { text-wrap: pretty; }
p + p { margin-top: .9em; }
.mute { color: var(--muted); }
.small { font-size: var(--t-small); font-family: var(--sans); line-height: 1.45; }
.state { font-size: var(--t-state); line-height: 1.2; letter-spacing: -0.015em; max-width: 34ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::selection { background: var(--night); color: var(--night-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the lockup as a mask, so it takes the text colour on every ground */
.logo { position: relative; display: block; height: 30px; aspect-ratio: 9764 / 2102; }
.logo::before, .logo::after { content: ""; position: absolute; inset: 0; background: currentColor; }
.logo::before { -webkit-mask: url(assets/aetherya-lockup-mark.svg) center / contain no-repeat; mask: url(assets/aetherya-lockup-mark.svg) center / contain no-repeat; transform-origin: 8.1% 39.6%; }
.logo::after { -webkit-mask: url(assets/aetherya-lockup-word.svg) center / contain no-repeat; mask: url(assets/aetherya-lockup-word.svg) center / contain no-repeat; }
.mark { display: inline-flex; color: var(--ink); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .mark:hover { color: var(--accent); } }

/* buttons: one shape, square, flat */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; font: 500 var(--t-small)/1 var(--sans); background: var(--accent); color: var(--night-ink); white-space: nowrap; transition: transform 140ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn.line { --fill: var(--night); background: transparent; color: var(--night); box-shadow: inset 0 0 0 2px var(--night); } /* taste-skill-ignore: a 2px inset keyline is the outlined button's one fill */
.btn.line:hover { color: var(--night-ink); }
.btn.line::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease-in-out); }
.btn.line:hover::before { transform: none; transform-origin: bottom; }
.btn.light { background: var(--night-accent); color: var(--night); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.link { position: relative; color: var(--accent); font-family: var(--sans); font-size: var(--t-small); }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover::after { transform: none; transform-origin: left; } }
.in-text { color: var(--accent); text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .18em; }

/* ------------------------------------------------ the frame: one pair of margins, a 12-column grid */
main { display: block; }
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 24px); }
.block { padding-block: calc(var(--gap) / 2); }
.block + .block { padding-top: calc(var(--gap) / 2); }
.block[id] { scroll-margin-top: 24px; }
.row { align-items: start; }
.row > .lead-col { grid-column: 1 / 6; }
.row > .proof-col { grid-column: 7 / 13; }
@media (max-width: 1023px) { .row > .lead-col, .row > .proof-col { grid-column: 1 / -1; } .row > .proof-col { margin-top: 32px; } }
.lead-col h2 { max-width: 16ch; }
.lead-col p, .proof-col p, .text p { max-width: 58ch; }
.lead-col .link, .lead-col .btns { display: inline-block; margin-top: 20px; }
.lead-col .btns { display: flex; }
.lead-col h2 + p, .lead-col h1 + p { margin-top: 20px; }
.pic { background: var(--surface); }
.pic img, .pic video { width: 100%; height: auto; }
.pic.tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ------------------------------------------------ navigation: wordmark, three links, one action */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 72px; padding-inline: var(--margin); }
.top-nav { display: none; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; }
/* three bars; the drawer's close button folds the same bars into a cross at the same spot, so the icon reads as one that turns */
.bars { position: relative; width: 22px; height: 1px; background: currentColor; transition: transform .45s var(--ease-out); }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .45s var(--ease-out); }
.bars::before { transform: translateY(-6px); }
.bars::after { transform: translateY(6px); transform-origin: right; }
.top .menu-btn:hover .bars::after, .top .menu-btn:focus-visible .bars::after { transform: translateY(6px) scaleX(.6); }
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .top-nav { display: flex; align-items: center; gap: 32px; font: 400 var(--t-small)/1 var(--sans); }
  .top-nav a:not(.btn) { position: relative; transition: color .2s; }
  .top-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
  .top-nav a:not(.btn):hover::after, .top-nav a[aria-current]:not(.btn)::after { transform: none; transform-origin: left; }
  .top-nav a:not(.btn):hover, .top-nav a[aria-current]:not(.btn) { color: var(--accent); }
  .top-nav .btn { height: 40px; padding: 0 18px; }
}
/* the phone menu: a full-screen sheet in the night colour with the pages set large */
.drawer { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: 20px var(--margin) 32px; background: var(--night); color: var(--night-ink); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease-in-out), visibility 0s .6s; }
/* it drops from the top like a blind, then the pages rise into it one after another */
.drawer.open { visibility: visible; clip-path: inset(0); transition: clip-path .7s var(--ease-in-out); }
.drawer-top { display: flex; justify-content: space-between; align-items: center; height: 32px; }
.drawer-top .mark { color: var(--night-ink); }
.close-btn .bars { background: transparent; }
.close-btn .bars::before, .close-btn .bars::after { transform: none; transform-origin: center; }
.drawer.open .close-btn .bars::before { transform: rotate(45deg); transition-delay: .3s; }
.drawer.open .close-btn .bars::after { transform: rotate(-45deg); transition-delay: .3s; }
.close-btn:hover .bars, .close-btn:focus-visible .bars { transform: rotate(90deg); }
.drawer-links { display: grid; justify-items: start; gap: 6px; }
.drawer-links a { font: 400 clamp(34px, 9vw, 44px)/1.15 var(--serif); letter-spacing: -0.02em; opacity: 0; transform: translateY(28px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.drawer.open .drawer-links a { opacity: 1; transform: none; transition-duration: .7s; transition-delay: .28s; }
.drawer.open .drawer-links a:nth-child(2) { transition-delay: .35s; } .drawer.open .drawer-links a:nth-child(3) { transition-delay: .42s; }
.drawer.open .drawer-links a:nth-child(4) { transition-delay: .49s; } .drawer.open .drawer-links a:nth-child(5) { transition-delay: .56s; }
.drawer-links a[aria-current] { color: var(--night-accent); }
/* the same underline sweep as the wide bar: draws in from the left, leaves to the right */
.drawer-links a, .drawer-foot a { position: relative; transition-property: opacity, transform, color; }
.drawer-links a::after, .drawer-foot a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.drawer-foot a::after { bottom: -2px; }
.drawer-links a:hover::after, .drawer-links a:focus-visible::after, .drawer-links a[aria-current]::after,
.drawer-foot a:hover::after, .drawer-foot a:focus-visible::after { transform: none; transform-origin: left; }
.drawer-foot { display: grid; justify-items: start; gap: 8px; font: 400 var(--t-small)/1.4 var(--sans); color: var(--night-muted); }
.drawer-foot a:hover { color: var(--night-ink); }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.open, .drawer-links a, .drawer.open .drawer-links a { transition: none; }
}
.menu-open { overflow: hidden; }

/* ------------------------------------------------ hero: the sentence split by a frame, a reel passing through it */
.hero { height: auto; }
.hero .stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: grid; grid-template-rows: 72px 1fr auto; padding-inline: var(--margin); }
.hero .sentence { grid-row: 2; align-self: center; display: grid; grid-template-columns: 1fr var(--fw) 1fr; align-items: center; column-gap: 24px; }
.hero .half { font-size: clamp(40px, 5vw, 112px); line-height: .98; letter-spacing: -0.03em; white-space: nowrap; }
.hero .half.b { justify-self: end; text-align: right; }
.hero .slot { position: relative; width: var(--fw); height: var(--fh); }
.hero .reel { position: absolute; z-index: 2; left: 50%; top: 40%; width: var(--fw); height: var(--fh); transform: translateX(-50%); }
.hero .reel[style] { transform: none; }
.hero .frame { position: absolute; left: 0; top: 0; width: 100%; margin: 0; transition: opacity .6s var(--ease-out), visibility 0s .6s; }
/* every frame rests in the slot, centred on the sentence; the scroll crossfades between them instead of sliding them through */
.js .hero .frame:not(.on) { opacity: 0; visibility: hidden; }
.js .hero .frame.on { transition: opacity .6s var(--ease-out); }
html:not(.js) .hero .frame:not(.lead) { display: none; }
.hero .frame .box { width: 100%; height: var(--fh); background: var(--surface); overflow: hidden; }
.hero .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero .frame figcaption { margin-top: 12px; font: 400 var(--t-small)/1.45 var(--sans); color: var(--muted); transition: opacity .4s var(--ease-out); }
.hero .support { grid-row: 3; align-self: end; max-width: 44ch; padding-bottom: 32px; }
.hero .support p { max-width: 44ch; }
.hero .support .btns { margin-top: 20px; }
/* the accent pieces (site.js) sit on a block's empty ground, behind nothing and over nothing */
:is(section, footer):has(> .art) { position: relative; isolation: isolate; }
.art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* under the block's content, over its ground */
@media (max-width: 1023px) { .art { display: none; } } /* stacked blocks leave no empty ground to give it */
/* the frame is 16:9 and sized by the shorter of width and height, so a short window does not stack it into the words */
:root { --fw: min(32vw, 56svh); --fh: calc(var(--fw) * .5625); }
@media (min-width: 1024px) {
  .hero .support, .hero .support p { max-width: min(44ch, calc((100vw - 2 * var(--margin) - var(--fw)) / 2 - 40px)); }
  /* the sentence and its support are one group on the centre line; the paragraph sits just under "Strategy" */
  .hero .stage { grid-template-rows: 72px 1fr auto auto 1fr; }
  .hero .sentence { grid-row: 3; grid-template-columns: minmax(0, 1fr) var(--fw) minmax(0, 1fr); }
  .hero .half { font-size: clamp(40px, 6vw, 112px); }
  .hero .half.b { white-space: normal; } /* "before you / commit." breaks in its own column instead of pushing the frame off centre */
  .hero .half.a { margin-bottom: .98em; } /* lifted one line so "Strategy" sits level with "before you", not between its two lines */
  .hero .support { grid-row: 4; align-self: start; margin-top: calc(56px - var(--fh) / 2); padding-bottom: 0; } /* "Strategy" ends on the frame's middle line, half a frame above this row */
}
@media (max-width: 1023px) {
  :root { --fw: calc(100vw - 2 * var(--margin)); --fh: calc((100vw - 2 * var(--margin)) * .75); }
  .hero .stage { grid-template-rows: 72px 1fr auto; }
  .hero .sentence { grid-template-columns: 1fr; row-gap: 16px; }
  .hero .slot { height: calc(var(--fh) + 100px); }
  .hero .support { padding-bottom: 20px; }
  .hero .frame figcaption .legend { display: none; }
  .hero .half { font-size: clamp(36px, 9.6vw, 56px); white-space: normal; }
  .hero .half.b { justify-self: end; }
  .hero .frame figcaption { margin-top: 10px; }
  .hero .support .btns { margin-top: 14px; }
}
@media (min-width: 600px) and (max-width: 1023px) { :root { --fh: calc((100vw - 2 * var(--margin)) * .6); } }

/* the simulated crowd: the live thing. Each square is one simulated customer */
.crowd { position: relative; }
.crowd canvas { width: 100%; height: 100%; cursor: default; }
.cap-q { color: var(--ink); }
.cap-s { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 4px; }
.cap-s [data-phase] { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .cap-s [data-phase] { white-space: normal; } } /* the finished label names the run's size and its call; on a phone it wraps */
.legend { display: flex; gap: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i, .lg { width: 9px; height: 9px; display: inline-block; }
.legend b { min-width: 3ch; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-b { background: var(--dot-b); } .lg-a { background: var(--dot-a); } .lg-c { background: var(--dot-c); }
.cap-end { margin-top: 4px; transition: opacity .4s; }
.frame:not(.sorted) .cap-end { opacity: 0; visibility: hidden; }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-hover { display: none; } .hint-touch { display: inline; } }
.again { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* a picked person's profile floats over the field on desktop (a real overlay), sits under the caption on phones */
.person { position: absolute; top: 12px; left: 12px; z-index: 3; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 14px; background: var(--paper); color: var(--ink);
  font: 400 var(--t-small)/1.35 var(--sans); box-shadow: 0 20px 48px -20px rgba(0, 0, 0, .4); } /* taste-skill-ignore: a floating profile card */
.person.flip { left: auto; right: 12px; }
.person:not(.pinned) { pointer-events: none; }
.person[hidden] { display: none; }
.person-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--muted); }
.person-x:hover { color: var(--ink); }
.person-h { padding-right: 28px; color: var(--muted); }
.person-who { margin-top: 2px; font: 400 18px/1.2 var(--serif); }
.person-aim { margin-top: 2px; color: var(--muted); }
.person dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 8px; }
.person dt { color: var(--muted); }
.person dd i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.traits { list-style: none; display: grid; gap: 2px; margin-top: 8px; }
.traits li { display: grid; grid-template-columns: 64px 1fr 24px; align-items: center; gap: 8px; }
.traits b { position: relative; height: 5px; background: var(--surface); }
.traits b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--ink); }
.traits li > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.person-said { margin-top: 8px; font: italic 400 16px/1.4 var(--serif); }
.person-said q { quotes: "“" "”"; }
@media (max-width: 1023px) { .person, .person.flip { position: static; width: auto; max-height: none; overflow: visible; margin-top: 12px; box-shadow: none; background: var(--surface); } } /* taste-skill-ignore: removes the overlay shadow */

/* ------------------------------------------------ showcase: the whole brief beside its title, read as it is */
.showcase h2 { font-size: var(--t-display); line-height: 1; letter-spacing: -0.03em; }
.showcase .lead-col > p { margin-top: 24px; max-width: 34ch; }
@media (min-width: 1024px) { .showcase .lead-col { position: sticky; top: 96px; } }

/* the decision brief: the firm's own document, rendered at 720 × 900 inside the frame and on its own further down */
.sheet { width: 720px; height: 900px; padding: 44px 48px; background: var(--paper); color: var(--ink); font: 400 15px/1.45 var(--sans); display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 24px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.sheet-head .logo { height: 20px; color: var(--ink); }
.sheet-label { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.sheet-q { margin-top: 8px; font: 400 23px/1.18 var(--serif); letter-spacing: -0.015em; }
.sheet-grid { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 40px; align-content: start; }
.sheet-call { margin-top: 8px; font: 400 23px/1.22 var(--serif); letter-spacing: -0.01em; }
.split { display: flex; height: 6px; gap: 2px; max-width: 320px; margin-top: 18px; }
.split span { width: var(--w); transition: width 1.3s var(--ease-expo) .9s, opacity .25s; }
.split .b { background: var(--dot-b); } .split .a { background: var(--dot-a); } .split .c { background: var(--dot-c); }
.split-key { margin-top: 8px; color: var(--muted); }
.split-key b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet-why-h { margin-top: 22px; }
.sheet-why { list-style: none; margin-top: 6px; display: grid; gap: 6px; }
.sheet-why li { padding-left: 14px; position: relative; }
.sheet-why li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--accent); }
.sheet-quote { margin-top: 16px; font: 400 15px/1.45 var(--serif); color: var(--muted); }
.sheet-quote q { display: block; font-style: italic; color: var(--ink); quotes: "“" "”"; }
.sheet-metric { margin-top: 8px; color: var(--muted); }
.sheet-range { margin-top: 2px; font: 300 31px/1.05 var(--serif); letter-spacing: -0.02em; }
.sheet-vs { color: var(--muted); }
.range { position: relative; height: 44px; margin-top: 12px; background: var(--surface); }
.range-base { position: absolute; left: var(--base); top: 0; bottom: 0; width: 2px; background: var(--muted); }
.range-base i { position: absolute; top: 100%; left: 0; transform: translateX(-50%); padding-top: 4px; font: 400 13px var(--sans); font-style: normal; color: var(--muted); white-space: nowrap; }
.range-bar { position: absolute; left: var(--from); width: var(--w); top: 12px; height: 20px; background: var(--accent); transform-origin: left; }
.sheet-conf { margin-top: 26px; color: var(--muted); }
.sheet-conf b { font-weight: 500; color: var(--ink); }
.sheet-test { margin-top: 20px; }
.sheet-test p:last-child { margin-top: 6px; font-size: 16px; }
.sheet-foot { align-self: end; font: italic 400 14px/1.4 var(--serif); color: var(--muted); }
.sheet-page { position: relative; }
.sheet-page .sheet { transform-origin: 0 0; }
.sheet-page .sheet { max-width: 100%; }
@media (max-width: 760px) { .sheet-page { overflow: visible; } .sheet-page .sheet { width: 100%; height: auto; padding: 24px 20px; } .sheet-page .sheet-grid { grid-template-columns: 1fr; row-gap: 24px; } }

/* ------------------------------------------------ features: three sentences with switches, full-bleed bands */
.bands { display: grid; }
.band { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 36%) auto; grid-template-areas: "q sim sw" "why sim sw"; align-items: center; column-gap: 40px; min-height: 20vh; padding: 28px var(--margin); color: var(--muted); background: var(--bg); transition: background-color .5s ease, color .5s ease; }
.band .q { grid-area: q; } .band .why { grid-area: why; }
/* each band's own small crowd: the squares idle grey until the switch is on, then run the sweep, settle and sort into the call's split */
.band .sim { grid-area: sim; align-self: center; }
.band .sim canvas { width: 100%; height: 112px; }
.band .sim-t { display: block; min-height: 1.2em; margin-top: 8px; font: 500 var(--t-small)/1.2 var(--sans); color: var(--field-ink, var(--muted)); }
.band .q { font-size: var(--t-head); line-height: 1.04; letter-spacing: -0.02em; margin: 0; max-width: 28ch; }
.band .why { margin-top: 12px; max-width: 70ch; font-size: var(--t-body); line-height: 1.45; visibility: hidden; } /* always in flow, so the band keeps its height when the call arrives */
.band.on { color: var(--ink); background: var(--field); }
.band.done .why { visibility: visible; }
.band.on .q { color: var(--field-ink); } .band.on .why { color: var(--field-ink); }
.band.on[data-field="night"] { --field: var(--night); --field-ink: var(--night-ink); }
.band.on[data-field="green"] { --field: var(--accent); --field-ink: var(--night-ink); }
.band.on[data-field="stone"] { --field: var(--surface); --field-ink: var(--ink); }
/* the button: the site's button, in the band's own ink */
.band .sim-btn { grid-area: sw; justify-self: end; align-self: center; min-width: 8.6em; height: 48px; padding: 0 22px; font: 500 var(--t-small)/1 var(--sans); white-space: nowrap; background: var(--field-ink, var(--ink)); color: var(--field, var(--bg)); transition: transform 140ms var(--ease-out), background-color .5s ease, color .5s ease; }
.band .sim-btn:active { transform: scale(.97); }
@media (max-width: 1023px) {
  .band { min-height: 132px; padding: 24px var(--margin); grid-template-columns: 1fr auto; grid-template-areas: "q sw" "sim sim" "why why"; column-gap: 24px; row-gap: 16px; }
  .band .sim canvas { height: 72px; }
  .band .q { font-size: clamp(20px, 3.2vw, 36px); max-width: 76%; }
  .band .sim-btn { height: 42px; padding: 0 18px; }
}
.after-bands { padding-inline: var(--margin); margin-top: 32px; }

/* ------------------------------------------------ how it runs: lines that step across */
.stairs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 64px; }
/* each stage starts an eighth of the frame right of the one before, so the block crosses the page and the longest line,
   at display size, still ends inside the right margin from the fourth step */
.stair { grid-column: 1 / -1; margin-left: calc((var(--c) - 1) * 12.5%); }
.stair h3, .stair .ln { font: 400 var(--t-display)/1 var(--serif); letter-spacing: -0.03em; }
.stair p { margin-top: 16px; }
.stair p:not(.ln) { max-width: 46ch; font-size: clamp(20px, 1.2vw, 24px); }
.stair.last .ln { color: var(--accent); }
/* the process holds a stone field of its own, edge to edge, so the staircase reads as one chapter */
.block.on-stone { margin-block: calc(var(--gap) / 2); padding-block: 120px; background: var(--surface); }
.block.on-stone + .block { padding-top: 0; }
@media (max-width: 1023px) { .block.on-stone { padding-block: 72px; } }
@media (max-width: 1023px) { .stairs { row-gap: 40px; } .stair { margin-left: calc((var(--c) - 1) * 6vw); } .stair .ln { font-size: clamp(30px, 8.4vw, 56px); } .stair p:not(.ln) { font-size: var(--t-body); } }
.footage { margin-top: 96px; }
.footage video { width: 100%; max-width: 960px; margin-inline: auto; height: auto; background: var(--surface); cursor: pointer; }
/* phones: a desktop recording reads small, so it runs edge to edge and sits closer to its text */
@media (max-width: 1023px) { #how .footage { margin: 48px calc(-1 * var(--margin)) 0; } #how .footage video { max-width: none; } }

/* ------------------------------------------------ the lab: figures inside a sentence */
.figures { min-height: 64svh; display: grid; align-items: center; padding-inline: var(--margin); }
.figures .inner { grid-column: 2 / 12; }
.figures p.fig { font-size: var(--t-state); line-height: 1.2; letter-spacing: -0.015em; color: var(--muted); max-width: none; }
.figures p.fig b { font-weight: 400; color: var(--ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.figures .link { margin-top: 24px; display: inline-block; }
@media (max-width: 1023px) { .figures { min-height: 0; padding-block: 64px; } .figures .inner { grid-column: 1 / -1; } .figures p.fig { font-size: clamp(22px, 3.4vw, 32px); } }

/* ------------------------------------------------ the firm: a paragraph with the city as its drop cap */
.about { padding-block: 140px calc(var(--gap) / 2); }
.about .facts { grid-column: 1 / 3; display: grid; gap: 10px; align-content: start; font: 400 var(--t-small)/1.4 var(--sans); color: var(--ink); }
.about .facts span { display: block; color: var(--muted); }
.about .bio-wrap { grid-column: 3 / 13; }
.about .bio { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; letter-spacing: -0.015em; color: var(--muted); max-width: none; }
.about .bio .name { color: var(--ink); }
.about .bio + .bio { margin-top: 1em; }
.about .cap { float: left; width: 3.6em; height: 3.6em; margin: .12em .5em 0 0; object-fit: cover; }
@media (max-width: 1023px) { .about { padding-block: 72px calc(var(--gap) / 2); } .about .facts { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 24px; margin-top: 32px; } .about .bio-wrap { grid-column: 1 / -1; } .about .bio { grid-column: 1 / -1; font-size: 22px; line-height: 1.25; } .about .cap { width: 110px; height: 110px; } }
.band-pic { position: relative; margin-top: 96px; margin-bottom: calc(var(--gap) / -2); } /* runs flush into the footer */
.band-pic::after { content: ""; position: absolute; inset: auto 0 0; height: 96px; background: linear-gradient(transparent, var(--night)); pointer-events: none; } /* the seam fades into the footer's night instead of cutting */
.band-pic img { width: 100%; height: 56vh; min-height: 320px; object-fit: cover; }

/* ------------------------------------------------ the close: the idea again, inverted, and the name cropped by the edge */
/* the invitation across the top, then four columns that share the page's grid, then the name and the legal line on one row */
.close { position: relative; overflow: hidden; background: var(--night); color: var(--night-ink); padding: 80px var(--margin) var(--margin); }
.close ::selection { background: var(--night-accent); color: var(--night); }
.close :focus-visible { outline-color: var(--night-accent); }
.close .invite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-bottom: 112px; }
/* a quiet invitation, not a second hero: Light weight, smaller, a little more air between letters */
.close h2 { grid-column: 1 / 7; font-size: clamp(36px, 4.4vw, 68px); font-weight: 300; line-height: 1.06; letter-spacing: -0.01em; }
.close .invite-act { grid-column: 7 / 11; padding-top: .9em; } /* the paragraph starts level with the headline's capitals */
.close { --parchment: rgba(240, 232, 218, .7); --champagne: #d9c8a5; }
.close .invite p { max-width: 40ch; font-size: var(--t-small); line-height: 1.6; color: var(--parchment); }
.close .invite .btn { margin-top: 28px; height: 56px; padding: 0 26px; }
.close .btn.light { background: var(--accent); color: var(--night-ink); transition: background-color .3s, color .3s, transform 140ms var(--ease-out); }
.close .btn.light:hover { background: var(--night-accent); color: var(--night); }
.close .directory { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; font: 400 16px/1.4 var(--sans); }
.close .directory > * { display: grid; align-content: start; justify-items: start; gap: 10px; }
.close .directory > :nth-child(1) { grid-column: 1 / 3; }
.close .directory > :nth-child(2) { grid-column: 3 / 5; }
.close .directory > .write { grid-column: 7 / 11; } /* under the invitation's paragraph, so the footer has two edges: column 1 and column 7 */
.close .directory h3 { font: 400 var(--t-small)/1.4 var(--sans); color: var(--parchment); margin-bottom: 6px; }
.close .directory p { font-size: var(--t-small); line-height: 1.6; color: var(--parchment); }
.close .directory a { letter-spacing: .02em; transition: color .2s; }
.close .directory a:hover { color: var(--champagne); }
.close .directory .mail { font: 400 clamp(22px, 1.8vw, 26px)/1.2 var(--serif); letter-spacing: -0.01em; }
.close .base { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-top: 112px; }
.close .name { grid-column: 1 / 3; }
.close .name .logo { width: 100%; height: auto; }
.close .legal { grid-column: 4 / 13; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; font: 400 13px/1.5 var(--sans); color: var(--parchment); }
.close .legal span { display: flex; gap: 20px; }
.close .legal .reg { color: rgba(240, 232, 218, .6); }
.close .legal a { color: var(--night-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .close { padding-top: 64px; }
  .close .invite { grid-template-columns: 1fr; margin-bottom: 72px; }
  .close h2, .close .invite-act { grid-column: 1 / -1; }
  .close h2 { font-size: clamp(32px, 8vw, 44px); }
  .close .invite-act { margin-top: 28px; padding: 0; }
  .close .directory { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .close .directory > *, .close .directory > :nth-child(n) { grid-column: auto; }
  .close .directory .write { grid-column: 1 / -1; }
  .close .base { grid-template-columns: 1fr; row-gap: 32px; margin-top: 56px; }
  .close .name, .close .legal { grid-column: 1 / -1; }
  .close .legal { grid-row: 1; justify-content: space-between; }
}
@media (max-width: 600px) { .close .invite .btn { width: 100%; } }

/* ------------------------------------------------ inner pages: a first screen with the title and its proof */
.first { padding-top: 104px; padding-bottom: calc(var(--gap) / 2); }
.first h1 { max-width: 18ch; }
@media (min-width: 1024px) { .first.row > .lead-col h1 { width: 120%; } } /* the title may cross the empty sixth column */
.first .lead-col > p { margin-top: 24px; max-width: 46ch; font-size: var(--t-body); }
.first .lead-col .btns { margin-top: 24px; }
/* what we do: a crowd narrows to a decision and leaves in three streams, each as thick as its share */
.fork-field { position: relative; height: clamp(420px, 70vh, 700px); background: var(--night); color: var(--night-ink); overflow: hidden; }
.fork-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fork-end { position: absolute; left: 64%; right: var(--margin); top: var(--y, 50%); transform: translateY(-50%); font: 400 var(--t-small)/1.35 var(--sans); color: var(--night-muted); transition: opacity .3s ease; }
.fork-end b { display: block; font: 400 var(--t-head)/1 var(--serif); letter-spacing: -0.02em; color: var(--night-ink); margin-bottom: 6px; }
.fork-end.win b { color: var(--night-accent); font-size: var(--t-display); }
.fork-field.hl .fork-end:not(.on) { opacity: .35; }
/* on wide screens the page's own current (site.js, data-art="fork") runs in from the left edge and parts into the figures,
   so the field drops its night panel and its own crowd */
@media (min-width: 1024px) {
  :has(> .art[data-art="fork"]) .fork-field { overflow: visible; background: none; color: var(--muted); }
  :has(> .art[data-art="fork"]) .fork-field canvas { display: none; }
  :has(> .art[data-art="fork"]) .fork-end { color: var(--muted); }
  :has(> .art[data-art="fork"]) .fork-end b { color: var(--ink); }
  :has(> .art[data-art="fork"]) .fork-end.win b { color: var(--accent); }
}
.wide { grid-column: 1 / -1; margin-bottom: 72px; background: none; }
.wide img { aspect-ratio: 1640 / 440; object-fit: cover; background: var(--surface); }
@media (max-width: 760px) { .wide { margin-bottom: 48px; } .wide img { aspect-ratio: 4 / 3; object-position: 40% 50%; } }
.fork figcaption { margin-top: 14px; font: 400 var(--t-small)/1.45 var(--sans); color: var(--muted); max-width: 58ch; }
@media (max-width: 600px) { .fork-end { left: 60%; } .fork-end.win b { font-size: var(--t-head); } }
.items { display: grid; gap: 28px; }
.items h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.items p { margin-top: 6px; max-width: 52ch; }
@media (min-width: 1024px) { .items.two { grid-template-columns: 1fr 1fr; column-gap: 48px; } .items.two p { max-width: none; } }
/* three across the whole frame, each column starting on the 12-column grid's 1, 5 and 9 */
@media (min-width: 1024px) { .items.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 24px); row-gap: 56px; } .items.three > div { padding-right: 32px; } }
.items.three h3 { font-size: var(--t-state); line-height: 1.12; letter-spacing: -0.015em; }
.items.three p { margin-top: 12px; }
@media (max-width: 1023px) { .items.three h3 { font-size: 24px; } }
/* what a call contains: the logged prediction in the middle, three of its parts named on either side */
.anatomy { display: grid; gap: 40px; }
.anatomy > .items { gap: 36px; }
@media (min-width: 1024px) {
  .anatomy { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 24px); align-items: center; }
  .anatomy > .items { grid-column: span 3; }
  .anatomy > figure { grid-column: span 6; }
}
@media (max-width: 1023px) { .anatomy > figure { order: -1; } }
/* two questions kept apart: two fields that meet on one edge, a question at the foot of each */
.apart { display: grid; grid-template-columns: 1fr 1fr; }
.apart-side { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 96px; min-height: min(72svh, 640px); padding: 96px var(--margin); background: var(--surface); }
.apart-side.night { justify-content: flex-end; background: var(--night); color: var(--night-ink); }
.apart .state { margin-bottom: 20px; max-width: 22ch; }
.apart-side p:not(.state) { max-width: 46ch; }
@media (max-width: 1023px) { .apart { grid-template-columns: 1fr; } .apart-side { min-height: 0; gap: 48px; padding-block: 72px; } .apart .state { font-size: 24px; } }
@media (max-width: 760px) { .table th:nth-child(n+3):not(:last-child), .table td:nth-child(n+3):not(:last-child) { display: none; } }
.duo-pics { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 24px); align-items: end; }
.duo-pics img { width: 100%; height: 56vh; min-height: 300px; object-fit: cover; }
@media (max-width: 760px) { .duo-pics { grid-template-columns: 1fr; } .duo-pics img { height: 60vw; } }
.row.flip > .lead-col { grid-column: 8 / 13; grid-row: 1; }
.row.flip > .proof-col { grid-column: 1 / 7; grid-row: 1; }
@media (max-width: 1023px) { .row.flip > .lead-col, .row.flip > .proof-col { grid-column: 1 / -1; grid-row: auto; } }
.row.flip > .proof-col { margin-top: 0; }

/* the firm page: a title, then the building edge to edge; principles as rows; a statement on a stone field */
/* hero: the title and its sentence hold the left five columns, top and foot; the building fills the rest and runs off the right edge */
.first.open { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 24px); padding-top: 104px; }
.open-copy { grid-column: 1 / 7; display: flex; flex-direction: column; padding-bottom: 36px; }
/* the page's current fills the ground between the title and its sentence, rising toward the building */
.open-art { position: relative; isolation: isolate; flex: 1; min-height: 160px; margin-block: 24px; }
.first.open h1 { max-width: 9ch; font-size: clamp(48px, 6.4vw, 120px); }
.open-lede > p { max-width: 40ch; }
.open-lede .btns { margin-top: 28px; }
.open-pic { grid-column: 7 / 13; margin-right: calc(-1 * var(--margin)); background: none; }
.open-pic img { height: min(calc(100svh - 104px - 64px), 820px); min-height: 520px; object-fit: cover; object-position: 50% 40%; background: var(--surface); }
.open-pic figcaption { margin-top: 12px; }
.rows { display: grid; gap: 72px; margin-top: 56px; }
.row-item, .rows-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.row-item h3 { grid-column: 1 / 6; font-family: var(--serif); font-weight: 400; font-size: var(--t-head); line-height: 1.04; letter-spacing: -0.02em; max-width: 14ch; }
/* the text runs to the right margin; on wide screens a thread of the current (site.js, data-art="threads") ties it to its heading */
.row-item p { grid-column: 8 / 13; padding-top: .35em; font-size: clamp(20px, 1.2vw, 24px); line-height: 1.5; }
/* .ask: the rows turn round. The question is set large across the frame and the kind of decision names its row,
   with the thread running from the name to the question like a leader in an index */
@media (min-width: 1024px) {
  .rows.ask { gap: 44px; }
  .ask .row-item { align-items: baseline; }
  .ask .row-item h3 { grid-column: 1 / 4; font: 500 var(--t-body)/1.35 var(--sans); letter-spacing: 0; max-width: none; }
  .ask .row-item p { grid-column: 4 / 13; padding-top: 0; font-size: clamp(26px, 2.5vw, 44px); line-height: 1.15; letter-spacing: -0.015em; }
}
.rows-head { align-items: start; }
.rows-head p { font-size: clamp(20px, 1.2vw, 24px); }
.rows-head h2 { grid-column: 1 / 7; }
.rows-head > div { grid-column: 8 / 13; }
.rows-head.thirds { margin-bottom: 64px; }
.rows-head.thirds > div { grid-column: 9 / 13; }
section.field { margin-top: calc(var(--gap) / 2); padding: 120px 0; background: var(--surface); }
.field .state { max-width: 28ch; }
/* the mission (site.js): the section holds while its sentence lights word by word and a crowd of squares streams in
   beneath it and gathers into a brain on the right */
section.mind { height: 260vh; padding: 0; }
.mind-stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.mind-brain { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.mind-words { grid-column: 1 / 7; }
.mind .state { font-size: clamp(30px, 2.9vw, 36px); line-height: 1.22; }
.mind .w { color: rgba(14, 13, 12, .2); transition: color .5s var(--ease-out); }
.mind .w.on { color: var(--ink); }
.mind-note { margin-top: 24px; max-width: 46ch; transition: opacity .6s var(--ease-out), transform .8s var(--ease-expo); }
.js .mind-note:not(.on) { opacity: 0; transform: translateY(12px); }
@media (max-width: 1023px) {
  .mind-stage { align-items: start; padding-top: 14svh; }
  .mind-words { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { /* no hold: the sentence and the brain arrive finished */
  section.mind { height: auto; }
  .mind-stage { position: relative; height: auto; min-height: 90svh; }
  .js .mind-note:not(.on) { opacity: 1; transform: none; }
}
/* the world (site.js): the section holds while one simulated person becomes a market, the world answers the move, and the
   crowd streams into futures of which one holds; four chapters of words step beside it on the left */
section.world { height: 400vh; padding: 0; }
.world-stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.world-crowd { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.world-words { grid-column: 1 / 7; display: grid; grid-template-rows: minmax(200px, auto) auto; }
.world-fig { margin-top: 32px; transition: opacity .4s var(--ease-out); }
.world-fig b { display: block; font: 400 var(--t-display)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.world-fig span { display: block; margin-top: 8px; font: 400 var(--t-small)/1.4 var(--sans); color: var(--muted); }
.js .world-fig:not(.on) { opacity: 0; }
.world-ch { grid-area: 1 / 1; transition: opacity .5s var(--ease-out), transform .7s var(--ease-expo), visibility 0s; }
.world-ch h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-head); line-height: 1.04; letter-spacing: -0.02em; max-width: 24ch; }
.world-ch p { margin-top: 20px; max-width: 44ch; }
.js .world-ch:not(.on) { opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, .5s; }
@media (max-width: 1023px) {
  .world-stage { align-items: start; padding-top: 12svh; }
  .world-words { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { /* no hold: the four chapters and the finished crowd arrive together */
  section.world { height: auto; }
  .world-stage { position: relative; height: auto; min-height: 90svh; padding-block: 96px; }
  .world-words { gap: 48px; grid-template-rows: none; }
  .world-ch { grid-area: auto; }
  .js .world-ch:not(.on) { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .js .world-fig:not(.on) { opacity: 1; }
}
html:not(.js) section.world { height: auto; }
html:not(.js) .world-stage { position: relative; height: auto; padding-block: 96px; }
html:not(.js) .world-words { gap: 48px; grid-template-rows: none; }
html:not(.js) .world-fig { display: none; }
html:not(.js) .world-ch { grid-area: auto; }
@media (max-width: 1023px) {
  .first.open { grid-template-columns: 1fr; }
  .open-copy { grid-column: 1; gap: 24px; padding-bottom: 0; }
  .open-art { display: none; }
  .open-pic { grid-column: 1; margin: 48px calc(-1 * var(--margin)) 0; }
  .open-pic img { height: 60vh; min-height: 300px; }
  .open-pic figcaption { padding-inline: var(--margin); }
  .rows { gap: 40px; }
  .row-item, .rows-head { grid-template-columns: 1fr; row-gap: 8px; }
  .rows-head { row-gap: 20px; }
  .rows-head h2, .rows-head > div, .rows-head.thirds > div { grid-column: 1 / -1; }
  .rows-head.thirds { margin-bottom: 40px; }
  .row-item h3, .row-item p { grid-column: 1 / -1; padding-top: 0; }
  section.field { padding: 72px 0; }
  .field .state { font-size: 24px; }
}

/* ------------------------------------------------ research: the index, each paper a plate beside its words */
.first.open.research-open h1 { max-width: none; }
.research-open .open-pic img { object-position: 50% 50%; }
.plate-live { display: block; position: relative; }
.plate-live canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.plate-live.live img { opacity: 0; }
.pic:has(.plate-live.live) { background: none; }
.moons { display: block; width: 100%; height: min(calc(100svh - 104px - 64px), 820px); min-height: 520px; touch-action: pan-y; }
.paper-plate .moons { height: auto; min-height: 0; aspect-ratio: 2 / 3; }
@media (max-width: 1023px) { .moons { height: 112vw; min-height: 0; max-height: 80svh; } }
.papers { display: grid; gap: var(--gap); }
.paper-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 24px); align-items: center; }
.paper-row-plate { grid-column: 1 / 5; grid-row: 1; overflow: hidden; }
.paper-row-plate img { transition: transform .9s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .paper-row:has(a:hover) .paper-row-plate img { transform: scale(1.03); } }
.paper-row-text { grid-column: 6 / 13; grid-row: 1; }
.paper-row:nth-of-type(even) .paper-row-plate { grid-column: 9 / 13; }
.paper-row:nth-of-type(even) .paper-row-text { grid-column: 1 / 8; }
.paper-row-text h3 { font: 400 var(--t-display)/1 var(--serif); letter-spacing: -0.03em; }
.paper-row-text h3 a { transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .paper-row-text h3 a:hover, .stair .ln a:hover { color: var(--accent); } }
.paper-row-text .state { margin-top: 16px; max-width: 30ch; }
.paper-row-text p:not(.state, .small, .paper-links) { margin-top: 28px; max-width: 58ch; }
.paper-row-text .small { margin-top: 20px; }
.paper-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; }
.stair .ln a { transition: color .2s; }
@media (max-width: 1023px) {
  .paper-row-text .state, .paper-title .state { font-size: 24px; }
  .paper-row-plate, .paper-row:nth-of-type(even) .paper-row-plate { grid-column: 1 / 11; grid-row: 1; }
  .paper-row-text, .paper-row:nth-of-type(even) .paper-row-text { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; }
}

/* a paper: the title beside its plate, then a column of text with its contents held alongside */
.paper-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 24px); }
.paper-title { grid-column: 1 / 9; display: flex; flex-direction: column; }
.paper-title h1 { max-width: none; font-size: clamp(48px, 6.4vw, 120px); }
.paper-title .state { margin-top: 20px; max-width: 30ch; }
.paper-meta { margin-top: 24px; }
.paper-title .btns { margin-top: 28px; }
.paper-plate { grid-column: 9 / 13; background: none; }
.paper-plate figcaption { margin-top: 12px; }
.paper-body { padding-bottom: calc(var(--gap) / 2); }
.paper-toc { font: 400 var(--t-small)/1.35 var(--sans); margin-bottom: 56px; }
.paper-text { min-width: 0; max-width: 72ch; margin-inline: auto; }
/* the contents: a generated line runs through the entries and fills as far as you have read */
.toc-track { position: relative; margin-top: 16px; }
.toc-line { position: absolute; left: 0; top: 0; width: 32px; height: 100%; pointer-events: none; }
.paper-toc ol { list-style: none; display: grid; gap: 14px; padding-left: 40px; }
.paper-toc a { display: block; color: var(--muted); transition: color .3s, transform .5s var(--ease-out); }
.paper-toc a.read { color: var(--ink); }
.paper-toc a[aria-current] { color: var(--accent); transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .paper-toc a:hover { color: var(--accent); } }
/* from here there is room for the column to sit on the page's centre with the contents held beside it */
@media (min-width: 1200px) {
  .paper-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 72ch) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); }
  .paper-toc { grid-column: 1; align-self: start; position: sticky; top: 96px; max-height: calc(100svh - 120px); overflow-y: auto; margin-bottom: 0; scrollbar-width: none; }
  .paper-text { grid-column: 2; max-width: none; margin-inline: 0; }
}
.paper-text > p, .paper-text > blockquote, .paper-text li > p { margin-top: 1em; }
.paper-text > :first-child { margin-top: 0; }
.paper-text h2 { font-size: var(--t-state); line-height: 1.15; letter-spacing: -0.015em; margin-top: 88px; scroll-margin-top: 24px; }
.paper-text h3 { margin-top: 48px; scroll-margin-top: 24px; }
.paper-text h2 + p, .paper-text h3 + p { margin-top: 16px; }
.paper-text ul, .paper-text ol { padding-left: 1.2em; margin-top: 1em; display: grid; gap: .5em; }
.paper-text a:not(.btn, .link) { color: var(--accent); text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .18em; }
.paper-text sup a { text-decoration: none; }
.paper-text .key { font-size: clamp(20px, 1.25vw, 25px); line-height: 1.35; }
.paper-text .note { font: 400 var(--t-small)/1.5 var(--sans); color: var(--muted); }
.paper-text .btns { margin-top: 28px; }
.paper-text blockquote { background: var(--surface); padding: 24px; margin-top: 0; }
.paper-text blockquote p + p { margin-top: .8em; }
.paper-text code { font: 400 .86em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.paper-text .katex { font-size: 1.04em; }
.paper-text .katex-display { overflow-x: auto; overflow-y: hidden; margin: 1.2em 0; padding-block: .2em; }
.paper-text .katex-display > .katex { white-space: normal; } /* a long formula breaks at its relations and stays centred */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 48px; }
.stats .stat { margin: 0; }
.stat { background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 10px; font: 400 var(--t-small)/1.4 var(--sans); }
.stat b { font: 400 var(--t-head)/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.table { overflow-x: auto; margin-top: 32px; }
.table table { width: 100%; border-collapse: collapse; text-align: left; font: 400 var(--t-small)/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.table th { font-weight: 500; color: var(--muted); vertical-align: bottom; }
.table th, .table td { padding: 12px 16px 12px 0; }
.table tr { border-bottom: 1px solid var(--surface); }
.table .r { text-align: right; }
.table .k { color: var(--ink); font-weight: 500; }
.up { color: var(--accent); font-weight: 500; }
.down { font-weight: 500; }
.fig { margin-top: 40px; font: 400 var(--t-small)/1.4 var(--sans); }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig figcaption { margin-top: 16px; color: var(--muted); }
.bar { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 6px; margin-top: 16px; }
.bar i, .gbar i { display: block; position: relative; height: 10px; background: var(--surface); }
.bar i { grid-column: 1 / -1; }
.bar i::before, .gbar i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #a9a69f; }
.bar.win i::before, .gbar.win i::before { background: var(--accent); }
.bar.loss i::before, .gbar.loss i::before { background: var(--ink); }
.bar span:nth-child(2) { font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 20px; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: #a9a69f; }
.legend .win::before { background: var(--accent); }
.bargroup { margin-top: 20px; }
.gbar { display: grid; grid-template-columns: 1fr 3.6em; align-items: center; column-gap: 12px; margin-top: 5px; }
.gbar span { text-align: right; font-variant-numeric: tabular-nums; }
.notes { margin-top: 88px; font: 400 var(--t-small)/1.55 var(--sans); color: var(--muted); }
.notes strong { color: var(--ink); font-weight: 500; }
.notes p { margin-top: 16px; }
.notes ol { margin-top: 0; }
.paper-next { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 48px; }
@media (max-width: 1023px) {
  .paper-title, .paper-plate { grid-column: 1 / -1; }
  .paper-plate { margin-top: 32px; max-width: 84%; }
  .stats { grid-template-columns: 1fr; }
  .paper-text h2 { margin-top: 64px; }
}

/* ------------------------------------------------ interface fragments: the portal and the brief email, built in HTML so they stay sharp.
   Each is laid out in em on a fixed number of columns (--em) and scales with its own width, like a picture.
   Only the element holding the text sets a size, so sizes never compound; the smallest step is .7em. */
.ui { container-type: inline-size; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow: hidden; }
.ui-in { --em: 40; font-size: calc(100cqw / var(--em)); line-height: 1.35; padding: 1.4em 1.6em; height: 100%; display: flex; flex-direction: column; gap: .9em; }
:where(.ui) span { display: block; } /* zero weight, so each part's own display wins */
.ui b { font-weight: 500; }
.box > .ui { height: 100%; }
.ui-l { font-size: .7em; font-weight: 500; color: var(--muted); margin-bottom: .3em; }
.ui-t { font-size: 1em; font-weight: 500; }
.ui-s { font-size: .78em; color: var(--muted); margin-top: .15em; }
.ui-meta { display: flex; justify-content: space-between; gap: 1em; font-size: .7em; color: var(--muted); }
.ui-meta b { color: var(--ink); }
.ui-top { display: flex; justify-content: space-between; align-items: start; gap: 1em; }
.ui-chip { flex: none; font-size: .7em; font-weight: 500; padding: .3em .8em; border-radius: 1em; background: #f2ead9; color: #6b5420; }
.ui-two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6em; }
.ui-key { font-size: .72em; color: var(--muted); margin-top: .5em; }
.ui-key b { color: var(--ink); }
.ui-range { font: 300 1.75em/1.05 var(--serif); letter-spacing: -0.02em; }
.ui-split { display: flex; gap: .12em; height: .3em; margin-top: .8em; }
.ui-split i { width: var(--w); background: var(--dot-b); } .ui-split i + i { background: var(--dot-a); } .ui-split i + i + i { background: var(--dot-c); }
.ui-btn { font-size: .74em; font-weight: 500; padding: .65em 1.15em; background: var(--night); color: var(--night-ink); }
.ui-btn.line { background: none; color: var(--ink); box-shadow: inset 0 0 0 .14em var(--night); }

/* the brief by email */
.ui-mail .ui-in { --em: 42; gap: .75em; }
.mail-body { font: 400 .92em/1.35 var(--serif); }
.mail-brief { background: #f3f4f0; padding: .9em 1.1em 1em; display: grid; gap: .7em; }
.mb-head { display: flex; justify-content: space-between; align-items: center; font-size: .7em; color: var(--muted); }
.mb-head .logo { height: 1.7em; color: var(--ink); }
.mb-call { font: 400 1.05em/1.22 var(--serif); letter-spacing: -0.01em; }
.mail-meet { display: flex; justify-content: space-between; align-items: center; gap: 1em; background: #f3f4f0; padding: .7em 1.1em; box-shadow: inset .2em 0 0 var(--night); }
.mm-t { font: 400 .95em/1.2 var(--serif); }
.mm-date { flex: none; text-align: center; background: var(--paper); padding: .3em .7em .15em; }
.mm-date span { font-size: .7em; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mm-date b { display: block; font: 400 1.3em/1.1 var(--serif); }

/* the prediction, logged */
.ui-pred .ui-in { --em: 36; gap: 1em; }
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em 1.6em; }
.pr-grid span:not([class]) { font-size: .9em; }
.pr-grid .ui-range { font-size: 1.85em; }
.pr-scale { position: relative; height: 1em; background: var(--surface); }
.pr-base { position: absolute; left: 22%; top: 0; bottom: 0; width: .12em; background: var(--muted); }
.pr-bar { position: absolute; left: 46%; width: 22%; top: .28em; bottom: .28em; background: var(--accent); }
.pr-ticks { position: relative; height: 1em; margin-top: -.55em; font-size: .7em; color: var(--muted); }
.pr-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.pr-ticks span:nth-child(1) { left: 22%; } .pr-ticks span:nth-child(2) { left: 46%; } .pr-ticks span:nth-child(3) { left: 68%; }
.pr-foot { margin-top: auto; }

/* the readout agenda */
.ui-read .ui-in { --em: 50; gap: 1.1em; }
.rd-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.2em; }
.rd-agenda { display: grid; gap: .45em; }
.rd-item { display: flex; justify-content: space-between; gap: 1em; background: #f3f4f0; padding: .65em .9em; }
.rd-item b { display: block; font-size: .86em; }
.rd-item span { font-size: .74em; color: var(--muted); margin-top: .2em; }
.rd-item .rd-min { flex: none; margin: 0; }
.rd-side { display: grid; gap: .55em; align-content: start; }
.rd-side > span:not(.ui-l, .rd-btns) { font-size: .82em; }
.rd-side .ui-l { margin: 0; }
.rd-add { color: var(--muted); }
.rd-btns { display: flex; gap: .6em; margin-top: .3em; }
.rd-after { background: #f1ebe6; padding: .8em 1em; font-size: .82em; }

/* in the hero's reel the email is the brief itself: no header or booking, so it fits a 16:9 frame */
.hero .ui-mail .ui-in { --em: 34; }
.hero .ui-mail .ui-meta, .hero .mail-meet { display: none; }
.hero .ui-pred .ui-in { --em: 34; }

/* in a phone-width frame each fragment sets fewer columns, so its type stays readable */
@container (max-width: 420px) {
  .ui-mail .ui-in { --em: 28; }
  .ui-pred .ui-in { --em: 26; }
  .ui-read .ui-in { --em: 27; }
  .rd-grid { grid-template-columns: 1fr; gap: 1em; }
}

/* tables keep their lines */
.table-wrap { overflow-x: auto; margin-top: 8px; }
.table { width: 100%; border-collapse: collapse; font: 400 var(--t-small)/1.4 var(--sans); }
.table caption { text-align: left; padding: 0 0 10px; color: var(--muted); }
.table th { text-align: left; font-weight: 500; padding: 0 16px 10px 0; border-bottom: 2px solid var(--ink); }
.table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--surface); vertical-align: top; }
.table td:first-child { color: var(--muted); }

/* form: filled fields, no lines */
.form { display: grid; gap: 14px; margin-top: 32px; max-width: 560px; }
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form .pair { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 6px; font: 400 var(--t-small)/1.3 var(--sans); color: var(--ink); }
.field { width: 100%; font: 400 17px/1.4 var(--sans); padding: 12px 14px; background: var(--surface); border: 0; border-radius: 0; color: var(--ink); outline: none; transition: box-shadow .2s; }
.field:focus { box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: the focus ring of a form field */
textarea.field { min-height: 140px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.form .note:empty { display: none; }
.form .note, .form .privacy { font: 400 var(--t-small)/1.45 var(--sans); color: var(--muted); }
.form .btns { margin-top: 8px; }

/* booking: the open times as a set of radio buttons */
.slots { display: grid; gap: 18px; }
.slots fieldset { border: 0; }
.slots legend { font: 500 15px var(--sans); margin-bottom: 8px; }
.slots fieldset { display: flex; flex-wrap: wrap; gap: 6px; }
.slots label { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid rgba(0,0,0,.16); background: var(--card); font: 400 15px var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.slots label:hover { border-color: var(--night); }
.slots input { position: absolute; opacity: 0; pointer-events: none; }
.slots label:has(:checked) { background: var(--night); border-color: var(--night); color: var(--night-ink); }
.slots label:has(:focus-visible) { outline: 2px solid var(--night); outline-offset: 2px; }
.slots .btn { justify-self: start; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.night .slots label { border-color: rgba(243,239,230,.2); }
.night .slots label:has(:checked) { background: var(--night-ink); color: var(--night); }

/* the contact page: heading and fields on the left, the action under them; the calendar and the street on the right.
   On a phone the calendar sits between the fields and the action, so nobody sends before seeing it */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); }
.contact form { display: contents; }
.contact [hidden] { display: none; }
.contact-fields { display: grid; gap: 14px; margin-top: 32px; }
.contact-fields textarea.field { min-height: 96px; }
.contact-side { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.contact-pic img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.contact-act { display: grid; gap: 12px; margin-top: 24px; justify-items: start; }
.contact-act .note:empty { display: none; }
.contact-act .note { color: var(--ink); }
.contact.live .contact-pic { display: none; }
.js .contact-side.waiting { visibility: hidden; }
@media (max-width: 1023px) { .contact:not(.live) .contact-side { order: 1; } } /* no calendar: the picture closes the page, after the button */
@media (min-width: 1024px) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: clamp(12px, 1.4vw, 24px); }
  .contact .lead-col { grid-column: 1 / 6; grid-row: 1; }
  .contact-fields { grid-column: 1 / 6; grid-row: 2; }
  .contact-act { grid-column: 1 / 6; grid-row: 3; align-content: start; }
  .contact-side { grid-column: 7 / 13; grid-row: 1 / 4; margin-top: 0; }
  /* the street fills what the calendar leaves, so the column ends level with the form */
  .contact-pic, .contact.live .contact-pic { display: block; position: relative; flex: 1 1 0; min-height: 140px; }
  .contact-pic img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .contact:not(.live) .contact-pic { min-height: 560px; }
  .contact-done { grid-column: 1 / 6; grid-row: 1; }
  .contact > .contact-pic { grid-column: 7 / 13; grid-row: 1; min-height: 480px; }
}
.contact-done { display: grid; gap: 20px; justify-items: start; align-content: start; }
.contact-done h1:focus { outline: none; } /* focus lands here by script so screen readers read the outcome */
.contact-done .note:empty { display: none; }
.book-state { max-width: 46ch; font: 400 var(--t-small)/1.45 var(--sans); color: var(--ink); }
.book-clear { font: 400 var(--t-small)/1.45 var(--sans); padding: 0; }
.book { container-type: inline-size; display: grid; gap: 6px; padding: 24px; background: var(--paper); }
.book h2 { font-size: var(--t-state); line-height: 1.1; letter-spacing: -0.015em; }
.book h3 { font: 500 16px/1.3 var(--sans); }
.book-tz { display: grid; gap: 6px; margin-top: 18px; color: var(--muted); }
.book-tz .field { font-size: 15px; padding: 10px 12px; }
.book-pick { display: grid; gap: 24px; margin-top: 18px; }
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.cal-head h3 { flex: 1; }
.cal-head button { width: 44px; height: 44px; font-size: 22px; line-height: 1; }
.cal-head button:hover:not(:disabled) { background: var(--surface); }
.cal-head button:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { padding-bottom: 6px; text-align: center; font: 500 13px var(--sans); color: var(--muted); }
.cal-grid button { position: relative; aspect-ratio: 1; max-height: 64px; font: 400 15px var(--sans); font-variant-numeric: tabular-nums; }
.cal-grid button:not(:disabled) { background: var(--surface); font-weight: 500; }
.cal-grid button:not(:disabled):hover { background: var(--night); color: var(--night-ink); }
.cal-grid button[aria-pressed="true"]:not(:disabled) { background: var(--night); color: var(--night-ink); }
.cal-grid button:disabled { color: var(--muted); opacity: .45; cursor: default; }
.cal-grid .today::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px; background: currentColor; }
.cal .note { margin-top: 14px; font: 400 var(--t-small)/1.45 var(--sans); color: var(--muted); }
.cal .note:empty { display: none; }
.times h3 { margin-bottom: 14px; }
.times-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.times-list button { height: 44px; background: var(--surface); font: 500 15px var(--sans); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.times-list button:hover, .times-list button[aria-pressed="true"] { background: var(--night); color: var(--night-ink); }
@container (min-width: 520px) { .book-pick { grid-template-columns: minmax(0, 1fr) 150px; } .times-list { grid-template-columns: 1fr; max-height: 380px; overflow-y: auto; } }

.after { margin-top: 48px; display: grid; gap: 20px; }
.after figure img { width: 100%; }

/* ------------------------------------------------ motion: every hidden start lives under html.js and no reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
  /* first page of a visit: the mark turns into place, the wordmark slides out from behind it */
  .intro .top .logo::before { animation: mark-in 1.3s cubic-bezier(.65, 0, .35, 1) 150ms backwards; }
  .intro .top .logo::after { animation: word-in 1.2s var(--ease-expo) 700ms backwards; }
  @keyframes mark-in { from { opacity: 0; transform: rotate(-60deg); } 40% { opacity: 1; } }
  @keyframes word-in { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14px); } }

  /* section entrances: a block's parts arrive in reading order, never the whole block as one */
  .js .rv:not(.grp), .js .grp > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform 1s var(--ease-expo); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 80ms); }
  .js .rv.in:not(.grp), .js .grp.in > * { opacity: 1; transform: none; }

  /* the first headline rises word by word from behind its baseline */
  .js h1.lines { opacity: 1; transform: none; }
  .js .hero .half { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out) 80ms, transform .7s var(--ease-expo) 80ms; }
  .js .hero .half.in { opacity: 1; transform: none; }
  .lines .w { display: inline-block; clip-path: inset(-.3em -.1em -.14em -.1em); }
  .lines .w > span { display: inline-block; transform: translateY(120%); transition: transform .8s var(--ease-expo) calc(var(--l, 0) * 80ms); }
  .lines.in .w > span { transform: none; }

  /* the reel follows the scroll (site.js); the first frame opens left to right, the way its sweep runs */
  .js .hero .frame.lead { clip-path: inset(-12px 100% -2px -2px); transition: clip-path 1.1s var(--ease-in-out) 350ms; }
  .js .hero .frame.lead.in { clip-path: inset(-12px -2px -2px -2px); }
  /* the accent piece fades up after the sentence */
  .js .art { animation: art-in 1.6s var(--ease-out) 600ms backwards; }
  @keyframes art-in { from { opacity: 0; } }

  /* lists arrive row by row */
  .js .stairs.grp > * { transition-delay: calc(var(--i, 0) * 110ms); }

  /* the brief opens top to bottom, its figures roll */
  .js .rv:not(.in) .roll-strip { transform: none; }
  .js .rv .roll-strip { transition: transform 1.4s var(--ease-expo) calc(900ms + var(--i, 0) * 90ms); }
  .js .rv .range-bar { transform: scaleX(0); transition: transform 1.2s var(--ease-expo) 1.2s; }
  .js .rv.in .range-bar { transform: none; }
  .js .rv .split span { width: 0; }
  .js .rv.in .split span { width: var(--w); }

  /* pictures settle from a slight scale as they arrive */
  .js .pic.rv img, .js .band-pic.rv img { transform: scale(1.04); transition: transform 1.3s var(--ease-expo); }
  .js .pic.rv.in img, .js .band-pic.rv.in img { transform: none; }
  .js .pic.rv, .js .band-pic.rv { transform: none; }

  /* the bands' fill and the stairs' accent answer the hand */
  .band { transition: background-color .5s ease, color .5s ease; }
  @keyframes call-in { from { opacity: 0; transform: translateY(10px); } }
  .js .band.done .why { animation: call-in .7s var(--ease-out); }
  .btn-l { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
  .btn-l .btn-i { position: relative; display: inline-block; transition: transform .5s var(--ease-out); }
  .btn-l .btn-i::after { content: attr(data-t) / ""; position: absolute; left: 0; top: calc(100% + .35em); }
  @media (hover: hover) and (pointer: fine) { .btn:hover .btn-i { transform: translateY(calc(-100% - .35em)); } }

}
/* page to page: the sheet the current carries across the screen (partials/wipe.html) */
.wipe { position: fixed; inset: 0; width: 100vw; /* the window, not the page: the logo stays put when the new page's scrollbar arrives */ z-index: 50; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.wipe[hidden] { display: none; }
.wipe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wipe .logo { height: clamp(36px, 4vw, 56px); }
/* figures that roll up to their value once; the real value stays in the text for screen readers */
.roll { --h: 1.25em; font-variant-numeric: tabular-nums; }
.roll-col { display: inline-flex; height: var(--h); clip-path: inset(0); }
.roll-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--n) * -1 * var(--h))); }
.roll-strip::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; line-height: var(--h); }
.roll [data-c]::before { content: attr(data-c); }
.sheet-range .roll { --h: 1.05em; }
.sheet-range .roll { --h: 1.05em; }
@media (prefers-reduced-motion: reduce) {
  .btn, .link::after, .btn.line::before { transition-duration: .01ms; }
  .btn-i::after { content: none; }
}