: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); }

/* Magazine layout for artworks in articles (user, 31 Oct 2026): two or three "half" artworks on one paragraph sit side by side.
   Each figure grows by its aspect ratio (flex: ar), so every picture in a row has the same height, like a magazine spread. */
.art-row { display: flex; gap: 16px; margin: 36px 0; align-items: flex-start; }
.art-row .inline-photo { margin: 0 !important; min-width: 0; }
.art-row .inline-photo img { width: 100% !important; height: auto !important; max-height: none !important; }
@media (max-width: 639px) { .art-row { flex-direction: column; } .art-row .inline-photo { flex: none !important; } }
.inline-photo.art-half:not(.art-row .art-half) img { max-height: 440px !important; }

/* ===== Magazine article pages (user, 31 Oct 2026: "every article page should be laid out like a magazine page") =====
   build.js MAG (venue pages with l.article: body.mag-art; articleBody, artOpen) and MAGI (info pages: body.mag-info).
   Centred title block, full-bleed opening photo at the slim hero height, a ~70-character measure, drop cap, photos in a
   rhythm (inset left/right beside the text, wide, portrait pairs), small-caps section breaks, pull quote, end mark.
   White pages (noir rule): no body.noir counterpart needed, but colours use currentColor/var(--ink) where possible. */
body.mag-art main.venue, body.mag-info main { overflow-x: clip; }
body.afar.mag-art .crumbs { max-width: 760px; text-align: center; }
body.afar.mag-art .venue-head { max-width: 860px; margin: 10px auto 34px; text-align: center; }
body.afar.mag-art .venue-head .venue-rank { margin: 0 0 14px; letter-spacing: .2em; }
body.afar.mag-art.art-page .venue-head h1 { font-size: clamp(2.3rem, 5.4vw, 4rem) !important; line-height: 1.04; letter-spacing: -.02em; max-width: 19ch; margin: 0 auto; text-wrap: balance; }
body.afar.mag-art .venue-head .venue-meta { justify-content: center; margin: 14px 0 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
body.afar.mag-art .venue-head .venue-dek { font-family: var(--read); font-style: italic; font-weight: 300; font-size: clamp(1.18rem, 2vw, 1.45rem) !important; line-height: 1.45; color: #1a1a1a; max-width: 34em; margin: 20px auto 0 !important; text-align: center !important; text-wrap: pretty; -webkit-hyphens: none; hyphens: none; }
body.afar.mag-art.art-page .venue-head .byline { display: inline-block; margin: 22px auto 0; padding-top: 14px; border-top: .5px solid currentColor; font-size: .72rem; letter-spacing: .16em; }
.art-open { width: 100vw; margin: 0 0 40px calc(50% - 50vw); background: none !important; }
.art-open img { display: block; width: 100%; height: min(52vh, 460px); min-height: 300px; object-fit: cover; border-radius: 0 !important; border: 0 !important; }
.art-open figcaption.inline-cap { width: min(760px, 100% - 32px); margin: 10px auto 0; padding: 0; font-size: .8rem; color: #6b6b6b; display: flex; justify-content: space-between; gap: 12px; background: none; }
.art-open figcaption a { color: inherit; }
/* the reading column: text at ~70 characters inside the 760 px column; photos use the full column or more */
body.afar.mag-art .venue-about.is-article { display: flow-root; }
body.afar.mag-art .venue-about.is-article > :not(figure):not(.art-row) { max-width: 680px; margin-left: auto; margin-right: auto; }
body.afar.mag-art .venue-about.is-article > :not(p):not(.art-left):not(.art-right) { clear: both; }
body.afar.mag-art .venue-about.is-article:not(#_) > p:not(.byline):not(.glance):not(.small):not(.discuss-jump) { font-family: var(--read); font-size: 1.2rem; line-height: 1.7; margin-top: 0; margin-bottom: 1.15em; }
body.afar.mag-art .venue-about.is-article:not(#_) > p.art-lede { font-size: 1.32rem !important; line-height: 1.62; }
/* drop cap: only the first paragraph (the older "first paragraph after the first heading" cap is switched off here) */
body.mag-art .venue-about.is-article:not(#_):not(#_) > p:not(.dropcap)::first-letter { float: none; font: inherit; margin: 0; color: inherit; }
body.mag-art .venue-about.is-article:not(#_):not(#_) > p.dropcap::first-letter,
body.mag-info .prose:not(#_):not(#_) > p.dropcap::first-letter { float: left; font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; font-weight: 600; font-variation-settings: 'opsz' 28; font-size: 4.7em; line-height: .8; margin: .07em .09em -.04em 0; color: var(--ink, #000); }
/* section breaks: a short centred rule, then the heading in small capitals */
body.mag-art .venue-about.is-article:not(#_) > h3.art-h:not(.art-glance) { position: relative; text-align: center; border-top: 0 !important; border-bottom: 0 !important; margin-top: 60px; margin-bottom: 24px; padding-top: 30px; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
body.mag-art .venue-about.is-article > h3.art-h:not(.art-glance)::before, body.mag-info .mag-prose > h2::before { content: ""; position: absolute; top: 0; left: 50%; width: 48px; margin-left: -24px; border-top: .5px solid currentColor; }
body.mag-art .venue-about.is-article > h3.art-h.art-glance { margin-top: 56px; }
/* pull quote */
body.mag-art .venue-about.is-article:not(#_) > blockquote.pull, body.mag-info .prose:not(#_) blockquote.pull { max-width: 560px; margin: 52px auto; padding: 30px 8px 26px; border-top: .5px solid currentColor; border-bottom: .5px solid currentColor; font-family: var(--read); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.26; letter-spacing: -.005em; text-align: center; text-wrap: balance; }
body.mag-art .venue-about.is-article > blockquote.pull::before { content: "\201C"; display: block; margin: 0 0 6px; font-family: "Bodoni Moda", Didot, Georgia, serif; font-style: normal; font-weight: 600; font-size: 3.4rem; line-height: .6; color: var(--kick, #FF453A); }
/* end mark */
.endmark { display: inline-block; width: .5em; height: .5em; margin-left: .4em; background: currentColor; vertical-align: .02em; }
/* photos: wide (the full column, more on wide screens without the rail), column (the text measure), inset left/right */
body.afar.mag-art .venue-about.is-article .inline-photo { margin: 40px 0 !important; }
body.afar.mag-art .venue-about.is-article .inline-photo.art-col { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
body.afar.mag-art .venue-about.is-article .art-row.art-pair { margin: 44px 0; }
.mag-art .inline-photo.art-left, .mag-art .inline-photo.art-right, .mag-info .feature-inline.art-left, .mag-info .feature-inline.art-right { width: 40%; }
body.afar.mag-art .venue-about.is-article .inline-photo.art-right, .mag-info .feature-inline.art-right { float: right; margin: 6px 0 24px 36px !important; }
body.afar.mag-art .venue-about.is-article .inline-photo.art-left, .mag-info .feature-inline.art-left { float: left; margin: 6px 36px 24px 0 !important; }
/* Text set beside an inset photo runs ragged right, not justified: a ~300px measure justified opens rivers (user, 31 Oct 2026) */
body.afar.mag-art .venue-about.is-article .inline-photo.art-left + p, body.afar.mag-art .venue-about.is-article .inline-photo.art-right + p, .mag-info .feature-inline.art-left + p, .mag-info .feature-inline.art-right + p { text-align: left !important; word-spacing: normal !important; }
.mag-art .inline-photo.art-left img, .mag-art .inline-photo.art-right img { aspect-ratio: 3 / 2; }
.mag-art .inline-photo.art-whole img { aspect-ratio: auto !important; }
.mag-art .inline-photo.art-left figcaption, .mag-art .inline-photo.art-right figcaption { font-size: .76rem; }
@media (min-width: 1100px) {
  body.afar.mag-art .venue-one:not(.has-rail) .venue-about.is-article .inline-photo.art-wide,
  body.afar.mag-art .venue-one:not(.has-rail) .venue-about.is-article .art-row.art-pair { margin-left: -140px !important; margin-right: -140px !important; }
  body.afar.mag-art .venue-one:not(.has-rail) .venue-about.is-article .inline-photo.art-right { margin-right: -70px !important; }
  body.afar.mag-art .venue-one:not(.has-rail) .venue-about.is-article .inline-photo.art-left { margin-left: -70px !important; }
  .mag-info .mag-prose .feature-inline.art-right { margin-right: -110px !important; }
  .mag-info .mag-prose .feature-inline.art-left { margin-left: -110px !important; }
}
/* info pages (Christmas, essentials …): the same measure, drop cap, rhythm and end mark under their slim hero */
body.mag-info .prose.mag-prose { display: flow-root; max-width: 760px; margin-left: auto; margin-right: auto; }
body.mag-info .mag-prose > :not(figure):not(.calc) { max-width: 680px; margin-left: auto; margin-right: auto; }
body.mag-info .mag-prose > h2 { position: relative; clear: both; text-align: center; margin-top: 64px; padding-top: 30px; text-wrap: balance; }
body.mag-info .mag-prose > h2#faq ~ * { clear: both; }
body.mag-info .mag-prose > ul, body.mag-info .mag-prose > .guide-more, body.mag-info .mag-prose > figure.art-wide { clear: both; }
body.mag-info .mag-prose:not(#_) > p:not(.byline) { font-family: var(--read); font-size: 1.2rem; line-height: 1.7; }
body.mag-info .mag-prose > p.byline { text-align: center; margin: 0 auto 8px; font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.mag-info .mag-prose > p.byline a { color: inherit; text-decoration: none; }
body.mag-info .mag-prose > figure.art-wide { margin: 40px 0; }
.mag-info .feature-inline.art-left img, .mag-info .feature-inline.art-right img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; }
@media (max-width: 760px) {
  body.afar.mag-art .venue-about.is-article .inline-photo.art-left, body.afar.mag-art .venue-about.is-article .inline-photo.art-right,
  .mag-info .feature-inline.art-left, .mag-info .feature-inline.art-right { float: none; width: auto; margin: 32px 0 !important; }
  .art-open { margin-bottom: 28px; }
  .art-open img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  body.afar.mag-art.art-page .venue-head h1 { font-size: clamp(2rem, 8.6vw, 2.6rem) !important; }
  body.afar.mag-art .venue-about.is-article:not(#_) > p:not(.byline):not(.glance):not(.small):not(.discuss-jump), body.mag-info .mag-prose:not(#_) > p:not(.byline) { font-size: 1.1rem; }
  body.mag-art .venue-about.is-article:not(#_):not(#_) > p.dropcap::first-letter, body.mag-info .prose:not(#_):not(#_) > p.dropcap::first-letter { font-size: 4em; }
}
.art-open.art-open-whole { width: auto; margin: 0 auto 40px; max-width: 860px; }
.art-open.art-open-whole img { height: auto; min-height: 0; aspect-ratio: auto; }
/* l.video (1 Nov 2026): the guide's own film in an article, 16:9, plays on click only (RULEBOOK E6) */
.inline-photo.art-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: .5px solid #fff; }
/* l.slider (1 Nov 2026): the sliding photo frame shows each photo whole, on a soft mat, never cropped */
.gallery-whole .slide > img { object-fit: contain; object-position: 50% 50%; background: #f2f1ee; }
/* Official booking panel (opt-in l.book / c.book, 1 Nov 2026) */
.book-official .book-text { margin: 0 0 16px; max-width: 60ch; }
.book-official .book-btns { margin: 0; }
/* Gold header (user, 2 Nov 2026; Brighton trial, body.goldhead): gold ULTIMATE and City Guide, gold hairline under the menu */
/* The guide's accent: build.js sets --city-accent on <body> from site.json "accent" (Brighton cornflower #8FB3E0); header gold if unset */
body.goldhead { --city-accent: #C9A96E; }
body.goldhead .site-header .brand-word, body.goldhead .site-header .brand small { background: none !important; color: var(--city-accent) !important; -webkit-text-fill-color: var(--city-accent) !important; text-shadow: none !important; }
body.goldhead .site-header { border-bottom: 1px solid var(--city-accent) !important; }
/* Gold kickers (user, 2 Nov 2026; Brighton trial): on the goldhead home page the red kickers, "This week" and edition line take the header gold */
body.goldhead.home-mag { --kick: var(--city-accent); }
body.goldhead.home-mag .edition, body.goldhead.home-mag .tile-kicker, body.goldhead.home-mag .mag-k, body.goldhead.home-mag .mag-cover .week-pick-body .eyebrow,
body.goldhead.home-mag .hero.hero-spots h1.spot-h1 span, body.goldhead.home-mag .hero-spots .spot-kicker, body.goldhead.home-mag .mag-see:hover { color: var(--city-accent) !important; }
/* Divider bands (user, 2 Nov 2026; Brighton trial, graphite first, then "white background and black writing"): the home page's divider
   sections (the intro, quote lines, advice notes) sit on full-width white with black text; the photo sections stay black. Full width via a spread shadow clipped to the band. */
body.goldhead.home-mag :is(.intro:not(.home-feature), .pull-line, .home-note) { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); padding-top: 44px !important; padding-bottom: 44px !important; }
body.goldhead.home-mag :is(.intro:not(.home-feature), .pull-line, .home-note) :is(h2, h3, p, blockquote, a, span:not(.note-kicker)) { color: #000 !important; -webkit-text-fill-color: #000; }
body.goldhead.home-mag .home-note .note-kicker::before { background: #000 !important; }
/* No shading on the hero slideshow (user, 2 Nov 2026; Brighton trial): photos show clean; a soft text shadow keeps the words legible */
body.goldhead.home-mag .hero-spots .hero-shade { display: none !important; }
body.goldhead.home-mag .hero-spots :is(h1, p, a, .spot-kicker) { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 18px rgba(0, 0, 0, .45); }
/* Quieter hero search (user, 2 Nov 2026; Brighton trial): the button reads white on black, a slim outline, not a white block */
body.goldhead.home-mag .hero-search button { background: rgba(0, 0, 0, .55) !important; color: #fff !important; border: .5px solid rgba(255, 255, 255, .45) !important; box-shadow: none !important; }
body.goldhead.home-mag .hero-search button:hover { background: #000 !important; border-color: var(--city-accent) !important; }
body.goldhead.home-mag .hero-search input { background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .35); }
/* Hotel band (opt-in home-rhythm "hotelBand", 2 Nov 2026): four named hotels with "Check prices" on their own Booking.com page */
.hotel-band { padding-top: 8px; padding-bottom: 40px; }
.hotel-band > p { max-width: 62ch; margin: 0 0 22px; }
.hb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.hb-card { display: flex; flex-direction: column; }
.hb-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: .5px solid rgba(255, 255, 255, .5); }
.hb-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-k { margin: 12px 0 4px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--city-accent); }
.hb-card h3 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.2; }
.hb-card h3 a { color: inherit; text-decoration: none; }
.hb-d { margin: 0 0 14px; font-size: .95rem; opacity: .82; flex: 1; }
.hb-book { align-self: flex-start; padding: 10px 16px; border: .5px solid var(--city-accent); color: var(--city-accent); text-decoration: none; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.hb-book:hover { background: var(--city-accent); color: #000; }
@media (max-width: 900px) { .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hb-grid { gap: 26px 14px; } .hb-card h3 { font-size: 1.05rem; } .hb-d { display: none; } }
body.goldhead.home-mag .hero-search button { min-height: 44px !important; height: 44px; padding: 0 16px !important; font-size: .74rem !important; letter-spacing: .1em; border: .5px solid #fff !important; }
body.goldhead.home-mag .hero-search input { height: 44px; padding: 0 16px !important; font-size: .9rem; border-width: .5px; }
/* The graphite divider bands have no edge lines (user, 2 Nov 2026: tried full-width 0.5px lines, then removed) */
body.goldhead.home-mag :is(.intro:not(.home-feature), .pull-line) { border-top-color: transparent !important; border-bottom-color: transparent !important; }
/* Tighter home rhythm (user, 2 Nov 2026; Brighton trial: "close unnecessary black gaps"): about 44px between sections, not 90–150 */
body.goldhead.home-mag .home-feature.mag-block { margin-top: 44px !important; }
body.goldhead.home-mag .intro:not(.home-feature) { margin-top: 28px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag .hotel-band { margin-top: 36px !important; padding-bottom: 4px !important; }
body.goldhead.home-mag .mag-list { margin-top: 20px !important; }
body.goldhead.home-mag .newsletter { margin-top: 44px !important; padding-top: 40px !important; padding-bottom: 40px !important; }
body.goldhead.home-mag .sister-sites { padding-bottom: 20px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag .week-pick { padding-bottom: 28px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag .all-lists { padding-bottom: 8px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag #neighbourhoods.areas, body.goldhead.home-mag #top-picks { padding-top: 44px !important; padding-bottom: 44px !important; }
body.goldhead.home-mag .pull-line { margin-top: 20px !important; margin-bottom: 20px !important; }
body.goldhead.home-mag .home-note { margin-top: 24px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag .home-note + .newsletter { margin-top: 24px !important; }
body.goldhead.home-mag #neighbourhoods.areas + #top-picks { padding-top: 16px !important; }
/* Gold signature city name (user, 2 Nov 2026; Brighton trial): the city in a hand signature, gold, tucked against ULTIMATE like a designer label */
body.goldhead .site-header .brand-text > strong { font-family: 'Mrs Saint Delafield', 'Bodoni Moda', cursive !important; font-weight: 400 !important; font-style: normal !important; color: var(--city-accent) !important; -webkit-text-fill-color: var(--city-accent) !important; font-size: 2.6em !important; line-height: .8 !important; letter-spacing: 0 !important; text-transform: none !important; margin-left: -.1em; position: relative; top: .14em; }
@media (max-width: 520px) { body.goldhead .site-header .brand-text > strong { font-size: 2.05em !important; } }
/* Logo without "City Guide" (user, 2 Nov 2026; Brighton trial): ULTIMATE + the signature city name only (the link's aria-label keeps the full name) */
body.goldhead .site-header .brand-stack small { display: none !important; }
/* Font scheme "Instrument Serif + Inter" (user, 2 Nov 2026; Brighton trial, after DM Sans and Inter alone): Instrument Serif for
   headings and titles, Inter for reading text and the interface; the logo keeps Bodoni ULTIMATE + the gold signature.
   Instrument Serif has one weight, so no faux bold: headings set at 400 with a touch of negative tracking. */
body.goldhead { --serif: "Instrument Serif", Georgia, serif; --display: "Instrument Serif", Georgia, serif; --read: "Inter", "Helvetica Neue", Arial, sans-serif; --sans: "Inter", "Helvetica Neue", Arial, sans-serif; font-synthesis: none; }
body.goldhead .mag { --mag: "Inter", "Helvetica Neue", Arial, sans-serif; }
body.goldhead :is(h1, h2, h3, .spot-title, .tile-title, .mag-t, .hb-card h3) { font-weight: 400 !important; font-variation-settings: normal !important; letter-spacing: -.005em; }
body.goldhead .site-header .brand-word { font-family: "Bodoni Moda", "Bodoni 72", Didot, serif !important; }
body.goldhead :is(h1, h2, h3, .spot-title, .tile-title, .mag-t, .hb-card h3) { font-size-adjust: .5; line-height: 1.06; }
/* Smaller article text in Inter (user, 2 Nov 2026; Brighton trial, "still too big"): 16px body, 17.5px intro (were 19.2 / 21.1, sized for Newsreader) */
body.goldhead:is(.mag-art, .mag-info) :is(.venue-about, .prose) p:not(.art-lede):not(.byline) { font-size: 16px !important; line-height: 1.7 !important; }
body.goldhead:is(.mag-art, .mag-info) :is(.venue-about, .prose) p.art-lede { font-size: 19px !important; line-height: 1.65 !important; }
body.goldhead:is(.mag-art, .mag-info) :is(.venue-about, .prose) li { font-size: 16px !important; line-height: 1.7 !important; }
body.goldhead:is(.mag-art, .mag-info) p.art-lede:not(#_):not(#_):not(#_) { font-size: 17.5px !important; line-height: 1.65 !important; }
.intro-text > p + p { margin-top: 1em; }
/* Softer photos (user, 2 Nov 2026; Brighton trial): rounded corners on photo blocks (tiles, cards, hotel band, read-next,
   article photos and galleries); the hero, logo and maps stay square */
body.goldhead :is(.tile, .mag-tile, .hb-ph, .card-pic, .rn-pic, .inline-photo img, .gallery, .gallery-track, .week-pick img, .top-cards .tile) { border-radius: 12px !important; overflow: hidden; }
body.goldhead .inline-photo { border-radius: 0; }
/* Signature colour (user, 2 Nov 2026; Brighton trial): gold, then powder pink #8FB3E0, now white */
body.goldhead .site-header .brand-text > strong { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* Rounded photos in the network sections too (user, 2 Nov 2026: the sister-guide photos under "ULTIMATE City Guides worldwide"
   and the network cards; the region buttons stay square) */
body.goldhead:not(#_) :is(.top-cards .tile, .sister-card, .mag-tile, .rn-card) img:not(#_) { border-radius: 12px !important; }
body.goldhead:not(#_) :is(.top-cards .tile, .mag-tile) .tile-shade { border-radius: 12px !important; }
body.goldhead:not(#_) .sister-card { border-radius: 12px !important; overflow: hidden; }
body.goldhead:not(#_) .sister-card img:not(#_) { border-radius: 0 !important; }
/* "In depth" band (user, 2 Nov 2026; Brighton trial): the stories heading and its photo grid on full-width graphite with warm white text */
body.goldhead.home-mag :is(#stories, #stories + .mag-grid) { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); }
body.goldhead.home-mag #stories { padding-top: 40px !important; padding-bottom: 18px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag #stories + .mag-grid { margin-top: 0 !important; padding-bottom: 40px !important; }
body.goldhead.home-mag #stories :is(h2, p), body.goldhead.home-mag #stories + .mag-grid :is(.tile-title, .tile-sub) { color: #e9e6df !important; }
body.goldhead.home-mag #stories + .mag-grid .mag-tile { background: transparent !important; }
body.goldhead.home-mag #stories + .mag-grid { margin-bottom: 0 !important; }
body.goldhead.home-mag #stories + .mag-grid + .pull-line { margin-top: 0 !important; }
/* "By neighbourhood" band (user, 2 Nov 2026; Brighton trial): same graphite and warm white as "In depth" */
body.goldhead.home-mag :is(#neighbourhoods.home-feature, #neighbourhoods.home-feature + .mag-grid) { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); }
body.goldhead.home-mag #neighbourhoods.home-feature { padding-top: 40px !important; padding-bottom: 18px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag #neighbourhoods.home-feature + .mag-grid { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 40px !important; }
body.goldhead.home-mag #neighbourhoods.home-feature + .mag-grid + .pull-line { margin-top: 0 !important; }
body.goldhead.home-mag #neighbourhoods.home-feature :is(h2, p), body.goldhead.home-mag #neighbourhoods.home-feature + .mag-grid :is(.tile-title, .tile-sub) { color: #e9e6df !important; }
body.goldhead.home-mag #neighbourhoods.home-feature + .mag-grid .mag-tile { background: transparent !important; }
/* "Homes & Gardens" band (user, 2 Nov 2026; Brighton trial): graphite and warm white, like "In depth" and "By neighbourhood" */
body.goldhead.home-mag :is(#homes-gardens, #homes-gardens + .mag-grid, #homes-gardens + .mag-grid + .mag-list) { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); }
body.goldhead.home-mag #homes-gardens { padding-top: 40px !important; padding-bottom: 18px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag #homes-gardens + .mag-grid { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 32px !important; }
body.goldhead.home-mag #homes-gardens + .mag-grid + .mag-list { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 32px !important; }
body.goldhead.home-mag #homes-gardens :is(h2, p), body.goldhead.home-mag #homes-gardens + .mag-grid :is(.tile-title, .tile-sub), body.goldhead.home-mag #homes-gardens + .mag-grid + .mag-list :is(.mag-t, .mag-s) { color: #e9e6df !important; }
body.goldhead.home-mag #homes-gardens + .mag-grid .mag-tile { background: transparent !important; }
body.goldhead.home-mag #homes-gardens + .mag-grid + .mag-list + .home-note { margin-top: 0 !important; }
/* No white gap above the newsletter on info and article pages (user, 2 Nov 2026; Brighton trial) */
body.goldhead .wrap.guide { padding-bottom: 20px !important; margin-bottom: 0 !important; }
body.goldhead .wrap.guide > :last-child { margin-bottom: 0 !important; }
/* "The ULTIMATE City Guides around the world" band (user, 2 Nov 2026; Brighton trial): graphite background, warm white text */
body.goldhead.home-mag .sister-sites { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); padding-top: 40px !important; padding-bottom: 40px !important; margin-top: 40px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag .sister-sites :is(h2, p, .sister-card h3, .sister-card p) { color: #e9e6df !important; }
body.goldhead.home-mag .sister-sites .sister-card { background: #26282c !important; border-color: rgba(233, 230, 223, .14) !important; }
body.goldhead.home-mag .sister-sites + .hot-topics + .week-pick, body.goldhead.home-mag .sister-sites + .week-pick { padding-top: 36px !important; }
/* "Plan your day" band (user, 2 Nov 2026; Brighton trial): the itineraries on graphite with warm white text */
body.goldhead.home-mag :is(#plan-day, #plan-day + .mag-grid) { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); }
body.goldhead.home-mag #plan-day { padding-top: 40px !important; padding-bottom: 18px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag #plan-day + .mag-grid { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 40px !important; }
body.goldhead.home-mag #plan-day :is(h2, p), body.goldhead.home-mag #plan-day + .mag-grid :is(.tile-title, .tile-sub) { color: #e9e6df !important; }
body.goldhead.home-mag #plan-day + .mag-grid .mag-tile { background: transparent !important; }
/* "Know your neighbourhoods" (user, 2 Nov 2026; Brighton trial): white background, black text */
body.goldhead.home-mag .areas { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); color: #000; }
body.goldhead.home-mag .areas :is(h2, h3, p, a, span) { color: #000 !important; -webkit-text-fill-color: #000; }
body.goldhead.home-mag #plan-day + .mag-grid + .areas { margin-top: 0 !important; }
/* Slimmer footer (user, 2 Nov 2026; Brighton trial): the 14 network region folds sit four to a row (two on phones), an opened
   fold spans the full row; less padding above, between and below */
body.goldhead .site-footer { padding-top: 32px !important; }
body.goldhead .site-footer .network { margin-top: 20px !important; padding-top: 18px !important; }
body.goldhead .site-footer .network-tag { margin-bottom: 10px !important; }
body.goldhead .site-footer .network-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 24px; }
body.goldhead .site-footer .network-fold { margin: 0 !important; }
body.goldhead .site-footer .network-fold > summary { padding: 8px 0 !important; }
body.goldhead .site-footer .network-fold[open] { grid-column: 1 / -1; }
body.goldhead .site-footer .network-friend { margin-top: 12px !important; }
body.goldhead .site-footer .footer-bottom { margin-top: 20px !important; padding-top: 14px !important; }
@media (max-width: 720px) { body.goldhead .site-footer .network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px; } }
body.goldhead .site-footer .network-grid { row-gap: 0 !important; }
body.goldhead .site-footer .network-fold > summary { min-height: 36px !important; }
/* "Ready to plan your trip?" strip (user, 2 Nov 2026; Brighton trial): white background, black writing, black-outline buttons */
body.goldhead .foot-cta { background: #fff !important; color: #000 !important; }
body.goldhead .foot-cta :is(h2, h3, p, span, strong) { color: #000 !important; -webkit-text-fill-color: #000; }
body.goldhead .foot-cta a { color: #000 !important; -webkit-text-fill-color: #000; border-color: #000 !important; background: transparent !important; }
body.goldhead .foot-cta a:hover { background: #000 !important; color: #fff !important; -webkit-text-fill-color: #fff; }
/* Silver ULTIMATE (user, 2 Nov 2026; Brighton trial): the logo word in a soft silver, the city signature stays white */
body.goldhead .site-header .brand-word:not(#_) { color: #C4C8CC !important; -webkit-text-fill-color: #C4C8CC !important; }
/* Gold city signature (user, 2 Nov 2026; Brighton trial): silver ULTIMATE + gold "Brighton" (white before) */
body.goldhead .site-header .brand-text > strong:not(#_) { color: var(--city-accent) !important; -webkit-text-fill-color: var(--city-accent) !important; }
/* Big tiles too (user, 2 Nov 2026): the tile's own 0.5px outline and overlay round with the photo */
body.goldhead:not(#_) :is(.tile, .mag-tile, .card, .rn-card, .week-pick, .featured):not(#_) { border-radius: 12px !important; }
body.goldhead:not(#_) :is(.tile, .mag-tile)::after, body.goldhead:not(#_) :is(.tile, .mag-tile)::before { border-radius: 12px !important; }
/* Pink accents (user, 2 Nov 2026: "turn all gold areas pink including word brighton in logo"; Brighton trial): every gold
   accent (signature, header line, kickers, edition line, hotel-band kickers and buttons, search hover) is powder pink, now seafront turquoise, deepened a touch to #8FB3E0 (user, 2 Nov 2026) */
/* ---- Home-page nine (user, 2 Nov 2026: "lets do all 1 to 9"; Brighton trial) ---- */
/* 1 Hotel search in the hero */
.hero-book { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 12px 0 4px; max-width: 640px; }
.hero-book label { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.hero-book input, .hero-book select { height: 44px; padding: 0 12px; font: inherit; font-size: .9rem; letter-spacing: 0; text-transform: none; color: #fff; background: rgba(0, 0, 0, .55); border: .5px solid rgba(255, 255, 255, .55); border-radius: 0; color-scheme: dark; }
.hero-book .btn { height: 44px; padding: 0 18px; background: var(--city-accent) !important; color: #000 !important; border: 0 !important; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
body.goldhead .hero-book :is(input, select), body.goldhead .hero-book .btn { border-radius: 10px !important; }
/* 4 Quick-jump row */
.quick-jump { background: #000; border-bottom: .5px solid rgba(255, 255, 255, .14); }
.qj-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 14px; padding-bottom: 14px; }
.qj-in a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; color: #fff; text-decoration: none; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; border: .5px solid rgba(255, 255, 255, .3); border-radius: 12px; }
.qj-in a:hover { border-color: var(--city-accent); color: var(--city-accent); }
@media (max-width: 720px) { .qj-in { gap: 6px; } .qj-in a { flex-direction: column; gap: 4px; min-height: 64px; font-size: .62rem; letter-spacing: .08em; } }
/* 5 What's On as cards */
.events-band.events-cards { display: block; padding: 22px 0 26px; background: #000; }
.events-band.events-cards .events-label { padding: 0 max(16px, calc((100% - 1240px) / 2)); border: 0; margin: 0 0 12px; }
.events-cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(1240px, 100%); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.event-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: .5px solid rgba(255, 255, 255, .25); border-radius: 12px; color: #fff; text-decoration: none; background: #1d1f22; }
.event-card:hover { border-color: var(--city-accent); }
.event-card .event-date { color: var(--city-accent); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.event-card .event-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; }
.event-card .event-venue { font-size: .85rem; opacity: .75; }
@media (max-width: 720px) { .events-cardgrid { grid-template-columns: 1fr; } }
/* 2 Hotel tabs */
.hb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.hb-tabs button { font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: transparent; border: .5px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.hb-tabs button[aria-selected="true"] { background: var(--city-accent); color: #000; border-color: var(--city-accent); }
.hb-grid[hidden] { display: none !important; }
/* 9 Matching section kickers */
.sec-kicker { margin: 0 0 6px !important; font-size: .72rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--city-accent) !important; -webkit-text-fill-color: var(--city-accent) !important; }
/* 6 A faint fade behind the hero words only */
body.goldhead.home-mag .hero-spots .hero-shade { display: block !important; background: linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .22) 38%, rgba(0, 0, 0, 0) 62%) !important; }
/* 8 Soft placeholders while photos load (no blank grey boxes) */
body.goldhead :is(.mag-tile, .tile, .hb-ph, .card-pic, .rn-pic, .sister-card) img { background: linear-gradient(135deg, #2a2d33 0%, #3a3532 55%, #2d3036 100%); }
/* 3 Shorter page: "Our favourites" shows its first eight lists (two rows), the network shows one row of three guides
   ("See all 91 guides" and the menu reach the rest); 7 Rhythm: the newsletter joins the graphite bands */
body.goldhead.home-mag #top-picks .pick:nth-child(n+9) { display: none !important; }
body.goldhead.home-mag .sister-grid > .sister-card:nth-child(n+4) { display: none !important; }
body.goldhead.home-mag .newsletter { background: #1d1f22 !important; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); margin-top: 0 !important; }
body.goldhead.home-mag .home-note + .newsletter { margin-top: 0 !important; }
body.goldhead.home-mag .home-note + .sister-sites { margin-top: 0 !important; }
/* Logo concept 7 (user, 2 Nov 2026; Brighton trial): hollow silver ULTIMATE in tall condensed capitals, the pink signature
   written just across its end, with enough room that ULTIMATE stays readable */
body.goldhead .site-header .brand-word:not(#_) { font-family: 'Anton', 'Bodoni Moda', sans-serif !important; font-weight: 400 !important; font-size: 1.75em !important; letter-spacing: .03em !important; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 1px #C4C8CC; background: none !important; line-height: 1 !important; }
body.goldhead .site-header .brand-text > strong:not(#_) { margin-left: .05em !important; top: .22em !important; }
@media (max-width: 520px) { body.goldhead .site-header .brand-word:not(#_) { font-size: 1.4em !important; } body.goldhead .site-header .brand-text > strong:not(#_) { font-size: 1.8em !important; } }
body.goldhead .site-header .brand-text > strong:not(#_):not(#_) { margin-left: -.22em !important; }
/* ---- Brighton conform (user, 2 Nov 2026: "conform brighton site and south coast, 1 to 4"): every page, every town guide ---- */
/* 1 The old red becomes the house pink on every page: ranks, badges, kickers, notes, page jumps, the edition line */
body.goldhead { --kick: var(--city-accent); }
body.goldhead:not(#_) :is(.rank, .badge, .edition, .venue-rank, .sr-kicker, .rn-kicker, .note-kicker, .page-jump-label, .tile-kicker, .mag-k, .spot-kicker, .eyebrow-red, .kicker) { color: var(--city-accent) !important; -webkit-text-fill-color: var(--city-accent) !important; }
/* 2 List pages share the home rhythm: "Insiders' picks" (the top three) on a full-width graphite band */
body.goldhead .top3 { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); padding-top: 36px !important; padding-bottom: 36px !important; margin-bottom: 28px !important; }
body.goldhead .top3 :is(h2, h3, p, .desc, .meta, a:not(.btn)) { color: #e9e6df; }
body.goldhead .top3 .card { background: #26282c !important; border-color: rgba(233, 230, 223, .14) !important; }
/* 3 Booking in pink on every hotel page: the "Check availability" button and the Booking.com links */
body.goldhead .booking .btn, body.goldhead .booking button[type="submit"] { background: var(--city-accent) !important; color: #000 !important; border: 0 !important; border-radius: 10px !important; }
body.goldhead .booking .btn:hover { background: #f4ccd5 !important; }
body.goldhead .booking :is(input, select) { border-radius: 10px !important; }
body.goldhead a[href*="booking.com/hotel/"]:not(.hb-book):not(.sticky-book):not(.card-book) { color: var(--city-accent) !important; }
body.goldhead:not(#_) .sticky-book, body.goldhead:not(#_) .sticky-book * { color: #000 !important; -webkit-text-fill-color: #000 !important; }
/* ---- Listing pages (user, 2 Nov 2026: "do 1 to 7"; Brighton trial) ---- */
/* 1 "Check prices" on hotel cards */
.card-book { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border: .5px solid var(--city-accent); border-radius: 10px; color: var(--city-accent) !important; text-decoration: none !important; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.card-book:hover { background: var(--city-accent); color: #000 !important; }
/* 2 Rounded pill buttons for Browse by type and the neighbourhood filters; a solid bar when it sticks */
body.goldhead:not(#_) :is(.list-jump a, .filter .chip, .chip-more > summary, .chip-more-list .chip) { border-radius: 999px !important; }
body.goldhead:not(#_) .filter .chip[aria-pressed="true"], body.goldhead:not(#_) .filter .chip.is-on { background: var(--city-accent) !important; color: #000 !important; border-color: var(--city-accent) !important; }
body.goldhead .list-jump-top { background: #000; }
/* 3 Card blurbs left-aligned (narrow columns opened word gaps); full-width reading text stays justified */
body.goldhead:not(#_) :is(.card .desc, .featured-desc, .top3 .desc) { text-align: left !important; hyphens: manual !important; -webkit-hyphens: manual !important; }
/* 4 Pink kicker above each group heading, and every other group on graphite */
body.goldhead .list-group:nth-of-type(even) { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); padding-top: 28px; padding-bottom: 28px; }
body.goldhead .list-group:nth-of-type(even) .card { background: #26282c !important; }
body.goldhead .list-group .sec-kicker { margin-bottom: 4px !important; }
/* 5 Hotel pages: a slim "See prices" bar fixed above the phone bottom bar */
.sticky-book { display: none; }
@media (max-width: 760px) {
  body.goldhead .sticky-book { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 60; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--city-accent); color: #000; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); font-size: .86rem; }
  body.goldhead .sticky-book span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.goldhead .sticky-book b { font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
  body.goldhead.has-venue-bar .ask-btn { bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* 6 "At a glance" facts as rounded chips with pink labels */
body.goldhead:not(#_) .glance-item { border: .5px solid rgba(255, 255, 255, .22) !important; border-radius: 12px !important; padding: 10px 14px !important; }
body.goldhead:not(#_) .glance-k { color: var(--city-accent) !important; }
/* 7 Galleries: soft placeholders while photos load */
body.goldhead :is(.gallery, .gallery-track, .slide, .inline-photo) img { background: linear-gradient(135deg, #2a2d33 0%, #3a3532 55%, #2d3036 100%); }
body.goldhead .list-jump-top { margin-top: 0 !important; }
/* The sticky "Browse by type" bar runs to both edges of the page (user, 2 Nov 2026) */
body.goldhead .list-jump-top { box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); }
/* Breathing room at the foot of every list group before the next band (user, 2 Nov 2026: black groups ran into the grey) */
body.goldhead .list-group { padding-bottom: 40px !important; margin-bottom: 0 !important; }
body.goldhead .list-group:nth-of-type(even) { padding-top: 36px !important; padding-bottom: 40px !important; }
body.goldhead .list-group + .list-group { margin-top: 0 !important; }
body.goldhead :is(.top3, .mag-list, .hotel-band) { padding-bottom: 40px !important; }
/* Clean rounded corners (user, 2 Nov 2026: "curves look like they have broken edges"): cards and tiles had a top-only
   hairline that stopped short of the curve; every rounded card now has the same faint hairline all the way round */
body.goldhead:not(#_) :is(.card, .mag-tile.no-pic, .tile.tile-compact, .rn-card, .sister-card, .event-card) {
  border: .5px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; overflow: hidden; background-clip: padding-box; }
body.goldhead:not(#_) :is(.card, .rn-card) :is(.card-pic, .rn-pic, .card-photo) { border-radius: 0 !important; }
body.goldhead:not(#_) .card .card-foot { border-top: .5px solid rgba(255, 255, 255, .14); }
body.goldhead:not(#_) :is(.intro, .areas, .home-note) .card { border-color: rgba(0, 0, 0, .14) !important; }
body.goldhead:not(#_) .card .card-body { border-top: 0 !important; }
/* Inside a rounded card the photo's own square 0.5px white stroke was clipped at the corners (broken curve); the card's
   hairline now frames card and photo together (user, 2 Nov 2026) */
body.goldhead:not(#_) :is(.card, .rn-card, .sister-card) img { border: 0 !important; outline: 0 !important; }
body.goldhead:not(#_) :is(.card, .rn-card, .sister-card)::after { border-radius: 12px !important; }
/* Listings without a photo keep the layout (user, 2 Nov 2026): an empty black photo box with a white edge, the same 3:2 size
   as a real photo, so every card in a row lines up (list pages and area-guide pages alike) */
body.goldhead:not(#_) :is(.list-group, .guide-group) .card.no-pic::before { content: ""; display: block; flex: none; aspect-ratio: 3 / 2; width: 100%; background: #000; border: .5px solid rgba(255, 255, 255, .55); border-radius: 12px 12px 0 0; box-sizing: border-box; }
/* Card and photo edges at the weight of 0.75px (user, 2 Nov 2026: "card corners etc … increase to 0.75"). Browsers round
   0.75px down to 0.5px on Retina screens, so the lines are drawn 1px wide in a slightly softer white to give that weight */
body.goldhead:not(#_):not(#_) :is(.card, .rn-card, .sister-card, .event-card) { border: 1px solid rgba(255, 255, 255, .2) !important; }
body.goldhead:not(#_):not(#_) :is(.mag-tile, .tile, .hb-ph) { border-width: 1px !important; border-style: solid !important; border-color: rgba(255, 255, 255, .4) !important; }
body.goldhead:not(#_):not(#_) :is(.list-group, .guide-group) .card.no-pic::before { border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 0 !important; margin: 0 0 16px; }
/* (user, 2 Nov 2026: "2x lines around top and corners") the box no longer draws its own frame inside the card's: the card's one
   hairline frames it, and a single line of the same weight marks where the photo area ends */
body.goldhead:not(#_):not(#_) .card .card-foot { border-top: 1px solid rgba(255, 255, 255, .16); }
/* Text inside bordered cards keeps clear of the edge line (user, 2 Nov 2026) */
body.goldhead:not(#_):not(#_) .card .card-body { padding: 16px 20px 16px !important; box-sizing: border-box; }
body.goldhead:not(#_):not(#_) :is(.rn-card, .sister-card) :is(.rn-text, .sister-body, .rn-kicker, .rn-name, .rn-desc) { padding-left: 18px !important; padding-right: 18px !important; }
body.goldhead:not(#_):not(#_) .card .card-body { padding-bottom: 26px !important; }
body.goldhead:not(#_):not(#_) .card .card-foot { margin-bottom: 0 !important; }
/* ---- Dropdowns (user, 2 Nov 2026; Brighton trial): graphite rounded panel, pink list labels, serif links with counts,
   an editor's pick card with photo (and Check prices for hotels), a soft fade-in; phones keep the simple list ---- */
@keyframes navFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  body.goldhead .site-header .nav-more-menu:not(#_) { background: #1d1f22 !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 0 0 14px 14px !important; padding: 22px 26px 24px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .5) !important; animation: navFade .18s ease-out; gap: 30px; align-items: flex-start; }
  body.goldhead .site-header .nav-dd.is-open > .nav-more-menu:not(#_) { display: flex !important; }
  body.goldhead .site-header .nav-more-menu .nav-col { flex: 1 1 0; min-width: 0; }
  body.goldhead .site-header .nav-more-menu a:not(#_) { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 3px 0 !important; text-align: left !important; }
  body.goldhead .site-header .nav-more-menu a.has-dot:not(#_), body.goldhead .site-header .nav-more-menu .nav-col-links > a:first-child:not(#_) { color: var(--city-accent) !important; font-family: var(--sans) !important; font-size: .68rem !important; letter-spacing: .18em !important; text-transform: uppercase !important; margin-bottom: 8px !important; }
  body.goldhead .site-header .nav-more-menu a.nav-sub:not(#_) { font-family: var(--serif) !important; font-size: 1.15rem !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; line-height: 1.45; }
  body.goldhead .site-header .nav-more-menu a.nav-sub small { font-family: var(--sans); font-size: .7rem; color: #8f949b; margin-left: 6px; }
  body.goldhead .site-header .nav-more-menu a:hover:not(#_) { color: var(--city-accent) !important; }
  body.goldhead .nav-feat { flex: 0 0 260px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; overflow: hidden; background: #000; }
  body.goldhead .nav-feat .nf-main { display: block !important; padding: 0 !important; color: #fff !important; text-decoration: none; }
  body.goldhead .nav-feat .nf-ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #2a2d33, #3a3532 55%, #2d3036); }
  body.goldhead .nav-feat .nf-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.goldhead .nav-feat .nf-k { display: block; padding: 12px 14px 0; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--city-accent); }
  body.goldhead .nav-feat .nf-t { display: block; padding: 2px 14px 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; text-transform: none; letter-spacing: 0; }
  body.goldhead .nav-feat .nf-s { display: block; padding: 2px 14px 12px; font-size: .78rem; color: #9a9da3; text-transform: none; letter-spacing: 0; }
  body.goldhead .nav-feat .nf-book:not(#_) { display: inline-block !important; margin: 0 14px 14px; padding: 7px 12px !important; border: 1px solid var(--city-accent) !important; border-radius: 10px !important; color: var(--city-accent) !important; font-size: .68rem !important; letter-spacing: .12em; text-transform: uppercase; }
  body.goldhead .nav-feat .nf-book:hover { background: var(--city-accent) !important; color: #000 !important; }
}
@media (max-width: 899px) { body.goldhead .nav-feat { display: none; } body.goldhead .site-header .nav-more-menu a.has-dot:not(#_) { color: var(--city-accent) !important; } }
@media (min-width: 900px) {
  body.goldhead .site-header .nav-dd.is-open > .nav-more-menu:not(#_):not(#_) { flex-direction: row !important; flex-wrap: nowrap !important; max-height: 70vh; overflow: auto; }
  body.goldhead .site-header .nav-more-menu .nav-col:not(#_) { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; columns: auto !important; }
  body.goldhead .site-header .nav-more-menu .nav-feat:not(#_) { flex: 0 0 260px !important; width: 260px !important; }
}
@media (min-width: 900px) { body.goldhead .site-header .nav-more-menu a.nav-sub:not(#_):not(#_) { font-size: 1.02rem !important; line-height: 1.35; padding: 4px 0 !important; } body.goldhead .site-header .nav-more-menu .nav-feat:not(#_) { flex: 0 0 240px !important; width: 240px !important; } }
/* No fades on page-top photos (user, 2 Nov 2026): the dark gradient over every list, guide and article hero is removed; a soft
   text shadow keeps the words readable. (The home slideshow keeps its very faint left-side fade.) */
body.goldhead:not(.home-mag) .hero .hero-shade { display: none !important; }
body.goldhead:not(.home-mag) .hero :is(h1, p, .eyebrow, .hero-lead, .crumbs, a) { text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 22px rgba(0, 0, 0, .5); }
/* "Don't miss" / "What's on" rail in grey (user, 2 Nov 2026): the home page's #1d1f22 band; full width where the rail sits
   across the page, a rounded panel where it is a side column */
body.goldhead .story-rail { background: #1d1f22; padding: 28px 24px; border-radius: 12px; }
body.goldhead .story-rail:is(.rail-inline, .rail-band) { border-radius: 0; padding: 40px 0; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); }
/* Insiders' picks numbers clear of the card edge (user, 2 Nov 2026): the top-three cards had no left padding, so "1/2/3"
   sat on the rounded hairline */
@media (min-width: 641px) { body.goldhead:not(#_):not(#_) .top3-cards .card.card-top { padding-left: 24px !important; } }
@media (max-width: 640px) { body.goldhead:not(#_):not(#_) .top3-cards .card.card-top .rank { padding-left: 24px !important; } }
/* ... and a clear space between the three cards, which butted together (user, 2 Nov 2026) */
body.goldhead:not(#_):not(#_) .top3-cards { row-gap: 24px !important; }
/* A very slight graduation inside listing cards (user, 2 Nov 2026): the card's own colour lifts a touch towards the
   bottom. A light overlay, so it works on black pages and on the grey #1d1f22 bands alike */
body.goldhead:not(#_):not(#_) .card { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .055) 100%) !important; }
/* No tiny count beside section headings (user, 2 Nov 2026: "weird little number"); the "On this page" buttons already show it */
body.goldhead .list-group > h2 > span { display: none !important; }
/* City skyline in the header (user, 2 Nov 2026: "skyline ... adopt this across each city so individualises each menu";
   Brighton trial): a fine line drawing in silver #C9CDD2 (user, 2 Nov 2026; was the accent turquoise) between the logo and the header tools, left to right the
   i360, the Royal Pavilion's three domes and the Palace Pier, with two gulls (simplified on the user's word; the detailed
   first draft is cities/brighton/skyline-detailed.svg). Style (user, 2 Nov 2026, after the Belgrade 360 Deck neon wall): ONE
   continuous line that runs along the ground and rises into each landmark's silhouette, with a soft neon glow;
   flowing (rounded corners, smooth curves, no sharp angles), as on that wall. Source: cities/brighton/skyline.svg.
   Wide screens only (no room beside the logo on tablets and phones) */
body.goldhead .site-header .header-inner { position: relative; }
/* The drawing itself is inline in the header (build.js, from cities/<c>/skyline.svg); these rules give every guide the same line */
.site-header .skyline { display: none; }
@media (min-width: 900px) {
  body.goldhead .site-header .skyline { display: block; position: absolute; left: 310px; right: 190px; top: 6px; height: 72px; pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(225, 229, 234, .35)); /* 0.5px line (user, 2 Nov 2026) */ opacity: .5; /* user, 2 Nov 2026 (was .66) */ }
  body.goldhead .site-header .skyline svg { display: block; width: 100%; height: 100%; fill: none; stroke: #C9CDD2; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
}
/* The "Brighton" signature a touch more turquoise than the accent (user, 2 Nov 2026) */
body.goldhead .site-header .brand-text > strong:not(#_):not(#_) { color: var(--city-accent) !important; -webkit-text-fill-color: var(--city-accent) !important; }
/* Home magazine tiles (user, 2 Nov 2026: "padding issues ... on front page"): the stacked tiles' text sat 2px from the card
   edge with no bottom space; it now keeps 18px clear, and the photo meets the card frame at the top (no inner rounding) */
body.goldhead:not(#_):not(#_) .mag-grid .mag-tile:not(.mag-big) .tile-text { padding: 14px 18px 18px !important; }
body.goldhead:not(#_):not(#_) .mag-grid .mag-tile:not(.mag-big) img { border-radius: 0 !important; }
/* The empty photo box on photo-less cards takes the card's own colour (user, 2 Nov 2026: #000 was stark on the grey
   #1d1f22 bands); its one bottom line still marks where a photo would sit */
body.goldhead:not(#_):not(#_) :is(.list-group, .guide-group) .card.no-pic::before { background: transparent !important; }
/* Two-line rule for guide cards (user, 2 Nov 2026: "2x line text rule in sister guides and each city, regional guide so site
   looks sharper"): the copy is written to fit two lines (about 55 characters); the clamp only guards narrow screens.
   The cards' text also keeps 18px clear of the edge, and the photo meets the card frame at the top */
body.goldhead:not(#_):not(#_) :is(.top-cards .tile-sub, .sister-card .sister-desc, .mag-grid .mag-tile .tile-sub) { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
body.goldhead:not(#_):not(#_) .top-cards .tile:not(.mag-big) .tile-text, body.goldhead:not(#_):not(#_) .sister-card .sister-body { padding: 14px 18px 18px !important; }
body.goldhead:not(#_):not(#_) :is(.top-cards .tile, .sister-card) img { border-radius: 0 !important; }
/* Skyline on phones and tablets (user, 2 Nov 2026, job 4): a slim copy along the foot of the header, under the logo and
   buttons, standing on the accent line; same silver 0.5px line, opacity and glow as on wide screens */
@media (max-width: 899px) {
  body.goldhead .site-header .skyline { display: block; position: absolute; left: 16px; right: 16px; bottom: 1px; height: 24px; pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(225, 229, 234, .35)); opacity: .5; }
  body.goldhead .site-header .skyline svg { display: block; width: 100%; height: 100%; fill: none; stroke: #C9CDD2; stroke-linecap: round; stroke-linejoin: round; }
  /* drawn this small, the desktop line weight would vanish: a fixed 0.75px line, as it renders on wide screens */
  body.goldhead .site-header .skyline svg path { vector-effect: non-scaling-stroke; stroke-width: .75px; }
  body.goldhead .site-header.nav-open .skyline, body.goldhead .site-header:has(.site-nav.open) .skyline { display: none; }
}
/* One-line rule for the home neighbourhood tiles (user, 2 Nov 2026); copy is written to fit (about 25 characters) */
body.goldhead:not(#_):not(#_):not(#_) #neighbourhoods + .mag-grid .tile-sub { -webkit-line-clamp: 1; line-clamp: 1; }
/* Phone polish before the rollout (user, 2 Nov 2026: eye check on a 375px phone) */
@media (max-width: 640px) {
  /* the phone skyline sat under the "Brighton" signature: it now runs along the right half of the header only */
  body.goldhead:not(#_) .site-header .skyline { left: auto !important; right: 16px !important; width: 46% !important; }
  /* sister-guide cards two to a row: their two-line text may take four lines on a phone (as listings) */
  body.goldhead:not(#_):not(#_):not(#_) .top-cards .tile-sub { -webkit-line-clamp: 4; line-clamp: 4; }
  /* justified text opens wide gaps between words in a narrow column: left-aligned on phones */
  body.goldhead:not(#_):not(#_):not(#_) :is(p, li, .prose, .intro, .home-feature) { text-align: left !important; }
  /* a listing's type and street: the separating dot never dangles at a line end; the street drops to its own line */
  body.goldhead .venue-meta .dot { display: none; }
  body.goldhead .venue-meta > span:last-child { display: block; }
  /* the photo-credit fold sits on the left, clear of the "Ask the guide" button */
  body.goldhead .cap-fold, body.goldhead .cap-fold details { text-align: left !important; justify-content: flex-start !important; }
  body.goldhead .cap-fold summary { margin-left: 0 !important; margin-right: auto !important; }
  /* hero: a little more air between the slideshow controls and the search */
  body.goldhead.home-mag .hero-spots .spot-nav { margin-bottom: 10px; }
  /* an Insiders' pick without a photo: no tall empty space under its text */
  body.goldhead:not(#_):not(#_) .top3-cards .card.card-top.no-pic { padding-bottom: 18px !important; }
}
/* Home hotel band as listing-style cards (user, 2 Nov 2026: "prefer hotel listing shape of photo ... home page version which is
   curved all around looks weird"): one framed card per hotel, the photo square at the bottom and rounded only by the card's
   top corners, the text inside the card */
body.goldhead:not(#_):not(#_) .hotel-band .hb-card { display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .055) 100%); }
body.goldhead:not(#_):not(#_) .hotel-band .hb-ph { border: 0 !important; border-radius: 0 !important; }
body.goldhead:not(#_):not(#_) .hotel-band .hb-ph img { border-radius: 0 !important; }
body.goldhead:not(#_):not(#_) .hotel-band .hb-card > :not(.hb-ph) { margin-left: 18px; margin-right: 18px; }
body.goldhead:not(#_):not(#_) .hotel-band .hb-k { margin-top: 14px; }
body.goldhead:not(#_):not(#_) .hotel-band .hb-book { margin-top: auto; margin-bottom: 18px; }
/* A home magazine tile without a photo (e.g. "Airports from Brighton"): its text sits at the bottom, level with the text of
   the photo tiles beside it, not at the top of a tall empty box (user, 2 Nov 2026) */
body.goldhead:not(#_):not(#_) .mag-grid .mag-tile.no-pic:not(.mag-big) { display: flex !important; flex-direction: column; justify-content: flex-end; }
/* Three-line card rule (RULEBOOK C14, user 2 Nov 2026): listing card copy is written to fit 3 lines (desc ≤100 characters,
   tools/desc-fit.py); the clamp is only a safety net. Phone rows after a section's first card: the text runs full width under
   the 96px photo and the title. Phones may show 4 lines (user, 2 Nov 2026: "3 lines on desktop and 4 lines is ok on phone"). */
body.goldhead:not(#_):not(#_) .cards .card .desc { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (max-width: 640px) {
  body.goldhead.afar:not(#_):not(#_) .cards .card.has-pic:not(.card-first):not(.card-top) { grid-template-rows: auto auto 1fr; padding: 18px 20px 22px !important; }
  body.goldhead.afar:not(#_):not(#_) .cards .card.has-pic:not(.card-first):not(.card-top) .card-body { display: contents; }
  body.goldhead.afar:not(#_):not(#_) .cards .card.has-pic:not(.card-first):not(.card-top) .card-pic { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  body.goldhead.afar:not(#_):not(#_) .cards .card.has-pic:not(.card-first):not(.card-top) .card-body > * { grid-column: 2; min-width: 0; }
  body.goldhead.afar:not(#_):not(#_) .cards .card.has-pic:not(.card-first):not(.card-top) .card-body > :is(.desc, .card-more, .card-foot) { grid-column: 1 / -1; }
  body.goldhead.afar:not(#_):not(#_) .cards .card.has-pic:not(.card-first):not(.card-top) .desc { margin-top: 12px; }
  body.goldhead:not(#_):not(#_) .cards .card .desc, body.goldhead.afar.afar:not(#_):not(#_) .top3-cards .card.card-top.card-top .desc { -webkit-line-clamp: 4; line-clamp: 4; }
}
/* Home tile edges like the listing cards (user, 2 Nov 2026: "edges need sorting out like you did with listings"): the photo
   on a stacked tile lost its own square 0.5px white stroke inside the tile's rounded frame (a double line with square corners
   poking past the curve); the tile now clips its photo to the 12px corners and its one hairline frames photo and text together */
body.goldhead:not(#_):not(#_) :is(.mag-grid .mag-tile, .top-slim .tile-lead, .top-cards .tile) { overflow: hidden !important; border-radius: 12px !important; }
body.goldhead:not(#_):not(#_) :is(.mag-grid .mag-tile, .top-slim .tile-lead, .top-cards .tile) img { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
body.goldhead:not(#_):not(#_) .mag-grid .mag-tile.mag-big img { border-radius: 0 !important; }
/* Advice notes are centred (user rule, 2 Nov 2026: "should be centered text … as a rule"): the "Our advice" note on home pages
   sets its text centred under the centred kicker and heading, on every guide and screen size; it is left out of the
   justified-text rule (28 Oct) and never hyphenated. (Guide-page .guide-advice boxes are set left as a block, kicker too.) */
body:not(#_):not(#_) .home-note .note-text { text-align: center !important; -webkit-hyphens: manual !important; hyphens: manual !important; text-wrap: balance; }

/* Graphite bands by setting (user, 3 Nov 2026: island guides into line with the new styling): home-rhythm "graphite": [feature ids]
   gives any block the Brighton graphite band, as #stories / #neighbourhoods / #homes-gardens / #plan-day have by id */
body.goldhead.home-mag .gband { background: #1d1f22; box-shadow: 0 0 0 100vmax #1d1f22; clip-path: inset(0 -100vmax); }
body.goldhead.home-mag .home-feature.gband { padding-top: 40px !important; padding-bottom: 18px !important; margin-bottom: 0 !important; }
body.goldhead.home-mag .mag-grid.gband { margin-top: 0 !important; padding-bottom: 40px !important; }
body.goldhead.home-mag .gband :is(h2, p, .tile-title, .tile-sub) { color: #e9e6df !important; }
/* Story rail text on white pages (user, 3 Nov 2026, Mumbai article: headlines black on the graphite rail). The rail is graphite on
   every goldhead page, so its text is warm white everywhere, not the white page's black ink; kickers keep the accent */
body.goldhead:not(#_) .story-rail :is(.sr-h, .sr-name, .sr-nl-t, .sr-events, .sr-events *):not(.sr-kicker) { color: #e9e6df !important; -webkit-text-fill-color: #e9e6df; }
body.goldhead:not(#_) .story-rail .sr-h { border-color: rgba(255, 255, 255, .18) !important; }
body.goldhead:not(#_) .story-rail a:hover .sr-name { color: #fff !important; -webkit-text-fill-color: #fff; }