/* =========================================================
   friend-paint.css
   Apply friend's exact palette to ORIGINAL pages' cover/hero
   sections without touching layout, copy, or other styling.
   Hexes pulled verbatim from her :root variables.
   ========================================================= */

/* =========================================================
   LAYERING SAFETY — prevent the friend-design's absolute
   hero image / absolute header from painting over real content.
   Reaffirm header chrome above hero; hero image strictly
   behind content; header always clears page-hero content.
   ========================================================= */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 100 !important;
  background: rgba(27, 20, 41, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header-inner { position: relative !important; z-index: 101 !important; }
.brand, .brand-logo { position: relative !important; z-index: 101 !important; }
.primary-nav { position: relative !important; z-index: 100 !important; }

/* Hero image (giant logo/photo bg inside .hero) must stay behind content */
.hero > img {
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero::before, .hero::after { z-index: 0 !important; pointer-events: none !important; }

/* Hero content always above the hero image */
.hero-content, .hero-overlay { z-index: 2 !important; position: relative !important; }

/* When a page uses .hero as the main viewport (friend design SPA fallback),
   ensure anchor links and main content have breathing room */
.page-hero {
  padding-top: clamp(140px, 18vh, 200px) !important;
  padding-bottom: clamp(60px, 8vh, 96px) !important;
  position: relative !important;
  z-index: 1 !important;
}
.page-hero-inner, .page-hero > .container { position: relative !important; z-index: 2 !important; }

/* (Contact-page stacking context removed 2026-09-27 -> Contact tab retired) */

/* -------- Blog page-hero (the "Written 4 His Glory" header) -------- */
.page-hero.section-tinted {
  background: linear-gradient(135deg, #1b1429 0%, #442857 100%) !important;
  color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  clear: both;
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 212, 154, 0.18);
}
.page-hero.section-tinted::after {
  content: "\201C";
  position: absolute;
  right: 4vw; top: -90px;
  font: 400 26rem/1 "Libre Caslon Display", Georgia, serif;
  color: rgba(255, 255, 255, .045);
  pointer-events: none;
  z-index: 0;
}
.page-hero.section-tinted > .container {
  position: relative;
  z-index: 1;
}
.page-hero.section-tinted .kicker,
.page-hero.section-tinted .kicker.breaker {
  color: #f0d49a !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .82rem;
  margin-bottom: 18px;
}
.page-hero.section-tinted .page-title,
.page-hero.section-tinted .page-title.shimmer-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: initial !important;
  color: #ffffff !important;
  font-family: "Cormorant Garamond", "Libre Caslon Display", Georgia, serif !important;
  font-weight: 500;
  letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.page-hero.section-tinted .page-intro {
  color: rgba(255, 255, 255, .84) !important;
  font-size: clamp(1rem, 2vw, 1.18rem);
  max-width: 640px;
}

/* -------- 404 hero (image overlay using friend's plum-tinted gradient) -------- */
.hero .hero-overlay {
  background:
    linear-gradient(180deg, rgba(21, 22, 43, .30) 0%, rgba(21, 22, 43, .12) 35%, rgba(20, 16, 40, .70) 100%),
    linear-gradient(90deg, rgba(10, 8, 24, .55) 0%, rgba(16, 11, 32, .40) 42%, rgba(17, 11, 28, .10) 72%) !important;
}
.hero .hero-eyebrow,
.hero .hero-eyebrow {
  color: #f0d49a !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .82rem;
}
.hero .hero-title {
  color: #ffffff !important;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, .55),
    0 6px 36px rgba(20, 16, 40, .45);
  font-family: "Cormorant Garamond", "Libre Caslon Display", Georgia, serif !important;
  font-weight: 500;
}
.hero .hero-flourish span {
  background: linear-gradient(90deg, transparent, #c58f3e, transparent) !important;
}
.hero .hero-flourish em {
  color: #f0d49a !important;
}

/* -------- 404 mission: cream/paper section with rose kicker -------- */
.mission {
  background: var(--paper, #fbf8f2);
  padding: 80px 0 70px !important;
}
.mission .mission-line {
  color: var(--ink, #171b2d);
}
.mission .mission-line.italic {
  color: var(--rose, #a44f67);
  font-style: italic;
}

/* -------- 404 book grid section (dark plum, like her "About Me" panel) -------- */
.books .section-title.white.center {
  color: #ffffff !important;
  font-family: "Cormorant Garamond", "Libre Caslon Display", Georgia, serif !important;
}
.books .book-card {
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid rgba(232, 212, 154, .18) !important;
  color: #ffffff !important;
}
.books .book-card .book-name {
  color: #f4d99f !important;
  font-family: "Cormorant Garamond", "Libre Caslon Display", Georgia, serif !important;
}
.books .book-card .book-blurb {
  color: rgba(255, 255, 255, .78) !important;
}

/* -------- Blog post page hero (matches friend pg-hero gradient) -------- */
.page-hero.section-tinted,
.post .page-hero.section-tinted {
  background: linear-gradient(135deg, #1b1429 0%, #442857 100%) !important;
}

/* -------- Card chips (renew with rose + paper tokens) -------- */
.chip {
  border: 1px solid rgba(232, 212, 154, .35);
  background: var(--paper-2, #f3ede3);
  color: var(--rose, #a44f67);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
}

/* -------- Footer gold link color (matches friend footer) -------- */
.footer-links li a,
.footer-nav a,
.site-footer a {
  transition: color .25s ease;
}

/* -------- Header keep translucent indigo, but align kicker to gold family -------- */
.section-tinted .kicker {
  color: var(--rose, #a44f67) !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .82rem;
}

/* (Contact-page dawn restore removed 2026-09-27 -> Contact tab retired) */