:root{--paper:#faf8f5;--ink:#161616;--muted:#767676;--line:rgba(22,22,22,.10);--orange:#ff8a18;--mono:"SFMono-Regular",Consolas,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{position:fixed;z-index:40;inset:0 0 auto;height:54px;padding:0 2.3vw;display:flex;align-items:center;justify-content:space-between;background:rgba(250,248,245,.93);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}header a{color:inherit;text-decoration:none;font-size:11px;font-weight:700}header nav a{margin-left:22px;font-weight:400}header button{border:0;background:none;font:10px var(--mono);color:var(--muted);cursor:pointer}.lang.active{color:var(--ink);font-weight:700}.hero{height:100svh;position:relative;background:#111;color:#fff}.hero>img{width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),transparent 66%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 45%)}.hero-copy{position:absolute;left:4vw;bottom:7vh}.hero-copy span,.chapter-head>span,.context-header>span,.console aside>span,.section-header>span,.essay span{font:10px var(--mono);letter-spacing:.08em;color:var(--muted)}.hero-copy span{color:white}.hero h1{font-size:clamp(95px,15vw,230px);line-height:.69;letter-spacing:-.09em;margin:20px 0}.hero p{font-size:clamp(20px,2.5vw,40px)}.question{padding:14vh 5vw;background:#b52b24;color:white}.question span{font:10px var(--mono)}.question h2{font-size:clamp(48px,7.2vw,112px);line-height:.92;letter-spacing:-.065em;max-width:1500px}.chapter{padding:9rem 4vw;border-top:1px solid var(--line)}.chapter-head{display:grid;grid-template-columns:1fr 5fr 4fr;gap:3vw;margin-bottom:5rem}.chapter-head h2,.context-header h2,.section-header h2,.essay h2{font-size:clamp(48px,6.5vw,102px);line-height:.88;letter-spacing:-.06em;margin:0}.chapter-head p,.context-header p,.section-header p{font-size:17px;line-height:1.55;margin:0}.plate{margin:0;background:#fff;border:1px solid var(--line);padding:20px;position:relative}.plate img{width:100%;max-height:82vh;object-fit:contain}.plate figcaption,.context-card figcaption,.section-plate figcaption{font:10px var(--mono);color:var(--muted);margin-top:12px}.context{padding:8rem 4vw;background:#fff;border-top:1px solid #161616}.context-header{max-width:900px;margin-bottom:4rem}.context-header p{font-family:Georgia,serif;max-width:720px}.context-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.context-card{margin:0;background:var(--paper);border:1px solid var(--line);padding:16px;cursor:zoom-in}.span-12{grid-column:span 12}.span-6{grid-column:span 6}.span-4{grid-column:span 4}.context-card>div{background:#fff;overflow:hidden}.span-12>div{aspect-ratio:21/9}.span-6>div{aspect-ratio:16/10}.span-4>div{aspect-ratio:4/3}.context-card img{width:100%;height:100%;object-fit:contain;filter:grayscale(100%);transition:.3s}.context-card:hover img{filter:none;transform:scale(1.01)}.context-card figcaption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;padding-top:12px;border-top:1px dashed var(--line)}.context-card figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.console{height:100vh;min-height:720px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}.console-grid{height:100%;display:grid;grid-template-columns:360px 1fr}.console aside{padding:38px;border-right:1px solid var(--line);overflow-y:auto;background:#fff}.console aside h2{font-size:28px;line-height:1.05;letter-spacing:-.035em;margin:15px 0}.console aside p{font-size:13px;line-height:1.5;color:var(--muted)}#levelNav{display:flex;flex-direction:column;margin-top:25px}.level-btn{border:0;border-bottom:1px dashed var(--line);background:none;padding:14px 0;display:flex;text-align:left;font:12px var(--mono);color:var(--muted);cursor:pointer;transition:.2s}.level-btn strong{width:35px}.level-btn:hover,.level-btn.active{color:#fff;background:#161616;padding-left:10px}.drawing-stage{position:relative;background:#fcfbfa;padding:50px 55px 70px;display:flex;align-items:center;justify-content:center}.drawing-viewport{width:100%;height:86%;display:flex;align-items:center;justify-content:center}.drawing-viewport img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .2s}.meta{position:absolute;bottom:26px;left:55px;right:55px;border-top:1px dashed var(--line);padding-top:14px;display:flex;justify-content:space-between;font:11px var(--mono);color:var(--muted)}#deepZoom{position:absolute;right:55px;top:28px;background:none;border:0;font:10px var(--mono);color:var(--muted);cursor:pointer}.sections{padding:8rem 4vw;background:var(--paper);border-top:1px solid var(--line)}.section-header{max-width:900px;margin-bottom:3rem}.section-ribbon{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:30px}.section-plate{margin:0;position:relative;flex:0 0 92vw;min-height:72vh;background:white;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:center;cursor:zoom-in}.section-plate img{max-width:100%;max-height:68vh;object-fit:contain}.dark{background:#111;color:#f5f2eb}.image{margin:0 0 5rem}.image img{width:100%;max-height:92vh;object-fit:cover}.pair{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:5rem}.pair img{width:100%;aspect-ratio:16/10;object-fit:cover}.essay{min-height:80vh;background:#111;color:#f6f2e9;display:flex;align-items:center;padding:8vw}.essay h2{font-family:Georgia,serif;font-style:italic;font-weight:400}.essay p{font:16px var(--mono);color:#aaa}.essay a{display:inline-block;color:white;text-decoration:none;border:1px solid #777;padding:12px 15px;margin:20px 10px 0 0;font:10px var(--mono)}footer{padding:60px 4vw;display:flex;justify-content:space-between;font:11px var(--mono)}.zoom{cursor:zoom-in}#lightbox{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.97);display:none;align-items:center;justify-content:center}#lightbox.open{display:flex}#lightbox img{max-width:96vw;max-height:94vh;object-fit:contain}#lightbox button{position:absolute;right:20px;top:12px;background:none;border:0;color:#fff;font-size:40px}@media(max-width:1024px){header nav a{display:none}.chapter-head{grid-template-columns:1fr}.context-grid{grid-template-columns:repeat(2,1fr)}.span-12,.span-6,.span-4{grid-column:span 1}.console{height:auto;min-height:0}.console-grid{grid-template-columns:1fr}.console aside{border-right:0;border-bottom:1px solid var(--line)}#levelNav{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.drawing-stage{height:65vh;padding:30px 24px 60px}.meta{left:24px;right:24px}.pair{grid-template-columns:1fr}}@media(max-width:640px){.context-grid,#levelNav{grid-template-columns:1fr}.context-card{grid-column:span 1}.hero h1{font-size:25vw}.section-plate{min-height:55vh}.section-plate img{max-height:50vh}}
/* High-resolution section replacement */
.hero-section{padding:8rem 0 9rem;background:#fff;border-top:1px solid var(--line)}.hero-section-head{padding:0 4vw 3rem}.hero-section-head>span{font:10px var(--mono);letter-spacing:.08em;color:var(--muted)}.hero-section-head h2{font-size:clamp(48px,6vw,96px);line-height:.88;letter-spacing:-.06em;margin:12px 0 0}.hero-section-drawing{margin:0;padding:0 2vw;cursor:zoom-in}.hero-section-drawing img{display:block;width:100%;height:auto;object-fit:contain;image-rendering:auto}.hero-section-drawing figcaption{font:10px var(--mono);color:var(--muted);padding:12px 2vw 0}
/* Make the site studies unmistakably visible */
.context{display:block!important}.context-grid{margin-top:3rem}.context-card{min-height:0}.context-card>div{min-height:240px}.context-card img{opacity:1!important;visibility:visible!important}.context-header:after{content:'SITE STUDIES / ANALYTICAL PLATES';display:block;margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font:10px var(--mono);letter-spacing:.1em;color:var(--muted)}
.section-hero{padding:8rem 4vw;background:#faf8f5;border-top:1px solid var(--line)}.section-hero-head{max-width:850px;margin-bottom:45px}.section-hero-head>span{font:10px var(--mono);color:var(--muted)}.section-hero-head h2{font-size:clamp(48px,6.5vw,100px);line-height:.87;letter-spacing:-.06em;margin:15px 0}.section-hero-head p{font-size:17px;line-height:1.5}.section-master{margin:0;background:#fff;border:1px solid var(--line);padding:18px;cursor:zoom-in}.section-master img{display:block;width:100%;height:auto;max-height:none;image-rendering:auto}.section-master figcaption{font:10px var(--mono);color:var(--muted);margin-top:12px}
