/* ===========================================================
   BEACH BUM OFF-ROAD — build guide sheet
   A shop-manual counterpart to the main site: same voice
   (Archivo Black, Space Mono, the '86 sunset stripe) printed
   on sand paper instead of run on a navy screen, because
   nobody reads 40 firmware files on a dark background in a
   garage in daylight.

   Committed to one look on purpose — every colour is painted
   explicitly, so it holds up whatever theme the browser is in.
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --font-display: 'Archivo Black', 'Space Grotesk', sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-label:   'Space Mono', ui-monospace, monospace;

  /* paper */
  --paper:  #E9DCC2;
  --plate:  #FCF6E9;
  --panel:  #F2E8D4;
  --plate-frame: #FFFBF2;

  /* ink */
  --ink:  #141F2A;
  --ink2: #4B5A66;
  --ink3: #8B8168;
  --rule: #D2C1A0;
  --rule2:#E3D6BB;

  /* the sunset stripe, darkened enough to sit on sand */
  --red:  #C3202C;
  --sun:  #D9581F;
  --gold: #E0A116;
  --surf: #1D7F72;

  --accent:      #C2551B;
  --accent-soft: #F8E3CD;
  --accent-ink:  #993C0D;
  --danger:      #B3252F;
  --danger-soft: #F8DFE0;
  --good:        #1D6A56;
  --good-soft:   #DCEDE7;
  --brass:       #8A6A12;

  --code-bg:  #101D29;
  --code-ink: #EFE4CE;

  --shadow: 0 1px 2px rgba(20,31,42,.07), 0 10px 26px -16px rgba(20,31,42,.4);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3,h4{ text-wrap: balance; margin: 0; }
p{ margin: 0; }
a{ color: var(--accent-ink); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
::selection{ background: var(--gold); color: var(--ink); }

/* the one motif carried over from the site */
.stripe{
  height: 8px;
  width: 100%;
  background: linear-gradient(180deg,
    var(--red) 0 25%, var(--sun) 25% 50%, var(--gold) 50% 75%, var(--surf) 75% 100%);
}

/* ---------- nav ---------- */
.nav{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(233,220,194,.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav::after{
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(180deg,
    var(--red) 0 25%, var(--sun) 25% 50%, var(--gold) 50% 75%, var(--surf) 75% 100%);
}
.nav-in{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-back{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.nav-back img{ width: 34px; height: auto; display: block; }
.nav-back span{
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3);
  white-space: nowrap;
}
.nav-back:hover span{ color: var(--accent-ink); }
.nav-mark{
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  padding-left: 18px;
  border-left: 1px solid var(--rule);
}
.nav-links{
  display: flex;
  gap: 12px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar{ display: none; }
.nav-links a{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink3);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover{ color: var(--accent-ink); border-bottom-color: var(--accent); }
@media (max-width: 900px){
  .nav-mark{ display: none; }
}

/* ---------- masthead ---------- */
.mast{ padding: 60px 0 38px; border-bottom: 2px solid var(--ink); }
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before{
  content: "";
  width: 28px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.mast h1{
  font-family: var(--font-display);
  font-size: clamp(38px, 6.6vw, 78px);
  line-height: .94;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 16px 0 0;
}
.mast .lede{ font-size: 18.5px; color: var(--ink2); max-width: 64ch; margin-top: 20px; }
.mast-meta{ display: flex; gap: 30px; flex-wrap: wrap; margin-top: 28px; }
.mm{ display: flex; flex-direction: column; gap: 3px; }
.mm dt{
  font-family: var(--font-label);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3);
}
.mm dd{ margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 15.5px; }

/* ---------- section headers (drawing-sheet style) ---------- */
section{ scroll-margin-top: 78px; }
.sh{
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
  margin: 78px 0 28px;
}
.sh h2{
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.005em;
  text-transform: uppercase;
  line-height: 1;
}
.sh .sub{
  font-family: var(--font-label);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3);
}
.sh .no{
  font-family: var(--font-label);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  padding: 5px 13px;
  align-self: center;
}
h3{ font-family: var(--font-body); font-size: 19px; font-weight: 700; letter-spacing: -.008em; margin-top: 6px; }
h4{
  font-family: var(--font-label);
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3);
}

/* ---------- footer ---------- */
.guide-foot{
  margin-top: 20px;
  background: #0D1B2B;
  color: #B5A78E;
  padding: 40px 24px 46px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.guide-foot-in{
  max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 18px;
}
.guide-foot img{ width: 200px; height: auto; display: block; margin-bottom: 12px; }
.guide-foot a{ color: #B5A78E; text-decoration: none; }
.guide-foot a:hover{ color: #FFC244; }
.guide-foot-links{ display: flex; gap: 18px; flex-wrap: wrap; }
/* ---------- shell ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 24px 96px}
.col{max-width:720px}
.stack{display:flex; flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g28{gap:28px}.g40{gap:40px}


/* ---------- figures ---------- */
figure{margin:0}
.plate{
  background:var(--plate-frame); border:1px solid var(--rule); border-radius:3px;
  padding:14px; box-shadow:var(--shadow); overflow-x:auto;
}
.plate img{display:block; width:100%; height:auto; border-radius:1px}
.plate.dark{background:#0a0d11; border-color:var(--rule)}
.fig{display:flex; flex-direction:column; gap:10px; margin:30px 0}
.fig.wide{max-width:none}
figcaption{font-size:13.5px; line-height:1.55; color:var(--ink2)}
figcaption b{color:var(--ink); font-weight:600}
.figno{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-right:8px}
.fig-svg{display:block; width:100%; height:auto; color:var(--ink)}
.svg-plate{background:var(--plate); border:1px solid var(--rule); border-radius:3px; padding:20px; overflow-x:auto}
.svg-plate svg{min-width:600px}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}

/* ---------- diagram svg classes ---------- */
.grid line{stroke:var(--rule2); stroke-width:1}
.axis line{stroke:var(--rule); stroke-width:1.5}
.tick{font-family:var(--font-mono); font-size:11px; fill:var(--ink3)}
.axtitle{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; fill:var(--ink3)}
.guide{stroke:var(--ink3); stroke-width:1; stroke-dasharray:3 4}
.err{stroke:var(--danger); stroke-width:6; opacity:.22; stroke-linecap:round}
.s-fac{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round}
.s-lin{fill:none; stroke:var(--danger); stroke-width:2; stroke-dasharray:6 4}
.m-fac{fill:var(--accent); stroke:var(--plate); stroke-width:2}
.m-lin{fill:var(--danger); stroke:var(--plate); stroke-width:2}
.lbl-fac{font-size:12.5px; font-weight:600; fill:var(--accent-ink)}
.lbl-lin{font-size:12.5px; font-weight:600; fill:var(--danger)}
.lbl-err{font-family:var(--font-mono); font-size:11px; font-weight:600; fill:var(--danger)}
.frame-id{font-family:var(--font-mono); font-size:17px; font-weight:600; fill:var(--ink)}
.frame-hex{font-family:var(--font-mono); font-size:10.5px; fill:var(--ink3)}
.byte{fill:var(--rule)}
.sp-idle{fill:none; stroke:var(--rule); stroke-width:1.5}
.sp-use{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5}
.sp-pod{fill:none; stroke:var(--accent); stroke-width:1.5; stroke-dasharray:4 3}
.sp-t-idle{font-family:var(--font-mono); font-size:12px; fill:var(--ink3)}
.sp-t-use{font-family:var(--font-mono); font-size:12px; font-weight:600; fill:var(--accent-ink)}
.sp-t-pod{font-family:var(--font-mono); font-size:12px; fill:var(--accent-ink)}
.fnote{font-family:var(--font-mono); font-size:11px; fill:var(--ink2)}
.legend{font-size:12px; fill:var(--ink2)}
.nd{fill:var(--panel); stroke:var(--rule); stroke-width:1.5}
.nd-alt{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5}
.nd-src{fill:none; stroke:var(--ink2); stroke-width:1.5; stroke-dasharray:5 3}
.nd-rail{fill:var(--accent); stroke:none}
.nd-gate{fill:var(--ink); stroke:none}
.nd-final{fill:var(--good-soft); stroke:var(--good); stroke-width:1.5}
.nd-t{font-family:var(--font-body); font-size:13.5px; font-weight:600; fill:var(--ink)}
.nd-s{font-family:var(--font-mono); font-size:10.5px; fill:var(--ink2)}
.nd-t-rail{font-family:var(--font-body); font-size:15px; font-weight:700; fill:var(--plate)}
.nd-s-rail{font-family:var(--font-mono); font-size:10px; fill:var(--plate); opacity:.8}
.nd-t-gate{font-family:var(--font-body); font-size:13.5px; font-weight:700; fill:var(--paper)}
.nd-s-gate{font-family:var(--font-mono); font-size:10.5px; fill:var(--paper); opacity:.75}
.nd-t-fin{font-family:var(--font-body); font-size:13.5px; font-weight:600; fill:var(--ink)}
.nd-s-fin{font-family:var(--font-mono); font-size:10.5px; fill:var(--ink2)}
.nd-li{font-family:var(--font-mono); font-size:10.5px; fill:var(--ink2)}
.flow{stroke:var(--ink3); stroke-width:1.5; fill:none; color:var(--ink3)}

/* ---------- tables ---------- */
.tw{overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--plate)}
table{border-collapse:collapse; width:100%; font-size:14px}
th{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  text-align:left; color:var(--ink3); font-weight:600; padding:11px 14px; border-bottom:1.5px solid var(--rule);
  background:var(--panel); white-space:nowrap;
}
td{padding:10px 14px; border-bottom:1px solid var(--rule2); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{font-variant-numeric:tabular-nums; font-family:var(--font-mono)}
td code{white-space:nowrap}
.t-tight td,.t-tight th{padding:8px 12px}

/* ---------- callouts ---------- */
.note{border-left:3px solid var(--accent); background:var(--accent-soft); padding:14px 18px; border-radius:0 3px 3px 0; font-size:14.5px}
.warn{border-left:3px solid var(--danger); background:var(--danger-soft); padding:14px 18px; border-radius:0 3px 3px 0; font-size:14.5px}
.ok{border-left:3px solid var(--good); background:var(--good-soft); padding:14px 18px; border-radius:0 3px 3px 0; font-size:14.5px}
.note b,.warn b,.ok b{font-weight:600}
.warn b{color:var(--danger)}
.chiprow{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; padding:3px 9px;
  border:1px solid var(--rule); border-radius:999px; color:var(--ink2); background:var(--plate); white-space:nowrap;
}
.chip.on{border-color:var(--good); color:var(--good); background:var(--good-soft)}
.chip.off{border-color:var(--danger); color:var(--danger); background:var(--danger-soft)}

/* ---------- stat cards ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.stat{background:var(--plate); padding:16px 18px; display:flex; flex-direction:column; gap:3px}
.stat .v{font-family:var(--font-body); font-weight:700; font-size:27px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.stat .k{font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3)}
.stat .n{font-size:12.5px; color:var(--ink2)}

/* ---------- steps ---------- */
.step{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start}
.step-n{
  font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.02em;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); flex:none; margin-top:2px;
}
.step-body{display:flex; flex-direction:column; gap:12px; min-width:0}
.step h3{margin:2px 0 0}

/* ---------- code ---------- */
code{font-family:var(--font-mono); font-size:.9em; background:var(--code-bg); padding:1.5px 5px; border-radius:3px; color:var(--code-ink)}
pre{margin:0; overflow-x:auto; background:var(--code-bg); border:1px solid var(--rule); border-radius:3px; padding:15px 17px}
pre code{background:none; padding:0; font-size:12.5px; line-height:1.62; display:block; white-space:pre}
.tok-c{color:var(--ink3); font-style:italic}
.tok-s{color:var(--good)}
.tok-p{color:var(--brass)}
.tok-k{color:var(--accent-ink); font-weight:500}
.tok-n{color:var(--danger)}

/* ---------- file listings ---------- */
.tree{font-family:var(--font-mono); font-size:12.5px; line-height:1.85; white-space:pre; color:var(--ink2); overflow-x:auto}
.tree b{color:var(--ink); font-weight:600}
.tree i{color:var(--ink3); font-style:normal}
.fgroup{display:flex; flex-direction:column; gap:6px; margin-top:26px}
.fgroup-h{display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--rule); padding-bottom:6px; margin-bottom:6px}
.fgroup-h h3{font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink)}
.fgroup-h span{font-family:var(--font-mono); font-size:11px; color:var(--ink3); margin-left:auto}
details.file{border:1px solid var(--rule); border-radius:3px; background:var(--plate); overflow:hidden}
details.file>summary{
  cursor:pointer; padding:10px 14px; display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:13px; list-style:none;
}
details.file>summary::-webkit-details-marker{display:none}
details.file>summary::before{content:"▸"; color:var(--ink3); font-size:11px; transition:transform .12s ease}
details.file[open]>summary::before{content:"▾"}
details.file>summary:hover{background:var(--panel)}
details.file[open]>summary{border-bottom:1px solid var(--rule); background:var(--panel)}
.fname{font-weight:600; color:var(--ink)}
.fdesc{color:var(--ink3); font-size:11.5px; font-family:var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fsize{margin-left:auto; color:var(--ink3); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums}
.fbody{position:relative}
.fbody pre{border:none; border-radius:0; max-height:640px; overflow:auto; background:var(--code-bg)}
.copy{
  position:absolute; top:9px; right:12px; z-index:2; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--rule);
  background:var(--plate); color:var(--ink2); border-radius:3px; cursor:pointer;
}
.copy:hover{border-color:var(--accent); color:var(--accent-ink)}

/* ---------- title block ---------- */
.titleblock{margin-top:84px; border:1.5px solid var(--ink); border-radius:2px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tb{padding:12px 16px; border-right:1px solid var(--rule)}
.tb:last-child{border-right:none}
.tb dt{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3)}
.tb dd{margin:3px 0 0; font-family:var(--font-body); font-weight:600; font-size:14px}

ul.tightlist{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; font-size:15px}
ul.tightlist li::marker{color:var(--ink3)}
.muted{color:var(--ink2)}
.small{font-size:14px}
hr.hair{border:none; border-top:1px solid var(--rule); margin:0}

@media (max-width:760px){
  .wrap{padding:0 16px 72px}
  .nav-links{display:none}
  .mast{padding:44px 0 30px}
  body{font-size:15.5px}
  .step{grid-template-columns:1fr; gap:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ===========================================================
   Overrides on top of the original sheet's structure
=========================================================== */

/* Numbers carry weight in a manual — give them the display face. */
.stat .v{ font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -.01em; }
.stat .k{ font-family: var(--font-label); letter-spacing: .16em; }
.step-n{ font-family: var(--font-display); font-weight: 400; font-size: 13px; }
.figno{ font-family: var(--font-label); letter-spacing: .18em; }
.chip{ font-family: var(--font-label); }
th{ font-family: var(--font-label); letter-spacing: .16em; font-weight: 700; }
.fgroup-h h3{ font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.fgroup-h span{ font-family: var(--font-mono); }
.copy{ font-family: var(--font-label); }

/* Code sits dark on the page — a terminal laid on the bench. */
pre{ border-color: #0A141D; }
.tok-c{ color: #7C8A97; font-style: italic; }
.tok-s{ color: #7FD1A8; }
.tok-p{ color: #E2B24A; }
.tok-k{ color: #FF9B62; font-weight: 600; }
.tok-n{ color: #FF8A8A; }
code{ border: 1px solid rgba(20,31,42,.15); }
pre code{ border: 0; }

/* Callouts get the stripe's colours rather than a generic blue/red. */
.note{ border-left-width: 4px; }
.warn{ border-left-width: 4px; }
.ok{ border-left-width: 4px; }

/* Title block reads as the corner of a drawing sheet. */
.titleblock{ background: var(--plate); box-shadow: var(--shadow); }
.tb dt{ font-family: var(--font-label); letter-spacing: .16em; }
.tb dd{ font-family: var(--font-body); font-weight: 700; }

@media (max-width: 700px){
  body{ font-size: 15.5px; }
  .wrap{ padding: 0 16px 72px; }
  .nav-in{ padding: 9px 16px; gap: 12px; }
  .mast{ padding: 40px 0 30px; }
  .mast .lede{ font-size: 16.5px; }
  .sh{ margin: 54px 0 22px; }
  .step{ grid-template-columns: 1fr; gap: 12px; }
  .guide-foot{ padding: 32px 16px 40px; }
  .guide-foot-in{ flex-direction: column; align-items: flex-start; }
}

/* A schematic shrunk to a phone is unreadable — tapping the plate opens
   the full-resolution file in its own tab. */
.plate-zoom{ display: block; position: relative; }
.plate-zoom::after{
  content: "Open full size ↗";
  position: absolute;
  right: 8px; bottom: 8px;
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(20,31,42,.82);
  border-radius: 4px;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.plate:hover .plate-zoom::after{ opacity: 1; }
@media (hover: none){ .plate-zoom::after{ opacity: .85; } }