:root { color-scheme: dark; --page-ink:#070707; --page-panel:rgba(18,18,19,.92); --page-line:rgba(255,255,255,.2); --page-text:#f1f1ed; --page-muted:#aaa9a3; --page-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; --page-text-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; --page-mono:"SFMono-Regular","SF Mono",ui-monospace,Menlo,Monaco,Consolas,monospace; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--page-ink); }
body { min-height:100vh; margin:0; background:var(--page-ink); color:var(--page-text); font-family:var(--page-text-family); }
.project-page { position:relative; isolation:isolate; display:grid; min-height:100svh; grid-template-rows:auto 1fr auto; overflow:hidden; padding:clamp(1.25rem,3vw,2.75rem) clamp(1.25rem,7vw,10rem); }
.project-page::before { position:absolute; z-index:-2; inset:0; content:""; background:url("/assets/hero-forge-wide.png") 58% center/cover no-repeat; filter:grayscale(1) contrast(1.08) brightness(.22); }
.project-page::after { position:absolute; z-index:-1; inset:0; content:""; pointer-events:none; background:radial-gradient(ellipse 64% 58% at 58% 42%,rgba(0,0,0,.22),rgba(0,0,0,.9) 90%),linear-gradient(90deg,rgba(0,0,0,.64),transparent 62%,rgba(0,0,0,.42)); }
.project-header,.project-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.project-mark { display:inline-flex; width:2.15rem; height:2.15rem; align-items:center; justify-content:center; }
.project-mark img { width:1.65rem; height:1.65rem; filter:grayscale(1) brightness(1.8); }
.project-back,.project-footer { color:var(--page-muted); font:500 .58rem/1.4 var(--page-mono); letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.project-back:hover,.project-back:focus-visible,.project-footer a:hover,.project-footer a:focus-visible { color:var(--page-text); outline:none; }
.project-record { align-self:center; width:min(100%,57rem); margin:clamp(3.5rem,10vh,7rem) 0; padding:clamp(1.45rem,4vw,3.25rem); border:1px solid var(--page-line); border-radius:.85rem; background:linear-gradient(145deg,rgba(28,28,29,.92),rgba(7,7,7,.9)); box-shadow:0 1.5rem 5rem rgba(0,0,0,.42); }
.project-kicker,.project-discipline { margin:0; color:var(--page-muted); font:500 .6rem/1.4 var(--page-mono); letter-spacing:.14em; text-transform:uppercase; }
.project-title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1rem 0 1.1rem; border-bottom:1px solid var(--page-line); }
.project-title-row h1 { max-width:12ch; margin:0; font:600 clamp(2.8rem,7vw,6.4rem)/.9 var(--page-display); letter-spacing:-.065em; }
.project-title-row p { margin:0 0 .3rem; color:var(--page-text); font:500 .58rem/1.35 var(--page-mono); letter-spacing:.13em; text-align:right; text-transform:uppercase; }
.project-discipline { margin-top:.8rem; color:#d2d1cb; }
.project-copy { display:grid; gap:1rem; max-width:43rem; margin-top:clamp(1.5rem,3vw,2.45rem); }
.project-copy p { margin:0; color:var(--page-muted); font-size:clamp(.88rem,1.2vw,1rem); line-height:1.72; }
.project-copy .project-summary { color:var(--page-text); font-size:clamp(1.12rem,1.85vw,1.5rem); line-height:1.38; }
.project-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:clamp(1.75rem,3vw,2.6rem) 0 0; border:1px solid var(--page-line); background:var(--page-line); }
.project-facts div { min-height:8rem; padding:1.15rem; background:rgba(8,8,8,.76); }
.project-facts dt { color:var(--page-muted); font:500 .54rem/1.4 var(--page-mono); letter-spacing:.12em; text-transform:uppercase; }
.project-facts dd { margin:.8rem 0 0; color:var(--page-text); font-size:.78rem; line-height:1.58; }
.project-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.6rem,3vw,2.5rem); }
.project-button { display:inline-flex; min-height:2.75rem; align-items:center; gap:.55rem; padding:.65rem .82rem; border:1px solid var(--page-line); border-radius:.45rem; color:var(--page-text); font:500 .56rem var(--page-mono); letter-spacing:.12em; text-decoration:none; text-transform:uppercase; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.project-button-primary { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.56); }
.project-button-secondary { background:rgba(0,0,0,.24); }
.project-button:hover,.project-button:focus-visible { border-color:#fff; background:rgba(255,255,255,.18); outline:none; transform:translateY(-1px); }
.project-footer { padding-top:1.1rem; border-top:1px solid var(--page-line); }
.project-footer a { color:var(--page-muted); text-decoration:none; }
.project-page-missing { display:grid; align-content:center; gap:1.25rem; }
.project-page-missing h1 { max-width:12ch; margin:0; font:600 clamp(3rem,8vw,7rem)/.9 var(--page-display); letter-spacing:-.065em; }
@media (max-width:640px) { .project-page { padding:1.2rem; } .project-page::before { background-position:65% center; } .project-record { margin:2.5rem 0; padding:1.25rem; } .project-title-row { display:block; } .project-title-row p { margin-top:.8rem; text-align:left; } .project-title-row h1 { font-size:clamp(2.85rem,14vw,4.8rem); } .project-facts { grid-template-columns:1fr; } .project-facts div { min-height:0; } .project-footer { align-items:flex-start; flex-direction:column; gap:.45rem; } }
@media (max-height:540px) and (min-aspect-ratio:1/1) { .project-page { padding:1rem 8vw; } .project-record { width:min(100%,45rem); margin:1.2rem 0; padding:1.25rem; } .project-title-row h1 { font-size:clamp(2.5rem,5vw,4rem); } .project-copy { gap:.65rem; margin-top:1rem; } .project-copy p { font-size:.72rem; line-height:1.5; } .project-copy .project-summary { font-size:1rem; } .project-facts { margin-top:1rem; } .project-facts div { min-height:4.8rem; padding:.75rem; } .project-facts dd { margin-top:.4rem; font-size:.64rem; } .project-actions { margin-top:1rem; } .project-button { min-height:2.2rem; padding:.5rem .65rem; font-size:.48rem; } }