:root{--ink:#263035;--muted:#56646a;--paper:#eef1ef;--card:#fff;--line:#d3d9d6;--lake:#2f6c78;--prime:#1e6b55;--good:#4f8794;--quiet:#8b918e;--storm:#b23f1c;--anytime:#6d5f8d;--building:#b97a14;--unk:#a7adaa}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--lake);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--lake);outline-offset:2px}
.site-header{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:space-between;padding:.8rem 20px;background:var(--ink)}
.site-header a{color:#eef3f1;text-decoration:none}
.site-name{font-weight:800}
.site-nav{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.92rem}
main{max-width:1000px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{padding:2rem 0 .4rem}
h1{font-size:clamp(2.1rem,6.4vw,3.6rem);line-height:1.02;letter-spacing:-.025em;font-weight:850;margin:0 0 .8rem;max-width:20ch}
h2{font-size:clamp(1.35rem,3.6vw,1.8rem);line-height:1.2;letter-spacing:-.01em;margin:2.4rem 0 .6rem}
h3{font-size:1.12rem;line-height:1.25;margin:0}
.lede{font-size:1.1rem;max-width:64ch;margin:0 0 .6rem}
.byline{font-size:.88rem;color:var(--muted);margin:0}
.section-lede{max-width:66ch;color:var(--muted);margin:0 0 1rem}

/* The answer: the one loud thing on the page */
.answer{margin:1.4rem 0 0}
.answer-text{font-size:clamp(1.25rem,3.4vw,1.7rem);line-height:1.3;font-weight:650;margin:0 0 1rem;max-width:40ch;border-left:6px solid var(--unk);padding:.1rem 0 .1rem .9rem}
.answer-text[data-code="PRIME"]{border-color:var(--prime)}
.answer-text[data-code="STORM"]{border-color:var(--storm)}
.answer-text[data-code="GOOD"]{border-color:var(--good)}
.answer-text[data-code="QUIET"]{border-color:var(--quiet)}
.answer-text a{color:inherit}
.filters{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;margin:0 0 .9rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips button{font:inherit;font-size:.9rem;font-weight:600;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:.4rem .85rem;min-height:40px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.toggle{font-size:.92rem;display:flex;gap:.45rem;align-items:center;min-height:40px;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--lake)}
.map{height:380px;border-radius:10px;border:1px solid var(--line);background:#dfe7e6}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1rem;padding:0;margin:.5rem 0 0;font-size:.84rem;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:.35rem}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--unk);border:2px solid #fff;box-shadow:0 0 0 1px #0002}
.dot.PRIME,.pin.PRIME{background:var(--prime)}.dot.GOOD,.pin.GOOD{background:var(--good)}.dot.QUIET,.pin.QUIET{background:var(--quiet)}
.dot.STORM,.pin.STORM{background:var(--storm)}.dot.ANYTIME,.pin.ANYTIME{background:var(--anytime)}.dot.BUILDING,.pin.BUILDING{background:var(--building)}
.pin{width:18px;height:18px;border-radius:50%;background:var(--unk);border:3px solid #fff;box-shadow:0 1px 3px #0005}
.pin.nps{outline:2px dashed #fff;outline-offset:1px}

/* Beach list */
#beachList{display:grid;gap:.9rem}
.beach{background:var(--card);border:1px solid var(--line);border-left:7px solid var(--unk);border-radius:8px;padding:1rem 1.1rem}
.beach[data-code="PRIME"]{border-left-color:var(--prime)}.beach[data-code="GOOD"]{border-left-color:var(--good)}
.beach[data-code="QUIET"]{border-left-color:var(--quiet)}.beach[data-code="STORM"]{border-left-color:var(--storm)}
.beach[data-code="ANYTIME"]{border-left-color:var(--anytime)}.beach[data-code="BUILDING"]{border-left-color:var(--building)}
.beach[hidden]{display:none}
.beach-top{display:grid;grid-template-columns:1fr auto;gap:0 1rem;align-items:baseline}
.where{grid-column:1;margin:.1rem 0 0;font-size:.88rem;color:var(--muted)}
.verdict{grid-column:2;grid-row:1/span 2;margin:0;font-weight:750;font-size:.95rem;text-align:right;color:var(--muted)}
.beach[data-code="PRIME"] .verdict{color:var(--prime)}.beach[data-code="STORM"] .verdict{color:var(--storm)}
.beach[data-code="GOOD"] .verdict{color:var(--good)}.beach[data-code="BUILDING"] .verdict{color:var(--building)}.beach[data-code="ANYTIME"] .verdict{color:var(--anytime)}
.reading{margin:.6rem 0 .5rem;max-width:72ch}
.reading strong{display:block;font-size:1.05rem}
.strip{margin:.4rem 0}
.strip svg{display:block;width:100%;height:48px;border-bottom:1px solid var(--line)}
.strip-axis{position:relative;height:1.2rem;font-size:.75rem;color:var(--muted)}
.strip-axis span{position:absolute;top:.1rem}
.strip-axis span:first-child{left:0}.strip-axis span:last-child{right:0}
.strip-axis span:nth-child(2){transform:translateX(-50%);font-weight:700;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem 1.4rem;margin:.5rem 0;font-size:.9rem}
.facts div{display:block}
.facts dt{color:var(--muted);font-size:.8rem}
.facts dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.notes{margin:.3rem 0;padding-left:1.1rem;font-size:.9rem}
.notes:empty{display:none}
.notes li.alert{color:var(--storm);font-weight:600}
.stones{font-size:.9rem;margin:.5rem 0 .2rem;color:var(--ink)}
.stones:before{content:"Stones: ";color:var(--muted)}
.rule{font-size:.88rem;margin:.2rem 0 .3rem;color:var(--muted)}
.rule strong{color:var(--ink)}
.rule-nps strong{color:var(--storm)}
details{margin-top:.3rem}
summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--lake);min-height:32px;display:flex;align-items:center}
details p{font-size:.92rem;margin:.4rem 0;max-width:72ch}
.links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:1rem}

/* Supporting sections */
.method p,.rules p{max-width:68ch}
.steps{padding-left:1.3rem;max-width:68ch}
.steps li{margin:.5rem 0}
.stone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem 2rem}
.stone-grid article{border-top:3px solid var(--ink);padding-top:.6rem}
.stone-grid p{font-size:.95rem;margin:.4rem 0 0}
.rules ul,.related ul{padding-left:1.2rem;max-width:68ch}
.rules li,.related li{margin:.45rem 0}
.source{font-size:.88rem;color:var(--muted)}
.faq details{border-top:1px solid var(--line);padding:.5rem 0}
.faq summary{color:var(--ink);font-size:1rem}
.faq details p{color:var(--muted)}
.site-footer{max-width:1000px;margin:3rem auto 0;padding:1.4rem 20px 2rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.site-footer p{margin:.3rem 0}
.site-footer a{margin-right:.8rem}
@media (max-width:560px){
  .beach-top{grid-template-columns:1fr}
  .verdict{grid-column:1;grid-row:auto;text-align:left;margin-top:.3rem}
  .map{height:300px}
}