@import url("../fonts/fonts.css");

/* ==========================================================================
   Sterling & Nova Archive - Gearshift Garage
   --------------------------------------------------------------------------
   This follows the formatting of www.gearshiftgarage.us so the archive reads
   as part of that site rather than as a separate thing wearing its colours:

     - dark throughout, on the same near-blacks
     - announcement bar, then a centred logo with the tagline beneath it,
       then a centred nav
     - full-bleed image cards with an eyebrow over a Bebas heading
     - alternating image/text bands where the image runs to the page edge
     - Bebas display, Barlow Condensed labels, #CE102C red

   Two departures, both for legibility, because many of the people using this
   archive are in their seventies:

     1. Surfaces are #111113 and #17171A rather than pure black. Light text on
        true black haloes badly for older eyes; off-black fixes most of it.
     2. Long passages are set in Barlow at regular width, 18px, rather than in
        condensed type. The parent site makes the same allowance its own way -
        it ships --font-body-scale: 1.25.

   The one light surface in the whole site is the document reading view, where
   someone may read thousands of words of a scanned manual. That is marked
   `.paper` and is the deliberate exception.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --red: #CE102C;
  --red-dark: #A50D23;
  --red-bright: #F03A50;        /* the brand red lifted just enough to pass AA
                                   on a dark surface; same hue and saturation */

  /* Surfaces, darkest to lightest --------------------------------------- */
  --bg: #0B0B0C;
  --surface: #111113;
  --surface-2: #17171A;
  --surface-3: #202223;
  --line: #2A2A2E;
  --line-2: #3A3A40;

  /* Text ----------------------------------------------------------------- */
  --ink: #EDEDF0;               /* 15.9:1 on --surface */
  --ink-2: #C3C3CB;             /* 10.8:1 on --surface */
  --muted: #9A9AA3;             /*  6.3:1 on --surface */

  /* The document reading view ------------------------------------------- */
  --paper: #F6F5F3;
  --paper-ink: #16161A;
  --paper-ink-2: #3F3F46;
  --paper-line: #DDDCD8;

  --shadow: 0 2px 6px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.35);

  /* Type ----------------------------------------------------------------- */
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --base: 18px;
  --radius: 3px;
  --tap: 48px;
  --wrap: 1280px;
  --nav-h: 50px;          /* measured and republished by app.js */
}

html[data-text="large"]  { --base: 20px; }
html[data-text="larger"] { --base: 23px; }

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

html {
  font-size: var(--base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Headings --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.02;
  color: #fff;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.25rem; }

/* The parent site sets the second word of a headline in red. */
.hl { color: var(--red); }

p { margin: 0 0 1em; max-width: 70ch; color: var(--ink-2); }
a { color: var(--red-bright); text-underline-offset: 3px; }
a:hover { color: #fff; }

.eyebrow {
  font-family: var(--label);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6em;
}
.eyebrow.red { color: var(--red-bright); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--red-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.wrap.narrow { max-width: 880px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #fff; padding: 14px 20px;
  font-family: var(--label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Masthead - announcement bar, centred logo, centred nav
   ========================================================================== */
.announce {
  background: #000;
  color: var(--red-bright);
  font-family: var(--label);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.announce a { color: inherit; }

.masthead { background: var(--bg); padding: 22px 16px 16px; text-align: center; position: relative; }
.masthead .logo { display: inline-block; }
.masthead .logo img { display: block; width: clamp(180px, 22vw, 260px); height: auto; margin-inline: auto; }
.masthead p, .center p, .hero .credit { max-width: none; }
.center p { margin-inline: auto; }
.masthead .tagline {
  font-family: var(--label); font-size: .82rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  margin: 8px 0 0;
}
.masthead .archive-name {
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: .04em; color: #fff; margin: 12px 0 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.masthead .family-line {
  font-family: var(--label); font-size: .88rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 10px 0 0;
}
.masthead .family-line:empty { display: none; }
.marque-switch select {
  width: auto; min-height: 38px; padding: 4px 30px 4px 12px;
  font-family: var(--label); font-size: .95rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--surface-3); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
}
.marque-switch select:hover { color: #fff; border-color: var(--muted); }

/* The utility row sits top-right of the masthead on wide screens and falls
   under it on a phone. */
.utility {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 14px;
}
@media (min-width: 1040px) {
  .utility { position: absolute; top: 24px; right: clamp(16px, 4vw, 40px); margin: 0; }
}
.utility > a.home-link {
  font-family: var(--label); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.utility > a.home-link:hover { color: #fff; }

.textsize { display: flex; align-items: center; gap: 6px; }
.textsize > span {
  font-family: var(--label); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.textsize button {
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--label); font-weight: 600; min-width: 34px; min-height: 32px;
  cursor: pointer; border-radius: 3px; line-height: 1;
}
.textsize button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.textsize button:nth-of-type(1) { font-size: .8rem; }
.textsize button:nth-of-type(2) { font-size: .95rem; }
.textsize button:nth-of-type(3) { font-size: 1.15rem; }

nav.main {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
nav.main .wrap {
  display: flex; align-items: stretch; justify-content: center;
  gap: 2px; flex-wrap: wrap;
}
nav.main a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 clamp(11px, 1.5vw, 19px);
  font-family: var(--label); font-size: 1.02rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
nav.main a:hover { color: #fff; }
nav.main a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }
nav.main a.cta {
  background: var(--red); color: #fff; margin: 7px 0 7px 12px;
  min-height: 34px; border-bottom: 0; border-radius: var(--radius);
  font-weight: 600;
}
nav.main a.cta:hover { background: var(--red-dark); }

@media (max-width: 860px) {
  nav.main .wrap { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  nav.main a { white-space: nowrap; }
}

/* ==========================================================================
   Buttons and form controls
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 26px;
  font-family: var(--label); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--red); color: #fff; border: 2px solid var(--red);
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn.ghost { background: transparent; color: #fff; border-color: var(--line-2); }
.btn.ghost:hover { background: #fff; color: var(--bg); border-color: #fff; }
.btn.dark { background: var(--surface-3); border-color: var(--surface-3); }
.btn.dark:hover { background: #000; border-color: #000; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: .92rem; }

label {
  display: block; font-family: var(--label); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 7px;
}
.field-hint { font-size: .92rem; color: var(--muted); margin: 7px 0 0; }

input[type=text], input[type=search], input[type=email], input[type=number],
input[type=password], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  font-family: var(--body); font-size: 1.05rem; color: var(--ink);
  background: var(--surface-3); border: 2px solid var(--line-2);
  border-radius: var(--radius);
}
textarea { min-height: 140px; padding-top: 12px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8A8A93; }
input:focus, select:focus, textarea:focus { border-color: var(--red); background: #26262a; }
select option { background: var(--surface-3); color: var(--ink); }

/* ==========================================================================
   Layout
   ========================================================================== */
section { scroll-margin-top: calc(var(--nav-h) + 20px); }

.band { padding-block: clamp(40px, 5.5vw, 76px); background: var(--bg); }
.band.alt { background: var(--surface); }
.band.tight { padding-block: clamp(26px, 3vw, 40px); }

.card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pad { padding: clamp(20px, 2.6vw, 30px); }

.grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.four  { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.section-head h2 { margin: 0; }
.section-head .count {
  font-family: var(--label); font-size: 1rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* ==========================================================================
   The hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex; align-items: flex-end;
  background: var(--bg) center/cover no-repeat;
  border-bottom: 3px solid var(--red);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(8,8,9,.94) 0%, rgba(8,8,9,.82) 38%,
                                      rgba(8,8,9,.34) 68%, rgba(8,8,9,.14) 100%);
}
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(36px, 6vw, 72px); width: 100%; }
.hero h1 { max-width: 15ch; margin-bottom: .3em; }
.hero p.lede { font-size: 1.12rem; max-width: 52ch; color: #D8D8DE; }
.hero .credit {
  position: absolute; right: 12px; bottom: 8px; z-index: 2;
  font-family: var(--label); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}

/* ==========================================================================
   Full-bleed image cards - the parent site's main way in
   ========================================================================== */
.bleed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 0;
  border-block: 1px solid var(--line);
}
.bleed-card {
  position: relative; display: block; text-decoration: none;
  min-height: 300px; overflow: hidden; background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 3px solid var(--red);
}
.bleed-card:last-child { border-right: 0; }
.bleed-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55; transition: opacity .3s, transform .5s;
}
.bleed-card:hover img, .bleed-card:focus-visible img { opacity: .8; transform: scale(1.04); }
.bleed-card .txt {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 22px;
  background: linear-gradient(transparent 30%, rgba(8,8,9,.92));
}
.bleed-card .eyebrow { margin-bottom: 4px; }
.bleed-card strong {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: 1.9rem; letter-spacing: .03em; text-transform: uppercase; color: #fff;
  line-height: 1;
}
.bleed-card span.sub { display: block; margin-top: 9px; font-size: .95rem; color: var(--ink-2); }

/* ==========================================================================
   Alternating image / text bands
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.split > .pic { position: relative; min-height: 340px; background: var(--bg); }
.split > .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split > .pic .credit {
  position: absolute; right: 10px; bottom: 8px;
  font-family: var(--label); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.45); padding: 3px 7px; border-radius: 2px;
}
.split > .txt {
  padding: clamp(30px, 4.5vw, 62px) clamp(22px, 4vw, 60px);
  display: flex; flex-direction: column; justify-content: center;
}
.split > .txt h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
/* On a wide screen the picture runs to the page edge, as on the parent site. */
@media (min-width: 1000px) {
  .split.image-left  > .txt { padding-right: max(calc((100vw - var(--wrap)) / 2), 40px); }
  .split.image-right > .pic { order: 2; }
  .split.image-right > .txt { order: 1; padding-left: max(calc((100vw - var(--wrap)) / 2), 40px); }
}

/* Stats ------------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 1px;
         background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--surface); padding: 18px 20px; }
.stat strong {
  display: block; font-family: var(--display); font-size: 2.5rem; line-height: 1;
  letter-spacing: .02em; color: #fff;
}
.stat span {
  display: block; font-family: var(--label); font-size: .86rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: 5px;
}

/* Notices ---------------------------------------------------------------- */
.note {
  border-left: 4px solid var(--red); background: var(--surface-2);
  padding: 17px 21px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 20px;
}
.note p { margin-bottom: .7em; }
.note p:last-child { margin-bottom: 0; }
.note strong { font-family: var(--label); letter-spacing: .07em; text-transform: uppercase; color: #fff; }
.note.plain { border-left-color: var(--line-2); }
.warn { border-left: 4px solid #C9922B; background: #221B0D; padding: 17px 21px;
        border-radius: 0 var(--radius) var(--radius) 0; margin: 20px 0; }
.warn strong { font-family: var(--label); letter-spacing: .07em; text-transform: uppercase; color: #F0C465; }

.tag {
  display: inline-block; font-family: var(--label); font-size: .84rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px;
  background: var(--surface-3); color: var(--ink); border-radius: 2px;
}
.tag.red { background: var(--red); color: #fff; }
.tag.quiet { background: transparent; color: var(--muted); border: 1px solid var(--line-2); }
.tag.green { background: #14532D; color: #B9F0CE; }
.tag.amber { background: #4A3308; color: #F5CE7A; }

/* A tag that is also a link. The provenance tags open the page an entry was
   preserved from, so they have to look reachable without turning a table of
   them into a wall of underlines. */
a.tag { text-decoration: none; cursor: pointer; }
a.tag.quiet:hover, a.tag.quiet:focus-visible {
  color: var(--ink); border-color: var(--red); text-decoration: none;
}

.meta { font-family: var(--label); font-size: .96rem; letter-spacing: .05em; color: var(--muted); }

/* ==========================================================================
   Search and results
   ========================================================================== */
.searchbar { display: flex; gap: 10px; flex-wrap: wrap; }
.searchbar input { flex: 1 1 320px; font-size: 1.12rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
  font-family: var(--label); font-size: .99rem; font-weight: 500; letter-spacing: .06em;
  background: transparent; color: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 999px; cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--muted); color: #fff; }
.chip[aria-pressed="true"], .chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.chip .n { opacity: .75; margin-left: 7px; font-size: .9em; }

.result {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--line-2); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 12px;
}
.result:hover, .result:focus-within { border-left-color: var(--red); }
.result h3 {
  font-family: var(--body); font-weight: 600; text-transform: none;
  font-size: 1.2rem; line-height: 1.3; letter-spacing: 0; margin: 0 0 7px; color: #fff;
}
.result h3 a { color: #fff; text-decoration: none; }
.result h3 a:hover { color: var(--red-bright); text-decoration: underline; }
.result .line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 9px; }
.result p { font-size: .98rem; color: var(--ink-2); margin: 0 0 10px; }
.result mark { background: #6B5510; color: #FFE9A8; padding: 0 3px; border-radius: 2px; }
.result .foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
                font-family: var(--label); font-size: .96rem; letter-spacing: .05em; }

.empty { text-align: center; padding: 54px 20px; color: var(--muted); }
.empty h3 { font-family: var(--display); font-size: 2rem; color: #fff; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.shot {
  position: relative; display: block; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--ink); cursor: pointer;
  padding: 0; width: 100%; text-align: left;
}
.shot img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--surface-3); }
.shot figcaption {
  padding: 10px 12px; font-size: .92rem; line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shot:hover, .shot:focus-visible { border-color: var(--red); }
.shot:hover figcaption { color: #fff; }

dialog.lightbox { border: 0; padding: 0; background: transparent;
                  max-width: min(1200px, 94vw); max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(0,0,0,.9); }
.lightbox .frame { background: var(--surface); border: 1px solid var(--line);
                   border-radius: var(--radius); overflow: hidden; }
.lightbox img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #000; }
/* A thumbnail standing in for a missing full-size copy: let it fill the frame
   rather than sit tiny in the middle, and keep it from looking sharp-edged. */
.lightbox img.is-thumb { image-rendering: auto; min-height: 40vh; }
.lightbox .info { padding: 16px 20px; }
.lightbox .info h3 { font-family: var(--body); font-weight: 600; text-transform: none;
                     font-size: 1.15rem; letter-spacing: 0; margin-bottom: 8px; }
.lightbox .info p { font-size: .95rem; margin: 0 0 7px; }
/* Stated provenance for a photograph with no page to link to. Sits where the
   source button would be, so the origin is always in the same place. */
.lightbox .lb-origin { padding: 0 20px 14px; margin: 0; font-size: .92rem; }
.lightbox .bar { display: flex; gap: 10px; justify-content: space-between; align-items: center;
                 padding: 12px 20px; background: var(--surface-2); flex-wrap: wrap;
                 border-top: 1px solid var(--line); }

/* Document cards ---------------------------------------------------------- */
.doc-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 18px;
  padding: 16px; text-decoration: none; color: inherit; align-items: start;
  transition: border-color .15s;
}
.doc-card:hover { border-color: var(--red); }
.doc-cover { display: block; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.doc-cover img { display: block; width: 120px; height: 156px; object-fit: cover;
                 object-position: top; background: #fff; }
.doc-cover.no-cover { display: flex; align-items: center; justify-content: center;
                      width: 120px; height: 156px; }
.doc-cover.no-cover img { display: none; }
.doc-cover.no-cover::after { content: "PDF"; font-family: var(--label); font-size: 1.1rem;
                             letter-spacing: .18em; color: var(--muted); }
.doc-body { display: block; min-width: 0; }
.doc-title { display: block; font-family: var(--body); font-weight: 600; font-size: 1.14rem;
             line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.doc-card:hover .doc-title { color: var(--red-bright); }
.doc-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
               overflow: hidden; font-size: .95rem; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 520px) { .doc-card { grid-template-columns: 84px 1fr; }
  .doc-cover img, .doc-cover.no-cover { width: 84px; height: 110px; } }

/* ==========================================================================
   Registry
   ========================================================================== */
.reg-table { width: 100%; border-collapse: collapse; background: var(--surface-2); }
.reg-table th, .reg-table td {
  text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.reg-table th {
  font-family: var(--label); font-size: .92rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--surface); border-bottom: 2px solid var(--line-2);
  position: sticky; top: var(--nav-h); z-index: 5;
}
.reg-table td { color: var(--ink-2); }
.reg-table tbody tr:hover { background: var(--surface-3); }
.reg-table .serial {
  font-family: var(--label); font-weight: 600; font-size: 1.14rem; letter-spacing: .05em;
  color: #fff; text-decoration: none;
}
.reg-table .serial:hover { color: var(--red-bright); text-decoration: underline; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 9px 20px; margin: 0; }
.kv dt { font-family: var(--label); font-size: .96rem; letter-spacing: .1em;
         text-transform: uppercase; color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site { background: #000; color: var(--muted); padding-block: 46px; margin-top: 56px;
              border-top: 3px solid var(--red); }
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site h4 { font-family: var(--label); font-weight: 600; font-size: .94rem;
                 letter-spacing: .18em; color: #fff; margin-bottom: 13px; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 9px; }
footer.site .legal { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 22px;
                     font-size: .92rem; line-height: 1.65; }
footer.site .legal p { color: var(--muted); max-width: 88ch; }

/* ==========================================================================
   Garage guides
   ========================================================================== */
.guide { max-width: 860px; }
.guide-hero {
  position: relative; background: var(--surface) center/cover no-repeat;
  padding-block: clamp(40px, 6vw, 78px); border-bottom: 3px solid var(--red);
}
.guide-hero::after { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(100deg, rgba(8,8,9,.95), rgba(8,8,9,.6)); }
.guide-hero .wrap { position: relative; z-index: 1; }

.guide-toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.guide-toc li { counter-increment: toc; }
.guide-toc a { display: block; padding: 12px 0 12px 36px; position: relative;
               color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line);
               font-size: .98rem; min-height: var(--tap); }
.guide-toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0;
                       font-family: var(--label); font-weight: 600; color: var(--red-bright);
                       letter-spacing: .05em; }
.guide-toc a:hover { color: #fff; }

.guide section.step { margin-bottom: 50px; }
.guide section.step > .num { font-family: var(--display); font-size: 1.5rem; color: var(--red-bright);
                             letter-spacing: .08em; display: block; margin-bottom: 3px; }
.guide h3 { font-size: 2rem; margin-bottom: 15px; }
.guide h4 { font-size: 1.2rem; font-family: var(--body); text-transform: none;
            letter-spacing: 0; font-weight: 600; margin: 27px 0 9px; color: #fff; }
.guide p, .guide li { font-size: 1.04rem; line-height: 1.72; color: var(--ink-2); }
.guide ul, .guide ol { padding-left: 24px; }
.guide li { margin-bottom: 10px; }
.guide .checklist { list-style: none; padding-left: 0; }
.guide .checklist li { padding-left: 36px; position: relative; }
.guide .checklist li::before { content: ""; position: absolute; left: 0; top: .45em;
                               width: 18px; height: 18px; border: 2px solid var(--red); border-radius: 3px; }
.guide table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.guide th, .guide td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line);
                       vertical-align: top; font-size: .98rem; color: var(--ink-2); }
.guide th { font-family: var(--label); font-size: .92rem; letter-spacing: .12em;
            text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line-2); }
.guide .sources { border-top: 3px solid var(--red); padding-top: 19px; margin-top: 19px; }
.guide .sources li { font-size: .97rem; }

/* ==========================================================================
   The document reading view - the one light surface in the site
   Reading several thousand words of a scanned manual on a dark background is
   genuinely worse, so this view alone is set on paper.
   ========================================================================== */
.paper { background: var(--paper); color: var(--paper-ink); border-radius: var(--radius); }
.paper h2, .paper h3, .paper h4 { color: var(--paper-ink); }
.paper p, .paper li, .paper td { color: var(--paper-ink-2); }
.paper a { color: var(--red-dark); }
.paper a:hover { color: var(--red); }
.paper .meta { color: #5C5C66; }
.passage { background: var(--paper); border: 1px solid var(--paper-line);
           border-radius: var(--radius); padding: 24px 28px; margin-bottom: 14px; }
.passage p { font-size: 1.03rem; color: var(--paper-ink-2); white-space: pre-wrap; margin: 0; }
.passage .seq { font-family: var(--label); letter-spacing: .12em; text-transform: uppercase;
                color: #6B6B75; font-size: .86rem; margin-bottom: 8px; }

/* Utilities --------------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px;
                   padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--line-2);
           border-top-color: var(--red); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) { .guide-toc { position: static; } }
@media (max-width: 720px) {
  .reg-table th { position: static; }
  .bleed-card { min-height: 235px; border-right: 0; }
}

@media print {
  .announce, .masthead, nav.main, footer.site, .btn, .chips { display: none; }
  body, .card, .result { background: #fff; color: #000; }
  .guide p, .guide li { color: #222; }
}