/* WORKS ATLAS — Editorial system / v1.3 */
:root{--paper:#f8f8f6;--ink:#20201f;--subtle:#74746f;--line:#deded9;--warm:#eaeae5;--gutter:clamp(22px,5vw,90px);--serif:Georgia,'Times New Roman',serif} 
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%} a:focus-visible{outline:2px solid currentColor;outline-offset:5px} ::selection{background:#d3d7d2;color:#171717}
.header{min-height:94px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{font-size:23px;font-weight:700;letter-spacing:-.065em;white-space:nowrap}.nav{display:flex;gap:clamp(16px,2.4vw,35px);align-items:center;font-size:11px;font-weight:500;letter-spacing:.13em}.nav a{transition:opacity .2s}.nav a:hover{opacity:.52}.nav a.active{padding-bottom:6px;border-bottom:1px solid currentColor}.nav .future{color:#999994}
.intro{padding:clamp(85px,10vw,155px) var(--gutter) clamp(75px,9vw,130px)}.eyebrow{margin:0 0 34px;color:var(--subtle);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}.intro h1{margin:0;max-width:1250px;font-size:clamp(64px,9vw,150px);font-weight:400;letter-spacing:-.082em;line-height:.99}.intro-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-top:45px}.intro-description{max-width:560px;margin:0;color:#62625e;font-size:clamp(15px,1.4vw,18px);line-height:1.8}.intro-index{flex-shrink:0;color:var(--subtle);font-size:11px;letter-spacing:.1em;white-space:nowrap}
.collection{padding:0 var(--gutter)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-top:1px solid var(--line)}.section-heading span{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}.section-heading span:last-child{color:var(--subtle)}.project{margin:0}.project-image{display:block;position:relative;overflow:hidden;background:#deded9}.project-image img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.project-image:hover img{transform:scale(1.015)}.project-image .image-cue{position:absolute;bottom:22px;right:22px;background:rgba(248,248,246,.95);color:var(--ink);padding:13px 17px;font-size:11px;letter-spacing:.12em;display:flex;gap:25px;align-items:center}.project-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding:31px 0 112px}.project-title{margin:0 0 15px;font-size:clamp(26px,3vw,43px);font-weight:400;letter-spacing:-.05em;line-height:1.12}.project-title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}.project-location{margin:0;color:var(--subtle);font-size:13px;line-height:1.8}.project-right{text-align:right;flex-shrink:0}.project-type{margin:0 0 13px;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}.project-year{margin:0;color:var(--subtle);font-size:13px}.project-right .view-link{display:inline-block;margin-top:24px;font-size:11px;letter-spacing:.1em;border-bottom:1px solid var(--ink);padding-bottom:5px}
.about{background:#ecece8;padding:clamp(90px,10vw,165px) var(--gutter)}.about-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:60px}.about-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase}.about h2{margin:0;max-width:800px;font-size:clamp(38px,5vw,74px);font-weight:400;letter-spacing:-.065em;line-height:1.1}.about-rule{height:1px;margin:40px 0;background:#d1d1cb}.about-intro{max-width:650px;margin:0;font-size:19px;line-height:1.6;letter-spacing:-.015em}.about-copy{max-width:650px;margin:26px 0 0;color:#62625e;font-size:15px;line-height:1.85}.disciplines{display:flex;flex-wrap:wrap;gap:10px;margin-top:35px}.discipline{padding:11px 15px;border:1px solid #cccac3;border-radius:2px;font-size:11px;letter-spacing:.04em}
.footer{display:flex;justify-content:space-between;gap:20px;padding:35px var(--gutter);background:#ecece8;border-top:1px solid #d1d1cb}.footer span,.footer a{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* Project detail */
.crumbs{display:flex;align-items:center;gap:12px;padding:28px var(--gutter) 0;color:var(--subtle);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.crumbs a{color:var(--ink)}.crumbs a:hover{text-decoration:underline}.case-hero{padding:clamp(52px,6.5vw,105px) var(--gutter) 0}.case-kicker{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--subtle);text-transform:uppercase;font-size:11px;letter-spacing:.16em}.case-title{margin:32px 0 20px;font-size:clamp(67px,10.8vw,174px);letter-spacing:-.09em;font-weight:400;line-height:.88}.case-subtitle{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:22px 0 42px}.case-subtitle h2{font-weight:400;font-size:clamp(18px,2.2vw,30px);letter-spacing:-.03em;margin:0}.case-subtitle span{font-size:11px;color:var(--subtle);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}.hero-photo{margin:0}.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}.image-credit{padding:12px var(--gutter);text-align:right;color:#777;font-size:10px;letter-spacing:.03em}
.project-intro{display:grid;grid-template-columns:minmax(185px,.65fr) minmax(0,1.6fr);gap:clamp(40px,7vw,120px);padding:clamp(88px,10vw,160px) var(--gutter);border-bottom:1px solid var(--line)}.overline{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--subtle)}.statement{font-size:clamp(28px,3.4vw,52px);font-weight:400;letter-spacing:-.055em;line-height:1.2;margin:0 0 40px}.prose{color:#5c5c58;max-width:720px;font-size:clamp(15px,1.25vw,17px);line-height:1.9;margin:0 0 20px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);padding:0 var(--gutter)}.fact{padding:30px 26px 42px 0;border-right:1px solid var(--line)}.fact:not(:first-child){padding-left:26px}.fact:last-child{border-right:0}.fact-label{display:block;font-size:10px;letter-spacing:.17em;color:var(--subtle);text-transform:uppercase;margin-bottom:15px}.fact-value{font-size:clamp(16px,1.5vw,22px);letter-spacing:-.025em;line-height:1.4}
.role-section{padding:clamp(90px,11vw,165px) var(--gutter);display:grid;grid-template-columns:.65fr 1.6fr;gap:clamp(40px,7vw,120px)}.role-section h2{font-weight:400;font-size:clamp(32px,4vw,62px);letter-spacing:-.065em;line-height:1.15;margin:0 0 40px}.contrib-list{list-style:none;margin:0;padding:0}.contrib-list li{display:grid;grid-template-columns:30px 1fr;gap:22px;border-top:1px solid var(--line);padding:26px 0}.contrib-list li:last-child{border-bottom:1px solid var(--line)}.contrib-number{color:var(--subtle);font-size:11px;letter-spacing:.1em;padding-top:5px}.contrib-list h3{font-weight:400;letter-spacing:-.03em;font-size:clamp(18px,2vw,25px);margin:0 0 9px}.contrib-list p{color:var(--subtle);font-size:14px;line-height:1.75;margin:0;max-width:690px}
.visual-break{background:#1a2429;color:#f7f7f5;position:relative;overflow:hidden;padding:clamp(80px,11vw,150px) var(--gutter)}.visual-break .minor{color:#aeb9bb;font-size:11px;letter-spacing:.16em;text-transform:uppercase}.visual-break h2{font-family:var(--serif);font-weight:400;font-size:clamp(47px,7.1vw,112px);letter-spacing:-.055em;line-height:1.04;max-width:1050px;margin:50px 0 95px}.visual-break .split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid rgba(255,255,255,.28);padding-top:24px}.visual-break p{color:#c9d2d2;font-size:13px;line-height:1.7;margin:0;max-width:620px}.visual-break span{font-size:11px;letter-spacing:.1em;color:#b5bcbf;white-space:nowrap}.end-section{padding:clamp(70px,9vw,130px) var(--gutter)}.end-section .back{display:inline-block;font-size:11px;letter-spacing:.17em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:8px}.end-section h2{margin:40px 0 0;font-weight:400;letter-spacing:-.065em;font-size:clamp(45px,7vw,95px);line-height:1.04}.end-section h2 a:hover{opacity:.6}
@media(max-width:760px){.header{min-height:82px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}.brand{font-size:21px}.nav{font-size:10px;gap:18px}.intro{padding-top:95px;padding-bottom:85px}.intro h1{font-size:clamp(54px,12vw,88px)}.intro-bottom{flex-direction:column;align-items:flex-start}.project-meta{flex-direction:column;gap:24px;padding-bottom:95px}.project-right{text-align:left}.about-grid,.project-intro,.role-section{grid-template-columns:1fr;gap:45px}.footer{flex-direction:column;align-items:flex-start}.case-title{font-size:clamp(58px,12vw,100px)}.case-subtitle{align-items:flex-start;flex-direction:column}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(2){border-right:0}.fact:nth-child(3),.fact:nth-child(4){border-top:1px solid var(--line)}.fact:nth-child(3){padding-left:0}.visual-break .split{flex-direction:column;align-items:flex-start}.visual-break span{white-space:normal}.project-image .image-cue{bottom:10px;right:10px;padding:10px 12px;font-size:10px;gap:12px}}
@media(max-width:480px){.nav{gap:12px}.brand{font-size:19px}.case-title{font-size:clamp(54px,13vw,75px)}.facts{grid-template-columns:1fr}.fact{border-right:0;border-top:1px solid var(--line)!important;padding:25px 0!important}.fact:first-child{border-top:0!important}.hero-photo img{aspect-ratio:4/3;object-fit:cover}.image-credit{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-image img,.nav a{transition:none}}


/* =========================================================
   WORKS ATLAS v1.5 / ARCHITECTURAL PHOTO ESSAY
   Proper editorial hierarchy, full-bleed primary images,
   an aligned two-column detail spread, and image metadata.
   ========================================================= */

.gallery-opening {
  display: grid;
  grid-template-columns: minmax(185px, .65fr) minmax(0, 1.6fr);
  gap: clamp(40px, 7vw, 120px);
  padding: clamp(85px, 10vw, 150px) var(--gutter) clamp(48px, 5vw, 85px);
}
.gallery-opening .overline { padding-top: 14px; }
.gallery-opening h2 {
  margin: 0;
  max-width: 1000px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 5.55vw, 86px);
  letter-spacing: -.072em;
  line-height: 1.06;
}
.gallery-opening p {
  max-width: 570px;
  margin: 30px 0 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  color: var(--subtle);
}

/* Monumental first frame, matching the original case-study hero */
.gallery-wide {
  margin: 0;
  width: 100%;
}
.gallery-wide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1774 / 887;
  object-fit: cover;
  background: #dfdfda;
}

/* Unified archival captions: item number at left, perspective at right */
.gallery-wide figcaption,
.gallery-detail figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 22px;
  min-width: 0;
  border-top: 1px solid var(--line);
  margin: 0;
  color: var(--subtle);
  font-size: 11px;
  letter-spacing: .115em;
  line-height: 1.65;
  text-transform: uppercase;
}
.gallery-wide figcaption {
  padding: 24px var(--gutter) 0;
}
.gallery-wide figcaption span:last-child,
.gallery-detail figcaption span:last-child {
  text-align: right;
}
.gallery-wide figcaption span:first-child,
.gallery-detail figcaption span:first-child { color: var(--ink); }

/* Two deliberately paired studies — no arbitrary 50% blank area */
.gallery-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 2.6vw, 48px);
  width: 100%;
  padding: clamp(70px, 8.2vw, 130px) var(--gutter) clamp(40px, 5vw, 80px);
}
.gallery-detail {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.gallery-detail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #dfdfda;
}
.gallery-detail figcaption {
  padding: 20px 0 0;
}

.gallery-duo + .role-section {
  padding-top: clamp(65px, 7.5vw, 120px);
}
.gallery-wide--dusk figcaption {
  padding-bottom: clamp(50px, 5vw, 85px);
}

@media (max-width: 760px) {
  .gallery-opening {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 90px;
    padding-bottom: 52px;
  }
  .gallery-opening .overline { padding-top: 0; }
  .gallery-opening h2 { font-size: clamp(37px, 8.5vw, 62px); }
  .gallery-opening p { margin-top: 22px; }
  .gallery-wide img { aspect-ratio: 16 / 10; }
  .gallery-duo { grid-template-columns: 1fr; row-gap: 58px; padding-top: 60px; }
  .gallery-detail img { aspect-ratio: 16 / 10; }
  .gallery-wide figcaption,
  .gallery-detail figcaption { font-size: 10px; }
}
@media (max-width: 420px) {
  .gallery-wide figcaption,
  .gallery-detail figcaption { gap: 12px; font-size: 9px; letter-spacing: .06em; }
  .gallery-wide figcaption { padding-top: 18px; }
  .gallery-detail figcaption { padding-top: 17px; }
}
