:root{--ink:#163554;--blue:#174c83;--bright:#1a5797;--soft:#eaf5ff;--line:#d9e8f4;--amber:#ffc75c;--muted:#4b647a;--card:#fff;--bg:#f8fbfe;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}body{margin:0}a{color:var(--blue);text-underline-offset:.23em}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,article:focus-visible{outline:3px solid #b85602;outline-offset:4px}.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}.top{background:#fff;border-bottom:1px solid var(--line)}.top .wrap,.top-note,.jump{display:flex;align-items:center}.top .wrap{min-height:59px;gap:18px}.wordmark{font-weight:950;letter-spacing:.07em;text-decoration:none;font-size:22px}.top-note{padding-left:18px;border-left:1px solid #d8e4ef;color:#4b647a;font-size:13px;font-weight:700}.jump{margin-left:auto;gap:8px;font-weight:800;text-decoration:none;font-size:13px;min-height:44px}
.hero{margin-top:23px;background:linear-gradient(142deg,#e5f3ff,#f1f8ff 57%,#e4f3ff);border:1px solid #d5e7f7;border-radius:27px;display:grid;grid-template-columns:.83fr 1.17fr;align-items:center;gap:8px;overflow:hidden;min-height:340px}.hero-text{padding:32px 0 32px 43px;position:relative;z-index:1}.hero-art{display:block;width:100%;height:auto;padding:5px 12px 5px 0}.overline{font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px;margin:0 0 12px}.overline span{display:block;background:var(--amber);width:25px;height:4px;border-radius:10px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(39px,5.9vw,75px);line-height:1.08;letter-spacing:-.05em;margin:0 0 15px;font-weight:950;color:#113f6b}h1 span{font-size:.73em;margin-left:.12em;color:#17609a;letter-spacing:-.05em}.hero-copy{font-size:clamp(14px,1.5vw,17px);font-weight:650;margin:0 0 17px}.button{display:inline-flex;align-items:center;text-decoration:none;gap:16px;justify-content:center;border-radius:100px;font-weight:800;min-height:44px;padding:8px 18px;font-size:14px}.main-button{color:white;background:var(--blue)}.main-button:hover{background:#0e3b68}
.route-intro{display:flex;justify-content:space-between;align-items:center;border-radius:15px;margin:15px 0 32px;padding:12px 17px;background:#fff;border:1px solid var(--line);gap:12px}.route-intro p{margin:0}.route-intro span{font-size:13px;color:var(--muted)}.route-intro a{font-size:13px;font-weight:800;flex:none}
section[id]{scroll-margin-top:15px}.section-heading{margin:0 0 15px}.badge{display:inline-block;border-radius:100px;background:#e0effc;color:#235773;padding:3px 11px;font-size:12px;font-weight:850;letter-spacing:.08em;margin:0 0 7px}.section-heading h2,.further h2{font-size:clamp(24px,4vw,34px);margin:0 0 4px;line-height:1.24}.section-heading>p:last-child,.further p:last-child{color:var(--muted);font-size:14px;margin-bottom:0}
.strip{position:relative;height:190px;overflow:hidden;border:1px solid #d2e7f7;border-radius:16px;background:repeating-linear-gradient(103deg,transparent 0 30px,#fff2 30px 57px),linear-gradient(90deg,#e4f2fd 0 33.3%,#f2f8ee 33.3% 66.6%,#e8f4fc 66.6% 100%)}.strip svg{position:absolute;bottom:0;left:0;width:100%;height:84%;pointer-events:none;overflow:visible}.map-road-edge,.map-road,.map-dash{fill:none;stroke-linecap:round;stroke-linejoin:round}.map-road-edge{stroke:#d0ad6c;stroke-width:32}.map-road{stroke:#fff7e6;stroke-width:28}.map-dash{stroke:#e9d2a4;stroke-width:2;stroke-dasharray:6 11}.map-labels{position:absolute;inset:9px 11px auto;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:12px;font-weight:850}.map-labels span:not(:last-child){border-right:1px dashed #a8c7dc}.pins{position:absolute;inset:16% 0 0}.pin{position:absolute;transform:translate(-50%, -50%);width:42px;height:42px;display:grid;place-items:center;border:2px solid white;color:white;border-radius:50%;background:var(--blue);text-decoration:none;font-weight:900;box-shadow:0 3px 10px #122c4830;z-index:2}.pin:hover,.pin:focus-visible{background:#a24b00;z-index:3}.pin.is-muted{opacity:.32}.hint{color:var(--muted);font-size:12px;margin:7px 2px 33px}
.filter-area{display:flex;flex-wrap:wrap;gap:12px 34px;padding:12px 15px 14px;border-radius:16px;border:1px solid var(--line);background:#fff}.filter-area fieldset{border:0;min-inline-size:0;margin:0;padding:0}.filter-area legend{color:var(--muted);font-size:12px;font-weight:800;margin:0 0 4px}.tabs{display:flex;flex-wrap:wrap;gap:6px}.tabs button{color:var(--blue);border:1px solid #bdd2e6;background:#fff;border-radius:35px;padding:5px 13px;font-size:13px;font-weight:750;min-height:37px;cursor:pointer}.tabs button[aria-pressed=true]{color:#fff;background:var(--blue);border-color:var(--blue)}.results{color:var(--muted);font-size:13px;margin:12px 0 8px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{min-width:0;border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:15px}.card:target,.card.picked{border-color:#1b5d9a;box-shadow:0 0 0 3px #cbe5fa}.card-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/8;overflow:hidden;background:linear-gradient(130deg,#e7f4ff,#fff3d9)}.card-media img{width:100%;height:100%;object-fit:cover;display:block}.card-media .pict{width:62px;height:62px;color:#26669d}.number{position:absolute;top:8px;left:8px;border-radius:50%;padding:0;width:32px;height:32px;display:grid;place-items:center;background:#174c83;color:#fff;font-size:15px;font-weight:900}.card-inner{padding:13px 15px 14px;display:flex;flex-direction:column;flex:1}.tags{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 8px}.tag{border-radius:5px;background:#edf5fd;color:#1d517b;font-size:11px;font-weight:750;padding:2px 7px}.tag.type{background:#fff4dc;color:#81500c}.card h3{font-size:19px;line-height:1.4;margin:0 0 4px}.product{font-size:15px;font-weight:750;margin-bottom:6px}.micro{font-size:13px;color:var(--muted);margin:0 0 7px}.modes{font-size:12px;color:#235773;margin:0 0 6px;font-weight:750}.card details{font-size:12px;color:var(--muted);margin:0 0 9px}.card summary{cursor:pointer}.card-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding-top:8px;border-top:1px solid #e5edf5;margin-top:auto;font-size:13px;font-weight:850}.card-links a{display:inline-flex;align-items:center;min-height:35px}.empty{grid-column:1/-1;padding:14px;background:white;border:1px solid var(--line);border-radius:14px}.further{margin-top:34px;border:1px solid var(--line);border-radius:17px;background:#fff;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;padding:17px}.feature{display:flex;flex-direction:column;background:var(--soft);padding:13px 14px;border-radius:12px;text-decoration:none}.feature span{font-size:13px;margin-top:4px}.note{margin:16px 0 30px;color:var(--muted);font-size:12px}footer{border-top:1px solid var(--line);background:#edf5fc}footer .wrap{display:flex;justify-content:flex-end;gap:12px;padding-block:16px;font-size:13px;font-weight:800}
@media(max-width:760px){.hero-text{padding-left:23px}.hero{min-height:0}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wrap{width:calc(100% - 24px)}.top .wrap{gap:10px;min-height:50px}.wordmark{font-size:18px}.top-note{font-size:11px;padding-left:9px}.jump{font-size:12px;gap:4px}.hero{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:12px;border-radius:19px}.hero-text{padding:16px 16px 0}.hero-art{padding:0 8px 6px;margin-top:3px}.overline{font-size:11px;margin-bottom:8px}h1{font-size:clamp(29px,8.5vw,43px);margin-bottom:9px;letter-spacing:-.06em}h1 br{display:none}.hero-copy{font-size:13px;margin-bottom:10px}.main-button{font-size:12px;min-height:39px}.route-intro{padding:9px 11px;margin-bottom:23px;align-items:flex-start;flex-direction:column;gap:4px}.route-intro strong{font-size:14px}.route-intro a{font-size:12px}.strip{height:155px}.map-labels{font-size:11px}.pin{width:32px;height:32px;font-size:12px}.card h3{font-size:17px}.card-inner{padding:10px 12px}.card-media{aspect-ratio:16/7}.cards{gap:10px}.further{grid-template-columns:1fr;margin-top:22px}.filter-area{gap:8px}.hint{margin-bottom:22px}}
@media(max-width:410px){.cards{grid-template-columns:1fr}.card-media{aspect-ratio:16/7.6}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Link treatment and helpful callout */
.route-quick{background:#e9f4ff;border:1px solid #d7e8f8;border-radius:100px;padding:6px 11px;text-decoration:none}.route-quick span{margin-inline-start:4px;color:inherit}
.pin.is-picked{background:#8a4905;box-shadow:0 0 0 4px #ffd78b,0 3px 9px #16355440}
.card-links a{border-radius:7px;padding:5px 8px;text-decoration:none;color:#174c83;background:#edf6fe;}
.card-links a:hover,.feature:hover{text-decoration:underline}
.card details a{display:inline-block;margin:.15rem .5rem 0 0}
.feature{display:grid;grid-template-columns:minmax(0,128px) minmax(0,1fr);align-items:center;gap:12px;padding:9px}
.feature img{width:100%;height:100%;min-height:70px;max-height:89px;object-fit:cover;border-radius:8px}
.feature .feature-text{display:grid;gap:3px;margin:0;padding-block:4px;font-size:inherit}
.feature .feature-text span{margin:0}
.listing-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;padding:15px 16px;margin:15px 0 29px;border:1px solid #d2e5f6;border-left:4px solid #2477b2;border-radius:12px;background:#eaf5ff;color:#244b6a}
.listing-note h2{font-size:15px;margin:0 0 2px;color:#173f65}
.listing-note p,.listing-note details{font-size:13px;margin:0;line-height:1.65}
.listing-note details{margin-top:5px}.listing-note summary{cursor:pointer}
.listing-icon{height:32px;width:32px;display:grid;place-items:center;background:#d4eafb;border-radius:50%;color:#226899}.listing-icon svg{height:20px;width:20px}
@media(max-width:520px){.route-intro .route-quick{display:none}.listing-note{padding:11px 12px;gap:8px}.feature{grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:9px}.feature strong{font-size:14px}.feature img{min-height:66px}.feature .feature-text span{font-size:11px}}
.wordmark{display:inline-flex;gap:5px;align-items:center}.brand-pin{width:22px;height:22px;color:#1a609b}
.hero-art{padding:0;margin:0;border-radius:14px;display:block;width:calc(100% - 12px)}
.pin{background:transparent;border:0;box-shadow:none;isolation:isolate;padding-bottom:3px}
.pin::before{content:"";position:absolute;inset:3px 3px 5px;z-index:-1;transform:rotate(-45deg);border-radius:52% 52% 52% 16%;background:#174c83;border:2px solid #fff;box-shadow:0 2px 6px #122c4829}
.pin:hover,.pin:focus-visible,.pin.is-picked{background:transparent;box-shadow:none}
.pin:hover::before,.pin:focus-visible::before,.pin.is-picked::before{background:#8a4905}
.pin.is-picked::before{box-shadow:0 0 0 3px #ffe1a5,0 2px 6px #122c4829}
@media(max-width:520px){.brand-pin{width:18px;height:18px}.hero-art{width:calc(100% - 16px);margin:7px 8px 8px;border-radius:12px}}

.route-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;position:relative}
.route-heading .tap-copy{margin:0;color:var(--muted);font-size:14px}
.tap-copy strong{font-weight:850;color:var(--blue)}
.route-finger{display:block;width:66px;height:auto;margin:0 18px -3px 0;transform-origin:55% 45%;pointer-events:none}
@keyframes route-finger-bounce{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:no-preference){.route-heading.animated-hint .route-finger{animation:route-finger-bounce 1.8s ease-in-out infinite}}
@media(max-width:520px){.route-heading{gap:7px}.route-finger{width:53px;margin-right:6px}.route-heading .tap-copy{font-size:13px}}
.card-links .official-link{color:#355d7d;background:#fff;border:1px solid #dbe8f3;font-weight:750}

/* Give existing feature photos more room without enlarging illustration placeholders on single-column screens. */
.card-media{aspect-ratio:3/2}
@media(max-width:410px){
  .card-media{aspect-ratio:16/7.6}
  .card-media:has(>img){aspect-ratio:4/3}
}

/* Full-bleed illustration: no inset image or separate colored title column. */
.hero.hero-full{display:block;min-height:0;padding:0;border:0;background:none;position:relative}
.hero.hero-full img{display:block;width:100%;height:auto;aspect-ratio:1200/630}
.hero-full .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
@media(max-width:520px){.hero.hero-full{border-radius:14px}.route-intro .route-quick{display:inline-flex;align-items:center;min-height:35px}}