/* base.css: reset, typography, shared UI atoms, section stacking (SPEC §3.9.1) and the site chrome
   (header, menu, curtain, progress, chapter HUD, CTA bar, credits, footer). SPEC §3.19.
   Owned by theme.js's owner; the chrome rules pair with js/theme.js (state classes are documented per block).
   No hex colours here: everything comes from tokens.css. */

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
/* No background on <html>: the body's propagates to the whole canvas (overscroll included). theme.js writes the live
   band blend inline on <body> (background-color + color), never on <html> (perf: a write there restyles everything). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-behavior:auto;
  -webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100%;overflow-x:clip;background:var(--bg);color:var(--fg);
  font:400 var(--fs-body)/var(--lh-body) var(--font-latin);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;font-optical-sizing:auto}
:lang(he) body{font-family:var(--font-he)}
h1,h2,h3,h4,p,ol,ul,figure,blockquote{margin:0}
:where(ol,ul)[class],:where([role=list]){list-style:none;padding:0}
h1,h2,h3{font-weight:500;letter-spacing:var(--tr-display);line-height:var(--lh-display)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
button:disabled{cursor:default}
sup{font-size:inherit;vertical-align:baseline}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--white)}
/* Hebrew has no case: wide caps tracking reads as gaps, so labels tighten. Every caps label also switches to Heebo
   (--font-latin already falls back to Heebo for Hebrew glyphs; this keeps the Latin digits / slashes beside them in
   the same face as the words). */
:lang(he) :is(.eyebrow,.hint,.pill,.text-link,.chips>span,.chapter-hud,.footer-top,.menu-foot,.sound-btn,.lang-btn,.menu-btn,
  .topline,.menu-close,.skip-link,.contact-links,.cta-bar .pill,.score){letter-spacing:.04em}
:lang(he) :is(.topline,.chips>span,.sound-btn,.lang-btn,.menu-btn,.menu-close,.skip-link,.footer-top,.contact-links,.score){font-family:var(--font-he)}

/* ---------------------------------------------------------------- utilities */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:max(12px, env(safe-area-inset-top));inset-inline-start:12px;z-index:calc(var(--z-preloader) + 1);
  display:inline-flex;align-items:center;min-height:44px;padding-inline:20px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--white);font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;
  transform:translateY(-160%);opacity:0;transition:transform var(--d-s) var(--ease-out),opacity var(--d-s) linear}
.skip-link:focus,.skip-link:focus-visible{transform:none;opacity:1}

/* Focus ring: visible on light, lilac, dark and ink; it lands from an 8 px offset. */
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;transition:outline-offset 200ms var(--ease-out)}
:where(:focus-visible){animation:focus-land 200ms var(--ease-out)}
@keyframes focus-land{from{outline-offset:8px}}
:focus:not(:focus-visible){outline:none}
[tabindex="-1"]:focus{outline:none}

/* ---------------------------------------------------------------- shared type atoms */
.eyebrow,.hint{font:600 var(--fs-label)/1.45 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
:lang(he) :is(.eyebrow,.hint,.pill,.text-link){font-family:var(--font-he)}
.hint{color:color-mix(in srgb,currentColor 72%,transparent)}
.display{font-weight:500;letter-spacing:var(--tr-display);line-height:var(--lh-display)}

/* Topline: a caps label plus a 1 px rule that draws when the label reveals (data-k=in/done, or no kinetic at all). */
.topline{display:flex;align-items:center;gap:16px;font:600 var(--fs-label)/1.45 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
.topline>p{flex:none}
.topline-rule{flex:1;height:1px;min-width:24px;background:currentColor;opacity:.28;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--d-l) var(--ease-out)}
[dir=rtl] .topline-rule{transform-origin:right center}
.topline>p:not([data-k^=pre])+.topline-rule{transform:none}

/* ---------------------------------------------------------------- buttons, pills, links, chips */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding-inline:20px;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,currentColor 38%,transparent);background:transparent;color:inherit;
  font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background-color var(--d-xs) linear,color var(--d-xs) linear,border-color var(--d-xs) linear}
.pill:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.pill--primary{background:var(--accent);border-color:var(--accent);color:var(--white)}
.pill--primary:hover{background:color-mix(in srgb,var(--accent) 82%,var(--ink));border-color:color-mix(in srgb,var(--accent) 82%,var(--ink))}
.pill--light{background:var(--white);border-color:var(--white);color:var(--ink)}
.pill--light:hover{background:var(--lilac);border-color:var(--lilac)}

.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;color:inherit;cursor:pointer;
  font:600 var(--fs-label)/1.2 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(50% + .95em)/100% 1px;
  transition:background-size var(--d-m) var(--ease-in-out),background-position 0s}
.text-link:hover{background-size:0 1px;background-position:100% calc(50% + .95em)}
[dir=rtl] .text-link{background-position:100% calc(50% + .95em)}
[dir=rtl] .text-link:hover{background-position:0 calc(50% + .95em)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips>span{display:inline-flex;align-items:center;height:28px;padding-inline:12px;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,currentColor 28%,transparent);font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mag-inner{display:inline-block}
/* A decorative outward arrow drawn as a glyph (.arr): mirrored in RTL, where it sits at the line's other end (the
   Hebrew copy itself uses ↖). */
.arr{display:inline-block}
[dir=rtl] .arr{scale:-1 1}
/* Hover-roll ink (cursor.css reads --roll-ink; the bands set it in tokens.css): over a film or the hero card the label
   sits on a dark / changing picture, so it keeps the accent there, and the mood pill keeps its own ink. */
.film{--roll-ink:var(--accent)}
.hero-card{--roll-ink:currentColor}

/* Tap targets: ≥ 44 × 44 on touch (the visual size stays; the box grows). */
html.mobile :is(button,.pill,.text-link,.lang-btn,.menu-btn,.sound-btn){min-height:44px;min-width:44px}
html.mobile .contact-links a{display:inline-flex;align-items:center;min-height:44px}
html.mobile .menu-links a{min-height:44px;align-items:center}

/* ---------------------------------------------------------------- stage canvas + probes */
canvas#stage{position:fixed;top:0;left:0;display:block;width:100vw;height:100vh;height:100lvh;z-index:var(--z-canvas);pointer-events:none}
#lvh-probe{position:fixed;top:0;left:0;width:0;height:100vh;height:100lvh;visibility:hidden;pointer-events:none}
main{position:relative;z-index:var(--z-main);display:block}

/* ---------------------------------------------------------------- section stacking (SPEC §3.9.1 + SPEC-OWNER-2 O6) */
/* Order (O6): hero → about → work → piano → between → football → craft → contact → footer.
   An earlier section sits above a later one it underlaps (piano › between › football › craft); a later sheet sits
   above (contact over craft). #work follows the drift and hands over to #piano in plain flow (no overlap). */
main>section{position:relative;overflow-x:clip}
#top{z-index:1} #about{z-index:2} #work{z-index:3} #piano{z-index:7} #between{z-index:6} #football{z-index:5} #craft{z-index:4} #contact{z-index:8}

/* Pinned: the first child .stage sticks for the section's own range R (+ underlap u + tail out), all in lvh. */
.pinned{--R:var(--r);height:calc((var(--u,0) + var(--R) + var(--out,0)) * 1lvh + 100lvh)}
@media (max-width:700px){.pinned{--R:var(--r-m,var(--r))}}
.pinned>.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}

/* Underlap: the next section lies beneath the previous stage while that stage plays its exit (margin −100lvh − u, the
   section's --u = the exit's scroll length; anchors land at top + u = c 0). Sheet: the next section rises over.
   · #between under #piano's iris (u 35) · #football under the morph (u 20)
   · #craft under #football's shutter (u 35): the shutter opens onto the craft sheet (was #work's place before O6).
   · #contact rises over the craft deck's tail as a sheet. #work and #piano follow in plain flow (u 0). */
#between{margin-top:calc(-100lvh - 35lvh)}
#football{margin-top:calc(-100lvh - 20lvh)}
#craft{margin-top:calc(-100lvh - 35lvh)}
#contact{margin-top:-100lvh}
/* The craft sheet's lead: the u that scrolls by under the football stage while the shutter opens. With it the sheet's
   own top (tapes + head) lands exactly where the shutter leaves it (and where an anchor jump lands). */
.sheet-lead{display:block;height:calc(var(--u,0) * 1lvh);pointer-events:none}
/* While the GL football film is live (film.js: #football.is-cine-gl) the film is drawn on the canvas BEHIND <main>, so
   the sheet beneath the stage must not paint over it: it is see-through (the strips open onto the light body) and its
   content waits until the shutter is half open — film.js's gate for the revealed section (yanay:gate {id:'craft'},
   x ≥ .5), mirrored by theme.js as #craft.is-gate-open — then fades in over the last strips. Should the gate never
   come, the content is back the moment the shutter ends (film.js drops .is-cine-gl). */
#craft{transition:opacity 500ms linear}
#football.is-cine-gl~#craft{background:transparent}
#football.is-cine-gl~#craft:not(.is-gate-open){opacity:0;visibility:hidden;transition:opacity 200ms linear,visibility 0s linear 200ms}
/* Kick by touch (QA critical): the morph stage stays pinned over the football intro through the underlap; once the
   football gate is open (morph hand-off h ≥ .6) it must not take the taps meant for the kick button and the pitch. */
#between:has(~#football.is-gate-open) .stage,#between:has(~#football.is-gate-open) .view{pointer-events:none}

/* GL sections are transparent (the body paints their colour); the rest paint their own. Sheet corners are static.
   #work is a LIGHT band since SPEC-WORK-LUSION (Lusion's Featured Work sits on the normal light page): this is its
   no-JS / fallback paint — with JS, work.css makes it transparent over the stage canvas and theme.js paints the body. */
#work{background:var(--light);color:var(--ink)}
#craft{background:var(--light);color:var(--ink)}
#contact{background:var(--dark);color:var(--dark-ink)}
:is(#craft,#contact){border-radius:var(--r-sheet) var(--r-sheet) 0 0}
@media (max-width:700px){:is(#craft,#contact){border-radius:28px 28px 0 0}}

/* ---------------------------------------------------------------- header (SPEC §3.9.3) */
/* theme.js writes data-theme="light|dark" (discrete probe at y + 32) and toggles .is-in (hero cascade), .is-hidden,
   .is-cinema and .is-collapsed. Header items move with the `translate` property only: cursor.js owns `transform`
   on the [data-magnetic] buttons. No mix-blend-mode on the header. */
.site-header{position:fixed;top:0;inset-inline:0;z-index:var(--z-header);height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:var(--t-fg);pointer-events:none;transition:transform 600ms var(--ease-out),color 450ms linear}
.site-header>*{pointer-events:auto}
.site-header.is-hidden{transform:translateY(-110%);transition:transform 500ms var(--ease-in-out),color 450ms linear}
/* O9: the old site's solid wordmark — heavy ink (ivory over dark bands: its own data-theme, below). Past the hero it
   turns vertical in the top-start corner (reads bottom-to-top) and turns back near the top (theme.js: .is-vertical,
   desktop > 700 px only). The turn pivots on the box's top-start corner: rotate(−90°) after sliding the box back by its
   own width (LTR) / up by its own height (RTL) puts it in a 44 px strip from the header's top padding downwards.
   While the header hides, the vertical mark counter-slides (same timing) so it stays put in its corner. */
.wordmark{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:44px;min-height:44px;padding-inline:14px;margin-left:-14px;border-radius:var(--r-pill);
  font:800 20px/1 var(--font-latin);letter-spacing:-.03em;direction:ltr;unicode-bidi:isolate;
  transform-origin:0 0;transition:transform 600ms var(--ease-out),translate 600ms var(--ease-out),color 450ms linear}
[dir=rtl] .wordmark{margin-left:0;margin-right:-14px;transform-origin:100% 0}
.wm-l{display:inline-block}
/* --wm-x tucks the vertical mark into the corner: its letters centre ~24 px from the edge, clear of the content that
   starts at the gutter. */
.site-header{--wm-x:calc(16px - var(--gutter))}
[dir=rtl] .site-header{--wm-x:calc(var(--gutter) - 16px)}
.site-header.is-vertical .wordmark{transform:rotate(-90deg) translateX(-100%);translate:var(--wm-x) 0}
[dir=rtl] .site-header.is-vertical .wordmark{transform:rotate(-90deg) translateY(-100%)}
.site-header.is-hidden.is-vertical .wordmark{translate:var(--wm-x) calc((var(--header-h) + env(safe-area-inset-top)) * 1.1);
  transition:transform 600ms var(--ease-out),translate 500ms var(--ease-in-out),color 450ms linear}
html.has-project .site-header:is(.is-vertical,.is-hidden) .wordmark{transform:none;translate:none}
html.has-project .site-header{--roll-ink:currentColor}   /* a project page sets its own pair: roll in the label's ink */
/* theme.js gives the wordmark its own data-theme from a probe at its own centre (the vertical mark reaches ~110 px
   down, past the header's probe); the colour follows that, except over a project page (the header's pair). */
.site-header .wordmark[data-theme]{color:var(--t-fg)}
html.has-project .site-header .wordmark[data-theme]{color:inherit}
@media (max-width:700px){.site-header.is-vertical .wordmark{transform:none;translate:none}}
/* Transitions only once the preloader FLIP has landed (theme.js adds .wm-live), so the letter swap stays instant. */
.site-header.wm-live .wm-l{transition:translate 420ms var(--ease-in-out) calc((var(--wi,1) - 1) * 30ms),opacity 420ms var(--ease-in-out) calc((var(--wi,1) - 1) * 30ms)}
/* The full YANAY stays on every desktop / tablet header (like lusion.co keeps LUSION). theme.js only sets .is-collapsed
   past .8vh on a ≤ 700 px header that has no room for YANAY beside its buttons: letters 2–5 then slide into the Y
   (reverse stagger); hover / focus expands them (forward). */
.site-header.is-collapsed .wordmark:not(:hover,:focus-visible) .wm-l:nth-child(n+2){translate:-.4em 0;opacity:0!important;transition-delay:calc((4 - var(--wi,1)) * 30ms)}
.header-actions{display:flex;align-items:center;gap:6px}
.sound-btn,.lang-btn,.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-inline:12px;border-radius:var(--r-pill);
  font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap}
.sound-btn:hover,.lang-btn:hover,.menu-btn:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.sound-btn{position:relative;isolation:isolate}
/* The EN page shows "עב": the system Hebrew face renders it, so Heebo (122 KB) is only fetched for the HE page. */
.lang-btn{min-width:44px}
/* Sound + language sit on their own pills, like the menu / CTA pills (lusion.co: every header control is a pill), so
   the page's text never runs through their labels mid-scroll (the work blurb used to cross "SOUND ON"). Light header:
   a soft lilac pill; dark header: a glass dark pill, lifted a touch so it reads on the darkest band (theme.js writes the
   header's data-theme; html.mobile drops the backdrop blur for a denser glass). Cinema mode keeps its
   own glass (the ::before below), so the button's pill steps aside there. */
.site-header :is(.sound-btn,.lang-btn){--hd-pill:var(--lilac);--hd-pill-hover:color-mix(in srgb,var(--lilac) 86%,var(--ink));background:var(--hd-pill)}
.site-header[data-theme=dark] :is(.sound-btn,.lang-btn),html.has-project .site-header :is(.sound-btn,.lang-btn){--hd-pill:color-mix(in srgb,var(--dark-ink) 12%,var(--glass-dark));
  --hd-pill-hover:color-mix(in srgb,var(--dark-ink) 22%,var(--glass-dark));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.mobile .site-header[data-theme=dark] :is(.sound-btn,.lang-btn),html.mobile.has-project .site-header :is(.sound-btn,.lang-btn){--hd-pill:color-mix(in srgb,var(--dark-ink) 12%,rgba(11,13,24,.82));
  -webkit-backdrop-filter:none;backdrop-filter:none}
.site-header :is(.sound-btn,.lang-btn):hover{background:var(--hd-pill-hover)}
html:not(.has-project) .site-header.is-cinema .sound-btn{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-btn{border:1px solid color-mix(in srgb,currentColor 30%,transparent);padding-inline:16px 14px}
.site-header .pill--talk{background:var(--t-fg);border-color:var(--t-fg);color:var(--t-bg)}
.site-header .pill--talk:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
@media (max-width:700px){.site-header .pill--talk{display:none}}
@media (max-width:420px){.sound-btn .mag-inner{display:none}}

/* One transition list for every header item: the hero cascade (700 ms, 60 ms stagger), the cinema step-back (240 ms)
   and the hover / theme colour swaps. Children inherit `color` from the header, so only the pill transitions it. */
.site-header .header-actions>*{--hd:calc(var(--hi,0) * 60ms);--ho:400ms;--ht:700ms;--hv:0s;
  transition-property:opacity,translate,visibility,background-color,border-color,color;
  transition-duration:var(--ho),var(--ht),0s,var(--hb,var(--d-xs)),var(--hc,0s),var(--hc,0s);
  transition-timing-function:linear,var(--ease-out),linear,linear,linear,linear;
  transition-delay:var(--hd),var(--hd),var(--hv),0s,0s,0s}
.site-header .header-actions>.pill--talk{--hb:300ms;--hc:300ms}
/* Hero cascade: items wait above the bar until the `hero` gate (only once theme.js runs, so a dead module never hides them). */
html.theme-ready .site-header:not(.is-in) .header-actions>*{opacity:0;translate:0 -130%;visibility:hidden}

/* Sound equaliser: 4 bars. theme.js writes each bar's transform from ctx.audio.level() while data-state=on;
   locked = idle breathing; off = flat at .2 (aria-pressed=false). */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.eq i{display:block;width:2px;height:10px;background:currentColor;transform-origin:50% 100%;transform:scaleY(var(--lv,.3));transition:transform 120ms linear}
.sound-btn[data-state=on] .eq i{transition:none}
.sound-btn[data-state=locked] .eq i{animation:eq-breathe 1.2s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s} .eq i:nth-child(3){animation-delay:-.6s} .eq i:nth-child(4){animation-delay:-.9s}
[aria-pressed=false]>.eq i{transform:scaleY(.2)!important;animation:none}
@keyframes eq-breathe{from{transform:scaleY(.25)}to{transform:scaleY(.75)}}

/* Menu button: label rolls MENU → CLOSE (theme.js swaps the key), two 6 × 1.5 px bars rotate into an ×. */
.menu-bars{display:inline-grid;gap:3px;width:14px}
.menu-bars i{display:block;height:1.5px;background:currentColor;transition:transform 400ms var(--ease-in-out)}
.menu-btn[aria-expanded=true] .menu-bars i:first-child{transform:translateY(2.25px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-bars i:last-child{transform:translateY(-2.25px) rotate(-45deg)}

/* Cinema mode (yanay:film immersed): language, pill and menu step back; the wordmark and sound sit in a glass pill.
   The pill is a ::before layer (opacity only), so nothing reflows when the film takes over. */
.site-header.is-cinema{color:var(--dark-ink)}
.site-header.is-cinema :is(.lang-btn,.pill--talk,.menu-btn){opacity:0;translate:0 -8px;visibility:hidden;pointer-events:none;--ho:240ms;--ht:240ms;--hd:0s;--hv:240ms}
:is(.wordmark,.sound-btn)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glass-dark);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity 240ms linear,visibility 0s linear 240ms}
.site-header.is-cinema :is(.wordmark,.sound-btn)::before{opacity:1;visibility:visible;transition:opacity 240ms linear,visibility 0s}
html.mobile :is(.wordmark,.sound-btn)::before{background:rgba(11,13,24,.6);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------------------------------------------------------------- page progress (SPEC §3.9.6) */
.progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:var(--z-progress);pointer-events:none;opacity:0;transition:opacity var(--d-m) linear}
html.is-entered .progress{opacity:1}
.progress>span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}
[dir=rtl] .progress>span{transform-origin:right center}

/* ---------------------------------------------------------------- slats (menu + curtain) */
/* 6 slats, 16.9 % wide at i·16.6667 % (the .25 % overlap kills hairlines). inset-inline-start puts slat 0 at the
   reading start, so index order = reading order in both directions. The 1 px key line sits on each slat's start edge
   (above the previous slat) and fades when the menu settles. */
.slats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.slat{position:absolute;top:0;bottom:0;width:16.9%;inset-inline-start:calc(var(--i,0) * 16.6667%);background:var(--dark)}
.slat:not(:first-child)::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:1px;background:rgba(255,255,255,.06);transition:opacity 300ms linear}

/* Curtain jump (yanay:jump): rests lifted above the viewport; theme.js closes and lifts the slats with WAAPI. */
.curtain{position:fixed;inset:0;z-index:var(--z-curtain);pointer-events:none;overflow:hidden}
.curtain .slat{transform:translateY(-101%)}
.curtain.is-active{pointer-events:auto}

/* ---------------------------------------------------------------- menu dialog (SPEC §3.9.4) */
/* Slats rest covering the screen; theme.js animates them in from -101 % (and drives every entry with WAAPI). */
.menu{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--dark-ink);overflow:hidden;overscroll-behavior:contain}
.menu::backdrop{background:transparent}
.menu.is-settled .slat::after{opacity:0}
.menu-close{position:absolute;top:calc(env(safe-area-inset-top) + (var(--header-h) - 44px) / 2);inset-inline-end:var(--gutter);z-index:2;
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-inline:16px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;
  transition:background-color var(--d-xs) linear,border-color var(--d-xs) linear}
.menu-close:hover{background:color-mix(in srgb,currentColor 10%,transparent);border-color:color-mix(in srgb,currentColor 40%,transparent)}
.menu-x{position:relative;width:14px;height:14px}
.menu-x i{position:absolute;top:50%;left:0;width:100%;height:1.5px;margin-top:-.75px;background:currentColor;transform:rotate(45deg)}
.menu-x i+i{transform:rotate(-45deg)}
.menu nav{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 2vh) var(--gutter) 18vh}
.menu-links{display:grid;gap:.5vh;justify-items:start}
.menu-links a{position:relative;display:inline-flex;align-items:flex-start;gap:.35em;max-width:100%;
  font-size:min(clamp(48px,9vw,140px),13.2vh);font-weight:500;line-height:.92;letter-spacing:-.06em;   /* the vh cap keeps six lines on short screens */
  transition:opacity 300ms linear,transform 400ms var(--ease-out)}
:lang(he) .menu-links a{font-family:var(--font-he);font-weight:600;letter-spacing:-.02em;line-height:1;font-size:min(clamp(48px,9vw,140px),12.2vh)}
.menu-links .n{font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);padding-top:.9em;opacity:.6;font-variant-numeric:tabular-nums;min-width:2.4em}
/* The link text is kinetic's manual char split; theme.js drives the chars with WAAPI only, so in here they never
   transition and never fade (whatever kinetic's state CSS says). The host is the mask. */
.menu-links a>[data-split]{display:block;clip-path:inset(-.25em -.2em -.3em -.12em)}
.menu-links [data-split] :is(.k-l,.k-li,.k-w,.k-c){opacity:1!important;transition:none!important}
.menu-links .k-c{transform-origin:0 100%}
.menu-links a::after{content:"↗";font-size:.32em;line-height:1;align-self:center;opacity:0;translate:-.3em 0;transition:opacity 300ms linear,translate 400ms var(--ease-out)}
[dir=rtl] .menu-links a::after{content:"↖";translate:.3em 0}
@media (hover:hover) and (pointer:fine){
  .menu-links:has(a:hover) a:not(:hover){opacity:.22}
  .menu-links a:hover{transform:translateX(.15em)}
  [dir=rtl] .menu-links a:hover{transform:translateX(-.15em)}
  .menu-links a:hover::after{opacity:1;translate:none}
}
.menu-links:has(a:focus-visible) a:not(:focus-visible){opacity:.22}
.menu-links a:focus-visible::after{opacity:1;translate:none}
@media (max-width:700px){.menu-links a,:lang(he) .menu-links a{font-size:min(clamp(40px,11vw,64px),8.6vh)}}
.menu-foot{position:absolute;z-index:1;inset-inline:var(--gutter);bottom:max(24px, env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;
  font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;overflow:clip;overflow-clip-margin:8px}
.menu-foot a,.menu-foot button{display:inline-flex;align-items:center;min-height:44px}
:lang(he) .menu-foot{font-family:var(--font-he)}
/* [P2] preview card: theme.js positions .menu-preview (pointer + 40 px, damped) and pops / wipes .mp-card layers.
   It travels under the links (z 0 < nav z 1), so it never hides the word being hovered (QA). */
.menu-preview{position:absolute;top:0;left:0;z-index:0;width:26vw;height:16.25vw;pointer-events:none;will-change:transform}
.mp-card{position:absolute;inset:0;border-radius:16px;overflow:hidden;opacity:0;box-shadow:0 30px 70px -24px rgba(0,0,0,.55)}
.mp-layer{position:absolute;inset:0;overflow:hidden;background:var(--morph)}
.mp-inner{position:absolute;inset:0}
.mp-inner img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.mp-art{display:flex;align-items:center;justify-content:center}
.mp-art--story{background:radial-gradient(120% 140% at 15% 10%,var(--white),var(--lilac) 45%,color-mix(in srgb,var(--lilac) 70%,var(--accent)));color:var(--ink);
  font:500 4.4vw/1 var(--font-latin);letter-spacing:-.06em}
.mp-art--talk{align-items:flex-end;justify-content:space-between;padding:1.4vw;color:var(--white);
  background:radial-gradient(130% 120% at 85% 0%,color-mix(in srgb,var(--accent) 55%,var(--white)),var(--accent) 45%,color-mix(in srgb,var(--accent) 55%,var(--ink)));
  font:600 var(--fs-label)/1.2 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
.mp-art--talk .mp-plus{font-size:3.4vw;line-height:.8;letter-spacing:0}
@media (max-width:1023px),(hover:none){.menu-preview{display:none}}

/* ---------------------------------------------------------------- chapter HUD (SPEC §3.9.7) */
/* theme.js removes [hidden] at entered, toggles .is-shown (hidden in cinema / menu, once the footer reaches mid-screen,
   and while the Featured Work title or a work card's tags / title line passes through its corner) and writes data-theme from its own
   probe at the bottom of the viewport, so the label stays legible over rising sheets. */
/* A soft glass pill keeps it legible when a section's own bottom-start content passes underneath. */
.chapter-hud{position:fixed;bottom:24px;inset-inline-start:24px;z-index:var(--z-hud);display:inline-flex;align-items:center;gap:12px;min-height:40px;
  padding-inline:14px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--t-bg,var(--bg)) 68%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--t-fg,var(--fg));font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;
  opacity:0;visibility:hidden;translate:0 10px;
  transition:opacity 400ms linear,translate 600ms var(--ease-out),visibility 0s linear 400ms,color 450ms linear,background-color 450ms linear}
.chapter-hud.is-shown{opacity:1;visibility:visible;translate:none;transition:opacity 400ms linear,translate 600ms var(--ease-out),visibility 0s,color 450ms linear,background-color 450ms linear}
.hud-n{display:inline-flex;overflow:clip;font-variant-numeric:tabular-nums}
.hud-d{display:inline-block}
.hud-name{display:inline-block;white-space:nowrap}
:lang(he) .chapter-hud{font-family:var(--font-he)}
.hud-line{position:relative;width:64px;height:1px;overflow:hidden;background:color-mix(in srgb,currentColor 25%,transparent)}
.hud-line>span{position:absolute;inset:0;background:currentColor;transform:scaleX(var(--p,0));transform-origin:left center}
[dir=rtl] .hud-line>span{transform-origin:right center}
@media (max-width:1023px),(hover:none),(pointer:coarse){.chapter-hud{display:none!important}}

/* ---------------------------------------------------------------- mobile CTA bar (SPEC §3.9.8) */
.cta-bar{position:fixed;inset-inline:12px;bottom:max(12px, env(safe-area-inset-bottom));z-index:var(--z-cta);
  display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:translateY(140%);visibility:hidden;
  transition:transform calc(320ms * var(--tempo)) var(--ease-in),visibility 0s linear calc(320ms * var(--tempo))}
.cta-bar.is-shown{transform:none;visibility:visible;transition:transform calc(520ms * var(--tempo)) var(--ease-out),visibility 0s}
.cta-bar .pill{height:52px;width:100%;box-shadow:0 10px 30px -12px rgba(11,13,24,.45)}
/* a hairline ring keeps the accent pill's edge on accent surfaces (craft card 04) */
.cta-bar .pill--primary{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 10px 30px -12px rgba(11,13,24,.45)}
:lang(he) .cta-bar .pill{font-family:var(--font-he)}
@media (min-width:701px){.cta-bar{display:none!important}}

/* ---------------------------------------------------------------- credits dialog (SPEC §3.9.9) */
/* Full-viewport transparent dialog: theme.js injects .credits-scrim (fades) and pops .credits-panel (.96 → 1). */
.credits{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--gutter);border:0;
  background:transparent;color:var(--ink);overflow:hidden;overscroll-behavior:contain}
.credits[open]{display:grid;place-items:center}
.credits::backdrop{background:transparent}
.credits-scrim{position:absolute;inset:0;background:var(--scrim)}
.credits-panel{position:relative;width:min(580px,100%);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;
  display:grid;gap:16px;padding:clamp(28px,4vw,48px);border-radius:var(--r-card);background:var(--light);color:var(--ink);
  box-shadow:0 40px 100px -30px rgba(11,13,24,.5)}
.credits h2{font-size:clamp(32px,4vw,56px);padding-inline-end:56px}
.credits p{font-size:var(--fs-body)}
.credits .license-note{font-size:14px;line-height:1.6;color:var(--muted)}
.credits .license-note a{text-decoration:underline;text-underline-offset:.2em}
.credits-close{position:absolute;top:16px;inset-inline-end:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);font-size:22px;line-height:1;transition:background-color var(--d-xs) linear}
.credits-close:hover{background:var(--lilac)}

/* The custom cursor (z 9999) sits under the top layer: inside an open dialog the system cursor always shows. */
html dialog[open],html dialog[open] *{cursor:auto}
html dialog[open] :is(a,button){cursor:pointer}

/* ---------------------------------------------------------------- footer (SPEC §3.10.5) */
.footer{position:relative;z-index:9;min-height:100vh;min-height:100lvh;display:flex;flex-direction:column;justify-content:space-between;gap:6vh;
  padding:calc(var(--header-h) + 4vh) var(--gutter) max(3vh, env(safe-area-inset-bottom));background:var(--dark);color:var(--dark-ink);overflow-x:clip}
.footer-top{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:center;gap:16px 24px;
  font:600 var(--fs-label)/1.4 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
.footer-top time{font-variant-numeric:tabular-nums}
@media (max-width:700px){.footer-top{grid-template-columns:1fr 1fr;justify-content:stretch}}
/* sections.js measures the word and writes font-size; the fallback fits YANAY in one line at any width. */
.footer-mark{display:flex;justify-content:space-between;align-items:flex-end;margin:0;direction:ltr;white-space:nowrap;
  font:500 26vw/.78 var(--font-latin);letter-spacing:-.04em;user-select:none;-webkit-user-select:none}
.fm-l{display:inline-block;contain:layout;padding:0;font:inherit;line-height:inherit;color:inherit;transform-origin:50% 100%;touch-action:manipulation}

/* ---------------------------------------------------------------- reduced motion + no-JS (SPEC §3.9.1, §2.10) */
:is(html.reduced,html.no-js) .pinned{height:auto}
:is(html.reduced,html.no-js) .pinned>.stage,:is(html.reduced,html.no-js) .stage{position:relative;height:auto}
:is(html.reduced,html.no-js) :is(#between,#football,#work,#craft,#contact){margin-top:0}
:is(html.reduced,html.no-js) :is(.svc-tail,.sheet-lead){display:none}
/* Reduced motion: a chapter's film is a static block (poster + caption list) at the bottom of its section, right where
   the body starts blending into the next band; it keeps its own band colour so its captions never sit on the next
   band's (QA: ink piano captions on the morph navy). The GL view above it stays transparent. */
html.reduced .chapter>.stage>.film{background:var(--t-bg)}
html.reduced :is(.site-header,.header-actions>*,.wordmark,.wm-l,.chapter-hud,.cta-bar,.skip-link,.progress,.topline-rule,.menu-links a,.menu-links a::after,:is(.wordmark,.sound-btn)::before){transition-duration:.01ms!important;transition-delay:0s!important}
html.reduced .site-header.is-collapsed .wm-l{translate:none!important;opacity:1!important}
html.is-locked,html.reduced.is-loading{overflow:hidden}                          /* no Lenis to stop: hold native scroll under the preloader */
html.no-js .site-header{background:var(--light);color:var(--ink)}  /* theme.js never runs: keep the header legible on every band */
/* No JS: nobody paints the body per band, so the dark GL chapters paint themselves; the interlude keeps a screen (its
   copy is absolutely placed); nothing waits for a reveal that will never run; the preloader never covers the page;
   controls that need JS step aside. */
html.no-js #preloader{display:none!important}
html.no-js :is(#between,#football){background:var(--dark);color:var(--dark-ink)}
html.no-js #between .stage{min-height:100vh;min-height:100lvh}
html.no-js :is(.cta-row>*,.svc-card .chips>span,.about-foot .text-link){opacity:1!important;scale:none!important;translate:none!important}
html.no-js :is(.sound-btn,.lang-btn,.menu-btn,.mood-btn,.kick-btn,.score,.sound-cta,.hint--keys,.hint--keys-touch,.morph-hold,[data-copy-email],[data-credits-open],.chapter-hud,.film-play){display:none!important}
html.reduced :where(:focus-visible){animation:none}
html.reduced .eq i{animation:none!important}