/* Quiet surfaces and consistent blue actions; the shared city colours remain details. */
:root { --ink:#27313B; --muted:#637080; --paper:#F7F8F9; --line:#E3E7ED; --guide-line:#E3E7ED; --guide-soft:#F6F7F9; }
body { background:#FDFDFC; }
.site-header { background:#FFFFFFF5; border-bottom:0; }
.header-main { min-height:72px; }
.menu-toggle { min-height:44px; padding:9px 13px; border:1px solid #D8DDE3; border-radius:10px; background:#fff; color:#27313B; font-weight:550; box-shadow:none; }
.menu-toggle:hover,.menu-toggle[aria-expanded="true"] { background:#F1F3F5; border-color:#BAC2CC; color:#27313B; }
.menu-toggle:focus-visible { outline-color:#596577; }
.site-header:after { height:2px; }
.utility { background:#27313B; }
.utility .wrap { padding-block:5px; }
.category-nav { padding-block:5px; border-bottom-color:#ECEEF1; }
.category-nav a { font-weight:550; }
.nav { gap:24px; }
.nav a { font-weight:550; }
.nav .saved { color:#27313B; background:#F5F5F2; border:1px solid #DADDDC; border-radius:12px; }
.nav .saved:hover { color:#27313B; background:#ECEDE9; }
.nav .saved span { background:#F0E5C9; color:#534B32; border-radius:7px; }
.hero { background:linear-gradient(125deg,#FAFBFD,#F5F6F6); border-bottom:1px solid #E6E9EF; }
.hero h1 { font-size:clamp(40px,5.5vw,66px); font-weight:650; letter-spacing:-.045em; line-height:1.08; }
.hero h1 em { color:#AD3741; }
.hero p { color:#596577; }
.hero-image { border-radius:22px; box-shadow:0 12px 36px #2638540B; }
.hero-image picture,.card-image picture,.toplist-media picture { display:block; width:100%; height:100%; }
.article-visual picture { display:block; width:100%; }
.archive-note { display:inline-block; margin:12px 12px 0; padding:2px 8px; border-radius:5px; background:#F0F1F3; color:#505963; font-size:11px; }
.hero-search { border:1px solid #DCE3EE; border-radius:14px; box-shadow:0 6px 22px #243C6B08; }
.hero-search button { background:var(--city-accent); border-radius:10px; margin:4px; padding-inline:20px; }
.hero-search button:hover { background:var(--city-accent-dark); }
.button,.button.red,.button.gold { background:var(--city-accent); border-color:var(--city-accent); color:#fff; border-radius:11px; font-weight:600; box-shadow:0 3px 9px #2360D612; transition:background .18s ease,box-shadow .18s ease; }
.button:hover,.button.red:hover,.button.gold:hover { background:var(--city-accent-dark); border-color:var(--city-accent-dark); color:#fff; box-shadow:0 5px 14px #2360D61A; }
.button.light { background:#fff; border-color:#CBDCF8; color:var(--city-ink); box-shadow:none; }
.button.light:hover { background:var(--city-soft); border-color:var(--city-accent); color:var(--city-ink); }
.text-link,.card-bottom a,.editorial-card-cta { color:var(--city-accent); }
.editorial-card:first-child .editorial-card-cta { color:#C6D8FF; }
.quick-links a,.chip,.filter-categories button,.category-jumps a { border-radius:9px; }
.quick-links a { border-color:#DCE4EF; color:#405978; }
.category-tile { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 4px 16px #1E3B5C03; padding-top:24px; }
.category-tile:nth-child(3n+2),.category-tile:nth-child(3n) { border-top-color:var(--line); }
.category-tile .cat-icon { color:#344050; }
.category-tile:nth-child(3n+2) .cat-icon { color:var(--red); }
.category-tile:nth-child(3n) .cat-icon { color:var(--gold-ink); }
.category-tile:hover { border-color:#B8CEF3; box-shadow:0 8px 24px #1E3B5C08; }
.activity-card,.toplist-item,.route-card,.today-grid > *,.side-card,.editorial-card { border-color:var(--line); border-radius:17px; box-shadow:0 4px 18px #26385405; }
.activity-card:hover { box-shadow:0 9px 25px #2638540C; }
.card-body { padding:23px 24px 20px; }
.card-title { font-weight:650; line-height:1.3; }
.save-button { border-radius:50%; box-shadow:0 2px 10px #27313B0D; }
.filter-panel,.plan-controls,.visit-checklist,.article-content .toc,.comparison-wrap { border-radius:14px; }
.filter-panel input,.filter-panel select { border-radius:9px; border-color:#DCE3EC; }
.route-card { border-top:2px solid var(--gold); }
.planner-promo { border-radius:20px; background:#293746; border-color:#293746; }
.planner-promo:before { height:3px; width:105px; top:0; }
.planner-promo .button { border-color:var(--city-accent); }
.planner-steps li:before { border-radius:10px; background:#F2E8C9; }
.planner-dock { background:var(--city-accent); border-radius:15px; box-shadow:0 8px 30px #1F4C9E26; }
.wishlist-item { border-radius:14px; border-color:var(--line); }
.wishlist-actions .button-icon { border-color:#CBDCF8; border-radius:9px; }
.wishlist-actions .button-text { border-radius:9px; }
.budget-box { border-color:#D9E3F4; border-left:3px solid var(--city-accent); background:#F7F9FD; border-radius:12px; }
.budget-chip { background:#F4F7FC; border-color:#D9E3F4; color:var(--city-ink); }
.toplist-actions button[aria-pressed="true"] { background:var(--city-soft); color:var(--city-ink); }
.site-footer { border-top:2px solid var(--red); }
@media(max-width:780px) {
 .menu-toggle { width:auto; flex:0 0 auto; }
 .planner-dock { left:auto; right:12px; transform:none; width:max-content; max-width:calc(100vw - 24px); min-height:46px; padding:9px 12px; gap:12px; border-radius:12px; }
 .header-main { min-height:64px; }
 .nav { top:64px; }
 .hero-image { border-radius:17px; }
 .hero h1 { font-size:clamp(38px,9vw,56px); }
 .card-body { padding:20px; }
 .category-tile { min-height:140px; padding:20px; }
 .planner-promo { padding:25px; border-radius:17px; }
}
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }