/* LongestAsh marketing site — shared design system.
   Ported from the Claude Design project (48b9722b). Pure black + system sans.
   Ash Club has its own brass/serif chrome and does NOT load this file. */

:root{
  --bg:#000; --surface:#0d0d0d; --surface2:#0a0a0a;
  --red:#d93a3a; --red-hover:#e5534b; --red-bright:#ff6a60;
  --ink:#f5f5f5; --ink2:#d0d0d0; --muted:#8a8a8a; --faint:#6e6e6e;
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.08); --line3:rgba(255,255,255,.06);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--red-hover); text-decoration:none}
a:hover{color:var(--red-bright)}
img{max-width:100%}
::selection{background:var(--red); color:#fff}
input::placeholder{color:var(--faint)}
h1,h2,h3,p{margin:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px)}
.eyebrow{font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--red)}
.eyebrow.muted{color:var(--muted)}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; font-size:14px; letter-spacing:.04em; padding:16px 30px; border-radius:2px; min-height:48px; cursor:pointer; transition:border-color .3s ease,background .2s ease}
.btn-red{background:var(--red); color:#fff; font-weight:600; border:0}
.btn-red:hover{background:var(--red-hover); color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.2); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:rgba(255,255,255,.5); color:var(--ink)}

/* ---- Nav ---- */
.nav{position:sticky; top:0; z-index:20; background:rgba(0,0,0,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--wrap); margin:0 auto; padding:18px clamp(20px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:10px; min-height:44px; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 14px rgba(217,58,58,.35)}
.brand .word{font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.nav-links{display:flex; align-items:center; gap:clamp(16px,3vw,34px)}
.nav-link{font-size:13px; letter-spacing:.06em; color:var(--muted); padding:12px 0; border-bottom:1px solid transparent}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink); border-bottom-color:var(--red)}
.nav-get{font-size:13px; font-weight:600; letter-spacing:.04em; color:#fff; background:var(--red); padding:10px 18px; border-radius:2px}
.nav-get:hover{color:#fff; background:var(--red-hover)}
.burger{width:44px; height:44px; display:none; align-items:center; justify-content:center; cursor:pointer; background:none; border:0}
.menu{display:none; border-top:1px solid var(--line); padding:8px clamp(20px,4vw,48px) 24px; flex-direction:column}
.menu a{font-size:22px; font-weight:300; color:var(--muted); padding:16px 0; border-bottom:1px solid var(--line2)}
.menu a.active{color:var(--ink)}
.menu .nav-get{margin-top:20px; text-align:center; padding:16px; font-size:14px}
.nav.open .menu{display:flex}
@media (max-width:759px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* ---- Footer ---- */
.foot{background:#000}
.foot-word-row{border-top:1px solid var(--line); overflow:hidden}
.foot-word{max-width:1400px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(20px,4vw,48px) 0; display:flex; align-items:center; justify-content:center; font-size:clamp(48px,14.2vw,220px); font-weight:300; letter-spacing:-.03em; line-height:.82; color:#1c1c1c; white-space:nowrap; user-select:none}
.foot-word span{color:var(--red)}
.foot-row-wrap{border-top:1px solid var(--line)}
.foot-row{max-width:var(--wrap); margin:0 auto; padding:36px clamp(20px,4vw,48px); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
.foot-tag{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.foot-links{display:flex; flex-wrap:wrap; gap:24px}
.foot-links a{font-size:12px; color:var(--faint)}
.foot-links a:hover{color:var(--ink)}

/* ---- Age gate ---- */
.agegate{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.94); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px}
.agegate[hidden]{display:none}
.agegate .card{max-width:420px; text-align:center}
.agegate .mark{width:56px; height:56px; border-radius:50%; object-fit:cover; margin:0 auto 22px; display:block}
.agegate .mark.deny{background:#333; display:flex; align-items:center; justify-content:center; font-size:26px}
.agegate h2{font-size:26px; font-weight:300; letter-spacing:-.01em; color:var(--ink)}
.agegate p{margin-top:16px; font-size:14px; line-height:1.65; color:var(--muted)}
.agegate .row{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap}
.agegate .warn{margin-top:26px; font-size:11px; line-height:1.6; color:var(--faint)}
.agegate .deny{max-width:360px; text-align:center}