/* Simplified homepage previews: calm, one job per screen. Builds on site.css (design D). */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.s-hero{padding-top:clamp(40px,7vw,96px)}
.s-hero h1{font-weight:900;font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-.035em;margin:0}
.s-lede{font-size:clamp(18px,1.5vw,21px);color:var(--mut);margin:14px 0 0}
.s1{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}.s1 .s-intro{position:sticky;top:40px;padding-top:12px}
.s-label{padding:18px 22px 12px}
.s-label .lb-cols,.s-label .lb-r{grid-template-columns:minmax(120px,1fr) repeat(var(--n,3),minmax(0,1.1fr))}
.s-label .lb-title{margin-top:14px}.s-label .lb-title span{font-size:12px}
.s-label .lb-r{padding:9px 0}.s-label .lb-k{font-weight:600}.s-label .lb-v{font-size:18px}
.s-label .lb-g{border-bottom:6px solid var(--ink)}.s-label .lb-g:last-of-type{border-bottom-width:6px}.s-label .s-more[hidden]{display:none}
.s-pick .s-nm{font-weight:800;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.01em;margin-top:2px}.s-pick .s-nm a{text-decoration:none}
.s-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;font-size:12px;color:var(--mut)}.s-foot a{color:var(--mut)}
.s-tog{font:700 14px var(--f);background:none;border:0;border-bottom:2px solid var(--spot);color:var(--ink);padding:4px 0;cursor:pointer}.s-tog:hover{color:var(--spot)}
.s-diff{margin:14px 0 0;font-size:15px;color:var(--mut);min-height:1.4em}.s-diff:not(:empty):before{content:"";display:inline-block;width:7px;height:7px;background:var(--spot);margin-right:9px;vertical-align:2px}
.s-sec{padding-top:clamp(64px,9vw,128px)}
.s-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:22px}
.s-h h2{margin:0;font-weight:900;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em}.s-h a{font-weight:700;text-decoration:none}.s-h a:hover{color:var(--spot)}
.strip{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scrollbar-width:thin}
.strip a,.shelf .sb{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;width:84px;font-size:12px;font-weight:600;text-align:center;line-height:1.2}
.btl.sh{width:30px;height:80px;margin:0;stroke-width:1.8;transition:transform .2s}
.strip a:hover .btl,.shelf .sb:hover .btl{transform:translateY(-4px);color:var(--spot)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:3px solid var(--ink)}
.tiles a{display:flex;flex-direction:column;gap:6px;padding:18px 18px 22px 0;text-decoration:none;border-bottom:1px solid var(--ink);height:100%;box-sizing:border-box}
.tiles li+li a{padding-left:18px;border-left:1px solid var(--ink)}
.tiles small{font:500 11px var(--m);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}.tiles b{font-size:clamp(19px,1.7vw,24px);font-weight:800;letter-spacing:-.015em}.tiles a:hover b{color:var(--spot)}
.s-ad .ad{min-height:90px;margin-top:clamp(56px,7vw,96px);border-color:#d3d1ca}
/* s2 shelf */
.s2{text-align:center}.s2 .s-lede{margin-bottom:clamp(28px,4vw,48px)}
.shelf{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:28px 8px;max-width:1040px}
.shelf .sb{margin:0 auto;background:none;border:0;padding:10px 4px;cursor:pointer;color:var(--ink);font-family:var(--f);border-radius:2px}
.shelf .btl.sh{width:36px;height:96px}
.shelf .sb[aria-pressed="true"]{color:var(--spot)}.shelf .sb[aria-pressed="true"] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.shelf .sb[aria-pressed="true"] .btl{transform:translateY(-6px)}
.shelf .sb:focus-visible{outline:2px solid var(--spot);outline-offset:2px}
.s2-l{max-width:900px;margin:0 auto;padding-top:clamp(40px,5vw,64px)}
/* s3 big picker */
.s3{text-align:center}
.ask{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin:clamp(24px,3vw,40px) auto 0}
.ask-s{position:relative;border-bottom:4px solid var(--spot)}
.ask-s select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:900 clamp(30px,4.4vw,60px)/1.1 var(--f);letter-spacing:-.03em;color:var(--ink);padding:0 4px 4px;cursor:pointer;text-align:center;text-align-last:center}
.ask-s select:focus-visible{outline:2px solid var(--spot);outline-offset:4px}
.ask-vs{font:500 clamp(16px,1.6vw,22px) var(--m);color:var(--mut)}
.ask-3{border-bottom:2px dashed #c9c7c0}.ask-3 select{font-size:clamp(16px,1.6vw,22px);font-weight:600;color:var(--mut)}
.chips{list-style:none;padding:0;margin:clamp(22px,3vw,34px) 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.chips a{display:block;padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-size:14px;font-weight:600}.chips a:hover{background:var(--ink);color:var(--bg,#f2f0ea)}
.s3-l{max-width:900px;margin:0 auto;padding-top:clamp(40px,5vw,64px)}
/* short footer */
.ft-s .fs-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.ft-s nav{display:flex;gap:22px;flex-wrap:wrap}.ft-s nav a{display:inline;margin:0;font-weight:600}.ft-s .fine{margin-top:14px}
@media(max-width:980px){.s1{grid-template-columns:1fr}.s1 .s-intro{position:static}.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}.tiles{grid-template-columns:1fr 1fr}.tiles li:nth-child(3) a{padding-left:0;border-left:0}}
@media(max-width:640px){.s-hero h1{font-size:44px}.s-label{padding:12px 12px 8px}
 .s-label .lb-cols{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}.s-label .lb-r{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}.s-label .lb-k{grid-column:1/-1;font-size:12px;color:var(--mut)}.s-label .lb-v{font-size:15px}.s-label .lb-r{padding:6px 0}
 .s-pick .s-nm{font-size:15px}.strip a{width:68px}.shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 4px}.shelf .sb{width:auto;font-size:11px}.shelf .btl.sh{width:28px;height:76px}
 .tiles{grid-template-columns:1fr}.tiles a,.tiles li+li a{padding:16px 0;border-left:0}.ask{flex-direction:column;align-items:center}.ask-s select{font-size:40px}}
@media(min-width:641px){.strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:26px 8px;overflow:visible}.strip a{margin:0 auto}}
@media(max-width:640px){.strip{margin-right:-20px;padding-right:20px}}
@media(max-width:640px){.ask-3 select{font-size:18px}}
/* S2 spacing tightened (2026-10-25): label header visible in the first 1280x800 / 1440x900 view */
.s2{padding-top:clamp(22px,3vw,40px)}.s2 h1{font-size:clamp(40px,5.4vw,78px)}
.s2 .s-lede{margin:10px 0 clamp(16px,2vw,26px)}
.shelf{gap:14px 8px}.shelf .sb{padding:6px 4px}.shelf .btl.sh{width:32px;height:84px}
.s2-l{padding-top:clamp(18px,2.2vw,30px)}
@media(max-width:640px){.s2{padding-top:20px}.s2 h1{font-size:38px}.s2 .s-lede{margin:8px 0 16px}.shelf{gap:10px 4px}.shelf .sb{padding:4px 2px}.shelf .btl.sh{width:24px;height:64px}.s2-l{padding-top:18px}}

/* S2 shelf with many brands (2026-10-25): 16 featured, rest behind "All N waters"; a selected hidden bottle stays visible */
.shelf:not(.open) li.x:not(.on){display:none}
.shelf-more{margin:clamp(10px,1.4vw,18px) auto 0;display:inline-block;background:none;border:0;border-bottom:1.5px solid currentColor;padding:2px 0;font:600 13px var(--f);color:var(--ink);cursor:pointer}
.shelf-more:hover{color:var(--spot)}.shelf-more:focus-visible{outline:2px solid var(--spot);outline-offset:3px}