/* Shared navigation and readable supporting text, with collection art direction retained. */
/* Offscreen collage entrance transforms must not widen the mobile viewport. */
html:has(body.home-composition),body.home-composition{overflow-x:clip}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;padding:14px 18px;background:#f4f1eb;color:#0b0614;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.site-header-actions{display:flex;align-items:center;gap:clamp(16px,3vw,40px);font-size:12px;letter-spacing:.08em}
.site-header-actions>a,.site-menu-button{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.site-menu-button{font-size:12px;white-space:nowrap;letter-spacing:.08em}
#menu{overflow-y:auto;padding-top:max(48px,8vh);padding-bottom:max(40px,env(safe-area-inset-bottom));color:var(--ink)}
#menu nav{margin-top:5vh;gap:clamp(10px,2vh,20px)}
#menu nav>a,#menu nav>button{min-height:44px;line-height:1.1}
#menu nav [aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:10px}
#menu .close{min-height:44px}
.collection-heading{white-space:normal;overflow-wrap:break-word}
.collection-kicker,.campaign-section-label,.campaign-bottom,.project-caption span{font-size:12px;line-height:1.6}
.campaign-section-label,.campaign-bottom{flex-wrap:wrap;gap:14px 24px}
.campaign-bottom a,.collection-contact>a{display:inline-flex;align-items:center;min-height:44px}
.projects-index .project-card{max-width:1160px;margin:0 auto clamp(48px,6vw,88px)}
.projects-index .collection-contact{max-width:1160px;margin:48px auto 0}
.project-caption{align-items:baseline;gap:16px 30px}
.project-caption h2{line-height:1.12;overflow-wrap:break-word}
.project-caption span{max-width:46%;text-align:right}
.studio-heading{min-height:0;padding:clamp(36px,5vw,80px) 0 32px;gap:24px}
.studio-heading p{margin:0;font-size:12px;line-height:1.5}
.studio-heading h1{margin:12px 0 24px;font-size:clamp(64px,11vw,170px);line-height:.9}
.studio-heading div{font-size:12px;line-height:1.6;gap:16px;flex-wrap:wrap}
.studio-feature{padding:clamp(44px,6vw,96px) 0;gap:clamp(24px,4vw,64px)}
.studio-selected{padding-top:clamp(40px,5vw,80px)}
.studio-selected-head h1{font:900 clamp(48px,7vw,120px)/.9 Impact,'Arial Narrow',sans-serif;margin:0;letter-spacing:-.035em}
.studio-selected-head{gap:20px;flex-wrap:wrap}
.look-dots{display:flex;flex-wrap:wrap;gap:0;max-width:100%;padding-top:0;margin-right:-8px}
.look-dots button{position:relative;width:36px;height:40px;min-width:36px;padding:0;border:0;background:none!important;border-radius:0}
.look-dots button::after{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--boho-ink,currentColor);border-radius:50%;left:14px;top:16px;background:transparent}
.look-dots button.is-active::after{background:var(--boho-ink,currentColor)}
.look-media{cursor:zoom-in}
.look-media[aria-busy="true"] .look-view{opacity:.65}
.look-info{gap:4px 12px}
.look-view,.look-hint{font-size:12px;letter-spacing:.09em}
.look-media:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:760px){
 .intro,.section-label{font-size:11px;line-height:1.5;letter-spacing:.05em}
 .intro{gap:14px}.intro span:last-child{max-width:48%}
 #projects h1 span,#studio h2 span,#photography h2 span{font-size:10px;letter-spacing:1.2px}
 .endnote{font-size:11px;gap:14px}.endnote a{font-size:11px;line-height:1.6}
 .project-caption span{max-width:none;text-align:left}
 .project-caption h2{font-size:24px}
 .collection-kicker{font-size:12px;line-height:1.6;letter-spacing:1px}
 .studio-heading h1{font-size:18vw;margin:12px 0}
 .studio-selected-head h1{font-size:16vw}
 .site-header-actions{gap:16px;letter-spacing:.04em;font-size:11px}
 .site-header-actions>a{font-size:11px}
 .look-dots button{width:40px;min-width:40px;height:44px}
 .look-dots button::after{left:16px;top:18px}
 .campaign-bottom{font-size:12px}
}
/* The same fitted / original-size viewer is used across the portfolio. */
.zek-lightbox{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:#0b0910;color:#f4f1eb}
.zek-lightbox::backdrop{background:#0b0910}
.zek-lightbox [hidden]{display:none!important}
.zek-lightbox-tools{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:calc(8px + env(safe-area-inset-top)) 20px 8px;background:#0b0910}
.zek-lightbox-tools button,.zek-lightbox-tools a,.zek-lightbox-status button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;font:14px/1.3 Arial,sans-serif;border:1px solid #ffffff45;background:#17141e;color:#fff;text-decoration:none}
.zek-lightbox-count{margin-right:auto;font:12px/1.5 Arial,sans-serif;letter-spacing:.1em;white-space:nowrap}
.zek-lightbox-stage{display:grid;place-items:center;width:100%;height:100%;overflow:auto;padding:calc(76px + env(safe-area-inset-top)) 64px calc(56px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.zek-lightbox-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.zek-lightbox.is-zoomed .zek-lightbox-stage{display:block}
.zek-lightbox.is-zoomed img{max-width:none;max-height:none;margin:auto}
.zek-lightbox-prev,.zek-lightbox-next{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;height:52px;font-size:25px;background:#17141ee6;color:#fff;border:1px solid #ffffff35}
.zek-lightbox-prev{left:8px}.zek-lightbox-next{right:8px}
.zek-lightbox-status{position:absolute;bottom:0;left:0;right:0;min-height:48px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:#0b0910;display:flex;align-items:center;justify-content:center;gap:12px;font:12px/1.5 Arial,sans-serif}
.zek-lightbox-status button{font-size:12px;min-height:32px;padding:6px 10px}
@media(max-width:600px){.zek-lightbox-tools{gap:8px;padding-left:10px;padding-right:10px}.zek-lightbox-tools button,.zek-lightbox-tools a{font-size:12px;padding:8px 10px}.zek-lightbox-count{font-size:10px;letter-spacing:0}.zek-lightbox-stage{padding-left:10px;padding-right:10px}.zek-lightbox-prev,.zek-lightbox-next{top:auto;bottom:10px;transform:none;width:44px;height:40px;z-index:4}.zek-lightbox-status{padding-left:60px;padding-right:60px;font-size:11px;min-height:60px;flex-wrap:wrap;gap:3px 10px}.zek-lightbox-stage{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* On-page previews stay smaller than the viewport; originals belong in the viewer. */
:root{--preview-height:min(68svh,680px)}
.studio-page main,.boho-page main{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(18px,3vw,40px)}
.studio-feature{max-width:min(1160px,140svh);margin-inline:auto;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:clamp(24px,3vw,48px);padding-block:clamp(32px,4vw,56px)}
.studio-feature-visual{min-width:0;gap:16px;justify-items:center;align-items:start}
.studio-feature-visual img{width:auto;max-width:100%;height:auto;max-height:var(--preview-height);object-fit:contain}
.studio-feature-copy{min-width:0}
.studio-feature-copy h2{font-size:clamp(34px,3.5vw,58px);line-height:1;margin-block:18px}
.studio-feature-copy p{margin-bottom:20px}
.studio-selected-head{margin-bottom:clamp(24px,3vw,40px)}
.studio-series-cover,.soft-cover{width:100%;max-width:min(960px,calc(var(--preview-height) * 1.333333 + 24px));margin-inline:auto;gap:20px;align-items:start}
.studio-series-cover a,.soft-cover a{min-width:0;display:flex;justify-content:center;align-items:flex-start}
.studio-series-cover img,.soft-cover img{width:auto;max-width:100%;height:auto;max-height:var(--preview-height);object-fit:contain}
.denim-cover{width:min(100%,960px,calc(var(--preview-height) * 1.47));aspect-ratio:1.47;margin-inline:auto;grid-template-rows:repeat(2,minmax(0,1fr))}
.denim-cover a{min-height:0}
.denim-cover img{object-fit:contain}
.look-card{--look-ratio:.666667;width:min(100%,400px,calc(var(--preview-height) * var(--look-ratio)));justify-self:center}
.studio-denim-collection .look-card{--look-ratio:.5625}
.studio-denim-collection:has(.soft-cover) .look-card{--look-ratio:.666667}
.studio-tailoring .look-card,.fariel-march-collection .look-card,.jewellery-studies-collection .look-card{--look-ratio:.8}
.look-grid:has(>.look-card:nth-child(2):last-child),.activewear-collection .look-grid{max-width:880px;margin-inline:auto}
.boho-hero{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:40px 72px}
.boho-hero-image{justify-self:center;max-width:100%;margin-inline:auto}
.boho-hero-image img{width:auto;max-width:100%;height:auto;max-height:var(--preview-height);object-fit:contain}
.studio-page .collection-grid{max-width:1080px;margin-inline:auto}
.projects-index .project-card{max-width:960px}
main .project-cover{width:100%;max-width:min(960px,calc(var(--preview-height) * 1.333333 + 24px));margin-inline:auto;justify-items:center}
main .project-cover img{width:auto;max-width:100%;height:auto;max-height:var(--preview-height);object-fit:contain}
main .campaign-photo img,main .photo-open img,main .collection-grid img{width:auto;max-width:100%;height:auto;max-height:var(--preview-height);object-fit:contain;margin-inline:auto}
main .campaign-photo{max-width:100%;min-width:0}
main :is(.beyond-opening,.niliwi-opening,.pcm-opening,.pc-opening,.ritual-opening,.fariel-opening)>img,
main :is(.janette-hero,.april-hero,.study-opening,.df-frames) img{width:auto;max-width:100%;height:auto;max-height:var(--preview-height);object-fit:contain;margin-inline:auto}
.zek-lightbox-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.zek-lightbox:not(.is-zoomed) .zek-lightbox-stage img{max-height:calc(100dvh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:100%;min-width:0;min-height:0}
@media(max-width:760px){
 :root{--preview-height:min(66svh,560px)}
 .studio-feature{grid-template-columns:1fr;gap:24px;padding-block:36px}
 .studio-feature-visual{gap:10px;width:100%;max-width:620px;justify-self:center}
 .studio-feature-copy h2{font-size:clamp(32px,9vw,48px)}
 .studio-series-cover,.soft-cover{gap:10px;margin-bottom:28px}
 .boho-hero{padding-top:28px}
 .look-hint{display:none}
 .look-view{left:8px;font-size:12px;padding:7px}
}
@media(max-width:600px){
 .zek-lightbox:not(.is-zoomed) .zek-lightbox-stage img{max-height:calc(100dvh - 168px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}

/* Direct contact and an About entry on every shared navigation. */
.site-header-actions,.site-menu-button{font-size:14px}
.site-header-actions .site-contact-link{font-size:14px;border-bottom:1px solid #ffffff60;min-height:40px}
.zek-lightbox-project{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:4;max-width:calc(100% - 36px);padding:11px 18px;background:#0b0910e8;border:1px solid #ffffff55;font:14px/1.5 Arial,sans-serif;text-align:center;color:#fff}
.zek-lightbox:has(.zek-lightbox-project:not([hidden])) .zek-lightbox-stage{padding-bottom:116px}
.zek-lightbox:not(.is-zoomed):has(.zek-lightbox-project:not([hidden])) .zek-lightbox-stage img{max-height:calc(100dvh - 220px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(max-width:600px){.site-header-actions{gap:16px}.site-header-actions>a:first-child:not(.site-contact-link){display:none}.site-header-actions .site-contact-link,.site-menu-button{font-size:13px}.zek-lightbox-project{bottom:72px;font-size:13px}.zek-lightbox:has(.zek-lightbox-project:not([hidden])) .zek-lightbox-stage{padding-bottom:132px}.zek-lightbox:not(.is-zoomed):has(.zek-lightbox-project:not([hidden])) .zek-lightbox-stage img{max-height:calc(100dvh - 236px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}

.home-header-actions{display:flex;align-items:center;gap:clamp(22px,4vw,48px)}
/* Keep all seven destinations usable at short mobile and desktop heights. */
#menu{overflow-y:auto;padding:70px 8vw 36px}
#menu nav{margin-top:clamp(20px,4vh,45px);gap:clamp(10px,2vh,20px)}
#menu nav>a,#menu nav>button{font-size:clamp(28px,min(6vw,7vh),76px);line-height:1.15;min-height:44px}
#menu p{margin-top:28px}
.home-header-actions>a{font-size:14px;min-height:44px;display:flex;align-items:center;border-bottom:1px solid #ffffff60}
.home-jump{display:flex;flex-wrap:wrap;gap:8px 28px;margin:16px 5% 0}
.home-jump>a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;border-bottom:1px solid #ffffff30}
.collage .section-entry span{display:table!important;border-bottom:1px solid #ffffff65;padding-bottom:9px;min-height:32px;font-size:14px!important;line-height:1.5!important}
@media(max-width:760px){.home-jump{gap:4px 20px}.home-jump>a{font-size:13px}.home-header-actions{gap:22px}.home-header-actions>a{font-size:13px}.collage .section-entry span{font-size:12px!important;letter-spacing:.03em!important;max-width:none!important}}

.campaign p.project-credit,.df-page p.project-credit{font-size:14px;line-height:1.6;letter-spacing:.01em;opacity:.78;max-width:65ch}