/* 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): Source Serif 4 700 for headings, Inter 400 and 600 for text. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/source-serif-4-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-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; }

/* 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)); }

/* ClimaNook palette (Owner 2026-11-02): indigo #3b3896 from the logo; wordmark "Nook" #b5541f
   (Owner 2026-11-03, 4.94:1 on white; was #c4612a, 4.13:1); orange family from the logo and the
   wordmark; burnt orange buy button dark enough for white text (#ad4f1c on white: 5.37:1, hover
   #8a3c14: 7.67:1), rank circles in indigo so they never look like the button. Unrelated to the hub. */
:root {
  --bg: #fbfaf7; --card: #ffffff; --soft: #f3f0ea; --line: #e5e0d8; --head-bg: #ffffff;
  --ink: #1c1b22; --muted: #55525e;
  --primary: #3b3896; --primary-dark: #2b2970; --primary-soft: #ecebf7;
  --link: #3b3896; --link-hover: #2b2970;
  --brand-1: #3b3896; --brand-2: #b5541f;
  --rank-bg: #3b3896; --rank-ink: #ffffff;
  --buy-bg: #ad4f1c; --buy-bg-hover: #8a3c14; --buy-ink: #ffffff;
  --badge-bg: #fdecdf; --badge-ink: #8a3c14;
  --good: #166534; --warn: #8a3c14;
  --focus: #c4612a;

  /* Design tokens (Owner 2026-11-03, point 6): ClimaNook keeps the values approved in the mockup. */
  --font-head: "Source Serif 4", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: 17px; --fs-h1: 2.1rem; --fs-h2: 1.5rem; --fs-h3: 1.2rem; --fs-lede: 1.1rem; --fs-wordmark: 1.4rem; --fs-dark-h1: 1.6rem;
  --fs-sm: 15px; --fs-xs: 14px; --fs-2xs: 13px; --fs-3xs: 12px;
  --leading: 1.65; --leading-head: 1.25;
  --space: 1;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 14px; --r-pill: 999px;
  --bw: 1px; --bw-accent: 4px; --bw-current: 2px; --bw-focus: 3px;
  --page-max: 940px; --narrow-max: 760px;
}