/* FULL TOWN PAGE (full-town.css)
   The stylesheet of the full town page design, first shipped on Valletta
   (2026-11-07). Shared by every page scripts/gen-full-town.mjs writes; the
   page itself carries only data and markup. Loaded after city.css, which it
   builds on. The theme tiles are laid out by POSITION (first tile large,
   then two, then three), so a town's config lists exactly six tiles. */
/* LAB A: the long brief. Same masthead as the live page, then the page answers
   four questions in order: what is it good for, how do I get in, where do I
   sleep, what do I do. Scroll-led, editorial, nothing hidden behind a control. */
.la-sec{max-width:var(--maxw);margin:0 auto;padding:72px var(--gut) 0}
.la-h{font:800 clamp(26px,3.4vw,40px)/1.02 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:0}
.la-sub{font:400 17px/1.55 'Lora',serif;color:var(--ink-2);margin:10px 0 0;max-width:60ch}
.la-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px dashed var(--dash);margin-bottom:28px}
/* The collage opener is the page's thesis, so it is set a step larger than the other section heads. */
#good-for{padding-top:clamp(80px,9vw,128px)}
#good-for .la-head{padding-bottom:40px;margin-bottom:48px;justify-content:center;text-align:center}
#good-for .la-h{font-size:clamp(34px,4.6vw,60px);line-height:.98}
#good-for .la-sub{font-size:clamp(19px,1.7vw,22px);line-height:1.55;max-width:58ch;margin:16px auto 0}

/* Good for: the brand collage. Gap 0, sharp, photography carries the colour. */
.la-mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,17vw);gap:12px}
.la-m{position:relative;overflow:hidden;display:block;color:#fff;text-decoration:none;background:#222}
.la-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.la-m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72))}
.la-m:hover img{transform:scale(1.04)}
.la-m .t{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.la-m b{display:block;font:800 clamp(20px,2.3vw,32px)/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.la-m span{display:block;font:400 15px/1.45 'Lora',serif;margin-top:8px;max-width:38ch;opacity:.92}
.la-m em{position:absolute;top:16px;right:18px;z-index:1;font:700 12px/1 'Inter',sans-serif;font-style:normal;background:rgba(250,249,246,.94);color:var(--ink);padding:7px 9px}
.la-m:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.la-m:nth-child(1){grid-column:span 7;grid-row:span 2}
.la-m:nth-child(2){grid-column:span 5}
.la-m:nth-child(3){grid-column:span 5}
.la-m:nth-child(n+4){grid-column:span 4}
@media(max-width:820px){
  .la-mosaic{grid-auto-rows:220px}
  .la-m{grid-column:span 12 !important;grid-row:span 1 !important}
  .la-m:nth-child(1){grid-row:span 1 !important}
}

/* Arriving: the airport itself on the left, the route under it, the three ways
   in beside it. The photograph says where you land; the strip says how far. */
.la-arr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 48px;align-items:start}
.la-arr-ph{margin:0;position:relative}
.la-airpill{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 28px);padding:9px 15px 9px 12px;border-radius:999px;background:rgba(14,14,16,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:600 13px/1.2 'Inter',sans-serif;text-decoration:none;transition:background .2s}
.la-airpill svg{width:16px;height:16px;flex:none;fill:currentColor;transform:rotate(45deg)}
.la-airpill:hover{background:rgba(14,14,16,.9)}
.la-airpill:focus-visible{outline:2px solid #fff;outline-offset:2px}
.la-arr-ph img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 36%;background:var(--bg-2)}
/* The route is the headline of this section: the two ends set big, the distance on the line. */
.la-route{display:flex;align-items:center;gap:24px;padding:16px 0 36px}
/* Centred head, and the route on a symmetric grid: the airport and the town get
   the same width, so the line sits dead centre between them. */
#arrive{padding-top:clamp(96px,10vw,152px)}
#arrive .la-head{justify-content:center;text-align:center;border-bottom:0;padding-bottom:0}
#arrive .la-head .la-sub{margin-left:auto;margin-right:auto}
#arrive .la-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:24px;padding-top:28px}
#arrive .la-route .end,#arrive .la-route .end:last-child{text-align:center}
#arrive .la-route .line{margin-top:-18px}
@media(max-width:600px){#arrive .la-route{grid-template-columns:1fr 1fr;gap:10px 16px}#arrive .la-route .line{grid-column:1 / -1;order:3;margin:40px 8px 0}}
.la-route .end b{display:block;font:900 clamp(24px,2.9vw,40px)/.9 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.005em}
.la-route .end span{display:block;font:400 13px/1.3 'Inter',sans-serif;color:var(--muted);margin-top:6px}
.la-route .end:last-child{text-align:right}
.la-route .line{flex:1;position:relative;border-top:3px dashed var(--ink);min-width:60px;margin-top:-18px}
.la-route .line::before,.la-route .line::after{content:"";position:absolute;top:-9.5px;width:16px;height:16px;background:var(--ink)}
.la-route .line::before{left:-3px;border-radius:50%}
.la-route .line::after{right:-3px}
.la-route .line em{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);text-align:center;font-style:normal;white-space:nowrap}
.la-route .line em b{display:block;font:800 clamp(17px,1.6vw,22px)/1 'Archivo',sans-serif}
.la-route .line em span{display:block;font:400 13px 'Inter',sans-serif;color:var(--muted);margin-top:4px}
@media(max-width:600px){.la-route{flex-wrap:wrap;gap:10px 16px;padding-bottom:32px}.la-route .line{order:3;flex-basis:100%;margin:40px 8px 0}.la-route .end:last-child{margin-left:auto}}
.la-ways{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.la-way{padding:18px 0;border-bottom:1px dashed var(--dash)}
.la-way h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:800 16px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0}
.la-way h3 span{font:600 13px 'Inter',sans-serif;text-transform:none;letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.la-way p{font:400 15.5px/1.6 'Lora',serif;color:var(--ink-2);margin:8px 0 0}
.la-more{display:inline-block;margin-top:20px;font:600 13px 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.la-gozo{font-size:15px;margin-top:16px}
@media(max-width:900px){.la-arr{grid-template-columns:1fr}.la-ways{margin-top:28px}}

/* Where to stay: a short list by need, then one compact table beside a map. */
/* Sub-heads inside Where to stay: one over the three, one over the lists by need. */
.la-sh{margin:0 0 18px}
.la-sh p{margin-top:6px!important}
.la-sh h3{font:800 18px/1.1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0}
.la-sh p{font:400 15px/1.5 'Lora',serif;color:var(--muted);margin:0}
/* Three hotels to start with: one big, two stacked. Each shows its locator map
   until the hotel's own approved photo exists (worker /correspondent-photos,
   hotel:true), then swaps to that photo with the hotel's credit. */
.la-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(2,minmax(200px,17vw));gap:12px;margin-bottom:56px}
.la-ht{position:relative;overflow:hidden;display:block;color:#fff;text-decoration:none;background:var(--bg-2)}
.la-ht:first-child{grid-row:span 2}
/* Two picks (Mdina): side by side, one row, the same size. */
.la-top:has(> .la-ht:nth-child(2):last-child){grid-template-columns:1fr 1fr;grid-template-rows:minmax(320px,30vw)}
.la-top:has(> .la-ht:nth-child(2):last-child) .la-ht:first-child{grid-row:auto}
.la-top:has(> .la-ht:nth-child(2):last-child) .la-ht:first-child b{font-size:clamp(20px,2.1vw,30px)}
.la-top:has(> .la-ht:only-child){grid-template-columns:1fr;grid-template-rows:minmax(260px,22vw)}
.la-ht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.la-ht img.map{filter:saturate(.6)}
.la-ht::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.74))}
.la-ht .t{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.la-ht b{display:block;font:800 clamp(20px,2.1vw,30px)/1 'Archivo',sans-serif;text-transform:uppercase}
.la-ht:first-child b{font-size:clamp(28px,3.4vw,48px)}
.la-ht span{display:block;font:400 15px/1.45 'Lora',serif;margin-top:8px;max-width:44ch;opacity:.94}
.la-ht em{position:absolute;top:14px;right:16px;z-index:1;font:700 12px/1 'Inter',sans-serif;font-style:normal;background:rgba(250,249,246,.94);color:var(--ink);padding:7px 9px}
.la-ht small{position:absolute;top:14px;left:16px;z-index:1;font:500 11.5px/1 'Inter',sans-serif;color:#fff;background:rgba(14,14,16,.6);padding:6px 9px;border-radius:999px}
.la-ht:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
@media(max-width:820px){.la-top{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:240px}.la-ht:first-child{grid-row:span 1;min-height:320px}}
.la-needs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin-bottom:36px}
.la-need{padding:18px 20px 20px 0}
.la-need + .la-need{padding-left:20px;border-left:1px dashed var(--dash)}
.la-need h3{font:800 14px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px}
.la-need ul{list-style:none;margin:0;padding:0}
.la-need li{font:400 15px/1.5 'Lora',serif;padding:2px 0}
.la-need a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.la-need a:hover{border-bottom-color:var(--ink)}
@media(max-width:900px){.la-needs{grid-template-columns:1fr 1fr}.la-need:nth-child(odd){padding-left:0;border-left:0}.la-need:nth-child(n+3){border-top:1px dashed var(--dash)}}
@media(max-width:520px){.la-needs{grid-template-columns:1fr}.la-need + .la-need{padding-left:0;border-left:0;border-top:1px dashed var(--dash)}}

.la-tbl{width:100%;border-collapse:collapse}
.la-tbl th{text-align:left;font:400 12px 'Inter',sans-serif;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.la-tbl th.num,.la-tbl td.num{text-align:right}
.la-tbl th button{all:unset;cursor:pointer;color:var(--muted)}
.la-tbl th button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.la-tbl th[aria-sort="ascending"] button{color:var(--ink);font-weight:600}
.la-tbl th[aria-sort="ascending"] button::after{content:" \2193"}
.la-tbl td{padding:13px 0;border-bottom:1px dashed var(--dash);vertical-align:baseline}
.la-tbl td.num{font:700 15px 'Archivo',sans-serif;white-space:nowrap;padding-left:18px}
.la-tbl .hn{font:800 15px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.la-tbl .hn:hover{text-decoration:underline}
.la-tbl .hk{display:block;font:400 14.5px/1.4 'Lora',serif;color:var(--ink-2);margin-top:3px}
.la-tbl .out{font:600 11.5px 'Inter',sans-serif;color:var(--gold);margin-left:6px}
.la-tbl tr.on .hn{color:var(--gold)}
.la-tbl tbody tr{cursor:pointer}
.la-note{font:400 13px/1.5 'Inter',sans-serif;color:var(--muted);margin:14px 0 0}

/* The map: sticky beside the hotel table, and the target of every "Show on map" below. */
/* The things-to-do map: the standard chip bar over it, as tall as the day text beside it, full screen on demand. */
.la-mapcol{display:flex;flex-direction:column;align-self:stretch;background:var(--bg)}
.la-mapwrap{position:relative;flex:1;min-height:480px;background:var(--bg-2)}
.la-mapcol.maplibregl-pseudo-fullscreen,.la-mapcol:fullscreen{padding:14px;box-sizing:border-box}
/* Full screen, the map fills what the chip bar leaves: the phone heights (64vh, 56vh) are for the page, not the full-screen view.
   iPhone has no element Fullscreen API, so MapLibre's pseudo-fullscreen (position:fixed) is the phone path: edge to edge, inside the safe areas. */
.la-mapcol.maplibregl-pseudo-fullscreen .la-mapwrap,.la-mapcol:fullscreen .la-mapwrap{flex:1 1 auto;height:auto;min-height:0}
.la-mapcol.maplibregl-pseudo-fullscreen{height:100dvh!important;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#laMap{position:absolute;inset:0}
.la-mapkey{position:absolute;left:10px;bottom:28px;z-index:2;background:rgba(250,249,246,.96);font:400 12px 'Inter',sans-serif;padding:8px 10px;display:flex;gap:14px}
.la-mapkey i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;border-radius:50%}
.maplibregl-popup-content{border-radius:0;padding:12px 14px;font:400 13px/1.45 'Inter',sans-serif;max-width:240px}
.maplibregl-popup-content b{display:block;font:800 13px/1.2 'Archivo',sans-serif;text-transform:uppercase;margin-bottom:3px}
.maplibregl-popup-content a{color:var(--ink)}
.maplibregl-popup-content .best{margin-top:6px}
.la-showmap{all:unset;cursor:pointer;font:600 12px 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.la-showmap:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:980px){.la-daygrid{grid-template-columns:1fr}.la-mapwrap{flex:none;height:64vh}}

/* Things to do, by what they are good for */
.la-group{scroll-margin-top:90px;margin-top:56px}
.la-ghead{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.la-ghead h3{font:800 22px/1 'Archivo',sans-serif;text-transform:uppercase;margin:0;white-space:nowrap}
.la-ghead .rule{flex:1;border-top:1px dashed var(--dash)}
.la-ghead .n{font:400 13px 'Inter',sans-serif;color:var(--muted)}
.la-cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.la-card{scroll-snap-align:start;min-width:0}
.la-card .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.la-card .ph img{width:100%;height:100%;object-fit:cover}
.la-card .ph img.tile{filter:grayscale(.35)}
.la-card h4{font:700 16px/1.2 'Archivo',sans-serif;margin:12px 0 0}
.la-card h4 a{color:inherit;text-decoration:none}
.la-card h4 a:hover{text-decoration:underline}
.la-card .meta{font:400 12.5px 'Inter',sans-serif;color:var(--muted);margin-top:4px}
.la-card p{font:400 14.5px/1.55 'Lora',serif;color:var(--ink-2);margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:1100px){.la-cards.few{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
/* Things to do as TABS: the country pages' switcher (spain.html .wtabs), one
   panel per theme. A panel lays its places out as a grid, never a side-scroller,
   with a column count the places fill (3 or 4), so no card sits alone. */
.la-tabs{scroll-margin-top:clamp(78px,9vh,104px);display:flex;flex-wrap:wrap;justify-content:center;
  gap:0 clamp(22px,3.4vw,52px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.la-tab{position:relative;background:none;border:0;cursor:pointer;padding:clamp(18px,2vw,24px) 2px;
  font:800 clamp(14px,1.4vw,19px)/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-2);transition:color .22s}
.la-tab:hover,.la-tab[aria-selected="true"]{color:var(--ink)}
.la-tab::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:3px;background:var(--ink);transition:right .34s ease}
.la-tab[aria-selected="true"]::after{right:0}
.la-tab:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.la-panel{scroll-margin-top:90px;padding-top:28px}
.la-panel:focus-visible{outline:none}
.la-pintro{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:28px}
.la-pintro p{font:400 clamp(17px,1.5vw,19px)/1.55 'Lora',serif;color:var(--ink-2);margin:0;max-width:60ch}
.la-pintro .side{display:flex;align-items:baseline;gap:18px;font:400 13px 'Inter',sans-serif;color:var(--muted);white-space:nowrap}
.la-panel .la-cards{display:none}
/* Each panel is a CAROUSEL, one screen tall: three places in view at desktop,
   two at tablet, one and a peek on a phone. A place with its own photograph
   shows it; one without gets a text card on the paper tone, never a map tile. */
.la-car{position:relative}
.la-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
.la-track::-webkit-scrollbar{display:none}
.la-track:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.la-slide{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column}
.la-slide .ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.la-slide .ph img{width:100%;height:100%;object-fit:cover;display:block}
.la-slide h4{font:700 17px/1.2 'Archivo',sans-serif;margin:14px 0 0}
.la-slide h4 a{color:inherit;text-decoration:none}
.la-slide h4 a:hover{text-decoration:underline}
.la-slide .meta{font:400 12.5px 'Inter',sans-serif;color:var(--muted);margin-top:5px}
.la-slide .meta b{font-weight:600;color:var(--ink)}
.la-slide p{font:400 14.5px/1.6 'Lora',serif;color:var(--ink-2);margin:10px 0 0}
.la-col{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;gap:24px}
.la-col > .la-slide{flex:1}
/* Black cards split their column into two EQUAL rows, so the gap between them
   lines up across every column (flex let each pair split by its own text). */
.la-col.pair{display:grid;grid-template-rows:1fr 1fr}
/* A photo column uses the same two rows: the photograph fills the top half, so
   its foot lines up with the first black card's, and the text starts where the
   second black card starts. */
.la-col.photo .ph{position:relative;aspect-ratio:auto;min-height:220px;height:100%}
.la-col.photo .ph{display:block;overflow:hidden;background:var(--bg-2)}
.la-col.photo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.la-col.photo .la-slide h4{margin-top:0}
/* A place with no photograph is a half-height card, white on black, and two
   of them stack in the space of one photo card. They carry the first sentence;
   the rest is on the place's own page. */
/* A photo card's pill follows its text; only the paired black cards pin it to the foot. */
.la-slide:not(.txt) .go{margin-top:0}
.la-slide.txt{background:#0E0E10;color:#F4F4F2;padding:22px 22px 20px}
.la-slide.txt h4{font-size:20px;line-height:1.15;margin:0}
.la-slide.txt .meta{color:rgba(244,244,242,.62)}
.la-slide.txt .meta b{color:#F4F4F2}
.la-slide.txt p{font-size:15px;color:rgba(244,244,242,.86)}
.la-slide.txt .go{background:#F4F4F2;color:#0E0E10}
.la-slide.txt .go:hover{background:#fff}
.la-slide.txt a:focus-visible{outline:2px solid #5BB8E8;outline-offset:2px}
.la-slide .go{margin-top:auto;align-self:flex-start;display:inline-block;padding:9px 16px;border-radius:999px;background:#0E0E10;color:#fff;font:600 13px/1 'Inter',sans-serif;text-decoration:none;transition:background .2s}
.la-slide .go:hover{background:#2a2a2e}
.la-slide .go:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.la-slide p + .go,.la-slide .best + .go{margin-top:auto}
.la-slide > p{margin-bottom:16px}
.la-ctl{display:flex;align-items:center;gap:10px}
.la-ctl .pos{font:400 13px 'Inter',sans-serif;color:var(--muted);font-variant-numeric:tabular-nums;min-width:7ch;text-align:right}
.la-nav{width:40px;height:40px;display:grid;place-items:center;background:var(--ink);border:1px solid var(--ink);color:var(--bg);cursor:pointer;padding:0;transition:opacity .2s}
.la-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.la-nav:hover:not(:disabled){opacity:.8}
.la-nav:disabled{opacity:.18;cursor:default}
.la-nav:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:980px){.la-track{grid-auto-columns:calc((100% - 24px)/2)}}
@media(max-width:600px){.la-track{grid-auto-columns:84%;gap:16px}.la-ctl .pos{display:none}}
@media(max-width:760px){
  .la-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:0 26px;scrollbar-width:none;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut);overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .la-tabs::-webkit-scrollbar{display:none}
  .la-tab{white-space:nowrap;flex:0 0 auto;font-size:14px;padding:17px 0}
}
@media(prefers-reduced-motion:reduce){.la-tab,.la-tab::after{transition:none}}

.la-day{max-width:var(--maxw);margin:0 auto;padding:80px var(--gut) 0}
.la-day .cbrief{padding:20px 0 0;max-width:none}
.la-daygrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:start}
.la-daygrid .la-h{margin:0}
@media (prefers-reduced-motion:reduce){.la-m img{transition:none}}

/* Magazine opener: photograph first, full bleed, the name set on it. */
.la-open{position:relative;height:min(92vh,980px);min-height:520px;overflow:hidden;background:#111}
.la-open-ph{margin:0;position:absolute;inset:0}
.la-open-ph img{width:100%;height:100%;object-fit:cover}
.la-open::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.la-open-t{position:absolute;left:0;right:0;bottom:6vh;z-index:1;text-align:center;color:#fff;padding:0 var(--gut)}
.la-open-t h1{text-shadow:0 2px 40px rgba(0,0,0,.35);font:900 clamp(64px,13vw,220px)/.85 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin:0}
/* The longest word (--hw characters, set by the generator) always fits the width: Archivo 900 caps run up to about .78em a letter. */
.la-open-t h1{font-size:min(clamp(64px,13vw,220px),calc((100vw - 2 * var(--gut)) / (var(--hw,8) * .8)))}
.la-crumbs{font:500 13px 'Inter',sans-serif;color:var(--muted);margin:0 0 22px}
.la-crumbs a{color:var(--ink)}
/* View on globe: city.css's pill, light on the masthead photograph. */
.la-open-t .globe-btn{margin-top:22px;color:#fff;background:#0E0E10;border-color:#0E0E10}
.la-stand{max-width:760px;margin:0 auto;padding:56px var(--gut) 0;text-align:center}
.la-standfirst{font:400 clamp(20px,2vw,25px)/1.5 'Lora',serif;margin:0;color:var(--ink)}
.la-by{font:400 13px 'Inter',sans-serif;color:var(--muted);margin:22px 0 0;padding-top:18px;border-top:1px dashed var(--dash);display:inline-block}
.la-glance{margin-top:40px}
.la-break{margin:88px 0 0;position:relative}
.la-break img{display:block;width:100%;height:min(78vh,820px);object-fit:cover}
.la-break figcaption{max-width:var(--maxw);margin:0 auto;padding:10px var(--gut) 0;font:italic 400 14px 'Lora',serif;color:var(--muted)}
/* A break that carries its section's title, centred both ways on the photograph. */
.la-title .la-title-t{position:absolute;left:0;right:0;top:0;height:min(78vh,820px);z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut);color:#fff;background:rgba(8,12,20,.38)}
.la-title .la-h{font-size:clamp(40px,7vw,104px);line-height:.92;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.la-title-t p{font:400 clamp(17px,1.6vw,21px)/1.55 'Lora',serif;max-width:52ch;margin:18px 0 0;text-shadow:0 1px 16px rgba(0,0,0,.35)}
/* Things to do gets room on both sides: off the hotel lists, between the
   photograph and the tabs, and before A day in the town. */
.la-break.la-title{margin-top:clamp(112px,10vw,160px)}
#do{padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(64px,7vw,112px)}
.la-pin{width:28px;height:28px;border-radius:50%;padding:0;border:2px solid #fff;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.la-pin svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.la-pin.is-best{background:var(--gold)}
.la-pin[hidden]{display:none}
.maplibregl-popup-content .la-popmeta{display:block;color:var(--muted)}
.maplibregl-popup-content .best{display:flex;width:fit-content;max-width:100%}
.maplibregl-popup-content .best-r{line-height:1.25}
.maplibregl-popup-content .la-popgo{display:table;margin-top:10px;padding:8px 14px;border-radius:999px;background:#0E0E10;color:#fff;font:600 12.5px/1 'Inter',sans-serif;text-decoration:none}
.maplibregl-popup-content .la-popgo:hover{background:#2a2a2e}
.maplibregl-popup-content .la-poplink{color:var(--ink);text-decoration:none;display:block}
.maplibregl-popup-content .la-poplink:hover b{text-decoration:underline}
.maplibregl-popup-content a:focus{outline:none}
.maplibregl-popup-content a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.la-pin:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* The globe's family bar (spain.html .mn-fam), copied: round icon marks on the map. */
  .mn-fam{position:absolute;right:10px;bottom:10px;left:10px;z-index:3;display:flex;
    justify-content:flex-end;pointer-events:none}
  .mn-fam ul{list-style:none;margin:-34px 0 0;padding:34px 2px 2px;display:flex;gap:7px;
    pointer-events:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .mn-fam ul::-webkit-scrollbar{display:none}
  .mn-fam li{position:relative;flex:none;pointer-events:auto}
  .mn-fam button{width:29px;height:29px;border-radius:50%;padding:0;display:grid;place-items:center;
    cursor:pointer;background:#fff;border:0;color:var(--ink);
    box-shadow:0 1px 4px rgba(0,0,0,.18);transition:color .15s,background .15s}
  .mn-fam svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .mn-fam button:hover{background:#f2f2f2}
  .mn-fam button[aria-pressed="true"]{background:var(--ink);color:#fff}
  .mn-fam button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .mn-fam .nm{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
    z-index:2;white-space:nowrap;pointer-events:none;font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.82);
    border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:4px 10px;opacity:0;
    transition:opacity .15s,transform .15s}
  .mn-fam li:hover .nm,.mn-fam li:focus-within .nm,.mn-fam li.say .nm{opacity:1;transform:translate(-50%,0)}
  /* the last mark's pill turns inward, or it runs off the map's right edge */
  .mn-fam li:last-child .nm{left:auto;right:0;transform:translate(0,4px)}
  .mn-fam li:last-child:hover .nm,.mn-fam li:last-child.say .nm,
  .mn-fam li:last-child:focus-within .nm{transform:none}
  /* A PHONE: the row is CENTRED along the bottom edge (the credit is top left
     at every width, out of its way). A row too wide for the map
     fills it and scrolls sideways from its first mark (the ul is centred, not
     its contents, so nothing is clipped on the left). */
  @media(max-width:760px){
    .mn-fam{left:0;right:0;bottom:10px;justify-content:center}
    .mn-fam ul{padding-left:10px;padding-right:10px;-webkit-overflow-scrolling:touch}
    .mn-fam li:first-child .nm{left:0;transform:translate(0,4px)}
    .mn-fam li:first-child:hover .nm,.mn-fam li:first-child.say .nm,
    .mn-fam li:first-child:focus-within .nm{transform:none}
  }
  @media(prefers-reduced-motion:reduce){.mn-fam .nm{transition:none}}
/* On this map the family bar sits TOP LEFT (the owner, 2026-11-07), so its name
   pills drop below the marks instead of rising above them. */
.la-mapwrap .mn-fam{top:10px;bottom:auto;left:10px;right:60px;justify-content:flex-start}
.la-mapwrap .mn-fam ul{margin:0 0 -34px;padding:2px 2px 34px}
.la-mapwrap .mn-fam .nm{bottom:auto;top:calc(100% + 8px)}
.la-mapwrap .mn-fam li:first-child .nm{left:0;transform:translate(0,-4px)}
.la-mapwrap .mn-fam li:first-child:hover .nm,.la-mapwrap .mn-fam li:first-child.say .nm,.la-mapwrap .mn-fam li:first-child:focus-within .nm{transform:none}
/* A break that speaks: one idea set big in the sky, magazine style. The whole
   photograph shows (no crop), so the gunner and the battery stay in frame. */
.la-quote{overflow:hidden;margin-top:clamp(112px,10vw,160px)}
.la-quote img{height:auto;aspect-ratio:1746/1300;max-height:none;object-position:50% 50%}
.la-quote::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,20,40,.45) 0,rgba(8,20,40,.2) 20%,rgba(8,20,40,0) 34%);pointer-events:none}
.la-quote figcaption{position:absolute;left:0;right:0;top:0;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(28px,4vw,64px) var(--gut) 0;text-align:center;color:#fff;font:inherit}
.la-quote figcaption span{display:block;margin-bottom:14px;font:600 clamp(13px,1.1vw,16px)/1.3 'Inter',sans-serif;letter-spacing:.02em}
.la-quote blockquote{margin:0 auto;font:900 clamp(52px,9vw,150px)/.9 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(0,0,0,.22)}
@media(max-width:600px){.la-quote img{aspect-ratio:4/5;object-position:38% 50%}}
.la-day{max-width:var(--maxw)}
.la-day .cbrief p{font-size:19px;line-height:1.7}

/* Decision: the first thing after the facts band, because the reader is deciding whether to sleep here. */
.dec{max-width:var(--maxw);margin:0 auto;padding:64px var(--gut) 0}
.dec-in{padding-top:8px;display:grid;grid-template-columns:5fr 7fr;grid-template-rows:auto auto 1fr;gap:18px 56px}
.dec-h{font:800 clamp(26px,3.4vw,40px)/1.02 'Archivo',sans-serif;text-transform:uppercase;margin:0;grid-column:1}
.dec-v{font:400 clamp(18px,1.6vw,21px)/1.5 'Lora',serif;margin:0;grid-column:1;align-self:start;color:var(--ink)}
.dec-links{grid-column:1;align-self:start;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0}
.dec-all{grid-column:1;justify-self:start;align-self:start;font:600 13px 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.dec-cols{grid-column:2;grid-row:1 / span 3;display:grid;grid-template-columns:1fr 1fr;gap:0}
.dec-col{padding:0 28px 0 0}
.dec-col.no{padding:0 0 0 28px;border-left:1px dashed var(--dash)}
.dec-col h3{font:800 15px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px}
.dec-col h3 a{color:inherit}
/* "Read the full FAQ" in the hotel accent, not city.css's blue. */
.band .faqmore{color:var(--gold);font-weight:700}
.band .faqmore:focus-visible{outline-color:var(--gold)}
.dec-col ul{list-style:none;margin:0;padding:0}
.dec-col li{font:400 15.5px/1.5 'Lora',serif;color:var(--ink-2);padding:9px 0 9px 22px;position:relative;border-top:1px solid var(--line)}
.dec-col.yes li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:10px;background:var(--ink)}
.dec-col.no li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:10px;border:1.5px solid var(--ink)}
@media(max-width:900px){.dec-in{grid-template-columns:1fr}.dec-cols{grid-column:1;grid-row:auto;grid-template-columns:1fr;gap:24px}.dec-col.no{padding:0;border-left:0}}

/* Calendar strip: three dated cells. */
.cal{max-width:var(--maxw);margin:0 auto;padding:72px var(--gut) 0}
.cal-head{margin-bottom:22px}
.cal-h{font:800 clamp(26px,3.4vw,40px)/1.02 'Archivo',sans-serif;text-transform:uppercase;margin:0}
.cal-sub{font:400 17px/1.55 'Lora',serif;color:var(--ink-2);margin:10px 0 0;max-width:60ch}
/* Equal columns with a gap, the dashed rule drawn in the gap: padding on the
   items gave the first one 20px more width, so its photo stood taller. */
.cal-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--line-strong)}
.cal-e{padding:20px 0 18px;position:relative}
.cal-row{display:grid;grid-template-columns:64px 1fr;gap:14px}
.cal-ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);margin-bottom:18px}
.cal-ph img{display:block;width:100%;height:100%;object-fit:cover}
.cal-e + .cal-e::before{content:"";position:absolute;top:0;bottom:0;left:-20px;border-left:1px dashed var(--dash)}
.cal-d b{display:block;font:900 22px/1 'Archivo',sans-serif;text-transform:uppercase}
.cal-d span{display:block;font:700 22px/1 'Archivo',sans-serif;color:var(--muted);margin-top:2px}
.cal-b h3{font:800 15px/1.15 'Archivo',sans-serif;text-transform:uppercase;margin:0}
.cal-b h3 a{color:inherit}
.cal-w{font:600 12px 'Inter',sans-serif;color:var(--gold);margin-top:5px}
.cal-b p{font:400 14px/1.5 'Lora',serif;color:var(--ink-2);margin:6px 0 0}
.cal-x{display:none}
.cal-go{display:inline-block;margin-top:14px;padding:9px 16px;border-radius:999px;background:#0E0E10;color:#fff;font:600 13px/1 'Inter',sans-serif;text-decoration:none;transition:background .2s}
.cal-go:hover{background:#2a2a2e}
.cal-go:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:900px){.cal-list{grid-template-columns:1fr}.cal-e + .cal-e::before{display:none}.cal-e + .cal-e{border-top:1px dashed var(--dash)}}

/* Country's Best badge: the list is the authority, so the badge links to it. */
.best{display:inline-flex;align-items:stretch;text-decoration:none;font:600 11px/1 'Inter',sans-serif;border:1px solid var(--ink);color:var(--ink);margin-top:10px}
.best-k{background:var(--ink);color:#fff;padding:6px 7px;letter-spacing:.04em}
.best-r{padding:6px 8px}
.best:hover .best-r{background:var(--bg-2)}
.best.on-photo{position:absolute;left:10px;top:10px;margin:0;background:var(--bg);z-index:1}
.la-card .ph{position:relative}

/* SECTION RHYTHM: one gap between every section, set here and nowhere else.
   --gap separates sections (a full-bleed photo counts as one); --gap-s is the
   tighter step inside a section (a title band to its own content). */
:root{--gap:clamp(72px,8vw,120px);--gap-s:clamp(40px,4.5vw,64px)}
.dec,.la-sec,#good-for,#arrive,.la-day,.cal{padding-top:var(--gap)}
.la-break,.la-break.la-title{margin-top:var(--gap)}
#do{padding-top:var(--gap-s);padding-bottom:0}
.xmore{margin-top:var(--gap);padding-top:var(--gap-s)}
/* Trims for blocks whose own first or last child carries spacing the rhythm
   already gives (measured content edge to content edge). */
.dec{padding-top:calc(var(--gap) - 10px)}
.la-break.la-title{margin-top:calc(var(--gap) - 24px)}
.la-day{padding-top:var(--gap)}
#arrive{padding-top:calc(var(--gap) - 18px)}
@media(max-width:980px){.cal{padding-top:calc(var(--gap) - 19px)}}
/* ---- POLISH ---- */
/* Fact strip: each fact opens its own FAQ answer. */
.cmast-facts .mfc.isq{cursor:pointer;transition:background .2s}
.cmast-facts .mfc.isq:hover{background:rgba(14,14,16,.035)}
.cmast-facts .mfc.isq:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cmast-facts .mfc.isq .ck::after{content:"+";margin-left:6px;opacity:.35;transition:opacity .2s}
.cmast-facts .mfc.isq:hover .ck::after,.cmast-facts .mfc.isq:focus-visible .ck::after{opacity:1}
.band .mfq.hit{animation:mfqhit 1.8s ease-out}
@keyframes mfqhit{0%,25%{background:rgba(35,108,155,.10)}100%{background:transparent}}
/* Section nav: appears once the masthead has scrolled away. */
.secnav{position:fixed;left:0;right:0;top:var(--navh,58px);z-index:40;background:#0E0E10;color:#fff;
  transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
.secnav.on{transform:none;opacity:1;pointer-events:auto}
html.sn-on .nav.solid{border-bottom-color:transparent}
.secnav ul{list-style:none;margin:0 auto;padding:0 var(--gut);max-width:var(--maxw);display:flex;justify-content:center;gap:clamp(18px,3vw,40px)}
.secnav a{display:block;padding:14px 0 12px;font:600 11.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);text-decoration:none;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.secnav a:hover{color:#fff}
.secnav a[aria-current="true"]{color:#fff;border-bottom-color:#fff}
.secnav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:760px){
  .secnav ul{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:22px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .secnav ul::-webkit-scrollbar{display:none}
  .secnav a{padding:15px 0 13px}
}
#good-for,#stay,#do,#day,#calendar,#arrive,#decide{scroll-margin-top:calc(var(--navh,58px) + 40px)}
.la-tabs{scroll-margin-top:calc(var(--navh,58px) + 56px)}
/* Reveal on scroll: only when JS is on and the reader allows motion. */
@media (prefers-reduced-motion:no-preference){
  html.rv .rv-i{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
  html.rv .rv-i.rv-in{opacity:1;transform:none}
  /* The mosaic reveals as one piece: each tile wipes up from its foot, its
     photo settles from a slow zoom, then its words rise. Staggered in reading
     order. .done hands the tiles back to their own hover transition. */
  html.rv .la-mosaic:not(.done) .la-m{clip-path:inset(100% 0 0 0);
    transition:clip-path 1.2s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--i,0) * 110ms)}
  html.rv .la-mosaic:not(.done) .la-m img{transform:scale(1.18);will-change:transform;
    transition:transform 1.8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 110ms)}
  html.rv .la-mosaic:not(.done) .la-m .t{opacity:0;transform:translateY(22px);
    transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 110ms + 450ms)}
  html.rv .la-mosaic.in:not(.done) .la-m{clip-path:inset(0)}
  html.rv .la-mosaic.in:not(.done) .la-m img{transform:scale(1)}
  html.rv .la-mosaic.in:not(.done) .la-m .t{opacity:1;transform:none}
}
/* Carousels on a phone: a progress rule and a swipe hint in place of the counter. */
.la-prog{height:2px;background:var(--line);margin-top:18px;position:relative;overflow:hidden}
.la-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);transition:left .25s ease,width .25s ease}
.la-swipe{display:none;font:600 11px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-items:center;gap:6px;transition:opacity .4s}
.la-swipe svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;animation:swipenudge 1.6s ease-in-out infinite}
@keyframes swipenudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(max-width:600px){
  .la-ctl{display:none !important}
  .la-swipe{display:inline-flex}
  .la-swipe.gone{opacity:0}
  .la-tab{padding:16px 6px;min-height:48px;display:flex;align-items:center}
  .la-tabs{gap:0 12px}
}
@media (prefers-reduced-motion:reduce){.la-swipe svg{animation:none}}

/* Map: hotel pins, and the country's Best rank in a popup as a plain line (no box beside the round button). */
.la-pin.is-stay{background:#fff;color:var(--ink);border-color:var(--ink)}
.la-pin.is-stay.on{background:var(--ink);color:#fff;border-color:#fff;box-shadow:0 0 0 4px rgba(14,14,16,.22);z-index:2}
.la-popbest{display:block;margin-top:4px;font:600 13px/1.3 'Inter',sans-serif;color:var(--ink)}

/* Things to do hover: a photo card's picture eases in a little; a text card
   lets its street map bleed through the black, very faintly. The tiles are
   pale (beige land, white streets), so the filter thresholds them to white
   streets on black land; inverting them left black lines on black. Pointer devices only. */
/* Type and time on one line, the Best rank on its own line under it. */
.la-slide .meta b{display:block;margin-top:3px}
.la-slide.txt{position:relative;isolation:isolate;overflow:hidden}
.la-slide.txt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--map,none) center/cover no-repeat;
  filter:grayscale(1) brightness(.52) contrast(20);mix-blend-mode:screen;opacity:0;transition:opacity .6s ease;pointer-events:none}
.la-col .ph img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){
  .la-slide.txt:hover::before{opacity:.1}
  .la-col:hover .ph img{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){.la-slide.txt::before,.la-col .ph img{transition:none}.la-col:hover .ph img{transform:none}}

/* MOBILE PASS (2026-11-07). Phone fixes plus swipe rows in place of stacked
   blocks, so the page reads in far fewer screens. Kept last so it wins. */

/* The day grid's one-column rule sat before its base rule and lost; restated after it. */
@media(max-width:980px){.la-daygrid{grid-template-columns:1fr}}

/* The noon-gun photograph: line, figure and the dispatch link stacked dead
   centre, over an even shade so the words hold on the bright harbour. */
.la-quote::before{background:rgba(8,20,40,.32)}
.la-quote figcaption{top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gut)}
.la-dpill{margin-top:clamp(20px,2.4vw,32px);display:inline-flex;align-items:center;
  min-height:44px;padding:0 20px;border-radius:999px;background:#0E0E10;color:#fff;font:600 14px/1.2 'Inter',sans-serif;text-decoration:none}
.la-dpill:hover{background:#2a2a2e}
.la-dpill:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:760px){
  /* The masthead leaves room for the first line of the standfirst. */
  .la-open{height:80vh;height:80svh;min-height:480px}

  /* The site bar slides away while reading down; the section bar takes its place. */
  .nav{transition:transform .3s ease}
  html.nav-up .nav{transform:translateY(-100%)}
  .secnav{transition:transform .3s ease,opacity .3s ease,top .3s ease}
  html.nav-up .secnav.on{top:0}

  /* Swipe rows: one card and the edge of the next, bleeding to the screen edge. */
  #laMosaic,#laTop,#laNeeds,#labCal{
    display:grid;grid-auto-flow:column;grid-template-columns:none !important;grid-template-rows:none !important;
    grid-auto-columns:84%;grid-auto-rows:auto;gap:12px;align-items:start;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut)}
  #laMosaic::-webkit-scrollbar,#laTop::-webkit-scrollbar,#laNeeds::-webkit-scrollbar,#labCal::-webkit-scrollbar,.xmore .xgrid::-webkit-scrollbar{display:none}
  #laMosaic > *,#laTop > *,#laNeeds > *,#labCal > *{scroll-snap-align:start;min-width:0;grid-column:auto !important;grid-row:auto !important}
  /* No progress rule under a swipe row: the next card at the edge says it scrolls. */
  .la-prog{display:none !important}

  /* What the town does best: tall tiles, shown at once (the wipe left blank screens). */
  #laMosaic .la-m{aspect-ratio:4/3;height:auto}
  html.rv #laMosaic:not(.done) .la-m{clip-path:none}
  html.rv #laMosaic:not(.done) .la-m img{transform:none}
  html.rv #laMosaic:not(.done) .la-m .t{opacity:1;transform:none}

  /* Hotels: the card grows with its words, so nothing runs under the next card. */
  #laTop{margin-bottom:0}
  #laTop + .mc-prog{margin-bottom:44px}
  #laTop .la-ht,#laTop .la-ht:first-child{min-height:0;aspect-ratio:4/5;height:auto}

  /* Choose by what you want: short lists, narrower cards. */
  #laNeeds{grid-auto-columns:64%;gap:0}
  #laNeeds .la-need,#laNeeds .la-need + .la-need{border-top:0;border-left:1px dashed var(--dash);padding:16px 18px 18px}
  #laNeeds .la-need:first-child{border-left:0;padding-left:0}

  /* Should you stay: two tabs, the town and its alternative, one case at a time. */
  .dec-tabs{display:flex !important;gap:0;margin:8px 0 4px;padding:0;-webkit-mask-image:none;mask-image:none}
  .dec-cols .dec-col li:first-child{border-top:0}
  .dec-cols .dec-col{padding-right:0}
  .dec-tabs .la-tab{flex:1 1 0;justify-content:center;text-align:center}
  .dec-vs{flex:none;align-self:center;font:400 12px/1 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
  .dec-h,.dec-v{text-align:center}
  .dec-all{justify-self:center}
  .dec-links{justify-content:center}
  .dec-cols .dec-col[hidden]{display:none}
  .dec-cols .dec-col h3{display:none}

  /* Calendar. */
  #labCal{border-top:0}
  #labCal .cal-e + .cal-e{border-top:0}
  #labCal .cal-e + .cal-e::before{display:none}

  /* Swiped-in cards are on screen already: no fade as they arrive. */
  html.rv #laTop > .rv-i,html.rv #laNeeds > .rv-i,html.rv #labCal > .rv-i,html.rv .dec-cols .rv-i{opacity:1;transform:none;transition:none}

  /* More of the country. */
  .xmore .xgrid,.xmore .xgrid[data-tiles]{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;grid-auto-rows:auto;gap:12px;
    width:auto;margin:0;padding:0 var(--gut,20px);scroll-padding:0 var(--gut,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .xmore .xtile,.xmore .xtile:nth-child(1){grid-column:auto;height:clamp(240px,72vw,300px);scroll-snap-align:start}
  .xmore .mc-prog{margin:16px var(--gut,20px) 0}
  .xmore .xtile .ce{font-size:11px}

  /* The facts band: about one and a half facts on screen, labels readable,
     the site's chevrons to page it. No "Why you should go" head: the desk has
     none, and the hook above already says it. */
  body.townpage .la-glance .cwhy{display:none !important}
  .la-glance .cbandwrap{margin-top:28px}
  .la-glance .cbnav{width:32px}
  .la-glance .cbandwrap .cmast-facts .mfc:nth-child(n){flex:0 0 64%;padding:16px 16px 18px}
  .la-glance .cbandwrap .cmast-facts .mfc:first-child{padding-left:0}
  .la-glance .cbandwrap .cmast-facts .ck{font-size:11px;letter-spacing:.14em}
  .la-glance .cbandwrap .cmast-facts .cv{font-size:17px}
  .la-glance .cbandwrap .cmast-facts .cv small{font-size:14px}

  /* A day: the map under the words, a little shorter. */
  .la-mapwrap{height:56vh}

  /* Where to stay on a phone: one list, filtered by chips, led by the walk to
     City Gate. The hotels have no photographs (their pages show a map), so
     the number does the work a picture would. Replaces the cards and lists. */
  #laStayM:not([hidden]) ~ #laTop,#laStayM:not([hidden]) ~ #laTop + .mc-prog,
  #laStayM:not([hidden]) ~ .la-sh,#laStayM:not([hidden]) ~ #laNeeds,#laStayM:not([hidden]) ~ #laNeeds + .mc-prog{display:none !important}
  .ms-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut)) 6px;padding:2px var(--gut) 6px}
  .ms-chips::-webkit-scrollbar{display:none}
  .ms-chip{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;
    font:600 13.5px/1 'Inter',sans-serif;color:var(--ink);cursor:pointer}
  .ms-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .ms-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .ms-list{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line-strong)}
  .ms-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px dashed var(--dash);color:inherit;text-decoration:none}
  .ms-min b{display:block;font:900 32px/.9 'Archivo',sans-serif}
  .ms-min span{display:block;font:600 11px/1.25 'Inter',sans-serif;color:var(--muted);margin-top:5px}
  .ms-b h3{font:800 16px/1.15 'Archivo',sans-serif;text-transform:uppercase;margin:0}
  .ms-f{font:600 12px/1.3 'Inter',sans-serif;color:var(--gold);margin-top:5px}
  .ms-b p{font:400 14.5px/1.5 'Lora',serif;color:var(--ink-2);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ms-row:active .ms-b h3{text-decoration:underline}
  .ms-map{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
    font:600 13px 'Inter',sans-serif;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .ms-map:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

  /* The harbour photograph carries its caption on the picture, centred in white. */
  .la-break:not(.la-quote):not(.la-title) figcaption{position:absolute;left:0;right:0;bottom:0;max-width:none;margin:0;
    padding:56px var(--gut) 18px;text-align:center;color:#fff;font-size:15px;line-height:1.4;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55))}

  /* Tap targets. */
  .cbriefmore{padding:14px 0 4px;font-size:11px}
  .band .faqmore{min-height:44px;align-items:center;padding:0 10px}
  .la-showmap{display:inline-flex;align-items:center;min-height:44px}
  .la-crumbs a{display:inline-block;padding:12px 2px;margin:-12px 0}
  .la-dpill{padding:0 18px;font-size:13.5px}
}
@media(max-width:600px){.la-track{align-items:start}}
/* On the smallest phones the airport pill wraps instead of widening the page. */
@media(max-width:420px){.la-airpill{left:14px;right:14px;transform:none;width:fit-content;margin:0 auto;white-space:normal;text-align:left}}
/* TYPE SCALE (2026-11-07). One size per role, so the page stops jumping:
   display  the hero name, the Things to do photo title, the noon gun line (left alone, they are the loud moments)
   section  every section head, 28px on a phone to 40px on a desk
   title    a card, list or sub-head title, 16px uppercase
   photo    a title set on a photograph, 20px to 30px
   figure   the big number in a rail (calendar date, walk to City Gate) */
.la-h,#good-for .la-h,.dec-h,.cal-h,body.townpage .la-glance .cwhy h2,.xmore .more-head h3{
  font:800 clamp(28px,3.4vw,40px)/1.02 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.la-break.la-title .la-h{font-size:clamp(40px,7vw,104px);line-height:.92}
.dec-col h3,.la-sh h3,.la-need h3,.cal-b h3,.la-way h3,.ms-b h3,.la-slide h4,.la-slide.txt h4{
  font:800 16px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.la-m b,.la-ht b,.la-ht:first-child b,.xtile h4,.xtile:nth-child(1) h4{
  font:800 clamp(20px,2.2vw,30px)/1.02 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.cal-d b,.cal-d span,.ms-min b{font-family:'Archivo',sans-serif;font-size:26px;line-height:.95}
.cal-d b,.ms-min b{font-weight:900}
/* A hotel from a neighbouring town: the chip names the town, not a walk. */
.ms-min.away b{font-size:17px;line-height:1.1;overflow-wrap:anywhere}
.ms-min.away span{margin:0 0 4px}
@media(max-width:760px){.xmore .xtile h4{font-size:20px}}
/* Carousel paging in the site's chevron style (as the facts band): bare
   strokes, no filled squares. */
.la-nav{width:44px;height:44px;background:none;border:0;color:var(--ink)}
.la-nav svg{width:20px;height:20px}
.la-nav:hover:not(:disabled){opacity:.55}
.la-ctl{gap:2px}
/* Section bar: centred when the links fit, scrolling from the first link when they do not. */
.secnav li:first-child{margin-left:auto}
.secnav li:last-child{margin-right:auto}
@media(max-width:760px){
  /* The Things to do title photograph at about half its old height. */
  /* One height for every full-width photograph on a phone: the title photo,
     the harbour and the noon gun. */
  .la-break.la-title img,.la-title .la-title-t{height:384px}
  .la-break.la-quote img{height:384px;aspect-ratio:auto}
  /* The harbour photograph at the same height, framed on the boats and the walls. */
  .la-break:not(.la-quote):not(.la-title) img{height:384px;object-position:50% 62%}
  .la-title .la-h{font-size:34px}
  .la-title-t p{font-size:16px;line-height:1.5;margin-top:12px}
}
.cal-row{grid-template-columns:76px 1fr}
.dec-tabs{display:none}
/* Phone, Things to do: a photo card's two halves were equal rows, so the words
   got a photo-sized box and left a gap; the photo now keeps its own shape.
   A pair of text cards splits into two cards so it no longer sets the row height. */
@media(max-width:980px){
  /* Every card in a row the same height as you swipe: the rank line is held
     open when a place has none, the words stop at four lines, and the button
     sits on the card's foot, so the buttons line up card to card. */
  .la-track{align-items:stretch}
  .la-col.pair.photo{grid-template-rows:auto 1fr}
  .la-slide .meta{line-height:1.35;min-height:2.7em}
  .la-slide p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:18px}
  .la-slide .go,.la-slide p + .go{margin-top:auto}
  .la-col.pair.photo .ph{height:auto;min-height:0;aspect-ratio:3/2}
  .la-col.pair:not(.photo){display:contents}
}