/* =========================================================================
   SpikedSite — base.css
   Reset + base elements + a small shared component vocabulary so demos are
   fast AND consistent. Flat specificity on purpose: demos override freely
   in their own <style> block without specificity wars.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

img,picture,svg,video,canvas{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
:where(h1,h2,h3,h4){line-height:1.08;font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
hr{border:none;border-top:1px solid var(--hairline)}

/* ---- focus: visible, branded, non-negotiable ---- */
:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.skip-link{
  position:absolute;left:.75rem;top:-3rem;z-index:999;
  background:var(--accent);color:var(--on-accent);
  padding:.6rem 1rem;border-radius:var(--r-sm);font-weight:600;
  transition:top .15s var(--ease);
}
.skip-link:focus{top:.75rem}

/* ===================== layout ===================== */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.container--narrow{max-width:var(--maxw-narrow)}
.section{padding-block:clamp(3rem,8vw,7rem)}
.section--tight{padding-block:clamp(2rem,5vw,4rem)}
.stack > * + *{margin-top:var(--flow,1rem)}
.grid{display:grid;gap:clamp(1rem,2.5vw,1.75rem)}

/* ===================== type helpers ===================== */
.display{font-family:var(--font-display);line-height:1.02;letter-spacing:-.02em;font-weight:600}
.serif{font-family:var(--font-display)}
.mono{font-family:var(--font-mono)}
.t-xs{font-size:var(--step--1)}
.t-lead{font-size:var(--step-1);line-height:1.4;color:var(--ink-2)}
.measure{max-width:62ch}
.balance{text-wrap:balance}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow--accent{color:var(--accent)}
.eyebrow::before{content:"";width:1.6em;height:1px;background:currentColor;opacity:.6}
.eyebrow.no-rule::before{display:none}

/* ===================== buttons ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:600;font-size:var(--step-0);line-height:1;
  padding:.85em 1.45em;border-radius:var(--r-sm);
  border:1.5px solid transparent;
  transition:transform .18s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
  text-align:center;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--fill{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm)}
.btn--fill:hover{background:var(--accent-deep);box-shadow:var(--shadow-md)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.btn--ghost{color:var(--ink);padding-inline:.6em}
.btn--ghost:hover{color:var(--accent)}
.btn--lg{font-size:var(--step-1);padding:1em 1.7em}
.btn--block{display:flex;width:100%}

/* ===================== tags / pills / chips ===================== */
.pill{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-mono);font-size:var(--step--2,.75rem);
  letter-spacing:.04em;
  padding:.4em .8em;border-radius:var(--r-pill);
  background:var(--surface-sunk);color:var(--ink-2);
  border:1px solid var(--hairline);
}
.pill--accent{background:color-mix(in oklab,var(--accent) 14%,transparent);
  color:var(--accent-deep);border-color:color-mix(in oklab,var(--accent) 30%,transparent)}
.tag{font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);letter-spacing:.02em}

/* ===================== cards ===================== */
.card{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,1.9rem);
  box-shadow:var(--shadow-sm);
}
.card--flat{box-shadow:none}

/* ===================== inputs ===================== */
.field{display:flex;flex-direction:column;gap:.4rem}
.label{font-weight:600;font-size:var(--step--1);color:var(--ink-2)}
.input,.textarea,.select{
  width:100%;padding:.8em 1em;border-radius:var(--r-sm);
  background:var(--surface);border:1.5px solid var(--hairline);
  color:var(--ink);transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--cloud)}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent);
}
.textarea{min-height:7rem;resize:vertical}

/* ===================== media / figure ===================== */
.frame{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--surface-sunk)}
.frame img{width:100%;height:100%;object-fit:cover}
.ratio{position:relative}
.ratio > img,.ratio > .placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio-1-1{aspect-ratio:1/1}
.ratio-4-3{aspect-ratio:4/3}
.ratio-3-2{aspect-ratio:3/2}
.ratio-16-9{aspect-ratio:16/9}
.ratio-3-4{aspect-ratio:3/4}
.ratio-2-3{aspect-ratio:2/3}

/* ===================== placeholders (img onerror fallbacks) =====================
   Usage: <img ... onerror="this.onerror=null;this.replaceWith(...)"> OR simply
   add class .placeholder--N to a div behind/over a broken image. These paint a
   tasteful gradient in the page palette so the page survives offline / blocked. */
.placeholder{display:grid;place-items:center;color:var(--on-accent);
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.08em;
  text-transform:uppercase;opacity:1}
.placeholder--1{background:linear-gradient(135deg,var(--accent),var(--accent-deep))}
.placeholder--2{background:linear-gradient(135deg,var(--ink),var(--ink-2))}
.placeholder--3{background:linear-gradient(135deg,var(--sand),var(--tan))}
.placeholder--4{background:
  radial-gradient(120% 120% at 0% 0%,color-mix(in oklab,var(--accent) 70%,#fff) 0%,transparent 55%),
  linear-gradient(135deg,var(--accent),var(--accent-deep))}
.placeholder--5{background:
  repeating-linear-gradient(45deg,var(--surface-sunk) 0 14px,var(--hairline) 14px 28px)}
.placeholder--6{background:
  conic-gradient(from 210deg at 65% 35%,var(--accent),var(--accent-deep),var(--ink),var(--accent))}

/* tiny utilities used across demos */
.u-center{text-align:center}
.u-mt-0{margin-top:0}
.flow-sm{--flow:.5rem}
.flow-lg{--flow:1.5rem}
.dim{color:var(--muted)}
.accent-text{color:var(--accent)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.divider{height:1px;background:var(--hairline);border:0}
.cols-2{display:grid;gap:clamp(1rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cols-3{display:grid;gap:clamp(1rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.cols-4{display:grid;gap:clamp(.8rem,2vw,1.4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* shared global image fallback helper class */
img.img--seed{background:linear-gradient(135deg,var(--surface-sunk),var(--hairline))}