/* ════════════════════════════════════════════════════════════
   DEGEN WHISKEY — tokenized cask ownership
   Antique-gold embroidery on charred black · heritage × on-chain
   ════════════════════════════════════════════════════════════ */

:root{
  --void:#0a0705;          /* charred black (the cap) */
  --void-2:#0d0a07;
  --char:#14100a;          /* oak panel */
  --char-2:#191309;

  --gold:#c9a24b;          /* embroidery gold */
  --gold-lite:#ecd39a;     /* highlight thread */
  --gold-deep:#8a6d2f;     /* shadow gold */

  --cream:#e9dfca;         /* label parchment (body text) */
  --cream-dim:#a99d80;     /* muted */

  --amber:#e0912f;         /* whiskey pour (LIVE / accent) */
  --ink:#070502;           /* text on gold */

  --line:rgba(201,162,75,0.18);   /* gold hairline */
  --line-soft:rgba(201,162,75,0.10);

  --f-display:"Cinzel Decorative", Georgia, serif;
  --f-title:"Cinzel", Georgia, serif;
  --f-body:"Fraunces", Georgia, "Times New Roman", serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw:1140px;
  --pad:clamp(20px,5vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--void);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--f-body);
  font-optical-sizing:auto;
  color:var(--cream);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(201,162,75,0.06), transparent 60%),
    var(--void);
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--gold); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ── Utility type ─────────────────────────────────────────── */
.mono{ font-family:var(--f-mono); }
.gold{ color:var(--gold); }
.gold-lite{ color:var(--gold-lite); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold-deep);
  display:inline-block;
}
.eyebrow .num{ color:var(--cream-dim); }

/* ════════════════════════════════════════════════════════════
   BRAND (footer wordmark)
   ════════════════════════════════════════════════════════════ */
.brand{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.06em;
  color:var(--gold-lite);
  text-shadow:0 1px 6px rgba(0,0,0,.7);
  display:flex; align-items:center; gap:11px;
}
.brand .seal{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--gold);
  box-shadow:inset 0 0 0 2.5px var(--void), 0 0 12px rgba(201,162,75,.5);
  flex:none;
}
/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-mono);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 26px;
  border:1px solid var(--gold);
  color:var(--gold-lite);
  background:rgba(10,7,5,.4);
  transition:background .22s, color .22s, transform .22s, box-shadow .22s;
  cursor:pointer;
}
.btn .arw{ transition:transform .22s; }
.btn:hover{ background:rgba(201,162,75,.12); box-shadow:0 0 0 1px var(--gold), 0 12px 30px -12px rgba(201,162,75,.5); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-primary{
  background:linear-gradient(180deg,var(--gold-lite),var(--gold));
  color:var(--ink);
  border-color:var(--gold-lite);
  font-weight:700;
}
.btn-primary:hover{
  background:linear-gradient(180deg,#f4e2b6,var(--gold-lite));
  color:var(--ink);
  box-shadow:0 14px 34px -12px rgba(201,162,75,.7);
}
.btn:focus-visible, a:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold-lite); outline-offset:3px;
}

/* ════════════════════════════════════════════════════════════
   HERO  ·  the hat fading into black, gold knockout headline
   ════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  --band:clamp(320px,50vh,540px);   /* height of the visible cap image */
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:calc(var(--band) + clamp(20px,4vh,52px));
  padding-bottom:clamp(48px,8vh,96px);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{      /* the embroidered cap — a band at the top, logo left clear */
  content:""; position:absolute; top:0; left:0; right:0; height:var(--band); z-index:-2;
  background:url(../images/degenhat.jpg) 50% 30% / cover no-repeat;
}
.hero::after{       /* fade the bottom of the cap into the void so text lands on black */
  content:""; position:absolute; top:0; left:0; right:0; height:var(--band); z-index:-1;
  background:linear-gradient(180deg,
    rgba(10,7,5,0)   0%,
    rgba(10,7,5,0)  42%,
    rgba(10,7,5,.35) 66%,
    rgba(10,7,5,.82) 87%,
    var(--void)     100%);
}

.hero-inner{ position:relative; }
.hero-eyebrow{
  font-family:var(--f-mono);
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-lite);
  text-shadow:0 1px 8px rgba(0,0,0,.9);
  margin-bottom:22px;
}
.hero h1{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(1.95rem,7.8vw,6.6rem);
  line-height:.96;
  letter-spacing:.01em;
  text-transform:uppercase;
  overflow-wrap:break-word;
  max-width:13ch;
  color:var(--gold-lite);
  /* clear knockout: layered dark halo keeps the gold legible over the cap */
  text-shadow:
    0 1px 0   rgba(0,0,0,.85),
    0 2px 2px rgba(0,0,0,.8),
    0 0 26px  rgba(0,0,0,.85),
    0 0 60px  rgba(0,0,0,.6);
}
.hero h1 .amber{ color:var(--gold); display:block; margin-top:.06em; }
.hero-sub{
  margin-top:26px;
  max-width:44ch;
  font-size:clamp(1.05rem,1.9vw,1.32rem);
  color:var(--cream);
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-trust{
  margin-top:30px;
  font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-dim);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.hero-trust .pip{ width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber); }

/* ════════════════════════════════════════════════════════════
   TICKER
   ════════════════════════════════════════════════════════════ */
.ticker{
  border-block:1px solid var(--line);
  background:var(--void-2);
  overflow:hidden; white-space:nowrap;
  padding:15px 0;
}
.ticker-track{ display:inline-flex; gap:0; animation:slide 42s linear infinite; }
.ticker-track span{
  font-family:var(--f-mono);
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim);
  padding-inline:2px;
}
.ticker .star{ color:var(--gold); margin-inline:20px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ════════════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ════════════════════════════════════════════════════════════ */
.section{ padding-block:clamp(72px,11vh,140px); position:relative; }
.section-head{ margin-bottom:clamp(34px,5vh,58px); }
.section-title{
  font-family:var(--f-title);
  font-weight:600;
  font-size:clamp(2rem,5.2vw,3.6rem);
  line-height:1.02;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--cream);
  margin-top:20px;
}
.section-title em{ font-style:normal; color:var(--gold); }
.lead{ font-size:clamp(1.05rem,1.7vw,1.28rem); max-width:60ch; color:var(--cream); }
.lead + .lead{ margin-top:1.1em; }
.muted{ color:var(--cream-dim); }

.rule{ height:1px; background:var(--line-soft); border:0; }

/* ── THESIS ───────────────────────────────────────────────── */
.thesis{ background:linear-gradient(180deg,var(--void),var(--void-2)); }
.thesis .section-title{ max-width:20ch; }
.thesis-grid{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:14px; }
@media(min-width:820px){ .thesis-grid{ grid-template-columns:1.1fr .9fr; gap:56px; } }

/* ── STEPS (Mint → Age → Redeem) ──────────────────────────── */
.steps{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line); }
@media(min-width:800px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  background:var(--void); padding:clamp(28px,3.4vw,44px);
  position:relative; transition:background .3s;
}
.step:hover{ background:var(--char); }
.step-num{
  font-family:var(--f-display); font-weight:700;
  font-size:1rem; letter-spacing:.1em;
  color:var(--gold-deep);
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:22px;
}
.step-num b{ color:var(--gold); font-size:2.6rem; line-height:1; }
.step h3{
  font-family:var(--f-title); font-weight:600; text-transform:uppercase;
  font-size:1.5rem; letter-spacing:.03em; color:var(--cream);
  margin-bottom:12px;
}
.step p{ color:var(--cream-dim); font-size:1rem; }
.step p b{ color:var(--cream); font-weight:600; }

/* ── CASK SPEC TICKET ─────────────────────────────────────── */
.cask{ background:var(--void-2); }
.cask-wrap{ display:grid; gap:36px; align-items:center; }
@media(min-width:900px){ .cask-wrap{ grid-template-columns:1fr 1fr; gap:64px; } }

.ticket{
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(201,162,75,.03) 0 2px, transparent 2px 5px),
    var(--char);
  padding:clamp(24px,3vw,36px);
  position:relative;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.ticket::before, .ticket::after{
  content:""; position:absolute; width:14px; height:14px;
  border:1px solid var(--gold-deep);
}
.ticket::before{ top:10px; left:10px; border-right:0; border-bottom:0; }
.ticket::after{ bottom:10px; right:10px; border-left:0; border-top:0; }
.ticket-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:16px; margin-bottom:8px;
  border-bottom:1px dashed var(--line);
}
.ticket-head .id{ font-family:var(--f-display); font-weight:700; color:var(--gold-lite); font-size:1.15rem; letter-spacing:.04em; }
.ticket-head .tag{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber); padding:4px 9px; border-radius:2px;
}
.spec{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-family:var(--f-mono); font-size:.82rem; }
.spec:last-child{ border-bottom:0; }
.spec .k{ color:var(--cream-dim); letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; }
.spec .v{ color:var(--cream); text-align:right; }
.spec .v.hi{ color:var(--gold-lite); }

/* ── WHY (three arguments) ────────────────────────────────── */
.why-grid{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line); }
@media(min-width:760px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
.why-card{ background:var(--void); padding:clamp(28px,3.2vw,40px); }
.why-card .mark{ font-family:var(--f-display); font-weight:900; font-size:2.2rem; color:var(--gold); line-height:1; }
.why-card h3{ font-family:var(--f-title); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:1.3rem; margin:18px 0 10px; color:var(--cream); }
.why-card p{ color:var(--cream-dim); font-size:.98rem; }

/* ── DROPS ────────────────────────────────────────────────── */
.drop{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  padding:26px 4px; border-bottom:1px solid var(--line-soft);
}
.drop:first-child{ border-top:1px solid var(--line-soft); }
.drop .no{ font-family:var(--f-mono); color:var(--gold-deep); letter-spacing:.1em; font-size:.85rem; }
.drop .name{ font-family:var(--f-title); font-weight:600; font-size:clamp(1.15rem,2.4vw,1.7rem); text-transform:uppercase; letter-spacing:.02em; color:var(--cream); }
.drop .sub{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); margin-top:5px; }
.state{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding:6px 12px; border:1px solid currentColor; white-space:nowrap; }
.state.live{ color:var(--amber); }
.state.filling{ color:var(--gold-lite); }
.state.soon{ color:var(--cream-dim); }
.state.sold{ color:var(--gold-deep); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
details{ border-bottom:1px solid var(--line-soft); }
summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 4px;
  font-family:var(--f-title); font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(1.05rem,2vw,1.35rem); color:var(--cream);
}
summary::-webkit-details-marker{ display:none; }
summary .plus{ font-family:var(--f-mono); color:var(--gold); font-size:1.4rem; transition:transform .25s; flex:none; }
details[open] summary .plus{ transform:rotate(45deg); }
details p{ padding:0 4px 26px; max-width:70ch; color:var(--cream-dim); }
details p a{ color:var(--gold-lite); text-decoration:underline; text-underline-offset:3px; }

/* ── FINAL CTA ────────────────────────────────────────────── */
.join{
  text-align:center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(201,162,75,.09), transparent 62%),
    linear-gradient(180deg,var(--void-2),var(--void));
  border-top:1px solid var(--line);
}
.join h2{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.3rem,7vw,5rem); line-height:.98; letter-spacing:.01em;
  color:var(--gold-lite);
  text-shadow:0 2px 30px rgba(201,162,75,.18);
}
.join .lead{ margin:22px auto 34px; text-align:center; }
.join-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding-block:44px; }
.foot-grid{ display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; align-items:center; }
.foot .brand{ font-size:1.15rem; }
.foot-links{ display:flex; gap:24px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); }
.foot-links a:hover{ color:var(--gold-lite); }
.foot-legal{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; line-height:1.8;
  color:var(--cream-dim); max-width:80ch;
}
.foot-legal b{ color:var(--gold-deep); }

/* ════════════════════════════════════════════════════════════
   MOTION  ·  scroll reveal (respects reduced-motion)
   ════════════════════════════════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms); }
.reveal.in{ opacity:1; transform:none; }

.hero-eyebrow, .hero h1, .hero-sub, .hero-cta, .hero-trust{ opacity:0; transform:translateY(16px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1{ animation-delay:.12s; }
.hero-sub{ animation-delay:.26s; }
.hero-cta{ animation-delay:.38s; }
.hero-trust{ animation-delay:.5s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ── Responsive niceties ──────────────────────────────────── */
@media(max-width:640px){
  .brand{ font-size:1.1rem; }
  .hero-eyebrow{ letter-spacing:.14em; font-size:.62rem; }
  .drop{ grid-template-columns:1fr auto; }
  .drop .no{ display:none; }
}