/* Komiža: the town is turned south-west, to the open sea, and so is this page. Its moments: the name sinking into
   the sunset; three photographs opening along the south-west diagonal; rows of sardines laid in salt; the lateen sail
   drawn, then filled; the Kaštel built letter on letter; Nikolinje, 6. prosinca, opening onto a bell tower; four lanes
   climbing at their own pace; the harbour at dusk; a boat leaving for Biševo. Every rule is scoped to kz-. */

.kz-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; font: 600 11.5px/1.45 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.kz-cap::before { content: ''; width: 22px; height: 1.5px; background: var(--ink); flex: none; align-self: center; }
.kz-cap b { flex: none; font-weight: 700; color: var(--terra); }
.kz-lift, .kz-lane, .kz-ds { will-change: transform; }
[class^="kz-"] img { display: block; }

/* =================== 1 · the name sets into the sea =================== */
.kz-op { position: relative; overflow: clip; --kzn: min(460px, calc((100vw - 2 * var(--g)) / 3.1)); }
.kz-op-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding: clamp(22px, 2.4vw, 40px) var(--g) 0; }
.kz-bear { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); }
.kz-rose { display: block; width: clamp(58px, 5.4vw, 92px); height: auto; overflow: visible; }
.kr-o { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.kr-i { fill: none; stroke: rgba(34, 28, 22, .22); stroke-width: 1; }
.kr-ticks path { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.kr-t { font: 700 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .04em; fill: var(--ink2); text-anchor: middle; dominant-baseline: central; }
.kr-nd { fill: var(--ink); }
.kr-nh { fill: var(--terra); }
.kr-needle circle { fill: var(--lime); stroke: var(--ink); stroke-width: 1.4; }
.kz-bear-t { display: flex; flex-direction: column; gap: 5px; font: 600 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.kz-bear-t b { font: 900 clamp(28px, 2.5vw, 40px)/.86 var(--fd); letter-spacing: -.01em; color: var(--terra); }

.kz-name { position: relative; margin: 0; padding: 0 var(--g); font: 900 var(--kzn)/.8 var(--fd); letter-spacing: -.052em; white-space: nowrap; color: var(--ink); pointer-events: none; }
h1.kz-name { z-index: 1; margin-top: clamp(10px, 2.2vw, 36px); }
.kz-name-w { display: block; padding-top: .08em; margin-left: -.045em; will-change: transform; }
/* the name arrives from the north-east, the way the page leans (both copies move together, so they stay one word) */
.js .kz-name { animation: kz-in 1.5s var(--ease) .1s both; }
@keyframes kz-in { from { transform: translate3d(7vw, -.1em, 0); } to { transform: none; } }
.kz-sea { position: relative; z-index: 2; margin: calc(var(--kzn) * -.34) 0 0; }
.kz-sea-in { position: relative; overflow: hidden; height: clamp(380px, 86vh, 1000px); height: clamp(380px, 86svh, 1000px); background: #8f7f9b; }
.kz-sea-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform-origin: 50% 20%; will-change: transform; }
/* the part of the name under the waterline, in the colour of the light on the water */
.kz-name-sea { position: absolute; left: 0; right: 0; top: calc(var(--kzn) * -.54); color: #FBF6EC; }
.kz-sea > .kz-cap { padding: 0 var(--g); }

/* =================== 2 · the town in one sentence, and in figures =================== */
.kz-st { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding: clamp(80px, 9vw, 150px) var(--g) clamp(70px, 8vw, 130px); }
.kz-st-t { grid-column: 1 / span 11; font: 800 clamp(30px, 4vw, 70px)/1.07 var(--fd); letter-spacing: -.026em; text-wrap: pretty; }
.kz-led { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(44px, 5.4vw, 90px); border-top: 1.6px solid var(--ink); }
.kz-lg { padding: 16px 18px 4px 0; }
.kz-lg + .kz-lg { padding-left: 18px; border-left: 1px solid var(--rule); }
.kz-lg dt { font: 600 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.kz-lg dd { margin-top: 10px; font: 800 clamp(19px, 1.65vw, 27px)/1.12 var(--fd); letter-spacing: -.012em; }
.js .kz-lg.rv { transition-delay: calc(var(--i) * 70ms); }

/* =================== 3 · from the air: opening along the south-west diagonal =================== */
.kz-sw { position: relative; --bar: clamp(170px, 21vh, 210px); }
.kz-sw-stage { display: flex; flex-direction: column; }
.kz-sw-bar { order: -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 60px); align-items: end; padding: 0 var(--g) clamp(30px, 3vw, 50px); }
.kz-sw-h { margin-top: 14px; font: 900 clamp(48px, 6.4vw, 118px)/.88 var(--fd); letter-spacing: -.04em; text-wrap: balance; }
.kz-sw-p { font: 500 clamp(17px, 1.3vw, 20px)/1.5 var(--ft); max-width: 27em; text-wrap: pretty; }
.kz-sw-meta { display: none; }
.kz-sw-frame { display: grid; gap: clamp(24px, 3vw, 44px); }
.kz-sw-f { margin: 0; }
.kz-sw-f .kz-cap { padding: 0 var(--g); }
.kz-sw-z { overflow: hidden; height: min(66.7vw, 92vh); background: #9fb3bd; }
.kz-sw-z img { width: 100%; height: 100%; object-fit: cover; }
.kz-sw-edge { display: none; }
/* held (motion allowed): the frame fills the screen, the bar holds the words */
.kz-sw.live .kz-sw-pin { height: calc(100vh + (var(--n) - 1) * 82vh + 34vh); }
@supports (height: 100svh) { .kz-sw.live .kz-sw-pin { height: calc(100svh + (var(--n) - 1) * 82svh + 34svh); } }
.kz-sw.live .kz-sw-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
.kz-sw.live .kz-sw-frame { position: absolute; left: 0; right: 0; top: 0; bottom: var(--bar); display: block; background: #9fb3bd; overflow: hidden; }
.kz-sw.live .kz-sw-f { position: absolute; inset: 0; }
.kz-sw.live .kz-sw-f + .kz-sw-f { visibility: hidden; }
.kz-sw.live .kz-sw-f.vis { visibility: visible; }
.kz-sw.live .kz-sw-z { position: absolute; inset: 0; height: auto; aspect-ratio: auto; max-height: none; }
.kz-sw.live .kz-sw-z img { will-change: transform; }
.kz-sw.live .kz-sw-f figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.kz-sw.live .kz-sw-edge { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.kz-sw-l { fill: none; stroke: #FBF6EC; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.kz-sw.live .kz-sw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); align-items: center; padding: 0 var(--g); }
.kz-sw.live .kz-sw-h { font-size: clamp(44px, 5.2vw, 96px); }
.kz-sw.live .kz-sw-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 10px; }
.kz-sw-count { display: flex; align-items: baseline; gap: 10px; }
.kz-sw-i { font: 900 clamp(46px, 4.4vw, 76px)/.8 var(--fd); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kz-sw-of { font: 600 13px/1 var(--ft); font-stretch: 75%; letter-spacing: .16em; color: var(--ink3); }
.kz-sw-caps { display: grid; justify-items: end; min-height: 2.9em; font: 600 11.5px/1.45 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.kz-sw-c { grid-area: 1 / 1; max-width: 26em; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .5s var(--ease); }
.kz-sw-c.on { opacity: 1; transform: none; transition-delay: .1s; }

/* =================== 4 · sardines and salt =================== */
.kz-fish { padding: clamp(110px, 12vw, 200px) 0 clamp(70px, 8vw, 140px); overflow: clip; }
.kz-fish-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding: 0 var(--g); align-items: end; }
.kz-fish-head .label { grid-column: 1 / -1; }
.kz-fish-h { grid-column: 1 / span 7; margin-top: 16px; font: 900 clamp(56px, 9.4vw, 176px)/.86 var(--fd); letter-spacing: -.045em; }
.kz-fish-p { grid-column: 8 / span 5; padding-bottom: .6em; font: 500 clamp(18px, 1.5vw, 23px)/1.5 var(--ft); max-width: 21em; text-wrap: pretty; }
.kz-barrel { position: relative; margin-top: clamp(50px, 6vw, 100px); }
.kz-rows { display: flex; flex-direction: column; align-items: flex-start; }
.kz-row { display: flex; white-space: nowrap; width: max-content; margin-left: -30vw; will-change: transform; }
.kz-row-f span { padding-right: .34em; font: 900 clamp(54px, 8.2vw, 150px)/.92 var(--fd); letter-spacing: -.04em; }
.kz-row-f:nth-child(4n + 3) span { color: var(--green); }
.kz-row-s { padding: 10px 0 12px; }
.kz-row-s span { padding-right: 2.4em; font: 600 12.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .38em; text-transform: uppercase; color: var(--ink3); }
.kz-fish-ph { position: absolute; right: var(--g); top: 50%; width: min(43vw, 720px); margin: calc(min(43vw, 720px) * -.36) 0 0; z-index: 2; }
.kz-fish-ph img, .kz-net-a img, .kz-net-b img, .kz-tower-ph img, .kz-lane-wide img, .kz-bis-a img, .kz-falk-2 img, .kz-ds img { width: 100%; height: auto; border-radius: 3px; }
.kz-fish-ph img { box-shadow: 0 30px 60px -34px rgba(60, 40, 20, .55); }
.kz-fish-ph .kz-cap { display: inline-flex; margin-top: 0; padding: 10px 14px 10px 0; background-color: var(--lime); background-image: var(--tex); }
.kz-nets { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding: clamp(110px, 12vw, 190px) var(--g) 0; align-items: start; }
.kz-net-a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.kz-net-b { grid-column: 9 / span 4; grid-row: 1; margin-top: 7vw; }
.kz-pog { grid-column: 9 / span 4; grid-row: 2; align-self: end; margin-top: 50px; }
.kz-pog-l { display: flex; align-items: center; gap: 12px; font: 600 12.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.kz-pog-l::before { content: ''; width: 22px; height: 1.6px; background: currentColor; flex: none; }
.kz-pog-t { display: block; margin-top: 16px; font: 850 clamp(32px, 3.5vw, 62px)/1.02 var(--fd); letter-spacing: -.026em; color: var(--green); text-wrap: balance; }

/* =================== 5 · falkuša: the sail is drawn, then filled =================== */
.kz-falk { position: relative; padding-top: clamp(60px, 6vw, 100px); }
.kz-falk-stage { display: flex; flex-direction: column; }
.kz-falk-t { order: -1; padding: 0 var(--g) clamp(26px, 3vw, 44px); }
.kz-falk-h { margin-top: 14px; font: 900 clamp(64px, 11.4vw, 214px)/.84 var(--fd); letter-spacing: -.048em; }
.kz-falk-p { margin-top: 18px; max-width: 22em; font: 600 clamp(18px, 1.5vw, 23px)/1.45 var(--ft); text-wrap: pretty; }
.kz-falk-fig { margin: 0; }
.kz-falk-win { position: relative; overflow: hidden; aspect-ratio: 3 / 2; max-height: 94vh; background: #5c7a8c; }
.kz-falk-img { width: 100%; height: 100%; object-fit: cover; }
.kz-falk-svg { display: none; }
.kz-falk-fig > .kz-cap { padding: 0 var(--g); }
.kz-falk-lines path { fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.kz-falk-lines .fl-spar { stroke-width: 4.2; }
.kz-falk-lines .fl-far { stroke: rgba(34, 28, 22, .4); stroke-width: 1.4; }
@media (max-width: 999px) { .kz-falk-lines path { stroke-width: 3.2; } .kz-falk-lines .fl-spar { stroke-width: 5.6; } .kz-falk-lines .fl-far { stroke-width: 2; } }
/* held: the drawing takes the screen */
.kz-falk.live .kz-falk-pin { height: calc(100vh + 150vh); }
@supports (height: 100svh) { .kz-falk.live .kz-falk-pin { height: calc(100svh + 150svh); } }
.kz-falk.live .kz-falk-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
.kz-falk.live .kz-falk-fig { position: absolute; inset: 0; }
.kz-falk.live .kz-falk-win { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; background: transparent; }
.kz-falk.live .kz-falk-img { opacity: 0; }
.kz-falk.live .kz-falk-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.kz-falk.live .kz-falk-cap { position: absolute; right: var(--g); bottom: clamp(18px, 3vh, 34px); margin: 0; padding: 0; color: #FBF6EC; opacity: 0; }
.kz-falk.live .kz-falk-cap::before { background: #FBF6EC; }
.kz-falk.live .kz-falk-t { position: absolute; left: 0; bottom: clamp(20px, 4.4vh, 52px); width: min(58vw, 900px); padding: 0 var(--g); z-index: 2; color: var(--ink); }
/* a light copy of the words, shown only inside the opening photograph, so they turn light exactly where it arrives */
.kz-falk-t2 { display: none; }
.kz-falk.live .kz-falk-t2 { display: block; z-index: 3; color: #FBF6EC; clip-path: circle(0 at 0 0); pointer-events: none; }
.kz-falk.live .kz-falk-t .label { color: inherit; }
.kz-falk.live .kz-falk-p { max-width: 19em; }

/* =================== 6 · the Kaštel, built letter on letter =================== */
.kz-tower { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: end; padding: clamp(120px, 13vw, 210px) var(--g) clamp(30px, 3vw, 60px); }
.kz-tower-ph { grid-column: 1 / span 7; grid-row: 1; }
.kz-tower-h { grid-column: 8 / span 2; grid-row: 1; justify-self: center; align-self: end; margin-bottom: 30px; font: 900 clamp(84px, 13.4vw, 250px)/.92 var(--fd); letter-spacing: -.03em; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.kz-tw-in { display: block; }
.kz-tw-c { display: inline-block; will-change: transform; }
.kz-tower-t { grid-column: 10 / span 3; grid-row: 1; padding-bottom: 30px; }
.kz-tw-n { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.kz-tw-n b { font: 900 clamp(76px, 8.4vw, 150px)/.8 var(--fd); letter-spacing: -.05em; color: var(--terra); }
.kz-tw-n span { font: 700 clamp(18px, 1.5vw, 24px)/1 var(--fd); color: var(--ink2); }
.kz-tw-l { margin-top: clamp(22px, 2.4vw, 36px); border-top: 1.6px solid var(--ink); }
.kz-tw-l li { padding: 13px 0 14px; border-bottom: 1px solid var(--rule); font: 700 clamp(18px, 1.45vw, 23px)/1.25 var(--fd); letter-spacing: -.008em; text-wrap: balance; }
.js .kz-tw-l li.rv { transition-delay: calc(var(--i) * 90ms); }

/* =================== 7 · Nikolinje: the date opens onto the bell tower =================== */
.kz-six { position: relative; }
.kz-six-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding: clamp(100px, 11vw, 170px) var(--g) clamp(70px, 8vw, 130px); align-items: end; }
.kz-six-l { grid-column: 1 / -1; grid-row: 1; }
.kz-six-fig { grid-column: 1 / span 8; grid-row: 2; margin-top: 30px; }
.kz-six-win { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 3px; }
.kz-six-img { width: 100%; height: 100%; object-fit: cover; }
.kz-six-svg { display: none; }
.kz-six-glyph { font: 900 800px/1 var(--fd); letter-spacing: 0; }
.kz-six-date { grid-column: 9 / span 4; grid-row: 2; align-self: start; margin-top: 30px; display: flex; flex-direction: column; }
.kz-six-dd { font: 900 clamp(120px, 15vw, 280px)/.78 var(--fd); letter-spacing: -.06em; }
.kz-six-dm { margin-top: .1em; font: 900 clamp(40px, 4.6vw, 84px)/.9 var(--fd); letter-spacing: -.035em; color: var(--terra); }
.kz-six-t { grid-column: 9 / span 4; grid-row: 2; align-self: end; }
.kz-six-h { font: 900 clamp(46px, 5vw, 92px)/.9 var(--fd); letter-spacing: -.035em; }
.kz-six-p { margin-top: 18px; font: 500 clamp(17px, 1.35vw, 21px)/1.5 var(--ft); text-wrap: pretty; }
/* held: the numeral stands alone, then opens onto the photograph */
.kz-six.live .kz-six-pin { height: calc(100vh + 110vh); }
@supports (height: 100svh) { .kz-six.live .kz-six-pin { height: calc(100svh + 110svh); } }
.kz-six.live .kz-six-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding-top: calc(var(--hd) + clamp(18px, 3vh, 40px)); padding-bottom: clamp(24px, 5vh, 56px); grid-template-rows: auto minmax(0, 1fr); }
.kz-six.live .kz-six-fig { align-self: center; width: min(100%, (100vh - var(--hd) - 190px) * 1.5); }
@supports (height: 100svh) { .kz-six.live .kz-six-fig { width: min(100%, (100svh - var(--hd) - 190px) * 1.5); } }
.kz-six.live .kz-six-win { overflow: hidden; border-radius: 2px; }
.kz-six.live .kz-six-img { opacity: 0; }
.kz-six.live .kz-six-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.kz-six.live .kz-six-fig .kz-cap { opacity: var(--capo, 0); }

/* =================== 8 · the lanes =================== */
.kz-lanes { padding: clamp(110px, 12vw, 200px) var(--g) clamp(80px, 9vw, 150px); overflow: clip; }
.kz-lanes-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); }
.kz-lanes-head .label { grid-column: 1 / -1; }
.kz-lanes-h { grid-column: 1 / span 10; margin-top: 16px; font: 900 clamp(52px, 8vw, 150px)/.88 var(--fd); letter-spacing: -.044em; text-wrap: balance; }
.kz-lanes-cols { display: grid; grid-template-columns: 1.3fr .82fr 1.3fr .82fr; column-gap: clamp(12px, 1.7vw, 28px); align-items: start; margin-top: clamp(50px, 6vw, 100px); }
.kz-lane { margin: 0; }
.kz-lane-f { overflow: hidden; aspect-ratio: 2 / 3; border-radius: 3px; background: #b9aa90; }
.kz-lane-f img { width: 100%; height: 100%; object-fit: cover; }
.kz-lane-2 { margin-top: 16vw; }
.kz-lane-3 { margin-top: 5vw; }
.kz-lane-4 { margin-top: 24vw; }
.kz-lanes-end { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: end; margin-top: clamp(80px, 9vw, 150px); }
.kz-lane-wide { grid-column: 1 / span 8; }
.kz-apt { grid-column: 9 / span 4; display: grid; grid-template-columns: minmax(0, 1fr) 48px; column-gap: 16px; align-items: center; padding: 20px 0 22px; margin-bottom: 30px; border-top: 1.6px solid var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.kz-apt-l { grid-column: 1; font: 600 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.kz-apt-n { grid-column: 1; margin-top: 8px; font: 900 clamp(34px, 3.4vw, 60px)/.95 var(--fd); letter-spacing: -.032em; transition: transform .6s var(--ease); }
.kz-apt-d { grid-column: 1; margin-top: 10px; font: 500 16.5px/1.45 var(--ft); color: var(--ink2); }
.kz-apt svg { grid-column: 2; grid-row: 1 / span 3; width: 48px; height: 48px; padding: 14px; border-radius: 50%; border: 1.5px solid rgba(34, 28, 22, .3); transition: background-color .35s, border-color .35s, color .35s, transform .45s var(--ease); }
.kz-apt:hover .kz-apt-n, .kz-apt:focus-visible .kz-apt-n { transform: translateX(8px); }
.kz-apt:hover svg, .kz-apt:focus-visible svg { background: var(--green); border-color: var(--green); color: #FFF8EF; }

/* =================== 9 · dusk =================== */
.kz-dusk { padding: clamp(60px, 6vw, 110px) 0 clamp(80px, 9vw, 140px); overflow: clip; }
.kz-dusk-win { position: relative; overflow: hidden; height: clamp(420px, 94vh, 1080px); height: clamp(420px, 94svh, 1080px); background: #3f5a78; }
.kz-dusk-win img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform-origin: 50% 60%; will-change: transform; }
.kz-dusk-h { position: absolute; left: var(--g); bottom: 0; margin: 0 0 -.14em -.05em; font: 900 clamp(84px, 20vw, 380px)/.8 var(--fd); letter-spacing: -.055em; color: #FBF6EC; }
.kz-dusk-h span { display: block; padding-top: .1em; will-change: transform; }
.kz-dusk-hero > .kz-cap { padding: 0 var(--g); }
.kz-dusk-p { margin: clamp(60px, 7vw, 110px) var(--g) 0 auto; padding: 0 var(--g); width: min(100%, 58vw); font: 800 clamp(26px, 2.8vw, 48px)/1.1 var(--fd); letter-spacing: -.024em; text-wrap: pretty; }
.kz-dusk-set { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding: clamp(70px, 8vw, 130px) var(--g) 0; align-items: start; }
.kz-ds { margin: 0; }
.kz-ds-a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.kz-ds-b { grid-column: 9 / span 4; grid-row: 1; }
.kz-ds-c { grid-column: 8 / span 5; grid-row: 2; margin-top: clamp(40px, 5vw, 80px); }
.kz-band { margin: clamp(90px, 10vw, 160px) 0 0; }
.kz-band-in { overflow: hidden; aspect-ratio: 1400 / 465; background: #2f4666; }
.kz-band-in img { width: 100%; height: 100%; object-fit: cover; transform-origin: 30% 50%; will-change: transform; }
.kz-band > .kz-cap { padding: 0 var(--g); }

/* =================== 10 · Biševo: a course from the word Komiža down to the word Biševo =================== */
.kz-bis { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding: clamp(100px, 11vw, 180px) var(--g) clamp(80px, 9vw, 150px); }
.kz-bis-from { grid-column: 8 / span 5; grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-left: 34px; }
.kz-bis-dot { position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 6px var(--lime), 0 0 0 7.5px rgba(198, 93, 59, .55); }
.kz-bis-k { font: 900 clamp(46px, 5.2vw, 96px)/.9 var(--fd); letter-spacing: -.04em; }
.kz-bis-b { grid-column: 10 / span 3; grid-row: 2; align-self: end; margin-bottom: -9vw; position: relative; z-index: 3; }
.kz-bis-b img { width: 100%; height: auto; border-radius: 3px; }
.kz-bis-a { grid-column: 4 / span 6; grid-row: 2; margin-top: clamp(40px, 5vw, 80px); position: relative; z-index: 2; }
.kz-bis-t { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(50px, 6vw, 100px); position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: end; }
.kz-bis-t .kz-bis-h { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.kz-bis-t .kz-bis-sub { grid-column: 8 / span 5; grid-row: 1; margin: 0; }
.kz-bis-t .kz-bis-p { grid-column: 8 / span 5; grid-row: 2; padding-bottom: .4em; }
.kz-bis-h { position: relative; font: 900 clamp(84px, 15vw, 290px)/.84 var(--fd); letter-spacing: -.05em; margin-left: -.05em; }
.kz-bis-h span { position: absolute; left: .08em; top: .1em; width: 1px; height: 1px; }
.kz-bis-sub { margin-top: 18px; font: 800 clamp(26px, 2.8vw, 48px)/1 var(--fd); letter-spacing: -.024em; color: var(--green); }
.kz-bis-p { margin-top: clamp(16px, 1.6vw, 24px); max-width: 23em; font: 500 clamp(18px, 1.5vw, 23px)/1.5 var(--ft); text-wrap: pretty; }
.kz-bis-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.kb-route { fill: none; stroke: var(--terra); stroke-width: 3.2; stroke-linecap: round; }
.kb-boat-h { fill: rgba(198, 93, 59, .2); }
.kb-boat-d { fill: var(--terra); }

/* =================== 11 · the way on =================== */
.kz-end { padding: clamp(40px, 5vw, 90px) var(--g) clamp(60px, 7vw, 110px); }
.kz-end-h { margin-top: 16px; max-width: 12em; font: 900 clamp(46px, 6.6vw, 124px)/.9 var(--fd); letter-spacing: -.04em; text-wrap: balance; }
.kz-end-g { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: clamp(30px, 6vw, 120px); margin-top: clamp(40px, 5vw, 80px); align-items: start; }
.kz-end-apts { border-top: 1.6px solid var(--ink); }
.kz-end-apts a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 14px; align-items: center; padding: 16px 0 17px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.kz-ea-n { font: 600 12.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .14em; color: var(--terra); }
.kz-ea-t { font: 850 clamp(30px, 3.4vw, 58px)/1 var(--fd); letter-spacing: -.028em; transition: transform .6s var(--ease); }
.kz-end-apts svg { width: 44px; height: 44px; padding: 13px; border-radius: 50%; border: 1.5px solid rgba(34, 28, 22, .3); transition: background-color .35s, border-color .35s, color .35s; }
.kz-end-apts a:hover .kz-ea-t, .kz-end-apts a:focus-visible .kz-ea-t { transform: translateX(8px); }
.kz-end-apts a:hover svg, .kz-end-apts a:focus-visible svg { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.kz-end-l { margin-bottom: 14px; font: 600 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.kz-end-adr { padding-top: 18px; border-top: 1.6px solid var(--ink); }
.kz-end-adr .adr-st { font: 800 clamp(20px, 1.7vw, 27px)/1.2 var(--fd); letter-spacing: -.012em; }
.kz-end-nav { margin-top: clamp(60px, 7vw, 110px); }
.kz-end-nav .more-row { margin-top: 0; }

/* =================== tablets and phones =================== */
@media (max-width: 999px) {
  .kz-led { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kz-lg:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .kz-lg:nth-child(n + 4) { border-top: 1px solid var(--rule); margin-top: 14px; }
  .kz-sw-bar { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .kz-sw { --bar: clamp(200px, 30vh, 250px); }
  .kz-sw.live .kz-sw-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 10px; align-content: center; padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .kz-sw.live .kz-sw-head { grid-column: 1; grid-row: 1; }
  .kz-sw.live .kz-sw-p { grid-column: 1 / -1; grid-row: 2; font-size: 15.5px; }
  .kz-sw.live .kz-sw-meta { grid-column: 2; grid-row: 1; align-self: end; }
  .kz-sw.live .kz-sw-caps { display: none; }
  .kz-sw.live .kz-sw-h { font-size: clamp(34px, 7.4vw, 60px); margin-top: 10px; }
  .kz-fish-h { grid-column: 1 / -1; }
  .kz-fish-p { grid-column: 1 / -1; margin-top: 22px; padding: 0; }
  .kz-nets { row-gap: 40px; }
  .kz-net-a { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(var(--g) * -1); }
  .kz-net-a img { border-radius: 0; }
  .kz-net-a .kz-cap { padding: 0 var(--g); }
  .kz-net-b { grid-column: 5 / -1; grid-row: 2; margin-top: -90px; }
  .kz-pog { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .kz-falk.live .kz-falk-fig { inset: auto 0 auto 0; top: calc(var(--hd) + 4px); height: min(112vw, 56vh); height: min(112vw, 56svh); }
  .kz-falk.live .kz-falk-cap { top: 100%; bottom: auto; left: var(--g); right: var(--g); margin-top: 10px; color: var(--ink2); }
  .kz-falk.live .kz-falk-cap::before { background: var(--ink); }
  .kz-falk.live .kz-falk-t { width: auto; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .kz-falk.live .kz-falk-h { font-size: clamp(56px, 15vw, 110px); }
  .kz-falk.live .kz-falk-p { margin-top: 10px; font-size: 16px; }
  .kz-tower { row-gap: 40px; }
  .kz-tower-ph { grid-column: 1 / -1; margin: 0 calc(var(--g) * -1); }
  .kz-tower-ph img { border-radius: 0; }
  .kz-tower-ph .kz-cap { padding: 0 var(--g); }
  .kz-tower-h { grid-column: 1 / span 4; grid-row: 2; justify-self: start; margin: 0; font-size: clamp(80px, 22vw, 170px); }
  .kz-tower-t { grid-column: 5 / -1; grid-row: 2; padding-bottom: 0; }
  .kz-six-stage { grid-template-columns: minmax(0, 1fr); }
  .kz-six-fig, .kz-six-date, .kz-six-t { grid-column: 1; }
  .kz-six-fig { grid-row: 2; }
  .kz-six-date { grid-row: 3; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 .3em; }
  .kz-six-dd { font-size: clamp(70px, 17vw, 130px); }
  .kz-six-t { grid-row: 4; margin-top: 18px; }
  .kz-six.live .kz-six-stage { grid-template-rows: auto minmax(0, 1fr) auto auto; padding-top: calc(var(--hd) + 10px); padding-bottom: calc(18px + env(safe-area-inset-bottom)); align-content: stretch; }
  .kz-six.live .kz-six-fig { width: min(100%, (100vh - var(--hd) - 290px) * .75); justify-self: center; margin-top: 10px; }
  @supports (height: 100svh) { .kz-six.live .kz-six-fig { width: min(100%, (100svh - var(--hd) - 290px) * .75); } }
  .kz-six.live .kz-six-win { aspect-ratio: 3 / 4; }
  .kz-six.live .kz-six-date { margin-top: 12px; }
  .kz-six.live .kz-six-dd { font-size: clamp(58px, 14vw, 110px); }
  .kz-six.live .kz-six-dm { font-size: clamp(30px, 7vw, 56px); }
  .kz-six.live .kz-six-t { margin-top: 8px; }
  .kz-six.live .kz-six-h { font-size: clamp(30px, 7vw, 54px); }
  .kz-six.live .kz-six-p { margin-top: 8px; font-size: 15.5px; }
  .kz-lanes-h { grid-column: 1 / -1; }
  .kz-lanes-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 26px; }
  .kz-lane-2 { margin-top: 22vw; }
  .kz-lane-3 { margin-top: -18vw; }
  .kz-lane-4 { margin-top: 6vw; }
  .kz-lanes-end { row-gap: 30px; }
  .kz-lane-wide { grid-column: 1 / -1; margin: 0 calc(var(--g) * -1); }
  .kz-lane-wide img { border-radius: 0; }
  .kz-lane-wide .kz-cap { padding: 0 var(--g); }
  .kz-apt { grid-column: 1 / -1; margin-bottom: 0; }
  .kz-dusk-p { width: auto; margin-left: 0; }
  .kz-dusk-set { row-gap: 34px; }
  .kz-ds-a { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(var(--g) * -1); }
  .kz-ds-a img { border-radius: 0; }
  .kz-ds-a .kz-cap { padding: 0 var(--g); }
  .kz-ds-b { grid-column: 1 / span 7; grid-row: 2; }
  .kz-ds-c { grid-column: 4 / -1; grid-row: 3; margin-top: 0; }
  .kz-bis-from { grid-column: 5 / -1; }
  .kz-bis-a { grid-column: 3 / span 7; }
  .kz-bis-b { grid-column: 9 / -1; margin-bottom: -60px; }
  .kz-bis-a { grid-column: 3 / -1; }
  .kz-bis-t { grid-column: 1 / -1; }
  .kz-bis-t .kz-bis-h, .kz-bis-t .kz-bis-sub, .kz-bis-t .kz-bis-p { grid-column: 1 / -1; grid-row: auto; }
  .kz-bis-t .kz-bis-sub { margin-top: 18px; }
  .kz-end-g { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}
@media (max-width: 640px) {
  .kz-op-top { align-items: flex-start; }
  .kz-bear-t { max-width: 9em; }
  .kz-sea-in { height: clamp(360px, 70vh, 640px); height: clamp(360px, 70svh, 640px); }
  .kz-sea-img { object-position: 56% 58%; }
  .kz-st-t { grid-column: 1 / -1; font-size: clamp(26px, 7.6vw, 34px); line-height: 1.12; }
  .kz-led { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-lg:nth-child(3n + 1) { padding-left: 18px; border-left: 1px solid var(--rule); }
  .kz-lg:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .kz-lg:nth-child(n + 3) { border-top: 1px solid var(--rule); margin-top: 12px; }
  .kz-lg dd { font-size: 18.5px; }
  .kz-lg dd { white-space: pre-line; }
  .kz-sw-z img { object-position: 36% 50%; }
  .kz-row-f span { font-size: clamp(46px, 15vw, 66px); }
  .kz-row-s span { font-size: 11px; letter-spacing: .3em; }
  .kz-fish-ph { position: relative; top: auto; right: auto; width: 82%; margin: -34px var(--g) 0 auto; }
  .kz-tower-h { grid-column: 1 / span 5; font-size: clamp(78px, 25vw, 120px); }
  .kz-tower-t { grid-column: 6 / -1; }
  .kz-tw-n b { font-size: clamp(58px, 17vw, 80px); }
  .kz-tw-l li { font-size: 17px; padding: 10px 0 11px; }
  .kz-lanes-h { font-size: clamp(44px, 12.6vw, 64px); }
  .kz-dusk-h { font-size: clamp(76px, 25vw, 130px); }
  .kz-dusk-win { height: 76vh; height: 76svh; }
  .kz-dusk-p { font-size: clamp(23px, 6.4vw, 30px); }
  .kz-band-in { aspect-ratio: 16 / 9; }
  .kz-bis-h { font-size: clamp(74px, 25vw, 130px); }
  .kz-bis-from { grid-column: 4 / -1; padding-left: 28px; }
  .kz-bis-a { grid-column: 3 / -1; }
  .kz-bis-b { grid-column: 6 / -1; grid-row: 3; margin: 18px 0 0; }
  .kz-bis-t { grid-row: 4; }
  .kz-bis-k { font-size: clamp(38px, 11vw, 52px); }
  .kb-route { stroke-width: 2.6; }
  .kz-end-apts a { grid-template-columns: 32px minmax(0, 1fr) 40px; }
  .kz-end-apts svg { width: 40px; height: 40px; padding: 12px; }
}
@media (max-width: 380px) {
  .kz-bear-t { font-size: 10.5px; letter-spacing: .12em; }
  .kz-tower-h { font-size: 74px; }
  .kz-tw-n span { font-size: 16px; }
}
/* while the cookie notice is open, held screens end above it */
html.ck-on .kz-sw.live .kz-sw-bar { bottom: var(--ckh, 0px); }
html.ck-on .kz-sw.live .kz-sw-frame { bottom: calc(var(--bar) + var(--ckh, 0px)); }
html.ck-on .kz-falk.live .kz-falk-t { bottom: calc(var(--ckh, 0px) + 10px); }
html.ck-on .kz-six.live .kz-six-stage { padding-bottom: calc(var(--ckh, 0px) + 10px); }

@media (prefers-reduced-motion: reduce) {
  .js .kz-name { animation: none; }
  .kz-lift, .kz-lane, .kz-ds, .kz-name-w, .kz-sea-img, .kz-tw-c { will-change: auto; }
  .kz-sw-c { transition: none; }
}