/* Jays Phua — one system. TYPE LAW v3 verbatim, one radius token, one accent. */
:root{
  --f :'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fc:'Instrument Serif',Georgia,'Times New Roman',serif;
  --d1  :clamp(44px,12.3vw,80px);
  --d2  :clamp(34px,8.0vw,55px);
  --d3  :clamp(26px,5.4vw,34px);
  --num :clamp(46px,12.3vw,80px);
  --lead:clamp(19px,2.4vw,24px);
  --body:clamp(16px,1.35vw,18px);
  --ui  :17.4px;
  --mono:clamp(12px,1vw,13px);

  --wall:#F5F2EC; --paper:#FBF9F5; --ink:#16130F; --ink2:#1B1712; --muted:#6B655C; --line:rgba(22,19,15,.14);
  --accent:#D6246E; --cobalt:#2340D6; --yellow:#F2C200; --verm:#F0502A;
  --r:14px; --hh:64px; --gut:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--f);font-size:var(--body);font-weight:400;line-height:1.35;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;text-transform:none}
h1{font-size:var(--d1);line-height:.95;letter-spacing:-.03em}
h2{font-size:var(--d2);line-height:1.00;letter-spacing:-.03em}
h3{font-size:var(--d3);line-height:1.10;letter-spacing:-.03em}
p{margin:0}
.em{font-family:var(--fc);font-style:italic;font-weight:400;letter-spacing:-.01em;padding-right:.06em}
h1 .em,h2 .em{font-size:1.06em}
h3 .em{font-size:1.05em}
.t-lead{font-size:var(--lead);line-height:1.30;letter-spacing:-.02em;font-weight:400;max-width:46ch}
.t-mono{font-family:var(--fm);font-size:var(--mono);font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.t-num{font-size:var(--num);line-height:1;letter-spacing:-.05em;font-weight:500;font-variant-numeric:tabular-nums}
.kick{display:flex;align-items:center;gap:10px;margin-bottom:clamp(18px,4.92vw,34px)}
.kick i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.kick span{font-family:var(--fm);font-size:var(--mono);font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.06em}
.muted{color:var(--muted)}
.wrap{padding-inline:var(--gut);max-width:1440px;margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 14px;border-radius:var(--r)}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--gut);background:var(--wall);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hdr.up{transform:translateY(-100%)}
.mark{font-size:21px;font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:8px;line-height:1}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.nav{display:none;gap:30px}
.nav a{font-size:var(--ui);font-weight:600;letter-spacing:normal;position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hcta{display:none;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:var(--r);background:var(--ink);color:var(--wall);font-size:15px;font-weight:600;letter-spacing:-.01em}
.hcta i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.menu-btn{font-size:16px;font-weight:600;letter-spacing:-.01em;height:44px;padding:0 4px;display:inline-flex;align-items:center;gap:10px}
.menu-btn b{display:inline-grid;gap:5px}.menu-btn b span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
@media (min-width:900px){.nav{display:flex}.hcta{display:inline-flex}.menu-btn{display:none}}

/* full-sheet menu (Pentimento) — its own close, no body lock */
.sheet{position:fixed;inset:0;z-index:90;background:var(--wall);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px)) var(--gut) calc(24px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain;overflow-y:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s}
.sheet.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.sheet-top{height:var(--hh);display:flex;align-items:center;justify-content:space-between;flex:none}
.sheet nav{display:flex;flex-direction:column;gap:22px;margin-top:clamp(28px,8vh,64px)}
.sheet nav a{font-size:clamp(28px,8vw,40px);font-weight:600;line-height:1.05;letter-spacing:-.03em;display:block;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.sheet nav a small{display:block;margin-top:7px;font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sheet.open nav a{opacity:1;transform:none}
.sheet.open nav a:nth-child(2){transition-delay:.06s}.sheet.open nav a:nth-child(3){transition-delay:.12s}.sheet.open nav a:nth-child(4){transition-delay:.18s}
.sheet nav a[aria-current="page"]{color:var(--accent)}
.sheet-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:32px}
.sheet-foot a.line{font-size:15px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ---------- buttons (two-tone: pill + chip, both from the brand) ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 5px 0 22px;border-radius:var(--r);font-size:16px;font-weight:600;letter-spacing:-.02em;transition:gap .3s,background .3s}
.btn .chip{width:42px;height:42px;border-radius:calc(var(--r) - 4px);display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn .chip svg{width:18px;height:18px}
.btn:hover .chip{transform:translateX(3px)}
.btn.light{background:var(--paper);color:var(--ink)}.btn.light .chip{background:var(--accent);color:#fff}
.btn.dark{background:var(--ink);color:var(--wall)}.btn.dark .chip{background:var(--accent);color:#fff}
.btn.acc{background:var(--accent);color:#fff}.btn.acc .chip{background:var(--ink2);color:#fff}
.lnk{display:inline-flex;align-items:center;gap:10px;min-height:49px;padding:12px 0;font-size:16px;font-weight:600;letter-spacing:-.01em;border-bottom:2px solid currentColor;transition:gap .3s}
.lnk:hover{gap:12px}.lnk svg{width:16px;height:16px}

/* ---------- HERO 01 — the framed photo ---------- */
.hero{padding:0 8px 8px}
.frame{position:relative;border-radius:var(--r);overflow:clip;height:calc(100svh - var(--hh) - 8px);min-height:560px;max-height:940px;background:var(--ink2)}
.frame picture,.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame img{object-position:50% 30%;transform:scale(1.08);animation:settle 1.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,10,.62) 0%,rgba(18,14,10,.12) 36%,rgba(18,14,10,0) 50%,rgba(18,14,10,.72) 100%);pointer-events:none}
@media (min-width:900px){.frame::after{background:linear-gradient(100deg,rgba(18,14,10,.86) 0%,rgba(18,14,10,.62) 30%,rgba(18,14,10,.12) 58%,rgba(18,14,10,0) 72%),linear-gradient(0deg,rgba(18,14,10,.5) 0%,rgba(18,14,10,0) 30%)}}
.hero h1{position:absolute;z-index:2;top:clamp(22px,4vw,40px);left:clamp(20px,3vw,40px);right:20px;color:#fff;max-width:11ch}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.35em);animation:rise .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.hero-foot{position:absolute;z-index:2;left:clamp(20px,3vw,40px);right:20px;bottom:clamp(20px,3vw,40px);display:grid;gap:18px;justify-items:start;color:#fff}
.hero-foot p{font-size:clamp(16px,1.4vw,18px);font-weight:500;max-width:34ch;opacity:0;animation:rise .8s .55s cubic-bezier(.16,1,.3,1) forwards;transform:translateY(10px)}
.hero-foot .btn{opacity:0;animation:rise .8s .7s cubic-bezier(.16,1,.3,1) forwards;transform:translateY(10px)}

/* ---------- section scaffolding ---------- */
.sec{padding-block:clamp(72px,12vw,150px)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(32px,6vw,64px)}
.sec-head h2{max-width:16ch}
.sec-head p{max-width:46ch}
[data-in]{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-in].in{opacity:1;transform:none}

/* ---------- #close — Pentimento close reading ---------- */
.close{position:relative;height:330svh}
.close-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hh) + 8px) var(--gut) 18px;max-width:1440px;margin-inline:auto}
.close-in{display:grid;gap:16px;width:100%}
.close-head{display:flex;align-items:end;justify-content:space-between;gap:16px}
.close-head h2{max-width:13ch;margin-bottom:12px}
.detail{position:relative;border-radius:var(--r);overflow:clip;aspect-ratio:4/4.1;max-height:52svh;width:100%;background:#ddd}
.detail .pane{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.detail .pane.on{opacity:1}
.detail .pane img{position:absolute;width:100%;height:100%;object-fit:cover;transform-origin:var(--fx) var(--fy);transform:scale(var(--z));transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.detail .pane:not(.on) img{transform:scale(calc(var(--z) * 1.08))}
.close-meta{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.whole{position:relative;width:96px;border-radius:calc(var(--r) - 6px);overflow:clip;flex:none}
.whole img{width:100%;height:auto}
.whole .loc{position:absolute;border:2px solid var(--accent);border-radius:3px;transition:all .7s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 0 999px rgba(22,19,15,.22)}
.close-txt{display:grid;gap:8px;align-content:start;min-height:96px}
.close-txt h3{font-size:clamp(21px,2.5vw,26px);line-height:1.1}
.close-txt .row{display:flex;gap:14px;align-items:center;justify-content:space-between}
.count{font-variant-numeric:tabular-nums}
.ticks{display:flex;gap:6px}.ticks span{width:22px;height:3px;border-radius:2px;background:var(--line);transition:background .4s}.ticks span.on{background:var(--accent)}
.tw{display:none}
@media (max-width:899px){.close-stage{padding-top:12px}}
@media (min-width:900px){
  .close-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center}
  .close-left{display:grid;gap:clamp(28px,4vw,48px)}
  .detail{order:2;aspect-ratio:auto;height:min(72svh,700px);max-height:none}
  .close-meta{grid-template-columns:150px 1fr}.whole{width:150px}
  .tw{display:block}
}

/* ---------- #wall — true scale ---------- */
.wall{position:relative;height:300svh;background:var(--paper)}
.wall-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-top:calc(var(--hh) + clamp(20px,4vh,48px))}
.wall-stage .wrap{width:100%}
.wall-stage h2{max-width:14ch}
.wall-floor{position:relative;flex:1;--cm:clamp(1px,calc((100svh - 300px) / 185),3px)}
.strip{position:absolute;left:var(--gut);bottom:64px;display:flex;align-items:flex-end;gap:calc(var(--cm) * 40);will-change:transform}
.fig{width:calc(var(--cm) * 46);height:calc(var(--cm) * 175);flex:none;color:#cfc9bf}
.fig svg{width:100%;height:100%}
.hang{position:relative;flex:none;margin-bottom:calc(var(--cm) * var(--lift))}
.hang img{width:calc(var(--cm) * var(--w));height:calc(var(--cm) * var(--h));object-fit:cover;border-radius:4px;box-shadow:0 18px 30px -18px rgba(22,19,15,.55)}
.hang figcaption{position:absolute;left:0;top:calc(100% + 10px);white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:-.01em}
.hang figcaption span{color:var(--muted);font-variant-numeric:tabular-nums}
.dim{position:absolute;pointer-events:none;color:var(--accent);opacity:0;transition:opacity .4s}
.dim.h{left:0;right:0;top:-16px;height:1px;background:currentColor}
.dim.v{top:0;bottom:0;right:-16px;width:1px;background:currentColor}
.dim b{position:absolute;font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.04em;white-space:nowrap;background:var(--paper);padding:0 4px}
.dim.h b{left:50%;top:-7px;transform:translateX(-50%)}
.dim.v b{top:50%;left:-2px;transform:translate(-50%,-50%) rotate(-90deg)}
.hang.on .dim,.hang:hover .dim{opacity:1}
.ruler{position:absolute;left:0;right:0;bottom:48px;height:1px;background:var(--ink)}
.ruler-ticks{position:absolute;left:var(--gut);bottom:22px;display:flex;will-change:transform}
.ruler-ticks span{width:calc(var(--cm) * 100);flex:none;font-size:12px;font-weight:500;color:var(--muted);border-left:1px solid var(--ink);padding:10px 0 0 6px;height:26px;font-variant-numeric:tabular-nums}
.wall-hint{position:absolute;right:var(--gut);top:0;display:flex;align-items:center;gap:8px}

/* ---------- #works — Artiox featured collection ---------- */
.works-head{position:sticky;top:calc(var(--hh) + 4px);z-index:5;background:var(--wall);padding-block:14px;display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.works-head h2{max-width:12ch}
.grid{display:grid;gap:clamp(28px,4vw,48px) clamp(16px,2vw,28px)}
.card{display:grid;gap:14px}
.card .ph{position:relative;border-radius:var(--r);overflow:clip;background:#e6e1d8;aspect-ratio:4/5}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .6s}
.card .ph img+img{opacity:0;transform:scale(1.9);transform-origin:var(--fx,50%) var(--fy,50%)}
.card:hover .ph img+img{opacity:1}
.card .ph .zoom{position:absolute;right:10px;bottom:10px;width:42px;height:42px;border-radius:calc(var(--r) - 4px);background:var(--paper);display:grid;place-items:center;z-index:2;transition:background .3s,color .3s}
.card:hover .ph .zoom{background:var(--accent);color:#fff}
.card .ph .zoom svg{width:18px;height:18px}
.card .cap{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .cap h3{font-size:clamp(18px,2.2vw,21px);line-height:1.2;letter-spacing:-.02em}
.card .cap span{color:var(--muted);font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.card.reveal .ph{clip-path:inset(12% 12% 12% 12% round var(--r));transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.card.reveal.in .ph{clip-path:inset(0 0 0 0 round var(--r))}
@media (min-width:760px){.grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .grid .card:nth-child(4n+1){grid-column:span 5}.grid .card:nth-child(4n+2){grid-column:span 7}
  .grid .card:nth-child(4n+3){grid-column:span 7}.grid .card:nth-child(4n+4){grid-column:span 5}
  .grid .card:nth-child(4n+2) .ph,.grid .card:nth-child(4n+3) .ph{aspect-ratio:7/6}
  .grid{column-gap:5vw}.grid .card:nth-child(4n+2),.grid .card:nth-child(4n+4){margin-top:clamp(80px,9vw,150px)}}

/* ---------- #focus — Caspia drifting crops ---------- */
.focus{position:relative;height:240svh;background:var(--ink2);color:var(--wall)}
.focus-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.focus-stage::before{content:"";position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.focus-copy{position:relative;z-index:2;text-align:center;padding-inline:var(--gut);display:grid;gap:20px;justify-items:center}
.focus-copy h2{max-width:11ch}
.focus-copy h2 .em{display:block;color:var(--accent)}
.focus-copy p{max-width:34ch;color:rgba(245,242,236,.78)}
.crop{position:absolute;left:50%;top:50%;width:var(--s);aspect-ratio:var(--ar,4/5);border-radius:var(--r);overflow:clip;--q:calc(.72 + .28 * var(--p,0));transform:translate(-50%,-50%) translate(calc(var(--x) * var(--q)),calc(var(--y) * var(--q))) rotate(calc(var(--rot) * var(--q))) scale(calc(.75 + .5 * var(--p,0)));opacity:calc(.45 + .55 * min(1, var(--p,0) * 1.6));will-change:transform}
.crop img{width:100%;height:100%;object-fit:cover}

/* ---------- #shows — Holm programme cards ---------- */
.shows-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:4px var(--gut) 18px;margin-inline:calc(var(--gut) * -1);scrollbar-width:none}
.shows-rail::-webkit-scrollbar{display:none}
.show{flex:0 0 min(80vw,380px);scroll-snap-align:start;display:grid;gap:14px;align-content:start}
.show .ph{position:relative;border-radius:var(--r);overflow:clip;aspect-ratio:4/5;background:#ddd}
.show .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.show .ph img+img{opacity:0}
.show:hover .ph img+img{opacity:1}
.show:hover .ph img:first-child{transform:scale(1.05)}
.show .tag{position:absolute;z-index:2;left:10px;right:10px;top:10px;display:flex;justify-content:space-between}
.show .tag span{background:var(--paper);color:var(--ink);border-radius:calc(var(--r) - 6px);padding:8px 10px}
.show h3{font-size:clamp(21px,2.5vw,26px)}
.show .meta{display:grid;gap:6px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--muted);font-variant-numeric:tabular-nums}
.show .meta b{color:var(--ink);font-weight:500}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border-radius:var(--r);border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s}
.rail-nav button:hover{background:var(--ink);color:var(--wall)}
.rail-nav svg{width:18px;height:18px}
@media (min-width:900px){.shows-rail{margin-inline:0;padding-inline:0}}

/* ---------- #press — Holm representing panel ---------- */
.press{max-width:1040px;margin-inline:auto;background:var(--paper);border-radius:var(--r);padding:clamp(40px,7vw,90px) clamp(20px,4vw,60px);text-align:center;display:grid;gap:28px;justify-items:center}
.cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 22px;max-width:900px}
.cloud span{font-weight:600;letter-spacing:-.03em;line-height:1.1}
.cloud .l{font-size:clamp(28px,4.4vw,52px)}.cloud .m{font-size:clamp(22px,3.2vw,38px)}.cloud .s{font-size:clamp(18px,2.2vw,26px);color:var(--muted)}
.cloud .it{font-family:var(--fc);font-style:italic;font-weight:400;letter-spacing:-.01em}
.collected{line-height:1.9;max-width:52ch}

/* ---------- #commission — dark closing CTA with paint clip ---------- */
.cta{padding:8px}
.cta-box{position:relative;border-radius:var(--r);overflow:clip;min-height:min(92svh,780px);display:flex;align-items:flex-end;background:var(--ink2);color:#fff}
.cta-box video,.cta-box picture,.cta-box picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-box::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(26,22,19,.38);pointer-events:none}
.cta-box::after{z-index:1;content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,23,18,.18) 0%,rgba(27,23,18,.35) 30%,rgba(27,23,18,.9) 100%)}
.cta-in{position:relative;z-index:2;padding:clamp(22px,4vw,56px);display:grid;gap:22px;justify-items:start}
.cta-in h2{max-width:12ch}
.cta-in .em{color:var(--yellow)}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- footer — colour-cycling wordmark ---------- */
.ftr{padding:clamp(56px,9vw,110px) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));max-width:1440px;margin-inline:auto}
.ftr-top{display:grid;gap:36px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.ftr-top p.t-lead{max-width:24ch}
.ftr-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ftr-cols h4{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ftr-cols a,.ftr-cols p{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;padding-block:5px;font-variant-numeric:tabular-nums}
.ftr-cols a:hover{color:var(--accent)}
.social{display:flex;gap:10px}
.social a{width:44px;height:44px;border-radius:var(--r);background:var(--ink);color:var(--wall);display:grid;place-items:center;transition:background .3s}
.social a:hover{background:var(--accent)}
.social svg{width:20px;height:20px}
.big{font-size:clamp(2.4rem,19vw,17rem);font-weight:600;letter-spacing:-.045em;line-height:.95;white-space:nowrap;margin-top:clamp(28px,5vw,56px);color:var(--accent);animation:cyc 9s steps(1) infinite}
@keyframes cyc{0%{color:var(--accent)}25%{color:var(--cobalt)}50%{color:#E0A800}75%{color:var(--verm)}}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:20px;font-size:13px;color:var(--muted);font-weight:500;letter-spacing:-.01em}
.legal a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){.ftr-top{grid-template-columns:1.2fr 1fr;align-items:end}.ftr-cols{grid-template-columns:repeat(3,1fr)}.legal{padding-right:84px}}
.legal{padding-bottom:70px}@media (min-width:900px){.legal{padding-bottom:0}}

/* ---------- WhatsApp FAB ---------- */
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);transition:transform .3s}
.wa:hover{transform:scale(1.06)}
body.vopen .wa{opacity:0;pointer-events:none}
.wa svg{width:32px;height:32px}

/* ---------- inner pages ---------- */
.phead{padding-block:clamp(36px,8vw,96px) clamp(28px,5vw,56px)}
.phead h1{max-width:20ch}
.phead p{margin-top:22px}
.group{padding-block:clamp(40px,7vw,90px)}
.group-head .t-mono{white-space:nowrap}
.group-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:16px}
.group-head h2{max-width:20ch}
.story{display:grid;gap:32px}
.story .two{font-size:clamp(26px,4.2vw,44px);font-weight:600;line-height:1.08;letter-spacing:-.03em;max-width:24ch}
.story .two span{color:var(--muted)}
.story figure{margin:0;border-radius:var(--r);overflow:clip}
.story figure img{width:100%;height:auto}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair img{border-radius:var(--r);width:100%;aspect-ratio:3/4;object-fit:cover}
.facts{display:grid;gap:0}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-block:16px;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{margin:0}.facts dd{margin:0;font-weight:500}
.xlist{display:grid}
.xrow{display:grid;grid-template-columns:64px 1fr;gap:6px 16px;padding-block:22px;border-top:1px solid var(--line)}
.xrow:first-child{border-top:0}
.xrow:last-child{border-bottom:1px solid var(--line)}
.xrow .yr{font-size:15px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:4px}
.xrow h3{font-size:clamp(18px,2.2vw,21px);line-height:1.2;letter-spacing:-.02em}
.xrow p{grid-column:2;color:var(--muted);font-size:15px;font-weight:500;letter-spacing:-.01em}
@media (min-width:900px){.story{grid-template-columns:1.1fr .9fr;align-items:start;gap:64px}
  .xrow{grid-template-columns:110px 1.3fr 1fr 120px;align-items:baseline}.xrow p{grid-column:auto}.xrow .k{text-align:right}}

/* viewer (bottom sheet / dialog) */
.viewer{position:fixed;inset:0;z-index:95;display:grid;align-items:end;background:rgba(22,19,15,.55);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.viewer.open{opacity:1;visibility:visible;transition:opacity .35s}
.vbox{background:var(--paper);border-radius:var(--r) var(--r) 0 0;padding:14px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));max-height:94svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.viewer.open .vbox{transform:none}
.vtop{display:flex;justify-content:space-between;align-items:center}
.vtop button{width:44px;height:44px;border-radius:var(--r);background:var(--ink);color:var(--wall);display:grid;place-items:center}
.vtop svg{width:18px;height:18px}
.vimg{display:grid;place-items:center;min-height:0}
.vimg img{max-height:62svh;width:auto;max-width:100%;border-radius:calc(var(--r) - 6px);object-fit:contain}
.vbot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.vbot h3{font-size:clamp(21px,2.5vw,26px)}
.vnav{display:flex;gap:8px}.vnav button{width:44px;height:44px;border-radius:var(--r);border:1px solid var(--line);display:grid;place-items:center}
.vnav svg{width:18px;height:18px}
@media (min-width:900px){.viewer{place-items:center}.vbox{width:min(980px,92vw);border-radius:var(--r);transform:translateY(30px) scale(.98)}.vimg img{max-height:70svh}}

/* about quote */
.quote{max-width:22ch}
.quote .em{color:var(--accent)}
/* commission page */
.steps{display:grid;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:48px 1fr;gap:6px 16px;padding-block:22px;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--fm);font-size:14px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:5px}
.step h3{font-size:clamp(18px,2.2vw,21px);line-height:1.2;letter-spacing:-.02em}
.step p{grid-column:2;color:var(--muted)}
.form{display:grid;gap:0;background:var(--paper);border-radius:var(--r);padding:clamp(18px,3vw,36px)}
.frow{display:grid;gap:8px;padding-block:16px;border-bottom:1px solid var(--line)}
.frow label{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.frow input,.frow textarea{font-family:var(--f);font-size:16px;letter-spacing:-.02em;border:0;background:transparent;color:var(--ink);padding:6px 0;outline:none;width:100%;resize:vertical}
.frow input::placeholder,.frow textarea::placeholder{color:#a39c92}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:all .25s}
.chips label{position:relative}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chips input:checked+span{color:#fff}
.chips label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.form .btn{margin-top:22px;justify-self:start;border:0}
.form .note{margin-top:14px;font-size:14px;color:var(--muted)}
@media (min-width:900px){.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-in]{opacity:1;transform:none}
  .big{animation:none}
}