/* ==========================================================================
   BRUCE WAHL | OFFICIAL AUTHOR PLATFORM
   Premium Editorial Design — Professional, Vibrant, Client-Ready
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Core Surfaces — warm ivory & near-black, museum-catalog feel */
  --canvas:        #f7f3ea;
  --surface:       #ffffff;
  --surface-warm:  #efe4ca;
  --surface-amber: #fbf4e4;
  --surface-dark:  #0a0c10;
  --surface-card:  #fffdf9;
  --surface-alt:   #eadfc3;

  /* Brand Accent Colors — antique gold & oxblood, not startup-orange */
  --amber:         #9c7a22;
  --amber-mid:     #c9a227;
  --amber-light:   #e7cd7f;
  --amber-glow:    rgba(201,162,39,0.18);
  --crimson:       #7a1328;
  --crimson-hover: #96192f;
  --forest:        #14301f;
  --forest-light:  #2c5c3b;
  --navy:          #0b1c2c;
  --vet-gold:      #b89148;
  --vet-green:     #16301d;

  /* Text */
  --ink:           #0b0d10;
  --ink-soft:      #2a2e36;
  --ink-muted:     #5c6270;
  --ink-light:     #999fab;
  --ink-inv:       #ffffff;

  /* Borders */
  --border-xs:     #ece2c9;
  --border-sm:     #ddcea2;
  --border-md:     #bfa877;
  --border-dark:   #0b0d10;

  /* Gradients */
  --grad-dark:     linear-gradient(135deg, #0a0c10 0%, #16202c 55%, #0b1c2c 100%);
  --grad-veteran:  linear-gradient(160deg, #07130a 0%, #142a18 50%, #0a0c10 100%);
  --grad-amber-r:  linear-gradient(135deg, #3e2b00 0%, #6b4d00 45%, #c9a227 100%);
  --grad-gold-text: linear-gradient(135deg, #e7cd7f 0%, #c9a227 55%, #9c7a22 100%);

  /* Typography */
  --font-display:  "Playfair Display", Georgia, serif;
  --font-body:     "Newsreader", Georgia, serif;
  --font-sans:     "Inter", -apple-system, sans-serif;
  --font-mono:     "Space Mono", monospace;

  /* Layout */
  --max-w:         1240px;
  --section-v:     5.5rem;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;

  /* Transitions */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:      0.18s var(--ease);
  --t-mid:       0.30s var(--ease);
  --t-slow:      0.52s var(--ease);
  --t-page:      0.56s var(--ease-premium);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(11,13,16,0.05), 0 4px 12px rgba(11,13,16,0.04);
  --shadow-md:   0 4px 8px rgba(11,13,16,0.06), 0 12px 32px rgba(11,13,16,0.10);
  --shadow-lg:   0 8px 16px rgba(11,13,16,0.08), 0 24px 60px rgba(11,13,16,0.14);
  --shadow-gold: 0 10px 30px rgba(201,162,39,0.22);
  --shadow-book: -20px 26px 54px rgba(14,18,24,0.32), -4px 8px 18px rgba(14,18,24,0.16);
}

/* ──────────────────────────────────────────────────────────────────────────
   RESET & BASE
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html  { scroll-behavior: smooth; font-size: 17px; }
body  {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--font-sans); }
::selection { background: var(--amber-mid); color: #0b0d10; }

/* Entrance animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.8); }
}

/* ──────────────────────────────────────────────────────────────────────────
   PAGE-TRANSITION SYSTEM — crossfade between tabs + top progress bar
   ────────────────────────────────────────────────────────────────────────── */
@keyframes revealPanel {
  from { opacity: 0; transform: translateY(22px) scale(0.992); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes hidePanel {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
.tab-panel.panel-leaving {
  display: block;
  animation: hidePanel 0.22s var(--ease) forwards;
  pointer-events: none;
}
.tab-panel.active-panel {
  animation: revealPanel var(--t-page) var(--ease-premium) both;
}

.page-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-mid), var(--amber-light));
  box-shadow: 0 0 12px rgba(201,162,39,0.55);
  z-index: 9999; opacity: 0;
  transition: width 0.45s var(--ease-premium), opacity 0.25s ease;
}
.page-progress.is-active { opacity: 1; }

/* Scroll-reveal utility, applied by JS to content blocks */
.reveal-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
}
.reveal-up.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tab-panel.active-panel, .tab-panel.panel-leaving { animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TOP ANNOUNCEMENT BAR
   ────────────────────────────────────────────────────────────────────────── */
.top-bar {
  background: var(--surface-dark);
  color: #ddd5c4;
  font-size: 0.82rem;
  padding: 0.6rem 1.5rem;
  z-index: 200;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.top-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.top-bar-badge {
  background: var(--amber-mid);
  color: #0e1218;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  margin-right: 0.5rem;
}
.top-bar-cta {
  color: var(--amber-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.top-bar-cta:hover { color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   SITE HEADER
   ────────────────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 2px solid var(--border-dark);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--t-mid);
}
.site-header.scrolled { box-shadow: 0 4px 28px rgba(14,18,24,0.12); }

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Brand */
.brand-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-crest {
  width: 44px; height: 44px;
  background: var(--surface-dark);
  color: #fff;
  border-radius: 50%;
  border: 2.5px solid var(--amber-mid);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.brand-logo:hover .brand-crest { transform: rotate(-8deg) scale(1.08); }
.brand-info { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-tagline {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--crimson);
  margin-top: 4px;
}

/* Navigation */
.main-nav { flex: 1; min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  flex-wrap: nowrap;
}
.nav-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.38rem 0.55rem;
  border-radius: var(--r-xs);
  position: relative;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0.55rem; right: 0.55rem;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}
.nav-link:hover        { color: var(--crimson); background: rgba(122,19,40,0.06); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active       { color: var(--crimson); }
.nav-link.active::after{ transform: scaleX(1); }

.nav-link-veteran { color: var(--forest); }
.nav-link-veteran::after { background: var(--vet-gold); }
.nav-link-veteran:hover  { color: var(--forest); background: rgba(26,61,43,0.07); }
.nav-link-veteran.active { color: var(--forest); }

.nav-pill {
  background: var(--crimson);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  margin-left: 3px;
  vertical-align: middle;
}
.nav-cta {
  background: var(--ink);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-xs);
  border: 2px solid var(--ink);
  margin-left: 0.35rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.nav-cta:hover {
  background: var(--crimson);
  border-color: var(--crimson);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(122,19,40,0.28);
}

/* "More" Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none; border: none; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.dd-caret { font-size: 0.65em; transition: transform var(--t-fast); position: relative; top: 1px; }
.nav-dropdown.dd-open .dd-caret { transform: rotate(180deg); }
.nav-dropdown-toggle.is-active { color: var(--crimson); }
.nav-dropdown-toggle.is-active::after { transform: scaleX(1); }

.nav-dropdown-menu {
  list-style: none;
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border-sm);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  padding: 0.45rem; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 150;
}
.nav-dropdown.dd-open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu li { width: 100%; }
.nav-dropdown-menu .nav-link {
  display: block; width: 100%; padding: 0.62rem 0.85rem; border-radius: var(--r-xs);
  white-space: nowrap;
}
.nav-dropdown-menu .nav-link::after { display: none; }
.nav-dropdown-menu .nav-link:hover { background: rgba(122,19,40,0.07); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  flex-shrink: 0;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--ink); transition: var(--t-fast); }

/* ──────────────────────────────────────────────────────────────────────────
   TAB PANELS
   ────────────────────────────────────────────────────────────────────────── */
.site-main { min-height: 60vh; }
.tab-panel { display: none; }
.tab-panel.active-panel { display: block; animation: panelIn 0.38s var(--ease) both; }

/* ──────────────────────────────────────────────────────────────────────────
   LAYOUT HELPERS
   ────────────────────────────────────────────────────────────────────────── */
.content-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-v) 1.5rem;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--border-dark);
  padding-bottom: 0.75rem;
  margin-bottom: 2.5rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.section-num { font-family: var(--font-mono); font-size: 0.88rem; color: var(--crimson); font-weight: 700; }
.store-section .section-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.section-sub { font-size: 1.02rem; color: var(--ink-muted); max-width: 640px; }
.section-link {
  font-size: 0.86rem; font-weight: 600; color: var(--ink-muted);
  border-bottom: 1px dashed var(--ink-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.section-link:hover { color: var(--crimson); border-color: var(--crimson); }

/* ──────────────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.85rem 1.7rem;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  border-radius: var(--r-sm); border: 2px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: background var(--t-mid), border-color var(--t-mid),
              transform var(--t-fast), box-shadow var(--t-mid), color var(--t-mid), letter-spacing var(--t-mid);
}
.btn:hover   { transform: translateY(-3px); letter-spacing: 0.025em; }
.btn:active  { transform: translateY(-1px) scale(0.98); }

.btn-dark  { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover  { background: var(--crimson); border-color: var(--crimson); box-shadow: 0 10px 26px rgba(122,19,40,0.32); }

.btn-amber { background: var(--amber-mid); color: #140e02; border-color: var(--amber-mid); }
.btn-amber:hover { background: var(--amber-light); border-color: var(--amber-light); box-shadow: var(--shadow-gold); }

.btn-ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-dark); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-primary-inv { background: var(--amber-mid); color: #140e02; border-color: var(--amber-mid); }
.btn-primary-inv:hover { background: var(--amber-light); border-color: var(--amber-light); }

.btn-primary-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-primary-light:hover { background: var(--amber-light); border-color: var(--amber-light); }

.btn-full { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.inline-link {
  color: var(--crimson); font-weight: 600;
  border-bottom: 1px solid rgba(122,19,40,0.3);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.inline-link:hover { border-color: var(--crimson); color: var(--crimson-hover); }

/* ──────────────────────────────────────────────────────────────────────────
   TAB HERO BANNERS
   ────────────────────────────────────────────────────────────────────────── */
.tab-hero { padding: 4rem 1.5rem; position: relative; overflow: hidden; }
.tab-hero-inner { max-width: var(--max-w); margin: 0 auto; }

.tab-eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700;
  margin-bottom: 1rem;
}
.tab-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.08;
  margin-bottom: 0.85rem;
}
.tab-hero-lead {
  font-family: var(--font-body); font-size: 1.2rem;
  line-height: 1.65; max-width: 660px;
}

.tab-hero-dark { background: var(--grad-dark); color: #e8f0f8; }
.tab-hero-dark .tab-eyebrow    { color: var(--amber-mid); }
.tab-hero-dark .tab-hero-title { color: #fff; }
.tab-hero-dark .tab-hero-lead  { color: #8aa2ba; }

.tab-hero-warm { background: var(--surface-warm); border-bottom: 2px solid var(--border-dark); }
.tab-hero-warm .tab-eyebrow    { color: var(--crimson); }
.tab-hero-warm .tab-hero-title { color: var(--ink); }
.tab-hero-warm .tab-hero-lead  { color: var(--ink-soft); }

.tab-hero-amber-rich {
  background: linear-gradient(135deg, #2a1000 0%, #5a2800 50%, #8a4000 100%);
  border-bottom: 4px solid var(--amber-mid);
}
.tab-hero-amber-rich .tab-eyebrow    { color: var(--amber-light); }
.tab-hero-amber-rich .tab-hero-title { color: #fff; }
.tab-hero-amber-rich .tab-hero-lead  { color: #c8a060; }

/* ──────────────────────────────────────────────────────────────────────────
   HERO — HOME
   ────────────────────────────────────────────────────────────────────────── */
.hero-section {
  background: var(--grad-dark);
  min-height: 92vh; display: flex; align-items: center;
  position: relative; overflow: visible;
}
.hero-bg-radial {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 90% 45%, rgba(201,162,39,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 10% 80%, rgba(122,19,40,0.10) 0%, transparent 60%);
}
.hero-content {
  max-width: var(--max-w); margin: 0 auto; padding: 5rem 1.5rem; width: 100%;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: center;
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--amber-mid); font-weight: 700; margin-bottom: 1.5rem;
}
.kicker-dot {
  width: 8px; height: 8px; background: var(--amber-mid); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -0.025em;
  color: #fff; margin-bottom: 1.75rem;
}
.hero-headline em {
  font-style: italic; font-weight: 400; color: var(--amber-light);
  background: linear-gradient(180deg, transparent 70%, rgba(201,162,39,0.22) 70%);
  padding: 0 4px;
}
.hero-lead {
  font-family: var(--font-body); font-size: 1.22rem; line-height: 1.72;
  color: #92a8be; margin-bottom: 2rem; max-width: 580px;
}
.hero-quote {
  border-left: 4px solid var(--amber-mid);
  padding: 1.1rem 1.5rem;
  background: rgba(255,255,255,0.04);
  font-family: var(--font-body); font-style: italic;
  font-size: 1.06rem; line-height: 1.6; color: #b0c4d8;
  margin-bottom: 2.5rem;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ──────────────────────────────────────────────────────────────────────────
   3D BOOK
   ────────────────────────────────────────────────────────────────────────── */
.hero-book-col {
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  position: relative; z-index: 2;
}
.book-badge {
  background: var(--amber-mid); color: #0e1218;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px;
  border-radius: var(--r-xs);
}

/* A dedicated glow anchored behind the book itself (independent of the
   cursor spotlight) so it reads as the centerpiece of the hero — the
   signature book — rather than one element among several. */
.hero-book-col::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,162,39,0.26) 0%, rgba(201,162,39,0.10) 45%, transparent 72%);
  filter: blur(8px);
  animation: glowPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* The cover art is a pre-rendered 3D mockup (its own angle, pages, and
   shadow are already baked into the PNG), so it's floated and lit rather
   than faked with CSS perspective — warping an already-3D render with a
   further rotateY/rotateX would look distorted, not deeper. */
.book-3d {
  width: 360px; max-width: 100%; position: relative;
  cursor: pointer;
  animation: bookFloat 5.5s ease-in-out infinite;
  transition: transform 0.5s var(--ease-premium);
}
.book-3d:hover { transform: translateY(-10px) scale(1.035); animation-play-state: paused; }
.book-3d-lg { width: 370px; }

@media (min-width: 1101px) {
  .book-3d { width: 400px; }
}

@keyframes bookFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.book-cover-photo {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 30px 40px rgba(10,13,18,0.45)) drop-shadow(0 10px 18px rgba(201,162,39,0.14));
  transition: filter 0.5s ease;
}
.book-3d:hover .book-cover-photo {
  filter: drop-shadow(0 40px 55px rgba(10,13,18,0.5)) drop-shadow(0 12px 24px rgba(201,162,39,0.24));
}
.book-caption { font-size: 0.8rem; color: #aebecc; text-align: center; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .book-3d { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   CREDIBILITY STRIP
   ────────────────────────────────────────────────────────────────────────── */
.cred-strip { background: var(--surface-dark); border-top: 1px solid #18222e; border-bottom: 1px solid #18222e; }
.cred-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 2.25rem 1.5rem;
  display: flex; align-items: center; justify-content: space-around; gap: 1.5rem; flex-wrap: wrap;
}
.cred-item { text-align: center; }
.cred-num {
  display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--amber-mid), var(--amber-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cred-label { display: block; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #aebecc; margin-top: 0.3rem; }
.cred-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.07); }

/* ──────────────────────────────────────────────────────────────────────────
   AUDIO PLAYER BAR
   ────────────────────────────────────────────────────────────────────────── */
.audio-bar {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 2rem;
  background: var(--surface-warm);
  border: 1px solid var(--border-md);
  border-radius: var(--r-xs);
  padding: 1.25rem 2rem;
  margin: 2.5rem auto; 
  padding-left: 2rem; padding-right: 2rem;
  max-width: var(--max-w);
  width: calc(100% - 3rem);
  flex-wrap: wrap;
}
.audio-bar-left { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }
.audio-play-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff; border: none;
  font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.audio-play-btn:hover { background: var(--crimson); transform: scale(1.06); box-shadow: 0 4px 14px rgba(122,19,40,0.3); }
.audio-info h4 { font-family: var(--font-display); font-size: 0.98rem; font-weight: 800; margin-bottom: 2px; }
.audio-info p  { font-size: 0.78rem; color: var(--ink-muted); }
.audio-waveform { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 3px; height: 30px; }
.wave-bar { flex: 1; background: #c8bfb0; border-radius: 2px; transition: height 0.15s ease, background 0.15s ease; }
.wave-bar.playing { background: var(--crimson); }
.audio-timer { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; flex-shrink: 0; }
.audio-cta { font-size: 0.84rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border-md); flex-shrink: 0; transition: color var(--t-fast); }
.audio-cta:hover { color: var(--crimson); border-color: var(--crimson); }

/* ──────────────────────────────────────────────────────────────────────────
   CARDS GRID
   ────────────────────────────────────────────────────────────────────────── */
.cards-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-xs);
  border-radius: var(--r-xs); padding: 2rem;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-sm); }

.card-dark {
  background: var(--surface-dark); border-color: #1c2836; color: #ccdaea;
}
.card-dark .card-title { color: #eef4fc; }
.card-dark .card-body  { color: #8aa0b4; }
.card-dark .card-meta  { color: #aebecc; }
.card-dark .card-arrow { color: var(--amber-light); }
.card-dark .card-arrow:hover { color: #fff; }
.card-dark .card-tag   { color: var(--amber-mid); }
.card-dark .card-footer{ border-top-color: rgba(255,255,255,0.07); }

.card-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.card-accent-amber  { background: linear-gradient(90deg, var(--amber), var(--amber-light)); }
.card-accent-red    { background: linear-gradient(90deg, var(--crimson), #e06060); }
.card-accent-forest { background: linear-gradient(90deg, var(--forest), var(--forest-light)); }

.card-tag   { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--crimson); margin-bottom: 0.65rem; display: block; }
.card-title { font-family: var(--font-display); font-size: 1.28rem; font-weight: 800; line-height: 1.28; color: var(--ink); margin-bottom: 0.72rem; }
.card-body  { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.68; color: var(--ink-soft); flex: 1; margin-bottom: 1.5rem; }
.card-footer { border-top: 1px solid var(--border-xs); padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.card-meta  { font-size: 0.78rem; color: var(--ink-light); font-weight: 600; }
.card-arrow { font-size: 0.84rem; font-weight: 700; color: var(--ink); transition: color var(--t-fast); }
.card-arrow:hover { color: var(--crimson); }

/* ──────────────────────────────────────────────────────────────────────────
   NEWSLETTER BAND (HOME)
   ────────────────────────────────────────────────────────────────────────── */
.newsletter-band { background: linear-gradient(135deg, #1c0800 0%, #3a1500 45%, #5a2400 100%); }
.newsletter-band-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 4.5rem 1.5rem;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center;
}
.newsletter-kicker { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--amber-mid); font-weight: 700; margin-bottom: 0.75rem; }
.newsletter-band-text h3 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 900; line-height: 1.15; color: #fff; margin-bottom: 0.85rem; }
.newsletter-band-text p  { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.65; color: #c09060; }
.newsletter-band-form    { display: flex; flex-direction: column; gap: 0.6rem; }
.newsletter-input-row    { display: flex; }
.newsletter-input {
  flex: 1; padding: 0.88rem 1.15rem; font-size: 0.92rem; font-family: var(--font-sans);
  border: 2px solid rgba(255,255,255,0.14); border-right: none;
  background: rgba(255,255,255,0.06); color: #fff; outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.32); }
.newsletter-input:focus  { border-color: var(--amber-mid); background: rgba(255,255,255,0.10); }
.newsletter-btn {
  background: var(--amber-mid); color: #0e1218; font-weight: 800; font-size: 0.9rem;
  padding: 0.88rem 1.5rem; border: 2px solid var(--amber-mid); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast); white-space: nowrap;
}
.newsletter-btn:hover { background: var(--amber-light); border-color: var(--amber-light); }
.newsletter-note { font-size: 0.74rem; color: rgba(255,255,255,0.3); }

/* ──────────────────────────────────────────────────────────────────────────
   BOOKS: FEATURE LAYOUT
   ────────────────────────────────────────────────────────────────────────── */
.book-feature-grid  { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 5rem; align-items: center; }
.feature-title { font-family: var(--font-display); font-size: 2.8rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 1.25rem; }
.feature-lead  { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.74; color: var(--ink-soft); margin-bottom: 1.75rem; }
.press-bar     { background: var(--surface-warm); border-left: 4px solid var(--amber-mid); padding: 1rem 1.25rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 2rem; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.book-feature-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.book-feature-visual  { display: flex; justify-content: center; }

/* ──────────────────────────────────────────────────────────────────────────
   CHAPTER READER
   ────────────────────────────────────────────────────────────────────────── */
.reader-section { background: var(--surface-warm); padding: 5rem 1.5rem; border-top: 2px solid var(--border-dark); }
.reader-card {
  background: var(--surface); max-width: 840px; margin: 0 auto;
  padding: 4rem 5rem; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-xs); border-radius: var(--r-xs);
  transition: background 0.3s, color 0.3s;
}
.reader-card.theme-sepia { background: #f5ede0; color: #332a1e; }
.reader-card.theme-night { background: #131820; color: #d0dcea; }
.reader-card.theme-night .reader-title { color: #eef4fc; }
.reader-card.theme-night .reader-pullquote { background: #1a2030; color: #c0d0e0; }

.reader-toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--border-xs); font-size: 0.82rem; color: var(--ink-muted); flex-wrap: wrap; gap: 1rem; }
.reader-controls { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.reader-themes, .reader-sizes { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; }
.theme-btn, .size-btn {
  background: var(--surface-warm); border: 1px solid var(--border-sm);
  font-size: 0.74rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-xs);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-btn.theme-active, .size-btn.size-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.theme-btn:hover, .size-btn:hover { background: var(--border-sm); }

.reader-header { text-align: center; border-bottom: 2px solid var(--border-dark); padding-bottom: 2rem; margin-bottom: 2.5rem; }
.reader-eyebrow { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--crimson); font-weight: 700; margin-bottom: 0.65rem; }
.reader-title   { font-family: var(--font-display); font-size: 2.8rem; font-weight: 900; letter-spacing: -0.015em; margin-bottom: 0.5rem; }
.reader-byline  { font-family: var(--font-body); font-style: italic; font-size: 1.05rem; color: var(--ink-muted); }

.reader-prose { font-family: var(--font-body); font-size: 1.22rem; line-height: 1.96; color: #22272e; transition: font-size var(--t-fast); }
.reader-prose p { margin-bottom: 1.65rem; text-indent: 1.6em; }
.reader-prose p:first-of-type::first-letter { font-family: var(--font-display); font-size: 4rem; font-weight: 900; float: left; line-height: 0.82; margin-right: 0.6rem; margin-top: 0.15rem; color: var(--ink); }

.reader-pullquote { border-left: 3px solid var(--crimson); padding: 1.25rem 2rem; margin: 2.5rem 0; font-size: 1.35rem; font-style: italic; line-height: 1.55; background: var(--surface-warm); color: var(--ink); text-indent: 0 !important; border-radius: 0 var(--r-xs) var(--r-xs) 0; }

.reader-cta { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px dashed var(--border-md); text-align: center; }
.reader-cta h4 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; margin-bottom: 0.5rem; }
.reader-cta p  { color: var(--ink-muted); margin-bottom: 1.5rem; }

/* ──────────────────────────────────────────────────────────────────────────
   BLOG TAB
   ────────────────────────────────────────────────────────────────────────── */
.blog-featured {
  background: var(--surface-warm);
  border: 2px solid var(--border-dark);
  padding: 2.75rem 3rem;
  border-radius: var(--r-xs);
  margin-bottom: 1rem;
  box-shadow: 6px 6px 0 var(--border-dark);
  position: relative;
  overflow: hidden;
}
.blog-featured::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--amber-mid), var(--crimson), var(--forest));
}
.blog-featured-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.blog-date { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-muted); }
.blog-featured-title { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--ink); margin-bottom: 1rem; line-height: 1.2; }
.blog-featured-excerpt { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.78; color: var(--ink-soft); margin-bottom: 1.75rem; }

.blog-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.blog-filter {
  background: var(--surface-warm); border: 1px solid var(--border-sm);
  font-size: 0.8rem; font-weight: 700; padding: 0.4rem 1rem;
  border-radius: 999px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.blog-filter:hover { background: var(--surface-alt); border-color: var(--border-md); }
.active-filter { background: var(--ink); color: #fff; border-color: var(--ink); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.blog-card {
  background: var(--surface-card); border: 1px solid var(--border-xs);
  border-radius: var(--r-xs); padding: 1.75rem;
  display: flex; flex-direction: column;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-sm); }
.blog-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.blog-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; line-height: 1.28; color: var(--ink); margin-bottom: 0.72rem; }
.blog-card p  { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.68; color: var(--ink-soft); flex: 1; margin-bottom: 1.25rem; }
.blog-card-footer { border-top: 1px solid var(--border-xs); padding-top: 0.85rem; display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 0.78rem; color: var(--ink-light); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────────
   INTERVIEWS TAB
   ────────────────────────────────────────────────────────────────────────── */
.interview-featured {
  background: var(--grad-dark);
  color: #d8e8f4; border-radius: var(--r-xs);
  padding: 3rem 3.5rem; margin-bottom: 3rem;
  position: relative; overflow: hidden;
}
.interview-featured::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--amber-mid), var(--amber-light));
}
.interview-featured-badge { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.interview-type-icon { font-size: 1.5rem; }
.interview-featured h2 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 900; color: #fff; margin-bottom: 1rem; line-height: 1.22; }
.interview-featured p  { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.72; color: #8aa4be; margin-bottom: 1.5rem; }
.interview-featured-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #aebecc; font-family: var(--font-mono); margin-bottom: 1.75rem; }

.interview-type-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.itype-btn {
  background: var(--surface-warm); border: 1px solid var(--border-sm);
  font-size: 0.8rem; font-weight: 700; padding: 0.4rem 1rem;
  border-radius: 999px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.itype-btn:hover { background: var(--surface-alt); }
.itype-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.interviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.interview-card {
  background: var(--surface-card); border: 1px solid var(--border-xs);
  border-radius: var(--r-xs); padding: 1.75rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  position: relative; overflow: hidden;
}
.interview-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border-xs); transition: background var(--t-mid); }
.interview-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.interview-card:hover::before { background: var(--crimson); }
.interview-card h3 { font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.interview-card p  { font-family: var(--font-body); font-size: 0.96rem; line-height: 1.68; color: var(--ink-soft); flex: 1; }
.interview-meta { display: flex; gap: 1rem; font-size: 0.76rem; color: var(--ink-light); font-family: var(--font-mono); font-weight: 700; }

.interview-type-tag { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: var(--r-xs); display: inline-block; }
.tag-podcast { background: rgba(122,19,40,0.1); color: var(--crimson); }
.tag-tv      { background: rgba(26,61,43,0.1);  color: var(--forest-light); }
.tag-print   { background: rgba(201,162,39,0.1); color: var(--amber); }
.tag-radio   { background: rgba(15,34,51,0.1);   color: var(--navy); }

/* Press CTA */
.press-cta-section { background: var(--surface-warm); border-top: 2px solid var(--border-dark); }
.press-cta-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 3.5rem 1.5rem;
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 3rem; align-items: center;
}
.press-cta-inner h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 900; margin-bottom: 0.65rem; }
.press-cta-inner p  { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); }

/* ──────────────────────────────────────────────────────────────────────────
   NEWSLETTER TAB
   ────────────────────────────────────────────────────────────────────────── */
.newsletter-hero {
  background: var(--grad-dark); padding: 5rem 1.5rem; text-align: center;
  position: relative; overflow: hidden;
}
.newsletter-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(201,162,39,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.newsletter-hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.newsletter-hero-form { display: flex; max-width: 500px; margin: 2rem auto 0; }
.newsletter-hero-form input {
  flex: 1; padding: 0.9rem 1.15rem; font-size: 0.94rem; font-family: var(--font-sans);
  border: 2px solid rgba(255,255,255,0.18); border-right: none;
  background: rgba(255,255,255,0.07); color: #fff; outline: none;
}
.newsletter-hero-form input::placeholder { color: rgba(255,255,255,0.35); }
.newsletter-hero-form button {
  background: var(--amber-mid); color: #0e1218; font-weight: 800; font-size: 0.9rem;
  padding: 0.9rem 1.5rem; border: 2px solid var(--amber-mid); cursor: pointer;
  transition: background var(--t-fast);
}
.newsletter-hero-form button:hover { background: var(--amber-light); border-color: var(--amber-light); }

/* Archive */
.newsletter-archive { display: flex; flex-direction: column; gap: 0; }
.nl-issue {
  display: grid; grid-template-columns: 80px 1fr; gap: 2.5rem;
  padding: 2rem 0; border-bottom: 1px solid var(--border-xs);
  align-items: start;
  transition: background var(--t-fast);
}
.nl-issue:last-child { border-bottom: none; }
.nl-issue:hover { background: rgba(244,237,224,0.5); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; border-radius: var(--r-xs); }
.nl-issue-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 900; color: var(--border-sm); line-height: 1; padding-top: 0.25rem; }
.nl-issue-body h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; line-height: 1.3; }
.nl-issue-body p  { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 0.75rem; }
.nl-issue-meta    { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.nl-date { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--ink-muted); }

/* Subscriber Quotes */
.nl-social-proof { background: var(--surface-dark); padding: 5rem 1.5rem; }
.nl-social-inner { max-width: var(--max-w); margin: 0 auto; }
.nl-social-proof h3 { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: #fff; margin-bottom: 2.5rem; text-align: center; }
.nl-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.nl-quote {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-xs); padding: 2rem;
  font-family: var(--font-body); font-style: italic;
  font-size: 1.04rem; line-height: 1.7; color: #e4ebf1;
  transition: background var(--t-mid);
}
.nl-quote:hover { background: rgba(255,255,255,0.07); }
.nl-quote strong { display: block; font-style: normal; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; color: #aebecc; margin-top: 1.25rem; }

/* ──────────────────────────────────────────────────────────────────────────
   SPEAKING TAB
   ────────────────────────────────────────────────────────────────────────── */
.speaking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.speaking-card {
  background: var(--surface-card); border: 1px solid var(--border-xs);
  border-radius: var(--r-xs); padding: 2.75rem 2.25rem;
  display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.speaking-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.speaking-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--border-xs); transition: background var(--t-mid); }
.speaking-card:hover::before { background: var(--crimson); }
.speaking-card-accent { background: var(--surface-warm); }
.speaking-card-accent::before { background: var(--amber-mid); }
.speaking-card-accent:hover::before { background: var(--amber); }
.speaking-num { font-family: var(--font-mono); font-size: 3.5rem; font-weight: 700; color: rgba(14,18,24,0.04); line-height: 1; position: absolute; top: 1.2rem; right: 1.5rem; }
.speaking-card h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.speaking-card p  { font-family: var(--font-body); font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); }
.speaking-bullets { display: flex; flex-direction: column; gap: 0.6rem; }
.speaking-bullets li { padding: 0.52rem 0; border-bottom: 1px dashed var(--border-xs); font-size: 0.9rem; color: var(--ink-soft); display: flex; gap: 0.6rem; }
.speaking-bullets li::before { content: '✓'; color: var(--crimson); font-weight: 800; flex-shrink: 0; }

/* Testimonials */
.testimonials-section { background: var(--surface-dark); padding: 5rem 1.5rem; }
.testimonials-inner   { max-width: var(--max-w); margin: 0 auto; }
.testimonials-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.testimonial-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-xs); padding: 2rem; transition: background var(--t-mid), transform var(--t-mid); }
.testimonial-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-3px); }
.testimonial-stars { color: var(--amber-mid); font-size: 0.88rem; margin-bottom: 1rem; letter-spacing: 2px; }
.testimonial-card p { font-family: var(--font-body); font-style: italic; font-size: 1.04rem; line-height: 1.7; color: #e4ebf1; margin-bottom: 1.5rem; }
.testimonial-author { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1rem; }
.testimonial-author strong { display: block; font-size: 0.88rem; color: #ccdaea; margin-bottom: 2px; }
.testimonial-author span  { font-size: 0.76rem; color: #aebecc; }

/* ──────────────────────────────────────────────────────────────────────────
   ENTREPRENEUR'S BLUEPRINT TAB
   ────────────────────────────────────────────────────────────────────────── */
.blueprint-intro { font-family: var(--font-body); font-size: 1.22rem; line-height: 1.82; color: var(--ink-soft); max-width: 800px; }

.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pillar-card {
  background: var(--surface-card); border: 1px solid var(--border-xs);
  border-radius: var(--r-xs); padding: 2.75rem 2.2rem;
  position: relative; overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.pillar-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.pillar-forest { border-top: 4px solid var(--forest); }
.pillar-dark   { background: var(--surface-dark); border-color: #1c2836; border-top: 4px solid var(--amber-mid); }
.pillar-card.pillar-dark h3 { color: #eef4fc; } .pillar-card.pillar-dark p { color: #e4ebf1; }
.pillar-dark .pillar-badge { background: rgba(255,255,255,0.07); color: var(--amber-mid); }
.pillar-dark .pillar-divider { background: rgba(255,255,255,0.08); }
.pillar-dark .pillar-list li { color: #e4ebf1; border-bottom-color: rgba(255,255,255,0.06); }
.pillar-dark .pillar-list li::before { color: var(--amber-mid); }
.pillar-dark .pillar-number { color: rgba(255,255,255,0.04); }
.pillar-red  { border-top: 4px solid var(--crimson); }

.pillar-number { font-family: var(--font-mono); font-size: 5rem; font-weight: 700; color: rgba(14,18,24,0.04); position: absolute; top: 0.75rem; right: 1.25rem; line-height: 1; }
.pillar-badge  { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 8px; border-radius: var(--r-xs); background: var(--surface-warm); color: var(--crimson); margin-bottom: 1rem; }
.pillar-card h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; line-height: 1.28; color: var(--ink); margin-bottom: 1rem; }
.pillar-card p  { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.68; color: var(--ink-soft); margin-bottom: 1.25rem; }
.pillar-divider { height: 1px; background: var(--border-xs); margin-bottom: 1.25rem; }
.pillar-list    { display: flex; flex-direction: column; gap: 0.5rem; }
.pillar-list li { font-size: 0.86rem; color: var(--ink-soft); padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border-xs); display: flex; gap: 0.5rem; }
.pillar-list li::before { content: '→'; color: var(--crimson); font-weight: 700; flex-shrink: 0; }

/* Timeline */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(to bottom, var(--amber-mid), var(--crimson), var(--forest)); }
.timeline-item { display: grid; grid-template-columns: 180px 1fr; gap: 2.5rem; padding: 2.5rem 0 2.5rem 2rem; border-bottom: 1px solid var(--border-xs); position: relative; }
.timeline-item:last-child { border-bottom: none; }
.timeline-item::before { content: ''; position: absolute; left: -0.5rem; top: 2.75rem; width: 11px; height: 11px; border-radius: 50%; background: var(--amber-mid); border: 3px solid var(--canvas); box-shadow: 0 0 0 2px var(--amber-mid); }
.timeline-alt::before  { background: var(--crimson); box-shadow: 0 0 0 2px var(--crimson); }
.timeline-era { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--crimson); padding-top: 0.1rem; }
.timeline-alt .timeline-era { color: var(--amber); }
.timeline-content h4 { font-family: var(--font-display); font-size: 1.38rem; font-weight: 800; color: var(--ink); margin-bottom: 0.6rem; }
.timeline-content p  { font-family: var(--font-body); font-size: 1.06rem; line-height: 1.72; color: var(--ink-soft); }

/* Advisory CTA */
.advisory-cta-section { background: var(--surface-dark); }
.advisory-cta-inner { max-width: var(--max-w); margin: 0 auto; padding: 4rem 1.5rem; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 3rem; align-items: center; }
.advisory-cta-inner h3 { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: #fff; margin-bottom: 0.75rem; }
.advisory-cta-inner p  { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.7; color: #e4ebf1; }

/* ──────────────────────────────────────────────────────────────────────────
   VIETNAM VETERAN TAB
   ────────────────────────────────────────────────────────────────────────── */
.veteran-hero { min-height: 70vh; background: var(--grad-veteran); display: flex; align-items: center; position: relative; overflow: hidden; }
.veteran-hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 15% 40%, rgba(184,145,72,0.1) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 70%, rgba(30,58,30,0.35) 0%, transparent 60%); pointer-events: none; }
.veteran-hero-content { max-width: var(--max-w); margin: 0 auto; padding: 6rem 1.5rem; position: relative; z-index: 1; }
.veteran-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.24em; font-weight: 700; color: var(--vet-gold); margin-bottom: 1.5rem; }
.veteran-title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.02; color: #fff; margin-bottom: 1.5rem; }
.veteran-lead  { font-family: var(--font-body); font-size: 1.3rem; line-height: 1.7; color: #7aaa7a; max-width: 640px; margin-bottom: 2.5rem; }
.veteran-ribbon { display: inline-flex; align-items: center; gap: 1rem; background: rgba(184,145,72,0.1); border: 1px solid rgba(184,145,72,0.26); border-radius: var(--r-xs); padding: 0.72rem 1.5rem; }
.ribbon-item    { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vet-gold); }
.ribbon-divider { color: rgba(184,145,72,0.3); }

.veteran-intro-block { max-width: 800px; margin: 0 auto; }
.veteran-quote-large { font-family: var(--font-display); font-size: 1.75rem; font-style: italic; font-weight: 700; line-height: 1.4; color: var(--ink); border-left: 5px solid var(--vet-gold); padding: 1.5rem 2rem; background: var(--surface-warm); margin-bottom: 2rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.veteran-intro-block p { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.82; color: var(--ink-soft); margin-bottom: 1.25rem; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.value-card { background: var(--surface-card); border: 1px solid var(--border-xs); border-radius: var(--r-xs); padding: 2.25rem 2rem; border-top: 3px solid var(--forest); transition: transform var(--t-mid), box-shadow var(--t-mid); }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-card-amber { background: #fffbf0; border-top-color: var(--vet-gold); }
.value-card-dark  { background: var(--surface-dark); border-color: #1c2836; border-top-color: var(--vet-gold); }
.value-card.value-card-dark h3 { color: #ccdaea; } .value-card.value-card-dark p { color: #e4ebf1; }
.value-icon { font-size: 1.4rem; color: var(--vet-gold); margin-bottom: 0.85rem; display: block; }
.value-card h3 { font-family: var(--font-display); font-size: 1.28rem; font-weight: 800; color: var(--ink); margin-bottom: 0.72rem; }
.value-card p  { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

.service-to-success { background: var(--surface-dark); }
.sts-inner { max-width: var(--max-w); margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 5rem; align-items: center; }
.sts-text h2 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.5rem; }
.sts-text p  { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.8; color: #e4ebf1; margin-bottom: 1.25rem; }
.sts-text p em { color: var(--amber-light); font-style: italic; }
.sts-text a { margin-top: 1rem; }
.sts-stats  { display: flex; flex-direction: column; gap: 2.5rem; }
.sts-stat   { text-align: center; }
.sts-stat-num { display: block; font-family: var(--font-display); font-size: 3rem; font-weight: 900; background: linear-gradient(135deg, var(--vet-gold), #e0c870); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 0.4rem; }
.sts-stat-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #aebecc; }

.veteran-resources-block { max-width: 760px; margin: 0 auto; background: var(--surface-warm); border: 2px solid var(--border-dark); padding: 3rem 3.5rem; border-radius: var(--r-xs); box-shadow: 6px 6px 0 var(--border-dark); }
.veteran-resources-block h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 900; margin-bottom: 1rem; }
.veteran-resources-block p  { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.76; color: var(--ink-soft); margin-bottom: 1.25rem; }
.veteran-resources-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* ──────────────────────────────────────────────────────────────────────────
   GALLERY TAB
   ────────────────────────────────────────────────────────────────────────── */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.gal-filter { background: var(--surface-warm); border: 1px solid var(--border-sm); font-size: 0.8rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.gal-filter:hover { background: var(--surface-alt); }
.gal-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--r-xs); cursor: pointer; }
.gallery-item.gal-large { grid-column: span 2; }
.gallery-placeholder {
  width: 100%; min-height: 260px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); color: #fff; text-align: center; padding: 2rem;
  transition: transform 0.5s var(--ease);
}
.gallery-item:hover .gallery-placeholder { transform: scale(1.04); }
.gal-large .gallery-placeholder { min-height: 320px; }

.gal-ph-1  { background: linear-gradient(135deg, #1a2a3a, #0e1a28); }
.gal-ph-2  { background: linear-gradient(135deg, #2a1a0a, #451e00); }
.gal-ph-3  { background: linear-gradient(135deg, #1a1a2a, #2a1a3a); }
.gal-ph-4  { background: linear-gradient(135deg, #0a2a1a, #1a4a2a); }
.gal-ph-5  { background: linear-gradient(135deg, #2a0a0a, #4a1a1a); }
.gal-ph-vet1 { background: linear-gradient(135deg, #0a1a0a, #1a3a1a); }
.gal-ph-vet2 { background: linear-gradient(135deg, #1e3a1e, #0e2a0e); }
.gal-ph-book1{ background: linear-gradient(135deg, #2a2210, #4a3a14); }
.gal-ph-book2{ background: linear-gradient(135deg, #1a0a2a, #2a1445); }

.gal-ph-icon { font-size: 2.5rem; opacity: 0.6; margin-bottom: 0.5rem; }
.gallery-placeholder span { font-size: 0.9rem; font-weight: 700; opacity: 0.85; }
.gallery-placeholder small { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.5; letter-spacing: 0.08em; }

.gallery-overlay {
  position: absolute; inset: 0; background: rgba(14,18,24,0.78);
  display: flex; align-items: flex-end; padding: 1.25rem;
  opacity: 0; transition: opacity var(--t-mid);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay p { font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600; color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   ABOUT TAB
   ────────────────────────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; align-items: start; }
.about-portrait { border: 2px solid var(--border-dark); padding: 1rem; background: var(--surface); box-shadow: 10px 10px 0 var(--border-dark); border-radius: var(--r-xs); }
.about-monogram { width: 100%; aspect-ratio: 4/5; background: var(--grad-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; position: relative; overflow: hidden; }
.about-monogram::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(201,162,39,0.22), transparent 65%); }
.monogram-letters { font-family: var(--font-display); font-size: 4.5rem; font-weight: 900; letter-spacing: 0.06em; color: var(--amber-mid); line-height: 1; position: relative; z-index: 1; }
.monogram-name   { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8aa0b4; margin-top: 1rem; position: relative; z-index: 1; }
.monogram-role   { font-size: 0.68rem; color: #aebecc; margin-top: 0.35rem; position: relative; z-index: 1; }
.about-quote     { font-family: var(--font-body); font-style: italic; font-size: 0.9rem; line-height: 1.65; color: var(--ink-muted); padding: 1rem 0.5rem; text-align: center; }
.about-text      { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.9; color: var(--ink-soft); }
.about-text p    { margin-bottom: 1.5rem; }
.about-text strong { color: var(--ink); }
.about-text h3   { font-family: var(--font-display); font-size: 1.55rem; font-weight: 900; color: var(--ink); margin: 2.25rem 0 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-xs); }

.about-stats-section { background: var(--surface-warm); border-top: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); }
.about-stats-inner   { max-width: var(--max-w); margin: 0 auto; padding: 3rem 1.5rem; display: flex; justify-content: space-around; gap: 2rem; flex-wrap: wrap; }
.about-stat { text-align: center; }
.about-stat-num   { font-family: var(--font-display); font-size: 3rem; font-weight: 900; color: var(--crimson); line-height: 1; display: block; }
.about-stat-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-top: 0.4rem; display: block; }

/* ──────────────────────────────────────────────────────────────────────────
   CONTACT TAB
   ────────────────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-info h3 { font-family: var(--font-display); font-size: 2rem; font-weight: 900; margin-bottom: 1rem; }
.contact-info > p { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.74; color: var(--ink-soft); margin-bottom: 2rem; }
.contact-channels { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.contact-channel  { border-left: 3px solid var(--crimson); padding-left: 1rem; }
.contact-channel strong { display: block; font-size: 0.88rem; margin-bottom: 3px; }
.contact-email { font-family: var(--font-mono); font-size: 0.88rem; color: var(--ink-muted); transition: color var(--t-fast); }
.contact-email:hover { color: var(--crimson); }
.contact-note { background: var(--surface-warm); border: 1px solid var(--border-sm); padding: 1.25rem 1.5rem; border-radius: var(--r-xs); }
.contact-note strong { display: block; font-size: 0.9rem; margin-bottom: 0.4rem; }
.contact-note p { font-size: 0.84rem; color: var(--ink-muted); line-height: 1.55; }

.contact-form-wrap { background: var(--surface); border: 2px solid var(--border-dark); padding: 2.75rem 2.5rem; border-radius: var(--r-xs); box-shadow: var(--shadow-md); }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 0.84rem 1rem;
  border: 1px solid var(--border-dark); background: var(--surface);
  font-family: var(--font-sans); font-size: 0.92rem; color: var(--ink);
  outline: none; border-radius: var(--r-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(122,19,40,0.12); }

/* ──────────────────────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--surface-dark); color: #aebecc; border-top: 2px solid var(--border-dark); margin-top: 5rem; }
.footer-top { max-width: var(--max-w); margin: 0 auto; padding: 5rem 1.5rem 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 3.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-logo { font-family: var(--font-display); font-size: 1.75rem; font-weight: 900; color: #fff; margin-bottom: 1rem; }
.footer-brand p { font-family: var(--font-body); font-size: 0.96rem; line-height: 1.65; color: #aebecc; max-width: 340px; }
.footer-col h5  { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: #c0d0e0; margin-bottom: 1.25rem; }
.footer-col ul  { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a   { font-size: 0.88rem; color: #aebecc; transition: color var(--t-fast); cursor: pointer; }
.footer-col a:hover { color: var(--amber-light); }
.footer-col p   { font-size: 0.88rem; line-height: 1.6; color: #aebecc; }
.footer-btn { display: inline-block; margin-top: 1.25rem; padding: 0.62rem 1.2rem; background: rgba(201,162,39,0.1); color: var(--amber-light); font-size: 0.82rem; font-weight: 700; border: 1px solid rgba(201,162,39,0.25); border-radius: var(--r-xs); transition: background var(--t-fast), border-color var(--t-fast); }
.footer-btn:hover { background: rgba(201,162,39,0.2); border-color: var(--amber-mid); }
.footer-base { max-width: var(--max-w); margin: 0 auto; padding: 1.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #aebecc; }

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-content       { grid-template-columns: 1fr; gap: 3rem; }
  .hero-book-col      { display: flex; order: -1; }
  .book-3d            { width: min(280px, 72vw); }
  .book-feature-grid  { grid-template-columns: 1fr; gap: 3rem; }
  .footer-top         { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .nl-quotes          { grid-template-columns: 1fr; }
  .gallery-grid       { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.gal-large { grid-column: span 2; }
}

@media (max-width: 900px) {
  .cards-grid-3, .blog-grid, .interviews-grid, .pillars-grid,
  .speaking-grid, .testimonials-grid, .values-grid { grid-template-columns: 1fr; }
  .newsletter-band-inner, .advisory-cta-inner,
  .about-grid, .contact-grid, .sts-inner, .press-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .timeline-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.gal-large { grid-column: span 1; }
}

@media (max-width: 720px) {
  .header-inner { padding: 0 1rem; gap: 0.5rem; }
  .brand-tagline { display: none; }
  .brand-crest { width: 36px; height: 36px; font-size: 0.85rem; }
  .brand-name { font-size: 0.95rem; }
  .cart-btn { width: 38px; height: 38px; margin-left: 0.2rem; }
  .main-nav {
    display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    background: var(--surface); padding: 1.5rem; z-index: 99; overflow-y: auto;
  }
  .main-nav.nav-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav-link { font-size: 1.05rem; padding: 0.7rem 1rem; border-radius: var(--r-sm); }
  .nav-cta  { margin-left: 0; margin-top: 0.75rem; width: 100%; justify-content: center; }

  .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: none; box-shadow: none;
    padding: 0 0 0 1rem; margin-top: 2px;
    border-left: 2px solid var(--border-sm);
    max-height: 0; overflow: hidden; transition: max-height var(--t-mid);
  }
  .nav-dropdown.dd-open .nav-dropdown-menu { max-height: 400px; }
  .hamburger { display: flex; }
  .hamburger.ham-open span:nth-child(1) { transform: rotate(45deg) translateY(9px); }
  .hamburger.ham-open span:nth-child(2) { opacity: 0; }
  .hamburger.ham-open span:nth-child(3) { transform: rotate(-45deg) translateY(-9px); }

  .hero-section { min-height: auto; }
  .hero-content { padding: 3.5rem 1.25rem; }
  .hero-headline { font-size: 2.6rem; }
  .tab-hero-title { font-size: 2.2rem; }
  .veteran-title  { font-size: 2.8rem; }

  .reader-card { padding: 2rem 1.25rem; }
  .veteran-resources-block { padding: 2rem 1.5rem; }
  .footer-top  { grid-template-columns: 1fr; gap: 2rem; }
  .footer-base { flex-direction: column; gap: 0.5rem; text-align: center; }
  .audio-bar   { flex-direction: column; align-items: flex-start; width: calc(100% - 3rem); }
  .cred-inner  { gap: 1.5rem; }
  .cred-divider { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   CART BUTTON (header)
   ══════════════════════════════════════════════════════════════════════ */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; background: transparent; border: 2px solid var(--border-dark);
  border-radius: 50%; margin-left: 0.6rem; flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.cart-btn:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.cart-btn:hover svg { stroke: #fff; }
.cart-btn svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.8; transition: stroke var(--t-fast); }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 4px;
  background: var(--crimson); color: #fff; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface); transform: scale(0); transition: transform var(--t-fast) var(--ease-spring);
}
.cart-count.has-items { transform: scale(1); }

/* ══════════════════════════════════════════════════════════════════════
   STORE — format cards, quantity stepper
   ══════════════════════════════════════════════════════════════════════ */
.store-section { background: var(--surface-warm); border-top: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.store-card {
  background: var(--surface-card); border: 1px solid var(--border-sm); border-radius: var(--r-md);
  padding: 2.25rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  position: relative; overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.store-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--amber), var(--amber-light)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid); }
.store-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--amber-mid); }
.store-card:hover::before { transform: scaleX(1); }
.store-card-icon {
  font-size: 2.6rem; margin-bottom: 0.25rem;
  height: 150px; display: flex; align-items: center; justify-content: center;
}
.store-card-cover {
  height: 150px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.25rem;
}
.store-card-cover img {
  max-height: 100%; width: auto;
  filter: drop-shadow(0 14px 20px rgba(10,13,18,0.3)) drop-shadow(0 4px 8px rgba(201,162,39,0.12));
  transition: transform var(--t-mid);
}
.store-card:hover .store-card-cover img { transform: translateY(-4px) scale(1.03); }
.store-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.store-card-desc { font-size: 0.92rem; color: var(--ink-muted); min-height: 2.6em; }
.store-price { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--ink); margin: 0.25rem 0; }
.store-price span { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; color: var(--ink-light); margin-left: 4px; }

.qty-stepper {
  display: inline-flex; align-items: center; gap: 0; border: 2px solid var(--border-dark); border-radius: var(--r-sm);
  overflow: hidden; margin-bottom: 0.4rem;
}
.qty-btn { width: 38px; height: 38px; background: var(--surface); font-size: 1.1rem; font-weight: 700; border: none; color: var(--ink); transition: background var(--t-fast); }
.qty-btn:hover { background: var(--surface-alt); }
.qty-value { width: 42px; text-align: center; font-weight: 700; font-family: var(--font-mono); font-size: 0.95rem; }

.add-to-cart-btn.just-added { background: var(--forest) !important; border-color: var(--forest) !important; }

/* ══════════════════════════════════════════════════════════════════════
   CART DRAWER
   ══════════════════════════════════════════════════════════════════════ */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(11,13,16,0.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-mid), visibility var(--t-mid); z-index: 300;
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--surface); box-shadow: -18px 0 50px rgba(11,13,16,0.25);
  z-index: 301; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t-page);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; border-bottom: 2px solid var(--border-dark); }
.cart-drawer-head h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; }
.cart-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--ink-muted); transition: color var(--t-fast), transform var(--t-fast); }
.cart-close:hover { color: var(--crimson); transform: rotate(90deg); }

.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.75rem; }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 0.9rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border-xs); }
.cart-item-thumb { width: 56px; height: 76px; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-weight: 700; font-size: 0.92rem; }
.cart-item-meta { font-size: 0.78rem; color: var(--ink-muted); font-family: var(--font-mono); margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.cart-item-qty button { width: 24px; height: 24px; border: 1px solid var(--border-sm); background: var(--surface); border-radius: 4px; font-size: 0.85rem; }
.cart-item-price { font-weight: 700; font-family: var(--font-mono); font-size: 0.9rem; text-align: right; }
.cart-item-remove { font-size: 0.72rem; color: var(--crimson); margin-top: 6px; display: block; text-align: right; font-weight: 600; }
.cart-item-remove:hover { text-decoration: underline; }

.cart-empty { text-align: center; color: var(--ink-muted); padding: 3rem 1.75rem; font-size: 0.95rem; }
.cart-empty em { color: var(--ink); }

.cart-footer { padding: 1.5rem 1.75rem; border-top: 2px solid var(--border-dark); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; font-size: 1.05rem; }
.cart-subtotal strong { font-family: var(--font-display); font-size: 1.5rem; }
.cart-note { font-size: 0.76rem; color: var(--ink-light); text-align: center; margin-top: 0.75rem; }

/* ══════════════════════════════════════════════════════════════════════
   MODALS (quick-read + checkout)
   ══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(11,13,16,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  opacity: 0; visibility: hidden; transition: opacity var(--t-mid), visibility var(--t-mid); z-index: 400;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--surface); border-radius: var(--r-md); max-width: 620px; width: 100%;
  max-height: 84vh; overflow-y: auto; padding: 2.75rem; position: relative; box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(0.98); opacity: 0; transition: transform var(--t-page), opacity var(--t-page);
}
.modal-overlay.is-open .modal-box { transform: translateY(0) scale(1); opacity: 1; }
.modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-alt); border: none; font-size: 1.3rem; color: var(--ink-muted);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.modal-close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.modal-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--crimson); font-weight: 700; margin-bottom: 0.75rem; }
.modal-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 900; margin-bottom: 1.25rem; line-height: 1.25; padding-right: 2rem; }
.modal-body { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); }
.modal-body p { margin-bottom: 1.1rem; }
.modal-body p:last-child { margin-bottom: 0; }

.checkout-box p { font-size: 1rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.75rem; }
.retailer-list { display: flex; flex-direction: column; gap: 0.75rem; }
.retailer-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border: 2px solid var(--border-dark); border-radius: var(--r-sm);
  font-weight: 700; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.retailer-btn:hover { background: var(--ink); color: #fff; transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 0.9rem 1.5rem; border-radius: var(--r-sm);
  font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 500;
  opacity: 0; pointer-events: none; transition: opacity var(--t-mid), transform var(--t-mid);
  display: flex; align-items: center; gap: 0.6rem;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .toast-check { color: var(--amber-light); font-weight: 900; }

@media (max-width: 720px) {
  .store-grid { grid-template-columns: 1fr; }
  .modal-box { padding: 2rem 1.5rem; }
  .cart-drawer { width: 100vw; }
}

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM POLISH — film-grain texture, gold-foil shimmer, button sheen,
   cursor parallax, and a choreographed first-load entrance.
   ══════════════════════════════════════════════════════════════════════ */

/* Film-grain texture: adds tactile depth to flat dark panels instead of
   leaving them as a single flat color — the difference between "dark div"
   and "printed matte paper." Extremely subtle by design. */
.hero-section::before,
.veteran-hero::before,
.site-footer::before,
.cred-strip::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.site-footer, .cred-strip { position: relative; overflow: hidden; }
.hero-content, .veteran-hero-content { position: relative; z-index: 1; }
.footer-top, .footer-base, .cred-inner { position: relative; z-index: 1; }

/* Cursor-reactive spotlight in the hero — a soft glow that drifts toward
   the pointer on desktop, giving the dark panel a sense of depth and life
   rather than sitting completely static. Driven by --mx/--my custom
   properties set from JS; harmless no-op if JS never sets them. */
.hero-section {
  --mx: 50%; --my: 40%;
}
.hero-section::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(480px circle at var(--mx) var(--my), rgba(201,162,39,0.10), transparent 70%);
  pointer-events: none; z-index: 0;
  transition: background 0.4s ease;
}

/* Gold-foil shimmer — a slow light sweep across small gold badges, like
   foil catching light. Subtle and slow so it reads as quality, not flash. */
@keyframes foilShimmer {
  0%   { background-position: -160% 0; }
  60%, 100% { background-position: 160% 0; }
}
.book-badge, .top-bar-badge {
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%),
    linear-gradient(135deg, var(--amber-mid), var(--amber-light));
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: foilShimmer 4.5s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* Button sheen — a diagonal highlight that sweeps across on hover, the
   same cue used on premium product buttons. Pairs with the existing
   letter-spacing / lift micro-interactions already on .btn. */
.btn-amber, .btn-dark {
  position: relative; overflow: hidden;
}
.btn-amber::before, .btn-dark::before {
  content: '';
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s var(--ease-premium);
  pointer-events: none;
}
.btn-amber:hover::before, .btn-dark:hover::before { left: 130%; }

/* Cursor-reactive tilt on the book cover — a gentle parallax nudge while
   the pointer moves over it. The cover art is a pre-rendered 3D mockup,
   so the tilt stays within a few degrees: enough to feel alive, not so
   much it visibly warps the rendered perspective. JS toggles .tilt-live
   and sets --ry/--rx; falls back to the plain hover lift otherwise. */
.book-3d.tilt-live {
  animation-play-state: paused;
  transition: transform 0.15s linear, filter 0.3s ease;
  transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateY(-10px) scale(1.03);
}

/* First-load hero entrance — staggered reveal instead of everything
   popping in at once. Elements start pre-hidden only when JS confirms it
   will animate them in (.js-hero-stagger on <html>), so content never
   gets stuck invisible if JS fails to run. */
.js-hero-stagger .hero-kicker,
.js-hero-stagger .hero-headline,
.js-hero-stagger .hero-lead,
.js-hero-stagger .hero-quote,
.js-hero-stagger .hero-actions,
.js-hero-stagger .hero-book-col {
  opacity: 0; transform: translateY(26px);
}
.js-hero-stagger .hero-enter {
  animation: heroEnter 0.9s var(--ease-premium) forwards;
}
@keyframes heroEnter {
  to { opacity: 1; transform: translateY(0); }
}

/* The book gets its own, more confident entrance — a scale-up "pop" into
   place rather than a plain fade, matching its role as the centerpiece. */
.js-hero-stagger .hero-book-col {
  transform: translateY(26px) scale(0.86);
}
.js-hero-stagger .hero-book-col.hero-enter {
  animation: heroBookEnter 1.1s var(--ease-premium) forwards;
}
@keyframes heroBookEnter {
  0%   { opacity: 0; transform: translateY(26px) scale(0.86); }
  65%  { opacity: 1; transform: translateY(-8px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .hero-section::after { display: none; }
  .book-badge, .top-bar-badge { animation: none; background-image: linear-gradient(135deg, var(--amber-mid), var(--amber-light)); }
  .btn-amber::before, .btn-dark::before { display: none; }
  .book-3d.tilt-live { transition: none; transform: none; }
  .js-hero-stagger .hero-kicker, .js-hero-stagger .hero-headline, .js-hero-stagger .hero-lead,
  .js-hero-stagger .hero-quote, .js-hero-stagger .hero-actions, .js-hero-stagger .hero-book-col {
    opacity: 1; transform: none;
  }
  html { scroll-behavior: auto; }
}

@media (max-width: 720px) {
  .hero-section::after { display: none; }
}