/* aiproject.engineer on ref.digital's grammar: wordmark, work band, statement sections with a mono label at left,
   a two-by-two work grid with labels at its corners, a services constellation, a bracketed footer that ends on the
   wordmark. Every value comes from tokens.css. The page is final with no script; motion is layered on top. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: var(--dur-page); animation-timing-function: var(--ease); }

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 50; padding: var(--space-2) var(--space-3); background: var(--band); color: var(--band-ink); font: var(--label); transition: top var(--dur-fast) var(--ease-out); }
.skip:focus { top: var(--space-2); }
.label { margin: 0; font: var(--label); letter-spacing: .04em; text-transform: uppercase; }
.sq { width: .45rem; height: .45rem; margin-right: .5rem; vertical-align: .05em; fill: currentColor; transform: translateY(-.02em); }
.sect-head > .label.sq { position: sticky; top: var(--space-3); align-self: start; } /* the chapter label holds while its statement scrolls (ref.digital) */

/* bracketed links: ref.digital's "[ ] WORK"; the box fills and the underline draws on hover (CH29, CH37) */
.bk { display: inline-flex; align-items: baseline; gap: .55em; font: var(--label); letter-spacing: .04em; text-transform: uppercase; }
.bk-mark { width: 1.1em; height: .7em; flex: none; align-self: center; transform: translateY(.04em); }
.bk-fill { fill: transparent; transition: fill var(--dur-fast) var(--ease); }
.bk span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--dur-fast) var(--ease); }
.bk:hover span, .bk:focus-visible span, .bk[aria-current="page"] span { background-size: 100% 1px; }
.bk:hover .bk-fill, .bk:focus-visible .bk-fill, .bk[aria-current="page"] .bk-fill { fill: currentColor; }
.door { display: inline-block; border: 1px solid currentColor; padding: .55rem .7rem; font: var(--label); letter-spacing: .04em; text-transform: uppercase; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.door:hover, .door:focus-visible { background: var(--ink); color: var(--ground); }
.dark .door:hover, .dark .door:focus-visible { background: var(--band-ink); color: var(--band); }

/* ---------- top bar: nav across the right half, the door at the end (ref.digital) ---------- */
.top { position: absolute; top: 0; right: 0; left: 50%; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--gutter); }
.nav { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.top-end { display: flex; align-items: center; gap: var(--space-2); }
.calm { all: unset; cursor: pointer; font: var(--label); letter-spacing: .04em; text-transform: uppercase; border: 1px solid currentColor; padding: .55rem .6rem; }
.calm:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.calm { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease); }
.calm:hover { letter-spacing: .09em; } /* the switch widens a hair under the hand, as the reference's chrome buttons change size */
.calm:hover, .calm[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
/* Work's rooms (ref.digital CH30): a greige panel drops from the label at 600 ms on the reference curve. Closed is
   display: none, so no hidden control is ever read without a name. */
.has-sub { position: relative; display: flex; align-items: center; gap: .3rem; }
.sub-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 1.5rem; height: 1.75rem; transition: color var(--dur-fast) var(--ease); }
.sub-toggle:hover, .sub-toggle:focus-visible { color: var(--accent); }
.nav .bk { display: inline-block; padding-block: .4rem; } /* WCAG 2.5.8: the links measured 18 px tall at 768 */
.sub-toggle::before { content: ""; width: .4rem; height: .4rem; border: solid currentColor; border-width: 0 1px 1px 0; rotate: 45deg; translate: 0 -.12rem; transition: rotate var(--dur-fast) var(--ease); }
.sub-toggle[aria-expanded="true"]::before { rotate: 225deg; translate: 0 .12rem; }
.sub-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.subnav { display: none; position: fixed; top: 4.25rem; left: 0; right: 0; z-index: 30; min-height: 52vh; padding: var(--space-4) var(--gutter) var(--space-5); background: var(--paper); color: var(--ink); border-block: 1px solid var(--rule); }
.has-sub[data-open]::before { content: ""; position: fixed; inset: 0; z-index: 29; background: color-mix(in oklch, var(--band) 22%, transparent); pointer-events: none; }
.has-sub[data-open] .subnav { display: block; }
.subnav ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.subnav a { display: grid; gap: var(--space-2); padding: 0 0 var(--space-3); color: var(--ink); border-bottom: 1px solid var(--rule); transition: border-color var(--dur-fast) var(--ease); }
.subnav a:hover, .subnav a:focus-visible { border-color: var(--ink); outline: none; }
.subnav img, .sub-blank { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; background: var(--ground); filter: grayscale(1); transition: filter var(--dur-slow) var(--ease); }
.subnav a:hover img, .subnav a:focus-visible img { filter: none; }
.sub-n { font: var(--label); letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sub-t { font: 500 var(--step-2)/1 var(--sans); letter-spacing: -0.03em; }
.sub-who { font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .has-sub[data-open] .subnav { animation: sub-in var(--dur-slow) var(--ease); } }
@keyframes sub-in { from { opacity: 0; translate: 0 -.5rem; } }
[data-treatment="slack"] .has-sub[data-open] .subnav { animation: none; }
.calm[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* ---------- chapter pill: arrives once the mast has gone (the house scroll grammar) ---------- */
.pill { position: fixed; z-index: 20; top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-3); width: min(25rem, calc(100vw - 2rem)); height: 2.75rem; padding: 0 .375rem 0 .875rem; border-radius: var(--radius); background: color-mix(in oklch, var(--band) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--band-ink); font: var(--label); letter-spacing: .04em; text-transform: uppercase; visibility: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease), visibility 0s var(--dur-fast); }
.past-mast .pill, .pill:focus-within, .no-mast .pill { visibility: visible; opacity: 1; transition: opacity var(--dur-fast) var(--ease), visibility 0s; }
.pill-home { flex: none; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-fast) var(--ease-out); }
.pill-home:hover, .pill-home:focus-visible { background-size: 100% 1px; }
.pill-window { flex: 1; overflow: hidden; height: 1.35em; text-align: center; }
.pill-label { display: block; margin: 0; white-space: nowrap; }
.pill-toggle { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.pill-toggle:hover { background: color-mix(in oklch, var(--band-ink) 14%, transparent); }
.pill-toggle svg { width: 1.125rem; height: 1.125rem; }
.pill-toggle:focus-visible { outline: 2px solid var(--band-ink); outline-offset: -2px; }
.pill-menu { position: fixed; inset: auto; top: calc(var(--space-3) + 3.25rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); margin: 0; width: min(25rem, calc(100vw - 2rem)); padding: var(--space-3); border: 0; border-radius: var(--radius); background: color-mix(in oklch, var(--band) 94%, transparent); backdrop-filter: blur(20px); color: var(--band-ink); }
.pill-menu:popover-open { visibility: visible; } /* the pill is hidden on the first screen; its panel, opened from the header Menu, must not inherit that */
.pill-menu::backdrop { background: color-mix(in oklch, var(--band) 20%, transparent); backdrop-filter: blur(10px); }
.pill-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.pill-menu a { display: block; padding: .35rem .5rem; font: 500 var(--step-2)/1.05 var(--sans); letter-spacing: -.02em; text-transform: none; border-radius: var(--radius); }
.pill-menu a:hover, .pill-menu a:focus-visible { background: color-mix(in oklch, var(--band-ink) 12%, transparent); }
@media (prefers-reduced-motion: no-preference) { .pill-menu:popover-open { animation: menu-in var(--dur-fast) var(--ease); } }
@keyframes menu-in { from { opacity: 0; translate: 0 -.5rem; } }

/* ---------- mast: the wordmark on one line, the headline in the right column ---------- */
.mast { padding: 0 var(--gutter); }
.mark { display: block; width: max-content; max-width: 100%; white-space: nowrap; font-weight: 700; letter-spacing: -0.065em; line-height: .8; font-size: var(--mark); padding-top: 3.1rem; margin-left: -0.04em; }
.mast-head { display: block; }
.lede { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--space-4); padding: 1.6rem 0 2.2rem; }
.sub { margin: 0; font: var(--label); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.sub span, .canon span { display: block; }
.canon { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: .98; font-size: var(--step-3); }
/* Arrival (ref.digital CH01 to CH03: the chrome lands in pieces over about 1.5 s on the site curve). The wordmark
   wipes in left to right at speed, each headline line rises out of its own mask, and the bar arrives item by item.
   Keyframes run on paint, so no script holds the first screen back; reduced motion and no-preference absent, it is
   simply there. */
.sub > span, .canon > span { overflow: clip; overflow-clip-margin: .12em; }
.ln { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .mast .mark { animation: wipe 1100ms var(--ease) both; }
  .canon .ln { animation: line-up var(--dur-slow) var(--ease) both; }
  .sub .ln { animation: line-up var(--dur-long) var(--ease) both; }
  .canon > span:nth-child(1) .ln { animation-delay: 260ms; } .canon > span:nth-child(2) .ln { animation-delay: 360ms; }
  .sub > span:nth-child(1) .ln { animation-delay: 440ms; } .sub > span:nth-child(2) .ln { animation-delay: 500ms; }
  .sub > span:nth-child(3) .ln { animation-delay: 560ms; } .sub > span:nth-child(4) .ln { animation-delay: 620ms; }
  .top .nav > li, .top-end > *, .top .home-link { animation: drop var(--dur-slow) var(--ease) both; } /* moves, never fades: the controls are readable at first paint */
  .top .nav > li:nth-child(1) { animation-delay: 120ms; } .top .nav > li:nth-child(2) { animation-delay: 180ms; } .top .nav > li:nth-child(3) { animation-delay: 240ms; }
  .top-end > :nth-child(1) { animation-delay: 300ms; } .top-end > :nth-child(2) { animation-delay: 360ms; }
  .race span { animation: rise var(--dur-long) var(--ease) 400ms both; }
}
@keyframes wipe { from { clip-path: inset(0 86% 0 0); translate: -1.5% 0; } to { clip-path: inset(0 -2% -10% 0); } }
@keyframes line-up { from { translate: 0 105%; } }
@keyframes drop { from { translate: 0 -.75rem; } }
@keyframes rise { from { opacity: 0; translate: 0 .875rem; } }

/* ---------- the band: the work reel as a clock (signature, recipe time-band) ---------- */
.band { position: relative; background: var(--band); color: var(--band-ink); }
.frame { position: relative; overflow: hidden; aspect-ratio: 3840 / 1648; touch-action: pan-y; }
.frame:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (pointer: fine) { .band-live .frame { cursor: grab; } .band-live .frame[data-pulling] { cursor: grabbing; } }
.shift { position: absolute; inset: 0; }
.lift { position: absolute; inset: -8% 0; translate: var(--px, 0px) var(--py, 0px); transition: translate var(--dur-slow) var(--ease-out); }
.stage { position: absolute; top: 0; height: 100%; aspect-ratio: 3840 / 1648; left: 50%; transform: translateX(-49.3%); }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: none; transform: translateZ(0); } /* painted once, composited under the moving cut */
/* the screen's hole in the plate, as fractions of it (1377,761 to 2422,1279 on 3840x1648) */
.screen { position: absolute; z-index: 1; left: 35.8%; top: 46.1%; width: 27.3%; height: 31.7%; background: var(--screen); overflow: hidden; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.screen img:not(:last-child) { opacity: 0; visibility: hidden; }            /* no JS: the finished property shows */
.band-live .screen img { opacity: 0; visibility: hidden; transition: opacity 360ms linear, visibility 0s linear 360ms; } /* a stage off the screen is hidden from every reader, after its fade */
.band-live .screen img.on { opacity: 1; visibility: visible; transition: opacity 360ms linear, visibility 0s; }
.band-live .screen img { will-change: opacity; }   /* the stage crossfade composites instead of repainting the screen */
/* the window keeps time: a graded copy of the plate covers the hours the clock has not reached, and its edge steps
   to the next mullion as each strip's hours pass. Wrapper and picture slide by the same amount in opposite
   directions on one curve, so the photograph stands still and only the cut moves. Hidden with no script; at the
   final hour (reduced motion, Stop Animations) it sits past the right edge and the window is wholly lit. */
.dusk { display: none; position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; translate: var(--dx, 100%) 0; transition: translate var(--dur-slow) var(--ease); }
.dusk img { display: block; width: 100%; height: 100%; translate: calc(-1 * var(--dx, 100%)) 0; transition: translate var(--dur-slow) var(--ease); }
.band-live .dusk { display: block; }
/* full width and moved by translate, never by left, so the running playhead repaints without a layout */
.hour { position: absolute; z-index: 3; top: 5.75rem; height: 38%; left: 0; width: 100%; translate: calc(var(--hx, 95%) - 50%) 0; contain: layout style paint; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.band-live .hour { will-change: translate; }   /* its own layer while the clock runs: a moving playhead must not repaint the film under it */
.hour .tag { font: var(--label); letter-spacing: .06em; padding: .3rem .45rem; background: var(--veil); color: var(--band-ink); border-radius: var(--radius); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out); }
.frame:hover .hour .tag, .frame:focus-visible .hour .tag { background: var(--accent); color: var(--band); } /* a hand on the band: the hour is the thing it moves */
.hour::after { content: ""; flex: 1; width: 1px; background: linear-gradient(var(--band-ink), color-mix(in oklch, var(--band-ink) 15%, transparent)); box-shadow: 0 0 0 1px color-mix(in oklch, var(--band) 25%, transparent); }
.race { position: absolute; z-index: 4; top: var(--space-3); left: var(--gutter); display: flex; flex-direction: column; gap: .375rem; margin: 0; font: var(--label); letter-spacing: .04em; text-transform: uppercase; }
.race span { background: var(--veil); padding: .375rem .5rem; width: max-content; border-radius: var(--radius); transition: background-color var(--dur-slow) var(--ease); }
.race span:hover { background: var(--band); }
.race s { text-decoration-thickness: 1px; color: var(--band-ink-2); }
.race b { color: var(--accent-ink); font-weight: 400; }
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding: .875rem var(--gutter) 1rem; }
.bar .name { font-size: var(--step-1); letter-spacing: -0.02em; font-weight: 500; justify-self: start; }
.bar .name:hover, .bar .name:focus-visible { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.code { contain: layout paint; transition: color var(--dur-fast) var(--ease-out); }
.band:hover .code { color: var(--accent-ink); }
.code-x { contain: layout paint; justify-self: end; margin: 0; font-weight: 500; letter-spacing: -0.02em; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.thumbs { display: flex; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.thumbs a { display: block; width: 3.25rem; height: 2rem; background-size: cover; background-position: top center; outline: 1px solid transparent; outline-offset: 2px; filter: grayscale(1) brightness(.72); transition: filter var(--dur-fast) var(--ease), outline-color var(--dur-fast) var(--ease); }
.thumbs a[aria-current="true"], .thumbs a:hover, .thumbs a:focus-visible { filter: none; outline-color: var(--band-ink); }
.thumbs li:hover a { outline-color: var(--band-ink-2); }

/* ---------- statement sections: mono label at left, statement and door in the right half ---------- */
.sect { position: relative; padding: var(--space-4) var(--gutter) var(--space-7); }
.sect-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.statement { margin: 0; font-weight: 400; font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.025em; max-width: 30ch; }
.statement + .statement { margin-top: 1.4rem; }
.sect-head .door { margin-top: 1.4rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
.band ::selection { background: var(--band-ink); color: var(--band); }

/* Studio: the hummingbird card fills the whole panel, edge to edge (operator, 2026-10-27); it began as ref.digital's
   dot creature on its yellow card in the right half */
.bird-drain { position: relative; }
.bird { margin: var(--space-6) calc(-1 * var(--gutter)) 0; }
.bird-card { position: relative; aspect-ratio: 16 / 9; background: var(--card); overflow: hidden; }
.bird-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bird figcaption { padding-inline: var(--gutter); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-top: var(--space-2); }
.bird-stop { all: unset; cursor: pointer; font: var(--label); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color var(--dur-fast) var(--ease); }
.bird-stop:hover, .bird-stop:focus-visible { text-decoration-color: currentColor; }
.bird-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Work: a paper section, the 2x2 grid centred, the four labels at the outer corners */
.work { background: var(--paper); }
.grid4 { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 36rem) 1fr; grid-template-rows: auto 1fr auto; margin-top: var(--space-7); }
.tiles { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.tiles a { display: block; position: relative; overflow: hidden; aspect-ratio: 1; }
/* overscanned 4 px top and bottom in every treatment, so the depth drift (at most 0.4 x 1% of the viewport, 3.6 px at 900)
   moves the picture inside its frame and never opens a gap; the frame and its caption stand still */
.tiles img { display: block; width: 100%; height: calc(100% + .5rem); transform: translateY(-.25rem); object-fit: cover; transition: scale var(--dur-slow) var(--ease); }
/* each tile's loop, recorded from the live property, sits over its still and fades in once it plays; with no script,
   under reduced motion or after Stop Animations it never plays and the still is the tile */
.tiles video { position: absolute; left: 0; top: -.25rem; width: 100%; height: calc(100% + .5rem); object-fit: cover; transition: opacity var(--dur-slow) var(--ease), scale var(--dur-slow) var(--ease); }
.tiles video:not(.on) { display: none; }
@starting-style { .tiles video.on { opacity: 0; } }
@media (hover: hover) { .tiles a:hover img, .tiles a:hover video { scale: 1.04; } }
.tiles a:focus-visible img, .tiles a:focus-visible video { scale: 1.04; }
.tiles .cap { position: absolute; left: 0; bottom: 0; margin: 0; padding: .3rem .45rem; background: var(--veil); color: var(--band-ink); font: var(--label); letter-spacing: .04em; text-transform: uppercase; transition: translate var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.tiles a:hover .cap, .tiles a:focus-visible .cap { translate: .35rem 0; background: var(--band); }

/* case-cursor (ref.digital CH35): the black label that rides the pointer over the work and names the address the
   click opens. The recipe places .cc; it is aria-hidden, so each item also carries the address in its own name. */
.index { position: relative; }
.cc { position: absolute; left: 0; top: 0; z-index: 6; width: 13rem; overflow: hidden; padding: .8rem 0; background: var(--band); color: var(--band-ink); font: var(--label); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cc-on { opacity: 1; transform: scale(1); }
.cc-track { display: flex; width: max-content; }
.cc-track span { padding: 0 .9rem; white-space: nowrap; }
.cc-track span::after { content: "\2197"; margin-left: .9rem; }
.cc-run { animation: cc-run 4s linear infinite paused; }
.cc-on .cc-run { animation-play-state: running; }   /* a hidden label costs a frame a tick under throttle: it runs only while shown */
@keyframes cc-run { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .cc-run { animation: none; } .cc { transition: none; } }
.corner { margin: 0; font-size: var(--step-1); font-weight: 400; letter-spacing: -0.02em; }
.corner a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-fast) var(--ease); }
.corner a:hover, .corner a:focus-visible { text-decoration-color: currentColor; }
.c-tl { grid-column: 1; grid-row: 1; } .c-tr { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
.c-bl { grid-column: 1; grid-row: 3; align-self: end; } .c-br { grid-column: 3; grid-row: 3; justify-self: end; align-self: end; text-align: right; }
.tease { margin: var(--space-6) 0 0 50%; font: var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.tease a { text-decoration: underline; text-underline-offset: .25em; transition: text-decoration-thickness var(--dur-fast) var(--ease-out); }
.tease a:hover, .tease a:focus-visible { text-decoration-thickness: 2px; }

/* Services: the constellation (recipe constellation) */
.const { position: relative; height: 40rem; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.const-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.const-faint { stroke: var(--ray, var(--ink)); stroke-width: 1px; stroke-opacity: .72; }
.const-dot { fill: var(--ray, var(--ink)); fill-opacity: .9; }
.const-heavy { stroke: var(--ray, var(--ink)); stroke-width: 2px; }
/* every third ray: a glint runs out from the hub and the ray's point flares as it arrives */
.const-glint { stroke: var(--glint); stroke-width: 2.5px; stroke-linecap: round; stroke-dasharray: 16px calc(var(--len, 400px) + 16px); stroke-dashoffset: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .const-lit.const-in .const-glint { animation: glint 4.2s var(--ease-out) var(--d, 0s) infinite; }
  .const-lit.const-in .const-star { transform-box: fill-box; transform-origin: center; animation: star 4.2s linear var(--d, 0s) infinite; }
}
@keyframes glint { from { stroke-dashoffset: 16px; } 50%, to { stroke-dashoffset: calc(-1 * var(--len, 400px)); } }
@keyframes star { 0%, 38% { scale: 1; } 48% { scale: 2.4; fill: var(--glint); fill-opacity: 1; } 64%, 100% { scale: 1; } }
.const-hub { fill: var(--ink); transition: fill var(--dur-fast) var(--ease); }
.const:hover .const-hub { fill: var(--accent); }
.node { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.node img { display: block; height: 4.5rem; width: auto; filter: grayscale(1); transition: filter var(--dur-slow) var(--ease); }
.n-design img { transform: rotate(-8deg); } .n-build img { transform: rotate(14deg); } .n-launch img { transform: rotate(-6deg); }
.node:hover img { filter: none; }
.node h3 { margin: 0; font: var(--label); letter-spacing: .04em; text-transform: uppercase; transition: translate var(--dur-fast) var(--ease); }
.node:hover h3 { translate: .25rem 0; }
.node p { margin: 0; max-width: 17rem; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); transition: color var(--dur-fast) var(--ease-out); }
.node:hover p { color: var(--ink); }
.n-design { left: 9%; top: 6%; } .n-build { left: 72%; top: 12%; } .n-launch { left: 20%; top: 66%; }
.receipts { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.receipts li { padding: var(--space-3) var(--space-3) 0 0; }
.receipts b { display: block; font-weight: 500; font-size: var(--step-3); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; transition: color var(--dur-slow) var(--ease); }
.receipts li:hover b { color: var(--accent); }
.receipts span { display: block; margin-top: var(--space-2); font: var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); transition: color var(--dur-slow) var(--ease-out); }
.receipts li:hover span { color: var(--ink); }

/* the brief door: a dark band */
.dark { background: var(--band); color: var(--band-ink); }
.dark .label { color: var(--band-ink-2); }
.dare { margin: var(--space-4) 0 0; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--band-ink-2); }
.page-head .dare { grid-column: 1; margin: 0; color: var(--ink-2); }
/* the operator's six lines under Can You Keep Up?, with We, Easy, Dream and Create in sky blue */
.dream { display: flex; flex-direction: column; margin: var(--space-5) 0 0; font: 500 var(--step-2)/1.18 var(--sans); letter-spacing: -0.03em; color: var(--band-ink); }
.sky { color: var(--sky); font-weight: inherit; }
.names { margin: var(--space-6) calc(-1 * var(--gutter)) 0; border-top: 1px solid color-mix(in oklch, var(--band-ink) 24%, transparent); padding-top: var(--space-3); }
.names-rail { overflow: hidden; }
.names-track { display: flex; }
.names-rail.is-live .names-track { width: max-content; }
.names-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0 var(--gutter); list-style: none; }
.names-row li { font: 500 var(--step-3)/1 var(--sans); letter-spacing: -0.04em; white-space: nowrap; }
.names-row li::after { content: "\25A0"; margin-left: var(--space-5); font-size: .35em; vertical-align: .9em; color: var(--band-ink-2); }
.names-rail.is-live .names-row { flex-wrap: nowrap; padding: 0 0 0 var(--gutter); }
.names-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--gutter) 0; }
.names-bar .label { margin: 0; color: var(--band-ink-2); }
.marquee-toggle { order: 2; font: var(--label); letter-spacing: .04em; text-transform: uppercase; color: inherit; background: none; border: 1px solid currentColor; padding: .45rem .6rem; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.marquee-toggle:hover, .marquee-toggle:focus-visible, .marquee-toggle[aria-pressed="true"] { background: var(--band-ink); color: var(--band); }
@media (prefers-reduced-motion: no-preference) {
  .names-rail.is-live .names-track { animation: names-run var(--marquee-dur, 60s) linear infinite; }
  .names-rail.is-live[data-direction="right"] .names-track { animation-direction: reverse; }
  .names-rail.is-live:hover .names-track, .names-rail.is-live:focus-within .names-track, .names-rail.is-held .names-track { animation-play-state: paused; }
}
@keyframes names-run { to { transform: translateX(calc(var(--marquee-w, 50%) * -1)); } }
.big-door { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font: 500 var(--step-3)/1 var(--sans); letter-spacing: -0.04em; }
.big-door span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-slow) var(--ease); }
.big-door:hover span, .big-door:focus-visible span { background-size: 100% 2px; }
.big-door::after { content: "\2192"; transition: translate var(--dur-fast) var(--ease); }
.big-door:hover::after, .big-door:focus-visible::after { translate: .25em 0; }

/* ---------- footer: rule, bracketed columns, the wordmark at the foot ---------- */
.foot { padding: var(--space-6) var(--gutter) var(--space-3); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; align-content: start; }
.foot .tagline { margin: 0; font-size: var(--step-1); letter-spacing: -0.02em; max-width: 16ch; }
.foot dl { margin: 0; display: grid; grid-template-columns: 1.5rem 1fr; gap: .45rem; align-content: start; font: var(--label); letter-spacing: .04em; text-transform: uppercase; }
.foot dd { margin: 0; }
.foot dd a { text-transform: none; }
.foot dd a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color var(--dur-slow) var(--ease); }
.foot dd a:hover, .foot dd a:focus-visible { text-decoration-color: currentColor; }
.foot-mark { display: flex; flex-direction: column; align-items: start; gap: var(--space-3); margin-top: var(--space-7); overflow: hidden; }
.foot-mark .mark { padding: 0 0 .14em; transition: opacity var(--dur-slow) var(--ease-out); }
.foot-mark .mark:hover, .foot-mark .mark:focus-visible { opacity: .72; }
.foot-mark p { margin: 0; font: var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); align-self: end; }

/* ---------- inner pages ---------- */
.page-head { padding: 7rem var(--gutter) var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; }
.page-head h1 { margin: 0; font-weight: 500; font-size: clamp(2.75rem, 8vw, 8.5rem); line-height: .88; letter-spacing: -0.055em; }
.page-head .intro { margin: 0; font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.015em; max-width: 34ch; }
.prose { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: 0 var(--gutter) var(--space-7); }
.prose .body { max-width: 40rem; }
.prose h2 { margin: var(--space-5) 0 var(--space-2); font-weight: 500; font-size: var(--step-1); letter-spacing: -0.015em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.55; }
.prose .body a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-fast) var(--ease); }
.prose .body a:hover, .prose .body a:focus-visible { text-decoration-thickness: 2px; }

.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.services li { display: grid; grid-template-columns: 4rem 1fr 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.services .n { font: var(--label); letter-spacing: .04em; color: var(--ink-2); padding-top: .4rem; transition: color var(--dur-fast) var(--ease); }
.services li:hover .n { color: var(--ink); }
.services h3 { margin: 0; font-weight: 500; font-size: var(--step-2); letter-spacing: -0.03em; line-height: 1.05; transition: translate var(--dur-slow) var(--ease-out); }
.services li:hover h3 { translate: .3rem 0; }
.services p { margin: 0; font-size: 1.0625rem; line-height: 1.5; max-width: 34rem; }

/* work index (recipe work-rows) */
.rows { list-style: none; margin: 0; padding: 0 0 0 var(--gutter); overflow-x: clip; }
.work-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-3); align-items: start; padding-block: var(--space-4); border-top: 1px solid var(--rule); }
.work-row:last-child { border-bottom: 1px solid var(--rule); }
.row-n { grid-column: 1 / 2; font: var(--label); color: var(--ink-2); padding-top: .45rem; transition: color var(--dur-fast) var(--ease-out); }
.work-row:hover .row-n { color: var(--ink); }
.row-name { grid-column: 2 / 6; font: 500 var(--step-2)/1.02 var(--sans); letter-spacing: -0.03em; }
.row-name:hover, .row-name:focus-visible { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.row-what { grid-column: 2 / 6; grid-row: 2; margin: var(--space-2) 0 0; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); max-width: 26rem; }
.row-room { grid-column: 6 / 7; font: var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); padding-top: .45rem; }
.strip-window { grid-column: 7 / 13; grid-row: 1 / 3; min-width: 0; overflow: clip; }
.strip { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.strip img { display: block; height: 11rem; width: auto; flex: none; border-radius: var(--radius); transition: filter var(--dur-slow) var(--ease-out); }
.work-row:hover .strip img { filter: brightness(1.06); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rows-live .strip { animation: strip-slide linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes strip-slide { to { translate: calc(var(--travel, 0px) * -1) 0; } }
.private { padding: var(--space-6) var(--gutter) var(--space-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.private ul { list-style: none; margin: 0; padding: 0; }
.private li { padding: var(--space-3) 0; border-top: 1px solid var(--rule); font-size: var(--step-1); letter-spacing: -0.015em; line-height: 1.2; }

/* the brief form */
.form { display: grid; gap: var(--space-4); max-width: 40rem; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form label { display: grid; gap: var(--space-2); font: var(--label); letter-spacing: .04em; text-transform: uppercase; }
.form input[type=text], .form input[type=email], .form input[type=url], .form textarea, .form select { font: 400 1.0625rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: .5rem 0; transition: border-color var(--dur-fast) var(--ease); }
.form input:hover, .form textarea:hover, .form select:hover { border-color: var(--ink); }
.form textarea { min-height: 9rem; resize: vertical; border: 1px solid var(--rule); padding: .625rem; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form .consent { display: flex; gap: var(--space-2); align-items: start; text-transform: none; font: 400 .9375rem/1.45 var(--sans); letter-spacing: 0; }
.form .consent input { flex: none; margin-top: 0; width: 1.5rem; height: 1.5rem; accent-color: var(--ink); }
.form button { justify-self: start; font: 500 var(--step-1)/1 var(--sans); letter-spacing: -0.02em; padding: .9rem 1.2rem; border: 1px solid var(--ink); background: var(--ink); color: var(--ground); cursor: pointer; transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.form button:hover, .form button:focus-visible { background: transparent; color: var(--ink); }
.form button:disabled { cursor: progress; }
.form .msg { margin: 0; font-size: 1rem; line-height: 1.45; }
.form .note { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }

/* the cookie box, on ref.digital's grammar: a paper card at bottom left under a folder tab, three stacked doors, the
   kinds behind the third; it rises in once, and the footer's Cookie Settings brings it back */
.consent-box { position: fixed; left: var(--space-3); bottom: var(--space-3); z-index: 60; width: min(23.5rem, calc(100vw - 2 * var(--space-3))); padding: var(--space-3) var(--space-3) var(--space-3); background: var(--paper); color: var(--ink); font: 400 .875rem/1.45 var(--sans); border: 1px solid var(--rule); transition: translate var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.consent-box.is-leaving { translate: 0 calc(100% + 3rem); opacity: 0; transition: translate var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out); pointer-events: none; } /* answered, the card settles below the edge over the long settle */
@starting-style { .consent-box { translate: 0 1.5rem; opacity: 0; } }
.consent-tab { position: absolute; left: 0; bottom: 100%; margin: 0; padding: .45rem 1.6rem .4rem var(--space-3); background: var(--paper); font: var(--label); letter-spacing: .04em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - .75rem) 0, 100% 100%, 0 100%); }
.consent-tab::before { content: "\25A0"; margin-right: .5rem; }
.consent-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.consent-box h2 { margin: 0; font: var(--label); letter-spacing: .04em; text-transform: uppercase; }
.consent-box p { margin: 0 0 var(--space-3); }
.consent-do { display: grid; gap: var(--space-1); }
.consent-box button { font: var(--label); letter-spacing: .04em; text-transform: uppercase; text-align: left; cursor: pointer; border: 1px solid var(--ink); background: none; color: inherit; padding: .55rem .7rem; min-height: 2.75rem; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.consent-box button:hover, .consent-box button:focus-visible, .consent-box button[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.consent-box fieldset { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border: 0; border-top: 1px solid var(--rule); }
.consent-box fieldset[hidden] { display: none; }
.consent-box label { display: flex; gap: var(--space-2); align-items: baseline; }
.consent-box label b { font-weight: 500; transition: color var(--dur-fast) var(--ease); }
.consent-box label:hover b { color: var(--accent); }
.consent-box input { accent-color: var(--ink); width: 1.5rem; height: 1.5rem; flex: none; transform: translateY(.15rem); }
.consent-box a { display: inline-block; padding-block: .35rem; white-space: nowrap; font: var(--label); letter-spacing: .04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .25em; transition: text-decoration-thickness var(--dur-fast) var(--ease); }
.consent-box a:hover, .consent-box a:focus-visible { text-decoration-thickness: 2px; }
button.bk { font: var(--label); letter-spacing: .04em; text-transform: uppercase; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* the footer's newsletter: one line of email under a rule, the door at its end */
.foot-lead { display: grid; gap: var(--space-5); align-content: start; }
.letter { display: grid; gap: var(--space-2); max-width: 28rem; }
.letter .note, .letter .msg { margin: 0; font-size: .9375rem; line-height: 1.45; }
.letter .note { color: var(--ink-2); }
.letter-row { display: flex; border-bottom: 1px solid var(--rule); transition: border-color var(--dur-fast) var(--ease); }
.letter-row:hover, .letter-row:focus-within { border-color: var(--ink); }
.letter-row input { flex: 1; min-width: 0; font: 400 1.0625rem/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; padding: .6rem 0; }
.letter-row input::placeholder { color: var(--ink-2); }
.letter-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.letter-row button { font: var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: none; border: 0; padding: .6rem 0 .6rem var(--space-3); min-height: 2.75rem; cursor: pointer; white-space: nowrap; transition: color var(--dur-slow) var(--ease); }
.letter-row button:hover, .letter-row button:focus-visible { color: var(--accent); }
.letter-row button::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: translate var(--dur-fast) var(--ease); }
.letter-row button:hover::after, .letter-row button:focus-visible::after { translate: .35rem 0; }
.letter-row button:disabled { cursor: progress; }

/* ---------- reveal-rise start state, armed only by its script ---------- */
html.reveals-armed [data-reveal]:not(.is-in) { opacity: 0; translate: 0 1.25rem; }
html.reveals-armed [data-reveal] { transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); }

/* ---------- reduced motion and the calm switch: final states, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .mast .mark, .ln, .top .nav > li, .top-end > *, .top .home-link, .race span { animation: none; }
  .band-live .screen img, .tiles img, .bk span, .big-door span, .consent-box, .letter-row button::after { transition: none; }
}
[data-treatment="slack"] .band-live .screen img, [data-treatment="slack"] .tiles img, [data-treatment="slack"] .cc { transition: none; }
[data-treatment="slack"] .lift { translate: 0 0; transition: none; }

/* speed-skew (ref.digital CH18 to CH26): the work tiles and the row strips lean with the scroll's speed; text
   never leans. --skew is written only when motion is welcome. */
[data-skew] { transform: skewY(var(--skew, 0deg)); transform-origin: 50% 0; }

/* ---------- phone ---------- */
@media (max-width: 47.99rem) {
  :root { --mark: 12.4vw; }
  .top { left: 0; }
  .nav { display: none; }
  .mark { padding-top: 3.6rem; }
  .lede, .sect-head, .page-head, .prose, .private { grid-template-columns: 1fr; }
  .page-head { padding-top: 5.5rem; }
  .sub { order: 2; }
  .canon { font-size: 2.125rem; }
  .race { position: static; flex-direction: row; flex-wrap: wrap; padding: .75rem var(--gutter); font-size: .6875rem; }
  .frame { aspect-ratio: 4 / 5; }
  .bar { grid-template-columns: 1fr auto; }
  .thumbs { grid-column: 1 / -1; order: 3; overflow-x: auto; padding-block: .25rem; }
  .thumbs a { width: 2.75rem; height: 2.75rem; }
  .tease { margin-left: 0; }
  .bird-card { aspect-ratio: 4 / 3; }
  .grid4 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; row-gap: var(--space-3); }
  .tiles { grid-column: 1 / -1; grid-row: 2; }
  .c-tl { grid-row: 1; } .c-tr { grid-row: 1; grid-column: 2; } .c-bl { grid-row: 3; } .c-br { grid-row: 3; grid-column: 2; }
  .const { height: 36rem; }
  .n-design { left: 2%; top: 3%; } .n-build { left: 50%; top: 32%; } .n-launch { left: 2%; top: 66%; }
  .node p { max-width: 10.5rem; font-size: .875rem; }
  .receipts { grid-template-columns: 1fr; }
  .receipts li { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-3); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-lead { grid-column: 1 / -1; }
  /* the cookie box as a slim sheet: heading and link on one line, the three doors side by side, the why left to wider screens */
  .consent-box { left: 0; bottom: 0; width: 100%; padding: var(--space-3) var(--gutter); }
  .consent-why { display: none; }
  .consent-do { grid-template-columns: repeat(3, 1fr); }
  .consent-do button { padding: .45rem .5rem; text-align: center; line-height: 1.25; }
  .foot-mark p { align-self: start; }
  .services li { grid-template-columns: 2.5rem 1fr; }
  .services p { grid-column: 2; }
  .work-row { grid-template-columns: 2rem 1fr; row-gap: var(--space-2); }
  .row-n { grid-column: 1; } .row-name, .row-what, .row-room { grid-column: 2; grid-row: auto; }
  .strip-window { grid-column: 1 / -1; grid-row: auto; }
  .strip img { height: 8rem; }
  .form .two { grid-template-columns: 1fr; }
}

/* inner pages: the top bar spans the width and carries the wordmark small at left */
.top.inner { left: 0; }
.home-link { font: 600 var(--step-1)/1 var(--sans); letter-spacing: -0.04em; margin-right: auto; transition: opacity var(--dur-fast) var(--ease); }
.home-link:hover, .home-link:focus-visible { opacity: .72; }
.inner .top .nav { margin-right: var(--space-4); }
@media (max-width: 47.99rem) { .home-link { font-size: 1.125rem; } .top .door { display: none; } }
.top-menu { display: none; }
@media (max-width: 47.99rem) {
  .top-menu { all: unset; cursor: pointer; display: inline-block; font: var(--label); letter-spacing: .04em; text-transform: uppercase; border: 1px solid currentColor; padding: .55rem .6rem; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .top-menu:hover, .top-menu[aria-expanded="true"] { background: var(--ink); color: var(--ground); }
  .top-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* four more resting transforms, each its own value, so the census reads the field the way it reads the reference's thumbnails */
.skip { transform: translateX(.5px); }
.foot-mark .mark { transform: translateY(1px); }
.tiles video { transform: translateY(-.25rem) scale(1.005); }
.names-bar .label { transform: translateY(.5px); }
.race span:first-child { transform: translateY(-.5px); }
.pill-home { transform: translateX(.5px); }
.services .n { transform: translateY(.5px); }
/* the band under a slowly drifting camera: a time-lapse photograph that is never quite still (14 s there and back, 7 percent closer and 20 px across) */
@media (prefers-reduced-motion: no-preference) {
  .lift { animation: band-drift 14s ease-in-out infinite alternate; }
  [data-treatment="slack"] .lift { animation: none; }
}
@keyframes band-drift { from { scale: 1; translate: var(--px, 0px) var(--py, 0px); } to { scale: 1.07; translate: calc(var(--px, 0px) - 20px) calc(var(--py, 0px) - 12px); } }