/* ==========================================================================
   APPLIANCE QUESTIONS — "BEFORE YOU CALL FOR SERVICE"
   Site-locked to appliancequestions.com. Not a fleet template.

   THE DIRECTION
   Plain answers for the appliances in an American home, in the idiom of the
   things already in that home: the knob, the owner's manual on the fridge
   door, the glowing display, the cold storage chart, the warning label.

     Charcoal      black stainless: the top line, the control panel, the
                   footer, the head of every table
     Enamel/bisque the white of the machines and the warm wall behind them
     Steel         the fridge door the manual page hangs on
     Harvest gold  the 1970s kitchen color, kept to details: the pointer of
                   the dial, the magnet, a rule before each label. Never text
                   on white
     Pilot blue    every link and every button
     Safety orange the WARNING label, and nothing else

   Four voices of type, each with one job:
     Fraunces                headlines — the warm serif of an American home
                             magazine
     Source Sans 3           reading copy and the interface
     IBM Plex Mono           codes, labels, counts
     Barlow Semi Condensed   the printed manual and the control panel

   THE RULES
   One texture (brushed steel), one glow (the display), one soft shadow family
   (paper and metal sitting on something). Hierarchy comes from type size and
   rule weight: a 2px ink rule opens a list, 1px rules divide it. Numbers are
   tabular. Light theme only, painted explicitly on every surface.
   ========================================================================== */
:root{
  /* Palette — the layout overrides the base tokens from template fields. */
  --blue:    #1F4BD8;
  --char:    #16191D;
  --gold:    #D99A1C;
  --warn:    #FF7A00;
  --bisque:  #F2EDE4;
  --steel:   #D6DBE0;
  --ink:     #16191D;
  --rule:    #E3DED4;

  --white:       #FFFFFF;
  --enamel:      #FCFBF8;
  --blue-deep:   color-mix(in srgb, var(--blue) 76%, #000000);
  --blue-tint:   color-mix(in srgb, var(--blue) 6%, #FFFFFF);
  --blue-soft:   color-mix(in srgb, var(--blue) 15%, #FFFFFF);
  --gold-tint:   color-mix(in srgb, var(--gold) 16%, #FFFFFF);
  --gold-lite:   color-mix(in srgb, var(--gold) 72%, #FFFFFF);     /* text on charcoal ≥8:1 */
  --gold-ink:    color-mix(in srgb, var(--gold) 55%, #3D2400);     /* small text on light ≥5:1 */
  --bisque-deep: color-mix(in srgb, var(--bisque) 70%, #A39472);
  --bisque-ink:  color-mix(in srgb, var(--bisque) 20%, #4A4234);   /* text on bisque ≥7:1 */
  --ink-2:       color-mix(in srgb, var(--ink) 86%, #FFFFFF);      /* body copy        */
  --ink-3:       color-mix(in srgb, var(--ink) 68%, #FFFFFF);      /* secondary ≥5:1   */
  --ink-4:       color-mix(in srgb, var(--ink) 48%, #FFFFFF);      /* large/decor only */
  --rule-2:      color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --rule-strong: color-mix(in srgb, var(--rule) 50%, #8E877A);
  --steel-lite:  color-mix(in srgb, var(--steel) 45%, #FFFFFF);
  --steel-deep:  color-mix(in srgb, var(--steel) 62%, #6B747D);
  --panel:       color-mix(in srgb, var(--char) 88%, #2B323B);
  --panel-2:     color-mix(in srgb, var(--char) 70%, #3A424C);
  --vfd:         #6FF5C8;
  --vfd-dim:     color-mix(in srgb, #6FF5C8 55%, #0B0F0E);
  --foot-ink:    #DADDE1;
  --foot-mute:   #A4AAB2;
  --foot-rule:   rgba(255,255,255,.14);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-panel:   "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

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

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

  /* Brushed stainless: a few soft highlights, then the grain. */
  --brushed:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, rgba(0,0,0,.025) 1px 2px, transparent 2px 4px),
    linear-gradient(100deg, color-mix(in srgb, var(--steel) 92%, #9AA3AC) 0%, var(--steel-lite) 34%, var(--steel) 52%, color-mix(in srgb, var(--steel) 55%, #FFFFFF) 74%, color-mix(in srgb, var(--steel) 90%, #A1AAB3) 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(--blue); text-decoration:none; }
a:hover{ color:var(--blue-deep); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
::selection{ background:var(--gold-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(--char); 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: one rule for every label, caption and small number. --- */

.label, .lk-desc, .finder-label, .finder-terms span, .tp-facts span,
.band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link, .ap-sub, .ap-total, .ap-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, .manual-kicker, .manual-foot,
.chart-title span, .door-cap-legend{
  font-family:var(--font-label);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
}

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

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

/* --- The brand mark: a control dial and the wordmark -------------------------
   Ticks and knob in currentColor (ink on the header, white on the footer); the
   pointer is always harvest gold. */

.dial{ width:38px; height:38px; flex:none; }
.dial-lg{ width:48px; height:48px; }
.dl-ticks line{ stroke:currentColor; stroke-width:1.7; stroke-linecap:round; opacity:.55; }
.dl-knob{ fill:currentColor; }
.dl-pointer{ fill:none; stroke:var(--gold); stroke-width:2.8; stroke-linecap:round; }
.lk-word{
  font-family:var(--font-display); font-weight:650; font-size:1.78rem; line-height:1;
  letter-spacing:-.03em; color:currentColor; padding-bottom:.12em;
}
.dial-lg + .lk-word{ font-size:2.2rem; }
/* Two words of the same length, stacked into a block beside the dial. */
.lk-stack{ display:flex; flex-direction:column; gap:.06em; font-size:1.2rem; line-height:.9; letter-spacing:-.025em; padding:0; }
.lk-stack span:first-child{ font-weight:450; opacity:.82; }
.lk-stack span:last-child{ font-weight:700; }
.dial-lg + .lk-stack{ font-size:1.6rem; }

/* --- The top line: light lettering on charcoal, the date in gold ---------- */

.topline{ background:var(--char); color:#E6E8EB; }
.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:.08em; text-transform:uppercase; line-height:1.3;
}
.topline-asof{ white-space:nowrap; color:var(--gold-lite); }
.topline-asof time{ font-variant-numeric:tabular-nums; }

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

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

.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--rule);
  transition:box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 1px 0 var(--rule), 0 6px 18px rgba(22,25,29,.07); }
.nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); min-height:78px; }
.nav-brand{ display:inline-flex; align-items:center; gap:.55rem; color:var(--ink); flex:none; }
.nav-brand:hover{ color:var(--ink); }

.nav-links{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav-link{
  position:relative; padding:.55rem .72rem;
  font-size:.98rem; font-weight:600; color:var(--ink-2);
  transition:color var(--t) var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.15rem; height:3px; border-radius:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ transform:scaleX(1); }

.nav-tail{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-search{
  display:flex; align-items:center;
  border:1px solid var(--rule); background:var(--enamel); border-radius:999px;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-search:focus-within{ border-color:var(--blue); background:var(--white); }
.nav-search input{
  width:180px; border:0; background:transparent; outline:none;
  font:inherit; font-size:.95rem; color:var(--ink); padding:.55rem .1rem .55rem 1rem;
}
.nav-search input::placeholder{ color:var(--ink-3); }
.nav-search button{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:transparent; color:var(--ink-2); cursor:pointer; border-radius:999px;
}
.nav-search button svg{ width:18px; height:18px; }
.nav-search button:hover{ color:var(--blue); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  display:block; width:18px; height:2px; background:var(--ink);
  transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-burger{ position:relative; }
.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); }

/* ==========================================================================
   HOME — the title page: the kitchen wall and the fridge door
   ========================================================================== */

.title-page{
  background:var(--bisque);
  padding:clamp(40px,6vw,84px) 0 clamp(52px,6vw,88px);
  border-bottom:1px solid var(--bisque-deep);
}
.tp-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,84px); align-items:start;
}
.tp-copy{ padding-top:clamp(0px,3.4vw,44px); }
.tp-kicker{ margin-bottom:1.1rem !important; }

/* The wordmark: the site title, letter for letter, its two words in two
   weights. It breaks between them (the <wbr>), never inside a word; the second
   word stands on a harvest-gold rule. */
.tp-title{ margin:0 0 1.3rem; font-weight:600; color:var(--ink); }
.tp-main{
  display:block;
  font-size:clamp(2.45rem,4.9vw,4.25rem); line-height:1.04; letter-spacing:-.02em;
  text-wrap:balance;
}
.tp-wordmark{
  font-size:clamp(2.7rem,6.6vw,5.6rem); line-height:1; letter-spacing:-.035em;
}
.wm{ display:inline; }
.wm-first{ font-weight:420; color:var(--ink-2); }
.wm-mid{ font-weight:500; }
.wm-last{
  font-weight:720; padding-inline:.02em;
  background:linear-gradient(180deg, transparent 84%, var(--gold) 84% 93%, transparent 93%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.tp-lead{
  font-size:clamp(1.08rem,1.5vw,1.26rem); line-height:1.6;
  color:var(--ink-2); max-width:52ch; margin:0 0 2rem;
}

.finder{ max-width:640px; margin:0; }
.finder-label{ display:block; color:var(--ink); margin-bottom:.6rem; }
.finder-row{
  display:flex; background:var(--white);
  border:1.5px solid var(--ink); border-radius:999px; overflow:hidden;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.finder-row:focus-within{ border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent); }
.finder-input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:1.06rem; color:var(--ink); padding:.95rem 1.3rem;
}
.finder-input::placeholder{ color:var(--ink-3); }
.finder-go{
  display:inline-flex; align-items:center; gap:.65rem; flex:none;
  margin:5px; border:0; background:var(--blue); color:#fff;
  padding:0 1.45rem; cursor:pointer; border-radius:999px;
  font-family:var(--font-body); font-weight:700; font-size:1.02rem;
  transition:background var(--t) var(--ease);
}
.finder-go svg{ width:20px; height:10px; }
.finder-go:hover{ background:var(--blue-deep); }
.finder-terms{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  margin:1rem 0 0; font-size:.98rem;
}
.finder-terms span{ color:var(--bisque-ink); }
.finder-terms a{ color:var(--ink); border-bottom:1px solid var(--bisque-deep); padding-bottom:1px; }
.finder-terms a:hover{ color:var(--blue-deep); border-bottom-color:var(--blue); }

.tp-facts{
  display:flex; flex-wrap:wrap; gap:.6rem 0; margin:2.1rem 0 0;
  padding-top:1.1rem; border-top:1px solid var(--bisque-deep); max-width:640px;
}
.tp-facts span{ color:var(--bisque-ink); padding-right:1.3rem; margin-right:1.3rem; border-right:1px solid var(--bisque-deep); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{
  font-family:var(--font-display); font-weight:600; font-size:1.65rem;
  letter-spacing:-.01em; text-transform:none; color:var(--ink);
  margin-right:.35rem; font-variant-numeric:tabular-nums lining-nums;
}

/* --- The fridge door and the manual page ----------------------------------
   Brushed stainless, a handle down the left edge, and the page every owner's
   manual has, held on by a magnet. Every problem is a link; the right-hand
   column counts the answers behind it. */

.door{
  position:relative; margin:0; justify-self:end; width:100%; max-width:520px;
  padding:44px clamp(18px,2.4vw,30px) 26px clamp(52px,5vw,66px);
  background:var(--brushed);
  border-radius:var(--radius-lg) var(--radius-lg) 8px 8px;
  box-shadow:inset 0 0 0 1px rgba(22,25,29,.07), inset 0 -10px 18px -12px rgba(22,25,29,.18), 0 34px 60px -34px rgba(22,25,29,.45);
}
.door-handle{
  position:absolute; left:clamp(18px,1.8vw,24px); top:9%; bottom:9%; width:13px; border-radius:7px;
  background:linear-gradient(90deg, var(--steel-deep) 0%, #F7F8FA 42%, #FFFFFF 50%, var(--steel-deep) 100%);
  box-shadow:3px 2px 8px rgba(22,25,29,.22), inset 0 0 0 1px rgba(22,25,29,.08);
}
.manual{
  position:relative;
  background:#FFFFFF; color:var(--ink);
  padding:1.65rem clamp(1rem,2vw,1.5rem) .95rem;
  border-radius:2px;
  box-shadow:0 1px 1px rgba(22,25,29,.10), 0 14px 26px -12px rgba(22,25,29,.32);
}
.manual p{ margin:0; }
.magnet{
  position:absolute; top:-15px; left:58%; width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--gold) 45%, #FFFFFF) 0 14%, var(--gold) 46%, color-mix(in srgb, var(--gold) 70%, #5A3A00) 100%);
  box-shadow:0 3px 5px rgba(22,25,29,.32), inset 0 -2px 3px rgba(0,0,0,.18);
}
.manual-head{ padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.manual-kicker{ display:flex; justify-content:space-between; gap:1rem; color:var(--ink-3); font-size:.64rem; letter-spacing:.14em; }
.manual-title{
  margin-top:.45rem !important; font-family:var(--font-panel); font-weight:700;
  font-size:clamp(1.45rem,2.2vw,1.78rem); line-height:1.08; letter-spacing:.005em;
}
.manual-intro{ margin-top:.35rem !important; font-size:.95rem; line-height:1.45; color:var(--ink-3); font-style:italic; }

.manual-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.manual-table thead th{
  padding:.55rem 0 .4rem; text-align:left; border-bottom:1px solid var(--ink);
  font-family:var(--font-panel); font-weight:600; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
}
.manual-table thead th:last-child, .mt-see{ text-align:right; }
.mt-sec th{
  padding:.62rem 0 .12rem; text-align:left;
  font-family:var(--font-label); font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink);
}
.manual-table td{ padding:.3rem 0; border-bottom:1px dotted var(--rule-strong); vertical-align:baseline; }
.manual-table td a{ color:var(--ink); font-weight:600; font-size:.97rem; line-height:1.32; }
.manual-table td a:hover{ color:var(--blue); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.mt-see{ padding-left:1rem !important; white-space:nowrap; font-family:var(--font-label); font-size:.78rem; color:var(--ink-3); }
.manual-foot{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.9rem !important;
  color:var(--ink-4); font-size:.62rem; letter-spacing:.12em;
}
.door-cap{ display:block; margin:1.1rem 0 0; }
.door-cap-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.04rem; line-height:1.3; color:var(--ink); }
.door-cap-legend{ display:block; margin-top:.3rem; text-transform:none; letter-spacing:.01em; font-size:.74rem; color:var(--ink-2); line-height:1.5; }

/* ==========================================================================
   HOME — bands
   ========================================================================== */

section{ position:relative; }
.band{ padding:clamp(52px,6.5vw,96px) 0; border-bottom:1px solid var(--rule); }
.band.apps, .band.questions, .band.latest, .band.sources{ background:var(--white); }
.band.food, .band.guides, .band.principles{ background:var(--bisque); border-bottom-color:var(--bisque-deep); }
.band.sources{ border-bottom:0; }

.band-head{ margin-bottom:clamp(26px,3vw,42px); max-width:780px; }
.band-head-row{
  max-width:none; display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:2rem; align-items:end;
}
.band-head-row .label, .band-head-row .band-note{ grid-column:1 / -1; }
.band-head-row .band-note{ order:3; }
.label{ display:flex; align-items:center; gap:.6rem; margin:0 0 .75rem; color:var(--blue); letter-spacing:.12em; }
.label::before{ content:""; width:26px; height:3px; border-radius:2px; background:var(--gold); flex:none; }
.band-title{
  font-size:clamp(1.95rem,3.4vw,2.85rem); line-height:1.1; letter-spacing:-.02em;
  margin:0; text-wrap:balance;
}
.band-note{ margin:.85rem 0 0; color:var(--ink-3); font-size:1.04rem; max-width:62ch; }
.band.food .band-note, .band.guides .band-note{ color:var(--bisque-ink); }
.band-more{ color:var(--blue); white-space:nowrap; padding-bottom:.35rem; }
.band-more:hover{ color:var(--blue-deep); }

/* --- Every appliance: one card each ----------------------------------------
   The drawing, the name and the count on top; the problems open; everything
   else about the machine folded under them. Brands sit under the theme they
   belong to, in a lighter hand. */

/* Cards of different heights pack into columns (three on a wide screen, one on
   a phone) instead of leaving holes under the short ones. */
.ap-grid{ columns:3 330px; column-gap:clamp(16px,1.8vw,26px); }
.ap{
  display:block; width:100%; min-width:0; break-inside:avoid;
  margin:0 0 clamp(16px,1.8vw,26px);
  background:var(--white);
  border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:1.25rem 1.3rem .9rem;
  scroll-margin-top:110px;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ap:hover{ border-color:var(--rule-strong); box-shadow:0 14px 30px -24px rgba(22,25,29,.4); }
.ap-head{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:.95rem;
  align-items:center; padding-bottom:.9rem; margin-bottom:.35rem; border-bottom:2px solid var(--ink);
}
.ap-icon{
  grid-row:1 / span 2; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:12px; background:var(--bisque); color:var(--ink);
}
.ap-icon svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ap-name{ font-size:1.38rem; line-height:1.15; letter-spacing:-.015em; align-self:end; }
.ap-total{ color:var(--ink-3); align-self:start; margin-top:.2rem; }
.ap-total strong{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.ap-sub{ margin:.7rem 0 .1rem; color:var(--gold-ink); letter-spacing:.12em; font-size:.66rem; }
.ap-list{ list-style:none; margin:0; padding:0; }
.ap-row{
  display:grid; grid-template-columns:auto minmax(10px,1fr) auto; align-items:baseline; column-gap:.45rem;
  padding:.5rem 0; border-bottom:1px solid var(--rule-2);
}
.ap-list > .ap-row:last-child{ border-bottom:0; }
.ap-row::after{ content:""; grid-column:2; grid-row:1; border-bottom:1px dotted var(--ink-4); transform:translateY(-.3em); }
.ap-main{ grid-column:1; grid-row:1; color:var(--ink); font-weight:600; font-size:1rem; line-height:1.35; }
.ap-main:hover{ color:var(--blue); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.ap-n{ grid-column:3; grid-row:1; color:var(--ink-3); font-family:var(--font-label); font-size:.8rem; font-variant-numeric:tabular-nums; }
.ap-brands{
  grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; gap:.05rem .85rem;
  margin-top:.22rem; padding-left:.7rem; border-left:2px solid var(--rule);
}
.ap-brands a{ color:var(--ink-3); font-size:.88rem; line-height:1.45; }
.ap-brands a:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.ap-more{ margin-top:.25rem; border-top:1px solid var(--rule); }
.ap-more summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
  padding:.8rem 0 .45rem; color:var(--blue); letter-spacing:.08em; font-size:.68rem;
}
.ap-more summary::-webkit-details-marker{ display:none; }
.ap-more summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; border-radius:50%; border:1.5px solid currentColor;
  font-size:.86rem; line-height:1; font-weight:600;
}
.ap-more[open] summary::before{ content:"–"; }
.ap-more summary span{ color:var(--ink-4); }
.ap-more summary:hover{ color:var(--blue-deep); }

/* --- Error codes: the control panel ----------------------------------------
   Charcoal metal, a green display that blinks the way the machine does, and a
   row of keys — each one a code and the page that explains it. */

.band.codes{
  background-color:var(--char);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  color:var(--foot-ink); border-bottom:0;
}
.codes .label{ color:var(--gold-lite); }
.codes .band-title{ color:#FFFFFF; }
.codes .band-note{ color:var(--foot-mute); }
.codes-grid{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(30px,4.4vw,80px); align-items:start;
}
.codes .band-head{ margin-bottom:1.6rem; }
.panel{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; align-items:stretch;
  padding:1rem; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 34px -20px rgba(0,0,0,.6);
}
.vfd{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.2rem;
  min-width:128px; padding:.7rem 1rem; border-radius:8px;
  background:#060908; box-shadow:inset 0 2px 8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(111,245,200,.08);
}
.vfd-code{
  font-family:var(--font-mono); font-weight:600; font-size:2.4rem; line-height:1; letter-spacing:.08em;
  color:var(--vfd); text-shadow:0 0 6px rgba(111,245,200,.55), 0 0 18px rgba(111,245,200,.25);
  animation:vfd-blink 1.8s steps(1, end) infinite;
}
.vfd-tag{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.24em; color:var(--vfd-dim); }
@keyframes vfd-blink{ 0%,62%{ opacity:1; } 63%,100%{ opacity:.18; } }
.code-find{ display:flex; flex-direction:column; justify-content:center; gap:.6rem; min-width:0; }
.code-find input{
  width:100%; min-width:0; border:1px solid rgba(255,255,255,.14); border-radius:8px; outline:none;
  background:#0C0F12; color:#FFFFFF; font:inherit; font-size:1rem; padding:.78rem .95rem;
}
.code-find input::placeholder{ color:#8E959D; }
.code-find input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }
.code-find button{
  align-self:flex-start; border:0; border-radius:999px; cursor:pointer;
  background:var(--gold); color:var(--char); padding:.62rem 1.2rem;
  font-family:var(--font-panel); font-weight:700; font-size:.98rem; letter-spacing:.06em; text-transform:uppercase;
  transition:background var(--t) var(--ease);
}
.code-find button:hover{ background:var(--gold-lite); }

.code-apps{ list-style:none; margin:1.7rem 0 0; padding:0; border-top:1px solid var(--foot-rule); }
.code-apps li{ display:grid; grid-template-columns:minmax(0,9.5rem) minmax(0,1fr); gap:.3rem 1rem; padding:.72rem 0; border-bottom:1px solid var(--foot-rule); }
.ca-main{ color:#FFFFFF; font-weight:600; font-size:1rem; line-height:1.4; }
.ca-main:hover{ color:var(--gold-lite); text-decoration:underline; text-underline-offset:3px; }
.ca-brands{ display:flex; flex-wrap:wrap; gap:.1rem .85rem; }
.ca-brands a{ color:var(--foot-mute); font-size:.92rem; line-height:1.5; }
.ca-brands a:hover{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }

.keys{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem;
}
.key{
  display:flex; flex-direction:column; gap:.35rem; height:100%;
  padding:.95rem 1rem .9rem; border-radius:10px;
  background:linear-gradient(180deg, #252B33, #1C2128);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 0 rgba(0,0,0,.45);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.key:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), 0 3px 0 rgba(0,0,0,.45); }
.key:active{ transform:translateY(1px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.key-code{
  font-family:var(--font-mono); font-weight:600; font-size:1.42rem; line-height:1.1; letter-spacing:.06em;
  color:var(--vfd); text-shadow:0 0 6px rgba(111,245,200,.35);
}
.key-what{ color:#C9CED4; font-size:.9rem; line-height:1.35; }

/* --- Food storage: the cold storage chart ---------------------------------- */

.food-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,4.4vw,80px); align-items:start;
}
.food-qs{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.food-qs li{ border-bottom:1px solid var(--bisque-deep); }
.food-qs a{
  display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.4rem; align-items:baseline;
  padding:.8rem 0; color:var(--ink); font-weight:600; font-size:1.02rem; line-height:1.38;
}
.food-qs a::before{
  content:""; width:.95rem; height:.95rem; transform:translateY(.12rem); border-radius:50%;
  background:var(--white); border:2px solid var(--gold);
}
.food-qs a:hover{ color:var(--blue-deep); }

.chart{
  position:relative; background:var(--white); border-radius:4px;
  padding:1.6rem clamp(1rem,2.2vw,1.6rem) 1.2rem;
  box-shadow:0 1px 1px rgba(22,25,29,.08), 0 18px 34px -24px rgba(22,25,29,.4);
}
.magnet-chart{ top:-13px; left:auto; right:12%; width:26px; height:26px; }
.chart-title{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0 0 .9rem;
  font-family:var(--font-panel); font-weight:700; font-size:1.42rem; line-height:1.15; text-transform:uppercase; letter-spacing:.03em;
}
.chart-title span{ color:var(--ink-3); white-space:nowrap; }
.chart-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.chart-table thead th{
  padding:.65rem .7rem; text-align:left; vertical-align:bottom;
  background:var(--char); color:#FFFFFF;
  font-family:var(--font-panel); font-weight:600; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.2;
}
.chart-table thead th:first-child{ border-radius:3px 0 0 0; }
.chart-table thead th:last-child{ border-radius:0 3px 0 0; }
.chart-table thead small{ display:block; margin-top:.15rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--gold-lite); text-transform:none; }
.ct-ico{ display:none; }
.chart-table tbody th{ padding:.62rem .7rem; text-align:left; font-weight:600; font-size:1rem; color:var(--ink); }
.chart-table td{ padding:.62rem .7rem; }
.chart-table tbody tr{ border-bottom:1px solid var(--rule-2); }
.chart-table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--bisque) 45%, #FFFFFF); }
.chart-table tbody tr:last-child{ border-bottom:0; }
.chart-table td a{ font-family:var(--font-mono); font-weight:500; font-size:.92rem; color:var(--blue); }
.chart-table td a::after{ content:" →"; color:var(--ink-4); }
.chart-table td a:hover{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px; }
.ct-none{ color:var(--ink-4); }
.chart-more{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid var(--rule); }
.chart-more a{ color:var(--ink); font-weight:600; font-size:.96rem; }
.chart-more a span{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-3); font-weight:400; }
.chart-more a:hover{ color:var(--blue); }

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

.diag-grid{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,76px); align-items:start;
}
.diag-grid .band-head{ margin-bottom:0; }
.symptoms{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem;
  border-top:2px solid var(--ink);
}
.symptoms li{ display:flex; border-bottom:1px solid var(--rule); }
.symptoms a{
  flex:1; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  position:relative; padding:.95rem 0 .95rem 2.2rem;
  color:var(--ink); font-weight:600; font-size:1.03rem; line-height:1.36;
}
.symptoms a::before{
  content:"?"; position:absolute; left:0; top:50%; width:23px; height:23px; margin-top:-11.5px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); border-radius:50%; color:var(--char);
  font-family:var(--font-display); font-weight:700; font-size:.88rem; line-height:1;
}
.sy-go{ color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.symptoms a:hover{ color:var(--blue-deep); }
.symptoms a:hover .sy-go{ color:var(--blue); transform:translateX(4px); }

/* --- How these answers are written ----------------------------------------- */

.pr-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink);
}
.pr-list li{ padding:1.6rem 1.6rem 1.7rem; border-right:1px solid var(--bisque-deep); }
.pr-list li:first-child{ padding-left:0; }
.pr-list li:last-child{ border-right:0; padding-right:0; }
.pr-no{
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:.85rem;
  width:2.3rem; height:2.3rem; border-radius:50%;
  background:var(--char); color:var(--gold-lite);
  font-family:var(--font-label); font-weight:600; font-size:.82rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.pr-h{ font-size:1.26rem; line-height:1.24; margin:0 0 .5rem; }
.pr-p{ margin:0; color:var(--bisque-ink); font-size:.99rem; line-height:1.56; }

/* --- The main guides ----------------------------------------------------- */

.gd-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); padding-top:1.9rem; border-top:2px solid var(--ink);
}
.gd-tag{ color:var(--gold-ink); margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.gd-lead-title a{ color:var(--ink); }
.gd-lead-title a:hover{ color:var(--blue-deep); }
.gd-lead-ex{ margin:1.05rem 0 0; color:var(--ink-2); font-size:1.1rem; line-height:1.62; max-width:54ch; }
.gd-go{
  display:inline-block; margin-top:1.4rem; padding:.85rem 1.35rem;
  background:var(--blue); color:#fff; font-size:.78rem; font-weight:600; border-radius:999px;
  transition:background var(--t) var(--ease);
}
.gd-go:hover{ background:var(--blue-deep); color:#fff; }
.gd-side{ border-left:1px solid var(--bisque-deep); padding-left:clamp(22px,3vw,48px); min-width:0; }
.gd-med{ padding:0 0 1.25rem; margin:0 0 1.25rem; border-bottom:1px solid var(--bisque-deep); }
.gd-med h3{ font-size:1.28rem; line-height:1.26; margin:0; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--blue-deep); }
.gd-med p{ margin:.45rem 0 0; color:var(--bisque-ink); font-size:.98rem; line-height:1.52; }
.gd-med:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
.gd-list{
  list-style:none; margin:clamp(28px,3.4vw,48px) 0 0; padding:0; counter-reset:gd;
  columns:3 300px; column-gap:clamp(28px,3.4vw,60px); border-top:1px solid var(--bisque-deep);
}
.gd-list li{ counter-increment:gd; break-inside:avoid; border-bottom:1px solid var(--bisque-deep); }
.gd-list a{
  display:grid; grid-template-columns:2.3rem minmax(0,1fr); gap:.5rem;
  padding:.72rem 0; color:var(--ink-2); font-size:1.02rem; line-height:1.4;
}
.gd-list a::before{
  content:counter(gd, decimal-leading-zero);
  font-family:var(--font-label); font-weight:500; font-size:.86rem; line-height:1.65;
  color:var(--gold-ink); font-variant-numeric:tabular-nums;
}
.gd-list a:hover{ color:var(--blue-deep); }

/* --- The warning label and the official sources ---------------------------- */

.src-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px); align-items:start;
}
.warning{ border:2px solid var(--ink); border-radius:8px; overflow:hidden; background:var(--white); }
.warning-word{
  display:flex; align-items:center; justify-content:center; gap:.7rem; margin:0;
  padding:.6rem 1rem; background:var(--warn); color:var(--ink); border-bottom:2px solid var(--ink);
  font-family:var(--font-panel); font-weight:700; font-size:1.5rem; line-height:1; letter-spacing:.12em;
}
.warning-word svg{ width:30px; height:28px; flex:none; }
.wt-tri{ fill:var(--ink); }
.wt-mark{ fill:var(--warn); }
.warning-copy{ padding:clamp(18px,2.6vw,30px); }
.warning-h{ font-size:1.55rem; line-height:1.2; margin:0 0 .6rem; text-wrap:balance; }
.warning-p{ margin:0; color:var(--ink-2); font-size:1.04rem; line-height:1.64; }

.src-h{ margin:0; padding-bottom:.8rem; border-bottom:2px solid var(--ink); font-size:1.4rem; line-height:1.2; }
.src-list{ list-style:none; margin:0; padding:0; }
.src-list li{ border-bottom:1px solid var(--rule); }
.src-list a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem; align-items:center;
  padding:.8rem 0; color:var(--ink);
}
.src-name{ font-weight:600; font-size:1.06rem; line-height:1.3; }
.src-org{ grid-column:1; color:var(--ink-3); text-transform:none; letter-spacing:0; font-size:.78rem; }
.src-go{
  grid-column:2; grid-row:1 / span 2; color:var(--ink-4); font-size:1.15rem;
  transition:transform var(--t) var(--ease), color var(--t) var(--ease);
}
.src-list a:hover .src-name{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px; }
.src-list a:hover .src-go{ color:var(--blue); transform:translate(2px,-2px); }
.src-note{ margin:.9rem 0 0; font-size:.9rem; line-height:1.5; color:var(--ink-3); }

/* --- Latest: the engine's own band, restyled ---------------------------- */

.latest .section{ padding:0; }
.latest .section-head{ margin-bottom:clamp(26px,3vw,40px); }
.latest .section-head::before{
  content:"New"; display:block; margin:0 0 .75rem; padding-left:calc(26px + .6rem);
  background:linear-gradient(var(--gold),var(--gold)) no-repeat left center / 26px 3px;
  color:var(--blue); font-family:var(--font-label); font-weight:500; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.35;
}
.latest .section-head h2{ font-size:clamp(1.95rem,3.4vw,2.85rem); line-height:1.1; letter-spacing:-.02em; }

/* ==========================================================================
   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-radius:var(--radius-lg);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-card:hover{ border-color:var(--rule-strong); box-shadow:0 14px 30px -24px rgba(22,25,29,.4); }
/* 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.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--gold-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(--blue-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:.72rem; }

.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-radius:var(--radius-lg);
  color:var(--ink); transition:border-color var(--t) var(--ease);
}
.card:hover, .pillar-card:hover{ border-color:var(--blue); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--gold-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(--blue); }
.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:.07em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:999px; cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn--accent{ background:var(--blue); color:#fff; }
.btn--accent:hover{ background:var(--blue-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.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:.45rem .8rem; border-radius:999px;
  border:1px solid var(--rule); background:var(--white); color:var(--ink-2);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{ color:var(--blue); border-color:var(--blue); }

.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(--ink); border-radius:999px; color:var(--ink); }
.pagination a:hover{ border-color:var(--blue); color:var(--blue); }
.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); }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  margin-bottom:1.6rem; color:var(--ink-3); font-size:.72rem;
}
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb [aria-hidden="true"]{ color:var(--gold); }
.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; 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(--ink);
}
.results-head h1{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0; }
.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(--blue-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:.72rem; }

.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.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(--blue-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(--ink);
}
.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; 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(--gold); }
.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:236px 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) ------------------------------------------------- */

.toc{ position:sticky; top:108px; }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--ink); border-bottom:2px solid var(--ink); }
.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 a{
  display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem;
  padding:.62rem 0; font-size:.95rem; line-height:1.4; color:var(--ink-2);
}
.toc a::before{
  content:counter(toc); font-family:var(--font-label); font-weight:500; font-size:.84rem; line-height:1.6;
  color:var(--blue); font-variant-numeric:tabular-nums;
}
.toc a:hover{ color:var(--blue-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;
}
.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(--blue); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--blue) 40%, transparent);
}
.article-body a:hover{ color:var(--blue-deep); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }

/* Lists: a small gold dot for a point, a numbered 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.45rem; margin-bottom:.5rem; }
.article-body ul > li::before{
  content:""; position:absolute; left:.15rem; top:.6em; width:.46em; height:.46em;
  background:var(--gold); border-radius:50%;
}
.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(--char); color:#FFFFFF;
  font-family:var(--font-label); font-weight:600; font-size:.74rem; line-height:1;
  font-variant-numeric:tabular-nums;
}

/* Worth knowing */
.article-body .pro-tip{
  margin:1.7rem 0; padding:1rem 1.2rem 1.05rem;
  background:var(--gold-tint); border-left:4px solid var(--gold); 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(--gold-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(--blue-tint); border:1px solid var(--blue-soft); border-radius:var(--radius);
}
.article-body .related-inline-link::before{ content:"See also"; font-size:.72rem; 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(--gold); color:var(--ink);
  font-family:var(--font-display); 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(--bisque); border:1px solid var(--rule); color:var(--ink);
}
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--bisque); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body pre code{ padding:0; border:0; background:transparent; }

/* Tables: a charcoal 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(--char); color:#FFFFFF; font-size:.72rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--bisque) 45%, #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(--bisque); border:1px solid var(--rule); border-left:4px solid var(--blue); 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(--ink); }
.faq h2{ font-size:1.8rem; margin:0 0 .8rem; }
.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:.62rem;
  font-family:var(--font-label); font-weight:500; font-size:1.55rem; line-height:1; color:var(--blue);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--blue-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(--ink); }
.pillar-link{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink);
  transition:background var(--t) var(--ease);
}
.pillar-link:hover{ background:var(--bisque); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--gold-ink); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.22rem; line-height:1.3; }
.pl-arrow{ margin-left:auto; color:var(--blue); 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; 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; }

.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(--ink); }
.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(--ink);
}
.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(--gold);
  font-family:var(--font-display); 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(--bisque); 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; }
.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 — charcoal, a gold rule on top
   ========================================================================== */

.site-footer{
  background:var(--char); color:var(--foot-ink);
  padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px);
  border-top:4px solid var(--gold);
}
.site-footer :focus-visible{ outline-color:var(--gold-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:.6rem; color:#FFFFFF; }
.foot-brand:hover{ color:#FFFFFF; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); 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(--gold-lite); border-bottom:1px solid var(--foot-rule); font-size:.72rem; letter-spacing:.12em; }
.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-label); font-size:.78rem; color:var(--gold-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(--gold); 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; }
  .vfd-code{ animation:none; }
}

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

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

@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-side{ border-left:0; padding-left:0; border-top:1px solid var(--bisque-deep); padding-top:1.5rem; }
  .src-grid{ grid-template-columns: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{ background:var(--white); }
  .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(--white); 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); }
}

@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.8rem 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); }
  .keys{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .code-apps li{ grid-template-columns:minmax(0,1fr); }
  .panel{ grid-template-columns:minmax(0,1fr); }
  .vfd{ flex-direction:row; align-items:baseline; justify-content:space-between; }

  /* 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:.7rem;
    letter-spacing:.07em; 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:.62rem; letter-spacing:.05em; }
}

@media (max-width:600px){
  .dial{ width:32px; height:32px; }
  .lk-word{ font-size:1.55rem; }
  .lk-stack{ font-size:1.06rem; }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .pr-list li, .pr-list li:nth-child(2n+1){ padding:1.3rem 0; border-right:0; }
  .finder-row{ flex-wrap:wrap; border-radius:22px; }
  .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:.64rem; }
  .tp-facts strong{ margin:0; }
  .door{ padding:40px 14px 20px 40px; }
  .door-handle{ left:13px; width:11px; }
  .manual{ padding-inline:.9rem; }
  .manual-kicker{ letter-spacing:.08em; }
  .chart{ padding-inline:.8rem; }
  .chart-table thead th, .chart-table tbody th, .chart-table td{ padding-inline:.45rem; }
  .chart-table thead th{ font-size:.74rem; }
  .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; }
}