:root{
--bg:#FBF7EF;--raised:#FFFFFF;--ink:#221E19;--ink-2:#57504A;--ink-3:#7A736B;
--rule:#E7E0D2;--accent:#0E7490;--accent-ink:#155E75;--rain:#2563EB;--sun:#CA8A04;--best:#15803D;
--band:#F2C879;--wash:0.10;
--ramp-0:#3B4E9E;--ramp-1:#4C7FC4;--ramp-2:#7FB3D9;--ramp-3:#B6D7C9;--ramp-4:#E8D48A;--ramp-5:#E8A44C;--ramp-6:#D96C36;--ramp-7:#B93A2B;--ramp-8:#7F1D1D;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
--t-instant:80ms linear;--t-quick:150ms cubic-bezier(.4,0,.2,1);--t-move:300ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){:root{
--bg:#171512;--raised:#201D19;--ink:#F0EAE0;--ink-2:#B8B0A4;--ink-3:#8C857B;
--rule:#332F29;--accent:#22D3EE;--accent-ink:#67E8F9;--rain:#60A5FA;--sun:#FACC15;--best:#4ADE80;
--band:#7A5A28;--wash:0.18;
--ramp-0:#5A6FBF;--ramp-1:#6B93D0;--ramp-2:#8FBFE0;--ramp-3:#9FCBBB;--ramp-4:#E0CB80;--ramp-5:#F0B45E;--ramp-6:#E4834B;--ramp-7:#E4543F;--ramp-8:#C0453A;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
font:400 1rem/1.65 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
font-feature-settings:"tnum";text-rendering:optimizeLegibility}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp-4)}
@media(min-width:768px){.wrap{padding:0 var(--sp-5)}}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:700;line-height:1.08;margin:0 0 var(--sp-4)}
h1{font-size:clamp(2.25rem,6vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.4vw,1.75rem);margin-top:var(--sp-7)}
h3{font-size:1.1875rem;font-weight:500;margin:var(--sp-5) 0 var(--sp-2)}
p{margin:0 0 var(--sp-4);max-width:62ch}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-ink)}
.meta{color:var(--ink-3);font-size:.8125rem}
.card{background:var(--raised);border:1px solid var(--rule);border-radius:12px;padding:var(--sp-5)}
.section{padding-block:var(--sp-8)}
@media(min-width:768px){.section{padding-block:var(--sp-9)}}
table{width:100%;border-collapse:collapse;font-size:.9375rem;margin:var(--sp-4) 0}
th,td{text-align:left;padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--rule)}
th{font-weight:600;font-size:.8125rem;color:var(--ink-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin:var(--sp-5) 0}
.stat{position:relative;background:var(--raised);border:1px solid var(--rule);border-radius:14px;
padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);overflow:hidden}
/* Each tile carries a colour chip keyed to the same temperature ramp as the
   chart and ribbon, so a glance ties the number to the rest of the page. */
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--chip,var(--accent))}
.stat b{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:2rem;line-height:1.05;margin-top:2px}
.verdict{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(1.75rem,5.5vw,2.75rem);
line-height:1.05;color:var(--best);margin:var(--sp-1) 0 var(--sp-4)}
.hero-card{background:var(--raised);border:1px solid var(--rule);border-radius:18px;
padding:var(--sp-5);box-shadow:0 6px 20px rgba(34,30,25,.06)}
@media (prefers-color-scheme:dark){.hero-card{box-shadow:0 6px 20px rgba(0,0,0,.45)}}
.chart{background:var(--raised);border:1px solid var(--rule);border-radius:14px;padding:var(--sp-4);margin:var(--sp-4) 0}
.climo{display:block;overflow:visible;max-width:760px;margin:0 auto}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;margin-top:var(--sp-2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
/* Month rows carry a wash of that month's ramp colour. Text sits on the row
   background, not on the swatch, so contrast never depends on the ramp stop. */
tr.mrow td:first-child{border-left:4px solid var(--chip,transparent);font-weight:600}
.micro-ribbon{max-width:84px;vertical-align:middle}
.input{width:100%;padding:var(--sp-4);font-size:1rem;font-family:inherit;color:var(--ink);
background:var(--raised);border:1px solid var(--rule);border-radius:6px}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:6px;
padding:var(--sp-3) var(--sp-5);font:600 1rem/1 Inter,sans-serif;cursor:pointer}
@media (prefers-color-scheme:dark){.btn{color:#221E19}}
footer{border-top:1px solid var(--rule);margin-top:var(--sp-8);padding:var(--sp-6) 0;color:var(--ink-3);font-size:.8125rem}
.desk{background:var(--raised);border:1px solid var(--rule);border-radius:12px;padding:var(--sp-5);margin:var(--sp-8) 0}
.desk ul{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-3)}
@media(min-width:768px){.desk ul{grid-template-columns:repeat(3,1fr)}}
.desk li{border:1px solid var(--rule);border-radius:8px;padding:var(--sp-4)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}