:root {
  --paper: #F3ECDF;
  --paper-2: #EAE0CE;
  --paper-3: #E2D5BE;
  --ink: #1D1915;
  --ink-2: #4E453C;
  --ink-3: #8A7D6E;
  --ember: #C2551F;
  --ember-deep: #9A3F13;
  --ember-tint: #F0D9C4;
  --rule: rgba(29,25,21,.16);
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --serif-title: "ZJP Serif", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --serif-body: "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@font-face {
  font-family: "ZJP Serif";
  src: url("/assets/fonts/serif-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { overflow-x: clip; color: var(--ink); background: var(--paper); font-family: var(--sans); line-break: strict; text-wrap: pretty; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 20% 20%, rgba(29,25,21,.018) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
}
body.menu-open { overflow: hidden; }
::selection { background: var(--ember); color: var(--paper); }
a { color: inherit; text-decoration: none; }
svg { display: block; max-width: 100%; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:not(.plain):not(.button-link) { background: linear-gradient(var(--ember), var(--ember)) 0 100% / 0 1px no-repeat; transition: background-size .28s ease, color .28s ease; }
a:not(.plain):not(.button-link):hover { color: var(--ember-deep); background-size: 100% 1px; }
:focus-visible { outline: 3px solid #E8792E; outline-offset: 4px; }

.skip-link { position: fixed; left: var(--gutter); top: 12px; z-index: 100; transform: translateY(-160%); background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip-link:focus { transform: none; }
.progress { position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; }

.site-header { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--gutter); border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.site-header.is-scrolled { background: rgba(243,236,223,.82); border-color: var(--rule); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif-title); font-weight: 700; }
.seal { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ember); color: var(--ember); font-family: var(--serif-title); font-weight: 700; transform: rotate(-2deg); line-height: 1; background: rgba(243,236,223,.52); }
.nav { display: flex; gap: clamp(16px, 2vw, 30px); font-size: 15px; }
.nav a { padding-block: 6px; }
.nav a[aria-current="page"] { color: var(--ember-deep); background-size: 100% 1px; }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--rule); background: transparent; color: var(--ink); }
.menu-button span:not(.sr), .menu-button::before, .menu-button::after { content: ""; display: block; width: 20px; height: 1px; margin: 5px auto; background: currentColor; }
.mobile-menu { position: fixed; inset: 0; z-index: 70; padding: 104px var(--gutter) 40px; background: var(--paper); }
.mobile-menu nav { display: grid; gap: 22px; font: 700 clamp(34px, 11vw, 72px)/1.1 var(--serif-title); }

.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 12vw, 160px); border-top: 1px solid var(--rule); }
.section-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.eyebrow, .meta, .chip, .date, .series-tag, .scroll-cue, .section-num, .ember-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
h1, h2, h3, .title-xl { font-family: var(--serif-title); font-weight: 700; letter-spacing: -.02em; }
h1, h2, h3, p { margin-top: 0; }
p { line-height: 1.8; max-width: 36em; }
.lead { color: var(--ink-2); font-size: clamp(18px, 2vw, 24px); }
.muted { color: var(--ink-3); }
.button-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.button-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.section-title { margin-bottom: clamp(28px, 4vw, 56px); }
.section-title .section-num { display: block; margin-bottom: 12px; color: var(--ember); }
.section-title h2 { margin: 0; font-size: clamp(44px, 5.5vw, 84px); line-height: 1.04; white-space: nowrap; }
.section-title p { margin: 12px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.7; }
.section-title-small h2 { font-size: clamp(28px, 3.4vw, 48px); }
.section-title-small { margin-bottom: 28px; }
.clause { display: inline; line-break: strict; }
h1 .clause, h2 .clause, h3 .clause, .closing-quote .clause { word-break: keep-all; }
.clause.short { white-space: nowrap; }

.hero { position: relative; min-height: calc(100svh - 64px); overflow: hidden; display: grid; grid-template-rows: minmax(0, 2fr) 28vh; }
.hero-content { display: grid; align-items: end; padding-top: clamp(42px, 7vh, 92px); padding-bottom: clamp(20px, 4vh, 48px); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(210px, 3fr); gap: clamp(28px, 6vw, 88px); align-items: end; }
.hero h1 { margin: 10px 0 16px; font-size: clamp(96px, 13vw, 208px); line-height: .9; }
.hero-en { margin-top: 16px; font: italic 700 clamp(20px, 2vw, 28px)/1.2 var(--serif-body); color: var(--ink-2); }
.hero-role { margin-top: 22px; color: var(--ink-2); }
.hero .lead { max-width: 30em; }
.vertical-quote { display: grid; grid-template-columns: auto auto auto; gap: 16px; justify-content: end; align-items: start; color: var(--ember); }
.hero-seal { grid-column: 1 / -1; justify-self: end; width: 46px; height: 46px; font-size: 24px; }
.vertical-quote .quote-main { writing-mode: vertical-rl; font: 700 clamp(84px, 10vw, 168px)/.95 var(--serif-title); letter-spacing: .02em; }
.vertical-quote .quote-source { writing-mode: vertical-rl; max-height: min(74vh, 560px); padding-left: 14px; border-left: 1px solid var(--ember); font-size: 14px; line-height: 1.7; color: var(--ink-2); text-wrap: balance; }
.hero-band { position: relative; z-index: 1; width: 100%; overflow: hidden; }
.skin-diagram { width: 100%; height: 100%; max-width: 100%; opacity: .76; transform: translate(var(--mx, 0), var(--my, 0)); }
.skin-diagram path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.skin-diagram .ember-line { stroke: var(--ember); }
.skin-diagram .dot { fill: var(--ember); opacity: 0; }
.scroll-cue { position: absolute; bottom: 22px; left: var(--gutter); z-index: 3; }

.section-kicker { grid-column: span 4; position: sticky; top: 92px; align-self: start; }
.section-body { grid-column: 5 / -1; min-width: 0; }
.intro-section .section-kicker { display: grid; align-content: start; gap: 18px; }
.portrait-card { position: relative; width: min(360px, 100%); margin: 10px 0 0; }
.portrait-card::after { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--ember); z-index: -1; }
.portrait-card picture { display: block; border: 1px solid var(--rule); background: var(--paper); overflow: hidden; }
.portrait-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: sepia(.06) saturate(.96); }
.portrait-card figcaption { margin-top: 18px; color: var(--ink-3); font: 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.facts { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.facts dt, .facts dd { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); line-height: 1.7; }
.facts dt { color: var(--ink-3); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; }
.focus-list { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.focus-list li { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.focus-list li::before, .article-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--ember); transition: width .28s ease; }
.focus-list li:hover::before, .article-row:hover::before { width: 100%; }
.focus-list .num { font: 12px/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); }
.focus-list li:hover .num { color: var(--ember); }
.focus-list h3 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 32px); }
.focus-list p { margin: 0; color: var(--ink-2); }

.timeline { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--rule); }
.timeline-item { position: relative; padding: 0 0 42px; }
.timeline-item::before { content: ""; position: absolute; left: -34px; top: 6px; width: 13px; height: 13px; border: 1px solid var(--ember); background: var(--paper); border-radius: 50%; transition: background .3s ease, box-shadow .3s ease; }
.timeline-item.is-lit::before { background: var(--ember); box-shadow: 0 0 0 8px rgba(194,85,31,.12); }
.timeline-item h3 { margin: 8px 0 10px; font-size: clamp(28px, 3vw, 48px); }
.timeline-item blockquote { margin: 0; color: var(--ink-2); font: italic 400 clamp(20px, 2vw, 28px)/1.7 var(--serif-body); }

.ember-panel { min-height: 72vh; display: grid; align-items: center; background: var(--ember); color: var(--paper); border-top: 0; }
.ember-panel .wrap { width: min(100%, var(--wrap)); }
.ember-panel .section-title .section-num, .ember-panel .section-title h2 { color: var(--paper); }
.ember-panel .section-title { margin-bottom: 38px; }
.rotator { position: relative; min-height: 28vh; }
.rotator-item { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.rotator-item.is-active { opacity: 1; }
.rotator blockquote, .closing-quote { margin: 0; font: 700 clamp(44px, 8vw, 116px)/1.12 var(--serif-title); letter-spacing: -.02em; word-break: keep-all; line-break: strict; text-wrap: balance; }
.rotator cite { display: block; margin-top: 20px; color: rgba(243,236,223,.7); font-style: normal; }
.rotator-foot { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 38px; }
.rotator-dots { display: flex; gap: 10px; }
.rotator-dots span { width: 9px; height: 9px; border: 1px solid rgba(243,236,223,.86); border-radius: 50%; }
.rotator-dots span.is-active { background: var(--paper); }
.ember-button { color: var(--paper); border-color: var(--paper); }
.ember-button:hover { background: var(--paper); color: var(--ember-deep); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); overflow: hidden; }
.series-card { position: relative; min-height: 500px; padding: clamp(22px, 3vw, 36px); background: var(--paper); overflow: hidden; transition: background .25s ease; display: flex; flex-direction: column; }
.series-card:hover { background: var(--paper-3); }
.series-card .count { font: 700 clamp(54px, 8vw, 104px)/1 var(--serif-title); color: var(--ember); letter-spacing: -.04em; }
.series-card h3 { margin: 20px 0 12px; font-size: clamp(30px, 3.2vw, 48px); }
.series-card p { color: var(--ink-2); }
.card-arrow { position: absolute; right: 26px; top: 26px; color: var(--ember); font-size: 30px; transition: transform .25s ease; }
.series-card:hover .card-arrow { transform: translateX(6px); }
.card-diagram { height: 128px; margin-top: auto; display: flex; justify-content: flex-end; align-items: end; overflow: hidden; }
.series-card .mini-diagram { width: 100%; height: auto; aspect-ratio: 3 / 1; opacity: 1; transition: transform .25s ease; }
.series-card:hover .mini-diagram { transform: translateY(-4px); }
.mini-diagram path { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.mini-diagram .dot { r: 2.4px; fill: var(--ember); opacity: .76; }
.mini-diagram .ember-line, .series-card:hover .mini-diagram path { stroke: var(--ember); }

.article-table { border-top: 1px solid var(--rule); }
.article-row { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) 160px 100px; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.article-row h3 { margin: 0; font-size: clamp(20px, 2vw, 28px); letter-spacing: 0; }
.article-table + p { margin-top: 32px; }
.page-hero { padding-block: clamp(76px, 12vw, 150px); border-bottom: 1px solid var(--rule); }
.pending-link { color: var(--ink-3); font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 46px; }
.chip { min-height: 36px; padding: 0 13px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); cursor: pointer; }
.chip.is-active, .chip:hover { border-color: var(--ember); color: var(--ember-deep); background: rgba(194,85,31,.08); }
.ideas-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ideas-toc { position: sticky; top: 86px; display: grid; gap: 2px; max-height: calc(100svh - 110px); padding-top: 4px; overflow: auto; }
.ideas-toc a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.ideas-toc a.is-active, .ideas-toc a:hover { color: var(--ember-deep); }
.ideas-toc small { color: var(--ink-3); font: 12px/1 var(--mono); letter-spacing: .12em; }
.quote-list { border-top: 1px solid var(--rule); min-width: 0; }
.quote-group-heading { display: flex; align-items: center; gap: 18px; padding: 34px 0 18px; border-bottom: 1px solid var(--rule); }
.quote-group-heading { scroll-margin-top: 96px; }
.quote-group-heading > span { width: 68px; height: 1px; background: var(--ember); }
.quote-group-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); }
.quote-figure { position: relative; display: grid; grid-template-columns: minmax(120px, 24%) minmax(0, 1fr); gap: clamp(18px, 4vw, 64px); margin: 0; padding: clamp(34px, 6vw, 78px) 0; border-bottom: 1px solid var(--rule); overflow: hidden; }
.quote-figure.is-short { display: block; }
.quote-figure.is-short::before { content: attr(data-id); position: absolute; right: 0; top: 22px; font: 700 clamp(72px, 12vw, 168px)/1 var(--mono); color: rgba(29,25,21,.06); }
.quote-meta { display: grid; align-content: start; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.quote-anchor { color: var(--ember); }
.quote-figure blockquote { position: relative; margin: 0; max-width: 980px; font: 700 clamp(24px, 2.6vw, 36px)/1.45 var(--serif-title); word-break: keep-all; line-break: strict; text-wrap: balance; }
.quote-figure.is-short blockquote { font-size: clamp(40px, 6vw, 88px); line-height: 1.15; }
.quote-figure figcaption { position: relative; margin-top: 22px; color: var(--ink-2); line-height: 1.8; }
.copy-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 34px; padding: 0 10px; border: 1px solid var(--rule); background: transparent; font-family: var(--mono); color: var(--ink-2); cursor: pointer; }
.copy-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.copy-button:hover { border-color: var(--ember); color: var(--ember-deep); }

.series-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(240px, 4fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-bottom: clamp(48px, 7vw, 92px); }
.series-en { margin: calc(-1 * clamp(22px, 3vw, 36px)) 0 20px; font: 700 clamp(40px, 6vw, 96px)/1 var(--serif-title); color: var(--ink-3); letter-spacing: -.02em; }
.series-art { width: 100%; min-width: 0; overflow: hidden; }
.series-art .skin-diagram { position: static; width: 100%; height: 360px; max-width: 100%; min-width: 0; }
.path-layout { display: grid; grid-template-columns: minmax(220px, 31%) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.path-layout aside { position: sticky; top: 92px; }
.route { margin: 0 0 46px; padding: 0; list-style: none; border-left: 1px solid var(--rule); }
.route li { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; padding: 0 0 30px 34px; }
.route li::before { content: ""; position: absolute; left: -7px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--ember); }
.route .num { font: 700 clamp(34px, 4vw, 62px)/.9 var(--serif-title); color: var(--ember); letter-spacing: -.04em; }
.route h3 { margin: 5px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; letter-spacing: 0; }
.route h3 span { color: var(--ink-2); }
.route small { color: var(--ink-3); font: 12px/1.4 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: transparent; border: 1px solid var(--rule); }
.related-quote { background: var(--paper); border: 1px solid var(--rule); padding: clamp(22px, 3vw, 34px); }
.related-quote:last-child:nth-child(odd) { grid-column: 1 / -1; }
.related-quote blockquote { margin: 0; font: 700 clamp(21px, 2vw, 30px)/1.55 var(--serif-title); line-break: strict; text-wrap: pretty; }
.related-quote p { margin: 18px 0 0; color: var(--ink-3); }
.notice { padding: 22px; border: 1px solid var(--ember); background: rgba(194,85,31,.08); color: var(--ink-2); }
.notice-section { padding-top: 48px; }

.closing-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.closing-quote { display: grid; gap: 4px; font-size: clamp(48px, 8vw, 128px); }
.closing-quote span { display: block; }
.closing-quote .comma { display: inline; color: var(--ember); }
.closing-quote span:not(:last-child) { color: var(--ink); }

.contact-hero { padding-top: clamp(54px, 8vw, 110px); padding-bottom: clamp(28px, 4vw, 54px); }
.contact-section { padding-top: clamp(40px, 6vw, 72px); }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.contact-card { min-height: 430px; padding: clamp(24px, 4vw, 42px); background: var(--paper); display: flex; flex-direction: column; align-items: flex-start; }
.contact-card h2 { margin-bottom: 24px; font-size: clamp(30px, 3vw, 46px); }
.qr-card { display: grid; place-items: center; width: min(292px, 100%); padding: 15px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.qr-card img { display: block; width: min(260px, 100%); height: auto; image-rendering: auto; }
.contact-hint, .contact-note { color: var(--ink-2); }
.contact-hint { margin: 18px 0 0; }
.contact-button { min-height: 54px; font-size: 14px; }
.contact-url { margin-top: auto; color: var(--ink-3); font: 12px/1.5 var(--mono); letter-spacing: .08em; }
.contact-note { margin-top: 24px; }

.site-footer { padding: 58px var(--gutter); border-top: 1px solid var(--rule); color: var(--ink-2); }
.footer-inner { position: relative; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 32px; }
.footer-inner::before { content: ""; position: absolute; top: -28px; left: 0; width: 88px; height: 2px; background: var(--ember); }
.footer-brand { display: flex; gap: 14px; align-items: start; }
.footer-nav { display: grid; gap: 10px; }
.footer-follow { margin-top: 26px; }
.footer-follow p { margin-bottom: 0; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: no-preference) {
  .skin-diagram path { animation: draw 1.6s ease forwards; }
  .skin-diagram .dot { animation: fade-dot .9s ease forwards; animation-delay: calc(var(--i) * 18ms); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade-dot { to { opacity: .74; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rotator { min-height: auto; display: grid; gap: 26px; }
  .rotator-item { position: static; opacity: 1; }
  .rotator-item:nth-child(n+4) { display: none; }
  .skin-diagram path { stroke-dashoffset: 0; }
  .skin-diagram .dot { opacity: .72; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-button { display: block; }
  .hero { min-height: auto; grid-template-rows: auto 28vh; }
  .hero-grid, .series-hero, .path-layout, .footer-inner, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; }
  .hero-grid > div:first-child { min-width: 0; }
  .hero h1 { font-size: clamp(82px, 21vw, 132px); }
  .vertical-quote { align-self: start; grid-template-columns: auto; gap: 10px; }
  .hero-seal { display: none; }
  .vertical-quote .quote-main { font-size: 64px; }
  .vertical-quote .quote-source { max-height: 55vh; font-size: 12px; line-height: 1.6; }
  .section-grid { display: block; }
  .section-kicker, .path-layout aside { position: static; margin-bottom: 32px; }
  .portrait-card { width: min(70vw, 300px); }
  .ideas-layout { display: block; padding-top: 0; }
  .ideas-toc { position: sticky; top: 62px; z-index: 50; display: flex; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: rgba(243,236,223,.92); border-block: 1px solid var(--rule); overflow-x: auto; max-height: none; }
  .ideas-toc a { flex: 0 0 auto; min-width: max-content; padding: 8px 0; border-bottom: 0; gap: 8px; }
  .quote-group-heading { scroll-margin-top: 120px; }
  .cards, .related-grid { grid-template-columns: 1fr; }
  .related-quote:last-child:nth-child(odd) { grid-column: auto; }
  .article-row { grid-template-columns: 1fr; gap: 8px; }
  .quote-figure, .quote-figure.is-short { display: block; }
  .quote-meta { margin-bottom: 16px; }
  .quote-figure blockquote, .quote-figure.is-short blockquote { font-size: clamp(22px, 6vw, 26px); line-height: 1.55; }
  .closing-section { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .section-title h2 { font-size: clamp(42px, 12vw, 56px); white-space: normal; }
  .hero-content { padding-top: 42px; }
  .hero h1 { margin-top: 8px; line-height: .86; }
  .hero-en { margin-top: 12px; }
  .hero .lead { font-size: 18px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .facts dd { padding-top: 6px; }
  .focus-list li { grid-template-columns: 52px minmax(0, 1fr); }
  .series-card { min-height: 410px; }
  .series-card .mini-diagram { width: 100%; }
  .series-art .skin-diagram { height: 200px; }
  .route li { grid-template-columns: 58px minmax(0, 1fr); padding-left: 24px; }
}

@media print {
  .site-header, .mobile-menu, .progress, .copy-button, .skin-diagram { display: none !important; }
  body { background: white; color: black; }
  a { text-decoration: underline; }
}

.mini-diagram .m-layer { fill: none; stroke: var(--ink-3); stroke-width: 1.25; opacity: .55; }
.mini-diagram .m-layer.m-ember { stroke: var(--ember); opacity: .7; }
.mini-diagram .m-dot { fill: var(--ember); opacity: .7; transition: opacity .25s ease; }
.mini-diagram .m-mark { fill: none; stroke: var(--ember-deep); stroke-width: 1.6; }
.mini-diagram .m-fill { fill: rgba(194,85,31,.14); stroke: var(--ember-deep); stroke-width: 1.6; }
.series-card:hover .mini-diagram .m-dot { opacity: .9; }
.contact-note { margin-top: 14px; color: var(--ink-2); }

@media (max-width: 768px) {
  .vertical-quote .src-long { display: none; }
  .contact-card { min-height: 0; }
  .contact-url { margin-top: 18px; }
}

/* ---- 我是谁 v5: editorial portrait ---- */
.intro-v5 { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); grid-template-areas: "photo title" "photo body"; column-gap: clamp(40px, 6vw, 110px); align-items: start; }
.intro-photo { grid-area: photo; position: sticky; top: 88px; }
.intro-title { grid-area: title; }
.intro-body { grid-area: body; }
.portrait-stage { margin: 0; width: min(100%, 560px); }
.portrait-art { position: relative; isolation: isolate; margin-right: 26px; }
.portrait-frame { position: absolute; left: 0; right: 0; top: 30%; bottom: 0; background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%); z-index: -2; }
.portrait-frame::after { content: ""; position: absolute; inset: 26px -26px -26px 26px; border: 1.5px solid var(--ember); z-index: -1; pointer-events: none; }
.portrait-seal { position: absolute; right: 18px; top: 18px; transform: rotate(-3deg); z-index: 0; }
.portrait-stage picture { display: block; position: relative; z-index: 1; }
.portrait-stage img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; filter: drop-shadow(0 18px 24px rgba(90, 58, 28, .16)) drop-shadow(0 2px 3px rgba(90, 58, 28, .10)); }
.portrait-stage figcaption { display: flex; justify-content: space-between; gap: 12px; margin: 48px 26px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-3); font: 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) {
  .intro-v5 { grid-template-columns: 1fr; grid-template-areas: "title" "photo" "body"; }
  .intro-photo { position: relative; top: 0; margin: 8px 0 40px; }
  .portrait-stage { width: min(86vw, 420px); }
  .portrait-art { margin-right: 18px; }
  .portrait-frame::after { inset: 18px -18px -18px 18px; }
  .portrait-stage figcaption { margin: 34px 18px 0 0; }
}