/* Montenegro: the country's page and its places' pages (Dubrovnik, Herceg Novi, Budva) share this design. Loaded by a
   <link> inside <main>, so it arrives and leaves with the page when the site swaps pages in place. Scope every rule:
     main[data-country="montenegro"] ...                   anything inside the page
     body:has(main[data-country="montenegro"]) ...         the page's colours, the nav, the footer and the player
   The kit's own rules (tabs, stub) live in the photos block of site.css.

   Each place is one August, whatever the year: its days in order of the date, each under its date set as large as the
   name. The days in the sun sit on white; an evening of the sun going down sits on black, with a clock that follows
   the frames. The country's page has the coast with the places on it and the whole month.
   Schibsted Grotesk (SIL Open Font Licence), latin and latin-ext subsets, served from this folder. */
@font-face {
  font-family: "Schibsted Grotesk"; src: url("schibsted-ext.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk"; src: url("schibsted.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body:has(main[data-country="montenegro"]) {
  --bg: #fff; --surface: #f0f0f0; --ink: #141414; --soft: #5e5e5e; --panel: #f0f0f0;
  --paper: #fff; --paper-ink: #141414; --film: #141414; --mark: #c4561a;
  --link: #141414; --visited: #141414;
  --night: #000; --night-ink: #ededed; --night-soft: #a6a6a6; --sun: #f2a03d;
  --face: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --s-small: 14px;
  --s-body: clamp(17px, 16px + 0.25vw, 19px);
  --s-lead: clamp(20px, 17px + 0.7vw, 26px);
  --s-head: clamp(32px, 21px + 2.6vw, 60px);
  --s-num: clamp(132px, 21vw, 340px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gut: clamp(16px, 2.2vw, 32px);
  --row-gap: clamp(12px, 1.4vw, 24px);
  background: var(--bg); color: var(--ink); font-family: var(--face);
}
body:has(main[data-country="montenegro"]) nav, body:has(main[data-country="montenegro"]) #player { background: var(--bg); }
body:has(main[data-country="montenegro"]) ::selection { background: var(--ink); color: var(--bg); }
body:has(main[data-country="montenegro"]) :focus-visible { outline-color: var(--mark); }

main[data-country="montenegro"] { background: var(--bg); }

/* The tabs. */
main[data-country="montenegro"] > .tabs { padding: 28px 12px 0; }
@media (min-width: 900px) { main[data-country="montenegro"] > .tabs ol { flex-wrap: wrap; overflow: visible; } }
main[data-country="montenegro"] .tabs .bar { background: #cfcfcf; }
main[data-country="montenegro"] .tabs .place { font-style: normal; font-weight: 600; }
main[data-country="montenegro"] .tabs .here > a { background: var(--ink); color: var(--bg); }
main[data-country="montenegro"] .tabs .here .n { color: #bdbdbd; }
main[data-country="montenegro"] .tabs .here .bar { background: #555; }
main[data-country="montenegro"] .tabs .here .bar i { background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  main[data-country="montenegro"] .tabs li:not(.here) > a:hover { background: var(--surface); }
}

main[data-country="montenegro"] h1, main[data-country="montenegro"] h2, main[data-country="montenegro"] h3,
main[data-country="montenegro"] p { margin: 0; font-weight: 400; font-style: normal; }
main[data-country="montenegro"] ol { list-style: none; margin: 0; padding: 0; }
main[data-country="montenegro"] img { display: block; width: 100%; height: auto; }

/* ---- Opening: the name with the cove's waterline running through it (limestone above, the sea below), the dates on
   the water, and the six days to jump to. Only the name sits on colour; the frames stay on white and black. */
main[data-country="montenegro"] { --stone: #e6dfd0; --sea: #0d5f68; --deep: #073a40; --water: #1f4250; --water-deep: #14262e; }
main[data-country="montenegro"] .opening { padding: 0; }
main[data-country="montenegro"] .waterline {
  --seam: 50%; position: relative; min-height: max(520px, min(calc(100svh - 250px), 900px)); overflow: hidden; background: var(--stone);
}
main[data-country="montenegro"] .waterline::before { content: ""; position: absolute; left: 0; right: 0; top: var(--seam); bottom: 0; background: var(--sea); }
main[data-country="montenegro"] .name {
  position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-bottom: 0.82em; /* lifts a two-line name so the seam runs through its second line, not between the lines */
  font: bold clamp(80px, var(--fit, 17vw), 300px)/0.86 "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  letter-spacing: -0.035em; text-transform: uppercase;
  color: var(--deep); clip-path: inset(0 0 calc(100% - var(--seam)) 0); pointer-events: none; z-index: 1;
}
main[data-country="montenegro"] .name.under { color: var(--stone); clip-path: inset(var(--seam) 0 0 0); z-index: 0; }
main[data-country="montenegro"] .name.one { padding-bottom: 0; } /* one word: the seam runs through its middle */
main[data-country="montenegro"] .name .line { display: block; overflow: hidden; padding: 0 0.04em; }
main[data-country="montenegro"] .name .line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  main[data-country="montenegro"] .name .line > span { animation: cg-rise 900ms var(--ease) both; }
  main[data-country="montenegro"] .name .line + .line > span { animation-delay: 110ms; }
  @keyframes cg-rise { from { transform: translateY(102%); } to { transform: none; } }
}
main[data-country="montenegro"] .facts {
  position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: clamp(20px, 2.4vw, 32px); text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px 32px; color: var(--stone);
}
main[data-country="montenegro"] .facts .when { grid-column: 1; }
main[data-country="montenegro"] .facts .gear { grid-column: 3; justify-self: end; }
/* The place's arms in one ink on the water, between the dates and the gear. The picture is a mask (emblem.svg, set on
   the element so each page finds its own), so the arms take the colour of the text round them. */
main[data-country="montenegro"] .arms {
  grid-column: 2; height: min(clamp(72px, 8vw, 128px), 15svh); aspect-ratio: var(--ar);
  background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; forced-color-adjust: none;
}
/* Under the name: the country's places, this one marked; then the first picture standing on the right, and the month on
   the left with this place's days set large and the rest of August small. */
main[data-country="montenegro"] .places { display: flex; flex-wrap: wrap; gap: 8px clamp(24px, 3vw, 48px); padding: 20px var(--gut) 0; }
main[data-country="montenegro"] .places a, main[data-country="montenegro"] .places .sealed > span { display: inline-block; padding: 6px 0; color: var(--ink); text-decoration: none; font-size: var(--s-lead); }
main[data-country="montenegro"] .places .place { font-weight: 700; transition: color 200ms var(--ease); }
main[data-country="montenegro"] .places .yr { color: var(--soft); }
main[data-country="montenegro"] .places .here a { text-decoration: underline 3px var(--mark); text-underline-offset: 8px; }
main[data-country="montenegro"] .places a:active .place { color: var(--mark); }
@media (hover: hover) and (pointer: fine) { main[data-country="montenegro"] .places a:hover .place { color: var(--mark); } }
main[data-country="montenegro"] .intro {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gut); align-items: end;
  padding: clamp(48px, 6vw, 96px) var(--gut) 0;
}
main[data-country="montenegro"] .intro .cover { grid-area: 1 / 2; justify-self: end; width: min(100%, calc(88svh * var(--r))); }
main[data-country="montenegro"] .intro .index { grid-area: 1 / 1; }
main[data-country="montenegro"] .when { font-size: var(--s-lead); font-weight: 600; }
main[data-country="montenegro"] .gear { font-size: var(--s-lead); color: #b4d3d6; }
main[data-country="montenegro"] .index .m { font-size: var(--s-lead); font-weight: 700; margin-bottom: clamp(16px, 2vw, 28px); }
/* The month: every day of August in a line that wraps, the days shot here large, each with its year under it. */
main[data-country="montenegro"] .month { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
main[data-country="montenegro"] .month li { font-size: var(--s-small); color: #a8a8a8; font-variant-numeric: tabular-nums; }
main[data-country="montenegro"] .month li.on { font-size: clamp(56px, 6.4vw, 112px); color: var(--ink); }
main[data-country="montenegro"] .month a { display: inline-flex; flex-direction: column; color: inherit; text-decoration: none; }
main[data-country="montenegro"] .month .on .n { font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; transition: color 200ms var(--ease); }
main[data-country="montenegro"] .month .y { margin-top: 8px; font-size: max(14px, 0.15em); line-height: 1.2; color: var(--soft); }
main[data-country="montenegro"] .month a:active .n { color: var(--mark); }
@media (hover: hover) and (pointer: fine) { main[data-country="montenegro"] .month a:hover .n { color: var(--mark); } }
/* Every date opens that day as a grid: the index, the headings and the big numerals. */
main[data-country="montenegro"] h2 > a[data-sheet-open] { color: inherit; text-decoration: none; transition: color 200ms var(--ease); }
main[data-country="montenegro"] .num[data-sheet-open] { cursor: pointer; transition: color 200ms var(--ease); }
main[data-country="montenegro"] h2 > a[data-sheet-open]:active, main[data-country="montenegro"] .num[data-sheet-open]:active { color: var(--mark); }
@media (hover: hover) and (pointer: fine) {
  main[data-country="montenegro"] h2 > a[data-sheet-open]:hover, main[data-country="montenegro"] .num[data-sheet-open]:hover { color: var(--mark); }
}

/* ---- A day: its date, large, then its frames in rows. */
main[data-country="montenegro"] .day { padding: 0 var(--gut); margin-top: clamp(160px, 15vw, 240px); scroll-margin-top: 24px; }
main[data-country="montenegro"] .day.first { margin-top: clamp(80px, 9vw, 140px); }
main[data-country="montenegro"] .date {
  display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); margin-bottom: clamp(32px, 4vw, 64px);
}
main[data-country="montenegro"] .num {
  font-size: var(--s-num); font-weight: 800; line-height: 0.76; letter-spacing: -0.065em; font-variant-numeric: tabular-nums;
  margin-left: -0.04em;
}
main[data-country="montenegro"] .date h2, main[data-country="montenegro"] .drop h2 {
  font-size: var(--s-head); font-weight: 700; line-height: 1; letter-spacing: -0.025em; max-width: 9ch;
}
main[data-country="montenegro"] .where { margin-top: 10px; font-size: var(--s-lead); color: var(--soft); }
main[data-country="montenegro"] .dusk .where { color: var(--night-soft); }

/* Rows: the frames of a row share one height and are never cropped; a row is never taller than most of a screen,
   so a single frame sits to one side or in the middle with white around it. */
main[data-country="montenegro"] .rows { display: grid; gap: clamp(48px, 6vw, 112px); }
main[data-country="montenegro"] .row {
  display: flex; gap: var(--row-gap); align-items: flex-start; width: min(100%, calc(78svh * var(--sum)));
}
main[data-country="montenegro"] .row.r { margin-left: auto; }
main[data-country="montenegro"] .row.c { margin-inline: auto; }
main[data-country="montenegro"] .shot { flex: var(--r) 1 0; min-width: 0; }
main[data-country="montenegro"] .meta {
  margin-top: 10px; font-size: var(--s-small); color: var(--soft);
}
main[data-country="montenegro"] .shot a { display: block; }
main[data-country="montenegro"] .shot img { transition: opacity 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  main[data-country="montenegro"] .shot a:hover img { opacity: 0.88; }
}

/* A stop within a day: the walled town. */
main[data-country="montenegro"] .stop { margin-top: clamp(96px, 10vw, 160px); }
main[data-country="montenegro"] .stop h3 {
  font-size: var(--s-head); font-weight: 800; line-height: 1; letter-spacing: -0.035em; margin-bottom: clamp(32px, 4vw, 56px);
}
main[data-country="montenegro"] .stop h3 .span {
  margin-left: 0.4em; font-size: var(--s-lead); font-weight: 400; letter-spacing: 0; color: var(--soft);
}
main[data-country="montenegro"] .rows.after { margin-top: clamp(96px, 10vw, 160px); }

/* ---- A day with one frame: the print lies on its date. */
main[data-country="montenegro"] .drop > .label { margin-bottom: clamp(36px, 4vw, 56px); }
main[data-country="montenegro"] .stage { display: flex; align-items: center; }
main[data-country="montenegro"] .stage .num { flex: none; }
main[data-country="montenegro"] .stage .shot {
  position: relative; z-index: 1; flex: none; width: min(56vw, 820px, calc(64svh * var(--r))); margin-left: -2vw;
  rotate: var(--tilt); transition: rotate 400ms var(--ease);
}
main[data-country="montenegro"] .drop.flip .stage { flex-direction: row-reverse; justify-content: flex-end; }
main[data-country="montenegro"] .drop.flip .stage .shot { margin: 0 -2vw 0 0; }
main[data-country="montenegro"] .stage .shot:focus-within { rotate: 0deg; }
@media (hover: hover) and (pointer: fine) {
  main[data-country="montenegro"] .stage .shot:hover { rotate: 0deg; }
}

/* ---- The last evening, on black. The clock on the left follows the frame in view. */
main[data-country="montenegro"] .dusk {
  margin-top: clamp(140px, 15vw, 260px); padding: clamp(96px, 10vw, 160px) var(--gut) clamp(120px, 12vw, 200px);
  background: var(--night); color: var(--night-ink);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gut); align-items: start;
}
main[data-country="montenegro"] .dusk .side { position: sticky; top: 24px; }
main[data-country="montenegro"] .dusk .date { display: block; margin: 0; }
main[data-country="montenegro"] .dusk .date h2 { margin-top: 20px; }
main[data-country="montenegro"] .dusk .meta { color: var(--night-soft); }
main[data-country="montenegro"] .clock {
  margin-top: clamp(32px, 4vw, 64px); font-size: var(--s-lead); color: var(--sun); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1;
}
main[data-country="montenegro"][data-js] .clock { font-size: clamp(64px, 8vw, 132px); font-weight: 800; letter-spacing: -0.045em; }
main[data-country="montenegro"] .clock .t { display: inline-block; }
main[data-country="montenegro"] .dusk .row { width: min(100%, calc(80svh * var(--sum))); }
/* The way on: on white, or still in the evening after one. */
main[data-country="montenegro"] > .stub {
  width: auto; margin: -1px 0 0; border: 0; padding: clamp(120px, 12vw, 200px) var(--gut) clamp(96px, 10vw, 160px); background: var(--bg); color: var(--ink);
}
main[data-country="montenegro"] > .stub a { color: var(--ink); }
main[data-country="montenegro"] > .dusk + .stub { padding-top: 0; background: var(--night); color: var(--night-ink); }
main[data-country="montenegro"] > .dusk + .stub a { color: var(--night-ink); }
main[data-country="montenegro"] > .dusk + .stub a:focus-visible { outline-color: var(--sun); }
main[data-country="montenegro"] > .stub .next { font-style: normal; font-weight: 800; font-size: var(--s-head); letter-spacing: -0.03em; }
main[data-country="montenegro"] .dusk { padding-bottom: clamp(120px, 12vw, 200px); }

/* ---- The country: the coast, its sea running on from the name's and deepening to open water; the places on it; the whole month; three frames. */
main[data-country="montenegro"] .coast .sea { position: relative; margin-top: -1px; padding: 0 var(--gut) 16px; background: linear-gradient(var(--sea), var(--water) 75%); }
main[data-country="montenegro"] .coast-map { display: block; width: 100%; max-height: 84svh; height: auto; margin: 0 auto; }
main[data-country="montenegro"] .coast-map .land { fill: var(--stone); }
main[data-country="montenegro"] .coast-map .border { fill: none; stroke: var(--water); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.55; }
main[data-country="montenegro"] .coast-map text { font-family: var(--face); fill: var(--water-deep); paint-order: stroke; stroke: var(--stone); stroke-width: 5px; stroke-linejoin: round; }
main[data-country="montenegro"] .coast-map .tn { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
main[data-country="montenegro"] .coast-map .ty { font-size: 16px; font-weight: 400; }
main[data-country="montenegro"] .coast-map .town circle { fill: var(--mark); stroke: var(--stone); stroke-width: 3; transition: r 200ms var(--ease); }
main[data-country="montenegro"] .coast-map .town:focus-visible { outline: none; }
main[data-country="montenegro"] .coast-map .town:focus-visible .tn, main[data-country="montenegro"] .coast-map .town:active .tn { fill: var(--mark); }
@media (hover: hover) and (pointer: fine) {
  main[data-country="montenegro"] .coast-map .town:hover .tn { fill: var(--mark); }
  main[data-country="montenegro"] .coast-map .town:hover circle { r: 10; }
  main[data-country="montenegro"] .coast-map .away:hover path { stroke: var(--mark); }
}
main[data-country="montenegro"] .coast-map .spot circle { fill: var(--water-deep); }
main[data-country="montenegro"] .coast-map .spot path { fill: none; stroke: var(--water-deep); stroke-width: 1; }
main[data-country="montenegro"] .coast-map .spot text { font-size: 15px; }
main[data-country="montenegro"] .coast-map .away path { fill: none; stroke: var(--water-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke 200ms var(--ease); }
main[data-country="montenegro"] .coast-map .away:focus-visible path, main[data-country="montenegro"] .coast-map .away:active path { stroke: var(--mark); }
main[data-country="montenegro"] .coast .credit { position: absolute; left: var(--gut); bottom: 12px; font-size: var(--s-small); color: #b9c3c4; }
main[data-country="montenegro"] .coast .credit a { color: inherit; }
main[data-country="montenegro"] .coast .places { padding-top: clamp(32px, 4vw, 56px); }
main[data-country="montenegro"] .coast .places a, main[data-country="montenegro"] .coast .places .sealed > span { font-size: var(--s-head); letter-spacing: -0.03em; line-height: 1.1; }
main[data-country="montenegro"] .coast .places .yr { font-size: var(--s-lead); letter-spacing: 0; }
main[data-country="montenegro"] .augusts { padding: clamp(120px, 12vw, 200px) var(--gut) 0; }
main[data-country="montenegro"] .augusts h2 { font-size: var(--s-head); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin-bottom: clamp(32px, 4vw, 56px); }
main[data-country="montenegro"] .augusts .month { gap: 16px 20px; }
main[data-country="montenegro"] .augusts .month li.on { font-size: clamp(56px, 7vw, 120px); }
main[data-country="montenegro"] .picks { padding: clamp(120px, 12vw, 200px) var(--gut) 0; }
main[data-country="montenegro"] .picks .meta a { color: var(--ink); }

/* ---- Motion: each part rises once as it arrives; the clock fades between times. */
@media (prefers-reduced-motion: no-preference) {
  main[data-country="montenegro"] .rise { opacity: 0; translate: 0 24px; }
  main[data-country="montenegro"] .rise.in {
    opacity: 1; translate: none;
    transition: opacity 700ms var(--ease) var(--d, 0ms), translate 900ms var(--ease) var(--d, 0ms), rotate 400ms var(--ease);
  }
  main[data-country="montenegro"] .clock .t.tick { animation: cg-tick 700ms var(--ease); }
  @keyframes cg-tick { from { opacity: 0.15; } to { opacity: 1; } }
}

/* ---- Narrow screens: one column, frames edge to edge; two tall frames keep their pair. On the last evening the clock
   stays at the top of the screen. */
@media (max-width: 899px) {
  main[data-country="montenegro"] > .tabs { padding: 16px 0 0 16px; }
  main[data-country="montenegro"] .intro { display: block; padding-top: 32px; }
  main[data-country="montenegro"] .intro .cover { justify-self: auto; width: auto; margin: 0 calc(-1 * var(--gut)); }
  main[data-country="montenegro"] .intro .index { margin-top: 40px; }
  main[data-country="montenegro"] .month li.on { font-size: 64px; }
  main[data-country="montenegro"] .date { flex-wrap: wrap; }
  /* On a phone the facts are too tall to sit on the water under the name, so they follow it: the name keeps a stage of
     its own with the waterline through its middle, and the facts start below the name's lower half. */
  main[data-country="montenegro"] .waterline, main[data-country="montenegro"] .waterline:has(.name.one) {
    --stage: 72svh; --seam: calc(var(--stage) / 2); min-height: 0;
    padding: calc(var(--seam) + var(--fit-s, 30vw) * 0.55 + 24px) 0 28px;
  }
  main[data-country="montenegro"] .name { font-size: var(--fit-s, 30vw); bottom: auto; height: var(--stage); }
  main[data-country="montenegro"] .facts { position: relative; inset: auto; margin: 0 var(--gut); grid-template-columns: minmax(0, 1fr) auto; gap: 0 20px; }
  main[data-country="montenegro"] .facts .when, main[data-country="montenegro"] .facts .gear { grid-column: 1; justify-self: start; }
  main[data-country="montenegro"] .arms { grid-column: 2; grid-row: 1 / span 2; height: 64px; }
  main[data-country="montenegro"] .gear { margin-top: 6px; }
  main[data-country="montenegro"] .rows { margin: 0 calc(-1 * var(--gut)); gap: 56px; }
  main[data-country="montenegro"] .rows > .row { width: auto; margin-inline: 0; }
  main[data-country="montenegro"] .row:not(.keep) { display: block; }
  main[data-country="montenegro"] .row:not(.keep) .shot + .shot { margin-top: 40px; }
  main[data-country="montenegro"] .row.keep { gap: 6px; }
  main[data-country="montenegro"] .row.keep .meta { font-size: 13px; }
  main[data-country="montenegro"] .meta { padding: 0 var(--gut); }
  main[data-country="montenegro"] .row.keep .shot:first-child .meta { padding-right: 0; }
  main[data-country="montenegro"] .row.keep .shot:last-child .meta { padding-left: 0; }
  main[data-country="montenegro"] .stage, main[data-country="montenegro"] .drop.flip .stage { flex-direction: column; align-items: flex-start; }
  main[data-country="montenegro"] .stage .shot, main[data-country="montenegro"] .drop.flip .stage .shot {
    width: min(88vw, calc(64svh * var(--r))); margin: -0.05em 0 0 auto; font-size: var(--s-num);
  }
  main[data-country="montenegro"] .stage .shot .meta { font-size: var(--s-small); }
  main[data-country="montenegro"] .stage .meta { padding: 0; }
  main[data-country="montenegro"] .dusk { display: block; padding-top: 80px; }
  main[data-country="montenegro"] .dusk .side { display: contents; }
  main[data-country="montenegro"] .clock {
    position: sticky; top: 0; z-index: 2; margin: 24px calc(-1 * var(--gut)) 24px; padding: 12px var(--gut);
    background: var(--night);
  }
  main[data-country="montenegro"][data-js] .clock { font-size: 56px; }
  main[data-country="montenegro"] .coast .sea { padding: 0 0 36px; }
  main[data-country="montenegro"] .coast-map .tn { font-size: 46px; }
  main[data-country="montenegro"] .coast-map .ty { font-size: 32px; }
  main[data-country="montenegro"] .coast-map text { stroke-width: 8px; }
  main[data-country="montenegro"] .coast-map .spot text, main[data-country="montenegro"] .coast-map .spot path { display: none; }
  main[data-country="montenegro"] .augusts .month li.on { font-size: 64px; }
}