/* ================================================================
   AnabhiDev-LAB — AnabhiDev Engineering Lab
   HTML · CSS · Vanilla JS · Cloudflare Pages
   Development · Anabhi Dev
   Version   : 1.1
   Generated : 5 September 2026, 00:10:07
   ----------------------------------------------------------------
   Design tokens + reset + base typography.
   Palette, radii and easing mirror anabhidev.com (v2) so the Lab
   reads as the same ecosystem. Theming uses the same alternating
   BAND pattern as the main site (.band-dark / .band-light), not a
   global light/dark toggle.
   ================================================================ */

/* ── BRAND TOKENS (identical to anabhidev.com v2) ── */
:root{
  --blue:#3B9EE8;   --blue-dark:#186DB0;
  --gold:#C9A96A;   --gold-dark:#7A5F26;
  --warm:#E8DCC8;   --sage:#4E8F86;  --sage-dark:#3A6B62;
  --navy:#08111D;   --ivory:#F5F1EA;

  --r-sm:4px; --r-md:10px; --r-lg:20px;
  --gutter:clamp(20px,5vw,64px);
  --max:1200px;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Lab-only addition: the fixed header height, referenced by main's
     offset and by every scroll-margin-top so jump links clear the bar. */
  --header-h:82px;
}

/* ── BAND: local canvas per section ──
   Every colour below is redefined inside BOTH bands, so no token is
   ever left undefined regardless of which band a component lands in. */
.band-dark{
  --bg:#08111D; --surface:#101A28; --ink:#F4EFE5; --muted:rgba(232,220,200,.66);
  --line:rgba(232,220,200,.14); --edge:rgba(201,169,106,.55);
  --accent:var(--gold); --accent-ink:#08111D; --soft:rgba(201,169,106,.10);
  --live:var(--sage); --wip:var(--gold); --idle:rgba(232,220,200,.38);
  background:var(--bg); color:var(--ink);
}
.band-light{
  --bg:#F5F1EA; --surface:#FFFFFF; --ink:#0B1829; --muted:#4A5568;
  --line:#DED6C6; --edge:#9A8B6E;
  --accent:var(--gold-dark); --accent-ink:#FFFFFF; --soft:rgba(122,95,38,.08);
  --live:var(--sage-dark); --wip:var(--gold-dark); --idle:#8A94A3;
  background:var(--bg); color:var(--ink);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Overflow lock — SOP kategori 1: html AND body, and max-width:100%
   (NOT 100vw — 100vw includes the scrollbar width and causes a ~15px
   horizontal overflow on Windows/Linux non-overlay scrollbars). */
html,body{overflow-x:hidden;max-width:100%}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.7; letter-spacing:-.003em;
  background:#08111D; color:#F4EFE5;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code{overflow-x:auto;max-width:100%}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}

/* Grid/flex children refuse to shrink below intrinsic width by default —
   this single rule prevents most hidden horizontal-scroll bugs. */
.grid-safe>*{min-width:0}

/* ── FOCUS & SCREEN READER ── */
:focus-visible{outline:2px solid var(--accent,#C9A96A);outline-offset:3px;border-radius:var(--r-sm)}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:#08111D;padding:12px 20px;border-radius:0 0 var(--r-md) 0;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ── TYPOGRAPHY ── */
.dsp{font-family:'Bricolage Grotesque','Inter',sans-serif}

h1{
  font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;
  font-size:clamp(38px,5.4vw,72px);line-height:1.04;letter-spacing:-.022em;margin-bottom:14px;
}
h2{
  font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;
  font-size:clamp(28px,3.5vw,46px);line-height:1.08;letter-spacing:-.022em;margin-bottom:12px;
}
h3{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;letter-spacing:-.018em}
h4{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:600;letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent)}

/* ── CONTAINERS ──
   .wrap     — marketing pages (Blueprint A): matches anabhidev.com, max 1200px.
   .wrap-lab — registry / timeline / insights (Blueprint B & E): SOP kategori 1
               forbids a fixed max-width on these page types, so width is
               constrained ONLY by responsive padding. */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap-lab{width:100%;padding:0 clamp(24px,6vw,180px)}

/* ── SCROLLBAR (SOP kategori 13 — mandatory on every scrollable panel) ── */
.scroll-thin{scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.scroll-thin::-webkit-scrollbar{width:6px;height:6px}
.scroll-thin::-webkit-scrollbar-track{background:transparent}
.scroll-thin::-webkit-scrollbar-thumb{background:var(--edge);border-radius:3px}

/* ── MOTION ── */
.reveal-on .reveal{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-on .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal-on .reveal{opacity:1;transform:none}
}