/* ÆSSENCE — design system
   Material: white hide (the skin of the world) shows only between architecture.
   Architecture: black slabs, zero radius, inlaid edges.
   Sheets: paper (archive/shop) or ink (rooms of the mind).                     */

:root{
  --ink:#000;
  --paper:#fff;
  --ash:#666;          /* secondary text on paper, 5.7:1 */
  --ash-d:#9a9a9a;     /* secondary text on ink, 7.4:1 */
  --fog:#eeeeee;       /* image ground */
  --rule:rgba(0,0,0,.12);
  --rule-d:rgba(255,255,255,.14);
  --hide:url(../img/tex/hide-white.webp);

  --f-mark:"Syncopate","Arial Black",Helvetica,sans-serif;
  --f-sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;

  /* 4pt spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* type scale */
  --t-xs:11px; --t-s:13px; --t-m:15px; --t-l:18px; --t-xl:23px; --t-2xl:30px; --t-3xl:40px; --t-4xl:56px;

  --gutter:10px;       /* leather seam between architecture */
  --bar-h:56px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);

  --ease:cubic-bezier(.2,.75,.15,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms; --t-med:320ms; --t-slow:620ms;
}
@media (min-width:760px){ :root{ --gutter:14px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--bar-h) + var(--sat)); }
html,body{ overflow-x:clip; }
body{
  margin:0; min-height:100%;
  background:#f3f3f3 var(--hide) center top / 620px auto repeat;
  color:var(--ink);
  font:400 var(--t-m)/1.55 var(--f-sans);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:var(--s3) var(--s4); }
.skip:focus{ left:var(--s2); top:calc(var(--sat) + var(--s2)); }
[hidden]{ display:none !important; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- app bar ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:30;
  height:calc(var(--bar-h) + var(--sat)); padding:var(--sat) calc(var(--s2) + var(--sar)) 0 calc(var(--s2) + var(--sal));
  display:grid; grid-template-columns:48px 1fr auto; align-items:center;
  background:var(--ink); color:var(--paper);
  box-shadow:0 1px 0 rgba(255,255,255,.55);
}
.bar-mark{
  grid-column:2; justify-self:center;
  font:700 12px/1 var(--f-mark); letter-spacing:.42em; text-indent:.42em;
  padding:var(--s3) var(--s2);
}
.bar-end{ grid-column:3; display:flex; align-items:center; }
.bar-btn{ width:44px; height:44px; display:grid; place-items:center; }
.bar-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
.bar-back{ grid-column:1; }
.bar-cart-n{
  min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.55); font:600 11px/1 var(--f-sans);
}
.bar-menu{ gap:6px; grid-auto-rows:1px; align-content:center; justify-items:end; padding-right:10px; }
.bar-menu span{ display:block; height:1.5px; background:currentColor; width:22px; }
.bar-menu span+span{ width:14px; transition:width var(--t-fast) var(--ease); }
.bar-menu:hover span+span{ width:22px; }
body.is-immersive .bar{ transform:translateY(-110%); }
.bar{ transition:transform var(--t-med) var(--ease); }

/* ---------- view + page frames ---------- */
#view{
  display:block; outline:none;
  padding:calc(var(--bar-h) + var(--sat) + var(--gutter)) calc(var(--gutter) + var(--sar)) calc(var(--gutter) + var(--sab)) calc(var(--gutter) + var(--sal));
  min-height:100dvh;
}
body.is-immersive #view{ padding:0; }
.frame{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gutter); }

/* Slabs: the architecture. Black, rectangular, inlaid into the hide. */
.slab{
  position:relative; display:block; background:var(--ink); color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.7);
  overflow:hidden; isolation:isolate;
}
a.slab,button.slab{ transition:box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
a.slab:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.7); }
a.slab:active{ transform:scale(.992); }

/* Sheets: paper and ink surfaces for inner rooms */
.sheet{ background:var(--paper); padding:var(--s6) var(--s4) var(--s7); box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 2px 0 rgba(255,255,255,.7); }
.sheet--ink{ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.7); }
@media (min-width:760px){ .sheet{ padding:var(--s8) var(--s7) var(--s8); } }

/* ---------- type ---------- */
.mark{ font:700 var(--t-l)/1.15 var(--f-mark); letter-spacing:.22em; margin:0; }
.mark--s{ font-size:var(--t-s); letter-spacing:.3em; }
.mark--l{ font-size:clamp(22px,6vw,40px); letter-spacing:.16em; }
.code{ font:400 10px/1 var(--f-mark); letter-spacing:.24em; color:var(--ash); }
.sheet--ink .code,.slab .code{ color:var(--ash-d); }
.display{ font:400 var(--t-3xl)/1.02 var(--f-serif); letter-spacing:-.01em; margin:0; }
@media (min-width:760px){ .display{ font-size:var(--t-4xl); } }
.lede{ font:italic 400 var(--t-xl)/1.3 var(--f-serif); margin:0; max-width:32ch; }
.prose{ font:400 var(--t-l)/1.6 var(--f-serif); max-width:58ch; }
.prose p{ margin:0 0 1em; }
.muted{ color:var(--ash); }
.sheet--ink .muted,.slab .muted{ color:var(--ash-d); }
.head{ display:grid; gap:var(--s3); margin-bottom:var(--s6); }
.head p{ margin:0; }
.group-label{ font:500 var(--t-s)/1 var(--f-sans); color:var(--ash); margin:0 0 var(--s3); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:0 var(--s5);
  font:500 var(--t-m)/1 var(--f-sans); letter-spacing:.01em;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--line{ background:transparent; color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--paper); }
.btn--paper{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--ghost-d{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.5); }
.btn--ghost-d:hover{ background:var(--paper); color:var(--ink); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.35; pointer-events:none; }
.link{ border-bottom:1px solid currentColor; padding-bottom:1px; }

/* ---------- gate ---------- */
.gate{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; color:var(--paper); }
.gate-door{ position:absolute; top:0; bottom:0; width:50.2%; background:var(--ink); transition:transform var(--t-slow) var(--ease-io); }
.gate-l{ left:0; box-shadow:1px 0 0 rgba(255,255,255,.08); }
.gate-r{ right:0; }
.gate-in{ position:relative; display:grid; justify-items:center; gap:var(--s5); transition:opacity var(--t-med) var(--ease); padding:var(--s6); }
.gate-clover{ width:min(26vw,104px); height:auto; }
.gate-word{ margin:0; font:700 13px/1 var(--f-mark); letter-spacing:.6em; text-indent:.6em; }
.gate-enter{
  margin-top:var(--s6); min-height:52px; padding:0 var(--s6);
  border:1px solid rgba(255,255,255,.6); font:500 var(--t-s)/1 var(--f-sans); letter-spacing:.08em;
  transition:background var(--t-fast), color var(--t-fast);
}
.gate-enter:hover,.gate-enter:focus-visible{ background:var(--paper); color:var(--ink); }
.gate.is-opening .gate-in{ opacity:0; }
.gate.is-opening .gate-l{ transform:translateX(-101%); }
.gate.is-opening .gate-r{ transform:translateX(101%); }

/* ---------- home ---------- */
.home{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.home > *{ grid-column:span var(--m,6); }
@media (min-width:760px){ .home > *{ grid-column:span var(--d,var(--m,6)); } }
.h-id{ min-height:clamp(260px,52vh,520px); display:grid; place-items:center; text-align:center; padding:var(--s7) var(--s5); }
.h-id img{ width:min(18vw,76px); margin:0 auto var(--s5); }
.h-id .mark{ font-size:clamp(20px,6.4vw,44px); letter-spacing:.32em; text-indent:.32em; }
.h-id p.muted{ margin:var(--s4) 0 0; font-size:var(--t-s); letter-spacing:.04em; }

.h-new{ display:grid; min-height:clamp(420px,78vh,760px); }
.h-new img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; z-index:-1; opacity:.92; }
.h-new::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78)); }
.h-new-in{ align-self:end; padding:var(--s5); display:grid; gap:var(--s3); }
.h-new-in .muted{ margin:0; font-size:var(--t-s); }
.h-new-in .mark{ font-size:clamp(20px,5.6vw,36px); letter-spacing:.14em; }
.h-new-cta{ margin-top:var(--s3); justify-self:start; }

.room{ min-height:180px; padding:var(--s5); display:grid; align-content:space-between; gap:var(--s6); }
.room .mark{ font-size:var(--t-m); letter-spacing:.26em; }
.room p{ margin:0; font-size:var(--t-s); color:var(--ash-d); max-width:30ch; }
.room-foot{ display:flex; justify-content:space-between; align-items:end; gap:var(--s4); }
.room-n{ font:400 var(--t-2xl)/1 var(--f-serif); color:var(--paper); }
.room--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.55; filter:grayscale(1); transition:opacity var(--t-med) var(--ease); }
.room--img:hover img{ opacity:.7; }
.room--tall{ min-height:300px; }
@media (min-width:760px){
  .h-new-in{ padding:var(--s7); }
  .room{ min-height:240px; padding:var(--s6); }
  .room--tall{ min-height:360px; }
}
.moodplate{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.moodplate i{ position:absolute; border-radius:50%; filter:blur(28px); opacity:.55; }

/* ---------- product grid (archive) ---------- */
.filters{ display:flex; gap:var(--s5); margin:0 0 var(--s5); overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--rule); }
.filters::-webkit-scrollbar{ display:none; }
.filters a{ padding:var(--s3) 0; white-space:nowrap; color:var(--ash); border-bottom:1.5px solid transparent; margin-bottom:-1px; }
.filters a[aria-current="true"]{ color:var(--ink); border-color:var(--ink); }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s3); }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s7) var(--s5); } }
@media (min-width:1100px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.card{ display:grid; gap:var(--s3); align-content:start; }
.card-img{ position:relative; aspect-ratio:4/5; background:var(--fog); overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--t-med) var(--ease), transform var(--t-slow) var(--ease); }
.card-img img.alt{ position:absolute; inset:0; opacity:0; }
@media (hover:hover){ .card:hover .card-img img.alt{ opacity:1; } }
.card-meta{ display:grid; gap:4px; }
.card-name{ font:400 var(--t-xl)/1.1 var(--f-serif); margin:0; }
.card-price{ font-size:var(--t-s); }
.card .btn{ min-height:40px; font-size:var(--t-s); padding:0 var(--s3); margin-top:var(--s1); }
img.is-loading{ opacity:0; }

.index{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2); }
@media (min-width:760px){ .index{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s3); } }
.index a{ display:grid; gap:var(--s2); }
.index .card-img{ aspect-ratio:3/4; }

/* ---------- item page ---------- */
.item{ display:grid; gap:var(--s6); }
@media (min-width:960px){ .item{ grid-template-columns:1.25fr 1fr; gap:var(--s7); align-items:start; } .item-info{ position:sticky; top:calc(var(--bar-h) + var(--sat) + var(--s6)); } }
.gallery{ position:relative; margin:calc(-1 * var(--s6)) calc(-1 * var(--s4)) 0; }
@media (min-width:760px){ .gallery{ margin:0; } }
.gallery-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; background:var(--fog); }
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-track figure{ flex:0 0 100%; margin:0; scroll-snap-align:start; aspect-ratio:4/5; }
.gallery-track img{ width:100%; height:100%; object-fit:cover; }
.gallery-count{ position:absolute; right:var(--s3); bottom:var(--s3); background:var(--paper); padding:6px 10px; font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.06em; }
.thumbs{ display:none; }
@media (min-width:960px){
  .thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s2); margin-top:var(--s2); }
  .thumbs button{ aspect-ratio:4/5; background:var(--fog); opacity:.55; transition:opacity var(--t-fast); }
  .thumbs button[aria-current="true"],.thumbs button:hover{ opacity:1; }
  .thumbs img{ width:100%; height:100%; object-fit:cover; }
}
.item-info{ display:grid; gap:var(--s5); }
.item-info h1{ margin:0; }
.item-price{ font:500 var(--t-l)/1 var(--f-sans); }
.item-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.details{ margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); }
.details li{ padding:var(--s3) 0; border-bottom:1px solid var(--rule); font-size:var(--t-s); }
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:25;
  padding:var(--s3) calc(var(--s4) + var(--sar)) calc(var(--s3) + var(--sab)) calc(var(--s4) + var(--sal));
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 -1px 0 var(--rule);
  transform:translateY(110%); transition:transform var(--t-med) var(--ease);
}
.buybar.is-on{ transform:none; }
.buybar .btn{ min-height:44px; flex:0 0 auto; }
@media (min-width:960px){ .buybar{ display:none; } }

/* sizes: square cells, the same rectangle language as the slabs */
.sizes{ border:0; margin:0; padding:0; display:grid; gap:var(--s2); }
.sizes legend{ font:500 var(--t-s)/1 var(--f-sans); color:var(--ash); padding:0; margin-bottom:var(--s2); }
.sizes div{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.sizes label{ position:relative; cursor:pointer; }
.sizes input{ position:absolute; opacity:0; inset:0; }
.sizes span{ display:grid; place-items:center; min-width:56px; height:48px; padding:0 var(--s3); border:1px solid rgba(0,0,0,.28); font:500 var(--t-m)/1 var(--f-sans); transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast); }
.sizes label:hover span{ border-color:var(--ink); }
.sizes input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.sizes input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
.sizes input:disabled + span{ color:#b5b5b5; border-color:#e2e2e2; background:repeating-linear-gradient(135deg,transparent 0 6px,#f3f3f3 6px 7px); cursor:not-allowed; }
.sizes .note{ margin:var(--s1) 0 0; }
.sizes.is-missing span{ border-color:var(--ink); }
.sizes.is-missing .note{ color:var(--ink); font-weight:500; }
.spec{ border-top:1px solid var(--rule); }
.spec:last-of-type{ border-bottom:1px solid var(--rule); }
.spec summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; padding:var(--s4) 0; font-weight:500; }
.spec summary::-webkit-details-marker{ display:none; }
.spec summary::after{ content:""; width:10px; height:10px; margin-top:4px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg); transition:transform var(--t-fast) var(--ease); }
.spec[open] summary::after{ transform:rotate(-135deg); margin-top:8px; }
.spec ul{ margin:0 0 var(--s4); padding:0; list-style:none; display:grid; gap:6px; font-size:var(--t-s); }
.spec li{ padding-left:var(--s4); position:relative; }
.spec li::before{ content:""; position:absolute; left:0; top:.7em; width:6px; height:1px; background:currentColor; }
.item-info .spec + .spec{ margin-top:calc(-1 * var(--s5)); }
.card-sub{ font-size:var(--t-s); color:var(--ash); }
s.muted{ text-decoration-thickness:1px; margin-right:6px; }
[aria-disabled="true"].btn{ opacity:.4; pointer-events:none; }

/* ---------- collections ---------- */
.coll{ min-height:clamp(300px,60vh,560px); display:grid; }
.coll img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.8; }
.coll::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8)); }
.coll-in{ align-self:end; padding:var(--s5); display:grid; gap:var(--s3); }
.coll-in p{ margin:0; max-width:40ch; }
.upcoming{ padding:var(--s5); display:grid; gap:var(--s5); }
.upcoming ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); }
.upcoming li{ font:400 var(--t-s)/1.6 var(--f-mark); letter-spacing:.22em; color:var(--ash-d); }
@media (min-width:760px){ .coll-in,.upcoming{ padding:var(--s7); } }

/* ---------- lookbook ---------- */
.lb-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:var(--s5); margin-bottom:var(--s7); }
.lb-head .head{ margin:0; }
.lb-dl{ position:sticky; top:calc(var(--bar-h) + var(--sat) + var(--s2)); z-index:5; }
.lb-pages{ display:grid; gap:var(--s4); justify-content:center; }
.lb-pages figure{ margin:0; background:#111; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); max-width:640px; }
.lb-pages img{ width:100%; height:auto; }
.lb-pages figcaption{ padding:var(--s2) 0 0; font:500 var(--t-xs)/1 var(--f-sans); color:var(--ash-d); text-align:right; letter-spacing:.06em; background:var(--ink); }
@media (min-width:960px){
  .lb-pages{ grid-template-columns:repeat(2,minmax(0,560px)); gap:var(--s7) 2px; }
  .lb-pages figure:first-child{ grid-column:2; }
}

/* ---------- extras + quotes ---------- */
.extras{ display:grid; gap:var(--s9); }
.x-shift{ display:grid; gap:var(--s4); min-height:260px; align-content:end; padding:var(--s5); background:linear-gradient(180deg,#1c1c22,#0a0a0c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.x-shift .mark{ font-size:clamp(26px,9vw,56px); letter-spacing:.3em; }
.quotes{ display:grid; gap:clamp(96px,22vh,220px); padding:var(--s7) 0 var(--s9); }
.q{ margin:0; }
.q footer{ margin-top:var(--s3); font:400 var(--t-s)/1 var(--f-sans); color:var(--ash-d); }
.q--plain{ font:400 var(--t-xl)/1.35 var(--f-sans); max-width:22ch; }
.q--plain footer{ text-align:right; }
.q--note{ font:italic 400 var(--t-l)/1.5 var(--f-serif); max-width:26ch; margin-left:auto; color:#d8d8d8; }
.q--fragment{ font:400 var(--t-2xl)/1.2 var(--f-serif); white-space:pre-line; }
.q--fragment::first-line{ color:var(--ash-d); }
.q--large{ font:400 clamp(34px,10vw,88px)/1 var(--f-serif); letter-spacing:-.02em; }
.q--hidden{ font:400 var(--t-m)/1.5 var(--f-sans); color:#262626; text-align:center; transition:color 1.2s var(--ease); cursor:default; }
.q--hidden:hover,.q--hidden:focus,.q--hidden.is-seen{ color:var(--paper); }
.q--hidden footer{ color:inherit; }
.q--mark{ font:700 var(--t-s)/1 var(--f-mark); letter-spacing:.5em; text-align:center; color:var(--ash-d); }
.playlists{ display:grid; gap:var(--s4); }
.playlists iframe{ width:100%; border:0; background:#111; }

/* ---------- files ---------- */
.files{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.files li{ display:grid; grid-template-columns:64px 1fr auto; gap:var(--s4); align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--rule); }
.files img{ width:64px; height:64px; object-fit:cover; background:var(--fog); }
.files strong{ display:block; font-weight:500; }
.files span{ font-size:var(--t-s); color:var(--ash); }
.files a.btn{ min-height:40px; padding:0 var(--s4); font-size:var(--t-s); }

/* ---------- about / contact ---------- */
.about{ display:grid; gap:var(--s7); }
@media (min-width:960px){ .about{ grid-template-columns:1fr 1.3fr; } }
.sig{ font:italic 400 var(--t-xl)/1 var(--f-serif); }
.contact-list{ list-style:none; margin:0 0 var(--s7); padding:0; border-top:1px solid var(--rule); }
.contact-list a{ display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule); }
.contact-list span{ color:var(--ash); }

/* ---------- forms ---------- */
.form{ display:grid; gap:var(--s5); max-width:560px; }
.field{ display:grid; gap:var(--s2); }
.field label,.field legend{ font:500 var(--t-s)/1 var(--f-sans); color:var(--ash); padding:0; }
.field input,.field textarea,.field select{
  font:400 16px/1.4 var(--f-sans); color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid rgba(0,0,0,.35); border-radius:0; padding:var(--s2) 0; width:100%;
  transition:border-color var(--t-fast);
}
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
fieldset.field{ border:0; margin:0; padding:0; }
.choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s2); margin-top:var(--s2); }
.choices label{ position:relative; display:flex; align-items:center; min-height:48px; padding:0 var(--s4); border:1px solid rgba(0,0,0,.25); color:var(--ink); font:400 var(--t-m)/1.2 var(--f-sans); cursor:pointer; }
.choices input{ position:absolute; opacity:0; }
.choices label:has(input:checked){ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.choices label:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
.note{ font-size:var(--t-s); color:var(--ash); margin:0; }

/* ---------- checkout ---------- */
.co{ display:grid; gap:var(--s7); }
@media (min-width:960px){ .co{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start; } .co-sum{ position:sticky; top:calc(var(--bar-h) + var(--sat) + var(--s6)); } }
.co-sum{ display:grid; gap:var(--s4); align-content:start; padding:var(--s5); background:#f6f6f6; box-shadow:inset 0 0 0 1px var(--rule); }
.co-sum .total{ margin:0; }
.pay{ display:grid; gap:var(--s2); margin-top:var(--s2); }
@media (min-width:600px){ .pay{ grid-template-columns:1fr 1fr; } }
.pay label{ position:relative; cursor:pointer; }
.pay input{ position:absolute; opacity:0; }
.pay span{ display:grid; gap:6px; min-height:88px; padding:var(--s4); border:1px solid rgba(0,0,0,.25); transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast); }
.pay b{ font:500 var(--t-l)/1.1 var(--f-sans); }
.pay small{ font:400 var(--t-s)/1.4 var(--f-sans); color:var(--ash); }
.pay label:hover span{ border-color:var(--ink); }
.pay input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pay input:checked + span small{ color:#c9c9c9; }
.pay input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
.opt{ color:#8a8a8a; font-weight:400; margin-left:4px; }
.form-error{ margin:0; padding:var(--s3) var(--s4); background:var(--ink); color:var(--paper); font-size:var(--t-s); }
.field [aria-invalid="true"]{ border-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.mini{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.mini li{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:var(--s3); align-items:center; font-size:var(--t-s); }
.mini img{ width:48px; aspect-ratio:4/5; object-fit:cover; background:var(--fog); }
.mini b{ display:block; font-weight:500; }
.mini li > span:last-child{ white-space:nowrap; }
.status{ display:grid; gap:var(--s5); max-width:620px; }
.status .head{ margin:0; }
.status-actions{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.status .total{ margin:0; padding-top:var(--s3); border-top:1px solid var(--rule); }
.spinner{ width:28px; height:28px; border:1.5px solid var(--rule); border-top-color:var(--ink); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- cart ---------- */
.lines{ list-style:none; margin:0 0 var(--s6); padding:0; border-top:1px solid var(--rule); }
.line{ display:grid; grid-template-columns:84px 1fr; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule); }
.line img{ width:84px; aspect-ratio:4/5; object-fit:cover; background:var(--fog); }
.line-top{ display:flex; justify-content:space-between; gap:var(--s3); }
.line-top > span{ white-space:nowrap; }
.line-name{ font:400 var(--t-l)/1.2 var(--f-serif); margin:4px 0 0; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--rule); margin-top:var(--s3); }
.qty button{ width:40px; height:40px; font-size:18px; }
.qty output{ min-width:28px; text-align:center; font-weight:500; }
.line-rm{ font-size:var(--t-s); color:var(--ash); border-bottom:1px solid currentColor; align-self:end; }
.total{ display:flex; justify-content:space-between; align-items:baseline; font:500 var(--t-l)/1 var(--f-sans); margin-bottom:var(--s5); }
.empty{ display:grid; gap:var(--s5); justify-items:start; padding:var(--s6) 0; }
.empty p{ margin:0; max-width:36ch; }

/* ---------- immersive rooms (mood board, SHIFT) ---------- */
.immersive{ position:fixed; inset:0; background:#000; }
.immersive iframe{ width:100%; height:100%; border:0; display:block; }
.leave{
  position:fixed; z-index:40; top:calc(var(--sat) + var(--s3)); right:calc(var(--sar) + var(--s3));
  height:40px; padding:0 var(--s4); display:flex; align-items:center; gap:var(--s2);
  color:var(--paper); font:500 var(--t-s)/1 var(--f-sans);
  background:rgba(20,20,20,.42); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ---------- drawer: liquid glass, from the right ---------- */
.scrim{
  position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  opacity:0; transition:opacity var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease), -webkit-backdrop-filter var(--t-med) var(--ease);
}
body.drawer-open .scrim{ opacity:1; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.drawer{
  --x:100%;
  position:fixed; z-index:50; top:0; right:0; bottom:0; width:min(88vw,400px);
  transform:translateX(var(--x)); transition:transform var(--t-slow) var(--ease);
  color:var(--ink); touch-action:pan-y;
}
.drawer.is-dragging{ transition:none; }
body.drawer-open .drawer{ --x:0px; }
.drawer-glass{
  position:absolute; inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,.34) 100%),
    rgba(246,246,246,.46);
  -webkit-backdrop-filter:blur(26px) saturate(1.6) contrast(1.05); backdrop-filter:blur(26px) saturate(1.6) contrast(1.05);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.9), inset 2px 0 0 rgba(255,255,255,.25), -30px 0 60px -20px rgba(0,0,0,.35);
}
.drawer-glass::before{ /* the single reflection */
  content:""; position:absolute; top:0; left:0; right:0; height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0)); pointer-events:none;
}
.drawer-in{
  position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain;
  padding:calc(var(--sat) + var(--s4)) calc(var(--sar) + var(--s5)) calc(var(--sab) + var(--s5)) var(--s5);
  display:flex; flex-direction:column;
}
.drawer-top{ display:grid; grid-template-columns:1fr 44px; gap:var(--s2); align-items:center; }
.search{ display:flex; align-items:center; gap:var(--s3); height:48px; padding:0 var(--s3); background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.8); }
.search svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; opacity:.6; }
.search input{ flex:1; min-width:0; border:0; background:transparent; font:400 16px/1 var(--f-sans); color:var(--ink); outline:none; }
.search input::placeholder{ color:#6a6a6a; }
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.search:focus-within{ box-shadow:inset 0 0 0 1px var(--ink); }
.drawer-close{ width:44px; height:44px; display:grid; place-items:center; }
.drawer-close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
.nav{ margin-top:var(--s6); display:grid; gap:var(--s6); }
.nav section{ display:grid; }
.nav h2{ margin:0 0 var(--s2); font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.06em; color:#555; }
.nav a{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); padding:9px 0; font:400 var(--t-xl)/1.15 var(--f-sans); letter-spacing:-.01em; }
.nav a small{ font:400 var(--t-s)/1 var(--f-sans); color:#555; letter-spacing:0; }
.nav a[aria-current="page"]{ font-weight:600; }
.nav a:hover span{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.drawer-foot{ margin:auto 0 0; padding-top:var(--s7); font:400 10px/1 var(--f-mark); letter-spacing:.3em; color:#555; }
/* stagger on open (answers the user's action) */
.drawer .nav section,.drawer-top{ opacity:0; transform:translateX(18px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
body.drawer-open .drawer .nav section,body.drawer-open .drawer-top{ opacity:1; transform:none; }
body.drawer-open .drawer .nav section:nth-child(1){ transition-delay:60ms; }
body.drawer-open .drawer .nav section:nth-child(2){ transition-delay:100ms; }
body.drawer-open .drawer .nav section:nth-child(3){ transition-delay:140ms; }
body.drawer-open .drawer .nav section:nth-child(4){ transition-delay:180ms; }

.results{ margin-top:var(--s5); display:grid; gap:var(--s5); }
.results h2{ margin:0 0 var(--s1); font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.06em; color:#555; }
.results a{ display:grid; grid-template-columns:40px 1fr; gap:var(--s3); align-items:center; padding:6px; margin:0 -6px; }
.results a.noimg{ grid-template-columns:1fr; }
.results a[aria-selected="true"],.results a:hover{ background:rgba(0,0,0,.06); }
.results img{ width:40px; height:50px; object-fit:cover; background:var(--fog); }
.results b{ display:block; font-weight:500; }
.results span{ font-size:var(--t-s); color:#555; }
.results mark{ background:none; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.results .none{ margin:0; color:#555; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--sab) + 84px); z-index:70;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--paper); padding:var(--s3) var(--s5); font-size:var(--t-s);
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---------- page transitions ---------- */
::view-transition-old(root){ animation:vt-out 180ms var(--ease) both; }
::view-transition-new(root){ animation:vt-in 320ms var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }
.bar{ view-transition-name:bar; }
::view-transition-group(bar){ animation:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:1ms !important; animation-duration:1ms !important; transition-delay:0ms !important; }
}