/* ============================================================
   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}
/* The UA's [hidden] rule is a plain `display:none`, so any class that sets display
   beats it and the element comes back. That is a silent, live-facing failure here:
   the review filter and the cart drawer both hide real content with the attribute,
   and a stray `display:` on .rev would put 72 off-topic reviews back into the
   couch-filtered view with nothing to catch it.

   The selector is repeated to raise specificity, not by accident. A single
   [hidden] ties with a one-class selector and then loses on source order, since
   sections.css loads after this file; !important alone doesn't settle a tie.
   Three attributes clear a `.rev-grid > .rev` style rule even when that rule is
   itself !important. Verified against all three cases in the browser. */
[hidden],[hidden][hidden][hidden]{display:none!important}
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}
figure{margin:0}
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}

/* skip link — first tab stop, visually hidden until focused */
.skip{
  position:absolute;left:.75rem;top:-3rem;z-index:100;
  background:var(--ink);color:var(--paper-lift);text-decoration:none;
  padding:.6rem 1rem;border-radius:var(--r);font-size:.9rem;font-weight:600;
  transition:top .16s ease;
}
.skip:focus{top:.75rem}
/* visually hidden but available to assistive tech (table captions, labels) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 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}

/* ---------- CSP-safe helpers ----------
   The site's CSP is `style-src 'self'` (no 'unsafe-inline'), so inline
   style="" attributes are STRIPPED by the browser on the live domain.
   These classes replace the few inline margins/measures the homepage
   layout relied on — values preserve the original hand-tuned rhythm 1:1. */
.mt-xs{margin-top:.8rem}
.mt-sm{margin-top:.9rem}
.mt-md{margin-top:1.1rem}
.mt-lg{margin-top:1.15rem}
.mt-xl{margin-top:1.4rem}
.mt-2xl{margin-top:1.6rem}
.mb-sm{margin-bottom:1.15rem}
.mb-md{margin-bottom:1.4rem}
.mb-lg{margin-bottom:1.5rem}
.mb-xl{margin-bottom:1.8rem}
.copy-narrow{color:var(--ink-soft);max-width:40ch}
/* JS-disabled Meta pixel fallback — kept out of the layout, still fetched */
.tracking-pixel{display:none}
/* ============================================================
   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;
}