.project-page{ background:var(--paper); cursor:auto; }
.project-topbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 6vw; border-bottom:1px solid var(--line-strong); }
.project-logo{ width:92px; height:92px; display:block; }
.project-logo img{ width:100%; height:100%; object-fit:contain; }
.project-back,.project-index-link,.project-next{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--blueprint); }
.project-back:hover,.project-index-link:hover,.project-next:hover{ color:var(--rust); }
.project-hero{ padding:clamp(80px,13vw,170px) 6vw 90px; border-bottom:1px solid var(--line-strong); background:repeating-linear-gradient(0deg,transparent,transparent 63px,var(--line) 63px,var(--line) 64px),repeating-linear-gradient(90deg,transparent,transparent 63px,var(--line) 63px,var(--line) 64px); }
.project-kicker,.project-scope span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--rust); text-transform:uppercase; }
.project-hero h1{ max-width:820px; margin:26px 0 16px; font-family:var(--font-display); font-size:clamp(52px,6.25vw,96px); font-weight:400; line-height:.92; letter-spacing:-.02em; }
.project-subtitle{ font-family:var(--font-display); font-size:clamp(22px,2.8vw,36px); color:var(--blueprint); }
.project-index-link{ display:inline-block; margin-top:54px; padding-bottom:7px; border-bottom:1px solid var(--line-strong); }
.project-content{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:7vw; padding:90px 6vw 140px; align-items:start; }
.project-image{ margin:0; }
.project-image-frame{ position:relative; }
.project-image img{ display:block; width:100%; height:auto; max-height:none; object-fit:contain; object-position:center; border:1px solid var(--line-strong); background:var(--paper-dim); cursor:zoom-in; }
.project-image-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:18px; pointer-events:none; }
.project-image-button{ width:42px; height:42px; border:1px solid rgba(33,31,26,.42); background:rgba(245,241,228,.62); color:var(--ink); font-family:var(--font-mono); font-size:20px; line-height:1; cursor:pointer; pointer-events:auto; backdrop-filter:blur(3px); transition:background .25s ease,color .25s ease,border-color .25s ease; }
.project-image-button:hover{ background:rgba(33,31,26,.78); color:var(--paper); border-color:var(--ink); }
.project-image-count{ align-self:flex-end; padding:7px 9px; background:rgba(245,241,228,.72); color:var(--blueprint); font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; }
.project-image-zoom{ position:absolute; right:18px; bottom:18px; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(33,31,26,.42); background:rgba(245,241,228,.62); color:var(--ink); cursor:zoom-in; backdrop-filter:blur(3px); transition:background .25s ease,color .25s ease,border-color .25s ease; }
.project-image-zoom span{ position:relative; width:16px; height:16px; border:2px solid currentColor; border-radius:50%; }
.project-image-zoom span::after{ content:""; position:absolute; width:8px; height:2px; right:-6px; bottom:-3px; background:currentColor; transform:rotate(45deg); transform-origin:left center; }
.project-image-zoom:hover{ background:rgba(33,31,26,.78); color:var(--paper); border-color:var(--ink); }
.project-image figcaption{ margin-top:12px; font-family:var(--font-mono); font-size:10px; color:var(--khaki-deep); letter-spacing:.04em; }
.lightbox-open{ overflow:hidden; }
.project-lightbox{ position:fixed; inset:0; z-index:100; display:block; overflow-y:auto; overflow-x:hidden; padding:64px 80px 48px; background:rgba(20,19,16,.9); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease,visibility .28s ease; }
.project-lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.project-lightbox-figure{ display:grid; gap:12px; width:min(92vw,1400px); margin:0 auto; }
.project-lightbox-figure img{ display:block; width:min(92vw,1400px); max-width:100%; height:auto; max-height:none; object-fit:contain; background:var(--paper); border:1px solid rgba(245,241,228,.4); }
.project-lightbox.is-user-zoomed .project-lightbox-figure img{ width:calc(92vw * var(--image-zoom)); max-width:none; max-height:none; }
.project-lightbox-figure figcaption{ display:flex; justify-content:space-between; gap:20px; color:var(--paper); font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; }
.project-lightbox-close,.project-lightbox-arrow{ position:fixed; z-index:2; display:grid; place-items:center; border:1px solid rgba(245,241,228,.52); background:rgba(245,241,228,.18); color:var(--paper); cursor:pointer; backdrop-filter:blur(4px); transition:background .25s ease,color .25s ease; }
.project-lightbox-close{ top:24px; right:28px; width:44px; height:44px; font-size:28px; font-weight:300; }
.project-lightbox-zoom{ position:fixed; z-index:2; top:24px; left:50%; display:flex; align-items:center; gap:8px; padding:7px 10px; transform:translateX(-50%); border:1px solid rgba(245,241,228,.42); background:rgba(20,19,16,.72); color:var(--paper); font-family:var(--font-mono); font-size:11px; backdrop-filter:blur(4px); }
.project-lightbox-zoom button{ width:25px; height:25px; border:1px solid rgba(245,241,228,.45); background:rgba(245,241,228,.12); color:inherit; font:inherit; font-size:16px; line-height:1; cursor:pointer; }
.project-lightbox-zoom button:hover{ background:var(--paper); color:var(--ink); }
.project-lightbox-zoom input{ width:130px; accent-color:var(--rust); cursor:pointer; }
.project-lightbox-zoom output{ min-width:42px; text-align:center; }
.project-lightbox-arrow{ top:50%; width:48px; height:58px; transform:translateY(-50%); font-family:var(--font-mono); font-size:22px; }
.project-lightbox-prev{ left:24px; }
.project-lightbox-next{ right:24px; }
.project-lightbox-close:hover,.project-lightbox-arrow:hover{ background:var(--paper); color:var(--ink); }
.project-copy{ position:sticky; top:40px; }
.project-copy>p{ font-family:var(--font-display); font-size:clamp(18px,1.5vw,22px); line-height:1.3; margin:12px 0 24px; }
.project-ledger{ display:grid; gap:0; border-top:1px solid var(--line-strong); }
.project-ledger>div{ display:grid; grid-template-columns:120px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.project-ledger span,.project-scope span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--rust); }
.project-ledger strong{ font-family:var(--font-mono); font-size:12px; line-height:1.55; font-weight:400; color:var(--blueprint); }
.project-scope{ display:grid; gap:8px; margin-top:22px; margin-bottom:18px; padding:16px 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); }
.project-scope strong{ font-family:var(--font-mono); font-size:12px; line-height:1.65; font-weight:400; color:var(--blueprint); }
.project-next{ display:inline-block; margin-top:24px; padding-bottom:7px; border-bottom:1px solid var(--line-strong); }
@media(max-width:1024px){ .project-content{ grid-template-columns:1fr; gap:52px; padding:72px 5vw 110px; }.project-copy{ position:static; max-width:760px; }.project-image-button,.project-image-zoom{ width:46px; height:46px; } }
@media(max-width:800px){ .project-topbar{ padding:12px 6vw; }.project-logo{ width:72px; height:72px; }.project-back{ font-size:10px; }.project-content{ grid-template-columns:1fr; padding-top:58px; }.project-copy{ position:static; }.project-hero{ padding-top:90px; }.project-image img{ max-height:none; }.project-ledger>div{ grid-template-columns:100px 1fr; gap:12px; }.project-lightbox{ padding:58px 24px 32px; }.project-lightbox-figure{ width:92vw; margin:0; }.project-lightbox-figure img{ width:92vw; max-width:92vw; max-height:none; }.project-lightbox.is-user-zoomed .project-lightbox-figure img{ width:calc(92vw * var(--image-zoom)); }.project-lightbox-zoom{ top:14px; }.project-lightbox-zoom input{ width:86px; }.project-lightbox-close{ top:14px; right:14px; }.project-lightbox-prev{ left:10px; }.project-lightbox-next{ right:10px; } }