/* Satellite structure (all sites). Colours come from the site's theme.css (variables only).
   Light only, no dark mode (CLAUDE.md). Fonts are served by the site itself (latin subset, only
   the weights used); each theme.css declares its own @font-face rules, so a site never lists
   another site's fonts (phase 8). */

/* Per-site design tokens (Owner 2026-11-03, point 6; the course's lesson 11.1): every site sets
   its own corner radius, border widths, spacing rhythm, type scale, airiness and font pair in its
   theme.css, so the next site only changes these variables to look unrelated. This file holds
   structure only and reads every visual value from those variables. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--leading) var(--font-body); }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
b, strong, th, summary { font-weight: 600; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: var(--leading-head); color: var(--ink); }
h1 { font-size: var(--fs-h1); margin: 0 0 calc(8px * var(--space)); }
h2 { font-size: var(--fs-h2); margin: 0 0 calc(12px * var(--space)); }
h3 { font-size: var(--fs-h3); margin: 0; }
p { margin: 0 0 calc(14px * var(--space)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--card); color: var(--ink); padding: calc(6px * var(--space)) calc(10px * var(--space)); border-radius: var(--r-sm); }
.skip:focus { left: 8px; z-index: 10; }

/* Header: brand (logo 32 px + wordmark), flat menu; on a phone the menu scrolls sideways. */
.site-head { background: var(--head-bg); border-bottom: var(--bw) solid var(--line); }
.site-head .in { max-width: var(--page-max); margin: 0 auto; padding: calc(12px * var(--space)) calc(20px * var(--space)); display: flex; align-items: center; gap: calc(10px * var(--space)) calc(24px * var(--space)); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: calc(10px * var(--space)); text-decoration: none; }
.brand .logo { width: 32px; height: 32px; display: block; flex: none; }
.wordmark { font: 700 var(--fs-wordmark)/1 var(--font-head); letter-spacing: 0.005em; }
.wordmark .w1 { color: var(--brand-1); }
.wordmark .w2 { color: var(--brand-2); }
.menu { display: flex; gap: calc(4px * var(--space)); flex-wrap: nowrap; overflow-x: auto; margin-left: auto; max-width: 100%; }
.menu a { padding: calc(6px * var(--space)) calc(10px * var(--space)); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font: 400 var(--fs-sm)/1.4 var(--font-body); white-space: nowrap; }
.menu a:hover { background: var(--primary-soft); color: var(--primary-dark); }
.menu a[aria-current="page"] { color: var(--primary); box-shadow: inset 0 calc(-1 * var(--bw-current)) 0 var(--primary); }
.disclosure { background: var(--soft); color: var(--muted); font: 400 var(--fs-2xs)/1.5 var(--font-body); text-align: center; padding: calc(5px * var(--space)) calc(16px * var(--space)); margin: 0; }
.disclosure a { color: var(--muted); }
.disclosure a:hover { color: var(--ink); }
@media (max-width: 760px) { .menu { margin-left: 0; width: 100%; } }

/* Page: one content column of about 900 px (Owner 2026-11-02, review layout). */
.page { max-width: var(--page-max); margin: 0 auto; padding: calc(28px * var(--space)) calc(20px * var(--space)) calc(48px * var(--space)); }
.narrow { max-width: var(--narrow-max); }
.block { margin-top: calc(36px * var(--space)); }
.lede { font-size: var(--fs-lede); color: var(--muted); }
.meta, .note { color: var(--muted); font-size: var(--fs-xs); }
.note { margin: calc(8px * var(--space)) 0 0; }
.crumbs { font-size: var(--fs-xs); color: var(--muted); margin-bottom: calc(10px * var(--space)); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.toc { background: var(--soft); border-radius: var(--r-lg); padding: calc(14px * var(--space)) calc(18px * var(--space)); font-size: var(--fs-sm); margin: calc(18px * var(--space)) 0; }
.toc ol { margin: calc(6px * var(--space)) 0 0; padding-left: calc(20px * var(--space)); }
.prose h2 { margin-top: calc(28px * var(--space)); }
/* Quick jump at the top of the pillar home: closed it is one line, opened it lists every section. */
.jump { background: var(--soft); border-radius: var(--r-lg); padding: 0 calc(16px * var(--space)); font-size: var(--fs-sm); margin: calc(14px * var(--space)) 0; }
.jump summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.jump summary::after { content: "+"; font-size: 1.4em; line-height: 1; padding-left: calc(12px * var(--space)); }
.jump[open] summary::after { content: "\2212"; }
.jump ol { margin: 0; padding: 0 0 calc(12px * var(--space)) calc(20px * var(--space)); }
.jump li { margin: calc(4px * var(--space)) 0; }

/* Quick picks: a table on a computer, stacked rows on a phone. */
table.quick { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.quick th, .quick td { text-align: left; padding: calc(10px * var(--space)) calc(12px * var(--space)); border-bottom: var(--bw) solid var(--line); vertical-align: top; }
.quick th { background: var(--soft); color: var(--ink); }
.quick tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .quick thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .quick, .quick tbody, .quick tr, .quick td { display: block; width: 100%; }
  .quick tr { border-bottom: var(--bw) solid var(--line); padding: calc(8px * var(--space)) calc(12px * var(--space)); }
  .quick tbody tr:last-child { border-bottom: 0; }
  .quick td { border: 0; padding: calc(2px * var(--space)) 0; }
  .quick td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: var(--fs-2xs); }
  .quick td:not([data-l]) { color: var(--ink); font-weight: 600; }
}

/* Compare at a glance: scrolls sideways inside its own frame; the page never does. */
.compare-wrap { max-width: 100%; overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.compare-wrap:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
table.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-sm); }
.compare th, .compare td { text-align: left; padding: calc(10px * var(--space)) calc(12px * var(--space)); border-bottom: var(--bw) solid var(--line); white-space: nowrap; vertical-align: middle; }
.compare thead th { background: var(--soft); color: var(--ink); font-size: var(--fs-xs); }
.compare tbody th { white-space: normal; min-width: 150px; }
.compare tbody th a { color: var(--ink); text-decoration: none; }
.compare tbody th a:hover { color: var(--primary); text-decoration: underline; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare td.nl { color: var(--muted); }
.th-ic { display: inline-flex; align-items: center; gap: calc(6px * var(--space)); }
.th-ic .ic { color: var(--primary); }

/* Product cards in the review layout: Winner band on #1, award badge, score ring, two-column spec grid. */
.picks { display: grid; gap: calc(20px * var(--space)); }
.pick { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-xl); overflow: hidden; scroll-margin-top: calc(12px * var(--space)); }
.pick.winner { border-color: var(--primary); box-shadow: 0 0 0 var(--bw) var(--primary); }
.winner-band { background: var(--primary); color: #ffffff; font: 600 var(--fs-2xs)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; padding: calc(8px * var(--space)) calc(20px * var(--space)); }
.pick-in { padding: calc(18px * var(--space)) calc(20px * var(--space)) calc(20px * var(--space)); display: grid; gap: calc(14px * var(--space)); justify-items: start; }
.pick-head { display: flex; align-items: center; gap: calc(14px * var(--space)); width: 100%; }
.pick-title { display: grid; gap: calc(6px * var(--space)); min-width: 0; flex: 1; justify-items: start; }
.rank { width: 44px; height: 44px; border-radius: 50%; background: var(--rank-bg); color: var(--rank-ink); display: flex; align-items: center; justify-content: center; font: 700 1.15rem/1 var(--font-head); flex: none; }
.badge { display: inline-block; background: var(--badge-bg); color: var(--badge-ink); border-radius: var(--r-pill); padding: calc(1px * var(--space)) calc(10px * var(--space)); font: 600 var(--fs-2xs)/1.6 var(--font-body); }
.pick-sum { margin: 0; }
.ring { position: relative; width: 64px; flex: none; display: grid; justify-items: center; gap: calc(2px * var(--space)); }
.ring svg { display: block; width: 64px; height: 64px; }
.ring-bg { stroke: var(--soft); }
.ring-fg { stroke: var(--primary); }
.ring-num { position: absolute; top: 0; left: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font: 700 1.05rem/1 var(--font-head); color: var(--ink); }
.ring-label { font-size: var(--fs-3xs); color: var(--muted); white-space: nowrap; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8px * var(--space)) calc(16px * var(--space)); margin: 0; width: 100%; }
.sg { background: var(--soft); border-radius: var(--r-md); padding: calc(8px * var(--space)) calc(10px * var(--space)); min-width: 0; }
.sg dt { display: flex; align-items: center; gap: calc(6px * var(--space)); font-size: var(--fs-2xs); color: var(--muted); }
.sg dt .ic { color: var(--primary); flex: none; }
.sg dd { margin: calc(2px * var(--space)) 0 0; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.sg.nl dd { font-weight: 400; color: var(--muted); }
.specs { display: flex; gap: calc(6px * var(--space)); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.specs li { display: inline-flex; align-items: center; gap: calc(6px * var(--space)); background: var(--soft); border-radius: var(--r-sm); padding: calc(3px * var(--space)) calc(9px * var(--space)); font-size: var(--fs-xs); color: var(--ink); }
.specs .ic { color: var(--primary); flex: none; }
.ic { width: 16px; height: 16px; display: block; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6px * var(--space)) calc(20px * var(--space)); font-size: var(--fs-sm); width: 100%; }
.pc ul { margin: 0; padding-left: calc(18px * var(--space)); }
.pc b { display: block; font-size: var(--fs-xs); }
.pc .pro b { color: var(--good); }
.pc .con b { color: var(--warn); }
.score-table { margin: calc(4px * var(--space)) 0 calc(8px * var(--space)); }
@media (max-width: 640px) {
  .pc { grid-template-columns: 1fr; }
  .pick-in { padding: calc(16px * var(--space)); }
  .winner-band { padding: calc(8px * var(--space)) calc(16px * var(--space)); }
  .sg dd { font-size: var(--fs-xs); }
}

/* Buy button: the accent colour, never the rank colour (Owner 2026-11-02, point 3). */
.buy { display: inline-block; background: var(--buy-bg); color: var(--buy-ink); text-decoration: none; border-radius: var(--r-md); padding: calc(10px * var(--space)) calc(18px * var(--space)); font: 600 var(--fs-sm)/1.3 var(--font-body); }
.buy:hover { background: var(--buy-bg-hover); color: var(--buy-ink); }
.buy-sm { padding: calc(6px * var(--space)) calc(12px * var(--space)); font-size: var(--fs-xs); white-space: nowrap; }
.buy:focus-visible, .menu a:focus-visible, .brand:focus-visible, a:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }

/* Guide grid, FAQ, related */
.cards { display: grid; gap: calc(14px * var(--space)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: calc(14px * var(--space)) calc(16px * var(--space)); display: grid; gap: calc(4px * var(--space)); align-content: start; }
.card a { font: 700 1.05rem/1.35 var(--font-head); text-decoration: none; color: var(--ink); }
.card a:hover { color: var(--primary); }
.card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.group-title { font: 600 var(--fs-2xs)/1.4 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 calc(10px * var(--space)); }
.faq details { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: calc(10px * var(--space)) calc(16px * var(--space)); margin-bottom: calc(8px * var(--space)); }
.faq summary { cursor: pointer; }
.faq details p { margin: calc(8px * var(--space)) 0 0; }
.related { border-left: var(--bw-accent) solid var(--primary); background: var(--primary-soft); padding: calc(12px * var(--space)) calc(16px * var(--space)); border-radius: 0 var(--r-lg) var(--r-lg) 0; margin-top: calc(28px * var(--space)); }

/* Footer */
.site-foot { border-top: var(--bw) solid var(--line); background: var(--card); }
.site-foot .in { max-width: var(--page-max); margin: 0 auto; padding: calc(20px * var(--space)); display: flex; gap: calc(10px * var(--space)) calc(22px * var(--space)); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--ink); }
/* Phone (Owner 2026-11-05: the footer links looked like half a screen). The copyright line and the e-mail take
   the whole width, the four page links sit in two even columns, every link is at least 44 px tall to tap. */
@media (max-width: 640px) {
  .site-foot .in { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(16px * var(--space)); }
  .site-foot .in > span, .site-foot .in > a:last-child { grid-column: 1 / -1; }
  .site-foot .in > span { display: flex; align-items: center; min-height: 2.75rem; }
  .site-foot .in > a { display: flex; align-items: center; min-height: 2.75rem; overflow-wrap: anywhere; }
}

/* Dark page (live off): 503 for every visitor. */
.dark-body { min-height: 100vh; display: flex; }
.dark-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: calc(40px * var(--space)) calc(20px * var(--space)); }
.dark-box { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-2xl); padding: calc(32px * var(--space)) calc(28px * var(--space)); max-width: 460px; width: 100%; text-align: center; display: grid; gap: calc(12px * var(--space)); justify-items: center; }
.dark-box h1 { font-size: var(--fs-dark-h1); margin: calc(6px * var(--space)) 0 0; }
.dark-box p { margin: 0; color: var(--muted); }

/* Phase 6 article blocks */
.pc .fit b { color: var(--good); }
.pc .skip b { color: var(--warn); }
.verdict { font-size: var(--fs-sm); margin: calc(8px * var(--space)) 0 0; }
.short-answer { background: var(--primary-soft); border-radius: var(--r-lg); padding: calc(12px * var(--space)) calc(16px * var(--space)); margin: calc(14px * var(--space)) 0; }
.short-answer p { margin: calc(4px * var(--space)) 0 0; }
.tbl-wrap { overflow-x: auto; margin: calc(12px * var(--space)) 0; }
.sources ul { font-size: var(--fs-sm); padding-left: calc(18px * var(--space)); }

/* Phones, tablets and phones turned sideways (Owner 2026-11-06, the teacher's review; checked by
   scripts/ui-shots.sh --mobile-sizes at 320 to 844 px): reading text at 16 px or more, and every control
   that is not a link inside a sentence at least 44 x 44 px. Desktop layout is unchanged. */
@media (max-width: 900px) {
  .brand { min-height: 44px; }
  .menu a { display: inline-flex; align-items: center; min-height: 44px; }
  .card a { display: flex; align-items: center; min-height: 44px; }
  .site-foot .in > a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 44px; }
  .compare tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
  .buy, .buy-sm { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .jump summary, .faq summary, .toc-m summary { min-height: 44px; }
  .toc li a, .jump li a { display: flex; align-items: center; min-height: 44px; }
  .compare th, .compare td, .compare thead th, table.quick, .quick th, .quick td, .sg dt, .sg dd, .pc, .verdict,
  .card p, .jump, .toc, .faq summary, .pick-sum, .short-answer, .related, .lede { font-size: 16px; }
}

/* ChillPane (Owner approved the phase 8 mockup 2026-11-06, docs/mockup-pha-8/): palette A "Glacier"
   (teal #0b5d6b 7.52:1 on white, sky #1f6fb2 5.28:1), Plus Jakarta Sans 700 + Source Sans 3 400/600,
   square corners, 2 px borders, 16 px body. Layout "pane" (src/render/pane.tsx): two-row header, hero
   band, side column, spec-sheet rows, footer in columns. Unrelated to ClimaNook and to the hub. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f6fafb; --card: #ffffff; --soft: #e4f2f5; --zebra: #f0f7f9; --line: #cfe0e4; --head-bg: #0b5d6b;
  --ink: #10232a; --muted: #46595f;
  --primary: #0b5d6b; --primary-dark: #08434d; --primary-soft: #e4f2f5;
  --accent: #1f6fb2; --accent-dark: #17558a;
  --link: #1f6fb2; --link-hover: #17558a;
  --brand-1: #ffffff; --brand-2: #ffffff;
  --rank-bg: #ffffff; --rank-ink: #1f6fb2;
  --buy-bg: #0b5d6b; --buy-bg-hover: #08434d; --buy-ink: #ffffff;
  --badge-bg: #e4f2f5; --badge-ink: #08434d;
  --good: #08434d; --warn: #08434d;
  --focus: #1f6fb2;
  --on-dark: #ffffff; --on-dark-soft: #a9dde7; --foot-bg: #0a3640;

  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: 16px; --fs-h1: 2.15rem; --fs-h2: 1.45rem; --fs-h3: 1.15rem; --fs-lede: 1.1rem; --fs-wordmark: 1.35rem; --fs-dark-h1: 1.6rem;
  --fs-sm: 15px; --fs-xs: 14px; --fs-2xs: 13px; --fs-3xs: 12px;
  --leading: 1.6; --leading-head: 1.25;
  --space: 1;
  --r-sm: 3px; --r-md: 3px; --r-lg: 3px; --r-xl: 3px; --r-2xl: 4px; --r-pill: 3px;
  --bw: 2px; --bw-accent: 6px; --bw-current: 3px; --bw-focus: 3px;
  --page-max: 1120px; --narrow-max: 760px; --side: 300px;
}

/* Frame */
.pane .wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 16px; }
.pane h1 { letter-spacing: -0.01em; margin: 0 0 12px; }
.pane h2 { margin: 40px 0 14px; padding-top: 14px; border-top: var(--bw) solid var(--line); }
.pane .block { margin-top: 0; }
.pane .prose h2 { margin-top: 32px; }
.pane .lede { color: var(--ink); max-width: 720px; }
.pane .meta { margin: 0; }
.pane .crumbs a { color: var(--accent); }
.pane .crumbs a:hover { color: var(--accent-dark); }

/* Header: brand bar, then menu bar (ClimaNook: one white row). */
.topbar { background: var(--primary); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.pane .brand, .pane-dark .brand { color: var(--on-dark); }
.pane .brand .logo { width: 34px; height: 34px; }
.pane .wordmark, .pane-dark .wordmark { color: var(--on-dark); font-size: var(--fs-wordmark); }
.bar-note { color: var(--on-dark-soft); font-size: var(--fs-xs); }
.navbar { background: var(--soft); border-bottom: var(--bw) solid var(--line); }
.nav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav-links a { flex: none; padding: 10px 12px; color: var(--primary-dark); font: 600 var(--fs-sm)/1.4 var(--font-body); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-links a:hover { background: var(--primary); color: var(--on-dark); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--primary); }
.commission { background: var(--card); border-bottom: 1px solid var(--line); }
.commission p { margin: 0 auto; padding-top: 8px; padding-bottom: 8px; font-size: var(--fs-xs); color: var(--muted); }

/* Hero band */
.hero { background: var(--card); border-bottom: var(--bw) solid var(--line); padding: 28px 0 24px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; max-width: 620px; }
.stat { border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--bg); }
.stat b { display: block; font: 700 1.3rem/1.3 var(--font-head); color: var(--primary); }
.stat span { font-size: var(--fs-xs); color: var(--muted); }
.answer { margin-top: 18px; border-left: var(--bw-accent) solid var(--accent); background: var(--soft); padding: 12px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; max-width: 720px; }
.answer b { color: var(--primary-dark); }

/* Shell: content plus a sticky side column on wide screens (ClimaNook: one centred column). */
.shell { display: block; padding-top: 8px; padding-bottom: 40px; }
.side { display: none; }
@media (min-width: 1000px) {
  .shell { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 40px; }
  .shell.solo { display: block; }
  .side { display: block; }
  .side-in { position: sticky; top: 16px; }
  .toc-m { display: none; }
}
.pane-main { min-width: 0; }
.side-box { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 14px; margin-top: 24px; }
.side-title { font: 700 1rem/1.3 var(--font-head); margin: 0 0 8px; }
.side-box ol, .side-box ul { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.side-box li { margin: 4px 0; }
.toc-m { margin-top: 20px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; }
.toc-m summary { cursor: pointer; min-height: 2rem; display: flex; align-items: center; }
.toc-m ol { margin: 8px 0 0; padding-left: 20px; }

/* Compare table: the model column stays in view while the rest scrolls on a phone. */
.cmp-wrap { max-width: 100%; overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.cmp-wrap:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: var(--fs-sm); }
.cmp th, .cmp td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cmp thead th { background: var(--primary); color: var(--on-dark); }
.cmp tbody th { position: sticky; left: 0; background: var(--card); border-right: 1px solid var(--line); min-width: 170px; }
.cmp tbody th a { color: var(--ink); }
.cmp tbody th a:hover { color: var(--accent-dark); }
.cmp tbody tr:nth-child(even) td { background: var(--zebra); }
.cmp td.nl { color: var(--muted); }
.cmp .buy-sm { white-space: nowrap; }

/* Product rows: spec sheet (ClimaNook: review cards with rank circle and ring). */
.sheets { display: grid; gap: 22px; }
.sheet { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-sm); scroll-margin-top: 12px; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 16px; border-bottom: var(--bw) solid var(--line); }
.rank-tag { color: var(--accent); border: var(--bw) solid var(--accent); border-radius: var(--r-sm); padding: 1px 8px; font: 700 var(--fs-xs)/1.5 var(--font-head); }
.award { font-size: var(--fs-xs); font-weight: 600; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.sheet-body { display: grid; gap: 16px; padding: 14px 16px 16px; }
@media (min-width: 760px) { .sheet-body { grid-template-columns: 250px minmax(0, 1fr); } }
.sheet-specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--fs-sm); align-content: start; }
.sheet-specs dt { color: var(--muted); }
.sheet-specs dd { margin: 0; font-weight: 600; }
.sheet-specs dd.nl { font-weight: 400; color: var(--muted); }
.sheet-sum { margin: 0 0 10px; }
.sheet-list-title { margin: 0 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--primary-dark); }
.sheet-list ul { margin: 0 0 10px; padding-left: 20px; }
.bottom-line { margin: 0 0 12px; }
.pane .buy { border-radius: var(--r-sm); }

/* Tiles of guides and Learn articles */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 0; margin: 0; list-style: none; }
.tiles a { display: block; height: 100%; background: var(--card); border: var(--bw) solid var(--line); border-left: var(--bw-accent) solid var(--primary); border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); text-decoration: none; }
.tiles a:hover { border-color: var(--primary); color: var(--ink); }
.tiles b { display: block; color: var(--primary-dark); }
.tiles span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.pane .group-label { font: 600 var(--fs-sm)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 22px 0 8px; padding: 0; border: 0; }

/* FAQ, related, callouts, About facts */
.pane .faq details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; margin: 0; }
.pane .related { border-left-color: var(--accent); background: var(--soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.key { border: var(--bw) solid var(--accent); border-radius: var(--r-sm); background: var(--card); padding: 12px 14px; margin: 18px 0; }
.key b { color: var(--accent-dark); }
.facts { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 14px; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.pane .quick th { background: var(--primary); color: var(--on-dark); }

/* Footer: three link columns on a dark band (ClimaNook: one row of links). */
.foot { background: var(--foot-bg); color: var(--on-dark); padding: 28px 0 18px; font-size: var(--fs-sm); }
.foot-cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-title { font: 700 0.95rem/1.3 var(--font-head); color: var(--on-dark); margin: 0 0 8px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0; }
.foot a { color: var(--on-dark-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.2rem; overflow-wrap: anywhere; }
.foot a:hover { color: var(--on-dark); text-decoration: underline; }
.foot a:focus-visible { outline-color: var(--on-dark); }
.foot-end { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid #2a5a64; color: var(--on-dark-soft); }

/* Dark page (live off): 503 for every visitor. */
.pane-dark { margin: 0; min-height: 100vh; display: flex; background: var(--primary); }
.pane-dark-in { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--on-dark); }
.pane-dark .brand .logo { width: 56px; height: 56px; }
.pane-dark h1 { color: var(--on-dark); font-size: var(--fs-dark-h1); margin: 18px 0 6px; }
.pane-dark p { color: var(--on-dark-soft); margin: 0; }

/* Phones, tablets and phones turned sideways (Owner 2026-11-06): 16 px reading text, 44 px controls. */
@media (max-width: 900px) {
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .foot a { min-height: 44px; min-width: 44px; }
  .toc-m summary { min-height: 44px; }
  .cmp tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
  .tiles a { min-height: 44px; }
  .toc-m li a, .side-box li a { display: flex; align-items: center; min-height: 44px; }
  .cmp, .cmp th, .cmp td, .sheet-specs, .sheet-specs dt, .sheet-specs dd, .sheet-list-title, .facts, .key, .answer, .toc-m { font-size: 16px; }
}