/* 150% console typography. Keep the screen/capture coordinate system unscaled. */
#screen-anchor#screen-anchor{--ui-scale:1.5;--console-header:126px}
#screen-anchor#screen-anchor .topbar{height:var(--console-header)}
#screen-anchor#screen-anchor .brand{font-size:54px;letter-spacing:-3.75px}
#screen-anchor#screen-anchor .brand-star{font-size:16px}
#screen-anchor#screen-anchor .navigation{gap:36px}
#screen-anchor#screen-anchor .navigation a{font-size:25.5px}
#screen-anchor#screen-anchor .status{font-size:15px}
#screen-anchor#screen-anchor .console-layout{height:calc(100% - var(--console-header));grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:5%;padding:24px 4.3% 36px}
#screen-anchor#screen-anchor #main:has(.home-layout){display:flex;flex-direction:column;overflow:hidden}
#screen-anchor#screen-anchor .home-layout{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;padding:0 5px 8px 0}
#screen-anchor#screen-anchor .home-left{display:block}
#screen-anchor#screen-anchor .eyebrow{font-size:13.5px;letter-spacing:1.6px;margin-bottom:18px}
#screen-anchor#screen-anchor h1{font-size:clamp(45px,4.5vw,73.5px);letter-spacing:-2px;line-height:1.1;margin-bottom:20px;text-wrap:balance}
#screen-anchor#screen-anchor .identity{font-size:18px;line-height:1.65}
#screen-anchor#screen-anchor .identity-meta{font-size:13.5px;margin-bottom:26px;gap:22px}
#screen-anchor#screen-anchor .section-label{font-size:13.5px;padding-top:18px;margin-bottom:14px}
#screen-anchor#screen-anchor .skill{min-height:81px;grid-template-columns:48px 1fr 30px;gap:18px;padding:12px 18px 12px 0;isolation:isolate;overflow:hidden;transition:color .24s,background .24s,padding .35s cubic-bezier(.22,1,.36,1)}
#screen-anchor#screen-anchor .skill strong{font-size:24px}
#screen-anchor#screen-anchor .skill-top svg{width:37.5px;height:37.5px}
#screen-anchor#screen-anchor .skill .selected-mark{font-size:15px}
#screen-anchor#screen-anchor .skill-note{font-size:12px;padding-top:16px}
#screen-anchor#screen-anchor .print-dock{flex:0 0 auto;margin-top:22px;gap:12px;padding-top:12px;border-top:1px solid #ffffff24;background:#000}
#screen-anchor#screen-anchor .print-choice strong{font-size:16.5px}
#screen-anchor#screen-anchor .print-choice small{font-size:12px}
#screen-anchor#screen-anchor .dock-object,#screen-anchor#screen-anchor .start-object{width:38px;height:38px}
#screen-anchor#screen-anchor .dock-object svg,#screen-anchor#screen-anchor .start-object svg{width:34px;height:34px}
#screen-anchor#screen-anchor .start{min-height:70.5px;font-size:21px;padding:14px 24px}
#screen-anchor#screen-anchor .companion-caption{font-size:13.5px;flex-wrap:wrap;row-gap:15px}
#screen-anchor#screen-anchor .companion-signal{font-size:12px}
#screen-anchor#screen-anchor .companion-stage{min-height:180px;overflow:hidden}
#screen-anchor#screen-anchor .companion .ip-figure{transform:translate(-50%,-50%) scale(2.325)}
#screen-anchor#screen-anchor .companion-foot{font-size:25.5px}
#screen-anchor#screen-anchor .companion-foot>span:last-child{font-size:13.5px}
#screen-anchor#screen-anchor .info-page{font-size:18px}
#screen-anchor#screen-anchor .info-page :is(p,li){font-size:18px;line-height:1.8}
#screen-anchor#screen-anchor .info-page :is(h2,h3){font-size:27px}
#screen-anchor#screen-anchor .contact-row a{font-size:clamp(20px,2.2vw,36px);overflow-wrap:anywhere}
/* Cards remain a bounded, independently scrolling surface at the larger type scale. */
#module .module-bar{font-size:15px;padding:22px 28px}
#module .close-button{font-size:18px;min-height:44px}
#module .eyebrow,#module .project-date{font-size:13.5px}
#module .module-heading h2{font-size:42px;line-height:1.2;text-wrap:balance}
#module .module-heading>span{font-size:13.5px;white-space:nowrap}
#module .module-description,#module .detail-copy,#module .detail-copy p,#module .project-facts{font-size:18px;line-height:1.85}
#module .detail-copy h3{font-size:24px}
#module .fine,#module .photo-label,#module .photo-hint{font-size:12px}
#module .back-link{font-size:16px;min-height:44px}
#module .project-row{position:relative;isolation:isolate;overflow:hidden;min-height:88px;gap:22px;padding:20px 12px;transition:color .2s,padding .35s cubic-bezier(.22,1,.36,1)}
#module .project-row strong{font-size:22px;font-weight:400}
#module .project-row small{font-size:13.5px}
#module .project-row>.project-row-arrow{font-size:27px;transition:transform .35s}
#module .photo-overview .bounce-cards{height:188px}
#module .photo-overview .bounce-card{width:170px}
/* A directional wipe, not an opacity-only hover. */
#screen-anchor#screen-anchor .skill::before,#module .project-row::before{content:'';position:absolute;inset:0;z-index:-1;background:#d0ebff;transform:scaleY(0);transform-origin:bottom;transition:transform .36s cubic-bezier(.22,1,.36,1);pointer-events:none}
#screen-anchor#screen-anchor .skill:is(:hover,:focus-visible)::before,#module .project-row:is(:hover,:focus-visible)::before{transform:scaleY(1);transform-origin:top}
#screen-anchor#screen-anchor .skill:is(:hover,:focus-visible),#module .project-row:is(:hover,:focus-visible){color:#000;text-shadow:none;padding-left:18px}
#screen-anchor#screen-anchor .skill:is(:hover,:focus-visible) .selected-mark,#module .project-row:is(:hover,:focus-visible) small{color:#264865}
#module .project-row:is(:hover,:focus-visible)>.project-row-arrow{transform:rotate(45deg) translateY(-3px)}
#screen-anchor#screen-anchor .skill[aria-pressed=true]::before{background:#fff;transform:scaleY(1)}
/* Three shutters overlap slightly to prevent subpixel seams. Never scale the real panel. */
.signal-transition{position:fixed;inset:0;z-index:17;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none;overflow:hidden}
.signal-transition[hidden]{display:none}
.signal-shutter{position:relative;margin-right:-1px;background:#94ceff;color:#07131e;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:translateY(-102%)}
.signal-shutter:nth-child(2){background:#cee9ff}.signal-shutter:nth-child(3){background:#6ab4ef}
.signal-shutter span{writing-mode:vertical-rl;font:900 clamp(70px,11vw,190px)/.85 Arial,sans-serif;letter-spacing:-.06em;white-space:nowrap;opacity:.92}
.signal-shutter::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 4px);pointer-events:none}
.signal-scan{position:absolute;inset:0;overflow:hidden;z-index:11;pointer-events:none}
.signal-scan i{position:absolute;left:0;right:0;top:var(--scan-y,-140px);height:120px;background:linear-gradient(transparent 10%,#83cfff09 39%,#d0ebff38 48%,#b9e5ff6b 49%,transparent 50%,#75bcff0d 59%,transparent 90%);mix-blend-mode:screen}
.signal-scan i:nth-child(2){translate:0 15px;opacity:.28}.signal-scan i:nth-child(3){translate:0 23px;opacity:.14}
.signal-grain{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");animation:signal-grain-shift .4s steps(2,end) infinite}
@keyframes signal-grain-shift{to{background-position:63px 41px}}
/* The SVG tracking band and visible sweep use the same clock in effects.js. */
#screen-anchor#screen-anchor .screen::after{background:repeating-linear-gradient(0deg,#ffffff12 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#2c74ff08 0 1px,#ffffff05 1px 2px,#2c74ff08 2px 3px);background-size:100% 3px,3px 100%;animation:none;opacity:.85}
body.showcase-active #module{animation:module-scan-in .55s cubic-bezier(.22,1,.36,1) both}
@keyframes module-scan-in{from{clip-path:inset(0 0 100% 0);translate:0 12px}to{clip-path:inset(0);translate:0 0}}
.project-hover-preview{position:fixed;z-index:16;pointer-events:none;width:210px;aspect-ratio:1.35;border:1px solid #a5d7ff77;background:#07121eee;box-shadow:0 15px 45px #0008;border-radius:8px;overflow:hidden;opacity:0;transition:opacity .18s;will-change:transform;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.project-hover-preview.is-visible{opacity:1}.project-hover-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.project-hover-preview small,.project-hover-preview strong{position:relative;z-index:1;text-shadow:0 1px 8px #000}.project-hover-preview small{font:11px Consolas,monospace;color:#8acbff}.project-hover-preview strong{font-size:18px}.project-hover-preview:has(img){background:#000}.project-hover-preview:has(img) strong{background:#0008;padding:5px}
@media(min-width:760px) and (max-height:900px){
 #screen-anchor#screen-anchor{--console-header:96px}
 #screen-anchor#screen-anchor .console-layout{padding-top:12px;padding-bottom:22px}
 #screen-anchor#screen-anchor h1{font-size:clamp(42px,3.9vw,60px);margin-bottom:12px}
 #screen-anchor#screen-anchor .eyebrow{margin-bottom:10px}
 #screen-anchor#screen-anchor .identity-meta{margin-bottom:14px}
 #screen-anchor#screen-anchor .section-label{padding-top:10px;margin-bottom:8px}
 #screen-anchor#screen-anchor .skill{min-height:60px;padding-block:8px}
 #screen-anchor#screen-anchor .skill-note{padding-top:10px}
 #screen-anchor#screen-anchor .print-dock{margin-top:12px;gap:8px;padding-top:8px}
 #screen-anchor#screen-anchor .start{min-height:60px;padding-block:8px}
 #screen-anchor#screen-anchor .companion .ip-figure{transform:translate(-50%,-50%) scale(1.9)}
}
@media(max-width:759px){
 #screen-anchor#screen-anchor{--console-header:88px}
 #screen-anchor#screen-anchor .topbar{padding-inline:22px;gap:14px}
 #screen-anchor#screen-anchor .brand{font-size:37.5px;letter-spacing:-2px}
 #screen-anchor#screen-anchor .navigation{gap:16px}
 #screen-anchor#screen-anchor .navigation a{font-size:18px}
 #screen-anchor#screen-anchor .console-layout{display:flex;gap:24px;padding:8px 22px 28px;overflow:auto}
 #screen-anchor#screen-anchor #main:has(.home-layout){overflow:visible;flex:none;height:auto}
 #screen-anchor#screen-anchor .home-layout{overflow:visible;flex:none}
 #screen-anchor#screen-anchor .companion{min-height:270px}
 #screen-anchor#screen-anchor .companion .ip-figure{transform:translate(-50%,-50%) scale(.94)}
 #screen-anchor#screen-anchor .companion-caption{font-size:10px}.companion-signal{font-size:10px!important}
 #screen-anchor#screen-anchor .companion-foot{font-size:18px}#screen-anchor#screen-anchor .companion-foot>span:last-child{font-size:10px}
 #screen-anchor#screen-anchor h1{font-size:40px;text-wrap:initial}#screen-anchor#screen-anchor .identity{font-size:16px}
 #screen-anchor#screen-anchor .section-label{font-size:11px}
 #screen-anchor#screen-anchor .skill{min-height:72px}#screen-anchor#screen-anchor .skill strong{font-size:22.5px}
 #screen-anchor#screen-anchor .skill-note{font-size:10px}
 #screen-anchor#screen-anchor .print-dock{position:relative;bottom:auto;padding:14px 0 5px;z-index:3}
 #module .module-bar{font-size:11px;padding:10px 16px}#module .module-heading h2{font-size:30px}
 #module .module-heading{flex-wrap:wrap;gap:12px}#module .module-description,#module .detail-copy p,#module .project-facts{font-size:16px}
 #module .project-row strong{font-size:18px}#module .project-row{gap:12px}#module .photo-overview .bounce-card{width:128px}
 .project-hover-preview{display:none}
}
:root[data-motion="reduced"]{
 .signal-transition,.signal-scan,.signal-grain,.project-hover-preview{display:none!important}
 body.showcase-active #module{animation:none}
 #screen-anchor#screen-anchor .skill,#screen-anchor#screen-anchor .skill::before,#module .project-row,#module .project-row::before,#module .project-row>.project-row-arrow{transition:none}
}
/* Short laptop screens preserve all five choices and the fixed print control. */
@media(min-width:760px) and (max-height:760px){
 #screen-anchor#screen-anchor{--console-header:82px}
 #screen-anchor#screen-anchor .console-layout{padding-top:8px;padding-bottom:16px}
 #screen-anchor#screen-anchor .eyebrow{margin-bottom:6px;font-size:12px}
 #screen-anchor#screen-anchor h1{font-size:46px;margin-bottom:8px}
 #screen-anchor#screen-anchor .identity{font-size:16px;margin-bottom:6px;line-height:1.5}
 #screen-anchor#screen-anchor .identity-meta{margin-bottom:10px;font-size:12px}
 #screen-anchor#screen-anchor .section-label{padding-top:8px;margin-bottom:6px;font-size:12px}
 #screen-anchor#screen-anchor .skill{min-height:56px;padding-block:6px}
 #screen-anchor#screen-anchor .skill-note{font-size:10px;padding-top:8px}
 #screen-anchor#screen-anchor .print-dock{margin-top:8px;gap:6px;padding-top:7px}
 #screen-anchor#screen-anchor .start{min-height:56px}
 #screen-anchor#screen-anchor .companion .ip-figure{transform:translate(-50%,-50%) scale(1.75)}
}
@media(min-width:760px) and (max-height:800px){
 #module .module-bar{padding-block:12px}
 #module .photo-overview{margin-block:10px;padding-block:9px}
 #module .photo-overview .bounce-cards{height:120px;margin-top:3px}
 #module .photo-overview .bounce-card{width:112px;border-width:2px}
 #module .photo-overview .photo-placeholder{padding:8px}
 #module .photo-overview .photo-placeholder b{font-size:27px}
 #module .photo-overview .photo-placeholder span{font-size:9px}
 #module .photo-overview .photo-hint{font-size:10px}
}

/* Module entry is owned by the chapter choreography; never combine it with the old slide/fade. */
body.showcase-active #module#module{animation:none!important;opacity:1;transform:none}
body.showcase-active #module .chapter-transition.in-module{position:absolute;inset:0;z-index:40;display:block;pointer-events:auto;border-radius:inherit;overflow:hidden}
body.showcase-active #module .chapter-transition.in-module~*{position:relative}
/* Animate only the bezel silhouette. The interface itself is never scaled. */
body.screen-returning #screen-anchor#screen-anchor{background:var(--bg)}
body.screen-returning #screen-layer::before{content:'';position:absolute;inset:var(--crt-rim);z-index:50;border-radius:3% / 6%;box-shadow:0 0 0 100vmax #050505;pointer-events:none;transform:scale(1.15);animation:screen-frame-return .42s cubic-bezier(.22,1,.36,1) .24s both}
@keyframes screen-frame-return{from{transform:scale(1.15)}to{transform:scale(1)}}