/* ============================================================
   Zabbit — public landing site · v2
   Global styles (ported verbatim from the approved design).
   Fonts: Instrument Serif (display), Hanken Grotesk (body/UI),
   IBM Plex Mono (all numbers). Palette: Bengaluru at dusk.
   ============================================================ */

*{box-sizing:border-box}
/* Root canvas is hero indigo, NOT cream: the first paint on load is the bare
   canvas, and a cream first-frame clashed with the indigo hero that renders
   over it (the "flash"). Every <section> paints its own background inline,
   so the cream floors are unaffected — the canvas only shows at the very top
   (hero = same indigo) and on overscroll. */
html{scroll-behavior:smooth;background:#2C3763}

/* ————— font-swap smoothing ————— */
/* Metric-matched local fallbacks. Nearly every element sets an explicit
   line-height, so the visible swap jolt is glyph advance width — size-adjust
   is the knob that matters; the ascent/descent overrides steady the rest.
   Values are tuned approximations, not measured font metrics. */
@font-face{font-family:'Instrument Serif Fallback';src:local('Times New Roman');size-adjust:105%;ascent-override:96%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:'Hanken Grotesk Fallback';src:local('Arial');size-adjust:101%;ascent-override:103%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Mono Fallback';src:local('Courier New');size-adjust:100%;ascent-override:102%;descent-override:27%;line-gap-override:0%}
/* Families are declared in inline font: shorthands throughout the markup;
   these splice the matched fallback into each stack (primary family stays
   first, so nothing changes once the real fonts arrive). !important is
   required to beat the inline shorthand — it overrides family only. */
[style*="Instrument Serif"]{font-family:'Instrument Serif','Instrument Serif Fallback',Georgia,serif !important}
[style*="Hanken Grotesk"]{font-family:'Hanken Grotesk','Hanken Grotesk Fallback',system-ui,sans-serif !important}
[style*="IBM Plex Mono"]{font-family:'IBM Plex Mono','IBM Plex Mono Fallback',Consolas,monospace !important}

body{margin:0;background:#2C3763;color:#191714;font-family:'Hanken Grotesk','Hanken Grotesk Fallback',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
a{color:#A8481F;text-decoration-color:rgba(192,86,47,.45);text-underline-offset:3px}
a:hover{color:#C0562F}
::selection{background:#EDAA3C;color:#191714}
:focus-visible{outline:3px solid #C0562F;outline-offset:2px}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
/* film grain — plain opacity, no mix-blend-mode: blending a fixed full-viewport
   layer forces the browser to re-composite the whole screen every scroll frame */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");opacity:.045;pointer-events:none;z-index:300}
/* parallax layers get their own compositor layer — moved via transform only */
#z-stars{will-change:transform}
/* hero always covers the first viewport so nothing below it peeks through
   while the page settles on load (content usually exceeds this anyway) */
#floor-r{min-height:100vh}

/* ————— elevator rail (design ported from Zabbit Landing v6) ————— */
:root{
  --plaster:#FAF5EC; --ink:#191714; --dusk:#232E52; --night:#171C3E;
  --clay-ink:#A8481F; --marigold:#EDAA3C; --hairline:#E2D8C6;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
.rail{position:fixed;top:0;right:0;bottom:0;width:64px;z-index:200;display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:12px}
.rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:color-mix(in oklab, var(--dusk) 55%, var(--plaster));opacity:.55}
.rail :focus-visible{outline-color:var(--plaster)}
.readout{position:relative;z-index:1;font:500 10px/1 'IBM Plex Mono','IBM Plex Mono Fallback',monospace;letter-spacing:.08em;color:var(--plaster);background:var(--night);border:1px solid color-mix(in oklab, var(--plaster) 28%, transparent);padding:6px 7px;border-radius:4px;white-space:nowrap}
.stops{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.stop{width:30px;height:30px;border-radius:50%;border:1px solid var(--hairline);background:var(--plaster);color:var(--clay-ink);font:500 12px/1 'IBM Plex Mono','IBM Plex Mono Fallback',monospace;cursor:pointer;padding:0;display:grid;place-items:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.stop:hover{transform:scale(1.12);border-color:var(--clay-ink)}
.stop.active{background:var(--marigold);color:var(--ink);border-color:transparent;box-shadow:0 0 0 4px color-mix(in oklab, var(--marigold) 30%, transparent),0 0 22px color-mix(in oklab, var(--marigold) 55%, transparent)}
@keyframes zLamp{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes zPulse{0%{box-shadow:0 0 0 0 rgba(47,107,75,.5)}70%{box-shadow:0 0 0 11px rgba(47,107,75,0)}100%{box-shadow:0 0 0 0 rgba(47,107,75,0)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
@media (max-width:1140px){
#z-hero-grid{grid-template-columns:1fr !important;min-height:0 !important;padding-top:130px !important;gap:56px !important}
#z-hero-bldg-scale{transform:scale(.85);transform-origin:top center}
#z-hero-bldg-wrap{height:600px !important;overflow:visible}
#z-promise-grid{grid-template-columns:1fr !important}
#z-pull{position:static !important}
#z-board-grid{grid-template-columns:1fr !important}
#z-torn{position:static !important;margin:20px 0 0 auto !important}
#z-gate-grid{grid-template-columns:1fr !important}
#z-dawn-grid{grid-template-columns:1fr !important}
#z-balcony-cards{grid-template-columns:1fr !important}
#z-pros-grid{grid-template-columns:1fr !important}
.z-ticks{display:none !important}
}
@media (max-width:760px){
/* rail docks as a bottom bar (v6 design); env(safe-area-inset-bottom) keeps the
   stops above Android gesture / iOS home bars — bar background extends under them */
.rail{top:auto;bottom:0;left:0;right:0;width:auto;height:calc(56px + env(safe-area-inset-bottom,0px));flex-direction:row;align-items:center;padding:0 14px env(safe-area-inset-bottom,0px);gap:12px;background:color-mix(in oklab, var(--night) 94%, transparent);border-top:1px solid color-mix(in oklab, var(--plaster) 16%, transparent)}
.rail::before{display:none}
.stops{flex-direction:row;justify-content:space-evenly}
.stop{width:34px;height:34px}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
#z-topbar-loc{display:none !important}
#z-hero-bldg-scale{transform:scale(.6)}
#z-hero-bldg-wrap{height:420px !important}
#z-plan{display:flex !important;flex-direction:column !important}
#z-plan > div{min-height:116px !important}
#z-balcony-strip{display:none !important}
#z-balcony-cards > div{margin-top:0 !important;width:100% !important}
#z-stats{flex-direction:column !important;gap:24px !important}
.z-ans{padding-left:24px !important}
}
@media (max-width:480px){
#z-pro-fields{grid-template-columns:1fr !important}
}
/* tiny phones (320–380px): keep readout + 7 stops inside the bar */
@media (max-width:380px){
.stop{width:30px !important;height:30px !important}
.rail{gap:8px !important;padding-left:10px !important;padding-right:10px !important}
}