/* ============================================================
   BOLD WAY ENGINEERING — shared stylesheet
   Every page links this file. Edit here once, all pages change.

   WORDMARK FACE — swap for more or less raceway:
     Chakra Petch      technical / motorsport, angular  (current)
     Racing Sans One   literal raceway, heaviest character
     Bungee            signage, blunt and loud
     Saira Stencil One stencil, shop-floor
   Change the @import and --disp together.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,600;0,700;1,700&family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ------------------------------------------------------------
   Ground: galvanized steel, cool. Not cream.
   Structure: steel temper blue (~575F on the temper scale).
   Action: toggle-clamp grip red — the one hot color, spent
   in three places only (mark, top rule, primary button).
   Flat fills only. Depth comes from bevels, which is how
   metal hardware actually does it. No gradients anywhere.
   ------------------------------------------------------------ */
:root {
  --steel:      #E1E5E8;
  --zebra:      #DADFE3;
  --card:       #EAEDEF;

  --plate:      #262E35;
  --plate-dk:   #1A2127;
  --plate-hi:   #4B555E;
  --plate-lo:   #0D1317;

  --ink:        #161D23;
  --ink-soft:   #3E4A54;
  --muted:      #6B757E;

  --blue:       #1F4B6E;
  --blue-hi:    #3C7096;
  --blue-lo:    #0E2C44;
  --blue-lift:  #2B6699;

  --clamp:      #C8262C;
  --clamp-hi:   #E0565B;
  --clamp-lo:   #8A1519;

  --straw:      #9C6B2F;
  --rule:       #C6CCD1;

  --disp: 'Chakra Petch', 'Arial Narrow', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, sans-serif;

  --gutter: 26px;
  --maxw: 1080px;
}

body {
  background: var(--steel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
}

.inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- TOP RULE ---- */
.registration { height: 8px; background: var(--clamp); }

/* ---- CLAMP MARK ---- */
.mark { height: 56px; width: auto; display: block; flex: none; }
.mark .body { fill: #E6EAEC; }
.mark .shank { stroke: #E6EAEC; stroke-width: 11; }
.mark .grip { stroke: var(--clamp); stroke-width: 14; stroke-linecap: round; }
.mark .hole { fill: var(--plate); }

/* ---- HEADER RAIL ---- */
header { background: var(--plate-dk); border-bottom: 2px solid var(--plate-lo); }
header .inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 26px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 20px;
}
header a.plate-link { text-decoration: none; display: block; }

/* ---- DATA PLATE — the machine tag the name is stamped on ---- */
.dataplate {
  position: relative;
  background: var(--plate);
  padding: 6px;
  border-style: solid; border-width: 3px;
  border-color: var(--plate-hi) var(--plate-lo) var(--plate-lo) var(--plate-hi);
}
.dp-inner {
  border: 1px solid var(--plate-hi);
  padding: 12px 26px 10px;
  display: flex; align-items: center; gap: 20px;
}
.dp-rule { align-self: stretch; width: 1px; background: var(--plate-hi); flex: none; }
.rivet {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: #5A646D; border: 1px solid var(--plate-lo);
}
.rivet.tl { top: 5px; left: 5px; }
.rivet.tr { top: 5px; right: 5px; }
.rivet.bl { bottom: 5px; left: 5px; }
.rivet.br { bottom: 5px; right: 5px; }

.wordmark {
  font-family: var(--disp);
  font-weight: 700; font-style: italic;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 0.95; letter-spacing: 0.01em;
  text-transform: uppercase; color: #F0F3F5;
}
.wordmark-sub {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(0.92rem, 2vw, 1.15rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--blue-hi); margin-top: 3px;
}
.dp-spec {
  margin-top: 9px; padding-top: 7px;
  border-top: 1px solid var(--plate-hi);
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--cond);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #8D979F;
}

.hd-meta { display: flex; gap: 30px; flex-wrap: wrap; }
.hd-meta div { line-height: 1.25; }
.hd-meta dt {
  font-family: var(--cond);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #79838B;
}
.hd-meta dd { font-family: var(--disp); font-size: 1.12rem; font-weight: 600; color: #E6EAEC; }
.hd-meta a { color: #E6EAEC; text-decoration: none; }
.hd-meta a:hover { color: #fff; }

/* ---- SERVICE BAND — four cells, control-panel style ---- */
nav.bar {
  background: var(--blue);
  border-top: 2px solid var(--blue-hi);
  border-bottom: 2px solid var(--blue-lo);
}
nav.bar .inner { display: flex; flex-wrap: wrap; padding: 0 var(--gutter); }
nav.bar a {
  flex: 1 1 0; text-align: center;
  font-family: var(--disp);
  font-size: 0.97rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #D3E2ED; text-decoration: none;
  padding: 13px 14px;
  border-right: 1px solid var(--blue-lo);
  border-left: 1px solid rgba(255,255,255,0.09);
  transition: background 0.1s, color 0.1s;
}
nav.bar a:first-child { border-left: none; }
nav.bar a:last-child { border-right: none; }
nav.bar a:hover { background: var(--plate-dk); color: #fff; }
/* current page cell */
nav.bar a[aria-current="page"] { background: var(--plate); color: #fff; }

/* ---- LAYOUT ---- */
main { padding: 28px 0 36px; }
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; align-items: start; }
/* Pages whose right column was removed collapse to full width
   instead of leaving the 1fr track empty. */
.split:has(> :only-child) { grid-template-columns: 1fr; }
.col-right { display: flex; flex-direction: column; gap: 18px; }

h1 {
  font-family: var(--disp);
  font-size: clamp(1.95rem, 4.6vw, 2.9rem);
  font-weight: 700; text-transform: uppercase;
  line-height: 1.04; max-width: 24ch;
}
h2 {
  font-family: var(--disp);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.15;
  max-width: 32ch; margin-top: 38px;
}
h3 {
  font-family: var(--disp);
  font-size: 1.22rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.18; max-width: 36ch; margin-top: 26px;
}
p { max-width: 62ch; }
p.lead { font-size: 1.15rem; line-height: 1.45; font-weight: 500; margin-top: 18px; }
p + p, h2 + p, h3 + p, p + ul, ul + p { margin-top: 14px; }
.dim { color: var(--ink-soft); }
.small { font-size: 0.92rem; }

/* ---- BLOCKED LISTS ---- */
ul.builds, ul.spec-list {
  list-style: none; margin-top: 22px;
  border-top: 2px solid var(--plate); max-width: 70ch;
}
ul.builds li, ul.spec-list li {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  border-left: 6px solid var(--blue);
  padding: 10px 0 10px 16px;
}
ul.builds b, ul.spec-list b {
  font-family: var(--disp); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
ul.builds span, ul.spec-list span { color: var(--ink-soft); }

/* ---- SPEC PANEL — instrument faceplate ---- */
.specpanel {
  background: var(--card);
  border-style: solid; border-width: 2px;
  border-color: #F2F4F5 #9AA3AA #9AA3AA #F2F4F5;
  outline: 1px solid var(--plate);
}
.sp-head {
  background: var(--plate); color: #EDF0F2;
  font-family: var(--disp);
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 14px;
  border-bottom: 2px solid var(--plate-lo);
}
.specpanel dl { display: grid; grid-template-columns: auto 1fr; }
.specpanel dt, .specpanel dd {
  padding: 8px 14px; border-bottom: 1px solid var(--rule); font-size: 0.94rem;
}
.specpanel dt { color: var(--ink-soft); white-space: nowrap; }
.specpanel dd { text-align: right; font-family: var(--disp); font-size: 1.04rem; font-weight: 600; }

/* ---- TABLES — filled header, full grid, zebra ---- */
.scroll-x { overflow-x: auto; border: 2px solid var(--plate); margin-top: 22px; }
table { width: 100%; border-collapse: collapse; font-size: 0.96rem; background: var(--card); }
.scroll-x table { min-width: 620px; }
th {
  text-align: left;
  background: var(--plate); color: #EDF0F2;
  font-family: var(--disp);
  font-size: 0.97rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 10px 14px;
  border-right: 1px solid var(--plate-hi);
  border-bottom: 2px solid var(--plate-lo);
  vertical-align: bottom;
}
th:last-child { border-right: none; }
td {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 11px 14px; vertical-align: top;
}
td:last-child { border-right: none; }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:last-child td { border-bottom: none; }
td.num { font-family: var(--cond); font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
td b { font-weight: 600; }
.t-gate {
  font-family: var(--disp); font-style: italic;
  font-size: 1.2rem; font-weight: 700;
  color: var(--blue); text-align: center;
}

/* ---- CALLOUT ---- */
.callout {
  border-left: 7px solid var(--straw);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  padding: 16px 20px; max-width: 72ch; margin-top: 24px;
}
.callout .ct {
  font-family: var(--disp);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--straw); display: block; margin-bottom: 6px;
}

/* ---- FIGURES — plain frame. A phone photo belongs here:
   no rounded corners, no hover zoom, no filters. ---- */
figure.fig {
  background: var(--card);
  border-style: solid; border-width: 2px;
  border-color: #F2F4F5 #9AA3AA #9AA3AA #F2F4F5;
  outline: 1px solid var(--plate);
}
/* 4:3 crop keeps a column photo from running long.
   Delete aspect-ratio + object-fit to show the full frame. */
figure.fig img {
  width: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%;
}
figure.fig figcaption {
  background: var(--plate); color: #B6BFC6;
  padding: 8px 12px; font-size: 0.85rem; line-height: 1.35;
  border-top: 2px solid var(--plate-lo);
}
figure.fig figcaption b {
  font-family: var(--disp); font-weight: 700; font-style: italic;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-hi); margin-right: 7px;
}
.figrow { display: grid; gap: 16px; margin-top: 24px; }
.figrow.c2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.figrow.c3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ---- WIDE PHOTO BAND ---- */
.figband {
  border-top: 2px solid var(--plate-hi);
  border-bottom: 2px solid var(--plate-lo);
  background: var(--zebra);
}
.figband img { width: 100%; height: auto; display: block; }
.figband figcaption {
  background: var(--plate-dk); color: #B6BFC6;
  padding: 8px var(--gutter); font-size: 0.85rem;
}
.figband figcaption b {
  font-family: var(--disp); font-weight: 700; font-style: italic;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-hi); margin-right: 7px;
}

/* ---- PHOTO PLACEHOLDER — states the shot to take ---- */
.slot {
  aspect-ratio: 4 / 3; background: var(--zebra);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 16px; gap: 6px;
}
.figband .slot { aspect-ratio: 3 / 1; min-height: 180px; }
.slot .k {
  font-family: var(--disp); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue);
}
.slot .d { font-size: 0.84rem; line-height: 1.35; color: var(--muted); max-width: 44ch; }

/* ---- BUTTONS — machine controls. Bevel inverts on press. ---- */
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-block;
  font-family: var(--disp);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 12px 28px;
  border-radius: 0; border-style: solid; border-width: 3px;
  transition: background 0.1s, color 0.1s;
}
.btn-solid {
  background: var(--clamp); color: #FFF;
  border-color: var(--clamp-hi) var(--clamp-lo) var(--clamp-lo) var(--clamp-hi);
}
.btn-solid:hover { background: var(--clamp-lo); }
.btn-solid:active { border-color: var(--clamp-lo) var(--clamp-hi) var(--clamp-hi) var(--clamp-lo); }
.btn-line {
  background: var(--card); color: var(--blue);
  border-color: #F2F4F5 #9AA3AA #9AA3AA #F2F4F5;
  outline: 1px solid var(--plate);
}
.btn-line:hover { background: var(--blue); color: #F0F3F5; }
.btn-line:active { border-color: #9AA3AA #F2F4F5 #F2F4F5 #9AA3AA; }

/* ---- TBD — solid straw flag, visibly unfinished ---- */
.tbd { background: var(--straw); color: #fff; font-weight: 600; padding: 0 5px; white-space: nowrap; }

/* ---- FOOTER ---- */
footer { background: var(--plate-dk); color: #A9B3BA; border-top: 3px solid var(--plate-hi); }
footer .inner {
  padding-top: 26px; padding-bottom: 26px;
  display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  font-size: 0.93rem; line-height: 1.6;
}
footer a { color: #A9B3BA; text-decoration: none; }
footer a:hover { color: #fff; }
footer .name { font-family: var(--disp); font-weight: 600; color: #D3D9DD; }

/* ---- RESPONSIVE ---- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  header .inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hd-meta { gap: 22px; }
  .dp-inner { padding: 11px 18px 9px; gap: 15px; }
  .mark { height: 46px; }
  .wordmark-sub { letter-spacing: 0.3em; }
  .figband .slot { aspect-ratio: 2 / 1; }
  nav.bar a { flex: 1 1 50%; font-size: 0.9rem; padding: 12px 10px; }
  nav.bar a:nth-child(2) { border-right: none; }
  nav.bar a:nth-child(3) { border-left: none; }
}
@media (max-width: 520px) {
  .dp-inner { gap: 12px; }
  .mark { height: 38px; }
  .dp-rule { display: none; }
  .wordmark-sub { letter-spacing: 0.2em; }
  .figband .slot { aspect-ratio: 4 / 3; }
  nav.bar .inner { padding: 0; }
  nav.bar a {
    flex: 1 1 100%; border-left: none; border-right: none;
    border-bottom: 1px solid var(--blue-lo);
  }
  nav.bar a:last-child { border-bottom: none; }
}

/* ---- PRINT ---- */
@media print {
  .actions { display: none; }
  body { font-size: 10pt; background: #fff; }
  header, .dataplate, nav.bar, footer, th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scroll-x, figure.fig { break-inside: avoid; }
}

/* ---- DARK — the whole shop goes to gunmetal ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --steel:     #161C21;
    --zebra:     #212A31;
    --card:      #1E272E;
    --plate:     #0F161B;
    --plate-dk:  #0A1015;
    --plate-hi:  #39434B;
    --plate-lo:  #05090C;
    --ink:       #E4E8EA;
    --ink-soft:  #A3ADB4;
    --muted:     #78828A;
    --blue:      #2F6A94;
    --blue-hi:   #5793BC;
    --blue-lo:   #14364D;
    --blue-lift: #3B80B0;
    --clamp:     #D8353B;
    --clamp-hi:  #EE666B;
    --clamp-lo:  #9C1A1F;
    --straw:     #B98544;
    --rule:      #29323A;
  }
  .specpanel, .btn-line, figure.fig {
    border-color: var(--plate-hi) var(--plate-lo) var(--plate-lo) var(--plate-hi);
    outline-color: var(--plate-lo);
  }
  .tbd { color: #0A1015; }
}