/* ===================================================================
   BASE — reset, typography, primitives
   =================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; background:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.05;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--hairline-strong); border-radius:99px; }
html{ scrollbar-color: var(--hairline-strong) transparent; scrollbar-width:thin; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--accent); color:var(--accent-ink); padding:.6em 1em; font-weight:600;
}
.skip-link:focus{ left:var(--gutter); top:var(--gutter); }

/* ---- layout primitives ---- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ position:relative; padding-block:var(--sp-7); }
.section--tight{ padding-block:var(--sp-6); }
section{ position:relative; }

.row{ display:flex; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
}

.accent{ color:var(--accent); }
.serif{ font-family:var(--font-accent); font-style:italic; font-weight:400; }
.muted{ color:var(--ink-soft); }
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.noise{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:var(--noise-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
}

.grid-lines{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background-image:
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px calc(var(--container) / 12));
  background-position:center top;
  max-width:var(--container);
  margin-inline:auto;
  display:none;
}
@media (min-width:1000px){ .grid-lines{ display:block; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}