@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700;800;900&display=swap");

/* CSS public-page typography and color system.
   BUY is the reference. The coop homepage keeps its own door/sign treatment. */
:root{
  --css-bg:#080b08;
  --css-panel:#111711;
  --css-panel-2:#182019;
  --css-line:#425043;
  --css-text:#f1f2e9;
  --css-muted:#b7beb5;
  --css-green:#84ff48;
  --css-green-2:#b6ff70;
  --css-warning:#ffb24e;
  --css-display-font:Roboto,Arial,system-ui,sans-serif;
  --css-body-font:"Roboto Condensed",Bahnschrift,"Arial Narrow",system-ui,sans-serif;
  --css-page-title:clamp(3.5rem,9vw,7.8rem);
  --css-section-title:clamp(2.25rem,5.5vw,5rem);
  --css-lead:clamp(1rem,2vw,1.28rem);
  --css-body:1rem;
  --css-small:.82rem;
  --css-kicker:.76rem;
  --css-photo-stroke:0;
  --css-photo-shadow:.16em .16em 0 #000;

  /* Alias the older page-local names so pages stop drifting. */
  --bg:var(--css-bg);
  --black:var(--css-bg);
  --panel:var(--css-panel);
  --panel2:var(--css-panel-2);
  --panel-2:var(--css-panel-2);
  --paper:var(--css-text);
  --text:var(--css-text);
  --muted:var(--css-muted);
  --line:var(--css-line);
  --green:var(--css-green);
  --green2:var(--css-green-2);
  --accent:var(--css-green);
  --accent-2:var(--css-green-2);
}

body{
  color:var(--css-text);
  font-family:var(--css-body-font);
  font-size:var(--css-body);
  line-height:1.45;
}

/* One header rhythm across the public work areas. */
.buy-header,
.site-header,
.mod-header,
.garage-header,
.build-header{
  min-height:68px;
  padding:14px max(18px,calc((100vw - 1180px)/2));
  background:#080b08f2;
  border-bottom:1px solid var(--css-line);
  backdrop-filter:blur(10px);
}
.brand{
  color:var(--css-green);
  font-family:var(--css-body-font);
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.brand small{
  color:var(--css-muted);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
}
.buy-header nav a,
.site-header nav a,
.mod-header nav a,
.garage-header nav a,
.build-header nav a{
  color:var(--css-text);
  font-size:var(--css-small);
  font-weight:800;
  letter-spacing:0;
}

/* BUY is the reference scale for the large word / page statement. */
.spec-intro h1,
.hero h1,
.mod-intro h1,
.garage-intro h1,
.build-intro h1,
.qa-title{
  color:var(--css-green);
  font-family:var(--css-display-font);
  font-size:var(--css-page-title);
  font-weight:900;
  letter-spacing:.025em;
  line-height:.88;
  text-transform:uppercase;
}

/* Kicker / eyebrow vocabulary. */
.tool-kicker,
.eyebrow,
.kicker,
.step,
.qa-number,
.qa-tag{
  color:var(--css-green);
  font-family:var(--css-body-font);
  font-size:var(--css-kicker);
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Top-of-page explanatory copy. */
.spec-intro>p:first-of-type,
.hero>.lead,
.mod-intro>.tagline,
.garage-intro>p,
.build-intro>p,
.qa-subtitle{
  max-width:720px;
  color:#fff;
  font-family:var(--css-body-font);
  font-size:var(--css-lead);
  font-weight:800;
  line-height:1.45;
}
.spec-intro>p:last-of-type{
  color:var(--css-muted);
  font-weight:650;
}

/* Major section headings share the BUY hierarchy. */
.section-title h2,
.routes>header h2,
.diagnostic>header h2,
.mod-section>header h2{
  color:var(--css-green);
  font-family:var(--css-display-font);
  font-size:var(--css-section-title);
  font-weight:900;
  letter-spacing:.025em;
  line-height:.9;
  text-transform:uppercase;
}

/* Form/workbench sections stay one tier smaller so forms do not scream. */
.garage-list h2,
.add-panel h2,
.machine-heading h2,
.work-panel .section-head h2,
.qa-dialog-header h2,
.panel h2{
  color:#fff;
  font-family:var(--css-body-font);
  font-weight:900;
}

/* Readable small/supporting copy. */
.footnote,
.panel-note,
.resource-list span,
.mod-choice small,
.qa-note{
  color:var(--css-muted);
}

/* Only title/copy directly over the photo gets the solid, set-back Merch shadow.
   Scale the offset with the lettering, without a soft halo.
   Keep rectangular panels, controls and artwork outside this scope. */
.spec-deck .compare-intro>.tool-kicker,
.spec-deck .compare-intro>h2,
.spec-deck .compare-intro>p,
.spec-intro>.tool-kicker,
.spec-intro>h1,
.spec-intro>p,
.hero>.eyebrow,
.hero>h1,
.hero>.lead,
.mod-intro>.kicker,
.mod-intro>h1,
.mod-intro>.tagline,
.garage-intro>.kicker,
.garage-intro>h1,
.garage-intro>p,
.build-intro>.kicker,
.build-intro>h1,
.build-intro>p,
.qa-title,
.qa-subtitle{
  -webkit-text-stroke:var(--css-photo-stroke);
  paint-order:stroke fill;
  text-shadow:var(--css-photo-shadow);
}

/* Bring the two standalone subpages into the same green/text palette without
   flattening their specialized interaction layouts. */
.qa-shell a,
.qa-title,
.qa-number,
.qa-tag,
.qa-tile .qa-arrow,
.qa-dialog-body h3{
  color:var(--css-green);
}
.qa-tile,
.qa-dialog,
.qa-dialog-header{
  border-color:var(--css-line);
}
dialog.qa-dialog{
  border-top-color:var(--css-green);
}
.window-mark{
  color:#071006;
  background:var(--css-green);
  border-color:var(--css-green-2);
}
.kicker,
.confidence-chip{
  accent-color:var(--css-green);
}

@media(max-width:620px){
  :root{
    --css-page-title:clamp(3rem,15vw,5rem);
    --css-section-title:clamp(2rem,10vw,3.5rem);
  }
}

/* Display face trial: regular Roboto for headings; body and artwork unchanged.
   These existing page-local selectors previously hardcoded Impact. */
.spec-deck .spec-intro h1,
.spec-deck .section-title h2,
.spec-deck .compare-intro h2,
.spec-deck .buy-path > strong,
.spec-deck .finder-callout h2,
.spec-deck .finder-question,
.spec-deck .finder-results-head h3,
.mod-intro h1,
.mod-section h2,
.mod-choice strong,
.build-intro h1,
.garage-intro h1,
.qa-title,
.qa-dialog-header h2{
  font-family:var(--css-display-font);
}