:root {
  --background: #ffffff;
  --surface: #f4f6f5;
  --surface-alt: #fafbfa;
  --text: #16211c;
  --muted: #5b655f;
  --muted-light: #6b746f;
  --border: #e4e7e5;
  --border-strong: #d3d9d5;
  --accent: #0e7c5b;
  --accent-dark: #0a5f45;
  --footer-bg: #132921;
  --footer-border: #24392f;
  --footer-muted: #aebab4;
  --footer-text: #d7deda;
  --footer-heading: #7fa090;
  --ad-border: #c9d0cc;
  --ad-bg: #f1f4f2;
  --ad-text: #8a948f;
  --container: 1200px;
  /* Raised panels (header, dropdowns, mobile nav) sit above --background */
  --surface-raised: #ffffff;
  --body-text: #2b332e;
  --field-dark-bg: #0e1f18;
  --footer-bottom-text: #8fa097;
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Dark theme. Applied for an explicit choice (data-theme="dark") or, when the
   visitor has made no choice (no data-theme attribute), by their OS preference.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --background: #101714;
  --surface: #18211d;
  --surface-alt: #141c19;
  --surface-raised: #18211d;
  --text: #e7ede9;
  --body-text: #ccd6d1;
  --muted: #a4b0aa;
  --muted-light: #94a09a;
  --border: #2a3630;
  --border-strong: #3a4842;
  --accent: #3bbd8c;
  --accent-dark: #57d3a2;
  --footer-bg: #0b120f;
  --footer-border: #24312b;
  --footer-muted: #9aa8a2;
  --footer-text: #d0d9d5;
  --footer-heading: #7fa090;
  --footer-bottom-text: #8fa097;
  --field-dark-bg: #0b120f;
  --ad-border: #33413a;
  --ad-bg: #18211d;
  --ad-text: #7d8a84;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --background: #101714;
    --surface: #18211d;
    --surface-alt: #141c19;
    --surface-raised: #18211d;
    --text: #e7ede9;
    --body-text: #ccd6d1;
    --muted: #a4b0aa;
    --muted-light: #94a09a;
    --border: #2a3630;
    --border-strong: #3a4842;
    --accent: #3bbd8c;
    --accent-dark: #57d3a2;
    --footer-bg: #0b120f;
    --footer-border: #24312b;
    --footer-muted: #9aa8a2;
    --footer-text: #d0d9d5;
    --footer-bottom-text: #8fa097;
    --field-dark-bg: #0b120f;
    --ad-border: #33413a;
    --ad-bg: #18211d;
    --ad-text: #7d8a84;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--text); background: var(--background); line-height: 1.6; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: #000; color: #fff; padding: 10px 14px; z-index: 1000; }
.skip-link:focus { left: 8px; }

/* Header */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface-raised); position: sticky; top: 0; z-index: 50; }
.header-inner { padding-block: 18px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { font-size: 23px; font-weight: 800; text-decoration: none; color: var(--accent); letter-spacing: -0.02em; white-space: nowrap; }
.brand:hover { color: var(--accent); }
.main-navigation { display: flex; gap: 26px; flex-wrap: wrap; }
.main-navigation a { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.main-navigation a:hover, .main-navigation a:focus-visible { color: var(--accent); }
.main-navigation a.active { color: var(--accent); font-weight: 700; }
.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 4px; margin: 0; color: var(--text); cursor: pointer; line-height: 0; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle:focus-visible { color: var(--accent); }
.nav-dropdown-toggle svg { transition: transform 0.15s ease; }
.nav-item.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; margin-top: 12px; min-width: 200px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; padding: 8px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); z-index: 70; }
.nav-item.has-dropdown:hover .nav-dropdown, .nav-item.open .nav-dropdown { display: flex; }
.nav-dropdown a { padding: 9px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.nav-dropdown a:hover, .nav-dropdown a:focus-visible, .nav-dropdown a.active { color: var(--accent); background: var(--surface); }
.subscribe-btn { background: var(--accent); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 3px; white-space: nowrap; flex: none; }
.subscribe-btn:hover { background: var(--accent-dark); color: #fff; }
.menu-toggle { display: none; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); padding: 8px 12px; border-radius: 6px; }

/* Circular icon button — header search trigger and the footer theme toggle */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); color: var(--text); cursor: pointer; }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--accent); border-color: var(--border-strong); }
.icon-btn svg { width: 18px; height: 18px; }

/* Light/dark toggle — shows the icon of the theme it will switch to. It lives in
   the footer, which keeps its own dark ground in both themes, so it opts out of
   the surface/border colours .icon-btn uses in the header. */
.theme-toggle { background: transparent; border-color: var(--footer-border); color: var(--footer-text); }
.theme-toggle:hover, .theme-toggle:focus-visible { color: #fff; border-color: var(--footer-muted); }
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: block; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .theme-icon-light { display: none; }
}

/* Media tile (hero / card image) — real photo or category-branded fallback */
.media-tile { position: relative; overflow: hidden; }
.tile-image { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 35%); }
.tile-category { position: absolute; top: 16px; left: 18px; color: rgba(255,255,255,0.95); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.tile-category:hover { color: #fff; }
.media-tile-fallback { background: var(--accent); }
.tile-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 16px); }
.tile-mark { position: absolute; right: -10px; bottom: -20px; font-size: 80px; font-weight: 800; color: rgba(255,255,255,0.14); line-height: 1; }

/* Below-header banner ad on the homepage */
.top-ad-band { background: var(--surface-alt); padding: 20px 16px; display: flex; justify-content: center; }
.top-ad-band .ad-slot { width: 728px; max-width: 100%; min-height: 90px; display: none; }

/* Hero (home featured article) */
.hero-layout { padding-block: 40px 0; }
.hero-card { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; text-decoration: none; color: inherit; background: var(--surface); }
.hero-image { width: 100%; min-width: 0; aspect-ratio: 4 / 3; }
.hero-image .tile-mark { font-size: 220px; right: -20px; bottom: -70px; }
.hero-image::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgba(255,255,255,0.35); z-index: 1; }
.hero-card-content { padding: 36px 40px; min-width: 0; }
.hero-card h1, .hero-card-title { margin: 0 0 16px; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.16; letter-spacing: -0.01em; }
.hero-card p { margin: 0 0 20px; color: var(--muted); font-size: 1rem; }
.read-more { display: inline-block; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: underline; }

/* Hero rotator (up to 5 featured articles) */
.hero-rotator { position: relative; }
.hero-slide[hidden] { display: none; }
.hero-rotator-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.hero-rotator-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--border, #d0d0d0); cursor: pointer; }
.hero-rotator-dots button.is-active { background: var(--accent); }

/* Homepage promo banner (1200x300) - promotes inner content, hidden when unset */
.promo-banner { display: block; margin-top: 24px; }
.promo-banner-image { width: 100%; max-width: 1200px; aspect-ratio: 4 / 1; object-fit: cover; margin-inline: auto; border-radius: 4px; }

/* Category eyebrow used on the article page */
.category-link { color: var(--accent); font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; }

/* Ad placeholders */
.ad-slot { border: 1px dashed var(--ad-border); background: var(--ad-bg); display: none; place-items: center; color: var(--ad-text); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-align: center; }
.ad-slot-rectangle { min-height: 280px; }
.grid-ad-slot { grid-column: 1 / -1; }
.grid-ad-slot .ad-slot { min-height: 130px; }

.section-block { padding-bottom: 56px; }
.section-heading { border-bottom: 2px solid var(--text); margin-bottom: 24px; }
.section-heading h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 320px); gap: 32px; }

/* Article / category cards — 3 up on desktop, 4 up on wide, 2 up on tablet, 1 up on mobile */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.article-card { display: block; text-decoration: none; color: inherit; }
.card-image { aspect-ratio: 16 / 10; width: 100%; }
.card-image .tile-mark { font-size: 90px; right: -8px; bottom: -26px; }
.article-card-body { padding-top: 16px; }
.article-card h3 { font-size: 20px; line-height: 1.32; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.card-date { display: block; font-size: 12px; letter-spacing: 0.02em; color: var(--muted-light); margin: 0 0 8px; }
/* Clamp excerpts so a long one does not make its card taller than the rest of the row */
.article-card p { color: var(--muted-light); margin: 0; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

.sidebar { display: grid; align-content: start; gap: 24px; }
.newsletter { padding: 24px; background: var(--surface); }
.newsletter h2 { margin-top: 0; font-size: 16px; font-weight: 800; }
.newsletter label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 12px; }
.newsletter input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface-raised); color: var(--text); }
.newsletter button { width: 100%; margin-top: 10px; border: 0; background: var(--accent); color: #fff; padding: 11px; border-radius: 3px; font-weight: 700; cursor: pointer; }
.newsletter button:hover { background: var(--accent-dark); }

/* Category page heading */
.category-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 0; border-bottom: 0; }
.category-heading-bar { width: 10px; height: 36px; background: var(--accent); flex: none; }
.category-heading h1 { margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.01em; }
.category-heading-page { font-size: 0.55em; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; }
.pagination-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text);
}
a.pagination-link:hover { border-color: var(--border-strong); background: var(--surface-alt, transparent); }
.pagination-link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination-link.is-disabled { color: var(--muted-light); border-color: var(--border); opacity: 0.6; }
.pagination-gap { color: var(--muted); padding: 0 2px; }

/* Article page */
.article-page { padding-block: 44px 64px; }
/* Header, hero and body column all share the container's left edge and full width. */
.article-header { max-width: none; }
.article-header h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.015em; margin: 14px 0 18px; }
.article-excerpt { margin: 0 0 20px; font-size: 1.1rem; color: var(--muted); }
.article-meta { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted-light); padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.meta-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.meta-avatar-fallback { background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.article-meta-text { display: flex; flex-direction: column; }
.article-byline { color: var(--text); }
.article-meta-sub { font-size: 0.85rem; }
.article-hero-figure { margin: 0; }
.article-hero { width: 100%; aspect-ratio: 21 / 9; margin: 36px 0 0; }
.article-hero .tile-mark { font-size: 200px; right: -16px; bottom: -50px; }
.article-hero-caption { margin-top: 10px; font-size: 0.82rem; color: var(--muted-light); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 320px); gap: 48px; padding-top: 40px; }
/* overflow-wrap is a backstop: pasted content that arrives as one unbreakable
   run (non-breaking spaces between every word, a long URL) would otherwise
   overrun this column and stretch the whole page sideways. */
.article-body { font-size: 1.06rem; max-width: 760px; overflow-wrap: break-word; }
.article-body p { margin: 0 0 22px; line-height: 1.75; color: var(--body-text); }
.article-body h2 { font-size: 1.7rem; line-height: 1.2; margin-top: 42px; }
.article-body h3 { font-size: 1.4rem; line-height: 1.25; margin-top: 36px; }
.article-body h4 { font-size: 1.2rem; line-height: 1.3; margin-top: 30px; }
.article-body h5 { font-size: 1.06rem; line-height: 1.35; margin-top: 26px; text-transform: uppercase; letter-spacing: 0.02em; }
.article-body h6 { font-size: 0.95rem; line-height: 1.4; margin-top: 24px; color: var(--muted-light); text-transform: uppercase; letter-spacing: 0.04em; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.article-body th { background: var(--surface); }
.article-body p.text-small { font-size: 0.92rem; }
.article-body p.text-large { font-size: 1.22rem; }
.article-body p.text-xlarge { font-size: 1.42rem; }
.pull-quote { margin: 40px 0; padding-left: 24px; border-left: 3px solid var(--accent); font-size: 1.35rem; line-height: 1.5; font-style: italic; color: var(--text); }
.pull-quote cite { display: block; margin-top: 12px; font-size: 0.85rem; font-style: normal; font-weight: 700; color: var(--muted-light); }
.link-button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent-dark); text-decoration: underline; cursor: pointer; }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 28px 0; }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.in-article-ad { min-height: 250px; margin: 32px 0; }
/* Rich-text bodies from the admin's Quill editor: lists, embeds, code and the
   ql-* classes Quill writes for alignment, indentation and inline size. */
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 24px; line-height: 1.75; color: var(--body-text); }
.article-body li { margin: 0 0 8px; }
.article-body blockquote { margin: 40px 0; padding-left: 24px; border-left: 3px solid var(--accent); font-size: 1.35rem; line-height: 1.5; font-style: italic; }
.article-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.article-body figure { margin: 28px 0; }
.article-body figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--muted-light); }
.article-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--border); }
.article-body pre { margin: 0 0 22px; padding: 16px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 0.92rem; }
.article-body iframe.ql-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 28px 0; }
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }
.article-body .ql-indent-1 { padding-left: 3em; }
.article-body .ql-indent-2 { padding-left: 6em; }
.article-body .ql-indent-3 { padding-left: 9em; }
.article-body .ql-indent-4 { padding-left: 12em; }
.article-body .ql-size-small { font-size: 0.85em; }
.article-body .ql-size-large { font-size: 1.4em; }
.article-body .ql-size-huge { font-size: 2em; }
.article-body .ql-direction-rtl, .article-body [dir="rtl"] { direction: rtl; text-align: right; }
.article-body .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.article-body .ql-font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Article right rail */
.article-sidebar { position: sticky; top: 96px; display: grid; align-content: start; gap: 32px; }
.rail-heading { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--text); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.rail-links { display: grid; gap: 18px; }
.rail-links .rail-link + .rail-link { padding-top: 18px; border-top: 1px solid var(--border); }
.rail-link { display: block; text-decoration: none; color: inherit; }
.rail-link-title { display: block; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--text); }
.rail-link:hover .rail-link-title { color: var(--accent); }
.rail-link-date { display: block; margin-top: 6px; font-size: 13px; color: var(--muted-light); }
.rail-more { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 700; text-decoration: none; }
.rail-categories { display: grid; gap: 11px; }
.rail-categories a { color: var(--muted); text-decoration: none; font-size: 14px; }
.rail-categories a:hover { color: var(--accent); }
.newsletter-dark { background: var(--footer-bg); color: var(--footer-text); border-radius: 4px; }
.newsletter-dark h2 { color: #fff; }
.newsletter-dark p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--footer-muted); }
.newsletter-dark label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.newsletter-dark form { display: flex; gap: 8px; }
.newsletter-dark input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--footer-border); background: var(--field-dark-bg); color: #fff; font-size: 13px; }
.newsletter-dark input::placeholder { color: var(--footer-muted); }
.newsletter-dark button { width: auto; margin-top: 0; padding: 10px 16px; white-space: nowrap; }

/* Author box */
.author-box { display: flex; gap: 20px; align-items: flex-start; margin-top: 44px; padding: 28px; background: var(--surface); border-left: 4px solid var(--accent); }
.author-box-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.author-box-avatar-fallback { background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.author-box-label { display: block; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.author-box-name { margin: 0 0 10px; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.author-box-subtitle { margin: 0 0 8px; color: var(--accent-dark); font-size: 0.85rem; font-weight: 700; }
.author-box-bio { margin: 0; color: var(--muted-light); font-size: 0.95rem; line-height: 1.65; }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.footer-grid { padding: 56px 0 32px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; }
.footer-brand-col .footer-brand { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 10px; display: inline-block; }
.footer-brand-col p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--footer-muted); max-width: 280px; }
.footer-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--footer-heading); margin: 0 0 14px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: var(--footer-text); text-decoration: none; font-size: 14px; }
.footer-nav a:hover { color: #fff; }
.footer-newsletter-col p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--footer-muted); }
.footer-newsletter-form { display: flex; gap: 8px; }
.footer-newsletter-form input { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 3px; border: 1px solid var(--footer-border); background: var(--field-dark-bg); color: #fff; font-size: 13px; }
.footer-newsletter-form button { background: var(--accent); color: #fff; border: none; padding: 9px 14px; border-radius: 3px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.footer-newsletter-form button:hover { background: var(--accent-dark); }
.footer-bottom { padding: 24px 0; border-top: 1px solid var(--footer-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--footer-bottom-text); font-size: 13px; }
.footer-legal-nav { display: flex; gap: 22px; }
.footer-legal-nav a { color: var(--footer-text); text-decoration: underline; font-size: 13px; }
.footer-legal-nav a:hover { color: #fff; }

/* Cookie consent */
.cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--footer-bg); color: var(--footer-text); box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
.cookie-consent[hidden] { display: none; }
.cookie-consent-inner { padding: 18px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cookie-consent-inner p { margin: 0; flex: 1 1 380px; font-size: 0.95rem; color: var(--footer-text); }
.cookie-consent-inner a { color: #fff; text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.cookie-consent-actions button { padding: 10px 22px; border-radius: 3px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.cookie-reject { background: transparent; color: var(--footer-text); border-color: rgba(255,255,255,.4); }
.cookie-reject:hover, .cookie-reject:focus-visible { border-color: #fff; }
.cookie-accept { background: var(--accent); color: #fff; }
.cookie-accept:hover, .cookie-accept:focus-visible { background: var(--accent-dark); }

/* ---------------------------------------------------------------------------
   Responsive ladder: wide -> desktop -> tablet -> mobile.
   The page fills the viewport at every width: wider screens gain feed columns
   and a sidebar rather than growing empty side margins.
   --------------------------------------------------------------------------- */

/* Wide desktop — 4-up feed, roomier container, article gets a centred
   reading column with the sidebar in the right rail. */
@media (min-width: 1600px) {
  :root { --container: 1560px; }
  .article-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
  .article-body { max-width: 820px; }
}

/* Tablet — the full category nav no longer fits on one inline row (it needs
   ~1170px), so it becomes a horizontally scrollable pill bar on its own line
   rather than collapsing to a hamburger. */
@media (min-width: 768px) and (max-width: 1199px) {
  .header-inner { flex-wrap: wrap; gap: 14px 16px; }
  .main-navigation { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding-bottom: 2px; scrollbar-width: none; }
  .main-navigation::-webkit-scrollbar { display: none; }
  .main-navigation a { background: var(--surface); border-radius: 100px; padding: 8px 15px; white-space: nowrap; }
  .main-navigation a.active { background: var(--accent); color: #fff; }
  .nav-item { flex: none; }
  .subscribe-btn { order: 2; }
}

/* Tablet and below — 2-up feed, stacked hero, single-column article */
@media (max-width: 1199px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-card { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
}

/* Narrow tablet — the sidebar drops below the feed as a single row */
@media (min-width: 768px) and (max-width: 1023px) {
  .content-grid { grid-template-columns: 1fr; gap: 28px; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .article-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
}

/* Mobile — unchanged behaviour: hamburger nav, everything single column */
@media (max-width: 767px) {
  /* The header row (brand + Menu + search + Subscribe) does not fit a 375px
     viewport at the desktop 32px gap — it pushed the whole page into horizontal
     scroll. Tighten the row, and allow it to wrap so a longer site name can never
     reintroduce the sideways scroll. */
  .header-inner { gap: 8px 10px; flex-wrap: wrap; }
  .brand { font-size: 18px; }
  .menu-toggle { padding: 6px 10px; font-size: 13px; }
  .subscribe-btn { padding: 8px 12px; font-size: 12px; }

  .menu-toggle { display: block; }
  .main-navigation { display: none; position: absolute; left: 16px; right: 16px; top: 64px; background: var(--surface-raised); border: 1px solid var(--border); padding: 16px; flex-direction: column; align-items: stretch; z-index: 60; }
  .main-navigation.open { display: flex; }
  .nav-item { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item .nav-link { flex: 1; padding-block: 8px; }
  .nav-dropdown-toggle { position: absolute; right: 0; top: 0; padding: 8px; }
  .nav-dropdown { display: none; position: static; margin: 0 0 4px 12px; border: none; box-shadow: none; padding: 0; }
  .nav-item.open .nav-dropdown { display: flex; }
  .nav-dropdown a { padding: 8px 0; }
  .subscribe-btn { order: 2; }
  .hero-layout, .content-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .author-box { flex-direction: column; }
}

@media (max-width: 850px) {
  .cookie-consent-inner { flex-direction: column; align-items: stretch; text-align: left; padding: 14px 0; gap: 12px; }
  .cookie-consent-inner p { flex: none; font-size: 0.88rem; }
  .cookie-consent-actions { justify-content: stretch; gap: 10px; }
  .cookie-consent-actions button { flex: 1 1 0; padding: 10px 16px; }
}

/* ---------------------------------------------------------------------------
   Search overlay. Open/close effect ported from the Codrops "Search UI Effects"
   demo 3 (MIT): the page tilts away in 3D while the search panel fades in above
   it. Colours come from the theme tokens rather than the demo's hardcoded ones.
   --------------------------------------------------------------------------- */
.main-wrap { transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.main-wrap--move { transform: perspective(1000px) translate3d(0, 50vh, 0) rotate3d(1, 0, 0, 30deg); }

.search { position: fixed; z-index: 900; top: 0; left: 0; width: 100%; height: 50vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--surface); pointer-events: none; opacity: 0; transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.search--open { pointer-events: auto; opacity: 1; }

.search__form { width: 100%; opacity: 0; transform: scale3d(0.7, 0.7, 1); transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1), transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.search--open .search__form { opacity: 1; transform: scale3d(1, 1, 1); }

.search__input { font-family: inherit; font-size: clamp(28px, 6vw, 64px); font-weight: 700; line-height: 1; display: inline-block; box-sizing: border-box; width: 75%; max-width: 900px; padding: 0 0 0.1em 0; border: 0; border-bottom: 4px solid var(--accent); background: none; color: var(--text); caret-color: var(--accent); text-align: center; }
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--muted); opacity: 0.35; }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; }

/* Honeypot: off-screen rather than display:none, which bots are likelier to skip */
.search__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.search__info { display: block; width: 75%; max-width: 900px; margin: 0 auto; padding: 0.85em 0; font-size: 13px; font-weight: 700; color: var(--muted); text-align: right; }

.btn--search-close { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; opacity: 0; transform: scale3d(0.8, 0.8, 1); transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1), transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.btn--search-close svg { width: 28px; height: 28px; }
.btn--search-close:hover, .btn--search-close:focus-visible { color: var(--text); }
.search--open .btn--search-close { opacity: 1; transform: scale3d(1, 1, 1); }

/* Results page */
.search-count { color: var(--muted); font-size: 14px; margin-top: 14px; }
.search-empty { color: var(--muted); font-size: 16px; margin-top: 24px; }

/* A 30-degree tilt of the whole page is exactly the motion that triggers
   vestibular discomfort, so reduce-motion visitors get a plain fade instead. */
@media (prefers-reduced-motion: reduce) {
  .main-wrap, .search, .search__form, .btn--search-close { transition-duration: 0.01ms; }
  .main-wrap--move { transform: none; }
  .search__form, .search--open .search__form, .btn--search-close, .search--open .btn--search-close { transform: none; }
}

/* Phones get a full-screen search rather than a scaled-down version of the
   desktop effect. The tilt only reads as an effect when there is page visible
   behind it; at this width the pushed-away page leaves the viewport entirely and
   the panel just sits on a blank half-screen. So: no tilt, panel fills the
   screen, and the field sits near the top where a phone keyboard won't cover it. */
@media (max-width: 767px) {
  .search { height: 100vh; height: 100dvh; justify-content: flex-start; padding-top: 84px; background: var(--background); }
  .main-wrap--move { transform: none; }
  .search__form { padding-inline: 20px; }
  .search__input, .search__info { width: 100%; }
  .search__input { font-size: 30px; text-align: left; border-bottom-width: 3px; }
  .search__info { font-size: 12px; text-align: left; padding-top: 0.7em; }
  .btn--search-close { top: 10px; right: 10px; }
}