/* ============================================================
   ICTW Official Brand System — 2026-05-30
   Replaces the old warm-gold-parchment palette with the
   official 7-color brand from /Users/joelclark/Downloads/ICTW Brandguide.pdf
   --------------------------------------------------------------
   PRIMARY:   Teal #3d7b86   Deep Blue #254c5f   Red #c9493f
              Gold #f7c86a   Charcoal #353434
   SECONDARY: Mustard #ba9128   Off-white #e0deda
   FONTS:     Cinzel (display, BELDA substitute)
              PT Serif (body, PT Serif Pro match)
              Inter (UI labels, Benton Gothic substitute)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Brand palette (canonical) ─────────────────────────── */
  --brand-teal:        #3d7b86;
  --brand-deep-blue:   #254c5f;
  --brand-red:         #c9493f;
  --brand-gold:        #f7c86a;
  --brand-charcoal:    #353434;
  --brand-mustard:     #ba9128;
  --brand-offwhite:    #e0deda;
  --brand-offwhite-2:  #ecebe7;  /* lifted, derived */
  --brand-offwhite-3:  #f3f2ee;  /* lightest        */

  /* Derived shades for depth */
  --brand-teal-deep:   #2c5f68;
  --brand-blue-deep:   #173a4a;
  --brand-red-deep:    #a83a32;
  --brand-gold-deep:   #d6a747;
  --brand-charcoal-2:  #1f1f1f;
  --brand-mustard-deep:#946f1a;

  /* ── Page surfaces — off-white parchment ───────────────── */
  --page:        var(--brand-offwhite);
  --page-warm:   var(--brand-offwhite-2);
  --page-deep:   var(--brand-offwhite-3);

  /* ── Body copy — charcoal anchor ───────────────────────── */
  --ink:         var(--brand-charcoal);
  --ink-soft:    rgba(53,52,52,0.82);
  --ink-mute:    rgba(53,52,52,0.62);
  --ink-dim:     rgba(53,52,52,0.42);

  /* ── Headlines + brand accents ─────────────────────────── */
  --headline:    var(--brand-deep-blue);
  --bronze:      var(--brand-mustard);
  --bronze-hi:   var(--brand-gold);
  --bronze-deep: var(--brand-mustard-deep);
  --rule:        rgba(186,145,40,0.34);
  --rule-soft:   rgba(186,145,40,0.14);
  --shadow-warm: 0 14px 32px rgba(37,76,95,0.10);
  --shadow-lift: 0 24px 48px rgba(37,76,95,0.18);

  /* ── Dark surfaces — deep blue + charcoal ──────────────── */
  --night:       var(--brand-charcoal-2);
  --night-2:     #0d0d0d;
  --navy:        var(--brand-deep-blue);
  --navy-deep:   var(--brand-blue-deep);
  --ivory:       var(--brand-offwhite);
  --ivory-mute:  rgba(224,222,218,0.82);
  --ivory-dim:   rgba(224,222,218,0.55);

  /* ── 8-family base tokens (remapped for new palette) ───── */
  /* Map the legacy family tokens to closest new-palette equivalents
     so existing components auto-pick up the new look. */
  --gold-1:      var(--brand-mustard);     /* was #C29E46 */
  --gold-2:      var(--brand-gold);
  --gold-3:      var(--brand-offwhite);
  --gold-4:      var(--brand-offwhite-3);
  --brown-1:     var(--brand-charcoal);    /* honesty -> charcoal */
  --brown-2:     #5a5755;
  --brown-3:     #8d8a87;
  --brown-4:     var(--brand-offwhite-2);
  --crimson-1:   var(--brand-red);
  --crimson-2:   var(--brand-red-deep);
  --crimson-3:   #e9b1ac;
  --crimson-4:   #f3d4d0;
  --orange-1:    var(--brand-gold-deep);   /* legacy orange -> warm gold */
  --orange-2:    var(--brand-gold);
  --orange-3:    #ffe2b3;
  --orange-4:    #fff1d9;
  --blue-1:      var(--brand-teal);        /* wonder -> teal */
  --blue-2:      #7daab2;
  --blue-3:      #b9d2d8;
  --blue-4:      #d9e6e9;
  --navy-1:      var(--brand-deep-blue);
  --navy-2:      #6c8a99;
  --navy-3:      #b2c3cc;
  --navy-4:      #d3dde2;
  --black-1:     var(--brand-charcoal);
  --black-2:     #6e6c6c;
  --black-3:     #aeacac;
  --black-4:     #d6d5d4;
  --sand-1:      var(--brand-offwhite);
  --sand-2:      var(--brand-offwhite-2);
  --sand-3:      var(--brand-offwhite-3);
  --sand-4:      #faf9f6;

  /* ── Sand-flow ramp — re-tinted to brand palette ───────── */
  --flow-1:      var(--brand-offwhite-3);
  --flow-2:      var(--brand-offwhite);
  --flow-3:      #d4d2cc;
  --flow-4:      #c4bfb5;
  --flow-5:      #b3a690;
  --flow-6:      var(--brand-mustard);
  --flow-7:      var(--brand-mustard-deep);
  --flow-8:      #745816;
  --flow-9:      var(--brand-blue-deep);
  --flow-10:     var(--brand-charcoal-2);

  /* ── PER-BOOK ACCENTS (locked to brand palette) ───────── */
  --book-adam-accent:        var(--brand-charcoal);   /* earth, anchored */
  --book-adam-glow:          #5a5755;
  --book-miriam-accent:      var(--brand-teal);       /* sea, wonder     */
  --book-miriam-glow:        #7daab2;
  --book-rahab-accent:       var(--brand-red);        /* scarlet cord    */
  --book-rahab-glow:         #e0786e;
  --book-david-accent:       var(--brand-mustard);    /* king's legacy   */
  --book-david-glow:         var(--brand-gold);
  --book-benaiah-accent:     var(--brand-deep-blue);  /* snowy pit cold  */
  --book-benaiah-glow:       #6c8a99;
  --book-zachariah-accent:   var(--brand-mustard-deep); /* priestly old-gold */
  --book-zachariah-glow:     var(--brand-mustard);
  --book-zechariah-accent:   var(--brand-mustard-deep); /* brand spelling alias */
  --book-zechariah-glow:     var(--brand-mustard);
  --book-stranger-accent:    var(--brand-charcoal);
  --book-stranger-glow:      #6e6c6c;
}

/* ── Theme color tag (mobile browser chrome) ───────────── */
meta[name="theme-color"] { content: "#254c5f"; }

/* ============================================================
   TYPOGRAPHY — Cinzel (display, BELDA substitute) +
                PT Serif (body, PT Serif Pro match) +
                Inter (UI labels, Benton Gothic substitute)
   ============================================================ */

/* Body — PT Serif (matches brand PT Serif Pro spec) */
body, p, li, blockquote, figcaption, .body, .lede {
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif !important;
  color: var(--ink);
}

/* Headlines — Cinzel (closest free match to BELDA's high-contrast Roman caps) */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .book-title, .display, .display-1, .display-2,
.nav-brand, .logo, .wordmark,
.eyebrow {
  font-family: 'Cinzel', 'PT Serif', Georgia, serif !important;
  letter-spacing: 0.02em;
}

/* UI labels / buttons / nav — Inter (Benton Gothic substitute) */
.nav-links a, .nav-cta, button, .btn, .label, .ui-label,
.tag, .badge, .form-label, label, input, textarea, select,
.eyebrow.small, .caption {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: 0.04em;
}

/* Eyebrow rules — keep small caps but use Inter for clarity */
.eyebrow, .section-eyebrow {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--brand-mustard);
}

/* ============================================================
   ACCENT REFRESHES — surface-level polish
   ============================================================ */

/* Body bg + base ink */
body {
  background: var(--page);
  color: var(--ink);
}

/* Selection — brand red */
::selection { background: var(--brand-red); color: var(--brand-offwhite); }
::-moz-selection { background: var(--brand-red); color: var(--brand-offwhite); }

/* Links — deep blue with mustard hover */
a {
  color: var(--brand-deep-blue);
  text-decoration-color: rgba(186,145,40,0.4);
  text-underline-offset: 3px;
  transition: color .2s var(--ease-sacred, ease), text-decoration-color .2s ease;
}
a:hover { color: var(--brand-mustard); text-decoration-color: var(--brand-mustard); }

/* CTA buttons / nav-cta — solid brand-red with off-white text */
.nav-cta, .cta, .btn-primary, .button.primary {
  background: var(--brand-red) !important;
  color: var(--brand-offwhite) !important;
  border-color: var(--brand-red) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.nav-cta:hover, .cta:hover, .btn-primary:hover, .button.primary:hover {
  background: var(--brand-red-deep) !important;
  color: var(--brand-offwhite) !important;
  transform: translateY(-1px);
}

/* Secondary buttons — deep blue ghost */
.btn-secondary, .button.secondary, .button.ghost {
  background: transparent !important;
  color: var(--brand-deep-blue) !important;
  border: 2px solid var(--brand-deep-blue) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn-secondary:hover, .button.secondary:hover, .button.ghost:hover {
  background: var(--brand-deep-blue) !important;
  color: var(--brand-offwhite) !important;
}

/* Nav — restore the original cinematic dark-gradient over hero so links
   are readable on dark video; site.css already handles the .scrolled
   state (solid dark backdrop after scrolling past the hero).
   Boost text WEIGHT + BRIGHTNESS + add a subtle shadow for full contrast. */
.site-nav { background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 100%) !important; border-bottom: 0 !important; }
.nav-links a {
  color: var(--brand-offwhite) !important;       /* full off-white, not 75% */
  font-weight: 700 !important;                   /* bolder */
  text-shadow: 0 2px 6px rgba(0,0,0,0.60);       /* subtle drop for contrast on any bg */
}
.nav-links a:hover { color: var(--brand-gold) !important; }
.nav-brand .nav-wordmark, .nav-brand img { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)); }
/* When scrolled (site.css adds .scrolled with solid dark bg), drop the shadow */
nav.site-nav.scrolled .nav-links a { text-shadow: none; color: var(--brand-offwhite) !important; }
nav.site-nav.scrolled .nav-brand img { filter: none; }

/* Section dividers — mustard rule */
hr, .divider, .section-rule { border-color: var(--brand-mustard); }

/* Hero overlay text — keep contrast against video */
.hero h1, .hero .hero-title { color: var(--brand-offwhite); }

/* Book cards — subtle off-white card on warm page */
.book-card, .card {
  background: var(--brand-offwhite-3);
  border: 1px solid rgba(53,52,52,0.06);
  box-shadow: var(--shadow-warm);
}

/* Footer — deep blue with off-white text
   IMPORTANT: cover ALL text descendants — headings, paragraphs, taglines,
   labels — or charcoal body ink will inherit and become invisible on dark blue. */
.site-footer, footer {
  background: var(--brand-deep-blue) !important;
  color: var(--brand-offwhite) !important;
}
.site-footer *, footer * {
  color: var(--brand-offwhite) !important;
  border-color: rgba(224,222,218,0.18) !important;
}
.site-footer a, footer a { color: var(--brand-gold) !important; }
.site-footer a:hover, footer a:hover { color: var(--brand-offwhite) !important; text-decoration-color: var(--brand-gold) !important; }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
footer h1, footer h2, footer h3, footer h4 {
  color: var(--brand-offwhite) !important;
}
/* Eyebrow labels in footer should be gold for accent */
.site-footer .eyebrow, .site-footer .footer-eyebrow, .site-footer .col-title,
footer .eyebrow, footer .footer-eyebrow, footer .col-title {
  color: var(--brand-gold) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
}
/* Footer body / tagline / paragraphs — softened ivory */
.site-footer p, .site-footer .footer-tagline, .site-footer .footer-body,
footer p, footer .footer-tagline, footer .footer-body {
  color: rgba(224,222,218,0.88) !important;
}

/* Quotes / pullquotes — italic PT Serif with red drop bar */
blockquote, .pullquote {
  font-family: 'PT Serif', Georgia, serif !important;
  font-style: italic;
  border-left: 4px solid var(--brand-red);
  padding-left: 1.25em;
  color: var(--brand-charcoal);
}

/* Tagline */
.tagline { font-style: italic; color: var(--brand-mustard); }

/* ============================================================
   ONE-LINE FIXES — keep meaningful phrases together
   ============================================================ */

/* "Cinematic art on every page." — keep "every page" on one line */
h2 em { white-space: nowrap; }
/* (page-5 vintage parchment treatment removed 2026-05-30 per Joel) */

/* "Six worlds. One Stranger. Step inside." — each sentence on its own line */
h1.stacked-hero { line-height: 1.05; }
h1.stacked-hero > span { display: block; }

/* ============================================================
   ON-DARK SAFETY NET — never let body charcoal bleed into dark sections
   ============================================================ */
.on-dark, .on-dark p, .on-dark li, .on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6, .on-dark .lede, .on-dark blockquote,
.stranger-band, .stranger-band p, .stranger-band h1, .stranger-band h2, .stranger-band h3 {
  color: var(--brand-offwhite);
}
.on-dark a, .stranger-band a {
  color: var(--brand-gold);
}
.on-dark a:hover, .stranger-band a:hover {
  color: var(--brand-offwhite);
}
.on-dark .eyebrow, .on-dark .section-eyebrow {
  color: var(--brand-gold) !important;
}