/* ============================================================
   TAVDI — base: reset, type, the loom grid, utilities
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  /* `clip` rather than `hidden`: it stops the full-bleed hero art
     widening the page without turning html into a scroll container,
     which would break every sticky header on the site. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-snug);
  margin: 0;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

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

/* Focus: a saffron thread, always visible, never removed */
:focus-visible {
  outline: 2px solid var(--kesar);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid var(--bg);
}

/* ---------- Gujarati script tuning ----------
   Gujarati matras sit above and below the shirorekha; the Latin
   line-height crowds them. Anything tagged :lang(gu) gets air. */
:lang(gu), [lang="gu"], .gu {
  line-height: 1.75;
  letter-spacing: 0;
}
h1:lang(gu), h2:lang(gu), h3:lang(gu), .gu-display {
  line-height: 1.28;
  letter-spacing: 0;
}

/* ============================================================
   The loom — warp rules running the full height of the page,
   weft content threaded across them.
   ============================================================ */
.shell {
  width: var(--shell);
  margin-inline: auto;
}
.shell--wide { width: var(--shell-w); }

.warp {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: var(--warp);
  opacity: .5;
}
.warp span {
  border-left: 1px solid var(--line);
}
.warp span:last-child { border-right: 1px solid var(--line); }
@media (max-width: 720px) {
  .warp { grid-template-columns: repeat(2, 1fr); opacity: .35; }
}

/* Everything above the warp */
.page { position: relative; z-index: 1; }

/* ---------- Section scaffolding ---------- */
.band {
  padding-block: var(--section-y);
  position: relative;
}
.band--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.band--flush-top { padding-top: 0; }

/* Eyebrow — a loom mark. Reads as "which pass of the shuttle
   this is", so it carries the section's actual role. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s4);
}
.mark::before {
  content: "";
  width: 26px;
  height: 7px;
  flex: none;
  background:
    linear-gradient(90deg, var(--patola) 0 33.33%, transparent 0 66.66%, var(--kesar) 0);
  clip-path: polygon(0 50%, 12.5% 0, 25% 50%, 37.5% 100%, 50% 50%, 62.5% 0, 75% 50%, 87.5% 100%, 100% 50%, 87.5% 100%, 0 100%);
}
.mark--patola { color: var(--patola-hi); }

.band-head {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s7);
  max-width: 62ch;
}
.band-head p { color: var(--text-dim); font-size: var(--t-md); }

.band-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--s5);
}
@media (min-width: 900px) {
  .band-head--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .band-head--split > :last-child { justify-self: end; text-align: right; }
}

/* ---------- Type helpers ---------- */
.display   { font-family: var(--font-display); font-weight: 800; }
.serif     { font-family: var(--font-serif); }
.mono      { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-xs { font-size: var(--t-xs); }
.t-sm { font-size: var(--t-sm); }
.t-md { font-size: var(--t-md); }
.t-lg { font-size: var(--t-lg); }
.t-xl { font-size: var(--t-xl); }
.t-2xl{ font-size: var(--t-2xl); }
.t-3xl{ font-size: var(--t-3xl); }
.dim  { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.hot  { color: var(--accent); }
.rose { color: var(--patola-hi); }
.upper{ text-transform: uppercase; letter-spacing: .14em; }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }
.measure { max-width: 60ch; }
.measure-sm { max-width: 44ch; }

/* Ink-gradient headline — flame licking up the letterforms.
   Used once or twice per page, never as a default. */
.flame-ink {
  background: linear-gradient(96deg, var(--haldi) 4%, var(--jyot) 42%, var(--patola) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout helpers ---------- */
.stack   { display: grid; gap: var(--s4); }
.stack-2 { display: grid; gap: var(--s2); }
.stack-6 { display: grid; gap: var(--s6); }
.row     { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--tight { gap: var(--s2); }
.row--nowrap { flex-wrap: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }

.grid { display: grid; gap: var(--gut); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-160%);
  background: var(--kesar); color: #16100a;
  padding: .625rem 1rem; border-radius: var(--r-sm);
  font-weight: 700; transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

[hidden] { display: none !important; }
.is-hidden { display: none !important; }