:root{color-scheme:dark;--bg:#0d1014;--panel:#151a21;--ink:#e9edf1;--muted:#a1abb5;--lines:#596572;--red:#ba4654;--mono:Consolas,"Liberation Mono",monospace;--sans:"Helvetica Neue",Arial,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}a{color:inherit}button{font:inherit}.sitehead{height:48px;border-bottom:1px solid #242c35;padding:0 4.4vw;display:flex;align-items:center;justify-content:space-between;color:#aab4c0;letter-spacing:.14em;font:10px var(--mono)}.sitehead i{font-style:normal;color:#ce6a73}
.prelude{min-height:63vh;padding:10vh 8vw 8vh;display:flex;flex-direction:column;justify-content:center}.kicker{font:10px var(--mono);letter-spacing:.18em;color:#aeb8c4}.accent-dash{display:inline-block;width:27px;height:2px;background:var(--red);vertical-align:middle;margin-right:11px}.prelude h1{font-size:clamp(44px,6vw,82px);font-weight:350;letter-spacing:-.07em;margin:35px 0 8px;line-height:1.1}.prelude h1 em{font-style:normal;color:#9fa8b2}.prelude p{font-size:15px;line-height:1.7;color:#adb7c1;max-width:560px}.enter{font:10px var(--mono);letter-spacing:.15em;text-decoration:none;margin-top:42px;border-bottom:1px solid #73808d;padding-bottom:14px;align-self:flex-start}.enter span{margin-left:24px;color:var(--red)}
.motion-track{position:relative;height:540vh}.stage{position:sticky;top:0;overflow:hidden;height:100vh;height:100dvh;min-height:620px;background:radial-gradient(ellipse at 45% 47%,#171d25 0%,#0d1014 76%);isolation:isolate}.grid-surface{position:absolute;inset:0;background-image:linear-gradient(#a9bbcc08 1px,transparent 1px),linear-gradient(90deg,#a9bbcc08 1px,transparent 1px);background-size:72px 72px;pointer-events:none}.stage-meta{position:absolute;top:18px;left:4vw;right:4vw;display:flex;justify-content:space-between;color:#9eaaba;font:10px var(--mono);letter-spacing:.14em;z-index:20}.stages-nav{position:absolute;top:51px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:25}.chapter-buttons{display:flex;gap:5px}.stages-nav button{cursor:pointer;height:45px;min-width:46px;padding:5px 10px;background:#131921;color:#e1e7ed;border:1px solid #5a6673;font:10px var(--mono)}.stages-nav button:hover{background:#252932;border-color:#9aabb9}.stages-nav button.active{border-color:#c24b5b;background:#312028}.stages-nav button:disabled{opacity:.3;cursor:default}.stages-nav button:focus-visible{outline:2px solid #f6b0bd;outline-offset:2px}.stages-nav .number{display:block}.stages-nav .label{display:block;font-size:8px;margin-top:3px;color:#b1bbc5}
.stage-heading{position:absolute;top:79%;left:5%;z-index:17;pointer-events:none;transform-origin:top left}.stage-heading>span{font-size:clamp(36px,3.1vw,52px);font-weight:360;letter-spacing:-.075em}.stage-heading small{display:block;font:9px var(--mono);letter-spacing:.15em;color:#b9c5d0;margin-top:11px}
.scene{position:absolute;left:4.5%;right:4.5%;top:20%;height:62%;display:grid;gap:2%;opacity:0;pointer-events:none;visibility:hidden}.scene-identity,.scene-origins{grid-template-columns:minmax(0,2.15fr) minmax(270px,1fr)}.scene-fracture{grid-template-columns:minmax(0,2.15fr) minmax(270px,1fr)}.scene-gameplay{grid-template-columns:minmax(0,1.96fr) minmax(300px,1fr)}
.dossier{height:100%;background:#151a20f5;border:1px solid #7c8792;display:flex;flex-direction:column;min-width:0;padding:20px 22px 16px}.dossier-label{font:10px var(--mono);letter-spacing:.13em;color:#d06a77;border-bottom:1px solid #505b67;padding-bottom:15px}.dossier-main{flex:1;padding-top:10px;display:flex;flex-direction:column;justify-content:center;min-height:0}.dossier-index{font-size:clamp(44px,6vw,95px);font-weight:250;letter-spacing:-.1em;color:#586573;line-height:.96}.dossier h2{font-size:clamp(20px,1.65vw,31px);font-weight:400;line-height:1.13;letter-spacing:-.05em;margin:13px 0 12px}.dossier p{font-size:clamp(11px,.91vw,14px);line-height:1.65;color:#b4bdc8;margin:0 0 14px}.dossier-end{font:9px var(--mono);letter-spacing:.08em;color:#b4bdc8;border-top:2px solid #b74452;padding-top:10px;display:flex;justify-content:space-between}.dossier-item{padding:8px 0;border-top:1px solid #39424c}.dossier-item span{display:block;font:9px var(--mono);color:#ca5c6b;letter-spacing:.08em}.dossier-item b{font-weight:400;font-size:12px;color:#e2e6ea;display:block;margin-top:4px}
.identity-photo{position:relative;height:90%;align-self:center;transform:rotate(-3deg);transform-origin:center center;overflow:visible}.identity-frame{position:absolute;inset:0;overflow:hidden;border:1px solid #8a91af;background:linear-gradient(115deg,#15005a,#230782 50%,#19066a)}.portrait-main,.hood-breakout{position:absolute;width:81%;height:auto;left:13%;top:-36%;max-width:none;user-select:none;pointer-events:none}.hood-breakout{z-index:4}.identity-serial{position:absolute;top:15px;left:16px;background:#111724df;padding:6px 9px;border:1px solid #758292;color:#d2dce5;font:10px var(--mono);letter-spacing:.1em;z-index:5}.identity-copy{align-self:stretch}
.origin-media{display:grid;grid-template-columns:1.6fr .91fr;grid-template-rows:1fr 1fr;gap:16px;height:100%;min-width:0}.origin-panel{margin:0;min-width:0;min-height:0;border:1px solid #a4adb7;background:#080d12;overflow:hidden;display:flex;flex-direction:column}.origin-main{grid-row:1/span 2}.origin-panel img{width:100%;height:0;min-height:0;flex:1;object-fit:cover;object-position:center;display:block}.origin-main img{object-position:center 52%}.origin-character img{object-position:50% 50%}.origin-iteration img{object-position:50% 50%}.origin-panel figcaption{padding:11px 12px;min-height:36px;background:#131923;border-top:1px solid #586573;color:#e0e5ea;font:10px var(--mono);letter-spacing:.055em;white-space:nowrap}.origins-copy .dossier-index{font-size:clamp(42px,4.6vw,76px)}.origins-copy h2{font-size:clamp(18px,1.48vw,27px)}.origins-copy .dossier-main{justify-content:flex-start;padding-top:11px}.origins-copy .dossier-item{padding:8px 0}
.fracture-underlay{grid-column:1;align-self:center;justify-self:stretch;padding:30px 40px;color:#728091;border:1px solid #25303a;height:70%;display:flex;flex-direction:column;justify-content:space-between}.fracture-underlay>span{font:10px var(--mono);letter-spacing:.16em}.fracture-underlay>b{font-size:clamp(23px,2.7vw,46px);line-height:1.15;letter-spacing:-.055em;font-weight:350;color:#6f7884}.fracture-underlay>small{font:9px var(--mono);letter-spacing:.16em}.fracture-note{height:auto;align-self:end;padding:18px 20px;background:#141921;border:1px solid #66727f}.fracture-note span{color:#d06472;font:10px var(--mono);letter-spacing:.11em}.fracture-note p{margin:15px 0 0;font-size:17px;line-height:1.4;color:#e4e8eb}
.gameplay-media{position:relative;min-width:0;height:100%;background:#080d14;overflow:hidden;border:1px solid #a3aeba;box-shadow:0 20px 45px #0006}.gameplay-media video{display:block;width:100%;height:100%;object-fit:cover}.media-label{position:absolute;top:16px;left:15px;padding:7px 10px;background:#111821d9;color:#f0f2f4;font:10px var(--mono);letter-spacing:.08em;border:1px solid #7b8692}.media-corner{position:absolute;width:45px;height:35px}.corner-top{right:-1px;top:-1px;border-top:3px solid var(--red);border-right:3px solid var(--red)}.corner-bottom{left:-1px;bottom:-1px;border-left:3px solid var(--red);border-bottom:3px solid var(--red)}.gameplay-copy .dossier-main{justify-content:flex-start}.gameplay-copy .dossier-index{font-size:clamp(54px,5vw,85px)}.gameplay-copy .dossier-item{padding:9px 0}
#fracture-canvas{position:absolute;inset:0;z-index:13;pointer-events:none;opacity:0;width:100%;height:100%}.stage-foot{position:absolute;left:4.5%;right:4.5%;bottom:16px;z-index:25;color:#8796a4;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.1em}
.accessible-story{display:none}.postlude{padding:12vh 8vw;min-height:45vh}.postlude>span{font:10px var(--mono);letter-spacing:.13em;color:#bd5361}.postlude h2{font-weight:350;font-size:clamp(34px,4vw,64px);letter-spacing:-.06em}.postlude p{color:#afbac4;max-width:480px}.postlude a{display:inline-block;margin-top:25px;font:10px var(--mono);text-decoration:none;padding-bottom:8px;border-bottom:1px solid #7e8893}
@media(min-width:1650px){.scene{top:19%;height:66%}.scene-gameplay{grid-template-columns:minmax(0,1.99fr) minmax(350px,1fr)}}
@media(max-height:760px) and (min-width:1101px){.scene{top:21%;height:61%}.dossier{padding:12px 16px}.dossier-label{padding-bottom:10px}.dossier-main{padding-top:4px}.dossier-item{padding:5px 0}.dossier h2{margin:6px 0}.dossier p{line-height:1.35;font-size:11px}.dossier-index{font-size:50px}.origin-panel figcaption{padding:7px;min-height:26px}}
@media(max-width:1100px),(prefers-reduced-motion:reduce){.motion-track{display:none}.accessible-story{display:block;padding:26px 6vw}.accessible-story article{border-top:1px solid #47535f;padding:35px 0 50px}.accessible-story article>span{font:10px var(--mono);color:#d06472}.accessible-story article>img,.accessible-story video{display:block;width:100%;max-height:420px;object-fit:contain;margin-top:20px;background:#170464}.accessible-story h2{font-size:clamp(24px,4vw,36px);font-weight:400}.accessible-story p{max-width:600px;color:#b1bbc7;line-height:1.6}.simple-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.simple-grid img{width:100%;height:220px;object-fit:contain;background:#151922}.prelude{padding:10vh 6vw}.prelude h1{font-size:clamp(34px,7vw,65px)}.postlude{padding:8vh 6vw}html{scroll-behavior:auto}}
@media(max-width:620px){.sitehead{font-size:8px}.sitehead>span:last-child{display:none}.simple-grid{grid-template-columns:1fr}.simple-grid img{height:auto;max-height:400px}}

/* 007 QA: the portrait is a transparent subject cutout. Frame colour is continuous and crisp. */
.identity-frame{border-color:#a3a8c0}

/* Fracture holds only the right-side narrative; no type beneath moving shards. */
.fracture-underlay>b,.fracture-underlay>small{visibility:hidden}

/* Integrated portfolio 008 fine adjustments — approved Edge identity stays intact. */
.stage-meta{top:21px}
.scene-origins{transform:translateY(-13px)}
.scene-identity .hood-breakout{clip-path:inset(0 0 71% 0)}
.origin-media{gap:14px}
.origin-panel figcaption{position:relative;z-index:1}
.stage-heading{max-width:55%;}
.stage-foot{bottom:20px}
@media(max-height:800px) and (min-width:1101px){.scene-origins{transform:translateY(-7px)}}

/* RC 009 — single-image hood breakout; portrait can cross top border only. */
.identity-photo{isolation:isolate}
.identity-frame{background:#200778;border:1px solid #a3a8c0}
.portrait-window{--breakout-space:clamp(115px,9.5vw,185px);position:absolute;top:calc(-1 * var(--breakout-space));left:0;right:0;bottom:0;overflow:hidden;z-index:4;pointer-events:none}
.portrait-positioner{position:absolute;top:var(--breakout-space);left:0;right:0;height:calc(100% - var(--breakout-space));pointer-events:none}
.portrait-positioner .portrait-main{top:-36%;left:13%;width:81%;max-width:none;height:auto;display:block}
.identity-serial{top:15px;left:16px;z-index:6}
/* Slightly more space beneath Origins at short viewport heights. */
.scene-origins{transform:translateY(-26px)}
@media(max-height:800px) and (min-width:1101px){.scene-origins{transform:translateY(-21px)}}

/* V5.1 bounded layout correction: keep established art direction. */
.scene-origins{transform:translateY(-58px)}
.origin-iteration img{object-position:100% 50%}
@media(max-height:800px) and (min-width:1101px){.scene-origins{transform:translateY(-48px)}}

/* V7.2: intentful navigation, clearer final dossier, longer unlocked Gameplay hold */
html{scroll-behavior:auto!important}
.motion-track{height:590vh}
.stage-meta{align-items:center}.stage-skip{color:#e7c5c9;font:11px var(--mono);letter-spacing:.1em;border:1px solid #65707b;background:#131920e8;padding:10px 13px;pointer-events:auto}
.stage-skip:hover{border-color:#d16b76;background:#2b232c}
.stage-foot{font-size:11px;bottom:18px}
.stages-nav button{min-width:48px;height:47px;font-size:11px}.stages-nav .label{font-size:10px}
.dossier-label{font-size:11px;letter-spacing:.1em}.dossier p{font-size:clamp(14px,1vw,16px);line-height:1.6}
.dossier-item{padding:12px 0}.dossier-item span{font-size:11px}.dossier-item b{font-size:14px;margin-top:5px}
.gameplay-copy .dossier-main{padding-top:12px}.gameplay-copy .dossier-item{padding:11px 0}
.gameplay-principle{margin-top:auto;padding:13px 0 15px;border-top:1px solid #4b5663}
.gameplay-principle span{font:11px var(--mono);letter-spacing:.1em;color:#d87984}
.gameplay-principle p{font-size:14px;color:#c6d0d9;line-height:1.55;margin:9px 0 0}
.dossier-action{font-size:12px;min-height:47px;align-items:center;cursor:pointer;color:#e7ecf1;transition:color .2s,border-color .2s}
.dossier-action:hover{color:white;border-color:#f17e8b}.dossier-action:focus-visible{outline:2px solid white;outline-offset:5px}
@media(max-height:800px) and (min-width:1101px){.gameplay-copy .dossier-main{padding-top:2px}.gameplay-principle{padding:4px 0 6px}.gameplay-principle p{font-size:13px;margin:3px 0 0}.gameplay-copy .dossier-item{padding:5px 0}.dossier p{font-size:13px}.dossier-action{min-height:35px;font-size:11px}.dossier-item span{font-size:10px}.dossier-item b{font-size:13px}}
@media(max-width:1100px),(prefers-reduced-motion:reduce){.stage-skip{display:none}.motion-track{display:none}}


/* V7.2.1 / legibility gate — do not shrink useful information to mimic technical decoration. */
.stage-meta{font-size:12px}
.stage-heading small{font-size:12px}
.stage-foot{font-size:12px;letter-spacing:.065em}
.stages-nav button{font-size:12px;min-width:51px;height:51px}
.stages-nav .label{font-size:11px}
.media-label,.identity-serial{font-size:12px}
.origin-panel figcaption{font-size:12px}
.dossier-label{font-size:12px;line-height:1.45}
.dossier p{font-size:clamp(16px,1.18vw,18px);line-height:1.55}
.dossier-item span{font-size:12px;line-height:1.35}
.dossier-item b{font-size:16px;line-height:1.4}
.dossier-end{font-size:12px}
.gameplay-copy{padding:18px 22px 17px}
.gameplay-copy .dossier-main{padding-top:8px}
.gameplay-copy .dossier-index{font-size:clamp(51px,4.2vw,70px);line-height:.9}
.gameplay-copy h2{font-size:clamp(27px,2.1vw,36px);line-height:1.1;margin:12px 0 11px}
.gameplay-copy .dossier-item{padding:9px 0}
.gameplay-copy .dossier-item span{font-size:12px}
.gameplay-copy .dossier-item b{font-size:16px;margin-top:4px}
.gameplay-principle{padding:11px 0 12px;margin-top:auto}
.gameplay-principle span{font-size:12px}
.gameplay-principle p{font-size:16px;line-height:1.45;margin:6px 0 0}
.dossier-action{font-size:14px;min-height:52px;line-height:1.4;gap:8px;font-weight:500;padding-top:10px}
/* Short screens keep a large enough interactive area rather than reducing body type to 11px. */
@media(max-height:800px) and (min-width:1101px){
 .scene-gameplay{top:16%;height:71%}
 .gameplay-copy{padding:11px 18px 10px}
 .gameplay-copy .dossier-label{padding-bottom:7px}
 .gameplay-copy .dossier-main{padding-top:3px}
 .gameplay-copy .dossier-index{font-size:47px}
 .gameplay-copy h2{font-size:27px;margin:5px 0 7px}
 .gameplay-copy p{font-size:15px;line-height:1.4;margin-bottom:7px}
 .gameplay-copy .dossier-item{padding:5px 0}
 .gameplay-copy .dossier-item span{font-size:12px}
 .gameplay-copy .dossier-item b{font-size:15px;margin-top:2px}
 .gameplay-principle{padding:6px 0 7px}
 .gameplay-principle span{font-size:12px}
 .gameplay-principle p{font-size:15px;margin:4px 0 0}
 .dossier-action{font-size:13px;min-height:40px}
}
@media(max-width:1100px),(prefers-reduced-motion:reduce){
 .accessible-story article>span{font-size:12px}
 .accessible-story p{font-size:16px}
}

/* V8: a compact scroll story that ends with one project-library exit. */
.motion-track{height:405vh}
.stage-meta .stage-skip{display:none}
.stage-foot{bottom:15px}
.feature-exit-button{position:absolute;z-index:39;left:50%;bottom:clamp(48px,6vh,67px);transform:translate(-50%,9px);padding:14px 22px;background:#191e26f5;border:1px solid #aa5360;border-left:3px solid #cd5967;color:#f5f6f8;font:13px var(--mono);letter-spacing:.09em;text-decoration:none;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,border-color .18s;box-shadow:0 12px 24px #05080b9c}
.feature-exit-button.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.feature-exit-button:hover{border-color:#f1a5af;background:#262730}
.feature-exit-button:focus-visible{outline:2px solid white;outline-offset:5px}
.mobile-feature-exit{display:none}
@media(max-width:1100px),(prefers-reduced-motion:reduce){.feature-exit-button{display:none}.mobile-feature-exit{display:flex;justify-content:center;padding:0 24px 65px}.mobile-feature-exit a{display:inline-flex;font:14px var(--mono);padding:16px 24px;border:1px solid #b65b67;color:#eef0f3;background:#1c2028;letter-spacing:.06em}}


/* V8.1: only bounded navigation/end-of-page corrections. */
/* The stage owns the INTRO shortcut: no floating button or overlapping footer. */
.stage-meta{z-index:28;pointer-events:none}
.stage-meta .feature-intro-link{
  pointer-events:auto;position:relative;display:inline-flex;align-items:center;margin-left:auto;
  padding:11px 16px;border:1px solid #71808d;background:#151b22;
  font:12px var(--mono);letter-spacing:.11em;color:#e5eaf0;text-decoration:none;
  min-height:42px;
}
.stage-meta .feature-intro-link:hover,
.stage-meta .feature-intro-link:focus-visible{border-color:#d86a78;background:#27202a}
/* Disabled scenes intentionally have no pointer events; gameplay becomes interactive after resolution via motion.js. */
.scene-gameplay .dossier-action{position:relative;z-index:3;pointer-events:auto}
.scene-gameplay .dossier-action:hover{background:#29303a;color:white}
/* The scrollable page terminates with the intact final composition rather than pushing it up to reveal a second footer. */
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
  body[data-page="home"] .site-footer{display:none}
  body[data-page="home"] .back-top{display:none!important}
}
@media(max-width:1100px),(prefers-reduced-motion:reduce){
  .accessible-case-link{display:inline-flex;margin-top:20px;padding:13px 16px;
    border:1px solid #768491;color:#e5eaf0;font:13px var(--mono);text-decoration:none}
}