/* ============================================================
   tajwalia.com · 2026 — Layer 1: BASE
   Reset, typography engine, shared primitives.
   Consumes tokens.css only.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

/* Sideways-scroll guard. NOTE: overflow-x:hidden silently breaks
   position:sticky for every descendant (the nav), so browsers that
   support it get overflow-x:clip instead — same protection, sticky
   nav preserved. */
html, body{
  overflow-x:hidden;
  position:relative;
  width:100%;
}
@supports (overflow-x:clip){
  html, body{overflow-x:clip}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

::selection{background:var(--accent-tint)}

/* Keyboard focus: visible, consistent, never removed for mouse users */
:focus{outline:none}
:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:4px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:var(--leading-tight);
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{
  font-size:var(--text-display);
  line-height:var(--leading-display);
  letter-spacing:var(--track-display);
  font-variation-settings:"opsz" 72;
}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-lg)}
p{margin:0 0 1.1em}

.lead{
  font-size:var(--text-md);
  color:var(--ink-soft);
  max-width:46ch;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--text-2xs);font-weight:600;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:var(--s2);
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--accent);
  display:inline-block;transform-origin:left center;
}

/* ---------- Section rhythm (asymmetric 8px lattice) ---------- */
section{padding:var(--section-pad-t) 0 var(--section-pad-b)}
.section-head{max-width:720px;margin-bottom:clamp(var(--s4), 4vw, var(--s6))}
.section-head p{color:var(--ink-soft)}
.alt{background:var(--paper-deep)}

/* ---------- Reduced motion: global kill ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
}