/* Geek n Wine — Editorial single-page Home. Layers on colors_and_type.css + kit.css */

/* ============ TYPE SETS (swappable via Tweaks) ============ */
.type-root{ font-family:var(--font-ui); color:var(--fg-1); }
.type-root[data-type="editorial"]{
  --font-display:'Playfair Display', Georgia, serif;
  --font-ui:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;
}
.type-root[data-type="modern"]{
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-ui:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}
.type-root[data-type="classic"]{
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-ui:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}
.type-root :is(h1,h2,h3){ font-family:var(--font-display); }
.type-root .ahead .nm{ font-family:var(--font-display); font-weight:700; }
/* serif sets: looser tracking + italic accents read more "wine list" */
.type-root:not([data-type="modern"]) :is(h1,h2){ letter-spacing:-.005em; }
.type-root:not([data-type="modern"]) .hero-ed h1 em,
.type-root:not([data-type="modern"]) .surprise-band h2 em{ font-style:italic; font-weight:700; }
.type-root[data-type="classic"] :is(h1,h2,h3){ font-weight:700; }
.type-root[data-type="classic"] .hero-ed h1{ font-weight:700; }

body{ position:relative; }
/* faint dotted "ledger" texture on the cellar-dark field */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(251,246,236,.05) 1px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.25) 60%, transparent);
}
#root{ position:relative; z-index:1; }

.ed-wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
.section2{ padding:72px 0; }
.divline{ height:1px; background:var(--ink-700); }

/* ---------- HERO (centered editorial) ---------- */
.hero-ed{ text-align:center; padding:60px 0 26px; position:relative; }
.hero-ed .pill-live{ margin:0 auto; }
.hero-ed h1{
  font-size:clamp(48px,7.6vw,100px); font-weight:800; letter-spacing:-.015em;
  line-height:.98; margin:22px auto 16px;
}
.type-root[data-type="modern"] .hero-ed h1{ font-weight:700; letter-spacing:-.035em; line-height:.94; }
.hero-ed h1 em{ font-style:normal; color:var(--volt-500); }
.hero-ed .tagline{
  font-size:clamp(17px,2.3vw,22px); color:var(--fg-2); line-height:1.45;
  max-width:42ch; margin:0 auto;
}

.boxstage{ position:relative; width:min(420px,80vw); margin:40px auto 0; }
.boxstage .glow{
  position:absolute; inset:-14% -10%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 46%, var(--volt-glow), transparent 60%);
  filter:blur(8px); opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .boxstage .glow{ animation:breathe 5.5s var(--ease-in-out) infinite; }
}
@keyframes breathe{ 0%,100%{ opacity:.4; } 50%{ opacity:.72; } }
.boxstage .box{ position:relative; z-index:1; box-shadow:var(--shadow-lg); }

/* ---------- RESERVE BAR (boxes remaining, draining) ---------- */
.reserve2{ width:min(540px,92vw); margin:30px auto 0; }
.reserve2 .head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--fg-2); margin-bottom:10px;
}
.reserve2 .head .big{ color:var(--fg-1); font-weight:700; }
.reserve2 .head .lab{ text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3); font-size:11px; }
.reserve2 .bar{
  height:13px; border-radius:99px; background:var(--ink-700);
  border:1px solid var(--ink-600); overflow:hidden; position:relative;
}
.reserve2 .bar i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--wine-700),var(--wine-500));
  border-right:2px solid var(--volt-500); transition:width .5s var(--ease-out);
}
.reserve2 .sub{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--fg-3);
}
.reserve2.low .bar i{ background:linear-gradient(90deg,#7a0c2a,var(--danger)); }
.reserve2.low .sub .state{ color:#E8746F; }

.cta-row{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.timerbar.center{ justify-content:center; }

/* ---------- SURPRISE BAND (strong secondary) ---------- */
.surprise-band{
  position:relative; border-radius:22px; overflow:hidden;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(205,255,74,.07), transparent 55%),
    var(--ink-800);
  border:1px solid var(--ink-700); box-shadow:var(--shadow-volt);
  padding:38px 40px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center;
}
.surprise-band h2{ font-size:clamp(26px,3.6vw,38px); font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:14px 0 14px; }
.surprise-band h2 em{ font-style:normal; color:var(--volt-500); }
.surprise-band p{ color:var(--fg-2); font-size:15.5px; line-height:1.6; margin:0 0 18px; max-width:46ch; }
.odds-wrap{}
.odds-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.odds{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.odds .cell{
  aspect-ratio:3/4; border-radius:9px; background:var(--ink-700);
  border:1px solid var(--ink-600); display:flex; align-items:center; justify-content:center; position:relative;
}
.odds .cell .lid{ position:absolute; top:24%; left:8%; right:8%; height:1.5px; background:rgba(0,0,0,.4); }
.odds .cell.hit{
  background:rgba(205,255,74,.1); border-color:var(--volt-500);
  box-shadow:0 0 20px -3px var(--volt-glow);
}
@media (prefers-reduced-motion: no-preference){
  .odds .cell.hit{ animation:hitpulse 2.6s var(--ease-in-out) infinite; }
}
@keyframes hitpulse{ 0%,100%{ box-shadow:0 0 16px -4px var(--volt-glow);} 50%{ box-shadow:0 0 26px 0 var(--volt-glow);} }

/* ---------- SECTION HEAD ---------- */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:26px; }
.sec-head h2{ font-size:clamp(28px,4vw,42px); font-weight:700; letter-spacing:-.02em; margin:10px 0 0; }
.sec-head .sub{ color:var(--fg-2); font-size:15px; margin:8px 0 0; }

/* ---------- STEPS (how it works) ---------- */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ---------- LINEUP ACCORDION ---------- */
.acc2{ border:1px solid var(--ink-700); border-radius:18px; overflow:hidden; background:var(--ink-800); }
.arow{ border-bottom:1px solid var(--ink-700); }
.arow:last-child{ border-bottom:0; }
.ahead{ display:flex; align-items:center; gap:18px; padding:19px 24px; cursor:pointer; transition:background .15s; }
.ahead:hover{ background:var(--ink-700); }
.ahead .no{ font-family:var(--font-mono); font-size:12px; color:var(--fg-3); width:82px; flex:none; letter-spacing:.03em; }
.ahead .nm{ font-size:20px; font-weight:600; letter-spacing:-.01em; flex:1; }
.ahead .rg{ font-family:var(--font-mono); font-size:12px; color:var(--fg-3); letter-spacing:.03em; white-space:nowrap; }
.ahead .chev{ transition:transform .25s var(--ease-out); color:var(--fg-3); display:flex; flex:none; }
.arow.open .ahead{ background:var(--ink-700); }
.arow.open .chev{ transform:rotate(180deg); }
.abody{ overflow:hidden; max-height:0; transition:max-height .32s var(--ease-out); }
.arow.open .abody{ max-height:340px; }
.abody-in{ padding:4px 24px 24px 124px; }
.abody-in p{ color:var(--fg-1); font-size:15.5px; line-height:1.65; margin:0 0 16px; max-width:62ch; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- PROVENANCE ---------- */
.prov{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.prov h2{ font-size:clamp(26px,3.4vw,36px); font-weight:700; letter-spacing:-.02em; line-height:1.1; margin:12px 0 14px; }
.prov p{ color:var(--fg-2); font-size:16px; line-height:1.65; margin:0; max-width:46ch; }
.statgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stat{ background:var(--ink-800); border:1px solid var(--ink-700); border-radius:14px; padding:20px; }
.stat b{ font-family:var(--font-mono); font-size:34px; font-weight:700; letter-spacing:-.01em; display:block; line-height:1; }
.stat span{ display:block; margin-top:8px; font-size:13px; color:var(--fg-2); line-height:1.4; }

/* ---------- sticky claim mini-bar ---------- */
.claimbar{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  background:rgba(18,6,9,.86); backdrop-filter:blur(14px); border-top:1px solid var(--ink-700);
  transform:translateY(120%); transition:transform .35s var(--ease-out);
}
.claimbar.show{ transform:none; }
.claimbar-in{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:68px; }
.claimbar .l{ display:flex; align-items:center; gap:14px; font-size:14px; color:var(--fg-2); }
.claimbar .l b{ color:var(--fg-1); }

/* ---------- WINE CRATE (hero object) ---------- */
.crate{
  position:relative; overflow:hidden; display:block;
  background:radial-gradient(120% 95% at 50% 0%, #381220, #1d0811 58%, #140510);
  border:1px solid #4a1322; box-shadow:var(--shadow-lg);
}
.crate-pill{ position:absolute; top:14px; right:14px; z-index:5; }
.crate-shade{ position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 22px 44px -20px rgba(0,0,0,.85), inset 0 -8px 26px -8px rgba(0,0,0,.55);
}
.crate-bottles{
  position:absolute; left:9%; right:9%; top:13%; height:62%; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.wbottle{
  width:13%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.55));
}
.wcap{ width:54%; height:12%; border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,var(--wine-400),var(--wine-700)); box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.wneck{ width:40%; height:12%; background:linear-gradient(100deg,#0b1c12,#15321e 50%,#091509); }
.wbody{ width:100%; height:76%; position:relative;
  border-radius:46% 46% 14% 14% / 20% 20% 5% 5%;
  background:linear-gradient(100deg,#0a1810 0%,#163420 42%,#0d1e13 62%,#070f08 100%);
}
.wbody::after{ content:""; position:absolute; left:17%; top:13%; width:11%; height:72%; border-radius:99px;
  background:linear-gradient(180deg,rgba(196,232,206,.55),rgba(196,232,206,0)); }
.wbottle.gold .wcap{
  background:linear-gradient(180deg,var(--gold-300),var(--gold-600));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px -2px var(--gold-500);
}
@media (prefers-reduced-motion: no-preference){
  .wbottle.gold .wcap{ animation:capglow 2.8s var(--ease-in-out) infinite; }
}
@keyframes capglow{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 10px -3px var(--gold-500);} 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 18px 0 var(--gold-500);} }
.crate-front{
  position:absolute; left:0; right:0; bottom:0; height:30%; z-index:3;
  background:linear-gradient(180deg,#460f21,#280910);
  border-top:2px solid rgba(0,0,0,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.crate-front::before{ content:""; position:absolute; left:8%; right:8%; top:34%; height:1px; background:rgba(0,0,0,.32); }
.crate-mk{ filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); position:relative; z-index:1; }
.crate-sku{ font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(251,246,236,.55); position:relative; z-index:1; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .surprise-band{ grid-template-columns:1fr; gap:28px; padding:30px 26px; }
  .steps3{ grid-template-columns:1fr; }
  .prov{ grid-template-columns:1fr; gap:28px; }
  .ahead .rg{ display:none; }
  .abody-in{ padding-left:24px; }
  .claimbar .l .meta-hide{ display:none; }
}

/* ============ LIGHT THEME (parchment) ============ */
.type-root{ background:var(--bg); min-height:100vh; }
/* wordmark swap */
.wm-dark{ display:none; }
html[data-theme="light"] .wm-light{ display:none; }
html[data-theme="light"] .wm-dark{ display:inline-block; }

html[data-theme="light"]{
  /* remap dark surface scale + text roles to warm parchment */
  --ink-900: var(--parch-100);
  --ink-800: var(--parch-50);
  --ink-700: var(--parch-200);
  --ink-600: var(--parch-300);
  --ink-500: var(--parch-400);
  --fg-1: var(--fg-on-light-1);
  --fg-2: var(--fg-on-light-2);
  --fg-3: var(--fg-on-light-3);
  --bg: var(--parch-100);
  --surface: var(--parch-50);
  --surface-2: var(--parch-200);
  --border: var(--parch-300);
}
html[data-theme="light"] body{ background:var(--parch-100); }
html[data-theme="light"] .grain{
  background-image:radial-gradient(rgba(27,11,17,.05) 1px, transparent 1.4px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.18) 60%, transparent);
}
/* translucent chrome over parchment */
html[data-theme="light"] .nav{ background:rgba(251,246,236,.82); border-bottom-color:var(--parch-300); }
html[data-theme="light"] .claimbar{ background:rgba(251,246,236,.9); border-top-color:var(--parch-300); }
html[data-theme="light"] .cart{ box-shadow:var(--shadow-sm); }

/* volt stays legible on light: typographic emphasis goes wine; surprise signals become solid volt chips */
html[data-theme="light"] .hero-ed h1 em,
html[data-theme="light"] .surprise-band h2 em{ color:var(--wine-600); }
html[data-theme="light"] .kicker.volt{ color:var(--wine-600); }
html[data-theme="light"] .step .n{ color:var(--wine-600); }
.stat-volt{ color:var(--volt-500); }
html[data-theme="light"] .stat-volt{ color:var(--wine-600); }
html[data-theme="light"] .pill-live,
html[data-theme="light"] .pill-hidden{ background:var(--volt-500); color:#1B0B11; border-color:var(--volt-600); }
html[data-theme="light"] .pill-live .pdot,
html[data-theme="light"] .pill-hidden .pdot{ background:#1B0B11; box-shadow:none; }
html[data-theme="light"] .pill-low{ background:rgba(224,169,59,.18); }
html[data-theme="light"] .odds .cell.hit{ background:rgba(166,214,43,.28); border-color:var(--volt-600); }
/* inline volt-drop glyph must flip dark on solid-volt pills / tinted cells in light theme */
html[data-theme="light"] .pill-hidden svg path{ fill:#1B0B11; }
html[data-theme="light"] .odds .cell.hit svg path{ fill:#3a4d08; }
/* surprise band keeps its volt ring but warms its fill */
html[data-theme="light"] .surprise-band{
  background:radial-gradient(120% 140% at 85% 0%, rgba(166,214,43,.16), transparent 55%), var(--parch-50);
}
/* theme toggle button */
.theme-btn{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
  background:var(--ink-700); border:1px solid var(--border); border-radius:999px; color:var(--fg-1);
  cursor:pointer; transition:border-color .18s var(--ease-out);
}
.theme-btn:hover{ border-color:var(--wine-500); }