:root {
  --paper: #f1ede6;
  --paper-light: #f8f5ef;
  --paper-deep: #e5ddd2;
  --ink: #1c1b19;
  --muted: #756f68;
  --line: rgba(28, 27, 25, 0.18);
  --line-strong: rgba(28, 27, 25, 0.42);
  --rose: #bc8b91;
  --rose-soft: #ddc1c1;
  --yellow: #c3a65e;
  --brick: #94513e;
  --blue-gray: #596168;
  --serif: "Songti SC", "STSong", "SimSun", "Times New Roman", serif;
  --sans: Inter, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --page: min(100% - 48px, 1440px);
  --section-space: clamp(120px, 10vw, 160px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 12% 0, rgba(255,255,255,.6), transparent 30%), var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .1; content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}
body[data-perspective="ai"] { --rose: #a87c82; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; max-width: 100%; height: auto; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd, ol, ul { margin-top: 0; }
::selection { color: var(--paper-light); background: var(--brick); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 4px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px;
  color: var(--paper-light); background: var(--ink); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px;
  padding: 12px max(24px, calc((100vw - 1440px) / 2 + 24px));
  border-bottom: 1px solid transparent;
  transition: background 280ms ease, border-color 280ms ease, min-height 280ms ease;
}
.site-header.is-scrolled {
  min-height: 64px; border-bottom-color: var(--line);
  background: rgba(241, 237, 230, .92); backdrop-filter: blur(14px);
}
.wordmark { display: inline-flex; flex-direction: column; justify-self: start; gap: 3px; }
.wordmark strong { font-size: 12px; letter-spacing: .11em; }
.wordmark span { color: var(--muted); font: 9px/1.3 var(--serif); letter-spacing: .12em; }
.main-nav { display: flex; justify-content: center; gap: clamp(18px, 2vw, 34px); }
.main-nav a { position: relative; padding: 8px 0; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.main-nav a::after {
  position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; content: "";
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 240ms var(--ease);
}
.main-nav a:hover, .main-nav a.is-active { color: var(--ink); }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; justify-self: end; align-items: center; gap: 18px; }
.edition-selector { display: grid; gap: 3px; }
.perspective-label { color: var(--muted); font-size: 7px; letter-spacing: .16em; }
.edition-options { display: flex; align-items: center; gap: 10px; }
.edition-option {
  position: relative; display: grid; gap: 2px; padding: 3px 0 6px;
  border: 0; color: #98928b; background: transparent; cursor: pointer;
  text-align: left;
}
.edition-option::after {
  position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; content: "";
  background: var(--ink); transform: scaleX(0); transition: transform 240ms var(--ease);
}
.edition-primary { font: 10px/1.2 var(--serif); letter-spacing: .04em; }
.edition-english { font-size: 6px; line-height: 1.2; letter-spacing: .12em; }
.edition-option.is-active { color: var(--ink); }
.edition-option.is-active::after { transform: scaleX(1); }
.edition-option:hover { color: #4d4944; }
.edition-divider { color: #aaa39b; font: italic 13px var(--serif); }
.nav-toggle { display: none; border: 0; background: transparent; cursor: pointer; }

.perspective-view { transition: opacity 180ms ease, transform 220ms var(--ease); }
.perspective-view.is-switching { opacity: .2; transform: translateY(8px); }
.archive-section, .site-footer { width: var(--page); margin-inline: auto; }
.archive-section { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.hero { min-height: 92svh; padding-top: 112px; border-top: 0; }

.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; align-items: center; min-height: calc(92svh - 200px); }
.hero-copy,
.hero-figure { grid-row: 1; }
.hero-copy { grid-column: 1 / span 6; z-index: 2; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 27px; color: var(--muted); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.hero-kicker span + span { padding-left: 18px; border-left: 1px solid var(--line-strong); }
.hero-title { max-width: 920px; margin: 0 0 28px; font: 400 clamp(54px, 6.2vw, 92px)/.98 var(--serif); letter-spacing: -.055em; }
.hero-english { max-width: 640px; margin-bottom: 34px; color: var(--rose); font-size: 9px; line-height: 1.6; letter-spacing: .18em; }
.hero-subtitle { max-width: 580px; margin: -12px 0 28px; color: var(--ink); font: 19px/1.65 var(--serif); }
.hero-paragraphs { max-width: 580px; }
.hero-paragraphs p { margin-bottom: .9em; color: #4c4843; font: 15px/1.85 var(--serif); }
.hero-remains { display: grid; grid-template-columns: repeat(4,1fr); gap: 0 14px; max-width: 650px; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.hero-remains li { display: grid; align-content: start; min-height: 88px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.hero-remain-number { color: var(--rose); font-size: 8px; letter-spacing: .12em; }
.hero-remain-title { margin-top: 9px; font: 13px/1.45 var(--serif); }
.hero-remain-english { margin-top: 5px; color: var(--muted); font-size: 6px; letter-spacing: .14em; }
.hero-note { max-width: 620px; margin: 28px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.8; }
.hero-brandline { display: block; margin-top: 11px; color: var(--rose); letter-spacing: .14em; }
.hero-figure { grid-column: 7 / -1; margin: 0; align-self: center; }
.hero-figure img { aspect-ratio: 1.08; object-fit: cover; object-position: center; filter: saturate(.82) contrast(.95); }
.hero-collage { display: grid; grid-template-columns: 1.08fr .92fr; gap: 8px; }
.hero-collage-item { margin: 0; overflow: hidden; }
.hero-collage-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(.96); }
.hero-collage-space { grid-column: 1 / -1; }
.hero-collage-space img { aspect-ratio: 16/9; object-position: center; }
.hero-collage-commerce img, .hero-collage-family img { aspect-ratio: 4/5; }
.hero-collage-commerce img { object-position: center 20%; }
.hero-collage-family img { object-position: center 16%; }
.hero-collage-item figcaption { padding-top: 6px; color: var(--muted); font-size: 6px; letter-spacing: .12em; }
.hero-figure figcaption, .archive-figure figcaption, .stage-figure figcaption {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 9px;
  color: var(--muted); font-size: 8px; line-height: 1.5; letter-spacing: .1em;
}
body[data-perspective="ai"] .hero-title { font-size: clamp(58px, 8vw, 118px); }
body[data-perspective="ai"] .hero-copy { grid-column: 1 / span 7; }

.section-heading { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; margin-bottom: clamp(64px, 8vw, 112px); }
.section-index { grid-column: 1 / span 3; padding-top: 12px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.section-heading h2 { grid-column: 4 / span 8; margin: 0; font: 400 clamp(43px, 6vw, 86px)/1.06 var(--serif); letter-spacing: -.045em; }
.section-heading .section-deck { grid-column: 8 / span 4; margin: 28px 0 0; color: var(--muted); font: 15px/1.9 var(--serif); }
.section-english { grid-column: 8 / span 4; margin: -14px 0 0; color: var(--rose); font-size: 7px; letter-spacing: .17em; }

.before-intro { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; margin-bottom: 70px; }
.before-intro .section-index { grid-column: 1 / span 3; }
.before-intro h2 { grid-column: 4 / span 5; margin: 0; font: 400 clamp(46px, 6vw, 86px)/1.05 var(--serif); letter-spacing: -.045em; }
.before-intro > p:last-child { grid-column: 9 / -1; margin: 8px 0 0; color: var(--muted); font: 15px/1.85 var(--serif); }
.before-stages { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.before-entry { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; padding: 32px 0 38px; border-bottom: 1px solid var(--line); }
.before-number { grid-column: 1 / span 2; color: var(--rose); font: 28px/1 var(--serif); }
.before-entry h3 { grid-column: 3 / span 3; margin: 0; font: 400 25px/1.3 var(--serif); }
.before-values { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.before-values div { padding-top: 8px; border-top: 1px solid var(--line); }
.before-values dt { margin-bottom: 10px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.before-values dd { margin: 0; font: 13px/1.75 var(--serif); }
.before-closing { width: min(100%, 760px); margin: 78px 0 0 auto; color: var(--rose); font: 30px/1.55 var(--serif); }

.ai-stage-list { border-top: 1px solid var(--line-strong); }
.ai-stage { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; padding: clamp(62px,7vw,100px) 0; border-bottom: 1px solid var(--line); }
.ai-stage-meta { grid-column: 1 / span 2; }
.ai-stage-meta b { display: block; margin-bottom: 12px; color: var(--rose); font: 34px/1 var(--serif); }
.archive-label { color: var(--muted); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.ai-stage-copy { grid-column: 3 / span 5; }
.ai-stage-copy h3 { margin: 15px 0 24px; font: 400 clamp(31px,4vw,52px)/1.15 var(--serif); }
.ai-stage-copy > p { color: #514c47; font: 15px/1.85 var(--serif); }
.ai-stage-copy blockquote { margin: 32px 0 0; padding-left: 18px; border-left: 1px solid var(--rose); color: var(--rose); font: 18px/1.7 var(--serif); }
.ai-stage-detail { grid-column: 8 / -1; }
.flow-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.flow-line li { padding: 8px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.flow-line li + li::before { margin-right: 8px; content: "→"; color: var(--rose); }
.product-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.product-mini article { padding-top: 15px; border-top: 1px solid var(--line); }
.product-mini h4 { margin-bottom: 10px; font: 400 20px var(--serif); }
.product-mini p { color: var(--muted); font: 12px/1.7 var(--serif); }
.product-mini img { margin-top: 16px; max-height: 320px; object-fit: cover; }

.project-archive { border-top: 1px solid var(--line-strong); }
.project-entry { --accent: var(--rose); display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; padding: clamp(70px,8vw,116px) 0; border-bottom: 1px solid var(--line-strong); }
.project-entry[data-accent="yellow"] { --accent: var(--yellow); }
.project-entry[data-accent="brick"] { --accent: var(--brick); }
.project-entry[data-accent="bluegray"] { --accent: var(--blue-gray); }
.project-meta { grid-column: 1 / span 2; }
.project-number { display: block; margin-bottom: 16px; color: var(--accent); font: 42px/1 var(--serif); }
.project-body { grid-column: 3 / span 5; }
.project-legacy { margin: 0 0 14px; color: var(--accent); font: 400 clamp(28px,3.5vw,48px)/1.2 var(--serif); }
.project-body h3 { margin: 0 0 18px; font: 400 clamp(31px,3.5vw,50px)/1.1 var(--serif); }
body[data-perspective="human"] .project-body h3 { color: var(--muted); font-size: 17px; letter-spacing: .04em; }
body[data-perspective="human"] .project-legacy { color: var(--accent); font-size: clamp(28px,3.5vw,48px); letter-spacing: -.025em; }
.project-subtitle { color: var(--muted); font: 15px/1.75 var(--serif); }
.project-narrative { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.project-narrative p { margin-bottom: 14px; color: #514c47; font: 13px/1.78 var(--serif); }
.project-narrative strong { display: block; margin-bottom: 14px; color: var(--accent); font: 400 18px/1.65 var(--serif); }
.project-story { margin: 32px 0 0; }
.project-story-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.project-story-row dt { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.project-story-row dd { margin: 0; font: 13px/1.75 var(--serif); }
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 25px 0 0; padding: 0; list-style: none; }
.project-tags li { padding: 7px 9px; border: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.project-link { display: flex; align-items: end; justify-content: space-between; gap: 18px; width: min(100%, 430px); margin-top: 34px; padding: 15px 0 7px; border-top: 1px solid var(--line-strong); font-size: clamp(13px,1vw,15px); }
.project-link-copy { display: grid; gap: 6px; }
.project-link-copy strong { font: 400 1em/1.35 var(--serif); }
.project-link-copy small { color: var(--muted); font-size: 6px; letter-spacing: .16em; }
.project-link-arrow { padding-bottom: 2px; color: var(--accent); font-size: 18px; transition: transform 240ms var(--ease); }
.project-link:hover .project-link-arrow, .project-link:focus-visible .project-link-arrow { transform: translateX(6px); }
.project-visual { grid-column: 8 / -1; margin: 0; align-self: start; overflow: hidden; }
.project-visual img { max-height: 680px; object-fit: cover; filter: saturate(.86); transition: transform 700ms var(--ease), filter 450ms ease; }
.project-entry:hover .project-visual img, .project-entry:focus-within .project-visual img { transform: scale(1.025); filter: saturate(.94); }
.project-placeholder { display: grid; aspect-ratio: 4/5; place-items: center; border: 1px solid var(--line); background: rgba(89,97,104,.08); }
.project-placeholder span { width: 9em; color: var(--blue-gray); font: 30px/1.45 var(--serif); text-align: center; }

.method-archive { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; }
.method-intro { grid-column: 1 / span 4; color: #514c47; font: 18px/1.9 var(--serif); }
.method-list { grid-column: 6 / -1; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.method-step { display: grid; grid-template-columns: 44px minmax(150px,.8fr) 1.2fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.method-step span { color: var(--rose); font-size: 9px; }
.method-step h3 { margin: 0; font: 400 21px/1.4 var(--serif); }
.method-step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.method-closing { grid-column: 6 / -1; margin: 48px 0 0; color: var(--rose); font: 400 clamp(27px,3vw,43px)/1.45 var(--serif); }

.life-archive { border-top: 1px solid var(--line-strong); }
.life-entry { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; padding: clamp(68px,7vw,104px) 0; border-bottom: 1px solid var(--line-strong); }
.life-entry:nth-child(even) .life-copy { grid-column: 8 / -1; order: 2; }
.life-entry:nth-child(even) .life-visual { grid-column: 1 / span 6; order: 1; }
.life-copy { grid-column: 1 / span 5; align-self: center; }
.life-copy h3 { margin: 18px 0 24px; font: 400 clamp(33px,4vw,54px)/1.15 var(--serif); letter-spacing: -.035em; }
.life-copy > p { color: #514c47; font: 15px/1.85 var(--serif); }
.life-change { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--line); }
.life-change strong { display: block; margin-bottom: 8px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.life-change p { margin: 0; font-size: 10px; line-height: 1.7; }
.life-change > span { padding-top: 20px; color: var(--rose); }
.life-visual { grid-column: 7 / -1; margin: 0; }
.life-visual img { max-height: 760px; object-fit: contain; background: rgba(255,255,255,.28); }
.life-case-detail { margin-top: 28px; }
.life-case-detail section { padding: 14px 0; border-top: 1px solid var(--line); }
.life-case-detail h4 { margin-bottom: 8px; font: 400 18px var(--serif); }
.life-case-detail p { margin: 0; color: var(--muted); font: 12px/1.75 var(--serif); }
.record-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 24px; }
.record-strip figure { margin: 0; }
.record-strip img { aspect-ratio: .72; object-fit: cover; object-position: top; }

.reality { width: 100%; max-width: none; padding-inline: max(24px, calc((100vw - 1440px)/2 + 24px)); color: #eee9e1; background: #242321; border-color: rgba(241,237,230,.24); }
.reality .section-index, .reality .section-deck { color: #aaa39a; }
.reality-archive { border-top: 1px solid rgba(241,237,230,.32); }
.reality-lead { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; padding: 60px 0 85px; }
.reality-lead h3 { grid-column: 1 / span 6; margin: 0; font: 400 clamp(35px,5vw,70px)/1.07 var(--serif); letter-spacing: -.04em; }
.reality-lead p { grid-column: 8 / span 4; margin: 5px 0 0; color: #aaa39a; font: 15px/1.9 var(--serif); }
.reality-loop { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 50px; padding: 0; list-style: none; }
.reality-loop li { padding: 8px 10px; border: 1px solid rgba(241,237,230,.25); color: #aaa39a; font-size: 8px; }
.reality-stage { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; padding: clamp(72px,8vw,118px) 0; border-top: 1px solid rgba(241,237,230,.22); }
.reality-stage-copy { grid-column: 1 / span 4; }
.reality-stage-copy span { color: var(--rose-soft); font-size: 8px; letter-spacing: .15em; }
.reality-stage h3 { margin: 24px 0; font: 400 clamp(32px,4vw,52px)/1.12 var(--serif); }
.reality-stage-copy p { color: #aaa39a; font: 14px/1.9 var(--serif); }
.reality-items { margin: 22px 0 0; padding: 0; list-style: none; }
.reality-items li { padding: 8px 0; border-top: 1px solid rgba(241,237,230,.14); color: #918b83; font-size: 9px; }
.reality-media { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; }
.stage-figure { margin: 0; }
.stage-figure:only-child { grid-column: 1 / -1; width: min(76%,760px); }
.stage-figure img { max-height: 720px; object-fit: cover; background: #302f2c; }
.reality-quote { width: min(12em,100%); margin: 100px auto 0; padding-top: 27px; border-top: 1px solid var(--rose-soft); color: var(--rose-soft); font: 400 clamp(34px,5vw,70px)/1.35 var(--serif); text-align: center; }
.reality-proof { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin: 40px 0 0; padding: 0; color: #918b83; font-size: 8px; letter-spacing: .12em; list-style: none; }

.future { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; padding-bottom: clamp(100px,12vw,180px); }
.future-copy { grid-column: 1 / span 7; }
.future-copy h2 { margin: 27px 0 32px; font: 400 clamp(48px,7vw,94px)/1 var(--serif); letter-spacing: -.05em; }
.future-copy > p { max-width: 590px; color: var(--muted); font: 16px/1.9 var(--serif); }
.future-open { grid-column: 9 / -1; align-self: end; }
.future-open ul { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.future-open li { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--muted); font: 15px var(--serif); }
.future-open p { margin: 25px 0 0; color: var(--rose); font: italic 21px var(--serif); letter-spacing: .08em; }

.site-footer { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 28px 0 40px; border-top: 1px solid var(--line-strong); color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.site-footer span:nth-child(2) { text-align: center; }
.site-footer span:last-child { text-align: right; }
.archive-loading, .archive-fallback { margin: 40px 0; color: var(--muted); font: 14px/1.7 var(--serif); }
.archive-fallback { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.noscript-note { position: fixed; right: 14px; bottom: 14px; z-index: 40; margin: 0; padding: 11px 14px; color: var(--paper); background: var(--ink); font-size: 11px; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 650ms var(--ease), transform 750ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  :root { --page: min(100% - 40px, 940px); }
  .site-header { grid-template-columns: 1fr auto; padding-inline: 20px; }
  .main-nav { display: none; }
  .hero-grid, .section-heading, .before-intro, .before-entry, .ai-stage, .project-entry, .method-archive, .life-entry, .reality-lead, .reality-stage, .future { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .hero-copy { grid-column: 1 / span 4; }
  body[data-perspective="ai"] .hero-copy { grid-column: 1 / span 5; }
  .hero-figure { grid-column: 5 / -1; }
  .hero-remains { grid-template-columns: 1fr 1fr; }
  .section-index, .before-intro .section-index { grid-column: 1 / span 2; }
  .section-heading h2 { grid-column: 3 / -1; }
  .section-heading .section-deck { grid-column: 5 / -1; }
  .before-intro h2 { grid-column: 3 / span 4; }
  .before-intro > p:last-child { grid-column: 7 / -1; }
  .before-number { grid-column: 1; }
  .before-entry h3 { grid-column: 2 / span 2; }
  .before-values { grid-column: 4 / -1; }
  .ai-stage-meta { grid-column: 1; }
  .ai-stage-copy { grid-column: 2 / span 4; }
  .ai-stage-detail { grid-column: 6 / -1; }
  .project-meta { grid-column: 1; }
  .project-body { grid-column: 2 / span 4; }
  .project-visual { grid-column: 6 / -1; }
  .method-intro { grid-column: 1 / span 3; }
  .method-list, .method-closing { grid-column: 4 / -1; }
  .method-step { grid-template-columns: 38px 1fr; }
  .method-step p { grid-column: 2; }
  .life-copy { grid-column: 1 / span 4; }
  .life-visual { grid-column: 5 / -1; }
  .life-entry:nth-child(even) .life-copy { grid-column: 5 / -1; }
  .life-entry:nth-child(even) .life-visual { grid-column: 1 / span 4; }
  .reality { padding-inline: 20px; }
  .reality-lead h3 { grid-column: 1 / span 4; }
  .reality-lead p { grid-column: 5 / -1; }
  .reality-stage-copy { grid-column: 1 / span 3; }
  .reality-media { grid-column: 4 / -1; }
  .future-copy { grid-column: 1 / span 5; }
  .future-open { grid-column: 6 / -1; }
}

@media (max-width: 720px) {
  :root { --page: calc(100% - 32px); --section-space: clamp(60px, 18vw, 80px); }
  html { scroll-padding-top: 112px; }
  .site-header { min-height: 64px; padding: 9px 16px; }
  .wordmark span { display: none; }
  .header-actions { gap: 11px; }
  .edition-selector { gap: 6px; }
  .perspective-label { font-size: 6px; }
  .edition-options { gap: 6px; }
  .edition-option { gap: 1px; padding: 4px 0; }
  .edition-primary { font-size: 9px; }
  .edition-english { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 9px; }
  .nav-toggle i, .nav-toggle i::after { display: block; width: 14px; height: 1px; background: var(--ink); }
  .nav-toggle i { position: relative; }
  .nav-toggle i::after { position: absolute; top: 5px; left: 0; content: ""; }
  .main-nav { position: absolute; top: 100%; right: 0; left: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 0; padding: 10px 16px 13px; border-bottom: 1px solid var(--line); background: rgba(241,237,230,.97); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; }
  .main-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .main-nav a { text-align: center; }
  .archive-section { padding-block: var(--section-space); }
  .hero { min-height: auto; padding-top: 104px; }
  .hero-grid, .section-heading, .before-intro, .before-entry, .ai-stage, .project-entry, .method-archive, .life-entry, .reality-lead, .reality-stage, .future { display: block; }
  .hero-copy, body[data-perspective="ai"] .hero-copy { width: 100%; }
  .hero-title, body[data-perspective="ai"] .hero-title { font-size: clamp(47px,13.5vw,64px); line-height: 1.02; }
  .hero-kicker { gap: 6px 12px; }
  .hero-kicker span + span { padding-left: 12px; }
  .hero-paragraphs p { font-size: 15px; }
  .hero-remains { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .hero-remains li { min-height: 82px; }
  .hero-figure { width: 82%; margin: 40px 0 0 auto; }
  body[data-perspective="human"] .hero-collage { width: 100%; margin-top: 42px; }
  .section-heading { margin-bottom: 48px; }
  .section-index { margin-bottom: 18px; padding: 0; }
  .section-heading h2, .before-intro h2 { font-size: clamp(38px,11.5vw,52px); }
  .section-heading .section-deck, .before-intro > p:last-child { margin-top: 22px; font-size: 14px; }
  .before-intro { margin-bottom: 48px; }
  .before-entry { padding: 28px 0 34px; }
  .before-number { display: block; margin-bottom: 15px; font-size: 24px; }
  .before-entry h3 { margin-bottom: 24px; font-size: 24px; }
  .before-values { grid-template-columns: 1fr; gap: 15px; }
  .before-closing { margin-top: 52px; font-size: 25px; }
  .ai-stage { padding: 56px 0; }
  .ai-stage-meta { display: flex; justify-content: space-between; margin-bottom: 22px; }
  .ai-stage-meta b { margin: 0; }
  .ai-stage-copy h3 { font-size: 34px; }
  .ai-stage-detail { margin-top: 32px; }
  .product-mini { grid-template-columns: 1fr; }
  .project-entry { padding: 58px 0 64px; }
  .project-meta { display: flex; justify-content: space-between; margin-bottom: 28px; }
  .project-number { margin: 0; font-size: 32px; }
  .project-legacy { font-size: 34px; }
  .project-story-row { grid-template-columns: 82px 1fr; }
  .project-visual { margin-top: 36px; }
  .project-link { width: 100%; margin-top: 30px; }
  .project-placeholder { aspect-ratio: 5/4; }
  .method-intro { font-size: 16px; }
  .method-list { margin-top: 38px; }
  .method-step { grid-template-columns: 34px 1fr; gap: 8px 12px; padding: 20px 0; }
  .method-step p { grid-column: 2; }
  .method-closing { margin-top: 38px; font-size: 27px; }
  .life-entry, .life-entry:nth-child(even) { display: flex; flex-direction: column; padding: 56px 0; }
  .life-entry:nth-child(even) .life-copy, .life-entry:nth-child(even) .life-visual { order: initial; }
  .life-copy h3 { font-size: 35px; }
  .life-change { grid-template-columns: 1fr; }
  .life-change > span { display: none; }
  .life-visual { margin-top: 32px; }
  .record-strip { grid-template-columns: 1fr 1fr; }
  .reality { padding-inline: 16px; }
  .reality-lead { padding: 45px 0 62px; }
  .reality-lead h3 { margin-bottom: 20px; font-size: 39px; }
  .reality-stage { padding: 60px 0; }
  .reality-stage-copy { margin-bottom: 34px; }
  .reality-stage h3 { font-size: 37px; }
  .reality-media { grid-template-columns: 1fr; gap: 28px; }
  .stage-figure:only-child { width: 100%; }
  .reality-quote { margin-top: 68px; font-size: 35px; }
  .future-copy h2 { font-size: 54px; }
  .future-open { margin-top: 42px; }
  .site-footer { grid-template-columns: 1fr; gap: 7px; padding-bottom: 28px; }
  .site-footer span:nth-child(2), .site-footer span:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}