/* Otok Vis: the island as a journey. The chart draws itself and fills with the island's evening light; scrolling,
   the reader travels round it, and five places open out of their points like sheets laid on the chart, each leaving its
   own line on the island. Then 1989 splits open onto the sea; one photograph of the sea pulls back into a wall of coves;
   the vineyard opens along its rows; the island's table in outline, filling; stone laid on stone; the engraving of Lissa
   under a travelling loupe. Every rule is scoped to vi-. */

.vi-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); }
.vi-cap::before { content: ''; width: 22px; height: 1.5px; background: var(--ink); flex: none; align-self: center; }
[class^="vi-"] img { display: block; }

/* =================== 1 · round the island =================== */
.vi-j { position: relative; }
.vi-j-stage { position: relative; display: flex; flex-direction: column; }
.vi-j-head { order: -1; padding: clamp(24px, 2.6vw, 44px) var(--g) 0; }
.vi-h1 { margin: clamp(14px, 1.6vw, 26px) 0 0 -.05em; font: 900 clamp(64px, 10vw, 190px)/.84 var(--fd); letter-spacing: -.048em; }
.vi-lissa { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.vi-lissa b { font: 850 clamp(22px, 2vw, 34px)/1 var(--fd); letter-spacing: -.01em; color: var(--green); }
.vi-lissa span { font: 600 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.vi-lead { max-width: 22em; margin-top: clamp(16px, 1.6vw, 24px); font: 500 clamp(17px, 1.35vw, 21px)/1.45 var(--ft); text-wrap: pretty; }
.vi-hint { display: none; align-items: center; gap: 10px; margin-top: 18px; font: 600 12px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.vi-hint svg { width: 16px; height: 16px; animation: vi-nudge 2.4s var(--ease) infinite; }
@keyframes vi-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }
.vi-j-map { position: relative; padding: 10px 0 0; }
.vi-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vi-stops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px clamp(16px, 2vw, 30px); padding: 30px var(--g) 0; }
.vi-sp { margin: 0 0 16px; }
.vi-sp img { width: 100%; height: auto; border-radius: 3px; }
.vi-sn { display: flex; align-items: baseline; gap: 8px; font: 600 12px/1 var(--ft); font-stretch: 75%; letter-spacing: .15em; color: var(--ink3); }
.vi-sn b { font-weight: 700; color: var(--terra); }
.vi-sh { margin-top: 10px; font: 900 clamp(34px, 3.4vw, 62px)/.92 var(--fd); letter-spacing: -.035em; }
.vi-ss { margin-top: 8px; font: 800 clamp(18px, 1.5vw, 24px)/1.1 var(--fd); letter-spacing: -.01em; color: var(--green); }
.vi-alt-p { font-size: clamp(40px, 4.4vw, 80px); line-height: .9; letter-spacing: -.035em; color: var(--ink); }
.vi-alt { font-variant-numeric: tabular-nums; }
.vi-st { margin-top: 12px; font: 500 16.5px/1.5 var(--ft); color: var(--ink2); text-wrap: pretty; }
.vi-sb .more { margin-top: 14px; font-size: clamp(18px, 1.4vw, 22px); }
/* the chart */
.vi-coast { fill: none; stroke: var(--ink); stroke-width: .38; stroke-linejoin: round; }
.vi-land-f { fill: #FBF7EF; }
.vi-rings path { fill: none; stroke: rgba(47, 91, 76, .3); stroke-width: 1; stroke-dasharray: 1.5 4.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.vi-hum { fill: var(--ink); }
.vi-cont path { fill: none; stroke: rgba(34, 28, 22, .55); stroke-width: .36; }
.vi-l { fill: none; stroke: var(--terra); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.vi-l.dash { stroke-width: 1.1; }
.vi-pin .vi-dot { fill: var(--ink); transition: fill .4s; }
.vi-pin .vi-ring { fill: none; stroke: var(--terra); stroke-width: .5; opacity: 0; transition: opacity .4s; }
.vi-pin.on .vi-dot { fill: var(--terra); }
.vi-pin.on .vi-ring { opacity: 1; }
.vi-mark .vi-mh { fill: rgba(198, 93, 59, .22); }
.vi-mark .vi-md { fill: var(--terra); }
.vi-t { font: 700 5.2px/1 var(--ft); font-stretch: 75%; letter-spacing: .12em; fill: var(--ink); }
.vi-t-big { font: 850 8.2px/1 var(--fd); letter-spacing: .02em; }
.vi-t-s { font-size: 4.2px; fill: var(--ink2); }
.vi-t-split { font: 850 7px/1 var(--fd); letter-spacing: .02em; fill: var(--terra); }
.vi-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; display: none; }
.vi-leads path { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.vi-leads circle { fill: var(--ink); }
/* held (motion allowed): the chart fills the screen, the places come and go on it */
.vi-j.live .vi-j-pin { height: calc(100vh + (var(--n) + .4) * 66vh); }
@supports (height: 100svh) { .vi-j.live .vi-j-pin { height: calc(100svh + (var(--n) + .4) * 66svh); } }
.vi-j.live .vi-j-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
.vi-j.live .vi-j-map { position: absolute; left: 0; right: 0; top: calc(var(--hd) + 4px); bottom: 0; padding: 0; }
.vi-j.live .vi-svg { position: absolute; inset: 0; height: 100%; }
.vi-j.live .vi-leads { display: block; }
.vi-j.live .vi-j-head { position: absolute; inset: 0; z-index: 3; padding: 0; pointer-events: none; }
.vi-j.live .vi-crumbs { position: absolute; left: var(--g); top: calc(var(--hd) + 4px); pointer-events: auto; }
/* the island's name is written on the island itself: in ink on the chart, in light once the island fills */
.vi-h1-lt { display: none; }
.vi-j.live .vi-h1 { position: absolute; left: var(--hx, 50%); top: var(--hy, 50%); margin: 0; transform: translate(-50%, -54%); white-space: nowrap; font-size: var(--hfs, clamp(64px, 7.6vw, 150px)); color: var(--ink); }
/* the light copy of the name shows only where the island's photograph has already arrived */
.vi-j.live .vi-h1-lt { display: block; color: #FBF6EC; clip-path: inset(0 100% 0 0); pointer-events: none; }
.vi-j.live .vi-j-leg { position: absolute; right: var(--g); bottom: 4.5vh; width: min(27vw, 420px); pointer-events: auto; }
.vi-j.live .vi-lissa { margin-top: 0; }
.vi-j.live .vi-hint { display: inline-flex; }
.vi-j.live .vi-stops { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; z-index: 3; }
.vi-j.live .vi-stop {
  position: absolute; width: clamp(300px, 27vw, 450px); padding: 18px 20px 22px; border-radius: 3px; pointer-events: auto;
  background-color: var(--lime); background-image: var(--tex); box-shadow: 0 30px 60px -34px rgba(60, 40, 20, .55), 0 2px 8px -4px rgba(60, 40, 20, .2);
  opacity: 0; visibility: hidden; transform-origin: var(--ox, 50%) var(--oy, 50%); will-change: transform, opacity;
}
.vi-j.live .vi-stop.vis { visibility: visible; }
.vi-j.live .vi-stop-bisevo, .vi-j.live .vi-stop-hum { left: var(--g); top: calc(var(--hd) + 2vh); }
.vi-j.live .vi-stop-komiza { left: var(--g); bottom: 3.5vh; }
.vi-j.live .vi-stop-stiniva, .vi-j.live .vi-stop-vis { right: var(--g); bottom: 3.5vh; }
.vi-j.live .vi-stop:not(.vi-stop-ph) { width: clamp(300px, 29vw, 480px); padding: 22px 24px 26px; }
@media (max-width: 1200px) and (min-width: 1000px) { .vi-j.live .vi-stop { width: 262px; } .vi-j.live .vi-stop:not(.vi-stop-ph) { width: 290px; } }
.vi-j.live .vi-stop:not(.vi-stop-ph) .vi-sh { font-size: clamp(54px, 5.6vw, 104px); }
.vi-j.live .vi-stop:not(.vi-stop-ph) .vi-ss { font-size: clamp(20px, 1.8vw, 30px); }
.vi-j.live .vi-stop:not(.vi-stop-ph) .vi-alt-p { font-size: clamp(52px, 5.4vw, 100px); }
.vi-j.live .vi-stop-ph .vi-sh { font-size: clamp(40px, 3.6vw, 66px); }
.vi-j.live .vi-sp { margin: -6px -8px 14px; }
.vi-j.live .vi-sp img { aspect-ratio: 16 / 9; object-fit: cover; }
.vi-j.live .vi-sp .vi-cap { margin-top: 8px; padding: 0 8px; }

/* =================== 2 · 1989 =================== */
.vi-89-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding: clamp(110px, 12vw, 190px) var(--g) clamp(30px, 3.4vw, 56px); }
.vi-89-head .label { grid-column: 1 / -1; }
.vi-89-t { grid-column: 1 / span 10; margin-top: 18px; font: 800 clamp(30px, 4.2vw, 74px)/1.06 var(--fd); letter-spacing: -.028em; text-wrap: balance; }
.vi-89-stage { position: relative; display: flex; flex-direction: column; }
.vi-89-n { order: -1; position: relative; margin: 0; padding: 0 var(--g); font: 900 min(37vw, 640px)/.82 var(--fd); letter-spacing: -.06em; white-space: nowrap; text-align: center; }
.vi-89-a, .vi-89-b { display: block; padding-top: .04em; }
.vi-89-b { display: none; }
.vi-89-l { display: inline; }
.vi-89-ph { margin: clamp(30px, 3vw, 50px) 0 0; }
.vi-89-win { overflow: hidden; height: clamp(360px, 80vh, 900px); height: clamp(360px, 80svh, 900px); background: #2d8a9a; }
.vi-89-win img { width: 100%; height: 100%; object-fit: cover; }
.vi-89-ph .vi-cap { padding: 0 var(--g); }
.vi-89.live .vi-89-pin { height: calc(100vh + 120vh); }
@supports (height: 100svh) { .vi-89.live .vi-89-pin { height: calc(100svh + 120svh); } }
.vi-89.live .vi-89-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
.vi-89.live .vi-89-ph { position: absolute; inset: 0; margin: 0; }
.vi-89.live .vi-89-win { position: absolute; inset: 0; height: auto; will-change: clip-path; }
.vi-89.live .vi-89-win img { will-change: transform; }
.vi-89.live .vi-89-ph .vi-cap { position: absolute; right: var(--g); bottom: clamp(16px, 3vh, 30px); margin: 0; padding: 9px 14px; border-radius: 2px; background-color: var(--lime); opacity: 0; }
.vi-89.live .vi-89-n { position: absolute; left: 0; right: 0; top: 50%; height: 0; padding: 0; z-index: 2; }
.vi-89.live .vi-89-a, .vi-89.live .vi-89-b { display: block; position: absolute; left: 0; right: 0; top: 0; padding: 0; will-change: transform; }
.vi-89.live .vi-89-a { clip-path: inset(0 0 50% 0); transform: translateY(-50%); }
.vi-89.live .vi-89-b { clip-path: inset(50% 0 0 0); transform: translateY(-50%); }

/* =================== 3 · the sea: one photograph pulls back into a wall =================== */
.vi-sea-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: end; padding: clamp(110px, 12vw, 190px) var(--g) clamp(34px, 4vw, 60px); }
.vi-sea-head .label { grid-column: 1 / -1; }
.vi-sea-h { grid-column: 1 / span 8; margin-top: 16px; font: 900 clamp(52px, 8.4vw, 160px)/.88 var(--fd); letter-spacing: -.044em; }
.vi-sea-p { grid-column: 9 / span 4; padding-bottom: .5em; font: 500 clamp(17px, 1.35vw, 21px)/1.5 var(--ft); color: var(--ink2); text-wrap: pretty; }
.vi-mos { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--g); }
.vi-mos::after { content: ''; flex: 10000 1 0; }
.vi-sea.live .vi-mos::after { display: none; }
.vi-tile { flex: var(--r) 1 calc(var(--r) * 220px); }
.vi-tile-a { position: relative; display: block; overflow: hidden; border-radius: 2px; cursor: zoom-in; background: #7fa7b4; }
.vi-tile-a img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform 1.1s var(--ease); }
.vi-tile-a:hover img, .vi-tile-a:focus-visible img { transform: scale(1.05); }
.vi-tile-a:focus-visible { outline-offset: 3px; }
.vi-tile-n { position: absolute; left: 10px; top: 10px; padding: 5px 8px 4px; border-radius: 2px; background: var(--lime); font: 700 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .12em; color: var(--terra); }
.vi-sea-end { padding: clamp(34px, 4vw, 60px) var(--g) 0; }
.vi-sea.live .vi-sea-pin { height: calc(100vh + 150vh); }
@supports (height: 100svh) { .vi-sea.live .vi-sea-pin { height: calc(100svh + 150svh); } }
.vi-sea.live .vi-sea-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vi-sea.live .vi-mos { position: absolute; left: 0; top: 0; display: block; padding: 0; transform-origin: 0 0; will-change: transform; }
.vi-sea.live .vi-tile { position: absolute; }
.vi-sea.live .vi-tile-a, .vi-sea.live .vi-tile-a img { width: 100%; height: 100%; aspect-ratio: auto; }
.vi-sea.live .vi-tile-n { opacity: var(--tn, 0); }

/* =================== 4 · the land: the vineyard opens along its rows; the table =================== */
.vi-land { padding: clamp(110px, 12vw, 190px) 0 clamp(60px, 7vw, 110px); }
.vi-land-head { padding: 0 var(--g) clamp(30px, 3.4vw, 56px); }
.vi-land-h { margin-top: 16px; font: 900 clamp(52px, 8.4vw, 160px)/.88 var(--fd); letter-spacing: -.044em; }
.vi-vin { margin: 0; }
.vi-vin-win { position: relative; overflow: hidden; height: clamp(400px, 92vh, 1060px); height: clamp(400px, 92svh, 1060px); background: #56703f; }
.vi-vin-img { width: 100%; height: 100%; object-fit: cover; }
.vi-vin-svg { display: none; }
.vi-vin.live .vi-vin-img { opacity: 0; }
.vi-vin.live .vi-vin-win { background: transparent; }
.vi-vin.live .vi-vin-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.vi-vin > .vi-cap { padding: 0 var(--g); }
.vi-table { padding: clamp(90px, 10vw, 170px) var(--g) 0; }
.vi-tab { margin-top: clamp(20px, 2.4vw, 36px); }
.vi-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21em); column-gap: clamp(20px, 3vw, 60px); align-items: end; padding: clamp(16px, 1.6vw, 24px) 0 clamp(22px, 2.2vw, 34px); border-top: 1.6px solid var(--ink); }
.vi-tr:last-child { border-bottom: 1px solid var(--rule); }
.vi-tr-2 { grid-template-columns: minmax(0, 21em) minmax(0, 1fr); }
.vi-tr-2 .vi-tw { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
.vi-tr-2 .vi-td { grid-column: 1; grid-row: 1; }
.vi-tw { position: relative; display: block; width: fit-content; max-width: 100%; margin-left: -.04em; font: 900 clamp(46px, 10.6vw, 204px)/.9 var(--fd); letter-spacing: -.045em; }
.vi-tw-o { display: block; padding-top: .08em; color: var(--ink); }
.vi-tw-f { display: none; }
.vi-td { padding-bottom: .5em; font: 700 clamp(19px, 1.7vw, 27px)/1.25 var(--fd); letter-spacing: -.01em; color: var(--green); }
.vi-table.live .vi-tw-o { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.vi-table.live .vi-tw-f { display: block; position: absolute; inset: 0; padding-top: .08em; color: var(--ink); clip-path: inset(-25% 100% -25% -2%); will-change: clip-path; }
.vi-table.live .vi-tr-2 .vi-tw-f { clip-path: inset(-25% -2% -25% 100%); }

/* =================== 5 · inland =================== */
.vi-in { padding: clamp(60px, 7vw, 110px) 0 clamp(80px, 9vw, 150px); overflow: clip; }
.vi-in-band { margin: 0; }
.vi-in-win { overflow: hidden; height: clamp(380px, 78vh, 880px); height: clamp(380px, 78svh, 880px); background: #8a6a3a; }
.vi-in-win img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); will-change: transform; }
.vi-in-band .vi-cap { padding: 0 var(--g); }
.vi-in-head { padding: clamp(80px, 9vw, 150px) var(--g) 0; }
.vi-in-h { margin-top: 16px; max-width: 11em; font: 900 clamp(52px, 8.4vw, 160px)/.88 var(--fd); letter-spacing: -.044em; text-wrap: balance; }
.vi-stones { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.6vw, 26px); row-gap: clamp(26px, 3vw, 50px); align-items: start; padding: clamp(50px, 6vw, 100px) var(--g) 0; }
.vi-stone { margin: 0; will-change: transform; }
.vi-stone img { width: 100%; height: auto; border-radius: 3px; }
.vi-stone-1 { grid-column: 1 / span 7; }
.vi-stone-2 { grid-column: 8 / span 5; margin-top: 12vw; }
.vi-stone-3 { grid-column: 2 / span 5; margin-top: -4vw; }
.vi-stone-4 { grid-column: 7 / span 6; margin-top: 6vw; }

/* =================== 6 · Lissa: the engraving under a travelling loupe =================== */
.vi-old { padding: clamp(100px, 11vw, 180px) var(--g) clamp(70px, 8vw, 130px); }
.vi-old-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: end; }
.vi-old-t { grid-column: 1 / span 3; padding-bottom: 42px; }
.vi-old-h { margin-top: 16px; font: 900 clamp(60px, 7.6vw, 150px)/.86 var(--fd); letter-spacing: -.045em; }
.vi-old-p { margin-top: 20px; font: 500 clamp(17px, 1.3vw, 20px)/1.5 var(--ft); text-wrap: pretty; }
.vi-old-hint { margin-top: 18px; font: 600 11.5px/1.45 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); }
.vi-old-f { grid-column: 4 / -1; margin: 0; }
.vi-old-map { position: relative; overflow: hidden; border-radius: 2px; background: #e4dccb; cursor: crosshair; }
.vi-old-map img { width: 100%; height: auto; mix-blend-mode: multiply; }
.vi-loupe {
  position: absolute; left: 0; top: 0; width: clamp(130px, 15vw, 240px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background-color: #efe8da; background-repeat: no-repeat; box-shadow: 0 0 0 2px var(--ink), 0 0 0 7px rgba(246, 241, 231, .85), 0 22px 40px -16px rgba(40, 26, 12, .55);
  will-change: transform; transition: opacity .5s;
}
.vi-old-map.lp .vi-loupe { opacity: 1; }
.vi-end { margin-top: clamp(70px, 8vw, 120px); }
.vi-end .more-row { margin-top: 16px; }

/* =================== tablets and phones =================== */
@media (max-width: 999px) {
  .vi-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vi-j { --mh2: min(62vw, 40vh); }
  @supports (height: 1svh) { .vi-j { --mh2: min(62vw, 40svh); } }
  .vi-j.live .vi-j-map { top: calc(var(--hd) + 2px); bottom: auto; height: var(--mh2); }
  .vi-j.live .vi-j-head { inset: auto 0 auto 0; top: calc(var(--hd) + var(--mh2) + 10px); padding: 0 var(--g); pointer-events: auto; }
  .vi-j.live .vi-crumbs { position: static; }
  .vi-j.live .vi-h1 { position: static; transform: none; white-space: normal; color: var(--ink); margin-top: 12px; font-size: clamp(50px, 15vw, 74px); }
  .vi-j.live .vi-h1-lt { display: none; }
  .vi-j.live .vi-j-leg { position: static; width: auto; margin-top: 10px; }
  .vi-j.live .vi-stop, .vi-j.live .vi-stop-bisevo, .vi-j.live .vi-stop-hum, .vi-j.live .vi-stop-komiza, .vi-j.live .vi-stop-stiniva, .vi-j.live .vi-stop-vis { top: calc(var(--hd) + var(--mh2) + 18px); bottom: auto; left: var(--g); right: var(--g); width: auto; padding: 14px 16px 18px; }
  .vi-j.live .vi-stop:not(.vi-stop-ph) .vi-sh { font-size: clamp(46px, 14vw, 76px); }
  .vi-j.live .vi-stop:not(.vi-stop-ph) .vi-ss { font-size: clamp(20px, 5.6vw, 28px); }
  .vi-j.live .vi-stop:not(.vi-stop-ph) .vi-alt-p { font-size: clamp(54px, 16vw, 84px); }
  .vi-j.live .vi-stop:not(.vi-stop-ph) .vi-st { font-size: 17px; }
  .vi-j.live .vi-hint { display: none; }
  .vi-j.live .vi-stop-ph { display: grid; grid-template-columns: minmax(0, 1fr); }
  .vi-j.live .vi-sp { margin: -4px -6px 10px; }
  .vi-j.live .vi-sp img { aspect-ratio: 2 / 1; }
  .vi-j.live .vi-sh { font-size: clamp(34px, 9vw, 52px); }
  .vi-j.live .vi-st { font-size: 15.5px; }
  .vi-89-t { grid-column: 1 / -1; }
  .vi-sea-h { grid-column: 1 / -1; }
  .vi-sea-p { grid-column: 1 / -1; margin-top: 18px; }
  .vi-tr, .vi-tr-2 { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .vi-tr-2 .vi-tw { grid-column: 1; justify-self: end; }
  .vi-tr-2 .vi-td { grid-column: 1; grid-row: 2; text-align: right; }
  .vi-td { padding-bottom: 0; }
  .vi-stone-1 { grid-column: 1 / -1; margin: 0 calc(var(--g) * -1); }
  .vi-stone-1 img { border-radius: 0; }
  .vi-stone-1 .vi-cap { padding: 0 var(--g); }
  .vi-stone-2 { grid-column: 1 / span 7; margin-top: 0; }
  .vi-stone-3 { grid-column: 5 / -1; margin-top: -10vw; }
  .vi-stone-4 { grid-column: 1 / -1; margin-top: 0; }
  .vi-old-g { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .vi-old-t, .vi-old-f { grid-column: 1; }
  .vi-old-t { padding-bottom: 0; }
  .vi-old-f { margin: 0 calc(var(--g) * -1); }
  .vi-old-f .vi-cap { padding: 0 var(--g); }
}
@media (max-width: 640px) {
  .vi-stops { grid-template-columns: minmax(0, 1fr); }
  .vi-h1 { font-size: clamp(54px, 16vw, 80px); }
  .vi-j.live .vi-h1 { font-size: clamp(50px, 15vw, 74px); }
  .vi-t { font-size: 7px; }
  .vi-t-big { font-size: 10.5px; }
  .vi-t-s { font-size: 6px; }
  .vi-t-split { font-size: 9px; }
  .vi-coast { stroke-width: .7; }
  .vi-l { stroke-width: 1.2; }
  .vi-l.dash { stroke-width: 1.6; }
  .vi-cont path { stroke-width: .6; }
  .vi-89-n { font-size: min(70vw, 40vh); line-height: .8; }
  @supports (height: 1svh) { .vi-89-n { font-size: min(70vw, 40svh); } }
  .vi-89-l { display: block; }
  .vi-tw { font-size: clamp(44px, 14vw, 72px); }
  .vi-in-h { font-size: clamp(46px, 13vw, 66px); }
  .vi-sea-h, .vi-land-h { font-size: clamp(46px, 13.4vw, 70px); }
}
@media (max-width: 999px) and (max-height: 700px) {
  .vi-j.live .vi-sp img { aspect-ratio: 2.8 / 1; }
  .vi-j.live .vi-st { font-size: 14.5px; margin-top: 8px; }
  .vi-j.live .vi-lead { font-size: 15.5px; }
}
/* while the cookie notice is open, what stands at the foot of a held screen stays above it */
@media (min-width: 1000px) { html.ck-on .vi-j.live .vi-stop-komiza, html.ck-on .vi-j.live .vi-stop-stiniva, html.ck-on .vi-j.live .vi-stop-vis, html.ck-on .vi-j.live .vi-j-leg { bottom: calc(var(--ckh, 0px) + 10px); } }
@media (prefers-reduced-motion: reduce) {
  .vi-hint svg { animation: none; }
  .vi-tile-a img, .vi-pin .vi-dot, .vi-pin .vi-ring, .vi-loupe { transition: none; }
  .vi-in-win img { transform: none; }
}