:root {
  --ink: #0E1B2C;
  --nav-bg:#0E1B2C;
  --nav-bg-dynamic:var(--nav-bg);
  --nav-bg-light:#0e1b2cc5;
  --nav-fg:#F6F3ED;
  --nav-fg-light:#edf1f6cc;
  --ink-soft: #1F2A37;
  --paper-very-transparent:#fbf6ea;
  --paper: white;/*#fffcf7;*/
  --paper-dim: #fefbff;
  --surface: #FFFFFF;
  --input-fill: rgb(249, 249, 250);
  --amber: #e8a324d3;
  --amber-alt:rgb(15, 113, 15);
  --amber-alt-deep:rgb(24, 100, 24);
  --amber-deep: #8a5600;
  --slate: #5B6B7C;
  --line: rgba(14, 27, 44, 0.12);
  --success: #2F7A4D;
  --danger: #B3402A;
  --careful-btn-bg: rgb(141, 13, 13);  /*Btns That Signify Careful Operation */
  --paginator-color: #0E1B2C;
  --paginator-bg: rgba(15, 23, 42, 0.06);
  --paginator-border: rgba(148, 163, 184, 0.45);
  --paginator-hover-border: rgba(96, 165, 250, 0.9);
  --paginator-active-bg: linear-gradient(135deg, #f59e0b, #f97316); 
  --paginator-active-color: #111827;
  --paginator-ellipsis: #90a4be;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --shadow-card: 0 1px 2px rgba(14, 27, 44, 0.07);
  --shadow-raised: 0 10px 24px rgba(14, 27, 44, 0.16);
  --font-display: var(--font-body);
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-h: 64px;
  --brand: #22D3EE; 
  --brand-deep: #0B6E8A;
  --red-linar-grad: linear-gradient(180deg, #ff6b8b 0%, #e02447 100%);
  /* Toast surfaces use the site's teal brand and danger-red accents. */
  --toast-bg: #ffffff;
  --toast-bg-error: #fff4f1;
  --toast-fg: #0E1B2C;
  --toast-accent: #0B6E8A;
  --toast-accent-error: #B3402A;
  /* ---- Signal: colour set for long reading pages (author handbook, privacy policy) ----
     --signal is one fixed cyan for glow and fills on always-dark surfaces, so it does not
     flip with the theme the way --brand does. The rest are cool tints and rules for paper,
     plus do / do not / note colours so guidance reads at a glance. */
  --signal: #22D3EE;
  --signal-ink: #04202A;
  /* Text colour for anything sitting on a --signal fill. Fixed because
     --signal stays cyan in both themes, so --ink would be unreadable in dark. */
  --on-signal: #04202A;
  --doc-night: #07101C;
  --doc-hero-text: #c9d4de;
  --doc-grid: rgba(34, 211, 238, 0.10);
  --doc-glow: rgba(34, 211, 238, 0.32);
  --doc-glow-soft: rgba(11, 110, 138, 0.14);
  --doc-tint: #F3F8FB;
  --doc-tint-strong: #E3EEF4;
  --doc-rule: rgba(11, 110, 138, 0.20);
  --doc-code-bg: #E8F1F6;
  --doc-do: #1F7A4D;
  --doc-do-wash: rgba(31, 122, 77, 0.12);
  --doc-dont: #B3402A;
  --doc-dont-wash: rgba(179, 64, 42, 0.11);
  --doc-note: #8A5300;
  --doc-note-wash: rgba(232, 163, 36, 0.18);
  /* ---- Story table of contents: an always-dark "content section" ----
     A deliberately different surface from the paper page. --toc-accent is a
     solid signal border and the radius is large, so the section reads as its
     own block rather than a box drawn on the article. */
  --toc-bg: #07101C;
  --toc-bg-soft: #0C1B2B;
  --toc-fg: #E6F3F8;
  --toc-muted: rgba(230, 243, 248, 0.62);
  --toc-accent: #22D3EE;
  --toc-rule: rgba(34, 211, 238, 0.20);
  color-scheme: light;
}

html[data-theme="dark"] {
  --nav-bg-dynamic:#1c2e47;
  --ink: #F3EFE6;
  --ink-soft: #D8D2C4;
  --paper-very-transparent:#070d15;
  --paper: #0B1420;
  --paper-dim: #101C2C;
  --surface: #121F30;
  --input-fill: #182c44;
  --slate: #93A2B3;
  --amber-alt:rgb(15, 113, 15);
  --amber-alt-deep:rgb(33, 182, 33);
  --amber-deep: #EDB35A;
  --line: rgba(243, 239, 230, 0.14);
  --careful-btn-bg:rgba(221, 33, 33, 0.815);  /*Btns That Signify Careful Operation */
  --paginator-color: #F3EFE6;
  --paginator-bg: rgba(255, 255, 255, 0.04);
  --paginator-border: rgba(243, 239, 230, 0.2);
  --paginator-hover-border: rgba(96, 165, 250, 0.9);
  --paginator-active-bg: linear-gradient(135deg, #f59e0b, #f97316);
  --paginator-active-color: #111827;
  --paginator-ellipsis: #93A2B3;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 10px 28px rgba(0, 0, 0, 0.5);
  --brand: #0B6E8A;
  --brand-deep: #22D3EE;
  --red-linar-grad: linear-gradient(180deg, #d04664 0%, #9d243a 100%);
  /* Keep toast surfaces distinct from dark page backgrounds. */
  --toast-bg: #121F30;
  --toast-bg-error: #321F23;
  --toast-fg: #F3EFE6;
  --toast-accent: #22D3EE;
  --toast-accent-error: #FF8876;
  /* Signal set, dark theme: brighter marks on a deep navy, same roles as in :root. */
  --doc-glow-soft: rgba(34, 211, 238, 0.16);
  --doc-tint: #0F1C2D;
  --doc-tint-strong: #172A41;
  --doc-rule: rgba(34, 211, 238, 0.22);
  --doc-code-bg: #182c44;
  --doc-do: #4CC38A;
  --doc-do-wash: rgba(76, 195, 138, 0.14);
  --doc-dont: #FF8876;
  --doc-dont-wash: rgba(255, 136, 118, 0.14);
  --doc-note: #EDB35A;
  --doc-note-wash: rgba(237, 179, 90, 0.16);
  /* Story table of contents, dark theme: a deeper teal that still stands
     apart from the --paper (#0B1420) it sits on. */
  --toc-bg: #062632;
  --toc-bg-soft: #0A3746;
  --toc-fg: #EAFBFF;
  --toc-muted: rgba(234, 251, 255, 0.66);
  --toc-accent: #22D3EE;
  --toc-rule: rgba(34, 211, 238, 0.24);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


h1, h2, h3 { font-family: var(--font-body); color: var(--ink); margin: 0 0 12px; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.14; overflow-wrap: anywhere; text-wrap: balance; }
h2 { font-size: 30px; line-height: 1.2; }
h3 { font-size: 22px; line-height: 1.25; }
p { margin: 0 0 16px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }


:focus-visible { outline: 1.5px solid var(--amber-deep); outline-offset: 2px; }

@media (max-width: 640px) {
  h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  h2 { font-size: 27px; }
  h3 { font-size: 21px; }
}

/* ---------- Shared paginator ---------- */
.story-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
}

.story-page-btn {
  min-width: 2.65rem;
  min-height: 2.65rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--paginator-border);
  background: var(--paginator-bg);
  color: var(--paginator-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.story-page-btn:hover,
.story-page-btn:focus-visible {
  border-color: var(--paginator-hover-border);
  transform: translateY(-1px);
  text-decoration: none;
}

.story-page-btn.is-active {
  background: var(--paginator-active-bg);
  border-color: transparent;
  color: var(--paginator-active-color);
}

.story-page-btn.is-ellipsis {
  pointer-events: none;
  border-style: dashed;
  background: transparent;
  color: var(--paginator-ellipsis);
}

.story-page-btn.page-nav {
  padding-inline: 0.9rem;
}

.profile-bookmark-shell {
  overflow: hidden;
  transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, transform 180ms ease;
  will-change: height, opacity, transform;
}

.profile-bookmark-shell.is-animating {
  opacity: 0.6;
  transform: translateY(6px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--slate);
}
.header-bar {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  height: var(--header-h);
  display: flex;
  align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { border-radius: var(--radius-s); }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--nav-fg); letter-spacing: 0.01em; }

.primary-nav { display: none; flex: 1; }
.primary-nav ul { list-style: none; display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; }
.primary-nav > ul > li > a,
.primary-nav .dropdown-toggle {
  color: var(--nav-fg); font-size: 0.94rem; font-weight: 500;
  background: none; border: none; padding: 8px 2px; display: inline-flex; align-items: center; gap: 4px;
  position: relative;
}
.primary-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.primary-nav > ul > li > a:not(.soon):hover { color: var(--nav-fg-light); }
.primary-nav > ul > li > a:not(.soon):hover::after { transform: scaleX(1); }
.primary-nav a.soon { opacity: 0.6; cursor: default; }
.soon-tag {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(246, 243, 237, 0.14); color: #9be59b; border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}

.has-dropdown { position: relative; }
.dropdown-toggle { color: var(--nav-fg); cursor: pointer; }
.dropdown-toggle:hover { color: var(--nav-fg-light); }
.chev { width: 12px; height: 12px; transition: transform 0.2s ease; }
.has-dropdown.is-open .chev { transform: rotate(180deg); }

/*  THE NAV'S OWN FOOTER. About, privacy, partner with us and the author
    handbook belong to the site, not to the menu, so they sit at the bottom of
    the phone drawer in the page footer's voice instead of in the row of
    menu items. On a desktop the page footer already carries them, so this
    block is hidden there. */
.nav-footer-links { display: none; }
.nav-panel-mobile { display: none; }
/* Scoped above .primary-nav ul (0,1,1) so the menu stacks vertically instead
   of inheriting the navbar's display:flex row layout. */
.primary-nav .dropdown-menu {
  
  display: block;
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--nav-bg-light); border: 1px solid var(--line); border-radius: var(--radius-m);
  min-width: 200px; box-shadow: var(--shadow-raised);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  max-height: 320px; overflow-y: auto;
  backdrop-filter: blur(6px);
}
.has-dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a {
  display: block; padding: 8px 10px; border-radius: var(--radius-s); color: var(--nav-fg); font-size: 0.92rem;
  transition: background 0.14s ease;
}
.dropdown-menu li a:hover { background: rgba(246, 243, 237, 0.1); }

.nav-logout-form { display: flex; width: 100%; }
.nav-logout-btn {
  width: 100%; border: 1px solid var(--nav-fg-light); background: transparent; color: var(--nav-fg);
  border-radius: 0px; padding: 9px 12px; font-weight: 700; cursor: pointer; text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.nav-logout-btn:hover {
  background: rgba(232, 163, 36, 0.12); border-color: var(--amber); color: var(--amber-deep);
}

.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-s); border: none; background: transparent;
  color: var(--paper-dim); display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.icon-btn:hover { background: rgba(246, 243, 237, 0.1); color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; color:  var(--nav-fg);}
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: block; }

.search-form { position: absolute; left: 0; right: 0; top: 100%; padding: 10px 20px; background: var(--nav-bg); border-bottom: 1px solid rgba(255,255,255,0.08); display: none; }
.site-header.search-open .search-form { display: block; }
.search-form input {
  width: 100%; max-width: 1140px; margin: 0 auto; display: block; padding: 10px 14px;
  border-radius: var(--radius-s); border: 1px solid transparent; background: rgba(246,243,237,0.06);
  color: var(--nav-fg); font-size: 0.95rem;
}
.search-form input::placeholder { color: var(--nav-fg-light); }

.nav-toggle { display: inline-flex; }

@media (min-width: 900px) {
  /* min-width:0 lets the flex children shrink instead of pushing the search
     bar and theme toggle past the right edge of the header bar. */
  .header-bar { gap: clamp(10px, 1.6vw, 18px); }
  .primary-nav { display: flex; min-width: 0; flex: 1 1 auto; }
  .primary-nav ul { gap: clamp(12px, 2vw, 28px); flex-wrap: nowrap; white-space: nowrap; min-width: 0; align-items: center; }
  .primary-nav > ul > li > a,
  .primary-nav .dropdown-toggle { font-size: clamp(0.88rem, 0.9vw + 0.25rem, 0.98rem); padding: 9px 4px; }
  .nav-logout-form { width: auto; }
  .nav-logout-btn { width: auto; padding: 8px 14px; }
  .nav-toggle { display: none; }
  .header-actions { flex-shrink: 0; gap: 8px; }
  .search-form { position: static; padding: 0; background: none; border: none; display: block; width: clamp(150px, 16vw, 240px); min-width: 120px; flex-shrink: 0; }
  .site-header.search-open .search-form,
  .search-form { display: block; }
  .search-form input { background: #88888833; border: 1px solid var(--nav-fg-light); padding: 8px 12px; font-size: 0.9rem; width: 100%; box-sizing: border-box; }
  #search-toggle { display: none; }
}

/* Narrow desktops (900px to 1099px): the full link row plus the search bar
   no longer fit beside the brand name, so the wordmark steps aside and the
   logo mark alone keeps the brand link. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .brand-word { display: none; }
  .header-bar { padding: 0 14px; }
}


@media (max-width: 899.98px) {
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--paper);
    padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform 0.24s ease;
  }
  .nav-logout-btn {
    font-family: var(--font-body);
    background-color: var(--danger);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    max-width: 30ch;
    border: none;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--paper);
  }

  .site-header.nav-open .primary-nav { display: block; transform: translateX(0); }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 4px; }

  .primary-nav > ul > li > a,
  .primary-nav .dropdown-toggle {
    color: var(--ink); width: 100%; padding: 12px 4px; font-weight: bold; font-size: 1.02rem; justify-content: space-between;
  }
  .primary-nav > ul > li > a::after { background: var(--amber); }
  .primary-nav > ul > li > a:not(.soon):hover { color: var(--amber-deep); }
  .primary-nav .chev { color: var(--ink); }
  .primary-nav .dropdown-menu {
    position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none;
    margin-top: 4px; background: var(--paper); border: none; padding: 0;
  }
  .has-dropdown.is-open .dropdown-menu { display: block; }
  .dropdown-menu li a { color: var(--ink); }

  /*  On a phone the Panel is a row of its own; the copy inside the Profile
      dropdown is the desktop's. */
  .nav-panel-mobile { display: block; }
  .nav-panel-desktop { display: none; }

  /*  The nav's footer block. */
  .nav-footer-links {
    display: block;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .nav-footer-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  }
  .nav-footer-list a {
    display: block; padding: 9px 4px;
    color: var(--slate); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
  }
  .nav-footer-list a:hover { color: var(--amber-deep); }
}

/* ---------- 404 ---------- */
.notfound-shell {
  max-width: 1180px; margin: 0 auto; padding: 90px 20px 70px; text-align: center;
}
.notfound-shell h1 {
  font-size: clamp(3.2rem, 9vw, 5.5rem); letter-spacing: -0.04em; margin: 0; color: var(--ink);
}
.notfound-shell p {
  color: var(--ink); font-size: 1.02rem; margin: 12px 0 24px;
}
.notfound-home-link {
  display: inline-flex; padding: 10px 18px; border-radius: var(--radius-m);
  background: var(--amber); color: #0E1B2C; font-weight: 700; font-size: 0.9rem;
}
.notfound-home-link:hover { background: var(--amber-deep); }

/* 404 suggestions: three latest stories, staggered entrance */
.notfound-stories { max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }
.notfound-stories-title {
  margin: 0 0 22px; text-align: center; font-size: clamp(1.3rem, 3vw, 1.8rem);
  opacity: 0; animation: nfRise .6s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
.notfound-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .notfound-grid { grid-template-columns: repeat(3, 1fr); } }
.nf-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); overflow: hidden; box-shadow: var(--shadow-card);
  opacity: 0; animation: nfRise .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.3s + var(--i, 0) * .14s);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nf-card:hover, .nf-card:focus-within { border-color: var(--brand-deep); box-shadow: var(--shadow-raised); }
.nf-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-dim); }
.nf-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.nf-card:hover .nf-card-media img { transform: scale(1.06); }
.nf-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; flex: 1; }
.nf-card-meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--ink); }
.nf-card-tag {
  background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 14px 3px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.nf-card-title { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.nf-card-title a { background: linear-gradient(var(--brand-deep), var(--brand-deep)) 0 100% / 0 2px no-repeat; transition: background-size .35s ease; }
.nf-card:hover .nf-card-title a { background-size: 100% 2px; }
.nf-card-excerpt { margin: 0; color: var(--ink); font-size: 0.92rem; }
.nf-card-by { margin-top: auto; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
@keyframes nfRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Guest gate popup (auth-gate.js) ---------- */
.auth-gate {
  position: fixed; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(14, 27, 44, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .3s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;
}
.auth-gate.is-open { background: rgba(14, 27, 44, 0.55); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.auth-gate-card {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--brand-deep);
  border-radius: var(--radius-s); box-shadow: var(--shadow-raised); padding: 26px 22px 18px;
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.auth-gate.is-open .auth-gate-card { opacity: 1; transform: none; }
.auth-gate-close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--slate); border-radius: var(--radius-s); transition: background .2s ease, color .2s ease;
}
.auth-gate-close:hover, .auth-gate-close:focus-visible { background: var(--paper-dim); color: var(--ink); }
.auth-gate-close svg { width: 18px; height: 18px; }
.auth-gate-eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 3px 16px 3px 10px; background: var(--brand-deep); color: var(--paper);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.auth-gate-title { margin: 0 0 8px; padding-right: 30px; font-size: 1.35rem; line-height: 1.25; }
.auth-gate-hook { margin: 0 0 14px; color: var(--ink); font-size: 0.94rem; }
.auth-gate-frame-wrap { position: relative; min-height: 220px; }
.auth-gate-frame { display: block; width: 100%; height: 360px; border: 0; background: var(--surface); transition: height .25s ease, opacity .3s ease; }
.auth-gate-card.is-loading .auth-gate-frame { opacity: 0; }
.auth-gate-card.is-loading .auth-gate-frame-wrap::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 3px solid var(--line); border-top-color: var(--brand-deep); border-radius: 50%; animation: authSpin .8s linear infinite;
}
html.auth-gate-locked { overflow: hidden; }

/* ---------- Hero row: main carousel + side teaser ---------- */
/* .hero and .hero-teaser are separate, sibling blocks - .hero-row only
   exists to lay them out. Desktop: a 70/30 flex row with a divider between
   them. Mobile: they detach completely (column, teaser gets margin-top)
   and the teaser becomes its own "peek" carousel underneath the hero. */
.hero-row { display: flex; align-items: stretch; width: 100%; }

.hero { position: relative; overflow: hidden; background: var(--nav-bg); border-bottom-left-radius: 25px; width: 70vw; height: 70vh; min-height: 400px; max-height: 640px; }
.hero-track { position: relative; height: 100%; background: var(--nav-bg); }
.hero-empty { height: 100%; display: flex; flex-direction: column; justify-content: center; }
@media (max-width:899px) {
  .hero-row { flex-direction: column; }
  .hero { width: 100%; height: 45vh; min-height: 0; max-height: none; }
}
.hero-slide {
  position: absolute; inset: 0;
  background-color: var(--nav-bg);
  background-image: var(--slide-image), radial-gradient(120% 120% at 50% 20%, #16283f 0%, var(--nav-bg) 70%);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s;
  display: flex; align-items: flex-end;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s linear 0s; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,27,44,0.05) 0%, rgba(14,27,44,0.55) 55%, rgba(14,27,44,0.92) 100%); }
/* Real lead image on top of the slide's fallback background-image; hidden by
   its own onerror handler if it fails, leaving the CSS background to show. */
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 2; padding: 32px 20px 96px; max-width: 720px; }
/* whole slide (image included) is a link to the story: the overlay sits under
   the text, the text lets clicks fall through to it, real links/buttons keep
   working on their own */
.hero-slide-link { position: absolute; inset: 0; z-index: 1; }
.hero-content { pointer-events: none; }
.hero-content a, .hero-content button { pointer-events: auto; }
.hero-label {display: flex; align-items: center; gap: 8px; color: var(--amber); font-weight: 800; font-size: 0.85rem; margin-bottom: 10px; }
.hero-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.hero-headline { color: #FAF8F3; font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.14; margin-bottom: 10px; overflow-wrap: break-word; text-wrap: balance; }
.hero-headline a { color: inherit; }
.hero-byline { color: rgba(250,248,243,0.75); font-size: 0.92rem; margin-bottom: 20px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.glass-btn {
  padding: 10px 20px; font-weight: 600; font-size: 0.92rem;
  background: rgba(255,255,255,0.16); color: #FAF8F3; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(10px);
  border-left: none;
  border-top: none;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
   transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
/*  Hero buttons sit on a dark story photo, so their hover state must never
    lean on whatever is behind them. A transparent fill with --ink text left
    the "Read story" label and the share icon as near-black on near-black:
    the button looked like it had vanished. On touch the hover state also
    sticks after a tap, so it stayed blank until something else was tapped.
    Now the hover gets a solid paper surface of its own, and only devices with
    a real pointer get a hover state at all. */
@media (hover: hover) {
  .glass-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--amber); transform: translateY(-2px); }
}
.glass-btn:active { background: var(--paper); color: var(--ink); transform: translateY(0); }
.glass-btn-outline { background: #0B6E8A; border: none; }
.glass-btn-icon {
  width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font: inherit;
}
.glass-btn-icon .share-icon { width: 20px; height: 20px; }

.bookmark-chip {
  border: 1px solid rgba(255,255,255,0.3); background: rgba(14,27,44,0.35); backdrop-filter: blur(8px);
  color: #FAF8F3; width: 42px; height: 42px; border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.bookmark-chip:hover { transform: translateY(-2px); }
.bookmark-chip.is-saved { color: var(--amber); border-color: var(--amber); }
.bookmark-chip .bookmark-icon { width: 18px; height: 18px; }
/* "Read later" text beside the icon so the button explains itself (home hero + story cards) */
.bookmark-chip.has-label { width: auto; gap: 7px; padding: 0 13px; flex-shrink: 0; }
.bookmark-chip .bookmark-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
.hero-bookmark { position: absolute; top: 20px; right: 20px; z-index: 3; }

.hero-empty { padding: 60px 20px; text-align: center; }
.hero-empty .hero-headline-empty { color: #FAF8F3; }
.hero-empty-copy { color: rgba(250,248,243,0.7); max-width: 420px; margin: 0 auto; }

@media (max-width: 640px) {
  .hero-headline { font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1.16; }
}

.hero-controls { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 18px; }
.hero-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; }
.hero-arrow:hover { background: var(--amber); color: #0E1B2C; border-color: var(--amber); }
.hero-dots { display: flex; align-items: center; gap: 8px; }
/* The button is the 24px hit target; the painted dot is a pseudo-element. */
.hero-dot {
  position: relative;
  width: 24px; height: 24px;
  padding: 0; border: none; border-radius: 999px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: width 0.25s ease;
}
.hero-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.4);
  transition: background 0.2s ease, width 0.25s ease;
}
.hero-dot.is-active { width: 34px; }
.hero-dot.is-active::before { background: var(--amber); width: 26px; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 900px) {
  .hero-content { padding: 40px 60px 110px; }
}

/* ---------- Hero teaser (side carousel) ---------- */
/* A separate block from .hero that shares .hero-row's flex line on desktop
   and stands completely on its own on mobile. Auto-advances only - no
   arrows/dots on either layout. Desktop: slides are stacked full-bleed and
   crossfade. Mobile: slides sit side by side and the active one is a
   genuinely wider box (flex-basis swap, not just a visual scale trick)  - 
   hero-teaser.js reads the active slide's real offsetLeft afterwards and
   slides the whole strip so focus moves right to left. */
.hero-teaser {
  position: relative; width: 30vw; overflow: hidden;
  background: transparent; border-left: 2px solid var(--brand-deep);
  height: 70vh; min-height: 400px; max-height: 640px;
}
.teaser-track { position: relative; height: 100%; transition: transform 0.6s ease; will-change: transform; }
.teaser-slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 10px; background-size: cover; background-position: center;
  background-color: var(--nav-bg-dynamic); background-image: var(--teaser-image, none);
  opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.teaser-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s linear 0s; }
.teaser-slide-inner { position: relative; z-index: 1; max-width: 100%; }
.teaser-heading, .teaser-placeholder { color: #FAF8F3; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; margin: 0; }
.teaser-body { color: rgba(250,248,243,0.75); font-size: 0.85rem; margin: 8px 0 0; }
a.teaser-slide { color: inherit; text-decoration: none; }

/* Image adverts. Desktop: the caption sits as a bar along the bottom of the
   picture, paper as the background and ink as the text. Mobile: picture only. */
.teaser-slide.has-image { align-items: flex-end; padding: 0; }
.teaser-slide.has-image .teaser-slide-inner {
  width: 100%; text-align: left; padding: 14px 16px;
  background: var(--paper); border-top: 2px solid var(--brand-deep);
}
.teaser-slide.has-image .teaser-heading { color: var(--ink); font-size: 1rem; }
.teaser-slide.has-image .teaser-body { color: var(--ink-soft); margin-top: 4px; }

@media (max-width: 899px) {
  .hero-teaser {
    width: 100%; height: auto; min-height: 0; max-height: none;
    border-left: none; margin-top: 20px; padding: 1px 10px;
  }
  .teaser-track { height: auto; display: flex; align-items: stretch; gap: 12px; transform: translateX(0); }
  .teaser-slide {
    /* Fixed, non-transitioning flex-basis: the size change is instant so
       hero-teaser.js can read the new offsetLeft immediately and get an
       exact number for the strip's slide transform - no fighting between
       an animating box size and an animating position at once. */
    position: relative; inset: auto; height: 96px;
    flex: 0 0 32%; min-width: 110px;
    border-radius: var(--radius-m); opacity: 0.65; visibility: visible;
    transition: opacity 0.4s ease;
    padding: 12px;
  }
  .teaser-slide.is-active { flex: 0 0 46%; opacity: 1; }
  .teaser-heading, .teaser-placeholder { font-size: 0.92rem; }
  .teaser-body { display: none; }
  .teaser-slide.has-image .teaser-slide-inner { display: none; }
}

/* ---------- Home tickers ---------- */
/* Two endless marquees share the same track/segment classes and the same
   script (headline-ticker.js, which clones the segment until it is wider than
   the bar, so the loop never shows a gap):
   - .announcement-ticker: rectangular announcement bar at the very top of the
     page, every item an underlined link passed from HomeView
     (announcement_items).
   - .headline-ticker: story headings scrolling in the "Headlines" row, right
     beside the parallelogram "Headlines" label, taking the remaining space.
   All ticker text is bold. */
.announcement-ticker,
.headline-ticker {
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
}
/* TOP MOST TICKER */
.announcement-ticker {
  background-color: var(--brand);
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  color: #0E1B2C;
  padding: 8px 0;
}

/* HEADLINE TICKER */
.headline-ticker {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 7px 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.headline-ticker-segment a,
.headline-ticker-segment span:not(.ticker-sep) {
  pointer-events: auto;
}
.headline-ticker {
  position: relative;
}
.headline-ticker::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--paper));
  pointer-events: none;
  z-index: 1;
}

.headline-ticker-track {
  height: 20px;
  display: inline-flex;
  width: max-content;
  animation: headline-ticker-scroll 30s linear infinite;
  will-change: transform;
}

.headline-ticker-track:hover { animation-play-state: paused; }

.headline-ticker-segment {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-right: 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.headline-ticker-segment a {
  display: inline;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticker-sep { margin: 0 14px; font-weight: 700; }
.announcement-ticker .ticker-sep { color: var(--amber); }

.announcement-ticker-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announcement-ticker-link:hover { color: var(--amber); }

/* shifts by exactly one group width (set from JS as --ticker-shift), so the
   restart is invisible; -50% is only the fallback before the script runs */
@keyframes headline-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--ticker-shift, -50%)); }
}

@media (prefers-reduced-motion: reduce) {
  .headline-ticker-track { animation: none; }
  .announcement-ticker, .headline-ticker { overflow-x: auto; }
}

/* ---------- Story grid ---------- */
.story-grid-section {margin: 0 auto; padding: 30px 20px 12px; }
.section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
/* "Headlines" label: parallelogram, the marquee sits right beside it */
.section-heading h1,
.section-heading h2 {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 24px;
  font-size: 24px;
  line-height: 1.2;
  background: var(--nav-bg);
  color: var(--nav-fg);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.section-heading h1 { font-size: 32px; }
.clear-filter { margin-left: auto; color: var(--amber-deep); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 640px) {
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .section-heading h1 {
    flex: 0 1 auto;
    max-width: calc(100vw - 40px);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.story-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }

.story-card {
  background: transparent; border: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; box-shadow: none; transition: none;
}
.story-card:hover { transform: none; box-shadow: none; }
.story-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, var(--paper-dim) 100%); }
/* Branded stand-in behind a lazy photo: the box reads as a placeholder, not a
   blank hole, until the image paints over it. Colours come from the theme
   tokens, so paper/ink-soft follow light and dark automatically. */
.story-card-ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.story-card-ph-bg { fill: var(--paper); }
.story-card-ph-text { fill: var(--ink-soft); opacity: .55; font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 0.2em; }
.story-card-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.story-card:hover .story-card-media img { transform: scale(1.04); }
.story-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.story-card-meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--ink); }
/* Category chip: sharp edged parallelogram in the fixed navy nav colours. */
.tag {
  display: inline-block; background: var(--nav-bg); color: var(--nav-fg);
  padding: 4px 14px; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: opacity 0.15s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}
a.tag:hover, a.tag:focus-visible { opacity: 0.82; color: var(--nav-fg); }
.meta-divider { width: 1px; height: 12px; background: var(--line); }
.story-card-title { font-size: 18.5px; line-height: 1.3; margin-bottom: 0; }
.story-card-title a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story-card-excerpt { color: var(--ink); font-size: 0.92rem; margin-bottom: 0; flex: 1; }
.story-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.story-card-byline { font-size: 0.82rem; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-card-footer .bookmark-chip { width: 34px; height: 34px; border-radius: var(--radius-s); border-color: var(--line); background: var(--paper-dim); color: var(--ink-soft); }
.story-card-footer .bookmark-chip:hover { background: var(--ink); color: var(--paper); }
.story-card-footer .bookmark-chip.has-label { width: auto; padding: 0 11px; gap: 6px; }
.story-card-footer .bookmark-chip .bookmark-label { font-size: 0.74rem; }
.story-card-footer .bookmark-chip.is-saved { color: var(--amber-deep); border-color: var(--amber-deep); background: transparent; }

.empty-state { text-align: center; color: var(--ink); padding: 40px 10px; }

/* ---------- Search + category landing pages ---------- */
.search-page-form { display: flex; gap: 10px; margin: 0 0 24px; max-width: 620px; }
.search-page-form input {
  flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--line);
  background: var(--input-fill); color: var(--ink); font: inherit; border-radius: var(--radius-s);
}
.search-page-form input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.search-page-form button {
  padding: 11px 24px; border: 0; background: var(--nav-bg); color: var(--nav-fg);
  font: inherit; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.search-page-form button:hover { background: var(--ink-soft); }
.search-page-form button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.search-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  max-width: 620px;
  flex-wrap: wrap;
}
.search-filter-label { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft, #444); }
.search-filter-select {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
.search-filter-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: block; }

.search-skeleton-wrap { margin: 0 0 16px; }
.search-skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .search-skeleton-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .search-skeleton-grid { grid-template-columns: repeat(3, 1fr); } }
.search-skeleton-card {
  min-height: 280px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.04) 63%);
  background-size: 400% 100%;
  animation: search-skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes search-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .search-skeleton-card { animation: none; }
}
.category-page-eyebrow {
  margin: 0 0 8px; color: var(--amber-deep); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}

/* ---------- Load more (3D button) ---------- */
.load-more-wrap { display: flex; justify-content: center; margin-top: 36px; }
.load-more-nav {
  display: flex; align-items: center; justify-content: space-between; width: min(420px, 100%); gap: 14px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; box-shadow: var(--shadow-card);
}
.load-more-arrow {
  border: 1px solid var(--line); background: var(--paper-dim); color: var(--ink); width: 42px; height: 42px; border-radius: 50%; font-size: 1.4rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease;
}
.load-more-arrow:hover:not(.is-disabled) { background: var(--amber); border-color: var(--amber); }
.load-more-arrow.is-disabled { opacity: 0.45; pointer-events: none; }
.load-more-index {
  min-width: 52px; text-align: center; font-weight: 700; color: var(--ink); letter-spacing: 0.04em;
}
.load-more-wrap .btn-3d { display: none; }

/* ---------- Footer ---------- */
/* Uses the fixed --nav-bg/--nav-fg tokens (not --ink/--paper) on purpose: the
   footer, like the desktop nav bar, must stay the same dark navy regardless of
   the site's light/dark theme, on both mobile and desktop. */
.site-footer {
  position: relative; z-index: 0; background-color: var(--nav-bg); color: var(--nav-fg-light); margin-top: 60px; overflow: hidden; isolation: isolate;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; background: transparent; z-index: -1;
}
.site-footer > * { position: relative; z-index: 1; }

.footer-newsletter-inner { max-width: 1180px; margin: 0 auto; padding: 32px 20px 20px; text-align: center; }
.footer-brand { justify-content: center; margin-bottom: 10px; }
.footer-brand .brand-word { color: var(--nav-fg); }
.footer-tagline { color: var(--nav-fg-light); margin-bottom: 16px; font-style: italic;}
.newsletter-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
@media (min-width: 720px) {
  .newsletter-form { flex-direction: row; }
}
.newsletter-form input {
  flex: 1; min-width: 200px; padding: 11px 14px; border-radius: var(--radius-m); border: 1px solid rgba(246,243,237,0.25);
  background: rgba(246,243,237,0.06); color: var(--nav-fg); font-size: 0.92rem;
}
.newsletter-form input::placeholder { color: rgba(246,243,237,0.45); }
.newsletter-form button {
  padding: 11px 20px; border-radius: var(--radius-m); border: none; background: var(--amber); color: #0E1B2C;
  font-weight: 700; font-size: 0.9rem; transition: background 0.15s ease;
}
.newsletter-form button:hover { background: #f4b743; }
.newsletter-status { min-height: 20px; font-size: 0.85rem; margin: 12px 0 0; }
.newsletter-status.is-ok { color: #8fd6a8; }
.newsletter-status.is-error { color: #e79c8a; }

.footer-main {
  max-width: 1180px; margin: 0 auto; padding: 0;
}
.footer-signin { padding: 0 0 18px; margin: 0;}
.footer-signin-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border: 1px solid rgba(246,243,237,0.18); background: rgba(12,18,24,0.35); backdrop-filter: blur(4px); padding: 18px 20px;
}
.footer-signin-label { margin: 0 0 8px; color: var(--amber); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.footer-signin-inner h3 { margin: 0; color: var(--nav-fg); font-size: clamp(1rem, 2vw, 1.35rem); }
.footer-auth-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 719.98px) {
  .footer-signin-inner { width: 99%; margin: 0 auto; }
}
.footer-auth-link {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 0.86rem; border: 1px solid transparent; transition: transform 0.15s ease;
}
.footer-auth-link:hover { transform: translateY(-1px); }
.footer-auth-link.primary { background: transparent; color: var(--nav-fg); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.footer-auth-link.secondary { background: rgba(246,243,237,0.06); border-color: rgba(246,243,237,0.2); color: var(--nav-fg); }

.footer-columns {
  display: grid; gap: 24px; grid-template-columns: 1fr; border-top: 1px solid rgba(246,243,237,0.1); padding-top: 20px;
}
@media (max-width: 719.98px) {
  .footer-col { padding-top: 20px; border-top: 1px solid rgba(246,243,237,0.08); }
  .footer-col:first-child { padding-top: 0; border-top: none; }
  .footer-socials { text-align: center; }
}
@media (min-width: 720px) { .footer-columns { grid-template-columns: repeat(3, 1fr); } }
.footer-col h3 {
  color: var(--nav-fg); font-size: 0.9rem; text-transform: none; margin-bottom: 12px; font-family: var(--font-body); font-weight: 800; letter-spacing: 0.02em;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col li { list-style: disc; margin-left: 18px; color: var(--amber); }
.footer-col li::marker { color: var(--amber); }
/* Categories band: a plain, scannable index of every news category, arranged
   like a newspaper section list rather than a row of chips. */
.footer-categories-block {
  border-top: 1px solid rgba(246,243,237,0.1);
  padding-top: 22px;
  margin-top: 4px;
}
.footer-categories-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.footer-categories-head h3 {
  margin: 0; color: var(--nav-fg); font-size: 0.9rem; font-weight: 800; font-family: var(--font-body); letter-spacing: 0.02em;
}
.footer-categories-all { color: var(--amber); font-size: 0.8rem; font-weight: 700; }
.footer-categories-all:hover, .footer-categories-all:focus-visible { color: var(--nav-fg); outline: none; }
.footer-categories {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px;
}
.footer-categories li { list-style: none; margin: 0; padding: 0; }
.footer-categories a {
  display: flex; align-items: center; min-height: 36px; padding: 4px 0;
  color: rgba(246,243,237,0.78); font-size: 0.88rem; font-weight: 600; line-height: 1.3;
  border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-categories a:hover, .footer-categories a:focus-visible {
  color: var(--amber); border-bottom-color: var(--amber); outline: none;
}
.footer-col a { font-size: 0.9rem; color: rgba(246,243,237,0.72); }
.footer-col a:not(.soon):hover { color: var(--nav-fg-light); }
@media (min-width: 720px) {
  .footer-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .footer-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.footer-promote {
  background-color: var(--nav-bg);
  max-width: 1180px;
  margin: auto; padding: 0 0 12px; width: 100%;
}
.footer-promote-link {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(160px, 220px); align-items: center; gap: 0;
  width: 100%; max-width: 100%; margin: 0; padding: 0; border: 1px solid rgba(246,243,237,0.2); border-radius: 0; background: rgba(9, 18, 27, 0.34); color: var(--nav-fg); overflow: hidden; box-shadow: none; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.footer-promote-link:hover { background: rgba(9, 18, 27, 0.42); border-color: rgba(246,243,237,0.38); }
.footer-promote-copy {
  padding: 24px 24px 24px 28px; display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.footer-promote-kicker {
  margin: 0; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); font-weight: 700;
}
.footer-promote-copy h3 {
  margin: 0; color: var(--nav-fg); font-size: clamp(1.2rem, 2vw, 1.9rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em;
}
.footer-promote-meta {
  margin: 0; color: rgba(246,243,237,0.78); font-size: 0.92rem; line-height: 1.6; max-width: 52ch;
}
.footer-promote-action {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--nav-fg); font-size: 0.92rem; font-weight: 700;
}
.footer-promote-action svg { width: 16px; height: 16px; }
.footer-promote-visual {
  width: 100%; height: 100%; min-height: 180px; background: rgba(246,243,237,0.04); border-left: 1px solid rgba(246,243,237,0.12);
}
.footer-promote-visual img {
  display: block; width: 100%; height: 100%; max-height: 100%; aspect-ratio: 1; object-fit: cover; object-position: center;
}
@media (max-width: 720px) {
  .footer-promote {
    margin-right: 0;
    padding: 0 0 10px;
  }
  .footer-promote-link {
    grid-template-columns: 1fr; 
  }
  .footer-promote-copy {
    padding: 18px 16px 12px;
  }
  .footer-promote-visual {
    min-height: 180px;
    border-left: none; border-top: 1px solid rgba(246,243,237,0.12);
  }
}

.footer-credit {
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 18px;
}
.footer-credit-link { display: inline-flex; align-items: center; gap: 8px; }
.footer-credit-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(246,243,237,0.5);
}
.footer-credit-avatar + .footer-credit-avatar { margin-left: -14px; border-color: var(--nav-bg); }
.footer-credit-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; margin-left: 4px; }
.footer-credit-label { font-size: 0.78rem; color: rgba(246,243,237,0.75); }
.footer-credit-name { font-size: 0.98rem; font-weight: 700; color: var(--nav-fg); }
.footer-credit-link:hover .footer-credit-name { color: var(--amber); }
.footer-credit-hint {
  font-style: italic; font-weight: 500; font-size: 0.78rem; color: var(--amber);
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.footer-credit-note { display: block; margin-top: 4px; font-size: 0.78rem; color: rgba(246,243,237,0.55); }
.footer-col a.soon { opacity: 0.55; }
.social-row {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 100%;
}
.footer-socials .social-row { justify-content: flex-start; width: 100%; }
.social-row li {
  list-style: none; margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(246,243,237,0.04); border: 1px solid rgba(246,243,237,0.08);
}
.social-row a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(246,243,237,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--nav-fg);
}
.social-row a:hover { background: var(--amber); color: #0E1B2C; }
.social-row svg { width: 16px; height: 16px; }
.social-row p {
  margin: 0; color: var(--nav-fg-light); font-size: 0.82rem; font-weight: 600; line-height: 1.4; flex: 1; word-break: break-word;
}
@media (min-width: 720px) {
  .footer-socials { display: flex; flex-direction: column; justify-content: flex-start; text-align: left; }
  .footer-socials .social-row { justify-content: flex-start; }
  .social-row li { width: 100%; }
}

.footer-bottom { border-top: 1px solid rgba(246,243,237,0.1); padding: 16px 20px 20px; text-align: center; font-size: 0.8rem; color: rgba(246,243,237,0.55); }
.footer-bottom p { margin: 0; }

/* ---------- Floating social buttons ---------- */
/*  The stack is a corner anchor, not a list: every button is placed on its
    own with its --i, so laying the buttons out as a row instead of a column
    is a movement that can be animated. CSS cannot animate flex-direction,
    and a re-flow of a column into a row looks like a glitch rather than a
    switch. */
.fab-stack {
  position: fixed; right: 16px; bottom: 24px; z-index: 200;
  width: 46px; height: 46px;
}
.fab-stack > .fab-btn,
.fab-stack > .fab-toggle {
  position: absolute;
  right: 0; bottom: 0;
  transition: right .36s cubic-bezier(.2,.7,.3,1), bottom .36s cubic-bezier(.2,.7,.3,1),
              transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.fab-stack > .fab-btn { bottom: calc(var(--i, 0) * 56px); }
/* The row runs away from the corner the stack is anchored to, so the icons
   spread leftwards and the toggle stays in the corner. */
.fab-stack.is-horizontal > .fab-btn { bottom: 0; right: calc(var(--i, 0) * 56px); }
.fab-btn {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); border: 1px solid rgba(12,18,24,0.15); box-shadow: 0 10px 24px rgba(15,27,40,0.18);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
/* :root[data-theme="dark"] .fab-btn,
body.dark .fab-btn, */
/* .dark .fab-btn {
  background: rgba(17,25,34,0.9); color: #f6f3ed; border-color: rgba(246,243,237,0.18); box-shadow: 0 10px 24px rgba(0,0,0,0.32);
} */
.fab-btn svg { width: 22px; height: 22px; }
.fab-btn:hover { transform: translateY(-3px) scale(1.05); }
.fab-stack.is-horizontal > .fab-btn:hover { transform: translateX(-3px) scale(1.05); }
.fab-whatsapp:hover { background: #25D366; color: #0E1B2C; }
.fab-twitter:hover { background: #1D9BF0; color: #fff; }
.fab-facebook:hover { background: #1877F2; color: #fff; }

/* The layout toggle: the one control that sits in the corner of the stack
   while the social icons fan out from it. */
.fab-toggle {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(15,27,40,0.16);
  cursor: pointer;
}
.fab-toggle svg { width: 20px; height: 20px; }
.fab-toggle:hover { background: var(--ink); color: var(--paper); }
.fab-toggle-icon-row { display: none; }
.fab-stack.is-horizontal .fab-toggle-icon-column { display: none; }
.fab-stack.is-horizontal .fab-toggle-icon-row { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .fab-stack > .fab-btn,
  .fab-stack > .fab-toggle {
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }
}
@media (min-width: 900px) {
  .fab-stack { right: 24px; bottom: 32px; }
}

/* ---------- Legal pages ---------- */
.legal-page { max-width: 760px; margin: 0 auto; padding: 56px 20px 80px; }
/* This is reused as the story-detail wrapper too, whose eyebrow (category/date)
   and intro (byline) are plain <p> tags. The old blanket ".legal-page p" rule
   beat their own smaller font-size on specificity, ballooning the byline to
   the same size as the article body. Excluding those two classes here keeps
   the large size for actual body copy only. */
.legal-page p:not(.legal-eyebrow):not(.legal-intro) { font-size: 1.5rem; }
.legal-wrap h1 { font-size: 36px; margin-bottom: 13px; }
.legal-eyebrow { color: var(--slate); font-size: 0.85rem; margin-bottom: 6px; }
.legal-intro { color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.legal-wrap h2 { font-size: 26px; margin-top: 26px; }

/* ---------- Story article page ---------- */
.story-article-shell {
  max-width: 1180px; margin: 0 auto; padding: 32px 20px 0;
}
.story-article {
  min-width: 99%; margin: 0 auto; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none;
}
.no-inner-shell {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}
.story-header {
  max-width: 920px; margin: 0 auto 22px;
}
.story-kicker-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--slate); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
.story-kicker {
  display: inline-block; padding: 5px 16px; background: var(--nav-bg); color: var(--nav-fg);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  letter-spacing: 0.07em; transition: opacity 0.15s ease;
}
a.story-kicker:hover, a.story-kicker:focus-visible { opacity: 0.82; color: var(--nav-fg); }
.story-separator { color: var(--slate); }
.story-bookmark-chip {
  width: auto; height: 30px; gap: 5px; padding: 0 9px; border-radius: var(--radius-s);
  border-color: var(--line); background: var(--paper-dim); color: var(--ink-soft);
  font: inherit; letter-spacing: 0.06em; cursor: pointer;
}
.story-bookmark-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: none; }
.story-bookmark-chip.is-saved { color: var(--amber-deep); border-color: var(--amber-deep); background: transparent; }
.story-bookmark-chip.is-pending { opacity: 0.55; pointer-events: none; }
.story-bookmark-chip .bookmark-icon { width: 14px; height: 14px; }

/*  The "save it for later" nudge that introduces the bookmark chip on a story
    page. interactions.js creates it, points it at the chip and takes it away
    after a few seconds, so it must never sit in the way of a tap or a line of
    text: no pointer events, no layout box of its own, and it only fades. */
.bookmark-tip {
  position: fixed; left: 12px; top: 0; z-index: 65;
  max-width: min(280px, calc(100vw - 16px));
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.98); color: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 0.76rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em;
  overflow-wrap: break-word;
  pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
  white-space: normal;
  text-align: center;
}
.bookmark-tip::after {
  content: "";
  position: absolute;
  left: var(--bookmark-tip-arrow, 50%);
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(16, 24, 40, 0.98);
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.06);
}
.bookmark-tip.is-on { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .bookmark-tip { transition: none; transform: none; }
  .bookmark-tip.is-on { transform: none; }
}
.story-header h1 {
  /* Article headlines use the same restrained newsroom sans as the interface. */
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.75rem, 4.2vw, 2.35rem); line-height: 1.14; letter-spacing: 0; margin: 14px 0 18px; color: var(--ink);
  overflow-wrap: break-word; text-wrap: balance;
}
@media (max-width: 640px) {
  .story-header h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
}
.story-meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.author-pill {
  display: flex; align-items: center; gap: 12px;
}
.author-avatar {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--paper-dim); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); font-weight: 700; text-decoration: none; flex-shrink: 0;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.meta-label { margin: 0; font-size: 0.72rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; }
.meta-author { font-weight: 700; color: var(--ink); }
.story-metrics {
  display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink); font-size: 0.83rem; font-weight: 500;
}
.story-metrics span { display: inline-flex; gap: 4px; align-items: center; background: var(--paper-dim); border: 1px solid none; border-radius: 20px; padding: 6px 10px; }
/* .story-metrics span { display: inline-flex; gap: 4px; align-items: center; background: linear-gradient(var(--brand) 50%, var(--brand-deep)); border: 1px solid none; border-radius: 20px; padding: 6px 10px; } */
.story-metrics strong { font-weight: 800; }
.story-hero-figure {
  margin: 0 0 20px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-card);
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.story-hero-figure img {
  width: 100%; height: auto; display: block; max-height: 420px; object-fit: cover; filter: saturate(0.9) contrast(0.98) brightness(0.97);
}
.story-hero-figure figcaption {
  padding: 12px 16px 14px; font-size: 0.86rem; color: var(--ink-soft); font-style: italic; text-align: right; background: var(--paper);
}
.story-body {
  overflow-wrap: anywhere;
  width: 100%; max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.66; color: var(--ink);
}
.story-body p,
.story-body li { text-align: justify; text-justify: inter-word; }
/*  Inline imgl/imgr token image: floated, text wraps around it, and kept
    noticeably smaller than the top-level hero (.story-hero-figure, which
    caps at 720px wide / 420px tall). */
.story-inline-img {
  max-width: min(50%, 300px); max-height: 260px; width: auto; height: auto;
  object-fit: cover; display: block; border-radius: 5px; border: 1px solid var(--line);
  box-shadow: var(--shadow-card); background: var(--paper-dim);
  filter: saturate(0.9) contrast(0.98) brightness(0.97);
}
.story-inline-img-left { float: left; margin: 4px 18px 12px 0;}
.story-inline-img-right { float: right; margin: 4px 0 12px 18px; }
/*  imgc: centered and blocking -- unlike imgl/imgr it is never floated, so
    text never wraps it, it just sits on its own line. Still kept
    noticeably smaller than the top-level hero (.story-hero-figure), and
    a little larger than the floated imgl/imgr variant since it has a full
    line to itself. `clear: both` keeps it below any imgl/imgr float still
    open above it instead of sitting beside one. */
.story-inline-img-center {
  float: none; clear: both; display: block; margin: 14px auto;
  max-width: min(65%, 460px); max-height: 320px;
}
@media (max-width: 599.98px) {
  .story-inline-img { max-width: min(55%, 200px); max-height: 190px; }
  .story-inline-img-center { max-width: min(85%, 320px); max-height: 260px; }
}
/*  Inline image figure (imgl / imgr / imgc). The <figure> carries the float,
    the frame and the width cap; the picture inside just fills it. The
    <figcaption> shows the author's image description beneath the picture,
    styled like the banner caption (.story-hero-figure figcaption). The plain
    .story-inline-img-* rules above are still used by the edit page preview. */
.story-inline-fig {
  margin: 4px 0 12px; width: fit-content; max-width: min(50%, 300px);
  border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow-card);
}
.story-inline-fig > .story-inline-img {
  float: none; display: block; width: auto; max-width: 100%; max-height: 260px; height: auto;
  margin: 0 auto; border: 0; border-radius: 0; box-shadow: none;
}
.story-inline-fig figcaption {
  padding: 7px 10px 8px; font-size: 0.78rem; line-height: 1.4; color: var(--ink-soft);
  font-style: italic; text-align: left; text-justify: auto; background: var(--paper);
  border-top: 1px solid var(--line); overflow-wrap: anywhere;
}
.story-inline-fig-left { float: left; margin-right: 18px; }
.story-inline-fig-right { float: right; margin-left: 18px; }
.story-inline-fig-right figcaption { text-align: right; }
.story-inline-fig-center {
  float: none; clear: both; margin: 14px auto; max-width: min(65%, 460px);
}
.story-inline-fig-center > .story-inline-img { max-height: 320px; }
.story-inline-fig-center figcaption { text-align: center; }
/*  vidl / vidr / vidc: an inline autoplaying video with a play/pause button
    and a sound (mute/unmute) button, and no native control bar. Sound is off
    by default and only plays while the video is on screen. The <figure>
    reuses the .story-inline-fig float/frame/caption rules above; only the
    <video> sizing, the black letterbox fill and the two overlay buttons are
    new. Both buttons are wired in HOME/static/home/js/interactions.js
    (data-video-toggle / data-video-sound); the `is-paused` and `is-muted`
    classes it toggles swap the glyphs. */
.story-inline-video-frame {
  position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto;
}
.story-inline-fig .story-inline-video-el {
  float: none; display: block; width: auto; max-width: 100%; max-height: 338px; height: auto;
  margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; background: #000;
}
.story-inline-fig-center .story-inline-video-el { max-height: 416px; }
.story-inline-video-toggle {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(14, 27, 44, 0.62);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.story-inline-video-toggle:hover,
.story-inline-video-toggle:focus-visible { background: rgba(14, 27, 44, 0.85); }
.story-inline-video-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.story-inline-video-sound { left: auto; right: 8px; }
.story-inline-video-icon { display: block; }
.story-inline-video-icon-play { display: none; }
.story-inline-video.is-paused .story-inline-video-icon-play { display: block; }
.story-inline-video.is-paused .story-inline-video-icon-pause { display: none; }
.story-inline-video-icon-sound-on { display: none; }
.story-inline-video:not(.is-muted) .story-inline-video-icon-sound-on { display: block; }
.story-inline-video:not(.is-muted) .story-inline-video-icon-sound-off { display: none; }
/*  A video token pointing at a provider PAGE (YouTube / Vimeo) is an <iframe>
    embed: the provider draws its own controls, so the custom overlay buttons
    are not used, and the frame is given a fixed 16:9 box instead of sizing
    itself to the clip. See _video_embed_url in BLOG/views.py.

    A video is watched, not skimmed, so -- unlike the imgl/imgr picture caps
    it inherits -- these are deliberately generous: a floated embed takes a
    clear majority of the reading column, and a centered one uses the whole
    column (up to the same 720px the hero image caps at). max-width is set
    here too: the base .story-inline-fig / -center cap is what actually
    holds the box down, so overriding only `width` would change nothing. */
.story-inline-video.is-embed { width: min(62%, 500px); max-width: min(62%, 500px); }
.story-inline-video.is-embed.story-inline-fig-center { width: min(100%, 720px); max-width: min(100%, 720px); }
.story-inline-video.is-embed .story-inline-video-frame { width: 100%; aspect-ratio: 16 / 9; }
/*  Portrait providers (TikTok, Instagram Reels, YouTube Shorts): reserve a
    9:16 box so the player is not letterboxed into a 16:9 strip. The widths
    are capped so the 9:16 height never exceeds ~560px (560 * 9/16 = 315px);
    clamping height alone would have widened the box and broken the ratio. */
.story-inline-video.is-embed.is-vertical { width: min(42%, 280px); max-width: min(42%, 280px); }
.story-inline-video.is-embed.is-vertical.story-inline-fig-center { width: min(80%, 315px); max-width: min(80%, 315px); }
.story-inline-video.is-embed.is-vertical .story-inline-video-frame { aspect-ratio: 9 / 16; }
.story-inline-video-embed { display: block; width: 100%; height: 100%; border: 0; background: #000; }
@media (max-width: 599.98px) {
  .story-inline-fig { max-width: min(55%, 200px); }
  .story-inline-fig > .story-inline-img { max-height: 190px; }
  .story-inline-fig-center { max-width: min(85%, 320px); }
  .story-inline-fig-center > .story-inline-img { max-height: 260px; }
  .story-inline-fig .story-inline-video-el { max-height: 247px; }
  .story-inline-fig-center .story-inline-video-el { max-height: 338px; }
  /*  On a phone the inherited 200/320px picture caps would crush a video,
     so the embed keeps the full column width on both variants. */
  .story-inline-video.is-embed,
  .story-inline-video.is-embed.story-inline-fig-left,
  .story-inline-video.is-embed.story-inline-fig-right,
  .story-inline-video.is-embed.story-inline-fig-center { width: 100%; max-width: 100%; }
  .story-inline-video.is-embed.is-vertical.story-inline-fig-left,
  .story-inline-video.is-embed.is-vertical.story-inline-fig-right,
  .story-inline-video.is-embed.is-vertical.story-inline-fig-center { width: min(72%, 300px); max-width: min(72%, 300px); }
  .story-inline-fig figcaption { font-size: 0.72rem; padding: 6px 8px 7px; }
}
/*  filel: inline downloadable file link (never floated -- a file has no
    picture to wrap text around, see DOCS/NEWS_CONTENT_CONVENTION.MD). Kept
    here alongside the imgl/imgr/imgc rules above because both the
    published story page (story_detail.html) and the Add News live preview
    (add-news-editor.js) render the real story-body markup styled straight
    from this file -- see the comment on .editor-preview-frame in
    add-news.css. `.story-body a.story-inline-file` beats the plain
    `.story-body a` link styling below (underline + amber color) on
    specificity so this renders as its own pill-shaped button instead. */
.story-inline-file,
.story-body a.story-inline-file {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper-dim); color: var(--ink);
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.story-body a.story-inline-file:hover, .story-body a.story-inline-file:focus-visible,
.story-inline-file:hover, .story-inline-file:focus-visible {
  background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px);
}
.story-inline-file-icon { font-size: 1.05em; line-height: 1; }

/*  filel preview card: the file itself sits above the download link. A PDF,
    text file, picture, track or clip is shown in the browser first, so the
    reader knows what the download contains. Types the browser cannot open
    (Office documents, archives) get a file-sheet cover naming the extension.
    Both the story page and the Add/Edit News live preview render this same
    markup, so the author sees exactly what the reader will. */
.story-inline-file-block {
  margin: 8px 0 22px; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper-dim); overflow: hidden;
}
.story-inline-file-preview { background: var(--paper); }
.story-inline-file-preview-frame {
  display: block; width: 100%; height: clamp(280px, 62vh, 560px);
  border: 0; background: var(--paper);
}
.story-inline-file-preview-image {
  display: block; width: 100%; max-height: min(68vh, 560px);
  object-fit: contain; background: var(--paper);
}
.story-inline-file-preview-audio {
  display: block; width: 100%; padding: 16px 14px; box-sizing: border-box;
}
.story-inline-file-preview-video {
  display: block; width: 100%; max-height: min(68vh, 560px);
  object-fit: contain; background: #000;
}
.story-body .story-inline-file-preview-note,
.story-inline-file-preview-note {
  margin: 0; padding: 8px 12px; text-align: left;
  border-top: 1px solid var(--line);
  color: var(--slate); font-size: 0.78rem; background: var(--paper);
}
.story-inline-file-preview.is-unavailable {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 180px; padding: 28px 18px; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, var(--paper-dim) 100%);
}
.story-inline-file-preview-sheet { display: block; color: var(--slate); line-height: 0; }
.story-inline-file-preview-ext {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; color: var(--ink);
}
.story-inline-file-preview-message { font-size: 0.78rem; color: var(--slate); }
.story-inline-file-block > .story-inline-file,
.story-body .story-inline-file-block > .story-inline-file {
  margin: 10px 12px 12px;
}
@media (max-width: 640px) {
  .story-inline-file-preview-frame { height: 52vh; min-height: 260px; }
  .story-inline-file-preview.is-unavailable { min-height: 150px; padding: 20px 14px; }
}
/*  btn: a block-level button link ("btn URL label" on its own line -- see
    DOCS/NEWS_CONTENT_CONVENTION.MD). Filled with the theme's ink/paper pair
    (dark on light, light on dark) so it stays high-contrast in both themes;
    the brand colour is the hover/focus fill. `.story-body a.story-inline-btn`
    beats the plain `.story-body a` link styling on specificity, the same
    approach as `.story-inline-file` above. It flows with the reading column
    and both the story page and the Add/Edit News live preview render it
    straight from this file. */
.story-inline-btn-row { margin: 6px 0 19px; }
.story-inline-btn,
.story-body a.story-inline-btn {
  display: inline-block; padding: 11px 24px;
  border: 1px solid var(--ink); border-radius: var(--radius-s);
  background: var(--ink); color: var(--paper);
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none;
  /* A resting shadow and a pressed state make it read as a real button on a
     touch screen, where there is no hover to reveal the lift below. */
  box-shadow: 0 2px 6px rgba(14, 27, 44, 0.22);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.story-body a.story-inline-btn:hover, .story-body a.story-inline-btn:focus-visible,
.story-inline-btn:hover, .story-inline-btn:focus-visible {
  background: var(--brand-deep); color: var(--paper); border-color: var(--brand-deep);
  transform: translateY(-1px); box-shadow: 0 5px 14px rgba(14, 27, 44, 0.28);
}
.story-body a.story-inline-btn:active,
.story-inline-btn:active {
  transform: translateY(1px); box-shadow: 0 1px 2px rgba(14, 27, 44, 0.28);
}
.story-body > p,
.story-body > ul,
.story-body > ol,
.story-body > h2,
.story-body > h3 {
  max-width: 100%; margin-bottom: 19px;
}
.story-body > h4 { max-width: 100%; margin-bottom: 19px; }
.story-body h2 {
  font-size: calc(30px * 0.82); line-height: 1.2; margin-top: 28px; margin-bottom: 14px; color: var(--ink);
}
.story-body h3 {
  font-size: calc(25px * 0.82); line-height: 1.24; margin-top: 24px; margin-bottom: 12px; color: var(--ink);
}
.story-body h4 { font-size: calc(21px * 0.82); line-height: 1.28; margin-top: 20px; margin-bottom: 10px; color: var(--ink); }
/*  Every heading is a jump target for the story's table of contents, so an
    anchor scroll must leave the sticky .site-header (height --header-h) its
    room instead of hiding the heading underneath it.
    Headings must always remain block-level and clear floated inline images
    (imgl/imgr) so they never wrap beside them. */
.story-body h1, .story-body h2, .story-body h3, .story-body h4, .story-body h5, .story-body h6 {
  display: block;
  clear: both;
}
.story-body h2, .story-body h3, .story-body h4 {
  scroll-margin-top: calc(var(--header-h, 64px) + 14px);
  /*  Lets the "you landed here" wash below fade back out after a table-of-
      contents jump. Under prefers-reduced-motion the global rule shortens the
      transition to nothing; the wash still shows for its full duration, it
      just appears and clears without a fade. */
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
/*  Briefly wash the heading a reader jumped to, so it is obvious where the
    table of contents landed even when the page hardly had to move. story-
    toc.js adds .story-toc-target on the link's target and clears it again. */
.story-body .story-toc-target {
  background-color: rgba(34, 211, 238, 0.16);
  box-shadow: inset 4px 0 0 0 var(--toc-accent);
  border-radius: 6px;
}
.story-body p { margin: 0 0 21px; }
.story-body ul, .story-body ol {
  padding-left: 1.4rem; margin-top: 0;
}
.story-body li { margin-bottom: 9px; }
.story-body a { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- story table of contents ----------
   Built by BLOG.views.enhance_story_body and spliced in right after the
   story's first paragraph, only when the author picked a Blog.toc_mode
   other than "Off". A deliberate dark "content section" against the paper
   page: a solid signal border, a clearly visible radius and a chevron
   dropdown instead of the old + / - glyph.

   Three collapse levels are chosen by the author:
     1  title only   -- the outer disclosure starts closed
     2  top sections -- outer open, every branch closed (# rows visible,
                        each with a chevron for its ## / ### children)
     3  fully open   -- outer open, every branch open

   Lives in base.css (not blog/css/story-detail.css) because it is a
   .story-body element: the news editor's live preview loads base.css too,
   so author and reader see exactly the same list. Each row keeps
   data-level (2/3/4) to show the #/##/### hierarchy the author wrote. */
.story-toc {
  margin: 4px 0 28px;
  background: var(--toc-bg);
  color: var(--toc-fg);
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  /*  Opening or closing a branch changes the section's height. Without this,
      the browser's scroll anchoring re-anchors on whatever is below and yanks
      the page up or down by the height that changed -- the "jump" a reader
      sees. Opting the section out of anchoring keeps the page still. */
  overflow-anchor: none;
}
.story-toc > details { margin: 0; }

/*  Head row: the fixed "TABLE OF CONTENT" label, always shown. */
.story-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--toc-accent);
  background: var(--toc-bg-soft);
}
.story-toc summary::-webkit-details-marker { display: none; }
.story-toc summary::marker { content: ""; }
.story-toc details[open] > summary { border-bottom: 1px solid var(--toc-rule); }

/*  Chevron dropdown icon; points down when its disclosure is closed and up
    when it is open. No transition: the reader asked for no animation. */
.story-toc-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--toc-accent);
}
.story-toc details[open] > summary .story-toc-chevron { transform: rotate(180deg); }
.story-toc-branch[aria-expanded="true"] .story-toc-chevron { transform: rotate(180deg); }

.story-body .story-toc-list,
.story-body .story-toc-children {
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-body .story-toc-children { padding-left: 18px; }
.story-body .story-toc-item { margin: 0; }
.story-body .story-toc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  border-top: 1px solid var(--toc-rule);
}
.story-body .story-toc-list > .story-toc-item:first-child > .story-toc-row { border-top: none; }

/*  A nested row that still has its own children gets a bullet in front of it,
    so a sub-section that opens further reads differently from a plain
    sub-heading at a glance. Top-level # sections are left alone. */
.story-body .story-toc-children > .story-toc-item--has-children > .story-toc-row::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--toc-accent);
}

/*  The .story-body a rule colours every link amber and underlines it; the
    TOC rows are scoped deeper so a contents row keeps its own colour until
    it is hovered. */
.story-body .story-toc-link {
  flex: 1 1 auto;
  display: block;
  padding: 11px 0 11px 20px;
  color: var(--toc-fg);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
}
.story-body .story-toc-children .story-toc-link { padding-left: 4px; }
.story-body .story-toc-item[data-level="3"] > .story-toc-row > .story-toc-link,
.story-body .story-toc-item[data-level="4"] > .story-toc-row > .story-toc-link {
  color: var(--toc-muted);
}
.story-body .story-toc-item[data-level="4"] > .story-toc-row > .story-toc-link { font-size: 0.9rem; }
.story-body .story-toc-link:hover,
.story-body .story-toc-link:focus-visible {
  color: var(--toc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.story-toc-branch {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--toc-accent);
  cursor: pointer;
}
.story-toc-branch:hover,
.story-toc-branch:focus-visible { background: var(--toc-rule); }
.story-toc-children[hidden] { display: none; }

.article-actions {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.action-form { display: inline-flex; }
.story-like-btn, .comment-submit-btn, .comment-like-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 99px; padding: 11px 18px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.story-like-btn { 
  background: var(--red-linar-grad); 
  color: #fff; 
  box-shadow: 0 8px 16px rgba(224, 36, 71, 0.25); 
}
/* already liked: outlined, so the same button reads as "click to unlike" */
.story-like-btn[data-liked="true"] {
  background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none;
}
.story-like-btn[data-liked="true"] .like-badge { background: rgba(179, 64, 42, 0.14); }
.story-like-btn.is-pending, .story-metrics .metric-like-btn.is-pending { opacity: 0.6; cursor: progress; }

/* ---------- Author follow ---------- */
.follow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; border: 1px solid var(--nav-bg); border-radius: 0;
  background: transparent; color: var(--ink); padding: 10px 15px;
  font-weight: 700; font-size: 0.86rem; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.follow-icon { width: 18px; height: 18px; flex-shrink: 0; }
.follow-icon-check { display: none; }
.follow-btn:hover, .follow-btn:focus-visible {
  border-color: var(--nav-bg); background: transparent; color: var(--ink);
}
.follow-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.follow-btn[data-following="true"] { background: var(--surface); border-color: var(--nav-bg); color: var(--amber-alt-deep); }
.follow-btn[data-following="true"] .follow-icon-plus { display: none; }
.follow-btn[data-following="true"] .follow-icon-check { display: block; }
.follow-btn[data-following="true"]:hover, .follow-btn[data-following="true"]:focus-visible {
  border-color: var(--danger); background: transparent; color: var(--danger);
}
.follow-count {
  display: inline-flex; align-items: baseline; gap: 4px;
  color: var(--ink); font-size: 0.74rem; line-height: 1.2;
}
.follow-count strong { color: var(--ink); font-size: 0.86rem; }
.follow-btn.is-pending { opacity: 0.6; pointer-events: none; }
.follow-note { margin: 0; color: var(--ink); font-size: 0.78rem; }

.story-like-btn:hover, .comment-submit-btn:hover, .comment-like-btn:hover {
  transform: translateY(-1px);
}
.like-badge, .comment-like-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 999px; background: rgba(28, 17, 0, 0.14); padding: 0 8px; font-size: 0.76rem;
}
.author-card {
  margin-top: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-l); padding: 18px; box-shadow: var(--shadow-card);
}
.author-card-main {
  display: block; color: inherit;
}
.author-card-inner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.author-card-image-wrap {
  width: 110px; aspect-ratio: 1; flex-shrink: 0;
}
.author-card-image,
.author-card-image-placeholder {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--paper-dim); font-weight: 700; font-size: 2rem; color: var(--ink-soft);
}
.author-card-copy {
  flex: 1; min-width: 220px;
}
.author-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px;
}
/*  Parallelogram tag, same slanted-cut look as .story-kicker above (the
    category chip in the story header) for visual consistency between the
    two -- clip-path replaces the plain rounded-pill shape. */
.author-card-tag {
  display: inline-flex; padding: 4px 12px 4px 16px; background: var(--nav-bg);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border: none; color: var(--nav-fg); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.author-card-label {
  margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); font-size: 0.75rem; font-weight: 700;
}
.author-card-copy h3 { margin: 0 0 10px; font-size: 1.4rem; color: var(--ink); }
.author-card-copy p { color: var(--ink-soft); }
.author-socials {
  display: flex; gap: 1px; flex-wrap: wrap; margin-top: 14px;
}
.author-socials a {
  display: inline-flex; align-items: center; justify-content: center; margin: 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}
.author-more-stories {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line);
}
.author-more-stories h2 {
  margin: 0 0 18px; font-size: 1.6rem; color: var(--ink);
}
.comment-panel {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
}
.comment-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.comment-panel-header h2 { margin: 0; font-size: 1.6rem; color: var(--ink); }
.comment-form {
  display: grid; gap: 12px; margin-bottom: 18px;
}
.comment-form textarea {
  width: 100%; min-height: 120px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); padding: 14px 16px; font: inherit; resize: vertical;
}
.comment-submit-btn {
  justify-self: flex-start; background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 8px 16px rgba(14, 27, 44, 0.16);
}
.comment-list { display: grid; gap: 14px; }
.comment-item {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-m); padding: 14px 16px;
}
.comment-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.comment-author-block { display: inline-flex; align-items: center; gap: 8px; }
.comment-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-dim); color: var(--ink-soft); font-weight: 700; font-size: 0.8rem;
}
.comment-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-like-form, .comment-delete-form { display: inline-flex; }

.comment-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--danger); line-height: 0; cursor: pointer;
}
.comment-delete-btn svg { display: block; width: 20px; height: 20px; pointer-events: none; }
.comment-delete-btn:hover, .comment-delete-btn:focus-visible { border-color: var(--danger); background: rgba(179, 64, 42, 0.08); }
.empty-comments { color: var(--ink); margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 768px) {
  .story-article-shell { padding-left: 12px; padding-right: 12px;}
  .story-article { max-width: 100%; padding: 22px 0 18px; }
  .story-meta-row { align-items: flex-start; }
  .author-card { width: min(95vw, 100%); margin-left: auto; margin-right: auto; }
  .author-card-inner { align-items: flex-start; }
  .comment-panel, .comment-form, .comment-item { width: min(95vw, 100%); margin-left: auto; margin-right: auto; }
  .comment-header { align-items: flex-start; flex-direction: column; }
  .comment-form textarea { min-height: 110px; }
}

/* ---------- Shared, accessible toast notifications ---------- */
.site-toast-stack {
  position: fixed;
  z-index: 10000;
  top: calc(var(--header-h) + 16px + env(safe-area-inset-top, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: min(440px, calc(100vw - 36px));
  pointer-events: none;
}
.site-toast {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  width: 100%;
  overflow: hidden;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--toast-accent);
  border-radius: 14px;
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: 0 16px 42px rgba(14, 27, 44, 0.2), 0 3px 9px rgba(14, 27, 44, 0.08);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  pointer-events: auto;
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.8,.2,1);
}
.site-toast--error {
  border-left-color: var(--toast-accent-error);
  background: var(--toast-bg-error);
}
.site-toast--info .site-toast__icon svg { animation: site-toast-spin 1s linear infinite; }
.site-toast.is-entering { opacity: 0; transform: translate3d(18px, -8px, 0) scale(.98); }
.site-toast.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.site-toast.is-leaving { opacity: 0; transform: translate3d(14px, -4px, 0) scale(.98); }
.site-toast__icon {
  display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 50%; background: color-mix(in srgb, var(--toast-accent) 12%, transparent);
  color: var(--toast-accent);
}
.site-toast--error .site-toast__icon {
  background: color-mix(in srgb, var(--toast-accent-error) 13%, transparent);
  color: var(--toast-accent-error);
}
.site-toast__icon svg { display: block; width: 18px; height: 18px; }
.site-toast__message { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.site-toast__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: currentColor; opacity: 0.72; cursor: pointer;
}
.site-toast__close:hover, .site-toast__close:focus-visible { background: var(--line); opacity: 1; }
.site-toast__close svg { width: 17px; height: 17px; }
.site-toast__progress {
  position: absolute; right: 0; bottom: 0; left: 0; height: 3px;
  background: var(--toast-accent);
  transform-origin: left center;
  animation: site-toast-progress var(--toast-duration, 5000ms) linear forwards;
}
.site-toast--error .site-toast__progress { background: var(--toast-accent-error); }
.site-toast.is-paused .site-toast__progress { animation-play-state: paused; }
@keyframes site-toast-progress { to { transform: scaleX(0); } }
@keyframes site-toast-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .site-toast-stack { right: 12px; left: 12px; width: auto; align-items: stretch; }
  .site-toast { gap: 10px; padding: 12px 11px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-toast { transition: none; }
  .site-toast__progress { animation: none; }
  .site-toast--info .site-toast__icon svg { animation: none; }
}

/* ---------- Quiet bottom toast (Android/iOS-style pill) ---------- */
.site-bottomtoast-stack {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.site-bottomtoast {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--toast-fg);
  color: var(--toast-bg);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.site-bottomtoast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.site-bottomtoast--error {
  background: var(--danger);
}
/* The same quiet pill, but pinned to the top edge. Used for the "last
   updated" notice when a reader opens a story that was edited. */
.site-bottomtoast-stack--top {
  /* Below the sticky site header, not on top of it: the "last updated"
     notice is quiet, and it must not hide the story's own navigation. */
  top: calc(var(--header-h) + 12px + env(safe-area-inset-top, 0px));
  bottom: auto;
}
.site-bottomtoast-stack--top .site-bottomtoast {
  transform: translateY(-8px);
}
.site-bottomtoast-stack--top .site-bottomtoast.is-visible {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .site-bottomtoast { transition: none; }
  .site-bottomtoast-stack { transform: none; }
}

/* ---------- Auth forms ---------- */
/* Auth-page notices reuse the quiet bottom-toast pill, but pinned to the
   top-centre so they never cover the submit button. The env() inset keeps
   the pill clear of notches and dynamic islands. */
#auth-toast {
  position: fixed;
  z-index: 10000;
  top: calc(var(--header-h) + 12px + env(safe-area-inset-top, 0px));
  left: 50%;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--danger);
  color: var(--toast-bg);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
#auth-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#auth-toast[data-tone="success"] { background: var(--toast-fg); }
@media (prefers-reduced-motion: reduce) {
  #auth-toast { transition: none; }
}

.auth-shell {
  width: min(1200px, calc(100% - 32px)); margin: 24px auto 0; padding: 0 0 48px;
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 0; align-items: stretch; min-height: calc(100vh - 140px);
}
.auth-shell-login, .auth-shell-register { align-items: center; }
.auth-visual {
  position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(14,27,44,0.96), rgba(14,27,44,0.84));
  border-radius: 42% 58% 53% 47% / 40% 32% 68% 60%; overflow: hidden;
  margin-right: clamp(0px, 2vw, 24px);
  box-shadow: var(--shadow-raised);
}
.auth-visual-inner {
  position: relative; width: min(66%, 360px); aspect-ratio: 0.9; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border-radius: 50%; backdrop-filter: blur(6px);
}
.auth-logo {
  width: min(68%, 220px); height: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18));
  /*  The logo sits on the auth-visual panel, which is always the dark navy
      gradient above, independent of the page theme. Pin the SVG image to its
      dark palette so the mark reads on that surface in light mode too. */
  color-scheme: dark;
}
.auth-panel {
  display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 52px) clamp(18px, 3vw, 36px);
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}
.auth-header { margin-bottom: 18px; }

.auth-header h1 { margin: 0; font-size: clamp(2rem, 3vw, 2.8rem); color: var(--ink); }
.auth-form { display: grid; gap: 16px; }
.field-group { display: grid; gap: 8px; }
.field-group label { font-weight: 600; color: var(--ink-soft); }
.field-group input {
  width: 100%; border: 1px solid transparent; border-bottom: 2px solid var(--line); background: transparent; border-radius: 0; color: var(--ink); padding: 12px 2px 10px; font: inherit;
}
.field-group input::placeholder { color: var(--ink); }
.field-group input:focus {
  border-color: transparent; border-bottom-color: rgba(232, 163, 36, 0.9);
  box-shadow: none; outline: none; background: transparent;
}
.password-field {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid var(--line);
  background: transparent;
}
.password-field:focus-within {
  border-bottom-color: rgba(232, 163, 36, 0.9);
}
.password-field input {
  border: none; border-bottom: none; padding-right: 0; flex: 1;
}
.password-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: none; background: transparent; color: var(--slate); cursor: pointer; border-radius: 999px; transition: background 0.18s ease, color 0.18s ease;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  background: rgba(148, 163, 184, 0.12); color: var(--ink);
  outline: none;
}
.password-toggle svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.password-toggle .eye-hidden { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-hidden { display: block; }
.auth-submit {
  width: min(75%, 320px); margin: 6px auto 0; border: none; background: var(--ink); color: var(--paper);
  border-radius: 12px; padding: 13px 16px; font-size: 0.96rem; font-weight: 700; cursor: pointer;
  display: block;
}
.auth-submit:disabled, .auth-submit.is-pending {
  opacity: 0.6; cursor: not-allowed;
}
.auth-switch { margin: 18px 0 0; color: var(--ink); text-align: center; }
.auth-switch a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.auth-note-copy { margin: 0 0 16px; color: var(--ink); font-size: 0.92rem; }
.auth-form-error { margin: 0 0 14px; color: var(--danger); font-weight: 700; font-size: 0.86rem; }
.auth-support-note {
  margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--amber-alt);
  background: var(--paper-dim); color: var(--ink); font-size: 0.85rem; border-radius: 8px;
}
.auth-support-note p { margin: 0 0 6px; }
.auth-support-note p:last-child { margin: 0; }
.auth-support-note a { color: var(--ink); font-weight: 700; }

@media (max-width: 899px) {
  .auth-shell {
    width: min(100%, calc(100% - 24px));
    grid-template-columns: 1fr; min-height: auto; margin-top: 18px; padding-bottom: 32px;
  }
  .auth-visual {
    min-height: 200px; margin-right: 0; border-radius: 30% 70% 52% 48% / 38% 42% 58% 62%;
  }
  .auth-visual-inner {
    width: min(52%, 240px);
  }
  .auth-panel {
    padding: 8px 4px 0;
  }
  .auth-submit {
    width: 100%; max-width: 280px;
  }
}

/* ---------- CSRF failure page ---------- */
.csrf-fail-icon { color: var(--danger); margin-bottom: 12px; }
.csrf-fail-icon svg { width: 40px; height: 40px; }
.csrf-fail-steps { margin: 0 0 22px; padding-left: 21px; }
.csrf-fail-steps li { margin-bottom: 10px; color: var(--ink); }
.csrf-fail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.csrf-fail-btn {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: var(--radius-s);
  background: var(--nav-bg); color: var(--nav-fg); font-weight: 600; font-size: 0.92rem;
  border: 1px solid var(--nav-bg); transition: background 0.15s ease;
}
.csrf-fail-btn:hover { background: var(--ink-soft); }
.csrf-fail-btn-ghost { background: none; color: var(--ink); border-color: var(--line); }
.csrf-fail-btn-ghost:hover { background: var(--paper-dim); }

/* ---------- Navigation usability ---------- */
.category-filter {
  padding: 2px 2px 8px;
}

.category-filter input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
}

.category-filter input:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

@media (max-width: 899.98px) {
  .trending-section .section-heading h2 { display: none; }

  .primary-nav {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, visibility 0s linear 260ms;
  }

  .site-header.nav-open .primary-nav {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  }

  .primary-nav > ul {
    min-height: 100%;
  }

  .nav-logout-item {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-top: 16px;
    background: var(--paper);
  }

 

  .category-filter {
    padding: 8px 0;
  }

  .category-filter input {
    background: var(--paper);
  }
}



/* ---------- Newsletter popup (bottom sheet) ---------- */
/* Anonymous-only, dismissible subscribe prompt. No full-screen backdrop on
   purpose -- the rest of the page stays usable underneath, which is what
   keeps this "not by force". Slides up from below the viewport and back
   down again; JS only ever toggles the .is-visible class. */
.newsletter-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 260; /* above the fab-stack (200), below toast/auth layers (300+) */
  display: flex;
  justify-content: stretch;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
  font-weight: bold;
}
.newsletter-popup-card {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
  max-height: min(35vh, 320px);
  background: var(--surface);
  border-top: 4px double red;
  /* border-radius: var(--radius-l) var(--radius-l) 0 0; */
  box-shadow: var(--shadow-raised);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  position: relative;
  transform: translateY(115%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
.newsletter-popup-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.newsletter-popup.is-visible {
  visibility: visible;
}
.newsletter-popup.is-visible .newsletter-popup-card {
  transform: translateY(0);
}
.newsletter-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-dim);
  color: red;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.newsletter-popup-close svg { width: 14px; height: 14px; }
.newsletter-popup-close:hover { color: var(--ink); }
.newsletter-popup-kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.newsletter-popup-heading {
  margin: 0 0 4px;
  padding-right: 28px;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}
.newsletter-popup-sub {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink);
}
.newsletter-popup-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newsletter-popup-form input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--input-fill);
  color: var(--ink);
  font-size: 0.88rem;
  font-family: var(--font-body);
}
.newsletter-popup-form input:focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 1px;
}
.newsletter-popup-form input.is-invalid {
  border-color: var(--danger);
}
.newsletter-popup-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.newsletter-popup-cancel {
  padding: 10px 14px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}
.newsletter-popup-cancel:hover { color: var(--ink); }
.newsletter-popup-submit {
  padding: 10px 20px;
  border-radius: var(--radius-m);
  border: none;
  background: var(--amber);
  color: #0E1B2C;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.newsletter-popup-submit:hover { background: #f4b743; }
.newsletter-popup-submit:disabled { opacity: 0.6; cursor: default; }
.newsletter-popup-status {
  min-height: 16px;
  margin: 6px 0 0;
  font-size: 0.78rem;
}
.newsletter-popup-status.is-ok { color: var(--success); }
.newsletter-popup-status.is-error { color: var(--danger); }

/* Ensure ad containers span full width to edges when needed */
.adsbygoogle,
ins.adsbygoogle,
.google-auto-placed {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}

@media (min-width: 640px) {
  /* Desktop keeps the prompt as a single compact card docked to the right,
     not a full-width sheet. Only the narrow layout should span the viewport. */
  .newsletter-popup {
    left: auto;
    right: 20px;
    bottom: 20px;
    padding: 0;
    justify-content: flex-end;
  }
  .newsletter-popup-card {
    width: min(440px, calc(100vw - 40px));
    max-width: 440px;
    border-radius: var(--radius-l);
    padding: 22px 22px 20px;
  }
  .newsletter-popup-body { overflow: visible; }
  .newsletter-popup-form { flex-direction: row; flex-wrap: wrap; }
  .newsletter-popup-form input { flex: 1 1 auto; min-width: 0; }
  .newsletter-popup-actions { flex: 0 0 auto; }
}

/* ---------- Pick up what you were reading ---------- */
.continue-section { padding: 30px 20px 0; }
.continue-rail {
  display: flex; gap: 14px; margin: 0 -20px; padding: 0 20px 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: 20px;
}
.continue-rail::-webkit-scrollbar { display: none; }
.continue-card {
  flex: 0 0 min(84%, 300px); scroll-snap-align: start;
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 10px;
}
.continue-card-media {
  flex: none; width: 76px; height: 76px; border-radius: var(--radius-s);
  overflow: hidden; background: var(--paper-dim);
}
.continue-card-media img { width: 100%; height: 100%; object-fit: cover; }
.continue-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.continue-card-body .tag { align-self: flex-start; }
.continue-card-title {
  margin: 0; font-size: 0.94rem; line-height: 1.28; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.continue-card-title a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 2px; }
.continue-card-meta { font-size: 0.74rem; color: var(--ink); }
@media (min-width: 760px) {
  .continue-rail { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .continue-card { flex: 1 1 calc((100% - 28px) / 3); }
}



/* ---------- Headline feature: first headline (lead) + popular sidebar ---------- */
.story-grid .headline-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
}

.story-card--lead .story-card-title { font-size: 28px; line-height: 1.26; }
.story-card--lead .story-card-excerpt { -webkit-line-clamp: 3; }

@media (min-width: 900px) {
  .story-grid .headline-feature {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
  .story-card--lead .story-card-media { aspect-ratio: 16 / 9; min-height: 340px; }
  .story-card--lead .story-card-title { font-size: 32px; line-height: 1.18; }
  .story-card--lead .story-card-excerpt { -webkit-line-clamp: 4; font-size: 1rem; }
  /* sidebar: a vertical divider instead of the section's own top border */
  .headline-feature .trending-section { border-left: 1px solid var(--line); padding-left: 28px; }
}

/* ---------- Pick up what you were reading: its own full-width strip, right under the headline feature ---------- */
.story-grid .continue-section { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); }
.continue-rail {
  display: flex; gap: 14px; margin: 0; padding: 0 0 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.continue-rail::-webkit-scrollbar { display: none; }
.continue-card {
  flex: 0 0 min(84%, 300px); scroll-snap-align: start;
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 10px;
}
.continue-card-media { flex: none; width: 76px; height: 76px; border-radius: var(--radius-s); overflow: hidden; background: var(--paper-dim); }
.continue-card-media img { width: 100%; height: 100%; object-fit: cover; }
.continue-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.continue-card-body .tag { align-self: flex-start; }
.continue-card-title {
  margin: 0; font-size: 0.94rem; line-height: 1.28; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.continue-card-title a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 2px; }
.continue-card-meta { font-size: 0.74rem; color: var(--ink); }
@media (min-width: 760px) {
  .continue-rail { flex-wrap: wrap; overflow: visible; }
  .continue-card { flex: 1 1 calc((100% - 28px) / 3); }
}

/* ---------- popular: a plain vertical row list at every width, never a grid ---------- */
.trending-section { padding: 0; }
.trending-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); min-height: 100%;}
.trending-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.trending-rank {
  flex: none; width: 2.2ch; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1;
  color: var(--slate);
}
.trending-item:first-child .trending-rank { color: var(--amber-deep); }
.trending-media { flex: none; width: 64px; height: 64px; border-radius: var(--radius-s); overflow: hidden; background: var(--paper-dim); }
.trending-media img { width: 100%; height: 100%; object-fit: cover; }
.trending-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.trending-title {
  margin: 0; font-size: 0.98rem; line-height: 1.3; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.trending-title a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 2px; }
.trending-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--ink); }
.trending-eye { width: 14px; height: 14px; flex: none; }

/* Phones: popular rows slide in 1st, 2nd, 3rd whenever the list scrolls into view
   (most-viewed.js toggles .is-inview). Out of view they snap back with no
   transition, ready to replay. overflow-x: clip stops the off-screen start
   position from creating sideways page scroll. */
@media (max-width: 899.98px) {
  .trending-list { overflow-x: clip; }
  .trending-list .trending-item { opacity: 0; transform: translateX(40px); transition: none; }
  .trending-list.is-inview .trending-item {
    opacity: 1; transform: none;
    transition: opacity 420ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .trending-list.is-inview .trending-item:nth-child(1) { transition-delay: 0ms; }
  .trending-list.is-inview .trending-item:nth-child(2) { transition-delay: 160ms; }
  .trending-list.is-inview .trending-item:nth-child(3) { transition-delay: 320ms; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .trending-list .trending-item { opacity: 1; transform: none; transition: none; }
}
/* ---------- Top like heart (mirrors the bottom like button) ---------- */
.story-metrics .metric-like-btn {
  display: inline-flex; gap: 4px; align-items: center; cursor: pointer;
  background: var(--paper-dim); border: 1px solid transparent; border-radius: 20px;
  padding: 6px 10px; font: inherit; color: inherit;
}
.story-metrics .metric-like-btn .metric-icon { fill: none; }
.story-metrics .metric-like-btn:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.story-metrics .metric-like-btn[data-liked="true"] { color: #e02447; }
.story-metrics .metric-like-btn[data-liked="true"] .metric-icon { fill: #e02447; }
.story-metrics .metric-like-btn span { background: none; padding: 0; border-radius: 0; }

/* ---------- Comment like: unliked = outlined, liked = red ---------- */
.comment-like-btn { background: transparent; color: var(--ink); border-color: var(--line); padding: 8px 14px; }
.comment-like-btn .comment-like-icon { color: transparent; -webkit-text-stroke: 1.2px currentColor; }
.comment-like-btn[data-liked="true"] { color: #e02447; border-color: #e02447; }
.comment-like-btn[data-liked="true"] .comment-like-icon { color: #e02447; -webkit-text-stroke: 0; }
.comment-toolbar { align-items: center; }

/* =====================================================================
   MOBILE NAVIGATION DRAWER -- keep at the END of this file so it wins over
   the older mobile nav rules above. Desktop (>=900px) is untouched.
   Plain text rows split by thin rules; the header bar stays visible and
   usable above it.
   ===================================================================== */
.nav-backdrop { display: none; }
.nav-auth { display: contents; }
/* Lock only the root. Putting overflow:hidden on body as well makes body its
   own scroll container, which breaks the sticky header and pushes it off
   screen whenever the drawer opens below the top of the page. */
html.nav-locked { overflow: hidden; }

@media (max-width: 899.98px) {
  /* dim only what is BELOW the header bar, so the bar keeps working */
  .nav-backdrop {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 1;
    background: rgba(6, 12, 20, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 220ms ease; touch-action: none;
  }
  .site-header.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* plain rectangle: starts under the header, runs to the bottom, 83% of the screen wide */
  .site-header .primary-nav {
    inset: var(--header-h) 0 0 auto; z-index: 2;
    width: 83vw; max-width: 83vw; padding: 0; border-radius: 0;
    background: var(--paper); border-left: 1px solid var(--line);
    box-shadow: -8px 0 24px rgba(6, 12, 20, 0.28);
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .site-header .primary-nav > ul { padding: 0; margin: 0; gap: 0; min-height: 0; flex: 0 0 auto; }

  /* every row: text only, divided by a rule */
  .site-header .primary-nav > ul > li { border-bottom: 1px solid rgba(128, 128, 128, 0.45); }
  .site-header .primary-nav > ul > li > a,
  .site-header .primary-nav .dropdown-toggle {
    display: block; width: 100%; padding: 17px 20px; border-radius: 0;
    font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em;
    color: var(--ink); text-align: left; background: transparent;
  }
  .site-header .primary-nav > ul > li > a::after { display: none; }
  .site-header .primary-nav a, .site-header .primary-nav button { -webkit-tap-highlight-color: transparent; }
  .site-header .primary-nav > ul > li > a.is-current,
  .site-header .primary-nav > ul > li > a:focus,
  .site-header .primary-nav .dropdown-toggle:focus { background: transparent; box-shadow: none; }
  .site-header .primary-nav a:focus-visible,
  .site-header .primary-nav button:focus-visible { outline-offset: -3px; }
  @media (hover: hover) {
    .site-header .primary-nav > ul > li > a:not(.soon):hover,
    .site-header .primary-nav .dropdown-toggle:hover { background: var(--paper-dim); color: var(--ink); }
  }
  .site-header .primary-nav a.soon { opacity: 0.6; }
  .site-header .primary-nav .soon-tag { margin-left: 8px; }

  /* dropdown rows end with a text + / - instead of an icon */
  .site-header .primary-nav .dropdown-toggle { display: flex; align-items: center; justify-content: space-between; }
  .site-header .primary-nav .dropdown-toggle .chev { display: none; }
  .site-header .primary-nav .dropdown-toggle::after {
    content: ""; flex: none; width: 14px; height: 14px;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    transition: background-size 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .site-header .has-dropdown.is-open > .dropdown-toggle::after { background-size: 100% 2px, 2px 0; transform: rotate(180deg); }

  /* closed = collapsed to zero height; --dd-h is measured by app.js on open */
  .site-header .primary-nav .dropdown-menu {
    position: static; display: block; margin: 0; padding: 0; min-width: 0;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: none;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
    transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, visibility 0s linear 320ms;
  }
  .site-header .has-dropdown.is-open .dropdown-menu {
    max-height: var(--dd-h, 70vh); opacity: 1; visibility: visible;
    transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease 40ms, visibility 0s;
  }
  /* dropdown rows ease in one after another */
  .site-header .primary-nav .dropdown-menu li {
    opacity: 0; transform: translateX(-10px);
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .site-header .has-dropdown.is-open .dropdown-menu li {
    opacity: 1; transform: none;
    transition: opacity 240ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 30ms + 70ms);
  }
  .site-header .dropdown-menu li:nth-child(1) { --i: 0; }
  .site-header .dropdown-menu li:nth-child(2) { --i: 1; }
  .site-header .dropdown-menu li:nth-child(3) { --i: 2; }
  .site-header .dropdown-menu li:nth-child(4) { --i: 3; }
  .site-header .dropdown-menu li:nth-child(5) { --i: 4; }
  .site-header .dropdown-menu li:nth-child(6) { --i: 5; }
  .site-header .dropdown-menu li:nth-child(7) { --i: 6; }
  .site-header .dropdown-menu li:nth-child(n+8) { --i: 7; }

  /* top level rows ease in when the drawer opens */
  .site-header .primary-nav > ul > li {
    opacity: 0; transform: translateX(18px);
    transition: opacity 140ms ease, transform 140ms ease;
  }
  .site-header.nav-open .primary-nav > ul > li {
    opacity: 1; transform: none;
    transition: opacity 260ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--r, 0) * 35ms + 100ms);
  }
  .site-header .primary-nav > ul > li:nth-child(1) { --r: 0; }
  .site-header .primary-nav > ul > li:nth-child(2) { --r: 1; }
  .site-header .primary-nav > ul > li:nth-child(3) { --r: 2; }
  .site-header .primary-nav > ul > li:nth-child(4) { --r: 3; }
  .site-header .primary-nav > ul > li:nth-child(5) { --r: 4; }
  .site-header .primary-nav > ul > li:nth-child(6) { --r: 5; }
  .site-header .primary-nav > ul > li:nth-child(n+7) { --r: 6; }
  .site-header .primary-nav .dropdown-menu li { margin: 0; }
  .site-header .primary-nav .dropdown-menu li a {
    display: block; padding: 14px 20px 14px 34px; border-radius: 0;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    font-size: 1rem; font-weight: 500; color: var(--ink);
  }
  .site-header .primary-nav .dropdown-menu li a:hover { background: var(--paper-dim); }
  .site-header .primary-nav .category-filter { padding: 4px 20px 14px; }
  .site-header .primary-nav .category-menu li[hidden] { display: none; }

  /* sign up / log in: two plain rows split by a rule */
  .site-header .primary-nav .nav-auth { display: block; }
  .site-header .primary-nav .nav-auth > a:not(:last-child) { border-bottom: 1px solid rgba(128, 128, 128, 0.45); }

  /* logout: sits right after the links (NOT pinned), centred, no fill, red text with a red underline */
  .site-header .nav-logout-item {
    position: static; margin: 0; padding: 30px 20px 36px; background: transparent;
    display: flex; justify-content: center; border-bottom: 0;
  }
  .site-header .nav-logout-form { width: auto; justify-content: center; }
  .site-header .nav-logout-btn {
    width: auto; max-width: none; padding: 6px 4px; border-radius: 0; background: none;
    border: none; border-bottom: 2px solid var(--danger);
    color: var(--danger); text-align: center; text-transform: uppercase;
    letter-spacing: 0.14em; font-size: 1rem; font-weight: 800;
  }
  .site-header .nav-logout-btn:hover { background: none; color: var(--danger); border-bottom-color: var(--danger); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-backdrop, .site-header .primary-nav,
  .site-header .primary-nav > ul > li,
  .site-header .primary-nav .dropdown-menu,
  .site-header .primary-nav .dropdown-menu li,
  .site-header .primary-nav .dropdown-toggle::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ---------- Forgot password feedback ---------- */
.auth-submit.is-pending::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: authSpin 0.7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }
.auth-live { min-height: 20px; margin: 10px 0 0; text-align: center; font-size: 0.85rem; color: var(--ink); }
.auth-success-icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px;
  border-radius: 50%; background: var(--success); color: #fff;
}
.auth-success-icon svg { width: 24px; height: 24px; }
.auth-inline-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer contact column ---------- */
.footer-contact-list { gap: 14px !important; }
.footer-col .footer-contact-list li { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.footer-contact-list li::marker { content: ""; }
.footer-contact-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--amber); }
.footer-col .footer-contact-list a { color: var(--nav-fg); font-weight: 600; word-break: break-word; }
.footer-col .footer-contact-list a:hover { color: var(--amber); }
.footer-col .footer-contact-list .footer-contact-detail { font-size: 0.8rem; font-weight: 400; color: rgba(246, 243, 237, 0.6); }
.footer-contact-socials { display: flex; gap: 10px; margin-top: 16px; }
.footer-col .footer-contact-socials a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(246, 243, 237, 0.08); border: 1px solid rgba(246, 243, 237, 0.16); color: var(--nav-fg);
  transition: background 0.15s ease, transform 0.15s ease;
}
.footer-col .footer-contact-socials a:hover { background: var(--amber); color: #0E1B2C; transform: translateY(-1px); }
.footer-contact-socials svg { width: 18px; height: 18px; }

/* =====================================================================
   COMMENT ACTIONS -- like and delete share one size, one shape and one
   icon style (outline, currentColor), so they line up in the toolbar.
   Square corners, no pill, no text-glyph heart.
   ===================================================================== */
.comment-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
.comment-toolbar .comment-like-form, .comment-toolbar .comment-delete-form { display: flex; margin: 0; }
.comment-toolbar .comment-like-btn,
.comment-toolbar .comment-delete-btn {
  box-sizing: border-box; height: 38px; min-width: 38px; margin: 0; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; box-shadow: none;
  font: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.comment-toolbar .comment-delete-btn { padding: 0; color: var(--danger); }
.comment-toolbar .comment-like-btn { color: var(--ink); }
.comment-toolbar .comment-like-btn:hover, .comment-toolbar .comment-like-btn:focus-visible { transform: none; border-color: #e02447; color: #e02447; background: rgba(224, 36, 71, 0.07); }
.comment-toolbar .comment-delete-btn:hover, .comment-toolbar .comment-delete-btn:focus-visible { border-color: var(--danger); background: rgba(179, 64, 42, 0.08); }
.comment-toolbar .comment-like-btn:disabled { opacity: 0.6; cursor: progress; }

.comment-toolbar .comment-like-icon,
.comment-toolbar .comment-delete-btn svg {
  display: block; width: 18px; height: 18px; flex: none; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  -webkit-text-stroke: 0; color: inherit;
}
.comment-toolbar .comment-like-btn[data-liked="true"] { color: #e02447; border-color: #e02447; }
.comment-toolbar .comment-like-btn[data-liked="true"] .comment-like-icon { fill: currentColor; }

/* the count is plain text now, not a second pill inside the button */
.comment-toolbar .comment-like-count {
  min-width: 0; height: auto; padding: 0; border-radius: 0; background: none;
  font-size: 0.86rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* keep author on the left and the actions on the right, even on phones */
@media (max-width: 768px) {
  .comment-header { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; }
}

/* =====================================================================
   MOBILE HARDENING + HOME BREATHING SPACE + DESKTOP NAV SAFETY
   Kept at the end of the file so these overrides win regardless of order.
   ===================================================================== */

/* ---- Desktop: keep the nav link row from ever painting over the search.
   At 900-1100px the full row is too wide for the header bar, so spacing
   tightens there (gap + row padding) and the decorative "Soon" chip on the
   disabled Services link steps aside. The row itself stays intact -- every
   link, including Logout, remains visible and clickable, and dropdown menus
   are never clipped because no overflow container is created. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .primary-nav ul { gap: 8px; }
  .primary-nav > ul > li > a,
  .primary-nav .dropdown-toggle { padding: 6px 2px; }
  .primary-nav a.soon .soon-tag { display: none; }
}

/* ---- Hero teaser (image adverts) on phones: real caption bar + AD chip.
   Desktop already shows a paper caption bar under each advert picture;
   mobile used to strip it to a bare 96px image. Now each picture keeps a
   compact paper bar with an "AD" parallelogram label and a two-line heading,
   so the ad block reads as a deliberate ad unit. The slides get a little
   taller to fit picture + bar. */
@media (max-width: 899.98px) {
  .hero{
    background-color: transparent;
    padding-right: 2px;
  }
  .hero-teaser { margin-top: 24px; padding: 1px 12px 10px;}
  .teaser-slide { height: 128px; }
  .teaser-slide.has-image .teaser-slide-inner {
    display: block; width: 100%; text-align: left;
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 7px 10px 9px;
    background: var(--paper); border-top: 2px solid var(--brand-deep);
    border-radius: 0 0 var(--radius-m) var(--radius-m);
  }
  .teaser-slide.has-image .teaser-slide-inner::before {
    content: "AD"; display: block; width: max-content; margin-bottom: 4px;
    padding: 1px 8px 1px 6px; background: var(--brand-deep); color: var(--paper);
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.7;
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  }
  .teaser-slide.has-image .teaser-heading {
    margin: 0; font-size: 0.74rem; line-height: 1.25; color: var(--ink);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .teaser-slide.has-image .teaser-body { display: none; }

  /* story grid: a touch more air below the cards */
  .story-grid-section { padding: 28px 20px 24px; }
}

/* ---- Desktop advert pictures carry the same "AD" chip the phone bar shows,
   but here it sits on the divider between the picture and the caption: half
   the chip rests on the image and half on the text, so the caption bar reads
   as a deliberate ad unit rather than a stray line of copy. */
@media (min-width: 900px) {
  .teaser-slide.has-image .teaser-slide-inner { position: relative; }
  .teaser-slide.has-image .teaser-slide-inner::before {
    content: "AD";
    position: absolute; top: 0; left: 16px; transform: translateY(-50%);
    padding: 1px 8px 1px 6px;
    background: var(--brand-deep); color: var(--paper);
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.7;
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  }
}

/* ---- Footer newsletter form: input and button sit side by side and only
   wrap to two lines when the row cannot hold both. */
@media (max-width: 719.98px) {
  .newsletter-form { flex-wrap: wrap; justify-content: center; }
  .newsletter-form input { flex: 1 1 170px; min-width: 0; }
  .newsletter-form button { flex: 0 0 auto; }
}

/* ---- Phones and small tablets: large, thumb-friendly tap targets across
   the site. 44px is the comfortable minimum; the icon-only bookmark chips
   become squares while the labelled ones stay pills but grow to 44px tall. */
@media (max-width: 899.98px) {
  .icon-btn { width: 44px; height: 44px; }
  .search-form input { padding: 12px 14px; }

  .hero-arrow { width: 44px; height: 44px; }
  .hero-controls { gap: 8px; }
  .hero-dots { gap: 4px; }
  .hero-dot { width: 36px; height: 44px; }
  .hero-dot.is-active { width: 44px; }
  .hero-dot::before { width: 12px; height: 12px; }
  .hero-dot.is-active::before { width: 26px; }
  .hero-bookmark { top: 14px; right: 14px; }
  .hero-bookmark .bookmark-chip { width: 44px; height: 44px; }

  .password-toggle { width: 44px; height: 44px; }
  .auth-submit { min-height: 46px; }
  .auth-form .field-group input { padding: 12px 2px 11px; }

  .tag { padding: 6px 14px; }
  .story-card-footer .bookmark-chip:not(.has-label) { width: 44px; height: 44px; }
  .story-card-footer .bookmark-chip.has-label { min-height: 44px; padding: 0 16px; }
  .story-bookmark-chip { height: 44px; padding: 0 12px; }
  .comment-submit-btn { width: 100%; justify-content: center; }
  .comment-toolbar .comment-like-btn,
  .comment-toolbar .comment-delete-btn { height: 44px; min-width: 44px; }
  .comment-toolbar .comment-like-btn { padding: 0 14px; }

  /* Phone: a true bottom sheet that goes all the way to the device edge.
     Its content is short enough to fit, so it must never scroll inside. */
  .newsletter-popup-card {
    max-height: none;
    overflow: visible;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .newsletter-popup-body { overflow: visible; }
  .newsletter-popup-close { width: 36px; height: 36px; }
  .newsletter-popup-form input { padding: 10px 12px; font-size: 0.86rem; }
  .newsletter-popup-submit,
  .newsletter-popup-cancel { min-height: 42px; padding: 8px 14px; font-size: 0.86rem; }
  .newsletter-popup-heading { font-size: 0.95rem; }
  .newsletter-popup-sub { font-size: 0.78rem; margin-bottom: 8px; }
  .newsletter-form input,
  .newsletter-form button { min-height: 46px; }
  .auth-gate-close { width: 44px; height: 44px; top: 8px; right: 8px; }
  .site-toast__close { width: 40px; height: 40px; }

  .footer-categories a { padding: 10px 10px; }
  .social-row a { width: 44px; height: 44px; }
  .footer-col .footer-contact-socials a { width: 44px; height: 44px; }
  .footer-auth-link { min-height: 44px; }
}

/* The docked desktop prompt is a card, not a sheet: it shows all of its copy
   at once, so the phone height cap above must not leave an inner scrollbar. */
@media (min-width: 640px) {
  .newsletter-popup-card { max-height: none; }
}

/* ---- Landscape phones: the fixed 45vh hero would be crushed, so let it
   size to its content with a floor, clear its controls, and pull the
   advert strip up a little. */
@media (max-width: 899.98px) and (max-height: 500px) and (orientation: landscape) {
  .hero { height: auto; min-height: 250px; }
  .hero-content { padding: 24px 20px 64px; }
  .hero-controls { bottom: 10px; }
  .hero-teaser { margin-top: 14px; }
  .teaser-slide { height: 116px; }
}

/* purposedly put at the bottom so it only clear when the base.css is fully loaded */
.dummy-loading{display: none;}

/* ============================================================
   POST-LOAD POLISH (appended last so it wins by order):
   - no default blue/grey "pressed link" blob on any tap target
   - round the buttons that were still genuinely rectangular
   - solid toast surface
   - hide teaser clones on the desktop (stacked) layout
   - standalone "Popular Stories" rail on Home pages 2+
   - slow-connection / FOUC hardening (content-visibility)
   ============================================================ */

/* --- 1. Pressing never flashes the browser's blue rectangle --- */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}
/* Click-focus must not draw a default blue ring either; keyboard users
   keep the amber :focus-visible outline defined site-wide. */
button:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* --- 2. Round the buttons that were still rectangular --- */
.story-page-btn { border-radius: 4px; }
.glass-btn { border-radius: 999px; }
.glass-btn-icon { border-radius: 50%; }

/* --- 3. Solid toast surface --- */
.site-toast {
  border: 1px solid var(--line);
  border-left: 2px solid var(--toast-accent);
  border-radius: 16px;
  background: var(--toast-bg);
  box-shadow:
    0 2px 3px rgba(14, 27, 44, 0.06),
    0 10px 22px rgba(14, 27, 44, 0.16),
    0 34px 70px rgba(14, 27, 44, 0.28);
}
.site-toast--error {
  border-left-color: var(--toast-accent-error);
  background: var(--toast-bg-error);
}
.site-toast__icon {
  background: var(--toast-accent);
  color: var(--toast-bg);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--toast-accent) 45%, transparent);
}
.site-toast--error .site-toast__icon {
  background: var(--toast-accent-error);
  color: var(--toast-bg);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--toast-accent-error) 45%, transparent);
}
.site-toast__message { font-size: 0.93rem; line-height: 1.45; }
.site-toast__progress {
  height: 4px;
  border-radius: 2px;
  background: var(--toast-accent);
}
.site-toast--error .site-toast__progress { background: var(--toast-accent-error); }

/* --- 4. Teaser clones: only the mobile (strip) layout ever shows them --- */
@media (min-width: 900px) {
  .teaser-slide[data-clone="true"] { display: none; }
}

/* --- 5. Standalone "Popular Stories" rail on Home pages 2+ ---------------
   story_cards.html wraps the rail in .trending-wide outside the page-1
   headline-feature; give it its own row and show its heading (mobile hides
   it inside the page-1 layout where the rail is a compact sidebar). */
.story-grid .trending-wide {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
}
.story-grid .trending-wide .section-heading { margin-bottom: 4px; }
.story-grid .trending-wide .section-heading h2 { display: block; font-size: 1.05rem; }

.site-footer { content-visibility: auto; contain-intrinsic-size: auto 420px; }
#trending-section { content-visibility: auto; contain-intrinsic-size: auto 280px; }

/* ============================================================
   VIDEO THEATRE
   Tapping a story inline video or an archive video tile opens the
   clip in this wider overlay. The DOM is built and shown by the
   video-theatre block in HOME/static/home/js/interactions.js, which
   every page defers through base.html.
   ============================================================ */
.video-theatre {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 10, 18, 0.94);
}
.video-theatre[hidden] { display: none; }

.video-theatre-stage {
  position: relative;
  width: min(1200px, 96vw);
}

.video-theatre-el {
  display: block;
  width: 100%;
  max-height: 84vh;
  background: #000;
  border-radius: 8px;
}

/*  Provider embeds in the theatre: a fixed 16:9 box, same backdrop blur /
    feel as the inline embed but fills the stage. The inline .is-embed uses
    the same styling in spirit, the theatre replaces its inner HTML so this
    targets that container. */
.video-theatre-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-theatre-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.video-theatre-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  cursor: pointer;
}
.video-theatre-close:hover { background: rgba(0, 0, 0, 0.9); }

.video-theatre-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.video-theatre-speed {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.video-theatre-speed:hover { background: rgba(255, 255, 255, 0.14); }

.video-theatre-speed.is-active {
  background: #fff;
  border-color: #fff;
  color: #111;
}

body.video-theatre-open { overflow: hidden; }

@media (max-width: 560px) {
  .video-theatre { padding: 10px; }
  .video-theatre-stage { width: 96vw; }
  .video-theatre-el { max-height: 78vh; }
  .video-theatre-speed { padding: 6px 14px; }
}


/* ======================================================================
   NAV, SIMPLIFIED
   One quiet row on a desktop, one plain list in the phone drawer.
   Order for staff: ... Profile, Panel, + News, Logout.
   Declared last so it settles every earlier nav rule above.
   ====================================================================== */
.primary-nav a.is-current { color: var(--nav-fg-light); }
.primary-nav > ul > li > a.is-current::after { transform: scaleX(1); }

/* + News is the one call to action: a solid amber button, never a pill */
.primary-nav > ul > li.nav-news-link > a {
  background: var(--amber); color: #1a1205; font-weight: 700;
  padding: 7px 14px; border-radius: var(--radius-s);
}
.primary-nav > ul > li.nav-news-link > a::after { display: none; }
.primary-nav > ul > li.nav-news-link > a:hover { background: var(--amber-deep); color: #ff0000; }

/* desktop: logout is a plain text link at the end of the row, not a bordered box */
@media (min-width: 900px) {
  .primary-nav ul { gap: clamp(10px, 1.6vw, 26px); }
  .primary-nav .dropdown-menu { padding: 6px; min-width: 210px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); }
  .dropdown-menu li a { padding: 9px 12px; }
  .nav-logout-item { margin-left: auto; }
  .nav-logout-btn {
    border: 0; background: none; padding: 8px 2px; font-weight: 600; font-size: 0.92rem;
    color: var(--nav-fg); text-align: left;
  }
  .nav-logout-btn:hover { background: none; color: var(--danger); }
}

@media (max-width: 899.98px) {
  /* rows: same height, one hairline between, no stagger or slide-in per row */
  .site-header .primary-nav > ul > li,
  .site-header.nav-open .primary-nav > ul > li,
  .site-header .primary-nav .dropdown-menu li,
  .site-header .has-dropdown.is-open .dropdown-menu li {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
  .site-header .primary-nav > ul > li { border-bottom: 1px solid var(--line); }
  .site-header .primary-nav > ul > li > a,
  .site-header .primary-nav .dropdown-toggle { padding: 15px 20px; font-size: 1rem; font-weight: 600; }
  .site-header .primary-nav > ul > li > a.is-current { box-shadow: inset 2px 0 0 var(--ink-soft); }

  /* sub rows sit indented under their parent */
  .site-header .primary-nav .dropdown-menu li a { padding: 12px 20px 12px 34px; font-size: 0.96rem; font-weight: 500; }

  /* + News: a full width button row inside the list */
  .site-header .primary-nav > ul > li.nav-news-link { border-bottom: 0; padding: 14px 20px 6px; }
  .site-header .primary-nav > ul > li.nav-news-link > a {
    display: block; width: 100%; padding: 13px 16px; text-align: center; border-radius: var(--radius-s);
    background: var(--amber); color: #1a1205; font-weight: 700;
  }

  /* quiet footer links: readable ink, small, two per row */
  .nav-footer-links { margin: 8px 20px 0; padding: 14px 0 24px; border-top: 1px solid var(--line); }
  .site-header .primary-nav > ul > li.nav-footer-links { border-bottom: 0; }
  .nav-footer-list { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .nav-footer-list a { padding: 8px 0; color: var(--ink); font-size: 0.88rem; font-weight: 500; opacity: 0.85; }
  .nav-footer-list a:hover { opacity: 1; color: var(--amber-deep); }
}