/* ═══════════════════════════════════════════════════════════════════════════
   03 - TYPOGRAPHY
   Roles, not tags. A heading is a heading because of what it does on the page,
   so every display class is usable on whichever element the outline needs.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base {

  /* ── Display and headings ───────────────────────────────────────────── */

  h1, h2, h3, h4,
  .display, .h1, .h2, .h3, .h4 {
    font-family: var(--ff-display);
    font-weight: 600;   /* A sans needs real weight to read as a heading. */
    color: var(--ivory-100);
    max-width: var(--measure-head);
    text-wrap: balance;
    font-synthesis-weight: none;
  }

  .display {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
  }

  h1, .h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-display);
  }

  h2, .h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  h3, .h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  h4, .h4 {
    font-size: var(--fs-h4);
    line-height: 1.3;
  }

  /* ── Body ───────────────────────────────────────────────────────────── */

  p { max-width: var(--measure-body); }

  .lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--ivory-200);
    max-width: var(--measure-lead);
    text-wrap: pretty;
  }

  .meta {
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    color: var(--ivory-500);
    font-variant-numeric: tabular-nums;
  }

  .micro {
    font-size: var(--fs-micro);
    line-height: 1.5;
    color: var(--ivory-500);
  }

  /* Numerals line up in tables, dates, counters and track times (§4.2). */
  .num,
  time,
  .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv11', 'ss01';
  }

  /* ── Eyebrow (§4.2) ─────────────────────────────────────────────────── */

  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
    font-family: var(--ff-ui);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gold-500);
    max-width: none;
  }

  /* ── Devanagari (§2 - accent, never translation) ────────────────────── */

  .deva,
  [lang='hi'] {
    font-family: var(--ff-deva);
    font-weight: 400;
    /* Devanagari sits optically small against Latin at the same size. */
    font-size: 1.06em;
    line-height: 1.7;
  }

  .deva--accent {
    color: var(--gold-500);
    letter-spacing: .06em;
  }

  /* ── Editorial voice - quotes and pull-quotes ───────────────────────── */

  blockquote,
  .quote {
    font-family: var(--ff-editorial);
    font-weight: 400;   /* Google Sans publishes nothing lighter than 400. */
    font-style: italic;
    font-size: var(--fs-h3);
    line-height: 1.42;
    color: var(--ivory-200);
    max-width: var(--measure-quote);
    text-wrap: pretty;
  }

  .quote--wide { max-width: 46ch; }

  cite {
    display: block;
    margin-top: var(--sp-4);
    font-family: var(--ff-ui);
    font-style: normal;
    font-size: var(--fs-meta);
    letter-spacing: .04em;
    color: var(--ivory-500);
  }

  /* ── Prose - the rich-text container for editor HTML ────────────────── */

  .prose {
    max-width: var(--measure-body);
    color: var(--ivory-300);
  }

  .prose > * + * { margin-top: var(--sp-5); }

  .prose h2 {
    margin-top: var(--sp-8);
    font-size: var(--fs-h3);
  }

  .prose h3 {
    margin-top: var(--sp-7);
    font-size: var(--fs-h4);
  }

  .prose h2 + *,
  .prose h3 + * { margin-top: var(--sp-4); }

  .prose ul,
  .prose ol {
    padding-left: var(--sp-5);
    display: grid;
    gap: var(--sp-3);
  }

  .prose ul { list-style: none; padding-left: var(--sp-6); }

  /* The mizrab bullet (§4.4). */
  .prose ul > li { position: relative; }

  .prose ul > li::before {
    content: '';
    position: absolute;
    left: calc(var(--sp-6) * -1);
    top: .62em;
    width: var(--dot);
    height: var(--dot);
    background: var(--gold-500);
    transform: rotate(45deg);
  }

  .prose ol { list-style: decimal; }

  .prose ol > li::marker {
    color: var(--gold-500);
    font-variant-numeric: tabular-nums;
  }

  .prose blockquote {
    margin-block: var(--sp-7);
    padding-left: var(--sp-5);
    border-left: 1px solid var(--hairline-hot);
  }

  .prose strong { color: var(--ivory-100); font-weight: 500; }

  .prose small { font-size: var(--fs-meta); color: var(--ivory-500); }

  .prose hr {
    height: 1px;
    border: 0;
    margin-block: var(--sp-8);
    background: var(--hairline);
    max-width: var(--rule-w);
  }

  /* Drop cap for the biography opening (§9.1). */
  .prose--dropcap > p:first-of-type::first-letter {
    float: left;
    margin: .06em .12em 0 0;
    font-family: var(--ff-display);
    font-size: 3.4em;
    line-height: .82;
    color: var(--gold-500);
  }

  /* ── Ornaments (§4.4) ───────────────────────────────────────────────── */

  .rule-gold {
    display: inline-block;
    flex: none;
    width: 28px;
    height: 1px;
    background: var(--grad-gold);
  }

  .rule-gold--long { width: var(--rule-w); }

  .mizrab-dot {
    display: inline-block;
    width: var(--dot);
    height: var(--dot);
    background: var(--gold-500);
    transform: rotate(45deg);
    flex: none;
  }

  /* Oversized outline word used as texture (§4.4). */
  .ghost-word {
    position: absolute;
    z-index: 0;
    font-family: var(--ff-display);
    font-size: clamp(9rem, 22vw, 20rem);
    line-height: .78;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(246, 241, 231, .045);
    text-stroke: 1px rgba(246, 241, 231, .045);
    pointer-events: none;
    user-select: none;
  }

  .ghost-word--gold {
    -webkit-text-stroke-color: rgba(200, 88, 51, .10);
    text-stroke: 1px rgba(200, 88, 51, .10);
  }

  .ghost-word--deva {
    font-family: var(--ff-deva);
    font-size: clamp(7rem, 16vw, 15rem);
    line-height: 1;
  }

  /* ── Section heading lockup (§4.2) ──────────────────────────────────── */

  .section-head {
    position: relative;
    z-index: 1;
    margin-bottom: var(--sp-7);
    /* NOT a ch measure: `ch` here resolves against the wrapper's own font
       size, not the heading inside it, and would cap the heading at roughly a
       third of the width it needs. The heading element carries its own
       --measure-head; this is only a sane outer bound. */
    max-width: 42rem;
  }

  .section-head__title {
    margin: 0;
    text-wrap: balance;
  }

  .section-head__deva {
    margin: var(--sp-3) 0 0;
    font-family: var(--ff-deva);
    font-size: 15px;
    line-height: 1.4;
    color: var(--ivory-500);
    opacity: .7;
    max-width: none;
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;
  }

  .section-head--center .eyebrow { justify-content: center; }
  .section-head--center .section-head__title { margin-inline: auto; }

  .section-head--right { text-align: right; margin-left: auto; }
  .section-head--right .eyebrow { justify-content: flex-end; }

  /* ── The mask reveal wrapper (§8 H1) ────────────────────────────────── */

  .mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* A hair of extra room so descenders are not clipped by the mask. */
    padding-bottom: .12em;
    margin-bottom: -.12em;
  }

  .mask > span {
    display: inline-block;
    will-change: transform;
  }

  /* ── Text link with a travelling arrow (§8 H3) ──────────────────────── */

  .link-arrow {
    display: inline-flex;
    /* Grid blockifies its children, so without this a link inside a .stack
       would stretch across the row and give the hover state a target far
       wider than the words. */
    justify-self: start;
    align-self: start;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-500);
    min-height: var(--touch);
    transition: color var(--dur) var(--ease-out);
  }

  .link-arrow .icon {
    transition: transform var(--dur) var(--ease-out);
  }

  .link-arrow:hover { color: var(--gold-300); }
  .link-arrow:hover .icon { transform: translateX(6px); }

  .link-arrow:active .icon { transform: translateX(3px); }

  /* ── Underline-from-centre, used by the inline nav (§7.2) ───────────── */

  .u-grow {
    position: relative;
  }

  .u-grow::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35em;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease-out);
  }

  .u-grow:hover::after,
  .u-grow:focus-visible::after,
  .u-grow[aria-current]::after { transform: scaleX(1); }
}