:root { --ink:#171717; --paper:#f7f6f2; --muted:#696760; --line:#cbc8bf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; font-size:18px; line-height:1.55; }
a { color:inherit; text-underline-offset:.2em; }
a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1.25rem,4vw,4rem); border-bottom:1px solid var(--line); font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.site-header a { text-decoration:none; }
.site-header nav { display:flex; gap:1.4rem; }
.entrance { min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; }
.entrance-stage { display:grid; place-items:center; padding:5rem 1.25rem; }
.entrance-card { width:min(100%,60rem); text-align:center; }
.eyebrow { margin:0 0 1rem; color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
h1,h2 { margin-top:0; font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.02; }
.entrance h1 { margin-bottom:1.5rem; font-size:clamp(3.7rem,11vw,9rem); letter-spacing:-.06em; }
.entrance-copy { max-width:35rem; margin:0 auto 2rem; }
.primary-link { display:inline-block; padding:.8rem 1.1rem; border:1px solid var(--ink); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.primary-link:hover { color:var(--paper); background:var(--ink); }
.entrance-note { margin:0; padding:1rem; color:var(--muted); text-align:center; font-size:.75rem; }
.page,.project-hero { width:min(100% - 2.5rem,72rem); margin-inline:auto; }
.project-hero,.page { padding:clamp(4rem,9vw,8rem) 0 6rem; }
.project-hero h1,.page-heading h1 { margin-bottom:1.5rem; font-size:clamp(3.5rem,9vw,8rem); letter-spacing:-.055em; }
.lede { max-width:46rem; font-size:clamp(1.18rem,2.3vw,1.55rem); }
.project-list { margin-top:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); }
.project-link { display:grid; grid-template-columns:minmax(11rem,.5fr) minmax(0,1.5fr); gap:2rem; padding:1.5rem 0; border-bottom:1px solid var(--line); text-decoration:none; }
.project-link span:first-child { color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-link strong { font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:400; }
.back-link { display:inline-block; margin-bottom:3.5rem; color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.page-heading { max-width:58rem; }
.story { display:grid; grid-template-columns:minmax(12rem,.55fr) minmax(0,1.45fr); gap:clamp(2rem,7vw,7rem); margin-top:clamp(4rem,8vw,7rem); padding-top:1.5rem; border-top:1px solid var(--line); }
.story h2 { font-size:clamp(2rem,4vw,3.5rem); }
.story-copy { max-width:43rem; }
.listen-card { margin-top:clamp(4rem,9vw,8rem); padding:clamp(1.8rem,5vw,3.5rem); border:1px solid var(--ink); }
.listen-card h2 { margin-bottom:1rem; font-size:clamp(2.3rem,5vw,4.5rem); }
.listen-card p { max-width:45rem; }
.video-frame { position:relative; width:100%; aspect-ratio:16/9; margin:clamp(3rem,7vw,5.5rem) 0 2rem; background:#000; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.context-note { max-width:45rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem; }
@media (max-width:700px) { .site-header{align-items:flex-start}.site-header nav{flex-direction:column;gap:.35rem;text-align:right}.project-link,.story{grid-template-columns:1fr;gap:.65rem} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }