/* ==========================================================================
   Greece 365 — standalone page styles
   Used by: /place/<slug>/, /privacy/, /terms/, /cookies/
   Deliberately self-contained so these pages never load places.json
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue: #0E6BA8;
  --blue-dark: #0A5385;
  --blue-light: #e2f0f8;
  --sand: #D9C29B;
  --sand-light: #F4ECDC;
  --sand-dark: #A98B5A;
  --bg: #f0f2f5;
  --white: #ffffff;
  --text: #1c1e21;
  --text-secondary: #65676b;
  --border: #dddfe2;
  --shadow: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
  --radius: 8px;
  --radius-lg: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Only this file, so the homepage's tokens do not exist here. Measured off
     .site-header-inner: a 34px logo plus 12px of padding either side. Re-measured
     by js/page-outline.js on load and on resize, in case that changes. */
  --header-height: 59px;
  /* How far down an anchor jump must land: the height of the sticky header plus
     the height of the section bar. It was 84px, which assumed no bar at all —
     the bar covers 59px to about 102px, so clicking a chip put the heading
     underneath it and you landed on a blank strip. js/page-outline.js
     re-measures and republishes this on load and on resize. */
  --outline-offset: calc(var(--header-height) + 46px);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
}

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--blue); color: var(--white);
  padding: 8px 14px; border-radius: var(--radius); z-index: 9999;
  font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.site-header-inner {
  max-width: 860px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display: grid; place-items: center;
  color: var(--white); font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.brand-text { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand-text span { color: var(--blue); }
.header-nav { display: flex; gap: 18px; align-items: center; }
.header-nav a { font-size: 14px; text-decoration: none; color: var(--text-secondary); font-weight: 500; }
.header-nav a:hover { color: var(--blue); }

/* ---------- Layout ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
main { padding: 28px 0 64px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 13px; margin-bottom: 18px; color: var(--text-secondary); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs li { display: flex; gap: 6px; align-items: center; }
.breadcrumbs li + li::before { content: "/"; color: var(--border); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs [aria-current="page"] { color: var(--text-secondary); }

  /* ---------- Hero ---------- */
  .page-hero {
    position: relative;
    border-radius: var(--radius-lg); overflow: hidden;
    margin-bottom: 24px; background: var(--sand-light);
    box-shadow: var(--shadow);
  }
.page-hero img { width: 100%; height: 320px; object-fit: cover; display: block; }

.page-header h1 {
  font-size: 36px; line-height: 1.15; letter-spacing: -0.02em;
  margin-bottom: 6px; font-weight: 800;
}
.page-subtitle { color: var(--text-secondary); font-size: 17px; margin-bottom: 14px; }
.meta-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 22px;
}
.tag {
  background: var(--blue-light); color: var(--blue-dark);
  padding: 3px 10px; border-radius: 100px; font-weight: 600; font-size: 12px;
}
.tag-sand { background: var(--sand-light); color: var(--sand-dark); }
.updated { margin-left: auto; font-style: normal; }

/* ---------- Key facts — the answer-first block ---------- */
.key-facts {
  background: var(--white); border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 28px;
  box-shadow: var(--shadow);
}
.key-facts h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blue-dark); margin-bottom: 12px; font-weight: 700;
}
.key-facts ul { list-style: none; display: grid; gap: 9px; }
.key-facts li {
  padding-left: 24px; position: relative; font-size: 16px; line-height: 1.55;
}
.key-facts li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

/* ---------- Prose sections ---------- */
.prose { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 20px; box-shadow: var(--shadow); }
.prose h2 { font-size: 24px; margin-bottom: 12px; letter-spacing: -0.01em; font-weight: 700; }
.prose h3 { font-size: 18px; margin: 20px 0 8px; font-weight: 700; }
.prose p { margin-bottom: 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 14px 20px; }
.prose li { margin-bottom: 7px; }
.lede { font-size: 18px; line-height: 1.6; color: var(--text); }

/* ---------- Facts grid ---------- */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 28px; }
.fact-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.fact-card dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 700; margin-bottom: 4px; }
.fact-card dd { font-size: 15px; margin: 0; line-height: 1.5; }

/* ---------- FAQ ---------- */
.faq h2 { margin-bottom: 4px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item h3 { font-size: 17px; margin: 0 0 7px; font-weight: 700; }
.faq-item p { margin: 0; color: var(--text); }

/* ---------- Related ---------- */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.related-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  display: block; transition: box-shadow .15s, transform .15s;
}
.related-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.related-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.related-body { padding: 11px 13px; }
.related-body strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 2px; }
.related-body span { font-size: 13px; color: var(--text-secondary); }
/* Measured distance, so the "closest" claim can be checked rather than trusted.
   Set apart from the region line so it reads as a fact about the journey, not
   part of the destination's description. */
.related-distance { display: block; margin-top: 4px; font-size: 12px; color: var(--blue); font-variant-numeric: tabular-nums; }

/* ---------- Index listing ---------- */
.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.index-group h2 { font-size: 22px; margin: 30px 0 12px; }
.index-group:first-child h2 { margin-top: 0; }

/* ---------- CTA + footer ---------- */
.cta {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: var(--white); border-radius: var(--radius-lg);
  padding: 24px 26px; margin: 8px 0 28px;
}
.cta h2 { font-size: 21px; margin-bottom: 7px; color: var(--white); }
.cta p { margin-bottom: 14px; opacity: .93; font-size: 15px; }
.btn {
  display: inline-block; background: var(--white); color: var(--blue-dark);
  padding: 10px 20px; border-radius: var(--radius); font-weight: 700;
  text-decoration: none; font-size: 15px;
}
.btn:hover { background: var(--sand-light); color: var(--blue-dark); }

.site-footer { background: var(--white); border-top: 1px solid var(--border); padding: 24px 0; margin-top: 40px; }
.site-footer-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-secondary); }
/* The single blanket affiliate disclosure for every destination page. flex-basis
   100% so it claims a whole row of its own instead of being squeezed in beside
   the copyright and the legal links. */
.site-footer-affiliate { flex: 0 0 100%; margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.site-footer nav { display: flex; gap: 16px; }
.site-footer a { text-decoration: none; }

/* ---------- Legal pages ---------- */
.legal h1 { font-size: 32px; margin-bottom: 6px; letter-spacing: -0.02em; }
.legal .last-updated { font-size: 14px; color: var(--text-secondary); margin-bottom: 22px; }
.legal h2 { font-size: 21px; margin: 26px 0 9px; }
.legal p, .legal li { margin-bottom: 12px; }
.legal ul { margin: 0 0 14px 22px; }
.legal strong { font-weight: 700; }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 9px 11px; border: 1px solid var(--border); vertical-align: top; }
.legal th { background: var(--bg); font-weight: 700; }
.callout { background: var(--blue-light); border-radius: var(--radius); padding: 15px 17px; margin-bottom: 18px; }
.callout p { margin: 0; font-size: 15px; }

/* ---------- 404 ---------- */
.e404 { text-align: center; padding: 70px 0 40px; }
.e404-code { font-size: 76px; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -0.03em; }
.e404 h1 { font-size: 27px; margin: 14px 0 10px; }
.e404 p { color: var(--text-secondary); margin-bottom: 26px; }
.e404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .page-hero img { height: 210px; }
  .page-header h1 { font-size: 28px; }
  .prose { padding: 20px 18px; }
  .key-facts { padding: 16px 18px; }
  .legal h1 { font-size: 25px; }
  .e404-code { font-size: 58px; }
  .header-nav a.hide-sm { display: none; }
  .site-footer-inner { flex-direction: column; text-align: center; }
}

@media print {
  .site-header, .site-footer, .cta { display: none; }
  body { background: var(--white); }
  .prose, .key-facts { box-shadow: none; border-color: #ccc; }
}

/* ---------- Place page body ---------- */
.section { margin-bottom: 34px; }
.section > h2 {
  font-size: 22px; letter-spacing: -0.01em; margin-bottom: 12px; font-weight: 800;
}
.section > h2 + .section-note {
  color: var(--text-secondary); font-size: 15px; margin: -6px 0 14px;
}

.highlights { list-style: none; display: grid; gap: 12px; }
.highlights li {
  padding: 14px 16px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 16px; line-height: 1.55;
}
.highlights li strong { display: block; color: var(--blue-dark); font-weight: 700; }
.highlights li strong + span { color: var(--text); }

.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gallery figure { flex: 1 1 170px; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand-light); }
.gallery img { width: 100%; height: 150px; object-fit: cover; display: block; }
.gallery figcaption {
  font-size: 12px; color: var(--text-secondary);
  padding: 7px 9px; line-height: 1.4;
}

.page-hero .photo-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
}

.page-updated {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- Share / permalink ----------
   This row replaced a pair of controls that did the same job twice: a "Page
   link" anchor pointing at the page you were already on, next to a "Copy link"
   button. A self-link is a poor permalink — you cannot see or copy an address
   without selecting it, and it is noise in the link graph.

   The address is now shown as selectable text, which is what both controls were
   trying to achieve, and it works with scripts disabled. Copy does the copying,
   and the native Share button appears only where the browser has one, so a phone
   gets the system sheet rather than a clipboard it cannot easily paste from. */
.share-row {
  margin: 12px 0 0;
}

.share-block-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.share-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.share-url {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-secondary);
  /* Selectable so it works as a permalink without any script. */
  user-select: all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.share-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.share-copy,
.share-native {
  font: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}

/* Both labels occupy the same grid cell, so the button is permanently as wide
   as the wider of the two and the swap below cannot move anything. */
.share-copy {
  display: inline-grid;
}

.btn-label {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.btn-label-alt {
  opacity: 0;
  visibility: hidden;
}

.share-copy:hover,
.share-copy:focus-visible,
.share-native:hover,
.share-native:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}

.share-copy:focus-visible,
.share-native:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.share-copy[data-copied] {
  color: #1a7f4b;
  border-color: #1a7f4b;
}

.share-copy[data-copied] .btn-label {
  opacity: 0;
  visibility: hidden;
}

.share-copy[data-copied] .btn-label-alt {
  opacity: 1;
  visibility: visible;
}

/* The confirmation is announced to screen readers and left visible briefly, so
   the result is observable rather than a silent clipboard write. */
.share-status {
  font-size: 13px;
  color: var(--text-secondary);
}

.share-status:empty {
  display: none;
}

.coords {
  font-variant-numeric: tabular-nums; font-size: 14px;
  color: var(--text-secondary); margin-top: 4px;
}

.empty-note {
  color: var(--text-secondary); font-size: 15px; font-style: italic;
}

/* ---------- Booking links ----------
   Sits after "What to see and do". Deliberately quiet: these are the same four
   booking sites on all 104 pages, so the box reads as one small panel rather
   than a shop. The disclosure is inside the panel and not a hover, because a
   reader on a phone can still see it. */
.affiliate-section {
  background: var(--sand-light);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.affiliate-section h2 { font-size: 20px; margin: 0 0 14px; }
.affiliate-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.affiliate-book {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 13px;
  text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.affiliate-book:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: var(--sand-dark); }
.affiliate-book-icon { font-size: 21px; line-height: 1.2; flex: 0 0 auto; }
.affiliate-book-meta { display: block; min-width: 0; flex: 1 1 auto; }
.affiliate-book-label { display: block; font-weight: 700; font-size: 15px; color: var(--text); }
.affiliate-book-benefit { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.affiliate-book-arrow { color: var(--blue); font-size: 19px; line-height: 1.2; flex: 0 0 auto; }
.affiliate-book-note { font-size: 12px; color: var(--text-secondary); margin: 13px 0 0; }

@media (max-width: 640px) {
  .affiliate-section { padding: 16px; }
  .affiliate-book-grid { grid-template-columns: 1fr; }
}

/* ---------- Cookie notice ----------
   Duplicated from css/style.css because the destination pages do not load that
   stylesheet. Same class names so one banner works on both. */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 3000;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 16px 20px; display: none; align-items: center;
  justify-content: space-between; gap: 16px; max-width: 720px; margin: 0 auto;
}
.cookie-banner.show { display: flex; }
.cookie-banner p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; flex: 1; margin: 0; }
.cookie-banner a { color: var(--blue); font-weight: 600; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-primary { background: var(--blue); color: var(--white); border: none; cursor: pointer; }
.btn-primary:hover { background: var(--blue-dark); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.btn-secondary:hover { background: var(--sand-light); color: var(--blue-dark); }

@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1 1 0; text-align: center; }
}

.legal-actions { margin: 14px 0 18px; }
.legal-actions .btn { border: none; cursor: pointer; }
#cookieWithdraw[data-state="declined"] { background: var(--white); color: var(--blue-dark); border: 1px solid var(--border); }

/* ---------- Back to top ----------
   The button itself is in js/scroll-top.js, which both the homepage and the
   destination pages load. This is the same rule set as css/style.css, kept
   here because the guide pages load place.css and never load style.css. */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: background 0.2s, transform 0.2s;
  line-height: 1;
}
.scroll-top.visible { display: flex; }
.scroll-top:hover { background: var(--blue-dark); transform: scale(1.08); }
.scroll-top:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: none; }
  /* The pill still has to move — it is how the current section is shown. It
     just arrives instead of travelling. */
  .page-outline-pill { transition: none; }
  .page-outline li > a { transition: none; }
}
/* ===== LIGHTBOX ===== */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.92);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lightbox.open {
  display: flex;
}

.lightbox-image {
  max-width: 92vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 40px;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
  z-index: 1;
}

.lightbox-close:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 48px;
  cursor: pointer;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.lightbox-nav:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* On mobile, center the photo with absolute positioning rather than flexbox,
   which is more reliable across browsers (some older mobile browsers do not
   apply flexbox centering to a fixed full-screen container correctly). */
@media (max-width: 600px) {
  .lightbox {
    display: none;
  }
  .lightbox.open {
    display: block;
  }
  .lightbox-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 32px;
  }
  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    font-size: 32px;
  }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- Photograph viewer ----------
   Copied from css/style.css, which the guide pages do not load. Two additions
   the homepage version did not need: the figures in the grid are click targets,
   so they need a pointer and a focus ring; and the credit travels with the
   enlarged image, because a licence that requires attribution requires it to be
   visible with the work. */
.gallery figure[data-index] {
  cursor: pointer;
  transition: opacity .15s;
}
.gallery figure[data-index]:hover { opacity: .88; }
.gallery figure[data-index]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.lightbox-image::after {
  content: attr(data-credit);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -26px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 600px) {
  /* The photo is full-bleed here, so a credit hanging below it would sit off
     the screen. Move it just inside the bottom edge, where it still travels
     with the work and stays readable over the image. */
  .lightbox-image::after {
    bottom: 8px;
    left: 12px;
    right: 12px;
    font-size: 11px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  }
}

/* ---------- Location map ----------
   The box is sized in CSS so the section keeps its height before the map library
   arrives; Leaflet measures its container, and a zero-height one renders nothing.
   The library and tiles are only fetched once this section is scrolled near. */
.place-map {
  width: 100%;
  height: 320px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
@media (max-width: 700px) {
  .place-map { height: 240px; }
}

@media (max-width: 480px) {
  .page-outline { padding: 2px 0; gap: 6px; }
  .page-outline-place { max-width: 30%; font-size: 12px; }
  .page-outline li > a { padding: 4px 9px; font-size: 12.5px; }
  .page-outline-track { padding: 2px; }
}

/* ---------- on this page ----------
   Was a wrapped row of blue links with no indication of where you were in the
   page. Now a single line of chips with a pill that slides to whichever
   section is on screen — the behaviour of interior.dev's Scroll Spy, rebuilt
   in vanilla. The links themselves are untouched: still plain anchors, so this
   works with scripts disabled and needs no JavaScript to keep working.

   The bar scrolls sideways when it does not fit. Seven full labels wrapped
   across three lines before, which is what stopped a sliding pill from working
   at all; the chips are shorter now, and on a narrow screen the strip scrolls
   rather than hiding anything. js/page-outline.js keeps the active chip in view.

   This page loads only place.css, never css/style.css, so the .sr-only rule
   that hides the heading from sight did not exist here and "On this page" had
   been printed above the list on all 134 destination pages. Re-declared rather
   than loading the whole homepage stylesheet for one utility. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The sticky bar: the place name, a divider, then the chips.
   One row, deliberately. A second line for the name would have made the bar
   about 22px taller, and the bar plus the header would then cover 124px of a
   844px phone screen. Beside the chips costs nothing.

   `top` is exactly the header height. There was an 8px gap here, left
   transparent, and content scrolled visibly through it between the two bars. */
.page-outline {
  /* Fixed rather than sticky: Firefox on Android does not reliably keep a
     sticky element in view when it sits below another sticky header, which
     made the chip bar scroll away and the active pill freeze on one chip. */
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  z-index: 90;
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
}

/* The place name, so a reader knows which page they are on once the h1 has
   scrolled away. It sits outside the <nav> on purpose — that nav is a
   landmark labelled "Sections on this page", and a place name inside it
   would be announced as if it were one of the sections. */
.page-outline-place {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  padding-right: 10px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  /* On a narrow screen the name must not eat the chips: cap it and let the
     track keep its width. */
  max-width: 38%;
}

.page-outline-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.page-outline-track {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}

/* No scroll-snap here, and deliberately so: snap pulled the strip to the
   nearest chip after every programmatic scroll, which fought the script's
   keep-the-active-chip-visible scroll and could leave it a few pixels clipped.
   The strip's job is to mark where you are and jump on click — snap was
   decoration, and it broke the marking. */
.page-outline ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-outline ul::-webkit-scrollbar { display: none; }

.page-outline li {
  margin: 0;
  flex: 0 0 auto;
}

/* The pill sits under the chips and is moved with a transform. It is given its
   width and position entirely by js/page-outline.js; before that script runs
   it is hidden, so no empty grey box appears first. */
.page-outline-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 0;
  background: var(--text);
  border-radius: calc(var(--radius) - 3px);
  transform: translateX(0);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), width 240ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.page-outline li > a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 5px 12px;
  border-radius: calc(var(--radius) - 3px);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.page-outline li > a:hover,
.page-outline li > a:focus-visible {
  color: var(--text);
  text-decoration: none;
}

.page-outline li > a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.page-outline li > a[aria-current] {
  color: var(--white);
  font-weight: 600;
  background: var(--text);
}

.page-outline li > a[aria-current]:hover { color: var(--white); }

/* Anchor link must not land under the fixed header or the section bar. */
.section[id], .subcategory-group[id] { scroll-margin-top: var(--outline-offset); }

/* ---------- live conditions (destination pages) ----------
   Printed directly under the review date at the top of the page, where a
   reader deciding whether to go out looks first. Hidden until the fetch
   returns a plausible reading, so a blocked request leaves no gap and a
   reader without JavaScript sees nothing at all. */
.place-live {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.place-live .wx-glyph {
  font-size: 1.15em;
  vertical-align: -0.08em;
  margin-right: 2px;
}

.place-live .wx-temp {
  font-weight: 600;
  color: var(--text);
  font-size: 1.05em;
}

.place-live .wx-apparent,
.place-live .wx-sep {
  opacity: 0.75;
  font-size: 0.92em;
}

.place-live .wx-cond {
  color: var(--text);
}

.place-live[hidden] {
  display: none;
}