/* Franklin Frontline — Monocle bridge over site.css.
   Load AFTER /styles/site.css on pages still built from site.css components.
   Re-skins the old tokens and type onto the Monocle identity (DESIGN.md) so a
   page can migrate visually before its markup is rebuilt. Retire this file
   with site.css once every page uses monocle.css directly. */

:root {
  /* Surfaces */
  --canvas:         #ffffff;   /* Editorial White */
  --surface-soft:   #f0f0f0;   /* Paper Grey */
  --surface-tint:   #fdfcf3;   /* Newsprint Cream */

  /* Lines */
  --hairline:       #dddddd;   /* Gallery Border */
  --rule-strong:    #000000;   /* Press Black */

  /* Ink */
  --ink:            #000000;
  --ink-muted:      #2c2c2c;   /* Ink Charcoal */
  --ink-soft:       #6e6e6e;   /* Dispatch Grey */
  --ink-inverse:    #ffffff;
  --ink-muted-inverse: rgba(255,255,255,.8);
  --ink-soft-inverse:  rgba(255,255,255,.55);

  /* Accents: monochrome core. mint→paper grey chip, uv→charcoal inverted,
     flame→Alert Red (error/warning voice, e.g. tick-guide alerts) */
  --mint:           #f0f0f0;
  --mint-border:    #000000;
  --uv:             #2c2c2c;
  --uv-rule:        #000000;
  --flame:          #ce4d4a;
  --flame-rule:     #a33c39;

  /* States */
  --link-hover:     #6e6e6e;
  --focus:          #000000;

  /* Monocle accents (DESIGN.md → Accent rule). Lines/dots only, never fills.
     Note: the legacy --mint token above is NOT Mint Leaf; it maps to Paper Grey. */
  --blue-slate:     #56667a;
  --mint-leaf:      #00bd9d;
  --signal-yellow:  #ffc500;   /* highlight badges only; the CTA already uses the literal */

  /* Editorial tiles → the four sanctioned Monocle hues */
  --tile-yellow:    #fdfcf3;   /* cream, NOT yellow — yellow is CTA-only */
  --tile-orange:    #f4a582;   /* Kiosk Salmon promo tint */
  --tile-blue:      #2c2c2c;   /* charcoal inverted panel */
  --tile-red:       #ce4d4a;   /* Alert Red */

  /* Monocle geometry: 4px cards, pill buttons/tags */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --r-pill:    9999px;
}

/* ---------- Type: Helvetica chrome ---------- */
body, h3, h4,
.skip-link, .nav-links a, .eyebrow, .mono, .hero-meta, .btn,
.section-head .head-meta, .stream-item .timestamp, .stream-card .kicker,
.stream-card .read, .feature-stat .l, .pitch .kicker,
.footer-tag, .footer-head, .footer-col a, .footer-col .footer-cta,
.footer-meta, .footer-credit-card, .footer-credit-card strong {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Type: Plantin display ---------- */
h1, h2, .stream-card h3, .feature-stat .v {
  font-family: 'Plantin', 'ItalicAmpersand', 'Book Antiqua', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}
h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.13;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.125;
  letter-spacing: -0.01em;
}
.stream-card h3 { line-height: 1.2; letter-spacing: -0.01em; }

/* Label roles: Helvetica 700, Monocle tracking (max .06em) */
.eyebrow, .mono, .hero-meta, .footer-head, .footer-meta,
.stream-card .kicker, .stream-card .read, .stream-item .timestamp,
.section-head .head-meta, .feature-stat .l, .pitch .kicker,
.skip-link, .nav-links a, .btn, .footer-col .footer-cta,
.footer-credit-card strong {
  letter-spacing: 0.05em;
  font-weight: 700;
}
p, .section-head .deck, .hero .lede, .stream-card .deck {
  font-family: 'Plantin', 'ItalicAmpersand', 'Book Antiqua', Georgia, 'Times New Roman', serif;
}

/* ---------- Chrome ---------- */
.nav { background: rgba(255,255,255,.96); }
.brand {
  display: inline-block;
  font-family: 'Plantin', 'ItalicAmpersand', 'Book Antiqua', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
.brand-period { color: var(--ink); }
.nav-toggle { border-radius: var(--r-pill); }

/* Subscribe CTAs are the ONLY Signal Yellow elements */
.nav-links a.nav-cta,
.footer-col .footer-cta {
  background: #ffc500;
  color: #000000;
}
.nav-links a.nav-cta:hover,
.footer-col .footer-cta:hover {
  background: #ebb600;
  color: #000000;
}
@media (max-width: 980px) {
  .nav-links a.nav-cta,
  .nav-links a.nav-cta:hover {
    background: #ffc500;
    color: #000000;
  }
}

/* Buttons stay monochrome; no lift animation, no shadows */
.btn:hover { transform: none; }
.btn-primary { background: #000000; color: #ffffff; border-color: #000000; }
.btn-primary:hover { background: #2c2c2c; border-color: #2c2c2c; }
.btn-mint { background: #ffffff; color: #000000; border-color: #000000; }
.btn-mint:hover { background: #000000; color: #ffffff; }
.btn-ink { background: #000000; color: #ffffff; border-color: #000000; }
.btn-ink:hover { background: #2c2c2c; color: #ffffff; border-color: #2c2c2c; }

/* Eyebrow chips: monochrome pills */
.eyebrow.mint { background: var(--surface-soft); color: var(--ink); }
.eyebrow.uv   { background: var(--ink); color: var(--canvas); }

/* Status pills */
.status--live { background: #ffffff; color: #000000; border: 1px solid #000000; }

/* Section rules: Monocle's 1px gallery-border rhythm, not heavy black */
section { border-bottom-color: var(--hairline); }
.nav { border-bottom-color: var(--rule-strong); }

/* Dark pitch strip → Ink Charcoal panel; subscribe button inside goes yellow */
.pitch { background: #2c2c2c; border-radius: var(--radius); }
.pitch .kicker { color: var(--ink-soft-inverse); }
.pitch a.btn { background: #ffc500; color: #000000; border-color: #ffc500; }
.pitch a.btn:hover { background: #ebb600; color: #000000; border-color: #ebb600; }

/* Stream cards: white cards ruled in gallery border; hover stays quiet */
.stream-card { border-color: var(--hairline); }
.stream-card:hover { background: var(--surface-soft); color: var(--ink); }
.stream-card:hover h3,
.stream-card:hover .kicker,
.stream-card:hover .deck,
.stream-card:hover .read { color: var(--ink); }
.stream-card:hover .kicker,
.stream-card:hover .deck { color: var(--ink-muted); }
.stream::before { border-left-color: var(--hairline); }
.stream-item::before { border-color: #000000; }

/* Footer credit card: quiet monochrome */
.footer-credit-card { background: var(--canvas); }
.footer-credit-card:hover { background: var(--surface-soft); color: var(--ink); border-color: var(--hairline); }
.footer-credit-card:hover .footer-credit-sub { color: var(--ink-muted); }

/* Footer brand: hide the retired logo mark; the wordmark carries the brand */
footer .brand-logo { display: none; }