:root{--green:#00ff00;--orange:#ff641e;--cyan:#00eaff;--purple:#a855f7;--ink:#effff1;--dim:#9eb5aa;--bg:#020504}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth;overflow-x:hidden}.experience-page{margin:0;background:var(--bg);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:hidden}.experience-page a{color:inherit}.experience-nav{position:fixed;z-index:50;top:0;left:0;right:0;height:64px;padding:env(safe-area-inset-top) clamp(16px,3vw,44px) 0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:linear-gradient(#010403c9,transparent);font-size:11px;letter-spacing:.16em}.experience-nav .icon-btn{display:grid;place-items:center;width:40px;height:40px;color:var(--green);border:1px solid #00ff0059;background:#0009}.experience-nav svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.5}.experience-brand{text-align:center;text-decoration:none;font-weight:800}.site-exit{text-transform:uppercase;text-decoration:none;color:var(--dim)!important}.entry{height:100svh;min-height:650px;position:relative;isolation:isolate;overflow:hidden;background:#000}.entry>img{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:saturate(1.22) contrast(1.08);animation:ambientZoom 18s ease-in-out infinite alternate;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1s}.entry::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#000c 0%,#0004 52%,transparent),linear-gradient(0deg,#020504 0%,transparent 32%),radial-gradient(circle at 65% 40%,transparent,#0005)}.entry-grid{position:absolute;inset:0;background-image:linear-gradient(#00ff0010 1px,transparent 1px),linear-gradient(90deg,#00ff0010 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(90deg,#000,transparent 65%)}.entry-copy{position:absolute;z-index:2;left:clamp(22px,7vw,110px);bottom:clamp(75px,13vh,150px);width:min(780px,84vw);border-left:1px solid var(--green);padding-left:clamp(18px,3vw,38px)}.kicker,.section-head p,.machine header p{font-size:10px;letter-spacing:.28em;color:var(--green);text-transform:uppercase}.entry h1{font:800 clamp(42px,7.7vw,112px)/.84 system-ui,sans-serif;letter-spacing:-.07em;margin:.2em 0;text-shadow:0 0 35px #00ff0033}.entry-copy>p:not(.kicker){max-width:680px;font:400 clamp(11px,1.2vw,15px)/1.75 system-ui,sans-serif;color:#e9f5ed}.enter{margin-top:18px;min-height:50px;padding:0 24px;color:#031004;background:var(--green);border:0;font:800 11px/1 ui-monospace,monospace;letter-spacing:.13em;clip-path:polygon(0 0,94% 0,100% 30%,100% 100%,6% 100%,0 70%);cursor:pointer;transition:filter .2s,transform .2s}.enter:hover{filter:drop-shadow(0 0 12px var(--green));transform:translateX(4px)}.scroll-mark{position:absolute;right:25px;bottom:35px;writing-mode:vertical-rl;font-size:8px;letter-spacing:.3em;color:#9bb2a0}.entry.entered>img{transform:scale(1.08);filter:saturate(1.4) contrast(1.1)}.interface{position:relative;background:radial-gradient(circle at 15% 10%,#06311d 0,transparent 20%),radial-gradient(circle at 90% 52%,#172048 0,transparent 18%),#020504}.interface>section{padding:clamp(78px,11vw,160px) max(5vw,20px)}.section-head{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #a5ffc52b;margin-bottom:42px}.section-head h2,.machine h2{font:700 clamp(30px,5vw,70px)/1 system-ui,sans-serif;letter-spacing:-.055em;margin:0 0 18px;text-transform:uppercase}.node-rail{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:1px}.node-rail::before{content:"";position:absolute;left:5%;right:5%;top:28px;height:1px;background:linear-gradient(90deg,var(--green),var(--cyan),var(--purple),var(--orange));box-shadow:0 0 9px var(--cyan)}.node-rail button{position:relative;min-height:190px;padding:60px 14px 20px;text-align:left;color:var(--ink);border:1px solid #b8ffd81f;background:linear-gradient(145deg,#ffffff09,transparent);font:600 13px/1.4 inherit;cursor:pointer;transition:.35s}.node-rail button:hover,.node-rail button:focus-visible{background:#00ff0012;border-color:#00ff0070;transform:translateY(-7px);box-shadow:0 0 35px #00ff001a}.node-rail i{position:absolute;z-index:1;top:21px;left:18px;width:15px;height:15px;border:2px solid var(--green);border-radius:50%;background:#020504;box-shadow:0 0 12px var(--green)}.node-rail b{color:#60736b;font-size:9px;position:absolute;right:12px;top:12px}.viewer{position:relative;overflow:hidden;border:1px solid #00eaff3b;background:#000;box-shadow:0 25px 80px #000}.viewer-images{height:min(72vw,78vh);min-height:450px;position:relative}.viewer figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.04);transition:opacity .65s,transform 1.2s;pointer-events:none}.viewer figure.active{opacity:1;transform:scale(1);pointer-events:auto}.viewer img{width:100%;height:100%;object-fit:cover}.viewer figcaption{position:absolute;left:clamp(18px,4vw,60px);bottom:clamp(74px,9vw,105px);font:800 clamp(34px,7vw,96px)/.9 system-ui,sans-serif;letter-spacing:-.06em;text-shadow:0 4px 30px #000}.viewer figcaption span{display:block;color:var(--cyan);font:500 9px/1 monospace;letter-spacing:.28em;margin-bottom:10px}.viewer-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:13px clamp(14px,3vw,38px);background:#020504e6;border-top:1px solid #00eaff4a}.viewer-controls button{min-height:42px;padding:0 18px;color:var(--ink);background:transparent;border:1px solid #d8fff52e;font:700 10px monospace;text-transform:uppercase}.viewer-controls .explore-image{margin-left:auto;color:#00100d;background:var(--cyan)}.viewer-controls span{font-size:10px;color:var(--dim)}.signals ol{list-style:none;padding:0;margin:0;display:flex;position:relative;justify-content:space-between;gap:20px}.signals ol::before{content:"";position:absolute;top:19px;left:1%;right:1%;height:2px;background:linear-gradient(90deg,var(--orange),var(--green),var(--cyan));box-shadow:0 0 12px #00ff0070}.signals li{position:relative;padding-top:50px;flex:1;color:var(--dim);font:12px/1.4 system-ui,sans-serif}.signals li::before{content:"";position:absolute;top:12px;width:15px;height:15px;border:2px solid var(--orange);border-radius:50%;background:#020504;box-shadow:0 0 14px var(--orange)}.signals li b,.signals li span{display:block}.signals li b{font:700 16px monospace;color:var(--ink);margin-bottom:6px}.current{display:grid;grid-template-columns:.8fr 1fr 1.4fr;gap:1px;background:#82ffc928}.current>div{padding:clamp(24px,4vw,55px);background:#050a08}.signal-status p,.building p{font-size:10px;letter-spacing:.2em;color:var(--orange);text-transform:uppercase}.signal-status h2{font:800 clamp(32px,4vw,56px)/.9 system-ui,sans-serif;margin:.35em 0}.signal-status span{font-size:9px;color:var(--dim)}.signal-status i{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}.building ul{padding:0;list-style:none;font:700 18px/2 system-ui,sans-serif}.building li::before{content:"+";color:var(--green);margin-right:12px}.slots{display:grid;gap:1px;background:#82ffc928}.slots div{background:#030706;padding:18px}.slots small,.slots b{display:block}.slots small{color:var(--cyan);text-transform:uppercase;letter-spacing:.15em}.slots b{margin-top:8px;font:600 14px system-ui;color:var(--dim)}.stream{display:flex;gap:clamp(12px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:5px 5vw 35px;margin:0 -5vw;scrollbar-color:var(--green) #07100b}.stream figure{flex:0 0 min(68vw,740px);margin:0;scroll-snap-align:center}.stream img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.85);transition:.4s}.stream figure:hover img{filter:saturate(1.3);transform:scale(.99)}.stream figcaption{display:flex;justify-content:space-between;padding:16px 0;border-top:2px solid var(--purple)}.stream b{font-size:18px}.stream span{color:var(--dim);font:12px system-ui}.machine{display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw;background:linear-gradient(135deg,#0c1020,#020504)}.process{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:10px}.process span{padding:16px 18px;border:1px solid #a855f766;background:#a855f70d;box-shadow:inset 0 0 18px #a855f712;font-size:11px;white-space:nowrap}.process span:last-child{color:#001300;background:var(--green);border-color:var(--green);font-weight:900}.process i{font-style:normal;color:var(--orange);transform:rotate(-90deg)}.portal-card-grid{width:min(1180px,90vw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}.portal-card{--portal-accent:var(--green);position:relative;isolation:isolate;display:block;height:clamp(300px,29vw,430px);overflow:hidden;border:1px solid color-mix(in srgb,var(--portal-accent) 45%,transparent);background:#010302;text-decoration:none;box-shadow:0 18px 50px #0009;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}.portal-card--projects{--portal-accent:var(--orange)}.portal-card--about{--portal-accent:var(--purple)}.portal-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .45s;filter:saturate(.92) contrast(1.04)}.portal-card--art img{object-position:center}.portal-card--projects img{object-position:center}.portal-card--about img{object-position:center 28%}.portal-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.15) 60%,rgba(0,0,0,.15));pointer-events:none}.portal-card::after{content:"";position:absolute;z-index:2;inset:0;opacity:.12;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 5px,var(--portal-accent) 6px);mix-blend-mode:screen;transition:opacity .35s}.portal-card small,.portal-copy{position:absolute;z-index:3;left:clamp(20px,2.2vw,32px);right:clamp(20px,2.2vw,32px);text-shadow:0 2px 18px #000}.portal-card small{top:clamp(22px,2.2vw,32px);color:var(--portal-accent);font-size:9px;letter-spacing:.22em}.portal-copy{bottom:clamp(22px,2.4vw,36px);display:flex;flex-direction:column}.portal-copy b{font:800 clamp(34px,3.6vw,58px)/.9 system-ui,sans-serif;letter-spacing:-.06em}.portal-copy>span{margin-top:13px;font-size:11px}.portal-copy i{display:inline-block;color:var(--portal-accent);font-style:normal;transition:transform .3s}.portal-card:hover,.portal-card:focus-visible{transform:translateY(-4px);border-color:var(--portal-accent);box-shadow:0 22px 60px #000b,0 0 24px color-mix(in srgb,var(--portal-accent) 30%,transparent)}.portal-card:hover img,.portal-card:focus-visible img{transform:scale(1.05);filter:saturate(1.12) contrast(1.05)}.portal-card:hover::after,.portal-card:focus-visible::after{opacity:.2}.portal-card:hover .portal-copy i,.portal-card:focus-visible .portal-copy i{transform:translateX(5px)}.portal-card:focus-visible{outline:3px solid var(--portal-accent);outline-offset:4px}.exit-experience{display:block;width:max-content;margin:70px auto 0;padding:20px 30px;border-bottom:1px solid var(--green);text-decoration:none;font-weight:800;font-size:11px;letter-spacing:.18em}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.entry>img{animation:none!important;transition:none}.reveal{opacity:1;transform:none;transition:none}.viewer figure,.node-rail button,.portal-card,.portal-card img,.portal-copy i{transition:none!important}}
@keyframes ambientZoom{from{transform:scale(1)}to{transform:scale(1.045) translate3d(-.5%,.4%,0)}}

/* Keep this cinematic page inside the same shared shell as every primary page.
   Only the page content is full bleed; the header and dock retain app-shell sizing. */
.experience-page>.topbar{margin-inline:auto;width:min(calc(100% - (2 * var(--rtc-shell-gutter))),980px)}
.experience-page>main{position:relative;z-index:var(--rtc-layer-content);padding-bottom:calc(var(--rtc-footer-height) + env(safe-area-inset-bottom) + 12px);background:var(--bg)}
.experience-page>.dock{display:grid}

/* Film rails are supplied by app-shell.css at every breakpoint. Keeping the
   shared treatment here avoids an Experience-only rail geometry and animation. */
.experience-page::before,.experience-page::after{z-index:30;background-color:#010302;mix-blend-mode:normal}

/* Final Bio-Architecture desktop artwork integration */
.entry>picture{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.entry>picture img{width:100%;height:100%;object-fit:cover}.desktop-art{display:block;max-width:100%;height:auto}.principles-layout{display:grid;grid-template-columns:minmax(520px,.8fr) minmax(500px,1.2fr);gap:clamp(28px,4vw,72px);align-items:center}.principles-layout .node-rail{grid-template-columns:repeat(2,1fr)}.principles-layout .node-rail::before{display:none}.principles-art,.signal-art,.current-art,.machine-art{margin:0;overflow:hidden;background:#020504}.principles-art{aspect-ratio:3/2}.principles-art img{width:100%;height:100%;object-fit:cover}.signal-art{width:100%;margin-bottom:-3.5%;aspect-ratio:3/1}.signal-art img{width:100%;height:100%;object-fit:contain}.signals ol{padding:0 2.5%}.current{grid-template-columns:minmax(360px,.85fr) minmax(440px,1.15fr);align-items:stretch;background:radial-gradient(circle at 78% 50%,#4b123333,transparent 35%),#030706}.current-copy{display:grid;align-content:center;padding:clamp(36px,6vw,90px)!important;background:linear-gradient(90deg,#030706 65%,transparent)!important;z-index:1}.current-art{min-height:650px;background:transparent}.current-art img{width:100%;height:100%;object-fit:contain}.stream{display:grid;grid-template-columns:1.45fr .9fr .9fr;grid-template-rows:repeat(2,minmax(250px,31vw));overflow:visible;padding:0;margin:0}.stream figure{min-width:0;height:100%}.stream figure:first-child{grid-row:1/3}.stream figure:nth-child(4){grid-column:2/3}.stream figure:nth-child(5){grid-column:3/4}.stream img{display:block;width:100%;height:calc(100% - 62px);aspect-ratio:auto}.stream figure:first-child img{height:calc(100% - 62px)}.stream figcaption{min-height:62px;gap:12px}.machine{display:block}.machine header{display:grid;grid-template-columns:.6fr 1.4fr;gap:5vw;align-items:end;margin-bottom:42px}.machine .process{justify-content:flex-end}.machine-art{width:100%;aspect-ratio:16/9}.machine-art img{width:100%;height:100%;object-fit:contain}@media(min-width:761px){.entry>picture img{object-position:62% center;animation:ambientZoom 18s ease-in-out infinite alternate;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}.entry-copy{max-width:650px}.viewer-images{height:min(56.3vw,76vh);min-height:540px;max-height:850px}.viewer img{object-position:center}.viewer figure.zoomed{transform:scale(1.04)!important}.signals li{text-shadow:0 2px 10px #000}.art-stream{overflow:hidden}}
@media(max-width:1100px) and (min-width:761px){.principles-layout{grid-template-columns:1fr}.principles-layout .node-rail{grid-template-columns:repeat(3,1fr)}.current{grid-template-columns:.9fr 1.1fr}.machine header{grid-template-columns:1fr}.stream{grid-template-columns:1.2fr 1fr;grid-template-rows:repeat(3,minmax(260px,35vw))}.stream figure:first-child{grid-row:1/3}.stream figure:nth-child(4),.stream figure:nth-child(5){grid-column:auto}.stream figure:nth-child(5){grid-column:1/3}}

@media(prefers-reduced-motion:reduce){.entry>picture img{animation:none!important;transition:none!important}}
@media(min-width:761px){.entry.entered>picture img{transform:scale(1.035)}}
.mobile-slots{display:none}
.stream picture{display:block;width:100%;height:calc(100% - 62px)}.stream picture img{height:100%}


/* Desktop scale and rhythm: keep the artwork cinematic without letting it set
   an unnecessarily tall page cadence. These constraints are intentionally
   section-specific so the full-bleed environment viewer remains untouched. */
@media(min-width:1101px){
  .principles,.current,.art-stream,.machine,.portals{padding-top:clamp(80px,7vw,112px)!important;padding-bottom:clamp(80px,7vw,112px)!important}

  .principles-layout{grid-template-columns:minmax(520px,1fr) minmax(460px,1.05fr)}
  .principles-art{width:100%;max-height:580px;aspect-ratio:auto;display:grid;place-items:center}
  .principles-art img{width:100%;height:auto;max-height:580px;object-fit:contain}

  .current{grid-template-columns:minmax(420px,1fr) minmax(440px,1.1fr);align-items:center}
  .current-copy{min-height:clamp(520px,42vw,680px);padding:clamp(38px,5vw,72px)!important}
  .current-art{width:100%;height:clamp(560px,47vw,680px);min-height:0;display:grid;place-items:center}
  .current-art img{width:100%;height:100%;max-height:680px;object-fit:contain}

  .stream{grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,clamp(230px,29vh,300px))}

  .machine-art{height:min(70vh,720px);max-height:720px;aspect-ratio:auto;display:grid;place-items:center}
  .machine-art img{width:100%;height:100%;max-height:720px;object-fit:contain}

  .exit-experience{margin-top:clamp(36px,4vw,56px)}
}

.experience-image-error{position:relative!important;min-height:180px;background:repeating-linear-gradient(135deg,#1a0505,#1a0505 12px,#090202 12px,#090202 24px)!important;outline:2px solid #ff641e;overflow:hidden}
.experience-image-error::before{content:"IMAGE SIGNAL LOST";position:absolute;z-index:4;inset:0;display:grid;place-items:center;color:#ffb08a;font:700 12px/1.4 ui-monospace,monospace;letter-spacing:.16em;text-align:center;padding:20px}
.experience-image-error>img,.experience-image-error>picture>img{visibility:hidden}

/* Mobile restoration: reuse the cinematic source art while giving each image a
   deliberate crop and allowing content—not desktop module heights—to set rhythm. */


/* Mobile composition repair. Required content follows document flow below the
   fixed controls; only artwork and decorative treatments are positioned. */
.mobile-portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);width:min(1180px,100%);margin-inline:auto}
.mobile-portal{--portal-accent:var(--green);display:grid;grid-template-rows:auto auto auto;gap:14px;min-width:0;padding:clamp(16px,1.8vw,24px);border:1px solid color-mix(in srgb,var(--portal-accent) 42%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--portal-accent) 8%,#010302),#010302 55%);box-shadow:0 18px 46px #000b}.mobile-portal--projects{--portal-accent:var(--orange)}.mobile-portal--about{--portal-accent:var(--purple)}
.mobile-portal header{display:grid;gap:6px}.mobile-portal small{color:var(--portal-accent);font-size:9px;letter-spacing:.2em}.mobile-portal h3{margin:0;font:800 clamp(32px,3.6vw,52px)/.92 system-ui,sans-serif;letter-spacing:-.055em}.mobile-portal p{margin:0;color:var(--dim);font:500 13px/1.5 system-ui,sans-serif}.mobile-portal-art{display:block;aspect-ratio:16/10;min-height:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--portal-accent) 50%,transparent);background:#000}.mobile-portal-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.mobile-portal--art img{object-position:center 52%}.mobile-portal--about img{object-position:center 45%}.mobile-portal-cta{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border:1px solid var(--portal-accent);background:color-mix(in srgb,var(--portal-accent) 12%,#010302);color:#fff;text-decoration:none;font:800 10px/1 monospace;letter-spacing:.16em}.mobile-portal-cta span{color:var(--portal-accent);font-size:17px}.mobile-portal-art:focus-visible,.mobile-portal-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}







/* Visual Principles specimen selector */
.principles-layout{grid-template-columns:minmax(480px,1fr) minmax(420px,1.08fr);align-items:center}
.principles-layout .node-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.principles-layout .node-rail::before{display:none}
.principles-layout .node-rail button{position:relative;isolation:isolate;min-width:0;min-height:0;aspect-ratio:4/3;overflow:hidden;padding:0;border:1px solid #b8ffd83d;background:#020504;color:var(--ink);cursor:pointer;text-align:left;box-shadow:0 12px 28px #0008;transform:none;transition:border-color .25s,box-shadow .25s,transform .25s}
.principles-layout .node-rail button::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,#0017081c 20%,#010504e8 100%);pointer-events:none}
.principles-layout .node-rail button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.04);transition:filter .3s,transform .6s}
.principles-layout .node-rail button[data-principle="01"] img{object-position:50% 52%}
.principles-layout .node-rail button[data-principle="02"] img{object-position:48% 50%}
.principles-layout .node-rail button[data-principle="03"] img{object-position:50% 55%}
.principles-layout .node-rail button[data-principle="04"] img{object-position:52% 48%}
.principles-layout .node-rail button[data-principle="05"] img{object-position:50% 50%}
.principles-layout .node-rail button[data-principle="06"] img{object-position:50% 44%}
.principles-layout .node-rail button i{z-index:3;top:14px;left:14px;width:12px;height:12px;background:#020504}
.principles-layout .node-rail button b{z-index:3;top:13px;right:14px;color:#d8ffe0;font-size:9px;text-shadow:0 2px 8px #000}
.principles-layout .node-rail button span{position:absolute;z-index:3;left:14px;right:12px;bottom:13px;font:700 clamp(11px,1vw,14px)/1.25 ui-monospace,monospace;text-shadow:0 2px 12px #000,0 0 8px #000}
.principles-layout .node-rail button:hover,.principles-layout .node-rail button:focus-visible{border-color:#00ff00b8;box-shadow:0 0 24px #00ff002e,0 14px 32px #000b;transform:translateY(-3px)}
.principles-layout .node-rail button:hover img,.principles-layout .node-rail button:focus-visible img{filter:saturate(1.12) contrast(1.06);transform:scale(1.025)}
.principles-layout .node-rail button.active{border-color:var(--green);box-shadow:inset 0 0 0 1px #00ff006b,0 0 25px #00ff0038,0 14px 32px #000b}
.principles-layout .node-rail button.active img{filter:brightness(1.08) saturate(1.08) contrast(1.09)}
.principles-layout .node-rail button.active::before{content:"ACTIVE";position:absolute;z-index:3;top:13px;left:34px;color:var(--green);font:700 7px/1 ui-monospace,monospace;letter-spacing:.14em;text-shadow:0 0 8px #000}
.principles-layout .node-rail button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.principles-art{position:relative;display:block;width:100%;aspect-ratio:3/2;max-height:none;align-self:center;border:1px solid #00eaff4d;box-shadow:0 24px 60px #000b,0 0 35px #00eaff12}
.principles-art::after{content:"SELECTED SPECIMEN";position:absolute;right:14px;bottom:12px;padding:6px 8px;border:1px solid #00eaff66;background:#010504c7;color:var(--cyan);font:700 7px/1 ui-monospace,monospace;letter-spacing:.16em}
.principles-art img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;background:#010302;opacity:1;transform:scale(1);transition:opacity .28s ease,transform .28s ease}
.principles-art img.is-changing{opacity:.16;transform:scale(.995)}

@media(max-width:1100px) and (min-width:761px){
  .principles-layout{grid-template-columns:1fr;gap:24px}
  .principles-layout .node-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .principles-art{width:min(760px,100%);aspect-ratio:3/2;margin-inline:auto}
}



/* 2026 desktop refinement: intentional title, signal-routing workflow, and
   purpose-built outbound portal artwork. */
.entry h1 span{display:block;white-space:nowrap}
.machine>.section-head{display:flex;grid-template-columns:none;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3vw,44px)}
.process{position:relative;list-style:none;margin:0 auto clamp(24px,3vw,42px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.5vw,56px) clamp(28px,4vw,64px);width:min(1180px,100%);counter-reset:process}
.process li{position:relative;display:grid;place-items:center;min-width:0;min-height:64px;padding:12px 9px;border:1px solid #a855f78f;background:linear-gradient(135deg,#a855f722,#24073766);box-shadow:inset 0 0 20px #a855f71f,0 0 20px #0008;color:var(--ink);font:700 clamp(9px,.85vw,11px)/1.25 ui-monospace,monospace;text-align:center;text-transform:uppercase;letter-spacing:.06em;counter-increment:process}
.process li::before{content:"0" counter(process);position:absolute;top:5px;left:7px;color:#c792ff;font-size:7px;letter-spacing:.1em}
.process li::after{content:"→";position:absolute;left:calc(100% + 8px);top:50%;width:calc(clamp(28px,4vw,64px) - 16px);color:var(--orange);font-size:20px;line-height:1;text-align:center;transform:translateY(-50%);text-shadow:0 0 12px var(--orange)}
.process li:nth-child(4){grid-column:4}.process li:nth-child(5){grid-column:4;grid-row:2}.process li:nth-child(6){grid-column:3;grid-row:2}.process li:nth-child(7){grid-column:2;grid-row:2}.process li:nth-child(8){grid-column:1;grid-row:2}
.process li:nth-child(4)::after{content:"↓";left:50%;top:calc(100% + 7px);width:auto;transform:translateX(-50%)}
.process li:nth-child(n+5)::after{content:"←";left:auto;right:calc(100% + 8px)}
.process li:last-child{color:#001500;border-color:var(--green);background:var(--green);box-shadow:0 0 25px #00ff0047;font-weight:900}.process li:last-child::before{color:#064d08}.process li:last-child::after{display:none}
.portal-display{position:relative;display:block;width:min(1024px,100%);margin-inline:auto;overflow:hidden;border:1px solid #00eaff45;background:#010302;box-shadow:0 24px 80px #000c,0 0 35px #00eaff0d}
.portal-display>img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.portal-links{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
.portal-link{--portal-accent:var(--green);position:relative;min-width:0;border:1px solid transparent;text-decoration:none;transition:border-color .3s,background .3s,box-shadow .3s}
.portal-link--projects{--portal-accent:var(--orange)}.portal-link--about{--portal-accent:var(--purple)}
.portal-link small,.portal-link>span{position:absolute;z-index:2;left:50%;transform:translateX(-50%);white-space:nowrap;text-shadow:0 2px 10px #000}
.portal-link small{top:4%;color:var(--portal-accent);font-size:8px;letter-spacing:.18em;opacity:.72}.portal-link>span{bottom:5%;padding:clamp(7px,1vw,10px) clamp(8px,1.3vw,14px);border:1px solid color-mix(in srgb,var(--portal-accent) 55%,transparent);background:#010503c7;color:#fff;font-size:clamp(7px,.8vw,10px);letter-spacing:clamp(.08em,.15vw,.18em);opacity:.88}.portal-link i{color:var(--portal-accent);font-style:normal}
.portal-link:hover,.portal-link:focus-visible{border-color:var(--portal-accent);background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--portal-accent) 10%,transparent));box-shadow:inset 0 0 30px color-mix(in srgb,var(--portal-accent) 17%,transparent),0 0 22px color-mix(in srgb,var(--portal-accent) 22%,transparent)}
.portal-link:hover>span,.portal-link:focus-visible>span{opacity:1}.portal-link:focus-visible{z-index:1;outline:3px solid var(--portal-accent);outline-offset:-3px}


@media(min-width:761px){
  .entry-copy{width:min(48vw,650px)}
  .entry h1{font-size:clamp(44px,4.45vw,78px);line-height:.88;letter-spacing:-.055em;margin:.28em 0 .3em}
  .entry h1 span:first-child{font-size:.72em;letter-spacing:.02em;margin-bottom:.08em}
  .entry-copy>p:not(.kicker){max-width:590px;margin:0}
  .machine{padding-left:max(5vw,20px);padding-right:max(5vw,20px)}
  .machine-art{width:min(1180px,100%);height:auto;aspect-ratio:16/9;margin-inline:auto}
  .machine-art img{height:auto;max-height:min(68vh,680px)}
  /* Keep the portrait portal artwork as one proportional coordinate system.
     Sizing the shared wrapper keeps all three link overlays registered to the
     image while preventing this navigation panel from becoming another hero. */
  .portal-display--desktop{
    width:min(100%,calc(clamp(450px,64dvh,680px) * 2 / 3));
    aspect-ratio:2/3;
  }
  .portal-display--desktop>img{width:100%;height:100%;object-fit:contain}
  .portals .exit-experience{margin-top:clamp(24px,3dvh,36px)}
}
@media(min-width:1500px){
  .process{grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(24px,2vw,36px)}
  .process li{grid-column:auto!important;grid-row:auto!important;min-height:68px}
  .process li::after,.process li:nth-child(n+5)::after{content:"→";display:block;left:calc(100% + 5px);right:auto;top:50%;width:calc(clamp(24px,2vw,36px) - 10px);transform:translateY(-50%)}
  .process li:last-child::after{display:none}
}


/* Art Stream taxonomy: consistent frames with artwork-specific composition. */
.art-stream .stream{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,clamp(210px,26vh,270px));
  grid-template-areas:"organic machine system" "organic place entity";
  gap:clamp(12px,1.4vw,22px);
  overflow:visible;
  margin:0;
  padding:0;
}
.stream-card{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;height:100%;margin:0;overflow:hidden;border:1px solid #a855f747;background:#010302;transition:border-color .35s,box-shadow .35s}
.stream-card--organic{grid-area:organic}.stream-card--machine{grid-area:machine}.stream-card--system{grid-area:system}.stream-card--place{grid-area:place}.stream-card--entity{grid-area:entity}
.art-stream .stream-card picture{display:block;width:100%;height:100%;min-height:0;overflow:hidden;background:#000}
.art-stream .stream-card img{display:block;width:100%;height:100%;aspect-ratio:auto;object-position:center;filter:saturate(.92);transition:transform .4s,filter .4s}
.stream-card--organic img,.stream-card--machine img,.stream-card--place img{object-fit:cover}
.stream-card--organic img{object-position:center 52%}
.stream-card--system img,.stream-card--entity img{object-fit:contain}
.art-stream .stream-card figcaption{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:12px;padding:12px 14px;border-top:2px solid var(--purple);background:#030706}
.art-stream .stream-card b{font-size:clamp(14px,1.15vw,18px)}
.art-stream .stream-card span{min-width:0;color:var(--dim);font:11px/1.35 system-ui,sans-serif;text-align:right}
@media(hover:hover){.stream-card:hover{border-color:#a855f7a6;box-shadow:0 0 20px #a855f719}.art-stream .stream-card:hover img{filter:saturate(1.04) brightness(1.04);transform:scale(1.01)}}
@media(max-width:1100px) and (min-width:761px){
  .art-stream .stream{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:"organic organic" "machine system" "place entity"}
  .art-stream .stream-card{height:auto}
  .art-stream .stream-card picture{height:auto;aspect-ratio:16/9}
}

/* Mobile layout source of truth: content-driven composition and continuous scroll. */
@media(max-width:760px){
  :root{--experience-header-height:calc(54px + env(safe-area-inset-top))}
  html,.experience-page{overflow-x:clip}
  .experience-nav{height:var(--experience-header-height);padding-top:env(safe-area-inset-top)}
  .quick-sheet{z-index:100}.quick-scrim{z-index:90}

  .entry{display:block;height:auto;min-height:0;padding:clamp(8px,2.5vw,14px) 0 max(32px,env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 70% 20%,#0a281b,#000 62%)}
  .entry>picture{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;background:#010403}
  .entry>picture img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:saturate(1.14) contrast(1.04);animation:none;transform:none}
  .entry::after{background:linear-gradient(0deg,#020504 0%,transparent 48%)}
  .entry-grid{opacity:.35}
  .entry-copy{position:relative;left:auto;bottom:auto;width:auto;margin:-10px 20px 0;padding:24px 0 0 14px}
  .entry h1{font-size:clamp(35px,11.6vw,50px);line-height:.9;letter-spacing:-.065em;margin:.28em 0}
  .entry h1 span{display:block;white-space:nowrap}
  .entry-copy>p:not(.kicker){max-width:36rem;margin:10px 0;font-size:12px;line-height:1.55}
  .entry.entered>picture img{transform:none;filter:saturate(1.2) contrast(1.05)}
  .enter{margin-top:10px;min-height:46px}.scroll-mark{display:none}

  .interface>section{height:auto;min-height:0;padding:48px 20px;scroll-margin-top:calc(var(--experience-header-height) + 10px)}
  .interface>.principles{scroll-margin-top:calc(var(--experience-header-height) + 10px)}
  .section-head{display:block;margin-bottom:24px}
  .section-head p{padding-top:0;margin-top:0}
  .section-head h2,.machine h2{margin-bottom:14px;font-size:clamp(29px,8.7vw,38px)}
  .reveal,.reveal.visible{opacity:1;transform:none;transition:none}
  .desktop-art{display:none}

  .principles .principles-layout{display:block}
  .principles .node-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .principles .node-rail::before{display:none}
  .principles .node-rail button{height:auto;min-height:0;aspect-ratio:4/3;padding:0;overflow:hidden}
  .principles .node-rail button i{top:10px;left:10px;width:11px;height:11px}
  .principles .node-rail button b{top:10px;right:10px}
  .principles .node-rail button span{left:10px;right:8px;bottom:10px;font-size:clamp(9px,2.8vw,12px)}
  .principles .node-rail button.active::before{top:11px;left:28px;font-size:6px}
  .principles .principles-art{display:block;width:100%;min-height:0;aspect-ratio:3/2;margin:18px 0 0}

  .viewer{overflow:visible;touch-action:pan-y pinch-zoom}
  .viewer-images{position:relative;width:100%;height:calc(56.28vw + 34px);min-height:0;max-height:462px;overflow:hidden;background:#000}
  .viewer figure{display:none;position:absolute;inset:0;transform:none!important}
  .viewer figure.active{display:grid;grid-template-rows:minmax(0,1fr) auto;opacity:1;transform:none!important}
  .viewer picture{display:block;min-height:0;overflow:hidden}
  .viewer img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important}
  .viewer figcaption{position:relative;left:auto;bottom:auto;padding:12px 14px 10px;background:#020504;font:800 clamp(20px,6vw,27px)/1 system-ui,sans-serif;letter-spacing:-.035em;text-shadow:none}
  .viewer figcaption span{margin-bottom:5px}
  .viewer-controls{position:relative;left:auto;right:auto;bottom:auto;justify-content:space-between;gap:6px;padding:8px 10px;background:#020504}
  .viewer-controls button{min-height:44px;padding:0 9px}.viewer-controls .explore-image{display:none}.viewer-controls span{flex:0 0 auto}

  .signals ol{display:grid;gap:0;padding-left:32px}
  .signals ol::before{top:8px;bottom:10px;left:7px;width:2px;height:auto}
  .signals li{display:grid;grid-template-columns:62px 1fr;align-items:baseline;gap:8px;padding:0 0 17px}
  .signals li:last-child{padding-bottom:0}.signals li::before{left:-31px;top:3px;width:12px;height:12px}.signals li b{margin:0;font-size:14px}
  .current{display:flex;flex-direction:column;gap:0;background:#030706}
  .current-copy{padding:0!important;background:#050a08!important}
  .signal-status h2{font-size:clamp(34px,10vw,44px)}.building ul{margin-bottom:20px;font-size:16px;line-height:1.75}
  .mobile-slots{display:grid;min-height:0;margin-top:12px;gap:6px;background:transparent}.slots div{padding:14px;border:1px solid #82ffc925}

  /* The desktop stream uses named grid areas and fixed tracks. On phones the
     cards instead participate in normal flow, so artwork—not animation or
     viewport-sized tracks—defines the section height. */
  .interface>.art-stream{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .art-stream .stream{display:flex;flex-direction:column;align-items:stretch;gap:clamp(22px,7vw,30px);width:100%;height:auto;min-height:0;overflow:visible;overscroll-behavior:auto;touch-action:pan-y;margin:0;padding:0;scroll-snap-type:none}
  .art-stream .stream-card{position:static;inset:auto;flex:none;width:82%;max-width:360px;height:auto;min-height:0;grid-template-rows:auto auto;margin:0;translate:none;transform:none;scroll-snap-align:none}
  .art-stream .stream-card:nth-child(odd){align-self:flex-start}
  .art-stream .stream-card:nth-child(even){align-self:flex-end}
  .art-stream .stream-card picture{height:auto;min-height:0;aspect-ratio:16/9}
  .art-stream .stream-card--place picture{aspect-ratio:3/2}
  .art-stream .stream-card picture img,.art-stream .stream-card:first-child picture img{position:static;inset:auto;width:100%;height:100%;max-width:100%;aspect-ratio:auto;transform:none}
  .art-stream .stream-card figcaption{display:block;min-height:0;padding:12px 14px}
  .art-stream .stream-card span{display:block;margin-top:6px;text-align:left}

  .machine>.section-head{display:block}.machine header{margin:0}
  .process{display:flex;flex-direction:column;align-items:stretch;gap:18px;width:100%;margin:22px 0 24px}
  .process li,.process li:nth-child(n){grid-column:auto;grid-row:auto;min-height:42px;padding:10px 12px;white-space:normal}
  .process li::after,.process li:nth-child(n+5)::after{content:"↓";display:block;left:50%;right:auto;top:calc(100% + 3px);width:auto;transform:translateX(-50%);font-size:16px}.process li:last-child::after{display:none}

  .portal-display--desktop{display:none}.mobile-portals{display:grid;grid-template-columns:1fr;gap:24px;width:100%}
  .mobile-portal{--portal-accent:var(--green);display:grid;gap:12px;padding:16px;border:1px solid color-mix(in srgb,var(--portal-accent) 42%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--portal-accent) 8%,#010302),#010302 55%);box-shadow:0 18px 46px #000b}
  .mobile-portal--projects{--portal-accent:var(--orange)}.mobile-portal--about{--portal-accent:var(--purple)}
  .mobile-portal header{display:grid;gap:5px}.mobile-portal small{color:var(--portal-accent);font-size:9px;letter-spacing:.2em}.mobile-portal h3{margin:0;font:800 clamp(32px,10vw,44px)/.92 system-ui,sans-serif;letter-spacing:-.055em}.mobile-portal p{margin:0;color:var(--dim);font:500 13px/1.5 system-ui,sans-serif}
  .mobile-portal-art{display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid color-mix(in srgb,var(--portal-accent) 50%,transparent);background:#000}
  .mobile-portal-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}
  .mobile-portal-cta{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border:1px solid var(--portal-accent);background:color-mix(in srgb,var(--portal-accent) 12%,#010302);color:#fff;text-decoration:none;font:800 10px/1 monospace;letter-spacing:.16em}
  .mobile-portal-cta span{color:var(--portal-accent);font-size:17px}.mobile-portal-art:focus-visible,.mobile-portal-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .exit-experience{margin-top:32px;padding:16px 22px}
}