/* Earth & glass. A catalogue raisonné in sand and linen, with two colour bands borrowed
   from the materials themselves: terracotta (kiln, clay) and olive (leaf, bark).
   Works sit in passe-partout mats with auction-style lot numbers. Prata for display,
   Cormorant italic for the artist's voice, Jost for everything you read and click. */
:root{
  --sand:#e7dcd7; --linen:#dccfc8; --mat:#efe6e2; --clay:#c3ab9e;
  --umber:#33241b; --bark:#6e5a4c; --line:rgba(51,36,27,.16);
  --terracotta:#9a4a2e; --olive:#55583f; --cream:#f4ece8;
  --title:"Prata",Georgia,serif;
  --voice:"Cormorant Garamond",Georgia,serif;
  --text:"Jost","Avenir Next","Segoe UI",sans-serif;
  --gutter:clamp(18px,5vw,88px); --max:1320px;
  --ease:cubic-bezier(.22,.61,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--sand);color:var(--umber);font:300 17px/1.7 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--terracotta);color:var(--cream)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--mat);padding:8px 12px;z-index:99}

h1,h2,.mark,.p-price,.giant{font-family:var(--title);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(3rem,6.6vw,6.2rem);line-height:1.02}
h1 i,h2 i{font-family:var(--voice);font-style:italic;font-weight:400}
h2{font-size:clamp(2.1rem,3.8vw,3.4rem);line-height:1.08}
.h1-sm{font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.05}
.h2-sm{font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.12}
h3{font:400 1.18rem/1.3 var(--title)}
.eyebrow{font:400 .7rem/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;color:var(--bark)}
.fine{font-size:.82rem;color:var(--bark)}
.link{background:none;border:0;padding:0 0 3px;cursor:pointer;text-decoration:none;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.btn{display:inline-block;padding:17px 38px;border:1px solid var(--umber);background:var(--umber);color:var(--cream);cursor:pointer;
  font:400 .72rem var(--text);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s}
.btn:hover{background:transparent;color:var(--umber)}
.btn.light{background:var(--cream);color:var(--olive);border-color:var(--cream)}
.btn.light:hover{background:transparent;color:var(--cream)}

/* bar: logotype with arch emblem, quiet nav */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutter) 14px;background:color-mix(in srgb,var(--sand) 90%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .4s}
.bar.lined{border-color:var(--line)}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.emblem{width:30px;height:39px;color:var(--umber);flex:0 0 auto}
.logo-name{font:400 1.35rem/1 var(--title);letter-spacing:-.005em}
.logo-name em{display:block;font:italic 400 1rem/1 var(--voice);color:var(--terracotta);margin-top:5px;letter-spacing:.01em}
.nav{display:flex;gap:clamp(20px,2.6vw,38px)}
.nav a{position:relative;text-decoration:none;font-size:.92rem;color:var(--bark);padding:6px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--terracotta);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--umber)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.list-btn,.menu-btn{background:none;border:0;cursor:pointer;font-size:.92rem;padding:0;white-space:nowrap;color:var(--umber)}
.list-btn span{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:8px;border-radius:50%;background:var(--linen);font-size:.72rem}
.list-btn.has span{background:var(--terracotta);color:var(--cream)}
.menu-btn{display:none}
.mnav{position:sticky;top:68px;z-index:19;display:grid;gap:4px;padding:18px var(--gutter) 26px;background:var(--sand);border-bottom:1px solid var(--line)}
.mnav a{font:400 1.7rem var(--title);text-decoration:none;padding:6px 0}

/* intro */
body.locked{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 38%,#efe6e2 0%,#e7dcd7 52%,#d8c8bf 100%);transition:clip-path 1.25s cubic-bezier(.77,0,.18,1)}
.intro canvas{position:absolute;inset:0}
.intro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.intro-in{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro{cursor:default}
.intro-name{position:absolute;left:0;right:0;text-align:center;padding:0 var(--gutter);font:400 clamp(2.8rem,9vw,8.5rem)/1.05 var(--title);letter-spacing:-.02em;color:var(--umber)}
.intro-name .w{display:inline-block;white-space:nowrap;perspective:600px}
/* letters pour in like molten glass, then cool from amber to umber */
.intro-name .ch{display:inline-block;opacity:0;color:#f6c24e;filter:blur(12px);transform:translateY(.55em) rotateX(-70deg) scale(1.08);transform-origin:50% 100%}
.intro-name.on .ch{animation:melt 1.5s calc(.25s + var(--i)*.075s) var(--ease) forwards,glint 1s calc(2.6s + var(--i)*.05s) ease-in-out forwards}
@keyframes melt{
  45%{opacity:1;filter:blur(0);transform:none;color:#f2a046;text-shadow:0 0 .32em rgba(242,160,70,.85),0 0 .9em rgba(226,116,40,.35)}
  100%{opacity:1;filter:none;transform:none;color:var(--umber);text-shadow:0 0 0 transparent}}
@keyframes glint{
  0%,100%{opacity:1;filter:none;transform:none;color:var(--umber);text-shadow:0 0 0 transparent}
  45%{color:#c0662c;text-shadow:0 0 .22em rgba(242,160,70,.6)}}
.intro-tag{position:absolute;left:0;right:0;text-align:center;font:italic 400 clamp(1.15rem,2.4vw,1.9rem) var(--voice);color:var(--terracotta);
  opacity:0;letter-spacing:.04em;transition:opacity 1.6s,letter-spacing 2.4s var(--ease)}
.intro .intro-tag.on{opacity:1;letter-spacing:.14em}
/* "Влез": light glowing through the crown */
.enter{position:absolute;pointer-events:auto;border:0;padding:0;cursor:pointer;border-radius:50%;display:grid;place-items:center;
  color:#4a1f0c;font-family:var(--title);letter-spacing:.24em;text-transform:uppercase;
  background:radial-gradient(circle,#fff7e6 0%,#ffe4ae 24%,rgba(252,196,112,.85) 44%,rgba(244,160,80,.42) 62%,rgba(236,140,64,.12) 78%,rgba(230,120,50,0) 92%);
  box-shadow:0 0 0 0 rgba(255,196,110,0);opacity:0;transform:scale(.3);
  transition:opacity 1.1s var(--ease),transform 1.3s cubic-bezier(.2,1.4,.4,1),filter .4s}
.enter span{padding-left:.24em;text-shadow:0 1px 0 rgba(255,240,210,.7)}
.enter::after{content:"";position:absolute;inset:-35%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,214,140,.55),rgba(255,180,90,.18) 45%,transparent 70%);mix-blend-mode:screen;opacity:0}
.enter.lit{opacity:1;transform:none;animation:breathe 3.6s 1.3s ease-in-out infinite}
.enter.lit::after{animation:halo2 3.6s 1.3s ease-in-out infinite}
@keyframes breathe{50%{filter:brightness(1.08) saturate(1.08)}}
@keyframes halo2{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.enter:hover{filter:brightness(1.12)}
.enter:focus-visible{outline:1px dashed var(--umber);outline-offset:8px}
.enter.gone{opacity:0;transform:scale(1.6);transition:opacity .35s,transform .5s var(--ease)}
.flash{position:absolute;z-index:2;pointer-events:none;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,200,.95),rgba(255,196,110,.45) 40%,transparent 70%);animation:flashOut .8s ease-out forwards}
@keyframes flashOut{from{opacity:0;transform:scale(.4)}30%{opacity:1}to{opacity:0;transform:scale(2.2)}}
.intro-foot{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bark);opacity:0;transition:opacity 1.2s}
.intro .intro-foot.on{opacity:.75}
.intro.leaving{clip-path:inset(0 0 100% 0)}
.intro.leaving .intro-in{transform:translateY(-40px);opacity:0;transition:transform 1s var(--ease),opacity .7s}

/* views & reveal */
.view{animation:viewIn .8s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}
.rv{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(20px)}

/* light through glass */
.glass{position:relative;overflow:hidden}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);mix-blend-mode:soft-light;
  background:radial-gradient(36% 32% at var(--gx,50%) var(--gy,40%),rgba(255,232,196,.9),rgba(255,206,160,.25) 45%,transparent 75%)}
.glass:hover::after{opacity:1}

/* passe-partout */
.mat{position:relative;display:block;background:var(--mat);padding:clamp(14px,2.2vw,30px);box-shadow:inset 0 0 0 1px rgba(51,36,27,.06)}
.mat img{width:100%}
.mat.dark{background:rgba(245,237,225,.08);box-shadow:inset 0 0 0 1px rgba(245,237,225,.18)}

/* hero: typographic, with the growing tree set into the line inside an arch (a glass window) */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,110px) var(--gutter) clamp(70px,9vw,130px)}
.hero-kicker{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bark);margin-bottom:clamp(34px,5vw,64px)}
.hero-kicker span+span::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:28px;opacity:.5}
.hero-title{font-size:clamp(3rem,7.4vw,7.8rem);line-height:.98;letter-spacing:-.025em;display:grid}
.hero-title .ln{display:block;white-space:nowrap}
.hero-title .ind{padding-left:clamp(40px,14vw,240px)}
.hero-title i{color:var(--terracotta);font-size:1.12em;letter-spacing:-.01em}
.arch{display:inline-block;vertical-align:-.08em;width:.9em;height:.92em;margin:0 .08em;border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--linen);
  box-shadow:0 0 0 1px var(--line)}
.arch video{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.dotline{display:inline-block;width:clamp(60px,14vw,260px);height:1px;background:var(--umber);vertical-align:.32em;margin-left:.3em;opacity:.45;transform-origin:left;animation:draw 1.6s .6s var(--ease) both}
@keyframes draw{from{transform:scaleX(0)}}
.hero-row{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:clamp(36px,5vw,64px)}
.lead{max-width:30em;color:var(--bark);font-size:1.04rem}
.orb{position:relative;flex:0 0 auto;width:clamp(110px,11vw,150px);aspect-ratio:1;display:grid;place-items:center;text-decoration:none;color:var(--umber)}
.orb svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.orb text{font:400 13.5px var(--text);letter-spacing:.32em;text-transform:uppercase;fill:currentColor}
.orb-arrow{width:46%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--terracotta);color:var(--cream);font-size:1.3rem;transition:transform .6s var(--ease),background .4s}
.orb:hover .orb-arrow{transform:scale(1.12);background:var(--umber)}
.orb:hover svg{animation-duration:8s}
@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;flex-wrap:wrap;gap:34px;align-items:center;margin-top:42px}
.actions.left{margin-top:26px}

/* four categories: arch-topped windows */
.cat4-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(40px,5vw,64px)}
.cat4{display:grid;gap:6px;text-decoration:none;align-content:start}
.cat4:nth-child(even){margin-top:clamp(40px,6vw,96px)}
.arch-img{display:block;aspect-ratio:3/4.2;border-radius:999px 999px 4px 4px;overflow:hidden;background:var(--linen);margin-bottom:16px}
.arch-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.cat4:hover .arch-img img{transform:scale(1.05)}
.arch-img.fill{display:grid;place-items:center}
.arch-img.terracotta{background:var(--terracotta)}
.arch-img.olive{background:var(--olive)}
.arch-img.fill span{font:italic 400 clamp(1.6rem,2.6vw,2.4rem) var(--voice);color:var(--cream);opacity:.85;transition:transform .8s var(--ease)}
.cat4:hover .arch-img.fill span{transform:translateY(-6px)}
.c4-num{font:400 .9rem var(--title);color:var(--terracotta)}
.cat4 b{font:400 clamp(1.5rem,2.2vw,2rem)/1.1 var(--title)}
.c4-sub{font-size:.82rem;color:var(--bark)}

/* colour bands */
.band{padding:clamp(90px,12vw,170px) var(--gutter)}
.band-in{max-width:1000px;margin:0 auto;text-align:center}
.band.terracotta{background:var(--terracotta);color:var(--cream)}
.band.olive{background:var(--olive);color:var(--cream)}
.band .eyebrow{color:rgba(245,237,225,.7)}
.mf{font:italic 400 clamp(1.7rem,3.2vw,2.7rem)/1.35 var(--voice);text-wrap:balance;margin-top:26px}
.mf i{font-style:normal;font-family:var(--title);font-size:.92em}
.sig{margin-top:30px;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;opacity:.75}
.band-in.split{max-width:var(--max);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(36px,7vw,120px);align-items:center;text-align:left}
.band-in.split h2{margin:18px 0 22px}
.band-in.split p:not(.eyebrow){color:rgba(245,237,225,.82);max-width:28em;margin-bottom:36px}

/* blocks */
.block{max-width:var(--max);margin:0 auto;padding:clamp(100px,13vw,180px) var(--gutter) 0}
.page-top{padding-top:clamp(48px,6vw,90px)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.head h2{margin-top:12px}

/* catalogue cards */
.work{display:block;text-decoration:none;min-width:0}
.work .mat{aspect-ratio:3/4;padding:0;overflow:hidden;background:var(--linen);box-shadow:none}
.work .mat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.work .mat .alt{opacity:0;transform:scale(1.05)}
.work:hover .mat .alt,.work:focus-visible .mat .alt{opacity:1;transform:scale(1)}
/* hung on the wall: the photo wall matches the page, so frames hang straight on it with a soft cast shadow */
:root{--hang:0 1px 1px rgba(40,24,14,.16),0 8px 12px -4px rgba(40,24,14,.2),0 26px 46px -14px rgba(40,24,14,.38)}
.work .mat{background:none}
.work.hung .mat{overflow:visible;aspect-ratio:5/6}
.work.hung .mat img.main{inset:auto 0 0;margin:0 auto;width:auto;height:auto;max-width:88%;max-height:100%;object-fit:fill;
  box-shadow:var(--hang);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.work.hung .mat .alt{display:none}
.work.hung:hover .mat img.main,.work.hung:focus-visible .mat img.main{transform:translateY(-6px);
  box-shadow:0 1px 1px rgba(40,24,14,.12),0 14px 18px -6px rgba(40,24,14,.2),0 40px 60px -18px rgba(40,24,14,.42)}
.wp-main.hung{background:none}
/* panels: the cut-out keeps the wire and nail, so the shadow follows their outline */
:root{--hang-f:drop-shadow(0 2px 2px rgba(40,24,14,.16)) drop-shadow(0 18px 22px rgba(40,24,14,.2))}
.work.pane .mat img.main,.wp-main.pane img{box-shadow:none;filter:var(--hang-f)}
.work.pane:hover .mat img.main,.work.pane:focus-visible .mat img.main{box-shadow:none;filter:drop-shadow(0 4px 4px rgba(40,24,14,.14)) drop-shadow(0 30px 34px rgba(40,24,14,.24))}
.wp-main.hung img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;box-shadow:var(--hang)}
/* caption: centred, series above the title, size, then a clear price */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.work .cap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:24px}
.work .series{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--terracotta)}
.work h3{font:400 clamp(1.25rem,1.7vw,1.6rem)/1.2 var(--title);margin:2px 0 4px}
.work h3 a{color:inherit;text-decoration:none}
.work h3 a:hover{color:var(--terracotta)}
.work .size{font-size:.84rem;color:var(--bark)}
.work .price{font:400 clamp(1.5rem,2vw,1.85rem)/1 var(--title);color:var(--umber);margin-top:6px;letter-spacing:.01em;white-space:nowrap}
.work.sold .price{font:500 .7rem var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--terracotta)}
.work.sold .mat img.main{filter:saturate(.75)}
.size-pick{position:relative;display:inline-flex}
.size-pick select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.84rem;color:var(--umber);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 34px 7px 16px;transition:border-color .3s}
.size-pick select:hover,.size-pick select:focus-visible{border-color:var(--umber);outline:none}
.size-pick::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;border:solid var(--bark);border-width:0 1.2px 1.2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.size-pick.big select{font-size:.95rem;padding:11px 42px 11px 20px}

.curated{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,64px);align-items:start}
.curated .work:nth-child(1){grid-column:1/7}
.curated .work:nth-child(2){grid-column:8/12;margin-top:clamp(80px,12vw,200px)}
.curated .work:nth-child(3){grid-column:2/6;margin-top:clamp(20px,3vw,40px)}
.curated .work:nth-child(4){grid-column:7/13;margin-top:clamp(-140px,-7vw,-40px)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,6vw,88px) clamp(20px,3vw,44px)}

/* category tiles */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.cat{display:block;text-decoration:none}
.cat .mat{aspect-ratio:4/5;overflow:hidden}
.cat .mat img{height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.cat:hover .mat img{transform:scale(1.04)}
.cat-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0 16px;border-bottom:1px solid var(--line)}
.cat-cap b{font:400 clamp(1.6rem,2.6vw,2.2rem) var(--title)}
.cat-cap span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bark)}

/* featured */
.feature{margin-top:clamp(100px,13vw,180px);padding:0 var(--gutter)}
.feature-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,120px);align-items:center}
.feature-fig img{transition:opacity .5s var(--ease)}
.feature-copy h2{margin:18px 0 22px}
.feature-copy>p:not(.eyebrow){color:var(--bark);max-width:30em}
.frames{display:flex;gap:26px;margin:36px 0 32px}
.frames button{display:grid;justify-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bark)}
.frames img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--sand),0 0 0 4px var(--line);transition:box-shadow .3s}
.frames [aria-checked="true"]{color:var(--umber)}
.frames [aria-checked="true"] img{box-shadow:0 0 0 3px var(--sand),0 0 0 4px var(--terracotta)}
.specs{border-top:1px solid var(--line);margin-bottom:32px}
.specs div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.specs dt{color:var(--bark);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding-top:4px}

/* visit */
.visit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,120px);align-items:center}
.visit h2{margin:14px 0 20px}
.visit p:not(.eyebrow){color:var(--bark);max-width:28em}

/* collection */
.tabs{display:flex;gap:30px}
.tabs button{background:none;border:0;padding:4px 0;cursor:pointer;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bark);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.tabs button[aria-selected="true"]{color:var(--umber);border-color:var(--terracotta)}
.cat-note{max-width:44em;color:var(--bark);margin:24px 0 clamp(40px,5vw,64px)}
.soon{padding:40px 0;color:var(--bark);font-size:1.05rem}

/* work page */
.back{display:inline-block;margin-bottom:30px}
.wp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:start}
.wp-media{position:sticky;top:110px}
.wp-main{aspect-ratio:3/4;background:var(--linen);cursor:crosshair}
.wp-main img{width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease)}
.lens{position:absolute;width:200px;height:200px;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);
  box-shadow:0 0 0 1px rgba(255,255,255,.8),0 20px 44px -10px rgba(51,36,27,.5);background-repeat:no-repeat;transition:opacity .3s,transform .3s var(--ease)}
.wp-main.zooming .lens{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wp-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.wp-thumbs button{width:64px;height:84px;padding:0;border:1px solid transparent;cursor:pointer;background:var(--mat);opacity:.55;transition:opacity .3s,border-color .3s}
.wp-thumbs button[aria-pressed="true"]{opacity:1;border-color:var(--umber)}
.wp-thumbs img{width:100%;height:100%;object-fit:cover}
.wp-hint{margin-top:10px}
.wp-info{display:grid;gap:22px;align-content:start;padding-top:8px}
.wp-info .eyebrow{color:var(--terracotta)}
.p-price{font-size:2.2rem;color:var(--umber)}
.perks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:8px;font-size:.92rem;color:var(--bark)}
.perks:empty{display:none}
.perks li{display:flex;gap:12px;align-items:baseline}
.perks li::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--terracotta);transform:translateY(-1px)}
.p-text{color:var(--bark)}
.wp-actions{display:flex;flex-wrap:wrap;gap:30px;align-items:center}
.related{margin-top:clamp(100px,12vw,160px)}
.related h2{margin-bottom:clamp(30px,4vw,52px);padding-bottom:22px;border-bottom:1px solid var(--line)}

/* commission page */
.wedding{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,7vw,120px);align-items:start}
.wedding-copy h1{margin:16px 0 22px}
.wedding-copy>p:not(.eyebrow){color:var(--bark);max-width:30em}
.wed-form{display:grid;gap:26px;margin-top:40px;max-width:480px}
.wedding-fig{position:sticky;top:96px}
.wedding-fig img{width:100%;transition:opacity .5s var(--ease)}
.wedding-fig figcaption{position:absolute;left:26%;right:26%;top:5.6%;text-align:center;font:italic 500 clamp(1rem,2vw,1.6rem) var(--voice);color:#5a3b2c;
  background:linear-gradient(90deg,rgba(231,220,215,0),rgba(231,220,215,.97) 18%,rgba(231,220,215,.97) 82%,rgba(231,220,215,0));padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
fieldset{border:0;padding:0;display:grid;gap:10px}
legend{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bark);padding:0;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;padding:10px 18px;border:1px solid var(--line);font-size:.86rem;transition:border-color .3s,background .3s,color .3s}
.chips label:hover span{border-color:var(--bark)}
.chips input:checked+span{border-color:var(--umber);background:var(--umber);color:var(--cream)}
.chips input:focus-visible+span{outline:1px solid var(--umber);outline-offset:3px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--c)}
.field{display:grid;gap:8px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bark)}
input,textarea{font:300 1rem var(--text);letter-spacing:0;text-transform:none;color:var(--umber);padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;width:100%;border-radius:0}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--umber)}
textarea{resize:vertical}

/* artist */
.author h1{margin:18px 0 0}
.author .mf{text-align:left;max-width:22em;color:var(--bark)}
.chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,120px);align-items:center}
.chapter figure{background:var(--mat);padding:clamp(14px,2vw,28px)}
.chapter figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.chapter.flip figure{order:2}
.chapter h2{margin:14px 0 20px}
.chapter .eyebrow{color:var(--terracotta)}
.chapter p:not(.eyebrow){color:var(--bark);max-width:32em}
.chapter .link{display:inline-block;margin-top:20px}
.meanings{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-top:30px}
.meanings dt{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:400}
.meanings dt::before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8 0 15%,transparent 35%),var(--c)}
.meanings dd{font-size:.86rem;color:var(--bark);padding-left:22px}
.quote{text-align:center;max-width:960px}
.quote blockquote{font:italic 400 clamp(1.7rem,3vw,2.5rem)/1.35 var(--voice);margin-bottom:40px;text-wrap:balance}

/* footer with giant wordmark */
.foot{margin-top:clamp(100px,13vw,180px);background:var(--linen);padding:clamp(60px,8vw,100px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden}
.foot-top{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px}
.mf-sm{font:italic 400 clamp(1.3rem,2.2vw,1.8rem)/1.3 var(--voice);max-width:18em}
.foot nav{display:flex;flex-wrap:wrap;gap:26px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.foot nav a{text-decoration:none;color:var(--bark)}
.foot nav a:hover{color:var(--umber)}
.giant{font-size:clamp(2.2rem,10.2vw,11rem);line-height:.95;white-space:nowrap;text-align:center;margin:clamp(50px,7vw,90px) 0 26px;color:var(--terracotta);letter-spacing:-.03em}
.foot-bot{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:14px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bark);border-top:1px solid var(--line);padding-top:20px}

/* drawer */
.drawer{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:rgba(51,36,27,.38);animation:fade .4s}
@keyframes fade{from{opacity:0}}
.panel{position:absolute;right:0;top:0;bottom:0;width:min(460px,100vw);background:var(--sand);overflow:auto;
  padding:calc(24px + env(safe-area-inset-top,0px)) 32px calc(32px + env(safe-area-inset-bottom,0px));animation:slide .55s var(--ease);box-shadow:-30px 0 80px -40px rgba(51,36,27,.5)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.panel header{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.x{background:none;border:0;font:300 2rem/1 var(--text);cursor:pointer;color:var(--umber)}
.cart{list-style:none;padding:0}
.cart li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart img{width:56px;height:74px;object-fit:cover;background:var(--mat)}
.cart b{display:block;font:400 1rem var(--title)}
.cart small{color:var(--bark);font-size:.8rem;display:block}
.cart .rm{background:none;border:0;cursor:pointer;color:var(--bark);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:0}
.cart .pr{text-align:right;font-size:.92rem;display:grid;gap:4px;justify-items:end}
#cartEmpty{padding:20px 0}
.order{display:grid;gap:24px;margin-top:24px}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bark)}
.total b{font:400 1.6rem var(--title)}
.order .btn{width:100%}
.order-out{display:grid;gap:10px}
.order-out textarea{font-size:.85rem;border:1px solid var(--line);padding:10px}

@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .hero-title .ln{white-space:normal}
  .hero-row{flex-direction:column;align-items:flex-start}
  .cat4-grid{grid-template-columns:1fr 1fr}
  .curated{grid-template-columns:1fr 1fr}
  .curated .work:nth-child(n){grid-column:auto;margin-top:0}
  .cats,.feature-in,.band-in.split,.visit,.wp,.wedding,.chapter{grid-template-columns:minmax(0,1fr)}
  .chapter.flip figure{order:0}
  .wp-media,.wedding-fig{position:relative;top:0}
  .wedding-fig{order:-1}
  .lens,.wp-hint{display:none}
}
@media (max-width:540px){
  .grid,.curated{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 14px}
  .work h3{font-size:1.15rem}
  .work .price{font-size:1.35rem}
  .tabs{gap:18px}
  .meanings{grid-template-columns:1fr}
  .announce{font-size:.58rem;letter-spacing:.12em}
  .cat-cap{flex-direction:column;gap:4px}
}
@media (max-width:540px){.hero-title{font-size:clamp(2.6rem,12.5vw,4rem)}.hero-title .ind{padding-left:0}.dotline{display:none}.hero-kicker{gap:6px 18px}.hero-kicker span+span::before{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js .rv:not(.in){opacity:1;transform:none}
  .enter{opacity:1;transform:none}
  .intro-name .ch{opacity:1;filter:none;transform:none;color:var(--umber)}
}

/* main page sections */
.plain{margin:0}
.plain img{width:100%}
.wedding-fig img.hung,.plain.hung img{box-shadow:var(--hang)}
.wedding-fig img.pane{filter:var(--hang-f)}
.author-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:start}
.author h2{margin:14px 0 22px}
.author .mf{text-align:left;color:var(--umber);margin:0;max-width:20em}
.author-text p{color:var(--bark);margin-bottom:16px;max-width:34em}
.author-fig{margin-top:clamp(50px,7vw,90px)}
.author-fig img{width:100%;height:auto}
.contacts h2{margin:14px 0 clamp(36px,5vw,60px)}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;border-top:1px solid var(--line);padding-top:28px}
.c-label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bark)}
.c-val{font:400 clamp(1.3rem,2vw,1.7rem) var(--title);margin:8px 0 4px}
.c-val a{text-decoration:none}
.h1-sm i{font-family:var(--voice);font-style:italic;color:var(--terracotta)}
#kolekcia.page-top{padding-top:clamp(40px,5vw,72px)}
@media (max-width:860px){
  .bar .nav{display:none}
  .menu-btn{display:block}
  .author-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .logo-name{font-size:1.15rem}
  .emblem{width:24px;height:31px}
}

/* "свети": molten glass that actually glows — warm gradient, light sweeping through, soft halo */
.h1-sm i.glow{display:inline-block;font-size:1.6em;line-height:.8;padding:0 .08em .1em;
  background:linear-gradient(100deg,#8a3519 0%,#b8481f 20%,#e08a2c 36%,#f6c24e 46%,#e08a2c 56%,#b8481f 72%,#8a3519 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(242,160,70,.55)) drop-shadow(0 0 28px rgba(226,116,40,.35));
  animation:glassLight 6s ease-in-out infinite,halo 3s ease-in-out infinite alternate}
@keyframes glassLight{0%{background-position:100% 0}50%{background-position:0% 0}100%{background-position:100% 0}}
@keyframes halo{from{filter:drop-shadow(0 0 6px rgba(242,160,70,.4)) drop-shadow(0 0 18px rgba(226,116,40,.22))}
  to{filter:drop-shadow(0 0 14px rgba(255,190,90,.75)) drop-shadow(0 0 40px rgba(226,116,40,.45))}}
@media (prefers-reduced-motion:reduce){.h1-sm i.glow{animation:none;background-position:50% 0}}

/* enquiry form: consent, spam trap, thank-you */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.8rem;line-height:1.5;color:var(--bark);margin:6px 0 18px;cursor:pointer}
.consent input{margin-top:3px;accent-color:var(--terracotta);flex:0 0 auto}
.consent a{color:var(--umber)}
.order-done{padding:28px 0;outline:none}
.order-done .mark{font-family:var(--title);font-size:2rem;margin:0 0 8px;color:var(--terracotta)}
/* quick contact: Viber and call */
.quick{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;gap:10px}
.quick[hidden]{display:none}
.quick a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px -8px rgba(51,36,27,.55);transition:transform .3s var(--ease)}
.quick a:hover{transform:translateY(-3px)}
.quick svg{width:24px;height:24px}
.q-viber{background:#7360f2}
.q-call{background:var(--terracotta)}
body.locked .quick{display:none}
@media (min-width:861px){.q-call{display:none!important}}
.foot-bot .legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-bot .legal a{color:inherit}
/* legal pages */
.legal-doc{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,90px) var(--gutter) 80px;font-size:1rem;line-height:1.75}
.legal-doc h1{font:400 clamp(2rem,4.6vw,3.2rem)/1.1 var(--title);margin:12px 0 36px}
.legal-doc h2{font:400 1.45rem/1.3 var(--title);margin:44px 0 12px}
.legal-doc h3{font:italic 500 1.35rem var(--voice);margin:30px 0 10px}
.legal-doc ol,.legal-doc ul{padding-left:1.3em}
.legal-doc li{margin:6px 0}
.legal-doc a{color:var(--terracotta)}
.legal-form{border:1px solid var(--line);padding:22px 26px;background:var(--mat)}
.legal-form p{margin:6px 0}
.legal-back{margin-top:60px}
.todo{background:#f6dfa6;padding:0 4px}
.legal-page .bar{position:static}
@media (max-width:600px){.quick a{width:46px;height:46px}.quick svg{width:21px;height:21px}}