/* ============================================================
   BY MARAM — v3 "Bright Gold"

   One sheet, two directions. §1–4 are shared by both;
   each direction then adds only what it alone needs.

     1  Tokens          6  A · The Descent
     2  Reset           7  B · The Salt Atelier
     3  Shared type     8  Entry: the loading card
     4  Chrome          9  Reveal, switcher
     5  Hero, shared   10  Narrower screens
                       11  Reduced motion
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Every value is lifted from the photographs Maram sent on 2 October, so the
     site, her brochure and her packaging agree without anybody matching them
     by hand. */
  --salt:      #FCFAF6;   /* the page */
  --pearl:     #F3EADC;   /* quiet bands */
  --sky:       #CFE6F2;   /* the air */
  --turq:      #6FC6C8;   /* the water */
  --turq-pale: #A9DEDC;
  --gold-lt:   #F0D98C;
  --gold:      #C9A227;
  --gold-dk:   #9A7B1F;
  --espresso:  #2E211A;   /* headlines */
  --stone:     #6B5C4E;   /* body text */

  --rule: color-mix(in srgb, var(--gold) 38%, transparent);
  --hair: color-mix(in srgb, var(--espresso) 14%, transparent);

  /* Two faces, no more. Headings and subheadings are set in Optima, the
     flared, chiselled capitals of the client's Aurum reference; Apple
     devices carry it, everyone else gets Tenor Sans, its closest web cut.
     Jost sets everything else: running text, labels, prices, buttons. */
  --display: "Optima", "Optima Nova", "Tenor Sans", "Candara", sans-serif;
  --sans:    "Jost", "Futura", "Avenir Next", -apple-system, system-ui, sans-serif;

  --fs-h1:   clamp(2.9rem, 6.4vw, 6.2rem);
  --fs-h2:   clamp(2.1rem, 4.2vw, 4rem);
  --fs-lede: clamp(1.02rem, 1.5vw, 1.35rem);
  --fs-body: clamp(0.94rem, 1.02vw, 1.04rem);
  --fs-sm:   clamp(0.7rem, 0.78vw, 0.78rem);

  --tr-wide: 0.3em;
  --tr-mid:  0.16em;

  --gut:  clamp(1.15rem, 4vw, 4.5rem);
  --sec:  clamp(4.5rem, 10vh, 8rem);
  --navh: 4.4rem;

  --e-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }

body{
  background:var(--salt);
  /* `clip`, not `hidden`: hidden would make the body a scroll container and
     break every `position:sticky` on the site. This only guarantees that
     nothing — a wide track, an overlay on its way out — can ever hand a phone
     a sideways scroll. */
  overflow-x:clip;
  color:var(--stone);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* The blueprint's first rule: the page is already finished when it paints. */
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1, h2, h3{
  font-family:var(--display); font-weight:400;
  letter-spacing:.01em; color:var(--espresso); line-height:1.08;
}
::selection{ background:var(--gold-lt); color:var(--espresso) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--espresso); color:var(--salt); padding:.7rem 1.1rem;
}
.skip:focus{ left:.5rem; top:.5rem }
:focus-visible{ outline:2px solid var(--gold-dk); outline-offset:3px }

/* ---------- 3. Shared type ---------- */
.eyebrow{
  font-size:var(--fs-sm); font-weight:400; letter-spacing:var(--tr-wide);
  text-transform:uppercase; color:var(--gold-dk);
}
.lede{ font-size:var(--fs-lede); font-weight:200; line-height:1.5 }
.claims{
  font-size:var(--fs-sm); letter-spacing:var(--tr-mid);
  text-transform:uppercase; color:var(--stone);
}

/* The one gold button on the screen. Gold touches exactly three things: the
   monogram, the hairlines, and this. */
.btn{
  display:inline-flex; align-items:center; gap:.85em;
  padding:1.05em 2.1em;
  position:relative; overflow:hidden;
  background:linear-gradient(112deg, #9A731D 0%, #D1AA39 32%, #F4DA86 51%, #B68722 76%, #E2BB52 100%);
  background-size:160% 100%;
  box-shadow:inset 0 1px 0 rgba(255, 248, 207, .75), 0 9px 24px -14px rgba(86, 58, 13, .65);
  color:var(--espresso); font-size:var(--fs-sm); letter-spacing:var(--tr-wide);
  text-transform:uppercase; white-space:nowrap;
  transition:background-position .9s var(--e-out);
}
.btn:hover{ background-position:100% 0 }
.btn:not(.btn--ghost):not(.btn--glass)::before{
  content:""; position:absolute; inset:-50% auto -50% -35%; width:32%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform:skewX(-24deg) translateX(0); pointer-events:none;
  transition:transform 1.1s var(--e-out);
}
.btn:not(.btn--ghost):not(.btn--glass):hover::before{ transform:skewX(-24deg) translateX(490%) }
.btn svg{ width:11px; height:11px; flex:none; transition:transform .6s var(--e-out) }
.btn:hover svg{ transform:translateX(4px) }

.btn--ghost{
  background:none; color:var(--espresso);
  border:1px solid var(--rule); padding:1em 2em; box-shadow:none;
}
.btn--ghost:hover{
  border-color:var(--gold);
  background:color-mix(in srgb, var(--gold-lt) 18%, transparent);
}
.btn--glass{
  background:color-mix(in srgb, var(--salt) 26%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, #fff 55%, transparent);
  color:var(--espresso); border-radius:999px; padding:1em 2em; box-shadow:none;
}
.btn--glass:hover{ background:color-mix(in srgb, var(--salt) 48%, transparent) }

/* Gold leaf: a gradient with a highlight band crossing it slowly, which is
   what reads as metal rather than as mustard. */
.gild{
  background:linear-gradient(104deg, var(--gold-dk) 0%, var(--gold) 28%,
             var(--gold-lt) 46%, #FFF6D6 52%, var(--gold-lt) 58%,
             var(--gold) 76%, var(--gold-dk) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:leaf 11s ease-in-out infinite;
}
@keyframes leaf{ 0%, 100%{ background-position:0 0 } 50%{ background-position:100% 0 } }

/* ---------- 4. Chrome ---------- */
.strip{
  background:var(--salt); border-bottom:1px solid var(--hair);
  text-align:center; padding:.62rem var(--gut);
  font-size:var(--fs-sm); letter-spacing:var(--tr-mid); text-transform:uppercase;
  color:var(--stone); position:relative; z-index:60;
}
.strip b{ color:var(--gold-dk); font-weight:400 }
.strip__dot{ color:var(--gold); padding-inline:.55em }

.nav{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:0 var(--gut); height:var(--navh);
  background:var(--salt); border-bottom:1px solid var(--hair);
}
/* Over a photographic first screen the bar is see-through and turns solid the
   moment you scroll past it. It stays `sticky` throughout — swapping to
   `fixed` would jump it by the height of the strip above. The hero is pulled
   up underneath instead. */
.nav--over{
  background:transparent; border-bottom-color:transparent;
  transition:background .55s var(--e-out), border-color .55s var(--e-out);
}
.nav--over.is-stuck{
  background:color-mix(in srgb, var(--salt) 94%, transparent);
  border-bottom-color:var(--hair);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.nav__mark{ display:flex; align-items:center; gap:.6rem; justify-self:start }
.nav__mark img{ width:auto; height:2rem }
.nav__mark span{
  font-size:var(--fs-sm); letter-spacing:var(--tr-wide);
  text-transform:uppercase; color:var(--espresso);
  white-space:nowrap;   /* "BY MARAM" must never break across two lines */
}
.nav--over .nav__mark span,
.nav--over .nav__links a,
.nav--over .nav__tools{ color:var(--espresso) }

.nav__links{ display:flex; gap:clamp(1rem, 2.1vw, 2.2rem) }
.nav__links a{
  font-size:var(--fs-sm); letter-spacing:var(--tr-mid);
  text-transform:uppercase; color:var(--stone); position:relative; padding:.3rem 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--e-out);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after{ transform:scaleX(1) }
.nav__tools{ justify-self:end; display:flex; gap:1.1rem; align-items:center; color:var(--stone) }
.nav__tools svg{ width:17px; height:17px }

/* ---------- 5. Hero, shared ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden }
.hero__copy{ position:relative; z-index:5 }
.hero h1{ font-size:var(--fs-h1); letter-spacing:-.012em }
.hero .eyebrow{ margin-bottom:1.15rem }
.hero .lede{ margin:1.15rem 0 2.1rem; max-width:32rem }

.hero__hint{
  position:absolute; z-index:6; left:var(--gut); bottom:clamp(1.5rem, 4vh, 3rem);
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--fs-sm); letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--gold-dk);
}
.hero__hint i{
  width:30px; height:1px; background:currentColor; display:block;
  transform-origin:left; animation:sweep 4.6s var(--e-out) infinite;
}
@keyframes sweep{ 0%, 72%, 100%{ transform:scaleX(.25) } 36%{ transform:scaleX(1) } }

/* ============================================================
   6. A — THE DESCENT
   Salt brushed off the house mark, then a pinned scroll that
   sinks 430 m and opens into the range.
   ============================================================ */
.hero--sea{
  min-height:100svh; display:flex; align-items:center;
  margin-top:calc(-1 * var(--navh));
  padding:calc(var(--navh) + var(--sec) * .6) var(--gut) var(--sec);
  cursor:crosshair;
  user-select:none; -webkit-user-select:none;
}
.sea__under{ position:absolute; inset:0; z-index:0 }
.sea__plate{
  position:absolute; inset:0; display:block; overflow:hidden;
  background:var(--turq-pale);
}
.hero__approved-photo{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:50% 54%;
  transform:scale(1.015);
  animation:approvedHeroDrift 24s ease-in-out infinite alternate;
  filter:saturate(1.02) contrast(1.01);
}
@keyframes approvedHeroDrift{
  from{ transform:scale(1.015) translate3d(0,0,0) }
  to{ transform:scale(1.055) translate3d(-.7%,-.35%,0) }
}
/* The mark is *under* the salt, not on top of it: brushing is what finds it. */
.sea__mono{
  position:absolute; z-index:1; right:9%; top:50%; transform:translateY(-50%);
  width:clamp(12rem, 27vw, 25rem); height:auto;
  filter:drop-shadow(0 10px 24px rgba(77,45,20,.24));
}
.sea__crust{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  touch-action:pan-y;          /* brushing must never trap the page scroll */
}
.sea__salt{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none }

/* A short fall of the page's own white under the bar, so the menu holds over
   whatever the photograph is doing up there… */
.hero--sea::before{
  content:""; position:absolute; inset:0 0 auto; height:clamp(7rem, 15vh, 11rem);
  z-index:3; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--salt) 84%, transparent), transparent);
}
/* …and a veil of the same white under the type. White type on a bright salt
   shoreline is unreadable, and a dark scrim to fix that would break the
   blueprint's first rule — everything happens in daylight. */
.hero--sea::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--salt) 76%, transparent) 0%,
    color-mix(in srgb, var(--salt) 48%, transparent) 24%,
    color-mix(in srgb, var(--salt) 10%, transparent) 48%,
    transparent 64%);
}
.hero--sea .hero__copy{ color:var(--espresso) }
.hero--sea h1{
  letter-spacing:-.034em; line-height:1.02;
  text-shadow:0 2px 24px rgba(255,253,246,.7);
}
.hero--sea .lede{
  font-weight:400; max-width:31rem;
  text-shadow:0 1px 15px rgba(255,253,246,.85);
}
.hero--sea .hero__approved-photo{
  object-position:50% 50%;
  animation:none;
  transform:none;
  filter:none;
}
.hero__hint--reveal{
  left:50%; right:auto; bottom:2rem; transform:translateX(-50%);
  color:var(--espresso);
  text-shadow:0 1px 12px rgba(255,253,246,.95);
  transition:opacity .55s var(--e-out), transform .55s var(--e-out);
}
.hero__hint--reveal.is-done{ opacity:0; transform:translate(-50%, 8px) }

.sea__frame{
  position:absolute; z-index:4; pointer-events:none;
  inset:calc(var(--navh) + .9rem) clamp(.8rem, 1.8vw, 1.6rem) clamp(.8rem, 1.8vw, 1.6rem);
  border:1px solid color-mix(in srgb, var(--gold) 46%, transparent);
}
.sea__frame::before, .sea__frame::after{
  content:""; position:absolute;
  width:clamp(26px, 3vw, 42px); height:clamp(26px, 3vw, 42px);
  border:1px solid var(--gold);
}
.sea__frame::before{ top:-1px; left:-1px; border-width:1px 0 0 1px }
.sea__frame::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0 }

.depth-rule{
  position:absolute; z-index:5; right:var(--gut); top:30%; bottom:14%;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  font-size:var(--fs-sm); letter-spacing:var(--tr-mid); text-transform:uppercase;
  color:var(--gold-dk);
}
.depth-rule span, .depth-rule b{ writing-mode:vertical-rl; font-weight:400 }
.depth-rule i{ flex:1; width:1px; background:linear-gradient(var(--gold), transparent) }

/* --- the descent --- */
.descent{ position:relative; height:430vh; background:var(--turq-pale) }
.descent__stage{ position:sticky; top:0; height:100svh; overflow:hidden }
/* Zoom-on-scroll: the surface photograph grows and saturates as you sink. It
   deepens, it never darkens. */
.descent__water{
  position:absolute; inset:-8%; background:var(--turq-pale) center/cover no-repeat;
  transform:scale(calc(1 + var(--p, 0) * .42)) translateY(calc(var(--p, 0) * -3%));
  filter:saturate(calc(1 + var(--p, 0) * .55));
  will-change:transform;
}
/* Four hundred metres of water has to read as depth or the white type sitting
   on it has nothing to hold against. It deepens to a saturated teal — still
   water, still luminous — and the Salt White shelf arrives straight after. */
.descent__veil{
  position:absolute; inset:0;
  background:linear-gradient(176deg,
    color-mix(in srgb, var(--sky) 30%, transparent) 0%,
    color-mix(in srgb, var(--turq) 86%, #0E5560) 46%,
    color-mix(in srgb, var(--turq) 34%, #0B4752) 100%);
  opacity:calc(var(--p, 0) * .94);
}
.descent__motes{
  position:absolute; inset:-30%; opacity:calc(var(--p, 0) * .5); pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1.1px, transparent 1.6px) 0 0/140px 180px,
    radial-gradient(circle at 70% 60%, #fff 0 .9px, transparent 1.4px) 0 0/90px 120px;
  animation:motes 30s linear infinite;
}
@keyframes motes{ to{ transform:translateY(-180px) } }

.descent__depth{
  position:absolute; z-index:4; left:var(--gut); top:50%; transform:translateY(-50%);
  color:var(--espresso); text-shadow:0 1px 7px rgba(255,253,245,.72);
  opacity:1;
}
.descent__depth b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(4.5rem, 15vw, 14rem); line-height:.88; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.descent__depth i{
  display:block; margin-top:.7rem; font-style:normal; color:var(--espresso);
  font-size:clamp(.8rem, .92vw, .9rem); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  text-shadow:0 1px 15px rgba(255,253,245,.8);
}

/* The four facts occupy one place and swap, so the eye never hunts. */
.descent__facts{
  position:absolute; z-index:4; right:var(--gut); top:50%; transform:translateY(-50%);
  width:min(24rem, 44vw); list-style:none; text-align:right;
}
.fact{
  position:absolute; right:0; bottom:0; width:100%;
  opacity:0; transform:translateY(22px); pointer-events:none;
  padding:0 1.5rem 0 0;
  transition:opacity .9s var(--e-out), transform .9s var(--e-out);
}
.fact.is-on{ opacity:1; transform:none }
.fact__d{
  display:block; font-size:clamp(.78rem, .9vw, .88rem); font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase; color:#5E4716; margin-bottom:.9rem;
  text-shadow:0 1px 7px rgba(255,253,245,.8);
}
.fact h3{
  color:var(--espresso); font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.8rem);
  text-shadow:0 1px 5px rgba(255,253,245,.98), 0 0 17px rgba(255,253,245,.8);
}
.fact p{
  color:#30261F; margin-top:.6rem; font-size:clamp(1rem, 1.15vw, 1.1rem);
  font-weight:500;
  text-shadow:0 1px 6px rgba(255,253,245,.95), 0 0 14px rgba(255,253,245,.72);
}

/* --- the closer look: the shelf that rises out of the water --- */
.descent__floor{
  position:absolute; inset:0; z-index:6; background:var(--salt);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(1.3rem, 3vh, 2.4rem);
  padding:calc(var(--navh) + 1rem) var(--gut) var(--sec);
  transform:translateY(calc((1 - var(--floor, 0)) * 102%));
  will-change:transform;
}
.descent__floor header{ position:relative; padding-bottom:clamp(.8rem, 2vh, 1.4rem) }
.descent__floor header::after{
  content:""; position:absolute; left:0; bottom:0; width:clamp(70px, 9vw, 130px); height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.descent__floor header h2{ font-size:var(--fs-h2); margin-top:.6rem }

.look__ghost{
  position:absolute; left:50%; top:48%; transform:translate(-50%, -50%);
  font-family:var(--display); font-size:clamp(6rem, 19vw, 18rem); line-height:1;
  color:color-mix(in srgb, var(--espresso) 5.5%, transparent);
  white-space:nowrap; pointer-events:none; z-index:0;
}
.look{
  position:relative; z-index:1;
  display:grid; grid-template-columns:.78fr 1.22fr;
  gap:clamp(1.4rem, 4vw, 4rem); align-items:center;
}
.look__col{ position:relative; min-height:clamp(14rem, 30vh, 18rem) }
.look__pane{
  position:absolute; inset:0; opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .22s linear, transform .5s var(--e-out);
}
.look__pane.is-on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .5s var(--e-out) .12s, transform .6s var(--e-out);
}
.look__pane h3{ font-size:clamp(1.7rem, 3.2vw, 3rem) }
.look__price{ display:flex; align-items:baseline; gap:.9rem; margin:1.1rem 0 .7rem }
.look__price b{
  font-family:var(--sans); font-weight:400; letter-spacing:.04em;
  font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--espresso);
}
.look__price span{ font-size:var(--fs-sm); letter-spacing:.05em; color:var(--stone) }
.look__pane .claims{ font-size:.66rem }
.look__say{
  margin:1.2rem 0 1.5rem; max-width:24rem;
  font-family:var(--sans); font-weight:300; line-height:1.55;
  font-size:clamp(.98rem, 1.25vw, 1.12rem); color:var(--stone);
}
.look__go{
  display:inline-flex; align-items:center; gap:.7rem; padding-bottom:.45rem;
  font-size:var(--fs-sm); letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--gold-dk); border-bottom:1px solid var(--rule);
  transition:border-color .55s var(--e-out);
}
.look__go:hover{ border-bottom-color:var(--gold) }
.look__go svg{ width:11px; height:11px }

.look__stage{ position:relative; min-height:clamp(18rem, 44vh, 26rem) }
.look__stage::before{
  content:""; position:absolute; inset:12% 10% -12%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 63%, rgba(223,190,106,.27), rgba(243,234,220,.13) 39%, transparent 72%);
}
.look__stage::after{
  content:""; position:absolute; left:50%; bottom:-1%; width:min(70%, 29rem); height:4rem;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #FFFBF0, #E5D6B6 61%, #BBA277);
  border:1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius:50%; box-shadow:0 28px 36px -24px rgba(103,78,27,.58); pointer-events:none;
}
.look__track{ position:absolute; inset:0 }
/* Every placement value is written by the script: the deck's stack-to-spread
   and the coverflow's distance-from-focus are the same transform, and fighting
   them out in calc() would be unreadable. */
.look__card{
  position:absolute; left:50%; top:50%; width:clamp(12rem, 23.5vw, 19rem);
  padding:0; border:0; background:none; cursor:pointer;
  transform:translate(-50%, -50%) translateX(var(--tx, 0px))
            rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  opacity:var(--op, 1); z-index:var(--z, 1);
  transition:transform 1.4s var(--e-out), opacity 1.4s var(--e-out);
}
.look__card img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  box-shadow:0 38px 72px -34px rgba(46, 33, 26, .5);
}
.look__card.is-focus img{
  outline:1px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset:3px;
  box-shadow:0 46px 90px -34px rgba(46, 33, 26, .55);
}
.look__word{
  position:absolute; z-index:2; left:.06em; bottom:.02em;
  font-family:var(--display); font-weight:400; line-height:.9;
  font-size:clamp(1.5rem, 2.6vw, 2.4rem); color:#fff;
  text-shadow:0 2px 24px rgba(46, 33, 26, .5);
  opacity:0; transition:opacity .8s var(--e-out);
}
.look__card.is-focus .look__word{ opacity:1 }
.look__gild{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(104deg, transparent 38%, rgba(255, 240, 190, .9) 50%, transparent 62%);
  background-size:260% 100%; background-position:160% 0;
  transition:background-position 1.6s var(--e-out);
}
.look__card.is-focus .look__gild{ background-position:-70% 0 }

.look__foot{
  position:relative; z-index:1; display:flex; align-items:flex-end;
  justify-content:space-between; gap:clamp(1.5rem, 4vw, 3.5rem);
  margin-top:clamp(1.2rem, 3vh, 2rem);
}
.ticker{ display:flex; gap:4px; align-items:center; flex:1 }
.ticker i{
  flex:1; height:9px; background:color-mix(in srgb, var(--espresso) 15%, transparent);
  transition:background .5s var(--e-out);
}
.ticker i.is-on{ background:var(--gold) }
.look__thumbs{ display:flex; gap:.7rem; flex:none }
.look__thumb{
  width:clamp(40px, 4.4vw, 60px); padding:0; border:0; background:none;
  opacity:.4; transition:opacity .6s var(--e-out);
}
.look__thumb:hover{ opacity:.78 }
.look__thumb.is-on{ opacity:1 }
.look__thumb img{ width:100%; aspect-ratio:1; object-fit:cover }
.look__thumb.is-on img{ outline:1px solid var(--gold); outline-offset:2px }
.look__thumb span{
  display:block; margin-top:.45rem; text-align:center;
  font-size:.5rem; letter-spacing:.09em; text-transform:uppercase; color:var(--stone);
}

/* ============================================================
   7. B — THE SALT ATELIER
   Light drifting over cream behind one centred line, then the
   range walked past sideways.
   ============================================================ */
/* B borrows a principle, not a look: one tactile macro image, one mixed-type
   thought and one decisive action. The portrait makes it unmistakably unlike
   A's landscape while the open composition keeps the luxury quiet. */
.atelier-page .strip{ display:none }
.nav--atelier{
  color:#fff; background:transparent; border-color:transparent;
}
.nav--atelier .nav__mark span,
.nav--atelier .nav__links a,
.nav--atelier .nav__tools{ color:#fff }
.nav--atelier .nav__mark img{
  filter:drop-shadow(0 1px 5px rgba(24,12,8,.28));
}
.nav--atelier.is-stuck .nav__mark span,
.nav--atelier.is-stuck .nav__links a,
.nav--atelier.is-stuck .nav__tools{ color:var(--espresso) }

.hero--atelier{
  min-height:100svh; margin-top:calc(-1 * var(--navh));
  display:grid; place-items:center; background:#7d5544; color:#fff;
}
.atelier__portrait,
.atelier__portrait img,
.atelier__scrim{ position:absolute; inset:0; width:100%; height:100% }
.atelier__portrait{ z-index:0; display:block; overflow:hidden }
.atelier__portrait img{
  object-fit:cover; object-position:50% 46%;
  transform:scale(1.025) translate3d(0, calc(var(--exit, 0) * -1.5%), 0);
  transition:transform .2s linear;
}
.atelier__scrim{
  z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 48% 54% at 50% 46%, rgba(47,24,18,.03), rgba(38,19,14,.22) 100%),
    linear-gradient(180deg, rgba(25,12,9,.2), rgba(25,12,9,.02) 24%, rgba(25,12,9,.08) 60%, rgba(25,12,9,.42));
}
.atelier__copy{
  position:relative; z-index:3; width:min(92vw, 57rem); margin-top:-2vh;
  padding:0 var(--gut); text-align:center; color:#fff;
  transform:translateY(calc(var(--exit, 0) * -26px));
  opacity:calc(1 - var(--exit, 0) * .86);
  text-shadow:0 2px 24px rgba(37,17,12,.34);
}
.atelier__copy .eyebrow{
  margin-bottom:clamp(1.1rem, 2.8vh, 2rem); color:rgba(255,255,255,.88);
}
.hero--atelier h1{
  display:flex; flex-direction:column; align-items:center; gap:.08em;
  margin:0; color:#FBF3E2; font-weight:400;
}
/* One face, one case, two lines, as in the reference: chiselled capitals,
   generously spaced, the second line answering the first. */
.hero--atelier h1 span{
  font:400 clamp(2.2rem, 4.6vw, 4.7rem)/1.02 var(--display);
  letter-spacing:.07em; text-indent:.07em; text-transform:uppercase; white-space:nowrap;
}
.atelier__copy .lede{
  max-width:29rem; margin:clamp(1.6rem, 3.8vh, 2.6rem) auto 0;
  color:rgba(255,255,255,.94); font-size:clamp(.84rem, 1vw, 1rem);
  line-height:1.5;
}
/* The one call to action: an engraved gold frame, not a pill. A hairline
   border with small corner brackets, chiselled capitals, and a gold rule
   that lengthens; on hover the frame fills with polished gold from the
   left and the words turn espresso. */
.atelier__cta{
  position:absolute; z-index:4; left:50%; bottom:clamp(2rem, 6.5vh, 4.4rem);
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:1.2rem;
  padding:1.12rem 2.1rem 1.12rem 2.5rem; isolation:isolate;
  color:#FBF3E2; white-space:nowrap;
  font-family:var(--display); font-size:clamp(.72rem, .8vw, .82rem);
  letter-spacing:.34em; text-transform:uppercase;
  border:1px solid rgba(240, 217, 160, .72);
  background:linear-gradient(110deg, rgba(24, 14, 9, .32), rgba(24, 14, 9, .12));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  text-shadow:0 1px 10px rgba(30, 16, 10, .35);
  transition:color .65s var(--e-out), border-color .65s var(--e-out), text-shadow .65s;
}
.atelier__cta::before{
  content:""; position:absolute; inset:-6px; pointer-events:none;
  --c:rgba(240, 217, 160, .85);
  background:
    linear-gradient(var(--c), var(--c)) left top / 11px 1px,  linear-gradient(var(--c), var(--c)) left top / 1px 11px,
    linear-gradient(var(--c), var(--c)) right top / 11px 1px, linear-gradient(var(--c), var(--c)) right top / 1px 11px,
    linear-gradient(var(--c), var(--c)) left bottom / 11px 1px, linear-gradient(var(--c), var(--c)) left bottom / 1px 11px,
    linear-gradient(var(--c), var(--c)) right bottom / 11px 1px, linear-gradient(var(--c), var(--c)) right bottom / 1px 11px;
  background-repeat:no-repeat;
  transition:inset .65s var(--e-out);
}
.atelier__cta::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, #B8891E, #E6C66F 28%, #F6E2A6 46%, #E3BF63 62%, #B08321);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .75s var(--e-out);
}
.atelier__cta-rule{
  position:relative; width:2.6rem; height:1px; background:currentColor;
  transition:width .65s var(--e-out);
}
.atelier__cta-rule::after{
  content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
}
.atelier__cta:hover,
.atelier__cta:focus-visible{ color:var(--espresso); border-color:transparent; text-shadow:none }
.atelier__cta:hover::after,
.atelier__cta:focus-visible::after{ transform:scaleX(1) }
.atelier__cta:hover::before,
.atelier__cta:focus-visible::before{ inset:-10px }
.atelier__cta:hover .atelier__cta-rule,
.atelier__cta:focus-visible .atelier__cta-rule{ width:3.8rem }

/* ---------- The hero's picture is pinned ----------
   The portrait is fixed to the window and shown only inside the hero
   (clip-path clips even a fixed child), so as the page scrolls, the edge
   of the rituals sweeps up over a still picture. */
.hero--atelier{ clip-path:inset(0) }
.hero--atelier .atelier__portrait,
.hero--atelier .atelier__scrim{ position:fixed }
/* ---------- The rituals: the four rituals as a journey ----------
   One tall section whose stage is pinned to the window (clipped by the
   section, as the hero is): scrolling through it moves the camera in
   journey.js, from the water in front of a colonnade through its arches,
   stopping beside each ritual while its words come and go, and ending at
   the last. Without WebGL, or with less motion, the run stands in. */
.journey{ position:relative; height:580svh; clip-path:inset(0); background:#cfb59e; color:var(--espresso) }
.journey[hidden], .has-journey .run, .will-journey .run{ display:none }
.journey__stage{ position:fixed; inset:0; overflow:hidden }
.journey__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.journey__stage::before{
  content:""; position:absolute; inset:0 0 auto; height:22vh; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(28,18,12,.32), transparent);
}
.journey__open, .journey__ritual, .journey__count{
  position:absolute; z-index:2; visibility:hidden; opacity:var(--k, 0);
}
.journey .is-on{ visibility:visible }
.journey__open{
  right:var(--gut); bottom:clamp(2.4rem, 9vh, 6rem); max-width:min(40rem, 86vw);
  text-align:right; color:#FBF3E2; transform:translateY(calc((1 - var(--k, 0)) * -14px));
}
/* a soft shade under the words, so they hold over bright water and salt */
.journey__open::before{
  content:""; position:absolute; z-index:-1; inset:-3.5rem -4rem -3rem -6rem; pointer-events:none;
  background:radial-gradient(closest-side, rgba(28, 22, 18, .34), rgba(28, 22, 18, .16) 55%, transparent);
}
.journey__eyebrow, .journey__hint{
  font-size:var(--fs-sm); letter-spacing:var(--tr-wide); text-transform:uppercase; color:rgba(251, 243, 226, .86);
}
.journey__open h2{
  margin:.8rem 0 1.4rem; color:#FBF3E2; font-size:clamp(1.5rem, 3.2vw, 3rem); line-height:1.15;
  letter-spacing:.22em; text-indent:.22em; text-transform:uppercase; text-shadow:0 2px 24px rgba(20, 12, 8, .35);
}
.journey__hint{ display:inline-flex; align-items:center; gap:.8rem; font-size:.6rem }
.journey__hint i{
  width:34px; height:1px; background:currentColor; display:block;
  transform-origin:right; animation:sweep 4.6s var(--e-out) infinite;
}
/* Each ritual's card: salt-white glass with a gold hairline and the
   call to action's corner brackets, on the side the object is not. */
.journey__ritual{
  top:50%; width:min(25rem, 34vw); padding:clamp(1.4rem, 2.6vw, 2.3rem) clamp(1.4rem, 2.6vw, 2.4rem);
  background:linear-gradient(140deg, rgba(253, 250, 244, .76), rgba(250, 244, 233, .58));
  -webkit-backdrop-filter:blur(16px) saturate(1.08); backdrop-filter:blur(16px) saturate(1.08);
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  box-shadow:0 40px 80px -50px rgba(58, 38, 20, .55);
  transform:translateY(-50%) translateY(calc((1 - var(--k, 0)) * 18px));
}
.journey__ritual[data-side="right"]{ left:var(--gut) }
.journey__ritual[data-side="left"]{ right:var(--gut) }
.journey__ritual::before{
  content:""; position:absolute; inset:-6px; pointer-events:none;
  --c:color-mix(in srgb, var(--gold) 80%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) left top / 12px 1px,  linear-gradient(var(--c), var(--c)) left top / 1px 12px,
    linear-gradient(var(--c), var(--c)) right top / 12px 1px, linear-gradient(var(--c), var(--c)) right top / 1px 12px,
    linear-gradient(var(--c), var(--c)) left bottom / 12px 1px, linear-gradient(var(--c), var(--c)) left bottom / 1px 12px,
    linear-gradient(var(--c), var(--c)) right bottom / 12px 1px, linear-gradient(var(--c), var(--c)) right bottom / 1px 12px;
  background-repeat:no-repeat;
}
.journey__no{
  font-size:.62rem; letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--gold-dk);
  margin-bottom:clamp(.9rem, 2.2vh, 1.5rem);
}
.journey__no span{ color:var(--gold); padding-inline:.35em }
.journey__ritual h3{ font-size:clamp(1.7rem, 2.7vw, 2.7rem); line-height:1.06; letter-spacing:.02em }
.journey__claims{
  margin:.95rem 0 1.15rem; font-size:.6rem; line-height:1.7; letter-spacing:var(--tr-mid);
  text-transform:uppercase; color:var(--stone);
}
.journey__quote{ font-weight:300; font-size:clamp(.95rem, 1.15vw, 1.08rem); line-height:1.55; color:var(--stone) }
.journey__foot{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:1.3rem; padding-top:.85rem; border-top:1px solid var(--rule);
}
.journey__foot b{ font-weight:400; letter-spacing:.04em; font-size:1.02rem; color:var(--espresso) }
/* The product itself, photographed, beside its price and the bag: the 3D
   ritual stands in the picture, the card shows what arrives at the door. */
.journey__buy{
  display:grid; grid-template-columns:clamp(5.6rem, 7.6vw, 7.2rem) 1fr; gap:clamp(1rem, 1.5vw, 1.35rem);
  align-items:end; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--rule);
}
.journey__photo{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; background:#efe3cf;
  outline:1px solid color-mix(in srgb, var(--gold) 42%, transparent); outline-offset:3px;
  box-shadow:0 22px 34px -24px rgba(58, 38, 20, .6);
}
.journey__buy .journey__foot{ margin-top:0; padding-top:0; border-top:0 }
.journey__foot span{ font-size:var(--fs-sm); color:var(--stone) }
.journey__add{
  margin-top:1.1rem; padding:.8rem 1.35rem; border:1px solid var(--gold); background:transparent;
  font:400 .62rem/1 var(--display); letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:var(--espresso); cursor:pointer; position:relative; isolation:isolate;
  transition:color .6s var(--e-out);
}
.journey__add::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, #B8891E, #E6C66F 28%, #F6E2A6 46%, #E3BF63 62%, #B08321);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--e-out);
}
.journey__add:hover::after, .journey__add:focus-visible::after{ transform:scaleX(1) }
.journey__count{
  left:50%; bottom:clamp(1.3rem, 4vh, 2.4rem); transform:translateX(-50%);
  display:flex; align-items:baseline; gap:.5rem; color:#FBF3E2; text-shadow:0 1px 14px rgba(20, 12, 8, .4);
}
.journey__count b{ font:400 1.5rem/1 var(--display); letter-spacing:.06em }
.journey__count i{ font-style:normal; font-size:.7rem; letter-spacing:.2em; opacity:.8 }
.journey__count span{ margin-left:.9rem; font-size:.58rem; letter-spacing:var(--tr-wide); text-transform:uppercase; opacity:.85 }
/* While the journey has the screen, the bar stays out of the picture. */
.in-journey .nav--atelier.is-stuck{ background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none }
.in-journey .nav--atelier.is-stuck .nav__mark span,
.in-journey .nav--atelier.is-stuck .nav__links a,
.in-journey .nav--atelier.is-stuck .nav__tools{ color:#FBF3E2 }

.tri__cue{
  position:absolute; z-index:5; left:50%; bottom:clamp(1.4rem, 4vh, 2.6rem);
  transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%;
  background:color-mix(in srgb, var(--salt) 80%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--rule); display:grid; place-items:center;
  transition:border-color .6s var(--e-out), background .6s var(--e-out);
}
.tri__cue:hover{ border-color:var(--gold); background:color-mix(in srgb, var(--gold-lt) 26%, transparent) }
.tri__cue i{
  display:block; width:1px; height:14px; background:var(--gold-dk); position:relative;
  animation:cue 3.8s var(--e-out) infinite;
}
.tri__cue i::after{
  content:""; position:absolute; left:-3px; bottom:0;
  width:7px; height:7px;
  border-left:1px solid var(--gold-dk); border-bottom:1px solid var(--gold-dk);
  transform:rotate(-45deg); transform-origin:left bottom;
}
@keyframes cue{ 0%, 70%, 100%{ transform:translateY(-3px) } 35%{ transform:translateY(3px) } }

/* --- the run: Mathilde de Chiara's slider, laid out horizontally --- */
.run{ position:relative; height:300vh; background:var(--salt) }
.run__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column;
  padding-top:calc(var(--navh) + clamp(1rem, 3.5vh, 2.4rem));
  padding-bottom:clamp(5.5rem, 13vh, 8.5rem);
  background:
    radial-gradient(ellipse 55% 60% at 52% 60%, rgba(237,218,166,.24), transparent 79%),
    linear-gradient(125deg, rgba(255,255,255,.9), rgba(251,245,233,.5)), var(--salt);
}
.run__head{
  position:relative; z-index:3; flex:none; padding-inline:var(--gut);
  margin-bottom:clamp(.9rem, 2.6vh, 1.8rem); pointer-events:none;
}
.run__head h2{ font-size:var(--fs-h2); margin-top:.7rem }
.run__track{
  position:relative; z-index:2; flex:1; min-height:0;
  display:flex; align-items:stretch; gap:clamp(2rem, 5vw, 5rem);
  padding-inline:var(--gut);
  transform:translate3d(var(--x, 0px), 0, 0);
  will-change:transform;
}
.run__card{
  flex:0 0 clamp(38rem, 61vw, 55rem); position:relative;
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(1.3rem, 3vw, 3rem); min-height:0;
  padding:clamp(.75rem, 1.35vw, 1.25rem);
  background:linear-gradient(135deg, #FFFDF9, #F6ECDD);
  border:1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  box-shadow:0 38px 70px -53px rgba(70,52,29,.62);
}
.run__shot{
  position:relative; z-index:1; min-height:0;
  overflow:hidden; background:var(--pearl);
  outline:1px solid transparent; outline-offset:4px;
  transition:outline-color 1s var(--e-out), box-shadow 1s var(--e-out);
}
.run__shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--e-out), filter 1.3s var(--e-out);
}
.run__card:hover .run__shot img{ transform:scale(1.04) }
.run__card.is-focus .run__shot{
  outline-color:color-mix(in srgb, var(--gold) 68%, transparent);
  box-shadow:0 35px 70px -43px rgba(81,58,29,.52);
}
.run__card.is-focus .run__shot img{ filter:saturate(1.08) contrast(1.03) }
.run__shot::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(103deg, transparent 40%, rgba(255,246,207,.33) 50%, transparent 60%);
  transform:translateX(-120%); opacity:0;
}
.run__card.is-focus .run__shot::before{ animation:atelierGleam 1.6s .18s var(--e-out) both }
@keyframes atelierGleam{
  12%{ opacity:.75 }
  80%{ opacity:.75 }
  100%{ opacity:0; transform:translateX(120%) }
}
.run__shot::after{
  content:""; position:absolute; inset:auto 0 0; height:34%; z-index:1;
  background:linear-gradient(transparent, rgba(46, 33, 26, .3)); pointer-events:none;
}
.run__word{
  position:absolute; z-index:3; left:1rem; top:1rem;
  padding:.38rem .65rem; background:color-mix(in srgb, var(--salt) 94%, transparent);
  border:1px solid var(--rule);
  font-family:var(--sans); font-size:.58rem; font-weight:400;
  letter-spacing:var(--tr-mid); text-transform:uppercase; color:var(--gold-dk);
}
.run__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(.25rem, 1vw, .8rem) clamp(.5rem, 1.8vw, 1.6rem) clamp(.25rem, 1vw, .8rem) 0;
}
.run__ritual{
  font-size:.65rem; letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--gold-dk); margin-bottom:clamp(1rem, 3vh, 2rem);
}
.run__ritual span{ color:var(--gold); padding-inline:.35em }
.run__body h3{ font-size:clamp(1.8rem, 3vw, 3.1rem) }
.run__body .claims{ margin:.95rem 0 1.4rem; font-size:.61rem; line-height:1.7 }
.run__quote{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(.98rem, 1.25vw, 1.15rem); line-height:1.55;
  color:var(--stone); max-width:15rem;
}
.run__foot{
  display:flex; align-items:baseline; justify-content:space-between;
  border-top:1px solid var(--rule); padding-top:.85rem;
  margin-top:auto; margin-bottom:.75rem;
}
.run__foot b{ font-family:var(--sans); font-weight:400; letter-spacing:.04em; font-size:1.02rem; color:var(--espresso) }
.run__foot span{ font-size:var(--fs-sm); color:var(--stone) }
.run__card .btn--ghost{ width:max-content; justify-content:center; padding:.65em 1rem; font-size:.62rem }

/* The counter, the hairline and the name — the spine of Mathilde's slider. */
.run__meta{
  position:absolute; z-index:3; left:var(--gut); right:var(--gut);
  bottom:clamp(2rem, 5.5vh, 3.4rem);
  display:flex; align-items:center; gap:clamp(1rem, 3vw, 2.4rem);
}
.run__count{ display:flex; align-items:baseline; gap:.5rem; flex:none }
.run__count b{
  font-family:var(--display); font-style:normal; font-weight:400;
  font-size:clamp(1.8rem, 3.6vw, 3rem); color:var(--espresso);
  font-variant-numeric:tabular-nums;
}
.run__count i{ font-style:normal; font-family:var(--display); font-size:1.1rem; color:var(--stone) }
.run__rule{ flex:1; height:1px; background:var(--hair); position:relative }
.run__rule i{
  position:absolute; inset:0 auto 0 0; height:1px; background:var(--gold);
  width:calc(var(--p, 0) * 100%);
}
.run__name{
  flex:none; font-size:var(--fs-sm); letter-spacing:var(--tr-mid);
  text-transform:uppercase; color:var(--stone);
}

/* ============================================================
   8. Entry: the loading card
   ============================================================ */
body.is-loading{ overflow:hidden }
.loader{
  position:fixed; inset:0; z-index:700; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--gold-lt) 14%, transparent), transparent 62%),
    var(--salt);
  transition:opacity .9s var(--e-out), visibility .9s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none }
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(1.1rem, 3vh, 1.9rem) }
.loader__mono{
  width:clamp(4rem, 8vw, 6.4rem); height:auto;
  opacity:0; animation:markIn 1.1s var(--e-out) .15s forwards;
}
@keyframes markIn{ from{ opacity:0; transform:translateY(10px) scale(.96) } to{ opacity:1 } }
.loader__mark{ width:min(52vw, 290px); color:var(--gold) }
.loader__mark svg{ width:100%; height:auto; display:block }
.loader__mark path{
  fill:none; stroke:var(--gold-dk); stroke-width:.55;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 2.1s var(--e-out) .35s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }
.loader__bar{
  position:relative; width:min(44vw, 260px); height:1px;
  background:color-mix(in srgb, var(--gold) 22%, transparent);
}
.loader__bar i{
  position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(var(--p, 0));
  background:linear-gradient(90deg, var(--gold-dk), var(--gold) 55%, var(--gold-lt));
}
.loader__meta{ display:flex; align-items:baseline; gap:1.1rem; color:var(--gold-dk) }
.loader__pct{ font-size:var(--fs-sm); letter-spacing:var(--tr-mid); font-variant-numeric:tabular-nums }
.loader__word{
  font-size:.62rem; letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--stone); opacity:.75;
}

/* ---------- 9. Reveal, and the version switcher ---------- */
.rise{ opacity:0; transform:translateY(18px); transition:opacity 1.1s var(--e-out), transform 1.1s var(--e-out) }
.rise.is-in{ opacity:1; transform:none }

/* A review aid, not part of the design. */
.switch{
  position:fixed; z-index:200; right:1rem; bottom:1rem;
  display:flex; align-items:center; gap:.1rem;
  background:color-mix(in srgb, var(--espresso) 92%, transparent);
  color:var(--salt); padding:.3rem; border-radius:999px;
  font-size:.66rem; letter-spacing:var(--tr-mid); text-transform:uppercase;
  box-shadow:0 10px 30px -12px rgba(46, 33, 26, .55);
}
.switch a{ padding:.5rem .85rem; border-radius:999px; opacity:.62 }
.switch a:hover{ opacity:1 }
.switch a[aria-current]{ background:var(--gold); color:#fff; opacity:1 }
.switch b{ font-weight:400; opacity:.5; padding-left:.7rem; padding-right:.3rem }

/* The chooser page. */
.chooser{ padding:var(--sec) var(--gut); max-width:84rem; margin-inline:auto }
.chooser h1{ font-size:var(--fs-h1); margin:1rem 0 1.2rem }
.chooser .lede{ max-width:44rem }
.picks{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.2rem, 3vw, 2.6rem); margin-top:clamp(2.5rem, 6vh, 4.5rem);
}
.pick__shot{
  aspect-ratio:4/3; overflow:hidden; background:var(--pearl);
  border:1px solid transparent; transition:border-color .6s var(--e-out);
}
.pick:hover .pick__shot{ border-color:var(--rule) }
.pick__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e-out) }
.pick:hover .pick__shot img{ transform:scale(1.04) }
.pick .eyebrow{ margin:1.1rem 0 .4rem }
.pick h2{ font-size:clamp(1.4rem, 2.2vw, 2rem) }
.pick__line{ margin-top:.5rem; color:var(--stone); max-width:22rem }

/* ---------- 10. Narrower screens ---------- */
@media (max-width: 1040px){
  .nav__links{ display:none }
  .descent__facts{ width:min(20rem, 54vw) }
  .picks{ grid-template-columns:1fr }
}
@media (max-width: 760px){
  .strip{ white-space:nowrap }
  .strip__dot, .strip b{ display:none }
  /* The phone is the real screen: the first picture is tall, not a wide one
     squeezed, and the depth story drops to one column. */
  .depth-rule{ display:none }
  .descent{ height:360vh }
  .descent__depth{ top:22%; transform:none }
  .descent__depth b{ font-size:clamp(3.4rem, 22vw, 7rem) }
  .descent__facts{
    right:var(--gut); left:var(--gut); width:auto; top:auto; bottom:14%;
    transform:none; text-align:left;
  }
  .fact{ position:relative; bottom:auto }
  .fact:not(.is-on){ position:absolute }
  .descent__floor{ justify-content:flex-start; padding-top:calc(var(--navh) + 2rem) }
  .look{ grid-template-columns:1fr; gap:1.4rem }
  .look__col{ min-height:13rem; order:2 }
  .look__stage{ order:1; min-height:40svh }
  .look__card{ width:clamp(11rem, 53vw, 14rem) }
  .look__ghost{ font-size:clamp(3.5rem, 22vw, 7rem) }
  .look__foot{ flex-direction:column; align-items:stretch; gap:1.1rem }
  .look__thumbs{ justify-content:space-between }
  .sea__frame{ display:none }
  /* On a phone the copy owns the middle of the screen, so the mark drops to
     the foot and runs off the edge rather than sitting across the headline. */
  .sea__mono{ right:4%; top:82.5%; width:34vw }
  .hero__hint--reveal{ display:none }
  .hero--sea h1{ font-size:clamp(2.65rem, 11.2vw, 3.4rem) }
  /* And the veil turns top-down: a 100deg wash barely covers a 390px column,
     which left the lede sitting on open water. */
  .hero--sea::after{
    background:linear-gradient(172deg,
      color-mix(in srgb, var(--salt) 18%, transparent) 0%,
      color-mix(in srgb, var(--salt) 46%, transparent) 34%,
      color-mix(in srgb, var(--salt) 58%, transparent) 72%,
      color-mix(in srgb, var(--salt) 16%, transparent) 100%);
  }
  .hero--sea .hero__approved-photo{ object-position:50% 50% }
  .run{ height:340vh }
  .run__head{ margin-bottom:.8rem }
  .run__card{
    flex-basis:78vw; grid-template-columns:1fr; grid-template-rows:minmax(0, 1fr) auto;
    gap:.55rem; padding:.6rem;
  }
  .run__body{ padding:.2rem .3rem .15rem }
  .run__ritual{ margin-bottom:.35rem; font-size:.55rem }
  .run__body h3{ font-size:clamp(1.45rem, 6vw, 1.8rem) }
  .run__body .claims{ margin:.25rem 0 .4rem; font-size:.5rem }
  .run__quote{ display:none }
  .run__foot{ margin-top:.2rem; margin-bottom:.4rem; padding-top:.4rem }
  .run__card .btn--ghost{ padding:.5em .7em; font-size:.55rem }
  .run__word{ top:.6rem; left:.6rem; font-size:.54rem }
  .run__name{ display:none }
  .atelier__portrait img{ object-position:50% 48%; transform:scale(1.012) }
  .atelier__scrim{
    background:
      radial-gradient(ellipse 78% 52% at 50% 49%, rgba(35,18,14,.02), rgba(30,15,11,.22) 100%),
      linear-gradient(180deg, rgba(25,12,9,.24), rgba(25,12,9,.04) 24%, rgba(25,12,9,.18) 62%, rgba(25,12,9,.58));
  }
  .atelier__copy{ width:100%; margin-top:2svh; padding-inline:1rem }
  .atelier__copy .eyebrow{
    max-width:90%; margin:0 auto 1rem; font-size:.5rem; line-height:1.55;
  }
  .hero--atelier h1 span{
    font-size:clamp(1.45rem, 7.4vw, 2.1rem); line-height:1.08; letter-spacing:.05em; text-indent:.05em; white-space:nowrap;
  }
  .atelier__copy .lede{
    max-width:17.5rem; margin:1.2rem auto 0; font-size:.7rem; line-height:1.45;
  }
  .atelier__cta{
    bottom:5.6rem; gap:.9rem; padding:1rem 1.4rem 1rem 1.7rem;
    font-size:.62rem; letter-spacing:.26em;
  }
  .atelier__cta-rule{ width:1.8rem }
  .journey{ height:640svh }
  .journey__open{ left:var(--gut); right:var(--gut); text-align:center; bottom:4.5rem }
  .journey__open h2{ font-size:clamp(1.25rem, 6.4vw, 1.8rem); letter-spacing:.16em; text-indent:.16em }
  .journey__ritual{
    top:auto; bottom:calc(4.2rem + env(safe-area-inset-bottom)); left:var(--gut) !important; right:var(--gut) !important;
    width:auto; padding:1.1rem 1.25rem 1.2rem;
    transform:translateY(calc((1 - var(--k, 0)) * 18px));
  }
  .journey__no{ margin-bottom:.5rem; font-size:.55rem }
  .journey__ritual h3{ font-size:1.45rem }
  .journey__ritual h3 br{ display:none }
  .journey__claims{ margin:.45rem 0 0; font-size:.5rem }
  .journey__quote{ display:none }
  .journey__foot{ margin-top:.7rem; padding-top:.55rem }
  .journey__add{ position:absolute; right:1.25rem; bottom:1.05rem; margin:0; padding:.6rem .9rem; font-size:.55rem }
  .journey__foot span{ margin-right:auto; margin-left:.8rem }
  .journey__buy{ grid-template-columns:3.3rem 1fr; gap:.85rem; margin-top:.7rem; padding-top:.6rem; align-items:center }
  .journey__photo{ outline-offset:2px }
  .journey__count{ top:calc(var(--navh) + .5rem); bottom:auto }
  .journey__count span{ display:none }
}

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none }
  .loader{ display:none }
  body.is-loading{ overflow:auto }
  /* The salt is simply already brushed away, and nothing drifts. */
  .sea__crust, .sea__salt, .hero__hint, .descent__motes{ display:none }
  .tri__panel img{ animation:none; transform:none }
  /* Without the pinned scroll these sections still have to read, so they stop
     being pinned and simply stack. */
  .descent, .run{ height:auto }
  .descent__stage, .run__stage{ position:static; height:auto; padding-block:var(--sec) }
  .descent__water{ transform:none; filter:none }
  .descent__veil{ opacity:.35 }
  .descent__depth, .descent__facts{ position:static; transform:none; width:auto; text-align:left }
  .fact{ position:static; opacity:1; transform:none; margin-bottom:2rem }
  .descent__floor{ position:static; transform:none; background:none }
  .look__track{ position:static; display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem }
  .look__card{ position:static; transform:none; opacity:1; width:auto }
  .look__stage{ min-height:0 }
  .run__track{ transform:none; flex-wrap:wrap; justify-content:center }
  .run__meta{ display:none }
}

/* ---------- 12. Production commerce + closing chapter ---------- */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}
.nav__bag,.nav__menu{
  position:relative; display:grid; place-items:center; min-width:2.25rem; min-height:2.25rem;
  color:inherit;
}
.nav__bag span{
  position:absolute; top:-.05rem; right:-.22rem; display:grid; place-items:center;
  width:1.15rem; height:1.15rem; border-radius:50%; background:linear-gradient(135deg,#f5dda0,#ad7e1d);
  color:#2e211a; font:500 .54rem/1 var(--sans); box-shadow:0 3px 12px rgba(43,26,11,.25);
}
.nav__menu{ display:none; gap:.28rem }
.nav__menu span{ display:block; width:1.2rem; height:1px; background:currentColor }

.site-scrim{
  position:fixed; inset:0; z-index:610; width:100%; height:100%; opacity:0; visibility:hidden;
  background:rgba(29,20,15,.48); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:opacity .45s var(--e-out),visibility .45s; cursor:default;
}
.site-scrim.is-open{ opacity:1; visibility:visible }
html.overlay-open,html.overlay-open body{ overflow:hidden }
.bag-drawer{
  position:fixed; z-index:620; top:0; right:0; width:min(31rem,100%); height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto; color:var(--espresso);
  background:linear-gradient(145deg,rgba(255,253,248,.985),rgba(244,234,216,.985));
  box-shadow:-32px 0 80px rgba(31,22,16,.2); transform:translate3d(104%,0,0);
  visibility:hidden; transition:transform .72s var(--e-out),visibility .72s;
}
.bag-drawer.is-open{ transform:none; visibility:visible }
.bag-drawer>header{ display:flex; align-items:flex-start; justify-content:space-between; padding:2rem clamp(1.4rem,5vw,2.5rem); border-bottom:1px solid var(--rule) }
.bag-drawer>header p{ margin-bottom:.25rem; color:var(--gold-dk); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase }
.bag-drawer>header h2{ font-size:clamp(1.8rem,5vw,2.5rem) }
.bag-drawer>header button,.mobile-menu__close{
  padding:.55rem 0; color:var(--stone); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  border-bottom:1px solid var(--gold);
}
.bag-drawer__items{ overflow:auto; overscroll-behavior:contain; padding:0 clamp(1.4rem,5vw,2.5rem) }
.bag-empty{ display:grid; place-items:start; align-content:center; min-height:45vh; gap:1.1rem }
.bag-empty p{ font:400 clamp(1.5rem,5vw,2.2rem)/1.1 var(--display) }
.bag-empty a{ color:var(--gold-dk); font-size:.67rem; letter-spacing:.22em; text-transform:uppercase }
.bag-item{ display:grid; grid-template-columns:5rem minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1.35rem 0; border-bottom:1px solid var(--hair) }
.bag-item img{ width:5rem; height:6.4rem; object-fit:cover; background:var(--pearl) }
.bag-item__copy>a{ display:block; font:400 1rem/1.25 var(--display); color:var(--espresso) }
.bag-item__copy p{ margin:.35rem 0 .45rem; font-size:.7rem; color:var(--stone) }
.bag-item__copy button{ color:var(--gold-dk); font-size:.57rem; letter-spacing:.18em; text-transform:uppercase }
.bag-item__qty{ align-self:end; display:grid; grid-template-columns:1.7rem 1.65rem 1.7rem; align-items:center; border:1px solid var(--rule) }
.bag-item__qty button,.bag-item__qty output{ display:grid; place-items:center; min-height:1.8rem; font-size:.72rem }
.bag-item__qty output{ color:var(--espresso) }
.bag-drawer__footer{ padding:1.45rem clamp(1.4rem,5vw,2.5rem) 1.75rem; border-top:1px solid var(--rule); background:rgba(255,252,245,.78) }
.bag-drawer__footer>p{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; font-size:.65rem; letter-spacing:.23em; text-transform:uppercase }
.bag-drawer__footer strong{ font-size:1rem; font-weight:400; color:var(--espresso) }
.bag-drawer__checkout{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 1.15rem;
  background:linear-gradient(110deg,#a87919,#e8c96f 46%,#b78924); color:#251a13;
  font-size:.64rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
}
.bag-drawer__footer small{ display:block; margin-top:.85rem; color:var(--stone); font-size:.66rem; line-height:1.45 }

.mobile-menu{
  position:fixed; inset:0; z-index:630; display:grid; align-content:center; padding:clamp(2rem,8vw,4rem);
  background:radial-gradient(circle at 80% 15%,rgba(240,217,140,.17),transparent 35%),#2c2019;
  color:#fbf3e2; opacity:0; visibility:hidden; transform:translateY(-1.2rem);
  transition:opacity .52s var(--e-out),transform .52s var(--e-out),visibility .52s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none }
.mobile-menu__close{ position:absolute; top:1.5rem; right:var(--gut); color:#f0d98c }
.mobile-menu nav{ display:grid; gap:.7rem }
.mobile-menu nav a{ font:400 clamp(2rem,9vw,4.5rem)/1.05 var(--display); letter-spacing:.02em }
.mobile-menu nav a::after{ content:""; display:inline-block; width:0; height:1px; margin-left:.4em; vertical-align:middle; background:var(--gold-lt); transition:width .45s var(--e-out) }
.mobile-menu nav a:hover::after,.mobile-menu nav a:focus-visible::after{ width:1.2em }
.mobile-menu>p{ position:absolute; left:var(--gut); bottom:2rem; color:rgba(251,243,226,.58); font-size:.62rem; letter-spacing:.21em; text-transform:uppercase }

.journey__poster{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#cfb59e; transition:opacity .75s var(--e-out),visibility .75s }
.journey__poster::after{ content:""; position:absolute; inset:auto 0 0; height:30vh; background:linear-gradient(transparent,rgba(43,30,20,.28)) }
.journey__poster picture{ display:contents }
.journey__poster img{ width:100%; height:100%; object-fit:cover }
.journey__poster span{
  position:absolute; z-index:1; left:50%; bottom:8vh; transform:translateX(-50%); display:flex; align-items:center; gap:.85rem;
  color:#fbf3e2; font-size:.6rem; letter-spacing:.27em; text-transform:uppercase; white-space:nowrap;
}
.journey__poster i{ display:block; width:2rem; height:1px; background:var(--gold-lt); transform-origin:left; animation:journeyPrepare 1.45s ease-in-out infinite }
@keyframes journeyPrepare{ 0%,100%{ transform:scaleX(.15);opacity:.45 } 50%{ transform:scaleX(1);opacity:1 } }
.journey__canvas{ z-index:1; opacity:0; transition:opacity .7s ease }
.journey.is-ready .journey__canvas{ opacity:1 }
.journey.is-ready .journey__poster{ opacity:0; visibility:hidden }
.journey__stage::before{ z-index:2 }
.journey__open,.journey__ritual,.journey__count{ z-index:3 }
.journey__add.is-added,.run [data-add].is-added{ background:var(--gold-lt); color:var(--espresso) }


.site-footer{ padding:clamp(4rem,8vw,7rem) var(--gut) 1.8rem; background:#f5ecdd; color:var(--stone) }
.site-footer__mark img{ width:min(24rem,60vw) }
.site-footer__grid{ display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:clamp(2rem,7vw,7rem); margin-top:clamp(3rem,7vw,6rem); padding-block:2.2rem; border-block:1px solid var(--rule) }
.site-footer__grid>div,.site-footer__grid nav{ display:grid; align-content:start; gap:.45rem }
.site-footer__grid a,.site-footer__grid p{ font-size:.7rem; letter-spacing:.12em }
.site-footer__grid nav a{ text-transform:uppercase }
.site-footer__grid a:hover{ color:var(--gold-dk) }
.site-footer__base{ display:flex; justify-content:space-between; gap:2rem; padding-top:1.6rem; font-size:.58rem; letter-spacing:.13em; text-transform:uppercase }

@media (max-width:1040px){
  .nav__menu{ display:grid }
  .nav__tools{ gap:.35rem }
}
@media (max-width:760px){
  .nav__mark span{ display:none }
  .nav__mark img{ height:1.75rem }
  .bag-item{ grid-template-columns:4.2rem minmax(0,1fr); align-items:start }
  .bag-item img{ width:4.2rem; height:5.3rem }
  .bag-item__qty{ grid-column:2; width:max-content; margin-top:-.25rem }
  .site-footer__grid{ grid-template-columns:1fr; gap:2rem }
  .site-footer__base{ flex-direction:column; gap:.6rem }
}
@media (prefers-reduced-motion:reduce){
  .journey__poster i{ animation:none }
  .bag-drawer,.mobile-menu,.site-scrim,.journey__poster,.journey__canvas{ transition:none }
}