/* Maysoun · site styles. Living signature identity: porcelain white, ink, gold. */
@font-face{font-family:"Readex Pro";font-style:normal;font-display:swap;font-weight:160 700;
  src:url(../fonts/readex-pro-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-display:swap;font-weight:160 700;
  src:url(../fonts/readex-pro-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-display:swap;font-weight:160 700;
  src:url(../fonts/readex-pro-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#FBFBF8; --stone:#F3F1EC; --ink:#1E1B18; --body:#3A3632; --muted:#6B6660; --line:#E6E2DA;
  --gold:#B08A4E; --gold-text:#8A6A36; --gallery:#121110; --g-ink:#EFE9DD; --g-muted:#A89F90;
  --coral:#A5583C; --wall-a:#FBF8F2; --wall-b:#F0EAE1; --wall-c:#E4DBCE;
  --shadow:drop-shadow(0 1px 1px rgba(58,44,30,.20)) drop-shadow(0 9px 12px rgba(58,44,30,.13)) drop-shadow(0 24px 30px rgba(58,44,30,.09));
  --shadow-s:drop-shadow(0 1px 1px rgba(58,44,30,.22)) drop-shadow(0 5px 7px rgba(58,44,30,.15));
  --wrap:1240px; --gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-h1:clamp(40px,5.4vw,76px); --f-h2:clamp(28px,3.4vw,46px); --f-lead:clamp(18px,1.6vw,22px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  font-weight:300;font-size:17px;line-height:1.85;font-variation-settings:"HEXP" 0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(en) body,body:lang(en){line-height:1.7}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.28em}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:#EADFC8}
h1,h2,h3{font-weight:300;margin:0;line-height:1.25;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-size:14px;line-height:1.6;color:var(--muted);font-weight:400;letter-spacing:0;margin:0}
.h1{font-size:var(--f-h1);line-height:1.12;font-weight:250}
.h2{font-size:var(--f-h2);line-height:1.22;font-weight:280}
.lead{font-size:var(--f-lead);line-height:1.8;color:var(--body)}
.muted{color:var(--muted)}
.gold{color:var(--gold-text)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(251,251,248,.86);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;view-transition-name:hdr}
.hdr.is-scrolled{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:28px;min-height:76px;transition:min-height .3s var(--ease)}
.hdr.is-scrolled .hdr__in{min-height:62px}
.hdr__logo{display:block;width:112px;flex:none;color:var(--ink);transition:width .3s var(--ease)}
.hdr.is-scrolled .hdr__logo{width:92px}
.hdr__logo svg{width:100%;height:auto;overflow:visible}
.nav{display:flex;align-items:center;gap:26px;margin-inline-start:auto}
.nav a{text-decoration:none;font-size:15px;font-weight:350;color:var(--body);position:relative;padding-block:6px}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after,.nav a.is-active::after{content:"";position:absolute;left:50%;bottom:-6px;width:7px;height:7.5px;margin-left:-3.5px;
  background:var(--gold);-webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
.nav .lang{border:1px solid var(--line);border-radius:999px;padding:4px 14px;font-size:14px}
.nav .lang:hover{border-color:var(--gold)}
.menu-btn{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:999px;height:40px;padding:0 16px;font:inherit;font-size:14px;font-weight:400;color:var(--ink);cursor:pointer}
.hdr__progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;pointer-events:none}
.hdr__progress span{display:block;height:100%;background:var(--gold);transform-origin:var(--prog-origin,right);transform:scaleX(var(--p,0))}
[dir="ltr"] .hdr__progress span{--prog-origin:left}
@media (max-width:900px){
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,251,248,.97)}
  .menu-btn{display:inline-flex;align-items:center}
  .nav{position:fixed;inset:0;top:0;z-index:60;background:var(--paper);flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:40px var(--gut);
    transform:translateY(-100%);transition:transform .45s var(--ease);visibility:hidden}
  .nav.is-open{transform:none;visibility:visible}
  .nav a{font-size:26px;font-weight:280}
  .nav .lang{font-size:16px;padding:6px 18px}
  .nav__close{position:absolute;top:18px;inset-inline-end:var(--gut);background:none;border:1px solid var(--line);border-radius:999px;height:40px;padding:0 16px;font:inherit;font-size:14px;cursor:pointer}
}
@media (min-width:901px){.nav__close{display:none}}

/* living signature (shared) */
.lsig{display:block;width:100%;height:auto;overflow:visible}
.lsig .fill image{opacity:0;transition:opacity 1.6s ease}
.lsig .fill image.on{opacity:1}
.lsig .ink{fill:currentColor}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(10px,2vw,28px) clamp(44px,5.5vw,80px)}
.hero__sig{width:min(100%,calc(min(46vh,520px) * 2.14));margin-inline-end:auto}
.hero__sig .wipe{transform:translateX(1300px);animation:sigwrite 2.6s .25s var(--ease) forwards}
[dir="ltr"] .hero__sig .wipe{transform:translateX(1300px)}
@keyframes sigwrite{to{transform:translateX(-120px)}}
.hero__txt{max-width:720px;display:flex;flex-direction:column;gap:10px;margin-top:clamp(10px,1.6vw,22px)}
.hero__name{font-size:15px;color:var(--muted);font-weight:400}
.hero__tag{font-size:clamp(32px,4.2vw,58px);line-height:1.25;font-weight:260;color:var(--ink)}
.hero__sub{font-size:var(--f-lead);color:var(--body);max-width:34em}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:inherit;font-size:16px;font-weight:400;
  text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(30,27,24,.16)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--gold);box-shadow:none}
.btn svg{width:20px;height:20px;flex:none}
.link{color:var(--gold-text);text-decoration:underline;text-decoration-color:rgba(138,106,54,.4);font-weight:400}
.link:hover{text-decoration-color:currentColor}
.link .arr{display:inline-block;transition:transform .25s var(--ease)}
.link:hover .arr{transform:translateX(-4px)}
[dir="ltr"] .link:hover .arr{transform:translateX(4px)}

/* ---------- tail divider ---------- */
.tail{display:block;width:180px;height:6px;background:var(--gold);-webkit-mask:url(../brand/tail_h.svg) center/100% 100% no-repeat;mask:url(../brand/tail_h.svg) center/100% 100% no-repeat}
[dir="ltr"] .tail{transform:scaleX(-1)}
.tail--center{margin-inline:auto}

/* ---------- sections ---------- */
.sec{padding-block:clamp(56px,7vw,104px)}
.sec--band{padding-block:clamp(44px,5.5vw,80px)}
.sec--tight{padding-block:clamp(40px,5vw,72px)}
.sec--top0{padding-top:0}
.sec--stone{background:var(--stone)}
.sec--dark{background:var(--gallery);color:var(--g-ink)}
.sec--dark .eyebrow,.sec--dark .muted{color:var(--g-muted)}
.sec__hd{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(32px,4vw,56px);max-width:760px}
.sec__hd--center{margin-inline:auto;text-align:center;align-items:center}
/* split header: title on one side, text on the other, both start-aligned */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,5vw,80px);align-items:end}
.split__hd{display:flex;flex-direction:column;gap:10px}
.split__txt{color:var(--body);max-width:36em}
.split--hd{margin-bottom:clamp(28px,3.5vw,48px)}
@media (max-width:820px){.split{grid-template-columns:1fr;align-items:start}}
/* contained banner: a box of its own, so centred text reads as a separate element */
.cta-card{background:var(--stone);border-radius:clamp(20px,2.4vw,32px);padding:clamp(32px,5vw,64px) clamp(20px,4vw,56px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.cta-card .lead{max-width:40em}
.cta-card .hero__cta{justify-content:center}

/* ---------- pieces (shared) ---------- */
.piece-img{filter:var(--shadow)}
.glow{position:relative;display:block}
.glow::after{content:"";position:absolute;inset:-2%;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:linear-gradient(100deg,transparent 30%,rgba(255,196,120,.85) 48%,rgba(255,236,200,.6) 52%,transparent 70%);background-size:260% 100%;background-position:120% 0}
.reveal .glow::after,.glow.in::after{animation:kiln 1.8s .15s var(--ease) both}
@keyframes kiln{0%{opacity:0;background-position:120% 0}25%{opacity:.9}100%{opacity:0;background-position:-40% 0}}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- home: walls rows ---------- */
.walls{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.wrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:center}
.wrow:nth-child(even){grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.wrow:nth-child(even) .wrow__art{order:2}
.wrow__art{position:relative;display:flex;align-items:center;justify-content:center;gap:3%;aspect-ratio:16/9;padding:5%;text-decoration:none;overflow:hidden;
  border-radius:clamp(16px,2vw,26px);
  background:radial-gradient(55% 75% at 50% 42%,rgba(255,250,240,.95),rgba(255,250,240,0) 72%),linear-gradient(180deg,var(--wall-a),var(--wall-b) 70%,var(--wall-c))}
.wrow__art .glow{flex:none;width:var(--cw)}
.wrow__art picture{display:block}
.wrow__art img{width:100%;height:auto;transition:transform .5s var(--ease)}
.wrow__art:hover img{transform:translateY(-4px)}
.wrow__name a{text-decoration:none}
.wrow__txt{display:flex;flex-direction:column;gap:14px}
.wrow__name{font-size:clamp(30px,3.4vw,46px);font-weight:270;line-height:1.2}
.wrow__lead{font-size:18px;color:var(--body)}
.wrow__meta{font-size:14px;color:var(--muted)}
@media (max-width:820px){.wrow,.wrow:nth-child(even){grid-template-columns:1fr;gap:18px}.wrow:nth-child(even) .wrow__art{order:0}}
/* dark band with a photo (home: how a piece is made) */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.band__txt{display:flex;flex-direction:column;gap:14px}
.band__img{margin:0}
.band__img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:clamp(16px,2vw,26px)}
@media (max-width:820px){.band{grid-template-columns:1fr}}
.link--light{color:#D9BC86;text-decoration-color:rgba(217,188,134,.45)}
/* numbered steps */
.num{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;color:var(--gold-text);font-size:15px;font-weight:400;line-height:1}
.sec--dark .num{color:#D9BC86;border-color:rgba(217,188,134,.55)}
.nlist{list-style:none;margin:8px 0 6px;padding:0;display:flex;flex-direction:column;gap:18px}
.nlist li{display:flex;gap:16px;align-items:flex-start}
.nlist .num{margin-top:1px}
.nlist h3{font-size:19px;font-weight:350;line-height:1.45}
.nlist p{color:var(--body);font-size:15.5px;margin-top:2px}
.sec--dark .nlist p{color:#CFC6B8}
.nlist--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px clamp(28px,5vw,80px);margin:0}
@media (max-width:820px){.nlist--grid{grid-template-columns:1fr}}

/* steps (craft teaser, acquire) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.step{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line)}
.sec--dark .step{border-top-color:#2E2924}
.step h3{font-size:21px;font-weight:330}
.step p{color:var(--body);font-size:16px}
.sec--dark .step p{color:#CFC6B8}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:14px;color:var(--muted);padding-top:22px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-inline-end:8px;color:#BDB6AB}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- piece page ---------- */
.ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(24px,3.5vw,48px) clamp(40px,5vw,80px)}
.ph__fig{position:relative;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:min(78vh,760px);touch-action:manipulation}
.ph__hint{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);cursor:zoom-in}
.ph__hint svg{width:18px;height:18px;flex:none}
@media (min-width:901px){.ph{align-items:start}.ph__fig{position:sticky;top:84px}}
.ph__fig picture{display:block}
.ph__fig .glow{width:min(100%,calc(min(76vh,720px) * var(--ar,1)))}
.ph__fig.shape-panel .glow{width:min(100%,calc(min(84vh,860px) * var(--ar,1)))}
.ph__fig img{width:100%;height:auto;cursor:zoom-in}
.ph__txt{display:flex;flex-direction:column;gap:16px}
.ph__name{font-size:var(--f-h1);font-weight:250;line-height:1.1}
.ph__lead{font-size:var(--f-lead);color:var(--ink);font-weight:320;line-height:1.75}
.ph__body p{color:var(--body);margin-top:10px}
.ph .tail{margin-block:10px 4px}
.spec{margin:6px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;row-gap:12px;font-size:15.5px}
.spec dt{color:var(--muted);font-weight:300;white-space:nowrap}
.spec dd{margin:0;color:var(--ink);font-weight:350}
.spec .sub{display:block;color:var(--muted);font-weight:300;font-size:14px;margin-top:2px}
.status{display:inline-flex;align-items:center;gap:8px}
.status::before{content:"";width:8px;height:8.5px;background:var(--gold);-webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
.status.is-sold::before{background:var(--coral)}
.price{color:var(--muted);font-weight:300;letter-spacing:.01em}
.price.has{color:var(--ink);font-weight:350}
.ph__cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px}
.ph__note{font-size:13.5px;color:var(--muted)}
.soldnote{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--body);background:var(--stone);border-radius:18px;padding:14px 18px}
.soldnote::before{content:"";flex:none;margin-top:9px;width:9px;height:9.5px;background:var(--coral);-webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
@media (max-width:900px){.ph{grid-template-columns:1fr}.ph__fig{min-height:0}.ph__fig .glow{width:min(100%,calc(66vh * var(--ar,1)))}}

/* hover magnifier: a plain round lens */
.lensbox{position:absolute;width:200px;height:200px;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s var(--ease);z-index:5;left:0;top:0;
  box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--gold),0 12px 30px rgba(30,27,24,.28)}
.lensbox.on{opacity:1;transform:scale(1)}
.lensbox__img{position:absolute;inset:0;background-repeat:no-repeat;background-color:var(--paper)}
.zoom-hint{position:absolute;bottom:-34px;inset-inline-start:50%;transform:translateX(50%);font-size:13px;color:var(--muted);white-space:nowrap}
[dir="ltr"] .zoom-hint{transform:translateX(-50%)}

/* details: close-up crops, each with a small photo of the whole piece and a gold frame showing where it is */
.dets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.dets--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.det{margin:0;display:flex;flex-direction:column;gap:12px}
.det__img{position:relative;display:block;border-radius:clamp(12px,1.4vw,18px);overflow:hidden;background:var(--stone)}
.det__img>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.det__loc{position:absolute;inset-inline-start:10px;bottom:10px;width:30%;max-width:100px;border:3px solid var(--paper);border-radius:7px;background:var(--paper);box-shadow:0 4px 14px rgba(30,27,24,.28)}
.det__loc.shape-panel{width:19%;max-width:64px}
.det__loc img{display:block;width:100%;height:auto;border-radius:3px}
.det__loc i{position:absolute;display:block;border:2px solid var(--gold);box-shadow:0 0 0 1px rgba(255,255,255,.75);border-radius:2px}
.det figcaption{display:flex;flex-direction:column;gap:2px}
.det figcaption strong{font-weight:380;font-size:16px;color:var(--ink);line-height:1.5}
.det figcaption span{font-size:13.5px;color:var(--muted)}
@media (max-width:900px){.dets,.dets--3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* hadith text */
.htext{max-width:860px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.htext blockquote{margin:0;font-size:clamp(20px,2.1vw,27px);line-height:2.05;font-weight:300;color:var(--ink)}
.htext blockquote[lang="en"]{font-size:clamp(17px,1.6vw,20px);line-height:1.8;color:var(--body)}
.htext cite{font-style:normal;font-size:15px;color:var(--gold-text)}

/* angles */
.angles{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.angles button{flex:0 0 auto;width:min(78vw,520px);scroll-snap-align:start;padding:0;border:0;background:none;cursor:zoom-in;border-radius:18px;overflow:hidden}
.angles img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease)}
.angles button:hover img{transform:scale(1.03)}
@media (min-width:900px){.angles{overflow:visible;padding-bottom:0}.angles button{flex:1 1 0;width:auto;min-width:0;max-width:520px}}

/* signature fingerprint */
.fp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.fp__img{border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:#ddd}
.fp__img img{width:100%;height:100%;object-fit:cover}
.fp__txt{display:flex;flex-direction:column;gap:14px}
.fp__txt p{color:var(--body)}
@media (max-width:820px){.fp{grid-template-columns:1fr}}

/* ---------- salon wall ---------- */
.salon-sec{padding-block:clamp(40px,5vw,72px) clamp(36px,4.5vw,64px)}
.salon-box{max-width:calc(min(64vh,600px) * var(--arn,2));margin-inline:auto}
.salon-hd{margin-bottom:clamp(22px,2.6vw,34px)}
.salon{position:relative;width:100%;border-radius:clamp(14px,2vw,28px);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(40% 62% at 50% var(--cy,40%), rgba(255,249,238,1), rgba(255,249,238,0) 72%),
    linear-gradient(180deg,var(--wall-a),var(--wall-b) 62%,var(--wall-c));
  box-shadow:inset 0 0 0 1px rgba(30,27,24,.04)}
.salon::before{content:"";position:absolute;inset:0;z-index:0;opacity:.35;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .44 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.salon__stage{position:relative;width:100%;aspect-ratio:var(--ar)}
.salon__p{left:calc(var(--l) * 1%);top:calc(var(--t) * 1%);width:calc(var(--w) * 1%)}
.salon__furniture{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.salon__furniture .f{fill:rgba(176,138,78,.12);stroke:var(--gold);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.salon__furniture .l{fill:none;stroke:var(--gold);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.salon__furniture .thin{stroke-width:1;opacity:.85}
.salon__furniture .flame{fill:rgba(214,160,74,.55);stroke:none}
.salon__furniture .floor{fill:#DCD2C3}
.salon__furniture .base{fill:#EFE8DD}
.salon__p{position:absolute;z-index:2;display:block;text-decoration:none;transform:translateY(0);transition:transform .45s var(--ease)}
.salon__p img{width:100%;height:auto;filter:var(--shadow-s);transition:filter .45s var(--ease)}
.salon__p::after{content:"";position:absolute;inset:-10px}
.salon__p:hover,.salon__p:focus-visible{transform:translateY(-5px)}
.salon__p:hover img,.salon__p:focus-visible img{filter:drop-shadow(0 2px 2px rgba(58,44,30,.2)) drop-shadow(0 14px 18px rgba(58,44,30,.2))}
.salon__tag{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,4px);white-space:nowrap;font-size:13px;line-height:1.4;padding:5px 12px;border-radius:999px;
  background:rgba(30,27,24,.88);color:var(--paper);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:3}
.salon__p:hover .salon__tag,.salon__p:focus-visible .salon__tag{opacity:1;transform:translate(-50%,0)}
.salon__sold{position:absolute;top:6%;inset-inline-end:6%;width:clamp(7px,1vw,11px);aspect-ratio:87/93;background:var(--coral);z-index:3;
  -webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
.salon__p.is-sold img{filter:var(--shadow-s) saturate(.9)}
.salon__here{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:3;pointer-events:none}
.salon__here i{display:block;width:10px;height:10.7px;background:var(--gold);-webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
.salon__here span{font-size:12px;color:var(--gold-text);white-space:nowrap;font-weight:400}
.salon__p.is-current img{filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 2px 2px rgba(58,44,30,.22)) drop-shadow(0 10px 14px rgba(58,44,30,.18))}
.salon__scale{position:absolute;bottom:12px;inset-inline-start:16px;z-index:3;font-size:12px;color:var(--muted);background:rgba(251,251,248,.75);padding:3px 10px;border-radius:999px}
.salon-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.salon-list a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14.5px;font-weight:350;background:var(--paper);transition:border-color .2s}
.salon-list a:hover{border-color:var(--gold)}
.salon-list a[aria-current="page"]{border-color:var(--ink)}
.salon-list .dim{color:var(--muted);font-weight:300;font-size:13px}
.salon-list .sold-dot{width:7px;height:7.5px;background:var(--coral);-webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
.salon-hint{font-size:13px;color:var(--muted);margin-top:12px}
@media (max-width:640px){
  .salon__stage{aspect-ratio:var(--arm)}
  .salon__furniture{inset:auto;max-width:none;left:calc(var(--zx) * var(--zk) * -1%);top:calc(var(--zy) * var(--zky) * -1%);width:calc(var(--zk) * 100%);height:calc(var(--zky) * 100%)}
  .salon__p{left:calc((var(--l) - var(--zx)) * var(--zk) * 1%);top:calc((var(--t) - var(--zy)) * var(--zky) * 1%);width:calc(var(--w) * var(--zk) * 1%)}
  .salon__scale{bottom:10px;inset-inline-start:10px;font-size:11.5px}
}

/* ---------- rooms: the same wall in AI-generated rooms, real pieces at true scale ---------- */
.rooms{--side:clamp(150px,15vw,190px);--gap:clamp(14px,2vw,28px);display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:var(--gap);align-items:start;
  max-width:calc(min(68vh,640px) * 1.5 + var(--side) + var(--gap));margin-inline:auto}
.rooms__tabs{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:16px}
.rooms__tab{display:flex;flex-direction:column;gap:7px;padding:0;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;text-align:start;border-radius:12px}
.rooms__tab img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;opacity:.7;outline:2px solid transparent;outline-offset:3px;transition:opacity .25s,outline-color .25s}
.rooms__tab span{font-size:14px;font-weight:350;line-height:1.4}
.rooms__tab:hover img{opacity:1}
.rooms__tab[aria-selected="true"]{color:var(--ink)}
.rooms__tab[aria-selected="true"] img{opacity:1;outline-color:var(--gold)}
.room{grid-column:1;grid-row:1;position:relative;aspect-ratio:1600/1067;border-radius:clamp(14px,2vw,28px);overflow:hidden;background:var(--stone)}
.room[hidden]{display:none}
.room picture,.room>picture img{display:block;width:100%;height:100%}
.room>picture img{object-fit:cover}
.room__p{position:absolute;z-index:2;left:calc(var(--l) * 1%);top:calc(var(--t) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
  border-radius:3px;outline:1.5px solid transparent;outline-offset:4px;transition:outline-color .25s}
.room__p:hover{outline-color:rgba(251,251,248,.95)}
.room__p:hover,.room__p:focus-visible{z-index:4}
.room__tag{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,4px);white-space:nowrap;font-size:13px;line-height:1.4;padding:5px 12px;border-radius:999px;
  background:rgba(30,27,24,.88);color:var(--paper);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:3}
.room__p:hover .room__tag,.room__p:focus-visible .room__tag{opacity:1;transform:translate(-50%,0)}
.room__here{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 10px;border-radius:999px;
  background:rgba(251,251,248,.93);box-shadow:0 2px 8px rgba(30,27,24,.18);font-size:12px;line-height:1.4;color:var(--gold-text);font-weight:400;white-space:nowrap;pointer-events:none;z-index:3}
.room__here i{display:block;width:8px;height:8.5px;background:var(--gold);-webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
.rooms__note{grid-column:1/-1;grid-row:2;font-size:13px;color:var(--muted)}
@media (max-width:900px){
  .rooms{grid-template-columns:minmax(0,1fr);max-width:none}
  .rooms__tabs{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,180px));gap:10px}
  .rooms__note{grid-row:3}
}
@media (max-width:640px){
  .room{aspect-ratio:900/1125}
  .room__p{left:calc(var(--ml) * 1%);top:calc(var(--mt) * 1%);width:calc(var(--mw) * 1%);height:calc(var(--mh) * 1%)}
  .rooms__tab span{font-size:12.5px}
  .room__here{font-size:11px;padding:2px 9px 2px 8px}
}

/* prev/next */
.pn{display:flex;justify-content:space-between;gap:16px;padding-block:28px;border-top:1px solid var(--line);margin-top:clamp(40px,5vw,72px)}
.pn a{display:flex;flex-direction:column;gap:2px;text-decoration:none;max-width:48%}
.pn a:last-child{text-align:end}
.pn small{font-size:13px;color:var(--muted)}
.pn span{font-size:20px;font-weight:300}

/* ---------- works index ---------- */
.wgroup{margin-top:clamp(48px,6vw,90px)}
.wgroup__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:28px}
.wgroup__hd h2{font-size:clamp(24px,2.6vw,34px);font-weight:280}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(24px,3vw,44px)}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.card__img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:8%}
.card__img picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.card__img img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:var(--shadow-s);transition:transform .5s var(--ease)}
.card:hover .card__img img{transform:translateY(-4px)}
.card__name{font-size:19px;font-weight:330;line-height:1.35}
.card__meta{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}

/* ---------- prose pages ---------- */
.page-hd{padding-block:clamp(32px,5vw,72px) clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:14px;max-width:880px}
.prose{max-width:760px}
.prose h2{font-size:clamp(24px,2.4vw,32px);font-weight:300;margin-top:clamp(36px,4vw,56px);margin-bottom:12px}
.prose p{color:var(--body);margin-bottom:14px}
.faq{max-width:860px}
.faq details{border-top:1px solid var(--line);padding-block:6px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding-block:16px;font-size:18px;font-weight:330}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--gold-text);font-weight:200;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--body);padding-bottom:18px;max-width:720px}
.care{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.care li{display:flex;gap:12px;align-items:flex-start;color:var(--body)}
.care li::before{content:"";flex:none;margin-top:10px;width:8px;height:8.5px;background:var(--gold);-webkit-mask:url(../brand/dot.svg) center/100% 100% no-repeat;mask:url(../brand/dot.svg) center/100% 100% no-repeat}
@media (max-width:760px){.care{grid-template-columns:1fr}}
.cert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:820px){.cert{grid-template-columns:1fr}}

/* about portrait block: signature large */
.about-sig{color:var(--ink);max-width:620px}
.about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(40px,7vw,110px);align-items:start}
.about__art{position:sticky;top:96px;padding-top:clamp(40px,6vw,96px);display:flex;flex-direction:column;gap:18px}
.about__sig{margin:0 0 18px}
.about__sig img{width:100%;height:auto;border-radius:22px}
.about__sig figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}
.about__works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:end}
.about__w{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none}
.about__w img{width:100%;height:auto;filter:var(--shadow-s);transition:transform .5s var(--ease)}
.about__w:hover img{transform:translateY(-4px)}
.about__wn{font-size:14px;color:var(--body);font-weight:350}
@media (max-width:900px){.about{grid-template-columns:1fr}.about__art{position:static;padding-top:0}}
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-block:clamp(8px,2vw,24px) clamp(56px,7vw,100px)}
.detail{margin:0}
.detail img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:clamp(14px,1.6vw,22px)}
.detail figcaption{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.detail strong{font-weight:400;font-size:17px;color:var(--ink)}
.detail figcaption a{font-size:14px;color:var(--gold-text);text-decoration:none}
.detail figcaption a:hover{text-decoration:underline}
@media (max-width:760px){.details{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.detail{scroll-snap-align:start}}

/* ---------- footer ---------- */
.ftr{background:var(--gallery);color:var(--g-ink);padding-block:clamp(36px,4.5vw,56px) 24px;margin-top:0}
.ftr__top{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.ftr__brand{display:flex;align-items:center;gap:22px;text-decoration:none;color:inherit}
.ftr__sig{display:block;width:132px;color:var(--gold)}
.ftr__tag{font-size:17px;font-weight:300;color:var(--g-ink)}
.ftr__nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px}
.ftr__nav a{text-decoration:none;color:#D8D0C2}
.ftr__nav a:hover{color:var(--paper)}
.ftr__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:16px;border-top:1px solid #2E2924;font-size:13px;color:var(--g-muted)}
@media (max-width:760px){.ftr__brand{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---------- dialogs ---------- */
dialog.dlg{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
dialog.dlg::backdrop{background:rgba(18,17,16,.86);backdrop-filter:blur(4px)}
.dlg__in{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:56px 16px 24px}
.dlg__close{position:fixed;top:14px;inset-inline-end:16px;z-index:2;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(18,17,16,.5);color:#fff;font:inherit;font-size:14px;cursor:pointer}
.dlg__scroll{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;display:grid;place-items:center}
.dlg__scroll img{max-width:none;height:auto}
.dlg--card .dlg__in{padding:16px}
.wa-card{background:var(--paper);color:var(--ink);border-radius:24px;max-width:460px;width:100%;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.wa-card pre{white-space:pre-wrap;font:inherit;font-size:15px;background:var(--stone);border-radius:14px;padding:14px 16px;margin:0;color:var(--body)}
.wa-card .row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- view transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--ease)}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero__sig .wipe{transform:translateX(-120px)}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{.hdr,.ftr,.salon-sec,.rooms-sec,.angles{display:none}}