/* ============================================================
   All Things GHL — shared design tokens + component classes
   Source of truth for hex values: /assets/tw-config.js
   KEEP IN SYNC with /assets/tw-config.js.
   Page-specific classes (.pick-card, .resource-card, .prose,
   .marquee, modal/optin extras) stay inline on their pages.
   ============================================================ */

:root {
  --cream: #FAF8F2;
  --paper: #FFFFFF;
  --mist: #E7ECF3;
  --mist-line: #CBD5E4;
  --line: #E7E5E0;
  --ink: #0A1628;
  --ink-soft: #1E293B;
  --ink-mute: #586472;
  --ink-faint: #69727E;
  --brand: #1E40AF;
  --brand-bright: #3B82F6;
  --brand-soft: #DBEAFE;
  --brand-deep: #172554;
  --emerald: #059669;
  --emerald-soft: #D1FAE5;
  --emerald-deep: #064E3B;
  --gold: #EAB308;
  --gold-hi: #FACC15;
  --gold-warm: #F59E0B;
  --gold-soft: #FEF3C7;
  --rose: #DC2626;
}

/* ---------- base ---------- */
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--cream); color:var(--ink); font-feature-settings:'ss01','ss02','cv01'; }
::selection { background:var(--gold-soft); color:var(--ink); }
hr.rule { border:none; border-top:1px solid rgba(10,22,40,0.08); margin:0; }
.mono { font-family:'JetBrains Mono',monospace; }

/* ---------- accessibility baseline ---------- */
:focus-visible { outline:2px solid var(--brand-bright); outline-offset:2px; border-radius:4px; }
.btn-gold:focus-visible, .btn-ink:focus-visible { outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* ---------- heading scale ---------- */
.h-display-1 { font-size:clamp(2.6rem,6vw,5.2rem); }   /* big heroes: home, pillar, resources */
.h-display-2 { font-size:clamp(2.4rem,5vw,4.2rem); }   /* bridge/contact/legal h1, dark closers */
.h-display-3 { font-size:clamp(2.2rem,5vw,3.6rem); }   /* book, intakeform h1 */
.h-section   { font-size:clamp(2rem,4.5vw,3.4rem); }   /* default section h2 */
.h-section-sm{ font-size:clamp(1.8rem,4vw,3rem); }     /* secondary section h2 */
.h-card      { font-size:clamp(1.6rem,3.5vw,2.4rem); } /* compact panel/card h2 */

/* ---------- texture & backgrounds ---------- */
.grain::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.band { background:var(--mist); border-top:1px solid var(--mist-line); border-bottom:1px solid var(--mist-line); box-shadow: inset 0 16px 32px -24px rgba(10,22,40,0.25), inset 0 -16px 32px -24px rgba(10,22,40,0.25); }
.dotgrid { background-image: radial-gradient(rgba(10,22,40,0.08) 1px, transparent 1px); background-size: 24px 24px; }
.blob-blue { position:absolute; width:460px; height:460px; background: radial-gradient(circle, rgba(59,130,246,0.25) 0%, rgba(59,130,246,0) 70%); border-radius:999px; filter: blur(40px); pointer-events:none; }
.blob-emerald { position:absolute; width:360px; height:360px; background: radial-gradient(circle, rgba(5,150,105,0.22) 0%, rgba(5,150,105,0) 70%); border-radius:999px; filter: blur(40px); pointer-events:none; }
.blob-gold { position:absolute; width:320px; height:320px; background: radial-gradient(circle, rgba(234,179,8,0.22) 0%, rgba(234,179,8,0) 70%); border-radius:999px; filter: blur(40px); pointer-events:none; }

/* ---------- typography components ---------- */
.display { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-optical-sizing:auto; font-variation-settings:'wdth' 95; letter-spacing:-0.035em; line-height:0.98; }
.scribble { background-image: url("data:image/svg+xml,%3Csvg width='320' height='14' viewBox='0 0 320 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8 C 60 2, 120 12, 180 6 S 280 10, 318 4' stroke='%23EAB308' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 95%; background-size:100% 14px; padding-bottom:0.15em; }
.highlight-blue { color:var(--brand); }
.ink-link { background-image: linear-gradient(180deg, transparent 60%, rgba(234,179,8,0.35) 60%); background-size:100% 100%; transition: color 300ms ease; }
.ink-link:hover { color:var(--brand); }

/* ---------- cards & chrome ---------- */
.bezel { background: rgba(10,22,40,0.04); padding: 6px; border-radius: 28px; border: 1px solid rgba(10,22,40,0.06); }
.tool-screen { background:#FAFAF7; border: 1px solid rgba(10,22,40,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); border-radius: 14px; }
.bezel-inner { background:var(--paper); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(10,22,40,0.04); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid rgba(10,22,40,0.08); background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }
.eyebrow .dot { width:6px; height:6px; border-radius:999px; background:var(--emerald); box-shadow:0 0 0 3px rgba(5,150,105,0.18); animation: pulseSoft 2.4s ease-in-out infinite; }
.glass-nav { background: rgba(250,248,242,0.7); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(10,22,40,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 20px 40px -20px rgba(10,22,40,0.15); }

/* ---------- buttons ---------- */
.btn-gold { background: linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 100%); color:var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 1px 2px rgba(10,22,40,0.08), 0 8px 16px -6px rgba(234,179,8,0.4); transition: transform 600ms cubic-bezier(0.32,0.72,0,1), box-shadow 600ms cubic-bezier(0.32,0.72,0,1); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 4px 6px rgba(10,22,40,0.08), 0 14px 22px -6px rgba(234,179,8,0.5); }
.btn-gold:active { transform: translateY(0) scale(0.98); }
.btn-ink { background:var(--ink); color:var(--cream); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 8px 16px -6px rgba(10,22,40,0.25); transition: transform 600ms cubic-bezier(0.32,0.72,0,1); }
.btn-ink:hover { transform: translateY(-1px); }
.btn-ink:active { transform: translateY(0) scale(0.98); }
.btn-light { background:var(--paper); color:var(--ink); box-shadow: 0 1px 2px rgba(10,22,40,0.08), 0 8px 16px -6px rgba(10,22,40,0.15); transition: transform 600ms cubic-bezier(0.32,0.72,0,1); }
.btn-light:hover { transform: translateY(-1px); }
.btn-group:hover .btn-icon { transform: translate(2px,-2px) scale(1.05); }
.btn-icon { transition: transform 500ms cubic-bezier(0.32,0.72,0,1); }

/* Keyframe used by .eyebrow .dot — defined here so it doesn't depend on the
   Tailwind CDN emitting it (the CDN only emits keyframes when a page uses the
   matching animate-* utility). */
@keyframes pulseSoft { 0%,100% { opacity:0.6; } 50% { opacity:1; } }

/* ---------- reveal animation ---------- */
.reveal { opacity:0; transform: translateY(28px); filter: blur(6px); transition: opacity 900ms cubic-bezier(0.32,0.72,0,1), transform 900ms cubic-bezier(0.32,0.72,0,1), filter 900ms cubic-bezier(0.32,0.72,0,1); }
.reveal.in { opacity:1; transform: translateY(0); filter: blur(0); }