:root{
  --bg:#e7e5df;
  --bg2:#efede8;
  --ink:#111210;
  --muted:#77766f;
  --line:rgba(17,18,16,.16);
  --accent:#d7653f;
  --dark:#151614;
  --sans:"Archivo",Arial,sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit}
figure{margin:0}
.header{
  position:absolute;z-index:40;top:0;left:0;width:100%;height:76px;padding:0 42px;
  display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);
}
.page-inner .header{position:relative}
.identity{display:flex;flex-direction:column;gap:3px}
.identity span{font-size:18px;font-weight:500;letter-spacing:.08em}
.identity small,.footer small{font:300 7px/1.2 var(--mono);letter-spacing:.04em}
.nav{display:flex;gap:35px;font:300 8px/1 var(--mono)}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:.25s}
.nav a:hover:after{transform:scaleX(1)}
.menu-toggle{display:none;border:0;background:none;width:25px;height:22px;position:relative}
.menu-toggle span{position:absolute;left:0;width:100%;height:1px;background:var(--ink)}
.menu-toggle span:first-child{top:7px}.menu-toggle span:last-child{top:14px}
.menu-panel{display:none}
.label,.eyebrow,.section-topline,.fragment-index,.process-head,.back{font:300 8px/1.3 var(--mono);letter-spacing:.02em}
.image-reveal{overflow:hidden}
.image-reveal img{transform:scale(1.015);transition:transform 1.1s cubic-bezier(.2,.75,.15,1)}
.image-reveal:hover img{transform:scale(1)}

.desk{height:100svh;min-height:720px;position:relative;padding:96px 42px 34px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(9,1fr);gap:10px}
.desk-grid{position:absolute;inset:76px 0 0;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:calc(100%/12) 100%,100% calc(100%/9);opacity:.28;pointer-events:none}
.desk-main{grid-column:1/7;grid-row:2/7;z-index:2}
.desk-project-label{grid-column:2/6;grid-row:7/8;z-index:3;padding-top:7px}
.desk-project-label h1{font-size:16px;font-weight:400;margin:0 0 4px}
.desk-project-label p{font:300 8px var(--mono);margin:0}
.desk-tall{grid-column:9/11;grid-row:1/7;z-index:2}
.drawing-card{position:relative}
.drawing-card svg{width:100%;height:100%;fill:none;stroke:#70716c;stroke-width:.9}
.drawing-card-a{grid-column:6/9;grid-row:2/8;padding:18px;z-index:1}
.drawing-card-a span{position:absolute;bottom:9px;left:18px;font:300 6px var(--mono);color:var(--muted)}
.desk-notes{grid-column:11/12;grid-row:4/6;font:300 7px/1.5 var(--mono);align-self:center}
.coordinates{grid-column:7/9;grid-row:1;font:300 6px/1.45 var(--mono);color:var(--muted);align-self:center}
.scroll-cue{grid-column:12;grid-row:8/10;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:8px;font:300 7px var(--mono)}
.scroll-cue i{display:block;width:1px;height:48px;background:var(--ink);position:relative}
.scroll-cue i:after{content:"";position:absolute;bottom:0;left:-3px;width:6px;height:6px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg)}

.bruma-stage{padding:95px 42px 120px;background:var(--bg2);border-top:1px solid var(--line)}
.stage-intro{display:grid;grid-template-columns:2fr 10fr;margin-bottom:55px}
.technical-mark{width:34px;height:34px;position:relative}
.technical-mark:before,.technical-mark:after{content:"";position:absolute;background:var(--accent)}
.technical-mark:before{height:1px;width:34px;top:17px}.technical-mark:after{width:1px;height:34px;left:17px}
.stage-intro .eyebrow{margin:0 0 12px}
.stage-intro h2{font-size:30px;line-height:1.08;font-weight:300;margin:0;letter-spacing:-.025em}
.stage-layout{display:grid;grid-template-columns:7fr 2.6fr 2.2fr;grid-template-rows:54vh 25vh;gap:13px}
.stage-large{grid-column:1;grid-row:1/3;position:relative}
.stage-small{grid-column:2/4;grid-row:1}
.stage-data{grid-column:3;grid-row:2;padding:12px 0}
.stage-data dl{margin:0}
.stage-data div{display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px;font:300 7px/1.4 var(--mono)}
.stage-data dt{color:var(--muted)}
.stage-plan{grid-column:2;grid-row:2;padding:10px}
.view-project{position:absolute;left:18px;bottom:18px;color:#fff;font:300 7px var(--mono);border-bottom:1px solid currentColor;padding-bottom:4px}

.work-canvas{min-height:150vh;padding:36px 42px 120px;position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:110px 37vh 18vh 38vh 24vh;gap:12px}
.section-topline{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px}
.section-topline a{text-decoration:underline;text-underline-offset:4px}
.work-piece figure{overflow:hidden}
.work-piece figure img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s}
.work-piece:hover figure img{transform:scale(1.018)}
.work-piece div{padding-top:8px;display:flex;flex-direction:column;gap:2px}
.work-piece strong{font-size:14px;font-weight:400}.work-piece small{font:300 7px var(--mono)}
.work-piece-a{grid-column:1/6;grid-row:2/4}.work-piece-a figure{height:100%}
.work-piece-b{grid-column:7/9;grid-row:2/5}.work-piece-b figure{height:100%}
.work-piece-c{grid-column:9/13;grid-row:4/6}.work-piece-c figure{height:100%}
.work-line{position:absolute;background:var(--line);pointer-events:none}
.line-a{width:1px;top:145px;bottom:70px;left:50%}
.line-b{height:1px;left:42px;right:42px;top:58%}

.studio-fragment{min-height:90vh;border-top:1px solid var(--line);display:grid;grid-template-columns:2fr 3fr 4.5fr 2.5fr;gap:0;position:relative}
.studio-fragment>*{padding:70px 28px;border-right:1px solid var(--line)}
.studio-fragment>*:last-child{border-right:0}
.fragment-intro{font-size:13px;line-height:1.4;margin:0}
.fragment-statement{font-size:clamp(31px,3.1vw,55px);line-height:1.08;letter-spacing:-.035em;margin:0;align-self:center}
.fragment-image{padding:0!important;align-self:start;height:62vh}
.fragment-image img{filter:saturate(.65)}
.line-link{position:absolute;left:calc(5/12*100% + 28px);bottom:70px;font:300 8px var(--mono);display:flex;align-items:center;gap:18px}
.line-link i{width:85px;height:1px;background:var(--ink);position:relative}
.line-link i:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}

.process-preview{padding:70px 42px 110px;border-top:1px solid var(--line)}
.process-head{display:grid;grid-template-columns:2fr 7fr 3fr;margin-bottom:65px}
.process-head p{margin:0;font:300 12px var(--sans)}
.process-head a{text-align:right;text-decoration:underline;text-underline-offset:5px}
.process-diagram{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process-diagram article{min-height:430px;padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.process-diagram article:last-child{border-right:0}
.process-diagram article>span{font-size:13px}
.process-diagram small{margin-top:auto;font:300 7px/1.55 var(--mono)}
.process-diagram figure{height:165px;margin-top:60px}
.topo-art,.cube-art,.plan-art{position:relative;height:190px;margin-top:50px}
.topo-art i{position:absolute;border:1px solid #9b9a94;border-radius:50%;transform:skewX(-25deg)}
.topo-art i:nth-child(1){inset:65px 8% 40px 5%}.topo-art i:nth-child(2){inset:58px 14% 48px 11%}.topo-art i:nth-child(3){inset:50px 20% 56px 18%}.topo-art i:nth-child(4){inset:43px 26% 64px 24%}.topo-art i:nth-child(5){inset:36px 33% 73px 31%}
.cube-art i{position:absolute;left:26%;top:28%;width:48%;height:48%;border:1px solid #8c8c87;transform:skewY(-18deg)}
.cube-art i:nth-child(2){transform:translate(22px,-17px) skewY(-18deg)}
.cube-art i:nth-child(3){transform:translate(44px,-34px) skewY(-18deg)}
.plan-art i{position:absolute;border:1px solid #94948f}
.plan-art i:nth-child(1){inset:23% 12% 19% 10%}.plan-art i:nth-child(2){left:34%;top:23%;bottom:19%}.plan-art i:nth-child(3){left:10%;right:12%;top:49%}.plan-art i:nth-child(4){left:59%;top:49%;bottom:19%}
.step-art.large{height:330px;margin-top:20px}

.contact-slab{min-height:78vh;background:var(--dark);color:#f2f0e9;padding:42px;display:grid;grid-template-columns:4fr 4fr 3fr;grid-template-rows:1fr 1fr auto;gap:25px}
.slab-id{display:flex;flex-direction:column;gap:4px}.slab-id strong{font-size:18px;letter-spacing:.08em}.slab-id small{font:300 6px var(--mono)}
.slab-copy{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-self:center}
.slab-copy span{font:300 7px var(--mono);margin-bottom:9px}.slab-copy a{font-size:17px}
.slab-copy i{width:100%;height:1px;background:#ddd9d1;margin-top:26px}
.contact-slab figure{grid-column:3;grid-row:1/3;height:55vh}
.slab-bottom{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;font:300 6px var(--mono);align-items:end}
.slab-bottom span:nth-child(2){text-align:center}.slab-bottom span:nth-child(3){text-align:right}

/* Work page */
.work-page{padding:86px 42px 130px}
.work-intro{display:grid;grid-template-columns:3fr 6fr 3fr;align-items:end;min-height:260px;border-bottom:1px solid var(--line);padding-bottom:28px}
.work-intro>p{font:300 8px var(--mono)}.work-intro h1{font-size:clamp(72px,9vw,145px);font-weight:300;letter-spacing:-.06em;margin:0;line-height:.75}
.work-intro-note{font-size:11px;line-height:1.45}
.archive{padding-top:70px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:46vh 14vh 48vh 20vh 44vh;gap:12px}
.archive-item figure{height:100%;overflow:hidden}.archive-item img{transition:transform .7s}.archive-item:hover img{transform:scale(1.02)}
.archive-item div{display:flex;justify-content:space-between;gap:12px;padding-top:8px;font-size:13px}.archive-item span{font:300 7px var(--mono)}
.archive-wide{grid-column:1/8;grid-row:1/3}.archive-vertical{grid-column:9/12;grid-row:1/4}.archive-small{grid-column:2/5;grid-row:4/6}.archive-landscape{grid-column:6/13;grid-row:4/6}.archive-detail{grid-column:5/8;grid-row:3/4}

/* Project */
.project-opening{min-height:85vh;padding:85px 42px 50px;display:grid;grid-template-columns:4fr 8fr;gap:40px}
.project-opening-meta{display:flex;flex-direction:column}.back{margin-bottom:auto;width:max-content;border-bottom:1px solid}
.project-opening h1{font-size:clamp(54px,6vw,100px);font-weight:300;letter-spacing:-.05em;margin:0 0 34px}
.project-opening dl{margin:0}.project-opening dl div{display:grid;grid-template-columns:100px 1fr;margin:7px 0;font:300 7px var(--mono)}.project-opening dt{color:var(--muted)}
.project-opening-img{min-height:70vh}
.project-text-grid{padding:100px 42px;display:grid;grid-template-columns:2fr 6fr 3fr;gap:30px;border-top:1px solid var(--line)}
.project-text-grid h2{font-size:clamp(34px,4vw,64px);line-height:1.05;font-weight:300;letter-spacing:-.035em;margin:0}
.body-copy{font-size:12px;line-height:1.6;margin:0;align-self:end}
.project-spread{padding:30px 42px 120px;display:grid;grid-template-columns:7fr 2fr 3fr;grid-template-rows:55vh 24vh;gap:12px}
.spread-large{grid-column:1/3;grid-row:1/3}.spread-small{grid-column:3;grid-row:1}.project-spread p{grid-column:3;grid-row:2;font:300 8px/1.5 var(--mono);align-self:end}
.project-drawing{padding:90px 42px;border-top:1px solid var(--line);display:grid;grid-template-columns:8fr 3fr;gap:70px}
.project-drawing svg{width:100%;height:auto;fill:none;stroke:#777872;stroke-width:1}.drawing-copy{align-self:end}.drawing-copy span{font:300 7px var(--mono)}.drawing-copy p{font-size:12px;line-height:1.6}
.project-material{height:80vh;position:relative}.project-material figure{height:100%}.material-index{position:absolute;left:42px;right:42px;bottom:28px;color:#fff;display:flex;justify-content:space-between;font:300 7px var(--mono)}
.project-end{padding:80px 42px 100px;border-top:1px solid var(--line)}.project-end p{font:300 7px var(--mono)}.project-end a{display:flex;align-items:center;justify-content:space-between;font-size:clamp(50px,7vw,110px);font-weight:300;letter-spacing:-.05em}.project-end i{width:100px;height:1px;background:var(--ink);position:relative}

/* Studio */
.studio-page{padding:85px 42px 120px}
.studio-opening{display:grid;grid-template-columns:2fr 7fr 3fr;min-height:75vh;gap:28px}
.studio-opening h1{font-size:clamp(42px,5vw,80px);line-height:1.02;font-weight:300;letter-spacing:-.04em;margin:0}
.studio-opening figure{height:58vh}
.studio-philosophy{display:grid;grid-template-columns:5fr 7fr;min-height:95vh;border-top:1px solid var(--line);padding-top:70px}.studio-photo{height:72vh}.studio-copy{padding:35px 0 0 80px}.studio-copy h2{font-size:clamp(36px,4.5vw,70px);line-height:1.04;font-weight:300;letter-spacing:-.04em}.studio-copy>p:last-child{max-width:480px;font-size:13px;line-height:1.6}
.principles{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}.principles article{min-height:310px;padding:22px;border-right:1px solid var(--line)}.principles article:last-child{border-right:0}.principles span{font:300 8px var(--mono)}.principles p{margin-top:110px;font-size:13px;line-height:1.5}

/* Process page */
.process-page{padding:85px 42px 120px}.process-opening{min-height:55vh;border-bottom:1px solid var(--line)}.process-opening h1{font-size:clamp(52px,7vw,110px);line-height:.95;font-weight:300;letter-spacing:-.05em}
.process-steps article{display:grid;grid-template-columns:2fr 7fr 3fr;gap:28px;min-height:70vh;padding:60px 0;border-bottom:1px solid var(--line)}.step-head{display:flex;flex-direction:column;gap:8px}.step-head span{font-size:17px}.step-head small{font:300 7px var(--mono)}.process-steps article>p{font-size:12px;line-height:1.6;align-self:end}.process-steps figure{height:58vh}

/* Contact */
.contact-page{padding:85px 42px 120px}.contact-board{min-height:80vh;display:grid;grid-template-columns:4fr 4fr 4fr;grid-template-rows:1fr 1fr;gap:20px}.contact-title{grid-column:1/3}.contact-title h1{font-size:clamp(66px,8vw,130px);font-weight:300;letter-spacing:-.055em;margin:25px 0}.contact-address,.contact-mail{align-self:end}.contact-address span,.contact-mail span{font:300 7px var(--mono)}.contact-address p,.contact-mail a{font-size:17px;line-height:1.4}.contact-board figure{grid-column:3;grid-row:1/3}

/* footer */
.footer{background:var(--dark);color:#f2f0e9;padding:70px 42px 20px;min-height:370px;display:grid;grid-template-columns:4fr 4fr 4fr;grid-template-rows:1fr auto}
.footer>div:first-child{display:flex;flex-direction:column;gap:4px}.footer>div:first-child strong{font-size:18px;letter-spacing:.08em}
.footer-contact{display:flex;flex-direction:column;gap:8px}.footer-contact span{font:300 7px var(--mono)}.footer-contact a{font-size:16px}
.footer-meta{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.16);padding-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;font:300 6px var(--mono)}.footer-meta span:nth-child(2){text-align:center}.footer-meta span:last-child{text-align:right}

/* custom cursor */
.cursor-label{position:fixed;z-index:100;pointer-events:none;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font:300 7px var(--mono);transform:translate(-50%,-50%) scale(0);transition:transform .18s ease}
.cursor-label.is-visible{transform:translate(-50%,-50%) scale(1)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.reveal.is-in{opacity:1;transform:none}

@media(max-width:800px){
  .header{height:62px;padding:0 16px}.identity span{font-size:15px}.identity small{font-size:5px}.nav-desktop{display:none}.menu-toggle{display:block}
  .menu-panel{position:fixed;z-index:35;inset:0;background:var(--bg);padding:100px 16px 22px;flex-direction:column;transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.75,.15,1)}
  .menu-panel.open{display:flex;transform:translateY(0)}.menu-panel nav{display:flex;flex-direction:column}.menu-panel nav a{font-size:16vw;line-height:.95;font-weight:300;letter-spacing:-.05em;border-bottom:1px solid var(--line);padding:8px 0}
  .menu-meta{margin-top:auto;display:flex;justify-content:space-between;font:300 6px var(--mono)}
  .desk{height:auto;min-height:100svh;padding:86px 16px 26px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto;gap:9px}
  .desk-grid{inset:62px 0 0;background-size:25% 100%,100% 12.5%}
  .desk-main{grid-column:1/4;grid-row:auto;height:49svh;margin-top:36px}.desk-project-label{grid-column:1/4;grid-row:auto;padding:3px 0 30px}
  .desk-tall{grid-column:3/5;grid-row:auto;height:48svh;margin-top:-4px}.drawing-card-a{grid-column:1/3;grid-row:auto;height:42svh;margin-top:-28svh;padding:8px;z-index:3;background:rgba(231,229,223,.82);backdrop-filter:blur(4px)}
  .desk-notes{grid-column:3/5;grid-row:auto;margin:8px 0 35px}.coordinates{position:absolute;right:16px;top:86px}.scroll-cue{display:none}
  .bruma-stage{padding:65px 16px 80px}.stage-intro{grid-template-columns:40px 1fr;margin-bottom:38px}.stage-intro h2{font-size:22px}
  .stage-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:8px}.stage-large{grid-column:1/-1;grid-row:auto;height:58svh}.stage-small{grid-column:2;grid-row:auto;height:48svh}.stage-data{grid-column:1;grid-row:auto;align-self:end}.stage-plan{display:none}.stage-data div{grid-template-columns:1fr}
  .work-canvas{min-height:0;padding:30px 16px 80px;display:block}.section-topline{margin-bottom:50px}.work-piece{display:block;margin-bottom:62px}.work-piece figure{height:auto!important}.work-piece-a figure{aspect-ratio:1.25}.work-piece-b{width:72%;margin-left:auto}.work-piece-b figure{aspect-ratio:.72}.work-piece-c figure{aspect-ratio:1.4}.work-line{display:none}
  .studio-fragment{min-height:0;display:grid;grid-template-columns:1fr 1fr}.studio-fragment>*{padding:38px 16px;border-right:0;border-bottom:1px solid var(--line)}.fragment-index{grid-column:1/-1}.fragment-intro{grid-column:1}.fragment-statement{grid-column:1/-1;font-size:10vw}.fragment-image{grid-column:2;height:55svh;padding:0!important}.line-link{position:static;grid-column:1/-1}
  .process-preview{padding:55px 16px 70px}.process-head{grid-template-columns:1fr 1fr;margin-bottom:45px}.process-head a{grid-column:2}.process-diagram{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.process-diagram article{flex:0 0 78vw;min-height:390px;scroll-snap-align:start}
  .contact-slab{min-height:82svh;padding:26px 16px;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto}.slab-copy{grid-column:1;grid-row:2}.contact-slab figure{grid-column:2;grid-row:1/3;height:58svh}.slab-bottom{grid-column:1/-1;grid-template-columns:1fr}.slab-bottom span:nth-child(2),.slab-bottom span:nth-child(3){text-align:left;margin-top:6px}
  .work-page,.studio-page,.process-page,.contact-page{padding:58px 16px 80px}
  .work-intro{grid-template-columns:1fr;min-height:320px}.work-intro h1{font-size:25vw;margin:30px 0}.work-intro-note{max-width:300px}
  .archive{display:block;padding-top:45px}.archive-item{display:block;margin-bottom:60px}.archive-item figure{height:auto}.archive-wide figure,.archive-landscape figure{aspect-ratio:1.2}.archive-vertical{width:75%;margin-left:auto}.archive-vertical figure{aspect-ratio:.72}.archive-small{width:62%}.archive-small figure,.archive-detail figure{aspect-ratio:.85}
  .project-opening{min-height:0;padding:65px 16px 60px;grid-template-columns:1fr}.back{margin-bottom:50px}.project-opening h1{font-size:16vw}.project-opening-img{min-height:60svh}
  .project-text-grid{padding:65px 16px;grid-template-columns:1fr}.project-text-grid h2{font-size:9.5vw}.body-copy{max-width:320px}
  .project-spread{padding:0 16px 80px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto}.spread-large{grid-column:1/-1;grid-row:auto;height:58svh}.spread-small{grid-column:2;grid-row:auto;height:50svh}.project-spread p{grid-column:1;grid-row:2;align-self:end}
  .project-drawing{padding:65px 16px;grid-template-columns:1fr;gap:35px}.project-material{height:70svh}.material-index{left:16px;right:16px;flex-wrap:wrap;gap:8px}.project-end{padding:60px 16px}.project-end a{font-size:13vw}
  .studio-opening{grid-template-columns:1fr;min-height:0}.studio-opening h1{font-size:10.5vw;margin:35px 0}.studio-opening figure{height:55svh;width:70%;margin-left:auto}
  .studio-philosophy{grid-template-columns:1fr;padding-top:55px;margin-top:60px}.studio-photo{height:58svh}.studio-copy{padding:45px 0}.studio-copy h2{font-size:10vw}
  .principles{grid-template-columns:1fr}.principles article{min-height:220px;border-right:0;border-bottom:1px solid var(--line)}.principles p{margin-top:60px}
  .process-opening{min-height:44vh}.process-opening h1{font-size:13vw}.process-steps article{grid-template-columns:1fr;min-height:0;padding:50px 0}.process-steps article>p{max-width:310px}.process-steps figure{height:52svh}
  .contact-board{display:block}.contact-title h1{font-size:15vw;margin:30px 0 80px}.contact-address,.contact-mail{margin:45px 0}.contact-board figure{height:55svh;width:75%;margin-left:auto}
  .footer{padding:55px 16px 18px;min-height:430px;display:grid;grid-template-columns:1fr}.footer-contact{margin-top:45px}.footer-meta{grid-column:1;grid-template-columns:1fr;margin-top:70px}.footer-meta span:nth-child(2),.footer-meta span:last-child{text-align:left;margin-top:5px}
  .cursor-label{display:none}
}


/* =========================
   V2 UX / UI ENHANCEMENTS
   ========================= */

:root{
  --header-h:76px;
}

/* Accessible utility */
.skip-link{
  position:fixed;z-index:999;left:12px;top:12px;
  transform:translateY(-160%);background:var(--dark);color:#fff;
  padding:10px 14px;font:400 10px var(--mono);
}
.skip-link:focus{transform:none}
:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Page transition */
.page-transition{
  position:fixed;z-index:500;inset:0;background:var(--bg);
  transform:translateY(100%);pointer-events:none;
}
body.is-leaving .page-transition{transform:translateY(0);transition:transform .42s cubic-bezier(.7,0,.2,1)}
body.is-entering{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:.35}to{opacity:1}}

/* Smart header */
.header{
  transition:transform .36s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.header.is-fixed{
  position:fixed!important;top:0;left:0;
  background:rgba(231,229,223,.91);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(17,18,16,.1);
}
.header.is-hidden{transform:translateY(-105%)}
.header .nav a[aria-current="page"]::after{transform:scaleX(1)}
.header .nav a[aria-current="page"]{font-weight:400}

/* Clear interactive language without "buttonifying" the design */
.interactive-media{position:relative;display:block;overflow:hidden}
.media-affordance{
  position:absolute;left:14px;bottom:14px;z-index:3;
  background:rgba(231,229,223,.9);color:var(--ink);
  padding:8px 10px;font:400 7px var(--mono);
  opacity:0;transform:translateY(5px);transition:.25s ease;
}
.interactive-media:hover .media-affordance,
.interactive-media:focus-visible .media-affordance{opacity:1;transform:none}
.project-label-link{display:block;color:inherit}
.project-label-link .inline-arrow{
  width:36px;height:1px;background:var(--ink);display:inline-block;margin-top:11px;position:relative;
  transition:width .25s ease;
}
.project-label-link .inline-arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid;border-right:1px solid;transform:rotate(45deg);
}
.project-label-link:hover .inline-arrow{width:52px}
.work-piece:focus-visible,.archive-item:focus-visible{outline-offset:8px}

/* Project contextual navigation */
.project-progress-nav{
  position:sticky;z-index:30;top:0;height:42px;
  display:flex;align-items:center;gap:24px;
  padding:0 42px;background:rgba(231,229,223,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  font:300 7px var(--mono);
}
.project-progress-nav a{color:var(--muted);transition:color .2s}
.project-progress-nav a.is-active{color:var(--ink)}
.project-progress-track{
  margin-left:auto;width:120px;height:1px;background:var(--line);overflow:hidden;
}
.project-progress-track i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}

/* Drawings animate only when meaningful */
.project-drawing svg path,
.draw-svg path{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1);
}
.project-drawing.is-drawn svg path,
.project-drawing.is-in svg path{stroke-dashoffset:0}

/* Mobile swipe affordance */
.mobile-swipe-hint,.rail-progress{display:none}

/* Slightly larger touch/interaction area while keeping visual restraint */
.nav a,.section-topline a,.line-link,.view-project,.back{padding-top:6px;padding-bottom:6px}

/* Contact conversion without corporate card UI */
.contact-mini-form{
  grid-column:1/3;
  align-self:end;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 24px;
  border-top:1px solid var(--line);padding-top:28px;margin-top:30px;
}
.contact-mini-form label{display:block}
.contact-mini-form label.wide{grid-column:1/-1}
.contact-mini-form label>span{
  display:block;font:300 7px var(--mono);color:var(--muted);margin-bottom:8px;
}
.contact-mini-form input,.contact-mini-form select,.contact-mini-form textarea{
  width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;padding:9px 0;color:var(--ink);outline:none;font:300 12px var(--sans);
}
.contact-mini-form textarea{resize:vertical}
.contact-mini-form button{
  border:0;background:none;padding:12px 0;width:max-content;
  display:flex;align-items:center;gap:14px;font:400 8px var(--mono);
}
.contact-mini-form button i{
  display:block;width:58px;height:1px;background:currentColor;position:relative;
}
.contact-mini-form button i::after{
  content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg);
}
.form-feedback{margin:12px 0 0;font:300 8px var(--mono);color:var(--muted)}

/* Better image loading stability / polish */
img{background:#d8d5ce}
.work-piece figure,.archive-item figure,.project-opening-img,.stage-large,.stage-small{background:#d8d5ce}

/* Mobile */
@media(max-width:800px){
  :root{--header-h:62px}
  .header.is-fixed{height:62px}
  .media-affordance{opacity:1;transform:none;font-size:6px;padding:7px 8px}
  .project-label-link .inline-arrow{width:30px}

  .project-progress-nav{
    top:0;height:40px;padding:0 16px;gap:15px;
    overflow-x:auto;scrollbar-width:none;
  }
  .project-progress-nav::-webkit-scrollbar{display:none}
  .project-progress-track{position:absolute;left:0;right:0;bottom:0;width:100%;margin:0}

  .mobile-swipe-hint{
    display:flex;align-items:center;gap:10px;margin:-20px 0 14px;
    font:300 6px var(--mono);color:var(--muted);
  }
  .mobile-swipe-hint i{width:34px;height:1px;background:var(--muted);position:relative}
  .mobile-swipe-hint i::after{
    content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
    border-top:1px solid;border-right:1px solid;transform:rotate(45deg);
  }
  .rail-progress{display:block;height:1px;background:var(--line);margin-top:14px;overflow:hidden}
  .rail-progress i{display:block;width:25%;height:100%;background:var(--accent);transition:width .12s linear}

  .contact-board{display:grid;grid-template-columns:1fr;min-height:0}
  .contact-title,.contact-address,.contact-mail,.contact-mini-form,.contact-board figure{grid-column:1}
  .contact-title{grid-row:auto}
  .contact-address,.contact-mail{margin:10px 0 28px}
  .contact-mini-form{display:grid;grid-template-columns:1fr;margin:26px 0 55px}
  .contact-mini-form label.wide{grid-column:1}
  .contact-board figure{width:100%;height:58svh;margin:0}
}

/* Fine pointer hover refinement */
@media(hover:hover) and (pointer:fine){
  .nav a,.section-topline a,.line-link,.back{transition:opacity .2s}
  .nav a:hover,.section-topline a:hover,.line-link:hover,.back:hover{opacity:.56}
}


/* =========================
   V2.1 — DISCOVERABILITY
   Hover is enhancement, never a requirement.
   ========================= */

.media-affordance{
  opacity:1!important;
  transform:none!important;
  background:rgba(231,229,223,.92);
  color:var(--ink);
  border:1px solid rgba(17,18,16,.12);
}
.interactive-media:hover .media-affordance{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.project-cta{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  margin-top:11px;
  font:400 7px/1 var(--mono);
  letter-spacing:.025em;
}
.project-cta .inline-arrow{
  margin-top:0;
}
.project-label-link:hover .project-cta{
  color:var(--accent);
}

.work-cta{
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  margin-top:10px;
  font:400 6.5px/1 var(--mono);
  letter-spacing:.025em;
}
.work-cta i,
.archive-action i{
  display:inline-block;
  width:27px;
  height:1px;
  background:currentColor;
  position:relative;
  transition:width .25s ease;
}
.work-cta i::after,
.archive-action i::after{
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:6px;
  height:6px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.work-piece:hover .work-cta i,
.archive-item:hover .archive-action i{
  width:39px;
}

.archive-item .archive-meta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:16px;
}
.archive-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:400 6.5px/1 var(--mono);
  white-space:nowrap;
}

@media(max-width:800px){
  .media-affordance{
    left:10px;
    bottom:10px;
  }
  .project-cta{
    font-size:6.5px;
    margin-top:10px;
  }
  .work-cta{
    font-size:6px;
  }
  .archive-item .archive-meta{
    grid-template-columns:1fr auto;
    row-gap:6px;
  }
  .archive-item .archive-meta strong{
    grid-column:1;
  }
  .archive-item .archive-meta > span{
    grid-column:1;
  }
  .archive-action{
    grid-column:2;
    grid-row:1/3;
    align-self:center;
    font-size:6px;
  }
}



/* =========================================================
   V3 — REFINEMENT / QA
   Preserve the art direction; improve product behaviour.
   ========================================================= */

:root{
  --context-offset:0px;
}

/* ---------- Legibility ----------
   Keep the technical language small, but no interface-critical 6px text.
*/
.identity small{font-size:7.5px}
.nav{font-size:9.5px}
.label,.eyebrow,.section-topline,.fragment-index,.process-head,.back{font-size:9px}
.desk-project-label p{font-size:8.5px}
.desk-notes{font-size:8px}
.coordinates{font-size:7.5px}
.drawing-card-a span{font-size:7.5px}
.stage-data div{font-size:8.5px}
.work-piece small{font-size:8px}
.work-cta{font-size:8.5px}
.archive-item span{font-size:8px}
.archive-action{font-size:8.5px}
.project-opening dl div{font-size:8px}
.material-index{font-size:8px}
.step-head small{font-size:8px}
.footer small{font-size:7.5px}
.footer-contact span{font-size:8px}
.footer-meta{font-size:7px}
.slab-id small,.slab-copy span,.slab-bottom{font-size:7.5px}

/* Make important actions clearly readable without changing the minimalist UI */
.project-cta{
  font-size:9px;
  letter-spacing:.04em;
  padding:4px 0;
}
.work-cta{
  margin-top:11px;
  letter-spacing:.04em;
}
.archive-action{
  letter-spacing:.035em;
}

/* ---------- Pointer / link clarity ---------- */
.interactive-media,
.project-label-link,
.work-piece,
.archive-item{
  cursor:pointer;
}
.project-label-link{
  width:max-content;
  max-width:100%;
}

/* Do not double-explain the first project with a floating badge.
   The permanent CTA beside the project metadata is the primary affordance. */
.media-affordance{display:none!important}

/* ---------- Better tap/click areas ---------- */
.nav a{
  min-height:36px;
  display:flex;
  align-items:center;
}
.project-progress-nav a{
  min-height:40px;
  display:flex;
  align-items:center;
}
.line-link,.view-project,.back,.section-topline a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
}

/* ---------- Smart global header + case-study navigation ----------
   The contextual bar always sits immediately below the visible global header.
*/
.project-progress-nav{
  top:var(--context-offset);
  transition:top .34s cubic-bezier(.2,.75,.15,1);
}
.project-section{
  scroll-margin-top:calc(var(--context-offset) + 54px);
}

/* Keep global header readable when it returns over project content */
.header.is-fixed{
  box-shadow:0 1px 0 rgba(17,18,16,.06);
}

/* ---------- Menu animation ----------
   Never remove it from layout before its exit transition finishes.
*/
@media(max-width:800px){
  .menu-panel{
    display:flex!important;
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    transform:translateY(-100%);
    transition:
      transform .45s cubic-bezier(.2,.75,.15,1),
      opacity .24s ease,
      visibility 0s linear .45s;
  }
  .menu-panel.open{
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    transform:translateY(0);
    transition:
      transform .45s cubic-bezier(.2,.75,.15,1),
      opacity .24s ease,
      visibility 0s linear 0s;
  }

  /* Mobile technical copy remains restrained but usable */
  .identity small{font-size:6.5px}
  .label,.eyebrow,.section-topline,.fragment-index,.process-head,.back{font-size:8.5px}
  .desk-project-label p{font-size:8.5px}
  .desk-notes{font-size:8px}
  .coordinates{font-size:7.5px}
  .drawing-card-a span{font-size:7.5px}
  .stage-data div{font-size:8px}
  .work-piece small{font-size:8px}
  .project-cta,.work-cta,.archive-action{font-size:8.5px}
  .project-progress-nav{font-size:8px}
  .material-index{font-size:8px}
  .footer small{font-size:7px}
  .footer-meta{font-size:7px}

  /* 44px touch targets without visually enlarging the labels */
  .project-progress-nav a{min-height:40px;padding:0 3px}
  .menu-toggle{width:36px;height:36px}
  .menu-toggle span{left:6px;width:24px}
}

/* ---------- Motion quality ----------
   Use one clear interaction response rather than excessive effects.
*/
.work-piece figure,
.archive-item figure,
.interactive-media{
  position:relative;
}
.work-piece:focus-visible figure,
.archive-item:focus-visible figure,
.interactive-media:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:5px;
}

/* ---------- Form usability ---------- */
.contact-mini-form input,
.contact-mini-form select,
.contact-mini-form textarea{
  min-height:42px;
}
.contact-mini-form textarea{min-height:88px}
.contact-mini-form button{min-height:44px}

/* ---------- Reduce layout shift ---------- */
.desk-main img,
.desk-tall img,
.stage-large img,
.stage-small img,
.work-piece img,
.archive-item img,
.project-opening-img img{
  object-position:center;
}


/* =========================================================
   V4 CLEAN-ASSET PASS
   Clean high-resolution photo sources only; no mockup crops.
   ========================================================= */
img{
  object-fit:cover;
  object-position:center;
}
.desk-main img,
.stage-large img,
.work-piece-a img,
.archive-wide img,
.project-opening-img img{
  object-position:center 50%;
}
.desk-tall img,
.stage-small img,
.work-piece-b img,
.archive-vertical img{
  object-position:center 45%;
}
.work-piece-c img,
.archive-landscape img{
  object-position:center 42%;
}

/* Deliberately restrained image treatment; no blur/filter tricks. */
.work-piece figure img,
.archive-item figure img,
.project-opening-img img,
.stage-large img,
.stage-small img{
  filter:none;
}


/* =========================================================
   WORK V4.2 — REBUILT PROJECT INDEX
   Stable 12-column compositions; no filler tiles or overlap.
   ========================================================= */

.page-work-v42{
  background:var(--bg);
}

.work-page-v42{
  padding:0 42px 130px;
}

.work-v42-intro{
  min-height:440px;
  padding:90px 0 42px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:2fr 7fr 3fr;
  gap:28px;
  align-items:end;
}

.work-v42-kicker{
  margin:0;
  font:300 9px/1.4 var(--mono);
  letter-spacing:.02em;
}

.work-v42-intro h1{
  margin:0;
  font-size:clamp(86px,10vw,160px);
  line-height:.72;
  font-weight:300;
  letter-spacing:-.065em;
}

.work-v42-note{
  margin:0;
  max-width:320px;
  font-size:12px;
  line-height:1.55;
}

.work-v42-list{
  display:flex;
  flex-direction:column;
}

.work-v42-project{
  min-height:86vh;
  padding:82px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:12px;
  align-items:start;
}

.work-v42-media{
  display:block;
  overflow:hidden;
  background:#d8d5ce;
}

.work-v42-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}

.work-v42-media:hover img,
.work-v42-media:focus-visible img{
  transform:scale(1.018);
}

.work-v42-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.work-v42-type{
  font:300 8.5px/1.2 var(--mono);
  letter-spacing:.04em;
  color:var(--muted);
}

.work-v42-info h2{
  margin:18px 0 18px;
  font-size:clamp(50px,5.2vw,88px);
  line-height:.86;
  font-weight:300;
  letter-spacing:-.05em;
}

.work-v42-meta{
  display:flex;
  gap:18px;
  font:300 8.5px/1.3 var(--mono);
}

.work-v42-info p{
  max-width:330px;
  margin:44px 0 0;
  font-size:12px;
  line-height:1.6;
}

.work-v42-action{
  margin-top:auto;
  padding-top:52px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font:400 9px/1 var(--mono);
  letter-spacing:.04em;
}

.work-v42-action i{
  width:48px;
  height:1px;
  background:currentColor;
  position:relative;
  transition:width .25s ease;
}

.work-v42-action i::after{
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:6px;
  height:6px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}

.work-v42-action:hover i,
.work-v42-action:focus-visible i{
  width:64px;
}

/* CASA — wide architectural field + compact right information */
.project-casa .work-v42-media{
  grid-column:1/9;
  height:68vh;
}
.project-casa .work-v42-info{
  grid-column:10/13;
  min-height:68vh;
}

/* HOUSE — reverse the logic and reduce scale */
.project-house{
  align-items:center;
}
.project-house .work-v42-info{
  grid-column:1/5;
  min-height:62vh;
}
.project-house .work-v42-media{
  grid-column:6/12;
  height:62vh;
}

/* MONOLITH — panoramic final project */
.project-monolith .work-v42-media{
  grid-column:3/13;
  height:62vh;
}
.project-monolith .work-v42-info{
  grid-column:1/3;
  grid-row:1;
  min-height:62vh;
  padding-right:18px;
}
.project-monolith .work-v42-info h2{
  font-size:clamp(43px,4.6vw,76px);
}

@media(max-width:1000px) and (min-width:801px){
  .work-v42-intro{
    grid-template-columns:2fr 6fr 4fr;
  }
  .project-casa .work-v42-media{grid-column:1/9}
  .project-casa .work-v42-info{grid-column:9/13;padding-left:18px}
  .project-house .work-v42-info{grid-column:1/5}
  .project-house .work-v42-media{grid-column:5/13}
  .project-monolith .work-v42-info{grid-column:1/4}
  .project-monolith .work-v42-media{grid-column:4/13}
}

@media(max-width:800px){
  .work-page-v42{
    padding:0 16px 82px;
  }

  .work-v42-intro{
    min-height:390px;
    padding:58px 0 34px;
    display:block;
  }

  .work-v42-kicker{
    font-size:8px;
  }

  .work-v42-intro h1{
    margin:48px 0 38px;
    font-size:26vw;
    line-height:.74;
  }

  .work-v42-note{
    max-width:300px;
    font-size:12px;
  }

  .work-v42-project{
    min-height:0;
    padding:58px 0 72px;
    display:flex;
    flex-direction:column;
  }

  .work-v42-project .work-v42-media,
  .work-v42-project .work-v42-info{
    width:100%;
    height:auto;
    min-height:0;
    padding:0;
  }

  .work-v42-media{
    order:1;
  }

  .work-v42-info{
    order:2;
    margin-top:18px;
  }

  .project-casa .work-v42-media{
    aspect-ratio:1.12;
  }

  .project-house .work-v42-media{
    width:78%;
    margin-left:auto;
    aspect-ratio:.78;
  }

  .project-monolith .work-v42-media{
    aspect-ratio:1.2;
  }

  .work-v42-info h2,
  .project-monolith .work-v42-info h2{
    margin:14px 0 12px;
    font-size:13vw;
    line-height:.88;
  }

  .work-v42-type,
  .work-v42-meta{
    font-size:8px;
  }

  .work-v42-info p{
    max-width:300px;
    margin:28px 0 0;
    font-size:12px;
  }

  .work-v42-action{
    margin-top:26px;
    padding-top:0;
    font-size:8.5px;
  }
}