/* ============================================================
   Tech Frontier — Editorial Redesign (v5)
   ============================================================
   Reference: NewsPicks (light premium) × NYT (editorial weight)
              × Bloomberg (data density) × Monocle (paper warmth)
   Mobile-first. Responsive to tablet (640+) and desktop (1024+).
   Preserves every selector contract from assets/app.js.
   ============================================================ */

/* Fonts are loaded from the HTML <head> (preconnect + <link rel=stylesheet>) —
   the old @import here chained HTML → CSS → fonts-CSS → woff2 serially and
   pulled 20 weights. See _gen/prerender.py FONT_LINKS /
   _gen/insert_head_upgrades.py (single source of truth for the font URL). */

/* ─────────────── Tokens ─────────────── */

:root {
  /* Type — Bold Gothic for news headlines, Mincho reserved for editorial quotes */
  --serif:    'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans:     'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --display:  'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Default theme — Editorial Paper White / Light Grey */
  --bg:           #ffffff;
  --bg-2:         #f7f6f3;
  --bg-elev:      #ffffff;
  --bg-card:      #ffffff;
  --bg-overlay:   rgba(255, 255, 255, 0.94);
  --border:       #e2ded4;
  --border-2:     #c8c3b7;
  --text:         #1a1a1a;
  --text-2:       #383430;
  --text-3:       #666056;
  --text-4:       #9e978c;
  --accent:       #b8252b;       /* restrained journalistic red point */
  --accent-soft:  rgba(184, 37, 43, 0.08);
  --accent-ink:   #ffffff;
  --gold:         #7a5a14;
  --navy:         #1a2c4a;
  --success:      #1e7a4d;

  /* Layout — Sharp Japanese news precision */
  --pad:        16px;
  --pad-lg:     24px;
  --pad-xl:     40px;
  --container:  480px;          /* mobile container */
  --radius-sm:  0px;
  --radius:     2px;
  --radius-lg:  4px;

  /* Geo flag colors */
  --geo-CN: #c8302b;
  --geo-US: #1c4d8c;
  --geo-JP: #b8252b;
  --geo-KR: #2a6d54;
  --geo-EU: #3d2e6b;
  --geo-TW: #1a5e8c;

  /* Type sizes (mobile) — restrained font sizes, compact line-height */
  --fs-display: clamp(22px, 5.2vw, 32px);
  --fs-h1:      clamp(19px, 4.2vw, 25px);
  --fs-h2:      17px;
  --fs-h3:      16px;
  --fs-body:    14.5px;
  --fs-small:   13px;
  --fs-meta:    11px;
  --fs-mono:    11px;
}

/* Dark theme — fallback toggle */
[data-theme="dark"] {
  --bg:           #0e0d0b;
  --bg-2:         #15130f;
  --bg-elev:      #1a1814;
  --bg-card:      #161410;
  --bg-overlay:   rgba(14, 13, 11, 0.88);
  --border:       #2a261f;
  --border-2:     #3a342a;
  --text:         #f1ecdf;
  --text-2:       #c4bba6;
  --text-3:       #8a8378;
  --text-4:       #5a544a;
  --accent:       #d04550;
  --accent-soft:  rgba(208, 69, 80, 0.14);
  --accent-ink:   #ffffff;
  --gold:         #d4af37;
  --navy:         #4a85bc;
  --success:      #5cc88a;
}

/* Type size scaling */
@media (min-width: 640px) {
  :root { --fs-body: 15.5px; --fs-h3: 18px; --fs-h2: 22px; }
}
@media (min-width: 1024px) {
  :root {
    --pad: 24px; --pad-lg: 40px; --pad-xl: 72px;
    --fs-display: clamp(44px, 5vw, 68px);
    --fs-h1: clamp(28px, 3.4vw, 40px);
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-body: 16px;
  }
}

/* Font size preference (article reader) */
:root[data-fs="s"] .article-body { font-size: 15px; }
:root[data-fs="m"] .article-body { font-size: 17px; }
:root[data-fs="l"] .article-body { font-size: 19px; }

/* ─────────────── Reset ─────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-feature-settings: "palt", "cv11";
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: 0.005em;
}

a       { color: inherit; text-decoration: none; }
img     { display: block; max-width: 100%; height: auto; }
button  { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol  { list-style: none; }
hr      { border: 0; border-top: 1px solid var(--border); }

/* Selection */
::selection { background: var(--accent); color: var(--accent-ink); }

/* Scrollbar (subtle, only on .app overflows) */
.tabs, .market-ticker, .feed { scrollbar-width: none; }
.tabs::-webkit-scrollbar, .market-ticker::-webkit-scrollbar { display: none; }

/* ─────────────── Shell ─────────────── */

.app {
  max-width: var(--container);
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 80px;
  position: relative;
  background: var(--bg);
}
@media (min-width: 640px) {
  :root { --container: 680px; }
}
@media (min-width: 1024px) {
  :root { --container: 1200px; }
  .app { padding-bottom: 24px; }   /* hide bottom nav on desktop */
}
@media (min-width: 1280px) {
  :root { --container: 1320px; }
}

/* Scanline (kept for backward compat, but invisible — too gamer-y) */
.scanline { display: none; }

/* ─────────────── Topbar ─────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-overlay);
  
  
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--border);
}

/* Market ticker strip — small, monospaced, very subtle */
.market-strip[hidden] { display: none !important; } /* JS hides the strip when /api/market fails; display:flex below would otherwise defeat [hidden] */
.market-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
.market-ticker {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  flex: 1;
  white-space: nowrap;
  /* fade only the trailing edge — a leading fade clipped the "M" of MARKET */
  -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, #000, #000 calc(100% - 48px), transparent);
}
.market-ticker > span:first-child {
  color: var(--accent);
  font-weight: 700;
}
.market-ticker > span:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 10px;
  background: var(--text-4);
  border-radius: 50%;
  vertical-align: 2px;
}
.market-note { color: var(--text-3); white-space: nowrap; font-size: 10px; } /* text-4 was 2.0:1 — unreadable */
.market-ticker .market-label { color: var(--accent); font-weight: 700; }
.market-ticker .mkt-item { color: var(--text-2); }
.market-ticker .mkt-item b { color: var(--text); font-weight: 700; margin-right: 4px; }
.market-ticker .mkt-up { color: #16a34a; font-weight: 700; }   /* green */
.market-ticker .mkt-down { color: #f04040; font-weight: 700; } /* red */
/* WCAG AA at 10.5px demands stronger hues on the light paper background */
[data-theme="light"] .market-ticker .mkt-up { color: #15803d; }
[data-theme="light"] .market-ticker .mkt-down { color: #b91c1c; }

/* Main topbar row */
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 12px;
}
.brand-group {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.brand-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(225, 29, 72, 0.5);
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.brand:hover .brand-avatar {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 0 2px #e11d48, 0 4px 12px rgba(225, 29, 72, 0.35);
}
.article-topbar .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.article-topbar .brand-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.4);
  vertical-align: middle;
}
.brand .jp {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 6px;
  background: var(--accent);
  font-family: var(--sans);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 1px;
  letter-spacing: 0.16em;
  vertical-align: 3px;
}

.topnav {
  display: none;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  min-width: 0;
}
@media (min-width: 900px) {
  .topnav { display: flex; }
}
@media (max-width: 1080px) {
  .topnav { gap: 16px; }
  .topnav a { font-size: 13px; }
}
.topnav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.topnav a:hover { color: var(--text); }
.topnav a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.update-stamp {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  margin-right: 8px;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) { .update-stamp { display: inline; } }

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-2);
  position: relative;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-elev); color: var(--text); }

.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text-3);
  background: transparent;
  transition: border-color .15s, color .15s;
}
.search-pill:hover { border-color: var(--border-2); color: var(--text-2); }
.search-pill > span { display: none; }
.search-pill kbd {
  display: none;
  padding: 1px 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
}
@media (min-width: 1024px) {
  .search-pill { padding: 8px 14px; min-width: 220px; }
  .search-pill > span { display: inline; flex: 1; text-align: left; }
  .search-pill kbd { display: inline; }
}

.pro-top-cta {
  margin-left: 8px;
  padding: 8px 16px;
  background: var(--gold);
  color: #14110d;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  white-space: nowrap;
}
/* ≤639px: topbar can't fit brand + lang pill + theme toggle + CTA — the CTA
   overlapped the wordmark. Hide it; the pro hero repeats the same "Join the
   beta" primary CTA above the fold, so no conversion entry is lost. Also let
   the brand shrink instead of painting under the actions. */
@media (max-width: 639px) {
  .pro-top-cta { display: none; }
  .brand-group { min-width: 0; }
  .brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ─────────────── Tabs (Japanese media underline & square tab style) ─────────────── */

.tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, #000, #000 calc(100% - 40px), transparent);
}
.tab {
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease;
}
.tab:hover {
  color: var(--text);
  border-bottom-color: var(--border-2);
}
.tab.active {
  color: var(--text);
  background: transparent;
  border-bottom-color: var(--accent);
  font-weight: 800;
}

/* ─────────────── Section heads ─────────────── */

.section-head {
  padding: 36px var(--pad) 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  position: relative;
}
.section-head::after {
  content: '';
  position: absolute;
  left: var(--pad);
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: var(--accent);
}
.section-head.compact { padding-top: 24px; }
.section-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.section-head p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 400;
}
.section-head .meta {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1.5;
}
.section-head .meta b { color: var(--text-2); font-weight: 600; }
@media (min-width: 1024px) {
  .section-head { padding: 56px var(--pad) 20px; margin-bottom: 28px; }
  .section-head h2 { font-size: 28px; }
}

.section-kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  white-space: nowrap;
}

/* ─────────────── Lead Hero ─────────────── */

.lead-hero {
  padding: 28px var(--pad) 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lead-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-2);
}
.lead-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform .4s ease;
}
.lead-media:hover img { transform: scale(1.02); }
.lead-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(14, 13, 11, 0.88);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-left: 2px solid var(--accent);
  white-space: nowrap;
}
.lead-media-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 16px 14px;
  background: linear-gradient(to top, rgba(14,13,11,0.92), transparent);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lead-media-panel b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.lead-media-panel span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
}

.lead-copy { display: flex; flex-direction: column; gap: 18px; }
.hero-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.lead-hero h1 {
  font-family: var(--sans);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}
.lead-hero h1 a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}
.lead-hero h1 a:hover {
  color: var(--accent);
}
.hero-sub {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-2);
  font-weight: 400;
}
@media (min-width: 640px)  { .hero-sub { font-size: 17px; } }
@media (min-width: 1024px) { .hero-sub { font-size: 19px; max-width: 640px; } }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.primary-cta,
.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
  cursor: pointer;
  white-space: nowrap;
}
.primary-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.primary-cta:hover { transform: translateY(-1px); }
.secondary-cta {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
}
.secondary-cta:hover { border-color: var(--text); }

@media (max-width: 600px) {
  .lead-hero {
    overflow: hidden;
  }
  .lead-copy,
  .lead-hero h1,
  .hero-sub {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .lead-hero h1 {
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: 1.16;
    letter-spacing: 0;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .primary-cta,
  .secondary-cta {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding-inline: 16px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.hero-meta span {
  position: relative;
  padding-right: 14px;
  white-space: nowrap;
}
.hero-meta span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 3px; height: 3px;
  background: var(--text-4);
  border-radius: 50%;
  transform: translateY(-50%);
}

.hero-value-row {
  display: flex;
  gap: 0;
  margin-top: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hero-value-row > span {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
}
.hero-value-row > span + span::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border);
}
.hero-value-row b {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.lead-story {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
}
.lead-story span {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 2px;
}
.lead-story a {
  flex: 1;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}
.lead-story a:hover { color: var(--accent); }

.summary-panel {
  padding: 18px 18px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.summary-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.summary-panel ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-panel li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  padding-left: 22px;
  position: relative;
}
.summary-panel li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 1px;
  background: var(--accent);
}

.source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-size: 11px;
  color: var(--text-3);
}
.source-row > span {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.source-row b {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 2px 8px;
  background: var(--bg-2);
  border-radius: 2px;
}

/* Desktop lead hero: side-by-side */
@media (min-width: 1024px) {
  .lead-hero {
    padding: 48px var(--pad) 56px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .lead-media img { aspect-ratio: 4 / 5; }
}

/* ─────────────── Trust strip ─────────────── */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 14px var(--pad);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.trust-strip > span {
  text-align: center;
  position: relative;
  line-height: 1.4;
}
.trust-strip > span + span::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px;
  background: var(--border);
}
@media(max-width:639px){.trust-strip{grid-template-columns:repeat(2,1fr);}}
.trust-strip b {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-right: 4px;
}

/* ─────────────── Reading lanes ─────────────── */

.reading-lanes { padding: 0 0 24px; }
.reader-shortcut {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--pad) 18px;
  padding: 12px 14px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border-left: 2px solid var(--accent);
}
.reader-shortcut > span { color: var(--text-3); }
.reader-shortcut b {
  font-family: var(--sans);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
}
.reader-shortcut i {
  width: 12px; height: 1px;
  background: var(--text-4);
  display: inline-block;
}

.lane-grid {
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (min-width: 640px) { .lane-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .lane-grid { grid-template-columns: repeat(6, 1fr); }
}

.reader-lane {
  background: var(--bg);
  padding: 18px 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: background .15s;
  min-height: 152px;
  position: relative;
}
.reader-lane:hover { background: var(--bg-2); }
.reader-lane > span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
}
.reader-lane > b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.3;
}
.reader-lane > p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  font-weight: 400;
}
.reader-lane > em {
  margin-top: auto;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.reader-lane > small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
  font-style: italic;
  margin-top: 4px;
}

/* ─────────────── Brief panels (morning + impact) ─────────────── */

.brief-panels {
  padding: 24px var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1024px) { .brief-panels { grid-template-columns: 1.5fr 1fr; gap: 24px; } }

.brief-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brief-card.morning { border-top: 3px solid var(--accent); }
.brief-card.impact  { border-top: 3px solid var(--navy); }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.panel-head span {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.panel-head b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  white-space: nowrap;
}
.brief-card.impact .panel-head b { color: var(--navy); }

.brief-card.morning ol { display: flex; flex-direction: column; gap: 12px; counter-reset: brf; }
.brief-card.morning li {
  position: relative;
  padding-left: 28px;
}
.brief-card.morning li a {
  display: block;
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  padding: 8px 0;
  transition: color .15s;
}
.brief-card.morning li a:hover { color: var(--accent); }
.brief-card.morning li span {
  position: absolute;
  left: 0; top: 1px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.brief-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-3);
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.quiet-action {
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.quiet-action:hover { color: var(--text); border-color: var(--border-2); }

.brief-card.impact ol { display: flex; flex-direction: column; gap: 0; }
.brief-card.impact li {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.brief-card.impact li:last-child { border-bottom: 0; }
.rank-num {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 900;
  color: var(--text-3); /* was text-4: 2.0:1 contrast, failed WCAG AA */
  letter-spacing: -0.02em;
  line-height: 1;
}
.brief-card.impact li b {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: flex-end;
  line-height: 1.2;
}
.brief-card.impact li em {
  grid-row: 2;
  grid-column: 2;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.brief-card.impact li strong {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: var(--bg-2);
  padding: 4px 9px;
  border-radius: 2px;
  white-space: nowrap;
}

/* ─────────────── Feed ─────────────── */

.feed-head { margin-top: 8px; }

.feed {
  padding: 0 var(--pad) 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feed-guide {
  margin: 0 calc(var(--pad) * -1);
  padding: 16px var(--pad);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 16px;
}
.feed-guide span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.feed-guide b {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.feed-guide p {
  flex-basis: 100%;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

.date-divider {
  padding: 16px 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Article cards */
.card {
  position: relative;
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
  margin-bottom: 14px;
}
.card:hover { border-color: var(--border-2); }
.card:active { transform: scale(0.998); }

.card-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  overflow: hidden;
}
.card-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
  transition: transform .3s ease;
}
.card:hover .card-hero img { transform: scale(1.03); }

.card-hero .badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: rgba(14, 13, 11, 0.88);
  color: #fff;
  border-radius: 1px;
  
  white-space: nowrap;
}
.card-hero .region-flag {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 5px 9px 4px;
  background: rgba(14, 13, 11, 0.88);
  color: #fff;
  border-bottom: 2px solid var(--flag-color, #888);
  
}
.region-CN { --flag-color: var(--geo-CN); }
.region-US { --flag-color: var(--geo-US); }
.region-JP { --flag-color: var(--geo-JP); }
.region-KR { --flag-color: var(--geo-KR); }
.region-EU { --flag-color: var(--geo-EU); }
.region-TW { --flag-color: var(--geo-TW); }
/* Backward compat for old beat tags */
.card-hero .badge.beat-semi,
.card-hero .badge.beat-ev,
.card-hero .badge.beat-chip,
.card-hero .badge.beat-supply { background: rgba(14, 13, 11, 0.88); color: #fff; }

.card-body { padding: 16px 16px 14px; }
.card-worktags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.card-worktags span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  background: var(--bg-2);
  color: var(--text-3);
  border-radius: 1px;
  white-space: nowrap;
}
.card-worktags span:first-child {
  background: var(--accent-soft);
  color: var(--accent);
}

.card h3 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 8px;
}
.card .summary {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.card-trust span:first-child {
  padding: 2px 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 1px;
  white-space: nowrap;
}
.card-trust span:not(:first-child),
.card-trust a { white-space: nowrap; }

.card-decision {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
}
.card-decision span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.card-decision b {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
}
.card-meta > span { white-space: nowrap; }
.card-meta .card-meta-dot { color: var(--text-4); }
.card-meta .tag { color: var(--text-2); }
.card-meta .read-time { margin-left: auto; }
.card-meta .read-time::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") center/contain no-repeat;
  vertical-align: -1.5px;
}
/* Bookmark: a positioned sibling of the card link (never nested inside <a>),
   44px minimum target size (WCAG 2.5.8; the old 28px inline button failed). */
.card-wrap { position: relative; }
.card-wrap .card { margin-bottom: 0; }
.card-wrap { margin-bottom: 14px; }
.card-wrap .card-meta { padding-right: 44px; }
.card-bookmark {
  position: absolute;
  bottom: 6px; right: 6px;
  z-index: 3;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  transition: color .15s, background .15s, transform .15s;
}
.card-bookmark:hover { color: var(--accent); background: var(--bg-2); transform: translateY(-1px); }
.card-bookmark:active { transform: scale(0.94); }
.card-bookmark.is-saved {
  color: var(--accent);
}
.card-bookmark.is-saved svg { fill: var(--accent); }

/* Image credit */
.image-credit {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text-3); /* was text-4 — under 3:1, unreadable */
}
.image-credit--card {
  position: absolute;
  bottom: 6px;
  right: 8px;
  z-index: 2;
  padding: 2px 6px;
  background: rgba(14,13,11,0.7);
  color: rgba(255,255,255,0.78);
  border-radius: 1px;
  /* belt & braces: even an uncleaned credit can never wallpaper the image */
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image-credit--article {
  margin: 8px var(--pad) 0;
  padding-top: 6px;
  color: var(--text-3);
  font-style: italic;
}
/* alias for hero attribution caption (CC requirement) */
.hero-credit,
figcaption.hero-credit {
  display: block;
  margin: 8px var(--pad) 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  font-style: italic;
  color: var(--text-3);
}


/* Newsletter CTA inside feed */
.nl-cta {
  margin: 16px 0;
  padding: 24px 20px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
}
.nl-cta-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.nl-cta h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
}
.nl-cta > p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 16px;
}
.nl-cta-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nl-cta-form input[type="email"] {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.nl-cta-form input[type="email"]:focus { border-color: var(--accent); }
.nl-cta-form button {
  padding: 13px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nl-cta-form button:hover { filter: brightness(0.92); }
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.nl-mailto {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nl-cta-note {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.6;
}
@media (min-width: 640px) {
  .nl-cta-form { flex-direction: row; align-items: stretch; }
  .nl-cta-form input[type="email"] { flex: 1; }
  .nl-cta-form button { white-space: nowrap; padding: 0 22px; }
}

/* ─────────────── Category digest ─────────────── */

.category-digest { padding: 0 var(--pad) 32px; }
.digest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 16px;
}
@media (min-width: 640px)  { .digest-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .digest-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

.digest-col {
  padding: 16px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) {
  .digest-col { border-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
}
.digest-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent);
  align-self: flex-start;
}
.digest-col > a:not(.digest-title) {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px dotted var(--border);
}
.digest-col > a:not(.digest-title):last-child { border-bottom: 0; }
.digest-col > a:hover { color: var(--accent); }

/* ─────────────── Market angle (why we exist) ─────────────── */

.market-angle {
  padding: 40px var(--pad);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .market-angle {
    padding: 64px var(--pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
}
.market-angle-copy h2 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 12px 0 16px;
}
.market-angle-copy p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-2);
  margin-bottom: 22px;
}

.edge-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .edge-compare { grid-template-columns: 1fr 1fr; }
}
.edge-compare > div {
  padding: 18px 18px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edge-compare > div b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.edge-compare > div span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
}
.edge-compare > div span::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 1px;
  background: var(--text-4);
}
.edge-compare .is-tf { border-color: var(--accent); }
.edge-compare .is-tf b { color: var(--accent); }
.edge-compare .is-tf span::before { background: var(--accent); }

/* ─────────────── Audience grid ─────────────── */

.audience-grid {
  padding: 40px var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } }
.audience-grid article {
  padding: 22px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audience-grid article span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.audience-grid article b {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.audience-grid article p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}

/* ─────────────── Insight PRO teaser ─────────────── */

.insight-pro {
  padding: 40px var(--pad);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .insight-pro {
    display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: center;
    padding: 56px var(--pad);
  }
}
.insight-pro h2 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 10px 0 14px;
}
.insight-pro p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-2);
}
.outline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 13px 24px;
  border: 1px solid var(--border-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  border-radius: 4px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.outline-link:hover { background: var(--text); color: var(--bg); }
.outline-link::after { content: '→'; }

/* ─────────────── PRO benefits (homepage strip) ─────────────── */

.pro-benefits {
  padding: 32px var(--pad) 48px;
  border-top: 1px solid var(--border);
}
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media (min-width: 640px) { .benefit-grid { grid-template-columns: repeat(4, 1fr); } }
.benefit-grid > div {
  padding: 16px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.benefit-grid > div b {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.benefit-grid > div span {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.pro-inline-cta {
  align-self: flex-start;
  display: inline-flex;
  margin-top: 8px;
}

/* ─────────────── Footer ─────────────── */

.footer {
  padding: 40px var(--pad) 32px;
  border-top: 4px solid var(--accent);
  background: var(--bg);
}
.footer > p:first-child {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}
.footer > p:first-child b {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 18px;
}
.footer-links a {
  font-size: 12.5px;
  color: var(--text-2);
  padding: 4px 0;
}
.footer-links a:hover { color: var(--accent); }
.footer-small {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* ─────────────── Bottom nav (mobile only) ─────────────── */

.botnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  background: var(--bg-overlay);
  
  
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .botnav { display: none; } }

.botnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  transition: color .15s;
}
.botnav-item svg { width: 20px; height: 20px; }
.botnav-item.active { color: var(--accent); }

/* ─────────────── Article page ─────────────── */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 100;
  transition: width .1s ease-out;
}

.article-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  background: var(--bg-overlay);
  
  
  border-bottom: 1px solid var(--border);
}
.article-topbar .back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.article-topbar .actions {
  display: flex;
  gap: 4px;
}

.article-figure {
  margin: 0 0 24px;
}
.article-hero {
  position: relative;
  width: 100%;
  max-width: 720px;            /* mobile / tablet cap */
  margin: 0 auto 4px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: 6px;
}
.article-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}
@media (min-width: 1024px) {
  .article-hero {
    max-width: 800px;          /* desktop — was full-width 21:9, now constrained */
    aspect-ratio: 16 / 9;      /* was 21:9 (too short/wide on big screens) */
  }
}
@media (min-width: 1280px) {
  .article-hero { max-width: 860px; }
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 var(--pad);
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.tag-pill {
  display: inline-block;
  padding: 4px 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 1px;
}
.tag-pill.loc {
  background: var(--bg-2);
  color: var(--text-2);
}
.article-tags .region-flag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 9px;
  background: var(--text);
  color: var(--bg);
  border-bottom: 2px solid var(--flag-color, var(--text));
}
.article-tags .date {
  margin-left: auto;
}

.article-title {
  padding: 0 var(--pad);
  font-family: var(--serif);
  font-size: clamp(26px, 5.6vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--text);
  margin-bottom: 18px;
}
@media (min-width: 1024px) {
  .article-title {
    font-size: clamp(36px, 4vw, 52px);
    max-width: 920px;
    margin-left: auto; margin-right: auto;
  }
  .article-figure, .article-tags { max-width: 1080px; margin-left: auto; margin-right: auto; }
}

.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.article-byline b {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}
.article-byline .dot {
  width: 3px; height: 3px;
  background: var(--text-4);
  border-radius: 50%;
}
.article-byline a { color: var(--text-2); border-bottom: 1px dotted var(--text-3); }

.article-trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px var(--pad);
  margin: 0 var(--pad) 24px;
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.article-trustbar span {
  padding-right: 12px;
  position: relative;
}
.article-trustbar span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 3px;
  background: var(--text-4);
  border-radius: 50%;
}
.article-trustbar span:first-child {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.tldr {
  margin: 0 var(--pad) 28px;
  padding: 22px 22px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
}
.tldr-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.tldr ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tldr li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  padding-left: 24px;
  position: relative;
}
.tldr li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 14px; height: 1px;
  background: var(--accent);
}
@media (min-width: 1024px) {
  .tldr { max-width: 920px; margin-left: auto; margin-right: auto; }
  .tldr li { font-size: 16.5px; }
}

.article-ai-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--pad);
  margin-bottom: 20px;
}
.article-ai-tools button {
  padding: 9px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.article-ai-tools button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.meeting-memo {
  margin: 0 var(--pad) 28px;
  padding: 18px 20px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}
.meeting-memo p {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
@media (min-width: 1024px) {
  .meeting-memo { max-width: 920px; margin-left: auto; margin-right: auto; }
}

.simple-summary {
  margin: 0 var(--pad) 28px;
  padding: 22px 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
}
.simple-summary h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.simple-summary p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-2);
  margin-bottom: 14px;
}
.simple-summary ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.simple-summary li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  padding-left: 20px;
  position: relative;
}
.simple-summary li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 1px;
  background: var(--navy);
}

/* Article body prose */
.article-body {
  padding: 0 var(--pad) 32px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.95;
  color: var(--text);
  letter-spacing: 0.005em;
}
@media (min-width: 1024px) {
  .article-body {
    max-width: 720px;
    margin-left: auto; margin-right: auto;
    font-size: 18px;
    line-height: 2;
  }
}
.article-body > * + * { margin-top: 1.2em; }
.article-body p { margin: 0; }
.article-body h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: var(--text);
}
.article-body h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}
.article-body strong { font-weight: 700; }
.article-body em { font-style: italic; }
.article-body a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color .15s;
}
.article-body a:hover { border-bottom-color: var(--accent); }
:root:not([data-theme='light']) .article-body a{color:#e04860;}
.article-body a:visited{color:var(--navy);}
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 1em 0; }
.article-body ul li, .article-body ol li {
  margin-bottom: 0.5em;
  list-style: disc;
}
.article-body ol li { list-style: decimal; }
.article-body blockquote {
  margin: 1.5em 0;
  padding: 18px 22px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 1.05em;
  color: var(--text);
}
.article-body code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 2px 6px;
  background: var(--bg-2);
  border-radius: 2px;
}
.article-body img {
  margin: 1.5em 0;
  width: 100%;
  border-radius: var(--radius-sm);
}
.article-body table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: 14px;
}
.article-body th, .article-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.article-body th {
  font-family: var(--sans);
  font-weight: 700;
  background: var(--bg-2);
}

.article-weakness {
  margin: 32px var(--pad) 32px;
  padding: 20px 20px 18px;
  background: var(--bg-2);
  border-top: 2px solid var(--text-4);
}
.article-weakness .tldr-label { color: var(--text-2); }
.article-weakness p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
  margin-top: 8px;
}
.article-weakness a { color: var(--accent); border-bottom: 1px dotted var(--accent); }
@media (min-width: 1024px) {
  .article-weakness { max-width: 920px; margin-left: auto; margin-right: auto; }
}

/* Article bottom action bar (mobile) */
.article-actions {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  background: var(--bg-overlay);
  
  
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .article-actions { display: none; } }
.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 0 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  transition: color .15s;
}
.action-item svg { width: 20px; height: 20px; }
.action-item:hover { color: var(--accent); }
.action-item.is-saved { color: var(--accent); }

/* ─────────────── Subscribe page ─────────────── */

.subscribe-page {
  padding: 0;
}
.subscribe-hero {
  padding: 56px var(--pad) 32px;
  text-align: center;
}
.subscribe-hero h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin: 12px auto 18px;
  max-width: 720px;
}
.subscribe-hero p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .subscribe-hero { padding: 96px var(--pad) 48px; }
  .subscribe-hero p { font-size: 18px; }
}

.lead-capture-panel {
  margin: 32px var(--pad);
  padding: 32px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
}
@media (min-width: 1024px) {
  .lead-capture-panel {
    max-width: 720px;
    margin: 32px auto;
    padding: 48px 56px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.lead-capture-panel h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 8px 0 12px;
}
.lead-capture-panel > div > p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
}
.lead-form-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-form label span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lead-form input,
.lead-form select {
  padding: 13px 14px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  outline: none;
  transition: border-color .15s;
}
.lead-form input:focus,
.lead-form select:focus { border-color: var(--accent); }
.lead-form button[type="submit"] {
  margin-top: 8px;
  padding: 15px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  cursor: pointer;
  transition: filter .15s;
}
.lead-form button[type="submit"]:hover { filter: brightness(0.92); }
.lead-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.lead-status {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  text-align: center;
}
.lead-form.is-success .lead-status { color: var(--success); }

.conversion-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 32px var(--pad);
  padding: 24px 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .conversion-proof { max-width: 720px; margin: 32px auto; }
}
.conversion-proof article {
  text-align: center;
  position: relative;
  padding: 0 12px;
}
.conversion-proof article + article::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.conversion-proof b {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
@media(max-width:639px){.conversion-proof{grid-template-columns:1fr;gap:12px;} .conversion-proof article+article::before{display:none;}}
.conversion-proof span {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}

.policy-panel {
  padding: 32px var(--pad);
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.policy-panel h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 10px 0 12px;
}
.policy-panel p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-2);
}
.policy-panel p + p { margin-top: 14px; }
.policy-panel a { color: var(--accent); border-bottom: 1px dotted var(--accent); }
@media (min-width: 1024px) {
  .policy-panel { max-width: 800px; margin: 0 auto; padding: 48px 24px; }
}

/* ─────────────── PRO page ─────────────── */

.pro-page { padding: 0; }
.pro-hero {
  padding: 56px var(--pad) 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px) {
  .pro-hero {
    padding: 96px var(--pad) 64px;
    grid-template-columns: 1.5fr 1fr;
    gap: 56px;
    align-items: center;
  }
}
.pro-hero h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
}
.pro-hero p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-2);
  margin-bottom: 24px;
}
@media (min-width: 1024px) { .pro-hero p { font-size: 18px; } }

.pro-price-panel {
  padding: 32px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--gold);
  border-top: 4px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pro-price-panel > span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.pro-price-panel b {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  margin-top: 6px;
}
.pro-price-panel em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.pro-price-panel p {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.pro-proof-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 14px 0;
  margin: 0 var(--pad);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .pro-proof-strip { grid-template-columns: repeat(4, 1fr); } }
.pro-proof-strip span {
  text-align: center;
  padding: 4px 8px;
  border-right: 1px solid var(--border);
}
.pro-proof-strip span:last-child { border-right: 0; }
.pro-proof-strip b {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--accent);
  margin-right: 6px;
}

.pro-feature-grid {
  padding: 56px var(--pad) 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px)  { .pro-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pro-feature-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.pro-feature-grid article {
  padding: 24px 20px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pro-feature-grid article > span {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pro-feature-grid article h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.pro-feature-grid article p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}

.pro-compare {
  padding: 32px var(--pad) 48px;
}
@media (min-width: 1024px) {
  .pro-compare {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: center;
    padding: 56px var(--pad);
  }
}
.pro-compare > div h2 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 10px 0 16px;
}
.pro-compare > div p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-2);
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}
@media (min-width: 640px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
.plan-grid article {
  padding: 28px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-grid article.is-pro {
  background: var(--bg-2);
  border-color: var(--gold);
  border-top: 4px solid var(--gold);
}
.plan-grid article > b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.plan-grid article.is-pro > b { color: var(--gold); }
.plan-grid article strong {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 4px;
}
.plan-grid article span {
  font-size: 13px;
  color: var(--text-2);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.plan-grid article span::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.plan-grid article.is-pro span::before { color: var(--gold); }
.plan-grid article > a {
  margin-top: 12px;
  align-self: flex-start;
  padding: 13px 22px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
  white-space: nowrap;
}
.plan-grid article.is-pro > a {
  background: var(--gold);
  border-color: var(--gold);
  color: #14110d;
}
.plan-grid article > a:hover { transform: translateY(-1px); }

/* ─────────────── About page ─────────────── */

.hero-block {
  padding: 48px var(--pad) 24px;
  text-align: center;
}
.hero-block h1 {
  font-family: var(--serif);
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin-bottom: 16px;
}
.hero-block p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 540px;
  margin: 0 auto;
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--pad);
  max-width: 480px;
  margin: 0 auto 16px;
  position: relative;
}
@media (min-width: 480px) {
  .subscribe-form { flex-direction: row; align-items: stretch; }
}
.subscribe-form input[type="email"] {
  flex: 1;
  padding: 13px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
}
.subscribe-form button {
  padding: 13px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.subscribe-form .lead-status {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: -28px;
  text-align: center;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 32px var(--pad);
  padding: 20px 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.kpi {
  text-align: center;
  position: relative;
  padding: 0 12px;
}
.kpi + .kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.kpi-num {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feature-list {
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.feature-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.feature-list li:last-child { border-bottom: 0; }
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 900;
  border-radius: 50%;
}
.feature-text h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.feature-text p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
}

/* ─────────────── Toast ─────────────── */

.tf-toast {
  position: fixed;
  bottom: 90px; left: 50%;
  z-index: 200;
  padding: 12px 22px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.tf-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1024px) {
  .tf-toast { bottom: 32px; }
}

/* ─────────────── Search overlay ─────────────── */

.tf-search {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(14, 13, 11, 0.75);
  
  
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
[data-theme="light"] .tf-search { background: rgba(250, 248, 243, 0.85); }
.tf-search.open { opacity: 1; pointer-events: auto; }
.tf-search-inner {
  width: 100%;
  max-width: 720px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
}
.tf-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.tf-search-bar input {
  flex: 1;
  font-family: var(--serif);
  font-size: 18px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
}
.tf-search-bar input::placeholder { color: var(--text-3); }
.tf-search-close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 22px;
  line-height: 1;
}
.tf-search-close:hover { background: var(--bg-2); color: var(--text); }
.tf-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.tf-search-hint,
.tf-search-count {
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.tf-search-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.tf-search-item:hover { background: var(--bg-2); }
.tf-search-item img {
  width: 72px; height: 50px;
  object-fit: cover;
  border-radius: 2px;
  filter: saturate(0.9);
}
.tf-search-item h4 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 4px 0 6px;
}
.tf-search-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.tf-search-date {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────── v6 polish: card hover, icon system, archive, mobile ───────────────
   Added 2026-05-29 per Grok roadmap. Strictly additive — does not remove or
   override existing rules. Class names are scoped (.icon-svg, .archive-*).
*/

/* Inline SVG icons used in reader-lane / category headers / archive filter chips */
.icon-svg {
  display: inline-block;
  width: 16px; height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  vertical-align: -2px;
}
.reader-lane .icon-svg {
  width: 18px; height: 18px;
  color: var(--accent);
  margin-bottom: 2px;
}
.cat-hero h1 .icon-svg {
  width: 26px; height: 26px;
  margin-right: 8px;
  color: var(--accent);
  vertical-align: -4px;
}

/* Article card refinement: subtle elevation on hover, smoother transition */
.card {
  transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(14, 13, 11, 0.18), 0 2px 6px -2px rgba(14, 13, 11, 0.08);
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.55), 0 2px 8px -3px rgba(0, 0, 0, 0.35);
}

/* Reading-lane buttons: shadow on hover for depth (existing :hover only swapped bg) */
.reader-lane {
  transition: background .15s ease, transform .15s ease, box-shadow .25s ease, border-color .15s ease;
}
.reader-lane:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -8px rgba(14, 13, 11, 0.18);
}
.reader-lane > b .icon-svg {
  margin-right: 6px;
  color: var(--accent);
  vertical-align: -3px;
}

/* Topnav archive link (no visual change, just keep parity with siblings) */
.topnav .archive-link.active { color: var(--text); }

/* ─────────────── Archive page (/archive.html) ─────────────── */

.cat-hero{padding:24px var(--pad) 16px;border-bottom:1px solid var(--border);}
.cat-hero h1{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-0.01em;color:var(--text);margin:6px 0;}
.cat-count{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;}
@media(min-width:1024px){
  .cat-hero{padding:48px var(--pad) 24px;}
  .cat-hero h1{font-size:36px;}
}
.archive-hero {
  padding: 32px var(--pad) 18px;
  border-bottom: 1px solid var(--border);
}
.archive-hero h1 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
}
.archive-hero p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
.archive-hero .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-top: 8px;
}
.archive-hero .meta b { color: var(--accent); font-weight: 700; }

@media (min-width: 1024px) {
  .archive-hero { padding: 56px var(--pad) 24px; }
  .archive-hero h1 { font-size: 38px; }
  .archive-hero p { font-size: 15px; }
}

.archive-filters {
  padding: 18px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.archive-filter-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.archive-filter-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.archive-filter-label .icon-svg { width: 13px; height: 13px; color: var(--text-3); }
.archive-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.archive-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.archive-chip .icon-svg {
  width: 13px; height: 13px;
  color: var(--text-3);
}
.archive-chip:hover {
  border-color: var(--border-2);
  color: var(--text);
}
.archive-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.archive-chip.active .icon-svg { color: var(--accent-ink); }

.archive-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color .15s ease;
}
.archive-search-row:focus-within { border-color: var(--accent); }
.archive-search-row .icon-svg { color: var(--text-3); }
.archive-search-row input {
  flex: 1;
  font-family: var(--sans);
  font-size: 14px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  padding: 4px 0;
}
.archive-search-row input::placeholder { color: var(--text-3); }

.archive-result-count {
  padding: 14px var(--pad) 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-align: right;
}
.archive-result-count b { color: var(--accent); font-weight: 700; }

.archive-grid {
  padding: 16px var(--pad) 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
  .archive-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .archive-filters { padding: 24px var(--pad); }
}

.archive-empty {
  padding: 60px var(--pad);
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.7;
}
.archive-empty b { color: var(--text); display: block; margin-bottom: 6px; font-size: 16px; }

/* ─────────────── Mobile polish (≤640px) ───────────────
   Tighter spacing, slightly smaller fonts, brief-card padding cut, ensure
   horizontal-scroll tabs feel intentional on small screens.
*/
@media (max-width: 640px) {
  .tabs {
    padding: 10px 4px 12px;
    gap: 5px;
  }
  .tab {
    padding: 6px 11px;
    font-size: 12px;
  }
  .brief-card {
    padding: 18px 16px 16px;
    gap: 12px;
  }
  .brief-card.morning li a { font-size: 13.5px; line-height: 1.5; }
  .panel-head span { font-size: 15px; }

  /* Reading-lane: tighter padding on phones */
  .reader-lane {
    padding: 14px 12px 12px;
    min-height: 134px;
    gap: 6px;
  }
  .reader-lane > b { font-size: 16px; }
  .reader-lane > p { font-size: 11.5px; line-height: 1.5; }

  /* Article card: slightly tighter body padding so 2-up on phablet fits */
  .card-body { padding: 14px 14px 12px; }
  .card h3 { font-size: 16px; line-height: 1.35; }
  .card .summary { font-size: 13px; line-height: 1.6; }
  .card-decision { padding: 8px 10px; }
  .card-decision b { font-size: 12px; }
  .card-meta { font-size: 10.5px; gap: 6px; }

  /* Section-head tighter; wrap so the .meta note can't push past the viewport */
  .section-head { padding: 28px var(--pad) 14px; flex-wrap: wrap; }
  .section-head .meta { flex-shrink: 1; text-align: left; }

  /* Brand badge overlaps the injected language pill on narrow screens —
     hide the decorative GLOBAL/日本版 tag so the topbar fits. */
  .brand .jp { display: none; }
  .section-head h2 { font-size: 20px; }
  .section-head p { font-size: 12.5px; }

  /* Archive filter chips wrap nicely */
  .archive-chip { padding: 0 10px; font-size: 12px; }
  .archive-hero { padding: 24px var(--pad) 16px; }
}

/* ──────────────────────────────────────────────────────────
   UX accessibility additions (2026-05-29 fulltest round 2)
   - skip-to-content link (hidden until focused)
   - tap-target min-height 44px (Apple HIG / Material 48px)
   - tf-search-title resets former h4 inline appearance
   ────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tap-target enforcement — 44×44 minimum (WCAG 2.5.5 AAA) */
.icon-btn { min-width: 44px; min-height: 44px; }
.search-pill { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.reader-tabs .tab, .tabs .tab { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.quiet-action { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; }
.tf-search-close { min-width: 44px; min-height: 44px; }

/* tf-search-title — visual identical to old h4 inside search results */
.tf-search-title {
  margin: 4px 0 6px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--serif);
  line-height: 1.4;
  color: var(--text);
}

/* Screen-reader-only utility for form labels (UX/UI fulltest UI baseline) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   Mobile fix (2026-05-29): brand 不被截断 + breadcrumb 不溢出
   ────────────────────────────────────────────────────────── */
.article-topbar {
  padding-left: 12px !important;
  padding-right: 12px !important;
  gap: 8px;
  min-height: 48px;
}
.article-topbar .back {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-topbar .back svg {
  flex-shrink: 0;
}
.article-topbar .actions {
  flex-shrink: 0;
}

/* breadcrumb: respect padding + allow horizontal scroll on overflow rather than bleeding */
.breadcrumb {
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }

@media (max-width: 640px) {
  .article-topbar .back {
    font-size: 15px;
  }
  .article-topbar .back svg {
    width: 18px;
    height: 18px;
  }
  .breadcrumb {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
  }
  /* breadcrumb 文本 max 2 行而不是单行 nowrap */
  .breadcrumb {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
  }
}

.region-flag:empty{display:none!important}

/* ===================== Language switcher (9-lang dropdown) ===================== */
.lang-switch{position:relative;display:inline-flex;align-items:center;margin-right:10px;vertical-align:middle}
.lang-switch-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:999px;padding:5px 10px 5px 9px;color:var(--text-2);font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:border-color .15s,color .15s,background .15s;line-height:1}
.lang-switch-btn:hover{color:var(--text);border-color:var(--border-2);background:var(--bg-elev)}
.lang-switch-btn svg{flex:0 0 auto;opacity:.85}
.lang-switch-cur{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-switch-caret{transition:transform .18s ease}
.lang-switch-btn[aria-expanded="true"] .lang-switch-caret{transform:rotate(180deg)}
.lang-switch-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:184px;max-height:70vh;overflow-y:auto;background:var(--bg-card,#161410);border:1px solid var(--border-2);border-radius:14px;padding:6px;box-shadow:0 18px 48px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.3);z-index:1200;display:flex;flex-direction:column;gap:1px;animation:lang-pop .16s cubic-bezier(.2,.8,.2,1)}
@keyframes lang-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:9px;color:var(--text-2);text-decoration:none;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.005em;transition:background .13s,color .13s;white-space:nowrap}
.lang-opt:hover{background:var(--accent-soft);color:var(--text)}
.lang-opt.is-current{color:var(--accent);font-weight:800}
.lang-opt-check{font-size:12px;font-weight:800;color:var(--accent)}
.lang-opt-ext{border-top:1px solid var(--border);margin-top:5px;padding-top:11px;color:var(--text-3)}
.lang-opt-ext:hover{color:var(--text)}
.lang-opt-ext-icon{font-size:12px;opacity:.6}
@media(max-width:639px){.lang-switch-cur{max-width:72px}.lang-switch-btn{padding:5px 8px;font-size:12px}.lang-switch-menu{right:0;min-width:170px}}

/* ===================== Soft geo banner ===================== */
.tf-geo-banner{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 28px);background:var(--bg-card,#161410);border:1px solid var(--border-2);border-radius:14px;padding:11px 12px 11px 18px;box-shadow:0 18px 48px -12px rgba(0,0,0,.62),0 2px 10px rgba(0,0,0,.34);z-index:1300;opacity:0;transition:transform .34s cubic-bezier(.2,.85,.25,1),opacity .34s ease}
.tf-geo-banner.tf-geo-in{transform:translateX(-50%);opacity:1}
.tf-geo-banner.tf-geo-hide{transform:translate(-50%,140%);opacity:0}
.tf-geo-text{color:var(--text-2);font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.005em;line-height:1.3}
.tf-geo-text b{color:var(--text);font-weight:800}
.tf-geo-yes{flex:0 0 auto;background:var(--accent);color:var(--accent-ink,#fff);text-decoration:none;font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.02em;padding:8px 16px;border-radius:999px;transition:filter .15s}
.tf-geo-yes:hover{filter:brightness(1.08)}
.tf-geo-dismiss{flex:0 0 auto;background:transparent;border:none;color:var(--text-3);font-size:21px;line-height:1;width:30px;height:30px;border-radius:8px;cursor:pointer;transition:color .15s,background .15s}
.tf-geo-dismiss:hover{color:var(--text);background:var(--bg-elev)}
@media(max-width:639px){.tf-geo-banner{left:14px;right:14px;bottom:14px;transform:translateY(140%);gap:10px;padding:11px 10px 11px 15px}.tf-geo-banner.tf-geo-in{transform:none}.tf-geo-banner.tf-geo-hide{transform:translateY(140%)}.tf-geo-text{font-size:13px}}

/* ===================== RTL (Arabic) ===================== */
[dir="rtl"]{direction:rtl}
[dir="rtl"] body,[dir="rtl"] .app{text-align:right}
[dir="rtl"] .topbar-row,[dir="rtl"] .brand-group,[dir="rtl"] .topbar-actions,[dir="rtl"] .hero-actions,[dir="rtl"] .card-meta,[dir="rtl"] .card-worktags,[dir="rtl"] .panel-head,[dir="rtl"] .hero-meta,[dir="rtl"] .source-row,[dir="rtl"] .hero-value-row,[dir="rtl"] .article-byline,[dir="rtl"] .article-trustbar,[dir="rtl"] .reader-shortcut,[dir="rtl"] .feed-guide,[dir="rtl"] .market-ticker,[dir="rtl"] .article-actions,[dir="rtl"] .prev-next,[dir="rtl"] .article-share-panel,[dir="rtl"] .botnav{flex-direction:row-reverse}
[dir="rtl"] .lang-switch{margin-right:0;margin-left:10px}
[dir="rtl"] .lang-switch-menu{right:auto;left:0}
[dir="rtl"] .lang-opt{flex-direction:row-reverse}
[dir="rtl"] .breadcrumb{flex-direction:row-reverse;justify-content:flex-end}
[dir="rtl"] .tabs,[dir="rtl"] .reader-tabs,[dir="rtl"] .topnav{flex-direction:row-reverse}
[dir="rtl"] .lead-badge{right:auto;left:16px}
[dir="rtl"] .badge{right:auto;left:10px}
[dir="rtl"] .region-flag{left:auto;right:10px}
[dir="rtl"] .rank-num,[dir="rtl"] .summary-panel ul,[dir="rtl"] .tldr ul,[dir="rtl"] .brief-card ol,[dir="rtl"] .simple-summary ul{padding-left:0;padding-right:0}
[dir="rtl"] .brief-card ol{list-style-position:inside}
[dir="rtl"] .card-decision,[dir="rtl"] .card-trust,[dir="rtl"] .summary-panel,[dir="rtl"] .meeting-memo,[dir="rtl"] .article-weakness,[dir="rtl"] .tldr{text-align:right}
[dir="rtl"] .pn-prev{text-align:right}
[dir="rtl"] .pn-next{text-align:left}
[dir="rtl"] .tf-search-item{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .tf-geo-banner{flex-direction:row-reverse}
[dir="rtl"] .section-head,[dir="rtl"] .feed-head{flex-direction:row-reverse}
[dir="rtl"] .hero-kicker,[dir="rtl"] .hero-sub,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .summary{text-align:right}
[dir="rtl"] .progress{left:auto;right:0}

/* Fix: a long unbreakable source URL blew out the lead-hero grid min-content, crushing the image column */
.lead-copy{min-width:0;overflow-wrap:anywhere}
/* Focus-visible ring — WCAG 2.4.7 AA (replaces outline:none resets) */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:inherit;}
/* iOS input zoom prevention — font-size>=16px on mobile (iOS Safari auto-zooms <16px) */
@media(max-width:639px){
  .nl-cta-form input[type='email'],
  .lead-form input,
  .lead-form select,
  .subscribe-form input[type='email'],
  .archive-search-row input{font-size:16px;}
}

.lang-switch-menu[hidden]{display:none!important}

/* fulltest 2026-06-03: free top-bar space so the language switcher never overlaps the nav at wide viewports (>1080px). nav gap matched to the mobile value; switcher label capped for long natives (e.g. Bahasa Indonesia). */
.topbar .topnav { gap: 16px; }
.lang-switch-cur { max-width: 72px; }

/* fulltest 2026-06-04: mobile hero text and CTA must never force horizontal overflow. */
@media(max-width:639px){
  .lead-hero,
  .lead-copy{
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .lead-hero h1{
    max-width:100%!important;
    font-size:clamp(34px,10.2vw,42px)!important;
    line-height:1.16!important;
    letter-spacing:0!important;
    overflow-wrap:anywhere!important;
  }
  .hero-sub{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
  }
  .hero-actions .primary-cta,
  .hero-actions .secondary-cta{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.25!important;
    padding-inline:16px!important;
  }
}


/* 2026-06-03: declutter top nav — Editorial (mailto contact) + How to read (in-page anchor) move out of the crowded primary nav into the footer/page; keeps the switcher label and prevents nav/switcher overlap at common widths */
.topnav a[href^="mailto:"], .topnav a[href*="#editorial"], .topnav a[href="#reading-lanes"], .topnav a[data-mail-u]{display:none}

/* ── 日本企業の視点 (jpLens) — jp-only localized analysis callout (2026-06-06) ── */
.jp-lens{max-width:920px;margin:34px auto 6px;padding:20px 24px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0}
.jp-lens .jp-lens-label{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.82rem;letter-spacing:.07em;color:var(--accent);margin:0 0 10px}
.jp-lens .jp-lens-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.jp-lens p{margin:0;line-height:1.95;font-size:16px}
.jp-lens strong{font-weight:700}
@media(max-width:640px){.jp-lens{margin:26px var(--pad) 6px;padding:16px 18px}}

/* ============================================================
   v5.1 polish layer (2026-07-08)
   1) Missing component styles: related / prev-next / share panel
      (base styles were lost in the v5 rewrite — ~1200 article pages
      and 27 guide pages rendered these blocks unstyled)
   2) PR labeling + disclosure (stealth-marketing compliance)
   3) Micro-interaction & typography refinements, token-based so
      both themes inherit automatically
   ============================================================ */

:root {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 34px rgba(0, 0, 0, 0.32);
}
[data-theme="light"] {
  --shadow-1: 0 1px 2px rgba(26, 21, 12, 0.06), 0 6px 18px rgba(26, 21, 12, 0.07);
  --shadow-2: 0 2px 6px rgba(26, 21, 12, 0.08), 0 14px 34px rgba(26, 21, 12, 0.12);
}

/* ── PR labeling ─────────────────────────────────────────── */
.card-hero .badge-pr {
  top: 42px;                       /* sits under the category badge */
  background: var(--gold);
  color: #1c1503;
  letter-spacing: 0.2em;
}
.pr-disclosure {
  margin: 18px var(--pad) 0;
  padding: 12px 16px;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.pr-disclosure-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.pr-disclosure p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
}
@media (min-width: 1024px) {
  .pr-disclosure { max-width: 720px; margin-inline: auto; }
}

/* ── Related articles (article + guide pages) ────────────── */
.related {
  padding: 0 var(--pad);
  margin: 36px 0 8px;
}
.related-h {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 900px) {
  .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .related { margin-top: 48px; }
}
.rel-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.rel-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.rel-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-2);
  filter: saturate(0.9) contrast(1.04);
}
.rel-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.rel-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.rel-card h4 {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rel-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
/* guide pages emit .rel-card without an image — text-only variant stays tidy */
.rel-card > .rel-body:first-child { padding-top: 12px; }

/* ── Prev / next navigation ──────────────────────────────── */
.prev-next {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 0 var(--pad);
  margin: 22px 0 10px;
}
.prev-next .pn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.prev-next .pn:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.prev-next .pn-next { text-align: right; }
.pn-l {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pn-prev .pn-l::before { content: '← '; }
.pn-next .pn-l::after { content: ' →'; }
.pn-t {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prev-next .pn:hover .pn-t { color: var(--text); }

/* ── Share panel (article pages) ─────────────────────────── */
.article-share-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 var(--pad);
  margin: 18px 0 4px;
}
.article-share-panel > span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.article-share-panel a,
.article-share-panel button {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.article-share-panel a:hover,
.article-share-panel button:hover {
  color: var(--text);
  border-color: var(--border-2);
  transform: translateY(-1px);
}
@media (min-width: 1024px) {
  .article-share-panel { max-width: 720px; margin-inline: auto; }
}

/* ── Micro-interactions & finish ─────────────────────────── */
/* Cards lift with a soft editorial shadow instead of only a border change */
.card {
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.card:active { transform: translateY(0) scale(0.998); box-shadow: none; }

/* CTAs: confident press states */
.primary-cta { transition: transform .15s, box-shadow .15s, filter .15s; }
.primary-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); filter: brightness(1.05); }
.primary-cta:active { transform: translateY(0); box-shadow: none; }
.secondary-cta { transition: border-color .15s, color .15s, transform .15s; }
.secondary-cta:active { transform: translateY(1px); }

/* Reading-lane tiles: accent reveal on hover */
.reader-lane {
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.reader-lane:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.reader-lane:hover > b { color: var(--accent); }
.reader-lane > b { transition: color .18s; }

/* Lens tabs: animated underline for the active state */
.tab { position: relative; }
.tab::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.tab.active::after { transform: scaleX(1); }

/* Digest links: nudge on hover */
.digest-col > a:not(.digest-title) { transition: color .15s, padding-left .15s; }
.digest-col > a:not(.digest-title):hover { padding-left: 4px; }

/* Date divider: small accent tick before the label */
.date-divider::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* Bottom nav: frosted glass + spring on tap */
.botnav {
  background: var(--bg-overlay);
  
  
}
.botnav-item { transition: color .15s, transform .15s; }
.botnav-item:active { transform: scale(0.92); }

/* Brief list: numbers pick up the accent on hover */
.brief-card.morning li a { transition: color .15s; }
.brief-card.morning li:hover span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.brief-card.morning li span { transition: background .15s, color .15s, border-color .15s; }

/* Impact ranking rows: gentle highlight */
.brief-card.impact li { transition: background .15s; border-radius: 4px; }
.brief-card.impact li:hover { background: var(--bg-2); }
.brief-card.impact li:hover .rank-num { color: var(--accent); }
.rank-num { transition: color .15s; }

/* Anchor targets never hide under the sticky topbar.
   NOTE: no `html{scroll-behavior:smooth}` here — app.js relies on instant
   two-arg scrollTo for the lens filter (documented conflict). */
#feed, #reading-lanes, #category-digest, #brief-panels, .policy-panel[id] { scroll-margin-top: 96px; }

/* Long headlines & body text: better CJK/Latin line breaking */
.card h3, .lead-hero h1, .article-title, .rel-card h4 { text-wrap: balance; }
.card .summary, .hero-sub, .policy-panel p { text-wrap: pretty; }

/* Respect users who opt out of motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Desktop feed grid ────────────────────────────────────
   The v5 feed rendered one full-container-width card per row on desktop
   (a ~650px-tall hero per story). Multi-column keeps the editorial card
   design but restores scanability. Guides, dividers and the newsletter
   CTA span the full row. */
@media (min-width: 900px) {
  .feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    align-items: start;
  }
  .feed > .feed-guide,
  .feed > .date-divider,
  .feed > .nl-cta,
  .feed > p { grid-column: 1 / -1; }
  .card, .card-wrap { margin-bottom: 20px; }
  .card-wrap .card { margin-bottom: 0; }
}
@media (min-width: 1280px) {
  .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
}

/* ============================================================
   Review fixes (mobile + a11y)
   ============================================================ */

/* Mobile: long kickers (e.g. subscribe hero "MORNING + EVENING BRIEF ·
   7:00 AM / 6:00 PM LOCAL · FREE") overflowed the 390px viewport by 70px
   because .section-kicker forces nowrap. Let them wrap on small screens. */
@media (max-width: 640px) {
  .section-kicker { white-space: normal; }
}

/* WCAG AA: dark-theme --accent (#d04550) on --bg (#0e0d0b) is 4.30:1 —
   below the 4.5:1 required for the 10-12px kicker/label text. Introduce
   --accent-text (#dc5a64 = 5.26:1 on #0e0d0b) for small accent text only;
   light theme keeps #b8252b (5.93:1 on #faf8f3), so nothing changes there.
   Larger accent uses (buttons, 32px stats, borders, hovers) keep --accent. */
:root { --accent-text: #b8252b; }
[data-theme="dark"] { --accent-text: #dc5a64; }
.section-kicker,
.hero-kicker,
.lead-form-kicker,
.market-ticker > span:first-child,
.market-ticker .market-label,
.lead-story span,
.reader-lane > em,
.panel-head b,
.feed-guide span,
.nl-cta-eyebrow,
.digest-title,
.tag-pill,
.tldr-label,
.tf-search-tag {
  color: var(--accent-text);
}

/* Native CSS View Transitions */
@view-transition {
  navigation: auto;
}

/* Tabular Nums for Japanese media precision */
.update-stamp,
.market-ticker,
.hero-meta,
.card-meta,
.rank-num,
.brief-panels ol li span,
.date-divider,
.trust-archived {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* ─────────── 2026-08-07 媒体改版：移动端布局修正 ───────────
   1) hero 图本身是自带标题/タグ/出典的卡片图，叠加 lead-media-panel 会与图内
      文字互相压糊（移动端尤甚）→ 移除叠加层，信息以图内为准。
   2) 移动端 masthead：ブランド名が言語切替に押されて截断していた
      → 字号与 gap 收敛，保证ワードマーク完整表示。                         */

.lead-media-panel { display: none; }

@media (max-width: 639px) {
  .brand-group { gap: 12px; }
  .brand { font-size: 18px; }
  .lead-badge { font-size: 10px; padding: 5px 9px; }
}

@media (max-width: 419px) {
  .brand { font-size: 16px; }
  .brand-group { gap: 8px; }
}

/* ─────────── 用語解説・基礎ガイド hub（金标准 43.2 首页槽位再分配）───────────
   常青指南是本站唯一在吃自然搜索的资产，把首页中段槽位分给它们。      */

.guide-hub {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--pad) 8px;
  border-top: 1px solid var(--border);
}
.guide-hub-head h2 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
}
.guide-hub-head p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted, #6b6b6b);
  margin: 0 0 22px;
}
.guide-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
.guide-col h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.guide-col ul { list-style: none; margin: 0; padding: 0; }
.guide-col li { margin: 0 0 9px; }
.guide-col a {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  text-decoration: none;
  transition: color 200ms ease;
}
.guide-col a:hover { color: var(--accent); }

@media (min-width: 768px) {
  .guide-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (min-width: 1024px) {
  .guide-hub { padding: 56px var(--pad-xl) 12px; }
  .guide-cols { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .guide-hub-head h2 { font-size: 23px; }
}


/* 2026-08-09: 首页から /tools/ への導線 */
.guide-hub-tools{
  display:inline-block; margin-left:14px; font-family:var(--sans);
  font-size:13px; font-weight:700; color:var(--accent);
  text-decoration:none; vertical-align:middle;
  border-bottom:1px solid transparent; transition:border-color 200ms ease;
}
.guide-hub-tools:hover{ border-bottom-color:var(--accent); }


/* 2026-08-09: トップナビの /tools/ 項目。新機能なので控えめに強調する */
.topnav-tools{
  position:relative;
  color:var(--accent) !important;
  font-weight:700;
}
.topnav-tools::after{
  content:"NEW";
  position:absolute; top:-6px; right:-22px;
  font-family:var(--sans); font-size:9px; font-weight:800;
  letter-spacing:.06em; color:#fff; background:var(--accent);
  padding:1px 4px; border-radius:2px; line-height:1.4;
}
@media (max-width:639px){ .topnav-tools::after{ display:none; } }

/* 2026-08-10: 記事ページのタグをカテゴリページへのリンクにした。
   既存の span.tag-pill と見た目を揃え、リンクと分かる程度のホバーだけ足す。 */
a.tag-pill { text-decoration: none; color: inherit; transition: background-color .15s ease; }
a.tag-pill:hover { background-color: rgba(127,127,127,.18); text-decoration: none; }


/* iOS Safe Area & Ergo Fix (Astra Perfection) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .cro-mobile-drawer, .mobile-nav, .fixed-cta, nav.mobile-menu, [class*="drawer"], [class*="fixed-bottom"] {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  }
}



/* --- Tech Frontier Bespoke Luxury Masthead 2026 --- */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: inherit !important;
}
.brand-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
  box-shadow: 0 1.5px 5px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(225, 29, 72, 0.4) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  vertical-align: middle !important;
}
.brand:hover .brand-avatar {
  transform: scale(1.08) rotate(-2deg) !important;
  box-shadow: 0 3px 14px rgba(225, 29, 72, 0.35), 0 0 0 1.5px #e11d48 !important;
}
.brand-title {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: inherit !important;
}
.brand-badge-jp {
  display: inline-block !important;
  padding: 2px 5px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  background: rgba(225, 29, 72, 0.08) !important;
  color: #e11d48 !important;
  border: 1px solid rgba(225, 29, 72, 0.28) !important;
  border-radius: 3px !important;
  vertical-align: 2px !important;
  margin-left: 2px !important;
}
.brand-divider {
  display: inline-block !important;
  width: 1px !important;
  height: 18px !important;
  background: var(--border, #cbd5e1) !important;
  margin: 0 6px 0 4px !important;
  vertical-align: middle !important;
}
.brand-kicker {
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--muted, #64748b) !important;
  letter-spacing: 0.03em !important;
  font-family: var(--sans) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.article-topbar .back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.article-topbar .brand-avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(225, 29, 72, 0.35) !important;
}

@media (max-width: 960px) {
  .brand-divider, .brand-kicker {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .brand-avatar {
    width: 28px !important;
    height: 28px !important;
  }
  .brand-title {
    font-size: 19px !important;
  }
}


@media (max-width: 1400px) {
  #latest-update {
    display: none !important;
  }
}
.brand-divider, .brand-kicker {
  display: none !important;
}
@media (min-width: 1360px) {
  .brand-divider {
    display: inline-block !important;
  }
  .brand-kicker {
    display: inline-block !important;
  }
}