/* An editorial reading layer for the architectural archive. */
:root{--caption-ink:#514e48;--paper:#f4f3ef;--rule:#deded7}
.project-page header,.project-index header,.portfolio header{border-bottom:1px solid var(--rule)}
.project-page .project-heading{padding:54px 0 36px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px 54px;align-items:center}
.project-heading .project-heading-copy>.label{color:var(--burgundy);font-size:10px;letter-spacing:.1em}
.project-page .project-heading h1{font-size:clamp(36px,4.6vw,70px);line-height:1.04;margin:24px 0;max-width:15ch}
.project-page .project-intro{display:block}
.project-intro>.label{font-size:10px;line-height:1.8;margin-bottom:20px}
.project-page .project-intro p{font-size:16px;line-height:1.7;max-width:48ch;color:var(--caption-ink)}
.project-cover{background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:16px;min-width:0}
.project-cover button{display:block;width:100%;padding:0;border:0;background:transparent;position:relative;cursor:zoom-in}
.project-cover img{width:100%;height:360px;object-fit:contain}
.project-cover figcaption{margin-top:14px;color:var(--caption-ink);font-size:12px;line-height:1.5;text-transform:none}
.project-cover figcaption strong{font-weight:500;color:var(--ink)}
.project-overview{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;padding:28px 0 32px;border-top:1px solid var(--rule)}
.project-overview h2{font:inherit;font-size:11px;color:var(--burgundy);letter-spacing:.07em;text-transform:uppercase;line-height:1.5}
.project-overview p{max-width:82ch;font-size:15px;line-height:1.75;color:var(--caption-ink)}
.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;list-style:none;padding:0}
.project-tags li{padding:6px 11px;border:1px solid var(--rule);border-radius:3px;font-size:10px;color:var(--caption-ink)}
.project-jump{display:flex;align-items:center;gap:6px;overflow:auto;padding:12px 0;margin-bottom:28px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);scrollbar-width:thin}
.project-jump>a{flex:none;font-size:11px;padding:8px 12px;border-radius:3px;color:var(--caption-ink)}
.project-jump>a:hover,.project-jump>a:focus-visible{color:var(--burgundy);background:var(--paper)}
.project-jump>a span{color:#8d8a82;margin-right:7px;font-size:9px}
.sheet-section{scroll-margin-top:28px}
.project-page .sheet-section{padding:32px 0 56px}
.project-page .section-label h2{font-size:clamp(22px,2.5vw,32px);line-height:1.2;max-width:75%}
.section-label>span{letter-spacing:.04em;color:var(--caption-ink)}
.gallery{align-items:start;gap:40px 26px}
.gallery figure{height:auto}
.gallery button,.gallery .single button{height:auto;min-height:0;padding:22px;border:1px solid var(--rule);border-radius:4px;background:#fafaf8;position:relative;cursor:zoom-in}
.gallery img{height:390px;max-height:none;width:100%;object-fit:contain}
.gallery .single img,.gallery .wide img{height:520px;max-height:none}
.gallery button:hover{border-color:#9c9990}
.view-icon{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #d6d5cf;background:#fffffff0;color:var(--ink);border-radius:50%;font-size:19px;font-weight:300;line-height:1}
.gallery figcaption{display:block;padding:18px 2px 0;color:var(--caption-ink);font-size:14px;line-height:1.65;text-transform:none}
.caption-meta{display:flex;justify-content:space-between;gap:12px;color:#706d65;font-size:9px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.gallery figcaption .caption-meta span:last-child{color:#706d65}
.gallery figcaption h3{font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--ink);margin:0 0 6px}
.gallery figcaption p{max-width:64ch;font-size:14px;line-height:1.65;margin:0;color:var(--caption-ink)}
.sheet-original{margin-top:28px;border:1px solid var(--rule);border-radius:4px;padding:0 18px}
.sheet-original summary{padding:15px 0;font-size:10px;letter-spacing:.04em;color:var(--caption-ink)}
.sheet-original img{max-height:85vh;object-fit:contain;margin-top:10px}
.sheet-original .sheet-note{padding:16px 0 22px;font-size:14px;line-height:1.65;color:var(--caption-ink)}
.project-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:20px;margin-top:16px;padding:30px 0}
.project-nav a{font-size:15px;line-height:1.4;text-transform:none;letter-spacing:0}
.project-nav a small{display:block;margin-bottom:8px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--caption-ink)}
.project-nav a:last-child{text-align:right}
.project-nav .all-projects{font-size:11px;padding:10px 16px;border:1px solid var(--rule);border-radius:3px}
.project-index .card-description{font-size:12px;line-height:1.65;margin:12px 0 0;color:var(--caption-ink);max-width:46ch}
.project-index .project-grid{row-gap:34px}
.original-gallery.gallery img{height:330px}
.original-gallery .caption-meta{font-size:9px}
.latest-study{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px;padding:44px;background:var(--paper);border:1px solid var(--rule);border-radius:5px;margin-bottom:60px}
.latest-study>figure img{height:360px;object-fit:contain}
.latest-study figcaption{font-size:11px;line-height:1.6;color:var(--caption-ink);margin-top:15px;text-transform:none}
.latest-study h2{margin:15px 0 20px}
.latest-study p{font-size:14px;line-height:1.8;color:var(--caption-ink);margin-bottom:24px;max-width:46ch}
.image-note{font-size:11px;line-height:1.65;color:var(--caption-ink);margin:10px 0 0;max-width:64ch}
.about-studio p.image-note{font-size:11px;line-height:1.65;margin:10px 0 18px}
.chapter-grid .chapter-description{font-size:12px;line-height:1.65;color:var(--caption-ink);text-transform:none;letter-spacing:0;margin-top:12px}
.film-description{width:86%;max-width:1200px;margin:0 auto;padding:16px 0 22px;color:var(--caption-ink);font-size:11px;line-height:1.7}
.inset-movie .film-description{width:100%;padding-bottom:0}
.diagrams-intro{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:14px 30px;margin:0 0 28px;font-size:14px;line-height:1.7;color:var(--caption-ink)}
.diagrams-intro p{max-width:60ch}
.diagram-download{font-size:12px;color:var(--burgundy);text-decoration:underline;text-underline-offset:4px}
.site-diagrams .gallery img{height:460px}
.site-diagrams .gallery .diagram-detail{grid-column:1/-1}
.site-diagrams .gallery .diagram-detail img{height:auto;max-height:900px}
@media(max-width:600px){.site-diagrams .gallery img{height:320px}.diagrams-intro{font-size:13px}}
/* One captioned viewer for project images and original presentation sheets. */
dialog.image-viewer{position:fixed;inset:0;width:min(1440px,96vw);max-width:none;height:94dvh;max-height:94dvh;padding:0;border:1px solid #43453d;border-radius:6px;background:#20221e;color:#f6f5f0;overflow:hidden}
dialog.image-viewer::backdrop{background:#10130fed;backdrop-filter:blur(5px)}
.viewer-inner{height:100%;display:grid;grid-template-rows:54px minmax(0,1fr) auto}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;border-bottom:1px solid #ffffff26}
.viewer-tools{display:flex;gap:8px;align-items:center}
.viewer-canvas{min-height:0;overflow:auto;overscroll-behavior:contain}
dialog.diagram-viewer .viewer-canvas{background:#fafaf8}
dialog.image-viewer .viewer-canvas.is-zoomed .viewer-image{width:auto;height:auto;max-width:none;max-height:none;object-fit:initial}
.viewer-counter{font-size:11px;letter-spacing:.06em;color:#cccfc2}
dialog.image-viewer button{position:static;border:1px solid #ffffff45;background:transparent;color:#f6f5f0;padding:8px 13px;border-radius:3px;font-size:12px}
dialog.image-viewer button:hover{background:#ffffff15}
dialog.image-viewer .viewer-image{display:block;width:100%;height:100%;max-height:none;object-fit:contain;padding:18px}
dialog.image-viewer.diagram-viewer .viewer-image{background:#fafaf8;max-width:none}
.viewer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding:20px 24px 24px;border-top:1px solid #ffffff26;background:#20221e}
.viewer-title{font-family:inherit;font-size:18px;line-height:1.4;letter-spacing:0;margin:0 0 6px}
.viewer-description{font-size:13px;line-height:1.65;color:#d0d2c9;max-width:90ch}
.viewer-arrows{display:flex;gap:8px}
@media(min-width:1500px){.project-cover img{height:420px}}
@media(max-width:850px){.project-page .project-heading{gap:28px}.project-cover img{height:300px}.project-page .project-heading h1{font-size:40px}.project-overview{grid-template-columns:145px 1fr}.latest-study{gap:28px;padding:26px}.gallery img{height:330px}}
@media(max-width:600px){
 .project-page .project-heading{grid-template-columns:1fr;padding:34px 0 28px;gap:24px}
 .project-page .project-heading h1{font-size:43px;max-width:17ch;margin:20px 0}
 .project-page .project-intro p{font-size:15px}
 .project-cover{padding:12px}.project-cover img{height:290px}
 .project-overview{grid-template-columns:1fr;gap:14px;padding:24px 0}.project-overview p{font-size:14px}
 .project-jump{margin-bottom:8px}.project-jump>a{font-size:11px;padding:8px}
 .gallery{gap:28px}.gallery img,.gallery .single img,.gallery .wide img{height:350px}
 .gallery button,.gallery .single button{padding:16px}.gallery figcaption{padding-top:14px}
 .gallery figcaption h3{font-size:16px}.gallery figcaption p{font-size:13px}
 .project-page .section-label{display:block}.project-page .section-label h2{max-width:none;font-size:26px}
 .project-page .section-label>span{display:block;margin-top:9px;font-size:9px}
 .project-nav{grid-template-columns:1fr 1fr}.project-nav a{font-size:13px}.project-nav .all-projects{grid-column:1/-1;grid-row:2;text-align:center;margin-top:6px}
 .project-index .project-grid{grid-template-columns:1fr}.project-index .card-description{font-size:13px}
 .original-gallery.gallery img{height:300px}
 .latest-study{grid-template-columns:1fr;gap:28px;padding:22px;margin-bottom:35px}.latest-study>figure img{height:280px}
 dialog.image-viewer{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}
 .viewer-inner{grid-template-rows:52px minmax(0,1fr) auto}.viewer-toolbar{padding:0 16px}
 dialog.image-viewer .viewer-image{padding:8px}.viewer-bottom{grid-template-columns:1fr;gap:16px;padding:16px}
 .viewer-title{font-size:17px}.viewer-description{font-size:12px}.viewer-arrows{justify-content:space-between}
}