@import "tailwindcss";

:root { --ink:#07101a; --night:#091522; --paper:#e8e7e3; --mist:#9ba8b6; --red:#b9131a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--paper); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
::selection { background:var(--red); color:white; }

.site-header { position:fixed; z-index:40; top:0; left:0; width:100%; height:82px; padding:0 4.5vw; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#06101ae8,transparent); }
.wordmark,.footer-mark { display:flex; align-items:center; gap:10px; font-family:Georgia,"Times New Roman",serif; letter-spacing:.06em; font-size:22px; }
.wordmark i,.footer-mark i,.product h2 i { width:25px; height:1px; background:var(--red); display:inline-block; }
.nav { display:flex; gap:34px; font-family:Arial,sans-serif; font-size:11px; letter-spacing:.24em; }
.nav a { position:relative; padding:12px 0; }
.nav a:after { content:""; position:absolute; bottom:5px; left:0; width:0; height:1px; background:var(--red); transition:.3s; }
.nav a:hover:after,.nav a:focus-visible:after { width:100%; }
.menu-button { display:none; }

.hero { min-height:100svh; position:relative; overflow:hidden; background:#030912; }
.hero > img { width:100%; height:100svh; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,8,15,.12) 55%,var(--ink) 100%); pointer-events:none; }
.scroll-cue { position:absolute; z-index:2; right:3.8vw; bottom:22px; display:flex; flex-direction:column; align-items:center; gap:12px; font:9px Arial,sans-serif; letter-spacing:.24em; color:#c7d0d7; }
.scroll-cue span { writing-mode:vertical-rl; }
.scroll-cue i { height:55px; width:1px; background:linear-gradient(var(--red),transparent); }

.section-shell { max-width:1500px; margin:auto; padding:150px 7vw; display:grid; grid-template-columns:160px 1fr; gap:7vw; }
.section-index { font-family:Arial,sans-serif; padding-top:10px; display:flex; flex-direction:column; gap:11px; color:#778695; }
.section-index span { font-size:10px; letter-spacing:.25em; }
.section-index b { font-size:11px; letter-spacing:.28em; font-weight:400; }
.section-index:after { content:""; display:block; width:52px; height:1px; margin-top:9px; background:var(--red); }
.eyebrow { color:#aab7c4; font:11px Arial,sans-serif; letter-spacing:.24em; text-transform:uppercase; }
.intro { background:radial-gradient(circle at 75% 20%,#142435 0,transparent 34%); }
.intro h1 { margin:28px 0 55px; font-size:clamp(34px,4.1vw,68px); line-height:1.55; font-weight:400; letter-spacing:.06em; }
.intro h1 em { color:#9fb2c5; font-style:normal; }
.part-title { color:#d5d8da; font:11px Arial,sans-serif; letter-spacing:.28em; }
.neglect-title { color:#a7353b; }
.copy-columns { display:grid; grid-template-columns:1fr 1fr; gap:65px; max-width:900px; color:#afbac4; font-size:15px; line-height:2.2; }
.copy-columns b { color:#e1e5e8; font-weight:400; letter-spacing:.08em; }

.part-feature { background:#d9d8d3; color:#111820; }
.part-visual { height:min(78vw,900px); min-height:560px; position:relative; overflow:hidden; }
.part-visual:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#d9d8d3 0,transparent 25%),linear-gradient(90deg,rgba(4,12,20,.12),transparent 40%); }
.part-visual img { width:100%; height:100%; object-fit:cover; filter:saturate(.58) contrast(1.03); }
.vertical-label { position:absolute; z-index:2; left:4vw; top:15%; writing-mode:vertical-rl; color:white; font:9px Arial,sans-serif; letter-spacing:.3em; text-shadow:0 1px 10px #000; }
.part-story { max-width:none; padding-top:100px; }
.light-index { color:#5d6872; }
.part-story-body h2,.neglect-detail h2 { margin:25px 0 45px; font-size:clamp(38px,5vw,72px); line-height:1.5; font-weight:400; }
.part-story-body h2 em { color:#8b1b22; font-style:normal; }
.part-story-body .eyebrow { color:#6f7981; }
.lead-grid { display:grid; grid-template-columns:1fr 1fr; gap:6vw; max-width:1000px; font-size:15px; line-height:2.15; color:#48535c; }
.story-timeline { margin-top:90px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #9ea5aa; border-bottom:1px solid #9ea5aa; }
.story-timeline article { padding:34px 28px 40px 0; border-right:1px solid #afb4b7; }
.story-timeline article + article { padding-left:28px; }
.story-timeline article:last-child { border-right:0; }
.story-timeline span,.chapter-grid span { color:#7d878f; font:9px Arial,sans-serif; letter-spacing:.2em; }
.story-timeline h3,.chapter-grid h3 { margin:17px 0 16px; font-size:23px; font-weight:400; }
.story-timeline p,.chapter-grid p { color:#59636b; font-size:12px; line-height:1.95; }
.story-timeline .timeline-alert { background:#b11c22; color:white; padding-right:25px; }
.story-timeline .timeline-alert span,.story-timeline .timeline-alert p { color:#f2dfe0; }

.ordinary-memory { position:relative; min-height:clamp(600px,78vw,960px); overflow:hidden; background:#d9b185; color:#fff; }
.ordinary-memory > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.ordinary-memory-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(31,18,14,.75) 0%,rgba(31,18,14,.38) 37%,transparent 67%),linear-gradient(0deg,rgba(25,14,12,.45),transparent 42%); }
.ordinary-memory-copy { position:absolute; z-index:2; left:8vw; top:50%; width:min(520px,42vw); transform:translateY(-50%); text-shadow:0 2px 25px rgba(36,17,8,.25); }
.ordinary-memory-copy .eyebrow { color:#f8e7d0; }
.ordinary-memory-copy h2 { margin:25px 0; font-size:clamp(42px,5vw,78px); line-height:1.35; font-weight:400; letter-spacing:.03em; }
.ordinary-memory-copy > p:last-child { width:min(430px,100%); margin:0; font-size:13px; line-height:2.05; color:rgba(255,248,239,.86); }
.ordinary-memory-caption { position:absolute; z-index:2; right:3vw; bottom:4vw; writing-mode:vertical-rl; font-size:8px; letter-spacing:.3em; color:rgba(255,255,255,.72); }
.investigation { min-height:850px; display:grid; grid-template-columns:1.15fr .85fr; background:#e4e2dc; color:#131a22; }
.investigation-image { min-height:760px; }
.investigation-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.45) contrast(1.08); }
.investigation-copy { padding:100px 7vw 80px; align-self:center; }
.investigation-copy .eyebrow { color:#717c85; }
.investigation-copy > h2 { margin:25px 0; font-size:clamp(40px,4.3vw,66px); line-height:1.45; font-weight:400; }
.investigation-copy > p { color:#56616a; font-size:14px; line-height:2; }
.clue-list { list-style:none; padding:0; margin:50px 0 0; border-top:1px solid #aeb3b6; }
.clue-list li { display:grid; grid-template-columns:42px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid #b9bdc0; }
.clue-list li > span { color:#a51c23; font:9px Arial,sans-serif; letter-spacing:.15em; padding-top:4px; }
.clue-list b { font-weight:400; letter-spacing:.08em; }
.clue-list p { color:#69737b; font-size:11px; line-height:1.8; margin:7px 0 0; }

.supporting { padding:140px 7vw 170px; background:#c9c9c5; color:#151c22; }
.supporting-head { max-width:1500px; margin:0 auto 70px; }
.supporting-head .eyebrow { color:#69737b; }
.supporting-head h2 { font-size:clamp(34px,4vw,56px); font-weight:400; margin:18px 0; }
.support-grid { max-width:1500px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.support-grid article { background:#deddd8; min-width:0; }
.support-grid article > img { width:100%; aspect-ratio:1/1; object-fit:cover; object-position:top center; filter:saturate(.5) contrast(1.03); mix-blend-mode:multiply; }
.support-grid article > div { padding:30px; }
.support-grid span { color:#7c858c; font:8px Arial,sans-serif; letter-spacing:.2em; }
.support-grid h3 { margin:12px 0; font-size:26px; font-weight:400; }
.support-grid p { color:#606970; font-size:12px; line-height:1.9; }

.story-panels { display:grid; grid-template-columns:1fr 1fr; min-height:720px; }
.panel { position:relative; overflow:hidden; min-height:720px; }
.panel:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(2,8,14,.94)); }
.panel > img { width:100%; height:100%; object-fit:cover; filter:saturate(.65) brightness(.72); transition:transform 1.2s,filter 1.2s; }
.panel:hover > img { transform:scale(1.025); filter:saturate(.85) brightness(.8); }
.panel > div { position:absolute; z-index:2; left:8%; right:8%; bottom:8%; }
.panel span { color:#8394a5; font:10px Arial,sans-serif; letter-spacing:.22em; }
.panel h2 { font-size:clamp(30px,3vw,52px); line-height:1.45; font-weight:400; margin:18px 0; }
.panel p { color:#a9b6c2; max-width:480px; line-height:1.9; font-size:14px; }
.panel-mission:before { content:""; position:absolute; z-index:2; height:1px; width:35%; right:0; top:21%; background:var(--red); }

.characters { padding-top:190px; padding-bottom:190px; background:linear-gradient(135deg,#e8e6e1 0%,#c5c8cb 100%); color:#121820; max-width:none; }
.characters .section-index { color:#56616c; }
.character-sections { display:flex; flex-direction:column; gap:180px; max-width:1160px; }
.part-heading { margin-bottom:55px; padding-bottom:28px; border-bottom:1px solid #adb2b6; }
.part-heading > span { color:#717a83; font:10px Arial,sans-serif; letter-spacing:.28em; }
.part-heading h2 { margin:5px 0 8px; font:clamp(50px,7vw,95px) Georgia,serif; font-weight:400; letter-spacing:.02em; }
.part-heading p { color:#5d6670; font-size:13px; letter-spacing:.06em; }
.neglect-part .part-heading { border-color:#4d5963; }
.neglect-part .part-heading h2 { color:#d4dae0; }
.neglect-part .part-heading p { color:#8f9daa; }
.character-grid { display:grid; grid-template-columns:1fr 1fr; gap:5vw; max-width:1160px; }
.character-card { min-width:0; }
.character-photo { position:relative; aspect-ratio:4/5; overflow:hidden; background:#a7adb2; }
.character-photo:after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 80px rgba(6,12,19,.25); }
.character-photo img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.55) contrast(1.05); mix-blend-mode:multiply; }
.ghost-name { position:absolute; left:-3px; bottom:-25px; color:rgba(255,255,255,.35); font:clamp(52px,7vw,110px) Georgia,serif; letter-spacing:.03em; white-space:nowrap; }
.character-copy { padding:34px 4px 0; }
.role { font:10px Arial,sans-serif; letter-spacing:.22em; color:#6b747d; }
.character-copy h2 { margin:16px 0 3px; font-size:38px; font-weight:400; letter-spacing:.1em; }
.kana { color:#6b747d; font-size:11px; letter-spacing:.25em; margin:0 0 20px; }
.character-copy > p:last-child { max-width:480px; color:#4d565f; font-size:14px; line-height:2; }
.shiori-card { margin-top:120px; }
.neglect-part { margin:0 -7vw -190px; padding:150px 7vw 190px; background:#0b151f; color:#d9dde1; }
.neglect-part .character-photo { background:#e8e8e6; }
.neglect-part .character-photo img { filter:none; mix-blend-mode:normal; }
.neglect-part .character-copy > p:last-child { color:#9eabb6; }
.neglect-part .role,.neglect-part .kana { color:#738391; }
.victor-card { grid-column:1/-1; display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:34px; width:min(100%,760px); margin:50px auto 0; padding:26px; border:1px solid #384753; background:#101c27; }
.victor-card .character-photo { aspect-ratio:1; }
.victor-card .character-photo img { object-position:center 18%; }
.victor-card .character-copy { padding:0; }
.victor-card .character-copy h2 { margin-top:10px; font-size:27px; }
.victor-card .character-copy > p:last-child { max-width:520px; margin-bottom:0; font-size:12px; line-height:1.85; }
.victor-card .ghost-name { bottom:-9px; font-size:34px; }
.dual-face img { position:absolute; inset:0; }
.dual-face .killer-face { opacity:0; transition:opacity .55s ease; }
.dual-face:hover .killer-face { opacity:1; }
.dual-face:after { content:"SCHOOL / MISSION"; position:absolute; z-index:3; right:16px; top:16px; padding:8px 10px; border:1px solid rgba(255,255,255,.35); color:#e9eef2; font:8px Arial,sans-serif; letter-spacing:.16em; }

.decade-link { min-height:1000px; position:relative; display:flex; align-items:flex-end; overflow:hidden; }
.decade-link > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.decade-overlay { position:absolute; inset:0; background:linear-gradient(0deg,#060d14 0,rgba(6,13,20,.82) 28%,transparent 70%),linear-gradient(90deg,rgba(2,8,14,.45),transparent 65%); }
.decade-copy { position:relative; z-index:2; width:min(850px,84vw); padding:0 8vw 100px; }
.year-bridge { display:flex; align-items:center; gap:20px; margin-bottom:30px; color:#dbe1e6; font:clamp(34px,5vw,66px) Georgia,serif; }
.year-bridge i { width:90px; height:1px; background:var(--red); position:relative; }
.year-bridge i:after { content:""; position:absolute; right:0; top:-3px; border-left:7px solid var(--red); border-top:3px solid transparent; border-bottom:3px solid transparent; }
.decade-copy h2 { margin:22px 0 28px; font-size:clamp(37px,5vw,68px); line-height:1.5; font-weight:400; }
.decade-copy > p:last-child { max-width:710px; color:#b4bec7; font-size:14px; line-height:2.1; }

.neglect-world { background:#060d14; }
.ruins-hero { min-height:1000px; position:relative; display:flex; align-items:flex-end; overflow:hidden; }
.ruins-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.5) brightness(.64) contrast(1.12); }
.ruins-overlay { position:absolute; inset:0; background:linear-gradient(0deg,#060d14 0,rgba(6,13,20,.82) 30%,transparent 72%),linear-gradient(90deg,rgba(3,7,12,.66),transparent 72%); }
.ruins-copy { position:relative; z-index:2; max-width:900px; padding:0 8vw 130px; }
.ruins-copy > span { color:#a8b5c0; font:9px Arial,sans-serif; letter-spacing:.28em; }
.ruins-copy h2 { margin:28px 0; font-size:clamp(43px,6vw,82px); line-height:1.45; font-weight:400; }
.ruins-copy h2 em { color:#a61c23; font-style:normal; }
.ruins-copy p { color:#aeb9c3; max-width:720px; font-size:15px; line-height:2.15; }
.neglect-detail { max-width:1500px; padding-top:170px; padding-bottom:180px; }
.neglect-detail > div:last-child > h2 { margin-top:25px; }
.dark-lead { color:#a1afbb; }
.chapter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:90px; background:#26333e; border:1px solid #26333e; }
.chapter-grid article { padding:38px 34px 42px; background:#0b151f; min-height:280px; }
.chapter-grid article:hover { background:#101e2a; }
.chapter-grid span { color:#9c343a; }
.chapter-grid h3 { color:#e0e5e9; }
.chapter-grid p { color:#8e9daa; }

.escape-sequence { min-height:800px; display:grid; grid-template-columns:1.25fr .75fr; background:#0d1822; }
.escape-sequence > img { width:100%; height:100%; min-height:800px; object-fit:cover; filter:saturate(.52) brightness(.72); }
.escape-copy { align-self:center; padding:80px 6vw; }
.escape-copy h2 { margin:23px 0 30px; font-size:clamp(34px,4vw,58px); line-height:1.5; font-weight:400; }
.escape-copy > p:last-child { color:#93a1ad; font-size:14px; line-height:2.05; }

.factions { max-width:1500px; padding-top:170px; padding-bottom:190px; }
.factions h2 { margin:25px 0 70px; font-size:clamp(38px,4.5vw,65px); font-weight:400; }
.faction-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#2b3741; border:1px solid #2b3741; }
.faction-grid article { min-height:300px; padding:38px; background:#0b151f; }
.faction-grid article > span { color:#a81d24; font:9px Arial,sans-serif; }
.faction-grid h3 { margin:25px 0 18px; font:32px Georgia,serif; letter-spacing:.04em; }
.faction-grid p { color:#93a1ac; font-size:13px; line-height:2; }
.faction-grid small { display:block; margin-top:30px; color:#64727e; font:8px Arial,sans-serif; letter-spacing:.18em; }

.world-figure { min-height:900px; position:relative; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; }
.world-figure > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.55) brightness(.56); }
.world-figure:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 20%,rgba(4,10,16,.85) 75%); }
.world-figure > div { position:relative; z-index:2; width:min(650px,82vw); margin-right:8vw; }
.world-figure h2 { font-size:clamp(36px,5vw,68px); line-height:1.4; font-weight:400; }
.world-figure h2 strong { display:block; color:#b31c23; font:clamp(70px,10vw,140px) Arial,sans-serif; letter-spacing:-.05em; }
.world-figure div > p:last-child { color:#a4b0bb; font-size:14px; line-height:2; }

.neglect-supporting { background:#111b24; color:#e2e6e9; }
.neglect-supporting .supporting-head .eyebrow { color:#8795a1; }
.dark-support-grid article { background:#19242e; }
.dark-support-grid article > img { mix-blend-mode:screen; filter:saturate(.42) contrast(1.08) brightness(.84); }
.dark-support-grid p { color:#99a6b1; }
.dark-support-grid span { color:#74828d; }

.promise-ending { min-height:900px; position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; text-align:center; }
.promise-ending > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.58) brightness(.65); }
.promise-ending:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#07101a 0,rgba(7,16,26,.75) 35%,transparent 80%); }
.promise-ending-copy { position:relative; z-index:2; max-width:760px; padding:0 6vw 110px; }
.promise-ending-copy > span { font:9px Arial,sans-serif; letter-spacing:.25em; color:#a4b1bb; }
.promise-ending-copy h2 { margin:22px 0; font-size:clamp(38px,5vw,66px); font-weight:400; }
.promise-ending-copy p { color:#b4bec7; font-size:14px; line-height:2; }

.theme-song { min-height:860px; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6vw; padding:120px 9vw; background:radial-gradient(circle at 22% 45%,#203447 0,transparent 30%),linear-gradient(135deg,#0b1722,#04090f 72%); }
.theme-song:before { content:""; position:absolute; left:0; right:0; top:18%; height:1px; background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:.6; }
.music-disc { position:relative; z-index:2; justify-self:center; width:min(38vw,510px); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle,#0b1117 0 3px,#111a22 4px 6px); box-shadow:0 25px 80px rgba(0,0,0,.55),inset 0 0 0 1px #34434f; animation:disc-spin 28s linear infinite; }
.music-disc:before { content:""; position:absolute; inset:36%; border-radius:50%; background:#a51b22; box-shadow:0 0 0 18px #d7d5ce,0 0 0 20px #5b2024; }
.music-disc:after { content:""; position:absolute; inset:48%; border-radius:50%; background:#07101a; }
.music-disc i { position:absolute; width:44%; height:1px; left:6%; top:50%; background:linear-gradient(90deg,transparent,#61727f); }
.music-disc span { position:absolute; left:50%; top:27%; transform:translateX(-50%); color:#75838e; font:7px Arial,sans-serif; letter-spacing:.16em; white-space:nowrap; }
.music-copy { position:relative; z-index:2; max-width:600px; }
.music-number { display:block; margin:30px 0 15px; color:#6d7c88; font:9px Arial,sans-serif; letter-spacing:.22em; }
.music-copy h2 { margin:0; font-size:clamp(48px,6vw,88px); font-weight:400; letter-spacing:.04em; line-height:1.25; white-space:nowrap; }
.music-feat { margin:5px 0 55px; color:#b5c0c8; font-size:18px; letter-spacing:.1em; }
.music-copy dl { width:min(430px,100%); margin:0; border-top:1px solid #34424d; }
.music-copy dl div { display:grid; grid-template-columns:100px 1fr; padding:17px 0; border-bottom:1px solid #2b3944; }
.music-copy dt { color:#72818c; font-size:12px; }
.music-copy dd { margin:0; color:#d4d9dd; font-size:15px; letter-spacing:.08em; }
.music-note { margin-top:38px; color:#586773; font:8px Arial,sans-serif; letter-spacing:.2em; }
.music-title-back { position:absolute; z-index:1; right:-25px; bottom:-45px; color:rgba(255,255,255,.025); font:clamp(90px,16vw,260px) Arial,sans-serif; font-weight:700; letter-spacing:-.07em; }
@keyframes disc-spin { to { transform:rotate(360deg); } }

.world { min-height:900px; position:relative; display:grid; align-items:center; overflow:hidden; }
.world > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.65) brightness(.52); }
.world-overlay { position:absolute; inset:0; background:linear-gradient(90deg,#07111bed 0%,#07111bad 42%,transparent 88%),linear-gradient(0deg,#07101a 0,transparent 20%,transparent 80%,#07101a); }
.world-content { z-index:2; width:min(700px,80vw); margin-left:14vw; }
.world-number { display:block; color:var(--red); font:10px Arial,sans-serif; letter-spacing:.25em; margin-bottom:50px; }
.world-content h2 { font-size:clamp(31px,3.6vw,56px); font-weight:400; line-height:1.6; margin:25px 0 35px; }
.world-content > p:not(.eyebrow) { color:#b1bec9; max-width:610px; font-size:15px; line-height:2.15; }
.world-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top:36px; }
.world-tags span { border:1px solid #657482; padding:10px 15px; font:9px Arial,sans-serif; letter-spacing:.18em; color:#aebbc7; }

.product { min-height:780px; align-items:start; background:radial-gradient(circle at 80% 30%,#172839,transparent 35%); }
.product-body { max-width:760px; }
.product h2 { display:flex; align-items:center; gap:18px; margin:24px 0 70px; font:clamp(42px,6vw,92px) Georgia,serif; letter-spacing:.03em; font-weight:400; }
.product dl { border-top:1px solid #2b3946; }
.product dl div { display:grid; grid-template-columns:150px 1fr; gap:30px; padding:20px 0; border-bottom:1px solid #24323e; }
.product dt { color:#71808e; font-size:12px; }
.product dd { margin:0; color:#bdc7d0; font-size:14px; }

footer { padding:90px 7vw 45px; text-align:center; border-top:1px solid #24313c; background:#040a11; }
.footer-mark { justify-content:center; font-size:32px; }
footer > p { color:#8897a5; margin:28px 0 70px; font-size:13px; letter-spacing:.12em; }
footer small { color:#505e6a; font:9px Arial,sans-serif; letter-spacing:.14em; }

@media (max-width:900px) {
  .site-header { height:66px; padding:0 20px; }
  .wordmark { font-size:17px; }
  .menu-button { display:flex; position:relative; z-index:42; width:42px; height:42px; border:0; background:transparent; flex-direction:column; justify-content:center; gap:7px; align-items:flex-end; }
  .menu-button span { width:26px; height:1px; background:white; }
  .menu-button span:last-child { width:17px; }
  .nav { position:fixed; inset:0; background:#06101bf2; backdrop-filter:blur(14px); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:34px; opacity:0; visibility:hidden; transition:.25s; font-size:13px; }
  .nav.open { opacity:1; visibility:visible; }
  .hero > img { object-position:62% center; }
  .section-shell { padding:100px 7vw; grid-template-columns:1fr; gap:45px; }
  .section-index { flex-direction:row; align-items:center; }
  .section-index:after { margin:0 0 0 8px; }
  .intro h1 { line-height:1.5; margin-bottom:38px; }
  .copy-columns { grid-template-columns:1fr; gap:12px; }
  .lead-grid { grid-template-columns:1fr; gap:15px; }
  .story-timeline { grid-template-columns:1fr 1fr; }
  .story-timeline article:nth-child(2) { border-right:0; }
  .story-timeline article:nth-child(n+3) { border-top:1px solid #afb4b7; }
  .investigation,.escape-sequence { grid-template-columns:1fr; }
  .ordinary-memory { min-height:0; background:#efe4d5; color:#2b1d18; }
  .ordinary-memory > img { position:relative; display:block; width:100%; height:auto; object-fit:contain; object-position:center; }
  .ordinary-memory-shade { display:none; }
  .ordinary-memory-copy { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; padding:42px 7vw 55px; transform:none; text-shadow:none; }
  .ordinary-memory-copy .eyebrow { color:#8b674d; }
  .ordinary-memory-copy h2 { color:#2b1d18; }
  .ordinary-memory-copy > p:last-child { color:#6d584b; }
  .ordinary-memory-caption { display:none; }
  .investigation-image { min-height:550px; }
  .support-grid { grid-template-columns:1fr; max-width:560px; }
  .support-grid article { display:grid; grid-template-columns:160px 1fr; }
  .support-grid article > img { height:100%; aspect-ratio:auto; }
  .story-panels { grid-template-columns:1fr; }
  .panel { min-height:650px; }
  .character-grid { grid-template-columns:1fr; max-width:560px; }
  .victor-card { grid-column:auto; grid-template-columns:110px minmax(0,1fr); gap:20px; margin-top:20px; padding:18px; }
  .victor-card .character-copy { padding:0; }
  .victor-card .character-copy h2 { font-size:22px; letter-spacing:.04em; }
  .victor-card .character-copy > p:last-child { font-size:11px; line-height:1.7; }
  .character-sections { gap:110px; }
  .neglect-part { margin-left:-7vw; margin-right:-7vw; padding-left:7vw; padding-right:7vw; }
  .decade-link { min-height:820px; }
  .shiori-card { margin-top:45px; }
  .world-content { margin:0 8vw; width:auto; }
  .world { min-height:800px; }
  .chapter-grid { grid-template-columns:1fr 1fr; }
  .escape-sequence > img { min-height:580px; }
  .faction-grid { grid-template-columns:1fr; }
  .world-figure { justify-content:flex-start; }
  .world-figure:after { background:linear-gradient(0deg,rgba(4,10,16,.9),transparent 80%); }
  .world-figure > div { margin:250px 8vw 0; }
  .theme-song { grid-template-columns:1fr; text-align:center; }
  .music-disc { width:min(64vw,440px); }
  .music-copy { justify-self:center; }
  .music-copy dl { text-align:left; }
}

@media (max-width:560px) {
  .hero > img { height:100svh; width:100%; object-position:65% center; }
  .hero:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#07101a 0,transparent 42%),linear-gradient(90deg,rgba(3,9,17,.38),transparent); }
  .intro h1 { font-size:30px; }
  .part-visual { min-height:500px; }
  .story-timeline { grid-template-columns:1fr; }
  .story-timeline article,.story-timeline article + article { border-right:0; border-top:1px solid #afb4b7; padding:26px 22px; }
  .investigation-image { min-height:420px; }
  .support-grid article { grid-template-columns:115px 1fr; }
  .support-grid article > div { padding:20px; }
  .ruins-hero { min-height:820px; }
  .decade-link { min-height:700px; }
  .decade-link > img { object-position:58% center; }
  .decade-copy { padding-bottom:60px; }
  .ruins-copy { padding-bottom:80px; }
  .chapter-grid { grid-template-columns:1fr; }
  .chapter-grid article { min-height:auto; }
  .escape-sequence > img { min-height:430px; }
  .faction-grid article { min-height:auto; }
  .world-figure { min-height:750px; }
  .theme-song { padding:90px 7vw; }
  .music-disc { width:76vw; }
  .music-copy h2 { font-size:clamp(36px,12vw,52px); }
  .story-panels .panel { min-height:570px; }
  .panel h2 { font-size:31px; }
  .characters { padding-top:100px; }
  .character-copy h2 { font-size:32px; }
  .world-content h2 { font-size:29px; }
  .product h2 { font-size:42px; gap:10px; flex-wrap:wrap; }
  .product dl div { grid-template-columns:90px 1fr; gap:20px; }
  .footer-mark { font-size:24px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }