/* Fabrication page. Existing site type, colours and spacing only. One gutter (--g). Fixed aspect-ratio boxes everywhere, no masonry. */
.fab{--g:16px;--sp:clamp(72px,9vw,140px);background:var(--cream);color:var(--ink)}
.fab img{display:block;width:100%;height:100%}
.fab button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* Gallery: the same component as the work pages (work.css + strip.js). Only the frame ratio is set here, so the layout never jumps between slides. */
.fab .d-img.r43{aspect-ratio:4/3}
.fab .d-img.r169{aspect-ratio:16/9}
.fab .d-img .slide img{object-fit:contain}
.fab .arrow{background:rgba(255,255,255,.92);border:1px solid var(--rule);color:var(--ink);font:400 18px/1 var(--mono);width:44px;height:44px}
.fab .arrow:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.fab .thumbs button{display:block;width:56px;height:56px;border:1px solid var(--hair);background:var(--stone);opacity:.7}
.fab .thumbs button[aria-current="true"]{border-color:var(--ink);opacity:1;outline:1px solid var(--ink)}
.fab .thumbs img{object-fit:cover}
.fab .thumbs{margin-top:var(--g)}
.fab .wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.fab section{margin:0}
.fab .blk{padding-top:var(--sp)}
.fab h2.display{font-size:clamp(34px,4.4vw,64px);margin:0 0 clamp(28px,3.4vw,48px)}
/* hero: one full-bleed landscape photo, no blur, no second picture */
.fab .hero-f{position:relative;min-height:70vh;overflow:hidden;background:var(--black);color:#f2efea;display:flex;align-items:center}
.fab .hero-f .bk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 18%}
.fab .hero-f::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.5) 38%,rgba(10,10,10,0) 68%)}
.fab .hero-f .in{position:relative;z-index:1;width:100%;max-width:1360px;margin:0 auto;padding:calc(72px + 5vh) var(--pad) 5vh}
.fab .hero-f .in>div{max-width:34em}
.fab .hero-f .eyebrow{color:#cfc9c1}
.fab .hero-f h1{margin:0 0 6px}
.fab .hero-f .kick{font:400 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#cfc9c1;margin:0 0 28px}
.fab .hero-f .lead{font:400 clamp(18px,1.6vw,22px)/1.55 var(--sans);max-width:30em;margin:0}
/* facts band */
.fab .facts{background:var(--ink);color:#f2efea}
.fab .facts ul{list-style:none;margin:0 auto;padding:22px var(--pad);max-width:1360px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.fab .facts li{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
/* case studies */
.fab .cs{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:start;margin:0 0 var(--sp)}
.fab .cs:last-child{margin-bottom:0}
.fab .cs.rev .cs-media{order:2}
.fab .cs-text h3{margin:0;font:400 clamp(30px,3.2vw,48px)/1.05 var(--serif)}
.fab .cs-text .yr{margin:10px 0 18px;font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.fab .cs-text p.d{margin:0 0 24px;font:400 17px/1.6 var(--sans);max-width:34em}
.fab .spec{width:100%;border-collapse:collapse;max-width:34em}
.fab .spec th,.fab .spec td{padding:9px 0;text-align:left;vertical-align:top;border-top:1px solid var(--hair);font:400 15px/1.45 var(--sans)}
.fab .spec th{width:34%;font:400 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);padding-right:14px}
/* architectural projects */
.fab .proj{margin:0 0 var(--sp)}
.fab .proj:last-child{margin-bottom:0}
.fab .band{margin-top:var(--g)}   /* holds a vertical YouTube Short (css/yt.css sets the 9:16 frame, centred, at most 80% of the window height) */
.fab .proj .pc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g) clamp(24px,4vw,64px);margin-top:clamp(24px,3vw,40px);align-items:start}
.fab .proj .pc h3{margin:0;font:400 clamp(28px,3vw,44px)/1.1 var(--serif)}
.fab .proj .pc .yr{margin:8px 0 0;font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.fab .proj .pc p{margin:0 0 12px;font:400 17px/1.6 var(--sans);max-width:34em}
.fab .proj .pc .role{font:400 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.fab .proj .pc .btn{margin-top:8px}
/* two decades */
.fab .grid8{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.fab .grid8 button{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--stone)}
.fab .grid8 img{object-fit:cover}
.fab .sec-cap{margin:18px 0 0;font:400 15px/1.5 var(--sans);color:var(--graphite);max-width:40em}
.fab .concepts-line{margin:0;font:400 17px/1.6 var(--sans);max-width:42em}
/* cta */
.fab .cta{margin-top:var(--sp);background:var(--black);color:#f2efea;padding:clamp(56px,7vw,104px) var(--pad);text-align:center}
.fab .cta h2{margin:0 0 28px;font:400 clamp(30px,4vw,56px)/1.1 var(--serif)}
.fab button:focus-visible,.fab a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* mobile */
@media(max-width:860px){
 .fab .hero-f{min-height:60vh}
 .fab .hero-f .in{padding-top:calc(72px + 3vh)}
 .fab .facts ul{grid-template-columns:repeat(2,1fr)}
 .fab .cs{grid-template-columns:1fr}
 .fab .cs.rev .cs-media{order:0}
 .fab .proj .pc{grid-template-columns:1fr}
 .fab .grid8{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.fab *{scroll-behavior:auto!important}}
.fab .btn--ghost{color:var(--ink);border:1px solid var(--rule);padding:17px 26px;background:transparent}
.fab .btn--ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.fab .proj .pc h3{text-transform:none;letter-spacing:0}
@media(max-width:860px){.fab .hero-f .bk{object-position:96% 20%}.fab .hero-f::after{background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.72) 100%)}}