:root {
  --ink: #141310;
  --paper: #e9e3d6;
  --paper-dim: #c9c0b2;
  --red: #d6472e;
  --red-dark: #982d22;
  --line: rgba(233, 227, 214, .28);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; overflow-x: hidden; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }

.topbar { position: sticky; top: 0; z-index: 10; height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(18px, 4vw, 60px); background: rgba(20,19,16,.94); border-bottom: 1px solid rgba(233,227,214,.14); backdrop-filter: blur(12px); }
.wordmark { font-size: 15px; font-weight: 800; letter-spacing: -.03em; }.wordmark span { margin-left: 6px; color: var(--paper-dim); font: 10px var(--mono); letter-spacing: .04em; }
nav { display: flex; align-items: center; gap: clamp(14px, 2.7vw, 40px); } nav button { padding: 6px 0; border: 0; background: none; color: var(--paper-dim); font-size: 13px; transition: color .18s; } nav button:hover { color: var(--paper); }
.side-switch { justify-self: end; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--paper-dim); font: 10px var(--mono); white-space: nowrap; }.switch-track { position: relative; display: block; width: 28px; height: 14px; border: 1px solid var(--paper-dim); border-radius: 9px; }.switch-track i { position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transition: transform .25s ease; }.side-b-label { opacity: .52; }

.side { min-height: calc(100vh - 70px); }.side[hidden] { display: none; }
.a-hero { position: relative; min-height: min(770px, calc(100vh - 70px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .8fr); align-items: stretch; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: end; padding: 10vh clamp(22px, 7vw, 116px) 9vh; }.kicker, .section-label { margin: 0; color: var(--red); font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.hero-copy h1 { margin: 19px 0 18px; font-size: clamp(70px, 10.2vw, 170px); line-height: .79; letter-spacing: -.12em; }.hero-line { max-width: 360px; margin: 0 0 31px; font-size: clamp(17px, 2vw, 25px); line-height: 1.35; }
.plain-link { width: fit-content; padding: 0 0 7px; border: 0; border-bottom: 1px solid var(--red); background: none; font-size: 13px; text-align: left; }.plain-link span { margin-left: 12px; color: var(--red); }.plain-link:hover { color: var(--red); }
.hero-poster { position: relative; min-height: 520px; overflow: hidden; background: var(--red); color: var(--ink); isolation: isolate; }.poster-number { position: absolute; z-index: 2; right: -1.2vw; bottom: -3.5vw; font: 900 clamp(230px, 31vw, 510px)/.74 var(--mono); letter-spacing: -.2em; color: var(--paper); }.poster-sun { position: absolute; z-index: 1; width: min(27vw, 360px); aspect-ratio: 1; top: 16%; left: 14%; border-radius: 50%; background: var(--ink); box-shadow: 15px 15px 0 var(--paper); }.poster-orbit { position: absolute; z-index: 3; border: 2px solid var(--ink); border-radius: 50%; transform: rotate(-25deg); }.orbit-one { width: 118%; height: 34%; left: -17%; top: 35%; }.orbit-two { width: 47%; height: 86%; right: 11%; top: 5%; }.poster-type { position: absolute; z-index: 4; top: 9%; right: 9%; font: 800 12px/1.45 var(--mono); }.poster-stamp { position: absolute; z-index: 4; left: 8%; bottom: 8%; width: 56px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--ink); font: 900 12px/1 var(--mono); text-align: center; }

.ruled-section { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 9vw, 144px) clamp(22px, 7vw, 116px); border-bottom: 1px solid var(--line); }.section-label { margin-bottom: 30px; }.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }.section-head h2, .crew h2, .contact h2 { margin: 0; font-size: clamp(44px, 7.2vw, 106px); line-height: .88; letter-spacing: -.1em; }
.intro-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(35px, 8vw, 130px); }.intro-layout h2 { margin: 0; font-size: clamp(48px, 6.5vw, 100px); line-height: .93; letter-spacing: -.1em; }.intro-layout p { max-width: 560px; margin: 0; color: var(--paper-dim); font-size: clamp(17px, 2vw, 25px); line-height: 1.65; }
.music-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 60px; }.album-note { max-width: 410px; margin: 0; color: var(--paper-dim); font-size: clamp(18px, 2vw, 26px); line-height: 1.5; }.album-card { min-height: 210px; position: relative; display: grid; align-content: space-between; justify-items: start; padding: 24px; color: var(--ink); border: 0; background: var(--red); text-align: left; transition: transform .2s ease; }.album-card:hover { transform: translate(-5px,-5px); box-shadow: 7px 7px 0 var(--paper); }.album-card span { font: 11px var(--mono); }.album-card strong { font-size: clamp(29px, 4vw, 52px); letter-spacing: -.08em; }.album-card em { max-width: 330px; padding-right: 35px; font-size: 13px; font-style: normal; line-height: 1.5; }.album-card i { position: absolute; right: 20px; bottom: 14px; font-size: 28px; font-style: normal; }
.crew-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 55px; border-top: 1px solid var(--line); }.crew-grid article { position: relative; min-height: 225px; padding: 16px 18px 18px; overflow: hidden; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: end; }.crew-grid article:first-child { border-left: 1px solid var(--line); }.crew-grid span, .crew-grid h3, .crew-grid p { position: relative; z-index: 2; }.crew-grid span { margin-bottom: auto; color: var(--red); font: 10px var(--mono); }.crew-grid h3 { margin: 0 0 9px; font-size: clamp(23px, 3vw, 38px); letter-spacing: -.06em; }.crew-grid p { margin: 0; color: var(--paper-dim); font-size: 13px; }.crew-grid .has-photo { min-height: 330px; justify-content: end; }.crew-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }.has-photo::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(10,9,14,.04) 26%, rgba(10,9,14,.16) 48%, rgba(10,9,14,.9) 100%); }.has-photo span { color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.8); }.has-photo p { color: var(--paper-dim); }.has-photo:hover .crew-photo { transform: scale(1.045); }
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12vw; align-items: end; }.contact-list { border-top: 1px solid var(--line); }.contact-list button { width: 100%; display: grid; grid-template-columns: .7fr 1fr auto; align-items: center; gap: 14px; min-height: 82px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }.contact-list span, .contact-list i { color: var(--paper-dim); font-size: 12px; font-style: normal; }.contact-list strong { font-size: clamp(18px, 2.4vw, 32px); letter-spacing: -.04em; }.contact-list button:hover { color: var(--red); }

.side-b { color: var(--ink); background: var(--paper); }.side-b .ruled-section { border-color: rgba(20,19,16,.32); }.side-b .section-label { color: var(--red-dark); font-weight: 800; }.side-b h2, .side-b h3, .side-b strong { font-family: "Arial Narrow", "PingFang SC", "Microsoft YaHei", sans-serif; font-kerning: normal; }
.b-hero { position: relative; min-height: min(760px, calc(100vh - 70px)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr); grid-template-rows: auto 1fr auto; column-gap: 6vw; padding: clamp(54px, 8vh, 96px) clamp(22px, 7vw, 116px) clamp(50px, 8vh, 90px); overflow: hidden; background: var(--red); color: var(--ink); }.b-hero::before { content: ""; position: absolute; right: -5%; top: -20%; width: 39%; height: 150%; border-left: clamp(24px, 3vw, 54px) solid var(--ink); background: repeating-linear-gradient(135deg, transparent 0 21px, rgba(20,19,16,.95) 22px 25px); transform: skewX(-16deg); opacity: .98; }.b-hero-meta { position: relative; z-index: 2; grid-column: 1 / -1; display: flex; justify-content: space-between; font: 800 11px var(--mono); letter-spacing: .04em; }.b-hero h1 { position: relative; z-index: 2; align-self: center; grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(92px, 13.8vw, 218px); line-height: .76; letter-spacing: -.055em; }.b-hero > p { position: relative; z-index: 2; grid-column: 2; grid-row: 3; max-width: 390px; margin: 0 0 5px; padding-top: 20px; border-top: 3px solid var(--ink); font-size: clamp(17px, 1.65vw, 23px); line-height: 1.52; }.b-grid { position: relative; z-index: 2; grid-column: 2; grid-row: 2; justify-self: end; align-self: center; width: min(28vw, 390px); height: min(28vw, 390px); display: grid; grid-template-columns: repeat(3,1fr); border: 3px solid var(--ink); transform: rotate(-9deg); }.b-grid i { display: block; border: 1px solid var(--ink); background: var(--red); }.b-grid i:nth-child(3n) { background: var(--paper); }.b-grid i:nth-child(2), .b-grid i:nth-child(7) { background: var(--ink); }
.concept-layout { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: clamp(35px, 8vw, 120px); }.concept-layout h2, .world-section h2 { margin: 0; font-size: clamp(50px, 6vw, 88px); line-height: .98; letter-spacing: -.045em; }.concept-layout h2 { padding-left: 17px; border-left: 10px solid var(--red); }.concept-layout p { margin: 0 0 24px; font-size: clamp(17px, 1.8vw, 24px); line-height: 1.7; }.concept-layout p:last-child { margin-bottom: 0; color: #4c4943; }
.world-section h2 { margin-bottom: 45px; }.world-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.world-grid article { min-height: 258px; padding: 25px; border: 2px solid var(--ink); background: #f4eee1; }.world-grid article:nth-child(2), .world-grid article:nth-child(3) { background: var(--red); }.world-grid span { color: var(--red-dark); font: 800 10px var(--mono); }.world-grid article:nth-child(2) span, .world-grid article:nth-child(3) span { color: var(--ink); }.world-grid h3 { margin: 35px 0 14px; font-size: clamp(28px, 3.5vw, 45px); line-height: 1; letter-spacing: -.045em; }.world-grid p { max-width: 470px; margin: 0; color: #4c4943; font-size: 15px; line-height: 1.7; }.world-grid article:nth-child(2) p, .world-grid article:nth-child(3) p { color: var(--ink); }
.track-list { margin-top: 48px; border-top: 2px solid var(--ink); }.track-list details { border-bottom: 1px solid rgba(20,19,16,.4); }.track-list summary { list-style: none; display: grid; grid-template-columns: 58px minmax(220px, 1fr) minmax(150px,.7fr); align-items: center; min-height: 92px; gap: 16px; cursor: pointer; }.track-list summary::-webkit-details-marker { display: none; }.track-list summary b { color: var(--red-dark); font: 800 11px var(--mono); }.track-list summary strong { font-size: clamp(23px, 2.75vw, 39px); line-height: 1.15; letter-spacing: -.035em; }.track-list summary span { color: #5c5750; font-size: 14px; }.track-list p { max-width: 780px; margin: 0; padding: 0 30px 31px 74px; color: #4c4943; font-size: 16px; line-height: 1.75; }.track-list details[open] { background: rgba(214,71,46,.1); }.track-list details[open] summary { padding: 0 20px; }
.dossier-list { margin-top: 48px; border-top: 2px solid var(--ink); }.dossier-list details { border-bottom: 1px solid rgba(20,19,16,.4); }.dossier-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 82px; cursor: pointer; font-size: clamp(19px, 2.3vw, 31px); line-height: 1.25; letter-spacing: -.025em; }.dossier-list summary::-webkit-details-marker { display: none; }.dossier-list summary span { color: var(--red-dark); }.dossier-list p { max-width: 780px; margin: 0; padding: 0 0 30px; color: #4c4943; font-size: 17px; line-height: 1.75; }
.b-exit { padding: clamp(70px, 10vw, 150px) clamp(22px, 7vw, 116px); background: var(--ink); color: var(--paper); }.b-exit p { max-width: 780px; margin: 0 0 35px; font-size: clamp(26px, 4vw, 60px); line-height: 1.25; letter-spacing: -.07em; }.inverse { color: var(--paper); }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px clamp(18px, 4vw, 60px); color: var(--paper-dim); background: var(--ink); font: 10px var(--mono); letter-spacing: .06em; }.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; transform: translate(-50%, 140%); padding: 11px 14px; color: var(--paper); background: var(--red-dark); font-size: 12px; opacity: 0; transition: .22s; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

body.b-mode .switch-track i { transform: translateX(13px); } body.b-mode .side-a-label { opacity: .52; } body.b-mode .side-b-label { opacity: 1; color: var(--paper); }
@media (max-width: 800px) { .topbar { grid-template-columns: 1fr auto; height: 62px; }.topbar nav { display: none; }.wordmark span { display: none; }.side { min-height: calc(100vh - 62px); }.a-hero { min-height: auto; grid-template-columns: 1fr; }.hero-copy { min-height: 520px; padding: 85px 24px 58px; }.hero-poster { min-height: 380px; }.poster-number { right: -10px; bottom: -24px; font-size: 270px; }.poster-sun { width: 190px; }.ruled-section { padding: 78px 24px; }.intro-layout, .concept-layout, .music-layout, .contact { grid-template-columns: 1fr; }.intro-layout { gap: 34px; }.section-head { display: block; }.section-head h2 { margin-top: 18px; }.music-layout { margin-top: 36px; }.crew-grid { grid-template-columns: repeat(2, 1fr); margin-top: 38px; }.crew-grid article:nth-child(3) { border-left: 1px solid var(--line); }.crew-grid article { min-height: 165px; }.contact { gap: 42px; }.contact-list button { grid-template-columns: 1fr auto; padding: 15px 0; }.contact-list span { grid-column: 1 / -1; }
  .b-hero { min-height: 650px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; gap: 20px; padding: 40px 24px 52px; }.b-hero::before { right: -23%; width: 60%; border-left-width: 22px; opacity: .9; }.b-hero h1 { grid-column: 1; grid-row: 2; align-self: end; margin: 0; font-size: clamp(84px, 24vw, 150px); line-height: .78; letter-spacing: -.04em; }.b-grid { grid-column: 1; grid-row: 3; justify-self: start; width: 168px; height: 168px; transform: rotate(-8deg); }.b-hero > p { grid-column: 1; grid-row: 4; max-width: 345px; padding-top: 14px; font-size: 16px; }.concept-layout { gap: 35px; }.concept-layout h2, .world-section h2 { letter-spacing: -.03em; }.world-grid { grid-template-columns: 1fr; }.world-grid article { min-height: 210px; border-left: 2px solid var(--ink); }.track-list { margin-top: 38px; }.track-list summary { grid-template-columns: 35px 1fr; min-height: 82px; gap: 12px; padding: 0 8px; }.track-list summary span { grid-column: 2; padding-bottom: 14px; }.track-list details[open] summary { padding: 0 15px; }.track-list p { padding: 0 20px 26px; font-size: 15px; }.dossier-list { margin-top: 38px; }.dossier-list summary { min-height: 70px; font-size: 20px; }.dossier-list p { font-size: 15px; }.b-exit { padding: 80px 24px; } footer { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* 25号宇宙 art-direction revision: a dark poster A side and a constructivist archive B side. */
:root { --ink: #0d0d0e; --paper: #e7dfcf; --paper-dim: #bcb3a2; --red: #c93427; --red-dark: #8e2119; --yellow: #dfe73d; --blue: #179acb; --line: rgba(231,223,207,.3); }
.topbar { border-bottom-color: rgba(231,223,207,.2); background: rgba(13,13,14,.96); }.wordmark { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; }.side-switch { gap: 10px; color: var(--paper); }.switch-track { width: 50px; height: 22px; border-radius: 2px; border-color: var(--yellow); background: #0d0d0e; }.switch-track::before, .switch-track::after { content: ""; position: absolute; top: 6px; width: 8px; height: 8px; border: 1px solid var(--paper); border-radius: 50%; }.switch-track::before { left: 12px; }.switch-track::after { right: 12px; }.switch-track i { top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 0; background: var(--yellow); }.side-b-label { color: var(--red); } body.b-mode .switch-track { border-color: var(--red); } body.b-mode .switch-track i { transform: translateX(28px); background: var(--red); }

.a-hero { min-height: min(790px, calc(100vh - 70px)); grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr); background: #0d0d0e; }.hero-copy { position: relative; z-index: 2; padding: 9vh clamp(24px, 5.5vw, 90px) 8vh; background: linear-gradient(90deg, #0d0d0e 86%, transparent); }.kicker { color: var(--yellow); }.hero-copy h1 { max-width: 570px; margin-top: 22px; font-family: "Arial Narrow", "PingFang SC", sans-serif; font-size: clamp(74px, 9.6vw, 156px); line-height: .86; letter-spacing: -.045em; }.hero-line { color: var(--paper-dim); font-size: clamp(17px, 1.7vw, 23px); }.plain-link { border-color: var(--yellow); }.plain-link span { color: var(--yellow); }.hero-poster { min-height: 100%; background: #0d0d0e url("./assets/band-avatar.png") center/cover no-repeat; }.hero-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d0d0e 0%, transparent 22%), linear-gradient(0deg, rgba(13,13,14,.7), transparent 35%); }.hero-poster > * { display: none; }
.band-intro { background: #111112; }.intro-layout h2 { font-family: "Arial Narrow", "PingFang SC", sans-serif; letter-spacing: -.045em; }.intro-layout p { max-width: 620px; }.section-head h2, .crew h2, .contact h2 { font-family: "Arial Narrow", "PingFang SC", sans-serif; letter-spacing: -.045em; }.album-card { min-height: 245px; border: 1px solid var(--yellow); background: #151516; color: var(--paper); }.album-card span { color: var(--yellow); }.album-card strong { letter-spacing: -.045em; }.album-card em { color: var(--paper-dim); }.album-card i { color: var(--yellow); }.album-card:hover { box-shadow: 7px 7px 0 var(--yellow); }.crew-grid article { min-height: 270px; }.crew-grid .has-photo { min-height: 390px; }.crew-photo { object-position: center top; }.has-photo::after { background: linear-gradient(180deg, rgba(13,13,14,.02) 28%, rgba(13,13,14,.12) 52%, rgba(13,13,14,.95) 100%); }

.side-b { --archive-line: rgba(13,13,14,.42); position: relative; background: var(--paper); color: var(--ink); }.side-b .ruled-section { max-width: none; border-bottom: 1px solid var(--archive-line); }.side-b .section-label { color: var(--red-dark); }.b-hero { min-height: min(690px, calc(100vh - 70px)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .75fr); grid-template-rows: auto 1fr auto; gap: 28px 7vw; padding: clamp(40px, 6vw, 86px) clamp(24px, 7vw, 116px) clamp(44px, 6vw, 86px); background: var(--paper); border-bottom: 1px solid var(--ink); color: var(--ink); }.b-hero::before { right: 9%; top: -22%; width: 32%; height: 162%; border-left: 22px solid var(--red); background: repeating-linear-gradient(135deg, transparent 0 24px, rgba(13,13,14,.9) 25px 28px); transform: skewX(-23deg); opacity: 1; }.b-hero-meta { grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 1px solid var(--ink); color: var(--ink); }.b-hero h1 { grid-column: 1; grid-row: 2; align-self: center; font-size: clamp(86px, 12.5vw, 205px); line-height: .8; letter-spacing: -.035em; }.b-hero > p { grid-column: 2; grid-row: 3; max-width: 390px; padding-top: 17px; border-top: 4px solid var(--red); font-size: clamp(17px, 1.55vw, 22px); line-height: 1.58; }.b-grid { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; width: min(30vw, 390px); height: min(30vw, 390px); border: 0; transform: none; background: #c93427 url("./assets/conn-guitar-v2.png") center/cover no-repeat; box-shadow: 14px 14px 0 var(--ink); }.b-grid i { display: none; }
.concept-lead { background: #f1eadb; }.concept-layout { grid-template-columns: minmax(250px,.76fr) minmax(0,1.24fr); }.concept-layout h2, .world-section h2 { font-family: "Arial Narrow", "PingFang SC", sans-serif; line-height: .94; letter-spacing: -.035em; }.concept-layout h2 { border-left: 14px solid var(--red); }.concept-layout p { line-height: 1.75; }.world-section { position: relative; background: var(--paper); }.world-grid { grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ink); }.world-grid article { min-height: 310px; border: 0; border-right: 1px solid var(--ink); background: transparent; }.world-grid article:last-child { border-right: 0; }.world-grid article:nth-child(2), .world-grid article:nth-child(3) { background: transparent; }.world-grid article:nth-child(2) { background: var(--red); }.world-grid article:nth-child(3) { background: var(--ink); color: var(--paper); }.world-grid article:nth-child(2) p, .world-grid article:nth-child(3) p { color: inherit; }.world-grid article:nth-child(3) span { color: var(--yellow); }.world-grid h3 { line-height: 1.06; letter-spacing: -.035em; }
.track-section { background: #f1eadb; }.track-list { border-top-color: var(--ink); }.track-list details { border-bottom-color: var(--archive-line); }.track-list details[open] { background: var(--red); }.track-list details[open] p { color: var(--ink); }.track-list summary strong { letter-spacing: -.025em; }.track-list summary b { color: var(--red-dark); }.track-list details[open] summary b { color: var(--ink); }.track-list p { line-height: 1.8; }.dossier { background: var(--paper); }.dossier-list details:first-child { border-top-color: var(--ink); }.dossier-list summary { font-family: "Arial Narrow", "PingFang SC", sans-serif; }.b-exit { padding: 90px clamp(24px, 7vw, 116px); border-top: 16px solid var(--red); }

@media (max-width: 980px) { .a-hero { grid-template-columns: 1fr 1fr; }.hero-copy { padding-left: 36px; padding-right: 36px; }.world-grid { grid-template-columns: repeat(2, 1fr); }.world-grid article:nth-child(2) { border-right: 0; }.world-grid article:nth-child(3) { border-top: 1px solid var(--ink); }.world-grid article:nth-child(4) { border-top: 1px solid var(--ink); border-right: 0; } }
@media (max-width: 800px) { .a-hero { grid-template-columns: 1fr; }.hero-copy { min-height: 470px; padding: 80px 24px 48px; background: #0d0d0e; }.hero-poster { min-height: 410px; background-position: 55% center; }.hero-poster::after { background: linear-gradient(0deg, #0d0d0e, transparent 40%); }.hero-copy h1 { font-size: clamp(68px, 20vw, 122px); }.b-hero { min-height: 700px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; gap: 18px; padding: 34px 24px 48px; }.b-hero::before { right: -29%; width: 58%; border-left-width: 14px; opacity: .7; }.b-hero h1 { grid-column: 1; grid-row: 2; align-self: end; font-size: clamp(78px, 23vw, 145px); line-height: .82; }.b-grid { grid-column: 1; grid-row: 3; justify-self: start; width: 184px; height: 184px; box-shadow: 8px 8px 0 var(--ink); }.b-hero > p { grid-column: 1; grid-row: 4; margin: 0; font-size: 16px; }.concept-layout { grid-template-columns: 1fr; }.concept-layout h2 { max-width: 310px; }.world-grid { grid-template-columns: 1fr; }.world-grid article, .world-grid article:nth-child(2), .world-grid article:nth-child(3), .world-grid article:nth-child(4) { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--ink); border-top: 0; }.world-grid article:last-child { border-bottom: 0; }.crew-grid .has-photo { min-height: 300px; } }

/* Refinement: member artwork stays in A-side roster; B-side remains an album dossier. */
.a-hero { grid-template-columns: minmax(0, 1.08fr) minmax(350px, .72fr); min-height: min(735px, calc(100vh - 70px)); }.hero-copy { padding: 10vh clamp(28px, 7vw, 116px) 10vh; background: #0d0d0e; }.hero-copy h1 { max-width: none; white-space: nowrap; font-size: clamp(66px, 7.7vw, 128px); line-height: .92; letter-spacing: -.04em; }.hero-line { max-width: 300px; margin-top: 22px; margin-bottom: 35px; font-size: 18px; }.hero-poster { align-self: center; justify-self: center; width: min(33vw, 485px); min-height: 0; height: auto; aspect-ratio: 1; margin: 0 6vw 0 0; border: 1px solid rgba(231,223,207,.32); background-size: contain; background-position: center; box-shadow: 10px 10px 0 rgba(223,231,61,.85); }.hero-poster::after { background: none; }.a-hero::after { content: "A / 25"; position: absolute; right: 6vw; bottom: 6vh; color: var(--paper-dim); font: 10px var(--mono); letter-spacing: .14em; }
.b-grid { background: var(--ink); border: 1px solid var(--ink); box-shadow: 12px 12px 0 var(--red); }.b-grid i { display: block; border: 1px solid var(--paper); background: var(--ink); }.b-grid i:nth-child(2), .b-grid i:nth-child(5), .b-grid i:nth-child(8) { background: var(--red); }.b-grid i:nth-child(3), .b-grid i:nth-child(7) { background: var(--paper); }.b-hero > p { background: var(--paper); padding: 18px 20px 18px 0; }
@media (max-width: 800px) { .a-hero { grid-template-columns: 1fr; min-height: auto; }.hero-copy { min-height: 430px; padding: 78px 24px 55px; }.hero-copy h1 { font-size: clamp(60px, 17vw, 86px); white-space: nowrap; }.hero-poster { width: min(84vw, 430px); margin: 16px auto 54px; box-shadow: 7px 7px 0 rgba(223,231,61,.85); }.a-hero::after { right: 24px; bottom: 20px; }.b-grid { background: var(--ink); } }

/* A-side image integration: the avatar is now a single atmospheric background layer. */
.a-hero { display: block; min-height: min(760px, calc(100vh - 70px)); isolation: isolate; background: #0d0d0e; }.hero-copy { position: relative; z-index: 2; width: min(58%, 760px); min-height: min(760px, calc(100vh - 70px)); padding: 0 0 9vh clamp(28px, 7vw, 116px); display: flex; justify-content: flex-end; background: transparent; }.hero-poster { position: absolute; z-index: 0; inset: 0 0 0 36%; width: auto; height: auto; min-height: 0; margin: 0; border: 0; box-shadow: none; aspect-ratio: auto; background-position: 70% center; background-size: cover; opacity: .88; }.hero-poster::after { display: block; background: linear-gradient(90deg, #0d0d0e 0%, rgba(13,13,14,.95) 15%, rgba(13,13,14,.52) 43%, rgba(13,13,14,.04) 72%), linear-gradient(0deg, rgba(13,13,14,.72), transparent 40%); }.a-hero::after { display: none; }
@media (max-width: 800px) { .a-hero { min-height: 720px; }.hero-copy { width: 100%; min-height: 720px; padding: 0 24px 280px; justify-content: flex-end; }.hero-poster { inset: 280px 0 0; background-position: 58% center; background-size: cover; opacity: .78; }.hero-poster::after { background: linear-gradient(180deg, #0d0d0e 0%, rgba(13,13,14,.24) 35%, rgba(13,13,14,.08) 65%, #0d0d0e 100%); } }

/* Use the supplied band avatar as the actual hero backdrop, not a standalone card. */
.a-hero::before { content: ""; position: absolute; z-index: 0; inset: 0; background: #0d0d0e url("./assets/band-avatar.png") right center / auto 100% no-repeat; opacity: .9; }.a-hero::after { content: ""; display: block; z-index: 1; inset: 0; background: linear-gradient(90deg, #0d0d0e 0%, rgba(13,13,14,.98) 31%, rgba(13,13,14,.62) 52%, rgba(13,13,14,.06) 77%), linear-gradient(0deg, rgba(13,13,14,.78), transparent 42%); pointer-events: none; }.hero-poster { display: none; }.hero-copy { z-index: 2; }
@media (max-width: 800px) { .a-hero::before { background-size: auto 48%; background-position: center bottom; opacity: .82; }.a-hero::after { background: linear-gradient(180deg, #0d0d0e 0%, #0d0d0e 46%, rgba(13,13,14,.7) 66%, rgba(13,13,14,.1) 80%, #0d0d0e 100%); } }

/* A-side / logo as a quiet atmospheric layer, fully visible rather than poster-cropped. */
.a-hero { background: #08090a; }
.a-hero::before {
  background: transparent url("./assets/band-avatar.png") right 5vw center / auto min(82%, 680px) no-repeat;
  opacity: .42;
  mix-blend-mode: screen;
}
.a-hero::after {
  background:
    linear-gradient(90deg, #08090a 0%, rgba(8,9,10,.98) 30%, rgba(8,9,10,.78) 51%, rgba(8,9,10,.26) 76%),
    radial-gradient(circle at 76% 48%, rgba(23,154,203,.1), transparent 34%),
    linear-gradient(0deg, rgba(8,9,10,.72), transparent 42%);
}
.side-a .section-label { color: var(--blue); }
.side-a .crew-grid span, .side-a .album-card span { color: var(--yellow); }
.side-a .album-card { border-color: rgba(223,231,61,.82); }
.plain-link { color: var(--paper); text-decoration: none; }
.netease-link:hover, .netease-link:focus-visible { color: var(--yellow); }
.section-head h2 small { display: block; margin-top: 13px; color: var(--blue); font: 10px var(--mono); letter-spacing: .13em; }
.contact-list a { width: 100%; display: grid; grid-template-columns: .7fr 1fr auto; align-items: center; gap: 14px; min-height: 82px; padding: 0; border-bottom: 1px solid var(--line); color: inherit; text-align: left; text-decoration: none; }
.contact-list a:hover, .contact-list a:focus-visible { color: var(--yellow); }
@media (max-width: 800px) {
  .a-hero::before { background-size: auto 42%; background-position: center bottom 6%; opacity: .34; }
  .a-hero::after { background: linear-gradient(180deg, #08090a 0%, #08090a 48%, rgba(8,9,10,.8) 70%, rgba(8,9,10,.3) 86%, #08090a 100%); }
  .section-head h2 small { margin-top: 9px; }
  .contact-list a { grid-template-columns: 1fr auto; padding: 15px 0; }
  .contact-list a span { grid-column: 1 / -1; }
}

/* A-side fixed background: the supplied artwork stays whole while the page scrolls above it. */
.side-a { position: relative; isolation: isolate; background: #08090a; }
.side-a::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 70px 0 0;
  pointer-events: none;
  background: #08090a url("./assets/a-astronaut-background.png") center center / contain no-repeat;
  opacity: .58;
  animation: a-background-float 18s ease-in-out infinite alternate;
  will-change: transform;
}
.side-a::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 70px 0 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 32% at 74% 92%, rgba(102, 56, 159, .26), transparent 72%),
    radial-gradient(ellipse 38% 24% at 68% 82%, rgba(23, 154, 203, .13), transparent 72%);
}
.side-a > * { position: relative; z-index: 1; }
.side-a .a-hero { background: transparent; border-bottom-color: transparent; }
.side-a .a-hero::before, .side-a .a-hero::after { display: none; }
.side-a .ruled-section { background: rgba(8,9,10,.54); }
.side-a .band-intro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(38, 25, 57, .72) 0%, rgba(13, 12, 19, .68) 30%, rgba(8,9,10,.62) 72%);
}
.side-a .band-intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1px;
  right: 0;
  left: 0;
  height: clamp(150px, 23vw, 280px);
  background:
    radial-gradient(ellipse 65% 100% at 76% -22%, rgba(135, 77, 191, .52), transparent 74%),
    radial-gradient(ellipse 48% 72% at 52% 0%, rgba(23, 154, 203, .2), transparent 76%);
  filter: blur(2px);
}
.side-a .band-intro > * { position: relative; z-index: 1; }
@keyframes a-background-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-7px, -10px, 0) scale(1.012); }
}
@media (max-width: 800px) {
  .side-a::before { inset: 62px 0 0; background-position: center bottom 8%; opacity: .44; }
  .side-a::after { inset: 62px 0 0; background: radial-gradient(ellipse 110% 28% at 55% 91%, rgba(102, 56, 159, .3), transparent 74%), radial-gradient(ellipse 70% 22% at 60% 80%, rgba(23, 154, 203, .14), transparent 76%); }
  .side-a .band-intro { background: linear-gradient(180deg, rgba(42, 27, 62, .78) 0%, rgba(13, 12, 20, .7) 24%, rgba(8,9,10,.62) 72%); }
  .side-a .band-intro::before { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .side-a::before { animation: none; }
}

/* The fixed A-side artwork is now a silent, self-looping floating background video. */
.side-a::before { display: none; }
.side-a > .a-background-video {
  position: fixed;
  z-index: 0;
  inset: 70px 0 0;
  width: 100%;
  height: calc(100vh - 70px);
  display: block;
  margin: 0;
  background: #08090a;
  object-fit: cover;
  object-position: center 25%;
  opacity: .58;
  pointer-events: none;
  transform: translate3d(0, var(--space-float-y, 0px), 0);
  will-change: transform;
}
@media (max-width: 800px) {
  .side-a > .a-background-video {
    inset: 62px 0 0;
    height: calc(100vh - 62px);
    object-position: center bottom 8%;
    opacity: .5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .side-a > .a-background-video { display: none; }
  .side-a::before { display: block; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .side-a::before {
    background-image: url("./assets/a-astronaut-mobile.png");
    background-position: center center;
    background-size: contain;
  }
}

/* Signal-archive pass: one dark system across A and B, calibrated to the album universe. */
:root {
  --ink: #0a0a0f;
  --paper: #e9e7dc;
  --paper-dim: #aaa9a3;
  --yellow: #39ff14;
  --blue: #25aee4;
  --red: #8b3a3a;
  --red-dark: #683034;
  --line: rgba(233, 231, 220, .18);
}
body { background: var(--ink); }
body::before {
  content: "";
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}
.topbar { background: rgba(10, 10, 15, .92); backdrop-filter: blur(10px); }
.topbar nav button:hover, .topbar nav button:focus-visible { color: var(--yellow); }
.system-feed { display: grid; gap: 5px; max-width: 490px; margin-bottom: 28px; color: var(--yellow); font: 10px/1.5 var(--mono); letter-spacing: .04em; }
.system-feed p { margin: 0; overflow: hidden; white-space: nowrap; animation: system-type .85s steps(28, end) both; }
.system-feed p:last-child { animation-delay: .6s; }
.hero-copy h1 { display: grid; gap: 14px; }
.hero-copy h1 small { color: var(--yellow); font: 12px var(--mono); letter-spacing: .24em; }
.hero-line { max-width: 420px; font-size: clamp(18px, 1.8vw, 25px); line-height: 1.55; }
.hero-actions, .music-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.signal-button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--yellow);
  color: var(--ink);
  background: var(--yellow);
  font: 11px var(--mono);
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.signal-button:hover, .signal-button:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--blue); }
.signal-button:active { transform: translate(0, 0); box-shadow: none; }
.signal-button--quiet { color: var(--paper); background: rgba(10,10,15,.68); }
.music-actions { margin-top: 20px; }
.contact-whisper { grid-column: 2; min-height: 1.5em; margin: 22px 0 0; padding-left: 14px; overflow: hidden; color: var(--yellow); border-left: 1px solid rgba(57,255,20,.48); font: 10px/1.5 var(--mono); letter-spacing: .04em; }
.contact-typewriter::after { content: "▍"; display: inline-block; margin-left: 5px; color: var(--yellow); animation: terminal-caret .82s steps(1, end) infinite; }
.contact-typewriter.done::after { animation: none; opacity: 0; }
.side-b { --archive-line: rgba(233,231,220,.2); color: var(--paper); background: #0a0a0f; }
.side-b::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 70px 0 0;
  opacity: .28;
  background-color: #0a0a0f;
  background-image: linear-gradient(rgba(57,255,20,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.13) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.side-b .ruled-section, .concept-lead, .world-section, .track-section, .dossier { background: rgba(10,10,15,.84); border-color: var(--archive-line); }
.side-b .section-label { color: var(--yellow); }
.b-hero { background: rgba(10,10,15,.9); color: var(--paper); border-color: var(--archive-line); }
.b-hero::before { border-left-color: var(--red); background: repeating-linear-gradient(135deg, transparent 0 24px, rgba(57,255,20,.34) 25px 27px); }
.b-hero-meta { border-color: var(--archive-line); color: var(--yellow); }
.b-hero h1 { font-size: clamp(72px, 10vw, 168px); }
.b-hero h1 small { display: block; margin-top: 18px; color: var(--yellow); font: 11px var(--mono); letter-spacing: .16em; }
.b-hero > p { background: transparent; border-color: var(--yellow); color: var(--paper-dim); }
.b-grid { border-color: var(--yellow); box-shadow: 12px 12px 0 var(--red); }
.world-grid { border-color: var(--archive-line); }
.world-grid article, .world-grid article:nth-child(2), .world-grid article:nth-child(3) { color: var(--paper); background: rgba(10,10,15,.58); border-color: var(--archive-line); }
.world-grid article:nth-child(2) { background: rgba(57,255,20,.11); }
.world-grid article:nth-child(3) { background: rgba(139,58,58,.24); }
.world-grid article span, .world-grid article:nth-child(3) span { color: var(--yellow); }
.world-grid article p { color: var(--paper-dim); }
.concept-layout h2 { border-color: var(--yellow); }
.concept-layout p { color: var(--paper-dim); }
.track-list { border-color: var(--archive-line); }
.track-list details { border-color: var(--archive-line); }
.track-list details[open] {
  background: linear-gradient(90deg, rgba(139,58,58,.9) 0 4px, rgba(18,20,25,.92) 4px, rgba(10,10,15,.94) 100%);
  box-shadow: inset 0 1px 0 rgba(233,231,220,.12), inset 0 -1px 0 rgba(233,231,220,.12);
}
.track-list details[open] p { color: var(--paper); }
.track-list details[open] summary b { color: #d4877f; }
.track-list details[open] summary span { color: var(--blue); }
.story-open {
  margin: 0 0 28px 74px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(233,231,220,.44);
  color: var(--paper);
  background: transparent;
  font: 10px var(--mono);
  letter-spacing: .1em;
}
.story-open:hover, .story-open:focus-visible { color: var(--yellow); border-bottom-color: var(--yellow); }
.story-reader {
  margin-top: 42px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--archive-line);
  border-left: 4px solid var(--red);
  background: rgba(10,10,15,.92);
}
.story-reader-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--archive-line); }
.story-reader-head p { margin: 0; color: var(--blue); font: 10px var(--mono); letter-spacing: .14em; }
.story-close { padding: 6px 0; border: 0; color: var(--paper-dim); background: transparent; font: 10px var(--mono); letter-spacing: .08em; }
.story-close:hover, .story-close:focus-visible { color: var(--yellow); }
.story-reader h3 { max-width: 14ch; margin: 34px 0 28px; color: var(--paper); font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.04em; }
.story-reader-body { max-width: 760px; color: var(--paper-dim); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.92; }
.story-reader-body p { margin: 0 0 1.3em; }
.story-reader-body p:first-child { color: var(--paper); }
@media (max-width: 800px) {
  .story-open { margin-left: 48px; margin-bottom: 22px; }
  .story-reader { margin-top: 30px; padding: 26px 20px 34px; }
  .story-reader h3 { margin: 27px 0 22px; font-size: 36px; }
  .story-reader-body { font-size: 16px; line-height: 1.85; }
}
.track-list summary b, .track-list summary span { color: var(--yellow); }
.dossier-list details, .dossier-list details:first-child { border-color: var(--archive-line); }
.dossier-list summary { color: var(--paper); }
.dossier-list p { color: var(--paper-dim); }
.b-exit { background: rgba(10,10,15,.9); border-top-color: var(--red); }
footer { position: relative; z-index: 1; border-top: 1px solid var(--line); background: #0a0a0f; }

/* Physical archive reader: one warm paper object inside the dark B-side archive. */
.story-reader[hidden] { display: none; }
.story-reader {
  position: relative;
  isolation: isolate;
  min-height: min(720px, 76vw);
  margin-top: clamp(34px, 5vw, 68px);
  padding: clamp(22px, 4vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(55, 42, 27, .72);
  color: #2d241a;
  background-color: #d6c79e;
  background-image:
    linear-gradient(105deg, rgba(92, 57, 31, .12), transparent 22%, transparent 74%, rgba(92, 57, 31, .14)),
    url("./assets/archive-paper-texture.jpg");
  background-position: center;
  background-size: cover;
  box-shadow: 12px 12px 0 rgba(139, 58, 58, .72);
}
.story-reader::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 13px;
  border: 1px solid rgba(63, 47, 30, .4);
  pointer-events: none;
}
.story-reader::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 58px;
  border-left: 1px solid rgba(63, 47, 30, .38);
  border-bottom: 1px solid rgba(63, 47, 30, .38);
  background: linear-gradient(135deg, rgba(255,255,255,.38) 0 48%, rgba(113, 83, 48, .14) 49% 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}
.story-reader-head {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0 18px;
  border-bottom: 1px solid rgba(63, 47, 30, .42);
}
.story-reader-head p,
.story-reader-head span,
.story-reader-kicker,
.story-reader-controls p {
  margin: 0;
  font: 10px/1.35 var(--mono);
  letter-spacing: .1em;
}
.story-reader-head p { color: #7d312b; }
.story-reader-head span { display: block; margin-top: 5px; color: #665031; }
.story-close {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(63, 47, 30, .56);
  color: #2d241a;
  background: rgba(231, 218, 181, .45);
  font: 10px var(--mono);
  letter-spacing: .08em;
}
.story-close b { font: 700 17px/1 Arial, sans-serif; }
.story-close:hover,
.story-close:focus-visible { color: #7d312b; border-color: #7d312b; background: rgba(250, 242, 213, .74); }
.story-reader-leaf { max-width: 790px; min-height: 400px; padding: clamp(38px, 6vw, 82px) 0 42px; }
.story-reader-kicker { color: #7d312b; }
.story-reader h3 {
  max-width: 15ch;
  margin: 18px 0 30px;
  color: #2d241a;
  font-size: clamp(39px, 5vw, 78px);
  line-height: 1;
  letter-spacing: -.045em;
}
.story-reader-body {
  max-width: 690px;
  color: #382e23;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.95;
}
.story-reader-body p { margin: 0 0 1.25em; }
.story-reader-body p:first-child { color: #2b2218; }
.story-reader-body.is-turning { animation: archive-page-turn .28s cubic-bezier(.16, 1, .3, 1); }
.story-reader-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(63, 47, 30, .42);
}
.story-reader-controls p { color: #665031; text-align: center; white-space: nowrap; }
.story-page-button {
  width: fit-content;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(63, 47, 30, .52);
  color: #2d241a;
  background: rgba(231, 218, 181, .44);
  font: 10px var(--mono);
  letter-spacing: .08em;
}
.story-page-button[data-story-next] { justify-self: end; }
.story-page-button:hover:not(:disabled),
.story-page-button:focus-visible:not(:disabled) { border-color: #7d312b; color: #7d312b; background: rgba(250, 242, 213, .8); }
.story-page-button:active,
.story-close:active { transform: translateY(1px); }
.story-page-button:disabled { cursor: not-allowed; opacity: .4; }

/* The character art is now cut out and treated as an object in the roster, not a poster crop. */
.crew-grid .has-photo { background: linear-gradient(150deg, rgba(139, 58, 58, .24), rgba(8, 9, 10, .36) 52%, rgba(8, 9, 10, .94)); }
.crew-grid .crew-photo {
  inset: 8px 8px 54px;
  width: calc(100% - 16px);
  height: calc(100% - 62px);
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  filter: drop-shadow(0 10px 7px rgba(8, 9, 10, .6));
}
.crew-grid .has-photo::after { background: linear-gradient(180deg, transparent 42%, rgba(8, 9, 10, .18) 57%, rgba(8, 9, 10, .96) 100%); }
.crew-grid .has-photo:hover .crew-photo { transform: translateY(-4px) scale(1.018); }
.crew-grid .crew-role { color: var(--paper-dim); }
.crew-grid .crew-note { margin-top: 5px; color: var(--yellow); font: 10px var(--mono); letter-spacing: .06em; }

@keyframes archive-page-turn {
  from { opacity: .22; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 800px) {
  .story-reader {
    min-height: 610px;
    margin-top: 30px;
    padding: 20px;
    box-shadow: 7px 7px 0 rgba(139, 58, 58, .72);
  }
  .story-reader::before { inset: 8px; }
  .story-reader::after { width: 44px; height: 44px; }
  .story-reader-head { padding: 0 0 14px; gap: 12px; }
  .story-close { padding: 6px 8px; gap: 7px; }
  .story-reader-leaf { min-height: 450px; padding: 42px 8px 28px; }
  .story-reader h3 { margin: 16px 0 24px; font-size: 42px; }
  .story-reader-body { font-size: 16px; line-height: 1.86; }
  .story-reader-controls { gap: 8px; padding: 14px 0 0; }
  .story-page-button { min-height: 36px; padding: 8px; font-size: 9px; }
  .story-reader-controls p { font-size: 9px; }
  .crew-grid .crew-photo { inset: 6px 6px 56px; width: calc(100% - 12px); height: calc(100% - 62px); }
  .crew-grid .crew-note { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-reader-body.is-turning { animation: none; }
}
body.signal-switch::after {
  content: "";
  position: fixed;
  z-index: 40;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 22%, rgba(57,255,20,.22) 22% 31%, transparent 31% 63%, rgba(139,58,58,.24) 63% 70%, transparent 70%);
  mix-blend-mode: screen;
  animation: signal-cut .26s steps(2, end) both;
}
body.signal-glitch .wordmark, body.signal-glitch h1, body.signal-glitch h2 { text-shadow: 2px 0 0 rgba(57,255,20,.55), -2px 0 0 rgba(139,58,58,.5); }
@keyframes system-type { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0); opacity: 1; } }
@keyframes signal-cut { 0% { opacity: 0; transform: translateX(-4%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(4%); } }
@media (max-width: 800px) {
  .system-feed { margin-bottom: 18px; font-size: 8px; }
  .hero-copy h1 { gap: 9px; }
  .hero-actions { gap: 8px; }
  .signal-button { min-height: 39px; padding: 0 11px; font-size: 10px; }
  .contact-whisper { grid-column: auto; }
  .side-b::before { inset: 62px 0 0; background-size: 24px 24px; }
  .b-hero h1 { font-size: clamp(54px, 15vw, 86px); }
  .b-hero h1 small { margin-top: 10px; }
  .b-hero > p { font-size: 15px; line-height: 1.62; }
}
@media (prefers-reduced-motion: reduce) {
  .system-feed p, body.signal-switch::after { animation: none; }
}

/* The B-side entry becomes a physical cassette rather than a generic information card. */
.album-card {
  min-height: 284px;
  overflow: hidden;
  padding: 25px 28px 115px;
  border: 1px solid var(--yellow);
  background: linear-gradient(135deg, rgba(28,29,30,.98), rgba(11,12,14,.98));
  box-shadow: none;
}
.album-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 8%;
  bottom: 17px;
  left: 8%;
  height: 84px;
  border: 1px solid rgba(233,231,220,.58);
  background:
    radial-gradient(circle at 27% 53%, var(--ink) 0 8px, var(--paper) 9px 13px, var(--ink) 14px 21px, transparent 22px),
    radial-gradient(circle at 73% 53%, var(--ink) 0 8px, var(--paper) 9px 13px, var(--ink) 14px 21px, transparent 22px),
    linear-gradient(90deg, transparent 0 18%, rgba(57,255,20,.8) 18% 19%, transparent 19% 81%, rgba(57,255,20,.8) 81% 82%, transparent 82%),
    linear-gradient(180deg, #303235 0 29%, #d8d5c8 29% 72%, #303235 72% 100%);
  clip-path: polygon(8% 0, 92% 0, 100% 21%, 100% 100%, 0 100%, 0 21%);
}
.album-card::after {
  content: "25 / B SIDE / 01";
  position: absolute;
  z-index: 1;
  right: 20%;
  bottom: 50px;
  left: 20%;
  color: var(--ink);
  font: 900 10px/1 var(--mono);
  letter-spacing: .16em;
  text-align: center;
}
.album-card > * { position: relative; z-index: 2; }
.album-card strong { max-width: 70%; }
.album-card em { max-width: 75%; }
.album-card i { right: 24px; bottom: 42px; z-index: 3; color: var(--yellow); }
.album-card:hover { transform: translate(-3px,-3px) rotate(-.35deg); box-shadow: 6px 6px 0 rgba(57,255,20,.6); }
@media (max-width: 800px) {
  .album-card { min-height: 265px; padding: 22px 22px 106px; }
  .album-card::before { right: 7%; left: 7%; height: 74px; }
  .album-card::after { right: 19%; bottom: 46px; left: 19%; font-size: 8px; }
  .album-card i { right: 20px; bottom: 36px; }
}

/* System text gets a paced terminal rhythm; album copy is treated as a small editorial composition. */
.system-feed { gap: 10px; margin-bottom: 30px; }
.system-feed p { min-height: 1.5em; padding-left: 14px; border-left: 1px solid rgba(57,255,20,.48); animation: none; }
.typewriter-line::after { content: "▍"; display: inline-block; margin-left: 5px; color: var(--yellow); animation: terminal-caret .82s steps(1, end) infinite; }
.typewriter-line.done::after { animation: none; opacity: 0; }
.album-note { display: grid; align-content: start; gap: 32px; max-width: 540px; }
.album-concept { display: grid; gap: 10px; margin: 0; }
.album-concept span { width: fit-content; padding: 5px 8px; color: var(--yellow); border: 1px solid rgba(57,255,20,.54); font: 11px var(--mono); letter-spacing: .06em; }
.album-concept strong { color: var(--paper); font-size: clamp(27px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -.045em; }
.album-facts { display: grid; gap: 9px; }
.album-facts span { display: flex; align-items: baseline; gap: 11px; padding-bottom: 8px; border-bottom: 1px solid rgba(233,231,220,.18); color: var(--paper-dim); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.35; }
.album-facts b { min-width: 42px; color: var(--blue); font: 900 14px var(--mono); letter-spacing: .04em; }
.album-facts span:nth-child(2) b { color: var(--red); }
.album-facts span:nth-child(3) b { color: var(--yellow); }
.contact-list { --contact-label: minmax(150px, .7fr); }
.contact-list a, .contact-list button { grid-template-columns: var(--contact-label) minmax(0, 1fr) auto; }
.contact-list strong { display: block; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; letter-spacing: .07em; line-height: 1.12; text-align: left; transform: translateY(1px); }
@keyframes terminal-caret { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@media (max-width: 800px) {
  .system-feed { gap: 7px; margin-bottom: 22px; }
  .system-feed p { padding-left: 10px; }
  .album-note { gap: 24px; }
  .album-concept strong { font-size: clamp(25px, 8vw, 34px); }
  .album-facts span { font-size: 16px; }
  .contact-list a, .contact-list button { grid-template-columns: 1fr auto; }
  .contact-list strong { letter-spacing: .04em; transform: none; }
}

/* Contact values share one precise desktop baseline; mobile keeps its compact two-column layout. */
@media (min-width: 801px) {
  .contact-list a, .contact-list button {
    grid-template-columns: minmax(210px, 34%) minmax(0, 1fr) max-content;
  }
  .contact-list strong {
    width: 100%;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 800px) {
  .crew .section-head h2 { display: none; }
  .crew .section-head .section-label { margin-bottom: 0; }
  .crew-grid { margin-top: 30px; }
}

/* A-side continuity: the same pop-art space remains behind the hero and profile. */
.side-a .ruled-section { background: rgba(8, 9, 10, .46); }
.side-a .band-intro {
  background: linear-gradient(
    180deg,
    rgba(8, 9, 10, 0) 0%,
    rgba(8, 9, 10, .12) 16%,
    rgba(8, 9, 10, .34) 42%,
    rgba(8, 9, 10, .54) 100%
  );
}
.side-a .band-intro::before { display: none; }
.side-a .music-section {
  background: linear-gradient(
    180deg,
    rgba(8, 9, 10, .54) 0%,
    rgba(8, 9, 10, .48) 30%,
    rgba(8, 9, 10, .46) 100%
  );
}

/* Always paint a lightweight still first. The video only fades in after it can render. */
.side-a::before {
  display: block;
  background: #08090a url("./assets/a-astronaut-background.png") center 25% / cover no-repeat;
  opacity: .58;
  animation: none;
  transition: opacity .18s linear;
}
.side-a.background-video-ready::before { opacity: 0; }
.side-a > .a-background-video {
  opacity: 0;
  transition: opacity .45s ease;
}
.side-a > .a-background-video.is-ready { opacity: .58; }
@media (max-width: 800px) {
  .side-a::before {
    background-image: url("./assets/a-astronaut-mobile-poster.jpg");
    background-position: center center;
    background-size: cover;
    opacity: .5;
  }
  .side-a > .a-background-video.is-ready { opacity: .5; }
  .side-a .band-intro {
    background: linear-gradient(
      180deg,
      rgba(8, 9, 10, 0) 0%,
      rgba(8, 9, 10, .1) 16%,
      rgba(8, 9, 10, .3) 42%,
      rgba(8, 9, 10, .52) 100%
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter-line::after { animation: none; }
}

/* Mobile music station: one reading path, then one physical B-side entry. */
@media (max-width: 800px) {
  .music-section {
    position: relative;
    z-index: 1;
    padding: 58px 20px 64px;
    background: linear-gradient(
      180deg,
      rgba(8, 9, 10, .52) 0%,
      rgba(8, 9, 10, .56) 32%,
      rgba(8, 9, 10, .62) 100%
    );
  }
  .music-section .section-head { display: block; }
  .music-section .section-label { margin: 0 0 18px; color: var(--blue); }
  .music-section .section-head h2 {
    margin: 0;
    font-size: clamp(50px, 15vw, 66px);
    line-height: .86;
    letter-spacing: -.065em;
  }
  .music-section .section-head h2 small {
    margin-top: 13px;
    color: rgba(37, 174, 228, .82);
    font-size: 9px;
    letter-spacing: .18em;
  }
  .music-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 55px;
  }
  .album-note { gap: 25px; }
  .album-concept { gap: 14px; }
  .album-concept span { padding: 5px 7px; font-size: 10px; }
  .album-concept strong {
    max-width: 8em;
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1.03;
    letter-spacing: -.06em;
  }
  .album-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .album-facts span {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 78px;
    padding: 0 8px 0 0;
    border: 0;
    border-right: 1px solid rgba(233, 231, 220, .18);
    color: var(--paper-dim);
    font-size: 14px;
    line-height: 1.35;
  }
  .album-facts span:last-child { border-right: 0; padding-right: 0; }
  .album-facts b { min-width: 0; font-size: 16px; }
  .album-card {
    min-height: 236px;
    padding: 21px 20px 94px;
    border-color: rgba(57, 255, 20, .74);
  }
  .album-card span { font-size: 10px; }
  .album-card strong { max-width: none; font-size: 38px; letter-spacing: -.055em; }
  .album-card em { max-width: 88%; font-size: 12px; line-height: 1.55; }
  .album-card::before { right: 8%; bottom: 15px; left: 8%; height: 64px; }
  .album-card::after { right: 20%; bottom: 38px; left: 20%; font-size: 7px; }
  .album-card i { right: 16px; bottom: 31px; font-size: 24px; }
  .music-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .music-actions .signal-button { justify-content: center; min-width: 0; padding: 0 8px; }
}