/* ============================================================
   Go Famous Now — editorial theme
   ============================================================ */

:root {
  --bg-surround: #ffffff;
  --bg-page: #ffffff;
  --bg-card: #f5f5f5;
  --ink: #0a0a0a;
  --ink-soft: #4a4a4a;
  --ink-mute: #8a8a8a;
  --rule: #d8d8d8;
  --accent: #7a1c1c;
  --accent-rgb: 122, 28, 28;
  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell-max: 1280px;
}

* { -webkit-font-smoothing: antialiased; }

html, body {
  background: var(--bg-surround);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
body { overflow-x: clip; }

body {
  margin: 0;
  padding: 24px 0 56px;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* -------- The white "page" shell --------------------------- */
.shell {
  width: 90%;
  max-width: 1600px;
  margin: 0 auto;
  background: var(--bg-page);
  border-radius: 0;
  padding: 36px clamp(20px, 4vw, 64px) 56px;
  box-shadow: none;
  position: relative;
}

/* -------- Header ------------------------------------------- */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 24px clamp(20px, 4vw, 64px) 24px;
  margin: -36px clamp(-20px, -4vw, -64px) 40px;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
/* Image variant — admin uploaded a Site Logo in Settings → Appearance.
   Renders at the image's natural size; only capped by the masthead's
   intrinsic width via max-width: 100%. */
.brand-logo {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mast-right {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}

/* Language dropdown */
.lang {
  position: relative;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .15s ease;
}
.lang-toggle:hover { border-color: var(--ink); }

/* ============================================================================
   MASTHEAD SEARCH BAR — pill that matches .lang-toggle dimensions exactly
   so the two controls sit on the same row with consistent height + border.
   Mobile (≤767px): collapses to magnifier-only; tap toggles `.is-open`
   which slides the form down below the masthead taking full width.
   ============================================================================ */
.mast-search {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, width .25s ease;
    /* Match .lang-toggle's intrinsic height via padding on children. */
}
.mast-search:focus-within { border-color: var(--ink); }
.mast-search__input {
    flex: 1 1 220px;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 8px 14px;
    font: 500 .85rem/1 var(--sans);
    color: var(--ink);
    outline: none;
    /* Remove browser's built-in clear "x" on type=search for cleanness. */
    -webkit-appearance: none;
    appearance: none;
}
.mast-search__input::-webkit-search-cancel-button { display: none; }
.mast-search__input::placeholder {
    color: rgba(0, 0, 0, .45);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.mast-search__btn {
    flex: 0 0 38px;
    height: 100%;
    min-height: 34px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--rule);
    color: var(--ink-soft, #4a4a4a);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.mast-search__btn:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--ink);
}

/* Close ✕ button — hidden by default (desktop + collapsed mobile state).
   Becomes visible only when the form is open on mobile via the rule below
   in the @media block. */
.mast-search__close {
    display: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--ink-soft, #4a4a4a);
    padding: 0;
    align-items: center;
    justify-content: center;
}
.mast-search__close:hover { color: var(--ink); }

@media (max-width: 767px) {
    /* COLLAPSED state — only the magnifier icon shows, sized like a 38×38
       pill (matches the language-switcher's flag-only state at this width). */
    .mast-search {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        cursor: pointer;
    }
    .mast-search__input {
        display: none;
        padding: 0;
    }
    .mast-search__btn {
        flex: 1 1 38px;
        width: 100%;
        height: 100%;
        border-left: 0;
    }

    /* OPEN state — the entire form repositions ABSOLUTE below the masthead,
       spanning the full viewport width. Input slides into view, submit
       button stays as the magnifier on the right of the input. */
    .mast-search.is-open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        flex: 0 0 auto;
        height: auto;
        z-index: 70;
        background: #fff;
        border: 0;
        border-bottom: 1px solid var(--rule);
        border-radius: 0;
        padding: 12px 16px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
        animation: mast-search-slide .22s ease-out;
    }
    .mast-search.is-open .mast-search__input {
        display: block;
        flex: 1 1 auto;
        font-size: 1rem;
        padding: 10px 14px;
        border: 1px solid var(--rule);
        border-right: 0;
        border-radius: 10px 0 0 10px;
        height: 44px;
    }
    .mast-search.is-open .mast-search__btn {
        flex: 0 0 48px;
        width: 48px;
        height: 44px;
        border: 1px solid var(--rule);
        border-left: 0;
        border-radius: 0 10px 10px 0;
        background: var(--ink);
        color: #fff;
    }
    /* Close ✕ button — shown only on mobile + when the form is open.
       Sits to the LEFT of the input as a 44×44 tap target so it's
       reachable with the thumb even when the keyboard is up. */
    .mast-search.is-open .mast-search__close {
        display: inline-flex;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin-right: 4px;
        border-radius: 10px;
        background: rgba(0, 0, 0, .04);
    }
    .mast-search.is-open .mast-search__close:hover {
        background: rgba(0, 0, 0, .08);
    }
}

@keyframes mast-search-slide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ============================================================================
   ARTICLE INLINE LEAD-CAPTURE CARD — `.article-cta`
   Three states (controlled by `.is-form` / `.is-success` on the card):
     1. PROMPT  — heading + description + CTA button (initial)
     2. FORM    — fields slide in over the prompt
     3. SUCCESS — thank-you message + optional voucher reveal
   Pure frontend palette (--ink, --rule, --accent) — no admin colors per
   the project's strict frontend/admin separation rule.
   ============================================================================ */
.article-cta {
    background: var(--bg-card, #faf7f2);
    border: 1px solid var(--rule, #e2dccd);
    border-radius: 14px;
    padding: 28px 28px 24px;
    margin: 32px 0;
    position: relative;
    overflow: hidden;
}
.article-cta h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    margin: 0 0 8px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.article-cta p {
    margin: 0 0 16px;
    color: var(--ink-soft, #4a4a4a);
    line-height: 1.5;
}
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.cta-btn:hover {
    background: var(--accent, #8a3324);
    border-color: var(--accent, #8a3324);
    color: #fff;
    text-decoration: none;
}
.cta-btn:active { transform: scale(.98); }
.cta-btn--ghost {
    background: transparent;
    color: var(--ink);
}
.cta-btn--ghost:hover {
    background: transparent;
    color: var(--accent, #8a3324);
    border-color: var(--accent, #8a3324);
}
.cta-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* ---- State swap: form ---- */
.article-cta__form,
.article-cta__success { display: none; }
.article-cta.is-form .article-cta__prompt   { display: none; }
.article-cta.is-form .article-cta__form     { display: block; animation: lead-fade-in .25s ease both; }
.article-cta.is-success .article-cta__prompt { display: none; }
.article-cta.is-success .article-cta__form   { display: none; }
.article-cta.is-success .article-cta__success { display: block; animation: lead-fade-in .25s ease both; }

@keyframes lead-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.article-cta__form-title {
    margin: 0 0 18px;
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--ink);
}
/* Inputs reuse the global `.field` styling defined elsewhere in this file
   (eyebrow label + ink bottom-border line input + Parsley error icon).
   Below are only the deltas needed for the lead-form context.

   Per-field margin is smaller than .field's default 26px because the
   card is space-constrained — 18px keeps a tighter rhythm. */
.article-cta .field { margin-bottom: 18px; }
.article-cta .field textarea { min-height: 80px; }

/* Honeypot — visually hidden but still in DOM so bots fill it. */
.article-cta__hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Global CAPTCHA widget (shared by Contact form + Lead form) =====
   Two-row layout:
     Row 1 — image card + ink-filled reload button, joined as one unit
     Row 2 — type-in field on its own line, editorial underline style
   Lifted from contact.php's inline <style> block 2026-06-25 so the same
   widget can be reused on any form (lead form on article pages picked
   this up as the first additional consumer). */
.gf-captcha-field { margin-top: 26px; }
.gf-captcha-image-row {
    /* Shrinks to hug its content (image + reload button) but caps at the
       parent width in narrow containers.

       Previously used `display: flex; width: 100%; max-width: 460px` which
       stretched the row to a fixed 460px even though the intrinsic content
       is only ~420px — leaving a visible gap between the reload button and
       the row's right edge.

       `inline-flex` + no explicit width + `max-width: 100%` gives us:
         wide parent  → row = 360 + 58 = 418px, no gap
         narrow parent → row shrinks with parent, image scales down via its
                          aspect-ratio, reload button stays visible. */
    display: inline-flex;
    align-items: stretch;
    margin: 10px 0 18px;
    border: 1.5px solid var(--ink, #1a1a1a);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
    border-radius: 4px;
    overflow: hidden;
    max-width: 100%;
}
.gf-captcha-image-wrap {
    position: relative;
    display: block;
    background: #fff;
    flex: 1 1 auto;
    min-width: 0;      /* let the wrap shrink below its intrinsic image width */
    max-width: 360px;  /* don't let it exceed the image's max size in wide rows */
}
.gf-captcha-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 360px;   /* matches CaptchaGenerator::WIDTH  */
    aspect-ratio: 360 / 110; /* matches CaptchaGenerator::WIDTH / HEIGHT */
    object-fit: contain;
}
/* Reload button — ink-filled square stuck to the right of the image card
   so the two read as one unit. Hover lifts to pure black. */
.gf-captcha-reload {
    background: var(--ink, #1a1a1a);
    border: 0;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    transition: background-color .15s ease, transform .25s ease;
}
.gf-captcha-reload:hover { background: #000; }
.gf-captcha-reload:active .gf-captcha-reload__icon,
.gf-captcha-reload:hover .gf-captcha-reload__icon {
    transform: rotate(-90deg);
    transition: transform .35s ease;
}
.gf-captcha-input {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--ink, #1a1a1a);
    padding: 10px 0 8px;
    font-family: var(--serif, 'Playfair Display', serif);
    font-size: 1.15rem;
    color: var(--ink, #1a1a1a);
    letter-spacing: .015em;
    outline: none;
    transition: border-bottom-width .15s ease;
}
.gf-captcha-input:focus { border-bottom-width: 2px; }
.gf-captcha-input::placeholder {
    color: var(--rule, #9ca3af);
    font-style: italic;
    font-weight: 400;
}
.gf-captcha-hint {
    display: block;
    margin-top: 10px;
    color: var(--ink-soft, #6b6b6b);
    font-size: .82rem;
    line-height: 1.6;
}
@media (max-width: 575px) {
    /* Inline-flex won't shrink below content width on narrow phones,
       so the image+button row would overflow. Switch to flex + cap
       image width via aspect-ratio. */
    .gf-captcha-image-row {
        display: flex;
        width: 100%;
        max-width: none;
    }
    .gf-captcha-image-wrap { flex: 1 1 auto; min-width: 0; }
    .gf-captcha-image {
        width: 100%;
        height: auto;
        max-width: none;
        aspect-ratio: 360 / 110;
    }
    .gf-captcha-reload { flex: 0 0 auto; min-width: 48px; padding: 0 12px; }
}

/* Inline error block (server-side errors that arrive after submit). */
.article-cta__error {
    background: #fdecec;
    color: #8a1f1f;
    border: 1px solid #f5c2c2;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: .9rem;
    line-height: 1.45;
}

/* Action row — Cancel (link-style, left) + Submit pill (ink, right).
   Matches the Contact form's editorial layout. */
.article-cta__actions {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
    flex-wrap: wrap;
}
/* Cancel — ghost-style button matching .btn-news (the Send pill) in size
   and typography, so the two read as a coordinated pair. Inverts on
   hover (white text on ink) to match how primary buttons usually invert
   in this design system. */
.article-cta__cancel {
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    padding: 14px 28px;
    font-family: var(--sans);
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: background-color .15s ease, color .15s ease;
}
.article-cta__cancel:hover {
    background: var(--ink);
    color: #fff;
}
/* The submit button uses the existing .btn-news editorial pill style
   (defined ~line 1648 of this file). Add an arrow + busy spinner for
   the lead-form context. */
.article-cta .btn-news .js-lead-submit-arrow {
    margin-left: 8px;
    display: inline-block;
    transition: transform .18s ease;
}
.article-cta .btn-news:hover .js-lead-submit-arrow {
    transform: translateX(3px);
}
.btn-news.is-busy { opacity: .7; pointer-events: none; }
.btn-news.is-busy .js-lead-submit-arrow { display: none; }
.btn-news.is-busy::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-left: 10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: lead-spin .8s linear infinite;
    display: inline-block;
    vertical-align: -2px;
}
@keyframes lead-spin { to { transform: rotate(360deg); } }

/* Success state */
.article-cta__success {
    text-align: center;
    padding: 8px 0;
}
.article-cta__success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: #d9f0d6;
    color: #1e6f1c;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
}
.article-cta__success h3 {
    margin: 0 0 8px;
    color: var(--ink);
}
.article-cta__voucher {
    margin-top: 18px;
    padding: 12px 18px;
    background: #fff;
    border: 1px dashed var(--accent, #8a3324);
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.article-cta__voucher small {
    color: var(--ink-soft, #4a4a4a);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.article-cta__voucher code {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent, #8a3324);
    letter-spacing: .08em;
}

/* ---- Mobile compaction ---- */
@media (max-width: 575px) {
    .article-cta { padding: 22px 18px 18px; }
    .article-cta h3 { font-size: 1.2rem; }
    .article-cta__actions { justify-content: stretch; }
    .article-cta__actions > .cta-btn { flex: 1 1 auto; }
}

/* Masthead needs `position: relative` so the absolute-positioned open
   search form anchors to it on mobile. */
.masthead { position: relative; }
/* Country flag — actual <img> from flagcdn.com (SVG). Wrapper is a
   fixed-aspect rectangle so the image renders at consistent size whether
   the source is wide (US, ~1.9:1) or square-ish (CH, 1:1). Subtle border
   + radius keeps the flag visually contained against the white masthead. */
.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  flex-shrink: 0;
}
.lang-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lang-caret { font-size: .65rem; opacity: .6; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 6px;
  display: none;
  z-index: 50;
}
.lang.open .lang-menu { display: block; }
/* Menu items — anchors now (so each language is a real link the browser
 * can right-click / open in new tab). The old `button` selectors stay
 * around for any legacy markup, but the canonical class is now
 * `.lang-menu__item`. `.is-active` reads dark-red uppercase to match the
 * frontend's accent. */
.lang-menu button,
.lang-menu .lang-menu__item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 6px;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.lang-menu button:hover,
.lang-menu .lang-menu__item:hover { background: #f4f4f4; }
.lang-menu button.active,
.lang-menu .lang-menu__item.is-active {
  color: var(--accent);
  font-weight: 700;
}

/* Hamburger / nav toggle */
.nav-toggle {
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0 6px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  width: 100%;
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   MEGA NAV — responsive (mobile / tablet / desktop)
   Desktop:  floating card, 5 columns, centered above content
   Tablet:   floating card, 2–3 columns
   Mobile:   FULL-SCREEN takeover, single column, internal scroll,
             sticky close button visible while scrolling
   =========================================================== */

/* Close button — at desktop a circle in the top-right corner of the
   card; at mobile it docks to the top-right of the full-screen overlay
   and stays visible while the user scrolls (sticky inside flex parent). */
.mega-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
  font-size: 1rem;
  z-index: 5;
}
.mega-close:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: rotate(90deg);
}
.mega-close svg { width: 18px; height: 18px; }

/* Backdrop — desktop only. On mobile the mega panel itself is full-
   screen so there's no surrounding area to dim. */
.mega-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.18);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 55;
}
.mega-backdrop.open { opacity: 1; pointer-events: auto; }

/* Mega panel — desktop default. Floating card centered horizontally. */
.mega {
  position: fixed;
  left: 50%;
  width: min(90%, 1560px);
  top: 92px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 36px clamp(28px, 4vw, 56px) 32px;
  box-shadow: 0 24px 48px rgba(0,0,0,.10);
  display: none;
  z-index: 60;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
  /* Internal scroll if the panel is taller than the viewport. */
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mega.open {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.4fr;
  gap: 40px;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tablet landscape & large tablet (992–1199px): 3 even columns */
@media (max-width: 1199px) {
  .mega.open { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}

/* Tablet portrait (768–991px): 2 columns */
@media (max-width: 991px) {
  .mega { width: min(94%, 720px); padding: 28px 28px 24px; }
  .mega.open { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* Mobile (< 768px): FULL-SCREEN takeover.
   The whole panel becomes the entire viewport, single-column stack,
   internal scroll, sticky close button. No floating card / rounded
   corners — feels like a native mobile drawer. */
@media (max-width: 767px) {
  .mega {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border: 0;
    border-radius: 0;
    padding: 20px 22px 80px;
    box-shadow: none;
    transform: translateY(-4px);
    /* iOS safe-area awareness + extra TOP padding so the first column
       heading clears the close button (the X sits at top:14px with a 44px
       hitbox = bottom edge ~58px; we leave a 16px breathing gap below
       that). Earlier 20px top let the first heading collide with the X. */
    padding-top: calc(78px + env(safe-area-inset-top));
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  /* Scroll-to-top FAB lives at bottom-right; hide it while the drawer is
     open so it doesn't punch through the navigation surface. JS toggles
     `body.mega-open` on every open/close path. */
  body.mega-open .tn-totop { display: none !important; }
  .mega.open {
    grid-template-columns: 1fr;
    gap: 20px;
    transform: translateY(0);
  }
  /* Backdrop is invisible at this width (the panel covers everything),
     but keep it click-blocking so the body behind doesn't scroll. */
  .mega-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Close button — sticks to the corner while scrolling. */
  .mega-close {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    right: 14px;
    z-index: 65;
  }
}

/* === Column copy === */
.mega-col { position: relative; }
.mega-col h4,
.mega-col__heading {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
  padding-bottom: 14px;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
/* Small warm accent bar under each column heading — a signature editorial
   flourish that ties the mega-nav to the site's masthead colours. */
.mega-col h4::after,
.mega-col__heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 32px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
/* Accordion toggle button — on desktop styled as a plain inline span so
   the heading reads exactly like the old <h4>. The chevron is hidden.
   On mobile it gains row layout, padding, and a visible chevron. */
.mega-col__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
}
.mega-col__chevron { display: none; }
.mega-col__list { list-style: none; padding: 0; margin: 0; }
.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col li { margin-bottom: 0; }

/* Every menu row wraps its <a> and (optional) chevron toggle in a
   .mega-col__row flex container so they sit inline. Row-level styling
   (background, left accent bar) lives here so a row highlights as ONE
   unit on hover, not just the anchor's text portion. */
.mega-col__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 12px;
  margin: 0 -10px;
  border-radius: 6px;
  position: relative;
  transition: background-color .18s ease;
}
.mega-col__row > a { flex: 1 1 auto; min-width: 0; }
/* Left accent bar — grows from 0 to 3px on hover for a physical response
   without shifting the label. Uses the site accent so it feels branded. */
.mega-col__row::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width .18s ease;
  opacity: 0;
}
.mega-col__row:hover {
  background: rgba(0, 0, 0, .028);
}
.mega-col__row:hover::before {
  width: 3px;
  opacity: 1;
}

/* Sub-toggle chevron — hidden in flat mode. In accordion mode it's a
   subtle round pill button that rotates on open. */
.mega-col__sub-toggle {
  display: none;              /* revealed only in accordion mode below */
  background: transparent;
  border: 0;
  padding: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-mute, #7a7a7a);
  transition: transform .22s ease, color .18s ease, background-color .18s ease;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.mega-col__sub-toggle:hover {
  background: rgba(var(--accent-rgb, 200, 90, 60), .10);
  color: var(--accent);
}
.mega-col__sub-toggle svg { display: block; }
.mega-col__sub-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
  color: var(--accent);
  background: rgba(var(--accent-rgb, 200, 90, 60), .10);
}

/* ===== Accordion mode ===== every column with data-display-mode="accordion"
   collapses its nested <ul> by default; the small chevron toggle reveals it.
   Applies at every viewport — this is the editor's chosen presentation. */
.mega-col--accordion .mega-col__sub-toggle { display: inline-flex; }
/* Collapsed state: zero vertical padding + margin so the peach card
   doesn't leak a strip while max-height is 0. Horizontal padding kept
   so the card animates in from its full width, not from 0-width. */
.mega-col--accordion .mega-col__list li > ul {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1),
              padding .28s ease,
              margin .28s ease,
              opacity .28s ease .04s,
              transform .28s ease .04s;
}
.mega-col--accordion .mega-col__list li.is-open > ul {
  max-height: 2400px;   /* generous ceiling so nested grandchildren don't clip
                           when a mid-level branch expands inside an open parent */
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 6px;
  margin-bottom: 8px;
  opacity: 1;
  transform: translateY(0);
}

/* Nested sub-menu items (desktop) — editorial hierarchy: slight indent,
   discreet ›-arrow before the label, italic serif, muted colour that
   warms to the accent on hover. Scoped to ≥768 so the mobile accordion
   block below keeps its own tap-target sizing untouched. */
@media (min-width: 768px) {
  /* Nested sub-menu — soft warm-tinted card wraps each child branch so
     the parent/child grouping reads instantly. Recursive descendant
     combinator (no `>`) so grandchildren, great-grandchildren etc. all
     nest inside their own darker card. */
  .mega-col__list ul {
    list-style: none;
    padding: 8px 10px;
    margin: 6px 0 8px;
    background: rgba(var(--accent-rgb, 122, 28, 28), .06);
    border-radius: 8px;
  }
  .mega-col__list ul li { margin: 0; }
  .mega-col__list ul .mega-col__row {
    padding: 1px 6px;
    margin: 0 -4px;
    border-radius: 4px;
    background: transparent;   /* card provides the ground; row goes clean */
  }
  .mega-col__list ul .mega-col__row::before {
    display: none;              /* no left accent bar inside cards — the
                                   card itself already groups the branch */
  }
  .mega-col__list ul .mega-col__row:hover { background: rgba(0, 0, 0, .045); }
  .mega-col__list ul .mega-col__row > a {
    padding: 5px 0;
    font-family: var(--serif);
    font-size: .96rem;
    font-weight: 400;
    font-style: normal;         /* upright, no italics */
    color: var(--ink-soft, #4a423b);
    letter-spacing: 0;
    transition: color .18s ease;
  }
  .mega-col__list ul .mega-col__row:hover > a { color: var(--accent); }
  .mega-col__list ul .mega-col__row > a.active {
    color: var(--accent);
    font-weight: 500;
  }
  /* Deeper level card sits inside its parent card, slightly deeper tint
     so each depth reads distinctly without a fixed palette of card
     colours per level. */
  .mega-col__list ul ul {
    margin-top: 4px;
    background: rgba(0, 0, 0, .045);
  }
  /* Sub-toggle chevron inside the card shrinks slightly so it doesn't
     compete with the level-1 chevron above. */
  .mega-col__list ul .mega-col__sub-toggle {
    width: 22px;
    height: 22px;
  }
  .mega-col__list ul .mega-col__sub-toggle svg { width: 10px; height: 7px; }
}
.mega-col a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.35;
  color: var(--ink);
  position: relative;
  transition: color .18s ease, letter-spacing .18s ease;
  text-decoration: none;
}
.mega-col a:hover {
  color: var(--accent);
  text-decoration: none;
}
.mega-col a.active { color: var(--accent); font-weight: 500; }
.mega-col a .glyph {
  font-size: .72rem;
  color: var(--ink-mute);
  font-family: var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* === Mega-nav ACCORDION (mobile, ≤767px) ===
   The five columns become an editorial-style accordion. Each column is a
   card-like row with a serif heading + a circular chevron disc. Tapping
   expands the link list inside the same card with a soft background so
   the active section reads at a glance. Bottom border separates cards. */
@media (max-width: 767px) {
  .mega-col {
    padding: 0;
    border-bottom: 1px solid #ece8e2;
    transition: background-color .18s ease;
  }
  .mega-col:last-child { border-bottom: 0; }

  /* Wipe the desktop h4 chrome — heading is now just a container for the
     full-width toggle button. */
  .mega-col h4,
  .mega-col__heading {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    font: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Toggle row — serif heading + chevron. Padding kept tight (10px top /
     bottom) so collapsed sections stack densely; minimum 48px keeps the
     row a comfortable tap target without padding the visual whitespace. */
  .mega-col__toggle {
    cursor: pointer;
    justify-content: space-between;
    width: 100%;
    padding: 10px 4px;
    min-height: 48px;
    gap: 12px;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--ink);
    transition: color .15s ease;
  }
  .mega-col__toggle:hover,
  .mega-col__toggle:active { color: var(--accent); }
  .mega-col__label { flex: 1 1 auto; min-width: 0; }

  /* Chevron — circular disc with a strong border + warm tint so it reads
     clearly as a tappable affordance against the white drawer. Fills
     solid ink when the section is expanded. Sized at 38px for an obvious
     tap target. */
  .mega-col__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, .14);
    background: #f4f1ed;
    color: var(--ink);
    transition: transform .25s ease, background-color .2s ease,
                color .2s ease, border-color .2s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
  }
  .mega-col__chevron svg { width: 13px; height: auto; }

  /* OPEN state — heading flips to accent, chevron disc fills with ink so
     the open section is unmistakable at a glance. */
  .mega-col__toggle[aria-expanded="true"] { color: var(--accent); }
  .mega-col__toggle[aria-expanded="true"] .mega-col__chevron {
    transform: rotate(180deg);
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  }

  /* Link list — collapsed by default. When open: clean stacked rows with
     a hairline divider between each item. No left rail (felt out of
     place); the items read naturally as a list under the heading. */
  .mega-col__list {
    display: none;
    padding: 4px 0 14px 0;
    margin: 0;
    border-left: 0;
  }
  .mega-col.is-open .mega-col__list {
    display: block;
    animation: gf-megaAccExpand .22s ease both;
  }
  @keyframes gf-megaAccExpand {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Each link is a self-contained row with its own bottom hairline so the
     list reads as a true menu, not a paragraph of text. The last item
     drops its border so the row separator on .mega-col carries through. */
  .mega-col__list li { margin: 0; }
  .mega-col__list a {
    display: flex;
    align-items: center;
    padding: 12px 4px;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    border-bottom: 1px dashed rgba(0, 0, 0, .07);
    min-height: 44px;
    transition: color .15s ease, padding-left .15s ease;
  }
  .mega-col__list li:last-child > a { border-bottom: 0; }
  .mega-col__list a:hover,
  .mega-col__list a:active {
    color: var(--accent);
    padding-left: 10px;
  }
  .mega-col__list a.active {
    color: var(--accent);
    font-weight: 600;
  }
  .mega-col__list a.active::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 10px;
    flex-shrink: 0;
  }

  /* Nested sub-menu items — tighter, lighter, indented so the parent /
     child relationship is obvious. */
  .mega-col__list ul {
    list-style: none;
    padding: 4px 0 6px 18px;
    margin: 0;
  }
  .mega-col__list ul a {
    font-size: .96rem;
    font-weight: 400;
    color: var(--ink-soft, #4a4a4a);
    padding: 9px 4px;
    border-bottom: 0;
    min-height: 38px;
  }
  .mega-col__list ul a::before { content: none; }
}

/* Small mobile (< 360px) — slightly tighter so 4-letter category names
   don't wrap. */
@media (max-width: 360px) {
  .mega { padding-left: 18px; padding-right: 18px; }
  .mega-col a { font-size: 1.05rem; }
}

.mega-feature h4 { color: var(--ink-mute); }
.mega-feature-card {
  display: block;
  background: var(--bg-card);
  padding: 18px 20px 20px;
  margin-bottom: 14px;
  transition: background .2s ease;
}
.mega-feature-card:hover { background: #ececec; color: var(--ink); }
.mega-feature-card .fc-meta {
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.mega-feature-card .fc-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mega-feature-card:hover .fc-title { color: var(--accent); }

.mega-foot {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .78rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.mega-foot .mf-links { display: flex; gap: 18px; flex-wrap: wrap; }
.mega-foot .mf-links a { color: var(--ink-soft); }
.mega-foot .mf-links a:hover { color: var(--accent); }
.mega-foot .mf-sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink);
}

/* -------- Section labels (latest, economy ...) ------------ */
.section-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0 28px;
}
.section-label h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin: 0;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.section-label .rule {
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: .85;
}

/* -------- Text-selection palette ------------------------- */
/* Default browser selection is OS blue — clashes with the editorial
   ink-on-white palette. Override site-wide using INK (the frontend's
   own primary text color, not the admin theme's peach) so highlighting
   reads as part of the frontend design system. Classic newspaper-style
   dark selection with white text — used by Reuters, Bloomberg, NYT. */
::selection {
  background: var(--ink, #1a1a1a);
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: var(--ink, #1a1a1a);
  color: #fff;
  text-shadow: none;
}

/* -------- Article cards ----------------------------------- */
.article-row { margin-bottom: 56px; }

.card-article {
  background: var(--bg-card);
  border: 0;
  border-radius: 14px;
  padding: 22px 24px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: background-color .2s ease, transform .2s ease;
  overflow: hidden;
}
.card-article:hover { background: #ececec; }

/* Featured image — strict 16:9 ratio enforced via the classic
   padding-top trick (56.25% = 9/16) for maximum cross-browser support
   (aspect-ratio CSS prop has edge cases in some flex contexts). The
   image is absolutely positioned inside, clipped via object-fit: cover.
   Negative margin pulls the media flush to the card edges. */
.card-media {
  display: block !important;
  position: relative !important;
  width: auto !important;
  height: 0 !important;
  padding-top: 56.25% !important;
  overflow: hidden !important;
  background: #efe7e0 !important;
  margin: -22px -24px 18px !important;
}
.card-media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s ease;
}
.card-article:hover .card-media img { transform: scale(1.03); }

.card-meta {
  font-size: .78rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
  margin-bottom: 10px;
}
/* Author byline link on cards + article hero — inherits the meta colour
   but gets an underline-on-hover so readers see it's clickable. */
.card-author,
.byline-author {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.card-author:hover,
.byline-author:hover {
  color: var(--ink);
  border-bottom-color: currentColor;
}

/* ============================================================
   Author profile page
   ============================================================ */
.author-profile { margin-top: 24px; }

/* --- Left column header --- */
.author-articles-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.author-articles-title {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 6px;
}
.author-articles-count {
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.author-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--paper, #fafafa);
  border: 1px dashed var(--rule);
  border-radius: 12px;
}

/* --- Right sidebar --- */
.author-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px; align-self: flex-start; }
@media (max-width: 991px) { .author-sidebar { position: static; } }

.author-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 24px;
}

.author-card__portrait,
.author-card__portrait-empty {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 14px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--rule), 0 8px 24px -10px rgba(0,0,0,.18);
}
.author-card__portrait-empty {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.author-card__name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 4px;
}
.author-card__email {
  text-align: center;
  font-size: .85rem;
  margin: 0 0 14px;
}
.author-card__email a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.author-card__email a:hover { border-bottom-color: var(--ink-soft); }

.author-card__bio {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-top: 16px;
}

.author-card__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.author-card__stat {
  text-align: center;
}
.author-card__stat-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
}
.author-card__stat-label {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 4px;
  display: block;
}

.author-card__heading {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0 0 14px;
  text-align: center;
}
.author-card--share { padding: 22px 24px; }

.author-share {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.author-share__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.author-share__btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.author-share__btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* (author profile reuses the global .pager from below — no separate
   pagination styles needed.) */
.card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.card-title a { color: inherit; }
.card-body {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 18px;
  flex: 1;
}
.read-more {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.read-more:hover { border-bottom-color: var(--accent); color: var(--accent); }
.read-more .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.read-more:hover .arrow { transform: translateX(3px); }

/* -------- Page intro (about, terms, etc.) ---------------- */
.page-intro {
  padding: 8px 0 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
.page-eyebrow {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.page-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.page-lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* -------- Prose (article / legal pages) ------------------ */
.prose {
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 68ch;
}
.prose p { margin: 0 0 1em; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.9rem;
  margin: 1.6em 0 .5em;
  letter-spacing: -0.01em;
}
.prose h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  margin: 1.4em 0 .4em;
}
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.25em; }
.prose li { margin-bottom: .35em; }
.prose blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.4;
  border-left: 2px solid var(--ink);
  padding: .25em 0 .25em 1em;
  margin: 1.5em 0;
  color: var(--ink);
}
.prose strong { font-weight: 600; }

/* -------- Sidebar (article list / detail) ---------------- */
.sidebar {
  position: sticky;
  top: 120px;
}
.sidebar h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  margin: 0 0 12px;
  font-weight: 400;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.sidebar-block { margin-bottom: 36px; }

.search-form {
  position: relative;
  margin-bottom: 4px;
}
.search-form input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 32px 10px 0;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  outline: none;
}
.search-form input::placeholder { color: var(--ink-mute); }
.search-form button {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 4px;
  cursor: pointer;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-cloud a {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
}
.tag-cloud a:hover { color: var(--accent); border-color: var(--accent); }

.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.mini-list li:last-child { border-bottom: 0; }
.mini-list .mini-meta {
  font-size: .72rem;
  color: var(--ink-mute);
  letter-spacing: .03em;
  display: block;
  margin-bottom: 4px;
}
.mini-list .mini-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 600;
  display: block;
}

/* -------- Article detail header -------------------------- */
.article-hero {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 32px;
  margin-bottom: 40px;
}
.article-hero .crumbs {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.article-hero .crumbs a { color: var(--ink-mute); }
.article-hero .crumbs a:hover { color: var(--accent); }
.article-hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.article-hero .byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .85rem;
  color: var(--ink-soft);
}
.byline .dot {
  width: 4px; height: 4px;
  background: var(--ink-mute);
  border-radius: 50%;
  display: inline-block;
}

.article-figure {
  background: #e9e9e9;
  height: 320px;
  margin: 0 0 32px;
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, #e9e9e9 0 18px, #e3e3e3 18px 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .8rem;
  color: var(--ink-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* -------- Share rail (article detail) -------------------- */
.share-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 120px;
}
.share-rail .share-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 8px;
}
.share-rail a {
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.share-rail a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-2px);
}
.share-rail svg { width: 16px; height: 16px; }

/* -------- Contact form ----------------------------------- */
.field {
  position: relative;
  margin-bottom: 26px;
}
.field label {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  border-radius: 0;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--accent);
}

.btn-news {
  background: var(--ink);
  color: #fff !important;
  border: 0;
  padding: 14px 28px;
  border-radius: 0;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s ease;
}
.btn-news:hover { background: var(--accent); color: #fff !important; }
/* Loader state — appears the moment the contact form starts submitting.
   We dim the button, swap text to "Sending…", and show a thin spinning
   ring built from CSS borders (no extra assets). The button stays
   disabled until the response redirect lands. */
.btn-news.is-busy {
  opacity: .82;
  cursor: progress;
  background: var(--ink);  /* keep ink colour, don't flash to accent */
}
.btn-news.is-busy:hover { background: var(--ink); }
.btn-news .js-contact-submit-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gf-spin .7s linear infinite;
}
.btn-news.is-busy .js-contact-submit-spinner { display: inline-block; }
@keyframes gf-spin { to { transform: rotate(360deg); } }

/* -------- Two-column info (about) ------------------------ */
.info-row { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 40px 0; }
@media (min-width: 768px) {
  .info-row { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.info-row h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 12px;
}
.info-row p { color: var(--ink-soft); margin: 0; }

.stat-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 48px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 768px) {
  .stat-band { grid-template-columns: repeat(4, 1fr); }
}
.stat-band .stat {
  padding: 26px 18px;
  text-align: left;
  border-right: 1px solid var(--rule);
}
.stat-band .stat:last-child { border-right: 0; }
.stat .num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat .lab {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* -------- Footer ----------------------------------------- */
.foot {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: .92rem;
  color: var(--ink-soft);
}
.foot > div { min-width: 0; }
.foot-copy {
  line-height: 1.5;
}
.foot-copy .foot-brand { display: inline; }
.foot-links { display: flex; gap: 18px 22px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-soft); }
.foot-links a:hover { color: var(--accent); }
.foot-brand {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (max-width: 575px) {
  .foot {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
  }
  .foot-copy { font-size: .88rem; }
}

/* -------- Pagination ------------------------------------- */
.pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 36px;
}
.pager a, .pager span {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: .85rem;
  color: var(--ink);
}
.pager a:hover { border-color: var(--ink); }
.pager .current {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* -------- Small screens ---------------------------------- */
@media (max-width: 575px) {
  body { padding: 8px 0 32px; }
  .shell { width: 94%; padding: 24px 18px 36px; }
  .masthead { padding: 18px 18px; margin: -24px -18px 28px; }
  /* .mega responsive handled in the dedicated mega-nav block above. */
}


/* -------- Page loader ------------------------------------ */
.tn-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity .45s ease, visibility .45s ease;
}
.tn-loader.hide { opacity: 0; visibility: hidden; }
.tn-loader .tn-brand {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  opacity: 0;
  animation: tn-fade-in .6s ease forwards;
  /* If the publication name wraps on narrow phones, keep both lines
     centered rather than left-aligned inside the flex child. */
  text-align: center;
  max-width: 92vw;
  padding: 0 16px;
}
.tn-loader .tn-bar {
  position: relative;
  width: 220px;
  max-width: 60vw;
  height: 1px;
  background: #ececec;
  overflow: hidden;
}
.tn-loader .tn-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 40%;
  background: var(--ink);
  animation: tn-sweep 1.2s ease-in-out infinite;
}
.tn-loader .tn-cap {
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
  animation: tn-fade-in .8s ease .15s forwards;
  /* text-align: center keeps multi-line copy centred when it wraps on
     narrow phones. Symmetric padding matches `.tn-brand` so both blocks
     align on the same vertical axis — an earlier asymmetric
     padding-left compensation for the trailing letter-spacing pushed
     the cap visibly right of the brand line. */
  text-align: center;
  max-width: 92vw;
  padding: 0 16px;
}
@keyframes tn-sweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}
@keyframes tn-fade-in {
  to { opacity: 1; }
}

/* -------- Scroll to top ----------------------------------- */
.tn-totop {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .15s ease;
  z-index: 200;
}
.tn-totop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.tn-totop:hover { background: var(--accent); }
.tn-totop svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.tn-totop .ring {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-90deg);
}
.tn-totop .ring circle {
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 1.5;
  opacity: .25;
}
.tn-totop .ring .progress {
  stroke: var(--ink);
  opacity: .9;
  transition: stroke-dashoffset .1s linear;
}
.tn-totop:hover .ring .progress { stroke: var(--accent); opacity: 1; }


/* -------- Breaking ticker --------------------------------- */
.ticker {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 0 0 32px;
  overflow: hidden;
  background: #fff;
}
.ticker-tag {
  flex-shrink: 0;
  background: var(--ink);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  gap: 8px;
}
.ticker-tag .pulse {
  width: 7px; height: 7px;
  background: #ff5a5a;
  border-radius: 50%;
  animation: tn-pulse 1.4s ease-in-out infinite;
}
@keyframes tn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.25); }
}
.ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.ticker-track .ticker-content {
  display: inline-flex;
  white-space: nowrap;
  animation: tn-scroll 38s linear infinite;
  padding-left: 24px;
}
.ticker-track:hover .ticker-content { animation-play-state: paused; }
.ticker-content span {
  display: inline-block;
  padding: 0 28px;
  font-size: .9rem;
  color: var(--ink);
  border-right: 1px solid var(--rule);
  font-family: var(--serif);
}
@keyframes tn-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* -------- Hero lead story --------------------------------- */
.hero-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 16px 0 48px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
@media (min-width: 992px) {
  .hero-lead { grid-template-columns: 1.15fr 1fr; gap: 48px; }
}
.hero-figure {
  background: #ebebeb;
  aspect-ratio: 4 / 3;
  background-image: repeating-linear-gradient(135deg, #ebebeb 0 18px, #e3e3e3 18px 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .75rem;
  color: var(--ink-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-body { display: flex; flex-direction: column; justify-content: center; }
.hero-eyebrow {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.hero-title a { color: inherit; }
.hero-title a:hover { color: var(--accent); }
.hero-standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.hero-meta .dot { width: 4px; height: 4px; background: var(--ink-mute); border-radius: 50%; }

/* -------- Most read list ---------------------------------- */
.most-read .mr-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.most-read .mr-item:first-child { border-top: 1px solid var(--rule); }
.most-read .mr-num {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--ink-mute);
  letter-spacing: -0.04em;
}
.most-read .mr-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}
.most-read .mr-title:hover { color: var(--accent); }
.most-read .mr-meta {
  font-size: .72rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
}

/* -------- Opinion columnists ------------------------------ */
.opinion-card {
  padding: 28px 24px;
  background: #fafafa;
  border: 1px solid var(--rule);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: background .2s ease;
}
.opinion-card:hover { background: #f3f3f3; }
.opinion-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.opinion-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dcdcdc, #b8b8b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.opinion-name {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 600;
  display: block;
  line-height: 1.1;
}
.opinion-role {
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.opinion-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.opinion-link {
  margin-top: auto;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  align-self: flex-start;
}
.opinion-link:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* -------- Photo essay strip ------------------------------- */
.photo-strip {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin: 32px 0 16px;
}
@media (max-width: 767px) {
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip .ph-large { grid-column: 1 / -1; }
}
.ph {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #e6e6e6;
  background-image: repeating-linear-gradient(135deg, #e6e6e6 0 18px, #ddd 18px 36px);
  overflow: hidden;
  cursor: pointer;
}
.ph.ph-large { aspect-ratio: 4 / 5; }
.ph-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff;
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ph-cap .ph-num {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
  display: block;
  margin-bottom: 4px;
}

/* -------- Newsletter signup ------------------------------- */
.newsletter {
  border: 1px solid var(--ink);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 48px 0;
  align-items: center;
}
@media (min-width: 768px) {
  .newsletter { grid-template-columns: 1.2fr 1fr; gap: 48px; }
}
.newsletter h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.1;
}
.newsletter p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.5;
}
.nl-form {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ink);
}
.nl-form input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
.nl-form button {
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 0 12px 16px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nl-form button:hover { color: var(--accent); }
.nl-note {
  font-size: .72rem;
  color: var(--ink-mute);
  margin-top: 10px;
  letter-spacing: .03em;
}

/* -------- Market / weather strip -------------------------- */
.databand {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 48px;
}
@media (min-width: 768px) {
  .databand { grid-template-columns: repeat(5, 1fr); }
}
.databand .db {
  padding: 18px 16px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.databand .db:last-child { border-right: 0; }
.databand .db-label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.databand .db-val {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.databand .db-delta {
  font-size: .78rem;
  font-weight: 500;
}
.databand .db-delta.up { color: #1f8a5b; }
.databand .db-delta.down { color: #b03434; }


/* -------- Breadcrumbs ------------------------------------ */
.breadcrumb-bar {
  margin: 8px 0 24px;
  padding: 14px 0;
  border-top: 0px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.breadcrumb-bar a {
  color: var(--ink-mute);
  transition: color .15s ease;
}
.breadcrumb-bar a:hover { color: var(--accent); }
.breadcrumb-bar .sep { opacity: .5; }
.breadcrumb-bar .current { color: var(--ink); font-weight: 500; }


/* -------- Parsley.js validation -------------------------- */
.field input.parsley-error,
.field textarea.parsley-error,
.field select.parsley-error {
  border-bottom-color: #b03434;
}
.field input.parsley-success,
.field textarea.parsley-success,
.field select.parsley-success {
  border-bottom-color: #1f8a5b;
}
.parsley-errors-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: .78rem;
  color: #b03434;
  letter-spacing: .01em;
  font-family: var(--sans);
}
.parsley-errors-list li {
  padding: 4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.parsley-errors-list li::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #b03434;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  font-family: var(--serif);
}
.parsley-errors-list.filled { animation: tn-shake .25s ease; }
@keyframes tn-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}


/* -------- Article tag pills (below body) ----------------- */
/* Editorial-style metadata line: 4px-radius rectangles with a thin border
   and ink text — sits visually with the dateline / byline conventions
   used elsewhere on news sites, NOT the colored-CTA pill look of the
   admin chrome. Hover gets a soft peach wash so the link affordance is
   still obvious. */
.article-tags {
  margin: 22px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.article-tags__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rule);
  margin-right: 6px;
  font-family: var(--sans);
}
.article-tags__pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: transparent;
  color: var(--ink, #1a1a1a);
  border: 1px solid var(--rule, #d1d5db);
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.55;
  text-decoration: none;
  font-family: var(--sans);
  letter-spacing: .005em;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.article-tags__pill:hover,
.article-tags__pill:focus {
  background: rgba(0, 0, 0, .04);
  border-color: var(--ink, #1a1a1a);
  color: var(--ink, #1a1a1a);
  text-decoration: none;
}

/* -------- Tag cloud (tag index page /<lang>/tag) ---------- */
/* ---- Tag INDEX cloud — full /<lang>/tag page ----
   Distinct from the sidebar .tag-cloud above (which serves the Topics
   rail with full-pill 999px buttons). The :has(.tag-cloud__pill)
   selector picks ONLY a .tag-cloud that actually contains the index
   chips, so the old sidebar rules don't leak in. We then override the
   pill anchor + add the inline count style. */
.tag-cloud:has(.tag-cloud__pill) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 7px;
  align-items: baseline;
  padding: 8px 0 32px;
  max-width: 880px;
  margin: 0 auto;
}
/* Reset the legacy `.tag-cloud a` shape (uppercase pill) for tag-index pills */
.tag-cloud a.tag-cloud__pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px !important;
  background: transparent;
  color: var(--ink, #1a1a1a) !important;
  border: 1px solid var(--rule, #d1d5db) !important;
  border-radius: 4px !important;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .005em !important;
  text-transform: none !important;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.tag-cloud a.tag-cloud__pill:hover,
.tag-cloud a.tag-cloud__pill:focus {
  background: var(--ink, #1a1a1a) !important;
  border-color: var(--ink, #1a1a1a) !important;
  color: #fff !important;
  text-decoration: none;
}
/* Count — inline tertiary digit, no separate pill background. */
.tag-cloud a.tag-cloud__pill .tag-cloud__count {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent !important;
  font-size: .72em;
  font-weight: 600;
  color: var(--ink-soft, #6b6b6b);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  border-radius: 0;
}
.tag-cloud a.tag-cloud__pill:hover .tag-cloud__count,
.tag-cloud a.tag-cloud__pill:focus .tag-cloud__count {
  color: rgba(255, 255, 255, .7) !important;
}

/* -------- Mobile share strip ----------------------------- */
.share-strip {
  margin: 36px 0 4px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.share-strip .share-strip-label {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 6px;
  flex-basis: 100%;
  margin-bottom: 4px;
}
.share-strip a {
  width: 38px; height: 38px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.share-strip a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-2px);
}
.share-strip svg { width: 15px; height: 15px; }

@media (min-width: 480px) {
  .share-strip .share-strip-label {
    flex-basis: auto;
    margin-bottom: 0;
  }
  .share-strip { gap: 12px; }
  .share-strip a { width: 40px; height: 40px; }
  .share-strip svg { width: 16px; height: 16px; }
}

/* ============================================================
   Inline article v2 promotion cards.
   Renders when an article has multi-campaign attachments via the
   partner-system v2 picker. Visually distinct from the lead-form
   block so readers tell at a glance "this is sponsored content".
   ============================================================ */
.article-v2-promotions { margin: 28px 0; }
.article-v2-slot { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.article-v2-slot:last-child { margin-bottom: 0; }
.article-v2-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 26px;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s, background-color .15s;
    position: relative;
}
.article-v2-card:hover { border-color: var(--ink); background: #fff; }
.article-v2-card__eyebrow {
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.article-v2-card__headline {
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--ink);
}
.article-v2-card__desc { font-size: .92rem; color: var(--ink-soft); }
.article-v2-card--voucher .article-v2-card__code {
    display: inline-block;
    align-self: flex-start;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 4px 12px;
    background: #fff;
    border: 1.5px dashed var(--ink);
    margin-top: 4px;
}
.article-v2-card__arrow {
    position: absolute;
    top: 22px;
    right: 22px;
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--ink-mute);
    transition: transform .2s ease, color .2s ease;
}
.article-v2-card:hover .article-v2-card__arrow { transform: translateX(4px); color: var(--ink); }
.article-v2-lead-shell { padding: 16px; background: var(--bg-card); border: 1px dashed var(--rule); font-size: .85rem; }

/* ============================================================
   Voucher landing page v2 additions
   • Ink brand banner (partner monogram + name in white on black)
   • Countdown chip + trust-badge strip + collapsible benefits
   Layered on top of the base voucher-landing styles below.
   ============================================================ */
.voucher-landing__brand-bar {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 22px 32px !important;
  background: linear-gradient(135deg, #0a0a0a 0%, #262626 100%) !important;
  color: #fff !important;
  border-radius: 6px 6px 0 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.voucher-landing__brand-bar::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important; right: -20% !important;
  width: 240px !important; height: 240px !important;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.voucher-landing__brand-mono {
  flex: 0 0 auto !important;
  width: 52px !important; height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 50% !important;
  font-family: var(--serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: #ffffff !important;
}
.voucher-landing__brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.voucher-landing__brand-eyebrow {
  font-family: var(--sans) !important;
  font-size: .64rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.65) !important;
  font-weight: 600 !important;
}
.voucher-landing__brand-name {
  font-family: var(--sans) !important;
  font-size: 1.05rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  line-height: 1.2 !important;
}
.voucher-landing__body {
  padding: 40px 56px 44px !important;
  text-align: center !important;
}
.voucher-landing__card {
  padding: 0 !important;
  overflow: hidden !important;
}
.voucher-landing__card::before { display: none !important; }
.voucher-landing__card::after  { display: none !important; }
.voucher-landing__eyebrow-row {
  margin: 0 0 20px !important;
  display: flex !important;
  justify-content: center !important;
}
.voucher-landing__eyebrow {
  padding: 6px 14px !important;
  background: rgba(138, 51, 36, .08) !important;
  border-radius: 20px !important;
  color: var(--accent, #8a3324) !important;
}
.voucher-landing__validity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto 24px !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  border: 1px solid var(--rule, #e5e5e5) !important;
  border-radius: 20px !important;
  font-family: var(--sans) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--ink, #1a1a1a) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
}
.voucher-landing__validity svg { flex-shrink: 0 !important; color: var(--accent, #8a3324) !important; }
.voucher-landing__validity.is-urgent {
  background: #fff5f3 !important;
  border-color: rgba(138,51,36,.3) !important;
  color: var(--accent, #8a3324) !important;
}
.voucher-landing__validity.is-urgent svg { animation: gfClockTick 1s ease-in-out infinite !important; }
@keyframes gfClockTick {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(15deg); }
}
.voucher-landing__validity.is-expired {
  background: #f5f5f5 !important;
  border-color: #d0d0d0 !important;
  color: #6b6b6b !important;
}
.voucher-landing__badges {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 36px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.voucher-landing__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: #fafafa !important;
  border: 1px solid var(--rule, #e5e5e5) !important;
  border-radius: 24px !important;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease !important;
}
.voucher-landing__badge:hover {
  border-color: var(--ink, #1a1a1a) !important;
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}
.voucher-landing__badge-icon {
  display: inline-flex !important;
  color: var(--accent, #8a3324) !important;
  flex-shrink: 0 !important;
}
.voucher-landing__badge-text {
  font-family: var(--sans) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: var(--ink, #1a1a1a) !important;
  white-space: nowrap !important;
}
.voucher-landing__benefits.is-collapsible { position: relative !important; }
.voucher-landing__benefits.is-collapsible .voucher-landing__benefits-inner {
  max-height: 5.5em !important;
  overflow: hidden !important;
  mask-image: linear-gradient(180deg, #000 60%, transparent) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent) !important;
  transition: max-height .35s ease !important;
}
.voucher-landing__benefits.is-collapsible.is-expanded .voucher-landing__benefits-inner {
  max-height: 200em !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.voucher-landing__benefits-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 12px auto 0 !important;
  padding: 6px 14px !important;
  background: transparent !important;
  border: 1px solid var(--rule, #e5e5e5) !important;
  border-radius: 16px !important;
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #6b6b6b) !important;
  cursor: pointer !important;
  transition: color .15s ease, border-color .15s ease !important;
}
.voucher-landing__benefits-toggle:hover {
  color: var(--ink, #1a1a1a) !important;
  border-color: var(--ink, #1a1a1a) !important;
}
.voucher-landing__benefits-toggle svg { transition: transform .2s ease !important; }
@media (max-width: 640px) {
  .voucher-landing__brand-bar { padding: 18px 20px !important; gap: 12px !important; }
  .voucher-landing__brand-mono { width: 44px !important; height: 44px !important; font-size: 1rem !important; }
  .voucher-landing__brand-name { font-size: .95rem !important; }
  .voucher-landing__body { padding: 28px 22px 30px !important; }
  .voucher-landing__badges { gap: 8px !important; margin-bottom: 28px !important; }
  .voucher-landing__badge { padding: 6px 10px !important; }
  .voucher-landing__badge-text { font-size: .72rem !important; }
}

/* ============================================================
   Voucher landing page — base styles (kept from earlier)
   ============================================================ */
.voucher-landing {
  max-width: 820px !important;
  margin: 60px auto 80px !important;
  padding: 0 24px !important;
  position: relative !important;
}
/* Ambient background layers: subtle wash + soft top vignette so
   the card feels like a stage-lit feature, not a floating panel. */
.voucher-landing::before {
  content: "" !important;
  position: absolute !important; inset: -80px -24px !important; z-index: -1 !important;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .015) 0%, transparent 40%) !important;
  pointer-events: none !important;
}
.voucher-landing__card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 6px !important;
  padding: 52px 56px 44px !important;
  text-align: center !important;
  position: relative !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .05),
    0 4px 14px -4px rgba(0, 0, 0, .06),
    0 24px 48px -20px rgba(0, 0, 0, .14) !important;
}
/* Thin ink accent bar at the top edge — editorial signature. */
.voucher-landing__card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 56px !important; right: 56px !important;
  height: 3px !important;
  background: var(--ink, #1a1a1a) !important;
}
/* Corner tick-marks (subtle decorative L brackets in each corner) */
.voucher-landing__card::after {
  content: "" !important;
  position: absolute !important;
  top: 16px !important; left: 16px !important;
  width: 18px !important; height: 18px !important;
  border-top: 1.5px solid var(--ink, #1a1a1a) !important;
  border-left: 1.5px solid var(--ink, #1a1a1a) !important;
  opacity: .35 !important;
  pointer-events: none !important;
}

/* ----- Ribbon: eyebrow tag + validity pill ----- */
.voucher-landing__ribbon {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 32px !important;
  flex-wrap: wrap !important;
}
.voucher-landing__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--sans) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ink, #1a1a1a) !important;
}
.voucher-landing__eyebrow-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--accent, #8a3324) !important;
  box-shadow: 0 0 0 4px rgba(138, 51, 36, .18) !important;
  display: inline-block !important;
  animation: gfVoucherPulse 2.4s ease-in-out infinite !important;
}
@keyframes gfVoucherPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(138, 51, 36, .18); }
  50%      { box-shadow: 0 0 0 7px rgba(138, 51, 36, .08); }
}
.voucher-landing__validity-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  color: var(--ink, #1a1a1a) !important;
  padding: 5px 12px !important;
  border: 1px solid var(--ink, #1a1a1a) !important;
  border-radius: 16px !important;
  background: #fff !important;
  text-transform: uppercase !important;
}
.voucher-landing__validity-pill::before {
  content: "⏳" !important;
  font-size: .7rem !important;
  opacity: .7 !important;
}

/* ----- Partner attribution + headline ----- */
.voucher-landing__partner-name {
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #6b6b6b) !important;
  margin: 0 0 14px !important;
  font-weight: 600 !important;
}
.voucher-landing__headline {
  font-family: var(--serif) !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: 1.05 !important;
  margin: 0 auto 40px !important;
  max-width: 600px !important;
  color: var(--ink, #1a1a1a) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

/* ----- Code block — the hero interactive element ----- */
.voucher-landing__code-block {
  margin: 0 auto 40px !important;
  max-width: 500px !important;
  padding: 26px 24px 22px !important;
  background: linear-gradient(180deg, #fafaf7 0%, #f5f5f0 100%) !important;
  border-radius: 8px !important;
  border: 1px solid var(--rule, #e5e5e5) !important;
  position: relative !important;
}
/* Perforated edges (ticket-stub look) — small circular cutouts on
   left & right sides evoke a physical coupon. Pure CSS, no images. */
.voucher-landing__code-block::before,
.voucher-landing__code-block::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  width: 14px !important; height: 14px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  border: 1px solid var(--rule, #e5e5e5) !important;
}
.voucher-landing__code-block::before { left: -8px !important; }
.voucher-landing__code-block::after  { right: -8px !important; }
.voucher-landing__code-caption {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #6b6b6b) !important;
  margin: 0 0 14px !important;
}
.voucher-landing__code-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 2px dashed var(--ink, #1a1a1a) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
}
.voucher-landing__code {
  flex: 1 1 auto !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  padding: 18px 14px !important;
  color: var(--ink, #1a1a1a) !important;
  user-select: all !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .02) 0%,
      transparent 50%,
      rgba(0, 0, 0, .02) 100%) !important;
}
.voucher-landing__copy {
  flex: 0 0 auto !important;
  background: var(--ink, #1a1a1a) !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--sans) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color .18s ease, color .18s ease, transform .1s ease !important;
  min-height: 62px !important;
}
.voucher-landing__copy:hover  { background: var(--accent, #8a3324) !important; }
.voucher-landing__copy:active { transform: translateY(1px) !important; }
.voucher-landing__copy.is-copied {
  background: #2c7a2c !important;
  color: #fff !important;
}
.voucher-landing__copy-icon { flex-shrink: 0 !important; }

/* ----- Editorial benefits paragraph ----- */
.voucher-landing__benefits {
  font-family: var(--serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: var(--ink-soft, #4b4b4b) !important;
  margin: 0 auto 40px !important;
  text-align: left !important;
  max-width: 600px !important;
}
.voucher-landing__benefits > *:first-child { margin-top: 0 !important; }
.voucher-landing__benefits > *:last-child { margin-bottom: 0 !important; }

/* ----- Redeem CTA + attribution ----- */
.voucher-landing__cta-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 12px !important;
}
.voucher-landing__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 38px !important;
  background: var(--ink, #1a1a1a) !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 3px !important;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .18),
    0 12px 28px -8px rgba(0, 0, 0, .28) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle sheen sweep on the CTA — one-time animation on load. */
.voucher-landing__cta::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -60% !important; width: 40% !important; height: 100% !important;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255, 255, 255, .15) 50%,
              transparent 100%) !important;
  transform: skewX(-20deg) !important;
  animation: gfCtaSheen 2.6s ease-out .8s 1 forwards !important;
  pointer-events: none !important;
}
@keyframes gfCtaSheen {
  0%   { left: -60%; }
  100% { left: 140%; }
}
.voucher-landing__cta:hover {
  background: var(--accent, #8a3324) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .18),
    0 16px 32px -8px rgba(0, 0, 0, .3) !important;
}
.voucher-landing__cta-arrow {
  font-family: var(--serif) !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  transition: transform .2s ease !important;
  display: inline-block !important;
}
.voucher-landing__cta:hover .voucher-landing__cta-arrow {
  transform: translateX(6px) !important;
}
.voucher-landing__leaving {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--sans) !important;
  font-size: .7rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #8a8a8a) !important;
  margin: 0 !important;
}
.voucher-landing__leaving svg { flex-shrink: 0 !important; opacity: .7 !important; }

/* ----- Fine-print disclaimer ----- */
.voucher-landing__disclaimer {
  margin: 36px auto 0 !important;
  max-width: 580px !important;
}
.voucher-landing__rule {
  border: 0 !important;
  height: 1px !important;
  background: var(--rule, #e5e5e5) !important;
  margin: 0 auto 24px !important;
  max-width: 80px !important;
  position: relative !important;
}
.voucher-landing__rule::before {
  content: "❊" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #ffffff !important;
  padding: 0 8px !important;
  color: var(--ink-mute, #b0a99f) !important;
  font-size: .8rem !important;
  line-height: 1 !important;
}
.voucher-landing__disclaimer p {
  font-family: var(--serif) !important;
  font-size: .82rem !important;
  line-height: 1.7 !important;
  color: var(--ink-mute, #8a8a8a) !important;
  font-style: italic !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ----- Responsive tweaks ----- */
@media (max-width: 640px) {
  .voucher-landing { margin: 40px auto; padding: 0 16px; }
  .voucher-landing__card { padding: 32px 24px 30px; }
  .voucher-landing__card::before { left: 24px; right: 24px; }
  .voucher-landing__headline { font-size: clamp(1.6rem, 6vw, 2.1rem); margin-bottom: 26px; }
  .voucher-landing__code-block { padding: 18px 14px 14px; margin-bottom: 26px; }
  .voucher-landing__code { font-size: 1.15rem; padding: 14px 8px; letter-spacing: .1em; }
  .voucher-landing__copy { padding: 0 14px; font-size: .68rem; }
  .voucher-landing__copy-label { display: none; }
  .voucher-landing__cta { padding: 14px 24px; font-size: .74rem; letter-spacing: .12em; }
}
@media (max-width: 400px) {
  .voucher-landing__ribbon { justify-content: center; }
}

/* ============================================================
   Voucher landing — EDITORIAL SPREAD REBUILD
   Layered LAST so it wins the cascade over everything above.
   Asymmetric grid: vertical brand spine + hero content;
   3-step redemption strip; ornament rule; wax-seal touches.
   ============================================================ */
.voucher-landing {
  max-width: 960px !important;
  margin: 60px auto 80px !important;
  padding: 0 24px !important;
}
.voucher-landing__card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%) !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 8px 24px -8px rgba(0, 0, 0, .10),
    0 28px 56px -20px rgba(0, 0, 0, .18) !important;
  position: relative !important;
}
/* Kill everything from earlier layers we don't want */
.voucher-landing__card::before,
.voucher-landing__card::after { display: none !important; }
.voucher-landing__brand-bar { display: none !important; }
.voucher-landing__ribbon    { display: none !important; }
.voucher-landing__partner-name { display: none !important; }
.voucher-landing__meta-row + .voucher-landing__eyebrow { margin-top: 12px !important; }

/* Faint diagonal watermark of the partner name — sits behind everything */
.voucher-landing__card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0, 0, 0, .012) 0px,
      rgba(0, 0, 0, .012) 1px,
      transparent 1px,
      transparent 8px) !important;
  pointer-events: none !important;
}

/* --- TOP SPREAD (2-col grid) --- */
.voucher-landing__spread {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  min-height: 320px !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
}

/* --- Vertical brand spine (left column) --- */
.voucher-landing__spine {
  background: #0a0a0a !important;
  color: #fff !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.voucher-landing__spine::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.09) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 40%, rgba(255,255,255,.02) 100%) !important;
  pointer-events: none !important;
}
.voucher-landing__spine-serial,
.voucher-landing__spine-year {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative !important;
  z-index: 1 !important;
}
.voucher-landing__spine-label {
  font-family: var(--sans) !important;
  font-size: .56rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.5) !important;
  font-weight: 600 !important;
}
.voucher-landing__spine-value {
  font-family: var(--serif) !important;
  font-size: .82rem !important;
  color: #fff !important;
  letter-spacing: .04em !important;
  font-weight: 600 !important;
}
.voucher-landing__spine-brand {
  /* Vertically-rotated partner name — magazine spine effect */
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  font-family: var(--serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.92) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 200px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* --- Right column: hero content --- */
.voucher-landing__content {
  padding: 44px 52px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* small meta row */
.voucher-landing__meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--sans) !important;
  font-size: .64rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #6b6b6b) !important;
  margin: 0 0 20px !important;
  font-weight: 600 !important;
}
.voucher-landing__meta-label { color: var(--ink-mute, #a0a0a0) !important; }
.voucher-landing__meta-partner {
  color: var(--ink, #1a1a1a) !important;
  letter-spacing: .18em !important;
  position: relative !important;
  padding-left: 14px !important;
}
.voucher-landing__meta-partner::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important; height: 1.5px !important;
  background: var(--ink, #1a1a1a) !important;
}

/* eyebrow chip */
.voucher-landing .voucher-landing__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  background: rgba(138, 51, 36, .08) !important;
  border: 1px solid rgba(138, 51, 36, .18) !important;
  border-radius: 20px !important;
  align-self: flex-start !important;
  margin: 0 0 18px !important;
  font-family: var(--sans) !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--accent, #8a3324) !important;
}

/* headline */
.voucher-landing .voucher-landing__headline {
  font-family: var(--serif) !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.02em !important;
  font-weight: 700 !important;
  margin: 0 0 24px !important;
  color: var(--ink, #1a1a1a) !important;
  max-width: none !important;
  text-align: left !important;
}

/* countdown pill (inline, left-aligned inside content column) */
.voucher-landing .voucher-landing__validity {
  align-self: flex-start !important;
  margin: 0 0 30px !important;
}

/* --- Code block, centered inside content column --- */
.voucher-landing__code-block {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  align-self: stretch !important;
}
.voucher-landing__code-block::before,
.voucher-landing__code-block::after { display: none !important; }

.voucher-landing__code-frame {
  padding: 22px 20px !important;
  background: #fbfaf5 !important;
  border: 1px dashed rgba(0, 0, 0, .18) !important;
  border-radius: 8px !important;
  position: relative !important;
}
.voucher-landing__code-frame::before,
.voucher-landing__code-frame::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important; height: 16px !important;
}
.voucher-landing__code-frame::before {
  top: -1px !important; left: -1px !important;
  border-top: 2px solid var(--ink, #1a1a1a) !important;
  border-left: 2px solid var(--ink, #1a1a1a) !important;
}
.voucher-landing__code-frame::after {
  bottom: -1px !important; right: -1px !important;
  border-bottom: 2px solid var(--ink, #1a1a1a) !important;
  border-right: 2px solid var(--ink, #1a1a1a) !important;
}
.voucher-landing__code-caption {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: .62rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #8a8a8a) !important;
  margin: 0 0 12px !important;
  font-weight: 700 !important;
}
.voucher-landing__code-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 2px solid var(--ink, #1a1a1a) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important;
}
.voucher-landing__code {
  flex: 1 1 auto !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  padding: 16px 12px !important;
  color: var(--ink, #1a1a1a) !important;
  user-select: all !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8f6ef 100%) !important;
}
.voucher-landing__copy {
  flex: 0 0 auto !important;
  background: var(--ink, #1a1a1a) !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 0 20px !important;
  min-height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color .18s ease !important;
}
.voucher-landing__copy:hover  { background: var(--accent, #8a3324) !important; }
.voucher-landing__copy.is-copied { background: #2c7a2c !important; }

/* --- Ornament divider --- */
.voucher-landing__ornament {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 26px 52px 20px !important;
  color: var(--ink-mute, #a0a0a0) !important;
}
.voucher-landing__ornament-side {
  flex: 1 1 auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.12) 70%, transparent 100%) !important;
}
.voucher-landing__ornament-mark {
  font-size: 1rem !important;
  color: var(--accent, #8a3324) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* --- 3-step redemption strip --- */
.voucher-landing__steps {
  list-style: none !important;
  padding: 0 52px !important;
  margin: 0 0 40px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  counter-reset: step !important;
}
.voucher-landing__step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  border-radius: 4px !important;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.voucher-landing__step:hover {
  border-color: var(--ink, #1a1a1a) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .12) !important;
}
.voucher-landing__step-num {
  flex: 0 0 auto !important;
  font-family: var(--serif) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--accent, #8a3324) !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  min-width: 30px !important;
}
.voucher-landing__step-text {
  font-family: var(--sans) !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
  color: var(--ink, #1a1a1a) !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}

/* --- Foot: benefits, CTA, disclaimer --- */
.voucher-landing__foot {
  padding: 0 52px 44px !important;
  text-align: center !important;
}
.voucher-landing__benefits {
  text-align: left !important;
  max-width: 620px !important;
  margin: 0 auto 30px !important;
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--ink-soft, #4b4b4b) !important;
}
.voucher-landing__benefits.is-collapsible .voucher-landing__benefits-inner {
  max-height: 6em !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent) !important;
          mask-image: linear-gradient(180deg, #000 65%, transparent) !important;
  transition: max-height .35s ease !important;
}
.voucher-landing__benefits.is-collapsible.is-expanded .voucher-landing__benefits-inner {
  max-height: 200em !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
.voucher-landing__benefits-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 14px auto 0 !important;
  padding: 6px 14px !important;
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, .18) !important;
  border-radius: 16px !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #6b6b6b) !important;
  cursor: pointer !important;
  transition: color .15s ease, border-color .15s ease !important;
}
.voucher-landing__benefits-toggle:hover {
  color: var(--ink, #1a1a1a) !important;
  border-color: var(--ink, #1a1a1a) !important;
}

/* CTA */
.voucher-landing__cta-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
}
.voucher-landing__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 40px !important;
  background: var(--ink, #1a1a1a) !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .18),
    0 12px 28px -8px rgba(0, 0, 0, .32) !important;
  position: relative !important;
  overflow: hidden !important;
}
.voucher-landing__cta::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -60% !important; width: 40% !important; height: 100% !important;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%) !important;
  transform: skewX(-20deg) !important;
  animation: gfCtaSheen 3s ease-out .8s 1 forwards !important;
  pointer-events: none !important;
}
.voucher-landing__cta:hover {
  background: var(--accent, #8a3324) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .18),
    0 16px 32px -8px rgba(0, 0, 0, .3) !important;
}
.voucher-landing__cta-arrow {
  font-family: var(--serif) !important;
  font-size: 1.15rem !important;
  transition: transform .2s ease !important;
}
.voucher-landing__cta:hover .voucher-landing__cta-arrow {
  transform: translateX(6px) !important;
}
.voucher-landing__leaving {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--sans) !important;
  font-size: .66rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, #8a8a8a) !important;
  margin: 0 !important;
}
.voucher-landing__leaving svg { flex-shrink: 0 !important; opacity: .7 !important; }

/* Disclaimer */
.voucher-landing__disclaimer {
  margin: 34px auto 0 !important;
  max-width: 620px !important;
  padding: 0 !important;
}
.voucher-landing__rule {
  border: 0 !important;
  height: 1px !important;
  background: rgba(0, 0, 0, .12) !important;
  margin: 0 auto 20px !important;
  max-width: 100px !important;
  position: relative !important;
}
.voucher-landing__rule::before {
  content: "❊" !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #ffffff !important;
  padding: 0 8px !important;
  color: var(--accent, #8a3324) !important;
  font-size: .78rem !important;
}
.voucher-landing__disclaimer p {
  font-family: var(--serif) !important;
  font-size: .8rem !important;
  line-height: 1.7 !important;
  color: var(--ink-mute, #8a8a8a) !important;
  font-style: italic !important;
  margin: 0 !important;
  text-align: center !important;
}

@keyframes gfCtaSheen {
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .voucher-landing__spread {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .voucher-landing__spine {
    flex-direction: row !important;
    padding: 14px 22px !important;
    gap: 20px !important;
  }
  .voucher-landing__spine-brand {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: .95rem !important;
    letter-spacing: .16em !important;
    max-height: none !important;
    text-align: center !important;
    flex: 1 1 auto !important;
  }
  .voucher-landing__spine-serial,
  .voucher-landing__spine-year { flex-direction: row !important; gap: 8px !important; }
  .voucher-landing__spine-label { font-size: .58rem !important; }
  .voucher-landing__spine-value { font-size: .8rem !important; }
  .voucher-landing__content { padding: 30px 24px 26px !important; }
  .voucher-landing__ornament { padding: 20px 24px 16px !important; }
  .voucher-landing__steps {
    padding: 0 24px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 32px !important;
  }
  .voucher-landing__foot { padding: 0 24px 34px !important; }
  .voucher-landing__cta { padding: 15px 28px !important; font-size: .78rem !important; letter-spacing: .16em !important; }
}
   Consolidated mobile / tablet / desktop fixes from the frontend audit.
   Grouped by breakpoint (largest → smallest) so cascade order is obvious.
   Every rule below addresses a specific finding; remove an item only with
   the matching audit finding in mind.
   =========================================================================== */

/* ---- Safety net: prose content (article body) must never push the page
        wider than the viewport. Long URLs / unbroken citations break with
        overflow-wrap, code samples scroll on their own. */
.prose,
.prose p,
.prose li,
.prose blockquote,
.prose figcaption {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.prose a { word-break: break-word; }
.prose pre,
.prose table { max-width: 100%; overflow-x: auto; }
.prose img,
.prose video,
.prose iframe,
.hero-figure img,
.hero-figure { max-width: 100%; }

/* ---- Tablet landscape and below (≤1023px) ---- */
@media (max-width: 1023px) {
  /* Global .sidebar sticky offset is desktop-only; let it flow on tablet so
     the main column doesn't compete with a stuck rail. (.author-sidebar
     already had this; this catches the rest.) */
  .sidebar { position: static; top: auto; }

  /* Hero-figure inside hero-lead grid keeps its 4:3 ratio without
     overflowing narrow viewports. */
  .hero-figure { width: 100%; }

  /* Site logo image — `.brand-logo` renders at the image's natural size by
     design (admin uploads at the size they want). On phones the natural
     size reads as too timid next to the language pill + hamburger, so we
     force a generous floor that scales with viewport. Width auto-derives
     via `object-fit: contain` so aspect ratio is preserved. Set via
     `height` (not `max-height`) per earlier feedback that `max-height`
     constrained the desktop rendering. */
  .brand-logo { height: clamp(60px, 14vw, 88px); width: auto; }

  /* Language switcher on phones/tablets: collapse to flag + caret so
     the masthead reclaims the horizontal room for the logo. The full
     language name is still inside the dropdown (with its own flag) so
     visitors can identify each option clearly when they open it. */
  .lang-toggle .lang-name { display: none; }
  .lang-toggle {
    padding: 8px 10px;
    gap: 6px;
  }
  /* Slightly larger flag in the toggle so the trigger reads as a clear
     country mark rather than a tiny icon. */
  .lang-toggle .lang-flag { width: 26px; height: 19px; }
}

/* ---- Tablet portrait (≤991px) ---- */
@media (max-width: 991px) {
  /* Hero-lead grid stacks earlier — the 992px-only breakpoint left
     768–991px cramped. */
  .hero-lead { grid-template-columns: 1fr; gap: 24px; }

  /* Newsletter feels balanced as a single column down to laptop sizes. */
  .newsletter { gap: 28px; }
}

/* ---- Large phone / small tablet (≤767px) ---- */
@media (max-width: 767px) {
  /* Photo strip — the 2fr/1fr/1fr default looks compressed below 768px.
     Stack to a single column with each photo full-width. */
  .photo-strip { grid-template-columns: 1fr; gap: 18px; }
  .photo-strip .ph-large { grid-column: auto; }

  /* Most-read numbers shrink so the title gets room to breathe. */
  .most-read .mr-num { font-size: 2rem; }

  /* Article tags pack tighter — wider gap eats too much line space when
     there are 4+ tags. */
  .article-tags { gap: 4px 5px; }
}

/* ---- Small phone (≤575px) ---- */
@media (max-width: 575px) {
  /* Body prose scales down — 1.35rem is unreadable on a 375px viewport. */
  .prose { font-size: 1.05rem; line-height: 1.7; }
  .prose h2 { font-size: 1.35rem; }
  .prose h3 { font-size: 1.15rem; }
  .prose blockquote { font-size: 1.2rem; line-height: 1.5; }

  /* Page-title and article-hero clamps had a high floor (2.2–2.4rem)
     that overrode the vw component; recalibrate so headings actually
     shrink on phones. */
  .page-title    { font-size: clamp(1.8rem, 4vw, 3.6rem); }
  .article-hero h1 { font-size: clamp(1.6rem, 3.5vw, 3.4rem); line-height: 1.18; }

  /* Stat band: 4-col on desktop / 2-col default — single column on phones
     to make each value/label fully readable. */
  .stat-band { grid-template-columns: 1fr; gap: 14px; }
  .stat { padding: 18px 14px; }
  .stat-value { font-size: 1.8rem; }

  /* Data band (markets/weather/etc.): stack so each metric reads on its
     own row instead of squeezing 5 into a horizontal strip. */
  .databand { grid-template-columns: 1fr; gap: 10px; }
  .databand .db { padding: 12px 14px; }

  /* Tag cloud — slimmer pills, same touch target via padding. */
  .tag-cloud a { padding: 5px 9px; font-size: .72rem; }

  /* Breadcrumb bar wraps cleaner with a tighter font + gap on phones. */
  .breadcrumb-bar { font-size: .72rem; gap: 4px; }
  .breadcrumb-bar .sep { margin: 0 2px; }

  /* Footer link row stays side-by-side on mobile (per user preference)
     but with smaller gap + wrap enabled so long labels can flow onto a
     second row instead of overflowing the viewport. */
  .foot-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: flex-start;
  }
  .foot-links a { display: inline-block; }

  /* Brand + copyright stack on mobile so a long brand name doesn't get
     its copyright clause broken mid-phrase. Two paths covered:
     1. Built-in fallback markup uses `.foot-copy` span — flip to block.
     2. Admin-authored `.foot-copyright` text gets an injected
        `<br class="foot-copy-br">` before the first ©; show it here.
     `!important` is used so the desktop default below (which sits later
     in the file and would otherwise win the equal-specificity cascade)
     can't override the mobile rule. */
  .foot-copy {
    display: block;
    margin-top: 4px;
  }
  .foot-copy-br { display: inline !important; }
}
/* Default — hide the injected mobile break on every viewport that
   doesn't match the mobile media query above. Outside the @media block
   so it applies on desktop / tablet. */
.foot-copy-br { display: none; }

/* ---- Small phone (≤480px) — touch / overflow tightening ---- */
@media (max-width: 480px) {
  /* Captcha image — fixed 320px overflows narrow phones. Cap to viewport. */
  .gf-captcha-image { width: 100%; max-width: 240px; height: auto; }

  /* Share strip — five 38–40px buttons + gaps overflow narrow phones.
     Shrink to fit. */
  .share-strip { gap: 8px; }
  .share-strip a { width: 36px; height: 36px; }
  .share-strip svg { width: 14px; height: 14px; }

  /* Pager — same overflow story for 7+ numbered buttons. */
  .pager { gap: 4px; }
  .pager a, .pager span { width: 34px; height: 34px; font-size: .75rem; }

  /* Newsletter form input + button were always side-by-side; on a 360px
     phone the input collapses to ~1ch. Stack them. */
  .nl-form { flex-direction: column; gap: 8px; }
  .nl-form input,
  .nl-form button { width: 100%; }
  .nl-form button { padding: 12px 16px; }

  /* Opinion-author block becomes vertical so the byline + label have
     full row width. */
  .opinion-author { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Ticker text — tighten padding/font so spans wrap cleanly. */
  .ticker-content span { padding: 0 14px; font-size: .8rem; }

  /* Search button — give a real 40×40 touch target on phones. */
  .search-form { position: relative; }
  .search-form button {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
  }

  /* Scroll-to-top — minimum 16px edge inset on tiny viewports so the FAB
     never overlaps content or the soft keyboard. */
  .tn-totop {
    right: clamp(16px, 5vw, 32px);
    bottom: clamp(16px, 5vw, 32px);
  }
}

/* ---- Very small phone (≤360px) — only the most-affected widgets ---- */
@media (max-width: 360px) {
  .article-hero h1 { font-size: 1.5rem; }
  .page-title       { font-size: 1.6rem; }
  .prose            { font-size: 1rem; }
}


/* ============================================================
   Frontend FAQ accordion — rendered on articles, authors,
   categories, cms pages, and tag archives when the entity has
   faqs_enabled=1 AND at least one Q&A in the current language.
   Uses native <details>/<summary> so it works with JS off.
   ============================================================ */
.fe-faq {
  margin: 48px 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.fe-faq__heading {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 20px;
}
.fe-faq__list { display: flex; flex-direction: column; gap: 8px; }
.fe-faq__item {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-card);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.fe-faq__item[open] {
  border-color: rgba(var(--accent-rgb), .35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.fe-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  transition: color .18s ease;
}
.fe-faq__q::-webkit-details-marker { display: none; }
.fe-faq__q:hover { color: var(--accent); }
.fe-faq__q-text { flex: 1 1 auto; }
.fe-faq__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--ink-mute);
  transition: transform .22s ease, color .18s ease;
}
.fe-faq__item[open] .fe-faq__chevron { transform: rotate(180deg); color: var(--accent); }
.fe-faq__a {
  padding: 4px 18px 18px;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .fe-faq { margin: 36px 0 20px; padding-top: 24px; }
  .fe-faq__q { font-size: 1rem; padding: 12px 14px; gap: 10px; }
  .fe-faq__a { padding: 4px 14px 14px; font-size: .95rem; }
}