/* ============================================================================
   Pneu Ponto — "Oficina de Precisão"
   Grafite e ouro, tirados da própria marca. Feito para um acervo de 15.955
   guias sobre pneus: navegação por veículo e por tarefa, busca de verdade, o
   Decodificador da lateral do pneu, e uma coluna de leitura que segura a
   medida em qualquer largura de tela.

   Sections
     01  Tokens + reset            06b O Decodificador (sidewall reader)
     02  Primitives                07  Home — standards / index / safety
     03  Header + mega menu        08  Engine listings (/blog, /topic)
     04  Search                    09  Article
     05  Home — hero               05b Portal (doors, brands, index)
     06  Home — grupos / sintomas  10  Article components (the contract)
     06  Home — grupos / sintomas  11  404 + search results
                                   12  Footer, motion, print
   ========================================================================== */

/* ── 01 · Tokens + reset ─────────────────────────────────────────────────── */

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

:root {
  --paper:   #FFFFFF;
  --paper-2:   #F6F7F9;
  --paper-3:   #ECEEF2;
  --ink:   #14161A;
  --ink-2:   #33373E;
  --muted:   #6B7280;
  --line:   #E4E6EB;
  --line-2:   #CBD0D8;
  --brand:   #B5822B;
  --brand-d:   #8F6620;
  --brand-w:   #FBF6EB;
  --gold:    #C99B3E;
  --gold-2:  #E3C275;
  --steel:   #7C838C;
  --deep:   #14161A;
  --deep-2:   #1E2126;
  --deep-3:   #2B2F36;

  /* System identity — small, scannable, never decorative fill. */
  --sys-tires:   #B5822B;
  --sys-wheels:   #B45309;
  --sys-brakes:   #0E7490;
  --sys-suspension:   #3F5C8C;
  --sys-steering:   #4B7C4F;
  --sys-drivetrain:   #5A6069;

  --display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --sh-1: 0 1px 2px rgba(11, 16, 23, .05);
  --sh-2: 0 4px 14px -6px rgba(11, 16, 23, .14), 0 1px 3px rgba(11, 16, 23, .05);
  --sh-3: 0 18px 40px -20px rgba(11, 16, 23, .28), 0 2px 8px rgba(11, 16, 23, .06);

  --wrap: 1240px;
  --gut:  28px;
  --head: 68px;
}

html { -webkit-text-size-adjust: 100%; }
/* scroll-margin (not scroll-behavior) does the anchor work — a smooth scroll
   across a 66k-word page is a long, disorienting ride. */
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, h5 { font-family: var(--display); color: var(--ink); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
strong, b { font-weight: 600; color: var(--ink); }
:target { scroll-margin-top: calc(var(--head) + 24px); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ── 02 · Primitives ─────────────────────────────────────────────────────── */

.wrap, .container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.eyebrow {
  display: inline-block;
  font-family: var(--font);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow--muted { color: var(--muted); }

.display { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; color: var(--ink); }
h1.display, .h-1 { font-size: clamp(30px, 4.1vw, 46px); }
h2.display, .h-2 { font-size: clamp(25px, 3vw, 34px); }
.lead { font-size: clamp(16px, 1.25vw, 18px); color: var(--muted); line-height: 1.62; }
.muted { color: var(--muted); }

.sec-head { max-width: 660px; margin-bottom: 34px; }
.sec-head .eyebrow { margin-bottom: 12px; }
.sec-head h2 { margin-bottom: 12px; }
.sec-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sec-head--split > div:first-child { max-width: 620px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px;
  border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--accent { background: var(--brand); color: #fff; box-shadow: var(--sh-1); }
.btn--accent:hover { background: var(--brand-d); transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--deep-3); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.btn--sm { height: 38px; padding: 0 15px; font-size: 13.5px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: border-color .15s, color .15s, background-color .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-w); }
/* A <use> sprite icon has no intrinsic size — without this it inherits the
   reset's `height:auto` and paints at the viewBox scale, which is how the 404
   once shipped six 200px icons stacked on top of each other. */
.chip svg { width: 15px; height: 15px; flex: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* Topic names arrive lowercase from the content plan ("abs system", "tpms
   sensors"). Upper-casing is the one transform that is correct for all 47 —
   title case would produce "Abs System" and "Cv Axle". */
.topic-label { text-transform: uppercase; letter-spacing: .045em; }

.count { font-variant-numeric: tabular-nums; }

/* ── 03 · Header + mega menu ─────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s, border-color .2s;
}
.header.is-stuck { box-shadow: 0 1px 0 rgba(11, 16, 23, .06), 0 10px 30px -24px rgba(11, 16, 23, .5); }
/* The mega panels resolve against the BAR, not their trigger: anchored to the
   trigger, a 1000px panel centred on a nav item that sits 300px from the left
   edge hangs half of itself off-screen. */
.header-bar { position: relative; display: flex; align-items: center; gap: 22px; height: var(--head); }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 34px; height: 34px; flex: none; color: var(--ink); }
/* The official lockup already carries the wordmark, so when it is present the
   text column keeps only the tagline — printing the name twice is the classic
   way a real logo ends up looking like a placeholder. */
/* The lockup is a wide 714x344 with generous internal padding, so a 34px box
   (which suits a compact glyph) renders the wordmark too small to read. */
.brand-logo { height: 46px; width: auto; flex: none; }
.brand-text--logo { padding-left: 11px; margin-left: 1px; border-left: 1px solid var(--line); }
.brand-text--logo .brand-sub { margin-top: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 17.5px;
  letter-spacing: -.03em; color: var(--ink);
}
.brand-name em { font-style: normal; color: var(--brand); }
.brand-sub { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
/* Must come AFTER .brand-text: both selectors are one class, so the cascade
   is decided by order and a `display:flex` declared later would win. */
@media (max-width: 720px) { .brand-logo { height: 36px; } .brand-text--logo { display: none; } }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav-item { position: static; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 13px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: background-color .14s, color .14s;
}
.nav-link:hover, .nav-item.is-open > .nav-link { background: var(--paper-3); color: var(--ink); }
.nav-link .caret { width: 13px; height: 13px; transition: transform .18s; color: var(--muted); }
.nav-item.is-open .caret { transform: rotate(180deg); }
.nav-spacer { flex: 1; }

.mega {
  position: absolute; top: calc(100% - 6px); left: 0;
  width: min(100%, 1000px);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 26px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 22px; }
.mega-col { padding: 12px 13px; border-radius: var(--r); transition: background-color .15s; }
.mega-col:hover { background: var(--paper-2); }
.mega-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.mega-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--paper-3); color: var(--sys); }
.mega-ic svg { width: 15px; height: 15px; }
.mega-title { font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink); letter-spacing: -.015em; }
.mega-count { font-size: 11.5px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.mega-head { text-decoration: none; }
.mega-head:hover .mega-title { color: var(--brand); }
.mega-links { display: flex; flex-direction: column; gap: 1px; padding-left: 35px; margin-top: 6px; }
.mega-links a { font-size: 12.5px; color: var(--muted); padding: 2px 0; transition: color .14s; }
.mega-links a:hover { color: var(--brand); }
.mega-foot {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.mega-foot p { font-size: 13px; color: var(--muted); margin: 0; }

/* All-topics mega: four dense columns of every hub we hold. */
.mega--topics { width: 100%; }
.mega-index { column-count: 4; column-gap: 26px; }
.mega-index a {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  padding: 5px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  break-inside: avoid;
  transition: background-color .14s, color .14s;
}
.mega-index a:hover { background: var(--brand-w); color: var(--brand); }
.mega-index .n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.burger { display: none; width: 42px; height: 42px; flex: none; border: 1px solid var(--line); border-radius: var(--r-sm); place-items: center; color: var(--ink); transition: border-color .15s, background-color .15s; }
.burger:hover { border-color: var(--line-2); background: var(--paper-2); }
.burger svg { width: 19px; height: 19px; }

/* Reading progress — article pages only. */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--brand); z-index: 120; transition: width .1s linear; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 130;
  background: var(--paper);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--head); padding-inline: var(--gut); border-bottom: 1px solid var(--line); flex: none; }
.drawer-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); display: grid; place-items: center; }
.drawer-close svg { width: 18px; height: 18px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px var(--gut) 48px; }
.drawer-search { margin-bottom: 20px; }
.dgroup { border-bottom: 1px solid var(--line); }
.dgroup summary {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 2px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink);
}
.dgroup summary::-webkit-details-marker { display: none; }
.dgroup summary .mega-ic { width: 28px; height: 28px; }
.dgroup summary .n { margin-left: auto; font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--muted); }
.dgroup summary .caret { width: 15px; height: 15px; color: var(--muted); transition: transform .2s; }
.dgroup[open] summary .caret { transform: rotate(180deg); }
.dgroup-links { display: flex; flex-direction: column; padding: 0 0 14px 39px; }
.dgroup-links a { padding: 8px 0; font-size: 14px; color: var(--muted); }
.dgroup-links a:hover { color: var(--brand); }
.drawer-links { display: flex; flex-direction: column; margin-top: 8px; }
.drawer-links a { padding: 13px 2px; font-size: 15px; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); }

/* ── 04 · Search ─────────────────────────────────────────────────────────── */

.search { position: relative; flex: none; }
.search-form { position: relative; display: flex; align-items: center; }
.search-ic { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-input {
  width: 260px; height: 40px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper-2);
  font-size: 14px; color: var(--ink);
  transition: width .2s, border-color .15s, background-color .15s, box-shadow .15s;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; width: 320px; background: var(--paper); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-w); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Hero search — the primary action on the home page. */
.search--hero .search-input {
  width: 100%; height: 60px;
  padding: 0 128px 0 52px;
  font-size: 16.5px;
  border-radius: 12px; border-color: var(--line-2);
  background: var(--paper);
  box-shadow: var(--sh-2);
}
.search--hero .search-input:focus { width: 100%; box-shadow: 0 0 0 4px var(--brand-w), var(--sh-2); }
.search--hero .search-ic { left: 20px; width: 20px; height: 20px; }
.search--hero .search-go { position: absolute; right: 8px; }
.search--hero { width: 100%; max-width: 620px; }
.search-go { display: none; }
.search--hero .search-go { display: inline-flex; }

.search-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3);
  padding: 6px; z-index: 95;
  max-height: min(60vh, 420px); overflow-y: auto;
}
.search-panel[hidden] { display: none; }
.search-hit { display: block; padding: 10px 12px; border-radius: var(--r-sm); transition: background-color .12s; }
.search-hit:hover, .search-hit.is-cur { background: var(--paper-2); }
.search-hit strong { display: block; font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.search-hit span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.search-hit mark { background: #FEF0C7; color: inherit; border-radius: 2px; padding: 0 1px; }
.search-more { display: block; padding: 11px 12px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--brand); }
.search-empty { padding: 16px 12px; font-size: 13.5px; color: var(--muted); }

/* ── 05 · Home — hero ────────────────────────────────────────────────────── */

.hero { position: relative; padding: 72px 0 64px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(200, 16, 46, .07), transparent 62%),
    linear-gradient(180deg, var(--paper-2), var(--paper) 58%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(1000px 460px at 78% 6%, #000, transparent 70%);
  mask-image: radial-gradient(1000px 460px at 78% 6%, #000, transparent 70%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(34px, 4.9vw, 58px); letter-spacing: -.035em; line-height: 1.03; margin: 16px 0 20px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-lead { font-size: clamp(16px, 1.3vw, 18.5px); color: var(--muted); max-width: 52ch; margin-bottom: 28px; }
.hero-hint { margin-top: 13px; font-size: 13px; color: var(--muted); }
.hero-chips { margin-top: 22px; }

/* Coverage plate — a spec sheet of what the archive actually holds. */
.plate { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.plate-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.plate-top .t { font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.plate-top .id { font-size: 11.5px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.plate-hero { padding: 26px 20px 22px; text-align: center; border-bottom: 1px solid var(--line); }
.plate-hero .n { display: block; font-family: var(--display); font-size: clamp(38px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.04em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.plate-hero .k { display: block; margin-top: 9px; font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plate-rows { display: grid; grid-template-columns: 1fr 1fr; }
.plate-row { padding: 15px 20px; border-bottom: 1px solid var(--line); }
.plate-row:nth-child(odd) { border-right: 1px solid var(--line); }
.plate-row:nth-last-child(-n+2) { border-bottom: 0; }
.plate-row .n { display: block; font-family: var(--display); font-size: 20px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plate-row .k { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.strip { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.strip-row { display: flex; align-items: center; gap: 30px; padding: 15px 0; flex-wrap: wrap; }
.strip-row .lab { font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.strip-items { display: flex; gap: 26px; flex-wrap: wrap; }
.strip-items a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.strip-items a:hover { color: var(--brand); }
.strip-items svg { width: 15px; height: 15px; color: var(--muted); }
.strip-items a:hover svg { color: var(--brand); }


/* ── 05b · Portal — home, doors, brands, index ───────────────────────────────
   The design brief was "not a clone". The structural discipline is kept, the
   visual language is not: this is a dark, photographic portal where the old
   design was a light editorial page.

   Dark is applied to the CHROME and the section bands only. The reading column
   stays light — a 2.300-word guide set white-on-black is a worse read, and the
   whole point of the archive is that people finish the article. */

.pp-home { --pp-ink: #0E1013; --pp-ink-2: #161A1F; --pp-line: rgba(255,255,255,.10); }

/* ── the opener ─────────────────────────────────────────────────────────── */
.pph {
  position: relative;
  background: var(--pp-ink) var(--shot, none) center/cover no-repeat;
  padding: clamp(72px, 11vw, 148px) 0 clamp(48px, 6vw, 76px);
  isolation: isolate;
}
.pph-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(10,12,14,.94) 0%, rgba(10,12,14,.82) 46%, rgba(10,12,14,.42) 100%),
    linear-gradient(to top, rgba(10,12,14,.96) 0%, rgba(10,12,14,0) 55%);
}
.pph-inner { position: relative; max-width: 900px; }
.pph-eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2);
  padding-bottom: 14px;
}
.pph-title {
  font-family: var(--display);
  font-size: clamp(38px, 6.2vw, 74px); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 700; color: #fff; margin-bottom: 20px;
  text-wrap: balance;
}
.pph-lead {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255,255,255,.76);
  max-width: 62ch; margin-bottom: 30px;
}
.pph .search { max-width: 640px; }
/* The glass treatment has to land on the INPUT: .search--hero sets a solid
   white background there, so dressing only .search-form left a white box with
   an invisible white placeholder sitting on the photograph. */
.pph .search--hero .search-input {
  background: rgba(14,16,19,.58);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pph .search--hero .search-input::placeholder { color: rgba(255,255,255,.62); }
.pph .search--hero .search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,155,62,.22), 0 10px 34px -14px rgba(0,0,0,.7);
}
.pph .search-ic { color: rgba(255,255,255,.7); }

.pph-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.pph-chip {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 7px 15px;
  transition: border-color .16s, background .16s, color .16s;
}
.pph-chip:hover { border-color: var(--gold); background: rgba(201,155,62,.16); color: #fff; }

.pph-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(38px, 5vw, 62px);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  overflow: hidden;
}
.pph-stats > div { background: rgba(12,14,17,.72); padding: 18px 20px; backdrop-filter: blur(10px); }
.pph-stats dt {
  font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700;
  color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pph-stats dd { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 3px; letter-spacing: .03em; }

/* ── a dark band, reusable ──────────────────────────────────────────────── */
.section--dark {
  background: var(--pp-ink);
  color: rgba(255,255,255,.78);
  border-block: 1px solid rgba(255,255,255,.08);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .eyebrow { color: var(--gold-2); }
.section--dark .lead { color: rgba(255,255,255,.7); }
/* .btn--ghost carries background: var(--paper) — white. Setting only the
   colour left a white block with white text on the dark band. */
.section--dark .btn--ghost,
.pph .btn--ghost {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
}
.section--dark .btn--ghost:hover,
.pph .btn--ghost:hover { border-color: var(--gold); background: rgba(201,155,62,.16); color: #fff; }

/* ── the five photographic doors ────────────────────────────────────────── */
.pp-doors {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pp-door {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 300px;
  display: flex; align-items: flex-end;
  background: var(--pp-ink-2);
  border: 1px solid rgba(255,255,255,.10);
  isolation: isolate;
}
.pp-door img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.pp-door::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,10,12,.94) 12%, rgba(8,10,12,.28) 62%, rgba(8,10,12,.1) 100%);
}
.pp-door:hover img { transform: scale(1.06); }
.pp-door-body { padding: 20px 20px 22px; }
.pp-door-name {
  display: block; font-family: var(--display); font-size: 21px; font-weight: 700;
  color: #fff; letter-spacing: -.02em; margin-bottom: 5px;
}
.pp-door-blurb { display: block; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); }
.pp-door::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1); z-index: 1;
}
.pp-door:hover::before { transform: scaleX(1); }

/* ── brand grid ─────────────────────────────────────────────────────────── */
.pp-brands {
  display: grid; gap: 14px; margin-top: 30px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.pp-brand {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pp-brand:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-2); }
.pp-brand-shot { display: block; aspect-ratio: 1; background: var(--paper-3); overflow: hidden; }
.pp-brand-shot img { width: 100%; height: 100%; object-fit: cover; }
.pp-brand-name {
  font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--ink);
  padding: 12px 14px 2px; letter-spacing: -.01em;
}
.pp-brand-n { font-size: 11.5px; color: var(--muted); padding: 0 14px 13px; }

/* ── the six-group editorial index ──────────────────────────────────────── */
.pp-index { display: grid; gap: 18px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.pp-idx {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.pp-idx-head { display: flex; gap: 0; align-items: stretch; border-bottom: 1px solid var(--line); }
.pp-idx-shot { width: 122px; flex: none; object-fit: cover; align-self: stretch; height: auto; }
.pp-idx-head > div { padding: 16px 18px; min-width: 0; }
.pp-idx-head h3 { font-size: 18px; margin-bottom: 6px; }
.pp-idx-head p { font-size: 13px; line-height: 1.55; color: var(--muted); }
.pp-idx-n {
  display: inline-block; margin-top: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sys, var(--brand));
}
.pp-idx-links { display: flex; flex-direction: column; padding: 6px 0; }
.pp-idx-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 18px; font-size: 14px; color: var(--ink-2);
  border-left: 2px solid transparent;
  transition: background .14s, border-color .14s, color .14s;
}
.pp-idx-links a:hover { background: var(--paper-2); border-left-color: var(--sys, var(--brand)); color: var(--ink); }
.pp-idx-links .n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the decoder gains a photograph on the empty left column */
.dec-shot {
  width: 100%; height: auto; margin-top: 22px;
  border-radius: var(--r); border: 1px solid var(--line);
  display: block;
}

@media (max-width: 900px) {
  .pph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-idx-shot { width: 96px; }
}
@media (max-width: 560px) {
  .pp-door { min-height: 240px; }
  .pp-idx-head { flex-direction: column; }
  .pp-idx-shot { width: 100%; height: 150px; }
}

/* ── 06 · Home — systems + symptom finder ────────────────────────────────── */

.section { padding: 78px 0; }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }

/* The engine composes the home page's "recently published" grid; this wrapper
   supplies the rhythm its own inline padding-top:0 removes. */
.home-latest { padding: 78px 0; }
.home-latest .section { padding: 0 !important; }
.home-latest .section-head { margin-top: 0; }
.home-latest .section-head h2 { font-size: clamp(25px, 3vw, 34px); }

.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sys-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 24px 20px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.sys-card::before { content: ""; position: absolute; inset: -1px -1px auto; height: 3px; background: var(--sys); border-radius: var(--r-lg) var(--r-lg) 0 0; opacity: .9; }
.sys-card:hover { border-color: var(--line-2); box-shadow: var(--sh-3); transform: translateY(-3px); }
.sys-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sys-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--paper-3); color: var(--sys); }
.sys-ic svg { width: 21px; height: 21px; }
.sys-card h3 { font-size: 20px; letter-spacing: -.02em; }
.sys-n { margin-left: auto; text-align: right; }
.sys-n b { display: block; font-family: var(--display); font-size: 17px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sys-n span { font-size: 11px; color: var(--muted); }
.sys-card > p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.sys-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.sys-topics span {
  font-size: 11.5px; font-weight: 600; padding: 5px 9px;
  border-radius: 999px; background: var(--paper-2); color: var(--muted);
  transition: background-color .14s, color .14s;
}
.sys-card:hover .sys-topics span { background: var(--brand-w); color: var(--brand); }
.sys-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.sys-more svg { width: 14px; height: 14px; transition: transform .16s; }
.sys-card:hover .sys-more svg { transform: translateX(3px); }

.finder-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; }
.sym-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sym {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sym:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateX(2px); color: var(--ink); }
.sym-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--paper-3); color: var(--sys); }
.sym-ic svg { width: 16px; height: 16px; }
.sym-go { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--line-2); transition: color .15s, transform .15s; }
.sym:hover .sym-go { color: var(--brand); transform: translateX(3px); }


/* ── 06b · O Decodificador ───────────────────────────────────────────────────
   The signature tool. Reads as instrument, not as toy: the code itself is set
   in the display face at a size that survives a phone, and the explanation sits
   beside it rather than under it on anything wider than a tablet. */

.decoder { background:
    radial-gradient(120% 100% at 100% 0%, rgba(201,155,62,.09), transparent 60%),
    var(--paper-2);
  border-block: 1px solid var(--line);
}

.dec {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 26px;
}

.dec-lab {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.dec-field { display: flex; gap: 8px; }
.dec-code {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: var(--sh-1);
}
.dec-code:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.dec-help { margin-top: 12px; font-size: 12.5px; color: var(--muted); line-height: 2.1; }
.dec-eg {
  font: inherit; font-size: 12px;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; margin-left: 6px; cursor: pointer;
  transition: border-color .16s, color .16s;
}
.dec-eg:hover { border-color: var(--brand); color: var(--brand); }
.dec-err {
  margin-top: 12px; font-size: 13px; color: #9A3412;
  background: #FEF6EE; border: 1px solid #FBD9B5; border-radius: var(--r-sm); padding: 9px 12px;
}

/* The code, rendered as a sidewall stamp. */
.dec-wall {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0; margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--deep);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sh-2);
  overflow-x: auto;
}
.dec-seg {
  font-family: var(--display);
  font-size: clamp(24px, 5.2vw, 38px); font-weight: 700; letter-spacing: -.01em;
  color: #F2F3F5;
  padding: 2px 3px; border-radius: 5px;
  transition: background .16s, color .16s;
}
.dec-seg.is-lit { background: var(--gold); color: var(--deep); }
.dec-sep { font-family: var(--display); font-size: clamp(20px, 4vw, 30px); color: var(--steel); padding: 0 1px; }
.dec-sp  { width: 14px; flex: none; }

.dec-parts { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 0; }
.dec-parts dt {
  display: flex; align-items: baseline; gap: 9px;
  padding: 13px 16px 13px 0;
  border-top: 1px solid var(--line);
}
.dec-parts dt b {
  font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink);
}
.dec-parts dt span {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.dec-parts dd {
  padding: 13px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-2); line-height: 1.62;
}
.dec-parts dt:hover, .dec-parts dt:hover + dd { background: var(--brand-w); }

.dec-calc {
  margin-top: 20px; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.dec-calc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 0;
}
.dec-calc-row + .dec-calc-row { border-top: 1px dashed var(--line); }
.dec-calc-row .k { font-size: 13.5px; color: var(--muted); }
.dec-calc-row .v { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dec-calc-note {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); line-height: 1.62;
}

.dec-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.dec-foot .chip svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .dec { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .dec-parts { grid-template-columns: 1fr; }
  .dec-parts dt { padding-bottom: 4px; border-top: 1px solid var(--line); }
  .dec-parts dd { padding-top: 0; border-top: 0; }
  .dec-parts dt:hover + dd { background: transparent; }
}

/* ── 07 · Home — standards, topic index, safety ──────────────────────────── */

.std-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.std { padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.std-n { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--brand); }
.std h3 { font-size: 18px; margin: 12px 0 9px; }
.std p { font-size: 14.5px; color: var(--muted); }

/* Multi-column, not grid: the six systems hold 2–13 topics each, and grid rows
   would size every column to the tallest and leave holes under the short ones. */
.index-grid { column-count: 3; column-gap: 38px; }
.index-col { break-inside: avoid; margin-bottom: 26px; }
.index-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.index-head .mega-ic { width: 24px; height: 24px; }
.index-head .mega-ic svg { width: 13px; height: 13px; }
.index-head b { font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink); }
.index-head .n { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.index-col a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 8px; margin-inline: -8px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: background-color .13s, color .13s;
}
.index-col a:hover { background: var(--brand-w); color: var(--brand); }
.index-col a .n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.safety {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px 26px; border-radius: var(--r-lg);
  background: var(--brand-w); border: 1px solid #EBD9B4;
}
.safety-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--brand); box-shadow: var(--sh-1); }
.safety-ic svg { width: 20px; height: 20px; }
.safety b { display: block; font-family: var(--display); font-size: 15.5px; color: var(--ink); margin-bottom: 5px; }
.safety p { font-size: 14.5px; color: #6B5526; margin: 0; }

/* ── 08 · Engine listings (/blog, /topic, cards) ─────────────────────────── */

.page { max-width: var(--wrap); margin-inline: auto; padding: 34px var(--gut) 84px; }
body.is-article .page { max-width: 1340px; }
.page > .container, .page .section > .container { max-width: none; padding-inline: 0; }
.page > .section { padding: 0; }
.page > .section + .section { padding-top: 44px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); transition: color .14s; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb > span[aria-hidden] { color: var(--line-2); }
.breadcrumb [aria-current], .breadcrumb > span:last-child {
  color: var(--ink-2); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The middle crumb is the topic hub, and hub names arrive lowercase. */
.breadcrumb a:nth-of-type(2) { text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; font-weight: 600; }

.page > h1.display, .page > .display { margin-bottom: 10px; }
.page > .eyebrow { margin-bottom: 10px; }
/* Topic hub H1 — the eyebrow above it is what marks a hub apart from /blog.
   Hub names are stored lowercase; upper-casing is the only transform correct
   for all 47 of them (title case would give "Abs System" and "Cv Axle"). */
.page > .eyebrow + .display { text-transform: uppercase; letter-spacing: -.005em; }
.page > p, .page > .muted { color: var(--muted); max-width: 68ch; }

.section-head { margin: 40px 0 22px; }
.section-head h2 { font-size: clamp(20px, 2.2vw, 26px); }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.post-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.post-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.post-card-media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: var(--paper-2); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 19px 17px; flex: 1; }
.post-cat {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-w);
  padding: 4px 8px; border-radius: 4px;
}
.post-card-title { font-size: 16.5px; font-weight: 600; line-height: 1.32; letter-spacing: -.015em; }
.post-card-title a { transition: color .14s; }
.post-card:hover .post-card-title a { color: var(--brand); }
.post-card-excerpt {
  font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.pagination a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 17px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-weight: 600; color: var(--ink);
  transition: border-color .15s, background-color .15s, color .15s;
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-w); }
.pagination > span { font-variant-numeric: tabular-nums; }

/* Topic hub: the pillar sits above its members as a featured lead. */
.pillar-link {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; margin-top: 22px;
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r);
  transition: box-shadow .16s, transform .16s;
}
.pillar-link:hover { box-shadow: var(--sh-2); transform: translateX(2px); }
.pl-eyebrow { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--brand); }
/* min-width:0 is load-bearing. A flex item defaults to min-width:auto, which
   refuses to shrink below its longest unbreakable run — so a headline like
   "Brake Fluid Explained: 4 Crucial Types for Your Vehicle" pushed the row wider
   than the column instead of wrapping, and the arrow went with it. */
.pl-title { min-width: 0; overflow-wrap: anywhere; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -.02em; line-height: 1.25; }
.pl-arrow { margin-left: auto; color: var(--brand); font-size: 18px; flex: none; }

/* Long hubs (thousands of members) render a dense, readable index instead of
   thousands of cards. Every link the card grid carried is still here. */
.topic-index { margin-top: 26px; }
.topic-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.topic-index-head h2 { font-size: clamp(19px, 2vw, 23px); }
.topic-index-head p { font-size: 13.5px; color: var(--muted); margin: 0; }
.topic-index-list { column-count: 3; column-gap: 30px; }
.topic-index-list a {
  display: block; break-inside: avoid;
  padding: 7px 10px; margin-inline: -10px; border-radius: var(--r-sm);
  font-size: 13.5px; line-height: 1.42; color: var(--ink-2);
  transition: background-color .12s, color .12s;
}
.topic-index-list a:hover { background: var(--brand-w); color: var(--brand); }

/* Topic map at the foot of a listing — the end of the cards is where a reader
   most needs somewhere else to go. */
.browse-rail { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.browse-rail > h2 { font-size: 15px; margin-bottom: 20px; }
.browse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
.browse-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.browse-head .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--sys); flex: none; }
.browse-rail .chip { height: 28px; padding: 0 10px; font-size: 11.5px; font-weight: 600; }

/* 404 extras */
.nf-extra { text-align: center; padding-bottom: 20px; }

/* ── 09 · Article ────────────────────────────────────────────────────────── */

.article { width: 100%; }
.article-hero { padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.article-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: 44px; align-items: center; }
.article-hero-grid.solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.article-hero-copy > .eyebrow { margin-bottom: 12px; }
.article-hero-copy h1 { font-size: clamp(28px, 3.5vw, 43px); letter-spacing: -.033em; line-height: 1.08; margin-bottom: 16px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.post-meta strong { color: var(--ink-2); font-weight: 600; }
.post-meta > span[aria-hidden] { color: var(--line-2); }
.article-lead { font-size: 18.5px; line-height: 1.6; color: var(--ink-2); margin-top: 18px; max-width: 62ch; }
.article-hero-media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }

.article-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 54px; align-items: start; }
.article-shell.solo { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
/* The sponsored rail SHARES the table-of-contents column — CampaignCards::railStyle()
   puts the contents list in row 1 and the rail under it in row 2. These rules used
   to declare a third 300px track for a rail that never lands there, so the track sat
   empty and stole 300px + a 54px gap from the article for nothing. Same two tracks
   as an article with no ad: adding a placement must not reflow the prose. */
.article-shell.has-rail { grid-template-columns: 250px minmax(0, 1fr); }
.article-shell.has-rail:not(.has-toc) { grid-template-columns: 250px minmax(0, 1fr); }
.article-main { min-width: 0; }

.toc { position: sticky; top: calc(var(--head) + 22px); max-height: calc(100vh - var(--head) - 48px); overflow-y: auto; padding-right: 6px; }
.toc-h { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc ol { list-style: none; counter-reset: toc; border-left: 2px solid var(--line); }
.toc li { counter-increment: toc; }
.toc a {
  display: block; position: relative; padding: 7px 0 7px 15px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.4; color: var(--muted);
  transition: color .15s, border-color .15s;
}
.toc a::before { content: counter(toc) "."; margin-right: 6px; font-variant-numeric: tabular-nums; color: var(--line-2); }
.toc a:hover { color: var(--ink); }
.toc a.is-cur { color: var(--brand); border-left-color: var(--brand); font-weight: 500; }
.toc a.is-cur::before { color: var(--brand); }
/* Two sticky boxes in one track pin to the same offset and land on top of each
   other, so exactly one of them may stick. railStyle settles that fleet-wide and
   overrides both declarations here (0,4,0): the contents list goes static in row
   1 and the RAIL takes the stickiness in row 2, where the `1fr` track gives it
   the article's height to travel. This file only keeps the neutral half. */
.article-rail { position: static; min-width: 0; margin-bottom: 22px; }
/* The shell's 54px gap is tuned for the space BETWEEN columns. Applied as a row
   gap too it stacked on the rail's own margin and left ~145px of dead air in the
   sidebar, which read as broken. Columns keep the 54px; the rows are spaced by
   railStyle's own 20px padding. */
.article-shell.has-rail.has-toc { row-gap: 0; }
.article-shell.has-rail .toc { top: calc(var(--head) + 22px); }

/* Legal + template-declared pages come through as a bare <h1> inside the
   article shell, with no hero block of their own. */
.article-main > h1 { font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.03em; margin-bottom: 24px; }

/* ── 10 · Article body + the declared component contract ─────────────────── */

.article-body { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); max-width: 74ch; }
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 {
  font-size: clamp(23px, 2.5vw, 30px); letter-spacing: -.028em; line-height: 1.18;
  margin-top: 2em; margin-bottom: .55em; padding-top: .25em;
  scroll-margin-top: calc(var(--head) + 24px);
}
.article-body h3 { font-size: clamp(18.5px, 1.8vw, 21px); letter-spacing: -.022em; margin-top: 1.7em; margin-bottom: .45em; }
.article-body h4 { font-size: 17px; margin-top: 1.5em; margin-bottom: .4em; }
.article-body p { margin-bottom: 0; }
.article-body a { color: var(--brand); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2.5px; text-decoration-color: rgba(200, 16, 46, .32); transition: text-decoration-color .15s; }
.article-body a:hover { text-decoration-color: var(--brand); }
.article-body ul, .article-body ol { padding-left: 1.35em; }
.article-body li + li { margin-top: .45em; }
.article-body li::marker { color: var(--line-2); }
.article-body ol li::marker { color: var(--muted); font-weight: 600; font-size: .92em; }
.article-body img { border-radius: var(--r); border: 1px solid var(--line); }
.article-body figure figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.article-body blockquote {
  border-left: 3px solid var(--brand); padding: 4px 0 4px 22px;
  font-size: 18.5px; line-height: 1.55; color: var(--ink); font-style: italic;
}

/* key-takeaways — the required opener */
.key-takeaways {
  list-style: none !important; padding: 22px 24px !important;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 16px;
}
.key-takeaways li { position: relative; padding-left: 28px; margin: 0; }
.key-takeaways li + li { margin-top: 11px; }
.key-takeaways li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--brand);
}

/* callouts */
.callout {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 19px 21px; border-radius: var(--r);
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  background: var(--paper-2);
  font-size: 16px;
}
.callout__ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
.callout__ic svg { width: 17px; height: 17px; }
.callout__body { min-width: 0; }
.callout__body > strong, .callout__body > b { display: block; font-family: var(--display); font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -.015em; }
.callout__body p { margin: 0; font-size: 15.5px; line-height: 1.62; }
.callout__body p + p { margin-top: .6em; }
.callout--warn { border-left-color: var(--brand); background: var(--brand-w); border-color: #F6D9DD; }
.callout--warn .callout__ic { color: var(--brand); border-color: #F1CBD1; }
.callout--warn .callout__body p { color: #7A3540; }
.callout--tip { border-left-color: #B45309; background: #FEFAF0; border-color: #F3E3C4; }
.callout--tip .callout__ic { color: #B45309; border-color: #F0DCB8; }
.callout--tip .callout__body p { color: #6B4A16; }
.callout--spec { border-left-color: #0E7490; background: #F1FAFC; border-color: #CDE9F0; }
.callout--spec .callout__ic { color: #0E7490; border-color: #C3E2EB; }
.callout--spec .callout__body p { color: #14555F; }

/* Archive components. 66k articles were already written against these two
   class names (7,344 related links, 4,405 pro tips) — the design has to meet
   the content where it is, not the other way round. */
.article-body .pro-tip {
  position: relative;
  padding: 18px 21px 18px 52px;
  border: 1px solid #F3E3C4; border-left: 3px solid #B45309;
  border-radius: var(--r); background: #FEFAF0;
  font-size: 16px; color: #6B4A16;
}
.article-body .pro-tip::before {
  content: ""; position: absolute; left: 19px; top: 20px;
  width: 20px; height: 20px;
  background: #B45309;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 18h5.6M10 21.2h4'/%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.6 11.3c.6.5.9 1.1.9 1.8v.1h5.4v-.1c0-.7.3-1.3.9-1.8A6.2 6.2 0 0 0 12 2.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 18h5.6M10 21.2h4'/%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.6 11.3c.6.5.9 1.1.9 1.8v.1h5.4v-.1c0-.7.3-1.3.9-1.8A6.2 6.2 0 0 0 12 2.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article-body .pro-tip strong { color: #5A3D10; }

.article-body .related-inline-link {
  padding: 14px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r); background: var(--paper-2);
  font-size: 15.5px;
}
.article-body .related-inline-link a { font-weight: 600; text-decoration: none; }
.article-body .related-inline-link a:hover { text-decoration: underline; }

.article-body blockquote.site-insight, .article-body blockquote.insight,
.article-body blockquote.block-quote, .article-body blockquote.quote { font-size: 18px; }
.article-body .text-highlight { background: linear-gradient(transparent 62%, rgba(200, 16, 46, .16) 62%); }

/* cost rows */
.cost-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 2px; border-bottom: 1px dashed var(--line-2);
  font-size: 16px;
}
.cost-row + .cost-row { margin-top: 0; }
.cost-row__k { color: var(--ink-2); }
.cost-row__v { font-family: var(--display); font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* procedures */
.step-list { list-style: none !important; padding-left: 0 !important; counter-reset: step; }
.step-list > li { position: relative; counter-increment: step; padding-left: 46px; min-height: 32px; }
.step-list > li + li { margin-top: 16px; }
.step-list > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
}
.step-list > li strong { display: block; color: var(--ink); }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); }
.article-body table, .spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-body th, .article-body td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.article-body thead th { background: var(--paper-2); font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.article-body tbody tr:last-child td { border-bottom: 0; }
.article-body tbody tr:hover { background: var(--paper-2); }

/* end-of-article CTA */
.inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 48px; padding: 24px 26px;
  background: var(--deep); color: #fff; border-radius: var(--r-lg);
}
.inline-cta-body { min-width: 0; }
.inline-cta strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.inline-cta span { display: block; margin-top: 5px; font-size: 14.5px; color: #A9B3C1; max-width: 62ch; }
.inline-cta .btn--accent { flex: none; }

/* FAQ */
.faq { margin-top: 52px; }
.faq > h2 { font-size: clamp(21px, 2.2vw, 26px); margin-bottom: 16px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 17px 2px; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: .35em;
  width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  rotate: 45deg; transition: rotate .2s;
}
.faq-item[open] summary::after { rotate: -135deg; }
.faq-a { padding: 0 34px 20px 2px; font-size: 16px; color: var(--ink-2); }
.faq-a p { margin: 0; }

/* continue reading */
.post-links { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
.post-links > h2 { font-size: 17px; margin-bottom: 16px; }
.post-links .pillar-link { margin-top: 0; margin-bottom: 14px; }


/* ── 11 · 404 + search results ───────────────────────────────────────────── */

.blk-notfound { padding: 76px 0 !important; }
.blk-notfound .eyebrow { color: var(--muted); }
.blk-notfound .lead { max-width: 52ch; }
.blk-notfound .post-grid { margin-top: 14px; }
.blk-notfound .post-card { text-align: left; }

.nf-search { max-width: 520px; margin: 26px auto 0; }
.nf-systems { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 26px; }

.results-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.nf-search .search-input, .search--nf .search-input { width: 100%; }
.results-count { font-size: 13.5px; color: var(--muted); }
.results-list { border-top: 1px solid var(--line); margin-top: 24px; }
.result {
  display: block; padding: 20px 2px; border-bottom: 1px solid var(--line);
  transition: background-color .13s;
}
.result:hover { background: var(--paper-2); }
.result h2 { font-size: 18px; font-weight: 600; line-height: 1.32; letter-spacing: -.02em; }
.result:hover h2 { color: var(--brand); }
.result p { font-size: 14.5px; color: var(--muted); margin-top: 6px; max-width: 82ch; }
.result .result-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.result mark { background: #FEF0C7; color: inherit; border-radius: 2px; padding: 0 2px; }

/* ── 12 · Footer ─────────────────────────────────────────────────────────── */

.footer { background: var(--deep); color: #97A2B1; padding: 62px 0 30px; margin-top: 0; }
.footer a { color: #97A2B1; transition: color .15s; }
.footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 42px; padding-bottom: 44px; border-bottom: 1px solid var(--deep-3); }
.foot-brand .brand-name { color: #fff; }
.foot-brand .brand-sub { color: #6C7889; }
.foot-about { font-size: 14px; line-height: 1.62; margin-top: 16px; max-width: 40ch; }
.foot-col h5 { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: 15px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col li a { font-size: 13.5px; }
.foot-sys { display: flex; align-items: center; gap: 8px; }
.foot-sys .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--sys); flex: none; }
/* The affiliate disclosure. It sits ABOVE the copyright rule, not inside the
   link row, because it is a statement rather than a destination — and it has
   to survive being read, so it keeps body-sized leading at the smaller size
   instead of being compressed into fine print. */
.foot-affiliate { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--line, #E4E8EE);
  max-width: 88ch; font-size: 12.5px; line-height: 1.65; color: #6C7889; }
.foot-affiliate a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-affiliate a:hover { color: var(--accent, #C8102E); }
/* The rule now belongs to .foot-affiliate when it is present, so the bottom row
   only draws its own when it is the first thing after the grid. */
.foot-bot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 26px; font-size: 12.5px; color: #6C7889; }
.foot-affiliate + .foot-bot { padding-top: 18px; }
.foot-bot-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ── Reveal, motion, print ───────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .search-input { width: 190px; }
  .search-input:focus { width: 240px; }
  .article-shell.has-rail { grid-template-columns: 230px minmax(0, 1fr); }
  .article-shell.has-rail .article-rail { display: none; }
  /* The 230px track above is the TOC's. On an article that has a rail but NO
     table of contents, hiding the rail leaves the body as the only grid child,
     so it auto-places into that 230px track and the article renders in a narrow
     column with the rest of the row empty. Nothing is left to fill a first
     track here, so don't declare one. */
  .article-shell.has-rail:not(.has-toc) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .plate { max-width: 520px; }
  .sys-grid, .std-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-grid { column-count: 2; }
  .finder-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-index-list { column-count: 2; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

@media (max-width: 900px) {
  .nav, .search--head { display: none; }
  .burger { display: grid; }
  .header-bar { gap: 10px; }
  .nav-spacer { flex: 1; }
  /* The strip repeats the six system cards immediately below it — at this
     width that is three lines of duplication before the real content. */
  .strip { display: none; }
  .article-shell, .article-shell.has-rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc {
    position: static; max-height: none; overflow: visible;
    margin-bottom: 30px; padding: 18px 20px;
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  }
  .toc ol { border-left: 0; }
  .toc a { padding: 6px 0; border-left: 0; }
  .toc a.is-cur { border-left: 0; }
  .article-rail { position: static; margin-top: 34px; }
  .article-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .article-hero-media { max-width: 420px; }
}

@media (max-width: 720px) {
  :root { --gut: 20px; }
  .section { padding: 54px 0; }
  .hero { padding: 46px 0 44px; }
  .page { padding-top: 24px; padding-bottom: 60px; }
  .sys-grid, .std-grid, .post-grid, .sym-grid { grid-template-columns: minmax(0, 1fr); }
  .index-grid, .browse-grid { column-count: 1; grid-template-columns: minmax(0, 1fr); }
  .topic-index-list { column-count: 1; }
  .plate-rows { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .article-body { font-size: 16.5px; }
  .article-body h2 { margin-top: 1.6em; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
  /* "Continue reading" was the only card left as a single flex ROW on a phone:
     eyebrow, a full headline and an arrow competing for ~440px. Stack it like
     every other card at this width and put the arrow back on the baseline
     instead of pinned to a right edge that no longer exists. */
  .pillar-link { flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px 17px; }
  .pl-title { font-size: 15.5px; }
  .pl-arrow { margin-left: 0; font-size: 16px; }
  .search--hero .search-input { height: 54px; padding-right: 16px; font-size: 15.5px; }
  .search--hero .search-go { display: none; }
  .callout { flex-direction: column; gap: 12px; }
  .cost-row { flex-direction: column; gap: 2px; align-items: flex-start; }

  /* Tables become label/value cards — no horizontal movement on a phone. */
  .table-wrap { border: 0; overflow: visible; }
  .article-body table, .spec-table { display: block; }
  .article-body thead { display: none; }
  .article-body tbody, .article-body tr, .article-body td { display: block; width: 100%; }
  .article-body tr { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 14px; margin-bottom: 12px; }
  .article-body td { border: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .article-body tr td:last-child { border-bottom: 0; }
  .article-body td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
  }
}

@media print {
  .header, .footer, .toc, .article-rail, .inline-cta, .post-links, .drawer, .progress, .search { display: none !important; }
  .page, body.is-article .page { max-width: none; padding: 0; }
  .article-body { font-size: 11pt; max-width: none; color: #000; }
  a { text-decoration: none; color: #000; }
}


/* ── 08b · Portal pages — banner, article grid, marque grid ────────────────── */

/* .page caps its width and adds a gutter, which left the banner floating in a
   white frame. Break it out to the viewport edges — the banner IS the top of
   the page on a portal, the way the hero is on the home page. */
.page:has(> .pp-banner) { max-width: none; padding: 0 0 84px; }
.page > .pp-banner { margin-inline: calc(50% - 50vw); width: 100vw; }
.page > .pp-banner + .section { padding-top: clamp(34px, 4vw, 56px); }
.page > .section > .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.pp-banner {
  position: relative; isolation: isolate;
  background: var(--deep) var(--shot, none) center/cover no-repeat;
  padding: clamp(56px, 8vw, 104px) 0 clamp(34px, 4.5vw, 54px);
  margin-bottom: 0;
}
.pp-banner-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(10,12,14,.93) 0%, rgba(10,12,14,.78) 52%, rgba(10,12,14,.4) 100%),
    linear-gradient(to top, rgba(10,12,14,.9) 0%, rgba(10,12,14,0) 60%);
}
.pp-banner-in { max-width: 820px; }
.pp-banner-in h1 {
  font-family: var(--display); color: #fff; font-weight: 700;
  font-size: clamp(31px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -.03em;
  margin-bottom: 14px;
}
.pp-banner-in p { font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.62; color: rgba(255,255,255,.74); max-width: 64ch; }
.pp-banner-n {
  display: inline-block; margin-top: 18px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--deep); background: var(--gold);
  padding: 6px 13px; border-radius: 999px;
}

/* article grid, shared by every portal page */
.pp-arts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.pp-art {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .16s, transform .16s, box-shadow .16s;
}
.pp-art:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.pp-art-shot { display: block; aspect-ratio: 16/10; background: var(--paper-3); overflow: hidden; }
.pp-art-shot img { width: 100%; height: 100%; object-fit: cover; }
.pp-art-body { padding: 14px 16px 16px; }
.pp-art-title {
  display: block; font-family: var(--display); font-size: 15.5px; font-weight: 600;
  line-height: 1.35; color: var(--ink); letter-spacing: -.01em;
}
.pp-art-ex { display: block; margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* marque grid — text-only, dense, alphabetical weight on the name */
.pp-marques { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.pp-marque {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 15px 17px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .16s, background .16s, transform .16s;
}
.pp-marque:hover { border-color: var(--brand); background: var(--brand-w); transform: translateY(-2px); }
.pp-marque-name { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.pp-marque-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* cross-links keep the other axis one click away */
.pp-cross { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.pp-cross h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 13px;
}

.pp-brands--all { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }

/* ── 12b · Portal footer ─────────────────────────────────────────────────────
   The old footer was three columns of hub links. This one is a closing surface:
   identity and scale on the left, the search box for the reader who got to the
   bottom without finding it, then the two axes (brand, vehicle) plus the topic
   map. Dark, because the chrome is dark and the page should land somewhere. */

.pp-foot { background: var(--deep); color: rgba(255,255,255,.62); }

.pp-foot-top {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px; align-items: start;
  padding-bottom: 38px; margin-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pp-foot-logo { height: 52px; width: auto; margin-bottom: 16px; }
.pp-foot-about { font-size: 14px; line-height: 1.66; color: rgba(255,255,255,.6); max-width: 54ch; }

.pp-foot-stats { display: flex; gap: 30px; margin-top: 22px; }
.pp-foot-stats dt {
  font-family: var(--display); font-size: 23px; font-weight: 700; color: #fff;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pp-foot-stats dd { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; letter-spacing: .04em; }

.pp-foot-h {
  display: block; font-family: var(--display); font-size: 17px; font-weight: 600;
  color: #fff; margin-bottom: 13px; letter-spacing: -.01em;
}
.pp-foot-search .search-input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; box-shadow: none;
}
.pp-foot-search .search-input::placeholder { color: rgba(255,255,255,.46); }
.pp-foot-search .search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,155,62,.2); }
.pp-foot-search .search-ic { color: rgba(255,255,255,.55); }

.pp-foot-cols {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  padding-bottom: 32px;
}
.pp-foot-col h5 {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: 12px;
}
.pp-foot-col h5 .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sys, var(--gold));
}
.pp-foot-col ul { list-style: none; }
.pp-foot-col li { margin-bottom: 7px; }
.pp-foot-col a {
  font-size: 13.5px; color: rgba(255,255,255,.58);
  transition: color .14s;
}
.pp-foot-col a:hover { color: var(--gold-2); }
.pp-foot-more { font-weight: 600; color: var(--gold) !important; }

.pp-foot .foot-affiliate {
  font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.5);
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.10);
}
.pp-foot .foot-affiliate a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }

.pp-foot-bot {
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12.5px; color: rgba(255,255,255,.45);
}
.pp-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pp-foot-links a { color: rgba(255,255,255,.55); transition: color .14s; }
.pp-foot-links a:hover { color: var(--gold-2); }

@media (max-width: 860px) {
  .pp-foot-top { grid-template-columns: 1fr; gap: 30px; }
}