.page-home .page-intro {display:block; padding-block:26px 30px}
.page-home .home-slogan {font-size:14px; margin-bottom:22px; line-height:1.6}
.home-sections {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.home-sections a {position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; min-height:132px; padding:24px 20px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:linear-gradient(120deg,var(--subtle),var(--accent-soft)); color:var(--accent); font-size:23px; font-weight:650; line-height:1.25; letter-spacing:-.5px; transition:border-color .16s,box-shadow .16s}
.home-sections a:hover {text-decoration:none; border-color:var(--accent); box-shadow:var(--shadow)}
.home-sections a > span {position:relative; z-index:1}
.home-sections .section-art {position:absolute; width:230px; height:154px; right:-22px; bottom:-16px; z-index:-1; fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; opacity:.15; pointer-events:none}
.home-sections .section-wash {stroke:none; opacity:.22}
.home-sections .section-fine {stroke-width:4; opacity:.65}
.home-sections .section-tone-light {stop-color:color-mix(in srgb,var(--accent) 45%,var(--panel))}
.home-sections .section-tone-main {stop-color:var(--accent)}
.home-sections .section-tone-deep {stop-color:color-mix(in srgb,var(--accent) 75%,var(--ink))}
[data-theme=dark] .home-sections .section-art {opacity:.13}
.home-sections .section-arrow {display:block; width:22px; height:22px; flex:0 0 22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
@media(max-width:1000px) {.home-sections {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px) {
  .page-home .page-intro {padding-block:22px 24px}
  .page-home .home-slogan {font-size:12px; margin-bottom:18px}
  .home-sections {gap:8px}
  .home-sections a {min-height:112px; padding:16px; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; font-size:19px; letter-spacing:-.2px}
  .home-sections .section-arrow {width:18px; height:18px; flex-basis:18px; align-self:flex-end}
  .home-sections .section-art {width:200px; height:134px; right:-24px; bottom:-24px}
}
@media(max-width:380px) {.home-sections a {padding:14px; font-size:17px}.home-sections .section-art {width:180px; height:120px; right:-22px; bottom:-18px}}

.page-world .places li:first-child {grid-column:span 2; background:linear-gradient(125deg,var(--panel),var(--accent-soft))}
.page-world .places li:first-child a {font-size:25px}
.page-world .places li:first-child::before {width:40px; background:linear-gradient(90deg,var(--accent-stripe-start),var(--accent-stripe-end)); opacity:1}

.page-home .page-intro {padding-block:22px}
.page-home .home-slogan {margin-bottom:0}
.page-home .content-frame {padding-top:24px}
.city-dashboard {scroll-margin-top:24px}
.city-dashboard [hidden] {display:none!important}
.home-city-list {display:grid; gap:16px}
.home-city-card {margin:0}
.home-city-heading {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.home-city-heading h3 {min-width:0; margin:0; overflow-wrap:anywhere}
.home-city-heading .city-bookmark {flex:0 0 32px; width:32px; height:32px; padding:7px; margin:0}
.home-city-heading .city-bookmark svg {width:16px; height:16px}
.home-city-card .country-holiday-day {color:var(--ink)}
.home-city-card a.country-holiday-day:hover {text-decoration:none; background:var(--accent-soft); outline:1px solid var(--line)}
.home-city-card .country-holiday-air {margin-bottom:0}
.home-city-card .country-holiday-sea {margin-top:9px}
.home-city-loading,.home-city-unavailable,.home-city-error {color:var(--muted); font-size:13px; margin:0; align-self:center}
.home-city-retry {display:block; margin-top:10px; padding:6px 10px; border:1px solid var(--line); border-radius:4px; background:var(--subtle); color:var(--accent); font-size:12px}
.city-storage-note {font-size:12px; line-height:1.6; color:var(--muted); padding:12px 15px; border-left:3px solid var(--accent); background:var(--accent-soft); margin:22px 0 0}
.city-empty {display:flex; align-items:center; justify-content:center; gap:16px; padding:26px 22px; border:1px solid var(--line); border-radius:8px; background:var(--panel)}
.city-empty svg {width:26px; height:26px; flex:0 0 26px; fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linejoin:round}
.city-empty p {font-size:14px; color:var(--muted); margin:0; line-height:1.7}
.home-sections {margin-top:28px}
@media(max-width:760px) {.page-home .page-intro {padding-block:20px}.page-home .content-frame {padding-top:20px}.city-empty {padding:22px 18px; align-items:flex-start; gap:12px}.home-sections {margin-top:24px}}

@media(max-width:1100px){.page-world .places li:first-child {grid-column:auto}}
@media(max-width:760px){.page-world .places li:first-child {grid-column:span 2;min-height:138px}.page-world .places li:first-child a {font-size:20px}}
@media(max-width:380px){.page-world .places li:first-child {grid-column:auto}}

/* Direct forecast links inside a saved homepage locality. */
.home-city-forecast-links {display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:12px; font-size:13px; line-height:1.7}
.home-city-forecast-links a {font-weight:600; white-space:nowrap}