/* ═══════════════════════════════════════════════════════════
   AURELIS PARFUMS — warm mineral hero + dark vault UI
   palette: wall #8D8272 · bone #EDE4D3 · ink #17140F
            panel #16130E · card #E9DFCB · gold #B49B72
   ═══════════════════════════════════════════════════════════ */
:root{
  --wall:#8D8272;
  --bone:#EDE4D3;
  --bone-dim:#D8CCB4;
  --ink:#17140F;
  --panel:#16130E;
  --panel-2:#1E1A13;
  --card:#E9DFCB;
  --card-ink:#221D14;
  --gold:#B49B72;
  --moss:#6B6552;
  --hairline:rgba(237,228,211,.22);
  --ease:cubic-bezier(.23,1,.32,1);
  --pagew:min(92vw,1560px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  font-family:"Jost",sans-serif;
  font-weight:300;
  background:var(--panel);
  color:var(--bone);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:normal}
[hidden]{display:none!important}
/* two-tone focus ring: light outline + near-ink halo, legible on photo, cream and dark panel */
:focus-visible{outline:2px solid #F3ECDD;outline-offset:2px;box-shadow:0 0 0 4px rgba(23,20,15,.92);border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;top:12px;left:12px;z-index:80;
  background:var(--card);color:var(--card-ink);
  padding:12px 20px;border-radius:999px;font-size:11px;letter-spacing:.22em;
  transform:translateY(-160%);transition:transform .4s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}

/* ─────────────── shared type ─────────────── */
.eyebrow{
  font-size:11.5px;letter-spacing:.24em;color:var(--ink);
  opacity:.72;margin-bottom:22px;
}
.navlink{
  position:relative;font-size:11.5px;letter-spacing:.18em;font-weight:400;
  padding-bottom:3px;white-space:nowrap;
}
.navlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
.navlink:hover::after{transform:scaleX(1);transform-origin:0 50%}

.cta-line{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11.5px;letter-spacing:.2em;font-weight:400;color:var(--ink);
  padding-bottom:7px;border-bottom:1px solid currentColor;
}
.cta-line svg{width:22px;height:9px;transition:transform .5s var(--ease)}
.cta-line:hover svg{transform:translateX(7px)}
.cta-line--light{color:var(--bone)}

/* ═══════════════ LOADER — pencil sketch → page ═══════════════ */
.loader{
  position:fixed;inset:0;z-index:60;
  background:#F1EAE0;
  pointer-events:auto;overflow:hidden; /* captures the skip tap so it can't click through */
}
.loader__stage{position:absolute;inset:0}
/* svg cover-crops exactly like the raster layers (xMidYMax slice ≙ center bottom) */
.loader__lines{position:absolute;inset:0;width:100%;height:100%}
.loader__lines .sk{
  fill:none;stroke:#575043;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.5;
}
.loader__sketch{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;
  opacity:0;
  -webkit-mask-image:linear-gradient(102deg,#000 26%,transparent 74%);
          mask-image:linear-gradient(102deg,#000 26%,transparent 74%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;
  -webkit-mask-position:130% 0;mask-position:130% 0;
}
.loader__sketch--faint{filter:contrast(.86) brightness(1.06)}
.loader__sketch--full{-webkit-mask-image:none;mask-image:none}
.loader__tag{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.34em;color:#575043;white-space:nowrap;
  opacity:0;
}
.loader__tag em{font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:14px;letter-spacing:.08em;text-transform:none}

/* ═══════════════ HERO — fixed layered scene ═══════════════ */
.hero{position:fixed;inset:0;z-index:1;overflow:hidden}
.hero-space{height:175vh}

.hero__scene{position:absolute;inset:0}
.hero__wall,.hero__rock{
  position:absolute;inset:0;
  background-position:center bottom;background-size:cover;background-repeat:no-repeat;
}
.hero__wall{background-image:url("../images/hero-plate.webp")}
.hero__rock{background-image:url("../images/hero-cutout.webp")}
/* localized warm luminance burn behind the left wordmark letters so the cream
   "A" seats on the light wall — reads as photographic falloff, letters untouched.
   Centred on where the "A" actually lands (~9% x, ~22% y) after the mark was
   tightened below; the old ellipse was aimed at 2%/16% and missed the letter. */
@media (min-width:821px){
  .hero__wall::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 30% 38% at 9% 22%,
      rgba(34,26,16,.46) 0%,rgba(34,26,16,.24) 44%,rgba(34,26,16,.07) 68%,transparent 84%);
  }
}

.hero__wordmark{
  position:absolute;left:50%;top:11%;transform:translateX(-50%);
  display:flex;justify-content:space-between;direction:ltr; /* AURELIS is a Latin mark — never reorder under RTL */
  /* tightened from 96vw/1820px: at 96vw the "A" sat 29px off the frame edge, on the
     brightest sunlit patch of the wall, and read as a torn corner rather than a letter.
     Pulling the tracking in moves both end letters onto darker wall and lets the seven
     letters read as one word. */
  width:min(80vw,1400px);
  font-family:"Italiana",serif;font-weight:400;
  font-size:clamp(64px,16.2vw,280px);
  line-height:.9;color:#F0E7D6;opacity:.97;
  /* a wide, very soft halo — invisible as a "shadow" at this size, but it keeps the
     cream letterforms off any light ground the photograph puts behind them */
  text-shadow:0 2px 46px rgba(28,21,12,.42),0 1px 12px rgba(28,21,12,.28);
  user-select:none;
}
.hero__wordmark span{display:inline-block;transform:translateY(40%);opacity:0}

.hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}

/* ═══════════ persistent header (top-level, above panel) ═══════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  padding-top:env(safe-area-inset-top);
  /* --dock (0→1) is scrubbed by scroll so the bar seats continuously, not at a threshold */
  background:rgba(20,17,12,calc(var(--dock,0) * .62));
  backdrop-filter:blur(calc(var(--dock,0) * 14px)) saturate(118%);
  -webkit-backdrop-filter:blur(calc(var(--dock,0) * 14px)) saturate(118%);
  transition:box-shadow .5s var(--ease);
}
.topbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150px;
  background:linear-gradient(rgba(9,7,4,.42),transparent);
  pointer-events:none;opacity:calc(1 - var(--dock,0));
}
.topbar--solid{box-shadow:0 1px 0 var(--hairline)}
.topbar--solid::before{opacity:0}
.nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:15px clamp(22px,3.4vw,64px);
  color:var(--bone);
}
.nav__logo{
  font-family:"Italiana",serif;font-size:22px;letter-spacing:.24em;
  display:flex;flex-direction:column;line-height:1;
}
.nav__logo em{
  font-family:"Jost",sans-serif;font-size:8px;letter-spacing:.58em;
  margin-top:6px;opacity:.72;
}
.nav__links{display:flex;gap:clamp(20px,3vw,52px)}
.nav__right{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav__cart{
  position:relative;font-size:11.5px;letter-spacing:.18em;font-weight:400;color:inherit;
  padding:10px 2px;white-space:nowrap;
}
.nav__cart::after{
  content:"";position:absolute;left:2px;right:2px;bottom:8px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
.nav__cart:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav__cart sup{display:inline-block;font-size:8.5px;letter-spacing:.1em}
.nav__burger{
  display:none;flex-direction:column;gap:5px;
  width:44px;height:44px;align-items:center;justify-content:center;
}
.nav__burger i{display:block;width:20px;height:1px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.nav__burger:hover i:first-child{transform:translateY(-2px)}
.nav__burger:hover i:last-child{transform:translateY(2px)}
body.menu-open .nav__burger i:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* left copy — laid on a vellum plate.
   It used to sit straight on the photograph: dark ink over a wall whose value swings
   from lit plaster to shadow across the width of the paragraph, so the body copy in
   particular had no reliable contrast. The plate is warm, translucent and blurred so
   it reads as a paper label set on the print, not as a UI panel. */
.hero__copy{
  position:absolute;z-index:5;left:clamp(24px,3.4vw,64px);
  top:50%;transform:translateY(-42%);
  max-width:336px;color:var(--ink);
  padding:clamp(26px,2.1vw,34px) clamp(24px,1.9vw,32px) clamp(28px,2.2vw,34px);
  border-radius:15px;
  background:linear-gradient(158deg,rgba(246,241,231,.90),rgba(234,225,208,.80));
  border:1px solid rgba(255,255,255,.50);
  backdrop-filter:blur(16px) saturate(112%);
  -webkit-backdrop-filter:blur(16px) saturate(112%);
  box-shadow:0 26px 64px rgba(26,19,10,.24),inset 0 1px 0 rgba(255,255,255,.55);
}
.hero__title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(40px,3.6vw,58px);line-height:1.08;color:#241F16;
  margin-bottom:24px;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line i{display:inline-block;font-style:normal;transform:translateY(112%)}
.hero__body{font-size:14px;line-height:1.75;max-width:240px;margin-bottom:34px;opacity:.85}

/* right story card */
.hero__card{
  position:absolute;z-index:5;right:clamp(24px,3.4vw,64px);
  top:50%;transform:translateY(-34%);
  width:clamp(202px,15.5vw,240px);aspect-ratio:250/312;
  border-radius:13px;overflow:hidden;padding:22px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:15px;
  background:rgba(19,15,9,.28);
  border:1px solid rgba(237,228,211,.16);
  backdrop-filter:blur(11px) saturate(116%);-webkit-backdrop-filter:blur(11px) saturate(116%);
  box-shadow:0 20px 52px rgba(10,8,4,.30);
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease); /* GSAP owns transform (pointer tilt) */
}
.hero__card:hover{border-color:rgba(237,228,211,.30)}
.hero__cardimg,.hero__cardimg img{position:absolute;inset:0;width:100%;height:100%}
.hero__cardimg img{object-fit:cover;opacity:.82;transition:transform 1.2s var(--ease)}
.hero__card:hover .hero__cardimg img{transform:scale(1.06)}
.hero__cardveil{
  position:absolute;inset:0;
  background:linear-gradient(12deg,rgba(10,8,4,.78) 18%,rgba(10,8,4,.12) 62%);
}
.hero__cardtext{
  position:relative;font-family:"Cormorant Garamond",serif;
  font-size:21px;line-height:1.28;color:var(--bone);
  padding-top:15px;border-top:1px solid rgba(237,228,211,.2);
}
.hero__card .cta-line{position:relative;align-self:flex-start}

/* bottom bar */
.hero__foot{
  position:absolute;z-index:5;left:clamp(24px,3.4vw,64px);right:clamp(24px,3.4vw,64px);
  bottom:30px;display:flex;justify-content:space-between;align-items:flex-end;
  color:var(--ink);
}
.hero__scrollhint{
  display:flex;flex-direction:column;gap:12px;font-size:10.5px;letter-spacing:.3em;
}
.hero__scrollhint svg{width:9px;height:22px}
.hero__scrollhint svg path{transform-origin:50% 0}
.hero__social{display:flex;gap:clamp(18px,2.4vw,40px);color:var(--bone)}

/* ═══════════════ DARK PANEL ═══════════════ */
.panel{
  position:relative;z-index:10;
  background:var(--panel);
  border-radius:34px 34px 0 0;
  box-shadow:0 -40px 90px rgba(8,6,3,.55);
  padding:clamp(70px,8vw,120px) 0 0;
}
.section{
  width:var(--pagew);margin:0 auto;
  padding-bottom:clamp(90px,10vw,160px);
}
.section__head{
  display:flex;align-items:baseline;gap:clamp(20px,3vw,44px);
  margin-bottom:clamp(38px,4.5vw,64px);
}
.section__label{
  font-size:clamp(15px,1.35vw,20px);letter-spacing:.2em;font-weight:400;
  white-space:nowrap;
}
.section__rule{flex:1;height:1px;background:var(--hairline);transform:scaleX(0);transform-origin:0 50%}
.section__count{font-size:11px;letter-spacing:.2em;opacity:.7;white-space:nowrap}

/* reveal */
.reveal-card{--r:18px}

/* ── products ── */
.products{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,34px);
}
.product{position:relative}
.product__frame{
  border-radius:var(--r);overflow:hidden;background:var(--card);
  aspect-ratio:3/4;
}
.product__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.product:hover .product__frame img{transform:scale(1.045)}
.product__meta{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:20px 6px 0;gap:16px;
}
.product__name{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(19px,1.6vw,23px);line-height:1.2;margin-bottom:7px;
}
.product__no{font-family:"Jost",sans-serif;font-size:.6em;letter-spacing:.12em;
  opacity:.6;vertical-align:.18em;margin-right:.12em}
/* signature "scent trace": notes brighten and a gold hairline draws in, note by note */
.product__notes{
  position:relative;display:inline-flex;flex-wrap:wrap;gap:0 12px;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
}
.product__notes::before{
  content:"";position:absolute;left:0;bottom:-7px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold),rgba(180,155,114,0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease);
}
.product__notes span{opacity:.64;transition:opacity .55s var(--ease),color .55s var(--ease)}
.product:hover .product__notes::before,
.product.is-revealed .product__notes::before{transform:scaleX(1)}
.product:hover .product__notes span,
.product.is-revealed .product__notes span{opacity:.92;color:var(--bone)}
.product:hover .product__notes span:nth-child(2),
.product.is-revealed .product__notes span:nth-child(2){transition-delay:.1s}
.product:hover .product__notes span:nth-child(3),
.product.is-revealed .product__notes span:nth-child(3){transition-delay:.2s}
.product__price{font-size:13px;letter-spacing:.1em;opacity:.85;padding-top:4px}
.product__add{
  margin:18px 6px 0;padding:0 0;min-height:48px;width:calc(100% - 12px);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.22em;color:var(--bone);
  border:1px solid var(--hairline);border-radius:999px;
  position:relative;overflow:hidden;transition:color .45s var(--ease),border-color .45s var(--ease);
}
.product__add::before{
  content:"";position:absolute;inset:0;background:var(--card);
  transform:translateY(102%);transition:transform .55s var(--ease);border-radius:inherit;
}
.product__add:hover{color:var(--card-ink);border-color:var(--card)}
.product__add:hover::before{transform:translateY(0)}
.product__add span{position:relative}

/* ── ingredients ── */
.ing{
  display:grid;grid-template-columns:1.45fr 1fr;
  gap:clamp(26px,3.4vw,56px);align-items:stretch;
}
.ing__media{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;
}
.ing__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.ing__media:hover img{transform:scale(1.04)}
.ing__caption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 30px;
  font-size:clamp(13px,1.2vw,16px);letter-spacing:.24em;color:var(--bone);
  background:linear-gradient(0deg,rgba(10,8,4,.62),transparent);
}
.ing__text{display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:6px 0}
.ing__lede{
  font-family:"Cormorant Garamond",serif;font-size:clamp(22px,2vw,28px);
  line-height:1.45;font-weight:300;
}
.ing__lede em{font-style:italic;color:var(--gold)}
.ing__list{list-style:none}
.ing__list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:17px 2px;border-top:1px solid var(--hairline);
  transition:padding-left .5s var(--ease);
}
.ing__list li:last-child{border-bottom:1px solid var(--hairline)}
.ing__list li:hover{padding-left:12px}
.ing__list span{font-size:12px;letter-spacing:.2em}
.ing__list small{font-size:11px;letter-spacing:.06em;opacity:.68;text-align:right}

/* ingredients drops into a subtly lighter full-width band to vary the panel rhythm */
.section--band{
  width:100%;background:var(--panel-2);
  padding-top:clamp(64px,7vw,108px);padding-left:0;padding-right:0;
  box-shadow:inset 0 1px 0 var(--hairline),inset 0 -1px 0 var(--hairline);
}
.section--band .section__head,.section--band .ing{
  width:var(--pagew);margin-left:auto;margin-right:auto;
}

/* ── story ── */
.story{
  display:grid;grid-template-columns:1fr 1.25fr;
  gap:clamp(26px,3.4vw,56px);align-items:stretch;
}
.story__card{
  background:var(--card);color:var(--card-ink);
  border-radius:var(--r);padding:clamp(34px,3.6vw,58px);
  display:flex;flex-direction:column;justify-content:space-between;gap:44px;
  min-height:380px;
}
.story__est{
  font-family:"Italiana",serif;font-size:clamp(40px,4.2vw,64px);
  letter-spacing:.06em;color:#5B5240;
}
.story__copy{
  font-size:14.5px;line-height:1.85;max-width:44ch;opacity:.82;
}
.story__card .cta-line{color:var(--card-ink);align-self:flex-start}
.story__media{position:relative;border-radius:var(--r);overflow:hidden;min-height:380px}
.story__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.story__media:hover img{transform:scale(1.04)}

/* ── journal banner: full-bleed editorial break from the rounded-card rhythm ── */
.section--journal{width:100%;padding-left:0;padding-right:0}
.section--journal .section__head{width:var(--pagew);margin-left:auto;margin-right:auto}
.journal{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:1280/540;min-height:340px;
}
.journal__text{left:max(clamp(28px,4vw,60px),calc((100% - var(--pagew))/2))!important}
.journal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease)}
.journal:hover img{transform:scale(1.035)}
.journal__veil{
  position:absolute;inset:0;
  background:linear-gradient(8deg,rgba(10,8,4,.66) 8%,rgba(10,8,4,.05) 55%);
}
.journal__text{
  position:absolute;left:clamp(26px,3.4vw,58px);bottom:clamp(24px,3vw,48px);
  display:flex;flex-direction:column;gap:14px;
}
.journal__kicker{font-size:11px;letter-spacing:.22em;opacity:.78}
.journal__title{
  font-family:"Cormorant Garamond",serif;font-size:clamp(26px,2.6vw,40px);
  line-height:1.15;max-width:16ch;
}
.journal__title em{font-style:italic}
.journal .cta-line{align-self:flex-start}

/* ── footer ── */
.footer{padding-top:clamp(20px,3vw,40px)}
.footer__mark{
  position:relative;height:clamp(240px,30vw,420px);overflow:hidden;
}
.footer__mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.footer__markveil{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(22,19,14,.2),var(--panel) 96%);
}
.footer__wordmark{
  position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);
  font-family:"Italiana",serif;font-size:clamp(80px,12.5vw,210px);
  letter-spacing:.14em;text-indent:.14em;line-height:.78;
  color:var(--bone);opacity:.9;white-space:nowrap;
}
.footer__bar{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  width:var(--pagew);margin:0 auto;
  padding:26px 0 30px;border-top:1px solid var(--hairline);
  font-size:11px;letter-spacing:.16em;
}
.footer__legal,.footer__social{display:flex;align-items:center;gap:14px}
.footer__legal span,.footer__social span{opacity:.3}

/* ═══════════════ responsive ═══════════════ */
@media (max-width:1060px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .hero__card{width:220px;padding:20px}
}
@media (max-width:820px){
  /* wordmark clears the nav (px + notch inset) and sits in the sky above the rock */
  .hero__wordmark{top:calc(env(safe-area-inset-top) + 74px);width:86vw;font-size:13.5vw;opacity:.82}
  /* shift the scene so the bottle sits right of the copy column */
  .hero__wall,.hero__rock{background-position:33% bottom}
  /* bottom scrim only. The left diagonal wash existed to make bone copy legible over
     the photo; the copy now carries its own plate, so that wash was just veiling the
     picture — and on the portrait plate it veiled the rock itself. */
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:linear-gradient(transparent 56%,rgba(9,7,4,.60) 88%,rgba(9,7,4,.72));
  }
  /* The mobile copy is bone-on-photograph, so its plate is the dark twin of the
     desktop vellum one: same geometry, inverted value.
     EVERYTHING VERTICAL HERE IS IN vh, ON PURPOSE. The bottle sits at a fixed
     FRACTION of the photograph (0.60), so on a height-fit portrait frame it lands
     at 0.60 * viewport height whatever the phone — which means the plate's budget
     is a fraction too, not a px count. Sized in px it fitted the 844px frame I was
     testing and covered the bottle by 74px on the same phone with its URL bar
     showing (760px). Keep plate height + bottom offset under 40% of vh. */
  .hero__copy{
    top:auto;bottom:calc(clamp(48px,6.5vh,68px) + env(safe-area-inset-bottom));
    left:clamp(20px,5vw,40px);right:clamp(20px,5vw,40px);
    transform:none;max-width:min(400px,80vw);color:var(--bone);
    padding:clamp(10px,1.85vh,19px) clamp(15px,4.2vw,20px) clamp(11px,1.95vh,20px);
    border-radius:14px;
    background:linear-gradient(160deg,rgba(16,12,7,.64),rgba(16,12,7,.46));
    border:1px solid rgba(237,228,211,.17);
    backdrop-filter:blur(15px) saturate(115%);
    -webkit-backdrop-filter:blur(15px) saturate(115%);
    box-shadow:0 20px 46px rgba(8,6,3,.40),inset 0 1px 0 rgba(237,228,211,.10);
  }
  /* the plate carries the contrast now — the heavy text-shadows were doubling up
     and softening the type */
  /* every px saved is a px the photograph keeps for the product, so the internal
     rhythm scales with the frame's height too */
  .hero__copy .eyebrow{
    color:var(--bone);opacity:.85;text-shadow:none;
    font-size:clamp(9px,1.25vh,11px);margin-bottom:clamp(7px,1.4vh,15px);
  }
  /* the clamp FLOORS are what bind on a short frame — the vh terms are already
     small there — so the floors are what had to come down to buy the last 10px */
  .hero__title{color:var(--bone);font-size:clamp(26px,4.3vh,42px);
    margin-bottom:clamp(6px,1.3vh,14px);text-shadow:0 1px 14px rgba(9,7,4,.35)}
  .hero__body{opacity:.92;max-width:34ch;text-shadow:none;
    font-size:clamp(11.5px,1.55vh,14px);line-height:1.65;
    margin-bottom:clamp(8px,1.9vh,20px)}
  .hero__copy .cta-line{color:var(--bone);font-size:clamp(9.5px,1.25vh,11.5px)}
  .hero__card{display:none}
  .hero__foot{left:clamp(24px,6vw,40px);right:clamp(24px,6vw,40px);
    bottom:calc(20px + env(safe-area-inset-bottom))}
  .hero__scrollhint{color:var(--bone)}
  .hero__social{display:none}
  .hero-space{height:150vh}
  .products{grid-template-columns:1fr;gap:44px}
  .ing{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}
  .journal{aspect-ratio:4/5}
  .footer__bar{flex-direction:column;gap:16px;text-align:center}
}
@media (max-width:430px){
  .hero__wordmark{font-size:15vw}
  /* no .hero__title / .hero__copy overrides here on purpose: they are sized in vh
     above and a px override at this width would win on source order and reintroduce
     the plate that covers the bottle on a short frame */
  .product__meta{padding-left:2px;padding-right:2px}
}
/* landscape / very short viewports: don't let wordmark and copy collide */
@media (max-width:900px) and (max-height:560px){
  .hero__wordmark{top:58px;font-size:8.5vw;opacity:.55}
  .hero::after{height:60%}
  /* top:auto is load-bearing. Between 821 and 900px wide the ≤820 block does not
     apply, so .hero__copy keeps the desktop top:50% + translateY(-42%); adding
     bottom here left BOTH insets set, which stretches an auto-height absolute box
     to a height its content overflows. Invisible until the copy got a plate — then
     the CTA hung out below the panel's bottom edge. */
  .hero__copy{top:auto;transform:none;bottom:calc(16px + env(safe-area-inset-bottom))}
  .hero__title{font-size:clamp(26px,6.5vw,38px);margin-bottom:12px}
  .hero__body{display:none}
  .hero__foot{display:none}
}
/* touch devices: comfortable hit areas */
@media (hover:none){
  .navlink{padding-top:9px;padding-bottom:9px}
  .cta-line{padding-top:10px;padding-bottom:12px}
}

/* ═══════════════ mobile menu overlay ═══════════════ */
.menu{
  position:fixed;inset:0;z-index:50;background:var(--panel);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(30px,9vw,64px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.menu.is-open{opacity:1;pointer-events:auto}
body.menu-open .topbar{z-index:55}
.menu__inner{display:flex;flex-direction:column;gap:4px;padding-top:70px}
.menu__link{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(38px,12vw,60px);line-height:1.12;color:var(--bone);
  overflow:hidden;display:block;padding:2px 0;
}
.menu__link span{display:inline-block;transform:translateY(112%);opacity:0;
  transition:transform .6s var(--ease),opacity .6s var(--ease),color .4s var(--ease)}
.menu.is-open .menu__link span{transform:translateY(0);opacity:1}
.menu.is-open .menu__link:nth-child(1) span{transition-delay:.10s}
.menu.is-open .menu__link:nth-child(2) span{transition-delay:.17s}
.menu.is-open .menu__link:nth-child(3) span{transition-delay:.24s}
.menu.is-open .menu__link:nth-child(4) span{transition-delay:.31s}
.menu__link:hover span{color:var(--gold)}
.menu__foot{
  display:flex;gap:28px;flex-wrap:wrap;
  padding:44px 0 calc(30px + env(safe-area-inset-bottom));
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;
}
.menu__meta{padding:8px 0}

/* ═══════════════ cart drawer ═══════════════ */
.cart{position:fixed;inset:0;z-index:50;pointer-events:none}
.cart.is-open{pointer-events:auto}
.cart__scrim{
  position:absolute;inset:0;width:100%;height:100%;
  background:rgba(8,6,3,.5);opacity:0;transition:opacity .5s var(--ease);
}
.cart.is-open .cart__scrim{opacity:1}
.cart__panel{
  position:absolute;top:0;right:0;height:100%;width:min(440px,100%);
  background:var(--card);color:var(--card-ink);
  display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .6s var(--ease);
  box-shadow:-30px 0 90px rgba(8,6,3,.4);
  padding-top:env(safe-area-inset-top);
}
.cart.is-open .cart__panel{transform:translateX(0)}
.cart__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(22px,4vw,30px) 20px;border-bottom:1px solid rgba(34,29,20,.14);
}
.cart__title{font-family:"Cormorant Garamond",serif;font-size:24px}
.cart__close{width:40px;height:40px;display:grid;place-items:center;color:var(--card-ink);opacity:.7;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cart__close:hover{opacity:1;transform:rotate(90deg)}
.cart__close svg{width:20px;height:20px}
.cart__items{list-style:none;flex:1;overflow-y:auto;padding:6px clamp(22px,4vw,30px)}
.cart__item{
  display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid rgba(34,29,20,.12);
}
.cart__thumb{width:54px;height:70px;border-radius:7px;object-fit:cover;background:#D9CEB6}
.cart__iname{font-family:"Cormorant Garamond",serif;font-size:18px;line-height:1.2}
.cart__inotes{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-top:5px}
.cart__qty{display:inline-flex;align-items:center;gap:12px;margin-top:12px}
.cart__qty button{
  width:40px;height:40px;border:1px solid rgba(34,29,20,.28);border-radius:50%;
  display:grid;place-items:center;font-size:15px;color:var(--card-ink);line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.cart__qty button:hover{background:var(--card-ink);color:var(--card)}
.cart__qty span{font-size:12px;min-width:14px;text-align:center;font-variant-numeric:tabular-nums}
.cart__col-r{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.cart__iprice{font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.cart__remove{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;
  padding:4px 0;transition:opacity .3s var(--ease)}
.cart__remove:hover{opacity:1}
.cart__empty{padding:40px clamp(22px,4vw,30px);font-size:14px;opacity:.6;
  font-family:"Cormorant Garamond",serif;font-style:italic}
.cart__foot{padding:22px clamp(22px,4vw,30px) calc(26px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(34,29,20,.14)}
.cart__row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.cart__row span:last-child{font-size:18px;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-transform:none}
.cart__checkout{
  width:100%;min-height:52px;background:var(--card-ink);color:var(--card);
  border-radius:999px;font-size:11px;letter-spacing:.3em;
  transition:background .4s var(--ease);
}
.cart__checkout:hover{background:#39301F}
.cart__note{text-align:center;font-size:10px;letter-spacing:.06em;opacity:.5;margin-top:14px}

/* fly-to-cart feedback dot */
.fly-dot{position:fixed;z-index:45;width:9px;height:9px;border-radius:50%;
  background:var(--gold);pointer-events:none;box-shadow:0 0 14px rgba(180,155,114,.7)}

/* ═══════════════ reduced motion ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader{display:none}
  .hero__wordmark span,.hero__title .line i{transform:none;opacity:1}
  .section__rule{transform:none}
  .menu__link span{transform:none;opacity:1}
  .product__notes span{opacity:.85}
  .co__sealtick,.co__seal circle{stroke-dashoffset:0!important}
}

/* ═══════════════ language toggle ═══════════════ */
.nav__lang{
  position:relative;font-size:11.5px;letter-spacing:.14em;font-weight:400;color:inherit;
  padding:9px 2px;min-height:40px;white-space:nowrap;
}
.nav__lang::after{
  content:"";position:absolute;left:2px;right:2px;bottom:8px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
.nav__lang:hover::after{transform:scaleX(1);transform-origin:0 50%}
.menu__foot .nav__lang{color:var(--bone);opacity:.7}

/* ═══════════════ CHECKOUT — focused, route-like store flow ═══════════════ */
#checkout{position:fixed;inset:0;z-index:60;pointer-events:none;--err:#8f3a2b}
#checkout.is-open{pointer-events:auto}
.co__scrim{position:absolute;inset:0;background:rgba(8,6,3,.6);opacity:0;transition:opacity .5s var(--ease)}
#checkout.is-open .co__scrim{opacity:1}
.co__shell{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--card);color:var(--card-ink);
  opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
#checkout.is-open .co__shell{opacity:1;transform:none}
.co__bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:calc(16px + env(safe-area-inset-top)) clamp(20px,4vw,54px) 16px;
  border-bottom:1px solid rgba(34,29,20,.14);
}
.co__brand{font-family:"Italiana",serif;font-size:19px;letter-spacing:.24em}
.co__stepof{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;font-variant-numeric:tabular-nums}
.co__close{width:42px;height:42px;display:grid;place-items:center;color:var(--card-ink);opacity:.7;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.co__close:hover{opacity:1;transform:rotate(90deg)}
.co__close svg{width:20px;height:20px}
.co__body{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,36vw,520px)}
.co__main{padding:clamp(28px,4vw,60px) clamp(20px,4vw,64px) 64px;max-width:720px;width:100%;margin-inline:auto}
.co__rail{
  position:sticky;top:0;align-self:start;min-height:100%;
  background:var(--panel);color:var(--bone);
  padding:clamp(28px,3.4vw,48px) clamp(22px,2.6vw,40px) 48px;
  box-shadow:inset 1px 0 0 rgba(0,0,0,.25);
}

/* progress */
.co__progress{list-style:none;display:flex;gap:10px;margin-bottom:clamp(26px,3vw,40px)}
.co__pstep{display:flex;align-items:center;gap:10px;flex:1;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.co__pstep:not(:last-child)::after{content:"";flex:1;height:1px;background:rgba(34,29,20,.2)}
.co__pdot{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(34,29,20,.32);font-size:11px;font-variant-numeric:tabular-nums;transition:all .4s var(--ease)}
.co__plabel{white-space:nowrap;opacity:.55}
.co__pstep.is-now .co__pdot{background:var(--card-ink);color:var(--card);border-color:var(--card-ink)}
.co__pstep.is-now .co__plabel{opacity:1}
.co__pstep.is-done .co__pdot{border-color:var(--card-ink);color:var(--card-ink)}
.co__pstep.is-done .co__plabel{opacity:.8}
@media (max-width:560px){.co__plabel{display:none}}

.co__guest{margin-bottom:26px}
.co__guesth{font-family:"Cormorant Garamond",serif;font-size:26px}
.co__guestp{font-size:12.5px;opacity:.62;margin-top:2px}
.co__h{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;
  margin:26px 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(34,29,20,.16)}
.co__h:first-of-type{margin-top:0}
.co__h:focus,.co__h:focus-visible{outline:none;box-shadow:none}

/* fields */
.co__field{position:relative;margin-bottom:20px}
.co__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.co__label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.co__input{
  width:100%;min-height:52px;background:transparent;color:var(--card-ink);
  border:0;border-bottom:1px solid rgba(34,29,20,.28);
  font-family:"Jost",sans-serif;font-size:15px;padding:6px 2px;
  transition:border-color .3s var(--ease);
}
.co__input:focus{outline:none;border-bottom-color:var(--card-ink)}
.co__input:focus-visible{outline:2px solid transparent;box-shadow:none}
.co__field.is-invalid .co__input{border-bottom-color:var(--err)}
.co__err{color:var(--err);font-size:11px;letter-spacing:.02em;margin-top:6px;min-height:0}
.co__field.is-invalid .co__err{min-height:16px}
.co__note{font-size:11px;opacity:.55;margin-top:6px}
.co__hint{font-size:11.5px;opacity:.58;margin:2px 0 8px;line-height:1.5}
.co__demo{font-size:12.5px;line-height:1.6;background:rgba(34,29,20,.06);border-radius:10px;
  padding:14px 16px;margin-bottom:20px}

/* actions */
.co__actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px;flex-wrap:wrap}
.co__cta{
  min-height:54px;padding:0 40px;background:var(--card-ink);color:var(--card);
  border-radius:999px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .4s var(--ease),opacity .3s var(--ease);
}
.co__cta:hover{background:#39301f}
.co__cta[disabled]{opacity:.6;cursor:default}
.co__cta--wide{width:100%;margin-top:8px}
.co__link{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.62;
  padding:8px 2px;border-bottom:1px solid transparent;transition:opacity .3s var(--ease),border-color .3s var(--ease)}
.co__link:hover{opacity:1;border-bottom-color:currentColor}
.co__nocharge{text-align:center;font-size:10.5px;letter-spacing:.06em;opacity:.5;margin-top:14px}

/* delivery cards */
.co__ships{display:flex;flex-direction:column;gap:14px}
.co__ship{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:18px 20px;border:1px solid rgba(34,29,20,.22);border-radius:12px;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.co__ship:hover{border-color:rgba(34,29,20,.42)}
.co__ship.is-on{border-color:var(--card-ink);background:rgba(34,29,20,.05)}
.co__ship input{position:absolute;opacity:0;pointer-events:none}
.co__shipmark{width:20px;height:20px;border-radius:50%;border:1px solid rgba(34,29,20,.5);position:relative;transition:border-color .3s}
.co__ship.is-on .co__shipmark{border-color:var(--card-ink)}
.co__ship.is-on .co__shipmark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card-ink)}
.co__shiptitle{display:block;font-size:14px}
.co__shiptime{display:block;font-size:11.5px;opacity:.58;margin-top:2px}
.co__shipprice{font-size:12.5px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.co__ship:focus-within{outline:2px solid #6b5c3d;outline-offset:3px;border-radius:12px}

/* review */
.co__review{border:1px solid rgba(34,29,20,.16);border-radius:12px;overflow:hidden;margin-bottom:8px}
.co__revrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 18px;border-bottom:1px solid rgba(34,29,20,.12)}
.co__revrow:last-child{border-bottom:0}
.co__revk{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin-bottom:5px}
.co__revv{font-size:13.5px;line-height:1.5}

/* summary rail */
.co__summary{display:block}
.co__summary>summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:16px;cursor:pointer}
.co__summary>summary::-webkit-details-marker{display:none}
.co__sumhead{font-family:"Cormorant Garamond",serif;font-size:22px}
.co__sumtotal{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.co__sumbody{margin-top:22px}
.co__lines{list-style:none;display:flex;flex-direction:column;gap:16px}
.co__line{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center}
.co__lineimg{position:relative;width:52px;height:64px;border-radius:7px;overflow:hidden;background:#241f16}
.co__lineimg img{width:100%;height:100%;object-fit:cover;opacity:.92}
.co__lineqty{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--bone);color:var(--panel);font-size:10.5px;display:grid;place-items:center;font-style:normal;font-variant-numeric:tabular-nums}
.co__linename{font-family:"Cormorant Garamond",serif;font-size:16px;line-height:1.25}
.co__linename small{display:block;font-family:"Jost",sans-serif;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.5;margin-top:4px}
.co__linetot{font-size:12.5px;font-variant-numeric:tabular-nums;opacity:.9}
.co__totals{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline)}
.co__totals>div{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.co__totals dd{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:.02em}
.co__grand{padding-top:12px;border-top:1px solid var(--hairline);margin-top:4px}
.co__grand dt{font-size:12px}
.co__grand dd{font-size:19px}
.co__taxnote{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.45;margin-top:10px}
.co__trust{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:11px}
.co__trust li{position:relative;padding-left:20px;font-size:11.5px;opacity:.72;line-height:1.45}
.co__trust li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--gold)}

/* confirmation */
.co__shell--confirm .co__confirmwrap{flex:1;min-height:0;overflow-y:auto;display:grid;place-items:center;
  padding:clamp(30px,6vw,80px) clamp(22px,5vw,40px)}
.co__confirm{max-width:440px;text-align:center}
.co__seal{display:inline-block;width:66px;height:66px;color:var(--gold);margin-bottom:26px}
.co__seal svg{width:100%;height:100%}
.co__seal circle{stroke-dasharray:170;stroke-dashoffset:170;animation:coRing 1s .05s var(--ease) forwards}
.co__sealtick{stroke-dasharray:60;stroke-dashoffset:60;animation:coTick .7s .5s var(--ease) forwards}
@keyframes coRing{to{stroke-dashoffset:0}}
@keyframes coTick{to{stroke-dashoffset:0}}
.co__cbadge{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;opacity:.5;margin-bottom:14px}
.co__ctitle{font-family:"Cormorant Garamond",serif;font-size:clamp(30px,4vw,44px);line-height:1.1}
.co__ctitle:focus{outline:none}
.co__cthanks{font-size:14.5px;opacity:.75;margin-top:10px}
.co__cref{display:inline-flex;flex-direction:column;gap:6px;margin:26px 0;padding:16px 30px;
  border:1px solid rgba(34,29,20,.2);border-radius:12px}
.co__cref span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.co__cref strong{font-family:"Jost",sans-serif;font-weight:400;font-size:19px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.co__cnote{font-size:12px;line-height:1.6;opacity:.62;margin-bottom:10px}

/* checkout responsive: summary becomes a collapsible bar above the form */
@media (max-width:860px){
  .co__body{display:flex;flex-direction:column}
  /* the scrollable column must not squeeze its children — an open summary would
     otherwise shrink back to its header height and overflow onto the form */
  .co__body>*{flex:0 0 auto}
  .co__rail{position:static;order:-1;min-height:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.35);
    padding:16px clamp(20px,5vw,32px)}
  .co__summary:not([open]) .co__sumbody{display:none}
  .co__summary>summary{padding:4px 0}
  .co__summary>summary::after{content:"";width:8px;height:8px;border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.6;margin-inline-start:6px;transition:transform .3s var(--ease)}
  .co__summary[open]>summary::after{transform:rotate(-135deg)}
  .co__main{padding-top:26px}
}

/* ═══════════════ RTL + Arabic ═══════════════ */
body.is-ar{font-family:"IBM Plex Sans Arabic","Jost",sans-serif}
/* Arabic display serif for the large editorial type (Latin bits keep their own faces) */
body.is-ar .hero__title,body.is-ar .hero__cardtext,body.is-ar .ing__lede,
body.is-ar .journal__title,body.is-ar .cart__title,body.is-ar .story__est,
body.is-ar .menu__link,body.is-ar .co__guesth,body.is-ar .co__sumhead,
body.is-ar .co__ctitle,body.is-ar .co__linename,body.is-ar .cart__iname{
  font-family:"Noto Naskh Arabic","Cormorant Garamond",serif;
}
body.is-ar{line-height:1.7}
/* connected script: tracking must be reset or Arabic words break apart */
body.is-ar :where(.navlink,.nav__cart,.nav__lang,.nav__logo,.eyebrow,.cta-line,
  .section__label,.section__count,.product__notes,.product__add,.ing__caption,
  .ing__list span,.ing__list small,.journal__kicker,.footer__bar,.footer__legal a,
  .footer__social a,.hero__social a,.menu__meta,.menu__foot,.cart__row,.cart__inotes,
  .cart__remove,.loader__tag,.co__label,.co__stepof,.co__h,.co__plabel,.co__pdot,
  .co__cbadge,.co__link,.co__cta,.co__revk,.co__trust li,.co__totals>div,.co__brand){
  letter-spacing:normal;
}
body.is-ar .hero__title{line-height:1.3}
/* mirror directional micro-details */
[dir="rtl"] .cta-line svg{transform:scaleX(-1)}
[dir="rtl"] .cta-line:hover svg{transform:scaleX(-1) translateX(7px)}
[dir="rtl"] .section__rule{transform-origin:100% 50%}
[dir="rtl"] .product__notes::before{left:auto;right:0;transform-origin:100% 50%}
[dir="rtl"] .product:hover .product__notes::before,
[dir="rtl"] .product.is-revealed .product__notes::before{transform:scaleX(1)}
[dir="rtl"] .nav__cart::after,[dir="rtl"] .navlink::after,[dir="rtl"] .nav__lang::after{transform-origin:0 50%}
[dir="rtl"] .nav__cart:hover::after,[dir="rtl"] .navlink:hover::after,[dir="rtl"] .nav__lang:hover::after{transform-origin:100% 50%}
/* cart + checkout mirror to the left edge */
[dir="rtl"] .cart__panel{right:auto;left:0;transform:translateX(-102%);box-shadow:30px 0 90px rgba(8,6,3,.4)}
[dir="rtl"].cart.is-open .cart__panel,[dir="rtl"] .cart.is-open .cart__panel{transform:translateX(0)}
[dir="rtl"] .co__rail{box-shadow:inset -1px 0 0 rgba(0,0,0,.25)}
[dir="rtl"] .co__trust li{padding-left:0;padding-right:20px}
[dir="rtl"] .co__trust li::before{left:auto;right:0}
[dir="rtl"] .co__lineqty{right:auto;left:-7px}
[dir="rtl"] .co__nav,[dir="rtl"] .nav__logo em{letter-spacing:.2em}
/* keep Latin product names / references / prices reading left-to-right inside RTL */
[dir="rtl"] bdi{unicode-bidi:isolate}
@media (max-width:820px){
  /* mobile RTL hero: copy reads on the right (kept) */
  [dir="rtl"] .hero__copy{left:clamp(20px,5vw,40px);right:clamp(20px,5vw,40px)}
  [dir="rtl"] .hero::after{
    background:linear-gradient(transparent 56%,rgba(9,7,4,.60) 88%,rgba(9,7,4,.72));
  }
}

/* ═══════════ portrait phones — a hero plate shot FOR this frame ═══════════
   The landscape plate is 1672x941. Cover-fitting that into 390x844 scales it 2.2x
   and shows a 16% slice of the middle: the bottle fell off the left edge and the
   rock became an abstract wall of stone. Panning it (background-position:33%) only
   chose which part of the wrong crop to show.

   hero-mobile.webp is a purpose-shot 9:16 frame: same rock, bottle and light,
   recomposed centred with an empty dark band at the top for the wordmark and an
   empty one at the bottom for the copy plate. Gated on ASPECT, not width, so a
   phone held sideways keeps the landscape plate it was composed for.

   Must stay last in the file: it ties [dir=rtl] .hero__wall on specificity and
   wins on source order. */
@media (max-width:900px) and (max-aspect-ratio:4/5){
  .hero__wall{background-image:url("../images/hero-mobile.webp")}
  .hero__wall,[dir="rtl"] .hero__wall{background-position:center center}
  /* the cutout only exists so the wordmark can sit behind the rock; on this frame
     they never meet, so it is 172 KB of duplicate rock — and it is the landscape
     rock, which would not register with the portrait plate underneath it */
  .hero__rock{display:none}
}

/* Phones proper (≤560px) get a TIGHTER crop of the same frame, so the rock reads
   as the subject instead of a small object in a lot of wall. The wider portrait
   plate above is kept for portrait tablets: at 768x1024 this tight crop is
   width-fitted and loses 31% of its height, which cuts the empty top wall away
   entirely and slides the rock up underneath the wordmark. Art direction per
   device class, not one image stretched across all of them. */
@media (max-width:560px) and (max-aspect-ratio:4/5){
  .hero__wall{background-image:url("../images/hero-phone.webp")}
}
/* Short portrait phones: the tight crop puts the rock's peak at ~105px on a 640px
   frame, and the wordmark at 15vw runs to 123px. Step the mark down and up so the
   two never touch — the plate itself needs no tier, it is sized in vh. */
@media (max-width:560px) and (max-aspect-ratio:4/5) and (max-height:700px){
  .hero__wordmark{top:calc(env(safe-area-inset-top) + 56px);font-size:11.5vw}
  /* The scroll hint costs 44px off the bottom, and on a 640px frame that is exactly
     the margin the plate needs to stay off the bottle. The hint is decorative and
     the landscape-short tier below already drops it for the same reason; the CTA
     inside the plate carries the affordance. */
  .hero__foot{display:none}
  .hero__copy{bottom:calc(30px + env(safe-area-inset-bottom))}
}