/* Self-hosted Fraunces + Karla — zero third-party requests before first paint.
   Variable fonts: one file per family/style/subset covers weights 400–700.
   latin-ext kept for ş ı ğ İ ç ö ü (Kuşadası, Şirince, Selçuk, İzmir).
   font-display: swap so text is readable while the file downloads. */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ephesusbylocals.com — "Evening in Selçuk" design system
   See design/CREATIVE-DIRECTION.md. Fraunces (display) + Karla (text). */

:root {
  --paper: #FAF5EB;
  --ink: #26291F;
  --olive: #55663D;
  --olive-deep: #3E4C2C;
  --honey: #D99C4B;
  --pome: #9E3D2B;
  --night: #20261B;
  --stone: #EDE4D3;
  --ivory-on-night: #F2EEE3;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow: 0 10px 30px -12px rgba(38, 41, 31, 0.35);
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Karla", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  animation: page-in 240ms var(--ease-out);
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--olive-deep); }

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
/* §3 size contrast: H1 is 1.8-2.2x the body on a phone and 2.2-2.8x on a
   desktop. Body is 17px, so the band is 31-37px mobile / 37-48px desktop.
   The old ceiling of 5rem was 4.7x and wrapped the home H1 to four lines. */
h1 { font-size: clamp(2.05rem, 4.6vw, 2.95rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.22rem, 2vw, 1.6rem); }
p { margin: 0 0 1.2em; }

/* Measure. Dyson & Haselgrove: 50-75 characters per line reads fastest with
   the best comprehension, ~55 fastest of all. Nothing in the reading column
   is allowed past 72ch; centred text keeps its centring. */
main p, main li { max-width: 72ch; }
.ta-center p, .ta-center li, .band-sub { margin-inline: auto; }
main .facts-dl dd, main td p, main .sidecard p, main .gal-item figcaption { max-width: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.5rem); }
.narrow { max-width: 720px; }
.ta-center { text-align: center; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- The clock voice ---------- */
.chip {
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1.1rem;
}
.chip-honey { color: var(--honey); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--olive);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border: none;
  border-radius: 3px;
  font-size: 1rem;
  font-family: "Karla", sans-serif;
  cursor: pointer;
  transition: background-color 250ms var(--ease-inout), transform 150ms var(--ease-inout);
}
.btn:hover { background: var(--olive-deep); color: var(--paper); }
.btn:active { transform: scale(0.98); }
.btn-lg { padding: 1.05rem 2.2rem; font-size: 1.06rem; }
.btn-nav { padding: 0.55rem 1.2rem; font-size: 0.95rem; }

/* Text links with drawn underline */
.drawn {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(var(--pome), var(--pome));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 3px;
  transition: background-size 250ms var(--ease-inout);
}
.drawn:hover { background-size: 30% 2px; color: var(--ink); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(38, 41, 31, 0.09);
}
.head-row { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.logomark { width: 44px; height: 24px; color: var(--olive); flex: none; }
.wordmark { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.wordmark em { font-style: italic; font-weight: 400; color: var(--olive); }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a:not(.btn) {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  background-image: linear-gradient(var(--pome), var(--pome));
  background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
  padding-bottom: 3px;
  transition: background-size 250ms var(--ease-inout);
}
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { background-size: 100% 2px; }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(72vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-img {
  position: absolute; inset: -6% 0;
  background-size: cover; background-position: center 30%;
  z-index: -2;
  animation: hero-settle 1.8s var(--ease-out) both;
  will-change: transform;
}
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Hero backgrounds serve WebP where the browser takes it, JPEG otherwise.
   The first declaration is the fallback; image-set wins where supported.
   These match the <link rel="preload"> emitted in lib.js, so exactly one
   file is ever fetched for the LCP element. */
.hero-img--home {
  background-image: url('/assets/images/hero-celsus-library-ephesus.jpg');
  background-image: -webkit-image-set(url('/assets/images/hero-celsus-library-ephesus.webp') type('image/webp'), url('/assets/images/hero-celsus-library-ephesus.jpg') type('image/jpeg'));
  background-image: image-set(url('/assets/images/hero-celsus-library-ephesus.webp') type('image/webp'), url('/assets/images/hero-celsus-library-ephesus.jpg') type('image/jpeg'));
}
.hero-img--lunch {
  background-image: url('/assets/images/turkish-table-spread.jpg');
  background-image: -webkit-image-set(url('/assets/images/turkish-table-spread.webp') type('image/webp'), url('/assets/images/turkish-table-spread.jpg') type('image/jpeg'));
  background-image: image-set(url('/assets/images/turkish-table-spread.webp') type('image/webp'), url('/assets/images/turkish-table-spread.jpg') type('image/jpeg'));
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--paper) 6%, color-mix(in srgb, var(--paper) 82%, transparent) 30%, transparent 66%),
    linear-gradient(100deg, color-mix(in srgb, var(--paper) 92%, transparent) 0%, color-mix(in srgb, var(--paper) 60%, transparent) 36%, transparent 62%);
}
.hero-inner { padding-top: clamp(2.5rem, 9vh, 7rem); padding-bottom: clamp(1.6rem, 5vh, 3.2rem); width: 100%; }
.hero h1 { max-width: 15ch; margin-bottom: 0.3em; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(24px); animation: word-in 600ms var(--ease-out) forwards; }
@keyframes word-in { to { opacity: 1; transform: none; } }
.hero-sub { font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 52ch; opacity: 0; animation: fade-in 500ms var(--ease-out) 260ms forwards; }
.hero-ctas { display: flex; align-items: center; gap: 1.1rem 1.6rem; flex-wrap: wrap; opacity: 0; animation: fade-in 500ms var(--ease-out) 380ms forwards; }
/* The secondary hero link is an action sitting beside the primary button, not
   a word inside a sentence, so WCAG 2.2's inline exemption does not cover it:
   it gets a full 48px target like everything else in the CTA row (§11). */
.hero-ctas a:not(.btn) { display: inline-flex; align-items: center; min-height: 48px; }
.hero-trust { font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em; margin: 0.9rem 0 0; opacity: 0; animation: fade-in 500ms var(--ease-out) 460ms forwards; }
@keyframes fade-in { to { opacity: 1; } }
.hero .chip { min-height: 1.2em; }

/* Shorter hero for interior feature pages (lunch) */
.hero-short { min-height: min(64vh, 680px); }
.hero-short h1 { font-size: clamp(1.95rem, 4.2vw, 2.75rem); max-width: 18ch; }
.hero-short .hero-inner { padding-top: 16vh; }

/* Wide page hero for the big pillars */
.page-hero-wide h1 { max-width: 24ch; }

/* Night hero — used by the Ephesus Night Tour. The page opens after dark,
   then hands back to the normal paper ground below. */
.page-hero-night {
  background: var(--night);
  color: var(--ivory-on-night);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}
.page-hero-night h1 { color: #fff; }
.page-hero-night .lede { opacity: 0.9; }
.page-hero-night .facts li { color: var(--honey); }
.page-hero-night::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}

/* Plain-language facts panel (quotable by AI overviews, readable by humans) */
.facts-panel {
  border: 2px solid var(--ink); border-radius: 3px;
  background: var(--stone);
  padding: clamp(1.1rem, 3vw, 1.7rem);
  margin: 2rem 0;
}
.facts-panel h2 { margin-top: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.facts-dl { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 0.5rem 1.1rem; font-size: 0.96rem; }
.facts-dl dt { font-weight: 700; }
.facts-dl dd { margin: 0; }
.facts-note { margin: 1.1rem 0 0; font-size: 0.88rem; opacity: 0.75; }
@media (max-width: 560px) {
  .facts-dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .facts-dl dd { margin-bottom: 0.6rem; }
}

/* ---------- Bands ---------- */
.band { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }
.band-stone { background: var(--stone); }
.band-night { background: var(--night); color: var(--ivory-on-night); }
.band-night h2, .band-night h3 { color: #fff; }
.band-night a { color: var(--honey); }
.band-contact { background: var(--night); color: var(--ivory-on-night); }
.band-contact .h-band { color: #fff; }
.band-sub { opacity: 0.85; max-width: 46ch; margin-inline: auto; }

/* ---------- Manifesto ---------- */
.manifesto {
  font-family: "Fraunces", serif;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.35;
  font-weight: 400;
  max-width: 30ch;
  margin: 0 auto;
}
.manifesto strong { font-weight: 600; }
.u-pome {
  background-image: linear-gradient(var(--pome), var(--pome));
  background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 96%;
  font-style: normal;
}

/* ---------- The footpath + timeline ---------- */
.path-svg { position: absolute; left: 50%; top: 0; height: 100%; width: 4px; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.path-svg path { stroke: var(--olive); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 10; fill: none; opacity: 0.75; }
.timeline { position: relative; max-width: 880px; margin: 0 auto; }
.stop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.8rem, 4vw, 3rem) 0; }
.stop:nth-child(even) .stop-text { order: 2; }
.stop-text .chip { margin-bottom: 0.5rem; }
.stop-text h3 { margin-bottom: 0.35em; }
.stop-text p { margin: 0; }

/* Pinned photos */
.pin { margin: 0; position: relative; }
.pin img {
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--shadow);
  background: #fff;
}
.pin::after {
  content: ""; position: absolute; inset: 8px -8px -8px 8px;
  border: 1.5px solid rgba(38, 41, 31, 0.25); border-radius: 2px; z-index: -1;
}

/* ---------- Tour rows (editorial index, not cards) ---------- */
.tour-rows { border-top: 1.5px solid rgba(38, 41, 31, 0.18); }
.tour-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) auto auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: 1.6rem clamp(0.6rem, 2vw, 1.4rem);
  border-bottom: 1.5px solid rgba(38, 41, 31, 0.18);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 250ms var(--ease-inout);
  position: relative;
}
.tour-row:hover { background: var(--stone); }
.tour-row h3 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.tour-row .promise { margin: 0; font-size: 0.98rem; opacity: 0.85; }
.tour-row .meta { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--olive); }
.tour-row .arrow { font-size: 1.5rem; color: var(--pome); transition: transform 250ms var(--ease-inout); }
.tour-row:hover .arrow { transform: translateX(6px); }

/* ---------- Postcards (the places) ---------- */
.postcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.postcard {
  text-decoration: none; color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 2px;
  padding: 0.9rem 0.9rem 1.3rem;
  box-shadow: var(--shadow);
  transition: transform 250ms var(--ease-inout), box-shadow 250ms var(--ease-inout);
}
.postcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -14px rgba(38, 41, 31, 0.45); color: var(--ink); }
.postcard img { border-radius: 2px; aspect-ratio: 4 / 3; object-fit: cover; }
.postcard h3 { font-style: italic; font-weight: 400; font-size: 1.6rem; margin: 0.9rem 0 0.2rem; }
.postcard p { margin: 0; font-size: 0.95rem; opacity: 0.85; }

/* ---------- Blog band rows ---------- */
.note-rows { max-width: 760px; }
.note-row {
  display: block; text-decoration: none; color: var(--ivory-on-night);
  padding: 1.4rem 0; border-bottom: 1px solid rgba(242, 238, 227, 0.2);
}
.note-row h3 { color: #fff; margin: 0.2rem 0 0.3rem; transition: color 250ms var(--ease-inout); }
.note-row:hover h3 { color: var(--honey); }
.note-row p { margin: 0; opacity: 0.75; font-size: 0.97rem; }
.note-row .chip { margin: 0; }

/* ---------- About / trust ---------- */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.trust-line { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); }

/* ---------- Contact form ---------- */
.contact-form { max-width: 680px; margin: 0 auto; text-align: left; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.contact-form label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 1.1rem; }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; margin-top: 0.35rem;
  /* font:inherit alone took the LABEL's size (0.9rem = 14.4px). Anything under
     16px makes iOS Safari zoom the page on focus and the visitor then has to
     pinch back out mid-form — §11 / §I. The field is pinned to body size. */
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink); border-radius: 2px;
  padding: 0.7rem 0.9rem;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--honey); outline-offset: 1px; }
.form-note { font-size: 0.9rem; opacity: 0.75; margin-top: 1rem; }
.band-night .contact-form label { color: var(--ivory-on-night); }
.band-night .contact-form input, .band-night .contact-form textarea { border-color: transparent; }

/* ---------- Inner pages ---------- */
.page-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hero h1 { font-size: clamp(1.95rem, 3.8vw, 2.6rem); max-width: 22ch; }
.page-hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 60ch; }
/* 18px on the long detail pages: Frontiers in Psychology 2022 systematic
   review — readers over 55, a large share of this audience, read phones best
   at 17-20px. rem, not px, so the browser font-size setting still wins. */
.prose { max-width: 68ch; font-size: 1.125rem; }
.prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote {
  margin: 2rem 0; padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--honey);
  font-family: "Fraunces", serif; font-size: 1.25rem; line-height: 1.4;
}
.prose .pin { margin: 2.2rem 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.6rem 0; font-size: 0.97rem; }
.prose th, .prose td { border: 1.5px solid rgba(38,41,31,0.25); padding: 0.55rem 0.8rem; text-align: left; }
.prose th { background: var(--stone); font-family: "Karla", sans-serif; letter-spacing: 0.04em; }
.layout-2col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sidecard {
  border: 2px solid var(--ink); border-radius: 2px; background: var(--stone);
  padding: 1.4rem 1.4rem 1.6rem; position: sticky; top: 90px;
}
.sidecard .price { font-family: "Fraunces", serif; font-size: 2rem; font-weight: 600; margin: 0.2rem 0 0; }
.sidecard .price small { font-family: "Karla", sans-serif; font-size: 0.85rem; font-weight: 400; display: block; opacity: 0.75; }
.sidecard dl { margin: 1rem 0 1.2rem; font-size: 0.95rem; }
.sidecard dt { font-weight: 700; float: left; clear: left; margin-right: 0.5rem; }
.sidecard dd { margin: 0 0 0.4rem 0; overflow: hidden; }
.facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.facts li { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); }

/* ---------- Cruise-line trust band ---------- */
.band-cruise { background: var(--stone); padding: clamp(3rem, 6vw, 5rem) 0; }
.cruise-h { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-bottom: 0.5em; }
.band-cruise .band-sub { max-width: 60ch; margin: 0 auto 2.2rem; }
.cruise-logos { margin: 0; }
.cruise-logos img {
  margin: 0 auto;
  max-width: 900px; width: 100%;
  border: 2px solid var(--ink); border-radius: 2px;
  box-shadow: var(--shadow);
  background: #fff;
}
.cruise-rail {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1.5px solid rgba(38, 41, 31, 0.2);
  text-align: center;
}
.cruise-rail img {
  margin: 0 auto 0.7rem; max-width: 120px; width: 100%;
  background: #fff; border: 1px solid rgba(38, 41, 31, 0.18); border-radius: 2px; padding: 6px;
}
.cruise-rail p { margin: 0; font-size: 0.82rem; line-height: 1.5; opacity: 0.8; }

/* Sources block */
.sources { border-top: 1.5px solid rgba(38,41,31,0.18); margin-top: 3rem; padding-top: 1.2rem; font-size: 0.9rem; }
.sources h2 { font-size: 1.05rem; font-family: "Karla", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.sources ol { padding-left: 1.2rem; }


/* ---------- Live weather panel ---------- */
.wx {
  border: 2px solid var(--ink); border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 3vw, 2rem);
}
.wx-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wx-now { display: flex; align-items: center; gap: 1rem; }
.wx-now-icon { width: 58px; height: 58px; color: var(--olive); flex: none; }
.wx-now-icon svg { width: 100%; height: 100%; }
.wx-now-temp { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; margin: 0; }
.wx-now-label { margin: 0.25rem 0 0; font-size: 0.95rem; opacity: 0.8; }

.wx-units { display: flex; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.wx-unit {
  font: 700 0.9rem/1 "Karla", sans-serif;
  background: none; border: 0; color: var(--ink);
  /* °C / °F is a real switch, not a word in a sentence: 44px minimum (§11,
     WCAG 2.2 target size). It was 44x32 and 42x32. */
  min-height: 44px; min-width: 46px;
  padding: 0.55rem 0.9rem; cursor: pointer;
  transition: background-color 250ms var(--ease-inout), color 250ms var(--ease-inout);
}
.wx-unit.is-on { background: var(--olive); color: var(--paper); }

.wx-status { margin: 1.4rem 0 0; font-size: 0.95rem; opacity: 0.8; }

.wx-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.wx-day {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  background: var(--stone); border: 1.5px solid transparent; border-radius: 3px;
  padding: 0.7rem 0.35rem; cursor: pointer; font-family: inherit; color: var(--ink);
  transition: border-color 200ms var(--ease-inout), background-color 200ms var(--ease-inout), transform 200ms var(--ease-inout);
}
.wx-day:hover { border-color: var(--olive); transform: translateY(-2px); }
.wx-day.is-on { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 -3px 0 var(--honey); }
.wx-dow { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.wx-date { font-size: 0.72rem; opacity: 0.7; }
.wx-icon { width: 30px; height: 30px; color: var(--olive); margin: 0.15rem 0; }
.wx-icon svg { width: 100%; height: 100%; }
.wx-temps { font-size: 0.9rem; white-space: nowrap; }
.wx-temps b { font-weight: 700; }
.wx-temps i { font-style: normal; opacity: 0.75; }
.wx-pop { font-size: 0.72rem; opacity: 0.75; }
.wx-pop[data-wet] { color: var(--olive); opacity: 1; font-weight: 700; }

.wx-advice { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1.5px solid rgba(38, 41, 31, 0.2); }
.wx-advice:empty { display: none; }
.wx-advice .chip { margin-bottom: 0.5rem; }
.wx-advice-h { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0 0 0.4rem; }
.wx-advice-h[data-tone="hot"] { color: var(--pome); }
.wx-advice-h[data-tone="cold"], .wx-advice-h[data-tone="cool"] { color: var(--olive-deep); }
.wx-advice-meta { font-size: 0.88rem; opacity: 0.75; margin-bottom: 1rem; }
.wx-advice-list { margin: 0; padding-left: 1.2rem; }
.wx-advice-list li { margin-bottom: 0.5em; }
.wx-updated { margin: 1.2rem 0 0; font-size: 0.78rem; opacity: 0.75; }

@media (max-width: 560px) {
  .wx-days { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
  .wx-icon { width: 26px; height: 26px; }
}

/* ---------- 141 Journeys family band ---------- */
.family-band {
  background: var(--stone);
  border-top: 2px solid var(--ink);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.family-band .chip { color: var(--olive); margin-bottom: 0.9rem; }
.fam-lede {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  max-width: 26ch;
  margin: 0 0 1rem;
}
.fam-note { max-width: 62ch; font-size: 0.98rem; margin-bottom: 2.4rem; }
.fam-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.4rem clamp(1.4rem, 3vw, 2.6rem);
}
.fam-item { border-top: 1.5px solid rgba(38, 41, 31, 0.22); padding-top: 0.85rem; }
.fam-item h3 {
  font-family: "Karla", sans-serif;
  font-size: 0.97rem; font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.fam-item h3 a {
  color: var(--ink); text-decoration: none;
  background-image: linear-gradient(var(--pome), var(--pome));
  background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 250ms var(--ease-inout);
}
.fam-item h3 a:hover { background-size: 100% 2px; }
.fam-item p { margin: 0; font-size: 0.88rem; line-height: 1.55; opacity: 0.8; }
.fam-item.is-here { border-top-color: var(--honey); }
.fam-here { display: block; color: var(--ink); }
.fam-here em {
  font-style: normal; font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); background: var(--olive);
  border-radius: 2px; padding: 0.14em 0.5em; margin-left: 0.5rem;
  vertical-align: 1px;
}

/* ---------- Footer ---------- */
.site-foot { background: var(--night); color: var(--ivory-on-night); padding: 3.5rem 0 2rem; }
.site-foot a { color: var(--ivory-on-night); text-decoration: none; display: block; margin-bottom: 0.45rem; font-size: 0.95rem; }
.site-foot a:hover { color: var(--honey); }
.foot-path { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 2.5rem; color: var(--honey); }
.foot-here { font-family: "Fraunces", serif; font-style: italic; font-size: 1.15rem; }
.foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; margin-bottom: 2.5rem; }
.foot-cols h3 { font-size: 1rem; font-family: "Karla", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--honey); margin-bottom: 0.9rem; }
.foot-cols p { font-size: 0.95rem; opacity: 0.85; }
.foot-cols p a, .foot-legal a { display: inline; }
.foot-legal { border-top: 1px solid rgba(242, 238, 227, 0.18); padding-top: 1.4rem; font-size: 0.85rem; opacity: 0.75; }
.foot-legal p { margin-bottom: 0.3rem; }

/* ---------- Reveal system ---------- */
/* CSS-only safety net (memory: feedback-js-nunca-esconde-contenido).
   The hiding half of the reveal system only applies once main.js has run and
   stamped .js on <html>. If the script is blocked, fails to parse or throws
   before the observer is wired, every section stays visible instead of the
   page going blank — which is exactly what happened once on a sister site. */
.rv { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
html.js .rv { opacity: 0; transform: translateY(24px); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 80ms; }
.rv-d2 { transition-delay: 160ms; }
/* The photo settles into place with the section. It used to START at
   scale(1.04), which pushed 4 % of a full-width picture past the edge and gave
   every page with a pinned photo an 8px sideways scroll on a 360px phone (§11)
   — and because this rule was not gated on html.js, a blocked script left the
   image zoomed and overflowing for good. It now grows INTO its frame, so the
   image can never be wider than its column, and the resting state is the
   no-JavaScript state. */
.pin img { transition: transform 800ms var(--ease-out); }
html.js .rv .pin img { transform: scale(0.965); }
html.js .rv.in .pin img, html.js .pin.rv.in img { transform: scale(1); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .stop, .about-grid, .layout-2col { grid-template-columns: 1fr; }
  .stop:nth-child(even) .stop-text { order: 0; }
  .postcards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  /* minmax(0,…) so the track may shrink past its content: the uppercase
     price/duration line is white-space:nowrap and was pushing the tour index
     to 433px on a 360px phone (§11, no horizontal scroll). */
  .tour-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .tour-row .promise { grid-column: 1 / -1; }
  .tour-row .meta { white-space: normal; }
  .sidecard { position: static; }
  .path-svg { left: 12px; transform: none; }

  .nav-toggle {
    display: block; background: none; border: none; cursor: pointer; padding: 10px;
  }
  .nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform 250ms var(--ease-inout), opacity 250ms; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7.5px) rotate(-45deg); }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0.4rem;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    padding: 1rem clamp(1.2rem, 4vw, 2.5rem) 1.4rem;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { font-size: 1.15rem; padding: 0.4rem 0; }
}

@media (max-width: 480px) {
  .foot-cols { grid-template-columns: 1fr; }
}

/* Touch targets. On a phone, stacked text links need real height between them
   or they are a lottery to tap — Google treats that as a mobile-usability fault. */
@media (hover: none), (max-width: 860px) {
  .site-foot a,
  .fam-item h3 a {
    display: inline-block;
    min-height: 48px;
    line-height: 48px;
    margin-bottom: 0;
  }
  .foot-cols p a,
  .foot-legal a { min-height: 0; line-height: inherit; display: inline; }
  .fam-item { padding-top: 0.5rem; }
  .fam-item p { margin-top: -0.35rem; }
  .site-nav a:not(.btn) { min-height: 48px; display: flex; align-items: center; }
}

/* ---------- Reduced motion: everything becomes instant ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .rv, html.js .rv { opacity: 1; transform: none; }
  html.js .rv .pin img, .pin img { transform: none; }
  .hero-img, .hero h1 .w, .hero-sub, .hero-ctas { opacity: 1; transform: none; animation: none; }
}

/* ---------- Priority entrance / skip-the-line panel ----------
   Appears on every tour page. Deliberately the warmest thing on the page
   after the CTA: it is the strongest reason to book rather than turn up. */
.priority-panel {
  border: 2px solid var(--olive);
  border-left-width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--honey) 12%, var(--paper)), var(--paper));
  padding: clamp(1.2rem, 3vw, 1.9rem);
  margin: 2.2rem 0;
}
.priority-panel h2 {
  margin-top: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--olive-deep);
}
.priority-panel h2::before {
  content: "\2192\00a0";           /* an arrow walking straight in */
  color: var(--pome);
  font-weight: 700;
}
.priority-panel p { margin-bottom: 0.9rem; }
.priority-panel ul { margin: 0; padding-left: 1.2rem; }
.priority-panel li { margin-bottom: 0.5em; }
.priority-panel li::marker { color: var(--pome); }

/* ---------- Skip-the-line banners ----------
   Styled as page content, never as an ad unit. NN/g banner-blindness research
   is unambiguous: a boxed bright graphic in a right-side rail is the most
   ignored thing on a web page. So these carry the site's own frame, a real
   caption in the body face, and they sit in the reading column. They are
   deliberately NOT links; the caption next to them holds the real CTA. */
.skipline { margin: 2rem 0; }
.skipline img {
  width: 100%; height: auto; display: block;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.skipline figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.85;
}
.skipline figcaption .drawn { white-space: nowrap; }

/* Inside the priority panel the frame would double up — soften it. */
.priority-panel .skipline { margin: 1.4rem 0; }
.priority-panel .skipline img { border-width: 1.5px; box-shadow: none; }

/* The narrow artwork inside a tour sidecard: supporting material directly under
   the booking CTA (Baymard — trust signals beside the action lift completion). */
.sidecard .skipline { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1.5px solid rgba(38,41,31,.2); }
.sidecard .skipline img { border-width: 1px; box-shadow: none; }
.sidecard .skipline figcaption { font-size: 0.8rem; text-align: center; margin-top: 0.5rem; }

/* Two-column content block: text carries the argument, artwork supports it. */
.split-note {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: start;
  margin: 2.4rem 0;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--stone);
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.split-note h2 { margin-top: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.split-note p:last-child { margin-bottom: 0; }
.split-note .skipline { margin: 0; }

/* Home-page skip-the-line section: copy left (F-pattern first fixation),
   artwork right, both inside the content column. */
.skipline-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.6rem, 5vw, 3.5rem);
  align-items: center;
}
.skipline-split .skipline { margin: 0; }
.skipline-split .skipline img { max-width: 420px; margin-inline: auto; }

@media (max-width: 860px) {
  .split-note, .skipline-split { grid-template-columns: 1fr; }
  /* On a phone the artwork follows the words rather than pushing them down. */
  .split-note .skipline, .skipline-split .skipline { order: 2; }
  .skipline-split .skipline img, .split-note .skipline img { max-width: 340px; margin-inline: auto; }
}

/* Phones must not download a 1920px hero. Below 860px the same LCP element
   is served from a 900px file — about two thirds fewer bytes for the largest
   paint on mobile, which is where Core Web Vitals is judged hardest. */
@media (max-width: 860px) {
  .hero-img--home {
    background-image: url('/assets/images/hero-celsus-library-ephesus-mobile.jpg');
    background-image: -webkit-image-set(url('/assets/images/hero-celsus-library-ephesus-mobile.webp') type('image/webp'), url('/assets/images/hero-celsus-library-ephesus-mobile.jpg') type('image/jpeg'));
    background-image: image-set(url('/assets/images/hero-celsus-library-ephesus-mobile.webp') type('image/webp'), url('/assets/images/hero-celsus-library-ephesus-mobile.jpg') type('image/jpeg'));
  }
  .hero-img--lunch {
    background-image: url('/assets/images/turkish-table-spread-mobile.jpg');
    background-image: -webkit-image-set(url('/assets/images/turkish-table-spread-mobile.webp') type('image/webp'), url('/assets/images/turkish-table-spread-mobile.jpg') type('image/jpeg'));
    background-image: image-set(url('/assets/images/turkish-table-spread-mobile.webp') type('image/webp'), url('/assets/images/turkish-table-spread-mobile.jpg') type('image/jpeg'));
  }
}

/* ===========================================================================
   DESIGN-BY-RESEARCH RETROFIT — 19 August 2026
   Every block below cites the section of `feedback-design-by-research` it
   implements, so a future edit can argue with the evidence rather than taste.
   =========================================================================== */

/* ---------- §13 Accessibility: a visible focus ring everywhere ----------
   Previously only form fields showed focus. Keyboard and switch users need to
   see where they are on links, buttons, summaries and the gallery frames. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pome);
  outline-offset: 2px;
  border-radius: 2px;
}
.band-night a:focus-visible,
.band-contact a:focus-visible,
.site-foot a:focus-visible,
.page-hero-night a:focus-visible { outline-color: var(--honey); }

/* ---------- §3 Captions on content photos ----------
   Poynter EyeTrack: captions take the fixations right after the headline and
   the photograph. Styled as content, not as a legal footnote. */
.pin figcaption,
.meetmap-fig figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 62ch;
  color: var(--ink);
  opacity: 0.85;               /* measured 8.61:1 on paper */
  border-left: 3px solid var(--honey);
  padding-left: 0.75rem;
}

/* ---------- §12 Breadcrumbs on every inner page ----------
   Orientation for the visitor, a second line in the SERP for Google, and the
   visible counterpart of the BreadcrumbList already present in the JSON-LD. */
.crumbs { border-bottom: 1px solid rgba(38, 41, 31, 0.1); background: var(--paper); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0.55rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.15rem;
  font-size: 0.85rem;
}
.crumbs li { display: flex; align-items: center; max-width: none; }
.crumbs li + li::before { content: "\203A"; opacity: 0.55; padding: 0 0.45rem; }
.crumbs a { color: var(--olive); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { font-weight: 700; }
@media (hover: none), (max-width: 860px) {
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- §8 + §11 + §11b MOBILE STICKY ACTION BAR ----------
   Contentsquare (58M sessions): +31 % conversions, 18 points less abandonment.
   Hoober: 49 % of people hold a phone one-handed and 75 % drive it with a
   thumb, so the bottom-centre is the only comfortable target zone. PMC 2022
   eye-tracking: the bottom half of a phone screen takes 2-3x the fixation time
   of the top half, which is why the primary action sits in the centre.
   Height stays under 15 % of an 844px screen; the header shrinks to 58px, so
   header plus bar stay well inside the 35 % ceiling the rule sets. */
.actionbar { display: none; }
@media (max-width: 900px) {
  .actionbar {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: stretch;
    gap: 0.4rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--ink);
    padding: 0.45rem 0.6rem calc(0.45rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -18px rgba(38, 41, 31, 0.9);
  }
  .actionbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.1rem;
    min-height: 48px;
    font-family: "Karla", sans-serif;
    font-size: 0.82rem; font-weight: 700; line-height: 1.15;
    text-align: center; text-decoration: none;
    border-radius: 3px;
    padding: 0.3rem 0.25rem;
  }
  .ab-link { color: var(--ink); border: 1.5px solid rgba(38, 41, 31, 0.35); }
  .ab-link span { font-size: 0.95rem; line-height: 1; color: var(--olive); }
  .ab-link[aria-current="page"] { background: var(--stone); }
  .ab-cta {
    background: var(--olive); color: var(--paper);
    font-size: 0.95rem; letter-spacing: 0.01em;
  }
  .ab-cta:hover, .ab-cta:focus-visible { background: var(--olive-deep); color: var(--paper); }
  /* Content must never end up underneath the bar. */
  body { padding-bottom: 5.4rem; }
  .head-row { min-height: 58px; }
}

/* ---------- §10 + §11 Tour page order on a phone ----------
   The booking card used to fall to the very bottom of a long page on mobile,
   which is exactly the failure Baymard measures on tour sites. It now sits
   directly under the H1 facts. The skip-the-line artwork and the cruise rail
   inside it are hidden on phones ONLY — both appear again in full further down
   the same page, so nothing is lost to a mobile-first crawler. */
@media (max-width: 860px) {
  /* align-items:start is inherited from the desktop grid, where it means
     "top-align the columns". In a COLUMN flex container the same property
     governs the horizontal axis, so it stopped .prose stretching and let it
     size to its content — a 1200px photograph made the page 540px wide on a
     360px phone. Stretch is restored, and min-width:0 keeps a wide child
     (gallery strip, table) from re-inflating the item. §11: no sideways
     scroll at 360px. */
  .layout-2col { display: flex; flex-direction: column; align-items: stretch; }
  .layout-2col > * { min-width: 0; max-width: 100%; }
  .layout-2col .sidecard { order: -1; margin-bottom: 1.6rem; }
  .sidecard .skipline, .sidecard .cruise-rail { display: none; }
}
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- §8 CTAs and trust micro-copy ----------
   Baymard: trust cues placed next to the action lift completion. CXL: ghost
   buttons draw 38 % interest against 60 % for solid, so the primary is always
   filled and there is only ever one per view. */
.cta-trust {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em;
  margin: 0.9rem 0 0; opacity: 0.9;
}
.tour-cta {
  margin: 2.6rem 0;
  padding: clamp(1.3rem, 3.5vw, 2rem);
  background: var(--stone);
  border: 2px solid var(--ink);
  border-left-width: 6px;
  border-radius: 3px;
}
.tour-cta h2 { margin-top: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.cta-bullets { list-style: none; margin: 1.1rem 0 0; padding: 0; font-size: 0.92rem; }
.cta-bullets li { margin: 0 0 0.4rem; padding-left: 1.5rem; position: relative; max-width: 62ch; }
.cta-bullets li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--olive); font-weight: 700;
}

/* ---------- §8 + §11b Forms ----------
   Four visible fields (HubSpot: three converts best, sharp fall after four),
   labels above the input (Penzo / NordiCHI), 17px inputs so iOS never zooms,
   and the trust bullets beside the button rather than under the fold. */
.contact-form .opt { font-weight: 400; opacity: 0.75; }
.form-send { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1.6rem; align-items: center; margin-top: 0.4rem; }
.form-trust { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; line-height: 1.45; }
.form-trust li { margin: 0 0 0.25rem; padding-left: 1.3rem; position: relative; max-width: 46ch; }
.form-trust li::before { content: "\2713"; position: absolute; left: 0; color: var(--olive); font-weight: 700; }
.band-night .form-trust li::before, .band-contact .form-trust li::before { color: var(--honey); }
.contact-form input, .contact-form textarea { min-height: 48px; }
@media (max-width: 620px) {
  .form-send { grid-template-columns: 1fr; }
  .form-send .btn { width: 100%; text-align: center; }
}

/* ---------- §6 + §11b TOUR PHOTO GALLERY ----------
   TripAdvisor: at least one photo is worth +138 % engagement and +225 %
   booking enquiries. Expedia measured +72 % mobile engagement simply from
   making images zoomable. Baymard wants swipe plus visible thumbnails plus a
   counter, because dots carry no information scent. Scroll-snap means the
   strip works with JavaScript switched off; the zoom is enhancement on top. */
.gallery { margin: 2.6rem 0; }
.gallery h2 { margin-bottom: 0.3em; }
.gal-intro { font-size: 0.95rem; margin-bottom: 1rem; }
.gal-hint { display: inline-block; opacity: 0.8; }
.gal-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 46%);
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.8rem;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--olive) var(--stone);
}
.gal-item { margin: 0; scroll-snap-align: start; }
.gal-zoom {
  display: block; width: 100%; padding: 0; margin: 0; cursor: zoom-in;
  background: none; border: 2px solid var(--ink); border-radius: 2px;
  overflow: hidden; line-height: 0;
}
.gal-zoom img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gal-item figcaption {
  margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.45;
  color: var(--ink); opacity: 0.85;
}
.gal-item figcaption b { color: var(--olive); font-weight: 700; }
@media (max-width: 620px) {
  .gal-strip { grid-auto-columns: 82%; }
}

/* The enlargement. NN/g: an enlargement has to be at least twice the
   thumbnail to be worth the tap; this one fills the viewport. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem;
  background: rgba(32, 38, 27, 0.94);
  padding: clamp(0.8rem, 3vw, 2rem);
}
.lightbox img {
  max-width: 100%; max-height: 78vh; width: auto;
  border: 2px solid var(--paper); border-radius: 2px;
}
.lightbox-cap { color: var(--ivory-on-night); font-size: 0.92rem; max-width: 60ch; text-align: center; margin: 0; }
.lightbox-close {
  position: absolute; top: clamp(0.6rem, 2vw, 1.2rem); right: clamp(0.6rem, 2vw, 1.2rem);
  min-width: 48px; min-height: 48px;
  font: 700 1.3rem/1 "Karla", sans-serif;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 3px; cursor: pointer;
}

/* ---------- §11 + §12 FAQ ACCORDION ----------
   NN/g: accordions are right for long optional content on phones, first item
   open. Google has confirmed accordion content carries full weight under
   mobile-first indexing. Built on native <details> so it works with no
   JavaScript at all. Price, duration and meeting point are never inside one. */
.faq { border-top: 1.5px solid rgba(38, 41, 31, 0.2); margin: 1rem 0 0; }
.faq-item { border-bottom: 1.5px solid rgba(38, 41, 31, 0.2); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: 0.8rem;
  padding: 0.95rem 0; min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto; flex: none;
  font: 700 1.5rem/1 "Karla", sans-serif; color: var(--pome);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary h3 { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.3; }
.faq-item summary:hover h3 { color: var(--olive-deep); }
.faq-a { padding: 0 0 1.1rem; }
.faq-a p { margin: 0; max-width: 68ch; }

/* ---------- §10 MEETING-POINT MAP ----------
   Baymard: 57-67 % of travel sites never show a map of the meeting point on
   the page itself. Drawn inline as SVG rather than embedded, because this site
   makes zero third-party requests and an iframe map would be the first — on
   the very page Google ranks. Positions are projected from real coordinates;
   the drawing is schematic and says so, and every place carries a real link. */
.meetmap { margin: 2.6rem 0; }
.meetmap-where {
  background: var(--stone); border-left: 6px solid var(--olive);
  padding: 0.8rem 1rem; border-radius: 2px; margin-bottom: 1.2rem; max-width: none;
}
.meetmap-fig { margin: 0 0 1.2rem; }
.meetmap-fig svg { width: 100%; height: auto; display: block; border: 2px solid var(--ink); border-radius: 3px; }
.mp-land { fill: #F1EAD8; }
.mp-sea { fill: #C6D7DA; }
.mp-sea-label { fill: #3A5257; font: 700 15px "Karla", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.mp-road { stroke: #8A7B5E; stroke-width: 3; stroke-dasharray: 7 7; }
.mp-dot circle { fill: #9E3D2B; stroke: #FAF5EB; stroke-width: 2.5; }
.mp-dot text { fill: #26291F; font: 700 16px "Karla", sans-serif; }
.mp-north { fill: #26291F; font: 700 15px "Karla", sans-serif; opacity: 0.75; }
.meetmap-links { padding-left: 1.2rem; font-size: 0.95rem; }
.meetmap-links li { margin-bottom: 0.4rem; }

/* ---------- §11 Tap targets in running prose ---------- */
@media (hover: none), (max-width: 860px) {
  .meetmap-links a, .faq-a a { display: inline-block; padding: 0.35rem 0; }
}

/* ---------- Reduced motion: the new pieces obey it too ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-sub, .hero-ctas, .hero-trust { opacity: 1; animation: none; }
  .gal-strip { scroll-snap-type: none; }
}

/* ---------- §2 + §11 The phone first screen ----------
   The rule caps a phone hero at roughly 45-55vh so the H1, one proof line and
   the primary CTA all clear the fold, and so the next section peeks and invites
   the scroll. Measured on 390x844: H1 ends at 320px, the CTA at 516px, the
   trust line at 624px, and the following band is visible under it. */
@media (max-width: 620px) {
  .hero { min-height: min(58vh, 520px); }
  .hero-inner { padding-top: clamp(1.4rem, 4.5vh, 2.6rem); }
  .hero-short { min-height: min(52vh, 460px); }
  .hero h1 { max-width: 18ch; }
  .page-hero { padding-top: clamp(1.6rem, 5vw, 3rem); }
}

/* ---------- §11 Touch-target sweep (measured in the browser, not guessed) ----------
   Google/Android ask for 48x48dp, Apple 44x44pt. WCAG 2.2 AA exempts links
   inside a sentence, so running-prose links keep their natural height; every
   standalone control and every list-item link is brought up to at least 44px. */
@media (hover: none), (max-width: 900px) {
  .brand { min-height: 48px; }
  .nav-toggle { min-height: 48px; min-width: 48px; }
  .crumbs a { min-height: 44px; }
  .meetmap-links a { min-height: 44px; padding: 0.55rem 0; }
  .skipline figcaption .drawn { display: inline-block; min-height: 44px; line-height: 44px; }
}

/* ---------- §4 Hero legibility on a phone scrim ----------
   The desktop hero scrim is a diagonal wash: on a 390px screen the text sits
   over the busiest part of the photograph and the effective contrast of the
   sub-heading drops below the 4.5:1 floor. On phones the wash becomes mostly
   vertical and much heavier under the text block, which is where every word
   that has to be read lives. */
@media (max-width: 620px) {
  .hero::after {
    background:
      linear-gradient(to top,
        var(--paper) 3%,
        color-mix(in srgb, var(--paper) 90%, transparent) 48%,
        color-mix(in srgb, var(--paper) 74%, transparent) 78%,
        color-mix(in srgb, var(--paper) 40%, transparent) 100%),
      linear-gradient(to right,
        color-mix(in srgb, var(--paper) 88%, transparent) 0%,
        color-mix(in srgb, var(--paper) 66%, transparent) 65%,
        color-mix(in srgb, var(--paper) 42%, transparent) 100%);
  }
}

/* ---------- §11 Wide tables scroll in their own box ----------
   Measured: the guide-cost table needs 360px of content and a 360px phone
   offers about 320px. The page body must never scroll sideways, so the table
   gets its own scroller with a visible edge fade as the affordance. */
.table-scroll { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; }
@media (max-width: 620px) {
  .table-scroll { box-shadow: inset -14px 0 12px -12px rgba(38, 41, 31, 0.45); }
  .prose th, .prose td { white-space: normal; }
}

/* The crumb row is chrome, not content: on a phone it should cost the first
   screen as little as possible while still being comfortable to tap. */
@media (max-width: 620px) {
  .crumbs ol { padding: 0.15rem 0; font-size: 0.8rem; }
  .crumbs a { min-height: 40px; }
}