/* Shared public scene grammar; Header physics, auth UI and Hero art stay separate. */
:root {
  --type-display-xl: clamp(3rem, 6.8vw, 7rem);
  --type-display-l: clamp(2.6rem, 5.5vw, 5.6rem);
  --type-section: clamp(2rem, 3.8vw, 3.8rem);
  --type-lead: clamp(1.125rem, 1.65vw, 1.5rem);
  --type-body: clamp(1rem, 1.2vw, 1.125rem);
  --type-meta: .8rem;
  --type-caption: .85rem;
  --scene-gutter: clamp(24px, 5vw, 80px);
}
html, body { overflow-x: clip; }
.story-scene { --story-progress: 0; position: relative; background: #f7f8fa; }
.story-scene[data-story-ready]:not([data-story-flow]) { height: calc(var(--story-stage-height, 100svh) + var(--story-travel, 0px)); }
.story-stage {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 80px);
  padding: clamp(100px, 13vh, 150px) var(--scene-gutter) 76px;
  isolation: isolate;
}
[data-story-ready]:not([data-story-flow]) > .story-stage { position: sticky; top: 0; }
[data-story-flow] > .story-stage { position: relative; height: auto; }
.story-copy { position: relative; z-index: 3; min-width: 0; }
.story-copy h1, .story-copy h2 { margin: 20px 0 28px; font-size: var(--type-display-l); font-weight: 650; line-height: 1.12; letter-spacing: -.05em; }
.story-copy h1 { font-size: var(--type-display-xl); }
.story-copy p { font-size: var(--type-lead); line-height: 1.75; max-inline-size: 33em; color: var(--muted); }
.story-copy .story-status { display: inline-block; margin: 0 0 10px; font-size: var(--type-meta); color: var(--muted); letter-spacing: .025em; }
.story-copy .story-detail { font-size: var(--type-body); }
.story-copy .story-date { font-size: var(--type-meta); margin-top: 34px; }
[data-story-side="right"] .story-copy { grid-column: 2; grid-row: 1; }
[data-story-side="right"] .story-media { grid-column: 1; grid-row: 1; }
[data-story-side="center"] .story-copy { grid-column: 1 / -1; width: min(100%, 1100px); margin: auto; text-align: center; }
[data-story-side="center"] .story-copy p { margin-inline: auto; }
.story-media { position: relative; min-width: 0; margin: 0; z-index: 1; }
.story-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-media figcaption { margin-top: 22px; font-size: var(--type-caption); color: var(--muted); }
.story-media__frame { height: clamp(300px, 65vh, 720px); position: relative; overflow: hidden; }
.story-media__frame > img { transform: translateY(calc(var(--story-depth, 0px) * .35)) scale(1.02); }
.story-media__frame[data-slices-ready] > img { opacity: 0; }
.story-media__frame[data-slices-complete] > img { opacity: 1; }
.story-media__frame[data-slices-complete] .story-slices { visibility: hidden; }
.story-slices { position: absolute; inset: 0; pointer-events: none; transform: translateY(calc(var(--story-depth, 0px) * .35)) scale(1.02); }
.story-slice { position: absolute; top: 0; height: 100%; overflow: hidden; }
.story-slice img { position: absolute; height: 100%; max-width: none; object-fit: cover; }
.story-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.story-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px); transform: scale(1.1); opacity: .42; }
.story-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,15,.94), rgba(7,10,15,.54) 48%, rgba(7,10,15,.15)); }
.story-scene[data-story-theme="dark"] { background: #080b10; color: #f4f6fa; --ink: #f4f6fa; --muted: #aeb7c6; --line: #29323e; }
.story-year { font-size: var(--type-meta); color: var(--blue); }
.story-archive-number { font-size: clamp(7rem, 17vw, 18rem); font-weight: 650; line-height: .8; letter-spacing: -.085em; color: #dce1e9; transform: translateY(var(--story-depth, 0px)); }
.story-media--reserved { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.story-media--reserved figcaption { max-width: 24em; }
.story-media--reserved:has(img) .story-archive-number { display: none; }
.story-media--reserved img { object-fit: contain; max-height: 65vh; }
.story-media__cluster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.story-media__cluster img { height: clamp(140px, 25vh, 280px); object-fit: cover; }
.about-page main, .projects-page main { position: relative; margin-top: calc(-1 * var(--header-band, 86px)); }
.about-page .story-scene:nth-of-type(even) { background: #eef1f5; }
.about-page .story-scene:first-child .story-copy { max-width: 680px; }
.story-index { position: relative; padding: 28px var(--scene-gutter); display: flex; flex-wrap: wrap; gap: 20px 32px; font-size: .85rem; }
.story-index a { color: var(--muted); }
.story-index a:hover, .story-index a:focus-visible { color: var(--blue); }
/* Contain the Header's top margin so the page surface starts at y=0.
   The native white overscroll canvas remains outside the document. */
.projects-page { display: flow-root; background: #080b10; color: #f4f6fa; }
.projects-page main, .projects-page .site-footer { --ink: #f4f6fa; --muted: #aeb7c6; --line: #29323e; }
.projects-page .story-scene { background: #080b10; }
.projects-page .story-scene:nth-of-type(even) { background: #10151e; }
.projects-page .story-index { position: absolute; z-index: 8; top: calc(var(--header-band, 86px) + 18px); right: 0; padding-block: 12px; }
.projects-page .story-copy h1 { font-size: var(--type-display-l); }
.projects-page .story-copy .story-status { color: #84a8ff; }
.process-field { width: 100%; aspect-ratio: 1.1; position: relative; display: grid; place-items: center; }
.process-field svg { width: 100%; height: auto; overflow: visible; }
.process-field__wire { fill: none; stroke: #344665; stroke-width: 1.4; }
.process-field__front { fill: none; stroke: #5485ef; stroke-width: 1.7; stroke-dasharray: 700; stroke-dashoffset: calc(700 - var(--story-progress) * 700); }
.process-field circle { fill: #0a0f18; stroke: #7597d3; stroke-width: 1; }
.process-field text { fill: #aebcd3; font-size: 14px; }
.process-field__label { position: absolute; bottom: 2%; left: 8%; font-size: var(--type-caption); color: #8d9db5; }
.story-goals { list-style: none; margin: 28px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.story-goals li { font-size: .9rem; padding: 5px 12px; border: 1px solid #344156; border-radius: 20px; }
.story-summary { padding: clamp(64px, 9vw, 130px) var(--scene-gutter); max-width: 1440px; margin-inline: auto; }
.story-summary h2 { font-size: var(--type-section); line-height: 1.2; margin: 0 0 34px; }
.story-summary p { font-size: var(--type-body); color: var(--muted); line-height: 1.8; max-width: 42em; }
.story-summary .ed-people { border: 0; }
.story-summary .ed-people li { padding-block: 10px; }
.story-copy .story-team { color: #93a3bb; font-size: var(--type-meta); margin-top: 36px; }
.network-stage { position: relative; padding: 0; }
.network-stage svg { width: 100%; height: auto; overflow: visible; }
.network-stage .network-path { fill: none; stroke: #476593; stroke-width: 1.4; }
.network-stage .network-field { fill: none; stroke: #936b4c; stroke-width: 18; opacity: calc(.05 + var(--story-progress) * .18); }
.network-stage circle { fill: #0b111d; stroke: #98acd0; stroke-width: 1; }
.network-stage text { fill: #b3c1d6; font-size: 15px; }
.network-stage figcaption { font-size: var(--type-caption); color: #8d9db5; }
.network-facts { display: flex; flex-wrap: wrap; gap: 32px 60px; margin: 30px 0; }
.network-facts strong { font-size: 2.3rem; display: block; color: #89aaff; font-weight: 600; }
.network-facts span { font-size: .85rem; color: var(--muted); }
.projects-page .network-plan { border-color: #29323e; }
.projects-page .network-plan p { color: var(--muted); }
.projects-page .network-plan summary { font-size: 1rem; }
.projects-page .archive-list { display: grid; gap: 40px; }
.projects-page .archive-list article h3 { font-size: 1.5rem; margin-bottom: 12px; }
/* One primary pill, one secondary arrow. Same proportions in either theme. */
main .story-cta, main a.square-link, main a.text-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; height: auto; min-width: 0; width: max-content; max-width: 100%;
  padding: 12px 22px; border-radius: 28px; font-size: .95rem; line-height: 1.4;
  font-weight: 600; white-space: normal; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease;
}
main a.square-link, main .story-cta--primary { background: var(--blue); color: #fff; }
main a.square-link:hover, main .story-cta--primary:hover { background: var(--blue-dark); }
main a.text-link, main .story-cta--secondary { background: transparent; color: var(--ink); border-color: var(--line); }
main a.text-link:hover, main .story-cta--secondary:hover { background: var(--soft); color: var(--blue); }
.projects-page main .story-cta--secondary, [data-story-theme="dark"] .story-cta--secondary { border-color: #344156; color: #eff3fa; }
.projects-page main .story-cta--secondary:hover, [data-story-theme="dark"] .story-cta--secondary:hover { background: #1b2535; }
.story-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.site-footer { position: relative; inset: auto; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 36px var(--scene-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; background: #f2f4f7; color: var(--ink); border: 0; }
.site-footer p, .site-footer span { font-size: .8rem; color: var(--muted); }
/* These full-screen endings already reserve bottom breathing room. Keep the
   semantic footer in that space rather than adding another page-length strip. */
body.home-page, body.projects-page { position: relative; }
.home-page > .site-footer, .projects-page > .site-footer {
  position: absolute; inset: auto 0 0; min-height: 0;
  padding: 24px var(--scene-gutter); background: transparent; border: 0;
}
/* Home alone owns its finite, viewport-measured timeline. No stacked surfaces. */
.home-takeover { margin-top: calc(-1 * var(--header-band, 86px)); position: relative; background: var(--home-paper, #fff); overflow-anchor: none; }
.home-takeover > .story-stage { display: block; padding: 0; min-height: 0; height: var(--home-stage-height, 100dvh); position: sticky; top: 0; background: var(--home-stage-surface, #07080a); }
.home-takeover .home-opening { margin: 0; height: 100%; min-height: 0; --home-opening-header-band: var(--header-band, 86px); }
.home-narrative { position: relative; margin: 0 auto; padding: 0 var(--scene-gutter); width: min(100%, 1440px); display: flex; align-items: center; border: 0; background: transparent; }
.home-narrative .hero-copy { width: 100%; padding: 0; }
.home-narrative h1 { font-size: clamp(2.7rem, 6.7vw, 7rem); max-width: 1100px; margin: 0; line-height: 1.08; }
.home-scene-summary { padding: 32px var(--scene-gutter) 64px; background: #fff; }
.home-scene-summary .hero-bottom { margin: 0; }
.home-takeover[data-story-flow] > .story-stage, .home-takeover:not([data-takeover-ready]) > .story-stage { height: auto; position: relative; }
.home-takeover[data-story-flow] .home-opening, .home-takeover:not([data-takeover-ready]) .home-opening { height: auto; min-height: 100svh; }
.home-takeover[data-story-flow] .home-takeover__canvas, .home-takeover:not([data-takeover-ready]) .home-takeover__canvas { display: none; }
.home-editorial .section-code, .home-page .ed-ai-tease > .section-code { display: none; }
@media (max-width: 1040px) {
  .story-stage { gap: 32px; }
  .story-copy h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); }
  .story-copy h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
}
@media (max-width: 768px) {
  .story-stage { grid-template-columns: 1fr; gap: 36px; padding-block: 140px 60px; }
  .story-copy h1, .projects-page .story-copy h1 { font-size: clamp(2.7rem, 7.7vw, 4.4rem); }
  .story-copy h2 { font-size: clamp(2.2rem, 6.5vw, 3.5rem); }
  [data-story-side="right"] .story-copy, [data-story-side="right"] .story-media { grid-column: auto; grid-row: auto; }
  .story-copy p { font-size: 1.125rem; }
  .story-media--reserved { position: absolute; right: 26px; bottom: 70px; opacity: .5; pointer-events: none; }
  .story-media--reserved .story-archive-number { font-size: 38vw; }
  .story-media--reserved figcaption { display: none; }
  .story-media--reserved:has(img) { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
  .story-media--reserved:has(img) figcaption { display: block; }
  .story-media__frame { height: 45vh; }
  .process-field { max-width: 560px; margin-inline: auto; aspect-ratio: 1.8; }
  .process-field svg { max-height: 280px; }
  .projects-page .story-index { top: calc(var(--header-band, 134px) + 6px); padding-inline: 24px; font-size: .75rem; gap: 12px 20px; }
  .home-scene-summary .hero-bottom { grid-template-columns: 1fr; gap: 16px; }
  .home-narrative h1 { font-size: clamp(2.4rem, 7.5vw, 4.5rem); }
  .home-scene-summary .hero-actions { justify-content: flex-start; }
  .home-scene-summary p { font-size: 1rem; }
  .site-footer { padding-block: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-story-scene][data-story-ready] { height: auto !important; }
  [data-story-scene] > .story-stage { position: relative !important; }
  .story-media__frame > img, .story-archive-number { transform: none; }
  .story-media__frame[data-slices-ready] > img { opacity: 1; }
  .story-slices { display: none; }
  .process-field__front { stroke-dashoffset: 0; }
}
.story-word { font-size: clamp(5rem, 11vw, 11rem); line-height: .94; letter-spacing: -.065em; font-weight: 600; color: #829bc5; }
.printing-page main { margin-top: calc(-1 * var(--header-band, 86px)); }
/* Supporting public pages share the scale without a spare metadata column. */
.editorial-hero { display: block; padding: 80px var(--scene-gutter) 64px; border: 0; }
.editorial-hero__text { max-width: 1060px; }
.editorial-hero h1 { font-size: var(--type-display-l); max-inline-size: 19em; }
.editorial-hero__meta { padding-top: 28px; }
.ed-lead { font-size: var(--type-lead); }
.ed-head { display: block; margin-bottom: 36px; }
.ed-section { padding-inline: var(--scene-gutter); border: 0; }
.ed-section h2, .printing-gallery-head h2, .printing-copy h2, .printing-scope h2, .printing-next h2 { font-size: var(--type-section); }
.ed-section p:not(.section-code), .printing-copy p, .printing-scope p { font-size: var(--type-body); }
.ed-meta { font-size: var(--type-meta); letter-spacing: .015em; font-weight: 500; }
.ed-history-strip { border: 0; }
.ed-history-strip li + li { border: 0; }
@media (max-width: 768px) {
  .story-word { font-size: clamp(4rem, 14vw, 6rem); }
  .projects-page .story-scene:first-of-type .story-stage { padding-top: calc(var(--header-band, 134px) + 80px); }
  .editorial-hero { padding-top: 48px; }
}
/* Open editorial hierarchy, rather than three directory rows or equal cards. */
.home-current-work { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px 80px; margin-top: 60px; }
.home-current-work > a { display: block; min-width: 0; }
.home-current-work > a:first-child { grid-row: span 2; align-self: center; }
.home-current-work h2 { margin-top: 18px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.home-current-work > a:first-child h2 { font-size: var(--type-display-l); max-inline-size: 7em; }
.home-current-work p { font-size: var(--type-body) !important; }
.home-current-work > a::after { content: '→'; display: inline-block; color: var(--blue); font-size: 1.4rem; }
.home-current-work > a:hover h2 { color: var(--blue); }
[data-story-media-align="top"] .story-media { align-self: start; }
[data-story-media-align="bottom"] .story-media { align-self: end; }
[data-story-media-align="center"] .story-media { align-self: center; }
@media (max-width: 768px) {
  .home-current-work { grid-template-columns: 1fr; gap: 42px; }
  .home-current-work > a:first-child { grid-row: auto; }
}

/* Same gateway composition; fit the longer bilingual copy to its actual column. */
.mingcheng-gateway .story-copy, .mingcheng-gateway .story-media { container-type: inline-size; }
.mingcheng-gateway .story-copy h2 { font-size: clamp(1.8rem, 4vw, 4rem); }
.mingcheng-gateway .story-copy h2:lang(en) { font-size: clamp(1.8rem, 3.6vw, 4rem); }
.mingcheng-gateway .story-word:lang(en) { font-size: clamp(2.5rem, 8vw, 7rem); }
@supports (font-size: 1cqi) {
  .mingcheng-gateway .story-copy h2 { font-size: clamp(1.8rem, 9.5cqi, var(--type-display-l)); }
  .mingcheng-gateway .story-copy h2:lang(en) { font-size: clamp(1.8rem, 8.5cqi, var(--type-display-l)); }
  .mingcheng-gateway .story-word:lang(en) { font-size: clamp(2.5rem, 17cqi, 11rem); }
}