/* Template E, "Where to stay in [city]" guides. Depends on tokens.css, base.css,
   catalog.css and city.css (crumbs, subnav, skip, around, months, faq, near, hoods). */

/* top: answer first, photo beside it */
.guide-top{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start;padding:26px 0 0}
.guide-top .kicker{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest);font-weight:600}
.guide-top h1{font-size:var(--fs-h1);line-height:var(--lh-tight);margin-top:12px}
.guide-top .byline{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font-size:var(--fs-sm);color:var(--pewter)}
.guide-top .byline span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--moss);vertical-align:3px;margin-right:16px}
.guide-top .lede{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite);max-width:58ch;margin-top:20px}
/* the guide's photo stands in an arch, like the homepage's video */
.guide-top figure{margin:0;border-radius:var(--r-arch);overflow:hidden;aspect-ratio:4/5;background:var(--stone);outline:1px solid var(--sky-3);outline-offset:6px}
.guide-top figure img{width:100%;height:100%;object-fit:cover}
.guide-top .credit{margin-top:8px}
@media(max-width:900px){.guide-top{grid-template-columns:1fr;gap:24px}.guide-top figure{aspect-ratio:3/2;order:-1;border-radius:var(--r-img);outline:0}}
@media(max-width:560px){.guide-top .byline span+span::before{display:none}}

/* the short answer */
.answer{background:var(--sky-1);border-top:3px solid var(--brass);padding:22px 26px 12px;margin-top:28px;max-width:720px}
.answer h2{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest)}
.answer dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;margin-top:8px}
.answer dt,.answer dd{padding:12px 0;border-top:1px solid var(--moss);font-size:var(--fs-md);line-height:var(--lh-body)}
.answer dt{font-weight:600;color:var(--ink);padding-right:18px}
.answer dd{color:var(--graphite)}
.answer dd a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:4px}
.answer dl>:nth-child(-n+2){border-top:0}
@media(max-width:560px){.answer{padding:20px 18px 8px}.answer dl{grid-template-columns:1fr}.answer dt{padding-bottom:0;border-top:1px solid var(--moss)}.answer dd{border-top:0;padding-top:4px}.answer dl>:nth-child(2){border-top:0}}

.guide-top .method{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--pewter);margin-top:14px;max-width:66ch}

/* compare areas table */
.areas-wrap{overflow-x:auto;border-top:1px solid var(--moss);border-bottom:1px solid var(--moss)}
.areas{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:760px}
.areas th,.areas td{text-align:left;padding:14px 16px 14px 0;border-top:1px solid var(--moss);vertical-align:top;line-height:var(--lh-body)}
.areas thead th{border-top:0;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);white-space:nowrap}
.areas tbody th{font-weight:600;white-space:nowrap;color:var(--navy)}
.areas tbody th a{text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:4px}
.areas td.tier{font-weight:600;letter-spacing:var(--track-caps);white-space:nowrap}
.areas td.num{white-space:nowrap}
.areas-note{font-size:var(--fs-sm);color:var(--pewter);margin-top:12px;max-width:80ch}

/* schematic map, drawn to scale from coordinates */
.map{margin:0;padding:14px 0 0;border-top:1px solid var(--moss)}
.map svg{display:block;width:100%;height:auto}
.map .water{fill:none;stroke:var(--stone);stroke-linecap:round;stroke-linejoin:round}
.map .sea{fill:var(--stone)}
.map .walk{fill:none;stroke:var(--brass);stroke-width:2.5;stroke-dasharray:10 9}
.map .walk-t{font:italic var(--fs-xl) var(--serif);fill:var(--brass)}
.map .water-t{font:italic var(--fs-2xl) var(--serif);fill:var(--pewter);letter-spacing:var(--track-caps)}
.map .lm circle{fill:var(--brass)}
.map .lm text{font:italic var(--fs-xl) var(--serif);fill:var(--graphite)}
.map .hood circle{fill:var(--forest)}
.map .hood .n{font:600 var(--fs-lg) var(--sans);fill:var(--bone)}
.map .hood .nm{font:600 var(--fs-2xl) var(--sans);fill:var(--ink)}
.map .hood:hover circle,.map .hood:focus circle{fill:var(--brass)}
.map .off text{font:500 var(--fs-xl) var(--sans);fill:var(--pewter)}
.map .off path{fill:var(--pewter)}
.map .halo{paint-order:stroke;stroke:var(--white);stroke-width:7px;stroke-linejoin:round}
.map .scale path{stroke:var(--graphite);stroke-width:3;fill:none}
.map .scale text{font:500 var(--fs-lg) var(--sans);fill:var(--graphite)}
.map figcaption{font-size:var(--fs-sm);color:var(--pewter);padding:10px 6px 2px}
@media(max-width:700px){.map{padding:8px}.map .lm:not(.key){display:none}.map .hood .nm{font-size:var(--fs-2xl)}.map .lm.key text{font-size:var(--fs-2xl)}.map .off text{font-size:var(--fs-2xl)}}

/* one neighbourhood (not .area: the stay cards already use that class) */
.district>*,.guide-top>*{min-width:0}   /* let grid columns shrink below an image's natural width */
.district{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:start;padding:56px 0;border-top:1px solid var(--moss);scroll-margin-top:130px}
.hoodlist>.district:first-child{border-top:0;padding-top:24px}
.district .no{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest)}
.district h2{font-size:var(--fs-h2);line-height:var(--lh-tight);margin-top:10px}
.district .copy .verdict{font:italic 400 var(--fs-xl)/var(--lh-body) var(--serif);color:var(--ink);margin-top:12px;max-width:40ch}
.district .copy p{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite);max-width:62ch;margin-top:16px}
.district .fit{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.district .fit div{border-top:1px solid var(--moss);padding:14px 0 0}
.district .fit h3{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter)}
.district .fit ul{list-style:none;margin-top:8px}
.district .fit li{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--graphite);padding:6px 0 6px 20px;position:relative}
.district .fit li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:2px;background:var(--forest)}
.district .fit .no-go li::before{background:var(--brass)}
.district aside{position:sticky;top:130px;display:flex;flex-direction:column;gap:16px}
.district aside figure{margin:0;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/3;background:var(--stone)}
.district aside figure img{width:100%;height:100%;object-fit:cover}
.district aside .tile{border-radius:var(--r-img);aspect-ratio:4/3;display:flex;align-items:flex-end;padding:22px;border-left:0}
.district aside .tile span{font:400 var(--fs-h2)/var(--lh-tight) var(--serif);letter-spacing:var(--track-serif);color:var(--navy)}
.district dl.stats{border-top:1px solid var(--moss);border-bottom:1px solid var(--moss);padding:2px 0;display:grid;grid-template-columns:auto 1fr;font-size:var(--fs-sm)}
.district dl.stats dt,.district dl.stats dd{padding:11px 0;border-top:1px solid var(--moss);line-height:var(--lh-snug)}
.district dl.stats dt{color:var(--pewter);font-weight:500;padding-right:16px}
.district dl.stats dd{color:var(--ink)}
.district dl.stats>:nth-child(-n+2){border-top:0}
.district .stays-here{grid-column:1/-1}
.district .stays-here>h3{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);margin-bottom:14px}
.district .stays-here .exps{grid-template-columns:repeat(3,1fr)}
.district .go{display:inline-flex;margin-top:22px}
@media(max-width:900px){.district{grid-template-columns:1fr;gap:24px;padding:44px 0}.district aside{position:static}.district .stays-here .exps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.district .fit{grid-template-columns:1fr}.district .stays-here .exps{grid-template-columns:1fr}}

/* who should stay where: reuses .hoods tiles, a touch wider */
.picks{grid-template-columns:repeat(3,1fr)}
.picks .hood{min-height:0}
.picks .hood a{text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:4px;font-weight:600;color:var(--ink)}
@media(max-width:1000px){.picks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.picks{grid-template-columns:1fr}}

/* other guides and pages in the cluster */
.cluster{display:flex;flex-wrap:wrap;gap:10px}
.cluster a{background:var(--white);border:1px solid var(--moss);border-radius:var(--r-pill);padding:10px 18px;font:500 var(--fs-sm) var(--sans);color:var(--navy)}
.cluster a:hover{border-color:var(--forest);color:var(--forest)}

/* guide teasers on other pages */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.guide-card{display:flex;flex-direction:column;color:inherit}
.guide-card figure{margin:0;aspect-ratio:16/10;background:var(--stone);overflow:hidden;border-radius:var(--r-img)}
.guide-card figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-hover)}
.guide-card:hover figure img{transform:scale(1.03)}
.guide-card .body{padding:16px 0 0}
.guide-card .eyebrow{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest)}
.guide-card h3{font-size:var(--fs-xl);line-height:var(--lh-tight);margin-top:8px}
.guide-card p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--graphite);margin-top:8px}
@media(max-width:860px){.guides{grid-template-columns:1fr}}

/* ---------- city guides (Concierge) and food guides (Table), built from scripts/cities/ since 6 Oct 2026 ---------- */
.guide-top figure.no-photo{display:grid;place-items:center;background:linear-gradient(180deg,var(--sky-1),var(--sky-2))}
.guide-top figure.no-photo span{font:400 var(--fs-h1)/var(--lh-tight) var(--serif);color:var(--navy)}
.g-areas{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.g-areas li{padding:20px 0 22px;border-top:1px solid var(--moss)}
.g-areas h3{font:500 var(--fs-xl)/var(--lh-tight) var(--serif);color:var(--navy)}
.g-areas .for{font:600 var(--fs-xs)/var(--lh-snug) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest);margin-top:8px}
.g-areas p{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite);margin-top:8px}
.g-todo{list-style:none;counter-reset:t;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.g-todo li{counter-increment:t;position:relative;padding:18px 0 20px 44px;border-top:1px solid var(--moss)}
.g-todo li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:21px;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);color:var(--forest)}
.g-todo h3{font:600 var(--fs-md)/var(--lh-snug) var(--sans);letter-spacing:0;color:var(--ink)}
.g-todo p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--graphite);margin-top:6px}
.g-todo .ahead{display:inline-block;margin-top:10px;font:600 var(--fs-xs)/var(--lh-snug) var(--sans);letter-spacing:var(--track-caps);color:var(--navy);background:var(--sky-1);border-radius:3px;padding:5px 9px}
.g-when{max-width:70ch}
.g-when p{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite)}
.g-when p+p{margin-top:14px}
.g-days{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 32px}
.g-days li{padding:18px 0 20px;border-top:2px solid var(--navy)}
.g-days b{display:block;font:500 var(--fs-xl)/var(--lh-tight) var(--serif);color:var(--navy)}
.g-days p{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite);margin-top:8px}
.g-trips{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px}
.g-trips li{padding:18px 0 20px;border-top:1px solid var(--moss);display:flex;flex-direction:column;gap:6px}
.g-trips b{font:500 var(--fs-xl)/var(--lh-snug) var(--serif);color:var(--navy)}
.g-trips span{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--graphite)}
.g-markets .when{font-size:var(--fs-sm);color:var(--ink)}
.g-markets .checked{font-size:var(--fs-xs);color:var(--pewter)}
.g-markets .checked a,.places .checked a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--sky-3);text-underline-offset:3px}
@media(max-width:760px){.g-areas,.g-todo{grid-template-columns:1fr}}
/* long words (addresses, web addresses) wrap instead of pushing the page sideways on phones */
.tpl-cityguide main,.tpl-foodguide main{overflow-wrap:anywhere}
.around>*,.skip>*,.book>*{min-width:0}
/* each area's hotels on the booking sites (9 Oct 2026) */
.area-hotels{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--moss)}
.area-hotels span{flex-basis:100%;font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter)}
.area-hotels .pill{padding:8px 16px;font-size:var(--fs-sm)}
/* the country pages' city cards (11 Oct 2026): photo, what the city is like, and its pages */
.ccards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 28px;margin-top:24px}
.ccard{min-width:0}
.ccard-pic{display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--stone)}
.ccard-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ccard-pic .nophoto{display:grid;place-items:center;height:100%;font:400 var(--fs-xl) var(--serif);color:var(--navy)}
.ccard h3{font:400 var(--fs-xl)/var(--lh-tight) var(--serif);color:var(--navy);margin-top:14px}
.ccard h3 a:hover,.ccard h3 a:focus{color:var(--forest)}
.ccard p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--graphite);margin-top:6px}
.ccard .cc-line b{font-weight:600;color:var(--navy);margin-right:4px}
.ccard-links{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:10px;margin-top:10px;border-top:1px solid var(--moss)}
.ccard-links a{font-weight:500;color:var(--forest);overflow-wrap:anywhere}
.dishes .di .from{font:600 var(--fs-xs)/var(--lh-snug) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest);margin-top:8px}
/* an area without a photo (12 Oct 2026, UX check: the plain tile looked broken): a light blue panel with the
   brand's arch drawn large behind the name */
.district aside .tile{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--sky-1),var(--sky-2));border:1px solid var(--sky-3)}
.district aside .tile::before{content:"";position:absolute;right:-6%;top:10%;width:58%;height:110%;background:var(--sky-3);opacity:.45;
  -webkit-mask:var(--orn-arch) center/contain no-repeat;mask:var(--orn-arch) center/contain no-repeat}
.district aside .tile span{position:relative}
/* full-width guide headers (12 Oct 2026): the photo across the page, the title over it, the intro below */
.g-hero{position:relative;overflow:hidden;min-height:clamp(340px,52vh,560px);display:flex;align-items:flex-end;background:linear-gradient(160deg,var(--navy),var(--forest))}
.g-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.g-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,43,76,.15) 0%,rgba(15,43,76,.25) 45%,rgba(15,43,76,.78) 100%)}
.g-hero-in{position:relative;padding-top:48px;padding-bottom:40px;color:#fff;width:100%}
.g-hero .crumbs,.g-hero .crumbs a,.g-hero .crumbs span{color:rgba(255,255,255,.88)}
.g-hero .crumbs a{text-decoration-color:rgba(255,255,255,.5)}
.g-hero .kicker{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-top:18px}
.g-hero h1{font-size:var(--fs-h1);line-height:var(--lh-tight);color:#fff;margin-top:10px;max-width:22ch;text-shadow:0 1px 18px rgba(15,43,76,.35)}
.g-hero .byline{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.g-hero .byline span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6);vertical-align:3px;margin-right:16px}
.guide-intro{padding-top:28px;max-width:860px}
.guide-intro .lede{font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--graphite);max-width:62ch}
.guide-intro .method{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--pewter);margin-top:14px;max-width:66ch}
@media(max-width:560px){.g-hero{min-height:300px}.g-hero .byline span+span::before{display:none}}

/* Tours and tickets pages (13 Oct 2026): one row per sight or tour, which to pick, how far ahead, where to book */
.tt-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.tt-list li{padding:20px 0 22px;border-top:1px solid var(--moss);display:flex;flex-direction:column;scroll-margin-top:120px}
.tt-list h3{font:600 var(--fs-lg)/var(--lh-snug) var(--sans);letter-spacing:0;color:var(--ink)}
.tt-list p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--graphite);margin-top:8px}
.tt-list .pick b{color:var(--navy);font-weight:600}
.tt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:auto;padding-top:14px}
.tt-foot .ahead{font:600 var(--fs-xs)/var(--lh-snug) var(--sans);letter-spacing:var(--track-caps);color:var(--navy);background:var(--sky-1);border-radius:3px;padding:5px 9px}
.tt-go{display:flex;flex-wrap:wrap;gap:8px}
.tpl-tours .rank-note{margin-top:28px;font-size:var(--fs-sm);color:var(--pewter);max-width:72ch}
.book .more{display:inline-block;margin-top:16px;white-space:normal}
@media(max-width:760px){.tt-list{grid-template-columns:1fr}}

/* Extra pages (14 Oct 2026): itineraries, transfers, day trips, areas and sights */
.it-days{list-style:none}
.it-days>li{padding:26px 0;border-top:1px solid var(--moss)}
.it-days h2{font-size:var(--fs-2xl);scroll-margin-top:120px}
.it-day{display:grid;grid-template-columns:120px 1fr;gap:10px 24px;margin-top:14px}
.it-day dt{font:600 var(--fs-xs)/var(--lh-body) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest);padding-top:3px}
.it-day dd{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--graphite)}
.it-tips{list-style:none;display:grid;gap:10px;max-width:72ch}
.it-tips li{padding-left:22px;position:relative;line-height:var(--lh-body);color:var(--graphite)}
.it-tips li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--sky-3)}
.pros{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.pros h3{font:600 var(--fs-md) var(--sans);color:var(--navy);margin-bottom:8px}
.pros ul{padding-left:18px;line-height:var(--lh-body);color:var(--graphite)}
.more-line{margin-top:16px}
.compare th .sub{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--pewter)}
@media(max-width:700px){.it-day{grid-template-columns:1fr;gap:2px}.it-day dd{margin-bottom:10px}.pros{grid-template-columns:1fr}}