*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* E-Sumi — washi paper, ink, hanko-red accent (matches mixology.school globals) */
  --paper:#fbf7ef;--paper-d:#f4ecd9;--ink:#17130e;--muted:#574d3f;
  --accent:#b3372a;--accent-wash:rgba(179,55,42,.12);--lime:#767645;
  --line:#e6dcc6;--card:#fcf8f0;
  --gin:#8B9A6B;--whiskey:#6B4F3A;--rum:#B8860B;--agave:#767645;
  --vodka:#8A9BA8;--brandy:#9A7B4F;--vermouth:#a0463a;--amaro:#4A3728;--liqueur:#7B6B8A;
  --bitters:#3D3228;--fortified:#C4A574;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Satoshi','Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.55;min-height:100vh;overflow-x:hidden;
}
/* Washi substrate — the same scanned-paper sheet the rest of mixology.school uses,
   so the botellero reads as ink printed on one continuous sheet. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.9;
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 90% at 12% 0%, #fdf9f1 0%, transparent 55%),
    radial-gradient(120% 90% at 88% 100%, #f0e6cf 0%, transparent 60%),
    url("/brand/textures/paper-texture-01.png");
  background-size:auto,auto,cover;
  background-position:center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-blend-mode:normal,multiply,multiply;
}
a{color:inherit;text-decoration:none}
.shell{max-width:1080px;margin:0 auto;padding:0 24px 100px;position:relative;z-index:1}

.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 0;border-bottom:1px solid var(--line);gap:16px;flex-wrap:wrap
}
.logo{
  font-family:'Satoshi','Inter',system-ui,sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:-.02em
}
.logo-dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-link{
  font-size:.82rem;font-weight:600;color:var(--muted);padding:8px 14px;
  border-radius:100px;transition:color .2s,background .2s
}
.nav-link:hover,.nav-link.active{color:var(--ink);background:var(--card)}
.nav-cta{
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:100px;
  font-size:.78rem;font-weight:700;transition:transform .2s,background .2s
}
.nav-cta:hover{background:var(--accent);transform:translateY(-1px)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:100px;font-family:inherit;
  font-size:.88rem;font-weight:700;cursor:pointer;border:none;
  transition:transform .2s,box-shadow .2s,background .2s
}
.btn-primary{background:var(--accent);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--accent-wash)}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ghost{background:var(--card);color:var(--muted);border:1.5px solid var(--line);padding:8px 14px;font-size:.78rem}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn-ghost.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.sec-label{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px
}
.sec-title{
  font-family:'Satoshi','Inter',system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-.02em;line-height:1.15
}

.site-footer{
  padding:40px 0 48px;font-size:.78rem;color:var(--muted);
  border-top:1px solid var(--line);margin-top:48px
}

/* the animated brand mark, before the wordmark */
.logo{display:inline-flex;align-items:center;white-space:nowrap}
.brand-mark{display:block;width:32px;height:32px;margin-right:10px;border-radius:8px;flex:none}
/* on a phone the mark alone is the signature: the wordmark crowds the nav */
@media(max-width:560px){
  .brand-mark{width:30px;height:30px;margin-right:0}
  .logo,.bar-top .logo{font-size:0}
}