/* ============================================================
   Base — reset, typography, layout primitives, utilities
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--font-ui);
  font-size:var(--step-0);
  line-height:var(--lh-body);
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{display:block;max-width:100%;height:auto}
/* No blanket img background — it shows through transparent PNGs.
   Media containers carry their own placeholder colour instead. */
/* Inline icons default to text size; component rules override this
   (`:where()` keeps the specificity at zero). Decorative SVGs that
   carry explicit width/height attributes are left alone. */
:where(svg):not([width]){width:1.15em;height:1.15em;flex:none}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2.5px solid var(--green-600);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-500);color:var(--navy-900)}

/* ---------- Headings ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--navy-800);
  letter-spacing:-.018em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 40;
  text-wrap:balance;
}
h1{font-size:var(--step-6);line-height:var(--lh-tight);letter-spacing:-.032em;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144}
h2{font-size:var(--step-5);line-height:1.08;letter-spacing:-.028em;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 96}
h3{font-size:var(--step-3)}
h4{font-size:var(--step-2)}
h5{font-size:var(--step-1)}
p{text-wrap:pretty}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{width:100%;max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:56rem;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section-sm{padding-block:calc(var(--section) * .6)}
.stack>*+*{margin-top:var(--flow,1rem)}
.grid{display:grid;gap:var(--gutter)}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.center{display:flex;align-items:center;gap:var(--sp-3)}

/* ---------- Section headers ---------- */
.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-600);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{
  content:"";width:1.75em;height:1px;background:currentColor;opacity:.5;
}
.eyebrow.is-center::after{content:"";width:1.75em;height:1px;background:currentColor;opacity:.5}
html[lang="te"] .eyebrow{letter-spacing:.04em;text-transform:none}

.sec-head{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.sec-head.is-center{justify-items:center;text-align:center}
.sec-head.is-row{grid-template-columns:1fr auto;align-items:end}
.sec-head p{color:var(--fg-soft);max-width:46ch;font-size:var(--step-0)}
.sec-head.is-center p{margin-inline:auto}

/* Two-tone heading — second word in green, per the reference */
.hl{color:var(--green-600)}
.hl-gold{color:var(--gold-600)}
.hl-ital{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--green-600);letter-spacing:-.01em}

/* ---------- Utilities ---------- */
.u-cream{background:var(--cream)}
.u-paper{background:var(--paper)}
.u-alt{background:var(--cream-alt)}
.u-dark{background:var(--green-900);color:var(--cream)}
.u-dark h1,.u-dark h2,.u-dark h3,.u-dark h4{color:var(--cream)}
.u-dark .eyebrow{color:var(--gold-400)}
.u-dark .sec-head p{color:rgba(251,248,241,.72)}
.muted{color:var(--fg-mute)}
.soft{color:var(--fg-soft)}
.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}
.nowrap{white-space:nowrap}
.rule{height:1px;background:var(--border);border:0}

/* Grain overlay — subtle paper texture over the whole page */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:500;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

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