/* ============================================================
   BY MARAM — Dead Sea Ritual
   Core system: tokens, reset, chrome, components
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Palette — sampled from the brand's own label vector + photography */
  --ink:     #0B0908;
  --basalt:  #14100C;
  --stone:   #241D16;
  --clay:    #5E4E3C;
  --mud:     #7A6650;
  --sand:    #B49A78;
  --bronze:  #A4805D;   /* exact accent from the By Maram wordmark */
  --bronze-ink: #765B42;/* same hue, darkened for small text on light ground */
  --dune:    #D6C4A8;
  --linen:   #E9E0CF;
  --salt:    #F6F1E7;
  --sea:     #21362C;
  --haze:    #CFD3D2;   /* the water itself — a cool field between warm ones */

  /* Semantic */
  --bg:      var(--salt);
  --fg:      var(--basalt);
  --muted:   color-mix(in srgb, var(--basalt) 72%, transparent);
  --rule:    color-mix(in srgb, var(--basalt) 20%, transparent);
  --accent:  var(--bronze);

  /* Type */
  --display: "Cormorant Garamond", "Cormorant", Didot, "Times New Roman", serif;
  --sans:    "Jost", "Futura", "Avenir Next", -apple-system, system-ui, sans-serif;

  --fs-mega:  clamp(3.4rem, 11.5vw, 12rem);
  --fs-xl:    clamp(2.6rem, 7vw, 7rem);
  --fs-lg:    clamp(2rem, 4.4vw, 4rem);
  --fs-md:    clamp(1.5rem, 2.6vw, 2.3rem);
  --fs-body:  clamp(0.95rem, 1.05vw, 1.075rem);
  --fs-sm:    clamp(0.72rem, 0.8vw, 0.8rem);
  --fs-xs:    0.64rem;

  --tr-wide:  0.34em;
  --tr-mid:   0.2em;

  /* Space */
  --gut:     clamp(1.25rem, 3.6vw, 3.5rem);
  /* Keep-out bands for the fixed corner chrome — no content may sit here. */
  --safe-t:  clamp(5rem, 8vh, 6.5rem);
  --safe-b:  clamp(5rem, 8vh, 6.5rem);
  --sec:     clamp(6rem, 14vh, 12rem);

  /* Motion */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.76,0,.24,1);

  --chrome-z: 400;
}

/* Dark surfaces flip the semantic pair */
.is-dark{
  --bg: var(--basalt);
  --fg: var(--salt);
  --muted: color-mix(in srgb, var(--salt) 74%, transparent);
  --rule: color-mix(in srgb, var(--salt) 24%, transparent);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

body{
  background:var(--basalt);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.62;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-anchor:none;
}

img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0 }
ul,ol{ list-style:none }
::selection{ background:var(--bronze); color:var(--salt) }

:focus-visible{ outline:1.5px solid var(--bronze); outline-offset:4px }

/* ---------- 3. Type primitives ---------- */
.display{
  font-family:var(--display);
  font-weight:300;
  line-height:.92;
  letter-spacing:-.012em;
  font-feature-settings:"liga" 1,"dlig" 1;
}
.display em{ font-style:italic; font-weight:300 }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-sm);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:var(--tr-wide);
  color:color-mix(in srgb, currentColor 78%, transparent);
}
.lede{
  font-size:clamp(1.05rem,1.45vw,1.32rem);
  line-height:1.62;
  font-weight:300;
  color:color-mix(in srgb, currentColor 90%, transparent);
}
.serif-body{ font-family:var(--display); font-size:clamp(1.2rem,1.9vw,1.75rem); line-height:1.5; font-weight:300 }

/* ---------- 4. Layout ---------- */
.shell{ width:100%; padding-inline:var(--gut) }
.section{ position:relative; padding-block:var(--sec) }
.grid12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut) }
@media (max-width:860px){ .grid12{ grid-template-columns:repeat(6,1fr) } }

/* ---------- 5. Fixed chrome ---------- */
.chrome{ position:fixed; inset:0; z-index:var(--chrome-z); pointer-events:none;
  color:var(--salt); transition:color .55s var(--e-out), filter .55s var(--e-out);
  filter:drop-shadow(0 1px 16px rgba(11,9,8,.55)) }
.chrome[data-mode="dark"]{ color:var(--basalt); filter:none }
.chrome .nav-link[data-corner="bl"], .chrome .scrub{ transition:opacity .5s var(--e-out) }
.chrome.is-tucked .nav-link[data-corner=bl],
.chrome.is-tucked .scrub{ opacity:0; pointer-events:none }
/* When the sticky buy bar is up it owns the bottom band: clear the corner
   labels out of it and lift the cart to sit just above the bar. */
.chrome .nav-cart{ transition:transform .6s var(--e-out) }
.chrome.is-barred .nav-link[data-corner="bl"],
.chrome.is-barred .scrub{ opacity:0; pointer-events:none }
.chrome.is-barred .nav-cart{ transform:translateY(-4.6rem) }
.chrome a,.chrome button{ pointer-events:auto }

.chrome__mark{
  position:absolute; top:clamp(1.1rem,2.2vh,1.9rem); left:50%; translate:-50% 0;
  width:clamp(130px,13vw,190px); pointer-events:auto;
}
.chrome__mark svg{ width:100%; height:auto; color:currentColor }

.nav-link{
  position:absolute;
  font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:var(--tr-mid);
  font-weight:400; padding:.55rem .2rem;
}
.nav-link[data-corner="tl"]{ top:calc(clamp(1.4rem,2.6vh,2.2rem) + env(safe-area-inset-top));
  left:calc(var(--gut) + env(safe-area-inset-left)) }
.nav-link[data-corner="tr"]{ top:calc(clamp(1.4rem,2.6vh,2.2rem) + env(safe-area-inset-top));
  right:calc(var(--gut) + env(safe-area-inset-right)) }
.nav-link[data-corner="bl"]{ bottom:calc(clamp(1.4rem,2.6vh,2.2rem) + env(safe-area-inset-bottom));
  left:calc(var(--gut) + env(safe-area-inset-left)) }
.nav-cart{ position:absolute;
  bottom:calc(clamp(1.4rem,2.6vh,2.2rem) + env(safe-area-inset-bottom));
  right:calc(var(--gut) + env(safe-area-inset-right));
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:var(--tr-mid) }
.nav-cart__icon{ flex:0 0 auto; margin-bottom:1px }
.nav-cart__count{ margin-left:.3rem }
.nav-cart__count{ font-variant-numeric:tabular-nums; opacity:.55 }

/* underline sweep */
.u-sweep{ position:relative; display:inline-block; overflow:hidden; padding-bottom:2px }
.u-sweep::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(--e-out);
}
.u-sweep:hover::after,
[aria-current="page"] .u-sweep::after{ transform:scaleX(1); transform-origin:0 50% }

/* ---------- 6. Scroll scrubber ---------- */
.scrub{
  position:absolute; bottom:clamp(1.5rem,2.8vh,2.3rem); left:50%; translate:-50% 0;
  width:min(38vw,470px); display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.scrub__ticks{ display:flex; width:100%; justify-content:space-between; align-items:center; height:11px }
.scrub__tick{ width:1px; height:5px; background:currentColor; opacity:.22; transform-origin:50% 100%;
  transition:opacity .3s, height .3s }
.scrub__tick.is-on{ opacity:.95; height:11px }
.scrub__pct{ font-size:var(--fs-xs); letter-spacing:var(--tr-mid); opacity:.5; font-variant-numeric:tabular-nums }
@media (max-width:860px){ .scrub{ width:56vw } }

/* The system cursor is hidden ONLY while the custom one is confirmed running.
   JS adds .bm-cursor after it has successfully bound, and removes it on any
   error or on Escape — so the worst case is a normal cursor, never none. */
html.bm-cursor, html.bm-cursor *{ cursor:none !important }

/* ---------- 7. Cursor ---------- */
/* Sits above the preloader (z 700) — otherwise the pointer vanishes for the
   whole entrance, which reads as the page having frozen. */
.cursor{ position:fixed; top:0; left:0; z-index:800; pointer-events:none;
  opacity:0; will-change:transform }
.cursor__arrow{ position:absolute; left:-13px; top:-1px; display:block;
  transform-origin:13px 1px;
  transform:rotate(-32deg) scale(var(--cs,1));
  transition:transform .38s var(--e-out), filter .38s var(--e-out);
  filter:drop-shadow(0 3px 7px rgba(11,9,8,.45)) }
.cursor__label{ position:absolute; left:24px; top:24px; white-space:nowrap;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--salt);
  opacity:0; transform:translateY(4px);
  transition:opacity .3s var(--e-out), transform .3s var(--e-out);
  text-shadow:0 1px 10px rgba(11,9,8,.9) }
.cursor.is-lg{ --cs:1.45 }
.cursor.is-lg .cursor__label{ opacity:1; transform:translateY(0) }
.cursor.is-sm{ --cs:.72 }
@media (hover:none),(pointer:coarse){ .cursor{ display:none } }

/* ---------- 8. Grain ---------- */
.grain{ position:fixed; inset:-150%; z-index:500; pointer-events:none; opacity:.16;
  background-image:var(--grain-url); background-size:220px 220px;
  animation:grain 1.1s steps(5) infinite; will-change:transform }
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 10%{ transform:translate(-3%,-4%) }
  30%{ transform:translate(4%,-2%) } 50%{ transform:translate(-2%,4%) }
  70%{ transform:translate(3%,3%) } 90%{ transform:translate(-4%,1%) }
}

/* ---------- 9. Preloader ---------- */
.loader{ position:fixed; inset:0; z-index:700; background:var(--basalt);
  display:grid; place-items:center; }
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:2.4rem }
.loader__mark{ width:min(56vw,340px); color:var(--linen) }
.loader__mark path{ fill:none; stroke:var(--linen); stroke-width:.6 }
.loader__meta{ display:flex; align-items:baseline; gap:1.2rem; color:var(--sand) }
.loader__pct{ font-size:var(--fs-sm); letter-spacing:var(--tr-mid); font-variant-numeric:tabular-nums }
.loader__word{ font-size:var(--fs-xs); letter-spacing:var(--tr-wide); text-transform:uppercase; opacity:.6 }
.loader__bar{ width:min(46vw,290px); height:1px; background:color-mix(in srgb,var(--sand) 26%,transparent);
  position:relative; overflow:hidden }
.loader__bar i{ position:absolute; inset:0; background:var(--bronze); transform:scaleX(0); transform-origin:0 50% }

/* Curtain used by loader exit + page transitions */
.curtain{ position:fixed; inset:0; z-index:690; pointer-events:none;
  display:grid; grid-template-columns:repeat(4,1fr) }
.curtain__panel{ background:var(--stone); transform:scaleY(0); transform-origin:50% 100% }
.curtain.is-down .curtain__panel{ transform-origin:50% 0 }

/* ---------- 10. Buttons & links ---------- */
.btn{
  --btn-fg:var(--fg);
  position:relative; display:inline-flex; align-items:center; gap:.85rem;
  padding:1.05rem 2.1rem; border:1px solid color-mix(in srgb,var(--btn-fg) 32%,transparent);
  border-radius:999px; overflow:hidden; isolation:isolate;
  font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:var(--tr-mid); font-weight:400;
  color:var(--btn-fg); transition:color .5s var(--e-out), border-color .5s var(--e-out);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--btn-fg);
  transform:translateY(101%); transition:transform .62s var(--e-out) }
.btn:hover{ color:var(--bg); border-color:var(--btn-fg) }
.btn:hover::before{ transform:translateY(0) }
.btn--sm{ padding:.72rem 1.4rem; font-size:var(--fs-xs) }
.btn--solid{ background:var(--btn-fg); color:var(--bg); border-color:var(--btn-fg) }
.btn--solid::before{ background:color-mix(in srgb,var(--btn-fg) 78%, var(--bronze)) }
.btn--solid:hover{ color:var(--bg) }
.btn__arrow{ transition:transform .5s var(--e-out) }
.btn:hover .btn__arrow{ transform:translate(3px,-3px) }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:var(--tr-mid);
}
.link-arrow span{ position:relative; overflow:hidden; display:inline-block;
  white-space:nowrap; flex:0 0 auto }
.link-arrow span::after{ content:""; position:absolute; left:0; bottom:1px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform .55s var(--e-out) }
.link-arrow:hover span::after{ transform:scaleX(1); transform-origin:0 50% }
.link-arrow svg{ transition:transform .5s var(--e-out); flex:0 0 auto }
.link-arrow:hover svg{ transform:translate(3px,-3px) }

/* ---------- 11. Reveal primitives ---------- */
.r-line{ display:block; overflow:hidden }
.r-line > *{ display:block; will-change:transform }
[data-reveal]{ will-change:transform,opacity }

.figure{ position:relative; overflow:hidden; background:var(--stone) }
.figure img{ width:100%; height:100%; object-fit:cover; will-change:transform }
.figure--arch{ border-radius:50vw 50vw 50vw 50vw / 34% 34% 34% 34% }
.figure--pill{ border-radius:999px }
.figure--soft{ border-radius:clamp(10px,1.4vw,20px) }
.figure__veil{ position:absolute; inset:0; background:var(--stone); transform-origin:50% 100% }

/* LQIP: the figure carries a blurred base the image paints over.
   Never gate visibility on JS — a missed load event must not blank the page. */
.figure{ background-size:cover; background-position:center }
.figure img[data-lqip]{ opacity:1 }

/* ---------- 12. Marquee ---------- */
.marquee{ overflow:hidden; white-space:nowrap; display:flex; user-select:none }
.marquee__row{ display:flex; flex:0 0 auto; will-change:transform }
.marquee__item{ display:inline-flex; align-items:center; gap:clamp(1.5rem,3vw,3rem);
  padding-right:clamp(1.5rem,3vw,3rem);
  font-family:var(--display); font-size:clamp(2.6rem,7.5vw,8rem); font-weight:300; line-height:1 }
.marquee__dot{ width:.34em; height:.34em; border-radius:50%; background:var(--bronze); flex:0 0 auto }

/* ---------- 13. Cart drawer ---------- */
.drawer{ position:fixed; inset:0 0 0 auto; width:min(460px,100vw); z-index:650;
  background:var(--linen); color:var(--basalt); transform:translateX(100%);
  display:flex; flex-direction:column;
  /* It had no transition at all, on a site whose page changes are a
     four-panel curtain. The cart was the one thing that hard-cut. */
  transition:transform .62s var(--e-out);
  box-shadow:-2rem 0 4rem rgba(11,9,8,.18) }
.drawer[inert]{ visibility:hidden; transition:transform .62s var(--e-out), visibility 0s .62s }
.drawer__scrim{ position:fixed; inset:0; z-index:640; background:rgba(11,9,8,.6);
  opacity:0; pointer-events:none;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:opacity .5s var(--e-out) }
.drawer.is-open{ transform:none }
.drawer__scrim.is-open{ opacity:1; pointer-events:auto }
.drawer__head{ display:flex; justify-content:space-between; align-items:center;
  padding:2rem var(--gut) 1.4rem; border-bottom:1px solid var(--rule) }
.drawer__body{ flex:1; overflow-y:auto; padding:1.6rem var(--gut) }
.drawer__foot{ padding:1.6rem var(--gut) 2.2rem; border-top:1px solid var(--rule) }
.drawer__empty{ padding:4rem 0; text-align:center; color:var(--muted) }
.cart-item{ display:grid; grid-template-columns:74px 1fr auto; gap:1.1rem; padding:1.15rem 0;
  border-bottom:1px solid var(--rule); align-items:start }
.cart-item img{ width:74px; height:96px; object-fit:cover; border-radius:4px }
.cart-item__name{ font-family:var(--display); font-size:1.24rem; line-height:1.2 }
.cart-item__meta{ font-size:var(--fs-xs); letter-spacing:var(--tr-mid); text-transform:uppercase; color:var(--muted); margin-top:.35rem }
.cart-item__rm{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.7rem }
.cart-item__rm:hover{ color:var(--basalt) }

/* qty stepper */
.qty{ display:inline-flex; align-items:center; gap:1.1rem; border:1px solid var(--rule);
  border-radius:999px; padding:.5rem 1.05rem }
.qty button{ font-size:1rem; line-height:1; opacity:.6; transition:opacity .3s }
.qty button:hover{ opacity:1 }
.qty output{ font-variant-numeric:tabular-nums; min-width:1.2ch; text-align:center; font-size:var(--fs-sm) }

/* ---------- 14. Footer ---------- */
.footer{ background:var(--basalt); color:var(--salt); position:relative; overflow:hidden;
  padding:clamp(4rem,9vh,7rem) 0 clamp(5rem,9vh,7rem) }
.footer__mark{ padding-inline:var(--gut); }
.footer__mark svg{ width:min(100%,780px); height:auto; color:color-mix(in srgb,var(--sand) 30%,transparent) }
.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut);
  padding:clamp(3rem,7vh,5.5rem) var(--gut) clamp(2.5rem,5vh,4rem); align-items:start }
.footer__cols h4{ font-size:var(--fs-xs); letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--dune); font-weight:400; margin-bottom:1.3rem }
.footer__cols li{ margin-bottom:.62rem }
.footer__cols a{ font-size:.92rem; color:color-mix(in srgb,var(--salt) 88%,transparent); transition:color .4s }
.footer__cols a:hover{ color:var(--salt) }
.footer__base{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding:1.5rem var(--gut) 0; border-top:1px solid color-mix(in srgb,var(--salt) 18%,transparent);
  font-size:var(--fs-xs); letter-spacing:.09em; text-transform:uppercase;
  color:color-mix(in srgb,var(--salt) 62%,transparent) }
@media (max-width:860px){ .footer__cols{ grid-template-columns:repeat(2,1fr); row-gap:2.6rem } }

/* ---------- 15. Utility ---------- */
.skip-link{ position:fixed; top:.6rem; left:.6rem; z-index:900;
  transform:translateY(-200%); transition:transform .25s var(--e-out);
  background:var(--basalt); color:var(--salt); padding:.7rem 1.1rem;
  font-size:var(--fs-sm); letter-spacing:var(--tr-mid); text-transform:uppercase }
.skip-link:focus{ transform:none }
/* The entrance says it can be skipped, rather than leaving it to be guessed. */
.loader__skip{ margin-top:1.6rem; opacity:0; color:var(--sand);
  font-size:var(--fs-xs); letter-spacing:var(--tr-wide); text-transform:uppercase }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.no-scroll{ overflow:hidden }
.rule{ height:1px; background:var(--rule); width:100% }
.tnum{ font-variant-numeric:tabular-nums }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important }
  .grain{ display:none }
}

/* ============================================================
   MOBILE CHROME
   On a phone the corner labels sit directly over body copy, because the
   sections have far less padding than on desktop. Give the two bands a
   graded backdrop that follows the adaptive ink colour, so text passing
   beneath them reads as designed rather than as a collision.
   ============================================================ */
@media (max-width:860px){
  .chrome::before, .chrome::after{
    content:""; position:absolute; left:0; right:0; height:5.2rem;
    pointer-events:none; z-index:-1; transition:background .55s var(--e-out);
  }
  .chrome::before{ top:0 }
  .chrome::after{ bottom:0 }
  .chrome[data-mode="light"]::before{
    background:linear-gradient(180deg, rgba(11,9,8,.86) 0%, rgba(11,9,8,.55) 55%, transparent 100%) }
  .chrome[data-mode="light"]::after{
    background:linear-gradient(0deg, rgba(11,9,8,.86) 0%, rgba(11,9,8,.55) 55%, transparent 100%) }
  .chrome[data-mode="dark"]::before{
    background:linear-gradient(180deg, rgba(246,241,231,.92) 0%, rgba(246,241,231,.62) 55%, transparent 100%) }
  .chrome[data-mode="dark"]::after{
    background:linear-gradient(0deg, rgba(246,241,231,.92) 0%, rgba(246,241,231,.62) 55%, transparent 100%) }
  .chrome__mark{ width:120px }
  .nav-link, .nav-cart{ font-size:.66rem; letter-spacing:.14em }
  /* the buy bar already owns the bottom band on a product page */
  body[data-page="product"] .chrome::after{ display:none }
}

/* Sections need to clear the bands on a phone, where their own padding is small */
@media (max-width:860px){
  .section, .four, .manifesto, .statement, .ghost, .boxes, .list,
  .bene, .narr, .ing, .steps, .spec, .rel, .pair, .hs, .coll-hero{
    padding-top:max(var(--safe-t), 4.5rem);
    padding-bottom:max(var(--safe-b), 4.5rem);
  }
}