:root{--hh-pink:#D1135F;--hh-pink-ink:#D1135F;--hh-orange:#FF7A3C;--hh-gold:#FFC24B;--hh-purple-900:#2A0F3A;--hh-purple-050:#F5F3FF;--hh-white:#FFFFFF;--hh-ink:#2A0F3A;--hh-ink-muted:#665A70;--hh-surface:#FFFFFF;--hh-surface-warm:#FFF9F3;--hh-border:rgba(42,15,58,.14);--hh-focus:#05BDF9;--hh-success:#16845B;--hh-success-ink:#16845B;--hh-ink-on-brand:#2A1B3D;--hh-error:#B4233E;--volume-1:#2A1B3D;--volume-2:#0E3E2C;--volume-3:#421728;--volume-4:#45101E;--volume-5:#3B1B4A;--v3-derby-crimson:#A32638;--v3-blue-ridge-slate:#3D5A73;--v3-carolina-surf:#0E7C86;--v3-peach-clay:#C0662E;--v3-mardi-gras-violet:#5B3A8E;--v4-motor-chrome:#56718F;--v4-boardwalk-taffy:#B03A6E;--v4-blue-crab:#2A6FAD;--v4-maple-foliage:#C25A1B;--v4-acadia-spruce:#33635A;--v5-gateway-prairie:#6E7C1F;--v5-tornado-slate:#50596B;--v5-mile-high-sky:#2C87C8;--v5-fiesta-rose:#C74968;--v5-hibiscus:#C2277B;--shadow:0 10px 28px rgba(42,15,58,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--hh-surface-warm);color:var(--hh-ink);font-family:Poppins,system-ui,sans-serif;line-height:1.6}img{max-width:100%}a{color:inherit}button,input,select{font:inherit}button,.button,.site-header a,.site-footer a{min-block-size:44px}:focus-visible{outline:3px solid var(--hh-focus)!important;outline-offset:3px}.eyebrow{display:block;color:var(--hh-pink-ink);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1,h2,h3,p{margin-block-start:0}h1,h2{font-family:'Luckiest Guy',Poppins,sans-serif;letter-spacing:.01em;line-height:1.05}h2{font-size:clamp(1.8rem,5vw,2.7rem)}.button{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--hh-purple-900);border-radius:12px;padding:.75rem 1.25rem;text-align:center;text-decoration:none;font-weight:800}.button--primary{border-color:var(--hh-pink);background:var(--hh-pink);color:#fff;box-shadow:0 4px 0 #990E45}.button--secondary{background:var(--hh-paper-raised);color:var(--hh-atlas-ink)}.button--dark{background:var(--hh-purple-900);color:#fff}.site-header{position:relative;z-index:1200;display:flex;align-items:center;gap:16px;min-height:84px;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--hh-border);background:#fff}.site-logo{display:flex;margin-right:auto}.site-logo img{block-size:56px;inline-size:auto;object-fit:contain}.desktop-nav{display:flex;gap:20px}.desktop-nav a{display:flex;align-items:center;text-decoration:none;font-weight:700}.menu-trigger{display:none;place-items:center;width:44px;border:0;border-radius:12px;background:var(--hh-purple-050);text-decoration:none}.menu-trigger{background:var(--hh-purple-900);color:#fff}.site-footer{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:32px clamp(16px,5vw,64px);border-top:1px solid var(--hh-border);background:#fff}.site-footer img{width:130px}.site-footer nav{display:flex;justify-content:flex-end;gap:20px}.site-footer nav a{display:flex;align-items:center;font-weight:700}.site-footer p{grid-column:1/-1;margin:0;color:var(--hh-ink-muted);font-size:.8rem}
.atlas-grid{background-color:#fff9f3;background-image:linear-gradient(rgba(42,15,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(42,15,58,.05) 1px,transparent 1px);background-size:24px 24px}.hub-hero{position:relative;display:grid;grid-template-columns:minmax(0,720px) 1fr;min-height:500px;padding:64px clamp(16px,8vw,110px);overflow:hidden}.hub-hero__copy{position:relative;z-index:1}.hub-hero h1{max-width:760px;margin:20px 0 16px;font-size:clamp(3.2rem,7.4vw,6.5rem);text-transform:uppercase;text-shadow:3px 3px 0 rgba(209,19,95,.16)}.hub-hero p{max-width:620px;color:var(--hh-ink-muted);font-size:1.15rem}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.hub-hero__route{display:flex;align-items:center;justify-content:center;gap:10px;opacity:.65;transform:rotate(-13deg)}.hub-hero__route i{width:220px;border-top:5px dashed var(--hh-orange)}.hub-hero__route span{display:grid;place-items:center;width:54px;height:54px;border:5px solid #fff;border-radius:50%;background:var(--hh-pink);color:#fff;font-weight:800;box-shadow:var(--shadow)}
.hub-discovery{position:relative;padding:32px clamp(16px,5vw,64px) 40px;background:#f3edda}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px}.section-heading h2{margin:.25rem 0}.hub-status{color:var(--hh-ink-muted);font-size:.8rem}.hub-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.hub-filters fieldset{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:4px 8px;border:1px solid var(--hh-border);border-radius:12px;background:#fff}.hub-filters legend{font-size:.7rem;font-weight:800;text-transform:uppercase}.hub-filters label{display:inline-flex;align-items:center;gap:4px;min-block-size:44px;font-size:.78rem}.hub-filters button{border:1px solid var(--hh-border);border-radius:12px;background:#fff;padding:0 14px}.hub-map{min-block-size:min(64vh,620px);border:1px solid var(--hh-border);border-radius:24px;background:#eae2c8;box-shadow:var(--shadow);overflow:hidden}.ref-dot__wrap{background:none;border:0}
.ref-dot{display:flex;align-items:center;justify-content:center;inline-size:20px;block-size:20px;border-radius:50%;background:var(--ref-color);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(42,27,61,.35)}
.ref-dot svg{inline-size:13px;block-size:13px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.map-legend{position:absolute;z-index:500;left:12px;bottom:12px;display:flex;gap:14px;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:var(--shadow);font-size:.7rem}.map-legend span{display:flex;align-items:center;gap:4px}.map-legend i{width:9px;height:9px;border-radius:50%;background:var(--hh-orange)}.map-legend .selected{background:var(--hh-pink)}.map-legend .visited{background:var(--hh-success)}.map-legend .soon{background:#aaa}.hub-results-wrap{margin-top:16px}.hub-results-wrap summary{min-height:44px;font-weight:800}.hub-results ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;list-style:none;padding:0}.hub-results button{display:grid;width:100%;min-block-size:56px;padding:10px;border:1px solid var(--hh-border);border-radius:12px;background:#fff;text-align:left}.hub-results span{font-size:.75rem;color:var(--hh-ink-muted)}
.hub-card{position:fixed;z-index:1100;right:24px;bottom:24px;width:min(370px,calc(100% - 32px));padding:24px;border:1px solid var(--hh-border);border-radius:18px;background:#fff9f3;box-shadow:0 20px 50px rgba(42,15,58,.28);animation:card-in .2s ease-out}.hub-card[hidden]{display:none}.hub-card [data-close-card]{float:right;width:44px;border:0;border-radius:12px;background:var(--hh-purple-050);font-size:1.5rem}.hub-card h2{max-width:calc(100% - 50px);margin:10px 0 2px;font-family:Poppins,sans-serif;font-size:1.45rem}.hub-card>article>p:first-of-type,.hub-card__label{display:inline-flex;border-radius:999px;background:var(--hh-orange);color:#fff;padding:5px 9px;font-size:.7rem;font-weight:800}.hub-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.hub-card__actions a{display:flex;align-items:center;justify-content:center;min-block-size:48px;border:1px solid var(--hh-border);border-radius:12px;text-align:center;text-decoration:none;font-size:.8rem;font-weight:800}.hub-card__actions .hub-card__primary{grid-column:1/-1;border-color:var(--hh-pink);background:var(--hh-pink);color:#fff}.hub-weather{min-height:76px;margin:10px 0;color:var(--hh-ink-muted);font-size:.75rem}.hub-weather:empty{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.hub-weather:empty::after{content:"";grid-column:1/-1;height:72px;border-radius:10px;background:linear-gradient(90deg,#eee 25%,#fafafa 40%,#eee 60%);background-size:300% 100%;animation:weather-shimmer 1.6s infinite}.hub-weather__days{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.hub-weather__days span{padding:6px;border:1px solid var(--hh-border);border-radius:9px;background:#fff;text-align:center}.hub-weather__days strong{display:block}.hub-weather__current{margin-bottom:5px}
.hub-browse,.hub-promo{padding:56px clamp(16px,8vw,110px)}.hub-browse{background:#fff}.guide-route{position:relative;max-width:780px}.guide-route::before{content:"";position:absolute;left:25px;top:25px;bottom:30px;border-left:3px dashed var(--hh-orange)}.guide-route article{position:relative;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:16px 0}.guide-route article>b{z-index:1;display:grid;place-items:center;width:52px;height:52px;border:4px solid #fff;border-radius:50%;background:var(--hh-pink);color:#fff;box-shadow:0 0 0 1px var(--hh-border)}.guide-route article:nth-child(2)>b{background:var(--hh-orange);color:var(--hh-ink-on-brand)}.guide-route article:nth-child(3)>b{background:var(--hh-gold);color:var(--hh-ink-on-brand)}.guide-route span{color:var(--hh-pink-ink);font-size:.72rem;font-weight:800;text-transform:uppercase}.guide-route h3{margin:.25rem 0;font-size:1.25rem}.guide-route p{color:var(--hh-ink-muted)}.hub-promo--game{background:var(--hh-purple-050)}.hub-promo--books{background:#fff7ed}.book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px}.book-grid>*{display:grid;gap:8px;padding:20px;border:1px solid var(--hh-border);border-radius:18px;background:#fff;text-decoration:none}.book-grid small{width:max-content;border-radius:999px;background:#dff6e9;padding:4px 8px;font-size:.65rem;font-weight:800;text-transform:uppercase}
.hub-marker-wrap{background:transparent;border:0}.hub-marker{position:relative;display:grid;place-items:center;inline-size:34px;block-size:34px;border:3px solid var(--pin-color);border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#fff;color:var(--pin-color);box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .18s}.hub-marker svg{inline-size:19px;block-size:19px;fill:currentColor;transform:rotate(45deg)}.leaflet-marker-icon:focus .hub-marker,.leaflet-marker-icon:hover .hub-marker{transform:rotate(-45deg) scale(1.15);box-shadow:0 0 0 8px rgba(209,19,95,.2)}.hub-marker[data-kind="national-park"]{border-style:double;border-width:5px}.hub-marker[data-kind="monument"]{border-radius:2px}.hub-marker[data-kind="museum"]{border-radius:20% 20% 45% 45%}.hub-marker[data-kind="landmark"]{border-radius:50%}.hub-marker[data-kind="roadside-attraction"]{border-style:dashed}.hub-cluster{display:grid;place-items:center;inline-size:46px;block-size:46px;border:4px double var(--volume-1);border-radius:50%;background:#fff;color:var(--volume-1);font-weight:800}.hub-visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.article-hero{position:relative;min-height:220px;padding:40px clamp(16px,8vw,110px);overflow:hidden;background:linear-gradient(135deg,var(--volume-1),#5b355f 60%,var(--hh-orange));color:#fff}.article-hero__inner{position:relative;z-index:2;max-width:1180px;margin:auto}.article-hero--illustrated{display:flex;align-items:flex-end;min-height:clamp(360px,31vw,520px);padding-block:44px;background:#69caef}.article-hero--illustrated::after{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(22,13,31,.74) 0%,rgba(22,13,31,.52) 50%,rgba(22,13,31,.42) 100%),linear-gradient(0deg,rgba(22,13,31,.58),transparent 62%);content:""}.article-hero__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.article-hero--illustrated .article-hero__inner{width:100%;text-shadow:0 2px 8px rgba(18,11,25,.72)}.article-hero--illustrated h1{max-width:760px}.route-chip,.article-state{display:inline-flex;margin:0 8px 12px 0;border-radius:999px;padding:7px 11px;background:var(--hh-pink);font-size:.72rem;font-weight:800;text-transform:uppercase}.article-state{background:rgba(255,255,255,.14)}.article-hero h1{margin:10px 0 8px;font-size:clamp(2.3rem,5.4vw,4.4rem);text-transform:uppercase;text-wrap:balance}.article-hero p{max-width:680px;font-size:1.15rem}.article-layout{display:grid;grid-template-columns:minmax(0,740px) 260px;gap:48px;max-width:1120px;margin:auto;padding:48px clamp(16px,4vw,32px)}.article-section{scroll-margin-top:90px;margin-bottom:52px}.article-section>header{display:flex;align-items:center;gap:10px;border-bottom:2px dotted rgba(209,19,95,.5);margin-bottom:18px}.article-section>header>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--hh-pink);color:#fff;font-weight:800}.article-section>header h2{margin:0;font-size:1.75rem}.article-section>header small{margin-left:auto;font-weight:800;text-transform:uppercase}.fast-facts-band dl,.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.fast-facts-band dl div,.plan-grid div{padding:12px 0;border-bottom:1px solid var(--hh-border)}dt{color:var(--hh-pink-ink);font-size:.68rem;font-weight:800;text-transform:uppercase}dd{margin:3px 0;font-weight:700}.character-callout{margin:24px 0;border-left:4px solid var(--hh-orange);background:#fff1df;padding:16px}.stop-list article{display:grid;grid-template-columns:32px 1fr;gap:12px;margin:18px 0}.stop-list article>b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--hh-purple-900);color:#fff}.stop-list h3{margin:0}.atlas-list p{padding:12px;border-left:3px solid var(--hh-orange);background:var(--hh-paper-raised);color:var(--hh-atlas-ink)}.road-sign{margin:24px 0;border:4px double #fff;border-radius:18px;background:var(--hh-orange);color:var(--hh-ink-on-brand);padding:22px;box-shadow:0 0 0 3px var(--hh-orange)}.road-sign b{font-size:.72rem;text-transform:uppercase}.mini-game-shell{overflow:hidden;border-radius:24px;background:var(--hh-purple-900);color:#fff;box-shadow:var(--shadow)}.mini-game__intro,.mini-game__play,.mini-game__result{padding:28px}.mini-game-shell h3{font-family:'Luckiest Guy';font-size:2rem;line-height:1.1}.mini-game-shell button,.mini-game-shell a{min-height:48px}.mini-game__intro>button,.mini-game__play>[data-game-action],.mini-game__result>a{display:flex;align-items:center;justify-content:center;width:100%;margin-top:18px;border:0;border-radius:12px;background:var(--hh-orange);color:var(--hh-ink-on-brand);text-decoration:none;font-weight:800}.mini-game__intro small{display:block;margin-top:10px;text-align:center;color:rgba(255,255,255,.65)}.mini-game__chip,.mini-game__progress span{display:inline-flex;border-radius:999px;background:rgba(255,255,255,.1);padding:7px 10px;font-size:.7rem;font-weight:800;text-transform:uppercase}.mini-game__progress{display:flex;justify-content:space-between;gap:12px}.mini-game__bar{height:8px;margin:14px 0 24px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.14)}.mini-game__bar i{display:block;height:100%;background:var(--hh-gold)}.mini-game__answers{display:grid;gap:10px}.mini-game__answer{position:relative;display:flex;align-items:center;gap:6px;min-height:48px;border:2px solid transparent;border-radius:12px;background:#fff;color:var(--hh-ink-on-brand);padding:12px;text-align:left;font-weight:700}.mini-game__answer b{margin-left:auto}.mini-game__answer:hover{border-color:var(--hh-gold)}.mini-game__answer.is-correct{border-color:#4fc394;background:#e8fff5;color:#105a40}.mini-game__answer.is-wrong{border-color:#d9536c;background:#fff0f3;color:#8d1e35}.mini-game__answer.is-disabled{opacity:.55}.mini-game__verdict{font-weight:800}.mini-game__verdict.is-correct{color:#82e0ba}.mini-game__verdict.is-wrong{color:#ff9faf}.mini-game__explanation{border-left:4px solid var(--hh-gold);background:rgba(255,255,255,.1);padding:12px}.mini-game__result{text-align:center}.mini-game__result>a:last-child{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff}.mini-game__error{margin-top:16px;color:#ffb3c0}.mini-game__error button{margin-left:8px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit}.article-rail{align-self:start;position:sticky;top:24px}.article-rail nav,.article-rail__weather{margin-bottom:20px;border:1px solid var(--hh-border);border-radius:18px;background:#fff;padding:18px;box-shadow:var(--shadow)}.article-rail ol{list-style:none;padding:0}.article-rail a{display:flex;align-items:center;min-height:44px;border-radius:10px;padding:0 8px;text-decoration:none;font-size:.8rem;font-weight:700}.article-rail a:hover{background:var(--hh-surface-warm)}.article-rail__weather{border-style:dashed;border-color:var(--hh-orange);box-shadow:none}.article-rail__weather p{margin:5px 0;font-size:.75rem}.full-road-trip{margin-top:64px;border-radius:24px;background:var(--hh-pink);color:#fff;padding:32px;box-shadow:var(--shadow)}.full-road-trip .eyebrow{color:#fff}.full-road-trip .button{background:#fff;color:var(--hh-ink-on-brand)}

@keyframes card-in{from{opacity:0;transform:translateY(8px)}}@keyframes weather-shimmer{to{background-position:-300% 0}}
@media (max-width:767px){.desktop-nav{display:none}.menu-trigger{display:grid}.site-header{min-height:76px;padding:10px 16px}.site-logo img{block-size:44px;inline-size:auto}.hub-hero{display:block;min-height:auto;padding:34px 16px 20px}.hub-hero h1{font-size:3rem}.hub-hero p{font-size:1rem}.hero-actions{display:grid}.hub-hero__route{display:none}.hub-discovery{padding:28px 16px 34px}.section-heading{display:block}.hub-filters{max-height:114px;overflow:auto}.hub-map{min-block-size:52vh;border-radius:18px}.map-legend{position:static;justify-content:space-between;gap:5px;margin-top:8px;padding:7px;font-size:.58rem}.hub-card{right:8px;bottom:max(8px,env(safe-area-inset-bottom));left:8px;width:auto;max-height:min(78vh,680px);overflow:auto;padding:24px 20px calc(20px + env(safe-area-inset-bottom));border-radius:18px 18px 12px 12px;animation:sheet-in .28s ease-out}.hub-card::before{content:"";display:block;width:42px;height:4px;margin:-12px auto 8px;border-radius:999px;background:var(--hh-border)}.hub-browse,.hub-promo{padding:44px 16px}.book-grid{grid-template-columns:1fr 1fr}.site-footer{display:block;padding:28px 16px}.site-footer img{width:110px}.site-footer nav{justify-content:flex-start;flex-wrap:wrap;margin-top:18px;gap:8px 18px}.article-hero{min-height:320px;padding:42px 16px}.article-hero h1{font-size:3.5rem}.article-layout{display:flex;flex-direction:column;padding:36px 16px}.article-content{order:1}.article-rail{position:static;order:2}.fast-facts-band dl,.plan-grid{grid-template-columns:1fr}.article-section{margin-bottom:46px}.article-section>header h2{font-size:1.55rem}.mini-game__intro,.mini-game__play,.mini-game__result{padding:22px 16px}.mini-game-shell h3{font-size:1.8rem}.mini-game__answer{min-height:48px}.full-road-trip{padding:26px 20px}@keyframes sheet-in{from{opacity:0;transform:translateY(32px)}}}
@media (max-width:389px){.hub-hero,.hub-discovery,.hub-browse,.hub-promo,.article-layout{padding-left:16px;padding-right:16px}}
@media (max-width:700px){.hub-map{touch-action:pan-x pan-y}}
.hub-weather:not(.hub-weather--loading):empty,.hub-weather--unavailable,.hub-weather[hidden]{display:none}
@media (max-width:767px){.desktop-nav.is-open{position:absolute;z-index:1300;top:68px;right:16px;display:grid;min-width:190px;padding:10px;border:1px solid var(--hh-border);border-radius:14px;background:#fff;box-shadow:var(--shadow)}body:has(.hub-card:not([hidden]))::after{content:"";position:fixed;z-index:1090;inset:0;background:rgba(42,15,58,.28)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.hub-weather:empty::after{animation:none}}
.hub-live-facts{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0}.hub-live-facts span{border:1px solid var(--hh-border);border-radius:999px;background:#fff;color:#555;font:600 .78rem/1.2 Poppins,sans-serif;padding:.45rem .7rem}.hub-live-module{border:1px solid var(--hh-border);border-radius:18px;background:#fffaf2;margin:1rem 0;padding:1rem}.hub-live-module a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--hh-purple-900);font-weight:700}.hub-tap-link{display:inline-flex;align-items:center;min-block-size:44px;font-weight:700}

/* ---- Full city articles (tools/lib/render-article.mjs) ---- */
.article-hook{margin:0 0 40px;border-left:4px solid var(--hh-pink);background:var(--hh-surface-warm);padding:18px 20px}
.article-hook p{margin:0;font-size:1.12rem;font-style:italic;line-height:1.6}
.plan-steps{margin-top:18px;border-radius:14px;background:var(--hh-purple-050);padding:16px 20px}
.plan-steps h3{margin:0 0 8px;color:var(--hh-pink-ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.plan-steps ul{margin:0;padding-left:20px}
.plan-steps li{margin-bottom:6px}
.team-list article{margin:0 0 14px;border:1px solid var(--hh-border);border-radius:14px;background:#fff;padding:16px 18px}
.team-list__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.team-list__head h3{margin:0}
.team-list__head span{border-radius:999px;background:var(--hh-purple-900);color:#fff;padding:2px 10px;font-size:.7rem;font-weight:800;text-transform:uppercase}
.team-list small{display:block;margin:4px 0 8px;color:var(--hh-ink-muted);font-weight:600}
.team-list article p{margin:0}
.team-list__note{border:1px dashed var(--hh-border);border-radius:12px;padding:12px 14px;color:var(--hh-ink-muted)}
.daytrip-wrap{overflow-x:auto}
.daytrip-table,.source-table{width:100%;border-collapse:collapse}
.daytrip-table th,.source-table th{border-bottom:2px solid var(--hh-border);padding:0 10px 8px 0;color:var(--hh-pink-ink);font-size:.68rem;font-weight:800;text-align:left;text-transform:uppercase}
.daytrip-table td,.source-table td{border-bottom:1px solid var(--hh-border);padding:10px 10px 10px 0;vertical-align:top}
.daytrip-table td:nth-child(n+2){white-space:nowrap;color:var(--hh-ink-muted);font-variant-numeric:tabular-nums}
.plan-name{margin:0 0 6px}
.source-log details{border:1px solid var(--hh-border);border-radius:14px;background:#fff;padding:4px 16px}
.source-log summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700}
.source-table{min-width:560px;margin-bottom:12px;font-size:.85rem}
.source-table a{color:var(--hh-ink);word-break:break-word}
.source-table .is-verified{color:var(--hh-success-ink);font-weight:700;white-space:nowrap}
.source-table .is-pending{color:var(--hh-ink-muted);white-space:nowrap}
.book-cta{border-radius:20px;background:var(--hh-purple-900);color:#fff;padding:28px;text-align:center}
.book-cta h2{margin:6px 0 10px;color:#fff}
.book-cta .eyebrow{color:var(--hh-gold)}
.fee-mark{color:var(--hh-pink-ink);font-weight:800}
.fee-note{margin:10px 0 0;color:var(--hh-ink-muted);font-size:.82rem;font-style:italic}
.fee-note a{color:var(--hh-ink)}
.monitor-note{font-style:normal;border-left:2px solid var(--hh-pink);padding-left:10px}
.park-facts{display:grid;gap:16px}
.park-facts__card{padding:16px 18px;border:2px solid rgba(42,27,61,.14);border-radius:16px;background:#fff}
.park-facts__card h3{margin:0 0 10px;font:800 17px/1.25 Poppins,sans-serif}
.park-facts__card h3 a{color:var(--hh-ink);text-decoration-thickness:2px;text-underline-offset:3px}
.park-facts__card dl{display:grid;gap:10px;margin:0}
.park-facts__card dt{font:800 11px/1.3 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-pink-ink)}
.park-facts__card dd{margin:3px 0 0;font-size:.93rem}
.park-facts__stamp{margin:12px 0 0;color:var(--hh-ink-muted);font-size:.74rem;font-style:italic}
@media (min-width:720px){.park-facts__card dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}}
.is-monitored{display:inline-block;margin-top:2px;color:var(--hh-ink-muted);font-size:.72rem;font-style:italic}
.hub-trip{margin:18px 0;padding:16px 18px;border:2px solid rgba(42,27,61,.14);border-radius:16px;background:#fff}
.hub-trip h2{margin:0 0 8px;font:800 18px/1.2 Poppins,sans-serif;color:#2A1B3D}
.hub-trip__empty{margin:0;color:#4c4358;font:500 14px/1.5 Poppins,sans-serif}
.hub-trip__list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.hub-trip__list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(42,27,61,.12);border-radius:12px}
.hub-trip__role{min-inline-size:5.5rem;font:700 11px/1.2 "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hh-pink-ink)}
.hub-trip__name{font:600 15px/1.3 Poppins,sans-serif;color:#2A1B3D}
.hub-trip__name small{display:block;font:500 12px/1.4 Poppins,sans-serif;color:#6b6379}
.hub-trip__controls{display:flex;gap:4px}
.hub-trip__controls button{inline-size:30px;block-size:30px;border:1px solid rgba(42,27,61,.18);border-radius:8px;background:#fff;cursor:pointer;font-size:14px}
.hub-trip__controls button:disabled{opacity:.35;cursor:default}
.hub-trip__count{margin:10px 0 8px;font:600 13px/1.2 Poppins,sans-serif;color:#4c4358}
.hub-card__trip{border:0;border-radius:999px;padding:9px 16px;background:var(--hh-pink);color:#fff;font:700 14px/1 Poppins,sans-serif;cursor:pointer}

/* ── The map is the page (Tee, 2026-10-13) ─────────────────────────────────────────────
   The hero is a strap line and a start-to-destination planner; the map itself is the hero. */
.hub-hero--map{display:block;min-height:0;padding:28px clamp(16px,5vw,64px) 0;background:#f3edda;background-image:none}
.hub-hero--map .hub-hero__strap{max-width:760px}
.hub-hero--map h1{margin:8px 0 10px;font-size:clamp(2.4rem,5vw,4.2rem)}
.hub-hero--map p{max-width:640px;font-size:1.02rem}
.trip-search{margin:20px 0 10px;border:2px solid rgba(42,27,61,.14);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.trip-search__tabs{display:flex;gap:2px;padding:6px 6px 0;background:rgba(42,27,61,.05);border-bottom:1px solid rgba(42,27,61,.12)}
.trip-search__tab{appearance:none;border:0;background:transparent;cursor:pointer;min-block-size:44px;padding:0 16px;border-radius:12px 12px 0 0;font:800 .86rem/1 Poppins,sans-serif;letter-spacing:.02em;color:var(--hh-ink-muted)}
.trip-search__tab:hover{color:var(--hh-pink-ink);background:rgba(255,255,255,.6)}
.trip-search__tab.is-on{background:#fff;color:var(--hh-pink-ink);box-shadow:0 -2px 0 var(--hh-pink) inset}
.trip-search__tab:focus-visible{outline:3px solid var(--hh-pink);outline-offset:-3px}
.trip-planner{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:0;padding:16px 18px;background:#fff}
.trip-planner[hidden],.reach-planner[hidden]{display:none}
.trip-planner__field{display:grid;gap:5px;flex:1 1 230px;min-width:0}
.trip-planner__field label{font:800 11px/1.3 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-pink-ink)}
.trip-planner__field input{min-block-size:46px;padding:0 12px;border:1px solid var(--hh-border);border-radius:12px;background:#fff;font:inherit;font-size:.95rem;width:100%}
.trip-planner__field input:focus-visible{outline:3px solid var(--hh-pink);outline-offset:1px}
.trip-planner__arrow{align-self:center;padding-bottom:10px;color:var(--hh-ink-muted);font-size:1.3rem}
.trip-planner button{min-block-size:46px}
.trip-planner__summary{flex:1 0 100%;margin:0;color:var(--hh-ink-muted);font-size:.84rem}
.trip-planner__summary:empty{display:none}
.hub-discovery--map-first{padding-top:6px}
.hub-discovery--map-first .hub-map{min-block-size:min(74vh,760px)}

/* Stops the drive passes, in the order they are reached. */
.route-stops{margin-top:16px;padding:18px 20px;border:2px solid var(--hh-pink);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.route-stops h2{margin:0 0 4px;font-size:1.35rem}
.route-stops__summary{margin:0 0 12px;color:var(--hh-ink-muted);font-size:.85rem}
.route-stops__empty{margin:6px 0 0;color:var(--hh-ink-muted);font-size:.9rem}
.route-stops__list{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.route-stops__list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--hh-border);border-radius:12px}
.route-stops__mile{min-width:74px;color:var(--hh-pink-ink);font:800 11px/1.3 Poppins,sans-serif;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.route-stops__name{display:grid;font-weight:700;font-size:.95rem}
.route-stops__name small{color:var(--hh-ink-muted);font-weight:400;font-size:.76rem}
.route-stops__list button,.route-stops>button{min-block-size:44px;padding:0 16px;border:1px solid var(--hh-border);border-radius:12px;background:#fff;font-weight:700;cursor:pointer}
.route-stops>button{width:100%;border-color:var(--hh-pink);color:var(--hh-pink-ink)}
.route-stops__list button:hover,.route-stops>button:hover{background:var(--hh-pink);border-color:var(--hh-pink);color:#fff}

@media (max-width:767px){
  .hub-hero--map{padding:22px 16px 0}
  .trip-planner{gap:10px;padding:14px}
  .trip-search__tab{flex:1 1 auto;padding:0 10px;font-size:.8rem}
  .trip-planner__arrow{display:none}
  .trip-planner button{width:100%}
  .hub-discovery--map-first .hub-map{min-block-size:58vh}
  .route-stops__list li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .route-stops__mile{grid-column:1/-1}
}
/* A class that sets `display` beats the browser's own [hidden] rule, so the Clear button
   stayed visible before a route existed. */
/* A class that sets display beats the browser[hidden] rule. Any container whose children
   are .button or flex items needs this said explicitly, or hidden things keep showing. */
.trip-planner [hidden],.route-stops[hidden],.map-draw [hidden],.hub-card[hidden]{display:none}
/* Filters sit under the map now; the map leads the page. */
.hub-filters-wrap{margin:12px 0 0}
.hub-filters-wrap summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
.hub-filters-wrap .hub-filters{margin:8px 0 0}
.hub-discovery--map-first .hub-status{margin:0 0 8px}
/* On a phone the map has to be reachable without scrolling past a full screen of hero. */
@media (max-width:767px){
  .hub-hero--map{padding:14px 16px 0}
  .hub-hero--map .eyebrow{font-size:.62rem}
  .hub-hero--map h1{margin:4px 0 6px;font-size:1.9rem;text-shadow:2px 2px 0 rgba(209,19,95,.16)}
  .hub-hero--map p{font-size:.92rem;line-height:1.4}
  .trip-planner{margin:12px 0 10px;padding:12px;gap:8px;border-radius:14px}
  .trip-planner__field label{font-size:10px}
  .trip-planner__field input{min-block-size:44px;font-size:.9rem}
  .trip-planner button{min-block-size:44px}
  .trip-planner__summary{font-size:.8rem}
  .hub-discovery--map-first .hub-map{min-block-size:64vh}
  .hub-discovery--map-first .hub-status{font-size:.72rem}
}

}

/* Drawing a route is a mode you enter on purpose, and the page says so the whole time it is on
   (map designer 2026-10-13, COO confirmed). Reading is the default. */
.map-draw{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.map-draw__lede{flex:1 1 300px;margin:0;color:var(--hh-ink-muted);font-size:.84rem}
.map-draw__start{min-block-size:44px}
.map-draw.is-drawing .map-draw__lede{display:none}
.map-draw__banner{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;border:2px solid var(--hh-pink);border-radius:14px;background:#fff}
.map-draw__banner p{flex:1 1 240px;margin:0;font-size:.86rem}
.map-draw__banner button{min-block-size:40px}
.map-draw__dot{inline-size:10px;block-size:10px;border-radius:50%;background:var(--hh-pink);animation:draw-pulse 1.6s ease-in-out infinite}
@keyframes draw-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.map-draw__dot{animation:none}}
/* The crosshair only belongs while drawing. */
.hub-map.is-pinning{cursor:crosshair}
.hub-map.is-pinning .leaflet-marker-icon{cursor:pointer}
@media (max-width:767px){
  .map-draw{gap:8px}
  .map-draw__lede{flex-basis:100%;font-size:.8rem}
  .map-draw__start{width:100%}
  .map-draw__banner{padding:10px 12px}
  .map-draw__banner p{flex-basis:100%;font-size:.82rem}
  .map-draw__banner button{width:100%}
}

/* Tick a stop and the dots connect (Tee, 2026-10-13). The same control on the card and on every
   browse row, so a route can be built without touching the map. */
.hub-card__trip{display:inline-flex;align-items:center;gap:10px;min-block-size:44px;padding:0 16px;border:2px solid var(--hh-pink);border-radius:999px;background:#fff;font-weight:700;cursor:pointer}
.hub-card__trip input{inline-size:20px;block-size:20px;accent-color:var(--hh-pink);cursor:pointer}
.hub-card__trip:has(input:checked){background:var(--hh-pink);color:#fff}
.hub-card__trip:focus-within{outline:3px solid var(--hh-pink);outline-offset:2px}
.hub-results li{display:flex;align-items:stretch;gap:0}
.hub-results__check{display:grid;place-items:center;min-inline-size:44px;min-block-size:56px;border:1px solid var(--hh-border);border-right:0;border-radius:12px 0 0 12px;background:#fff;cursor:pointer}
.hub-results__check input{inline-size:19px;block-size:19px;accent-color:var(--hh-pink);cursor:pointer}
.hub-results__check:focus-within{outline:3px solid var(--hh-pink);outline-offset:-2px}
.hub-results li button{border-radius:0 12px 12px 0}
.hub-results li.is-on-route{outline:2px solid var(--hh-pink);outline-offset:1px;border-radius:13px}
.hub-results li.is-on-route .hub-results__check{background:var(--hh-pink)}

/* Progressive disclosure: the further in you zoom, the more the map says (COO 2026-10-13). */
.hub-marker__label{position:absolute;top:38px;left:50%;transform:translateX(-50%);z-index:1;max-inline-size:150px;padding:2px 7px;border-radius:8px;background:rgba(255,255,255,.93);color:var(--hh-ink-on-brand);font:700 11px/1.25 Poppins,sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px rgba(0,0,0,.2);pointer-events:none}
.hub-marker-wrap.is-pinned .hub-marker__label{background:var(--hh-pink);color:#fff}
/* A named pin needs room for its label, or it sits under the next pin down. */
.hub-marker-wrap.is-named{z-index:620}

/* The state summary, locked into the panel beside the map by a click. */
.state-panel{margin-top:16px;padding:18px 20px;border:2px solid rgba(42,27,61,.14);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.state-panel[hidden]{display:none}
.state-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.state-panel h2{margin:0;font-size:1.4rem}
.state-panel__close{min-block-size:40px;padding:0 12px;border:1px solid var(--hh-border);border-radius:10px;background:#fff;cursor:pointer}
.state-panel__desc{margin:6px 0 12px;color:var(--hh-ink-muted);font-size:.9rem}
.state-panel__featured{display:grid;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.state-panel__featured li{display:flex;align-items:center;gap:8px;font-size:.92rem}
.state-panel__featured .kind{color:var(--hh-ink-muted);font-size:.76rem}
.state-panel__links{display:flex;flex-wrap:wrap;gap:10px}
.state-panel__links a,.state-panel__links button{min-block-size:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--hh-pink);border-radius:999px;background:#fff;color:var(--hh-pink-ink);font-weight:700;text-decoration:none;cursor:pointer}
.state-panel__links a:hover,.state-panel__links button:hover{background:var(--hh-pink);color:#fff}
/* The hover preview is a light touch — name and count, nothing that needs reading. */
.state-preview{position:absolute;z-index:700;top:12px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:var(--hh-purple-900);color:#fff;font:700 .82rem/1.3 Poppins,sans-serif;pointer-events:none;box-shadow:var(--shadow)}
.state-preview[hidden]{display:none}
@media (max-width:767px){
  .hub-marker__label{max-inline-size:110px;font-size:10px}
  .state-panel{padding:14px 16px}
  .state-panel__links a,.state-panel__links button{flex:1 1 100%;justify-content:center}
}

/* Themed collections: the same stop, reachable by what it is rather than where it is. */
.collection-shell .article-body{max-width:860px;margin:0 auto;padding:0 clamp(16px,5vw,32px)}
.collection-hook{margin:0 0 6px;font-size:1.08rem;line-height:1.6}
.collection-count{margin:0 0 28px;color:var(--hh-ink-muted);font-size:.86rem}
.collection-state{margin:0 0 30px}
.collection-state h2{margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--hh-atlas-line);font-size:1.25rem}
.collection-where{margin:6px 0 0;font-size:.8rem;color:var(--hh-ink-muted)}
.collection-where a{color:var(--hh-pink-ink);font-weight:700}
.collection-more{max-width:860px;margin:36px auto 0;padding:0 clamp(16px,5vw,32px)}
.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:12px}
.collection-card{display:grid;gap:6px;padding:16px 18px;border:2px solid rgba(42,27,61,.14);border-radius:16px;background:#fff;text-decoration:none;color:inherit}
/* Collection cards: art on top, count badge over it, words beneath (designer's
   collections-page delivery, 2026-11-05, retokenised to ours). */
.collection-card--art{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.collection-card__art{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;
  background:var(--hh-paper-muted);border-block-end:1px solid var(--hh-atlas-line)}
/* CONTAIN, never cover: the emblems are square and drawn to their edges, so a crop cuts the
   drawing. multiply drops their white ground onto the mat. */
.collection-card__art img{display:block;inline-size:100%;block-size:100%;object-fit:contain;
  mix-blend-mode:multiply}
.collection-card__count{position:absolute;inset-block-end:12px;inset-inline-end:12px;
  color:#fff;background:var(--hh-ink);border-radius:999px;padding:7px 12px;
  font-size:.68rem;box-shadow:0 2px 6px rgba(8,60,90,.22)}
.collection-card--art .collection-card__text{padding:18px 20px 20px;display:grid;gap:8px;
  align-content:start;min-inline-size:0}
.collection-card:hover{border-color:var(--hh-pink);box-shadow:var(--hh-shadow-low)}
.collection-card:focus-visible{outline:3px solid var(--hh-focus);outline-offset:2px}
.collection-card:hover{border-color:var(--hh-pink);box-shadow:var(--shadow)}
.collection-card h3{margin:0;font:800 1.05rem/1.25 Poppins,sans-serif}
.collection-card p{margin:0;color:var(--hh-ink-muted);font-size:.85rem}
.collection-card span{color:var(--hh-pink-ink);font:800 .74rem/1 Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.hub-browse__all{margin:14px 0 0}
.hub-browse__all a{color:var(--hh-pink-ink);font:800 .8rem/1 Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.hub-browse__all a:hover,.hub-browse__all a:focus-visible{text-decoration:underline}
/* The cross-link back from a city page. */
.collection-links__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.collection-links__row a{display:inline-flex;align-items:center;min-block-size:44px;padding:0 16px;border:1px solid var(--hh-pink);border-radius:999px;color:var(--hh-pink-ink);font-weight:700;text-decoration:none}
.collection-links__row a:hover{background:var(--hh-pink);color:#fff}

/* Theme packages: one designated road, the guides along it. Semantic tokens only, so both
   themes follow from the :root redefinitions rather than needing a second set of rules. */
.theme-facts{display:grid;gap:0;margin:18px 0 30px;border:1px solid var(--hh-border);border-radius:var(--hh-radius-md);background:var(--hh-paper-raised);overflow:hidden}
.theme-facts>div{display:grid;grid-template-columns:minmax(7.5rem,10rem) 1fr;gap:4px 16px;padding:12px 16px;border-top:1px solid var(--hh-border)}
.theme-facts>div:first-child{border-top:0}
.theme-facts dt{margin:0;color:var(--hh-ink-muted);font:800 .72rem/1.5 Poppins,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.theme-facts dd{margin:0;font-size:.95rem;line-height:1.55}
.theme-section{margin:0 0 32px}
.theme-section h2{margin:0 0 6px;padding-bottom:6px;border-bottom:2px solid var(--hh-pink);font-size:1.25rem}
/* The note under each heading says where the text came from, or what the list leaves out. It is
   a caveat, so it reads quieter than the body it introduces — but never below 0.8rem. */
.theme-section__note{margin:0 0 14px;color:var(--hh-ink-muted);font-size:.84rem;line-height:1.5}
.theme-stop__state{margin-inline-start:8px;color:var(--hh-ink-muted);font:800 .7rem/1 Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.theme-gaps ul,.theme-sources ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:8px}
.theme-gaps li,.theme-sources li{font-size:.9rem;line-height:1.55}
.theme-sources{font-size:.9rem}
.theme-sources a{color:var(--hh-pink-ink);font-weight:700}
@media (max-width:540px){
  /* Stacked, because a 7.5rem label column leaves too little for the value on a phone. */
  .theme-facts>div{grid-template-columns:1fr;gap:2px}
}
/* The written state lede leads the panel; the composed count line follows it. */
.state-panel__lede{margin:8px 0 10px;font-size:1rem;line-height:1.55}
.state-panel__desc{font-size:.84rem}
.state-lede{max-width:62ch;font-size:1.05rem;line-height:1.6}
.state-lede--empty{color:var(--hh-ink-muted);font-style:italic}

/* ---- trip tray -------------------------------------------------------------------------- */
/* The trip panel sits far below the map in the document, which is right on a desktop where both
   are on screen at once. On a phone it meant tapping a pin produced no visible response. Below
   768px the panel becomes a bar fixed to the bottom of the viewport: the count is always in
   sight, and the full list opens on top of the page rather than 600px down it. */
.hub-trip__bar{display:none}
.hub-trip:not(:has(.hub-trip__list)){--hub-trip-empty:1}

@media (max-width:767px){
  .hub-trip:has(.hub-trip__list){
    position:fixed;inset-inline:0;inset-block-end:0;z-index:1200;
    margin:0;border-radius:18px 18px 0 0;border:0;padding:0;
    box-shadow:0 -6px 24px rgba(42,27,61,.22);
    /* Sit above the iPhone home indicator rather than under it. */
    padding-block-end:env(safe-area-inset-bottom,0);
  }
  .hub-trip:has(.hub-trip__list) .hub-trip__bar{
    display:flex;align-items:baseline;gap:10px;inline-size:100%;
    padding:14px 18px;border:0;border-radius:18px 18px 0 0;background:#2A1B3D;color:#fff;
    font:700 15px/1.2 Poppins,sans-serif;text-align:start;cursor:pointer;
    /* A comfortable tap target without needing to aim. */
    min-block-size:52px;
  }
  .hub-trip__bar-miles{font:500 13px/1.2 Poppins,sans-serif;color:#F3E6FF}
  .hub-trip__bar-more{margin-inline-start:auto;font:600 13px/1.2 Poppins,sans-serif;color:#FFC24B}
  .hub-trip__bar-more::after{content:" ▲";font-size:11px}
  .hub-trip.is-open .hub-trip__bar-more::after{content:" ▼"}

  .hub-trip:has(.hub-trip__list) .hub-trip__body{
    display:none;background:#fff;padding:16px 18px 20px;
    /* Never taller than the screen: the list scrolls, the bar stays put. */
    max-block-size:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  }
  .hub-trip.is-open .hub-trip__body{display:block}
  .hub-trip__body h2{margin-block-start:0}

  /* Room at the end of the page so the bar never covers the last thing on it. */
  body:has(.hub-trip .hub-trip__list){padding-block-end:76px}
}

/* The share block: a label, a field wide enough to show the start of the link, and a button that
   is easy to hit. At 375px these must stack — side by side the field is clipped mid-URL and the
   button wraps under it looking broken. */
.hub-trip__share{display:grid;gap:8px;margin:12px 0}
.hub-trip__share label{font:700 12px/1.2 "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#4c4358}
.hub-trip__share input{
  inline-size:100%;padding:10px 12px;border:1px solid rgba(42,27,61,.2);border-radius:10px;
  font:500 13px/1.3 "DM Mono",monospace;color:#2A1B3D;background:#FFF9F3;
  /* A long opaque token should show its beginning, not scroll to its end. */
  text-overflow:ellipsis;
}
.hub-trip__share button{
  justify-self:start;padding:10px 16px;min-block-size:44px;
  border:2px solid #2A1B3D;border-radius:10px;background:#fff;color:#2A1B3D;
  font:700 14px/1 Poppins,sans-serif;cursor:pointer;
}
.hub-trip__share button:hover{background:#2A1B3D;color:#fff}
.hub-trip__share-note{margin:0;font:500 12px/1.5 Poppins,sans-serif;color:#6b6379}
@media (max-width:767px){
  .hub-trip__share button{justify-self:stretch;text-align:center}
}

/* ---- what the pins mean ----------------------------------------------------------------- */
/* Eleven colours and eleven glyphs are only useful if you can find out what they stand for.
   Folded away by default: the map is the point, the key is for the first visit. */
.kind-key{margin:14px 0 0;border:2px solid rgba(42,27,61,.12);border-radius:14px;background:#fff}
.kind-key>summary{
  padding:12px 16px;min-block-size:44px;display:flex;align-items:center;
  font:700 14px/1.2 Poppins,sans-serif;color:#2A1B3D;cursor:pointer;list-style:none;
}
.kind-key>summary::-webkit-details-marker{display:none}
.kind-key>summary::after{content:"▾";margin-inline-start:auto;color:var(--hh-pink-ink)}
.kind-key[open]>summary::after{content:"▴"}
.kind-key__list{
  margin:0;padding:0 16px 14px;list-style:none;
  display:grid;gap:8px 18px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
}
.kind-key__list li{display:flex;align-items:center;gap:9px}
/* The same teardrop the map draws, at a size that reads in a list. */
.kind-key__swatch{
  flex:0 0 auto;inline-size:26px;block-size:26px;display:grid;place-items:center;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--pin-color);border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 1px 3px rgba(42,27,61,.3);
}
.kind-key__swatch svg{inline-size:14px;block-size:14px;fill:#fff;transform:rotate(45deg)}
.kind-key__label{font:600 13px/1.3 Poppins,sans-serif;color:#2A1B3D}
.kind-key__count{
  margin-inline-start:auto;font:700 12px/1 "DM Mono",monospace;color:#6b6379;
  font-variant-numeric:tabular-nums;
}
@media (max-width:480px){
  .kind-key__list{grid-template-columns:1fr}
}

/* ---- season lens ------------------------------------------------------------------------ */
/* Colouring the states by what a typical season looks like. Off by default — the atlas is the
   map, and this is a lens laid over it. */
.season-control{margin:14px 0 0}
.season-control__row{display:flex;flex-wrap:wrap;gap:8px}
.season-control__months{display:flex;flex-wrap:wrap;gap:8px;min-inline-size:0}
.season-control__row button{
  flex:1 1 auto;min-inline-size:92px;min-block-size:52px;padding:8px 12px;
  display:grid;gap:2px;justify-items:start;text-align:start;
  border:2px solid rgba(42,27,61,.14);border-radius:12px;background:#fff;cursor:pointer;
}
.season-control__row button span{font:700 14px/1.2 Poppins,sans-serif;color:#2A1B3D}
.season-control__row button small{font:500 11px/1.2 Poppins,sans-serif;color:#6b6379}
.season-control__row button:hover{border-color:rgba(42,27,61,.35)}
.season-control__row button.is-on{border-color:var(--hh-pink);background:#FFF0F6}
.season-control__row button.is-on span{color:var(--hh-pink-ink)}

.season-scale{margin:12px 0 0;padding:14px 16px;border:2px solid rgba(42,27,61,.12);border-radius:14px;background:#fff}
.season-scale__title{margin:0 0 10px;font:500 13px/1.4 Poppins,sans-serif;color:#4c4358}
.season-scale__title b{color:#2A1B3D}
.season-scale ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px}
/* Butted together so it reads as one continuous scale rather than six separate swatches. */
.season-scale li{flex:1 1 118px;display:grid;gap:2px;padding:8px 10px;border-radius:8px}
.season-scale li i{display:block;block-size:10px;border-radius:3px;border:1px solid rgba(42,27,61,.18)}
.season-scale li span{font:700 12px/1.2 Poppins,sans-serif;color:#2A1B3D}
.season-scale li small{font:500 11px/1.2 "DM Mono",monospace;color:#6b6379;font-variant-numeric:tabular-nums}
.season-scale__note{margin:10px 0 0;font:500 11px/1.5 Poppins,sans-serif;color:#6b6379}
@media (max-width:480px){
  .season-control__row button{flex:1 1 calc(50% - 4px)}
}

/* Twelve months is a lot of buttons; they scroll sideways on a phone rather than wrapping into
   a block that pushes the map off screen. */
.season-control__months{display:flex;gap:4px;overflow-x:auto;padding-block-end:2px;scrollbar-width:thin;
  /* Scrolling shadows. The strip genuinely scrolls, but on a phone it was cut mid-word at
     "May" with nothing to say more existed off the right edge. The two "local" gradients are
     paper-coloured covers that travel WITH the content; the two "scroll" shadows stay put.
     So a shadow only shows on a side that still has months hidden behind it, and both
     disappear when the strip is short enough not to scroll at all. No JavaScript, and
     nothing to keep in sync with the scroll position. */
  background:
    linear-gradient(to right,var(--hh-paper-muted) 40%,transparent) left/26px 100% no-repeat local,
    linear-gradient(to left,var(--hh-paper-muted) 40%,transparent) right/26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(42,15,58,.2),transparent) left/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(42,15,58,.2),transparent) right/12px 100% no-repeat scroll}
.season-control__months button{flex:0 0 auto;min-inline-size:52px;min-block-size:44px;justify-items:center;text-align:center}
.season-control__row>button{flex:0 0 auto;min-inline-size:64px}
.season-control__row{align-items:stretch;gap:10px;flex-wrap:nowrap}
.season-control__months button[data-now]{box-shadow:inset 0 -3px 0 #FFC24B}
@media (max-width:480px){
  .season-control__row{flex-wrap:nowrap}
  .season-control__months button{min-inline-size:46px;padding:8px 6px}
}

/* ---- place photographs ------------------------------------------------------------------- */
/* A photograph of the city or state at the head of its page, with the credit its licence
   requires. The credit is part of the picture, not a footnote: CC BY and CC BY-SA both want the
   author and the licence to travel with the image. */
.article-hero--photo{padding:0;overflow:hidden}
.article-hero__photo{margin:0;position:relative;line-height:0}
.article-hero__photo img{
  inline-size:100%;block-size:clamp(220px,38vw,420px);object-fit:cover;display:block;
  /* A hero that resizes as it loads shifts the headline under the reader's eye. */
  background:#EFE6D8;
}
.article-hero__photo figcaption{
  position:absolute;inset-inline:0;inset-block-end:0;
  padding:22px 18px 10px;
  font:500 11px/1.5 Poppins,sans-serif;color:#fff;
  background:linear-gradient(to top,rgba(26,16,38,.82),rgba(26,16,38,0));
  line-height:1.5;
}
.article-hero__photo figcaption b{font-weight:700}
.article-hero__photo figcaption a{color:#FFD98A;text-decoration:underline}
.article-hero__photo figcaption a:hover{color:#fff}
/* The hero text sits over the photograph, so it needs its own ground to stay readable. */
.article-hero--photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(26,16,38,.74) 0%,rgba(26,16,38,.46) 55%,rgba(26,16,38,.60) 100%);
}
.article-hero--photo .article-hero__photo figcaption{z-index:2}
.article-hero--photo .article-hero__inner{
  position:absolute;inset-block-start:0;inset-inline:0;padding:20px 18px;
  color:#fff;
}
.article-hero--photo .article-hero__inner h1,
.article-hero--photo .article-hero__inner p{color:#fff;text-shadow:0 1px 3px rgba(26,16,38,.5)}
@media (max-width:600px){
  .article-hero__photo figcaption{font-size:10px;padding:18px 14px 8px}
}

/* Two notes the generator computes from map data rather than an editor writing them: somewhere to
   eat, and somewhere to sleep. Both land inside a section's prose, so they are set as supplied
   asides rather than given headings of their own — a rule down the side and a slightly quieter
   size, enough that a reader can tell this part was counted rather than written. */
.food-stop__brewpubs,.practical-info__camping,.state-brewpubs,.state-campgrounds{margin-top:18px;border-left:3px solid var(--hh-gold);border-radius:0 10px 10px 0;background:var(--hh-surface-warm);padding:13px 15px;font-size:.94rem}
/* What the source does not cover. It has to travel with the number, because a reader who takes
   "no campgrounds" for "nowhere to camp" has been misled by our silence rather than our words. */
.practical-info__scope,.state-campgrounds__scope{display:block;margin-top:7px;color:#6d6478;font-size:.78rem;line-height:1.45}
/* Stop pages: the lighter sibling of a city guide. A scenic pull-off gets four sourced
   sentences, so the page is built to be read in one screen rather than navigated. */
.stop-hero{min-height:220px;padding:44px clamp(16px,8vw,110px);background:linear-gradient(135deg,var(--hh-purple-900),#5b355f 65%,var(--hh-orange))}
.stop-hero h1{margin:10px 0 6px;font-size:clamp(2.4rem,6vw,4rem);text-transform:uppercase}
.stop-hero__where{margin:0;font-size:1rem;opacity:.86}
.stop-layout{display:grid;grid-template-columns:minmax(0,700px) 240px;gap:40px;max-width:1040px;margin:auto;padding:40px clamp(16px,4vw,32px)}
.stop-body>p{margin:0 0 16px}
.stop-body>p:first-child{font-size:1.08rem}
.stop-rail h2{margin:0 0 10px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-pink-ink)}
.stop-facts{display:grid;gap:10px;margin:0}
.stop-facts div{display:grid;gap:2px;padding-bottom:9px;border-bottom:1px solid var(--hh-border)}
.stop-facts div:last-child{border-bottom:0;padding-bottom:0}
.stop-facts dd{margin:0;font-weight:700;font-size:.9rem}
.stop-rail__map{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-weight:800;font-size:.82rem}
@media (max-width:900px){.stop-layout{grid-template-columns:minmax(0,1fr);gap:28px}.stop-rail{position:static}}
/* The basis line under the day-trips table. Quiet, but it has to be readable: it is the
   difference between a figure a reader can trust and one that looks wrong next to a park's own
   road mileage. */
.daytrip-table__basis{margin:10px 0 0;color:#6d6478;font-size:.78rem;line-height:1.45}
.daytrip-table__unknown{color:#9b93a6}
/* Worth a Weekend: a night away rather than an afternoon. Every row is a Hub page that already
   exists, so the list reads as navigation, not as a set of new claims. */
.weekenders__intro{margin:0 0 14px}
.weekenders{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.weekenders li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:12px;padding:11px 12px;border-left:3px solid var(--hh-gold);background:var(--hh-surface-warm);border-radius:0 10px 10px 0}
.weekenders a{font-weight:800;text-decoration:none}
.weekenders a:hover{text-decoration:underline}
.weekenders__where{color:#6d6478;font-size:.82rem}
.weekenders__miles{color:#6d6478;font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:620px){.weekenders li{grid-template-columns:minmax(0,1fr) auto}.weekenders__where{grid-column:1/-1;margin-top:-4px}}
/* How each day-trip figure was arrived at. Both columns are estimates; the marker says which
   came from a routing engine and which is the guide's own. Quiet by design — it is provenance,
   not a rating. */
.daytrip-basis{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;font-weight:800;white-space:nowrap;padding:2px 6px;border:1px solid currentColor;border-radius:4px}
.daytrip-basis--routed{color:#1F7A5A}
.daytrip-basis--estimated{color:#A8601B}
.daytrip-table td:nth-child(2),.daytrip-table td:nth-child(3){font-variant-numeric:tabular-nums;white-space:nowrap}
/* Section numbers in the route rail (Tee, 2026-10-15), so it reads as the same numbered run the
   headings do. Deliberately plain — the designer owns the final treatment; this exists so the
   markup is not unstyled while that pass is in flight. */
.article-rail__num{display:inline-block;min-width:1.6em;color:var(--hh-pink-ink);font-variant-numeric:tabular-nums;font-weight:800}

/* ---- Hovering a pin, and reading a grouped one (Tee, 2026-10-15) ----
   Two asks, one root cause: the map showed 282 pins and told you nothing about any of them until
   you clicked. Hover gave you the browser's own tooltip — a second of delay, no styling, never on
   touch — and a cluster gave you a bare numeral that could be read as a trip-order number.
   Both now say what they are. Deliberately plain treatments: the designer owns the final look,
   and this exists so the new markup is not unstyled while that pass is in flight. */
.hub-cluster{line-height:1;cursor:pointer}
.hub-cluster--sm{inline-size:48px;block-size:48px}
.hub-cluster--md{inline-size:54px;block-size:54px}
.hub-cluster--lg{inline-size:60px;block-size:60px}
.hub-cluster__count{font-size:1.05rem;font-variant-numeric:tabular-nums}
.hub-cluster--lg .hub-cluster__count{font-size:.92rem}
.hub-cluster__noun{margin-block-start:1px;font-size:.5rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.82}
.leaflet-marker-icon:hover .hub-cluster,.leaflet-marker-icon:focus-visible .hub-cluster{box-shadow:0 0 0 7px rgba(209,19,95,.2)}
.leaflet-tooltip.hub-tip{display:grid;gap:3px;inline-size:max-content;max-inline-size:240px;padding:9px 11px;border:0;border-radius:12px;background:var(--volume-1);color:#fff;box-shadow:0 6px 20px rgba(26,12,38,.34);font:400 .78rem/1.3 Poppins,sans-serif;text-align:left;white-space:normal;pointer-events:none}
.leaflet-tooltip.hub-tip.leaflet-tooltip-top::before{border-top-color:var(--volume-1)}
.leaflet-tooltip.hub-tip.leaflet-tooltip-bottom::before{border-bottom-color:var(--volume-1)}
.leaflet-tooltip.hub-tip.leaflet-tooltip-left::before{border-left-color:var(--volume-1)}
.leaflet-tooltip.hub-tip.leaflet-tooltip-right::before{border-right-color:var(--volume-1)}
.hub-tip__name{font-family:'Luckiest Guy',Poppins,sans-serif;font-size:1rem;font-weight:400;line-height:1.15;letter-spacing:.01em}
.hub-tip__kind{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.84);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.hub-tip__kind i{flex:none;inline-size:9px;block-size:9px;border-radius:50%;background:var(--pin-color);box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.hub-tip__act{color:var(--hh-gold);font-size:.7rem;font-weight:700}
.kind-key__note{margin-block-start:10px;color:#6d6478;font-size:.74rem;line-height:1.45}
/* A stop page that has a photograph is laid out like a city page's: full bleed, with the title
   block in its own scrim over the top. Without this, .stop-hero's own padding wins — it comes
   later in this file than .article-hero--photo's padding:0 and both are one class deep — and the
   photograph sits inset inside the purple band with the headline stranded above it. */
.stop-hero.article-hero--photo{padding:0}

/* ---- The state menu over the map (Tee, 2026-10-16) ----
   The pill is a door now, not a label, and the panel it opens lists every place in the state
   grouped by what it is. Deliberately plain: the designer owns the final treatment and this
   exists so the new markup is not unstyled while their pass is in flight.
   The stage is what lets the panel sit over the map without Leaflet seeing its clicks — the map
   and the panel are siblings inside it, not parent and child. */
.hub-map-stage{position:relative}
.state-preview{position:absolute;z-index:700;top:12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;min-block-size:36px;border:0;cursor:pointer;pointer-events:auto}
.state-preview:hover,.state-preview:focus-visible{background:var(--hh-pink)}
.state-panel{position:absolute;z-index:720;inset-block-start:58px;inset-inline-end:14px;inline-size:min(360px,calc(100% - 28px));max-block-size:calc(100% - 76px);overflow:auto;margin:0;overscroll-behavior:contain}
.state-panel__head{display:flex;align-items:center;gap:10px}
.state-panel__head h2{margin:0;flex:1}
.state-panel__close{min-inline-size:44px;min-block-size:44px;border:0;background:transparent;color:inherit;font-size:1.4rem;cursor:pointer}
.state-panel__lede{margin:6px 0}
.state-panel__desc{margin:6px 0 12px;color:#6d6478;font-size:.82rem}
.state-panel__groups{display:grid;gap:14px}
.state-group h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6d6478}
.state-group__count{display:inline-grid;place-items:center;min-inline-size:22px;border-radius:999px;background:var(--hh-surface-warm);padding:1px 7px;font-size:.7rem;font-variant-numeric:tabular-nums}
.state-group__list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.state-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 9px;border-block-end:1px dotted var(--hh-border);padding-block:6px}
.state-card__pin{display:grid;place-items:center;inline-size:24px;block-size:24px;border:2px solid var(--pin-color);border-radius:50%;background:#fff;color:var(--pin-color)}
.state-card__pin svg{inline-size:13px;block-size:13px;fill:currentColor}
.state-card__name{font-size:.9rem;line-height:1.25}
.state-card__acts{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.state-card__add{min-block-size:36px;border:1px solid var(--hh-pink);border-radius:999px;background:var(--hh-pink);color:#fff;padding:0 12px;font:800 .7rem/1 Poppins,sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.state-card.is-on-route .state-card__add{background:transparent;color:var(--hh-pink-ink)}
.state-card__read{font-size:.74rem;font-weight:700}
.state-card__read.is-none{color:#8c8396;font-weight:500}
.state-panel[hidden]{display:none}
/* On a phone the map is about half the viewport, so a panel over all of it is a different page
   rather than a menu. It becomes a sheet over the lower part, with the state still visible. */
@media (max-width:767px){
  .state-panel{inset-inline:8px;inset-block-start:auto;inset-block-end:8px;inline-size:auto;max-block-size:62%}
  .state-preview{inset-block-start:8px;font-size:.74rem}
}
.state-panel__about{margin-block-start:14px;border-block-start:1px dotted var(--hh-border);padding-block-start:10px}
.state-panel__about .state-panel__lede{margin:0;color:#4a4253;font-size:.82rem;line-height:1.5}
.state-panel__links{margin-block-start:12px}

/* State codes printed on the map, the way a road atlas prints them (Tee, 2026-10-16).
   Not a tooltip in behaviour: no box, no pointer events, nothing to hover. .is-tight is a state
   too small to hold its own code at the current zoom — it reappears on the way in. */
.leaflet-tooltip.state-abbr{padding:0;border:0;background:none;box-shadow:none;color:var(--volume-1);font:800 11px/1 Poppins,sans-serif;letter-spacing:.08em;text-shadow:0 1px 0 rgba(255,249,243,.85),0 0 4px rgba(255,249,243,.9);pointer-events:none;white-space:nowrap}
.leaflet-tooltip.state-abbr::before{display:none}
.leaflet-tooltip.state-abbr.is-tight{opacity:0}
/* What MM means, directly under the map and never folded away (Tee, 2026-10-16). A key a reader
   has to open is a key they will not read, and this one explains the number they are looking at. */
.map-key-note{margin:10px 0 0;color:#6d6478;font-size:.78rem;line-height:1.5}
.map-key-note b{color:var(--volume-1)}
/* The site-wide "before you go" line (Tee, 2026-10-19). Small print, on all 331 pages, because
   the per-page freshness note only covers the facts we monitor — it says nothing about the
   recommendations we make or the routes we draw. Small, not hidden: it has to be readable. */

.site-footer__notice b{color:rgba(255,255,255,.92)}
/* The place name is the way into its details, so it has to look like one. */
.state-card__name{border:0;background:none;padding:0;text-align:left;color:inherit;font:800 .9rem/1.25 Poppins,sans-serif;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(42,27,61,.28);text-underline-offset:3px}
.state-card__name:hover,.state-card__name:focus-visible{color:var(--hh-pink-ink);text-decoration-color:currentColor}

/* ==========================================================================================
   HUB LAUNCH PASS — MODERN ROAD ATLAS
   Visual-only layer. Existing markup, hooks, editorial content and map behavior stay intact.
   ========================================================================================== */
:root{
  --hh-paper:#FFF9F3;
  --hh-paper-raised:#FFFFFF;
  --hh-paper-muted:#F4EDDF;
  --hh-map-overlay:#FFFFFF;
  --hh-map-overlay-ink:#2A1B3D;
  --hh-success-soft:color-mix(in srgb,var(--hh-success) 16%,var(--hh-paper-raised));
  --hh-atlas-ink:#2A1B3D;
  --hh-atlas-muted:#665A70;
  --hh-atlas-line:rgba(42,27,61,.16);
  --hh-atlas-line-strong:rgba(42,27,61,.28);
  --hh-reading-measure:72ch;
  --hh-section-space:clamp(44px,6vw,72px);
  --hh-radius-sm:10px;
  --hh-radius-md:16px;
  --hh-radius-lg:24px;
  --hh-shadow-low:0 6px 18px rgba(42,15,58,.10);
  --hh-shadow-panel:0 18px 46px rgba(42,15,58,.15);
}
/* --hh-ink FOLLOWS THE THEME. It is #2A0F3A on the paper page and #FFF9F3 on the night page, so
   pairing it with a FIXED white or cream surface is invisible text in one of the two themes —
   always. Five rules did exactly that and were found on 2026-11-02 after Tee reported a button
   on the state panel they could not read: .state-preview (the "Texas — 5 mile markers · Close"
   pill, white on #FFF9F3 at a contrast ratio of 1.04), .trip-add, .hub-marker__label,
   .mini-game__answer and the mini-game's primary button.
   The rule: a surface that does not flip takes ink that does not flip. --hh-ink-on-brand
   (#2A1B3D) and --hh-purple-900 (#2A0F3A) are both stable in all three theme states and are the
   correct partners for a fixed light surface. --hh-ink is only ever for text on a surface that
   flips with it. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --hh-paper:#151020;--hh-paper-raised:#21172D;--hh-paper-muted:#2B2034;
    --hh-atlas-ink:#FFF9F3;--hh-atlas-muted:#D6C8DC;
    --hh-atlas-line:rgba(255,249,243,.16);--hh-atlas-line-strong:rgba(255,249,243,.3);
    --hh-ink:#FFF9F3;--hh-ink-muted:#D6C8DC;--hh-surface:#21172D;--hh-surface-warm:#151020;
    --hh-border:rgba(255,249,243,.16);--hh-purple-050:#33243E;--hh-pink-ink:#F05A96;--hh-success-ink:#2FBF84;
    --shadow:0 12px 34px rgba(0,0,0,.34);--hh-shadow-low:0 8px 22px rgba(0,0,0,.28);
    --hh-shadow-panel:0 20px 52px rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"]{
  --hh-paper:#151020;--hh-paper-raised:#21172D;--hh-paper-muted:#2B2034;
  --hh-atlas-ink:#FFF9F3;--hh-atlas-muted:#D6C8DC;
  --hh-atlas-line:rgba(255,249,243,.16);--hh-atlas-line-strong:rgba(255,249,243,.3);
  --hh-ink:#FFF9F3;--hh-ink-muted:#D6C8DC;--hh-surface:#21172D;--hh-surface-warm:#151020;
  --hh-border:rgba(255,249,243,.16);--hh-purple-050:#33243E;--hh-pink-ink:#F05A96;--hh-success-ink:#2FBF84;
  --shadow:0 12px 34px rgba(0,0,0,.34);--hh-shadow-low:0 8px 22px rgba(0,0,0,.28);
  --hh-shadow-panel:0 20px 52px rgba(0,0,0,.42);
}

html{background:var(--hh-paper)}
body{min-inline-size:0;background:var(--hh-paper);color:var(--hh-atlas-ink);font-size:16px}
body::before{position:fixed;z-index:-1;inset:0;background-image:linear-gradient(rgba(42,27,61,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(42,27,61,.025) 1px,transparent 1px);background-size:32px 32px;content:"";pointer-events:none}
a{text-decoration-thickness:1.5px;text-underline-offset:3px}
.site-header{border-block-end:3px solid var(--hh-gold);background:color-mix(in srgb,var(--hh-paper-raised) 96%,transparent);box-shadow:0 3px 0 rgba(42,27,61,.06)}
.site-logo img{block-size:56px;inline-size:auto}.desktop-nav a{position:relative;padding-inline:4px}.desktop-nav a::after{position:absolute;inset-inline:4px;inset-block-end:7px;block-size:3px;border-radius:3px;background:var(--hh-pink);content:"";scale:0 1;transform-origin:left;transition:scale .18s ease}.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{scale:1 1}
.site-footer{border-block-start:4px solid var(--hh-orange);background:var(--volume-1);color:#fff}.site-footer p{color:rgba(255,255,255,.76)}
.site-footer nav a{border-radius:8px;padding-inline:7px}.site-footer nav a:hover{background:rgba(255,255,255,.1)}

/* Editorial rhythm: one readable column, with dense modules allowed to break wider inside it. */
.article-content{min-inline-size:0;max-inline-size:var(--hh-reading-measure)}
.article-content>p,.article-content>ul,.article-content>ol,.article-section>p,.article-section>ul,.article-section>ol{max-inline-size:var(--hh-reading-measure)}
.article-layout{grid-template-columns:minmax(0,760px) 272px;gap:clamp(34px,4vw,56px);max-inline-size:1160px;padding-block:clamp(44px,6vw,76px)}
.article-section{margin-block-end:var(--hh-section-space)}
.article-section>header{position:relative;align-items:center;min-block-size:46px;margin-block-end:22px;border-block-end:2px dotted var(--hh-atlas-line-strong)}
.article-section>header>span{flex:0 0 38px;inline-size:38px;block-size:38px;border:3px solid var(--hh-paper-raised);box-shadow:0 0 0 2px var(--hh-pink);font-variant-numeric:tabular-nums}
.article-hook{border:1px solid var(--hh-atlas-line);border-inline-start:5px solid var(--hh-pink);border-radius:0 var(--hh-radius-md) var(--hh-radius-md) 0;background:var(--hh-paper-raised);box-shadow:var(--hh-shadow-low)}
.daytrip-wrap,.source-log{max-inline-size:100%;border-radius:var(--hh-radius-md);background:var(--hh-paper-raised);box-shadow:inset 0 0 0 1px var(--hh-atlas-line)}
.daytrip-wrap{overflow-x:auto;overscroll-behavior-inline:contain}.daytrip-table{min-inline-size:690px}.daytrip-table th{position:sticky;inset-block-start:0;background:var(--hh-paper-muted);color:var(--hh-atlas-ink);letter-spacing:.09em}.daytrip-table th,.daytrip-table td{padding:12px 14px}.daytrip-table tbody tr:hover{background:color-mix(in srgb,var(--hh-gold) 9%,transparent)}

/* Provenance: equal authority, different derivation. Geometry carries the distinction. */
.daytrip-basis{display:inline-flex;align-items:center;gap:6px;min-block-size:25px;border:1px solid var(--hh-atlas-line-strong);border-radius:999px;background:var(--hh-paper-raised);color:var(--hh-atlas-ink);padding:3px 9px;font-size:.67rem;font-weight:800;line-height:1}
.daytrip-basis--routed,.daytrip-basis--estimated{color:var(--hh-atlas-ink)}
.daytrip-basis--routed::before{inline-size:18px;block-size:7px;border-block-start:2px solid currentColor;border-block-end:2px dotted currentColor;content:"";transform:skewX(-18deg)}
.daytrip-basis--estimated::before{inline-size:18px;block-size:8px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 5px);border-block-end:2px solid currentColor;content:""}
.daytrip-table__basis{max-inline-size:72ch;border-inline-start:3px solid var(--hh-atlas-line-strong);padding-inline-start:12px;color:var(--hh-atlas-muted)}

/* A destination that is also a Hub page. Deliberately quieter than the routed/estimated pill
   beside it: that chip qualifies a claim, this one is only a way through, and the loudest thing
   in the row should stay the figure a reader came for. Tokens only, so both themes hold. */
.daytrip-table td a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hh-atlas-line-strong)}
.daytrip-table td a:hover,.daytrip-table td a:focus-visible{text-decoration-color:currentColor}
.daytrip-table__guide{margin-inline-start:7px;padding:1px 5px;border:1px solid var(--hh-atlas-line);border-radius:3px;color:var(--hh-atlas-muted);font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;vertical-align:1px}
.daytrip-table__guides{margin:10px 0 0;max-inline-size:72ch;color:var(--hh-atlas-muted);font-size:.78rem;line-height:1.5}

/* Computed notes form one honest field-note family, visually useful but never promotional. */
.food-stop__brewpubs,.practical-info__camping,.state-brewpubs,.state-campgrounds{position:relative;margin-block:20px;border:1px solid var(--hh-atlas-line);border-inline-start:0;border-radius:var(--hh-radius-sm);background:var(--hh-paper-muted);padding:14px 16px 14px 44px;color:var(--hh-atlas-ink);font-size:.94rem;box-shadow:none}
.food-stop__brewpubs::before,.practical-info__camping::before,.state-brewpubs::before,.state-campgrounds::before{position:absolute;inset-inline-start:14px;inset-block-start:16px;display:grid;place-items:center;inline-size:20px;block-size:20px;border:2px solid var(--hh-atlas-ink);border-radius:50%;color:var(--hh-atlas-ink);font:900 11px/1 Poppins,sans-serif;content:"i"}
.practical-info__scope,.state-campgrounds__scope{color:var(--hh-atlas-muted);font-size:.8rem}
.weekenders{gap:8px}.weekenders li{border:1px solid var(--hh-atlas-line);border-inline-start:5px solid var(--hh-orange);border-radius:var(--hh-radius-sm);background:var(--hh-paper-raised);padding:13px 14px}.weekenders a{font-size:1rem}.weekenders__where,.weekenders__miles{color:var(--hh-atlas-muted)}

/* The rail is a quiet route index rather than a competing card stack. */
.article-rail{top:18px}.article-rail nav,.article-rail__weather{border:1px solid var(--hh-atlas-line);border-radius:var(--hh-radius-md);background:var(--hh-paper-raised);box-shadow:var(--hh-shadow-low)}
.article-rail nav{padding:16px 14px}.article-rail ol{margin:0}.article-rail li+li{border-block-start:1px dotted var(--hh-atlas-line)}
.article-rail a{gap:8px;min-block-size:46px;padding-inline:7px;color:var(--hh-atlas-ink)}
.article-rail a:hover,.article-rail a:focus-visible{background:var(--hh-paper-muted)}
.article-rail__num{display:inline-grid;place-items:center;flex:0 0 28px;min-inline-size:28px;block-size:28px;border:1px solid var(--hh-atlas-line-strong);border-radius:9px 9px 9px 2px;background:var(--hh-paper-muted);color:var(--hh-pink-ink);font-size:.68rem;font-weight:900;font-variant-numeric:tabular-nums}

/* State pages now stand on their real lede and computed notes—no filler modules. */
.article-shell>.article-body,.article-shell>.location-cta,.article-shell>.related-locations,.article-shell>.article-shell>.state-jump,.article-shell>.state-band,.article-shell>.state-block{inline-size:min(calc(100% - 32px),960px);margin-inline:auto}
.article-shell>.article-body{padding-block:clamp(44px,6vw,72px);font-size:1.04rem}.article-shell>.article-body>h2{margin-block-end:18px}.article-shell>.article-body>.state-lede{max-inline-size:var(--hh-reading-measure)}
.article-shell>.location-cta,.article-shell>.related-locations,.article-shell>
.article-shell>.location-cta{border-color:transparent;background:linear-gradient(135deg,var(--volume-1),#50305f);color:#fff}.article-shell>.location-cta a{display:inline-flex;align-items:center;min-block-size:46px;border-radius:12px;background:var(--hh-gold);color:var(--volume-1);padding:0 18px;font-weight:900;text-decoration:none}

/* Stop pages: two complete hero states, never an image placeholder. */
.stop-hero{isolation:isolate;min-block-size:260px;display:flex;align-items:flex-end}.stop-hero h1{max-inline-size:850px;font-size:clamp(2.6rem,6vw,5.25rem);text-wrap:balance}.stop-hero__where{font-size:1.05rem;font-weight:700}
.stop-hero.article-hero--photo{display:block;min-block-size:clamp(300px,34vw,470px)}
.stop-hero.article-hero--photo .article-hero__photo img{block-size:clamp(300px,34vw,470px)}
.stop-hero.article-hero--photo .article-hero__inner{inset-block:0 auto;padding:clamp(24px,5vw,54px) clamp(18px,8vw,110px) 100px;background:linear-gradient(to bottom,rgba(18,12,28,.86),rgba(18,12,28,.55) 58%,transparent)}
.stop-hero.article-hero--photo .article-hero__photo figcaption{padding:52px clamp(14px,4vw,28px) 13px;font-size:.72rem;white-space:normal;overflow:visible;text-overflow:clip}
.stop-hero:not(.article-hero--photo){position:relative;background:linear-gradient(135deg,var(--volume-1),#51335d 70%,var(--hh-orange));padding-block:58px}
.stop-hero:not(.article-hero--photo)::before{position:absolute;z-index:-1;inset:0;background-image:radial-gradient(circle at 16% 28%,transparent 0 10px,rgba(255,255,255,.10) 11px 12px,transparent 13px),linear-gradient(118deg,transparent 0 43%,rgba(255,255,255,.08) 43% 44%,transparent 44% 62%,rgba(255,255,255,.08) 62% 63%,transparent 63%);background-size:74px 74px,100% 100%;content:"";opacity:.9}
.stop-layout{grid-template-columns:minmax(0,700px) 252px;gap:clamp(30px,4vw,52px);max-inline-size:1080px;padding-block:clamp(40px,5vw,66px)}
.stop-body{font-size:1.03rem;line-height:1.72}.stop-body>p:first-child{font-size:1.12rem}.stop-rail nav{border-block-start:5px solid var(--hh-orange)}
.stop-facts div{padding-block-end:11px}.stop-facts dt{color:var(--hh-atlas-muted)}

/* Map controls: atlas instrument panel, with number meanings separated by shape as well as color. */
.hub-hero--map,.hub-discovery{background:var(--hh-paper-muted)}
.hub-hero--map{border-block-end:1px solid var(--hh-atlas-line)}.hub-map{border:2px solid var(--hh-atlas-line-strong);box-shadow:var(--hh-shadow-panel)}
.map-key-note{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-block:14px 18px;border:1px solid var(--hh-atlas-line);border-radius:var(--hh-radius-sm);background:var(--hh-paper-raised);padding:11px 13px;color:var(--hh-atlas-muted);font-size:.8rem}.map-key-note b{color:var(--hh-atlas-ink)}
.kind-key,.season-scale,.season-control__row button{border-color:var(--hh-atlas-line);background:var(--hh-paper-raised)}
.kind-key>summary,.kind-key__label,.season-control__row button span,.season-scale__title,.season-scale li span{color:var(--hh-atlas-ink)}
.kind-key__note,.kind-key__count,.season-control__row button small,.season-scale__note,.season-scale li small{color:var(--hh-atlas-muted)}
.season-control__row button{border-radius:12px}.season-control__row button.is-on{border-color:var(--hh-pink);background:color-mix(in srgb,var(--hh-pink) 10%,var(--hh-paper-raised));box-shadow:inset 0 -4px 0 var(--hh-pink)}
.season-control__months button[data-now]{outline:2px dashed var(--hh-gold);outline-offset:-5px;box-shadow:none}
.hub-cluster{grid-template-rows:auto auto;place-content:center;gap:0;border:5px double var(--volume-1);border-radius:50%;background:var(--hh-map-overlay);color:var(--hh-map-overlay-ink);box-shadow:0 3px 0 rgba(42,27,61,.22),0 0 0 3px rgba(255,255,255,.88)}
.hub-cluster__count{font-weight:900}.hub-cluster__noun{letter-spacing:.12em}
.hub-marker__order{position:absolute;z-index:3;inset-inline-end:-10px;inset-block-start:-10px;display:grid;place-items:center;min-inline-size:29px;block-size:29px;border:3px solid #fff;border-radius:8px 8px 8px 2px;background:var(--hh-pink);color:#fff;box-shadow:0 3px 0 var(--volume-1);font:900 .76rem/1 Poppins,sans-serif;font-variant-numeric:tabular-nums;transform:none}
.hub-marker-wrap.is-pinned .hub-marker{border-width:4px;box-shadow:0 0 0 3px #fff,0 5px 0 rgba(42,27,61,.28)}
.leaflet-tooltip.hub-tip{gap:5px;max-inline-size:260px;border:2px solid rgba(255,255,255,.3);border-radius:14px;background:var(--volume-1);box-shadow:var(--hh-shadow-panel);padding:11px 13px}.hub-tip__name{font-size:1.08rem}.hub-tip__kind{font-size:.7rem}.hub-tip__act{border-block-start:1px dotted rgba(255,255,255,.28);padding-block-start:5px;color:var(--hh-gold);font-size:.72rem}
.state-panel{border:2px solid var(--hh-atlas-line-strong);border-block-start:5px solid var(--hh-orange);border-radius:var(--hh-radius-lg);background:var(--hh-paper-raised);box-shadow:var(--hh-shadow-panel);padding:18px 20px}.state-panel__head{align-items:center}.state-panel__close{border:1px solid var(--hh-atlas-line);border-radius:50%;background:var(--hh-paper-muted);color:var(--hh-atlas-ink)}.state-panel__desc,.state-panel__about .state-panel__lede{color:var(--hh-atlas-muted)}
.state-panel__groups{gap:17px}.state-group h3{color:var(--hh-atlas-muted)}.state-group__count{background:var(--hh-paper-muted)}.state-card{border-color:var(--hh-atlas-line);padding-block:8px}.state-card__pin{background:var(--hh-paper-raised)}.state-card__name{color:var(--hh-atlas-ink);text-decoration-color:var(--hh-atlas-line-strong)}
.leaflet-tooltip.state-abbr{color:var(--volume-1);text-shadow:0 1px 0 var(--hh-paper),0 0 5px var(--hh-paper);font-weight:900}

/* Secondary surfaces use the same restrained atlas cards. */
.collection-card,.park-facts__card,.team-list article,.source-log details,.hub-card,.trip-planner,.route-stops,.hub-trip{border-color:var(--hh-atlas-line);background:var(--hh-paper-raised);box-shadow:var(--hh-shadow-low)}
.collection-card{border-block-start:5px solid var(--hh-orange)}.collection-card:hover,.collection-card:focus-visible{border-color:var(--hh-pink);translate:0 -2px}
.hub-browse{background:var(--hh-paper-raised)}.guide-route article{border-radius:var(--hh-radius-md);padding-inline:10px}.guide-route article:hover{background:var(--hh-paper-muted)}

/* Dark mode routes components through intent, not literal paint.
   Atlas panels follow the active theme; controls over the deliberately light map keep light-map ink. */
.hub-results__check,.hub-results li button{background:var(--hh-paper-raised);color:var(--hh-atlas-ink)}
.hub-results span{color:var(--hh-atlas-muted)}
.map-draw__banner{background:var(--hh-paper-raised);color:var(--hh-atlas-ink)}
.hub-promo--books{background:var(--hh-paper-muted);color:var(--hh-atlas-ink)}
.book-grid>*{background:var(--hh-paper-raised);color:var(--hh-atlas-ink)}
.book-grid small{background:var(--hh-success-soft);color:var(--hh-atlas-ink)}
.season-control__row button{color:var(--hh-atlas-ink)}
.hub-trip h2{color:var(--hh-atlas-ink)}
.hub-trip__empty{color:var(--hh-atlas-muted)}
.map-legend{background:var(--hh-map-overlay);color:var(--hh-map-overlay-ink)}

@media (max-width:900px){
  .article-layout{grid-template-columns:minmax(0,1fr);gap:28px}.article-rail{position:static}.stop-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .site-header{min-block-size:76px;border-block-end-width:2px}.site-logo img{block-size:44px;inline-size:auto}
  .article-hero{min-block-size:280px}.article-hero h1{font-size:clamp(2rem,9vw,2.7rem);max-inline-size:100%;overflow-wrap:anywhere;word-break:normal}.article-hero--photo .article-hero__inner{padding-inline:18px}
  .article-hero--photo:not(.stop-hero) .article-hero__photo img{block-size:360px}
  .article-layout{padding:38px 18px 48px}.article-section{margin-block-end:48px}.article-section>header{align-items:flex-start}.article-section>header h2{font-size:1.55rem}
  .article-rail{order:2}.article-rail nav{padding:12px}.article-rail a{font-size:.86rem}
  .article-shell>.article-body,.article-shell>.location-cta,.article-shell>.related-locations,.article-shell>
  .article-shell>.article-body{padding-block:36px}.article-shell>.location-cta,.article-shell>.related-locations,.article-shell>
  .stop-hero.article-hero--photo,.stop-hero.article-hero--photo .article-hero__photo img{min-block-size:0;block-size:310px}.stop-hero.article-hero--photo .article-hero__inner{padding-block:24px 100px}.stop-hero.article-hero--photo .article-hero__photo figcaption{font-size:.67rem;line-height:1.35}.stop-hero:not(.article-hero--photo){min-block-size:285px;padding:48px 20px}.stop-layout{padding:36px 18px 46px}.stop-body{font-size:1rem;line-height:1.68}
  .daytrip-wrap{margin-inline:-4px}.daytrip-table th,.daytrip-table td{padding:11px 12px}.weekenders li{grid-template-columns:minmax(0,1fr) auto}.weekenders__where{grid-column:1/-1}
  .map-key-note{grid-template-columns:1fr}.hub-map{border-radius:16px}.state-panel{inset-inline:8px;max-block-size:65%;padding:16px}.state-card__add{min-block-size:44px}.state-card__acts{gap:8px 12px}
  .map-legend{background:var(--hh-paper-raised);color:var(--hh-atlas-ink)}
}
@media (max-width:390px){
  .article-hero h1,.stop-hero h1{font-size:clamp(1.95rem,8.8vw,2.35rem)}
  .food-stop__brewpubs,.practical-info__camping,.state-brewpubs,.state-campgrounds{padding-inline-end:12px}
  .season-control__months button{min-inline-size:48px;min-block-size:44px}.hub-tip__name{font-size:1rem}
}

/* HUB MAP LAYERS — PLANNING WORKSPACE
   The website is a desktop/tablet-first trip planner. Highway Heads Mile Markers stay visually
   primary; reference dots and their required source notes are quieter supporting information. */
.kind-key{margin:14px 0 0}
.hub-filters-wrap{
  border:1px solid var(--hh-atlas-line);border-radius:var(--hh-radius-md);
  background:var(--hh-paper-raised);box-shadow:var(--hh-shadow-low);padding:0 16px 16px;
}
.hub-filters-wrap>summary{
  gap:10px;color:var(--hh-atlas-ink);font-size:.94rem;letter-spacing:.01em;list-style:none;
}
.hub-filters-wrap>summary::-webkit-details-marker{display:none}
.hub-filters-wrap>summary::after{content:"Open";margin-inline-start:auto;color:var(--hh-pink-ink);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.hub-filters-wrap[open]>summary::after{content:"Close"}
.hub-filters-wrap .hub-filters{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;
  margin-block-start:4px;
}
.hub-filters fieldset{
  grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 9px;align-content:start;min-inline-size:0;border-color:var(--hh-atlas-line);
  border-radius:var(--hh-radius-sm);background:var(--hh-paper-muted);padding:10px 12px 12px;
}
.hub-filters legend{
  padding-inline:6px;color:var(--hh-atlas-ink);font-size:.72rem;letter-spacing:.09em;
}
.hub-filters label{
  min-inline-size:0;border:1px solid transparent;border-radius:10px;background:var(--hh-paper-raised);
  padding:7px 9px;color:var(--hh-atlas-ink);font-size:.8rem;line-height:1.25;cursor:pointer;
}
.hub-filters label:hover{border-color:var(--hh-atlas-line-strong)}
.hub-filters label:focus-within{outline:3px solid var(--hh-focus);outline-offset:1px}
.hub-filters input{inline-size:18px;block-size:18px;flex:0 0 auto;accent-color:var(--hh-pink)}
.hub-filters>button{
  min-block-size:44px;border-color:var(--hh-atlas-line);background:var(--hh-paper-raised);
  color:var(--hh-atlas-ink);font-size:.78rem;font-weight:700;cursor:pointer;
}
.hub-filters>button:hover,.hub-filters>button:focus-visible{border-color:var(--hh-pink);background:var(--hh-paper-muted)}
.hub-layer-note{grid-column:1/-1;margin:4px 0 0;border-block-start:1px dotted var(--hh-atlas-line-strong);padding:9px 2px 0;color:var(--hh-atlas-muted);font-size:.72rem;line-height:1.5;overflow-wrap:anywhere;animation:none;transition:none}
.hub-layer-note:empty{display:none}
.hub-layer-credit{
  display:flex;align-items:flex-start;gap:7px;margin:9px 0 14px;border-inline-start:3px solid var(--hh-atlas-line-strong);
  padding:7px 10px;color:var(--hh-atlas-muted);font-size:.68rem;line-height:1.5;overflow-wrap:anywhere;
  animation:none;transition:none;
}
.hub-layer-credit::before{content:"Sources";flex:0 0 auto;color:var(--hh-atlas-ink);font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kind-key__group{padding:16px 18px 18px}
.kind-key__group+.kind-key__group{border-block-start:1px solid var(--hh-atlas-line)}
.kind-key__heading{margin:0 0 11px;color:var(--hh-atlas-ink);font:800 .78rem/1.25 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.kind-key__list--dots{grid-template-columns:repeat(2,minmax(250px,1fr));gap:8px 18px}
.kind-key__list--dots li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 9px;align-items:start;border-radius:10px;padding:8px 9px;background:var(--hh-paper-muted)}
.kind-key__swatch--dot{grid-row:1/3;display:grid;place-items:center;inline-size:20px;block-size:20px;margin-block-start:1px}
.kind-key__list--dots .kind-key__label{font-weight:700}
.kind-key__blurb{grid-column:2;color:var(--hh-atlas-muted);font-size:.71rem;line-height:1.4}
.kind-key__group .kind-key__note{margin:12px 0 0;border-block-start:1px dotted var(--hh-atlas-line);padding-block-start:10px}

@media (max-width:900px) and (min-width:768px){
  .hub-filters-wrap .hub-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-filters fieldset{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub-filters>button{grid-column:auto}
  .kind-key__list--dots{grid-template-columns:repeat(2,minmax(220px,1fr))}
}

@media (max-width:767px){
  body:has(.hub-filters-wrap[open]){overflow:hidden;touch-action:none}
  body:has(.hub-filters-wrap[open])::after{
    content:"";position:fixed;z-index:1350;inset:0;background:rgba(42,27,61,.58);backdrop-filter:blur(2px);
  }
  .hub-filters-wrap[open]{position:fixed;z-index:1400;inset-inline:8px;inset-block-end:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr);max-block-size:min(80svh,680px);margin:0;border:2px solid var(--hh-atlas-line-strong);border-radius:20px;background:var(--hh-paper-raised);box-shadow:0 -12px 42px rgba(42,27,61,.34);padding:0;overflow:hidden}
  .hub-filters-wrap[open]>summary{
    position:sticky;z-index:1;inset-block-start:0;min-block-size:54px;border-block-end:1px solid var(--hh-atlas-line);
    background:var(--hh-paper-raised);padding:0 18px;font-size:1rem;
  }
  .hub-filters-wrap[open]>summary::after{content:"Close ×"}
  .hub-filters-wrap[open] .hub-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-block-size:none;margin:0;padding:14px 14px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
  }
  .hub-filters-wrap[open] .hub-filters fieldset{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}
  .hub-filters-wrap[open] .hub-filters label{min-block-size:48px;padding:7px 8px;font-size:.78rem}
  .hub-filters-wrap[open] .hub-filters>button{grid-column:auto;min-block-size:48px}
  .hub-filters-wrap[open]~#hub-card,.hub-filters-wrap[open]~#hub-trip{visibility:hidden;pointer-events:none}
  body:has(.hub-filters-wrap[open]) .desktop-nav.is-open{visibility:hidden;pointer-events:none}
  .kind-key__group{padding:14px}
  .kind-key__list--dots{grid-template-columns:1fr}
  .kind-key__list--dots li{padding:9px}
}

/* AirNow: the official AQI colour is kept as a swatch so the words stay readable (see hub-article-live.js). */
.hh-aqi-swatch{display:inline-block;inline-size:.7em;block-size:.7em;margin-inline-end:.4em;border:1px solid var(--hh-atlas-line-strong);border-radius:2px;vertical-align:baseline}
.hh-aqi-note{display:block;margin-block-start:.25rem;color:var(--hh-atlas-muted);font-size:.68rem;line-height:1.35}

/* Search and sharing additions, 2026-10-30 (CMO). Everything here is coloured through the
 * existing tokens, so both themes follow without a second block. The one literal is #fff on a
 * --hh-pink fill, which is the stylesheet's established pairing (.button--primary and others).
 *
 * Designer: the state directory and the breadcrumb are new surfaces, placed to keep the crawl
 * path intact rather than to win a layout argument. Refine them freely; the only structural
 * requirement is that every state page keeps a real <a> pointing at it. */
.breadcrumbs{max-inline-size:1160px;margin:14px auto 0;padding:0 clamp(16px,4vw,32px);font-size:.82rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:0;list-style:none}
.breadcrumbs li{display:flex;align-items:center;gap:8px;color:var(--hh-ink-muted)}
.breadcrumbs li+li::before{content:"\203A";opacity:.55}
.breadcrumbs a{color:var(--hh-pink-ink);text-decoration:none}
.breadcrumbs a:hover,.breadcrumbs a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.breadcrumbs [aria-current="page"]{color:var(--hh-ink)}

/* The state chip was already on every city page; it just was not a link, which is how 51 state
 * pages ended up with no inbound link anywhere in the Hub. It sits on the hero, so it inherits
 * the hero's own text colour rather than taking a link colour that would fail on a photograph. */
a.article-state{color:inherit;text-decoration:none;transition:background .15s}
a.article-state:hover,a.article-state:focus-visible{background:rgba(255,255,255,.28);text-decoration:underline;text-underline-offset:3px}
.stop-hero__where a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

.hub-states .state-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:8px;margin:18px 0 0;padding:0;list-style:none}
.state-directory a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-block-size:44px;padding:0 14px;border-radius:10px;background:var(--hh-paper);color:var(--hh-ink);font-weight:600;font-size:.92rem;text-decoration:none}
.state-directory a span{color:var(--hh-ink-muted);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.state-directory a:hover,.state-directory a:focus-visible{background:var(--hh-pink);color:#fff}
.state-directory a:hover span,.state-directory a:focus-visible span{color:#fff}

/* Full-screen map. The map is capped at min(64vh,620px) so the page below it stays reachable,
   which is right for the national view and wrong the moment you zoom past state level: you end
   up panning a letterbox, and scrolling for more map scrolls the map itself out of frame.
   The expand button lifts the whole panel - filters, months and map - so the controls stay
   usable at full size instead of being left behind on the page.
   Done with position:fixed rather than the Fullscreen API on purpose: iOS Safari refuses
   requestFullscreen on anything that is not a <video>, and a control that silently does nothing
   on iPhone is worse than no control. */
.hub-map-controls{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:0 0 12px}
.hub-map-controls>*{margin:0}
.hub-map-controls .hub-filters-wrap{flex:0 0 auto}
.hub-map-controls .season-control{flex:1 1 320px;min-width:0}
.map-full{position:absolute;z-index:600;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;min-block-size:44px;padding:0 14px;border:1px solid var(--hh-border);border-radius:12px;background:#fff;box-shadow:var(--shadow);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.map-full__out{display:none}
/* The pen sits under Full screen, in the same tool language: square, white, on the map. Its
   label is for screen readers and for the tooltip, not for the page. */
.map-pen{position:absolute;z-index:600;top:64px;right:12px;display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;padding:0;border:1px solid var(--hh-border);border-radius:12px;background:#fff;box-shadow:var(--shadow);cursor:pointer;color:var(--hh-ink)}
.map-pen__icon{inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.map-pen:hover{border-color:var(--hh-pink)}
.map-pen:focus-visible{outline:3px solid var(--hh-focus);outline-offset:2px}
.map-pen[aria-pressed="true"]{background:var(--hh-pink);border-color:var(--hh-pink);color:#fff}
.map-pen__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:760px){.map-pen{top:60px;right:8px}}
.map-full__in,.map-full__out{font-size:1rem;line-height:1}
.hub-map-panel.is-full{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;gap:0;margin:0;padding:12px;background:#f3edda}
.hub-map-panel.is-full .hub-map-controls{flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;margin:0 0 10px}
.hub-map-panel.is-full .hub-map-stage{flex:1 1 auto;min-block-size:0}
.hub-map-panel.is-full .hub-map{block-size:100%;min-block-size:0;border-radius:16px}
.hub-map-panel.is-full .map-full__in{display:none}
.hub-map-panel.is-full .map-full__out{display:inline}
body.hub-map-open{overflow:hidden}
@media (max-width:640px){
  .hub-map-controls{flex-direction:column;gap:8px}
  .hub-map-controls .season-control{flex:1 1 auto;width:100%}
  .map-full{top:8px;right:8px;padding:0;min-inline-size:44px;justify-content:center}
  .map-full__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hub-map-panel.is-full{padding:8px}
}

/* Add to my trip, on a guide page.
   Collect stops while reading, then hand the lot to the map as one link. Both controls ship
   hidden and are revealed by hub-trip-add.js: without JavaScript neither can work, and a dead
   button is worse than no button - the guides, the map and the shared link all work without it.
   The hero is a dark gradient, so the pill is white on it and inverts when the stop is on the
   trip; the heart is drawn in pink either way so the state reads without relying on colour. */
.trip-add{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-block-size:44px;padding:0 18px;border:2px solid #fff;border-radius:999px;background:#fff;color:var(--hh-ink-on-brand);font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.trip-add__icon{width:16px;height:16px;background:var(--hh-pink);clip-path:path("M8 14.7 1.9 8.6a4 4 0 0 1 5.6-5.7L8 3.4l.5-.5a4 4 0 0 1 5.6 5.7z")}
.trip-add[aria-pressed="true"]{background:var(--hh-pink);border-color:var(--hh-pink);color:#fff}
.trip-add[aria-pressed="true"] .trip-add__icon{background:#fff}
.trip-add:focus-visible{outline:3px solid var(--hh-focus);outline-offset:3px}
.trip-bar{position:fixed;z-index:900;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;min-block-size:48px;max-inline-size:calc(100vw - 32px);padding:0 22px;border-radius:999px;background:var(--hh-pink);color:#fff;box-shadow:var(--shadow);font-size:.85rem;font-weight:800;text-decoration:none}
.trip-bar::after{content:"→";margin-left:10px}
.trip-bar:focus-visible{outline:3px solid var(--hh-focus);outline-offset:3px}
.trip-bar[hidden]{display:none}
.trip-add[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.trip-bar{animation:trip-bar-in .18s ease-out}}
@keyframes trip-bar-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.hub-trip__book{display:inline-flex;align-items:center;min-block-size:44px;margin-top:10px;padding:0 18px;border-radius:999px;background:var(--hh-pink);color:#fff;font-size:.82rem;font-weight:800;text-decoration:none}
.hub-trip__book:focus-visible{outline:3px solid var(--hh-focus);outline-offset:3px}
/* Where data came from, beside the figure it produced. Quiet, but present on every page that
   states a number — a licence outlives whichever panel happens to be showing the data. */
.food-stop__credit,.state-brewpubs-credit{margin:6px 0 0;font-size:.72rem;color:var(--hh-ink-muted)}
/* The named brewery list. A listing, not a recommendation, and collapsed by default so the count
   stays the headline and the names are there for whoever wants them. */
.brewery-list{margin:10px 0 0}
.brewery-list summary{min-block-size:44px;display:flex;align-items:center;font-size:.82rem;font-weight:800;cursor:pointer;color:var(--hh-pink)}
.brewery-list ul{margin:8px 0 0;padding-left:1.1rem;font-size:.86rem}
.brewery-list li{margin-bottom:7px}
.brewery-list__where{display:block;color:var(--hh-ink-muted);font-size:.82rem}
.brewery-list__note{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:700;color:var(--hh-ink-muted)}
.brewery-list__caveat{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem}
/* State parks on a state page. Not Hub stops: a list of what exists, collapsed, with the same
   check-before-you-go caveat the brewery lists carry. */
.state-parks{padding:0 clamp(16px,5vw,64px) 8px}
.state-parks>p{max-width:46rem;color:var(--hh-ink-muted)}
.state-parks__list summary{min-block-size:44px;display:flex;align-items:center;font-size:.85rem;font-weight:800;cursor:pointer;color:var(--hh-pink)}
.state-parks__list ul{margin:10px 0 0;padding-left:1.1rem;columns:3;column-gap:28px;font-size:.86rem}
.state-parks__list li{margin-bottom:5px;break-inside:avoid}
.state-parks__caveat{margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}
.state-parks__credit{margin:8px 0 0;font-size:.72rem;color:var(--hh-ink-muted)}
@media (max-width:860px){.state-parks__list ul{columns:2}}
@media (max-width:560px){.state-parks__list ul{columns:1}}
/* National Park Service sites on a state page. Shown open, not collapsed: the median state has
   ten and the largest has thirty-seven, which is a list you read rather than one you hide. */
.nps-sites{padding:0 clamp(16px,5vw,64px) 8px}
.nps-sites>p{max-width:46rem;color:var(--hh-ink-muted)}
.nps-list{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px 24px}
.nps-list li{min-width:0;padding:8px 0;border-top:1px solid var(--hh-border);font-size:.9rem}
.nps-list a{font-weight:700;overflow-wrap:anywhere}
.nps-list__kind{display:block;font-size:.74rem;color:var(--hh-ink-muted)}
.nps-list__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}
.nps-list__credit{margin:8px 0 0;font-size:.72rem;color:var(--hh-ink-muted)}
/* ODbL requires attribution, so the credit sits with the figures it produced rather than in a
   data file nobody fetches. Same placement rule as the brewery and park credits. */
.daytrip-table__credit{margin:6px 0 0;font-size:.72rem;color:var(--hh-ink-muted)}
/* Every place we cover: region, then state, then places. The map answers "what is near me";
   this answers "what have you got", and a road tripper picks a part of the country long before
   they pick a state. */
.places-shell .article-hero__inner p{max-width:46rem}
.places-jump{display:flex;flex-wrap:wrap;gap:8px;padding:16px clamp(16px,5vw,64px)}
.places-jump a{display:inline-flex;align-items:center;min-block-size:44px;padding:0 16px;border:1px solid var(--hh-border);border-radius:999px;background:#fff;font-size:.8rem;font-weight:800;text-decoration:none}
/* Region accent. The same five colours the map washes each state with, so the printed list and
   the map agree. Kept in step with assets/hub-regions.js by tests/regions-colour.test.mjs. */
:root{
  --region-west:#6E5209;--region-midwest:#2E5A24;--region-southcentral:#7A2020;
  --region-southeast:#0E5553;--region-northeast:#43307A;--region-offmainland:#2C4660;
  --region-accent:var(--hh-pink-ink);
}
[data-region=west]{--region-accent:var(--region-west)}
[data-region=midwest]{--region-accent:var(--region-midwest)}
[data-region=southcentral]{--region-accent:var(--region-southcentral)}
[data-region=southeast]{--region-accent:var(--region-southeast)}
[data-region=northeast]{--region-accent:var(--region-northeast)}
[data-region=offmainland]{--region-accent:var(--region-offmainland)}
.places-region{padding:8px clamp(16px,5vw,64px) 28px;scroll-margin-top:80px}
.places-region__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:8px;border-bottom:2px solid var(--region-accent)}
.places-region__head h2{margin:0;color:var(--region-accent)}
.places-region .places-state h3 a{color:var(--region-accent);text-decoration-color:color-mix(in srgb,var(--region-accent) 45%,transparent)}
.places-jump a[data-region]{border-color:color-mix(in srgb,var(--region-accent) 55%,var(--hh-border));color:var(--region-accent)}
.places-region__head p{margin:0;font-size:.8rem;font-weight:700;color:var(--hh-ink-muted);font-variant-numeric:tabular-nums}
.places-region__states{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px 28px;margin-top:18px}
.places-state{min-width:0}
.places-state h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:1rem}
.places-state h3 small{font-size:.72rem;font-weight:700;color:var(--hh-ink-muted);font-variant-numeric:tabular-nums}
.places-list{margin:0;padding:0;list-style:none;font-size:.88rem}
.places-list li{padding:4px 0;border-top:1px solid var(--hh-border);overflow-wrap:anywhere}
.places-list__kind{display:block;font-size:.72rem;color:var(--hh-ink-muted)}
.hub-states__all{margin:6px 0 10px}
.hub-states__all a{font-weight:800;color:var(--hh-pink)}
/* Historic places to eat. Unlike the brewery list under it, every row here was researched and
   cites its own source, so the layout gives each one room and leads with the year. */
.food-historic{margin:14px 0 18px}
.food-historic h3{margin:0 0 4px;font-size:1rem}
.food-historic__note{margin:0 0 10px;font-size:.8rem;color:var(--hh-ink-muted);max-width:44rem}
.food-historic ul{margin:0;padding:0;list-style:none}
.food-historic li{display:grid;grid-template-columns:3.4rem 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--hh-border)}
.food-historic__year{font-weight:800;color:var(--hh-pink);font-variant-numeric:tabular-nums;font-size:.9rem}
.food-historic__hook{display:block;margin-top:2px;font-size:.85rem;color:var(--hh-ink-muted)}
.food-historic__unconfirmed{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:999px;background:rgba(255,194,75,.25);font-size:.7rem;font-weight:700}
@media (max-width:520px){.food-historic li{grid-template-columns:2.8rem 1fr;gap:8px}}
/* On a stop page the list is a section of its own, so the section's own spacing governs; and the
   town is named because the place is near the stop, not at it. */
.food-historic--stop{margin:0}
.food-historic__where{display:block;margin-top:1px;font-size:.78rem;font-weight:700;color:var(--hh-pink)}

/* ------------------------------------------------------------------------------------------
   TOWN NAMES ON THE MAP (Tee, 2026-10-31: "make it visible and a point of reference ... they
   see So Cal but where is Anaheim and where is San Diego from there?")

   Deliberately the quietest type on the map. These are not Mile Markers and must not read as
   one: no pin, no dot, no box, no underline, nothing that invites a click — and the pane itself
   takes no pointer events, so a name can never swallow the hover that opens a state. The halo
   is what makes grey type legible over a red interstate or a blue lake; it is a text-shadow in
   paper colour rather than a filled box, because a box would turn 60 names into 60 cards.
   ------------------------------------------------------------------------------------------ */
.hub-place-label{display:flex;align-items:baseline;gap:4px;width:max-content;transform:translate(-50%,-50%);color:#6B6475;font:600 10.5px/1 Poppins,sans-serif;letter-spacing:.015em;white-space:nowrap;pointer-events:none;text-shadow:0 1px 0 var(--hh-paper,#FFF9F3),0 -1px 0 var(--hh-paper,#FFF9F3),1px 0 0 var(--hh-paper,#FFF9F3),-1px 0 0 var(--hh-paper,#FFF9F3),0 0 5px var(--hh-paper,#FFF9F3)}
/* The state code rides along only on the smallest towns, where a driver may genuinely not know
   which state they have crossed into. Lighter than the name, so the name still reads first. */
.hub-place-label i{color:#938C9D;font:600 8.5px/1 Poppins,sans-serif;font-style:normal;letter-spacing:.06em}
/* The map is deliberately light in both themes (the controls over it keep light-map ink), so
   these keep the same paper halo rather than inverting with the page. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hub-place-label{color:#6B6475}
  :root:not([data-theme="light"]) .hub-place-label i{color:#938C9D}
}
/* The region accents are dark enough to read on paper, which makes them too dark to read on the
   night page, so each one has a lighter twin rather than being lightened by opacity. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --region-west:#E8C266;--region-midwest:#9ED47A;--region-southcentral:#F09A9A;
    --region-southeast:#5FC9CE;--region-northeast:#BCA6EE;--region-offmainland:#9FC0DC;
  }
}
:root[data-theme="dark"]{
  --region-west:#E8C266;--region-midwest:#9ED47A;--region-southcentral:#F09A9A;
  --region-southeast:#5FC9CE;--region-northeast:#BCA6EE;--region-offmainland:#9FC0DC;
}

/* ------------------------------------------------------------------------------------------
   Lakes
   Three surfaces, one look: a numbered section inside a city page, a section of its own on a
   stop page, and a block on the state page. The facets are a two-column grid rather than prose
   because a family scans them — "is there swimming, can we camp, what does it cost" — and the
   sheet's own text is long enough that a paragraph buries the answer.
   The caveat matches the park lists above on purpose: same gold rule, same wording pattern, so
   a reader learns one signal for "we did not check this" across the whole Hub.
   ------------------------------------------------------------------------------------------ */
.lakes{margin:14px 0 18px}
.lakes--state{padding:0 clamp(16px,5vw,64px) 8px}
.lakes--stop{margin:0}
.lakes__note{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.lakes__list{margin:0;padding:0;list-style:none}
.lakes__lake{padding:12px 0;border-top:1px solid var(--hh-border)}
.lakes__lake h3{margin:0;font-size:1rem}
.lakes__lake h3 a{overflow-wrap:anywhere}
.lakes__meta{display:block;margin-top:2px;font-size:.78rem;color:var(--hh-ink-muted)}
/* The two columns belong to each ROW, not to the list. On the list they made every <li> a
   single cell, so two whole facets sat side by side and "Boating: yes, motorized" wrapped one
   word per line down a 90px column. */
.lakes__facets{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:.85rem}
.lakes__facets li{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:baseline}
.lakes__label{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.lakes__value{min-width:0;overflow-wrap:anywhere}
.lakes__safety{margin:8px 0 0;font-size:.8rem;color:var(--hh-ink-muted)}
.lakes__agency{margin:4px 0 0;font-size:.74rem;color:var(--hh-ink-muted)}
.lakes__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}
/* Under about 520px the label column squeezes the value into two or three characters a line, so
   the pair stacks instead. */
@media (max-width:560px){
  .lakes__facets li{grid-template-columns:1fr;gap:2px}
  .lakes__label{padding-top:6px}
}

/* Wineries and distilleries -----------------------------------------------------------------
   Deliberately the same furniture as the lake lists above — same row rhythm, same label column,
   same gold caveat rule — because a reader who has learned that gold band means "we did not
   check this" on one section should not have to learn it again on the next.
   Two differences, both earned. The badge: the only thing this section ever states about
   children in our own words is a BAR, so it is the only thing with a badge, and it is solid
   rather than outlined so it cannot be skimmed past. Nothing here ever badges a place as
   welcoming children; that wording is printed verbatim in the Children row instead.
   And the fold: Louisville carries 26 producers within the radius where most cities carry one,
   so rows past the tenth sit in a <details> that says how many it holds.
   Labels take --hh-pink-ink rather than --hh-pink, because that is the one of the two that is
   redefined for dark mode.
   ------------------------------------------------------------------------------------------ */
/* The badge inverts rather than dimming. A dark pill on cream is a block you cannot skim past;
   the same pill on the night page is #2A0F3A on #151020, which reads as bare white text with no
   chip around it at all — the one thing this badge exists to avoid. So the two colours are
   tokens on the section and they swap, which keeps a solid block in both themes. They are
   declared on .wineries rather than :root because an element's own custom property beats one
   inherited from the root, so the dark overrides have to reach the same element. */
.wineries{margin:14px 0 18px;--wineries-badge-bg:var(--hh-purple-900);--wineries-badge-ink:#FFF9F3}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wineries{--wineries-badge-bg:#FFF9F3;--wineries-badge-ink:#2A0F3A}
}
:root[data-theme="dark"] .wineries{--wineries-badge-bg:#FFF9F3;--wineries-badge-ink:#2A0F3A}
.wineries--state{padding:0 clamp(16px,5vw,64px) 8px}
.wineries__note{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.wineries__list{margin:0;padding:0;list-style:none}
.wineries__producer{padding:12px 0;border-top:1px solid var(--hh-border)}
.wineries__producer h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.wineries__producer h3 a{overflow-wrap:anywhere}
.wineries__badge{border-radius:999px;background:var(--wineries-badge-bg);color:var(--wineries-badge-ink);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.wineries__meta{display:block;margin-top:2px;font-size:.78rem;color:var(--hh-ink-muted)}
.wineries__note-line{margin:6px 0 0;font-size:.85rem}
/* The two columns belong to each ROW, not to the list — same correction the lake facets needed. */
.wineries__facets{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:.85rem}
.wineries__facets li{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:baseline}
.wineries__label{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.wineries__value{min-width:0;overflow-wrap:anywhere}
.wineries__address{margin:8px 0 0;font-size:.74rem;color:var(--hh-ink-muted)}
.wineries__rest summary{min-block-size:44px;display:flex;align-items:center;font-size:.82rem;font-weight:800;cursor:pointer;color:var(--hh-pink-ink)}
.wineries__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}
@media (max-width:560px){
  .wineries__facets li{grid-template-columns:1fr;gap:2px}
  .wineries__label{padding-top:6px}
}

/* Zoos, aquariums and wildlife parks.
   The badge uses the same inverting token pair the producer lists use: a fixed-purple pill with
   near-white ink in light mode, swapped in dark, because a theme-following ink over a surface
   that does not flip is invisible in exactly one of the two themes. */
.zoos{margin:14px 0 18px;--zoos-badge-bg:var(--hh-purple-900);--zoos-badge-ink:#FFF9F3}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .zoos{--zoos-badge-bg:#FFF9F3;--zoos-badge-ink:#2A0F3A}
}
:root[data-theme="dark"] .zoos{--zoos-badge-bg:#FFF9F3;--zoos-badge-ink:#2A0F3A}
.zoos__intro{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.zoos__list{margin:0;padding:0;list-style:none}
.zoos__place{padding:12px 0;border-top:1px solid var(--hh-border)}
.zoos__place h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.zoos__place h4 a{overflow-wrap:anywhere}
.zoos__badge{border-radius:999px;background:var(--zoos-badge-bg);color:var(--zoos-badge-ink);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.zoos__mark{font-weight:800;color:var(--hh-pink-ink)}
.zoos__where{font-size:.78rem;font-weight:600;color:var(--hh-ink-muted)}
.zoos__facts{margin:8px 0 0;display:grid;gap:4px;font-size:.85rem}
.zoos__facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:baseline}
.zoos__facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.zoos__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.zoos__note{margin:8px 0 0;font-size:.85rem}
.zoos__unconfirmed{margin:6px 0 0;font-size:.76rem;color:var(--hh-ink-muted);max-width:46rem}
.zoos__more summary{min-block-size:44px;display:flex;align-items:center;font-size:.82rem;font-weight:800;cursor:pointer;color:var(--hh-pink-ink)}
.zoos__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}

/* ───────────────────────────────────────────────────────────────────────────
   PRINT
   Tee, 2026-11-02: "Print and mobile friendly should be something we have
   available to all users."

   Until now only the road book printed properly — booklet.css carried the only
   @media print block on the site, so all 348 generated pages printed with their
   navigation, map, filters and trip controls intact and their folded sections
   hidden.

   Three rules decide what follows.

   1. CHROME GOES, CONTENT STAYS. Anything whose job is to help you move around
      the site is useless on paper.
   2. THE DISCLAIMER STAYS. .site-footer__notice carries "our guides are not
      recommendations" and the warning that hours and fees change. A printed page
      travels further than a web page and arrives with no context around it, so
      that notice matters MORE on paper, not less.
   3. FOLDED CONTENT UNFOLDS. A <details> that hides 40 wineries hides them from
      the printer too. Paper has no "see the other 16".
   ─────────────────────────────────────────────────────────────────────────── */
@media print{
  @page{size:A4 portrait;margin:14mm}

  html,body{background:#fff!important;color:#000!important}

  /* Wayfinding, interaction and anything that needs a cursor. */
  .site-header,.hub-nav,.site-nav,.hub-sections,.breadcrumbs,
  .article-rail,.hub-map,.hub-map-stage,.hub-map-controls,.hub-map-panel,
  .hub-filters,.hub-filters-wrap,.hub-discovery,.hub-browse,
  .hub-trip,.trip-bar,.trip-add,.mini-game,
  .state-preview,.hub-planner,.foot .foot-join,.foot .foot-grid,.foot .foot-end,
  .site-footer img,.site-footer nav,
  button,[role="button"],input,select{display:none!important}

  /* The notice is the exception: it is the one piece of chrome that belongs on
     paper, because a printout is read away from everything that explains it. */
  .site-footer{display:block!important;margin-top:8mm;padding-top:4mm;border-top:1px solid #999}
  .site-footer__notice{display:block!important;font-size:8.5pt;line-height:1.45;color:#000}

  /* Give the content the page. */
  .article-layout{display:block}
  .article-content,.hub-shell,.state-shell{max-width:none;margin:0;padding:0}
  .article-hero,.article-hero__photo{display:none!important}

  /* A heading should not be the last thing on a page. */
  h1,h2,h3,h4{break-after:avoid;color:#000}
  .article-section{break-inside:avoid;margin:0 0 6mm}
  figure,table,dl,.wineries__place,.zoos__place,.lakes__row{break-inside:avoid}

  /* Folded sections print open. Closed <details> is a reading affordance, and
     paper does not read. */
  details{display:block!important}
  details>summary{display:none!important}
  details>*{display:block!important}

  /* A link nobody can click should say where it went. Only inside the article,
     and only off-site: printing every internal href turns a guide into a list
     of addresses. */
  .article-section a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;word-break:break-all;color:#333}

  /* Flat on paper. */
  .wineries__caveat,.zoos__caveat,.lakes__caveat{background:none!important;border-left:2px solid #000}
  .zoos__badge,.wineries__badge{background:none!important;color:#000!important;border:1px solid #000}
}

/* ───────────────────────────────────────────────────────────────────────────
   PHONE: the map comes first.
   Measured on a 375x812 screen before this rule: the map's top edge sat 766px
   down, so a visitor scrolled nearly a full screen past the hero, the planner
   form and 122px of filter controls before seeing the thing they came to use.
   The filters belong under the map on a phone — they describe it, and nobody
   filters a map they have not looked at yet. Moving them is 122px, which puts
   the map's top edge on the first screen.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .hub-map-panel{display:flex;flex-direction:column}
  .hub-map-stage{order:1}
  .hub-map-controls{order:2;margin-top:12px}
}

/* Venues and annual events. One section, two groups — see tools/lib/events.mjs for why.
   The kind pill reuses the same inverting token pair the producer and zoo badges use: a fixed
   surface with ink that flips, because a theme-following ink over a surface that does not flip
   is invisible in exactly one of the two themes. */
.events{margin:14px 0 18px;--events-pill-bg:var(--hh-paper-muted);--events-pill-ink:var(--hh-purple-900)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .events{--events-pill-bg:#2B2034;--events-pill-ink:#FFF9F3}
}
:root[data-theme="dark"] .events{--events-pill-bg:#2B2034;--events-pill-ink:#FFF9F3}
.events__intro{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.events__group{margin:18px 0 6px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-pink-ink)}
.events__list{margin:0;padding:0;list-style:none}
.events__row{padding:12px 0;border-top:1px solid var(--hh-border)}
.events__row h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.events__row h4 a{overflow-wrap:anywhere}
.events__kind{border-radius:999px;background:var(--events-pill-bg);color:var(--events-pill-ink);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.events__mark{font-weight:800;color:var(--hh-pink-ink)}
.events__where{font-size:.78rem;font-weight:600;color:var(--hh-ink-muted)}
.events__facts{margin:8px 0 0;display:grid;gap:4px;font-size:.85rem}
.events__facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:baseline}
.events__facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.events__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.events__note{margin:8px 0 0;font-size:.85rem}
.events__unconfirmed{margin:6px 0 0;font-size:.76rem;color:var(--hh-ink-muted);max-width:46rem}
.events__more summary{min-block-size:44px;display:flex;align-items:center;font-size:.82rem;font-weight:800;cursor:pointer;color:var(--hh-pink-ink)}
.events__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}

/* Amusement, water and theme parks. The season badge is the most useful thing on a row for a
   family picking a date, so it gets the solid treatment and the type gets the quiet one. */
.parks{margin:14px 0 18px;--parks-season-bg:var(--hh-purple-900);--parks-season-ink:#FFF9F3;--parks-kind-bg:var(--hh-paper-muted);--parks-kind-ink:var(--hh-purple-900)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .parks{--parks-season-bg:#FFF9F3;--parks-season-ink:#2A0F3A;--parks-kind-bg:#2B2034;--parks-kind-ink:#FFF9F3}
}
:root[data-theme="dark"] .parks{--parks-season-bg:#FFF9F3;--parks-season-ink:#2A0F3A;--parks-kind-bg:#2B2034;--parks-kind-ink:#FFF9F3}
.parks__intro{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.parks__list{margin:0;padding:0;list-style:none}
.parks__park{padding:12px 0;border-top:1px solid var(--hh-border)}
.parks__park h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.parks__park h4 a{overflow-wrap:anywhere}
.parks__season{border-radius:999px;background:var(--parks-season-bg);color:var(--parks-season-ink);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.parks__kind{border-radius:999px;background:var(--parks-kind-bg);color:var(--parks-kind-ink);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.parks__mark{font-weight:800;color:var(--hh-pink-ink)}
.parks__where{font-size:.78rem;font-weight:600;color:var(--hh-ink-muted)}
.parks__facts{margin:8px 0 0;display:grid;gap:4px;font-size:.85rem}
.parks__facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:baseline}
.parks__facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.parks__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.parks__note{margin:8px 0 0;font-size:.85rem}
.parks__unconfirmed{margin:6px 0 0;font-size:.76rem;color:var(--hh-ink-muted);max-width:46rem}
.parks__more summary{min-block-size:44px;display:flex;align-items:center;font-size:.82rem;font-weight:800;cursor:pointer;color:var(--hh-pink-ink)}
.parks__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}

/* Beaches, modelled on .parks. The badge colours are declared as a token pair and redefined for
   both dark-mode selectors, so the section inverts with the theme instead of going ink-on-ink. */
.beaches{margin:14px 0 18px;--beach-sand-bg:var(--hh-purple-900);--beach-sand-ink:#FFF9F3}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .beaches{--beach-sand-bg:#FFF9F3;--beach-sand-ink:#2A0F3A}
}
:root[data-theme="dark"] .beaches{--beach-sand-bg:#FFF9F3;--beach-sand-ink:#2A0F3A}
.beaches__intro{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.beaches__list{margin:0;padding:0;list-style:none}
.beaches__beach{padding:12px 0;border-top:1px solid var(--hh-border)}
.beaches__beach h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.beaches__beach h4 a{overflow-wrap:anywhere}
.beaches__sand{border-radius:999px;background:var(--beach-sand-bg);color:var(--beach-sand-ink);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.beaches__water,.beaches__where{font-size:.78rem;font-weight:600;color:var(--hh-ink-muted)}
.beaches__facts{margin:8px 0 0;display:grid;gap:4px;font-size:.85rem}
.beaches__facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.beaches__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.beaches__fee{margin:8px 0 0;font-size:.85rem}
.beaches__note{margin:8px 0 0;font-size:.85rem}
.beaches__agency{margin:6px 0 0;font-size:.74rem;color:var(--hh-ink-muted)}
.beaches__more{margin:10px 0 0}
.beaches__more summary{cursor:pointer;font-weight:700;color:var(--hh-pink-ink)}
.beaches__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}

/* Ski areas, bike parks and long trails. Badge colours as a token pair, so they invert. */
.skibike{margin:14px 0 18px;--skibike-badge-bg:var(--hh-purple-900);--skibike-badge-ink:#FFF9F3}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .skibike{--skibike-badge-bg:#FFF9F3;--skibike-badge-ink:#2A0F3A}
}
:root[data-theme="dark"] .skibike{--skibike-badge-bg:#FFF9F3;--skibike-badge-ink:#2A0F3A}
.skibike__intro{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.skibike__list{margin:0;padding:0;list-style:none}
.skibike__place{padding:12px 0;border-top:1px solid var(--hh-border)}
.skibike__place h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.skibike__place h4 a{overflow-wrap:anywhere}
.skibike__badge{border-radius:999px;background:var(--skibike-badge-bg);color:var(--skibike-badge-ink);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.skibike__mark{font-weight:800;color:var(--hh-pink-ink)}
.skibike__where{font-size:.78rem;font-weight:600;color:var(--hh-ink-muted)}
.skibike__facts{margin:8px 0 0;display:grid;gap:4px;font-size:.85rem}
.skibike__facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.skibike__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.skibike__note{margin:8px 0 0;font-size:.85rem}
.skibike__unconfirmed{margin:6px 0 0;font-size:.78rem;color:var(--hh-ink-muted)}
.skibike__more{margin:10px 0 0}
.skibike__more summary{cursor:pointer;font-weight:700;color:var(--hh-pink-ink)}
.skibike__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}

/* Historic sites. The gap line is the point of this section, so it reads as a sentence. */
.sites{margin:14px 0 18px}
.sites__intro{margin:0 0 12px;font-size:.8rem;color:var(--hh-ink-muted);max-width:46rem}
.sites__list{margin:0;padding:0;list-style:none}
.sites__site{padding:12px 0;border-top:1px solid var(--hh-border)}
.sites__site h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.sites__site h4 a{overflow-wrap:anywhere}
.sites__kind{border-radius:999px;background:var(--hh-paper-muted);color:var(--hh-purple-900);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.sites__where{font-size:.78rem;font-weight:600;color:var(--hh-ink-muted)}
.sites__facts{margin:8px 0 0;display:grid;gap:4px;font-size:.85rem}
.sites__facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.sites__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sites__gap{color:var(--hh-ink-muted);font-style:italic}
.sites__src{font-size:.72rem;white-space:nowrap}
.sites__note{margin:8px 0 0;font-size:.85rem}
.sites__flags{margin:8px 0 0;padding-left:1.1rem;font-size:.8rem;color:var(--hh-ink-muted)}
.sites__flags li{margin-bottom:3px}
.sites__agency{margin:6px 0 0;font-size:.74rem;color:var(--hh-ink-muted)}
.sites__more{margin:10px 0 0}
.sites__more summary{cursor:pointer;font-weight:700;color:var(--hh-pink-ink)}
.sites__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}

/* Roadside oddities. Shares the sites layout — one visual language for "a list of things near
   you" — plus a mileage chip, which no other list can show because no other list holds a
   coordinate per row. */
.oddity__list{margin:0;padding:0;list-style:none}
.oddity{padding:12px 0;border-top:1px solid var(--hh-border)}
.oddity h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.oddity h4 a{overflow-wrap:anywhere}
.oddity__kind{border-radius:999px;background:var(--hh-paper-muted);color:var(--hh-purple-900);padding:3px 9px;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.oddity__where{font-size:.78rem;font-weight:600;color:var(--hh-ink-muted)}
.oddity__away{border-radius:999px;border:1px solid var(--hh-border);padding:2px 8px;font-size:.68rem;font-weight:700;color:var(--hh-ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.oddity__facts{margin:8px 0 0;display:grid;gap:4px;font-size:.85rem}
.oddity__facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.oddity__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.oddity__gap{color:var(--hh-ink-muted);font-style:italic}
.oddity__note{margin:8px 0 0;font-size:.85rem}
.oddity__flags{margin:8px 0 0;padding-left:1.1rem;font-size:.8rem;color:var(--hh-ink-muted)}
.oddity__flags li{margin-bottom:3px}
.oddity__src{margin:6px 0 0;font-size:.72rem}
.oddity__more{margin:10px 0 0}
.oddity__more summary{cursor:pointer;font-weight:700;color:var(--hh-pink-ink)}
.oddity__caveat{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}

/* Scenic byway pages. The ordered list of places on a designated road — the ordering is the
   product, so the numbering is visible and the off-route figure sits beside each name. */
.byway-hero__meta{margin:6px 0 0;font-size:.85rem;font-weight:600;opacity:.85}
.byway-quote{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--hh-purple-900);background:var(--hh-paper-muted)}
.byway-quote p{margin:0;font-size:.95rem}
.byway-quote footer{margin:6px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--hh-ink-muted)}
.byway-facts{margin:0 0 16px;display:grid;gap:6px;font-size:.85rem}
.byway-facts dt{font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-pink-ink)}
.byway-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.byway-contacts{margin:0 0 16px}
.byway-contacts h3{margin:0 0 6px;font-size:.9rem}
.byway-contacts ul{margin:0;padding-left:1.1rem;font-size:.82rem;color:var(--hh-ink-muted)}
.byway-intro{margin:0 0 10px;font-size:.9rem;max-width:46rem}
.byway-oddities{margin:0 0 10px;font-size:.85rem;max-width:46rem}
.byway-howfar{margin:0 0 20px;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.78rem;max-width:46rem}
.byway-seg{margin:0 0 22px}
.byway-seg__head{margin:0 0 8px;font-size:1rem}
.byway-stops{margin:0;padding-left:1.6rem}
.byway-stop{padding:8px 0;border-top:1px solid var(--hh-border)}
.byway-stop h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:1rem}
.byway-stop__state{font-size:.68rem;font-weight:800;letter-spacing:.05em;color:var(--hh-ink-muted)}
.byway-stop__off{border-radius:999px;border:1px solid var(--hh-border);padding:2px 8px;font-size:.68rem;font-weight:700;color:var(--hh-ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.byway-stop__tag--oddity{border-radius:999px;background:rgba(177,82,19,.14);color:#B15213;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.byway-stop__also,.byway-stop__note,.byway-stop__holds,.byway-stop__noguide{margin:4px 0 0;font-size:.8rem}
.byway-stop__holds{color:var(--hh-ink-muted)}
.byway-stop__noguide{color:var(--hh-ink-muted);font-style:italic}
.byway-stop__tag--beach{border-radius:999px;background:rgba(31,122,107,.14);color:#1F7A6B;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.byway-stop__facts{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:.78rem}
.byway-stop__facts div{display:contents}
.byway-stop__facts dt{font-weight:800;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--hh-ink-muted)}
.byway-stop__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* Map or grid: two ways into the same atlas, over the same trip. The switch sits above both so
   neither reads as the fallback. */
.view-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.view-switch__btn{border:1px solid var(--hh-border);background:var(--hh-paper);color:var(--hh-ink);border-radius:999px;padding:6px 16px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.view-switch__btn:hover{border-color:var(--hh-pink-ink)}
.view-switch__btn.is-on{background:var(--hh-purple-900);border-color:var(--hh-purple-900);color:#fff}
.view-switch__btn:focus-visible{outline:3px solid var(--hh-gold);outline-offset:2px}
.view-switch__hint{font-size:.74rem;color:var(--hh-ink-muted)}

.state-grid__lede{margin:0 0 16px;font-size:.88rem;color:var(--hh-ink-muted);max-width:46rem}
.state-grid__region{margin:0 0 20px}
.state-grid__region h4{margin:0 0 8px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-pink-ink)}
.state-grid__tiles{margin:0;padding:0;list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.atlas-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:6px;padding:10px;border:1px solid var(--hh-border);border-radius:14px;background:var(--hh-paper);text-decoration:none;color:var(--hh-ink);height:100%}
.atlas-card:hover{border-color:var(--hh-pink-ink);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.atlas-card:focus-visible{outline:3px solid var(--hh-gold);outline-offset:2px}
.atlas-card__name{font-size:1rem;font-weight:800;line-height:1.2}
/* height:auto is load-bearing. The img carries width="800" height="450" so the browser reserves
   the right box before the file arrives, but that height attribute is a presentational hint, and
   while height is not auto the aspect-ratio below is ignored outright - the thumbnails rendered
   450px tall and portrait. */
.atlas-card__thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:var(--hh-paper-muted)}
.atlas-card__thumb--none{display:block;width:100%;aspect-ratio:16/9;border-radius:9px;background:repeating-linear-gradient(45deg,var(--hh-paper-muted),var(--hh-paper-muted) 10px,var(--hh-paper) 10px,var(--hh-paper) 20px)}
.atlas-card__stats{font-size:.78rem;font-weight:700;color:var(--hh-ink);font-variant-numeric:tabular-nums}
/* The credit is small but never hidden: for the 15 CC BY and CC BY-SA photographs it is a
   licence condition. Clamped to two lines so one long attribution cannot stretch a card. */
.atlas-card__credit{font-size:.6rem;line-height:1.35;color:var(--hh-ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.atlas-card__go{margin-top:auto;font-size:.74rem;font-weight:800;color:var(--hh-pink-ink)}
.state-grid__panel:empty{display:none}
.state-grid__panel{margin:4px 0 16px}
.state-grid__all{margin:0;font-size:.82rem;font-weight:700}

/* Pictures in the cards. Tee, 2026-11-03: "our site needs more life and more life would be more
   images." The credit under each is a licence condition, not decoration: 215 of the 273 place
   photographs are CC BY or CC BY-SA. */
.hub-card__photo{margin:10px 0;display:block}
.hub-card__photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--hh-paper-muted)}
.hub-card__photo figcaption{margin:4px 0 0;font-size:.6rem;line-height:1.35;color:var(--hh-ink-muted)}
.hub-card__photo figcaption a{color:inherit}
/* The panel row's small shot sits where the pin does, so a row with a picture and one without
   line up rather than stepping in and out. */
.state-card__shot{width:46px;height:46px;object-fit:cover;border-radius:8px;background:var(--hh-paper-muted)}
/* Says why the grid just got shorter, and offers the way back. */
.state-grid__filter{margin:0 0 14px;padding:8px 12px;border-left:3px solid var(--hh-pink-ink);background:var(--hh-paper-muted);font-size:.82rem;max-width:46rem}
.state-grid__filter button{margin-left:6px;border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--hh-pink-ink);cursor:pointer;text-decoration:underline}

/* The Hub's own sections, under the site navigation. Tee, 2026-11-03: one nav for the website,
   and the Hub's own wayfinding in the body of the page. These are real pages, not anchors into
   the Hub homepage — the old "Map" and "Guides" items pointed at /hub/#... and so threw a reader
   off whatever page they were reading. */
.hub-sections{display:flex;flex-wrap:wrap;gap:4px 18px;padding:9px clamp(16px,4vw,40px);border-bottom:1px solid var(--hh-border);background:var(--hh-paper-muted)}
.hub-sections a{font-size:.8rem;font-weight:700;text-decoration:none;color:var(--hh-ink-muted);padding-block:4px}
.hub-sections a:hover{color:var(--hh-pink-ink)}
.hub-sections a[aria-current="page"]{color:var(--hh-pink-ink)}
.desktop-nav .soon{display:flex;align-items:center;font-weight:700;color:var(--hh-ink-muted);cursor:default}
.desktop-nav .nav-cta{color:var(--hh-pink-ink)}
@media (max-width:767px){
  /* Six section links wrap to two rows on a phone. Tighter type and spacing keeps that band
     under an inch so it never pushes the page's own heading off the first screen. */
  .hub-sections{gap:2px 14px;padding:7px 16px}
  .hub-sections a{font-size:.74rem;padding-block:2px}
}

/* What to wear. Content prepared 2026-10-14, never installed until now. */
.wear__intro{font-size:1rem;max-width:46rem}
.wear__note{margin:0 0 18px;padding:10px 12px;border-left:3px solid var(--hh-gold);background:rgba(255,194,75,.12);font-size:.82rem;max-width:46rem}
.wear__jump{margin:0 0 28px;font-size:.78rem;line-height:2}
.wear__jump b{margin-right:6px;color:var(--hh-ink-muted)}
.wear__jump a{display:inline-block;min-width:30px;padding:2px 6px;border:1px solid var(--hh-border);border-radius:7px;text-align:center;text-decoration:none;font-weight:800;font-size:.68rem}
.wear__jump a:hover{border-color:var(--hh-pink-ink);color:var(--hh-pink-ink)}
.wear__state{margin:0 0 42px;padding-top:12px;border-top:2px solid var(--hh-border);scroll-margin-top:90px}
.wear__state h2{font-size:clamp(1.5rem,4vw,2.1rem)}
/* The caption is the honest part of the picture, so it is not shrunk to nothing. */
.wear__board{margin:0 0 16px}
.wear__board img{display:block;width:100%;height:auto;border-radius:12px;background:var(--hh-paper-muted)}
.wear__board figcaption{margin:5px 0 0;font-size:.72rem;line-height:1.4;color:var(--hh-ink-muted)}
.wear__seasons{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wear__season{padding:12px 14px;border:1px solid var(--hh-border);border-radius:12px;background:var(--hh-paper)}
.wear__season h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 6px;font-size:1rem}
.wear__temp{font-size:.72rem;font-weight:800;color:var(--hh-ink-muted);font-variant-numeric:tabular-nums}
.wear__summary{margin:0 0 8px;font-size:.84rem}
.wear__kit{margin:0;display:grid;gap:6px;font-size:.82rem}
.wear__kit dt{font-weight:800;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--hh-pink-ink)}
.wear__kit dd{margin:0}
.wear__pack{margin:0;padding-left:1.1rem}
.wear__regional{margin:14px 0 0;font-size:.84rem;max-width:46rem}
.wear__source,.wear__credit{margin:6px 0 0;font-size:.72rem;color:var(--hh-ink-muted);max-width:46rem}
/* The same boards and seasons, on the state's own page. */
.state-wear .wear__state--bare{margin:0}
.state-wear__more{margin:14px 0 0;font-size:.84rem;font-weight:700}
.byway-stop__tag--lake{border-radius:999px;background:rgba(44,135,200,.14);color:#2C87C8;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.byway-stop__tag--historic{border-radius:999px;background:rgba(80,89,107,.16);color:#50596B;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.byway-stop__tag--zoo{border-radius:999px;background:rgba(110,124,31,.16);color:#6E7C1F;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.byway-stop__tag--park{border-radius:999px;background:rgba(176,58,110,.14);color:#B03A6E;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.byway-stop__tag--ski{border-radius:999px;background:rgba(63,79,196,.14);color:#3F4FC4;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.byway-stop__tag--event{border-radius:999px;background:rgba(153,14,69,.12);color:#990E45;padding:2px 8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}

/* ── The reach lens: two questions, and the way back ──────────────────────────────────
   Added 2026-11-04. The second way into the Hub, for someone with days but no destination,
   and the bar that keeps the lens honest. */
.reach-planner{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:0;padding:16px 18px;background:#fff}
.reach-planner__lede{flex:1 0 100%;margin:0;color:var(--hh-ink-muted);font-size:.9rem}
.reach-planner .trip-planner__field{flex:1 1 230px}
/* A days box the width of a number. Stretched across a flex row it invites a sentence. */
.reach-planner .trip-planner__field--days{flex:0 1 150px}
.reach-planner button{min-block-size:46px}

/* The bar states what is HIDDEN, not only what is shown, and carries its own exit. It sits
   above the view switch so it is on screen in map view and grid view alike. */
.reach-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 12px;padding:12px 16px;border-radius:14px;background:var(--hh-pink-wash,#fdeef5);border:1px solid rgba(42,27,61,.14)}
.reach-bar[hidden]{display:none}
.reach-bar__line{margin:0;flex:1 1 320px;font:700 .95rem/1.35 Poppins,sans-serif;color:var(--hh-ink,#2A1B3D)}
.reach-bar__note{margin:0;flex:1 0 100%;order:3;color:var(--hh-ink-muted);font-size:.8rem}
.reach-bar button{min-block-size:42px}
@media (max-width:640px){
  .reach-planner{gap:10px;padding:14px}
  .reach-planner .trip-planner__field--days{flex:1 1 120px}
  .reach-bar{padding:12px}
  .reach-bar button{inline-size:100%}
}

/* A region that needs explaining carries its reason under the heading — Alaska & Hawaii, which
   are not reachable by road from the rest of the atlas (Tee, 2026-11-04). The accent comes from
   [data-region] on the region block, so the rule works for any region given a note later. */
.state-grid__note{margin:-2px 0 14px;padding-left:12px;border-left:3px solid var(--region-accent);max-width:62ch;color:var(--hh-ink-muted);font-size:.86rem;line-height:1.45}

/* Tee, 2026-11-04: "The buttons stack on top of each other. The starting to > going to form is
   too high above the map." Five blocks sat between the form and the map — status, view switch,
   draw lede plus button, filters, months. The buttons now share one row and the months have
   moved inside the filter panel, which takes two rows out of that gap. */
@media (min-width:1180px){
  .hub-map-panel{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:stretch}
  .hub-map-controls{min-inline-size:0;display:flex;flex-direction:column;margin:0;block-size:0;min-block-size:100%;overflow:auto;padding-inline-end:4px}
  .hub-map-controls>*,.hub-map-controls .hub-filters-wrap,.hub-map-controls .hub-filters,.hub-map-controls fieldset{min-inline-size:0}
  .hub-map-controls .hub-filters-wrap{display:flex;flex-direction:column;min-block-size:0;flex:1 1 auto}
  .hub-filters-wrap[open]>summary{flex:0 0 auto}
  .hub-map-controls .hub-filters-wrap>.hub-filters{flex:0 0 auto}
  .hub-map-controls .season-control{flex:0 0 auto}
  .hub-map-controls .hub-filters-wrap{overflow:auto}
  .hub-map-controls .hub-filters-wrap{flex:initial;margin:0}
  /* In a 330px column the chips stack, which is what a column is for. */
  .hub-filters-wrap[open] .hub-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hub-filters-wrap[open] .hub-filters fieldset{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-filters-wrap[open] .hub-filters>button{grid-column:span 1}
  /* Fullscreen is one thing filling the screen, never two columns. */
  .hub-map-panel.is-full{display:block}
  .hub-map-panel.is-full .hub-map-controls{max-block-size:none;overflow:visible}
}

@media (min-width:761px){
  .hub-filters-wrap[open] .hub-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
  .hub-filters-wrap[open] .hub-filters fieldset{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px 10px}
  .hub-filters-wrap[open] .hub-filters>button{flex:0 0 auto;min-block-size:40px}
  .hub-filters-wrap[open] .season-control__hint{margin-block-end:6px}
}

/* Open by default, so the summary is a heading for a panel rather than a control that looks
   unpressed. The "Open/Close" affordance stays — it still folds away — but at rest it reads as
   a section title. */
.hub-filters-wrap[open]>summary{color:var(--hh-ink);cursor:pointer}
.hub-filters-wrap{border:1px solid var(--hh-border);border-radius:16px;background:var(--hh-paper-raised);padding:10px 14px}
.hub-filters-wrap .hub-filters{margin:8px 0 0}
.map-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 10px}
.map-toolbar .map-draw{flex:1 1 auto}
.map-toolbar .map-draw__lede{flex:1 1 240px}
.map-toolbar .map-draw__banner{flex:1 1 100%}
.season-control__title{margin:0;font:800 .78rem/1.3 Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hh-pink-ink)}
.season-control__hint{margin:2px 0 8px;color:var(--hh-ink-muted);font-size:.8rem;max-width:62ch}
.hub-filters-wrap .season-control{margin:10px 0 0;padding-block-start:10px;border-block-start:1px solid var(--hh-border)}
@media (max-width:760px){.map-toolbar{gap:8px 12px}.map-toolbar .map-draw__lede{flex-basis:100%}}

/* Tee, 2026-11-04: "add Photos or something to the trips and collection cards ... separate the
   sections by color instead of just all white." The tint is the section's, the card stays
   light on top of it, so a card still reads as a card and the band says which shelf it is. */
.collection-card--photo{padding:0;overflow:hidden}
.collection-card--photo h3{margin:12px 16px 0}
.collection-card--photo p{margin:0 16px}
.collection-card--photo>span{margin:0 16px 14px}
.collection-card__photo{margin:0;display:grid}
.collection-card__photo img{inline-size:100%;block-size:150px;object-fit:cover;display:block}
.collection-card__photo figcaption{padding:4px 16px 0;color:var(--hh-atlas-muted);font-size:.62rem;line-height:1.35}
.hub-browse--trips{background:var(--hh-band-trips);padding-block:24px 28px}
.hub-browse--collections{background:var(--hh-band-collections);padding-block:24px 28px}
.hub-browse:not([class*="--"]){background:var(--hh-band-featured);padding-block:24px 28px}
:root{--hh-band-trips:#F1EBF8;--hh-band-collections:#E9F2EC;--hh-band-featured:#FDF0E6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hh-band-trips:#241d2e;--hh-band-collections:#1b2a22;--hh-band-featured:#2c211a}}
:root[data-theme="dark"]{--hh-band-trips:#241d2e;--hh-band-collections:#1b2a22;--hh-band-featured:#2c211a}
.hub-trip--empty{border:0;background:none;box-shadow:none;padding:0}
.hub-trip--empty .hub-trip__empty{margin:10px 0 0;color:var(--hh-atlas-muted);font-size:.84rem}
/* Sits out of the way at the end of the line of text, not over it. */
.to-top{opacity:0;visibility:hidden;pointer-events:none;position:fixed;z-index:1200;right:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,28px);display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;padding:0;border:1px solid var(--hh-atlas-line-strong);border-radius:50%;background:var(--hh-paper-raised);color:var(--hh-atlas-ink);box-shadow:var(--hh-shadow-low);text-decoration:none}
.to-top__arrow{font:800 1.2rem/1 Poppins,sans-serif}
.to-top:hover{border-color:var(--hh-pink);color:var(--hh-pink-ink)}
.to-top:focus-visible{outline:3px solid var(--hh-focus);outline-offset:2px}
.to-top.is-on{opacity:1;visibility:visible;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){.to-top{transition:opacity .18s ease,visibility .18s ease}}
.wear__jump:focus{outline:3px solid var(--hh-focus);outline-offset:4px}
/* Attribution for a set of thumbnails shown together, under the list they belong to. */
.photo-credits{margin:10px 0 0;color:var(--hh-atlas-muted);font-size:.64rem;line-height:1.45}
.photo-credits a{color:inherit}
/* A picture inside the name cell, not a fourth column: the row is a three-column grid. */
.hub-trip__name{display:flex;align-items:center;gap:10px;min-inline-size:0}
.hub-trip__shot{flex:0 0 auto;inline-size:52px;block-size:38px;border-radius:8px;object-fit:cover}
.hub-trip__place{min-inline-size:0}
.state-link{color:inherit;text-decoration:none}
.state-link:hover,.state-link:focus-visible{color:var(--hh-pink-ink);text-decoration:underline;text-underline-offset:3px}
small .state-link,.weekenders__where .state-link,.state-link.is-quiet{border-block-end-width:1px}

/* Browse by season. The thumbnail is the state's own board cropped to this season's panel:
   --panel-x is the centre of that panel across the board, so object-position does the slicing
   and no new image files are needed. */
.season-browser{margin:28px 0 36px}
.season-browser__lede{margin:4px 0 14px;color:var(--hh-ink-muted);max-width:62ch}
.season-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;border-block-end:2px solid var(--hh-atlas-line);padding-block-end:10px}
.season-tabs__tab{min-block-size:44px;padding:0 18px;border:1px solid var(--hh-atlas-line);border-radius:999px;background:var(--hh-paper-raised);color:var(--hh-atlas-ink);font:800 .86rem/1 Poppins,sans-serif;cursor:pointer}
.season-tabs__tab:hover{border-color:var(--hh-pink)}
.season-tabs__tab:focus-visible{outline:3px solid var(--hh-focus);outline-offset:2px}
.season-tabs__tab.is-on{background:var(--hh-purple-900,#2A1B3D);border-color:var(--hh-purple-900,#2A1B3D);color:#fff}
.season-panel__note{margin:0 0 14px;color:var(--hh-atlas-muted);font-size:.74rem;line-height:1.5;max-width:70ch}
.season-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.season-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start;padding:12px;border:1px solid var(--hh-atlas-line);border-radius:14px;background:var(--hh-paper-raised)}
.season-row__shot{position:relative;cursor:zoom-in;display:block;inline-size:120px;block-size:150px;border-radius:10px;background-color:var(--hh-paper-muted);background-image:var(--board);background-size:430% auto;background-position:var(--panel-x,50%) 49%;background-repeat:no-repeat}
.season-row__body{min-inline-size:0}
.season-row h3{margin:0 0 4px;font-size:1.05rem}
.season-row p{margin:0 0 5px;font-size:.86rem;color:var(--hh-ink-muted)}
.season-row__kit b{color:var(--hh-pink-ink);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;display:block}
@media (max-width:620px){
  .season-row{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .season-row__shot{inline-size:84px;block-size:108px}
}
.season-row__shot:hover,.season-row__shot:focus-visible{outline:3px solid var(--hh-pink);outline-offset:2px}
.season-row__zoom{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:7px;background:rgba(255,255,255,.92);color:var(--hh-atlas-ink);font-size:.8rem;box-shadow:var(--hh-shadow-low)}
.board-viewer{inline-size:min(94vw,1100px);max-block-size:92vh;overflow:auto;border:0;border-radius:18px;background:var(--hh-paper-raised);padding:18px}
.board-viewer::backdrop{background:rgba(26,15,34,.7)}
.board-viewer h3{margin:0 0 10px;font-size:1.3rem}
.board-viewer img{inline-size:100%;block-size:auto;border-radius:12px;background:var(--hh-paper-muted)}
.board-viewer__note{margin:10px 0 0;color:var(--hh-atlas-muted);font-size:.76rem;line-height:1.5;max-width:70ch}
.board-viewer__close{float:right;min-inline-size:44px;min-block-size:44px;border:1px solid var(--hh-atlas-line);border-radius:12px;background:var(--hh-paper);font-size:1.4rem;cursor:pointer}
/* Quiet, but present: the label belongs beside the picture, not in a policy page. */
.article-hero__note{margin:10px 0 0;color:rgba(255,255,255,.82);font-size:.72rem;line-height:1.45;max-width:46ch}
/* A state page was a wall of same-shaped cards. The picture is the quickest thing to tell one
   place from another, and the file is already on the page it links to. */
.state-locations__intro{margin:0 0 4px}
/* A day trip is two rows: the facts you scan down, then the description across the full width.
   The pair is held together by giving the border to the second one. */
.daytrip-table tr.daytrip-facts td{border-bottom:0;padding-block-end:2px}
.daytrip-table tr.daytrip-facts td:first-child{min-inline-size:11rem}
.daytrip-table tr.daytrip-note td{
  border-bottom:1px solid var(--hh-border);padding:0 10px 14px 0;
  color:var(--hh-ink-muted);font-size:.92rem;line-height:1.55;max-inline-size:72ch;
}
.register{margin:44px 0 0;padding-block-start:26px;border-block-start:2px solid var(--hh-atlas-line)}
.register>h2{margin:0 0 6px}
.register__intro{margin:0 0 20px;max-width:74ch;color:var(--hh-atlas-muted);font-size:.9rem;line-height:1.6}
.register__intro b{color:var(--hh-atlas-ink)}
.register__state{margin:0 0 18px}
.register__state h3{margin:0 0 6px;font:800 .95rem/1.2 Poppins,sans-serif}
.register__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 18px;margin:0;padding:0;list-style:none}
.register__list li{padding:4px 0;font-size:.88rem;border-block-end:1px dotted var(--hh-atlas-line)}
.register__where{color:var(--hh-atlas-muted);font-size:.78rem;margin-inline-start:6px}
.register__flag{display:block;color:var(--hh-atlas-muted);font-size:.7rem}
.register__source{margin:18px 0 0;color:var(--hh-atlas-muted);font-size:.74rem;line-height:1.5;max-width:74ch}
/* A collection can carry its own marker instead of the generic square. */
.stop-list article>b svg{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.register__list a[target="_blank"]::after,.collection-site::after{content:"↗";margin-inline-start:4px;font-size:.78em;opacity:.7}
.collection-site{color:inherit;text-decoration:none}
.collection-site:hover,.collection-site:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* The emblem leads the collection, beside its hook rather than above it, so the page opens
   with a picture and a sentence instead of a wall of states. */
.collection-lead{display:flex;gap:24px;align-items:flex-start;margin:0 0 6px}
.collection-emblem{flex:0 0 auto;margin:0;inline-size:min(240px,34vw)}
.collection-emblem img{inline-size:100%;block-size:auto;border-radius:16px;display:block}
.collection-lead .collection-hook{margin:0;align-self:center}
@media (max-width:620px){.collection-lead{flex-direction:column;gap:14px}.collection-emblem{inline-size:min(200px,60vw)}}
/* Wide and shallow, the shape the artwork was drawn to. */
.trip-panorama{margin:0 0 26px}
.trip-panorama img{inline-size:100%;block-size:auto;border-radius:16px;display:block;background:var(--hh-paper-muted)}
.trip-panorama figcaption{margin:7px 0 0;color:var(--hh-atlas-muted);font-size:.74rem;line-height:1.5}
/* A dead end, drawn. Small and beside the sentence, not a billboard over it. */
#reach-summary:has(.reach-empty__art){display:flex;gap:14px;align-items:center;text-align:left}
.reach-empty__art{inline-size:110px;block-size:auto;flex:0 0 auto;border-radius:12px}
@media (max-width:620px){.reach-empty__art{inline-size:80px}}
/* ── The state page's organised spine (2026-11-05) ───────────────────────────────────────────
   Tee: "The state pages on the website have no life ... all the right content just needs to be
   beautified." The content was already there; what it lacked was rhythm. Before this, some
   blocks were cards and others were a bare heading with a list hanging off it, so the page read
   as a pile rather than a document. Every block now gets the same card, bands group them, and a
   chip row lets a reader reach the one thing they came for. */

/* Jump nav. Chips name a kind of place, never a number — see render-state-bands.mjs. */
.state-jump{margin-block-end:24px;border:1px solid var(--hh-atlas-line);border-radius:var(--hh-radius-lg);
  background:var(--hh-paper-raised);padding:clamp(18px,3vw,26px);box-shadow:var(--hh-shadow-low)}
.state-jump__title{margin:0 0 12px;font-family:Poppins,system-ui,sans-serif;font-size:.74rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-ink-muted)}
.state-jump ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.state-jump a{display:inline-flex;align-items:center;min-block-size:38px;padding:0 14px;
  border:1px solid var(--hh-atlas-line);border-radius:999px;background:var(--hh-paper);
  color:var(--hh-ink);font-size:.86rem;font-weight:600;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease}
.state-jump a:hover{background:var(--hh-pink-wash);border-color:var(--hh-atlas-line-strong)}
.state-jump a:focus-visible{outline:3px solid var(--hh-focus);outline-offset:2px}

/* A band is a group, not a card — the cards are the blocks inside it. */
.state-band{margin-block-end:24px}
.state-band>.state-block{inline-size:auto;margin-inline:0}
.state-band__head{margin-block-end:14px;padding-block-end:10px;border-block-end:3px solid var(--hh-gold)}
.state-band__head h2{margin:0;font-family:'Luckiest Guy',Poppins,sans-serif;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;color:var(--hh-ink)}
.state-band__blurb{margin:6px 0 0;max-inline-size:var(--hh-reading-measure);font-size:.92rem;
  line-height:1.5;color:var(--hh-ink-muted)}

/* One card per block, so the page keeps a single rhythm whichever blocks a state happens to have.
   scroll-margin keeps a chip's landing from sitting flush against the top of the viewport. */
.state-block{margin-block-end:24px;border:1px solid var(--hh-atlas-line);border-radius:var(--hh-radius-lg);
  background:var(--hh-paper-raised);padding:clamp(22px,4vw,34px);box-shadow:var(--hh-shadow-low);
  scroll-margin-block-start:24px}
.state-block>:first-child{margin-block-start:0}
.state-block>:last-child{margin-block-end:0}
.state-block h2{margin-block-start:0;margin-block-end:14px;font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.25}
/* A block that is its own group reads at group level, so it is not mistaken for the last
   item of the band above it. */
.state-block--solo{margin-block-start:34px}
.state-block--solo>:first-child>h2:first-child,.state-block--solo>h2:first-child{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* The illustrated Collections hero (designer's delivery, 2026-11-05). Their file hard-codes a
   cream #fff4dd and sets the copy to 43% of the width; the measurements are theirs, the colours
   are ours. */
.article-hero--collections{position:relative;isolation:isolate;overflow:hidden;
  min-block-size:clamp(260px,34vw,420px);background:var(--hh-paper-muted);display:flex;align-items:center}
.article-hero--collections .article-hero__art{position:absolute;inset:0;inline-size:100%;
  block-size:100%;object-fit:cover;z-index:-1}
.article-hero--collections .article-hero__inner{inline-size:min(500px,46%);margin-inline:0}
.article-hero--collections .article-hero__inner h1{color:var(--hh-ink);
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98}
.article-hero--collections .eyebrow{color:var(--hh-pink)}
.article-hero__tagline{margin-block-start:10px;font-size:clamp(1rem,2.2vw,1.25rem);
  font-weight:600;color:var(--hh-ink)}
/* The art carries its own quiet space on the left, but a phone has none to spare: below 760 the
   copy takes the full width and sits on a scrim so it stays readable over the drawing. */
@media (max-width:760px){
  .article-hero--collections{min-block-size:0;padding-block:28px}
  .article-hero--collections .article-hero__inner{inline-size:100%;
    background:color-mix(in srgb, var(--hh-paper) 82%, transparent);
    border-radius:var(--hh-radius-md);padding:16px 18px}
}

  /* ---------- One site footer (2026-11-05) ---------- */
  .foot{background:var(--ink,#1A1230);color:#C9C4DA;padding:48px 0 30px;font-size:14px}
  .foot .wrap{max-width:1140px;margin:0 auto;padding:0 20px}
  .foot h4{font-family:'Luckiest Guy',cursive;color:#fff;font-size:15px;letter-spacing:.6px;margin-bottom:10px}
  .foot a{color:#C9C4DA;text-decoration:none;display:block;padding:3px 0;font-weight:400;overflow-wrap:anywhere}
  .foot a:hover{color:#fff}
  .foot .soon-note{display:block;padding:3px 0;color:#8880A0}
  .foot-join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px 34px;align-items:end;
    padding-bottom:28px;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,.14)}
  .foot-join h4{margin-bottom:6px;font-size:19px}
  .foot-join p{color:#C9C4DA;margin:0;max-width:52ch;line-height:1.5}
  .foot-join form{display:flex;gap:10px;flex-wrap:wrap}
  .foot-join input[type=email]{flex:1;min-width:200px;padding:13px 16px;border:2px solid rgba(255,255,255,.22);
    border-radius:999px;background:rgba(255,255,255,.06);font-family:'Poppins',sans-serif;font-size:16px;color:#fff}
  .foot-join input[type=email]::placeholder{color:#9A93AE}
  .foot-join input[type=email]:focus{outline:3px solid var(--sky,#05BDF9);outline-offset:1px;border-color:var(--sky,#05BDF9)}
  .foot-join button{font-family:'Luckiest Guy',cursive;font-size:17px;letter-spacing:.5px;white-space:nowrap;
    background:var(--pink,#D1135F);color:#fff;border:none;border-radius:999px;padding:13px 24px;cursor:pointer}
  .foot-join button:hover{background:#B40E50}
  .foot-join .thanks{grid-column:1/-1}
  .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;margin-bottom:26px}
  .foot-grid a,.foot-grid .soon-note{font-size:13.5px}
  /* answers@highwayheads.com needs 204px and five equal columns cannot give it inside
     969px. Legal takes what it needs; the other four hold short words and share the rest. */
  @media (min-width:900px){.foot-grid{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(210px,auto)}}
  .foot-grid > *{min-width:0}
  .site-footer__notice{color:#9A93AE;font-size:12px;line-height:1.6;
    padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
  .foot-end{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    padding-top:22px;margin-top:22px;border-top:1px solid rgba(255,255,255,.14)}
  .foot-logo{padding:0}
  .foot-logo img{display:block;height:38px;width:auto}
  .foot-end p{color:#9A93AE;font-size:12px;line-height:1.6;margin:0}
  @media (max-width:760px){.foot-join{grid-template-columns:1fr}}
  .foot .thanks{display:none;font-family:'Luckiest Guy',cursive;color:#2D6A4F;font-size:18px;margin-top:8px;grid-column:1/-1}
  .foot .thanks.is-on{display:block}