/* Aggregator templates: search header, experience cards, attraction tiles,
   listing with filters, activity page with price comparison, link farm.
   Depends on tokens.css + base.css. No hex here, tokens only.
   Since 6 Oct 2026 cards are a photo and text on the page, divided by hairlines, not white boxes. */

/* ---------- header with search ---------- */
.bar.search-bar{grid-template-columns:auto 1fr auto;gap:22px}
.bar.search-bar .lock{justify-self:start}
.qs{display:flex;align-items:center;background:var(--white);border:1px solid var(--moss);border-radius:var(--r-pill);padding:4px 4px 4px 18px;max-width:640px;width:100%;justify-self:center;color:var(--ink);transition:border-color var(--dur-fast) var(--ease-hover)}
.qs:focus-within{border-color:var(--forest)}
.qs input{flex:1;min-width:0;border:0;background:transparent;font:400 var(--fs-md) var(--sans);color:var(--ink);padding:8px 0;outline:none}
.qs input::placeholder{color:var(--pewter)}
.qs .sep{width:1px;height:22px;background:var(--moss);margin:0 12px}
.qs select{border:0;background:transparent;font:400 var(--fs-sm) var(--sans);color:var(--graphite);padding:8px 0;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.qs button{margin-left:8px}
.qs .pill{padding:10px 20px}
.navr .save{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--graphite)}
.navr .save:hover{color:var(--forest)}
@media(max-width:900px){.bar.search-bar{grid-template-columns:auto 1fr auto;gap:12px}.qs{padding-left:14px;min-width:0}.qs .sep,.qs select{display:none}.qs .pill{padding:9px 14px}.navr .save{display:none}}
@media(max-width:640px){.bar.search-bar{gap:8px}.bar.search-bar .lock .wm{display:none}.bar.search-bar .navr .pill{display:none}.qs{padding:3px 3px 3px 12px}.qs input{font-size:var(--fs-sm);padding:7px 0}.qs .pill{padding:8px 12px;font-size:var(--fs-sm)}}

/* ---------- section head with a right-hand link ---------- */
.sec{padding:56px 0}
.sec.tight{padding-top:0}
.sec .head{margin-bottom:26px;align-items:end}
.sec .head h2{font-size:var(--fs-h2)}
.sec .head .sub{font-size:var(--fs-md);color:var(--graphite);margin-top:10px;max-width:64ch;line-height:var(--lh-body)}
.more{font:600 var(--fs-sm) var(--sans);color:var(--forest);text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:5px;white-space:nowrap;transition:text-decoration-color var(--dur-fast) var(--ease-hover)}
.more:hover{text-decoration-color:var(--forest)}

/* ---------- home hero: the copy and the search, beside an arch with the video in it ---------- */
/* After the 6 Oct reference page: a two-column hero whose picture sits in an arch-shaped frame.
   Here the arch is the brand's own, with a keystone at the top and a sill beneath it. */
/* The Concierge's hero: full width over the Vernazza loop, as the Table's is over Alkmaar (since 8 Oct 2026) */
.hero-band{position:relative;overflow:hidden;background:var(--navy);color:var(--white);padding:76px 0 84px;min-height:clamp(560px,80vh,760px);display:flex;align-items:center}
.hero-band .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-band .veil{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--navy) 86%,transparent) 0%,color-mix(in srgb,var(--navy) 58%,transparent) 50%,color-mix(in srgb,var(--navy) 12%,transparent) 100%),linear-gradient(to top,color-mix(in srgb,var(--navy) 45%,transparent),transparent 40%)}
.hero-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:var(--bone);-webkit-mask:var(--orn-frieze) repeat-x left bottom/24px 16px;mask:var(--orn-frieze) repeat-x left bottom/24px 16px}
.hero-band .wrap{position:relative;width:100%}
.hero-copy{max-width:660px}
.hero-copy .eyebrow{color:var(--gold-2)}
.hero-copy h1{font-size:var(--fs-h1);line-height:var(--lh-tight);max-width:16ch;margin-top:16px;color:var(--white)}
.hero-copy .lede{font-size:var(--fs-md);max-width:50ch;margin-top:18px;color:rgba(255,255,255,.9)}
.hero-band .proof{color:rgba(255,255,255,.82)}
.hero-band .proof a{color:var(--white);text-decoration-color:var(--gold-2)}
.hero-band .credit{position:absolute;right:16px;bottom:24px;margin:0;font-size:var(--fs-xs);letter-spacing:normal;color:rgba(255,255,255,.75)}
@media(max-width:700px){.hero-band{padding:44px 0 60px}.hero-band .veil{background:linear-gradient(to top,color-mix(in srgb,var(--navy) 90%,transparent) 20%,color-mix(in srgb,var(--navy) 55%,transparent) 75%,color-mix(in srgb,var(--navy) 35%,transparent))}.hero-band .credit{left:16px;right:auto}}
.proof{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--pewter)}
.proof .faces{display:flex;flex:none}
.proof .faces img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--white);margin-left:-10px;background:var(--stone)}
.proof .faces img:first-child{margin-left:0}
.proof a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:4px}

/* the search panel: a form, so it keeps a frame (and the only soft shadow on the page besides the arch) */
.search-card{position:relative;z-index:3;margin-top:28px;background:var(--white);border:1px solid var(--moss);border-radius:var(--r-panel);padding:16px 20px 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;box-shadow:0 26px 50px -34px var(--glow)}
.search-card .f label{display:block;font-size:var(--t-caption);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);font-weight:600;margin-bottom:6px}
.search-card .f input,.search-card .f select{width:100%;font:400 var(--fs-md) var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--moss);border-radius:var(--r-input);padding:12px 14px;appearance:none;-webkit-appearance:none}
.search-card .f input:focus,.search-card .f select:focus{border-color:var(--forest);outline:none}
.search-card .f.wide{grid-column:1/-1}
.search-card .pill{padding:14px 24px;white-space:nowrap}
.search-card .hint{grid-column:1/-1;font-size:var(--fs-sm);color:var(--pewter);display:flex;gap:6px 14px;flex-wrap:wrap}
.search-card .hint a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:3px}
.search-card .tabs{grid-column:1/-1;display:flex;gap:4px;border-bottom:1px solid var(--moss);margin:-4px 0 4px}
.search-card .tabs button{font:600 var(--fs-sm) var(--sans);padding:10px 14px 12px;border:0;background:transparent;color:var(--pewter);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px}
.search-card .tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--forest)}
.search-card .tabs button svg{flex:none}
.search-card [hidden]{display:none!important}
.search-card .panel{display:contents}
@media(max-width:560px){.search-card{grid-template-columns:1fr;padding:14px 16px 16px}}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;font:500 var(--fs-sm) var(--sans);padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--moss);background:var(--white);color:var(--ink);white-space:nowrap}
.chip:hover{border-color:var(--forest);color:var(--forest)}
.chip.on{background:var(--forest);color:var(--white);border-color:var(--forest)}
.chip.ghost{background:transparent}
.chiprow{position:sticky;top:66px;z-index:30;background:var(--bone);border-bottom:1px solid var(--moss);padding:10px 0}

/* ---------- destination cards ---------- */
.dests{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dest{position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:20px;color:var(--white)}
.dest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-hover)}
.dest:hover img{transform:scale(1.03)}
.dest .veil{position:absolute;inset:0;background:linear-gradient(to top,var(--veil-end),rgba(0,0,0,0) 58%)}
.dest .nm{font:500 var(--fs-2xl) var(--serif);letter-spacing:var(--track-serif);position:relative;line-height:var(--lh-tight)}
.dest .n{font-size:var(--fs-sm);position:relative;margin-top:6px;opacity:.92}
.dest .tag{position:relative;margin-bottom:10px;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--navy);border-radius:3px;padding:4px 8px}
@media(max-width:900px){.dests{grid-template-columns:repeat(2,1fr)}}

/* ---------- attraction tiles ---------- */
.attrs{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.attr{color:inherit;display:flex;flex-direction:column}
.attr figure{margin:0;aspect-ratio:1/1;background:var(--stone);border-radius:var(--r-img);overflow:hidden}
.attr figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-hover)}
.attr:hover figure img{transform:scale(1.03)}
.attr .body{padding:12px 0 0}
.attr h3{font:600 var(--fs-md)/var(--lh-snug) var(--sans);letter-spacing:0;color:var(--ink)}
.attr .n{font-size:var(--fs-sm);color:var(--pewter);margin-top:4px}
.attr .from{font-size:var(--fs-sm);color:var(--ink);margin-top:6px}
.attr .from b{font-weight:600}
@media(max-width:1000px){.attrs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.attrs{grid-template-columns:repeat(2,1fr)}}

/* ---------- experience cards (the aggregator unit): a photo, then the facts on the page ---------- */
.exps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 22px}
.exp{color:inherit;display:flex;flex-direction:column;position:relative}
.exp figure{margin:0;aspect-ratio:4/3;background:var(--stone);position:relative;overflow:hidden;border-radius:var(--r-img)}
.exp figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-hover)}
.exp:hover figure img{transform:scale(1.03)}
.exp:hover h3{color:var(--forest)}
.badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;border-radius:3px;padding:5px 8px;background:var(--white);color:var(--navy)}
.badge.chosen{background:var(--navy);color:var(--white)}
.badge.chosen::before{content:"";width:9px;height:10px;background:var(--gold-2);-webkit-mask:var(--orn-arch) no-repeat center/contain;mask:var(--orn-arch) no-repeat center/contain}
.badge.hot{background:var(--terracotta);color:var(--ink)}
.exp .body{padding:14px 0 0;display:flex;flex-direction:column;flex:1;gap:6px}
.exp .cat{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);font-weight:600}
.exp h3{font:600 var(--fs-md)/var(--lh-snug) var(--sans);letter-spacing:0;color:var(--ink);transition:color var(--dur-fast) var(--ease-hover);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.exp .meta{font-size:var(--fs-sm);color:var(--graphite)}
.exp .note{font-size:var(--fs-sm);color:var(--graphite);line-height:var(--lh-body);border-left:2px solid var(--brass);padding-left:10px;margin-top:4px}
.exp .rate{font-size:var(--fs-sm);color:var(--graphite);display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px}
.exp .rate b{font-weight:600;color:var(--ink)}
.exp .rate .src{color:var(--pewter)}
.exp .price{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--moss);padding-top:10px;margin-top:4px}
.exp .price .from{font-size:var(--fs-sm);color:var(--pewter)}
.exp .price .from b{font:600 var(--fs-lg) var(--sans);color:var(--ink);margin-left:4px}
.exp .price .was{text-decoration:line-through;color:var(--pewter);margin-left:6px;font-size:var(--fs-sm)}
.exp .price .sites{font:600 var(--fs-xs) var(--sans);color:var(--forest);background:var(--sky-1);border-radius:3px;padding:4px 8px;white-space:nowrap}
.star{width:13px;height:13px;fill:var(--brass);flex:none}
@media(max-width:1000px){.exps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.exps{grid-template-columns:1fr}}

/* horizontal scroll variant for rows that hold more than a grid can */
.exps.row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:22px;padding-bottom:8px;scrollbar-width:thin}
.exps.row .exp{flex:0 0 280px;scroll-snap-align:start}

/* ---------- category grid: a ruled list, not tiles ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.cats .cat-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 2px;border-top:1px solid var(--moss);border-radius:0;background:none;color:inherit}
.cat-tile b{font:600 var(--fs-md) var(--sans);display:block;color:var(--ink)}
.cat-tile span{font-size:var(--fs-sm);color:var(--pewter)}
.cat-tile .arrow{font:400 var(--fs-xl) var(--serif);color:var(--forest);transition:transform var(--dur-med) var(--ease-hover)}
.cat-tile:hover .arrow{transform:translateX(4px)}
.cat-tile:hover b{color:var(--forest)}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr)}
.step{padding:4px 28px;border-left:1px solid var(--moss)}
.step:first-child{border-left:0;padding-left:0}
.step .k{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step .k svg{flex:none}
.step .k b{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter)}
.step h3{font-size:var(--fs-xl)}
.step p{font-size:var(--fs-sm);color:var(--graphite);line-height:var(--lh-body);margin-top:8px}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:24px}.step{border-left:0;padding:20px 0 0;border-top:1px solid var(--moss)}}

/* ---------- partners strip ---------- */
.partners{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font:500 var(--fs-sm) var(--sans);color:var(--pewter);margin-top:18px}
.partners span{display:inline-flex;align-items:center;gap:8px}
.partners i{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block}

/* ---------- city page: title block + photo collage ---------- */
.city-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding:22px 0 30px}
.city-top h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
.city-top .count{font-size:var(--fs-md);color:var(--graphite);margin-top:14px}
.city-top .count b{font-weight:600;color:var(--ink)}
.city-top .pov{font-size:var(--fs-md);color:var(--graphite);line-height:var(--lh-body);max-width:52ch;margin-top:14px}
.collage{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:3/2}
.collage figure{margin:0;background:var(--stone);border-radius:var(--r-img);overflow:hidden}
.collage figure:first-child{grid-row:1/3}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.city-top{grid-template-columns:1fr}.collage{order:-1}}

/* ---------- listing page: filter rail + result rows ---------- */
.listing{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start}
.rail{position:sticky;top:82px;display:flex;flex-direction:column}
.rail details{border-bottom:1px solid var(--moss)}
.rail details:first-child{border-top:1px solid var(--moss)}
.rail summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font:600 var(--fs-sm) var(--sans);color:var(--navy);padding:14px 0}
.rail summary::-webkit-details-marker{display:none}
.rail summary::after{content:"+";font:400 var(--fs-xl) var(--sans);color:var(--pewter)}
.rail details[open] summary::after{content:"–"}
.rail .opts{display:flex;flex-direction:column;gap:9px;padding:0 0 16px}
.rail label{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--graphite);cursor:pointer}
.rail label span.n{margin-left:auto;font-size:var(--fs-xs);color:var(--pewter)}
.rail input[type=checkbox]{width:17px;height:17px;accent-color:var(--forest);flex:none}
.rail .range{display:flex;gap:8px;padding-bottom:16px}
.rail .range input{width:100%;font:400 var(--fs-sm) var(--sans);border:1px solid var(--moss);border-radius:var(--r-input);padding:9px 12px}
.rail .clear{font-size:var(--fs-sm);color:var(--forest);text-decoration:underline;text-underline-offset:3px;padding:12px 0}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.results-head .n{font-size:var(--fs-md);color:var(--graphite)}
.results-head .n b{font-weight:600;color:var(--ink)}
.sort{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--graphite)}
.sort select{font:500 var(--fs-sm) var(--sans);border:1px solid var(--moss);border-radius:var(--r-pill);padding:8px 34px 8px 14px;background:var(--white);color:var(--ink);appearance:none;-webkit-appearance:none}
.rank-note{font-size:var(--fs-sm);color:var(--graphite);background:var(--sky-1);border-left:3px solid var(--forest);padding:12px 16px;margin-bottom:8px;line-height:var(--lh-body)}
.rows{display:flex;flex-direction:column}
.rowcard{display:grid;grid-template-columns:230px 1fr auto;gap:22px;padding:22px 0;border-bottom:1px solid var(--moss);color:inherit}
.rowcard figure{margin:0;position:relative;background:var(--stone);min-height:170px;border-radius:var(--r-img);overflow:hidden}
.rowcard figure img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform var(--dur-slow) var(--ease-hover)}
.rowcard:hover figure img{transform:scale(1.03)}
.rowcard:hover h3{color:var(--forest)}
.rowcard .body{display:flex;flex-direction:column;gap:6px}
.rowcard .cat{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);font-weight:600}
.rowcard h3{font:600 var(--fs-md)/var(--lh-snug) var(--sans);letter-spacing:0;color:var(--ink);transition:color var(--dur-fast) var(--ease-hover)}
.rowcard .meta{font-size:var(--fs-sm);color:var(--graphite)}
.rowcard .note{font-size:var(--fs-sm);color:var(--graphite);line-height:var(--lh-body);border-left:2px solid var(--brass);padding-left:10px;margin-top:2px}
.rowcard .rate{font-size:var(--fs-sm);color:var(--graphite);display:block;line-height:var(--lh-body);margin-top:auto;padding-top:6px}
.rowcard .rate .star{vertical-align:-2px;margin-right:4px}
.rowcard .rate b{font-weight:600;color:var(--ink)}
.rowcard .side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;text-align:right;min-width:150px}
.rowcard .side .from{font-size:var(--fs-sm);color:var(--pewter)}
.rowcard .side .from b{display:block;font:600 var(--fs-xl) var(--sans);color:var(--ink)}
.rowcard .side .was{text-decoration:line-through;font-size:var(--fs-sm);color:var(--pewter)}
.rowcard .side .sites{font-size:var(--fs-sm);color:var(--forest);font-weight:600}
.rowcard .side .pill{padding:10px 18px;font-size:var(--fs-sm)}
@media(max-width:1000px){.listing{grid-template-columns:1fr}.rail{position:static;flex-direction:row;flex-wrap:wrap;gap:0 20px}.rail details{flex:1 1 200px}.rail details:first-child{border-top:0}}
@media(max-width:700px){.rowcard{grid-template-columns:1fr;gap:14px}.rowcard figure{aspect-ratio:16/9;min-height:0}.rowcard .side{align-items:center;text-align:left;flex-direction:row}}
.pager{display:flex;justify-content:center;gap:6px;margin-top:28px}
.pager a{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);border:1px solid var(--moss);background:var(--white);font-size:var(--fs-sm);padding:0 12px}
.pager a:hover{border-color:var(--forest)}
.pager a.on{background:var(--forest);color:var(--white);border-color:var(--forest)}

/* ---------- activity page ---------- */
.act-title{padding:18px 0 20px}
.act-title .badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.act-title .badges .badge{position:static}
.act-title h1{font-size:var(--fs-h2);line-height:var(--lh-tight);max-width:26ch}
.act-title .line{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:var(--fs-sm);color:var(--graphite)}
.act-title .line b{font-weight:600;color:var(--ink)}
.act-title .line .src{color:var(--pewter)}
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:16/8}
.gallery figure{margin:0;background:var(--stone);position:relative;border-radius:var(--r-img);overflow:hidden}
.gallery figure:first-child{grid-row:1/3}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.gallery .count{position:absolute;right:12px;bottom:12px;font:600 var(--fs-xs) var(--sans);background:var(--white);color:var(--navy);border-radius:3px;padding:5px 9px}
@media(max-width:700px){.gallery{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.gallery figure{aspect-ratio:16/10}.gallery figure:first-child{grid-row:auto}.gallery figure:nth-child(3){display:none}}
/* the facts, as a ruled row */
.facts{display:grid;grid-template-columns:repeat(5,1fr);margin-top:24px;border-top:1px solid var(--moss);border-bottom:1px solid var(--moss)}
.factbox{padding:14px 16px;border-left:1px solid var(--moss)}
.factbox:first-child{border-left:0;padding-left:0}
.factbox b{display:block;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);margin-bottom:5px}
.factbox span{font-size:var(--fs-sm);color:var(--ink)}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}.factbox{border-left:0;padding-left:0;border-top:1px solid var(--moss)}.factbox:nth-child(-n+2){border-top:0}}
.act{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start;margin-top:36px}
.act>*{min-width:0}
.act .main>section{padding:28px 0;border-top:1px solid var(--moss)}
.act .main>section:first-child{border-top:0;padding-top:0}
.act .main h2{font-size:var(--fs-2xl);margin-bottom:12px}
.act .main p{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite);max-width:62ch}
.act .main p+p{margin-top:12px}
.act .main ul.plain{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-md);color:var(--graphite)}
.act .main ul.plain li{position:relative;padding-left:18px}
.act .main ul.plain li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--brass)}
.act .main ul.plain.no li::before{background:var(--moss)}
/* why we chose it: a gold rule down the side, not a box */
.ourpick{border-left:3px solid var(--brass);padding:4px 0 4px 22px}
.ourpick .who{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest)}
.ourpick p{margin-top:8px}
.ourpick .by{margin-top:12px;font-size:var(--fs-sm);color:var(--pewter)}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.incl h3{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);margin-bottom:10px}
@media(max-width:600px){.incl{grid-template-columns:1fr}}
.revsum{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
.revsum .big{font:500 var(--fs-h2)/var(--lh-tight) var(--serif);color:var(--navy)}
.revsum .big small{display:block;font:400 var(--fs-sm) var(--sans);color:var(--pewter);margin-top:6px}
.bars{display:flex;flex-direction:column;gap:8px}
.bars div{display:grid;grid-template-columns:130px 1fr 40px;gap:12px;align-items:center;font-size:var(--fs-sm);color:var(--graphite)}
.bars i{height:6px;border-radius:3px;background:var(--sky-1);display:block;position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--forest);border-radius:3px}
.bars b{font-weight:600;color:var(--ink);text-align:right}
@media(max-width:600px){.revsum{grid-template-columns:1fr}.bars div{grid-template-columns:100px 1fr 36px}}
.quote{border-left:2px solid var(--brass);padding:4px 0 4px 16px;margin-top:14px}
.quote p{font-size:var(--fs-md);color:var(--ink)}
.quote .who{font-size:var(--fs-sm);color:var(--pewter);margin-top:6px}

/* compare panel, the middle-man moment: a booking widget, so it keeps its frame, gold along the top */
.compare{position:sticky;top:82px;background:var(--white);border:1px solid var(--moss);border-radius:var(--r-panel);padding:22px 22px 20px;box-shadow:0 26px 50px -38px var(--glow)}
.compare::before{content:"";position:absolute;top:-1px;left:22px;right:22px;height:3px;background:var(--brass);border-radius:0 0 3px 3px}
.compare .h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.compare .h b{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--navy)}
.compare .h span{font-size:var(--fs-sm);color:var(--pewter)}
.compare ul{list-style:none;margin-top:12px;display:flex;flex-direction:column}
.compare li{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:13px 0;border-top:1px solid var(--moss)}
.compare li:first-child{border-top:0}
.compare li .site{font:600 var(--fs-md) var(--sans);grid-column:1;grid-row:1}
.compare li .terms{font-size:var(--fs-sm);color:var(--pewter);grid-column:1;grid-row:2}
.compare li .p{font:600 var(--fs-xl) var(--sans);text-align:right;grid-column:2;grid-row:1/3}
.compare li .p small{display:block;font:400 var(--fs-xs) var(--sans);color:var(--pewter);text-decoration:line-through}
.compare li.best{background:var(--linen);margin:0 -12px;padding:13px 12px;border-radius:var(--r-input);border-top:0}
.compare li.best+li{border-top:0}
.compare li .go{grid-column:1/-1}
.compare li .go .pill{width:100%;padding:12px 18px}
.compare .leadtime{margin-top:14px;padding-top:14px;border-top:1px solid var(--moss);font-size:var(--fs-sm);color:var(--graphite);display:flex;gap:10px;align-items:flex-start}
.compare .leadtime b{color:var(--ink);font-weight:600}
.compare .leadtime svg{flex:none;margin-top:2px}
.compare .fine{margin-top:12px;font-size:var(--fs-xs);color:var(--pewter);line-height:var(--lh-body)}
.compare .fine a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.compare .add{margin-top:12px;display:flex;gap:8px}
.compare .add .pill{flex:1;justify-content:center;padding:11px 14px;font-size:var(--fs-sm)}
/* live partner prices (js/live-prices.js): the live row is tagged, the rest say they aren't linked yet */
.compare [hidden],.sticky-price [hidden]{display:none}
.compare li.live .site::after{content:"Live";margin-left:8px;padding:2px 7px;border-radius:3px;background:var(--sky-2);color:var(--forest);font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;vertical-align:2px}
.compare li.todo .site{color:var(--pewter);font-weight:500}
@media(max-width:1000px){.act{grid-template-columns:1fr}.compare{position:relative;top:0}}

/* sticky mobile price bar on activity pages */
.sticky-price{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy);color:var(--white);padding:10px var(--gutter) max(10px,env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px}
.sticky-price .from{font-size:var(--fs-sm);opacity:.85}
.sticky-price .from b{display:block;font:600 var(--fs-lg) var(--sans);opacity:1}
@media(max-width:1000px){.sticky-price{display:flex}body.has-sticky{padding-bottom:70px}}

/* ---------- link farm footer: light blue ground, its top edge scalloped ---------- */
.farm{background:var(--sky-1);color:var(--graphite);padding:64px 0 0;position:relative;margin-top:14px}
.farm::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px;background:var(--sky-1);-webkit-mask:var(--orn-scallop) repeat-x left bottom/28px 14px;mask:var(--orn-scallop) repeat-x left bottom/28px 14px}
.farm .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.farm h5,.farm .fh{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.farm ul{list-style:none;columns:1}
.farm li{font-size:var(--fs-sm);margin-bottom:8px}
.farm a{transition:color var(--dur-fast) var(--ease-hover)}
.farm a:hover{color:var(--forest);text-decoration:underline;text-underline-offset:4px}
.farm+footer.site{padding-top:40px}
.farm+footer.site .wrap{border-top:1px solid var(--moss);padding-top:22px}
@media(max-width:820px){.farm .cols{grid-template-columns:1fr 1fr}}

/* ---------- stay cards (the aggregator unit for hotels) ---------- */
.exp.stay .cat{display:flex;justify-content:space-between;gap:8px}
.exp.stay .cat .stars{letter-spacing:var(--track-caps);color:var(--brass)}
.exp.stay .meta{line-height:var(--lh-body)}
.exp.stay .meta.area{color:var(--pewter);font-size:var(--fs-sm)}
.exp.stay .rate .score{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 6px;border-radius:5px;background:var(--forest);color:var(--white);font:600 var(--fs-sm) var(--sans)}
.exp.stay .price .from b{font-size:var(--fs-xl)}
.exp.stay .price .from small{font-size:var(--fs-xs);color:var(--pewter);margin-left:3px}
.rowcard.stay .side .from small{font-size:var(--fs-xs);color:var(--pewter)}

/* stays explainer, same-room price table: ruled above and below, not boxed */
.roomtable{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:30px 0;border-top:1px solid var(--moss);border-bottom:1px solid var(--moss)}
.roomtable h3{font-size:var(--fs-xl)}
.roomtable p{font-size:var(--fs-sm);color:var(--graphite);line-height:var(--lh-body);margin-top:8px}
.roomtable table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.roomtable th{text-align:left;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);padding:0 0 10px}
.roomtable td{padding:11px 14px 11px 0;border-top:1px solid var(--moss);color:var(--graphite)}
.roomtable td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.roomtable th:last-child,.roomtable td:last-child{white-space:nowrap;padding-right:0}
.roomtable td:last-child{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.roomtable tr.best td{background:var(--linen)}
.roomtable tr.best td:first-child{border-radius:var(--r-img) 0 0 var(--r-img);padding-left:10px}
.roomtable tr.best td:last-child{border-radius:0 var(--r-img) var(--r-img) 0;padding-right:10px}
.roomtable .cap{font-size:var(--fs-xs);color:var(--pewter);margin-top:10px}
@media(max-width:860px){.roomtable{grid-template-columns:1fr;gap:24px}}

/* neighbourhood picker for stays: a row of arches, the names beneath */
.hoodpick{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.hoodpick a{display:flex;flex-direction:column;color:var(--ink)}
.hoodpick img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-arch);background:var(--stone);transition:transform var(--dur-slow) var(--ease-hover)}
.hoodpick a:hover img{transform:translateY(-3px)}
.hoodpick .veil{display:none}
.hoodpick .nm{font:500 var(--fs-xl) var(--serif);color:var(--navy);margin-top:14px;line-height:var(--lh-tight)}
.hoodpick a:hover .nm{color:var(--forest)}
.hoodpick .n{font-size:var(--fs-sm);color:var(--pewter);margin-top:5px;line-height:var(--lh-body)}
@media(max-width:900px){.hoodpick{grid-template-columns:repeat(2,1fr)}}

/* ---------- destinations, both sites: the ten countries and their cities, as a ruled index ---------- */
.dest-top{padding:22px 0 30px;max-width:820px}
.dest-top h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:14px}
.ctry-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ctry-index a{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-sm) var(--sans);padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--moss);color:var(--navy);background:var(--white);transition:border-color var(--dur-fast) var(--ease-hover),color var(--dur-fast) var(--ease-hover)}
.ctry-index a span{font-size:var(--fs-xs);color:var(--pewter)}
.ctry-index a:hover{border-color:var(--forest);color:var(--forest)}
.countries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;padding:26px 0 80px}
.country{padding:30px 0 22px;scroll-margin-top:90px}
.ctry-head{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--navy)}
.ctry-head .rank{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);color:var(--pewter)}
.ctry-head h2{font-size:var(--fs-2xl)}
.ctry-head .n{margin-left:auto;font-size:var(--fs-sm);color:var(--pewter);white-space:nowrap}
.city-list{list-style:none}
.city-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--moss)}
.city-list .nm{font:500 var(--fs-lg)/var(--lh-snug) var(--serif);color:var(--graphite)}
.city-list li.ready .nm{color:var(--navy)}
.city-list .links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;font-size:var(--fs-sm);text-align:right}
.city-list .links a{color:var(--forest);font-weight:500;text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:4px;white-space:nowrap}
.city-list .links a:hover{text-decoration-color:var(--forest)}
.city-list .soon{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter)}
@media(max-width:860px){.countries{grid-template-columns:1fr}}
@media(max-width:520px){.city-list li:has(.links a){flex-direction:column;gap:4px}.city-list li:has(.links a) .links{justify-content:flex-start;text-align:left}}

/* ---------- the homepages' city grid and country filter, and what to book first (both sites, since 7 Oct 2026) ---------- */
.citygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 20px}
.cc{display:flex;flex-direction:column;color:inherit}
.cc[hidden]{display:none}
.cc img,.cc .nophoto{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);background:var(--stone);transition:transform var(--dur-slow) var(--ease-hover)}
.cc .nophoto{display:grid;place-items:center;font:400 var(--fs-xl) var(--serif);color:var(--navy);background:linear-gradient(180deg,var(--sky-1),var(--sky-2))}
.cc:hover img{transform:translateY(-2px)}
.cc .ctry{font:400 var(--fs-sm)/var(--lh-snug) var(--sans);color:var(--pewter);margin-top:12px}
.cc .nm{font:500 var(--fs-xl)/var(--lh-tight) var(--serif);color:var(--navy);margin-top:4px;transition:color var(--dur-fast) var(--ease-hover)}
.cc:hover .nm{color:var(--forest)}
.cc .line{font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--ink);margin-top:6px}
.cc .line b{font-weight:600;color:var(--forest)}
.cc .for{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--pewter);margin-top:3px}
.booktable-wrap{overflow-x:auto;border-top:1px solid var(--moss);border-bottom:1px solid var(--moss)}
.booktable{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
.booktable th,.booktable td{text-align:left;padding:13px 18px 13px 0;border-top:1px solid var(--moss);vertical-align:top;line-height:var(--lh-body)}
.booktable thead th{border-top:0;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter)}
.booktable tbody th a{font:500 var(--fs-lg) var(--serif);color:var(--navy);text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:4px}
.booktable tbody th span{display:block;font-size:var(--fs-sm);font-weight:400;color:var(--pewter);margin-top:2px}
.booktable td:last-child{color:var(--forest);font-weight:600}
/* The city finder (finder() in gen-pages.py, js/city-finder.js): a framed widget, like the search panel */
.finder{border:1px solid var(--moss);border-radius:14px;padding:16px 18px 12px;margin-bottom:26px;background:var(--white)}
.finder-row{display:grid;grid-template-columns:minmax(200px,2fr) repeat(3,minmax(130px,1fr));gap:10px}
.finder-row label{display:flex;flex-direction:column;gap:4px;min-width:0}
.finder-row .f-sel span{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter)}
.finder input,.finder select{font:400 var(--fs-md) var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--moss);border-radius:10px;padding:10px 12px;min-width:0;width:100%}
.finder .f-search{justify-content:flex-end}
.finder input:focus,.finder select:focus{outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}
.finder-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.finder-tags .lbl{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);margin-right:4px}
.finder-tags button{font:500 var(--fs-sm) var(--sans);padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--moss);background:var(--white);color:var(--navy);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-hover),color var(--dur-fast) var(--ease-hover)}
.finder-tags button:hover{border-color:var(--forest);color:var(--forest)}
.finder-tags button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--white)}
.finder-count{display:flex;gap:14px;align-items:baseline;margin-top:12px;font-size:var(--fs-sm);color:var(--pewter)}
.linkish{font:500 var(--fs-sm) var(--sans);color:var(--forest);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.finder-empty{padding:24px 0;color:var(--graphite)}
.cc[hidden],.city-list li[hidden],.country[hidden]{display:none}
@media(max-width:860px){.finder-row{grid-template-columns:1fr 1fr}.finder .f-search{grid-column:1/-1}}
/* Since 8 Oct 2026 a card shows no price or rating until a partner's own data is connected: it says how far
   ahead to book and links to the site that sells it */
.exp .check{margin-top:auto;padding-top:10px;border-top:1px solid var(--moss);font:600 var(--fs-sm) var(--sans);color:var(--forest)}
.exp:hover .check{text-decoration:underline;text-underline-offset:3px}
.meta.lead{color:var(--graphite)}
.rowcard .side{display:flex;align-items:center;justify-content:flex-end}
.listing.solo{grid-template-columns:1fr}
.search-card .handoff{grid-column:1/-1;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--pewter)}
.search-card .handoff a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.how3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;counter-reset:how}
.how3 li{counter-increment:how;border-top:1px solid var(--navy);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.how3 li::before{content:counter(how,decimal-leading-zero);font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);color:var(--pewter)}
.how3 b{font:500 var(--fs-xl)/var(--lh-tight) var(--serif);color:var(--navy)}
.how3 span{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite)}
@media(max-width:820px){.how3{grid-template-columns:1fr;gap:24px}}
/* a name with no place to break (a long Welsh village, a URL in a note) wraps inside its card instead of spilling into the next (8 Oct 2026) */
.cc,.exp .body,.rowcard .body,.city-list .nm,.booktable th{overflow-wrap:anywhere}
/* a long "more" link wraps rather than running off a narrow phone (10 Oct 2026) */
@media(max-width:560px){.more{white-space:normal}}

/* Homepage additions (14 Oct 2026, from Victor's plan): where to stay by country, six tickets that sell out, closing call to action */
.by-countries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.by-country{border-top:1px solid var(--moss);padding-top:20px}
.by-country h3{font-size:var(--fs-xl);line-height:var(--lh-snug)}
.by-country h3 a{color:var(--navy);text-decoration:none}
.by-country h3 a:hover{color:var(--forest)}
.by-country>p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--graphite);margin-top:8px}
.by-country ul{list-style:none;margin-top:14px}
.by-country li{padding:12px 0;border-top:1px solid var(--moss)}
.by-country .bc-city{display:block;font:600 var(--fs-md)/var(--lh-snug) var(--sans)}
.by-country .bc-city{color:var(--forest)}
.by-country li p{font-size:var(--fs-sm);color:var(--pewter);margin-top:3px}
.sell-h{font-size:var(--fs-xl);margin:6px 0 12px}
.sell-outs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-bottom:34px}
.sell-outs a{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-top:1px solid var(--moss);text-decoration:none}
.sell-outs b{font-weight:600;color:var(--ink)}
.sell-outs span{font-size:var(--fs-sm);color:var(--forest)}
.sell-outs a:hover b{color:var(--forest)}
.plan .wrap{text-align:center}
.plan h2{font-size:var(--fs-h2)}
.plan .lede{margin:10px auto 0;max-width:52ch}
.plan-go{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
@media(max-width:900px){.by-countries,.sell-outs{grid-template-columns:1fr}}

/* Homepage city grids: 12 cities until "Show all" or a filter (15 Oct 2026) */
.citygrid.collapsed .cc:not([data-feat]){display:none}
.show-all{text-align:center;margin-top:22px}