/* 有机四翼导视：翼形命中区、错落注释、日光纸面。 */
html:not([data-area]):not([data-theme="dark"]) {
  --bg: #f4f2eb; --grid: transparent; --ink: #303b3c; --ink-dim: #626d69; --ink-faint: #707873;
}
html:not([data-area]):not([data-theme="dark"]) body { isolation: isolate; }
html:not([data-area]):not([data-theme="dark"]) body::before {
  mask-image: none; -webkit-mask-image: none;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse 52% 57% at 50% 42%, #fffefb80, #fffefb24 76%),
    url("concepts/daylight-paper-v1.png");
}
/* The generated paper already carries fibres; keep procedural grain subordinate. */
html:not([data-area]):not([data-theme="dark"]) body::after { opacity: .018; mix-blend-mode: multiply; }
html:not([data-area])[data-theme="dark"] { --bg: #171a1d; }
html:not([data-area])[data-theme="dark"] body { isolation: auto; }
html:not([data-area])[data-theme="dark"] body::before { background-image: none; }
html:not([data-area])[data-theme="dark"] body::after { opacity: .04; mix-blend-mode: normal; }
.organic-stage {
  display: block; position: relative; width: min(1520px,100%); margin: 0 auto;
  padding: 40px 0 105px; min-height: clamp(590px,53vw,820px); overflow: hidden;
}
.organic-stage::before {
  content: ""; position: absolute; width: 43%; height: 70%; left: -16%; top: -7%;
  background: url("concepts/membrane.png") center / cover no-repeat;
  opacity: .075; filter: blur(3px); mix-blend-mode: multiply; pointer-events: none;
  mask-image: radial-gradient(ellipse, #000 18%, transparent 69%); transform: rotate(-24deg);
}
.organic-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 33% 7% at 51% 76%, #75878816, transparent 85%),
    radial-gradient(ellipse 18% 26% at 67% 42%, #ffffff70, transparent 78%);
}
.organic-stage .wings-wrap {
  position: relative; width: min(65%,920px); aspect-ratio: 928/656; margin: 8px auto 0;
  transform: none !important; transition: none;
}
.organic-stage .wings { display: block; position: absolute; inset: 0; overflow: hidden; animation: none; filter: none !important; transition: opacity .28s; mix-blend-mode: multiply; }
/* Original mockup contains an amber annotation at source x302..347, y721..730.
   Notch only this empty margin; no wing pixels or live HTML leaders are removed. */
.organic-stage .wings {
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 88%,5.2% 88%,5.2% 84.5%,0 84.5%);
}
.organic-stage .wings img, .wing-layer img, .arrival-wing img {
  position: absolute; width: 165.517242%; height: 156.097561%; max-width: none;
  left: -32.543104%; top: -24.390244%; display: block;
}
.wing-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .28s; mix-blend-mode: multiply; }
/* These sampled Bezier outlines trace the accepted image, not quadrant rectangles.
   One shared contour drives visual clipping, pointer hit testing and the transition. */
[data-wing="nw"], .organic-stage .quad.nw { clip-path: polygon(47.30% 48.20%, 43.57% 42.41%, 39.51% 36.39%, 35.20% 30.32%, 30.71% 24.38%, 26.14% 18.77%, 21.55% 13.68%, 17.02% 9.27%, 12.63% 5.75%, 8.47% 3.30%, 4.60% 2.10%, 2.85% 1.50%, 1.59% 1.69%, 0.83% 2.59%, 0.53% 4.10%, 0.70% 6.16%, 1.31% 8.68%, 2.35% 11.58%, 3.80% 14.77%, 5.66% 18.17%, 7.90% 21.70%, 10.93% 25.83%, 14.34% 29.65%, 18.04% 33.20%, 21.94% 36.50%, 25.97% 39.60%, 30.05% 42.52%, 34.08% 45.28%, 37.99% 47.93%, 41.69% 50.49%, 45.10% 53.00%, 45.08% 52.39%, 45.15% 51.81%, 45.28% 51.26%, 45.47% 50.75%, 45.71% 50.26%, 45.99% 49.80%, 46.30% 49.37%, 46.63% 48.96%, 46.97% 48.57%, 47.30% 48.20%); }
[data-wing="ne"], .organic-stage .quad.ne { clip-path: polygon(53.70% 46.80%, 58.05% 41.51%, 62.47% 35.99%, 66.93% 30.41%, 71.37% 24.91%, 75.75% 19.65%, 80.02% 14.79%, 84.14% 10.48%, 88.06% 6.87%, 91.73% 4.13%, 95.10% 2.40%, 97.04% 1.66%, 98.29% 1.92%, 98.91% 3.06%, 98.95% 4.95%, 98.49% 7.44%, 97.58% 10.41%, 96.28% 13.72%, 94.66% 17.24%, 92.78% 20.85%, 90.70% 24.40%, 87.64% 28.50%, 84.43% 32.28%, 81.07% 35.75%, 77.60% 38.93%, 74.03% 41.84%, 70.37% 44.47%, 66.67% 46.86%, 62.92% 49.00%, 59.16% 50.91%, 55.40% 52.60%, 55.25% 51.90%, 55.09% 51.25%, 54.93% 50.63%, 54.76% 50.04%, 54.59% 49.48%, 54.41% 48.93%, 54.24% 48.39%, 54.06% 47.86%, 53.88% 47.34%, 53.70% 46.80%); }
[data-wing="sw"], .organic-stage .quad.sw { clip-path: polygon(45.20% 55.80%, 40.95% 56.00%, 36.74% 57.23%, 32.59% 59.36%, 28.53% 62.24%, 24.59% 65.72%, 20.78% 69.69%, 17.15% 73.99%, 13.71% 78.48%, 10.48% 83.03%, 7.50% 87.50%, 5.24% 91.39%, 4.10% 94.34%, 3.95% 96.43%, 4.68% 97.72%, 6.19% 98.29%, 8.35% 98.21%, 11.06% 97.55%, 14.19% 96.38%, 17.64% 94.77%, 21.30% 92.80%, 25.22% 90.24%, 28.84% 87.34%, 32.16% 84.16%, 35.19% 80.76%, 37.95% 77.19%, 40.44% 73.50%, 42.69% 69.77%, 44.69% 66.03%, 46.45% 62.36%, 48.00% 58.80%, 47.83% 58.36%, 47.62% 57.95%, 47.38% 57.57%, 47.12% 57.21%, 46.82% 56.89%, 46.52% 56.60%, 46.20% 56.34%, 45.87% 56.12%, 45.53% 55.94%, 45.20% 55.80%); }
[data-wing="se"], .organic-stage .quad.se { clip-path: polygon(56.10% 56.20%, 59.35% 57.30%, 62.92% 59.06%, 66.74% 61.36%, 70.75% 64.14%, 74.86% 67.29%, 79.02% 70.72%, 83.14% 74.35%, 87.16% 78.08%, 91.00% 81.83%, 94.60% 85.50%, 97.26% 88.84%, 98.94% 91.68%, 99.72% 93.99%, 99.69% 95.79%, 98.94% 97.08%, 97.54% 97.83%, 95.60% 98.07%, 93.19% 97.78%, 90.39% 96.95%, 87.30% 95.60%, 82.68% 92.77%, 78.35% 89.61%, 74.32% 86.17%, 70.57% 82.50%, 67.10% 78.65%, 63.91% 74.68%, 60.99% 70.65%, 58.33% 66.61%, 55.94% 62.61%, 53.80% 58.70%, 54.04% 58.42%, 54.29% 58.14%, 54.54% 57.86%, 54.78% 57.58%, 55.02% 57.30%, 55.26% 57.04%, 55.49% 56.79%, 55.71% 56.57%, 55.91% 56.37%, 56.10% 56.20%); }
.organic-stage .quad { inset: 0; width: 100%; height: 100%; }
.organic-stage .quad:focus-visible {
  background: color-mix(in srgb,var(--cyan) 13%,transparent); outline: none;
}
.organic-stage .wings-wrap[data-hover] > .wings { opacity: .8; }
.wings-wrap[data-hover="nw"] [data-wing="nw"],
.wings-wrap[data-hover="ne"] [data-wing="ne"],
.wings-wrap[data-hover="sw"] [data-wing="sw"],
.wings-wrap[data-hover="se"] [data-wing="se"] { opacity: 1; }
.wing-nodes { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.wings-wrap[data-hover="sw"] .wing-nodes { opacity: 1; }
.wing-nodes i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #b58c47; }
.wing-nodes i:nth-child(1) { left: 18%; top: 80%; }
.wing-nodes i:nth-child(2) { left: 28%; top: 70%; }
.wing-nodes i:nth-child(3) { left: 39%; top: 61%; }
.organic-stage .caption { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: max-content; max-width: 94%; margin: 0; padding: 0; }
.organic-stage .caption .cn { font-weight: 400; font-size: .95rem; letter-spacing: .3em; }
.organic-stage .caption .en { font-size: .75rem; margin-top: 12px; }
.organic-stage .area-label {
  position: absolute; inset: auto; max-width: 220px; width: max-content; margin: 0; padding: 10px 0;
  border: 0; background: none; transform: none; animation: none;
}
.organic-stage .area-label.nw { left: 4.2%; top: 11%; }
.organic-stage .area-label.ne { right: 3.2%; top: 23%; text-align: right; }
.organic-stage .area-label.sw { left: 6.5%; bottom: 27%; }
.organic-stage .area-label.se { right: 4.6%; bottom: 14%; text-align: right; }
.organic-stage .a-code { display: block; font-size: .75rem; letter-spacing: .2em; color: var(--ink-faint); }
.organic-stage .a-code::after { content: none; }
.organic-stage .a-name { font-weight: 400; font-size: clamp(1.3rem,1.85vw,1.8rem); letter-spacing: .2em; margin-top: 8px; text-shadow: none; }
.organic-stage .a-sub { display: block; font-size: .95rem; letter-spacing: .12em; margin-top: 8px; }
.organic-stage .a-sub .en { display: none; }
.organic-stage .a-meta {
  display: block; position: absolute; top: 100%; left: 0; min-width: 200px;
  font-size: .75rem; line-height: 1.8; letter-spacing: .02em; margin: 0;
  opacity: 0; transform: translateY(3px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.organic-stage .ne .a-meta, .organic-stage .se .a-meta { left: auto; right: 0; }
.organic-stage .area-label.lit .a-meta, .organic-stage .area-label:focus-visible .a-meta { opacity: 1; transform: none; }
.organic-stage .dot { display: none; }
.organic-stage .a-rule {
  position: absolute; top: 41px; width: 40px; height: 18px; margin: 0; background: none;
  border-top: 1px solid var(--line); border-radius: 50%; opacity: .85;
}
.organic-stage .nw .a-rule, .organic-stage .sw .a-rule { left: calc(100% + 14px); transform: rotate(16deg); }
.organic-stage .ne .a-rule, .organic-stage .se .a-rule { right: calc(100% + 14px); transform: rotate(-18deg); }
.organic-stage .a-rule::after { content: ""; position: absolute; right: 0; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.organic-stage .ne .a-rule::after, .organic-stage .se .a-rule::after { right: auto; left: 0; }
.organic-stage .area-label.lit .a-rule { width: 46px; background: none; border-color: var(--cyan); }
.organic-stage .sw.lit .a-name, .organic-stage .sw.lit .a-code { color: #a57830; }
.organic-stage .sw.lit .a-rule { background: none; border-color: #a57830; }
.organic-stage .area-label:focus-visible { outline: none; }
.organic-stage .area-label:focus-visible .a-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
html:not([data-area]) .site-head { min-height: 84px; background: transparent; }
html:not([data-area]) #clock { display: none; }
html:not([data-area]) .acq-strip { background: none; border-color: color-mix(in srgb,var(--line) 65%,transparent); }
html:not([data-area]) .acq-label { font-size: .75rem; }
html:not([data-area]) .acq.acq-novel { background: none; }
html[data-theme="dark"] .organic-stage::before, html[data-theme="dark"] .organic-stage::after { display: none; }
/* The source paper is near-white (250..254), not transparent. After inversion,
   map this residual floor to black: screen blending then contributes zero,
   so the rectangular image canvas disappears without changing the daytime art. */
html[data-theme="dark"] .organic-stage .wings,
html[data-theme="dark"] .wing-layer,
html[data-theme="dark"] .arrival-wing {
  filter: invert(1) contrast(1.12) !important;
  mix-blend-mode: screen;
}

/* Names are assigned only for home <-> section navigation; reading stays immediate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.arrival-wing { position: fixed; pointer-events: none; z-index: 6; opacity: .14; overflow: hidden; mix-blend-mode: multiply; }
html[data-flight-dir="nw"] { --flight-accent: #778d81; --flight-x: -14px; --flight-y: -10px; }
html[data-flight-dir="ne"] { --flight-accent: #4e6c81; --flight-x: 14px; --flight-y: -10px; }
html[data-flight-dir="sw"] { --flight-accent: #b18b4b; --flight-x: -14px; --flight-y: 10px; }
html[data-flight-dir="se"] { --flight-accent: #74969d; --flight-x: 14px; --flight-y: 10px; }
html[data-flight] .wing-layer { transition: none; }
html[data-flight] .wings-wrap > .wings { opacity: .24; transition: none; }
html[data-flight] .wing-layer[data-flight-name] { opacity: 1; }
html[data-flight] .site-head { view-transition-name: archive-head; }
html[data-flight]::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22,.65,.22,1); }
html[data-flight="return"]::view-transition-group(*) { animation-duration: .42s; }
html[data-flight]::view-transition-old(root) { animation: archive-fade-out .3s both; }
html[data-flight]::view-transition-new(root) { animation: archive-reveal .55s .1s both; }
html[data-flight]::view-transition-group(wing-flight) { z-index: 3; }
html[data-flight]::view-transition-group(archive-title) { z-index: 5; }
html[data-flight]::view-transition-group(archive-head) { z-index: 6; }
html[data-flight]::view-transition-old(wing-flight) { mix-blend-mode: normal; animation: membrane-away .7s both; }
html[data-flight]::view-transition-new(wing-flight) { mix-blend-mode: normal; animation: membrane-through .7s both; }
html[data-flight="return"]::view-transition-old(wing-flight) { animation: archive-fade-out .3s both; }
html[data-flight="return"]::view-transition-new(wing-flight) { animation: archive-fade-in .42s both; }
html[data-flight="return"]::view-transition-new(root) { animation-duration: .35s; animation-delay: 0s; }
html[data-flight]::view-transition-new(archive-title),
html[data-flight]::view-transition-old(archive-title) { height: 100%; object-fit: contain; object-position: left center; mix-blend-mode: normal; }
html[data-flight-dir="sw"]::view-transition-new(archive-title) { color: #a57830; }
html[data-flight-dir="ne"]::view-transition-new(root) { animation-name: archive-unfold; }
html[data-flight-dir="se"]::view-transition-new(root) { animation-name: gallery-expose; }
@keyframes archive-fade-out { to { opacity: 0; } }
@keyframes archive-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes archive-reveal { from { opacity: 0; transform: translate(var(--flight-x),var(--flight-y)); } to { opacity: 1; transform: none; } }
@keyframes archive-unfold { from { opacity: 0; clip-path: ellipse(8% 18% at 78% 25%); } to { opacity: 1; clip-path: ellipse(145% 145% at 78% 25%); } }
@keyframes gallery-expose { from { opacity: 0; filter: brightness(1.12); } to { opacity: 1; filter: none; } }
@keyframes membrane-away { 0% { opacity: 1; } 65%,100% { opacity: 0; } }
@keyframes membrane-through { 0% { opacity: .8; } 100% { opacity: 0; } }
html.portal-arrive .section-hero { animation: archive-reveal .38s both; }
html.portal-arrive .organic-stage { animation: archive-fade-in .3s both; }
@media (max-width: 1000px) {
  .organic-stage { min-height: 590px; padding-top: 65px; }
  .organic-stage .wings-wrap { width: 65%; }
  .organic-stage .a-name { font-size: 1.3rem; letter-spacing: .12em; }
  .organic-stage .a-sub { font-size: .875rem; }
  .organic-stage .a-rule { width: 24px; }
  .organic-stage .area-label.nw { left: 3%; top: 7%; }
  .organic-stage .area-label.ne { right: 2.8%; top: 23%; }
  .organic-stage .area-label.sw { left: 3.8%; bottom: 25%; }
  .organic-stage .area-label.se { right: 3%; bottom: 14%; }
}
@media (max-width: 700px) {
  .organic-stage { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 24px 28px 32px; gap: 0; }
  .organic-stage .wings-wrap { width: 100%; flex: none; margin: 0; order: 0; }
  .organic-stage .caption { position: static; transform: none; width: auto; max-width: none; margin: 20px 0 30px; order: 1; }
  .organic-stage .caption .cn { font-size: .85rem; letter-spacing: .15em; }
  .organic-stage .caption .en { font-size: .75rem; letter-spacing: .1em; }
  .organic-stage .area-label {
    position: relative; inset: auto; display: grid; grid-template-columns: 35px minmax(0,1fr) auto;
    align-items: baseline; column-gap: 10px; width: 100%; max-width: none; min-height: 62px;
    padding: 16px 0; margin: 0; border: 0; text-align: left; order: 2;
  }
  .organic-stage .area-label.nw, .organic-stage .area-label.ne,
  .organic-stage .area-label.sw, .organic-stage .area-label.se { inset: auto; text-align: left; }
  .organic-stage .a-code { font-size: 0; letter-spacing: 0; }
  .organic-stage .a-code::after { font: .75rem var(--cond); color: var(--ink-faint); }
  .organic-stage .nw .a-code::after { content: "01"; }
  .organic-stage .ne .a-code::after { content: "02"; }
  .organic-stage .sw .a-code::after { content: "03"; }
  .organic-stage .se .a-code::after { content: "04"; }
  .organic-stage .a-name { font-size: 1.15rem; letter-spacing: .08em; margin: 0; }
  .organic-stage .a-sub { font-size: .875rem; letter-spacing: 0; margin: 0; color: var(--ink-dim); }
  .organic-stage .a-sub br { display: none; }
  .organic-stage .a-rule, .organic-stage .a-meta { display: none; }
  .organic-stage .area-label.lit .a-name { color: var(--cyan); }
  .organic-stage::before { width: 70%; height: 42%; left: -35%; top: -3%; opacity: .05; }
  html[data-flight]::view-transition-group(*) { animation-duration: .48s; }
  html[data-flight]::view-transition-new(root) { animation: archive-fade-in .38s both; }
  html[data-flight]::view-transition-old(wing-flight), html[data-flight]::view-transition-new(wing-flight) { animation-duration: .48s; }
}
@media (max-width: 360px) {
  .organic-stage { padding-left: 20px; padding-right: 20px; }
  .organic-stage .area-label { grid-template-columns: 25px minmax(0,1fr); column-gap: 9px; }
  .organic-stage .a-sub { grid-column: 2; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .organic-stage *, html.portal-arrive .section-hero, html.portal-arrive .organic-stage { animation: none !important; transition: none !important; }
  .arrival-wing { display: none; }
}

/* 宽屏构图：铭牌以翼尖为锚（翼图内已知坐标 nw2%,4% ne97.5%,2% sw4%,96% se98.5%,93%），
   外移 45px 供弧线搭接、垂直居中对齐；随翼图缩放，不再相对舞台漂移 */
@media (min-width: 1001px) {
  .organic-stage { width: min(1280px, 100%); --w: min(70vw, 900px); }
  .organic-stage .wings-wrap { width: var(--w); margin-top: 0; }
  .organic-stage .area-label.nw { left: auto; right: calc(50% + var(--w)*0.48 + 45px); top: calc(48px + var(--w)*0.0283 - 45px); bottom: auto; }
  .organic-stage .area-label.ne { left: calc(50% + var(--w)*0.475 + 45px); right: auto; top: calc(48px + var(--w)*0.0141 - 45px); bottom: auto; }
  .organic-stage .area-label.sw { left: auto; right: calc(50% + var(--w)*0.46 + 45px); top: calc(48px + var(--w)*0.6786 - 45px); bottom: auto; }
  .organic-stage .area-label.se { left: calc(50% + var(--w)*0.485 + 45px); right: auto; top: calc(48px + var(--w)*0.6574 - 45px); bottom: auto; }
}