/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top frames any anchor target / keyboard focus / load-with-hash
   jump just below the fixed nav (top 16 + height 54 = 70, + breathing). The
   JS SMOOTH ANCHOR handler uses the same offset; this is the no-JS fallback.
   NB: no scroll-behavior:smooth here on purpose — the JS handler animates and
   re-measures each frame (kills the content-visibility:auto jump drift); a
   global smooth would fight its programmatic scrollTo. */
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  /* clip (not hidden): hidden would make body a scroll container and silently
     break the hero's position:sticky pin. Old browsers fall back to hidden. */
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
img{display:block;max-width:100%}
::selection{background:var(--accent-deep);color:var(--on-accent)}

/* ---- AMBIENT LIGHT (fixed radial focal glow behind the grid) ---- */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 95% 62% at 50% -4%,
    var(--amb-core) 0%, #0C0E12 44%, var(--amb-edge) 100%);
}

/* ---- FOCUS (visible, drafting-square ring) ---- */
*:focus{outline:none}
*:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
/* concentric keyboard-focus ring — hug each control's OWN radius instead of the
   2px default (explicit token, not border-radius:inherit — inherit pulls the
   non-rounded parent's 0 and would square the pills) */
.btn:focus-visible{outline-offset:3px;border-radius:var(--r-sm)}
.nav-cta:focus-visible,.social-pill:focus-visible,.social-ico:focus-visible,.dock-btn:focus-visible{outline-offset:3px;border-radius:var(--r-md)}

/* ---- TYPE ---- */
h1,h2,h3,h4{font-family:var(--serif);font-optical-sizing:auto;line-height:1.12;font-weight:500;text-wrap:balance}
p{text-wrap:pretty}
.ink{color:var(--accent)}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
/* METALLIC FOIL — gold-leaf text whose specular highlight tracks the cursor
   (driven by MetallicShimmer, an OOP field that writes --shx/--shy per element).
   Falls back to solid amber where background-clip:text is unsupported. */
.foil{color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foil{
    background:radial-gradient(circle at var(--shx,50%) var(--shy,24%),
      #FFF3D4 0%, #FBC868 26%, #F2A93B 56%, #C9882B 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

/* ====================================================
   DRAFTING FIELD (replaces all glowing orbs + cursor glow)
   One fixed full-viewport hairline grid, masked to fade at the edges. Static.
   ==================================================== */
#draft-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    /* registration ticks at every major (120px) intersection */
    radial-gradient(circle at 0 0, rgba(126,138,147,0.20) 0 1.2px, transparent 1.6px) 0 0/120px 120px,
    repeating-linear-gradient(0deg,var(--grid-minor) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,var(--grid-minor) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,var(--grid-major) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(90deg,var(--grid-major) 0 1px,transparent 1px 120px);
  /* denser behind the hero, fades harder over the content below */
  -webkit-mask-image:radial-gradient(ellipse 112% 82% at 50% 25%,#000 36%,rgba(0,0,0,0.5) 66%,transparent 100%);
  mask-image:radial-gradient(ellipse 112% 82% at 50% 25%,#000 36%,rgba(0,0,0,0.5) 66%,transparent 100%);
  /* rasterize-once GPU layer: a static fixed grid shouldn't re-paint as content
     scrolls under it. contain:strict is safe — the box is sized by inset:0, not content. */
  transform:translateZ(0);contain:strict;
}

/* ---- LIVING BLUEPRINT (canvas layer above the static grid, below content).
        Drawn by BLUEPRINT FIELD in js/main.js — wireframe massing studies that
        trace, dimension, hold and fade. Not created on touch / reduced motion. */
#blueprint-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---- FILM GRAIN (atmosphere, BEHIND content) ----
   Noise over the dark drafting FIELD, not smeared over content. It used to sit
   at z-index:9998 — OVER the entire site — which read as fuzz on sharp content
   (and vanished in video fullscreen, since the video escapes the page layer).
   Now it sits at z-index:1: above the background grid/blueprint (z0) but BELOW
   every section's content (z2), so text, cards and the video plate stay
   razor-sharp while the grain still textures the field. */
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
  filter:sepia(0.4) contrast(1.08); /* warm the grey noise toward paper */
  /* the procedural-noise + filter fill is one of the costliest paints on the
     page; promote it to its own GPU texture so scroll just recomposites it
     instead of re-rasterizing the noise every frame. */
  transform:translateZ(0);contain:strict;
}
/* break up visible repetition on wide displays */
@media(min-width:1500px){ #grain{background-size:440px 440px} }

/* ---- SCROLL PROGRESS (solid amber rule) ---- */
#scroll-bar{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 60%,var(--accent-hi));z-index:9999;pointer-events:none}

/* ---- content rides above the grid ---- */
section,footer{position:relative;z-index:2}