/* ==========================================================================
   HEATING QUESTIONS — "THE WARM HOUSE"
   Site-locked to heatingquestions.co.uk. Not a fleet template.

   THE DIRECTION
   Plain answers on heating a British home, in the idiom of the house itself:
   the column radiator, the front of a combi boiler with its pressure gauge,
   the boiler's LCD, the EPC bands from every house listing, the numbers on a
   radiator valve, the yellow gas-emergency sticker, and a row of terraced
   houses with their chimney pots.

     Brick        terracotta red: the rule before a label, the radiator valve,
                  the brand mark, links on hover
     Slate        the roofs: the top line, the head of every table, the
                  footer, the safety band
     Cream        the painted walls of the house: page and band backgrounds
     Flame        the warm glow in a window and the pilot light — details only
     Frost        a cold winter sky, kept to the title page

   Four voices of type:
     Fraunces               headlines — warm, homely
     Inter                  reading copy and the interface
     Barlow Semi Condensed  labels in capitals, like a meter plate
     IBM Plex Mono          codes and counts
   ========================================================================== */
:root{
  --brick:  #A5432E;
  --slate:  #26323A;
  --flame:  #E2702A;
  --frost:  #8DB4C9;
  --cream:  #F7F1E6;
  --ink:    #1E2529;
  --rule:   #E3D8C8;

  --white:       #FFFFFF;
  --paper:       #FFFCF7;
  --brick-deep:  color-mix(in srgb, var(--brick) 78%, #000000);
  --brick-tint:  color-mix(in srgb, var(--brick) 8%, #FFFFFF);
  --brick-soft:  color-mix(in srgb, var(--brick) 18%, #FFFFFF);
  --slate-2:     color-mix(in srgb, var(--slate) 82%, #5B6B75);
  --slate-tint:  color-mix(in srgb, var(--slate) 6%, #FFFFFF);
  --flame-tint:  color-mix(in srgb, var(--flame) 12%, #FFFFFF);
  --flame-ink:   color-mix(in srgb, var(--flame) 62%, #3A1A05);
  --frost-tint:  color-mix(in srgb, var(--frost) 22%, #FFFFFF);
  --cream-deep:  color-mix(in srgb, var(--cream) 76%, #B7A58A);
  --cream-ink:   color-mix(in srgb, var(--cream) 18%, #45392A);
  --ink-2:       color-mix(in srgb, var(--ink) 86%, #FFFFFF);
  --ink-3:       color-mix(in srgb, var(--ink) 68%, #FFFFFF);
  --ink-4:       color-mix(in srgb, var(--ink) 48%, #FFFFFF);
  --rule-2:      color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --rule-strong: color-mix(in srgb, var(--rule) 52%, #8E8170);
  --ok:          #3C8C57;
  --warn:        #C8463B;
  --lcd:         #B7C7A2;
  --foot-ink:    #DCE2E5;
  --foot-mute:   #A6B2B8;
  --foot-rule:   rgba(255,255,255,.14);

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

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     6px;
  --radius-lg:  14px;
  --base-size:  18px;
  --base-lh:    1.68;
  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;

  /* A row of terraced houses: roof, chimney stacks with pots on the party
     walls, a lit window or two, a front door. Tiles across the page. */
  --terrace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='104' viewBox='0 0 132 104'%3E%3Cpath fill='%231F282D' d='M0 44 20 26h92l20 18z'/%3E%3Crect fill='%23283339' x='0' y='44' width='132' height='60'/%3E%3Cg fill='%23283339'%3E%3Crect x='0' y='10' width='8' height='22'/%3E%3Crect x='124' y='10' width='8' height='22'/%3E%3C/g%3E%3Cg fill='%23A5432E'%3E%3Crect x='0.5' y='5' width='3' height='6'/%3E%3Crect x='4.5' y='6' width='3' height='5'/%3E%3Crect x='124.5' y='6' width='3' height='5'/%3E%3Crect x='128.5' y='5' width='3' height='6'/%3E%3C/g%3E%3Crect fill='%23F3C46B' x='28' y='54' width='17' height='20' rx='1'/%3E%3Crect fill='%233A4850' x='86' y='54' width='17' height='20' rx='1'/%3E%3Cpath fill='none' stroke='%23283339' stroke-width='1.6' d='M36.5 54v20M28 64h17'/%3E%3Cpath fill='none' stroke='%232F3C43' stroke-width='1.6' d='M94.5 54v20M86 64h17'/%3E%3Crect fill='%23F7D79A' x='22' y='80' width='29' height='18' rx='1'/%3E%3Cpath fill='none' stroke='%23283339' stroke-width='1.6' d='M31.6 80v18M41.3 80v18'/%3E%3Crect fill='%23A5432E' x='88' y='78' width='14' height='26' rx='1'/%3E%3Cpath fill='%23F3C46B' d='M88 78a7 5 0 0 1 14 0z'/%3E%3Ccircle fill='%23E9C46A' cx='99' cy='92' r='1'/%3E%3Crect fill='%231F282D' x='0' y='100' width='132' height='4'/%3E%3C/svg%3E");
}

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(--slate); text-decoration:none; }
a:hover{ color:var(--brick-deep); }
:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }
::selection{ background:var(--flame-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(--slate); 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: condensed capitals, like a meter plate. ------------ */
.label, .lk-desc, .finder-label, .finder-terms span, .tp-facts span, .band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link,
.rm-sub, .rm-total, .rm-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, .bc-brand, .boiler-cap,
.gl-zone, .key-what, .lcd-tag, .epc-title, .trv-title, .st-small, .safe-copy .label{
  font-family:var(--font-label); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.35;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-.012em; margin:0; color:var(--ink); font-optical-sizing:auto; }
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--brick); 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(--brick); margin-bottom:.6rem; }

/* --- The brand mark: a column radiator and the name ----------------------- */
.rad{ width:42px; height:42px; flex:none; }
.rad-lg{ width:52px; height:52px; }
.rd-rail{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.rd-col{ fill:currentColor; }
.rd-feet, .rd-pipe{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rd-valve{ fill:var(--flame); }
.lk-word{ display:flex; flex-direction:column; justify-content:center; gap:.08em; font-family:var(--font-display); color:currentColor; line-height:.92; }
.lk-w1{ font-weight:400; font-size:1.12rem; letter-spacing:-.005em; text-transform:capitalize; color:var(--brick); }
.lk-w2{ font-weight:650; font-size:1.5rem; letter-spacing:-.02em; text-transform:capitalize; }
.rad-lg + .lk-word .lk-w1{ font-size:1.3rem; color:#F1B48F; }
.rad-lg + .lk-word .lk-w2{ font-size:1.85rem; }
.lk-text{ display:flex; flex-direction:column; gap:.22rem; min-width:0; margin-left:.5rem; padding-left:.95rem; border-left:1px solid var(--rule); }
.lk-name{ font-family:var(--font-display); font-weight:600; font-size:1.38rem; line-height:1; color:var(--ink); white-space:nowrap; }
.lk-desc{ font-size:.66rem; letter-spacing:.08em; color:var(--ink-3); max-width:24ch; }
.lk-img{ height:42px; width:auto; }

/* --- The top line -------------------------------------------------------- */
.topline{ background:var(--slate); color:#EEF1F2; }
.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:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.3; }
.topline-asof{ white-space:nowrap; color:#F1B48F; }
.topline-asof time{ font-variant-numeric:tabular-nums; }

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

/* ==========================================================================
   TITLE PAGE — a winter dusk over the street, the boiler on the wall
   ========================================================================== */
.title-page{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--flame) 14%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--cream) 82%, var(--frost)) 100%);
  padding:clamp(44px,6vw,84px) 0 0;
}
.tp-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,80px); align-items:center; padding-bottom:clamp(36px,5vw,64px); }
.tp-kicker{ color:var(--brick); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; }
.tp-kicker::before{ content:""; width:26px; height:3px; border-radius:2px; background:var(--brick); flex:none; }
.tp-title{ font-size:clamp(2.9rem,7vw,5.6rem); line-height:.96; letter-spacing:-.035em; margin:0; color:var(--slate); text-wrap:balance; }
.tp-wordmark .wm{ display:inline; }
.tp-wordmark .wm-first{ font-weight:400; font-style:italic; color:var(--brick); }
.tp-wordmark .wm-last{ font-weight:700; margin-left:.06em; }
.tp-wordmark.is-spaced .wm-last{ margin-left:0; }
.tp-lead{ margin:1.4rem 0 0; font-size:1.18rem; line-height:1.6; color:var(--ink-2); max-width:54ch; }
.finder{ margin-top:2rem; max-width:620px; }
.finder-label{ display:block; color:var(--ink-3); margin-bottom:.55rem; }
.finder-row{ display:flex; align-items:stretch; background:var(--white); border:2px solid var(--slate); border-radius:12px; overflow:hidden; box-shadow:0 16px 32px -24px rgba(30,37,41,.6); }
.finder-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:1rem 1.1rem; font:inherit; font-size:1.04rem; color:var(--ink); }
.finder-go{ display:flex; align-items:center; gap:.6rem; padding:0 1.4rem; border:0; background:var(--brick); color:#FFFFFF; cursor:pointer;
  font-family:var(--font-label); font-weight:700; font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; transition:background var(--t) var(--ease); }
.finder-go svg{ width:22px; height:12px; }
.finder-go:hover{ background:var(--brick-deep); }
.finder-terms{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .5rem; margin:.95rem 0 0; }
.finder-terms span{ color:var(--ink-3); margin-right:.2rem; }
.finder-terms a{ padding:.28rem .72rem; border:1px solid var(--rule-strong); border-radius:8px; background:var(--white); font-size:.9rem; color:var(--ink-2); }
.finder-terms a:hover{ border-color:var(--brick); color:var(--brick-deep); }
.tp-facts{ display:flex; flex-wrap:wrap; margin:2rem 0 0; }
.tp-facts span{ color:var(--ink-3); padding-right:1.4rem; margin-right:1.4rem; border-right:1px solid var(--rule-strong); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{ display:block; margin-bottom:.1rem; font-family:var(--font-display); font-weight:600; font-size:1.95rem; letter-spacing:-.02em; text-transform:none; color:var(--slate); font-variant-numeric:tabular-nums lining-nums; }

/* --- The boiler ------------------------------------------------------------ */
.boiler{ margin:0; justify-self:end; width:min(100%,520px); display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr); gap:1.4rem; align-items:center; }
.boiler-case{
  position:relative; padding:1rem 1rem .5rem; border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F4F1 60%,#E9E7E2 100%);
  border:1px solid #DCD8D0; box-shadow:inset 0 2px 0 #FFFFFF, 0 26px 40px -26px rgba(30,37,41,.6);
}
.bc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.bc-brand{ color:var(--ink-4); font-size:.7rem; letter-spacing:.24em; }
.bc-led{ width:9px; height:9px; border-radius:50%; background:#5BD07A; box-shadow:0 0 6px rgba(91,208,122,.9); }
.gauge{ width:100%; height:auto; }
.gg-bezel{ fill:#D9D6CF; stroke:#C6C2B9; stroke-width:1.5; }
.gg-face{ fill:#FFFFFF; stroke:#EAE7E1; stroke-width:1; }
.gg-band{ fill:none; stroke-width:9; stroke-linecap:butt; }
.gg-low, .gg-high{ stroke:var(--warn); opacity:.85; }
.gg-ok{ stroke:var(--ok); }
.gg-tick{ stroke:#6B7479; stroke-width:1.4; stroke-linecap:round; }
.gg-major{ stroke:var(--ink); stroke-width:2.4; }
.gg-num{ font-family:var(--font-label); font-weight:700; font-size:15px; fill:var(--ink); }
.gg-unit{ font-family:var(--font-label); font-weight:600; font-size:12px; letter-spacing:.18em; fill:var(--ink-3); }
.gg-needle{ stroke:var(--brick); stroke-width:4; stroke-linecap:round; }
.gg-hub{ fill:var(--slate); stroke:#FFFFFF; stroke-width:2; }
.bc-panel{ display:flex; align-items:center; gap:.6rem; margin-top:.3rem; padding:.55rem .6rem; border-radius:10px; background:#ECEAE5; border:1px solid #DCD8D0; }
.bc-lcd{ display:flex; align-items:flex-start; gap:.15rem; padding:.3rem .5rem; border-radius:5px; background:var(--lcd); box-shadow:inset 0 2px 4px rgba(0,0,0,.25); }
.bc-lcd .seg7{ height:26px; width:auto; }
.bc-lcd small{ font-family:var(--font-mono); font-weight:600; font-size:.66rem; color:#24301F; }
.bc-knob{ margin-left:auto; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFFFFF,#D9D6CF); border:1px solid #C9C5BC; box-shadow:0 2px 3px rgba(0,0,0,.15); position:relative; }
.bc-knob::after{ content:""; position:absolute; left:50%; top:4px; width:3px; height:9px; margin-left:-1.5px; border-radius:2px; background:var(--brick); }
.bc-knob-hw{ margin-left:0; }
.bc-knob-hw::after{ background:var(--frost); transform:rotate(40deg); transform-origin:50% 11px; }
.bc-pipes{ display:flex; justify-content:center; gap:14px; margin-top:.5rem; height:22px; }
.bc-pipes span{ width:9px; height:100%; border-radius:0 0 3px 3px; background:linear-gradient(90deg,#B8865B,#E3B98C 40%,#A97447); }
.bc-pipes span:nth-child(3){ background:linear-gradient(90deg,#C9C5BC,#EFEDE8 40%,#B5B0A6); }
.gauge-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.gauge-legend a{ display:flex; flex-direction:column; gap:.1rem; padding:.62rem .85rem; border-radius:10px; background:var(--white); border:1px solid var(--rule); border-left:5px solid var(--rule-strong); color:var(--ink); transition:transform var(--t) var(--ease); }
.gauge-legend a:hover{ transform:translateX(3px); color:var(--ink); }
.gl-low a, .gl-high a{ border-left-color:var(--warn); }
.gl-ok a{ border-left-color:var(--ok); }
.gl-note a{ border-left-color:var(--brick); }
.gl-zone{ color:var(--ink-3); font-size:.72rem; }
.gl-what{ font-weight:600; font-size:.98rem; line-height:1.3; }
.gauge-legend a:hover .gl-what{ color:var(--brick-deep); }
.boiler-cap{ grid-column:1 / -1; color:var(--ink-3); font-size:.74rem; }

/* The terrace along the bottom of the title page. */
.roofline{ height:104px; background:var(--terrace) repeat-x left bottom; background-size:auto 104px; }

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

/* --- Rooms of the heating -------------------------------------------------- */
.rooms{ background:var(--slate); background-image:radial-gradient(90% 60% at 10% 0%, rgba(226,112,42,.10), transparent 60%); }
.rooms .band-head .label{ color:#F1B48F; }
.rooms .band-head .label::before{ background:#F1B48F; }
.rooms .band-title{ color:#FFFFFF; }
.rooms .band-note{ color:#C4CDD1; }
.rm-grid{ columns:3 340px; column-gap:clamp(18px,2vw,26px); }
.rm{ break-inside:avoid; margin:0 0 clamp(18px,2vw,26px); background:var(--paper); border-radius:var(--radius-lg); padding:1.25rem 1.35rem 1rem; box-shadow:0 18px 30px -24px rgba(0,0,0,.6); }
.rm-head{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.85rem; align-items:center; padding-bottom:.9rem; border-bottom:2px solid var(--slate); }
.rm-icon{ grid-row:1 / 3; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--brick-tint); color:var(--brick); }
.rm-icon svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rm-name{ font-size:1.32rem; line-height:1.15; color:var(--slate); }
.rm-total{ color:var(--ink-3); font-size:.74rem; }
.rm-total strong{ font-family:var(--font-mono); font-weight:500; letter-spacing:0; color:var(--ink-2); }
.rm-list{ list-style:none; margin:0; padding:0; }
.rm-list > .rm-sub{ padding:.9rem 0 .15rem; color:var(--flame-ink); font-size:.72rem; }
.rm-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:.15rem .8rem; padding:.6rem 0; border-bottom:1px solid var(--rule-2); }
.rm-row:last-child{ border-bottom:0; }
.rm-main{ font-weight:600; font-size:.98rem; line-height:1.35; color:var(--ink); }
.rm-main:hover{ color:var(--brick-deep); text-decoration:underline; text-underline-offset:3px; }
.rm-n{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.rm-parts, .rm-brands{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem; }
.rm-parts a{ font-family:var(--font-label); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .5rem; border:1px solid var(--rule-strong); border-radius:6px; color:var(--ink-3); }
.rm-parts a:hover{ border-color:var(--slate); color:var(--slate); }
.rm-brands a{ font-size:.84rem; padding:.18rem .6rem; border-radius:8px; background:var(--slate-tint); color:var(--slate); border:1px solid var(--rule); }
.rm-brands a:hover{ border-color:var(--brick); color:var(--brick-deep); }
.rm-more{ margin-top:.6rem; border-top:1px dashed var(--rule-strong); }
.rm-more summary{ list-style:none; cursor:pointer; padding:.8rem 0 .3rem; color:var(--slate); display:flex; align-items:center; gap:.4rem; }
.rm-more summary::-webkit-details-marker{ display:none; }
.rm-more summary::before{ content:"+"; font-family:var(--font-display); font-size:1.15rem; line-height:1; color:var(--brick); }
.rm-more[open] summary::before{ content:"–"; }
.rm-more summary span{ color:var(--ink-4); }
.rm-other{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:.6rem 0 0; }
.rm-other a{ color:#FFFFFF; }
.rm-other a span{ font-family:var(--font-mono); font-size:.8rem; color:#A6B2B8; }

/* --- Fault codes: the boiler's LCD ----------------------------------------- */
.codes{ background:var(--cream); }
.codes-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,4.4vw,72px); align-items:start; }
.code-find{ display:flex; align-items:stretch; max-width:520px; margin:0 0 1.6rem; border:2px solid var(--slate); border-radius:12px; overflow:hidden; background:var(--white); }
.code-find input{ flex:1; min-width:0; border:0; outline:0; padding:.9rem 1rem; font:inherit; font-size:1rem; color:var(--ink); background:transparent; }
.code-find button{ border:0; background:var(--slate); color:#fff; padding:0 1.2rem; cursor:pointer; font-family:var(--font-label); font-weight:700; font-size:.92rem; letter-spacing:.1em; text-transform:uppercase; }
.code-find button:hover{ background:var(--brick); }
.code-makes{ list-style:none; margin:0; padding:0; border-top:2px solid var(--slate); max-width:520px; }
.code-makes li{ border-bottom:1px solid var(--cream-deep); }
.code-makes a{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.7rem 0; color:var(--ink); font-weight:600; }
.code-makes a:hover{ color:var(--brick-deep); }
.cm-n{ font-family:var(--font-mono); font-weight:400; font-size:.82rem; color:var(--ink-4); }
.lcd-wrap{ display:flex; flex-direction:column; gap:1.3rem; }
.lcd-panel{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem;
  padding:1.3rem 1.5rem; border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF,#ECEAE5); border:1px solid #DAD6CD; box-shadow:0 24px 36px -28px rgba(30,37,41,.6);
}
.lcd-icons{ display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; color:var(--ink-4); }
.lcd-flame{ color:var(--flame); }
.lcd{ display:flex; justify-content:center; padding:.7rem 1rem; border-radius:8px; background:var(--lcd); box-shadow:inset 0 3px 8px rgba(0,0,0,.28); }
.lcd .seg7{ height:64px; width:auto; }
.sg-on{ fill:#1E2A1B; }
.sg-off{ fill:rgba(30,42,27,.08); }
.lcd-tag{ align-self:start; color:var(--warn); font-size:.74rem; }
.keys{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; }
.key{ display:flex; flex-direction:column; gap:.2rem; height:100%; padding:.75rem .85rem; border-radius:12px; background:var(--white); border:1px solid var(--rule); color:var(--ink); transition:border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.key:hover{ border-color:var(--brick); transform:translateY(-2px); color:var(--ink); }
.key-code{ font-family:var(--font-mono); font-weight:600; font-size:1.22rem; line-height:1; color:var(--brick-deep); }
.key-what{ font-size:.7rem; color:var(--ink-3); }

/* --- Numbers worth knowing: the EPC bands and the valve ------------------ */
.numbers{ background:var(--white); }
.numbers-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,64px); align-items:start; }
.epc, .trv{ padding:1.4rem 1.5rem 1.2rem; border-radius:var(--radius-lg); background:var(--paper); border:1px solid var(--rule); }
.epc-title, .trv-title{ margin:0 0 1rem; color:var(--brick); }
.epc-bands{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.epc-bands li{ width:var(--w); min-width:150px; }
.epc-bands a, .epc-bar-in{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  height:36px; padding:0 .4rem 0 .8rem; color:#FFFFFF;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  transition:filter var(--t) var(--ease);
}
.epc-bands a:hover{ filter:brightness(1.08); color:#FFFFFF; }
.epc-range{ font-family:var(--font-mono); font-size:.82rem; font-weight:500; }
.epc-band{ padding-right:1.1rem; font-family:var(--font-label); font-weight:700; font-size:1.25rem; }
.epc-a a, .epc-a .epc-bar-in{ background:#008054; }
.epc-b a, .epc-b .epc-bar-in{ background:#19B459; }
.epc-c a, .epc-c .epc-bar-in{ background:#8DCE46; color:#1E2529; }
.epc-d a, .epc-d .epc-bar-in{ background:#FFD500; color:#1E2529; }
.epc-e a, .epc-e .epc-bar-in{ background:#FCAA65; color:#1E2529; }
.epc-f a, .epc-f .epc-bar-in{ background:#EF8023; }
.epc-g a, .epc-g .epc-bar-in{ background:#E9153B; }
.epc-note, .trv-note{ margin:1rem 0 0; font-size:.92rem; line-height:1.55; color:var(--ink-3); }
.epc-note a, .trv-note a{ font-weight:600; color:var(--slate); }
.trv-head{
  display:flex; justify-content:space-between; align-items:center; gap:.3rem;
  margin:0 0 1.2rem; padding:.7rem 1rem; border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF,#E9E6E0); border:1px solid #D7D2C8; box-shadow:inset 0 -3px 0 rgba(0,0,0,.05);
}
.trv-head span{ font-family:var(--font-label); font-weight:700; font-size:1.15rem; color:var(--slate); }
.trv-head span:first-child{ color:var(--frost); }
.trv-head span:last-child{ color:var(--brick); }
.trv-list{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem 1.4rem; }
.trv-list div{ display:flex; align-items:baseline; gap:.7rem; padding:.35rem 0; border-bottom:1px solid var(--rule-2); }
.trv-list dt{ flex:none; width:1.6rem; font-family:var(--font-label); font-weight:700; font-size:1.05rem; color:var(--brick); }
.trv-list dd{ margin:0; font-size:.95rem; color:var(--ink-2); }

/* --- Common questions ---------------------------------------------------- */
.questions{ background:var(--cream); }
.diag-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(28px,4vw,72px); align-items:start; }
.symptoms{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.symptoms a{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; height:100%; padding:.95rem 1.05rem; border-radius:12px; background:var(--white); border:1px solid var(--rule); color:var(--ink); font-weight:600; font-size:1rem; line-height:1.38; transition:border-color var(--t) var(--ease); }
.symptoms a:hover{ border-color:var(--brick); color:var(--brick-deep); }
.sy-go{ color:var(--brick); transition:transform var(--t) var(--ease); }
.symptoms a:hover .sy-go{ transform:translateX(3px); }

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

/* --- Latest -------------------------------------------------------------- */
.latest{ background:var(--cream); }
.latest .section{ padding:0; }
.latest .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); color:var(--slate); }
.is-home .latest .post-grid > .post-card:nth-child(n+9){ display:none; }

/* --- Safety: the yellow sticker on the meter ------------------------------- */
.safety{ background:var(--slate); color:#E3E8EA; }
.safety-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,4.4vw,72px); align-items:start; }
.safe{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(20px,2.6vw,40px); align-items:start; }
.sticker{
  padding:1.1rem 1.1rem 1rem; border-radius:12px; background:#FFD21F; color:#111111; text-align:center;
  box-shadow:0 0 0 4px #111111 inset, 0 18px 30px -18px rgba(0,0,0,.6); transform:rotate(-2deg);
}
.st-ask{ margin:0; font-family:var(--font-label); font-weight:700; font-size:1.6rem; line-height:1.05; text-transform:uppercase; }
.st-call{ margin:.45rem 0 0; font-size:.86rem; font-weight:600; line-height:1.3; }
.st-num{ margin:.55rem 0 0; font-family:var(--font-label); font-weight:700; font-size:2.05rem; line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.st-small{ margin:.6rem 0 0; font-size:.66rem; color:#222222; }
.safe-copy .label{ color:#F1B48F; margin:0 0 .7rem; }
.safety .band-title{ color:#FFFFFF; }
.safe-p{ margin:1rem 0 0; font-size:1.03rem; line-height:1.62; color:#CBD3D7; max-width:62ch; }
.safe-list{ list-style:none; margin:1.4rem 0 0; padding:0; border-top:1px solid rgba(255,255,255,.18); }
.safe-list li{ position:relative; padding:.85rem 0 .85rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.12); line-height:1.55; color:#CBD3D7; }
.safe-list li::before{ content:""; position:absolute; left:0; top:1.25rem; width:.62rem; height:.62rem; border-radius:50%; background:var(--flame); }
.safe-list strong{ color:#FFFFFF; font-weight:600; }
.src{ padding:clamp(20px,2.4vw,30px); background:var(--paper); color:var(--ink); border-radius:var(--radius-lg); border-top:5px solid var(--brick); }
.src-h{ font-size:1.5rem; color:var(--slate); margin:0 0 .8rem; }
.src-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--slate); }
.src-list li{ border-bottom:1px solid var(--rule-2); }
.src-list a{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem; padding:.75rem 0; color:var(--ink); }
.src-name{ font-weight:600; line-height:1.35; }
.src-org{ grid-column:1; color:var(--ink-3); font-size:.7rem; }
.src-go{ grid-row:1 / 3; grid-column:2; align-self:center; color:var(--brick); }
.src-list a:hover .src-name{ color:var(--brick-deep); text-decoration:underline; text-underline-offset:3px; }
.src-note{ margin:.9rem 0 0; font-size:.86rem; line-height:1.55; color:var(--ink-3); }

/* --- House rules ----------------------------------------------------------- */
.principles{ background:var(--cream); }
.pr-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.pr-list li{ padding:1.4rem 1.5rem; border-radius:var(--radius-lg); background:var(--paper); border:1px solid var(--rule); }
.pr-no{ display:inline-block; font-family:var(--font-mono); font-weight:600; font-size:.86rem; color:var(--brick); padding:.15rem .5rem; border-radius:6px; background:var(--brick-tint); }
.pr-h{ margin:.8rem 0 .45rem; font-size:1.26rem; line-height:1.22; color:var(--slate); }
.pr-p{ margin:0; font-size:.98rem; line-height:1.6; color:var(--cream-ink); }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:clamp(18px,2vw,26px); }
.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(--brick-soft); box-shadow:0 14px 30px -24px rgba(30,37,41,.45); }
.post-card-media{ display:none; }
.post-card-body{ padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--brick); }
.post-card-title{ font-size:1.18rem; line-height:1.28; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--brick-deep); }
.post-card-excerpt{ margin:0; font-size:.96rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.7rem; }
.card-grid, .pillar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:clamp(18px,2vw,26px); }
.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(--brick); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--brick); 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(--brick); }
.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:.92rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:1.5px solid transparent; border-radius:10px; cursor:pointer; transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.btn--accent{ background:var(--brick); color:#fff; }
.btn--accent:hover{ background:var(--brick-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--slate); color:var(--slate); }
.btn--ghost:hover{ border-color:var(--brick); color:var(--brick-deep); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{ display:inline-block; padding:.4rem .8rem; border-radius:8px; border:1px solid var(--rule-strong); background:var(--white); color:var(--ink-2); transition:border-color var(--t) var(--ease), color var(--t) var(--ease); }
.chip:hover{ color:var(--brick-deep); border-color:var(--brick); }
.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(--slate); border-radius:10px; color:var(--slate); }
.pagination a:hover{ border-color:var(--brick); color:var(--brick-deep); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */
.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); background:var(--white); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; margin-bottom:1.6rem; color:var(--ink-3); font-size:.74rem; }
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--brick-deep); }
.breadcrumb [aria-hidden="true"]{ color:var(--brick); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{ color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-shell h1.display{ font-size:clamp(2.15rem,4.3vw,3.3rem); line-height:1.04; letter-spacing:-.025em; margin:0; color:var(--slate); 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(--slate); }
.results-head h1{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0; color:var(--slate); }
.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(--brick-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:.7rem; }
.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--slate); }
.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(--brick-deep); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article{ padding-bottom:1rem; }
.article-hero{ margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px); border-bottom:2px solid var(--slate); }
.article-hero-grid{ display:block; }
.article-hero-copy h1{ font-size:clamp(2.15rem,4.3vw,3.4rem); line-height:1.04; letter-spacing:-.025em; margin:.2rem 0 0; max-width:24ch; color:var(--slate); 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(--brick); }
.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.2rem; line-height:1.56; color:var(--ink-2); max-width:60ch; }
.article-hero-media{ display:none; }
.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:240px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }
.toc{ position:sticky; top:104px; padding:1rem 1.1rem .5rem; border-radius:var(--radius-lg); background:var(--cream); border:1px solid var(--rule); }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--brick); border-bottom:2px solid var(--slate); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc li:last-child{ border-bottom:0; }
.toc a{ display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem; padding:.58rem 0; font-size:.93rem; line-height:1.4; color:var(--ink-2); }
.toc a::before{ content:counter(toc); font-family:var(--font-mono); font-weight:600; font-size:.82rem; line-height:1.7; color:var(--brick); font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--brick-deep); }
.article-rail{ min-width:0; }
.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.14; letter-spacing:-.02em; color:var(--slate); }
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ margin:2rem 0 .6rem; font-size:1.3rem; line-height:1.26; }
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.04rem; letter-spacing:0; }
.article-body a{ color:var(--brick-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--brick) 45%, transparent); }
.article-body a:hover{ color:var(--brick); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }
.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:.1rem; top:.6em; width:.5em; height:.5em; background:var(--flame); 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:6px; background:var(--slate); color:#FFFFFF; font-family:var(--font-mono); font-weight:600; font-size:.76rem; line-height:1; font-variant-numeric:tabular-nums; }
.article-body .pro-tip{ margin:1.7rem 0; padding:1rem 1.2rem 1.05rem; background:var(--flame-tint); border-left:4px solid var(--flame); 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(--flame-ink); }
.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(--slate-tint); border:1px solid var(--rule); 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(--brick); color:var(--ink); font-family:var(--font-display); font-style:italic; font-size:1.24rem; line-height:1.5; }
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); border-radius:var(--radius); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{ font-family:var(--font-mono); font-size:.86em; padding:.12em .38em; border-radius:4px; background:var(--cream); border:1px solid var(--rule); color:var(--ink); }
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body pre code{ padding:0; border:0; background:transparent; }
.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(--slate); color:#FFFFFF; font-size:.74rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--cream) 55%, #FFFFFF); }
.article-body tbody tr:last-child td{ border-bottom:0; }
.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(--cream); border:1px solid var(--rule); border-left:4px solid var(--brick); 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(--slate); }
.faq h2{ font-size:1.8rem; margin:0 0 .8rem; color:var(--slate); }
.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.05rem; line-height:1.42; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:.25rem; top:.55rem; font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1; color:var(--brick); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--brick-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(--brick); }
.pillar-link{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius-lg); color:var(--ink); transition:background var(--t) var(--ease); }
.pillar-link:hover{ background:var(--paper); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--brick); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.22rem; line-height:1.3; color:var(--slate); }
.pl-arrow{ margin-left:auto; color:var(--brick); 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.04; letter-spacing:-.025em; color:var(--slate); text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); border-radius:var(--radius); }
.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.blk-prose h2, .blk-text h2{ font-size:1.8rem; margin:2rem 0 .9rem; color:var(--slate); }
.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(--slate); }
.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(--slate); }
.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(--brick); font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:400; line-height:1.38; color:var(--ink); max-width:36ch; }
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }
.cta, .cta-band, .sec-cta-band{ padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px); background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius-lg); text-align:center; }
.cta h2, .cta-band h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.8rem; color:var(--slate); }
.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 — slate, the terrace above it
   ========================================================================== */
.site-footer{ background:var(--slate); color:var(--foot-ink); padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px); border-top:5px solid var(--brick); }
.site-footer :focus-visible{ outline-color:#F1B48F; }
.foot-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px); }
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.7rem; color:#FFFFFF; }
.foot-brand:hover{ color:#FFFFFF; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.32rem; 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:#F1B48F; border-bottom:1px solid var(--foot-rule); font-size:.76rem; letter-spacing:.14em; }
.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:.96rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a span{ font-family:var(--font-mono); font-size:.78rem; color:#F1B48F; 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(--flame); 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; }

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); }
  .boiler{ justify-self:start; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .lk-text{ display:none; }
  .codes-grid, .numbers-grid, .safety-grid{ grid-template-columns:minmax(0,1fr); }
  .pr-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@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-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(--paper); 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); }
  .safe{ grid-template-columns:minmax(0,1fr); }
  .sticker{ max-width:260px; }
}
@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.6rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .gd-list{ grid-template-columns:minmax(0,1fr); }
  .boiler{ grid-template-columns:minmax(0,1fr); }
  .boiler-case{ max-width:260px; }
  .trv-list{ grid-template-columns:minmax(0,1fr); }
  .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:700; font-size:.74rem; letter-spacing:.08em; 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:.66rem; letter-spacing:.08em; }
}
@media (max-width:600px){
  .rad{ width:34px; height:34px; }
  .lk-w1{ font-size:.98rem; }
  .lk-w2{ font-size:1.26rem; }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.85rem 1rem; }
  .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:.68rem; }
  .tp-facts strong{ margin:0; font-size:1.5rem; }
  .rm-grid{ columns:1; }
  .lcd-panel{ grid-template-columns:minmax(0,1fr); padding:1rem; }
  .lcd-icons{ flex-direction:row; justify-content:center; }
  .keys{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .epc-bands li{ width:100%; }
  .roofline{ height:80px; background-size:auto 80px; }
  .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; }
  .is-home .latest .post-grid > .post-card:nth-child(n+7){ display:none; }
}