/* ring.css — the hero, v7 (30 Sep): a ring of answers around the setting sun, over an infinity pool.
   The place and the ring are one WebGL canvas (scene.js); what's here is the frame around it: the line on
   the pool, the deck and the question resting on the coping, the page that opens from a card, and the card
   that leaves as the door. Prefixes: rh (hero), rs (the page), rw/rsw (its widget), rc/rf (the door card). */

.rh { position: relative; height: 230vh; height: 230svh; background: #000; }
.rh__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: #000; }
/* in Safari the stage is fixed for as long as it is pinned (pin.js; see PINNING IN SAFARI in site.css) */
html.pin-fixed #top.rh { clip-path: inset(0); }
html.pin-fixed #top.rh .rh__pin.is-fixed { position: fixed; top: 0; left: 0; right: 0; }
.rh__gl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.rh__motes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.rh__hit { position: absolute; inset: 0; z-index: 2; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.rh__night { position: absolute; inset: 0; z-index: 8; background: var(--ink); opacity: 0; pointer-events: none; }
/* no WebGL: the golden plate, still */
.rh--flat .rh__pin { background: #d9a070 url('../img/pool-day-1600.webp') 64% 38% / cover no-repeat; }
.rh--flat .rh__gl, .rh--flat .rh__hit { display: none; }

/* the header, over the place: clearer glass that takes the sky's colour */
html.on-place:not([data-head="dark"]) .hd { --hd-glass: rgba(255, 246, 236, .42); --hd-line: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px var(--hd-line), 0 18px 40px -26px rgba(80, 36, 8, .45); }

/* ─── the door card's page face (the flyer) ─── */
.rc__pg, .rf__pg { position: absolute; left: 0; top: 0; width: 232px; height: 306px; overflow: hidden; border-radius: 15px; background: var(--bk-paper); color: var(--bk-ink);
  --bk-mono: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
  box-shadow: 0 1px 1px rgba(40, 24, 12, .1), 0 24px 44px -22px rgba(40, 20, 8, .55), 0 0 0 1px rgba(40, 24, 12, .06); }
.rc__face { position: absolute; inset: 0; }
.rc__band { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; background: var(--bk-band); color: var(--bk-band-ink); white-space: nowrap; overflow: hidden; }
.rc__band b { font: 500 10.5px/1 var(--bk-mast); letter-spacing: .14em; text-transform: uppercase; }
.rc__mk { width: 12px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--bk-logo) center / contain no-repeat; mask: var(--bk-logo) center / contain no-repeat; }
.rc__ph { position: relative; height: 122px; overflow: hidden; background: var(--bk-cool); }
.rc__ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* the kicker's and the headline's margins are part of the card's setting (the painted texture has them, see
   cardface.js): brief.css's `.bk p { margin: 0 }` must not take them, or the DOM copy sits 14px above the texture
   and the two show as a double image while one fades into the other */
.rc__in { padding: 12px 14px 0; }
.rc__k, .bk .rc__k { margin: 0 0 7px; display: flex; align-items: center; gap: 6px; font: 600 8.5px/1 var(--bk-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--bk-accent); }
.rc__k::before { content: ""; width: 5px; height: 5px; background: var(--bk-accent); }
.rc__h, .bk .rc__h { margin: 0 0 7px; font: var(--bk-title-w) 19px/1.08 var(--bk-title); letter-spacing: -.014em; text-wrap: balance; }
.rc__h em { font-style: italic; color: var(--bk-accent); }
.rc__a { margin: 0; font: 400 10.5px/1.45 'Source Serif 4', Georgia, serif; color: var(--bk-ink-2); text-align: justify; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc__l { display: block; white-space: nowrap; overflow: hidden; }
.rc__l--j { text-align-last: justify; }
.rc__f { position: absolute; left: 14px; right: 14px; bottom: 11px; display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--bk-soft-2);
  font: italic 400 10px/1 'Source Serif 4', Georgia, serif; color: var(--bk-ink-3); }
.rc__f span:last-child { font: 500 7.5px/10px var(--bk-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-ink-4); }
/* the light of the ring still on it as it leaves (it clears as the card comes forward) */
.rf__pg .rc__lt { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: var(--tint, 0);
  background: var(--amb, rgb(255, 244, 231)); }

/* ─── the page: the answering Brief, full size ─── */
.rh__stage { position: absolute; left: 0; top: 0; z-index: 6; width: 460px; transform-origin: 50% 50%; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.rh__stage.is-live { pointer-events: auto; }
.rs { position: relative; overflow: hidden; border-radius: 18px; background: var(--bk-paper); color: var(--bk-ink); font: 400 14px/1.5 'Source Serif 4', Georgia, serif; --bk-mono: 'JetBrains Mono', ui-monospace, monospace;
  box-shadow: 0 2px 3px rgba(40, 24, 12, .08), 0 60px 110px -40px rgba(40, 14, 0, .6), 0 18px 34px -20px rgba(40, 14, 0, .3), 0 0 0 1px rgba(40, 24, 12, .05); }
/* the sun's light still on its edge, and one sweep of light as it lands */
.rs::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 248, 236, .8), inset 0 0 0 1px rgba(255, 214, 160, .22); }
.rs::after { content: ""; position: absolute; inset: -40% -60%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 244, 226, .55) 50%, rgba(255, 255, 255, 0) 58%); transform: translateX(-60%); }
.rh__stage.is-live .rs::after { animation: rs-sweep 1.5s var(--ease-io) .05s 1 both; }
@keyframes rs-sweep { 0% { opacity: 1; transform: translateX(-60%); } 100% { opacity: 1; transform: translateX(60%); } }
.rs [data-r] { opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); }
.rs [data-r].on { opacity: 1; transform: none; }
.rs .rs__band[data-r], .rs .rs__ph[data-r] { transform: none; transition: opacity .25s linear; }
.rs__band { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; background: var(--bk-band); color: var(--bk-band-ink); white-space: nowrap; }
.rs__band b { font: 500 13px/1 var(--bk-mast); letter-spacing: .14em; text-transform: uppercase; }
.rs__band .rc__mk { width: 14px; height: 17px; }
.rs__band small { font: 500 7.5px/1 var(--bk-mono); letter-spacing: .26em; text-transform: uppercase; opacity: .7; padding-left: 10px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.rs__band span { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 7.5px/1 var(--bk-mono); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.rs__band span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: bk-live 2s ease-in-out infinite; }
.rs__ph { position: relative; height: 176px; margin: 0; overflow: hidden; background: var(--bk-cool); }
.rs__ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rs__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 14px 8px; display: flex; justify-content: space-between; background: linear-gradient(to top, rgba(20, 14, 10, .62), transparent); font: italic 400 11.5px/1.2 'Source Serif 4', Georgia, serif; color: #fff; }
.rs__ph figcaption b { font: 500 7.5px/1.5 var(--bk-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.rs__in { padding: 14px 20px 16px; }
.rs__k { display: flex; justify-content: space-between; padding: 9px 0 7px; margin-bottom: 11px; border-top: 1px solid var(--bk-ink); border-bottom: 1px solid var(--bk-soft);
  font: 600 8.5px/1 var(--bk-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bk-ink-3); }
.rs__k span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--bk-accent); }
.rs__k span:first-child::before { content: ""; width: 6px; height: 6px; background: var(--bk-accent); }
.rs__h { margin: 0 0 9px; font: var(--bk-title-w) 27px/1.06 var(--bk-title); letter-spacing: -.016em; text-wrap: balance; }
.rs__h em { font-style: italic; color: var(--bk-accent); }
.rs__dek { margin: 0 0 11px; padding-bottom: 9px; border-bottom: 1px dotted var(--bk-soft); font-style: italic; font-size: 13px; line-height: 1.4; color: var(--bk-ink-3); }
.rs__body { min-height: 4.5em; font-size: 14px; line-height: 1.55; text-align: justify; hyphens: manual; }
.rs__body .w { opacity: 0; filter: blur(3px); transition: opacity .32s ease-out, filter .4s ease-out; }
.rs__body .w.on { opacity: 1; filter: none; }
.rs__by { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--bk-soft-2); font-style: italic; font-size: 12px; color: var(--bk-ink-3); white-space: nowrap; }
.rs__by strong { font-style: normal; font-weight: 600; color: var(--bk-ink); }
.rs__by span:last-child { font: 500 8px/1 var(--bk-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--bk-soft); border-radius: 999px; }

/* the widget: an Apple-mix tile in the kit's band colour */
.rsw { position: relative; isolation: isolate; overflow: hidden; margin-top: 13px; padding: 13px 15px 12px; border-radius: 16px; color: #fff; font-family: var(--sans);
  background: linear-gradient(174deg, color-mix(in oklab, var(--bk-band), #fff 10%) 0%, var(--bk-band) 46%, color-mix(in oklab, var(--bk-band), #000 26%) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
@supports (corner-shape: squircle) { .rsw { corner-shape: squircle; border-radius: 24px; } }
.rsw::before { content: ""; position: absolute; right: -30%; top: -60%; width: 80%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--bk-gold) 30%, transparent), transparent); }
.rw__k { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--sans); color: var(--bk-gold); }
.rw__k::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rw__k b { margin-left: auto; font-weight: 500; color: rgba(255, 255, 255, .55); }
.rw__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rw__fig { margin-top: 9px; font: 600 31px/1 var(--bk-title); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw__fig em { font-style: normal; color: var(--bk-gold); }
.rw__line { margin: 5px 0 0; font: 400 11.5px/1.35 var(--sans); color: rgba(255, 255, 255, .78); }
.rw__seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: 10px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .13); }
.rw__th { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 7px; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transform: translateX(calc(var(--i) * 100%)); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.rw__seg button { position: relative; z-index: 1; height: 27px; padding: 0 2px; border: 0; background: none; font: 600 11px/1 var(--sans); color: rgba(255, 255, 255, .8); cursor: pointer; white-space: nowrap; transition: color .3s; }
.rw__seg button.on { color: color-mix(in oklab, var(--bk-band), #000 26%); }
.rw__ring { flex: none; width: 56px; height: 56px; }
.rw__ring circle { fill: none; stroke-width: 5; }
.rw__ring .bg { stroke: rgba(255, 255, 255, .16); } .rw__ring .fg { stroke: var(--bk-gold); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease-out); }
.rw__route { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: 12px; font: 500 9.5px/1.2 var(--sans); color: rgba(255, 255, 255, .72); text-align: center; }
.rw__route::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 4px; height: 2px; background: rgba(255, 255, 255, .25); }
.rw__route span { position: relative; padding-top: 14px; }
.rw__route span::before { content: ""; position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--bk-band); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.rw__route span.on::before { background: var(--bk-gold); box-shadow: none; }
.rw__bars { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font: 500 10px/1 var(--sans); color: rgba(255, 255, 255, .75); }
.rw__bars span { display: grid; grid-template-columns: 70px 1fr 44px; align-items: center; gap: 8px; }
.rw__bars i { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.rw__bars i::after { content: ""; display: block; height: 100%; width: var(--v); border-radius: 4px; background: var(--bk-gold); transform-origin: 0 50%; animation: rsw-grow 1s var(--ease-out) both .25s; }
.rw__bars b { text-align: right; color: #fff; font-weight: 600; }
@keyframes rsw-grow { from { transform: scaleX(0); } }
.rw__roll { display: inline-block; animation: rsw-roll .45s var(--apple); }
@keyframes rsw-roll { from { opacity: 0; transform: translateY(7px); filter: blur(5px); } }

/* ─── the question, resting on the coping: liquid glass, with the topic rolling at its end ─── */
.rh__q { position: absolute; left: 0; top: 0; z-index: 7; width: 440px; opacity: 0; will-change: transform, opacity; }
.rh__ask { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 60px; padding: 0 8px 0 22px; border-radius: 999px; cursor: text; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 251, 246, .72), rgba(255, 244, 232, .54));
  -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.05); backdrop-filter: blur(24px) saturate(1.8) brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .22), 0 0 0 .5px rgba(90, 50, 20, .14),
    0 30px 60px -28px rgba(70, 26, 0, .6), 0 8px 18px -8px rgba(70, 26, 0, .24); }
.rh__ask::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 42%, rgba(255, 214, 170, .25) 70%, rgba(255, 196, 140, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rh__ask::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--spec, 0); transition: opacity .4s;
  background: radial-gradient(180px 70px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); }
.rh__dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ask-acc, var(--blue)); transition: background .4s; }
.rh__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: var(--ask-acc, var(--blue)); opacity: .22; animation: rh-pulse 2.4s var(--ease-out) infinite; }
@keyframes rh-pulse { 0% { transform: scale(.5); opacity: .35; } 100% { transform: scale(1.6); opacity: 0; } }
.rh__typed { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 21px/1 var(--serif-d); letter-spacing: -.012em; color: var(--ink); font-variation-settings: 'opsz' 24; }
.rh__typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: var(--ink); animation: hd-blink 1s steps(1) infinite; }
@keyframes hd-blink { 50% { opacity: 0; } }
.rh__typed:empty::before { content: "Ask one of these businesses…"; color: rgba(40, 28, 20, .5); font-style: italic; }
.rh__in { display: none; flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: none; outline: none; font: 400 21px/1 var(--serif-d); letter-spacing: -.012em; color: var(--ink); }
.rh__in::placeholder { color: rgba(40, 28, 20, .5); font-style: italic; }
.rh__ask.is-typing .rh__typed { display: none; } .rh__ask.is-typing .rh__in { display: block; }
.rh__tw { position: relative; flex: none; height: 26px; overflow: hidden; border-radius: 999px; background: rgba(40, 24, 12, .07); box-shadow: inset 0 0 0 .5px rgba(40, 24, 12, .12); transition: width .6s var(--apple), opacity .3s, margin .6s var(--apple); }
.rh__q--narrow .rh__tw { display: none; }
.rh__ask.is-typing .rh__tw, .rh__ask.is-asking .rh__tw { opacity: 0; width: 0 !important; margin-left: -12px; }
.rh__tl { display: flex; flex-direction: column; transition: transform .7s var(--apple); }
.rh__tl span { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 10px; font: 500 12px/1 var(--sans); color: rgba(38, 26, 18, .78); white-space: nowrap; }
.rh__tl span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rt-acc, var(--blue)); }
.rh__go { position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: radial-gradient(120% 120% at 30% 20%, #3a3634, #121012 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(0, 0, 0, .5); transition: transform .35s var(--spring), background .3s; }
.rh__go:hover { transform: scale(1.06); background: radial-gradient(120% 120% at 30% 20%, #5b72ff, var(--blue-2) 60%); }
.rh__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rh__ask.is-miss { animation: rh-miss .5s var(--ease-out); }
@keyframes rh-miss { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }

/* ─── the line, on the pool; the deck, on the coping ─── */
.rh__say { position: absolute; z-index: 4; left: var(--gutter); top: 0; max-width: calc(100vw - 2 * var(--gutter)); pointer-events: none; will-change: transform; }
.rh__h { width: fit-content; margin: 0; white-space: nowrap; font: 400 var(--hs, 100px)/.9 var(--serif-d); letter-spacing: -.045em; color: #1a110b; font-variation-settings: 'opsz' 72;
  text-shadow: 0 1px 0 rgba(255, 236, 214, .18), 0 0 40px rgba(255, 214, 170, .35); }
.rh__h em { font-style: italic; font-weight: 300; color: var(--blue); letter-spacing: -.035em; }
/* each line rises from behind its own foot. The clip reaches ABOVE the line box (and past its sides), because at
   line-height .9 the box is shorter than the letters: a plain overflow:hidden shaved the i's dot and the b's top */
.rh__ln { display: block; padding-bottom: .09em; margin-bottom: -.09em; clip-path: inset(-.2em -.3em 0 -.3em); }
.rh__ln > span { display: block; transform: translateY(118%); }
.rh.is-in .rh__ln > span { transform: none; transition: transform 1.5s cubic-bezier(.16, 1, .3, 1); }
.rh.is-in .rh__ln:nth-child(2) > span { transition-delay: .16s; }
.rh__deck { margin: 20px 0 0; max-width: 452px; font: 450 16.5px/1.5 var(--sans); letter-spacing: -.008em; color: rgba(34, 22, 12, .88); text-shadow: 0 1px 0 rgba(255, 240, 222, .22); opacity: 0; transform: translateY(10px); }
.rh.is-in .rh__deck { opacity: 1; transform: none; transition: opacity 1.1s var(--ease-out) .7s, transform 1.3s var(--ease-out) .7s; }
.rh__say--stack { right: var(--gutter); }

.rh__scroll { position: absolute; z-index: 6; right: var(--gutter); bottom: clamp(26px, 4.4vh, 48px); display: inline-flex; align-items: center; gap: 12px; font: 500 13px/1 var(--sans); color: rgba(40, 24, 12, .72); text-decoration: none; }
.rh__scroll i { position: relative; width: 1px; height: 34px; overflow: hidden; background: rgba(40, 24, 12, .18); }
.rh__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: rgba(40, 24, 12, .8); animation: rh-drop 2.2s var(--ease-io) infinite; }
@keyframes rh-drop { from { transform: translateY(-14px); } to { transform: translateY(36px); } }

/* review bar (local review only) */
.rv-bg { position: fixed; z-index: 70; left: 50%; top: 86px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px;
  background: rgba(15, 15, 18, .78); color: #fff; font: 500 12px/1 var(--sans); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.rv-bg span { padding: 0 8px 0 6px; opacity: .55; }
.rv-bg__a { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: inherit; text-decoration: none; }
@media (max-width: 759px) { .rv-bg { top: 70px; font-size: 11px; } .rv-bg span { display: none; } .rv-bg__a { padding: 7px 8px; } }

/* How it works rises over the pool: its top is a tall dusk, so night arrives with the section */
#film.howit { z-index: 1; margin-top: -72vh; margin-top: -72svh; padding-top: 72svh;   /* the pinned stage keeps its own room under the header */
  background: linear-gradient(180deg, rgba(15, 15, 18, 0) 0, rgba(15, 15, 18, .22) 16svh, rgba(15, 15, 18, .74) 40svh, var(--ink) 64svh); }
#film.howit::before { -webkit-mask-image: linear-gradient(transparent 36svh, #000 70svh); mask-image: linear-gradient(transparent 36svh, #000 70svh); }
@media (max-width: 759px) { #film.howit { margin-top: -60svh; padding-top: calc(60svh + var(--hd-h) + 12px); background: linear-gradient(180deg, rgba(15, 15, 18, 0) 0, rgba(15, 15, 18, .8) 36svh, var(--ink) 54svh); } #film.howit::before { -webkit-mask-image: linear-gradient(transparent 30svh, #000 56svh); mask-image: linear-gradient(transparent 30svh, #000 56svh); } }

/* the morph: a DOM twin of the card that grows into the page (ring.js). Its band and photograph become the
   page's band and photograph; the card's words fade early, the page's rise once it lands. */
.rh__proxy { position: absolute; inset: 0; z-index: 6; visibility: hidden; pointer-events: none; }
.rp { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: var(--bk-paper); color: var(--bk-ink); font-size: 10px; --bk-mono: 'JetBrains Mono', ui-monospace, monospace; --sh: 0;
  /* no shadow on the card (its texture has none); the page's, as it becomes the page */
  box-shadow: 0 2px 3px rgba(40, 24, 12, calc(.08 * var(--sh))), 0 60px 110px -40px rgba(40, 14, 0, calc(.6 * var(--sh))), 0 18px 34px -20px rgba(40, 14, 0, calc(.3 * var(--sh))), 0 0 0 1px rgba(40, 24, 12, calc(.05 * var(--sh))); }
.rp::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: var(--sh); box-shadow: inset 0 1px 0 rgba(255, 248, 236, .8), inset 0 0 0 1px rgba(255, 214, 160, .22); }
.rp__band { position: absolute; left: 0; right: 0; top: 0; background: var(--bk-band); color: var(--bk-band-ink); overflow: hidden; }
.rp__bi { position: absolute; left: 0; top: 50%; display: flex; align-items: center; gap: 8px; white-space: nowrap; transform-origin: 0 50%; }
.rp__bi b { font: 500 10.5px/1 var(--bk-mast); letter-spacing: .14em; text-transform: uppercase; }
.rp__ph { position: absolute; left: 0; right: 0; overflow: hidden; background: var(--bk-cool); }
.rp__ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rp__txt { position: absolute; left: 0; top: 0; width: 232px; height: 306px; transform-origin: 0 0; }
.rp__txt .rc__in { position: absolute; left: 0; right: 0; top: 156px; }
.rp__lt { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: var(--amb, rgb(255, 244, 231)); }
/* phones: the same morph without layout or paint (ring.js). The twin is set once at the page's own size, 460 wide;
   every part is a fixed-size layer that only moves or fades: the photograph slides up over the foot of the band and
   the paper over the foot of the photograph, so each shortens; the tail carries the page's foot; the plate under
   them is the page's shadow, the frame over them its lit edge. */
.rpt { position: absolute; left: 0; top: 0; width: 460px; height: 0; transform-origin: 0 0; color: var(--bk-ink); font-size: 10px; --bk-mono: 'JetBrains Mono', ui-monospace, monospace; will-change: transform; }
.rpt__sh, .rpt__tail, .rpt__band, .rpt__ph, .rpt__sheet, .rpt__edge { position: absolute; left: 0; top: 0; width: 460px; will-change: transform, opacity; }
.rpt__sh { height: 600px; border-radius: 18px; transform-origin: 0 0; opacity: 0;
  box-shadow: 0 2px 3px rgba(40, 24, 12, .08), 0 60px 110px -40px rgba(40, 14, 0, .6), 0 18px 34px -20px rgba(40, 14, 0, .3), 0 0 0 1px rgba(40, 24, 12, .05); }
.rpt__tail { height: 300px; border-radius: 0 0 18px 18px; overflow: hidden; background: var(--bk-paper); }
.rpt__band { height: 68px; border-radius: 18px 18px 0 0; overflow: hidden; background: var(--bk-band); color: var(--bk-band-ink); }
.rpt__band .rp__bi { top: 0; will-change: transform; }
.rpt__ph { height: 243px; overflow: hidden; background: var(--bk-cool); }
.rpt__ph img { position: absolute; left: 0; top: 0; width: 460px; height: 307px; max-width: none; transform-origin: 0 0; will-change: transform; }
.rpt__sheet { height: 262px; overflow: hidden; background: var(--bk-paper); }
.rpt .rp__txt { will-change: transform, opacity; }
.rpt__edge { border-radius: 18px; opacity: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 248, 236, .8), inset 0 0 0 1px rgba(255, 214, 160, .22); }
.rpt__lt { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: var(--amb, rgb(255, 244, 231)); will-change: opacity; }

/* ─── the card that leaves: page → door ─── */
.rh-fly { position: fixed; left: 0; top: 0; z-index: 55; width: 424px; transform-origin: 0 0; visibility: hidden; pointer-events: none; will-change: transform; }
.rh-fly .rf__box { position: relative; overflow: hidden; transform-origin: 0 0; background: #FCF9F2; }
.rh-fly .rf__pg { transform-origin: 0 0; }
.rh-fly .rf__pg--page { width: 460px; background: none; box-shadow: none; border-radius: 18px; overflow: visible; }
.rh-fly .door { position: absolute; left: 0; top: 0; right: auto; bottom: auto; transform-origin: 0 0; box-shadow: none; }
.rh-fly .door__q { opacity: 0; } .rh-fly .door__t { transform: none; }
.rh-fly .door__rule i { transform: scaleX(1); } .rh-fly .dr__rail i { transform: scaleX(.02); }

@media (max-width: 759px) {
  .rh { height: 206vh; height: 206svh; }
  .rh__deck { font-size: 14.5px; margin-top: 12px; max-width: none; }
  .rh__q { width: calc(100vw - 36px); max-width: 420px; }
  .rh__ask { height: 54px; padding-left: 18px; gap: 10px; }
  .rh__typed, .rh__in { font-size: 18px; }
  .rh__tw { display: none; }
  .rh__go { width: 40px; height: 40px; }
  .rh__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rs [data-r], .rh__tl, .rh__tw { transition: none; }
  .rh__scroll i::after, .rh__dot::after { animation: none; }
  .rh.is-in .rh__ln > span, .rh.is-in .rh__deck { transition: none; }
  .rh__stage.is-live .rs::after { animation: none; }
}

/* what the door is, while it comes forward over the dusk */
.rh-cap { position: fixed; left: 0; top: 0; z-index: 56; width: min(560px, calc(100vw - 36px)); text-align: center; color: #fff; pointer-events: none; visibility: hidden; opacity: 0; will-change: transform, opacity; }
.rh-cap__t { margin: 0; font: 400 clamp(24px, 2.35vw, 34px)/1.1 var(--serif-d); letter-spacing: -.022em; font-variation-settings: 'opsz' 48; text-wrap: balance; text-shadow: 0 2px 24px rgba(8, 10, 24, .45); }
.rh-cap__t em { font-style: italic; font-weight: 300; color: rgba(255, 255, 255, .7); }
.rh-cap__d { margin: 10px auto 0; max-width: 520px; font: 450 15px/1.45 var(--sans); letter-spacing: -.006em; color: rgba(255, 255, 255, .72); text-wrap: balance; }
@media (max-width: 759px) { .rh-cap__t { font-size: 22px; } .rh-cap__d { font-size: 13.5px; margin-top: 7px; } }

/* ─── the loading screen (loader.js), after the live site's: a card on paper, the count, then it lifts away ─── */
html.is-loading { overflow: hidden; }
.ld { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--paper, #F1EEE8); color: var(--ink, #0F0F12); }
.ld[hidden] { display: none; }
.ld::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .5; }
.ld__card { position: relative; width: 232px; height: 306px; border-radius: 15px; background: var(--paper-2, #E7E3DB);
  box-shadow: 0 1px 1px rgba(40, 24, 12, .06), 0 34px 60px -30px rgba(40, 20, 8, .45), 0 0 0 1px rgba(40, 24, 12, .05); }
@supports (corner-shape: squircle) { .ld__card, .ld__f { corner-shape: squircle; border-radius: 24px; } }
.ld .ld__f { opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .3s var(--ease-out), transform .55s var(--ease-out); box-shadow: 0 0 0 1px rgba(40, 24, 12, .06); }
.ld .ld__f.on { opacity: 1; transform: none; }
.ld__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(20px, 4.5vh, 44px); display: flex; justify-content: space-between; align-items: flex-end; }
.ld__brand { display: inline-flex; align-items: center; gap: 9px; font: 500 15px/1 var(--sans); letter-spacing: -.01em; color: rgba(15, 15, 18, .52); }
.ld__brand svg { width: 22px; height: 16px; fill: var(--blue); }
.ld__n { font: 400 clamp(64px, 9vw, 128px)/.78 var(--serif-d); letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; font-variation-settings: 'opsz' 72; }
/* it lifts away: the card rises toward you as the paper clears, the hero already lit behind it */
html.is-loaded .ld { opacity: 0; visibility: hidden; transition: opacity .75s var(--ease-out) .08s, visibility 0s .9s; }
html.is-loaded .ld__card { transform: translateY(-10px) scale(1.06); transition: transform .9s var(--ease-out); }
html.is-loaded .ld__foot { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
/* the header arrives with the hero */
html.is-loading .hd { opacity: 0; }
html.is-loaded .hd { animation: hd-in .9s var(--ease-out) .25s backwards; }
@keyframes hd-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.98); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html.is-loaded .ld, html.is-loaded .ld__card, html.is-loaded .ld__foot { transition-duration: .01s; } html.is-loaded .hd { animation: none; } }

/* the page's small furniture arrives once it has landed, and leaves first when it folds */
.rh__stage .rs__band small, .rh__stage .rs__band span, .rh__stage .rs__ph figcaption { transition: opacity .6s var(--ease-out) .12s; }
.rh__stage:not(.is-live) .rs__band small, .rh__stage:not(.is-live) .rs__band span, .rh__stage:not(.is-live) .rs__ph figcaption { opacity: 0; transition: opacity .3s linear; }
.rh__stage.is-closing .rs__band small, .rh__stage.is-closing .rs__band span, .rh__stage.is-closing .rs__ph figcaption { transition: opacity .16s linear; }
.rh__stage.is-closing .rs [data-r], .rh__stage.is-closing .rs__body .w { transition-duration: .16s; }