/* TG Living — "Designed for the art of living"
   Brand taken from @tgliving_: ivory ground, sage field, Didone display, a fine gold rule. */
:root{
  --ivory:#fbf7f1;
  --stone:#efe9e0;
  --stone-2:#e6dfd3;
  --ink:#1a1a18;
  --ink-2:#3a3934;
  --muted:#77736b;
  --sage:#8a9e9d;
  --sage-deep:#5d7170;
  --sage-ink:#fbf7f1;
  --gold:#a08356;
  --night:#141412;

  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Jost","Futura","Avenir Next",Helvetica,Arial,sans-serif;

  --fs-hero:clamp(3.2rem,8.4vw,9.5rem);
  --fs-h1:clamp(2.8rem,6.4vw,7rem);
  --fs-h2:clamp(2.1rem,4.2vw,4.4rem);
  --fs-h3:clamp(1.5rem,2.1vw,2.1rem);
  --fs-lead:clamp(1.15rem,1.05rem + .45vw,1.5rem);
  --fs-body:1.0625rem;
  --fs-small:.8125rem;

  --gut:max(20px,env(safe-area-inset-left,0px));
  --gut-r:max(20px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --header:84px;
}
@media (min-width:900px){:root{--gut:max(48px,env(safe-area-inset-left,0px));--gut-r:max(48px,env(safe-area-inset-right,0px))}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ivory);color:var(--ink);font:300 var(--fs-body)/1.65 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:.98;text-wrap:balance}
::selection{background:var(--sage);color:var(--ivory)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}
.wrap{padding-left:var(--gut);padding-right:var(--gut-r)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* meta text: the brand's small spaced capitals, used sparingly */
.meta{font:400 .75rem/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase}
.rule{display:block;width:64px;height:1px;background:var(--gold)}
.italic{font-style:italic}

/* ---------- buttons & links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:56px;padding:0 32px;font:400 .78rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;border:1px solid currentColor;background:transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.btn:hover{color:var(--ivory)}
.btn:hover::before{transform:none}
.btn.solid{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn.solid::before{background:var(--gold)}
.btn.light{color:var(--ivory)}
.btn.light::before{background:var(--ivory)}
.btn.light:hover{color:var(--ink)}
.btn .arr{display:inline-block;transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.ulink{position:relative;display:inline-block;padding-bottom:3px}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .7s var(--ease)}
.ulink:hover::after{animation:uline .9s var(--ease)}
@keyframes uline{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* ---------- logo ---------- */
.logo svg{display:block;height:46px;width:auto}
.logo text{font-family:var(--display)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--ink);transition:transform .7s var(--ease),background-color .5s,color .5s}
.hdr .wrap{height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.hdr nav{display:flex;gap:36px}
.hdr nav a,.hdr .right a:not(.btn){font:400 .75rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
.hdr .right{display:flex;justify-content:flex-end;align-items:center;gap:32px}
.hdr .btn{height:44px;padding:0 22px}
.hdr.on-dark{color:var(--ivory)}
.hdr.on-dark .btn.light::before{background:var(--ivory)}
.hdr.scrolled{background:color-mix(in srgb,var(--ivory) 94%,transparent);color:var(--ink)}
.hdr.hide{transform:translateY(-100%)}
.menu-btn{display:none;background:none;border:0;padding:8px 0;cursor:pointer;font:400 .75rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
@media (max-width:900px){
  .hdr nav,.hdr .right .loc{display:none}
  .menu-btn{display:block;justify-self:start}
  .hdr .wrap{grid-template-columns:1fr auto 1fr;--header:72px}
  .hdr .btn{height:40px;padding:0 14px;letter-spacing:.14em}
  .logo svg{height:38px}
}
.drawer{position:fixed;inset:0;z-index:60;background:var(--sage);color:var(--sage-ink);display:flex;flex-direction:column;justify-content:space-between;padding:calc(28px + env(safe-area-inset-top,0px)) var(--gut-r) calc(32px + env(safe-area-inset-bottom,0px)) var(--gut);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);visibility:hidden}
.drawer.open{clip-path:inset(0);visibility:visible}
.drawer ul{display:grid;gap:12px}
.drawer ul a{font:400 clamp(2.4rem,11vw,4rem)/1.05 var(--display)}
.drawer .close{align-self:flex-end;background:none;border:0;cursor:pointer;font:400 .75rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:inherit}

/* ---------- preloader & page curtain ---------- */
.curtain{position:fixed;inset:0;z-index:100;background:var(--ivory);display:grid;place-items:center;pointer-events:none}
.curtain svg{height:96px;width:auto}
.curtain .ln{transform-origin:50% 50%}
.no-js .curtain,.curtain.gone{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;color:var(--ivory);overflow:hidden;background:var(--night)}
.hero .slides,.hero .slide{position:absolute;inset:0}
.hero .slide{opacity:0;transition:opacity 1.6s ease}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 9s linear}
.hero .slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,13,.38) 0%,rgba(15,15,13,0) 28%,rgba(15,15,13,0) 52%,rgba(15,15,13,.62) 100%);pointer-events:none}
.hero .copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:calc(44px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px}
.hero h1{font-size:var(--fs-hero);max-width:11ch;line-height:.92}
.hero .side{display:grid;gap:20px;justify-items:end;text-align:right;max-width:300px}
.hero .side p{font-size:var(--fs-body)}
.hero .cap{display:flex;gap:14px;align-items:center}
.hero .bars{display:flex;gap:8px}
.hero .bars i{display:block;width:44px;height:1px;background:rgba(251,247,241,.35);overflow:hidden;position:relative}
.hero .bars i b{position:absolute;inset:0;background:var(--ivory);transform:scaleX(0);transform-origin:left}
.hero .bars i.on b{animation:bar 6s linear forwards}
.hero .bars i.done b{transform:scaleX(1)}
@keyframes bar{to{transform:scaleX(1)}}
@media (max-width:760px){.hero .copy{grid-template-columns:1fr}.hero .side{justify-items:start;text-align:left}}

/* ---------- reveal helpers (states set by JS only) ---------- */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:inline-block;will-change:transform}
.clip{overflow:hidden}
.clip img{will-change:transform}

/* ---------- manifesto ---------- */
.manifesto{padding-block:clamp(120px,16vw,220px) clamp(100px,12vw,180px)}
.manifesto .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:start}
.manifesto .k{grid-column:1/4;padding-top:1.4em}
.manifesto h2{grid-column:4/13;font-size:var(--fs-h1)}
.manifesto .body{grid-column:7/12;margin-top:56px;display:grid;gap:22px;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2)}
.manifesto .body .btn{justify-self:start;margin-top:12px}
.manifesto .pics{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(80px,10vw,140px);align-items:end}
.manifesto .pics figure:nth-child(1){grid-column:1/6}
.manifesto .pics figure:nth-child(2){grid-column:7/10;margin-bottom:18%}
.manifesto .pics figure:nth-child(3){grid-column:10/13;margin-bottom:-12%}
.manifesto figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.manifesto figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
@media (max-width:900px){
  .manifesto .k,.manifesto h2,.manifesto .body{grid-column:1/-1}
  .manifesto h2{margin-top:20px}
  .manifesto .body{margin-top:36px}
  .manifesto .pics figure:nth-child(1){grid-column:1/-1}
  .manifesto .pics figure:nth-child(2){grid-column:1/7;margin:0}
  .manifesto .pics figure:nth-child(3){grid-column:7/13;margin:0}
}

/* ---------- objects: horizontal gallery of cut-out pieces ---------- */
.objects{position:relative;background:var(--stone);overflow:hidden}
.objects .head{display:flex;justify-content:space-between;align-items:end;gap:32px;padding-top:clamp(100px,10vw,150px)}
.objects h2{font-size:var(--fs-h2);max-width:12ch}
.objects .head p{max-width:34ch;color:var(--ink-2)}
.track{display:flex;gap:clamp(32px,5vw,96px);padding:clamp(56px,7vw,100px) var(--gut-r) clamp(100px,10vw,150px) var(--gut);width:max-content}
.obj{display:grid;gap:22px;width:clamp(240px,26vw,400px);flex:none}
.obj .stage{position:relative;aspect-ratio:1/1}
.obj .stage::after{content:"";position:absolute;left:14%;right:14%;bottom:7%;height:7%;background:radial-gradient(closest-side,rgba(40,34,26,.22),rgba(40,34,26,0));z-index:0}
.obj .stage img{position:absolute;z-index:1;left:50%;bottom:10%;width:auto;height:auto;max-height:80%;max-width:92%;transform:translateX(-50%);transition:transform 1s var(--ease)}
.obj:hover .stage img{transform:translate(-50%,-10px)}
.obj .nm{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--stone-2);padding-top:16px}
.obj h3{font-size:var(--fs-h3)}
.obj .meta{color:var(--muted)}
@media (max-width:900px){.objects .head{flex-direction:column;align-items:start}.track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.track::-webkit-scrollbar{display:none}.obj{width:72vw;scroll-snap-align:start}}

/* ---------- volumes index ---------- */
.volumes{padding-block:clamp(120px,14vw,200px)}
.volumes .top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-bottom:64px}
.volumes .top .meta{grid-column:1/4;padding-top:1em}
.volumes .top h2{grid-column:4/10;font-size:var(--fs-h2)}
.volumes .top p{grid-column:4/10;margin-top:24px;color:var(--ink-2);max-width:48ch}
.vlist{border-top:1px solid var(--stone-2)}
.vrow{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--stone-2);transition:color .5s}
.vrow .n{grid-column:1/2;font-family:var(--display);font-size:1.2rem;color:var(--muted)}
.vrow .nm{grid-column:2/7;display:flex;align-items:baseline;gap:22px}
.vrow .nm b{font:400 clamp(2.6rem,5.6vw,6rem)/1 var(--display);letter-spacing:-.02em;transition:transform .8s var(--ease)}
.vrow .nm span{font:400 clamp(1.4rem,2vw,2rem)/2 "Noto Nastaliq Urdu",serif;color:var(--muted)}
.vrow .mood{grid-column:7/10;color:var(--ink-2)}
.vrow .cnt{grid-column:10/13;justify-self:end;color:var(--muted)}
.vlist:hover .vrow{color:var(--muted)}
.vlist .vrow:hover{color:var(--ink)}
.vrow:hover .nm b{transform:translateX(18px)}
.vpeek{position:fixed;left:0;top:0;width:min(26vw,360px);aspect-ratio:4/5;pointer-events:none;z-index:40;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .4s,transform .6s var(--ease)}
.vpeek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vpeek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.vpeek img.on{opacity:1}
@media (max-width:900px){
  .volumes .top .meta,.volumes .top h2,.volumes .top p{grid-column:1/-1}
  .vrow{grid-template-columns:auto 1fr auto;gap:8px 16px;padding:24px 0}
  .vrow .n{grid-column:1}.vrow .nm{grid-column:2}.vrow .cnt{grid-column:3}
  .vrow .mood{grid-column:2/4;font-size:.95rem}
  .vpeek{display:none}
}

/* ---------- feature: one large photograph ---------- */
.feature{position:relative;height:120svh;overflow:hidden;color:var(--ivory)}
.feature img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,15,13,.55),rgba(15,15,13,0) 50%)}
.feature .copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:64px;display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.feature h2{font-size:var(--fs-h1);max-width:12ch}

/* ---------- pin to piece (sage) ---------- */
.pin{background:var(--sage);color:var(--sage-ink);padding-block:clamp(120px,14vw,200px)}
.pin .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.pin .intro{grid-column:1/6}
.pin h2{font-size:var(--fs-h1)}
.pin .intro p{margin-top:28px;font-size:var(--fs-lead);max-width:30ch;line-height:1.5}
.pin .rule{margin-top:36px;background:var(--ivory);opacity:.7}
.steps{grid-column:7/13;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px 0;border-top:1px solid rgba(251,247,241,.3)}
.steps li:last-child{border-bottom:1px solid rgba(251,247,241,.3)}
.steps li::before{content:counter(s,upper-roman);font:400 1.4rem/1.2 var(--display);opacity:.8}
.steps h3{font-size:var(--fs-h3)}
.steps p{margin-top:8px;opacity:.88;max-width:44ch}
.maker{grid-column:1/13;margin-top:clamp(80px,9vw,130px);background:var(--ivory);color:var(--ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.maker .side{padding:clamp(32px,4vw,64px);display:grid;align-content:space-between;gap:32px;background:var(--stone)}
.maker .side h3{font-size:var(--fs-h2)}
.maker .side p{color:var(--ink-2);max-width:34ch}
.maker form{padding:clamp(32px,4vw,64px);display:grid;gap:26px}
.field{display:grid;gap:10px}
.field label{color:var(--muted)}
.field input,.field select,.field textarea{font:300 1.15rem/1.4 var(--body);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--stone-2);padding:10px 0 12px;border-radius:0;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.field select{background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) calc(100% - 10px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) calc(100% - 4px) 55%/6px 6px no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field textarea{resize:vertical;min-height:52px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.maker .preview{font-size:.95rem;color:var(--muted);background:var(--stone);padding:18px 20px;white-space:pre-wrap}
@media (max-width:900px){.pin .intro,.steps,.maker{grid-column:1/-1}.steps{margin-top:56px}.maker{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

/* ---------- instagram ---------- */
.ig{padding-block:clamp(110px,12vw,170px)}
.ig .head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.ig h2{font-size:var(--fs-h2)}
.ig .grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ig .grid a{display:block;overflow:hidden;aspect-ratio:4/5}
.ig .grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ig .grid a:hover img{transform:scale(1.06)}
@media (max-width:900px){.ig .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- footer ---------- */
.ftr{background:var(--night);color:var(--ivory);padding-top:clamp(100px,11vw,160px);overflow:hidden}
.ftr .cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;padding-bottom:clamp(80px,9vw,130px)}
.ftr .cta h2{grid-column:1/9;font-size:var(--fs-h1)}
.ftr .cta .acts{grid-column:9/13;display:grid;gap:14px;justify-items:start}
.ftr .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:44px;border-top:1px solid rgba(251,247,241,.16)}
.ftr .cols .meta{color:rgba(251,247,241,.55);margin-bottom:14px}
.ftr .cols li{margin-bottom:6px}
.ftr .cols a:hover{color:var(--gold)}
.ftr .mega{display:grid;justify-items:center;gap:clamp(18px,2.4vw,36px);padding-block:clamp(56px,7vw,110px) clamp(48px,6vw,90px);color:var(--ivory)}
.ftr .mega svg{width:min(78vw,880px);height:auto}
.ftr .mega p{font:400 clamp(.7rem,1.1vw,1rem)/1 var(--body);letter-spacing:.5em;text-transform:uppercase;text-indent:.5em;color:rgba(251,247,241,.7)}
.ftr .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));font-size:var(--fs-small);color:rgba(251,247,241,.55);border-top:1px solid rgba(251,247,241,.16)}
.ftr .legal a{color:rgba(251,247,241,.8)}
@media (max-width:900px){.ftr .cta h2,.ftr .cta .acts{grid-column:1/-1}.ftr .cols{grid-template-columns:1fr 1fr}}

/* ---------- collection page ---------- */
.page-head{padding-top:calc(var(--header) + clamp(80px,10vw,150px));padding-bottom:clamp(48px,6vw,80px)}
.page-head .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.page-head .meta{grid-column:1/4;color:var(--muted)}
.page-head h1{grid-column:1/9;font-size:var(--fs-h1);margin-top:18px}
.page-head p{grid-column:9/13;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5}
@media (max-width:900px){.page-head .meta,.page-head h1,.page-head p{grid-column:1/-1}}
.filters{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ivory) 94%,transparent);border-block:1px solid var(--stone-2);transition:top .7s var(--ease)}
body.hdr-visible .filters{top:var(--header)}
.filters .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px}
.fl{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;padding-block:4px}
.fl::-webkit-scrollbar{display:none}
.fl button{flex:none;background:none;border:0;padding:6px 0;cursor:pointer;font:400 .75rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);position:relative;transition:color .3s}
.fl button sup{font-size:.62rem;margin-left:4px;letter-spacing:0}
.fl button::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.fl button:hover{color:var(--ink)}
.fl button[aria-pressed="true"]{color:var(--ink)}
.fl button[aria-pressed="true"]::after{transform:none}
.vsel{flex:none;font:400 .75rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;background:transparent;border:0;color:var(--ink);padding:8px 22px 8px 0;-webkit-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) calc(100% - 8px) 50%/5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) calc(100% - 3px) 50%/5px 5px no-repeat}
.vol-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:72px 8px}
.vol-intro .n{grid-column:1/3;font:400 3rem/1 var(--display);color:var(--gold)}
.vol-intro h2{grid-column:3/8;font-size:var(--fs-h2)}
.vol-intro h2 span{font:400 .5em/2 "Noto Nastaliq Urdu",serif;color:var(--muted);margin-left:.4em}
.vol-intro p{grid-column:8/13;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5}
@media (max-width:900px){.vol-intro .n,.vol-intro h2,.vol-intro p{grid-column:1/-1}}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,80px) clamp(16px,2vw,32px);padding-block:56px clamp(120px,12vw,180px)}
.pgrid .card:nth-child(6n+1){grid-column:span 2}
.pgrid .card:nth-child(6n+1) .ph{aspect-ratio:16/10}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.pgrid .card:nth-child(6n+1){grid-column:span 2}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}.pgrid .card:nth-child(6n+1){grid-column:auto}.pgrid .card:nth-child(6n+1) .ph{aspect-ratio:4/5}}
.card{display:grid;gap:18px}
.card .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.card .ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .8s}
.card .ph.cut{display:block}
.card .ph.cut::after{content:"";position:absolute;left:18%;right:18%;bottom:8%;height:6%;background:radial-gradient(closest-side,rgba(40,34,26,.2),rgba(40,34,26,0))}
.card .ph.cut>img:not(.alt){position:absolute;inset:auto;left:50%;bottom:11%;z-index:1;width:auto;height:auto;max-width:80%;max-height:76%;object-fit:contain;transform:translateX(-50%)}
.card .ph .alt{opacity:0}
.card:hover .ph:not(.cut)>img{transform:scale(1.04)}
.card .ph.cut:hover>img:not(.alt){transform:translate(-50%,-8px)}
.card .ph.has-alt:hover>img:not(.alt){opacity:0}
.card .ph.has-alt:hover .alt{opacity:1}
.card .ph .alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;max-height:none;z-index:2;transition:opacity .8s}
.card .tx{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card h3{font-size:clamp(1.35rem,1.6vw,1.75rem);line-height:1.1}
.card .meta{color:var(--muted);white-space:nowrap}
.card .ds{color:var(--ink-2);margin-top:-8px;font-size:.98rem;max-width:40ch}
.empty{padding:80px 0;color:var(--muted)}

/* ---------- piece page ---------- */
.piece{padding-top:var(--header)}
.piece .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 clamp(32px,5vw,96px)}
.gallery{display:grid;gap:12px;padding-top:24px}
.gallery figure{overflow:hidden;background:var(--stone)}
.gallery figure img{width:100%;height:auto}
.gallery figure.cut{aspect-ratio:1/1;position:relative}
.gallery figure.cut::after{content:"";position:absolute;left:20%;right:20%;bottom:9%;height:5%;background:radial-gradient(closest-side,rgba(40,34,26,.2),rgba(40,34,26,0))}
.gallery figure.cut img{position:absolute;z-index:1;left:50%;bottom:12%;width:auto;height:auto;max-width:78%;max-height:76%;transform:translateX(-50%)}
.info{position:sticky;top:calc(var(--header) + 24px);align-self:start;padding-block:56px 80px;display:grid;gap:26px}
.crumbs{color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.info h1{font-size:clamp(2.6rem,4.6vw,4.8rem)}
.info .lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2)}
.specs{border-top:1px solid var(--stone-2)}
.specs div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--stone-2)}
.specs dt{color:var(--muted)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--stone-2);background:none;cursor:pointer;font:400 .9rem/1 var(--body);transition:border-color .3s}
.sw i{width:22px;height:22px;border-radius:50%;display:block}
.sw:hover{border-color:var(--muted)}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.info .acts{display:grid;gap:12px}
.info .acts .btn{width:100%}
.info .note{font-size:var(--fs-small);color:var(--muted)}
.pnav{display:flex;justify-content:space-between;gap:24px;padding-block:40px;border-top:1px solid var(--stone-2);margin-top:clamp(80px,8vw,120px)}
.pnav a{display:grid;gap:6px;max-width:45%}
.pnav a:last-child{text-align:right}
.pnav b{font:400 clamp(1.5rem,2.4vw,2.4rem)/1.1 var(--display)}
.pnav .meta{color:var(--muted)}
.related{padding-block:clamp(80px,9vw,140px)}
.related h2{font-size:var(--fs-h2);margin-bottom:48px}
.related .pgrid{padding:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.related .pgrid .card:nth-child(6n+1){grid-column:auto}
.related .pgrid .card:nth-child(6n+1) .ph{aspect-ratio:4/5}
@media (max-width:1000px){.piece .grid{grid-template-columns:1fr}.info{position:static;padding-top:40px}.related .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- bespoke page ---------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:clamp(100px,11vw,170px);align-items:center}
.split figure{grid-column:1/7}
.split figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split .tx{grid-column:8/13;display:grid;gap:24px}
.split .tx h2{font-size:var(--fs-h2)}
.split .tx p{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5}
.split.rev figure{grid-column:7/13;order:2}
.split.rev .tx{grid-column:1/6}
.faq{padding-block:clamp(100px,11vw,160px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.faq h2{grid-column:1/5;font-size:var(--fs-h2)}
.faq dl{grid-column:6/13;border-top:1px solid var(--stone-2)}
.faq details{border-bottom:1px solid var(--stone-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:26px 0;font:400 var(--fs-h3)/1.2 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:300;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 28px;color:var(--ink-2);max-width:60ch}
@media (max-width:900px){.split figure,.split .tx,.split.rev figure,.split.rev .tx,.faq h2,.faq dl{grid-column:1/-1;order:0}}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:90;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);pointer-events:none;display:grid;place-items:center;transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background-color .4s,opacity .3s;opacity:0}
.cursor span{font:400 .62rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);opacity:0;transition:opacity .3s}
.cursor.big{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--ink)}
.cursor.big span{opacity:1}
.cursor.show{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ivory);padding:14px 20px;font-size:var(--fs-small);letter-spacing:.06em;z-index:95}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .hero .slide img{transform:none}
}

/* header button follows the header's ink */
.hdr .btn.light{color:currentColor}
.hdr:not(.on-dark) .btn.light::before{background:var(--ink)}
.hdr:not(.on-dark) .btn.light:hover{color:var(--ivory)}
.fl{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent);padding-right:40px}

/* phone carousel: keep the gutter when snapping, show it can be swiped */
.swipe{display:none}
@media (max-width:900px){
  .track{scroll-padding-inline:var(--gut) var(--gut-r);padding-top:40px;gap:28px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .obj{width:78vw}
  .obj .stage img{max-height:86%}
  .swipe{display:flex;align-items:center;gap:14px;color:var(--muted);margin-top:28px}
  .swipe i{display:block;width:120px;height:1px;background:var(--stone-2);position:relative;overflow:hidden}
  .swipe i b{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,.08))}
}