/* One clipped surface owns the four outer corners and the page beneath it. */
:root,body{background:#d1d0cb}
.site-stage{position:fixed;inset:7.7svh 13.7%;transform:skewX(-12deg);border-radius:10px;overflow:hidden;isolation:isolate;background:var(--paper);box-shadow:inset 5px 5px 12px #0002}
.site-stage[data-page=projects]{background:#fceac8}
.site-stage[data-page=contact]{background:var(--ink)}
.entrance,.entrance.exiting{position:absolute;inset:0;height:100%;min-height:0;background:transparent;overflow:visible;pointer-events:none}
.panels{inset:0;isolation:isolate}
.panel-layer{position:absolute;top:0;left:0;width:33.334%;height:100%;pointer-events:none;transition:left 1.15s var(--ease),width 1.15s var(--ease)}
.layer-about{z-index:3}.layer-projects{left:33.333%;z-index:2}.layer-contact{left:66.666%;z-index:1}
.panel{inset:0;width:100%;height:100%;clip-path:none;transform:none!important;border-radius:0;border:0;box-shadow:inset 7px 7px 13px #0003,inset -1px -1px 2px #fff5;pointer-events:auto;overflow:hidden;transition:box-shadow .25s!important}
.panel-contact{box-shadow:inset 7px 7px 13px #0009,inset -1px -1px 2px #fff2}
.panel:hover{box-shadow:inset 5px 5px 11px #0004,inset -1px -1px 2px #fff6}
.panel-content,.panel-projects .panel-content,.panel-contact .panel-content{top:50%;left:10%;width:80%;display:block;transform:translateY(-50%) skewX(12deg);translate:none!important}
.panel-title{font-size:clamp(26px,3.3vw,64px);letter-spacing:-.06em}
.exiting .panel{pointer-events:auto;opacity:1!important}
.exiting .panel-content{opacity:0;transition:opacity .25s}
.exiting .panel-layer{width:150px}
.exiting .layer-about{left:-106px}.exiting .layer-projects{left:-62px}.exiting .layer-contact{left:-18px}
.exiting .panel::after{content:attr(aria-label);position:absolute;right:13px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) skewX(12deg);font-size:14px;font-weight:600;letter-spacing:.5px;opacity:.8}
.exiting .panel[aria-current=page]::after{opacity:1;text-decoration:underline;text-underline-offset:5px}
.exiting .panel:hover,.exiting .panel:focus-visible{box-shadow:inset 0 0 0 3px #2480ff,inset 5px 5px 10px #0003;outline:none}
.detail{position:absolute;inset:0;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:35px calc(5% + 10svh) 30px calc(160px + 10svh);background:transparent!important;transform:skewX(12deg);transform-origin:center;scrollbar-width:thin}
.detail-nav{position:relative;z-index:1;flex-wrap:wrap;gap:20px}
.detail-links{gap:16px;flex-wrap:wrap}
.detail .page-content{margin:65px 0}
.detail .page-content h1{font-size:clamp(45px,6vw,95px);margin-bottom:35px}
.detail .intro-grid{grid-template-columns:1fr;gap:30px}
.detail .intro-grid h2{font-size:clamp(28px,3vw,42px)}
.detail .project-row{grid-template-columns:30px 1fr;gap:12px}
.detail .project-status{grid-column:2;justify-self:start}
.detail .project-row h2{font-size:clamp(23px,2.6vw,35px)}
@media(max-width:1000px){
 .site-stage{inset:8.6svh 2.7%;transform:skewY(-7deg)}
 .panel-layer{left:0;width:100%;height:33.334%;top:0}.layer-projects{left:0;top:33.333%}.layer-contact{left:0;top:66.666%}
 .panel-content,.panel-projects .panel-content,.panel-contact .panel-content{top:50%;left:7%;width:86%;transform:translateY(-50%) skewY(7deg)}
 .panel-title{font-size:clamp(32px,8vw,60px)}
 .exiting .panel-layer{top:0;height:100%;width:120px;transition:left 1.15s var(--ease),top 1.15s var(--ease),height 1.15s var(--ease),width 1.15s var(--ease)}
 .exiting .layer-about{left:-96px}.exiting .layer-projects{left:-72px}.exiting .layer-contact{left:-48px}
 .exiting .panel::after{right:5px;font-size:12px;transform:translateY(-50%) skewY(7deg)}
 .detail{transform:skewY(7deg);padding:30px 6% 40px 90px}
 .detail-nav{gap:14px}.detail-links{gap:10px;font-size:12px}
 .detail .page-content h1{font-size:clamp(34px,8vw,58px);overflow-wrap:normal}
 .detail .intro-grid h2{font-size:25px}.detail .page-content{margin-top:38px}
 .detail-footer{gap:15px;flex-wrap:wrap}.contact-copy{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.panel-layer,.panel,.exiting .panel-content{transition:none!important}}



/* Explicitly requested site motion, including when the browser prefers reduced motion. */
.panel-layer,.exiting .panel-layer{
 transition:left 1.15s var(--ease),top 1.15s var(--ease),height 1.15s var(--ease),width 1.15s var(--ease)!important;
}

/* Faster direction-specific docking; labels appear only after settling. */
.panel-layer,.exiting .panel-layer{
 transition:left .65s var(--ease),top .65s var(--ease),height .65s var(--ease),width .65s var(--ease)!important;
}
.entrance[data-labels=vertical] .panel-content{opacity:0}
.entrance:not(.labels-ready) .panel::after{opacity:0!important}
.exiting .panel[aria-current=page]::after,.panel-title{text-decoration:none!important}
.exiting[data-open=about] .layer-about{left:-106px}
.exiting[data-open=about] .layer-projects{left:calc(100% - 88px);z-index:1}
.exiting[data-open=about] .layer-contact{left:calc(100% - 44px);z-index:2}
.exiting[data-open=projects] .layer-about{left:-106px}
.exiting[data-open=projects] .layer-projects{left:-62px}
.exiting[data-open=projects] .layer-contact{left:calc(100% - 44px)}
.exiting[data-open=contact] .layer-about{left:-106px}
.exiting[data-open=contact] .layer-projects{left:-62px}
.exiting[data-open=contact] .layer-contact{left:-18px}
.exiting[data-open=about] .layer-projects .panel::after,
.exiting[data-open=about] .layer-contact .panel::after,
.exiting[data-open=projects] .layer-contact .panel::after{left:13px;right:auto}
.detail{padding-left:calc(70px + 10svh);padding-right:calc(115px + 10svh)}
.detail[data-page=projects]{padding-left:calc(115px + 10svh);padding-right:calc(70px + 10svh)}
.detail[data-page=contact]{padding-left:calc(160px + 10svh);padding-right:calc(30px + 10svh)}
@media(max-width:1000px){
 .exiting[data-open=about] .layer-about,.exiting[data-open=projects] .layer-about,.exiting[data-open=contact] .layer-about{left:-96px}
 .exiting[data-open=projects] .layer-projects,.exiting[data-open=contact] .layer-projects{left:-72px}
 .exiting[data-open=contact] .layer-contact{left:-48px}
 .exiting[data-open=about] .layer-contact,.exiting[data-open=projects] .layer-contact{left:calc(100% - 24px)}
 .exiting[data-open=about] .layer-projects{left:calc(100% - 48px)}
 .exiting[data-open=about] .layer-projects .panel::after,
 .exiting[data-open=about] .layer-contact .panel::after,
 .exiting[data-open=projects] .layer-contact .panel::after{left:5px;right:auto}
 .detail{padding-left:42px;padding-right:66px}
 .detail[data-page=projects]{padding-left:66px;padding-right:42px}
 .detail[data-page=contact]{padding-left:90px;padding-right:20px}
}
.detail-links a[aria-current=page]{text-decoration:none;font-weight:600}

/* Light separators only at shared edges; retain the layered shadows. */
.site-stage{box-shadow:0 8px 22px #0003,inset 5px 5px 12px #0003}
.panel{border:0}
.panel-about,.panel-projects{border-right:2px solid #a1a1a1}
.panel-layer{box-shadow:7px 0 12px -3px #0008,-2px 0 4px #0003}
@media(max-width:1000px){
 .panel-about,.panel-projects{border-right:0;border-bottom:2px solid #a1a1a1}
 .panel-layer{box-shadow:0 7px 12px -3px #0008,0 -2px 4px #0003}
 .exiting .panel-layer{box-shadow:7px 0 12px -3px #0008,-2px 0 4px #0003}
}
.entrance.exiting .panel{border:0}
.entrance.exiting[data-open=about] .panel-projects,
.entrance.exiting[data-open=projects] .panel-about,
.entrance.exiting[data-open=contact] .panel-about,
.entrance.exiting[data-open=contact] .panel-projects{border-right:2px solid #a1a1a1}


.panel-contact{background:#41413e}
.panel-content{text-align:center}

/* Anthem-inspired alloy, burnt orange, and deep blue surfaces with engraved labels. */
:root{--ink:#122a46;--paper:#e7e7e7;--orange:#e4582e}
:root,body{background:#122a46}
.panel-about{background:#e7e7e7;color:#304d56}
.panel-projects{background:#e4582e;color:#122a46}
.panel-contact{background:#2c4c64;color:#fae4b4}
.panel-title{font-weight:600;text-shadow:0 -1px 1px #0009,0 1px 1px #ffffff70}
.panel-about .panel-title{text-shadow:0 -1px 1px #122a4670,0 1px 1px #ffffffc0}
.panel-projects .panel-title{text-shadow:0 -1px 1px #704c13c0,0 1px 1px #fceac8b0}
.panel-contact .panel-title{text-shadow:0 -2px 2px #081322,0 1px 1px #ffffff30}
.exiting .panel::after{text-shadow:0 -1px 1px #0008,0 1px 1px #ffffff40}
.site-stage{box-shadow:0 12px 30px #0007,inset 5px 5px 12px #0003}
.detail[data-page=contact] .period{color:#f29b0b}


.panel-projects .panel-title{font-weight:700}
.construction-grid{display:grid;gap:24px;margin-top:32px}
.construction-card{border:1px solid #122a4633;padding:20px;border-radius:6px}
.construction-art{height:130px;display:grid;place-items:center;margin-bottom:20px;background:repeating-linear-gradient(135deg,#122a4608 0 12px,transparent 12px 24px);border:1px dashed #122a4644}
.construction-art span{font:600 40px monospace;color:#304d56}
.construction-card h2{font-size:24px;margin:0 0 12px}.construction-card p:last-child{margin-bottom:0}
.contact-placeholder a{overflow-wrap:anywhere;text-underline-offset:4px}

/* Mobile docks follow the desktop pattern along the vertical axis. */
@media(max-width:1000px){
 .entrance.exiting[data-open] .panel-layer{left:0;width:100%;height:150px;box-shadow:0 7px 12px -3px #0008,0 -2px 4px #0003}
 .exiting[data-open=about] .layer-about,
 .exiting[data-open=projects] .layer-about,
 .exiting[data-open=contact] .layer-about{top:-110px}
 .exiting[data-open=projects] .layer-projects,
 .exiting[data-open=contact] .layer-projects{top:-70px}
 .exiting[data-open=contact] .layer-contact{top:-30px}
 .exiting[data-open=about] .layer-projects{top:calc(100% - 80px)}
 .exiting[data-open=about] .layer-contact,
 .exiting[data-open=projects] .layer-contact{top:calc(100% - 40px)}
 .entrance.exiting[data-open] .panel::after{left:0;right:0;top:auto;bottom:11px;writing-mode:horizontal-tb;transform:skewY(7deg);text-align:center;font-size:14px;line-height:18px}
 .entrance.exiting[data-open=about] .layer-projects .panel::after,
 .entrance.exiting[data-open=about] .layer-contact .panel::after,
 .entrance.exiting[data-open=projects] .layer-contact .panel::after{top:11px;bottom:auto}
 .entrance.exiting[data-open] .panel{border:0}
 .entrance.exiting[data-open=about] .panel-projects,
 .entrance.exiting[data-open=projects] .panel-about,
 .entrance.exiting[data-open=contact] .panel-about,
 .entrance.exiting[data-open=contact] .panel-projects{border-bottom:2px solid #a1a1a1}
 .detail[data-page]{height:auto;padding:30px 7%}
 .detail[data-page=about]{top:40px;bottom:80px}
 .detail[data-page=projects]{top:80px;bottom:40px}
 .detail[data-page=contact]{top:120px;bottom:0}
}


/* Keep scrolling available while showing a compact cue only for overflow. */
.detail{scrollbar-width:none;padding-bottom:76px}
.detail::-webkit-scrollbar{display:none}
@media(min-width:1001px){.detail[data-page=about] .page-content h1,.detail[data-page=contact] .page-content h1{font-size:clamp(38px,4.2vw,64px)}}
.scroll-hint{position:absolute;z-index:12;left:50%;bottom:16px;transform:translateX(-50%) skewX(12deg);width:38px;height:38px;border:1px solid #a1a1a180;border-radius:50%;background:#e7e7e7;color:#122a46;box-shadow:0 3px 12px #0004;font:24px/1 sans-serif;display:grid;place-items:center}
.scroll-hint[hidden]{display:none}
.scroll-hint:hover{background:#fff}
@media(max-width:1000px){
 .detail[data-page]{padding-bottom:76px}
 .scroll-hint{transform:translateX(-50%) skewY(7deg)}
 .site-stage[data-page=about] .scroll-hint{bottom:96px}
 .site-stage[data-page=projects] .scroll-hint{bottom:56px}
}
.scroll-hint{padding:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s}
.scroll-hint.is-visible{opacity:.75;visibility:visible;pointer-events:auto;transition:opacity .28s ease,visibility 0s}
.scroll-hint svg{display:block}
.detail-footer{justify-content:flex-end;text-align:right}