:root {
  --bg: #000000;
  --bg-soft: #0d0d0d;
  --surface: #151515;
  --surface-2: #1f1f1f;
  --heading: #ffffff;
  --ink: #e8e8e8;
  --muted: #c6c6c6;
  --line: #2b2b2b;
  --accent: #ffffff;
  --accent-hover: #ffffff;
  --accent-soft: rgba(255, 255, 255, .14);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { color-scheme: dark; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.15; color: var(--heading); margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, .92); backdrop-filter: blur(10px); border-bottom: .5px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); }
.brand-text { display: flex; align-items: baseline; gap: .3em; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; line-height: 1.05; }
.brand-stack { display: inline-flex; flex-direction: column; }
.brand-stack > * { align-self: flex-start; }
.brand-word { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.brand-text strong, .footer-brand strong { color: var(--accent); }
.brand-text small { display: block; white-space: nowrap; font-family: var(--sans); font-size: .68rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.site-nav { display: flex; gap: 4px; }
.site-nav a { text-decoration: none; color: var(--ink); font-weight: 300; letter-spacing: .01em; padding: 8px 12px; white-space: nowrap; border-radius: 999px; }
.site-nav a:hover { background: var(--bg-soft); }
.site-nav a[aria-current="page"] { background: var(--accent); color: #000; }
.menu-toggle { display: none; font: inherit; font-weight: 400; background: var(--accent); color: #000; border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
@media (max-width: 1400px) {
  .menu-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; background: #000; padding: 12px 16px 18px; border-bottom: .5px solid var(--line); box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 14px; }
}

/* Hero */
.hero { position: relative; min-height: 360px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #000; }
.hero-big { min-height: min(78vh, 680px); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .92) 100%); }
.hero-inner { position: relative; padding: 96px 0 48px; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 4.2rem); max-width: 16ch; }
.hero-lead { font-size: clamp(1.02rem, 1.8vw, 1.22rem); max-width: 60ch; color: rgba(255, 255, 255, .92); margin: 0; }
.eyebrow { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin: 0 0 12px; }
.eyebrow.dark { color: var(--accent); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-block; text-decoration: none; font-weight: 400; padding: 13px 24px; border-radius: 999px; background: var(--accent); color: #000; }
.btn:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: #fff; border: .5px solid rgba(255, 255, 255, .7); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* Home */
.intro { text-align: center; padding: 72px 0 32px; max-width: 760px; }
.intro p { font-size: 1.04rem; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 72px; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--shadow); }
@media (max-width: 520px) { .tile { aspect-ratio: 16 / 10; } }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.05); }
.tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .88) 100%); }
.tile-text { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; }
.tile-kicker { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
.tile-title { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; }
.tile-sub { font-size: .92rem; opacity: .9; }
.band { background: var(--bg-soft); padding: 72px 0; border-block: .5px solid var(--line); }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .picks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .picks { grid-template-columns: 1fr; } }
.pick { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.pick h3 { font-size: 1.35rem; border-bottom: .5px solid var(--line); padding-bottom: 10px; }
.pick ol { list-style: none; margin: 0 0 14px; padding: 0; }
.pick li a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; text-decoration: none; color: var(--ink); border-bottom: .5px solid var(--line); }
.pick li a:hover strong { color: var(--accent); }
.pick small { display: block; color: var(--muted); font-size: .85rem; }
.pick-rank { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #000; display: grid; place-items: center; font-weight: 400; font-size: .85rem; }
.more { font-weight: 400; text-decoration: none; }
.areas { padding: 72px 0; }
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .areas-grid { grid-template-columns: 1fr; } }
.area-card { border: .5px solid var(--line); border-radius: var(--radius); padding: 20px; border-top: .5px solid var(--accent); background: var(--surface); }
.area-card h3 { font-size: 1.15rem; }
.area-card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Lists */
.list-section { padding: 40px 0 24px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 720px) {
  .filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 8px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .filter::-webkit-scrollbar { display: none; }
  .chip, .filter-label { flex: 0 0 auto; white-space: nowrap; }
}
.filter-label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-right: 6px; }
.chip { font: inherit; font-size: .9rem; border: .5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.chip span { color: var(--muted); font-size: .8rem; margin-left: 2px; }
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #000; }
.chip.is-on span { color: #000; }
.filter-status { min-height: 1.6em; font-size: .9rem; margin: 4px 0 16px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.card { display: grid; grid-template-columns: 84px 1fr; background: var(--surface); border: .5px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: 90px; }
.card[hidden] { display: none; }
.card:target { outline: 3px solid var(--accent); }
.rank { background: var(--surface-2); color: var(--accent); font-family: var(--serif); font-weight: 400; font-size: 2rem; display: flex; align-items: flex-start; justify-content: center; padding-top: 22px; }
.card-body { padding: 20px 22px; }
.card h3 { font-size: 1.45rem; margin-bottom: 4px; }
.badge { display: inline-block; margin: 0 0 8px; font-size: .74rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.meta { margin: 0 0 10px; color: var(--muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 6px; }
.meta .area { color: var(--accent); font-weight: 400; }
.meta .price { color: var(--ink); font-weight: 400; letter-spacing: .05em; }
.meta .price.free { color: var(--accent); letter-spacing: 0; }
.desc { margin: 0 0 12px; }
.card-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; font-size: .9rem; }
.addr { color: var(--muted); }
.map { font-weight: 400; text-decoration: none; white-space: nowrap; }
.map:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .card { grid-template-columns: 1fr; }
  .rank { justify-content: flex-start; padding: 10px 22px; font-size: 1.4rem; }
}
.note { font-size: .9rem; margin-top: 24px; }
.others { padding: 32px 0 72px; }
.others-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .others-grid { grid-template-columns: 1fr; } }
.other { display: block; text-decoration: none; background: var(--surface); border: .5px solid var(--line); color: #fff; border-radius: var(--radius); padding: 22px; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }
.other span { display: block; font-family: var(--sans); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
.other:hover { border-color: var(--accent); }

/* About */
.prose { max-width: 760px; padding: 64px 0 80px; }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); }
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.credits { padding-left: 1.2em; font-size: .92rem; color: var(--muted); }
.credits li { margin-bottom: 8px; }

/* Footer */
.site-footer { background: var(--bg-soft); border-top: .5px solid var(--line); color: rgba(255, 255, 255, .85); padding: 56px 0 24px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer .muted { color: rgba(255, 255, 255, .78); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: #fff; margin: 0 0 8px; }
.footer-h { font-family: var(--sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-bottom { border-top: .5px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px; font-size: .85rem; }

/* Card links */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card-links { display: inline-flex; gap: 18px; margin-left: auto; }
.details { font-weight: 400; text-decoration: none; white-space: nowrap; }
.details:hover { text-decoration: underline; }

/* Venue pages */
.venue { padding: 24px 0 72px; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.venue-head { margin-bottom: 24px; }
.venue-rank { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin: 0 0 8px; }
.venue-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 8px; }
.venue-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; color: var(--muted); font-size: 1.05rem; }
.venue-type { color: #fff; font-weight: 400; }
.free { color: var(--accent); font-weight: 400; }
.small { font-size: .9rem; }

.gallery { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); margin-bottom: 40px; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; aspect-ratio: 16 / 9; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 10px; font-size: .78rem; color: rgba(255, 255, 255, .85); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); }
.slide figcaption a { color: #fff; }
.gallery-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.gallery-btn:hover { background: var(--accent); color: #000; }
.gallery-btn.prev { left: 14px; }
.gallery-btn.next { right: 14px; }
.gallery-count { position: absolute; top: 12px; right: 14px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: .8rem; }
@media (max-width: 640px) { .gallery-btn { display: none; } .slide { aspect-ratio: 4 / 3; } }
.gallery-empty { background: linear-gradient(135deg, #111111, #262626); border: .5px solid var(--line); aspect-ratio: 16 / 7; display: grid; place-items: center; text-align: center; color: #fff; }
@media (max-width: 640px) { .gallery-empty { aspect-ratio: auto; padding: 40px 0; } }
.gallery-empty-inner { max-width: 480px; padding: 0 20px; }
.gallery-empty-title { font-family: var(--serif); font-size: 1.8rem; margin: 0 0 8px; }
.gallery-empty p { color: rgba(255, 255, 255, .85); }
.btn-small { padding: 10px 18px; font-size: .92rem; }
.btn-block { display: block; text-align: center; margin-top: 18px; }

.venue-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; margin-bottom: 40px; }
@media (max-width: 860px) { .venue-grid { grid-template-columns: 1fr; gap: 24px; } }
.venue-about p { font-size: 1.02rem; }
.venue-facts { background: var(--surface); border: .5px solid var(--line); border-radius: var(--radius); padding: 24px; }
.venue-facts h2, .venue-about h2, .venue-map h2 { font-size: 1.5rem; }
.venue-facts dl { margin: 0; display: grid; gap: 14px; }
.fact dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 2px; }
.fact dd { margin: 0; font-weight: 400; }
.fact a { font-weight: 400; text-decoration: none; }
.fact a:hover { text-decoration: underline; }
.venue-map iframe { width: 100%; height: 380px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-soft); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 48px; padding-top: 24px; border-top: .5px solid var(--line); }
.pager a { text-decoration: none; font-weight: 400; }
.pager span { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.pager-next { text-align: right; }
.pager-all { padding: 10px 18px; border: .5px solid var(--line); border-radius: 999px; }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } .pager-all { grid-column: 1 / -1; grid-row: 1; text-align: center; } }

/* Hotel booking box */
.booking { background: var(--surface); border: .5px solid var(--line); color: #fff; border-radius: var(--radius); padding: 28px; margin-bottom: 40px; box-shadow: var(--shadow); }
.booking h2 { color: #fff; font-size: 1.5rem; }
.booking-form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: end; }
.booking-form label { display: grid; gap: 6px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: rgba(255, 255, 255, .8); }
.booking-form input, .booking-form select { font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: #fff; background: #000; border: .5px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 46px; width: 100%; box-sizing: border-box; }
.booking-form .btn { min-height: 46px; border: 0; cursor: pointer; }
.booking .muted { color: rgba(255, 255, 255, .8); margin: 14px 0 0; }
.booking-direct { margin: 6px 0 0; }
.booking-direct a { color: #fff; font-weight: 400; }
@media (max-width: 860px) { .booking-form { grid-template-columns: 1fr 1fr; } .booking-form .btn { grid-column: 1 / -1; } }

/* Guest reviews */
.reviews { margin-bottom: 40px; }
.reviews h2 { font-size: 1.5rem; }
.review-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 760px) { .review-links { grid-template-columns: 1fr; } }
.review-link { display: grid; gap: 6px; padding: 20px; background: var(--surface); border: .5px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.review-link:hover { border-color: var(--accent); }
.review-site { font-size: 1.25rem; font-weight: 400; color: #fff; }
.review-cta { color: var(--accent); font-weight: 400; font-size: .95rem; }

/* Only the word ULTIMATE in the logo is bold */
strong, b { font-weight: 400; }

/* Refined finish: glass header and menus, subtle shading on panels */
:root {
  --line: rgba(255, 255, 255, .11);
  --surface: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .018) 100%);
  --surface-2: linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 100%);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 10px 30px rgba(0, 0, 0, .45);
}
body {
  background:
    radial-gradient(1100px 560px at 50% -160px, rgba(255, 255, 255, .06), transparent 70%),
    radial-gradient(900px 700px at 100% 110%, rgba(255, 255, 255, .035), transparent 70%),
    #000;
  background-attachment: fixed;
}

.site-header {
  background: linear-gradient(180deg, rgba(22, 22, 22, .62), rgba(8, 8, 8, .46));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.site-nav { gap: 2px; }
.site-nav a { font-size: .9rem; letter-spacing: .04em; color: rgba(255, 255, 255, .8); padding: 7px 14px; border: .5px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.site-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.site-nav a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: var(--accent); border-color: rgba(255, 255, 255, .4); }
.menu-toggle { background: rgba(255, 255, 255, .06); color: #fff; border: .5px solid rgba(255, 255, 255, .22); font-weight: 300; letter-spacing: .05em; }
@media (max-width: 1400px) {
  .site-nav { background: linear-gradient(180deg, rgba(16, 16, 16, .96), rgba(6, 6, 6, .94)); border-bottom-color: rgba(255, 255, 255, .08); }
  .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, .1); }
}

.btn { background: linear-gradient(180deg, #ffffff, #e6e6e6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(255, 255, 255, .18); transition: box-shadow .2s, transform .2s; }
.btn:hover { background: linear-gradient(180deg, #ffffff, #ffffff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 26px rgba(255, 255, 255, .28); transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .4); box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }

.chip { background: rgba(255, 255, 255, .04); transition: border-color .2s, background .2s; }
.chip.is-on { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: var(--accent); }
.chip.is-on span { color: var(--accent); opacity: .75; }
.pick-rank { background: rgba(255, 255, 255, .12); color: var(--accent); border: .5px solid rgba(255, 255, 255, .45); }

.card, .pick, .area-card, .review-link, .other, .tile { transition: border-color .25s, transform .25s, box-shadow .25s; }
.card:hover, .pick:hover, .review-link:hover, .other:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.tile { border: .5px solid rgba(255, 255, 255, .1); }
.tile:hover { transform: translateY(-2px); }
.pick { border: .5px solid var(--line); }

.band { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)); }
.site-footer { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)); }
.hero-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .9) 100%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%); }

.gallery-btn { background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: .5px solid rgba(255, 255, 255, .25); }
.gallery-count { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(0, 0, 0, .45); border: .5px solid rgba(255, 255, 255, .15); }
.booking-form input, .booking-form select { background: rgba(0, 0, 0, .35); }

/* ULTIMATE: brushed-silver lettering with a slow light sweep */
.brand-word {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .18) 52%, rgba(0, 0, 0, .05) 100%),
    linear-gradient(105deg, #b8b8b8 0%, #d6d6d6 32%, #f3f3f3 46%, #ffffff 50%, #f3f3f3 54%, #d6d6d6 68%, #b8b8b8 100%);
  background-size: 100% 100%, 320% 100%;
  background-position: 0 0, 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ultimate-sheen 9s ease-in-out infinite;
}
@keyframes ultimate-sheen {
  0%, 20% { background-position: 0 0, 100% 0; }
  55%, 100% { background-position: 0 0, 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-word { animation: none; background-position: 0 0, 50% 0; }
}

/* Motion: page transitions, hero entrance, scroll reveals, reading progress */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.site-header { view-transition-name: site-header; }

.hero-img { transform-origin: 50% 40%; animation: hero-drift 16s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes hero-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-inner > *, .venue-head > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-inner > :nth-child(2), .venue-head > :nth-child(2) { animation-delay: .12s; }
.hero-inner > :nth-child(3), .venue-head > :nth-child(3) { animation-delay: .24s; }
.hero-inner > :nth-child(4), .venue-head > :nth-child(4) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0s); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@supports (animation-timeline: scroll()) {
  .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5px; height: 1.5px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--accent)); transform-origin: 0 50%; transform: scaleX(0); animation: read-progress linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes read-progress { to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero-img, .hero-inner > *, .venue-head > * { animation: none; }
}

/* New developments panel (Real Estate page) */
.developments { margin-top: 56px; }
.developments > .muted { max-width: 70ch; }
.dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 960px) { .dev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dev-grid { grid-template-columns: 1fr; } }
.dev { display: flex; flex-direction: column; background: var(--surface); border: .5px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: border-color .25s, transform .25s; }
.dev:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.dev .badge { align-self: flex-start; }
.dev h3 { font-size: 1.3rem; margin: 2px 0 6px; }
.dev .desc { flex: 1; }
.dev .card-foot { margin-top: 4px; }

/* Seven categories: let a lone last tile or pick span the full row */
.tiles > .tile:last-child:nth-child(3n+1), .picks > .pick:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.tiles > .tile:last-child:nth-child(3n+1) { aspect-ratio: 21 / 8; }
@media (max-width: 960px) {
  .tiles > .tile:last-child:nth-child(odd), .picks > .pick:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tiles > .tile:last-child:nth-child(odd) { aspect-ratio: 21 / 9; }
}
@media (max-width: 520px) { .tiles > .tile:last-child { aspect-ratio: 16 / 10; } }

/* Full-width menu bar */
.site-header { top: 0; width: 100%; margin: 0; border: 0; border-bottom: .5px solid rgba(255, 255, 255, .14); border-radius: 0; box-shadow: none; }
.site-header .header-inner { width: min(1240px, 100%); margin: 0 auto; min-height: 96px; padding: 8px 12px 8px 22px; }
@media (max-width: 520px) { .site-header .header-inner { min-height: 76px; } }
.site-header::after { left: 0; right: 0; }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 9px 18px; border-radius: 999px; font-size: .86rem; letter-spacing: .02em; color: #0a0a0a; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #f7f7f7 0%, #c9c9c9 38%, #efefef 55%, #a9a9a9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 6px 18px rgba(0, 0, 0, .45); transition: filter .2s, transform .2s; }
.nav-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 1400px) {
  .nav-cta { display: none; }
  .site-nav { top: calc(100% + 8px); background: #0b0b0b; border: .5px solid rgba(255, 255, 255, .12); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
}

/* Texture and glow: satin sheen, ambient light, mouse glow */
body {
  background:
    radial-gradient(70% 50% at 50% -15%, rgba(255, 255, 255, .035), transparent 63%),
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .07), transparent 32%),
    radial-gradient(circle at 90% 18%, rgba(255, 255, 255, .045), transparent 30%),
    radial-gradient(circle at 50% 108%, rgba(255, 255, 255, .04), transparent 42%),
    #000;
  background-attachment: fixed;
}
/* Depth: raised panels with layered shadows, a lit top edge and a gentle tilt towards the mouse */
:root { --shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .45), 0 24px 50px -14px rgba(0, 0, 0, .75); }
.card, .pick, .area-card, .dev, .other, .review-link, .venue-facts, .booking { box-shadow: var(--shadow); }
.tilt { position: relative; transform-origin: 50% 50%; will-change: transform; transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .25s; }
.tilt.is-tilting { transition: transform .12s ease-out, box-shadow .3s, border-color .25s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .45), 0 36px 64px -18px rgba(0, 0, 0, .8); }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .055), transparent 45%); }
.tilt.is-tilting::after { opacity: 1; }

/* Listing pages: white page with black text (menu and footer stay dark) */
.theme-light {
  --bg: #ffffff; --bg-soft: #f5f6f8;
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  --surface-2: linear-gradient(180deg, #f8f9fb, #eef0f3);
  --heading: #0a0a0a; --ink: #1a1a1a; --muted: #5c6066;
  --line: rgba(0, 0, 0, .12);
  --accent: #000000;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .06), 0 18px 40px -16px rgba(0, 0, 0, .16);
}
body.theme-light { background: #ffffff; color: var(--ink); }
html:has(body.theme-light) { color-scheme: light; }
.theme-light .site-header, .theme-light .site-footer {
  --heading: #ffffff; --ink: #e8e8e8; --muted: #c6c6c6; --line: rgba(255, 255, 255, .11); --accent: #ffffff; color: var(--ink); }
.theme-light .site-header { background: linear-gradient(180deg, rgba(14, 14, 14, .9), rgba(6, 6, 6, .86)); }
.theme-light .site-footer { background: #050505; }
.theme-light .venue-type { color: var(--heading); }
.theme-light .booking, .theme-light .booking h2, .theme-light .review-site, .theme-light .booking-direct a { color: var(--heading); }
.theme-light .booking-form label, .theme-light .booking .muted { color: var(--muted); }
.theme-light .booking-form input, .theme-light .booking-form select { color: var(--ink); background: #fff; border-color: var(--line); }
.theme-light .badge { background: rgba(0, 0, 0, .1); }
.theme-light .tilt::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 0, 0, .07), transparent 45%); }
.theme-light .tilt.is-tilting { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .08), 0 30px 56px -18px rgba(0, 0, 0, .22); }
.theme-light .cursor-glow { display: none; }
.cursor-glow { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s; mix-blend-mode: screen; will-change: transform;
  background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035) 38%, transparent 68%); }
.cursor-glow.on { opacity: 1; }

/* Scrolling ticker under the header photos */
.ticker { overflow: hidden; padding: 15px 0; border-block: .5px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-run { display: flex; }
.ticker-run > * { display: inline-flex; align-items: center; padding-left: 40px; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; text-decoration: none; transition: color .2s; }
.ticker-run > *::after { content: ""; width: 4px; height: 4px; margin-left: 40px; border-radius: 50%; background: var(--accent); opacity: .85; }
.ticker-run > a:hover, .ticker-run > a:focus-visible { color: var(--accent); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* White ticker band with black lettering */
.ticker { background: #ffffff; border-block-color: rgba(0, 0, 0, .08); -webkit-mask-image: none; mask-image: none; }
.ticker-run > * { color: #0a0a0a; }
.ticker-run > *::after { background: #0a0a0a; opacity: .45; }
.ticker-run > a:hover, .ticker-run > a:focus-visible { color: #000000; }

/* Eight categories: six-column grid so a last row of two splits evenly */
@media (min-width: 961px) {
  .tiles, .picks { grid-template-columns: repeat(6, 1fr); }
  .tiles > .tile, .picks > .pick { grid-column: span 2; }
  .tiles > .tile:last-child:nth-child(3n+1), .picks > .pick:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .tiles > .tile:nth-last-child(2):nth-child(3n+1), .tiles > .tile:last-child:nth-child(3n+2),
  .picks > .pick:nth-last-child(2):nth-child(3n+1), .picks > .pick:last-child:nth-child(3n+2) { grid-column: span 3; }
  .tiles > .tile:nth-last-child(2):nth-child(3n+1), .tiles > .tile:last-child:nth-child(3n+2) { aspect-ratio: 16 / 8; }
}

/* Nine categories: slightly tighter menu links so they fit the floating header */
@media (min-width: 1401px) { .site-nav a { padding-left: 7px; padding-right: 7px; } .nav-cta { display: none; } }

/* Advertising banner under the menu: up to three slides that fade in turn */
.ad-slot { position: relative; width: min(1240px, calc(100% - 24px)); margin: 12px auto; }
.ad-label { position: absolute; top: -1px; right: 18px; z-index: 3; transform: translateY(-50%); padding: 0 8px; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); background: #000; }
.ad-frame { position: relative; height: 96px; border-radius: 18px; overflow: hidden; border: .5px solid rgba(255, 255, 255, .14);
  background: radial-gradient(120% 180% at 0% 0%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(115deg, #0e0e0e, #151a20 55%, #0a0a0a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px rgba(0, 0, 0, .5); }
.ad-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 48%, transparent 60%); background-size: 250% 100%; animation: ad-sweep 5s ease-in-out infinite; }
@keyframes ad-sweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.ad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 30px; color: #fff; text-decoration: none;
  opacity: 0; visibility: hidden; animation: ad-cycle 15s linear infinite; }
.ad-frame:hover .ad, .ad-frame:hover::after { animation-play-state: paused; }
@keyframes ad-cycle {
  0% { opacity: 0; visibility: visible; transform: translateY(10px); }
  4%, 30% { opacity: 1; visibility: visible; transform: none; }
  33.3% { opacity: 0; visibility: hidden; transform: translateY(-10px); }
  100% { opacity: 0; visibility: hidden; }
}
.ad-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ad-kicker { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.ad-title { font-size: 1.3rem; color: #fff; line-height: 1.2; }
.ad-text { font-size: .86rem; color: var(--muted); }
.ad-cta { flex: 0 0 auto; padding: 9px 18px; border-radius: 999px; font-size: .84rem; color: #0a0a0a; white-space: nowrap;
  background: linear-gradient(135deg, #f7f7f7 0%, #c9c9c9 38%, #efefef 55%, #a9a9a9 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(0, 0, 0, .45); }
.ad:hover .ad-cta { filter: brightness(1.08); }
.ad-image { padding: 0; }
.ad-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .ad-frame { height: 132px; }
  .ad { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 0 20px; }
  .ad-title { font-size: 1.05rem; }
  .ad-text { display: none; }
  .ad-cta { padding: 7px 14px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ad, .ad-frame::after { animation: none; }
  .ad:first-child { opacity: 1; visibility: visible; }
}

/* Neighbourhood guide: link panel on the list page, section jump links and grouped lists */
.guide-callout { display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 24px; margin: 0 0 28px; border: .5px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color .25s; }
.guide-callout:hover { border-color: rgba(255, 255, 255, .5); }
.guide-callout img { display: block; width: 100%; height: 128px; object-fit: cover; }
.guide-callout-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; min-width: 0; }
.guide-callout-kicker { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.guide-callout-title { font-size: 1.4rem; color: var(--heading); }
.guide-callout-sub { font-size: .86rem; color: var(--muted); }
.guide-callout-cta { margin-right: 24px; padding: 9px 18px; border-radius: 999px; font-size: .84rem; color: #0a0a0a; white-space: nowrap;
  background: linear-gradient(135deg, #f7f7f7 0%, #c9c9c9 38%, #efefef 55%, #a9a9a9 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(0, 0, 0, .45); }
@media (max-width: 720px) {
  .guide-callout { grid-template-columns: 1fr; gap: 0; }
  .guide-callout img { height: 150px; }
  .guide-callout-text { padding: 16px 20px 12px; }
  .guide-callout-cta { justify-self: start; margin: 0 20px 18px; }
}
.guide { padding: 24px 0 72px; }
.guide-nav { position: sticky; top: 84px; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; margin-bottom: 8px; background: rgba(0, 0, 0, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.guide-nav a { padding: 7px 14px; border-radius: 999px; border: .5px solid var(--line); color: var(--ink); text-decoration: none; font-size: .86rem; white-space: nowrap; transition: border-color .2s, color .2s; }
.guide-nav a span { margin-left: 4px; color: var(--muted); }
.guide-nav a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) { .guide-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
.guide-group { padding-top: 32px; scroll-margin-top: 150px; }
.guide-group > h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 4px; }
.guide-group > .muted { margin: 0 0 18px; }
.guide-back { margin-top: 44px; }

/* Featured slot at the top of each list page */
.featured { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin: 0 0 32px; border: .5px solid rgba(255, 255, 255, .38); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .1), transparent 60%), var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.featured-media { position: relative; display: block; min-height: 260px; }
.featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.featured:hover .featured-media img { transform: scale(1.03); }
.featured-label { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 999px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #0a0a0a;
  background: linear-gradient(135deg, #f7f7f7 0%, #c9c9c9 38%, #efefef 55%, #a9a9a9 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.featured-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px 36px; }
.featured-kicker { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.featured-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--heading); line-height: 1.15; }
.featured-title a { color: inherit; text-decoration: none; }
.featured-desc { margin: 0; color: var(--muted); }
.featured-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.featured-cta { align-self: flex-start; margin-top: 6px; padding: 9px 18px; border-radius: 999px; font-size: .84rem; color: #0a0a0a;
  background: linear-gradient(135deg, #f7f7f7 0%, #c9c9c9 38%, #efefef 55%, #a9a9a9 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(0, 0, 0, .45); }
.featured-empty .featured-media img { filter: brightness(.7); }
.featured-empty:hover { border-color: rgba(255, 255, 255, .6); }
@media (max-width: 760px) {
  .featured { grid-template-columns: 1fr; }
  .featured-media { min-height: 190px; }
  .featured-body { padding: 22px 20px 24px; }
}

/* Neighbourhood pages and linked neighbourhood cards on the home page */
a.area-card { display: block; color: inherit; text-decoration: none; transition: border-color .25s; }
a.area-card:hover { border-color: rgba(255, 255, 255, .5); }
.area-more { display: inline-block; margin-top: 12px; font-size: .86rem; color: var(--accent); }
.hood-info { margin-top: 12px; }
.hood-places { margin: 48px 0 8px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.guide-more { margin: 14px 0 0; font-size: .9rem; }
.guide-more a { color: var(--accent); text-decoration: none; }

/* Latest trailers (auto-updating YouTube playlist) and list sections */
.trailers { margin: 0 0 40px; padding: 28px; border: .5px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); box-shadow: var(--shadow); }
.trailers-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 4px; }
.trailers-head .muted { margin: 0 0 18px; }
.trailers-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.trailers-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailers > .small { margin: 12px 0 0; }
.list-group { padding-top: 24px; scroll-margin-top: 150px; }
.list-group > h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 4px; }
.list-group > h2 span { font-size: .55em; color: var(--accent); letter-spacing: .1em; vertical-align: middle; margin-left: 6px; }
.list-group > .muted { margin: 0 0 18px; }
@media (max-width: 640px) { .trailers { padding: 18px; } }
.trailers-sub { font-size: 1.1rem; margin: 28px 0 14px; }
.trailers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trailers-tile { margin: 0; }
.trailers-tile figcaption { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
@media (max-width: 900px) { .trailers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trailers-grid { grid-template-columns: 1fr; } }

/* "What's on" events band on the home page (filled by app.js from events.json) */
.events-band { display: flex; align-items: stretch; border-bottom: .5px solid var(--line); background: var(--bg-soft); }
.events-band[hidden] { display: none; }
.events-label { flex: none; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 14px 22px; border-right: .5px solid var(--line); font-size: .76rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.events-label span { margin-top: 4px; font-size: .62rem; letter-spacing: .18em; color: var(--muted); }
.events-viewport { flex: 1; min-width: 0; overflow: hidden; }
.events-track { display: flex; width: max-content; animation: ticker 120s linear infinite; }
.events-band:hover .events-track, .events-band:focus-within .events-track { animation-play-state: paused; }
.events-run { display: flex; }
.event { display: inline-flex; align-items: baseline; gap: 10px; padding: 16px 0 16px 36px; white-space: nowrap; text-decoration: none; color: var(--ink); }
.event::after { content: ""; align-self: center; width: 4px; height: 4px; margin-left: 26px; border-radius: 50%; background: var(--accent); opacity: .85; }
.event-date { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.event-cat { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border: .5px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.event-title { font-size: .92rem; }
.event-venue { font-size: .8rem; color: var(--muted); }
.event:hover .event-title, .event:focus-visible .event-title { color: var(--accent); }
@media (max-width: 640px) { .events-label { padding: 12px 14px; font-size: .68rem; } .events-label span { display: none; } .event { padding-left: 24px; } }
@media (prefers-reduced-motion: reduce) { .events-track { animation: none; } .events-viewport { overflow-x: auto; } .events-run[aria-hidden] { display: none; } }

/* Main pages are white below the header photo; photos, banners and the ad slot keep the dark palette */
.theme-light .hero, .theme-light .tile, .theme-light .ad-slot, .theme-light .featured-media, .theme-light .guide-callout {
  --heading: #ffffff; --ink: #e8e8e8; --muted: #c6c6c6; --line: rgba(255, 255, 255, .11); --accent: #ffffff; }
.theme-light .other { color: var(--heading); }
.theme-light .card:hover, .theme-light .pick:hover, .theme-light .review-link:hover, .theme-light .other:hover { border-color: rgba(0, 0, 0, .22); }
.theme-light .chip { background: #fff; }
.theme-light .band { background: var(--bg-soft); }

/* Photos: square corners with a fine black border */
.tile, .gallery, .featured, .guide-callout, .trailers-frame { border-radius: 0; }
.tile, .gallery, .trailers-frame { border: .5px solid #000; }
.featured-media, .guide-callout img { border: .5px solid #000; }
.tile:hover { border-color: #000; }

/* "Ask the guide" chat-style finder (app.js) */
.ask-btn { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: .5px solid rgba(255, 255, 255, .5); border-radius: 999px; background: linear-gradient(180deg, rgba(22, 22, 22, .96), rgba(6, 6, 6, .96)); color: #fff; font: inherit; font-size: .92rem; letter-spacing: .04em; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.ask-btn:hover { border-color: #ffffff; color: #ffffff; }
.ask-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.ask-open .ask-btn { display: none; }
.ask-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61; display: flex; flex-direction: column; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 110px)); border: .5px solid rgba(255, 255, 255, .14); border-radius: 18px; background: #0b0b0b; color: #e8e8e8; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); overflow: hidden; }
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: .5px solid rgba(255, 255, 255, .11); }
.ask-title { margin: 0; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: #ffffff; }
.ask-close { border: 0; background: none; color: #c6c6c6; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.ask-close:hover { color: #fff; }
.ask-log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ask-msg { margin: 0; max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.ask-msg p { margin: 0 0 8px; }
.ask-bot { align-self: flex-start; background: #161616; border: .5px solid rgba(255, 255, 255, .08); }
.ask-you { align-self: flex-end; background: rgba(255, 255, 255, .16); border: .5px solid rgba(255, 255, 255, .35); color: #fff; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chips button { padding: 6px 12px; border: .5px solid rgba(255, 255, 255, .4); border-radius: 999px; background: none; color: #ffffff; font: inherit; font-size: .8rem; cursor: pointer; }
.ask-chips button:hover { background: rgba(255, 255, 255, .12); }
.ask-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ask-results a { display: grid; gap: 2px; padding: 9px 11px; border: .5px solid rgba(255, 255, 255, .1); border-radius: 10px; color: #e8e8e8; text-decoration: none; }
.ask-results a:hover { border-color: #ffffff; }
.ask-name { color: #fff; font-size: .95rem; }
.ask-meta { font-size: .76rem; color: #ffffff; letter-spacing: .03em; }
.ask-badge { font-size: .78rem; color: #c6c6c6; }
.ask-form { display: flex; gap: 8px; padding: 12px; border-top: .5px solid rgba(255, 255, 255, .11); }
.ask-form input { flex: 1; min-width: 0; padding: 10px 14px; border: .5px solid rgba(255, 255, 255, .2); border-radius: 999px; background: #151515; color: #fff; font: inherit; font-size: 16px; }
.ask-form input:focus { outline: none; border-color: #ffffff; }
.ask-form button { padding: 10px 18px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffffff, #e6e6e6); color: #000; font: inherit; cursor: pointer; }
@media (max-width: 560px) { .ask-btn { right: 12px; bottom: 12px; } .ask-panel { right: 12px; bottom: 12px; height: calc(100vh - 90px); } }

/* Listing cards: three-line description and a logo panel on the right (business logo or monogram) */
.card { grid-template-columns: 84px minmax(0, 1fr) 132px; }
.card .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.card-logo { display: flex; align-items: center; justify-content: center; padding: 18px 18px 18px 0; }
.card-logo img, .card-mono { width: 112px; height: 112px; border: .5px solid #000; background: #fff; }
.card-logo img { object-fit: contain; padding: 10px; }
.card-mono { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.9rem; letter-spacing: .08em; color: var(--muted); background: var(--bg-soft); border-color: var(--line); }
@media (max-width: 640px) {
  .card { grid-template-columns: minmax(0, 1fr) 84px; }
  .card .rank { grid-column: 1 / -1; }
  .card-logo { align-items: flex-start; padding: 20px 14px 0 0; }
  .card-logo img, .card-mono { width: 70px; height: 70px; }
  .card-mono { font-size: 1.3rem; }
}
/* Exactly two lines of description on every card, so cards line up evenly */
.card .desc { -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.6; height: 3.2em; }
/* One line each for the name, the area/type line and the address, so every card is the same height */
.card h3, .card .meta, .card .badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card .badge { display: inline-block; vertical-align: top; }
.card-foot { flex-wrap: nowrap; }
.card-foot .addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-links { flex: none; }
@media (max-width: 640px) {
  .card-foot { flex-wrap: wrap; }
  .card-foot .addr { flex: 0 0 100%; }
  .card-links { margin-left: 0; }
}
.card .meta { display: block; }
.card .meta > span + span { margin-left: 6px; }

/* "Our top 3" picks above each list, and the first-ten cap with a "Show all" button */
.top3 { margin: 0 0 36px; }
.top3 > h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 4px; }
.top3 > .muted { margin: 0 0 16px; }
.top3-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.card-top { border-color: var(--accent); }
.card-top .rank { background: var(--accent); color: #fff; }
.list-all-h { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 8px 0 14px; }
.cards .card.is-capped { display: none; }
.show-all { text-align: center; margin: 24px 0 8px; }
.theme-light .show-all .btn-ghost { color: var(--heading); border-color: var(--line); background: #fff; backdrop-filter: none; }
/* Logos supplied as a full square (e.g. white-on-black) fill the logo box edge to edge */
.card-logo-fill img { padding: 0; object-fit: cover; border-color: #000; }
/* Solid black bar behind the ULTIMATE Athens logo and menu */
.site-header, .theme-light .site-header { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 17 menu items: tighter spacing so the desktop menu fits on one line */
@media (min-width: 1401px) { .site-nav a { padding-left: 4px; padding-right: 4px; letter-spacing: .02em; } }
/* "More" dropdown in the main menu */
.nav-more { position: relative; }
.nav-more > summary { list-style: none; cursor: pointer; font-size: .9rem; letter-spacing: .02em; color: rgba(255, 255, 255, .8); padding: 7px 4px; border: .5px solid transparent; border-radius: 999px; white-space: nowrap; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: " \25BE"; font-size: .75em; }
.nav-more[open] > summary::after { content: " \25B4"; }
.nav-more > summary:hover, .nav-more[open] > summary { color: #fff; }
.nav-more.has-current > summary { border-color: rgba(255, 255, 255, .4); color: #fff; }
.nav-more-menu { display: flex; flex-direction: column; }
.nav-more-menu a.nav-sub { font-size: .8rem; color: rgba(255, 255, 255, .6); }
@media (min-width: 1401px) {
  .nav-more-menu { position: absolute; right: 0; top: calc(100% + 14px); min-width: 230px; padding: 10px; gap: 2px; background: #000; border: .5px solid rgba(255, 255, 255, .3); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); z-index: 200; }
  .nav-more-menu a { padding: 8px 12px !important; border-radius: 10px; }
  .nav-more-menu a.nav-sub { padding: 5px 12px 5px 26px !important; }
}
@media (max-width: 1400px) {
  .nav-more > summary { padding: 12px 14px; font-size: inherit; }
  .nav-more-menu a.nav-sub { padding-left: 32px; }
}
/* Section menu at the top of lists split into sections */
.list-jump { margin-top: 8px; }
/* Fewer top-level items now the "More" dropdown exists, so the menu gets its spacing back */
@media (min-width: 1401px) { .site-nav > a { padding-left: 10px; padding-right: 10px; letter-spacing: .04em; } .nav-more > summary { padding-left: 10px; padding-right: 10px; letter-spacing: .04em; } }
/* Section menus on the white pages */
.theme-light .guide-nav { background: rgba(255, 255, 255, .94); border-bottom: .5px solid rgba(0, 0, 0, .12); }
.theme-light .guide-nav a { color: #000; border-color: rgba(0, 0, 0, .3); }
.theme-light .guide-nav a span { color: rgba(0, 0, 0, .5); }
.theme-light .guide-nav a:hover { border-color: #000; color: #000; }
/* Sub-menus for lists split into sections: on hover in the desktop menu */
.nav-item { position: relative; display: flex; }
.nav-sub-menu { display: none; }
@media (min-width: 1401px) {
  .nav-item > a { padding-left: 10px; padding-right: 10px; letter-spacing: .04em; }
  .nav-item:hover > .nav-sub-menu, .nav-item:focus-within > .nav-sub-menu { display: flex; flex-direction: column; gap: 2px; position: absolute; left: 0; top: 100%; min-width: 220px; padding: 10px; background: #000; border: .5px solid rgba(255, 255, 255, .3); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); z-index: 200; }
  .nav-sub-menu a { padding: 7px 12px !important; border-radius: 10px; font-size: .82rem; color: rgba(255, 255, 255, .75); }
}
@media (max-width: 1400px) { .nav-item { display: block; } }
@media (max-width: 1400px) { .site-nav { max-height: calc(100vh - 110px); overflow-y: auto; -webkit-overflow-scrolling: touch; } }
/* "Our 20 favourites, listed A-Z" under the intro on list pages */
.hero-note { margin: 14px 0 0; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
/* ===== Usability update, October 2026 ===== */
/* Menu groups: dropdowns open under their heading */
.nav-group .nav-more-menu { left: 0; right: auto; }
.nav-group:last-of-type .nav-more-menu { left: auto; right: 0; }
/* Search and saved-places icons in the header */
.header-tools { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.header-tools button, .header-tools a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: .5px solid rgba(255, 255, 255, .22); background: transparent; color: #fff; cursor: pointer; padding: 0; text-decoration: none; }
.header-tools button:hover, .header-tools a:hover { border-color: #fff; }
.saved-count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #fff; color: #000; font-size: .66rem; line-height: 17px; text-align: center; }
@media (max-width: 1400px) { .header-tools { margin-left: auto; margin-right: 8px; } }
/* Search box on the home page photo */
.hero-search { display: flex; gap: 8px; max-width: 560px; margin: 22px 0 6px; }
.hero-search input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 13px 18px; border-radius: 999px; border: .5px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .45); color: #fff; }
.hero-search input::placeholder { color: rgba(255, 255, 255, .7); }
.hero-search input:focus { outline: none; border-color: #fff; background: rgba(0, 0, 0, .6); }
/* Phones: shorter header photo on list pages, so the list starts sooner */
@media (max-width: 720px) {
  .hero:not(.hero-big) { min-height: 0; }
  .hero:not(.hero-big) .hero-inner { padding: 64px 0 26px; }
  .hero:not(.hero-big) h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .hero:not(.hero-big) .hero-lead { font-size: .98rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .ad-slot { margin: 8px auto; }
}
/* Phones: names on up to two lines and three lines of description, with a smaller logo box */
@media (max-width: 640px) {
  .card { grid-template-columns: minmax(0, 1fr) 64px; }
  .card h3 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 1.3rem; line-height: 1.25; }
  .card .desc { -webkit-line-clamp: 3; line-clamp: 3; height: auto; max-height: 4.8em; }
  .card-logo { padding: 18px 12px 0 0; }
  .card-logo img, .card-mono { width: 52px; height: 52px; }
  .card-mono { font-size: 1.05rem; }
}
/* Save (heart) button on cards */
.card-body { position: relative; }
.card-save { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding: 0; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--ink); cursor: pointer; }
.card-save svg { width: 15px; height: 15px; }
.card-save.is-saved svg { fill: currentColor; }
/* Save and share on venue pages */
.venue-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.venue-actions .btn { width: 100%; justify-content: center; }
.save-btn.is-saved { background: #000; color: #fff; border-color: #000; }
.theme-light .venue-actions .btn-ghost { color: var(--heading); border-color: rgba(0, 0, 0, .3); background: #fff; backdrop-filter: none; }
.theme-light .save-btn.is-saved { background: #000; color: #fff; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #000; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .9rem; z-index: 300; }
/* Map of a list */
.list-map { margin: 0 0 22px; border: .5px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.list-map > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; font-size: .95rem; color: var(--heading); }
.list-map > summary::-webkit-details-marker { display: none; }
.list-map > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; }
.list-map[open] > summary::after { content: "\2212"; }
.list-map-canvas { height: min(60vh, 460px); border-top: .5px solid var(--line); background: #f2f2f2; }
.map-pin { width: 14px; height: 14px; border-radius: 50%; background: #000; border: 2px solid #fff; box-shadow: 0 0 0 .5px #000; }
.map-pin-n { width: 24px; height: 24px; border-radius: 50%; background: #000; color: #fff; border: 2px solid #fff; font-size: .75rem; display: flex; align-items: center; justify-content: center; }
.leaflet-popup-content a { color: #000; font-size: .95rem; }
.leaflet-popup-content small { display: block; color: #5c6066; }
/* Itineraries */
.plan { padding-top: 8px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.itinerary { padding-top: 28px; }
.stops { list-style: none; margin: 0 0 24px; padding: 0; border-left: .5px solid #000; }
.stop { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; padding: 0 0 26px 18px; position: relative; }
.stop::before { content: ""; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #000; }
.stop-time { margin: 2px 0 0; font-size: .85rem; letter-spacing: .08em; color: var(--muted); }
.stop h2 { font-size: 1.35rem; margin: 0 0 2px; }
.stop h2 a { color: inherit; text-decoration: none; }
.stop h2 a:hover { text-decoration: underline; }
.stop-n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #000; color: #fff; font-size: .75rem; align-items: center; justify-content: center; margin-right: 10px; vertical-align: 3px; }
.stop .meta { margin-bottom: 6px; }
.stop-body > p:last-child { margin: 0; }
@media (max-width: 560px) { .stop { grid-template-columns: 1fr; gap: 2px; } }
/* Saved places page */
.saved-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: .5px solid var(--line); border-radius: 12px; }
.saved-list a { color: var(--heading); text-decoration: none; font-size: 1.05rem; }
.saved-list small { display: block; color: var(--muted); font-size: .85rem; }
.saved-list button { border: .5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
/* Back to top */
.to-top { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: .5px solid rgba(255, 255, 255, .4); background: #000; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.is-on { opacity: 1; pointer-events: auto; }
/* Slightly darker grey text on the white pages, easier to read outdoors */
.theme-light { --muted: #4b4f55; }
@media (min-width: 1401px) { .site-nav { margin-left: auto; } .header-tools { order: 5; margin-left: 10px; } }
@media (max-width: 520px) { .site-header .header-inner { padding: 0 8px 0 16px; gap: 6px; } .header-tools { gap: 2px; margin-right: 2px; } .header-tools button, .header-tools a { width: 32px; height: 32px; border: 0; } .menu-toggle { padding: 7px 12px; } }
@media (max-width: 360px) { .brand-text { font-size: 1.1rem; } .brand-text small { letter-spacing: .2em; } }
.list-map img, .list-map .leaflet-marker-icon { border: 0 !important; border-radius: 0 !important; max-width: none !important; box-shadow: none !important; }
.list-map .leaflet-tile { width: 256.6px !important; height: 256.6px !important; }

/* ---- Visual polish (October 2026) ---- */

/* Photos in full colour, with a gentle zoom on hover */
.tile img, .slide img, .featured-media img, .guide-callout img, .card-photo img, .week-pick-media img { transition: transform .7s ease; }
@media (hover: hover) {
  .card:hover .card-photo img, .guide-callout:hover img, .week-pick:hover .week-pick-media img { transform: scale(1.04); }
}

/* Card photos sit where the logo or monogram would */
.card-photo { overflow: hidden; }
.card-photo img { width: 112px; height: 112px; object-fit: cover; border: .5px solid #000; display: block; }
@media (max-width: 640px) { .card-photo img { width: 52px; height: 52px; } }

/* Monograms: a fine double hairline frame */
.theme-light .card-mono { background: #fff; color: #000; border: .5px solid rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 6.5px rgba(0, 0, 0, .18); font-size: 1.05rem; letter-spacing: .34em; text-indent: .34em; font-weight: 300; }
@media (max-width: 640px) { .theme-light .card-mono { font-size: .72rem; letter-spacing: .26em; text-indent: .26em; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 4.5px rgba(0, 0, 0, .18); } }

/* Venue pages: an area photo until the venue's own photos arrive */
.gallery-area { position: relative; }
.gallery-area .slide { aspect-ratio: 16 / 7; }
@media (max-width: 640px) { .gallery-area .slide { aspect-ratio: 4 / 3; } }
.gallery-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 12px 0 0; font-size: .88rem; color: var(--muted); }
.gallery-note a { color: var(--heading); }

/* Editorial section headings on list pages */
.list-group { padding-top: 56px; }
.list-group > h2 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.02em; line-height: 1.05; padding-top: 22px; border-top: .5px solid #000; margin-bottom: 10px; }
.list-group > h2 span { font-size: .32em; letter-spacing: .24em; vertical-align: super; margin-left: 10px; }
.list-group > .muted { max-width: 640px; font-size: 1.05rem; margin-bottom: 26px; }
.top3 > h2, .list-all-h { letter-spacing: -.02em; }

/* Gentle reveal as you scroll (only when JavaScript is on and motion is allowed) */
.reveal-on .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal-on .rv.is-in { opacity: 1; transform: none; }

/* Sticky quick actions on venue pages (phones) */
.venue-bar { display: none; }
@media (max-width: 720px) {
  .venue-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; background: #000; border-top: .5px solid #000; padding-bottom: env(safe-area-inset-bottom); }
  .venue-bar a { flex: 1; padding: 16px 6px; text-align: center; color: #fff; text-decoration: none; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
  .venue-bar a + a { border-left: .5px solid rgba(255, 255, 255, .35); }
  .has-venue-bar { padding-bottom: 56px; }
  .has-venue-bar .ask-btn { bottom: 72px; }
  .has-venue-bar .to-top { bottom: 72px; }
}

/* Home page: four big ways in, this week's pick, then every list */
.lead-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 8px; padding-bottom: 56px; }
.tile-lead { aspect-ratio: 16 / 10; }
.tile-lead .tile-title { font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.02em; }
@media (max-width: 720px) { .lead-tiles { grid-template-columns: 1fr; } }
.week-pick { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; padding-bottom: 72px; }
.week-pick-media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: .5px solid #000; }
.week-pick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.week-pick-body h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; margin-bottom: 8px; }
.week-pick-body h2 a { color: inherit; text-decoration: none; }
.week-pick-text { font-size: 1.08rem; line-height: 1.6; margin: 16px 0 22px; }
@media (max-width: 860px) { .week-pick { grid-template-columns: 1fr; gap: 20px; } }
.all-lists { padding-bottom: 72px; }
.all-lists > h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; padding-top: 22px; border-top: .5px solid #000; margin-bottom: 20px; }
.tiles-compact { grid-template-columns: repeat(4, 1fr); gap: 12px; padding-bottom: 0; }
.tiles-compact .tile { aspect-ratio: 4 / 3; }
.tiles-compact .tile-title { font-size: 1.3rem; }
.tiles-compact .tile-sub { display: none; }
@media (max-width: 960px) { .tiles-compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tiles-compact { grid-template-columns: repeat(2, 1fr); } .tiles-compact .tile-title { font-size: 1.05rem; } }
.gallery-area .gallery-note { padding: 12px 16px 14px; }
@media (max-width: 720px) { .venue-bar a { font-size: .72rem; letter-spacing: .1em; white-space: nowrap; padding: 17px 4px; } }
.why { margin: 22px 0 6px; padding-top: 16px; border-top: .5px solid #000; }
.why-h { margin: 0 0 8px; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.why li { padding-left: 18px; position: relative; }
.why li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; border-top: .5px solid #000; }
.venue-map iframe { border: .5px solid #000; }
/* Ink illustrations */
.top3-head { display: flex; align-items: center; gap: 24px; }
.illo { flex: none; width: 150px; height: auto; }
.illo-lg { width: 300px; }
@media (max-width: 640px) { .illo { width: 96px; } .illo-lg { width: 150px; } .top3-head { gap: 14px; } }
.other-illo { display: block; width: 72px; height: auto; margin: -6px 0 6px -8px; }
/* Home page photo grids: three to a row, smaller */
.lead-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile-lead { aspect-ratio: 4 / 3; }
.tile-lead .tile-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.tile-lead .tile-sub { font-size: .85rem; }
.plan-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan-grid .tile { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .lead-tiles, .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lead-tiles, .plan-grid { grid-template-columns: 1fr; } }
/* "Every list" grid follows the same three-to-a-row rule */
.tiles-compact { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tiles-compact .tile-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.tiles-compact .tile-sub { display: block; font-size: .85rem; }
@media (max-width: 860px) { .tiles-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles-compact { grid-template-columns: 1fr; } }
.tiles-compact > .tile { grid-column: auto !important; aspect-ratio: 4 / 3 !important; }
@media (min-width: 861px) { .week-pick { grid-template-columns: 1fr 2fr; gap: 32px; } }
/* Nine menu items: tighter spacing so the header never overflows */
@media (min-width: 1401px) { .site-nav > a, .site-nav > .nav-item > a, .nav-more > summary { padding-left: 6px !important; padding-right: 6px !important; letter-spacing: .01em !important; } }
/* Curved corners on all photos (the full-width hero banners stay edge to edge) */
.tile, .week-pick-media, .featured-media, .guide-callout, .gallery-track, .gallery-area .slide { border-radius: 14px !important; overflow: hidden; }
.guide-callout img { border-radius: 0 !important; }
.card-photo img, .card-logo img { border-radius: 10px !important; }
.venue-map iframe { border-radius: 14px !important; }
/* Subtle 8px corners on photos and maps */
.tile, .week-pick-media, .featured-media, .guide-callout, .gallery-track, .gallery-area .slide, .venue-map iframe, .card-photo img, .card-logo img { border-radius: 8px !important; }
/* Justified paragraph text across the site, on wider screens only */
@media (min-width: 761px) {
  .venue-about p, .prose p, .intro > p, .stop-body > p:not(.meta), .week-pick-text, .hero-lead,
  .card .desc, .featured-desc, .dev .desc, .area-card p, .why li, .note,
  .list-section > p.muted, .list-group > p.muted, .guide-group > p.muted, .developments > p.muted, .top3-head p,
  .reviews > p.muted, .booking > p.muted, .trailers-head p, .site-footer .footer-grid p.muted {
    text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  }
  .intro > p { text-align-last: center; }
}
/* Justified, hyphenated body text on phones too: only longer paragraphs, so short lines don't open wide gaps */
@media (max-width: 760px) {
  .venue-about p, .prose p, .card .desc, .featured-desc, .stop-body > p:not(.meta), .week-pick-text, .guide-group > p.muted, .list-group > p.muted {
    text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; word-spacing: -.02em;
  }
}
/* Folded directories (e.g. a mall's list of shops): one row per category, opened on tap */
.dir-group { border-top: .5px solid #000; }
.dir-group:last-of-type { border-bottom: .5px solid #000; }
.dir-group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 14px 0; font-size: 1rem; }
.dir-group > summary::-webkit-details-marker { display: none; }
.dir-group > summary span { margin-left: auto; color: #777; font-size: .85rem; }
.dir-group > summary::after { content: '+'; width: 1em; text-align: right; }
.dir-group[open] > summary::after { content: '\2212'; }
.dir-group > p { margin: 0 0 16px; line-height: 1.7; }
/* Photo & logo submission form */
.submit-form { display: grid; gap: 16px; max-width: 640px; margin-top: 28px; }
.submit-form label { display: grid; gap: 6px; font-size: .92rem; }
.submit-form input:not([type=checkbox]), .submit-form select, .submit-form textarea { font: inherit; font-weight: 300; padding: 11px 12px; border: .5px solid #000; border-radius: 8px; background: #fff; color: #000; }
.submit-form input[type=file] { padding: 9px; }
.submit-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.submit-form .check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-size: .86rem; line-height: 1.5; }
.submit-form .check input { margin-top: 4px; }
.submit-form .btn { justify-self: start; }
.submit-form .btn[disabled] { opacity: .5; }
.form-status { min-height: 1.4em; margin: 0; }
.form-status.is-error { color: #b00020; }
.owner-link { margin: 14px 0 0; font-size: .82rem; }
.owner-link a { color: inherit; }
@media (max-width: 520px) { .submit-form .form-row { grid-template-columns: 1fr; } }
.lang-switch { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: .82rem; }
.lang-switch button { font: inherit; font-weight: 300; background: none; border: 0; padding: 4px 2px; color: #777; cursor: pointer; letter-spacing: .04em; }
.lang-switch button[aria-pressed="true"] { color: #000; border-bottom: .5px solid #000; }
.lang-switch span { color: #bbb; }

/* Home intro: its own band, on the same 1fr 2fr grid as This week's pick */
@media (min-width: 861px) {
  .intro { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; text-align: left; max-width: none; padding: 48px 0; margin-top: 40px; margin-bottom: 56px; border-top: .5px solid #000; border-bottom: .5px solid #000; }
  .intro h2 { text-align: left; margin: 0; font-size: 2.1rem; line-height: 1.12; }
  .intro > p { margin: 0; font-size: 1.12rem; line-height: 1.65; color: #000; text-align-last: left; }
}
/* Avoid a lone word on the last line of longer paragraphs */
.intro > p, .week-pick-text, .venue-about p, .prose p { text-wrap: pretty; }

/* ===== Design refresh (body.refresh) ===== */
/* 1. Black-and-white maps with red pins */
.refresh .list-map-canvas .leaflet-tile-pane { filter: grayscale(1) contrast(1.06) brightness(1.04); }
.refresh .map-pin { background: #d0021b; border-color: #fff; box-shadow: 0 0 0 .5px #d0021b; }
.refresh .map-pin-n { background: #d0021b; color: #fff; }
/* 2. Cards: a fine-line illustration (or clean space) instead of initials */
.refresh .card-illo img { width: 112px; height: 112px; object-fit: contain; padding: 16px; background: #fff; border: .5px solid #e2e2e2; border-radius: 8px; }
.refresh .card-blank { min-width: 1px; }
@media (max-width: 760px) { .refresh .card-illo img { width: 70px; height: 70px; padding: 10px; } }
/* 3. Soft placeholders so nothing flashes blank while photos load; gentler reveal */
.refresh .tile, .refresh .slide, .refresh .week-pick-media, .refresh .featured-media, .refresh .guide-callout, .refresh .inline-photo { background-color: #ececec; }
.js-reveal .refresh .reveal { opacity: .3; transform: translateY(12px); }
.js-reveal .refresh .reveal.in { opacity: 1; transform: none; }
/* 4. Consistent crops */
.refresh .inline-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.refresh .week-pick-media img, .refresh .featured-media img { aspect-ratio: 4 / 3; object-fit: cover; }
/* 5 & 6. Magazine articles: lead paragraph, measure, pull quote, vertical timeline, photos within the text */
.refresh .venue-about p { max-width: 68ch; }
.refresh .venue-about p.lead { font-size: 1.3rem; line-height: 1.5; font-weight: 300; }
.refresh blockquote.pull { margin: 36px 0; padding: 24px 0; border-top: .5px solid #000; border-bottom: .5px solid #000; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; font-weight: 300; letter-spacing: -.01em; text-align: left; max-width: 30ch; }
.refresh .inline-photo { margin: 32px 0; border-radius: 8px; overflow: hidden; }
.refresh .inline-photo figcaption { background: #fff; padding: 8px 0 0; font-size: .8rem; color: #777; }
.refresh .inline-photo figcaption a { color: #777; }
.refresh .dir-timeline { margin: 0 0 28px; }
.refresh .dir-timeline ol { list-style: none; margin: 10px 0 0; padding: 0 0 0 2px; border-left: .5px solid #000; }
.refresh .dir-timeline li { position: relative; padding: 0 0 16px 22px; }
.refresh .dir-timeline li::before { content: ''; position: absolute; left: -4.5px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: #000; }
.refresh .dir-timeline .tl-date { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #777; margin-bottom: 2px; }
/* 7. Homepage rhythm and a typographic index of every list */
.refresh .home-feature { margin-top: 72px; }
.refresh .list-index { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 56px; border-top: .5px solid #000; }
.refresh .list-index li { break-inside: avoid; }
.refresh .list-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: .5px solid #ddd; color: #000; text-decoration: none; font-size: 1.2rem; font-weight: 300; }
.refresh .list-index a:hover { border-bottom-color: #000; }
.refresh .li-count { color: #777; font-size: .85rem; letter-spacing: .06em; }
@media (max-width: 720px) { .refresh .list-index { columns: 1; } }
/* 8. Bigger, lighter headings */
.refresh h1, .refresh h2 { font-weight: 300; letter-spacing: -.02em; }
.refresh .hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 300; letter-spacing: -.025em; }
.refresh .tile-title, .refresh .featured-title { font-weight: 300; letter-spacing: -.015em; }
/* 9. Thin line icons in the facts panel */
.refresh .fact-icon { vertical-align: -2px; margin-right: 7px; color: #000; }
/* 10. Black-and-white headers and tiles; galleries stay in colour; tiles bloom into colour on hover */
.refresh .hero-img, .refresh .tile img, .refresh .week-pick-media img, .refresh .guide-callout img, .refresh .featured-media img { filter: grayscale(1) contrast(1.05); transition: filter .6s ease, transform .7s ease; }
@media (hover: hover) { .refresh .tile:hover img, .refresh .guide-callout:hover img, .refresh .week-pick-media:hover img { filter: grayscale(0) contrast(1); } }
.venue-about h3.art-h { font-size: .8rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; margin: 2.2rem 0 .6rem; padding-top: 1rem; border-top: 1px solid currentColor; text-align: left; hyphens: none; }
/* Discussions / forum */
.discuss { margin: 3rem 0 2rem; padding-top: 1.5rem; border-top: 1px solid currentColor; }
.discuss h2 { font-weight: 300; }
.discuss-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.discuss-item { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.discuss-meta { font-size: .85rem; margin: 0 0 .4rem; }
.discuss-name { letter-spacing: .04em; text-transform: uppercase; }
.discuss-text { margin: .3rem 0; white-space: pre-line; }
.discuss-form { display: grid; gap: .9rem; max-width: 720px; }
.discuss-form label { display: grid; gap: .3rem; font-size: .9rem; }
.discuss-form input, .discuss-form select, .discuss-form textarea { font: inherit; padding: .6rem .7rem; border: 1px solid #999; border-radius: 0; background: #fff; color: #000; }
.discuss-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.discuss-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.discuss-form .btn { justify-self: start; }
.discuss-status.is-error { color: #d0021b; }
.forum .discuss:first-of-type { border-top: 0; }
@media (max-width: 640px) { .discuss-form .form-row { grid-template-columns: 1fr; } }
.hot-topics { margin-top: 3rem; }
.hot-list { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hot-item a { display: grid; gap: .5rem; padding: 1.1rem 1.2rem; border: 1px solid currentColor; text-decoration: none; color: inherit; height: 100%; }
.hot-thread { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.hot-text { font-size: 1.05rem; font-weight: 300; line-height: 1.45; text-align: left; hyphens: none; }
.hot-meta { font-size: .8rem; }
.hot-item a:hover { background: #000; color: #fff; }
/* Instagram panel: a landscape strip where the photo slider used to be */
.ig-panel { margin: 1rem 0 2rem; }
.ig-gate { aspect-ratio: 16 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; background: #111; color: #fff; text-align: center; }
.ig-kicker { margin: 0; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.ig-gate .ig-load { background: #fff; color: #000; border-color: #fff; }
.ig-note { margin: 0; font-size: .8rem; opacity: .75; max-width: 34rem; }
.ig-grid { display: flex; align-items: flex-start; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .4rem; }
.ig-item { flex: 0 0 calc((100% - 1.5rem) / 3); min-width: 280px; overflow: hidden; scroll-snap-align: start; background: #fff; }
.ig-item iframe { display: block; width: 100%; border: 0; margin-top: -54px; background: #fff; }
.ig-head { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.ig-head a { text-transform: none; letter-spacing: .04em; }
.ig-more { margin: .5rem 0 0; text-align: right; }
@media (max-width: 640px) { .ig-gate { aspect-ratio: 4 / 3; } .ig-item { flex-basis: 86%; min-width: 0; } }
.ig-gate[hidden], .ig-grid[hidden] { display: none; }
/* Editorial byline on in-depth articles */
.venue-about p.byline { font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: -4px 0 14px; text-align: left !important; -webkit-hyphens: none !important; hyphens: none !important; word-spacing: normal !important; }
/* Magazine-style opening paragraph on every in-depth article (both cities) */
.venue-about p.lead, .refresh .venue-about p.lead { font-size: 1.4rem; line-height: 1.5; font-weight: 300; letter-spacing: -.005em; color: var(--ink); margin: 0 0 1.4em; text-align: left !important; -webkit-hyphens: none !important; hyphens: none !important; word-spacing: normal !important; }
@media (max-width: 760px) { .venue-about p.lead, .refresh .venue-about p.lead { font-size: 1.22rem; } }
/* Greek Islands: Cycladic blue titles, bright and sunny */
.cyclades { --cyc: #0d5eaf; }
.cyclades main h2, .cyclades .venue-head h1, .cyclades .art-h, .cyclades .card h3 a, .cyclades .guide-callout-title, .cyclades .why-h, .cyclades .list-all-h, .cyclades .top3-head h2, .cyclades .featured-title a { color: var(--cyc); }
.cyclades .badge { color: var(--cyc); border-color: rgba(13, 94, 175, .35); }
.cyclades .guide-nav a { border-color: rgba(13, 94, 175, .35); color: var(--cyc); }
.cyclades .guide-nav a:hover { background: var(--cyc); color: #fff; }
.cyclades .venue-about p.byline { color: #6b8fb8; }
.venue-guide { margin: 0 0 28px; }
.guide-tiles-wrap { margin: 0 0 36px; }
.guide-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.guide-tile { display: flex; flex-direction: column; border: .5px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--card, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.guide-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 94, 175, .14); }
.guide-tile img { display: block; width: 100%; height: 120px; object-fit: cover; }
.guide-tile-name { padding: 10px 12px 2px; font-size: 1.08rem; color: var(--heading); }
.guide-tile-sub { padding: 0 12px 12px; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.cyclades .guide-tile-name, .cyclades .guide-tiles-wrap h2 { color: var(--cyc); }
.guide-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 26px; }
.guide-links span:first-child { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.card-more { margin: 2px 0 10px; }
.card-more summary { cursor: pointer; display: inline-block; font-size: .86rem; font-weight: 500; color: var(--accent); list-style: none; padding: 2px 0; }
.card-more summary::-webkit-details-marker { display: none; }
.card-more summary::after { content: ' +'; }
.card-more[open] summary::after { content: ' −'; }
.card-more p { margin: 8px 0; line-height: 1.6; }
.card-why { margin: 6px 0 4px; padding-left: 1.1em; font-size: .9rem; color: var(--muted); }
.card-why li { margin: 2px 0; }
.cyclades .card-more summary { color: var(--cyc); }
.card-inline .card-links { gap: 14px; flex-wrap: wrap; }
.cta-panel { margin: 0 0 1.8em; padding: 20px 22px; border-radius: var(--radius); background: linear-gradient(135deg, #e8f1fb, #f4f9ff); border: .5px solid rgba(13, 94, 175, .25); }
.cta-panel p { margin: 0; text-align: left !important; }
.cta-kicker { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #0d5eaf; font-weight: 600; }
.cta-title { font-size: 1.25rem; color: #0a2540; margin: 4px 0 6px !important; }
.cta-text { font-size: .95rem; color: #3b4b5c; line-height: 1.55; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }
.cta-panel .btn-ghost { color: #0d5eaf !important; background: #fff !important; border: 1px solid rgba(13, 94, 175, .45) !important; }
.cta-panel .btn-ghost:hover { background: #0d5eaf !important; color: #fff !important; }
.venue .guide-tiles-wrap { margin-top: 48px; }
.cta-panel p { -webkit-hyphens: none !important; hyphens: none !important; word-spacing: normal !important; }
/* Weather chip in the header and its forecast panel */
.wx { position: relative; display: inline-flex; align-items: center; }
.wx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: .5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: .86rem; cursor: pointer; white-space: nowrap; }
.wx-chip:hover { background: rgba(255, 255, 255, .14); }
.wx-ico { font-size: 1rem; line-height: 1; }
.wx-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, .28); padding: 6px 16px 10px; z-index: 60; text-align: left; }
.wx-row { padding: 12px 0; border-bottom: .5px solid #e5e5e5; }
.wx-name { margin: 0 0 4px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #555; }
.wx-name span { letter-spacing: 0; text-transform: none; color: #888; }
.wx-now { margin: 0 0 8px; font-size: .86rem; color: #444; }
.wx-big { font-size: 1.3rem; color: #111; margin-right: 4px; }
.wx-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.wx-days li { display: flex; flex-direction: column; align-items: center; font-size: .76rem; color: #555; gap: 1px; }
.wx-src { margin: 10px 0 0; font-size: .7rem; color: #888; }
.wx-src a { color: inherit; }
@media (max-width: 520px) { .wx-chip { padding: 5px 8px; font-size: .8rem; } .wx-pop { position: fixed; top: 70px; right: 16px; left: 16px; width: auto; } }
/* Planner sections (island-hopping page) */
.planner { margin: 8px 0 24px; }
.planner-sec { margin: 0 0 44px; }
.planner-sec > h2 { margin-bottom: 6px; }
.cyclades .planner-sec > h2 { color: var(--cyc); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.pick-chip { font: inherit; font-size: .88rem; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(13, 94, 175, .35); background: #fff; color: #0d5eaf; cursor: pointer; }
.pick-chip[aria-pressed="true"] { background: #0d5eaf; color: #fff; border-color: #0d5eaf; }
.pick-results:empty { display: none; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 8px; }
.ferry-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.ferry-table th, .ferry-table td { text-align: left; padding: 10px 12px; border-bottom: .5px solid var(--line); vertical-align: top; }
.ferry-table thead th { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.ferry-table tbody th a { color: #0d5eaf; text-decoration: none; font-weight: 500; }
.ferry-table tbody tr:nth-child(odd) { background: rgba(13, 94, 175, .04); }
.itins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.itin { border: .5px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: #fff; }
.itin h3 { margin: 6px 0 8px; font-size: 1.15rem; color: #0a2540; }
.itin p { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; }
.itin-legs { margin: 0 0 10px; padding-left: 1.2em; font-size: .88rem; color: #3b4b5c; }
.itin-legs li { margin: 3px 0; }
.itin-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; }
.itin-links a { color: #0d5eaf; text-decoration: none; }
.wx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.wx-card { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(160deg, #e8f1fb, #f8fbff); border: .5px solid rgba(13, 94, 175, .2); text-decoration: none; color: #0a2540; }
.wx-card-name { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #0d5eaf; }
.wx-card-now { font-size: 1.35rem; }
.wx-card-wind { font-size: .78rem; color: #3b4b5c; }
.wx-windy .wx-card-wind { color: #b3261e; font-weight: 500; }
.wx-card-days { display: flex; gap: 8px; flex-wrap: wrap; font-size: .74rem; color: #555; margin-top: 4px; }
.wx-credit { margin-top: 8px; }
.seasons { display: grid; gap: 10px; margin: 14px 0 0; }
.season { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; border-bottom: .5px solid var(--line); }
.season dt { font-weight: 500; color: #0d5eaf; }
.season dd { margin: 0; line-height: 1.55; }
@media (max-width: 600px) { .season { grid-template-columns: 1fr; gap: 4px; } }
.tips { margin: 12px 0 0; padding-left: 1.2em; }
.tips li { margin: 0 0 10px; line-height: 1.6; }
.faq { margin-top: 12px; border-top: .5px solid var(--line); }
.faq-q { border-bottom: .5px solid var(--line); }
.faq-q summary { cursor: pointer; padding: 14px 0; font-weight: 500; list-style: none; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: '+'; float: right; color: #0d5eaf; }
.faq-q[open] summary::after { content: '−'; }
.faq-q p { margin: 0 0 14px; line-height: 1.6; }
.header-tools .wx-chip { width: auto; height: 36px; padding: 0 11px; gap: 5px; }
.header-tools .wx-chip[hidden] { display: none; }
.header-tools .wx-pop a { display: inline; width: auto; height: auto; border: 0; border-radius: 0; color: inherit; text-decoration: underline; }
@media (max-width: 520px) { .header-tools .wx-chip { padding: 0 8px; } }
/* Feature article at the top of an island guide */
.guide-feature { max-width: 860px; margin: 8px 0 34px; }
.feature-kicker { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.cyclades .feature-kicker { color: #0d5eaf; }
.guide-feature h2 { margin: 0 0 6px; }
.guide-feature .byline { font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6b8fb8; margin: 0 0 14px; }
.feature-lead { font-size: 1.32rem; line-height: 1.5; font-weight: 300; color: var(--ink); margin: 0 0 18px; }
@media (max-width: 760px) { .feature-lead { font-size: 1.16rem; } }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.feature-pic { margin: 0; }
.feature-pic img { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 10px; }
.feature-pic figcaption { display: none; }
@media (max-width: 600px) { .feature-strip { grid-template-columns: 1fr 1fr; } .feature-strip .feature-pic:first-child { grid-column: 1 / -1; } .feature-pic img { height: 150px; } }
.feature-more summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 10px 20px; border-radius: 999px; background: #0d5eaf; color: #fff; font-size: .92rem; font-weight: 500; }
.feature-more summary::-webkit-details-marker { display: none; }
.feature-more summary::after { content: '↓'; }
.feature-more[open] summary::after { content: '↑'; }
.feature-more .more-close, .feature-more[open] .more-open { display: none; }
.feature-more[open] .more-close { display: inline; }
.feature-more[open] summary { margin-bottom: 18px; background: #fff; color: #0d5eaf; border: 1px solid rgba(13, 94, 175, .4); }
.feature-more p { font-size: 1.04rem; line-height: 1.75; margin: 0 0 1.1em; }
.feature-inline { margin: 6px 0 22px; }
.feature-inline img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 12px; }
.feature-inline figcaption { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.guide-links .btn-ghost { color: #0d5eaf !important; background: #fff !important; border: 1px solid rgba(13, 94, 175, .45) !important; }
.guide-links .btn-ghost:hover { background: #0d5eaf !important; color: #fff !important; }
.discuss-jump { margin: -0.4em 0 1.6em; font-size: .92rem; }
.discuss-jump a { color: var(--accent, #0d5eaf); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ===== Design batch D1 ===== */
/* Magazine typography: a serif for articles, guide features and info pages (body.mag, Google Fonts) */
.mag { --mag: "Newsreader", Georgia, "Times New Roman", serif; }
.mag .venue-about.is-article > p, .mag .guide-feature p, .mag .prose p { font-family: var(--mag); font-size: 1.2rem; line-height: 1.68; font-weight: 400; color: #161616; }
.mag .venue-about.is-article > p.lead, .mag .guide-feature .feature-lead { font-family: var(--sans); font-size: clamp(1.2rem, 1.8vw, 1.35rem); line-height: 1.55; font-weight: 300; font-style: normal; color: #000; }
.mag .venue-about.is-article > p.byline, .mag .guide-feature p.byline { font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #666; }
.mag .venue-about.is-article > p.muted.small { font-family: var(--sans); font-size: .85rem; }
.mag blockquote.pull { font-family: var(--sans); font-style: normal; font-weight: 300; }
.mag .why li, .mag .why p, .mag .dir-timeline .tl-text { font-family: var(--mag); font-size: 1.05rem; }
/* Last checked, under the Visit box */
.checked { margin: 14px 0 0; font-size: .8rem; color: #555; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.checked a { color: inherit; }
/* Homepage hero: photos crossfade gently (app.js); the Belgrade home photo stays in colour */
.hero-slide { opacity: 0; transition: opacity 1.8s ease; animation: none !important; }
.hero-slide.is-on { opacity: 1; }
.refresh .hero-big .hero-img { filter: none; }
/* Newsletter band above the footer */
.newsletter { background: #f3f2ef; color: #000; border-top: .5px solid #000; padding: 56px 0; }
.nl-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.newsletter .eyebrow { color: #000; }
.newsletter h2 { color: #000; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 8px; }
.newsletter p { margin: 0; color: #222; }
.nl-row { display: flex; gap: 10px; }
.nl-row input { flex: 1; min-width: 0; font: inherit; padding: 13px 16px; border: .5px solid #000; border-radius: 999px; background: #fff; color: #000; }
.nl-row .btn { border: 0; cursor: pointer; background: #000; color: #fff; box-shadow: none; white-space: nowrap; }
.nl-row .btn[disabled] { opacity: .5; }
.nl-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .8rem; line-height: 1.45; color: #333; }
.nl-check input { margin-top: 3px; }
.nl-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-status { min-height: 1.3em; margin-top: 8px !important; font-size: .9rem; }
.nl-status.is-error { color: #b00020; }
@media (max-width: 760px) { .nl-inner { grid-template-columns: 1fr; gap: 20px; } .newsletter { padding: 40px 0; } }
/* Phone tab bar: Eat · Stay · See · Near me · My trip (venue pages keep their own action bar) */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; display: flex; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: .5px solid rgba(0, 0, 0, .25); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; color: #000; text-decoration: none; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
  .tabbar .saved-count { top: 3px; right: calc(50% - 22px); background: #d0021b; color: #fff; }
  body:not(.has-venue-bar) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body:not(.has-venue-bar) .ask-btn, body:not(.has-venue-bar) .to-top { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .has-venue-bar .tabbar { display: none; }
}
/* Near me */
.near-page { padding-top: 40px; padding-bottom: 56px; }
.near-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.near-actions .btn { border: 0; cursor: pointer; }
.theme-light .near-actions .btn-ghost, .theme-light .trip-tools .btn-ghost { color: #000; border: .5px solid rgba(0, 0, 0, .4); background: #fff; backdrop-filter: none; }
.near-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.near-chip[aria-pressed="true"] { background: #000 !important; color: #fff; border-color: #000; }
.near-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.near-map, .trip-map-canvas { height: 560px; border-radius: 8px; background: #ececec; z-index: 0; }
.near-map .leaflet-tile-pane, .trip-map-canvas .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
.near-list { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow: auto; border-top: .5px solid #000; }
.near-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 2px; border-bottom: .5px solid #ddd; }
.near-list a { color: #000; text-decoration: none; font-size: 1.05rem; }
.near-list small { grid-column: 1; color: #666; font-size: .82rem; }
.near-list .near-d { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: .85rem; color: #000; white-space: nowrap; }
.near-you { width: 16px; height: 16px; border-radius: 50%; background: #0d5eaf; border: 3px solid #fff; box-shadow: 0 0 0 1px #0d5eaf; }
@media (max-width: 860px) { .near-grid { grid-template-columns: 1fr; } .near-map { height: 46vh; } .near-list { max-height: none; } }
/* My trip (saved page) */
.trip-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; }
.trip-tools .btn { border: 0; cursor: pointer; font-size: .92rem; padding: 11px 20px; }
.trip-tools .trip-wa { color: #000; }
.saved-list li { display: grid; grid-template-columns: auto 1fr auto; }
.saved-n { width: 30px; height: 30px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.saved-btns { display: flex; gap: 6px; }
.saved-list .saved-btns button { padding: 6px 10px; }
.trip-map { margin-top: 32px; }
.trip-map-canvas { height: 440px; }
.trip-map-note:empty { display: none; }
@media print {
  .site-header, .site-footer, .newsletter, .tabbar, .ask-btn, .ask-panel, .to-top, .trip-tools, .saved-btns, .events-band, .ticker, .skip, .saved-empty, .saved-intro { display: none !important; }
  body { padding: 0 !important; background: #fff !important; }
  .saved-list li { break-inside: avoid; border-color: #999; }
  .trip-map-canvas { height: 360px; }
}
/* Small phones: the header fits brand, weather, search, saved and Menu without spilling off the edge */
@media (max-width: 760px) { body:not(.has-venue-bar) .site-header .nav-saved { display: none; } }
@media (max-width: 400px) {
  .brand-text { font-size: 1.12rem; }
  .menu-toggle { padding: 7px 9px !important; }
  .header-inner { gap: 4px !important; }
}
@media (max-width: 560px) { .saved-list li { grid-template-columns: auto 1fr; } .saved-list .saved-btns { grid-column: 2; } .saved-page { padding-top: 24px; } }
.mag .guide-feature p.feature-kicker { font-family: var(--sans); font-size: .78rem; }

/* ===== Section colours and card refresh (C1) ===== */
/* Each list has one signature colour (--sec, set on the page and on every card); used only in small touches */
.card[style*="--sec"] { box-shadow: inset 3px 0 0 var(--sec), 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .18); }
.card[style*="--sec"] .badge { color: var(--sec); background: transparent; box-shadow: inset 0 0 0 .5px var(--sec); }
.card[style*="--sec"] .meta .area { color: var(--sec); }
.card[style*="--sec"] .rank { color: var(--sec); }
.card[style*="--sec"] .card-links a.details { color: var(--sec); }
.card[style*="--sec"]:hover { transform: translateY(-3px); box-shadow: inset 3px 0 0 var(--sec), 0 2px 4px rgba(0, 0, 0, .05), 0 18px 36px -16px rgba(0, 0, 0, .28); }
.card-top[style*="--sec"] { border-color: var(--sec); }
.card-top[style*="--sec"] .rank { background: var(--sec); color: #fff; }
.card-photo img { width: 132px !important; height: 132px !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); }
@media (max-width: 640px) { .card-photo img { width: 64px !important; height: 64px !important; } }
/* Pages: a fine colour line under the top photo, coloured section labels and headings rule */
body[data-sec] .hero { box-shadow: inset 0 -5px 0 var(--sec); }
body[data-sec] .venue-rank, body[data-sec] .feature-kicker, body[data-sec] .venue-about h3.art-h { color: var(--sec); }
body[data-sec] .venue-about h3.art-h { border-top-color: var(--sec); }
body[data-sec] .venue-facts { border-top: 3px solid var(--sec); }
body[data-sec] .list-map-canvas .map-pin, body[data-sec] .map-pin { background: var(--sec); }
body[data-sec] .guide-nav a:hover, body[data-sec] .chip[aria-pressed="true"] { border-color: var(--sec); }
/* Menu and the list index: a small colour dot beside each list */
.site-nav a.has-dot::before, .list-index li[style*="--sec"] > a::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sec); margin-right: 8px; vertical-align: 1px; flex: none; }
.list-index li[style*="--sec"] > a { justify-content: flex-start !important; }
.list-index li[style*="--sec"] .li-count { margin-left: auto; }

/* ===== Bazaar theme (Belgrade: body.bazaar) — fashion-magazine look: Didot-style serif headlines, small spaced
   capitals, square photos, hairlines, black and white. Functionality unchanged. ===== */
.bazaar { --serif: "Bodoni Moda", "Bodoni 72", Didot, "Didot LT STD", Georgia, serif; --bz-grey: #f5f5f5; --bz-line: #e5e5e5; }
/* Headlines */
.bazaar h1, .bazaar h2, .bazaar h3, .bazaar .tile-title, .bazaar .featured-title, .bazaar .guide-callout-title, .bazaar .stop-body h2, .bazaar .other { font-family: var(--serif); font-weight: 600; font-variation-settings: 'opsz' 28; letter-spacing: -.01em; }
.bazaar .hero h1 { font-weight: 600; letter-spacing: -.02em; line-height: 1.02; }
.bazaar .brand-text { font-family: var(--serif); }
.bazaar .brand-word { font-weight: 500; letter-spacing: .08em; }
.bazaar .footer-brand { font-family: var(--serif); }
/* Labels: small, widely spaced capitals in Helvetica */
.bazaar .eyebrow, .bazaar .tile-kicker, .bazaar .venue-rank, .bazaar .feature-kicker, .bazaar .stop-time, .bazaar .why-h, .bazaar .hot-thread, .bazaar .byline, .bazaar .li-count { font-family: var(--sans); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.bazaar .badge { font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #000 !important; background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
/* Square photos everywhere, no shadows */
.bazaar .tile, .bazaar .week-pick-media, .bazaar .featured-media, .bazaar .guide-callout, .bazaar .gallery-track, .bazaar .gallery-area .slide, .bazaar .venue-map iframe, .bazaar .card-photo img, .bazaar .card-logo img, .bazaar .inline-photo, .bazaar .tile img, .bazaar .list-map-canvas, .bazaar .near-map, .bazaar .trip-map-canvas, .bazaar .card-illo img { border-radius: 0 !important; box-shadow: none !important; }
/* Cards: flat, white, hairline dividers; headline highlight slides in on hover; monochrome */
.bazaar .card, .bazaar .card[style*="--sec"] { border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--bz-line) !important; box-shadow: none !important; background: #fff; transform: none !important; }
.bazaar:not(.afar) .cards { gap: 0 !important; }   /* 29 Oct 2026: not on afar pages, whose grid needs its 40px/26px gap (cards ran together on guide pages) */
.bazaar .card .rank, .bazaar .card[style*="--sec"] .rank { background: #fff; color: #000; font-family: var(--serif); }
.bazaar .card-top .rank, .bazaar .card-top[style*="--sec"] .rank { background: #000; color: #fff; }
.bazaar .card h3 { font-size: 1.55rem; }
.bazaar .card h3 a, .bazaar .tile-title, .bazaar .stop-body h2 a { background: linear-gradient(var(--bz-grey), var(--bz-grey)) 0 100% / 0 100% no-repeat; transition: background-size .45s ease; }
.bazaar .card:hover h3 a, .bazaar .stop:hover h2 a { background-size: 100% 100%; }
.bazaar .card .meta .area, .bazaar .card[style*="--sec"] .meta .area { color: #525252; }
.bazaar .card-links a.details, .bazaar .card[style*="--sec"] .card-links a.details { color: #000; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bazaar .card-photo img { box-shadow: none !important; }
body.bazaar[data-sec] .hero { box-shadow: none; }
body.bazaar[data-sec] .venue-rank, body.bazaar[data-sec] .feature-kicker, body.bazaar[data-sec] .venue-about h3.art-h { color: #000; }
body.bazaar[data-sec] .venue-about h3.art-h { border-top-color: #000; }
body.bazaar[data-sec] .venue-facts { border-top: 1px solid #000; }
/* Buttons and chips: square, black and white, spaced capitals */
.bazaar .btn { border-radius: 0 !important; background: #000; color: #fff; box-shadow: none; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 15px 28px; }
.bazaar .btn-ghost, .bazaar.theme-light .venue-actions .btn-ghost, .bazaar.theme-light .show-all .btn-ghost, .bazaar.theme-light .near-actions .btn-ghost, .bazaar.theme-light .trip-tools .btn-ghost { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; backdrop-filter: none; }
.bazaar .hero .btn { background: #fff; color: #000; }
.bazaar .hero .btn-ghost { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; }
.bazaar .chip, .bazaar .guide-nav a { border-radius: 0 !important; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.bazaar .hero-search input { border-radius: 0 !important; }
.bazaar .nl-row input, .bazaar .nl-row .btn { border-radius: 0 !important; }
/* Homepage and section titles: large, centred, with a fine rule above, like a magazine section opener */
.bazaar .home-feature h2, .bazaar .plan > h2, .bazaar .areas > h2, .bazaar .all-lists > h2, .bazaar #top-picks h2, .bazaar .hot-topics > h2, .bazaar .others > h2 { text-align: center; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; padding-top: 28px; border-top: 1px solid #000; }
.bazaar .home-feature .eyebrow { text-align: center; }
.bazaar .hot-topics > p, .bazaar .hot-topics .guide-more { text-align: center; }
.bazaar .intro h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.bazaar .tile-title { font-size: 2rem; letter-spacing: -.015em; }
.bazaar .list-group > h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); border-top: 1px solid #000; }
.bazaar .venue-head h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; }
.bazaar .venue-about h3.art-h { font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; }
.bazaar blockquote.pull { font-family: var(--serif); font-weight: 600; font-variation-settings: 'opsz' 28; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; text-align: center; border-color: #000; }
.bazaar .hot-item a { border-radius: 0; }
.bazaar .hot-text { font-family: var(--serif); font-size: 1.2rem; }
.bazaar .list-index a { font-family: var(--serif); font-size: 1.4rem; }
.bazaar .list-index li[style*="--sec"] > a::before { background: #000; }
@media (max-width: 640px) { .bazaar .card h3 { font-size: 1.25rem; } .bazaar .venue-head h1 { font-size: 2.3rem; } }
/* "Our favourites right now": a black band */
#top-picks.band { background: #000 !important; border-color: #000; }
#top-picks h2 { color: #fff; border-top-color: #fff !important; }
#top-picks .pick { background: #000; border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; border-radius: 0; }
#top-picks .pick h3, #top-picks .pick h3 a { color: #fff; border-bottom-color: rgba(255, 255, 255, .35); }
#top-picks .pick li a { color: #fff; border-bottom-color: rgba(255, 255, 255, .2); }
#top-picks .pick small { color: rgba(255, 255, 255, .7); }
#top-picks .pick-rank { background: #fff; color: #000; border: 0; }
#top-picks .pick a:not(li a) { color: #fff; }
#top-picks .pick:hover { border-color: #fff; transform: none; }
/* Footer: tidy folded groups */
.footer-folded { grid-template-columns: 1.3fr 2fr; align-items: start; }
.footer-folds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.footer-fold { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.footer-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; margin: 0; }
.footer-fold > summary::-webkit-details-marker { display: none; }
.footer-fold > summary::after { content: '+'; font-size: 1.1rem; letter-spacing: 0; color: #fff; }
.footer-fold[open] > summary::after { content: '\2212'; }
.footer-fold > .footer-links { padding: 0 0 16px; }
@media (max-width: 720px) { .footer-folded, .footer-folds { grid-template-columns: 1fr; } }
.bazaar .feature-more summary { border-radius: 0; background: #000; color: #fff; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 14px 24px; }
.bazaar .feature-more[open] summary { background: #fff; color: #000; border: 1px solid #000; }
.bazaar .guide-links .btn-ghost, .bazaar .cta-panel .btn-ghost { color: #000 !important; border: 1px solid #000 !important; border-radius: 0 !important; }
/* Know your neighbourhoods: photo-led magazine index */
.area-img, .area-kicker { display: none; }
.bazaar .areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.bazaar .area-card { display: flex !important; flex-direction: column; padding: 0; border: 0 !important; border-radius: 0; background: none; box-shadow: none !important; transform: none !important; }
.bazaar .area-img { display: block; overflow: hidden; background: #eee; margin-bottom: 14px; }
.bazaar .area-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s ease; }
.bazaar .area-card:hover .area-img img { transform: scale(1.03); }
.bazaar .area-kicker { display: block; font: 500 .68rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #000; margin-bottom: 6px; }
.bazaar .area-card h3 { font-family: var(--serif); font-weight: 600; font-variation-settings: 'opsz' 28; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 8px; color: #000; }
.bazaar .area-card h3 { background: linear-gradient(var(--bz-grey), var(--bz-grey)) 0 100% / 0 100% no-repeat; transition: background-size .45s ease; align-self: flex-start; }
.bazaar .area-card:hover h3 { background-size: 100% 100%; }
.bazaar .area-card p { color: #444; font-size: .95rem; line-height: 1.55; margin: 0 0 12px; text-align: left !important; hyphens: none !important; }
.bazaar .area-more { margin-top: auto; font: 500 .7rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #000; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 860px) { .bazaar .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bazaar .areas-grid { grid-template-columns: 1fr; } .bazaar .area-img img { aspect-ratio: 3 / 2; } }
/* Neighbourhood pages: Bazaar touches */
.bazaar .hood-places { font-family: var(--serif); text-align: center; font-size: clamp(2.2rem, 4.6vw, 3.4rem); border-top: 1px solid #000; padding-top: 28px; }
.bazaar .venue .other, .bazaar .others-grid .other { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #000 !important; }
/* Bazaar header: the menu always visible as a row under the logo on computers and tablets (phones keep the Menu button) */
@media (min-width: 900px) {
  .bazaar .header-inner { flex-wrap: wrap; row-gap: 0; }
  .bazaar .menu-toggle, .bazaar .nav-cta { display: none !important; }
  .bazaar .header-tools { order: 3; margin-left: auto; }
  .bazaar .site-nav { display: flex !important; order: 10; flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 4px; position: static; margin: 0 !important; padding: 2px 0 6px; background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, .16); box-shadow: none; max-height: none; overflow: visible; }
  .bazaar .site-nav > a, .bazaar .site-nav > .nav-item > a, .bazaar .nav-more > summary { font-size: .68rem !important; font-weight: 500; letter-spacing: .12em !important; text-transform: uppercase; padding: 12px 8px !important; white-space: nowrap; border-radius: 0 !important; border: 0 !important; color: rgba(255, 255, 255, .88); background: none !important; }
  .bazaar .site-nav > a:hover, .bazaar .nav-more > summary:hover, .bazaar .nav-more[open] > summary, .bazaar .nav-more.has-current > summary, .bazaar .site-nav > a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .bazaar .nav-more > summary::after { content: ''; }
  .bazaar .nav-more-menu { position: absolute; left: 50% !important; right: auto !important; transform: translateX(-50%); top: 100%; min-width: 240px; padding: 10px; gap: 0; background: #000; border: 1px solid rgba(255, 255, 255, .25); border-radius: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); z-index: 200; }
  .bazaar .nav-more-menu a { padding: 9px 12px !important; border-radius: 0; font-size: .86rem; color: rgba(255, 255, 255, .85); text-transform: none; letter-spacing: .01em; }
  .bazaar .nav-more-menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .bazaar .nav-item { display: flex; }
  /* the first dropdown opens to the right so its left side is never cut off (app.js also keeps every dropdown on screen, 27 Oct 2026) */
  .bazaar .site-nav > .nav-group:first-child .nav-more-menu { left: 0 !important; transform: none; }
}
@media (min-width: 900px) and (max-width: 1180px) { .bazaar .site-nav > a, .bazaar .site-nav > .nav-item > a, .bazaar .nav-more > summary { font-size: .62rem !important; letter-spacing: .08em !important; padding: 12px 6px !important; } }
.bazaar .site-nav a.has-dot::before { display: none; }
/* Timelines (dates down a fine line) on both sites */
.bazaar .dir-timeline { margin: 0 0 28px; }
.bazaar .dir-timeline ol { list-style: none; margin: 10px 0 0; padding: 0 0 0 2px; border-left: 1px solid #000; }
.bazaar .dir-timeline li { position: relative; padding: 0 0 16px 22px; }
.bazaar .dir-timeline li::before { content: ''; position: absolute; left: -4.5px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: #000; }
.bazaar .dir-timeline .tl-date { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #666; margin-bottom: 2px; }
/* Belgrade photos in full colour (the maps keep their black-and-white tiles) */
.refresh .hero-img, .refresh .tile img, .refresh .week-pick-media img, .refresh .guide-callout img, .refresh .featured-media img, .refresh .card img, .refresh .area-img img, .refresh .inline-photo img { filter: none !important; }
/* Belgrade headers match Athens (the older refresh rules made the headline larger) */
.bazaar.refresh .hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); letter-spacing: -.02em; line-height: 1.02; }
/* Every list in the guide (Belgrade's typographic index): a compact four-column index */
.bazaar .list-index { columns: auto !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid #000; margin-top: 4px; }
.bazaar .list-index a { padding: 9px 0 !important; font-size: 1.02rem !important; line-height: 1.25; border-bottom: 1px solid #e5e5e5 !important; gap: 8px !important; }
.bazaar .list-index li[style*="--sec"] > a::before { width: 5px; height: 5px; margin-right: 6px; }
.bazaar .list-index .li-count { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #888; }
.bazaar .all-lists { padding-bottom: 40px; }
@media (max-width: 1100px) { .bazaar .list-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bazaar .list-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .bazaar .list-index a { font-size: .95rem !important; } }
/* A reversed homepage feature (black band, white type, white-bordered tiles), e.g. "A night at the opera" */
.feature-dark { background: #000; color: #fff; box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); }
.intro.feature-dark { margin-top: 72px !important; margin-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; padding-top: 56px !important; padding-bottom: 28px !important; }
.feature-dark h2, .feature-dark p, .feature-dark .eyebrow { color: #fff !important; }
.bazaar .home-feature.feature-dark h2 { border-top-color: #fff !important; }
.lead-tiles.feature-dark { padding-top: 8px !important; padding-bottom: 64px !important; }
.feature-dark .tile { box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #fff !important; outline: 1px solid #fff; outline-offset: 4px; }

/* Reserve space for inline feature photos so the page does not jump as they load */
.feature-inline img { aspect-ratio: 3 / 2; height: auto; }
/* Comfortable tap targets for footer links on phones */
.footer-links a { display: inline-block; padding: 4px 0; min-width: 24px; }
/* Small phones, venue and article pages: keep the Menu button on screen (the weather chip is on every other page) */
@media (max-width: 420px) { .has-venue-bar .header-tools .wx { display: none; } }
@media (max-width: 380px) { .site-header .header-inner { gap: 4px; } .site-header .menu-toggle { padding: 7px 9px; } }
@media (max-width: 380px) { .bazaar .brand-text { font-size: 1rem; } .bazaar .brand-word { letter-spacing: .05em; } .brand-text small { letter-spacing: .18em; } }
@media (max-width: 340px) { .bazaar .brand-text { font-size: .9rem; } .header-tools .wx { display: none; } }
.nl-row > * { min-width: 0; }
@media (max-width: 340px) { .nl-row { flex-wrap: wrap; } .nl-row .btn { width: 100%; } }
/* The ULTIMATE network: the family of city guides, above the copyright line */
.network { border-top: .5px solid rgba(255, 255, 255, .12); margin-top: 36px; padding-top: 28px; }
.network-title { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin: 0 0 6px; }
.network-tag { margin: 0 0 20px; font-size: .9rem; }
.network-friend { margin: 20px 0 0; font-size: .9rem; }
.network-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .network-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .network-grid { grid-template-columns: 1fr; gap: 16px; } }
.network-h { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin: 0 0 10px; }
.network-h a { color: inherit; text-decoration: none; }
.network-h a:hover, .network-h a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.network ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.network a { display: inline-block; padding: 3px 0; }
.network [aria-current] { display: inline-block; padding: 3px 0; color: #fff; font-weight: 600; }
.network-soon { display: inline-block; padding: 3px 0; color: rgba(255, 255, 255, .55); }
.network-soon small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin-left: 4px; color: rgba(255, 255, 255, .4); }
.network-soon small { display: block; margin: 1px 0 0; }
/* Network footer as destination pills: one region per row, rounded pill links */
.network-grid { display: block; }
.network-col { margin: 0 0 14px; }
.network-col:last-child { margin-bottom: 0; }
.network ul { display: flex; flex-wrap: wrap; gap: 6px; font-size: .76rem; }
.network a, .network [aria-current], .network-soon { display: inline-block; padding: 3px 10px; border: .5px solid rgba(255, 255, 255, .28); border-radius: 999px; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.network a:hover, .network a:focus-visible { background: #fff; border-color: #fff; color: #111; }
.network [aria-current] { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }
.network-soon small { display: inline; margin: 0 0 0 4px; }
.network-country { opacity: .6; font-weight: 400; }
.network a:hover .network-country, .network a:focus-visible .network-country { opacity: .75; }
@media (min-width: 901px) { .network-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 36px; align-items: start; } .network-col { margin: 0; } }
/* Landing pages: the short answer box at the top and the questions and answers */
.answer-box { border: 1px solid #000; padding: 20px 22px; margin: 8px 0 32px; background: #fff; }
.answer-kicker { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 8px; }
.answer-box p { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.55; }
.answer-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; margin: 14px 0 0; }
.answer-facts dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.answer-facts dd { margin: 2px 0 0; font-weight: 600; }
.faq-item { border-top: .5px solid var(--line); padding: 12px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin: 8px 0 0; }
/* c.faq on list pages (30 Oct 2026): own block after the cards, on the 860 px reading column */
.list-faq { margin: 56px 0 32px; padding-top: 32px; border-top: .5px solid var(--line); max-width: 860px; }
.list-faq h2 { margin: 0 0 16px; }
.list-faq .faq-item summary { padding: 10px 0; }

/* Sister guides on the homepage (site.network.home) */
.sister-sites { padding-top: 8px; padding-bottom: 56px; }
.sister-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.sister-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--card, transparent); border: .5px solid var(--line); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.sister-card:hover, .sister-card:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.sister-card img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; }
.sister-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.sister-country { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.sister-name { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.sister-desc { font-size: .95rem; line-height: 1.5; opacity: .85; flex: 1; }
.sister-go { font-weight: 600; margin-top: 4px; }
.sister-soon { margin-top: 18px; font-size: .9rem; }

/* .crimson: an accent modifier for a cyclades site (used by Sri Lanka only). Additive: it overrides the blue #0d5eaf accents with crimson. */
.crimson { --cyc: #A51C30; --accent: #A51C30; }
.crimson .badge, .crimson .guide-nav a { border-color: rgba(165, 28, 48, .35); }
.crimson .venue-about p.byline { color: #9c4a55; }
.crimson .feature-kicker, .crimson .cta-kicker, .crimson .wx-card-name, .crimson .season dt, .crimson .faq-q summary::after, .crimson .ferry-table tbody th a, .crimson .itin-links a { color: #A51C30; }
.crimson .guide-tile:hover { box-shadow: 0 8px 24px rgba(165, 28, 48, .14); }
.crimson .cta-panel { background: linear-gradient(135deg, #fbeaec, #fff6f7); border-color: rgba(165, 28, 48, .25); }
.crimson .wx-card { background: linear-gradient(160deg, #fbeaec, #fffafa); border-color: rgba(165, 28, 48, .2); }
.crimson .cta-panel .btn-ghost, .crimson .guide-links .btn-ghost { color: #A51C30 !important; border-color: rgba(165, 28, 48, .45) !important; }
.crimson .cta-panel .btn-ghost:hover, .crimson .guide-links .btn-ghost:hover { background: #A51C30 !important; color: #fff !important; }
.crimson .pick-chip { border-color: rgba(165, 28, 48, .35); color: #A51C30; }
.crimson .pick-chip[aria-pressed="true"] { background: #A51C30; color: #fff; border-color: #A51C30; }
.crimson .ferry-table tbody tr:nth-child(odd) { background: rgba(165, 28, 48, .04); }
.crimson .feature-more summary { background: #A51C30; }
.crimson .feature-more[open] summary { background: #fff; color: #A51C30; border-color: rgba(165, 28, 48, .4); }
.crimson .discuss-jump a { color: #A51C30; }
.crimson .near-you { background: #A51C30; box-shadow: 0 0 0 1px #A51C30; }
/* Magazine feature: listing pages with an in-depth article (l.article) get a kicker and a drop cap. Pages without an article are unchanged. */
.venue-about.is-article > h2::before { content: "Feature"; display: block; font-family: var(--sans); font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.venue-about.is-article > h3.art-h:first-of-type + p::first-letter { float: left; font-family: var(--serif); font-size: 4.1em; line-height: .8; font-weight: 400; margin: .07em .09em 0 0; color: var(--cyc, currentColor); }

/* venue-page folded story (l.foldStory), additive 2026-10-19 */
.venue-fold { margin: 28px 0; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .12); }
.venue-fold .art-h { margin-top: 4px; }

/* "What's nearby" distance panel (site.nearby), additive 2026-10-20 */
.nearby { background: var(--surface); border: .5px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin: 0 0 40px; box-shadow: var(--shadow); scroll-margin-top: 90px; }
.nearby h2 { font-size: 1.5rem; margin-bottom: .25em; }
.nearby > .muted { margin: 0 0 18px; }
.nearby-lead { border-top: 3px solid var(--accent); }
.nearby-lead h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.nearby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 40px; }
.nearby-col { min-width: 0; }
.nearby-col h3 { font-family: var(--sans); font-size: .74rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.nearby-list { list-style: none; margin: 0; padding: 0; }
.nearby-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: .5px solid var(--line); }
.nearby-list li:last-child { border-bottom: 0; }
.nearby-name { min-width: 0; overflow-wrap: anywhere; }
.nearby-name a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.nearby-name a:hover { text-decoration-color: currentColor; }
.nearby-lines { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.nearby-line { font-size: .72rem; line-height: 1.5; padding: 0 7px 0 6px; border-radius: 4px; border-left: 4px solid var(--line-c, var(--muted)); background: var(--accent-soft); color: var(--ink); white-space: nowrap; }
.theme-light .nearby-line { background: rgba(0, 0, 0, .05); }
.nearby-d { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nearby-d small { display: block; color: var(--muted); font-size: .78rem; }
@media (max-width: 700px) { .nearby { padding: 20px 18px; } .nearby-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* hotel booking form fits phones (375 px): grid items may shrink below the date input's intrinsic width, additive 2026-10-20 */
@media (max-width: 860px) { .booking-form > label, .booking-form input, .booking-form select { min-width: 0; } }
.near-more { font-size: .88rem; text-underline-offset: 3px; }

/* "What's nearby": taxi ranks (site.nearby.taxis) and walk / cycle / car times (site.nearby.modes), additive 2026-10-20 */
.nearby-col h3.nearby-sub { margin-top: 22px; }
.nearby-note { font-size: .8rem; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.nearby-list li.has-modes { flex-wrap: wrap; row-gap: 2px; }
.nearby-list li.has-modes .nearby-name { flex: 1 1 0; }
.nearby-modes { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nearby-mode { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nearby-mode svg { flex: 0 0 auto; }

/* Hero size standard (all sites, 2026-10-20): page heroes and the venue photo are about min(52vh, 460px) tall on
   desktop, so the essentials sit on the first screen. Titles run wider and a little smaller so hero text is never cut off. */
@media (min-width: 641px) {
  .venue .gallery .slide { aspect-ratio: auto; height: min(52vh, 460px); }
  .venue .gallery-empty { aspect-ratio: auto; padding: 48px 0; }
}
@media (min-width: 761px) {
  .hero, .hero-big { min-height: min(52vh, 460px); }
  .hero-inner { padding: 48px 0 32px; }
  .hero h1, .refresh .hero h1, .bazaar.refresh .hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); max-width: 24ch; margin-bottom: 16px; }
  .hero-lead { max-width: 72ch; }
  .hero-big .hero-search { margin-top: 18px; }
  .hero-big .hero-cta { margin-top: 16px; }
}

/* Network band under the home hero: links the ULTIMATE City Guides hub */
.net-strip { background: #000; color: #fff; padding: 14px 0; }
/* Hairline box so the network link stands out on the homepage (user, 23 Oct 2026) */
.net-strip-in { border: .5px solid rgba(255, 255, 255, .7); }
/* Glass finish on the hub band: subtle black glass, square edges, no rim (user, 23 Oct 2026) */
.net-strip-in { position: relative; overflow: hidden; border: 0; border-radius: 0; background: linear-gradient(180deg, #363636 0%, #222 47%, #0b0b0b 50%, #050505 85%, #0f0f0f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 20px rgba(0, 0, 0, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.net-strip-in::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 47%; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)); pointer-events: none; }
.net-strip-in > * { position: relative; z-index: 1; }
/* Full width, flush against the band or hero above (user, 23 Oct 2026) */
.net-strip { padding: 0; }
.net-strip-in { width: 100%; max-width: none; margin: 0; padding: 1rem 16px; }
.net-strip-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .35rem 1.25rem; padding: .85rem 16px; color: #fff; text-decoration: none; text-align: center; }
.net-strip-brand { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.net-strip-text { font-size: .9rem; opacity: .85; }
.net-strip-go { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 1px; }
.net-strip-in:hover .net-strip-go, .net-strip-in:focus-visible .net-strip-go { border-bottom-color: #fff; }
@media (max-width: 600px) { .net-strip-text { flex-basis: 100%; order: 2; font-size: .82rem; } .net-strip-go { order: 3; } }

/* ===== NOIR (22 Oct 2026): black pages with white type on every page except opened articles and
   long-form info pages. build.js adds "noir" to <body> on every page built without o.serif, so the
   white editorial pages (venue articles, guide features, info pages) keep the light theme above.
   Small islands (cyclades without ink) keep a lighter Aegean blue that reads on black. ===== */
body.noir {
  --bg: #000; --bg-soft: #0e0e0e;
  --surface: #0b0b0b; --surface-2: #141414;
  --heading: #fff; --ink: #e6e6e6; --muted: #a6a6a6;
  --line: #2b2b2b; --accent: #fff; --accent-hover: #fff; --accent-soft: rgba(255, 255, 255, .12);
  --bz-grey: #262626; --bz-line: #2b2b2b;
  --cyc: #5aa9f0;
  --shadow: none;
  background: #000; color: var(--ink);
}
body.noir.ink { --cyc: #fff; }
body.noir.crimson { --cyc: #ff7d8f; --accent: #ff7d8f; }
html:has(body.noir) { color-scheme: dark; }
body.noir .tilt::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .05), transparent 45%); }
body.noir .tilt.is-tilting { box-shadow: 0 30px 56px -18px rgba(0, 0, 0, .8); }

/* Hairlines that were black on white turn to quiet grey on black */
body.noir .tile, body.noir .gallery, body.noir .trailers-frame, body.noir .featured-media, body.noir .guide-callout img,
body.noir .card-photo img, body.noir .week-pick-media, body.noir .venue-map iframe, body.noir .card-logo img { border-color: var(--line); }
body.noir .list-group > h2, body.noir .all-lists > h2, body.noir .why, body.noir .dir-group, body.noir .dir-group:last-of-type,
body.noir .stops, body.noir .near-list, body.noir .refresh .list-index, body.noir .refresh .dir-timeline ol, body.noir .bazaar .dir-timeline ol,
body.noir .hood-places, body.noir .refresh blockquote.pull, body.noir blockquote.pull, body.noir .answer-box { border-color: rgba(255, 255, 255, .35) !important; }
body.noir .why li::before { border-top-color: #fff; }
body.noir .stop::before, body.noir .refresh .dir-timeline li::before, body.noir.bazaar .dir-timeline li::before { background: #fff; }
body.noir .stop-n, body.noir .saved-n { background: #fff; color: #000; }
@media (min-width: 761px) { body.noir .intro { border-color: rgba(255, 255, 255, .35); } body.noir .intro > p { color: var(--ink); } }

/* Ticker, section menus and chips */
body.noir .ticker { background: #000; border-block-color: var(--line); }
body.noir .ticker-run > * { color: #e6e6e6; }
body.noir .ticker-run > *::after { background: #fff; }
body.noir .ticker-run > a:hover, body.noir .ticker-run > a:focus-visible { color: #fff; }
body.noir .guide-nav { background: rgba(0, 0, 0, .92); border-bottom-color: var(--line); }
body.noir .guide-nav a { color: #fff; border-color: rgba(255, 255, 255, .3); }
body.noir .guide-nav a span { color: rgba(255, 255, 255, .6); }
body.noir .guide-nav a:hover { border-color: #fff; color: #fff; background: transparent; }
body.noir .chip { background: #0b0b0b; color: var(--ink); }
body.noir .chip.is-on, body.noir .chip[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
body.noir .chip.is-on span { color: #000; }
body.noir .pick-chip { background: #0b0b0b; color: #fff; border-color: rgba(255, 255, 255, .3); }
body.noir .pick-chip[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
body.noir .near-chip[aria-pressed="true"] { background: #fff !important; color: #000; border-color: #fff; }
body.noir .lang-switch button[aria-pressed="true"] { color: #fff; border-bottom-color: #fff; }

/* Cards and logos */
body.noir .card, body.noir.bazaar .card, body.noir.bazaar .card[style*="--sec"] { background: #0b0b0b; }
body.noir.bazaar .card .rank, body.noir.bazaar .card[style*="--sec"] .rank { background: #0b0b0b; color: #fff; }
body.noir.bazaar .card-top .rank, body.noir.bazaar .card-top[style*="--sec"] .rank, body.noir .card-top .rank { background: #161616; color: #fff; }
body.noir.bazaar .card-links a.details, body.noir.bazaar .card[style*="--sec"] .card-links a.details { color: #fff; }
body.noir.bazaar .badge { color: #fff !important; }
body.noir .badge { border-color: rgba(255, 255, 255, .3); }
body.noir .card-mono, body.noir.theme-light .card-mono { background: #0b0b0b; color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 6px #0b0b0b, inset 0 0 0 6.5px rgba(255, 255, 255, .18); }
@media (max-width: 640px) { body.noir.theme-light .card-mono { box-shadow: inset 0 0 0 4px #0b0b0b, inset 0 0 0 4.5px rgba(255, 255, 255, .18); } }
body.noir .card-logo img { background: #fff; }
body.noir .refresh .card-illo img, body.noir.refresh .card-illo img { background: #f4f4f4; border-color: #2b2b2b; }
body.noir .card[style*="--sec"] { box-shadow: inset 3px 0 0 var(--sec); }
body.noir .card[style*="--sec"]:hover { box-shadow: inset 3px 0 0 var(--sec), 0 18px 36px -16px rgba(0, 0, 0, .9); }
body.noir.theme-light .card:hover, body.noir.theme-light .pick:hover, body.noir.theme-light .review-link:hover, body.noir.theme-light .other:hover { border-color: rgba(255, 255, 255, .4); }
body.noir .itin, body.noir .answer-box, body.noir .saved-list button { background: #0b0b0b; color: var(--ink); }

/* Buttons: white on black, ghost buttons outlined in white */
body.noir.bazaar .btn { background: #fff; color: #000; }
body.noir.bazaar .btn-ghost, body.noir.bazaar.theme-light .venue-actions .btn-ghost, body.noir.bazaar.theme-light .show-all .btn-ghost,
body.noir.bazaar.theme-light .near-actions .btn-ghost, body.noir.bazaar.theme-light .trip-tools .btn-ghost,
body.noir.theme-light .venue-actions .btn-ghost, body.noir.theme-light .show-all .btn-ghost, body.noir.theme-light .near-actions .btn-ghost, body.noir.theme-light .trip-tools .btn-ghost {
  background: #000 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .6) !important; }
body.noir.bazaar .btn-ghost:hover { background: #fff !important; color: #000 !important; }
body.noir.bazaar .hero .btn-ghost { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; }
body.noir.bazaar .hero .btn-ghost:hover { background: rgba(255, 255, 255, .14) !important; }
body.noir .save-btn.is-saved, body.noir.theme-light .save-btn.is-saved { background: #fff; color: #000; border-color: #fff; }
body.noir .trip-tools .trip-wa { color: #fff; }
body.noir .cta-panel, body.noir.ink .cta-panel, body.noir.crimson .cta-panel { background: #0e0e0e; border-color: var(--line); }
body.noir .cta-panel .btn-ghost, body.noir .guide-links .btn-ghost, body.noir.ink .cta-panel .btn-ghost, body.noir.ink .guide-links .btn-ghost,
body.noir.bazaar .guide-links .btn-ghost, body.noir.bazaar .cta-panel .btn-ghost { background: #000 !important; color: #fff !important; border-color: rgba(255, 255, 255, .6) !important; }
body.noir .cta-panel .btn-ghost:hover, body.noir .guide-links .btn-ghost:hover { background: #fff !important; color: #000 !important; }
body.noir .feature-more summary, body.noir.ink .feature-more summary, body.noir.bazaar .feature-more summary { background: #fff; color: #000; }
body.noir .feature-more[open] summary, body.noir.ink .feature-more[open] summary, body.noir.bazaar .feature-more[open] summary { background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
body.noir .hot-item a:hover { background: #fff; color: #000; }

/* Text set in hard black or grey for the white pages */
body.noir.bazaar[data-sec] .venue-rank, body.noir.bazaar[data-sec] .feature-kicker, body.noir.bazaar[data-sec] .venue-about h3.art-h,
body.noir.ink .feature-kicker, body.noir.ink .cta-kicker, body.noir.ink .wx-card-name, body.noir.ink .season dt, body.noir.ink .faq-q summary::after,
body.noir.ink .ferry-table tbody th a, body.noir.ink .itin-links a, body.noir.ink .discuss-jump a,
body.noir .refresh .list-index a, body.noir.refresh .list-index a, body.noir .refresh .fact-icon, body.noir.refresh .fact-icon,
body.noir.bazaar .area-kicker, body.noir.bazaar .area-card h3, body.noir.bazaar .area-more, body.noir .near-list a, body.noir .near-list .near-d,
body.noir .leaflet-popup-content a { color: #fff; }
body.noir.bazaar[data-sec] .venue-about h3.art-h { border-top-color: #fff; }
body.noir.bazaar[data-sec] .venue-facts { border-top-color: #fff; }
body.noir.bazaar .area-card p, body.noir .near-list small, body.noir.bazaar .dir-timeline .tl-date, body.noir .checked, body.noir .wx-card-days,
body.noir.ink .venue-about p.byline, body.noir.ink .guide-feature .byline, body.noir .refresh .inline-photo figcaption { color: var(--muted); }
body.noir .refresh .inline-photo figcaption { background: transparent; }
body.noir .refresh .list-index a, body.noir.refresh .list-index a, body.noir.bazaar .list-index a { border-bottom-color: var(--line) !important; }
body.noir .refresh .list-index a:hover { border-bottom-color: #fff !important; }
body.noir.bazaar .list-index li[style*="--sec"] > a::before { background: #fff; }
body.noir.bazaar .home-feature h2, body.noir.bazaar .plan > h2, body.noir.bazaar .areas > h2, body.noir.bazaar .all-lists > h2,
body.noir.bazaar .hot-topics > h2, body.noir.bazaar .others > h2, body.noir.bazaar .list-group > h2 { border-top-color: rgba(255, 255, 255, .35) !important; }
body.noir.bazaar .venue .other, body.noir.bazaar .others-grid .other { border-color: rgba(255, 255, 255, .35) !important; }
body.noir.ink .badge, body.noir.ink .guide-nav a { border-color: rgba(255, 255, 255, .3); }
body.noir.ink .guide-tile:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .8); }
body.noir.ink .ferry-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .04); }

/* Small islands: the Aegean blue lightened to read on black */
body.noir.cyclades:not(.ink) .badge, body.noir.cyclades:not(.ink) .guide-nav a, body.noir.cyclades:not(.ink) .pick-chip { border-color: rgba(90, 169, 240, .45); }
body.noir.cyclades:not(.ink) .guide-nav a:hover { background: var(--cyc); color: #000; }

/* Weather, newsletter, forms, maps */
body.noir .wx-card, body.noir.ink .wx-card, body.noir.crimson .wx-card { background: #0e0e0e; border-color: var(--line); }
body.noir .newsletter { background: #0e0e0e; color: var(--ink); border-top-color: var(--line); }
body.noir .newsletter .eyebrow, body.noir .newsletter h2 { color: #fff; }
body.noir .newsletter p { color: var(--ink); }
body.noir .nl-check { color: var(--muted); }
body.noir .nl-row input, body.noir .submit-form input:not([type=checkbox]), body.noir .submit-form select, body.noir .submit-form textarea,
body.noir .discuss-form input, body.noir .discuss-form select, body.noir .discuss-form textarea,
body.noir.theme-light .booking-form input, body.noir.theme-light .booking-form select { background: #0b0b0b; color: #fff; border-color: rgba(255, 255, 255, .45); }
body.noir .nl-row .btn { background: #fff; color: #000; }
body.noir .list-map { background: #0b0b0b; }
body.noir .list-map-canvas, body.noir .near-map, body.noir .trip-map-canvas { background: #1a1a1a; }
body.noir .ig-item, body.noir .ig-item iframe { background: #0b0b0b; }
body.noir.refresh .tile, body.noir.refresh .slide, body.noir.refresh .week-pick-media, body.noir.refresh .featured-media, body.noir.refresh .guide-callout, body.noir.refresh .inline-photo { background-color: #141414; }
@media (max-width: 760px) {
  body.noir .tabbar { background: rgba(0, 0, 0, .96); border-top-color: var(--line); }
  body.noir .tabbar a { color: #fff; }
}
body.noir .venue-fold { border-top-color: var(--line); }
body.noir.theme-light .nearby-line { background: rgba(255, 255, 255, .08); }
body.noir.bazaar .card .meta .area, body.noir.bazaar .card[style*="--sec"] .meta .area { color: #b8b8b8; }

/* Maps: dark tiles (the grey map inverted), dark pop-ups and controls; pins stay red */
body.noir .leaflet-container { background: #1a1a1a; }
body.noir .leaflet-container .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.88) contrast(.92); }
body.noir .leaflet-popup-content-wrapper, body.noir .leaflet-popup-tip { background: #0b0b0b; color: #e6e6e6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 24px rgba(0, 0, 0, .6); }
body.noir .leaflet-popup-content a, body.noir .leaflet-container a.leaflet-popup-close-button { color: #fff; }
body.noir .leaflet-control-attribution { background: rgba(0, 0, 0, .75) !important; color: #a6a6a6; }
body.noir .leaflet-control-attribution a { color: #e6e6e6; }
body.noir .leaflet-bar a { background: #0b0b0b; color: #fff; border-bottom-color: #2b2b2b; }
body.noir .leaflet-bar a:hover { background: #222; }
body.noir .leaflet-bar { border-color: rgba(255, 255, 255, .3) !important; }

/* Weather pop-up */
body.noir .wx-pop { background: #0b0b0b; color: #e6e6e6; border: .5px solid rgba(255, 255, 255, .2); }
body.noir .wx-row { border-bottom-color: #2b2b2b; }
body.noir .wx-name, body.noir .wx-now, body.noir .wx-days li { color: #a6a6a6; }
body.noir .wx-big { color: #fff; }

/* Property calculators */
body.noir .calc { background: #0b0b0b; border-color: rgba(255, 255, 255, .5); }
body.noir .calc-input { background: #000; border-color: rgba(255, 255, 255, .35); }
body.noir .calc-choice input { accent-color: #fff; }
body.noir .calc .btn { background: #fff; color: #000; }
body.noir .calc .btn:hover { background: #d9d9d9; }
body.noir .calc-flag { border-left-color: #fff; }

/* Deep audit fixes (22 Oct 2026). "In depth" panels and the other navy/blue-on-white text blocks
   (small islands without ink kept the navy, which vanished on black) */
body.noir .cta-kicker, body.noir .feature-kicker, body.noir .wx-card-name, body.noir .season dt, body.noir .faq-q summary::after,
body.noir .ferry-table tbody th a, body.noir .itin-links a, body.noir .discuss-jump a { color: var(--cyc); }
body.noir .cta-title, body.noir .itin h3 { color: #fff; }
body.noir .cta-text, body.noir .itin-legs, body.noir .wx-card-wind { color: var(--ink); }
body.noir .wx-windy .wx-card-wind { color: #ff8a80; }
/* Map pop-ups: the grey subtitle under the place name */
body.noir .leaflet-popup-content small { color: var(--muted); }

/* White pages (no noir): AA contrast near-misses */
body.theme-light:not(.noir) .guide-callout { --heading: #0a0a0a; --ink: #1a1a1a; --muted: #5c6066; --accent: #000; --line: rgba(0, 0, 0, .12); }
body.theme-light:not(.noir) .guide-callout:hover { border-color: rgba(0, 0, 0, .4); }
body.theme-light:not(.noir) .guide-nav a span { color: rgba(0, 0, 0, .62); }
body.refresh:not(.noir) .inline-photo figcaption, body.refresh:not(.noir) .inline-photo figcaption a { color: #6b6b6b; }

/* Footer call-to-action band (22 Oct 2026): "Ready to plan your trip?" + three internal links, above the footer on every page.
   Black like .net-strip on both themes; hairlines separate it from the newsletter and footer on black pages. */
.foot-cta { background: #000; color: #fff; border-top: .5px solid rgba(255, 255, 255, .18); }
.foot-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-top: 26px; padding-bottom: 26px; }
.foot-cta-h { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; font-weight: 600; font-variation-settings: 'opsz' 28; color: #fff; }
.foot-cta-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.foot-cta-links a { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .55); color: #fff; text-decoration: none; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.foot-cta-links a:hover, .foot-cta-links a:focus-visible { background: #fff; color: #000; border-color: #fff; }
body.noir .foot-cta { border-bottom: .5px solid var(--line); }
.cyclades:not(.ink) .foot-cta-links a { border-color: #5aa9f0; }
.cyclades:not(.ink) .foot-cta-links a span { color: #5aa9f0; }
.cyclades:not(.ink) .foot-cta-links a:hover, .cyclades:not(.ink) .foot-cta-links a:focus-visible { background: #5aa9f0; border-color: #5aa9f0; color: #000; }
.cyclades:not(.ink) .foot-cta-links a:hover span, .cyclades:not(.ink) .foot-cta-links a:focus-visible span { color: #000; }
@media (max-width: 600px) {
  .foot-cta-in { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 22px; padding-bottom: 22px; }
  .foot-cta-h { font-size: 1.25rem; text-align: center; }
  .foot-cta-links { flex-direction: column; gap: 8px; }
  .foot-cta-links a { display: flex; justify-content: space-between; min-height: 48px; }
}

/* Guide navigation (user, 23 Oct 2026): footer region tabs, home region bar, recently viewed */
.network-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.network-tabs[hidden] { display: none; }
.network-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: .5px solid rgba(255, 255, 255, .5); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.network-tabs button .n { font-size: .68rem; color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
.network-tabs button:hover, .network-tabs button:focus-visible, .network-tabs button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.network-tabs button:hover .n, .network-tabs button:focus-visible .n, .network-tabs button[aria-pressed="true"] .n { color: #555; }
.network-grid.is-one { display: block; }
.network-col[hidden] { display: none; }
.regbar { position: sticky; top: var(--hdr, 68px); z-index: 40; background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: .5px solid rgba(255, 255, 255, .16); }
.regbar-in { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.regbar-label { flex: none; margin: 0; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.regbtns { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.regbtns a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: .5px solid rgba(255, 255, 255, .6); border-radius: 999px; color: #fff; text-decoration: none; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background .15s, color .15s; }
.regbtns a:hover, .regbtns a:focus-visible { background: #fff; color: #000; }
.regbtns a .n { margin-left: 8px; font-size: .68rem; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
.regbtns a:hover .n, .regbtns a:focus-visible .n { color: #555; }
.home-feature[id] { scroll-margin-top: calc(var(--hdr, 68px) + var(--regh, 76px) + 12px); }
@media (max-width: 1199px) and (pointer: coarse) {
  .regbtns { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .regbtns::-webkit-scrollbar { display: none; }
  .regbar-in { padding-right: 0; }
  .regbtns { padding-right: 16px; }
}
@media (min-width: 1200px) and (pointer: fine) { .regbtns a { min-height: 38px; } }
@media (max-width: 900px) {
  .network-tabs, .regbtns { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .network-tabs::-webkit-scrollbar, .regbtns::-webkit-scrollbar { display: none; }
  .network-tabs { margin-right: -16px; padding-right: 16px; }
  .regbar-in { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; padding-bottom: 8px; padding-right: 0; }
  .regbtns { padding-right: 16px; }
}
.recent { margin-top: 40px; margin-bottom: 40px; }
.recent h2 { margin: 0 0 14px; font-size: 1.5rem; }
.recent-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.recent-row a { display: flex; align-items: center; gap: 12px; min-height: 64px; height: 100%; box-sizing: border-box; padding: 8px 14px 8px 8px; text-decoration: none; color: inherit; border: .5px solid rgba(255, 255, 255, .22); border-radius: 12px; transition: border-color .15s; }
.recent-row a:hover, .recent-row a:focus-visible { border-color: #fff; }
.recent-row img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.recent-row a:not(:has(img)) { padding-left: 14px; }
.recent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-name { font-size: .9rem; line-height: 1.25; }
.recent-meta { font-size: .74rem; line-height: 1.3; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.noir) .recent-row a { border-color: rgba(0, 0, 0, .18); }
body:not(.noir) .recent-row a:hover, body:not(.noir) .recent-row a:focus-visible { border-color: #000; }
@media (max-width: 720px) {
  .recent-row { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .recent-row::-webkit-scrollbar { display: none; }
  .recent-row li { flex: 0 0 78%; }
}
@media print { .regbar, .recent, .network-tabs { display: none !important; } }

/* "Browse by type" section buttons under the hero (category c.jumpTop, opt-in) */
.list-jump-label { margin: 22px 0 4px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.list-jump-top { margin-bottom: 28px; }

/* Listing photos: 0.5px white stroke on the photo; credits folded into a "Photo" tab under the image, right-hand side (user, 23 Oct 2026, all sites) */
.gallery, body.noir .gallery { border: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.gallery-track, .bazaar .gallery-track { border-radius: 0 !important; }
.slide:has(> .cap-fold), body.noir .slide:has(> .cap-fold), .bazaar .slide:has(> .cap-fold) { background: transparent !important; }
.slide:has(> .cap-fold) > img { height: calc(100% - 26px); border: .5px solid #fff; border-radius: 8px; box-sizing: border-box; }
.card-photo img, body.noir .card-photo img { border-color: #fff; }
.slide figcaption.cap-fold { top: auto; left: auto; right: 0; bottom: 0; height: 26px; padding: 0; background: none; display: flex; align-items: center; justify-content: flex-end; }
.cap-fold summary { list-style: none; cursor: pointer; padding: 1px 7px; line-height: 1.5; border-radius: 999px; border: .5px solid var(--line, rgba(127, 127, 127, .5));
  background: transparent; color: var(--muted, #888); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; }
.cap-fold summary::-webkit-details-marker { display: none; }
.cap-fold details { position: relative; }
.cap-fold .cap-body { position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(86vw, 520px); padding: 8px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .82); border: .5px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .92); font-size: .78rem; line-height: 1.45; text-align: left; }
.cap-fold .cap-body a { color: #fff; }
.gallery-btn { top: calc(50% - 13px); }
/* Headroom (user rule, 23 Oct 2026, all sites): header, hero and gallery photos crop slightly high by default, so roofs, peaks and
   chimneys keep space above them; a photo's own "pos" (inline object-position) still wins. */
.hero-img, .slide img { object-position: 50% 40%; }

/* Rule book A5 (0.5 px white stroke on listing photos): the older `.card-photo img { border: 0 !important }` cancelled the
   white stroke, and "Recently viewed" thumbnails never had one. Restores it for both (24 Oct 2026). */
.card-photo img, body.noir .card-photo img, .bazaar .card-photo img, .recent-row img { border: .5px solid #fff !important; box-sizing: border-box; }

/* Rule book A5, widened (user, 24 Oct 2026): every photo, logo and tile carries the 0.5 px white stroke. Listing photos
   (.card-logo.card-photo) inherited the logo's white 10px mat, which hid the fine line, so the mat goes; real logos keep their
   white background. Tiles, week picks and area cards take the stroke on the box (the image is clipped inside it). Black (noir)
   pages only: white pages use the black stroke rule below. */
.card-photo img, body.noir .card-photo img, .bazaar .card-photo img, .refresh .card-photo img { padding: 0 !important; background: transparent !important; object-fit: cover !important; }
body.noir .card-logo img, body.noir .tile, body.noir .week-pick-media, body.noir .area-img, body.noir .sister-card img,
body.noir.bazaar .card-logo img, body.noir.bazaar .tile, body.noir.bazaar .week-pick-media, body.noir.bazaar .area-img { border: .5px solid #fff !important; box-sizing: border-box; }

/* Rule book B6 (24 Oct 2026): article photos keep their caption, with the credit folded behind a small "Photo Credit" tab on the right. */
.inline-photo figcaption.inline-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.inline-photo figcaption.inline-cap details { flex: none; }

/* Rule book A5 (user, 24 Oct 2026): on white pages (no body.noir: articles, info and venue pages) photos carry a BLACK 0.5 px stroke;
   the white stroke stays on black pages. */
body:not(.noir) .card-photo img, body:not(.noir) .card-logo img, body:not(.noir) .recent-row img, body:not(.noir) .inline-photo img, body:not(.noir) .feature-inline img,
body:not(.noir) .slide:has(> .cap-fold) > img, body:not(.noir) .slide > img { border: .5px solid #000 !important; box-sizing: border-box; }

/* Edition line in red (user, 24 Oct 2026): home hero dateline + footer */
.edition, body.noir .edition, .hero-note .edition { color: #FF453A !important; }
.hero-note .edition { font-weight: 500; text-shadow: 0 1px 8px rgba(0, 0, 0, .75); }

/* Map credit folded behind a "Map Credit" tab on the right (user, 24 Oct 2026); app.js uaMapCredit */
.credit-folded .leaflet-bottom.leaflet-right { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 6px; padding: 0 6px 6px 0; }
.credit-folded .leaflet-bottom.leaflet-right .leaflet-control { margin: 0; }
.credit-folded:not(.credit-open) .leaflet-control-attribution { display: none; }
.credit-folded .leaflet-control-attribution { min-width: 0; border-radius: 12px; padding: 2px 9px; font-size: 11px; line-height: 1.5; }
.map-credit-btn { padding: 1px 8px; font: inherit; font-size: 11px; line-height: 1.6; letter-spacing: .02em; white-space: nowrap; flex: none; color: #000; background: rgba(255, 255, 255, .85); border: .5px solid rgba(0, 0, 0, .35); border-radius: 999px; cursor: pointer; }
.map-credit-btn:hover, .map-credit-btn:focus-visible, .map-credit-btn[aria-expanded="true"] { background: #fff; border-color: #000; }
body.noir .map-credit-btn { color: #e6e6e6; background: rgba(0, 0, 0, .75); border-color: rgba(255, 255, 255, .45); }
body.noir .map-credit-btn:hover, body.noir .map-credit-btn:focus-visible, body.noir .map-credit-btn[aria-expanded="true"] { color: #fff; border-color: #fff; background: #000; }

/* Home sister-guide region scroller (user, 24 Oct 2026): the footer's region pills, between the intro and the cards */
.sister-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.sister-tabs[hidden], .sister-card[hidden], .sister-region[hidden] { display: none; }
.sister-region { margin-top: 34px; }
.sister-region-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; border-bottom: .5px solid currentColor; padding-bottom: 8px; }
.sister-region-head h3 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.sister-region-all { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: inherit; border-bottom: .5px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.sister-region .sister-grid { margin-top: 16px; }
.sister-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: .5px solid rgba(255, 255, 255, .5); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.sister-tabs button .n { font-size: .68rem; color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
.sister-tabs button:hover, .sister-tabs button:focus-visible, .sister-tabs button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.sister-tabs button:hover .n, .sister-tabs button:focus-visible .n, .sister-tabs button[aria-pressed="true"] .n { color: #555; }
body:not(.noir) .sister-tabs button { border-color: rgba(0, 0, 0, .4); color: #000; }
body:not(.noir) .sister-tabs button .n { color: #666; }
body:not(.noir) .sister-tabs button:hover, body:not(.noir) .sister-tabs button:focus-visible, body:not(.noir) .sister-tabs button[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
body:not(.noir) .sister-tabs button:hover .n, body:not(.noir) .sister-tabs button:focus-visible .n, body:not(.noir) .sister-tabs button[aria-pressed="true"] .n { color: rgba(255, 255, 255, .7); }
@media (max-width: 900px) {
  .sister-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; margin-right: -16px; padding-right: 16px; }
  .sister-tabs::-webkit-scrollbar { display: none; }
}
@media print { .sister-tabs { display: none !important; } }
/* City homes (user, 24 Oct 2026): the "Choose a region" bar sits under the hero and scrolls away with the page; only region guides keep it pinned */
.regbar.regbar-net { position: relative; top: auto; }

/* Section families on a sectioned list, e.g. Arts & Culture: Visual arts / Performing arts / Folk & cultural traditions (24 Oct 2026) */
.list-family { margin: 56px 0 0; padding-top: 14px; border-top: 1px solid currentColor; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.list-jump-fam .jump-fam { flex-basis: 100%; margin: 10px 0 2px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.list-jump-fam .jump-fam:first-child { margin-top: 0; }
.list-jump:not(.list-jump-top) .jump-fam { display: none; }
/* Editorial rhythm on home pages (user, 26 Oct 2026: "like a magazine, not an Instagram page"): a pull line after every
   two rows of tiles, text-only advice notes between blocks, and on phones a compact contents list after a block's first 3 tiles. */
.lead-tiles.split { padding-bottom: 28px !important; }
.lead-tiles-more { padding-top: 8px; }
.pull-line { max-width: 860px; margin: 8px auto 36px; padding: 28px 16px; text-align: center; border-top: .5px solid currentColor; border-bottom: .5px solid currentColor; }
body.noir .pull-line { border-color: rgba(255, 255, 255, .45); }
.pull-kicker { margin: 0 0 10px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.pull-text { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.4; text-wrap: pretty; }
.home-note { max-width: 700px; margin: 24px auto 16px; padding: 40px 16px 24px; text-align: center; }
.home-note .note-kicker { margin: 0 0 10px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.home-note .note-kicker::before { content: ""; display: block; width: 48px; height: .5px; background: currentColor; margin: 0 auto 18px; }
.home-note h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.08; text-align: center; border: 0 !important; padding: 0 !important; }
.home-note .note-text { margin: 0; font-size: 1.1rem; line-height: 1.65; text-wrap: pretty; }
.home-note .note-text a { color: inherit; white-space: nowrap; }
@media (max-width: 520px) {
  .tile.tile-compact { aspect-ratio: auto; display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; border: 0 !important; border-bottom: .5px solid rgba(255, 255, 255, .35) !important; border-radius: 0 !important; box-shadow: none; padding: 0 0 12px; overflow: visible; background: none; }
  .tile.tile-compact:hover { transform: none; }
  .tile.tile-compact img { position: static; width: 104px; height: 78px; border: .5px solid #fff; border-radius: 0; }
  .tile.tile-compact:hover img { transform: none; }
  .tile.tile-compact .tile-shade { display: none; }
  .tile.tile-compact .tile-text { position: static; }
  .tile.tile-compact .tile-title { font-size: 1.3rem; line-height: 1.15; }
  .tile.tile-compact .tile-kicker { font-size: .66rem; }
  .tile.tile-compact .tile-sub { font-size: .88rem; opacity: .8; }
  .pull-line { margin-bottom: 28px; }
}
@media (min-width: 861px) { .lead-tiles.lead-tiles-pair { grid-template-columns: repeat(2, 1fr); } .lead-tiles-pair .tile-lead { aspect-ratio: 16 / 9; } }
/* Further reading: an editor's letter's links, gathered after the last paragraph (26 Oct 2026) */
.further-reading { margin-top: 2.4em; }
.further-reading .cta-title { margin-top: 18px !important; font-size: 1.02em; }
.further-reading .cta-kicker + .cta-title { margin-top: 6px !important; }
.further-reading .cta-btns { margin-top: 10px !important; }
.further-reading .cta-btns { gap: 8px; }
.further-reading .btn { padding: 9px 14px !important; font-size: .7rem !important; }

/* Folded network footer (site.network.folded, 27 Oct 2026): each region a closed fold */
.network-grid .network-fold { border-top: 1px solid rgba(255,255,255,.14); padding: .2rem 0; }
.network-grid .network-fold summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; }
.network-grid .network-fold summary::-webkit-details-marker { display: none; }
.network-grid .network-fold summary::after { content: "+"; font-size: 1.1rem; opacity: .7; }
.network-grid .network-fold[open] summary::after { content: "\2212"; }
.network-grid .network-fold summary .n { opacity: .55; font-size: .8em; margin-left: .4rem; margin-right: auto; }
.network-grid .network-fold .network-hub { margin: 0 0 .6rem; font-size: .85rem; }
.network-grid:has(> .network-fold) { display: block; columns: auto; }
.network-grid > .network-fold ul { margin-bottom: .8rem; }
/* Phones: hero title and lead always readable. The desktop "rise" fades text in from opacity 0;
   on phones it can sit at frame 0 while the photo loads, leaving the title invisible. Slide only, no fade. */
@media (max-width: 760px) {
  .hero-inner > *, .venue-head > * { animation-name: rise-phone; }
  .hero .eyebrow, .hero h1, .hero-lead, .hero-note { text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
}
@keyframes rise-phone { from { transform: translateY(12px); } to { transform: none; } }

/* Magazine home (user, 28 Oct 2026, after afar.com's front page; opt-in with home-rhythm.json "magazine": true until the
   rollout). Mixed scales, red kickers, block head rows with "See more" and a 0.5 px rule, text lists beside the image
   grids, a cover row (spotlight + "In the guide now"), one slim row of sister guides. Scoped to body.home-mag. */
body.home-mag .tile-kicker, body.home-mag .mag-k, body.home-mag .mag-cover .week-pick-body .eyebrow { color: #FF453A !important; letter-spacing: .18em; }
body.home-mag .mag-block { display: block !important; text-align: left !important; max-width: none !important; margin: 80px auto 18px !important; padding: 0 !important; border: 0 !important; }
.mag-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: .5px solid rgba(255, 255, 255, .45); }
body:not(.noir) .mag-head-row { border-bottom-color: #000; }
body.home-mag .mag-head-row h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important; line-height: 1.05; letter-spacing: -.02em; }
.mag-see { flex: none; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: inherit; text-decoration: none; white-space: nowrap; border-bottom: .5px solid currentColor; padding-bottom: 2px; }
.mag-see:hover { color: #FF453A; }
body.home-mag .mag-block > p { max-width: 760px; margin: 0; font-size: 1.04rem; line-height: 1.6; color: var(--muted); text-align: left !important; text-align-last: left !important; }
body.home-mag .mag-block > .eyebrow { text-align: left !important; margin: 0 0 8px; }
.mag-grid { display: grid; gap: 14px; padding-top: 18px; padding-bottom: 28px; }
.mag-grid .mag-tile { aspect-ratio: 4 / 3; }
.mag-grid .mag-tile .tile-title { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.15; }
.mag-grid .mag-tile:not(.mag-big) .tile-sub { display: none; }
.mag-grid .mag-tile .tile-kicker { font-size: .66rem; margin-bottom: 4px; }
.mag-grid .mag-big .tile-title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); letter-spacing: -.02em; line-height: 1.06; }
.mag-grid .mag-big .tile-sub { font-size: 1rem; max-width: 560px; margin-top: 6px; }
.mag-grid .mag-big .tile-text { left: 28px; right: 28px; bottom: 26px; }
.mag-s4 { grid-template-columns: 2fr 1fr 1fr; }
.mag-s2 { grid-template-columns: 2fr 1fr; }
.mag-s4 .mag-big, .mag-s2 .mag-big { grid-row: span 2; aspect-ratio: auto; }
.mag-s1 { grid-template-columns: 1fr 1fr; }
.mag-s1 .mag-tile { aspect-ratio: 16 / 10; }
.mag-s0 { grid-template-columns: 1fr; }
.mag-s0 .mag-big { aspect-ratio: 21 / 9; }
@media (max-width: 860px) {
  .mag-s4, .mag-s2 { grid-template-columns: 1fr 1fr; }
  .mag-s4 .mag-big, .mag-s2 .mag-big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) {
  .mag-grid, .mag-s1 { grid-template-columns: 1fr; }
  .mag-grid .mag-tile:not(.tile-compact) { aspect-ratio: 16 / 10; }
  .mag-s0 .mag-big { aspect-ratio: 16 / 10; }
  .mag-grid .mag-big .tile-text { left: 18px; right: 18px; bottom: 18px; }
  .mag-grid .mag-big .tile-title { font-size: 1.8rem; }
}
/* Text list: the rest of a block, headline-led, with standfirsts (Afar's "Longreads" and "Popular reads") */
.mag-list ol { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.mag-list-1 ol { grid-template-columns: 1fr; max-width: 760px; }
.mag-list-2 ol { grid-template-columns: 1fr 1fr; }
.mag-list li a, .mag-now li a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0 18px; border-top: .5px solid rgba(255, 255, 255, .35); color: inherit; text-decoration: none; height: 100%; box-sizing: border-box; }
body:not(.noir) .mag-list li a, body:not(.noir) .mag-now li a { border-top-color: #000; }
.mag-k { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.mag-t { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; line-height: 1.2; color: var(--heading, #fff); }
.mag-s { font-size: .92rem; line-height: 1.5; color: var(--muted); }
.mag-list li a:hover .mag-t, .mag-now li a:hover .mag-t { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 4px; }
@media (max-width: 860px) { .mag-list ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mag-list ol, .mag-list-2 ol { grid-template-columns: 1fr; } .mag-list .mag-s { display: none; } }
/* Cover row: the spotlight as one large picture beside a narrow column of headlines */
.mag-cover { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; padding: 8px 0 24px; }
.mag-cover-solo { grid-template-columns: 1fr; }
.mag-cover .week-pick { display: block !important; padding: 0; }
.mag-cover .week-pick-media { aspect-ratio: 16 / 10; margin-bottom: 20px; }
.mag-cover .week-pick-body h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.mag-cover .week-pick-text { max-width: 640px; }
.mag-now { border-left: .5px solid rgba(255, 255, 255, .35); padding-left: 32px; }
body:not(.noir) .mag-now { border-left-color: #000; }
.mag-now-h { font-size: 1.5rem !important; margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; text-align: left !important; text-transform: uppercase; letter-spacing: .04em; }
.mag-now ol { list-style: none; margin: 0 0 18px; padding: 0; }
.mag-now li a { padding: 14px 0 16px; }
.mag-now .mag-t { font-size: 1.12rem; }
@media (max-width: 860px) { .mag-cover { grid-template-columns: 1fr; gap: 28px; } .mag-now { border-left: 0; padding-left: 0; } }
/* One slim row of sister-guide cards under the hub band */
body.home-mag .top-slim { grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 14px; padding-bottom: 8px; }
body.home-mag .top-slim.top-n3 { grid-template-columns: repeat(3, 1fr); }
body.home-mag .top-slim.top-n2 { grid-template-columns: repeat(2, 1fr); }
body.home-mag .top-slim .tile-lead { aspect-ratio: 16 / 9; }
body.home-mag .top-slim .tile-title { font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important; line-height: 1.15; }
body.home-mag .top-slim .tile-sub { font-size: .78rem; line-height: 1.35; }
body.home-mag .top-slim .tile-kicker { font-size: .62rem; }
body.home-mag .top-slim .tile-text { left: 14px; right: 14px; bottom: 12px; }
@media (max-width: 860px) { body.home-mag .top-slim, body.home-mag .top-slim.top-n3 { grid-template-columns: repeat(2, 1fr); } body.home-mag .top-slim .tile-sub { display: none; } }
/* Newsletter mid-page, network cut to six cards, neighbourhoods and favourites as text columns */
body.home-mag main .newsletter { margin: 72px 0 0; }
body.home-mag .mag-net { padding-top: 0; }
body.home-mag .mag-net .sister-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { body.home-mag .mag-net .sister-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { body.home-mag .mag-net .sister-grid { grid-template-columns: 1fr; } }
.mag-close { text-align: center; margin: 28px 0 0; }
body.home-mag .areas .area-img, body.home-mag .areas .area-kicker { display: none; }
body.home-mag .areas-grid { grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
body.home-mag .area-card { border: 0 !important; border-top: .5px solid rgba(255, 255, 255, .35) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 16px 0 20px; }
body.home-mag .area-card h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: 4px; }
body.home-mag .area-card p { font-size: .9rem; }
body.home-mag .area-more { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 860px) { body.home-mag .areas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { body.home-mag .areas-grid { grid-template-columns: 1fr; } }
body.home-mag #top-picks .picks { grid-template-columns: repeat(4, 1fr); }
body.home-mag #top-picks .picks > .pick { grid-column: auto !important; }
@media (max-width: 960px) { body.home-mag #top-picks .picks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.home-mag #top-picks .picks { grid-template-columns: 1fr; } }
.mag-cover > *, .mag-grid > *, .mag-list li { min-width: 0; }
.mag-cover .week-pick-media img { max-width: 100%; }
@media (max-width: 520px) { .mag-grid .tile.tile-compact { aspect-ratio: auto !important; background: none; } .mag-grid .tile.tile-compact .tile-sub { display: block; } }
@media (max-width: 520px) {
  .mag-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  body.home-mag .mag-net .sister-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.home-mag .mag-net .sister-desc { display: none; }
  body.home-mag .mag-net .sister-body { padding: 10px 12px 12px; }
  body.home-mag .mag-net .sister-name { font-size: 1rem; }
}
body.home-mag .tile .tile-kicker { text-shadow: 0 1px 8px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
@media (max-width: 1100px) { body.home-mag .top-slim .tile-sub { display: none; } }
/* Magazine home, typography (user, 28 Oct 2026, after afar.com): a book serif (site.serifFont, Newsreader) for the reading
   text (standfirsts, lists, intros, advice notes); Bodoni stays for headlines, Helvetica for menus, kickers and buttons.
   Small tiles carry their text under the photo (only the large lead tile keeps text on the picture). */
body.home-mag { --read: "Newsreader", Georgia, "Times New Roman", serif; }
body.home-mag .mag-s, body.home-mag .mag-block > p, body.home-mag main > .intro > p, body.home-mag .mag-cover .week-pick-text,
body.home-mag .home-note .note-text, body.home-mag .mag-grid .tile-sub, body.home-mag .area-card p, body.home-mag .mag-net .sister-desc,
body.home-mag .top-slim .tile-sub { font-family: var(--read); font-weight: 400; letter-spacing: 0; }
body.home-mag .mag-block > p, body.home-mag main > .intro > p { font-size: 1.16rem; line-height: 1.55; }
body.home-mag .mag-cover .week-pick-text, body.home-mag .home-note .note-text { font-size: 1.2rem; line-height: 1.55; }
body.home-mag .mag-s { font-size: 1.02rem; line-height: 1.45; }
body.home-mag .mag-grid .mag-big .tile-sub { font-size: 1.12rem; }
/* Text under the photo on small tiles; the 0.5 px white stroke moves to the photo itself (A5) */
body.home-mag .mag-grid .mag-tile:not(.mag-big):not(.tile-compact), body.home-mag .top-slim .tile-lead,
body.home-mag .mag-grid .mag-tile:not(.mag-big).tile-compact {
  aspect-ratio: auto !important; display: flex; flex-direction: column; overflow: visible; background: none !important;
  border: 0 !important; box-shadow: none !important; outline: 0 !important; border-radius: 0 !important; }
body.home-mag .mag-grid .mag-tile:not(.mag-big) img, body.home-mag .top-slim .tile-lead img {
  position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: .5px solid #fff !important; border-radius: 8px !important; box-sizing: border-box; transition: opacity .3s ease; }
body.home-mag .top-slim .tile-lead img { aspect-ratio: 16 / 9; }
body.home-mag .mag-grid .mag-tile:not(.mag-big):hover img, body.home-mag .top-slim .tile-lead:hover img { transform: none; opacity: .86; }
body.home-mag .mag-grid .mag-tile:not(.mag-big) .tile-shade, body.home-mag .top-slim .tile-shade { display: none; }
body.home-mag .mag-grid .mag-tile:not(.mag-big) .tile-text, body.home-mag .top-slim .tile-text { position: static; padding: 12px 2px 0; gap: 3px; }
body.home-mag .mag-grid .mag-tile:not(.mag-big) .tile-kicker, body.home-mag .top-slim .tile-kicker { text-shadow: none; }
body.home-mag .mag-grid .mag-tile:not(.mag-big) .tile-title { font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important; font-weight: 600; color: #fff; }
body.home-mag .mag-grid .mag-tile:not(.mag-big) .tile-sub { display: block; font-size: .98rem; line-height: 1.4; color: var(--muted); opacity: 1; }
body.home-mag .mag-grid .mag-tile:not(.mag-big):hover .tile-title { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 4px; }
body.home-mag .top-slim .tile-title { color: #fff; font-weight: 600; }
body.home-mag .top-slim .tile-sub { color: var(--muted); opacity: 1; font-size: .92rem; }
body.cyclades.home-mag .mag-grid .mag-tile:not(.mag-big) .tile-title { color: #fff; }
/* Phones: tiles after the third stay the compact contents list (A7): photo left, text right */
@media (max-width: 520px) {
  body.home-mag .mag-grid .mag-tile.tile-compact { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; padding: 0 0 12px; border-bottom: .5px solid rgba(255, 255, 255, .35) !important; }
  body.home-mag .mag-grid .mag-tile.tile-compact img { width: 104px; height: 78px; aspect-ratio: auto; }
  body.home-mag .mag-grid .mag-tile.tile-compact .tile-text { padding: 0; }
}
@media (max-width: 520px) {
  body.home-mag .mag-grid .mag-tile:not(.mag-big).tile-compact { display: grid !important; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; text-align: left; }
  body.home-mag .mag-grid .mag-tile:not(.mag-big).tile-compact img { width: 104px !important; height: 78px; }
}
/* Header head space and rule (user, 28 Oct 2026): more air above and below the logo; one 0.5 px white rule
   from edge to edge under the header (the scroll-progress stub is retired, it read as a broken line) */
.site-header::after { display: none !important; content: none !important; animation: none !important; }
.site-header { border-bottom: .5px solid rgba(255, 255, 255, .5) !important; }
.site-header .header-inner { min-height: 112px; padding-top: 20px; padding-bottom: 16px; }
@media (min-width: 900px) { .bazaar .site-header .header-inner { padding-top: 22px; padding-bottom: 8px; } .bazaar .site-nav { padding-top: 10px !important; } }
@media (max-width: 520px) { .site-header .header-inner { min-height: 84px; padding-top: 14px; padding-bottom: 14px; } }
@media (min-width: 900px) {
  /* (30 Oct 2026) no overflow clip on the header: Safari 26 clipped the dropdown panels below it too; the page clips sideways instead */
  .bazaar .site-header .site-nav { border-top: 0 !important; position: relative; margin-top: 18px !important; padding-top: 6px !important; }
  .bazaar .site-header .site-nav::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; border-top: .5px solid rgba(255, 255, 255, .5); pointer-events: none; }
}
/* Magazine inner pages (user, 28 Oct 2026, after afar.com's list, venue and article pages; RULEBOOK A11). Rides the
   magazine-home switch (home-rhythm.json "magazine": true), which puts body class "afar" on every page of the guide.
   Picture cards (photo on top at 3:2, red kicker, Bodoni name, Newsreader standfirst), justified text, one button
   scale, lighter filters, "Our take" venue pages, article pages without venue chrome. */
body.afar { --read: "Newsreader", Georgia, "Times New Roman", serif; --kick: #FF453A; }
/* Body text stays justified and hyphenated, as on every guide (user, 28 Oct 2026: "text needs to be justified across the site") */
/* Red kickers */
body.afar.noir .card .badge, body.afar .card .badge, body.afar .venue-rank, body.afar.noir.bazaar[data-sec] .venue-rank, body.afar .venue-head .badge {
  color: var(--kick) !important; font-size: .72rem !important; font-weight: 500; letter-spacing: .14em !important; text-transform: uppercase;
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
/* One button scale: square, 13 px capitals, light tracking, 44 px touch target; ghost buttons a 0.5 px line */
body.afar .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; box-sizing: border-box;
  padding: 12px 22px !important; border-radius: 0 !important; font-family: var(--sans); font-size: .8125rem !important; font-weight: 500;
  letter-spacing: .08em !important; line-height: 1.2; text-transform: uppercase; }
body.afar .btn-ghost { border-width: .5px !important; }
body.afar .further-reading .btn { padding: 9px 14px !important; font-size: .75rem !important; min-height: 0; }
body.afar .chip, body.afar .chip-more > summary { font-size: .8125rem !important; letter-spacing: .06em !important; padding: 8px 14px !important; min-height: 36px; box-sizing: border-box; border-radius: 0 !important; }
/* Lighter filters: six areas, the rest under "More areas" */
body.afar .chip-more { display: contents; }
body.afar .chip-more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; border: .5px solid rgba(255, 255, 255, .6); text-transform: uppercase; color: inherit; }
body.afar .chip-more > summary::-webkit-details-marker { display: none; }
body.afar .chip-more > summary::after { content: '+'; margin-left: 2px; }
body.afar .chip-more[open] > summary::after { content: '\2212'; }
body.afar .chip-more > summary span { color: var(--muted); }
body.afar .chip-more-list { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
/* Picture cards: three across, photo on top (3:2), text under it */
body.afar .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; }
body.afar .card, body.afar.noir .card, body.afar.noir.bazaar .card, body.afar.bazaar .card[style*="--sec"], body.afar.noir.bazaar .card[style*="--sec"] {
  display: flex !important; flex-direction: column; background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; overflow: visible; }
body.afar .card:not(.card-top) .rank { display: none !important; }
body.afar .card-pic { display: block !important; padding: 0 !important; margin: 0 0 14px; }
body.afar .card-pic img, body.afar.noir .card-pic img, body.afar.bazaar .card-pic img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2;
  object-fit: cover !important; border: .5px solid #fff !important; border-radius: 8px !important; box-shadow: none !important; padding: 0 !important; }
body.afar:not(.noir) .card-pic img { border-color: #000 !important; }
body.afar .card-body { padding: 0 2px !important; display: flex; flex-direction: column; flex: 1; }
/* a card with no photo opens on a fine rule, so text cards line up with picture cards in the same row */
body.afar .cards .card.no-pic .card-body { border-top: .5px solid rgba(255, 255, 255, .45); padding-top: 14px !important; }
body.afar:not(.noir) .cards .card.no-pic .card-body { border-top-color: rgba(0, 0, 0, .45); }
body.afar .card .badge { margin: 0 0 6px; white-space: normal; overflow: visible; }
body.afar .card h3 { font-size: clamp(1.25rem, 1.7vw, 1.45rem) !important; line-height: 1.18; white-space: normal !important; overflow: visible !important; margin-bottom: 6px; }
body.afar .card .meta { white-space: normal !important; overflow: visible !important; font-size: .9rem; margin-bottom: 8px; }
body.afar .card .desc { font-family: var(--read); font-size: 1.06rem; line-height: 1.5; height: auto !important; max-height: none !important; color: #e6e6e6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-bottom: 12px; }
body.afar:not(.noir) .card .desc { color: #222; }
body.afar .card-foot { margin-top: auto !important; flex-wrap: wrap !important; gap: 6px 16px; padding-top: 10px; border-top: .5px solid rgba(255, 255, 255, .25); }
body.afar .card-foot .addr { flex-basis: 100%; white-space: normal !important; font-size: .85rem; }
body.afar .card-links { margin-left: 0 !important; gap: 16px; flex-wrap: wrap; }
/* Top three: large rows, number, photo, text */
body.afar .top3-cards { gap: 0; }
body.afar.afar .top3-cards .card.card-top.card-top { display: grid !important; grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 30px; align-items: start;
  padding: 26px 0 !important; border-top: .5px solid rgba(255, 255, 255, .45) !important; }
@media (min-width: 641px) { body.afar.afar .top3-cards .card.card-top.card-top.no-pic { grid-template-columns: 56px minmax(0, 1fr); } }
body.afar.afar .top3-cards .card.card-top.card-top .card-pic { margin: 0; }
body.afar.afar .top3-cards .card.card-top.card-top .rank, body.afar.noir .card-top .rank, body.afar.noir.bazaar .card-top .rank { background: none !important; color: var(--kick) !important; padding: 0 !important;
  font-family: var(--serif); font-size: 2.6rem; line-height: 1; justify-content: flex-start; }
body.afar.afar .top3-cards .card.card-top.card-top h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important; }
body.afar.afar .top3-cards .card.card-top.card-top .desc { -webkit-line-clamp: 5; line-clamp: 5; font-size: 1.12rem; }
@media (max-width: 960px) { body.afar .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  body.afar .cards { grid-template-columns: 1fr; gap: 0; }
  /* phones: the first card of each section and the top three keep a full-width photo; the rest are compact rows, photo left */
  body.afar.afar.afar .cards .card:not(.card-first) { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 18px 0 !important; border-top: .5px solid rgba(255, 255, 255, .25) !important; }
  body.afar.afar.afar .cards .card.no-pic:not(.card-first) { grid-template-columns: 1fr; }
  body.afar.afar.afar .cards .card:not(.card-first) .card-pic { margin: 2px 0 0; }
  body.afar.afar.afar .cards .card:not(.card-first) .card-pic img { width: 96px !important; height: 96px !important; aspect-ratio: 1; }
  body.afar.afar.afar .cards .card:not(.card-first) .desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: 1rem; }
  body.afar.afar.afar .cards .card:not(.card-first) h3 { font-size: 1.2rem !important; }
  body.afar.afar.afar .cards .card.card-first { padding: 4px 0 22px !important; }
  body.afar.afar .top3-cards .card.card-top.card-top { grid-template-columns: 1fr; gap: 12px; }
  body.afar.afar .top3-cards .card.card-top.card-top .rank { font-size: 1.9rem; }
  body.afar.afar .top3-cards .card.card-top.card-top .desc { -webkit-line-clamp: 4; line-clamp: 4; }
}
/* Venue pages: standfirst, 3:2 gallery, "Our take" box, one reading column */
body.afar .venue-dek { font-family: var(--read); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; max-width: 760px; margin: 14px 0 0; color: #e6e6e6; }
body.afar:not(.noir) .venue-dek { color: #222; }
body.afar .venue .gallery { max-width: 860px; margin-left: auto; margin-right: auto; }
@media (min-width: 641px) { body.afar .venue .gallery .slide { height: auto !important; aspect-ratio: 3 / 2 !important; } }
body.afar .our-take { max-width: 860px; margin: 0 auto 44px; padding: 28px 32px 30px; border: .5px solid rgba(255, 255, 255, .6); background: #0b0b0b; box-sizing: border-box; }
body.afar .take-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
body.afar .take-head h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
body.afar .take-logo { max-height: 56px; max-width: 140px; background: #fff; padding: 6px; border: .5px solid #fff; }
body.afar .take-why { list-style: none; margin: 0 0 20px; padding: 0; font-family: var(--read); font-size: 1.14rem; line-height: 1.5; }
body.afar .take-why li { position: relative; padding-left: 20px; margin: 4px 0; }
body.afar .take-why li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; border-top: 1px solid var(--kick); }
body.afar .take-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 0; padding-top: 18px; border-top: .5px solid rgba(255, 255, 255, .3); }
body.afar .take-facts .fact { margin: 0; }
body.afar .take-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
body.afar .venue-grid.venue-one { display: block; max-width: 760px; margin-left: auto; margin-right: auto; }
body.afar .venue-one .venue-about p:not(.byline):not(.why-h):not(.small):not(.checked):not(.owner-link):not(.discuss-jump) { font-family: var(--read); font-size: 1.15rem; line-height: 1.65; }
body.afar .venue-one .venue-about p.lead { font-family: var(--read); font-size: 1.32rem !important; line-height: 1.5; font-weight: 400 !important; }
body.afar .venue-tools { margin-top: 26px; padding-top: 18px; border-top: .5px solid rgba(255, 255, 255, .3); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
body.afar .venue-tools .venue-actions { display: flex; gap: 12px; margin: 0; }
body.afar .venue-tools .checked, body.afar .venue-tools .owner-link { margin: 0; }
@media (max-width: 640px) {
  body.afar .our-take { padding: 22px 18px 24px; }
  body.afar .take-facts { grid-template-columns: 1fr; }
  body.afar .take-actions .btn { flex: 1 1 100%; }
}
/* Article pages (back stories, features): one 760 px column, no venue chrome */
body.afar.art-page .venue-head { max-width: 760px; margin: 0 auto 28px; }
body.afar.art-page .venue-head h1 { font-size: clamp(2.1rem, 4.4vw, 3rem) !important; line-height: 1.08; letter-spacing: -.015em; }
body.afar.art-page .venue-head .byline { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 16px 0 0; }
body.afar.art-page .venue .gallery { max-width: 760px; }
body.afar.art-page .venue-about .inline-photo { margin: 30px 0; }
body.afar .guide-advice { max-width: 760px; margin: 6px 0 40px; padding: 20px 0 22px; border-top: .5px solid rgba(255, 255, 255, .45); border-bottom: .5px solid rgba(255, 255, 255, .45); }
body.afar .guide-advice .note-kicker { color: var(--kick); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
body.afar .guide-advice .note-text { font-family: var(--read); font-size: 1.2rem; line-height: 1.55; margin: 0; }
/* Venue map gate (28 Oct 2026): Google Maps loads on click; same frame size as the map it stands in for */
.map-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 220px; padding: 28px 20px; text-align: center; border: .5px solid rgba(255, 255, 255, .5); border-radius: 8px; box-sizing: border-box; }
body:not(.noir) .map-gate { border-color: #000; }
.map-gate-text { margin: 0 0 10px; color: var(--muted); max-width: 460px; }
.map-gate-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }
.privacy-btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* Magazine navigation, search and finishing touches (user, 28 Oct 2026, after afar.com; RULEBOOK A12). Piloted on its own
   switch: body class "a12" (home-rhythm.json "a12": true). app.js afarNav(): "More" panel, pinned menu row, phone sheet. */
/* Computers: one menu line; groups that don't fit go into "More" (N1) */
@media (min-width: 900px) {
  body.a12 .site-header .site-nav { flex-wrap: nowrap !important; justify-content: center; align-items: center; min-width: 0; max-width: 100%; }
  body.a12.bazaar .site-nav > a, body.a12.bazaar .site-nav > .nav-item > a, body.a12.bazaar .nav-more > summary { letter-spacing: .08em !important; padding-left: 9px !important; padding-right: 9px !important; }
  body.a12 .site-nav > .nav-over { display: none !important; }
  /* N3: the logo row scrolls away, the menu row stays pinned (header sticks at minus the logo row's height: no jump) */
  body.a12 .site-header { top: calc(-1 * var(--hdr-off, 0px)) !important; }
  body.a12 .nav-mark, body.a12 .nav-search-mini { display: none; }
  body.a12 .site-header.is-stuck .nav-mark { display: inline-flex; align-items: baseline; gap: .3em; margin-right: auto; padding: 10px 16px 10px 0; font-family: var(--serif); font-size: 1.02rem; color: #fff; text-decoration: none; white-space: nowrap; }
  body.a12 .nav-mark span { text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
  body.a12 .nav-mark strong { font-weight: 400; color: var(--accent); }
  body.a12 .site-header.is-stuck .nav-search-mini { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; }
  /* N2: dropdowns are one wide square panel under the menu row, one column per list */
  body.a12 .site-nav .nav-more { position: static; }
  body.a12 .site-nav .nav-more-menu { left: 0 !important; right: 0 !important; transform: none !important; margin-left: 0 !important; top: 100% !important; min-width: 0;
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); justify-content: center; gap: 4px 34px; padding: 24px 28px 28px !important;
    background: #000; border: 0 !important; border-top: .5px solid rgba(255, 255, 255, .5) !important; border-bottom: .5px solid rgba(255, 255, 255, .5) !important; border-radius: 0 !important;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .5); max-height: min(440px, calc(100vh - 150px)); overflow-y: auto; }
  body.a12 .nav-col { display: flex; flex-direction: column; min-width: 0; }
  body.a12 .nav-more-menu > .nav-col:only-child { grid-column: 1 / -1; display: block; columns: 3 200px; column-gap: 34px; }
  body.a12 .nav-more-menu > .nav-col:only-child a { break-inside: avoid; }
  body.a12 .nav-more-menu .nav-col > a { display: block; padding: 7px 0 !important; font-size: .9rem; color: rgba(255, 255, 255, .86); border-radius: 0; background: none; white-space: normal; }
  body.a12 .nav-more-menu .nav-col > a:hover { color: #fff; background: none; text-decoration: underline; text-underline-offset: 4px; }
  body.a12 .nav-more-menu .nav-col:not(.nav-col-links) > a:first-child:not(.nav-sub), body.a12 .nav-more-menu .nav-col-h { font-size: .75rem !important; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #fff !important; padding: 0 0 10px !important; margin: 0 0 6px; border-bottom: .5px solid rgba(255, 255, 255, .35); }
  body.a12 .nav-more-menu .nav-col > a.nav-sub { padding: 6px 0 !important; font-size: .86rem; color: rgba(255, 255, 255, .66); }
  body.a12 .nav-more-menu a[aria-current="page"] { color: var(--accent) !important; }
  body.a12 .nav-sheet-search { display: none; }
}
/* Phones and tablets: the menu is a full-height square sheet, every group alike, search on top (N4) */
@media (max-width: 899px) {
  body.a12 .nav-mark, body.a12 .nav-search-mini, body.a12 .nav-overflow { display: none !important; }
  body.a12 .site-header .site-nav.open { position: fixed; top: var(--hdr-bottom, 84px); left: 0; right: 0; bottom: 0; max-height: none; height: auto; margin: 0;
    padding: 6px 20px 48px; border: 0; border-top: .5px solid rgba(255, 255, 255, .5); border-radius: 0 !important; background: #000; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; z-index: 60; }
  body.a12.menu-open { overflow: hidden; }
  body.a12.menu-open .ask-btn, body.a12.menu-open .venue-bar, body.a12.menu-open .tabbar { display: none !important; }
  body.a12 .site-nav.open > a, body.a12 .site-nav.open > .nav-item > a, body.a12 .site-nav.open .nav-more > summary {
    display: flex; align-items: center; min-height: 52px; padding: 0 !important; font-size: 1.02rem !important; font-weight: 400; letter-spacing: .02em !important; text-transform: none;
    color: #fff !important; background: none !important; border: 0 !important; border-bottom: .5px solid rgba(255, 255, 255, .25) !important; border-radius: 0 !important; opacity: 1; }
  body.a12 .site-nav.open .nav-more > summary::after { content: '+'; margin-left: auto; font-size: 1.1rem; color: rgba(255, 255, 255, .7); }
  body.a12 .site-nav.open .nav-more[open] > summary::after { content: '\2212'; }
  body.a12 .site-nav.open .nav-item .nav-sub-menu { display: none; }
  body.a12 .site-nav.open .nav-more-menu { position: static; display: block; padding: 6px 0 14px; margin: 0; border: 0; background: none; box-shadow: none; }
  body.a12 .site-nav.open .nav-more-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 0 0 14px !important; font-size: .98rem; color: rgba(255, 255, 255, .88); border-radius: 0; background: none; }
  body.a12 .site-nav.open .nav-more-menu a.nav-sub { padding-left: 28px !important; font-size: .92rem; color: rgba(255, 255, 255, .68); min-height: 40px; }
  body.a12 .nav-sheet-search { display: flex; gap: 8px; margin: 10px 0 8px; }
  body.a12 .nav-sheet-search input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; font: inherit; font-size: 1rem; color: #fff; background: #0b0b0b; border: .5px solid rgba(255, 255, 255, .6); border-radius: 0; }
  body.a12 .nav-sheet-search .btn { flex: none; }
}
/* "On this page" on neighbourhood and area guides: pinned just under the menu row (H1) */
body.a12 .guide-nav.page-jump { top: var(--pin-h, 0px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; padding: 10px 0; margin: 8px 0 28px;
  background: #000; border-top: .5px solid rgba(255, 255, 255, .45); border-bottom: .5px solid rgba(255, 255, 255, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.a12 .guide-nav.page-jump::-webkit-scrollbar { display: none; }
body.a12 .page-jump-label { flex: none; color: var(--kick); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; }
body.a12 .guide-nav.page-jump a { flex: none; white-space: nowrap; }
/* Read next / More in depth: three picture cards at the end of venue and article pages (R1); also the 404 cards (E1) */
body.a12 .read-next { margin: 56px 0 28px; padding-top: 22px; border-top: .5px solid rgba(255, 255, 255, .5); }
body.a12:not(.noir) .read-next { border-top-color: rgba(0, 0, 0, .5); }
body.a12 .read-next h2 { margin: 0 0 22px; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
body.a12 .rn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
body.a12 .rn-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
body.a12 .rn-card.no-pic { border-top: .5px solid rgba(255, 255, 255, .45); padding-top: 14px; }
body.a12:not(.noir) .rn-card.no-pic { border-top-color: rgba(0, 0, 0, .45); }
body.a12 .rn-pic { display: block; margin: 0 0 12px; }
body.a12 .rn-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: .5px solid #fff; border-radius: 8px; }
body.a12:not(.noir) .rn-pic img { border-color: #000; }
body.a12 .rn-kicker { color: var(--kick); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
body.a12 .rn-name { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; line-height: 1.2; margin-bottom: 6px; }
body.a12 .rn-card:hover .rn-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body.a12 .rn-desc { font-family: var(--read); font-size: 1.02rem; line-height: 1.5; opacity: .88; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
body.a12 .nf-search { display: flex; gap: 8px; max-width: 560px; margin: 28px 0 36px; }
body.a12 .nf-search input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; font: inherit; color: inherit; background: transparent; border: .5px solid rgba(255, 255, 255, .6); border-radius: 0; }
@media (max-width: 760px) {
  body.a12 .rn-grid { grid-template-columns: 1fr; gap: 22px; }
  /* phones: the first card keeps its full photo, the others are compact rows (photo left), like the list cards */
  body.a12 .rn-card:not(:first-child):not(.no-pic) { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; padding-top: 22px; border-top: .5px solid rgba(255, 255, 255, .25); }
  body.a12:not(.noir) .rn-card:not(:first-child):not(.no-pic) { border-top-color: rgba(0, 0, 0, .25); }
  body.a12 .rn-card:not(:first-child) .rn-pic { grid-row: 1 / span 3; margin: 2px 0 0; }
  body.a12 .rn-card:not(:first-child) .rn-pic img { width: 96px; height: 96px; aspect-ratio: 1; }
  body.a12 .rn-card:not(:first-child) .rn-name { font-size: 1.2rem; }
  body.a12 .rn-card:not(:first-child) .rn-desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: .98rem; }
}
/* Search: picture rows in "Ask the guide" (S2) and the results page (S3) */
body.a12 .ask-panel, body.a12 .ask-btn { border-radius: 0; }
body.a12 .ask-results a.ask-row { display: flex; align-items: flex-start; gap: 12px; border-radius: 0; }
body.a12 .ask-row .ask-pic { flex: none; width: 64px; height: 64px; object-fit: cover; border: .5px solid #fff; border-radius: 4px; }
body.a12 .ask-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.a12 .ask-kick { color: var(--kick); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
body.a12 .ask-row .ask-name { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
body.a12 .ask-row .ask-meta { font-size: .8rem; color: var(--muted); }
body.a12 .ask-all { display: inline-block; margin-top: 10px; color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
body.a12 .search-page { max-width: 900px; padding-top: 40px; padding-bottom: 60px; }
body.a12 .search-form { display: flex; gap: 8px; margin: 20px 0 14px; }
body.a12 .search-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; font: inherit; font-size: 1.05rem; color: inherit; background: transparent; border: .5px solid rgba(255, 255, 255, .6); border-radius: 0; }
body.a12 .search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
body.a12 .search-results { list-style: none; margin: 0; padding: 0; }
body.a12 .search-results li { border-top: .5px solid rgba(255, 255, 255, .3); }
body.a12 .search-results .ask-row { display: flex; gap: 18px; padding: 18px 0; color: inherit; text-decoration: none; }
body.a12 .search-results .ask-pic { flex: none; width: 96px; height: 96px; object-fit: cover; border: .5px solid #fff; border-radius: 6px; }
body.a12 .search-results .ask-name { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
body.a12 .search-results .ask-meta { font-size: .85rem; color: var(--muted); }
body.a12 .search-results .ask-desc { font-family: var(--read); font-size: 1.02rem; line-height: 1.5; opacity: .88; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 4px; }
body.a12 .search-results .ask-row:hover .ask-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Captions: the photo's own description under galleries and article photos; credit stays folded (C1) */
body.a12 .gallery-cap { max-width: 860px; margin: 10px auto 0; font-family: var(--read); font-size: .98rem; line-height: 1.45; color: var(--muted); min-height: 1.45em; }
body.a12.art-page .gallery-cap { max-width: 760px; }
body.a12 .inline-cap-text { font-family: var(--read); font-size: .98rem; line-height: 1.45; color: var(--muted); }
/* Byline links to how we choose (A1) */
body.a12 .byline a { color: inherit; text-decoration: none; border-bottom: .5px solid currentColor; }
/* Footer: 8 links a column, the rest behind "N more"; 44 px rows on phones (F2, F3) */
body.a12 .footer-more details > summary { cursor: pointer; list-style: none; color: var(--muted); }
body.a12 .footer-more details > summary::-webkit-details-marker { display: none; }
body.a12 .footer-more details > summary::after { content: ' +'; }
body.a12 .footer-more details[open] > summary { display: none; }
body.a12 .footer-more .footer-links { padding: 0; margin: 0; }
/* Touch targets: 44 px on phones, made with padding so nothing looks bigger (P3) */
@media (max-width: 640px) {
  body.a12 .footer-links a, body.a12 .footer-more summary { display: flex; align-items: center; min-height: 44px; }
  body.a12 .header-tools button, body.a12 .header-tools a { width: 44px !important; height: 44px !important; }
  body.a12 .header-tools .wx-chip { width: auto !important; }
  body.a12 .menu-toggle { min-height: 44px; }
  body.a12 .chip, body.a12 .chip-more > summary { min-height: 44px; }
  body.a12 .guide-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  body.a12 .network-fold > summary, body.a12 .footer-fold > summary { min-height: 44px; display: flex; align-items: center; }
}
/* Phones: no sideways scroll (the hero photo's slow zoom spilled 21 px past the edge, 28 Oct 2026); clip keeps sticky bars working */
html:has(body.afar), body.afar { overflow-x: clip; }
/* "Show all": the phone card rows (display: grid !important) must not bring capped cards back */
body.a12.afar.afar .cards .card.is-capped { display: none !important; }
/* Region bar (user, 28 Oct 2026): "Choose a region" is a title, the buttons sit beneath it, and the buttons are plain
   rectangles with a 0.5 px white border (no rounded pills). Every guide and the region guides' pinned bar. */
.regbar .regbar-in { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding-top: 16px; padding-bottom: 16px; }
.regbar .regbar-label { font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -.01em; text-transform: none; color: #fff; line-height: 1.15; }
.regbar .regbtns { width: 100%; }
.regbar .regbtns a, body.noir .regbar .regbtns a { border-radius: 0 !important; border: .5px solid #fff !important; }
@media (max-width: 760px) { .regbar .regbar-in { gap: 10px !important; padding-top: 12px; padding-bottom: 12px; } }
/* Design audit (user, 28 Oct 2026; RULEBOOK A14): one heading scale, one spacing scale, aligned columns, square corners,
   headroom on every cropped picture, justified reading text that stays even on phones. Magazine guides (body.afar). */
/* Alignment: the top-three illustration is black line art, invisible on noir pages, yet it pushed the heading 110-174 px right */
body.afar.noir .top3-head .illo { display: none; }
body.afar .top3-head { gap: 0; }
/* One heading scale on list and guide pages: the two page-level heads (Insiders' picks, The full list) the same size,
   section heads one step below, never above them */
body.afar .top3-head h2, body.afar .list-all-h { font-size: clamp(1.9rem, 3.2vw, 2.6rem) !important; line-height: 1.08; margin: 0 0 10px !important; }
body.afar .list-all-h { margin-top: 56px !important; padding-top: 22px; border-top: .5px solid rgba(255, 255, 255, .45); }
body.afar:not(.noir) .list-all-h { border-top-color: rgba(0, 0, 0, .45); }
body.afar .list-group > h2, body.afar .guide-group > h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem) !important; line-height: 1.1; margin-bottom: 8px !important; }
/* Top-three numbers in Bodoni 600 like every heading (A3): at 400 the hairline "1" read as a red bar */
body.afar.afar .top3-cards .card.card-top.card-top .rank { font-weight: 600 !important; }
/* One red kicker per venue head: the list line ("Hotels · Our pick") stays red, the venue's own badge drops to grey caps */
body.afar.afar .venue-head .badge { color: rgba(255, 255, 255, .72) !important; }
body.afar.afar:not(.noir) .venue-head .badge { color: #555 !important; }
/* Spacing scale 8 / 16 / 24 / 32 / 56: standfirst → gallery 24, gallery → "Our take" 32, caption → text 24 */
body.afar .venue .gallery { margin-top: 24px !important; margin-bottom: 0 !important; }
body.afar .our-take { margin-top: 32px; }
body.afar .gallery-cap { margin-bottom: 0 !important; }
body.afar.art-page .gallery-cap { margin-bottom: 28px !important; }
body.afar .card-pic { margin-bottom: 16px; }
/* Articles: body paragraphs fill the same 760 px column as the title, standfirst and sub-heads; breadcrumb on that column */
body.afar.art-page .venue-about p { max-width: none; }
body.afar.art-page .crumbs { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Never clip the hero standfirst (A4): phones showed "… each hotel lists on i…" */
@media (max-width: 760px) { body.afar .hero:not(.hero-big) .hero-lead { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } }
/* Compact phone rows: the card links wrap instead of running off the edge ("♡ Sa…") */
body.afar .card-foot .card-links { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
/* Square corners everywhere, matching the square buttons (A11d): photos, gallery, map, Menu and Ask buttons, counters */
body.afar.afar.afar .tile, body.afar.afar.afar .tile img, body.afar.afar.afar .week-pick-media, body.afar.afar.afar .week-pick-media img, body.afar.afar.afar .featured-media, body.afar.afar.afar .guide-callout,
body.afar.afar.afar .gallery-track, body.afar.afar.afar .gallery-area .slide, body.afar.afar.afar .gallery .slide img, body.afar.afar.afar .venue-map iframe, body.afar.afar.afar .map-gate, body.afar.afar.afar .card-photo img,
body.afar.afar.afar .card-logo img, body.afar.afar.afar .card-pic img, body.afar.afar.afar .rn-pic img, body.afar.afar.afar .sister-card img, body.afar.afar.afar .area-img, body.afar.afar.afar .recent-row img,
body.afar.afar.afar .inline-photo, body.afar.afar.afar .inline-photo img, body.afar.afar.afar .feature-inline img, body.afar.afar.afar .menu-toggle, body.afar.afar.afar .ask-btn, body.afar.afar.afar .gallery-count,
body.afar.afar.afar .cap-fold summary, body.afar.afar.afar .cap-fold .cap-body, body.afar.afar.afar .to-top, body.afar.afar.afar .ask-panel, body.afar.afar.afar .guide-tile img { border-radius: 0 !important; }
/* Headroom (user, 28 Oct 2026: "give the affected photo more headroom"): every cropped picture frames slightly high, so roofs,
   peaks, domes and heads keep space above them; a photo's own "pos" (inline) still wins */
body.afar .card-pic img, body.afar .tile img, body.afar .week-pick-media img, body.afar .rn-pic img, body.afar .sister-card img,
body.afar .guide-callout img, body.afar .guide-tile img, body.afar .area-img img, body.afar .featured-media img { object-position: 50% 35%; }
/* A home tile whose picture already shows higher on the page becomes a text item (A14; build.js marks it no-pic) */
body.afar .tile.no-pic { background: transparent !important; border: .5px solid rgba(255, 255, 255, .6) !important; min-height: 180px; }
body.afar:not(.noir) .tile.no-pic { border-color: rgba(0, 0, 0, .6) !important; }
body.afar .tile.no-pic .tile-shade { display: none; }
body.afar .tile.no-pic .tile-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 20px; }
body.home-mag .mag-grid .mag-tile.no-pic { aspect-ratio: auto; }
@media (max-width: 720px) {
  body.home-mag .mag-grid .mag-tile.no-pic, body.home-mag .mag-grid .mag-tile.tile-compact.no-pic { display: block !important; min-height: 0; border: 0 !important;
    border-top: .5px solid rgba(255, 255, 255, .25) !important; padding: 14px 0 !important; aspect-ratio: auto !important; }
  body.home-mag .mag-grid .mag-tile.no-pic .tile-text { position: static !important; padding: 0 !important; }
}
body.afar .rn-card.no-pic { border-top: .5px solid rgba(255, 255, 255, .45); padding-top: 14px; }
/* Justified text (user, 28 Oct 2026: justified and hyphenated across the site). Computers and tablets: every reading
   paragraph. Phones (about 40 characters a line): full-width reading text only, set at 17.6 px so lines carry more words;
   the 2-line card blurbs and columns under 300 px stay left, where justification opened gaps four times a word space. */
@media (min-width: 761px) {
  body.afar .venue-about p:not(.byline):not(.lead):not(.why-h):not(.gallery-cap), body.afar .prose p, body.afar .card .desc, body.afar .featured-desc,
  body.afar .week-pick-text, body.afar .note-text, body.afar .guide-advice .note-text, body.afar .list-group > p.muted, body.afar .guide-group > p.muted,
  body.afar .top3-head p, body.home-mag .mag-block > p, body.afar .stop-body > p:not(.meta), body.afar .take-why li {
    text-align: justify !important; text-justify: inter-word; -webkit-hyphens: auto !important; hyphens: auto !important; hyphenate-limit-chars: 6 3 2; }
}
@media (max-width: 760px) {
  body.afar .venue-about p:not(.byline):not(.lead):not(.why-h):not(.gallery-cap), body.afar .prose p, body.afar .note-text, body.afar .guide-advice .note-text,
  body.afar .list-group > p.muted, body.afar .guide-group > p.muted, body.home-mag .mag-block > p, body.afar .stop-body > p:not(.meta), body.afar .week-pick-text {
    text-align: justify !important; text-justify: inter-word; -webkit-hyphens: auto !important; hyphens: auto !important; hyphenate-limit-chars: 5 2 2; }
  body.afar .venue-one .venue-about p:not(.byline):not(.why-h):not(.small):not(.checked):not(.owner-link):not(.discuss-jump):not(.lead) { font-size: 1.1rem; }
  body.afar .card .desc { text-align: left !important; -webkit-hyphens: manual !important; hyphens: manual !important; }
}
/* A spotlight or week's pick whose picture already shows higher on the page keeps its text only (A14a) */
body.afar .week-pick.no-media { grid-template-columns: 1fr !important; max-width: 760px; }
/* Top-menu fix (user, 29 Oct 2026, RULEBOOK D2): every group opens the same way; while the phone menu is open the Ask
   button and the bottom bars step aside; in a dropdown, a list's own name reads as the head of the sections under it */
body.menu-open .ask-btn, body.menu-open .venue-bar, body.menu-open .tabbar { display: none !important; }
.nav-more-menu > a:not(.nav-sub):has(+ a.nav-sub) { color: #fff; font-weight: 500; }
@media (min-width: 900px) { .nav-more-menu { overscroll-behavior: contain; } }

/* "Don't miss" story rail (opt-in site.storyRail, 29 Oct 2026; after Condé Nast Traveler's right-hand column).
   Desktop >= 1180px: a sticky 300px column beside guide sections and article text. Phones/tablets: one inline block. */
.story-rail { margin: 40px 0; }
.story-rail .sr-h { margin: 0 0 14px; padding-bottom: 10px; border-bottom: .5px solid currentColor; font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sr-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; color: inherit; text-decoration: none; }
.sr-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(127, 127, 127, .15); }
.sr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sr-item:hover .sr-pic img { transform: scale(1.04); }
.sr-text { display: flex; flex-direction: column; gap: 5px; }
.sr-kicker { color: var(--kick, #c8102e); font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sr-name { font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; }
.sr-item:hover .sr-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .5px; }
.sr-item.sr-first { grid-template-columns: 1fr; gap: 10px; }
.sr-item.sr-first .sr-pic { aspect-ratio: 3 / 2; }
.sr-item.sr-first .sr-name { font-size: 1.3rem; }
.rail-side { display: none; }
@media (min-width: 640px) and (max-width: 1179px) {
  .story-rail .sr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .sr-item.sr-first { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .sr-item.sr-first .sr-pic { aspect-ratio: 4 / 3; }
  .sr-item.sr-first .sr-name { font-size: 1.05rem; }
}
@media (min-width: 1180px) {
  .rail-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
  .rail-main { min-width: 0; }
  .rail-side { display: block; position: sticky; top: calc(var(--pin-h, 140px) + 96px); margin: 8px 0 0; }
  .rail-inline { display: none; }
  .rail-wrap .rail-main .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.afar .venue-grid.venue-one.has-rail { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 56px; max-width: none; justify-content: center; align-items: start; }
  .has-rail > .rail-art { position: sticky; top: calc(var(--pin-h, 140px) + 28px); margin: 8px 0 0; }
}
/* Explore-more grid, compact (user, 29 Oct 2026: "smaller rectangle height wise and length wise"; RULEBOOK D2): the
   "Explore more of <City>" boxes at the foot of every list page are small equal-height tiles, kicker over title, up to six
   to a row on computers, two on phones; the line illustration is left out (black on the black pages, it never showed) */
body .others .others-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
body .others .others-grid .other { display: block; padding: 12px 14px !important; min-height: 0; font-size: 1.02rem; line-height: 1.18; }
body .others .others-grid .other .other-illo { display: none; }
body .others .others-grid .other span { font-size: .6rem; letter-spacing: .16em; margin: 0 0 5px; }
@media (max-width: 640px) {
  body .others .others-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body .others .others-grid .other { padding: 10px 12px !important; font-size: .95rem; }
  body .others .others-grid .other span { font-size: .56rem; letter-spacing: .12em; }
}

/* Balance audit 29 Oct (RULEBOOK A15): one left edge on venue pages, balanced card rows, open favourites columns,
   square leftovers, the "On this page" bar on white pages, the Instagram panel in the gallery column, the "At a glance"
   facts without a drop cap, and the Ask / back-to-top buttons tucking away while you read on phones. */
/* Venue pages: crumbs, title and standfirst share the 860 px column of the gallery and "Our take"; About keeps its
   760 px measure on the same left edge (it was 140 / 290 / 340 px on a 1440 px screen) */
@media (min-width: 900px) {
  body.afar:not(.art-page) main.venue > .wrap > .crumbs,
  body.afar:not(.art-page) main.venue > .wrap > .venue-head { max-width: 860px; margin-left: auto; margin-right: auto; }
  body.afar:not(.art-page) main.venue > .wrap > .venue-grid.venue-one { margin-left: max(0px, calc(50% - 430px)); margin-right: auto; }
}
body.afar main.venue .ig-panel { max-width: 860px; margin-left: auto; margin-right: auto; }
body.afar main.venue .ig-gate { aspect-ratio: 16 / 7; max-height: 380px; }
/* Balanced rows (app.js "Balanced rows"): the trailing cards of a grid share the last two rows evenly instead of
   leaving one or two cards beside empty columns */
body .bal.bal.bal:not(#_):not(#_) { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
body .bal.bal-c2:not(#_):not(#_) > * { grid-column: span 6 !important; }
body .bal.bal-c3:not(#_):not(#_) > * { grid-column: span 4 !important; }
body .bal.bal-c4:not(#_):not(#_) > * { grid-column: span 3 !important; }
body .bal.bal.bal:not(#_):not(#_) > .bal-4 { grid-column: span 4 !important; }
body .bal.bal.bal:not(#_):not(#_) > .bal-6 { grid-column: span 6 !important; }
/* "Our favourites right now": open columns under a 0.5 px rule, not boxes; on phones the first four lists and a
   "Show all" button */
body.afar #top-picks .picks { gap: 44px 32px; }
body.afar #top-picks .pick { background: transparent !important; border: 0 !important; border-top: .5px solid rgba(255, 255, 255, .6) !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 0 0 !important; }
body.afar:not(.noir) #top-picks .pick { border-top-color: rgba(0, 0, 0, .6) !important; }
body.afar #top-picks .pick.is-capped { display: none !important; }
/* "On this page" on white guide pages: white bar, black links (it was a black bar with black links) */
body.a12:not(.noir) .guide-nav.page-jump { background: #fff; border-top-color: rgba(0, 0, 0, .45); border-bottom-color: rgba(0, 0, 0, .45); }
body.a12:not(.noir) .guide-nav.page-jump a { color: #000; border-color: rgba(0, 0, 0, .3); }
body.a12:not(.noir) .guide-nav.page-jump a span { color: rgba(0, 0, 0, .6); }
body.a12:not(.noir) .guide-nav.page-jump a:hover { border-color: #000; color: #000; }
/* Square corners left over from the old design (A14f) */
body.afar.afar .pager-all, body.afar.afar .recent-row a, body.afar.afar .recent-row img, body.afar.afar .sister-card,
body.afar.afar .list-map, body.afar.afar .cta-panel, body.afar.afar .event-cat, body.afar.afar main img,
body.afar.afar .site-footer a, body.afar.afar .site-footer span { border-radius: 0 !important; }
/* "At a glance" facts in history articles: no drop cap, set left (they are facts, not prose) */
body .venue-about.is-article:not(#_) > h3.art-glance + p::first-letter { float: none; font: inherit; margin: 0; color: inherit; }
body .venue-about.is-article:not(#_):not(#_) p.glance { text-align: left !important; -webkit-hyphens: manual !important; hyphens: manual !important; }
/* Phones: the Ask and back-to-top buttons step aside while you scroll down (they covered links and the Browse by
   type chips) and come back as soon as you scroll up */
@media (max-width: 640px) {
  .ask-btn, .to-top { transition: transform .25s ease, opacity .25s ease; }
  body.fab-tuck .ask-btn, body.fab-tuck .to-top { transform: translateY(160%); opacity: 0; pointer-events: none; }
}
/* Balance audit 29 Oct: the list index reads as one clean column of names on phones, without the part-shown section dots */
body.afar .list-index li > a::before { display: none !important; }
@media (max-width: 640px) { body.afar .list-index { columns: 1 !important; grid-template-columns: 1fr !important; } }
/* "Don't miss" column, all seven uses (user, 29 Oct 2026: "let go with 1 to 7"; RULEBOOK A15m): venue pages, the list
   pages' "Read before you go" band, the season's story, a partner, a sister guide, What's on and the newsletter */
.story-rail .sr-season[hidden] { display: none; }
.story-rail .sr-events { margin-top: 26px; }
.story-rail .sr-events ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.story-rail .sr-events a { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.story-rail .sr-ev-t { font-family: var(--serif); font-size: 1rem; line-height: 1.25; }
.story-rail .sr-ev-v { font-size: .8rem; opacity: .72; }
.story-rail .sr-events a:hover .sr-ev-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .5px; }
.story-rail .sr-nl { margin: 26px 0 0; padding-top: 16px; border-top: .5px solid currentColor; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-rail .sr-nl-t { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.story-rail .sr-nl .btn { flex: none; min-height: 40px; padding: 0 16px; }
.rail-side.rail-static, .has-rail > .rail-art.rail-static { position: static !important; }
/* list pages: "Read before you go" sits between the insiders' picks and the full list, four long reads in a row */
.story-rail.rail-band { margin: 8px 0 44px; }
.rail-band .sr-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 26px !important; }
.rail-band .sr-item { grid-template-columns: 1fr !important; gap: 10px !important; }
.rail-band .sr-pic { aspect-ratio: 3 / 2 !important; }
.rail-band .sr-name { font-size: 1.12rem; }
@media (max-width: 960px) { .rail-band .sr-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px) {
  .rail-band .sr-list { grid-template-columns: 1fr !important; gap: 16px !important; }
  .rail-band .sr-item { grid-template-columns: 96px minmax(0, 1fr) !important; gap: 14px !important; }
  .rail-band .sr-pic { aspect-ratio: 4 / 3 !important; }
}
/* venue pages: gallery, "Our take" and About share the main column; the column sits beside them on computers */
@media (min-width: 1180px) {
  .rail-venue .rail-main > .gallery, .rail-venue .rail-main > .our-take, .rail-venue .rail-main > .gallery-cap { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .rail-venue > .rail-side { top: calc(var(--pin-h, 140px) + 28px); }
}
@media (min-width: 961px) { .rail-band-3 .sr-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 961px) { .rail-band-2 .sr-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Home region bar label (user, 30 Oct 2026): a heading that says what the buttons are, with a one-line explanation */
.regbar-net .regbar-label .regbar-sub { display: block; margin-top: 6px; font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .06em; text-transform: none; color: rgba(255, 255, 255, .66); }
/* Home section bars ("Choose your cruise", region guides' "Choose a region") scroll away with the page instead of pinning
   under the header (user, 30 Oct 2026: on Cruises it "sticks to the page"); the menu row stays the only pinned bar */
body .regbar { position: relative !important; top: auto !important; }
/* The menu (user, 30 Oct 2026: "can you not just create a new menu"). app.js keeps every menu <details> open and shows a
   panel only when its group has .is-open (class nav-dd), because Safari 26 drew the browser's own fold badly. These rules
   hide the closed panels and give the labels their closed look again, in place of the [open] rules above. */
body .site-nav .nav-dd:not(.is-open) > .nav-more-menu, body .nav-dd:not(.is-open) > .nav-more-menu { display: none !important; }
body:not(.bazaar) .nav-dd:not(.is-open) > summary::after { content: " \25BE"; }
.nav-dd[open]:not(.is-open):not(.has-current) > summary:not(:hover) { color: rgba(255, 255, 255, .8); }
@media (min-width: 900px) {
  .bazaar .site-nav .nav-dd[open]:not(.is-open):not(.has-current) > summary:not(:hover) { color: rgba(255, 255, 255, .88); text-decoration: none; }
}
@media (max-width: 899px) {
  body.a12 .site-nav.open .nav-dd:not(.is-open) > summary::after { content: '+'; }
  body.a12 .site-nav.open .nav-dd[open]:not(.is-open):not(.has-current) > summary:not(:hover) { color: #fff !important; }
}
/* Menu above the page (30 Oct 2026): Safari 26 on the Mac painted the moving hero picture over the open menu panels, so
   only the panel's top border showed as a thin line. The header gets its own top layer, and the hero keeps its animated
   pictures inside its own stacking context, so nothing on the page can paint over the menu. */
.site-header { z-index: 1000 !important; isolation: isolate; }
html, body { overflow-x: clip; }  /* sideways guard for the full-width rule under the menu (it used to be the header's own clip, see above) */
.site-header { overflow: visible !important; }
.hero, .mag-cover, .venue-hero, .page-hero { isolation: isolate; z-index: 0; }

/* Hero spotlight (user, 30 Oct 2026): the week's picks take turns in the home hero (home-rhythm.json "heroSpots";
   app.js "Hero spotlight"). Photos crossfade with a slow zoom; one spot shows at a time in a fixed-height stack so the
   page never jumps; thin progress bars under it. */
.hero-spots .spot-img { opacity: 0; transition: opacity 1.4s ease; animation: none !important; }
.hero-spots .spot-img.is-on { opacity: 1; animation: spot-zoom calc(var(--spot-ms, 7000ms) + 1600ms) linear both !important; }
@keyframes spot-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero-spots .hero-inner > .spot-stack, .hero-spots .hero-inner > .spot-nav { animation: none; }
body .hero.hero-spots h1.spot-h1 { font-size: .8rem !important; line-height: 1.4 !important; letter-spacing: .2em !important; font-family: inherit !important; font-weight: 400 !important; max-width: none !important; margin: 0 0 16px !important; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
body .hero.hero-spots h1.spot-h1 span { color: #FF453A; }
.hero-spots .eyebrow { display: none; }
.spot-stack { display: grid; max-width: 760px; }
.spot { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s; }
.spot.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s ease .25s, transform .8s ease .25s, visibility 0s; }
.hero-spots .spot-kicker { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: #FF453A; font-weight: 500; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.spot-title { font-family: var(--display, 'Bodoni Moda', serif); font-weight: 600; font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.04; text-wrap: balance; }
.spot-sub { font-size: 1.08rem; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 56ch; }
.spot-go { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
.spot:hover .spot-title, .spot:focus-visible .spot-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.spot-nav { display: flex; align-items: center; gap: 10px; margin: 26px 0 4px; max-width: 560px; }
.spot-nav > button { background: none; border: .5px solid rgba(255, 255, 255, .55); color: #fff; width: 36px; height: 36px; border-radius: 0; font: inherit; font-size: .85rem; cursor: pointer; flex: none; }
.spot-nav > button:hover, .spot-nav > button:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .12); }
.spot-bars { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex: 1; }
.spot-bars li { flex: 1; }
.spot-bars button { display: block; width: 100%; padding: 12px 0; background: none; border: 0; cursor: pointer; }
.spot-bars button span { display: block; height: 2px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden; }
.spot-bars button span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.spot-bars button[aria-current] span::after { transform: scaleX(1); }
.spot-bars button.run span::after { animation: spot-bar var(--spot-ms, 7000ms) linear both; }
.hero-spots.is-held .spot-bars button.run span::after { animation-play-state: paused; }
@keyframes spot-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-spots .hero-search { margin-top: 14px; }
@media (max-width: 760px) {
  .spot-title { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .spot-sub { font-size: .98rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .spot-nav { margin-top: 18px; }
  .spot-nav > button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-spots .spot-img.is-on { animation: none !important; }
  .spot, .spot.is-on { transition: none; transform: none; }
}
/* Hero spotlight legibility (30 Oct 2026): a soft dark wash behind the text column so the red kickers read on bright skies */
body .hero.hero-spots .hero-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .42) 42%, rgba(0, 0, 0, .08) 72%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .85) 100%); }
@media (max-width: 760px) { body .hero.hero-spots .hero-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .9) 100%); } }
body .hero.hero-spots h1.spot-h1 span, .hero-spots .spot-kicker { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }