@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Expanded:wght@600;700;800;900&display=swap');

/* GrandCAD — shared type system + mobile responsive overrides.
   Loaded after the DS stylesheet. Targets the existing inline-styled elements
   via attribute/structure selectors so the inline-first design is preserved. */

/* ---- Type system (Spence-caliber: wide, confident grotesque) ----
   The DS ships Barlow Condensed for headings, which reads industrial/condensed.
   Overriding to Archivo Expanded (display) + Archivo (body) gives the clean,
   spacious, editorial character across every page in one move. */
:root {
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', 'Barlow', system-ui, sans-serif;
  --font-heading-weight: 800;

  --space-1: 4px;
  --space-2: 9px;
  --space-3: 16px;
  --space-4: 26px;
  --space-6: 52px;
  --space-8: 104px;
}

/* small labels: drop the techy monospace, unify to the grotesque */
.mono { font-family: 'Archivo', system-ui, sans-serif !important; font-weight: 500; }

/* refined image hover: subtle zoom inside any overflow-clipped frame */
image-slot { display: block; transition: transform .7s cubic-bezier(.19,1,.22,1); }
a:hover image-slot { transform: scale(1.045); }

/* refined link underline feel on nav/text links handled inline; keep body crisp */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Tablet & phone ---- */
@media (max-width: 860px) {
  /* pull the scale back so mobile isn't over-padded */
  :root { --space-3: 13px; --space-4: 20px; --space-6: 32px; --space-8: 56px; }

  /* tighten page gutters */
  [style*="max-width:1280px"] { padding-left: 18px !important; padding-right: 18px !important; }
  header.nav { padding-left: 16px !important; padding-right: 16px !important; }

  /* stack every multi-column grid to one column by default */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 22px !important; }
  /* keep card/stat/portrait grids two-up so they don't become an endless scroll */
  div[style*="repeat(4"], div[style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* drop decorative vertical labels that would collide with stacked content */
  [style*="writing-mode:vertical-rl"] { display: none !important; }

  /* HUD: shrink and drop the redundant bottom-right hint */
  div[style*="z-index:40"] { font-size: 9px !important; letter-spacing: 0.08em !important; }
  div[style*="z-index:40"] > div:nth-child(4) { display: none !important; }

  /* navigation: compact so it fits one row */
  header.nav { gap: 14px !important; }
  header.nav nav { gap: 12px !important; font-size: 11px !important; flex-wrap: wrap; justify-content: flex-end; }

  /* the annotated hero viewport dimension label can overflow narrow screens */
  [style*="260,000 t / YR"] { font-size: 9px !important; }
}

/* ---- Phone ---- */
@media (max-width: 560px) {
  /* single-column even for cards/stats so text stays large and readable */
  div[style*="repeat(4"], div[style*="repeat(3"], div[style*="repeat(2,minmax"] { grid-template-columns: 1fr !important; }

  /* HUD: keep only the section readout (TL) and status (BL); hide clock corner to avoid TL/TR overlap */
  div[style*="z-index:40"] > div:nth-child(2) { display: none !important; }

  header.nav nav { gap: 10px !important; font-size: 10px !important; letter-spacing: 0.06em !important; }
  header.nav nav a[style*="padding:8px 16px"] { padding: 7px 12px !important; }

  /* the fixed HUD sits at top:70px; make sure sticky nav + HUD don't crowd the first heading */
  section[data-chapter] { padding-top: 84px !important; }
  section[data-chapter] ~ section[data-chapter],
  section[data-chapter] + section[data-chapter] { padding-top: 40px !important; }
}