/* shell 0 — early paint fallback; full tokens set later in editorial system.
   Keep brand ink/cream so first paint matches the product identity. */
html, body { background: var(--ws-bg, #0E0F12); color: var(--ws-text, #ECEDEF); }
  body { font-family: "Inter Tight", "Inter", system-ui, sans-serif; }
  /* Hard guard rails so nothing can ever cause horizontal scroll on any device. */
  /* Never lock overflow-x on the document for small screens — iOS freezes scroll.
     Desktop can still clip horizontal bleed. */
  html, body { max-width: 100vw; }
  @media (min-width: 768px) {
    html, body { overflow-x: hidden; }
  }
  /* Make sure long single-word titles wrap instead of pushing layout wider. */
  /* break-word (not anywhere): anywhere allows mid-letter breaks and makes
     narrow mobile card titles look "vertical" / unreadable. */
  h1, h2, h3, h4, .ed-title, .ed-excerpt, .ed-source, .ed-meta, p {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
  /* Flex/grid children can blow out their parent if min-width default is auto.
     Force them to shrink-to-fit instead of overflow. */
  .feed-magazine > *, .ed-card > * { min-width: 0; max-width: 100%; }
  /* Reaction / title chrome must always read left→right, even if a parent
     flex/grid column collapses. */
  .ed-card .ed-title,
  .ed-card .ed-excerpt,
  .ed-card .ed-meta,
  .ed-card .ed-source,
  .ed-card .ed-source-line {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
  }
  .ed-card .react-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    writing-mode: horizontal-tb !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ed-card .react-btn,
  .ed-card .discuss-btn,
  .ed-card .bookmark-btn,
  .ed-card .share-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .ed-card .ed-card-body {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  /* Desktop full-width cards: never collapse into a vertical text column.
     (Prior bug: side-by-side thumb layout + overflow-wrap:anywhere made
     titles paint mid-letter in a ~1em strip.) */
  @media (min-width: 768px) {
    .feed-magazine,
    #feed-grid,
    #frontpage-grid {
      width: 100%;
      max-width: 100%;
    }
    .ed-card,
    .ed-card.text-only,
    .ed-card.standard,
    .ed-card.feature,
    .ed-card.front-feature,
    .ed-card.hero {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
    .ed-card .ed-title,
    .ed-card .ed-excerpt,
    .ed-card .ed-meta,
    .ed-card .ed-source-line,
    .ed-card .ed-card-body {
      white-space: normal !important;
      writing-mode: horizontal-tb !important;
      text-orientation: mixed !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
      max-width: 100% !important;
    }
    /* Prefer stacked media→body on mid widths so title never shares a skinny col */
    #feed-grid .ed-card.standard:not(.text-only),
    #feed-grid .ed-card.front-feature:not(.text-only),
    #frontpage-grid .ed-card.standard:not(.text-only),
    #frontpage-grid .ed-card.front-feature:not(.text-only) {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: none !important;
    }
  }
  /* Images/videos never exceed their container. */
  img, video, iframe { max-width: 100%; height: auto; }
  /* Pre/code blocks can have long lines — break them. */
  pre, code { overflow-x: auto; max-width: 100%; }
  /* Scroll perf: tell the browser it can skip painting offscreen cards. */
  .ed-card { content-visibility: auto; contain-intrinsic-size: 600px; }
  body { font-feature-settings: "ss01", "cv11"; }
  .gradient-text { background: linear-gradient(90deg, #E8544F, #C8302C); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pill { display:inline-flex; align-items:center; gap:.25rem; padding:3px 9px; border-radius:9999px; font-size:11px; line-height:1; }
  .scrollbar::-webkit-scrollbar { width:8px; height:8px; }
  .scrollbar::-webkit-scrollbar-thumb { background: rgba(154,160,171,.3); border-radius:4px; }
  .scrollbar::-webkit-scrollbar-track { background: transparent; }

  /* Card */
  .card { transition: transform .12s ease, border-color .12s ease, background .12s ease; }
  .card:hover { transform: translateY(-2px); border-color: rgba(154,160,171,.45); }

  /* ====== FLAIR ====== */
  /* Stagger fade-in for feed cards */
  @keyframes ed-rise {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .ed-card { animation: ed-rise .42s cubic-bezier(.22,.93,.39,1) both; }
  .ed-card:nth-child(1)  { animation-delay: 0ms; }
  .ed-card:nth-child(2)  { animation-delay: 30ms; }
  .ed-card:nth-child(3)  { animation-delay: 60ms; }
  .ed-card:nth-child(4)  { animation-delay: 90ms; }
  .ed-card:nth-child(5)  { animation-delay: 120ms; }
  .ed-card:nth-child(6)  { animation-delay: 150ms; }
  .ed-card:nth-child(7)  { animation-delay: 175ms; }
  .ed-card:nth-child(8)  { animation-delay: 195ms; }
  .ed-card:nth-child(9)  { animation-delay: 215ms; }
  .ed-card:nth-child(n+10) { animation-delay: 230ms; }
  @media (prefers-reduced-motion: reduce) {
    .ed-card { animation: none; }
    /* Catch-all: neutralize every animation/transition (live pulse, shimmer
       skeletons, reaction pops, toasts, hover zooms) and disable smooth
       scroll for visitors who ask their OS to reduce motion. */
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Image hover effect — subtle zoom + tonal overlay */
  .thumb-wrap { position: relative; }
  .thumb-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s cubic-bezier(.22,.93,.39,1), opacity .35s ease; }
  .ed-card:hover .thumb-wrap img.loaded { transform: scale(1.04); }
  .thumb-wrap::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(11,18,32,.4) 100%);
    pointer-events: none; opacity: .6;
  }

  /* Title color shift on hover */
  .ed-card:hover .ed-source { color: #ECEDEF; }

  /* Drawer: slide in from the right with spring feel */
  .drawer-panel {
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.22,.93,.39,1);
    will-change: transform;
  }
  .drawer.open .drawer-panel { transform: translateX(0); }
  .drawer-back { opacity: 0; transition: opacity .25s ease; }
  .drawer.open .drawer-back { opacity: 1; }

  /* Reaction button: pop on click */
  @keyframes ed-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); }
    60% { transform: scale(.92); }
    100% { transform: scale(1); }
  }
  .react-btn.popping, .like-link.popping { animation: ed-pop .32s ease; }

  /* Toast slide-up + drift fade */
  @keyframes ed-toast-in {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  #toast { animation: ed-toast-in .25s cubic-bezier(.22,.93,.39,1) both; box-shadow: 0 8px 24px -8px rgba(200,48,44,.45); }

  /* ─── Search input + live-suggest dropdown ─────────────────────────────
     Header search input bumped up so it's tappable on mobile and visibly
     focusable on desktop. The suggest dropdown lists matched stories with
     kicker (source) + title + relative time — same visual register as the
     story cards so the eye doesn't have to retrain.
     ───────────────────────────────────────────────────────────────────── */
  #search-input {
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
    background: #16181E !important;
    border-color: #3a3e47 !important;
    padding-left: 38px !important;
  }
  #search-input::placeholder { color: rgba(236,237,239,.55) !important; }
  #search-input:hover { border-color: #4d525d !important; }
  #search-input:focus {
    border-color: #C8302C !important;
    background: #1A1B22 !important;
    box-shadow: 0 0 0 3px rgba(200,48,44,.16);
  }
  /* Cmd+K hint badge inside the search input — only visible on desktop. */
  #search-form::after {
    content: "⌘K";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #6c7079;
    background: #0E0F12;
    border: 1px solid #2A2D34;
    border-radius: 3px;
    padding: 2px 6px;
    pointer-events: none;
    letter-spacing: .04em;
  }
  #search-form:focus-within::after,
  #search-form:has(#search-clear:not(.hidden))::after { display: none; }
  @media (max-width: 767px) {
    #search-form::after { display: none; }
  }
  #search-suggest .ss-item {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(42,45,52,.6);
    text-decoration: none;
    cursor: pointer;
    color: inherit;
  }
  #search-suggest .ss-item:last-child { border-bottom: 0; }
  #search-suggest .ss-item:hover,
  #search-suggest .ss-item.active {
    background: rgba(200,48,44,.10);
  }
  #search-suggest .ss-kicker {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C8302C;
    font-weight: 700;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #search-suggest .ss-kicker .ss-time { color: #6c7079; font-weight: 600; letter-spacing: .12em; }
  #search-suggest .ss-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    line-height: 1.3;
    color: #ECEDEF;
    font-weight: 600;
    letter-spacing: -.005em;
  }
  #search-suggest mark {
    background: rgba(200,48,44,.25);
    color: #ECEDEF;
    padding: 0 2px;
    border-radius: 2px;
  }
  #search-suggest .ss-empty,
  #search-suggest .ss-loading,
  #search-suggest .ss-footer {
    padding: 10px 14px;
    font-size: 13px;
    color: #9CA0AB;
    font-family: ui-monospace, monospace;
    letter-spacing: .04em;
  }
  #search-suggest .ss-footer {
    border-top: 1px solid rgba(42,45,52,.6);
    color: #C8302C;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
  }
  #search-suggest .ss-footer:hover { background: rgba(200,48,44,.08); }
  @media (max-width: 767px) {
    /* Mobile search: always show a real field (not a 40px clipped stub).
       On focus it expands full-width over the header utilities so typing
       and suggestions stay readable. Collapsed used to look "cut off." */
    header.ws-header > div,
    header > div:first-child {
      position: relative;
      gap: 6px !important;
    }
    #search-form {
      flex: 1 1 auto;
      min-width: 0;
      max-width: none;
      overflow: visible;
    }
    #search-form #search-input {
      width: 100% !important;
      min-height: 40px !important;
      font-size: 16px !important; /* prevents iOS zoom-on-focus */
      padding-top: 9px !important;
      padding-bottom: 9px !important;
      padding-left: 36px !important;
      padding-right: 12px !important;
      border-radius: 8px !important;
    }
    #search-form #search-input::placeholder {
      color: rgba(236, 237, 239, 0.55) !important;
      opacity: 1;
      /* Short placeholder so it doesn't clip in the mid-width field */
      font-size: 14px;
    }
    /* Expanded: full header width for typing + suggestions */
    #search-form:focus-within,
    #search-form.is-active {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      flex: none;
      max-width: none;
      width: auto;
      z-index: 50;
      background: #0E0F12;
      padding: 4px 0;
      border-radius: 8px;
      overflow: visible;
    }
    header:has(#search-form:focus-within) > div > a:first-child,
    header:has(#search-form:focus-within) > div > .ml-auto,
    header:has(#search-form.is-active) > div > a:first-child,
    header:has(#search-form.is-active) > div > .ml-auto {
      visibility: hidden;
      pointer-events: none;
    }
    #search-suggest {
      position: fixed !important;
      left: 8px !important;
      right: 8px !important;
      top: 60px !important;
      width: auto !important;
      max-height: calc(100vh - 80px) !important;
    }
    #search-suggest .ss-title { font-size: 17px; line-height: 1.35; }
  }

  /* Live pulse dot — kept on spring-teal so it reads as "alive/realtime" */
  .live-dot {
    width: 7px; height: 7px; border-radius: 9999px; background: #10D9C4;
    box-shadow: 0 0 0 0 rgba(16,217,196,.6);
    animation: ed-live-pulse 2s cubic-bezier(.66,0,.34,1) infinite;
  }
  @keyframes ed-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,217,196,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16,217,196,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,217,196,0); }
  }

  /* Comment fresh-post fade-in */
  @keyframes ed-comment-in {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .comment.fresh { animation: ed-comment-in .35s ease both; background: rgba(200,48,44,.08); }

  /* Tab active underline — gradient violet→rose */
  .tab { position: relative; }
  .tab.active::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -2px; height: 2px;
    background: linear-gradient(90deg, #C8302C, #9E2420);
    border-radius: 2px;
    animation: ed-rise .25s ease both;
  }

  /* Mobile-first guards — do NOT set overflow-x:hidden on html/body here.
     That freezes document scrolling on real iOS. Desktop clips via min-width
     768px rule above; phones keep overflow visible. */
  /* Bigger tap targets */
  button, a, .tab, .pill, .react-btn, .discuss-btn { -webkit-tap-highlight-color: transparent; }
  @media (max-width: 767px) {
    /* Comfortable spacing on small screens — give content room to breathe. */
    html, body {
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
    }
    body { -webkit-text-size-adjust: 100%; font-size: 16px; line-height: 1.55; }
    button, a { touch-action: manipulation; }

    /* Tap targets — Apple/Google guideline: 44x44 CSS px minimum for any
       interactive element. Audited 2026-04 on the Android emulator: top
       bar icons were 32x32, reaction emojis 42x42, save button 26px tall.
       This block bumps every interactive surface in the header + feed
       toolbar to at least 44px on the leading axis without disturbing
       desktop layout. */
    .tab { padding: .6rem 1rem; font-size: 15px; flex-shrink: 0; min-height: 44px; }
    .react-btn, .discuss-btn {
      padding: 10px 13px; font-size: 14px;
      min-height: 44px; min-width: 44px;
    }
    .ed-card .react-strip { gap: 8px; flex-wrap: wrap; }
    .ed-card .react-strip > button,
    .ed-card .react-strip > a { min-height: 44px; min-width: 44px; }
    /* Save button under cards was 69x26 — too short to thumb-tap. */
    .ed-card .save-btn,
    .ed-card [aria-label*="Save" i],
    .ed-card [aria-label*="Bookmark" i] {
      min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important;
    }
    /* Share button in card footer */
    .ed-card .share-btn,
    .ed-card [aria-label*="Share" i] {
      min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important;
    }

    /* Header — give the brand + buttons more vertical space + tap-friendly icons */
    header .h-14 { height: 3.5rem; }
    header .max-w-7xl { padding-left: 14px; padding-right: 14px; gap: 8px; }
    /* Every <button> directly in the header chrome gets a 44x44 hit area.
       Padding rather than fixed width so the icon stays centered visually
       and the layout doesn't blow out. */
    header button,
    header a[role="button"],
    header > div > button,
    header > div > a {
      min-width: 44px; min-height: 44px;
    }
    /* The notification bell, refresh, settings, install, donor wall, support
       icons are all <button class="p-2"> — that's 8px padding around a
       16px icon = 32x32. Bump padding to make them 44+. */
    #bell-btn, #refresh-btn, #settings-btn,
    header button.p-2, header a.p-2 {
      padding: 12px !important;
    }

    /* Feed cards — generous gap + padding */
    .feed-magazine { gap: 18px !important; row-gap: 22px !important; }
    .ed-card { padding: 0; }
    .ed-card .mt-4 { margin-top: 12px; }
    .ed-card.text-only { padding: 4px 2px; }

    /* Hero — readable but not screaming */
    .hero { gap: 18px; }
    .hero .thumb-wrap { aspect-ratio: 16 / 10; max-height: none; border-radius: 12px; }
    .hero .ed-title { font-size: 24px; line-height: 1.18; letter-spacing: -0.01em; }
    .hero .ed-excerpt { font-size: 15px; line-height: 1.55; }
    .feature .ed-title { font-size: 19px; line-height: 1.25; }
    .standard .ed-title { font-size: 17px; line-height: 1.3; }
    .ed-excerpt { font-size: 14px; line-height: 1.5; -webkit-line-clamp: 2; }

    /* Source meta line */
    .ed-source { font-size: 10.5px; }

    /* Section heading spacing inside panes */
    .pane h2 { margin-top: 0.5rem; }
    .pane h3 { margin-top: 0.25rem; }

    /* Form inputs default to 16px on iOS so they don't auto-zoom on focus */
    input, textarea, select { font-size: 16px !important; }

    /* Search bar in header — comfortable on mobile (was barely-tappable before).
       Larger height, more visible border, and a focus state that draws attention. */
    #search-input {
      font-size: 16px !important;
      padding-top: 11px !important;
      padding-bottom: 11px !important;
      padding-left: 38px !important;
      border-color: #3a3e47 !important;
      background: #16181E !important;
    }
    #search-input::placeholder { color: rgba(236,237,239,.5) !important; }
    /* Suggest dropdown handled by the @media (max-width:767px) block above —
       position: fixed with viewport-anchored left/right so titles aren't
       crushed into the form's narrow column. */

    /* Drawer (comments) full-width with safe-area */
    .drawer-panel { max-width: 100%; border-left: none; padding-bottom: env(safe-area-inset-bottom, 0); }
    .gif-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Tour panel — full-width-ish, never overflow */
    .tour-panel { width: calc(100vw - 24px); max-width: 460px; padding: 20px; }
    .tour-panel h2 { font-size: 19px; }
    .tour-panel p { font-size: 14px; }

    /* Settings drawer full width */
    #settings-drawer .max-w-md { max-width: 100% !important; }

    /* News search + markets converter stack cleanly */
    #news-q, #news-lang, #news-go { width: 100%; }
    #cc-amount, #cc-from, #cc-to { width: 100%; }
    #cc-result { margin-left: 0; margin-top: 8px; width: 100%; }

    /* Chat: respect iOS home indicator */
    [data-pane="chat"] > div { padding-bottom: env(safe-area-inset-bottom, 0); }

    /* Trending banner — looser layout */
    #trending-banner a { padding: 14px; }
    #trending-banner .text-xs { font-size: 11px; }

    /* Crypto + ticker grid: wider gaps */
    #crypto-grid { gap: 8px; }

    /* Editorial card column: full width */
    .feed-magazine > .hero,
    .feed-magazine > .feature,
    .feed-magazine > .standard { grid-column: 1 / -1 !important; }
  }
  @media (max-width: 480px) {
    /* Phone-specific extras — even tighter sizing */
    .hero .ed-title { font-size: 22px; }
    .ed-card.text-only.hero .ed-title { font-size: 22px; line-height: 1.22; }
    main, .pane > div { padding-left: 14px !important; padding-right: 14px !important; }
    .tour-step-dots { gap: 4px; }
    .gif-grid { grid-template-columns: repeat(2, 1fr); }
    /* Crypto tickers go 2-up on tiny screens */
    #crypto-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ===========================================================
     EDITORIAL DESIGN — masthead, section heads, value cards
     =========================================================== */

  /* Editorial serif — Cormorant Garamond. The font CSS is loaded via a
     real <link rel="stylesheet"> at the top of <head> (preceded by a
     preload), so we no longer need an @import here. The browser
     discovers and fetches the font CSS during HTML parse instead of
     after the inline <style> block has been evaluated. */

  .masthead {
    border-bottom: 1px solid #2A2D34;
    background: #0E0F12;
  }
  .masthead-rule {
    color: #C8302C;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    border-top: 2px solid #C8302C;
    border-bottom: 1px solid #2A2D34;
    padding: 8px 0;
    display: inline-block;
    margin-bottom: 32px;
  }
  .masthead-title {
    font-family: "Cormorant Garamond", "Charter", "Georgia", serif;
    font-weight: 700;
    font-size: 64px;
    line-height: .98;
    letter-spacing: -.025em;
    color: #ECEDEF;
    margin: 0;
  }
  .masthead-title-accent {
    color: #C8302C;
    font-style: italic;
    font-weight: 700;
  }
  .masthead-sub {
    margin-top: 22px;
    color: rgba(236,237,239,.72);
    font-size: 17px;
    line-height: 1.6;
    max-width: 640px;
    font-family: "Cormorant Garamond", Charter, Georgia, serif;
  }
  @media (max-width: 767px) {
    .masthead-title { font-size: 36px; line-height: 1.05; }
  }
  /* Community pulse — the collective WE, aggregate + anonymous. */
  .ws-pulse{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12.5px;letter-spacing:.02em;color:#9CA0AB}
  .ws-pulse .wsp-dot{width:8px;height:8px;border-radius:99px;background:#4D9A6A;box-shadow:0 0 0 0 rgba(77,154,106,.5);animation:wsp-breathe 2.6s ease-in-out infinite;flex:0 0 auto}
  .ws-pulse .wsp-lead{color:#C8302C;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
  .ws-pulse .wsp-body b{color:#ECEDEF;font-weight:600}
  .ws-pulse .wsp-sep{opacity:.4}
  @keyframes wsp-breathe{0%,100%{box-shadow:0 0 0 0 rgba(77,154,106,.45)}50%{box-shadow:0 0 0 5px rgba(77,154,106,0)}}
  @media (prefers-reduced-motion: reduce){.ws-pulse .wsp-dot{animation:none}}
  @media (max-width: 640px){
    .ws-pulse{font-size:11.5px}
    .masthead-sub { font-size: 15px; }
    .masthead .max-w-6xl { padding-top: 36px !important; padding-bottom: 36px !important; }
  }
  /* Desktop: trim the masthead so the first stories sit higher (more above the fold) */
  @media (min-width: 768px) {
    .masthead .max-w-6xl { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
    .masthead-rule { margin-bottom: 22px; }
    .masthead-sub { margin-top: 16px; }
  }
  /* Returning readers: collapse the home masthead to its slim edition rule so today's
     stories sit at the top. First-time visitors and crawlers still get the full hero. */
  html.returning #home-masthead .masthead-title,
  html.returning #home-masthead .masthead-sub,
  html.returning #home-masthead .masthead-actions { display: none; }
  html.returning #home-masthead .masthead-rule { margin-bottom: 0; }
  html.returning #home-masthead .max-w-6xl { padding-top: 14px !important; padding-bottom: 14px !important; }

  /* Canonical section links: a fast, crawlable route into the newsroom.
     Cardless by design so this reads as editorial navigation, not another
     promo module competing with the lead stories. */
  .edition-nav {
    border-top: 1px solid #2A2D34;
    border-bottom: 1px solid #2A2D34;
    background: rgba(14,15,18,.72);
  }
  .edition-nav-inner {
    display: flex; align-items: center; gap: 22px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: none; padding-top: 12px; padding-bottom: 12px;
  }
  .edition-nav-inner::-webkit-scrollbar { display: none; }
  .edition-nav-label {
    flex: 0 0 auto; color: #C8302C;
    font: 700 10px/1 ui-monospace, "SFMono-Regular", monospace;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .edition-nav a {
    flex: 0 0 auto; color: #B8BBC3; text-decoration: none;
    font-size: 13px; font-weight: 600; line-height: 1;
    transition: color .12s ease;
  }
  .edition-nav a:hover, .edition-nav a:focus-visible { color: #ECEDEF; }
  .edition-nav-tour { margin-left: auto; }
  @media (max-width: 767px) {
    .edition-nav-inner { gap: 18px; padding-left: 16px; padding-right: 16px; }
    .edition-nav-tour { margin-left: 0; }
  }

  .btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 12px 24px; border-radius: 4px;
    background: #C8302C;
    color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .01em;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(0,0,0,.4);
    transition: background .12s ease, transform .12s ease;
  }
  .btn-primary:hover { background: #B22A26; transform: translateY(-1px); }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 12px 24px; border-radius: 4px;
    background: transparent; border: 1px solid #2A2D34;
    color: #ECEDEF; font-weight: 500; font-size: 14px;
    transition: border-color .12s ease, background .12s ease;
  }
  .btn-ghost:hover { border-color: #ECEDEF; background: rgba(236,237,239,.04); }

  /* Editorial section headers */
  .ed-section-head {
    display: flex; align-items: center; gap: 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid #2A2D34;
    margin-bottom: 22px;
  }
  .ed-section-kicker {
    font-family: "Cormorant Garamond", "Charter", "Georgia", serif;
    font-size: 22px; font-weight: 700;
    color: #ECEDEF;
    letter-spacing: -.015em;
    flex-shrink: 0;
  }
  .ed-section-line { flex: 1; height: 1px; background: #2A2D34; }
  .ed-section-meta {
    color: #9CA0AB; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    flex-shrink: 0;
  }
  @media (max-width: 767px) {
    .ed-section-kicker { font-size: 18px; }
    /* Mobile: hide section meta entirely if it would overflow. The section
       title (kicker) carries the topic; the meta repeats list contents
       and was clipping mid-word on narrow screens. Visible md+ only. */
    .ed-section-meta { display: none; }
  }

  /* Trending row + Most-discussed row — horizontal scroll on mobile, grid on desktop */
  .trending-row, .most-discussed-row {
    display: grid; gap: 14px;
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 767px) {
    .trending-row, .most-discussed-row { grid-template-columns: 1fr; }
  }
  .trending-card {
    display: block;
    padding: 18px 20px;
    background: #16181D;
    border: 1px solid #2A2D34;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 1px 3px rgba(0,0,0,.35);
    transition: border-color .12s ease, transform .12s ease;
    position: relative;
    overflow: hidden;
  }
  .trending-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: #C8302C; opacity: 0; transition: opacity .12s ease;
  }
  .trending-card:hover { border-color: #C8302C; transform: translateY(-1px); }
  .trending-card:hover::before { opacity: 1; }
  .trending-card .rank {
    position: absolute; top: 6px; right: 14px;
    font-family: "Cormorant Garamond", serif;
    font-size: 40px; font-weight: 700;
    color: rgba(200,48,44,.16);
    line-height: 1;
  }
  .trending-card .source-line {
    color: #C8302C; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    margin-bottom: 10px;
  }
  .trending-card .title {
    font-family: "Cormorant Garamond", "Charter", serif;
    font-size: 17px; font-weight: 600; line-height: 1.3;
    color: #ECEDEF;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .trending-card .meta {
    margin-top: 12px;
    font-size: 11px; color: #9CA0AB; font-family: ui-monospace, "SFMono-Regular", monospace;
    letter-spacing: .04em;
  }

  /* Value-prop cards at bottom of feed */
  .value-card {
    background: #16181D;
    border: 1px solid #2A2D34;
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 1px 3px rgba(0,0,0,.35);
  }
  .value-card-icon { font-size: 26px; margin-bottom: 10px; opacity: .9; }
  .value-card-title {
    font-family: "Cormorant Garamond", "Charter", serif;
    font-size: 20px; font-weight: 600; color: #ECEDEF;
    margin-bottom: 8px;
    letter-spacing: -.01em;
  }
  .value-card-body { color: rgba(236,237,239,.72); font-size: 14.5px; line-height: 1.6; }

  /* Apply serif to editorial card titles */
  .ed-title { font-family: "Cormorant Garamond", "Charter", "Georgia", serif; }

  /* Skeleton */
  @keyframes shimmer { 0%{ background-position:-400px 0 } 100%{ background-position:400px 0 } }
  .skeleton { background: linear-gradient(90deg, rgba(154,160,171,.07) 0, rgba(154,160,171,.18) 50%, rgba(154,160,171,.07) 100%); background-size:800px 100%; animation: shimmer 1.4s linear infinite; }

  /* Editorial layout — auto-row sizing prevents tall-card stretch */
  .feed-magazine {
    display: grid;
    gap: 28px;
    row-gap: 40px;
    align-items: start;
    grid-auto-rows: max-content;
  }
  @media (min-width: 768px)  {
    .feed-magazine { gap: 32px; row-gap: 48px; }
  }
  .feed-magazine > .hero          { grid-column: span 12; }
  .feed-magazine > .feature       { grid-column: span 6; }
  /* Default 3-up on wide screens; mid widths forced to 2-up in the later block. */
  .feed-magazine > .standard      { grid-column: span 4; }
  /* .front-feature is the front-page-only tile that fills 3-up cleanly. */
  .feed-magazine > .front-feature { grid-column: span 4; }
  @media (min-width: 768px)  { .feed-magazine { grid-template-columns: repeat(12, 1fr); } }
  @media (max-width: 767px)  { .feed-magazine { grid-template-columns: 1fr; }
    .feed-magazine > .hero, .feed-magazine > .feature, .feed-magazine > .standard, .feed-magazine > .front-feature { grid-column: span 1; }
  }
  /* Front-feature title scale — sits between feature and standard. */
  .front-feature .ed-title { font-size: 19px; line-height: 1.25; }

  /* Notif prefs — preset/category/source chips */
  .np-preset, .np-cat-chip, .np-source-chip, .np-keyword-chip {
    background: #0E0F12; border: 1px solid #2A2D34; color: #ECEDEF;
    padding: 6px 12px; border-radius: 4px; font-size: 12px;
    cursor: pointer; transition: border-color .12s, background .12s, color .12s;
    font-family: inherit; line-height: 1.2;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .np-preset:hover, .np-cat-chip:hover, .np-source-chip:hover {
    border-color: #C8302C; color: #C8302C;
  }
  .np-cat-chip.active, .np-source-chip.active {
    background: rgba(200,48,44,.12); border-color: #C8302C; color: #ECEDEF;
  }
  .np-keyword-chip {
    background: rgba(200,48,44,.12); border-color: rgba(200,48,44,.5); color: #ECEDEF;
  }
  .np-keyword-chip .x {
    color: #9CA0AB; font-weight: 700; cursor: pointer; padding: 0 2px;
    font-size: 14px; line-height: 1;
  }
  .np-keyword-chip .x:hover { color: #C8302C; }

  /* ===========================================================
     NOTIFICATIONS — bell + dropdown
     =========================================================== */
  #notif-panel {
    position: fixed;
    top: 60px;
    right: 12px;
    width: min(420px, calc(100vw - 24px));
    max-height: min(600px, calc(100vh - 80px));
    background: #16181D; border: 1px solid #2A2D34;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
    z-index: 55; display: none; flex-direction: column;
    overflow: hidden;
  }
  #notif-panel.open { display: flex; }
  #notif-panel .head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #2A2D34;
  }
  #notif-panel .head .title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px; font-weight: 700; color: #ECEDEF; letter-spacing: -.01em;
  }
  #notif-panel .head .actions { display: flex; align-items: center; gap: 8px; }
  #notif-panel .head .icon-btn {
    background: transparent; border: 1px solid #2A2D34; color: #9CA0AB;
    padding: 5px 9px; border-radius: 4px; font-size: 11px;
    cursor: pointer; text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  #notif-panel .head .icon-btn:hover { color: #ECEDEF; border-color: #C8302C; }
  #notif-panel .list { overflow-y: auto; flex: 1; min-height: 0; }
  .notif-row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; border-bottom: 1px solid rgba(42,45,52,.6);
    cursor: pointer; text-decoration: none; color: inherit; position: relative;
    transition: background .12s ease;
  }
  /* Bell shake when a new notification arrives — paired with the typewriter ding. */
  @keyframes bell-pulse {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(-12deg) scale(1.08); }
    40%  { transform: rotate(10deg) scale(1.08); }
    60%  { transform: rotate(-6deg); }
    80%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
  }
  #bell-btn.notif-pulse svg { animation: bell-pulse .65s ease; transform-origin: 50% 30%; }
  .notif-row:hover { background: rgba(200,48,44,.04); }
  .notif-row.unread::before {
    content: ""; position: absolute; left: 6px; top: 18px;
    width: 6px; height: 6px; border-radius: 50%; background: #C8302C;
  }
  .notif-row .avatar {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #C8302C, #E8443E);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 13px;
  }
  .notif-row .body { flex: 1; min-width: 0; }
  .notif-row .body .row-title {
    font-size: 13.5px; font-weight: 600; color: #ECEDEF; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .notif-row .body .row-text {
    font-size: 12.5px; color: rgba(236,237,239,.72); line-height: 1.45; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .notif-row .when {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px; color: #9CA0AB; margin-top: 6px;
    text-transform: uppercase; letter-spacing: .14em;
  }
  #notif-panel .empty {
    padding: 36px 24px; text-align: center; color: #9CA0AB;
    font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; line-height: 1.55;
  }
  #notif-panel .foot {
    padding: 12px 14px; border-top: 1px solid #2A2D34;
    display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  }
  #notif-panel .foot a,
  #notif-panel .foot button.notif-push-cta {
    font-size: 13px; color: #C8302C; font-weight: 650;
    text-decoration: none; cursor: pointer;
    background: rgba(200,48,44,.10); border: 1px solid rgba(200,48,44,.45);
    border-radius: 6px; padding: 10px 12px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; width: 100%;
  }
  #notif-panel .foot a:hover,
  #notif-panel .foot button.notif-push-cta:hover {
    background: rgba(200,48,44,.16); border-color: #C8302C;
  }
  #notif-panel .foot button.notif-push-cta.is-on {
    color: #4D9A6A; border-color: rgba(77,154,106,.5);
    background: rgba(77,154,106,.10);
  }
  #notif-panel .foot .notif-status {
    font-size: 11.5px; color: #9CA0AB; text-align: center; line-height: 1.4;
  }
  #notif-panel .foot .notif-status strong { color: #ECEDEF; font-weight: 600; }
  #bell-btn {
    position: relative;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
  }
  #bell-badge:not(.hidden) {
    display: inline-block !important;
  }
  /* Mobile: panel full-bleed sheet under header */
  @media (max-width: 640px) {
    #notif-panel {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-height: min(78vh, 640px);
      border-radius: 16px 16px 0 0;
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
  }

  /* ===========================================================
     INSTALL-APP affordance — pulsing red dot draws the eye
     =========================================================== */
  @keyframes install-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200,48,44,.7); }
    70%  { box-shadow: 0 0 0 8px rgba(200,48,44,0);  }
    100% { box-shadow: 0 0 0 0 rgba(200,48,44,0);    }
  }

  /* Install sheet — overlay shown when user taps "Install app". Editorial.
     The notification-prefs sheet reuses this. The sheet is scroll-aware
     so on small viewports the long prefs form doesn't overflow off-screen. */
  .install-sheet-back {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
    /* Centered. The sheet's own max-height + internal flex scroll handles
       tall variants; we deliberately DON'T let the overlay scroll, because
       allowing overlay-scroll lets the sheet's max-height resolve against
       content-height instead of viewport-height (and the action bar
       drifts off-screen). The overlay clips; the sheet contains itself. */
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .install-sheet {
    background: #16181D; border: 1px solid #2A2D34;
    border-radius: 6px; max-width: 460px; width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
    padding: 28px; position: relative;
    /* Cap height so the action bar stays visible. vh fallback for older
       Safari, dvh for modern browsers (handles iOS bottom bar correctly). */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    /* min-height: 0 makes the inner flex child's overflow-y: auto actually
       work — without it the child grows past the parent. */
    min-height: 0;
  }
  /* When the sheet has a sticky-action-bar variant, the body scrolls and
     the footer pins to the bottom. The .sheet-body wrapper is what scrolls.
     We use a hard height (not max-height) so the flex layout knows where
     the boundary is, which is what makes the inner overflow-y:auto fire. */
  .install-sheet.has-action-bar {
    padding: 0;
    /* Hard height so flex children compute against a known total. The
       max-height above already prevents this from exceeding the viewport. */
    height: auto;
  }
  .install-sheet.has-action-bar .sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 28px 18px;
    -webkit-overflow-scrolling: touch;
    /* Critical: min-height: 0 lets this flex child shrink below its
       intrinsic content height and trigger the scroll. */
    min-height: 0;
  }
  .install-sheet.has-action-bar .sheet-action-bar {
    flex: 0 0 auto;
    padding: 14px 22px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0));
    background: #16181D;
    border-top: 1px solid #2A2D34;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 -8px 16px -4px rgba(0,0,0,.4);
  }
  .install-sheet.has-action-bar .install-cta { margin-top: 0; }
  /* Close button: pinned absolute to the top-right of the sheet so it's
     always tappable regardless of scroll position inside the body. */
  .install-sheet.has-action-bar .close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: rgba(22,24,29,.92);
    backdrop-filter: blur(4px);
  }
  /* On phones, expand the sheet to nearly full viewport so there's
     room for content. The bottom action bar stays pinned. */
  @media (max-width: 640px) {
    .install-sheet {
      max-width: 100%;
      padding: 22px;
      max-height: calc(100vh - 16px);
      max-height: calc(100dvh - 16px);
    }
    .install-sheet.has-action-bar { padding: 0; }
    .install-sheet.has-action-bar .sheet-body { padding: 22px 18px 14px; }
    .install-sheet.has-action-bar .sheet-action-bar {
      padding: 12px 14px;
      padding-bottom: max(14px, env(safe-area-inset-bottom, 0));
    }
    .install-sheet h2 { font-size: 26px; }
  }
  .install-sheet .red-rule {
    display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
    color: #C8302C; border-top: 2px solid #C8302C; border-bottom: 1px solid #2A2D34;
    padding: 6px 0; margin-bottom: 14px;
  }
  .install-sheet h2 {
    font-family: "Cormorant Garamond", "Charter", "Georgia", serif;
    font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
    color: #ECEDEF; margin: 0 0 6px;
  }
  .install-sheet h2 em { color: #C8302C; font-style: italic; font-weight: 700; }
  .install-sheet .subtitle {
    color: rgba(236,237,239,.78); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px;
  }
  .install-sheet .step {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid #2A2D34;
  }
  .install-sheet .step:last-of-type { border-bottom: 0; }
  .install-sheet .step .num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #C8302C; color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  .install-sheet .step .body { flex: 1; min-width: 0; color: #ECEDEF; font-size: 14.5px; line-height: 1.55; }
  .install-sheet .step .body kbd {
    display: inline-block; background: #0E0F12; border: 1px solid #2A2D34;
    color: #ECEDEF; padding: 1px 6px; border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12.5px;
  }
  .install-sheet .install-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 22px; background: #C8302C; color: #fff;
    border: 1px solid rgba(255,255,255,.08); border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(0,0,0,.4);
    font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 18px;
    text-decoration: none;
  }
  .install-sheet .install-cta:hover { background: #B22A26; }
  .install-sheet .skip-link {
    display: block; text-align: center; margin-top: 14px;
    color: #9CA0AB; font-size: 12.5px; cursor: pointer; text-decoration: none;
  }
  .install-sheet .skip-link:hover { color: #ECEDEF; }
  .install-sheet .close {
    position: absolute; top: 14px; right: 14px;
    width: 28px; height: 28px; border-radius: 4px;
    background: transparent; border: 1px solid #2A2D34;
    color: #9CA0AB; font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .install-sheet .close:hover { background: #0E0F12; color: #ECEDEF; }

  /* ===========================================================
     TOP LOADING BAR + SKELETONS — mobile feedback
     =========================================================== */
  #top-progress {
    position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 60;
    background: transparent; pointer-events: none;
    transform: translateY(-3px); opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
  }
  #top-progress.on { opacity: 1; transform: translateY(0); }
  #top-progress::before {
    content: ""; display: block; width: 30%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, #C8302C 50%, transparent 100%);
    animation: tp-slide 1.1s linear infinite;
  }
  @keyframes tp-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
  }
  /* Updated-ago chip */
  .updated-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    background: rgba(200, 48, 44, .08); color: #C8302C;
    border: 1px solid rgba(200, 48, 44, .25);
  }
  .updated-pill .dot {
    width: 6px; height: 6px; border-radius: 50%; background: #C8302C;
    animation: pulse-dot 2s ease-in-out infinite;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: .5; transform: scale(.85); }
    50%      { opacity: 1;  transform: scale(1.15); }
  }
  /* Skeleton chips for editorial sections (frontpage / trending / most-discussed) */
  .skeleton-card {
    background: #16181D; border: 1px solid #2A2D34; border-radius: 4px;
    padding: 18px 20px; min-height: 160px; position: relative; overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 1px 3px rgba(0,0,0,.35);
  }
  .skeleton-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(236,237,239,.04) 50%, transparent 100%);
    animation: tp-slide 1.6s linear infinite;
  }
  .skeleton-bar {
    height: 14px; border-radius: 3px; background: rgba(236,237,239,.06); margin-bottom: 8px;
  }
  .skeleton-bar.short { width: 40%; height: 10px; }

  /* Pulse chatter row: text caps at 3 lines, inline GIFs render compactly. */
  .pulse-chatter-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .pulse-chatter-body img.gif { max-height: 84px; max-width: 100%; border-radius: 4px; vertical-align: middle; display: inline-block; margin: 4px 4px 4px 0; }
  /* When a chatter body contains an image, drop the line clamp so the GIF can show. */
  .pulse-chatter-body:has(img.gif) { display: block; -webkit-line-clamp: none; }
  /* Text-only card variant (no image) — bigger title, no aspect-ratio block */
  .ed-card.text-only .thumb-wrap-outer,
  .ed-card.text-only .thumb-wrap { display: none !important; }
  .ed-card.text-only.standard .ed-title { font-size: 19px; line-height: 1.3; }
  .ed-card.text-only.feature  .ed-title { font-size: 24px; line-height: 1.25; }
  .ed-card.text-only.hero     { display: block !important; }
  .ed-card.text-only.hero > div:first-child { display: none !important; }
  /* Restrained hero size for text-only items; the giant 38px title felt like a
     forum rant taking over the front page. */
  .ed-card.text-only.hero .ed-title { font-size: 24px; line-height: 1.2; max-width: 820px; }
  .ed-card.text-only.hero .ed-excerpt { max-width: 820px; -webkit-line-clamp: 2; }
  /* When a card is text-only, drop its empty top-margin from .mt-4 */
  .ed-card.text-only > .mt-4,
  .ed-card.text-only div.mt-4 { margin-top: 0 !important; }

  /* Image loading state — clean, never letter fallbacks */
  .thumb { background: #16181D; position: relative; overflow: hidden; }
  .thumb img { transition: opacity .35s ease; }
  .thumb img.loading { opacity: 0; }
  .thumb img.loaded  { opacity: 1; }
  .thumb.no-image { background: linear-gradient(180deg, rgba(200,48,44,.04), rgba(200,48,44,.03)); }

  /* Editorial typography */
  .ed-source { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #C8302C; }
  .ed-title  { font-weight: 600; letter-spacing: -0.011em; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .standard .ed-title { -webkit-line-clamp: 3; }
  .ed-excerpt {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    /* Generous line-height + letter spacing so 3 lines of body copy don't
       feel like a wall of text. The previous 1.55 ran the lines too close
       on narrow cards; 1.7 gives the eye room between lines. */
    line-height: 1.7;
    letter-spacing: 0.005em;
    /* Subtle paragraph indent so excerpts visually separate from the title
       above. Vertical breathing room set by the surrounding `mt-2/mt-3`
       Tailwind classes already on the <p>. */
    padding-top: 2px;
  }
  .hero .ed-title    { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
  .feature .ed-title { font-size: 22px; }
  .standard .ed-title{ font-size: 17px; }
  /* Cap excerpt at 2 lines on the densest card variants so the layout
     stays scannable; hero cards keep 3 lines because they have the room. */
  .standard .ed-excerpt, .front-feature .ed-excerpt { -webkit-line-clamp: 2; }
  .ed-excerpt-base { color: rgba(248,250,252,.78); line-height: 1.7; letter-spacing: 0.005em; }
  .ed-excerpt { color: rgba(248,250,252,.78); }
  .ed-meta { color: rgba(154,160,171,.85); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  /* ─── Markets ticker cards ─────────────────────────────────────────
     Compact, monospace, always-on. Green for up / red for down — on
     update we briefly flash the price color so the eye catches the move. */
  .mk-ticker {
    background: #16181D;
    border: 1px solid #2A2D34;
    border-radius: 6px;
    padding: 12px 14px;
    transition: border-color .12s ease, transform .12s ease;
    cursor: pointer;
  }
  .mk-ticker:hover { border-color: #C8302C; transform: translateY(-1px); }
  .mk-ticker .mk-symbol { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .12em; color: #9CA0AB; text-transform: uppercase; }
  .mk-ticker .mk-name { font-size: 11px; color: #6c7079; line-height: 1.3; margin-top: 1px; height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-ticker .mk-price { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 18px; color: #ECEDEF; margin-top: 8px; line-height: 1.1; transition: color .35s ease; }
  .mk-ticker .mk-change { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; margin-top: 3px; line-height: 1.2; font-weight: 600; }
  .mk-ticker.mk-up .mk-change, .mk-ticker .mk-change.mk-up { color: #4ADE80; }
  .mk-ticker.mk-down .mk-change, .mk-ticker .mk-change.mk-down { color: #F87171; }
  .mk-ticker.mk-flash-up .mk-price { color: #4ADE80; }
  .mk-ticker.mk-flash-down .mk-price { color: #F87171; }
  .mk-ticker.mk-skel .mk-price { background: linear-gradient(90deg, #1A1B22 25%, #2A2D34 50%, #1A1B22 75%); background-size: 200% 100%; animation: mk-skel-anim 1.6s linear infinite; color: transparent; border-radius: 3px; }
  /* Unavailable state — quote couldn't resolve on any upstream. Card
     never gets stuck on a shimmering skeleton; it flips to a calm "—"
     so the rest of the dashboard isn't visually broken by one bad symbol. */
  .mk-ticker.mk-unavail { opacity: .55; }
  .mk-ticker.mk-unavail .mk-price { color: #6c7079; font-weight: 500; }
  .mk-ticker.mk-unavail .mk-change { color: #6c7079; font-weight: 400; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
  /* Card is showing an ETF tracking proxy (real index/futures upstream
     was throttled) — subtle amber accent on the name so users see this
     is a tracking proxy, not the actual underlying price. */
  .mk-ticker.mk-proxy { border-left: 2px solid #C9A45C; }
  .mk-ticker.mk-proxy .mk-name { color: #C9A45C; font-weight: 500; }
  @keyframes mk-skel-anim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  /* Section header → SEO landing link. Subtle hover so the affordance
     reads without competing with the kicker. */
  a.mk-head-link, a.wx-head-link { text-decoration: none; color: inherit; transition: color .12s ease; }
  a.mk-head-link:hover .ed-section-kicker, a.wx-head-link:hover .ed-section-kicker { color: #C8302C; }
  a.mk-head-link:hover::after, a.wx-head-link:hover::after { content: " →"; color: #C8302C; font-size: 11px; font-family: ui-monospace, monospace; }
  /* Stocks tab pills */
  .stock-tab { background: #16181D; border: 1px solid #2A2D34; color: #9CA0AB; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
  .stock-tab.active { background: #C8302C; color: #fff; border-color: #C8302C; }
  .stock-tab:hover { color: #ECEDEF; border-color: #C8302C; }

  /* Hashtag chips on feed cards. Tap a chip → /tag/<slug> for everything
     else tagged the same way. Subtle styling so they don't compete with
     the title; red accent on hover so the affordance is obvious. */
  .tag-chip {
    display: inline-block;
    padding: 3px 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .03em;
    color: #9CA0AB;
    background: rgba(200,48,44,.05);
    border: 1px solid #2A2D34;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.4;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
  }
  .tag-chip:hover {
    color: #ECEDEF;
    border-color: #C8302C;
    background: rgba(200,48,44,.12);
  }
  /* View-count badge — eye icon + count, slotted into card meta lines.
     The icon is a tiny SVG inline; number animates in once hydrated. */
  .ed-views { display: inline-flex; align-items: center; gap: 4px; color: rgba(154,160,171,.85); }
  .ed-views-icn { width: 12px; height: 12px; flex-shrink: 0; opacity: .85; }
  .ed-views-num { min-width: 1ch; font-variant-numeric: tabular-nums; transition: color .2s ease; }
  .ed-views[data-hydrated] .ed-views-num { color: rgba(236,237,239,.9); }
  .ed-views[data-hydrated="hot"] .ed-views-num { color: #E8443E; }
  .ed-views[data-hydrated="hot"] .ed-views-icn { color: #E8443E; opacity: 1; }
  .ed-card { display: block; }
  .ed-card .ed-title { transition: color .15s ease; }
  .ed-card:hover .ed-title { color: #C8302C; }
  .hero { display: grid; gap: 28px; }
  @media (min-width: 768px) { .hero { grid-template-columns: 7fr 5fr; align-items: center; } }
  .hero .thumb-wrap { aspect-ratio: 16 / 9; max-height: 380px; }
  .feature .thumb-wrap, .standard .thumb-wrap { aspect-ratio: 16 / 9; }
  .thumb-wrap { width: 100%; border-radius: 6px; overflow: hidden; }

  /* Tabs (legacy desktop pill — hidden, sidebar takes over) */
  .tab { padding:.55rem 1rem; border-radius:4px; color:#9CA0AB; font-weight:500; cursor:pointer; }
  .tab:hover { color:#ECEDEF; background:rgba(200,48,44,.06); }
  .tab.active { color:#ECEDEF; background: rgba(200,48,44,.10); border:1px solid rgba(200,48,44,.5); }

  /* ============================================================
     SIDEBAR NAV (lg+) — tactile editorial rail with red active bar
     ============================================================ */
  .side-tab {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    padding: 11px 20px;
    color: #9CA0AB;
    font-size: 14.5px; font-weight: 500;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-left-color .12s ease;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    line-height: 1.2;
  }
  .side-tab:hover { color: #ECEDEF; background: rgba(200,48,44,.04); }
  .side-tab.active {
    color: #ECEDEF;
    background: linear-gradient(90deg, rgba(200,48,44,.10) 0%, rgba(200,48,44,0) 70%);
    border-left-color: #C8302C;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  }
  .side-icon { font-size: 17px; line-height: 1; width: 22px; text-align: center; flex-shrink: 0; }

  /* Push main shell right of the sidebar at 960px+ */
  @media (min-width: 960px) {
    body { padding-left: 200px; }
    #toast { right: 1rem; }
    #tour-back, #tour-spotlight, #tour-panel { padding-left: 0; }
    #side-nav { display: flex !important; width: 200px; }
  }
  @media (max-width: 959px) {
    #side-nav { display: none !important; }
  }
  @media (min-width: 960px) {
    .mobile-tab-nav { display: none !important; }
    /* IMPORTANT: bottom nav must NEVER show alongside the desktop side
       rail. The `display:flex` on .mobile-bottom-nav below applies at all
       widths by default; this !important rule guarantees it disappears
       on screens >= 960px even if some inline / specificity weirdness
       tries to put it back. */
    .mobile-bottom-nav { display: none !important; }
  }
  /* ─── Mobile bottom nav ─────────────────────────────────────────────
     Fixed bar at the bottom of the viewport on phones. Replaces the
     dropdown <select> at the top — taps are bigger, the most-used
     destinations are visible at all times, and the icon row stays
     thumb-friendly. iOS safe-area inset accounted for via env(). */
  .mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: stretch; justify-content: space-around;
    background: rgba(14, 15, 18, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #2A2D34;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0)) 4px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.45);
  }
  .mobile-bottom-nav button, .mobile-bottom-nav a {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px;
    background: transparent; border: 0;
    color: #9CA0AB; text-decoration: none;
    font-family: 'Inter Tight', system-ui, sans-serif; font-size: 10px; font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color .14s ease;
    border-radius: 6px;
  }
  .mobile-bottom-nav button .icn, .mobile-bottom-nav a .icn {
    width: 22px; height: 22px;
    color: currentColor;
  }
  .mobile-bottom-nav button.active, .mobile-bottom-nav a.active { color: #ECEDEF; }
  .mobile-bottom-nav button.active::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: #C8302C; border-radius: 1px; }
  .mobile-bottom-nav button { position: relative; }
  /* Bottom-nav overflow sheet items — uniform pill buttons with icon+label
     so the sheet feels like a single grid of taps. */
  .bns-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #16181D; border: 1px solid #2A2D34; border-radius: 6px;
    color: #ECEDEF; text-decoration: none;
    font-family: 'Inter Tight', system-ui, sans-serif; font-size: 14px; font-weight: 500;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color .14s ease, background .14s ease;
    text-align: left;
  }
  .bns-item:hover, .bns-item:active { border-color: #C8302C; background: #1A1B22; }
  .bns-item .icn { width: 18px; height: 18px; color: #9CA0AB; flex-shrink: 0; }
  .bns-item span { flex: 1; min-width: 0; }
  /* Sheet visible-state class — toggled by JS, slides the card up. */
  /* Sheet card defaults — kept here (not as inline style) so the
     `.is-open` rule below can override transform without the inline
     style winning specificity. The previous inline `translateY(100%)`
     beat the open-state rule and the menu never slid up on mobile. */
  #bottom-nav-sheet .bns-card {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #0E0F12; border-top: 1px solid #2A2D34; border-radius: 14px 14px 0 0;
    padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0));
    max-height: 80vh; overflow-y: auto;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
  }
  #bottom-nav-sheet.is-open { display: block !important; }
  #bottom-nav-sheet.is-open .bns-card { transform: translateY(0) !important; }
  /* Push body content above the bottom nav so cards aren't hidden. */
  @media (max-width: 959px) {
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
    /* Hide the old <select>-based mobile-tab-nav — replaced by the
       bottom bar. Keeps the markup around for now in case a fallback
       is needed but no display footprint. */
    .mobile-tab-nav { display: none !important; }
  }

  /* Hot badge — appears when a card crosses the reaction threshold */
  .hot-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 9px; border-radius: 9999px; font-size: 11px; font-weight: 700;
    color: #E8544F;
    background: linear-gradient(90deg, rgba(200,48,44,.18), rgba(251,191,36,.12));
    border: 1px solid rgba(200,48,44,.4);
    animation: hot-glow 2s ease-in-out infinite;
    margin-right: 4px;
  }
  @keyframes hot-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,48,44,.0); }
    50% { box-shadow: 0 0 12px 0 rgba(200,48,44,.35); }
  }

  /* Reaction strip — rose for social heat */
  .react-strip { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .react-btn {
    display:inline-flex; align-items:center; gap:3px;
    padding: 3px 9px; border-radius: 9999px;
    background: rgba(154,160,171,.05); border: 1px solid rgba(154,160,171,.10);
    color: #868DA2; font-size: 12px; line-height: 1; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .react-btn:hover { background: rgba(200,48,44,.08); border-color: rgba(200,48,44,.3); color: #ECEDEF; }
  .react-btn.mine { background: rgba(200,48,44,.18); border-color: rgba(200,48,44,.6); color: #E8544F; }
  .react-btn .count { font-size: 11px; opacity: 0.85; }
  .react-btn .count:empty { display: none; }
  .ed-card .react-strip, .ed-card .discuss-btn { pointer-events: auto; }
  .discuss-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding: 3px 9px; border-radius: 9999px;
    background: rgba(154,160,171,.06); border: 1px solid rgba(154,160,171,.12);
    color: #9AA3BD; font-size: 12px; line-height: 1; cursor: pointer;
  }
  .discuss-btn:hover { color: #ECEDEF; border-color: rgba(200,48,44,.4); background: rgba(200,48,44,.08); }
  .discuss-btn .share-count { font-family: ui-monospace, monospace; font-size: 10.5px; opacity: 0.85; margin-left: 4px; }
  .discuss-btn .share-count:empty { display: none; }

  /* Bookmark button — same chip family as react/discuss but with a saved-state. */
  .bookmark-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding: 3px 9px; border-radius: 9999px;
    background: rgba(154,160,171,.06); border: 1px solid rgba(154,160,171,.12);
    color: #9CA0AB; font-size: 12px; line-height: 1; cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
  }
  .bookmark-btn:hover { color: #C8302C; border-color: rgba(200,48,44,.4); background: rgba(200,48,44,.08); }
  .bookmark-btn.saved { color: #C8302C; border-color: rgba(200,48,44,.5); background: rgba(200,48,44,.12); font-weight: 600; }
  .bookmark-btn.saved .bookmark-icon::after { content: "✓"; margin-left: 2px; font-size: 10px; }

  /* Comment drawer */
  .drawer { position: fixed; inset: 0; z-index: 50; display: none; }
  .drawer.open { display: block; }
  .drawer-back { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
  .drawer-panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 100%; max-width: 32rem;
    background: #16181D; border-left: 1px solid #2A2D34;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  /* Editorial social-media style comments */
  .comment { padding: 14px 18px; border-bottom: 1px solid rgba(42,45,52,.6); display: grid; grid-template-columns: 36px 1fr; gap: 12px; }
  .comment.reply { padding-left: 32px; border-left: 2px solid rgba(200,48,44,.25); margin-left: 18px; background: rgba(200,48,44,.02); }
  .comment.reply.depth-2 { padding-left: 44px; margin-left: 36px; }
  .comment.reply.depth-3 { padding-left: 56px; margin-left: 54px; }
  .comment .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #0E0F12;
    letter-spacing: .02em; flex-shrink: 0;
  }
  .comment .body-col { min-width: 0; }
  .comment .header-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
  .comment .handle {
    font-size: 13px; letter-spacing: 0; text-transform: none;
    color: #ECEDEF; font-weight: 600; cursor: pointer;
    background: none; border: none; padding: 0; font-family: inherit;
  }
  .comment .handle .you-tag {
    font-size: 10px; padding: 1px 5px; border-radius: 4px;
    background: rgba(200,48,44,.15); color: #C8302C;
    margin-left: 6px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  }
  .comment .handle:hover { color: #E8544F; }
  .comment .when { font-size: 12px; color: #9CA0AB; font-family: ui-monospace; }
  .comment .body { color: #ECEDEF; line-height: 1.55; margin-top: 4px; font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }
  .comment .actions-row { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
  .comment .reply-link, .comment .delete-link, .comment .like-link {
    font-size: 12px; color: rgba(154,160,171,.75); cursor: pointer;
    background: rgba(154,160,171,.06); border: 1px solid transparent;
    padding: 4px 9px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background .12s, color .12s, border-color .12s;
  }
  .comment .reply-link:hover { color: #E8544F; background: rgba(200,48,44,.1); border-color: rgba(200,48,44,.25); }
  .comment .delete-link:hover { color: #E8544F; background: rgba(200,48,44,.1); border-color: rgba(200,48,44,.25); }
  .comment .like-link:hover { color: #E8544F; background: rgba(200,48,44,.1); border-color: rgba(200,48,44,.25); }
  .comment .like-link.mine { color: #E8544F; background: rgba(200,48,44,.18); border-color: rgba(200,48,44,.45); font-weight: 600; }
  .comment .like-link .like-count { font-family: ui-monospace; font-size: 11px; }
  .sort-btn { color: rgba(154,160,171,.7); padding: 4px 8px; border-radius: 6px; background: none; border: none; cursor: pointer; font-size: 12px; }
  .sort-btn:hover { color: #ECEDEF; background: rgba(154,160,171,.08); }
  .sort-btn.active { color: #E8544F; background: rgba(200,48,44,.14); font-weight: 600; }
  .comment .replying-to { font-size: 11px; color: rgba(154,160,171,.6); margin-top: 2px; font-family: ui-monospace; }

  /* Reply context pill above the comment input */
  .reply-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; margin: 0 12px;
    background: rgba(200,48,44,.1); border: 1px solid rgba(200,48,44,.3);
    border-radius: 8px 8px 0 0; border-bottom: none;
    font-size: 12px; color: #C8302C;
  }
  .reply-pill button { color: rgba(154,160,171,.7); background: none; border: none; cursor: pointer; font-size: 11px; padding: 2px 6px; }
  .reply-pill button:hover { color: #ECEDEF; }
  .comment .body img.gif { max-width: 240px; max-height: 200px; border-radius: 8px; display: block; margin-top: 8px; border: 1px solid rgba(154,160,171,.15); background: #0E0F12; }

  /* Share tiles */
  .share-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 6px; border-radius: 10px;
    background: rgba(154,160,171,.05); border: 1px solid rgba(154,160,171,.1);
    color: #ECEDEF; cursor: pointer; transition: transform .15s, border-color .15s, background .15s;
    text-decoration: none; font-size: 12px;
  }
  .share-tile:hover { transform: translateY(-2px); border-color: rgba(200,48,44,.4); background: rgba(200,48,44,.08); }
  .share-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px; color: #fff;
  }

  /* GIF picker */
  .gif-panel { display:none; padding: 10px; border-bottom: 1px solid #2A2D34; background: #0E0F12; }
  .gif-panel.open { display: block; }
  .gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 240px; overflow-y: auto; }
  .gif-thumb { cursor: pointer; border-radius: 6px; overflow: hidden; aspect-ratio: 1 / 1; background: rgba(154,160,171,.05); border: 1px solid transparent; }
  .gif-thumb:hover { border-color: rgba(200,48,44,.5); }
  .gif-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Onboarding tour — softer backdrop so the user can still SEE the page */
  .tour-back { position: fixed; inset:0; z-index: 60; background: rgba(11,18,32,.55); display:none; }
  .tour-back.open { display: block; }
  .tour-panel { position: fixed; z-index: 62;
    background: #16181D; border: 1px solid rgba(200,48,44,.4);
    box-shadow: 0 24px 60px -10px rgba(200,48,44,.25), 0 12px 28px -8px rgba(0,0,0,.6);
    border-radius: 14px; padding: 24px;
    width: calc(100% - 32px); max-width: 460px;
    /* Default position when no target — centered */
    left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .tour-panel.has-target { transform: none; transition: top .25s ease, left .25s ease; }
  .tour-panel h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
  .tour-panel p { color: rgba(248,250,252,.85); line-height: 1.55; }
  .tour-step-dots { display:flex; gap:6px; justify-content:center; margin-top: 18px; }
  .tour-dot { width:6px; height:6px; border-radius: 9999px; background: rgba(154,160,171,.3); transition: background .2s, width .2s; }
  .tour-dot.active { background: #C8302C; width: 22px; }

  /* Spotlight: keep the target highlighted but DON'T black out the rest of the screen */
  .tour-spotlight {
    position: fixed; z-index: 61; pointer-events: none;
    border-radius: 14px;
    /* Bright multi-layer glow — visually unmistakable without dimming context */
    box-shadow:
      0 0 0 4px rgba(200,48,44,.85),
      0 0 0 8px rgba(200,48,44,.35),
      0 0 28px 10px rgba(200,48,44,.45),
      0 0 0 9999px rgba(11,18,32,.35);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
    display: none;
    animation: tour-pulse 2.4s ease-in-out infinite;
  }
  .tour-spotlight.open { display: block; }
  @keyframes tour-pulse {
    0%, 100% { box-shadow:
      0 0 0 4px rgba(200,48,44,.85),
      0 0 0 8px rgba(200,48,44,.35),
      0 0 28px 10px rgba(200,48,44,.45),
      0 0 0 9999px rgba(11,18,32,.35); }
    50% { box-shadow:
      0 0 0 4px rgba(200,48,44,1),
      0 0 0 12px rgba(200,48,44,.45),
      0 0 40px 14px rgba(200,48,44,.55),
      0 0 0 9999px rgba(11,18,32,.35); }
  }

  /* Chat */
  .bubble { max-width: 90%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; font-size: 14px; }
  .bubble.user { background: #C8302C; color: #0E0F12; border-bottom-right-radius: 4px; align-self: flex-end; }
  .bubble.assistant { background: #2A2D34; color: #ECEDEF; border-bottom-left-radius: 4px; align-self: flex-start; }
  .bubble pre { white-space: pre-wrap; word-wrap: break-word; }

  /* Markets */
  .ticker-card { background: linear-gradient(180deg, rgba(15,23,42,1), rgba(11,18,32,1)); }

  details > summary { cursor: pointer; list-style: none; }
  details > summary::-webkit-details-marker { display: none; }

  /* ====================================================================
     LIGHT MODE — flips ink/cream/panel/border tokens to a white reading
     surface. Targets the most-used color hex literals + the Tailwind
     `bg-panel/bg-ink/text-cream/text-mute/border-line` utilities (which
     resolve to the inline-config colors at the top of <head>). Accent
     red (#C8302C) is preserved on both themes — it reads correctly on
     dark and on light.
     ==================================================================== */
  html[data-theme="light"] { color-scheme: light; }
  html[data-theme="light"], html[data-theme="light"] body {
    background: #FAFAF7 !important;
    color: #1A1B1F !important;
  }
  html[data-theme="light"] [class*="bg-ink"],
  html[data-theme="light"] [style*="background:#0E0F12"],
  html[data-theme="light"] [style*="background: #0E0F12"] {
    background: #FAFAF7 !important;
  }
  html[data-theme="light"] [class*="bg-panel"],
  html[data-theme="light"] [style*="background:#16181D"],
  html[data-theme="light"] [style*="background:#16181E"],
  html[data-theme="light"] [style*="background:#1A1B22"] {
    background: #F2F1ED !important;
  }
  html[data-theme="light"] [class*="border-line"],
  html[data-theme="light"] [style*="border-color:#2A2D34"],
  html[data-theme="light"] [style*="border:1px solid #2A2D34"],
  html[data-theme="light"] [style*="border-bottom: 1px solid #2A2D34"] {
    border-color: #DEDED7 !important;
  }
  html[data-theme="light"] [class*="text-cream"],
  html[data-theme="light"] [style*="color:#ECEDEF"],
  html[data-theme="light"] [style*="color: #ECEDEF"] {
    color: #1A1B1F !important;
  }
  html[data-theme="light"] [class*="text-mute"],
  html[data-theme="light"] [style*="color:#9CA0AB"],
  html[data-theme="light"] [style*="color: #9CA0AB"],
  html[data-theme="light"] [style*="color:#6c7079"] {
    color: #5A5D62 !important;
  }
  html[data-theme="light"] header.site,
  html[data-theme="light"] header.sticky,
  html[data-theme="light"] aside#side-nav,
  html[data-theme="light"] nav.mobile-bottom-nav {
    background: rgba(250,250,247,.94) !important;
    border-color: #DEDED7 !important;
    color: #1A1B1F !important;
  }
  html[data-theme="light"] #search-input {
    background: #FFFFFF !important;
    border-color: #C9C9C2 !important;
    color: #1A1B1F !important;
  }
  html[data-theme="light"] #search-input::placeholder { color: rgba(26,27,31,.55) !important; }
  html[data-theme="light"] #search-suggest {
    background: #FFFFFF !important;
    border-color: #DEDED7 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.04) inset !important;
  }
  html[data-theme="light"] #search-suggest .ss-item { border-bottom-color: rgba(222,222,215,.7) !important; }
  html[data-theme="light"] #search-suggest .ss-title { color: #1A1B1F !important; }
  html[data-theme="light"] #push-toast-host > a {
    background: #FFFFFF !important;
    border-color: #DEDED7 !important;
    color: #1A1B1F !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  }
  /* SSR "Browse by topic / Featured sources" pills are styled by a class rule
     (.ssr-hub-link), so the inline [style*=] catch-all above never lightens
     them — they stayed dark #16181D on the light/journalist homepage. */
  html[data-theme="light"] .ssr-hub-link {
    background: #F2F1ED !important; color: #5A5D62 !important; border-color: #DEDED7 !important;
  }
  html[data-theme="journalist"] .ssr-hub-link {
    background: #ECE4D0 !important; color: #6B5F4B !important; border-color: #C9BFA7 !important;
  }

  /* ====================================================================
     JOURNALIST MODE — sepia newsprint palette. Warmer cream background,
     dark sepia text, brick-red accent. Reads like a printed broadsheet.
     ==================================================================== */
  html[data-theme="journalist"] { color-scheme: light; }
  html[data-theme="journalist"], html[data-theme="journalist"] body {
    background: #F4ECD8 !important;
    color: #2A2218 !important;
    font-family: "Cormorant Garamond", "Charter", "Georgia", serif !important;
  }
  html[data-theme="journalist"] [class*="bg-ink"],
  html[data-theme="journalist"] [style*="background:#0E0F12"],
  html[data-theme="journalist"] [style*="background: #0E0F12"] {
    background: #F4ECD8 !important;
  }
  html[data-theme="journalist"] [class*="bg-panel"],
  html[data-theme="journalist"] [style*="background:#16181D"],
  html[data-theme="journalist"] [style*="background:#16181E"],
  html[data-theme="journalist"] [style*="background:#1A1B22"] {
    background: #ECE4D0 !important;
  }
  html[data-theme="journalist"] [class*="border-line"],
  html[data-theme="journalist"] [style*="border-color:#2A2D34"],
  html[data-theme="journalist"] [style*="border:1px solid #2A2D34"] {
    border-color: #C9BFA7 !important;
  }
  html[data-theme="journalist"] [class*="text-cream"],
  html[data-theme="journalist"] [style*="color:#ECEDEF"],
  html[data-theme="journalist"] [style*="color: #ECEDEF"] {
    color: #2A2218 !important;
  }
  html[data-theme="journalist"] [class*="text-mute"],
  html[data-theme="journalist"] [style*="color:#9CA0AB"] {
    color: #6B5F4B !important;
  }
  html[data-theme="journalist"] [style*="color:#C8302C"] {
    color: #A8261F !important;
  }
  html[data-theme="journalist"] header.sticky,
  html[data-theme="journalist"] aside#side-nav,
  html[data-theme="journalist"] nav.mobile-bottom-nav {
    background: rgba(244,236,216,.94) !important;
    border-color: #C9BFA7 !important;
    color: #2A2218 !important;
  }
  html[data-theme="journalist"] #search-input {
    background: #FAF4E2 !important;
    border-color: #C9BFA7 !important;
    color: #2A2218 !important;
  }
  html[data-theme="journalist"] #search-input::placeholder { color: rgba(42,34,24,.55) !important; }
  html[data-theme="journalist"] #search-suggest {
    background: #FAF4E2 !important;
    border-color: #C9BFA7 !important;
    box-shadow: 0 8px 32px rgba(80,60,30,.18) !important;
  }
  html[data-theme="journalist"] #search-suggest .ss-item { border-bottom-color: rgba(201,191,167,.7) !important; }
  html[data-theme="journalist"] #search-suggest .ss-title { color: #2A2218 !important; font-family: "Cormorant Garamond", serif !important; }
  /* Body text in journalist mode leans into the serif treatment globally
     since the whole register is print-newspaper. */
  html[data-theme="journalist"] p, html[data-theme="journalist"] li, html[data-theme="journalist"] .ss-title { font-family: "Cormorant Garamond", "Charter", "Georgia", serif !important; }
  html[data-theme="journalist"] #push-toast-host > a {
    background: #FAF4E2 !important;
    border-color: #C9BFA7 !important;
    color: #2A2218 !important;
    box-shadow: 0 4px 16px rgba(80,60,30,.16) !important;
  }

/* shell id="thumb-rich" */
/* Never a bare card: branded monogram cover + shimmer while a real image loads. */
.thumb{background:linear-gradient(135deg,#171a23,#141620 60%,#11131b);position:relative;overflow:hidden}
.thumb:has(img.loading)::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,transparent,rgba(154,160,171,.10) 50%,transparent);background-size:600px 100%;animation:shimmer 1.4s linear infinite}
.thumb img{position:relative;z-index:1}
/* Covers stay in the layout so the magazine grid keeps even rhythm. */
.ed-card.text-only .thumb-wrap-outer,.ed-card.text-only .thumb-wrap{display:block!important}
.ed-card.text-only.standard .ed-title{font-size:inherit;line-height:inherit}

/* shell id="readability-p0" */
/* P0 readability corrections — from real first-visit feedback ("tiny light
   grey font on a white background", unreadable in both themes). The secondary
   text colour (mute #9CA0AB) sits at ~2.6:1 on white, a hard WCAG AA fail; the
   light theme never remapped it. Fix the contrast and raise the smallest
   meaningful text. Scoped so it can't touch the dark theme's already-fine
   values. */
:root[data-theme="light"] .text-mute,
:root[data-theme="journalist"] .text-mute { color:#5b616c !important; }        /* ~5.9:1 on white */
:root[data-theme="light"] .text-cream,
:root[data-theme="journalist"] .text-cream { color:#16181d !important; }
:root[data-theme="light"] .ed-title,
:root[data-theme="light"] .ed-excerpt,
:root[data-theme="journalist"] .ed-title,
:root[data-theme="journalist"] .ed-excerpt { color:#1a1c22 !important; }
:root[data-theme="light"] .ed-meta,
:root[data-theme="journalist"] .ed-meta { color:#5b616c !important; }
/* Meaningful metadata must not read as disabled: floor the smallest real text. */
.ed-meta { font-size:12.5px !important; line-height:1.4 !important; }
.ed-source-line { font-size:12px !important; }
/* Give feed excerpts comfortable reading size on desktop. */
@media (min-width:768px){ .ed-excerpt { font-size:15px !important; line-height:1.55 !important; } }
/* View modes (P1) — scoped to the two feed grids so story pages are untouched.
   Text-only strips thumbnails and reclaims the space for headlines + metadata;
   Compact drops the excerpt to tighten the row rhythm. */
body.view-textonly #frontpage-grid .thumb-wrap-outer,
body.view-textonly #frontpage-grid .thumb-wrap,
body.view-textonly #frontpage-grid .thumb,
body.view-textonly #feed-grid .thumb-wrap-outer,
body.view-textonly #feed-grid .thumb-wrap,
body.view-textonly #feed-grid .thumb,
/* Belt-and-braces: some client cards wrap the image differently, so hide every
   story image in the two feed grids (SVG icons aren't <img>, so controls stay). */
body.view-textonly #frontpage-grid img,
body.view-textonly #feed-grid img { display:none !important; }
body.view-textonly #frontpage-grid .ed-card-body,
body.view-textonly #feed-grid .ed-card-body { padding-top:16px !important; }
body.view-compact #frontpage-grid .ed-excerpt,
body.view-compact #feed-grid .ed-excerpt { display:none !important; }
body.view-compact #frontpage-grid .ed-card-body,
body.view-compact #feed-grid .ed-card-body { padding-top:12px !important; padding-bottom:12px !important; }
/* First-session strip — one honest line, non-blocking. */
#first-session{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:9px 14px;border:1px solid #2A2D34;border-left:3px solid #C8302C;border-radius:6px;background:rgba(200,48,44,.05);font-size:13.5px;line-height:1.5}
#first-session b{color:#C8302C;font-weight:700;letter-spacing:.02em}
#first-session span{color:#9CA0AB}
:root[data-theme="light"] #first-session span,:root[data-theme="journalist"] #first-session span{color:#5b616c}
#first-session .fs-x{margin-left:auto;background:none;border:0;color:#9CA0AB;cursor:pointer;font-size:16px;line-height:1;padding:2px 6px}
#first-session .fs-x:hover{color:#C8302C}
/* Keyboard accessibility: a visible focus ring on interactive controls. */
#feed-controls button:focus-visible,#feed-chips button:focus-visible,.pill:focus-visible{outline:2px solid #C8302C;outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}
/* Light + Journalist theme corrections — clashing dark islands and near-white
   headings on light grounds, found in a live audit of both themes. */
:root[data-theme="light"] .ed-section-kicker,
:root[data-theme="journalist"] .ed-section-kicker,
:root[data-theme="light"] .ed-section-kicker h2,
:root[data-theme="journalist"] .ed-section-kicker h2 { color:#1a1c22 !important; }   /* "Front page" was near-white on white */
:root[data-theme="light"] .ed-section-meta,
:root[data-theme="journalist"] .ed-section-meta { color:#6b7078 !important; }
/* Editor's Note was a dark #16181D block on the light/cream page. Give it the
   light surface + dark text so it reads as part of the page, not an island. */
:root[data-theme="light"] #editors-note,
:root[data-theme="journalist"] #editors-note { background:#f3f1ea !important; }
:root[data-theme="light"] #editors-note .ed-note-headline,
:root[data-theme="journalist"] #editors-note .ed-note-headline,
:root[data-theme="light"] #editors-note .ed-note-body,
:root[data-theme="journalist"] #editors-note .ed-note-body { color:#1a1c22 !important; }
:root[data-theme="light"] #editors-note .ed-note-preview,
:root[data-theme="journalist"] #editors-note .ed-note-preview { color:#4a4f57 !important; }
/* No-image thumbnail placeholders were dark islands on the light/journalist page.
   Two cases: (a) the SSR/errored `.no-image` box, and (b) the client-rendered
   branded "W." cover, which carries an INLINE dark gradient and no `.no-image`
   class — so we catch every placeholder generically with :not(:has(img)) (any
   .thumb-wrap.thumb with no <img> child = a placeholder) and give it a warm
   cream gradient that matches the editorial page. Stylesheet !important beats
   the element's inline non-important background. */
:root[data-theme="light"] .thumb,
:root[data-theme="journalist"] .thumb,
:root[data-theme="light"] .thumb.no-image,
:root[data-theme="journalist"] .thumb.no-image,
:root[data-theme="light"] .thumb-wrap.thumb:not(:has(img)),
:root[data-theme="journalist"] .thumb-wrap.thumb:not(:has(img)) {
  background:linear-gradient(135deg,#efe9dd 0%,#e7e1d3 55%,#ded7c6 100%) !important;
}
/* Keep the branded "W." mark legible on the light cover: drop the dark
   text-shadow (built for the dark box) and warm the trailing dot. */
:root[data-theme="light"] .thumb-wrap.thumb:not(:has(img)) > span[aria-hidden],
:root[data-theme="journalist"] .thumb-wrap.thumb:not(:has(img)) > span[aria-hidden] {
  text-shadow:none !important;
}
:root[data-theme="light"] .thumb-wrap.thumb:not(:has(img)) > span[aria-hidden] > span,
:root[data-theme="journalist"] .thumb-wrap.thumb:not(:has(img)) > span[aria-hidden] > span {
  color:#b7ab92 !important;
}
/* Calmer, clearly-separated feed. Stories were blurring together in the dense
   magazine grid ("mixed together / overwhelming"). Give every row more air.
   NOTE: do NOT use document-level scroll-snap on phones — it fights native
   momentum scrolling and feels broken (sticky / stuttery / hard to fling). */
.feed-magazine { gap:28px !important; row-gap:40px !important; }
@media (min-width:768px){
  .feed-magazine { gap:32px !important; row-gap:48px !important; }
}
/* 3-up standard cards feel smashed under ~1200px — use 2-up until wide. */
@media (min-width:768px) and (max-width:1199px){
  .feed-magazine > .standard,
  .feed-magazine > .front-feature { grid-column: span 6 !important; }
  .feed-magazine > .feature { grid-column: span 6 !important; }
}
@media (max-width:760px){
  #feed-grid.feed-magazine { row-gap:0 !important; gap:0 !important; }
  #feed-grid .ed-card {
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:1px solid rgba(140,144,155,.14);
    border-radius:0 !important;
    background:transparent !important;
    border-left:none !important;
    border-right:none !important;
    border-top:none !important;
  }
  #feed-grid .ed-card:last-child { border-bottom:none; }
  /* Real horizontal gutters — 2px was unreadable next to the screen edge */
  #feed-grid .ed-card .ed-card-body { padding:14px 0 22px; }
  #feed-grid .ed-card .thumb-wrap { border-radius:12px; }
}

/* ---- Card surface + no-image covers (2026-07-27) ------------------------
   No more empty dark voids. Missing photos become monogram publisher covers.
   Cards get a real surface + body padding so the grid doesn't feel smashed. */
.ed-card.standard,
.ed-card.feature,
.ed-card.front-feature {
  background: var(--ws-surface, #16181D);
  border: 1px solid var(--ws-line, #2A2D34);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 3px rgba(0,0,0,.28);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ed-card.standard:hover,
.ed-card.feature:hover,
.ed-card.front-feature:hover {
  border-color: rgba(200,48,44,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.28);
}
.ed-card.hero {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.ed-card .ed-card-body {
  padding: 16px 18px 18px;
}
.ed-card.hero .ed-card-body {
  padding: 8px 0 0;
}
.ed-card.standard .thumb-wrap,
.ed-card.feature .thumb-wrap,
.ed-card.front-feature .thumb-wrap {
  border-radius: 0;
  width: 100%;
}
.ed-card.standard .thumb-wrap,
.ed-card.feature .thumb-wrap,
.ed-card.front-feature .thumb-wrap {
  aspect-ratio: 16 / 10;
}
.ed-card.hero .thumb-wrap {
  border-radius: 12px;
  overflow: hidden;
}
/* Designed monogram cover — intentional, not a broken image slot */
.thumb.thumb-cover,
.thumb.no-image,
.thumb-wrap.thumb-cover {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,48,44,.14), transparent 55%),
    linear-gradient(145deg, #1c1f28 0%, #151820 55%, #101218 100%) !important;
  position: relative;
  overflow: hidden;
}
.thumb.thumb-cover::after,
.thumb.no-image::after {
  /* kill the photo vignette on covers so monograms stay crisp */
  opacity: 0 !important;
}
.thumb-cover .tc-mark,
.thumb.no-image .tc-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1;
  color: #C8302C;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.thumb-cover .tc-source,
.thumb.no-image .tc-source {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9CA0AB;
  max-width: 82%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Keep covers visible; never collapse media block for missing photos.
   (Text-only view mode still strips images via body.view-textonly rules.) */
.ed-card.text-only .thumb-wrap-outer,
.ed-card.text-only .thumb-wrap {
  display: block !important;
}
.ed-card.text-only:not(.hero) .thumb-wrap {
  aspect-ratio: 16 / 10;
}
/* Tag chips: less cramped under titles */
.tag-chips { margin-top: 12px !important; gap: 8px !important; }
.tag-chip {
  padding: 4px 9px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
/* Reaction strip breathing room — always in normal flow, never over type */
.ed-card .react-strip,
.ed-card [id^="react-"],
.ed-card .rxn-strip {
  margin-top: 12px !important;
  position: relative !important;
  z-index: 1;
  flex-shrink: 0;
  clear: both;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ed-card > .react-strip {
  /* Sibling of body: clear separation from card copy */
  margin-top: 10px !important;
}
.ed-card-body > .react-strip {
  /* Nested (legacy): stay under excerpt, not painted over it */
  margin-top: 10px !important;
  align-self: stretch;
}
/* Title / excerpt hierarchy inside card body */
.ed-card .ed-title { margin-top: 8px; }
.ed-card .ed-excerpt { margin-top: 10px !important; }
.standard .ed-excerpt { -webkit-line-clamp: 3; }
.feature .ed-excerpt, .front-feature .ed-excerpt { -webkit-line-clamp: 3; }

/* Light / journalist monogram covers */
:root[data-theme="light"] .thumb.thumb-cover,
:root[data-theme="journalist"] .thumb.thumb-cover,
:root[data-theme="light"] .thumb.no-image,
:root[data-theme="journalist"] .thumb.no-image {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,48,44,.08), transparent 55%),
    linear-gradient(145deg, #efe9dd 0%, #e7e1d3 55%, #ded7c6 100%) !important;
}
:root[data-theme="light"] .thumb-cover .tc-source,
:root[data-theme="journalist"] .thumb-cover .tc-source,
:root[data-theme="light"] .thumb.no-image .tc-source,
:root[data-theme="journalist"] .thumb.no-image .tc-source {
  color: #6b5f4b !important;
}
:root[data-theme="light"] .ed-card.standard,
:root[data-theme="light"] .ed-card.feature,
:root[data-theme="light"] .ed-card.front-feature,
:root[data-theme="journalist"] .ed-card.standard,
:root[data-theme="journalist"] .ed-card.feature,
:root[data-theme="journalist"] .ed-card.front-feature {
  background: #faf7f0 !important;
  border-color: #d9d2c3 !important;
  box-shadow: 0 1px 2px rgba(80,60,30,.06);
}

/* ---- Calm density (Reddit: unreadable + overwhelming) --------------------
   One more layer of breathing room + type hierarchy. No layout rewrite; just
   make the reading path feel quieter and easier on the eyes. */
/* Smooth scroll only on fine pointers (desktop). Touch devices get native scroll. */
@media (hover: hover) and (pointer: fine) {
  html { scroll-behavior: smooth; }
}
body { font-size: 16.5px; line-height: 1.62; }
.ed-title {
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.45rem) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.015em;
}
.hero .ed-title { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem) !important; line-height: 1.14 !important; }
.feature .ed-title,
.front-feature .ed-title { font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem) !important; }
.ed-excerpt, .ed-excerpt-base {
  font-size: 15.5px !important;
  line-height: 1.58 !important;
  max-width: 62ch;
}
.ed-meta, .ed-source-line {
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em;
}
/* Quieter first-session strip — one short line, not a banner ad. */
#first-session {
  margin: 0 0 18px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border-radius: 4px !important;
  background: transparent !important;
  border-color: var(--ws-line, #2A2D34) !important;
}
#first-session span { color: var(--ws-muted, #9CA0AB) !important; }
#first-session b { font-weight: 650; }
/* Perspective tools: collapsed by default, single calm summary row. */
.perspective-tools {
  border: 1px solid var(--ws-line, #2A2D34);
  border-radius: 6px;
  background: transparent;
}
.perspective-tools-summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 44px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--ws-text-soft, #c4c6cc);
  font-size: 13px;
  line-height: 1.4;
  user-select: none;
}
.perspective-tools-summary::-webkit-details-marker { display: none; }
.perspective-tools-summary::before {
  content: "▸";
  color: var(--ws-accent, #C8302C);
  font-size: 11px;
  width: 12px;
}
.perspective-tools[open] > .perspective-tools-summary::before { content: "▾"; }
.perspective-tools-label {
  font-weight: 650;
  color: var(--ws-text, #f2f0eb);
  letter-spacing: 0.01em;
}
.perspective-tools-hint {
  color: var(--ws-muted, #9CA0AB);
  font-size: 12px;
}
.perspective-tools-body { padding: 4px 12px 12px; }
.perspective-tools-summary:hover { background: rgba(255,255,255,.02); }
:root[data-theme="light"] .perspective-tools,
:root[data-theme="journalist"] .perspective-tools { border-color: var(--ws-line); }
:root[data-theme="light"] .perspective-tools-summary:hover,
:root[data-theme="journalist"] .perspective-tools-summary:hover { background: rgba(0,0,0,.03); }
/* Soften edition nav — secondary, not a second homepage. */
.edition-nav {
  border-top: 0 !important;
  opacity: 0.92;
}
.edition-nav a { font-size: 13.5px !important; }
/* Fluid card motion without gimmicks. */
.ed-card {
  transition: transform .18s ease, border-color .18s ease, opacity .2s ease !important;
}
#frontpage-grid, #feed-grid {
  transition: opacity .18s ease;
}
/* Light-mode body text: never light-grey on white again. */
:root[data-theme="light"] body,
:root[data-theme="journalist"] body { color: #1a1c22 !important; }
:root[data-theme="light"] .ed-meta,
:root[data-theme="light"] .ed-source-line,
:root[data-theme="light"] .text-mute,
:root[data-theme="journalist"] .ed-meta,
:root[data-theme="journalist"] .ed-source-line,
:root[data-theme="journalist"] .text-mute { color: #4f5560 !important; }
/* Dark-mode secondary text a touch brighter for tired eyes. */
:root:not([data-theme="light"]):not([data-theme="journalist"]) .ed-meta,
:root:not([data-theme="light"]):not([data-theme="journalist"]) .ed-excerpt,
:root:not([data-theme="light"]):not([data-theme="journalist"]) .ed-excerpt-base {
  color: #c8ccd4 !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .ed-card { transition: none !important; }
}

/* ========================================================================
   MOBILE SEAMLESS — phone reading path (≤767px)
   Goal: open app → stories under thumb in one scroll, minimal chrome,
   Apple News–style list rows, sticky filters, calm bottom bar.
   ======================================================================== */
@media (max-width: 767px) {
  :root {
    --ws-header: 56px;
    --ws-mobile-gutter: 14px;
    --ws-bottom-nav: calc(58px + env(safe-area-inset-bottom, 0px));
    --ws-thumb: 100px;
  }

  /* CRITICAL iOS scroll unlock.
     Any non-visible overflow-x on html/body (hidden OR clip) makes WebKit
     recompute overflow-y and can freeze document scrolling entirely on real
     iPhones. overflow-x:clip is also ignored on older Safari, leaving the
     base `overflow-x:hidden` rules active. Force BOTH axes fully open. */
  html, body {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    position: static !important;
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html {
    scroll-padding-top: calc(var(--ws-header) + 8px);
    scroll-padding-bottom: var(--ws-bottom-nav);
  }

  body {
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding-bottom: calc(var(--ws-bottom-nav) + 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Horizontal bleed control WITHOUT locking the document scroller */
  main, #main-content, .pane, .ws-header, header.sticky,
  .frontpage-section, .latest-section, .signal-board, .trust-section,
  .edition-nav, .mobile-bottom-nav {
    max-width: 100vw;
  }
  img, video, iframe, svg, table, pre {
    max-width: 100%;
  }

  /* Header: one clean search strip */
  .ws-header,
  header.sticky {
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
  }
  .ws-header > div:first-child {
    height: var(--ws-header) !important;
    padding-left: var(--ws-mobile-gutter) !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
  #search-input {
    min-height: 40px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
  }

  /* Less promo chrome above the news */
  #home-masthead .masthead-actions { display: none !important; }
  #home-masthead .masthead-sub { display: none !important; }
  #home-masthead .max-w-6xl {
    padding: 18px var(--ws-mobile-gutter) 16px !important;
  }
  html.returning #home-masthead .max-w-6xl {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .masthead-brand { font-size: clamp(2.2rem, 11vw, 3rem) !important; }
  .masthead-deck { font-size: 1.25rem !important; margin-top: 6px !important; }
  .edition-nav {
    border-bottom-width: 1px !important;
    opacity: 1;
  }
  .edition-nav-inner {
    gap: 14px !important;
    padding: 8px var(--ws-mobile-gutter) !important;
  }
  .edition-nav a {
    font-size: 13px !important;
    min-height: 36px;
    padding: 8px 2px;
  }
  .edition-nav .edition-nav-secondary { display: none !important; }
  #editors-note { margin-bottom: 4px; }
  #first-session {
    margin: 0 0 12px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }

  .frontpage-section,
  .latest-section,
  .signal-board,
  .trust-section {
    padding-left: var(--ws-mobile-gutter) !important;
    padding-right: var(--ws-mobile-gutter) !important;
  }
  .frontpage-section { padding-top: 18px !important; }
  .latest-section { padding-top: 22px !important; }
  .ed-section-head {
    margin-bottom: 10px !important;
    gap: 8px !important;
  }
  .ed-section-kicker { font-size: 18px !important; }
  .ed-section-meta { font-size: 12px !important; }

  /* Feed toolbar stays reachable but does NOT sticky-stick during fling —
     sticky + backdrop-filter + scroll-snap was fighting native momentum. */
  .feed-toolbar {
    position: relative;
    z-index: 2;
    margin-left: calc(-1 * var(--ws-mobile-gutter));
    margin-right: calc(-1 * var(--ws-mobile-gutter));
    padding: 6px var(--ws-mobile-gutter) 8px !important;
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--ws-line, #2A2D34) 55%, transparent);
  }
  #feed-chips {
    margin: 0 !important;
    padding-bottom: 6px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  #feed-chips > button,
  #feed-chips > a,
  #feed-controls > button,
  #feed-controls .pill {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    flex: 0 0 auto;
  }
  #feed-controls {
    gap: 8px !important;
    padding-bottom: 2px !important;
  }
  #feed-controls > span {
    display: none !important; /* "Feed" label wastes a row on phones */
  }
  .perspective-tools {
    margin-top: 8px;
    margin-bottom: 4px !important;
  }
  .perspective-tools-summary {
    min-height: 42px;
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .perspective-tools-hint { display: none; } /* short label only on phones */

  /* Hero stays full-bleed; everything else becomes a list row */
  #frontpage-grid .ed-card.hero {
    display: block !important;
    padding-bottom: 18px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--ws-line, #2A2D34) 55%, transparent);
  }
  #frontpage-grid .ed-card.hero .thumb-wrap {
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }
  #frontpage-grid .ed-card.hero .ed-title {
    font-size: 1.45rem !important;
    line-height: 1.18 !important;
  }
  #frontpage-grid .ed-card.hero .ed-excerpt {
    font-size: 14.5px !important;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* List rows: image left, story right; reaction strip full-width under both.
     Markup: .story-media-link | .ed-card-body | .react-strip (sibling).
     Never put the strip in col-2 with the title — that was the overlap bug. */
  #feed-grid .ed-card.standard:not(.text-only),
  #feed-grid .ed-card.front-feature:not(.text-only),
  #feed-grid .ed-card.feature:not(.text-only),
  #frontpage-grid .ed-card.standard:not(.text-only),
  #frontpage-grid .ed-card.front-feature:not(.text-only),
  #frontpage-grid .ed-card.feature:not(.text-only),
  #ssr-frontpage-fallback .ed-card.front-feature:not(.text-only),
  #ssr-frontpage-fallback .ed-card.standard:not(.text-only) {
    display: grid !important;
    grid-template-columns: var(--ws-thumb) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "thumb body"
      "strip strip";
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    padding: 12px 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ws-line, #2A2D34) 50%, transparent);
    /* content-visibility causes scroll jump / blank gaps on iOS while flinging */
    content-visibility: visible !important;
    contain: none !important;
  }
  #feed-grid .ed-card.standard:not(.text-only) > .story-media-link,
  #feed-grid .ed-card.front-feature:not(.text-only) > .story-media-link,
  #feed-grid .ed-card.feature:not(.text-only) > .story-media-link,
  #frontpage-grid .ed-card.standard:not(.text-only) > .story-media-link,
  #frontpage-grid .ed-card.front-feature:not(.text-only) > .story-media-link,
  #frontpage-grid .ed-card.feature:not(.text-only) > .story-media-link,
  #ssr-frontpage-fallback .ed-card.front-feature > .thumb-wrap,
  #ssr-frontpage-fallback .ed-card.standard > .thumb-wrap {
    grid-area: thumb;
    display: block;
    width: var(--ws-thumb);
  }
  /* Body only — do NOT match .react-strip (also a direct child div). */
  #feed-grid .ed-card.standard:not(.text-only) > .ed-card-body,
  #feed-grid .ed-card.front-feature:not(.text-only) > .ed-card-body,
  #feed-grid .ed-card.feature:not(.text-only) > .ed-card-body,
  #frontpage-grid .ed-card.standard:not(.text-only) > .ed-card-body,
  #frontpage-grid .ed-card.front-feature:not(.text-only) > .ed-card-body,
  #frontpage-grid .ed-card.feature:not(.text-only) > .ed-card-body,
  #ssr-frontpage-fallback .ed-card.front-feature > .ed-card-body,
  #ssr-frontpage-fallback .ed-card.standard > .ed-card-body {
    grid-area: body;
    margin-top: 0 !important;
    padding: 0 !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  /* Full-width strip under thumb + text (sibling markup). */
  #feed-grid .ed-card.standard:not(.text-only) > .react-strip,
  #feed-grid .ed-card.front-feature:not(.text-only) > .react-strip,
  #feed-grid .ed-card.feature:not(.text-only) > .react-strip,
  #frontpage-grid .ed-card.standard:not(.text-only) > .react-strip,
  #frontpage-grid .ed-card.front-feature:not(.text-only) > .react-strip,
  #frontpage-grid .ed-card.feature:not(.text-only) > .react-strip {
    grid-area: strip;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  /* Nested strip (legacy markup): keep it in normal flow under body text. */
  #feed-grid .ed-card .ed-card-body > .react-strip,
  #frontpage-grid .ed-card .ed-card-body > .react-strip {
    position: relative !important;
    z-index: 1;
    flex-shrink: 0;
    margin-top: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #feed-grid .ed-card .thumb-wrap,
  #frontpage-grid .ed-card.standard .thumb-wrap,
  #frontpage-grid .ed-card.front-feature .thumb-wrap,
  #frontpage-grid .ed-card.feature .thumb-wrap,
  #ssr-frontpage-fallback .ed-card.front-feature .thumb-wrap,
  #ssr-frontpage-fallback .ed-card.standard .thumb-wrap {
    width: var(--ws-thumb) !important;
    height: var(--ws-thumb) !important;
    max-height: var(--ws-thumb) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
    overflow: hidden;
  }
  #ssr-frontpage-fallback .ed-card.hero {
    display: block !important;
    padding-bottom: 18px !important;
  }
  #ssr-frontpage-fallback .ed-card.hero .thumb-wrap {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px !important;
  }
  #ssr-frontpage-fallback .ed-card.hero .ed-card-body {
    padding: 12px 0 0 !important;
  }
  #feed-grid .ed-card .ed-title,
  #frontpage-grid .ed-card.standard .ed-title,
  #frontpage-grid .ed-card.front-feature .ed-title,
  #frontpage-grid .ed-card.feature .ed-title {
    font-size: 16.5px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.012em;
    margin-top: 2px !important;
    /* 3-line clamp keeps rows even while staying readable */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }
  #feed-grid .ed-card .ed-meta,
  #frontpage-grid .ed-card .ed-meta {
    font-size: 12px !important;
    gap: 6px !important;
  }
  #feed-grid .ed-card .ed-source,
  #frontpage-grid .ed-card .ed-source {
    font-size: 12px !important;
    font-weight: 650;
  }
  /* List density: tags off; reactions stay a horizontal row (wrap if needed).
     nowrap + overflow-x alone still looked broken when the body column was
     ~thumb-width after a bad flex override — wrap is safer. */
  #feed-grid .tag-chip,
  #frontpage-grid .ed-card:not(.hero) .tag-chip {
    display: none !important;
  }
  #feed-grid .ed-card .react-strip,
  #frontpage-grid .ed-card:not(.hero) .react-strip {
    margin-top: 6px !important;
    gap: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    width: 100% !important;
    max-width: 100% !important;
    writing-mode: horizontal-tb !important;
  }
  #feed-grid .ed-card .react-strip::-webkit-scrollbar,
  #frontpage-grid .ed-card:not(.hero) .react-strip::-webkit-scrollbar {
    display: none;
  }
  #feed-grid .ed-card .react-strip > button,
  #feed-grid .ed-card .react-strip > a,
  #frontpage-grid .ed-card:not(.hero) .react-strip > button,
  #frontpage-grid .ed-card:not(.hero) .react-strip > a {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    flex: 0 0 auto;
  }

  /* Compact / text-only still work cleanly in the list */
  body.view-compact #feed-grid .ed-excerpt,
  body.view-compact #frontpage-grid .ed-card:not(.hero) .ed-excerpt {
    display: none !important;
  }
  body.view-textonly #feed-grid .ed-card,
  body.view-textonly #frontpage-grid .ed-card:not(.hero) {
    display: block !important;
    grid-template-columns: none !important;
    padding: 14px 0 !important;
  }
  body.view-textonly #feed-grid .ed-card .ed-title {
    font-size: 17.5px !important;
    -webkit-line-clamp: 4 !important;
  }

  /* Feed stream rhythm */
  #feed-grid.feed-magazine {
    gap: 0 !important;
    row-gap: 0 !important;
  }
  #frontpage-grid.feed-magazine {
    gap: 0 !important;
    row-gap: 0 !important;
  }
  /* Kill every vertical snap point that may still be set from older CSS. */
  #feed-grid .ed-card,
  #frontpage-grid .ed-card,
  .ed-card {
    scroll-snap-align: none !important;
    scroll-margin: 0 !important;
    content-visibility: visible !important;
  }
  .ed-card:hover { transform: none !important; } /* no hover lift on touch */
  /* Global card containment was sized for desktop heroes (~600px) — on a phone
     list that reserves huge empty scroll space and feels broken. */
  .ed-card {
    contain-intrinsic-size: auto !important;
  }

  /* Signal board: quieter, secondary */
  .signal-board { padding-top: 28px !important; }
  .signal-board-intro {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    gap: 6px !important;
  }
  .signal-board-intro h2 { font-size: 1.55rem !important; }
  .signal-board-intro p { font-size: 13px !important; }
  .signal-panel { padding: 14px 0 !important; }
  .trust-section { padding-top: 20px !important; padding-bottom: 28px !important; }
  .trust-section .value-card-body { font-size: 13.5px !important; }

  /* Bottom nav — soft, app-like, thumb-native */
  .mobile-bottom-nav {
    display: flex !important;
    height: auto;
    min-height: var(--ws-bottom-nav);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    background: color-mix(in srgb, var(--ws-bg, #0b0c0f) 88%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    border-top: 1px solid color-mix(in srgb, var(--ws-line, #2A2D34) 80%, transparent) !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .28);
  }
  .mobile-bottom-nav button,
  .mobile-bottom-nav a {
    min-height: 52px !important;
    gap: 4px !important;
    padding: 6px 4px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: var(--ws-muted, #9CA0AB) !important;
    transition: color .14s ease, background .14s ease;
  }
  .mobile-bottom-nav button .icn,
  .mobile-bottom-nav a .icn {
    width: 22px !important;
    height: 22px !important;
  }
  .mobile-bottom-nav button.active,
  .mobile-bottom-nav a.active {
    color: var(--ws-text, #f2f0eb) !important;
    background: color-mix(in srgb, var(--ws-accent, #C8302C) 12%, transparent);
  }
  .mobile-bottom-nav button.active::after,
  .mobile-bottom-nav a.active::after {
    display: none !important; /* pill bg replaces underline */
  }
  .mobile-bottom-nav button:active,
  .mobile-bottom-nav a:active {
    background: color-mix(in srgb, var(--ws-accent, #C8302C) 18%, transparent);
  }

  /* Bottom sheet: easier grab + larger cells */
  #bottom-nav-sheet .bns-card {
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: min(82vh, 720px);
  }
  #bottom-nav-sheet .bns-card::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--ws-muted, #9CA0AB) 45%, transparent);
    margin: 2px auto 12px;
  }
  .bns-item {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
  }

  /* Pull-to-refresh indicator sits under header cleanly */
  #ptr-indicator {
    top: calc(var(--ws-header) - 2px) !important;
    border-radius: 0 0 14px 14px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 380px) {
  :root { --ws-thumb: 88px; }
  #feed-grid .ed-card .ed-title,
  #frontpage-grid .ed-card.standard .ed-title {
    font-size: 15.5px !important;
  }
}

/* Light / journalist: sticky toolbar + bottom nav pick up theme surfaces */
:root[data-theme="light"] .feed-toolbar,
:root[data-theme="journalist"] .feed-toolbar {
  background: color-mix(in srgb, var(--ws-bg) 92%, transparent);
  border-bottom-color: var(--ws-line);
}
:root[data-theme="light"] .mobile-bottom-nav,
:root[data-theme="journalist"] .mobile-bottom-nav {
  background: color-mix(in srgb, var(--ws-bg) 90%, transparent) !important;
  border-top-color: var(--ws-line) !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}

/* shell 3 */
.icn { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
  .icn-lg { width: 22px; height: 22px; }
  /* Section-head icons sit alongside the serif kicker text. */
  .ed-section-icn { width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; color: #C8302C; }
  .ed-section-kicker.text-spark .ed-section-icn { color: #E8443E; }

  /* ====== Editor's note — collapsible briefing widget ======
     The expanded body is a long-form serif column with editorial line
     length and proper paragraph rhythm. The collapsed bar shows just the
     headline + first sentence so the homepage isn't dominated by 700 words
     of AI commentary on a fresh load. */
  .ed-note {
    background: #16181D;
    border: 1px solid #2A2D34;
    border-left: 3px solid #C8302C;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 1px 3px rgba(0,0,0,.35);
    overflow: hidden;
  }
  .ed-note-bar {
    display: grid;
    grid-template-columns: 32px 1fr 22px;
    align-items: start;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background-color .15s ease;
  }
  .ed-note-bar:hover { background: rgba(200,48,44,.04); }
  .ed-note-icon { width: 30px; height: 30px; color: #C8302C; flex-shrink: 0; margin-top: 2px; }
  .ed-note-bar-text { min-width: 0; }
  .ed-note-rule {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #C8302C;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .ed-note-headline {
    font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: #ECEDEF;
    letter-spacing: -.012em;
    margin: 0;
    /* Headline can run two lines on mobile but truncates to 2 cleanly. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ed-note-preview {
    font-family: "Cormorant Garamond", Charter, Georgia, serif;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(236,237,239,.72);
    margin: 6px 0 0;
    /* One-line preview when collapsed, full when expanded. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ed-note-chevron {
    width: 20px;
    height: 20px;
    color: #9CA0AB;
    flex-shrink: 0;
    margin-top: 4px;
    transition: transform .25s ease, color .15s ease;
  }
  .ed-note.expanded .ed-note-chevron { transform: rotate(180deg); color: #C8302C; }
  .ed-note.expanded .ed-note-preview {
    /* When expanded, the preview line is hidden because the full body is
       below — we keep it in the bar header just to give the chevron
       something to anchor against on collapse. */
    display: none;
  }
  .ed-note.expanded .ed-note-headline {
    /* Larger and unclamped when the note is open. */
    font-size: 28px;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    display: block;
    overflow: visible;
  }
  .ed-note-body-wrap {
    border-top: 1px solid #2A2D34;
    padding: 22px 22px 22px 64px; /* offset matches the bar's 32px icon + 14px gap + 18px padding */
    background: rgba(14,15,18,.4);
    animation: edNoteFade .25s ease;
  }
  @keyframes edNoteFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ed-note-body {
    font-family: "Cormorant Garamond", Charter, Georgia, serif;
    font-size: 18.5px;
    line-height: 1.7;
    color: rgba(236,237,239,.92);
    /* Editorial-column reading length capped so paragraphs don't sprawl. */
    max-width: 64ch;
  }
  .ed-note-body p { margin: 0 0 16px; }
  .ed-note-body p:last-child { margin-bottom: 0; }
  .ed-note-body p:first-child::first-letter {
    /* Drop cap on the opening paragraph for an editorial feel. */
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    font-size: 56px;
    line-height: .85;
    float: left;
    color: #C8302C;
    margin: 4px 8px 0 0;
    padding: 0;
  }
  .ed-note-meta-row {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed rgba(42,45,52,.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .ed-note-byline {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 13.5px;
    color: rgba(156,160,171,.85);
    line-height: 1.5;
  }
  .ed-note-byline a { color: #C8302C; text-decoration: underline; text-decoration-color: rgba(200,48,44,.4); text-underline-offset: 3px; }
  .ed-note-byline a:hover { text-decoration-color: #C8302C; }
  .ed-note-archive {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C8302C;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
  }
  .ed-note-archive:hover { color: #ECEDEF; }
  @media (max-width: 640px) {
    .ed-note-bar { padding: 14px 14px; grid-template-columns: 26px 1fr 18px; gap: 11px; }
    .ed-note-icon { width: 24px; height: 24px; }
    .ed-note-headline { font-size: 19px; }
    .ed-note-preview { font-size: 14px; }
    .ed-note.expanded .ed-note-headline { font-size: 22px; }
    .ed-note-body-wrap { padding: 18px 16px 18px 16px; }
    .ed-note-body { font-size: 17px; line-height: 1.65; }
    .ed-note-body p:first-child::first-letter { font-size: 44px; margin: 2px 6px 0 0; }
    .ed-note-meta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  }
  .rxn-icn { width: 18px; height: 18px; vertical-align: -3px; }
  .rxn-icn.rxn-like   { color: #ECEDEF; }
  .rxn-icn.rxn-love   { color: #C8302C; }
  .rxn-icn.rxn-fire   { color: #E8443E; }
  .rxn-icn.rxn-laugh  { color: #C9A45C; }
  .rxn-icn.rxn-think  { color: #ECEDEF; }
  /* Active reaction (.mine) — bump a bit + add a subtle red ring */
  .react-btn.mine .rxn-icn { transform: scale(1.05); }
  /* Side-nav active state turns icons red */
  #side-nav .side-tab.active .icn { color: #C8302C; }

/* editorial-v2 */
/* WeSearch Press editorial system — July 2026
   This file is inlined by homepageSsr.ts so the first paint and hydrated UI
   share one final cascade without adding a render-blocking request. */

/* Brand palette — single source of truth.
   Matches the product red (#C8302C) and ink (#0E0F12) used in logos, SSR
   cards, and marketing. The previous dual-palette (near-black #0b0c0f +
   coral #e0443e) clashed with hardcoded #C8302C accents elsewhere. */
:root {
  --ws-bg: #0E0F12;
  --ws-surface: #16181D;
  --ws-surface-raised: #1A1B22;
  --ws-line: #2A2D34;
  --ws-line-strong: #3A3E47;
  --ws-text: #ECEDEF;
  --ws-text-soft: rgba(236, 237, 239, 0.78);
  --ws-muted: #9CA0AB;
  --ws-accent: #C8302C;
  --ws-accent-deep: #9E2420;
  --ws-accent-hover: #E8544F;
  --ws-positive: #4D9A6A;
  --ws-negative: #E8544F;
  --ws-focus: #C8302C;
  --ws-on-accent: #ffffff;
  --ws-header-bg: rgba(14, 15, 18, 0.94);
  --ws-rail-bg: #12141A;
  --ws-panel-deep: #0E1014;
  --ws-serif: "Cormorant Garamond", Charter, Georgia, serif;
  --ws-sans: "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
  --ws-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ws-reading: 1180px;
  --ws-rail: 184px;
  --ws-header: 64px;
}

/* Light + journalist tokens — same semantic names so chrome that uses
   var(--ws-*) flips correctly without per-selector dark hexes. */
html[data-theme="light"] {
  color-scheme: light;
  --ws-bg: #FAFAF7;
  --ws-surface: #FFFFFF;
  --ws-surface-raised: #F2F1ED;
  --ws-line: #DEDED7;
  --ws-line-strong: #C9C9C2;
  --ws-text: #1A1B1F;
  --ws-text-soft: rgba(26, 27, 31, 0.82);
  --ws-muted: #5A5D62;
  --ws-accent: #C8302C;
  --ws-accent-deep: #A8261F;
  --ws-accent-hover: #B22A26;
  --ws-positive: #176B3A;
  --ws-negative: #A9212A;
  --ws-focus: #A8261F;
  --ws-on-accent: #ffffff;
  --ws-header-bg: rgba(250, 250, 247, 0.94);
  --ws-rail-bg: #F2F1ED;
  --ws-panel-deep: #F2F1ED;
}

html[data-theme="journalist"] {
  color-scheme: light;
  --ws-bg: #F4ECD8;
  --ws-surface: #FFF9E9;
  --ws-surface-raised: #ECE4D0;
  --ws-line: #C9BFA7;
  --ws-line-strong: #B5A88E;
  --ws-text: #2A2218;
  --ws-text-soft: rgba(42, 34, 24, 0.86);
  --ws-muted: #6B5F4B;
  --ws-accent: #A8261F;
  --ws-accent-deep: #8D1713;
  --ws-accent-hover: #C8302C;
  --ws-positive: #24643B;
  --ws-negative: #92232A;
  --ws-focus: #8D1713;
  --ws-on-accent: #ffffff;
  --ws-header-bg: rgba(244, 236, 216, 0.94);
  --ws-rail-bg: #ECE4D0;
  --ws-panel-deep: #ECE4D0;
}

html { scroll-padding-top: calc(var(--ws-header) + 18px); }
body {
  background: var(--ws-bg);
  color: var(--ws-text);
  font-family: var(--ws-sans);
  text-rendering: optimizeLegibility;
}

a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ws-focus) !important;
  outline-offset: 3px !important;
}

.skip-link:focus {
  z-index: 9999;
  background: var(--ws-text);
  color: var(--ws-bg);
  padding: 10px 14px;
  border-radius: 0 0 4px 0;
}

/* Header: one readable identity, one powerful search field, restrained tools. */
.ws-header {
  min-height: var(--ws-header);
  background: var(--ws-header-bg) !important;
  border-color: var(--ws-line) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
.ws-header > div:first-child { height: var(--ws-header) !important; }
.ws-brand { color: var(--ws-text); text-decoration: none; }
.ws-brand img { width: 30px; height: 30px; border-radius: 3px; }
.ws-brand-name {
  font: 700 19px/1 var(--ws-serif);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.ws-brand-name em { color: var(--ws-accent); font-weight: 700; }
.ws-brand .live-dot { width: 6px; height: 6px; margin-left: 2px; }
#search-form { max-width: 660px; }
#search-input {
  min-height: 42px;
  background: var(--ws-surface) !important;
  border-color: var(--ws-line) !important;
  color: var(--ws-text);
  border-radius: 5px !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#search-input:hover { border-color: var(--ws-line-strong) !important; }
#search-input:focus {
  border-color: color-mix(in srgb, var(--ws-accent) 70%, transparent) !important;
  background: var(--ws-surface-raised) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-accent) 14%, transparent);
}
#search-input::placeholder { color: var(--ws-muted); opacity: 1; }
#search-suggest { border-color: var(--ws-line-strong) !important; }

/* Desktop rail: narrower and grouped by reader intent. */
#side-nav {
  top: var(--ws-header) !important;
  width: var(--ws-rail) !important;
  background: var(--ws-rail-bg) !important;
  border-color: var(--ws-line) !important;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ws-text) 3%, transparent) !important;
}
#side-nav .side-nav-label {
  color: var(--ws-muted) !important;
  font-size: 9px !important;
  letter-spacing: .2em !important;
  padding-left: 18px !important;
  padding-right: 14px !important;
}
#side-nav .side-tab {
  min-height: 42px;
  gap: 11px;
  padding: 10px 16px;
  border-left-width: 3px;
  color: var(--ws-muted);
  font-size: 13.5px;
}
#side-nav .side-tab .icn { width: 17px; height: 17px; }
#side-nav .side-tab:hover { background: color-mix(in srgb, var(--ws-text) 4%, transparent); color: var(--ws-text); }
#side-nav .side-tab.active {
  background: rgba(224, 68, 62, .08);
  border-left-color: var(--ws-accent);
}
#side-nav .side-tab-secondary { color: var(--ws-muted); }
#side-nav .side-tab-secondary small {
  margin-left: auto;
  padding: 2px 5px;
  border: 1px solid var(--ws-line);
  border-radius: 3px;
  color: #737984;
  font: 700 8px/1 var(--ws-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#side-nav .side-socials { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
#side-nav .side-socials a { color: var(--ws-muted); font-size: 10px; text-decoration: none; }
#side-nav .side-socials a:hover { color: var(--ws-text); }

/* First-visit masthead: editorial confidence without delaying the news. */
#home-masthead {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(224,68,62,.07), transparent 28%),
    var(--ws-bg);
  border-color: var(--ws-line);
}
#home-masthead .max-w-6xl { max-width: var(--ws-reading); }
#home-masthead .masthead-rule {
  margin-bottom: 24px;
  padding: 7px 0;
  border-top-color: var(--ws-accent);
  border-bottom-color: var(--ws-line);
  color: var(--ws-accent);
  font-size: 10px;
}
#home-masthead .masthead-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 5px;
  font-family: var(--ws-serif);
  letter-spacing: -.035em;
}
.masthead-brand { font-size: clamp(3.2rem, 7vw, 6.4rem); line-height: .83; }
.masthead-brand em { color: var(--ws-accent); font-weight: inherit; }
.masthead-deck {
  color: var(--ws-muted);
  font-size: clamp(1.7rem, 3vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -.025em;
}
#home-masthead .masthead-sub {
  max-width: 700px;
  color: var(--ws-text-soft);
  font-family: var(--ws-sans);
  font-size: 16px;
  line-height: 1.65;
}
.btn-primary,
.btn-ghost { min-height: 44px; justify-content: center; }
.btn-primary { background: var(--ws-accent-deep); }
.btn-primary:hover { background: var(--ws-accent); }
.btn-ghost { border-color: var(--ws-line-strong); }

.edition-nav {
  background: var(--ws-panel-deep);
  border-color: var(--ws-line);
}
.edition-nav-inner { max-width: var(--ws-reading); gap: 20px; }
.edition-nav-label { color: var(--ws-accent); }
.edition-nav a { color: var(--ws-muted); }
.edition-nav .edition-nav-secondary {
  margin-left: auto;
  color: var(--ws-muted);
  font-weight: 500;
}
.edition-nav .edition-nav-secondary::before {
  content: "Lab";
  margin-right: 6px;
  color: var(--ws-muted);
  font: 700 8px/1 var(--ws-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Consistent section hierarchy and spacing. */
.frontpage-section,
.signal-board,
.latest-section,
.trust-section { max-width: var(--ws-reading); }
.frontpage-section { padding-top: 42px !important; }
.ed-section-head { gap: 12px; margin-bottom: 18px; border-bottom-color: var(--ws-line); }
h2.ed-section-kicker,
h3.ed-section-kicker { margin: 0; }
.ed-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ws-text);
  font-size: 24px;
}
.ed-section-kicker > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.ed-section-kicker > a:hover { color: var(--ws-accent-hover); }
.ed-section-kicker .ed-section-icn { color: var(--ws-accent); }
.ed-section-line { background: var(--ws-line); }
.ed-section-meta { color: var(--ws-muted); }

/* Story cards: less boxed chrome, clearer typography, reliable focus. */
.feed-magazine { gap: 24px; row-gap: 34px; }
.ed-card {
  border-radius: 3px;
  transition: transform .18s ease;
}
.ed-card[data-story-href] { cursor: pointer; }
.story-primary-link,
.story-media-link { display: block; color: inherit; text-decoration: none; }
.story-primary-link:focus-visible { border-radius: 2px; }
.ed-card:hover { transform: translateY(-2px); }
.ed-card .ed-title { color: var(--ws-text); text-wrap: pretty; }
.ed-card:hover .ed-title { color: var(--ws-accent-hover); }
.ed-card .ed-source { color: var(--ws-accent); }
.ed-card .ed-excerpt,
.ed-excerpt-base { color: var(--ws-text-soft); line-height: 1.62; }
.ed-card .ed-meta { color: var(--ws-muted); }
.thumb-wrap { background: var(--ws-surface); border-radius: 4px; }
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.tag-chip { min-height: 30px; display: inline-flex; align-items: center; }

/* Reader signals: one compact orientation block instead of four page-length sections. */
.signal-board-intro {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(280px, 1fr);
  align-items: end;
  gap: 32px;
  padding: 24px 0 20px;
  border-top: 2px solid var(--ws-text);
}
.section-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--ws-accent);
  font: 700 10px/1 var(--ws-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.signal-board-intro h2 {
  margin: 0;
  color: var(--ws-text);
  font: 700 clamp(2rem, 4vw, 3.15rem)/.95 var(--ws-serif);
  letter-spacing: -.03em;
}
.signal-board-intro p {
  max-width: 560px;
  margin: 0 0 3px;
  color: var(--ws-muted);
  font-size: 14px;
  line-height: 1.55;
}
.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ws-line);
  border-left: 1px solid var(--ws-line);
}
.signal-panel {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid var(--ws-line);
  border-bottom: 1px solid var(--ws-line);
  background: var(--ws-panel-deep);
}
.signal-panel-wide { grid-column: 1 / -1; }
.signal-panel .ed-section-head { margin-bottom: 14px; padding-bottom: 10px; }
.signal-panel .ed-section-kicker { font-size: 19px; }
.signal-panel-wide .trending-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.signal-panel:not(.signal-panel-wide) .trending-row,
.signal-panel .most-discussed-row { grid-template-columns: 1fr; }
.signal-panel .trending-card {
  padding: 15px 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ws-line);
  border-radius: 0;
  box-shadow: none;
}
.signal-panel .trending-card:first-child { border-top: 0; }
.signal-panel .trending-card:hover { background: color-mix(in srgb, var(--ws-text) 3.5%, transparent); }
.signal-panel .trending-card .title { font-size: 17px; }
.signal-panel .trending-card .rank { right: 8px; color: rgba(224,68,62,.17); }
.signal-viewed { color: #b9d9ec; }
.signal-topics { color: #9bd1af; }
#trending-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#trending-tags a,
#trending-tags button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* Latest is the durable reading path: clearer filters, less dashboard noise. */
.latest-section { padding-top: 56px !important; }
#feed-chips { padding-top: 2px; margin-bottom: 2px; }
#feed-chips > button,
#feed-chips > a,
#bias-chips > button { min-height: 38px; }
#bias-rainbow-wrap { opacity: .9; }

/* Trust strip reads as editorial notes rather than a promotional card wall. */
.trust-section { margin-top: 12px; border-top: 1px solid var(--ws-line); }
.trust-section .grid { gap: 0 !important; }
.trust-section .value-card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ws-line);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 28px 20px 0;
}
.trust-section .value-card + .value-card { padding-left: 28px; }
.trust-section .value-card:last-child { border-right: 0; }
.trust-section .value-card-icon { margin-bottom: 8px; }
.trust-section .value-card-icon svg { width: 25px !important; height: 25px !important; }
.trust-section .value-card-title { font-size: 19px; }
.trust-section .value-card-body { color: var(--ws-muted); font-size: 13.5px; }

/* Markets: unavailable data stays legible and honest. */
.mk-ticker { background: var(--ws-surface); border-color: var(--ws-line); min-height: 112px; }
.mk-ticker .mk-name { color: #8f95a0; }
.mk-ticker .mk-status {
  min-height: 13px;
  margin-top: 5px;
  color: #8d939e;
  font: 500 9px/1.35 var(--ws-mono);
}
.mk-ticker.mk-unavail { opacity: 1 !important; background: #101217; }
.mk-ticker.mk-unavail .mk-symbol { color: #a7acb5; }
.mk-ticker.mk-unavail .mk-name { color: #7f8590; }
.mk-ticker.mk-unavail .mk-price { color: #6f7580; }
.mk-ticker.mk-unavail .mk-change { color: #9ca2ad; }
.stock-tab { min-height: 38px; }

/* Bottom navigation: five large, predictable destinations. */
.mobile-bottom-nav button,
.mobile-bottom-nav a { min-height: 54px; position: relative; }
.mobile-bottom-nav button.active::after,
.mobile-bottom-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--ws-accent);
  transform: translateX(-50%);
}
.bns-item { min-height: 48px; }

@media (min-width: 960px) {
  body { padding-left: var(--ws-rail) !important; }
  #side-nav { display: flex !important; }
}

/* Tablet rail: solid desktop Support is crowded — show compact pill instead. */
@media (max-width: 1180px) and (min-width: 960px) {
  #wall-btn,
  #donate-btn,
  #install-btn { display: none !important; }
  #donate-btn-mobile {
    display: inline-flex !important;
    align-items: center;
  }
}

@media (max-width: 959px) {
  :root { --ws-header: 58px; }
  .mobile-tab-nav { display: none !important; }
  .ws-header > div:first-child { height: var(--ws-header) !important; }
  /* Keep Support + bell visible on mobile. Wall icon can stay out.
     Notifications must be one tap from the header on every device. */
  #wall-btn-mobile,
  #refresh-btn,
  #install-btn { display: none !important; }
  #bell-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    position: relative;
  }
  #donate-btn-mobile {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
  }
  .ws-globe { display: none; }
  #settings-btn { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
  .bns-donate {
    border: 1px solid rgba(200, 48, 44, 0.45) !important;
    background: rgba(200, 48, 44, 0.08) !important;
  }
  #search-form { max-width: none; }
  #search-input { min-height: 40px; font-size: 16px; }
  .edition-nav .edition-nav-secondary { margin-left: 0; }
  .signal-board { padding-top: 44px !important; }
  .signal-board-intro { grid-template-columns: 1fr; gap: 12px; }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-panel-wide { grid-column: auto; }
  .signal-panel-wide .trending-row { grid-template-columns: 1fr; }
  .trust-section .grid { grid-template-columns: 1fr; }
  .trust-section .value-card,
  .trust-section .value-card + .value-card {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--ws-line);
  }
  .trust-section .value-card:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .ws-brand-name { display: none !important; }
  .ws-brand .live-dot { display: none; }
  .ws-header > div:first-child { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; }
  #search-form { margin-left: 2px !important; }
  #search-input { padding-left: 34px !important; padding-right: 30px !important; }
  #home-masthead .max-w-6xl { padding: 30px 16px 32px !important; }
  #home-masthead .masthead-title { display: block; }
  .masthead-brand { display: block; font-size: clamp(2.9rem, 15vw, 4.2rem); }
  .masthead-deck { display: block; margin-top: 11px; font-size: 1.65rem; }
  #home-masthead .masthead-sub { font-size: 14px; line-height: 1.55; }
  #home-masthead .masthead-actions { margin-top: 20px !important; }
  #home-masthead .masthead-actions a { width: 100%; }
  .edition-nav-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .frontpage-section,
  .signal-board,
  .latest-section,
  .trust-section { padding-left: 16px !important; padding-right: 16px !important; }
  .frontpage-section { padding-top: 32px !important; }
  .ed-section-kicker { font-size: 20px; }
  .signal-board-intro { padding-top: 20px; }
  .signal-panel { padding: 17px 15px; }
  .signal-panel .trending-card { padding-left: 0; padding-right: 0; }
  .latest-section { padding-top: 44px !important; }
  .feed-magazine { row-gap: 28px; }
  .hero .ed-title { font-size: 27px; }
  .feature .ed-title { font-size: 21px; }
  .standard .ed-title,
  .front-feature .ed-title { font-size: 19px; }
  .mobile-bottom-nav { background: rgba(11,12,15,.96); }
}

/* Light and journalist modes retain the same hierarchy. */
html[data-theme="light"] .signal-panel,
html[data-theme="journalist"] .signal-panel { background: transparent; }
html[data-theme="light"] .signal-grid,
html[data-theme="light"] .signal-panel,
html[data-theme="light"] .signal-board-intro,
html[data-theme="light"] .trust-section,
html[data-theme="light"] .trust-section .value-card,
html[data-theme="journalist"] .signal-grid,
html[data-theme="journalist"] .signal-panel,
html[data-theme="journalist"] .signal-board-intro,
html[data-theme="journalist"] .trust-section,
html[data-theme="journalist"] .trust-section .value-card { border-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ========================================================================
   MOBILE READABILITY (2026-07-27)
   Side-by-side 100px-thumb rows left ~220px for serif titles. Combined with
   overflow-wrap:anywhere that made long words break mid-letter ("vertical
   text"). Stack image above text, give real gutters, fix wrapping.
   ======================================================================== */
@media (max-width: 767px) {
  :root {
    --ws-mobile-gutter: 16px;
    --ws-thumb: 0px; /* unused in stacked layout */
  }

  /* Never break mid-character on phones */
  h1, h2, h3, h4, .ed-title, .ed-excerpt, .ed-source, .ed-meta, p, a {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    word-wrap: break-word !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
  }
  .ed-title {
    /* Serif titles need a little air between lines */
    line-height: 1.32 !important;
    letter-spacing: -0.01em !important;
  }

  /* Comfortable page gutters */
  main,
  .pane > div,
  #home-main,
  .max-w-7xl,
  .max-w-6xl {
    padding-left: var(--ws-mobile-gutter) !important;
    padding-right: var(--ws-mobile-gutter) !important;
  }

  /* ---- Stack cards: full-width image on top, readable text below ---- */
  #feed-grid .ed-card.standard:not(.text-only),
  #feed-grid .ed-card.front-feature:not(.text-only),
  #feed-grid .ed-card.feature:not(.text-only),
  #frontpage-grid .ed-card.standard:not(.text-only),
  #frontpage-grid .ed-card.front-feature:not(.text-only),
  #frontpage-grid .ed-card.feature:not(.text-only),
  #ssr-frontpage-fallback .ed-card.front-feature:not(.text-only),
  #ssr-frontpage-fallback .ed-card.standard:not(.text-only) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    padding: 0 0 22px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(140, 144, 155, 0.16) !important;
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #feed-grid .ed-card.standard:not(.text-only) > .story-media-link,
  #feed-grid .ed-card.front-feature:not(.text-only) > .story-media-link,
  #feed-grid .ed-card.feature:not(.text-only) > .story-media-link,
  #frontpage-grid .ed-card.standard:not(.text-only) > .story-media-link,
  #frontpage-grid .ed-card.front-feature:not(.text-only) > .story-media-link,
  #frontpage-grid .ed-card.feature:not(.text-only) > .story-media-link,
  #ssr-frontpage-fallback .ed-card.front-feature > .thumb-wrap,
  #ssr-frontpage-fallback .ed-card.standard > .thumb-wrap {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  #feed-grid .ed-card .thumb-wrap,
  #frontpage-grid .ed-card.standard .thumb-wrap,
  #frontpage-grid .ed-card.front-feature .thumb-wrap,
  #frontpage-grid .ed-card.feature .thumb-wrap,
  #ssr-frontpage-fallback .ed-card.front-feature .thumb-wrap,
  #ssr-frontpage-fallback .ed-card.standard .thumb-wrap {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important;
  }

  /* Body under the image — real spacing, not 0 / 2px.
     Scope to .ed-card-body only so a sibling .react-strip stays a
     full-width row under the card (not padded like body copy). */
  #feed-grid .ed-card.standard:not(.text-only) > .ed-card-body,
  #feed-grid .ed-card.front-feature:not(.text-only) > .ed-card-body,
  #feed-grid .ed-card.feature:not(.text-only) > .ed-card-body,
  #frontpage-grid .ed-card.standard:not(.text-only) > .ed-card-body,
  #frontpage-grid .ed-card.front-feature:not(.text-only) > .ed-card-body,
  #frontpage-grid .ed-card.feature:not(.text-only) > .ed-card-body,
  #ssr-frontpage-fallback .ed-card.front-feature > .ed-card-body,
  #ssr-frontpage-fallback .ed-card.standard > .ed-card-body,
  #feed-grid .ed-card .ed-card-body,
  #frontpage-grid .ed-card:not(.hero) .ed-card-body {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding: 12px 2px 4px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* Sibling reaction strip under stacked media+body */
  #feed-grid .ed-card > .react-strip,
  #frontpage-grid .ed-card:not(.hero) > .react-strip {
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    padding: 0 2px 8px !important;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  /* Titles: phone-readable size + air between lines */
  #feed-grid .ed-card .ed-title,
  #frontpage-grid .ed-card.standard .ed-title,
  #frontpage-grid .ed-card.front-feature .ed-title,
  #frontpage-grid .ed-card.feature .ed-title,
  #ssr-frontpage-fallback .ed-card .ed-title {
    font-size: 1.2rem !important;   /* ~19.2px */
    line-height: 1.34 !important;
    letter-spacing: -0.01em !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    max-width: none !important;
    -webkit-line-clamp: 4 !important;
  }

  #feed-grid .ed-card .ed-excerpt,
  #frontpage-grid .ed-card:not(.hero) .ed-excerpt,
  #ssr-frontpage-fallback .ed-card .ed-excerpt {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.01em !important;
    max-width: none !important;
    margin-top: 2px !important;
  }

  #feed-grid .ed-card .ed-meta,
  #frontpage-grid .ed-card .ed-meta,
  #feed-grid .ed-card .ed-source,
  #frontpage-grid .ed-card .ed-source,
  #feed-grid .ed-card .ed-source-line {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
  }

  /* Hero stays full-bleed but roomier type */
  #frontpage-grid .ed-card.hero .ed-title,
  #feed-grid .ed-card.hero .ed-title {
    font-size: 1.45rem !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 4 !important;
  }
  #frontpage-grid .ed-card.hero .ed-excerpt,
  #feed-grid .ed-card.hero .ed-excerpt {
    font-size: 16px !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Monogram covers: don't force tiny square */
  #feed-grid .thumb-cover .tc-mark,
  #frontpage-grid .thumb-cover .tc-mark {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  #feed-grid .thumb-cover .tc-source {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  /* Reaction row: room to breathe, still tappable */
  #feed-grid .ed-card .react-strip,
  #frontpage-grid .ed-card:not(.hero) .react-strip {
    margin-top: 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  #feed-grid .ed-card .react-strip > button,
  #feed-grid .ed-card .react-strip > a,
  #frontpage-grid .ed-card:not(.hero) .react-strip > button,
  #frontpage-grid .ed-card:not(.hero) .react-strip > a {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Text-only / compact still use full width */
  body.view-textonly #feed-grid .ed-card,
  body.view-textonly #frontpage-grid .ed-card:not(.hero) {
    display: block !important;
    padding: 16px 0 !important;
  }
  body.view-textonly #feed-grid .ed-card .ed-title {
    font-size: 1.22rem !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 5 !important;
  }

  /* Kill the old 380px shrink that made titles even tinier */
  #feed-grid .ed-card .ed-title,
  #frontpage-grid .ed-card.standard .ed-title {
    font-size: 1.2rem !important;
  }
}

/* Very small phones: still stacked, slightly tighter but not tiny type */
@media (max-width: 380px) {
  :root { --ws-mobile-gutter: 14px; }
  #feed-grid .ed-card .ed-title,
  #frontpage-grid .ed-card.standard .ed-title,
  #frontpage-grid .ed-card.front-feature .ed-title,
  #frontpage-grid .ed-card.feature .ed-title {
    font-size: 1.125rem !important; /* 18px — was 15.5 */
    line-height: 1.35 !important;
  }
  #feed-grid .ed-card .ed-excerpt {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================
   Today's conversation — daily shared invite (not feed ranking)
   ============================================================ */
.daily-convo[hidden] { display: none !important; }
.daily-convo-card {
  border: 1px solid var(--ws-line, #2A2D34);
  border-left: 3px solid var(--ws-accent, #C8302C);
  background: var(--ws-surface, #16181D);
  border-radius: 6px;
  padding: 20px 22px 18px;
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
}
.daily-convo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.daily-convo-kicker { min-width: 0; }
.daily-convo-rule {
  display: block;
  font-family: var(--ws-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ws-accent, #C8302C);
  margin-bottom: 4px;
}
.daily-convo-note {
  display: block;
  font-size: 12.5px;
  color: var(--ws-muted, #9CA0AB);
  line-height: 1.4;
}
.daily-convo-skip {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--ws-line, #2A2D34);
  color: var(--ws-muted, #9CA0AB);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--ws-sans, system-ui, sans-serif);
}
.daily-convo-skip:hover {
  border-color: var(--ws-accent, #C8302C);
  color: var(--ws-text, #ECEDEF);
}
.daily-convo-body {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.daily-convo-media {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ws-panel-deep, #0E1014);
  aspect-ratio: 16/10;
}
.daily-convo-media[hidden] { display: none !important; }
.daily-convo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.daily-convo-source {
  font-family: var(--ws-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ws-accent, #C8302C);
  font-weight: 700;
  margin-bottom: 8px;
}
.daily-convo-title {
  margin: 0 0 8px;
  font-family: var(--ws-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
}
.daily-convo-title a {
  color: var(--ws-text, #ECEDEF);
  text-decoration: none;
}
.daily-convo-title a:hover { color: var(--ws-accent-hover, #E8544F); }
.daily-convo-excerpt {
  margin: 0 0 12px;
  color: var(--ws-text-soft, rgba(236,237,239,.78));
  font-size: 14.5px;
  line-height: 1.55;
}
.daily-convo-excerpt[hidden] { display: none !important; }
.daily-convo-prompt {
  margin: 0 0 12px;
  font-family: var(--ws-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ws-text, #ECEDEF);
}
.daily-convo-form textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid var(--ws-line-strong, #3A3E47);
  background: var(--ws-bg, #0E0F12);
  color: var(--ws-text, #ECEDEF);
  border-radius: 5px;
  padding: 12px 14px;
  font-family: var(--ws-sans, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
}
.daily-convo-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ws-accent, #C8302C) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-accent, #C8302C) 14%, transparent);
}
.daily-convo-form textarea::placeholder {
  color: var(--ws-muted, #9CA0AB);
  opacity: 1;
}
.daily-convo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 10px;
}
.daily-convo-post {
  background: var(--ws-accent-deep, #9E2420);
  color: var(--ws-on-accent, #fff);
  border: 0;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ws-sans, system-ui, sans-serif);
  min-height: 42px;
}
.daily-convo-post:hover { background: var(--ws-accent, #C8302C); }
.daily-convo-post:disabled {
  opacity: .65;
  cursor: not-allowed;
}
.daily-convo-open {
  color: var(--ws-muted, #9CA0AB);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.daily-convo-open:hover { color: var(--ws-accent, #C8302C); }
.daily-convo-meta {
  margin-left: auto;
  font-family: var(--ws-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ws-muted, #9CA0AB);
}
.daily-convo-thanks {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ws-accent, #C8302C) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ws-accent, #C8302C) 28%, transparent);
}
.daily-convo-thanks[hidden] { display: none !important; }
.daily-convo-thanks p {
  margin: 0 0 8px;
  color: var(--ws-text, #ECEDEF);
  font-size: 14.5px;
  line-height: 1.5;
}
.daily-convo-thanks a {
  color: var(--ws-accent, #C8302C);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.daily-convo-form[hidden] { display: none !important; }
@media (max-width: 767px) {
  .daily-convo-body { grid-template-columns: 1fr; gap: 14px; }
  .daily-convo-media { max-width: 100%; }
  .daily-convo-meta { margin-left: 0; width: 100%; }
  .daily-convo-card { padding: 16px; }
}

/* ========================================================================
   LIVE DESK — story-centered social board (not global chat)
   ======================================================================== */
.live-desk {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.live-card.ed-card {
  display: grid;
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr);
  grid-template-areas:
    "thumb body"
    "strip strip";
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
  padding: 14px 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ws-line, #2A2D34) 55%, transparent);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.live-card.ed-card > .story-media-link { grid-area: thumb; display: block; }
.live-card.ed-card > .ed-card-body {
  grid-area: body;
  padding: 0 !important;
  min-width: 0;
}
.live-card.ed-card > .react-strip {
  grid-area: strip;
  margin-top: 4px !important;
  width: 100%;
}
.live-card .thumb-wrap {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.live-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ws-muted, #9CA0AB);
}
.live-rank {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: #C8302C;
  letter-spacing: 0.04em;
}
.live-heat {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #E8544F;
  white-space: nowrap;
}
.live-breaking-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #C8302C, #E8544F);
  margin-right: 4px;
  vertical-align: middle;
}
.live-home-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}
.live-home-card .live-breaking-pill { margin-right: 6px; }
.live-opinion-actions .discuss-btn {
  font-size: 12px;
  min-height: 36px;
}
.live-empty { max-width: 36rem; margin: 0 auto; }
@media (max-width: 640px) {
  .live-card.ed-card {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 12px;
  }
  .live-card .ed-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }
}