:root{
--bg:oklch(0.962 0.013 82);
--surface:oklch(0.930 0.020 82);
--foam:oklch(0.972 0.011 82);
--ink:oklch(0.265 0.018 220);
--muted:oklch(0.470 0.022 218);
--sea:oklch(0.395 0.058 216);
--sea-deep:oklch(0.310 0.052 218);
--tile:oklch(0.600 0.132 38);
/* AA fix (SEO 1.3): was oklch(0.500 0.126 38), 4.17:1 on --bg. Copied from
the hub's darker --amber-ink, 7.04:1 — same hue, dark enough for text. */
--tile-ink:oklch(0.472 0.122 40);
--tile-lite:oklch(0.810 0.096 52);
--rule:oklch(0.820 0.022 82);
--hair:oklch(0.900 0.016 82);
--sans:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--serif:'Newsreader',Georgia,'Times New Roman',serif;
--r:14px;
--paper:0 18px 44px -22px oklch(0.265 0.018 220/.35),0 2px 8px -2px oklch(0.265 0.018 220/.12);
--ease:cubic-bezier(.16,1,.3,1);
/* The masthead, and the section menu at full size: what a full-height band
has to leave room for so band plus menu is exactly one screen. */
--hdr:61px;
--menu:126px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{font-size:18px}}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
/* Two timetables side by side with a ticket button on every sailing want more
than the reading measure a page of prose does. */
.main--wide{max-width:1240px}
a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--tile-ink)}
:focus-visible{outline:2px solid var(--tile);outline-offset:3px;border-radius:2px}
/* --tile is only 2.91:1 on the sea grounds, so the ring changes with the ground. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The skip link is the first thing in the tab order and the only thing that
un-hides itself when focused. Without it every page makes a keyboard user
tab past the wordmark and four language links before reaching the content. */
.skip:focus{position:fixed;top:8px;left:8px;z-index:99;width:auto;height:auto;
margin:0;clip:auto;overflow:visible;padding:12px 16px;border-radius:8px;
background:var(--foam);color:var(--sea-deep);font:600 15px/1 var(--sans);
text-decoration:none;box-shadow:var(--paper)}
.head{position:relative;isolation:isolate;overflow:hidden;background:var(--sea-deep);
color:var(--foam);padding:clamp(36px,7vw,84px) 0 clamp(28px,4vw,44px)}
/* A band that stopped at 85% of the phone screen was neither an opening nor a
header: the list under it showed as a two-line sliver. `head--full` makes it
the whole first screen, and whatever comes next - the section menu, or the
cue - is the bottom edge of that screen rather than a leftover strip. */
.head--full{min-height:calc(100svh - var(--hdr));
display:flex;flex-direction:column;justify-content:center}
/* On a phone the opening has to hold the title and the whole question at once.
At the shared display size the two of them ran past the fold and the button
that answers the question was the part that fell off. */
@media(max-width:600px){
.head--full{padding-top:18px;padding-bottom:18px}
.head--full .head__title{padding:16px 15px 18px}
.head--full h1{font-size:2.05rem;line-height:1.03}
.head--full .kicker{font-size:.72rem;letter-spacing:.07em}
.head--full .wrap{gap:16px}
}
/* Not centred. Centring treats the panel as the content and the photograph as
wallpaper behind it, which is how the band ended up with 319px of empty sky
above the panel and 374px of empty water below it at 834x1112 - measured.
Anchored low, the harbour gets the top of the frame and the type sits on it. */
/* When the control strip follows, band plus strip is the screen, not band
alone - so the opening is the photograph and the controls, with nothing cut
short and no leftover sliver of water above a stack of bars. --menu is the
strip's measured height, set by the script; the value here is the fallback
for the first paint. */
/* The band keeps the whole screen and the menu sits on it. Cut short to make
room, the opening was a half photograph over a strip of buttons over a strip
of dates - three bands and no picture. The padding is what the chips stand
in, so the panel above never runs under them; --menu is the strip's measured
height, set by the script, and the value in :root is the first paint. */
.head--full:has(+ .jumpmark){padding-bottom:calc(var(--menu) + 8px)}
/* A page whose whole job is a timetable opens on the timetable. No picture, no
scrim, no full screen of water before the first departure - just the name of
the crossing, quietly, with the tables under it. */
.head--slim{background:var(--surface);color:var(--ink);
padding:14px 0 13px;min-height:0;border-bottom:1px solid var(--rule)}
.head--slim::before{display:none}
.head--slim h1{font-size:clamp(1.5rem,4.2vw,2.1rem);text-shadow:none}
.head--slim .wrap{gap:10px}
/* No paper panel on the slim band. The panel exists to hold type off a
photograph; with no photograph it is an empty card with a shadow, which is
what made this page read as a blank rectangle above the timetable. */
.head--slim .head__title{background:none;box-shadow:none;padding:0;
border-radius:0;backdrop-filter:none}
.head--slim h1{margin:2px 0 0}
/* Both ends of the crossing, as places rather than as prose. */
/* The rule the boat will not tell you: nine of these islands do not let a
private car ashore, whatever is carrying it. */
.nocars{margin:8px 0 0;font:500 .92rem/1.45 var(--sans);color:oklch(0.34 0.11 38)}
.head .nocars{color:oklch(0.355 0.115 38)}
.veh:has(:disabled){opacity:.5}
.veh:has(:disabled) .veh__b{cursor:not-allowed}
/* Two links, not two buttons. They go to the island pages; a pill implies a
control and there is nothing here to switch. */
.head__places{display:flex;flex-wrap:wrap;gap:0 18px;margin:8px 0 0;
font:500 1rem/1.4 var(--sans)}
.head__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
object-fit:cover;object-position:50% 62%}
/* The scrim is what makes white type honest on a hazy photograph: near-opaque
sea at the bottom where the title sits, thinning toward the sky. */
.head::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,oklch(0.31 0.052 218/.10) 0%,
oklch(0.31 0.052 218/.12) 55%,oklch(0.27 0.05 218/.55) 100%)}
/* The photograph stays bright. Contrast comes from a paper panel under the
type, dark ink on it, not from dimming the harbour to make white text work:
the sea is the point of the picture.
Measured, and it is why the panel is nearly opaque: at 44% the panel took
its contrast from whatever the photo happened to be doing underneath, and
over the dark hull at the bottom of the hero the kicker measured 1.48:1 and
the lede 1.58:1. A panel with no floor is not a contrast strategy. */
.head__title,.head__lead{background:oklch(0.972 0.011 82/.62);color:var(--ink);
-webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
border-radius:var(--r);padding:clamp(20px,3vw,30px) clamp(20px,3vw,32px);
box-shadow:var(--paper),inset 0 1px 0 oklch(1 0 0/.6)}
@media(prefers-reduced-transparency:reduce){
.head__title,.head__lead{background:var(--foam);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Above the cue: the type-ahead panel hangs out of the band and the cue is a
later sibling, so without this it paints over the answers. */
.head .wrap{display:grid;gap:26px;position:relative;z-index:1}
/* The one deliberate break in the stack: on a wide screen the band carries the
title and the answer side by side instead of being a title bar. */
@media(min-width:820px){
.head .wrap:has(.head__lead:not([hidden])){
grid-template-columns:1.05fr .95fr;gap:12px 48px;align-items:end}
.head__lead{justify-self:end;text-align:right}
}
.head__lead .leg__time{color:var(--sea-deep)}
/* A line is two questions - the boat out and the boat back - so the card is
two cards, side by side where there is room. One of them alone answered
whichever direction happened to sail sooner and hid the other. */
.head__lead--two{display:grid;gap:10px}
.head__lead--two .head__leadlabel{grid-column:1/-1}
@media(min-width:560px){.head__lead--two{grid-template-columns:1fr 1fr;gap:14px}}
.head__lead--two .leg{padding:0}
.head__lead--two .leg__time{font-size:clamp(2rem,5.5vw,2.9rem)}
/* Two columns of their own, left-aligned inside the panel: right-aligned they
ragged against each other and "Zadar (Gazenica)" broke over two lines. */
.head__lead--two .leg,.head__lead--two .leg *{text-align:left}
@media(min-width:820px){.head__lead--two .head__leadlabel{text-align:right}}
/* The notice sits on the photograph with the other two, under both of them,
in the glass they are made of - as a page-width slab below the band it was
the first thing past the fold and read as small print. */
.head__note{grid-column:1/-1;justify-self:stretch;
background:oklch(0.972 0.011 82/.62);color:var(--ink);
-webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
border-radius:var(--r);border-left:4px solid var(--tile-ink);
padding:clamp(14px,2vw,18px) clamp(16px,2.4vw,24px);margin:0;
box-shadow:var(--paper),inset 0 1px 0 oklch(1 0 0/.6)}
.head__note .notice__text{max-width:78ch}
@media(prefers-reduced-transparency:reduce){
.head__note{background:var(--foam);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Not one filled blob among four words. Every section of the page is a
destination, so every one of them looks like a control, and the one you are
in is the filled one. */
.jump a{border:1px solid var(--rule);background:var(--foam)}
.jump--stuck a{border-color:transparent;background:transparent}
.jump--stuck a[aria-current]{background:var(--sea-deep)}
.head h1{color:var(--sea-deep);margin:0;text-shadow:0 1px 0 oklch(1 0 0/.35)}
.head .kicker{font:600 .82rem/1 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--tile-ink);margin:0 0 12px}
.head .lede{color:var(--muted);margin:12px 0 0;max-width:52ch}
/* The panel lets the harbour through now, and the two lightest colours on it
stopped being readable over the photograph: measured at 0.68 alpha the
terracotta caps came to 3.81:1 and the muted lede to 3.02:1. On the band
only, both go darker until they clear 4.5. */
/* A thinner panel lets more of the harbour through, and the rust has to hold
4.5:1 on whatever comes through it. Measured over the photograph, composited
with the panel: 4.3:1 at the old weight on a phone, 5.4:1 at this one. */
.head .kicker,.head .op+.kind{color:oklch(0.385 0.130 38)}
.head .head__leadlabel{color:oklch(0.325 0.024 218)}
.head .lede,.head .goes__l,.head .leg__via,
.head details.towns .answer{color:oklch(0.355 0.026 218)}
.head a{color:var(--sea)}
/* What is under the fold, said out loud. A full-height band has to admit the
page continues, and the chevron is the one piece of unprompted motion on the
site: it is the whole message. */
.head__cue{margin:16px 0 0;text-align:center}
.head__cue a{display:inline-flex;flex-direction:column;align-items:center;gap:4px;
padding:11px 16px 9px;border-radius:999px;text-decoration:none;
color:oklch(0.985 0.004 90);font:600 .95rem/1 var(--sans);min-height:44px;
text-shadow:0 1px 12px oklch(0.20 0.03 218/.75)}
.head__cue a:hover{text-decoration:underline;text-underline-offset:4px}
.head__cue svg{opacity:.55}
@media(prefers-reduced-motion:no-preference){
.head__cue svg{animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,72%,100%{transform:translateY(0)}84%{transform:translateY(3px)}}}
/* The index of the page's own sections. A Split port page runs to eight phone
screens with the camera on the sixth, and screen one says nothing about what
is down there. Sticky rather than a block under the hero, because the person
who needs it is the one already five screens deep and about to give up.
The chips are the .langs pattern, unchanged - a second visual vocabulary for
the same job (a row of small links, one of them current) would be noise. */
/* Both directions of a crossing. Side by side where there is room to compare
them at a glance, stacked where there is not - the out and the back are the
two halves of one question and belong on one screen. */
.both{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;align-items:start}
@media(min-width:820px){.both{gap:22px}}
/* What the boards are for, said once, above them. */
/* One way out, and no second board unless a return was asked for. */
.both--one{grid-template-columns:minmax(0,1fr)}
.both--one .way{max-width:34rem}
.both__add{margin:12px 0 0}
.both__addb{width:100%;max-width:34rem;min-height:48px;border-radius:12px;
border:1px dashed var(--rule);background:transparent;color:var(--tile-ink);
cursor:pointer;font:600 .95rem/1.2 var(--sans)}
.both__addb:hover{border-style:solid;background:var(--surface)}
.both__hd{display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;margin:0 0 14px}
.both__lede{margin:0;max-width:52ch;color:var(--muted);
font:400 .95rem/1.45 var(--sans)}
@media(min-width:820px){.both__lede{font-size:1.02rem}}
.both__n{border:1px solid var(--rule);border-radius:999px;background:transparent;
color:var(--tile-ink);cursor:pointer;font:600 .84rem/1 var(--sans);
min-height:38px;padding:0 14px}
.both__n:hover{background:var(--surface)}
/* The enamel timetable board.
Every Jadrolinija terminal has one bolted to the wall: a deep blue plate,
pale type, the times in a column you can read from the far side of the
waiting room. That is what this page is, twice - one plate per direction -
and it is the one bold thing here, so the band above it and the page around
it stay quiet. Cream cards with a hairline and a soft shadow were the same
rectangle as everything else on the page, which is what "no Adriatic vibe"
meant. */
.way{--plate:oklch(0.288 0.048 218);
--plate-lift:oklch(0.330 0.050 218);
--plate-sink:oklch(0.252 0.044 218);
--plate-ink:oklch(0.968 0.012 82);
--plate-mute:oklch(0.775 0.020 212);
--plate-line:oklch(0.968 0.012 82/.13);
background:var(--plate);color:var(--plate-ink);
border-radius:12px;overflow:hidden;
box-shadow:0 18px 40px -26px oklch(0.265 0.018 220/.55)}
/* The crossing written down the card: which half of the trip this is, then
where you get on, an arrow pointing down, where you get off. Across a
heading it did not fit in half a phone, and "to Susak" on its own left the
reader to work out that the other card was the way home. */
.way__h{margin:0;padding:13px 14px 14px;background:var(--plate-sink);
display:grid;gap:7px;color:var(--plate-ink)}
.way__k{font:700 .68rem/1 var(--sans);letter-spacing:.11em;
text-transform:uppercase;color:var(--tile-lite)}
.way__pair{display:grid;grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto;align-items:center;gap:4px 10px}
.way__p{grid-column:2;font:700 1.06rem/1.15 var(--sans);letter-spacing:-.01em;
overflow-wrap:anywhere}
.way__a{grid-column:1;grid-row:1/3;justify-self:center;color:var(--tile-lite)}
.way__h a{color:inherit;text-decoration-color:var(--plate-line)}
.way__h a:hover{color:var(--plate-ink);text-decoration-color:currentColor}
.way .note{margin:16px 18px;color:var(--plate-mute)}
.way .note .whenbar__b{color:var(--tile-lite)}
.way__note{margin-left:auto;border:1px solid var(--tile-lite);border-radius:999px;
background:transparent;color:var(--tile-lite);cursor:pointer;
font:600 .82rem/1 var(--sans);min-height:32px;padding:0 12px}
.way__note:hover{background:var(--tile-lite);color:oklch(0.265 0.018 220)}
/* Over the page, not above it: a notice belongs in the reader's way when they
ask for it and out of it while they are reading a timetable. */
.sheet{border:0;border-radius:var(--r);padding:22px;max-width:min(640px,92vw);
background:var(--foam);color:var(--ink);box-shadow:var(--paper)}
.sheet::backdrop{background:oklch(0.265 0.018 220/.55)}
.sheet__h{margin:0 0 14px;font:500 1.3rem/1.3 var(--serif)}
.sheet__x{margin:0;float:right}
.sheet__b{border:0;background:transparent;color:var(--muted);cursor:pointer;
font-size:1.6rem;line-height:1;min-width:44px;min-height:44px}
.way__day{display:flex;align-items:center;justify-content:space-between;gap:2px;
padding:7px 8px 9px;background:var(--plate-sink);
border-bottom:1px solid var(--plate-line)}
.way__day .whenbar__s{width:34px;height:34px;flex:none;background:transparent;
border-color:var(--plate-line);color:var(--plate-ink)}
.way__day .whenbar__s:hover:not(:disabled){background:var(--plate-ink);
color:var(--plate-sink);border-color:var(--plate-ink)}
/* The date sits between its two arrows and stays put as the words change
length: "Wed, Sep 9" is wider than "Fri, Oct 1", and without a floor the
arrows walked sideways every time the day changed. */
.way__d{flex:1 1 auto;min-width:0;font:600 .82rem/1.15 var(--sans);
color:var(--plate-ink);text-align:center}
.day{list-style:none;margin:0;padding:0}
/* A departure is four facts - when it leaves, when it lands, what it costs,
which boat - and it was written as a paragraph three lines deep with a
button on the end. Half a phone wide, it is a grid: the times across the
top with the fare beside them, the line underneath. */
.day__r+.day__r{border-top:1px solid var(--plate-line)}
/* The row carries the grid and the button lies under it, edge to edge. The
line number in the row is a link to that line's timetable, and a link
inside a button is invalid and dead - so the content sits above the button
and passes its clicks down, and only the link keeps its own. */
.day__r{position:relative;display:grid;text-align:left;
grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;
padding:14px 14px 15px;color:var(--plate-ink)}
.day__r>*{position:relative;z-index:1;pointer-events:none}
.day__pick{position:absolute;inset:0;z-index:0;width:100%;cursor:pointer;
border:0;background:transparent;pointer-events:auto;
-webkit-tap-highlight-color:transparent}
.day__ln a{pointer-events:auto;color:inherit;text-decoration:underline;
text-underline-offset:3px;text-decoration-color:var(--plate-line)}
.day__ln a:hover{text-decoration-color:currentColor}
/* The mark that says this row is a choice. Empty until it is taken, and the
tick is drawn rather than loaded, because the boards are on every crossing
page and a second request for a checkmark is not worth making. */
.day__k{grid-column:1;grid-row:1;align-self:center;width:20px;height:20px;
border-radius:999px;border:1.5px solid var(--plate-line);
background:transparent;position:relative}
.day__pick:hover ~ .day__k{border-color:var(--plate-ink)}
.day__r--on .day__k{border-color:var(--plate-sink);background:var(--plate-sink)}
.day__r--on .day__k::after{content:"";position:absolute;left:6px;top:2.5px;
width:5px;height:10px;border:solid var(--plate-ink);border-width:0 2px 2px 0;
transform:rotate(42deg)}
/* The harbour under the place, where one boat makes the crossing and the
rows have no reason to name it. */
.way__q{display:block;font:500 .74rem/1.3 var(--sans);font-style:normal;
color:var(--plate-mute)}
/* Say what the board wants, until it has it. */
.way__ask{margin:0;padding:9px 14px 10px;background:var(--plate-sink);
border-bottom:1px solid var(--plate-line);color:var(--tile-lite);
font:700 .68rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.day__pick:hover{background:var(--plate-lift)}
.day__t{grid-column:2/-1;grid-row:1;font:700 1.06rem/1.15 var(--sans);
font-variant-numeric:tabular-nums;white-space:nowrap}
.day__t i{font-style:normal;color:var(--plate-mute);padding:0 3px}
/* The fare on the line under the times, at the end of it: which boat is
cheaper is half the choice between a 25 minute catamaran and a 90 minute
ship, and beside the times it collided with them in half a phone. */
.day__p{grid-column:3;grid-row:2;justify-self:end;align-self:center;
font:700 .95rem/1 var(--sans);color:var(--plate-ink);
font-variant-numeric:tabular-nums;white-space:nowrap}
.day__to,.day__v,.day__e{grid-column:1/-1}
.day__m{grid-column:1/3;grid-row:2;display:flex;align-items:center;
flex-wrap:wrap;gap:4px 6px;font:500 .8rem/1.3 var(--sans);
color:var(--plate-ink)}
.day__to{font:600 .84rem/1.25 var(--sans);color:var(--plate-ink)}
/* The calls on the way, on a screen with room for them. On a phone they were
a third line on every row that decides nothing: the choice there is when it
leaves, how long it takes and what it costs. They are in the trip. */
.day__v{display:none;font:400 .74rem/1.3 var(--sans);color:var(--plate-mute)}
@media(min-width:820px){.day__v{display:block}}
.day__m i,.day__v i{font-style:normal;color:var(--plate-line);padding:0 1px}
.day__e{font:600 .72rem/1.3 var(--sans);color:var(--tile-lite);margin-top:2px}
/* Whose boat it is, on a screen with room to say so. In half a phone the row
has space for when it leaves, how long it takes and what it costs, and the
mark was pushing itself onto a line of its own on every long crossing. The
trip names the operator in full. */
.day__op{display:none;height:11px;width:auto;max-width:58px;object-fit:contain;
background:var(--foam);border-radius:999px;padding:1px 3px;vertical-align:-1px}
@media(min-width:820px){.day__op{display:inline-block}}
/* The number is what the mark would have said, for a screen without room. */
.day__ln{display:none}
@media(min-width:820px){.day__ln{display:inline}}
/* Chosen. The pair of them is the trip the bar at the foot adds up. */
.day__r--on{background:var(--plate-ink)}
.day__r--on .day__t,.day__r--on .day__m,.day__r--on .day__p,
.day__r--on .day__to{color:var(--plate-sink)}
.day__r--on .day__v{color:oklch(0.252 0.044 218/.7)}
.day__r--on .day__pick:hover{background:var(--plate-ink)}
/* A boat back that leaves before the outbound lands. It stays on the board -
the reader may be choosing the other way round - and says what is wrong. */
.day__r--early{opacity:.55}
.day__r--early.day__r--on{opacity:1}
/* The compact row is shaped by half a phone. Given a desk, it can breathe. */
@media(min-width:820px){
.way__h{padding:15px 18px 12px;font-size:1.16rem;gap:11px}
.way__day{padding:8px 12px 9px;justify-content:flex-start;gap:10px}
.way__d{flex:0 0 auto;font-size:.92rem;min-width:9em;text-align:left}
.day__r{padding:13px 18px;gap:4px 16px}
.day__t{font-size:1.14rem}
.day__p{font-size:1.04rem}
.day__m{font-size:.86rem}
.day__v{font-size:.8rem}
.day__op{height:15px}
}
/* The trip, at the foot of the screen, from the moment there is one. */
/* The bar is fixed, so the page has to give back the height it covers or the
last thing on it can never be read. */
body:has(.tripbar:not([hidden])){padding-bottom:76px}
.tripbar{position:fixed;left:0;right:0;bottom:0;z-index:40;
background:var(--sea-deep);color:var(--foam);
box-shadow:0 -8px 30px -12px oklch(0.265 0.018 220/.5);
padding-bottom:env(safe-area-inset-bottom)}
.tripbar .wrap{display:flex;align-items:center;gap:12px;
padding-top:9px;padding-bottom:9px}
.tripbar__s{margin:0;flex:1 1 auto;min-width:0;
font:600 .95rem/1.3 var(--sans);font-variant-numeric:tabular-nums}
.tripbar__go{flex:none;min-height:44px;padding:0 18px;border:0;
border-radius:999px;background:var(--tile);color:var(--foam);cursor:pointer;
font:700 .95rem/1 var(--sans)}
.tripbar__go:hover:not(:disabled){background:var(--tile-ink)}
/* Dead until there is a trip, but present from the first look, so the reader
knows the two boards add up to something. */
.tripbar__go:disabled{background:transparent;color:var(--foam);cursor:default;
box-shadow:none;opacity:.42}
/* What is true of the crossing whatever day you sail it. Three facts the
boards cannot state at a glance, and the lines they come from. */
.cx{margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--rule)}
.cx__h{margin:0 0 14px;font:500 1.2rem/1.25 var(--serif)}
.cx__f{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:14px 22px;margin:0}
.cx__f>div{margin:0}
.cx__f dt{font:600 .72rem/1 var(--sans);letter-spacing:.07em;
text-transform:uppercase;color:var(--muted)}
.cx__f dd{margin:5px 0 0;font:600 1.05rem/1.3 var(--sans);
font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cx__l{margin:18px 0 0;font-size:.95rem}
.cx__l span{color:var(--muted)}
/* Which boat, and what it takes. One row per kind of vessel on the crossing,
because "catamaran, people only, 50 min" is the comparison the reader came
to make and a row of line numbers is not. */
.cx__k{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.cx__k li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
font-size:.95rem}
.cx__kw{color:var(--muted)}
.cx__kl{flex-basis:100%}
/* And written out in full when it is asked for. */
.tripsheet{max-width:min(560px,94vw)}
.tl{padding:14px 0;border-top:1px solid var(--rule)}
.tl:first-child{border-top:0;padding-top:0}
.tl__k{margin:0 0 4px;font:600 .72rem/1 var(--sans);letter-spacing:.08em;
text-transform:uppercase;color:var(--tile-ink)}
.tl__k i,.tl__t i,.tl__v i{font-style:normal;color:var(--muted)}
.tl__t{margin:0;font:500 1.08rem/1.35 var(--sans);color:var(--ink)}
.tl__m{margin:4px 0 0;font:500 .9rem/1.4 var(--sans);color:var(--muted)}
.tl__v{margin:3px 0 0;font:400 .86rem/1.4 var(--sans);color:var(--muted)}
.tl__stay{margin:0;padding:12px 0;border-top:1px solid var(--rule);
font:600 1rem/1.3 var(--sans);color:var(--tile-ink)}
.tl__sum{display:flex;align-items:baseline;gap:8px;margin:14px 0 0;
padding-top:12px;border-top:1px solid var(--rule);
font:700 1.3rem/1 var(--sans);color:var(--ink)}
.tl__sum span{font:500 .88rem/1.3 var(--sans);color:var(--muted)}
.tl__n{margin:10px 0 0;font:400 .86rem/1.45 var(--sans);color:var(--muted)}
.tl__buy{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
margin-top:10px;border-radius:999px;background:var(--sea-deep);
color:var(--foam);text-decoration:none;font:700 .92rem/1 var(--sans)}
.tl__buy:hover{background:var(--ink)}
.jumpmark{height:1px;margin-bottom:-1px}
/* One strip, not two bars. The section index and the day control were stacked
backgrounds with their own borders, 127px of chrome between the reader and
the answer; together they are one thing that sticks. */
/* Pulled back up over the foot of the band by exactly its own height: at rest
the chips are on the photograph, and the box still holds the space they will
vacate when they go fixed. */
.railbox{position:relative;margin-top:calc(-1 * var(--menu))}
.rail{position:sticky;top:0;z-index:20;background:transparent}
.rail.jump--stuck{background:var(--foam)}
/* Once stuck it leaves the flow entirely, and the box keeps the height
it had. Sticky plus a shrinking strip moved the whole page up under
the reader at the moment it stuck. */
.rail.jump--stuck{position:fixed;left:0;right:0;top:0}
.jump{background:transparent}
.jump--stuck .jump{background:var(--foam)}
.jump .wrap{padding:0}
/* Native overflow scroll: five chips do not fit 360px and nothing here is worth
a carousel. The gutters are padding on the row so the first and last chip can
scroll clear of the edge. */
.jump__row{display:flex;flex-wrap:wrap;gap:4px;
padding:14px 14px 15px;-webkit-overflow-scrolling:touch;
transition:padding .18s var(--ease)}
.jump__row::-webkit-scrollbar{display:none}
@media(min-width:900px){.jump__row{padding:14px 20px 15px}}
.jump a{flex:0 0 auto;white-space:nowrap;text-decoration:none;
font:600 1.06rem/1 var(--sans);color:var(--ink);opacity:.7;
padding:15px 18px;border-radius:999px;
transition:opacity .15s var(--ease),background-color .15s var(--ease)}
/* The chips change size when the strip sticks, but they do it at once rather
than over 180ms: animating font-size reflows the text of the one control a
reader is using while the page is moving under them. */
.jump a{position:relative}
/* 42px at rest, 32px once stuck: the smallest targets on the site, on the one
control a reader uses while scrolling. The site already has a hit-zone
helper; this is it, scoped. */
.jump a::after{content:"";position:absolute;left:0;top:50%;width:100%;height:44px;
transform:translateY(-50%)}
.jump a:hover{opacity:1;background:var(--surface);color:var(--ink)}
.jump a[aria-current]{opacity:1;background:var(--sea-deep);color:var(--foam)}
/* Full size while it is still part of the opening screen - that is where it has
to read as the page's contents. Once it sticks it is a wayfinder, not a menu,
and it gives the width back to the timetable. */
.jump--stuck{box-shadow:0 1px 0 oklch(0.31 0.052 218/.10)}
/* Stuck it is one line again, and one line that does not fit scrolls: five
chips do not fit 360px and nothing here is worth a carousel. */
.jump--stuck .jump__row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
gap:2px;padding:6px 14px;
mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
@media(min-width:900px){.jump--stuck .jump__row{padding:6px 20px}}
.jump--stuck a{font-size:.86rem;padding:9px 12px}
/* At rest these are the only thing on the opening screen that says what else
the page can do, and as quiet grey text under a photograph nobody read them
as anything to press. Full-size they are buttons: filled, big, one row of
the page's own actions. Stuck they go back to being a wayfinder. */
.rail:not(.jump--stuck) .jump__row{gap:8px;padding:16px 14px 18px}
@media(min-width:900px){.rail:not(.jump--stuck) .jump__row{padding:18px 20px}}
.rail:not(.jump--stuck) .jump a{opacity:1;font-size:1.14rem;padding:16px 24px;
background:var(--sea-deep);color:var(--foam);
box-shadow:0 1px 2px oklch(0.31 0.052 218/.22)}
.rail:not(.jump--stuck) .jump a{box-shadow:0 2px 10px oklch(0.20 0.04 218/.35)}
.rail:not(.jump--stuck) .jump a:hover{background:var(--ink);color:var(--foam)}
@media(max-width:600px){
.rail:not(.jump--stuck) .jump__row{gap:6px;padding:10px 14px 14px}
.rail:not(.jump--stuck) .jump a{font-size:1rem;padding:12px 16px}
}
.rail:not(.jump--stuck) .jump a[aria-current]{background:var(--ink)}
.jump--stuck .whenbar .wrap{padding-top:3px;padding-bottom:5px}
.jump--stuck .whenbar__s{width:32px;height:32px}
/* Anchored sections land below the sticky strip, not under it. */
/* The strip covers the top of the page once it sticks, and it is a
different height on a page with chips than on one with only the date,
so the browser is told what it actually measured. */
html{scroll-padding-top:calc(var(--stuck,56px) + 8px)}
:target,[id^="sec-"]{scroll-margin-top:8px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* The count line used to sit hard against the band with no gap at all. */
/* .wrap sets padding on all four sides, and main carries both classes, so
the element selector lost and every page ran flush against its band. */
main.wrap{padding-block:clamp(20px,4vw,30px) 76px}
main>h2:first-child{margin-top:0}
h1{font:500 clamp(2.3rem,6vw,3.7rem)/1.04 var(--serif);letter-spacing:-.015em;
text-wrap:balance;margin:0 0 8px}
h2{font:500 clamp(1.5rem,3vw,1.9rem)/1.15 var(--serif);letter-spacing:-.01em;
text-wrap:balance;margin:52px 0 14px}
h3{font-size:1.02rem;margin:0;font-weight:700;letter-spacing:-.008em}
p{max-width:66ch;text-wrap:pretty}
.lede{color:var(--muted);margin-top:0;font-size:1.04em}
.sub{color:var(--muted);font:400 .9rem/1.5 var(--sans);margin:0}
/* The whole question, as one object. Where from, where to, which days, and
whether a car is coming were five separate rounded boxes with five shadows,
sitting at four different widths: read as a row of unrelated buttons rather
than as one form. They are rows of a single card now, divided by hairlines,
the way the question is actually asked at a ticket desk. */
.trip{display:grid;gap:10px;margin:18px 0 0}
/* --sheet is the card ground; --seam the hairline between its rows. */
.trip{--seam:oklch(0.820 0.022 82/.85)}
.trip__ends,.dates,.trip .veh{background:var(--foam);border:1px solid var(--rule);
border-radius:var(--r);box-shadow:var(--paper)}
/* The panel of answers hangs out of the card, so nothing here may clip. */
.trip__ends{position:relative}
.trip__ends:focus-within,.dates:focus-within{border-color:var(--sea-deep)}
.pick{position:relative;min-width:0;padding:9px 58px 10px 16px}
.pick+.pick{border-top:1px solid var(--seam)}
.pick__l{display:block;font:600 .68rem/1 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.pick__i{width:100%;font:600 1.06rem/1.35 var(--sans);padding:0;min-height:28px;
border:0;background:transparent;color:var(--ink);border-radius:0}
.pick__i{text-overflow:ellipsis}
.pick__i:focus{outline:none}
.pick__i::placeholder{color:var(--muted);font-weight:400}
.pick__x{position:absolute;right:56px;bottom:6px;width:34px;height:38px;border:0;
background:transparent;color:var(--muted);font-size:21px;line-height:1;
cursor:pointer;border-radius:999px}
.pick__x:hover{color:var(--ink)}
/* Reverse the trip: the same crossing read the other way round. It sits on the
seam between the two ends, which is the line it acts on. */
.trip__swap{position:absolute;right:10px;top:50%;transform:translateY(-50%);
width:44px;height:44px;z-index:2;border:1px solid var(--rule);
border-radius:999px;background:var(--foam);color:var(--sea-deep);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 1px 3px oklch(0.265 0.018 220/.10);
transition:background .15s var(--ease),border-color .15s var(--ease)}
.trip__swap:hover{background:var(--sea-deep);border-color:var(--sea-deep);color:var(--foam)}
/* The one filled thing in the card, so there is never a question about what to
press. Not yet answerable, and it says so quietly rather than by going the
colour of the paper it sits on. */
.trip__go{min-height:56px;border:1px solid transparent;border-radius:var(--r);
background:var(--sea-deep);color:var(--foam);cursor:pointer;
font:700 1.04rem/1 var(--sans);letter-spacing:-.005em;
transition:background .15s var(--ease),opacity .15s var(--ease)}
.trip__go:hover:not(:disabled){background:var(--ink)}
/* Pressed with nowhere to go: the empty end lights up, the button stays blue. */
.pick--miss{box-shadow:inset 0 0 0 2px #c0392b;border-radius:var(--r)}
.pick--miss .pick__i::placeholder{color:#a8321f;font-weight:600}
.trip__none{margin:0;font:500 .92rem/1.4 var(--sans);color:var(--tile-ink)}
/* Wide enough and the two ends sit side by side, still one card, the swap on
the seam between them - which is now vertical. */
@media(min-width:700px){
.trip__ends{display:grid;grid-template-columns:1fr 1fr}
.pick+.pick{border-top:0;border-left:1px solid var(--seam)}
.pick{padding:10px 16px 12px}
/* The x sat over the name it clears; the name now stops short of it. */
.trip .pick:first-of-type{padding-right:92px}
.trip .pick:last-of-type{padding-left:40px;padding-right:52px}
.trip__swap{right:auto;left:50%;transform:translate(-50%,-50%)}
.pick__x{right:50px;bottom:8px}
.trip .pick:last-of-type .pick__x{right:8px}
.ac{left:0;right:auto;min-width:min(28rem,100%)}
.trip .pick:last-of-type .ac{left:auto;right:0}
}
/* The list under a box. Grouped, because a harbour, a mainland town and an
island are three different kinds of answer. */
.ac{list-style:none;margin:6px 0 0;padding:6px;position:absolute;z-index:30;
left:0;right:0;top:100%;background:var(--foam);border:1px solid var(--rule);
border-radius:var(--r);box-shadow:var(--paper),0 14px 34px oklch(0.31 0.052 218/.16);
max-height:min(46vh,24rem);overflow-y:auto;overscroll-behavior:contain}
.ac__h{font:600 .68rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
color:var(--tile-ink);padding:12px 12px 6px;position:sticky;top:-6px;
background:var(--foam)}
.ac__o{display:block;width:100%;text-align:left;border:0;background:transparent;
padding:12px;min-height:44px;border-radius:10px;cursor:pointer;
font:500 .98rem/1.3 var(--sans);color:var(--ink)}
.ac__o:hover,.ac__o:focus-visible,.ac__o.ac--on{background:var(--surface)}
.ac__sub{display:block;margin:3px 0 0;font:400 .8rem/1.3 var(--sans);
color:var(--muted)}
/* One way or return, asked the way an airline asks it: two opposites above
the fields, the chosen one filled in, and "Choose:" in front so the pair
reads as a question rather than two labels. */
.way2{display:flex;align-items:center;gap:6px;padding:10px 12px 0}
.way2__l{font:600 .84rem/1 var(--sans);color:var(--muted);margin-right:2px}
.way2__b{border:1px solid var(--rule);background:transparent;color:var(--ink);
cursor:pointer;font:600 .84rem/1 var(--sans);border-radius:999px;
min-height:36px;padding:0 15px}
.way2__b[aria-pressed="true"]{background:var(--sea-deep);border-color:var(--sea-deep);
color:var(--foam)}
.way2__b:hover[aria-pressed="false"]{border-color:var(--ink)}
/* One way means one date. The second pill and the second half of the calendar
are not dimmed, they are gone: a control that cannot apply is not a hint.
`.dates .when` sets a display of its own further down this sheet and would
win on document order, so the date cell is named through .dates too. */
[data-way="one"] [data-cal-cell="back"],
[data-way="one"] .cal__one{display:none}
/* The way out of the list, at the head of it. The panel opens over the card's
own button, and one end chosen is already an answer worth taking. */
.ac__top{position:sticky;top:-6px;z-index:1;background:var(--foam);
padding:0 0 6px;margin:0 0 2px;border-bottom:1px solid var(--rule)}
.ac__go{display:block;width:100%;min-height:48px;border:0;border-radius:10px;
background:var(--sea-deep);color:var(--foam);cursor:pointer;
font:700 .98rem/1.25 var(--sans);padding:12px;text-align:left}
.ac__go:hover{background:var(--tile-ink)}
/* One question, asked once: are you bringing a vehicle? Two buttons reading
"By car" and "On foot" left readers unable to say what the control did or
which half was on. A checkbox has one state and shows it. Car is still the
default in the markup, so scripting off is the car-ferry site exactly as
before. */
.veh{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;
padding:8px 14px 8px 10px;min-height:44px;border-radius:999px;
border:1px solid transparent;background:transparent;cursor:pointer;
font:600 .9rem/1.2 var(--sans);color:var(--ink);
transition:border-color .15s var(--ease),background .15s var(--ease)}
.veh:hover{background:oklch(1 0 0/.4)}
.veh:has(:checked){border-color:var(--rule);background:var(--foam)}
/* A phone draws a native checkbox as a bare grey square whatever accent-color
says, so the box is ours: same tick either way, on every browser. */
.veh__b{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;
margin:0;cursor:pointer;border:1.6px solid var(--rule);border-radius:7px;
background:var(--foam);transition:background .15s var(--ease),
border-color .15s var(--ease)}
.veh__b:checked{background:var(--tile) no-repeat center/13px 13px;
border-color:var(--tile);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.veh:has(:focus-visible){outline:2px solid var(--tile);outline-offset:3px}
/* Inside the card it is a row like the others, not a pill floating beside it. */
.trip .veh{display:flex;margin:0;border-radius:var(--r);padding:0 16px;
min-height:54px;font-size:.95rem}
.trip .veh:hover{background:var(--foam)}
[data-mode="car"] [data-vessel]:not([data-vessel~="ferry"]){display:none}
/* who runs the boat, and what kind of boat: a mark and a chip, never prose */
/* In a row the mark is a 15px smear with a white box round it on paper, and
the operator is already named in words beside it, so the row keeps the words
and the band keeps the mark. */
.op{display:none}
.head .op{display:inline-block}
/* On the band the mark sits on a paper pill: a blue logo over a dark photo is
invisible, and an ![]()
cannot be recoloured, so the ground comes to it. */
.head .op{height:20px;box-sizing:content-box;padding:6px 11px;border-radius:999px;
background:var(--foam);margin-right:0}
.head__op{margin:14px 0 0;display:flex;align-items:center;gap:8px}
/* The chip is a quiet outline: a filled terracotta block on every catamaran
row shouted louder than the times. */
.kind{display:inline-block;font:600 .66rem/1 var(--sans);letter-spacing:.06em;
text-transform:uppercase;padding:3px 7px 2px;border-radius:999px;margin-right:7px;
border:1px solid var(--tile-ink);color:var(--tile-ink);vertical-align:1px}
.kind--ship,.kind--ferry{border-color:var(--muted);color:var(--muted)}
.head .op{border:1px solid var(--hair)}
.count-line{font:500 .85rem/1 var(--sans);color:var(--muted);margin:22px 0 0;
letter-spacing:.01em}
/* typographic rows, never cards */
/* A ul, so a screen reader can announce and skip the list. */
/* A flex column so a search can reorder rows with `order` instead of moving
nodes. */
.rows{list-style:none;padding-left:0;margin:10px 0 0;border-top:1px solid var(--rule);
display:flex;flex-direction:column}
.row{display:flex;gap:16px;align-items:baseline;justify-content:space-between;
padding:15px 6px;border-bottom:1px solid var(--hair);text-decoration:none;
color:inherit;transition:background .14s var(--ease)}
.row>*{transition:transform .14s var(--ease)}
/* transform rather than padding: the row nudges without relaying out the list */
.row:hover{background:var(--surface)}
.row:hover>*{transform:translateX(5px)}
.row[hidden]{display:none}
.row .nm{flex:1;min-width:0;font-weight:600;letter-spacing:-.008em}
.row .to{display:block;font-weight:400;font-size:.88rem;color:var(--muted);
margin-top:3px;letter-spacing:0}
.row .meta{font:500 .85rem/1 var(--sans);color:var(--muted);flex:none;
font-variant-numeric:tabular-nums;white-space:nowrap}
.row .no{font:500 .8rem/1 var(--sans);color:var(--muted);flex:none;min-width:3em;
font-variant-numeric:tabular-nums}
/* the summary strip: what leaves next, per destination */
.next{margin:0;padding:clamp(22px,3.5vw,30px) 0 4px}
/* Without scripting the summary never fills, so it must not leave a hole. */
.next:has([data-next][hidden]){display:none}
.next__grid{display:block}
.onward-list{list-style:none;margin:0;padding:0;max-width:52rem;
border-top:1px solid var(--rule)}
.onward{border-bottom:1px solid var(--hair)}
.onward__link{display:flex;align-items:baseline;gap:14px;padding:14px 4px;
text-decoration:none;color:inherit;transition:background .14s var(--ease)}
.onward__link:hover{background:var(--surface)}
.onward__link:hover .onward__to{color:var(--tile-ink)}
.onward--none .onward__t,.onward--none .onward__to{color:var(--muted)}
/* The row also shown in the header band. Marked, not hidden: the list must
stay complete or the "every line" heading above it is false. */
.onward--lead .onward__t{color:var(--tile-ink)}
.onward--lead .onward__link{background:var(--surface)}
.onward__go{flex:none;color:var(--muted);font-size:1.3rem;line-height:1;
transition:transform .14s var(--ease),color .14s var(--ease)}
.onward__link:hover .onward__go{color:var(--tile-ink);transform:translateX(3px)}
.onward__to{flex:1;min-width:0;font-weight:600;letter-spacing:-.006em}
/* Every call in order. The names carry the weight, the arrows do not, so a
six-stop catamaran reads as a route and not as a wall of bold. */
.stops{display:block;line-height:1.35}
.stops .stop{white-space:nowrap}
.stops .arrow{color:var(--tile-ink);font-weight:400;padding:0 .35em}
/* Where the boat ends up, then what it calls at. The calls used to sit in the
same chain of arrows as the terminus, at the same weight, so a five-port
catamaran read as five answers to one question. */
.stop--to{white-space:normal}
.stop__via{display:block;font:400 .82rem/1.35 var(--sans);color:var(--muted);
margin-top:2px}
.onward__t{font:700 1.2rem/1 var(--sans);font-stretch:110%;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;flex:none}
.onward__in{color:var(--muted);font:500 .84rem/1 var(--sans);flex:none;
min-width:6.6em;text-align:right;font-variant-numeric:tabular-nums}
/* A long itinerary and "No more departures today" used to sit on one line
with nothing allowed to wrap, so on a phone with large text they were drawn
on top of each other. Both may wrap now; the row grows instead. */
@media(max-width:480px){.onward__in{min-width:0;flex:0 1 auto;white-space:normal;
line-height:1.25;max-width:42%}.stops .stop{white-space:normal}}
/* The island's harbours, named before its boards. */
.harbours{margin:0 0 14px;font-size:.95rem}
.harbours span{color:var(--muted)}
.leg__where{font:600 .95rem/1.35 var(--sans);color:var(--ink);margin:0 0 4px;
letter-spacing:-.005em}
.leg__where .from{color:var(--muted);font-weight:400}
.leg__time{font:700 clamp(2.5rem,8.5vw,3.5rem)/.95 var(--sans);font-stretch:118%;
letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);
display:block}
.next__h{margin:0 0 16px;font-size:1rem;letter-spacing:.01em}
.head__leadlabel{font:600 .78rem/1 var(--sans);letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.head .next__h{display:none}
/* What is leaving after the one in big type. Tabular figures, a hairline
between, and no second giant number: this is the tail of a hierarchy, not a
second headline. */
.lead__more{list-style:none;margin:14px 0 0;padding:12px 0 0;
border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:9px}
.lead__more li{display:flex;gap:12px;align-items:baseline}
.lead__t{font:600 1.02rem/1 var(--sans);font-variant-numeric:tabular-nums;
color:var(--sea-deep);flex:none}
.lead__to{color:oklch(0.355 0.026 218);font-size:.95rem;min-width:0}
.lead__to .from{color:var(--muted)}
@media(min-width:820px){
.head__lead .lead__more li{justify-content:flex-end}
}
.leg__via{font:400 .88rem/1.45 var(--sans);color:var(--muted);margin:4px 0 0;max-width:34ch}
/* Only where the panel is right-aligned. On a phone it left the calls floating
in the middle of the panel, reading as a stray line. */
@media(min-width:820px){.head__lead .leg__via{margin-left:auto}}
.onward__meta{display:block;font-weight:400;font-size:.82rem;color:var(--muted)}
.onward__via{font-weight:400;font-size:.82rem;color:var(--muted);
margin-top:2px;letter-spacing:0}
.leg__in{font:600 .95rem/1.4 var(--sans);color:var(--tile-ink);margin:7px 0 0;
font-variant-numeric:tabular-nums}
.leg__rest{list-style:none;margin:9px 0 0;padding:8px 0 0;
border-top:1px solid var(--hair);display:grid;gap:3px}
.leg__rest li{display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.leg__rest .lead__in{font:400 .85rem/1.35 var(--sans);color:var(--muted);
font-variant-numeric:tabular-nums}
.leg__left{font:400 .85rem/1.35 var(--sans);color:var(--muted);
font-variant-numeric:tabular-nums}
.leg__then{font:400 .9rem/1.5 var(--sans);color:var(--muted);margin:6px 0 0;
font-variant-numeric:tabular-nums}
.leg--none .leg__time{color:var(--muted);font-size:clamp(1.1rem,3.4vw,1.35rem);
font-stretch:100%;letter-spacing:-.01em;line-height:1.3;font-weight:600}
/* departure board */
.season{border-top:1px solid var(--ink);margin:32px 0 0;padding:13px 0 0}
.season__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 4px}
.season__when{font:500 1.25rem/1.3 var(--serif);margin:0}
.season__tag{font:700 .68rem/1 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--bg);background:var(--tile-ink);
padding:5px 7px;border-radius:3px}
.pair{margin:18px 0 0}
.pair__hd{font:500 1.15rem/1.35 var(--serif);margin:0 0 2px}
.pair__hd .arrow{color:var(--tile-ink);padding:0 .3em;font-weight:400}
.pair__meta{font:400 .85rem/1.4 var(--sans);color:var(--muted);margin:2px 0 0}
/* The timetable is a table. Deliberately NOT display:grid - overriding a
table's display strips its semantics back out of the accessibility tree,
which is the whole reason it became a table. Column headers are for screen
readers; sighted readers already have the pair heading above. */
.days{width:100%;border-collapse:collapse;margin:8px 0 0;table-layout:auto}
.days thead th{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.days th[scope=row]{font:500 .82rem/1.9 var(--sans);color:var(--muted);
text-align:left;vertical-align:baseline;padding:0 20px 10px 0;
white-space:nowrap;width:1%}
.days td{padding:0 0 10px;vertical-align:baseline}
.days .times{display:flex;flex-wrap:wrap;gap:3px 5px}
@media(max-width:600px){
.days th[scope=row]{white-space:normal;padding-right:12px}
}
.t{font:600 .98rem/1 var(--sans);font-variant-numeric:tabular-nums;
padding:6px 7px;border-radius:5px;color:var(--ink);
transition:background .16s var(--ease),color .16s var(--ease)}
/* A called-at port with no departures of its own gets named but not linked. */
.row--flat{color:var(--muted);cursor:default}
/* The footnote glyph beside a departure: visible, never load-bearing alone. */
.t sup{font-size:.7em;line-height:0;vertical-align:super;color:var(--tile-ink);
font-weight:700;margin-left:1px}
.t--gone{color:var(--muted);font-weight:400}
.t--off{color:var(--muted);font-weight:400;text-decoration:line-through;opacity:.6}
.t--next{background:var(--tile-ink);color:var(--bg);font-weight:700}
.window__when{margin:14px 0 0}
/* The price list, as its own PDF prints it. A ferry has twelve vehicle rows
and five tariff columns, which is wider than a phone; the table scrolls
inside its own box rather than dragging the page sideways with it. */
.fare__s{font:600 1rem/1.3 var(--sans);color:var(--ink);margin:22px 0 8px}
.fare__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--hair);border-radius:var(--r);background:var(--surface)}
.fare{border-collapse:collapse;width:100%;min-width:32rem;
font:400 .9rem/1.35 var(--sans)}
.fare th,.fare td{padding:9px 14px;text-align:right;white-space:nowrap;
border-bottom:1px solid var(--hair)}
.fare tbody tr:last-child th,.fare tbody tr:last-child td{border-bottom:0}
.fare thead th{font-weight:600;color:var(--muted);font-size:.82rem;
background:var(--foam);position:sticky;top:0}
.fare th[scope=row]{text-align:left;font-weight:500;color:var(--ink);
white-space:normal;min-width:14rem}
.fare thead th:first-child{text-align:left}
.fare td{font-variant-numeric:tabular-nums;color:var(--ink)}
.fare tbody tr:hover{background:var(--foam)}
/* On a phone the same table is a stack of cards: one per vehicle, each
tariff on its own line with its column name in front of it. The thead is
hidden from sight only; the roles in the markup keep it a table. */
@media(max-width:600px){
.fare{min-width:0}
.fare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fare tbody,.fare tr,.fare th,.fare td{display:block;text-align:left;white-space:normal}
.fare tr{padding:10px 14px;border-bottom:1px solid var(--hair)}
.fare tbody tr:last-child{border-bottom:0}
.fare th[scope=row]{padding:0 0 6px;border:0;min-width:0}
.fare td{display:flex;justify-content:space-between;gap:12px;padding:2px 0;border:0}
.fare td:empty{display:none}
.fare td::before{content:attr(data-l);color:var(--muted)}
}
.source{margin:30px 0 0}
.season__note{margin:14px 0 0;font-size:.85rem;color:var(--muted);max-width:74ch}
/* Marks the operator's own words, which arrive in English whatever the page. */
.season__note-by{font-weight:600;color:var(--ink)}
/* multi-stop lines print every call rather than just the endpoints */
.voyages{width:100%;border-collapse:collapse;table-layout:auto}
.voyages thead th{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.voyage th[scope=row]{text-align:left;vertical-align:baseline;width:1%;
padding-right:16px}
.voyage>*{padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.voyage:last-child>*{border-bottom:0}
.voyage__days{font:500 .8rem/1.4 var(--sans);color:var(--muted);margin:0 0 4px}
.voyage__calls{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 6px;
margin:0;max-width:none}
.call{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.call__p{font:400 .88rem/1.4 var(--sans);color:var(--muted)}
.voyage .arrow{color:var(--muted);padding:0 1px}
/* live queue verdict */
.verdict{border-top:3px solid var(--tile-ink);background:var(--foam);
border-radius:0 0 var(--r) var(--r);padding:24px 22px 20px;margin:30px 0 0;
box-shadow:var(--paper)}
.verdict .state{font:500 clamp(1.5rem,4.6vw,2.1rem)/1.15 var(--serif);
letter-spacing:-.012em;margin:0;text-wrap:balance}
.verdict .count{font:700 clamp(2.6rem,10vw,4rem)/1 var(--sans);font-stretch:118%;
font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--tile-ink);
display:block;margin:6px 0 0}
.verdict .unit{font:500 .98rem/1 var(--sans);color:var(--muted)}
.verdict p{max-width:60ch}
.freshness{display:flex;align-items:center;gap:8px;color:var(--muted);
font:500 .85rem/1.4 var(--sans);margin:12px 0 0;font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;background:var(--tile);flex:none}
.live .dot{animation:beat 2.6s var(--ease) infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.28}}
@media(prefers-reduced-motion:reduce){.live .dot{animation:none}
*{transition-duration:.01ms!important}}
.unknown{border-top-color:var(--muted)}
.unknown .count{color:var(--muted)}
/* Nothing to report: a caption, not a headline. */
/* Queue traffic light. Named qstage, not stage: .stage is already the route
page's opening block further down this sheet, and it won that cascade -
the verdict came out wearing the hero's background and padding. */
.qstage{border-top-width:6px;border-top-color:var(--qc)}
.qstage--clear{--qc:#7a8ba0}
.qstage--green{--qc:#1e8f4e}
.qstage--yellow{--qc:#d99100}
.qstage--red{--qc:#c0392b}
.qstage--red .state{color:#a8321f}
/* "I don't know" - a reading we could not take, which Gal asked for in
place of the silence that used to stand in for it. Grey like clear,
because it is not a colour of queue and must not read as one. */
.qstage--unknown{--qc:#7a8ba0}
.verdict--quiet{border-top:0;background:none;padding:0;margin:0 0 26px}
.verdict--quiet .state{font:600 .95rem/1.4 var(--sans);color:var(--muted)}
.verdict--quiet .note,.verdict--quiet .lede{font-size:.88rem;color:var(--muted);margin:4px 0 0}
.verdict--quiet .freshness{margin:4px 0 0}
.unknown .dot{background:var(--muted)}
/* Below the board the page is a printed notice, not a stack of cards. Rank is
carried by type size and one hairline per section; the only boxed element on
the page is the advert, so the box means "this is paid" instead of meaning
nothing. Five identical grey pills said every caveat mattered equally, which
is how the whole lower half read as one flat grey area. */
.ways{margin:0 0 26px}
.ways .plain{margin:0}
/* What the front page says once the form has been answered or skipped: which
boat is which, what happens at the port, and where the times come from.
Under the hero, so the reader who knows what they want never meets it. */
.tell{scroll-margin-top:18px;border-top:1px solid var(--rule);margin:34px 0 0;padding:26px 0 0;
max-width:70ch}
.tell:first-child{border-top:0;padding-top:0}
.tell h2{font:500 1.35rem/1.25 var(--serif);margin:0 0 16px}
.tell__l{display:grid;gap:16px;margin:0}
.tell__l>div{margin:0}
.tell__l dt{font:700 1rem/1.3 var(--sans);color:var(--ink)}
.tell__l dd{margin:4px 0 0;color:var(--muted);font-size:.98rem;line-height:1.5}
@media(min-width:820px){
.tell__l{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tell{max-width:none}
.tell h2,.tell .qa,.tell .answer,.tell .stats{max-width:70ch}
}
.qa+.qa{border-top:1px solid var(--hair);margin-top:16px;padding-top:16px}
.qa h3{font:700 1.02rem/1.35 var(--sans);margin:0 0 5px}
.qa p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55}
.tell .stats{margin:12px 0 10px}
.aside-sec{border-top:1px solid var(--rule);margin:38px 0 0;padding:24px 0 0;
max-width:66ch}
.aside-sec h2{font:500 1.3rem/1.3 var(--serif);margin:0 0 10px}
.answer{margin:0;max-width:62ch;font-size:1.02rem}
.note{margin:8px 0 0;max-width:66ch;color:var(--muted);font-size:.93rem;
line-height:1.5}
.fineprint{margin:10px 0 0;max-width:70ch;color:var(--muted);font-size:.8rem;
line-height:1.5}
.booking__buy{display:inline-block;margin:16px 0 0;padding:13px 22px;border-radius:999px;
background:var(--tile-ink);color:var(--bg);text-decoration:none;
font-weight:600;font-size:.95rem;
transition:background .15s var(--ease),transform .15s var(--ease)}
.booking__buy:hover{background:var(--sea-deep);color:var(--bg)}
.booking__buy:active{transform:translateY(1px)}
/* Cameras. Closed by default, and that is the mechanism rather than the
styling: a lazy image inside a closed disclosure is never fetched, so HAK is
asked for a frame only by a reader who wants one, and every other visit
still costs zero third-party requests. */
.cam{margin:0 0 22px}
.cam__name{font-weight:600;font-size:1rem;margin:0 0 8px}
/* Angles sit side by side where there is room and stack where there is not,
so three views of Split do not become three screens of scrolling. */
.cam__grid{display:grid;gap:8px;
grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cam__img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;
background:var(--surface);margin:0;border-radius:var(--r)}
.cam .fineprint{margin:8px 0 0}
/* Ships in port: a link out, for the same reason as the cameras. */
.cam-row{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0}
.cam-row .cam{font-weight:600;font-size:.98rem;color:var(--sea);border:0;
text-decoration-thickness:1px;text-underline-offset:3px}
.cam-row .cam:hover{color:var(--tile-ink)}
/* other seasons, folded away until asked for */
details.more{margin:16px 0 0}
/* Fifty-eight villages is a page of its own, not a subtitle. */
.head details.towns{margin:12px 0 0}
.head details.towns .answer{margin:8px 0 0;font-size:.95rem;color:var(--muted)}
details.more>summary{cursor:pointer;min-height:44px;font:600 .9rem/1.4 var(--sans);
color:var(--sea);padding:12px 0;list-style:none;display:flex;align-items:center;gap:8px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:0;height:0;flex:none;
border-left:6px solid currentColor;border-top:4px solid transparent;
border-bottom:4px solid transparent;transition:transform .18s var(--ease)}
details.more[open]>summary::before{transform:rotate(90deg)}
details.more>summary:hover{color:var(--tile-ink)}
/* one local advertiser block, after the answer, never before it */
.ad{margin:48px 0 0;padding:16px 18px;background:var(--surface);border-radius:var(--r);
max-width:66ch}
.ad .tag{font:600 .7rem/1 var(--sans);letter-spacing:.09em;color:var(--muted);
text-transform:uppercase;margin:0 0 8px}
.ad p{margin:0;font-size:.94rem}
.ad .empty{color:var(--muted);font-size:.91rem;margin:0}
/* Touch targets reach 44px without changing what the eye sees. A thumb gets a
real target; the layout gets none of the padding that would come with it. */
.tap{position:relative}
.tap::after{content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);width:max(100%,44px);height:44px}
.notice{margin:20px 0 0;padding:14px 16px;border-left:4px solid var(--tile-ink);
background:var(--foam);border-radius:0 var(--r) var(--r) 0;box-shadow:var(--paper)}
.notice__kicker{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted)}
.notice__title{margin:4px 0 0;font:500 1.2rem/1.3 var(--serif)}
.notice__text{margin:8px 0 0;max-width:70ch;font-size:.93rem;line-height:1.5}
.notice__more{margin:6px 0 0}
.notice__lines,.notice__src{margin:8px 0 0;font-size:.9rem}
.notice__lines a{margin-right:8px}
.notice__b{margin:10px 0 0;border:1px dashed var(--rule);background:transparent;
color:var(--sea);cursor:pointer;font:600 .86rem/1 var(--sans);
border-radius:999px;min-height:38px;padding:0 14px}
/* 44px of hit area under a 38px button, without changing how it looks. */
.notice__b{position:relative}
.notice__b::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
transform:translateY(-50%)}
.notice__b:hover{color:var(--tile-ink);border-color:var(--tile-ink)}
/* The terms, out of the way until they are asked for. */
.modal{position:relative;border:0;border-radius:var(--r);padding:22px;
max-width:min(560px,92vw);
background:var(--foam);color:var(--ink);box-shadow:var(--paper)}
.modal::backdrop{background:oklch(0.265 0.018 220/.55)}
.modal__h{margin:4px 0 0;font:500 1.25rem/1.3 var(--serif)}
.modal__f{margin:18px 0 0;text-align:right}
.modal__x{border:1px solid var(--rule);background:transparent;color:var(--ink);
cursor:pointer;font:600 .86rem/1 var(--sans);border-radius:999px;
min-height:40px;padding:0 18px}
.modal__x:hover{background:var(--tile-ink);border-color:var(--tile-ink);color:var(--bg)}
/* The corner ×, not a word in the footer: a dialog whose one real action is
Send read as two buttons of equal weight, and the Close sat where a thumb
reaches for Send. 40px of hit area either way. */
.modal__cf{position:absolute;top:8px;right:8px;margin:0;line-height:0}
.modal__c{width:40px;height:40px;display:grid;place-items:center;border:0;
border-radius:999px;background:transparent;color:var(--ink);opacity:.55;
cursor:pointer;font:400 25px/1 var(--sans)}
.modal__c:hover,.modal__c:focus-visible{opacity:1;background:var(--tile-ink);
color:var(--bg)}
.modal__h{padding-inline-end:34px}
/* One panel open at a time. `name` on is the browser's own exclusive
accordion; this only has to make the closed titles read as a list of what
the page holds rather than as a stack of empty sections. */
.fold{border-top:1px solid var(--rule);margin:0;scroll-margin-top:12px}
.fold:last-of-type{border-bottom:1px solid var(--rule)}
.fold__s{cursor:pointer;list-style:none;display:flex;align-items:center;
justify-content:space-between;gap:14px;padding:18px 2px;min-height:44px}
.fold__s::-webkit-details-marker{display:none}
.fold__h{margin:0;font:500 1.2rem/1.3 var(--serif)}
.fold__s:hover .fold__h{color:var(--tile-ink)}
.fold__mark{width:11px;height:11px;flex:none;border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-3px,-3px);
transition:transform .18s var(--ease)}
.fold[open] .fold__mark{transform:rotate(225deg) translate(-2px,-2px)}
.fold__b{padding:0 2px 26px}
.fold__b>h2:first-child,.fold__b>h3:first-child{margin-top:0}
.fold__b .whenbar{margin:0 0 18px}
/* The party that is actually travelling, priced. The published table stays
underneath: this is the answer, that is the source. */
.calc{margin:0 0 26px;padding:16px 18px 14px;background:var(--surface);
border-radius:var(--r);border:1px solid var(--rule)}
.calc__h{margin:0 0 12px;font:600 .8rem/1 var(--sans);letter-spacing:.07em;
text-transform:uppercase;color:var(--muted)}
.calc__g{display:grid;gap:12px}
@media(min-width:620px){.calc__g{grid-template-columns:auto auto 1fr;
align-items:end;gap:12px 22px}}
.calc__f{display:grid;gap:6px;font:500 .9rem/1.3 var(--sans)}
.calc__f>span{color:var(--muted);font-size:.82rem;letter-spacing:.03em}
.calc__n{display:inline-flex;align-items:center;gap:2px}
.calc__s{width:36px;height:36px;flex:none;border:1px solid var(--rule);
background:transparent;color:var(--ink);border-radius:999px;cursor:pointer;
font:600 1.1rem/1 var(--sans);position:relative}
/* The circle stays 36px so the row keeps its shape; what you press is 44px. */
.calc__s::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
transform:translate(-50%,-50%)}
.calc__s:hover{border-color:var(--tile-ink);color:var(--tile-ink)}
.calc__n output{min-width:2.2ch;text-align:center;
font:600 1.05rem/1 var(--sans);font-variant-numeric:tabular-nums}
.calc__v{min-height:36px;border:1px solid var(--rule);border-radius:10px;
background:var(--bg);color:var(--ink);font:500 .92rem/1 var(--sans);
padding:0 8px;max-width:100%}
.calc__c{display:flex;align-items:center;gap:8px;margin:12px 0 0;
font:500 .9rem/1.3 var(--sans);cursor:pointer}
.calc__t{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.calc__t b{font:700 1.85rem/1 var(--sans);letter-spacing:-.03em;
font-variant-numeric:tabular-nums;color:var(--tile-ink)}
.calc__t span{font:400 .88rem/1.4 var(--sans);color:var(--muted)}
.calc .fineprint{margin:6px 0 0}
.backlink{margin:40px 0 0;font-size:.95rem}
.backlink a,.source a{display:inline-block}
.byline{margin-top:18px}
.byline a{opacity:.82;font-weight:600;text-decoration-thickness:1px;
text-underline-offset:3px}
.byline a:hover{opacity:1;color:var(--foam)}
/* the colophon's own furniture */
.stats{margin:0 0 6px;color:var(--muted);font-size:.95rem;
font-variant-numeric:tabular-nums}
.imp__name{margin:18px 0 6px;font-weight:700}
.imp{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0;
font-size:.92rem;max-width:52rem}
.imp dt{color:var(--muted)}
.imp dd{margin:0}
/* ---- the crossing stage -------------------------------------------------
A route page opens on the port you are leaving from: its camera, its queue
and its next boat, and on a desktop all of that inside one screen. The
photograph is no longer a stock harbour behind a title - it is the ramp you
are about to drive onto, minutes old.
Note for anyone editing this file: the stylesheet is a Python string, and a
backslash CSS escape is read as an octal escape by Python before CSS ever
sees it - a right-arrow escape shipped a control character and the visible
text "92". The string is raw now, so that cannot happen again; even so,
prefer writing the character itself or putting it in the markup. */
.stage{background:var(--surface);border-bottom:1px solid var(--rule);padding:12px 0 16px}
/* The title never fills the width, and what is wrong today has to be read
before anything else - so they share the top row and neither costs the
picture a line of height. */
.stage__top{display:grid;gap:10px}
@media(min-width:940px){
.stage__top{grid-template-columns:minmax(0,auto) minmax(340px,1fr);
gap:22px;align-items:center}
.stage__top .alerts{margin-top:0}
}
.stage__k{font:700 11.5px var(--sans);letter-spacing:.11em;text-transform:uppercase;
color:var(--sea)}
.stage__h{font-size:clamp(20px,3.4vw,29px);letter-spacing:-.03em;margin:3px 0 0;
font-family:var(--serif);font-weight:600;line-height:1.1}
.stage__op{margin:7px 0 0;display:flex;align-items:center;gap:9px}
.stage .op{display:inline-block;height:17px;width:auto;box-sizing:content-box;
padding:5px 10px;border-radius:999px;background:var(--foam);border:1px solid var(--hair)}
/* both sides, always named, the live one unmistakable */
.seg{display:flex;gap:6px;margin-top:11px}
.seg__b{flex:1;min-width:0;min-height:52px;border:1px solid var(--rule);border-radius:12px;
background:var(--bg);cursor:pointer;color:var(--muted);display:grid;gap:1px;
padding:7px 13px;text-align:left;font:600 15px var(--sans);
transition:background .16s var(--ease),color .16s,border-color .16s}
.seg__b b{font-weight:700;color:inherit;font-size:15px;letter-spacing:-.015em;
line-height:1.2;overflow-wrap:anywhere}
.seg__b small{font-size:12.5px;font-weight:600;opacity:.9;
font-variant-numeric:tabular-nums}
.seg__b[aria-pressed=true]{background:var(--sea-deep);color:var(--foam);
border-color:transparent}
.seg__b[aria-pressed=true] small{color:var(--tile-lite)}
/* The stage runs wider than the reading column under it. Every HAK frame is
640x360, and at 1060px the picture that answers the question was the
narrowest thing on a 1920 screen. */
.stage>.wrap{max-width:1440px}
.stage__g{display:grid;gap:12px;margin-top:12px;
grid-template-columns:minmax(0,1fr);align-items:start}
/* Between a phone and a laptop (an iPad on its side, a half-width window) the
column beside the picture left it 620px wide and 350px tall, next to a
column of cards 470px tall - the gap under the photograph was painted sea.
The picture takes the width there and the two cards share the row under it. */
@media(min-width:940px) and (max-width:1149px){
.stage__side{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;align-items:start}
.stage__side .qstrip{grid-column:1}
}
@media(min-width:1150px){
/* The picture takes the room, the column takes what one card needs. */
.stage__g{grid-template-columns:minmax(0,1fr) minmax(310px,350px);gap:14px;
align-items:start}
.stage--nocam .stage__g{grid-template-columns:minmax(0,1fr)}
.stage--nocam .stage__side{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
/* No scrollbar inside the column. A card taller than the picture makes the
page longer instead - a scroll people already know how to use. Boxing it
put the price and the buy button below a fold nobody could see. */
.stage__side{align-self:start}
}
/* One screen, where there is a screen to fill: the picture keeps its own
shape and the type above it tightens instead. Cropping the frame to fill a
column was cutting the queue out of the photograph of the queue. */
@media(min-width:1150px) and (min-height:680px){
.stage{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;
padding-bottom:12px}
/* Without a picture there is no screen to fill, only cards to show. */
.stage--nocam{min-height:0}
.stage--nocam .stage__g{flex:0 0 auto}
/* A flex item with auto side margins does not stretch, so the wrap sized
itself to its content and ignored the width it was given.
The width is also what decides the picture's height, because the picture
is 16:9 and never cropped. Everything else on this screen is measured -
kicker 13, title 29, operator 18, alerts 60, control 48, answers 56, plus
the gaps and the stage's padding, 390px measured - so the wrap is capped at
the width whose 16:9 height is exactly the screen that is left. On a
short window the picture gets smaller instead of the page getting
longer. 404px is the column beside it (350) plus the gap (14) and the
wrap's own padding (40).
The column beside it is 440-590px of cards that do not shrink (590 with a
live reading's strip), so a picture shorter than that buys nothing: on a
1366x768 laptop the formula cut the photograph to 317px and painted the
160px under it dark. The floor is the width whose picture is about as
tall as the column, and the column no longer stretches the picture's
card: where it is still taller, the room under the picture is the page,
not a dark box. */
.stage>.wrap{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;
max-width:min(1760px,max(1300px,calc((100svh - var(--hdr) - 340px) * 16 / 9 + 404px)))}
.stage--nocam>.wrap{max-width:1440px}
.stage__g{min-height:0;padding-bottom:2px}
/* Any height left over lands under the picture, not under the answers: the
answers and the footnote belong on the bottom edge of the screen. */
.answers{margin-top:auto}
.stage__h{font-size:clamp(20px,2.5vw,26px)}
.stage__op{margin-top:5px}
.seg{margin-top:9px}
.seg__b{min-height:48px}
}
/* A short window, with the column still a column.
The two cards beside the picture want about 430px between them, and a laptop
whose viewport is 780px tall leaves 330 - so the column grew a scrollbar and
cut the next departure off at the top. Side by side they fitted and looked
like two half-empty panels. So the column stays a column and the cards get
denser instead: the departure time and the countdown share a line the way a
departure board writes them, and the steppers give up a few pixels. Nothing
is hidden that was not already behind a press. */
/* A laptop under 800px tall, with a live reading: the column is 467px and the
page above the grid 223px, so with the four answers under both columns
nothing short of hiding a line put them on screen. Gal, 11 Sept 2026: "all
info, 0 scroll... if there is not room make stuff smaller". So on these
screens the answers move under the picture, beside the column, and the
picture is cut to the height that leaves them room; the masthead loses
12px, the chips join the kicker's line, and the footnote goes under the
fold - it is the one paragraph here that is not an action. */
@media(min-width:1150px) and (max-height:800px){
.stage{padding-top:6px}
.stage__id{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
align-items:center}
.stage .stage__k{grid-area:1/1;margin:0}
.stage .stage__op{grid-area:1/2;margin:0;justify-self:start}
.stage .stage__h{grid-area:2/1/3/3;margin-top:2px}
.stage>.wrap{display:grid;column-gap:14px;row-gap:0;align-content:start;
grid-template-columns:minmax(0,1fr) minmax(310px,350px);
grid-template-rows:auto auto auto 1fr auto;
grid-template-areas:"top top" "seg seg" "shot side" "ans side" "foot foot";
max-width:min(1760px,calc((100svh - 274px) * 16 / 9 + 404px))}
.stage__top{grid-area:top}
/* The notice beside the title was the taller of the two: its kicker joins
its title's line, and the body keeps one line. */
.stage .alert{padding:6px 34px 7px 13px;grid-template-columns:auto minmax(0,1fr);
column-gap:8px;align-items:baseline}
.stage .alert__s{grid-column:1/-1}
.seg{grid-area:seg}
.stage__g{display:contents}
.shot{grid-area:shot;align-self:start;margin-top:9px}
.stage__side{grid-area:side;margin-top:9px}
.stage .answers{grid-area:ans;align-self:end;margin-top:8px;gap:8px}
.stage .answers .ans__b{min-height:50px;padding:7px 10px}
.stage .ans__b::after{display:none}
/* The source line keeps one line across the foot. The lede goes: it is the
one paragraph on this screen that repeats what the screen already shows
(line, operator, crossing, price, ports), and it is written for crawlers. */
.stage .stage__foot{grid-area:foot;margin-top:7px;grid-template-columns:minmax(0,1fr)}
.stage .stage__foot .lede{display:none}
.stage .stage__fine{text-align:left;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .stage__foot .lede,.stage .stage__fine{font-size:11.5px;line-height:1.35}
}
/* A 13-inch laptop with the browser's own bars and the dock on screen leaves
about 690px, and the buy button sat 24px under its edge. What is above the
grid gives those pixels back: the title, the chips and the side control each
lose a few, none loses a word. */
@media(min-width:940px) and (max-height:760px){
.stage{padding-top:8px}
.stage__h{font-size:clamp(20px,2.3vw,24px)}
.stage__op{margin-top:4px}
.seg{margin-top:7px}
.seg__b{min-height:44px;padding:5px 13px}
.stage__g{margin-top:9px}
.answers{margin-top:9px}
}
@media(min-width:940px) and (max-height:900px){
.stage__side .scard{padding:11px 14px}
.stage__side .scard--next .head__leadlabel{margin-bottom:5px}
.stage__side .leg{display:grid;grid-template-columns:auto minmax(0,1fr);
column-gap:12px;align-items:baseline}
.stage__side .leg__where{grid-column:1/-1;margin-bottom:2px}
.stage__side .leg__shut{grid-column:1/-1}
/* Only the time and the countdown share a row. Left to auto-place, a
boarding line ("12:07 left 8 min early · 72 min after the one before it")
took the auto column and squeezed "in 1 h 8 min" into one word per line. */
.stage__side .leg__ref,.stage__side .leg__ev,.stage__side .leg__more{grid-column:1/-1}
.stage__side .leg__ev{margin-top:4px;padding-top:4px}
.stage__side .leg__time{grid-column:1;font-size:clamp(1.5rem,2.2vw,1.9rem)}
.stage__side .leg__in{grid-column:2;margin:0;text-align:right}
/* "svaki trenutak" is words, not a time, and takes the row; the side line
goes under it instead of dropping one word per line down the right. */
.stage__side .leg__time--word{grid-column:1/-1}
.stage__side .leg__time--word+.leg__in{grid-column:1/-1;text-align:left;margin-top:2px}
.stage__side .leg__rest{grid-column:1/-1;margin-top:7px;padding-top:7px}
.stage__side .party__g{gap:3px 10px;margin-top:6px}
.stage__side .calc__s{width:32px;height:32px}
/* The browser's own paragraph margins were 18px of nothing under the buy
button and 10px over the label - a third of the card's slack. */
.stage__side .party{margin:7px 0 0;padding-top:7px}
.stage__side .scard--party .scard__k{margin:0 0 6px}
.stage__side .qstrip{padding-top:6px;padding-bottom:8px}
.stage__side .leg__more{margin-top:4px;display:flex}
.stage__side .party__n{font-size:20px}
/* The party is spelled out in full inside the sheet the price opens. */
.stage__side .party__l{-webkit-line-clamp:1}
}
.shot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sea-deep);
box-shadow:var(--paper)}
/* HAK serves every camera at 640x360. The box is that shape and the picture
is contained in it, so nothing is ever cut off the sides - a 4:3 box on a
phone was cropping away the lanes the picture exists to show. */
.shot__f{position:relative;aspect-ratio:16/9;background:var(--sea-deep);overflow:hidden}
.shot__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.shot__f img.on{opacity:1}
/* Ours sits under HAK's, at the foot of the picture: their strip across the
top carries the capture time, and two captions in one corner read as one
broken one. */
.shot__meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
margin-top:9px;padding-top:9px;border-top:1px solid oklch(0.97 0.011 82/.22)}
.shot__meta b{font:700 13.5px var(--sans);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;min-width:0}
.shot__meta .view{font:600 11.5px var(--sans);opacity:.84;flex:none;
font-variant-numeric:tabular-nums}
.shot__age{margin-left:auto;font:600 12px var(--sans);opacity:.92;flex:none;
position:relative;color:inherit}
/* The rule separates this line from the queue reading above it. With no
reading to reach for there is nothing to separate, and it drew a line
across the top of the bar for its own sake. On a phone the link also stops
being pushed to the far edge, where it took a second line to itself. */
.shot__b:has(>[data-side-only]:not([hidden]):empty) .shot__meta{margin-top:0;
padding-top:0;border-top:0}
@media(max-width:619px){.shot__age{margin-left:0}}
.shot__age::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;
transform:translateY(-50%)}
/* On a phone the frame is 197px tall and this bar, over it, took a third of
the picture the page exists to show. Below 620px it sits on the card's own
dark paper under the picture instead of on top of it. */
.shot__b{padding:10px 13px 11px;color:var(--foam);background:var(--sea-deep)}
@media(min-width:620px){
.shot__b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:54px 13px 11px;
background:linear-gradient(transparent 0%,oklch(0.15 0.03 222/.55) 34%,
oklch(0.13 0.03 222/.94) 100%);padding-right:min(42%,200px)}
}
.shot__b .verdict{background:none;border:0;padding:0;box-shadow:none;color:inherit;
margin:0}
.shot__b .state{font:700 clamp(16px,2.2vw,20px) var(--sans);letter-spacing:-.02em;
color:inherit;margin:0}
.shot__b .note,.shot__b .freshness{font-size:12.5px;color:inherit;opacity:.84;
margin:2px 0 0}
.shot__b .dot{background:currentColor}
/* Over the picture the caption strips every border, so the traffic light
loses the one thing it is: a colour. It comes back as a lamp in front of
the sentence, sized to read at arm's length on a phone. */
/* Never `live` on this block. That class is the red LIVE pill on the camera
caption - inline-flex, uppercase, rounded - and putting it here turned the
whole reading into one shouting pill whose paragraphs stacked up as
columns across the photograph. The pulsing dot comes from qstage instead. */
.qstage .dot{animation:beat 2.6s var(--ease) infinite}
@media(prefers-reduced-motion:reduce){.qstage .dot{animation:none}}
.shot__b .qstage .state{display:flex;align-items:baseline;gap:9px}
.shot__b .qstage .state::before{content:"";flex:none;width:11px;height:11px;
border-radius:99px;background:var(--qc);box-shadow:0 0 0 3px oklch(1 0 0/.18);
transform:translateY(-1px)}
.shot__b .qstage--red .state{color:inherit}
/* The time-to-full is the second thing anyone reads, so it does not fade with
the footnotes. It is not the page's .lede either: that class is the route
page's own opening sentence, and taking it here made the queue reading the
answer paragraph the page advertises. */
.shot__b .qfull{opacity:1;font-weight:600}
/* Smaller than a verdict, because it is a beta reading over a photograph that
can contradict it, and the photograph is the thing the reader came for. */
.shot__b .qstage .state{font-size:clamp(15px,1.7vw,17px)}
.qbeta{display:inline-block;margin-inline-start:8px;vertical-align:middle;
font:700 9.5px/1 var(--sans);letter-spacing:.10em;text-transform:uppercase;
padding:3px 6px 2px;border-radius:3px;border:1px solid currentColor;opacity:.7;
cursor:help}
/* How old the reading is, and how often it is taken. Under the line rather
than beside it: the line is the answer and this is its provenance. */
.qwhen{margin:2px 0 0;font:500 11.5px/1.3 var(--sans);opacity:.62;
letter-spacing:.01em}
.qwrong{margin-inline-start:8px;font:600 12px var(--sans);color:inherit;
background:none;border:0;padding:2px 0;opacity:.72;cursor:pointer;
text-decoration:underline;text-underline-offset:3px}
.qwrong:hover{opacity:1}
.qwrong[disabled],.qhere[disabled]{text-decoration:none;cursor:default;opacity:.8}
/* "I'm here" is the one the reader is meant to press, so it is a button and
not a link; "doesn't match the picture?" is a correction and stays quiet. */
.qhere{margin-inline-start:10px;font:700 12px var(--sans);color:inherit;
background:oklch(1 0 0/.13);border:1px solid oklch(1 0 0/.3);border-radius:99px;
padding:3px 10px 2px;cursor:pointer}
.qhere:hover{background:oklch(1 0 0/.22)}
.qhow{margin-inline-start:7px;width:24px;height:24px;flex:none;border-radius:99px;
border:1px solid currentColor;background:none;color:inherit;opacity:.6;
font:700 11px var(--sans);line-height:1;cursor:pointer;padding:0}
.qhow:hover{opacity:1}
.qans{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0}
.qans button{font:600 15px var(--sans);padding:9px 18px;border-radius:99px;
border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer}
.qans button:hover{background:var(--tile-ink);border-color:var(--tile-ink);color:var(--bg)}
/* The reading is welded to the foot of the departure card: one card, because
two was a column you had to scroll to read one answer. */
.scard--next:has(~ .qstrip:not([hidden])){border-end-start-radius:0;border-end-end-radius:0;
border-bottom:0;padding-bottom:12px}
.qstrip{background:var(--surface);border:1px solid var(--rule);border-top:0;
border-radius:0 0 var(--r) var(--r);padding:11px 15px 13px;margin:0 0 12px;
border-inline-start:4px solid var(--qc)}
/* The weld above only squares the corners; the column is a grid, and its 10px
gap was still drawing a seam between the two halves of one card. */
.scard--next ~ .qstrip:not([hidden]){margin:-10px 0 0}
.qstrip__a{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.qstrip .qhere{margin:0;color:var(--bg);background:var(--tile-ink);
border-color:var(--tile-ink);padding:5px 13px 4px;font-size:12.5px}
.qstrip .qhere:hover{background:var(--ink);border-color:var(--ink)}
.qstrip .qwrong{margin:0;color:var(--muted);font-size:11.5px}
/* The sailing the road has already closed. It stays on the card - "why not
the 10:00" is the first thing anyone asks, and we might be wrong. */
/* Not flex: the line is a sentence with a link at the end of it, and a flex
row squeezed "(how do we know?)" into a two-line column of its own. */
.leg__shut{margin:2px 0 0;display:block;
font:500 .84rem/1.4 var(--sans);color:var(--muted)}
.leg__shut .dot{width:8px;height:8px;background:#c0392b;flex:none;
display:inline-block;margin-inline-end:6px;vertical-align:middle}
.leg__shut s{text-decoration-thickness:1.5px}
/* What actually left today, above the timetable it is the check on. */
.cadence{margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--rule)}
.cadence p{margin:6px 0 0;max-width:62ch}
.cadence .season__note{font-variant-numeric:tabular-nums}
/* The real departures, in the page rather than behind a press. The last boat
out is the fact; everything under it is arithmetic, and it has to look
quieter than the fact it rests on. */
/* A panel now, not a section: .modal carries the frame, so this only sets
its measure and makes sure the whole day fits without a scrollbar of its
own - Gal, 10 Sept 2026: "I like when nothing is out of scope, 0
scrolling". Everything in here is one or two lines; the room it needs is
bounded, so the height is left to the content. */
.ran{max-width:min(620px,94vw)}
.ran .modal__b>*:first-child{margin-top:0}
.ran p{margin:6px 0 0;max-width:64ch}
.ran .season__note{font-variant-numeric:tabular-nums}
.ran__last{font:600 1.06rem/1.4 var(--sans);font-variant-numeric:tabular-nums}
.ran__all{margin:10px 0 0;font-variant-numeric:tabular-nums}
.ran__all b{font-weight:600}
.ran__all--p{color:var(--muted)}
/* The day on one rule: printed sailings above it, the ones a camera actually
saw below it. Nothing here is paired with anything - the shape is the
argument, and the shape is "there are more boats than the timetable". */
.dl{position:relative;height:54px;margin:16px 0 0;
border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
.dl i{position:absolute;transform:translateX(-50%)}
.dl__p{top:0;width:2px;height:11px;background:var(--muted);opacity:.55;border-radius:1px}
.dl__s{top:16px;width:3px;height:18px;background:var(--sea);border-radius:2px}
.dl__e{top:16px;width:3px;height:18px;border-radius:2px;
background:repeating-linear-gradient(var(--tile) 0 3px,transparent 3px 6px)}
.dl__now{top:0;bottom:16px;width:1px;background:var(--tile-ink);opacity:.55}
.dl__h{position:absolute;left:0;right:0;bottom:0;height:14px}
.dl__h i{bottom:0;font:500 .68rem/1 var(--sans);color:var(--muted);
font-variant-numeric:tabular-nums}
.dl__k{margin:6px 0 0 !important;display:flex;flex-wrap:wrap;gap:14px;
font:500 .78rem/1.4 var(--sans);color:var(--muted)}
.dl__k span{display:inline-flex;align-items:center;gap:6px}
.dl__k span::before{content:"";width:3px;height:12px;border-radius:2px;
background:var(--sea)}
.dl__kp::before{width:2px;height:9px;background:var(--muted) !important;opacity:.55}
.dl__ke::before{background:repeating-linear-gradient(
var(--tile) 0 3px,transparent 3px 6px) !important}
.live__mode{font:500 .92rem/1.45 var(--sans)}
/* The evidence for the mode, under the claim it supports. */
.live__ev{font-variant-numeric:tabular-nums}
/* The card's own lines, when a camera has measured something the timetable
does not say. No height and no overflow on any of them: a card decides its
own height and a long one makes the page longer - the column beside the
photograph earned its scrollbar once and never again
(tests/site/test_no_inner_scroll.py). */
.leg__time--word{font-size:clamp(1.5rem,7vw,1.9rem);letter-spacing:-.01em}
.leg__st{color:var(--tile-ink);font-weight:700}
sup.leg__st{font-size:.42em;vertical-align:super;margin-inline-start:.06em}
.leg__ref{margin:1px 0 0;display:flex;align-items:center;gap:7px;
font:400 .84rem/1.4 var(--sans);color:var(--muted);
font-variant-numeric:tabular-nums}
.leg__ref .qm{flex:none;width:19px;height:19px;padding:0;border-radius:50%;
border:1px solid var(--rule);background:transparent;color:var(--muted);
font:600 .7rem/1 var(--sans);cursor:pointer}
.leg__ref .qm:hover{border-color:var(--sea);color:var(--sea)}
.leg__ev{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--hair);
font:400 .8rem/1.45 var(--sans);color:var(--muted);
font-variant-numeric:tabular-nums}
.leg__more{margin:5px 0 0}
.leg__more button{border:0;background:transparent;padding:0;cursor:pointer;
font:600 .8rem/1.4 var(--sans);color:var(--tile-ink);text-align:start}
.leg__more button::after{content:" \2192"}
.leg__more button:hover{text-decoration:underline;text-underline-offset:3px}
/* The boat we expected did not come. Not an alarm - a fact, in the tone of
the rest of the block. */
.live__mode--late{color:var(--muted)}
.live__k{margin:16px 0 6px !important;font:600 .88rem/1.4 var(--sans);
letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.live__tag{font:500 .78rem/1 var(--sans);letter-spacing:.06em;
padding:3px 7px;border:1px solid var(--rule);border-radius:999px;
text-transform:uppercase;color:var(--muted);white-space:nowrap}
.live__rows{margin:0;padding:0;list-style:none;font-variant-numeric:tabular-nums}
.live__rows li{display:flex;gap:12px;align-items:baseline;
padding:7px 0;border-top:1px solid var(--rule)}
.live__p{min-width:4.5ch;font:600 1rem/1.3 var(--sans)}
.live__e{font:600 1rem/1.3 var(--sans);color:var(--sea)}
/* A boat in no timetable is the one row nobody else can print. */
.live__x .live__p{color:var(--muted);font-weight:400}
.live__rows small{font:400 .8rem/1.3 var(--sans);color:var(--muted)}
/* The claim answers for itself, in the same line as the claim. */
.qwhy{font:inherit;font-size:.94em;color:var(--sea);background:none;border:0;
padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px}
.leg__left button{font:inherit;color:var(--sea);background:none;border:0;padding:0;
cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qq{margin:16px 0 0;font:600 .95rem/1.4 var(--sans)}
.qq:first-of-type{margin-top:6px}
.qans--when button{font-size:13.5px;padding:6px 13px}
.qnote{width:100%;margin:10px 0 0;font:400 15px/1.5 var(--sans);color:var(--ink);
background:var(--bg);border:1px solid var(--rule);border-radius:10px;padding:10px;
resize:vertical}
/* The reading in full, beside the departure card. On paper, not over the
photograph - the photograph is the evidence for it, and print on evidence
is how you stop people checking it. */
.qcard{border-inline-start:4px solid var(--qc)}
.qcard__h{margin:6px 0 0;font:500 clamp(1.15rem,2.6vw,1.4rem)/1.2 var(--serif);
display:flex;align-items:center;gap:9px}
.qcard__h .dot{background:var(--qc);width:10px;height:10px}
.qcard__s{margin:3px 0 0;font:500 .92rem/1.4 var(--sans);color:var(--muted)}
.qcard__f{margin:9px 0 0;font:500 .8rem/1.4 var(--sans);color:var(--muted);
font-variant-numeric:tabular-nums}
.qcard__a{margin:11px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.qcard .qhere{margin:0;color:var(--bg);background:var(--tile-ink);
border-color:var(--tile-ink);padding:5px 13px 4px;font-size:12.5px}
.qcard .qhere:hover{background:var(--ink);border-color:var(--ink)}
.qcard .qwrong{margin:0;color:var(--muted);font-size:11.5px}
/* The red LIVE badge, and only the badge. Unscoped, this rule also caught
every verdict section - which the page marks `live` when the reading is
fresh - and turned a whole queue reading into one uppercase pill with its
paragraphs in columns across the photograph. */
.shot__meta .live{display:inline-flex;align-items:center;gap:6px;font:700 10.5px var(--sans);
letter-spacing:.10em;text-transform:uppercase;background:oklch(0.55 0.19 25);
color:oklch(0.99 0.02 25);padding:4px 8px;border-radius:99px;flex:none}
.shot__meta .live i{width:6px;height:6px;border-radius:99px;background:currentColor}
/* the same port's next view, one press away */
/* The small picture and the button it folds into share one corner. */
.pipwrap{position:absolute;right:11px;z-index:3;display:flex;
align-items:flex-end;gap:7px;bottom:11px}
@media(max-width:619px){.pipwrap{bottom:auto;top:11px}}
.pip{position:relative;width:clamp(104px,21vw,168px);
border:0;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
background:var(--sea-deep);
box-shadow:0 12px 30px -12px oklch(0.17 0.03 220/.85),0 0 0 2px oklch(0.97 0.011 82/.65)}
.pip:hover{box-shadow:0 16px 34px -12px oklch(0.17 0.03 220/.9),
0 0 0 2px oklch(0.97 0.011 82/.95)}
.pip:active{transform:scale(.97)}
/* height:auto is not the default here: the img element's height attribute is
a presentational hint, and without this it wins over aspect-ratio and the
thumbnail stands 180px tall inside a 197px picture. */
.pip img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
background:var(--sea-deep)}
.pip__l{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;color:var(--foam);
background:linear-gradient(transparent,oklch(0.15 0.03 222/.92));
font:700 11px var(--sans);text-align:left;line-height:1.3}
.pip__l small{display:block;font-weight:500;font-size:10px;opacity:.84}
/* Folded away, the cameras are still one press apart - the button that hides
the picture is not the button that stops you looking at the other one. */
.pip__min{position:absolute;top:-9px;right:-9px;width:26px;height:26px;
border-radius:999px;border:1px solid oklch(0.99 0.01 82/.28);
background:oklch(0.17 0.03 220/.92);color:var(--foam);cursor:pointer;
display:grid;place-items:center;padding:0;z-index:2}
.pip__min::before{content:"";position:absolute;left:50%;top:50%;width:44px;
height:44px;transform:translate(-50%,-50%)}
.pip__min:hover{background:oklch(0.17 0.03 220/1)}
/* display on the class outranks the hidden attribute, so the fold button
showed beside the picture it replaces. */
.pip__dot[hidden],.pip__min[hidden],.pip[hidden]{display:none}
.pip__dot{display:inline-flex;align-items:center;gap:6px;min-height:38px;
padding:0 13px;border-radius:999px;border:1px solid oklch(0.99 0.01 82/.26);
background:oklch(0.17 0.03 220/.88);color:var(--foam);cursor:pointer;
font:700 12px var(--sans);backdrop-filter:blur(6px);position:relative}
.pip__dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
transform:translateY(-50%)}
.pip__dot:hover{background:oklch(0.17 0.03 220/1)}
.pip__dot:active{transform:scale(.97)}
/* The sailings where the picture would be, on a line where the picture
answers nothing. The day is the page: one strip names it, the boats of
that day sit under it in time order both ways, and the only thing a tap
adds is the ticket card - 300px on a desktop, a sheet at the foot of a
phone. */
.sails{display:grid;gap:8px;align-content:start;min-width:0}
.sails__day{display:flex;align-items:center;gap:4px}
.sails__day b{font:700 15px var(--sans);min-width:7.5em;text-align:center;
font-variant-numeric:tabular-nums}
.sails__step{width:44px;height:44px;border-radius:999px;border:1px solid var(--rule);
background:var(--foam);font-size:22px;line-height:1;cursor:pointer;color:var(--ink);
transition:background .15s var(--ease)}
.sails__step:hover{background:var(--bg)}
.sails__step:active{transform:scale(.97)}
.sails__step:disabled{opacity:.35;cursor:default;transform:none}
.sails__hint,.sails__none{margin:-2px 0 0;max-width:none;font-size:13px;color:var(--muted)}
.sails__note{margin:0;max-width:none;font-size:13.5px;line-height:1.45;color:oklch(0.40 0.09 60);
background:oklch(0.95 0.05 78);border:1px solid oklch(0.87 0.08 78);border-radius:12px;
padding:8px 12px}
.sails__j{background:var(--foam);border:1px solid var(--rule);border-radius:var(--r);
padding:10px 14px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.sails__j:not(.sails__j--gone):hover{border-color:var(--muted)}
.sails__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;
align-items:center;min-height:44px;cursor:pointer;list-style:none;border-radius:8px}
.sails__top::-webkit-details-marker{display:none}
.sails__top:focus-visible{outline:2px solid var(--sea);outline-offset:4px}
.sails__t{font:800 23px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sails__to{min-width:0}
.sails__to b{display:block;font-weight:700;font-size:15px;line-height:1.2}
.sails__to .arrow{margin:0 5px;opacity:.6}
.sails__to small{display:block;font-size:12.5px;color:var(--muted)}
/* The wind at the pier, one line under the calls, so the day reads at a glance. */
.sails__chip{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:12px;
color:var(--muted);font-variant-numeric:tabular-nums}
.sails__chip i{width:10px;height:10px;display:inline-grid;place-items:center;
transform:rotate(var(--r,0deg))}
.sails__chip i::before{content:"";width:0;height:0;border-left:4px solid transparent;
border-right:4px solid transparent;border-bottom:9px solid var(--sea)}
.sails__j--gone .sails__chip{display:none}
.sails__arr{text-align:right;font-variant-numeric:tabular-nums}
.sails__arr b{display:block;font:700 17px/1 var(--sans)}
.sails__arr small{font-size:12px;color:var(--muted)}
.sails__j--gone{opacity:.5}
.sails__j--gone .sails__top{cursor:default}
.sails__j--on{border-color:var(--tile-ink);background:var(--bg)}
.sails__j--on:hover{border-color:var(--tile-ink)}
.sails__j--on .sails__t{color:var(--tile-ink)}
.sails__rail{list-style:none;margin:8px 0 2px;padding:0 0 0 6px}
.sails__rail li{position:relative;padding:5px 0 5px 18px;font-size:14px}
.sails__rail li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:10px;
border-radius:99px;background:var(--sea)}
.sails__rail li::after{content:"";position:absolute;left:4px;top:21px;bottom:-6px;width:2px;
background:var(--rule)}
.sails__rail li:last-child::after{display:none}
.sails__rail b{font-variant-numeric:tabular-nums;margin-right:8px}
/* The card: which boat, what it costs, where it calls. It slides in from the
right on a desktop, up from the foot of a phone, and the list keeps its
room either way - the grid holds a 440px column open under it. */
.sails__side{display:grid;gap:10px;align-content:start}
.sails__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.sails__ht{font:800 30px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sails__head>span{min-width:0}
.sails__head>span b{display:block;font-weight:700;font-size:15px;line-height:1.2}
.sails__head>span small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
font-variant-numeric:tabular-nums}
.sails__x{width:40px;height:40px;border:0;border-radius:999px;background:var(--foam);
color:var(--ink);font-size:22px;line-height:1;cursor:pointer;flex:none;
display:grid;place-items:center}
.sails__x:hover{background:var(--rule)}
.sails__x:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.sails__cross{padding-top:10px;border-top:1px solid var(--rule);display:grid;gap:8px}
.sails__cross .sails__rail{margin:0}
.sails__cross .sails__note{margin-top:4px}
.party__ask{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
/* The forecast at the pier: three lines, a lamp, and whose word it is. */
.sails__wx{padding-top:10px;border-top:1px solid var(--rule);display:grid;gap:8px}
.sails__wxg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;
align-items:center;font-size:14px}
.sails__wxg span{color:var(--muted)}
.sails__wxg b{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sails__wxg i{width:22px;height:22px;display:grid;place-items:center;font-style:normal;
color:var(--muted);font-size:13px}
.sails__wxa{width:22px;height:22px;display:grid;place-items:center;
transition:transform .3s var(--ease)}
.sails__wxa::before{content:"";width:0;height:0;border-left:6px solid transparent;
border-right:6px solid transparent;border-bottom:15px solid var(--sea)}
.sails__ok{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
align-items:start;padding:8px 10px;border-radius:10px;font-size:13.5px;line-height:1.45;
background:var(--foam)}
.sails__ok b{display:block;font-weight:700}
.sails__lamp{width:12px;height:12px;border-radius:99px;margin-top:5px;background:var(--muted)}
.sails__wx[data-ok=go] .sails__ok{background:oklch(0.94 0.04 152)}
.sails__wx[data-ok=go] .sails__lamp{background:var(--go)}
.sails__wx[data-ok=watch] .sails__ok{background:oklch(0.95 0.05 78)}
.sails__wx[data-ok=watch] .sails__lamp{background:var(--warn)}
.sails__wx[data-ok=no] .sails__ok{background:oklch(0.95 0.04 25)}
.sails__wx[data-ok=no] .sails__lamp{background:oklch(0.55 0.18 25)}
.sails__src{margin:0;font-size:11.5px;color:var(--muted)}
.stage--sails .stage__side{position:fixed;z-index:40;background:var(--bg);overflow:auto;
overscroll-behavior:contain;padding:16px 18px 20px;box-sizing:border-box;
transition:transform .32s cubic-bezier(.23,1,.32,1),visibility 0s}
.stage--sails:not([data-sails-dep]) .stage__side{visibility:hidden;
transition:transform .2s ease-in,visibility 0s .2s}
@media(min-width:940px){
.stage--sails .stage__g{grid-template-columns:minmax(0,1fr) 440px;align-items:start}
.stage--sails:not([data-sails-dep]) .stage__g{grid-template-columns:minmax(0,1fr)}
.stage--sails .stage__side{top:0;right:0;bottom:0;width:min(100%,440px);height:auto;min-height:0;
border-left:1px solid var(--rule);box-shadow:-24px 0 60px -30px oklch(0 0 0/.35)}
.stage--sails:not([data-sails-dep]) .stage__side{transform:translateX(104%)}
.stage--sails .party{flex-direction:column;align-items:stretch;gap:8px}
.stage--sails .party__buy{white-space:normal}
}
@media(min-width:940px) and (min-height:680px){
.stage--sails{min-height:0}
.stage--sails .stage__g{flex:0 0 auto}
.stage--sails>.wrap{max-width:1440px}
}
@media(max-width:939px){
/* On a phone the card is a sheet at the foot of the screen, over the list. */
.stage--sails .stage__side{left:0;right:0;bottom:0;max-height:88svh;
border-radius:18px 18px 0 0;border-top:1px solid var(--rule);
box-shadow:0 -10px 30px oklch(0 0 0/.18)}
.stage--sails .stage__side{transition-duration:.45s;
transition-timing-function:cubic-bezier(.32,.72,0,1)}
.stage--sails:not([data-sails-dep]) .stage__side{transform:translateY(104%)}
.stage--sails[data-sails-dep] .sails{padding-bottom:240px}
}
@media(prefers-reduced-motion:reduce){
.stage--sails .stage__side{transition:opacity .15s,visibility 0s;transform:none!important}
.stage--sails:not([data-sails-dep]) .stage__side{opacity:0}
}
/* the column beside the picture */
.stage__side{display:grid;gap:10px;align-content:start;min-width:0}
.scard{background:var(--foam);border:1px solid var(--rule);border-radius:var(--r);
padding:13px 15px}
.scard__k{font:700 10.5px var(--sans);letter-spacing:.11em;text-transform:uppercase;
color:var(--muted)}
/* Left on paper on purpose. The card is the site's own two-up lead, whose type
colours are all ink; on a dark ground every one of them went invisible. */
.scard--next .head__leadlabel{margin:0 0 8px}
.scard--next .leg__time{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.scard--next .head__lead--two{gap:10px}
.scard--next .leg__to{font-size:.92rem}
/* Two full-width rows, a price block and a dashed memo line ran this card to
290px beside a picture. The same four controls side by side take 140. */
.party__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;
margin-top:8px}
.party__row{display:grid;gap:3px;min-width:0}
.party__row>span:first-child{font-size:12.5px;color:var(--muted);line-height:1.25}
/* In a 300px column the total, "Change" and the ticket do not fit on one
line, and none of the three will shrink - so the ticket takes a line of its
own rather than sitting on top of the word behind it. */
.party{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;
flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--hair)}
.party .party__buy{flex:0 1 auto}
.party__n{font:800 23px var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.party__l{display:block;font-size:12px;color:var(--muted);margin-top:1px;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.party__sum{min-width:0;flex:1 1 0}
.party__top{display:flex;align-items:baseline;gap:10px;min-width:0}
/* Changing the vehicle or the cabin is the rarer half of this card, so it is a
line of text beside the party it changes rather than a button the size of
the ticket. The hit area is still a thumb's worth. */
.party__b{position:relative;border:0;background:none;padding:2px 0;flex:none;
font:600 12.5px var(--sans);color:var(--sea);cursor:pointer;
text-decoration:underline;text-underline-offset:3px}
.party__b::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;
transform:translateY(-50%);height:44px}
.party__b:hover{color:var(--ink)}
/* The ticket, where the price is. Whoever has just counted the party and read
the total is one step from the operator's own checkout, and that step was
two presses away inside a sheet about whether booking is needed at all. */
.party__buy{display:flex;align-items:center;justify-content:center;gap:8px;
flex:none;min-height:46px;padding:0 16px;border-radius:12px;
background:var(--tile-ink);color:var(--bg);text-decoration:none;text-align:center;
font:600 14.5px var(--sans);white-space:nowrap;transition:background .15s var(--ease)}
.party__buy::after{content:"\2197";font-weight:700;opacity:.75;font-size:13px}
.party__buy:hover{background:var(--sea-deep);color:var(--bg)}
.party__buy:active{transform:translateY(1px)}
/* The memo rides on the card's own label rather than adding a line under it. */
.scard--party .scard__k{display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap}
.party__memo{font:600 10.5px var(--sans);letter-spacing:.06em;color:var(--muted);
text-transform:none}
.party__memo button{border:0;background:none;padding:0;font:inherit;cursor:pointer;
color:var(--muted);text-decoration:underline;position:relative}
.party__memo button::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;
height:44px;transform:translateY(-50%)}
.stage__side .notice{margin:0}
/* what is wrong today, above everything
A headline and one sentence; the terms, the operator's own wording and the
link to it are behind the press, where they cost the picture no height. */
.alerts{display:flex;gap:8px;margin-top:11px;align-items:stretch;min-width:0}
.alerts .alert{flex:1;min-width:0}
.alert__more{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
padding:0 12px;border:1px solid var(--hair);border-radius:var(--r);
background:var(--foam);color:var(--sea);cursor:pointer;white-space:nowrap;
font:600 12.5px var(--sans);transition:background .16s var(--ease)}
.alert__more::after{content:"\2192";font:700 15px var(--sans);opacity:.6}
.alert__more:hover{background:var(--surface)}
.alert__more:hover::after{opacity:1}
.alert{display:grid;gap:1px;text-align:left;min-width:0;padding:8px 34px 9px 13px;
border:1px solid var(--hair);border-left:3px solid var(--warn,oklch(0.63 0.13 62));
border-radius:var(--r);background:var(--foam);cursor:pointer;color:var(--ink);
position:relative;transition:background .16s var(--ease)}
.alert--stop{border-left-color:oklch(0.55 0.19 25)}
.alert:hover{background:var(--surface)}
.alert__k{font:700 10px var(--sans);letter-spacing:.11em;text-transform:uppercase;
color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert__t{font:600 14.5px/1.3 var(--serif);letter-spacing:-.01em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.alert__s{font:500 12.5px/1.35 var(--sans);color:var(--muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.alert::after{content:"\2192";position:absolute;right:12px;top:50%;
transform:translateY(-50%);color:var(--sea);font:700 15px var(--sans);opacity:.55}
.alert:hover::after{opacity:1}
/* the footnotes, on one line
The duration, the note about the queue, who published the timetable and the
way back were four paragraphs under the answers, and they were what pushed
this page past one screen. Nothing here is the answer to anything; they are
a footnote, so they read as one. */
/* On a line page every answer is in a sheet, so the main element holds only
dialogs - an empty block carrying the page's padding, between the stage and
the footer. */
main.wrap:not(:has(> :not(dialog):not(script))){padding-top:0;padding-bottom:0}
.stage__foot{margin:9px 0 0;display:grid;gap:3px 26px}
@media(min-width:940px){
.stage__foot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
.stage__fine{text-align:right}
}
.stage__foot .lede{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.stage__fine{margin:0;font-size:12px;color:var(--muted);line-height:1.45;opacity:.9}
.stage__foot a{color:var(--sea)}
.stage__back{white-space:nowrap;font-weight:600}
/* the answers, on the same screen as the picture
Four cards under the photograph meant the page scrolled to reach the
questions it exists to answer. Each is a question with a one-line answer
and a sheet behind it, so each is one line. */
.answers{display:grid;gap:8px;margin-top:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.answers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:940px){.answers{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
.ans__b{display:grid;gap:1px;text-align:left;min-width:0;min-height:56px;
padding:9px 13px;border:1px solid var(--hair);border-radius:var(--r);
background:var(--foam);cursor:pointer;color:var(--ink);position:relative;
transition:background .16s var(--ease),border-color .16s var(--ease)}
.ans__b:hover{background:var(--surface);border-color:var(--rule)}
.ans__b:active{transform:scale(.995)}
.ans__b b{font:600 14px var(--serif);letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ans__b small{font:500 13px/1.3 var(--sans);color:var(--muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The arrow is the affordance and costs no line of its own. */
.ans__b::after{content:"\2192";position:absolute;right:12px;top:50%;
transform:translateY(-50%);color:var(--sea);font:700 15px var(--sans);
opacity:.55;transition:opacity .16s var(--ease),transform .16s var(--ease)}
.ans__b:hover::after{opacity:1;transform:translateY(-50%) translateX(2px)}
.ans__b b,.ans__b small{padding-right:20px}
/* the port list and the vessel links, inside their sheet */
.sheet__ans{font:800 34px var(--sans);letter-spacing:-.035em;color:var(--ink);
margin:0 0 6px}
.sheet__why{font-size:15.5px;margin:0 0 14px}
.sheet__ports{display:grid;gap:6px;margin:0}
.sheet__ports a,.sheet__ports span{display:block;font:800 21px var(--sans);
letter-spacing:-.028em;color:var(--ink);text-decoration:none;padding:7px 0;
min-height:44px}
.sheet__ports a small,.sheet__ports span small{display:block;
font:400 13px var(--sans);color:var(--muted);letter-spacing:0}
.sheet__ports a:hover{color:var(--sea)}
.sheet__cap{font:700 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin:16px 0 6px;padding-top:12px;
border-top:1px solid var(--hair)}
/* the two long lists, out of the page and behind a press */
.sheetbig{border:0;padding:0;border-radius:18px;max-width:760px;width:calc(100% - 28px);
max-height:86vh;background:var(--foam);color:var(--ink);box-shadow:var(--paper)}
.sheetbig::backdrop{background:oklch(0.265 0.018 220/.46)}
.sheetbig__b{padding:20px 20px 6px;overflow:auto;max-height:calc(86vh - 76px);
overscroll-behavior:contain}
.sheetbig__h{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.02em;
margin:4px 0 12px}
.sheetbig__f{padding:12px 20px 16px;border-top:1px solid var(--hair);background:var(--foam)}
.sheetbig__x{width:100%;min-height:48px;border:0;border-radius:12px;background:var(--sea-deep);
color:var(--foam);font:700 16px var(--sans);cursor:pointer}
/* The box and the switch that changes its answer, on one line where there is
room and stacked where there is not. Apart, the switch reads as a stray
control at the far end of the list; together they are one question. */
/* The count and the car/foot switch sit together, on the list they describe. */
/* Two questions of the same kind, asked on one line. */
.asks{display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;margin:12px 0 0}
.asks .veh{margin:0}
/* Which day. The browser's own date control - every phone has a good one and
a hand-built calendar would be a worse version of it. */
/* Two of them on the front page: the day out, and the day back if there is
one. One row of the card, halved by a hairline - two dates are one question
and were reading as two more buttons. */
/* The return cell is not removed from the row, it is closed: the column it
sits in goes to nothing and the row clips it, so the card keeps its height
and the change reads as one move rather than as a relayout. */
.dates{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
transition:grid-template-columns .24s var(--ease)}
[data-way="one"] .dates{grid-template-columns:1fr 0fr}
.dates .when{min-width:0}
.dates .when--back{transition:opacity .16s var(--ease)}
[data-way="one"] .dates .when--back{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.dates,.dates .when--back{transition:none}}
.dates .when{display:block;min-height:62px;padding:9px 14px;border:0;
border-radius:0;background:transparent;box-shadow:none;position:relative}
.dates .when+.when{border-left:1px solid var(--seam)}
.dates .when:hover{background:oklch(0.930 0.020 82/.45)}
.dates .when__t{display:block;font:600 .68rem/1 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.dates .when__v{display:block;position:relative;min-height:28px}
.dates .when__i{font:600 1.02rem/1.35 var(--sans);width:100%;min-height:28px;
color:var(--ink);text-align:left}
/* An empty date input draws nothing at all on a phone, so the cell read as a
dead box. The input keeps the tap; the word says what it is for. */
.when__ph{position:absolute;inset:0;display:flex;align-items:center;
font:500 1.02rem/1.35 var(--sans);color:var(--muted);pointer-events:none}
.has-cal .dates .when--out .when__ph,
.has-cal .dates .when--set .when__ph{color:var(--ink);font-weight:600}
/* With the calendar in play both cells print a date of our own writing, and
the input underneath is the value rather than the display. Without it, only
the optional one hides its input: the travelling date always has a value
and blanking that left the cell empty. */
.when--back.when--set .when__ph{display:none}
.when--back:not(.when--set) .when__i{opacity:0}
.has-cal .dates .when__i{opacity:0}
/* The bar's own cell prints the date in the page's language, so the
browser's 06.09.2026. underneath it has to go - it was showing through
the wording and reading as two dates in one field. */
.js .whenbar .when__i{opacity:0}
.whenbar .when__v{position:relative;display:inline-flex;align-items:center;
min-height:22px;min-width:7.5em}
.whenbar .when__ph{font:600 .9rem/1.2 var(--sans);color:var(--ink);
white-space:nowrap}
.has-cal .dates .when--back.when--set .when__ph{display:flex}
.dates .when__x{position:absolute;top:6px;right:6px;min-width:30px;min-height:30px;
font-size:1.1rem}
/* It used to be transparent until hovered, which on a phone means never: the
date read as printed text and people did not know they could change it. It
is a field now, drawn as one, whatever the pointer is doing. */
.when{position:relative;display:inline-flex;align-items:center;gap:8px;
min-height:48px;cursor:pointer;
padding:6px 14px;border-radius:999px;border:1px solid var(--rule);
background:oklch(1 0 0/.55);font:500 .9rem/1.2 var(--sans);color:var(--ink)}
.when:hover{background:oklch(1 0 0/.85);border-color:var(--sea-deep)}
.when__t{color:oklch(0.355 0.026 218);flex:none}
.when__i{border:0;background:transparent;font:600 .9rem/1.2 var(--sans);
color:var(--ink);min-height:36px;padding:0;flex:1 1 auto;min-width:0;
cursor:pointer}
.when__i::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}
.when:has(:focus-visible){outline:2px solid var(--tile);outline-offset:3px}
/* An optional date needs a way back to not having one. */
.when__x{flex:none;border:0;background:transparent;color:var(--muted);
cursor:pointer;font-size:1.25rem;line-height:1;min-width:32px;min-height:32px}
.when__x:hover{color:var(--ink)}
/* An empty return date shows nothing at all in some browsers, so the label is
all there is to tap: give it the room to be tapped. */
@media (max-width:400px){.dates .when{padding:8px 11px}
.dates .when__t{letter-spacing:.06em}}
/* One calendar for both dates: a sheet on a phone, a card on a desk. Every
range picker worth borrowing is forty kilobytes and arrives with its own
typography; this one is the page's. */
/* display on a dialog is the whole ballgame: an author rule beats the browser's
own dialog:not([open]){display:none}, so a flex dialog is a dialog that is
always on the page. It shipped open, empty and on top of the form. */
.cal{display:none}
.cal[open]{border:0;padding:0;background:var(--foam);color:var(--ink);
width:min(430px,100%);max-width:100%;max-height:92svh;
margin:auto auto 0;border-radius:18px 18px 0 0;
box-shadow:0 -20px 60px -24px oklch(0.265 0.018 220/.5);
display:flex;flex-direction:column;overflow:hidden}
@media(min-width:700px){.cal[open]{margin:auto;border-radius:18px;max-height:88svh}}
.cal::backdrop{background:oklch(0.265 0.018 220/.5)}
.cal__hd{display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:14px 8px 8px 18px}
.cal__h{margin:0;font:500 1.22rem/1.2 var(--serif)}
/* What has been answered, and which half the next tap fills. */
.cal__sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 10px}
.cal__c{display:block;padding:8px 12px;border-radius:12px;cursor:pointer;
border:1px solid var(--rule);background:transparent}
.cal__c b{display:block;font:600 .66rem/1 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--muted)}
.cal__c i{display:block;margin-top:4px;font:600 1rem/1.2 var(--sans);
font-style:normal;min-height:1.2em}
.cal__c i.cal--soft{font-weight:500;color:var(--muted)}
.cal__c.cal--now{border-color:var(--sea-deep);background:oklch(1 0 0/.6);
box-shadow:inset 0 0 0 1px var(--sea-deep)}
.cal__wk{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
padding:6px 12px;border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule);background:var(--surface);
font:600 .7rem/1 var(--sans);color:var(--muted);text-align:center;
text-transform:uppercase}
.cal__scroll{flex:1 1 auto;min-height:180px;overflow-y:auto;
overscroll-behavior:contain;padding:4px 12px 12px;
-webkit-overflow-scrolling:touch}
/* On a laptop window turned short there is no room for a serif title and two
summary boxes above the month; the month is what the sheet is for. */
@media (max-height:620px){
.cal__hd{padding:9px 8px 4px 16px}
.cal__h{font-size:1.05rem}
.cal__sum{padding:0 14px 8px}
.cal__c{padding:6px 10px}
.cal__ft{padding:8px 14px}
.cal__go{min-height:44px}
}
.cal__m{padding-top:12px}
.cal__mt{margin:0 0 6px 2px;font:600 .95rem/1.2 var(--sans);color:var(--ink)}
.cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__d{border:0;background:transparent;color:var(--ink);cursor:pointer;
height:44px;border-radius:11px;
font:500 .95rem/1 var(--sans);font-variant-numeric:tabular-nums}
.cal__d:hover:not(:disabled){background:var(--surface)}
.cal__d:disabled{color:oklch(0.470 0.022 218/.4);cursor:default}
/* The range: its two ends filled, the days between them tinted. */
.cal__d.cal--in{background:oklch(0.810 0.096 52/.30);border-radius:0}
.cal__d.cal--a,.cal__d.cal--b{background:var(--sea-deep);color:var(--foam);
font-weight:700}
/* The plain hover rule carries a pseudo-class more than the chosen-day rule
does, so it won on specificity: cream type on pale sand, the moment the
pointer stayed where it had just clicked. The chosen day gets its own. */
.cal__d.cal--a:hover:not(:disabled),
.cal__d.cal--b:hover:not(:disabled){background:oklch(0.375 0.058 218);
color:var(--foam)}
.cal__d.cal--a{border-radius:11px 0 0 11px}
.cal__d.cal--b{border-radius:0 11px 11px 0}
/* One day chosen and no return yet is not the open end of anything. */
.cal__d.cal--one{border-radius:11px}
.cal__ft{display:flex;align-items:center;gap:10px;padding:10px 16px;
padding-bottom:calc(10px + env(safe-area-inset-bottom));
border-top:1px solid var(--rule);background:var(--foam)}
.cal__one{flex:0 0 auto;min-height:46px;padding:0 14px;border:0;
background:transparent;color:var(--tile-ink);cursor:pointer;
font:600 .92rem/1 var(--sans);text-decoration:underline;
text-underline-offset:3px}
.cal__go{flex:1 1 auto;min-height:50px;border:0;border-radius:var(--r);
background:var(--sea-deep);color:var(--foam);cursor:pointer;
font:700 1.02rem/1 var(--sans)}
.cal__go:hover{background:var(--ink)}
/* With the calendar in play the native fields are the value, not the control. */
.has-cal .dates .when__i{pointer-events:none}
/* The day control on the heading's own line: which day the timetable is for
belongs to the timetable, not to a third strip of chrome above it. It wraps
under the heading on a phone rather than squeezing it. */
.dayhead{display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:6px 18px}
.dayhead h2{margin-bottom:6px}
.dayhead .whenbar{background:none;border:0;flex:1 1 auto}
.dayhead .whenbar .wrap{padding:0;justify-content:flex-start;
max-width:none;margin:0}
@media(min-width:700px){.dayhead .whenbar .wrap{justify-content:flex-end}}
/* Quiet on today, and still loud on any other day - that announcement is the
whole reason the control exists. */
.dayhead .whenbar:not(.whenbar--today){background:var(--tile-lite);
border-radius:10px}
.dayhead .whenbar:not(.whenbar--today) .wrap{padding:6px 10px}
/* Says on every page that these times are for a day that is not today. A
choice made on the front page must never quietly rewrite the departures. */
.whenbar{background:var(--tile-lite);color:oklch(0.265 0.018 220);
font:600 .9rem/1.4 var(--sans);border-bottom:1px solid transparent;
transition:background .18s var(--ease)}
.whenbar .wrap{display:flex;flex-wrap:wrap;align-items:center;
justify-content:center;gap:4px 10px;padding-top:8px;padding-bottom:8px}
/* On today it is a control, not an announcement. */
.whenbar--today{background:var(--foam);border-bottom-color:var(--rule)}
.whenbar__s{width:40px;height:40px;flex:none;border:1px solid var(--rule);
border-radius:999px;background:var(--foam);color:var(--sea-deep);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center}
/* Both buttons carry the same glyph; the one that goes back turns it round.
Matching on the step value alone catches the crossing page's per-direction
buttons too, which were shipping two arrows pointing the same way. */
[data-when-step="-1"] svg,[data-way-step="-1"] svg{transform:rotate(180deg)}
.whenbar__s:hover:not(:disabled){background:var(--sea-deep);color:var(--foam);
border-color:var(--sea-deep)}
.whenbar__s:disabled{opacity:.35;cursor:default}
.whenbar .when{background:var(--foam);border-color:var(--rule)}
.whenbar__n{margin:0;flex:0 1 auto;white-space:nowrap}
/* "Showing Wednesday, 30 September" repeated the date in the field beside it
and pushed "Back to today" onto a line of its own (Gal, 29 Sept). The bar's
colour already says it is not today; the words stay for screen readers. */
.whenbar__n>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.whenbar .wrap{flex-wrap:nowrap}
@media(max-width:560px){.whenbar .wrap{gap:6px}.whenbar .whenbar__s{width:34px;height:34px;flex:none}
.whenbar .when{padding:6px 12px;gap:0}.whenbar .when__v{min-width:0;width:6.4em}.whenbar .when__i{width:100%;min-width:0}
@media(max-width:360px){.whenbar .wrap{padding-left:4px;padding-right:4px;gap:4px}.whenbar .when{padding:6px 8px}}
.whenbar:not(.whenbar--today) .when__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.whenbar__b{font:600 .9rem/1 var(--sans);border:0;background:transparent;
color:oklch(0.34 0.11 38);text-decoration:underline;text-underline-offset:3px;
cursor:pointer;min-height:44px;padding:0 6px}
/* The crossings most people are here for, one tap from the question. Chips
rather than a list: they are shortcuts past the question, not an answer to
it, and the row of them fills the screen the band now owns. */
/* min-width:0 all the way down, or the row of chips refuses to be narrower
than its widest chip and takes the whole page sideways with it. */
.head__title,.head__lead{min-width:0}
.quick{margin:0 0 22px;min-width:0}
.quick__l{margin:0 0 9px;font:400 .95rem/1.4 var(--sans);
color:oklch(0.355 0.026 218)}
/* One line that scrolls, not six that stack: wrapped, these crossings were
taller than the question they are shortcuts past. */
.quick__row{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;
padding-bottom:2px;-webkit-overflow-scrolling:touch;
mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.quick__row::-webkit-scrollbar{display:none}
.quick a{flex:0 0 auto;white-space:nowrap;
display:inline-flex;align-items:center;gap:6px;min-height:44px;
padding:9px 14px;border-radius:999px;background:var(--surface);
border:1px solid var(--rule);color:var(--ink);text-decoration:none;
font:600 .88rem/1.2 var(--sans);letter-spacing:-.005em;
transition:background .15s var(--ease),border-color .15s var(--ease)}
.quick a:hover{background:var(--sea-deep);border-color:var(--sea-deep);color:var(--foam)}
.quick .arrow{color:var(--tile-ink);font-weight:400}
.quick a:hover .arrow{color:var(--tile-lite)}
/* Once the box has a place in it, the strip of coasts is the answer and the
shortcuts are in its way. */
.quick[hidden]{display:none}
/* Where you were last time, offered once, at the top of the list. */
.recent{margin:0 0 10px}
/* This was filled in --sea-deep on --foam: the exact pairing the site uses for
"this is the current one" on the language switcher and the section menu. A
personal shortcut wearing the active-state colours read as a stray control -
the owner pointed at it and asked what it was. An outline pill, the same one
the crossing shortcuts wear, says shortcut rather than status. */
.recent a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
padding:9px 16px;border-radius:999px;background:var(--foam);
border:1px solid var(--rule);color:var(--ink);
font:600 .92rem/1 var(--sans);text-decoration:none;
transition:border-color .15s var(--ease),background .15s var(--ease)}
.recent a:hover{border-color:var(--sea);background:var(--surface)}
.listhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:10px 16px;margin:0 0 4px}
.listhead .count-line{margin:0}
.listhead .veh{margin:0}
/* The band's next-departure card names one line, and that line has a page. */
.lead__link{display:block;text-decoration:none;color:inherit;border-radius:12px}
.lead__link:hover .leg__time{text-decoration:underline;text-underline-offset:5px}
.lead__link:focus-visible{outline:2px solid var(--tile);outline-offset:4px}
@keyframes hs-wv{to{transform:translateX(-50%)}}
@keyframes hs-bob{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-6%) rotate(.8deg)}}
/* Phone: a port field opens as a sheet over the whole screen - the field on
top, the list filling the rest - instead of a list hanging off the bottom
of the first screen and dragging the page after it (Gal, 28 Sept). */
.pick__back{display:none}
@media(max-width:999px){
html:has(.pick--sheet){overflow:hidden}
.pick.pick--sheet{position:fixed;inset:0;z-index:1000;margin:0;display:flex;flex-direction:column;
padding:14px 16px 0 60px!important;background:var(--foam,#fbfbfa);border:0}
.pick--sheet .pick__back{display:inline-flex;align-items:center;justify-content:center;position:absolute;
left:8px;top:12px;width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.pick--sheet .pick__i{font-size:1.1rem;min-height:32px}
.pick--sheet .pick__x{right:12px;top:18px;bottom:auto}
.pick--sheet .ac{position:static;flex:1;min-height:0;max-height:none;margin:12px -16px 0 -60px;
border:0;border-top:1px solid var(--rule);border-radius:0;box-shadow:none;padding:6px 10px 24px}
}
/* ── The NautiVia skin (Gal, 28 Sept) - port and line pages. Its tokens and
masthead moved to the v2 shell in styles_nv.py (30 Sept); what is left is
page furniture those pages' own redesigns replace. */
.skin-nv .kind{font-weight:700;letter-spacing:.04em}
/* Under the picture. */
.skin-nv main a{color:var(--nv-sea)}.skin-nv main a:hover{color:var(--nv-bs)}
/* Line page in the skin (Gal, 29 Sept): same move as the port page - the
camera stays the hero; the words, buttons and tabs take the homepage's
clothes. Dots, the +/- steppers and the "?" stay round: they are icons. */
.skin-nv .seg__b{font-family:var(--nv-font)}
.skin-nv .stage__k{font:800 12px/1.3 var(--nv-font);letter-spacing:.08em;color:var(--nv-bs)}
.skin-nv .stage__h{letter-spacing:-.03em;line-height:1.02}
/* NautiVia design language, v2 (Gal, 30 Sept 2026).
One file for the whole family: nautivia.eu, croatianferries.com, nautivia.app.
The canonical copy lives in nautivia-hub/design/; design/sync.sh copies it
(with fonts and images) into the other two repos. Edit it here, never there.
Taken from the Dribbble-style mock Gal picked: an airy Adriatic morning.
Pale sky pages, white rounded cards floating on it, one teal for action,
navy for words, painted coast illustrations, status told as soft pills. */
@font-face{font-family:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
src:url('/nv/fonts/pjs-latin.woff2') format('woff2-variations');
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}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
src:url('/nv/fonts/pjs-latin-ext.woff2') format('woff2-variations');
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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
/* words */
--nv-ink:#0f2a3d; /* headlines, primary text 15.2:1 on white */
--nv-ink-2:#3b5566; /* body 7.6:1 */
--nv-mute:#56707f; /* secondary, captions 4.5:1 on page */
/* action */
--nv-teal:#157f9c; /* primary button fill, white text 4.6:1 */
--nv-teal-ink:#0e6f8a; /* teal as text / links 5.7:1 */
--nv-teal-hi:#0f6f89; /* hover */
--nv-teal-soft:#e2f3f8; /* secondary buttons, selected chips, icon wells */
/* surfaces */
--nv-sky:#e3f1f8; /* hero sky, top of pages */
--nv-page:#f4f9fc; /* page background */
--nv-card:#ffffff;
--nv-line:#e1ebf1; /* card borders, row rules */
--nv-field:#f7fafc; /* input wells */
/* status: dot, pill background, pill text */
--nv-ok:#2fa55c; --nv-ok-bg:#dff3e6; --nv-ok-ink:#1b6e3d;
--nv-warn:#e0a13a; --nv-warn-bg:#fbeccb; --nv-warn-ink:#7f5300;
--nv-bad:#df4a3c; --nv-bad-bg:#fbe1dd; --nv-bad-ink:#a3271c;
--nv-off:#9aabb6; --nv-off-bg:#edf2f5; --nv-off-ink:#56707f;
/* accent from the illustrations, used sparingly (a ferry stripe, a roof) */
--nv-roof:#e0703a;
/* shape */
--nv-r-card:20px; --nv-r:14px; --nv-r-sm:10px; --nv-r-pill:999px;
--nv-shadow:0 1px 2px rgba(15,42,61,.05),0 8px 28px -6px rgba(15,42,61,.10);
--nv-shadow-hi:0 2px 4px rgba(15,42,61,.06),0 14px 36px -8px rgba(15,42,61,.18);
/* type */
--nv-font:'Jakarta',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--nv-h1:clamp(34px,5.4vw,68px); /* hero, weight 800, -0.03em */
--nv-h2:clamp(22px,2.2vw,28px); /* card titles, 800 */
--nv-h3:17px; /* row titles, 700 */
--nv-body:16px; --nv-small:14px; --nv-tiny:12.5px;
/* space */
--nv-gap:clamp(12px,1.6vw,20px); --nv-pad:clamp(16px,2vw,28px); --nv-max:1180px;
}
/* ---------- components (all prefixed nv-, so they can sit next to old CSS) ---------- */
.nv{font-family:var(--nv-font);color:var(--nv-ink);background:var(--nv-page);-webkit-font-smoothing:antialiased}
.nv-wrap{max-width:var(--nv-max);margin:0 auto;padding:0 var(--nv-pad)}
/* header: mark left, links, language + saved right; sits on the hero sky */
.nv-hd{display:flex;align-items:center;gap:28px;min-height:64px}
.nv-mark{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--nv-ink);text-decoration:none}
.nv-mark svg{width:26px;height:26px}
.nv-nav{display:flex;gap:26px}.nv-nav a{color:var(--nv-ink-2);text-decoration:none;font-weight:500;font-size:15px}
.nv-nav a:hover,.nv-nav a[aria-current]{color:var(--nv-ink)}
.nv-hd__end{margin-left:auto;display:flex;align-items:center;gap:18px}
/* hero: painted image, headline on the open sky */
.nv-hero{position:relative;background:var(--nv-sky) center/cover no-repeat}
.nv-h1{font-size:var(--nv-h1);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:0;color:var(--nv-ink)}
.nv-lead{font-size:clamp(16px,1.5vw,21px);font-weight:500;color:var(--nv-ink-2);margin:.5em 0 0;line-height:1.4}
/* card */
.nv-card{background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);padding:var(--nv-pad)}
.nv-card__h{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.nv-card__h h2,.nv-h2{font-size:var(--nv-h2);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15}
.nv-card__h .nv-meta{margin-left:auto}
.nv-meta{font-size:var(--nv-small);color:var(--nv-mute);font-weight:500}
/* buttons */
.nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--nv-r);border:0;
background:var(--nv-teal);color:#fff;font:600 16px/1 var(--nv-font);text-decoration:none;cursor:pointer;
box-shadow:0 6px 16px -6px rgba(21,127,156,.55);transition:background .15s,transform .15s}
.nv-btn:hover{background:var(--nv-teal-hi)}.nv-btn:active{transform:translateY(1px)}
.nv-btn--soft{background:var(--nv-teal-soft);color:var(--nv-teal-ink);box-shadow:none}.nv-btn--soft:hover{background:#d3ecf4}
.nv-btn--line{background:#fff;color:var(--nv-teal-ink);box-shadow:inset 0 0 0 1.5px var(--nv-teal)}.nv-btn--line:hover{background:var(--nv-teal-soft)}
.nv-btn svg{width:20px;height:20px;flex:none}
.nv-link{color:var(--nv-teal-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* segmented control: Vehicle | On foot, One way | Return */
.nv-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:var(--nv-r);background:var(--nv-field);border:1px solid var(--nv-line)}
.nv-seg>*{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:var(--nv-r-sm);border:0;background:none;
font:600 15px/1 var(--nv-font);color:var(--nv-ink-2);cursor:pointer}
.nv-seg>[aria-pressed=true],.nv-seg>[aria-selected=true],.nv-seg>:has(input:checked){background:var(--nv-teal);color:#fff;box-shadow:0 4px 12px -4px rgba(21,127,156,.6)}
/* fields: label above, icon well inside */
.nv-lbl{display:block;font-size:var(--nv-tiny);font-weight:600;color:var(--nv-mute);margin:0 0 6px}
.nv-field{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border:1px solid var(--nv-line);border-radius:var(--nv-r);background:#fff;
font:600 16px/1.2 var(--nv-font);color:var(--nv-ink)}
.nv-field:focus-within{border-color:var(--nv-teal);box-shadow:0 0 0 3px rgba(21,127,156,.18)}
.nv-field svg{width:20px;height:20px;color:var(--nv-mute);flex:none}
.nv-field input,.nv-field select{flex:1;min-width:0;border:0;background:none;font:inherit;color:inherit;outline:0}
.nv-field input::placeholder{color:var(--nv-mute);font-weight:500}
/* status pill + dot; shape is carried by the word, colour is a second channel */
.nv-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--nv-off);flex:none}
.nv-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--nv-r-pill);
font:700 12.5px/1 var(--nv-font);background:var(--nv-off-bg);color:var(--nv-off-ink);white-space:nowrap}
[data-s=clear] .nv-dot,[data-s=green] .nv-dot{background:var(--nv-ok)}
[data-s=clear] .nv-pill,[data-s=green] .nv-pill{background:var(--nv-ok-bg);color:var(--nv-ok-ink)}
[data-s=yellow] .nv-dot{background:var(--nv-warn)}[data-s=yellow] .nv-pill{background:var(--nv-warn-bg);color:var(--nv-warn-ink)}
[data-s=red] .nv-dot{background:var(--nv-bad)}[data-s=red] .nv-pill{background:var(--nv-bad-bg);color:var(--nv-bad-ink)}
/* list row: dot | name + note | pill | chevron */
.nv-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:14px 2px;border-top:1px solid var(--nv-line);
color:inherit;text-decoration:none}
.nv-row:first-of-type{border-top:0}
.nv-row b{font-weight:800;font-size:var(--nv-h3)}.nv-row small{font-weight:500;color:var(--nv-mute);font-size:14px;margin-left:6px}
.nv-row p{margin:2px 0 0;color:var(--nv-ink-2);font-size:14px}
.nv-row__end{display:grid;justify-items:end;gap:6px}
/* choice card: picture on top (or left on phones), title, one-line note */
.nv-choice{display:flex;flex-direction:column;border:1px solid var(--nv-line);border-radius:var(--nv-r);background:#fff;overflow:hidden;text-decoration:none;color:inherit;
transition:box-shadow .2s,transform .2s,border-color .2s}
.nv-choice:hover{box-shadow:var(--nv-shadow-hi);transform:translateY(-2px);border-color:#cfe2ea}
.nv-choice img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.nv-choice b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;padding:12px 18px 0}
.nv-choice span{display:block;color:var(--nv-mute);font-size:14.5px;padding:4px 18px 16px}
/* phone tab bar */
.nv-tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#fff;border-top:1px solid var(--nv-line);
padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px -16px rgba(15,42,61,.3)}
.nv-tabs a{display:grid;justify-items:center;gap:3px;padding:9px 0 8px;color:var(--nv-mute);text-decoration:none;font:600 11.5px/1 var(--nv-font)}
.nv-tabs a svg{width:24px;height:24px}
.nv-tabs a[aria-current]{color:var(--nv-teal-ink);box-shadow:inset 0 -3px 0 var(--nv-teal)}
:where(.nv) :focus-visible{outline:3px solid var(--nv-teal);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.nv *{transition:none!important;animation:none!important}}
/* ============================================================================
NautiVia v2 shell (croatianferries.com, 30 Sept 2026) - see nv/README.md
----------------------------------------------------------------------------
Every page, from build.py shell():
body.nv page ground, Jakarta, bottom padding for the bars
header.nv-top > .nv-hd mark (.nv-mark), desk nav (.nv-nav), language
(.nv-hd__end > details.nvl). Height --nv-hd-h.
footer.nv-ft brand + scope, nav, HAK note, byline
nav.nv-tabs phone tab bar (< 860px). Height --nv-tabs-h.
Hooks for page redesigns:
--nv-hd-h, --nv-tabs-h, --nv-tk-h what a first screen must subtract:
height: calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h))
--hdr old name for --nv-hd-h, kept for the old pages
anything fixed to the bottom sits at bottom: var(--nv-tabs-h)
.nv-card .nv-row .nv-pill .nv-dot .nv-seg .nv-field .nv-btn (nv.css)
The old tokens (--bg --ink --sea --tile --rule --sans --serif ...) are
re-pointed at v2 values below, so a page not yet redesigned already reads
as the family. Delete a mapping only when nothing uses the old name.
========================================================================== */
:root{
--nv-hd-h:56px;--nv-tabs-h:0px;--nv-tk-h:0px;
/* the old sheet's names, on v2 values */
--bg:var(--nv-page);--surface:#e8f3f8;--foam:#fff;--ink:var(--nv-ink);--muted:#4d6574;
--sea:var(--nv-teal-ink);--sea-deep:var(--nv-ink);--tile:var(--nv-teal);--tile-ink:var(--nv-teal-ink);
--tile-lite:#c4e6f0;--rule:#cfdde6;--hair:var(--nv-line);
--sans:var(--nv-font);--serif:var(--nv-font);--r:var(--nv-r);--paper:var(--nv-shadow);
--hdr:var(--nv-hd-h);
/* the 28 Sept skin's names (port and line pages) */
--nv-i:var(--nv-ink);--nv-m:var(--nv-mute);--nv-wh:#fff;--nv-bs:var(--nv-teal-ink);
--nv-sea:#1f5566;--nv-sea2:#194755;--nv-sky2:#eef6fa;
}
/* ponytail: the tab bar is off until Gal decides what it is for (5 Oct 2026);
restore this line and remove the display:none below to bring it back.
@media(max-width:859px){:root{--nv-tabs-h:calc(58px + env(safe-area-inset-bottom))}} */
@media(min-width:860px){:root{--nv-hd-h:64px}}
html:has(.tk:not([hidden])){--nv-tk-h:44px}
body.nv{margin:0;font:500 16px/1.55 var(--nv-font);color:var(--nv-ink);
background:linear-gradient(180deg,var(--nv-sky) 0,var(--nv-page) 560px) no-repeat,var(--nv-page);
padding-bottom:calc(var(--nv-tabs-h) + var(--nv-tk-h))}
@media(min-width:900px){body.nv{font-size:17px}}
.nv h1{font-weight:800;letter-spacing:-.03em;color:var(--nv-ink)}
.nv h2{font-weight:800;letter-spacing:-.02em;color:var(--nv-ink)}
.nv h3{font-weight:700;letter-spacing:-.01em}
.nv a{text-underline-offset:3px}
.nv :focus-visible{outline:3px solid var(--nv-teal);outline-offset:2px;border-radius:6px}
/* ---- header ---- */
.nv-top{position:relative;z-index:60}
.nv-hd{height:var(--nv-hd-h);min-height:0;gap:clamp(16px,2.6vw,36px)}
.nv-mark{min-height:44px;font-size:clamp(17px,1.5vw,20px);white-space:nowrap}
.nv-mark svg{width:1.3em;height:1.3em;color:var(--nv-teal-ink)}
.nv-mark em{font-style:normal;font-weight:500;color:var(--nv-ink-2)}
.nv-mark:hover{color:var(--nv-ink)}
.nv-mark{gap:.3em}.nv-mark a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:inherit;text-decoration:none}
@media (max-width:359px){.nv-mark{font-size:14px}.nv-mark a{gap:6px}} /* "Croatian Ferries by NautiVia" + language picker fit at 320 */
/* home hero: one voice of three, picked by html[data-hand] (app.js, ?mode=) */
.hh__v[data-v=car],.hh__v[data-v=foot],[data-hand=car] .hh__v[data-v=any],[data-hand=foot] .hh__v[data-v=any]{display:none}
[data-hand=car] .hh__v[data-v=car],[data-hand=foot] .hh__v[data-v=foot]{display:block}
.nv-nav a{display:inline-flex;align-items:center;min-height:44px;position:relative;white-space:nowrap}
.nv-nav a[aria-current]{font-weight:700}
.nv-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--nv-teal)}
.nv-nav a:hover{text-decoration:underline;text-decoration-thickness:1px}
@media(max-width:859px){.nv-nav{display:none}}
/* the language: flag and code closed, every language in its own name open */
.nvl{position:relative}
.nvl summary{list-style:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;cursor:pointer;
border-radius:var(--nv-r-pill);font:700 14px/1 var(--nv-font);letter-spacing:.02em;color:var(--nv-ink)}
.nvl summary::-webkit-details-marker{display:none}
.nvl summary:hover,.nvl[open] summary{background:rgba(255,255,255,.8)}
.nvl .flag{border-radius:2px;box-shadow:0 0 0 1px rgba(15,42,61,.14);flex:none}
.nvl__chev{transition:transform .2s}.nvl[open] .nvl__chev{transform:rotate(180deg)}
.nvl ul{position:absolute;right:0;top:calc(100% + 6px);z-index:70;margin:0;padding:6px;list-style:none;min-width:212px;
background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r);box-shadow:var(--nv-shadow-hi)}
.nvl li a{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--nv-r-sm);
text-decoration:none;color:var(--nv-ink);font:500 15px/1 var(--nv-font)}
.nvl li a:hover{background:var(--nv-teal-soft)}
.nvl li a[aria-current]{font-weight:800}
.nvl .cd{margin-left:auto;color:var(--nv-mute);font-size:12.5px;font-weight:600}
/* ---- phone tab bar ---- */
.nv-tabs{z-index:900;background:#fff}
.nv-tabs a{min-height:58px;align-content:center;padding:6px 2px 5px;min-width:0}
.nv-tabs a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-tabs a:focus-visible{outline-offset:-3px}
.nv-tabs{display:none!important}
@media print{.nv-tabs,.tk,.cc{display:none!important}}
/* ---- footer ---- */
.nv-ft{margin-top:56px;background:#fff;border-top:1px solid var(--nv-line);padding:34px 0 22px;color:var(--nv-ink-2);font-size:14.5px}
.nv-ft p{margin:0}
.nv-ft__top{display:grid;gap:18px}
.nv-ft__brand p{margin-top:10px;max-width:56ch;color:var(--nv-ink-2)}
.nv-ft__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.nv-ft__nav a{display:flex;align-items:center;min-height:44px;color:var(--nv-ink);font-weight:600;text-decoration:none}
.nv-ft__nav a:hover{color:var(--nv-teal-ink);text-decoration:underline}
.nv-ft__note{margin-top:18px!important;color:var(--nv-mute);font-size:13px;max-width:90ch}
.nv-ft__by{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:14px!important;padding-top:6px;border-top:1px solid var(--nv-line)}
.nv-ft__by a{display:inline-flex;align-items:center;min-height:44px;color:var(--nv-teal-ink);font-weight:600}
.nv-ft__by span{color:var(--nv-off)}
@media(min-width:860px){
.nv-ft__top{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.nv-ft__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---- cookie question: a card at the bottom of the screen (3 Oct: at the top it
sat on the headline). On a phone it lies over the tab bar and the first
screens subtract what it lifts above that (--nv-cc-x, from the height app.js
reports in --nv-cc-h), so it never covers the headline or the form's button.
On the desk it sits bottom right, clear of the question's line. ---- */
:root{--nv-cc-x:0px}
@media(max-width:859px){
html:has(.cc:not([hidden])){--nv-cc-x:max(0px,calc(var(--nv-cc-h,64px) + 16px + env(safe-area-inset-bottom) - var(--nv-tabs-h)))}
body.nv:has(.cc:not([hidden])){padding-bottom:calc(var(--nv-tabs-h) + var(--nv-tk-h) + var(--nv-cc-x))}
}
.cc{position:fixed;z-index:950;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));display:grid;gap:8px;padding:10px 12px;
background:var(--nv-ink);color:#fff;border-radius:16px;font:500 13.5px/1.4 var(--nv-font);
box-shadow:0 18px 40px -16px rgba(15,42,61,.55)}
.cc[hidden]{display:none}
.cc p{margin:0;max-width:none}
.cc a,.cc a.tap{color:#fff;text-decoration:underline}
.cc-btns{display:flex;gap:8px;justify-content:flex-end}
.cc a.tap{display:inline-block;padding:14px 0;margin:-14px 0}
.cc button{min-height:44px;padding:0 18px;border-radius:var(--nv-r-pill);border:1.5px solid rgba(255,255,255,.7);
background:transparent;color:#fff;font:700 14px/1 var(--nv-font);cursor:pointer}
.cc button.cc-yes{background:var(--nv-teal);border-color:var(--nv-teal);color:#fff}
.cc button:hover{filter:brightness(1.1)}
@media(min-width:860px){.cc{left:auto;right:16px;bottom:16px;width:400px}}
.cc-s{display:none}
/* phones and tablets: a slim single row, short question, the full one kept for screen readers */
@media(max-width:859px){
.cc{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:14px;font-size:13px;line-height:1.25}
.cc p{flex:1;min-width:0}
.cc-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cc-s{display:inline}
.cc-btns{flex:none;gap:6px}
.cc button{padding:0 12px;font-size:13.5px}
.cc a.tap{padding:14px 0;margin:-14px 0}
}
/* ---- old furniture on v2 values ---- */
.tripbar{bottom:var(--nv-tabs-h)}
/* The band every inner page opens with: the painted coast, the title on a
white card, the foot fading into the page. */
.head{background:var(--nv-sky);color:var(--nv-ink)}
.head__img{object-position:62% 45%}
.head::before{background:linear-gradient(180deg,rgba(227,241,248,.35) 0,rgba(227,241,248,0) 40%,rgba(244,249,252,0) 70%,var(--nv-page) 100%)}
.head__title,.head__lead,.head__note{background:rgba(255,255,255,.92);border-radius:var(--nv-r-card);
box-shadow:var(--nv-shadow-hi);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.head__note{border-left:4px solid var(--nv-teal)}
.head h1{color:var(--nv-ink);text-shadow:none}
.head .kicker,.head .op+.kind{color:var(--nv-teal-ink);font-weight:700}
.head .head__leadlabel,.head .lede,.head .goes__l,.head .leg__via,.head details.towns .answer{color:var(--nv-ink-2)}
.head__cue a{color:var(--nv-ink);text-shadow:none}
.head--slim{background:transparent;border-bottom:1px solid var(--nv-line)}
/* The pages that open on their work - a crossing, a line, a port - have no
room for the home's painted hero, so the painting goes behind them instead:
the same coast across the top of the page, washed out where the title sits,
fading into the page before the content needs the space (Gal, 6 Oct). It
adds no height, so nothing moves below the fold. */
body.nv:has(.head--slim,.stage--lp,.pp){position:relative;isolation:isolate}
body.nv:has(.head--slim,.stage--lp,.pp)::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:var(--nv-hd-h);
height:clamp(260px,30vw,400px);pointer-events:none;
background:linear-gradient(180deg,var(--nv-page) 0,transparent 18%,transparent 45%,var(--nv-page) 100%),
linear-gradient(90deg,color-mix(in srgb,var(--nv-page) 94%,transparent) 0,color-mix(in srgb,var(--nv-page) 86%,transparent) 50%,color-mix(in srgb,var(--nv-page) 35%,transparent) 72%,transparent 88%),
image-set(url(/nv/img/hero-wide-960.webp) 1x,url(/nv/img/hero-wide-1536.webp) 2x) 70% 62%/cover no-repeat}
.head--slim{border-bottom:0}
@media(max-width:700px){
body.nv:has(.head--slim,.stage--lp,.pp)::before{height:210px;
background:linear-gradient(180deg,color-mix(in srgb,var(--nv-page) 70%,transparent) 0,color-mix(in srgb,var(--nv-page) 35%,transparent) 45%,color-mix(in srgb,var(--nv-page) 75%,transparent) 75%,var(--nv-page) 100%),
image-set(url(/nv/img/hero-phone-640.webp) 1x,url(/nv/img/hero-phone-1024.webp) 2x) 50% 62%/cover no-repeat}
/* The crossing's teal band carries the painting itself (styles_nv_trip). */
}
@media(max-width:700px),(max-height:500px) and (max-width:950px){body.nv:has(.pair-ctl)::before{display:none}}
.whenbar--today{background:transparent}
.tell h2{font-size:var(--nv-h2)}
.modal{border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow-hi)}
.modal__h{font-weight:800}
.cal[open]{border-radius:20px 20px 0 0}
@media(min-width:700px){.cal[open]{border-radius:20px}}
.cal__h{font-weight:800}
.cal__d.cal--in{background:var(--nv-teal-soft)}
.cal__d.cal--a,.cal__d.cal--b{background:var(--nv-teal);color:#fff}
.cal__d.cal--a:hover:not(:disabled),.cal__d.cal--b:hover:not(:disabled){background:var(--nv-teal-hi)}
.cal__c.cal--now{border-color:var(--nv-teal);box-shadow:inset 0 0 0 1px var(--nv-teal);background:var(--nv-teal-soft)}
.cal__go{background:var(--nv-teal)}.cal__go:hover{background:var(--nv-teal-hi)}
.pp-cam__img,img[data-big],.cam__img{cursor:zoom-in}
.camz{width:100vw;max-width:1200px;max-height:100vh;margin:auto;padding:0;border:0;background:transparent;cursor:zoom-out}
.camz::backdrop{background:color-mix(in srgb,var(--nv-ink) 90%,transparent)}
.camz img{display:block;width:100%;height:auto;border-radius:var(--nv-r-sm)}
/* ============================================================================
Homepage (Find a crossing), v2
.hh the first screen: a flex column capped at what the header,
tab bar and ticker leave. The card never shrinks; the hero
(.hh__hero, flex-basis --hh-hero) gives up height first, and
its words go before its picture (container queries).
.hh__card the question. Grid areas h1/veh/ends/way/dates/go; .trip is
display:contents so its children are the grid's items.
.hm under the fold: live ramps + vessels, FAQ, boat band, sources
.hl / .tk live ramps card and the pinned ticker (app.js homeLive)
RULE ZERO: the button must end above the tab bar and ticker at every size
in DESIGN.md. Measure after any change here.
========================================================================== */
.hh{--hh-hero:440px;--hh-lap:20px;display:flex;flex-direction:column;
max-height:calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h))}
.hh__hero{position:relative;z-index:0;flex:0 1 var(--hh-hero);min-height:0;overflow:hidden;
container-type:size;display:flex;flex-direction:column}
.hh__hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(72px,34%);z-index:2;pointer-events:none;
background:linear-gradient(rgba(244,249,252,0),var(--nv-page))}
.hh__say{position:relative;z-index:3;flex:none;width:100%;padding-top:10px;order:-1}
.hh__say p{margin:0}
.hh__ttl{font-size:clamp(24px,7.2vw,34px);font-weight:800;line-height:1.04;letter-spacing:-.035em;color:var(--nv-ink);
max-width:16em}
.hh__sub{margin-top:8px!important;font-size:14.5px;line-height:1.42;color:var(--nv-ink-2);max-width:34em}
.hh__say{max-width:var(--nv-max)}
.hh__fn{margin-top:6px!important;font-size:12.5px;line-height:1.4;color:var(--nv-mute);max-width:40em}
.hh__pic{position:relative;flex:1 1 auto;min-height:0;display:block}
.hh__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;
-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
@container (max-height:300px){.hh__fn{display:none}}
@container (max-height:236px){.hh__sub{display:none}}
@container (max-height:150px){.hh__ttl{font-size:21px}}
@container (max-height:112px){.hh__say{display:none}}
.hh__cw{position:relative;flex:none;margin-top:calc(-1 * var(--hh-lap))}
.hh__card{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px;
grid-template-areas:"h1" "veh" "ends" "way" "dates" "go";box-shadow:var(--nv-shadow-hi)}
.hh__card>*,.hh .trip>*{grid-column:1/-1;min-width:0}
.hh__h1{grid-area:h1;margin:0;font-size:clamp(21px,2vw,26px)!important;line-height:1.15;letter-spacing:-.025em}
.hh .trip:not([hidden]),.hh .trip__opts{display:contents}
.hh .veh--seg{grid-area:veh}
.hh .trip__ends{grid-area:ends}
.hh .way2{grid-area:way}
.hh .dates{grid-area:dates}
.hh .trip__go{grid-area:go}
.hh .nocars,.hh .trip__none{margin:0}
/* Vehicle | On foot: the segmented face of the vehicle checkbox */
.hh .veh--seg{display:block;margin:0;padding:0;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1}
.hh .veh--seg .nv-seg{display:grid;width:100%}
.hh .veh--seg .nv-seg>button{min-height:42px;padding:0 12px}
.hh .veh--seg .nv-seg>button[aria-disabled="true"],.hh .veh--seg .nv-seg>button:disabled{opacity:.45;cursor:not-allowed}
.hh .veh--seg .nv-seg>button:not([aria-pressed=true]):hover{background:#fff;color:var(--nv-ink)}
/* the two ends: one box, a seam between them, the swap on the seam */
.hh .trip__ends{position:relative;display:grid;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r);box-shadow:none}
/* the field's own ring is the focus mark; the global outline on the input sat on the label and the X */
.hh .pick__i:focus-visible{outline:none}
.hh .trip__ends:focus-within{border-color:var(--nv-teal);box-shadow:0 0 0 3px rgba(21,127,156,.16)}
.hh .trip__ends .pick{min-height:54px;padding:8px 58px 7px 46px;display:flex;flex-direction:column;justify-content:center}
.hh .trip__ends .pick+.pick{border-top:1px solid var(--nv-line);border-left:0}
.pick__ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--nv-teal-ink);line-height:0;pointer-events:none}
.pick--sheet .pick__ic{display:none}
.hh .pick__l{font:600 12px/1.2 var(--nv-font);letter-spacing:0;text-transform:none;color:var(--nv-mute);margin:0 0 2px}
.hh .pick__i{font:600 16px/1.3 var(--nv-font);min-height:24px;color:var(--nv-ink)}
.hh .pick__i::placeholder{color:var(--nv-mute);font-weight:500}
.hh .pick__x{right:52px;top:50%;bottom:auto;transform:translateY(-50%);height:44px}
.hh .trip__swap{right:10px;left:auto;transform:translateY(-50%);width:40px;height:40px;border-color:var(--nv-line);
color:var(--nv-teal-ink);box-shadow:var(--nv-shadow)}
.hh .trip__swap::before{content:"";position:absolute;inset:-3px}
.hh .trip__swap:hover{background:var(--nv-teal);border-color:var(--nv-teal);color:#fff}
.hh .ac{border-color:var(--nv-line);border-radius:var(--nv-r);box-shadow:var(--nv-shadow-hi)}
.hh .ac__o:hover,.hh .ac__o:focus-visible,.hh .ac__o.ac--on{background:var(--nv-teal-soft)}
.hh .ac__go{background:var(--nv-teal)}.hh .ac__go:hover{background:var(--nv-teal-hi)}
.hh .pick--miss{box-shadow:inset 0 0 0 2px var(--nv-bad)}
/* one way or return */
.hh .way2{display:flex;align-items:center;gap:10px;padding:0}
.hh .way2__l{font:600 13px/1.2 var(--nv-font);color:var(--nv-mute);margin:0;white-space:nowrap}
.hh .way2 .nv-seg{flex:1 1 auto}
.hh .way2 .nv-seg>.way2__b{min-height:36px;padding:0 12px;border:0;border-radius:var(--nv-r-sm);font:600 14px/1.1 var(--nv-font);
background:none;color:var(--nv-ink-2)}
.hh .way2 .nv-seg>.way2__b[aria-pressed=true]{background:var(--nv-teal);color:#fff}
.hh .way2 .nv-seg>.way2__b:not([aria-pressed=true]):hover{background:#fff;color:var(--nv-ink)}
/* the dates: one box, halved */
.hh .dates{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r);box-shadow:none}
.hh .dates:focus-within{border-color:var(--nv-teal)}
.hh .dates .when{min-height:54px;padding:8px 12px 7px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;border-radius:0}
.hh .dates .when--out{padding-left:46px}
.hh .dates .when+.when{border-left:1px solid var(--nv-line)}
.hh .dates .when:hover{background:var(--nv-page)}
.when__ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--nv-teal-ink);line-height:0;pointer-events:none}
.hh .dates .when__t{font:600 12px/1.2 var(--nv-font);letter-spacing:0;text-transform:none;color:var(--nv-mute);margin:0 0 2px}
.hh .dates .when__v{min-height:22px}
.hh .when__ph{font:600 16px/1.3 var(--nv-font)}
.hh .dates .when__x{top:50%;transform:translateY(-50%);right:4px;min-width:40px;min-height:40px}
.hh .dates .when__t,.hh .when__ph{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh .when__ph{display:block;line-height:22px}
/* narrow phones: the date cells give the icon's room to the words, and the
toggle keeps "Choose:" for screen readers only - the segmented pair reads
as a choice on its own, and the long languages need its width */
@media(max-width:419px){
.hh .dates .when--out{padding-left:12px}
.hh .dates .when--out .when__ic{display:none}
.hh .when__ph{font-size:15px}
.hh .way2__l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hh .way2 .nv-seg>.way2__b{font-size:13.5px;padding:0 8px;line-height:1.1}
}
/* the answer */
.hh .trip__go{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:0;
border-radius:var(--nv-r);background:var(--nv-teal);color:#fff;font:700 16.5px/1 var(--nv-font);
box-shadow:0 8px 20px -8px rgba(21,127,156,.65);transition:background .15s,transform .15s}
.hh .trip__go:hover:not(:disabled){background:var(--nv-teal-hi)}
.hh .trip__go:active{transform:translateY(1px)}
.hh .trip__go svg{transition:transform .15s}
.hh .trip__go:hover svg{transform:translateX(3px)}
/* short phones: every row gives back a little, so the button still shows */
@media(max-width:699px) and (max-height:700px){
.hh__card{gap:8px;padding:12px 14px}
.hh .veh--seg .nv-seg{padding:3px}
.hh .veh--seg .nv-seg>button{min-height:38px}
.hh .trip__ends .pick,.hh .dates .when{min-height:50px;padding-top:6px;padding-bottom:5px}
.hh .way2 .nv-seg{padding:3px}
.hh .way2 .nv-seg>.way2__b{min-height:34px}
.hh .trip__go{min-height:48px}
}
@media(max-width:699px) and (max-height:600px){.hh__h1{font-size:19px!important}}
/* tablet and small desk: two columns, four rows */
@media(min-width:700px){
.hh{--hh-hero:clamp(300px,52vh,620px);--hh-lap:56px}
.hh__hero{display:block}
/* the painting starts a fifth of the way in, so its ferry is never under the words */
.hh__pic{position:absolute;inset:0 0 0 20%}
.hh__pic img{object-position:50% 52%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
/* the headline's sky: the painting fades into it from the right */
.hh__hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,var(--nv-sky) 0,rgba(227,241,248,.85) 28%,rgba(227,241,248,0) 52%)}
.hh__say{padding-top:clamp(18px,6cqh,64px)}
.hh__ttl{font-size:clamp(30px,min(4.2vw,11cqh),56px);max-width:11.5em}
.hh__sub{font-size:clamp(16px,1.45vw,20px);max-width:30em;margin-top:clamp(8px,2cqh,16px)!important}
.hh__fn{font-size:13.5px;margin-top:clamp(6px,1.6cqh,12px)!important}
/* d5 (Gal, 30 Sept): the question as one search line, the crossing cards
under it (.hx). The title stays for screen readers; the return date is
optional in its own cell, so the one-way toggle goes (app.js ways()). */
.hh{--hh-lap:28px}
.hh__cw{z-index:5;width:100%}
.hh__h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;grid-area:auto}
.hh .way2{display:none}
.hh__card{padding:10px;gap:10px;grid-template-columns:auto minmax(0,1fr) auto;
grid-template-areas:"ends ends ends" "veh dates go";align-items:stretch;border-radius:22px}
.hh .veh--seg{align-self:center}
/* the long languages' hints ("Dowolne miejsce (opcjonalnie)") fit the line */
.hh .pick__i::placeholder{font-size:14.5px}
.hh .trip__ends{grid-template-columns:1fr 1fr}
.hh .trip__ends .pick{padding:8px 34px 7px 46px}
.hh .trip__ends .pick+.pick{border-top:0;border-left:1px solid var(--nv-line);padding-left:70px;padding-right:40px}
.hh .trip__ends .pick+.pick .pick__ic{left:38px}
.hh .trip__swap{left:50%;right:auto;transform:translate(-50%,-50%)}
.hh .pick__x{right:2px}
.hh .trip__ends .pick:first-of-type .pick__x{right:22px}
.hh .trip__go{align-self:stretch;min-height:56px}
.hh .dates .when,.hh .trip__ends .pick{min-height:58px}
}
/* the phone's thresholds above (300/236) still match here and hid the subtitle
on a 1440x900 desk with a whole sky free beside the title: undo them first */
@media(min-width:700px){@container (min-height:191px){.hh__sub{display:block}}
@container (min-height:251px){.hh__fn{display:block}}}
@container (max-height:250px){.hh__fn{display:none}}
@container (max-height:190px){.hh__sub{display:none}}
/* a laptop and up: the whole question on one line */
@media(min-width:1000px){
.hh__card{grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) auto;grid-template-areas:"veh ends dates go"}
/* "Pokaż promy samochodowe" takes two lines rather than the ends' room */
.hh .trip__go{padding:0 18px;max-width:200px;line-height:1.15;text-align:center}
}
/* until 1600px the pin and calendar icons give their room to the words */
@media(min-width:700px) and (max-width:1599px){
.hh .dates .when--out{padding-left:12px}
.hh .dates .when--out .when__ic,.hh .trip__ends .pick__ic{display:none}
.hh .trip__ends .pick{padding-left:14px;padding-right:26px}
.hh .trip__ends .pick+.pick{padding-left:36px;padding-right:34px}
.hh .when__ph{font-size:15px}
}
/* until the line has room (1600px), Vehicle | On foot is two icons, one over the other */
@media(min-width:700px) and (max-width:1599px){
.hh .veh--seg .nv-seg{grid-template-columns:1fr;grid-auto-flow:row;gap:2px}
.hh .veh--seg .nv-seg>button{min-height:25px;padding:0 12px}
.hh .veh--seg .nv-seg>button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(min-width:1000px) and (max-width:1099px){
.hh .when__ph,.hh .dates .when__v{font-size:14px}
.hh .dates .when{padding-left:10px;padding-right:6px}
.hh .trip__go{padding:0 14px;max-width:170px}
.hh .pick__i::placeholder{font-size:13.5px}
}
@media(min-width:1600px){html:has(.hh){--nv-max:1480px}}
/* Desktop and tablet (3 Oct, Gal): the swap sits on the seam and must not cover
the To field; Vehicle | On foot is a labelled segmented control, 44px a side. */
@media(min-width:700px){
.hh .veh--seg .nv-seg{display:grid;grid-template-columns:auto auto;grid-auto-flow:column;gap:2px;padding:3px}
.hh .veh--seg .nv-seg>button{min-height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.hh .veh--seg .nv-seg>button span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:nowrap}
}
@media(min-width:700px) and (max-width:1599px){
.hh .trip__ends .pick[data-pick=to]{padding-left:58px}
.hh .trip__ends .pick[data-pick=from]{padding-right:34px}
}
/* the X sits on the name's line, not the field's middle (the label pushes the
name 9px below it), and the name stops short of it */
@media(min-width:700px){
.hh .pick__x{top:auto;bottom:0;transform:none;height:40px}
.hh .trip__ends .pick[data-pick=from]:has(.pick__x:not([hidden])){padding-right:58px}
}
@media(min-width:1600px){.hh .trip__ends .pick[data-pick=to]{padding-left:82px}.hh .trip__ends .pick[data-pick=to] .pick__ic{left:46px}}
@media(min-width:1000px) and (max-width:1599px){
.hh__card{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ends ends ends" "veh dates go"}
.hh .trip__go{max-width:none;padding:0 22px}
/* two rows are taller than the one-row bar: the headline keeps its sky and the page may run past the screen */
.hh{--hh-hero:190px;max-height:none}
}
/* the tablet's tab bar: its hairline sits one pixel above its height */
@media(min-width:700px) and (max-width:859px){.hh{max-height:calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h) - var(--nv-cc-x) - 1px)}}
/* the crossing cards (home_cards): tablet and desk only */
.hx{display:none}
@media(min-width:700px){
/* the cards are the live ports here; the phone's list under the fold would
repeat them word for word (it still feeds every pill: app.js homeLive) */
.hm .hl{display:none}
.hm__row{grid-template-columns:minmax(0,1fr)!important}
.hx{display:block;flex:none;width:100%;position:relative;z-index:1;padding-top:14px;padding-bottom:16px}
.hx__l{max-width:none;display:flex;align-items:center;gap:9px;margin:0 0 9px;font:800 15px/1 var(--nv-font)}
.hx__l span[data-hx-at]{margin-left:auto;font:600 12.5px/1 var(--nv-font);color:var(--nv-mute)}
.hx__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hx__c{display:flex;flex-direction:column;min-width:0;padding:12px 16px 10px;background:#fff;border:1px solid var(--nv-line);
border-radius:20px;box-shadow:var(--nv-shadow-hi);color:inherit;text-decoration:none}
.hx__c:hover{box-shadow:0 0 0 2px #bfdce7,var(--nv-shadow-hi)}
.hx__h b{display:block;font:800 18px/1.15 var(--nv-font);letter-spacing:-.015em}
.hx__h small{display:block;margin-top:3px;font:500 12.5px/1.3 var(--nv-font);color:var(--nv-mute)}
.hx__e{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 8px;padding:6px 0;border-top:1px solid var(--nv-line)}
.hx__h+.hx__e{margin-top:8px}
.hx__e>b{font:700 13.5px/1.25 var(--nv-font);min-width:0;overflow-wrap:anywhere}
.hx__e small{grid-column:1;font:500 12.5px/1.2 var(--nv-font);color:var(--nv-ink-2);white-space:nowrap}
.hx__e strong{font:800 16px/1 var(--nv-font);color:var(--nv-ink);font-variant-numeric:tabular-nums}
.hx__e .nv-pill{grid-row:1 / span 2;grid-column:2}
.hx .nv-pill i{font-style:normal;font-size:9px;line-height:1}
.hx__f{margin-top:auto;padding-top:8px;border-top:1px solid var(--nv-line);display:flex;align-items:center;gap:12px;white-space:nowrap;
font:500 12.5px/18px var(--nv-font);color:var(--nv-ink-2)}
.hx__p{display:inline-flex;align-items:center;gap:5px;flex:none}
.hx__p svg{color:var(--nv-mute)}
.hx__f b{font-weight:800;color:var(--nv-ink)}
.hx__op{margin-left:auto;flex:none;height:16px;width:auto;max-width:96px;display:block}
.hx__op--i{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:0 6px;border-radius:var(--nv-r-pill);
background:var(--nv-teal-soft);color:var(--nv-teal-ink);font:800 10px/16px var(--nv-font);letter-spacing:.02em}
.hx__more{margin-left:12px;display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-block:-16px;padding:0 4px;border:0;background:none;
color:var(--nv-teal-ink);font:700 13px/1 var(--nv-font);cursor:pointer}
.hx__more[hidden]{display:none}
.hx__l span[data-hx-at]{margin-left:auto}
.hx__l span[data-hx-at]:empty{display:none}
.hx__l .hx__more{margin-left:auto}
.hx__l span[data-hx-at]:not(:empty)+.hx__more{margin-left:12px}
.hx:not(.hx--open) .hx__c:nth-child(n+3){display:none}
}
@media(min-width:1100px){.hx:not(.hx--open) .hx__c:nth-child(n+3){display:flex}.hx:not(.hx--open) .hx__c:nth-child(n+5){display:none}.hx[data-n="3"] .hx__more,.hx[data-n="4"] .hx__more{display:none}.hx__g{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.hx__c{padding:14px 16px 12px}.hx__e{padding:8px 0}}
/* ---- under the fold ---- */
main:has(>.hm){padding-bottom:0;max-width:var(--nv-max);padding-left:var(--nv-pad);padding-right:var(--nv-pad);padding-top:var(--nv-gap)}
.hm{display:grid;gap:var(--nv-gap)}
.hm__row{display:grid;gap:var(--nv-gap);align-items:start}
@media(min-width:960px){.hm__row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.hm .tell{margin:0;border:1px solid var(--nv-line);padding:var(--nv-pad);max-width:none;scroll-margin-top:12px}
.hm .tell h2{margin:0 0 14px;font-size:var(--nv-h2);line-height:1.15}
.hm .tell__l{gap:0;grid-template-columns:minmax(0,1fr)!important}
.hm .tell__l>div{padding:12px 0;border-top:1px solid var(--nv-line)}
.hm .tell__l>div:first-child{border-top:0;padding-top:2px}
.hm .tell__l dt{font:800 17px/1.3 var(--nv-font)}
.hm .tell__l dd{color:var(--nv-ink-2);font-size:15px;margin-top:4px}
.hm .tell__qa{display:grid;gap:0 36px}
@media(min-width:860px){.hm .tell__qa{grid-template-columns:1fr 1fr}
.hm .tell__qa .qa{border-top:1px solid var(--nv-line);margin:0;padding:16px 0}
.hm .tell__qa .qa:nth-child(-n+2){border-top:0;padding-top:0}}
.hm .qa h3{font:700 16.5px/1.35 var(--nv-font);color:var(--nv-ink)}
.hm .qa p{color:var(--nv-ink-2);font-size:15px}
.hm .tell h2,.hm .tell .qa,.hm .tell .answer,.hm .tell .stats{max-width:none}
.hm #sec-how .answer{color:var(--nv-ink-2);max-width:75ch}
.hm #sec-how .stats{color:var(--nv-mute)}
.hm #sec-how a{color:var(--nv-teal-ink);font-weight:600}
/* live ramps */
.hl .nv-card__h{align-items:center;margin-bottom:6px}
.hl .nv-card__h h2{display:flex;align-items:center;gap:10px;font-size:var(--nv-h2)}
.hl__dot{width:10px;height:10px;border-radius:50%;background:var(--nv-ok);flex:none;box-shadow:0 0 0 4px rgba(47,165,92,.16);
animation:nv-blink 2.4s ease-in-out infinite}
@keyframes nv-blink{50%{opacity:.35}}
.hl__rows .nv-row{grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 12px;padding:12px 8px;margin:0 -8px;border-radius:12px;
border-top:1px solid var(--nv-line);min-height:64px}
.hl__rows .nv-row:first-child{border-top:0}
.hl__rows .nv-row:hover{background:var(--nv-page)}
.hl__txt{min-width:0}
.hl__txt strong{font-weight:800;font-size:17px;letter-spacing:-.01em}
.hl__txt small{margin-left:6px;font-size:14px;color:var(--nv-mute);font-weight:600}
.hl__ln{display:block;margin-top:1px;font-size:13.5px;color:var(--nv-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl .nv-pill i,.hl--all .nv-pill i{font-style:normal;font-size:9px;line-height:1}
.hl__chev{color:var(--nv-mute);line-height:0}
.hl__more{width:100%;margin-top:10px}
.hl__note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--nv-line);
font-size:13px;line-height:1.45;color:var(--nv-mute)}
.hl__note svg{flex:none;margin-top:1px}
.hl--all[open]{width:min(560px,92vw);max-height:86dvh;overflow:auto;padding:20px 22px 10px;border-radius:var(--nv-r-card)}
.hl__dh{margin:0 40px 8px 0;font-size:22px}
.hl--all .nv-row{grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 12px}
@media(max-width:380px){.hl__rows .nv-row{gap:4px 8px}.hl__chev{display:none}.hl__txt small{display:none}}
/* the ticker: pinned over the tab bar while the live card is out of sight */
.tk:not([hidden]){position:fixed;left:0;right:0;bottom:var(--nv-tabs-h);z-index:899;display:flex;align-items:center;gap:12px;
height:44px;padding:0 0 0 16px;background:#fff;border-top:1px solid var(--nv-line);
box-shadow:0 -10px 24px -18px rgba(15,42,61,.35);color:var(--nv-ink);text-decoration:none;font:700 14px/1 var(--nv-font)}
@media(min-width:860px){.tk:not([hidden]){padding-bottom:env(safe-area-inset-bottom);height:calc(44px + env(safe-area-inset-bottom))}}
.tk__h{flex:none;display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.tk__h b{font-weight:800}.tk__h span[data-tk-at]{font-weight:600;color:var(--nv-mute);letter-spacing:.02em}
.tk__w{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.tk__t{display:inline-flex;white-space:nowrap;animation:tk 30s linear infinite}
.tk__t>span[aria-hidden]{display:inline-flex}
.tk:hover .tk__t{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
.tk__p{display:inline-flex;align-items:center;gap:6px;margin-right:24px;font-size:14px}
.tk__p em{font-style:normal;font-weight:800}
.tk__p i{font-style:normal;font-size:10px;color:var(--nv-off)}
.tk__p b{font-weight:700;color:var(--nv-off-ink)}
.tk__p:is([data-s=clear],[data-s=green]) i{color:var(--nv-ok)}.tk__p:is([data-s=clear],[data-s=green]) b{color:var(--nv-ok-ink)}
.tk__p[data-s=yellow] i{color:var(--nv-warn)}.tk__p[data-s=yellow] b{color:var(--nv-warn-ink)}
.tk__p[data-s=red] i{color:var(--nv-bad)}.tk__p[data-s=red] b{color:var(--nv-bad-ink)}
@media(prefers-reduced-motion:reduce){.tk__t{animation:none}.tk__w{overflow-x:auto}.hl__dot{animation:none}}
@media(max-width:380px){.tk__h span[data-tk-at]{display:none}}
/* the family's third door */
.hband{position:relative;overflow:hidden;border-radius:var(--nv-r-card);border:1px solid var(--nv-line);background:#fff;
box-shadow:var(--nv-shadow);min-height:200px;display:flex;align-items:center}
.hband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hband::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.94) 38%,rgba(255,255,255,.4) 62%,rgba(255,255,255,0) 80%)}
.hband__t{position:relative;z-index:2;padding:var(--nv-pad);max-width:560px}
.hband__t h2{margin:0;font-size:var(--nv-h2);line-height:1.15}
.hband__t p{margin:8px 0 16px;color:var(--nv-ink-2)}
@media(max-width:699px){
.hband{display:block;min-height:0}
.hband__img{position:relative;height:150px;display:block}
.hband::before{background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 90px,#fff 150px)}
.hband__t{padding:0 18px 20px;margin-top:-6px}
}
/* ============================================================================
Phones, 30 Sept 2026 (Gal picked two mocks, "M1 on small phones, M2 on
bigger phones"). Desktop and tablet (>=700px) are untouched by all of this.
.qk the short phone's answer slot inside the form: two camera crossings,
and after a tap the next boat, the queue at that ramp, the fare.
.hq the tall phone's three tiles; the form opens over them on a tap
(html.hq-open, app.js homeTiles).
Breakpoint: 720px of screen height. Verified at 320x568 360x640 375x667
and 667x375 (short) and 360x780 390x844 393x852 412x915 430x932 (tall).
========================================================================== */
.qk,.hq,.hh__x,.hq__go{display:none}
/* the form's own layer must not trap the phone/tablet place sheet under the
ticker and header (the sheet is z-index 1000 inside it) */
.hh__cw:has(.pick--sheet){z-index:1001!important}
/* a control drawn under 44px keeps a 44px hit area */
.qk__c,.hh .veh--seg .nv-seg>button,.hh .way2 .nv-seg>.way2__b{position:relative}
.qk__c::before,.hh .veh--seg .nv-seg>button::before,.hh .way2 .nv-seg>.way2__b::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* a pill that carries its own reading (the answer slot, the crossing cards) */
.nv-pill:is([data-s=clear],[data-s=green]){background:var(--nv-ok-bg);color:var(--nv-ok-ink)}
.nv-pill[data-s=yellow]{background:var(--nv-warn-bg);color:var(--nv-warn-ink)}
.nv-pill[data-s=red]{background:var(--nv-bad-bg);color:var(--nv-bad-ink)}
/* the ticker lives under the header for good, at every width (phones since
3fbb378, the desk since d5); its room is held up front */
html:has(.hh):has(.tk){--nv-tk-h:34px}
body.nv:has(.hh){padding-bottom:calc(var(--nv-tabs-h) + var(--nv-cc-x))}
.hh{margin-top:var(--nv-tk-h)}
.tk:not([hidden]){position:absolute;top:var(--nv-hd-h);bottom:auto;z-index:50;height:34px;gap:10px;padding:0 0 0 14px;
background:var(--nv-ink);color:#fff;border:0;box-shadow:none}
.tk__h{font-size:11px;letter-spacing:.1em}
.tk__h span[data-tk-at]{color:#b9cad5}
.tk__p{font-size:13px;margin-right:18px}
.tk__p em{color:#fff}
.tk__p b,.tk__p[data-s] b{color:#dbe7ee}
.tk__w{-webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
@media(min-width:860px){.tk:not([hidden]){height:34px;padding-bottom:0}}
@media(max-width:699px){
/* the tab bar's hairline sits one pixel above its height */
.hh{max-height:calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h) - var(--nv-cc-x) - 1px)}
.hh__cw{padding-bottom:8px}
.hh__card{grid-template-areas:"h1" "veh" "ends" "way" "dates" "qk" "go"}
.hh .qk{grid-area:qk}
/* the answer slot, shared by both phones */
.qk{display:block;border-radius:14px;background:var(--nv-sky);padding:8px 10px;min-height:56px}
.qk--on .qk__p{display:none}
.qk__h{display:block;font:700 10.5px/1 var(--nv-font);letter-spacing:.1em;text-transform:uppercase;color:var(--nv-mute);margin:1px 0 7px}
.qk__cs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qk__c{min-width:0;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 9px;border-radius:999px;border:1px solid #cfe2ea;
background:#fff;font:700 12.5px/1 var(--nv-font);color:var(--nv-ink);cursor:pointer;white-space:nowrap;overflow:hidden}
.qk__c span{overflow:hidden;text-overflow:ellipsis}
.qk__c i{font-style:normal;font-size:9px;color:var(--nv-off);flex:none}
.qk__c:is([data-s=clear],[data-s=green]) i{color:var(--nv-ok)}.qk__c[data-s=yellow] i{color:var(--nv-warn)}.qk__c[data-s=red] i{color:var(--nv-bad)}
.qk__a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 10px}
.qk__a[hidden]{display:none}
.qk__t{grid-row:span 2;font:800 24px/1 var(--nv-font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--nv-ink)}
.qk__t[data-tmr]::after{content:attr(data-tmr);display:block;font:600 11px/1.2 var(--nv-font);letter-spacing:0;color:var(--nv-mute)}
.qk__l{display:flex;align-items:center;gap:6px;min-width:0;font:700 13px/1.2 var(--nv-font);white-space:nowrap}
.qk__l>span:first-child{overflow:hidden;text-overflow:ellipsis}
.qk__l .nv-pill{min-height:22px;padding:0 8px;font-size:11.5px;gap:4px;flex:none}
.qk__l .nv-pill i{font-style:normal;font-size:8px}
.qk__f{font:500 12px/1.25 var(--nv-font);color:var(--nv-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk__n{display:none}
}
@media(min-width:381px) and (max-width:699px){.qk__n{display:inline}}
@media(max-width:340px){.qk__c{padding:0 7px;gap:4px;font-size:11.5px}.qk__t{font-size:21px}}
/* ---- m1: a short phone keeps the whole form and answers in it ---- */
@media(max-width:699px) and (max-height:719px){
.hh__h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;grid-area:auto}
.hh .way2{display:none}
.hh__card{grid-template-areas:"veh" "ends" "dates" "qk" "go"}
.hh__card{gap:7px;padding:10px}
.hh .veh--seg .nv-seg{padding:3px}
.hh .veh--seg .nv-seg>button{min-height:36px}
.hh .trip__ends .pick,.hh .dates .when{min-height:46px;padding-top:4px;padding-bottom:4px}
.hh .trip__go{min-height:48px}
.hh__ttl{font-size:clamp(22px,6.9vw,28px)}
.hh{--hh-lap:12px}
@container (max-height:112px){.hh__say{display:block}.hh__sub,.hh__fn{display:none}.hh__ttl{font-size:21px}}
@container (max-height:46px){.hh__say{display:none}}
.qk{height:58px;min-height:0;padding:7px 10px}
.qk__h{margin:1px 0 6px}
.qk__c{min-height:30px}
.qk__a{height:100%}
}
@media(max-width:699px) and (max-height:600px){
.hh .trip__ends .pick,.hh .dates .when{min-height:44px}
}
/* the cookie card takes the last of a short screen: the card stops overlapping the sky */
@media(max-width:699px) and (max-height:719px){html:has(.cc:not([hidden])) .hh{--hh-lap:0px}
html:has(.cc:not([hidden])) .hh__card{padding-top:8px;padding-bottom:8px;gap:6px}}
@media(max-width:699px) and (max-height:719px) and (min-height:600px){
.hh .trip__ends .pick,.hh .dates .when{min-height:50px}
}
/* sideways: the form in two columns, the promise on one line */
@media(max-width:699px) and (max-height:500px){
.hh__card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:none;column-gap:10px;align-items:start}
.hh{--hh-lap:0px}.hh__say{padding-top:6px}
.qk__h{display:none}.qk{min-height:0;padding:7px 8px}
.hh__card>*,.hh .trip>*{grid-column:auto}
.hh .veh--seg{grid-column:1;grid-row:1}
.hh .trip__ends{grid-column:1;grid-row:2 / span 2}
.hh .dates{grid-column:2;grid-row:1}
.hh .qk{grid-column:2;grid-row:2}
.hh .trip__go{grid-column:2;grid-row:3}
.hh .nocars,.hh .trip__none{grid-column:1 / -1}
.hh__ttl{font-size:19px!important;max-width:none!important}
.hh__sub,.hh__fn{display:none}
.qk{height:50px}
.qk__a{height:100%}
.hh .trip__go{min-height:44px}
@container (max-height:56px){.hh__say{display:block}}
@container (max-height:26px){.hh__say{display:none}}
}
/* ---- m2: a tall phone opens on three tiles; the form opens over them ---- */
@media(max-width:699px) and (min-height:720px){
.hh{height:calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h) - var(--nv-cc-x) - 1px);max-height:none;
--th:17svh}
.hh__hero{flex:1 1 auto}
.hh__ttl{font-size:clamp(26px,8vw,32px)}
.hh__sub{font-size:15px}
/* plain: the tiles are the first screen. Handed over (?mode=, or a tile
tapped): the form is, and the tiles go below it as the way to switch. */
html:not([data-hand]) .hh__cw{display:none}
/* the tiles' screen has nothing under the card that cannot sit beneath it */
html:not([data-hand]):has(.cc:not([hidden])){--nv-cc-x:0px}
.hh__cw{z-index:4}
.hh__card{position:relative;gap:10px;padding:12px 12px 14px;box-shadow:var(--nv-shadow-hi)}
.hh__card::after{content:"";position:absolute;bottom:-8px;left:var(--ax,25%);width:16px;height:16px;margin-left:-8px;background:#fff;
transform:rotate(45deg);border-right:1px solid var(--nv-line);border-bottom:1px solid var(--nv-line)}
html[data-mode=foot] .hh__card{--ax:75%}
.hh__h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;grid-area:auto}
.hh .way2{display:none}
.hh__card{grid-template-areas:"veh" "ends" "dates" "qk" "go";gap:8px;padding:12px}
.hh .veh--seg .nv-seg{padding:3px}
.hh .veh--seg .nv-seg>button{min-height:44px}
.hh .trip__ends .pick,.hh .dates .when{min-height:52px}
.hh .trip__go{min-height:52px}
.qk{min-height:62px}
.qk__c{min-height:44px;font-size:13px}
/* handed over: no height lock. The headline's picture takes what the form
(--hh-card, measured) leaves of the screen, 110px at least, and the
tiles sit under the fold. */
html[data-hand] .hh{height:auto;--hh-card:412px}
html[data-hand] .hh__hero{flex:none;
height:clamp(110px,calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h) - var(--nv-cc-x) - 1px - var(--hh-card) + var(--hh-lap)),210px)}
html[data-hand] .hh__sub,html[data-hand] .hh__fn{display:none}
/* the tiles fold into one small row of three under the form, the chosen one ringed */
html[data-hand] .hh{--ths:clamp(46px,8.5svh,96px)}
html[data-hand] .hq{padding-top:14px;grid-template-columns:repeat(3,1fr)}
html[data-hand] .hq__t--live{grid-column:auto;flex-direction:column;padding:0 0 9px;text-align:center}
html[data-hand] .hq__i,html[data-hand] .hq__t--live .hq__i{height:var(--ths);width:auto}
html[data-hand] .hq__x small,html[data-hand] .hq__ms,html[data-hand] .hq__go{display:none!important}
html[data-hand] .hq__x{padding:7px 4px 0}
html[data-hand] .hq__x b{font-size:13.5px}
.hq{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 10px 10px;flex:none;position:relative;z-index:3}
.hq__t{display:flex;flex-direction:column;align-items:stretch;padding:0 0 10px;border:0;border-radius:18px;background:#fff;
box-shadow:var(--nv-shadow-hi);cursor:pointer;color:inherit;text-align:center;overflow:hidden;text-decoration:none;font:inherit}
.hq__i{display:block;height:var(--th);overflow:hidden;flex:none}
.hq__i img{width:100%;height:100%;object-fit:cover;display:block}
.hq__x{display:block;padding:8px 6px 0;min-width:0}
.hq__x b{display:block;font:800 15.5px/1.15 var(--nv-font);letter-spacing:-.01em}
.hq__x small{display:block;margin-top:3px;color:var(--nv-mute);font:500 12.5px/1.25 var(--nv-font)}
.hq__t{-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .15s}
.hq__t:active{transform:scale(.975)}
.hq__t:focus-visible{outline:3px solid var(--nv-teal);outline-offset:3px}
.hq__t[aria-expanded=true]{box-shadow:0 0 0 2.5px var(--nv-teal),var(--nv-shadow-hi)}
.hq__t[aria-expanded=true] b{color:var(--nv-teal-ink)}
/* the button the tile is: a label and an arrow, not a picture to guess at */
.hq__go{display:flex!important;margin-top:9px;min-height:44px;padding:0 14px;width:100%;pointer-events:none}
.hq__t[aria-expanded=true] .hq__go{background:var(--nv-teal-soft);color:var(--nv-teal-ink)}
.hq__t--live{grid-column:1 / -1;flex-direction:row;align-items:stretch;padding:0;text-align:left}
.hq__t--live .hq__i{height:auto;width:38%}
.hq__t--live .hq__x{flex:1;padding:10px 12px}
.hq__ms{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin-top:6px}
.hq__m{display:flex;align-items:center;gap:6px;font:600 12.5px/1.2 var(--nv-font);color:var(--nv-ink-2)}
.hq__m em{font-style:normal;order:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq__m i{font-style:normal;font-size:9px;color:var(--nv-off);order:0;width:10px}
.hq__m b{order:2;font-weight:700;color:var(--nv-off-ink);white-space:nowrap}
.hq__m:is([data-s=clear],[data-s=green]) i{color:var(--nv-ok)}.hq__m:is([data-s=clear],[data-s=green]) b{color:var(--nv-ok-ink)}
.hq__m[data-s=yellow] i{color:var(--nv-warn)}.hq__m[data-s=yellow] b{color:var(--nv-warn-ink)}
.hq__m[data-s=red] i{color:var(--nv-bad)}.hq__m[data-s=red] b{color:var(--nv-bad-ink)}
}
/* ============================================================================
NautiVia v2 - line pages (//ferry//) and crossing cards, 30 Sept
----------------------------------------------------------------------------
Markup, all from build.py:
section.stage[data-stage] route_page -> stage_block
.stage__top > .stage__id kicker, h1, .stage__op (.lx-isl, .lx-kind, operator logo)
> .alerts alert_strip: the first notice, a count of the rest
.seg.lx-dirs > .lx-dir one row per shore: button.seg__b.lx-dir__b
(.lx-dir__k, .lx-dir__t time, small words,
.lx-dir__then) + .lx-dir__q (that port's verdict)
.stage__g > .shot | .sails camera (camera lines) or sailings (the rest)
> .stage__side .scard--next, .qstrip, .scard--party / .sails__side
.answers > .ans__b four sheets one press away
.stage__foot.lx-about "About this crossing"
dialog.sheetbig the timetable, fares, calculator, ports
ul.xcs > li.xc crossing_card(): routes index, operator
pages, the place-to-place results
Rule zero (DESIGN.md): the line name, the next boat off each shore and the
queue at each end are on the first screen at every test size. On a phone
that is the two .lx-dir rows; the camera follows them.
========================================================================== */
/* ---- the stage: sky, not a grey band ---- */
.nv .stage{background:transparent;border-bottom:0;padding:14px 0 22px}
.nv .stage>.wrap{padding-left:var(--nv-pad);padding-right:var(--nv-pad)}
@media(max-width:619px){.nv .stage>.wrap{padding-left:16px;padding-right:16px}}
.nv .stage__k{font:800 12px/1.3 var(--nv-font);letter-spacing:.08em;text-transform:uppercase;color:var(--nv-teal-ink)}
.nv .stage__h{font:800 clamp(24px,3vw,34px)/1.08 var(--nv-font);letter-spacing:-.03em;color:var(--nv-ink);margin:4px 0 0}
.nv .stage__op{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.lx-isl{font:700 15px/1.2 var(--nv-font);color:var(--nv-ink-2);letter-spacing:-.01em;margin-inline-end:2px}
.lx-kind{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 9px;border-radius:var(--nv-r-pill);
background:var(--nv-teal-soft);color:var(--nv-teal-ink);font:700 12.5px/1 var(--nv-font);white-space:nowrap}
.lx-kind svg{width:17px;height:17px;flex:none}
.nv .stage .op{height:16px;padding:5px 10px;border-radius:var(--nv-r-pill);background:#fff;border:1px solid var(--nv-line)}
/* ---- what is wrong today: a soft card, one line on a phone ---- */
.nv .alerts{margin-top:12px;gap:8px}
.nv .alert{border:1px solid var(--nv-line);border-left:0;border-radius:var(--nv-r);background:#fff;box-shadow:var(--nv-shadow);
padding:10px 40px 11px 42px;min-height:48px;align-content:center;color:var(--nv-ink)}
.nv .alert::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
background:var(--nv-warn-bg);box-shadow:inset 0 0 0 5px var(--nv-warn-bg),inset 0 0 0 9px var(--nv-warn)}
.nv .alert--stop::before{background:var(--nv-bad-bg);box-shadow:inset 0 0 0 5px var(--nv-bad-bg),inset 0 0 0 9px var(--nv-bad)}
.nv .alert:hover{background:#fbfdfe;border-color:#cfe0ea}
.nv .alert__k{font:700 11px/1.3 var(--nv-font);letter-spacing:.06em;color:var(--nv-warn-ink)}
.nv .alert--stop .alert__k{color:var(--nv-bad-ink)}
.nv .alert__t{font:700 14.5px/1.3 var(--nv-font);letter-spacing:-.01em;color:var(--nv-ink)}
.nv .alert__s{font:500 13px/1.4 var(--nv-font);color:var(--nv-ink-2)}
.nv .alert::after{content:"";right:14px;width:9px;height:9px;border:solid var(--nv-teal-ink);border-width:2px 2px 0 0;
transform:translateY(-50%) rotate(45deg);opacity:.8}
.nv .alert__more{border-radius:var(--nv-r);border-color:var(--nv-line);background:#fff;color:var(--nv-teal-ink);
font:700 13px var(--nv-font);min-height:48px;box-shadow:var(--nv-shadow)}
@media(max-width:939px){
/* A phone reads the headline; the sentence and the terms are the press. */
.nv .alert{grid-template-columns:minmax(0,1fr)}
.nv .alert__t{-webkit-line-clamp:1}
.nv .alert__s{display:none}
}
/* ---- both shores, one row each: next boat, words, the queue there ---- */
.nv .seg.lx-dirs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px}
@media(min-width:620px){.nv .seg.lx-dirs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lx-dir{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--nv-line);
border-radius:18px;box-shadow:var(--nv-shadow);transition:border-color .16s,box-shadow .16s}
.lx-dir:has(>[aria-pressed=true]){border-color:var(--nv-teal);box-shadow:0 0 0 1px var(--nv-teal),var(--nv-shadow)}
.lx-dir:has(>.lx-dir__b:hover){border-color:#b9d9e5}
.lx-dir:has(>[aria-pressed=true]):has(>.lx-dir__b:hover){border-color:var(--nv-teal)}
.nv .seg__b.lx-dir__b{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;min-height:0;
padding:12px 16px 4px;border:0;border-radius:18px 18px 0 0;background:none;color:var(--nv-ink);text-align:left;cursor:pointer;
font:500 14px/1.3 var(--nv-font)}
.nv .seg__b.lx-dir__b[aria-pressed=true]{background:none;color:var(--nv-ink)}
.nv .seg__b.lx-dir__b:focus-visible{outline:3px solid var(--nv-teal);outline-offset:-3px;border-radius:18px}
.lx-dir__k{display:block;font:700 14px/1.3 var(--nv-font)!important;color:var(--nv-ink-2)!important;letter-spacing:-.005em!important;
overflow-wrap:anywhere;padding-inline-end:28px}
.lx-dir__to{color:var(--nv-mute);font-weight:600}
/* The camera shows this shore: a lens in the pressed row's corner. */
.lx-dir__b::after{content:"";position:absolute;right:14px;top:13px;width:18px;height:18px;opacity:0;transition:opacity .16s;
background:var(--nv-teal-ink);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h3.2L8.8 6h6.4l1.6 2.5H20V19H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.3'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h3.2L8.8 6h6.4l1.6 2.5H20V19H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.3'/%3E%3C/svg%3E") center/contain no-repeat}
.lx-dir__b[aria-pressed=true]::after{opacity:1}
.lx-dir__shut{display:block;font:600 13px/1.3 var(--nv-font);color:var(--nv-mute);flex-basis:100%}
.lx-dir__shut[hidden]{display:none}
.lx-dir__n{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;min-width:0}
.lx-dir__t{font:800 30px/1.1 var(--nv-font);letter-spacing:-.03em;color:var(--nv-ink);font-variant-numeric:tabular-nums}
.lx-dir__t:empty{display:none}
.lx-dir__n small{font:700 14px/1.35 var(--nv-font)!important;color:var(--nv-teal-ink)!important;opacity:1!important}
.lx-dir__then{font:500 13px/1.35 var(--nv-font)!important;color:var(--nv-mute)!important;opacity:1!important;font-variant-numeric:tabular-nums}
.lx-dir__then:empty{display:none}
/* The reading beside the button, as a v2 status pill. */
.lx-dir__q{padding:6px 16px 12px;min-width:0}
.lx-dir__b:not(:has(.lx-dir__then:not(:empty))){padding-bottom:6px}
.lx-dir__q .verdict{margin:0;padding:0;border:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--nv-ink)}
.lx-dir__q .state{display:inline-flex;align-items:center;gap:7px;min-height:30px;margin:0;padding:0 12px 0 10px;border-radius:var(--nv-r-pill);
font:700 13px/1.15 var(--nv-font);letter-spacing:0;background:var(--nv-off-bg);color:var(--nv-off-ink);max-width:100%}
.lx-dir__q .state::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--nv-off)}
.lx-dir__q .qstage--clear .state,.lx-dir__q .qstage--green .state{background:var(--nv-ok-bg);color:var(--nv-ok-ink)}
.lx-dir__q .qstage--clear .state::before,.lx-dir__q .qstage--green .state::before{background:var(--nv-ok)}
.lx-dir__q .qstage--yellow .state{background:var(--nv-warn-bg);color:var(--nv-warn-ink)}
.lx-dir__q .qstage--yellow .state::before{background:var(--nv-warn)}
.lx-dir__q .qstage--red .state{background:var(--nv-bad-bg);color:var(--nv-bad-ink)}
.lx-dir__q .qstage--red .state::before{background:var(--nv-bad)}
@media(prefers-reduced-motion:no-preference){
.lx-dir__q .qstage:not(.qstage--unavailable) .state::before{animation:lx-beat 2.6s ease-in-out infinite}
}
@keyframes lx-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.lx-dir__q .qbeta{margin-inline-start:2px;font:700 9px/1 var(--nv-font);letter-spacing:.08em;padding:3px 5px 2px;border-radius:5px;
border:1px solid currentColor;opacity:.75}
.lx-dir__q .qhow{position:relative;width:22px;height:22px;margin-inline-start:0;border-color:currentColor;opacity:.7;font:700 11px/1 var(--nv-font)}
.lx-dir__q .qhow::after{content:"";position:absolute;inset:-11px}
.lx-dir__q .qwhen{margin:0;font:600 12.5px/1.3 var(--nv-font);color:var(--nv-mute);opacity:1;font-variant-numeric:tabular-nums}
.lx-dir__q .qfull{margin:0;flex-basis:100%;font:600 13px/1.35 var(--nv-font);color:var(--nv-ink-2)}
.lx-dir__q .qstage--unavailable .state{font-weight:600}
@media(max-width:619px){
/* A phone: both shores and both readings above the tab bar, down to 320. */
.nv .stage{padding-top:8px}
.nv .stage__op{margin-top:8px}
.nv .stage .stage__op .op{display:none}
.nv .seg.lx-dirs{gap:8px;margin-top:10px}
.nv .seg__b.lx-dir__b{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:0;padding:10px 14px 2px}
.lx-dir__k{flex-basis:100%;font-size:13.5px!important}
.lx-dir__t{font-size:27px}
.lx-dir__n small{font-size:13.5px!important}
.lx-dir__then{font-size:12.5px!important}
.lx-dir__q{padding:4px 14px 10px}
.lx-dir__q .verdict{column-gap:8px}
.lx-dir__q .qhow{display:none}
.lx-dir__q .state{min-height:28px;font-size:12.5px}
.lx-dir__q .qwhen{font-size:12px}
.lx-dir__b::after{top:11px}
.nv .stage__top{gap:10px}
.nv .stage__k{margin:0}
.nv .stage__top .alerts{margin-top:0}
}
/* A short phone keeps the next boat off each shore and both readings; the two
after it are in the card under the picture. */
@media(max-width:619px) and (max-height:700px){.lx-dir__then{display:none}}
@media(min-width:1150px){
/* Wide enough for one line: time, the words, and the pill at the far end. */
.lx-dir{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.nv .seg__b.lx-dir__b{grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:11px 8px 11px 16px;
border-radius:18px 0 0 18px}
.lx-dir__k{grid-column:1/-1;grid-row:1;padding-inline-end:0}
.lx-dir__b::after{right:auto;left:auto;display:none}
.lx-dir__shut{grid-column:1/-1;grid-row:2;margin-top:1px}
.lx-dir__n{display:contents}
.lx-dir__t{grid-column:1;grid-row:3/5;font-size:32px;align-self:center}
.lx-dir__n small{grid-column:2;grid-row:3}
.lx-dir__then{grid-column:2;grid-row:4}
.lx-dir__q{padding:10px 16px 10px 4px;display:flex;justify-content:flex-end}
.lx-dir__q .verdict{flex-direction:column;align-items:flex-end;gap:4px}
.lx-dir__q .qfull{text-align:right;flex-basis:auto;max-width:22ch}
.lx-dir:has(>[aria-pressed=true]) .lx-dir__k::after{content:"";display:inline-block;width:16px;height:16px;margin-inline-start:8px;
vertical-align:-3px;background:var(--nv-teal-ink);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h3.2L8.8 6h6.4l1.6 2.5H20V19H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.3'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h3.2L8.8 6h6.4l1.6 2.5H20V19H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.3'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media(min-width:1150px) and (max-height:800px){.lx-qs{grid-area:seg}}
/* A sailings page with a watched ramp: the colour at each shore, first. */
.lx-qs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lx-q{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:8px 14px 8px 16px;background:#fff;border:1px solid var(--nv-line);
border-radius:16px;box-shadow:var(--nv-shadow);min-width:0;max-width:100%}
.lx-q__v{min-width:0}
.lx-q__v .qstrip__a{margin:0}
.lx-q__p{font:800 15px/1.2 var(--nv-font);color:var(--nv-ink)}
.lx-q__v .verdict{margin:0;padding:0;border:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.lx-q__v .state{display:inline-flex;align-items:center;gap:7px;min-height:30px;margin:0;padding:0 12px 0 10px;border-radius:var(--nv-r-pill);
font:700 13px/1.15 var(--nv-font);background:var(--nv-off-bg);color:var(--nv-off-ink)}
.lx-q__v .state::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--nv-off)}
.lx-q__v .qstage--clear .state,.lx-q__v .qstage--green .state{background:var(--nv-ok-bg);color:var(--nv-ok-ink)}
.lx-q__v .qstage--clear .state::before,.lx-q__v .qstage--green .state::before{background:var(--nv-ok)}
.lx-q__v .qstage--yellow .state{background:var(--nv-warn-bg);color:var(--nv-warn-ink)}
.lx-q__v .qstage--yellow .state::before{background:var(--nv-warn)}
.lx-q__v .qstage--red .state{background:var(--nv-bad-bg);color:var(--nv-bad-ink)}
.lx-q__v .qstage--red .state::before{background:var(--nv-bad)}
.lx-q__v .qbeta{font:700 9px/1 var(--nv-font);letter-spacing:.08em;padding:3px 5px 2px;border-radius:5px;border:1px solid currentColor;opacity:.75}
.lx-q__v .qhow{position:relative;width:22px;height:22px;margin:0;border-color:currentColor;opacity:.7;font:700 11px/1 var(--nv-font)}
.lx-q__v .qhow::after{content:"";position:absolute;inset:-11px}
.lx-q__v .qwhen{margin:0;font:600 12.5px/1.3 var(--nv-font);color:var(--nv-mute);opacity:1}
.lx-q__v .qfull{margin:0;font:600 13px/1.35 var(--nv-font);color:var(--nv-ink-2)}
/* ---- the camera: a rounded card, its caption as chips on the picture ---- */
.nv .shot{border-radius:var(--nv-r-card);background:#0f2a3d;box-shadow:var(--nv-shadow-hi);border:1px solid var(--nv-line)}
.nv .shot__f{background:#0f2a3d}
.nv .shot__b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 12px 10px;color:#fff;
background:linear-gradient(rgba(15,42,61,0),rgba(15,42,61,.55) 55%,rgba(15,42,61,.82));padding-right:min(42%,200px)}
@media(max-width:619px){.nv .shot__b{padding:28px 10px 8px;padding-right:10px}}
.nv .shot__meta{margin:0;padding:0;border:0;gap:8px}
.nv .shot__meta .live{font:800 10.5px var(--nv-font);letter-spacing:.08em;background:var(--nv-bad);color:#fff;padding:5px 9px}
.nv .shot__meta b{font:700 13.5px var(--nv-font)}
.nv .shot__meta .view{font:600 12px var(--nv-font)}
.nv .shot__age{font:600 12.5px var(--nv-font);color:#fff}
/* The reading still rides on the picture where there are no shore rows. */
.nv .shot__b .qstage .state{font-family:var(--nv-font)}
/* ---- the column beside the picture: white cards ---- */
.nv .stage__side{gap:12px}
.nv .scard{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);padding:16px 18px}
.nv .scard__k,.nv .scard--next .head__leadlabel{font:800 15px/1.3 var(--nv-font);letter-spacing:-.01em;text-transform:none;color:var(--nv-ink)}
.nv .scard--next .leg__where{font:600 14px/1.35 var(--nv-font);color:var(--nv-ink)}
.nv .scard--next .leg__where .from{color:var(--nv-mute)}
.nv .scard--next .leg__time{font:800 clamp(30px,3vw,40px)/1.05 var(--nv-font);letter-spacing:-.03em;color:var(--nv-ink)}
.nv .scard--next .leg__in{font:700 14px/1.3 var(--nv-font);color:var(--nv-teal-ink)}
.nv .scard--next .leg__rest{border-top:1px solid var(--nv-line)}
.nv .scard--next .leg__rest li{font-variant-numeric:tabular-nums}
.nv .scard--next .lead__t{font:700 15px var(--nv-font);color:var(--nv-ink)}
.nv .scard--next .lead__in{color:var(--nv-mute);font-weight:500}
.nv .leg__left button,.nv .leg__more button,.nv .qwhy{color:var(--nv-teal-ink);font-weight:600}
.nv .scard--next:has(~ .qstrip:not([hidden])){border-bottom:0;border-radius:var(--nv-r-card) var(--nv-r-card) 0 0;box-shadow:none}
.nv .qstrip{background:var(--nv-teal-soft);border:1px solid var(--nv-line);border-top:0;border-inline-start:1px solid var(--nv-line);
border-radius:0 0 var(--nv-r-card) var(--nv-r-card);padding:10px 18px 12px;font-family:var(--nv-font)}
.nv .scard--next ~ .qstrip:not([hidden]){margin-top:-12px}
.nv .qstrip .qhere{background:var(--nv-teal);border-color:var(--nv-teal);color:#fff;min-height:36px;padding:0 16px;font:700 13px var(--nv-font)}
.nv .qstrip .qhere:hover{background:var(--nv-teal-hi)}
/* the party and the ticket */
.nv .party__row>span:first-child{font:600 13px var(--nv-font);color:var(--nv-mute)}
.nv .calc__s{width:40px;height:40px;border-radius:50%;border:0;background:var(--nv-teal-soft);color:var(--nv-teal-ink);font:700 20px/1 var(--nv-font)}
.nv .calc__s:hover{background:#d3ecf4}
.nv .calc__n output{font:800 18px var(--nv-font);color:var(--nv-ink)}
.nv .party{border-top-color:var(--nv-line)}
.nv .party__n{font:800 26px var(--nv-font);letter-spacing:-.03em;color:var(--nv-ink)}
.nv .party__b{color:var(--nv-teal-ink);font:700 13px var(--nv-font)}
.nv .party__buy{min-height:48px;border-radius:var(--nv-r);background:var(--nv-teal);color:#fff;font:700 15px var(--nv-font);padding:0 20px;
box-shadow:0 6px 16px -6px rgba(21,127,156,.55)}
.nv .party__buy:hover{background:var(--nv-teal-hi);color:#fff}
/* ---- four answers, one press each ---- */
.nv .answers{gap:10px}
.nv .ans__b{background:#fff;border:1px solid var(--nv-line);border-radius:16px;box-shadow:var(--nv-shadow);padding:12px 36px 12px 16px;
font-family:var(--nv-font);color:var(--nv-ink);min-height:56px;position:relative;text-align:left}
.nv .ans__b:hover{border-color:#b9d9e5;background:#fbfdfe}
.nv .ans__b b{font:700 15px/1.3 var(--nv-font);color:var(--nv-ink)}
.nv .ans__b small{font:500 13px/1.35 var(--nv-font);color:var(--nv-mute)}
.nv .ans__b::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border:solid var(--nv-teal-ink);
border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg);background:none;opacity:.8}
/* ---- About this crossing ---- */
.nv .lx-about{margin-top:16px;display:grid;gap:10px 28px;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-card);
box-shadow:var(--nv-shadow);padding:18px 20px}
.lx-about__h{display:flex;align-items:center;gap:14px}
.lx-about__art{width:104px;height:auto;flex:none;border-radius:12px}
.lx-about__t{margin:0 0 6px;font:800 19px/1.2 var(--nv-font);letter-spacing:-.02em;color:var(--nv-ink)}
.nv .lx-about .lede{margin:0;font:500 15px/1.55 var(--nv-font);color:var(--nv-ink-2);max-width:68ch}
.nv .lx-about .stage__fine{margin:0;font:500 13px/1.5 var(--nv-font);color:var(--nv-mute);text-align:left}
.nv .lx-about .stage__fine a{color:var(--nv-teal-ink);font-weight:600}
@media(min-width:940px){
.nv .lx-about{grid-template-columns:auto minmax(0,1fr);align-items:center}
.nv .lx-about .lx-about__h{grid-row:1/3}
.nv .lx-about .lede,.nv .lx-about .stage__fine{grid-column:2}
}
/* The side rows are 30px taller than the old two-word control, and the
picture's width is what sets its height: the old caps, re-measured. */
@media(min-width:1150px) and (min-height:680px){
.nv .stage>.wrap{max-width:min(1760px,max(1300px,calc((100svh - var(--hdr) - 376px) * 16 / 9 + 404px)))}
}
@media(min-width:1150px) and (max-height:800px){
.nv .stage>.wrap{max-width:min(1760px,calc((100svh - 312px) * 16 / 9 + 404px))}
}
/* The short-laptop grid keeps its one-line footnote; the card goes under the
fold with its sentence intact instead. */
@media(min-width:1150px) and (max-height:800px){
.nv .stage .lx-about{margin-top:14px}
.nv .stage .lx-about .lede{display:block;font-size:14.5px}
.nv .stage .lx-about .stage__fine{white-space:normal;font-size:12.5px}
}
/* ---- the sailings list (catamarans, and ramps no camera watches) ---- */
.nv .sails__day{gap:10px}
.nv .sails__day b{font:800 17px var(--nv-font);letter-spacing:-.01em;color:var(--nv-ink)}
.nv .sails__step{width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--nv-teal-ink);box-shadow:var(--nv-shadow);
font:700 20px/1 var(--nv-font)}
.nv .sails__step:hover{background:var(--nv-teal-soft)}
/* The operator's footnote is about the marked boats: it follows them. */
.nv .sails>.sails__note{order:99;margin-top:4px}
.nv .stage .embed-snippet{grid-column:1/-1;font:500 13.5px var(--nv-font);color:var(--nv-mute)}
.nv .sails__hint,.nv .sails__none,.nv .sails__note{font:500 13.5px/1.45 var(--nv-font);color:var(--nv-mute)}
.nv .sails__j{background:#fff;border:1px solid var(--nv-line);border-radius:16px;box-shadow:var(--nv-shadow)}
.nv .sails__top{min-height:60px;padding-block:10px}
.nv .sails__t{font:800 26px/1 var(--nv-font);letter-spacing:-.03em;color:var(--nv-ink)}
.nv .sails__to b{font:700 15px/1.3 var(--nv-font);color:var(--nv-ink)}
.nv .sails__to .arrow{color:var(--nv-mute)}
.nv .sails__to small{font:500 12.5px/1.35 var(--nv-font);color:var(--nv-mute)}
.nv .sails__arr b{font:700 15px var(--nv-font);color:var(--nv-ink)}
.nv .sails__arr small{font:600 12.5px var(--nv-font);color:var(--nv-teal-ink)}
.nv .sails__j--gone{opacity:1;background:transparent;box-shadow:none;border-color:transparent}
.nv .sails__j--gone .sails__t,.nv .sails__j--gone .sails__to b,.nv .sails__j--gone .sails__arr b{color:var(--nv-mute)}
.nv .sails__j--gone .sails__arr small{color:var(--nv-mute)}
/* Rule zero on a sailings page: the boats still to come lead. Of the ones
gone today only the last stays, faded, as the "you just missed" row; the
rest are in the whole timetable, one press away. */
.nv .sails__j--gone:has(~ .sails__j--gone:not([hidden])){display:none}
.nv .sails__j--on{border-color:var(--nv-teal);box-shadow:0 0 0 1px var(--nv-teal),var(--nv-shadow)}
.nv .sails__j--on .sails__t{color:var(--nv-teal-ink)}
.nv .sails__side{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow-hi)}
.nv .sails__ht{font:800 30px/1 var(--nv-font);letter-spacing:-.03em;color:var(--nv-ink)}
.nv .sails__x{border-radius:50%;background:var(--nv-teal-soft);color:var(--nv-teal-ink);border:0;min-width:44px;min-height:44px}
/* ---- the sheets: timetable, fares, calculator, booking, ports ---- */
.nv .sheetbig{border:0;border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow-hi);background:#fff;color:var(--nv-ink);font-family:var(--nv-font)}
.nv .sheetbig::backdrop{background:rgba(15,42,61,.42);backdrop-filter:blur(3px)}
.nv .sheetbig .notice__kicker{font:800 12px/1.3 var(--nv-font);letter-spacing:.08em;text-transform:uppercase;color:var(--nv-teal-ink)}
.nv .sheetbig__h{font:800 clamp(22px,2.4vw,28px)/1.15 var(--nv-font);letter-spacing:-.02em;color:var(--nv-ink)}
.nv .sheetbig__f{border-top:1px solid var(--nv-line);background:#fff}
.nv .sheetbig__x{min-height:48px;border-radius:var(--nv-r);border:0;background:var(--nv-teal);color:#fff;font:700 15px var(--nv-font);
padding:0 22px;cursor:pointer;box-shadow:0 6px 16px -6px rgba(21,127,156,.55)}
.nv .sheetbig__x:hover{background:var(--nv-teal-hi)}
.nv .sheetbig .season{border-color:var(--nv-line)}
.nv .sheetbig table{font-variant-numeric:tabular-nums}
.nv .sheetbig th{font-weight:700;color:var(--nv-ink)}
.nv .sheetbig td,.nv .sheetbig th{border-color:var(--nv-line)}
.nv .sheetbig .whenbar,.nv .sheetbig [data-whenbar]{border-radius:var(--nv-r);border-color:var(--nv-line)}
/* ---- Crossing information: one card per line ---- */
.nv .xcs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.xc{display:flex;flex-direction:column;gap:8px;min-width:0;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-card);
box-shadow:var(--nv-shadow);padding:16px 18px 14px;transition:border-color .16s,box-shadow .16s}
.xc:hover{border-color:#b9d9e5;box-shadow:var(--nv-shadow-hi)}
.xc[hidden]{display:none}
.xc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.xc__h{margin:0;font:800 18px/1.25 var(--nv-font);letter-spacing:-.02em;min-width:0}
.nv .xc__h a{color:var(--nv-ink);text-decoration:none}
.nv .xc__h a:hover{text-decoration:underline;text-decoration-thickness:1.5px}
.xc__top .lx-kind{flex:none;margin-top:-1px}
.xc__sub{margin:-4px 0 0;font:600 14px/1.3 var(--nv-font);color:var(--nv-ink-2)}
.xc__sub:empty{display:none}
.xc__no{color:var(--nv-mute);font-weight:600}
.xc__mid{display:flex;align-items:center;gap:14px}
.xc__art{width:96px;height:auto;flex:none;border-radius:10px}
.xc__p{margin:0;font:500 13.5px/1.5 var(--nv-font);color:var(--nv-ink-2);
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.xc__foot{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.nv .xc__go{min-height:44px;padding:0 14px;gap:8px;font-size:14px}
.nv .xc__go svg{width:18px;height:18px}
.nv .xc__op{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 13.5px var(--nv-font);color:var(--nv-teal-ink);
text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.xc__op svg{width:15px;height:15px}
@media(max-width:380px){.xc__art{width:76px}}
/* on the place-to-place results */
.xcsec{margin:36px 0 0}
.xcsec__h{margin:0 0 4px;font:800 var(--nv-h2)/1.15 var(--nv-font);letter-spacing:-.02em;color:var(--nv-ink)}
/* ---- Questions about this crossing (route_qa.py): the about card's frame,
one question per row, so the list reads as a list and not a wall ---- */
.nv .route-qa{margin:16px auto 0;padding:18px 20px;background:#fff;border:1px solid var(--nv-line);
border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);max-width:var(--nv-max,1120px)}
.nv .route-qa h2{margin:0 0 4px;font:800 19px/1.2 var(--nv-font);letter-spacing:-.02em;color:var(--nv-ink)}
.nv .route-qa h3{margin:0;padding-top:14px;border-top:1px solid var(--nv-line);margin-top:14px;
font:700 15px/1.35 var(--nv-font);color:var(--nv-ink)}
.nv .route-qa h2+h3{border-top:0;margin-top:6px}
.nv .route-qa .answer{margin:4px 0 0;font:500 15px/1.55 var(--nv-font);color:var(--nv-ink-2);max-width:68ch}
.nv .route-qa a{color:var(--nv-teal-ink);font-weight:600}
/* route_content.py: the prose card reuses the questions card; paragraphs follow
each other under their h3, so they get a little air and a list gets bullets. */
.nv .rc .answer+.answer{margin-top:8px}
.nv .rc__l{margin:6px 0 0;padding-left:20px;max-width:68ch;font:500 15px/1.55 var(--nv-font);color:var(--nv-ink-2)}
.nv .rc__l li+li{margin-top:6px}
.nv .rc .note,.nv .rc .fineprint{margin:14px 0 0;max-width:68ch;font:500 13px/1.5 var(--nv-font);color:var(--nv-mute)}
@media(prefers-reduced-motion:reduce){
.lx-dir,.xc,.lx-dir__b::after{transition:none}
}
/* ============================================================================
Port page v2 ("Live ramp") - see styles_nv_port.py
========================================================================== */
main.wrap:has(> .pp){max-width:calc(1240px + 2 * var(--nv-pad));padding:10px var(--nv-pad) 40px}
.pp{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);
--pp-ink-chip:rgba(15,42,61,.74)}
.pp p,.pp-more p{max-width:none}
.pp-side{display:grid;gap:10px;align-content:start;min-width:0}
.pp-side .pp-about{margin-top:22px}
/* ---- title ---- */
.pp-h{padding:2px 2px 0}
.pp-k{margin:0;font:800 11.5px/1.3 var(--nv-font);letter-spacing:.09em;text-transform:uppercase;color:var(--nv-teal-ink)}
.pp-h h1{margin:3px 0 0;font-size:clamp(28px,8.4vw,40px);line-height:1.02;letter-spacing:-.035em;overflow-wrap:anywhere}
.pp-sub{margin:4px 0 0;font:500 15px/1.35 var(--nv-font);color:var(--nv-ink-2)}
/* ---- the status card ---- */
.pp-st{padding:12px 14px 10px;display:grid;gap:4px}
.pp-st .verdict{all:unset;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pp-st .verdict .state{display:flex;align-items:center;gap:6px;margin:0;font:inherit;min-width:0}
.pp-st [data-head],.pp-st__pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px 0 12px;
border-radius:var(--nv-r-pill);font:800 16px/1.15 var(--nv-font);letter-spacing:-.01em;
background:var(--nv-off-bg);color:var(--nv-off-ink)}
.pp-st [data-head]::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--nv-off);flex:none}
.pp-st__pill .nv-dot{width:12px;height:12px}
.pp-st .qstage--clear [data-head],.pp-st .qstage--green [data-head]{background:var(--nv-ok-bg);color:var(--nv-ok-ink)}
.pp-st .qstage--clear [data-head]::before,.pp-st .qstage--green [data-head]::before{background:var(--nv-ok)}
.pp-st .qstage--yellow [data-head]{background:var(--nv-warn-bg);color:var(--nv-warn-ink)}
.pp-st .qstage--yellow [data-head]::before{background:var(--nv-warn)}
.pp-st .qstage--red [data-head]{background:var(--nv-bad-bg);color:var(--nv-bad-ink)}
.pp-st .qstage--red [data-head]::before{background:var(--nv-bad)}
/* A fresh reading breathes; an old one is grey and still. */
.pp-st .verdict:not(.qstage--unavailable) [data-head]::before{animation:pp-beat 2.6s ease-in-out infinite}
@keyframes pp-beat{50%{opacity:.4}}
.pp-st .qstage--unavailable [data-head]{font-size:14px;font-weight:700}
.pp-st .qbeta{margin:0;padding:4px 7px;border-radius:6px;background:var(--nv-teal-soft);color:var(--nv-teal-ink);
font:800 10px/1 var(--nv-font);letter-spacing:.09em;text-transform:uppercase;border:0}
/* The "?" opens the explainer that lives in the line page's strip. */
.pp-st .qhow{display:none}
.pp-st .qwhen{margin:0 0 0 auto;font:600 13px/1.3 var(--nv-font);color:var(--nv-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-st .qfull{flex-basis:100%;margin:2px 0 0;font:700 14.5px/1.35 var(--nv-font);color:var(--nv-ink)}
.pp-st__for{display:flex;align-items:center;gap:4px;min-height:40px;margin:0 -4px;padding:0 4px;border-radius:10px;
font:600 14.5px/1.3 var(--nv-font);color:var(--nv-teal-ink);text-decoration:none}
.pp-st__for:hover{background:var(--nv-teal-soft)}
.pp-st__for svg{flex:none;margin-left:auto}
.pp-st__fine{margin:0;font:500 12.5px/1.4 var(--nv-font);color:var(--nv-mute)}
.pp-st__row{margin:0}
.pp-st .verdict[hidden]{display:none}
.pp-st__gone{display:none;margin:0}
.pp-st:has(.verdict[hidden]) .pp-st__gone,.pp-st:not(:has(.verdict)) .pp-st__gone{display:block}
.pp-st__gone .pp-st__pill,.pp-st .qstage--unavailable [data-head]{font-size:14px;font-weight:700}
.pp-st--off{gap:6px}
.pp-side .pp-about h2{font-size:20px}
/* ---- the picture ---- */
.pp-cam{position:relative;margin:0;border-radius:var(--nv-r-card);overflow:hidden;aspect-ratio:16/9;
background:linear-gradient(180deg,#cfe6f1,#9cc9dc);box-shadow:var(--nv-shadow);isolation:isolate}
.pp-cam picture{display:contents}
.pp-cam__img{display:block;width:100%;height:100%;object-fit:cover}
.pp-cam--scene .pp-cam__img{object-position:50% 58%}
.pp-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px;margin:0;
border-radius:var(--nv-r-pill);background:var(--pp-ink-chip);color:#fff;font:700 12.5px/1 var(--nv-font);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.pp-chip--tl{top:10px;left:10px}
.pp-chip--tr{top:10px;right:10px;font-variant-numeric:tabular-nums}
.pp-chip--bl{bottom:10px;left:10px;text-decoration:none}
.pp-chip--bl::after{content:"";position:absolute;inset:-7px -4px}
.pp-chip--bl:hover{background:var(--nv-ink)}
.pp-chip--off{min-height:34px;padding:0 14px 0 12px;gap:8px;background:rgba(255,255,255,.94);color:var(--nv-off-ink);
font-size:14.5px;font-weight:800;box-shadow:0 2px 10px rgba(15,42,61,.14)}
.pp-chip--off .nv-dot{width:11px;height:11px}
.pp-chip--br{right:10px;bottom:10px;min-height:24px;padding:0 9px;font-size:11.5px;font-weight:600;
background:rgba(255,255,255,.85);color:var(--nv-ink-2)}
.pp-live{width:8px;height:8px;border-radius:50%;background:#ff5a4a;box-shadow:0 0 0 3px rgba(255,90,74,.3);animation:pp-blink 2s ease-in-out infinite}
@keyframes pp-blink{50%{opacity:.35}}
.pp-cam__ths{position:absolute;z-index:2;right:10px;bottom:10px;display:flex;gap:6px}
.pp-cam__th{padding:0;width:84px;aspect-ratio:16/9;border:2px solid #fff;border-radius:10px;overflow:hidden;cursor:pointer;
background:var(--nv-ink);box-shadow:0 4px 12px rgba(15,42,61,.3)}
.pp-cam__th img{display:block;width:100%;height:100%;object-fit:cover}
.pp-cam__th:hover{transform:translateY(-1px)}
/* ---- next departures ---- */
.pp-deps{padding:8px 14px 6px}
.pp-deps__h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:4px 0 6px}
.pp-deps__h h2{margin:0;font-size:18px;line-height:1.2}
.pp-seg{display:block;margin:0;padding:0;border:0;min-height:0;background:none}
.pp-seg:hover{background:none}
.pp-seg .nv-seg{padding:3px}
.pp-seg .nv-seg>*{min-height:44px;padding:0 12px;font-size:14px}
.pp-seg .nv-seg svg{width:18px;height:18px}
.pp-list{max-width:none;border-top:0}
.pp-list .onward{border:0;border-top:1px solid var(--nv-line)}
.pp-list .onward__link{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;
grid-template-areas:"to t go" "meta in go";align-items:center;gap:1px 12px;min-height:56px;padding:9px 2px;border-radius:12px}
.pp-list .onward__link:hover{background:var(--nv-page)}
.pp-list .onward__to{display:contents}
.pp-list .stops{grid-area:to;min-width:0;font:800 16.5px/1.25 var(--nv-font);letter-spacing:-.01em;color:var(--nv-ink)}
.pp-list .stops .stop{white-space:normal}
.pp-list .stop__via{display:inline;margin:0 0 0 6px;font:500 12.5px/1.3 var(--nv-font);color:var(--nv-mute)}
.pp-list .onward__meta{grid-area:meta;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;
font:500 12.5px/1.3 var(--nv-font);color:var(--nv-mute)}
.pp-list .onward__meta .op{height:13px;width:auto;flex:none}
.pp-list .onward__via,.pp-list .onward__dur{font:inherit;color:inherit;overflow:hidden;text-overflow:ellipsis}
.pp-list .kind,.pp-ab .kind{flex:none;display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border:0;border-radius:var(--nv-r-pill);
background:var(--nv-teal-soft);color:var(--nv-teal-ink);font:700 11.5px/1 var(--nv-font);letter-spacing:.02em;text-transform:none}
.pp-list .onward__t{grid-area:t;justify-self:end;font:800 21px/1.1 var(--nv-font);letter-spacing:-.02em;color:var(--nv-teal-ink);font-stretch:normal}
.pp-list .onward__t sup,.pp-list .onward__t .glyph{font-size:.6em}
.pp-list .onward__in{grid-area:in;justify-self:end;min-width:0;max-width:none;text-align:right;
font:600 12.5px/1.3 var(--nv-font);color:var(--nv-mute);white-space:nowrap}
.pp-list .onward__go{grid-area:go;color:var(--nv-mute);display:flex}
.pp-list .onward__link:hover .onward__go{color:var(--nv-teal-ink);transform:translateX(2px)}
/* the soonest boat leads */
.pp-list .onward:first-child .onward__t{font-size:26px}
.pp-list .onward--none .onward__t{display:none}
.pp-list .onward--none .onward__in{grid-row:1/3;align-self:center;white-space:normal;max-width:10em}
.pp-list .onward--none .stops{color:var(--nv-ink-2)}
.pp-deps__none{margin:8px 0;font-size:14px;color:var(--nv-ink-2)}
.pp-ran{display:flex;align-items:center;min-height:44px;margin:2px 0 0;padding:0;border:0;background:none;cursor:pointer;font:600 14px/1.3 var(--nv-font);text-align:left}
body:not(:has(dialog.ran[id])) .pp-ran{display:none}
/* ---- under the fold ---- */
.pp-more{display:grid;gap:22px;margin-top:30px}
.pp-more>.notices,.pp-more>section:not(.pp-about){margin:0}
.pp-about h2,.pp-card h2{margin:0 0 12px;font-size:var(--nv-h2)}
.pp-abs{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pp-ab{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 14px;align-content:start;align-items:center;padding:14px 16px 6px;background:#fff;
border:1px solid var(--nv-line);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow)}
.pp-ab img{width:100%;height:auto;border-radius:12px;display:block;grid-row:1}
.pp-ab__b{display:contents}
.pp-ab h3{grid-column:2;grid-row:1}
.pp-ab__d,.pp-ab__ls{grid-column:1/-1}
.pp-ab h3{margin:0;font:800 17px/1.25 var(--nv-font);letter-spacing:-.01em}
.pp-ab h3 span{color:var(--nv-teal-ink);font-weight:600}
.pp-ab__d{margin:6px 0 0;font:500 14px/1.45 var(--nv-font);color:var(--nv-ink-2)}
.pp-ab__ls{list-style:none;margin:6px 0 0;padding:0}
.pp-ab__ls a{display:flex;align-items:center;gap:8px;min-height:44px;border-top:1px solid var(--nv-line);
color:var(--nv-teal-ink);font:600 14px/1.3 var(--nv-font);text-decoration:none}
.pp-ab__ls li:first-child a{border-top:0}
.pp-ab__ls a span{min-width:0}
.pp-ab__ls a svg{margin-left:auto;flex:none;color:var(--nv-mute)}
.pp-ab__ls a:hover span{text-decoration:underline;text-underline-offset:3px}
.pp-card{padding:18px var(--nv-pad)}
.pp-card .aside-sec{margin:0;padding:0;border:0}
.pp-card .answer{margin:0;line-height:2;color:var(--nv-mute)}
.pp-card .answer a{color:var(--nv-teal-ink);font-weight:600;padding:8px 0}
.pp-foot{display:flex;flex-wrap:wrap;gap:10px}
.pp-foot .nv-btn{font-size:15px;padding:0 18px;text-align:center;line-height:1.25}
@media(prefers-reduced-motion:reduce){.pp-live,.pp-st [data-head]::before{animation:none!important}}
/* ---- phones: one column, the picture gives height first ---- */
@media(max-width:999px){
/* The painted port is decoration: it gives up height before anything else. */
.pp-cam--scene{aspect-ratio:21/9}
}
@media(max-width:999px) and (max-height:700px){
.pp{gap:8px}
.pp-h h1{font-size:clamp(26px,7.6vw,34px)}
.pp-sub{font-size:14px;margin-top:2px}
.pp-st{padding:10px 12px 8px;gap:2px}
.pp-st [data-head],.pp-st__pill{min-height:30px;font-size:15px}
.pp-st__for{min-height:36px}
.pp-st__fine{display:none}
.pp-cam{aspect-ratio:2/1}
.pp-cam--scene{aspect-ratio:3/1}
.pp-cam__th{width:72px}
.pp-deps{padding-top:4px}
.pp-deps__h{padding:2px 0 2px}
.pp-deps__h h2{font-size:16.5px}
}
@media(max-width:419px){
/* the switch keeps its row beside the heading: icons, the words kept for screen readers */
.pp-seg .nv-seg>*{padding:0 13px}
.pp-seg .nv-seg span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pp-seg .nv-seg svg{width:20px;height:20px}
}
@media(max-width:519px){
.pp-cam__th:nth-child(n+2){display:none}
.pp-cam:has(.pp-cam__ths) .pp-chip--bl{max-width:calc(100% - 110px)}
}
/* The row keeps two lines: in a narrow card the crossing time goes first
(it is on the line's page and in "About these crossings"). */
.pp-deps{container-type:inline-size}
@container (max-width:470px){
.pp-list .onward__dur,.pp-list .onward__meta .op{display:none}
}
@media(max-width:380px){
.pp-list .onward__x{display:none}
.pp-list .stops{font-size:16px}
.pp-deps__h h2{font-size:15.5px}
.pp-st .qwhen{margin-left:0}
.pp-list .onward:first-child .onward__t{font-size:23px}
.pp-ab{grid-template-columns:72px minmax(0,1fr)}
}
/* Tablet portrait: room for the picture at full 16:9 and a wider card. */
@media(min-width:700px) and (max-width:999px){
.pp-h h1{font-size:44px}
.pp-cam--scene{aspect-ratio:5/2}
}
/* ---- desk: status + picture left, departures right ---- */
@media(min-width:1000px){
main.wrap:has(> .pp){padding-top:16px}
.pp{grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);grid-template-rows:auto auto 1fr;
grid-template-areas:"h h" "st deps" "cam deps";gap:14px 24px;align-items:start}
.pp-h{grid-area:h;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.pp-k{flex-basis:100%}
.pp-side{grid-area:deps}
.pp-h h1{margin:0;font-size:clamp(36px,3.3vw,52px)}
.pp-sub{margin:0;font-size:17px}
.pp-st{grid-area:st;padding:14px 18px 12px}
.pp-st .verdict{gap:6px 14px}
.pp-st--off{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.pp-st--off .pp-st__fine{display:block!important}
.pp-cam{grid-area:cam;
/* the column ends on the first screen: header, title, status and gaps */
max-height:calc(100svh - var(--nv-hd-h) - 250px);min-height:300px}
.pp-cam--scene{max-height:calc(100svh - var(--nv-hd-h) - 230px)}
.pp-deps{padding:14px 18px 10px}
.pp-deps__h h2{font-size:20px}
.pp-cam__th{width:120px}
.pp-chip{min-height:32px;font-size:13px}
.pp-more{margin-top:40px}
}
@media(min-width:1000px) and (max-height:800px){
.pp-st__fine{display:none}
.pp-cam{max-height:calc(100svh - var(--nv-hd-h) - 226px)}
}
@media(min-width:1800px){
main.wrap:has(> .pp){max-width:calc(1480px + 2 * var(--nv-pad))}
}
@media(min-width:1600px){
.pp{grid-template-columns:minmax(0,1.7fr) minmax(380px,1fr)}
}
/* ---- line page, phone (m8a, 1 Oct 2026) ---- */
.lp,.lp-buy,.lp-q,.scard--lp,.lp-card,.lp-day,.lp-mini{display:none}
@media(max-width:699px){
.nv .stage--lp{--lp-fold:calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h))}
.nv .stage--lp .lx-dirs,.nv .stage--lp .lx-qs,.nv .stage--lp .shot{display:none}
.nv .stage--lp .lp{display:block}
.nv .stage--lp .lp-hero{display:none}
/* -- before a side: the strait -- */
.nv .stage--lp:not([data-lp-on]){padding-bottom:12px}
.nv .stage--lp:not([data-lp-on]) .stage__g{display:none}
.nv .stage--lp .lp-pick{display:flex;flex-direction:column;gap:8px;margin-top:10px;
height:max(220px,calc(var(--lp-fold) - var(--lp-top,170px) - 12px))}
.lp-map{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;border:1px solid var(--nv-line);box-shadow:var(--nv-shadow);background:#bfe3f1}
.lp-geo{position:absolute;inset:0;width:100%;height:100%}
.lp-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--nv-ink);box-shadow:0 0 0 3px #fff;transform:translate(-50%,-50%);z-index:1}
.lp-land{position:absolute;font:800 11px/1 var(--nv-font);letter-spacing:.12em;text-transform:uppercase;color:rgba(40,80,60,.55)}
.lp-dur{position:absolute;transform:translate(-50%,-50%);padding:3px 7px;border-radius:8px;background:rgba(255,255,255,.92);font:800 11px/1 var(--nv-font);color:#b5531f}
.lp-pin{position:absolute;width:0;height:0;border:0;background:none;padding:0;cursor:pointer;z-index:2;color:inherit}
.lp-bub{position:absolute;left:0;transform:translateX(-50%);display:grid;gap:2px;padding:8px 30px 8px 11px;border-radius:14px;background:#fff;box-shadow:0 8px 20px -8px rgba(15,42,61,.5);text-align:left;white-space:nowrap}
.lp-pin--up .lp-bub{bottom:13px}.lp-pin--dn .lp-bub{top:13px}
.lp-bub small{font:700 10px/1 var(--nv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--nv-teal-ink)}
.lp-bub b{font:800 16px/1.1 var(--nv-font);color:var(--nv-ink)}
.lp-bub>span{font:600 11.5px/1 var(--nv-font);color:var(--nv-mute)}
.lp-chev{position:absolute;right:8px;top:calc(50% - 9px);width:18px;height:18px;color:var(--nv-teal)}
.lp-cm{position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:50%;background:var(--nv-ink);color:#fff;display:grid;place-items:center}
.lp-cm svg{width:12px;height:12px}
.lp-pin:focus-visible{outline:0}.lp-pin:focus-visible .lp-bub{outline:3px solid var(--nv-teal);outline-offset:2px}
.lp-hint{position:absolute;left:8px;right:8px;bottom:8px;margin:0;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.93);font:700 12.5px/1.3 var(--nv-font);color:var(--nv-ink-2);text-align:center}
.lp-facts{flex:none;display:flex;gap:6px;flex-wrap:wrap;margin:0}
.lp-facts span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:#fff;border:1px solid var(--nv-line);font:700 12px/1 var(--nv-font);color:var(--nv-ink-2)}
/* -- a side chosen: its picture, then one card -- */
/* the line it belongs to, and the way back to both ports */
.lp-bar{display:none}
.nv .stage--lp[data-lp-on]{--lp-barh:40px}
.nv .stage--lp[data-lp-on] .lp-bar{display:flex;align-items:center;gap:8px;height:var(--lp-barh);min-width:0}
.lp-back{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 11px 0 6px;border-radius:999px;border:1px solid var(--nv-line);background:#fff;font:700 12.5px/1 var(--nv-font);color:var(--nv-ink);cursor:pointer}
.lp-back svg{width:16px;height:16px;color:var(--nv-teal-ink)}
.lp-bar__t{min-width:0;font:800 14px/1.2 var(--nv-font);color:var(--nv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv .stage--lp[data-lp-on]{padding-top:0}
.nv .stage--lp[data-lp-on]>.wrap{display:flex;flex-direction:column}
.nv .stage--lp[data-lp-on]>.wrap>*{order:5}
.nv .stage--lp[data-lp-on] .stage__top{display:contents}
.nv .stage--lp[data-lp-on] .stage__id{display:none}
.nv .stage--lp[data-lp-on] .lp{order:1}
.nv .stage--lp[data-lp-on] .stage__g{order:2;display:flex;flex-direction:column;gap:12px;margin:0}
.nv .stage--lp[data-lp-on] .alerts{order:4;margin-top:12px}
.nv .stage--lp[data-lp-on] .lp-pick{display:none}
.nv .stage--lp[data-lp-on] .lp-hero:not([hidden]){display:block}
.lp-hero{position:relative;margin:0 -16px;height:max(170px,calc(var(--lp-fold) - var(--lp-card,300px) + 22px - var(--lp-barh,0px)));background:#0f2a3d;overflow:hidden}
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(15,42,61,.5),rgba(15,42,61,0) 30%,rgba(15,42,61,0) 60%,rgba(15,42,61,.5))}
.lp-cr{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.lp-cr::-webkit-scrollbar{display:none}
.lp-cr .lp-slide{flex:0 0 100%;position:relative;scroll-snap-align:start;background:#0f2a3d}
/* HAK burns its own caption into the top 22px of a frame; the hero has the
port and "Live" on it already, so the frame starts below that strip. */
.lp-cr img{position:absolute;left:0;top:min(-22px,-5%);width:100%;height:calc(100% + max(22px,5%));object-fit:cover}
.lp-tag{position:absolute;left:16px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(8,20,29,.62);color:#fff;font:800 11px/1 var(--nv-font);letter-spacing:.06em;text-transform:uppercase}
.lp-tag i{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25)}
.lp-tag svg{width:13px;height:13px}
.lp-tag--paint{background:rgba(255,255,255,.92);color:var(--nv-ink-2);text-transform:none;letter-spacing:0;font-weight:700}
.lp-sw{position:absolute;right:16px;top:9px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:34px;max-width:55%;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--nv-line);background:#fff;font:700 12.5px/1 var(--nv-font);color:var(--nv-ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-sw svg{flex:none;width:16px;height:16px;color:var(--nv-teal-ink)}
.lp-tabs{position:absolute;left:16px;right:16px;bottom:36px;z-index:3;display:flex;gap:6px}
.lp-tabs button{height:30px;padding:0 11px;border-radius:999px;border:0;background:rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:700 12px/1 var(--nv-font);cursor:pointer}
.lp-tabs button.on{background:#fff;color:var(--nv-ink)}
/* the switcher: a small picture of the next camera; one press swaps it in */
.lp-tabs{align-items:center;right:calc(16px + var(--lp-pipw) + 8px)}
.lp-hero{--lp-pipw:clamp(96px,30vw,140px)}
.nv .lp-tabs .lp-fsb{margin-left:0;flex:none}
.lp-lab{min-width:0;padding:0 2px;font:700 11.5px/1.2 var(--nv-font);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-pipw{position:absolute;right:12px;bottom:36px;z-index:3;display:flex;align-items:flex-end;gap:6px}
.lp-pip{position:relative;display:block;width:var(--lp-pipw);padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:#0f2a3d;
box-shadow:0 10px 24px -10px rgba(8,20,29,.85),0 0 0 2px rgba(255,255,255,.8)}
.lp-pip:active{transform:scale(.97)}
.lp-pip img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.lp-pip__l{position:absolute;left:0;right:0;bottom:0;padding:12px 7px 5px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(8,20,29,.9));font:700 10.5px/1.25 var(--nv-font)}
.lp-pip__l>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-pip__l small{display:block;font-weight:500;font-size:9.5px;opacity:.85}
.lp-pip__min{position:absolute;top:-9px;right:-9px;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(8,20,29,.9);color:#fff;display:grid;place-items:center;cursor:pointer}
.lp-pip__min::before{content:"";position:absolute;inset:-10px}
.lp-pip__min svg,.lp-pip__open svg{width:12px;height:12px}
.lp-pip__dot{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(8,20,29,.85);color:#fff;font:700 12px/1 var(--nv-font);cursor:pointer}
.lp-pip__dot svg{width:15px;height:15px}
.lp-pip__open{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(8,20,29,.85);color:#fff;display:grid;place-items:center;cursor:pointer}
.lp-pipw [hidden]{display:none}
/* a picture 110px tall has no room for a second one: the round button steps */
@media(max-height:600px) and (orientation:portrait){.lp-pip,.lp-pip__min,.lp-pip__open{display:none!important}.lp-pip__dot{display:inline-flex!important}.lp-hero{--lp-pipw:64px}}
.lp-all{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:0;background:var(--nv-ink);color:#fff;font:700 12px/1 var(--nv-font);cursor:pointer}
.lp-all svg{width:14px;height:14px}
.lp-honest>span{flex:1}.lp-honest{flex-wrap:wrap}
.lp-nx{font:700 11.5px/1.1 var(--nv-font);font-style:normal;color:var(--nv-teal-ink)}
.lp-nx[hidden]{display:none}
.lp-tabs .lp-fsb{margin-left:auto;width:34px;height:34px;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--nv-ink)}
.lp-fsb svg{width:16px;height:16px}
.lp-hero--nc::after{display:none}
/* A painting earns no more than it needs: on a tall phone the sailings list
comes up into the first screen instead of more sky. */
.lp-hero--nc{max-height:max(240px,40svh)}
.lp-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.lp-honest{position:absolute;left:16px;right:16px;bottom:34px;z-index:2;margin:0;display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.95);font:600 12px/1.35 var(--nv-font);color:var(--nv-ink-2)}
.lp-honest svg{width:18px;height:18px;flex:none;color:var(--nv-mute)}
/* the card: the page's own departure card, verdict, strip and ticket */
.nv .stage--lp[data-lp-on] .lp-card{order:2;display:flex}
.nv .stage--lp[data-lp-on] .stage__g{order:3}
.nv .stage--lp[data-lp-on] .lp-card>*{margin:0}
.nv .stage--lp[data-lp-on] .lp-card>.scard--next{display:block;padding:0;border:0;box-shadow:none;background:none;min-height:0}
.nv .stage--lp[data-lp-on] .lp-card>[hidden]{display:none}
.nv .stage--lp[data-lp-on] .lp-card .lp-q{display:block;padding:0}
.nv .stage--lp[data-lp-on] .lp-card .lp-buy{display:flex;gap:8px}
.nv .stage--lp[data-lp-on] .lp-card,
.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side{order:-1;position:relative;display:flex;flex-direction:column;gap:10px;
margin:-24px -6px 0;padding:14px 14px 12px;border-radius:20px;background:#fff;box-shadow:var(--nv-shadow-hi)}
.nv .stage--lp[data-lp-on] .lp-card{order:2}
.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side>*{order:5;margin:0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.scard--next{order:1}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.lp-wx{order:2}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.lp-q{order:3}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.qstrip{order:4}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.lp-buy{order:9}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .scard--next{order:1;display:block;padding:0;border:0;box-shadow:none;background:none;min-height:0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .scard--next[hidden]{display:none}
.nv .stage--lp[data-lp-on] .lp-q{order:2;display:block;padding:0}
.nv .stage--lp[data-lp-on] .lp-q[hidden],.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side>[hidden]{display:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip{order:3}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .scard--party{display:none}
.nv .stage--lp[data-lp-on] .lp-buy{order:9;display:flex;gap:8px;align-items:stretch}
.nv .stage--lp[data-lp-on] .scard--lp .leg__rest{display:none}
/* the card keeps everything today's card says (Gal, 1 Oct: "make sure we are
not losing functionality"): the evidence line and "all N sailings today"
share one small line, each later boat keeps its "in 1 h 25 min". */
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .lead__link .leg__then{display:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) :is(.leg__ev,.leg__more){display:block;margin:4px 0 0;font:600 12px/1.35 var(--nv-font);color:var(--nv-mute)}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__ev{margin-top:6px;padding-top:6px}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__more button{padding:0;border:0;background:none;font:700 12px/1.35 var(--nv-font);color:var(--nv-teal-ink);text-decoration:underline;cursor:pointer}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .head__leadlabel{margin:0 0 2px;font:700 11px/1.2 var(--nv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--nv-mute)}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;border:0;list-style:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest li{display:block;margin:0;padding:0;border:0;min-height:0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest li:not(.leg__left){display:grid;place-items:center;gap:2px;min-height:32px;padding:4px 9px;border-radius:9px;border:1px solid var(--nv-line);background:#fff}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest .lead__t{font:700 13.5px/1 var(--nv-font)}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest .lead__in{display:block;font:600 10.5px/1 var(--nv-font);color:var(--nv-mute);white-space:nowrap}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__left button{height:32px;padding:0 6px;font:700 12.5px/1 var(--nv-font)}
/* the reader's "I'm here" / "doesn't match" stay on the card, small, and
are in the full-screen camera too, where the evidence is. */
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip__a{display:flex;gap:10px;align-items:center;margin:6px 0 0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip__a .qhere{min-height:32px;padding:0 12px;font-size:12.5px}
.nv .stage--lp[data-lp-on] .lp-q .lx-dir__q{padding:0}
.nv .stage--lp[data-lp-on] .lp-q .verdict{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:0;border:0;background:none;box-shadow:none}
.nv .stage--lp[data-lp-on] .lp-q .verdict>*{margin:0}
.nv .stage--lp[data-lp-on] .lp-q .qwhen{font-size:12px}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip{padding:0;margin:0;border:0;background:none;box-shadow:none;min-height:0}
/* scrolled down: the card is one line and the picture takes the room
(app.js fold). Picture + card keep their sum, so nothing below moves. */
.lp-hero{transition:height .22s ease}
html:has(.stage--lp[data-lp-fold]){overflow-anchor:none}
.lp-cmp{display:none}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card){align-self:stretch;flex-direction:row;align-items:center;gap:8px;padding:10px 10px 10px 14px}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card)>:not(.lp-cmp,.lp-buy){display:none}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card) .lp-price{display:none}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card)>.lp-buy{flex:none;order:9}
.nv .stage--lp[data-lp-on][data-lp-fold] .lp-go{min-height:44px;padding:0 14px;font-size:14px}
.nv .stage--lp[data-lp-on][data-lp-fold] .lp-cmp{order:0;flex:1;min-width:0;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:0;border:0;background:none;text-align:left;color:var(--nv-ink);cursor:pointer}
.lp-cmp__d{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--nv-mute)}
.lp-cmp__d.qstage--clear,.lp-cmp__d.qstage--green{background:var(--nv-ok)}
.lp-cmp__d.qstage--yellow{background:var(--nv-warn)}
.lp-cmp__d.qstage--red{background:var(--nv-bad)}
.lp-cmp__w{grid-column:2/4;font:600 12px/1.2 var(--nv-font);color:var(--nv-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-cmp__t{grid-column:2;font:800 22px/1.1 var(--nv-font)}
.lp-cmp__i{grid-column:3;min-width:0;font:700 12.5px/1.2 var(--nv-font);color:var(--nv-teal-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a short phone: the later boats go behind "all N sailings today", which
lists every one of them; the picture may shrink to 130px. */
@media(max-height:700px){.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest,
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .head__leadlabel{display:none}
.lp-hero{height:max(130px,calc(var(--lp-fold) - var(--lp-card,300px) + 22px - var(--lp-barh,0px)))}
.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side{gap:6px;padding:12px 12px 10px}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__time{font-size:38px}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip__a{margin:2px 0 0}}
/* 600px tall (an SE): the evidence line opens "all N sailings today" instead */
@media(max-height:600px){.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__ev{display:none}
.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side{gap:4px;padding-bottom:8px}
.lp-hero{height:max(108px,calc(var(--lp-fold) - var(--lp-card,300px) + 22px - var(--lp-barh,0px)))}}
.lp-price{flex:none;display:grid;place-items:center;gap:2px;min-width:84px;padding:6px 10px;border-radius:14px;border:1px solid var(--nv-line);background:#fff;cursor:pointer;color:var(--nv-ink)}
.lp-price b{font:800 17px/1 var(--nv-font)}
.lp-price small{font:600 10.5px/1.2 var(--nv-font);color:var(--nv-mute);white-space:nowrap;text-align:center}
.lp-price b:empty{display:none}
.lp-go{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 12px;border-radius:14px;background:var(--nv-teal);color:#fff!important;font:800 15px/1.1 var(--nv-font);text-decoration:none;text-align:center}
/* it leaves for jadrolinija.hr: say so, like .party__buy (Efry, 4 Oct) */
.lp-go::after{content:"\2197";font-weight:700;opacity:.8;font-size:13px}
.lp-sails-off{display:none!important}
.lp-wx{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 12.5px/1.3 var(--nv-font);color:var(--nv-ink-2)}
.nv .stage--lp[data-lp-on] .lp-card .lp-wx{order:2}
.nv .stage--lp[data-lp-on] .lp-card .lp-wx[hidden]{display:none}
/* -- the camera, full screen -- */
.lp-fs{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#08141d;color:#fff}
.lp-fs[open]{display:flex;flex-direction:column}
.lp-fs::backdrop{background:#08141d}
.lp-fs__top{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px}
.lp-fs__top span{display:grid;gap:3px}
.lp-fs__top b{font:800 18px/1.1 var(--nv-font)}.lp-fs__top small{font:600 12px/1 var(--nv-font);opacity:.75}
.lp-fs__top button{margin-left:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.lp-fs__top button svg{width:20px;height:20px}
.lp-fs__img{flex:1;display:grid;place-items:center;min-height:0;overflow:hidden;touch-action:pinch-zoom}
.lp-fs__img{position:relative}
.lp-fs__img img{width:100%;max-height:100%;object-fit:contain}
.lp-fs__st{position:absolute;top:calc(50% - 24px);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#08141d;display:grid;place-items:center;cursor:pointer}
.lp-fs__st svg{width:22px;height:22px}.lp-fs__st[hidden]{display:none}
.lp-fs__st--p{left:10px}.lp-fs__st--n{right:10px}
.lp-fs__hak{margin-left:auto;font:600 12px/1 var(--nv-font);color:#fff!important;opacity:.8}
.lp-fs__tabs{display:flex;gap:6px;padding:10px 16px;overflow-x:auto}
.lp-fs__tabs button{flex:none;display:grid;gap:4px;padding:4px;border-radius:10px;border:2px solid transparent;background:rgba(255,255,255,.08);color:#fff;font:700 11.5px/1 var(--nv-font);cursor:pointer;width:96px}
.lp-fs__tabs button img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.lp-fs__tabs button.on{border-color:#fff}
.lp-fs__act{display:flex;gap:8px;margin:0;padding:0 16px calc(16px + env(safe-area-inset-bottom))}
.lp-fs__act:empty{display:none}
.lp-fs__act button{flex:1;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font:700 13.5px/1.2 var(--nv-font);cursor:pointer}
}
/* sideways phone: the picture left, the card right */
@media(max-width:699px) and (orientation:landscape) and (max-height:500px){
.nv .stage--lp:not([data-lp-on]) .stage__op,.nv .stage--lp:not([data-lp-on]) .stage__k,.nv .stage--lp .lp-facts{display:none}
.lp-pin--up .lp-bub,.lp-pin--dn .lp-bub{top:50%;bottom:auto}
.lp-pin--up .lp-bub{transform:translate(calc(-100% - 12px),-50%)}
.lp-pin--dn .lp-bub{transform:translate(12px,-50%)}
.lp-hint{left:auto;bottom:auto;top:8px;right:8px}
.nv .stage--lp .lp-pick{height:max(110px,calc(var(--lp-fold) - var(--lp-top,120px) - 12px))}
.nv .stage--lp[data-lp-on]>.wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:0}
.nv .stage--lp[data-lp-on]>.wrap>*{grid-column:1/-1}
.nv .stage--lp[data-lp-on] .lp{grid-column:1;grid-row:1}
.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__g,.nv .stage--lp[data-lp-on] .lp-card{grid-column:2;grid-row:1;min-width:0}
.lp-hero{margin-right:0;height:calc(var(--lp-fold) - var(--lp-barh,0px))}.lp-hero--nc{max-height:none}
.lp-tabs,.lp-honest,.lp-pipw{bottom:12px}
.nv .stage--lp[data-lp-on] .lp-card,.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side{margin:0 -16px 0 0;padding:8px 14px;gap:6px;border-radius:0;box-shadow:none;min-height:var(--lp-fold);justify-content:center}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__ref,.nv .stage--lp[data-lp-on] .lp-q .qwhen,
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__where{display:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__time{font-size:30px}
/* 375px tall: the evidence line is the first line of "all N sailings today",
and the two reader buttons are in the full-screen camera */
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) :is(.leg__ev,.qstrip__a){display:none}
.lp-go{min-height:42px}
.lp-fs[open]{display:grid;grid-template-columns:1fr 240px;grid-template-rows:auto 1fr;align-content:start}
.lp-fs__top{grid-column:1/-1}.lp-fs__tabs{flex-wrap:wrap;align-content:start}.lp-fs__tabs button{width:100px}
}
@media(min-width:700px){
.lp-map{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;border:1px solid var(--nv-line);box-shadow:var(--nv-shadow);background:#bfe3f1}
.lp-geo{position:absolute;inset:0;width:100%;height:100%}
.lp-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--nv-ink);box-shadow:0 0 0 3px #fff;transform:translate(-50%,-50%);z-index:1}
.lp-land{position:absolute;font:800 11px/1 var(--nv-font);letter-spacing:.12em;text-transform:uppercase;color:rgba(40,80,60,.55)}
.lp-dur{position:absolute;transform:translate(-50%,-50%);padding:3px 7px;border-radius:8px;background:rgba(255,255,255,.92);font:800 11px/1 var(--nv-font);color:#b5531f}
.lp-pin{position:absolute;width:0;height:0;border:0;background:none;padding:0;cursor:pointer;z-index:2;color:inherit}
.lp-bub{position:absolute;left:0;transform:translateX(-50%);display:grid;gap:2px;padding:8px 30px 8px 11px;border-radius:14px;background:#fff;box-shadow:0 8px 20px -8px rgba(15,42,61,.5);text-align:left;white-space:nowrap}
.lp-pin--up .lp-bub{bottom:13px}
.lp-pin--dn .lp-bub{top:13px}
.lp-bub small{font:700 10px/1 var(--nv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--nv-teal-ink)}
.lp-bub b{font:800 16px/1.1 var(--nv-font);color:var(--nv-ink)}
.lp-bub>span{font:600 11.5px/1 var(--nv-font);color:var(--nv-mute)}
.lp-chev{position:absolute;right:8px;top:calc(50% - 9px);width:18px;height:18px;color:var(--nv-teal)}
.lp-cm{position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:50%;background:var(--nv-ink);color:#fff;display:grid;place-items:center}
.lp-cm svg{width:12px;height:12px}
.lp-pin:focus-visible{outline:0}
.lp-pin:focus-visible .lp-bub{outline:3px solid var(--nv-teal);outline-offset:2px}
.lp-hint{position:absolute;left:8px;right:8px;bottom:8px;margin:0;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.93);font:700 12.5px/1.3 var(--nv-font);color:var(--nv-ink-2);text-align:center}
.lp-facts{flex:none;display:flex;gap:6px;flex-wrap:wrap;margin:0}
.lp-facts span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:#fff;border:1px solid var(--nv-line);font:700 12px/1 var(--nv-font);color:var(--nv-ink-2)}
.lp-bar{display:none}
.lp-back{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 11px 0 6px;border-radius:999px;border:1px solid var(--nv-line);background:#fff;font:700 12.5px/1 var(--nv-font);color:var(--nv-ink);cursor:pointer}
.lp-back svg{width:16px;height:16px;color:var(--nv-teal-ink)}
.lp-bar__t{min-width:0;font:800 14px/1.2 var(--nv-font);color:var(--nv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-hero{position:relative;margin:0 -16px;height:max(170px,calc(var(--lp-fold) - var(--lp-card,300px) + 22px - var(--lp-barh,0px)));background:#0f2a3d;overflow:hidden}
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(15,42,61,.5),rgba(15,42,61,0) 30%,rgba(15,42,61,0) 60%,rgba(15,42,61,.5))}
.lp-cr{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.lp-cr::-webkit-scrollbar{display:none}
.lp-cr .lp-slide{flex:0 0 100%;position:relative;scroll-snap-align:start;background:#0f2a3d}
.lp-cr img{position:absolute;left:0;top:min(-22px,-5%);width:100%;height:calc(100% + max(22px,5%));object-fit:cover}
.lp-tag{position:absolute;left:16px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(8,20,29,.62);color:#fff;font:800 11px/1 var(--nv-font);letter-spacing:.06em;text-transform:uppercase}
.lp-tag i{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25)}
.lp-tag svg{width:13px;height:13px}
.lp-tag--paint{background:rgba(255,255,255,.92);color:var(--nv-ink-2);text-transform:none;letter-spacing:0;font-weight:700}
.lp-sw{position:absolute;right:16px;top:9px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:34px;max-width:55%;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--nv-line);background:#fff;font:700 12.5px/1 var(--nv-font);color:var(--nv-ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-sw svg{flex:none;width:16px;height:16px;color:var(--nv-teal-ink)}
.lp-tabs{position:absolute;left:16px;right:16px;bottom:36px;z-index:3;display:flex;gap:6px}
.lp-tabs button{height:30px;padding:0 11px;border-radius:999px;border:0;background:rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:700 12px/1 var(--nv-font);cursor:pointer}
.lp-tabs button.on{background:#fff;color:var(--nv-ink)}
.lp-tabs{align-items:center;right:calc(16px + var(--lp-pipw) + 8px)}
.lp-hero{--lp-pipw:clamp(96px,30vw,140px)}
.nv .lp-tabs .lp-fsb{margin-left:0;flex:none}
.lp-lab{min-width:0;padding:0 2px;font:700 11.5px/1.2 var(--nv-font);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-pipw{position:absolute;right:12px;bottom:36px;z-index:3;display:flex;align-items:flex-end;gap:6px}
.lp-pip{position:relative;display:block;width:var(--lp-pipw);padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:#0f2a3d;
box-shadow:0 10px 24px -10px rgba(8,20,29,.85),0 0 0 2px rgba(255,255,255,.8)}
.lp-pip:active{transform:scale(.97)}
.lp-pip img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.lp-pip__l{position:absolute;left:0;right:0;bottom:0;padding:12px 7px 5px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(8,20,29,.9));font:700 10.5px/1.25 var(--nv-font)}
.lp-pip__l>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-pip__l small{display:block;font-weight:500;font-size:9.5px;opacity:.85}
.lp-pip__min{position:absolute;top:-9px;right:-9px;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(8,20,29,.9);color:#fff;display:grid;place-items:center;cursor:pointer}
.lp-pip__min::before{content:"";position:absolute;inset:-10px}
.lp-pip__min svg,.lp-pip__open svg{width:12px;height:12px}
.lp-pip__dot{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(8,20,29,.85);color:#fff;font:700 12px/1 var(--nv-font);cursor:pointer}
.lp-pip__dot svg{width:15px;height:15px}
.lp-pip__open{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(8,20,29,.85);color:#fff;display:grid;place-items:center;cursor:pointer}
.lp-pipw [hidden]{display:none}
.lp-all{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:0;background:var(--nv-ink);color:#fff;font:700 12px/1 var(--nv-font);cursor:pointer}
.lp-all svg{width:14px;height:14px}
.lp-honest>span{flex:1}
.lp-honest{flex-wrap:wrap}
.lp-nx{font:700 11.5px/1.1 var(--nv-font);font-style:normal;color:var(--nv-teal-ink)}
.lp-nx[hidden]{display:none}
.lp-tabs .lp-fsb{margin-left:auto;width:34px;height:34px;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--nv-ink)}
.lp-fsb svg{width:16px;height:16px}
.lp-hero--nc::after{display:none}
.lp-hero--nc{max-height:max(240px,40svh)}
.lp-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.lp-honest{position:absolute;left:16px;right:16px;bottom:34px;z-index:2;margin:0;display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.95);font:600 12px/1.35 var(--nv-font);color:var(--nv-ink-2)}
.lp-honest svg{width:18px;height:18px;flex:none;color:var(--nv-mute)}
.nv .stage--lp[data-lp-on] .lp-card{order:2;display:flex}
.nv .stage--lp[data-lp-on] .lp-card>*{margin:0}
.nv .stage--lp[data-lp-on] .lp-card>.scard--next{display:block;padding:0;border:0;box-shadow:none;background:none;min-height:0}
.nv .stage--lp[data-lp-on] .lp-card>[hidden]{display:none}
.nv .stage--lp[data-lp-on] .lp-card .lp-q{display:block;padding:0}
.nv .stage--lp[data-lp-on] .lp-card .lp-buy{display:flex;gap:8px}
.nv .stage--lp[data-lp-on] .lp-card,
.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side{order:-1;position:relative;display:flex;flex-direction:column;gap:10px;
margin:-24px -6px 0;padding:14px 14px 12px;border-radius:20px;background:#fff;box-shadow:var(--nv-shadow-hi)}
.nv .stage--lp[data-lp-on] .lp-card{order:2}
.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side>*{order:5;margin:0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.scard--next{order:1}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.lp-wx{order:2}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.lp-q{order:3}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.qstrip{order:4}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card)>.lp-buy{order:9}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .scard--next{order:1;display:block;padding:0;border:0;box-shadow:none;background:none;min-height:0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .scard--next[hidden]{display:none}
.nv .stage--lp[data-lp-on] .lp-q{order:2;display:block;padding:0}
.nv .stage--lp[data-lp-on] .lp-q[hidden],.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side>[hidden]{display:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip{order:3}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .scard--party{display:none}
.nv .stage--lp[data-lp-on] .lp-buy{order:9;display:flex;gap:8px;align-items:stretch}
.nv .stage--lp[data-lp-on] .scard--lp .leg__rest{display:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .lead__link .leg__then{display:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) :is(.leg__ev,.leg__more){display:block;margin:4px 0 0;font:600 12px/1.35 var(--nv-font);color:var(--nv-mute)}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__ev{margin-top:6px;padding-top:6px}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__more button{padding:0;border:0;background:none;font:700 12px/1.35 var(--nv-font);color:var(--nv-teal-ink);text-decoration:underline;cursor:pointer}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .head__leadlabel{margin:0 0 2px;font:700 11px/1.2 var(--nv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--nv-mute)}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;border:0;list-style:none}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest li{display:block;margin:0;padding:0;border:0;min-height:0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest li:not(.leg__left){display:grid;place-items:center;gap:2px;min-height:32px;padding:4px 9px;border-radius:9px;border:1px solid var(--nv-line);background:#fff}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest .lead__t{font:700 13.5px/1 var(--nv-font)}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__rest .lead__in{display:block;font:600 10.5px/1 var(--nv-font);color:var(--nv-mute);white-space:nowrap}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .leg__left button{height:32px;padding:0 6px;font:700 12.5px/1 var(--nv-font)}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip__a{display:flex;gap:10px;align-items:center;margin:6px 0 0}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip__a .qhere{min-height:32px;padding:0 12px;font-size:12.5px}
.nv .stage--lp[data-lp-on] .lp-q .lx-dir__q{padding:0}
.nv .stage--lp[data-lp-on] .lp-q .verdict{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:0;border:0;background:none;box-shadow:none}
.nv .stage--lp[data-lp-on] .lp-q .verdict>*{margin:0}
.nv .stage--lp[data-lp-on] .lp-q .qwhen{font-size:12px}
.nv .stage--lp[data-lp-on] :is(.stage__side,.lp-card) .qstrip{padding:0;margin:0;border:0;background:none;box-shadow:none;min-height:0}
.lp-hero{transition:height .22s ease}
.lp-cmp{display:none}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card){align-self:stretch;flex-direction:row;align-items:center;gap:8px;padding:10px 10px 10px 14px}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card)>:not(.lp-cmp,.lp-buy){display:none}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card) .lp-price{display:none}
.nv .stage--lp[data-lp-on][data-lp-fold] :is(.stage__side,.lp-card)>.lp-buy{flex:none;order:9}
.lp-cmp__d{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--nv-mute)}
.lp-cmp__d.qstage--clear,.lp-cmp__d.qstage--green{background:var(--nv-ok)}
.lp-cmp__d.qstage--yellow{background:var(--nv-warn)}
.lp-cmp__d.qstage--red{background:var(--nv-bad)}
.lp-cmp__w{grid-column:2/4;font:600 12px/1.2 var(--nv-font);color:var(--nv-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-cmp__t{grid-column:2;font:800 22px/1.1 var(--nv-font)}
.lp-cmp__i{grid-column:3;min-width:0;font:700 12.5px/1.2 var(--nv-font);color:var(--nv-teal-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-price{flex:none;display:grid;place-items:center;gap:2px;min-width:84px;padding:6px 10px;border-radius:14px;border:1px solid var(--nv-line);background:#fff;cursor:pointer;color:var(--nv-ink)}
.lp-price b{font:800 17px/1 var(--nv-font)}
.lp-price small{font:600 10.5px/1.2 var(--nv-font);color:var(--nv-mute);white-space:nowrap;text-align:center}
.lp-price b:empty{display:none}
.lp-go{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 12px;border-radius:14px;background:var(--nv-teal);color:#fff!important;font:800 15px/1.1 var(--nv-font);text-decoration:none;text-align:center}
.lp-go::after{content:"\2197";font-weight:700;opacity:.8;font-size:13px}
.lp-sails-off{display:none!important}
.lp-wx{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 12.5px/1.3 var(--nv-font);color:var(--nv-ink-2)}
.nv .stage--lp[data-lp-on] .lp-card .lp-wx{order:2}
.nv .stage--lp[data-lp-on] .lp-card .lp-wx[hidden]{display:none}
.lp-fs{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#08141d;color:#fff}
.lp-fs[open]{display:flex;flex-direction:column}
.lp-fs::backdrop{background:#08141d}
.lp-fs__top{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px}
.lp-fs__top span{display:grid;gap:3px}
.lp-fs__top b{font:800 18px/1.1 var(--nv-font)}
.lp-fs__top small{font:600 12px/1 var(--nv-font);opacity:.75}
.lp-fs__top button{margin-left:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.lp-fs__top button svg{width:20px;height:20px}
.lp-fs__img{flex:1;display:grid;place-items:center;min-height:0;overflow:hidden;touch-action:pinch-zoom}
.lp-fs__img{position:relative}
.lp-fs__img img{width:100%;max-height:100%;object-fit:contain}
.lp-fs__st{position:absolute;top:calc(50% - 24px);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#08141d;display:grid;place-items:center;cursor:pointer}
.lp-fs__st svg{width:22px;height:22px}
.lp-fs__st[hidden]{display:none}
.lp-fs__st--p{left:10px}
.lp-fs__st--n{right:10px}
.lp-fs__hak{margin-left:auto;font:600 12px/1 var(--nv-font);color:#fff!important;opacity:.8}
.lp-fs__tabs{display:flex;gap:6px;padding:10px 16px;overflow-x:auto}
.lp-fs__tabs button{flex:none;display:grid;gap:4px;padding:4px;border-radius:10px;border:2px solid transparent;background:rgba(255,255,255,.08);color:#fff;font:700 11.5px/1 var(--nv-font);cursor:pointer;width:96px}
.lp-fs__tabs button img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.lp-fs__tabs button.on{border-color:#fff}
.lp-fs__act{display:flex;gap:8px;margin:0;padding:0 16px calc(16px + env(safe-area-inset-bottom))}
.lp-fs__act:empty{display:none}
.lp-fs__act button{flex:1;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font:700 13.5px/1.2 var(--nv-font);cursor:pointer}
.nv .stage--lp{--lp-fold:calc(100svh - var(--nv-hd-h) - var(--nv-tabs-h) - var(--nv-tk-h));min-height:0;display:block}
.nv .stage--lp>.wrap{display:block}
.nv .stage--lp .lx-dirs,.nv .stage--lp .lx-qs,.nv .stage--lp .shot{display:none}
.nv .stage--lp .lp{display:contents}
.nv .stage--lp .lp-hero,.nv .stage--lp .lp-bar{display:none}
.lp-pipw,.lp-tabs{bottom:16px}
.lp-hero{--lp-pipw:clamp(150px,16vw,240px)}
.lp-bub b{font-size:18px}.lp-bub{padding:10px 32px 10px 13px}
.lp-price{max-width:46%}.lp-price small{white-space:normal;max-width:none;text-align:center}
/* before a side */
.nv .stage--lp:not([data-lp-on]) .stage__g,.nv .stage--lp:not([data-lp-on]) .lp-card,
.nv .stage--lp:not([data-lp-on]) .lp-day{display:none}
.nv .stage--lp .lp-pick{display:flex;flex-direction:column;gap:10px;margin-top:14px;
height:max(380px,calc(var(--lp-fold) - var(--lp-top,200px) - 28px))}
.nv .stage--lp .lp-facts{order:-1}
.nv .stage--lp .lp-hint{left:50%;right:auto;transform:translateX(-50%);padding:8px 16px;font-size:14px}
/* a side chosen. The picture is not sticky: a sticky picture outran its
column and painted over the sections below (Gal, 1 Oct: "the scrolling
is broken"). */
.nv .stage--lp[data-lp-on] .lp-pick{display:none}
.nv .stage--lp[data-lp-on]>.wrap{display:grid;column-gap:20px;
grid-template-columns:minmax(320px,400px) minmax(0,1fr);
grid-template-areas:"top top" "card wall" "day wall";
grid-template-rows:auto auto 1fr}
.nv .stage--lp[data-lp-on]>.wrap>*{grid-area:auto;grid-column:1/-1}
/* "< Both ports" is a round button left of the line's head, in the head's
own row: no height of its own (Gal, 1 Oct: "wasting valuable vertical
space"). Its words stay for screen readers and as the tooltip. */
.nv .stage--lp[data-lp-on] .lp-bar{grid-area:top;display:flex;align-self:center;justify-self:start;z-index:1;margin-bottom:14px}
.nv .stage--lp[data-lp-on] .lp-bar__t{display:none}
.nv .stage--lp[data-lp-on] .lp-back{width:40px;height:40px;padding:0;justify-content:center;box-shadow:var(--nv-shadow)}
.nv .stage--lp[data-lp-on] .lp-back svg{width:20px;height:20px}
.lp-back__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nv .stage--lp[data-lp-on] .stage__top{grid-area:top;margin-bottom:14px;padding-left:54px}
.nv .stage--lp[data-lp-on] .stage__g{display:contents}
.nv .stage--lp[data-lp-on] .lp-hero:not([hidden]){grid-area:wall;display:block;position:relative;align-self:start;
margin:0;height:clamp(360px,calc(100svh - var(--lp-htop,210px) - 40px),860px);border-radius:24px}
.nv .stage--lp[data-lp-on] .lp-hero--nc{max-height:none}
.nv .stage--lp[data-lp-on] .lp-card,.nv .stage--lp:not(.stage--sails)[data-lp-on] .stage__side{grid-area:card;align-self:start;margin:0}
.nv .stage--lp.stage--sails[data-lp-on] .sails{grid-area:day;margin-top:12px;align-self:stretch}
.nv .stage--lp[data-lp-on] .lp-day:not([hidden]){grid-area:day;display:block;margin-top:12px;padding:16px;border-radius:20px;
background:#fff;box-shadow:var(--nv-shadow)}
.nv .stage--lp[data-lp-on] .lp-q .lx-dir__q{justify-content:flex-start;padding:0}
.nv .stage--lp[data-lp-on] .lp-q .verdict{flex-direction:row;align-items:center}
.nv .stage--lp[data-lp-on] .lp-q .qfull{text-align:left;max-width:none}
.nv .stage--lp[data-lp-on] .answers{margin-top:16px}
.lp-day__h{margin:0 0 10px;font:800 15px/1.2 var(--nv-font);color:var(--nv-ink)}
.lp-day__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.lp-day__l li{display:grid;place-items:center;height:36px;border-radius:10px;background:var(--nv-field,#eef4f7);font:700 14.5px/1 var(--nv-font);font-variant-numeric:tabular-nums}
.lp-day__l li.gone{background:none;color:#9fb0bb;text-decoration:line-through;font-weight:600}
.lp-day__l li.nx{background:var(--nv-teal);color:#fff}
/* ---- option B (Gal, 1 Oct: "implement B"): the line's head on a painted
strait, the strait small on it, a port scene over the day, v2 cards ---- */
.nv .stage--lp[data-lp-on] .stage__top{position:relative;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:16px;padding:12px 22px 12px calc(var(--lp-mw) + 82px);margin-bottom:14px;
border-radius:24px;box-shadow:0 16px 40px -26px rgba(15,42,61,.5);
background:linear-gradient(90deg,rgba(238,245,249,.94) 0%,rgba(238,245,249,.74) 40%,rgba(238,245,249,0) 66%),url(/img/lp-strait-banner-1536.webp?v=edd25dce) center 62%/cover #dcecf3}
.nv .stage--lp[data-lp-on] .lp-bar{margin:0 0 14px 18px}
/* the strait sits left, after the way back: the top right is where the
cookie question opens on a first visit */
.nv .stage--lp[data-lp-on]{--lp-mw:clamp(230px,21vw,300px)}
.nv .stage--lp[data-lp-on] .stage__top .stage__h{font-size:clamp(22px,2.1vw,30px)}
@media(min-width:1000px){
.nv .stage--lp[data-lp-on] .stage__top:has(.alerts){grid-template-columns:minmax(0,auto) minmax(300px,1fr)}
}
/* the line's notice in the banner: its headline and one line of it, the rest a press away */
.nv .stage--lp[data-lp-on] .stage__top .alert{grid-template-columns:minmax(0,1fr)}
.nv .stage--lp[data-lp-on] .stage__top .alert__t,.nv .stage--lp[data-lp-on] .stage__top .alert__s{display:-webkit-box;-webkit-line-clamp:1}
.nv .stage--lp[data-lp-on] .lp-mini{grid-area:top;justify-self:start;align-self:center;display:block;position:relative;z-index:1;
width:var(--lp-mw);height:92px;margin:0 0 14px 64px;border-radius:18px;overflow:hidden;
background:rgba(191,227,241,.84);border:2px solid rgba(255,255,255,.85);box-shadow:0 12px 30px -18px rgba(15,42,61,.45)}
.lp-mini .lp-geo{position:absolute;inset:0;width:100%;height:100%}
/* the small strait: land has to read as land. A solid sand-olive fill, a green shoreline, sea left blue.
(No land token in nv.css yet; kept here on the card so the big map is untouched.) */
.lp-mini{--lp-land:#d5dcab;--lp-land-edge:#6f9a58;--lp-isle:#7fa862}
.lp-mini .lp-geo path[fill^="url(#lpl"]{fill:var(--lp-land);stroke:var(--lp-land-edge);stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lp-mini .lp-geo g[fill] circle{fill:var(--lp-isle);stroke:var(--lp-land-edge);stroke-width:1px;vector-effect:non-scaling-stroke}
.lp-mini .lp-geo g[fill]{opacity:1}
.lp-mini__pin{position:absolute;transform:translate(-6px,-50%);display:flex;align-items:center;gap:5px;padding:0;border:0;background:none;cursor:pointer;z-index:2}
.lp-mini__pin i{flex:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--nv-ink)}
.lp-mini__pin b{padding:3px 8px;border-radius:999px;background:#fff;font:800 11.5px/1 var(--nv-font);color:var(--nv-ink);box-shadow:0 4px 10px -4px rgba(15,42,61,.4);white-space:nowrap}
.lp-mini__pin b::before{content:"\21C4\00a0";color:var(--nv-teal-ink)}
.lp-mini__pin--a{flex-direction:row-reverse;transform:translate(calc(-100% + 6px),-50%)}
/* east-west: the two names would run into each other side by side, so the
first one sits above its dot and the second one below */
.lp-mini--ew .lp-mini__pin{flex-direction:column;gap:3px;transform:translate(-50%,-6px)}
.lp-mini--ew .lp-mini__pin--a{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 6px))}
.nv .stage--lp[data-lp-side="0"] .lp-mini__pin[data-lp-pick="0"],.nv .stage--lp[data-lp-side="1"] .lp-mini__pin[data-lp-pick="1"]{pointer-events:none}
:is(.nv .stage--lp[data-lp-side="0"] .lp-mini__pin[data-lp-pick="0"],.nv .stage--lp[data-lp-side="1"] .lp-mini__pin[data-lp-pick="1"]) i{background:var(--nv-teal);box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(21,127,156,.35)}
:is(.nv .stage--lp[data-lp-side="0"] .lp-mini__pin[data-lp-pick="0"],.nv .stage--lp[data-lp-side="1"] .lp-mini__pin[data-lp-pick="1"]) b{background:var(--nv-teal);color:#fff}
:is(.nv .stage--lp[data-lp-side="0"] .lp-mini__pin[data-lp-pick="0"],.nv .stage--lp[data-lp-side="1"] .lp-mini__pin[data-lp-pick="1"]) b::before{content:none}
.lp-mini__pin:focus-visible{outline:0}.lp-mini__pin:focus-visible b{outline:3px solid var(--nv-teal);outline-offset:2px}
.lp-mini__back{position:absolute;left:8px;bottom:8px;z-index:3;display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 9px 0 4px;border-radius:999px;border:0;
background:rgba(15,42,61,.86);color:#fff;font:700 11px/1 var(--nv-font);cursor:pointer}
.lp-mini__back svg{width:14px;height:14px}
/* the day's card and the picture are one square: the picture runs down to
the day's last row (Gal, 1 Oct: the port scene over the day "is breaking
the square", gone). A short screen packs the day tighter. */
@media(min-width:1000px){.nv .stage--lp:not(.stage--sails)[data-lp-on] .lp-hero:not([hidden]){align-self:stretch;height:auto;min-height:clamp(360px,calc(100svh - var(--lp-htop,210px) - 40px),860px)}}
@media(max-height:860px){
.nv .stage--lp[data-lp-on] .lp-day:not([hidden]){padding:12px 14px}
.nv .stage--lp[data-lp-on] .lp-day__h{margin-bottom:8px}
.nv .stage--lp[data-lp-on] .lp-day__l{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px}
.nv .stage--lp[data-lp-on] .lp-day__l li{height:32px;font-size:14px}}
/* below the fold: white rounded v2 cards, each with its painted spot */
.nv .stage--lp .answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:20px}
.nv .stage--lp .ans__b{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;align-items:center;position:relative;
min-height:96px;padding:14px 16px;border-radius:20px;border:0;background:#fff;box-shadow:0 12px 30px -18px rgba(15,42,61,.35),0 1px 0 rgba(15,42,61,.04);text-align:left}
.nv .stage--lp .ans__b::after{display:none}
.nv .stage--lp .ans__b::before{content:"";grid-row:1/3;width:72px;height:60px;background:url(/img/lp-spot-mp-240.webp?v=edd25dce) center/contain no-repeat}
.nv .stage--lp .ans__b[data-modal=m-board]::before{background-image:url(/img/lp-spot-tt-240.webp?v=edd25dce)}
.nv .stage--lp .ans__b[data-modal=m-fare]::before{background-image:url(/img/lp-spot-tk-240.webp?v=edd25dce)}
.nv .stage--lp .ans__b[data-modal=m-book]::before{background-image:url(/img/lp-spot-bk-240.webp?v=edd25dce)}
.nv .stage--lp .ans__b b,.nv .stage--lp .ans__b small{grid-column:2;display:block;padding-right:0;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset}
.nv .stage--lp .ans__b b{align-self:end;font:800 15.5px/1.2 var(--nv-font);color:var(--nv-ink)}
.nv .stage--lp .ans__b small{align-self:start;margin-top:3px;font:500 13px/1.35 var(--nv-font);color:var(--nv-mute)}
.nv .stage--lp .lx-about{margin-top:14px;padding:22px 26px;border-radius:24px;border:0;background:#fff;box-shadow:0 16px 40px -24px rgba(15,42,61,.4)}
.nv .stage--lp .lx-about__art{width:190px;height:auto;object-fit:contain;border-radius:0;background:none}
.nv .stage--lp .embed-snippet{margin-top:14px;padding:14px 20px;border-radius:20px;background:#fff;box-shadow:0 12px 30px -20px rgba(15,42,61,.35)}
.nv .stage--lp .embed-snippet summary{font:700 14px/1.3 var(--nv-font);color:var(--nv-ink);cursor:pointer}
/* a tablet: the picture on top, the card and the day under it */
@media(max-width:999px){
.nv .stage--lp[data-lp-on]>.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:"top top" "wall wall" "card day";grid-template-rows:auto auto 1fr}
.nv .stage--lp[data-lp-on] .lp-hero:not([hidden]){align-self:start;height:clamp(260px,calc(42svh - 24px),540px);min-height:0;margin-bottom:14px}
.nv .stage--lp[data-lp-on]{--lp-mw:200px}
.nv .stage--lp[data-lp-on] .lp-mini{height:84px}
.nv .stage--lp[data-lp-on] .stage__top:has(.alerts){grid-template-columns:minmax(0,1fr)}
.nv .stage--lp.stage--sails[data-lp-on] .sails,.nv .stage--lp[data-lp-on] .lp-day:not([hidden]){margin-top:0}
}
@media(max-width:859px){
.nv .stage--lp[data-lp-on]>.wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "wall" "card" "day";grid-template-rows:none}
.nv .stage--lp.stage--sails[data-lp-on] .sails,.nv .stage--lp[data-lp-on] .lp-day:not([hidden]){margin-top:12px}
}
}
.nv .stage--pick{min-height:0;display:block;padding-bottom:8px}
.nv .stage--pick>.wrap{display:block}
.pk-ask{margin:16px 0 12px;font:800 clamp(26px,7.4vw,38px)/1.08 var(--nv-font);letter-spacing:-.03em;color:var(--nv-ink);max-width:20em}
.pk-map.lp-map{flex:none;height:max(clamp(340px,50svh,440px),calc(160px / var(--f,.4)))}
@media(min-width:700px){.pk-map.lp-map{height:max(clamp(380px,52svh,520px),calc(190px / var(--f,.4)))}}
.pk-card{position:absolute;z-index:2;display:block;width:min(244px,calc(100% - 24px));overflow:hidden;border-radius:16px;background:#fff;
box-shadow:0 12px 26px -10px rgba(15,42,61,.55);color:var(--nv-ink);text-decoration:none;
left:clamp(12px,calc(var(--x) - 122px),calc(100% - 256px));transition:transform .12s,box-shadow .15s}
.pk-card--up{bottom:calc(100% - var(--y) + 14px)}
.pk-card--dn{top:calc(var(--y) + 14px)}
.pk-map .lp-land{display:none}
/* The drawn map (line_phone.real_map). Its SVGs are drawn with "slice": scaled
by --s to cover the box, centred. Every mark carries its point in frame
units (--wx/--wy wide, --tx/--ty tall) and lands where the slice put it.
A box narrower than 13:10 is a phone: the tall frame, its own card sides. */
.lp-real{container-type:size}
.lp-real>*{--vw:var(--ww);--vh:var(--wh);--gx:var(--wx);--gy:var(--wy);
--s:max(100cqw / var(--vw),100cqh / var(--vh));
--x:calc(50% + (var(--gx) - var(--vw) / 2) * var(--s));--y:calc(50% + (var(--gy) - var(--vh) / 2) * var(--s))}
.lp-real>.lp-dot,.lp-real>.lp-dur,.lp-real>.lp-land,.lp-real>.lp-mini__pin{left:var(--x);top:var(--y)}
.lp-real>.lp-land{display:block;transform:translate(-50%,-50%);pointer-events:none;color:rgba(70,95,55,.62);letter-spacing:.2em}
.lp-real>.lp-land--off-w{display:none}
.lp-geo--t{display:none}
.lp-real .pk-card[data-cw=up]{top:auto;bottom:calc(100% - var(--y) + 14px);translate:none}
.lp-real .pk-card[data-cw=dn]{bottom:auto;top:calc(var(--y) + 14px);translate:none}
.lp-real .pk-card[data-cw=r]{bottom:auto;top:var(--y);left:calc(var(--x) + 18px);translate:0 -50%}
.lp-real .pk-card[data-cw=l]{bottom:auto;top:var(--y);left:calc(var(--x) - 18px);translate:-100% -50%}
.lp-osm{position:absolute;right:8px;bottom:5px;z-index:1;font:600 9.5px/1 var(--nv-font);color:rgba(15,42,61,.45);pointer-events:none}
@container (max-aspect-ratio:13/10){
.lp-real>*{--vw:var(--tw);--vh:var(--th);--gx:var(--tx);--gy:var(--ty)}
.lp-geo--w{display:none}.lp-geo--t{display:block}
.lp-real>.lp-land--off-w{display:block}.lp-real>.lp-land--off-t{display:none}
.lp-real .pk-card[data-ct=up]{top:auto;bottom:calc(100% - var(--y) + 14px);left:clamp(12px,calc(var(--x) - 122px),calc(100% - 256px));translate:none}
.lp-real .pk-card[data-ct=dn]{bottom:auto;top:calc(var(--y) + 14px);left:clamp(12px,calc(var(--x) - 122px),calc(100% - 256px));translate:none}
}
.pk-card:active{transform:scale(.97)}
.pk-card:focus-visible,.pk-btn:focus-visible{outline:3px solid var(--nv-teal);outline-offset:3px}
.pk-card__b{display:grid;gap:3px;padding:11px 14px 10px}
.pk-card small{font:700 10.5px/1 var(--nv-font);letter-spacing:.07em;text-transform:uppercase;color:var(--nv-teal-ink)}
.pk-card b{font:800 20px/1.1 var(--nv-font);letter-spacing:-.015em}
.pk-card__m{display:flex;flex-wrap:wrap;gap:2px 10px;font:600 12.5px/1.3 var(--nv-font);color:var(--nv-mute)}
.pk-nx{font-style:normal}.pk-nx[hidden]{display:none}
.pk-nx strong{font:800 13px/1 var(--nv-font);color:var(--nv-teal-ink)}
.pk-q{display:flex;align-items:center;gap:6px;flex-basis:100%;font-style:normal}.pk-q[hidden]{display:none}
.pk-q .nv-pill{min-height:22px;padding:0 9px 0 7px;gap:5px;font:800 12px/1 var(--nv-font)}
.pk-q .nv-dot{width:9px;height:9px}
.pk-q [data-pkq-w]{display:none}
.pk-card .pk-q small{display:inline;white-space:nowrap;font:600 11.5px/1 var(--nv-font);letter-spacing:0;text-transform:none;color:var(--nv-mute)}
.pk-act,.pk-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--nv-teal);color:#fff;font:800 15px/1.2 var(--nv-font)}
.pk-act{min-height:46px;padding:0 14px}
.pk-card:hover .pk-act,.pk-btn:hover{background:var(--nv-teal-hi)}
.pk-arrow{width:24px;height:24px;flex:none}
.pk-choose{display:grid;gap:10px;margin-top:14px}
@media(min-width:700px){.pk-choose{grid-template-columns:1fr 1fr}}
.pk-btn{min-height:60px;padding:0 20px;border-radius:var(--nv-r);font-size:18px;text-decoration:none;box-shadow:0 8px 20px -8px rgba(21,127,156,.65);transition:transform .12s,background .15s}
.pk-btn b{font-weight:800}
.pk-btn:active{transform:translateY(1px) scale(.99)}
.pk-facts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.pk-facts span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--nv-line);font:700 12.5px/1 var(--nv-font);color:var(--nv-ink-2)}
.stage--pick .facts{display:grid;gap:0;margin:18px 0 0;padding:4px 18px;border-radius:20px;background:#fff;box-shadow:var(--nv-shadow)}
.stage--pick .facts>div{padding:12px 0;border-top:1px solid var(--nv-line)}
.stage--pick .facts>div:first-child{border-top:0}
.stage--pick .facts dt{font:700 13px/1.3 var(--nv-font);color:var(--nv-mute)}
.stage--pick .facts dd{margin:3px 0 0;font:700 16px/1.35 var(--nv-font);color:var(--nv-ink)}
@media(min-width:900px){.stage--pick .facts{grid-template-columns:1fr 1fr;column-gap:32px}.stage--pick .facts>div:nth-child(2){border-top:0}}
.stage--pick .lx-about{margin-top:14px}
.pk-times{margin-top:22px}
.pk-times__h{margin:0 0 10px;font:800 var(--nv-h2,22px)/1.15 var(--nv-font);letter-spacing:-.02em}
.pk-times .season,.pk-times .pair{max-width:none}
/* phones: the whole map, cards and strips included, ends above the tab bar (app.js pickFit sets the height) */
@media(max-width:859px) and (max-height:780px){
.stage--pick{padding-top:0}
.stage--pick .stage__k{font-size:10.5px;margin:0}
.stage--pick .stage__h{font-size:clamp(19px,5.6vw,24px);line-height:1.12;margin:2px 0 0}
.stage--pick .stage__op{margin:4px 0 0;font-size:12.5px;gap:6px}
.stage--pick .stage__top{margin-bottom:0}
.pk-ask{margin:8px 0 8px;font-size:clamp(19px,5.4vw,24px);line-height:1.12}
.pk-card small{display:none}
.pk-card__b{padding:8px 12px 7px;gap:1px}
.pk-card b{font-size:18px}
.pk-act{min-height:44px;padding:0 12px;font-size:14px}
.pk-map.lp-map{height:max(clamp(280px,46svh,400px),calc(130px / var(--f,.4)))}
}
@media(max-width:859px) and (max-height:600px){
/* short phones: next boat, state pill and time share one row (the island is in the heading above) */
.pk-card:has(.pk-q:not([hidden])){width:calc(100% - 24px);left:12px}
.pk-card__m:has(.pk-q:not([hidden])){flex-wrap:nowrap;align-items:center;gap:4px;font-size:0}
.pk-card__m:has(.pk-q:not([hidden])) .pk-nx{white-space:nowrap;font-size:11.5px}
.pk-card__m:has(.pk-q:not([hidden])) .pk-q{flex:none;gap:4px}
.pk-card__m:has(.pk-q:not([hidden])) .pk-q .nv-pill{font-size:11px;padding:0 7px 0 6px;gap:4px;min-height:17px}
.pk-card:has(.pk-q:not([hidden])) .pk-card__b{padding-top:7px;padding-bottom:5px}
.pk-card .pk-q small{font-size:11px}
.pk-card:has(.pk-q:not([hidden])) .pk-card__b{position:relative}
.pk-card .pk-q small{position:absolute;top:10px;right:12px}
.pk-q [data-pkq-w]{display:inline}
.stage--pick .alert{padding:6px 12px}
.stage--pick .alert__k{display:none}
.pk-ask{margin:6px 0;font-size:17px}
}
@media(max-width:859px){.pk-map.lp-map{max-height:560px}}
/* a side chosen: its crossing view replaces the chooser (app.js lp()) */
.nv .stage--lp[data-lp-on] :is(.pk,.pk-times){display:none}
.nv .stage--pick:not([data-lp-on]) .embed-snippet{display:none}
.ls-g{display:grid;gap:14px;align-items:start}
.ls-map{position:relative;overflow:hidden;border-radius:var(--nv-r-card);border:4px solid var(--nv-card);box-shadow:var(--nv-shadow);background:var(--nv-sky);
aspect-ratio:var(--tw)/var(--th);max-height:calc(100svh - 120px)}
.ls-map>svg{position:absolute;inset:0;width:100%;height:100%}
.ls-map>.ls-pin{left:var(--x);top:var(--y)}
/* The box takes its frame's own shape, so the slice crops nothing: the tall
frame on a phone, the wide one beside the list. */
.ls-map .lp-geo--w{display:none}.ls-map .lp-geo--t{display:block}
.ls-map>*{--vw:var(--tw);--vh:var(--th);--gx:var(--tx);--gy:var(--ty)}
.ls-map .ls-pin--tr b{left:11px}.ls-map .ls-pin--tl b{right:11px}
.ls-map .ls-pin--tx b{display:none}.ls-map .ls-pin--tx.ls-on b{display:block;left:11px}
.ls-map .ls-pin--tu b,.ls-map .ls-pin--td b{left:0}.ls-map .ls-pin--tu b{top:-12px;transform:translate(-50%,-100%)}.ls-map .ls-pin--td b{top:12px;transform:translate(-50%,0)}
@media(min-width:860px){
.ls-map{aspect-ratio:var(--ww)/var(--wh)}
.ls-map .lp-geo--w{display:block}.ls-map .lp-geo--t{display:none}
.ls-map>*{--vw:var(--ww);--vh:var(--wh);--gx:var(--wx);--gy:var(--wy)}
.ls-map .ls-pin b{left:auto;right:auto;top:0;transform:translateY(-50%)}
.ls-map .ls-pin b{display:block}.ls-map .ls-pin--wx b{display:none}.ls-map .ls-pin--wx.ls-on b{display:block;left:11px}
.ls-map .ls-pin--wr b{left:11px}.ls-map .ls-pin--wl b{right:11px}
.ls-map .ls-pin--wu b,.ls-map .ls-pin--wd b{left:0}.ls-map .ls-pin--wu b{top:-12px;transform:translate(-50%,-100%)}.ls-map .ls-pin--wd b{top:12px;transform:translate(-50%,0)}
}
.ls-leg{fill:none;stroke:var(--nv-roof);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .2s}
.ls-leg--on{opacity:1}
.ls--pair .ls-map path[stroke-dasharray]{opacity:.4}
.ls-pin{position:absolute;z-index:2;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--nv-ink)}
.ls-pin i{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--nv-card);border:3px solid var(--nv-ink);box-sizing:border-box}
.ls-pin.ls-st--end i{width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--nv-ink);border-color:var(--nv-card);box-shadow:0 1px 4px rgba(15,42,61,.35)}
.ls-pin b{position:absolute;top:0;transform:translateY(-50%);white-space:nowrap;background:rgba(255,255,255,.94);font:700 13px/1 var(--nv-font);padding:5px 9px;border-radius:var(--nv-r-pill);box-shadow:0 1px 3px rgba(15,42,61,.18)}
.ls-pin.ls-on i{background:var(--nv-teal);border-color:var(--nv-card);box-shadow:0 0 0 5px rgba(21,127,156,.3)}
.ls-pin.ls-on b{background:var(--nv-teal);color:#fff}
.ls-pin.ls-dim{opacity:.45}
.ls-pin:focus-visible i{outline:3px solid var(--nv-teal);outline-offset:3px}
.ls-stops{display:grid;background:var(--nv-card);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);padding:6px 0}
.ls-stops[hidden],.ls-trip[hidden]{display:none}
.ls-st{display:grid;grid-template-columns:18px minmax(0,1fr) auto 20px;gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 16px;border:0;background:none;text-align:left;font:inherit;color:var(--nv-ink);cursor:pointer;position:relative}
.ls-st+.ls-st{border-top:1px solid var(--nv-line)}
.ls-st::before{content:"";position:absolute;left:24px;top:0;bottom:0;border-left:2px dotted var(--nv-roof)}
.ls-st:first-child::before{top:50%}.ls-st:last-child::before{bottom:50%}
.ls-st>i{width:12px;height:12px;border-radius:50%;border:3px solid var(--nv-ink);background:var(--nv-card);justify-self:center;position:relative;z-index:1}
.ls-st--end>i{background:var(--nv-ink)}
.ls-st__n b{display:block;font:800 17px/1.2 var(--nv-font)}
.ls-st__n small{font:600 12.5px/1.3 var(--nv-font);color:var(--nv-mute)}
.ls-st__tag{font:800 11px/1 var(--nv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--nv-teal-ink);font-style:normal}
.ls-st .lp-chev{width:18px;height:18px;color:var(--nv-teal)}
.ls-st:hover,.ls-st.ls-on{background:var(--nv-teal-soft)}
.ls-st.ls-on>i{background:var(--nv-teal);border-color:var(--nv-teal)}
.ls-st:focus-visible{outline:3px solid var(--nv-teal);outline-offset:-3px}
.ls-trip{display:grid;gap:12px;background:var(--nv-card);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);padding:14px}
.ls-ft{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:6px;align-items:center}
.ls-fp{display:block;min-width:0;text-align:left;background:var(--nv-teal-soft);border:2px solid var(--nv-teal);border-radius:var(--nv-r);padding:9px 12px;font:inherit;color:var(--nv-ink);cursor:pointer}
.ls-fp small{display:block;font:800 10.5px/1.2 var(--nv-font);letter-spacing:.07em;text-transform:uppercase;color:var(--nv-teal-ink)}
.ls-fp b{display:block;font:800 19px/1.2 var(--nv-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-fp em{display:block;font:600 12px/1.3 var(--nv-font);font-style:normal;color:var(--nv-mute);min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-sw{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:var(--nv-card);border:2px solid var(--nv-line);color:var(--nv-teal);cursor:pointer}
.ls-sw svg{width:20px;height:20px}
.ls-dur{margin:0;font:600 14px/1.4 var(--nv-font);color:var(--nv-ink-2)}.ls-dur b{color:var(--nv-ink);font-weight:800}
.ls-tt{border:1px solid var(--nv-line);border-radius:var(--nv-r);overflow:hidden}
.ls-th{margin:0;max-width:none;background:var(--nv-page);font:800 11px/1.3 var(--nv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--nv-mute);padding:8px 12px}
.ls-bk{border-top:1px solid var(--nv-line);padding:8px 12px 4px}
.ls-bk__r{margin:0 0 2px;font:700 12.5px/1.3 var(--nv-font);color:var(--nv-mute)}
.ls-bk__r em{font-style:normal;display:inline-block;margin-right:6px;padding:2px 7px;border-radius:var(--nv-r-pill);background:var(--nv-ok-bg);color:var(--nv-ok-ink);font-weight:800}
.ls-tr{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0}
.ls-tr span{font:700 14.5px/1.3 var(--nv-font);color:var(--nv-ink)}
.ls-tr b{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font:800 18px/1.2 var(--nv-font);color:var(--nv-teal-ink)}
.ls-tr i{font-style:normal;color:var(--nv-mute);font-size:14px}
.ls-tr sup{font-size:11px;color:var(--nv-mute)}
.ls-none{margin:0;padding:12px;font:600 14px/1.4 var(--nv-font);color:var(--nv-ink-2)}
.ls-day{display:grid;gap:8px;padding:12px 14px;border-radius:var(--nv-r-card);background:var(--nv-warn-bg);color:var(--nv-warn-ink);font:600 14px/1.4 var(--nv-font)}
.ls-day[hidden]{display:none}.ls-day p{margin:0}.ls-day b{font-weight:800}
.ls-next{justify-self:start;font:800 14px/1.2 var(--nv-font);color:var(--nv-teal-ink);background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r-pill);padding:8px 14px;cursor:pointer}
.ls-tr--off{opacity:.4}
.ls-day--off{background:var(--nv-card);color:var(--nv-ink);border:1px solid var(--nv-line);gap:4px}
.ls-day small{font:800 12px/1.2 var(--nv-font);letter-spacing:.08em;text-transform:uppercase;color:var(--nv-mute)}
.ls-day__h{font:800 22px/1.2 var(--nv-font);color:var(--nv-ink)}.ls-day p{color:var(--nv-ink-2)}
.ls-day .ls-next{margin-top:6px}
.ls-stamp{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin-left:10px;padding:4px 12px 5px;border:3px solid var(--nv-bad-ink);border-radius:8px;color:var(--nv-bad-ink);background:var(--nv-bad-bg);font:900 .5em/1.05 var(--nv-font);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-5deg);white-space:nowrap}
.pk-ask:has(.ls-stamp){margin-bottom:18px}
.ls-stamp small{font-weight:700;font-size:.62em;letter-spacing:.04em}
.ls-tt--fold{background:none;border:0}
.ls-more{border:1px solid var(--nv-line);border-radius:var(--nv-r-card);background:var(--nv-card);overflow:hidden}
.ls-more summary{cursor:pointer;padding:12px 14px;font:800 14px/1.3 var(--nv-font);color:var(--nv-teal-ink)}
.ls-more[open] summary{border-bottom:1px solid var(--nv-line)}
.ls-go[hidden]{display:none}
.ls-go{width:100%;border:0;cursor:pointer}
@media(max-width:859px){.ls-map{order:-1}}
@media(min-width:860px){
/* Gal, 4 Oct: the map is a square as tall as the screen allows; the list
and the times take the rest of the width instead of a thin column. */
.ls-g{grid-template-columns:minmax(340px,1fr) min(max(380px,calc(100svh - var(--ls-top,300px) - 16px)),58%,720px)}
.ls-map{position:sticky;top:calc(var(--nv-hd-h,64px) + 12px)}
}
.lp-nc,.lp-nc__honest,.sails__nmore,.lead__w,.lp-swt,.lp-calcslot{display:none}
.lp-swt[hidden]{display:none!important}
.lp-nc__honest[hidden]{display:none!important}
.leg__rest>.leg__x{display:none!important}
.lp-swt__h{display:grid;gap:8px}
.lp-zone{display:none}
.lp-swt__k{margin:0;font:800 11.5px/1 var(--nv-font);letter-spacing:.08em;text-transform:uppercase;color:var(--nv-mute)}
.lp-tabs2{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--nv-line);box-shadow:var(--nv-shadow)}
.lp-tab{min-height:44px;border:0;border-radius:999px;background:none;font:800 15px/1.1 var(--nv-font);color:var(--nv-ink-2);cursor:pointer}
.lp-tab.on{background:var(--nv-teal);color:#fff;cursor:default}
.lp-tab.on::before{content:"\2713\00a0"}
.lp-tab:not(.on):hover{background:var(--nv-teal-soft)}
.lp-swmap{position:relative;height:clamp(118px,calc(100svh - 470px),200px);border-radius:20px;overflow:hidden;border:2px solid #fff;box-shadow:var(--nv-shadow);background:#bfe3f1}
.lp-swmap .lp-geo{position:absolute;inset:0;width:100%;height:100%}
.lp-swmap .lp-geo path[fill^="url(#lpl"]{fill:#d5dcab;stroke:#6f9a58;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lp-swmap .lp-geo g[fill] circle{fill:#7fa862}
.lp-swmap .lp-geo g[fill]{opacity:1}
.lp-sp{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--nv-ink);z-index:1}
.lp-sp--on{background:var(--nv-teal);box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(21,127,156,.35)}
@keyframes lp-ring{0%{box-shadow:0 0 0 3px var(--nv-ink),0 0 0 3px rgba(224,112,58,.6)}100%{box-shadow:0 0 0 3px var(--nv-ink),0 0 0 18px rgba(224,112,58,0)}}
.lp-sp--go{box-shadow:0 0 0 3px var(--nv-ink),0 0 0 8px rgba(224,112,58,.35);animation:lp-ring 1.6s ease-out infinite}
@media(prefers-reduced-motion:reduce){.lp-sp--go{animation:none}}
.lp-real>.lp-sp,.lp-real>.lp-sl{left:var(--x);top:var(--y)}
.lp-sl--wrap{white-space:normal!important;width:calc(100% - 16px);justify-content:center;text-align:center;line-height:1.2!important}
.lp-sl{transform:translate(calc(var(--lx,-50%) + var(--nx,0px)),calc(-50% + var(--ny,0px)));margin-top:var(--dy,0);position:absolute;z-index:2;white-space:nowrap;border-radius:999px;padding:8px 12px;font:800 14px/1 var(--nv-font);box-shadow:0 6px 14px -6px rgba(15,42,61,.45)}
.lp-sl--on{background:var(--nv-teal);color:#fff;pointer-events:none}
.lp-sl--go{display:inline-flex;align-items:center;gap:6px;min-height:40px;border:2px solid var(--nv-roof);background:#fff;color:var(--nv-ink);cursor:pointer}
.lp-sl--go svg{width:16px;height:16px;color:var(--nv-roof)}
.lp-sl--go:focus-visible,.lp-tab:focus-visible{outline:3px solid var(--nv-teal);outline-offset:2px}
@media(max-width:699px){
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-hero--nc{display:none!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-mini{display:none!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-swt:not([hidden]){display:grid;gap:8px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc{display:grid;gap:10px;margin:8px 0 0}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc__facts{display:flex;gap:6px;margin:0 -16px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc__facts::-webkit-scrollbar{display:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc__facts span{flex:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--nv-r-pill);background:#fff;border:1px solid var(--nv-line);font:700 12.5px/1.2 var(--nv-font);color:var(--nv-ink-2)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-nc__honest:not([hidden]){order:4;display:flex;gap:6px;align-items:flex-start;margin:0;font:600 12px/1.35 var(--nv-font);color:var(--nv-mute)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc__honest svg{width:15px;height:15px;flex:none;margin-top:1px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card{margin:12px 0 0}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .leg__rest{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .leg__rest>.leg__x{display:grid!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .leg__rest>.leg__left{display:none!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .leg__rest li:not(.leg__left){padding:5px 2px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .lead__w{display:block;font:600 10.5px/1 var(--nv-font);color:var(--nv-mute);white-space:nowrap}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails>.sails__note{order:-2;margin:0 0 2px;padding:9px 12px;border-radius:var(--nv-r-sm);background:var(--nv-warn-bg);color:var(--nv-warn-ink);font:500 13px/1.4 var(--nv-font)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails>.sails__note .season__note-by{font-weight:700}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails__note:not(.sails__note--all) .sails__nl--off{display:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails__note--quiet:not(.sails__note--all){padding:6px 12px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails__nmore:not([hidden]){display:block;margin:2px 0 0;padding:4px 0;border:0;background:none;font:600 12px/1.3 var(--nv-font);color:var(--nv-warn-ink);text-align:left;text-decoration:underline;cursor:pointer}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails__note--all .sails__nmore{display:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-buy{position:fixed;left:0;right:0;bottom:var(--nv-tabs-h,0px);z-index:39;margin:0;padding:14px 16px 10px;gap:10px;
background:#fff;border-radius:22px 22px 0 0;border-top:1px solid var(--nv-line);box-shadow:0 -10px 30px -12px rgba(15,42,61,.3)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-buy::before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--nv-line)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-buy>*{flex:1}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-buy>.lp-go{flex:1.4}
.nv .stage--lp.stage--sails:has(.lp-hero--nc:not([hidden]))[data-lp-on][data-sails-dep] .lp-card>.lp-buy{display:none!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-buy .lp-price{gap:0;min-height:48px;padding:4px 8px;max-width:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-buy .lp-price small{font-size:11px;line-height:1.2}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-buy .lp-go{min-height:48px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .stage__g{padding-bottom:84px}
}
/* desktop (Gal, 4 Oct: E4): the map where the painting was, the other
shore one big button; the calculator open in the card above Buy and the
footnotes under the map (lp() dock() moves both nodes). */
@media(min-width:700px){
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-hero--nc,.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-mini{display:none!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .stage__top{padding-left:76px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc{grid-area:wall;display:grid;gap:12px;align-content:start;margin:0;min-width:0}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-swt:not([hidden]){display:grid;gap:12px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-swt__h{display:flex;align-items:center;gap:14px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-tabs2{display:inline-grid;grid-template-columns:repeat(2,minmax(150px,auto))}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-tab{padding:0 22px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-swmap{height:clamp(380px,calc(100svh - 330px),560px)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-zone{display:block;position:absolute;inset:0;z-index:1;margin:0;padding:0;border:0;border-radius:0}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-zone--on{background:linear-gradient(0deg,rgba(21,127,156,.22),rgba(21,127,156,.04));pointer-events:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-zone--go{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.3) 14px 28px);cursor:pointer}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-zone--go:hover{background-color:rgba(224,112,58,.12)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-zone--go:hover~.lp-sl--go{background:var(--nv-roof);color:#fff}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-zone--go:hover~.lp-sl--go svg{color:#fff}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-sp{width:22px;height:22px;margin:-11px 0 0 -11px;z-index:2}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-sl{z-index:3;padding:10px 16px;font-size:16px;margin-top:calc(var(--dy,0px) * 1.35)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-sl--go{padding:12px 18px;font-size:17px;border-width:2.5px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-sl--go:hover{background:var(--nv-roof);color:#fff}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-sl--go:hover svg{color:#fff}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc__facts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc__facts span{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--nv-r-pill);background:#fff;border:1px solid var(--nv-line);font:700 13px/1.2 var(--nv-font);color:var(--nv-ink-2)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc>.sails__note{margin:0;padding:10px 14px;border-radius:var(--nv-r-sm);background:var(--nv-warn-bg);color:var(--nv-warn-ink);font:500 13.5px/1.45 var(--nv-font)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-nc>.sails__note .season__note-by{font-weight:700}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails__note:not(.sails__note--all) .sails__nl--off{display:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails__nmore:not([hidden]){display:block;margin:2px 0 0;padding:4px 0;border:0;background:none;font:600 12.5px/1.3 var(--nv-font);color:var(--nv-warn-ink);text-align:left;text-decoration:underline;cursor:pointer}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .sails__note--all .sails__nmore{display:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .leg__rest{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .leg__rest>.leg__x{display:grid!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .leg__rest>.leg__left{display:none!important}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card .lead__w{display:block;font:600 10.5px/1 var(--nv-font);color:var(--nv-mute);white-space:nowrap}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-nc__honest:not([hidden]){order:4;display:flex;gap:6px;align-items:flex-start;margin:0;font:600 12px/1.35 var(--nv-font);color:var(--nv-mute)}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-card>.lp-nc__honest svg{width:15px;height:15px;flex:none;margin-top:1px}
.nv .stage--lp.stage--sails:has(.lp-hero--nc:not([hidden]))[data-lp-on][data-lp-docked] .lp-card>.lp-calcslot{order:8;display:block;margin:4px -16px 0;padding:14px 16px 0;border-top:1px solid var(--nv-line)}
.nv .stage--lp.stage--sails:has(.lp-hero--nc:not([hidden]))[data-lp-on][data-lp-docked] .lp-card>.lp-buy .lp-price{display:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-calcslot .calc{margin:0;padding:0;border:0;background:none;box-shadow:none}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-calcslot .calc__g{grid-template-columns:auto auto;align-items:end;gap:12px 18px}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-calcslot .calc__f:has(.calc__v){grid-column:1/-1}
.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-calcslot .calc__v{width:100%;max-width:100%}
.nv .stage--lp.stage--sails:has(.lp-hero--nc:not([hidden]))[data-lp-on][data-lp-docked] .lp-card>.lp-buy .lp-go{flex:1}
}
@media(min-width:1000px){.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden]))>.wrap{grid-template-columns:minmax(340px,440px) minmax(0,1fr)}}
@media(min-width:700px) and (max-width:999px){.nv .stage--lp.stage--sails[data-lp-on]:has(.lp-hero--nc:not([hidden])) .lp-swmap{height:clamp(300px,40svh,420px)}}
.both-sec .both{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* A side the reader switched off is gone, whatever display the card has
(One way left an empty Return card behind, Gal 5 Oct). */
.both-sec .way[hidden]{display:none!important}
/* The title and its controls line up with the strips under them. */
.head:has(.pair-ctl)>.wrap{max-width:1240px}
/* The day keeps its name on screen when the strip is scrolled into it. */
.tl-day b{position:sticky;left:8px;display:inline-block;background:var(--nv-card);padding-right:4px}
.pair-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px}
.pair-ctl>*{margin:0}
.pair-ctl:empty{display:none}
.pair-ctl .both__seg>button{min-height:40px;padding:0 16px;font-size:14.5px}
.both-sec .way{background:var(--nv-card);color:var(--nv-ink);border:1px solid var(--nv-line);
border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);overflow:hidden;max-width:none}
.both-sec .way__h{display:flex;align-items:baseline;gap:10px;padding:10px 16px 2px;background:none;color:var(--nv-ink)}
.both-sec .way__k{font:800 12px/1 var(--nv-font);letter-spacing:.09em;text-transform:uppercase;color:var(--nv-mute)}
.both-sec .way__pair{display:flex;gap:6px;align-items:baseline;font:700 14px/1.2 var(--nv-font)}
.both-sec .way__a{display:none}
.both-sec .way__p{font:700 14px/1.2 var(--nv-font);color:var(--nv-ink)}
.both-sec .way__p+.way__p::before{content:"→";margin-right:6px;color:var(--nv-mute)}
.both-sec .way__q{display:inline;margin-left:4px;font:500 12px var(--nv-font);color:var(--nv-mute)}
.both-sec .way{display:flex;flex-wrap:wrap;align-items:baseline}
.both-sec .way>*{flex:0 0 100%}
.both-sec .way>.way__h{flex:0 0 auto;padding-bottom:6px}
.both-sec .way>.way__ask{flex:1 1 auto;background:none;color:var(--nv-mute);padding:0 16px 0 0;
font:500 13px/1.3 var(--nv-font);letter-spacing:0;text-transform:none;cursor:default}
.lede:has(+ #sec-both){max-width:none;font-size:15px;margin-top:0;margin-bottom:10px}
main:has(#sec-both){padding-top:14px}
.both-sec .way .note{color:var(--nv-ink-2);margin:10px 16px 14px}
.both-sec .way .note .whenbar__b{color:var(--nv-teal-ink)}
.tl-roll{overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.tl-track{position:relative}
.tl-day{position:absolute;top:0;bottom:0;border-left:1px solid var(--nv-line);padding:3px 8px;white-space:nowrap;
font:600 11.5px/1.2 var(--nv-font);color:var(--nv-mute)}
.tl-day b{font:800 13px var(--nv-font);color:var(--nv-ink);margin-right:6px}
.tl-day small{font:inherit;background:var(--nv-card)}
/* Above the hour lines, so a tick label does not print through the date. */
.tl-day{z-index:1}
.tl-day--none b{color:var(--nv-off)}
/* Between two days: a strip of pale sky, not a black bar (Gal, 6 Oct). */
.tl-night{position:absolute;top:0;bottom:0;background:var(--nv-sky);border-left:1px solid var(--nv-line);border-right:1px solid var(--nv-line)}
.tl-next{display:inline-flex;align-items:center;min-height:30px;margin-left:8px;padding:0 12px;border:0;border-radius:999px;
background:var(--nv-teal-soft);color:var(--nv-teal-ink);font:700 12.5px var(--nv-font);cursor:pointer;position:relative;z-index:2}
.tl-next:hover{background:var(--nv-teal);color:#fff}
.tl-hr{position:absolute;top:30px;bottom:0;width:1px;background:var(--nv-line)}
.tl-hr b{position:absolute;top:-12px;left:-5px;font:700 10px var(--nv-font);color:var(--nv-off)}
.tl-p{position:absolute;height:40px;padding:3px 8px;border:1.5px solid var(--nv-line);border-radius:var(--nv-r-sm);
background:var(--nv-card);color:var(--nv-ink);text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;z-index:1}
.tl-p--out{border-left:4px solid var(--nv-teal)}
.tl-p--back{border-left:4px solid var(--nv-roof)}
.tl-p:hover{border-color:var(--nv-teal)}
.tl-p:focus-visible{outline:3px solid var(--nv-teal);outline-offset:2px}
.tl-p__t{display:block;font:800 14px/1.1 var(--nv-font)}
.tl-p__t i{font:800 10.5px var(--nv-font);font-style:normal;margin-left:5px;padding:1px 5px;border-radius:6px;
background:var(--nv-warn-bg);color:var(--nv-warn-ink)}
.tl-p__s{display:block;font:600 11px/1.3 var(--nv-font);color:var(--nv-mute);overflow:hidden;text-overflow:ellipsis}
.tl-p.is-on{color:#fff;box-shadow:var(--nv-shadow-hi)}
.tl-p--out.is-on{background:var(--nv-teal);border-color:var(--nv-teal)}
.tl-p--back.is-on{background:var(--nv-roof);border-color:var(--nv-roof)}
.tl-p.is-on .tl-p__s{color:#fff}
.tl-p.is-on .tl-p__t i{background:rgba(255,255,255,.25);color:#fff}
.tl-p.is-off{opacity:.38;border-style:dashed;cursor:not-allowed}
@media(min-width:701px){.tl-p__s .tl-p__f{display:inline}}
@media(max-width:700px){
.tl-p__f{display:none}
.both-sec .way{border-radius:0;border-left:0;border-right:0;margin:0 calc(-1 * var(--nv-gutter,16px))}
.tl-p{padding:4px 6px}
.tl-p__t i{margin-left:3px;padding:1px 3px;font-size:9.5px}
}
/* Phone: the fare ribbon (concept 1 of ten, Gal 5 Oct 2026). The strips stay
in the page for the desktop; below 701px the ribbon takes their place. */
.fr{display:none}
/* A phone on its side is still a phone: too short for two strips. */
@media(max-width:700px),(max-height:500px) and (max-width:950px){
.both-sec .tl-roll,.both-sec .way__ask,.both-sec .way__h{display:none!important}
.fr{display:block}
.both-sec .both{gap:0}
.both-sec .way{background:none;border:0;box-shadow:none;border-radius:0;margin:0 calc(-1 * var(--nv-gutter,16px));display:block}
.head:has(.pair-ctl){background:linear-gradient(100deg,color-mix(in srgb,var(--nv-page) 88%,transparent) 0,color-mix(in srgb,var(--nv-page) 62%,transparent) 42%,transparent 78%),image-set(url(/nv/img/hero-wide-960.webp) 1x,url(/nv/img/hero-wide-1536.webp) 2x) 72% 58%/cover no-repeat;color:var(--nv-ink);border-radius:0 0 22px 22px;padding:10px 0 12px}
.head:has(.pair-ctl) .head__title{position:relative}
.head:has(.pair-ctl) h1,.head:has(.pair-ctl) h1 a{color:var(--nv-ink)}
.head:has(.pair-ctl) h1{font-size:22px;line-height:1.2;margin:0;padding-right:96px}
.pair-ctl{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:8px}
.pair-ctl .both__seg{grid-row:1;grid-column:1;background:color-mix(in srgb,var(--nv-card) 90%,transparent);border:0;box-shadow:var(--nv-shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pair-ctl .both__seg>button{min-height:38px;padding:0 13px;color:var(--nv-ink);background:none}
.pair-ctl .both__seg>button[aria-pressed=true]{background:var(--nv-teal);color:#fff}
.pair-ctl .veh{grid-row:1;grid-column:2;justify-self:end;display:flex;align-items:center;margin:0;min-height:44px;background:color-mix(in srgb,var(--nv-card) 90%,transparent);border:0;box-shadow:var(--nv-shadow);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--nv-ink);padding:0 8px 0 12px;font:600 13px/1.15 var(--nv-font);text-align:right;gap:8px}
.pair-ctl .veh__t{max-width:7.5em}
.pair-ctl .veh__b{order:2;flex:none;appearance:none;-webkit-appearance:none;width:46px;height:28px;margin:0;border:0;border-radius:14px;background:color-mix(in srgb,var(--nv-ink) 28%,transparent);position:relative;cursor:pointer;transition:background .25s}
.pair-ctl .veh__b::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.pair-ctl .veh__b:checked{background:var(--nv-ok)}
.pair-ctl .veh__b:checked::after{transform:translateX(18px)}
.pair-ctl .veh__b:focus-visible{outline:3px solid var(--nv-teal);outline-offset:2px}
.fr__row sup{font-size:.45em;vertical-align:top;margin-left:1px}
.pair-ctl .both__n{position:absolute;top:0;right:0;min-height:30px;padding:4px 11px;font-size:12.5px;background:color-mix(in srgb,var(--nv-card) 90%,transparent);color:var(--nv-teal-ink);box-shadow:var(--nv-shadow);border:0;white-space:nowrap}
.lede:has(+ #sec-both){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main:has(#sec-both){padding-top:4px}
.fr__skip{display:flex;align-items:center;justify-content:center;width:calc(100% - 32px);min-height:46px;margin:2px 16px 10px;border:1.5px solid var(--nv-line);border-radius:var(--nv-r);background:var(--nv-card);color:var(--nv-teal-ink);font:700 14.5px var(--nv-font);cursor:pointer}
.fr__skip:active{background:var(--nv-teal-soft)}
.fr__h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:14px 16px 8px}
.fr__h h3{margin:0;display:flex;align-items:center;gap:8px;font:800 20px/1.1 var(--nv-font);letter-spacing:-.02em;color:var(--nv-ink)}
.fr__h h3 b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--nv-teal);color:#fff;font-size:13px}
[data-way=back] .fr__h h3 b{background:var(--nv-roof)}
.fr__h span{font:600 13px var(--nv-font);color:var(--nv-mute);text-align:right}
.fr__rib{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 10px;scroll-snap-type:x proximity;scrollbar-width:none}
.fr__rib::-webkit-scrollbar{display:none}
/* A mouse has no sideways swipe: a thin bar shows there is more, and the
wheel scrolls the days (app.js). */
@media(hover:hover) and (pointer:fine){
.fr__rib{scrollbar-width:thin;scrollbar-color:var(--nv-line) transparent}
.fr__rib::-webkit-scrollbar{display:block;height:6px}
.fr__rib::-webkit-scrollbar-thumb{background:var(--nv-line);border-radius:3px}
}
.fr__day{flex:none;width:64px;min-height:84px;scroll-snap-align:center;border-radius:var(--nv-r);background:var(--nv-card);box-shadow:var(--nv-shadow);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 0 10px;border:2px solid transparent;color:var(--nv-ink);cursor:pointer;
transition:transform .3s cubic-bezier(.3,1.4,.5,1),background .2s,border-color .2s}
.fr__w{font:700 12px var(--nv-font);color:var(--nv-mute);text-transform:uppercase;letter-spacing:.04em}
.fr__n{font:800 23px/1.05 var(--nv-font);letter-spacing:-.02em}
.fr__p{font:800 13px/18px var(--nv-font);height:18px;color:var(--nv-teal-ink)}
.fr__dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;width:44px;min-height:6px}
.fr__dots i{width:5px;height:5px;border-radius:50%;background:var(--nv-teal)}
.fr__day.is-on{background:var(--nv-teal);border-color:var(--nv-teal);color:#fff;transform:translateY(-3px)}
.fr__day.is-on .fr__w,.fr__day.is-on .fr__p{color:#fff}.fr__day.is-on .fr__dots i{background:#fff}
[data-way=back] .fr__p{color:var(--nv-roof)}[data-way=back] .fr__dots i{background:var(--nv-roof)}
[data-way=back] .fr__day.is-on{background:var(--nv-roof);border-color:var(--nv-roof)}
[data-way=back] .fr__day.is-on .fr__p{color:#fff}[data-way=back] .fr__day.is-on .fr__dots i{background:#fff}
.fr__day:disabled{background:transparent;box-shadow:none;border:2px dashed var(--nv-line);cursor:default}
.fr__day:disabled .fr__n,.fr__day:disabled .fr__w,.fr__day:disabled .fr__p{color:var(--nv-off)}
.fr__cards{display:grid;gap:12px;padding:2px 16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.fr__card{background:var(--nv-card);border-radius:var(--nv-r-card);box-shadow:var(--nv-shadow);padding:12px 14px;
animation:fr-rise .45s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes fr-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.fr__card p{margin:0}
.fr__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:600 13px var(--nv-font);color:var(--nv-ink-2)}
.fr__kind{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--nv-r-pill);background:var(--nv-teal-soft);color:var(--nv-teal-ink);font:700 12px var(--nv-font)}
.fr__kind.is-cat{background:var(--nv-off-bg);color:var(--nv-off-ink)}
.fr__stay{margin-left:auto;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--nv-r-pill);background:var(--nv-roof);color:#fff;font:800 13px var(--nv-font)}
.fr__row{display:flex;align-items:center;gap:10px;margin:8px 0 2px!important}
.fr__row>b{font:800 30px/1 var(--nv-font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fr__mid{flex:1;min-width:0;text-align:center;font:600 12px var(--nv-font);color:var(--nv-mute)}
.fr__mid i{display:block;height:2px;margin-top:6px;border-radius:2px;background:var(--nv-teal);opacity:.35}
[data-way=back] .fr__mid i{background:var(--nv-roof)}
.fr__pl{display:flex;justify-content:space-between;gap:10px;font:600 13px var(--nv-font);color:var(--nv-ink-2)}
.fr__pl span:last-child{text-align:right}
.fr__ft{display:flex;align-items:center;gap:12px;margin-top:10px!important}
.fr__fare{flex:none;min-width:70px;max-width:120px}
.fr__fare b{font:800 20px var(--nv-font);letter-spacing:-.02em}
.fr__fare small{display:block;font:600 12px/1.25 var(--nv-font);color:var(--nv-mute)}
.fr__sel{flex:1;height:44px;border:0;border-radius:var(--nv-r);background:var(--nv-teal);color:#fff;font:800 16px var(--nv-font);cursor:pointer;transition:transform .15s}
.fr__sel:active{transform:scale(.97)}
[data-way=back] .fr__sel{background:var(--nv-roof)}
.fr__done{margin:0 16px;display:flex;gap:12px;align-items:center;background:var(--nv-teal-soft);border-radius:var(--nv-r-card);padding:14px 14px 14px 16px;
animation:fr-settle .5s cubic-bezier(.2,1.2,.3,1) both}
[data-way=back] .fr__done{background:var(--nv-warn-bg)}
@keyframes fr-settle{from{opacity:.4;transform:scale(1.04) translateY(10px)}to{opacity:1;transform:none}}
.fr__ck{flex:none;width:32px;height:32px;border-radius:50%;background:var(--nv-teal);color:#fff;display:grid;place-items:center;font:800 16px var(--nv-font)}
[data-way=back] .fr__ck{background:var(--nv-roof)}
.fr__done p{flex:1;min-width:0;margin:0}
.fr__done small{display:block;font:700 12px var(--nv-font);color:var(--nv-mute);text-transform:uppercase;letter-spacing:.04em}
.fr__done b{display:block;font:800 19px var(--nv-font);letter-spacing:-.02em;margin:1px 0;color:var(--nv-ink)}
.fr__done span{font:600 13px var(--nv-font);color:var(--nv-ink-2)}
.fr__chg{flex:none;height:44px;padding:0 14px;border:0;border-radius:var(--nv-r);background:var(--nv-card);color:var(--nv-teal-ink);font:800 14px var(--nv-font);cursor:pointer}
[data-way=back] .fr__chg{color:var(--nv-roof)}
.fr__land{margin:10px 16px 0;display:flex;align-items:center;gap:8px;font:700 13px var(--nv-font);color:var(--nv-ink-2)}
.fr__land::before{content:"";width:2px;height:22px;margin-left:15px;background:repeating-linear-gradient(var(--nv-teal) 0 4px,transparent 4px 8px)}
.fr__note{margin:0 16px 8px;font:600 13px var(--nv-font);color:var(--nv-mute)}
.fr__empty{margin:4px 16px;padding:22px 16px;border:2px dashed var(--nv-line);border-radius:var(--nv-r-card);text-align:center;font:600 14px var(--nv-font);color:var(--nv-mute)}
.both-sec .way .note{margin:10px 16px}
.tripbar:has(~ #trip){background:var(--nv-card);color:var(--nv-ink);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px -8px rgba(15,42,61,.2)}
.tripbar:has(~ #trip) .tripbar__s{color:var(--nv-ink);font-weight:700}
.tripbar:has(~ #trip) .tripbar__go{background:var(--nv-teal);color:#fff;border-radius:var(--nv-r);min-height:52px;padding:0 22px;font-weight:800}
.tripbar:has(~ #trip) .tripbar__go:disabled{background:var(--nv-off-bg);color:var(--nv-off-ink);border:0}
}
/* The smallest phones (320-360 wide, SE first generation): one line each for
the title and the controls, so the first boat and a fifth of the next stay
above the trip bar (Gal, 6 Oct). */
@media(max-width:360px){
.head:has(.pair-ctl) h1{font-size:19px;padding-right:80px}
.pair-ctl .both__n{font-size:11.5px;padding:3px 9px;min-height:26px}
.pair-ctl{gap:6px}
.pair-ctl .both__seg>button{padding:0 8px;font-size:12.5px;white-space:nowrap;min-height:36px}
.pair-ctl .veh__b{width:38px;height:24px;border-radius:12px}
.pair-ctl .veh__b::after{width:18px;height:18px}
.pair-ctl .veh__b:checked::after{transform:translateX(14px)}
/* No room for the words beside the switch: a car says it, the words stay
for a screen reader. */
.pair-ctl .veh{gap:6px}
.pair-ctl .veh__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pair-ctl .veh::before{content:"";flex:none;width:24px;height:24px;background:var(--nv-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11h.5A1.5 1.5 0 0 1 21 12.5V17h-2v1.5a1 1 0 0 1-2 0V17H7v1.5a1 1 0 0 1-2 0V17H3v-4.5A1.5 1.5 0 0 1 4.5 11zm2.2 0h9.6l-1.2-3.3a.6.6 0 0 0-.5-.4H8.9a.6.6 0 0 0-.5.4zM6.5 15a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm11 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11h.5A1.5 1.5 0 0 1 21 12.5V17h-2v1.5a1 1 0 0 1-2 0V17H7v1.5a1 1 0 0 1-2 0V17H3v-4.5A1.5 1.5 0 0 1 4.5 11zm2.2 0h9.6l-1.2-3.3a.6.6 0 0 0-.5-.4H8.9a.6.6 0 0 0-.5.4zM6.5 15a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm11 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* Every language but English is too long beside the switch on a phone held
upright: the car says it, the words stay for a screen reader. */
@media(min-width:361px) and (max-width:440px){
html:not([lang=en]) .pair-ctl .both__seg>button{white-space:nowrap;padding:0 10px}
html:not([lang=en]) .pair-ctl .veh{gap:6px}
html:not([lang=en]) .pair-ctl .veh__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not([lang=en]) .pair-ctl .veh::before{content:"";flex:none;width:24px;height:24px;background:var(--nv-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11h.5A1.5 1.5 0 0 1 21 12.5V17h-2v1.5a1 1 0 0 1-2 0V17H7v1.5a1 1 0 0 1-2 0V17H3v-4.5A1.5 1.5 0 0 1 4.5 11zm2.2 0h9.6l-1.2-3.3a.6.6 0 0 0-.5-.4H8.9a.6.6 0 0 0-.5.4zM6.5 15a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm11 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11h.5A1.5 1.5 0 0 1 21 12.5V17h-2v1.5a1 1 0 0 1-2 0V17H7v1.5a1 1 0 0 1-2 0V17H3v-4.5A1.5 1.5 0 0 1 4.5 11zm2.2 0h9.6l-1.2-3.3a.6.6 0 0 0-.5-.4H8.9a.6.6 0 0 0-.5.4zM6.5 15a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm11 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media(max-width:950px) and (max-height:640px){
.fr__h{padding:10px 16px 6px}
.fr__h h3{font-size:18px}
.fr__day{min-height:70px;padding:5px 0 7px}
.fr__n{font-size:21px}
.fr__row>b{font-size:26px}
.fr__card{padding:10px 12px}
.fr__ft{margin-top:8px!important}
.fr__sel{height:42px}
}
/* A phone held sideways: one row for the title and its controls, day chips
on one line, and cards that read across instead of down, so the first
boat is above the trip bar on a 390-high screen (Gal, 6 Oct). */
@media(max-height:500px) and (max-width:950px){
.head:has(.pair-ctl){padding:8px 0}
.head:has(.pair-ctl) .head__title{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.head:has(.pair-ctl) h1{flex:1 1 auto;min-width:0;padding-right:0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pair-ctl{display:flex;align-items:center;gap:10px;margin:0;flex:none}
.pair-ctl .both__n{position:static;order:3}
.pair-ctl .veh{min-height:36px}
.fr{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-flow:row dense;align-items:center}
.fr>*{grid-column:1/-1}
.fr>.fr__h{grid-column:1;padding:6px 4px 6px 16px}
.fr__h span{display:none}
.fr__h h3{font-size:16px}
.fr>.fr__rib{grid-column:2;padding:6px 16px 6px 8px}
.fr__meta{font-size:12px}
.fr__cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px}
.fr__mid{font-size:11px;white-space:nowrap}
.fr__kind{height:20px}
.fr__day{width:auto;min-height:0;height:44px;flex-direction:row;gap:6px;padding:0 12px}
.fr__day .fr__dots{display:none}
.fr__n{font-size:18px}
.fr__day.is-on{transform:none}
.fr__card{display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center;padding:6px 12px}
.fr__card>.fr__meta{grid-column:1/-1}
.fr__card>.fr__row{grid-column:1;margin:4px 0 0!important}
.fr__card>.fr__pl{grid-column:1}
.fr__card>.fr__ft{grid-column:2;grid-row:2/4;flex-direction:column;align-items:stretch;gap:4px;margin:0!important}
.fr__row>b{font-size:21px}
.fr__fare{text-align:center;max-width:none}
.fr__fare b{font-size:17px}
.fr__sel{flex:none;height:40px;padding:0 18px}
.tripbar:has(~ #trip) .tripbar__go{min-height:42px}
.tripbar:has(~ #trip) .wrap{padding-top:4px;padding-bottom:4px}
}
@media(max-height:500px) and (max-width:950px){.nv-hd{min-height:44px;height:44px}}
/* The 4-inch phone on its side: the switch says "vehicle" with a car, and
one card per row. */
@media(max-height:500px) and (max-width:639px){
.head:has(.pair-ctl) h1{font-size:18px}
.pair-ctl{gap:6px}
.pair-ctl .both__seg>button{padding:0 9px;font-size:12.5px;white-space:nowrap;min-height:34px}
.pair-ctl .veh__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pair-ctl .veh::before{content:"";flex:none;width:24px;height:24px;background:var(--nv-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11h.5A1.5 1.5 0 0 1 21 12.5V17h-2v1.5a1 1 0 0 1-2 0V17H7v1.5a1 1 0 0 1-2 0V17H3v-4.5A1.5 1.5 0 0 1 4.5 11zm2.2 0h9.6l-1.2-3.3a.6.6 0 0 0-.5-.4H8.9a.6.6 0 0 0-.5.4zM6.5 15a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm11 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11h.5A1.5 1.5 0 0 1 21 12.5V17h-2v1.5a1 1 0 0 1-2 0V17H7v1.5a1 1 0 0 1-2 0V17H3v-4.5A1.5 1.5 0 0 1 4.5 11zm2.2 0h9.6l-1.2-3.3a.6.6 0 0 0-.5-.4H8.9a.6.6 0 0 0-.5.4zM6.5 15a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm11 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.fr__cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.fr__card,.fr__done{animation:none}.fr__day{transition:none}}