/* =====================================================================
   NOON — TYPE TOKENS
   Single source of truth for the typography system.
   Import on every canonical page; override only where intentional.

   Three families:
     --font-display   Fraunces      (display + body serif; optical-sized)
     --font-mono      JetBrains Mono (labels, data, machine register)
     --font-sans      Inter         (UI buttons, form fields, dense data)

   Three brand registers:
     1) Ceremonial dark  — homepage, /press/, /api/, /partners/, /sourcing/
     2) Almanac light    — /source/ articles (already a separate room)
     3) Editorial mid    — /source/ library landing (this file's purpose
                           to unify with register 1)

   ===================================================================== */

:root {
  /* ---------- Families ---------- */
  --font-display: 'Fraunces', 'Shippori Mincho', Georgia, 'Times New Roman', serif;
  --font-body:    'Fraunces', 'Shippori Mincho', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Display sizes — clamped fluid scale ----------
     Display = the big editorial moments; one per page max.
     H1     = section header that earns its own row.
     H2     = subsection header.
     H3     = card header.
     Lead   = serif body, oversized for hero subheads.
     Body   = serif body, standard reading.
     Small  = serif body, dense or sub-text.
     Caption= mono label or kicker.
     Micro  = mono fine print, fact sheets, status pips.
  */
  --type-display: clamp(48px, 6.4vw, 88px);
  --type-h1:      clamp(40px, 5.0vw, 68px);
  --type-h2:      clamp(28px, 3.0vw, 40px);
  --type-h3:      clamp(20px, 1.8vw, 26px);
  --type-lead:    clamp(17px, 1.4vw, 21px);
  --type-body:    clamp(15px, 1.05vw, 17px);
  --type-small:   13.5px;
  --type-caption: 11px;
  --type-micro:   9.5px;

  /* ---------- Line heights ---------- */
  --lh-display: 1.02;
  --lh-h1:      1.05;
  --lh-h2:      1.12;
  --lh-h3:      1.22;
  --lh-lead:    1.55;
  --lh-body:    1.65;
  --lh-small:   1.55;
  --lh-caption: 1.20;

  /* ---------- Letter spacing ---------- */
  --tracking-display: -0.024em;
  --tracking-h1:      -0.022em;
  --tracking-h2:      -0.014em;
  --tracking-h3:      -0.008em;
  --tracking-body:     0.001em;
  --tracking-caption:  0.22em;
  --tracking-micro:    0.26em;

  /* ---------- Weights ----------
     Fraunces ships at 9..144 opsz; we map size ranges to weight to
     keep optical color even from 88px display down to 13px body. */
  --weight-display: 500;
  --weight-h1:      500;
  --weight-h2:      500;
  --weight-h3:      500;
  --weight-lead:    400;
  --weight-body:    400;
  --weight-italic-emphasis: 500;

  /* ---------- Rhythm tokens ---------- */
  --rhythm-tight:  10px;
  --rhythm-snug:   18px;
  --rhythm-row:    28px;
  --rhythm-stanza: 48px;
  --rhythm-room:   96px;

  /* ---------- The Kicker — Noon's signature running header.
       §  ROMAN   ────────   MONO LABEL   ───   MONO LOCATION
     This is the publication-grade composition used on the TOC,
     project cards, press kit, source, api, partners, sourcing.
     Tokens here, application via .kick / .kick__roman / .kick__rule
     / .kick__label / .kick__loc.                                ---- */
  --kicker-roman-size:  15px;
  --kicker-label-size:  11px;
  --kicker-loc-size:    11px;
  --kicker-rule-major:  42px;
  --kicker-rule-minor:  18px;

  /* ---------- Numerals ----------
     tabular for data tiles, oldstyle for prose runs */
  --numerals-data:  tabular-nums lining-nums;
  --numerals-prose: oldstyle-nums proportional-nums;
}

/* =====================================================================
   THE KICKER — single utility class set
   ===================================================================== */
.kick {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--rhythm-row);
}
.kick__roman {
  font-family: var(--font-display);
  font-style: italic; font-weight: var(--weight-italic-emphasis);
  font-size: var(--kicker-roman-size);
  letter-spacing: 0.02em;
  color: var(--brass, #B89968);
  font-variant-numeric: var(--numerals-prose);
}
.kick__rule {
  display: inline-block;
  width: var(--kicker-rule-major);
  height: 1px;
  background: var(--brass, #B89968);
  opacity: 0.55;
}
.kick__rule--minor {
  width: var(--kicker-rule-minor);
  opacity: 0.35;
}
.kick__label {
  font-family: var(--font-mono);
  font-size: var(--kicker-label-size);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--paper-3, #A8A08B);
}
.kick__loc {
  font-family: var(--font-mono);
  font-size: var(--kicker-loc-size);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--paper-2, #DCD4BD);
}

/* =====================================================================
   THE BYLINE — single utility class set
   Italic Fraunces meta row with hairline brass rules above + below.
   Used on project cards, article cards, partner entries, quotes.
   ===================================================================== */
.byline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 10px; row-gap: 4px;
  margin: 0 0 var(--rhythm-stanza);
  padding: 12px 0 13px;
  border-top: 1px solid rgba(184,153,104,0.20);
  border-bottom: 1px solid rgba(184,153,104,0.20);
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--paper-3, #A8A08B);
  font-variant-numeric: var(--numerals-prose) var(--numerals-data);
}
.byline__item {
  display: inline-flex; align-items: center; gap: 6px;
}
.byline__item + .byline__item::before {
  content: '·';
  color: var(--paper-4, #6B6657);
  opacity: 0.55;
  margin: 0 6px 0 0;
}
.byline__item em {
  font-style: italic;
  color: var(--paper, #F2EBD9);
  font-weight: var(--weight-italic-emphasis);
}
.byline__item--status {
  color: var(--moss, #6F8559);
  font-style: italic;
}
.byline__item--status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--moss, #6F8559);
  box-shadow: 0 0 8px var(--moss, #6F8559);
  animation: status-pulse 1.6s ease-in-out infinite;
  margin: 0 8px 0 0; opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .byline__item--status::before { animation: none; }
}
@keyframes status-pulse {
  0%, 100% { opacity: 1.0; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.92); }
}