@font-face{font-family:"Abyssinica SIL";src:url(../assets/fonts/AbyssinicaSIL-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"RFC Vintage Apothecary";src:url(../assets/fonts/RFCVintageApothecary-Regular.woff2) format("woff2");font-display:swap}
/* Tanach (Dieter Steffmann, 1001fonts FFC licence — free for commercial use, no modification: served as the original TTF) */
@font-face{font-family:"Tanach";src:url(../assets/fonts/Tanach.ttf) format("truetype");font-display:swap}
:root{
  --white:#F2F2F2;
  --ground:#1a1d24;
  --stage-w:1728; --stage-h:1117;
  --aura-heading:0 0 15px #fff;
  --aura-body:0 0 3.5px #fff;
  --shadow-hand:-13px -2px 4px rgba(0,0,0,.93);
  --shadow-ticket:-9px -6px 4px rgba(0,0,0,.93);
  --shadow-logo:0 -2px 4px rgba(0,0,0,.93);
  --font-heading:"IM Fell DW Pica","RFC Vintage Apothecary",Georgia,serif;   /* Eyal's pick 2026-10-01 (compare/: IM Fell English, DW Pica, Goudy Bookletter) */
  --font-body:"Abyssinica SIL",Georgia,serif;
  --font-logo:"Tanach",Georgia,serif;
}
*{box-sizing:border-box;margin:0}
html,body{background:var(--ground);color:var(--white);overflow-x:hidden}
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}   /* no visible scrollbar (Eyal, 2026-10-01); scrolling still works, the day labels show the place */
body{-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none}
img{display:block;max-width:none}
.h192{font:400 120px/153.6px var(--font-heading);text-transform:uppercase;text-shadow:var(--aura-heading);text-align:center;white-space:nowrap;letter-spacing:.07em}
.h48{font:400 30px/38.4px var(--font-heading);letter-spacing:.07em;text-transform:uppercase;text-align:center}
.b36{font:400 36px/1.6 var(--font-body);text-shadow:var(--aura-body);text-align:center}
.desktop-only-plate{display:none}
@media (max-width:1023px){
  .desktop-only-plate{display:grid;place-items:center;position:fixed;inset:0;z-index:99;background:var(--ground);padding:32px;font:400 24px/1.4 var(--font-body);text-align:center}
}
/* the world: one 100vh section pinned for the whole page. Inside it, two 1728x1117 frames share Figma coordinates:
   .backdrop (scenery + darkener) scales to COVER the viewport, so paper pieces slide to its very edges with no bars;
   .stage (content) scales to fit INSIDE it (contain) and does not clip; js/scroll.js keeps parked pieces out of the margins. */
.world{position:relative;height:100vh;height:100svh;overflow:hidden;overflow:clip;background:var(--ground)}   /* clip: focus can never scroll the world */
.backdrop,.stage{
  position:absolute;left:50%;top:50%;
  width:calc(var(--stage-w) * 1px);height:calc(var(--stage-h) * 1px);
  transform:translate(-50%,-50%) scale(var(--stage-scale,1));
  transform-origin:center center;
}
.backdrop{transform:translate(-50%,-50%) scale(var(--bleed-scale,1))}
.stage{}   /* no clip: the backdrop covers the window, so content may run to the window edge (the world clips there) */
.backdrop > *,.stage > *,.fish > *,.intro-clouds > *{position:absolute}
.backdrop .darkener{background:#000;opacity:.4}   /* scroll.js drives it per frame (footer .25); this is its value before the engine starts */
/* discrete paper pieces (moon, sun, birds, big hands) live on the contained stage so they never crop with the bleed;
   they sat under the .4 darkener in Figma, so they carry the same dimming themselves */
.stage .scenery{filter:brightness(.6)}
html.is-intro{overflow:hidden}
html.is-intro .daynav{opacity:0;visibility:hidden}   /* until intro.js fades it in with the logo */
/* day nav: a 1728-wide strip scaled with the stage; labels 48px heading, padding 0 199 (node 12661:1380) */
.daynav{position:fixed;left:50%;top:0;z-index:10;width:calc(1728px * var(--stage-scale,1));height:calc(39px * var(--stage-scale,1));transform:translateX(-50%);pointer-events:none}
.daynav__list{list-style:none;padding:0;margin:0}
.daynav__item{position:absolute;top:0;font:400 calc(30px * var(--stage-scale,1))/calc(38.4px * var(--stage-scale,1)) var(--font-heading);letter-spacing:.07em;text-transform:uppercase;color:var(--white);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;cursor:pointer;background:none;border:0;padding:0}
.daynav__item{left:0;transform:translateX(-50%);pointer-events:auto}   /* js/nav.js slides the strip with scroll progress */
.daynav__item.is-current{text-shadow:var(--aura-body)}
/* heading sizes (RFC Vintage Apothecary, line-height .8, aura heading) and body sizes (Abyssinica SIL, 1.6, aura body) */
.hd{font-family:var(--font-heading);font-weight:400;letter-spacing:.07em;text-transform:uppercase;text-align:center;text-shadow:var(--aura-heading);color:var(--white);white-space:nowrap}
/* RFC's caps sit on the bottom of its line box; Pica's sit near the top — pad .306 of the line box so baselines land where Figma's do */
.h192,.h48,.hd,.daynav__item{padding-top:.306lh}
/* heading sizes: line box = Figma size × .8 (so every box and line step stays verbatim); glyphs at 62.5% because IM Fell DW Pica's caps are taller than RFC's */
.h128{font-size:80px;line-height:102.4px}.h96{font-size:60px;line-height:76.8px}.h72{font-size:45px;line-height:57.6px}.h60{font-size:37.5px;line-height:48px}.h48x{font-size:30px;line-height:38.4px}.h36x{font-size:22.5px;line-height:28.8px}
.hd.aura-body{text-shadow:var(--aura-body)}
.bd{font-family:var(--font-body);font-weight:400;line-height:1.6;text-align:center;text-shadow:var(--aura-body);color:var(--white)}
.b30{font-size:30px}.b24{font-size:24px}
.col{display:flex;flex-direction:column;align-items:center}
.col > *{position:static}
.cap{display:flex;flex-direction:column;align-items:center}
.cap > *{position:static}
.cap img{object-fit:contain}
/* heading face: IM Fell DW Pica (OFL, Google Fonts), standing in for RFC Vintage Apothecary; sizes are 75% of Figma, +0.03em tracking, because it runs wider */
@font-face{font-family:"IM Fell DW Pica";src:url(../assets/fonts/IMFellDWPica-Regular.woff2) format("woff2");font-display:swap}
/* until the intro's pictures are decoded the world is just the ground colour (no half-loaded frame) */
.world.is-loading .backdrop,.world.is-loading .stage{visibility:hidden}
/* non-current day labels glow on hover */
.daynav__item{transition:opacity .3s,text-shadow .25s}
.daynav__item:not(.is-current):hover,.daynav__item:not(.is-current):focus-visible{text-shadow:0 0 8px #fff,0 0 2px #fff;opacity:1 !important}