/* Hallmark · macrostructure: Split Studio · genre: editorial · theme: Atelier · enrichment: E5 Tier-A CSS type composition · nav: N9 · footer: Ft6 · audience: general · use: continuous reading · tone: art-editorial · anchor hue: cinnabar · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · mobile: pass (34, 49, 50–57) · icons: pass (30) */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
@import url("tokens.css");

html,
body { overflow-x: clip; }
html { scroll-behavior: smooth; background: var(--color-paper); }
* { box-sizing: border-box; }
::selection { background: var(--color-selection); color: var(--color-ink); }
body {
  margin: 0;
  min-width: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-accent-dark); text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-3xs); }
a:visited { color: var(--color-accent-dark); }
a:hover { text-decoration-thickness: 2px; }
a:active { opacity: 0.72; }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: var(--space-2xs); }
button { font: inherit; }
.skip-link {
  position: fixed; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: 50;
  padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper);
  transform: translateY(-180%); transition: transform var(--dur-short) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--space-2xs); background: var(--color-paper-sunken); }
.reading-progress__fill { width: 100%; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; }

.site-head { width: min(100% - var(--space-xl), 78rem); margin-inline: auto; padding-block: var(--space-lg) var(--space-md); }
.nav-edge { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.wordmark { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; text-decoration: none; white-space: nowrap; }
.head-actions { display: flex; align-items: center; gap: var(--space-sm); }
.control {
  min-height: 2.75rem; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-small); background: transparent; color: var(--color-ink); font-family: var(--font-ui);
  font-size: var(--text-sm); line-height: 1; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.control:hover, .control.is-hover { background: var(--color-accent-soft); }
.control:active, .control.is-active { transform: translateY(1px); }
.control:disabled, .control.is-disabled { cursor: not-allowed; opacity: 0.45; }
.control[aria-busy="true"], .control.is-loading { cursor: wait; }
.control[data-state="error"], .control.is-error { border-color: var(--color-accent); }
.control[data-state="success"], .control.is-success { background: var(--color-accent-soft); }
.chapter-nav { margin-block-start: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); }
.chapter-nav ul { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.chapter-nav a { display: block; padding: var(--space-sm) var(--space-md); color: var(--color-ink-soft); font-family: var(--font-ui); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.chapter-nav a:hover, .chapter-nav a[aria-current="page"] { background: var(--color-paper-sunken); color: var(--color-accent-dark); }
.menu-button { display: none; }
.breadcrumb { width: min(100% - var(--space-xl), 78rem); margin: var(--space-md) auto 0; color: var(--color-muted); font-family: var(--font-ui); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a { color: inherit; }

main { width: min(100% - var(--space-xl), 78rem); margin-inline: auto; }
.hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-lg) var(--space-xl); }
.hero-copy { min-width: 0; }
.eyebrow { margin: 0 0 var(--space-md); color: var(--color-accent-dark); font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: 0.08em; }
h1, h2, h3 { margin-block: 0; font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
h1 { max-width: 11ch; font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.035em; }
.dek { max-width: 39rem; margin: var(--space-xl) 0 0; color: var(--color-ink-soft); font-size: var(--text-md); line-height: 1.58; }
.hero-note { margin: var(--space-lg) 0 0; color: var(--color-muted); font-family: var(--font-ui); font-size: var(--text-sm); }
.glyph-composition { position: relative; min-height: 29rem; margin: 0; background: var(--color-paper-sunken); box-shadow: 0 var(--space-sm) var(--space-xl) var(--color-shadow); overflow: hidden; }
.glyph-composition::before, .glyph-composition::after { position: absolute; color: var(--color-ink); font-family: var(--font-display); line-height: 1; }
.glyph-composition::before { content: "妈"; inset: var(--space-lg) auto auto var(--space-lg); font-size: clamp(8rem, 18vw, 14rem); }
.glyph-composition::after { content: "m a"; inset: auto var(--space-lg) var(--space-lg) auto; font-size: clamp(4rem, 10vw, 8rem); letter-spacing: 0.08em; }
.glyph-thread { position: absolute; inset: 46% 7% auto 12%; height: var(--rule-hair); background: var(--color-accent); transform: rotate(-8deg); }
.glyph-label { position: absolute; inset: auto auto var(--space-xl) var(--space-lg); max-width: 15ch; color: var(--color-muted); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; }

.prose-section { padding-block: var(--space-2xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.section-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.section-grid.is-reversed { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.section-grid.is-reversed .section-heading { order: 2; }
.section-heading { position: sticky; top: var(--space-xl); min-width: 0; }
.section-heading h2 { max-width: 12ch; font-size: var(--text-2xl); line-height: 1.12; letter-spacing: -0.02em; }
.section-heading p { max-width: 24ch; margin: var(--space-md) 0 0; color: var(--color-muted); font-family: var(--font-ui); font-size: var(--text-sm); }
.prose { min-width: 0; }
.prose p { max-width: 68ch; margin: 0 0 var(--space-lg); }
.prose p + p { text-indent: 2em; }
.prose .no-indent, .prose figure + p, .prose table + p, .prose ul + p { text-indent: 0; }
.prose h3 { max-width: 28ch; margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-xl); line-height: 1.2; }
dfn { font-style: normal; font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-3xs); }
.source-ref { margin-inline-start: var(--space-3xs); font-family: var(--font-ui); font-size: var(--text-xs); text-decoration: none; }
.inline-head { color: var(--color-accent-dark); font-family: var(--font-ui); font-variant-caps: all-small-caps; font-weight: 700; letter-spacing: 0.06em; }

.comparison-band { margin-block: var(--space-xl); padding: var(--space-lg); border-block: var(--rule-heavy) solid var(--color-ink); background: var(--color-paper-raised); }
.comparison-band dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); margin: 0; }
.comparison-band div { min-width: 0; }
.comparison-band dt { color: var(--color-accent-dark); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; }
.comparison-band dd { margin: var(--space-xs) 0 0; }
.route-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-block: var(--space-xl); }
.route-node { min-width: 0; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule-strong); background: var(--color-paper-raised); }
.route-node strong { display: block; color: var(--color-accent-dark); font-family: var(--font-display); font-size: var(--text-lg); }
.route-node span { display: block; margin-block-start: var(--space-xs); color: var(--color-muted); font-family: var(--font-ui); font-size: var(--text-sm); }
.route-arrow { align-self: center; color: var(--color-accent); font-family: var(--font-ui); text-align: center; }
.table-wrap { overflow-x: auto; margin-block: var(--space-xl); border-block: var(--rule-hair) solid var(--color-rule-strong); }
table { width: 100%; min-width: 42rem; border-collapse: collapse; }
th, td { padding: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: top; }
th { color: var(--color-accent-dark); font-family: var(--font-ui); font-size: var(--text-sm); }
td:first-child { font-weight: 700; }
.myth-check { margin-block: var(--space-xl); }
.myth-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-lg); padding-block: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.myth-row strong { font-family: var(--font-display); font-size: var(--text-md); }
.myth-row p { margin: 0; }
.reading-path { display: flex; justify-content: space-between; gap: var(--space-lg); margin-block: var(--space-2xl); padding-block: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); font-family: var(--font-ui); }
.reading-path a { white-space: nowrap; }

.sources-list { list-style: none; padding: 0; }
.sources-list li { padding-block: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.sources-list strong { display: block; font-family: var(--font-display); font-size: var(--text-md); }
.sources-list p { margin: var(--space-sm) 0 0; }
.connection-note { margin-block: var(--space-xl); padding: var(--space-lg); border-inline-start: var(--rule-heavy) solid var(--color-accent); background: var(--color-accent-soft); }
.connection-note p { margin: 0; }

.site-footer { width: min(100% - var(--space-xl), 78rem); margin: var(--space-3xl) auto 0; padding-block: var(--space-2xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.foot-letter__close { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; }
.foot-letter__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: var(--space-lg) 0 0; color: var(--color-muted); font-family: var(--font-ui); font-size: var(--text-sm); }
.foot-letter__meta a { white-space: nowrap; }

@media (max-width: 60rem) {
  .hero-split, .section-grid, .section-grid.is-reversed { grid-template-columns: minmax(0, 1fr); }
  .section-grid.is-reversed .section-heading { order: 0; }
  .section-heading { position: static; }
  .section-heading h2 { max-width: 22ch; }
  .glyph-composition { min-height: 23rem; }
}

@media (max-width: 40rem) {
  .site-head, main, .breadcrumb, .site-footer { width: min(100% - 2rem, 78rem); }
  .site-head { padding-block-start: var(--space-md); }
  .menu-button { display: inline-flex; align-items: center; }
  .chapter-nav { display: none; }
  .chapter-nav[data-open="true"] { display: block; }
  .chapter-nav ul { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xs); }
  .chapter-nav a { min-height: 2.75rem; overflow: hidden; text-overflow: ellipsis; }
  .hero-split { gap: var(--space-xl); padding-block: var(--space-md) var(--space-lg); }
  h1 { font-size: var(--text-display-s); }
  .glyph-composition { min-height: 18rem; }
  .glyph-composition::before { font-size: 8rem; }
  .glyph-composition::after { font-size: 4rem; }
  .prose-section { padding-block: var(--space-xl); }
  .section-grid { gap: var(--space-lg); }
  .comparison-band dl, .route-map, .myth-row { grid-template-columns: minmax(0, 1fr); }
  .reading-path { flex-direction: column; }
  .reading-path a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .foot-letter__meta { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: var(--dur-micro); animation-iteration-count: 1; transition-duration: var(--dur-micro); }
}

@media print {
  .reading-progress, .menu-button, .theme-button, .chapter-nav { display: none; }
  body { background: var(--color-paper-raised); }
  .hero-split, .section-grid, .section-grid.is-reversed { grid-template-columns: 1fr; }
  .section-heading { position: static; }
  a { color: var(--color-ink); }
}