/* ==========================================================================
   HOME APPLIANCE GUIDE — "THE HOUSEHOLD HANDBOOK"
   Site-locked to homeapplianceguide.co.uk. Not a fleet template.

   THE DIRECTION
   Plain answers for the appliances in a British home, in the idiom of things
   a British reader already trusts: the cloth-bound household handbook, the
   white metro-tile splashback and the oak worktop, the 13 A socket and plug,
   the fascia of a washing machine, the Gas Mark chart from every cookbook.

     Navy        the cloth of the handbook: the top line, the spine, the head
                 of every table, the footer
     Paper       the page of the handbook and the warm wall of the bands
     Tile white  the splashback behind the title page
     Pillar-box  the socket's switch mark, the ribbon, the display, a rule
     red         before a chapter number. Never a whole surface
     Sage        kitchen green, kept to chips and quiet tints
     Brass       the gilt of the spine lettering and nothing else

   Four voices of type, each with one job:
     Source Serif 4   headlines — the voice of a British reference book
     IBM Plex Sans    reading copy and the interface
     Jost             labels, in spaced capitals: station and poster lettering
     IBM Plex Mono    codes and counts

   THE RULES
   One texture each for cloth, tile and oak; one glow (the display). Hierarchy
   comes from type size and rule weight: a 2px navy rule opens a list, 1px rules
   divide it. Numbers are tabular. Light theme only, painted explicitly.
   ========================================================================== */
:root{
  /* Palette — the layout overrides the base tokens from template fields. */
  --navy:   #1D2B3A;
  --red:    #B3262D;
  --sage:   #5E7F6E;
  --brass:  #B48E4F;
  --paper:  #F6F1E7;
  --ink:    #17202A;
  --rule:   #DDD4C4;

  --white:       #FFFFFF;
  --page:        #FDFAF3;
  --tile:        #FBFAF7;
  --grout:       #E4DFD5;
  --oak:         #B98B59;
  --navy-deep:   color-mix(in srgb, var(--navy) 78%, #000000);
  --navy-2:      color-mix(in srgb, var(--navy) 82%, #4A607A);
  --navy-tint:   color-mix(in srgb, var(--navy) 6%, #FFFFFF);
  --navy-soft:   color-mix(in srgb, var(--navy) 16%, #FFFFFF);
  --red-deep:    color-mix(in srgb, var(--red) 80%, #000000);
  --red-tint:    color-mix(in srgb, var(--red) 7%, #FFFFFF);
  --sage-tint:   color-mix(in srgb, var(--sage) 13%, #FFFFFF);
  --sage-ink:    color-mix(in srgb, var(--sage) 72%, #0E2218);             /* small text ≥5:1 */
  --brass-lite:  color-mix(in srgb, var(--brass) 72%, #FFFFFF);            /* on navy ≥7:1 */
  --brass-ink:   color-mix(in srgb, var(--brass) 58%, #3A2A0E);
  --paper-deep:  color-mix(in srgb, var(--paper) 74%, #B8A88A);
  --paper-ink:   color-mix(in srgb, var(--paper) 18%, #45392A);
  --ink-2:       color-mix(in srgb, var(--ink) 86%, #FFFFFF);
  --ink-3:       color-mix(in srgb, var(--ink) 68%, #FFFFFF);
  --ink-4:       color-mix(in srgb, var(--ink) 48%, #FFFFFF);
  --rule-2:      color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --rule-strong: color-mix(in srgb, var(--rule) 52%, #8C826F);
  --led:         #FF4134;
  --led-off:     rgba(255,65,52,.11);
  --glass:       #1B1414;
  --foot-ink:    #DCE3EA;
  --foot-mute:   #A9B5C2;
  --foot-rule:   rgba(255,255,255,.14);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "Jost", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     4px;
  --radius-lg:  10px;
  --base-size:  18px;
  --base-lh:    1.68;

  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;

  /* Metro tiles: white bricks laid half-bond, a grey grout line. */
  --tiles:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23E2DCD1' stroke-width='1.4'%3E%3Cpath d='M0 .7H88M0 44.7H88M.7 0V44M44.7 44V88'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M1.5 2.2H87M1.5 46.2H87'/%3E%3C/g%3E%3C/svg%3E");
  /* Book cloth: a fine weave over navy. */
  --cloth:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  /* Oak worktop: grain lines over a warm brown. */
  --oakgrain:
    repeating-linear-gradient(90deg, rgba(90,55,25,.10) 0 2px, transparent 2px 9px, rgba(255,240,215,.08) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, color-mix(in srgb, var(--oak) 80%, #FFF4E2) 0, var(--oak) 35%, color-mix(in srgb, var(--oak) 82%, #5B3B1C) 100%);
}

html, body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--base-size);
  line-height:var(--base-lh);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; }
svg{ display:block; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ color:var(--red-deep); }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
::selection{ background:var(--sage-tint); color:var(--ink); }

.container{
  max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px); position:relative;
}
.container .container{ max-width:none; padding-inline:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.7rem 1.1rem; font-weight:700;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- The label voice: spaced capitals, one rule for every label and caption. --- */

.label, .lk-desc, .finder-label, .finder-terms span, .tp-facts span,
.band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link, .ch-sub, .ch-no, .ch-total, .ch-more summary,
.toc-h, .breadcrumb, .post-card-meta, .result-meta, .results-count, .pl-eyebrow,
.eyebrow, .post-cat, .card-tag, .pc-tag, .post-links h2, .chip, .section-cap,
.stat .l, .article-body thead th, .article-body .pro-tip::before,
.article-body .related-inline-link::before, .pagination, .src-org, .bp-kicker, .bp-foot,
.book-cap-legend, .gas-title, .gas-table thead th, .key-what, .fa-buttons span, .bp-also a, .safe-copy .label{
  font-family:var(--font-label);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.35;
}

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:-.01em; margin:0; color:var(--ink);
  font-optical-sizing:auto;
}
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--red); font-style:normal; }
.center{ text-align:center; }
.display{ font-family:var(--font-display); font-weight:600; letter-spacing:-.012em; }
.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.eyebrow{ display:inline-block; color:var(--red); margin-bottom:.6rem; }

/* --- The brand mark: a UK 13 A socket and the wordmark ----------------------
   Plate and slots in currentColor (navy on the header, cream on the footer);
   the switch mark is always red. */

.socket{ width:40px; height:40px; flex:none; }
.socket-lg{ width:50px; height:50px; }
.sk-plate{ fill:none; stroke:currentColor; stroke-width:2.2; }
.sk-slot{ fill:currentColor; }
.sk-switch{ fill:none; stroke:currentColor; stroke-width:1.6; }
.sk-on{ fill:var(--red); }
.socket-foil{ width:30px; height:30px; color:var(--brass-lite); }
.socket-foil .sk-on{ fill:var(--brass-lite); }

.lk-word{
  display:flex; flex-direction:column; justify-content:center; gap:.18em;
  font-family:var(--font-display); color:currentColor; line-height:.95;
}
.lk-w1{ font-weight:600; font-size:1.42rem; letter-spacing:-.012em; text-transform:capitalize; white-space:nowrap; }
.lk-w2{
  font-family:var(--font-label); font-weight:500; font-size:.72rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--red); padding-left:.08em;
}
.socket-lg + .lk-word .lk-w1{ font-size:1.8rem; }
.socket-lg + .lk-word .lk-w2{ font-size:.82rem; color:var(--brass-lite); }

.lk-text{
  display:flex; flex-direction:column; gap:.22rem; min-width:0;
  margin-left:.5rem; padding-left:.95rem; border-left:1px solid var(--rule);
}
.lk-name{ font-family:var(--font-display); font-weight:600; font-size:1.38rem; line-height:1; color:var(--ink); white-space:nowrap; }
.lk-desc{ font-size:.62rem; letter-spacing:.1em; color:var(--ink-3); max-width:27ch; }
.lk-img{ height:42px; width:auto; }

/* --- The top line: cream lettering on navy, the date after a brass rule ---- */

.topline{ background:var(--navy); background-image:var(--cloth); color:#ECEFF2; }
.topline-in{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  min-height:34px;
}
.topline-what, .topline-asof{
  font-family:var(--font-label); font-weight:500; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.3;
}
.topline-asof{ white-space:nowrap; color:var(--brass-lite); padding-left:1rem; border-left:1px solid rgba(255,255,255,.2); }
.topline-asof time{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--page); border-bottom:1px solid var(--rule);
  transition:box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 10px 24px -20px rgba(23,32,42,.5); }
.nav{ display:flex; align-items:center; gap:1.4rem; min-height:78px; }
.nav-brand{ display:flex; align-items:center; gap:.7rem; color:var(--navy); flex:none; }
.nav-brand:hover{ color:var(--navy); }
.nav-links{ display:flex; align-items:center; gap:1.5rem; margin-left:auto; }
.nav-link{
  position:relative; padding:.4rem 0; color:var(--ink-2);
  font-weight:500; font-size:.96rem; white-space:nowrap;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease);
}
.nav-link:hover{ color:var(--navy); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-tail{ display:flex; align-items:center; gap:.6rem; }
.nav-search{
  display:flex; align-items:center; height:40px;
  background:var(--white); border:1.5px solid var(--rule-strong); border-radius:999px; overflow:hidden;
}
.nav-search input{
  width:150px; border:0; outline:0; background:transparent; padding:0 .3rem 0 1rem;
  font:inherit; font-size:.92rem; color:var(--ink);
}
.nav-search button{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:0; background:transparent; color:var(--navy); cursor:pointer;
}
.nav-search button svg{ width:18px; height:18px; }
.nav-search:focus-within{ border-color:var(--navy); }
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border:1.5px solid var(--rule-strong); border-radius:999px;
  background:var(--white); cursor:pointer;
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  display:block; width:18px; height:2px; background:var(--navy); border-radius:2px; position:relative;
  transition:transform var(--t) var(--ease);
}
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }
.site-header.is-open .nav-burger{ background:transparent; }
.site-header.is-open .nav-burger::before{ transform:translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   TITLE PAGE — the splashback, the oak worktop and the handbook
   ========================================================================== */

.title-page{
  position:relative;
  background-color:var(--tile); background-image:var(--tiles);
  padding:clamp(44px,6vw,86px) 0 clamp(64px,7vw,104px);
}
/* The worktop the handbook rests on. */
.title-page::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22px;
  background:var(--oakgrain);
  box-shadow:0 -6px 14px -8px rgba(60,40,20,.35), inset 0 2px 0 rgba(255,245,225,.35);
}
.tp-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.tp-kicker{ color:var(--red); margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem; }
.tp-kicker::before{ content:""; width:28px; height:2px; background:var(--red); flex:none; }

/* The wordmark: the site title, letter for letter, its three words in three
   styles — light, bold, and italic red. */
.tp-title{
  font-size:clamp(2.9rem,7vw,5.4rem); line-height:.98; letter-spacing:-.03em;
  margin:0; color:var(--navy); text-wrap:balance;
}
.tp-wordmark .wm{ display:inline; }
.tp-wordmark .wm-first{ font-weight:400; color:var(--ink-2); }
.tp-wordmark .wm-mid{ font-weight:700; }
.tp-wordmark .wm-last{ font-weight:500; font-style:italic; color:var(--red); margin-left:.07em; }
.tp-wordmark.is-spaced .wm-last{ margin-left:0; }
.tp-lead{ margin:1.4rem 0 0; font-size:1.2rem; line-height:1.58; color:var(--ink-2); max-width:54ch; }

.finder{ margin-top:2rem; max-width:620px; }
.finder-label{ display:block; color:var(--ink-3); margin-bottom:.55rem; }
.finder-row{
  display:flex; align-items:stretch; background:var(--white);
  border:2px solid var(--navy); border-radius:6px; overflow:hidden;
  box-shadow:0 14px 30px -24px rgba(23,32,42,.6);
}
.finder-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  padding:1rem 1.1rem; font:inherit; font-size:1.05rem; color:var(--ink);
}
.finder-go{
  display:flex; align-items:center; gap:.6rem; padding:0 1.4rem;
  border:0; background:var(--navy); color:#FFFFFF; cursor:pointer;
  font-family:var(--font-label); font-weight:600; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--t) var(--ease);
}
.finder-go svg{ width:22px; height:12px; }
.finder-go:hover{ background:var(--red); }
.finder-terms{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .5rem; margin:.95rem 0 0; }
.finder-terms span{ color:var(--ink-3); margin-right:.2rem; }
.finder-terms a{
  padding:.28rem .7rem; border:1px solid var(--rule-strong); border-radius:999px;
  background:var(--white); font-size:.9rem; color:var(--ink-2);
}
.finder-terms a:hover{ border-color:var(--navy); color:var(--navy); }

.tp-facts{ display:flex; flex-wrap:wrap; gap:0; margin:2rem 0 0; }
.tp-facts span{ color:var(--ink-3); padding-right:1.4rem; margin-right:1.4rem; border-right:1px solid var(--rule-strong); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{
  display:block; margin-bottom:.15rem;
  font-family:var(--font-display); font-weight:600; font-size:1.9rem; letter-spacing:-.02em;
  text-transform:none; color:var(--navy); font-variant-numeric:tabular-nums lining-nums;
}

/* --- The handbook ----------------------------------------------------------- */

.book{
  position:relative; margin:0; justify-self:end; width:min(100%,520px);
  display:grid; grid-template-columns:54px minmax(0,1fr); grid-template-rows:auto auto;
  transform:rotate(-1.2deg);
  filter:drop-shadow(0 26px 30px rgba(40,30,15,.28)) drop-shadow(0 4px 6px rgba(40,30,15,.18));
}
.book-spine{
  grid-row:1; grid-column:1;
  display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1.2rem 0;
  background:var(--navy); background-image:var(--cloth);
  border-radius:7px 0 0 7px;
  box-shadow:inset -6px 0 10px -6px rgba(0,0,0,.6), inset 3px 0 0 rgba(255,255,255,.06);
}
.spine-title{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-label); font-weight:500; font-size:.72rem; letter-spacing:.36em;
  color:var(--brass-lite); white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.book-page{
  grid-row:1; grid-column:2; position:relative;
  padding:2.1rem 2rem 1.3rem 2.1rem;
  background:var(--page);
  background-image:linear-gradient(90deg, rgba(120,95,55,.16), rgba(120,95,55,0) 34px);
  border:1px solid color-mix(in srgb, var(--rule) 80%, #A8977A);
  border-left:0; border-radius:0 6px 6px 0;
}
/* The page edges under the page: a few leaves of paper. */
.book-page::after{
  content:""; position:absolute; left:0; right:-5px; bottom:-6px; height:6px; z-index:-1;
  background:repeating-linear-gradient(180deg, #EDE5D4 0 1px, #FBF7EE 1px 2px);
  border:1px solid #D9CDB5; border-top:0; border-radius:0 0 6px 0;
}
.ribbon{
  position:absolute; top:-10px; right:2.2rem; width:16px; height:84px;
  background:linear-gradient(90deg, var(--red-deep), var(--red) 45%, var(--red-deep));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.2);
}
.bp-kicker{ margin:0; color:var(--red); }
.bp-title{
  margin:.35rem 0 1.1rem; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:2.3rem; line-height:1; letter-spacing:-.015em; color:var(--navy);
}
.contents{ list-style:none; margin:0; padding:0; border-top:2px solid var(--navy); }
.contents li{ border-bottom:1px solid var(--rule-2); }
.contents a{
  display:flex; align-items:baseline; gap:.6rem; padding:.62rem 0; color:var(--ink);
}
.ct-no{
  flex:none; width:2.3rem; font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:var(--red); font-variant-numeric:lining-nums;
}
.ct-name{ font-weight:500; font-size:1rem; line-height:1.3; }
.ct-dots{ flex:1; min-width:1rem; border-bottom:2px dotted var(--rule-strong); transform:translateY(-.25em); }
.ct-n{ flex:none; font-family:var(--font-mono); font-size:.86rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.contents a:hover .ct-name{ color:var(--red-deep); text-decoration:underline; text-underline-offset:3px; }
.bp-also{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:1rem 0 0; }
.bp-also a{ color:var(--navy); border-bottom:1px solid var(--navy-soft); }
.bp-also a:hover{ color:var(--red-deep); border-color:var(--red); }
.bp-foot{ display:flex; justify-content:space-between; margin:1.3rem 0 0; color:var(--ink-4); font-size:.66rem; }
.book-cap{
  grid-row:2; grid-column:1 / -1; display:flex; flex-direction:column; gap:.2rem;
  margin-top:1.6rem; padding-left:54px; transform:rotate(1.2deg);
}
.book-cap-title{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--ink-2); }
.book-cap-legend{ color:var(--ink-3); font-size:.66rem; }

/* ==========================================================================
   BANDS — the home page sections
   ========================================================================== */

.band{ padding:clamp(56px,7vw,100px) 0; }
.band-head{ margin-bottom:clamp(26px,3vw,40px); max-width:78ch; }
.band-head .label{ color:var(--red); margin:0 0 .7rem; display:flex; align-items:center; gap:.7rem; }
.band-head .label::before{ content:""; width:22px; height:2px; background:var(--red); flex:none; }
.band-title{ font-size:clamp(1.9rem,3.6vw,2.85rem); line-height:1.08; letter-spacing:-.02em; color:var(--navy); text-wrap:balance; }
.band-note{ margin:1rem 0 0; color:var(--ink-3); font-size:1.04rem; line-height:1.6; max-width:66ch; }
.band-head-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.4rem 2rem; max-width:none;
}
.band-head-row .label{ grid-column:1 / -1; }
.band-more{ color:var(--navy); padding-bottom:.5rem; white-space:nowrap; }
.band-more:hover{ color:var(--red-deep); }

/* --- Chapters: every appliance in the house ------------------------------- */

.chapters{ background:var(--paper); }
.ch-grid{ columns:3 340px; column-gap:clamp(18px,2vw,28px); }
.ch{
  break-inside:avoid; margin:0 0 clamp(18px,2vw,28px);
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--navy);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:1.35rem 1.4rem 1.1rem;
}
.ch-head{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto;
  column-gap:.9rem; align-items:center; padding-bottom:1rem; margin-bottom:.4rem; border-bottom:2px solid var(--navy);
}
.ch-icon{
  grid-row:1 / 4; grid-column:1; display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; background:var(--sage-tint); color:var(--navy);
}
.ch-icon svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ch-no{ grid-column:2; color:var(--red); font-size:.68rem; }
.ch-name{ grid-column:2; font-size:1.36rem; line-height:1.18; color:var(--navy); }
.ch-total{ grid-column:2; color:var(--ink-3); font-size:.68rem; margin-top:.15rem; }
.ch-total strong{ font-family:var(--font-mono); font-weight:500; color:var(--ink-2); letter-spacing:0; }
.ch-sub{ margin:.9rem 0 .2rem; color:var(--sage-ink); }
.ch-list > .ch-sub{ list-style:none; margin:0; padding:.95rem 0 .15rem; border:0; }
.ch-list > .ch-sub:first-child{ padding-top:.7rem; }
.ch-list{ list-style:none; margin:0; padding:0; }
.ch-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:.15rem .8rem;
  padding:.62rem 0; border-bottom:1px solid var(--rule-2);
}
.ch-row:last-child{ border-bottom:0; }
.ch-main{ font-weight:500; font-size:1rem; line-height:1.35; color:var(--ink); }
.ch-main:hover{ color:var(--red-deep); text-decoration:underline; text-underline-offset:3px; }
.ch-n{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.ch-parts, .ch-brands{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem; }
.ch-parts a{
  font-family:var(--font-label); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.18rem .5rem; border:1px solid var(--rule-strong); border-radius:3px; color:var(--ink-3);
}
.ch-parts a:hover{ border-color:var(--navy); color:var(--navy); }
.ch-brands a{
  font-size:.84rem; padding:.2rem .6rem; border-radius:999px;
  background:var(--sage-tint); color:var(--sage-ink); border:1px solid transparent;
}
.ch-brands a:hover{ border-color:var(--sage); color:var(--ink); }
.ch-more{ margin-top:.6rem; border-top:1px dashed var(--rule-strong); }
.ch-more summary{
  list-style:none; cursor:pointer; padding:.8rem 0 .3rem; color:var(--navy); display:flex; align-items:center; gap:.4rem;
}
.ch-more summary::-webkit-details-marker{ display:none; }
.ch-more summary::before{ content:"+"; font-family:var(--font-display); font-size:1.15rem; line-height:1; color:var(--red); }
.ch-more[open] summary::before{ content:"–"; }
.ch-more summary span{ color:var(--ink-4); }
.ch-other{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:.6rem 0 0; color:var(--ink-3); }
.ch-other a{ color:var(--navy); }
.ch-other a span{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-4); }

/* --- Error codes: the fascia of the machine -------------------------------- */

.codes{ background:var(--white); border-top:1px solid var(--rule); }
.codes-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,4.4vw,72px); align-items:start; }
.code-find{
  display:flex; align-items:stretch; max-width:520px; margin:0 0 1.6rem;
  border:2px solid var(--navy); border-radius:6px; overflow:hidden; background:var(--white);
}
.code-find input{ flex:1; min-width:0; border:0; outline:0; padding:.9rem 1rem; font:inherit; font-size:1rem; color:var(--ink); background:transparent; }
.code-find button{
  border:0; background:var(--navy); color:#fff; padding:0 1.2rem; cursor:pointer;
  font-family:var(--font-label); font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
}
.code-find button:hover{ background:var(--red); }
.code-brands{ list-style:none; margin:0; padding:0; border-top:2px solid var(--navy); max-width:520px; }
.code-brands li{ border-bottom:1px solid var(--rule-2); }
.code-brands a{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.7rem 0; color:var(--ink); font-weight:500; }
.code-brands a:hover{ color:var(--red-deep); }
.cb-n{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-4); font-variant-numeric:tabular-nums; }

.fascia-wrap{ display:flex; flex-direction:column; gap:1.4rem; }
.fascia{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:1.2rem; align-items:center;
  padding:1.4rem 1.6rem; border-radius:16px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F3F2EF 55%, #E6E4DF 100%);
  border:1px solid #D8D5CE;
  box-shadow:inset 0 2px 0 #FFFFFF, inset 0 -3px 0 rgba(0,0,0,.05), 0 24px 40px -28px rgba(23,32,42,.55);
}
.prog-dial{ width:100%; max-width:250px; height:auto; margin:0 auto; overflow:visible; }
.pd-ring{ fill:none; stroke:#D5D2CB; stroke-width:1.5; }
.pd-tick{ stroke:var(--ink-3); stroke-width:1.6; stroke-linecap:round; }
.pd-l{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.04em; fill:var(--ink-2); }
.pd-knob{ fill:#F7F6F3; stroke:#CFCBC3; stroke-width:1.5; filter:drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.pd-knob-in{ fill:#EFEDE8; stroke:#E2DFD8; stroke-width:1; }
.pd-pointer{ stroke:var(--red); stroke-width:5; stroke-linecap:round; }
.fa-panel{ display:flex; flex-direction:column; gap:.9rem; min-width:0; }
.fa-display{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.9rem 1rem .8rem; border-radius:8px;
  background:radial-gradient(120% 140% at 30% 20%, #2A1F1E 0%, var(--glass) 60%, #0E0A0A 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 #FFFFFF;
}
.seg7{ height:56px; width:auto; overflow:visible; }
.sg-on{ fill:var(--led); filter:drop-shadow(0 0 4px rgba(255,65,52,.75)); }
.sg-off{ fill:var(--led-off); }
.fa-tag{ font-family:var(--font-mono); font-weight:600; font-size:.7rem; letter-spacing:.14em; color:var(--led); opacity:.85; align-self:flex-start; }
.fa-buttons{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
.fa-buttons span{
  text-align:center; padding:.5rem .3rem; border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF,#ECEAE5); border:1px solid #D3CFC7; color:var(--ink-3); font-size:.62rem;
  box-shadow:0 2px 0 #CFCBC3;
}
.fa-buttons .fa-start{ grid-column:1 / -1; color:var(--navy); font-weight:600; }

.keys{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; }
.key{
  display:flex; flex-direction:column; gap:.2rem; height:100%;
  padding:.75rem .85rem; border:1px solid var(--rule); border-left:4px solid var(--red);
  border-radius:0 6px 6px 0; background:var(--page); color:var(--ink);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.key:hover{ background:var(--white); border-color:var(--rule-strong); border-left-color:var(--red-deep); color:var(--ink); }
.key-code{ font-family:var(--font-mono); font-weight:600; font-size:1.25rem; line-height:1; color:var(--red-deep); }
.key-what{ font-size:.64rem; color:var(--ink-3); }

/* --- In the kitchen: the oven chart and the index cards -------------------- */

.kitchen{ background:var(--paper); }
.kitchen-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4.4vw,72px); align-items:start; }
.cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.cards li{ min-width:0; }
.cards a{
  position:relative; display:block; height:100%;
  padding:1.6rem 1rem .9rem 1rem; color:var(--ink); font-weight:500; line-height:1.4;
  background-color:var(--white);
  background-image:
    linear-gradient(180deg, transparent 0 1.15rem, color-mix(in srgb, var(--red) 55%, #FFFFFF) 1.15rem calc(1.15rem + 2px), transparent calc(1.15rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 1.55rem, #CFE0EE 1.55rem calc(1.55rem + 1px));
  background-position:0 0, 0 .45rem;
  border:1px solid #E6E0D3; border-radius:3px;
  box-shadow:0 1px 0 #E6E0D3, 0 12px 18px -16px rgba(40,30,15,.45);
  transition:transform var(--t) var(--ease);
}
.cards a:hover{ transform:translateY(-2px); color:var(--red-deep); }
.cards li:nth-child(odd) a{ transform:rotate(-.4deg); }
.cards li:nth-child(odd) a:hover{ transform:rotate(-.4deg) translateY(-2px); }

.gas{
  position:relative; padding:1.4rem 1.4rem 1.2rem;
  background:var(--page); border:1px solid color-mix(in srgb, var(--rule) 80%, #A8977A); border-radius:8px;
  box-shadow:0 20px 34px -28px rgba(40,30,15,.55);
}
.gas-title{ margin:0 0 .9rem; color:var(--red); display:flex; align-items:center; gap:.6rem; }
.gas-title::after{ content:""; flex:1; height:1px; background:var(--rule-strong); }
.gas-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums lining-nums; }
.gas-table thead th{
  background:var(--navy); color:#FFFFFF; padding:.6rem .7rem; text-align:left; font-size:.66rem;
}
.gas-table thead th:first-child{ border-radius:4px 0 0 0; }
.gas-table thead th:last-child{ border-radius:0 4px 0 0; }
.gas-table tbody th, .gas-table td{ padding:.5rem .7rem; text-align:left; border-bottom:1px solid var(--rule-2); }
.gas-table tbody tr:last-child th, .gas-table tbody tr:last-child td{ border-bottom:0; }
.gas-table td{ font-size:.98rem; color:var(--ink-2); }
.gas-table td:nth-child(2){ font-weight:600; color:var(--ink); }
.gm{
  display:inline-flex; align-items:center; justify-content:center; width:1.85rem; height:1.85rem; border-radius:50%;
  background:var(--white); border:2px solid var(--red); color:var(--red-deep);
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
}
.gas-go{ text-align:right; white-space:nowrap; }
.gas-go a{ font-size:.86rem; font-weight:500; color:var(--navy); }
.gas-go a:hover{ color:var(--red-deep); }
.gas-note{ margin:1rem 0 0; font-size:.92rem; line-height:1.55; color:var(--ink-3); }

/* --- Common questions ------------------------------------------------------ */

.questions{ background:var(--white); }
.diag-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(28px,4vw,72px); align-items:start; }
.symptoms{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem; counter-reset:q; border-top:2px solid var(--navy); }
.symptoms li{ counter-increment:q; border-bottom:1px solid var(--rule-2); }
.symptoms a{
  display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; gap:.4rem; align-items:baseline;
  padding:.95rem 0; color:var(--ink); font-weight:500; font-size:1.02rem; line-height:1.4;
}
.symptoms a::before{
  content:counter(q, decimal-leading-zero); font-family:var(--font-mono); font-size:.8rem; color:var(--red); font-weight:500;
}
.sy-go{ color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.symptoms a:hover{ color:var(--red-deep); }
.symptoms a:hover .sy-go{ color:var(--red); transform:translateX(3px); }

/* --- The essential guides -------------------------------------------------- */

.guides{ background:var(--paper); }
.gd-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,3.4vw,56px); }
.gd-lead{
  padding:clamp(22px,2.6vw,36px); background:var(--white); border:1px solid var(--rule);
  border-left:6px solid var(--navy); border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.gd-tag{ color:var(--red); margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.1; letter-spacing:-.02em; }
.gd-lead-title a{ color:var(--navy); }
.gd-lead-title a:hover{ color:var(--red-deep); }
.gd-lead-ex{ margin:1rem 0 0; color:var(--ink-2); font-size:1.06rem; line-height:1.6; }
.gd-go{ display:inline-block; margin-top:1.2rem; color:var(--navy); }
.gd-go:hover{ color:var(--red-deep); }
.gd-side{ display:flex; flex-direction:column; border-left:1px solid var(--rule-strong); padding-left:clamp(20px,2.4vw,36px); }
.gd-med{ padding:0 0 1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--rule); }
.gd-med:last-child{ border-bottom:0; margin-bottom:0; }
.gd-med h3{ font-size:1.24rem; line-height:1.25; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--red-deep); }
.gd-med p{ margin:.45rem 0 0; font-size:.96rem; line-height:1.55; color:var(--ink-3); }
.gd-list{
  list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:2rem; border-top:2px solid var(--navy);
}
.gd-list li{ border-bottom:1px solid var(--rule); }
.gd-list a{ display:block; padding:.8rem 0; color:var(--ink); font-weight:500; line-height:1.38; }
.gd-list a:hover{ color:var(--red-deep); }

/* --- The latest band (the engine's own grid, restyled) --------------------- */

.latest{ background:var(--white); border-top:1px solid var(--rule); }
/* Eight of the engine's twelve newest are enough on the front page; the rest
   stay in the document and in /blog. */
.is-home .latest .post-grid > .post-card:nth-child(n+9){ display:none; }
.latest .section{ padding:0; }
.latest .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); color:var(--navy); }

/* --- Safety first: the plug, the points, the official sources -------------- */

.safety{ background:var(--navy); background-image:var(--cloth); color:#E9EDF1; }
.safety-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,4.4vw,72px); align-items:start; }
.safe{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(20px,2.6vw,40px); align-items:start; }
.plug{ width:100%; height:auto; }
.pg-body{ fill:#F4F3EF; stroke:#D7D4CD; stroke-width:2; }
.pg-face{ fill:#FFFFFF; stroke:#E1DED8; stroke-width:1.5; }
.pg-pin{ fill:#C8A55A; stroke:#9E7F3C; stroke-width:1.2; }
.pg-sleeve{ fill:#22252A; }
.pg-fuse{ fill:var(--red); }
.pg-fuse-t{ font-family:var(--font-label); font-weight:600; font-size:9.5px; letter-spacing:.06em; fill:#FFFFFF; }
.pg-cord{ stroke:#F4F3EF; stroke-width:12; stroke-linecap:round; }
.safe-copy .label{ color:var(--brass-lite); margin:0 0 .7rem; }
.safety .band-title{ color:#FFFFFF; }
.safe-p{ margin:1rem 0 0; font-size:1.04rem; line-height:1.62; color:#D9E0E7; max-width:62ch; }
.safe-list{ list-style:none; margin:1.4rem 0 0; padding:0; border-top:1px solid rgba(255,255,255,.18); }
.safe-list li{ position:relative; padding:.85rem 0 .85rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.12); line-height:1.55; color:#D9E0E7; }
.safe-list li::before{ content:""; position:absolute; left:0; top:1.3rem; width:.6rem; height:.6rem; background:var(--red); border-radius:1px; }
.safe-list strong{ color:#FFFFFF; font-weight:600; }

.src{
  padding:clamp(20px,2.4vw,30px); background:var(--page); color:var(--ink);
  border-radius:var(--radius-lg); border-top:5px solid var(--red);
}
.src-h{ font-size:1.5rem; color:var(--navy); margin:0 0 .8rem; }
.src-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--navy); }
.src-list li{ border-bottom:1px solid var(--rule-2); }
.src-list a{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem; padding:.75rem 0; color:var(--ink); }
.src-name{ font-weight:600; line-height:1.35; }
.src-org{ grid-column:1; color:var(--ink-3); font-size:.64rem; }
.src-go{ grid-row:1 / 3; grid-column:2; align-self:center; color:var(--red); }
.src-list a:hover .src-name{ color:var(--red-deep); text-decoration:underline; text-underline-offset:3px; }
.src-note{ margin:.9rem 0 0; font-size:.86rem; line-height:1.55; color:var(--ink-3); }

/* --- House rules ----------------------------------------------------------- */

.principles{ background:var(--paper); }
.pr-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid var(--navy); }
.pr-list li{ padding:1.6rem 1.8rem 1.6rem 0; border-bottom:1px solid var(--paper-deep); }
.pr-list li + li{ padding-left:1.8rem; border-left:1px solid var(--paper-deep); }
.pr-list li:nth-child(3n+1){ padding-left:0; border-left:0; }
.pr-no{ display:block; font-family:var(--font-display); font-style:italic; font-weight:600; font-size:1.5rem; color:var(--red); line-height:1; }
.pr-h{ margin:.7rem 0 .5rem; font-size:1.28rem; line-height:1.24; color:var(--navy); }
.pr-p{ margin:0; font-size:.99rem; line-height:1.6; color:var(--paper-ink); }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */

.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.post-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--navy-soft);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-card:hover{ border-top-color:var(--red); box-shadow:0 14px 30px -24px rgba(23,32,42,.45); }
/* The archive has no photography: these images are generated cards that
   re-print the headline. Hidden, never fetched (display:none on the link). */
.post-card-media{ display:none; }
.post-card-body{ padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--sage-ink); }
.post-card-title{ font-size:1.2rem; line-height:1.28; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--red-deep); }
.post-card-excerpt{ margin:0; font-size:.97rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.68rem; }

.card-grid, .pillar-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.card, .pillar-card{
  display:block; padding:1.3rem 1.35rem 1.4rem;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--navy);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  color:var(--ink); transition:border-color var(--t) var(--ease);
}
.card:hover, .pillar-card:hover{ border-left-color:var(--red); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--sage-ink); margin-bottom:.6rem; }
.card h3, .pillar-card h3{ font-size:1.18rem; line-height:1.3; margin:0; }
.pc-arrow{ display:inline-block; margin-top:.8rem; color:var(--ink-4); }
.card:hover .pc-arrow, .pillar-card:hover .pc-arrow{ color:var(--red); }
.blk-more{ margin-top:1.8rem; }

/* ==========================================================================
   BUTTONS · CHIPS · PAGINATION
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem;
  font-family:var(--font-label); font-size:.84rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:4px; cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn--accent{ background:var(--navy); color:#fff; }
.btn--accent:hover{ background:var(--red); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--navy); color:var(--navy); }
.btn--ghost:hover{ border-color:var(--red); color:var(--red-deep); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{
  display:inline-block; padding:.42rem .8rem; border-radius:999px;
  border:1px solid var(--rule-strong); background:var(--white); color:var(--ink-2);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{ color:var(--navy); border-color:var(--navy); }

.pagination{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule); color:var(--ink-3);
}
.pagination a{ padding:.65rem 1.15rem; border:1.5px solid var(--navy); border-radius:4px; color:var(--navy); }
.pagination a:hover{ border-color:var(--red); color:var(--red-deep); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   GENERIC PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */

.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); background:var(--white); }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  margin-bottom:1.6rem; color:var(--ink-3); font-size:.68rem;
}
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--red-deep); }
.breadcrumb [aria-hidden="true"]{ color:var(--red); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{
  color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Page titles. A topic arrives in lower case from the archive; its first letter
   is capitalised here (brand spellings are put right in the layout, outside
   the heading). */
.page-shell h1.display{ font-size:clamp(2.15rem,4.3vw,3.3rem); line-height:1.06; letter-spacing:-.022em; margin:0; color:var(--navy); text-wrap:balance; }
.page-shell h1.display::first-letter{ text-transform:uppercase; }
.page-shell .section{ padding:clamp(32px,4vw,52px) 0 0; }
.page-shell .section-head h2{ font-size:clamp(1.45rem,2.4vw,1.85rem); }

.results-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem; padding-bottom:1.1rem; border-bottom:2px solid var(--navy);
}
.results-head h1{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0; color:var(--navy); }
.results-count{ color:var(--ink-3); }
.results-list{ display:flex; flex-direction:column; }
.result{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.result h2{ font-size:1.3rem; line-height:1.28; margin:0; color:var(--ink); }
.result:hover h2{ color:var(--red-deep); }
.result p{ margin:.45rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-3); max-width:76ch; }
.result-meta{ display:flex; gap:.9rem; margin-top:.6rem; color:var(--ink-4); font-size:.68rem; }

.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--navy); }
.topic-index-head p{ margin:.35rem 0 0; color:var(--ink-3); font-size:.95rem; }
.topic-index-list{ columns:2 320px; column-gap:2.5rem; }
.topic-index-list a{
  display:block; break-inside:avoid; padding:.7rem 0;
  border-bottom:1px solid var(--rule-2); color:var(--ink-2); font-size:1rem; line-height:1.4;
}
.topic-index-list a:hover{ color:var(--red-deep); }

/* ==========================================================================
   ARTICLE — one answer
   ========================================================================== */

.article{ padding-bottom:1rem; }
.article-hero{
  margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px);
  border-bottom:2px solid var(--navy);
}
.article-hero-grid{ display:block; }
.article-hero-copy h1{
  font-size:clamp(2.15rem,4.3vw,3.4rem); line-height:1.06; letter-spacing:-.022em;
  margin:.2rem 0 0; max-width:24ch; color:var(--navy); text-wrap:balance;
}
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:1.1rem; font-size:.98rem; color:var(--ink-3);
}
.post-meta [aria-hidden="true"]{ color:var(--red); }
.post-meta time{ font-variant-numeric:tabular-nums; }
.post-meta strong{ color:var(--ink); font-weight:600; }
.article-lead{ margin:1.2rem 0 0; font-size:1.22rem; line-height:1.56; color:var(--ink-2); max-width:60ch; }

/* The generated hero card re-prints the title; hidden, never fetched. The
   <img> stays in the DOM, so og:image and the schema ImageObject are intact. */
.article-hero-media{ display:none; }

.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:240px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }

/* --- On this page (TOC): the handbook's contents in miniature ------------- */

.toc{
  position:sticky; top:104px; padding:1rem 1.1rem .4rem;
  background:var(--page); border:1px solid var(--rule); border-left:4px solid var(--navy); border-radius:0 6px 6px 0;
}
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--red); border-bottom:2px solid var(--navy); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc li:last-child{ border-bottom:0; }
.toc a{
  display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem;
  padding:.58rem 0; font-size:.93rem; line-height:1.4; color:var(--ink-2);
}
.toc a::before{
  content:counter(toc); font-family:var(--font-display); font-weight:600; font-size:.92rem; line-height:1.55;
  color:var(--red); font-variant-numeric:lining-nums;
}
.toc a:hover{ color:var(--red-deep); }
.article-rail{ min-width:0; }

/* --- Body ---------------------------------------------------------------- */

.article-body{ font-size:1rem; line-height:var(--base-lh); color:var(--ink-2); }
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.15rem; }
.article-body h2{
  margin:2.7rem 0 1rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-size:clamp(1.6rem,2.6vw,2.05rem); line-height:1.16; letter-spacing:-.018em; color:var(--navy);
}
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ margin:2rem 0 .6rem; font-size:1.32rem; line-height:1.26; }
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:0; }
.article-body a{
  color:var(--navy); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--red) 55%, transparent);
}
.article-body a:hover{ color:var(--red-deep); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:600; }

/* Lists: a small red square for a point, a navy disc for a step. */
.article-body ul, .article-body ol{ list-style:none; margin:0 0 1.35rem; padding:0; }
.article-body ul > li{ position:relative; padding-left:1.4rem; margin-bottom:.5rem; }
.article-body ul > li::before{
  content:""; position:absolute; left:.1rem; top:.62em; width:.42em; height:.42em;
  background:var(--red); border-radius:1px;
}
.article-body ol{ counter-reset:step; }
.article-body ol > li{ counter-increment:step; position:relative; padding-left:2.3rem; margin-bottom:.65rem; }
.article-body ol > li::before{
  content:counter(step); position:absolute; left:0; top:.2em;
  display:flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; border-radius:50%;
  background:var(--navy); color:#FFFFFF;
  font-family:var(--font-label); font-weight:600; font-size:.76rem; line-height:1;
  font-variant-numeric:tabular-nums;
}

/* Good to know */
.article-body .pro-tip{
  margin:1.7rem 0; padding:1rem 1.2rem 1.05rem;
  background:var(--sage-tint); border-left:4px solid var(--sage); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink);
}
.article-body .pro-tip::before{ content:"Good to know"; display:block; margin-bottom:.35rem; color:var(--sage-ink); }

/* "See also". The engine prints "→ " as a text node before the link;
   font-size:0 retires it without touching the DOM. */
.article-body .related-inline-link{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem;
  margin:1.5rem 0; padding:.8rem 1rem; font-size:0;
  background:var(--navy-tint); border:1px solid var(--navy-soft); border-radius:var(--radius);
}
.article-body .related-inline-link::before{ content:"See also"; font-size:.68rem; color:var(--ink-3); }
.article-body .related-inline-link a{ font-size:1rem; font-weight:600; text-decoration:none; }
.article-body .related-inline-link a:hover{ text-decoration:underline; }

.article-body blockquote{
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem;
  border-left:4px solid var(--red); color:var(--ink);
  font-family:var(--font-display); font-style:italic; font-size:1.24rem; line-height:1.5;
}
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); border-radius:var(--radius); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{
  font-family:var(--font-mono); font-size:.86em; padding:.12em .38em; border-radius:4px;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink);
}
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body pre code{ padding:0; border:0; background:transparent; }

/* Tables: a navy head, hairline rows. */
.table-wrap{ margin:1.8rem 0; overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); }
.article-body table{ width:100%; border-collapse:collapse; font-size:.96rem; font-variant-numeric:tabular-nums; }
.article-body th, .article-body td{ padding:.72rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); }
.article-body thead th{ background:var(--navy); color:#FFFFFF; font-size:.68rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--paper) 55%, #FFFFFF); }
.article-body tbody tr:last-child td{ border-bottom:0; }

/* --- Inline CTA, FAQ, further reading ----------------------------------- */

.inline-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  margin:2.2rem 0; padding:1.3rem 1.4rem;
  background:var(--paper); border:1px solid var(--rule); border-left:4px solid var(--navy); border-radius:0 var(--radius) var(--radius) 0;
}
.inline-cta-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.inline-cta-body strong{ font-family:var(--font-display); font-size:1.14rem; color:var(--ink); }
.inline-cta-body span{ font-size:.96rem; color:var(--ink-3); }

.faq{ margin-top:3rem; padding-top:1.3rem; border-top:2px solid var(--navy); }
.faq h2{ font-size:1.8rem; margin:0 0 .8rem; color:var(--navy); }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1rem 2.6rem 1rem 0; font-weight:600; font-size:1.06rem; line-height:1.42; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.25rem; top:.55rem;
  font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1; color:var(--red);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--red-deep); }
.faq-a{ padding:0 0 1.1rem; }
.faq-a p{ margin:0 0 .8rem; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.faq-a p:last-child{ margin-bottom:0; }

.post-links{ margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.post-links h2{ margin:0 0 1rem; color:var(--red); }
.pillar-link{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  background:var(--page); border:1px solid var(--rule); border-left:4px solid var(--navy); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink);
  transition:background var(--t) var(--ease);
}
.pillar-link:hover{ background:var(--paper); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--red); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.22rem; line-height:1.3; color:var(--navy); }
.pl-arrow{ margin-left:auto; color:var(--red); font-size:1.2rem; transition:transform var(--t) var(--ease); }
.pillar-link:hover .pl-arrow{ transform:translateX(4px); }

/* ==========================================================================
   BLOCKS — the Pages studio's own components
   ========================================================================== */

.blk{ padding:clamp(44px,6vw,80px) 0; }
.blk-space{ padding:0; }
.section{ padding:clamp(44px,6vw,80px) 0; }
.section-head{ margin-bottom:1.8rem; }
.section-cap{ color:var(--ink-3); }

.blk-hero .hero, .hero{ padding:clamp(40px,6vw,88px) 0; }
.hero-inner{ display:grid; gap:clamp(24px,3vw,48px); align-items:center; }
.hero h1{ font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.05; letter-spacing:-.022em; color:var(--navy); text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); border-radius:var(--radius); }

.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.blk-prose h2, .blk-text h2{ font-size:1.8rem; margin:2rem 0 .9rem; color:var(--navy); }

.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:center; }
.feat-copy h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.9rem; }
.feat-media img{ border:1px solid var(--rule); border-radius:var(--radius); }
.blk-feat-title{ margin-bottom:.9rem; }

.cols{ display:grid; gap:clamp(20px,2.4vw,36px); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.col{ padding:1.4rem 1.45rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); min-width:0; }
.col h3{ font-size:1.18rem; margin-bottom:.5rem; }
.col p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:2px solid var(--navy); }
.stat{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .n{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; font-variant-numeric:tabular-nums lining-nums; color:var(--navy);
}
.stat .l{ display:block; margin-top:.5rem; color:var(--ink-3); }
.sec-stat-band{ border-top:0; }

.blk-quote blockquote, .sec-quote blockquote{
  margin:0; padding:0 0 0 1.4rem; border-left:4px solid var(--red);
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem);
  font-weight:400; line-height:1.38; color:var(--ink); max-width:36ch;
}
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }

.cta, .cta-band, .sec-cta-band{
  padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-lg); text-align:center;
}
.cta h2, .cta-band h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.8rem; color:var(--navy); }
.cta p, .cta-band p{ color:var(--ink-3); max-width:56ch; margin-inline:auto; }
.cta .btn-row, .cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }

.blk-divider hr, hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.blk-figure figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--ink-3); }
.blk-notfound .lead{ margin-inline:auto; }

/* ==========================================================================
   FOOTER — navy cloth, a red headband and a brass line on top
   ========================================================================== */

.site-footer{
  background:var(--navy); background-image:var(--cloth); color:var(--foot-ink);
  padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px);
  border-top:4px solid var(--red); box-shadow:inset 0 2px 0 var(--brass);
}
.site-footer :focus-visible{ outline-color:var(--brass-lite); }
.foot-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px);
}
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.7rem; color:#FFFFFF; }
.foot-brand:hover{ color:#FFFFFF; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.34rem; line-height:1.34; color:#FFFFFF; }
.foot-about{ margin:.8rem 0 0; font-size:.97rem; line-height:1.62; color:var(--foot-mute); max-width:46ch; }

.foot-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,2.4vw,40px); min-width:0; }
.foot-col{ min-width:0; }
.foot-h{ margin:0 0 .9rem; padding-bottom:.6rem; color:var(--brass-lite); border-bottom:1px solid var(--foot-rule); font-size:.7rem; letter-spacing:.16em; }
.foot-col ul, .foot-col ol{ list-style:none; margin:0; padding:0; }
.foot-col li{ break-inside:avoid; }
.foot-col li a{ display:block; padding:.3rem 0; font-size:.97rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a span{ font-family:var(--font-mono); font-size:.78rem; color:var(--brass-lite); font-variant-numeric:tabular-nums; margin-left:.25rem; white-space:nowrap; }
.foot-col li a:hover{ color:#FFFFFF; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px; }

.foot-disclosure{
  margin:clamp(22px,2.4vw,32px) 0 0; padding:1rem 1.2rem; border-radius:var(--radius);
  border:1px solid var(--foot-rule); font-size:.9rem; line-height:1.6; color:var(--foot-ink); max-width:100ch;
}
.foot-disclosure a{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }

.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,32px); padding-top:1.2rem; border-top:1px solid var(--foot-rule);
}
.foot-copy{ margin:0; font-size:.92rem; color:var(--foot-mute); font-variant-numeric:tabular-nums; }
.foot-top-link{ color:var(--foot-ink); }
.foot-top-link:hover{ color:#FFFFFF; }
.foot-note{ margin:1.1rem 0 0; font-size:.85rem; line-height:1.6; color:var(--foot-mute); max-width:104ch; }

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); }
  .book{ justify-self:start; margin-top:.6rem; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .lk-text{ display:none; }
  .codes-grid, .kitchen-grid, .safety-grid{ grid-template-columns:minmax(0,1fr); }
  .pr-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-list li, .pr-list li + li{ padding:1.5rem 1.6rem 1.5rem 0; border-left:0; }
  .pr-list li:nth-child(2n){ padding-left:1.6rem; border-left:1px solid var(--paper-deep); }
  .pr-list li:nth-child(3n+1){ padding-left:0; }
  .pr-list li:nth-child(2n+1){ padding-left:0; border-left:0; }
}

@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-side{ border-left:0; padding-left:0; border-top:1px solid var(--rule-strong); padding-top:1.5rem; }
  .gd-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* The article collapses to one column; both shell selectors are restated
   because `.article-shell:has(.toc)` outranks a bare class. */
@media (max-width:1000px){
  .article-shell, .article-shell:has(.toc){ grid-template-columns:minmax(0,1fr); }
  .article-shell:not(:has(.toc)){ justify-items:stretch; }
  .article-main{ max-width:none; }
  .toc{ position:static; order:-1; margin-bottom:1.2rem; }
  .toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:1.6rem; }
  .article-rail{ order:-2; }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:920px){
  .nav{ min-height:68px; }
  .nav-toggle{ display:inline-flex; }
  .nav-search input{ display:none; }
  .nav-search{ border-color:var(--rule-strong); }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:.4rem clamp(16px,4vw,48px) 1.1rem;
    background:var(--page); border-bottom:1px solid var(--rule);
  }
  .site-header.is-open .nav-links{ display:flex; }
  .nav-link{ padding:.9rem 0; border-bottom:1px solid var(--rule-2); font-size:1.05rem; }
  .nav-link::after{ display:none; }
  .nav-tail{ margin-left:auto; }
  .feat, .cols-3, .cols-4, .cols-2{ grid-template-columns:minmax(0,1fr); }
  .fascia{ grid-template-columns:minmax(0,1fr); }
  .prog-dial{ max-width:220px; }
}

@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.6rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .cards{ grid-template-columns:minmax(0,1fr); }
  .safe{ grid-template-columns:minmax(0,1fr); }
  .safe-fig{ max-width:120px; }
  .gd-list{ grid-template-columns:minmax(0,1fr); }

  /* Stacked table rows; the engine stamps data-label on each cell. */
  .article-body table, .article-body thead, .article-body tbody,
  .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body thead{ display:none; }
  .article-body tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .article-body tr:last-child{ border-bottom:0; }
  .article-body tbody tr:nth-child(even) td{ background:transparent; }
  .article-body td{ border-bottom:0; padding:.4rem .95rem; }
  .article-body td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:.15rem;
    font-family:var(--font-label); font-weight:600; font-size:.68rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  }
}

@media (max-width:720px){
  .topline-asof{ display:none; }
  .topline-in{ min-height:30px; padding-block:.35rem; }
  .topline-what{ font-size:.6rem; letter-spacing:.1em; }
}

@media (max-width:600px){
  .socket{ width:34px; height:34px; }
  .lk-w1{ font-size:1.18rem; }
  .lk-w2{ font-size:.62rem; letter-spacing:.36em; }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .pr-list li, .pr-list li + li, .pr-list li:nth-child(2n){ padding:1.3rem 0; border-left:0; }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.85rem 1rem; }
  /* Three figures in a row, each over its label. */
  .tp-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .9rem; }
  .tp-facts span{ display:flex; flex-direction:column; gap:.2rem; padding:0; margin:0; border-right:0; font-size:.62rem; }
  .tp-facts strong{ margin:0; font-size:1.5rem; }
  .book{ grid-template-columns:40px minmax(0,1fr); transform:none; }
  .book-cap{ transform:none; padding-left:40px; }
  .book-page{ padding:1.6rem 1.1rem 1rem 1.3rem; }
  .bp-title{ font-size:1.9rem; }
  .ribbon{ right:1.1rem; height:64px; }
  .spine-title{ font-size:.62rem; letter-spacing:.28em; }
  .socket-foil{ width:24px; height:24px; }
  .ct-no{ width:2rem; }
  .ct-name{ font-size:.95rem; }
  .ch-grid{ columns:1; }
  .fascia{ padding:1.1rem 1rem; }
  .keys{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gas{ padding:1.1rem .8rem 1rem; }
  .gas-table thead th, .gas-table tbody th, .gas-table td{ padding-inline:.42rem; }
  .post-grid, .card-grid, .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .inline-cta{ flex-direction:column; align-items:stretch; }
  .topic-index-list{ columns:1; }

  /* On a phone the newest-articles band stacks into one long column; six cards
     are enough there. The rest stay in the document and in /blog. */
  .is-home .latest .post-grid > .post-card:nth-child(n+7){ display:none; }
}