/* Project reading layout; original art and media retain their proportions. */
:root{--header-height:56px;--section-offset:126px}
html{scroll-padding-top:0}
body>header{position:sticky;top:0;z-index:130;background:#101614f5;backdrop-filter:blur(16px)}
.site-rail{z-index:140}
.project-nav{top:var(--header-height);z-index:100;padding-inline:7%;gap:28px;background:#101614f5}
.project-nav a{position:relative;transition:color .2s}
.project-nav a[aria-current="location"]{color:#e5c58e}
.project-nav a[aria-current="location"]:after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:2px;background:#c7ab78}
main [id]{scroll-margin-top:var(--section-offset)}
.reading-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none;transform-origin:left;transform:scaleX(0);background:#e1c79b}
.project-heading h1{font-size:clamp(52px,6.4vw,94px);font-weight:450;line-height:1.12;letter-spacing:.08em}
.project-heading{margin-top:30px;gap:6vw}
.project-description>p{max-width:42em;line-height:1.95;color:#b9c0b9;font-size:14px}
.project-intro{padding-bottom:32px}
.project-outline{display:grid;grid-template-columns:1.1fr 2fr;gap:40px;margin:0 7% 38px;border-top:1px solid #394039;border-bottom:1px solid #394039;padding:20px 0;color:#a8b1a8}
.outline-label{margin:0;font:10px/1.7 monospace;letter-spacing:.18em;align-self:center}
.outline-label span{display:block;font:12px/1.7 sans-serif;letter-spacing:.04em;margin-top:5px;color:#d4d8ce}
.project-outline nav{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap}
.project-outline a{font-size:12px;line-height:1.8;color:#d4d8ce;display:flex;align-items:center;gap:9px;padding:7px 0}
.project-outline a span{font:10px monospace;color:#9a8b6e}
.project-outline a:hover{color:#efc683}
.project-hero img{width:100%;height:auto}
.section-head .eyebrow{color:#b8a178;font-size:10px;letter-spacing:.2em}
.section-head h2{font-size:clamp(26px,3vw,40px);font-weight:450;line-height:1.4}
.section-head h2>span{display:block;font-size:12px;font-weight:400;letter-spacing:.1em;margin:12px 0 0;color:#9ba897}
.section-note{max-width:65ch;line-height:1.9;color:#a6b0a4}
.stage{scroll-margin-top:var(--section-offset);border-top:1px solid #394039;padding-top:28px}
.stage-heading{margin-bottom:26px;gap:26px}
.stage-heading h3{font-size:23px;font-weight:450;letter-spacing:.04em}
.stage-heading p{line-height:1.9;color:#a6b0a4}
.site-rail .directory-sub a[aria-current="location"]{color:#fff;background:#334039;border-left-color:#dba34f}
.site-rail .directory-sub .stage-link{font-size:10px;padding-left:20px}
.next-project{transition:background .25s;padding-inline:22px}
.next-project:hover{background:#1d2722}
:is(a,button,input):focus-visible{outline:2px solid #e1bf85;outline-offset:4px}
.home-shell .strip-footer{color:#a5afa1}
.home-shell .work-strip.is-selected .strip-label>p{color:#d4dbd0}
@media(max-width:760px){
 :root{--header-height:58px;--section-offset:126px}
 .project-nav{padding-inline:5%;gap:19px}
 .project-heading{gap:18px;margin-top:26px}
 .project-heading h1{font-size:52px}
 .project-description>p{font-size:13px}
 .project-intro{padding-bottom:24px}
 .project-outline{grid-template-columns:1fr;gap:13px;margin:0 5% 25px;padding:17px 0}
 .outline-label{display:flex;justify-content:space-between;align-items:center;font-size:8px;gap:15px}
 .outline-label span{font-size:10px;margin:0;letter-spacing:0}
 .project-outline nav{justify-content:flex-start;gap:12px 20px}
 .project-outline a{font-size:11px;gap:6px}
 .stage-heading h3{font-size:21px}
 .next-project{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){.project-nav a,.next-project{transition:none}}
/* Paired architectural reference sheets keep every module visible. */
.module-group{margin:0 0 42px}.module-group:last-child{margin-bottom:0}
.module-group h4{font-size:16px;font-weight:450;color:#d7dacc;margin:0 0 20px}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.process .stage .module-grid .image-button{background:#fff}
.process .stage .module-grid img{width:100%;height:auto;object-fit:contain}
#spawn-point .art{margin-bottom:35px}
@media(max-width:720px){.module-grid{grid-template-columns:1fr;gap:30px}.module-group{margin-bottom:36px}}

/* Lead each project with its film before stills and process material. */
.project-outline + .walkthrough{padding-top:12px}
.walkthrough + .project-hero{margin-top:56px}
@media(max-width:760px){.walkthrough + .project-hero{margin-top:32px}}