/* ============================================================
   BASE — reset, typography scale, shared primitives
   thecouchcupholder.com

   Everything here is door-agnostic in STRUCTURE but draws every
   value from tokens.css. Swapping tokens.css swaps the world.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.021em;line-height:1.08;margin:0}
h1{font-size:clamp(2.5rem,8.2vw,4.35rem)}
h2{font-size:clamp(1.95rem,5.6vw,3.05rem)}
h3{font-size:clamp(1.18rem,3vw,1.42rem);line-height:1.24}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.shell{width:var(--shell);margin-inline:auto}
section{padding-block:var(--gut)}
:focus-visible{outline:2.5px solid var(--terracotta);outline-offset:3px;border-radius:3px}

/* eyebrow — encodes the visitor-ladder question each section answers */
.eyebrow{
  font-size:.685rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.15rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--rule);max-width:110px}

.lede{font-size:clamp(1.05rem,2.6vw,1.235rem);color:var(--ink-soft);max-width:39ch;line-height:1.56}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-size:1.015rem;font-weight:600;letter-spacing:-.005em;
  padding:1.02rem 1.85rem;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--terracotta);color:#fff}
.btn-primary:hover{background:var(--terracotta-deep)}
.btn-ink{background:var(--ink);color:var(--paper-lift)}
.btn-ink:hover{background:#12100E}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper-lift)}
.btn-full{width:100%}
.textlink{
  font-size:.95rem;font-weight:500;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.textlink:hover{color:var(--ink);border-color:var(--ink)}
.micro{font-size:.83rem;color:var(--ink-faint);line-height:1.5;letter-spacing:.005em}
/* ============================================================
   SELF-HOSTED FONTS
   Variable woff2. No Google Fonts CDN — one less third-party
   connection, better LCP, and no CSP hole to open.
   Download the variable files into /src/fonts/ before launch:
     Fraunces  -> fraunces-var.woff2
     Inter     -> inter-var.woff2
   Until then the stack falls back to Georgia / system sans.
   ============================================================ */
@font-face{
  font-family:'Fraunces';
  src:url('/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight:400 600;
  font-display:swap;
  font-style:normal;
}
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight:400 600;
  font-display:swap;
  font-style:normal;
}