/* ANJI apothecary — shared stylesheet
   Palette, type and ornament all taken from the production artwork:
   Pantone 553 C / 574 C / 7508 C, Cinzel + Poppins, frames traced from the dieline. */

/* ───────────────────────── tokens ───────────────────────── */
:root{
  /* light is the default ground: ivory printing paper, not kraft board */
  --paper:#FBF6EC; --paper-2:#F4EAD7; --paper-3:#EDDFC4; --card:#FFFDF8;
  --kraft:#E7BF89; --kraft-2:#D8A768; --kraft-3:#C08F4E;
  --olive:#4D5A31; --forest:#294635; --forest-2:#1C3325;
  --brass:#A8803F; --gold:#C9A063; --gold-lt:#E3C48E;
  --teal:#0B6A62;

  --ground:var(--paper); --band:var(--paper-2); --panel:var(--card);
  --text:#26331F; --text-2:#5C6A52; --display:var(--forest); --accent:var(--brass);
  --line:rgba(41,70,53,.26); --line-soft:rgba(41,70,53,.13);
  --orn:var(--forest); --orn-soft:rgba(41,70,53,.5);
  --shadow-s:0 2px 10px -4px rgba(52,40,20,.3);
  --shadow:0 26px 54px -30px rgba(52,40,20,.5);
  --shadow-l:0 40px 90px -46px rgba(52,40,20,.62);

  --serif:'Cinzel','Baskerville Old Face',Baskerville,'Times New Roman',serif;
  --sans:'Poppins','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --ar-serif:'Cairo','Geeza Pro',serif;
  --ar-sans:'Tajawal','Geeza Pro',sans-serif;

  --fs-mega:clamp(2.4rem,7vw,5.6rem);
  --fs-h1:clamp(1.9rem,4.4vw,3.5rem);
  --fs-h2:clamp(1.45rem,2.9vw,2.3rem);
  --fs-h3:clamp(1.05rem,1.7vw,1.35rem);
  --fs-body:clamp(.95rem,1.02vw,1.05rem);
  --fs-sm:.8rem;
  --gut:clamp(18px,5vw,64px);
  --rail:clamp(0px,6.5vw,104px);
  --maxw:1180px;
}
:root[data-theme="dark"]{
  --ground:#0B0F0C; --band:#111813; --panel:#17221B; --card:#17221B;
  --text:#ECE2CB; --text-2:#B6A98E; --display:#E9CE9B; --accent:#D8B173;
  --line:rgba(216,177,115,.32); --line-soft:rgba(216,177,115,.15);
  --orn:#C9A063; --orn-soft:rgba(201,160,99,.55);
  --shadow-s:0 2px 10px -4px rgba(0,0,0,.8);
  --shadow:0 26px 54px -28px rgba(0,0,0,.9);
  --shadow-l:0 40px 90px -40px rgba(0,0,0,.95);
}

/* ───────────────────────── base ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:86px}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-body); font-weight:300; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
html[lang="ar"] body{font-family:var(--ar-sans); line-height:2}
html[lang="ar"] .lede{max-width:min(100%,58ch)}
html[lang="ar"] .sec__head{max-width:none}
img,svg{max-width:100%}
img{display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
::selection{background:var(--olive); color:#FFF6E4}

h1,h2,h3,h4,.serif{font-family:var(--serif); font-weight:400; color:var(--display); text-wrap:balance; letter-spacing:.02em; margin:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] .serif{font-family:var(--ar-serif); letter-spacing:0}
p{margin:0}
.eyebrow{font-size:var(--fs-sm); font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); margin:0}
html[lang="ar"] .eyebrow{letter-spacing:.06em; font-family:var(--ar-sans)}
.lede{font-size:clamp(1rem,1.35vw,1.18rem); color:var(--text-2); max-width:64ch}
.num{direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* paper grain + wallpaper */
.grain{position:fixed; inset:0; pointer-events:none; z-index:80; opacity:.42; mix-blend-mode:multiply}
:root[data-theme="dark"] .grain{mix-blend-mode:overlay; opacity:.26}
.wallpaper{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:url("wallpaper.svg") repeat; background-size:clamp(90px,9vw,140px);
  opacity:.05;
}
:root[data-theme="dark"] .wallpaper{opacity:.05; filter:invert(1) sepia(1) saturate(2) hue-rotate(-12deg)}



/* inline sprite marks (a CSS mask cannot load a sibling file over file://) */
.ic{display:block; width:100%; height:auto; fill:currentColor}
.ic--logo{aspect-ratio:3545/2317}
.ic--social{aspect-ratio:1290/85}

/* ornate frames as background images, with a colour file per theme */
.frame--bot{
  background:url("frame-botanical-green.svg") no-repeat center / 100% 100%;
}
:root[data-theme="dark"] .frame--bot{background-image:url("frame-botanical-gold.svg")}
.opening__ornament{
  background:url("frame-scroll-green.svg") no-repeat center / 100% 100%;
}
:root[data-theme="dark"] .opening__ornament{background-image:url("frame-scroll-gold.svg")}

/* ───────────────────────── header ───────────────────────── */
.topbar{
  position:fixed; inset-inline:0; top:0; z-index:70;
  padding-top:env(safe-area-inset-top,0px);
  display:flex; align-items:center; gap:clamp(8px,1.6vw,22px);
  padding-inline:var(--gut); height:calc(66px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.topbar__logo{display:block; width:clamp(70px,6.5vw,98px); color:var(--display); flex:none}
.topbar__logo .ic{width:100%}
.nav{display:flex; gap:clamp(10px,1.5vw,26px); margin-inline-start:auto; align-items:center}
.nav a{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--text-2); padding-block:6px; position:relative}
html[lang="ar"] .nav a{letter-spacing:.01em; font-size:.88rem}
.nav a::after{content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:var(--ori,left); transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
@media (max-width:1000px){.nav{display:none}}
.tools{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
@media (min-width:1001px){.tools{margin-inline-start:clamp(12px,2vw,28px)}}
.pill{
  border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--text-2);
  transition:border-color .3s,color .3s,background .3s; white-space:nowrap;
}
.pill:hover{border-color:var(--accent); color:var(--display)}
.pill--on{background:var(--olive); border-color:var(--olive); color:#FFF6E4}
html[lang="ar"] .pill{letter-spacing:0; font-size:.8rem}
.cartbtn{display:flex; align-items:center; gap:7px}
.cartbtn__n{min-width:19px; height:19px; border-radius:999px; background:var(--accent); color:var(--ground); display:grid; place-items:center; font-size:.66rem; font-weight:600; padding-inline:5px; font-variant-numeric:tabular-nums}
.proto{font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); border:1px dashed var(--line); padding:4px 8px; white-space:nowrap}
@media (max-width:820px){.proto{display:none}}
.burger{display:none}
@media (max-width:1000px){.burger{display:block}}

/* ───────────────────────── layout ───────────────────────── */
main{position:relative; z-index:3}
section{position:relative; padding-inline:var(--gut)}
.wrap{max-width:var(--maxw); margin-inline:auto; width:100%}
.wrap--narrow{max-width:820px}
.band{background:var(--band)}
.band--kraft{background:linear-gradient(180deg,var(--kraft) 0%,var(--kraft-2) 100%); color:var(--forest-2)}
.band--kraft .eyebrow{color:var(--forest)}
.band--kraft .lede,.band--kraft p{color:#3A4A2F}
:root[data-theme="dark"] .band--kraft{background:linear-gradient(180deg,#1A2419,#131B14)}
:root[data-theme="dark"] .band--kraft .lede,:root[data-theme="dark"] .band--kraft p{color:var(--text-2)}

.sec{padding-block:clamp(54px,8.5vw,128px)}
.sec__head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(26px,4.4vw,56px)}
.sec__head--mid{text-align:center; align-items:center}

/* ornamental divider */
.divider{display:flex; align-items:center; gap:18px; color:var(--orn-soft); margin-block:clamp(26px,4vw,52px)}
.divider i{flex:1; height:1px; background:currentColor; opacity:.5}
.divider svg{width:clamp(56px,7vw,92px); height:auto; fill:currentColor; flex:none}

/* reveal, visible at rest */
.rv{opacity:.55; transform:translateY(20px); transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ─────────────── ornate frames (traced from the dieline) ─────────────── */
.framed{position:relative}
.framed > .frame{position:absolute; inset:0; width:100%; height:100%; opacity:.72; pointer-events:none}

.frame-pad{padding:clamp(30px,5vw,68px) clamp(26px,5vw,72px)}

/* border-image version keeps the corners undistorted on variable-aspect blocks */
:root[data-theme="dark"] .orn-box{border-image-source:url("frame-panel-gold.svg")}
.orn-box{
  border:clamp(26px,3.6vw,52px) solid transparent;
  border-image-source:url("frame-panel-green.svg");
  border-image-slice:150 140 150 140;
  border-image-repeat:stretch;
  background:var(--panel);
  background-clip:padding-box;
}

/* ───────────────────────── buttons ───────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px; border:1px solid var(--olive); color:var(--olive);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  overflow:hidden; transition:color .45s; isolation:isolate; text-align:center;
}
html[lang="ar"] .btn{letter-spacing:.01em; font-size:.9rem}
.btn::before{content:""; position:absolute; inset:0; background:var(--olive); transform:scaleY(0); transform-origin:bottom; transition:transform .5s cubic-bezier(.2,.8,.2,1); z-index:-1}
.btn:hover{color:#FFF6E4}
.btn:hover::before{transform:scaleY(1); transform-origin:top}
.btn--solid{background:var(--olive); color:#FFF6E4}
.btn--solid::before{background:var(--forest)}
.btn--gold{border-color:var(--brass); color:var(--brass)}
.btn--gold::before{background:var(--brass)}
:root[data-theme="dark"] .btn{border-color:var(--accent); color:var(--accent)}
:root[data-theme="dark"] .btn::before{background:var(--accent)}
:root[data-theme="dark"] .btn:hover{color:#0B0F0C}
:root[data-theme="dark"] .btn--solid{background:var(--accent); color:#0B0F0C}

/* ───────────────────────── hero portal ───────────────────────── */
.portal{display:grid; place-items:center; padding-block:calc(78px + env(safe-area-inset-top,0px)) clamp(26px,5vh,64px); overflow:clip}
.portal__stage{position:relative; width:100%; max-width:min(1010px,91vh); display:grid; justify-items:center; align-items:start; margin-inline:auto}
.portal__stage > *{grid-area:1/1}
.portal__arch{width:100%; height:auto; align-self:start; color:var(--orn); opacity:.9; will-change:transform,opacity; z-index:0}
.portal__inner{z-index:2; align-self:start; width:62%; min-width:270px; text-align:center; padding-block:34.5% clamp(12px,2.4vh,32px)}
.portal__mark{width:min(100%,360px); margin-inline:auto; height:auto; color:var(--display); filter:drop-shadow(0 10px 24px rgba(52,40,20,.22))}
:root[data-theme="dark"] .portal__mark{filter:drop-shadow(0 10px 30px rgba(0,0,0,.7))}
.portal__mark--dark{display:none}
:root[data-theme="dark"] .portal__mark--light{display:none}
:root[data-theme="dark"] .portal__mark--dark{display:block}
.portal__word{margin:clamp(12px,1.8vh,22px) 0 0; font-size:var(--fs-sm); letter-spacing:.6em; text-transform:uppercase; color:var(--accent); font-weight:500}
html[lang="ar"] .portal__word{letter-spacing:.08em; font-size:1rem}
.portal__tag{font-family:var(--serif); font-size:clamp(1rem,1.9vw,1.42rem); line-height:1.55; max-width:26ch; margin:clamp(16px,2.4vh,28px) auto 0; color:var(--display)}
html[lang="ar"] .portal__tag{font-family:var(--ar-serif); max-width:30ch}
.portal__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:clamp(20px,3vh,34px)}
.scrollcue{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:clamp(18px,3vh,34px); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-2)}
.scrollcue i{display:block; width:1px; height:clamp(26px,4vh,44px); background:linear-gradient(var(--accent),transparent)}
.botanic{position:absolute; pointer-events:none; will-change:transform; mix-blend-mode:multiply; opacity:.5}
:root[data-theme="dark"] .botanic{mix-blend-mode:screen; opacity:.26; filter:sepia(1) saturate(1.6) hue-rotate(-14deg) brightness(1.1)}
.botanic--l{inset-inline-start:-6%; bottom:-4%; width:min(36%,360px)}
.botanic--r{inset-inline-end:-8%; top:2%; width:min(29%,290px); transform:scaleX(-1)}

/* ───────────────────────── the opening (scroll scrub) ───────────────────────── */
.opening{padding-inline:0}
.opening__track{position:relative; height:520vh}
.opening__stage{
  position:sticky; top:0; height:100vh; display:grid; place-items:center;
  padding-inline:var(--gut); overflow:clip;
}
.opening__grid{display:grid; grid-template-columns:1fr; place-items:center; gap:clamp(14px,2vw,28px); width:100%; max-width:var(--maxw)}
@media (min-width:940px){.opening__grid{grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); align-items:center}}
.opening__copy{
  position:relative; width:100%; text-align:center; max-width:min(100%,460px); z-index:2; justify-self:stretch;
  padding:clamp(14px,2vw,26px);
}
.opening__copy::before{
  content:""; position:absolute; inset:-6% -8%; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse at center, var(--band) 38%, transparent 76%);
}
@media (min-width:940px){.opening__copy{text-align:start}}
.opening__step{position:relative; min-height:clamp(230px,30vh,320px); margin-bottom:6px}
.opening__cap{position:absolute; inset-inline:0; top:0; opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; pointer-events:none}
.opening__cap.on{opacity:1; transform:none; pointer-events:auto}
.opening__cap h3{font-size:clamp(1.3rem,2.3vw,1.95rem); margin:.3em 0 .45em; line-height:1.15}
.opening__cap p{color:var(--text-2); font-size:.98rem}
.opening__box{
  position:relative; width:min(100%,clamp(320px,56vh,720px)); aspect-ratio:699/933;
  perspective:1400px; perspective-origin:50% 40%; will-change:transform;
}
.opening__box::after{
  content:""; position:absolute; inset-inline:12%; bottom:2%; height:5%;
  background:radial-gradient(ellipse at center, rgba(52,36,14,.42), transparent 70%);
  filter:blur(6px); z-index:0; will-change:transform,opacity;
}
.bx{position:absolute; inset:0; width:100%; height:auto; will-change:transform; backface-visibility:hidden}
.bx-lid{transform-origin:50% 49.54%; z-index:1}
.bx-body{z-index:2}
.bx-drawer-tl,.bx-drawer-bl,.bx-drawer-r{z-index:3}
.opening__vessels{position:absolute; inset:0; z-index:4; pointer-events:none}
.opening__vessels img{position:absolute; width:auto; opacity:0; will-change:transform,opacity; filter:drop-shadow(0 16px 20px rgba(52,40,20,.34))}
.opening__rail{
  position:absolute; inset-inline-start:var(--gut); bottom:clamp(18px,4vh,42px);
  display:flex; align-items:center; gap:12px; font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-2);
}
.opening__rail b{display:block; width:clamp(90px,16vw,200px); height:2px; background:var(--line); position:relative; overflow:hidden}
.opening__rail b i{position:absolute; inset-block:0; inset-inline-start:0; width:0%; background:var(--accent); display:block}
html[lang="ar"] .opening__rail{letter-spacing:0; font-size:.8rem}

.opening__ornament{
  position:absolute; inset:clamp(10px,2vh,26px) var(--gut); z-index:0; pointer-events:none;
  opacity:0; will-change:opacity, transform;
}

/* ───────────────────────── about ───────────────────────── */
.about__grid{display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1fr}
@media (min-width:900px){.about__grid{grid-template-columns:1.15fr .85fr; align-items:center}}
.dropcap::first-letter{
  font-family:var(--serif); float:inline-start; font-size:3.6em; line-height:.86;
  padding-inline-end:.1em; padding-block-start:.06em; color:var(--accent); font-weight:600;
}
html[lang="ar"] .dropcap::first-letter{float:none; font-size:1em; padding:0; color:inherit}
.about__art{position:relative; display:grid; place-items:center; padding:clamp(30px,5.5vw,70px)}
.about__art img.photo{width:min(86%,360px); filter:drop-shadow(0 30px 48px rgba(52,40,20,.4))}

/* ───────────────────────── product shelf ───────────────────────── */
.shelf{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.6vw,34px)}
@media (min-width:620px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.shelf{grid-template-columns:repeat(3,1fr)}}
.card{
  position:relative; background:var(--panel); border:1px solid var(--line-soft);
  padding:clamp(18px,2.4vw,26px) clamp(16px,2vw,22px) clamp(18px,2.2vw,24px);
  display:flex; flex-direction:column; gap:14px; text-align:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .55s;
}
.card:hover{transform:translateY(-8px); border-color:var(--accent); box-shadow:var(--shadow)}
.card__corner{position:absolute; width:26px; height:26px; color:var(--accent); opacity:.6}
.card__corner svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.6}
.card__corner--tl{top:8px; inset-inline-start:8px}
.card__corner--br{bottom:8px; inset-inline-end:8px; transform:rotate(180deg)}
.card__img{padding:0; width:100%; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; background:none}
.card__img img{width:100%; height:100%; object-fit:contain; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__img img{transform:scale(1.06)}
.card__frame{position:relative; width:min(100%,262px); margin-inline:auto; aspect-ratio:2625/1690; display:grid; place-items:center}
.card__frame .cart-svg{position:absolute; inset:0; width:100%; height:100%; fill:var(--olive); opacity:.92; pointer-events:none}
:root[data-theme="dark"] .card__frame .cart-svg{fill:var(--accent)}
.card__name{position:relative; font-family:var(--serif); font-size:clamp(.82rem,1.3vw,.98rem); letter-spacing:.1em; text-transform:uppercase; color:var(--display); line-height:1.3; max-width:62%; text-wrap:balance}
html[lang="ar"] .card__name{font-family:var(--ar-serif); letter-spacing:0; font-size:1.02rem}
.card__note{font-size:.86rem; color:var(--text-2); min-height:3.2em}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft)}
.price{font-family:var(--serif); font-size:1.02rem; color:var(--display); letter-spacing:.04em}
html[lang="ar"] .price{font-family:var(--ar-serif)}
.add{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--accent); border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .35s,letter-spacing .35s}
html[lang="ar"] .add{letter-spacing:0; font-size:.86rem}
.add:hover{color:var(--display); letter-spacing:.26em}

/* ───────────────────────── vessels ───────────────────────── */
.arc{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.6vw,34px); align-items:end}
@media (min-width:620px){.arc{grid-template-columns:repeat(4,1fr)}}
.vessel{text-align:center; display:flex; flex-direction:column; gap:10px; will-change:transform}
.vessel img{height:clamp(104px,14vw,180px); object-fit:contain; margin-inline:auto; filter:drop-shadow(0 16px 20px rgba(52,40,20,.26))}
.vessel b{font-family:var(--serif); font-size:.82rem; letter-spacing:.1em; color:var(--display); font-weight:400; text-transform:uppercase}
html[lang="ar"] .vessel b{font-family:var(--ar-serif); letter-spacing:0; font-size:.95rem}
.vessel span{font-size:.72rem; color:var(--text-2); letter-spacing:.06em}

/* ───────────────────────── ritual ───────────────────────── */
.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:clamp(18px,3vw,40px)}
.panel{position:relative; display:flex; flex-direction:column; gap:14px}
.panel__art{position:relative; overflow:hidden; border:1px solid var(--line-soft); background:var(--card)}
.panel__art img{width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.panel:hover .panel__art img{transform:scale(1.05)}
.panel__no{font-family:var(--serif); font-size:.9rem; letter-spacing:.3em; color:var(--accent)}
.panel p{color:var(--text-2); font-size:.94rem}

/* ───────────────────────── formula label ───────────────────────── */
.label{max-width:700px; margin-inline:auto; text-align:center; position:relative}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px); text-align:start; margin-top:24px}
@media (max-width:560px){.cols{grid-template-columns:1fr}}
.cols h4{font-family:var(--sans); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 10px}
html[lang="ar"] .cols h4{font-family:var(--ar-sans); letter-spacing:.02em; font-size:.85rem}
.cols ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.cols li{font-size:.88rem; color:var(--text-2); padding-inline-start:16px; position:relative}
.cols li::before{content:""; position:absolute; inset-inline-start:0; top:.72em; width:6px; height:6px; border:1px solid var(--accent); transform:rotate(45deg)}
.spec{list-style:none; padding:0; margin:clamp(20px,3vw,32px) 0 0; border-top:1px solid var(--line-soft)}
.spec li{display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding-block:13px; border-bottom:1px solid var(--line-soft)}
.spec b{font-weight:500; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase}
html[lang="ar"] .spec b{letter-spacing:0; font-size:.92rem}
.spec span{color:var(--text-2); text-align:end}

/* ───────────────────────── reviews ───────────────────────── */
.reviews__top{display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,40px); align-items:center; justify-content:space-between}
.gscore{display:flex; align-items:center; gap:16px}
.gscore__n{font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.2rem); color:var(--display); line-height:1}
.stars{display:flex; gap:3px; color:#E7A93C}
.stars svg{width:17px; height:17px; fill:currentColor}
.gscore small{display:block; color:var(--text-2); font-size:.78rem; letter-spacing:.08em}
.rgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); gap:clamp(16px,2.4vw,28px); margin-top:clamp(24px,4vw,46px)}
.review{background:var(--panel); border:1px solid var(--line-soft); padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column; gap:13px}
.review__who{display:flex; align-items:center; gap:12px}
.review__av{width:38px; height:38px; border-radius:999px; background:var(--olive); color:#FFF6E4; display:grid; place-items:center; font-family:var(--serif); font-size:.95rem; flex:none}
.review__who b{font-size:.88rem; font-weight:500; color:var(--text)}
.review__who span{display:block; font-size:.72rem; color:var(--text-2)}
.review p{font-size:.93rem; color:var(--text-2)}
.gnote{margin-top:18px; font-size:.7rem; color:var(--text-2); letter-spacing:.06em; border:1px dashed var(--line); padding:10px 14px}

/* ───────────────────────── FAQ ───────────────────────── */
.faq{max-width:840px; margin-inline:auto}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none; cursor:pointer; padding-block:20px; display:flex; gap:16px; align-items:flex-start;
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.16rem); color:var(--display);
}
html[lang="ar"] .faq summary{font-family:var(--ar-serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; flex:none; margin-inline-start:auto; width:12px; height:12px; margin-top:.45em;
  border-inline-end:1.5px solid var(--accent); border-block-end:1.5px solid var(--accent);
  transform:rotate(45deg); transition:transform .35s;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .a{padding-block:0 22px; color:var(--text-2); max-width:70ch}

/* ───────────────────────── contact ───────────────────────── */
.contact__grid{display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1fr}
@media (min-width:880px){.contact__grid{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field label{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-2); font-weight:500}
html[lang="ar"] .field label{letter-spacing:.01em; font-size:.84rem}
.field input,.field textarea,.field select{
  font:inherit; color:var(--text); background:var(--panel);
  border:1px solid var(--line); padding:13px 15px; border-radius:0; width:100%;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.contact__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.contact__list li{display:flex; flex-direction:column; gap:3px; padding-bottom:16px; border-bottom:1px solid var(--line-soft)}
.contact__list b{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600}
html[lang="ar"] .contact__list b{letter-spacing:.01em; font-size:.84rem}

/* ───────────────────────── footer ───────────────────────── */
.foot{padding-block:clamp(46px,7vw,92px) clamp(28px,4vw,52px); border-top:1px solid var(--line-soft); text-align:center}
.foot__mark{width:min(46vw,220px); margin-inline:auto; color:var(--display)}
.foot__mark .ic{width:100%}
.foot__social{width:min(68vw,320px); margin:clamp(20px,3vw,32px) auto 0; color:var(--display)}
.foot__social .ic{width:100%}
.foot__nav{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin-top:clamp(22px,3vw,34px); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2)}
html[lang="ar"] .foot__nav{letter-spacing:0; font-size:.86rem}
.foot__nav a:hover{color:var(--display)}
.foot__meta{margin-top:clamp(20px,3vw,30px); font-size:.72rem; color:var(--text-2); letter-spacing:.08em; line-height:2.1}
.foot__disc{margin-top:16px; font-size:.66rem; color:var(--text-2); opacity:.8; max-width:60ch; margin-inline:auto}

/* ───────────────────────── overlays ───────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(28,38,24,.5); backdrop-filter:blur(3px); z-index:90; opacity:0; pointer-events:none; transition:opacity .45s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:91; width:min(430px,100%);
  background:var(--ground); border-inline-start:1px solid var(--line);
  transform:translateX(100%); visibility:hidden;
  transition:transform .6s cubic-bezier(.2,.85,.2,1),visibility 0s linear .6s;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.on,html[dir="rtl"] .drawer.on{transform:none; visibility:visible; transition:transform .6s cubic-bezier(.2,.85,.2,1),visibility 0s}
.drawer__head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px var(--gut) 18px; border-bottom:1px solid var(--line-soft)}
.drawer__head h3{font-size:1.05rem; letter-spacing:.16em; text-transform:uppercase}
html[lang="ar"] .drawer__head h3{letter-spacing:0}
.drawer__body{flex:1; overflow-y:auto; padding:4px var(--gut)}
.drawer__empty{padding-block:56px; text-align:center; color:var(--text-2); font-size:.9rem}
.line{display:grid; grid-template-columns:62px 1fr auto; gap:14px; align-items:center; padding-block:16px; border-bottom:1px solid var(--line-soft)}
.line img{width:62px; height:62px; object-fit:contain; background:var(--panel)}
.line b{display:block; font-family:var(--serif); font-size:.88rem; font-weight:400; color:var(--display)}
html[lang="ar"] .line b{font-family:var(--ar-serif)}
.line small{color:var(--text-2); font-size:.74rem}
.qty{display:flex; align-items:center; gap:9px; margin-top:6px}
.qty button{width:22px; height:22px; border:1px solid var(--line); display:grid; place-items:center; font-size:.8rem; color:var(--text-2); line-height:1}
.qty button:hover{border-color:var(--accent); color:var(--display)}
.qty span{font-size:.8rem; min-width:14px; text-align:center}
.drawer__foot{padding:18px var(--gut) 24px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:12px}
.total{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--serif); font-size:1.06rem; color:var(--display)}
html[lang="ar"] .total{font-family:var(--ar-serif)}
.drawer__note{font-size:.66rem; color:var(--text-2); text-align:center}

.modal{position:fixed; inset:0; z-index:92; display:grid; place-items:center; padding:var(--gut); opacity:0; pointer-events:none; visibility:hidden; transition:opacity .4s}
.modal.on{opacity:1; pointer-events:auto; visibility:visible}
.modal__card{position:relative; background:var(--ground); border:1px solid var(--line); max-width:860px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-l); transform:translateY(24px) scale(.98); transition:transform .5s cubic-bezier(.2,.85,.2,1)}
.modal.on .modal__card{transform:none}
.modal__card--split{display:grid; grid-template-columns:1fr 1fr}
@media (max-width:720px){.modal__card--split{grid-template-columns:1fr}}
.modal__art{background:var(--band); display:grid; place-items:center; padding:26px; border-inline-end:1px solid var(--line-soft)}
.modal__art img{width:100%; max-width:320px}
.modal__body{padding:clamp(22px,3.4vw,38px)}
.modal__x{position:absolute; top:8px; inset-inline-end:10px; font-size:1.1rem; color:var(--text-2); z-index:2; width:34px; height:34px}
.modal__x:hover{color:var(--display)}
.modal__price{font-family:var(--serif); font-size:1.3rem; color:var(--display); margin:14px 0 20px}
html[lang="ar"] .modal__price{font-family:var(--ar-serif)}
.modal__card--auth{max-width:440px; padding:clamp(26px,4vw,40px); text-align:center}

/* auth */
.authbtn{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:14px 18px; border:1px solid var(--line); background:var(--panel); font-size:.8rem; font-weight:500; color:var(--text); transition:border-color .3s,background .3s}
.authbtn:hover{border-color:var(--accent)}
.authbtn svg{width:18px; height:18px; flex:none}
.authsep{display:flex; align-items:center; gap:14px; color:var(--text-2); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; margin-block:18px}
.authsep i{flex:1; height:1px; background:var(--line-soft)}
html[lang="ar"] .authsep{letter-spacing:0; font-size:.8rem}

/* mobile nav sheet */
.msheet{position:fixed; inset:0; z-index:93; background:var(--ground); transform:translateY(-100%); transition:transform .55s cubic-bezier(.2,.85,.2,1); display:flex; flex-direction:column; padding:calc(22px + env(safe-area-inset-top,0px)) var(--gut) var(--gut)}
.msheet.on{transform:none}
.msheet nav{display:flex; flex-direction:column; gap:6px; margin-top:34px}
.msheet nav a{font-family:var(--serif); font-size:1.5rem; color:var(--display); padding-block:12px; border-bottom:1px solid var(--line-soft)}
html[lang="ar"] .msheet nav a{font-family:var(--ar-serif)}

/* legal pages */
.legal{max-width:820px; margin-inline:auto; padding-block:clamp(90px,12vw,150px) clamp(50px,8vw,110px)}
.legal h1{font-size:var(--fs-h1); margin-bottom:.4em}
.legal h2{font-size:var(--fs-h3); margin:2.2em 0 .5em; letter-spacing:.08em; text-transform:uppercase}
.legal p,.legal li{color:var(--text-2); margin-bottom:.9em}
.legal ul{padding-inline-start:20px}
.legal .updated{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.legal .warn{border:1px dashed var(--line); padding:16px 18px; font-size:.82rem; margin-block:26px}

@media (max-width:760px){
  .portal__arch{width:130%; max-width:none; justify-self:center}
  .portal__inner{width:80%; min-width:0; padding-block-start:48%}
  .portal__mark{width:min(100%,320px)}
  .opening__track{height:460vh}
}


/* ══════════════════ opening animation ══════════════════ */
.intro{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  pointer-events:none; overflow:hidden;
}
.intro__door{
  position:absolute; inset-block:0; width:51%; background:var(--ground);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);
}
.intro__door--l{left:0;  border-inline-end:1px solid var(--line-soft)}
.intro__door--r{right:0; border-inline-start:1px solid var(--line-soft)}
.intro__inner{
  position:relative; z-index:2; display:grid; justify-items:center;
  width:min(84vw, 620px); transition:opacity .5s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.intro__arch{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-52%);
  width:min(96vw,620px); height:auto; color:var(--orn); opacity:.9;
}
.intro__arch path,.intro__arch circle{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 2.1s cubic-bezier(.65,0,.35,1) forwards;
}
.intro__arch g path:nth-child(1){animation-delay:.05s}
.intro__arch g path:nth-child(2){animation-delay:.22s}
.intro__arch g path:nth-child(3){animation-delay:.40s}
.intro__arch g path:nth-child(4){animation-delay:.56s}
.intro__arch g path:nth-child(5){animation-delay:.64s}
.intro__arch g path:nth-child(6){animation-delay:.70s}
.intro__arch g path:nth-child(7){animation-delay:.76s}
.intro__arch > path,.intro__arch > circle{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
.intro__mark{
  position:relative; width:min(58vw,300px); height:auto; fill:var(--display);
  opacity:0; transform:translateY(14px) scale(.96);
  animation:markIn 1.5s cubic-bezier(.2,.8,.2,1) 1.05s forwards;
}
@keyframes markIn{to{opacity:1; transform:none}}
.intro__word{
  margin:14px 0 0; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:500; opacity:0;
  animation:wordIn 1.5s cubic-bezier(.2,.8,.2,1) 1.5s forwards;
}
@keyframes wordIn{to{opacity:1; letter-spacing:.62em}}
.intro__bar{
  margin-top:34px; width:min(48vw,220px); height:1px; background:var(--line-soft); overflow:hidden;
}
.intro__bar i{display:block; height:100%; width:0%; background:var(--accent); transition:width .5s ease}
.intro.go .intro__inner{opacity:0; transform:scale(1.08)}
.intro.go .intro__door--l{transform:translateX(-101%)}
.intro.go .intro__door--r{transform:translateX(101%)}
.intro.done{display:none}
@media (prefers-reduced-motion:reduce){
  .intro__arch path,.intro__arch circle,.intro__mark,.intro__word{animation-duration:.01s; animation-delay:0s}
}

/* ══════════════════ viewport frame ══════════════════ */
.vframe{position:fixed; inset:0; z-index:60; pointer-events:none}
.vframe__c{
  position:absolute; width:clamp(74px,9vw,164px); aspect-ratio:1;
  background-image:url("frame-panel-green.svg");
  background-repeat:no-repeat; background-size:clamp(420px,52vw,940px) auto; opacity:.5;
}
:root[data-theme="dark"] .vframe__c{background-image:url("frame-panel-gold.svg"); opacity:.55}
.vframe__c--tl{top:10px; left:10px;  background-position:left top}
.vframe__c--tr{top:10px; right:10px; background-position:right top}
.vframe__c--bl{bottom:10px; left:10px;  background-position:left bottom}
.vframe__c--br{bottom:10px; right:10px; background-position:right bottom}
.vframe__r{position:absolute; background:var(--line-soft)}
.vframe__r--t{top:14px; left:clamp(88px,10.4vw,180px); right:clamp(88px,10.4vw,180px); height:1px}
.vframe__r--b{bottom:14px; left:clamp(88px,10.4vw,180px); right:clamp(88px,10.4vw,180px); height:1px}
.vframe__r--l{left:14px; top:clamp(88px,10.4vw,180px); bottom:clamp(88px,10.4vw,180px); width:1px}
.vframe__r--r{right:14px; top:clamp(88px,10.4vw,180px); bottom:clamp(88px,10.4vw,180px); width:1px}
@media (max-width:700px){.vframe__r{display:none} .vframe__c{opacity:.34}}

/* ══════════════════ the 3D act ══════════════════ */
/* warm pool of light behind the box so it separates from the paper */
.glbg{
  position:fixed; inset:0; z-index:0; pointer-events:none; transition:opacity .6s ease;
  background:
    radial-gradient(56% 50% at 50% 42%, #2c3a25 0%, #182116 38%, #0c1109 72%, #070a06 100%);
}
.glbg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(38% 34% at 50% 40%, rgba(255,203,128,.20), transparent 70%),
    radial-gradient(120% 80% at 50% 118%, rgba(0,0,0,.6), transparent 60%);
}

.gl{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:1;
  display:block; pointer-events:none; transition:opacity .6s ease;
}
.act{padding-inline:0; height:760vh; position:relative; z-index:2}
@media (max-width:760px){.act{height:640vh}}
.act__ui{
  position:sticky; top:0; height:100vh; display:grid; align-items:end;
  padding:0 var(--gut) clamp(52px,9vh,120px);
  padding-top:calc(72px + env(safe-area-inset-top,0px));
  pointer-events:none;
}
.act__chapters{position:relative; width:min(100%,560px); min-height:clamp(230px,32vh,330px); pointer-events:auto}
@media (min-width:1100px){.act__chapters{width:min(46%,560px)}}
.chap{
  position:absolute; inset-inline:0; bottom:0; opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.chap.on{opacity:1; transform:none; pointer-events:auto}
.chap h2{
  margin:.35em 0 .5em; font-size:clamp(1.5rem,3.1vw,2.7rem); line-height:1.12;
  text-shadow:0 1px 0 var(--ground), 0 0 26px var(--ground);
}
.chap__p{color:var(--text-2); max-width:44ch; font-size:clamp(.92rem,1.1vw,1.02rem)}
.chap__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.act__rail{
  position:absolute; inset-inline-start:var(--gut); bottom:clamp(20px,3.6vh,44px);
  display:flex; align-items:center; gap:12px; font-size:.58rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--text-2); pointer-events:none;
}
.act__rail b{display:block; width:clamp(90px,16vw,220px); height:2px; background:var(--line-soft); overflow:hidden}
.act__rail b i{display:block; height:100%; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:var(--ori,left)}
html[lang="ar"] .act__rail{letter-spacing:0; font-size:.78rem}
.act__cue{
  position:absolute; inset-inline-end:var(--gut); bottom:clamp(20px,3.6vh,44px);
  display:flex; align-items:center; gap:10px; font-size:.56rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--text-2); pointer-events:none;
}
.act__cue i{display:block; width:34px; height:1px; background:linear-gradient(to right,var(--accent),transparent)}

/* everything after the act sits on the paper again */
.sec,.foot{position:relative; z-index:3; background:var(--ground)}
.sec.band{background:var(--band)}
.sec.band--kraft{background:linear-gradient(180deg,var(--kraft) 0%,var(--kraft-2) 100%)}


/* ══════════════ the act runs at night ══════════════ */
.act,body.in-act .topbar,body.in-act .vframe{
  --text:#F0E5CC; --text-2:#BCAE91; --display:#F0D9A8; --accent:#D9B274;
  --line:rgba(217,178,116,.34); --line-soft:rgba(217,178,116,.16);
  --ground-ui:#0C110A;
}
body.in-act .topbar{
  background:linear-gradient(180deg, rgba(8,12,7,.88), rgba(8,12,7,.3) 70%, transparent);
  border-bottom-color:transparent; backdrop-filter:blur(6px);
}
body.in-act .topbar .pill{border-color:rgba(217,178,116,.38); color:#CFC2A4}
body.in-act .topbar .pill:hover{border-color:#D9B274; color:#F0D9A8}
body.in-act .cartbtn__n{background:#D9B274; color:#0C110A}
body.in-act .proto{border-color:rgba(217,178,116,.32)}
body.in-act .vframe__c{background-image:url("frame-panel-gold.svg"); opacity:.62}
body.in-act .vframe__r{background:rgba(217,178,116,.22)}
body.in-act .wallpaper{opacity:0}
body.in-act .grain{mix-blend-mode:overlay; opacity:.22}

/* ══════════════ the proscenium arch ══════════════ */
.act__arch{
  position:absolute; inset:0; margin:auto; z-index:1;
  width:min(128vh, 96vw); height:auto; color:#D9B274; opacity:0;
  pointer-events:none; mix-blend-mode:screen;
}
.act__arch path,.act__arch circle{stroke-dasharray:1; stroke-dashoffset:1}

/* ══════════════ chapters, now at scale ══════════════ */
.act__ui{align-items:end}
.act__chapters{
  position:relative; width:min(100%,760px); margin-inline:auto; text-align:center;
  min-height:clamp(250px,36vh,420px); pointer-events:auto; z-index:4;
}
@media (min-width:1040px){
  .act__chapters{width:min(46%,600px); margin-inline:0; text-align:start}
  .chap h2{margin-inline:0}
  .chap__p{margin-inline:0}
  .chap__rule{margin-inline:0}
  .chap__cta{justify-content:flex-start}
}
.chap{
  position:absolute; inset-inline:0; top:0; opacity:0; pointer-events:none;
  transform:translateY(26px);
  transition:opacity .75s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.chap.on{opacity:1; transform:none; pointer-events:auto}
.chap .eyebrow{letter-spacing:.42em; font-size:.66rem}
.chap h2{
  margin:.42em auto .5em; max-width:14ch;
  font-size:clamp(1.9rem,4.5vw,4.1rem); line-height:1.05; letter-spacing:.005em;
  text-shadow:0 2px 40px rgba(6,10,5,.85), 0 1px 3px rgba(6,10,5,.6);
}
.chap__p{
  color:var(--text-2); max-width:52ch; margin-inline:auto;
  font-size:clamp(.92rem,1.15vw,1.06rem);
  text-shadow:0 1px 20px rgba(6,10,5,.9);
}
.chap__cta{justify-content:center}
body.in-act .act .btn{border-color:#D9B274; color:#EFDCB4}
body.in-act .act .btn::before{background:#D9B274}
body.in-act .act .btn:hover{color:#0C110A}
body.in-act .act .btn--solid{background:#D9B274; color:#0C110A; border-color:#D9B274}
body.in-act .act .btn--solid::before{background:#F0D9A8}

/* a thin gold hairline sweeps under each chapter title */
.chap__rule{
  display:block; width:min(260px,44%); height:1px; margin:0 auto 1.1em;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s;
}
.chap.on .chap__rule{transform:scaleX(1)}

.act__rail,.act__cue{z-index:4}

.card__no{
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--accent);
  font-weight:500; margin-bottom:-4px;
}
.card__no b{font-weight:600}
html[lang="ar"] .card__no{letter-spacing:.04em; font-size:.78rem}
.claimnote{
  max-width:74ch; margin-inline:auto; font-size:.76rem; color:var(--text-2);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding-block:12px; margin-top:6px;
}

/* bare: used to pre-render the mobile frame sequence from the 3D scene */
body.bare .topbar,body.bare .vframe,body.bare .act__ui,body.bare .intro,
body.bare .grain,body.bare .wallpaper{display:none!important}
body.bare .glbg{background:#0d1309}

/* ── image stage: shown wherever the 3D act is not run ── */
.stage2d{display:none}
body.no3d .stage2d{display:block; position:fixed; inset:0; z-index:1; pointer-events:none}
body.no3d .stage2d img{
  position:absolute; left:50%; top:37%; transform:translate(-50%,-50%) scale(.97);
  width:min(78vw, 52vh); height:auto; opacity:0;
  transition:opacity .9s ease, transform 1.5s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 30px 52px rgba(0,0,0,.66));
}
body.no3d .stage2d img.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
body.no3d .act__chapters{padding-top:46px}
body.no3d .gl{display:none}
body.no3d .act{height:520vh}
body.no3d .act__ui{align-items:end}
body.no3d .act__chapters{
  width:min(100%,580px); margin-inline:auto; text-align:center;
  background:linear-gradient(180deg, transparent 0%, rgba(8,12,7,.35) 34%, rgba(8,12,7,.93) 68%);
  padding:30px 16px 4px;
}
body.no3d .chap h2{margin-inline:auto}
body.no3d .chap__p{margin-inline:auto}
body.no3d .chap__rule{margin-inline:auto}
body.no3d .chap__cta{justify-content:center}

/* ── bloom: a small copy of the frame, blurred and screened back over it ── */
.glow{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:2;
  display:block; pointer-events:none; opacity:0;
  filter:blur(22px) brightness(1.28) saturate(1.2);
  mix-blend-mode:screen; transition:opacity .6s ease;
}
body.in-act .glow{opacity:.30}
body.no3d .glow{display:none}

/* ── chapter type arrives line by line ── */
.chap h2{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s cubic-bezier(.16,.84,.26,1) .06s,
             opacity .7s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.chap.on h2{clip-path:inset(0 0 -12% 0)}
.chap .eyebrow{
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.chap.on .eyebrow{opacity:1; transform:none}
.chap__p{
  opacity:0; transform:translateY(12px);
  transition:opacity .75s ease .3s, transform .95s cubic-bezier(.2,.8,.2,1) .3s;
}
.chap.on .chap__p{opacity:1; transform:none}
.chap__cta{
  opacity:0; transform:translateY(12px);
  transition:opacity .7s ease .42s, transform .9s cubic-bezier(.2,.8,.2,1) .42s;
}
.chap.on .chap__cta{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .chap h2{clip-path:none}
  .chap .eyebrow,.chap__p,.chap__cta{opacity:1; transform:none}
}

/* Atelier refinement — source-led product, quieter type, continuous editorial rhythm. */
.glbg{background:radial-gradient(ellipse at 70% 42%,#344330 0%,#18231a 43%,#0c160f 78%)}
.glbg::after{background:radial-gradient(ellipse at 72% 65%,rgba(201,160,99,.12),transparent 56%)}
body.in-act .glow{opacity:.065}
body.in-act .grain{opacity:.08}
.vframe__c{width:76px;height:76px;opacity:.4!important}
.act{height:610vh}
.act__ui{align-items:center;padding-bottom:80px}
.act__chapters{min-height:0;height:auto;align-self:center}
.chap{top:auto;bottom:auto;transform:translateY(24px);visibility:hidden}
.chap.on{position:relative;visibility:visible;transform:none}
.chap h2{font-size:clamp(2rem,3.6vw,3.5rem);max-width:15ch;line-height:1.13;margin:.65em 0}
.chap__p{max-width:40ch;margin:0;font-size:.92rem;line-height:1.9}
.chap .eyebrow{letter-spacing:.25em;font-size:.63rem}
.chap__rule{margin:0 0 22px;width:70px;background:var(--accent)}
.chap__cta{justify-content:flex-start;margin-top:28px}
.act__arch{left:auto;right:-10%;width:78vw;max-height:92vh;opacity:.15!important}
.scene-nav{position:absolute;bottom:80px;inset-inline-end:7%;display:flex;gap:10px;z-index:6;pointer-events:auto}
.scene-nav button{width:30px;height:30px;border:1px solid rgba(217,178,116,.28);border-radius:50%;font-size:.62rem;color:#d9b274;transition:background .3s,color .3s}
.scene-nav button[aria-current="step"]{background:#d9b274;color:#162019}
.scene-nav button:hover{border-color:#f0d9a8}
.act__skip{position:absolute;top:110px;inset-inline-end:var(--gut);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line);pointer-events:auto;z-index:6}
.topbar{height:82px}
.topbar__logo{width:80px}
.nav{gap:20px}.nav a{font-size:.62rem;letter-spacing:.14em}
.proto{display:none}
.sec{padding-block:clamp(80px,9vw,140px)}
.sec__head{margin-bottom:50px}
.about__art{background:radial-gradient(ellipse,#d8be91,#ece1ca 65%);padding:60px 35px;border-radius:48% 48% 0 0;min-height:560px}
.about__art .frame{opacity:.35}
.about__art .photo{width:100%;max-height:540px;object-fit:contain;filter:drop-shadow(0 24px 20px #45371a35)}
.about__grid{gap:clamp(40px,7vw,100px)}
.about__grid .lede{font-size:1rem;line-height:1.95}
.shelf{gap:30px}.card{border:1px solid var(--line-soft);background:var(--panel);box-shadow:none;transition:transform .4s,box-shadow .4s}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.claimnote{font-size:.7rem;line-height:1.8;opacity:.8}
.band--kraft{color:#294635;--display:#294635;--text-2:#4d5a31;--accent:#665028}
.foot{padding-top:70px}
@media(min-width:900px){
 .act__chapters{width:39%;margin-inline:0;text-align:start}
 .chap h2,.chap__p{margin-inline:0}
 .act__ui{padding-inline:7vw}
}
@media(max-width:1150px){.nav{display:none}.burger{display:block}.tools{margin-inline-start:auto}}
@media(max-width:899px){
 .topbar{height:68px}.topbar__logo{width:66px}.tools{gap:6px}.pill{padding:7px 10px;font-size:.59rem}
 .act{height:530vh}.act__ui{align-items:end;padding:0 26px 92px;height:100svh;min-height:580px}
 .act__chapters{width:100%;max-width:520px;align-self:end;margin:auto auto 0;text-align:center}
 .chap h2{font-size:clamp(1.6rem,5.7vw,2.4rem);max-width:22ch;margin:12px auto}
 .chap__p{font-size:.79rem;line-height:1.7;max-width:45ch;margin:auto}
 .chap__rule{display:none}.chap .eyebrow{font-size:.56rem;letter-spacing:.18em}
 .chap__cta{justify-content:center;margin-top:18px;gap:8px}
 .act__skip{top:86px;font-size:.54rem}.act__arch{width:120vw;right:-10%;top:-28%;opacity:.08!important}
 .scene-nav{bottom:32px;left:50%;right:auto;transform:translateX(-50%);gap:8px}
 .scene-nav button{width:26px;height:26px;font-size:.55rem}
 .act__rail,.act__cue{display:none}.vframe__c{width:42px;height:42px}
 .about__art{min-height:380px;padding:35px}.sec{padding-block:75px}.shelf{gap:22px}
 body.no3d .act__chapters{padding:16px 0 0;background:none}
 body.no3d .stage2d img{top:32%;width:min(66vw,40vh);max-height:41vh;object-fit:contain}
 .glbg{background:radial-gradient(ellipse at 50% 28%,#344330,#101c13 70%)}
}
@media(max-width:420px){#account{display:none}.tools .pill{letter-spacing:.06em}.chap__p{font-size:.75rem}.chap h2{font-size:1.6rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro{display:none}.chap,.chap *,.card,.card *{transition:none!important}.act{height:320vh}}
/* Product tiles retain the original cartouche at a legible, restrained scale. */
.grain{opacity:.10}
.card__img{aspect-ratio:1/1.08;background:radial-gradient(ellipse,#e7d0a9 0%,#f1e8d7 72%);padding:18px}
.card__img img{filter:drop-shadow(0 12px 12px #684f2930)}
.card__frame{width:210px;aspect-ratio:2.35}
.card__frame .cart-svg{opacity:.55}
.card__name{font-size:.88rem;max-width:70%}
.card__note{font-size:.79rem;line-height:1.8}
@media(max-width:619px){.card__img{aspect-ratio:1.15}.card__img img{max-height:310px}.card{gap:12px}.card__frame{width:190px}}
@media(min-width:900px) and (max-height:720px){.chap h2{font-size:2.35rem}.chap__p{font-size:.8rem}.scene-nav{bottom:54px}.act__skip{top:96px}}
@media(max-width:899px) and (max-height:700px){.act__ui{min-height:0;padding-bottom:68px}.chap h2{font-size:1.35rem}.chap__p{font-size:.7rem;line-height:1.5}.scene-nav{bottom:20px}.chap .eyebrow{font-size:.5rem}}
.act{color:#f0e5cc}
.act__skip{color:#e8d8b6;background:#152117df;padding:7px 11px;border:1px solid #d9b27440;border-radius:2px}
@media(max-width:899px){.act__skip{top:78px;font-size:.5rem;padding:5px 8px}}

/* Stable framing and quiet transitions. All chapter copy shares one layout cell. */
.glow{display:none!important}
.act__chapters{display:grid;align-items:center}
.chap,.chap.on{grid-area:1/1;position:relative;inset:auto;transform:none;transition:opacity .45s ease,visibility .45s;align-self:center}
.chap h2,.chap .eyebrow,.chap__p,.chap__cta{clip-path:none;transform:none;transition:none}
.chap.on h2,.chap.on .eyebrow,.chap.on .chap__p,.chap.on .chap__cta{transform:none}
.chap__rule,.chap.on .chap__rule{transform:none;transition:none}
.card:hover{transform:translateY(-3px)}
.card:hover .card__img img{transform:scale(1.025)}
.rv{transform:translateY(10px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
.card__frame .cart-svg,:root[data-theme="dark"] .card__frame .cart-svg{opacity:1;filter:drop-shadow(0 .7px .3px #794a1899) drop-shadow(0 -.5px .2px #fff6cf)}
@media(prefers-reduced-motion:reduce){.chap,.rv{transition:none;transform:none}}

/* The botanical atelier: flowing brass, layered foliage and letterpress paper. */
.act__arch{display:none}
.glbg{background:radial-gradient(ellipse at 73% 37%,#344e38 0%,#192d21 36%,#091810 80%)}
.glbg::after{background:linear-gradient(90deg,#07160e55,transparent 60%),radial-gradient(ellipse at 72% 78%,#b9974726,transparent 46%)}
.act__signature{position:absolute;inset-inline-start:7vw;top:122px;display:flex;align-items:center;gap:20px;color:#bda77a;font-size:.53rem;letter-spacing:.32em;opacity:.72}
.act__signature i{width:64px;height:1px;background:linear-gradient(90deg,#bda77a,transparent)}
.chap .eyebrow::before{content:'✧';display:inline-block;margin-inline-end:13px;font-size:1rem;line-height:1;color:#e8c77d}
.chap__rule{width:100px;background:linear-gradient(90deg,#a06f2d,#efd998,#a06f2d00)}
.chap h2{font-weight:400;letter-spacing:-.018em;line-height:1.1}
.scene-nav button{border-radius:45% 45% 48% 48%;width:32px;height:37px;background:#11251980}
.scene-nav button[aria-current="step"]{background:linear-gradient(145deg,#f4df9b,#ba8733);box-shadow:0 0 22px #e5bd5319;border-color:#dcc37f}
.sec{isolation:isolate}
.sec>.wrap{position:relative;z-index:1}
.sec__head::before{content:'';display:block;width:min(310px,65vw);height:72px;background:url('nouveau-crown.svg') center/contain no-repeat;margin-bottom:25px}
.sec__head--mid::before{margin-inline:auto}
.sec__head .eyebrow{letter-spacing:.3em;font-size:.66rem}
.sec__head h2{line-height:1.25;max-width:22ch;margin-inline:auto;text-wrap:balance}
#about::before{content:'';position:absolute;inset:0;z-index:0;background:url('flourish-left.png') -100px center/360px auto no-repeat;opacity:.07;pointer-events:none}
.about__art{background:radial-gradient(ellipse at 50% 35%,#f3dfb8,#dfc799 72%,#d5b980);border:1px solid #b28b4955;border-radius:48% 48% 5px 5px;min-height:620px}
.about__art::after{content:'';position:absolute;inset:14px;border:1px solid #a9854350;border-radius:inherit;pointer-events:none}
.about__art .frame{opacity:.15}
.about__art .photo{position:relative;z-index:1;width:86%;max-width:380px}
#six{background:radial-gradient(ellipse at 50% 0,#fbf7ee,var(--band) 74%)}
#six::before{content:'';position:absolute;inset:0;background:url('wallpaper.svg') center/180px;opacity:.025;pointer-events:none}
.card{border-radius:165px 165px 6px 6px;padding-top:24px;border-color:#b2956159;box-shadow:0 8px 40px #70542109;gap:17px;background:linear-gradient(180deg,#fffaf0,var(--panel) 75%)}
.card__corner--tl{display:none}.card__corner--br{opacity:.35}
.card__img{border-radius:145px 145px 3px 3px;background:radial-gradient(ellipse at 50% 38%,#f7ecd7,#e5d1ac 85%);border:1px solid #bea06a38;padding:28px 20px 12px}
.card__no{margin-top:7px;margin-bottom:-8px}
.card__frame{width:min(100%,290px);aspect-ratio:2625/1690;margin-block:0 2px;flex:none}
.card__frame .cart-svg{inset:0;width:100%;height:100%}
.card__name,html[lang="ar"] .card__name{max-width:none;width:77%;margin:0 auto;white-space:nowrap;text-wrap:nowrap;letter-spacing:.055em;line-height:1.4;font-size:14px}
html[lang="ar"] .card__name{letter-spacing:0}
.card__note{max-width:33ch;margin-inline:auto;font-size:.78rem}
.card__foot{padding-top:18px;padding-bottom:4px;margin-top:3px}
.card:hover{box-shadow:0 16px 45px #70542112;border-color:#ba914d}
#inside{--ground:#14281d;--text:#e9dfc3;--text-2:#bcbaa1;--display:#f1dbad;--accent:#d7b66c;--line-soft:#cfb87830;background:radial-gradient(ellipse at 50% 20%,#28412c,#102318 75%);color:var(--text)}
#inside::after{content:'';position:absolute;inset:0;background:url('frame-scroll-gold.svg') center/95% auto no-repeat;opacity:.055;pointer-events:none}
#inside .sec__head{max-width:70ch!important;margin-inline:auto;text-align:center}
#inside .sec__head::before{margin-inline:auto}
#inside .arc{gap:50px 28px;padding-top:18px}
.vessel{padding:25px 14px 30px;border:1px solid #cbb27628;border-radius:100px 100px 5px 5px;background:linear-gradient(180deg,#cbb2760b,transparent)}
.vessel img{height:160px;margin-bottom:20px;filter:drop-shadow(0 16px 20px #0005)}
#ritual{background:linear-gradient(150deg,#ecd5ac,#dcbc86);padding-bottom:140px}
#ritual .panel__art{border-radius:48% 48% 3px 3px;border:1px solid #87693660;padding:14px;background:#f6e8ca}
#ritual .panel__art img{border-radius:48% 48% 2px 2px;aspect-ratio:4/5;object-fit:cover}
#ritual .panel__no{margin-top:13px;letter-spacing:.2em;font-size:1.5rem}
#formula .label{background:var(--panel);padding:clamp(30px,6vw,70px);border-radius:150px 150px 3px 3px;border:1px solid var(--line)}
:root[data-theme="dark"] #six{background:radial-gradient(ellipse at 50% 0,#263a28,var(--band) 74%)}
:root[data-theme="dark"] .card{background:linear-gradient(180deg,#223625,var(--panel) 75%)}

/* A full-height interlude: foreground flowers pass a distant brass conservatory. */
.herbarium{--journey:0;height:185vh;position:relative;z-index:3;background:#102219;color:#efdfb4}
.herbarium__stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;isolation:isolate;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 50%,#3d5132 0%,#233b28 38%,#0d2117 80%)}
.herbarium__stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#06170e66,transparent 22%,transparent 76%,#06170e88);pointer-events:none;z-index:4}
.herbarium__halo{position:absolute;width:min(72vw,820px);aspect-ratio:1;border:1px solid #d9bf7530;border-radius:50%;transform:translateY(calc(var(--journey)*-45px)) scale(calc(.92 + var(--journey)*.16));box-shadow:0 0 0 18px #d9bf7506,0 0 0 19px #d9bf7518,0 0 0 40px #d9bf7504;z-index:0}
.herbarium__arch{position:absolute;height:130%;width:auto;max-width:none;top:4%;left:50%;opacity:.55;transform:translateX(-50%) translateY(calc(var(--journey)*-70px)) scale(calc(.98 + var(--journey)*.10));z-index:1}
.herbarium__flower{position:absolute;pointer-events:none;object-fit:contain;max-width:none;will-change:transform}
.herbarium__flower--back{width:38vw;right:4%;top:1%;opacity:.12;filter:sepia(.4);transform:translateY(calc(var(--journey)*-65px)) rotate(-15deg);z-index:0}
.herbarium__flower--left{width:48vw;left:-20%;bottom:-25%;opacity:.75;filter:brightness(.64) sepia(.28);transform:translate(calc(var(--journey)*-55px),calc(var(--journey)*-190px)) rotate(18deg);z-index:3}
.herbarium__flower--right{width:45vw;right:-18%;bottom:-20%;opacity:.85;filter:brightness(.65) sepia(.22);transform:translate(calc(var(--journey)*65px),calc(var(--journey)*-270px)) rotate(-23deg);z-index:3}
.herbarium__copy{position:relative;z-index:2;text-align:center;max-width:850px;padding:70px 32px;transform:translateY(calc(20px - var(--journey)*40px));text-shadow:0 2px 22px #091a1280}
.herbarium__copy .eyebrow{color:#dac189;font-size:.63rem;letter-spacing:.35em}
.herbarium__crown{width:min(310px,45vw);margin:20px auto 10px;opacity:.95}
.herbarium__copy h2{font-size:clamp(3rem,6.5vw,6.6rem);line-height:1.13;max-width:11ch;margin:0 auto;color:#f3e3bb;letter-spacing:-.025em}
.herbarium__note{font-size:.85rem;color:#d0c8a8;max-width:40ch;margin:32px auto 0;line-height:1.9}
.herbarium__link{display:inline-block;font-size:.63rem;text-transform:uppercase;letter-spacing:.2em;margin-top:30px;padding-bottom:7px;border-bottom:1px solid #d7b97780;color:#f1d493;position:relative;z-index:5}
.herbarium__folio{position:absolute;bottom:38px;left:6vw;right:6vw;display:flex;justify-content:space-between;font-size:.49rem;letter-spacing:.25em;color:#b8aa7b;z-index:5}
@media(max-width:899px){
 .act__signature{display:none}
 .about__art{min-height:480px}
 .sec__head::before{height:55px;width:240px;margin-bottom:20px}
 .herbarium{height:155vh}.herbarium__stage{min-height:0}
 .herbarium__copy{padding:70px 30px}.herbarium__copy h2{font-size:clamp(2.8rem,9vw,5rem)}
 .herbarium__arch{height:110%;top:8%;opacity:.42}
 .herbarium__halo{width:94vw}
 .herbarium__flower--left{width:80vw;left:-44%;bottom:-6%}
 .herbarium__flower--right{width:80vw;right:-42%;bottom:-10%}
 .herbarium__flower--back{width:65vw;right:-8%;top:7%}
 .herbarium__note{font-size:.76rem;max-width:28ch;margin-top:22px}
 .herbarium__folio{bottom:26px;font-size:.4rem;letter-spacing:.15em}
 #inside .arc{gap:28px 18px}.vessel{padding:25px 8px}.vessel img{height:125px}
 .vessel b{font-size:.7rem}.vessel span{font-size:.58rem}
 .card__frame{width:min(100%,290px)}
 .card__name{font-size:13px}
}
@media(max-width:380px){.card{padding-inline:16px}.herbarium__copy h2{font-size:2.75rem}.herbarium__note{max-width:25ch}.about__art{min-height:400px}}
@media(prefers-reduced-motion:reduce){.herbarium{height:auto}.herbarium__stage{position:relative;min-height:650px}.herbarium *{transform:none!important}.herbarium__arch{left:0;width:100%;object-fit:contain}.herbarium__flower{will-change:auto}}
.card__img{display:flex;align-items:center;justify-content:center;aspect-ratio:auto;height:350px;min-height:0}
.card__img img{width:auto;height:100%;max-height:100%;max-width:100%;min-height:0;object-fit:contain}
body.in-garden .topbar{--display:#ecd4a0;--text-2:#c7b98d;--accent:#d8b173;--line:#d8b17350;background:#0d2117d9;border-bottom-color:#d8b17318;color:#ecd4a0}
body.in-garden .vframe__c{background-image:url('frame-panel-gold.svg')}
body.in-garden .vframe__r{background:#d8b17328}
@media(max-width:619px){.card__img{height:330px}}
@media(max-width:380px){.card__img{height:300px}}
.herbarium__copy{z-index:5;isolation:isolate}
.herbarium__copy::before{content:'';position:absolute;inset:12% -5%;z-index:-1;background:radial-gradient(ellipse,#13291baa,transparent 70%);pointer-events:none}
@media(max-width:899px){.herbarium__flower--left,.herbarium__flower--right{opacity:.48}.herbarium__note{color:#ded4b5}.herbarium__copy::before{inset:12% -12%;background:radial-gradient(ellipse,#142a1cbb,transparent 70%)}}
/* Open product titles with a restrained botanical gold underline. */
.card__heading{width:100%;margin:13px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.card__heading .card__name,html[lang="ar"] .card__heading .card__name{width:100%;max-width:none;margin:0;line-height:1.5;font-weight:400;letter-spacing:.06em}
html[lang="ar"] .card__heading .card__name{letter-spacing:0}
.card__sprig{display:block;width:112px;height:21px;stroke:#b18a43;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .card__sprig{stroke:#d9b772}