/* Shared stylesheet for the generated city pages (/montenegro/kotor and friends).
   One file rather than an inline block per page: there are 34 of these for
   Montenegro alone, and a duplicated style block in every one would be both a
   payload and a thing that can drift page to page. Tokens match the site's LIGHT
   reading surface. */
:root{
  --bg:#FAF9F6;--bg-2:#EFEDE7;--ink:#14130F;--ink-2:#3A3833;--muted:#6E6A60;--muted-2:#9A948A;
  --blue:#236C9B;--gold:#9C6F12;--line:rgba(0,0,0,0.12);--line-strong:rgba(0,0,0,0.20);--dash:rgba(0,0,0,0.26);
  --gut:clamp(20px,6vw,90px);--maxw:1500px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.band{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2)}

/* Fixed and transparent so the hero runs underneath it, like every other page;
   .solid is toggled on scroll by city-filter.js. A city with no hero photograph
   ships with .solid already on the element and the toggle never runs. */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;padding:15px clamp(18px,4vw,44px);border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,padding .3s}
.navlink{font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.82);transition:color .2s}
.navlink:hover{color:#fff}
.nav .brand{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.3em;
  text-indent:.3em;font-size:14px;white-space:nowrap;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5);text-align:center}
.nav-left,.nav-right{display:flex;align-items:center;gap:26px}
.nav-right{justify-content:flex-end}
.navlink.active{color:#fff}
.nav.solid{background:rgba(250,249,246,.92);backdrop-filter:blur(12px);border-bottom-color:var(--line);
  padding-top:11px;padding-bottom:11px}
.nav.solid .navlink{color:var(--muted)}
.nav.solid .navlink:hover,.nav.solid .navlink.active{color:var(--ink)}
.nav.solid .brand{color:var(--ink);text-shadow:none}
/* App CTA: filled blue, the one loud element in the nav. */
.navcta{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 18px;background:#236C9B;border:1px solid #236C9B;border-radius:999px;color:#fff;
  transition:background .2s,border-color .2s,box-shadow .2s}
.navcta:hover{background:#1B567C;border-color:#1B567C;box-shadow:0 6px 18px rgba(35,108,155,.28)}
/* Below the breakpoint the four section links would wrap the wordmark off centre, so
   they drop out and the CTA and breadcrumbs carry the navigation. */
@media(max-width:760px){.nav-left{display:none}.nav{grid-template-columns:1fr auto 1fr}}

/* Breadcrumbs are real navigation here, not decoration: these pages are entered
   from search, so the reader arrives with no idea what site they are on. */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut) 0;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}
.crumbs a{color:var(--blue)}
.crumbs a:hover{text-decoration:underline}
.crumbs span{padding:0 6px;color:var(--muted-2)}
.crumbs em{font-style:normal;color:var(--ink)}

.c-hero{position:relative;height:clamp(28vh,38vh,400px);overflow:hidden;background:var(--bg-2)}
.c-hero .img{position:absolute;inset:0;background-size:cover;background-position:center}
/* Top scrim so the white nav links stay legible over a pale sky. */
.c-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.04) 30%,transparent 55%)}
/* With the nav fixed rather than sticky, a page with no hero starts its content at
   the very top; the breadcrumbs clear the bar instead. */
body.no-hero .crumbs{padding-top:86px}

.c-intro{max-width:880px;margin:0 auto;padding:clamp(34px,5vw,62px) clamp(22px,5vw,24px) 0;text-align:center}
.c-intro h1{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(32px,5.6vw,68px);line-height:.98;margin:14px 0 0}
.c-intro .lead{font-family:'Lora',Georgia,serif;font-size:clamp(16px,1.7vw,20px);line-height:1.62;
  color:var(--ink-2);max-width:640px;margin:22px auto 0}
.c-count{margin-top:18px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}
.c-rule{max-width:760px;margin:clamp(28px,4vw,44px) auto 0;border:0;border-top:1px dashed var(--dash)}

.sechead{display:flex;align-items:center;gap:18px;padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(18px,2vw,26px)}
.sechead h2{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(12px,1.05vw,14px);margin:0;white-space:nowrap}
.sechead .rule{flex:1;height:1px;background:var(--line-strong)}
.sechead .n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}

/* One line always: on a narrow screen the rail scrolls sideways (native touch
   swipe) instead of wrapping to a second row. Scrollbar hidden, it IS a swipe. */
.actbar{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:6px;margin:-6px -6px clamp(14px,2vw,24px)}
.actbar::-webkit-scrollbar{display:none}
.actbar .chip{flex:0 0 auto}
.chip{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.tile-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.3vw,20px);list-style:none}
.tile{align-self:start}
.tile[hidden]{display:none}
.tile .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bg-2)}
.tile .thumb .img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover .thumb .img{transform:scale(1.05)}
.tile .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--bg-2)}
.tile .noimg span{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);text-align:center;padding:0 8px}
.tile h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;line-height:1.25;margin:10px 0 0}
.tile .tmeta{margin-top:5px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
.tile p{font-family:'Lora',Georgia,serif;color:var(--muted);font-size:12.5px;line-height:1.5;margin:7px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile p.open{-webkit-line-clamp:unset;display:block}
.more-toggle{margin-top:6px;background:none;border:0;padding:0;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.more-toggle:hover{text-decoration:underline}
.state{font-family:'Lora',Georgia,serif;color:var(--muted);font-size:15px;padding:28px 0}
.state[hidden]{display:none}

.dlist{list-style:none;display:grid;gap:2px}
.dlist a{display:block;padding:16px 0;border-top:1px solid var(--line)}
.dlist a:hover strong{color:var(--blue)}
.dlist strong{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(17px,1.5vw,21px);
  line-height:1.2;transition:color .2s}
.dlist span{display:block;font-family:'Lora',Georgia,serif;color:var(--muted);font-size:14.5px;
  line-height:1.55;margin-top:7px;max-width:70ch}

/* Dispatch cards: the same photograph-led card a dispatch gets everywhere else on
   the site. A text-only row undersold the one piece of real editorial a city page
   links to. */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px)}
.dcard{display:block;color:inherit}
.dcard .thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.dcard .thumb .img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.dcard:hover .thumb .img{transform:scale(1.05)}
.dcard .ce{margin:16px 0 0;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue)}
.dcard h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(18px,1.6vw,23px);
  line-height:1.15;letter-spacing:-.01em;margin:10px 0 0;color:var(--ink);transition:color .2s}
.dcard:hover h3{color:var(--blue)}
.dcard p{font-family:'Lora',Georgia,serif;color:var(--muted);font-size:14.5px;line-height:1.6;
  margin:9px 0 0;max-width:46ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1080px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dgrid{grid-template-columns:1fr}}

/* Symmetric padding: the App CTA below opens with its own hairline border, and
   with no bottom padding here the button sat ON that line. */
.backband{padding:clamp(40px,5vw,64px) 0;display:flex;justify-content:center}
.more-btn{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  padding:12px 26px;display:inline-block;transition:background .2s}
.more-btn:hover{background:rgba(0,0,0,.05)}

footer{background:#08090C;padding:54px clamp(20px,6vw,90px) 44px;margin-top:clamp(50px,7vw,90px)}
.foot-mark{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  font-size:15px;text-indent:.26em;color:#F4F4F2}
.foot-mark + p{font-family:'Lora',Georgia,serif;color:#8C8F98;font-size:14px;margin-top:12px;line-height:1.65}
.foot-nav{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px}
.foot-nav a{color:#8C8F98;font-size:14px;transition:color .2s}
.foot-nav a:hover{color:#F4F4F2}
.foot-bottom{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);color:#5E626C;font-size:12px}

@media(max-width:1240px){.tile-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1100px){.tile-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.tile-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.tile-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---- map hero, for a city with no photograph -------------------------------
   One maplibre instance per page, and only on pages that have no hero photo. The
   outline is drawn by city-map.js from the OSM boundary inlined at build time. */
.c-hero.maphero{background:var(--bg-2)}
.c-hero.maphero #heroMap{position:absolute;inset:0}
.c-hero.maphero .maplibregl-canvas{outline:none}

/* ---- locator, for a venue with no photograph -------------------------------
   Inline SVG rather than a map: WebGL contexts are capped per document at around
   sixteen, so one map per tile silently loses maps as the reader scrolls. This costs
   nothing, needs no network, and answers a question a stock photograph could not,
   which is whereabouts in the town the place actually is. */

/* Breadcrumbs sit under the hero now, so they need their own breathing room rather
   than the tight top margin they had when they were the first thing on the page. */
.crumbs{padding-top:18px}

/* ---- split screen: the list, and where the list is ------------------------
   The list is the content and comes first in the document; the map is a second way
   to read it. Sticky so it holds still while the list scrolls past, and it collapses
   above the list on narrow screens where a two-column split would leave both halves
   too thin to use. */
.explore{display:grid;grid-template-columns:1fr 42%;gap:clamp(20px,2.4vw,34px);align-items:start}
.explore .tile-grid{grid-template-columns:repeat(3,1fr)}
.explore-map{position:sticky;top:84px}
.emap{height:clamp(420px,68vh,760px);border:1px solid var(--line);background:var(--bg-2)}
.emap:fullscreen,.explore-map:fullscreen .emap{height:100vh}
.emap-attrib{margin-top:8px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
.emap-attrib a{color:inherit;text-decoration:underline}

/* Pins. Same five chip groups as the filters and the app, so one vocabulary covers
   the map, the list and the phone. */
.emk{cursor:pointer;transform:translate(-50%,-50%)}
.emk-i{width:21px;height:21px;border-radius:50%;background:var(--blue);border:2px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease}
.emk-i svg{width:12px;height:12px;fill:#fff;display:block}
/* The fallback dot for categories no chip covers. Blue like every other pin:
   gold is the SELECTED state, here and on the country page, and a passive gold
   dot read as a pin that was already active. */
.emk-v{width:11px;height:11px;border-radius:50%;background:var(--blue);border:2px solid rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(0,0,0,.28)}
.emk:hover .emk-i{transform:scale(1.14)}
.emk.is-active .emk-i{background:var(--gold);transform:scale(1.25);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.emk.is-active .emk-v{background:var(--gold);width:15px;height:15px;box-shadow:0 1px 8px rgba(0,0,0,.35)}

.tile.is-active h3{color:var(--blue)}
.tile.is-active .thumb{outline:2px solid var(--blue);outline-offset:2px}

@media(max-width:1080px){
  .explore{grid-template-columns:1fr}
  .explore-map{position:static;order:-1}
  .emap{height:clamp(300px,44vh,460px)}
  .explore .tile-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){.explore .tile-grid{grid-template-columns:repeat(2,1fr)}}

/* Map thumbnail, matching the app's VenueMapThumbnail: a photograph when the corpus
   has one, a map of where the place is otherwise. Painted by map-snapshot.js from a
   single hidden map, so a page of them costs one WebGL context rather than one each.

   The plate is ink at 5%, so the tile has presence before the map lands and keeps it
   if the render never arrives (a coordinate outside basemap coverage returns 204 and
   draws nothing, which is missing coverage rather than a bug). The 1px ink stroke
   sits on top, inside the same corner radius. */
.tile .thumb{border-radius:10px}
.tile .mapthumb{background:rgba(20,19,15,.05);background-size:cover;background-position:center;
  transition:opacity .25s ease;opacity:0}
.tile .mapthumb.is-drawn{opacity:1}
.tile .thumb::after{content:'';position:absolute;inset:0;border-radius:10px;
  border:1px solid rgba(20,19,15,.09);pointer-events:none;z-index:2}

/* No locator dot on map thumbnails (removed 2026-08-08): the clean crop is the
   look. The camera centres the subject anyway, and at thumbnail size the map
   itself is the locator. */