/* konsept-1 — map-first home ("routes"). Light theme only (prototype).
   Map = own SVG (Natural Earth outline). Landmark motion = CSS transforms/opacity only; stops for prefers-reduced-motion
   and pauses while the map is scrolled out of view (k1.js). */
:root {
  --night: #13233f;
  --ink: #15213a;
  --ink-2: #4d5872;
  --sea: #0a7780;
  --red: #c8102e;
  --tuff: #efd3c1;
  --line: #e8e1da;
  --paper: #ffffff;
  --soft: #f6f1ec;
  --ok: #148a5b;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --float: 0 1px 2px rgb(19 35 63 / .08), 0 6px 18px -6px rgb(19 35 63 / .22);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--f-body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--sea); }
.mono { font-family: var(--f-mono); }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
h1, h2 { font-family: var(--f-display); letter-spacing: -.02em; line-height: 1.08; margin: 0; }
.eyebrow { margin: 0 0 6px; font: 600 .72rem/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.muted { color: var(--ink-2); margin: 8px 0 0; }
.sample { display: inline-block; font: 600 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8a5a00; background: #fff1c9; border: 1px dashed currentColor; padding: .28em .45em .24em; border-radius: 3px; vertical-align: .1em; white-space: nowrap; }
.credit { font-size: .72rem; color: var(--ink-2); }
.credit a { color: inherit; }

/* ---------- map app shell ---------- */
.mapapp { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: #cfe9e8; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-tap-highlight-color: transparent; user-select: none; }

/* base map */
.land-n { fill: #ebe5de; stroke: #fff; stroke-width: 1.4; }
.land-shadow { fill: #13233f; opacity: .07; }
.land { stroke: #13233f; stroke-opacity: .5; stroke-width: 1.3; stroke-linejoin: round; }
.lake { fill: #c3e4e4; stroke: #8fc5c6; stroke-width: 1; }
.sea-l { font: 600 calc(var(--u, 1) * 11px) var(--f-mono); letter-spacing: .38em; text-transform: uppercase; fill: #4f9396; text-anchor: middle; }
.sea-l--s { font-size: calc(var(--u, 1) * 9px); letter-spacing: .25em; }
.country-l { font: 800 calc(var(--u, 1) * 46px) var(--f-display); fill: #13233f; opacity: .07; letter-spacing: .35em; text-anchor: middle; }
.k { transform: scale(var(--u, 1)); }
.k-lm { transform: scale(var(--lm, 1)); }
.city circle { fill: #13233f; opacity: .55; }
.city text { font: 600 12px var(--f-mono); fill: #4d5872; }

/* routes: drawn in on load, then white "ants" crawl along */
.route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-casing { stroke: #fff; stroke-width: calc(var(--u, 1) * 9px); stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.6, .1, .25, 1) var(--d) forwards; }
.route-line { stroke: var(--c); stroke-width: calc(var(--u, 1) * 4.5px); stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.6, .1, .25, 1) var(--d) forwards; }
.route-ants { stroke: #fff; stroke-width: calc(var(--u, 1) * 1.6px); stroke-dasharray: .004 .012; opacity: 0; animation: ants 40s linear infinite, show .8s ease calc(var(--d) + 2.3s) forwards; }
.route { transition: opacity .3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ants { to { stroke-dashoffset: -1; } }
@keyframes show { to { opacity: .9; } }
/* 01.10 (Ali): route lines no longer sit on the home map all the time — a line appears only for the opened route (.is-on)
   or while its row in the list is hovered / focused (.is-peek); it draws itself in each time */
.route { opacity: 0; pointer-events: none; }
.route.is-on, .route.is-peek { opacity: 1; }
.route.is-on .route-casing, .route.is-on .route-line, .route.is-peek .route-casing, .route.is-peek .route-line { animation: draw 1.4s cubic-bezier(.6, .1, .25, 1) forwards; stroke-dashoffset: 1; }
.route.is-on .route-ants, .route.is-peek .route-ants { animation: ants 40s linear infinite, show .6s ease 1.2s forwards; }

/* stops */
.stop { cursor: pointer; outline: none; transition: opacity .3s; }
.stop .k { transition: transform .2s ease; }
.stop:hover .k, .stop:focus-visible .k { transform: scale(calc(var(--u, 1) * 1.1)); }
.stop-halo { fill: var(--sea); opacity: 0; transition: opacity .2s; }
.stop-shadow { fill: #13233f; opacity: .2; }
.stop-ring { fill: #fff; }
.stop-ring--solid { fill: #fff; }
.stop-dot { fill: #13233f; }
.stop-label rect { fill: #fff; stroke: rgb(19 35 63 / .12); }
.stop-label text { font: 700 13px var(--f-display); fill: #13233f; text-anchor: middle; }
.stop:focus-visible .stop-ring { stroke: var(--sea); stroke-width: 4; }
.stop.is-active .stop-halo { opacity: .28; animation: halo 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.stop.is-active .stop-label rect { fill: #13233f; stroke: none; }
.stop.is-active .stop-label text { fill: #fff; }
.stop.is-off, .lmk.is-off { opacity: .28; }
@keyframes halo { 50% { transform: scale(1.18); opacity: .1; } }
.map[data-filter="culture"] .stop:not([data-tags~="culture"]),
.map[data-filter="nature"] .stop:not([data-tags~="nature"]),
.map[data-filter="beach"] .stop:not([data-tags~="beach"]) { opacity: .25; }

/* ---------- animated landmarks ---------- */
.lmk { pointer-events: none; transition: opacity .3s; }
.lm-hill { fill: #eac6aa; }
.lm-rock { fill: #e0ad88; }
.lm-cap { fill: #9c6a4c; }
.lm-door { fill: #7d4f36; }
.b { animation: float 6s ease-in-out infinite; }
.b2 { animation-duration: 7.5s; animation-delay: -2.5s; }
.b3 { animation-duration: 9s; animation-delay: -5s; }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -8px); } }

.lm-sil { fill: #13233f; }
.lm-win { fill: #ffd9a0; }
.wave { fill: none; stroke: #0a7780; stroke-width: 1.6; stroke-linecap: round; animation: wave 3s linear infinite; }
.w3 { stroke-opacity: .55; animation-duration: 4.2s; }
@keyframes wave { to { transform: translateX(-20px); } }
.ferry { animation: ferry 18s ease-in-out infinite alternate; }
@keyframes ferry { from { transform: translateX(0); } to { transform: translateX(62px); } }
.lm-hull { fill: #fff; stroke: #13233f; stroke-width: 1; }
.lm-cabin { fill: #fff; stroke: #13233f; stroke-width: .8; }
.lm-funnel { fill: #c8102e; }
.lm-wake { stroke: #fff; stroke-width: 1.3; stroke-linecap: round; }

.lm--pamukkale .lm-hill { fill: #e4dccb; }
.lm-trav { fill: #fdfcf9; stroke: #d6cfc4; stroke-width: .8; }
.pool { fill: #71cbd0; animation: shimmer 3.4s ease-in-out infinite; }
.p2 { animation-delay: -.9s; } .p3 { animation-delay: -1.8s; } .p4 { animation-delay: -2.6s; }
@keyframes shimmer { 50% { opacity: .45; } }
.drip { stroke: #a9dfe2; stroke-width: 1.3; stroke-dasharray: 2 3; animation: drip 1.4s linear infinite; }
@keyframes drip { to { stroke-dashoffset: -5; } }

.sun { fill: #f2b35e; transform-box: fill-box; transform-origin: center; animation: sun 8s ease-in-out infinite; }
@keyframes sun { 0%, 100% { transform: translateY(2px); opacity: .75; } 50% { transform: translateY(-4px) scale(1.08); opacity: 1; } }
.lm-marble { fill: #f7f0e5; stroke: #13233f; stroke-width: 1; }
.lm-col { stroke: #13233f; stroke-width: 1.5; }
.lm-door2 { fill: #13233f; }

.lm-cliff { fill: #e0ad88; }
.lm-pine { fill: #4f7a4a; }
.lm-sand { fill: #f6e3c6; }
.glint { stroke: #fff; stroke-width: 1.4; stroke-linecap: round; animation: glint 2.6s ease-in-out infinite; }
@keyframes glint { 50% { opacity: .15; } }

.lm-hill2 { fill: #eac6aa; }
.lm-flute { stroke: #3a5478; stroke-width: .7; }
.boat { transform-box: fill-box; transform-origin: 50% 100%; animation: rock 5s ease-in-out infinite; }
@keyframes rock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(1px); } }
.lm-hull2 { fill: #8a4f2a; }
.lm-mast { stroke: #5b3a24; stroke-width: 1.2; }
.lm-sail { fill: #fff; stroke: #13233f; stroke-width: .6; }

/* ---------- floating chrome ---------- */
.bar { position: absolute; z-index: 5; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px 6px 8px; background: #fff; border-radius: 999px; box-shadow: var(--float); color: var(--night); text-decoration: none; font: 800 1.3rem/1 var(--f-display); letter-spacing: -.03em; }
.brand small { font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-left: 1px solid var(--line); padding-left: 9px; margin-left: 2px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--float); font-weight: 600; font-size: .92rem; cursor: pointer; }
.chip.is-on { background: var(--night); color: #fff; }
.bar-end { margin-left: auto; display: flex; gap: 8px; }
.lang { display: flex; background: #fff; border-radius: 999px; box-shadow: var(--float); overflow: hidden; font: 600 .78rem/1 var(--f-mono); }
.lang a { display: grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.lang a[aria-current] { background: var(--night); color: #fff; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--float); cursor: pointer; color: var(--night); }

.now-pill { position: absolute; z-index: 4; left: 16px; bottom: 40px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 11px 16px; background: #fff; border-radius: 999px; box-shadow: var(--float); font-size: .9rem; }
.now-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(20 138 91 / .18); animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 50% { box-shadow: 0 0 0 7px rgb(20 138 91 / .04); } }
.map-credit { position: absolute; z-index: 4; left: 18px; bottom: 10px; margin: 0; font-size: .7rem; color: #3e6f71; }

/* ---------- sheet (side panel on desktop, bottom sheet on phone) ---------- */
.sheet { position: absolute; z-index: 6; top: 88px; right: 20px; bottom: 20px; width: 400px; background: var(--paper); border-radius: 24px; box-shadow: 0 2px 6px rgb(19 35 63 / .08), 0 24px 60px -20px rgb(19 35 63 / .45); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.grab { display: none; }
.panel { padding: 26px 24px 24px; }
.panel[hidden] { display: none; }
.panel h1 { font-size: 2rem; font-weight: 800; margin-bottom: 18px; }
.route-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.route-row { width: 100%; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.route-row:hover { background: var(--soft); }
.route-glyph { color: var(--c); }
.rr-main strong { display: block; font: 700 1.12rem/1.2 var(--f-display); }
.rr-stops { display: block; font-size: .84rem; color: var(--ink-2); margin-top: 3px; }
.rr-days { display: grid; justify-items: center; font: 600 .66rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.rr-days b { font: 800 1.5rem/1 var(--f-display); color: var(--c); letter-spacing: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.quick-a { padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600; background: var(--soft); }
.quick-a:hover { border-color: var(--sea); color: var(--sea); }
.fine { font-size: .8rem; color: var(--ink-2); margin: 14px 0; }

.panel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-top .eyebrow { margin: 0; }
.back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.1rem; }
.route-h { font-size: 1.9rem; font-weight: 800; color: var(--night); box-shadow: inset 0 -.18em 0 color-mix(in srgb, var(--c) 30%, transparent); display: inline; }
.legs { list-style: none; margin: 22px 0 0; padding: 0; }
.legs li { position: relative; padding: 0 0 18px 30px; }
.legs li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c); }
.legs li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; border-left: 2px dashed var(--c); opacity: .6; }
.leg-stop { border: 0; background: none; padding: 0; font: 700 1.08rem/1.3 var(--f-display); cursor: pointer; text-align: left; }
.leg-stop:hover { color: var(--sea); }
.leg-move { display: block; font-size: .86rem; color: var(--ink-2); margin-top: 4px; }

.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--night); color: #fff; border: 2px solid var(--night); text-decoration: none; font: 700 .98rem/1.1 var(--f-display); cursor: pointer; text-align: center; }
.cta:hover { background: #1d3257; color: #fff; }
.cta--ghost { background: #fff; color: var(--night); }
.cta--ghost:hover { background: var(--soft); color: var(--night); }

.stop-card { padding: 0; }
.sc-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(#cfe9e8, #fbe7da); overflow: hidden; }
.sc-media img { width: 100%; height: 100%; object-fit: cover; }
.sc-illu { width: 100%; height: 100%; padding: 16px 0 0; }
.sc-credit { position: absolute; left: 10px; bottom: 8px; color: #fff; font-size: .7rem; background: rgb(8 16 30 / .6); padding: 3px 7px; border-radius: 4px; }
.sc-credit a { color: inherit; }
.close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--float); }
.sc-body { padding: 20px 24px 24px; }
.sc-body h2 { font-size: 2.1rem; font-weight: 800; }
.sc-slogan { font-size: 1.05rem; margin: 6px 0 16px; }
.sc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.sc-facts div { background: var(--soft); border-radius: 14px; padding: 10px 12px; }
.sc-facts dt { font: 600 .66rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sc-facts dd { margin: 5px 0 0; font-weight: 700; font-size: .95rem; }
.sc-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 11px 13px; margin: 0 0 18px; background: #e8f5ef; border-radius: 14px; font-size: .9rem; }
.sc-now > span:nth-child(2) { flex: 1 1 200px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- next section: day by day ---------- */
.days { padding: 44px 0 56px; background: var(--paper); }
.days-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0 32px; }
.days-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.seg { display: inline-flex; padding: 4px; background: var(--soft); border-radius: 999px; }
.seg button { border: 0; background: none; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: .92rem; cursor: pointer; color: var(--ink-2); }
.seg button[aria-selected="true"] { background: #fff; color: var(--night); box-shadow: var(--float); }
.seg button[aria-selected="true"]::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 8px; }
.strip { list-style: none; margin: 0; padding: 22px 32px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 32px; scrollbar-width: thin; }
.strip[hidden] { display: none; }
.day { scroll-snap-align: start; }
.day-media { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: linear-gradient(#cfe9e8, #fbe7da); }
.day-media img { width: 100%; height: 100%; object-fit: cover; }
.day-media svg { position: absolute; inset: 22% 8% 0; width: 84%; height: 78%; }
.day-n { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: #fff; font: 600 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; box-shadow: var(--float); }
.day-n b { color: var(--c); font-size: .9rem; }
.day-place { position: relative; margin: 16px 0 4px; padding-top: 12px; border-top: 2px dashed color-mix(in srgb, var(--c) 55%, transparent); font: 700 1.05rem/1.2 var(--f-display); }
.day-place::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.day-what { margin: 0; font-size: .92rem; color: var(--ink-2); }
.days-credit { padding: 0 32px; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* ---------- phone ---------- */
@media (max-width: 899px) {
  .bar { flex-wrap: wrap; top: 12px; left: 12px; right: 12px; gap: 10px; }
  .brand { min-height: 44px; font-size: 1.15rem; }
  .chips { order: 3; flex: 1 0 100%; }
  .lang a { min-width: 40px; }
  .panel h1 { font-size: 1.6rem; margin-bottom: 12px; }

  /* city page: full-screen map + draggable 3-state bottom sheet (sheet.js) */
  .k1-city .now-pill { display: none; }
  .k1-city .sheet { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 88%; border-radius: 26px 26px 0 0;
    transform: translateY(calc(100% - var(--peek, 200px))); transition: transform .38s cubic-bezier(.3, .8, .3, 1); }
  .k1-city .grab { display: flex; justify-content: center; position: sticky; top: 0; z-index: 2; width: 100%; height: 34px; padding-top: 12px; border: 0; background: linear-gradient(#fff 70%, rgb(255 255 255 / 0)); cursor: grab; touch-action: none; }
  .k1-city .grab span { width: 44px; height: 5px; border-radius: 5px; background: #d5cdc5; }
  .k1-city .panel { padding: 4px 18px 22px; }

  /* home: the map is a small static "compass" on top (~45 %), navigation happens in the big cards below */
  .k1-home .mapapp { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; background: #fff; }
  .k1-home .bar { position: relative; top: 0; left: 0; right: 0; order: 0; padding: 12px; background: #fff; border-bottom: 1px solid var(--line); }
  .k1-home .bar .brand, .k1-home .bar .chip, .k1-home .bar .lang, .k1-home .bar .icon-btn { box-shadow: none; border: 1px solid var(--line); }
  .k1-home .bar .chip.is-on { border-color: var(--night); }
  .k1-home .map { position: relative; inset: auto; order: 1; height: clamp(240px, 66vw, 45svh); background: #cfe9e8; } /* whole country, no empty sea band */
  .k1-home .map-credit { position: static; order: 2; padding: 6px 16px 0; color: var(--ink-2); }
  .k1-home .now-pill { position: static; order: 3; margin: 14px 16px 0; max-width: none; border-radius: 14px; box-shadow: none; border: 1px solid var(--line); font-size: .86rem; }
  .k1-home .sheet { position: static; order: 4; width: auto; height: auto; transform: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .k1-home .grab { display: none; }
  .k1-home .panel { padding: 20px 16px 8px; }
  .k1-home .route-row { min-height: 76px; }
  .k1-home .stop-list { grid-template-columns: 1fr; gap: 10px; }
  .k1-home .stop-row { min-height: 64px; padding: 8px 14px 8px 8px; border-radius: 18px; }
  .k1-home .stop-row img, .k1-home .stop-row-dot { width: 48px; height: 48px; border-radius: 12px; }
  .k1-home .stop-row strong { font-size: 1.05rem; }
  .k1-home .region-list a, .k1-home .region-list .is-soon { min-height: 60px; padding: 12px 14px; }
  .k1-home .quick-a { min-height: 44px; display: inline-flex; align-items: center; }
  .sc-body { padding: 18px 18px 24px; }
  .sc-body h2 { font-size: 1.8rem; }
  .days { padding-top: 34px; }
  .days-head { padding: 0 16px; }
  .strip { padding: 18px 16px 12px; scroll-padding: 0 16px; grid-auto-columns: 70%; gap: 12px; }
  .days-credit { padding: 0 16px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .k1-city .sheet { transition: none; } }

/* motion off: everything still, routes fully drawn */
@media (prefers-reduced-motion: reduce) {
  .k1 *, .k1 *::before, .k1 *::after { animation: none !important; }
  .route-casing, .route-line { stroke-dashoffset: 0 !important; }
  .route-ants { opacity: .9; }
}
.mapapp.is-paused * { animation-play-state: paused !important; }

/* explore panel: stops list (added 30.09) */
.panel-h { font: 700 .74rem/1.2 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 22px 0 10px; }
.stop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stop-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; text-align: left; }
.stop-row:hover { border-color: var(--sea); }
.stop-row img, .stop-row-dot { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.stop-row-dot { background: radial-gradient(circle, #13233f 34%, #fff 36%, #fff 50%, #cfe9e8 52%); }
.stop-row strong { display: block; font: 700 .9rem/1.15 var(--f-display); }
.stop-row small { display: block; font-size: .74rem; color: var(--ink-2); }
.quick { margin-top: 0; }
@media (max-width: 899px) { .np-season { display: none; } }
@media (max-width: 899px) { .city { display: none; } }

/* 7 regions (added 30.09): open = warm tuff and a real link; soon = faded, no link */

.region use { fill: url(#plateau); transition: fill .2s; }
.region--open { cursor: pointer; outline: none; } /* 01.10: Chrome drew a black box round the region on mouse click; keyboard focus shows as fill + edge below */
.region--open:focus-visible use { stroke: var(--sea); stroke-width: calc(var(--u, 1) * 3); }
.region--open:hover use, .region--open:focus-visible use { fill: #f6d3bb; }
.region--soon use { fill: #eeeae5; }
.region.is-focus use { fill: #f4c9ab; }
.region-lines { pointer-events: none; }
.region-lines polygon { fill: none; stroke: #fff; stroke-width: calc(var(--u, 1) * 2px); stroke-dasharray: calc(var(--u, 1) * 5px) calc(var(--u, 1) * 4px); }
.land-edge { fill: none; stroke: #13233f; stroke-opacity: .5; stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
.region-l { pointer-events: none; }
.region-l text { font: 600 10px var(--f-mono); letter-spacing: .22em; fill: #9a6a4f; text-anchor: middle; }
.region-l--soon text { fill: #9f9b95; }
.region-l .soon-t { font: 600 8.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; fill: #b3aea8; }
.stop--soon .stop-ring { fill: #f4f1ee; }
a.stop { outline: none; }
a.stop:focus-visible .stop-ring { stroke: var(--sea); stroke-width: 4; }
@media (max-width: 899px) { .region-l { display: none; } }
/* stops keep a constant screen size (smaller on phones: --su); on phones only the big three keep their label */
.stops .k { transform: scale(var(--su, var(--u, 1))); }
.stops .stop:hover .k, .stops .stop:focus-visible .k { transform: scale(calc(var(--su, var(--u, 1)) * 1.1)); }
@media (max-width: 899px) { .stop:not(.is-major):not(.is-active) .stop-label { display: none; } .stop-label text { font-size: 15px; } }
/* zoom into a city: hide the chrome while the viewBox animates */
.mapapp.is-zooming .sheet, .mapapp.is-zooming .bar, .mapapp.is-zooming .now-pill { opacity: 0; transition: opacity .35s; pointer-events: none; }
.mapapp.is-zooming .route, .mapapp.is-zooming .lmk, .mapapp.is-zooming .stop:not([data-city]) { opacity: .2; transition: opacity .4s; }

.region-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.region-list a, .region-list .is-soon { display: block; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.region-list a:hover { border-color: var(--sea); }
.region-list strong { display: block; font: 700 .98rem/1.2 var(--f-display); }
.region-list strong + span { display: block; font-size: .82rem; color: var(--ink-2); margin-top: 2px; }
.region-list .is-soon { opacity: .65; background: var(--soft); }
.region-list em { font: 600 .62rem/1 var(--f-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid #d8d0c8; border-radius: 4px; padding: 2px 5px; margin-left: 6px; vertical-align: .15em; }
.region-h { font-size: 2rem; font-weight: 800; }
.stop-list--one { grid-template-columns: 1fr; margin: 18px 0; }
.stop-list--one .stop-row { border-radius: 16px; }
.cta--soon { background: var(--soft); border-color: var(--line); color: var(--ink-2); cursor: default; }
.cta--soon:hover { background: var(--soft); color: var(--ink-2); }

.foot { background: var(--night); color: #c9d1e3; padding: 36px 32px 28px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.brand--flat { box-shadow: none; }
.foot-claim { margin: 0; font-weight: 600; color: #fff; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0; }
.foot-nav a { color: #fff; }
.foot-small { margin: 0; font-size: .78rem; }
@media (max-width: 899px) { .foot { padding: 30px 16px 24px; } }

/* 01.10 (Ali): a zoomed region shows only the map — it fills the screen under the sticky site header */
@media (min-width: 900px) { .mapapp.is-region, .k1-home .mapapp.is-region { height: calc(100vh - var(--toph, 64px)); height: calc(100svh - var(--toph, 64px)); min-height: 520px; } }