/* Design system: glacier blue, mineral green and warm coral */
:root {
    --paper: #f2f8f9;
    --white: #ffffff;
    --mint: #d9f0eb;
    --sky: #e5f2fc;
    --line: #c4dce0;
    --text: #315668;
    --muted: #4d6e79;
    --teal: #166d74;
    --teal-light: #3b9e9d;
    --warm: #d76649;
    --highlight: #f5dbc9;
    --shadow: 0 12px 38px rgba(37, 109, 119, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.7; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #b94d32; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #cf6445; outline-offset: 4px; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { margin: 0 auto; max-width: 1600px; padding: 12px clamp(22px, 3.9vw, 66px); display: flex; align-items: center; gap: 28px; justify-content: space-between; }
.identity { color: var(--text); text-decoration: none; display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; }
.mark { width: 33px; height: 43px; border: 3px solid var(--teal); border-radius: 6px; display: block; position: relative; }
.mark::after { content: ""; position: absolute; left: 0; right: 0; top: 16px; border-top: 3px solid var(--teal); }
.mark span { position: absolute; width: 3px; height: 8px; left: 5px; background: var(--warm); border-radius: 1px; }
.mark span:first-child { top: 4px; } .mark span:last-child { top: 23px; }
.identity-text { display: block; font-weight: 820; line-height: 1.03; letter-spacing: -.6px; font-size: 18px; white-space: nowrap; }
.identity-dot { color: var(--warm); }
.identity-text small { display: block; margin-top: 5px; font-weight: 720; font-size: 9px; color: var(--muted); letter-spacing: 1.6px; }
.site-nav { display: flex; align-items: center; gap: clamp(11px,1.7vw,29px); flex-wrap: wrap; justify-content: flex-end; }
.site-nav a { font-size: 13px; font-weight: 720; color: var(--muted); text-decoration: none; white-space: nowrap; padding: 9px 1px; border-bottom: 2px solid transparent; }
.site-nav a[aria-current] { color: var(--teal); border-bottom-color: var(--warm); }
.site-nav a:hover { color: var(--warm); }
.menu-toggle { display: none; font: inherit; font-weight: 750; font-size: 15px; border: 1px solid var(--line); background: var(--white); color: var(--teal); padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.hamb { display: inline-flex; flex-direction: column; gap: 3px; margin-left: 6px; vertical-align: middle; } .hamb i { height: 2px; width: 18px; background: var(--teal); display: block; }
.page-wrap { margin: 0 auto; max-width: 1600px; padding: 32px clamp(22px, 3.9vw, 66px) 68px; }
.hero { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(325px, 1fr); gap: 20px; align-items: stretch; }
.hero-copy { background: var(--sky); padding: clamp(30px,4vw,60px); border-radius: 4px; position: relative; display: flex; flex-direction: column; min-height: 355px; }
.eyebrow { color: var(--teal); text-transform: uppercase; font-size: 11px; font-weight: 840; letter-spacing: 2.2px; display: flex; gap: 12px; align-items: center; line-height: 1.4; }
.small-dash { width: 21px; border-top: 3px solid var(--warm); }
h1 { margin: 22px 0 16px; font-size: 40px; line-height: 1.17; letter-spacing: -.9px; font-weight: 830; color: #2c6472; overflow-wrap: anywhere; }
h2 { font-size: 28px; line-height: 1.24; font-weight: 820; color: #2b6a75; letter-spacing: -.48px; margin: 0 0 18px; overflow-wrap: anywhere; }
h3 { font-size: 21px; line-height: 1.3; color: var(--teal); }
p { font-size: 16px; line-height: 1.75; margin: 0 0 19px; }
p:last-child { margin-bottom: 0; }
.lead { max-width: 730px; font-size: 16px; line-height: 1.8; }
.hero-rail { margin-top: auto; padding-top: 24px; display: flex; gap: 6px; } .hero-rail span { width: 30px; height: 5px; border-radius: 2px; background: #b2dad8; } .hero-rail span:nth-child(2), .hero-rail span:nth-child(3),.hero-rail span:nth-child(4) { background: #56a6a1; } .hero-rail span:nth-child(5) { background: #e79d83; }
.hero-visual { padding: 20px 21px; display: grid; grid-template-columns: 145px minmax(0,1fr); gap: clamp(15px,1.8vw,30px); align-items: center; background: var(--mint); border-radius: 4px; min-height: 355px; }
.fridge-illustration { position: relative; height: 220px; align-self: center; }
.fridge-body { height: 172px; width: 95px; top: 12px; left: 23px; position: absolute; background: #f9ffff; border: 5px solid #6caeb0; border-radius: 12px; box-shadow: 5px 10px 0 #b6dcd5; }
.fridge-line { position: absolute; top: 90px; width: 100%; border-top: 4px solid #6caeb0; }
.fridge-handle { position: absolute; left: 12px; width: 6px; height: 23px; background: var(--warm); border-radius: 4px; } .fridge-handle.top { top: 52px; } .fridge-handle.bottom { top: 107px; }
.fridge-led { width: 9px; height: 9px; border-radius: 100%; background: #61b29f; position: absolute; top: 12px; right: 10px; }
.heat-track { position: absolute; top: 48px; left: 116px; height: 110px; display: flex; align-items: center; flex-direction: column; gap: 11px; }
.heat-track b { width: 20px; height: 6px; display: block; background: #e99b83; border-radius: 12px; transform: rotate(-22deg); } .heat-track b:nth-child(even) { width: 13px; margin-left: 12px; }
.art-label { display: block; position: absolute; top: 194px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .9px; font-weight: 800; color: #447f87; }
.hero-facts { display: flex; flex-direction: column; justify-content: center; }
.hero-fact { border-bottom: 1px solid #a8d2d0; padding: 14px 0; }
.hero-fact:last-child { border: 0; }
.hero-fact strong { display: block; font-size: clamp(20px,2.35vw,28px); line-height: 1.15; letter-spacing: -.5px; color: #21707a; margin-bottom: 8px; }
.hero-fact span { display: block; font-size: 12px; font-weight: 550; line-height: 1.55; color: var(--text); }
.content-intro { border-left: 4px solid var(--warm); padding: 9px 0 9px 26px; margin: 35px 0 43px; max-width: 1120px; }
.content-intro p { font-size: 16px; line-height: 1.83; }
.article-body { display: block; }
.body-section { padding: 26px 0 34px; border-top: 1px solid var(--line); }
.body-section:first-child { border-top: 4px solid #9bc9ca; }
.body-section h2 { max-width: 950px; }
.body-section > p, .body-section > ul, .body-section > ol { max-width: 1070px; }
.section-kicker { font-size: 11px; letter-spacing: 1.6px; font-weight: 800; color: var(--warm); margin-bottom: 10px; }
.body-section a { font-weight: 670; }
ul, ol { padding-left: 23px; margin-top: 8px; margin-bottom: 24px; }
li { padding-left: 7px; margin-bottom: 11px; line-height: 1.65; }
li::marker { color: var(--warm); font-weight: 700; }
.steps { counter-reset: steps; list-style: none; padding-left: 0; margin: 20px 0 26px; display: grid; gap: 10px; max-width: 1060px; }
.steps li { display: grid; grid-template-columns: 33px 1fr; gap: 16px; padding-left: 0; margin: 0; }
.steps li::before { counter-increment: steps; content: counter(steps, decimal-leading-zero); font-size: 14px; color: var(--teal); background: var(--mint); padding: 5px 4px; text-align: center; border-radius: 3px; align-self: start; line-height: 1.6; font-weight: 760; }
.table-scroll { overflow-x: auto; max-width: 1190px; margin: 20px 0 26px; }
table { background: #fff; width: 100%; border-collapse: collapse; text-align: left; border: 1px solid var(--line); }
caption { text-align: left; font-size: 12px; color: var(--muted); padding: 0 0 7px; }
th { font-size: 13px; font-weight: 750; text-align: left; background: #d9eceb; color: #23666d; padding: 13px 18px; line-height: 1.45; }
td { border-top: 1px solid #d6e4e4; padding: 13px 18px; font-size: 15px; line-height: 1.55; vertical-align: top; }
tr:nth-child(even) td { background: #f5fafb; }
.data-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 19px 0 25px; max-width: 980px; }
.fact { background: #e3f0f1; border-top: 3px solid #65aaaa; padding: 20px 22px; display: flex; flex-direction: column; }
.fact-label { font-size: 12px; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.fact strong { color: var(--teal); font-size: clamp(25px,3vw,37px); line-height: 1.25; margin: 7px 0; }
.fact-caption { font-size: 13px; line-height: 1.55; }
.source-note { color: var(--muted); padding-top: 1px; }
.calc { max-width: 1000px; padding: 22px; margin: 18px 0 27px; border: 1px solid #aad0cb; background: #e4f3f0; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.calc label { display: flex; gap: 9px; flex-direction: column; color: #376a71; font-weight: 700; font-size: 13px; }
.calc input { width: 100%; padding: 12px 14px; background: #fff; color: var(--text); border: 2px solid #aacdcf; border-radius: 2px; font: inherit; font-size: 16px; }
.calc-result { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.calc-result > div { border-top: 1px solid #a5cfcb; padding-top: 12px; display: flex; flex-direction: column; }
.calc-result span { font-size: 13px; color: var(--muted); }
.calc-result output { display: block; font-size: clamp(19px,2.2vw,28px); font-weight: 800; color: #236d71; margin-top: 7px; overflow-wrap: anywhere; }
.calc-help { margin-top: 13px; }
.sources { border-top: 4px solid #93c4c6; padding: 27px 0; margin-top: 20px; }
.sources h2 { font-size: 28px; }
.sources ol { padding-left: 23px; max-width: 1190px; }
.sources li { font-size: 13px; line-height: 1.7; color: var(--muted); padding: 0 0 0 4px; margin-bottom: 10px; }
.related { background: #e4f0f5; padding: 25px 30px; }
.related h2 { font-size: 28px; }
.related-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.related-links a { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 13px 14px; font-size: 14px; font-weight: 680; color: var(--teal); text-decoration: none; background: #fff; line-height: 1.4; border-left: 2px solid #b1d0d3; }
.related-links a:hover { border-left-color: var(--warm); }
.related-links a span { font-size: 24px; color: var(--warm); line-height: 1; }
.footer { background: #daeef0; border-top: 1px solid #b0d2d6; }
.footer-inner { margin: auto; max-width: 1600px; padding: 25px clamp(22px,3.9vw,66px); }
.footer-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.footer-top strong { font-size: 16px; font-weight: 840; letter-spacing: .5px; color: var(--teal); display: block; }
.footer-top span { font-size: 13px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; } .foot-links a { font-size: 13px; font-weight: 700; text-decoration: none; }
.footer-line { display: flex; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid #b7d8d8; margin-top: 15px; padding-top: 13px; gap: 8px; font-size: 12px; color: var(--muted); }
@media (min-width: 1700px) {
    .page-wrap { max-width: 1700px; }
    .header-inner, .footer-inner { max-width: 1700px; }
}
@media (max-width: 1220px) {
    .hero { grid-template-columns: minmax(0,1.5fr) minmax(300px,1fr); }
    .hero-visual { grid-template-columns: 106px minmax(0,1fr); padding: 17px; gap: 14px; }
    .fridge-illustration { transform: scale(.8); transform-origin: left center; width: 135px; }
    .hero-copy { padding: 32px; }
    .site-nav { gap: 12px; }
}
@media (max-width: 980px) {
    .menu-toggle { display: inline-flex; align-items: center; }
    .header-inner { flex-wrap: wrap; }
    .site-nav { display: none; order: 3; width: 100%; background: var(--sky); padding: 11px 14px; flex-wrap: wrap; justify-content: flex-start; gap: 7px 19px; }
    .site-nav.open { display: flex; }
    .site-nav a { flex: 0 0 auto; }
    .hero { grid-template-columns: minmax(0,1fr); }
    .hero-copy { min-height: 0; }
    .hero-visual { grid-template-columns: 150px 1fr; min-height: 225px; }
    .fridge-illustration { transform: none; width: 145px; }
    .hero-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .hero-fact { border: 0; border-left: 1px solid #a8d2d0; padding: 10px 15px; }
}
@media (max-width: 650px) {
    .page-wrap { padding: 15px 15px 45px; }
    .header-inner { padding: 9px 15px; }
    .identity-text { font-size: 16px; } .identity-text small { font-size: 8px; }
    .hero-copy { padding: 27px 22px; }
    h1 { font-size: 40px; letter-spacing: -1.2px; }
    h2, .related h2,.sources h2 { font-size: 28px; }
    .hero-visual { padding: 13px; grid-template-columns: 115px minmax(0,1fr); gap: 8px; min-height: 215px; }
    .fridge-illustration { width: 140px; transform: scale(.83); transform-origin: left center; }
    .hero-facts { display: flex; flex-direction: column; gap: 0; }
    .hero-fact { padding: 8px 0; border: 0; border-bottom: 1px solid #b5d5d1; }
    .hero-fact:last-child { border: 0; }
    .hero-fact strong { font-size: 22px; margin-bottom: 3px; }
    .hero-fact span { font-size: 11px; line-height: 1.4; }
    .content-intro { margin: 22px 0 24px; padding-left: 16px; }
    .content-intro p { font-size: 16px; }
    .body-section { padding: 23px 0 25px; }
    td, th { padding: 10px 11px; font-size: 13px; }
    .table-scroll { margin: 15px 0 20px; }
    .data-pair, .calc-grid, .calc-result, .related-links { grid-template-columns: minmax(0,1fr); }
    .calc { padding: 15px; }
    .related { padding: 20px 17px; }
    .footer-top, .footer-line { display: block; }
    .foot-links { margin-top: 15px; }
    .footer-line span { display: block; }
}
@media (max-width: 370px) {
    .identity { gap: 7px; } .identity-text { font-size: 14px; } .mark { width: 28px; height: 38px; }
    .menu-toggle { font-size: 13px; padding: 9px 7px; }
    .eyebrow { font-size: 10px; letter-spacing: 1.4px; }
    .hero-visual { grid-template-columns: 95px minmax(0,1fr); }
    .fridge-illustration { transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }