/* =====================================================================
   Meridian — design tokens + components
   Art direction: warm editorial. Deep ink-navy foundation, terracotta accent,
   Boska serif display + Satoshi sans body. Broad-inspiration travel magazine.
   ===================================================================== */
:root {
  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);

  --content-narrow:640px;--content-default:1040px;--content-wide:1240px;

  --font-display:'Boska','Georgia',serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;
}

/* LIGHT (warm paper) — opt-in only; DARK is the first-visit default below.
   Qualified with :root because the dark block also matches :root; without the
   extra specificity the later dark block would win on a light document. */
:root[data-theme='light']{
  --color-bg:#f4ede2;            /* warm paper */
  --color-surface:#faf5ec;
  --color-surface-2:#fffdf8;
  --color-surface-offset:#ece2d3;
  --color-surface-offset-2:#e3d7c4;
  --color-divider:#ddd0bd;
  --color-border:#cdbfa9;

  --color-text:#1c2a33;          /* deep ink */
  --color-text-muted:#5c6a70;
  --color-text-faint:#9aa4a6;
  --color-text-inverse:#f8f4ec;

  --color-primary:#c8622d;       /* terracotta */
  --color-primary-hover:#a94f22;
  --color-primary-active:#8a3f1a;
  --color-primary-highlight:#efd9c9;

  --color-ink:#0f2b3d;           /* navy — header/footer */
  --color-sea:#2c6e7f;
  --color-forest:#4a7a4e;
  --color-plum:#7a4b6b;
  --color-amber:#c89a2d;

  --logo-plate:#0f2b3d;          /* brand navy plate behind the mark */

  --shadow-sm:0 1px 2px oklch(0.2 0.02 60 / 0.08);
  --shadow-md:0 6px 20px oklch(0.2 0.02 60 / 0.10);
  --shadow-lg:0 18px 44px oklch(0.2 0.02 60 / 0.16);
}

/* DARK (Meridian navy) — the DEFAULT theme. Bare :root carries these tokens so
   a document that never receives a data-theme attribute (no-JS, or markup that
   predates the theme boot script) still renders dark rather than flashing the
   light paper palette. System colour preference is deliberately NOT consulted:
   the brand default is dark, and only an explicit user choice selects light. */
:root,[data-theme='dark']{
  --color-bg:#0f2b3d;            /* brand navy, matches the logo plate */
  --color-surface:#143546;
  --color-surface-2:#1a3e51;
  --color-surface-offset:#173a4c;
  --color-surface-offset-2:#1e4557;
  --color-divider:#25505f;
  --color-border:#31606f;

  --color-text:#f4ede2;          /* brand cream, matches the logo linework */
  --color-text-muted:#b3c5cd;
  --color-text-faint:#7f97a2;
  --color-text-inverse:#0f2b3d;

  --color-primary:#e0824a;       /* terracotta, lifted for navy ground */
  --color-primary-hover:#eb9563;
  --color-primary-active:#f2a878;
  --color-primary-highlight:#3a2419;

  --color-ink:#0a2030;
  --color-sea:#5aa3b3;
  --color-forest:#79ad7d;
  --color-plum:#c08bab;
  --color-amber:#e0be5a;

  --logo-plate:#1b4257;          /* lifted so the plate reads on a navy page */

  --shadow-sm:0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md:0 6px 20px oklch(0 0 0 / 0.4);
  --shadow-lg:0 18px 44px oklch(0 0 0 / 0.5);
}

/* ---------- Base typography ---------- */
body{font-feature-settings:'ss01';}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(var(--space-4),4vw,var(--space-12))}
.prose a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--color-primary-hover)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;min-height:44px}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{border:1px solid var(--color-border);color:var(--color-text)}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-ink{background:var(--color-ink);color:#f4ede2}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:oklch(from var(--color-bg) l c h / 0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
.header-inner{max-width:var(--content-wide);margin-inline:auto;display:flex;align-items:center;gap:var(--space-6);padding:var(--space-3) clamp(var(--space-4),4vw,var(--space-12))}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text)}
[data-theme='light'] .brand{color:var(--color-ink)}
/* Badge mark: navy plate, cream meridian/globe linework, terracotta core.
   Cream and terracotta are fixed brand values in both themes; only the plate
   lifts in dark so the badge stays visible against the navy page. */
.logo-mark{display:block;flex:none;width:30px;height:30px}
.logo-mark .logo-plate{fill:var(--logo-plate,#0f2b3d)}
.logo-mark .logo-globe{stroke:#f4ede2}
.logo-mark .logo-core{fill:#c8622d}
@media (max-width:640px){.logo-mark{width:26px;height:26px}}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:-0.02em}
.main-nav{display:flex;align-items:center;gap:var(--space-5);margin-left:auto}
.main-nav a,.ssr-nav a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);position:relative}
.main-nav a:hover,.main-nav a.active,.ssr-nav a:hover{color:var(--color-text)}
.ssr-nav{display:flex;gap:var(--space-5);margin-left:auto;align-items:center}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text-muted)}
.icon-btn:hover{background:var(--color-surface-offset);color:var(--color-text)}
.menu-toggle{display:none}
.nav-search{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface-offset);border:1px solid transparent;border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);max-width:220px}
.nav-search:focus-within{border-color:var(--color-primary)}
.nav-search input{background:none;border:none;outline:none;font-size:var(--text-sm);width:100%}

/* ---------- Hero / homepage ---------- */
.hero{position:relative;padding-block:clamp(var(--space-12),8vw,var(--space-24))}
.hero-eyebrow{display:inline-block;font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary);font-weight:600;margin-bottom:var(--space-4)}
.hero h1{font-size:var(--text-3xl);line-height:1.02;max-width:16ch}
.hero-tag{font-size:var(--text-lg);color:var(--color-text-muted);max-width:52ch;margin-top:var(--space-5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* lead feature */
.lead-feature{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-8);align-items:stretch;margin-top:var(--space-12)}
.lead-media{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/10}
.lead-media img{width:100%;height:100%;object-fit:cover}
.lead-body{display:flex;flex-direction:column;justify-content:center}
.lead-body h2{font-size:var(--text-2xl);line-height:1.05;margin-block:var(--space-3)}
.lead-body h2 a:hover{color:var(--color-primary)}
.lead-dek{color:var(--color-text-muted);font-size:var(--text-lg)}

/* section headers */
.section{padding-block:clamp(var(--space-10),6vw,var(--space-20))}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8);flex-wrap:wrap}
.section-head h2{font-size:var(--text-xl)}
.section-head .see-all{font-size:var(--text-sm);color:var(--color-primary);font-weight:600}
.section-head .see-all:hover{text-decoration:underline}
.section-lede{color:var(--color-text-muted);max-width:60ch}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-8)}
.card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--color-surface-offset)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(0.16,1,0.3,1)}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.kicker{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--color-primary)}
.card-body h3{font-size:var(--text-lg);line-height:1.2}
.card-body h3 a:hover{color:var(--color-primary)}
.card-dek{color:var(--color-text-muted);font-size:var(--text-sm);flex:1}
.card-meta{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-2)}

/* chips */
.chip{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);margin:0 var(--space-1) var(--space-1) 0}
.chip:hover,.chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* ---------- Collections strip ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-5)}
.theme-tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4;display:flex;align-items:flex-end;padding:var(--space-5);color:#fff;background:var(--color-ink)}
.theme-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform 400ms,opacity 400ms}
.theme-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,20,26,.85),rgba(8,20,26,.1))}
.theme-tile:hover img{transform:scale(1.05);opacity:.7}
.theme-tile .theme-label{position:relative;z-index:1}
.theme-tile h3{font-size:var(--text-lg);color:#fff}
.theme-tile p{font-size:var(--text-xs);color:rgba(255,255,255,.8);margin-top:var(--space-1)}

/* continent list */
.continent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
.continent-card{display:block;padding:var(--space-5);border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface)}
.continent-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.continent-card h3{font-size:var(--text-lg)}
.continent-card p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}
.continent-card .count{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-3)}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding-block:var(--space-4)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);list-style:none}
.breadcrumbs li:not(:last-child)::after{content:'/';margin-left:var(--space-2);color:var(--color-text-faint)}
.breadcrumbs a:hover{color:var(--color-primary)}
.breadcrumbs [aria-current]{color:var(--color-text)}

/* ---------- Article ---------- */
.article-main,.hub-main{max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(var(--space-4),4vw,var(--space-12));padding-bottom:var(--space-24)}
.article-head{max-width:var(--content-default);margin-inline:auto;text-align:center;padding-block:var(--space-8)}
.article-kickers{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-4)}
.article-head h1{font-size:var(--text-2xl);line-height:1.05;max-width:20ch;margin-inline:auto}
.article-dek{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch;margin:var(--space-5) auto 0}
.article-byline{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-5)}
.article-byline span:first-child{color:var(--color-text);font-weight:600}
.article-hero{margin-block:var(--space-8);border-radius:var(--radius-xl);overflow:hidden}
.article-hero img{width:100%;max-height:70vh;object-fit:cover}
figcaption{font-size:var(--text-xs);color:var(--color-text-faint);padding:var(--space-2) var(--space-1);text-align:center}
.credit{opacity:.7}

.article-layout{display:grid;grid-template-columns:220px minmax(0,68ch);gap:var(--space-12);justify-content:center;margin-top:var(--space-8)}
.article-toc{position:sticky;top:5rem;align-self:start;font-size:var(--text-sm)}
.article-toc h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-faint);margin-bottom:var(--space-3)}
.article-toc ol{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.article-toc a{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.3;display:block;border-left:2px solid var(--color-divider);padding-left:var(--space-3)}
.article-toc a:hover,.article-toc a.active{color:var(--color-primary);border-color:var(--color-primary)}

.article-body{font-size:var(--text-base);line-height:1.75}
.article-body h2{font-size:var(--text-xl);margin-top:var(--space-10);margin-bottom:var(--space-4);scroll-margin-top:5rem}
.article-body p{margin-bottom:var(--space-5);max-width:68ch}
.article-body p.fact{border-left:3px solid var(--color-sea);padding-left:var(--space-4);color:var(--color-text)}
.article-body a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--color-primary-hover)}
.cite-ref a{text-decoration:none;color:var(--color-sea);font-weight:600;font-size:.7em}
.article-list{margin:0 0 var(--space-6);padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.article-list li{max-width:66ch}
.pullquote{margin:var(--space-10) 0;padding-left:var(--space-6);border-left:4px solid var(--color-primary)}
.pullquote p{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25;color:var(--color-text)}
.pullquote cite{display:block;margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);font-style:normal}
.article-figure{margin:var(--space-8) 0;border-radius:var(--radius-lg);overflow:hidden}
.article-figure img{width:100%}
.callout{margin:var(--space-8) 0;padding:var(--space-5) var(--space-6);background:var(--color-surface-offset);border-radius:var(--radius-lg);border:1px solid var(--color-divider)}
.callout-label{display:inline-block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-2)}
.callout p{margin:0;max-width:64ch}
.place-rec{margin:var(--space-8) 0;padding:var(--space-5) var(--space-6);background:var(--color-surface-offset);border-radius:var(--radius-lg);border:1px solid var(--color-divider);border-left:3px solid var(--color-primary)}
.place-label{display:inline-block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-2)}
.place-name{margin:0 0 var(--space-2);font-size:var(--text-lg)}
.place-note{margin:0 0 var(--space-3);max-width:64ch}
.place-link{display:inline-block;font-weight:600;color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.place-link:hover{text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sources{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-divider)}
.sources h2{font-size:var(--text-lg)}
.source-list{list-style:none;margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-sm)}
.source-list a{color:var(--color-sea);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.src-num{color:var(--color-text-faint);margin-right:var(--space-2)}
.author-box{margin-top:var(--space-10);padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-divider)}
.author-box h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint)}
.author-box p{margin-top:var(--space-3);max-width:64ch}

.related,.newsletter-cta{max-width:var(--content-wide);margin:var(--space-16) auto 0}
.related h2{font-size:var(--text-xl);margin-bottom:var(--space-6)}
.newsletter-cta{text-align:center;padding:var(--space-12);background:var(--color-ink);color:#f4ede2;border-radius:var(--radius-xl)}
.newsletter-cta h2{color:#fff;font-size:var(--text-xl)}
.newsletter-cta a{color:var(--color-primary)}
[data-theme='dark'] .newsletter-cta a{color:var(--color-primary-active)}

/* ---------- Hubs ---------- */
.hub-head{padding-block:var(--space-10)}
.hub-head h1{font-size:var(--text-2xl)}
.hub-blurb{color:var(--color-text-muted);font-size:var(--text-lg);max-width:60ch;margin-top:var(--space-4)}
.region-links{margin-bottom:var(--space-8)}
.region-links h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint);margin-bottom:var(--space-3)}

/* ---------- Europe hub (American-traveller edition) ---------- */
.section-lead{color:var(--color-text-muted);max-width:60ch;margin-top:var(--space-2)}
.europe-hero{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);margin-bottom:var(--space-10)}
.europe-hero-body h2{font-size:var(--text-xl);max-width:24ch}
.europe-hero-body p{color:var(--color-text-muted);max-width:64ch;margin-top:var(--space-3)}
.europe-hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.europe-essentials{margin-bottom:var(--space-10)}
.essentials-head h2{font-size:var(--text-xl)}
.verified-note{color:var(--color-text-muted);max-width:70ch;margin-top:var(--space-2)}
.verified{display:inline-block;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-primary);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:2px var(--space-2);white-space:nowrap}
.essentials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5);margin-top:var(--space-5)}
.essential{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.essential h3{font-size:var(--text-base);margin-bottom:var(--space-2)}
.essential p{color:var(--color-text-muted);font-size:var(--text-sm)}
.essential a{color:var(--color-primary);text-decoration:underline}
.essentials-more{margin-top:var(--space-5);font-weight:600}
.essentials-more a,.rail-more{color:var(--color-primary)}
.guide-rail{margin-bottom:var(--space-10)}
.guide-rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.guide-rail-head h2{font-size:var(--text-lg)}
.guide-rail-blurb{color:var(--color-text-muted);margin:var(--space-2) 0 var(--space-4);max-width:64ch}
.europe-regions{margin-bottom:var(--space-10)}
.europe-regions h2{font-size:var(--text-lg);text-transform:none;letter-spacing:0;color:var(--color-text)}
.chip-row{margin-top:var(--space-3)}
.europe-seasons{margin-bottom:var(--space-10)}
.europe-seasons h2{font-size:var(--text-lg)}
.season-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5);margin-top:var(--space-4)}
.season{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.season h3{font-size:var(--text-base);margin-bottom:var(--space-2)}
.season p{color:var(--color-text-muted);font-size:var(--text-sm)}
.tip-callout{background:var(--color-surface-2);border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-5);margin-top:var(--space-5)}
.tip-callout p{color:var(--color-text-muted);font-size:var(--text-sm)}
.tip-callout a{color:var(--color-primary);text-decoration:underline}

/* ---------- Ads (Google AdSense units) ---------- */
.ad-slot{margin:var(--space-8) auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);max-width:100%}
.ad-slot .adsbygoogle{display:block;max-width:100%}
.ad-rectangle{margin-block:var(--space-8)}
.ad-rail{position:sticky;top:5rem}
/* Consent gate: until the Google CMP allows ads, keep every slot collapsed so
   an un-consented page shows no empty box or layout gap. */
html:not(.ads-consent-ok) .ad-slot{display:none !important}
/* Clean collapse for an unfilled / not-yet-approved unit (e.g. while the
   AdSense account is still "Getting ready"): hide the empty <ins> and its
   labelled wrapper rather than reserving blank space. */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important}
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none !important}

/* Native units (in-feed / in-article / multiplex). A visible "Advertisement"
   label keeps them clearly distinct from editorial content and prevents an
   in-feed unit from masquerading as a story card. */
.ad-label{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-faint)}
.ad-native{width:100%}
.ad-native .adsbygoogle{width:100%}
/* In-feed unit spans the full grid row and carries its own surface + border so
   it reads as an ad break between card groups, never as another card. */
.card-grid > .ad-infeed,.card-grid > [data-ad="infeed"]{grid-column:1 / -1}
.ad-infeed{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
/* SPA placeholder wrappers: collapse the whole <div data-ad="…"> (including its
   grid cell) when consent is absent or the unit came back unfilled, so no blank
   box or empty grid gap is left behind. */
html:not(.ads-consent-ok) [data-ad]{display:none !important}
[data-ad]:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none !important}

/* ---------- Forms / newsletter ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.field label{font-size:var(--text-sm);font-weight:600}
.field input,.field select,.field textarea{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary)}
.newsletter-form{display:flex;gap:var(--space-2);flex-wrap:wrap;max-width:460px;margin-inline:auto}
.newsletter-form input{flex:1;min-width:200px}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-3)}
.form-success{color:var(--color-forest);font-weight:600}
.form-error{color:var(--color-primary);font-weight:600}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-ink);color:#cdbfa9;margin-top:var(--space-24)}
.footer-inner{max-width:var(--content-wide);margin-inline:auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--space-8);padding:var(--space-16) clamp(var(--space-4),4vw,var(--space-12)) var(--space-10)}
.site-footer .brand{color:#f4ede2}
.footer-tag{margin-top:var(--space-3);color:#cdbfa9;font-size:var(--text-sm);max-width:32ch}
.footer-col h3{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:#9c8f7c;margin-bottom:var(--space-3)}
.footer-col a{display:block;font-size:var(--text-sm);color:#cdbfa9;padding-block:var(--space-1)}
.footer-col a:hover{color:#f4ede2}
.footer-legal{border-top:1px solid rgba(255,255,255,.1);padding:var(--space-5) clamp(var(--space-4),4vw,var(--space-12));font-size:var(--text-xs);color:#9c8f7c;max-width:var(--content-wide);margin-inline:auto}

/* ---------- States ---------- */
.empty-state{padding:var(--space-16);text-align:center;color:var(--color-text-muted);border:1px dashed var(--color-border);border-radius:var(--radius-lg)}
.empty-state a{color:var(--color-primary);text-decoration:underline}
.error-page{max-width:var(--content-narrow);margin:var(--space-24) auto;text-align:center;padding-inline:var(--space-4)}
.error-code{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-primary)}
.error-page h1{font-size:var(--text-xl);margin-block:var(--space-4)}
.error-actions{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-8);flex-wrap:wrap}
.skeleton{background:linear-gradient(90deg,var(--color-surface-offset) 25%,var(--color-surface-offset-2) 50%,var(--color-surface-offset) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-md)}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-card{height:340px;border-radius:var(--radius-lg)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;padding:var(--space-3) var(--space-5);z-index:100;border-radius:0 0 var(--radius-md) 0}
.skip-link:focus{left:0}

/* ---------- Filters bar ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-8);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg)}
.filters select,.filters input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm)}
.filters .result-count{margin-left:auto;font-size:var(--text-sm);color:var(--color-text-muted)}

/* ---------- Admin / CMS ---------- */
.admin-shell{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-8) clamp(var(--space-4),4vw,var(--space-12)) var(--space-24)}
.admin-bar{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8);padding-bottom:var(--space-5);border-bottom:1px solid var(--color-divider)}
.admin-bar h1{font-size:var(--text-xl)}
.admin-bar .badge{font-size:var(--text-xs);background:var(--color-primary-highlight);color:var(--color-primary-active);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-weight:600}
.admin-tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-6);flex-wrap:wrap}
.admin-tabs button{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-text-muted);border:1px solid transparent}
.admin-tabs button.active{background:var(--color-surface-offset);color:var(--color-text);border-color:var(--color-divider)}
.admin-table{width:100%;font-size:var(--text-sm)}
.admin-table th{text-align:left;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-faint);padding:var(--space-3);border-bottom:1px solid var(--color-divider)}
.admin-table td{padding:var(--space-3);border-bottom:1px solid var(--color-divider);vertical-align:middle}
.admin-table tr:hover{background:var(--color-surface)}
.status-pill{font-size:var(--text-xs);font-weight:600;padding:2px var(--space-2);border-radius:var(--radius-full)}
.status-published{background:#dbead0;color:#3a5c22}
.status-draft{background:var(--color-surface-offset-2);color:var(--color-text-muted)}
.status-scheduled{background:#e7d7c4;color:#8a5b00}
[data-theme='dark'] .status-published{background:#26361c;color:#8fce6c}
[data-theme='dark'] .status-scheduled{background:#3a2f1c;color:#e0be5a}
.row-actions{display:flex;gap:var(--space-1);flex-wrap:wrap}
.row-actions button{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted)}
.row-actions button:hover{border-color:var(--color-primary);color:var(--color-primary)}
.editor-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--space-8)}
.editor-main,.editor-side{display:flex;flex-direction:column;gap:var(--space-4)}
.editor-side{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-5);align-self:start;position:sticky;top:5rem}
.editor-side h3{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint);margin-top:var(--space-3)}
.block-editor{display:flex;flex-direction:column;gap:var(--space-3)}
.block{border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-3);background:var(--color-surface)}
.block-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.block-head select{font-size:var(--text-xs);padding:2px var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.block textarea{width:100%;min-height:60px;resize:vertical;font-size:var(--text-sm);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2)}
.block .del{margin-left:auto;color:var(--color-primary);font-size:var(--text-xs)}
.gate{max-width:400px;margin:var(--space-24) auto;text-align:center;padding:var(--space-8);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl)}
.gate h1{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.gate p{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-6)}
.gate .hint{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-4)}
.preview-note{background:var(--color-primary-highlight);color:var(--color-primary-active);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-6);text-align:center}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .lead-feature{grid-template-columns:1fr}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .article-toc{position:static;order:-1;border-bottom:1px solid var(--color-divider);padding-bottom:var(--space-4);margin-bottom:var(--space-4)}
  .article-toc .ad-slot{display:none}
  .editor-grid{grid-template-columns:1fr}
  .editor-side{position:static}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .main-nav,.ssr-nav{display:none}
  .menu-toggle{display:inline-flex}
  .main-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:var(--space-4);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider);padding:var(--space-6) clamp(var(--space-4),4vw,var(--space-12))}
  .nav-search{display:none}
  .hero h1{font-size:var(--text-2xl)}
  .footer-inner{grid-template-columns:1fr}
  .article-head{text-align:left}
  .article-kickers,.article-byline{justify-content:flex-start}
  .filters .result-count{margin-left:0;width:100%}
}
/* Mobile-only sticky bottom banner */
.mobile-sticky-ad{display:none}
@media (max-width:640px){
  .mobile-sticky-ad{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;justify-content:center;background:var(--color-surface-2);border-top:1px solid var(--color-divider);padding:var(--space-1) 0;margin:0}
  .mobile-sticky-ad .ad-label{display:none}
  body.has-sticky-ad{padding-bottom:var(--sticky-ad-h,60px)}
}

/* CMS pre-publish originality review result */
.orig-result { margin-top: .75rem; font-size: .85rem; line-height: 1.5; }
.orig-result:empty { display: none; }
.orig-result ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.orig-result.orig-ok { color: #1a6b3c; }
.orig-result.orig-warn { color: #8a4b00; background: #fff6e6; border: 1px solid #f0d090; border-radius: 8px; padding: .6rem .8rem; }

/* Instagram badge — shown only when IG_URL/IG_HANDLE is configured (see backend/social.js) */
.ig-link { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; }
.ig-link:hover { color: var(--color-accent, #b4622d); }
.ig-link svg { flex: none; }
.header-social:empty { display: none; }
.header-social .ig-link { padding: .35rem; border-radius: 8px; }
.footer-social { margin-top: .75rem; }
.footer-social .ig-link { font-weight: 500; }
.newsletter-social { margin-top: 1rem; font-size: .9rem; opacity: .85; }

/* ---------- Travelpayouts GetTransfer transfer-booking module ----------
   A clearly labelled commercial module (never editorial). Shown only in
   transport-planning contexts; the live widget mounts inside .transfer-widget
   once consent allows, and the fallback CTA always works. */
.transfer-module{margin:var(--space-8) 0;padding:var(--space-6);background:var(--color-surface-offset);border:1px solid var(--color-divider);border-left:3px solid var(--color-primary);border-radius:var(--radius-lg)}
.transfer-module .partner-label{display:inline-block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--color-text-faint);margin-bottom:var(--space-2)}
.transfer-title{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.transfer-lede{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-4);max-width:60ch}
.transfer-widget-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.transfer-widget{width:100%}
.transfer-widget:empty{margin:0}
.transfer-widget:not(:empty){margin-block:var(--space-4)}
.transfer-fallback{margin-top:var(--space-4)}
.transfer-module .partner-disclosure{margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-faint);max-width:60ch}
@media (max-width:640px){
  .transfer-module{padding:var(--space-5)}
  .transfer-fallback .btn{width:100%;justify-content:center}
}