/* ============================================================
   ALCOHOL ACROSS AMERICA — Lantana Recovery Study
   Standalone static deliverable. No external dependencies.
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* ---------- tokens ---------- */
:root{
  --bg:#0e0e10;
  --bg-2:#15151a;
  --bg-3:#1c1c22;
  --ink:#f5efe6;
  --ink-2:#d2ccc1;
  --mute:#8b8b94;
  --line:rgba(245,239,230,.10);
  --line-2:rgba(245,239,230,.18);
  --amber:#e8a33d;
  --amber-2:#ffc262;
  --coral:#f26d5b;
  --oxblood:#6a0f1a;
  --teal:#2dd4bf;

  --nav-bg:rgba(14,14,16,.55);
  --metric-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  --chart-bg:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  --track:rgba(255,255,255,.04);
  --grid-line:rgba(255,255,255,.06);
  --grid-line-2:rgba(255,255,255,.05);
  --rail:rgba(255,255,255,.12);
  --slope-line:rgba(232,163,61,.35);
  --tm-stroke:#0e0e10;
  --section-dark-bg:#0a0a0c;
  --tip-bg:rgba(20,20,24,.95);
  --hero-stop-1:#e8a33d;
  --hero-stop-2:#6a0f1a;
  --grain-opacity:.22;
  --focus-shadow:0 0 0 3px rgba(232,163,61,.18);

  --serif:'Fraunces','Playfair Display',Georgia,serif;
  --sans:'Inter','SF Pro Text','Helvetica Neue',system-ui,Arial,sans-serif;

  --maxw:1280px;
  --pad:clamp(20px,4vw,56px);
  --radius:14px;
}

/* brand constants available in both themes */
:root{
  --lantana-blue:#2f8fb8;
  --lantana-blue-2:#6ec1e4;
  --lantana-green:#3f8f54;
}

/* ---------- light theme — cool editorial paper ---------- */
:root[data-theme="light"]{
  --bg:#f4f7f9;
  --bg-2:#eaf0f4;
  --bg-3:#dde6ec;
  --ink:#0f1b24;
  --ink-2:#34424d;
  --mute:#5d6b76;
  --line:rgba(15,27,36,.12);
  --line-2:rgba(15,27,36,.22);
  --amber:#b5651d;
  --amber-2:#d48a2c;
  --coral:#b6311c;
  --oxblood:#5a0d17;
  --teal:#1f8a7a;

  --nav-bg:rgba(244,247,249,.82);
  --metric-bg:linear-gradient(180deg,#ffffff,#ecf2f6);
  --card-bg:linear-gradient(180deg,#ffffff,#ecf2f6);
  --chart-bg:linear-gradient(180deg,#ffffff,#eef3f7);
  --track:rgba(15,27,36,.07);
  --grid-line:rgba(15,27,36,.14);
  --grid-line-2:rgba(15,27,36,.12);
  --rail:rgba(15,27,36,.22);
  --slope-line:rgba(181,101,29,.55);
  --tm-stroke:#f4f7f9;
  --section-dark-bg:#0f1b24;
  --tip-bg:rgba(255,255,255,.98);
  --hero-stop-1:#2f8fb8;
  --hero-stop-2:#5a0d17;
  --grain-opacity:.06;
  --focus-shadow:0 0 0 3px rgba(47,143,184,.28);
}

/* ----- light-mode section-dark inversion ----- */
:root[data-theme="light"] .section-dark{background:linear-gradient(180deg,transparent, var(--section-dark-bg) 12%, var(--section-dark-bg) 88%, transparent)}
:root[data-theme="light"] .section-dark .eyebrow{color:var(--lantana-blue-2)}
:root[data-theme="light"] .section-dark .section-head h2,
:root[data-theme="light"] .section-dark .lede,
:root[data-theme="light"] .section-dark .caption{color:#eaf2f7}
:root[data-theme="light"] .section-dark .chart-scatter text{fill:#c8d6e0}
:root[data-theme="light"] .section-dark .chart-scatter .state-label{fill:#fff}

/* ----- light-mode display punch ----- */
:root[data-theme="light"] .display{font-weight:700}
:root[data-theme="light"] .display em{background:linear-gradient(100deg,#d48a2c 0%,#b6311c 55%,#5a0d17 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .kicker,
:root[data-theme="light"] .eyebrow{color:var(--lantana-blue)}

/* ----- Lantana logo ----- */
.lantana-logo{display:block;height:44px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.lantana-logo.nav{height:22px}
:root[data-theme="light"] .lantana-logo{filter:none;opacity:1}

/* ---------- base ---------- */
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";line-height:1.55;transition:background .4s ease, color .4s ease}
body{overflow-x:hidden}
::selection{background:var(--amber);color:#fff}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;line-height:1.02}
.display{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(60px,11vw,168px);
  line-height:.88;
  letter-spacing:-0.035em;
}
.display em{font-style:italic;font-weight:500;color:var(--amber);background:linear-gradient(100deg,var(--amber-2) 0%,var(--amber) 45%,var(--coral) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

h2{font-size:clamp(34px,5vw,62px);line-height:1.03}
h3{font-size:clamp(20px,2vw,26px)}

.kicker,.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:0.22em;font-size:11px;font-weight:600;color:var(--amber)}
.lede{color:var(--ink-2);max-width:62ch;font-size:clamp(16px,1.3vw,19px);line-height:1.6}
.dek{color:var(--ink-2);max-width:52ch;font-size:clamp(17px,1.5vw,22px);line-height:1.55;margin:24px 0 40px}

.num,.metric-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum"}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
  transition:transform .45s ease, background .3s ease;
}
.nav-right{display:flex;align-items:center;gap:18px}
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border:1px solid var(--line-2);border-radius:999px;
  font-size:12px;color:var(--ink-2);
  background:transparent;
  transition:all .2s ease;
}
.theme-toggle:hover{border-color:var(--amber);color:var(--amber)}
.theme-toggle svg{width:14px;height:14px}
.theme-toggle .lbl{font-weight:500;letter-spacing:.04em}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}
.nav.hidden{transform:translateY(-110%)}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--ink)}
.nav-brand .nav-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(232,163,61,.18);flex-shrink:0}
:root[data-theme="light"] .nav-brand .nav-dot{background:var(--lantana-blue);box-shadow:0 0 0 3px rgba(47,143,184,.18)}
.nav-brand .wordmark{color:var(--ink)}
.nav-brand .nav-sponsor{color:var(--mute);font-weight:400;font-size:12px;letter-spacing:.02em}
@media (max-width:620px){ .nav-brand .nav-sponsor{display:none} }
.nav-links{display:flex;gap:30px;font-size:13px;color:var(--ink-2)}
.nav-links a{position:relative;padding:6px 0}
.nav-links a:hover{color:var(--amber)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:820px){ .nav-links{display:none} }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:140px var(--pad) 100px;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg svg{width:100%;height:100%}
.hero-bg #heroGradStop1{stop-color:var(--hero-stop-1)}
.hero-bg #heroGradStop2{stop-color:var(--hero-stop-2)}
.hero-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .6  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:50%;z-index:-1;
  background:linear-gradient(to bottom,transparent,var(--bg));
}
.hero-inner{max-width:var(--maxw);margin:0 auto;width:100%;position:relative}
.hero .kicker{display:inline-block;margin-bottom:26px;padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}
.hero-metrics{
  margin-top:56px;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:1080px;
}
.metric{
  padding:22px 26px 24px;
  background:var(--metric-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.metric-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.metric-row{display:flex;align-items:baseline;gap:14px}
.metric-num{font-family:var(--serif);font-size:44px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1}
.metric-num.big{font-size:58px;color:var(--amber)}
.metric-sub{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--mute);letter-spacing:0;margin-top:6px}
.metric-row .arrow{width:36px;height:18px;color:var(--coral);opacity:.9}
.metric-foot{margin-top:12px;color:var(--mute);font-size:13px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:600;font-size:12px;letter-spacing:.02em}
.pill-up{background:rgba(242,109,91,.14);color:var(--coral);border:1px solid rgba(242,109,91,.35)}
.scroll-cue{
  position:absolute;right:0;bottom:-20px;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--mute);font-size:11px;letter-spacing:.2em;text-transform:uppercase
}
.scroll-cue svg{width:18px;height:18px;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- generic section ---------- */
.section{
  max-width:var(--maxw);margin:0 auto;
  padding:140px var(--pad) 60px;
  position:relative;
}
.section-narrow{max-width:860px}
.section-head{max-width:880px;margin-bottom:56px}
.section-head h2{margin:18px 0 20px}
.section-dark{background:linear-gradient(180deg,transparent, var(--section-dark-bg) 18%, var(--section-dark-bg) 82%, transparent);max-width:none;padding-left:0;padding-right:0}
.section-dark>.section-head,.section-dark>.chart,.section-dark>.caption{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.caption{margin-top:20px;color:var(--mute);font-size:13px;max-width:720px}

/* ---------- national line chart ---------- */
.chart-wrap-line{
  background:var(--chart-bg);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;
}
.chart-line{width:100%;min-height:380px}

/* ---------- map ---------- */
.map-controls{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;
}
.chip{
  padding:11px 18px;
  border:1px solid var(--line-2);
  border-radius:999px;
  font-size:13px;font-weight:500;
  color:var(--ink-2);
  transition:all .25s ease;
}
.chip:hover{border-color:var(--amber);color:var(--ink)}
.chip.active{background:var(--amber);color:#fff;border-color:var(--amber);font-weight:600}
:root[data-theme="light"] .chip.active{color:#fff}

.map-grid{
  display:grid;gap:32px;
  grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
}
@media (max-width:900px){ .map-grid{grid-template-columns:1fr} }

.map-stage{position:relative}
.chart-map{width:100%;min-height:520px}
.chart-map svg{width:100%;height:auto;max-height:620px}
.chart-map path.state{transition:fill .6s cubic-bezier(.2,.7,.1,1), stroke .2s;stroke:var(--line-2)}
.chart-map path.state:hover,
.chart-map path.state.pinned{stroke:var(--ink);stroke-width:1.6;cursor:pointer}

.legend{
  display:flex;align-items:center;gap:14px;margin-top:18px;color:var(--mute);font-size:12px;
  font-variant-numeric:tabular-nums;
}
.legend .bar{flex:1;max-width:320px;height:10px;border-radius:4px}

.state-card{
  position:sticky;top:100px;align-self:start;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card-bg);
  min-height:420px;
}
.state-card-hint{color:var(--mute);font-size:14px}
.state-card h3{font-size:30px;margin:2px 0 4px;color:var(--ink)}
.state-card .state-abbr{display:inline-block;padding:3px 9px;font-size:11px;letter-spacing:.08em;border-radius:4px;background:var(--amber);color:#111;font-weight:700;margin-bottom:8px}
.state-card .rank{color:var(--mute);font-size:13px;margin-bottom:22px}
.state-card dl{display:grid;grid-template-columns:1fr auto;gap:10px 18px;font-size:14px;margin:0}
.state-card dt{color:var(--mute)}
.state-card dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.state-card .spark{margin-top:22px;height:58px;width:100%}

/* tooltip */
.tooltip{
  position:fixed;z-index:200;pointer-events:none;
  padding:10px 14px;border-radius:10px;
  background:var(--tip-bg);border:1px solid var(--line-2);
  font-size:12px;color:var(--ink);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transform:translate(-50%,calc(-100% - 14px));
  opacity:0;transition:opacity .15s ease;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  box-shadow:0 10px 40px rgba(0,0,0,.28);
}
.tooltip.visible{opacity:1}
.tooltip strong{color:var(--amber)}

/* ---------- rankings ---------- */
.rankings-grid{
  display:grid;gap:40px;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
}
@media (max-width:900px){ .rankings-grid{grid-template-columns:1fr} }

.chart-bars{width:100%;min-height:520px}
.chart-bars .bar-row rect.track{fill:var(--track)}
.chart-bars .bar-row rect.bar{fill:var(--amber);transition:width .6s cubic-bezier(.2,.7,.1,1), fill .3s}
.chart-bars .bar-row.top rect.bar{fill:var(--coral)}
.chart-bars text{fill:var(--ink-2);font-size:13px;font-variant-numeric:tabular-nums}
.chart-bars .state-name{fill:var(--ink);font-weight:500}
.chart-bars .bar-value{fill:var(--amber);font-weight:600}
.chart-bars .bar-row.top .bar-value{fill:var(--coral)}

.rankings-table-wrap{max-height:620px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.rankings-table{width:100%;border-collapse:collapse;font-size:14px}
.rankings-table th,.rankings-table td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--line)}
.rankings-table th{background:var(--bg-2);color:var(--mute);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;position:sticky;top:0;z-index:1}
.rankings-table td.num,.rankings-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.rankings-table tr.top td:first-child,.rankings-table tr.top td:last-child{color:var(--coral);font-weight:600}
.rankings-table tr:hover td{background:var(--track)}

/* ---------- scatter ---------- */
.chart-scatter{width:100%;min-height:560px;max-width:var(--maxw);margin:0 auto}
.chart-scatter .bubble{fill:var(--amber);fill-opacity:.55;stroke:var(--amber-2);stroke-width:1;transition:fill-opacity .2s, transform .2s}
.chart-scatter .bubble:hover{fill-opacity:.9;cursor:pointer}
.chart-scatter .bubble.hi{fill:var(--coral);stroke:#ffb3a6}
.chart-scatter .bubble.lo{fill:var(--teal);stroke:#7ff0df}
.chart-scatter text{fill:var(--ink-2);font-size:12px}
.chart-scatter .axis path,.chart-scatter .axis line{stroke:var(--line-2)}
.chart-scatter .annotation{fill:var(--ink);font-size:13px;font-weight:500}
.chart-scatter .annotation-sub{fill:var(--mute);font-size:11px}
.chart-scatter .state-label{fill:var(--ink);font-size:11px;font-weight:500;pointer-events:none}
.chart-scatter .guide{stroke:var(--line-2);stroke-dasharray:2 4}

/* ---------- cost ---------- */
.cost-grid{
  display:grid;gap:32px;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
}
@media (max-width:900px){ .cost-grid{grid-template-columns:1fr} }
.chart-treemap{width:100%;min-height:520px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2)}
.chart-treemap .tm-rect{stroke:var(--tm-stroke);stroke-width:1.5;transition:opacity .2s}
.chart-treemap .tm-rect:hover{opacity:.85;cursor:pointer}
.chart-treemap text{fill:#111;font-weight:600;font-size:12px;pointer-events:none}
.chart-treemap text.sub{font-weight:500;font-size:10px;fill:rgba(0,0,0,.7)}
:root[data-theme="light"] .chart-treemap text{fill:#1a1612}
:root[data-theme="light"] .chart-treemap text.sub{fill:rgba(26,22,18,.72)}
.chart-costbars{width:100%;min-height:520px}
.chart-costbars .bar{fill:var(--amber)}
.chart-costbars text{fill:var(--ink-2);font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- slope ---------- */
.chart-slope{width:100%;min-height:620px}
.chart-slope .slope-line{fill:none;stroke:var(--slope-line);stroke-width:1.4;transition:stroke-width .2s,stroke .2s}
.chart-slope .slope-line:hover{stroke:var(--amber);stroke-width:3}
.chart-slope .slope-line.hi{stroke:var(--coral);stroke-width:2.2}
.chart-slope .slope-dot{fill:var(--amber)}
.chart-slope .slope-dot.hi{fill:var(--coral)}
.chart-slope text{fill:var(--ink-2);font-size:12px;font-variant-numeric:tabular-nums}
.chart-slope .yr-label{fill:var(--mute);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.chart-slope .state-lbl{fill:var(--ink);font-size:11px}

/* ---------- methodology ---------- */
.method-body p{color:var(--ink-2);font-size:15px;line-height:1.7;margin:0 0 18px}
.sources{margin:20px 0 24px;display:grid;gap:10px}
.sources li{color:var(--mute);font-size:13px;padding-left:16px;position:relative}
.sources li::before{content:"→";position:absolute;left:0;color:var(--amber)}
.credit{color:var(--mute);font-size:13px;margin-top:30px}

/* ---------- footer ---------- */
.footer{margin-top:80px;border-top:1px solid var(--line);background:var(--bg-2)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:52px var(--pad) 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.footer-brand{display:flex;gap:14px;align-items:center}
.footer-brand p{color:var(--mute);font-size:13px;margin:4px 0 0}
.footer-share{font-size:13px;color:var(--mute)}
.footer-share p{margin:0 0 10px}
.footer-share a{display:inline-block;padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;margin-right:8px;color:var(--ink-2);transition:all .2s}
.footer-share a:hover{border-color:var(--amber);color:var(--amber)}
.footer-fine{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 32px;color:var(--mute);font-size:12px}

/* ---------- reveal anims ---------- */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.1,1)}
.reveal-stagger>*{opacity:0;transform:translateY(14px)}
.reveal-stagger.in>*{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.1,1)}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.15s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.25s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important}
  .scroll-cue svg{animation:none}
  html{scroll-behavior:auto}
}

@media (max-width:700px){
  .section{padding:90px var(--pad) 30px}
  .hero{padding:120px var(--pad) 80px}
  .hero-metrics{margin-top:36px}
  .metric-num.big{font-size:44px}
  .rankings-table-wrap{max-height:520px}
}