/* =========================================================================
   BASE — element defaults, typography, layout shell
   ========================================================================= */
body{
  font-family:var(--font-body);
  font-size:var(--fs-400);
  color:var(--fg-100);
  background-color:var(--bg-000);
  background-image:var(--concrete-grain);
  background-attachment:fixed;
}

/* ---- Headings: stencilled crate-stamps ---- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--fg-000);
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.02;
}
h1{font-size:var(--fs-800)}
h2{font-size:var(--fs-700)}
h3{font-size:var(--fs-600)}
h4{font-size:var(--fs-500);letter-spacing:.02em}
p{max-width:72ch}
strong{color:var(--fg-000);font-weight:600}

a:not([class]){color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
a:not([class]):hover{color:var(--accent-hi)}

/* ---- Odds / prices / codes always tabular mono ---- */
.mono,code,kbd,samp{font-family:var(--font-mono);
  font-variant-numeric:tabular-nums}

/* ---- Layout primitives ---- */
.container{width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto}
.section{padding-block:var(--sp-7)}
.stack>*+*{margin-top:var(--sp-4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* Eyebrow label — small stencilled section kicker with hazard tick */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);font-size:var(--fs-300);
  text-transform:uppercase;letter-spacing:.18em;color:var(--fg-300);
}
.eyebrow::before{content:"";width:16px;height:8px;background:var(--accent);
  clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}

.muted{color:var(--fg-300)}
.up{color:var(--up)} .down{color:var(--down)}

/* Skip link */
.skip-link{position:absolute;left:var(--sp-3);top:-60px;z-index:200;
  background:var(--accent);color:var(--accent-ink);padding:var(--sp-2) var(--sp-4);
  font-family:var(--font-display);text-transform:uppercase;
  transition:top var(--t-base) var(--ease)}
.skip-link:focus{top:var(--sp-3)}

/* App shell: rail · main · slip */
.app-shell{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr) var(--slip-w);
  gap:var(--sp-5);
  align-items:start;
  width:min(100% - 2*var(--sp-4),var(--maxw));
  margin-inline:auto;
  padding-block:var(--sp-5);
}
.app-shell__main{min-width:0}

@media (max-width:1180px){
  .app-shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .app-shell__slip{display:none}
}
@media (max-width:880px){
  .app-shell{grid-template-columns:1fr}
  .app-shell__rail{display:none}
}

/* Plain-page wrapper (legal, account, auth) */
.page{
  width:min(100% - 2*var(--sp-4),920px);
  margin-inline:auto;padding-block:var(--sp-7);
}
.page--wide{width:min(100% - 2*var(--sp-4),var(--maxw))}