:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#101418;background:#fdfcf9;--ink:#101418;--muted:#505d63;--paper:#fdfcf9;--red:#ba1521;--field:#eeeee9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.skip{position:absolute;top:-80px;left:12px;z-index:10;padding:12px;background:#fff}
.skip:focus{top:12px}
.site-head{max-width:1376px;margin:auto;padding:25px clamp(20px,4vw,60px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-size:22px;font-weight:750;letter-spacing:-.04em;white-space:nowrap}
.brand-mark{width:50px;height:50px;object-fit:contain}
.site-head nav{display:flex;gap:36px;font-size:15px;font-weight:600}
.site-head nav a{text-decoration:none}
.site-head nav a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
main{max-width:1376px;margin:auto;padding:0 clamp(20px,4vw,60px)}
.intro{display:flex;align-items:end;justify-content:space-between;gap:32px;margin:65px 0 60px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(48px,6.5vw,96px);line-height:1.02;letter-spacing:-.065em;margin-bottom:22px;text-wrap:balance}
.lead{font-size:20px;line-height:1.55;max-width:38ch;margin:0}
.primary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 25px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.primary:hover{transform:translateY(-3px)}
.map-head,.gallery-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
h2{font-size:clamp(27px,3vw,42px);line-height:1.14;letter-spacing:-.045em;margin-bottom:0;text-wrap:balance}
.map-head p,.gallery-head p{max-width:38ch;font-size:15px;line-height:1.55;color:var(--muted);margin:0}
.map-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,.9fr);min-height:500px;background:var(--field);border-radius:24px;overflow:hidden}
.map-art{position:relative;min-height:500px;overflow:hidden}
.map-drawing{position:absolute;inset:0;width:100%;height:100%}
.map-drawing text{fill:#607078;font-size:23px;font-weight:700;paint-order:stroke;stroke:#eeeee9;stroke-width:7px}
.map-drawing .water-name{fill:#386880;stroke:#b8d9e8;font-size:20px}
.map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:1px solid #b5bbb9;border-radius:999px;background:#fff;color:var(--ink);padding:11px 17px;font-size:15px;font-weight:750;white-space:nowrap}
.map-pin[aria-pressed=true]{background:var(--red);color:#fff}
.map-pin:hover{transform:translate(-50%,-54%)}
.map-focus{padding:clamp(25px,3.2vw,50px);display:flex;flex-direction:column;justify-content:center;background:#e8e7e2}
.map-focus-kind{font-size:15px;color:var(--muted);margin-bottom:25px}
.map-focus h3{font-size:clamp(36px,4vw,59px);line-height:1.06;letter-spacing:-.055em;margin-bottom:25px}
.map-focus p:not(.map-focus-kind){font-size:17px;line-height:1.65;max-width:30ch}
.map-focus a{color:var(--red);font-weight:700;text-underline-offset:5px;margin:4px 0 35px}
.map-focus .map-disclaimer{font-size:14px!important;color:var(--muted);margin:0}
.gallery{padding-top:105px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.filters button{border:0;border-radius:999px;padding:11px 19px;min-height:44px;background:#eae9e4;color:var(--ink);font-weight:650}
.filters button[aria-pressed=true]{background:var(--red);color:#fff}
.filters button:hover{transform:translateY(-2px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{position:relative;border:0;padding:0;min-height:280px;overflow:hidden;background:#ddd9d0;text-align:left;color:#fff;border-radius:20px;isolation:isolate}
.card-large{grid-column:span 2;min-height:350px}
.card:last-child{grid-column:span 3;min-height:280px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.card:hover img,.card:focus-visible img{transform:scale(1.045)}
.card-copy{position:absolute;left:0;right:0;bottom:0;padding:17px 22px 20px;background:#101418bb;display:flex;flex-direction:column;gap:5px}
.card-copy span{font-size:14px;font-weight:650}
.card-copy strong{font-size:clamp(21px,2vw,30px);line-height:1.15;letter-spacing:-.03em}
.card[hidden]{display:none}
dialog{width:min(620px,calc(100% - 30px));border:0;border-radius:24px;padding:36px;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:#10141899}
dialog form{text-align:right}
.dialog-close{border:0;background:#eae9e4;border-radius:999px;min-height:44px;padding:8px 19px}
dialog h2{font-size:clamp(32px,4vw,52px);margin:10px 0 22px}
dialog p{font-size:17px;line-height:1.65}
#detail-kind{font-size:14px;color:var(--muted)}
#detail-caution{font-size:15px;color:var(--muted);margin-top:23px}
#detail-link{display:inline-flex;min-height:44px;align-items:center;color:var(--red);font-weight:700}
footer{max-width:1376px;margin:110px auto 0;padding:34px clamp(20px,4vw,60px) 65px;color:var(--muted);background:#eeeee9}
footer p{max-width:72ch;font-size:15px;line-height:1.6}
footer summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:650;color:var(--ink)}
footer ul{padding-left:22px;max-width:90ch;font-size:14px;line-height:1.8}
footer a{text-underline-offset:3px}
@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.intro h1,.lead,.primary,.map-section,.gallery-head,.filters,.card{animation:arrive .6s both cubic-bezier(.2,.8,.2,1)}
.lead{animation-delay:.08s}.primary{animation-delay:.16s}.map-section{animation-delay:.22s}.gallery-head{animation-delay:.3s}.filters{animation-delay:.36s}
.card:nth-child(1){animation-delay:.42s}.card:nth-child(2){animation-delay:.49s}.card:nth-child(3){animation-delay:.56s}.card:nth-child(4){animation-delay:.63s}.card:nth-child(5){animation-delay:.7s}.card:nth-child(6){animation-delay:.77s}
@media(max-width:860px){.site-head nav{gap:16px}.intro{display:block;margin:38px 0 47px}.primary{margin-top:22px}.map-layout{grid-template-columns:1fr}.map-art{min-height:390px}.map-focus{padding:26px 30px}.map-focus h3{font-size:38px;margin-bottom:12px}.map-focus p:not(.map-focus-kind){max-width:unset}.map-focus a{margin-bottom:17px}.map-focus-kind{margin-bottom:10px}.gallery{padding-top:70px}}
@media(max-width:600px){.site-head{align-items:start;padding-top:23px}.brand{font-size:18px}.brand-mark{width:40px;height:40px}.site-head nav{display:none}h1{font-size:clamp(43px,12vw,64px)}.lead{font-size:17px}.map-head,.gallery-head{display:block}.map-head p,.gallery-head p{margin-top:12px}.map-layout{border-radius:17px}.map-art{min-height:330px}.map-pin{font-size:13px;padding:9px 11px}.map-drawing text{display:none}.map-focus{padding:24px}.cards{grid-template-columns:1fr;gap:13px}.card,.card-large,.card:last-child{grid-column:auto;min-height:280px}.card-large{min-height:340px}.card-copy{padding:17px 20px}.gallery{padding-top:65px}footer{margin-top:75px}dialog{padding:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro h1,.lead,.primary,.map-section,.gallery-head,.filters,.card{animation:none}.card img{transition:none}.primary:hover,.filters button:hover,.map-pin:hover{transform:none}}