/* ── Limestone ────────────────────────────────────────────────────────────
   A poster of the strait beside the three ways across it. Every boat on the
   poster is a link to the same place as its button, and pointing at either
   lights up both. The palette is Adriatic stone and sea; the only strong
   colours are the queue readings, which keep their own fixed green, amber and
   red so a reading never borrows a brand colour. Chosen by Gal, 25 Sept
   (concept 14, Limestone, sea on the right, phone layout B). */
@font-face{font-family:'Spartan';font-weight:500;font-display:swap;src:url('/fonts/spartan-latin-500.woff2') format('woff2');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+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spartan';font-weight:500;font-display:swap;src:url('/fonts/spartan-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Spartan';font-weight:800;font-display:swap;src:url('/fonts/spartan-latin-800.woff2') format('woff2');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+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spartan';font-weight:800;font-display:swap;src:url('/fonts/spartan-latin-ext-800.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
*,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0}
img{display:block;max-width:100%} a{color:inherit}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}
:root{--sky:#a9d9ea;--sky2:#cfeaf2;--sea:#1b3a8c;--sea2:#15306f;--sun:#f04a23;--sun2:#d23a16;--wh:#fbfbfa;--i:#0f1d45;--m:#465178;
 --hill:#2f6b4a;--hill2:#3f8157;--gtx:#12703f;--ytx:#865f00;--rtx:#b3261e;--hull:#fbfbfa;--bink:#0f1d45;--bac:#f04a23;--bs:#c63716;--bsh:#a52c10;--glass:rgba(251,251,250,.8);--gdot:#1f9a5a;--ydot:#e0a400;--rdot:#d8342a;--off:#7d87a6;--focus:#f04a23;--line:#e1e5ee}
body{background:var(--sea2);color:var(--i);font:500 16px/1.45 Spartan,system-ui,sans-serif}
.btn{text-transform:uppercase;letter-spacing:.03em;border-radius:0}
.btn.s{background:var(--bs);color:#fff}.btn.s:hover{background:var(--bsh)}
.btn.n{background:var(--i);color:#fff}.btn.n:hover{background:#000}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:0 20px;
 font-weight:800;font-size:17px;text-decoration:none;cursor:pointer;border:2px solid transparent;
 transition:background-color .16s cubic-bezier(.23,1,.32,1),transform .12s cubic-bezier(.23,1,.32,1),box-shadow .16s}
.btn::after{content:"→";font-size:1.15em;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.btn:hover::after{transform:translateX(4px)} .btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--focus,#0b5cad);outline-offset:3px}
.btn.wide{display:flex;width:100%}

.art{position:relative;overflow:hidden;background:linear-gradient(var(--sky2),var(--sky) 34%,var(--sky) 46%,var(--sea) 46%);min-height:clamp(320px,54vh,560px);color:var(--wh);isolation:isolate}
.sun{position:absolute;width:clamp(110px,30%,340px);aspect-ratio:1;border-radius:50%;background:var(--sun);right:8%;top:7%}
.hill{position:absolute;left:-5%;right:42%;top:32%;height:14.2%;background:var(--hill);border-radius:50% 60% 0 0/100% 100% 0 0}
.hill2{position:absolute;left:44%;right:-8%;top:37%;height:9.2%;background:var(--hill2);border-radius:60% 40% 0 0/100% 100% 0 0}
.lh{position:absolute;left:40%;top:35%;width:1.6%;min-width:7px;height:9%;background:var(--wh);border-top:6px solid var(--sun)}
.stripes{position:absolute;inset:auto 0 0 0;height:32%;background:repeating-linear-gradient(var(--sea) 0 18px,var(--sea2) 18px 24px)}
.wv{position:absolute;left:0;width:200%;height:3px;background:repeating-linear-gradient(90deg,transparent 0 50px,rgba(255,255,255,.28) 50px 86px,transparent 86px 140px);animation:wv var(--t,14s) linear infinite}
@keyframes wv{to{transform:translateX(-50%)}}
.lane{position:absolute;left:0;right:0;height:0;animation:cross var(--d,46s) linear infinite;animation-delay:var(--dl,-18s)}
.lane.rev{animation-name:crossr}
@keyframes cross{from{transform:translateX(-40%)}to{transform:translateX(108%)}}
@keyframes crossr{from{transform:translateX(108%)}to{transform:translateX(-40%)}}
.lane .b{position:absolute;left:0;bottom:0;width:var(--bw,30%)}
.lane .b svg{display:block;width:100%;overflow:visible;animation:bob 3.4s ease-in-out infinite alternate;transform-origin:50% 90%}
.lane.rev .b{transform:scaleX(-1)}
.lane.sl .b svg{animation:rock 4.6s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-6%) rotate(.8deg)}}
@keyframes rock{from{transform:rotate(-4deg)}to{transform:rotate(3deg) translateY(-4%)}}
.gulls{position:absolute;left:0;right:0;top:14%;height:0;animation:cross 60s linear infinite;animation-delay:-24s}
.gull{position:absolute;width:clamp(18px,2.4vw,34px);animation:flap .55s ease-in-out infinite alternate;transform-origin:50% 70%}
@keyframes flap{to{transform:scaleY(.45)}}
.art .ttl{position:absolute;left:6%;right:6%;bottom:6%;margin:0;font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.2vw,84px);line-height:.88;letter-spacing:-.03em;color:var(--wh);z-index:3;text-wrap:balance}
.art .ttl span{display:block;font-size:.34em;letter-spacing:.06em;line-height:1.2;margin-top:.5em;font-weight:500;text-transform:none}
@media (prefers-reduced-motion:reduce){.lane{transform:translateX(var(--rest,20%))}}

.col{background:var(--wh);color:var(--i);padding:22px 18px 28px;display:grid;gap:18px;align-content:start;min-width:0}
.brand{display:flex;justify-content:space-between;align-items:center;font-weight:800;letter-spacing:.02em}
.brand a{font-weight:600;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.col h1{margin:0;font-weight:800;font-size:clamp(28px,2.6vw,38px);line-height:1;letter-spacing:-.01em}
.opts{display:grid;gap:14px}
.opt{display:grid;gap:8px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.opt:last-child{border:0;padding-bottom:0}
.opt small{color:var(--m);font-size:15px}.opt small b{color:var(--i)}
.opt .btn{min-height:60px;font-size:17px}
.opt.bt{margin-top:6px;padding-top:16px;border-top:4px solid var(--i)}
.lv{background:#eef1f7;padding:14px 16px 12px;display:grid}
.lvh{margin:0 0 6px;font-weight:800;font-size:15px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lvh span{font-weight:500;color:var(--m)}
.lr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:8px;text-decoration:none;min-height:48px;align-items:center;border-top:1px solid #d6dbe8;padding:8px 0}
.lr i{font-style:normal;font-size:15px;color:var(--dc,var(--off))}
.lr .pn{font-weight:800;display:grid}.lr .pn em{font-style:normal;font-weight:500;font-size:13px;color:var(--m)}
.lr b{color:var(--tc,var(--m));font-weight:800;text-align:end}
.lr small{grid-column:2/-1;color:var(--m);font-size:13px}
.lr:hover .pn{text-decoration:underline}
.lr:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lr[data-s=green]{--tc:var(--gtx);--dc:var(--gdot)}.lr[data-s=yellow]{--tc:var(--ytx);--dc:var(--ydot)}.lr[data-s=red]{--tc:var(--rtx);--dc:var(--rdot)}
.lr[data-s=stale]{--tc:var(--i);--dc:var(--off)}
.lvf{margin:8px 0 0;font-size:13px;color:var(--m)}
.lv.down .dn{margin:0;font-size:15px}
.foot{font-size:13px;color:var(--m);margin:0}.foot a{color:var(--i)}
@media(min-width:640px) and (max-width:999px){.opt{grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:18px;align-items:center}.col{padding:28px 32px 34px}}

.w{display:grid;min-height:100dvh}
@media(min-width:1000px){.w{grid-template-columns:minmax(0,1fr) clamp(420px,38vw,600px)}.art{position:sticky;top:0;height:100dvh;min-height:0}.col{padding:30px clamp(24px,2.6vw,44px) 36px}}

.lane,.lane.rev{animation:sway var(--sd) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes sway{from{transform:translateX(var(--a))}to{transform:translateX(var(--b))}}
@media (prefers-reduced-motion:reduce){.lane{transform:translateX(var(--a))}}
.lane.rev .b{transform:none}.fl{display:block}.lane.rev .fl{transform:scaleX(-1)}
.bl{position:absolute;left:0;bottom:0;display:block;text-decoration:none;color:var(--i)}
.bl:focus-visible{outline:none}
.bl::before{content:"";position:absolute;inset:-18px -6px -8px}
.lane .b{position:relative;display:block;width:100%;transition:scale .35s cubic-bezier(.23,1,.32,1),filter .25s}
.spot{position:absolute;left:-8%;right:-8%;bottom:-10%;height:34%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,74,.55),rgba(255,216,74,0));opacity:0;scale:.6;transition:opacity .25s,scale .35s cubic-bezier(.23,1,.32,1);z-index:-1}
.tg{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,6px);opacity:0;white-space:nowrap;background:var(--wh);color:var(--i);font-weight:800;font-size:clamp(12px,1vw,15px);
 text-transform:uppercase;letter-spacing:.04em;padding:6px 10px;transition:opacity .2s,transform .25s cubic-bezier(.23,1,.32,1);pointer-events:none}
.tg::after{content:"";position:absolute;left:50%;top:100%;border:6px solid transparent;border-top-color:var(--wh);transform:translateX(-50%)}
.opt .btn{min-height:84px;padding-inline:14px 20px;justify-content:flex-start;transition:background-color .16s,transform .12s,box-shadow .2s cubic-bezier(.23,1,.32,1)}
.opt .btn .lb{flex:1;line-height:1.15;text-wrap:balance}
.opt .btn .ic{width:74px;flex:none;display:block}.opt .btn .ic svg{width:100%;display:block;animation:bob 3s ease-in-out infinite alternate}
.opt .btn .ic .wk{display:none}
@media(max-width:480px){.opt .btn .ic{width:54px}.opt .btn{font-size:15px}}
@media (hover:none){.tg{opacity:1;transform:translate(-50%,0);font-size:11px;padding:4px 7px}}
.w:has(.opt.car .btn:is(:hover,:focus-visible)) .lane:not(.fer) .b,.w:has(.bl.car:is(:hover,:focus-visible)) .lane:not(.fer) .b{filter:brightness(.82) saturate(.6)}
.w:has(.opt.car .btn:is(:hover,:focus-visible)) .lane.fer .b,.w:has(.bl.car:is(:hover,:focus-visible)) .lane.fer .b{scale:1.16}
.w:has(.opt.car .btn:is(:hover,:focus-visible)) .lane.fer .tg,.w:has(.bl.car:is(:hover,:focus-visible)) .lane.fer .tg{opacity:1;transform:translate(-50%,0)}
.w:has(.opt.car .btn:is(:hover,:focus-visible)) .lane.fer .spot,.w:has(.bl.car:is(:hover,:focus-visible)) .lane.fer .spot{opacity:1;scale:1}
.w:has(.opt.car .btn:is(:hover,:focus-visible)) .opt.car .btn,.w:has(.bl.car:is(:hover,:focus-visible)) .opt.car .btn{box-shadow:0 0 0 4px var(--wh),0 0 0 7px var(--focus)}
.w:has(.opt.car .btn:is(:hover,:focus-visible)) .opt.car .btn .ic svg,.w:has(.bl.car:is(:hover,:focus-visible)) .opt.car .btn .ic svg{animation-duration:.7s}
.w:has(.opt.foot .btn:is(:hover,:focus-visible)) .lane:not(.cat) .b,.w:has(.bl.foot:is(:hover,:focus-visible)) .lane:not(.cat) .b{filter:brightness(.82) saturate(.6)}
.w:has(.opt.foot .btn:is(:hover,:focus-visible)) .lane.cat .b,.w:has(.bl.foot:is(:hover,:focus-visible)) .lane.cat .b{scale:1.16}
.w:has(.opt.foot .btn:is(:hover,:focus-visible)) .lane.cat .tg,.w:has(.bl.foot:is(:hover,:focus-visible)) .lane.cat .tg{opacity:1;transform:translate(-50%,0)}
.w:has(.opt.foot .btn:is(:hover,:focus-visible)) .lane.cat .spot,.w:has(.bl.foot:is(:hover,:focus-visible)) .lane.cat .spot{opacity:1;scale:1}
.w:has(.opt.foot .btn:is(:hover,:focus-visible)) .opt.foot .btn,.w:has(.bl.foot:is(:hover,:focus-visible)) .opt.foot .btn{box-shadow:0 0 0 4px var(--wh),0 0 0 7px var(--focus)}
.w:has(.opt.foot .btn:is(:hover,:focus-visible)) .opt.foot .btn .ic svg,.w:has(.bl.foot:is(:hover,:focus-visible)) .opt.foot .btn .ic svg{animation-duration:.7s}
.w:has(.opt.boat .btn:is(:hover,:focus-visible)) .lane:not(.sl) .b,.w:has(.bl.boat:is(:hover,:focus-visible)) .lane:not(.sl) .b{filter:brightness(.82) saturate(.6)}
.w:has(.opt.boat .btn:is(:hover,:focus-visible)) .lane.sl .b,.w:has(.bl.boat:is(:hover,:focus-visible)) .lane.sl .b{scale:1.16}
.w:has(.opt.boat .btn:is(:hover,:focus-visible)) .lane.sl .tg,.w:has(.bl.boat:is(:hover,:focus-visible)) .lane.sl .tg{opacity:1;transform:translate(-50%,0)}
.w:has(.opt.boat .btn:is(:hover,:focus-visible)) .lane.sl .spot,.w:has(.bl.boat:is(:hover,:focus-visible)) .lane.sl .spot{opacity:1;scale:1}
.w:has(.opt.boat .btn:is(:hover,:focus-visible)) .opt.boat .btn,.w:has(.bl.boat:is(:hover,:focus-visible)) .opt.boat .btn{box-shadow:0 0 0 4px var(--wh),0 0 0 7px var(--focus)}
.w:has(.opt.boat .btn:is(:hover,:focus-visible)) .opt.boat .btn .ic svg,.w:has(.bl.boat:is(:hover,:focus-visible)) .opt.boat .btn .ic svg{animation-duration:.7s}
:root{interpolate-size:allow-keywords}
.sky{position:absolute;left:4%;top:4%;z-index:6;width:min(460px,92%);background:var(--glass);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);color:var(--i);box-shadow:0 2px 10px rgba(10,20,40,.14)}
.sky summary{list-style:none;display:flex;gap:10px;align-items:center;padding:10px 10px 10px 14px;min-height:52px;cursor:pointer}
.sky summary::-webkit-details-marker{display:none}
.sky summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ld{flex:none;width:10px;height:10px;border-radius:50%;background:var(--i);animation:live 2s cubic-bezier(.23,1,.32,1) infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--i) 45%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}
.st{display:grid;gap:1px;font-size:16px;line-height:1.3;min-width:0}
.st b{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.sm{font-weight:600}.sm i{font-style:normal;color:var(--dc,var(--off))}
.sm[data-s=green]{--dc:var(--gdot)}.sm[data-s=yellow]{--dc:var(--ydot)}.sm[data-s=red]{--dc:var(--rdot)}
.more{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;background:var(--i);color:var(--wh);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.more::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.sky[open] .more::after{transform:translateY(2px) rotate(-135deg)}
.more .c,.sky[open] .more .o{display:none}.sky[open] .more .c{display:inline}
.sky summary:hover .more{background:#000}
.sky::details-content{height:0;overflow:clip;transition:height .3s cubic-bezier(.23,1,.32,1),content-visibility .3s allow-discrete}
.sky[open]::details-content{height:auto}
.sp{padding:0 14px 12px;border-top:1px solid color-mix(in srgb,var(--i) 14%,transparent)}
.sp .lr{border-top-color:color-mix(in srgb,var(--i) 12%,transparent)}.sp .lr:first-child{border-top:0}
.spf,.sp .dn{margin:6px 0 0;font-size:13px;color:var(--m)}
@media (prefers-reduced-transparency:reduce){.sky{background:var(--wh);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(max-width:480px){.sky{left:12px;top:12px;width:calc(100% - 24px)}.st{font-size:14px}}
.sky[open]{max-height:calc(100% - 8%);overflow:auto;overscroll-behavior:contain;background:rgba(251,251,250,.9)}
.sky[open] summary{position:sticky;top:0;background:inherit;z-index:1}
:root{--sky:#dde8ea;--sky2:#eef3f3;--sea:#1f5566;--sea2:#194755;--hill:#8aa493;--hill2:#a0b6a6;--sun:#eaa877;--i:#1b2b33;--m:#4b5c63;--bs:#a24f2a;--bsh:#853f20;--bac:#d9864f;--focus:#a24f2a;--line:#dfe7e8;}@media(min-width:1000px){.w{grid-template-columns:clamp(420px,38vw,600px) minmax(0,1fr)}}@media(max-width:999px){.art{order:-1}}@media(max-width:999px) and (max-height:600px){.lane.cat,.lane.sl{display:none}}
.sub{display:none}
@media(max-width:999px){
 .w{position:relative}
 .brand{position:absolute;top:0;left:0;right:0;z-index:7;height:44px;padding:0 16px;margin:0}
 .sky{top:48px}
 .sky[open]{position:fixed;top:48px;left:12px;right:12px;width:auto;max-height:calc(100svh - 60px);background:rgba(251,251,250,.94)}
 .art .ttl span{display:none}
 .tg{opacity:0}
 .opts{gap:8px}.opt{padding:0;border:0;gap:0;grid-template-columns:1fr}.opt>small{display:none}
 .opt.bt{margin-top:2px;padding-top:10px;border-top-width:3px}
 .opt .btn{min-height:66px;font-size:15px;padding-inline:12px 16px;gap:12px}
 .opt .btn .ic{width:50px}
 .opt .lb .sub{display:block;font:500 13px/1.25 Spartan,system-ui,sans-serif;text-transform:none;letter-spacing:0;color:inherit;opacity:.9;margin-top:3px}
 .col h1{font-size:22px}
}

@media(max-width:999px){
 .w{display:grid;grid-template-areas:"a"}
 .art,.col{grid-area:a}
 .art{height:100svh;min-height:520px;background:linear-gradient(var(--sky2),var(--sky) 20%,var(--sky) 33%,var(--sea) 33%)}
 .art .sun{width:26%;top:12%}
 .art .hill{top:23%;height:10.2%}.art .hill2{top:26.5%;height:6.6%}.art .lh{top:25%;height:6.5%}
 .art .stripes{height:60%}
 .lane.sl{top:38%!important}.lane.cat{top:42%!important}.lane.fer{top:49%!important}
 .art .ttl{top:51%;bottom:auto;font-size:clamp(24px,7.2vw,40px)}
 .col{background:none;align-self:end;z-index:5;padding:0 16px 14px;gap:8px;min-height:0}
 .w:has(.art .sky[open]) .art{z-index:10}
 .w:has(.col .sky[open]) .col{z-index:10}
 .col h1{color:var(--wh)}
 .opt .btn.n{background:#fbfbfa;color:var(--i);--hull:#1b2b33;--bink:#fbfbfa}.opt .btn.n:hover{background:#fff}
 .opt.bt{border-top-color:rgba(251,251,250,.5)}
 .foot{color:rgba(251,251,250,.78);font-size:12px}.foot a{color:var(--wh)}
}
@media(max-width:999px) and (max-height:760px){.art .ttl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:999px) and (max-height:600px){.lane.fer{top:37%!important}.lane.fer .bl{width:30%!important}}

/* ── the page around the poster ───────────────────────────────────────── */
:root{--sans:Spartan,system-ui,sans-serif;--ink:var(--i);--ink-2:var(--m);--d0:var(--wh)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.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}
.skip:focus{position:fixed;z-index:99;top:10px;left:10px;width:auto;height:auto;clip:auto;margin:0;padding:12px 16px;background:var(--wh);color:var(--i);font-weight:800;text-decoration:none}
.brand .mk{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:16px}
.brand nav{display:flex;align-items:center;gap:4px}
.langs{position:relative}
.langs summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;cursor:pointer;font-weight:800;font-size:13px}
.langs summary::-webkit-details-marker{display:none}
.langs .pick__c{width:12px;height:12px}
.langs ul{position:absolute;right:0;top:100%;z-index:20;margin:0;padding:6px 0;list-style:none;background:var(--wh);box-shadow:0 6px 24px rgba(10,20,40,.18);min-width:180px}
.langs li a{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font-weight:600;font-size:14px}
.langs li a:hover{background:var(--sky2)}.langs .cd{margin-left:auto;color:var(--m);font-size:12px}
.langs a[aria-current]{font-weight:800}
.lr[data-s=clear]{--tc:var(--gtx);--dc:var(--gdot)}.sm[data-s=clear]{--dc:var(--gdot)}
.lr[data-s=stale] b{font-weight:600}
.sm.wait{color:var(--m)}
.below{background:var(--wh);color:var(--i);padding:56px 0 40px;border-top:6px solid var(--sea)}
.bw{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;gap:40px}
.doors{display:grid;gap:32px}
@media(min-width:800px){.doors{grid-template-columns:1.4fr 1fr}}
.door__count{margin:0 0 4px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--m)}
.door__t{margin:0 0 10px;font-size:clamp(24px,2.4vw,32px);line-height:1.05;font-weight:800}
.door__one{margin:0 0 16px;max-width:60ch}.door__also{display:block;margin-top:6px;color:var(--m)}
.door__two{display:grid;gap:10px;margin-bottom:18px}
@media(min-width:560px){.door__two{grid-template-columns:1fr 1fr}}
.go{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 18px;background:var(--i);color:#fff;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;transition:background-color .16s}
.go:hover{background:#000}.go svg{width:16px;height:16px;flex:none}
.door--boat .go{background:var(--bs)}.door--boat .go:hover{background:var(--bsh)}
.door--boat>.go{margin-bottom:18px}
.door__more ul{margin:0;padding-left:1.1em;display:grid;gap:8px;color:var(--m);font-size:15px}
.door__more--split{display:grid;gap:18px}
@media(min-width:560px){.door__more--split{grid-template-columns:1fr 1fr}}
.door__lab{margin:0 0 6px;font-weight:800;font-size:14px}
.rest{border-top:2px solid var(--line);padding-top:24px}
.rest__h{margin:0 0 12px;font-weight:800;font-size:18px}
.rest ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
@media(min-width:700px){.rest ul{grid-template-columns:1fr 1fr;column-gap:32px}}
.rest li a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:48px;border-top:1px solid var(--line);text-decoration:none}
.rest li a:hover .rest__n{text-decoration:underline}
.xing__no{font-weight:800;font-size:13px;color:var(--m)}.rest__n{font-weight:600}.rest__m{color:var(--m);font-size:14px}
.rest__all{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:800}
.fin{border-top:2px solid var(--line);padding-top:24px;font-size:14px;color:var(--m);display:grid;gap:12px}
.fin p{margin:0}.fin a{color:var(--i)}
.fin ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
@media(min-width:700px){.fin ul{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:32px}}
.fin li span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.fin li a{display:inline-flex;min-height:32px;align-items:center}

/* ── desktop: the title in the sky, the readings on the sea ───────────────
   Gal, 25 Sept: the title goes up into the sky, left, and the live panel
   takes its place on the water with a line per ramp, so the sea is not left
   empty. The panel is anchored by its bottom, so opening it grows upward. */
.sm.pp{display:none}
@media(min-width:1000px){
 .art .ttl{top:6%;bottom:auto;right:auto;max-width:52%;color:var(--i);font-size:clamp(40px,4.6vw,80px)}
 .art .ttl span{color:var(--m)}
 .sky{top:auto;left:6%;bottom:5%;width:min(520px,70%)}
 .sky[open]{max-height:calc(100% - 10%)}
 .sm.gp{display:none}
 .sm.pp{display:flex;align-items:baseline;gap:8px}
 .sm.pp em{font-style:normal;margin-left:auto;padding-left:16px;font-weight:800;color:var(--tc,var(--m))}
 .sm.pp[data-s=green],.sm.pp[data-s=clear]{--tc:var(--gtx)}.sm.pp[data-s=yellow]{--tc:var(--ytx)}.sm.pp[data-s=red]{--tc:var(--rtx)}
 .st{flex:1;gap:3px}
 .sky summary{align-items:center;padding:12px 12px 12px 16px}
 .ld{align-self:flex-start;margin-top:5px}
 .gulls{top:27%}
 .sky{background:rgba(251,251,250,.93)}
}

/* Gal, 25 Sept, later: the poster moves back to the left and the question to
   the right. The column stays first in the DOM, so a keyboard still reaches
   the three buttons before the three boats. */
@media(min-width:1000px){.w{grid-template-columns:minmax(0,1fr) clamp(420px,38vw,600px)}.col{order:2}}

/* Gal, 25 Sept, later still: no black dot; the reading dots themselves pulse,
   and only while they carry a live reading. The name moves into the sky over
   the title on a desktop, a size up. */
.ld{display:none}
.sm[data-s=green] i,.sm[data-s=clear] i,.sm[data-s=yellow] i,.sm[data-s=red] i{display:inline-block;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.pmk{display:none}
@media(min-width:1000px){
 .col .mk{display:none}.brand{justify-content:flex-end}
 .pmk{position:absolute;left:6%;top:5%;z-index:4;display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--i);text-decoration:none;font-weight:800;font-size:clamp(24px,2vw,32px)}
 .pmk svg{width:1.25em;height:1.25em}
 .art .ttl{top:14%}
 .art .hill{top:35%;height:11.2%}.art .hill2{top:39%;height:7.2%}.art .lh{top:37.5%;height:6.5%}
 .gulls{top:36%}
}

/* Trial, 25 Sept: a short list under each of the three buttons, one line
   an answer, on a desktop only; there is no room for them on a phone. */
.qa{display:none}
@media(min-width:1000px){
 .opt:has(.qa)>small{display:none}
 .qa{display:grid;gap:3px;margin:2px 0 0}
 .qa div{display:flex;gap:6px;font-size:14px;line-height:1.4;color:var(--m);min-width:0}
 .qa dt{font-weight:800;color:var(--i);flex:none}
 .qa dt::after{content:":"}
 .qa dd{margin:0;min-width:0}
}

/* Gal, 26 Sept: on a desktop the hero now carries all of it, so under the
   fold is the footer and nothing else. Phones keep the detail for now. */
@media(min-width:1000px){.doors,.rest,.col>.foot{display:none}.below{padding:28px 0}.fin{border-top:0;padding-top:0}}

/* ── the boat's fan (Gal, 26 Sept) ────────────────────────────────────────
   Choosing the boat is "now we deal with the boat": it sails to the middle
   and grows, everything else steps back, and the five things the app finds
   open over it like a hand fan. The arc is an ellipse, wide and low, so the
   whole fan stays on the blue sea and never pokes up into the hills. Every
   item starts folded at the top and swings out to its angle (--a is a
   registered angle, so it animates along the arc, not across it).
   live.js measures the boat and sets --dx/--dy and data-on on .w; desktop only.
   The ferry and the catamaran got the same (26 Sept): data-on is boat, car
   or foot, and each has its own fan and label; the X is shared. */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.fan,.flive,.fx{display:none}
@media(min-width:1000px) and (hover:hover){
 .fan{display:block;position:absolute;left:50%;top:62%;width:0;height:0;z-index:7;pointer-events:none;
  --rx:min(calc(14vw + 130px),calc((100vw - clamp(420px,38vw,600px)) / 2 - 56px));--ry:calc(8vh - 10px)}
 .fan a{--a:0deg;position:absolute;left:0;top:0;display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--i);
  opacity:0;visibility:hidden;
  transform:translate(-50%,-50%) translate(calc(sin(var(--a)) * var(--rx)),calc(cos(var(--a)) * var(--ry) * -1)) scale(.6);
  transition:--a .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1),opacity .2s,visibility 0s .5s}
 .fan .ci{width:62px;height:62px;border-radius:50%;background:var(--wh);display:grid;place-items:center;box-shadow:0 4px 14px rgba(10,20,40,.22);transition:background-color .15s,color .15s}
 .fan .ci svg{width:30px;height:30px}
 .fan .fw{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;background:var(--wh);padding:3px 8px;white-space:nowrap}
 .fan a:hover .ci,.fan a:focus-visible .ci{background:var(--bs);color:#fff}
 .fan a:focus-visible{outline:none}
 .w[data-on=boat] .fan[data-k=boat],.w[data-on=car] .fan[data-k=car],.w[data-on=foot] .fan[data-k=foot]{pointer-events:auto}
 .w[data-on=boat] .fan[data-k=boat] a,.w[data-on=car] .fan[data-k=car] a,.w[data-on=foot] .fan[data-k=foot] a{--a:var(--to);opacity:1;visibility:visible;
  transform:translate(-50%,-50%) translate(calc(sin(var(--a)) * var(--rx)),calc(cos(var(--a)) * var(--ry) * -1)) scale(1);
  transition:--a .6s cubic-bezier(.23,1,.32,1) calc(160ms + var(--n) * 45ms),transform .6s cubic-bezier(.23,1,.32,1) calc(160ms + var(--n) * 45ms),opacity .2s calc(120ms + var(--n) * 45ms),visibility 0s}
 .lane .bl{transition:translate .6s cubic-bezier(.23,1,.32,1),scale .6s cubic-bezier(.23,1,.32,1)}
 .lane,.ttl,.sky,.gulls{transition:opacity .35s,filter .35s}
 .w[data-on=boat] .lane.sl,.w[data-on=car] .lane.fer,.w[data-on=foot] .lane.cat{animation-play-state:paused}
 .w[data-on=boat] .lane.sl .bl,.w[data-on=car] .lane.fer .bl,.w[data-on=foot] .lane.cat .bl{translate:var(--dx,0) var(--dy,0);z-index:6}
 /* each boat grows to about the same size in the middle: the ferry is already big */
 .w[data-on=boat] .lane.sl .bl{scale:2.35}.w[data-on=car] .lane.fer .bl{scale:1}.w[data-on=foot] .lane.cat .bl{scale:1.7}
 .w[data-on] .tg{opacity:0!important}
 .fan a.sos .ci{background:var(--rtx);color:#fff}.fan a.sos .fw{color:var(--rtx)}
 .fan .ci{position:relative}
 .fan a.live .ci::after{content:"";position:absolute;right:3px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--gdot);border:2px solid var(--wh);animation:blink 2s ease-in-out infinite}
 .flive{display:block;position:absolute;left:50%;top:calc(71% + (100vw - clamp(420px,38vw,600px)) * .07 + 12px);transform:translateX(-50%);margin:0;z-index:7;opacity:0;transition:opacity .3s;
  display:flex;align-items:center;gap:8px;background:var(--wh);color:var(--i);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;white-space:nowrap;pointer-events:none}
 .flive::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gdot);animation:blink 2s ease-in-out infinite}
 .w[data-on=boat] .flive[data-k=boat],.w[data-on=car] .flive[data-k=car],.w[data-on=foot] .flive[data-k=foot]{opacity:1;transition-delay:.45s}
 .fx{display:grid;place-items:center;position:absolute;top:calc(46% + 16px);right:5%;z-index:8;width:48px;height:48px;border:0;border-radius:50%;background:var(--wh);color:var(--i);cursor:pointer;box-shadow:0 2px 10px rgba(10,20,40,.2);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s,background-color .15s}
 .fx svg{width:16px;height:16px}
 .fx:hover{background:var(--i);color:var(--wh)}
 .fx:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
 .w[data-on] .fx{opacity:1;visibility:visible;transition:opacity .2s .3s,visibility 0s,background-color .15s}
 .w[data-on=boat] .lane:not(.sl),.w[data-on=car] .lane:not(.fer),.w[data-on=foot] .lane:not(.cat),.w[data-on] .ttl,.w[data-on] .sky,.w[data-on] .gulls{opacity:.22;filter:saturate(.3);pointer-events:none}
}
/* Desktop: the boats sail across each other, so only the painted hull takes the pointer. */
@media (min-width:1000px) and (hover:hover){.bl,.bl svg{pointer-events:none}.bl::before{content:none}.bl svg *{pointer-events:visiblePainted}}

/* Content pages (author/method, and future destination/topic pages): plain
   white reading surface, not the boarding-poster chrome. */
main.page{background:var(--wh);color:var(--i);min-height:100vh;padding:32px 0 56px}
main.page h1{font-size:clamp(26px,4vw,36px);margin:24px 0 8px;font-weight:800;line-height:1.15}
main.page h2{font-size:19px;margin:0 0 10px;font-weight:800}
main.page section{max-width:640px;display:grid;gap:10px}
main.page section p{margin:0}
main.page section ul{margin:0;padding-left:20px;display:grid;gap:6px}
main.page .brand{margin-bottom:8px}

/* ── the phone (Gal, 26 Sept: concept 04 of ten) ─────────────────────────
   Closed, it is the buttons on the sea with the desktop's arrangement: the
   title up in the sky, the live panel on the water above the question
   (live.js moves the panel into the column; without script it stays at the
   top and the title keeps its old place). Under the fold only the footer.
   A tap on a way across does what hover does on a desktop: its boat sails
   to the middle, its fan opens in an arc over it, and the dock under the
   boat holds the way in and a strip of the three boats to switch fans. */
.dock{display:none}
@media(max-width:999px){
 .doors,.rest,.col>.foot{display:none}.below{padding:20px 0 26px;border-top:0}.fin{border-top:0;padding-top:0}
 .tg{display:none}
 .art{background:linear-gradient(var(--sky2),var(--sky) 20%,var(--sky) 30%,var(--sea) 30%)}
 .art .hill{top:20%}.art .hill2{top:23.5%}.art .lh{top:22%}
 .col .sky{position:relative;left:auto;top:auto;width:auto;margin:0 0 2px}
 .col .sky[open]{position:fixed;top:48px;left:12px;right:12px;width:auto}
 .w:has(.col .sky) .art .ttl,.w:has(.art>.sky) .art .ttl{position:absolute;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;top:56px;bottom:auto;left:16px;right:38%;font-size:clamp(22px,7vw,36px);color:var(--i);line-height:.9}
 .fan{display:block;position:absolute;left:50%;top:calc(100svh - 196px);width:0;height:0;z-index:7;pointer-events:none;--r:min(40vw,150px)}
 .fan[data-k=boat]{--r:min(40vw,158px)}
 /* even angles, not even x: on a circle that spaces the icons evenly along the arc (Gal, 26 Sept) */
 .fan[data-k=car]{--c:6}.fan[data-k=foot]{--c:5}.fan[data-k=boat]{--c:7}
 .fan a{--ea:calc((var(--n) / (var(--c) - 1) * 2 - 1) * 72deg)}
 /* a little wider than tall, so the end icons clear the boat's sides */
 .fan,.fan[data-k=boat]{--rx:min(42vw,176px,calc(50vw - 40px))}
 .fan[data-k=boat] .fw{font-size:9.5px;letter-spacing:.02em}
 /* the icon sits exactly on the arc and its word hangs under it; in the boat's
    seven, every other word sits above instead, so neighbours never share a line */
 .fan a{width:48px;height:48px;display:block}
 .fan .fw{position:absolute;left:50%;top:calc(100% + 4px);translate:-50% 0}
 .fan[data-k=boat] a:nth-child(even) .fw{top:auto;bottom:calc(100% + 4px)}
 .fan a{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:4px;text-decoration:none;color:var(--i);opacity:0;visibility:hidden;
  transform:translate(-50%,-50%) translate(calc(sin(var(--ea)) * var(--rx,var(--r))),calc(cos(var(--ea)) * var(--ry,var(--r)) * -1)) scale(.6);transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .2s,visibility 0s .45s}
 .fan .ci{position:relative;width:48px;height:48px;border-radius:50%;background:var(--wh);display:grid;place-items:center;box-shadow:0 3px 10px rgba(10,20,40,.25)}
 .fan .ci svg{width:24px;height:24px}
 .fan .fw{font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.03em;background:var(--wh);padding:2px 5px;white-space:nowrap}
 .fan a.live .ci::after{content:"";position:absolute;right:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--gdot);border:2px solid var(--wh);animation:blink 2s ease-in-out infinite}
 .fan a.sos .ci{background:var(--rtx);color:#fff}.fan a.sos .fw{color:var(--rtx)}
 .w[data-on=car] .fan[data-k=car],.w[data-on=foot] .fan[data-k=foot],.w[data-on=boat] .fan[data-k=boat]{pointer-events:auto}
 .w[data-on=car] .fan[data-k=car] a,.w[data-on=foot] .fan[data-k=foot] a,.w[data-on=boat] .fan[data-k=boat] a{opacity:1;visibility:visible;
  transform:translate(-50%,-50%) translate(calc(sin(var(--ea)) * var(--rx,var(--r))),calc(cos(var(--ea)) * var(--ry,var(--r)) * -1)) scale(1);transition:transform .45s cubic-bezier(.23,1,.32,1) calc(var(--n) * 40ms),opacity .2s calc(var(--n) * 40ms),visibility 0s}
 .w[data-on=car] .lane.fer,.w[data-on=foot] .lane.cat,.w[data-on=boat] .lane.sl{animation:none;transform:none;top:calc(100svh - 196px)!important;display:block}
 .w[data-on=car] .lane.fer .bl,.w[data-on=foot] .lane.cat .bl,.w[data-on=boat] .lane.sl .bl{left:50%;translate:-50% 45%}
 .w[data-on=car] .lane.fer .bl{width:min(46vw,214px)!important}.w[data-on=foot] .lane.cat .bl{width:min(46vw,200px)!important}.w[data-on=boat] .lane.sl .bl{width:min(26vw,110px)!important}
 .w[data-on=car] .lane:not(.fer),.w[data-on=foot] .lane:not(.cat),.w[data-on=boat] .lane:not(.sl){opacity:0;pointer-events:none}
 .w[data-on]:not([data-m=keep]) :is(.opts,.col>h1,.col .sky,.art .ttl,.gulls){opacity:0;visibility:hidden;pointer-events:none}
 .w[data-on]:not([data-m=keep]) .dock{display:grid;gap:8px;position:absolute;left:0;right:0;bottom:0;z-index:9;padding:0 16px 14px}
 .dk{display:none;gap:8px}
 .dl{margin:0 auto;display:flex;align-items:center;gap:7px;background:var(--wh);color:var(--i);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px}
 .dl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gdot);animation:blink 2s infinite}
 .w[data-on=car] .dk[data-k=car],.w[data-on=foot] .dk[data-k=foot],.w[data-on=boat] .dk[data-k=boat]{display:grid}
 .dk .btn{min-height:56px;font-size:15px}.dk .btn .ic{width:44px}
 .dk .btn.n{background:var(--i);color:#fff}
 .sw{display:grid;grid-template-columns:repeat(3,1fr) 52px;gap:6px}
 .sw button{display:grid;place-items:center;height:48px;border:0;background:rgba(251,251,250,.16);cursor:pointer;color:var(--wh);padding:0}
 .sw .ic{width:44px}.sw .ic svg{display:block;width:100%}
 .sw .dx{background:var(--wh);color:var(--i)}.sw .dx svg{width:16px;height:16px}
 .sw button:focus-visible{outline:3px solid var(--wh);outline-offset:2px}
 .sw [aria-pressed=true]{background:rgba(251,251,250,.4);box-shadow:inset 0 -3px 0 var(--wh)}
}
@media(max-width:999px) and (max-height:600px){.w:has(.col .sky) .art .ttl{display:none}.fan{--r:min(36vw,120px)}.fan[data-k=boat]{--r:min(40vw,128px)}}
@media(max-width:380px){.fan .fw{font-size:9px;letter-spacing:.02em;padding:2px 4px}}
@media(max-width:340px){.dk .btn .ic{display:none}.dk .btn{font-size:14px}}
@media(max-width:300px){.fan,.fan[data-k=boat]{--r:38vw;--rx:36vw}.fan a{width:42px;height:42px}.fan .ci{width:42px;height:42px}.fan .ci svg{width:21px;height:21px}.fan .fw{font-size:9px;padding:1px 3px}.brand .mk{font-size:14px}.brand .mk svg{width:20px}}
/* A phone on its side: the desktop arrangement, compressed; the fan opens
   on the poster and the dock takes the buttons' place in the column. */
@media(max-width:999px) and (orientation:landscape) and (max-height:520px){
 .w{grid-template-areas:none;grid-template-columns:minmax(0,1fr) minmax(320px,46%)}
 .art{grid-area:auto;order:0;position:sticky;top:0;height:100svh;min-height:0;background:linear-gradient(var(--sky2),var(--sky) 30%,var(--sky) 42%,var(--sea) 42%)}
 .col{grid-area:auto;order:2;position:static;background:var(--wh);padding:8px 16px 12px;gap:8px;align-self:stretch;align-content:start;z-index:1}
 .col h1{color:var(--i);font-size:19px}
 .brand{position:static;height:auto;padding:0}
 .w:has(.col .sky) .art .ttl,.art .ttl{position:absolute;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:block;top:16px;left:5%;right:40%;bottom:auto;font-size:24px;color:var(--i);line-height:.9}
 .art .sun{width:17%;top:8%;right:6%}
 .art .hill{top:31%;height:11%}.art .hill2{top:34%;height:8%}.art .lh{top:32%;height:9%}.gulls{top:26%}
 .lane.sl{display:none}.lane.cat{display:block;top:58%!important}.lane.fer{top:74%!important}
 .lane.fer .bl{width:40%!important}.lane.cat .bl{width:26%!important}
 .opt .btn{min-height:52px;font-size:14px}.opt .btn .ic{width:44px}.opt .lb .sub{display:none}
 .opts{gap:6px}.opt.bt{padding-top:6px;margin-top:0}
 .opt .btn.n{background:var(--i);color:#fff;--hull:#fbfbfa;--bink:var(--i)}
 .fan,.fan[data-k=boat]{top:77%;--r:min(21vw,140px);--rx:min(21vw,140px);--ry:108px}
 .w[data-on=car] .lane.fer .bl{width:min(24vw,190px)!important}.w[data-on=foot] .lane.cat .bl{width:min(19vw,150px)!important}.w[data-on=boat] .lane.sl .bl{width:min(10vw,80px)!important}
 .w[data-on=car] .lane.fer,.w[data-on=foot] .lane.cat,.w[data-on=boat] .lane.sl{top:77%!important}
 .w[data-on] .opts{display:none}
 .w[data-on] .dock{position:static;padding:0}
 .w[data-on] .sw button:not(.dx){background:var(--sea)}
 .w[data-on] .dl,.w[data-on] .sw .dx{background:var(--sky2)}
}

/* Gal, 28 Sept: with room, the page stays and the fan opens higher, in the
   sea between the title and the live panel; live.js measures that gap and
   sets --fy (the boat's line) and --ry (how tall the arc may be). */
@media(max-width:999px){
 .w[data-m=keep] .fan{top:var(--fy)}
 .w[data-m=keep][data-on=car] .lane.fer,.w[data-m=keep][data-on=foot] .lane.cat,.w[data-m=keep][data-on=boat] .lane.sl{top:var(--fy)!important}
 .w[data-m=keep][data-on] .gulls{opacity:0}
 .w[data-m=keep][data-on=car] .opt.car .btn,.w[data-m=keep][data-on=foot] .opt.foot .btn,.w[data-m=keep][data-on=boat] .opt.boat .btn{box-shadow:0 0 0 3px var(--sea),0 0 0 6px var(--wh)}
 .w[data-m=keep][data-on] .fx{display:grid;place-items:center;position:absolute;top:56px;right:12px;z-index:8;width:44px;height:44px;border:0;border-radius:50%;background:var(--wh);color:var(--i);box-shadow:0 2px 10px rgba(10,20,40,.2);cursor:pointer}
 .w[data-m=keep][data-on] .fx svg{width:16px;height:16px}
}

/* phone accordion (Gal, 28 Sept): the chosen button opens a sea well under
   itself with its boat and fan; "Let's cross" comes after the well and the
   page scrolls by the same amount, so it lands where the finger was. */
.gx,.well{display:none}
@media(max-width:999px){
 .opt .btn::after{content:"";width:9px;height:9px;flex:none;margin-inline:6px 4px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(-45deg);transition:transform .2s cubic-bezier(.23,1,.32,1)}
 .opt .btn:hover::after{transform:rotate(-45deg)}
 .opt .btn[aria-expanded=true]::after{transform:rotate(45deg) translate(-2px,-2px)}
 .opt .btn,.opt .gx{grid-area:1/1}
 .opt .btn{position:relative;z-index:1}
 .opt,.opt .gx{transition:transform .32s cubic-bezier(.23,1,.32,1)}
 .w[data-open]{padding-bottom:var(--push,0px)}
 .w[data-open=car] :is(.opt.car .gx,.opt.foot,.opt.boat),.w[data-open=foot] :is(.opt.foot .gx,.opt.boat),.w[data-open=boat] .opt.boat .gx{transform:translateY(var(--push,0px))}
 .w[data-open=car] .opt.car .gx,.w[data-open=foot] .opt.foot .gx,.w[data-open=boat] .opt.boat .gx{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 14px;text-align:center;line-height:1.15;background:var(--i);color:var(--wh);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
 .w[data-open=boat] .opt.boat .gx{background:var(--bs);color:#fff}
 .gx::after{content:"→";font-size:1.15em}
 .w[data-open] .opt:is(.car,.foot,.boat):has(.well){position:relative;z-index:3}
 .w[data-open] .well{display:block;position:absolute;top:100%;left:-16px;right:-16px;height:var(--well);overflow:clip;
  background:repeating-linear-gradient(var(--sea) 0 10px,color-mix(in srgb,var(--sea) 70%,var(--sea2)) 10px 13px)}
 .w .well .fan{top:calc(100% - 70px)}
 .wb{display:none;position:absolute;left:50%;bottom:70px;translate:-50% 45%}
 .wb svg{display:block;width:100%}
 .wb[data-k=car]{width:min(46vw,214px)}.wb[data-k=foot]{width:min(46vw,200px)}.wb[data-k=boat]{width:min(26vw,110px)}
 .w[data-open=car] .wb[data-k=car],.w[data-open=foot] .wb[data-k=foot],.w[data-open=boat] .wb[data-k=boat]{display:block}
 .w[data-open=car] .fan[data-k=car],.w[data-open=foot] .fan[data-k=foot],.w[data-open=boat] .fan[data-k=boat]{pointer-events:auto}
 .w[data-open=car] .fan[data-k=car] a,.w[data-open=foot] .fan[data-k=foot] a,.w[data-open=boat] .fan[data-k=boat] a{opacity:1;visibility:visible;
  transform:translate(-50%,-50%) translate(calc(sin(var(--ea)) * var(--rx,var(--r))),calc(cos(var(--ea)) * var(--ry,var(--r)) * -1)) scale(1);transition:transform .45s cubic-bezier(.23,1,.32,1) calc(var(--n) * 40ms),opacity .2s calc(var(--n) * 40ms),visibility 0s}
}
@media(prefers-reduced-motion:reduce){.opt,.opt .gx{transition:none!important}}
}

/* Gal, 28 Sept: the sea is the backdrop, not the subject. On a phone it
   filled everything between the live panel and the question; the horizon
   drops to the middle, the stripes thin out and lose contrast, and the boats
   shrink, so the buttons and the readings are what the eye lands on. */
.stripes{background:repeating-linear-gradient(var(--sea) 0 10px,color-mix(in srgb,var(--sea) 70%,var(--sea2)) 10px 13px)}
.wv{opacity:.5}
@media(max-width:999px) and (orientation:portrait) and (min-height:700px){
 .art{background:linear-gradient(var(--sky2),var(--sky) 30%,var(--sky) 50%,var(--sea) 50%)}
 .art .hill{top:40%}.art .hill2{top:43.5%}.art .lh{top:42%}
 .art .stripes{height:44%}.gulls{top:34%}
 .lane.sl{top:56%!important}.lane.cat{top:59%!important}.lane.fer{top:64%!important}
 .lane.fer .bl{width:30%!important}.lane.cat .bl{width:20%!important}.lane.sl .bl{width:12%!important}
 .w[data-on=car] .lane.fer .bl{width:min(46vw,214px)!important}.w[data-on=foot] .lane.cat .bl{width:min(46vw,200px)!important}.w[data-on=boat] .lane.sl .bl{width:min(26vw,110px)!important}
 .w[data-on=car] .lane.fer,.w[data-on=foot] .lane.cat,.w[data-on=boat] .lane.sl{top:calc(100svh - 196px)!important}
}
/* The line under the title is the promise; it was small and grey. */
.art .ttl span,.w:has(.art>.sky) .art .ttl span{color:var(--i);font-weight:500}
@media(min-width:1000px){.art .ttl span{font-size:.42em;letter-spacing:.02em}}
@media(max-width:999px){.w:has(.art>.sky) .art .ttl span{font-size:16px}}

/* Gal, 28 Sept: the ferry site's phone homepage, brought over. The picture
   is a short band behind the title, the three boats ride one waterline, and
   the question and the buttons sit in front on the page, not on the sea. */
@media(max-width:999px) and (orientation:portrait){
 .w{grid-template-areas:none;grid-template-rows:auto auto;background:var(--wh)}
 .art,.col{grid-area:auto}
 .art{height:clamp(230px,38svh,340px);min-height:0;background:linear-gradient(var(--sky2),var(--sky) 45%,var(--sky) 78%,var(--sea) 78%)}
 .art .sun{width:24%;top:17%}
 .art .hill{top:63%;height:15%}.art .hill2{top:68%;height:10%}.art .lh{top:62%;height:11%}
 .art .stripes{height:22%}.gulls{display:none}
 .art .ttl,.w:has(.col .sky) .art .ttl{display:block;position:absolute;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;top:56px;bottom:auto;left:16px;right:34%;font-size:clamp(22px,7vw,34px);color:var(--i);line-height:.9}
 .art .ttl span{display:block;margin-top:.55em;font-size:13px;line-height:1.3;letter-spacing:0;font-weight:500;text-transform:none;color:var(--m)}
 .art .lane.fer,.art .lane.cat,.art .lane.sl{top:93%!important;display:block}
 /* --a is a registered angle elsewhere, so the three stations are set outright; the hulls still bob */
 .art .lane.fer,.art .lane.cat,.art .lane.sl{animation:none!important}
 .art .lane.fer{transform:translateX(4%)}.art .lane.cat{transform:translateX(40%)}.art .lane.sl{transform:translateX(77%)}
 .w{align-content:start}
 .art .lane.fer .bl{width:30%!important}.art .lane.cat .bl{width:21%!important}.art .lane.sl .bl{width:12%!important}
 .col{position:static;align-self:start;background:var(--wh);padding:16px 16px 18px;gap:10px}
 .col h1{color:var(--i)}
 .col .sky[open]{position:relative;top:auto;left:auto;right:auto;max-height:none}
 .opt .btn.n{background:var(--i);color:#fff;--hull:#fbfbfa;--bink:var(--i)}.opt .btn.n:hover{background:#000}
 .opt.bt{border-top-color:var(--line)}
 .w[data-open=car] .opt.car .btn,.w[data-open=foot] .opt.foot .btn,.w[data-open=boat] .opt.boat .btn{box-shadow:0 0 0 3px var(--wh),0 0 0 5px var(--i)}
}
@media(max-width:340px) and (orientation:portrait){.col .sky summary{flex-wrap:wrap}}