/* ── Design tokens (D2/D3) ──────────────────────────────────────────────────
   Colour keeps the shipped palette (indigo / purple / gold, white editorial
   base) — only --gray is darkened so body copy on white clears 7:1.
   Gold is 3:1 on white: use it for rules, outlines and focus, never for text
   on a light ground. */
:root{
  --indigo:#2e2a6e; --indigo-dark:#252060; --purple:#6a2c91; --purple-hover:#7d35a8;
  --gold:#c9860a; --gold-soft:#f4c96b; --green:#0d7a4f;
  --ink:#23232f; --gray:#494960; --muted:#5d5d74; --line:#e6e6ef; --line-strong:#cfd0e0;
  --bg:#fff; --soft:#f7f7fb; --soft-2:#eef0f7;
  --serif:'Playfair Display','Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  --sans:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* type scale: 18px root everywhere (owner: body ≥18px), so .89rem is 16px */
  --fs-xs:.78rem; --fs-sm:.89rem; --fs-base:1rem; --fs-md:1.12rem; --fs-lg:1.35rem; --fs-xl:1.7rem;
  --fs-h2:clamp(1.7rem,3.4vw,2.3rem); --fs-h1:clamp(1.9rem,4vw,2.8rem); --fs-hero:clamp(2.05rem,5vw,3.25rem);
  --lh-tight:1.15; --lh-body:1.65;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,20,50,.05),0 2px 10px rgba(20,20,50,.07);
  --sh-2:0 10px 28px rgba(20,20,50,.14);
  --sh-3:0 18px 44px rgba(0,0,0,.34);
  --gutter:clamp(16px,4vw,22px);
}
/* Playfair Display has no Hebrew glyphs. On Hebrew pages the display face is
   Frank Ruhl Libre (loaded only there, see head()); Latin words inside Hebrew
   text then also use it, which reads as one face rather than two. */
/* Self-hosted web fonts (tools/selfhost-fonts.js downloads Google's own woff2 subsets into /fonts).
   Hosted on Google, the CSS was render-blocking (~800ms) and the fonts arrived after first paint; the
   swap then grew the hero and pushed CLS to 0.29 on Hebrew pages. Each page preloads the two files it
   paints first with (see fontLinks()). Frank Ruhl Libre 700 serves 700-900. */
@font-face{font-family:'Assistant';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/assistant-400-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/assistant-400-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:'Assistant';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/assistant-400-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:'Assistant';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/assistant-600-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/assistant-600-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:'Assistant';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/assistant-600-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:'Assistant';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/assistant-700-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/assistant-700-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:'Assistant';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/assistant-700-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:'Assistant';font-style:normal;font-weight:800;font-display:optional;src:url('/fonts/assistant-800-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:800;font-display:optional;src:url('/fonts/assistant-800-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:'Assistant';font-style:normal;font-weight:800;font-display:optional;src:url('/fonts/assistant-800-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:'Playfair Display';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/playfair-display-600-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:'Playfair Display';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/playfair-display-600-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:'Playfair Display';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/playfair-display-700-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:'Playfair Display';font-style:normal;font-weight:700;font-display:optional;src:url('/fonts/playfair-display-700-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:'Playfair Display';font-style:normal;font-weight:800;font-display:optional;src:url('/fonts/playfair-display-800-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:'Playfair Display';font-style:normal;font-weight:800;font-display:optional;src:url('/fonts/playfair-display-800-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:'Frank Ruhl Libre';font-style:normal;font-weight:700 900;font-display:optional;src:url('/fonts/frank-ruhl-libre-700-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700 900;font-display:optional;src:url('/fonts/frank-ruhl-libre-700-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}
html[lang="he"]{--serif:'Frank Ruhl Libre','Playfair Display',Georgia,serif}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:var(--lh-body)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* No colour here on purpose: heroes and dark bands inherit white. Components set indigo themselves. */
h1,h2,h3{font-family:var(--serif);line-height:var(--lh-tight);font-weight:800;overflow-wrap:break-word}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
/* Hidden ABOVE the page, not off to the left: in a right-to-left document
   a large negative left offset is inside the scrollable area, and every Hebrew page was
   11,264px wide — a sideways scrollbar, and a blank first screen in some
   browsers. Nothing scrolls upward past the top, so -100px hides it in both
   directions. */
.skip{position:absolute;top:-100px;inset-inline-start:12px}
.skip:focus{top:12px;z-index:99;background:#fff;padding:10px 16px;border:2px solid var(--purple)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Directional glyphs: logical properties do not mirror an arrow, and → ← are
   not bidi-mirrored characters (› ‹ are, the browser flips those itself).
   Wrap any → or ← in <span class="arr"> and it flips in RTL. */
.arr{display:inline-block}
[dir="rtl"] .arr{transform:scaleX(-1)}

/* ── Header + nav ─────────────────────────────────────────────────────────
   The brand may shrink and the language <select> may not: at 390px the old
   fixed 1.6rem name plus 22px gutters pushed the select 2px past the edge. */
header.top{background:#fff;border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s3);min-width:0;flex:0 1 auto}
.brand svg{flex:0 0 auto}
.brand .name{font-family:var(--serif);font-size:min(clamp(1.2rem,4.4vw,1.6rem),5.4vw);font-weight:800;color:#33334a;line-height:1.05;white-space:nowrap;min-width:0}
.brand .name small{display:block;font-family:var(--sans);font-size:.67rem;letter-spacing:.13em;
  font-weight:700;color:var(--purple);text-transform:uppercase;margin-top:2px;white-space:normal}
.top .spacer{flex:1 1 0;min-width:4px}
.langsel{flex:0 0 auto;font:inherit;font-size:var(--fs-sm);font-weight:700;min-height:44px;padding:8px 12px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);cursor:pointer;max-width:46vw}
@media(max-width:480px){.brand{gap:var(--s2)}.brand svg{width:34px;height:34px}.langsel{padding:8px 8px;max-width:38vw}}

nav.bar{background:var(--indigo);position:sticky;top:0;z-index:50}
nav.bar .wrap{display:flex;align-items:center;gap:4px;min-height:54px;flex-wrap:wrap}
nav.bar a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:#fff;font-weight:700;font-size:.95rem;opacity:.92;padding:10px 12px;border-radius:var(--r-sm)}
nav.bar a:hover,nav.bar a:focus{opacity:1;background:rgba(255,255,255,.12)}
nav.bar a:focus-visible{outline-offset:-3px}
nav.bar a.on{background:var(--purple);opacity:1}

/* ── Sections, headings, buttons ──────────────────────────────────────── */
section{padding-block:clamp(44px,6vw,60px)}
section.soft{background:var(--soft)}
.sec-head{margin-bottom:var(--s6)}
.sec-head h2{font-size:var(--fs-h2);color:var(--indigo)}
.sec-head p{color:var(--gray);margin-top:6px;font-size:var(--fs-md)}
.sec-foot{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--purple);color:#fff;
  font-weight:800;padding:12px 26px;border-radius:var(--r-md);text-align:center;line-height:1.25;border:2px solid var(--purple);cursor:pointer;font:inherit;font-weight:800}
.btn:hover{background:var(--purple-hover);border-color:var(--purple-hover)}
.btn.ghost{background:transparent;color:var(--purple)}
.btn.ghost:hover{background:var(--purple);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1c1608}
.btn.gold:hover{background:#b3760a;border-color:#b3760a}

/* WhatsApp deals CTA — one component, rendered by waCta() on the homepage, deal pages and guides */
.wa{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-inline-start:6px solid var(--green);
  border-radius:var(--r-md);padding:var(--s5) var(--s6);margin-block:var(--s7)}
.wa-ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.wa-ic svg{width:30px;height:30px;fill:currentColor}
.wa-txt{flex:1 1 300px;min-width:0}
.wa-txt h2,.wa-txt h3{margin:0 0 4px;font-size:var(--fs-lg);color:var(--indigo)}
.wa-txt p{margin:0;color:var(--gray);font-size:var(--fs-sm)}
.wa .btn{background:var(--green);border-color:var(--green);flex:none}
.wa .btn:hover{background:#0a6541;border-color:#0a6541}
.wa-narrow{margin-inline:auto;padding-inline:var(--gutter);max-width:720px}
.wa-narrow.w760{max-width:760px}
@media (max-width:560px){ .wa{padding:var(--s4);gap:var(--s3) var(--s4)} .wa-txt{flex:1 1 0} .wa .btn{width:100%} }

/* Page header band (guides index, categories, places, info pages) */
.phead{background:var(--indigo);color:#fff;padding-block:clamp(34px,5vw,48px) clamp(28px,4vw,38px)}
.phead h1{color:#fff;font-size:var(--fs-h1)}
.phead p{opacity:.92;margin-top:10px;max-width:720px;font-size:var(--fs-md)}
.phead .count{display:inline-block;margin-top:14px;font-weight:800;font-size:var(--fs-sm);opacity:.9}

/* Breadcrumbs — one rule for every template (was three drifting copies) */
nav.crumbs{background:var(--soft);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--gray)}
nav.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-block:var(--s3);white-space:normal}
nav.crumbs a{color:var(--purple);font-weight:700;padding:10px 6px;display:inline-block}
/* U+203A is a bidi-mirrored character: the browser already flips it in RTL, so no transform here. */
nav.crumbs .sep{color:var(--muted)}
nav.crumbs [aria-current]{color:var(--ink);font-weight:700}

/* Tags and chips */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 12px;border-radius:var(--r-pill);
  background:var(--soft-2);color:var(--indigo);font-weight:700;font-size:var(--fs-xs);letter-spacing:.02em}
.tag.green{background:var(--green);color:#fff}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);color:var(--ink);background:#fff;cursor:pointer;font-family:inherit}
.chip:hover,.chip:focus-visible{border-color:var(--purple);color:var(--purple)}
.chip.on,.chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--s6)}
.card{display:block;min-width:0}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:#dfe3ee;border-radius:var(--r-md)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .meta{color:var(--purple);font-weight:800;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.06em;margin-top:14px}
.card .meta .hasit{display:inline-block;background:var(--green);color:#fff;border-radius:var(--r-pill);padding:2px 9px;font-weight:700}
.card h3{color:var(--indigo);font-size:var(--fs-lg);font-weight:700;margin:6px 0;line-height:1.25}
.card:hover h3{color:var(--purple)}
.card p{color:var(--gray);font-size:var(--fs-base)}
.card .chk{font-size:var(--fs-xs);color:var(--gray);margin-top:2px}
.card .chk-warn{font-weight:700}
.card .price{margin-top:10px;font-family:var(--serif);font-size:1.45rem;font-weight:800;color:var(--ink)}
.card .price small{font-family:var(--sans);font-size:var(--fs-xs);color:var(--gray);font-weight:700}
.card .more{display:inline-block;margin-top:10px;color:var(--purple);font-weight:800;font-size:var(--fs-sm)}
.card:hover .more{text-decoration:underline}

/* ── Editorial components (guides, posts, places) ──────────────────────── */
.prose{max-width:760px}
.prose p,.prose li{font-size:var(--fs-md);line-height:1.7}
.prose p+p{margin-top:1.1em}
.prose h2{color:var(--indigo);font-size:var(--fs-xl);margin-block:1.6em .6em}
.prose h3{color:var(--indigo);font-size:var(--fs-lg);margin-block:1.3em .5em}
.prose ul,.prose ol{padding-inline-start:1.3em;margin-block:.8em 1.2em}
.prose li+li{margin-top:.35em}
.prose a{color:var(--purple);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.note{background:var(--soft);border-inline-start:5px solid var(--gold);padding:18px 22px;margin-block:1.4em;
  border-start-end-radius:var(--r-md);border-end-end-radius:var(--r-md);font-size:var(--fs-base)}
.note b,.note strong{color:var(--indigo)}
.tablewrap{overflow-x:auto;margin-block:1.4em;border:1px solid var(--line);border-radius:var(--r-md)}
.tablewrap table,table.tbl{border-collapse:collapse;width:100%;font-size:var(--fs-base);line-height:1.45}
.tablewrap th,.tablewrap td,table.tbl th,table.tbl td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap th,table.tbl th{background:var(--soft-2);color:var(--indigo);font-weight:800;font-size:var(--fs-sm)}
.tablewrap tr:last-child td{border-bottom:0}
.sources{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);color:var(--gray);font-size:var(--fs-sm)}
.sources h2,.sources h3{font-family:var(--sans);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.sources ol{padding-inline-start:1.4em}
.sources li+li{margin-top:6px}
.sources a{color:var(--purple);text-decoration:underline;overflow-wrap:anywhere}
.checked{font-size:var(--fs-sm);color:var(--muted);font-weight:700}

/* Photography: grids, inline figures, credits */
.vg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--s4);margin-block:1.4em}
figure.vc,figure.vi{margin:0;min-width:0}
figure.vi{margin-block:1.6em}
figure.vc img,figure.vi img{width:100%;height:auto;border-radius:var(--r-md);background:#dfe3ee}
figure.vc img{aspect-ratio:4/3;object-fit:cover}
figcaption,.credit{font-size:var(--fs-sm);color:var(--gray);margin-top:8px;line-height:1.45}
.credit a,figcaption a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* Fares / deals box at the end of a guide (kept everywhere, restyled only) */
.guide-deals{margin-top:var(--s7);padding:clamp(20px,3vw,32px);background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg)}
.guide-deals h2,.guide-deals h3{color:var(--indigo);font-size:var(--fs-xl);margin-bottom:6px}
.guide-deals>p{color:var(--gray);margin-bottom:var(--s4)}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:var(--s3)}
a.gd{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;min-width:0;box-shadow:var(--sh-1)}
a.gd:hover,a.gd:focus-visible{border-color:var(--purple);box-shadow:var(--sh-2)}
.gd-line{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--purple)}
.gd-route{font-family:var(--serif);font-size:var(--fs-md);font-weight:700;color:var(--indigo);margin-top:4px;line-height:1.3}
.gd-meta{color:var(--gray);font-size:var(--fs-sm);margin-top:4px}
.gd-price{font-family:var(--serif);font-weight:800;font-size:var(--fs-lg);color:var(--ink);margin-top:6px}
a.gd-all{margin-top:var(--s4)}

/* Dark editorial band (homepage) */
.band{background:var(--indigo);color:#fff}
.band .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:center;padding-block:58px}
.band h2{color:#fff;font-size:var(--fs-h2)}
.band p{opacity:.92;margin-top:10px}
.band ul{list-style:none;display:grid;gap:14px}
.band li{display:flex;gap:12px;align-items:flex-start;opacity:.96;font-size:var(--fs-base)}
.band li b{color:var(--gold-soft)}
.band li::before{content:'';flex:0 0 auto;width:9px;height:9px;margin-top:.55em;border-radius:50%;background:var(--gold-soft)}

footer{background:var(--indigo-dark);color:#d6d7ea;padding-block:44px;text-align:center}
footer .name{font-family:var(--serif);font-size:1.45rem;color:#fff;font-weight:700}
footer .links{margin:14px 0;display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap}
footer .links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-inline:6px;color:#fff;opacity:.9;font-weight:700}
footer .links a:hover{opacity:1;text-decoration:underline}
footer .fine{font-size:var(--fs-sm);opacity:.8;margin-top:10px}

/* Compact hero: .phead is shared by deals/places/info-pages/trip-page.
   Only deals render .price/.pp/.dflags inside it, so those three rules are
   a no-op everywhere else - the padding shrink is the only part that also
   tightens places/info/trip headers, which is a deliberate, wanted side
   effect of one shared component rather than a deal-page-only patch. */
.phead{padding-block:clamp(14px,2vw,18px) clamp(12px,1.8vw,16px)}
.phead h1{margin:0}
.phead .price{font-size:clamp(1.6rem,3.4vw,2.1rem);margin:var(--s2) 0 0}
.phead .pp{font-size:var(--fs-sm)}
.phead .pchk{font-size:var(--fs-sm);opacity:.92;margin-top:2px}
.phead .pchk-warn{font-weight:700}
.phead .kicker{margin:0}
.dflags{margin-top:var(--s3)}

@media(max-width:820px){
  .band .wrap{grid-template-columns:1fr;gap:24px}
  nav.bar a{padding:10px 9px;font-size:.9rem}
  .sec-head{margin-bottom:var(--s5)}
  .phead{padding-block:12px 10px}
  .phead .price{font-size:clamp(1.45rem,6vw,1.8rem);margin-top:6px}
  .dflags{margin-top:var(--s2)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* ══ family: home — body.p-home ══ */

body.p-home .hero{position:relative;min-height:min(74vh,560px);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:52px 22px;background:#7fa8c4 url('../images/bg/western-mediterranean.jpg') center 55%/cover no-repeat}
/* The hero is a background image, so <picture> cannot reach it. The JPEG above
   stays the declaration everything falls back to; only a browser that both
   understands image-set() and can decode WebP ever overrides it, and it
   overrides background-image alone so the position and sizing above still
   apply. */
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
  body.p-home .hero{background-image: image-set(url('../images/bg/western-mediterranean.webp') type('image/webp'))}
}
/* ── The scrim ────────────────────────────────────────────────────────────
   A dark gradient over the WHOLE photograph, instead of a panel behind the
   text. The photo stays visible — which a box does not allow — and the text is
   readable wherever it lands.

   The stops are measured, not chosen. tracker/measure-scrim.js samples the
   hero where the text actually sits (a 12x6 grid, because contrast fails on
   the brightest patch behind a letter, not on the average) and composites the
   scrim over it:

     white on the bare photo          worst 1.31:1   ← why a panel existed
     the classic .68/.25/.10 scrim    worst 2.27:1   ← still fails
     these stops                      worst 5.41:1 heading, 7.92:1 paragraph

   The classic values assume the text sits at the BOTTOM, where that gradient
   is .68. This hero centres its content, where the same gradient is only .25 —
   so the curve is shifted up to put the weight where the words are. The top of
   the frame is .32 and the photograph reads through it clearly.

   Re-measure before changing the hero image:
     node tracker/measure-scrim.js images/bg/<new>.jpg 0.74 0.56 0.32 */
body.p-home .hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,12,35,.74) 0%,rgba(8,12,35,.56) 55%,rgba(8,12,35,.32) 100%)}
/* The words sit on their own surface, so contrast no longer depends on which
   part of the photograph happens to be behind them. */
/* hero-panel */
body.p-home .hero .inner{position:relative;z-index:1;color:#fff;max-width:760px;min-width:0;width:100%;
  padding:clamp(28px,4vw,46px) clamp(24px,4vw,52px)}
/* The shadow is not what makes this legible — the scrim is, and it is measured
   above. This is for the edge case the average cannot see: a letter that lands
   on a bright highlight inside an otherwise dark patch. */
body.p-home .hero h1,body.p-home .hero p{text-shadow:0 2px 14px rgba(0,0,0,.45)}
body.p-home .hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.05rem,5vw,3.25rem);line-height:1.1}
body.p-home .hero p{font-size:clamp(1.02rem,1.6vw,1.18rem);margin:14px auto 24px;max-width:600px;color:#fff}
body.p-home .hsearch{display:flex;max-width:580px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.34)}
body.p-home .hsearch input{flex:1 1 0;min-width:0;width:100%;border:0;padding:16px 18px;font:inherit;font-size:1rem;color:#333;outline:none}
body.p-home .hsearch button{flex:0 0 auto;white-space:nowrap;border:0;background:var(--purple);color:#fff;font:inherit;font-weight:800;padding:0 26px;cursor:pointer}
body.p-home .hsearch button:hover{background:#7d35a8}
body.p-home .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
body.p-home .rcard{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3}
body.p-home .rcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
body.p-home .rcard:hover img{transform:scale(1.06)}
body.p-home .rcard span{position:absolute;inset-inline:0;bottom:0;padding:34px 16px 14px;color:#fff;font-weight:800;
  font-size:1.1rem;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72))}
/* Quick filters and trust strip. Solid pills on the photo — a translucent
   panel would cover the picture, and the solid fill is what keeps the words
   readable wherever they land. 44px tall: the audience is 50+. */
body.p-home .qf{margin:18px auto 0;display:flex;flex-direction:column;gap:10px;align-items:center}
body.p-home .qrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
body.p-home .qchip{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;border-radius:999px;
  background:#fff;color:var(--purple);font-weight:700;font-size:.98rem;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
body.p-home .qchip:hover,body.p-home .qchip:focus-visible{background:var(--purple);color:#fff}
body.p-home .trust{list-style:none;margin:16px auto 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
body.p-home .trust li{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  background:#0d7a4f;color:#fff;font-weight:700;font-size:.84rem}
body.p-home .trust li::before{content:'✓';font-weight:800}
@media(max-width:820px){body.p-home .hero{min-height:auto;padding:34px 16px}
  body.p-home .hero .inner{padding:26px 20px}}


/* ══ family: deals-index — body.p-deals-index ══ */

body.p-deals-index .tools{display:flex;gap:var(--s3);flex-wrap:wrap;margin:var(--s6) 0 var(--s7);align-items:center}
body.p-deals-index .tools input{flex:1;min-width:230px;min-height:48px;font:inherit;font-size:var(--fs-base);padding:0 var(--s4);border:2px solid var(--line);border-radius:var(--r-md);color:var(--ink);background:#fff}
body.p-deals-index .chip-it[aria-pressed="true"]{background:var(--green);border-color:var(--green)}
body.p-deals-index .count{color:var(--gray);font-weight:700;font-size:var(--fs-sm)}
body.p-deals-index .sortbox{display:flex;align-items:center;gap:var(--s2)}
body.p-deals-index .sortbox label{font-weight:700;font-size:var(--fs-sm);color:var(--gray);white-space:nowrap}
body.p-deals-index .sortbox select{min-height:48px;font:inherit;font-size:var(--fs-base);padding:0 var(--s4);border:2px solid var(--line);border-radius:var(--r-md);color:var(--ink);background:#fff;max-width:100%}
body.p-deals-index .sortbox select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (min-width:900px){
  /* the filter bar stays in view under the (sticky) nav while the 600+ cards scroll; on phones the wrapped bar is too tall to pin */
  body.p-deals-index .tools{position:sticky;top:54px;z-index:40;background:#fff;margin:var(--s4) 0 var(--s5);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  body.p-deals-index .sortbox{flex:1 1 100%}
  body.p-deals-index .sortbox select{flex:1;min-width:0}
}
body.p-deals-index .none{display:none;padding:var(--s7) 0;color:var(--gray);font-size:var(--fs-lg)}


/* ══ family: guides — body.p-guides ══ */

body.p-guides .catnav{padding:22px 0 6px}
body.p-guides .catnav .wrap{display:flex;flex-wrap:wrap;gap:10px}
body.p-guides .catnav a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border:1px solid var(--line);
  border-radius:999px;font-weight:700;font-size:.92rem;color:var(--ink);background:#fff}
body.p-guides .catnav a:hover{border-color:var(--purple);color:var(--purple)}
body.p-guides .catnav a span{font-size:.8rem;font-weight:800;color:var(--gray)}
body.p-guides main > section{padding-top:34px}
body.p-guides main > section + section{border-top:1px solid var(--line)}


/* ══ family: category — body.p-category ══ */



/* ══ family: article — body.p-article ══ */

/* 44px hit area for the category eyebrow link without moving the layout */
body.p-article .kicker a{display:inline-block;padding-block:13px;margin-block:-13px}
body.p-article .ahead{background:var(--soft);border-bottom:1px solid var(--line);padding:44px 0 38px}
body.p-article .ahead .kicker{color:var(--purple);font-weight:800;font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase}
body.p-article .ahead h1{color:var(--indigo);font-size:var(--fs-h1);line-height:1.12;margin:10px 0 0;max-width:20ch}
body.p-article .ahead .dek{font-size:var(--fs-md);color:var(--gray);margin-top:14px;max-width:62ch}
body.p-article .ahead .byline{margin-top:18px;font-size:var(--fs-sm);color:var(--gray);display:flex;gap:14px;flex-wrap:wrap}
body.p-article .ahead .byline b{color:var(--ink)}
body.p-article .ahead .kicker a{color:inherit;text-decoration:underline;text-underline-offset:3px}
body.p-article .ahero{margin:0}
body.p-article .ahero img{width:100%;max-height:460px;object-fit:cover}
body.p-article article{margin:0 auto;padding:48px 22px 10px}
body.p-article article strong{font-weight:800}
body.p-article article p{margin:0 0 18px}
body.p-article article li{margin-bottom:9px}
body.p-article .vis-grid{max-width:960px;margin:30px auto 0;padding:0 22px}
body.p-article .vis-grid h2{color:var(--indigo);font-size:var(--fs-xl);margin:0 0 16px}
body.p-article .vc figcaption{display:flex;flex-direction:column;gap:6px}
body.p-article .vc h3{color:var(--indigo);font-size:var(--fs-base);margin:0;line-height:1.3}
body.p-article .vc h3 a{color:var(--purple)}
body.p-article .vc p{font-size:var(--fs-sm);color:var(--ink);margin:0;line-height:1.5}
body.p-article .guide-deals{max-width:760px;margin-inline:auto}
body.p-article .sources{max-width:760px;margin-inline:auto;padding-inline:22px}
body.p-article .backlink{max-width:760px;margin:0 auto;padding:30px 22px 60px}


/* ══ family: deal — body.p-deal ══ */

body.p-deal .phead .kicker{color:var(--gold-soft);font-weight:800;font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;margin:0}
body.p-deal .phead .price{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.1rem);font-weight:800;color:var(--gold-soft);margin:var(--s2) 0 0}
body.p-deal .phead .pp{opacity:.85;font-size:var(--fs-sm)}
body.p-deal .dflags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
@media(max-width:820px){
  body.p-deal .phead .price{font-size:clamp(1.45rem,6vw,1.8rem);margin-top:6px}
  body.p-deal .dflags{margin-top:var(--s2)}
}
/* Photo-first hero: the destination photograph IS the header band. Text sits on it under a bottom-weighted scrim + text-shadow
   (no opaque box). The indigo behind it only shows while the image loads; the band is exactly as tall as the photo, so there is
   no empty strip. Deals without a usable photo keep the compact indigo band (.phead without .photo). */
body.p-deal .phead.photo{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(380px,44vw,520px);
  padding-block:clamp(120px,16vw,200px) clamp(22px,3vw,34px)}
body.p-deal .phead.photo picture{position:absolute;inset:0;z-index:-2;display:block}
body.p-deal .phead.photo .phead-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 45%}
body.p-deal .phead.photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(var(--sd,90deg),rgba(18,15,52,.86) 0%,rgba(18,15,52,.7) 42%,rgba(18,15,52,.18) 78%,rgba(18,15,52,.05) 100%),
    linear-gradient(to top,rgba(18,15,52,.78) 0%,rgba(18,15,52,.3) 45%,rgba(18,15,52,0) 70%)}
body.p-deal .phead.photo:dir(rtl){--sd:270deg}
body.p-deal .phead.photo>.wrap{position:relative;width:100%}
body.p-deal .phead.photo h1,body.p-deal .phead.photo .kicker,body.p-deal .phead.photo .price,body.p-deal .phead.photo .pp,body.p-deal .phead.photo .phead-fact{text-shadow:0 1px 3px rgba(0,0,0,.65),0 2px 18px rgba(0,0,0,.5)}
body.p-deal .phead.photo h1{overflow-wrap:anywhere;hyphens:auto}
body.p-deal .phead.photo .phead-fact{opacity:.96}
body.p-deal .phead.photo .phead-cta{box-shadow:0 2px 14px rgba(0,0,0,.35)}
body.p-deal .acts{max-width:720px;margin:0 auto;padding:var(--s7) var(--gutter) 0;display:grid;gap:var(--s3)}
body.p-deal .acts .btn{width:100%}
body.p-deal .acts .btn small{display:block;font-weight:600;opacity:.85;font-size:var(--fs-xs);margin-top:3px}
body.p-deal .rel-guides{margin-top:var(--s5);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--soft)}
body.p-deal .rel-guides h3{font-size:var(--fs-sm);font-weight:800;margin-bottom:var(--s2);color:var(--indigo);text-transform:uppercase;letter-spacing:.04em}
body.p-deal .rel-guides ul{list-style:none;margin:0;padding:0}
body.p-deal .rel-guides li{border-top:1px solid var(--line)}
body.p-deal .rel-guides li:first-child{border-top:0}
body.p-deal .rel-guides a{display:flex;align-items:center;min-height:44px;color:var(--purple);font-weight:700}
body.p-deal .dnote{max-width:720px;margin:var(--s4) auto 0;padding:0 var(--gutter);color:var(--gray);font-size:var(--fs-sm);text-align:center}
body.p-deal .dnote a{color:var(--purple);font-weight:700}
body.p-deal .no-direct-link{background:var(--soft);border:1px solid var(--line);border-inline-start:4px solid var(--gray);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s4) var(--s5);display:grid;gap:var(--s3)}
body.p-deal .no-direct-link p{color:var(--ink);font-weight:600;margin:0}
body.p-deal .no-direct-link .btn{width:100%}
body.p-deal .facts{max-width:720px;margin:var(--s7) auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
body.p-deal .fact{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);min-width:0;overflow-wrap:anywhere}
body.p-deal .fact b{display:block;color:var(--purple);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;font-weight:800}
body.p-deal .fact span{color:var(--ink);font-weight:700;font-size:var(--fs-md)}
body.p-deal .altbox{max-width:720px;margin:var(--s6) auto 0;padding:0 var(--gutter)}
body.p-deal .altbox .inner{background:var(--soft);border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s4) var(--s5)}
body.p-deal .altbox b{color:var(--indigo)}
body.p-deal .altbox p{color:var(--gray);font-size:var(--fs-sm);margin:4px 0 var(--s3)}
body.p-deal .altcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);min-height:44px}
body.p-deal .altcard:hover{border-color:var(--purple)}
body.p-deal .altcard .l{color:var(--purple);font-weight:800;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em}
body.p-deal .altcard .r{font-family:var(--serif);font-size:var(--fs-lg);font-weight:700;color:var(--indigo);margin:2px 0}
body.p-deal .altcard .m{color:var(--gray);font-size:var(--fs-sm)}
body.p-deal .altcard .p{font-family:var(--serif);font-size:var(--fs-xl);font-weight:800;margin-top:6px}
body.p-deal .also{max-width:720px;margin:var(--s7) auto 0;padding:0 var(--gutter)}
body.p-deal .also h2{color:var(--indigo);font-size:var(--fs-xl);margin:0 0 var(--s3)}
body.p-deal .dback{max-width:720px;margin:var(--s7) auto 60px;padding:0 var(--gutter)}
body.p-deal .dai{max-width:720px;margin:var(--s4) auto 0;padding:0 var(--gutter);color:var(--gray);font-size:var(--fs-xs);text-align:center}
@media(max-width:820px){body.p-deal .phead.photo{min-height:clamp(340px,92vw,420px);padding-block:clamp(90px,26vw,120px) 0}
  /* on a phone the text stack is tall and its height varies (long titles), so the scrim follows the text block instead of the photo box */
  body.p-deal .phead.photo::before{display:none}
  body.p-deal .phead.photo>.wrap{padding-top:64px;padding-bottom:22px;background:linear-gradient(to bottom,rgba(18,15,52,0) 0,rgba(18,15,52,.9) 64px,rgba(18,15,52,.94) 100%)}}
/* The compact band still needs to earn its space: a real fact (departure
   season + embarkation port, both genuine per-deal fields - never invented
   copy) plus a booking CTA a reader does not have to scroll for. This row
   is its own flex container, not .wrap itself - .wrap already stacks the
   kicker/h1/price/pp vertically and turning THAT into a flex row would
   break it. */
body.p-deal .phead-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s3)}
body.p-deal .phead-fact{margin:0;opacity:.85;font-size:var(--fs-sm)}
body.p-deal .phead-cta{margin-inline-start:auto}
@media(max-width:820px){
  body.p-deal .phead-cta{margin-inline-start:0;width:100%}
}


/* ══ family: places — body.p-places ══ */
body.p-places .phead .sub{color:#fff;opacity:.92;font-size:var(--fs-md);margin-top:10px}
body.p-places main .wrap{max-width:900px}
body.p-places main h2{font-family:var(--serif);color:var(--indigo);font-size:var(--fs-xl);margin:34px 0 14px}
body.p-places .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
body.p-places .pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;display:flex;flex-direction:column}
body.p-places .pcard:hover{border-color:var(--purple)}
body.p-places .pimg{position:relative;height:160px;overflow:hidden;background:var(--soft)}
body.p-places .pimg img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
/* Sits under the photo and shows through only when the photo is missing or
   fails to load — which is what it was always for. */
body.p-places .pemoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;opacity:.45;z-index:0}
body.p-places .pbadge{position:absolute;top:8px;left:8px;background:rgba(28,25,72,.85);color:#fff;font-size:1rem;padding:3px 9px;border-radius:9999px}
body.p-places .pbody{padding:13px 15px;display:flex;flex-direction:column;flex:1}
body.p-places .pname{font-family:var(--serif);font-weight:700;color:var(--indigo);font-size:var(--fs-lg)}
body.p-places .pdesc{color:var(--gray);font-size:var(--fs-base);margin:5px 0}
body.p-places .pdate{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--gold);font-weight:700;font-size:var(--fs-sm);background:#fff}
body.p-places .cbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
body.p-places .cb{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm);font-weight:700;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--purple);background:#fff}
body.p-places .cb:hover{border-color:var(--purple)}
body.p-places .back{margin:36px 0 60px}


/* ══ family: trip — body.p-trip ══ */

body.p-trip{font-family:var(--sans)}
body.p-trip > .wrap{max-width:760px;margin:0 auto;padding:0 20px 60px}
body.p-trip .actions{display:flex;justify-content:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s5) 0}
body.p-trip .btn.ghost.btn-clear{color:#b91c1c;border-color:#e6b3b3}
body.p-trip .btn.ghost.btn-clear:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
body.p-trip .empty{background:var(--soft);border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:40px 20px;text-align:center;color:var(--gray);font-size:var(--fs-md)}
body.p-trip .item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:13px 16px;margin:10px 0}
body.p-trip .item .num{background:var(--purple);color:#fff;font-weight:800;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--fs-sm)}
body.p-trip .item .name{flex:1;font-weight:700;color:var(--ink);font-size:var(--fs-base)}
body.p-trip .item .added{color:var(--gray);font-size:var(--fs-xs);white-space:nowrap}
body.p-trip .item .del{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#dc2626;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:.9rem;flex-shrink:0}
body.p-trip .item .link{color:var(--purple);text-decoration:none;font-weight:700;font-size:var(--fs-sm);white-space:nowrap}
@media print{body.p-trip header.top,body.p-trip nav.bar,body.p-trip footer,body.p-trip .actions,body.p-trip .item .del,body.p-trip .note,body.p-trip .empty{display:none!important}body.p-trip .item{break-inside:avoid;box-shadow:none;border:1px solid #ccc}}


/* ══ family: flights — body.p-flights ══ */

body.p-flights .fl-wrap{max-width:960px;margin:0 auto;padding:var(--s6) var(--gutter) var(--s8)}
body.p-flights .fl-intro{color:var(--gray);max-width:680px;margin-bottom:var(--s6)}
body.p-flights .fl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
body.p-flights .fl-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);background:var(--soft)}
body.p-flights .fl-card h3{margin:0 0 4px;color:var(--indigo);font-size:var(--fs-lg)}
body.p-flights .fl-card .p{font-family:var(--serif);font-weight:800;font-size:var(--fs-xl);color:var(--purple);margin:6px 0}
body.p-flights .fl-card .m{color:var(--gray);font-size:var(--fs-sm);margin-bottom:var(--s3)}
body.p-flights .fl-card a.btn{width:100%}


/* ══ family: post — body.p-post ══ */

body.p-post{font-family:var(--sans);background:var(--bg);color:var(--ink);margin:0;line-height:1.7}
body.p-post > .wrap{max-width:880px;margin:0 auto;padding:0 20px 60px}
body.p-post .hero{position:relative;height:340px;overflow:hidden;background:var(--soft-2)}
body.p-post .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Scrim measured with tracker/measure-scrim.js against the actual hero photos
   (day-1.jpg of the Alaska, Mediterranean and river-route posts): the
   homepage's own stops already clear 4.5:1 on the worst sampled patch of all
   three (5.58:1 to 8.53:1 worst-case), so they are used as-is rather than
   darkened further. */
body.p-post .hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,12,35,.74) 0%,rgba(8,12,35,.56) 55%,rgba(8,12,35,.32) 100%)}
body.p-post .hero .tag{position:absolute;top:16px;inset-inline-start:16px;z-index:1;background:var(--indigo);color:#fff;font-weight:800;font-size:var(--fs-xs);padding:6px 14px;border-radius:var(--r-pill)}
body.p-post .hero-inner{position:absolute;inset-inline:0;bottom:0;z-index:1;max-width:880px;margin:0 auto;padding:0 20px 20px}
body.p-post .hero h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5);font-family:var(--serif);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:0 0 4px}
body.p-post .hero .sub{color:#fff;opacity:.96;text-shadow:0 1px 10px rgba(0,0,0,.45);font-weight:700;margin:0}
body.p-post .trip{background:#fff;border-radius:18px;padding:22px;font-size:1.05rem;box-shadow:0 10px 40px rgba(0,0,0,0.35)}
body.p-post .trip .trip-label{font-weight:800;color:#0e5a8a;margin-bottom:6px}
body.p-post .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:22px 0}
body.p-post .gallery img{width:100%;height:150px;object-fit:cover;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
body.p-post .day-img{margin-bottom:10px;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.35)}
body.p-post .day-img img{width:100%;height:180px;object-fit:cover;display:block}
body.p-post .days{background:rgba(255,255,255,0.97);border-radius:16px;padding:18px}
body.p-post .day{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #e2e8f0}
body.p-post .day:last-child{border-bottom:none}
body.p-post .day-num{min-width:70px;padding-top:2px}
body.p-post .day-body{flex:1}
body.p-post .port{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
body.p-post .port h3{font-family:var(--serif);color:var(--indigo);font-size:var(--fs-lg);font-weight:700;margin:0}
body.p-post .act{color:#475569;font-size:var(--fs-base);margin:3px 0 8px}
body.p-post .cat{color:#475569;font-size:var(--fs-base);margin:6px 0;padding-left:4px;border-left:3px solid #e2e8f0}
body.p-post .cat .ci{margin-right:4px}
body.p-post .pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
body.p-post .pic{background:#f1f5f9;border-radius:10px;overflow:hidden;border:1px solid #e2e8f0}
body.p-post .pic img{width:100%;height:92px;object-fit:cover;display:block}
body.p-post .pic-name{display:block;font-size:var(--fs-base);font-weight:700;color:var(--ink);padding:6px 8px;line-height:1.3}
body.p-post .pic-evt{background:#fffbeb;border-color:#fcd34d;padding:8px}
body.p-post .pic-emoji{font-size:1.1rem}
body.p-post .pic-date{color:#b45309;font-weight:700;font-size:var(--fs-sm)}
/* Save/info are the two most-repeated tap targets on the page (every place,
   food and event card) — the biggest single source of the smallTaps count,
   so these get real 44px boxes rather than the 26px icon-only buttons. */
body.p-post .pic-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:4px 6px;background:rgba(255,255,255,.6)}
body.p-post .save-btn{background:rgba(251,191,36,.15);border:1px solid rgba(217,119,6,.5);color:#b45309;border-radius:8px;width:44px;height:44px;font-size:1.05rem;cursor:pointer;line-height:1;transition:all .15s;flex-shrink:0}
body.p-post .save-btn:hover{background:rgba(251,191,36,.35)}
body.p-post .save-btn.saved{background:linear-gradient(135deg,#d97706,#fbbf24);color:#fff;border-color:#d97706}
body.p-post .pic-info{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:rgba(37,99,235,.1);border:1px solid rgba(96,165,250,.5);color:#1d4ed8;text-decoration:none;font-size:1rem;flex-shrink:0}
body.p-post .pic-info:hover{background:rgba(37,99,235,.25)}
body.p-post .trip-bar{position:sticky;top:0;z-index:60;background:linear-gradient(135deg,#0e5a8a,#1a75b3);color:#fff;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:.9rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.35)}
body.p-post .trip-bar a{color:#fde68a;text-decoration:none;font-weight:800}
body.p-post .trip-bar .trip-count{background:rgba(255,255,255,.2);border-radius:9999px;padding:2px 10px;font-size:.8rem}
body.p-post .place-link{display:inline-block;margin-left:8px;background:rgba(217,119,6,0.15);border:1px solid rgba(217,119,6,0.4);color:#fbbf24;font-size:var(--fs-sm);font-weight:700;padding:2px 12px;border-radius:9999px;text-decoration:none}
body.p-post .place-link:hover{background:rgba(217,119,6,0.3)}
body.p-post .cbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
body.p-post .cbtn{display:inline-block;background:#eef2f7;border:1px solid #cbd5e1;color:#0e5a8a;text-decoration:none;font-weight:700;font-size:0.8rem;padding:3px 14px;border-radius:9999px;transition:all .15s}
body.p-post .cbtn:hover{background:#0e5a8a;color:#fff;border-color:#0e5a8a}
body.p-post .cbtn-map{background:#e8f4fd;border-color:#7dd3fc;color:#0369a1}
body.p-post .cbtn-map:hover{background:#0369a1;border-color:#0369a1}
body.p-post .cbtn-web{background:#f0fdf4;border-color:#86efac;color:#166534}
body.p-post .cbtn-web:hover{background:#166534;border-color:#166534}
body.p-post .cbtn-mail{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
body.p-post .cbtn-mail:hover{background:#b91c1c;border-color:#b91c1c}
body.p-post .back{margin-top:26px;text-align:center}
body.p-post .back a{color:#93c5fd;text-decoration:none;font-weight:700}
body.p-post .info-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:14px}
body.p-post .info-links a{color:#93c5fd;text-decoration:none;font-weight:700;font-size:.85rem}
body.p-post .info-links a:hover{text-decoration:underline}
body.p-post .ai-note{margin:14px auto 0;max-width:520px;text-align:center;color:#94a3b8;font-size:.78rem}
/* Booking deals now render as shared a.gd cards inside .guide-deals (see
   SITE_CHROME.CSS) — only the CTA line and empty/note states are page-local. */
body.p-post .guide-deals .gd-cta{display:block;margin-top:8px;color:var(--purple);font-weight:800;font-size:var(--fs-sm)}
body.p-post .guide-deals .book-empty{color:var(--gray);text-align:center;padding:20px}
body.p-post .guide-deals .book-note{color:var(--gray);font-size:var(--fs-sm);text-align:center;margin:14px 0 0}
body.p-post .top-book{display:flex;width:100%;justify-content:center;margin:0 0 18px;font-size:1.05rem}
/* ═══ light theme for post pages ═══════════════════════════════════════ */
body.p-post .ad-slot{margin:18px 0}
body.p-post .ad-slot-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.06);border:1.5px dashed rgba(217,119,6,0.45);border-radius:14px;padding:12px 14px;text-decoration:none;color:inherit;transition:all .2s;position:relative}
body.p-post .ad-slot-card:hover{background:rgba(217,119,6,0.12);border-style:solid}
body.p-post .ad-slot-badge{position:absolute;top:-8px;left:12px;background:#d97706;color:#fff;font-size:9px;font-weight:800;letter-spacing:.5px;padding:1px 8px;border-radius:9999px}
body.p-post .ad-slot-icon{font-size:1.6rem;flex-shrink:0}
body.p-post .ad-slot-body{flex:1;display:flex;flex-direction:column}
body.p-post .ad-slot-title{font-weight:800;color:#fbbf24;font-size:0.95rem}
body.p-post .ad-slot-text{color:#cbd5e1;font-size:0.8rem;line-height:1.4}
body.p-post .ad-slot-cta{color:#7dd3fc;font-weight:700;font-size:0.8rem;white-space:nowrap}
@media(max-width:600px){body.p-post .ad-slot-card{flex-wrap:wrap}body.p-post .ad-slot-cta{white-space:normal}}
@media(max-width:600px){body.p-post .day{flex-direction:column;gap:4px}body.p-post .day-num{text-align:left}body.p-post .hero{height:240px}}
/* cruise journey bg (static per-route destination image) */
body.p-post #cruiseBg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
body.p-post #cruiseBg .cb-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1;animation:cbKen 22s ease-in-out infinite alternate}
@keyframes cbKen{from{transform:scale(1)}to{transform:scale(1.06)}}
body.p-post #cruiseBg .cb-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,15,28,.78) 0%,rgba(3,15,28,.5) 40%,rgba(3,15,28,.66) 100%)}
@media(prefers-reduced-motion:reduce){body.p-post #cruiseBg .cb-layer{animation:none}}
/* .ad-slot-cta never had a light-theme counterpart, so it kept #7dd3fc — pale
   blue on white, and the single least readable thing on the page. */
body.p-post .ad-slot-cta{color:var(--purple)}
body.p-post .ad-slot-card{background:#fff;border:1px solid var(--line);border-radius:10px}
body.p-post .ad-slot-card:hover{border-color:var(--purple);background:#fff}
body.p-post .ad-slot-badge{background:var(--gold)}

/* ═══ Voyageworthy shell — the cards below were always light, only the
   surrounding page was dark. These overrides bring it into the site palette
   without touching the day-by-day styling that works. ═══ */
body.p-post{background:var(--bg);color:var(--ink)}
body.p-post > .wrap{max-width:880px}
body.p-post h2{font-family:var(--serif);color:var(--indigo);font-size:1.5rem}
body.p-post .trip{background:var(--soft);border:1px solid var(--line);box-shadow:none;border-radius:12px}
body.p-post .trip .trip-label{color:var(--indigo)}
body.p-post .days{background:#fff;border:1px solid var(--line);border-radius:12px}
body.p-post .day-img,body.p-post .gallery img{box-shadow:none;border:1px solid var(--line)}
body.p-post .trip-bar{background:var(--indigo)}
body.p-post .trip-bar a{color:#f4c96b;min-height:44px;display:inline-flex;align-items:center}
body.p-post .back a{color:var(--purple);display:inline-flex;align-items:center;min-height:44px;padding:4px}
body.p-post .ai-note{color:var(--gray)}
body.p-post .place-link{background:rgba(106,44,145,.1);border-color:rgba(106,44,145,.35);color:var(--purple);min-height:44px;display:inline-flex;align-items:center}
body.p-post .cbtn{min-height:44px;display:inline-flex;align-items:center;font-size:var(--fs-sm)}

body.p-post .crumbs{position:relative;z-index:2;background:var(--soft);border-bottom:1px solid var(--line);font-size:.86rem}
body.p-post .crumbs .wrap{padding-top:11px;padding-bottom:11px;white-space:nowrap;overflow-x:auto}
body.p-post .crumbs a{color:var(--purple);font-weight:700}
body.p-post .crumbs .sep{color:var(--gray);margin:0 6px}