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

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.68;
  font-weight: 350;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .5s var(--e-out), color .5s var(--e-out);
}
body.is-locked{ overflow:hidden; }

/* ---------- Film grain + ambient halo (whole page) ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity: var(--grain-op); mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- Media ---------- */
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
img{ filter: var(--img-filter); transition: filter .5s var(--e-out); background:var(--surface); }

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-variation-settings: "SOFT" 12, "WONK" 1, "opsz" 40;
  text-wrap: balance;
}
h1{ font-size: var(--t-2xl); }
h2{ font-size: var(--t-xl); }
h3{ font-size: var(--t-lg); line-height:1.14; }
h4{ font-size: var(--t-md); line-height:1.25; letter-spacing:-0.01em; }
p{ text-wrap: pretty; }

a{ color:inherit; text-decoration:none; }
strong,b{ font-weight:600; }
em{ font-style:italic; }

::selection{ background: var(--th-fuchsia); color:#fff; }

/* ---------- Scrollbar ---------- */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface);
}
/* scoped to the page scrollbar only — inner rails style their own, and a
   3px thumb border would collapse a thin horizontal bar */
html::-webkit-scrollbar{ width: 12px; }
html::-webkit-scrollbar-track{ background: var(--surface); }
html::-webkit-scrollbar-thumb{
  background-image: var(--grad-hot);
  border-radius: 20px;
  border: 3px solid var(--bg);
}
html::-webkit-scrollbar-thumb:hover{ background-image: var(--grad-jewel); }

/* ---------- Focus ---------- */
:focus{ outline:none; }
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- Layout primitives ---------- */
.wrap{ width:var(--wrap); margin-inline:auto; }
.wrap-tight{ width:var(--wrap-tight); margin-inline:auto; }
.wrap-text{ width:var(--wrap-text); margin-inline:auto; }

.section{ position:relative; padding-block: var(--s-9); z-index:var(--z-mid); }
.section--tight{ padding-block: var(--s-7); }
.section--flush-top{ padding-top:0; }
.section--alt{ background: var(--bg-alt); }
.section--deep{ background: var(--bg-deep); }

.grid{ display:grid; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.flow > * + *{ margin-top: var(--s-3); }
.flow-lg > * + *{ margin-top: var(--s-4); }

/* ---------- Type utilities ---------- */
.eyebrow{
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--accent);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width: clamp(20px,4vw,44px); height:2px; border-radius:2px;
  background-image: var(--grad-hot);
}
.eyebrow--center::after{
  content:""; width: clamp(20px,4vw,44px); height:2px; border-radius:2px;
  background-image: var(--grad-hot);
}

.lede{
  font-size: var(--t-md);
  line-height:1.62;
  color: var(--text-soft);
  font-weight: 320;
  max-width: 62ch;
}
.muted{ color: var(--text-mut); }
.serif{ font-family: var(--f-display); font-weight:300; }
.italic{ font-style:italic; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }

/* Accent underline that draws in on reveal */
.ink-line{
  background-image: var(--grad-hot);
  background-repeat:no-repeat;
  background-position: 0 92%;
  background-size: 0% 2.5px;
  transition: background-size .9s var(--e-out) .2s;
}
.is-in .ink-line, .ink-line.is-in{ background-size:100% 2.5px; }

/* Small caps meta line */
.meta{
  font-size: var(--t-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--text-mut);
  font-weight:450;
}

/* ---------- Rules & ornaments ---------- */
.rule{ height:1px; background:var(--line); border:0; }
.rule--fade{
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* Phulkari diamond ornament */
.orn{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  color: var(--accent); opacity:.9;
}
.orn i{
  width:6px; height:6px; background:var(--th-fuchsia);
  transform:rotate(45deg); display:block;
}
.orn i:nth-child(2){ width:9px; height:9px; background:var(--th-saffron); }
.orn i:nth-child(3){ background:var(--th-gold); }

/* ---------- Accessibility helpers ---------- */
.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-link{
  position:fixed; top:-100px; left:1rem; z-index:999;
  background:var(--accent); color:var(--bg);
  padding:.75rem 1.25rem; border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:500; letter-spacing:.06em;
  transition: top .3s var(--e-out);
}
.skip-link:focus{ top:1rem; }

/* ---------- Page shell ---------- */
main{ position:relative; z-index:var(--z-mid); display:block; }
.page-top{ padding-top: var(--header-h); }