@font-face{font-family:Frank;src:url(/fonts/frank-700.ttf) format('truetype');
  font-weight:700;font-display:swap}
@font-face{font-family:Frank;src:url(/fonts/frank-400.ttf) format('truetype');
  font-weight:400;font-display:swap}
:root{
  --paper:#FBFAF7; --ink:#14181C; --ink2:#46505A; --muted:#79838D;
  --line:#E7E3DA; --line2:#D6D1C6; --card:#fff;
  --low:#0E6B52; --mid:#D9D6CE; --high:#B4442E; --wash:#F4F7F5;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink);overflow-x:hidden}
body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:Frank,Georgia,serif;font-weight:700;letter-spacing:-.015em}
.num{font-variant-numeric:tabular-nums}
a{color:var(--low)}
.wrap{max-width:800px;margin:0 auto;padding:0 24px}
.wrap.wide{max-width:1180px}

header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
  background:rgba(251,250,247,.93);backdrop-filter:blur(8px)}
header .wrap{display:flex;align-items:center;gap:18px;padding-top:16px;padding-bottom:16px}
.logo{font-family:Frank,serif;font-weight:700;font-size:21px;display:flex;align-items:center;
  gap:9px;text-decoration:none;color:var(--ink);flex:none}
.mark{width:22px;height:22px;background:#DA291C;border-radius:3px;position:relative;flex:none}
.mark:before,.mark:after{content:"";position:absolute;background:#fff}
.mark:before{width:11px;height:3.5px;left:5.5px;top:9.25px}
.mark:after{width:3.5px;height:11px;left:9.25px;top:5.5px}
.nav{display:flex;gap:9px;font-size:14.5px;align-items:center}
.nav a{color:var(--ink2);text-decoration:none;padding:7px 13px;border-radius:9px;
  border:1px solid transparent}
.nav a:hover{color:var(--ink);background:var(--wash)}
.nav a.key{border-color:var(--ink);color:var(--ink);font-weight:700}
.nav a.key:hover{background:var(--ink);color:var(--paper)}
.homechip{margin-left:auto;display:none;align-items:center;gap:8px;white-space:nowrap;flex:none;border:1px solid var(--line2);
  border-radius:100px;padding:4px 6px 4px 12px;font-size:13px;color:var(--ink2)}
.homechip.on{display:flex}
.homechip a{color:inherit;text-decoration:none;white-space:nowrap}
.homechip b{font-variant-numeric:tabular-nums;color:var(--ink)}
.homechip button{border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:15px;line-height:1;padding:2px 5px}

.crumb{font-size:13px;color:var(--muted);margin:26px 0 12px}
.crumb a{color:var(--muted)}
h1{font-size:clamp(29px,4.4vw,44px);line-height:1.1;margin-bottom:18px}
h2{font-size:clamp(20px,2.8vw,27px);margin:46px 0 12px}
h3{font-size:19px;margin:26px 0 8px}
p{color:var(--ink2);margin-bottom:14px}
.lede{font-size:18px;color:var(--ink2);margin-bottom:30px}
.cap{font-size:13px;color:var(--muted)}

.figure{margin:4px 0}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:8px}
.figure .val{font-family:Frank,serif;font-size:clamp(54px,11vw,104px);line-height:.9;
  font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  transition:color .5s ease;color:var(--low)}
.figure .unit{font-size:.26em;color:var(--muted);margin-left:.18em;letter-spacing:0}
.verdict{font-family:Frank,serif;font-size:clamp(18px,2.5vw,24px);line-height:1.4;
  margin:16px 0 4px;max-width:640px;color:var(--ink)}
.verdict em{font-style:normal;color:var(--high)}
.verdict em.good{color:var(--low)}
.small{font-size:14px;color:var(--muted);margin-bottom:24px}

.dial{border:2px solid var(--ink);border-radius:16px;padding:16px 20px 12px;margin:22px 0;
  background:var(--card);max-width:600px}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dhead label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
input[type=range]{width:100%;margin-top:10px;-webkit-appearance:none;height:22px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;
  border-radius:50%;background:var(--ink);margin-top:-7.5px;cursor:grab}
input[type=range]::-moz-range-track{height:2px;background:var(--line2)}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;
  background:var(--ink)}
.inc{display:flex;align-items:baseline;gap:5px}
.inc input{width:126px;font:700 26px/1 Frank,serif;font-variant-numeric:tabular-nums;
  border:0;border-bottom:2px solid var(--ink);background:transparent;text-align:right;padding:2px 0;
  color:var(--ink)}
.inc input:focus{outline:none;border-bottom-color:var(--low)}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:2px}

.move{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;
  margin:16px 0}
.movetop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:22px}
.side .l{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:5px}
.side .n{font-family:Frank,serif;font-size:20px;font-weight:700}
.side .v{font-family:Frank,serif;font-size:clamp(25px,4vw,36px);font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:4px;transition:color .5s ease}
.arrow{font-size:22px;color:var(--muted)}
.side select{margin-top:6px;font:inherit;font-size:14px;padding:5px 8px;
  border:1px solid var(--line2);border-radius:8px;background:#fff;max-width:100%}
.saving{border-top:1px solid var(--line);background:var(--wash);padding:20px 22px}
.saving .big{font-family:Frank,serif;font-size:clamp(27px,4.5vw,40px);font-weight:700;
  color:var(--low);font-variant-numeric:tabular-nums;line-height:1}
.saving .cmp{margin-top:8px;color:var(--ink2)}
.bars{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.chip{border:1px solid #C9DACF;background:#fff;border-radius:100px;padding:5px 13px;
  font-size:13.5px;color:var(--ink2)}
.chip b{color:var(--ink);font-variant-numeric:tabular-nums}
.pillrow{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px}
.pill{border:1px solid var(--line2);border-radius:100px;padding:4px 12px;font-size:13px;
  color:var(--ink2)}
.pill b{color:var(--ink);font-variant-numeric:tabular-nums}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px;
  margin:10px 0}
th{text-align:right;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:0 0 9px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
td{text-align:right;padding:10px 0;border-bottom:1px solid var(--line)}
tr.hl td{background:var(--wash);font-weight:600}
td a{color:var(--low);text-decoration:none;font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px;margin:16px 0}
.grid a{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  text-decoration:none;color:var(--ink);background:var(--card)}
.grid a:hover{border-color:var(--ink)}
.grid .n{font-size:12px;color:var(--muted);margin-top:2px}
.links{font-size:14px;line-height:2.1}
.links a{margin-right:14px;text-decoration:none}

.cta{border:2px solid var(--ink);border-radius:16px;padding:24px 26px;margin:38px 0}
.cta h3{font-size:20px;margin:0 0 8px}
.cta .flush{margin:0}
.btnrow{display:flex;gap:5px}
.mapwrap{position:relative}
.cta a{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:700;padding:12px 22px;border-radius:9px;margin-top:12px}

.bwrap{position:relative;margin:16px 0 4px}
.bwrap svg{width:100%;height:auto;display:block;overflow:visible;cursor:crosshair}
.bax{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:-18px}
.btip,.maptip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);
  font-size:12px;padding:5px 9px;border-radius:7px;transform:translate(-50%,-165%);
  white-space:nowrap;z-index:9}

.panel{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;
  min-width:0}
.phead{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;
  padding:12px 15px;border-bottom:1px solid var(--line)}
.phead h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0;font-family:inherit}
.btn{border:1px solid var(--line2);background:transparent;border-radius:7px;padding:5px 10px;
  font:600 12px/1.4 inherit;color:var(--ink2);cursor:pointer}
.btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
#map{display:block;width:100%;height:auto;background:var(--card)}
#map path{stroke:#fff;stroke-width:.9;stroke-linejoin:round;cursor:pointer;
  vector-effect:non-scaling-stroke;transition:fill .45s ease}
#map path.lake{fill:#EDF1F3;stroke:none;pointer-events:none}
#map path.sel{stroke:var(--ink);stroke-width:2.2;vector-effect:non-scaling-stroke}
.legend{display:flex;align-items:center;gap:9px;padding:10px 15px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted)}
.ramp{flex:1;height:7px;border-radius:4px;background:linear-gradient(90deg,var(--low),var(--mid),var(--high))}
.rows{max-height:540px;overflow:auto}
.row{display:flex;align-items:center;gap:11px;padding:9px 15px;cursor:pointer;
  border-bottom:1px solid var(--line)}
.row:hover{background:var(--wash)}
.row svg{width:36px;height:36px;flex:none}
.row .t{flex:1;min-width:0}
.row .t .n{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t .k{font-size:11.5px;color:var(--muted)}
.row .v{text-align:right;flex:none}
.row .v .a{font-weight:700;font-size:14px;color:var(--low);font-variant-numeric:tabular-nums}
.row .v .b{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.empty{padding:24px 15px;color:var(--muted);font-size:13.5px}
#loading{padding:50px 20px;text-align:center;color:var(--muted)}

details{border-top:1px solid var(--line);padding-top:16px;margin-top:36px}
summary{cursor:pointer;font-size:14px;color:var(--ink2);font-weight:600}
.src{font-size:13px;color:var(--muted);margin-top:12px}
footer{border-top:1px solid var(--line);margin-top:52px;padding:22px 0 80px;font-size:13px;
  color:var(--muted)}
footer a{color:var(--muted)}

@media(max-width:820px){
  .split{grid-template-columns:1fr}
  .rows{max-height:none}
}
@media(max-width:900px){
  .homechip{display:none!important}
}
@media(max-width:640px){
  .movetop{grid-template-columns:1fr;gap:10px}
  .arrow{transform:rotate(90deg);justify-self:start}
  .nav{display:none}
  .dial{position:sticky;bottom:0;z-index:20;box-shadow:0 -6px 20px rgba(0,0,0,.07)}
  .ticks{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}


/* Q&A */
.qa{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;
  margin:16px 0}
.qa details{border:0;border-top:1px solid var(--line);padding:0;margin:0}
.qa details:first-child{border-top:0}
.qa summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:Frank,Georgia,serif;
  font-weight:700;font-size:17px;color:var(--ink);display:flex;align-items:flex-start;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--wash)}
.qa summary:before{content:"+";color:var(--muted);font-family:inherit;font-weight:700;
  line-height:1.35;flex:none;transition:transform .18s}
.qa details[open] summary:before{content:"−"}
.qa .a{padding:0 20px 18px 44px;color:var(--ink2);font-size:15.5px}
.qa .a p{margin-bottom:10px}
.qa .a p:last-child{margin-bottom:0}
@media(max-width:640px){
  .qa summary{font-size:16px;padding:14px 16px}
  .qa .a{padding:0 16px 16px 38px}
}
