/* ZIORIS site - product renders on a white studio ground, serif names, light sans body. One fixed light tone. */
:root{
  color-scheme:light;
  --bg:#ffffff; --fg:#111111; --muted:#8f8f8c; --line:#e6e5e1; --soft:#f5f4f1;
  --link:#7a6a55; --tbd:#c26a43;
  --display:"Sorts Mill Goudy",Georgia,"Times New Roman",serif;
  --body:Jost,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{margin:0;font-family:var(--body);font-weight:300;font-size:clamp(12px,.25vw + 8.5px,15px);letter-spacing:.04em;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

/* header */
.top{max-width:1680px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:28px 0;gap:16px}
.top .logo{grid-column:2;display:block}
.top .logo img{height:clamp(22px,1.3vw,34px);width:auto;display:block}
.nav{display:flex;gap:clamp(14px,1.6vw,28px);font-size:.84em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav a{text-decoration:none;padding-block:4px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)}
.nav.l{grid-column:1;justify-self:start}
.nav.r{grid-column:3;justify-self:end}
@media (max-width:640px){
  .top{grid-template-columns:1fr;justify-items:center}
  .top .logo{grid-column:1}
  .nav.l,.nav.r{grid-column:1;justify-self:center}
}
.crumb{max-width:1680px;margin:28px auto 0;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--fg)}

/* footer */
footer{max-width:1680px;margin:0 auto;border-top:1px solid var(--line);padding-block:24px 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.84em;letter-spacing:.08em}
footer>span{min-width:0;overflow-wrap:anywhere}

/* product page */
.pdp{max-width:1680px;margin:0 auto;padding-block:clamp(40px,4vw,96px) clamp(96px,7vw,180px);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(56px,6vw,160px);align-items:center}
@media (max-width:820px){.pdp{grid-template-columns:1fr;gap:40px;padding-block:24px 80px}}
.stage{aspect-ratio:4/3;max-width:100%;cursor:pointer}
.stage img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .4s}
.dots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.dots button{width:5px;height:5px;border-radius:50%;background:var(--line)}
.dots button[aria-pressed="true"]{background:var(--fg)}
.info{max-width:clamp(300px,22vw,440px);min-width:0}
.name{font-family:var(--display);font-size:clamp(19px,1.25vw,30px);letter-spacing:.02em;margin:0;font-weight:400;line-height:1.2;text-wrap:balance}
.ko{color:var(--muted);margin:6px 0 0}
.row{margin-top:56px}
.colors{display:flex;gap:14px}
.colors button{width:clamp(18px,1.1vw,26px);height:clamp(18px,1.1vw,26px);border-radius:50%;position:relative;overflow:hidden;outline:1px solid var(--line);outline-offset:3px}
.colors button[aria-pressed="true"]{outline-color:var(--fg)}
.colors button::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);z-index:1}
.colors button i{position:absolute;inset:0 0 50% 0}
.colors button.sold::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1px;background:var(--muted);transform:rotate(-45deg)}
.sizes{display:grid;grid-template-columns:3.7em repeat(4,3.4em);gap:12px 8px;align-items:baseline;font-variant-numeric:tabular-nums}
.sizes .d{color:var(--muted);font-size:.84em;letter-spacing:.12em}
.sizes button{justify-self:start;color:var(--muted);padding-block:2px;border-bottom:1px solid transparent}
.sizes button:disabled{color:var(--line);cursor:default}
.sizes button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.sizes button.sold{text-decoration:line-through}
.cap{color:var(--muted);margin-top:14px;min-height:1.5em;font-variant-numeric:tabular-nums}
.ref{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin-block:56px 0;font-variant-numeric:tabular-nums}
.ref dt{color:var(--muted)}
.ref dd{margin:0;letter-spacing:.12em;text-transform:uppercase}
.buy{margin-top:48px}
.na{margin:0;letter-spacing:.14em;font-size:.84em;color:var(--muted);text-transform:uppercase}
.go{display:inline-block;margin-top:10px;color:var(--link);text-decoration:none;font-size:.92em;letter-spacing:.06em;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.go:hover{border-bottom-color:var(--link)}
.go.sold{visibility:hidden}
.tbd{color:var(--tbd)}

/* collections and cards */
.wrap{max-width:1680px;margin:0 auto}
.lede{max-width:1680px;margin:clamp(48px,6vw,120px) auto 0;display:grid;gap:10px}
.eyebrow{font-size:.8em;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0}
.title{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.2vw,84px);line-height:1.02;letter-spacing:-.005em;margin:0;text-wrap:balance}
.sub{color:var(--muted);margin:0;max-width:38em}
.cards{max-width:1680px;margin:clamp(40px,4vw,80px) auto clamp(96px,7vw,160px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,3vw,64px)}
.card{display:grid;gap:14px;text-decoration:none;min-width:0}
.card .ph{aspect-ratio:4/3;max-width:100%;background:var(--soft);display:grid;place-items:center;overflow:hidden}
.card .ph img{width:92%;height:92%;object-fit:contain;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.035)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card h3{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.2vw,26px);margin:0}
.card .k{color:var(--muted);font-size:.9em}
.card .sw{display:flex;gap:8px}
.card .sw i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.card .view{font-size:.82em;letter-spacing:.16em;text-transform:uppercase;color:var(--link)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* proper name large, product type small */
.name .kind,.card h3 .kind{display:block;font-family:var(--body);font-weight:300;font-size:.42em;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.card h3 .kind{font-size:.5em;margin-top:6px}
.name{letter-spacing:.06em}

/* one fixed screen, no page scroll - paging happens inside the screen */
html,body{height:100%}
body{height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
.top,.crumb,footer{flex:none;width:100%}
.top{padding-block:clamp(14px,3vh,28px) 0}
.crumb{margin-top:clamp(10px,2.2vh,28px)}
footer{position:relative;padding-block:clamp(8px,1.6vh,16px) calc(env(safe-area-inset-bottom,0px) + clamp(8px,1.6vh,16px));font-size:.72em;align-items:center}
.biz-t{display:none;color:var(--muted);font-size:1em;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:640px){
  .top{grid-template-columns:1fr auto 1fr;justify-items:stretch;gap:8px}
  .top .logo{grid-column:2}
  .nav{gap:10px;letter-spacing:.08em;font-size:.78em}
  .nav.l{grid-column:1;justify-self:start}
  .nav.r{grid-column:3;justify-self:end}
  footer{flex-wrap:nowrap}
  footer .biz{display:none;position:absolute;left:0;right:0;bottom:100%;background:var(--bg);border-top:1px solid var(--line);padding-block:12px;line-height:1.7}
  footer.open .biz{display:block}
  .biz-t{display:inline}
}

/* product page: photo fills the remaining height, info centred */
.pdp{flex:1;min-height:0;width:100%;padding-block:clamp(8px,2.4vh,40px);grid-template-rows:minmax(0,1fr);align-items:stretch}
.pdp>div:first-child{min-height:0;display:flex;flex-direction:column}
.stage{flex:1;min-height:0;aspect-ratio:auto}
.dots{margin-top:clamp(8px,1.6vh,20px)}
.info{align-self:center}
.row{margin-top:clamp(14px,4.4vh,56px)}
.ref{margin-block:clamp(14px,4.4vh,56px) 0;gap:clamp(4px,1vh,10px) 16px}
.buy{margin-top:clamp(12px,3.6vh,48px)}
@media (max-width:820px){
  .pdp{display:flex;flex-direction:column;gap:10px;padding-block:6px}
  .pdp>div:first-child{flex:1}
  .info{max-width:none;width:100%;align-self:stretch;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start}
  .info .name,.info .ko{grid-column:1/-1}
  .name{font-size:20px}.name .kind{margin-top:4px}
  .ko{margin-top:2px}
  .info .row{margin-top:12px}
  .info .row[style]{margin-top:12px!important}
  .info .row+.row{grid-column:2}
  .cap{margin-top:6px;min-height:1.3em}
  .sizes{gap:6px 6px;grid-template-columns:auto repeat(4,2.6em)}
  .ref{grid-column:1/-1;margin-top:12px;grid-template-columns:auto 1fr auto 1fr;gap:4px 10px;font-size:.92em}
  .ref dt:first-of-type,.ref dt:first-of-type+dd{display:none}
  .buy{grid-column:1/-1;margin-top:10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  .go{margin-top:0}
}

/* collections: lede left, horizontally paged cards right */
.coll{flex:1;min-height:0;width:100%;max-width:1680px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(32px,5vw,120px);align-items:center;padding-block:clamp(8px,2.4vh,40px)}
.coll .lede{margin:0}
.coll .title{font-size:clamp(30px,min(3.8vw,7vh),76px)}
.rail{height:100%;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px)}
.coll .cards{flex:1;min-height:0;margin:0;display:flex;gap:clamp(20px,2.4vw,48px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.coll .cards::-webkit-scrollbar{display:none}
.coll .card{flex:0 0 calc((100% - clamp(20px,2.4vw,48px)) / 2);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;min-height:0}
.coll .cards[data-n="1"] .card{flex-basis:100%}
.coll .card .ph{flex:1;min-height:0;aspect-ratio:auto}
.pager{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:14px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.84em;letter-spacing:.14em}
.pager[hidden]{display:none}
.pager button{padding:6px 4px;color:var(--muted);transition:color .2s}
.pager button:hover:not(:disabled){color:var(--fg)}
.pager button:disabled{color:var(--line);cursor:default}
@media (max-width:820px){
  .coll{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .coll .lede{flex:none;gap:6px}
  .coll .title{font-size:30px}
  .coll .sub{font-size:.92em}
  .rail{flex:1}
  .coll .card{flex-basis:100%}
}

/* phone held sideways: little height, plenty of width - photo left, details right, company line folded away */
@media (max-height:500px) and (orientation:landscape){
  .top{padding-block:10px 0}
  .top .logo img{height:20px}
  .crumb{display:none}
  footer{flex-wrap:nowrap;padding-block:6px calc(env(safe-area-inset-bottom,0px) + 6px)}
  footer .biz{display:none;position:absolute;left:0;right:0;bottom:100%;background:var(--bg);border-top:1px solid var(--line);padding-block:10px;line-height:1.7}
  footer.open .biz{display:block}
  .biz-t{display:inline}
  .pdp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(16px,4vw,48px);padding-block:4px 6px;align-items:stretch}
  .pdp>div:first-child{min-height:0}
  .info{display:block;align-self:center;max-width:none;width:auto;font-size:.94em}
  .name{font-size:18px}.name .kind{margin-top:3px}
  .ko{display:none}
  .info .row,.info .row[style]{margin-top:10px!important}
  .cap{margin-top:4px;min-height:1.2em}
  .sizes{gap:2px 6px;grid-template-columns:auto repeat(4,2.6em)}
  .ref{margin-top:10px;grid-template-columns:auto 1fr auto 1fr;gap:2px 10px}
  .ref dt:first-of-type,.ref dt:first-of-type+dd{display:none}
  .buy{margin-top:8px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  .go{margin-top:0}
  .dots{margin-top:4px}
}
/* v53 phone upright: logo alone on the first row, menus on the second, clear of the viewer's corner buttons */
@media (max-width:640px) and (min-height:501px){
  .top{grid-template-columns:1fr 1fr;row-gap:30px;padding-block:20px 0}
  .top .logo{grid-column:1/-1;grid-row:1;justify-self:center}
  .nav.l{grid-column:1;grid-row:2;justify-self:start}
  .nav.r{grid-column:2;grid-row:2;justify-self:end}
}

/* v59: expand the actual white panel; keep collection content stationary. */
html.zt-motion body { isolation: isolate; transition: none; }
html.zt-motion:not([data-zioris-page="landing"]) .top { position: relative; z-index: 3; }
.zt-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.zt-wipe { position: fixed; inset: 0; z-index: 1; background: #fff; transform-origin: right bottom; will-change: transform; pointer-events: none; }
html.zt-motion.zt-ready body.ecl::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: var(--zt-ground); pointer-events: none;
}
html.zt-motion.zt-ready body.ecl .top { background: transparent; box-shadow: none; clip-path: none; mix-blend-mode: difference; }
html.zt-motion.zt-ready .day, html.zt-motion.zt-ready footer { position: relative; z-index: 2; }
html.zt-leaving.zt-enter body { background: linear-gradient(90deg,#0b0a09 0 60%,#fff 60% 100%); }
@media (max-width:820px) and (orientation:portrait),(max-width:820px) and (min-height:501px) {
  html.zt-leaving.zt-enter body { background: linear-gradient(180deg,#0b0a09 0 58%,#fff 58% 100%); }
}
@media (max-height:500px) and (orientation:landscape) {
  html.zt-leaving.zt-enter body { background: linear-gradient(90deg,#0b0a09 0 56%,#fff 56% 100%); }
}
html.zt-leaving.zt-enter[data-zioris-page="landing"] .top {
  opacity: 1; inset: 0; padding: 0; width: 100%; height: 100%; transition: none; pointer-events: none;
}
html.zt-leaving.zt-enter[data-zioris-page="landing"] .top img {
  position: absolute; left: 0; top: 0; width: var(--zt-logo-width); height: auto; max-width: none;
  opacity: 1; filter: none; transform-origin: 0 0; pointer-events: none;
}

html.zt-motion.zt-ready body.ecl .top .nav a { color: #777; }
html.zt-motion.zt-ready body.ecl .top .nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
/* One moving, pre-rasterized logo layer; ink adapts to the ground without filter animation. */
html.zt-leaving.zt-enter[data-zioris-page="landing"] .top {
  display: block; inset: auto; left: 0; top: 0; width: var(--zt-logo-width); height: auto;
  transform-origin: 0 0; mix-blend-mode: difference; will-change: transform;
}
html.zt-leaving.zt-enter[data-zioris-page="landing"] .top img {
  position: static; width: 100%; height: auto; display: block; filter: invert(1);
}

/* v59: upright product pages read naturally from photo to purchase details. */
@media (max-width:820px) and (min-height:501px) {
  html[data-zioris-page="product"] { height: auto; min-height: 100%; overflow-y: auto; }
  html[data-zioris-page="product"] body { height: auto; min-height: 100dvh; overflow: visible; }
  html[data-zioris-page="product"].zt-motion { overflow: hidden; }
  .pdp { flex: none; gap: 28px; padding-block: 20px 44px; }
  .pdp > div:first-child { flex: none; }
  .pdp .stage { flex: none; height: auto; aspect-ratio: 4/3; }
  .pdp .info { display: block; }
  .pdp .name { font-size: 22px; }
  .pdp .name .kind { margin-top: 8px; }
  .pdp .ko { margin-top: 8px; line-height: 1.6; }
  .pdp .info .row, .pdp .info .row[style] { margin-top: 24px !important; }
  .pdp .colors { gap: 16px; }
  .pdp .cap { margin-top: 10px; line-height: 1.7; }
  .pdp .sizes { width: max-content; max-width: 100%; grid-template-columns: 3em repeat(4,2.8em); gap: 10px 6px; justify-content: start; }
  .pdp .sizes[hidden] { display: none; }
  .pdp .ref { margin-top: 28px; grid-template-columns: max-content minmax(0,1fr); gap: 12px 16px; font-size: 1em; }
  .pdp .ref dd { overflow-wrap: anywhere; }
  .pdp .buy { display: block; margin-top: 30px; }
  .pdp .na { line-height: 1.8; }
  .pdp .go { margin-top: 12px; }
}

/* v61: pre-rasterize only transition participants, then release layers in clear(). */
html.zt-preparing .day, html.zt-motion .day,
html.zt-preparing .night img, html.zt-motion .night img,
html.zt-preparing .pdp, html.zt-motion .pdp,
html.zt-preparing .dir:not([hidden]), html.zt-motion .dir:not([hidden]),
html.zt-preparing .top, html.zt-motion .top { will-change: transform, opacity; }
html.zt-preparing *, html.zt-motion * { transition-property: transform, opacity !important; }