/* =========================================================================
   Routehold design system — "Roadbook"
   Single source of truth for every page in site/.
   Load once per page, before any page-specific <style>.

   Committed to a light, paper-toned ground. This is deliberate: seven of the
   nine competitor sites are dark with a warm accent, so light is the cheapest
   available differentiation. There is no dark theme. color-scheme is pinned
   to light so native form controls do not invert underneath us.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root{
  color-scheme: light;

  /* Ground and ink.
     Paper is warm but desaturated — it must not read as cream, which is the
     single most over-used AI-site background. */
  --paper:        #EFEBE1;   /* page ground */
  --panel:        #F6F3EB;   /* roadbook body, raised surfaces */
  --ink:          #1C1A16;   /* primary text, structural rules */
  --ink-2:        #4A463D;   /* body copy, secondary */
  --ink-3:        #6A6455;   /* labels, captions, table headers */
  --rule:         #C9C2B2;   /* hairlines inside panels */
  --rule-strong:  #1C1A16;   /* structural rules: nav underline, section head */

  /* Accent. Used for the route line and nothing else.
     If it appears more than twice on a page, something is wrong. */
  --accent:       #C2551F;
  --on-accent:    #EFEBE1;

  /* Status. Distinct from the accent on purpose. */
  --good:         #2E6B4F;
  --warn:         #A8322A;

  /* Type. All three are on Google Fonts under open licences.
     Display  — Libre Franklin 800, tight, left-aligned, never centred
     Body     — Source Serif 4, the only serif in the category
     Data     — IBM Plex Mono, for waypoints, distances, labels, nav */
  --f-display: "Libre Franklin", system-ui, -apple-system, sans-serif;
  --f-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale. Six sizes. Do not invent a seventh. */
  --t-display: clamp(38px, 6vw, 64px);
  --t-h2:      30px;
  --t-h3:      21px;
  --t-lead:    20px;
  --t-body:    17px;
  --t-small:   15px;
  --t-label:   11px;   /* mono, uppercase, tracked */

  --lh-display: 1.03;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  /* Spacing scale. Eight steps, 4px base. Every margin and padding in the
     site comes from this list. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  /* Radius BY ROLE, not by taste. The old site had eight radii with no rule.
     Roadbook is a paper document, so structure is square. */
  --r-flat:    0;     /* rules, table cells, roadbook — the default */
  --r-control: 2px;   /* buttons, inputs */
  --r-panel:   3px;   /* raised panels, images */
  /* There is no pill radius. Pills were tell 03 and 04 in the audit. */

  --maxw:      1080px;
  --maxw-prose: 68ch;
  --border:    1px;
  --border-strong: 1.5px;
}

/* ---------- 2. RESET AND BASE -------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/var(--lh-body) var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 3. LAYOUT ---------------------------------------------------- */

.wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); }
@media (max-width: 640px){ .wrap{ padding-inline: var(--s4); } }

.band{ padding-block: var(--s9); }
.band + .band{ border-top: var(--border) solid var(--rule); }
@media (max-width: 640px){ .band{ padding-block: var(--s8); } }

.prose{ max-width: var(--maxw-prose); }

/* Two-column split. Text left, artefact right. Never centred. */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; gap: var(--s6); } }

/* ---------- 4. TYPOGRAPHY ------------------------------------------------ */

h1, h2, h3{ margin: 0; font-family: var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }

h1, .display{
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  max-width: 16ch;
}

h2{ font-weight: 800; font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: -0.024em; }
h3{ font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-heading); letter-spacing: -0.018em; }

p{ margin: 0 0 var(--s4); max-width: var(--maxw-prose); }
p:last-child{ margin-bottom: 0; }

.lead{ font-size: var(--t-lead); color: var(--ink-2); max-width: 46ch; }
.small{ font-size: var(--t-small); color: var(--ink-2); }
.muted{ color: var(--ink-3); }

/* The only uppercase device on the site. A label, on its own line, above a
   rule. It replaces the four all-caps pills the old site used. */
.label{
  font: 600 var(--t-label)/1 var(--f-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: var(--s3);
}

/* Section heading: label, then heading, then a full-width rule beneath. */
.sechead{ border-bottom: var(--border-strong) solid var(--rule-strong); padding-bottom: var(--s3); margin-bottom: var(--s6); }

/* ---------- 5. NAVIGATION ------------------------------------------------ */

.nav{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: var(--border-strong) solid var(--rule-strong);
}
.nav__brand{
  display: flex; align-items: center; gap: var(--s3);
  font: 600 var(--t-label)/1 var(--f-data);
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
}
.nav__brand img{ width: 26px; height: 26px; border-radius: var(--r-panel); }
.nav__links{ display: flex; gap: var(--s5); }
.nav__links a{
  font: 600 var(--t-label)/1 var(--f-data);
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-3);
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color: var(--ink); }
@media (max-width: 560px){
  .nav{ flex-wrap: wrap; gap: var(--s3); }
  .nav__links{ width: 100%; gap: var(--s4); }
}

/* ---------- 6. BUTTONS --------------------------------------------------- */

.btn{
  display: inline-block;
  font: 600 12px/1 var(--f-data);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--s3) var(--s5);
  border: var(--border-strong) solid var(--ink);
  border-radius: var(--r-control);
  background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.btn:hover{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--ghost{ background: transparent; color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- 7. THE ROADBOOK ---------------------------------------------- */
/* The signature component. A rally roadbook is a route someone else planned
   that you follow precisely without deviating, which is the product. Use it
   on the home page hero and anywhere a route needs showing. Real data only —
   a route actually ridden, with real waypoints and real distances. */

.roadbook{
  border: var(--border-strong) solid var(--ink);
  background: var(--panel);
  border-radius: var(--r-flat);
  display: grid;
  grid-template-columns: 68px 1fr 104px;
  font: 500 13px/1.5 var(--f-data);
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
}
.roadbook > div{ padding: var(--s3) var(--s4); border-right: var(--border) solid var(--rule); }
.roadbook > div:nth-child(3n){ border-right: none; text-align: right; }
.roadbook > div:nth-child(n+4){ border-top: var(--border) solid var(--rule); }
.roadbook__h{
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: var(--border-strong) solid var(--ink) !important;
  border-top: none !important;
}
/* A diverted leg. The one place the accent is allowed inside the table. */
.roadbook .is-divert{ color: var(--accent); }

@media (max-width: 560px){
  .roadbook{ grid-template-columns: 52px 1fr 84px; font-size: 12px; }
  .roadbook > div{ padding: var(--s2) var(--s3); }
}

/* ---------- 8. SPEC LIST ------------------------------------------------- */
/* Replaces the sixteen bordered cards. Facts on hairlines, not in boxes. */

.spec{ border-top: var(--border) solid var(--rule); margin: 0; }
.spec__row{
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5);
  padding-block: var(--s3);
  border-bottom: var(--border) solid var(--rule);
  font: 500 14px/1.5 var(--f-data);
}
.spec__row dt{ color: var(--ink-3); }
.spec__row dd{ margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- 9. FIGURE / PANEL -------------------------------------------- */

.panel{
  background: var(--panel);
  border: var(--border) solid var(--rule);
  border-radius: var(--r-panel);
  padding: var(--s5);
}
figure{ margin: 0; }
figcaption{ font: 500 13px/1.5 var(--f-data); color: var(--ink-3); margin-top: var(--s3); }

/* ---------- 10. FOOTER --------------------------------------------------- */

.foot{
  border-top: var(--border-strong) solid var(--rule-strong);
  padding-block: var(--s6) var(--s8);
  font: 400 var(--t-small)/1.6 var(--f-body);
  color: var(--ink-3);
}
.foot a{ color: var(--ink-3); }
.foot__row{ display: flex; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s4); }
.foot__row a{
  font: 600 var(--t-label)/1 var(--f-data);
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}

/* ---------- 11. FORMS ---------------------------------------------------- */

label{ display: block; font: 600 var(--t-label)/1 var(--f-data);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
input, textarea, select{
  width: 100%; font: 400 var(--t-body)/1.5 var(--f-body);
  color: var(--ink); background: var(--panel);
  border: var(--border) solid var(--ink-3); border-radius: var(--r-control);
  padding: var(--s3) var(--s4);
}
input:focus-visible, textarea:focus-visible{ border-color: var(--accent); }

/* ---------- 12. FAQ ACCORDION -------------------------------------------- */
/* Used only by the generated faq.html. It lives here rather than in the CMS
   Lambda so there stays exactly one source of design. Rows on hairlines, not
   rounded cards. See MIGRATION.md step 2. */

.qa{ border-top: var(--border) solid var(--rule); }
.qa details{ border-bottom: var(--border) solid var(--rule); }

.qa summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0;
  font: 600 var(--t-h3)/1.3 var(--f-display);
  color: var(--ink);
}
.qa summary::-webkit-details-marker{ display: none; }
.qa summary::after{
  content: "+"; margin-left: auto; flex: none;
  font: 500 var(--t-small)/1 var(--f-data); color: var(--ink-3);
}
.qa details[open] > summary::after{ content: "\2212"; }
.qa summary:hover{ color: var(--accent); }
.qa summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.qa__a{ padding: 0 0 var(--s5); max-width: 68ch; }
.qa__a > * + *{ margin-top: var(--s4); }
.qa__a p{ font: 400 var(--t-body)/1.6 var(--f-body); color: var(--ink-2); }
.qa__a code{ font: 500 var(--t-small)/1 var(--f-data); color: var(--ink); }
.qa__a a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.qa__a a:hover{ color: var(--accent); }

/* ---------- 13. UTILITIES ------------------------------------------------ */

.stack > * + *{ margin-top: var(--s4); }
.stack-lg > * + *{ margin-top: var(--s6); }
.tabular{ font-variant-numeric: tabular-nums; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================================
   BANNED. Do not reintroduce. Each of these was measured on the old site and
   is a documented tell of machine-generated design. See reference/audit.md.

     - the operating-system font stack (use the three faces above)
     - any linear-gradient, on text or on a surface
     - pill-shaped badges above headings, or as section labels
     - more than the three radii declared in this file
     - centred headings or centred body copy
     - repeated hairline-bordered cards used for every block
     - a dark theme bolted on top of this one
   ========================================================================= */