/* ARTILIER — Work & Capabilities page. Extends artilier-v2.css */

/* ── page head ── */
.wp-hd{padding:132px var(--pad) clamp(30px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.wp-hd .lb{display:block;margin-bottom:20px}
.wp-hd .d1{max-width:16ch}
.wp-hd .bd{max-width:50ch}
.wp-meta{margin-top:24px;display:flex;gap:26px;flex-wrap:wrap;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.wp-meta b{color:var(--ink);font-weight:400}
@media(max-width:1080px){.wp-hd{grid-template-columns:1fr;align-items:start}}

/* ── filter ── */
.filt{position:sticky;top:0;z-index:80;background:rgba(247,243,235,.94);backdrop-filter:blur(14px);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.filt-in{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;padding:14px var(--pad)}
.filt button{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);padding:5px 0;border-bottom:1px solid transparent;transition:color .3s var(--e),border-color .3s var(--e)}
.filt button:hover{color:var(--ink)}
.filt button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--rust)}
.filt .fc{margin-left:auto;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3)}
@media(max-width:760px){.filt .fc{display:none}.filt-in{gap:6px 18px}}

/* ── chapter shell ── */
.ch{padding:clamp(52px,7vw,104px) var(--pad);border-bottom:1px solid var(--sand)}
.ch.alt{background:var(--bone)}
.ch-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(22px,3vw,40px)}
.ch-ix{font-family:var(--s);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--rust);display:block;margin-bottom:14px}
.ch-t{font-family:var(--d);font-weight:400;font-size:clamp(30px,3.7vw,54px);line-height:1.08;letter-spacing:-.003em}
.ch-t .it{color:var(--rust)}
.ch-d{font-size:16px;line-height:1.72;color:var(--tx-2);font-weight:300;max-width:56ch}
.ch-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 10px}
.ch-tags span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);border:1px solid var(--stone);padding:5px 10px}
.ch.alt .ch-tags span{border-color:var(--sand)}
@media(max-width:900px){.ch-hd{grid-template-columns:1fr;align-items:start}}

/* ── flexible media grid: 12 cols, add as many items as you like ── */
.mg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.7vw,24px)}
.mgi{grid-column:span 6;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.mgi.s2{grid-column:span 2}.mgi.s3{grid-column:span 3}.mgi.s4{grid-column:span 4}.mgi.s5{grid-column:span 5}
.mgi.s6{grid-column:span 6}.mgi.s7{grid-column:span 7}.mgi.s8{grid-column:span 8}.mgi.s9{grid-column:span 9}
.mgi.s12{grid-column:span 12}
.mgi .ph{position:relative;overflow:hidden;background:var(--bone);aspect-ratio:4/3}
.ch.alt .mgi .ph{background:var(--stone)}
.mgi .ph.r-11{aspect-ratio:1}.mgi .ph.r-43{aspect-ratio:4/3}.mgi .ph.r-34{aspect-ratio:3/4}
.mgi .ph.r-45{aspect-ratio:4/5}.mgi .ph.r-32{aspect-ratio:3/2}.mgi .ph.r-23{aspect-ratio:2/3}
.mgi .ph.r-169{aspect-ratio:16/9}.mgi .ph.r-219{aspect-ratio:21/9}.mgi .ph.r-32t{aspect-ratio:5/7}
.mgi figcaption{display:flex;justify-content:space-between;gap:14px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3)}
.mgi figcaption b{color:var(--ink);font-weight:400}
/* a note block can sit in the grid like a media item */
.mgi.note{justify-content:center;background:var(--bone);border-top:2px solid var(--rust);padding:clamp(18px,2.4vw,34px)}
.ch.alt .mgi.note{background:var(--paper)}
.mgi.note .q{font-family:var(--d);font-size:clamp(19px,1.8vw,26px);line-height:1.3;letter-spacing:0}
.mgi.note p{margin-top:14px;font-size:13.5px;line-height:1.65;color:var(--tx-2)}
.mgi.note .lb{display:block;margin-bottom:12px}
@media(max-width:900px){
.mgi.s2,.mgi.s3,.mgi.s4,.mgi.s5{grid-column:span 6}
.mgi.s7,.mgi.s8,.mgi.s9{grid-column:span 12}
}
@media(max-width:600px){.mgi,.mgi.s2,.mgi.s3,.mgi.s4,.mgi.s5,.mgi.s6,.mgi.s7{grid-column:span 12}}

/* ── extended capabilities ── */
.ext-sec{background:var(--espresso);color:var(--paper);padding:clamp(56px,7vw,110px) var(--pad)}
.ext-sec .lb{color:var(--brass-l)}
.ext-sec .ch-d{color:rgba(247,243,235,.66)}
.ext-sec .ch-t{color:var(--paper)}
.ext-sec .ch-t .it{color:var(--brass-l)}
.ext-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(12px,1.6vw,20px)}
.ex{min-width:0}
.ex .ph{position:relative;aspect-ratio:1;overflow:hidden;background:#2F251D}
.ex .bar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 0 0}
.ex .nm{font-family:var(--d);font-size:20px;color:var(--paper)}
.ex .nm:hover{color:var(--brass-l)}
.ex .tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-l)}
.ex p{margin-top:7px;font-size:13px;line-height:1.6;color:rgba(247,243,235,.6)}
.ext-sec media-slot,.ext-sec image-slot{--is-empty-bg:#2F251D;--ms-tag:#C4A667;--ms-tag-bd:rgba(196,166,103,.5);--ms-tag-bg:rgba(10,8,7,.45);--ms-tag-on:#151110}
.ext-note{margin-top:clamp(28px,3vw,44px);padding-top:20px;border-top:1px solid rgba(247,243,235,.18);font-size:14px;line-height:1.7;color:rgba(247,243,235,.55);max-width:74ch}

/* ── case study ── */
.cs{padding:clamp(56px,7vw,110px) var(--pad);border-bottom:1px solid var(--sand)}
.cs-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(24px,3vw,42px)}
.cs-facts{display:grid;gap:0;border-top:2px solid var(--rust)}
.cs-facts div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--sand);font-size:14px;color:var(--tx-2)}
.cs-facts b{font-weight:400;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);align-self:center}
.stg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.7vw,24px)}
.st{grid-column:span 3;min-width:0;display:flex;flex-direction:column;gap:11px}
.st.s4{grid-column:span 4}.st.s6{grid-column:span 6}.st.s8{grid-column:span 8}.st.s12{grid-column:span 12}
.st .ph{position:relative;overflow:hidden;background:var(--bone);aspect-ratio:4/5}
.st .ph.r-169{aspect-ratio:16/9}.st .ph.r-219{aspect-ratio:21/9}.st .ph.r-11{aspect-ratio:1}.st .ph.r-43{aspect-ratio:4/3}
.st .cap{display:flex;gap:10px;align-items:baseline}
.st .cn{font-family:var(--d);font-size:19px;color:var(--rust);line-height:1}
.st .ct{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.st .cx{font-size:12.5px;line-height:1.55;color:var(--tx-3)}
@media(max-width:900px){.cs-hd{grid-template-columns:1fr;align-items:start}.st{grid-column:span 6}.st.s4{grid-column:span 6}.st.s8{grid-column:span 12}}
@media(max-width:600px){.st,.st.s4,.st.s6{grid-column:span 12}}

/* ── in-page chapter index ── */
.idx{padding:clamp(36px,4vw,60px) var(--pad);background:var(--bone);border-bottom:1px solid var(--sand)}
.idx-l{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 clamp(20px,3vw,48px)}
.idx-l li{border-bottom:1px solid var(--sand)}
.idx-l a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;font-family:var(--d);font-size:20px;color:var(--tx)}
.idx-l a span{font-family:var(--s);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.idx-l a:hover{color:var(--rust)}

/* ── skip link, mobile nav, form status, case-study flag ── */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.mnav{display:none}
.mnav[hidden]{display:none!important}
@media(max-width:760px){
.mnav{display:grid;position:fixed;top:54px;left:0;right:0;z-index:89;background:rgba(247,243,235,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--sand);padding:10px var(--pad) 20px;gap:0}
.mnav a{padding:13px 0;border-bottom:1px solid var(--sand);font-family:var(--d);font-size:21px;color:var(--tx)}
.mnav a.cta{margin-top:16px;border-bottom:0;font-family:var(--s);font-size:11.5px;justify-content:center}
}
.f-status{font-size:14px;line-height:1.6;color:var(--tx-2)}
.f-status:empty{display:none}
.f-status.ok{color:var(--olive)}
.f-status.err{color:var(--rust-d)}
.f-status em{font-style:normal;display:block;margin-top:6px;font-size:12.5px;color:var(--tx-3)}
.f-hint{font-size:12px;color:var(--tx-3)}
.f input[type="file"]{font-size:13px;padding:9px 0}
.cs-flag{margin-top:16px;padding:12px 14px;background:var(--bone);border-left:2px solid var(--rust);font-size:13.5px;line-height:1.6;color:var(--tx-2)}
.cs-facts [contenteditable]{min-width:120px;text-align:right;outline:none}
.cs-facts [contenteditable]:empty:before{content:attr(data-ph);color:var(--tx-3);font-style:italic}
.cs-facts [contenteditable]:focus{border-bottom:1px solid var(--rust)}

/* ── homepage work: editorial clusters ── */
.wcl{margin-bottom:clamp(44px,6vw,84px)}
.wcl-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:end;padding-bottom:18px;margin-bottom:clamp(14px,2vw,24px);border-bottom:1px solid var(--sand)}
.wcl-hd .lb{display:block;margin-bottom:10px}
.wcl-hd .d3{max-width:24ch}
.wcl-r{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 24px}
.wcl-r .bd-s{max-width:44ch}
.wcl-a{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);border-bottom:1px solid var(--rust);padding-bottom:5px;white-space:nowrap}
.wcl-a:hover{color:var(--rust-d);border-color:var(--rust-d)}
@media(max-width:900px){.wcl-hd{grid-template-columns:1fr;align-items:start}}
.wsm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.7vw,24px)}
.wsm-i{min-width:0;display:flex;flex-direction:column;gap:11px}
.wsm-i .ph{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bone)}
.wsm-i .nm{font-family:var(--d);font-size:19px;line-height:1.2}
.wsm-i .nm em{font-style:normal;font-family:var(--s);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.wsm-i .nm:hover{color:var(--rust)}
@media(max-width:760px){.wsm{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── what we do (homepage) ── */
.wwd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:clamp(22px,4vw,56px);align-items:start;border-top:1px solid var(--sand);padding-top:clamp(22px,3vw,36px)}
.wwd-c h3{font-family:var(--s);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--rust);margin-bottom:16px}
.wwd-c ul{list-style:none;display:grid;gap:0}
.wwd-c li{font-family:var(--d);font-size:20px;padding:10px 0;border-bottom:1px solid var(--sand);color:var(--tx)}
.wwd-c .bd-s{margin-top:16px;max-width:38ch}
.wwd-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bone)}
@media(max-width:900px){.wwd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.wwd-ph{grid-column:span 2;aspect-ratio:16/9}}
@media(max-width:600px){.wwd{grid-template-columns:1fr}.wwd-ph{grid-column:span 1}}

/* ── founder section (homepage) ── */
.fnd{background:var(--bone);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.fnd .founder{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:0;padding-top:0;border-top:0;align-items:center}
.fnd .fo-ph{background:var(--stone)}
@media(max-width:700px){.fnd .founder{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:22px;align-items:start}}

/* seven core cards on the homepage */
.cats.core.seven{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.cats.core.seven .ph{aspect-ratio:3/4}
.ext-list a{color:inherit;display:block}

/* ── selected work (homepage) ── */
.sw{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.7vw,24px)}
.sw-i{grid-column:span 4;min-width:0;display:flex;flex-direction:column;gap:10px}
.sw-i.s3{grid-column:span 3}.sw-i.s4{grid-column:span 4}.sw-i.s5{grid-column:span 5}
.sw-i.s6{grid-column:span 6}.sw-i.s7{grid-column:span 7}.sw-i.s8{grid-column:span 8}.sw-i.s12{grid-column:span 12}
.sw-i .ph{position:relative;overflow:hidden;background:var(--bone);aspect-ratio:4/5}
.sw-i .ph.r-11{aspect-ratio:1}.sw-i .ph.r-43{aspect-ratio:4/3}.sw-i .ph.r-34{aspect-ratio:3/4}
.sw-i .ph.r-169{aspect-ratio:16/9}.sw-i .ph.r-219{aspect-ratio:21/9}.sw-i .ph.r-32{aspect-ratio:3/2}
.sw-i .bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sw-i .nm{font-family:var(--d);font-size:21px;line-height:1.2}
.sw-i .mt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);text-align:right}
.sw-i:hover .nm{color:var(--rust)}
.sw-more{margin-top:clamp(28px,3.5vw,48px);padding-top:22px;border-top:1px solid var(--sand);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.sw-more p{font-size:14.5px;line-height:1.7;color:var(--tx-2);max-width:52ch}
@media(max-width:900px){.sw-i,.sw-i.s3,.sw-i.s4,.sw-i.s5{grid-column:span 6}.sw-i.s7,.sw-i.s8{grid-column:span 12}}
@media(max-width:600px){.sw-i,.sw-i.s3,.sw-i.s4,.sw-i.s5,.sw-i.s6,.sw-i.s7{grid-column:span 12}}

/* ── logo lockup: tagline always visible under the wordmark ── */
.logo{display:inline-grid;justify-items:start;gap:5px;line-height:1}
.logo em{font-family:var(--s);font-style:normal;font-size:8.5px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--rust)}
.logo:hover em{color:var(--rust-d)}
@media(max-width:480px){.logo{font-size:20px}.logo em{font-size:7.5px;letter-spacing:.22em}}

/* ── three core areas ── */
.core3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,32px)}
.c3{min-width:0;display:flex;flex-direction:column}
.c3 .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bone)}
.c3-hd{display:flex;align-items:baseline;gap:14px;margin-top:16px}
.c3-hd .ix{font-size:10.5px;letter-spacing:.2em;color:var(--tx-3)}
.c3-hd .nm{font-family:var(--d);font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:.01em}
.c3-hd .nm:hover{color:var(--rust)}
.c3-s{margin-top:10px;margin-bottom:12px;font-family:var(--d);font-size:19px;line-height:1.3;color:var(--tx-2)}
.c3-t{margin-top:16px;padding-top:14px;min-height:calc(3 * 24px + 14px);border-top:1px solid var(--sand);font-size:14px;line-height:1.7;color:var(--tx-2)}
@media(max-width:900px){.core3{grid-template-columns:1fr}.c3 .ph{aspect-ratio:16/10}.c3-t{min-height:0}}

/* ── selected work: three area chapters ── */
.wcl-s{margin-top:8px;font-family:var(--d);font-size:20px;color:var(--tx-2)}
.wcl-t{font-size:14.5px;line-height:1.7;color:var(--tx-2);max-width:44ch}
.mpair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(12px,1.7vw,24px)}
.mpair.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mpair .mgi{grid-column:auto}
.mpair .ph{aspect-ratio:auto;height:clamp(300px,42vw,620px)}
@media(max-width:700px){.mpair,.mpair.rev{grid-template-columns:1fr}.mpair .ph{height:clamp(260px,70vw,460px)}}

/* ── work page: area dividers & three-area index ── */
.area{padding:clamp(46px,6vw,86px) var(--pad) clamp(26px,3vw,40px);background:var(--paper);border-bottom:1px solid var(--sand)}
.area-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.area-in .lb{display:block;margin-bottom:14px}
.area-t{font-family:var(--d);font-weight:400;font-size:clamp(34px,4.6vw,66px);line-height:1.04;letter-spacing:-.004em}
.area-t .it{color:var(--rust)}
.area-s{margin-top:16px;font-size:16px;line-height:1.7;color:var(--tx-2);max-width:46ch}
.area-t2{font-size:15px;line-height:1.75;color:var(--tx-2);padding-top:14px;border-top:1px solid var(--sand);max-width:46ch}
@media(max-width:900px){.area-in{grid-template-columns:1fr;align-items:start}}
.idx-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.idx-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--rust);font-family:var(--d);font-size:26px}
.idx-h span{font-family:var(--s);font-size:10px;letter-spacing:.2em;color:var(--tx-3)}
.idx-h:hover{color:var(--rust)}
@media(max-width:760px){.idx-3{grid-template-columns:1fr}}

/* nav fits the wider Work-page link set: menu takes over earlier */
@media(max-width:1040px){nav .nl{display:none}nav .burger{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}.mnav{display:grid;position:fixed;top:56px;left:0;right:0;z-index:89;background:rgba(247,243,235,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--sand);padding:10px var(--pad) 20px;gap:0}.mnav a{padding:13px 0;border-bottom:1px solid var(--sand);font-family:var(--d);font-size:21px;color:var(--tx)}.mnav a.cta{margin-top:16px;border-bottom:0;font-family:var(--s);font-size:11.5px;justify-content:center}.mnav[hidden]{display:none!important}}


/* ── capability worlds: technique sub-blocks ── */
.ch .hero-mg{margin-bottom:clamp(30px,4vw,54px)}
.sb{margin-bottom:clamp(34px,4.5vw,64px)}
.sb:last-child{margin-bottom:0}
.sb-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding-bottom:14px;margin-bottom:clamp(12px,1.6vw,20px);border-bottom:1px solid var(--sand)}
.sb-l{font-family:var(--d);font-size:clamp(23px,2.2vw,31px);line-height:1.1}
.sb-d{font-size:14px;line-height:1.65;color:var(--tx-2);max-width:52ch}
.ch.alt .sb-hd{border-bottom-color:var(--stone)}

/* lead + support pairs: equal heights regardless of span */
.mpair.p75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.mpair.p84{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.mpair.p48{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.mpair.p84 .ph,.mpair.p48 .ph{height:clamp(240px,30vw,430px)}
.mpair.p75 .ph{height:clamp(280px,34vw,500px)}

/* ── getting back: breadcrumb, home link, return band ── */
.crumb{position:static;display:flex;align-items:center;gap:10px;padding:96px var(--pad) 0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.crumb a{color:var(--rust)}
.crumb a:hover{color:var(--rust-d)}
.crumb span[aria-current]{color:var(--tx-2)}
.wp-hd{padding-top:clamp(22px,3vw,34px)}

.backhome{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding:clamp(30px,4vw,52px) var(--pad);border-bottom:1px solid var(--sand);background:var(--bone)}
.backhome .cta.ol span{color:inherit}
.backhome-l{display:flex;flex-wrap:wrap;gap:10px 28px}
.backhome-l a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2);border-bottom:1px solid var(--sand);padding-bottom:4px}
.backhome-l a:hover{color:var(--rust);border-bottom-color:var(--rust)}
@media(max-width:1040px){.crumb{padding-top:96px}}
@media(max-width:760px){.crumb{padding-top:86px}}

/* ── bespoke: artwork → development → rug ── */
.bsp{background:var(--bone);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.bsp-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,32px)}
.bs{min-width:0;display:flex;flex-direction:column;border-top:2px solid var(--rust);padding-top:16px}
.bs .bn{font-family:var(--s);font-size:10.5px;letter-spacing:.22em;color:var(--rust)}
.bs .bt{font-family:var(--d);font-size:clamp(24px,2.3vw,32px);line-height:1.1;margin-top:8px}
.bs p{margin:10px 0 18px;font-size:14px;line-height:1.7;color:var(--tx-2)}
.bs .ph{position:relative;margin-top:auto;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.bsp-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(24px,3vw,40px);padding-top:20px;border-top:1px solid var(--sand)}
.bsp-a .bd-s{max-width:56ch}
@media(max-width:820px){.bsp-flow{grid-template-columns:1fr}.bs .ph{aspect-ratio:16/9}}

/* ── collection page: named design grids ── */
.cgs{padding:clamp(46px,6vw,88px) var(--pad);border-bottom:1px solid var(--sand)}
.cgs.alt{background:var(--bone)}
.cgs-hd{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(24px,3vw,42px)}
.cgs-hd .lb{display:block;margin-bottom:14px}
@media(max-width:900px){.cgs-hd{grid-template-columns:1fr;align-items:start}}
.cg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.cgi{min-width:0;display:flex;flex-direction:column;gap:11px}
.cgi .ph{position:relative;overflow:hidden;background:var(--bone);aspect-ratio:3/4}
.cgs.alt .cgi .ph{background:var(--stone)}
.cgi figcaption{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px}
.cgi b{font-family:var(--d);font-weight:400;font-size:clamp(23px,1.9vw,28px);line-height:1.1;letter-spacing:.01em}
.cgi b{grid-column:1;grid-row:1}
.cgi .cgn{grid-column:2;grid-row:1;justify-self:end;font-size:10px;letter-spacing:.2em;color:var(--tx-3)}
.cgi figcaption span[data-mf]{grid-column:1/-1;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.cgi figcaption span[data-mf]:empty{display:none}
.cg-note{margin-top:clamp(24px,3vw,40px);padding-top:16px;border-top:1px solid var(--sand);font-size:13.5px;line-height:1.7;color:var(--tx-3);max-width:78ch}
@media(max-width:760px){.cg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cg{grid-template-columns:1fr}}

/* small screens: headline sizes were set for desktop widths — keep the display
   type from running to five or six lines on a phone */
@media(max-width:520px){
.d1{font-size:36px;line-height:1.06}
.hero-h{font-size:37px;line-height:1.07}
.d2{font-size:29px}
.wp-hd{padding-top:clamp(18px,3vw,26px)}
.area-t{font-size:32px}
.cgs-hd .area-t{font-size:31px}
}

/* ── process diagrams ── */
.pstep .pi{background:var(--bone);padding:10px}
.ch.alt .pstep .pi{background:var(--paper)}
.pg{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);color:var(--tx-3)}
.pg line,.pg rect,.pg circle,.pg ellipse,.pg path{vector-effect:non-scaling-stroke;stroke-linecap:square}
.pstep:hover .pg{color:var(--ink)}

/* ── the two people ── */
.ppl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,72px)}
.prsn{min-width:0;display:grid;grid-template-rows:auto auto 1fr auto}
.prsn-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.prsn-hd{display:grid;gap:7px;margin-top:clamp(18px,2vw,26px);padding-bottom:13px;border-bottom:2px solid var(--rust)}
.prsn-n{font-family:var(--d);font-size:clamp(23px,2.1vw,30px);font-weight:400;line-height:1.1}
.prsn-r{font-family:var(--s);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3)}
.prsn .bd-s{margin-top:16px;max-width:46ch}
.prsn-l{margin-top:16px;padding-top:14px;border-top:1px solid var(--sand);font-family:var(--d);font-style:italic;font-size:clamp(17px,1.4vw,20px);color:var(--tx-2)}
@media(max-width:760px){.ppl{grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,44px)}.prsn-ph{aspect-ratio:3/4}}

/* ── design detail (collection/design.html) ── */
.dtl-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.dtl-media{display:grid;gap:clamp(10px,1.4vw,18px)}
.dtl-media .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bone)}
.dtl-media .ph:first-child{aspect-ratio:16/10}
.dtl-pal{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:clamp(18px,2vw,26px)}
.dtl-sw{display:inline-flex;align-items:center;gap:8px;font-family:var(--s);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.dtl-sw::before{content:"";width:14px;height:14px;border:1px solid var(--sand);background:var(--sw,var(--stone))}
.cgi b a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--e)}
.cgi b a:hover{border-bottom-color:var(--rust)}
@media(max-width:860px){.dtl-in{grid-template-columns:minmax(0,1fr)}}