/* ==========================================================================
   PAK SHILAJIT — BASE
   Reset, typography, layout primitives. No component styling lives here.
   ========================================================================== */

/* --- Self-hosted font. Replace the .woff2 files in assets/fonts/ ---------
   Download Instrument Sans from fonts.google.com, run through a subsetter
   (latin + latin-ext; add arabic subset from a companion family for /ar/).
   Self-hosting is not optional — a Google Fonts request is a render-blocking
   third-party round trip and it is the single easiest LCP win on the site. */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset anchor jumps so the sticky header never covers the target. */
  scroll-padding-block-start: calc(var(--header-h) + var(--sp-5));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

/* --- Headings ------------------------------------------------------------
   Exactly one h1 per page. Levels are never skipped. No page introduces a
   size outside this scale. */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-head);
  line-height: var(--lh-head);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-h1-d); }
  h2 { font-size: var(--fs-h2-d); }
  h3 { font-size: var(--fs-h3-d); }
}

p { margin: 0; }
p + p { margin-block-start: var(--sp-4); }

/* Body copy never exceeds the measure, on any page. */
/* --------------------------------------------------------------------------
   PROSE — the article typography system.

   Used by blog posts, the long-form guides and the policy pages: anywhere
   the content is written as flowing HTML rather than assembled from
   components. The reset zeroes all margins, so every rhythm below is
   deliberate rather than inherited from the browser.

   The rule that matters: the gap ABOVE a heading is always bigger than the
   gap below it. That is what makes a heading read as belonging to the text
   underneath rather than floating between two blocks.
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose p { line-height: var(--lh-body); }
.prose p + p { margin-block-start: var(--sp-4); }

.prose h2,
.prose h3,
.prose h4 {
  line-height: var(--lh-head);
  text-wrap: balance;
}

.prose h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--tr-h2);
  margin-block: var(--sp-8) var(--sp-4);
}
@media (min-width: 768px) {
  .prose h2 { font-size: var(--fs-h2-d); }
}

.prose h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-h3);
  margin-block: var(--sp-7) var(--sp-3);
}
@media (min-width: 768px) {
  .prose h3 { font-size: var(--fs-h3-d); }
}

.prose h4 {
  font-size: var(--fs-h4);
  margin-block: var(--sp-6) var(--sp-3);
}

/* A heading that opens the article needs no lead-in above it. */
.prose > :is(h2, h3, h4):first-child { margin-block-start: 0; }

/* Lists read as part of the paragraph flow, not as a boxed component. */
.prose :is(ul, ol) {
  margin-block: var(--sp-4);
  padding-inline-start: var(--sp-6);
}
.prose li { line-height: var(--lh-body); }
.prose li + li { margin-block-start: var(--sp-2); }
.prose li::marker { color: var(--accent-deep); }
.prose :is(ul, ol) :is(ul, ol) { margin-block: var(--sp-2); }

/* Links inside prose are underlined — in a wall of text, colour alone is
   not an affordance and fails the colour-is-not-the-only-signal rule. */
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.prose a:hover { color: var(--accent-deep); }

.prose strong { font-weight: var(--fw-head); color: var(--ink); }

.prose blockquote {
  margin-block: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 3px solid var(--accent-deep);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.prose blockquote p + p { margin-block-start: var(--sp-3); }

/* In-article images: full measure, rounded to the brand radius, with the
   caption styled as the quiet line it should be. */
.prose :is(img, figure) { margin-block: var(--sp-6); }
.prose img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.prose figure img { margin-block: 0; }
.prose figcaption {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.prose hr {
  margin-block: var(--sp-8);
  border: 0;
  border-block-start: 1px solid var(--line);
}

.prose :is(em, i) { font-style: italic; }

/* The compliance footnote every article ends on. */
.prose > p > em:only-child {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.5;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: var(--measure);
}
@media (min-width: 768px) { .lead { font-size: var(--fs-lead-d); } }

.small { font-size: var(--fs-small); }

.micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kicker {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-head);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-block-end: var(--sp-4);
}

.muted { color: var(--ink-soft); }
.mark  { color: var(--accent-deep); }

a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .22em;
  transition: color var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }

/* --- Focus ---------------------------------------------------------------
   Visible on every interactive element, on every page. Never removed. */

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.band :focus-visible { outline-color: var(--accent); }

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-start: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  transition: inset-block-start var(--dur) var(--ease);
}
.skip-link:focus { inset-block-start: var(--sp-4); color: var(--bg); }

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

/* --- Layout primitives --------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--tight { max-width: var(--container-tight); }

/* Sections own the vertical rhythm. Nothing else sets section padding.
   §5 rule 6 — uneven rhythm applies BETWEEN sections, never inside
   components. That is what --section-open and --section-dense are for. */
.section { padding-block: var(--sp-8); }
.section--open  { padding-block: var(--sp-9); }
.section--dense { padding-block: var(--sp-7); }

/* Mobile: without this, the browser waits to see whether a tap is the first
   half of a double-tap zoom — which reads as "the first tap did nothing"
   (owner report, 12 Aug). Applies to every interactive element. */
a, button, input, select, textarea, label, summary,
[role="button"], .btn, .buytile, .cko-radio, .seg__btn, .freq__row {
  touch-action: manipulation;
}

/* Phones: the stacked home page read as one dense wall (owner, 12 Aug) —
   the rhythm tightens so each section ends sooner and the page breathes
   through separation, not sheer length. */
@media (max-width: 699px) {
  .section { padding-block: var(--sp-7); }
  .section--open { padding-block: var(--sp-8); }
  .section--dense { padding-block: var(--sp-6); }
}
.section--flush-top { padding-block-start: 0; }

@media (min-width: 768px) {
  .section        { padding-block: var(--sp-9); }
  .section--open  { padding-block: var(--sp-10); }
  .section--dense { padding-block: var(--sp-8); }
}

.band {
  background: var(--band);
  color: var(--on-band);
}
.band h1, .band h2, .band h3, .band h4 { color: var(--on-band); }
.band p, .band .lead, .band .muted { color: var(--on-band-soft); }
.band .kicker { color: var(--accent); }
.band .rule { background: var(--band-line); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.stack   { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack-3 { display: flex; flex-direction: column; gap: var(--sp-3); }
.row     { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }

/* Section header: kicker + h2 + optional lead. Used identically everywhere. */
.sec-head { max-width: var(--measure); margin-block-end: var(--sp-7); }
.sec-head .lead { margin-block-start: var(--sp-4); }
/* Inside a split head or a grid cell the section head owns no bottom margin —
   the parent's gap does. Replaces the inline style="margin-block-end:0" the
   static build used, which was a raw value outside tokens.css. */
.sec-head--flush { margin-block-end: 0; }

/* --- Spacing utilities ---------------------------------------------------
   The ONLY utilities in the system, and the complete set. Each one resolves
   to a token, so they cannot introduce an off-scale value the way an inline
   style can. They exist so no template ever expresses SPACING as an inline
   style, which is where off-scale values get in. Do not add a size that is
   not on the --sp scale, and do not add a padding/colour/font equivalent:
   those belong to components, not to utilities. */

.mbs-4 { margin-block-start: var(--sp-4); }
.mbs-5 { margin-block-start: var(--sp-5); }
.mbs-6 { margin-block-start: var(--sp-6); }
.mbs-8 { margin-block-start: var(--sp-8); }
.mbe-5 { margin-block-end: var(--sp-5); }
.mbe-6 { margin-block-end: var(--sp-6); }
.mbe-8 { margin-block-end: var(--sp-8); }

/* Split head: title left, action right — collapses on mobile. */
.sec-head-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-block-end: var(--sp-7);
}
.sec-head-split .sec-head { margin-block-end: 0; }

/* --- Grids --------------------------------------------------------------- */

/* Every track is minmax(0, 1fr), never a bare 1fr and never an implicit auto.
   A grid track sized to `auto` — or to `1fr`, whose minimum is auto — expands
   to its content's min-content width, so one wide table inside a
   single-column grid drags the whole page sideways. That bug appeared three
   times in this build before it was fixed at the source. */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* --- Motion -------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}