/* ---------------------------------------------------------------------------
   A public consumer site, so it is warm paper rather than the dark instrument
   the dealer console is. Sibling, not twin.

   The idea the whole design hangs on: this is a PUBLIC LEDGER. Warm ivory
   stock, editorial serif for the prose, and every checkable thing (a count, a
   date, an identifier) set in mono and hung in the left margin so a reader can
   run a finger down the figures without reading a word.

   Two things here are constraints rather than taste:
   * There is no url() anywhere except the self-hosted fonts. The site sets
     img-src 'none' so it cannot load an image, including a CSS background
     image, so every texture in here is drawn with gradients.
   * Bar widths are the .pw-N classes at the bottom, not style attributes, so
     the page needs no inline CSS and the CSP can stay strict.
--------------------------------------------------------------------------- */

/* Fonts are self-hosted: a trust page should not have to phone a third party
   to render, and a phone in a showroom is on bad signal. */
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/static/fonts/hanken-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/static/fonts/hanken-latin-ext.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:      #f6f0e5;
  --paper-2:    #fffdf7;
  --paper-3:    #efe7d8;
  --ink:        #221c16;
  --ink-2:      #5b5044;
  --ink-3:      #7a6c5c;
  --rule:       #ded1bc;
  --rule-2:     #ece2d1;
  --clay:       #a8431c;
  --clay-2:     #f2e1d5;
  --ochre:      #9a7420;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gap: clamp(1.75rem, 5vw, 3.25rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #16120e;
    --paper-2: #1e1813;
    --paper-3: #241d17;
    --ink:     #f2e9dc;
    --ink-2:   #c6b8a4;
    --ink-3:   #a1917d;
    --rule:    #3a3026;
    --rule-2:  #2b231b;
    --clay:    #e69152;
    --clay-2:  #33241a;
    --ochre:   #d5aa5c;
  }
}

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

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

body {
  margin: 0;
  background-color: var(--paper);
  /* A single soft wash from the masthead downwards, so the top of the page
     reads as lit paper rather than a flat fill. Ruling is left to the
     structural hairlines between rows: actual ledger paper under the prose
     turned out to fight the text at reading size. Gradients only, no image. */
  background-image: linear-gradient(to bottom,
    var(--paper-2) 0, rgba(255, 253, 247, 0) 420px);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
}

.shell { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'ss02';
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

a { color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.12;
             letter-spacing: -0.012em; font-optical-sizing: auto; margin: 0; }

/* --- masthead ------------------------------------------------------------ */

.masthead { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.masthead__in {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding: 1rem 0 0.9rem;
}
.wordmark { text-decoration: none; color: var(--ink); display: block; }
.wordmark__name {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.3rem; letter-spacing: -0.02em;
}
.wordmark__line {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-3);
  margin-top: 0.2rem;
}
.wordmark:hover .wordmark__name { color: var(--clay); }

.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.nav a {
  font-size: 0.9rem; color: var(--ink-2); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* --- hero ---------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.17em; color: var(--ink-3); margin: 0 0 1rem;
}
.eyebrow a { color: var(--ink-3); text-decoration: none;
             border-bottom: 1px solid var(--rule); }
.eyebrow a:hover { color: var(--clay); border-bottom-color: var(--clay); }

.hero { padding: clamp(2.5rem, 8vw, 4.75rem) 0 0; position: relative; max-width: 46rem; }
.hero__h {
  font-size: clamp(2.35rem, 8.2vw, 4.15rem);
  font-weight: 460; letter-spacing: -0.028em; line-height: 1.0;
  margin-bottom: 1.5rem; text-wrap: balance;
}
.hero__lede { font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--ink-2);
              max-width: 34rem; margin: 0 0 1rem; }
.hero__act { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 1.5rem; }
.hero__meta { font-size: 0.72rem; text-transform: uppercase;
              letter-spacing: 0.14em; color: var(--ink-3); margin: 0; }

/* The measurement tick strip. This is the site's one piece of ornament and it
   is a ruler, which is the whole idea of the place. Gradients only. */
.hero::after {
  content: ''; display: block; height: 14px; margin-top: clamp(2rem, 6vw, 3rem);
  background-image:
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 12px),
    linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px);
  background-size: 100% 7px, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: bottom left, top left;
}

.btn {
  display: inline-block; font-family: var(--body); font-size: 0.95rem;
  font-weight: 550; text-decoration: none; padding: 0.68rem 1.35rem;
  background: var(--clay); color: #fffaf3; border: 1px solid var(--clay);
  border-radius: 2px;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-2); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* --- generic page head --------------------------------------------------- */

.page-head { padding: clamp(2rem, 6vw, 3.25rem) 0 0; max-width: 44rem; }
.page-h { font-size: clamp(1.95rem, 6vw, 3.1rem); font-weight: 460;
          letter-spacing: -0.026em; text-wrap: balance; }
.page-lede { font-size: clamp(1rem, 2.2vw, 1.13rem); color: var(--ink-2);
             margin: 1.1rem 0 0; max-width: 34rem; }
.page-sub { font-size: 0.82rem; color: var(--ink-3); margin: 0.85rem 0 0;
            letter-spacing: 0.01em; }
.page-sub a { color: var(--ink-3); }
.page-sub a:hover { color: var(--clay); }

/* --- bands --------------------------------------------------------------- */

.band { padding: var(--gap) 0; border-top: 1px solid var(--rule); margin-top: var(--gap); }
/* The tick strip under the hero is already a divider; a rule 40px under it
   would just be two lines doing one job. */
.hero + .band { border-top: none; margin-top: 0; }
.band--last { border-bottom: 1px solid var(--rule); margin-bottom: var(--gap); }
.band__h { font-size: clamp(1.35rem, 3.4vw, 1.75rem); font-weight: 500; }
.band__sub { font-size: 1.05rem; font-weight: 600; margin: 2.25rem 0 0.75rem;
             font-family: var(--body); letter-spacing: 0; }
.band__lede { color: var(--ink-2); max-width: 36rem; margin: 0.9rem 0 1.75rem; }
.band__foot { font-size: 0.85rem; color: var(--ink-3); margin: 1.5rem 0 0;
              max-width: 36rem; }

/* --- home: cards --------------------------------------------------------- */

.cards { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 46em) { .cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.card {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 2px; padding: 1.4rem 1.4rem 1.5rem;
}
.card__fig { font-size: 0.72rem; color: var(--clay); margin: 0 0 1.6rem;
             letter-spacing: 0.1em; }
.card__h { font-size: 1.18rem; font-weight: 550; margin-bottom: 0.55rem; }
.card p { margin: 0; color: var(--ink-2); font-size: 0.96rem; }

/* --- home: the quiet caveat panel ---------------------------------------- */

.note {
  margin-top: var(--gap); padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--paper-3); border-radius: 2px;
  border-left: 3px solid var(--ochre);
}
.note__h { font-size: 1.25rem; font-weight: 550; margin-bottom: 0.85rem; }
.note p { margin: 0 0 0.85rem; color: var(--ink-2); max-width: 38rem; }
.note p:last-child { margin-bottom: 0; }

/* --- home: questions ----------------------------------------------------- */

.asks { list-style: none; counter-reset: ask; margin: 1.75rem 0 0; padding: 0; }
.asks li {
  counter-increment: ask; border-top: 1px solid var(--rule-2);
  padding: 1.1rem 0 1.1rem 2.6rem; position: relative;
}
.asks li::before {
  content: counter(ask); position: absolute; left: 0; top: 1.15rem;
  font-family: var(--mono); font-size: 0.8rem; color: var(--clay);
}
.asks__q { margin: 0; font-weight: 550; font-size: 1.02rem; }
.asks__w { margin: 0.3rem 0 0; color: var(--ink-3); font-size: 0.92rem; }

/* --- search -------------------------------------------------------------- */

.find { margin-top: 1.5rem; max-width: 32rem; }
.find--wide { margin-top: 2rem; }
.find__label { display: block; font-family: var(--mono); font-size: 0.7rem;
               text-transform: uppercase; letter-spacing: 0.13em;
               color: var(--ink-3); margin-bottom: 0.5rem; }
.find__row { display: flex; gap: 0.5rem; }
.find__in {
  flex: 1 1 auto; min-width: 0; font-family: var(--body); font-size: 1rem;
  padding: 0.62rem 0.8rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px;
}
.find__in::placeholder { color: var(--ink-3); }
.find__in:focus { border-color: var(--clay); }

/* --- state grid ---------------------------------------------------------- */

.states { list-style: none; margin: 1.75rem 0 0; padding: 0;
          display: grid; gap: 1px; background: var(--rule-2);
          grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
          border: 1px solid var(--rule-2); }
.state__a {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; padding: 0.7rem 0.85rem; text-decoration: none;
  background: var(--paper-2); color: var(--ink); font-size: 0.95rem;
}
.state__a:hover { background: var(--clay-2); color: var(--clay); }
.state__n { font-size: 0.78rem; color: var(--ink-3); }
.state__a:hover .state__n { color: var(--clay); }

/* --- dealer lists -------------------------------------------------------- */

.rooftops { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.band > .rooftops:first-child { margin-top: 0; }
.rooftop { border-top: 1px solid var(--rule-2); }
.rooftop:last-child { border-bottom: 1px solid var(--rule-2); }
.rooftop__a {
  display: grid; gap: 0.15rem; padding: 0.95rem 0.4rem;
  text-decoration: none; color: var(--ink);
}
.rooftop__a:hover { background: var(--paper-2); }
.rooftop__name { font-weight: 550; font-size: 1.05rem; }
.rooftop__a:hover .rooftop__name { color: var(--clay); }
.rooftop__where { font-size: 0.76rem; color: var(--ink-3);
                  text-transform: uppercase; letter-spacing: 0.09em; }
.rooftop__facts { font-size: 0.78rem; color: var(--ink-2); }
@media (min-width: 52em) {
  .rooftop__a { grid-template-columns: 18rem 9rem 1fr; align-items: baseline;
                gap: 1.25rem; }
  .rooftop__facts { text-align: right; }
}

.pager { display: flex; gap: 1.5rem; align-items: baseline; margin-top: 1.75rem;
         font-size: 0.85rem; color: var(--ink-3); }

.empty { color: var(--ink-2); max-width: 36rem; background: var(--paper-3);
         padding: 1.25rem; border-radius: 2px; margin: 1.5rem 0 0; }

/* --- the measurement stamp ----------------------------------------------- */
/* Every figure on a dealer page belongs to this block. It is deliberately the
   most visually distinct thing on the page after the dealer's name. */

.stamp {
  margin-top: 2rem; padding: 1.15rem 1.35rem; max-width: 48rem;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--clay); border-radius: 2px;
}
.stamp__k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.19em;
            color: var(--clay); margin: 0 0 0.5rem; }
.stamp__t { margin: 0; font-size: 1.02rem; }
.stamp__t strong { font-family: var(--mono); font-weight: 500; font-size: 0.94em; }
.stamp__n { margin: 0.6rem 0 0; font-size: 0.87rem; color: var(--ink-3);
            max-width: 40rem; }
.stamp--none { border-left-color: var(--ink-3); }
.stamp--none .stamp__k { color: var(--ink-3); }
.stamp--none p:last-child { margin: 0; color: var(--ink-2); max-width: 40rem; }
.stamp--flat { border-left-color: var(--ochre); }
.stamp--flat .stamp__k { color: var(--ochre); }

/* --- the ledger ---------------------------------------------------------- */

.ledger { padding: var(--gap) 0 0; border-top: 1px solid var(--rule);
          margin-top: var(--gap); }
.row { padding: 1.6rem 0; border-bottom: 1px solid var(--rule-2); }
.row--lead { padding-top: 1.9rem; }
.row__fig {
  font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 450; line-height: 1;
  letter-spacing: -0.035em; color: var(--ink); margin: 0 0 0.6rem;
}
.row__h { font-size: 1.08rem; font-weight: 600; font-family: var(--body);
          letter-spacing: 0; margin-bottom: 0.5rem; }
.row__body p { margin: 0 0 0.7rem; color: var(--ink-2); max-width: 38rem; }
.row__body p:last-child { margin-bottom: 0; }
.row__caveat { font-size: 0.9rem; color: var(--ink-3) !important;
               border-left: 2px solid var(--rule); padding-left: 0.9rem; }

@media (min-width: 50em) {
  /* The figures hang in the margin so the column of numbers can be read on
     its own, top to bottom, without reading any prose. */
  .row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 2.25rem; }
  .row__fig { text-align: right; margin: 0; }
}

/* Proportion bar. Solid for listings carrying an identifier, hatched for
   those carrying none: hatching reads as "nothing recorded here", where a
   second solid colour would read as a mark against somebody. */
.share { display: flex; height: 0.85rem; margin: 0.2rem 0 0.55rem;
         max-width: 30rem; border: 1px solid var(--rule); border-radius: 1px;
         overflow: hidden; background: var(--paper-2); }
.share__seg { display: block; height: 100%; }
.share__seg--conf { background: var(--clay); }
.share__seg--unconf {
  background-image: repeating-linear-gradient(
    -45deg, var(--rule) 0 2px, transparent 2px 6px);
}
.share__key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
              font-size: 0.72rem; color: var(--ink-3); margin: 0 0 0.9rem;
              text-transform: uppercase; letter-spacing: 0.08em; }
.key { display: inline-flex; align-items: center; gap: 0.4rem; }
.key::before { content: ''; width: 0.62rem; height: 0.62rem; flex: none;
               border: 1px solid var(--rule); }
.key--conf::before { background: var(--clay); border-color: var(--clay); }
.key--unconf::before {
  background-image: repeating-linear-gradient(
    -45deg, var(--rule) 0 2px, transparent 2px 5px);
}

/* --- fee wording checks -------------------------------------------------- */
/* Three states, three visual treatments, and the third one is not a result:
   found (filled), no occurrence found (hollow), not measured (no mark at all,
   dotted rule, greyed). A reader must never mistake our gap for their gap. */

.checks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.check {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.15rem 0.75rem;
  padding: 0.95rem 0; border-top: 1px solid var(--rule-2);
  grid-template-areas: 'mark label' '. result' '. phrases';
}
.check:last-child { border-bottom: 1px solid var(--rule-2); }
.check__mark { grid-area: mark; width: 0.72rem; height: 0.72rem;
               margin-top: 0.42rem; border: 1px solid var(--ink-3); }
.check--yes .check__mark { background: var(--ink); border-color: var(--ink); }
.check__label { grid-area: label; font-weight: 550; }
.check__result { grid-area: result; font-size: 0.78rem; color: var(--ink-2);
                 text-transform: uppercase; letter-spacing: 0.09em; }
.check__phrases { grid-area: phrases; font-size: 0.72rem; color: var(--ink-3);
                  margin-top: 0.25rem; }
@media (min-width: 48em) {
  .check { grid-template-columns: 1.1rem 16rem 1fr;
           grid-template-areas: 'mark label result' '. phrases phrases';
           align-items: baseline; }
  .check__result { text-align: left; }
  .check__phrases { grid-column: 2 / -1; }
}

.checks--unmeasured { margin-top: 0.5rem; }
.check--unmeasured { border-top-style: dotted; border-top-color: var(--rule);
                     color: var(--ink-3); }
.check--unmeasured:last-child { border-bottom-style: dotted; }
.check--unmeasured .check__label { font-weight: 450; color: var(--ink-3); }
.check--unmeasured .check__result { color: var(--ink-3); font-style: italic;
                                    text-transform: none; letter-spacing: 0; }
.check--unmeasured .check__mark { border-style: dotted; border-color: var(--rule);
                                  background: transparent; }

/* --- listings ------------------------------------------------------------ */

.units { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.unit { padding: 0.85rem 0; border-top: 1px solid var(--rule-2); }
.unit:last-child { border-bottom: 1px solid var(--rule-2); }
.unit__t { margin: 0; font-size: 1rem; font-weight: 500; }
.unit__m { margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--ink-2);
           display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; }
.unit__m .dim { color: var(--ink-3); }
.tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
       border: 1px solid var(--rule); padding: 0.1rem 0.4rem; color: var(--ink-3); }
.tag--cat { border-style: dashed; }

/* --- prose pages --------------------------------------------------------- */

.prose { max-width: 38rem; padding: var(--gap) 0; }
.prose h2 { font-size: clamp(1.25rem, 3.2vw, 1.55rem); font-weight: 500;
            margin: 2.5rem 0 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; color: var(--ink-2); }
.prose ul, .prose ol { color: var(--ink-2); padding-left: 1.15rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--ink); font-weight: 600; }

.phrases { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.5rem;
           font-size: 0.9rem; text-align: left; }
.phrases th, .phrases td { padding: 0.6rem 0.75rem 0.6rem 0;
                           border-bottom: 1px solid var(--rule-2);
                           vertical-align: top; }
.phrases thead th { font-family: var(--mono); font-size: 0.68rem;
                    text-transform: uppercase; letter-spacing: 0.12em;
                    color: var(--ink-3); font-weight: 400;
                    border-bottom-color: var(--rule); }
.phrases tbody th { font-weight: 550; color: var(--ink); padding-right: 1.25rem; }
.phrases td { font-size: 0.78rem; color: var(--ink-2); }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.25rem 0; }
.steps li { counter-increment: step; position: relative; padding-left: 2.4rem;
            margin-bottom: 1.25rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0.05rem;
                    font-family: var(--mono); font-size: 0.8rem; color: var(--clay); }
.steps__h { margin: 0 0 0.25rem; font-weight: 600; color: var(--ink); }
.steps p { margin: 0; }

/* --- the worksheet ask --------------------------------------------------- */

.ask { margin-top: var(--gap); padding: clamp(1.5rem, 4vw, 2.25rem);
       background: var(--paper-2); border: 1px solid var(--rule);
       border-radius: 2px; }
.ask__h { font-size: clamp(1.2rem, 3.2vw, 1.5rem); font-weight: 500;
          margin-bottom: 0.9rem; max-width: 30rem; text-wrap: balance; }
.ask p { margin: 0 0 0.85rem; color: var(--ink-2); max-width: 38rem;
         font-size: 0.96rem; }
.ask__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
            margin-top: 1.35rem; }
.ask__note { font-size: 0.7rem; color: var(--ink-3); text-transform: uppercase;
             letter-spacing: 0.1em; }

/* --- affiliate slot ------------------------------------------------------ */

.slot { margin-top: var(--gap); padding: 1.35rem;
        border: 1px dashed var(--rule); border-radius: 2px; }
.slot__k { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.17em;
           color: var(--ink-3); margin: 0 0 0.45rem; }
.slot__t { margin: 0; font-size: 0.88rem; color: var(--ink-3); max-width: 34rem; }

.fix { margin: var(--gap) 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.fix p { margin: 0; color: var(--ink-2); max-width: 38rem; font-size: 0.95rem; }

/* --- footer -------------------------------------------------------------- */

.foot { border-top: 1px solid var(--rule); background: var(--paper-2);
        padding: 2.5rem 0 3rem; margin-top: var(--gap); }
.foot__lede { margin: 0 0 1.25rem; max-width: 34rem; color: var(--ink-2); }
.foot__links { list-style: none; display: flex; flex-wrap: wrap;
               gap: 0.5rem 1.5rem; padding: 0; margin: 0 0 1.5rem;
               font-size: 0.9rem; }
.foot__fine { font-size: 0.78rem; color: var(--ink-3); max-width: 44rem;
              margin: 0; line-height: 1.7; }

/* --- motion -------------------------------------------------------------- */

/* One short settle on load, on the whole column rather than staggered per
   section. Staggering meant every section below the fold sat at opacity 0 until
   its delay elapsed, which is a page that renders blank if anything defers the
   animation. On a page whose job is to be trusted in four seconds, content
   being briefly invisible is not a trade worth making for a nicer entrance. */
@media (prefers-reduced-motion: no-preference) {
  main { animation: rise 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); }
  @keyframes rise { from { opacity: 0; transform: translateY(7px); } }
}

/* --- print --------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .masthead, .nav, .find, .slot, .skip { display: none; }
  .row { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

/* --- proportional widths -------------------------------------------------
   Generated. Bar widths live here as classes because the site ships no inline
   CSS at all, which is what lets the Content-Security-Policy stay strict
   (style-src 'self', no 'unsafe-inline'). See bar_width() in app.py.
-------------------------------------------------------------------------- */
.pw-0{width:0%}
.pw-1{width:1%}
.pw-2{width:2%}
.pw-3{width:3%}
.pw-4{width:4%}
.pw-5{width:5%}
.pw-6{width:6%}
.pw-7{width:7%}
.pw-8{width:8%}
.pw-9{width:9%}
.pw-10{width:10%}
.pw-11{width:11%}
.pw-12{width:12%}
.pw-13{width:13%}
.pw-14{width:14%}
.pw-15{width:15%}
.pw-16{width:16%}
.pw-17{width:17%}
.pw-18{width:18%}
.pw-19{width:19%}
.pw-20{width:20%}
.pw-21{width:21%}
.pw-22{width:22%}
.pw-23{width:23%}
.pw-24{width:24%}
.pw-25{width:25%}
.pw-26{width:26%}
.pw-27{width:27%}
.pw-28{width:28%}
.pw-29{width:29%}
.pw-30{width:30%}
.pw-31{width:31%}
.pw-32{width:32%}
.pw-33{width:33%}
.pw-34{width:34%}
.pw-35{width:35%}
.pw-36{width:36%}
.pw-37{width:37%}
.pw-38{width:38%}
.pw-39{width:39%}
.pw-40{width:40%}
.pw-41{width:41%}
.pw-42{width:42%}
.pw-43{width:43%}
.pw-44{width:44%}
.pw-45{width:45%}
.pw-46{width:46%}
.pw-47{width:47%}
.pw-48{width:48%}
.pw-49{width:49%}
.pw-50{width:50%}
.pw-51{width:51%}
.pw-52{width:52%}
.pw-53{width:53%}
.pw-54{width:54%}
.pw-55{width:55%}
.pw-56{width:56%}
.pw-57{width:57%}
.pw-58{width:58%}
.pw-59{width:59%}
.pw-60{width:60%}
.pw-61{width:61%}
.pw-62{width:62%}
.pw-63{width:63%}
.pw-64{width:64%}
.pw-65{width:65%}
.pw-66{width:66%}
.pw-67{width:67%}
.pw-68{width:68%}
.pw-69{width:69%}
.pw-70{width:70%}
.pw-71{width:71%}
.pw-72{width:72%}
.pw-73{width:73%}
.pw-74{width:74%}
.pw-75{width:75%}
.pw-76{width:76%}
.pw-77{width:77%}
.pw-78{width:78%}
.pw-79{width:79%}
.pw-80{width:80%}
.pw-81{width:81%}
.pw-82{width:82%}
.pw-83{width:83%}
.pw-84{width:84%}
.pw-85{width:85%}
.pw-86{width:86%}
.pw-87{width:87%}
.pw-88{width:88%}
.pw-89{width:89%}
.pw-90{width:90%}
.pw-91{width:91%}
.pw-92{width:92%}
.pw-93{width:93%}
.pw-94{width:94%}
.pw-95{width:95%}
.pw-96{width:96%}
.pw-97{width:97%}
.pw-98{width:98%}
.pw-99{width:99%}
.pw-100{width:100%}

/* --- aged inventory ------------------------------------------------------ */
/* Filter chips. Links, not buttons: the page has no JavaScript, so each one
   navigates and carries the whole filter state in the query string. */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;
  margin:0 0 .55rem;padding:0}
.flbl{flex:0 0 auto;min-width:7.5rem;font:600 .78rem/1.5 var(--body);
  letter-spacing:.03em;color:var(--ink-3);text-transform:uppercase}
.chip{display:inline-flex;gap:.32rem;align-items:baseline;
  padding:.2rem .58rem;border:1px solid var(--rule);border-radius:2rem;
  font:500 .82rem/1.5 var(--body);color:var(--ink-2);text-decoration:none;
  background:var(--paper-2)}
.chip:hover{border-color:var(--clay);color:var(--clay)}
.chip--on{background:var(--clay);border-color:var(--clay);color:var(--paper-2);
  font-weight:600}
.chip--on:hover{color:var(--paper-2)}
.chip__n{font:400 .7rem/1 var(--mono);opacity:.65}

/* One row per machine. Grid rather than a table so it reflows onto a phone,
   which is exactly where this page gets read - standing in a showroom. */
.aged{list-style:none;margin:.9rem 0 0;padding:0;border-top:1px solid var(--rule)}
.aged__row{display:grid;gap:.15rem .9rem;padding:.7rem .2rem;
  border-bottom:1px solid var(--rule-2);
  grid-template-columns:5.5rem minmax(0,2.4fr) 7.5rem minmax(0,1.5fr) minmax(0,1.4fr);
  align-items:baseline}
.aged__days{font:700 1.05rem/1.2 var(--mono);color:var(--clay);white-space:nowrap}
.aged__days-u{font:400 .7rem/1 var(--mono);color:var(--ink-3)}
.aged__what a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule)}
.aged__what a:hover{color:var(--clay);border-color:var(--clay)}
.aged__meta{display:block;font:400 .72rem/1.5 var(--mono);color:var(--ink-3)}
.aged__price{font:600 .95rem/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.aged__under{display:block;font:600 .72rem/1.4 var(--mono);color:var(--ochre)}
.aged__market{font:400 .8rem/1.4 var(--mono);color:var(--ink-2)}
.aged__basis{display:block;font-size:.7rem;color:var(--ink-3)}
.aged__who a{color:var(--ink-2);text-decoration:none;font-size:.85rem;
  border-bottom:1px solid var(--rule)}
.aged__who a:hover{color:var(--clay);border-color:var(--clay)}

@media (max-width:900px){
  .aged__row{grid-template-columns:4.5rem minmax(0,1fr) 7rem}
  .aged__market,.aged__who{grid-column:2/-1}
  .flbl{min-width:100%}
}

/* Coverage note under the aged-inventory lede: what the page can and cannot
   rank. Quiet, but never hidden — it is the difference between "the oldest
   inventory near you" and a claim we can actually support. */
.page-note{margin:.6rem 0 0;font:400 .8rem/1.65 var(--mono);color:var(--ink-3);
  max-width:60ch}

/* The two aged-inventory modes. Larger than a facet chip because this is a
   different page, not a filter on this one. */
.filters--modes{margin:.7rem 0 .2rem;gap:.5rem}
.chip--mode{padding:.34rem .95rem;font-size:.9rem;font-weight:600}

/* Applied-filter summary at the results anchor. Every control lands the reader
   here rather than at the top of a phone-tall chip block, so this is where they
   need to see what is currently on. */
.applied{margin:0 0 .7rem;font:400 .8rem/1.6 var(--mono);color:var(--ink-2)}
.applied a{color:var(--clay);text-decoration:none;border-bottom:1px solid var(--rule)}
.applied a:hover{border-color:var(--clay)}
/* Anchor targets clear the sticky masthead. */
#results,#filters{scroll-margin-top:1rem}
/* A control that produced nothing useful says so here rather than showing a
   list that looks ranked and is not. */
.applied--warn{color:var(--ink);background:var(--paper-3);
  border-left:3px solid var(--ochre);padding:.6rem .8rem;line-height:1.7}

/* --- numbers are the product ---------------------------------------------- */
/* Tabular figures everywhere a number sits in a column. Proportional digits
   make "1198" and "750" different widths, so a column of day counts wobbles
   and stops reading as a measurement. Slashed zero for the same reason a
   spec sheet uses one: on a page whose whole claim is that these figures were
   counted rather than asserted, they should look counted. */
.mono, .aged__days, .aged__price, .aged__market, .row__fig, .chip__n,
.applied, .page-note, .share__key, .aged__meta {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}
/* The day count is the one number a reader scans down the page, so it gets
   the extra weight rather than the whole row shouting. */
.aged__days{font-weight:700;letter-spacing:-.01em}

/* --- section marks -------------------------------------------------------- */
/* Inline SVG, not images: img-src is 'none' so that a vehicle photograph can
   never load, and a linked logo would mean relaxing that. Strokes inherit
   currentColor so one set works in light and dark. */
.mark{display:block;color:var(--ink-2);overflow:visible}
.mark__accent{color:var(--clay);stroke:var(--clay)}
.marked{display:flex;gap:.9rem;align-items:flex-start;margin:0 0 .35rem}
.marked .mark{flex:0 0 auto;margin-top:.15rem}
.marked h2{margin:0}
@media (max-width:640px){ .marked .mark{width:34px;height:34px} }

/* --- masthead mark -------------------------------------------------------- */
.wordmark{display:flex;align-items:center;gap:.7rem}
.wordmark__text{display:flex;flex-direction:column}
.logomark{flex:0 0 auto;color:var(--ink)}
@media (max-width:640px){ .logomark{width:32px;height:32px} }
/* No published date. A dash, never a zero - zero would be a claim that the
   listing went up today, which is exactly what we do not know. */
.aged__nodate{color:var(--ink-3);font-weight:400}

/* --- price spread bar ----------------------------------------------------- */
/* Used by the model page and by the comparison block on a unit page. A
   distribution drawn as stacked flex rows rather than absolute offsets: pw-N
   sets a width and nothing in this stylesheet sets a `left`, and adding 101
   offset classes to place two markers was not worth it. The first row is the
   range, each row after it hangs a tick underneath at its own position.

   No style attribute anywhere in it. `style-src 'self'` has no
   'unsafe-inline', so an inline `style="width:42%"` is silently dropped by the
   browser and the bar renders as a lie about a named business. Widths stay in
   classes for the same reason every other bar on this site does. */
.spread { max-width: 30rem; margin: 0.2rem 0 0.55rem; }
.spread__bar {
  display: flex; height: 0.85rem; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 1px; background: var(--paper-2);
}
.spread__seg { display: block; height: 100%; }
.spread__seg--in { background: var(--clay-2); }
.spread__pins { display: flex; height: 0.5rem; }
.spread__gap { display: block; height: 100%; }
.spread__pin { flex: 0 0 auto; width: 2px; height: 100%; margin-left: -1px;
               background: var(--ink-3); }
.spread__pin--mid { background: var(--ink); }
.spread__pin--this { background: var(--clay); }

/* Two more swatches for the shared .share__key legend, so the bar above can be
   read without colour vision and without the key repeating the figures. */
.key--mid::before { background: var(--ink); border-color: var(--ink); }
.key--this::before { background: var(--clay); border-color: var(--clay); }

/* --- one model, across dealers ------------------------------------------- */
/* The same row component as the aged list, re-columned. On /deals the first
   column is how long it has been listed; on a model page the reader's question
   is the price, so the price leads and the age moves inboard. Classes are
   position-independent, so only the track sizes change. */
.aged--model .aged__row {
  grid-template-columns: 7.5rem minmax(0, 2.4fr) 5.5rem minmax(0, 1.6fr) minmax(0, 1.4fr);
}
@media (max-width: 900px) {
  .aged--model .aged__row { grid-template-columns: 7rem minmax(0, 1fr) 4.5rem; }
}

/* --- the paid slot, when there is ever anything in it --------------------- */
/* Empty today: partners.enabled_partners() returns nothing and is meant to.
   The styling exists so that the day one is switched on it lands BELOW every
   fact on the page, inside its own box, labelled as paid where a reader meets
   it - never inside a ranking, a table or anything that decides an order. */
.slot--paid { border-color: var(--ochre); }
.slot--paid .slot__k { color: var(--ochre); }
.slot__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.slot__item { padding: 0.6rem 0; border-top: 1px solid var(--rule-2); }
.slot__link { font-weight: 550; }
.slot__blurb { display: block; font-size: 0.85rem; color: var(--ink-3);
               max-width: 34rem; }

/* Dimmed inline text. Was scoped to .unit__m only; the unit and model pages
   need it in a page subtitle and in a price cell too. */
.dim { color: var(--ink-3); }

/* Gear block: an 80px product shot beside the text. Images are permitted on
   this site only for merchant product photography supplied under an affiliate
   programme - never for a dealer's vehicle photographs, which the public data
   layer cannot return at all. See freedom/public/ads.py. */
.slot__item--gear { display: flex; gap: 0.85rem; align-items: flex-start; }
.gear__shot { flex: 0 0 auto; width: 80px; height: 80px;
              object-fit: contain; background: var(--paper-2);
              border: 1px solid var(--rule-2); border-radius: 2px; }
.gear__body { min-width: 0; }

/* Size chips on a gear row. Not links - a statement about what the shop still
   had, on the date printed beside it. */
.size { display: inline-block; padding: 0 .3rem; margin-right: .18rem;
        border: 1px solid var(--rule-2); border-radius: 2px;
        font-size: .78em; letter-spacing: .02em; }
.size--on { border-color: var(--ochre); color: var(--ochre); }
.filters--sizes { margin-top: .35rem; }