/* Malta country LAB, design pass 3.
   SYSTEM: paper #FAF9F6 / limestone band #F1ECE1 / ink band #0E0E10, so each
   chapter has its own ground. Archivo display (uppercase), Lora body, Inter UI.
   Sharp corners; black pills for links that leave the page; gold only for
   Malta's Best. One spacing scale: 8 16 24 32 48 64 96 128.
   The island map is the signature and answers three questions: where to sleep
   (planner), what is near it (areas), how to get there (transport). */
:root{
  --paper:#FAF9F6; --band:#F1ECE1; --ink:#0E0E10; --ink2:#2A2A30; --mute:#5E626C; --rule:#D3CCBE;
  --stone:#E4DCCB; --sea:#EDF0EE; --gold:#9C6F12; --hot:#B4561E;
  --leg0:#0E0E10; --leg1:#5B4A2E; --leg2:#9C8A63;
  --sec:clamp(80px,9vw,128px); --mgut:max(24px,env(safe-area-inset-left,0px));
}
.band-l{background:var(--paper)} .band-d{background:var(--ink);color:var(--paper)}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--mgut);padding-right:max(24px,env(safe-area-inset-right,0px))}
.kk{font:800 13px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.06em;margin:0;padding-bottom:12px;border-bottom:1.5px solid currentColor}
.pill{display:inline-block;background:var(--ink);color:#fff;font:600 12.5px/1 'Inter',sans-serif;padding:10px 16px;border-radius:999px;text-decoration:none;white-space:nowrap}
.pill:hover{background:var(--ink2)}
.pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* chapter heads: one treatment everywhere */
#plan .la-head,#when .la-head,#arrive .la-head,#things .la-head,#dispatches .la-head{justify-content:center;text-align:center;border-bottom:0;padding-bottom:0;margin-bottom:56px}
#plan .la-h,#when .la-h,#arrive .la-h,#things .la-h,#dispatches .la-h{font-size:clamp(34px,4.6vw,60px);line-height:.98}
#plan .la-sub,#when .la-sub,#arrive .la-sub,#things .la-sub{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:54ch;margin:16px auto 0}

/* ---------- section bar ---------- */
.sb{position:fixed;left:0;right:0;top:var(--navh,70px);z-index:20;background:rgba(250,249,246,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility 0s .3s}
.sb.show{transform:none;opacity:1;visibility:visible;transition:transform .3s ease,opacity .3s ease}
.sb-in{display:flex;justify-content:center;gap:clamp(16px,3vw,44px);max-width:1240px;margin:0 auto;padding:0 var(--mgut);overflow-x:auto;scrollbar-width:none}
.sb a{font:600 13px/1 'Inter',sans-serif;color:var(--ink);text-decoration:none;padding:17px 0 15px;border-bottom:2px solid transparent;white-space:nowrap}
.sb a:hover{color:var(--ink)}
.sb a.on{color:var(--ink);border-bottom-color:var(--ink)}
[id="good-for"],#plan,#areas,#when,#arrive,#things{scroll-margin-top:120px}

/* ---------- is it for you ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1080px;margin:64px auto 0;border-top:1.5px solid var(--ink);padding-top:24px}
.fit h3{font:800 17px/1.1 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 8px}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{font:400 16px/1.5 'Lora',serif;padding:12px 0 12px 24px;border-bottom:1px dashed var(--rule);position:relative}
.fit li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;background:var(--ink)}
.fit div:last-child li::before{background:none;border:1.5px solid var(--ink);width:6px;height:6px}

/* ---------- map, shared ---------- */
.mm{display:block;width:100%;height:auto;--u:1}
.mm .sea{fill:transparent}
.mm .land{fill:var(--stone);stroke:var(--ink);stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.mm .s{transform:scale(var(--u))}
.mm .isl text{font:700 11px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.32em;fill:var(--mute);text-anchor:middle;pointer-events:none}
.mm .tw{cursor:pointer;outline:none}
.mm .tw rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.5;transform:scale(.82)}
.mm .tw text{font:600 12.5px/1 'Inter',sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.band-l .mm .tw text,.band-l .mm .pt text,.band-l .mm .sg text{stroke:var(--paper)}
.mm .tw .nt{font:500 11px/1 'Inter',sans-serif;fill:var(--mute);text-transform:none}
.mm .tw:hover rect,.mm .tw:focus-visible rect,.mm .tw.hl rect{fill:var(--ink)}
.mm .tw:focus-visible text{text-decoration:underline}
.mm .tw.base rect{fill:var(--ink);transform:scale(1.15)}
.mm .tw.base text{font:800 14px/1 'Archivo',sans-serif;text-transform:uppercase}
.mm .sg circle{fill:var(--ink);stroke:var(--paper);stroke-width:1.5;cursor:pointer}
.mm .sg.best circle{fill:var(--gold)}
.mm .sg text{display:none;font:600 12px/1 'Inter',sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3.4px;stroke-linejoin:round;pointer-events:none}
.mm .sg.hl text,.mm .sg:hover text{display:block}
.mm .sg.hl circle,.mm .sg:hover circle{r:7}
.mm .pt path{fill:var(--paper);stroke:var(--ink);stroke-width:1.3}
.mm .pt text{font:500 11px/1 'Inter',sans-serif;fill:var(--mute);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.mm-key{display:flex;flex-wrap:wrap;gap:8px 24px;font:500 12px/1.3 'Inter',sans-serif;color:var(--mute);margin:16px 0 0}
.mm-key span{display:inline-flex;align-items:center;gap:8px}
.mm-key i{display:inline-block;width:10px;height:10px}
.mm-key .k-base{background:var(--ink)} .mm-key .k-town{border:1.5px solid var(--ink);width:7px;height:7px}
.mm-key .k-ferry{width:22px;height:0;border-top:2px dashed var(--ink)}
.mm-pop{position:absolute;z-index:6;width:268px;background:var(--paper);border:1.5px solid var(--ink);padding:16px;box-shadow:6px 6px 0 rgba(14,14,16,.1)}
.mm-pop b{display:block;font:800 20px/1 'Archivo',sans-serif;text-transform:uppercase;margin:0 28px 8px 0}
.mm-pop p{font:400 14px/1.45 'Lora',serif;margin:0 0 14px}
.mm-pop .x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:none;font:400 22px/1 'Inter',sans-serif;cursor:pointer;color:var(--ink)}
.mm-pop .x:focus-visible{outline:2px solid var(--ink)}

/* ---------- where to stay: the planner (limestone band) ---------- */
.route path{fill:none;stroke:var(--ink);stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.route path.fy{stroke-dasharray:6 6}
.route path.draw{animation:draw .9s cubic-bezier(.4,.6,.2,1) both}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

/* ---------- area by area: one explorer ---------- */
.ax{padding:64px 0 var(--sec)}
.ax-tabs{display:flex;justify-content:center;gap:clamp(12px,3vw,40px);border-bottom:1px solid var(--rule);margin:0 auto 48px;max-width:1240px;padding:0 var(--mgut);overflow-x:auto;scrollbar-width:none}
.ax-tabs button{font:800 clamp(13px,1.1vw,15px)/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.04em;background:none;border:0;border-bottom:3px solid transparent;color:var(--mute);padding:16px 0 14px;cursor:pointer;white-space:nowrap}
.ax-tabs button:hover{color:var(--ink)}
.ax-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ax-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ax-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);max-width:1240px;margin:0 auto;padding:0 var(--mgut);align-items:start}
.ax-map{position:sticky;top:140px;height:min(640px,calc(100vh - 180px));background:var(--sea);overflow:hidden}
.ax-map .mm{height:100%}
.ax .mm .tw{transition:opacity .35s}
.ax .mm .tw:not(.on){opacity:.3}
.ax .mm .tw.on rect{fill:var(--ink)}
.ax .mm .tw.on text{font:800 13.5px/1 'Archivo',sans-serif;text-transform:uppercase}
.ax .mm .tw text,.ax .mm .sg text,.ax .mm .pt text{stroke:var(--sea)}
.ax .mm .sg{opacity:0;transition:opacity .35s;pointer-events:none}
.ax .mm .sg.on{opacity:1;pointer-events:auto}
.ap-h{font:900 clamp(32px,3.6vw,48px)/.98 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 16px;text-wrap:balance}
.ap-p{font:400 18px/1.6 'Lora',serif;margin:0 0 8px;max-width:56ch}
.ap .kk{margin-top:32px}
.tr{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:20px 0;border-bottom:1px dashed var(--rule);scroll-margin-top:150px;transition:background .3s}
.tr.flash{background:rgba(14,14,16,.05)}
.tr-ph img{width:104px;height:128px;object-fit:cover;display:block}
.tr h4{font:800 22px/1 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 8px}
.tr h4 a{color:var(--ink);text-decoration:none}
.tr h4 a:hover{text-decoration:underline;text-underline-offset:4px}
.tr-b>p{font:400 15.5px/1.5 'Lora',serif;margin:0 0 8px}
.tr details{margin:0 0 14px}
.tr summary{font:600 13px/1 'Inter',sans-serif;cursor:pointer;display:inline-flex;gap:8px;align-items:center;list-style:none;padding:4px 0}
.tr summary::-webkit-details-marker{display:none}
.tr summary::after{content:"+";font:400 18px/1 'Inter',sans-serif}
.tr details[open] summary::after{content:"\2212"}
.tr details ul{margin:8px 0;padding-left:18px;font:400 14.5px/1.5 'Lora',serif;color:var(--ink2)}
.tr details li{margin-bottom:4px}
.tr-no{font:400 14.5px/1.5 'Lora',serif;color:var(--mute);margin:0}
.tr-no b{font:600 13px/1 'Inter',sans-serif;color:var(--ink)} .tr-no a{color:var(--ink)}
.tr-go{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tr-h{font:700 13px/1 'Inter',sans-serif;color:var(--ink)}
.ax-near{max-width:1240px;margin:64px auto 0;padding:0 var(--mgut)}
.ncs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 0 8px;scrollbar-width:thin}
.nc{scroll-snap-align:start;color:var(--ink);text-decoration:none;display:block;min-width:200px}
.nc img,.nc-noimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--stone)}
.nc b{display:block;font:800 15px/1.2 'Archivo',sans-serif;text-transform:uppercase;margin:12px 0 4px}
.nc span{display:block;font:400 12.5px/1.35 'Inter',sans-serif;color:var(--mute)}
.nc em{display:block;font:600 11.5px/1 'Inter',sans-serif;font-style:normal;color:var(--gold);margin-top:6px}
.nc:hover b,.nc:focus-visible b{text-decoration:underline;text-underline-offset:3px}

/* ---------- when to go (ink band) ---------- */
#when.wy{padding:var(--sec) 0;margin:0}

.wy-wrap{overflow-x:auto}
.wy-grid{display:grid;grid-template-columns:180px repeat(12,minmax(46px,1fr));gap:4px;min-width:800px}
.wy-lab,.wy-m{display:grid;grid-template-rows:40px 26px 26px 26px 20px;gap:6px}
.wy-lab span{font:500 12.5px/26px 'Inter',sans-serif;color:#C9C6BE;white-space:nowrap}
.wy-m{border:0;background:none;padding:0 0 10px;cursor:pointer;border-bottom:3px solid transparent;font:inherit;color:inherit}
.wy-m .mn{font:800 14px/40px 'Archivo',sans-serif;text-transform:uppercase;text-align:center;color:#C9C6BE}
.wy-m[aria-selected="true"]{border-bottom-color:var(--paper)}
.wy-m[aria-selected="true"] .mn{background:var(--paper);color:var(--ink)}
.wy-m:hover .mn{color:var(--paper)}
.wy-m[aria-selected="true"]:hover .mn{color:var(--ink)}
.wy-m:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.c{display:block;height:26px}
.c.v0{background:#26262B}
.c.v1{background:repeating-linear-gradient(135deg,#E9E4D8 0 2px,#26262B 2px 6px)}
.c.v2{background:#E9E4D8}
.c.hot{background:var(--hot)}
.evd{display:flex;gap:4px;justify-content:center;align-items:center}
.evd i{width:7px;height:7px;border-radius:50%;background:#D4A84B;display:block}
.wy-key{display:flex;gap:8px 24px;flex-wrap:wrap;font:500 12.5px/1 'Inter',sans-serif;color:#C9C6BE;margin:20px 0 0}
.wy-key span{display:inline-flex;align-items:center;gap:8px}
.wy-key .c{display:inline-block;width:18px;height:12px}
.wy-out{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px;margin-top:48px;border-top:1px solid #3A3A40;padding-top:32px}
.wy-t h3{font:900 clamp(34px,4vw,56px)/1 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 16px;color:var(--paper)}
.wy-t p{font:400 18px/1.55 'Lora',serif;margin:0;color:#E4E0D6}
.evs{display:grid;gap:16px;align-content:start}
.evs:empty::before{content:"No major events this month. Every parish still keeps its saint's day.";font:400 16px/1.5 'Lora',serif;color:#C9C6BE}
.ev{display:grid;grid-template-columns:136px 1fr;gap:20px;color:var(--paper);text-decoration:none;padding-bottom:16px;border-bottom:1px solid #2E2E34}
.ev:last-child{border-bottom:0}
.ev img{width:136px;height:100px;object-fit:cover;display:block}
.ev b{display:block;font:800 17px/1.1 'Archivo',sans-serif;text-transform:uppercase}
.ev span{display:block;font:400 14.5px/1.45 'Lora',serif;margin-top:6px;color:#E4E0D6}
.ev .ev-w{font:600 12.5px/1.2 'Inter',sans-serif;color:#D4A84B}
.ev .ev-go{display:inline-block;margin-top:12px;font:600 12px/1 'Inter',sans-serif;background:var(--paper);color:var(--ink);padding:9px 14px;border-radius:999px}

/* ---------- getting in and around (limestone band) ---------- */
#arrive.gt{padding:var(--sec) 0;margin:0}
.gt-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4vw,64px);align-items:center}
.gt .lines path{fill:none;stroke:var(--ink);stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round;transition:opacity .25s,stroke-width .25s}
.gt .ln-ferry{stroke-dasharray:6 6}
.gt .ln-fast{stroke-dasharray:1 5;stroke-width:3!important}
.gt .mm.focus .lines path{opacity:.15}
.gt .mm.focus .lines path.hl{opacity:1;stroke-width:4.4}
.gt-ways{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.gt-w{padding:16px 12px;margin:0 -12px;border-bottom:1px dashed var(--rule);cursor:default;outline:none;transition:background .2s}
.gt-w:hover,.gt-w:focus-visible,.gt-w.hl{background:#E8E1D2}
.gt-w h3{font:800 15px/1.1 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gt-w h3 span{font:600 12px/1 'Inter',sans-serif;text-transform:none;color:var(--mute)}
.gt-w p{font:400 15px/1.5 'Lora',serif;margin:0}
.sw{display:inline-block;width:24px;height:0;border-top:2.6px solid var(--ink)}
.sw-ferry{border-top-style:dashed} .sw-fast{border-top-style:dotted;border-top-width:3px}
.gt-air{padding-top:24px}

/* ---------- dispatches ---------- */
#dispatches{padding-top:var(--sec)}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.dt{display:block;color:var(--ink);text-decoration:none}
.dt img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.dt b{display:block;font:800 clamp(20px,2vw,26px)/1.08 'Archivo',sans-serif;text-transform:uppercase;margin:16px 0 14px;text-wrap:balance}
.dt:hover b{text-decoration:underline;text-underline-offset:4px}

/* ---------- phone ---------- */
@media (max-width:900px){
  .sb-in{justify-content:flex-start}
  .fit{grid-template-columns:1fr;gap:32px}
  .ax-tabs{justify-content:flex-start;margin-bottom:24px}
  .ax-grid{grid-template-columns:1fr}
  .ax-map{position:relative;top:0;height:300px}
  .ax-near{margin-top:40px}
  .tr{grid-template-columns:84px 1fr;gap:16px}.tr-ph img{width:84px;height:104px}
  .wy-grid{grid-template-columns:116px repeat(12,44px);min-width:0}
  .wy-lab span{white-space:normal;font-size:11.5px;line-height:13px;display:flex;align-items:center}
  .wy-out{grid-template-columns:1fr;gap:24px}
  .ev{grid-template-columns:96px 1fr;gap:14px}.ev img{width:96px;height:72px}
  .gt-grid{grid-template-columns:1fr}
  .dp-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .route path.draw{animation:none}
}

/* ---------- what makes Malta special (pass 11): a carousel in the Valletta guide's language ----------
   One full-bleed stage; white Archivo title on the photograph with an Inter kicker, Lora body, a
   paper pill; round arrows; the chapter tabs under the stage carry the titles. No autoplay. */
.es{padding-top:var(--sec)}
.es-head{max-width:760px;margin:0 auto 48px;padding:0 var(--mgut);text-align:center}
.es-head .la-h{font-size:clamp(34px,4.6vw,60px);line-height:.98;margin:0}
.es-head p{font:400 clamp(18px,1.6vw,21px)/1.55 'Lora',serif;color:var(--ink2);margin:16px auto 0;max-width:58ch}
.es-stage{position:relative;height:min(78vh,760px);min-height:520px;overflow:hidden;background:var(--ink)}
.es-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.38) 34%,rgba(10,10,12,0) 62%)}
.es-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform 2.4s cubic-bezier(.2,.7,.2,1)}
.es-ph.on{opacity:1;transform:none}
.es-st{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding:0 max(24px,6vw)}
.es-st.on .es-t>*{animation:esIn .6s cubic-bezier(.2,.7,.2,1) both}
.es-st.on .es-t>:nth-child(2){animation-delay:.05s}.es-st.on .es-t>:nth-child(3){animation-delay:.1s}.es-st.on .es-t>:nth-child(4){animation-delay:.15s}.es-st.on .es-t>:nth-child(5){animation-delay:.2s}
@keyframes esIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.es-t{max-width:520px;color:#fff}
.es-k{display:block;font:600 15px/1.3 'Inter',sans-serif;margin-bottom:12px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.es-t h3{font:800 clamp(40px,5.2vw,76px)/.92 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 20px;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.es-t p{font:400 18px/1.55 'Lora',serif;margin:0 0 12px;max-width:44ch;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.es-go{margin-top:12px;background:var(--paper);color:var(--ink)}
.es-go:hover{background:#fff}
.es-nav{position:absolute;z-index:3;right:max(24px,3vw);bottom:28px;display:flex;gap:8px}
.es-arr{width:48px;height:48px;border-radius:50%;border:0;background:rgba(250,249,246,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.es-arr:hover{background:#fff}
.es-arr:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:900px){
  .es-stage{height:auto;aspect-ratio:4/5;min-height:0}
  .es-stage::after{background:linear-gradient(0deg,rgba(10,10,12,.85) 0%,rgba(10,10,12,.5) 50%,rgba(10,10,12,0) 80%)}
  .es-st{align-items:flex-end;padding:0 20px 92px}
  .es-t h3{font-size:clamp(30px,8.5vw,40px);margin-bottom:12px}
  .es-t p{font-size:15.5px}
  .es-nav{left:20px;right:auto;bottom:24px}
}
@media (prefers-reduced-motion:reduce){.es-ph{transition:none;transform:none}.es-st.on .es-t>*{animation:none}}

/* ---------- where should you stay (pass 8): a menu of bases ----------
   Choices are pills, as on the Valletta guide. The suggestion is a strip of base photographs
   whose widths follow the nights. Then every town, best match first, each linking to its guide. */
.bx{padding:var(--sec) 0}
.bx-menu{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:center;max-width:1080px;margin:0 auto 56px}
.bx-g{border:0;margin:0;padding:0;min-width:0}
.bx-g legend{font:600 13px/1 'Inter',sans-serif;color:var(--mute);margin:0 0 12px;padding:0}
.bx-g div{display:flex;flex-wrap:wrap;gap:8px}
.bx-int div{max-width:560px}
.bx-g input{position:absolute;opacity:0;width:1px;height:1px}
.bx-g label{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font:600 13.5px/1 'Inter',sans-serif;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);cursor:pointer;transition:background .15s,color .15s;font-variant-numeric:tabular-nums}
.bx-g:not(.bx-int) label{min-width:40px;justify-content:center;padding:0 12px}
.bx-g input[name=bxv]+label{padding:0 16px}
.bx-g label:hover{background:rgba(14,14,16,.06)}
.bx-g input:checked+label{background:var(--ink);color:#fff}
.bx-int input:checked+label::before{content:"";width:9px;height:5px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-2px);margin-right:8px}
.bx-g input:focus-visible+label{outline:2px solid var(--ink);outline-offset:3px}
.bx-sh{font:800 15px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.04em;margin:0 0 16px}
.bx-sug{margin-bottom:72px}
.bx-legs{display:flex;gap:4px;height:clamp(220px,28vw,360px)}
.bx-leg{position:relative;flex:1;min-width:0;overflow:hidden;color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:var(--ink);transition:flex .5s cubic-bezier(.3,.7,.2,1)}
.bx-leg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bx-leg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,12,.7),rgba(10,10,12,0) 60%)}
.bx-leg:hover img{transform:scale(1.04)}
.bx-leg>*:not(img){position:relative;z-index:1}
.bx-ln{font:600 14px/1.2 'Inter',sans-serif}
.bx-leg b{font:800 clamp(24px,3vw,44px)/.95 'Archivo',sans-serif;text-transform:uppercase;margin:6px 0 4px;overflow-wrap:anywhere}
.bx-la{font:italic 400 14px/1.3 'Lora',serif;opacity:.9}
.bx-leg:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bx-note{font:400 16px/1.5 'Lora',serif;color:var(--ink2);margin:14px 0 0}
.bx-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.bx-t{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:24px 0;border-top:1px dashed var(--rule);transition:opacity .3s}
.bx-t.dim{opacity:.45}
.bx-t.dim:hover,.bx-t.dim:focus-within{opacity:1}
.bx-ph img{display:block;width:160px;height:200px;object-fit:cover}
.bx-k{display:block;font:600 12.5px/1 'Inter',sans-serif;color:var(--mute);margin-bottom:8px}
.bx-t.in .bx-k::after{content:"In our suggestion";margin-left:10px;padding:3px 8px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px}
.bx-t h3{font:800 26px/1 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 10px}
.bx-t h3 a{color:var(--ink);text-decoration:none}
.bx-t h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.bx-v{font:400 15.5px/1.55 'Lora',serif;margin:0 0 10px}
/* The verdict answers this question, so a card that opens "Usually not." still reads as an answer. */
.bx-q{display:block;font:400 10px/1.4 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.bx-why{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.bx-why li{font:400 14px/1.45 'Lora',serif;color:var(--ink2)}
.bx-why b{font:600 12.5px/1 'Inter',sans-serif;color:var(--ink);margin-right:6px}
.bx-go{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bx-h{font:600 13px/1 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){
  .bx-menu{justify-content:flex-start;gap:20px}
  .bx-legs{height:clamp(200px,52vw,300px)}
  .bx-leg{min-width:96px;padding:14px}
  .bx-list{grid-template-columns:1fr}
  .bx-t{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .bx-ph img{width:96px;height:120px}
  .bx-t h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.bx-leg,.bx-leg img,.bx-t{transition:none}}
/* town names never break mid-word: the size follows the width of the photo */
.bx-leg{container-type:inline-size}
.bx-leg b{font-size:clamp(20px,10.5cqi,44px);overflow-wrap:normal;white-space:nowrap}

/* pass 9: the site's own paper ground (the limestone band is retired), one spacing scale, and the
   menu aligned to the same left edge as the suggestion and the list, closed by a dashed rule */
#plan .la-head{margin-bottom:40px}
.bx-menu{max-width:none;justify-content:space-between;margin:0 0 48px;padding-bottom:32px;border-bottom:1px dashed var(--rule)}
.bx-int div{max-width:640px}
.bx-sug{margin-bottom:64px}
.bx-sh{margin-bottom:16px}
.bx-note:empty{display:none}
.bx-list{gap:0 48px}
.bx-t{padding:24px 0}
.bx-t:nth-child(-n+2){border-top:1.5px solid var(--ink)}
@media (max-width:900px){.bx-menu{justify-content:flex-start;gap:24px}.bx-t:nth-child(2){border-top:1px dashed var(--rule)}.bx-sug{margin-bottom:48px}}

/* pass 10: every filter on one line on desktop. Smaller pills, nights and bases as pill-shaped selects */
.bx-menu{flex-wrap:wrap;align-items:flex-end;gap:20px 28px}
.bx-g legend,.bx-l{display:block;font:600 12.5px/1 'Inter',sans-serif;color:var(--mute);margin:0 0 10px;padding:0}
.bx-g div{gap:6px}
.bx-int div{max-width:none;flex-wrap:nowrap}
.bx-g label:not(.bx-l){min-height:36px;padding:0 13px;font-size:13px;white-space:nowrap}
.bx-g input[name=bxv]+label{padding:0 13px}
.bx-int input:checked+label::before{margin-right:6px}
.bx-sel select{appearance:none;-webkit-appearance:none;height:36px;padding:0 34px 0 14px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;color:#fff;font:600 13px/1 'Inter',sans-serif;cursor:pointer;font-variant-numeric:tabular-nums}
.bx-sel select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:1240px){.bx-int div{flex-wrap:wrap}}
.bx-sel{display:flex;flex-direction:column}
.bx-g .bx-l{min-height:0;padding:0;border-radius:0;box-shadow:none;background:none;cursor:default;font-size:12.5px}
.bx-g .bx-l:hover{background:none}
.bx-menu{gap:20px 20px;flex-wrap:nowrap}
.bx-g label:not(.bx-l){padding:0 12px}
@media (max-width:1240px){.bx-menu{flex-wrap:wrap}}
@media (max-width:900px){.bx-sel{flex-direction:column}}

.bx-sel{align-items:flex-start}
.bx-sel .bx-l{color:var(--mute)}
.es-st[hidden]{display:none}
@media (max-width:900px){.es-stage::after{background:linear-gradient(0deg,rgba(10,10,12,.86) 0%,rgba(10,10,12,.6) 60%,rgba(10,10,12,.3) 100%)}}

/* every town: four, then a button for the rest (rows reorder on each change, so the cut follows the ranking) */
.bx-list.cut .bx-t:nth-child(n+5){display:none}
.bx-morebar{display:flex;justify-content:center;padding-top:32px;border-top:1px dashed var(--rule)}
.bx-more{border:0;cursor:pointer}
.bx-more[hidden]{display:none}
.bx-more:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* towns in the suggestion leave the list below it; the old "In our suggestion" pill is gone */
.bx-t.sug{display:none}
.bx-t.in .bx-k::after{content:none}
/* the essay swipes: vertical scroll stays with the page, horizontal goes to the carousel */
.es-stage{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.es-stage.dragging{cursor:grabbing}
.es-stage.dragging .es-ph,.es-stage.dragging .es-st{transition:none}
.es-st{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.es-stage img{-webkit-user-drag:none}
.es-stage a,.es-stage button{cursor:pointer}
/* the suggestion carries the map (the area-by-area section is off for Malta) */
.bx-sg{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:center}
.bx-map{position:relative}
#bxMap .tw:not(.base) text{fill:var(--mute)}
#bxMap .tw:not(.base) rect{stroke:var(--mute)}
.mm .bx-route{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
@media (max-width:900px){.bx-sg{grid-template-columns:1fr}}

/* ================= when to go, in the live guide's vocabulary (pass 10) ================= */
.wg{padding-block:96px}
.wg-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1px dashed var(--rule);margin:0 0 48px}
.wg-m{position:relative;border:0;border-left:1px dashed var(--rule);background:none;padding:16px 8px 18px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.wg-m:first-child{border-left:0}
.wg-m b{display:block;font:800 22px/1 'Archivo',sans-serif;text-transform:uppercase}
.wg-m span{display:block;font:italic 400 13.5px/1.3 'Lora',serif;color:var(--mute);margin-top:6px}
.wg-m .wg-dot{position:absolute;top:18px;right:10px;width:7px;height:7px;background:var(--gold)}
.wg-m:hover b{text-decoration:underline;text-underline-offset:5px}
.wg-m[aria-selected="true"]{background:var(--ink);color:#fff}
.wg-m[aria-selected="true"] span{color:#D8D4CA}
.wg-m:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wg-p[hidden]{display:none}
.wg-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px}
.wg-txt h3{font:800 clamp(44px,6vw,84px)/.95 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 20px}
.wg-txt .wg-v{font:400 23px/1.4 'Lora',serif;margin:0 0 24px;color:var(--ink)}
.wg-txt p{font:400 17px/1.65 'Lora',serif;margin:0 0 16px;color:var(--ink2);max-width:60ch}
.wg-txt a.pl{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.wg-fit{display:grid;gap:36px;align-content:start;padding-top:8px}
.wg-fit .wg-fh,.wg-on{font:800 15px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:0;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.wg-fit ul{list-style:none;margin:0;padding:0}
.wg-fit li{position:relative;font:400 15.5px/1.5 'Lora',serif;padding:12px 0 12px 22px;border-bottom:1px solid var(--rule)}
.wg-fit li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;background:var(--ink)}
.wg-no li::before{background:none;border:1.5px solid var(--ink);width:7px;height:7px}
.wg-on{margin-top:64px}
.wg-evs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.wg-ev{padding:24px 24px 8px;border-left:1px dashed var(--rule)}
.wg-ev:first-child{border-left:0;padding-left:0}
.wg-evs.n1 .wg-ev,.wg-evs.n2 .wg-ev{max-width:440px}
.wg-evph img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.wg-evb{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;margin-top:20px}
.wg-dt b{display:block;font:800 26px/1 'Archivo',sans-serif;text-transform:uppercase}
.wg-dt span{display:block;font:800 22px/1.1 'Archivo',sans-serif;color:var(--mute)}
.wg-ev h4{font:800 17px/1.15 'Archivo',sans-serif;text-transform:uppercase;margin:2px 0 6px}
.wg-ev h4 a{color:var(--ink);text-decoration:none}
.wg-w{display:block;font:600 12.5px/1.3 'Inter',sans-serif;color:var(--gold);margin-bottom:8px}
.wg-ev p{font:400 15px/1.5 'Lora',serif;margin:0 0 14px}
@media (max-width:900px){
  .wg{padding-block:64px}
  .wg-months{grid-template-columns:repeat(6,minmax(0,1fr))}
  .wg-m:nth-child(7){border-left:0}
  .wg-m:nth-child(n+7){border-top:1px dashed var(--rule)}
  .wg-m{padding:12px 6px 14px}
  .wg-m b{font-size:17px}
  .wg-m span{font-size:12px}
  .wg-m .wg-dot{top:14px;right:6px}
  .wg-main{grid-template-columns:1fr;gap:40px}
  .wg-txt .wg-v{font-size:20px}
  .wg-evs{grid-template-columns:1fr}
  .wg-ev{border-left:0;padding:24px 0;border-top:1px dashed var(--rule)}
}
/* event cards: equal columns, the dashed divider drawn in the gap */
.wg-evs{column-gap:48px}
.wg-ev,.wg-ev:first-child{position:relative;padding:24px 0 8px;border-left:0}
.wg-ev+.wg-ev::before{content:"";position:absolute;left:-24px;top:0;bottom:0;border-left:1px dashed var(--rule)}
@media (max-width:900px){.wg-ev+.wg-ev::before{content:none}.wg-ev+.wg-ev{border-top:1px dashed var(--rule)}}
@media (max-width:600px){
  .wg-months{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wg-m:nth-child(7){border-left:1px dashed var(--rule)}
  .wg-m:nth-child(4n+1){border-left:0}
  .wg-m:nth-child(n+5){border-top:1px dashed var(--rule)}
  .wg-m .wg-dot{top:auto;bottom:10px;right:8px;width:6px;height:6px}
  .wg-m span{overflow-wrap:anywhere}
}
/* the suggestion map: behind a button, opening full width above "Our suggestion" */
.bx-sg{display:block}
.bx-shrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.bx-shrow .bx-sh{margin:0}
.bx-mapbtn{border:0;background:none;padding:0;cursor:pointer;font:600 13px/1 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.bx-mapbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bx-map{margin:0 0 32px;padding:24px 0;border-top:1.5px solid var(--ink);border-bottom:1px dashed var(--rule)}
.bx-map[hidden]{display:none}
.bx-map #bxMap{max-height:72vh;margin:0 auto}
.bx-map.in{animation:bxIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes bxIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bx-map.in{animation:none}}
/* temperatures: on each month tab, and a band in each panel */
.wg-m .wg-t{display:block;font:600 12px/1.2 'Inter',sans-serif;font-style:normal;color:var(--ink);margin-top:10px;white-space:nowrap}
.wg-m .wg-t small{font-size:11px;font-weight:500;color:var(--mute)}
.wg-m[aria-selected="true"] .wg-t,.wg-m[aria-selected="true"] .wg-t small{color:#fff}
.wg-cl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 28px;border-top:1.5px solid var(--ink)}
.wg-cl>div{padding:14px 12px 14px 0;border-bottom:1px dashed var(--rule)}
.wg-cl dt{font:600 12.5px/1 'Inter',sans-serif;color:var(--mute);margin-bottom:8px}
.wg-cl dd{margin:0;font:800 22px/1.05 'Archivo',sans-serif;text-transform:uppercase}
.wg-cl dd small{display:block;font:italic 400 13.5px/1.3 'Lora',serif;text-transform:none;color:var(--mute);margin-top:4px}
@media (max-width:900px){.wg-m .wg-t{white-space:normal}.wg-m .wg-t small{display:none}}
@media (max-width:600px){.wg-cl{grid-template-columns:repeat(2,minmax(0,1fr))}.wg-cl dd{font-size:19px}}
/* pass 11: every month carries a picture: the lead event titled on its photograph, or a place in season */
.wg-main{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.wg-fit{grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;padding-top:0}
.wg-pic{position:sticky;top:140px}
.wg-feat{position:relative;display:block;color:#fff;text-decoration:none}
.wg-feat img,.wg-still img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.wg-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,20,.82) 0%,rgba(8,12,20,.35) 45%,rgba(8,12,20,0) 70%)}
.wg-feat-t{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px}
.wg-k{display:block;font:600 12.5px/1.3 'Inter',sans-serif;opacity:.92;margin-bottom:10px}
.wg-feat h4{font:800 clamp(28px,3vw,42px)/.98 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 10px}
.wg-feat p{font:400 16px/1.5 'Lora',serif;margin:0 0 16px;max-width:36ch}
.wg-pill{background:#fff;color:var(--ink)}
.wg-feat:hover h4{text-decoration:underline;text-underline-offset:5px}
.wg-feat:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wg-still{margin:0}
.wg-still figcaption{font:italic 400 14px/1.45 'Lora',serif;color:var(--mute);margin-top:10px}
.wg-still figcaption a{color:inherit;text-underline-offset:3px}
.wg-more{list-style:none;margin:0;padding:0}
.wg-more li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:20px 0;border-bottom:1px dashed var(--rule)}
.wg-more h5{font:800 17px/1.15 'Archivo',sans-serif;text-transform:uppercase;margin:2px 0 6px}
.wg-more h5 a{color:var(--ink);text-decoration:none}
.wg-more h5 a:hover{text-decoration:underline}
.wg-more p{font:400 15px/1.5 'Lora',serif;margin:0}
.wg-m .wg-ts{margin-top:3px}
@media (max-width:900px){.wg-pic{position:static}.wg-fit{grid-template-columns:1fr}.wg-main{grid-template-columns:1fr}.wg-m .wg-t small{display:inline}}
.wg-feat,.wg-feat h4{text-decoration:none}
.wg-feat:hover h4{text-decoration:underline}
/* the map opens beside the suggestion (owner, 2026-11-09), not above it */
.bx-sg{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.bx-sg.with-map{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.bx-sg .bx-map{margin:0;padding:0;border:0}
.bx-sg .bx-map #bxMap{max-height:none}
.bx-map.in{animation:bxSide .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes bxSide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){.bx-sg.with-map{grid-template-columns:1fr}}
/* the map slides in: the photo strip narrows as the map column grows from nothing */
.bx-sg,.bx-sg.with-map{grid-template-columns:minmax(0,1fr) 0fr;gap:0;transition:grid-template-columns .7s cubic-bezier(.65,0,.25,1),gap .7s cubic-bezier(.65,0,.25,1)}
.bx-sg.with-map{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}
.bx-sg .bx-map{min-width:0;overflow:hidden;opacity:0;transform:translateX(40px);transition:opacity .45s ease,transform .7s cubic-bezier(.65,0,.25,1);animation:none}
.bx-sg.with-map .bx-map{opacity:1;transform:none;transition-delay:.15s,0s}
.bx-sg .bx-map #bxMap{min-width:280px}
@media (max-width:900px){
  .bx-sg,.bx-sg.with-map{grid-template-columns:1fr;gap:0}
  .bx-sg .bx-map{max-height:0;transition:max-height .7s cubic-bezier(.65,0,.25,1),opacity .45s ease,transform .7s}
  .bx-sg.with-map .bx-map{max-height:640px;margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.bx-sg,.bx-sg .bx-map{transition:none}}
.bx-sg,.bx-sg:not(.with-map){grid-template-columns:minmax(0,2fr) minmax(0,0fr)}
@media (max-width:900px){.bx-sg,.bx-sg:not(.with-map),.bx-sg.with-map{grid-template-columns:minmax(0,1fr)}}
/* events accordion: one open, the others folded to a dated row */
.wg-acc{border-top:1.5px solid var(--ink)}
.wg-ai{border-bottom:1px dashed var(--rule)}
.wg-ahh{margin:0;font:inherit}
.wg-ah{width:100%;display:grid;grid-template-columns:64px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:16px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.wg-an b{display:block;font:800 17px/1.15 'Archivo',sans-serif;text-transform:uppercase}
.wg-an .wg-w{margin:4px 0 0}
.wg-ah:hover .wg-an b{text-decoration:underline;text-underline-offset:4px}
.wg-ah:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wg-sg{position:relative;width:14px;height:14px;justify-self:end}
.wg-sg::before,.wg-sg::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--ink);transition:transform .35s}
.wg-sg::after{transform:rotate(90deg)}
.wg-ai.open .wg-sg::after{transform:rotate(0)}
.wg-ai.open .wg-ah{cursor:default}
.wg-ab{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.65,0,.25,1)}
.wg-ab>div{overflow:hidden;min-height:0}
.wg-ai.open .wg-ab{grid-template-rows:1fr}
.wg-ab .wg-feat{margin-bottom:16px}
.wg-ab .wg-feat img{aspect-ratio:5/4}
@media (prefers-reduced-motion:reduce){.wg-ab,.wg-sg::before,.wg-sg::after{transition:none}}
/* one height for both columns: no sticky picture; the picture fills the height of the text beside it */
.wg-main{align-items:stretch}
.wg-pic{position:static;top:auto;display:flex;flex-direction:column}
.wg-pic>.wg-feat,.wg-ab .wg-feat{flex:1;min-height:420px}
.wg-pic>.wg-feat img,.wg-ab .wg-feat img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.wg-feat::after{z-index:0}
.wg-pic>.wg-still{flex:1;display:flex;flex-direction:column}
.wg-pic>.wg-still img{flex:1 1 0;min-height:420px;height:auto;aspect-ratio:auto}
.wg-acc{flex:1;display:flex;flex-direction:column}
.wg-ai.open{flex:1;display:flex;flex-direction:column}
.wg-ai.open .wg-ab{flex:1}
.wg-ab>div{display:flex;flex-direction:column}
.wg-ab .wg-feat{margin-bottom:16px}
@media (max-width:900px){.wg-pic>.wg-feat,.wg-ab .wg-feat,.wg-pic>.wg-still img{min-height:0}.wg-pic>.wg-feat,.wg-ab .wg-feat{aspect-ratio:4/5;flex:none}.wg-pic>.wg-still img{aspect-ratio:4/5;flex:none}}
.wg a.wg-feat{text-decoration:none!important}
.wg a.wg-feat:hover h4{text-decoration:underline}

/* ---------- getting around: four tabs, each a text column and one device ---------- */
#arrive.ga{padding-block:var(--sec);margin:0}
.ga-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1px dashed var(--rule);margin:0 0 56px}
.ga-t{border:0;border-left:1px dashed var(--rule);background:none;padding:20px 16px 22px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.ga-t:first-child{border-left:0}
.ga-t b{display:block;font:800 clamp(18px,1.9vw,26px)/1 'Archivo',sans-serif;text-transform:uppercase}
.ga-t span{display:block;font:italic 400 14.5px/1.3 'Lora',serif;color:var(--mute);margin-top:8px}
.ga-t:hover b{text-decoration:underline;text-underline-offset:5px}
.ga-t[aria-selected="true"]{background:var(--ink);color:#fff}
.ga-t[aria-selected="true"] span{color:#D8D4CA}
.ga-t:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ga-p[hidden]{display:none}
.ga-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,80px);align-items:start}
.ga-txt h3{font:800 clamp(36px,4.6vw,64px)/.95 'Archivo',sans-serif;text-transform:uppercase;margin:0 0 20px;text-wrap:balance}
.ga-txt .ga-v{font:400 22px/1.42 'Lora',serif;margin:0 0 24px;color:var(--ink)}
.ga-txt p{font:400 17px/1.65 'Lora',serif;margin:0 0 16px;color:var(--ink2);max-width:60ch}
.ga-txt .pill{margin-top:12px}
.ga-dh{font:800 15px/1 'Archivo',sans-serif;text-transform:uppercase;margin:0;padding-bottom:12px;border-bottom:1.5px solid var(--ink)}
.ga-dh2{margin-top:48px}
.ga-dn{font:italic 400 15px/1.45 'Lora',serif;color:var(--mute);margin:12px 0 4px}
/* the distance ruler: one row per town, bar to scale (0 to 45 km) */
.ga-runs{list-style:none;margin:0;padding:0}
.ga-run{display:grid;grid-template-columns:118px minmax(0,1fr) 116px;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.ga-run b{font:800 15px/1.1 'Archivo',sans-serif;text-transform:uppercase}
.ga-bar{display:flex;gap:2px;height:8px}
.ga-seg{display:inline-block;height:8px;background:var(--ink);border-radius:0 4px 4px 0}
.ga-bar .ga-seg+.ga-seg{border-radius:0}
.ga-bar .ga-seg:last-child:not(:first-child){border-radius:0 4px 4px 0}
.ga-fer{background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 6px)!important}
.ga-km{font:600 14px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.ga-km small{display:block;font-weight:500;font-size:11.5px;color:var(--mute);margin-top:3px}
.ga-bus{grid-column:2/4;font:italic 400 14px/1.35 'Lora',serif;color:var(--mute);margin-top:6px}
.ga-run:hover b,.ga-run:focus-visible b{text-decoration:underline;text-underline-offset:4px}
.ga-run:hover .ga-seg:not(.ga-fer){background:var(--gold)}
.ga-run:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ga-key{display:flex;align-items:center;gap:8px;font:500 12.5px/1 'Inter',sans-serif;color:var(--mute);margin:14px 0 0}
.ga-key .ga-seg{width:28px;border-radius:0}
.ga-key .ga-fer{margin-left:12px}
/* the pass table */
.ga-tw{overflow-x:auto}
.ga-tb{width:100%;border-collapse:collapse;min-width:520px}
.ga-tb th,.ga-tb td{text-align:left;padding:14px 10px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.ga-tb thead th{font:600 12px/1.2 'Inter',sans-serif;color:var(--mute);padding-top:12px}
.ga-tb tbody th{font:800 14.5px/1.15 'Archivo',sans-serif;text-transform:uppercase;width:42%}
.ga-tb tbody th small{display:block;font:italic 400 13.5px/1.35 'Lora',serif;text-transform:none;color:var(--mute);margin-top:5px}
.ga-tb td{font:400 14.5px/1.4 'Lora',serif}
.ga-y,.ga-n{display:inline-block;width:10px;height:10px;margin-top:4px;background:var(--ink)}
.ga-n{background:none;border:1.5px solid var(--ink);width:7px;height:7px}
/* definition rows (ferries, rules of the road, apps) */
.ga-dl{margin:0}
.ga-dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ga-dl dt{font:800 14.5px/1.2 'Archivo',sans-serif;text-transform:uppercase}
.ga-dl dt small{display:block;font:italic 400 13.5px/1.35 'Lora',serif;text-transform:none;color:var(--mute);margin-top:5px}
.ga-dl dd{margin:0;font:400 15.5px/1.55 'Lora',serif;color:var(--ink2)}
.ga-apps dt{font-size:19px}
@media (max-width:900px){
  .ga-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ga-t:nth-child(3){border-left:0}
  .ga-t:nth-child(n+3){border-top:1px dashed var(--rule)}
  .ga-main{grid-template-columns:1fr}
  .ga-txt .ga-v{font-size:20px}
}
@media (max-width:520px){
  .ga-run{grid-template-columns:96px minmax(0,1fr) 84px;column-gap:10px}
  .ga-run b{font-size:13px}
  .ga-dl>div{grid-template-columns:1fr;gap:6px}
}
/* getting around, pass 2: highlights, the pass picker, drawn rules, bay swatches, app grid */
.ga-hl{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ga-hl li{padding:0 24px;border-left:1px dashed var(--rule)}
.ga-hl li:first-child{border-left:0;padding-left:0}
.ga-hl b{display:block;font:800 clamp(44px,5.6vw,80px)/.9 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.ga-hl span{display:block;font:italic 400 17px/1.35 'Lora',serif;color:var(--mute);margin-top:10px}
.ga-txt h3{font-size:clamp(28px,3vw,40px)}
.ga-pick{display:flex;flex-wrap:wrap;gap:16px 32px;margin:20px 0 8px}
.ga-pick fieldset{border:0;margin:0;padding:0}
.ga-pick legend{font:600 12px/1 'Inter',sans-serif;color:var(--mute);padding:0;margin-bottom:10px}
.ga-pick fieldset>div{display:flex;flex-wrap:wrap;gap:8px}
.ga-pick input{position:absolute;opacity:0;pointer-events:none}
.ga-pick label{font:600 13px/1 'Inter',sans-serif;padding:10px 14px;border:1.5px solid var(--ink);border-radius:999px;cursor:pointer;background:var(--paper);color:var(--ink);transition:background .15s,color .15s}
.ga-pick input:checked+label{background:var(--ink);color:#fff}
.ga-pick input:focus-visible+label{outline:2px solid var(--ink);outline-offset:3px}
.ga-tb tbody tr{transition:background .25s,opacity .25s}
.ga-pick~.ga-tw tbody tr{opacity:.45}
.ga-pick~.ga-tw tbody tr.on{opacity:1;background:var(--stone)}
.ga-pick~.ga-tw tbody tr.on th{box-shadow:inset 4px 0 0 var(--ink);padding-left:14px}
.ga-fig{margin:0 0 8px}
.ga-fig svg{display:block;width:100%;max-width:420px;height:auto;color:var(--ink)}
.ga-fig text{font:600 13px 'Inter',sans-serif;fill:var(--ink)}
.ga-bays{list-style:none;margin:16px 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ga-bays li{display:grid;gap:6px;align-content:start}
.ga-bay{display:block;aspect-ratio:3/4;background:#5D5F63;border:5px solid;border-bottom:0;max-width:96px}
.ga-bay-white{border-color:#F4F2EC}.ga-bay-yellow{border-color:#E8B714}.ga-bay-blue{border-color:#2F6FC0}.ga-bay-green{border-color:#3E9A57}
.ga-bays b{font:800 14px/1 'Archivo',sans-serif;text-transform:uppercase;margin-top:6px}
.ga-bays span{font:italic 400 13.5px/1.35 'Lora',serif;color:var(--mute)}
.ga-apps tbody th{font-size:19px;width:auto}
.ga-apps td{width:20%}
.ga-h{display:inline-block;width:10px;height:10px;margin-top:4px;background:linear-gradient(135deg,var(--ink) 50%,transparent 50%);outline:1.5px solid var(--ink);outline-offset:-1.5px}
.ga-key i{margin:0 2px 0 0}
.ga-key i+i,.ga-key .ga-y~.ga-h{margin-left:12px}
@media (max-width:900px){.ga-hl{margin-bottom:40px}.ga-hl li{padding:0 12px}.ga-hl span{font-size:14.5px}}
@media (max-width:520px){.ga-bays{grid-template-columns:repeat(2,minmax(0,1fr))}.ga-hl b{font-size:34px}}
.ga-hl b{white-space:nowrap;font-size:clamp(30px,4.8vw,72px)}
.ga-bay{aspect-ratio:5/6;max-width:84px}
.ga-apps .ga-y,.ga-apps .ga-h{width:14px;height:14px}
.ga-apps .ga-n{width:11px;height:11px}
@media (max-width:900px){.ga-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .ga-hl{grid-template-columns:1fr;margin-bottom:36px}
  .ga-hl li,.ga-hl li:first-child{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:baseline;gap:12px;padding:12px 0;border-left:0;border-top:1px dashed var(--rule)}
  .ga-hl li:first-child{border-top:0}
  .ga-hl b{font-size:30px;white-space:normal}
  .ga-hl span{margin-top:0}
}
.ga-phs{margin-top:40px;display:grid;gap:16px}
.ga-phs.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.ga-ph{margin:0}
.ga-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ga-phs.pair .ga-ph img{aspect-ratio:4/5}
.ga-ph figcaption{font:italic 400 14px/1.4 'Lora',serif;color:var(--mute);margin-top:10px}
.ga-ph img[src$="gozo-ferry.jpg"]{object-position:58% 60%}

/* getting around, pass 3: no h3 (the tab is the title), photos in their own grid cell so the device
   comes before them on a phone, km riding the bar, bus number boards, the pass answer, the ferry chart */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ga-main{grid-template-areas:"txt dev" "ph dev";grid-template-rows:auto 1fr;row-gap:0}
.ga-txt{grid-area:txt}.ga-dev{grid-area:dev}.ga-phs{grid-area:ph;align-self:start}
.ga-txt .ga-v{font:400 clamp(22px,2.2vw,28px)/1.36 'Lora',serif;margin:0 0 22px;text-wrap:pretty}
.ga-ph img[src$="airport.jpg"]{aspect-ratio:2/1;object-position:50% 92%}
/* ruler */
.ga-run{grid-template-columns:118px minmax(0,1fr);padding:12px 0}
.ga-bar{height:auto;align-items:center;gap:2px}
.ga-bar .ga-seg{flex:none}
.ga-bar .ga-km{flex:none;margin-left:10px;text-align:left;font:600 14px/1 'Inter',sans-serif}
.ga-bus{grid-column:2;margin-top:7px;font-size:14.5px}
.ga-runs li:not(.gz)+li.gz{border-top:1.5px solid var(--ink);margin-top:-1px}
.ga-rt{display:inline-block;font:700 11px/1 'Inter',sans-serif;font-style:normal;letter-spacing:.03em;border:1.5px solid var(--ink);color:var(--ink);padding:2px 4px 1px;margin:0 1px;vertical-align:1px}
/* pass answer */
.ga-ans{border-top:1.5px solid var(--ink);margin-top:24px;padding-top:20px}
.ga-an{display:block;font:800 clamp(26px,2.6vw,36px)/1 'Archivo',sans-serif;text-transform:uppercase}
.ga-ans p{font:400 17px/1.55 'Lora',serif;color:var(--ink2);margin:10px 0 16px;max-width:52ch}
.ga-ck{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.ga-ck li{display:flex;align-items:baseline;gap:8px;font:600 13.5px/1.2 'Inter',sans-serif}
.ga-ck li .ga-y,.ga-ck li .ga-n{flex:none;margin:0;transform:translateY(1px)}
.ga-ck li.n{color:var(--mute)}
.ga-ck small{font-weight:500;color:var(--mute);margin-left:-2px}
.ga-ans.flash .ga-an{animation:gaIn .35s ease}
@keyframes gaIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ga-more{margin-top:22px;border-top:1px solid var(--rule)}
.ga-more summary{cursor:pointer;font:600 13px/1 'Inter',sans-serif;padding:16px 0;list-style:none;display:flex;align-items:center;gap:8px}
.ga-more summary::-webkit-details-marker{display:none}
.ga-more summary::after{content:"";width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.ga-more[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.ga-more summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ga-more .ga-tb{min-width:460px}
.ga-more .ga-tb tbody th{width:38%}
.ga-more tr.on{background:var(--stone)}
/* ferry chart */
.ga-fx{margin:18px 0 6px}
.ga-fmap{max-width:480px;margin:0 auto}
.ga-fmap .land{fill:var(--stone);stroke:var(--ink);stroke-width:.8;vector-effect:non-scaling-stroke}
.ga-fmap .hc{fill:var(--paper)}
.ga-fmap .hx{fill:none;stroke:var(--mute);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.ga-fmap .hr{stroke:var(--ink);stroke-dasharray:none;stroke-width:1.5}
.ga-fmap .fr{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:6 5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .2s,stroke-width .2s}
.ga-fmap .fr.car{stroke-dasharray:none;stroke-width:3.5}
.ga-fmap .fr.on{stroke:var(--gold);stroke-width:4}
.ga-fmap .fp rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.ga-fmap .fp text{font:600 23px/1 'Inter',sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:6px;stroke-linejoin:round}
.ga-fl{list-style:none;margin:8px 0 0;padding:0}
.ga-fl li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ga-fl b{font:800 15px/1.15 'Archivo',sans-serif;text-transform:uppercase}
.ga-fl em{display:block;font:italic 400 14px/1.35 'Lora',serif;color:var(--mute);margin-top:3px}
.ga-fl p{font:400 15.5px/1.55 'Lora',serif;color:var(--ink2);margin:6px 0 0}
.ga-fl li.on b{text-decoration:underline;text-underline-offset:4px}
.ga-fk{display:inline-block;width:28px;height:0;border-top:2.5px dashed var(--ink);margin-top:8px}
.ga-fk.car{border-top:3.5px solid var(--ink)}
.ga-key .ga-fk{margin:0 2px 0 0}.ga-key .ga-fk.car~.ga-fk{margin-left:12px}
/* bays */
.ga-bayfig{margin:18px 0 0}
.ga-bayfig svg{display:block;width:100%;height:auto}
.ga-bays{margin:12px 0 40px;gap:0}
.ga-bays li{padding:0 10px 0 2%}
.ga-bays li b{margin-top:0}
@media (max-width:900px){
  .ga-main{grid-template-areas:"txt" "dev" "ph";grid-template-rows:auto;row-gap:48px}
  .ga-phs{margin-top:0}
}
@media (max-width:520px){
  .ga-run{grid-template-columns:92px minmax(0,1fr);column-gap:10px}
  .ga-bays{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ga-bays li{padding:0 4px 0 0}
  .ga-bays b{font-size:12px}.ga-bays span{font-size:12.5px}
  .ga-fl li{grid-template-columns:26px minmax(0,1fr)}.ga-fk{width:22px}
}
@media (prefers-reduced-motion:reduce){.ga-ans.flash .ga-an{animation:none}}
@media (max-width:520px){.ga-bar{width:82%}.ga-bar .ga-km{font-size:13px;margin-left:7px}}

/* five tabs: buses and ferries split */
.ga-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
.ga-t b{font-size:clamp(17px,1.7vw,24px)}
@media (max-width:900px){.ga-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.ga-t:nth-child(5){grid-column:1/-1;border-left:0}.ga-t:nth-child(4){border-left:1px dashed var(--rule)}.ga-t:nth-child(3){border-left:0}}

/* car tab: the two road drawings and the four bays on one line */
.ga-carrow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:28px;align-items:start;margin:20px 0 36px}
.ga-carrow .ga-fig{margin:0}
.ga-carrow .ga-fig svg{max-width:none}
.ga-carrow .ga-bayfig{margin:0}
.ga-carrow .ga-bays{margin:10px 0 0;grid-template-columns:repeat(4,minmax(0,1fr))}
.ga-carrow .ga-bays li{padding:0 6px 0 0}
.ga-carrow .ga-bays b{font-size:12.5px}
.ga-carrow .ga-bays span{font-size:12.5px}
@media (max-width:600px){.ga-carrow{grid-template-columns:minmax(0,1fr);gap:24px}}
/* highlights centred in their columns (phones keep the left-aligned rows) */
@media (min-width:601px){.ga-hl li,.ga-hl li:first-child{text-align:center;padding:0 16px}}

.ga-fig text{font-size:17px}
.ga-moreb{display:flex;align-items:center;gap:8px;width:100%;border:0;border-bottom:1px solid var(--rule);background:none;cursor:pointer;font:600 13px/1 'Inter',sans-serif;color:var(--ink);padding:16px 0;text-align:left}
.ga-moreb::after{content:"";width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg) translateY(-3px)}
.ga-moreb:hover{text-decoration:underline;text-underline-offset:4px}
.ga-moreb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.ga-runs li:not(.gz)+li.gz{border-top:0;margin-top:0}
.ga-key[hidden],.ga-moreb[hidden]{display:none}

/* ferries: four buttons pick a crossing; its line lights on the chart and its note shows below */
.ga-fsel{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.ga-fsel button{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 'Inter',sans-serif;padding:10px 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.ga-fsel button .ga-fk{width:20px;margin:0;border-top-color:currentColor}
.ga-fsel button:hover{background:var(--stone)}
.ga-fsel button[aria-pressed="true"]{background:var(--ink);color:#fff}
.ga-fsel button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ga-fmap .fr{cursor:pointer;pointer-events:stroke}
.ga-fmap .fr:not(.on){stroke:var(--mute)}
.ga-fmap .fr.on{stroke:var(--ink);stroke-width:4.5}
.ga-fmap .fr.car.on{stroke-width:5.5}
.ga-fkey{justify-content:center;margin:4px 0 0}
.ga-fds{border-top:1.5px solid var(--ink);margin-top:20px;padding-top:18px}
.ga-fd b{display:block;font:800 clamp(22px,2.2vw,30px)/1 'Archivo',sans-serif;text-transform:uppercase}
.ga-fd em{display:block;font:italic 400 15px/1.35 'Lora',serif;color:var(--mute);margin-top:6px}
.ga-fd p{font:400 17px/1.55 'Lora',serif;color:var(--ink2);margin:10px 0 0;max-width:52ch}
.ga-fd:not([hidden]){animation:gaIn .3s ease}
@media (prefers-reduced-motion:reduce){.ga-fd:not([hidden]){animation:none}}

/* ferries: note under the pills (all four notes stacked in one cell so the height never jumps), and the
   chart fills what is left of the column, so it ends level with the photo */
.ga-fds{display:grid;border-top:0;margin-top:18px;padding-top:0}
.ga-fd{grid-area:1/1}
.ga-fd:not(.on){visibility:hidden}
.ga-fd:not([hidden]){animation:none}
.ga-fd.on{animation:gaIn .3s ease}
#gap-ferry .ga-dev{display:flex;flex-direction:column;align-self:stretch}
#gap-ferry .ga-fx{flex:1 1 0;min-height:260px;margin:16px 0 0;display:flex}
#gap-ferry .ga-fmap{width:100%;height:100%;max-width:none}
@media (max-width:900px){#gap-ferry .ga-fx{flex:none;min-height:0}#gap-ferry .ga-fmap{height:auto;max-width:480px}}
@media (prefers-reduced-motion:reduce){.ga-fd.on{animation:none}}
/* the chosen crossing turns gold on the chart */
.ga-fmap .fr.on{stroke:var(--gold)}
/* the four ferry pills on one line at desktop width */
@media (min-width:901px){.ga-fsel{flex-wrap:nowrap;gap:6px}.ga-fsel button{padding:9px 11px;gap:7px;font-size:12.5px;white-space:nowrap}.ga-fsel button .ga-fk{width:14px}}
@media (max-width:1179px){.ga-fsel{flex-wrap:wrap}}

/* the pass answer is titled as our recommendation */
.ga-rec{font:600 12px/1 'Inter',sans-serif;color:var(--mute);margin:24px 0 0;padding-top:20px;border-top:1.5px solid var(--ink)}
.ga-rec+.ga-ans{border-top:0;margin-top:10px;padding-top:0}

/* bus pass: Staying and Travelling as two dropdowns on one line */
.ga-pick{flex-wrap:nowrap;gap:12px;margin:20px 0 0}
.ga-pick .bx-g{margin:0;min-width:0}
.ga-pick .bx-l{margin-bottom:8px}
.ga-pick .bx-sel select{max-width:100%}
.ga-pick .bx-l{border:0;padding:0;border-radius:0;background:none;cursor:default;font:600 12.5px/1 'Inter',sans-serif;color:var(--mute)}
#gaPick .bx-l{padding:0}

/* the pass table always shows, under a quiet label instead of a toggle */
.ga-more{border-top:0;margin-top:28px}
.ga-more .ga-rec{border-top:1px solid var(--rule);margin:0 0 4px;padding-top:18px}
.ga-more .ga-tb th,.ga-more .ga-tb td{padding-top:16px;padding-bottom:16px}

/* ---------- best things to do ----------
   The Valletta guide's own cards (full-town.css: la-col pair photo, la-slide,
   la-ctl arrows) in a two-row carousel you swipe or scroll. Filters are pill
   selects; the head of any filtered list takes both rows of the first column. */
#things.tw{padding-block:var(--sec);margin:0;border-top:1px dashed var(--rule)}
.tw-f{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:16px 20px;margin:0 0 40px}
.tw-f .bx-sel{flex-direction:column;gap:8px}
.tw-best{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);background:none;color:var(--ink);font:600 13px/1 'Inter',sans-serif;cursor:pointer}
.tw-best img{width:16px;height:16px}
.tw-best[aria-pressed="true"]{background:#E3B341}
.tw-best:focus-visible,.tw-clr:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tw-clr,.tw-none button{background:none;border:0;padding:0 0 2px;height:36px;font:600 13px/1 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.tw-clr[hidden]{display:none}
.tw-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}
.tw-count{font:italic 400 15px/1.4 'Lora',serif;color:var(--mute);margin:0}
.tw-wall{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column dense;grid-auto-columns:calc((100% - 48px)/3);gap:48px 24px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.tw-wall::-webkit-scrollbar{display:none}
.tw-wall:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.tw-t{min-width:0;scroll-snap-align:start}
.tw-t[hidden]{display:none}
.tw-t.tx>.la-slide{flex:1}
.tw-t.tx .la-slide p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tw-no{display:block;font:italic 400 14px/1.4 'Lora',serif;color:rgba(244,244,242,.62);margin-bottom:10px}
.tw-t .meta b{display:block;margin-top:3px}
.tw-t.lead{grid-row:span 2}
.tw-t.lead .la-slide h4{font-size:clamp(22px,2.2vw,30px);line-height:1.05}
.tw-t.lead .la-slide p{font-size:16px}
.tw-none{grid-row:1/-1;grid-column:span 2;font:400 18px/1.5 'Lora',serif;margin:0}
.tw-none[hidden]{display:none}
@media (max-width:980px){.tw-wall{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:699px){
  .tw-f{justify-content:flex-start}
  .tw-wall{grid-template-rows:auto;grid-auto-columns:84%;gap:16px;margin-inline:calc(-1 * var(--mgut));padding-inline:var(--mgut);scroll-padding-inline:var(--mgut)}
  .tw-t.lead{grid-column:span 1;grid-row:span 1}
  .tw-t.lead .la-slide h4{font-size:17px}
  .tw-bar .la-ctl .pos{display:none}
}
/* Both rows in one window (owner): a fixed, shorter photo, blurbs clamped,
   the pill straight after the text. The lead keeps a taller photo. */
.tw-wall{row-gap:28px}
.tw-t.pair{display:flex;flex-direction:column;gap:12px}
.tw-t.pair .ph{flex:none;height:clamp(140px,17vh,180px);min-height:0}
.tw-t .la-slide p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}
.tw-t .la-slide .go{margin-top:auto}
.tw-t.tx .la-slide{padding:18px 18px 16px}
.tw-t.tx .la-slide h4{font-size:17px}
.tw-t.tx .la-slide p{-webkit-line-clamp:4}
.tw-t.lead.pair .ph{flex:1 1 auto;height:auto;min-height:200px}
.tw-t.lead .la-slide p{-webkit-line-clamp:3}
@media (max-width:699px){.tw-t.pair .ph{height:200px}.tw-t.lead.pair .ph{flex:none;height:200px}}
/* hidden must beat .tw-t.pair{display:flex}, or filtered-out cards stay on screen */
.tw-wall .tw-t[hidden]{display:none !important}
/* No photo, so no puffin badge: the title line carries the badge gold instead (owner). */
.tw-t.tx .la-slide.txt .meta b{color:#E3B341}
.tw-t.lead.tx .la-slide p{-webkit-line-clamp:12;font-size:16px}
/* Under the Where to stay head: the way to the hotels page, filtered to Malta. */
.bx-hot{font:400 14px/1.4 'Inter',sans-serif;color:var(--mute);margin:14px 0 0;text-align:center}
.bx-hot a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* the Town by town comparison link, under the town list (owner, 2026-11-09) */
.bx-cmp{margin:0;padding-top:32px;border-top:1px dashed var(--rule)}
.bx-cmp+.bx-morebar{border-top:0;padding-top:20px}
@media (max-width:900px){.bx-cmp{display:none}}
#plan .la-sub{max-width:80ch;text-wrap:balance}
/* Title on a full-width photo, as When to go (full-town.css .la-break.la-title). */
#things.tw{padding-top:56px;border-top:0}
.tw-break .la-h{font-size:clamp(34px,5.4vw,78px);text-wrap:balance;max-width:14ch;margin-inline:auto}
.tw-sub{text-align:center;max-width:54ch;margin:0 auto 40px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;text-wrap:balance}
#things .tw-sub{margin-bottom:64px}
/* full-town.css caps #good-for .la-h at 40px (id beats .es-head); match the other paper chapter titles. */
#good-for .es-head .la-h{font-size:clamp(34px,4.6vw,60px);line-height:.98}

/* ---- the map (#map): the Valletta guide's map, full width, between Things to do and the dispatches ---- */
/* 30% less gap above the title (owner): things bottom pad + .4 of a section gap = .7 of the old two */
/* the page's dashed rule between sections (as #things.tw), centred in a gap 30% under two section pads */
#things.tw{padding-bottom:calc(var(--sec,96px) * .7)}
#map{padding-top:calc(var(--sec,96px) * .7);border-top:1px dashed var(--rule)}
#map .la-head{justify-content:center;text-align:center;border-bottom:0;padding-bottom:0;margin-bottom:40px}
#map .la-h{font-size:clamp(34px,4.6vw,60px);line-height:.98}
#map .la-sub{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:54ch;margin:16px auto 0;text-wrap:balance}
.mx-globe{margin-top:24px}
.mx-col{width:100%}
.mx-wrap{flex:none;height:clamp(520px,82vh,880px);min-height:0}
#mxMap{position:absolute;inset:0}
.mx-wrap .la-pin.is-air{width:34px;height:34px;background:var(--ink);color:#fff}
.mx-wrap .la-pin.is-air svg{width:17px;height:17px}
/* zoomed out on the three islands, the marks shrink so the harbour towns stay readable */
.mx-wrap.far .la-pin{width:20px;height:20px;border-width:1.5px}
.mx-wrap.far .la-pin svg{width:10px;height:10px}
.mx-wrap.far .la-pin.is-air{width:28px;height:28px}
.mx-wrap.far .la-pin.is-air svg{width:14px;height:14px}
.mx-col.maplibregl-pseudo-fullscreen .mx-wrap,.mx-col:fullscreen .mx-wrap{height:auto;flex:1 1 auto}
@media(max-width:760px){.mx-wrap{height:72vh}}
/* town guides: the biggest marks, ink with a white ring, always on top */
.mx-wrap .la-pin.is-town{width:34px;height:34px;background:var(--ink);color:#fff;border-width:2.5px;z-index:3}
.mx-wrap .la-pin.is-town svg{width:17px;height:17px}
.mx-wrap.far .la-pin.is-town{width:28px;height:28px}
.mx-wrap.far .la-pin.is-town svg{width:14px;height:14px}
/* the town's name rides beside its mark, over the base map's own (Maltese) label */
.mx-wrap .la-pin.is-town{overflow:visible}
.mx-wrap .la-pin .tn{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;
  font:800 12px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
  background:rgba(250,249,246,.94);padding:4px 6px}
.mx-wrap.far .la-pin .tn{font-size:10.5px;padding:3px 5px}
/* the list beside the map fills the sea the islands leave on a wide map */
.mx-grid{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:0;height:clamp(520px,80vh,820px);border:1px solid var(--line,#e4e1d8)}
.mx-grid .mx-wrap{height:100%}
.mx-side{order:2;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line,#e4e1d8);background:var(--bg,#FAF9F6)}
.mx-count{margin:0;padding:16px 18px 12px;font:600 13px/1.2 'Inter',sans-serif;color:var(--ink);border-bottom:1px dashed var(--line,#d9d5ca)}
.mx-list{list-style:none;margin:0;padding:6px 0;overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain}
.mx-it{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;width:100%;padding:8px 18px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.mx-it:hover,.mx-it:focus-visible{background:rgba(20,19,15,.05)}
.mx-it:focus-visible{outline:2px solid var(--blue,#2b6de0);outline-offset:-2px}
.mx-it img,.mx-ic{width:56px;height:42px;object-fit:cover;display:block}
.mx-ic{display:grid;place-items:center;background:var(--ink);color:#fff}
.mx-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.mx-tx b{font:800 13px/1.2 'Archivo',sans-serif;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-tx span{font:400 12.5px/1.3 'Inter',sans-serif;color:var(--muted,#6b675e);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-wrap .la-pin.on{box-shadow:0 0 0 4px rgba(176,132,28,.55),0 1px 4px rgba(0,0,0,.3);z-index:4}
.mx-col.maplibregl-pseudo-fullscreen,.mx-col:fullscreen{height:100dvh}
@media(max-width:860px){
  .mx-grid{grid-template-columns:1fr;height:auto}
  .mx-grid .mx-wrap{height:68vh}
  .mx-side{order:2;border-left:0;border-top:1px solid var(--line,#e4e1d8);max-height:420px}
}
/* dispatches: a smaller photo beside the title, blurb and pill (owner, 2026-11-09) */
.dp-grid{gap:40px 48px}
.dt{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;align-items:start}
.dt img{aspect-ratio:4/5}
.dt-tx{display:flex;flex-direction:column;align-items:flex-start}
.dt .dt-tx b{margin:0 0 12px}
.dt-tx p{margin:0 0 18px;font:400 16px/1.6 'Lora',serif;color:var(--ink-2,#3d3a33)}
@media(max-width:520px){.dt{grid-template-columns:120px 1fr;gap:16px}.dt .dt-tx b{font-size:18px}.dt-tx p{font-size:15px}}
/* an open card sits above every mark (town pins carry z-index 3, a ringed pin 4) */
.mx-wrap .maplibregl-popup{z-index:10}
/* the write-up that replaces the list when a place is chosen (no map popup) */
.mx-det{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.mx-det[hidden],.mx-list[hidden],.mx-count[hidden]{display:none}
.mx-x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:var(--ink);color:#fff;cursor:pointer}
.mx-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mx-x:hover{background:var(--ink2,#2a2a2e)}
.mx-x:focus-visible{outline:2px solid var(--blue,#2b6de0);outline-offset:2px}
.mx-dimg{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.mx-det .mx-ic.mx-dimg{height:auto}
.mx-det .mx-ic.mx-dimg svg{width:32px;height:32px}
.mx-dtx{padding:20px 22px 26px;display:flex;flex-direction:column;align-items:flex-start}
.mx-dmeta{font:400 13px/1.3 'Inter',sans-serif;color:var(--muted,#6b675e)}
.mx-dtx h3{margin:8px 0 0;font:800 clamp(20px,1.8vw,24px)/1.08 'Archivo',sans-serif;text-transform:uppercase;text-wrap:balance}
.mx-dtx h3 a{color:var(--ink);text-decoration:none}
.mx-dtx h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.mx-dbest{margin-top:8px;font:600 13px/1.3 'Inter',sans-serif;color:var(--ink)}
.mx-dtx p{margin:14px 0 20px;font:400 16px/1.6 'Lora',serif;color:var(--ink-2,#3d3a33)}
.mx-wrap .la-pin.sel{box-shadow:0 0 0 4px var(--ink),0 0 0 6px #fff;z-index:5}
/* no photograph: no picture block, the text starts under the X */
.mx-dtx.bare{padding-top:64px}

/* ---------- mobile pass (2026-11-09) ---------- */
/* where to stay: four dropdowns on one line (two by two on a phone); What you want is a tick list in a dropdown */
.bx-menu{flex-wrap:nowrap!important;justify-content:flex-start;gap:20px 28px}
.bx-dd{position:relative}
.bx-dd summary{list-style:none;display:flex;align-items:center;height:36px;padding:0 34px 0 14px;border-radius:999px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;color:#fff;font:600 13px/1 'Inter',sans-serif;cursor:pointer;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;user-select:none}
.bx-dd summary::-webkit-details-marker{display:none}
.bx-dd summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bx-g .bx-ddp{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:230px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;padding:6px;background:var(--paper);border-radius:14px;box-shadow:0 0 0 1.5px var(--ink),0 14px 30px rgba(14,14,16,.14)}
.bx-g .bx-ddp label{width:100%;min-height:40px;padding:0 10px;border-radius:9px;box-shadow:none;justify-content:flex-start;font:500 14px/1 'Inter',sans-serif;white-space:nowrap}
.bx-g .bx-ddp label::before{content:"";flex:none;width:16px;height:16px;margin-right:10px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.bx-g .bx-ddp input:checked+label{background:none;color:var(--ink)}
.bx-g .bx-ddp input:checked+label::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center}
.bx-g .bx-ddp label:hover{background:rgba(14,14,16,.06)}
.bx-g .bx-ddp input:focus-visible+label{outline:2px solid var(--ink);outline-offset:-2px}
@media (max-width:600px){
  .bx-menu{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
  .bx-menu .bx-sel select,.bx-dd summary,.bx-dd details{width:100%;max-width:none}
  .bx-dd:nth-child(even) .bx-ddp{left:auto;right:0}
}
/* the essay on a phone: a shorter photo carries only the kicker and title; the text sits under it on paper */
@media (max-width:900px){
  .es-stage{--esph:min(68vw,440px);aspect-ratio:auto;height:auto;min-height:0;display:grid;background:var(--paper)}
  .es-stage::after{inset:0 0 auto 0;height:var(--esph);background:linear-gradient(0deg,rgba(10,10,12,.72) 0%,rgba(10,10,12,.2) 55%,rgba(10,10,12,0) 100%)}
  .es-ph{inset:0 0 auto 0;height:var(--esph)}
  .es-st,.es-st[hidden]{position:relative;inset:auto;grid-area:1/1;display:block;padding:0}
  .es-st[hidden]{visibility:hidden}
  .es-t{max-width:none;color:var(--ink)}
  .es-hd{min-height:var(--esph);display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px 20px;color:#fff}
  .es-t h3{margin:0}
  .es-t p{color:var(--ink2);text-shadow:none;font-size:17px;line-height:1.6;padding:0 20px;margin:0 0 14px;max-width:none}
  .es-t .es-hd+p{margin-top:22px}
  .es-go{margin:6px 20px 0;background:var(--ink);color:#fff}
  .es-go:hover{background:var(--ink)}
  .es-nav{top:14px;right:14px;left:auto;bottom:auto}
  .es-arr{width:40px;height:40px}
}

/* facts band: no Space Mono (owner); on a phone one fact fills the width per swipe instead of a clipped peek */
.band .cbandwrap .cmast-facts .ck{font:600 12.5px/1.2 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:var(--mute)}
.band .faqmore{font:600 14px/1 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){
  .band .cbandwrap .cmast-facts .mfc:nth-child(n){flex:0 0 100%;padding:16px 4px 18px;border-left:0}
  .band .cbandwrap .cmast-facts .mfc:first-child{padding-left:4px}
}
/* getting around on a phone: tab titles only, two by two, so the five tabs take three short rows */
@media (max-width:600px){
  .ga-tabs{margin-bottom:36px}
  .ga-t{padding:14px 12px 15px}
  .ga-t span{display:none}
  .ga-t b{font-size:15px;line-height:1.1}
  /* the pass table and the app grid fit the width instead of scrolling off the edge */
  .ga-tw{overflow:visible}
  .ga-tb,.ga-more .ga-tb{min-width:0;table-layout:fixed}
  .ga-tb th,.ga-tb td{padding:12px 6px 12px 0}
  .ga-tb thead th{font-size:11.5px}
  .ga-tb tbody th,.ga-more .ga-tb tbody th{font-size:12.5px;width:38%}
  .ga-tb td{font-size:13px}
  .ga-apps tbody th{font-size:15px;width:40%}
  .ga-apps td{width:auto}
}

/* things to do on a phone: the five filters two by two at full cell width, the puffin toggle beside the last */
@media (max-width:600px){
  .tw-f{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;align-items:end}
  .tw-f .bx-sel select{width:100%}
  .tw-f>*{min-width:0}
  .tw-f #twBest{width:100%;justify-content:center;white-space:nowrap;padding-left:10px;padding-right:10px}
}
/* bigger tap area for the map link without moving it */
.bx-mapbtn{padding-block:14px;margin-block:-14px}

/* dispatches on a phone (owner): two side by side, photo over text; three or more become a swipe carousel */
@media (max-width:900px){
  .dp-grid{grid-template-columns:1fr 1fr;gap:14px}
  .dp-grid .dt{display:block}
  .dp-grid .dt img{aspect-ratio:4/5;margin-bottom:12px}
  .dp-grid .dt .dt-tx b{font-size:15px;line-height:1.1;margin:0 0 8px}
  .dp-grid .dt-tx p{font-size:14px;line-height:1.5;margin:0 0 14px}
  .dp-grid .dt-tx .pill{font-size:12.5px;padding:0 14px;min-height:34px}
  .dp-grid:has(>.dt:nth-child(3)){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(50% - 7px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .dp-grid:has(>.dt:nth-child(3))::-webkit-scrollbar{display:none}
  .dp-grid:has(>.dt:nth-child(3))>.dt{scroll-snap-align:start}
}

.dp-grid .dt-tx .pill{display:inline-flex;align-items:center}
/* phones (owner): Other towns and the twelve months are swipe carousels */
@media (max-width:600px){
  .bx-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;align-items:start;padding-bottom:4px}
  .bx-list::-webkit-scrollbar{display:none}
  .bx-list .bx-t:not(.sug){display:block;scroll-snap-align:start;padding:0;border-top:0}
  .bx-list .bx-t .bx-ph img{width:100%;height:auto;aspect-ratio:4/3;margin-bottom:14px}
  .bx-morebar{display:none}
  .wg-months{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% / 4.4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .wg-months::-webkit-scrollbar{display:none}
  .wg-months .wg-m{scroll-snap-align:start;border-top:0;border-left:1px dashed var(--rule)}
  .wg-months .wg-m:first-child{border-left:0}
}

.wg-next{display:flex;justify-content:center;margin-top:48px;padding-top:32px;border-top:1px dashed var(--rule)}
.wg-next .pill{border:0;cursor:pointer}
.wg-months{scroll-margin-top:140px}
@media (max-width:600px){
  /* the month picture: a 3:2 band, not a 4:5 page */
  .wg-pic>.wg-feat,.wg-ab .wg-feat,.wg-pic>.wg-still img{aspect-ratio:3/2}
  .wg-next{margin-top:32px;padding-top:24px}
  /* getting around: the five tabs swipe as one strip */
  .ga-tabs{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
  .ga-tabs::-webkit-scrollbar{display:none}
  .ga-tabs .ga-t{grid-column:auto;scroll-snap-align:start;border-top:0;border-left:1px dashed var(--rule);padding:14px 18px 15px;white-space:nowrap}
  .ga-tabs .ga-t:first-child{border-left:0}
}

.ga-tabs{scroll-margin-top:140px}
/* things to do on a phone (owner): the filters on one row that swipes */
@media (max-width:600px){
  .tw-f{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;gap:10px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-left:calc(-1 * var(--mgut,20px));margin-right:calc(-1 * var(--mgut,20px));padding:0 var(--mgut,20px) 4px;scroll-padding:0 var(--mgut,20px)}
  .tw-f::-webkit-scrollbar{display:none}
  .tw-f>*{flex:none}
  .tw-f .bx-sel select{width:auto}
  .tw-f #twBest{width:auto}
}
@media (max-width:600px){.tw-f>*{min-width:max-content}.tw-f .bx-sel select{width:auto;max-width:none}}

/* essay: the guide pill and a link to the next theme (chapter tabs cut, owner 2026-11-09) */
.es-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:12px}
.es-act .es-go{margin-top:0}
.es-next{display:inline-flex;align-items:center;gap:6px;margin-left:auto;border:0;background:none;padding:10px 0;font:600 14px/1.3 'Inter',sans-serif;color:var(--ink);cursor:pointer;text-align:right}.es-next svg{flex:none}.es-next:hover{text-decoration:underline;text-underline-offset:4px}
.es-next:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.es-stage{scroll-margin-top:120px}
@media (max-width:900px){
  .es-act{padding:0 20px;margin-top:6px}
  .es-act .es-go{margin:0}
  .es-next{display:inline-block}
}
@media (max-width:900px){.es-next{display:inline-flex;align-items:center;gap:6px;margin-left:auto;text-decoration:none;text-align:right}.es-next svg{flex:none}.bx-leg b{font-size:clamp(18px,9.5cqi,44px)}}
/* Other towns: a carousel at every width under 900px, not only on phones (owner) */
@media (max-width:900px){
  .bx-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(50% - 10px);gap:0 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;align-items:start;padding-bottom:4px}
  .bx-list::-webkit-scrollbar{display:none}
  .bx-list .bx-t:not(.sug){display:block;scroll-snap-align:start;padding:0;border-top:0}
  .bx-list .bx-t .bx-ph img{width:100%;height:auto;aspect-ratio:4/3;margin-bottom:14px}
  .bx-morebar{display:none}
}
@media (max-width:600px){.bx-list{grid-auto-columns:78%;gap:0 16px}}
/* the twelve months: one swiping line at every width under 900px (owner), about six in view, four on a phone */
@media (max-width:900px){
  .wg-months{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% / 6.4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .wg-months::-webkit-scrollbar{display:none}
  .wg-months .wg-m{scroll-snap-align:start;border-top:0;border-left:1px dashed var(--rule)}
  .wg-months .wg-m:first-child{border-left:0}
}
@media (max-width:600px){.wg-months{grid-auto-columns:calc(100% / 4.4)}}
/* getting around: one swiping strip at every width under 900px */
@media (max-width:900px){
  .ga-tabs{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
  .ga-tabs::-webkit-scrollbar{display:none}
  .ga-tabs .ga-t,.ga-tabs .ga-t:nth-child(n){grid-column:auto;scroll-snap-align:start;border-top:0;border-left:1px dashed var(--rule);white-space:nowrap}
  .ga-tabs .ga-t:first-child{border-left:0}
}

/* month pill inside the text column: left on desktop, above the picture on a phone */
.wg-txt .wg-next{justify-content:flex-start;margin-top:36px;padding-top:0;border-top:0}
/* section bar: black (owner) */
.sb{background:rgba(14,14,16,.97);border-bottom:0}
.sb a{color:#D8D4CA}
.sb a:hover{color:#fff}
.sb a.on{color:#fff;border-bottom-color:#fff}
.sb a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* ferry pills (owner): no line mark inside the pill; one line, swiping when the width runs out */
.ga-fsel button .ga-fk{display:none}
.ga-fsel{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.ga-fsel::-webkit-scrollbar{display:none}
.ga-fsel button{flex:none;white-space:nowrap;padding:9px 14px;font-size:13px}
@media (min-width:601px) and (max-width:900px){.dp-grid{gap:24px}.dp-grid .dt .dt-tx b{font-size:19px}.dp-grid .dt-tx p{font-size:15.5px}.dp-grid .dt img{aspect-ratio:4/3}}
/* town cards: the guide pill on its own line, hotels and things to do together under it (owner) */
.bx-t .bx-go{row-gap:12px}
.bx-t .bx-go .pill{margin-right:100%}

/* month loop copies: only where the strip swipes */
@media (min-width:901px){.wg-months .wg-mc{display:none}}
@media (min-width:901px){.wg-months>.wg-m:not(.wg-mc):nth-child(13){border-left:0}}
/* when to go under 900px (owner): the month picture between the month strip and the text, as a short band */
@media (max-width:900px){
  .wg-main{gap:28px}
  .wg-pic{order:-1}
  .wg-pic>.wg-feat,.wg-ab .wg-feat,.wg-pic>.wg-still img{aspect-ratio:2/1}
}
@media (max-width:600px){.wg-pic>.wg-feat,.wg-ab .wg-feat,.wg-pic>.wg-still img{aspect-ratio:16/9}}
/* getting around under 900px (owner): the photo between the tab strip and the text, as a short band */
@media (max-width:900px){
  .ga-main{grid-template-areas:"ph" "txt" "dev";row-gap:28px}
  .ga-ph img,.ga-ph img[src$="airport.jpg"]{aspect-ratio:2/1}
  .ga-phs.pair .ga-ph img{aspect-ratio:4/3}
  .ga-main>.ga-txt{margin-bottom:20px}
}
@media (max-width:600px){.ga-ph img,.ga-ph img[src$="airport.jpg"]{aspect-ratio:16/9}}
/* "See December next" / "See ferries next": a bold text link, centred (owner) */
.wg-next,.wg-txt .wg-next{justify-content:center}
.wg-nx{border:0;background:none;padding:8px 0;cursor:pointer;font:700 15px/1.3 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.wg-nx:hover{text-decoration-thickness:2.5px}
.wg-nx:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* things to do under 900px (owner): one row of equal cards, the same photo height, the pill straight under the text */
@media (max-width:900px){
  .tw-wall{grid-template-rows:auto;grid-auto-columns:calc(50% - 8px);gap:16px;align-items:start}
  .tw-t.lead{grid-column:span 1;grid-row:span 1}
  .tw-t.pair .ph,.tw-t.lead.pair .ph{flex:none;height:auto;min-height:0;aspect-ratio:4/3}
  .tw-t .la-slide .go{margin-top:4px}
  .tw-t.lead .la-slide h4{font-size:17px}
  .tw-t.lead .la-slide p,.tw-t.lead.tx .la-slide p{font-size:15px;-webkit-line-clamp:3}
  .tw-t.tx .la-slide{aspect-ratio:auto}
}
@media (max-width:600px){.tw-wall{grid-auto-columns:84%}}
@media (max-width:900px){.tw-wall .tw-t.pair .ph,.tw-wall .tw-t.lead.pair .ph{aspect-ratio:3/2}}
/* the next-theme link sits on the photo above 900px: white, like the essay text */
@media (min-width:901px){.es-next{color:#fff}.es-next:focus-visible{outline-color:#fff}}
/* phones and tablets: the map REPLACES the suggestion photos in the same frame (owner, 2026-11-09),
   instead of sliding open below them. Both sit in one grid cell; the map takes the strip's height. */
@media (max-width:900px){
  .bx-sg,.bx-sg.with-map,.bx-sg:not(.with-map){grid-template-columns:minmax(0,1fr);grid-template-areas:"s";gap:0}
  .bx-sg>.bx-legs,.bx-sg>.bx-map{grid-area:s}
  .bx-sg .bx-legs{transition:opacity .4s ease}
  .bx-sg.with-map .bx-legs{opacity:0;pointer-events:none}
  .bx-sg .bx-map,.bx-sg.with-map .bx-map{align-self:stretch;position:relative;max-height:none;margin:0;transform:none;opacity:0;visibility:hidden;background:var(--paper);transition:opacity .4s ease,visibility 0s .4s}
  .bx-sg.with-map .bx-map{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s 0s}
  .bx-sg .bx-map #bxMap{position:absolute;inset:14px 0 0;width:100%;height:calc(100% - 14px);min-width:0;max-height:none;margin:0}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.bx-sg .bx-legs,.bx-sg .bx-map{transition:none}}

/* ===== motion pass (owner, 2026-11-09): one opening moment, then motion only in answer to the reader ===== */
/* 1. the opening: the photograph settles, the name rises */
@keyframes heroIn{from{transform:scale(1.07)}to{transform:none}}
@keyframes heroUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .la-open-ph img{animation:heroIn 1.9s cubic-bezier(.2,.7,.2,1) both}
  .la-open-t h1{animation:heroUp .9s .2s cubic-bezier(.2,.7,.2,1) both}
  .la-open-t .globe-btn{animation:heroUp .7s .5s cubic-bezier(.2,.7,.2,1) both}
}
/* 2. suggestion photos: new ones grow in from nothing, old ones fold away (flex eases in .bx-leg) */
.bx-leg.bx-in{min-width:0}
.bx-leg.bx-out{min-width:0;padding-left:0;padding-right:0}
.bx-leg.bx-out{pointer-events:none;transition:flex .5s cubic-bezier(.3,.7,.2,1),opacity .35s ease}
.bx-leg.bx-out b,.bx-leg.bx-out span,.bx-leg.bx-in b,.bx-leg.bx-in span{white-space:nowrap}
/* 4. the distance bars draw from the left, one row after another */
@keyframes gaGrow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ga-runs.pre .ga-bar{clip-path:inset(0 100% 0 0)}
.ga-runs.go .ga-bar{animation:gaGrow .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}
/* 5. the section bar: one underline that slides to the section you are in */
.sb-in{position:relative}
.sb-ind{position:absolute;left:0;bottom:0;height:2px;width:0;background:#fff;opacity:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.65,0,.25,1),width .45s cubic-bezier(.65,0,.25,1),opacity .2s ease}
.sb.has-ind a.on{border-bottom-color:transparent}
/* hover: town and dispatch photos lean in, inside their frames */
.bx-ph{display:block;overflow:hidden}
.bx-ph img,.dt-ph img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.dt-ph{display:block;overflow:hidden}
@media (hover:hover){.bx-t:hover .bx-ph img{transform:scale(1.05)}.dt:hover .dt-ph img{transform:scale(1.04)}}
@media (max-width:900px){
  .bx-list .bx-t .bx-ph img{margin-bottom:0}.bx-list .bx-t .bx-ph{margin-bottom:14px}
  .dp-grid .dt img{margin-bottom:0}.dp-grid .dt .dt-ph{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .ga-runs .ga-bar{animation:none!important;clip-path:none!important}
  .sb-ind,.bx-ph img,.dt-ph img,.bx-leg.bx-out{transition:none}
}

/* map family marks (owner 2026-11-09): on a phone the row swipes; fade its right edge instead of slicing an icon, and pad the end so the last mark scrolls clear of the fade */
@media (max-width:900px){
  .mx-col .mn-fam ul{padding-right:30px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
}
/* things to do under 900px (owner 2026-11-09): a card with no photograph is as tall as a photo card
   (a 3:2 photograph plus its text block), not the height of the tallest card in the row */
@media (max-width:900px){
  .tw-wall .tw-t.tx{container-type:inline-size;display:flex;flex-direction:column}
  .tw-wall .tw-t.tx>.la-slide{flex:none;min-height:calc(66.667cqw + 173px);display:flex;flex-direction:column}
  .tw-wall .tw-t.tx .la-slide .go{margin-top:auto}
  .tw-wall .tw-t.lead.pair .la-slide p{-webkit-line-clamp:2}
}