/* =========================================================================
   NIRVEDHA v2 · Additions on top of colors_and_type.css
   These additions extend the locked design system. They never replace it.
   The v2 site imports colors_and_type.css FIRST, then this file, then
   components.css. Order matters.
   ========================================================================= */

:root {
  /* ----- v2 type scale extensions -----
     The home hero needs a larger display size than --fs-hero (112px).
     Other pages keep --fs-hero. */
  --fs-display-mega: 132px;   /* home hero only */
  --fs-display-xl:   96px;    /* other-page heroes */
  --fs-display-l:    64px;    /* matches --fs-section, kept for parity */
  --fs-display-m:    48px;    /* page section heads */
  --fs-display-s:    36px;    /* card titles, sub-section heads */

  --fs-praise:       28px;    /* praise wall blurbs (italic display) */
  --fs-meta:         14px;    /* bylines, dates, captions */

  /* ----- v2 typographic helpers ----- */
  --lh-praise:       1.35;
  --lh-reader:       1.6;     /* long-form essay body line-height */

  /* ----- v2 layout ----- */
  --shell-max:       1280px;  /* outer page max width */
  --shell-pad-x:     32px;    /* desktop horizontal padding */
  --shell-pad-x-m:   20px;    /* mobile horizontal padding */
  --reader-max:      640px;   /* long-form reader column width — Stripe Press class */

  /* ----- v2 motion (extends parent tokens) ----- */
  --t-progress:      100ms;   /* reading-progress bar update */
}

@media (max-width: 768px) {
  :root {
    --fs-display-mega: 56px;
    --fs-display-xl:   44px;
    --fs-display-m:    32px;
    --fs-display-s:    24px;
    --fs-praise:       22px;
  }
}

/* =========================================================================
   v2 typography classes (the additive set)
   ========================================================================= */

.n-display-mega {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display-mega);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  text-wrap: balance;
}

.n-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-section);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  text-wrap: balance;
}

.n-display-m {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display-m);
  line-height: var(--lh-section);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  text-wrap: balance;
}

.n-display-s {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-s);
  line-height: 1.2;
  color: var(--fg);
}

.n-praise {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-praise);
  line-height: var(--lh-praise);
  color: var(--fg);
  max-width: 32ch;
  /* No quotation marks — typographic shift IS the quotation. */
}

.n-meta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.n-italic {
  font-family: var(--font-display);
  font-style: italic;
}

/* =========================================================================
   Hero rule — the 96×2px Hiranya line beneath every page hero
   ========================================================================= */
.n-rule {
  display: block;
  width: 96px;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: var(--s-7) 0 0;
}

/* =========================================================================
   Page shell — outer max-width + horizontal padding
   ========================================================================= */
.n-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad-x);
}

@media (max-width: 768px) {
  .n-shell { padding: 0 var(--shell-pad-x-m); }
}

/* =========================================================================
   Section bands — full-bleed coloured fields
   ========================================================================= */
.n-band         { width: 100%; }
.n-band-onyx    { background: var(--onyx-black); color: var(--vellum-cream); }
.n-band-smoke   { background: var(--smoke);      color: var(--vellum-cream); }
.n-band-vellum  { background: var(--vellum-cream); color: var(--onyx-black); }
.n-band-vellum .n-praise,
.n-band-vellum .n-display-mega,
.n-band-vellum .n-display-xl,
.n-band-vellum .n-display-m,
.n-band-vellum .n-display-s,
.n-band-vellum .n-section-title,
.n-band-vellum .n-hero      { color: var(--onyx-black); }
.n-band-vellum .n-meta,
.n-band-vellum .n-overline,
.n-band-vellum .n-caption   { color: rgba(14,14,14,0.6); }
.n-band-vellum .n-rule      { background: #8C6F1F; }  /* AA-darkened Hiranya on cream */

/* Vertical rhythm — section breathing space ≈ one screen on desktop */
.n-section {
  padding: var(--s-11) 0;   /* 192px top/bottom desktop */
}
@media (max-width: 768px) {
  .n-section { padding: var(--s-9) 0; }   /* 96px top/bottom mobile */
}