:root{--bg:#0b0c10;--panel:#14151b;--text:#f5f0e8;--muted:#9a9aa4;--line:#2b2c34;--red:#ff4e2f;--amber:#ffb12b;--cyan:#49dcff;--nav:rgba(11,12,16,.78)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans SC",sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.055;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.progress{position:fixed;left:0;top:0;height:2px;background:linear-gradient(90deg,var(--red),var(--amber));z-index:100;width:0}.nav{height:74px;position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;padding:0 4vw;border-bottom:1px solid var(--line);background:var(--nav);backdrop-filter:blur(18px)}.brand{font:700 12px Syne,sans-serif;letter-spacing:.12em;color:var(--text);text-decoration:none}.brand span{display:inline-grid;place-items:center;width:31px;height:31px;margin-right:8px;border:1px solid var(--red);color:var(--red)}.nav nav{margin-left:auto;display:flex;gap:30px}.nav nav a{font-size:12px;color:var(--muted);text-decoration:none}.nav nav a:hover{color:var(--text)}.theme{margin-left:30px;background:none;border:1px solid var(--line);color:var(--text);width:34px;height:34px;border-radius:50%}.section{max-width:1440px;margin:auto;padding:130px 7vw}.hero{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;padding-top:130px}.eyebrow,.index{font:600 11px Syne,sans-serif;letter-spacing:.2em;color:var(--red)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,6vw,92px);line-height:1.05;letter-spacing:-.055em;margin:25px 0}h1 em{font-style:normal;color:var(--amber)}.lead{font-size:18px;line-height:1.9;color:var(--muted);max-width:650px}.meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:55px}.meta div{border-top:1px solid var(--line);padding-top:14px}.meta b,.meta span{display:block;font-size:12px}.meta span{color:var(--muted);margin-top:7px}.hero-stage{height:72vh;min-height:580px;position:relative;display:grid;place-items:center}.poster{width:68%;height:78%;position:relative;transform:rotate(4deg);border:1px solid rgba(255,255,255,.24);box-shadow:0 50px 100px rgba(0,0,0,.55);overflow:hidden}.poster-img,.case-image{background:url('assets/screens/01-hub.webp') center/cover no-repeat}.poster-img{position:absolute;inset:0;filter:saturate(1.25) contrast(1.05)}.poster:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,12,.85))}.poster-label{position:absolute;left:25px;bottom:23px;z-index:2;font:500 11px Syne;letter-spacing:.2em}.poster-label strong{font-size:25px;color:white}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-a{width:240px;height:240px;background:radial-gradient(circle at 30% 30%,#ffb12b,transparent 65%);right:0;top:4%;opacity:.55}.orb-b{width:300px;height:300px;background:radial-gradient(circle at 50% 50%,#234dff,transparent 65%);left:4%;bottom:0;opacity:.4}.scroll-tip{position:absolute;bottom:0;font:10px Syne;letter-spacing:.15em;color:var(--muted)}.manifesto{border-top:1px solid var(--line)}h2{font-size:clamp(38px,5vw,72px);line-height:1.15;letter-spacing:-.045em}h2 span{color:var(--red)}.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:70px}.challenge-grid article{padding:35px;background:var(--panel);min-height:250px}.challenge-grid article>span{color:var(--red);font:700 12px Syne}.challenge-grid h3{font-size:27px;margin-top:70px}.challenge-grid p,.section-head>p:last-child{color:var(--muted);line-height:1.8}.goal{margin-top:70px;padding:30px 0;border-block:1px solid var(--line);display:grid;grid-template-columns:1fr 3fr}.goal span{font-size:12px;color:var(--red)}.goal p{font-size:25px;margin:0}.system{max-width:none;background:#111218}.section-head{max-width:900px}.journey{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.journey-step{text-align:left;padding:24px;background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer}.journey-step i,.journey-step b,.journey-step span{display:block}.journey-step i{font-style:normal;font:11px Syne;color:var(--red)}.journey-step b{font-size:23px;margin:28px 0 7px}.journey-step span{font-size:12px}.journey-step.active{background:var(--text);color:#111}.journey-panel{grid-column:1/-1;padding:65px;background:linear-gradient(120deg,#25222a,#161820);min-height:310px}.journey-panel small{color:var(--amber);letter-spacing:.2em}.journey-panel h3{font-size:42px;margin:25px 0 15px}.journey-panel p{color:var(--muted);max-width:700px;line-height:1.8}.journey-panel span{display:inline-block;margin:20px 8px 0 0;padding:8px 12px;border:1px solid #3b3b44;font-size:11px}.modules{margin-top:110px}.module-nav{display:flex;gap:25px;border-bottom:1px solid var(--line)}.module-nav button{padding:15px 0;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer}.module-nav button.active{color:var(--text);border-color:var(--red)}.module-card{display:grid;grid-template-columns:1fr 1fr;min-height:520px}.module-card>div:first-child{padding:70px 6vw 50px 0}.module-no{font:700 70px Syne;color:#2d2e36}.module-card h3{font-size:38px}.module-card p,.module-card li{color:var(--muted);line-height:1.8}.module-visual{background:radial-gradient(circle at center,#4e1d1a,#161820 65%);display:grid;place-items:center;position:relative;overflow:hidden}.module-visual>span{font:700 clamp(70px,10vw,150px) Syne;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.25)}.radar{position:absolute;width:360px;height:360px;border:1px solid rgba(255,177,43,.3);border-radius:50%;animation:spin 10s linear infinite}.radar:before,.radar:after{content:"";position:absolute;inset:16%;border:inherit;border-radius:inherit}.radar:after{inset:34%}@keyframes spin{to{transform:rotate(360deg)}}.compare{margin-top:70px;display:grid;grid-template-columns:.8fr 1.2fr;background:var(--panel);min-height:590px}.compare-copy{padding:65px}.chip{font-size:10px;padding:8px 10px;border:1px solid var(--red);color:var(--red)}.compare-copy h3{font-size:38px;margin:35px 0 20px}.compare-copy>p{color:var(--muted);line-height:1.9}.delta{display:flex;gap:20px;margin-top:45px}.delta span{font-size:11px;color:var(--muted)}.delta b{display:block;color:var(--text);font-size:14px}.compare-stage{position:relative;overflow:hidden;min-height:590px}.case-image{position:absolute;inset:0;background-position:center 20%;filter:saturate(1.2)}.case-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent)}.scan{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(255,78,47,.4) 50.5%,transparent 51%);animation:scan 5s ease-in-out infinite}@keyframes scan{0%,100%{transform:translateY(-45%)}50%{transform:translateY(45%)}}.compare-stage>span{position:absolute;bottom:20px;right:20px;font-size:10px;color:#fff}.decisions{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:2px}.decisions article{padding:35px;background:var(--panel)}.decisions b{font:11px Syne;color:var(--amber)}.decisions h3{font-size:20px;margin-top:32px}.decisions p{color:var(--muted);font-size:13px;line-height:1.7}.artifact{text-align:center;border-block:1px solid var(--line)}.artifact>p:not(.index){color:var(--muted)}.open-board{margin-top:35px;padding:16px 24px;border:1px solid var(--text);background:transparent;color:var(--text);cursor:pointer}.open-board:hover{background:var(--text);color:var(--bg)}.reflection{display:grid;grid-template-columns:1.3fr .7fr;gap:10vw}.reflection-main>p:last-child{color:var(--muted);line-height:1.9;font-size:17px}.learnings>div{display:flex;gap:25px;padding:25px 0;border-top:1px solid var(--line)}.learnings i{font:11px Syne;color:var(--red)}.learnings p{line-height:1.7}.learnings b{display:block;font-size:18px;margin-bottom:6px}footer{padding:120px 7vw;background:var(--red);color:#110906}footer p{font:11px Syne;letter-spacing:.2em}footer h2{max-width:900px}footer a{color:#110906}dialog{width:min(92vw,1100px);height:90vh;padding:0;border:0;background:#111;color:white}dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}dialog img{display:block;width:100%}dialog button{position:fixed;right:6vw;top:4vh;padding:12px 18px;background:#fff;border:0;z-index:2}.reveal{opacity:0;transform:translateY(30px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}body.light{--bg:#eeeae2;--panel:#e2ddd4;--text:#15151a;--muted:#69686e;--line:#c9c3b8;--nav:rgba(238,234,226,.82)}body.light .system{background:#e6e1d8}@media(max-width:850px){.nav nav{display:none}.hero,.reflection,.compare,.module-card{grid-template-columns:1fr}.hero{padding-top:120px}.hero-stage{height:55vh;min-height:450px}.section{padding:95px 6vw}.challenge-grid,.decisions{grid-template-columns:1fr}.goal{grid-template-columns:1fr;gap:15px}.journey{grid-template-columns:1fr}.journey-panel{padding:35px}.module-nav{overflow:auto}.module-nav button{white-space:nowrap}.module-visual{min-height:360px}.compare-copy{padding:40px}.meta{grid-template-columns:1fr 1fr}h1{font-size:48px}.delta{flex-wrap:wrap}}

/* anonymized case-study visual layer */
.wire-ui{position:absolute;inset:7%;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(8,12,22,.16),rgba(8,10,15,.72));backdrop-filter:blur(1px);box-shadow:inset 0 0 80px rgba(0,0,0,.38)}
.wire-title{position:absolute!important;left:20px;top:18px!important;bottom:auto!important;right:auto!important;font:600 10px Syne,sans-serif!important;letter-spacing:.2em;color:rgba(255,255,255,.75)!important}
.pin{position:absolute;width:28px;height:28px;border:1px solid #ffb12b;border-radius:50%;box-shadow:0 0 0 8px rgba(255,177,43,.12),0 0 24px rgba(255,78,47,.7)}
.pin:after{content:"";position:absolute;inset:8px;background:#ffb12b;border-radius:50%}.p1{left:18%;top:40%}.p2{left:45%;top:25%}.p3{right:18%;top:42%}.p4{left:53%;bottom:28%}.wire-dock{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px;padding:9px 14px;background:rgba(8,10,15,.72);border:1px solid rgba(255,255,255,.14)}.wire-dock b{width:35px;height:8px;background:rgba(255,255,255,.28)}
.privacy-note{width:min(620px,100%);margin:45px auto 0;padding:34px;border:1px solid var(--line);background:var(--panel);text-align:left}.privacy-note span{display:block;color:var(--red);font:600 10px Syne,sans-serif;letter-spacing:.2em}.privacy-note b{display:block;font-size:25px;margin:18px 0 8px}.privacy-note p{margin:0!important;font-size:13px;color:var(--muted)!important}
.back-home{margin-left:22px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px;text-decoration:none;transition:.2s ease}.back-home:hover{border-color:var(--red);color:var(--text)}

/* portfolio narrative + reconstructed UI */
.poster-img{background-image:url('assets/screens/01-hub.webp');background-position:center;background-size:cover}.case-image{background-image:url('assets/screens/01-hub.webp');background-position:center;background-size:cover}.overview{border-top:1px solid var(--line)}.overview-head{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end}.overview-head p{color:var(--muted);line-height:1.85}.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:65px}.overview-grid article{min-height:210px;padding:30px;background:var(--panel);display:flex;flex-direction:column}.overview-grid small{color:var(--red);font:600 10px Syne,sans-serif;letter-spacing:.16em}.overview-grid b{font-size:19px;margin-top:auto}.overview-grid span{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.principles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2px;border:1px solid var(--line)}.principles div{padding:25px;border-right:1px solid var(--line)}.principles div:last-child{border:0}.principles i{font:11px Syne;color:var(--amber)}.principles b,.principles span{display:block}.principles b{margin:20px 0 6px}.principles span{font-size:12px;color:var(--muted)}
.ia-map{margin:65px 0 85px;padding:55px;background:linear-gradient(135deg,#241b19,#15171d);border:1px solid var(--line)}.ia-hub{width:min(390px,90%);margin:auto;padding:25px;border:1px solid var(--red);background:rgba(255,78,47,.08);text-align:center}.ia-hub small,.ia-hub b,.ia-hub span{display:block}.ia-hub small{color:var(--red);font-size:10px}.ia-hub b{font-size:25px;margin:10px}.ia-hub span{font-size:12px;color:var(--muted)}.ia-line{height:55px;display:flex;justify-content:center;gap:25%;overflow:hidden}.ia-line i{height:100%;width:1px;background:var(--line)}.ia-items{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ia-items span{padding:17px 12px;border:1px solid var(--line);background:#191a20;text-align:center;font-size:13px}.ia-map>p{text-align:center;color:var(--muted);font-size:12px;margin:30px 0 0}.module-visual{background:#0e0f13}.module-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}.screen-section{max-width:none;background:#0e0f13}.screen-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:70px}.screen-card{margin:0;background:var(--panel);border:1px solid var(--line);cursor:zoom-in;overflow:hidden}.screen-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s ease}.screen-card:hover img{transform:scale(1.018)}.screen-card figcaption{padding:25px 27px 28px}.screen-card figcaption span{color:var(--red);font:600 10px Syne,sans-serif;letter-spacing:.16em}.screen-card figcaption b{display:block;font-size:22px;margin:12px 0 7px}.screen-card figcaption p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.screen-card.wide{grid-column:1/-1}.screen-card.wide figcaption{display:grid;grid-template-columns:120px 1fr 1.4fr;align-items:center;gap:20px}.screen-card.wide figcaption b,.screen-card.wide figcaption p{margin:0}.image-dialog{width:min(94vw,1500px);height:auto;max-height:92vh;overflow:auto;background:#08090c}.image-dialog img{width:100%;height:auto}.image-dialog button{position:fixed;right:4vw;top:3vh;cursor:pointer}.compare-stage>.case-image{filter:saturate(1.05)}
@media(max-width:850px){.overview-head{grid-template-columns:1fr}.overview-grid,.principles{grid-template-columns:1fr 1fr}.ia-map{padding:28px 18px}.ia-items{grid-template-columns:1fr 1fr}.screen-gallery{grid-template-columns:1fr}.screen-card.wide{grid-column:auto}.screen-card.wide figcaption{display:block}.screen-card.wide figcaption b{margin:12px 0 7px}}@media(max-width:520px){.overview-grid,.principles{grid-template-columns:1fr}.principles div{border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:620px){.brand{font-size:0}.brand span{font-size:12px}.back-home{margin-left:8px}.theme{margin-left:12px}}

/* browser feedback refinements */
.hero{grid-template-columns:1fr;min-height:auto;padding-top:170px;padding-bottom:110px}.hero-copy{max-width:980px}.hero .lead{max-width:760px}.hero .meta{max-width:820px}.compare{grid-template-columns:1fr;min-height:auto}.compare-copy{max-width:900px}.compare-stage{display:none}footer{background:linear-gradient(135deg,#251416 0%,#171317 55%,#101115 100%);color:var(--text);border-top:1px solid #402327}footer p{color:#d97768}footer a{color:var(--text);text-underline-offset:6px}

/* tighter transitions between the opening narrative sections */
.hero{padding-bottom:36px}.overview{padding-top:56px;padding-bottom:44px}.manifesto{padding-top:56px}
@media(max-width:850px){.hero{padding-bottom:28px}.overview{padding-top:44px;padding-bottom:36px}.manifesto{padding-top:44px}}

/* WarpText: local OGL headline with a readable static fallback */
.warp-title{display:block;margin:20px 0 22px;line-height:1;letter-spacing:-.055em}
.warp-line{position:relative;display:block;width:100%;height:1.06em;min-height:58px;overflow:hidden;isolation:isolate;font-size:clamp(48px,6vw,92px);font-weight:900;line-height:1;color:var(--text)}
.warp-line-accent{color:var(--amber)}
.warp-fallback{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;transition:opacity .2s ease}
.warp-line canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.warp-line.is-ready .warp-fallback{opacity:0}
@media(max-width:850px){.warp-title{margin:18px 0 20px}.warp-line{font-size:48px;min-height:51px}}
@media(prefers-reduced-motion:reduce){.warp-line canvas{pointer-events:none}.warp-fallback{transition:none}}

/* compact overview rhythm */
.overview-head{gap:32px}.overview-head h2,.overview-head p{margin-bottom:0}.overview-grid{margin-top:38px}.overview-grid article{min-height:164px}.overview-grid b{margin-top:30px}
@media(max-width:850px){.overview-head{gap:14px}.overview-grid{margin-top:30px}.overview-grid article{min-height:154px}.overview-grid b{margin-top:26px}}

/* denser context and section transitions */
.challenge-grid{margin-top:42px}.challenge-grid article{min-height:190px;padding:30px}.challenge-grid h3{margin-top:28px}.goal{margin-top:46px}.manifesto{padding-bottom:42px}.system{padding-top:58px}
@media(max-width:850px){.challenge-grid{margin-top:34px}.challenge-grid article{min-height:174px;padding:26px}.challenge-grid h3{margin-top:24px}.goal{margin-top:36px}.manifesto{padding-bottom:30px}.system{padding-top:42px}}

/* SpecularButton edge treatment adapted to information and feedback cards */
.specular-surface{--spec-line:#ffad45;--spec-base:#563027;position:relative;isolation:isolate;overflow:visible}
.ia-items .specular-surface:nth-child(even){--spec-line:#ff6a42;--spec-base:#4a2523}
.decisions .specular-surface{--spec-line:#ffb12b;--spec-base:#503629}
.specular-surface__fx{position:absolute;inset:-20px;pointer-events:none;z-index:3}
.specular-surface__fx canvas{display:block;width:100%;height:100%}
.specular-surface>*:not(.specular-surface__fx){position:relative;z-index:2}
.ia-items .specular-surface,.decisions .specular-surface{transition:background-color .22s ease,transform .22s ease}
.ia-items .specular-surface:hover,.decisions .specular-surface:hover{background-color:color-mix(in srgb,var(--panel) 82%,var(--red));transform:translateY(-1px)}

/* keep the UI reconstruction headline on one responsive line */
.screen-section .section-head{max-width:none}
.screen-section .section-head h2{font-size:clamp(16px,3.6vw,64px);white-space:nowrap}

/* Show each module artwork in full while preserving all existing typography. */
.module-card{
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  align-items:center;
  min-height:0;
}
.module-visual{
  width:100%;
  aspect-ratio:16 / 9;
  min-height:0;
  align-self:center;
}
.module-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
@media(max-width:850px){
  .module-card{grid-template-columns:1fr}
  .module-card>div:first-child{padding-right:0}
  .module-visual{aspect-ratio:16 / 9;min-height:0}
}