/* ============================================================
   TERM PAGE — shared styles for the one-term-at-a-time pages
   (viveka.html, vasana.html, and the rest of the fifty).
   Extracted from viveka.html 2026-09-14 BEFORE the page count grew:
   this CSS was duplicated per page, which at fifty pages means fifty
   copies of every fix. Load AFTER styles-v2.css.
   Everything here is what the v2 catalog does not already carry.
   ============================================================ */
/* ------------------------------------------------------------------
     VIVEKA — page-local styles.
     Only what the v2 catalog does not carry: the term lockup, the head
     offer, the film band, the sindoor quote, and the series chain.
     Everything else is system classes.
     ------------------------------------------------------------------ */

  /* -- the head: term on the left, the offer on the right -- */
  @media (min-width: 56rem) {
    .head-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: clamp(2.5rem, 1rem + 5vw, 6rem);
      align-items: start;
    }
  }

  .term-script {
    font-family: 'Martel', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
    line-height: 1.15;
    color: var(--field-bright);
    margin: 0 0 .1em;
    letter-spacing: 0;
  }
  .term-roman {
    font-style: italic;
    color: var(--marigold);
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
    letter-spacing: .01em;
  }
  .term-rule {
    width: 4.5rem; height: 1px; border: 0; margin: 1.3rem 0 1.4rem;
    background: var(--brass); opacity: .7;
  }
  .term-gloss {
    font-size: var(--text-deck);
    color: var(--field-ink);
    max-width: 32ch;
    text-wrap: pretty;
    margin: 0 0 .55rem;
  }
  .term-gloss-soft {
    font-weight: 300; font-style: italic;
    color: var(--field-soft);
    max-width: 38ch;
    text-wrap: pretty;
    margin: 0;
  }

  /* -- the offer, in the head's right column -- */
  .head-offer {
    margin-top: 2.4rem;
    border-top: 1px solid rgba(166, 124, 51, .55);
    padding-top: 1.4rem;
  }
  @media (min-width: 56rem) { .head-offer { margin-top: .4rem; border-top: 0; padding-top: 0; } }

  .head-offer h2 {
    font-family: var(--display); font-weight: 400;
    font-size: var(--text-h3); line-height: 1.18;
    color: var(--field-bright);
    margin: 0 0 .6rem;
    text-wrap: balance;
  }
  .head-offer p {
    color: var(--field-soft); font-weight: 300;
    margin: 0 0 1.1rem; max-width: 34ch; text-wrap: pretty;
  }
  .offer-form { display: grid; gap: .6rem; }
  .offer-form label {
    font-size: var(--text-label); letter-spacing: .04em;
    text-transform: uppercase; color: var(--field-soft);
  }
  .offer-form input[type="email"] {
    font: inherit; width: 100%;
    padding: .75rem .85rem;
    border: 1px solid rgba(244, 228, 198, .38);
    border-radius: 2px;
    background: rgba(244, 228, 198, .07);
    color: var(--field-bright);
  }
  /* Placeholder must clear WCAG AA 4.5:1 like body text, not sit at the muted
     default. Measured 4.07:1 at rgba(217,186,142,.85); full-strength field-soft
     clears it. */
  .offer-form input[type="email"]::placeholder { color: var(--field-soft); opacity: 1; }
  .offer-form input[type="email"]:focus-visible {
    outline: 2px solid var(--marigold); outline-offset: 2px;
    background: rgba(244, 228, 198, .12);
  }
  .offer-form button {
    font: inherit; font-weight: 700; cursor: pointer;
    padding: .8rem 1rem;
    border: 0; border-radius: 2px;
    background: var(--marigold); color: var(--field);
    transition: background var(--dur, .18s) var(--ease);
  }
  .offer-form button:hover { background: var(--marigold-bright); }
  .offer-form button:active { transform: translateY(1px); }
  .offer-fineprint {
    font-size: var(--text-label); color: var(--field-soft);
    margin: .8rem 0 0; max-width: 34ch;
  }
  .offer-status { margin: .7rem 0 0; color: var(--field-bright); min-height: 1.2em; }

  /* honeypot: hidden from people, visible to bots. NOT in styles-v2.css —
     it is page-local in wellness.html too, so it has to be repeated here
     or the field renders visible. */
  .hp-field { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* -- the film band -- */
  .film { background: var(--paper-deep); padding: var(--space-lg) 0; }
  .film-head { max-width: 46ch; margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.4rem); }
  .film-head h2 { margin: 0 0 .5rem; }
  .film-head p { color: var(--ink-soft); margin: 0; text-wrap: pretty; }
  .film-frame {
    position: relative;
    border: 1px solid var(--brass);
    padding: .5rem;
    background: var(--paper-raised);
    box-shadow: var(--shadow);
    max-width: 60rem;
  }
  .film-frame video {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9; background: var(--field);
  }
  .film-caption {
    margin: .9rem 0 0;
    font-size: var(--text-label);
    color: var(--saffron-deep);
    letter-spacing: .01em;
  }

  /* -- Swamiji's words, on the sindoor band --
     .band-sindoor ships a margin-top clamp because on the homepage it follows
     a PAPER band and the gap reads as breathing room. Here it follows .film
     (--paper-deep), so that margin renders the body background as a stripe
     between two colored bands. Butt them instead; bands are full-bleed. -- */
  .film + .band-sindoor { margin-top: 0; }

  .said { max-width: 30ch; }
  .said blockquote {
    margin: 0 0 1.4rem;
    font-family: 'Rozha One', Georgia, serif;
    font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3.4rem);
    line-height: 1.2;
    color: var(--on-sindoor);
    text-wrap: balance;
  }
  .said blockquote p { margin: 0 0 .35em; }
  .said blockquote p:last-child { margin-bottom: 0; }
  .said-attrib {
    font-size: var(--text-label);
    color: var(--on-sindoor-gold);
    letter-spacing: .04em;
    margin: 0 0 1.6rem;
  }
  .said-note {
    color: var(--on-sindoor-soft); font-weight: 300; font-size: var(--text-deck);
    max-width: 36ch; margin: 0 0 1.5rem; text-wrap: pretty;
  }
  @media (min-width: 52rem) {
    .said-grid {
      display: grid; grid-template-columns: 1.15fr .85fr;
      gap: clamp(2rem, 1rem + 4vw, 5rem);
      /* centred, not top-aligned: the quote is tall and the note is short, so
         top-alignment left a large dead field under the note. */
      align-items: center;
    }
    .said { max-width: none; }
  }

  /* -- the series: a real ordered chain, not a card grid -- */
  .series { background: var(--paper); padding: var(--space-lg) 0; }
  .series-head { max-width: 40ch; margin: 0 0 clamp(1.6rem, 1rem + 2vw, 2.4rem); }
  .series-head h2 { margin: 0 0 .6rem; font-size: var(--text-h2); }
  .series-head p { color: var(--ink-soft); margin: 0; font-size: var(--text-deck); text-wrap: pretty; }

  .chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .chain li {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0 1.1rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--rule, rgba(166,124,51,.35));
    transition: background var(--dur, .18s) var(--ease);
  }
  .chain li:hover { background: rgba(166, 124, 51, .06); }
  .chain li:last-child { border-bottom: 1px solid var(--rule, rgba(166,124,51,.35)); }
  .chain-n {
    font-family: var(--display); font-size: 1.45rem;
    color: var(--brass); line-height: 1.35;
  }
  .chain-term {
    font-family: 'Martel', Georgia, serif;
    font-size: clamp(1.5rem, 1.2rem + .9vw, 1.95rem);
    color: var(--ink);
    margin: 0 0 .15rem; line-height: 1.25;
  }
  .chain-term i { font-style: italic; color: var(--saffron-deep); font-size: .82em; }
  .chain-gloss { margin: 0; color: var(--body); font-size: var(--text-deck); max-width: 60ch; text-wrap: pretty; }
  .chain li[aria-current="true"] .chain-term { color: var(--sindoor); }
  .chain li[aria-current="true"] .chain-n { color: var(--sindoor); }
  .chain-here {
    font-size: var(--text-label); color: var(--sindoor);
    letter-spacing: .04em; display: block; margin-top: .35rem;
  }
  .series-close {
    margin: clamp(1.6rem, 1rem + 1.6vw, 2.2rem) 0 0;
    max-width: 68ch; color: var(--ink-soft);
    font-size: var(--text-deck); text-wrap: pretty;
  }

  @media (min-width: 52rem) {
    .chain li { grid-template-columns: 3.4rem 17rem 1fr; gap: 0 1.8rem; align-items: baseline; }
    .chain-gloss { max-width: none; }
  }