:root {
  --night-ink: #07111c;
  --ink-deep: #0b0d0f;
  --gold-soft: #c7a66a;
  --paper-warm: #e9ddc5;
  --mist-gray: #9a9388;
  --line-strong: rgba(199, 166, 106, 0.42);
  --line-soft: rgba(199, 166, 106, 0.22);
  --surface: rgba(7, 17, 28, 0.94);
  --surface-raised: rgba(11, 13, 15, 0.92);
  --font-display: "Iansui", "Noto Serif TC", "PMingLiU", serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --space-2: 16px;
  --space-3: 24px;
  --space-5: 40px;
  --space-8: 64px;
  --space-12: 96px;
  --radius-image: 4px;
  --radius-block: 2px;
  --container: 1180px;
  color-scheme: dark;
}

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

html {
  background: var(--night-ink);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--paper-warm);
  background:
    linear-gradient(180deg, rgba(199, 166, 106, 0.08), transparent 14%),
    linear-gradient(180deg, #060f19 0%, #09131f 36%, #07111c 100%);
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease;
  overflow-wrap: anywhere;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

/* `<figure>` 的 UA 預設是 `margin: 1em 40px`。在 375px 的欄位裡那 80px 讓 banner 只剩
   263px（欄寬 343px），桌機也一路少 80px。框線與內距由 .feature-visual／.editorial-frame
   自己給，垂直間距由 grid gap 給，所以這裡歸零。 */
figure {
  margin: 0;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

.page-shell {
  min-height: 100dvh;
}

.site-header,
.site-footer,
.main {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

.site-header {
  padding-top: var(--space-2);
}

.main {
  padding-bottom: var(--space-12);
}

.site-footer {
  padding-bottom: var(--space-8);
}

.nav {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0 18px;
  border-bottom: 1px solid var(--line-strong);
}

.brand-mark {
  display: grid;
  gap: 6px;
  padding: 4px 0;
}

.brand-kicker,
.section-kicker,
.issue-meta,
.nav-links a,
.inline-ledger dt,
.signal-ledger dt,
.issue-side p,
.footer-copy {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.status-stale {
  margin-top: 0.7rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold-soft);
  color: rgba(233, 221, 197, 0.72);
  font-size: 0.88rem;
}

/* 規格表。站上第一組表格——權重與區間本來就是表格形態，改寫成散文只會把
   讀者想核對的東西藏起來。窄螢幕上表格自己橫向捲，頁面本體不捲。 */
.spec-table-wrap {
  margin: 1.25rem 0 0;
  overflow-x: auto;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* 只有真的塞不進 343px 欄寬的表才需要地板；短表套上會多出一條沒必要的橫捲軸。 */
.spec-table-wide {
  min-width: 30rem;
}

.spec-table-wrap:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

.spec-table caption {
  padding: 0.9rem 0 0.7rem;
  text-align: left;
  color: var(--gold-soft);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.spec-table th,
.spec-table td {
  padding: 0.6rem 0.9rem 0.6rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: 0;
}

.spec-table thead th {
  color: var(--mist-gray);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.spec-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.spec-table td {
  color: rgba(233, 221, 197, 0.8);
}

.scenario-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.scenario-item {
  border-left: 2px solid var(--line-soft);
  padding-left: 0.9rem;
}

.scenario-name {
  margin: 0 0 0.4rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.scenario-band {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--mist-gray);
}

.scenario-line {
  margin: 0.2rem 0;
  font-size: 0.92rem;
  line-height: 1.75;
}

.scenario-line span {
  display: inline-block;
  min-width: 2.6em;
  color: var(--mist-gray);
  letter-spacing: 0.06em;
}

.scenario-note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
}

.method-rules {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.85rem;
  max-width: 62ch;
}

.method-rules li {
  line-height: 1.85;
}

.footer-disclaimer {
  margin: 0.75rem 0 0;
  color: rgba(233, 221, 197, 0.62);
  font-size: 0.78rem;
  line-height: 1.7;
  max-width: 62ch;
}

.brand-kicker,
.section-kicker,
.issue-meta,
.inline-ledger dt,
.signal-ledger dt,
.issue-side p {
  color: var(--gold-soft);
}

.brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 1px solid transparent;
  color: rgba(233, 221, 197, 0.82);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a:active,
.issue-row a:hover,
.issue-row a:focus-visible,
.issue-row a:active,
.compact-ledger a:hover,
.compact-ledger a:focus-visible,
.compact-ledger a:active {
  color: var(--paper-warm);
}

.nav-links a[aria-current="page"] {
  color: var(--paper-warm);
  border-bottom-color: var(--gold-soft);
}

.main > * + * {
  margin-top: var(--space-8);
}

.feature,
.salon-grid,
.lead-grid,
.closing-band,
.editorial-columns,
.about-layout {
  display: grid;
  gap: var(--space-3);
}

.feature {
  align-items: start;
  padding: var(--space-5) 0;
}

.feature-copy {
  max-width: 34rem;
}

.feature-copy > * + * {
  margin-top: 16px;
}

.feature-title,
.page-intro h1,
.about-copy h1,
.lead-card h2,
.about-guide h2,
.story-column h2,
.analysis-column h2,
.ledger-card h2,
.cycle-note h2,
.issue-body h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
}

.feature-title {
  font-size: clamp(2.8rem, 2rem + 3vw, 5.25rem);
  max-width: 10ch;
}

.feature-dek,
.page-intro p,
.about-copy p,
.ledger-card p,
.story-copy p,
.article-copy p,
.source-list p,
.footer-copy,
.cycle-note p {
  margin: 0;
  color: rgba(233, 221, 197, 0.8);
  font-size: 1rem;
  line-height: 1.85;
  max-width: 62ch;
}

.feature-dek {
  max-width: 34ch;
}

.section-kicker {
  margin: 0 0 12px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-3);
}

.cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  background: rgba(199, 166, 106, 0.08);
  color: var(--paper-warm);
}

.cta-link:hover,
.cta-link:focus-visible,
.cta-link:active {
  background: rgba(199, 166, 106, 0.16);
  border-color: var(--gold-soft);
}

.cta-link-secondary {
  background: transparent;
}

.feature-visual,
.editorial-frame,
.ledger-card,
.issue-row,
.story-column,
.analysis-column,
.about-copy {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.38), rgba(11, 13, 15, 0.18));
}

.feature-visual,
.editorial-frame {
  padding: var(--space-2);
}

.feature-visual img,
.editorial-frame img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.feature-visual figcaption,
.editorial-frame figcaption {
  margin-top: 12px;
  color: rgba(154, 147, 136, 0.92);
  font-size: 0.95rem;
  line-height: 1.7;
  /* was 54ch: `1ch` is the width of "0", about half a CJK glyph, so this capped
     Chinese captions at ~27 characters. Same bug the P2 pass fixed elsewhere. */
  max-width: 34em;
}

/* /about/ 首圖：字級疊到圖右上角留白處，不再佔圖下方獨立一行（Richmond
   2026-09-18：字級比照首頁 .feature-dek 的 1rem，位置移到圖上）。 */
.feature-visual.feature-visual-caption-corner {
  position: relative;
}

.feature-visual.feature-visual-caption-corner > figcaption {
  position: absolute;
  top: calc(var(--space-2) * 2);
  right: calc(var(--space-2) * 2);
  z-index: 1;
  margin-top: 0;
  max-width: 60%;
  text-align: right;
  color: var(--paper-warm);
  font-size: 1rem;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  /* 疊在圖上但不吃滑鼠事件，同 .banner-has-mood 的做法。 */
  pointer-events: none;
}

.salon-grid,
.lead-grid,
.closing-band {
  grid-template-columns: 1fr;
}

.ledger-card,
.lead-card,
.story-column,
.analysis-column,
.about-copy,
.issue-row,
.about-guide,
.empty-state {
  padding: var(--space-3) 0;
}

.ledger-card-primary,
.ledger-card-secondary {
  align-self: start;
}

.slot-copy {
  margin-top: 12px;
}

.digest-title,
.issue-focus,
.issue-summary {
  margin: 0;
}

.digest-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem);
  line-height: 1.35;
}

.digest-actions {
  margin-top: var(--space-3);
}

.inline-ledger,
.signal-ledger {
  margin: var(--space-3) 0 0;
}

.inline-ledger,
.signal-ledger,
.conditions-list {
  padding: 0;
}

.inline-ledger {
  display: grid;
  gap: 12px;
}

.inline-ledger div {
  display: grid;
  gap: 4px;
}

.inline-ledger dd,
.signal-ledger dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.5;
}

.signal-ledger {
  display: grid;
  gap: 18px;
}

.signal-ledger div {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.compact-ledger dd {
  font-size: 1rem;
}

.notice-strip {
  padding: 14px 18px;
  border-top: 1px solid rgba(199, 166, 106, 0.72);
  border-bottom: 1px solid rgba(199, 166, 106, 0.4);
  color: var(--paper-warm);
  background: rgba(199, 166, 106, 0.08);
}

.reference-banner {
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(199, 166, 106, 0.72);
  border-bottom: 1px solid rgba(199, 166, 106, 0.4);
  background: rgba(233, 221, 197, 0.05);
}

.reference-banner h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem);
  line-height: 1.15;
}

.reference-banner p {
  margin: 0;
  max-width: 60ch;
  color: rgba(233, 221, 197, 0.84);
  line-height: 1.8;
}

.reference-banner > * + * {
  margin-top: 14px;
}

.lead-card,
.about-guide,
.empty-state {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(11, 13, 15, 0.22);
}

.lead-card h2,
.about-guide h2,
.empty-state h2 {
  font-size: clamp(1.45rem, 1.15rem + 0.9vw, 2.1rem);
}

.lead-card p,
.about-guide p,
.empty-state p {
  margin: 0;
  color: rgba(233, 221, 197, 0.82);
  line-height: 1.8;
}

.lead-card > * + *,
.about-guide > * + *,
.empty-state > * + * {
  margin-top: 14px;
}

.conditions-list {
  display: grid;
  gap: 10px;
  margin: var(--space-3) 0 0;
  list-style: none;
}

.conditions-list li {
  padding-left: 16px;
  position: relative;
  color: rgba(233, 221, 197, 0.8);
  line-height: 1.8;
}

.conditions-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 6px;
  background: var(--gold-soft);
  border-radius: 999px;
}

.cycle-note {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.story-column,
.analysis-column {
  max-width: 100%;
}

.story-column h2,
.analysis-column h2,
.page-intro h1,
.about-copy h1 {
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.2rem);
}

.story-copy,
.article-copy,
.source-list {
  margin-top: var(--space-3);
  display: grid;
  gap: 16px;
}

.story-copy > :first-child,
.article-copy > :first-child,
.source-list > :first-child {
  margin-top: 0;
}

.story-copy > :last-child,
.article-copy > :last-child,
.source-list > :last-child {
  margin-bottom: 0;
}

.story-copy p,
.article-copy p,
.source-list p,
.story-copy li,
.article-copy li,
.source-list li {
  color: rgba(233, 221, 197, 0.84);
}

.story-copy ul,
.article-copy ul,
.source-list ul {
  margin: 0;
  padding-left: 1.2rem;
}

.story-copy blockquote,
.article-copy blockquote {
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--line-strong);
  color: var(--paper-warm);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.7;
}

.source-rule,
.about-rule {
  width: 100%;
  height: 1px;
  background: var(--line-soft);
  margin: var(--space-5) 0;
}

.page-intro {
  max-width: 36rem;
  padding-top: var(--space-5);
}

.issues-list {
  display: grid;
  gap: 0;
}

.issue-row {
  display: grid;
  gap: var(--space-2);
}

.issue-row + .issue-row {
  margin-top: -1px;
}

.issue-number {
  color: rgba(199, 166, 106, 0.64);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.8rem);
  line-height: 1;
}

.issue-meta {
  margin: 0 0 8px;
}

.issue-focus {
  color: var(--paper-warm);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.65;
}

.issue-summary,
.issue-side span {
  color: rgba(233, 221, 197, 0.76);
}

.issue-summary {
  max-width: 62ch;
}

.issue-side {
  display: grid;
  align-content: start;
  gap: 6px;
}

.issue-side strong {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.issue-note {
  display: inline-flex;
  margin-left: 8px;
  color: var(--paper-warm);
}

.issue-note-block {
  margin: 12px 0 0;
  max-width: 34ch;
  color: rgba(233, 221, 197, 0.82);
  line-height: 1.75;
}

.about-layout {
  padding-top: var(--space-5);
}

.about-guides {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.about-frame img {
  aspect-ratio: auto;
}

.footer-copy {
  display: block;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-strong);
  color: rgba(154, 147, 136, 0.92);
  text-transform: none;
  letter-spacing: 0.04em;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}

@media (min-width: 390px) {
  .feature,
  .salon-grid,
  .lead-grid,
  .closing-band,
  .editorial-columns,
  .about-layout,
  .issue-row {
    gap: var(--space-3);
  }
}

@media (min-width: 768px) {
  .feature-home,
  .feature-detail,
  .about-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: var(--space-5);
  }

  .salon-grid,
  .lead-grid,
  .closing-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .lead-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* two lead cards, not three: 本期問題 and 下個驗證點. A third column would
     leave a gap now that 失效條件 closes the page instead of opening it. */
  .lead-grid.lead-grid-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-columns {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    column-gap: var(--space-5);
  }

  /* 完整數據判讀缺欄（四層分析接手取代）時只剩故事長欄一欄，不留第二欄的空軌。 */
  .editorial-columns.editorial-columns-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-column {
    max-width: 28rem;
  }

  /* 單欄時 `.story-column` 的定寬（原本是配研究長欄用的）會在滿版的格子裡
     留一條空白；獨欄時改用內文慣用的行寬上限，不跟著格子縮成一小塊。 */
  .editorial-columns-single .story-column {
    max-width: 62ch;
  }

  .issue-row {
    grid-template-columns: 88px minmax(0, 1fr) 160px;
    align-items: start;
    column-gap: var(--space-3);
  }

  .about-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issue-note-block {
    max-width: 54ch;
  }
}

@media (min-width: 1180px) {
  .feature-title {
    max-width: 9ch;
  }

  .story-column {
    max-width: 30rem;
  }

  .editorial-columns-single .story-column {
    max-width: 62ch;
  }

  .feature-visual,
  .editorial-frame {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .feature-visual img,
  .editorial-frame img,
  .ledger-card,
  .issue-row,
  .story-column,
  .analysis-column,
  .about-copy,
  .cta-link,
  .nav-links a,
  .issue-row a,
  .compact-ledger a,
  .brand-mark {
    transition:
      transform 260ms ease,
      opacity 260ms ease,
      border-color 260ms ease,
      background-color 260ms ease,
      color 260ms ease;
  }

  .feature-visual:hover img,
  .editorial-frame:hover img {
    transform: scale(1.012);
  }

  .ledger-card:hover,
  .issue-row:hover,
  .story-column:hover,
  .analysis-column:hover,
  .about-copy:hover {
    border-top-color: rgba(233, 221, 197, 0.52);
  }

  .cta-link:active,
  .nav-links a:active,
  .issue-row a:active,
  .compact-ledger a:active,
  .brand-mark:active {
    transform: translateY(1px);
  }
}

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

/* ---------------------------------------------------------------------------
   Landscape hero band.

   .feature-visual img is locked to 4/5 for the v1 Facebook card family; the v2
   web banners are 21:9, so a shared rule would centre-crop away ~80% of the
   frame. .feature-banner drops the two-column split and puts the full-width
   banner above the copy instead.
   Compound selectors (.feature.feature-banner) so these win regardless of the
   768px block earlier in this file.
--------------------------------------------------------------------------- */
.feature-visual-wide img {
  /* Each landscape banner keeps its own ratio (21:9 hero, 16:9 method desk);
     the width/height attributes on the <img> supply it. A fixed value here
     would crop whichever banner did not match. */
  aspect-ratio: auto;
}

.feature.feature-banner {
  grid-template-columns: minmax(0, 1fr);
}

.feature.feature-banner .feature-visual {
  order: -1;
}

@media (min-width: 768px) {
  .feature.feature-banner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the copy column is already bounded by its width; a `ch` cap here silently
     halved the measure for Chinese and forced the slogan onto three lines */
  .feature.feature-banner .feature-copy {
    max-width: none;
  }
}

@media (min-width: 1180px) {
  /* the 9ch cap exists for the narrow side column, not for a full-width band */
  .feature.feature-banner .feature-title {
    max-width: 20ch;
  }
}

/* ---------------------------------------------------------------------------
   Homepage hero overlay.

   The v2 banner is composed with its left two-thirds as calm negative space,
   so from 768px up the copy is stacked over the image in a single grid area
   rather than sitting above it. Stacking (not absolute positioning) keeps the
   row height at max(image, copy), so a longer headline grows the band instead
   of overflowing it.

   Detail pages keep the banner-above-copy form: their inline ledger makes the
   copy column far taller than the image.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .feature.feature-home.feature-banner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero";
    align-items: center;
  }

  .feature.feature-home.feature-banner > .feature-visual,
  .feature.feature-home.feature-banner > .feature-copy {
    grid-area: hero;
  }

  .feature.feature-home.feature-banner > .feature-visual {
    padding: 0;
    border-top: 0;
    border-bottom: 0;
    background: none;
  }

  .feature.feature-home.feature-banner > .feature-copy {
    z-index: 1;
    width: min(58%, 42rem);
    padding: var(--space-5);
  }
}

/* ---------------------------------------------------------------------------
   P2 typography and responsive corrections.

   Two systemic bugs this undoes:

   1. `ch` is the advance width of "0" -- roughly half a CJK glyph. Every `ch`
      max-width was therefore capping Chinese text at half its intended measure,
      which is why the hero slogan broke onto three lines at ~6 glyphs each.
   2. `letter-spacing: .16em` + `text-transform: uppercase` were applied to the
      Chinese kickers, nav and footer as well as the Latin brand line. Uppercase
      is a no-op on Chinese; the tracking just pulls the glyphs apart.
--------------------------------------------------------------------------- */
.section-kicker,
.issue-meta,
.nav-links a,
.inline-ledger dt,
.signal-ledger dt,
.issue-side p,
.footer-copy {
  letter-spacing: 0.04em;
  text-transform: none;
}

.brand-kicker {
  white-space: nowrap;
}

.feature-title {
  max-width: 11em;
}

.feature-dek {
  max-width: 26em;
}

/* An article headline is not a standing slogan: the hero scale makes weekly
   titles wrap into an unreadable stack. */
.feature-detail .feature-title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  line-height: 1.25;
  max-width: 20em;
}

@media (max-width: 639px) {
  .nav {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }

  .nav-links {
    gap: 20px;
  }
}

@media (min-width: 1180px) {
  .feature-title {
    max-width: 9em;
  }

  .feature.feature-banner .feature-title {
    max-width: 9em;
  }

  .feature.feature-detail .feature-title {
    max-width: 20em;
  }
}

/* ---------------------------------------------------------------------------
   P2 chart band and the /method/egg/ explainer.

   The SVG is authored in a 400-unit viewBox because text inside an SVG scales
   with the viewBox: a desktop-sized coordinate system rendered into a 343px
   phone column would shrink the axis labels to ~4px. So the coordinate system
   is mobile-first and `max-width` caps the desktop scale factor instead. Every
   Chinese string sits in the HTML around the chart, where it reflows.

   No `ch` units anywhere in this block: `1ch` is the advance width of "0",
   roughly half a CJK glyph.
--------------------------------------------------------------------------- */
.chart-band {
  display: grid;
  gap: var(--space-3);
}

.chart-head h2,
.method-block h2,
.stage-card .stage-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem);
}

.stage-card .stage-name {
  font-size: 1.12rem;
  line-height: 1.5;
}

.chart-figure {
  margin: 0;
  /* tighter than the other framed blocks: on a 343px column every 6px of
     padding is 6px the chart's own labels lose to downscaling */
  padding: 10px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.38), rgba(11, 13, 15, 0.18));
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Keeps the viewBox-to-pixel scale near 1 on wide screens, so the 12-unit
     axis labels land at a normal reading size instead of being blown up. */
  max-width: 30rem;
  margin-inline: auto;
}

.chart-figure figcaption {
  margin-top: 12px;
  color: rgba(154, 147, 136, 0.92);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 34em;
}

.chart-side {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(233, 221, 197, 0.82);
  font-size: 0.95rem;
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chart-legend li::before {
  content: "";
  display: block;
  width: 22px;
  height: 0;
  border-top-width: 2px;
  border-top-style: solid;
}

.chart-legend-close::before {
  border-top-color: var(--paper-warm);
}

.chart-legend-ma-short::before {
  border-top-color: var(--gold-soft);
}

.chart-legend-ma-long::before {
  border-top-color: var(--mist-gray);
  border-top-style: dashed;
}

.chart-note {
  margin: 0;
  color: rgba(233, 221, 197, 0.8);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 34em;
}

.chart-note a,
.method-block a,
.about-copy a {
  border-bottom: 1px solid var(--line-strong);
  color: var(--paper-warm);
}

.chart-note a:hover,
.method-block a:hover,
.about-copy a:hover,
.chart-note a:focus-visible,
.method-block a:focus-visible,
.about-copy a:focus-visible {
  border-bottom-color: var(--gold-soft);
}

.method-block {
  display: grid;
  gap: var(--space-3);
}

.method-block p {
  margin: 0;
  color: rgba(233, 221, 197, 0.8);
  font-size: 1rem;
  line-height: 1.85;
  max-width: 40em;
}

.method-priority {
  color: var(--paper-warm);
  font-family: var(--font-display);
  line-height: 1.9;
}

.stage-cycle {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.stage-card {
  display: grid;
  gap: 10px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.38), rgba(11, 13, 15, 0.18));
}

.stage-card .stage-rule,
.stage-card .stage-meaning {
  margin: 0;
  color: rgba(233, 221, 197, 0.8);
  font-size: 0.95rem;
  line-height: 1.8;
}

.stage-card .stage-meaning {
  color: rgba(154, 147, 136, 0.92);
}

@media (min-width: 768px) {
  .chart-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
    /* stretch would give the figure the height of the taller ledger column and
       leave a bordered box half full of nothing */
    align-items: start;
  }

  .chart-head {
    grid-column: 1 / -1;
  }

  /* two columns keeps the reading ledger about as tall as the chart beside it */
  .chart-side .signal-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3);
  }

  .stage-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

@media (min-width: 1180px) {
  .chart-figure {
    padding: var(--space-2);
  }

  .stage-cycle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   P2 reading order (Richmond, 2026-09-01).

   The page used to open with three governance blocks -- reference banner,
   manual-score notice, research ledger -- so a reader hit disclosure before
   ever reaching the story. Governance now closes the page as a "you can check
   this" ending, with two exceptions Richmond kept up top: the reference banner
   (a page that is not a formal archive says so before it is read) and the data
   as-of date in the hero ledger.
--------------------------------------------------------------------------- */
.disclosure-band {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.38), rgba(11, 13, 15, 0.18));
}

.disclosure-band h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem);
}

.chart-issue {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

.chart-issue a {
  border-bottom: 1px solid var(--line-strong);
  color: var(--paper-warm);
}

.chart-issue a:hover,
.chart-issue a:focus-visible {
  border-bottom-color: var(--gold-soft);
}

/* 收尾帶維持 768px 起的兩欄，**不再往上加欄**。原本這裡是
   `repeat(auto-fit, minmax(15rem, 1fr))`，那條規則寫在收尾帶只有三到四張
   governance 卡片的年代；當期四層分析上站後同一帶會掛到七張，auto-fit 在
   1180px 容器下開成四欄＝每欄 265px，中文一行只放得下約 16 個全角字，而那
   四欄裡放的正是當期判讀的完整句子（2026-09-02 實測）。570px（約 35 字）
   才是這些卡片該有的行長，所以欄數封在兩欄，改由 .layers-card 自己升為整列
   來製造層級。 */

/* ---------------------------------------------------------------------------
   Unbreakable-word blowout (found 2026-09-01 by measuring the built page at
   375px; predates the reading-order change).

   The disclosure list carries 64-character digests and repo paths. With no
   wrapping rule those grew the <ul> to 856px inside a 343px column, the grid
   item grew with it, and the whole detail page scrolled sideways on a phone.
   `min-width: 0` on the column items stops the next one of these from
   propagating out of its track.
--------------------------------------------------------------------------- */
.source-list li,
.conditions-list li {
  overflow-wrap: anywhere;
}

.story-column,
.analysis-column,
.ledger-card,
.lead-card,
.chart-side,
.chart-figure {
  min-width: 0;
}

/* 本期引用數值：把 data-tier 宣告攤給讀者看，而不是只存在 build 的允許集裡 */
.figures-block {
  margin: 0 0 var(--space-3);
}

.figures-block h3 {
  margin: 0 0 12px;
  color: var(--gold-soft);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.figures-ledger {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.figures-ledger div {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.figures-ledger dt {
  color: rgba(233, 221, 197, 0.82);
  font-size: 0.95rem;
}

.figures-ledger dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.5;
}

.figure-provenance {
  color: rgba(154, 147, 136, 0.92);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .figures-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

@media (min-width: 1180px) {
  .figures-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 六欄位契約的讀者向部分：未知／反面證據／失效條件逐條列出 */
.contract-groups {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.contract-group h3 {
  margin: 0 0 10px;
  color: var(--gold-soft);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.contract-card .conditions-list {
  display: grid;
  gap: 8px;
  margin: 0;
  list-style: none;
}

/* 近幾個交易日的醉度：數字串，最新一筆加粗 */
.tipsy-trail {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tipsy-trail strong {
  color: var(--gold-soft);
  font-weight: 600;
}

.trail-scale {
  color: rgba(154, 147, 136, 0.92);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* 訂閱與社群：footer 一行，不搶版位 */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-top: 12px;
}

.footer-links a {
  color: rgba(154, 147, 136, 0.92);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--paper-warm);
  border-bottom-color: var(--gold-soft);
}

/* ---------------------------------------------------------------------------
   P3 版面節奏（Richmond 2026-09-02：「內容不錯，版面可以更加賞心悅目」）。

   動工前把每一頁量過一遍（1280px 視窗、1180px 容器）。問題全是版位問題，
   不是配色問題：

   1. 週報收尾帶在 1180px 下開成四欄 265px，卻裝著當期判讀的完整句子（中文
      一行約 16 個全角字）；同時 grid 預設的 `align-items: stretch` 把內容矮的
      卡片拉到同列最高者的高度——「研究帳本」卡的框線底下實測空了 243px，
      「會改變判讀的變數」空了 200px。而 `.ledger-card-primary`／`-secondary`
      兩張早就各自 `align-self: start`，所以同一列本來就不齊，stretch 沒有換到
      任何整齊，只換到空盒。
   2. 方法頁的內文欄 640px（40 個全角字，這個行長是對的），但 `.stage-cycle`
      卡列用滿 1180px。同一頁兩條右邊界，看起來不像留白，像沒排完。標題也
      只有字級一種層級，沒有錨點。
   3. 計分頁六張表全部撐到 1180px，包含只有兩欄的評級表——「A」與「65 – 100」
      之間隔了 360px 空白，讀者得橫著找對應值。

   對策是同一件事的三個面：**給每一頁一條共用的右邊界，並讓標題有地方站。**
   方法頁把標題移進左欄軌（`.method-intro` 這個原本沒有任何規則的 class 正好
   用在這裡），內文、卡列、表格與分隔線全部收在同一條線上；收尾帶封在兩欄並
   停止拉伸，四層讀法升為整列；表格依欄數各自收到該有的寬度。
--------------------------------------------------------------------------- */

/* --- 週報收尾帶 ---------------------------------------------------------- */

.closing-band {
  /* 內容矮的卡片不該被拉到同列最高者的高度：那會在框線裡留下半個空盒。 */
  align-items: start;
}

@media (min-width: 768px) {
  /* 列距大於欄距：同一列的兩張卡片是並讀的，上下兩列之間才需要斷開。 */
  .closing-band {
    row-gap: var(--space-5);
  }

  /* 四層讀法是當期判讀的頭條，而且它內部是四段完整句子——它要的是整列寬度，
     不是四分之一。升為整列之後剩下的卡片剛好兩兩成對。 */
  .closing-band > .layers-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1180px) {
  /* 只有在整列寬度下四層才排得開成 2×2；768–1179px 之間欄寬不足，維持單欄。 */
  .closing-band > .layers-card .contract-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-3);
  }
}

/* --- 方法頁：標題左欄軌 -------------------------------------------------- */

/* `.page-intro` 的子元素全部 `margin: 0`（`.section-kicker` 只有 12px 下邊距），
   垂直間距本來預期由外層給——但 `.page-intro` 不是 grid，也沒有 gap。單段導言看
   不出來，`/method/value/scoring/` 的兩段導言就直接黏在一起了（手機版實測 0px
   間距）。這裡把導言收成 grid，間距一次講清楚。 */
.method-intro {
  display: grid;
  row-gap: var(--space-2);
}

.method-intro > .section-kicker {
  /* row-gap 接手；留著會變成 12px margin ＋ 16px gap。 */
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  /* 14rem 標題軌 ＋ 40px 溝 ＋ 40em 內文欄。內文欄寬直接等於 `.method-block p`
     既有的 40em 上限，於是內文的右邊界與跨欄元素的右邊界是同一條線；容器剩下
     的空白因此讀起來像頁邊，不像沒排完。 */
  .method-block,
  .method-intro {
    display: grid;
    max-width: calc(14rem + var(--space-5) + 40em);
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    column-gap: var(--space-5);
  }

  .method-block > * {
    grid-column: 2;
  }

  .method-block > h2 {
    grid-column: 1;
    /* 左欄軌只有 224px，1.9rem 的標題在中文會斷成三行。降一級讓它讀起來像
       邊欄標題，而不是被壓縮的大標。 */
    font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
    line-height: 1.5;
  }

  /* 攤開來看的元素用滿兩欄——縮進右欄會比內文還窄。`1 / -1` 在這裡是確定的：
     欄軌是顯式定義的兩欄，不是 implicit grid。 */
  .method-block > .stage-cycle,
  .method-block > .spec-table-wrap,
  .method-block > .signal-ledger {
    grid-column: 1 / -1;
  }

  /* 內文已經被欄寬限住，再留 max-width 只會讓右邊界比跨欄元素縮進一小段。 */
  .method-block > p,
  .method-block > .method-rules {
    max-width: none;
  }

  /* 三欄在 904px 下是 275px（約 17 個全角字），比內文還窄。兩欄 432px 才與
     這一頁其他文字的行長相稱。 */
  .method-block > .stage-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 五列的定義列表在 904px 下單欄會空掉一大半。 */
  .method-block > .signal-ledger {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    column-gap: var(--space-5);
  }

  /* 區塊之間原本只有一致的 64px 間距，沒有任何邊界訊號。改成 40px ＋ 一條細線
     ＋ 40px，線寬跟著 max-width 收在同一條右邊界上。 */
  .main > .method-block + .method-block {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line-soft);
  }

  /* 開場：kicker 與 h1 橫跨兩欄，導言縮進右欄。導言一進來就把那條對齊線立好，
     底下每一個區塊的內文都接在同一條線上。 */
  .method-intro > .section-kicker,
  .method-intro > h1 {
    grid-column: 1 / -1;
  }

  .method-intro > p:not(.section-kicker) {
    grid-column: 2;
    /* 導言是這一頁的「一句話版本」，值得比內文大半級。 */
    font-size: 1.06rem;
    max-width: none;
  }
}

/* --- 雞蛋圖 -------------------------------------------------------------- */

/* 這張圖原生 1024×1536，`.about-frame img` 放掉 aspect-ratio 之後在桌機上實測
   渲染成 1132×1698——比視窗高將近兩倍，而且放大超過原生解析度。讀者要滾將近
   兩個螢幕才看得到底下的六張階段卡。它自己的圖說說它是「研究掛畫」，掛畫不需要
   佔滿版面。26rem 在 375px 欄寬下大於欄寬，所以這條在手機上是空轉的。 */
.method-block > figure.about-frame {
  max-width: 26rem;
}

/* --- 計分表 -------------------------------------------------------------- */

/* 兩欄短表撐到滿寬時，列標頭與數值之間會隔出一大段空白。只收沒有掛
   `.spec-table-wide` 的表：寬表要的是整個內文欄寬，它的 30rem 地板也還在。
   用 `:has()` 是為了不動 `_spec_table()` 的 class 屬性——那個字串有測試在數。
   舊瀏覽器不認 `:has()` 會讓整條規則失效，退回目前的滿寬，不會壞掉。 */
@media (min-width: 768px) {
  .spec-table-wrap:not(:has(.spec-table-wide)) {
    max-width: 28rem;
  }
}

/* 表頭與資料列之間用強線分開，其餘列維持細線；數值欄用等寬數字，
   0.40 / 0.35 / 0.30 才會對齊成一欄。 */
.spec-table thead th {
  border-bottom-color: var(--line-strong);
}

.spec-table td {
  font-variant-numeric: tabular-nums;
}

.spec-table caption {
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--line-soft);
}

/* --- 卡片格線 ------------------------------------------------------------ */

.salon-grid {
  /* 同 `.closing-band`：`/method/` 的七張卡在兩欄下實測有一張框底空了 65px。 */
  align-items: start;
}

@media (min-width: 768px) {
  /* 七張卡在兩欄下最後一列只剩一張，右邊空一格。讓落單的最後一張橫跨兩欄，
     那一列就收得乾淨。`:nth-child(n+4)` 是門檻：首頁那組只有兩張、
     `/method/value/` 的產線狀態只有一張，那兩處不該被這條規則碰到。 */
  .salon-grid > :nth-child(n+4):last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
   /knowledge/ ——— 檔案驅動的一區（Richmond 2026-09-02：「像 blog 一樣，可以
   逐漸增長」）。

   這一區跟 `/method/` 的差別在於它會長大，所以樣式不能假設條目數。術語用
   `<dl>` 而不是 `<table>`：一個詞底下是多個面向（標準名稱、盤面樣子、旁註、
   連結），不是列與欄的交叉——那是定義列表的形狀，不是表格的形狀。

   版式沿用 `.stage-card`：同一個站上已經有兩處在用「一格一個概念」的卡片，
   再發明第三種只會讓頁面看起來像拼的。
--------------------------------------------------------------------------- */

.term-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.term {
  display: grid;
  gap: 8px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.38), rgba(11, 13, 15, 0.18));
  /* 同 `.story-column` 那組：grid item 的 automatic minimum size 是內容寬，
     長的標準名稱會把整欄頂開。 */
  min-width: 0;
  /* 文章內文可以連到 `#term-<slug>`，錨點落地時不要貼著視窗頂緣。 */
  scroll-margin-top: var(--space-5);
}

.term dt {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--paper-warm);
}

.term dd {
  margin: 0;
}

.term-standard {
  color: var(--gold-soft);
  font-size: 0.9rem;
  line-height: 1.7;
}

.term-tape {
  color: rgba(233, 221, 197, 0.8);
  font-size: 0.95rem;
  line-height: 1.8;
}

.term-note {
  color: rgba(154, 147, 136, 0.92);
  font-size: 0.9rem;
  line-height: 1.8;
}

.term-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 4px;
}

.term-links a {
  color: rgba(233, 221, 197, 0.82);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--line-strong);
}

.term-links a:hover,
.term-links a:focus-visible {
  color: var(--paper-warm);
  border-bottom-color: var(--gold-soft);
}

@media (min-width: 768px) {
  /* 同 `.stage-cycle` 的斷點與欄數：術語是用來掃的，不是逐行讀的，兩欄比
     單欄少一半的捲動距離。 */
  .term-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  /* 知識索引的列表只有兩格（日期、內容），沒有週報那個「微醺分數」右欄；
     沿用 `.issue-row` 的三欄會在右邊留一條 160px 的空白。 */
  .knowledge-list .issue-row {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  /* 選書列沒有 `.issue-number` 那格，沿用兩欄會把唯一的 `.issue-body`
     擠進 88px 那欄；讓它獨佔整列寬度。 */
  .knowledge-list .issue-row.reading-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  /* 在左欄軌版式裡，術語表跟卡列一樣用滿兩欄——縮進右欄會比內文還窄。 */
  .method-block > .term-list {
    grid-column: 1 / -1;
  }
}

/* 索引頁的日期數字沿用期號那格的樣式，但它是 `09.02` 不是 `01`，等寬數字
   才不會讓每一列的點對不齊。 */
.knowledge-list .issue-number {
  font-variant-numeric: tabular-nums;
}

/* 週報目錄與知識索引都會用到的空狀態：沒有內容時它是唯一的一格，
   `.issues-list` 的 grid 不該把它擠成一欄的寬度。 */
.empty-state-wide {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
   /behavior/ ——— 市場心理。索引依三章分組，文章底下掛「本篇概念」。

   章節是這一區的閱讀路徑（追高 → 預期 → 泡沫 → 處分效果 → 錨定 → 注意力 →
   牛市自信 → 社會比較 → 平靜），九篇平鋪會讓讀者從第一篇讀到第九篇都不知道
   自己在哪裡，所以章節標題要有重量，不能只是一條分隔線。
--------------------------------------------------------------------------- */

.chapter-band + .chapter-band {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}

.chapter-head {
  margin-bottom: var(--space-3);
}

.chapter-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem);
}

.chapter-blurb {
  margin: 8px 0 0;
  color: rgba(154, 147, 136, 0.92);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 40em;
}

/* 本篇概念：文章與術語表之間的那條連結，兩邊都由 concepts 宣告推導。 */
.concept-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.concept-list li {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.concept-list a {
  color: var(--paper-warm);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--line-strong);
  justify-self: start;
}

.concept-list a:hover,
.concept-list a:focus-visible {
  border-bottom-color: var(--gold-soft);
}

.concept-list span {
  color: rgba(233, 221, 197, 0.8);
  font-size: 0.95rem;
  line-height: 1.8;
}

@media (min-width: 1024px) {
  /* 同 .stage-cycle：概念清單用滿兩欄，不縮在右欄裡。 */
  .method-block > .concept-list {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

/* ---------------------------------------------------------------------------
   週報開頭：氣氛標籤疊在 banner 上，帳本移到右欄。

   兩件事都是 Richmond 2026-09-06 指的同一個問題——桌機版這一段浪費版面。

   1. 氣氛標籤原本是圖下方的 figcaption，而且帶著一整句 banner 設計說明。說明
      移除、標籤上圖（做法比照首頁 hero 的疊字，只是這裡疊的是一個小標籤，不是
      整個 copy 區塊）。用 absolute 而非 grid 疊放：標籤高度固定且遠小於圖，
      不會有「文字比圖高」的情況，不需要 grid 撐高列。

   2. `.inline-ledger` 原本在所有寬度都是單欄，於是桌機版把三列疊成一根細長條，
      右邊六成完全空著。900px 以上改成兩欄版面：左邊標題與導言，右邊帳本。
      斷點取 900 而非 768——768 時右欄只剩不到 16rem，帳本的 dd 會折行。
--------------------------------------------------------------------------- */
.feature-visual.banner-has-mood {
  position: relative;
}

/* 疊字覆蓋整張圖（inset 對齊外層框線內距），內容靠左、垂直置中——位置與字級
   比照首頁 hero，那裡的 banner 左側三分之二本來就是留白，週報這六張同一個
   構圖。用 flex 置中而不是固定偏移：六張圖高度一致，但手機到桌機差三倍，
   固定偏移會讓標籤在窄螢幕貼邊。 */
.feature-visual.banner-has-mood > .banner-mood {
  position: absolute;
  inset: var(--space-2);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0;
  padding: 0 clamp(20px, 6%, 72px);
  border-radius: var(--radius-image);
  /* 六張 banner 左側明暗不一，字級放大之後更需要底。左濃右透的漸層比藥丸框
     不搶戲，也不會在淺色那幾張上讀不到。 */
  background: linear-gradient(
    90deg,
    rgba(6, 9, 12, 0.74) 0%,
    rgba(6, 9, 12, 0.5) 34%,
    rgba(6, 9, 12, 0) 64%
  );
  /* 疊在圖上但不吃滑鼠事件：`.feature-visual:hover img` 的放大要照常觸發。 */
  pointer-events: none;
}

.feature-visual.banner-has-mood .banner-mood-kicker {
  margin-bottom: 8px;
  color: var(--gold-soft);
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.95rem);
  letter-spacing: 0.16em;
}

.feature-visual.banner-has-mood .banner-mood-state {
  color: var(--paper-warm);
  font-family: var(--font-display);
  /* 與首頁 hero 同一組 clamp（Richmond 2026-09-06：參考首頁的字級與位置）。
     它會比這一頁的文章標題大——那是刻意的：氣氛是圖上的視覺標籤，不參與
     內文的層級競賽，縮到標題以下就退回成看不見的註腳，也就是原本的問題。 */
  font-size: clamp(2.8rem, 2rem + 3vw, 5.25rem);
  font-weight: 600;
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

@media (min-width: 900px) {
  .feature.feature-detail.feature-banner > .feature-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.85fr);
    column-gap: var(--space-5);
    align-items: start;
  }

  /* `.feature-copy > * + *` 的 16px 上邊距在 grid 兩欄下會把右欄也往下推，
     所以左欄自己接管垂直節奏，右欄從第一列開始。 */
  .feature.feature-detail.feature-banner > .feature-copy > * {
    grid-column: 1;
    margin-top: 0;
  }

  .feature.feature-detail.feature-banner > .feature-copy > .feature-title {
    margin-top: 12px;
  }

  .feature.feature-detail.feature-banner > .feature-copy > .feature-dek {
    margin-top: 16px;
  }

  .feature.feature-detail.feature-banner > .feature-copy > .inline-ledger {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
    padding-left: var(--space-4);
    border-left: 1px solid var(--line-soft);
  }
}

/* 選股結果與揭露兩帶相鄰，兩條邊框會疊在一起看起來像一條粗線。上面那帶收掉
   下緣，交界只留揭露帶自己的上緣。 */
.selection-band {
  border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Reader edition: keep the salon's quiet, warm-gold hierarchy while making
   the first screen useful before a reader reaches a chart or a banner.
--------------------------------------------------------------------------- */

.nav-quick-link,
.mobile-menu {
  display: none;
}

.reader-summary {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(199, 166, 106, 0.08), transparent 72%);
}

.lead-grid-pair > :only-child {
  grid-column: 1 / -1;
}

.reader-meta {
  color: var(--mist-gray);
  font-size: 0.875rem;
  line-height: 1.75;
}

.reader-summary-details summary {
  cursor: pointer;
  padding: 12px 0;
  color: var(--gold-soft);
}

:where(#issue-checks, #issue-chart, #issue-story, #issue-conditions, #issue-sources, [id^="article-section-"]) {
  scroll-margin-top: 24px;
}

.reader-summary > * {
  min-width: 0;
}

.reader-summary dt,
.issue-toc h2,
.issue-pager-label,
.holdings-jumps a,
.holdings-coverage-item dt,
.table-scroll-hint {
  color: var(--gold-soft);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.reader-summary dd,
.holdings-coverage-item dd {
  margin: 4px 0 0;
  color: rgba(233, 221, 197, 0.86);
  font-size: 1rem;
  line-height: 1.75;
}

.reader-summary h1 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--paper-warm);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 2vw, 3.1rem);
  font-weight: 600;
  line-height: 1.18;
  max-width: 18em;
}

.issue-toc {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.issue-toc h2 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 500;
}

.issue-toc ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.3rem;
}

.issue-toc a,
.issue-pager a,
.holdings-jumps a {
  border-bottom: 1px solid var(--line-strong);
  color: var(--paper-warm);
  line-height: 1.65;
}

.issue-toc a:hover,
.issue-toc a:focus-visible,
.issue-pager a:hover,
.issue-pager a:focus-visible,
.holdings-jumps a:hover,
.holdings-jumps a:focus-visible {
  border-bottom-color: var(--gold-soft);
}

.issue-pager,
.holdings-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.holdings-jumps {
  display: grid;
  gap: 12px;
  align-items: start;
}

.holdings-jumps h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem);
  line-height: 1.3;
}

.holdings-jumps ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.issue-pager-label {
  color: rgba(154, 147, 136, 0.92);
}

.holdings-coverage-list {
  display: grid;
  gap: 12px;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.holdings-coverage-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.holdings-coverage-name {
  color: var(--paper-warm);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.5;
}

.holdings-coverage-status {
  color: rgba(233, 221, 197, 0.78);
  font-size: 0.95rem;
  line-height: 1.7;
}

.holdings-coverage-item a {
  justify-self: start;
  color: var(--gold-soft);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--line-strong);
}

.egg-stats {
  display: grid;
  gap: 12px;
}

.table-scroll-hint {
  margin: 10px 0 0;
  color: rgba(154, 147, 136, 0.92);
  line-height: 1.6;
}

/* Holdings stay a table: its columns remain comparable, while the wrapper
   takes the horizontal overflow instead of widening the whole page. */
.holdings-table-wrap,
.holdings-fund-section .spec-table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-soft);
}

.holdings-table,
.holdings-fund-section .spec-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.7;
}

.holdings-table th,
.holdings-table td,
.holdings-fund-section .spec-table th,
.holdings-fund-section .spec-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.holdings-table thead th,
.holdings-fund-section .spec-table thead th {
  color: var(--mist-gray);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.holdings-table tbody th,
.holdings-table td:first-child,
.holdings-fund-section .spec-table tbody th,
.holdings-fund-section .spec-table td:first-child {
  background: var(--surface-raised);
  color: var(--paper-warm);
  font-weight: 600;
}

.holdings-table tbody tr:last-child th,
.holdings-table tbody tr:last-child td,
.holdings-fund-section .spec-table tbody tr:last-child th,
.holdings-fund-section .spec-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .reader-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .holdings-coverage-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

@media (max-width: 767px) {
  .site-header,
  .site-footer,
  .main {
    width: min(calc(100% - 24px), var(--container));
  }

  .nav {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 0 12px;
  }

  .site-header {
    padding-top: 8px;
  }

  .brand-mark {
    gap: 3px;
  }

  .brand-kicker {
    font-size: 0.72rem;
  }

  .brand-name {
    font-size: 1.15rem;
  }

  .nav-desktop {
    display: none;
  }

  .nav-quick-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    color: var(--paper-warm);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line-strong);
  }

  .mobile-menu {
    display: block;
    position: relative;
  }

  .mobile-menu > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    color: var(--paper-warm);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    list-style: none;
  }

  .mobile-menu > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu > summary::after {
    content: "+";
    margin-left: 6px;
    color: var(--gold-soft);
    font-size: 1.1rem;
  }

  .mobile-menu[open] > summary::after {
    content: "−";
  }

  .mobile-menu-links {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 3;
    display: grid;
    min-width: min(16rem, calc(100vw - 24px));
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    background: rgba(7, 17, 28, 0.98);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
  }

  .mobile-menu-links a {
    justify-content: flex-start;
    min-height: 42px;
    font-size: 0.875rem;
  }

  /* A small screen gets the thesis first; the image remains present as the
     visual pause after it. Desktop overlay rules begin at 768px and are not
     touched here. */
  .feature.feature-banner .feature-copy {
    order: -1;
  }

  .feature.feature-banner .feature-visual {
    order: 0;
    width: min(100%, 38rem);
    justify-self: center;
    padding: 10px;
  }

  .feature.feature-banner .feature-visual img {
    max-height: 13rem;
    object-fit: cover;
  }

  .reader-summary {
    padding: 20px 0;
  }

  .reader-summary h1 {
    font-size: clamp(1.8rem, 1.45rem + 1.8vw, 2.15rem);
    line-height: 1.24;
  }

  .feature.feature-detail.feature-banner .feature-visual img {
    max-height: 12rem;
  }

  .chart-ledger.signal-ledger,
  .egg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-ledger.signal-ledger > :last-child {
    grid-column: 1 / -1;
  }

  .egg-stats dt,
  .egg-stats dd {
    font-size: max(0.875rem, 14px);
  }

  /* Charts deliberately contain only numeric and month axis labels, so this
     safely raises every SVG text node to a legible phone size. */
  .chart-svg text {
    font-size: 17px;
  }

  .holdings-table th:first-child,
  .holdings-table td:first-child,
  .holdings-fund-section .spec-table th:first-child,
  .holdings-fund-section .spec-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 8px 0 12px rgba(7, 17, 28, 0.72);
  }
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
  }
}

/* The additional ownership link needs the compact navigation on narrow laptops. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-desktop { display: none; }
  .nav-quick-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--paper-warm); font-size: 0.875rem; border-bottom: 1px solid var(--line-strong); }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--paper-warm); font-size: 0.875rem; list-style: none; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu > summary::after { content: "+"; margin-left: 6px; color: var(--gold-soft); font-size: 1.1rem; }
  .mobile-menu[open] > summary::after { content: "−"; }
  .mobile-menu-links { position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; display: grid; min-width: min(16rem, calc(100vw - 24px)); padding: 8px 14px; border: 1px solid var(--line-strong); background: rgba(7, 17, 28, 0.98); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3); }
  .mobile-menu-links a { justify-content: flex-start; min-height: 42px; font-size: 0.875rem; }
}

/* Ownership reader edition: quiet editorial hierarchy, traceable figures. */
.ownership-content { max-width: 1080px; margin: auto; }
.ownership-content [hidden] { display: none !important; }
.own-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 24px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--mist-gray); }
.own-nav a:hover, .own-nav a:focus-visible { color: var(--paper-warm); }
.own-hero { padding: 48px 0 24px; max-width: 800px; }
.own-hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.25; margin: 8px 0 16px; letter-spacing: .02em; }
.own-hero > p:last-child { color: var(--mist-gray); font-size: 17px; }
.own-kicker { font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--gold-soft); margin: 0 0 8px; }
.own-search { padding: 0 0 24px; }
.own-search label { display: block; font-size: 14px; margin-bottom: 12px; }
.own-search input { display: block; width: 100%; max-width: 800px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface-raised); color: var(--paper-warm); padding: 18px 20px; font: inherit; font-size: 17px; }
.own-search input:focus { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.own-search-help, .own-note, .own-chart-scale, .own-boundary { color: var(--mist-gray); font-size: 14px; line-height: 1.8; }
.own-search-help { margin: 10px 0 0; }
.own-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.own-feature { display: block; padding: 32px; border-top: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(199,166,106,.045), transparent); }
.own-feature h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 12px 0 16px; }
.own-feature > p:not(.own-kicker) { color: var(--mist-gray); font-size: 15px; line-height: 1.8; }
.own-feature > span { display: flex; justify-content: space-between; padding-top: 24px; color: var(--gold-soft); font-size: 13px; }
.own-feature:hover { border-color: var(--paper-warm); }
.own-directory { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; }
.own-directory li { border-bottom: 1px solid var(--line-soft); }
.own-directory a { display: flex; flex-direction: column; padding: 24px 0; gap: 8px; }
.own-directory strong { font-size: 19px; font-weight: 500; }
.own-directory a > span:not(.own-kicker) { color: var(--mist-gray); font-size: 13px; line-height: 1.7; }
.own-directory .own-entry-date { display: flex; justify-content: space-between; }
.own-directory a:hover strong { color: var(--gold-soft); }
.own-panel { padding: 32px 0; border-top: 1px solid var(--line-strong); margin: 16px 0 32px; }
.own-panel-heading { display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.own-panel h2, .own-guide h2 { font-size: 25px; margin: 0 0 12px; }
.own-date { color: var(--gold-soft); font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.own-chart { padding: 24px 0; }
.own-chart figcaption { color: var(--paper-warm); font-size: 15px; margin-bottom: 24px; }
.own-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.own-bars li { display: grid; grid-template-columns: minmax(140px,1fr) minmax(0,2fr) 80px; gap: 24px; align-items: center; font-size: 14px; }
.own-bar-label { overflow-wrap: anywhere; }
.own-bar-track { display: block; height: 12px; background: rgba(199,166,106,.08); }
.own-bar-track i { display: block; height: 100%; background: var(--gold-soft); }
.own-bars strong { text-align: right; color: var(--paper-warm); font-variant-numeric: tabular-nums; font-weight: 500; }
.own-chart-scale { margin: 24px 0 0; font-size: 12px; }
.own-source { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; color: var(--mist-gray); font-size: 12px; line-height: 1.7; padding: 12px 0; }
.own-source > a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.own-source summary, .own-detail summary { cursor: pointer; }
.own-source details p { max-width: 480px; overflow-wrap: anywhere; }
.own-detail { border-top: 1px solid var(--line-soft); margin-top: 16px; }
.own-detail > summary { font-size: 14px; padding: 20px 0; color: var(--paper-warm); }
.own-table-wrap { overflow-x: auto; }
.own-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.own-table th { text-align: left; color: var(--mist-gray); font-weight: 400; font-size: 12px; padding: 12px 16px 12px 0; white-space: nowrap; }
.own-table td { padding: 16px 16px 16px 0; vertical-align: top; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.own-table td:nth-child(3), .own-table td:nth-child(4) { white-space: nowrap; }
.own-limit { font-size: 13px; color: var(--mist-gray); border-left: 2px solid var(--line-strong); padding-left: 16px; margin-top: 24px; }
.own-empty { display: flex; gap: 16px; color: var(--mist-gray); padding: 20px; background: rgba(199,166,106,.04); font-size: 14px; line-height: 1.8; }
.own-empty strong { color: var(--gold-soft); font-size: 12px; letter-spacing: .06em; }
.own-timeline { list-style: none; padding: 0; margin: 32px 0 0; }
.own-timeline > li { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 24px; padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.own-timeline time { font-size: 13px; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.own-timeline h3 { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.own-timeline p { font-size: 14px; margin: 0; }
.own-guide { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.own-guide > div { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.own-guide strong, .own-guide span { display: block; }
.own-guide strong { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.own-guide span { font-size: 13px; line-height: 1.8; color: var(--mist-gray); }
.own-boundary { padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: 12px; }
@media (max-width: 640px) {
  .own-hero { padding-top: 32px; }
  .own-features, .own-directory, .own-guide > div { grid-template-columns: 1fr; gap: 16px; }
  .own-feature { padding: 24px; }
  .own-panel-heading { flex-direction: column; align-items: flex-start; }
  .own-bars li { grid-template-columns: minmax(0,1fr) 70px; gap: 6px 16px; }
  .own-bar-track { grid-column: 1; grid-row: 2; }
  .own-bars strong { grid-column: 2; grid-row: 1 / span 2; }
  .own-timeline > li { grid-template-columns: 1fr; gap: 12px; }
  .own-table { min-width: 560px; }
}

.own-hero-detail { padding: 28px 0 8px; }
.own-hero-detail h1 { font-size: clamp(27px, 3vw, 36px); }
.own-find { margin-bottom: 24px; }
.own-find > summary { cursor: pointer; font-size: 13px; color: var(--mist-gray); padding: 8px 0; }
.own-find[open] .own-search { padding-top: 20px; }