/* ==========================================================================
   Key West Ghost Tours — the darker side of paradise
   Single stylesheet. No build step, no framework, no preprocessor.
   ========================================================================== */

:root{
  /* Night over the Straits: base, then two lifts for surfaces */
  --ink:#080d11;
  --ink-2:#0c1319;
  --ink-3:#111b23;
  --ink-4:#18242e;

  /* Warm limestone, not white */
  --paper:#ede7da;
  --paper-dim:#a3aeb7;

  /* Lantern gold: conversion only */
  --gold:#d8a657;
  --gold-deep:#b8873c;
  --gold-ink:#1a1206;

  /* Verdigris: eyebrows, links, rules */
  --verdigris:#6fb3a0;
  --verdigris-deep:#3f7a6c;

  --line:rgba(216,166,87,.18);
  --line-soft:rgba(237,231,218,.10);
  --glow:radial-gradient(60% 70% at 18% 42%, rgba(216,166,87,.20) 0%, rgba(216,166,87,.06) 38%, transparent 72%);

  --radius:3px;
  --grid-gap:1.75rem;
  --header-h:74px;

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- reset + element defaults ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-size:17px;line-height:1.68;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--verdigris);text-decoration:none}
a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.14;margin:0 0 .6em;letter-spacing:-.012em}
h1{font-size:clamp(2.35rem,5.4vw,3.9rem);font-variation-settings:'opsz' 120}
h2{font-size:clamp(1.72rem,3.3vw,2.5rem);font-variation-settings:'opsz' 60}
h3{font-size:1.16rem;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:0 0 .45em}
strong{color:#fff;font-weight:600}
em{font-style:italic}
blockquote{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- layout primitives ---------- */
.wrap{width:min(1160px,92vw);margin-inline:auto}
.narrow{width:min(780px,92vw);margin-inline:auto}
section{padding:clamp(3.2rem,6.6vw,5.4rem) 0;position:relative}

/* Tinted band, opened by a fretwork rule (motif 2) */
.band-alt{background:var(--ink-2);border-block:1px solid var(--line-soft)}
.band-alt::before{
  content:"";position:absolute;inset-inline:0;top:0;height:9px;pointer-events:none;
  background-image:radial-gradient(circle at 9px 0, transparent 8px, var(--line) 8px, var(--line) 9px, transparent 9px);
  background-size:18px 9px;background-repeat:repeat-x;opacity:.85;
}

.eyebrow{
  display:block;font-family:var(--font-body);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--verdigris);margin-bottom:.85rem;
}
.section-head{max-width:none;margin-bottom:2.4rem}
.section-head h2{max-width:22ch}
.section-head p{color:var(--paper-dim);max-width:62ch;margin-bottom:0}
.section-head.center{text-align:center}
.section-head.center h2,.section-head.center p{margin-inline:auto}
.prose{max-width:72ch}
.prose p:last-child{margin-bottom:0}
.prose a{border-bottom:1px solid var(--verdigris-deep)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:var(--gold-ink);padding:.7rem 1.1rem;font-weight:600}
.skip-link:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.5rem;border-radius:var(--radius);font-family:var(--font-body);
  font-weight:600;font-size:.94rem;letter-spacing:.01em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.btn-primary:hover{background:#e7b96f;color:var(--gold-ink)}
.btn-outline{background:transparent;color:var(--paper);border-color:rgba(237,231,218,.32)}
.btn-outline:hover{border-color:var(--verdigris);color:var(--verdigris)}
.btn-row{display:flex;gap:.85rem;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(8,13,17,.94);
  backdrop-filter:saturate(140%) blur(9px);border-bottom:1px solid var(--line-soft);
}
.header-inner{display:flex;align-items:center;gap:1.25rem;min-height:var(--header-h)}
.brand{display:flex;flex-direction:column;line-height:1.16;flex-shrink:0;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-name{
  font-family:var(--font-display);font-weight:600;font-size:1.14rem;color:var(--paper);
  white-space:nowrap;letter-spacing:-.01em;
}
.brand-tagline{
  font-size:.63rem;letter-spacing:.185em;text-transform:uppercase;color:var(--verdigris);
  white-space:nowrap;font-weight:600;
}
.main-nav{margin-left:auto}
.main-nav > ul{display:flex;align-items:center;gap:1.45rem;list-style:none;margin:0;padding:0}
.main-nav > ul > li{margin:0}
.main-nav > ul > li > a{
  color:var(--paper-dim);font-size:.87rem;font-weight:500;white-space:nowrap;text-decoration:none;
  padding-block:.35rem;border-bottom:1px solid transparent;
}
.main-nav > ul > li > a:hover{color:var(--paper);border-bottom-color:var(--gold);text-decoration:none}
.main-nav > ul > li > a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--verdigris)}
.main-nav > ul > li.nav-cta > a{padding:.6rem 1.15rem;background:var(--gold);color:var(--gold-ink);border-radius:var(--radius);font-weight:600}
.main-nav > ul > li.nav-cta > a:hover{background:#e7b96f;color:var(--gold-ink);border-bottom-color:transparent}
.hamburger{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--line-soft);
  color:var(--paper);font-size:1.2rem;line-height:1;padding:.5rem .7rem;border-radius:var(--radius);cursor:pointer;
}
.nav-close{display:none}

/* ---------- hero ---------- */
.hero,.hero-page{
  position:relative;display:flex;align-items:center;
  min-height:64vh;background-size:cover;background-position:center;
  background-color:var(--ink-3);
  padding:clamp(3.6rem,8vw,6.5rem) 0;
  /* NEVER give a hero a border.
     `inset:0` on the ::before/::after overlays resolves against the PADDING box, but
     `background-clip` defaults to `border-box` — so any border width becomes a strip of
     completely untreated background image that the scrim and glow cannot reach. A 1px
     border-bottom here produced a full-width bright band along the bottom of every hero
     (measured: 187 mean brightness against 57 above it). Separation from the next section
     comes from the sections' own backgrounds, not from a rule on the hero.
     `background-clip:padding-box` is belt-and-braces: if a border is ever reintroduced,
     the image stops at the padding box instead of bleeding into it. */
  background-clip:padding-box;
  /* The hero picture is a real <img class="hero-img"> so it can carry alt text; see
     hero_img() in generator.py. `isolation:isolate` makes the hero its own stacking
     context, which is what lets that img sit at z-index:-1 ABOVE the hero's own
     background-colour but BELOW ::before and ::after. Without it the negative z-index
     escapes to the nearest ancestor context and the picture disappears behind
     --ink-3. Do not remove it while .hero-img is negative. */
  isolation:isolate;
  overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  /* Matches what background-size:cover / background-position:center did before. */
}
.hero-page{min-height:52vh}
/* scrim */
.hero::before,.hero-page::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(8,13,17,.94) 0%,rgba(8,13,17,.80) 46%,rgba(8,13,17,.52) 100%);
}
/* motif 1 — lantern glow */
.hero::after,.hero-page::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
/* Never use .hero>* — it ties with .wrap on specificity and silently strips its width. */
.hero>.wrap,.hero-page>.wrap{position:relative;z-index:1;align-self:center}
.hero h1{max-width:16ch;margin-bottom:.5em}
.hero-page h1{max-width:19ch;margin-bottom:.5em}
.hero-intro{max-width:56ch;color:var(--paper);font-size:1.07rem;margin-bottom:1.9rem;opacity:.94}
.hero .btn-row,.hero-page .btn-row{margin-top:.4rem}

/* ---------- language switcher ----------
   DORMANT until a second language is ACTIVE: language_switcher_html() returns ""
   below that threshold, so no EN page contains a single one of these classes.
   The rules ship anyway so adding a language is a data change, not a design task.

   A COMPACT DROPDOWN, not a row of codes: the closed control is one code and a
   caret whatever the language count, so the header's width budget stops moving
   when a language is added. The closed control keeps the old row's font size
   and vertical padding exactly, so header height is unchanged. */
.lang-switch{position:relative;margin-left:1.1rem;flex-shrink:0}
.lang-toggle{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-body);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  line-height:1.25;padding:.34rem .5rem;color:var(--paper-dim);white-space:nowrap;
  background:transparent;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  transition:color .2s,background .2s,border-color .2s;
}
.lang-toggle:hover{color:var(--paper);background:var(--ink-2)}
.lang-toggle:focus-visible{outline:2px solid var(--verdigris);outline-offset:2px}
.lang-caret{font-size:.62em;line-height:1;transition:transform .18s ease}
.lang-switch.open .lang-toggle{color:var(--paper);background:var(--ink-2);border-color:var(--verdigris-deep)}
.lang-switch.open .lang-caret{transform:rotate(180deg)}

/* Right-anchored so it opens INTO the page, never past the right edge, and
   width-capped against the viewport so a narrow screen cannot produce a
   horizontal scrollbar. */
.lang-menu{
  display:block;
  position:absolute;top:calc(100% + .4rem);right:0;z-index:60;
  margin:0;padding:.25rem;list-style:none;
  min-width:11.5rem;max-width:min(16rem,calc(100vw - 1.6rem));
  max-height:min(22rem,calc(100vh - 5rem));overflow-y:auto;
  background:var(--ink-2);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.lang-menu[hidden]{display:none}
.lang-menu li{margin:0;padding:0;list-style:none}
.lang-opt{
  display:flex;align-items:baseline;gap:.6rem;padding:.42rem .55rem;border-radius:2px;
  color:var(--paper-dim);text-decoration:none;white-space:nowrap;
  transition:color .2s,background .2s;
}
.lang-opt .lang-code{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  min-width:3.4em;color:var(--verdigris);
}
.lang-opt .lang-native{font-size:.86rem;letter-spacing:0;text-transform:none}
a.lang-opt:hover{color:var(--paper);background:var(--ink-3)}
a.lang-opt:focus-visible{outline:2px solid var(--verdigris);outline-offset:-2px;color:var(--paper)}
.lang-opt.is-active{color:var(--ink);background:var(--gold);cursor:default}
.lang-opt.is-active .lang-code{color:var(--ink);opacity:.72}

/* Mobile copy lives inside the collapsible nav list, above the CTA, so it can
   never overlap the sticky booking bar or the hamburger. There the panel is
   already the full width and may itself scroll, so the list opens IN FLOW
   rather than absolutely — an absolute menu hanging off the last row of a
   scrolling panel is the one way this can still leave the viewport. */
.nav-lang{margin-top:.6rem}
.lang-switch-mobile{margin-left:0}
/* Paired with the nav collapse point (1200px), not with the phone layout: the
   two copies must swap over on exactly the same pixel or a width exists where
   the site shows both or neither. */
@media(min-width:1200px){.nav-lang{display:none}}
@media(max-width:1199px){
  .site-header .lang-switch:not(.lang-switch-mobile){display:none}
  .lang-switch-mobile .lang-menu{
    position:static;margin-top:.45rem;min-width:0;width:100%;max-width:none;
    max-height:none;overflow:visible;box-shadow:none;background:var(--ink-3);
  }
  .lang-switch-mobile .lang-opt{padding:.55rem .6rem}
}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:1rem 0;border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;font-size:.82rem;color:var(--paper-dim)}
.crumbs li{margin:0;display:flex;align-items:center;gap:.5rem}
.crumbs li:not(:last-child)::after{content:"\203A";color:var(--verdigris-deep)}
.crumbs a{color:var(--verdigris)}

/* ---------- tour cards ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:var(--grid-gap)}
.tours-grid[data-count="1"],.tours-grid[data-count="2"]{justify-content:center}
.tours-grid[data-count="1"]>.tour-card,.tours-grid[data-count="2"]>.tour-card{max-width:430px;justify-self:center;width:100%}
.tour-card{
  display:flex;flex-direction:column;background:var(--ink-3);
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.tour-card:hover{border-color:var(--line);transform:translateY(-2px)}
/* Fixed pixel height, never aspect-ratio: an intrinsic ratio guarantees consistent
   shape, not consistent height, so card media drifts when column width changes. */
.tour-card-media{position:relative;height:212px;overflow:hidden;background:var(--ink-4)}
.tour-card-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.tour-card-media .img-slot{height:100%}
.card-badge{
  position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--gold);color:var(--gold-ink);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:2px;
}
.tour-card-body{display:flex;flex-direction:column;flex:1;padding:1.4rem}
.tour-card-body h3{margin-bottom:.35rem;font-size:1.1rem;line-height:1.28}
.card-provider{font-size:.79rem;color:var(--paper-dim);margin-bottom:.9rem}
.card-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.chip{
  font-size:.73rem;font-weight:600;letter-spacing:.02em;padding:.28rem .58rem;border-radius:2px;
  background:rgba(237,231,218,.06);border:1px solid var(--line-soft);color:var(--paper-dim);
}
.chip-price{color:var(--gold);border-color:var(--line)}
.chip-rating{color:var(--verdigris);border-color:rgba(111,179,160,.28)}
.chip-none{font-style:italic}
.tour-card-body>ul{flex:1;list-style:none;padding:0;margin:0 0 1.25rem;font-size:.87rem;color:var(--paper-dim)}
.tour-card-body>ul li{position:relative;padding-left:1.05rem;margin-bottom:.4rem;line-height:1.5}
.tour-card-body>ul li::before{content:"\2022";position:absolute;left:0;color:var(--verdigris-deep)}
.card-actions{display:flex;gap:.6rem;margin-top:auto;flex-wrap:wrap}
.card-actions .btn{flex:1;min-width:130px;padding-inline:1rem}

/* ---------- advantage / trust cards ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));gap:1.4rem}
.adv-card{padding:1.5rem;background:var(--ink-3);border:1px solid var(--line-soft);border-radius:var(--radius)}
.adv-icon{display:block;font-size:1.35rem;color:var(--gold);margin-bottom:.85rem;line-height:1}
.adv-label{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verdigris);margin-bottom:.45rem;
}
.adv-card h3{margin-bottom:.45rem;font-size:1.06rem}
.adv-card p{margin:0;font-size:.9rem;color:var(--paper-dim);line-height:1.6}

/* ---------- decision / pick cards ---------- */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(206px,100%),1fr));gap:1.15rem}
.pick-card{
  position:relative;display:flex;flex-direction:column;padding:1.35rem;
  border:1px solid var(--line-soft);border-radius:var(--radius);background:transparent;transition:border-color .2s,background .2s;
}
.pick-card:hover{border-color:var(--line);background:var(--ink-2)}
.pick-card:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.pick-icon{display:block;font-size:1.1rem;color:var(--verdigris);margin-bottom:.7rem;line-height:1}
.pick-card h3{font-size:1rem;margin-bottom:.25rem}
.pick-sub{font-style:italic;font-size:.79rem;color:var(--verdigris);margin:0 0 .6rem}
.pick-card>p:not(.pick-sub){font-size:.86rem;color:var(--paper-dim);margin-bottom:1.1rem;line-height:1.55}
.pick-cta{margin-top:auto;font-size:.84rem;font-weight:600;color:var(--gold);display:inline-flex;gap:.4rem;align-items:center}
.pick-cta:hover{color:var(--gold);text-decoration:none}
.pick-cta::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line-soft)}
.acc-item{border-bottom:1px solid var(--line-soft)}
.acc-item h3{margin:0}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:transparent;border:0;color:var(--paper);font-family:var(--font-display);
  font-size:1.04rem;font-weight:600;text-align:left;padding:1.15rem 0;cursor:pointer;line-height:1.35;
}
.acc-btn:hover{color:var(--gold)}
.acc-btn .acc-mark{color:var(--verdigris);margin-right:.65rem;font-size:.95em}
.acc-icon{color:var(--gold);font-size:1.3rem;font-weight:400;transition:transform .2s;flex-shrink:0;line-height:1}
.acc-btn[aria-expanded="true"] .acc-icon{transform:rotate(45deg)}
.acc-panel{padding:0 0 1.3rem;max-width:76ch;color:var(--paper-dim)}
.acc-panel:not(.open){display:none}
.acc-panel p{margin:0}

/* ---------- lead tour + booking card ---------- */
.about-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:2.6rem;align-items:start}
.about-body{color:var(--paper-dim)}
.about-body p{color:var(--paper-dim)}
.rec-badge{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);border-radius:2px;padding:.35rem .7rem;margin:0 0 1.4rem;
}
.rec-badge-mark{color:var(--gold)}
.highlight-list{list-style:none;padding:0;margin:1.4rem 0 0}
.highlight-list li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;color:var(--paper-dim);font-size:.94rem}
.highlight-list li::before{content:"\2726";position:absolute;left:0;color:var(--verdigris);font-size:.8rem;top:.25rem}
.booking-card{
  position:sticky;top:96px;background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem;
}
.booking-card h3{font-size:1.05rem;margin-bottom:.9rem}
.booking-price{display:block;font-family:var(--font-display);font-size:2.1rem;color:var(--gold);line-height:1;margin-bottom:1.2rem}
.booking-price small{font-size:.78rem;color:var(--paper-dim);font-family:var(--font-body);letter-spacing:.02em}
.booking-list{list-style:none;padding:0;margin:0 0 1.4rem;font-size:.85rem;color:var(--paper-dim)}
.booking-list li{position:relative;padding-left:1.3rem;margin-bottom:.55rem;line-height:1.5}
.booking-list li::before{content:"\2713";position:absolute;left:0;color:var(--verdigris);font-weight:700}
.booking-card .btn{width:100%}
.booking-note{font-size:.75rem;color:var(--paper-dim);margin:.9rem 0 0;text-align:center;opacity:.8}

/* ---------- split CTA ---------- */
.split-cta{padding:0;background:var(--ink-2);border-block:1px solid var(--line-soft)}
.split-inner{display:grid;grid-template-columns:1fr 1fr}
.split-text{
  padding:clamp(2.6rem,5.5vw,4.4rem) clamp(1.6rem,4vw,3.4rem);
  display:flex;flex-direction:column;justify-content:center;
  /* motif 3 — hurricane-shutter louvres */
  background-image:repeating-linear-gradient(180deg,rgba(237,231,218,.028) 0 1px,transparent 1px 7px);
}
.split-text h2{max-width:24ch}
.split-text p{max-width:46ch;color:var(--paper-dim)}
.split-media{position:relative;min-height:340px;background:var(--ink-4);overflow:hidden}
.split-media .slide,.split-media .img-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.split-media .slide.active,.split-media .img-slot.active{opacity:1}
.split-media .img-slot{display:flex}
.slide-dots{position:absolute;bottom:1rem;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:3}
.slide-dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid rgba(237,231,218,.55);background:transparent;cursor:pointer}
.slide-dot.active{background:var(--gold);border-color:var(--gold)}

/* ---------- includes / excludes ---------- */
.inc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr));gap:var(--grid-gap)}
.inc-col{background:var(--ink-3);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.5rem}
.inc-col h3{font-size:1rem;margin-bottom:1rem}
.inc-col ul{list-style:none;padding:0;margin:0;font-size:.9rem;color:var(--paper-dim)}
.inc-col li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;line-height:1.55}
.inc-col.included li::before{content:"\2713";position:absolute;left:0;color:var(--verdigris);font-weight:700}
.inc-col.excluded li::before{content:"\2715";position:absolute;left:0;color:var(--gold-deep);font-weight:700}

/* ---------- meeting point ---------- */
.meet-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--grid-gap);align-items:start}
.map-frame{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--ink-3)}
.map-frame iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.35) contrast(1.06) brightness(.86)}
.meet-card{background:var(--ink-3);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.5rem}
.meet-card h3{font-size:1.02rem;margin-bottom:1rem}
.meet-card dl{margin:0}
.meet-card dt{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verdigris);margin-bottom:.3rem}
.meet-card dd{margin:0 0 1.1rem;font-size:.9rem;color:var(--paper-dim);line-height:1.6}
.meet-card dd:last-child{margin-bottom:0}
.map-link{display:inline-flex;align-items:center;gap:.35rem}
.map-link-mark{font-size:.85em}
.meet-other{margin-top:1.4rem;border-top:1px solid var(--line-soft);padding-top:1.2rem}

/* ---------- before you book ---------- */
.know-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--grid-gap)}
.know-card{background:var(--ink-3);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.5rem}
.know-card h3{font-size:1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.know-card h3 span{color:var(--verdigris)}
.know-card ul{list-style:none;padding:0;margin:0;font-size:.89rem;color:var(--paper-dim)}
.know-card li{position:relative;padding-left:1.2rem;margin-bottom:.65rem;line-height:1.58}
.know-card li::before{content:"\2013";position:absolute;left:0;color:var(--verdigris-deep)}

/* ---------- ratings / verdicts (editorial, not testimonials) ---------- */
.verdict-list{max-width:76ch;margin-inline:auto}
.verdict{padding:1.9rem 0;border-top:1px solid var(--line-soft)}
.verdict:first-child{border-top:0;padding-top:0}
.verdict-head{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;margin-bottom:.9rem}
.verdict-score{
  font-family:var(--font-display);font-size:1.6rem;color:var(--gold);line-height:1;
  border:1px solid var(--line);border-radius:2px;padding:.3rem .6rem;
}
.verdict-title{font-family:var(--font-display);font-size:1.12rem;font-weight:600;margin:0}
.verdict-op{font-size:.78rem;color:var(--paper-dim);width:100%;margin:0}
.verdict p{color:var(--paper-dim);margin-bottom:.8rem}
.verdict p:last-child{margin-bottom:0}
.verdict-caveat{
  border-left:2px solid var(--gold-deep);padding-left:1rem;font-size:.93rem;
}
.verdict-caveat strong{color:var(--gold);font-weight:600}
.unrated-note{
  max-width:76ch;margin:2.2rem auto 0;padding-top:1.5rem;border-top:1px solid var(--line-soft);
  font-size:.87rem;color:var(--paper-dim);
}

/* ---------- guest testimonials (real, provenance-gated: see decision 7) -------
   Dormant while testimonials.json is empty for every page, which is how this
   build ships. Kept in the sheet so a real testimonial renders in house style
   the moment one is added, with no design work at that point. */
.rev-list{
  display:grid;gap:1.4rem;max-width:78ch;margin-inline:auto;
  grid-template-columns:1fr;
}
@media(min-width:900px){.rev-list{grid-template-columns:repeat(3,1fr);max-width:none}}
.rev{
  display:flex;flex-direction:column;gap:1rem;
  padding:1.7rem 1.5rem;background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:3px;
}
.rev blockquote{margin:0;padding:0;border:0}
.rev blockquote p{
  margin:0;color:var(--paper);font-size:1rem;line-height:1.62;
}
.rev blockquote p::before{content:"\201C"}
.rev blockquote p::after{content:"\201D"}
.rev footer{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line-soft)}
.rev-name{font-family:var(--font-display);font-size:.98rem;color:var(--gold);margin:0}
.rev-meta{font-size:.78rem;color:var(--paper-dim);margin:.25rem 0 0}
.rev-src{font-size:.72rem;color:var(--paper-dim);margin:.45rem 0 0;letter-spacing:.02em}
.rev-src a{color:inherit}

/* ---------- comparison table ---------- */
.cmp-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--radius)}
.cmp{min-width:680px;font-size:.88rem}
.cmp th,.cmp td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cmp thead th{
  background:var(--ink-3);font-family:var(--font-display);font-size:.95rem;font-weight:600;
  color:var(--paper);border-bottom:1px solid var(--line);
}
.cmp tbody th{
  font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verdigris);white-space:nowrap;width:1%;
}
.cmp td{color:var(--paper-dim)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .cmp-none{font-style:italic;opacity:.72}

/* ---------- guide pages ---------- */
.guide-toc{
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.4rem 1.6rem;
  margin:0 0 3rem;background:var(--ink-2);
}
.guide-toc h2{font-size:.72rem;font-family:var(--font-body);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verdigris);margin-bottom:.9rem}
.guide-toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem;font-size:.9rem}
.guide-toc li{margin-bottom:.4rem;break-inside:avoid}
.method-note{
  border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;margin:0 0 3rem;
  background:linear-gradient(180deg,rgba(216,166,87,.05),transparent);
}
.method-note h2{font-size:.98rem;margin-bottom:.55rem;color:var(--gold);letter-spacing:0}
.method-note p{margin:0;font-size:.9rem;color:var(--paper-dim)}
.guide-lead-media{margin:0 0 2.8rem;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.guide-lead-media img{width:100%;height:320px;object-fit:cover;display:block}
.guide-section{margin:0 0 3.4rem;scroll-margin-top:100px}
.guide-section h2{margin-bottom:.4em}
.guide-address{
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--verdigris);
  margin:0 0 1.3rem;font-weight:600;
}
.guide-section p{color:var(--paper-dim)}
.record{list-style:none;padding:1.3rem 1.5rem;margin:1.7rem 0 0;background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:var(--radius)}
.record li{display:flex;gap:.9rem;margin-bottom:.95rem;font-size:.89rem;line-height:1.6;color:var(--paper-dim)}
.record li:last-child{margin-bottom:0}
.record-label{
  flex-shrink:0;font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.26rem .5rem;border-radius:2px;height:fit-content;margin-top:.14rem;min-width:98px;text-align:center;
}
.label-documented{background:rgba(111,179,160,.16);color:var(--verdigris);border:1px solid rgba(111,179,160,.34)}
.label-folklore{background:rgba(216,166,87,.12);color:var(--gold);border:1px solid var(--line)}
.label-legend{background:rgba(216,166,87,.08);color:var(--gold-deep);border:1px solid rgba(184,135,60,.3)}
.label-reported{background:rgba(237,231,218,.06);color:var(--paper-dim);border:1px solid var(--line-soft)}
.label-disputed{background:rgba(198,90,74,.14);color:#d98a7c;border:1px solid rgba(198,90,74,.34)}
.access-table{margin-top:1.8rem}
.sources{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--line-soft)}
.sources h2{font-size:.72rem;font-family:var(--font-body);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verdigris);margin-bottom:.9rem}
.sources ul{list-style:none;padding:0;margin:0;font-size:.84rem}
.sources li{margin-bottom:.5rem;color:var(--paper-dim)}

/* ---------- final CTA band ---------- */
.cta-band{
  background:var(--ink-2);border-block:1px solid var(--line);text-align:center;position:relative;overflow:hidden;
}
.cta-band::after{content:"";position:absolute;inset:0;background:var(--glow);opacity:.7;pointer-events:none}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band p{max-width:58ch;margin-inline:auto;color:var(--paper-dim);margin-bottom:1.8rem}

/* ---------- lateral nav ---------- */
.also{text-align:center}
.also p{max-width:64ch;margin-inline:auto;color:var(--paper-dim)}

/* ---------- image placeholder slots ---------- */
.img-slot{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:150px;
  background:
    linear-gradient(135deg,rgba(216,166,87,.05),transparent 60%),
    repeating-linear-gradient(45deg,rgba(237,231,218,.028) 0 10px,transparent 10px 20px),
    var(--ink-4);
  border:1px dashed var(--line);color:var(--paper-dim);
  font-family:var(--font-body);font-size:.7rem;letter-spacing:.07em;text-align:center;padding:1rem;
}
.img-slot span{opacity:.66}
.guide-section .img-slot{min-height:230px;margin-bottom:1.4rem;border-radius:var(--radius)}

/* ---------- sticky booking bar ---------- */
.sticky-book{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  align-items:center;gap:1rem;background:rgba(12,19,25,.97);
  backdrop-filter:blur(9px);border-top:1px solid var(--line);
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));
}
.sticky-book.visible{display:flex}
.sticky-book-info{flex:1;min-width:0}
.sticky-book-copy{display:block;font-size:.8rem;line-height:1.35;color:var(--paper-dim)}
.sticky-book .btn{flex-shrink:0;padding:.7rem 1.15rem;font-size:.87rem}
body.has-sticky-book{padding-bottom:0}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-2);border-top:1px solid var(--line-soft);padding:3.4rem 0 2rem;font-size:.88rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.4rem;margin-bottom:2.6rem}
.footer-brand .brand-name{font-size:1.2rem;display:block;margin-bottom:.5rem}
.footer-brand p{color:var(--paper-dim);max-width:40ch;margin:0}
.site-footer h3{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--verdigris);margin-bottom:.9rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--paper-dim)}
.site-footer a:hover{color:var(--paper)}
.footer-bottom{border-top:1px solid var(--line-soft);padding-top:1.6rem;text-align:center}
.footer-bottom p{color:var(--paper-dim);font-size:.78rem;margin-bottom:.7rem}
.affiliate-disclosure{max-width:86ch;margin-inline:auto;opacity:.78;line-height:1.6}
/* SPECIFICITY TRAP: `.footer-bottom p` (0-1-1) outranks `.affiliate-disclosure` (0-1-0)
   and its margin shorthand resets margin-inline:auto, dumping the block flush left
   while its text stays centred. This 0-2-0 rule restores it. */
.footer-bottom .affiliate-disclosure{margin-inline:auto}

/* ==========================================================================
   Responsive — two independent breakpoint pairs:
   900/901 is the mobile-nav pair; 960/961 is the two-column-layout pair.
   ========================================================================== */
@media (max-width:960px){
  .about-grid,.meet-grid{grid-template-columns:1fr}
  .booking-card{position:static}
  .split-inner{grid-template-columns:1fr}
  .split-media{order:-1;min-height:262px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .guide-toc ol{columns:1}
}
@media (min-width:961px){
  .h2-break{display:inline}
}
/* ---------- nav density ----------
   The header is brand + nav + language control on one nowrap row inside a
   container that never grows past 1160px. Localized nav labels run 30-40%
   longer than the English ones the spacing was designed around, so the English
   values do not fit every language at every width — measured on the seven live
   languages, the longest nav wants 863px of the 1160px available, and the row
   then overflows and CLIPS the language control at the right edge.

   Two bands, both tightening spacing inside the existing nav rather than
   changing its design:

   (a) everyone, just above the collapse point, where the container is at its
       narrowest and even English does not fit;
   (b) every language except the source one, at every width — since the
       container has a hard maximum, no width exists where a longer nav fits at
       English spacing, so this cannot be a breakpoint. English keeps the
       approved header exactly as designed at 1340px and up. */
@media (min-width:1200px) and (max-width:1339px){
  .header-inner{gap:.9rem}
  .main-nav > ul{gap:1.05rem}
  .main-nav > ul > li > a{font-size:.77rem}
  .main-nav > ul > li.nav-cta > a{padding:.52rem .95rem}
  .lang-switch{margin-left:.7rem}
}
@media (min-width:1200px){
  html:not([lang="en-US"]) .header-inner{gap:.9rem}
  html:not([lang="en-US"]) .main-nav > ul{gap:1.05rem}
  html:not([lang="en-US"]) .main-nav > ul > li > a{font-size:.77rem}
  html:not([lang="en-US"]) .main-nav > ul > li.nav-cta > a{padding:.52rem .95rem}
  html:not([lang="en-US"]) .lang-switch{margin-left:.7rem}
}
/* The nav collapses to the hamburger at 1200px rather than 900px. Below that
   the row does not fit in any language, English included — it overflowed by
   66px at 1100px before this change, with the language control clipped off the
   right edge. A nav behind a button is better than a nav past the viewport, and
   one threshold for every language is easier to reason about than seven. */
@media (max-width:1199px){
  .hamburger{display:block}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;max-height:calc(100vh - var(--header-h));
    overflow-y:auto;background:var(--ink);border-bottom:1px solid var(--line);
    margin-left:0;display:none;z-index:200;
  }
  .main-nav.open{display:block}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;padding:1rem 6vw 2rem}
  .main-nav > ul > li{border-bottom:1px solid var(--line-soft)}
  .main-nav > ul > li:last-child{border-bottom:0}
  .main-nav > ul > li > a{display:block;padding:.95rem 0;font-size:1rem;min-height:44px}
  .nav-cta{margin-top:1.1rem}
  .main-nav > ul > li.nav-cta > a{text-align:center;padding:.85rem 1.15rem}
  .nav-close{
    display:block;position:absolute;top:.6rem;right:6vw;background:transparent;border:0;
    color:var(--paper);font-size:1.4rem;line-height:1;cursor:pointer;padding:.4rem;
  }
  body.menu-open{overflow:hidden}
}
/* Everything below is the PHONE/TABLET layout pair and keeps its own 900px
   threshold. It moved out of the block above when the nav collapse point was
   raised to 1100px: full-width buttons and a single-column footer on a 1024px
   laptop would be a design change, and only the nav needed the earlier break. */
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row,.card-actions{flex-direction:column}
  .card-actions .btn{width:100%}
  /* The sticky bar is a two-column row, not a stacked block: exempt it from the
     full-width button rule or the button crushes the offer copy to a few characters. */
  .sticky-book .btn{width:auto;flex-shrink:0;max-width:56%}
  .sticky-book{gap:.75rem}
  .sticky-book-copy{font-size:.76rem}
  body.has-sticky-book{padding-bottom:120px}
}
@media (min-width:901px){
  .sticky-book{display:none !important}
}
/* Very narrow phones. The brand block is two nowrap lines beside a 44px
   hamburger, and a localized tagline runs longer than the English one it was
   sized against — Dutch pushed the button 34px past a 320px viewport. Step the
   tagline down rather than hide it: it is brand furniture, and one clipped
   header is not worth losing it on every small phone. */
@media (max-width:400px){
  .brand{min-width:0}
  .brand-tagline{font-size:.55rem;letter-spacing:.11em}
}
@media (max-width:700px){
  body{font-size:16px}
  .verdict-head{gap:.6rem}
  .record li{flex-direction:column;gap:.45rem}
  .record-label{min-width:0;align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .split-media .slide,.split-media .img-slot{transition:none !important}
}