/* ============================================
   晨昏简报 · Design System v3 — Liquid Glass
   ============================================ */

/* --- Fonts --- */
@font-face {
  font-family: "Blue Sky Noto";
  src: url("../fonts/Blue Sky Noto Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Blue Sky Noto";
  src: url("../fonts/Blue Sky Noto Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Blue Sky Noto";
  src: url("../fonts/Blue Sky Noto Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* --- Design Tokens --- */
:root {
  --bg: #0b0b0c;
  --bg-soft: #121214;
  --ink: #f5f5f7;
  --muted: #a1a1aa;
  --line: rgba(245, 245, 247, 0.08);
  --line-strong: rgba(245, 245, 247, 0.12);
  --card: rgba(22, 22, 26, 0.55);
  --accent: #d6b36a;
  --accent-deep: #f0d48e;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max-width: 1120px;
  --font-sans: "Blue Sky Noto", -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  /* Liquid Glass shadows — layered for depth */
  --glass-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.14),
    0 16px 40px rgba(0, 0, 0, 0.22);
  --glass-shadow-hover:
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.16),
    0 24px 56px rgba(0, 0, 0, 0.26);
  --glass-shadow-pressed:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.12);

  /* Signal type colors */
  --color-macro: #f0d48e;
  --color-macro-bg: rgba(240, 212, 142, 0.10);
  --color-market: #7dd3fc;
  --color-market-bg: rgba(125, 211, 252, 0.10);
  --color-industry: #a78bfa;
  --color-industry-bg: rgba(167, 139, 250, 0.10);
  --color-framework: #34d399;
  --color-framework-bg: rgba(52, 211, 153, 0.10);
}

/* --- Reset --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(214, 179, 106, 0.12), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.04), transparent 24%),
    linear-gradient(180deg, #0a0a0b 0%, #111214 100%);
  font-family: var(--font-sans);
}

a { color: inherit; text-decoration: none; }

p, li {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.96rem;
  font-weight: 300;
}

h1, h2, h3 {
  margin: 0 0 0.8rem;
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* ============================================
   Liquid Glass Card — unified base
   Thin, translucent, layered depth
   ============================================ */
.glass-card {
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(0, 0, 0, 0.04) 100%);
  border: 1px solid var(--line-strong);
  border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--glass-shadow);
  position: relative;
  border-radius: var(--radius-md);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Subtle top-edge highlight for 3D depth */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(240, 212, 142, 0.08) 60%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Press-down effect for clickable glass elements */
a.glass-card:active,
.glass-card.is-pressable:active,
.portal-card:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: var(--glass-shadow-pressed);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}

/* --- Layout Shell --- */
.site-shell {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 24px 0 48px;
}

/* --- Header --- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  position: sticky;
  top: 16px;
  z-index: 10;
  margin-bottom: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0d48e, #b89145);
  color: #0b0b0c;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.brand-text {
  letter-spacing: 0.01em;
  font-weight: 700;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.site-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
}

.site-nav a.is-active,
.site-nav a:hover {
  background: rgba(214, 179, 106, 0.12);
  color: var(--accent-deep);
}

/* --- Glow Track Effect (soft, large) --- */
.glow-track {
  position: relative;
  overflow: hidden;
  --glow-x: 50%;
  --glow-y: 50%;
}

.glow-track::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(400px circle at var(--glow-x) var(--glow-y),
      rgba(240, 212, 142, 0.09),
      rgba(240, 212, 142, 0.05) 22%,
      rgba(255, 255, 255, 0.025) 40%,
      transparent 70%);
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
  z-index: 1;
}

.glow-track:hover::after { opacity: 1; }

/* --- Footer --- */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 28px 28px;
  margin-top: 32px;
}

.footer-info p {
  margin: 0;
  font-size: 0.88rem;
}

.footer-info .footer-brand {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.footer-nav {
  display: flex;
  gap: 16px;
}

.footer-nav a {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 400;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--accent-deep);
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.84rem;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--muted);
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: var(--accent-deep);
}

.breadcrumb .breadcrumb-sep {
  opacity: 0.5;
}

.breadcrumb .breadcrumb-current {
  color: var(--ink);
  font-weight: 400;
}

/* --- Reading Meta (time estimate, date) --- */
.reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.reading-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Reading Progress Bar --- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #f0d48e, #b89145);
  z-index: 100;
  transition: width 80ms linear;
}

/* --- Back to Top Button --- */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0d48e, #b89145);
  color: #0b0b0c;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.2s;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.back-to-top:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- Eyebrow / Labels --- */
.eyebrow,
.card-kicker,
.section-label,
.panel-label,
.archive-date {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Hero --- */
.hero {
  padding: 32px;
  border-radius: var(--radius-lg);
}

.hero-home {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  min-height: 44vh;
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 700;
}

.hero-text,
.report-intro {
  max-width: 62ch;
  font-size: 0.98rem;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* Hero right panel: today's highlights */
.hero-highlights {
  display: grid;
  gap: 12px;
}

.hero-highlight-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.2s;
}

.hero-highlight-item:hover {
  background: rgba(214, 179, 106, 0.06);
}

.hero-highlight-item h3 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
}

.hero-highlight-item .highlight-tag {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Hero meta tags */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero-meta span,
.summary-tag {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent-deep);
  font-size: 0.82rem;
  font-weight: 400;
}

/* --- Buttons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(1px) scale(0.97);
  transition: transform 0.08s ease;
}

.button-primary {
  background: linear-gradient(135deg, #f0d48e, #b89145);
  color: #0b0b0c;
  box-shadow: 0 4px 16px rgba(184, 145, 69, 0.3);
}

.button-primary:hover {
  box-shadow: 0 6px 22px rgba(184, 145, 69, 0.4);
}

.button-primary:active {
  box-shadow: 0 2px 8px rgba(184, 145, 69, 0.2);
}

.button-secondary {
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.04);
}

/* --- Portal Cards (Homepage) --- */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.portal-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

/* Uniform gradient border — no static glow spots */
.portal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(240, 212, 142, 0.08) 60%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.portal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

.portal-card:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: var(--glass-shadow-pressed);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.portal-card h2 {
  max-width: 14ch;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
}

.portal-card p { max-width: 36ch; }

/* Both portal cards now use same clean glass bg — no radial glows */
.portal-card-primary {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(0, 0, 0, 0.06) 100%);
}

.portal-card-primary h2,
.portal-card-primary p,
.portal-card-primary .card-kicker,
.portal-card-primary .portal-link {
  color: #f5f5f7;
}

.portal-card-secondary {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.015) 40%,
      rgba(0, 0, 0, 0.05) 100%);
}

.portal-card-secondary h2,
.portal-card-secondary p,
.portal-card-secondary .card-kicker,
.portal-card-secondary .portal-link {
  color: var(--ink);
}

.portal-link {
  display: inline-flex;
  margin-top: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Section / Feature Cards --- */
.section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.feature-card {
  padding: 22px;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
}

/* --- Content Grid Layouts --- */
.content-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr);
  gap: 20px;
  align-items: start;
  margin-top: 24px;
}

/* --- Archive Page --- */
.archive-page {
  display: grid;
  gap: 24px;
}

.archive-hero {
  padding: 12px 4px;
}

.archive-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 700;
}

/* Archive Search */
.archive-search {
  position: relative;
  max-width: 480px;
  margin-top: 20px;
}

.archive-search input {
  width: 100%;
  padding: 14px 18px 14px 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(18, 18, 22, 0.7);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.archive-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(214, 179, 106, 0.12);
}

.archive-search input::placeholder {
  color: var(--muted);
}

.archive-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
}

/* Archive Month Group */
.archive-month-group {
  margin-bottom: 8px;
}

.archive-month-label {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.archive-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.archive-card {
  padding: 22px;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

.archive-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
}

.archive-card-muted { opacity: 0.8; }

/* --- Today Page --- */
.today-stack {
  display: grid;
  gap: 20px;
}

.today-overview {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
}

.overview-card {
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-top-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(0, 0, 0, 0.04) 100%);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-md);
  position: relative;
}

/* Same gradient border as glass-card */
.overview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(240, 212, 142, 0.08) 60%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.overview-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* --- Report Article --- */
.daily-report-card {
  padding: 32px;
  border-radius: var(--radius-lg);
}

.daily-report-card h1,
.report-main h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 700;
}

.report-main-full { width: 100%; }

.report-main {
  padding: 22px;
}

.lead-paragraph {
  max-width: 72ch;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 300;
}

.section-heading,
.section-heading-block {
  margin-bottom: 18px;
}

.report-section {
  margin-top: 28px;
}

.report-list {
  margin: 0;
  padding-left: 18px;
}

.report-list-strong li {
  margin-bottom: 10px;
  color: var(--ink);
}

/* Report categories grid */
.report-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mini-card {
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.03) 100%);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mini-card .panel-label {
  margin-bottom: 8px;
}

/* Report navigation (prev/next) */
.report-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.report-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.2s;
}

.report-nav a:hover {
  color: var(--accent-deep);
}

.report-nav .nav-next {
  margin-left: auto;
}

/* --- Signal Type Colors --- */
.signal-type {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}

.signal-type-macro {
  color: var(--color-macro);
  background: var(--color-macro-bg);
}

.signal-type-market {
  color: var(--color-market);
  background: var(--color-market-bg);
}

.signal-type-industry {
  color: var(--color-industry);
  background: var(--color-industry-bg);
}

.signal-type-framework {
  color: var(--color-framework);
  background: var(--color-framework-bg);
}

.signal-type:not(.signal-type-macro):not(.signal-type-market):not(.signal-type-industry):not(.signal-type-framework) {
  color: var(--accent);
  background: transparent;
}

/* --- Accordion --- */
.accordion-stack {
  display: grid;
  gap: 14px;
}

.accordion-card {
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.03) 100%);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.accordion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.accordion-summary {
  display: grid;
  gap: 10px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

.accordion-summary::-webkit-details-marker { display: none; }

.accordion-card[open] .accordion-summary {
  border-bottom: 1px solid var(--line);
}

.accordion-hint {
  color: var(--accent-deep);
  font-size: 0.82rem;
  font-weight: 400;
}

.accordion-card[open] .accordion-hint { display: none; }

.accordion-content {
  padding: 20px 24px 16px;
}

.accordion-content p {
  max-width: 72ch;
  font-size: 0.94rem;
  font-weight: 300;
}

.accordion-close {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--accent-deep);
  font-size: 0.9rem;
  font-weight: 700;
}

/* --- Signal / Abstract / Longform Cards --- */
.signal-stack,
.abstract-stack,
.longform-stack {
  display: grid;
  gap: 14px;
}

.signal-card,
.abstract-card,
.longform-card {
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.03) 100%);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 22px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.signal-card::before,
.abstract-card::before,
.longform-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Color-coded left border */
.longform-card[data-type="macro"] { border-left: 3px solid var(--color-macro); }
.longform-card[data-type="market"] { border-left: 3px solid var(--color-market); }
.longform-card[data-type="industry"] { border-left: 3px solid var(--color-industry); }
.longform-card[data-type="framework"] { border-left: 3px solid var(--color-framework); }

.signal-title,
.abstract-title,
.longform-title {
  margin-bottom: 0;
  font-family: var(--font-sans);
}

.signal-title { font-size: clamp(1.12rem, 1.9vw, 1.42rem); line-height: 1.35; }
.abstract-title { font-size: 1.22rem; line-height: 1.35; }
.longform-title { font-size: 1.26rem; line-height: 1.35; }

.abstract-card p:not(.signal-type),
.longform-card p:not(.signal-type) {
  max-width: 74ch;
  font-weight: 300;
}

.longform-summary {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 400;
}

/* --- Editorial Grid / Visual Cards --- */
.editorial-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  margin-bottom: 18px;
}

.visual-card {
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.04) 100%);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 22px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.metric-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.metric-value {
  font-size: 1.45rem;
  font-weight: 700;
}

.bar-chart { display: grid; gap: 14px; }
.bar-item { display: grid; gap: 8px; }

.bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0d48e, #b89145);
}

.flow-list { display: grid; gap: 14px; }

.flow-list div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.95rem;
  font-weight: 400;
}

/* --- Summary Block --- */
.summary-block {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.03) 100%);
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(12px);
}

/* --- Text Helpers --- */
.text-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.text-link {
  color: var(--accent-deep);
  font-weight: 700;
  transition: opacity 0.2s;
}

.text-link:hover { opacity: 0.8; }

.inline-separator {
  margin: 0 10px;
  color: var(--muted);
}

/* --- Table of Contents --- */
.toc {
  padding: 20px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.03) 100%);
  backdrop-filter: blur(12px);
  margin-bottom: 24px;
}

.toc-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li {
  margin-bottom: 8px;
}

.toc-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.2s;
}

.toc-list a:hover {
  color: var(--accent-deep);
}

.toc-list svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ============================================
   Section Icons
   ============================================ */
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.section-icon svg {
  width: 20px;
  height: 20px;
}

.section-icon-gold {
  background: var(--color-macro-bg);
  color: var(--color-macro);
}

.section-icon-blue {
  background: var(--color-market-bg);
  color: var(--color-market);
}

.section-icon-purple {
  background: var(--color-industry-bg);
  color: var(--color-industry);
}

.section-icon-green {
  background: var(--color-framework-bg);
  color: var(--color-framework);
}

/* Section heading with icon */
.section-heading-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.section-heading-icon h2 {
  margin: 0;
  line-height: 1.3;
}

.section-heading-icon .section-label {
  margin-bottom: 2px;
}

/* Mini-card with icon */
.mini-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mini-card-header .panel-label {
  margin-bottom: 0;
  line-height: 1;
}

.mini-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.mini-card-icon svg {
  width: 16px;
  height: 16px;
}

/* Feature card icon */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

/* Overview card icon row */
.overview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.overview-header .panel-label {
  margin-bottom: 0;
  line-height: 1;
}

/* Reading meta icons */
.reading-meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Portal card icon */
.portal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 16px;
}

.portal-icon svg {
  width: 24px;
  height: 24px;
}

.portal-card-primary .portal-icon {
  background: rgba(240, 212, 142, 0.12);
  color: #f0d48e;
}

.portal-card-secondary .portal-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

/* Hero highlight icons */
.highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
}

.highlight-icon svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 960px) {
  .hero-home,
  .portal-grid,
  .section-grid,
  .content-split,
  .report-layout,
  .archive-list,
  .report-categories,
  .today-overview,
  .editorial-grid {
    grid-template-columns: 1fr;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .site-shell {
    width: min(calc(100% - 20px), var(--max-width));
    padding-top: 12px;
  }

  .site-header { top: 8px; }

  .site-nav { width: 100%; }

  .site-nav a {
    flex: 1 1 calc(50% - 12px);
    text-align: center;
  }

  .portal-card { min-height: auto; }

  .hero h1,
  .archive-hero h1,
  .daily-report-card h1,
  .report-main h1 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .report-categories {
    grid-template-columns: 1fr;
  }

  .metric-row {
    grid-template-columns: 1fr;
  }

  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
}