/* ==========================================================
   Ansith — homepage story layer (loaded only by index.html, after the shared site.css)
   01 the sky hero, its greeting trailing the scroll · 02 past the clouds the sky deepens and the line writes itself
   03 the project deck, cards turning to face you one by one as you scroll
   05 the long way, with photos you can pick up · 06 the cloud footer.
   The colour lives on one fixed backdrop, so it changes by fading, never by a cut.
   ========================================================== */

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.story-backdrop { position: fixed; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; }
.stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* pinned chapters bleed under the floating sidebar, like the hero does */
:is(.passage, .deck) > .stick { margin-left: calc(-1 * var(--nav-off, 0px)); padding-left: calc(var(--nav-off, 0px) + clamp(24px, 4vw, 64px)); padding-right: clamp(24px, 4vw, 64px); }

/* pinned chapters never end in a hard line: whatever is inside (motes, cards, shadows) melts away toward the top and bottom edge of its own stage,
   so a fast scroll in either direction can't show a cut edge */
:is(.passage, .deck) > .stick { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
/* the chapter marker, bottom right */
/* chapter rail: a column of small pill segments on the right edge, lit up to where you are like an LED meter: the head is brightest and the trail fades behind it,
   the segments still ahead stay barely there. The chapter starts are slightly wider. Soft colours, no text. */
.story-rail { position: fixed; z-index: 40; right: clamp(14px, 1.8vw, 26px); top: 50%; height: min(30vh, 210px); margin-top: calc(min(30vh, 210px) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 10px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.story-rail.on { opacity: 1; }
.story-rail b { flex: none; box-sizing: border-box; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; border: 1px solid var(--c, #4B6FC8); background: transparent; opacity: var(--o, .38);
  transition: width .35s var(--ease), height .35s var(--ease), background .3s, border-color .3s, box-shadow .3s; }
.story-rail b.fill { background: var(--c, #4B6FC8); }
.story-rail b.act { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #4B6FC8) 22%, transparent), 0 0 8px color-mix(in srgb, var(--c, #4B6FC8) 45%, transparent); }

/* ---------- 01 · Hero: the greeting drifts into the clouds as you scroll; the clouds themselves stay put ---------- */
.hero-text > * { will-change: translate, opacity; }
/* the hero's closing fade: an eased ramp into the next section's pale tone, kept low so the cloud bank stays down, and the cloud layers sit a little lower */
.hero .fade { height: clamp(250px, 36vh, 340px); z-index: 5;
  background: linear-gradient(180deg, rgba(249, 250, 252, 0) 0%, rgba(249, 250, 252, .06) 30%, rgba(249, 250, 252, .26) 54%, rgba(249, 250, 252, .64) 76%, rgba(249, 250, 252, .92) 90%, rgb(249, 250, 252) 100%); }
.hero .clouds.front, .hero .clouds.back { bottom: -38px; }
.hero .cloud-mist { bottom: -38px; }
/* the mist only fills the very bottom, so the cloud bank above it keeps its shape instead of washing out to flat white */
.hero .cloud-mist { background: linear-gradient(0deg, rgba(249, 250, 252, .95) 0%, rgba(250, 251, 253, .6) 24%, rgba(250, 251, 253, .26) 50%, rgba(250, 251, 253, .08) 76%, rgba(250, 251, 253, 0) 100%); }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ---------- 02 · Past the clouds the sky deepens, and the line writes itself ---------- */
.passage { position: relative; height: 180vh; }
/* a soft fade where the hero's cloud bank meets the deepening sky, so there is no seam */
.passage::before { content: ""; position: absolute; z-index: 1; left: calc(-1 * var(--nav-off, 0px)); right: 0; top: -16vh; height: 100vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(249, 250, 252, 0) 0%, rgba(249, 250, 252, .85) 8%, rgb(249, 250, 252) 16%, rgba(240, 246, 252, .94) 24%, rgba(226, 236, 248, .78) 34%, rgba(200, 217, 240, .52) 50%, rgba(166, 191, 226, .26) 68%, rgba(150, 178, 214, .08) 86%, rgba(150, 178, 214, 0) 100%); }
.passage .stick { z-index: 2; display: grid; place-items: center; }
/* one snowfall for the whole run from the heading to the last card: fixed behind the page, so nothing hands over between chapters and no section edge clips it */
.snow-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.pass-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* the line: each letter rises out of a soft blur in turn, so it reads as being written */
/* the line is set big, for impact; on narrow screens it scales with the width so each line still fits on one row */
.pass-line { margin: 0; white-space: nowrap; font-size: min(clamp(30px, 3.7vw, 60px), 6.3vw); line-height: 1.1; font-weight: 500; font-variation-settings: "wdth" 92; letter-spacing: -0.04em; color: #fff; }
.pass-line .tone { color: #D2E1F6; }
.pl-ln { display: block; }
.pl-fx .ch.w { filter: blur(calc((1 - var(--k, 1)) * 10px)); }   /* only while the letter is being written */
.pl-fx .ch { display: inline-block; white-space: pre; opacity: var(--k, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * .55em), 0) scale(calc(1.25 - var(--k, 1) * .25)); transform-origin: 50% 80%; }
/* a quiet cue that there is more below: small, faint, and still (it only fades in once the line is written) */
.pass-hint { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: clamp(32px, 4vh, 48px) 0 0; font-size: 12.5px; letter-spacing: .04em; color: rgba(222, 232, 248, .7);
  opacity: calc(var(--o2, 1) * .9); transform: translateY(var(--y2, 0px)); }
/* a hairline with a soft light gliding down it, easing in and out; it only runs when motion is allowed */
.pass-hint i { position: relative; display: block; width: 1px; height: 44px; overflow: hidden; background: rgba(222, 232, 248, .18); }
.pass-hint i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 55%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); transform: translateY(-100%); }
html.motion .pass-hint i::after { animation: hint-drop 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes hint-drop { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(190%); } }


/* ---------- 03 · The deck ---------- */
/* the projects stand in a row like cards on a drum. Scrolling turns the row: the next card swings round to face you while the last one turns away,
   and each one rests a moment at the front. The sky behind takes each project's time of day (first light, morning, clear noon, dusk), all in the
   site's own blue. home.js only ever moves the cards with transform and opacity, so the turn stays on the compositor even on modest hardware. */
.deck { height: 400vh; }
.dk-stage { position: absolute; top: 0; bottom: 0; left: var(--nav-off, 0px); right: 0; container-type: size; perspective: 1800px; perspective-origin: 50% 46%; }
.dk-card { --ar: 1.85; --cw: min(76cqw, 1000px, calc(66cqh * var(--ar)));
  position: absolute; left: 50%; top: 47%; width: var(--cw); height: calc(var(--cw) / var(--ar)); margin: calc(var(--cw) / var(--ar) / -2) 0 0 calc(var(--cw) / -2);
  border-radius: 28px; outline: none; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
@container (max-width: 960px) { .dk-card { --cw: min(86cqw, calc(62cqh * var(--ar))); } }
@container (max-width: 640px) { .dk-card { --ar: .78; --cw: min(86cqw, 420px, calc(66cqh * var(--ar))); border-radius: 24px; } }

/* the card wears its project's theme: Hawkeye and Octo are night panels, Meshilogic and Nasdaq are clear daylight. Same voice as the rest of the site:
   a cobalt index, the name in ink with its line in the steel tone, and the solid pill button */
.dk-card { --fg: var(--ink); --fg-2: #4F6D91; --fg-3: #6B7C93; --no: #2B5BD3; --rule: rgba(18, 30, 56, .1); --btn: var(--ink); --btn-fg: #fff;
  --panel: linear-gradient(150deg, rgba(242, 247, 254, .96) 0%, rgba(224, 234, 248, .93) 55%, rgba(208, 222, 243, .9) 100%); --glow: rgba(43, 91, 211, .12);
  --edge: rgba(255, 255, 255, .55); --hi: rgba(255, 255, 255, .9); --gloss: rgba(255, 255, 255, .45); }
/* glass without a live blur (too heavy on cards this size, and they move in 3D): see-through panels, a bright hairline rim, a lit top edge and a
   soft diagonal gloss. The night cards let the sky and its stars show through; the daylight ones stay frosted enough for the ink text */
.dk-card.dark { --fg: #FFFFFF; --fg-2: #A9BEDF; --fg-3: rgba(207, 221, 243, .6); --no: #8FB0EE; --rule: rgba(255, 255, 255, .12); --btn: #FFFFFF; --btn-fg: var(--ink);
  --panel: linear-gradient(150deg, rgba(46, 68, 114, .76) 0%, rgba(20, 31, 58, .76) 52%, rgba(9, 16, 33, .84) 100%); --glow: rgba(43, 91, 211, .3);
  --edge: rgba(255, 255, 255, .13); --hi: rgba(255, 255, 255, .22); --gloss: rgba(255, 255, 255, .1); }
.p-octo { --panel: linear-gradient(150deg, rgba(40, 62, 108, .74) 0%, rgba(16, 27, 52, .76) 52%, rgba(7, 12, 27, .86) 100%); --glow: rgba(56, 120, 220, .28); }
/* the two daylight cards each take a gentle tint of their own: Meshilogic a soft sky blue, Nasdaq a calmer steel blue (no greens) */
.p-mesh { --panel: linear-gradient(150deg, rgba(238, 245, 254, .96) 0%, rgba(216, 231, 249, .93) 52%, rgba(196, 217, 242, .9) 100%); --glow: rgba(66, 138, 226, .2); }
.p-nasdaq { --panel: linear-gradient(150deg, rgba(241, 245, 251, .96) 0%, rgba(224, 232, 244, .93) 52%, rgba(204, 218, 237, .9) 100%); --glow: rgba(72, 120, 196, .16); }

.dk-face { position: relative; display: block; height: 100%; border-radius: inherit; overflow: hidden; color: var(--fg); isolation: isolate;
  background: radial-gradient(60% 75% at 74% 56%, var(--glow), transparent 72%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--hi), 0 2px 4px rgba(2, 6, 16, .1), 0 24px 48px -18px rgba(2, 6, 16, .45), 0 60px 110px -50px rgba(2, 6, 16, .5); }
.dk-face::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, var(--gloss) 0%, rgba(255, 255, 255, 0) 38%); }
/* the copy follows the Work page cards: a category pill at the top, the name and its line in the middle, then the outcome chip and the Read pill at the bottom */
.dk-copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 42%; padding: clamp(26px, 3.4cqw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
.dk-card { --ac: #2B5BD3; --pill: rgba(43, 91, 211, .06); --pill-fg: #3C4C66; --chip-bg: rgba(24, 44, 84, .055); --chip-fg: #50607A; --line-fg: var(--body); }
.p-mesh { --ac: #4F6D91; --pill: rgba(79, 109, 145, .09); }
.dk-card.dark { --ac: #8FB0EE; --pill: rgba(255, 255, 255, .08); --pill-fg: #D3DEF0; --chip-bg: rgba(255, 255, 255, .08); --chip-fg: #C3D0E6; --line-fg: #A9BEDF; }
.p-octo { --ac: #7FB4E0; }
.dk-meta { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 11px; border-radius: 999px; background: var(--pill); color: var(--pill-fg); font-size: 12.5px; font-weight: 500; letter-spacing: .005em; line-height: 1.3; }
.dk-meta::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 20%, transparent); }
.dk-title { display: flex; flex-direction: column; margin: auto 0; padding: 20px 0; }
.dk-title b { font-size: clamp(24px, 2.6cqw, 34px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; }
.dk-title span { margin-top: 12px; max-width: 24ch; font-size: clamp(14px, 1.2cqw, 15.5px); line-height: 1.5; color: var(--line-fg); }
.dk-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.dk-out { padding: 5px 11px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-fg); font-size: 12px; line-height: 1.3; }
/* the Read pill: ink with a white arrow disc on the daylight cards, inverted on the night ones; it warms to the steel-blue hover with a soft glow */
.dk-cta { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 7px 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.dk-cta i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .3s var(--ease), background .25s, color .25s; }
.dk-card.dark .dk-cta { background: #fff; color: var(--ink); }
.dk-card.dark .dk-cta i { background: var(--ink); color: #fff; }
.dk-card:hover .dk-cta, .dk-card:focus-visible .dk-cta, .dk-card.dark:hover .dk-cta, .dk-card.dark:focus-visible .dk-cta { background: var(--hover-fill); color: #fff; box-shadow: var(--hover-glow); }
.dk-card.dark:hover .dk-cta i, .dk-card.dark:focus-visible .dk-cta i { background: #fff; color: var(--ink); }
.dk-card:hover .dk-cta i, .dk-card:focus-visible .dk-cta i { transform: translate(2px, -2px); }
.dk-cta .lk { width: 15px; height: 15px; margin: 0 -4px 0 0; flex: none; fill: currentColor; opacity: .9; }
.dk-cta i svg { width: 14px; height: 14px; }
.dk-card:focus-visible .dk-face { outline: 2px solid #8FB0EE; outline-offset: 4px; }
/* the cover sits whole in the right side of the card, clear of the edge */
.dk-art { position: absolute; z-index: 1; top: 0; bottom: 0; left: 40%; right: 5%; display: flex; align-items: center; justify-content: center; }
.dk-art img { display: block; width: 100%; max-width: none; height: auto; max-height: 80%; object-fit: contain; object-position: 50% 50%; }
html.motion .dk-art img { will-change: transform; }
/* the three animated covers are 16:9 with their own padding, so they run a touch wider than the art box */
.p-hawkeye .dk-art img, .p-mesh .dk-art img, .p-nasdaq .dk-art img { width: 112%; }
.p-octo .dk-art img { width: 96%; border-radius: 10px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55); }
/* while a card turns, its far side falls into shade and a soft light slides across it; both only change opacity and position */
.dk-shade, .dk-sheen { position: absolute; z-index: 3; top: 0; bottom: 0; pointer-events: none; opacity: 0; will-change: opacity, transform; }
.dk-shade { left: 0; right: 0; background: linear-gradient(90deg, rgba(6, 12, 26, .62), rgba(6, 12, 26, .12)); }
.dk-shade.r { transform: scaleX(-1); }
.dk-sheen { left: 0; width: 70%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 75%); }

/* phones: the card stands up, the cover on top and the copy below */
@container (max-width: 640px) {
  .dk-copy { right: 0; top: auto; bottom: 0; width: auto; padding: 24px; }
  .dk-copy { align-items: stretch; }
  .dk-meta { align-self: flex-start; }
  .dk-title { margin: 0; padding: 22px 0 18px; }
  .dk-title b { font-size: 24px; }
  .dk-title span { margin-top: 8px; font-size: 14px; }
  .dk-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .dk-out { font-size: 11.5px; }
  .dk-cta { height: 40px; padding-left: 16px; font-size: 13px; }
  .dk-cta i { width: 28px; height: 28px; }
  .dk-art { top: 24px; left: 24px; right: 24px; bottom: auto; height: 42%; align-items: center; }
  .dk-art img, .p-hawkeye .dk-art img, .p-mesh .dk-art img, .p-nasdaq .dk-art img { width: 100%; max-height: 100%; }
}
@media (max-width: 1023.98px) { .dk-stage { top: var(--bar-h, 64px); } }

/* under the deck: a small slider. The thumb glides with the deck as it turns; the arrows step a card, and the track can be clicked or dragged */
.dk-under { position: absolute; z-index: 120; left: var(--nav-off, 0px); right: 0; bottom: clamp(24px, 5.5vh, 52px); display: flex; align-items: center; justify-content: center; gap: 14px; }
.deck { --c-hair: rgba(43, 91, 211, .16); --c-fill: var(--ink); --c-ic: #4F6D91; --c-ring: rgba(43, 91, 211, .18); --c-hov: rgba(43, 91, 211, .08); }
.deck.dk-dark { --c-hair: rgba(255, 255, 255, .2); --c-fill: #fff; --c-ic: rgba(226, 234, 246, .82); --c-ring: rgba(255, 255, 255, .22); --c-hov: rgba(255, 255, 255, .1); }
.dk-arw { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--c-ring); background: transparent; color: var(--c-ic); cursor: pointer;
  transition: background .25s, color .6s, border-color .6s, opacity .3s; }
.dk-arw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dk-arw:hover, .dk-arw:focus-visible { background: var(--c-hov); }
.dk-arw:focus-visible, .dk-track:focus-visible { outline: 2px solid #8FB0EE; outline-offset: 3px; }
.dk-arw[disabled] { opacity: .35; cursor: default; background: transparent; }
.dk-track { position: relative; width: clamp(120px, 14vw, 180px); height: 28px; cursor: pointer; touch-action: none; border-radius: 8px; }
.dk-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--c-hair); transition: background .6s; }
.dk-thumb { position: absolute; left: 0; top: 50%; width: 25%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--c-fill); will-change: transform; transition: background .6s; }

/* without motion the deck is simply a row of cards to scroll sideways */
html:not(.motion) .deck { height: auto; }
html:not(.motion) .deck > .stick { position: relative; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-top: 96px; padding-bottom: 96px; }
html:not(.motion) .dk-stage { position: relative; left: 0; height: min(76vh, 640px); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 24px; perspective: none; }
html:not(.motion) .dk-card { position: relative; left: auto; top: auto; margin: 0; flex: 0 0 var(--cw); scroll-snap-align: center; }
html:not(.motion) .dk-under, html:not(.motion) .snow-field { display: none; }

/* ---------- Intro: the wordmark is written on the sky, then two curtains lift away, one after the other ----------
   Two stacked panels: the hero's blue sky in front, holding the wordmark, and a soft, airy sky blue behind it. When the page is ready the blue lifts
   first, uncovering the paler sky for a beat, then that follows it up and reveals the page. Both round their lower corners as they rise.
   home.js lifts it and removes it 900ms later, so both finish inside that. */
.intro { display: none; position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
html.intro-on .intro, html.intro-out .intro { display: block; }
html.intro-on { overflow: hidden; }
.intro-b, .intro-w { position: absolute; inset: 0; will-change: transform;
  transition: transform .72s cubic-bezier(.76, 0, .24, 1), border-radius .72s cubic-bezier(.76, 0, .24, 1); }
.intro-b { display: grid; place-items: center;
  background: radial-gradient(110% 70% at 50% 0%, rgba(30, 44, 88, .34) 0%, rgba(30, 44, 88, 0) 72%), linear-gradient(180deg, #3A5083 0%, #45608E 40%, #5A7AA5 72%, #7090B7 100%); }
.intro-w { background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #A9C0E0 0%, #BFD1EA 55%, #D3E0F1 100%); transition-delay: .14s; }
.intro.out .intro-b, .intro.out .intro-w { transform: translate3d(0, -100%, 0); border-radius: 0 0 44px 44px; }
.intro-in { display: flex; flex-direction: column; align-items: center; transition: opacity .35s, transform .6s var(--ease); }
.intro.out .intro-in { opacity: 0; transform: translate3d(0, -16px, 0); }
/* the wordmark, set exactly as before (Archivo 500, a touch condensed, tight tracking, "design" in the pale tone), is written letter by letter:
   each letter's outline is drawn left to right in turn, then it fills in */
.intro-sig { width: clamp(187px, 23vw, 331px); height: auto; overflow: visible; }
.intro-sig text { font-family: inherit; font-size: 100px; font-weight: 500; font-variation-settings: "wdth" 92; letter-spacing: -0.035em; }
.intro-sig tspan { --f: #fff; fill: rgba(255, 255, 255, 0); stroke: var(--f); stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: sig-draw .45s cubic-bezier(.5, .1, .3, 1) calc(.05s + var(--i) * .035s) forwards, sig-fill .25s ease calc(.3s + var(--i) * .035s) forwards; }
.intro-sig tspan.d { --f: #D2E1F6; }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@keyframes sig-fill { to { fill: var(--f); stroke-width: 0; } }
/* the hero's own opening waits behind the curtain, then plays as it lifts */
html.intro-on .hero-copy > * { animation: none; opacity: 0; }


/* the blue hour: after the last project, the night lifts through deep and twilight blue into the About band's own pale sky. It starts clear (so it
   picks up whatever night is behind it), ends exactly on the band's colour, and stays in one hue the whole way, so it never passes through grey */
.dk-dawn { position: relative; height: clamp(150px, 30vh, 300px); pointer-events: none;
  background: linear-gradient(180deg, rgba(150, 175, 214, 0) 0%, rgba(150, 175, 214, .45) 18%, #98B1D6 34%, #A8BEDD 46%, #B8CBE6 58%, #CFDDF0 74%, #DDE8F5 85%, #E6EEF8 94%, #EBF2FA 100%); }
/* the About band's cloud edge is solid white at its top: fade it in so it rises out of the gradient instead of cutting across it */
.how-band .cloud-edge.top { -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%); }

/* the light/dark flip of the menu (and the rail) is instant: no easing on anything for the frame it happens in */
html.nav-cut .sidebar, html.nav-cut .sidebar *, html.nav-cut .story-rail, html.nav-cut .story-rail * { transition: none !important; }

/* small screens: drop the rail where it would sit on the content */
@media (max-width: 767.98px) { .story-rail { display: none; } }

/* ---------- Smaller screens: a tighter story ----------
   On tablets and phones the chapters keep their rhythm but lose the slack: the hero reserves less room for its cloud bank, the pinned heading and
   the deck need less scroll to play through, the blue hour is shorter, and the About band and footer start closer to their content. */
@media (max-width: 1023.98px) {
  .sky-band.soft.section.how-band { padding-top: 104px; }
  #site-foot.cloud-foot { padding-top: 124px; }
  .passage { height: 160vh; }
  .deck { height: 340vh; }
}
@media (max-width: 767.98px) {
  .passage { height: 145vh; }
  .deck { height: 300vh; }
  .dk-dawn { height: clamp(110px, 20vh, 180px); }
  .sky-band.soft.section.how-band { padding-top: 76px; }
  .how { gap: 28px; }
  #site-foot.cloud-foot { padding-top: 96px; }
}

/* ---------- The deck's cards: night glass, each lit by its own light ----------
   Every project now sits in the night sky, so every card is night glass: a deep panel that lets a little of the sky through, a bright rim along the
   top, and its project's own light pooling behind the cover and glowing faintly at the edge. Hawkeye cobalt, Meshilogic ocean blue, Nasdaq
   indigo-cobalt, Octo electric blue: one family, four moods. */
.dk-card.dark { --rim: rgba(160, 196, 255, .28); --lit: 72, 112, 214; }
.dk-card.dark.p-hawkeye { --lit: 72, 112, 214; --panel: linear-gradient(150deg, rgba(24, 36, 66, .9) 0%, rgba(13, 21, 42, .88) 52%, rgba(7, 12, 26, .92) 100%); }
.dk-card.dark.p-mesh { --lit: 128, 148, 196; --ac: #B4C4E6; --rim: rgba(200, 212, 240, .26); --panel: linear-gradient(150deg, rgba(34, 42, 64, .9) 0%, rgba(20, 26, 44, .88) 52%, rgba(10, 13, 26, .92) 100%); }
.dk-card.dark.p-nasdaq { --lit: 92, 112, 232; --ac: #9DB0FF; --rim: rgba(170, 186, 255, .28); --panel: linear-gradient(150deg, rgba(26, 32, 74, .9) 0%, rgba(14, 18, 46, .88) 52%, rgba(7, 9, 26, .92) 100%); }
.dk-card.dark.p-octo { --lit: 56, 128, 236; --rim: rgba(140, 190, 255, .28); --panel: linear-gradient(150deg, rgba(17, 28, 54, .9) 0%, rgba(8, 14, 30, .9) 52%, rgba(3, 6, 16, .94) 100%); }
.dk-card.dark { --glow: rgba(var(--lit), .14); --gloss: rgba(255, 255, 255, .04); --edge: rgba(255, 255, 255, .08); --hi: rgba(255, 255, 255, .12); }
.dk-card.dark .dk-face { box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--hi), 0 2px 4px rgba(2, 6, 16, .2), 0 30px 60px -24px rgba(2, 6, 16, .6), 0 0 70px -34px rgba(var(--lit), .16); }
/* the bright rim along the top edge, fading out toward the corners */
.dk-card.dark .dk-face::after { content: ""; position: absolute; z-index: 4; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--rim) 50%, rgba(255, 255, 255, 0)); }
/* the project's light pools behind its cover */
.dk-card.dark .dk-art::before { content: ""; position: absolute; inset: 6% 0; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--lit), .12), rgba(var(--lit), 0)); filter: blur(14px); }
.dk-card.dark .dk-art { z-index: 1; isolation: isolate; }

/* ---------- The deck's night ----------
   Each project has its own colour of night as a fixed layer of soft light (home.js crossfades them as the cards turn, so nothing slides): a pool of
   light high in the sky and a glow along the horizon, all in blue, over a shared vignette that sinks the edges into black. The stars sit on top. */
.deck-sky, .deck-mood { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.deck-mood i { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.deck-mood::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 110% at 50% 46%, rgba(2, 3, 8, 0) 48%, rgba(2, 3, 8, .6) 100%); }
.m-hawkeye { background: radial-gradient(64% 52% at 82% 8%, rgba(72, 100, 182, .55) 0%, rgba(72, 100, 182, .18) 52%, rgba(72, 100, 182, 0) 78%),
  radial-gradient(120% 42% at 50% 112%, rgba(44, 66, 132, .42) 0%, rgba(44, 66, 132, 0) 76%); }
.m-mesh { background: radial-gradient(70% 56% at 18% 6%, rgba(166, 184, 222, .34) 0%, rgba(140, 160, 204, .12) 54%, rgba(140, 160, 204, 0) 80%),
  radial-gradient(120% 42% at 50% 112%, rgba(84, 100, 146, .36) 0%, rgba(84, 100, 146, 0) 76%); }
.m-nasdaq { background: radial-gradient(80% 50% at 52% -2%, rgba(88, 106, 204, .55) 0%, rgba(88, 106, 204, .18) 54%, rgba(88, 106, 204, 0) 80%),
  radial-gradient(120% 42% at 50% 112%, rgba(54, 72, 156, .4) 0%, rgba(54, 72, 156, 0) 76%); }
.m-octo { background: radial-gradient(58% 52% at 88% 14%, rgba(54, 92, 170, .48) 0%, rgba(54, 92, 170, .16) 52%, rgba(54, 92, 170, 0) 78%),
  radial-gradient(120% 42% at 50% 112%, rgba(32, 52, 108, .4) 0%, rgba(32, 52, 108, 0) 76%); }
html:not(.motion) .deck-sky, html:not(.motion) .deck-mood { display: none; }