@charset "UTF-8";
/* Project pages: same arcade chrome, no maze. Loaded after styles.css; overrides the globals that leak (h1, h2, h3, nav, .eyebrow, .project-art). */
.page{background:var(--bg)}
.page-main{position:relative;z-index:2;max-width:var(--max);margin:auto;padding:20px 30px 80px}
.page-hero{padding:30px 0 44px;border-bottom:1px solid #8391cb21;margin-bottom:56px}
.page-hero .eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#ba8acb;margin-bottom:18px}
.status-pill{font:8px var(--mono);letter-spacing:1.5px;padding:5px 9px;border:1px solid;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.status-pill.is-live{color:#b4fff9;border-color:#8ef3ee88;background:#10242ed9}
.status-pill.is-wip{color:#ffd9a8;border-color:#e5ac7388;background:#2a1e1ad9}
.page h1{font-size:clamp(40px,5.2vw,68px);letter-spacing:-2.6px;line-height:1.05;text-shadow:none}
.page h1 span{text-shadow:none}
.page-summary{font-size:17px;line-height:1.8;color:#c2c8df;max-width:62ch;margin:18px 0 22px}
.page-tagrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.page .project-tags span{font-size:8px;padding:6px 8px}
.page-link{display:inline-flex;align-items:center;gap:10px;font:10px var(--mono);letter-spacing:1.5px;color:#b4fff9;border:1px solid #8ef3ee88;background:#10242ed9;padding:12px 16px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:background .2s}
.page-link:hover{background:#18414b}
.page-section{margin-bottom:56px}
.page-section .eyebrow{color:#ba8acb;font-size:9px;margin-bottom:14px}
.page-lede{font-size:16px;line-height:1.85;color:#b5bad0;max-width:68ch;margin:0}
.page-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.page-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.7;color:#b5bad0}
.page-list li::before{content:"▸";position:absolute;left:0;color:var(--cyan)}
.page-mono{font:9px/1.9 var(--mono);letter-spacing:1px;color:#8a93b3;margin:22px 0 0}
.page .hard-part{background:linear-gradient(135deg,#141830,#0d1128);border:1px solid #8399e04d;box-shadow:0 16px 45px #0002,0 0 13px #8f7cf612;padding:30px 32px}
.page .hard-part h2{font-size:28px;letter-spacing:-1px;margin-bottom:14px;max-width:42ch}.page .hard-part h2 em{font-family:Georgia,serif;font-weight:normal;color:#c2b3ec}
.page .hard-part p{font-size:15px;line-height:1.85;color:#b5bad0;margin:0;max-width:70ch}
.page .stack-chips span{font-size:9px;padding:8px 10px;color:#c0c5db;border-color:#8c9ac34d}

/* Retro monitor frames. */
.page-visual{margin-bottom:64px}
.monitor{margin:0 0 18px;background:linear-gradient(135deg,#141830,#0d1128);border:1px solid #8399e04d;box-shadow:0 16px 45px #0002,0 0 13px #8f7cf612,inset 0 0 10px #75eaf306;padding:14px;transition:border-color .3s}
.monitor:hover{border-color:#75eaf377}
.monitor-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 12px;font:8px var(--mono);letter-spacing:1.2px;color:#8398aa}
.monitor-bar>span:first-child{display:flex;gap:4px}.monitor-bar i{width:5px;height:5px;border-radius:50%;background:#778c9f}.monitor-bar i:first-child{background:#db7e9a}.monitor-bar i:last-child{background:#71cbbf}
.monitor-bar>span:nth-child(2){flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.monitor-screen{position:relative;overflow:hidden;background:#0b0e24;border:1px solid #7882b438}
.monitor-screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#080b2018 3px 4px);pointer-events:none;z-index:2}
.monitor-screen>img{display:block;width:100%;height:auto}
.monitor figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding:0 4px;font:8px var(--mono);letter-spacing:1.2px;color:#929ab8}
.demo-badge{position:absolute;top:12px;right:12px;z-index:3;font:8px var(--mono);letter-spacing:1.5px;color:#ffd9a8;border:1px solid #e5ac7388;background:#2a1e1ad9;padding:5px 8px}
/* Full-page captures are tall: crop to a screen's worth and let a hover scroll through the rest. */
.monitor-screen.is-tall{--screen-h:clamp(340px,50vw,600px);height:var(--screen-h)}
.monitor-screen.is-tall::before{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#0b0e24);z-index:1;pointer-events:none}
.monitor-screen.is-tall>img{transition:transform 1.4s ease}
.monitor-screen.is-tall:hover>img{transform:translateY(min(0px,calc(-100% + var(--screen-h))));transition:transform 8s linear}
@media(hover:hover) and (pointer:fine){.monitor:has(.is-tall) .monitor-bar>span:last-child::before{content:"HOVER TO SCROLL   ";color:#6c7f92}}
.page .project-art{height:clamp(260px,42vw,440px);margin:0}

/* CSS dashboards with made-up numbers. */
.mock-dash{display:grid;grid-template-columns:160px minmax(0,1fr);min-height:300px;font:10px var(--mono);color:#7c90a6}
.mock-side{padding:18px 14px;border-right:1px solid #50617533;display:flex;flex-direction:column;gap:13px}.mock-side b{font-size:18px;color:#e1edf1;letter-spacing:-1px;margin-bottom:4px}.mock-side b span{color:var(--cyan)}.mock-side .on{color:#8ce8db}
.mock-body{padding:20px 18px;min-width:0}.mock-title{font-size:14px;color:#d9e6eb;font-family:"Segoe UI",Arial,sans-serif}
.mock-metrics{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.mock-metrics>div{flex:1 1 110px;padding:10px 12px;background:#182534;border:1px solid #3f5d7144}.mock-metrics span{display:block;font-size:7px;letter-spacing:1px;color:#a1b6c7}.mock-metrics b{font-size:24px;font-weight:500;color:#a5dfd7}
.mock-rows{display:grid;gap:6px}.mock-rows div{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:8px 10px;background:#121b2a;border:1px solid #2f4154;color:#a7bccb;min-width:0}
.mock-rows span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-rows .mock-head{background:none;border-color:transparent;color:#6f849a;font-size:8px;letter-spacing:1px;padding-block:2px}
.mock-rows .paid{color:#8aead3}.mock-rows .denied{color:#ff9fb6}.mock-rows .pending{color:#ffc680}.mock-rows .none{color:#6f849a}
.mock-bars{height:64px;display:flex;align-items:end;gap:5px;margin-top:14px;border-bottom:1px solid #53707766}.mock-bars i{flex:1;height:var(--h,60%);background:linear-gradient(#77d9cd,#43657533);border-top:1px solid #a3ece4}
.mock-bars+.mock-rows{margin-top:14px}
.mock-foot{margin-top:14px;padding-top:10px;border-top:1px solid #2f4154;font-size:8px;letter-spacing:1px;color:#7f93a8}

/* Layout helpers. */
.systems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.system{padding:20px 22px;border:1px solid #7882b438;background:#0d1128}.system:last-child:nth-child(odd){grid-column:1/-1}
.system h3{font:10px var(--mono);letter-spacing:2px;color:var(--cyan);margin:0 0 10px}.system p{font-size:13px;line-height:1.75;color:#b5bad0;margin:0}
.shot-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:start;margin:0 0 18px}
.poster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.shot-grid .monitor,.poster-grid .monitor{margin:0}
.page-nav{justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:36px 0 0;border-top:1px solid #8391cb21;font-size:11px;letter-spacing:1.4px}
.page-nav a{color:#c0c5db;padding:8px 0}.page-nav a:hover{color:var(--cyan)}.page-nav a span{color:var(--cyan);margin:0}
.page-back{color:#76cbd8}
.page-main.is-lost{min-height:calc(100svh - 190px);display:flex;flex-direction:column;justify-content:center}
.page-hero.is-solo{border-bottom:0;margin-bottom:0}

@media(max-width:1000px){.page .hard-part h2{font-size:25px}}
@media(max-width:760px){
  .page-main{padding:10px 24px 60px}.page-hero{padding:16px 0 34px;margin-bottom:44px}
  .page-summary{font-size:15px}.page-section{margin-bottom:44px}.page-visual{margin-bottom:48px}
  .page-list,.systems,.shot-grid,.poster-grid{grid-template-columns:1fr}.page .hard-part{padding:22px 20px}.page .hard-part h2{font-size:23px}
  .mock-dash{grid-template-columns:1fr}.mock-side{display:none}
  .monitor-screen.is-tall{height:auto}.monitor-screen.is-tall::before{display:none}.monitor-screen.is-tall:hover>img{transform:none}
  .monitor.is-phone{max-width:320px;margin-inline:auto;width:100%}
  .page-nav{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  .page-main{padding:6px 18px 50px}.page h1{font-size:34px;letter-spacing:-1.6px}.page-summary{font-size:14px}
  .page-list li{font-size:13px}.page .hard-part h2{font-size:21px}.page .hard-part p{font-size:14px}
  .monitor{padding:10px}.mock-dash{font-size:9px}.mock-body{padding:14px 10px}.mock-rows div{grid-template-columns:2fr 1fr 1fr;gap:6px;padding:7px 8px}.mock-rows span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){.monitor-screen.is-tall:hover>img{transform:none}}
/* LWES reader: a demo watermark over the deliberately blurred paid page (shows the feature, leaks nothing). */
.demo-watermark{position:absolute;left:50%;top:46%;z-index:3;transform:translate(-50%,-50%) rotate(-28deg);white-space:nowrap;pointer-events:none;font:700 clamp(13px,2.2vw,24px) var(--mono);letter-spacing:2px;color:#b03a4c70}
/* Audit fixes: silent list markers, readable muted mock text */
.page-list li::before{content:"▸";content:"▸" / ""}
.mock-rows .none{color:#7d92a8}
/* Two real screens side by side */
.pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media(max-width:760px){.pair-grid{grid-template-columns:1fr}}
.solo-phone{max-width:360px;margin:0 auto}