@font-face { font-family: "EB Garamond"; src: url(fonts/EBGaramond-normal.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: block; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-garamond-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* night is the design; dawn is the same air in daylight */
:root {
  --bg: #0a0d19;
  --ink: #dde3ef;
  --soft: #aeb5cf;
  --warm: #f3d9c6;
  --hair: rgba(221, 227, 239, .16);
  --hair-hi: rgba(221, 227, 239, .34);
  --shade: rgba(10, 13, 25, .7);
  --glass-a: rgba(221, 227, 239, .07);
  --glass-b: rgba(221, 227, 239, .015);
  --glass-c: rgba(255, 154, 90, .04);
  --glass-line: rgba(221, 227, 239, .14);
  --ember: #ff9a5a;
  --thread: 221, 227, 239;
  --serif: "EB Garamond", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: clamp(20px, 2.4vw, 40px);
  --gutter: clamp(20px, 4.4vw, 72px);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #eceef4;
    --ink: #161827;
    --soft: #474c63;
    --warm: #7b4630;
    --hair: rgba(22, 24, 39, .16);
    --hair-hi: rgba(22, 24, 39, .32);
    --shade: rgba(236, 238, 244, .75);
    --glass-a: rgba(255, 255, 255, .5);
    --glass-b: rgba(255, 255, 255, .22);
    --glass-c: rgba(255, 154, 90, .06);
    --glass-line: rgba(22, 24, 39, .12);
    --thread: 22, 24, 39;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
::selection { background: #c9c2f0; color: #0a0d19; }
:focus-visible { outline: 1px solid var(--hair-hi); outline-offset: 6px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- atmosphere ---------- */
#fog { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; }
@supports (height: 100lvh) { #fog { height: 100lvh; } }
.grain { position: fixed; inset: -50%; z-index: 30; pointer-events: none; opacity: .07; background-image: var(--grain); background-size: 220px; animation: grain .9s steps(5) infinite; mix-blend-mode: overlay; }
.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(2, 3, 8, .55)); }
@media (prefers-color-scheme: light) { .vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(120, 124, 160, .14)); } .grain { opacity: .05; } }

.bars { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.bar { position: absolute; left: 0; right: 0; height: 9vh; background: #04050a; transform: scaleY(0); will-change: transform; }
.bar-t { top: 0; transform-origin: top; }
.bar-b { bottom: 0; transform-origin: bottom; }
@media (prefers-color-scheme: light) { .bar { background: #10121d; } }

.loader { position: fixed; inset: 0; z-index: 40; background: var(--bg); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--expo), visibility 1.1s; }
.js .loader { opacity: 1; visibility: visible; }
.js body.ready .loader { opacity: 0; visibility: hidden; }

/* the wordmark, alive: it resolves, holds, then flies past the camera into the page */
.intro { position: fixed; inset: 0; z-index: 24; display: none; place-items: center; pointer-events: none; }
.js .intro { display: grid; }
.intro.gone { display: none !important; }
.intro-mark { font: 400 21.5vw/.8 var(--serif); letter-spacing: -.015em; transform: translateY(-4vh); }
.g { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }
.intro-mark .g { text-shadow: 0 0 60px rgba(150, 165, 255, .18); opacity: 0; }
.w { display: inline-block; white-space: nowrap; }

/* ---------- chrome ---------- */
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 8px 12px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }
.chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: calc(max(var(--pad), env(safe-area-inset-top)) + 2px) max(var(--pad), env(safe-area-inset-right)) 14px max(var(--pad), env(safe-area-inset-left)); }
.chrome::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(var(--shade), transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chrome.scrolled::before { opacity: 1; }
.brand { font: 400 26px/1 var(--serif); letter-spacing: -.005em; }
.chrome-r { display: flex; gap: 28px; align-items: center; }
.chrome a { text-shadow: 0 0 14px var(--shade); }
.js .chrome { opacity: 0; transition: opacity .9s var(--expo); }
.js body.shown .chrome { opacity: 1; }
.lnk { position: relative; display: inline-block; }
.lnk::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--expo); }
@media (hover: hover) and (pointer: fine) { .lnk:hover::after { transform: scaleX(1); transform-origin: left; } }
.lnk:focus-visible::after { transform: scaleX(1); }
.lnk.here { color: var(--warm); }

/* ---------- hero ---------- */
.hero { position: relative; overflow-x: clip; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.hero-copy { position: relative; z-index: 2; padding: clamp(110px, 17vh, 170px) var(--gutter) 0; display: grid; row-gap: clamp(22px, 3.4vh, 40px); justify-items: start; }
h1 { font: 400 clamp(48px, 7.4vw, 128px)/.88 var(--serif); letter-spacing: -.012em; max-width: 7.6em; text-wrap: balance; }
h1 .then { display: block; margin-top: .7em; max-width: 21em; font-size: clamp(20px, 2.1vw, 36px); line-height: 1.22; letter-spacing: .14em; font-variant-caps: all-small-caps; color: var(--warm); text-shadow: 0 0 18px var(--shade); }
.lede { max-width: 30em; font: 400 clamp(19px, .7vw + 15px, 25px)/1.42 var(--serif); letter-spacing: -.004em; text-wrap: pretty; text-shadow: 0 0 22px var(--shade); }
.lede .keep { color: var(--warm); }
.caption { position: relative; z-index: 2; justify-self: end; padding: 14px var(--gutter) calc(30px + env(safe-area-inset-bottom)); max-width: 36rem; line-height: 1.5; color: var(--soft); text-align: right; }
.caption span { display: inline-block; }

.field { position: relative; margin-top: clamp(8px, 2vh, 28px); min-height: 200px; }
/* the instrument arrives with the hero, after the wordmark has cleared */
.js .hero .field, .js .caption { opacity: 0; transition: opacity 1.6s var(--expo) .9s; }
.js body.shown .hero .field, .js body.shown .caption { opacity: 1; }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.field.on canvas { opacity: 1; }
.fallback .field canvas { opacity: 1; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.instrument { position: absolute; left: 0; right: 0; top: 0; height: 13px; margin-top: -6.5px; pointer-events: none; will-change: transform; clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--ease-out) 250ms; }
.field.on .instrument { clip-path: inset(0 0 0 0); }
.instrument .rule { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(var(--thread), .78); }
.instrument .ticks { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, rgba(var(--thread), .7) 0 1px, transparent 1px 96px) 0 0 / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, rgba(var(--thread), .42) 0 1px, transparent 1px 12px) 0 3.5px / 100% 6px no-repeat; }
.instrument .glow { position: absolute; left: 0; top: 50%; width: 900px; height: 180px; margin: -90px 0 0 -450px; background: radial-gradient(closest-side, rgba(255, 154, 90, .1), transparent); will-change: transform; }
.instrument .needle { position: absolute; left: 0; top: -6px; width: 1px; height: 25px; background: var(--warm); opacity: 0; transition: opacity 300ms ease; will-change: transform; }
.instrument.reading .needle { opacity: 1; }

/* ---------- bands ---------- */
.band { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: clamp(24px, 6vw, 120px);
  padding: clamp(88px, 12vw, 180px) var(--gutter); overflow-x: clip; }
.band::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--hair);
  transform-origin: left; transition: transform 1.6s var(--expo); }
.js .band:not(.seen)::before { transform: scaleX(0); }
.band > div, .band > dl { min-width: 0; }
.label { align-self: start; position: sticky; top: 96px; margin: .5em 0 2rem; font-weight: 400; color: var(--soft); }
.label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 12px; vertical-align: .12em; border: 1px solid currentColor; border-radius: 50%; }
.sub { margin: clamp(64px, 8vw, 112px) 0 28px; font-weight: 400; color: var(--soft); }

.statement { font: 400 clamp(40px, 5.6vw, 104px)/.98 var(--serif); letter-spacing: -.016em; max-width: 13em; text-wrap: balance; text-shadow: 0 0 30px var(--shade); }
.contact .statement { font-size: clamp(34px, 4.2vw, 76px); line-height: 1.04; max-width: 16em; }
.contact .statement a { display: inline-block; color: var(--warm); border-bottom: 1px solid currentColor; padding-bottom: .02em; transition: border-color .3s ease; }
@media (hover: hover) and (pointer: fine) { .contact .statement a:hover { border-color: transparent; } }
.body { font: 400 clamp(21px, 1.5vw + 12px, 32px)/1.3 var(--serif); letter-spacing: -.006em; max-width: 30em; text-wrap: pretty; }
.after { margin-top: clamp(28px, 3.4vw, 48px); color: var(--soft); max-width: 34em; }
.aside { margin-top: clamp(32px, 3.6vw, 52px); max-width: 38em; font: 400 clamp(17px, .4vw + 15px, 21px)/1.55 var(--serif); color: var(--soft); text-wrap: pretty; }
.aside.lead { margin-top: 0; }

/* the letter, set on the old glass */
.glass { position: relative; max-width: 44rem; padding: clamp(32px, 5vw, 72px) clamp(26px, 5vw, 76px) clamp(36px, 5vw, 68px);
  background: linear-gradient(135deg, var(--glass-a), var(--glass-b) 45%, var(--glass-c));
  -webkit-backdrop-filter: blur(14px) saturate(1.3) brightness(1.06); backdrop-filter: blur(14px) saturate(1.3) brightness(1.06);
  border: 1px solid var(--glass-line); border-radius: 3px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12); }
@media (prefers-color-scheme: light) { .glass { box-shadow: 0 40px 120px rgba(60, 64, 110, .16), inset 0 1px 0 rgba(255, 255, 255, .7); } }
.glass-grain { position: absolute; inset: -50%; opacity: .08; mix-blend-mode: overlay; background-image: var(--grain); background-size: 180px; animation: grain 1s steps(6) infinite; pointer-events: none; }
.glass-edge { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .07) 48%, transparent 56%); transform: translateX(var(--sheen, -60%)); }
.note { position: relative; }
.note p { margin: 0 0 1.1em; font: 400 clamp(19px, .6vw + 15px, 24px)/1.5 var(--serif); letter-spacing: -.003em; text-wrap: pretty; }
.note .dateline { margin-bottom: 2.2rem; color: var(--soft); font: 400 13px/1.3 var(--mono); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.note p:nth-child(2)::first-letter { float: left; font-size: 3.4em; line-height: .82; padding: .06em .08em 0 0; color: var(--warm); }
.note .sign { margin: 2.6rem 0 0; display: grid; row-gap: .5rem; font: 400 clamp(30px, 2.8vw, 42px)/1 var(--serif); letter-spacing: -.012em; }
.note .sign span { font: 400 clamp(15px, 1vw + 8px, 19px)/1 var(--serif); letter-spacing: .14em; font-variant-caps: all-small-caps; color: var(--warm); }

/* properties and uses: numbered rows with presence */
.checks { list-style: none; counter-reset: q; max-width: 56rem; }
.checks li { counter-increment: q; position: relative; display: grid; grid-template-columns: clamp(52px, 7vw, 112px) minmax(0, 1fr); row-gap: .5em;
  padding: clamp(26px, 3vw, 44px) 0; border-bottom: 1px solid var(--hair); }
.checks li:first-child { border-top: 1px solid var(--hair); }
.checks li::before { content: counter(q, decimal-leading-zero); grid-row: 1 / span 2; font: 400 13px/1 var(--mono); color: var(--soft); padding-top: .9em; font-variant-numeric: tabular-nums; transition: color .8s ease; }
.checks li.in::before { color: var(--warm); }
.checks .q { grid-column: 2; font: 400 clamp(30px, 3.6vw, 64px)/1.02 var(--serif); letter-spacing: -.014em; text-wrap: balance; }
.checks .a { grid-column: 2; max-width: 34em; color: var(--soft); font: 400 clamp(17px, .4vw + 15px, 21px)/1.5 var(--serif); }
.uses { margin-top: clamp(48px, 6vw, 88px); }
.uses .q { font-size: clamp(26px, 2.6vw, 46px); line-height: 1.08; }

.terms { max-width: 56rem; }
.terms > div { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: 2.5rem; row-gap: .3em; padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--hair); }
.terms > div:first-child { border-top: 1px solid var(--hair); }
.terms dt { font: 400 clamp(26px, 2.4vw, 40px)/1.06 var(--serif); letter-spacing: -.012em; }
.terms dd { padding-top: .35em; color: var(--soft); font: 400 clamp(17px, .4vw + 15px, 21px)/1.5 var(--serif); }

/* the ledger: dated, ruled, read down a spine */
.ledger { list-style: none; position: relative; max-width: 52rem; }
.ledger::before { content: ""; position: absolute; left: 7.5rem; top: .4em; bottom: .4em; width: 1px; background: var(--hair-hi); }
.ledger li { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 2.25rem; padding: 0 0 clamp(28px, 3vw, 44px); }
.ledger li:last-child { padding-bottom: 0; }
.ledger li::after { content: ""; position: absolute; left: calc(7.5rem - 4.5px); top: .62em; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--ink); background: var(--bg); }
.ledger .is-now::after { background: var(--warm); border-color: var(--warm); box-shadow: 0 0 0 0 rgba(255, 154, 90, .5); animation: beacon 2.8s var(--expo) infinite; }
.ledger .is-done::after { background: var(--ink); }
.ledger .is-next::after { border-style: dashed; }
.ledger .when { padding-top: .5em; color: var(--soft); font-variant-numeric: tabular-nums; }
.ledger .is-now .when { color: var(--warm); }
.ledger .what { font: 400 clamp(21px, .9vw + 15px, 30px)/1.32 var(--serif); letter-spacing: -.006em; text-wrap: pretty; }
.ledger .what a, .pages a { border-bottom: 1px solid var(--hair-hi); transition: border-color .3s ease, color .3s ease; }
@media (hover: hover) and (pointer: fine) { .ledger .what a:hover, .pages a:hover { border-color: currentColor; color: var(--warm); } }

.pages { list-style: none; }
.papers { margin-top: clamp(28px, 3vw, 40px); max-width: 52rem; }
.papers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em 1.4em; padding: .8em 0; border-bottom: 1px solid var(--hair); }
.papers li:first-child { border-top: 1px solid var(--hair); }
.papers a { font: 400 clamp(23px, 1.5vw + 13px, 34px)/1.2 var(--serif); }
.papers span { color: var(--soft); font: 400 clamp(15px, .3vw + 14px, 18px)/1.45 var(--serif); }

.roles { list-style: none; max-width: 52rem; }
.roles li { display: grid; row-gap: .4em; padding: clamp(22px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--hair); }
.roles li:first-child { border-top: 1px solid var(--hair); }
.roles .q { font: 400 clamp(26px, 2.4vw, 40px)/1.06 var(--serif); letter-spacing: -.012em; }
.roles .a { color: var(--soft); font: 400 clamp(17px, .4vw + 15px, 21px)/1.5 var(--serif); }

/* ---------- the end card: the wordmark as a window onto the air ---------- */
.end { position: relative; overflow-x: clip; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 0 var(--gutter) clamp(48px, 8vh, 96px); }
.end-window { display: grid; place-items: center; mix-blend-mode: multiply; background: var(--bg); -webkit-mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent); margin: 0 calc(-1 * var(--gutter)); padding: 12vh 0 4vh; }
.end-mark { font: 400 min(26.5vw, 48vh)/.8 var(--serif); letter-spacing: var(--ls, -.01em); color: #fff; transform: scale(var(--sc, 1)); }
/* by day the letters are inked, not windows: dusk lavender into dawn, the fog's own colours */
@media (prefers-color-scheme: light) { .end-window { mix-blend-mode: normal; background: none; } .end-mark { color: #2a2f5c; background: linear-gradient(100deg, #1d2140 10%, #5b5394 48%, #a8664a 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } }
.end-meta { display: grid; justify-items: center; text-align: center; gap: 22px; }
.end-meta .label { position: static; margin: 0; }
.end-meta .label::before { display: none; }
.products { list-style: none; display: grid; gap: 16px; justify-items: center; }
.p-link { display: grid; justify-items: center; row-gap: 4px; }
.p-name { color: var(--ink); }
.p-name::before { content: "["; } .p-name::after { content: "]"; }
.p-what { color: var(--soft); font: 400 clamp(19px, .6vw + 15px, 24px)/1.3 var(--serif); }
.p-what i { font-style: normal; display: inline-block; transition: transform .5s var(--expo); }
@media (hover: hover) and (pointer: fine) { .p-link:hover .p-what { color: var(--warm); } .p-link:hover i { transform: translateX(4px); } }

.foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; padding: 28px var(--gutter) calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); color: var(--soft); }
.foot a { color: var(--ink); border-bottom: 1px solid currentColor; }
.foot .small { display: flex; gap: 1.1em; align-items: baseline; }
.foot-mark { font: 400 22px/1 var(--serif); color: var(--ink); }

/* ---------- reveals (scroll, once) ---------- */
.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); transition: opacity 1.1s var(--expo), transform 1.3s var(--expo), filter 1.1s var(--expo); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
.js .glass.rv { transform: translate3d(14vw, 0, 0) rotate(2.5deg); filter: none; transition: opacity 1.2s var(--expo), transform 1.6s var(--expo); }
.js .glass.rv.in { transform: none; }
.js .assemble .g { opacity: 0; }

/* presence: the property at the reading line holds the light, the others wait in the soft tone */
.js .props .checks .q { transition: color .7s ease; }
.js .props .checks.live li:not(.lit) .q { color: var(--soft); }
.js .props .checks li.lit::before { color: var(--warm); }
/* the ledger's spine is drawn by the scroll; each mark lights when the line reaches it */
.js .ledger::before { transform-origin: top; transform: scaleY(var(--spine, 0)); }
.js .ledger li::after { transition: transform .6s var(--expo), opacity .6s ease; }
.js .ledger li:not(.reached)::after { transform: scale(.4); opacity: .3; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .band { grid-template-columns: minmax(0, 1fr); padding-top: clamp(72px, 18vw, 120px); padding-bottom: clamp(72px, 18vw, 120px); }
  .label { position: static; }
  .terms > div { grid-template-columns: minmax(0, 1fr); }
  .terms dd { padding-top: 0; }
  .caption { justify-self: start; text-align: left; }
}
@media (max-width: 760px) {
  .brand { font-size: 22px; }
  .chrome-r { gap: 18px; font-size: 12px; }
  .n-note { display: none; }
  .intro-mark { font-size: 24vw; }
  h1 { font-size: 13.2vw; }
  h1 .then { font-size: 17px; margin-top: 14px; }
  .hero-copy { padding-top: calc(108px + env(safe-area-inset-top)); }
  .glass { margin: 0 calc(-1 * var(--gutter) + 8px); }
  .note p:nth-child(2)::first-letter { font-size: 3em; }
  .checks li { grid-template-columns: 40px minmax(0, 1fr); }
  .ledger::before { left: 4.5px; }
  .ledger li { grid-template-columns: minmax(0, 1fr); padding-left: 30px; row-gap: .2em; }
  .ledger li::after { left: 0; top: .5em; }
  .ledger .when { padding-top: 0; }
  .bar { height: 6vh; }
  .end-mark { font-size: min(27vw, 48vh); }
  .foot { flex-direction: column; }
}
@media (max-width: 369px) { .n-stands { display: none; } }

@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(-4%, -5%); } }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(255, 154, 90, .45); } 100% { box-shadow: 0 0 0 12px rgba(255, 154, 90, 0); } }

@media (prefers-reduced-motion: reduce) {
  .grain, .glass-grain, .ledger .is-now::after { animation: none; }
  .js .rv, .js .glass.rv { transform: none; filter: none; transition: opacity .4s ease; }
  .band::before, .field canvas, .instrument { transition: none; }
  .js .band:not(.seen)::before { transform: none; }
  .js .ledger::before { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
}