/* ============================================================
   BY MARAM — e.html: the opening, the hero, the collection

   One house, two lights. The same pages are shown in two looks that
   change under a still composition:
     subtle   the Dead Sea by daylight (the team's Ver 1)
     flashy   champagne light on water (Ver 2)
   html[data-look] carries the choice; only colour, pictures and the
   amount of shine change. The type system never does.

   Type, two families and no more:
     Cormorant   display: the founder's line, the collection, product
                 names, the quotes (its italic). A Garalde whose sharp,
                 bracketed serifs answer the BY MARAM wordmark and whose
                 italic answers the MA swash.
     Jost        everything that informs: labels, body, prices, buttons.
   Labels are Jost capitals at 11px, tracked .3em, weight 450 (heavier
   than text, so small capitals keep their colour). Display sizes run
   lighter as they grow. Lining figures where numbers count (prices,
   counters); Cormorant's own old-style figures everywhere else.

   One gesture joins the rooms: the arch. A dome of the next room rises
   from the bottom edge like the sun over the water, widens, and squares
   off into the full screen (mdebeauty.com's circle reveal, read as a
   Dead Sea sunrise). The film opens onto the hero that way, and the
   hero onto the collection.

     1 Fonts and tokens     5 Hero              9  Closing
     2 Base                 6 The arch          10 Review dock
     3 Shared               7 Collection        11 Look change
     4 Nav and bag          8 The run           12 Phone, reduced motion
   ============================================================ */

/* ---------- 1. Fonts and tokens ---------- */
@font-face{ font-family:"Cormorant"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(/assets/fonts/cormorant-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:"Cormorant"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(/assets/fonts/cormorant-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:"Cormorant"; font-style:italic; font-weight:300 700; font-display:swap;
  src:url(/assets/fonts/cormorant-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:"Cormorant"; font-style:italic; font-weight:300 700; font-display:swap;
  src:url(/assets/fonts/cormorant-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/assets/fonts/jost-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/assets/fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }

/* The opening's dome is a length the browser can animate. */
@property --hole{ syntax:"<length>"; inherits:true; initial-value:0px }

:root{
  --display:"Cormorant", "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --sans:"Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  /* The scale. Display sizes are fluid between a 390 and a 1600 screen. */
  --fs-label:.6875rem;
  --tr-label:.3em;
  --fs-body:clamp(.97rem, .92rem + .16vw, 1.06rem);
  --fs-lede:clamp(1.04rem, .96rem + .3vw, 1.2rem);
  --fs-quote:clamp(1.2rem, 1.02rem + .55vw, 1.56rem);
  --fs-name:clamp(2.15rem, 1.5rem + 1.9vw, 3.45rem);
  --fs-h1:clamp(3rem, 1.55rem + 4.7vw, 7.3rem);
  --fs-h2:clamp(3.5rem, 1.35rem + 6.9vw, 9.8rem);
  --fs-count:clamp(2.6rem, 1.9rem + 2.2vw, 4.4rem);

  --gut:clamp(1.3rem, 4.6vw, 5rem);
  --navh:clamp(4.2rem, 8.2vh, 5.4rem);
  /* Phones. The gutters step clear of a notch in landscape; --tb is the
     height of the browser's own bars (Safari's, Chrome's), which come and
     go as the page scrolls. The rooms are as tall as the screen without
     them, and whatever sits at the foot is lifted by --tb, so it is never
     under a toolbar. On a desktop --tb is 0. */
  --gl:max(var(--gut), env(safe-area-inset-left, 0px));
  --gr:max(var(--gut), env(safe-area-inset-right, 0px));
  --sb:env(safe-area-inset-bottom, 0px);
  --tb:0px;
  --e-out:cubic-bezier(.16, 1, .3, 1);
  --e-io:cubic-bezier(.65, 0, .35, 1);
  --e-soft:cubic-bezier(.33, 0, .2, 1);
}

@supports (height:100lvh){ :root{ --tb:calc(100lvh - 100svh) } }

/* Subtle: the Dead Sea by daylight. Salt-white paper, espresso ink, a
   satin gold used only as a line, never as a fill. */
html[data-look="subtle"]{
  --page:#F5F0E8; --page-2:#ECE4D7; --card:#FAF6EF; --veil:245, 240, 232;
  --ink:#2A211A; --text:#584A3E; --muted:#8C7C6B;
  --gold:#AD8B55; --gold-lt:#D8C49C; --gold-dk:#85673A;
  --hair:rgba(42, 33, 26, .12); --rule:rgba(173, 139, 85, .42);
  --shadow:rgba(52, 38, 24, .16);
  --title-fill:var(--ink);
  --shine:0;
}
/* Flashy: champagne light. Warmer paper, deeper bronze ink, gold that
   catches the light: titles in polished metal, a glow on the cards, stars
   on the gold. */
html[data-look="flashy"]{
  --page:#FBF3E5; --page-2:#F5E7CD; --card:#FFFAF0; --veil:251, 243, 229;
  --ink:#33231A; --text:#664E37; --muted:#9E8664;
  --gold:#BE9250; --gold-lt:#EFD9A8; --gold-dk:#8F652C;
  --hair:rgba(51, 35, 26, .13); --rule:rgba(190, 146, 80, .55);
  --shadow:rgba(150, 104, 40, .26);
  /* Bronze, and one narrow band of light. Gold on pale paper has to be
     darker than gold or it disappears. At rest the letters show the first
     two fifths of this (dark, warm, dark: the play of polished metal); the
     band at 49% is the light that crosses once. */
  --title-fill:linear-gradient(100deg, #644420 0%, #8C642B 13%, #B38946 25%, #8A6129 37%, #A47A3A 42.5%, #E3C380 49%, #A57B3B 55.5%, #7E5724 76%, #5B3D18 100%);
  --shine:1;
}
html[data-look="flashy"] .hero__title, html[data-look="flashy"] .collection__title,
html[data-look="flashy"] .cover__slot, html[data-look="flashy"] .closing__line{ font-weight:380 }
html[data-look="flashy"] .card__name{ font-weight:450 }

/* ---------- 2. Base ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto!important }
.lenis.lenis-stopped{ overflow:hidden }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--page) }
html.is-opening{ overflow:hidden }
body{
  background:var(--page); color:var(--text);
  font:300 var(--fs-body)/1.65 var(--sans);
  font-kerning:normal; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  transition:background-color .9s var(--e-soft), color .9s var(--e-soft);
}
img, video, svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a, button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation }
h1, h2, h3{ font-weight:300; color:var(--ink); text-wrap:balance }
p{ text-wrap:pretty }
::selection{ background:var(--gold-lt); color:var(--ink) }
:focus-visible{ outline:1px solid var(--gold-dk); outline-offset:4px }
.skip{ position:fixed; left:-9999px; top:.6rem; z-index:999; padding:.8rem 1.1rem; background:var(--ink); color:var(--page); font:450 var(--fs-label)/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase }
.skip:focus{ left:.6rem }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important }

/* ---------- 3. Shared ---------- */
.label{
  font:450 var(--fs-label)/1.4 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--gold-dk);
}
/* Tracking leaves air after the last letter; a centred label is moved
   back by that much so it sits on its axis. */
.label--c{ padding-left:var(--tr-label) }

/* Display titles. In the flashy look they are polished metal: a bronze
   gradient clipped to the letters. Light crosses each title once, as it
   arrives, and then the metal rests. (A title that shimmers for ever is a
   title the browser repaints for ever, and the scroll pays for it.) */
.metal{
  color:var(--ink);
  background:var(--title-fill); background-size:240% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text;
  /* The gradient is painted only inside the element's own box, and the
     strokes of Cormorant hang outside it: g, y and p fall about .3em below
     the line, the italic f further, the italic leans out to the right. The
     box is let out on every side and the margins give the room back, so
     the metal reaches the end of every stroke and no letter moves. */
  padding:.18em .14em .38em .08em; margin:-.18em -.14em -.38em -.08em;
}
html[data-look="flashy"] .metal{ color:transparent }
html[data-look="flashy"] .card.is-front .card__name,
html[data-look="flashy"] .collection__title.is-docked .metal{ animation:metal 2.8s .25s var(--e-out) both }
@keyframes metal{ from{ background-position:100% 0 } to{ background-position:0% 0 } }

/* The ornament: a salt star between two hairlines. */
.orn{ display:flex; align-items:center; justify-content:center; gap:.9rem; color:var(--gold) }
.orn::before, .orn::after{ content:""; width:2.4rem; height:1px; background:currentColor; opacity:.8 }
.orn svg{ width:.62rem; height:.62rem; fill:currentColor }

/* A quiet link: words, then a hairline that reaches out. */
.cta{
  display:inline-flex; align-items:center; gap:1.1rem;
  font:450 var(--fs-label)/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink);
  padding:.9rem 0;
}
.cta::after{
  content:""; width:3rem; height:1px; background:var(--gold);
  transform-origin:left; transition:transform .8s var(--e-out), background-color .6s;
}
.cta:focus-visible::after{ transform:scaleX(1.55) }

/* Pictures in both looks, stacked; the one not in use is transparent
   (and not even fetched until the page has settled). */
.look{ position:absolute; inset:0 }
.look img{ width:100%; height:100%; object-fit:cover }
html[data-look="subtle"] .look--flashy,
html[data-look="flashy"] .look--subtle{ opacity:0 }
html.look-fade .look{ transition:opacity 1.2s var(--e-soft) }

/* Salt glints: in the flashy look a few four-point stars catch the light
   on the water, the jewellery and the gold of each product, one at a time.
   JS places each on its point of the photograph (object-fit aware). */
.glints{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden }
.card__media .glints{ transform:translateX(var(--px, 0%)) scale(1.1) }
.twinkle{
  --z:calc(var(--s, 14px) * 1.7);
  position:absolute; left:-99px; top:-99px; width:var(--z); height:var(--z);
  margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);
  opacity:0;
}
.twinkle::before{
  content:""; position:absolute; inset:-55%; border-radius:50%;
  background:radial-gradient(circle, rgba(255, 236, 196, .75), rgba(255, 214, 140, .25) 34%, rgba(255, 214, 140, 0) 64%);
}
.twinkle::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle, #fff 0 16%, #FFF6E0 26%, rgba(255, 226, 168, .9) 40%, rgba(255, 226, 168, 0) 72%);
  clip-path:polygon(50% 0, 54.5% 45.5%, 100% 50%, 54.5% 54.5%, 50% 100%, 45.5% 54.5%, 0 50%, 45.5% 45.5%);
  filter:drop-shadow(0 0 2px rgba(255, 240, 210, .9));
}
html[data-look="flashy"] .hero .twinkle,
html[data-look="flashy"] .card.is-front .twinkle{ animation:twinkle 4.6s var(--d, 0s) var(--e-soft) infinite }
@keyframes twinkle{
  0%, 100%{ opacity:0; transform:scale(.15) rotate(0deg) }
  10%     { opacity:1; transform:scale(1) rotate(30deg) }
  17%     { opacity:.85; transform:scale(.82) rotate(48deg) }
  27%     { opacity:0; transform:scale(.25) rotate(80deg) }
}
.unit{ text-transform:none; letter-spacing:.06em }

/* Where Maram's own photographs will go. ?final hides the labels. */
.stand-in{
  position:absolute; z-index:6;
  padding:.5em .85em; border:1px solid var(--hair);
  background:rgba(var(--veil), .78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:450 .55rem/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--text);
}
.is-final .stand-in{ display:none }

/* ---------- 4. Nav and bag ---------- */
.nav{
  position:fixed; z-index:50; inset:0 0 auto; height:var(--navh);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--gr) 0 var(--gl);
  color:var(--ink);
  transition:opacity .9s var(--e-out), color .9s var(--e-soft);
}
html.is-opening .nav{ opacity:0; pointer-events:none }
.nav__link, .nav__bag{
  position:relative; padding:.8rem 0;
  font:450 var(--fs-label)/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase;
}
.nav__link{ justify-self:start }
.nav__link::after{
  content:""; position:absolute; left:0; right:var(--tr-label); bottom:.35rem; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--e-out);
}
.nav__link:focus-visible::after{ transform:none }
.nav__mark{ justify-self:center; display:block }
.nav__mark .nav__ma{ height:clamp(2.2rem, 4.6vh, 2.75rem); width:auto }
.nav__bag{ justify-self:end }
.nav__bag [data-cart-count]{ font-variant-numeric:lining-nums tabular-nums }
.nav__bag [data-cart-count]::before{ content:"(" }
.nav__bag [data-cart-count]::after{ content:")" }

.site-scrim{
  position:fixed; inset:0; z-index:610; width:100%; height:100%; opacity:0; visibility:hidden;
  background:rgba(30, 22, 15, .26); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:opacity .5s var(--e-out), visibility .5s; 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(30rem, 100%); height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto; color:var(--ink); background:var(--page);
  box-shadow:-24px 0 70px rgba(42, 30, 20, .14); transform:translate3d(104%, 0, 0);
  visibility:hidden; transition:transform .8s var(--e-out), visibility .8s;
}
.bag-drawer.is-open{ transform:none; visibility:visible }
.bag-drawer > header{ display:flex; align-items:flex-start; justify-content:space-between; padding:2.2rem clamp(1.4rem, 5vw, 2.6rem) 1.6rem; border-bottom:1px solid var(--rule) }
.bag-drawer > header p{ margin-bottom:.45rem; font:450 .6rem/1.3 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--gold-dk) }
.bag-drawer > header h2{ font:300 clamp(2rem, 4vw, 2.5rem)/1 var(--display) }
.bag-drawer > header button{ padding:.55rem 0; font:450 .6rem/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase; border-bottom:1px solid var(--gold) }
.bag-drawer__items{ overflow:auto; overscroll-behavior:contain; padding:0 clamp(1.4rem, 5vw, 2.6rem) }
.bag-empty{ display:grid; place-items:start; align-content:center; min-height:45vh; gap:1.1rem }
.bag-empty p{ font:300 clamp(1.6rem, 4vw, 2.1rem)/1.15 var(--display); color:var(--ink) }
.bag-empty a{ color:var(--gold-dk); font:450 .62rem/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase }
.bag-item{ display:grid; grid-template-columns:4.6rem minmax(0, 1fr) auto; gap:1rem; align-items:center; padding:1.3rem 0; border-bottom:1px solid var(--hair) }
.bag-item img{ width:4.6rem; height:5.8rem; object-fit:cover; background:var(--page-2) }
.bag-item__copy > a{ display:block; font:400 1.1rem/1.2 var(--display); color:var(--ink) }
.bag-item__copy p{ margin:.3rem 0 .45rem; font-size:.74rem; font-variant-numeric:lining-nums }
.bag-item__copy button{ color:var(--gold-dk); font:450 .56rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase }
.bag-item__qty{ align-self:end; display:grid; grid-template-columns:1.7rem 1.6rem 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:.74rem; font-variant-numeric:lining-nums }
.bag-drawer__footer{ padding:1.5rem clamp(1.4rem, 5vw, 2.6rem) 1.8rem; border-top:1px solid var(--rule); background:var(--page-2) }
.bag-drawer__footer > p{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; font:450 .62rem/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase }
.bag-drawer__footer strong{ font:400 1.05rem/1 var(--sans); letter-spacing:.04em; font-variant-numeric:lining-nums; color:var(--ink) }
.bag-drawer__checkout{
  display:flex; align-items:center; justify-content:space-between; padding:1.05rem 1.2rem;
  border:1px solid var(--gold); color:var(--ink);
  font:450 .62rem/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase;
  transition:background-color .5s var(--e-out);
}

.bag-drawer__footer small{ display:block; margin-top:.85rem; font-size:.7rem; line-height:1.5 }

/* ---------- 5. Hero ----------
   The founder at the water, her picture full bleed; the words sit in the
   light above her arm, as on a magazine cover. */
/* The rooms scroll 6.7 screens; the stage is pinned, a full screen tall. */
.rooms{ position:relative; height:calc(var(--stage, 100svh) * 7.7); height:calc(var(--stage, 100svh) * 6.7 + 100lvh) }
.rooms__stage{ position:sticky; top:0; height:var(--stage, 100svh); height:100lvh; overflow:hidden; background:var(--page) }

.hero{ position:absolute; inset:0; z-index:1; overflow:hidden; background:var(--page); transform-origin:50% 60%; will-change:transform }
.hero__media{ position:absolute; inset:0; overflow:hidden }
.hero__media .look img{ object-position:62% 34%; transform:scale(1.001) }
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(var(--veil), .9) 0%, rgba(var(--veil), .7) 22%, rgba(var(--veil), .22) 40%, rgba(var(--veil), 0) 52%),
    linear-gradient(180deg, rgba(var(--veil), .55) 0%, rgba(var(--veil), 0) 16%),
    linear-gradient(0deg, rgba(var(--veil), .5) 0%, rgba(var(--veil), 0) 14%);
  transition:background .9s var(--e-soft);
}
html[data-look="flashy"] .hero__veil{
  background:
    linear-gradient(90deg, rgba(var(--veil), .94) 0%, rgba(var(--veil), .84) 24%, rgba(var(--veil), .34) 42%, rgba(var(--veil), 0) 56%),
    linear-gradient(180deg, rgba(var(--veil), .6) 0%, rgba(var(--veil), 0) 16%),
    linear-gradient(0deg, rgba(var(--veil), .62) 0%, rgba(var(--veil), 0) 15%);
}
.hero__shade{ position:absolute; inset:0; z-index:4; pointer-events:none; background:#3B2A19; opacity:0 }
.hero__copy{
  position:absolute; z-index:3; left:var(--gl);
  top:calc(var(--navh) + clamp(1.5rem, 9.5vh, 6.5rem));
  will-change:transform;
}
.hero__eyebrow{ display:flex; align-items:center; gap:1rem }
.hero__eyebrow::before{ content:""; width:2.6rem; height:1px; background:var(--gold) }
/* The size follows the screen but never outgrows the left half of it: the
   longer line (the italic, with its indent) is about 6.9em. */
.hero__title{
  margin:1.5rem 0 0;
  font:300 min(var(--fs-h1), 6.3vw)/.94 var(--display); letter-spacing:-.016em;
}
/* Each line rises inside its own window. The window reaches well past
   the type on every side (Cormorant's g and y fall about .3em below the
   baseline, the italic leans out to the right) and the negative margins
   give that room back, so the lines keep their set spacing. A line never
   wraps: each is one phrase. */
.line{
  display:block; overflow:hidden; white-space:nowrap;
  padding:.14em .16em .34em .02em; margin:-.14em -.16em -.24em -.02em;
}
.line > span{ display:inline-block }
.hero__title .line--i{ font-style:italic; letter-spacing:-.01em; padding-left:.92em }
.hero__lede{ max-width:23em; margin-top:2rem; font-size:var(--fs-lede); line-height:1.6; text-wrap:balance }
.hero__copy .cta{ margin-top:2.2rem }
.hero__foot{
  position:absolute; z-index:3; left:var(--gl); right:var(--gr); bottom:calc(clamp(1.2rem, 4vh, 2.4rem) + var(--tb));
  display:flex; align-items:flex-end; justify-content:space-between; pointer-events:none;
}
.scroll-cue{ display:flex; align-items:center; gap:1rem; color:var(--ink) }
.scroll-cue i{ position:relative; width:3.6rem; height:1px; overflow:hidden; background:var(--rule) }
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--gold-dk);
  transform:translateX(-100%); animation:cue 2.8s var(--e-io) infinite;
}
@keyframes cue{ 0%{ transform:translateX(-100%) } 55%{ transform:translateX(0) } 100%{ transform:translateX(100%) } }
.hero__place{ color:var(--ink); opacity:.8 }
.hero .stand-in{ right:var(--gr); bottom:calc(clamp(1.2rem, 4vh, 2.4rem) + 2.6rem + var(--tb)) }

/* The review dock has its own lane at the foot of the screen; what would
   sit under it moves up. (?final removes both.) */
html:not(.is-final){ --dock-lane:3.9rem }

/* The hero arrives once the opening has gone: the picture settles, the
   label opens out, each line rises from its own baseline, then the rest. */
html.js .hero__copy > *, html.js .hero__foot{ opacity:0 }
html.js .hero__title .line > span{ transform:translateY(108%) }
html.is-arrived .hero__media .look img{ animation:settle 2.8s var(--e-out) both }
html.is-arrived .hero__eyebrow{ animation:eyebrow 1.6s .1s var(--e-out) both }
html.is-arrived .hero__title{ opacity:1 }
html.is-arrived .hero__title .line > span{ animation:lineUp 1.35s var(--e-out) both }
html.is-arrived .hero__title .line--i > span{ animation-delay:.13s }
/* In metal, the light crosses each line once, just after it has risen.
   (Same element, so one list: the rise must not be replaced by the light.
   Switching look later only adds or drops the light; the rise, already
   played, stays played.) */
html[data-look="flashy"].is-arrived .hero__title .line > span{ animation:lineUp 1.35s var(--e-out) both, metal 2.8s .5s var(--e-out) both }
html[data-look="flashy"].is-arrived .hero__title .line--i > span{ animation-delay:.13s, .72s }
html.is-arrived .hero__lede{ animation:rise 1.2s .42s var(--e-out) both }
html.is-arrived .hero__copy .cta{ animation:rise 1.2s .56s var(--e-out) both }
html.is-arrived .hero__foot{ animation:fade 1.6s .8s var(--e-out) both }
@keyframes settle{ from{ transform:scale(1.075) } to{ transform:scale(1.001) } }
@keyframes eyebrow{ from{ opacity:0; letter-spacing:.62em } to{ opacity:1; letter-spacing:var(--tr-label) } }
@keyframes lineUp{ from{ transform:translateY(108%) } to{ transform:none } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- 6. The arch ----------
   The collection rises over the hero inside a dome that widens and then
   squares off (JS writes its clip-path each frame). A gold hairline runs
   along its edge, like the first light along the rim of the sun. */
.collection{ position:absolute; inset:0; z-index:2; overflow:hidden; background:var(--page); clip-path:inset(100% 50% 0 50%) }
/* A hairline only: a soft glow here would be repainted, blurred, on every
   frame of the rise. Two hairlines (gold, and light just outside it) read
   as the glow without costing one. */
.arch-rim{
  position:absolute; z-index:3; left:0; top:0; pointer-events:none;
  border:1px solid var(--gold-lt); border-bottom:0;
  box-shadow:0 -1px 0 rgba(255, 246, 226, .55);
  opacity:0; will-change:opacity;
}
html[data-look="flashy"] .arch-rim{ border-color:#F3DCA6; box-shadow:0 -1px 0 rgba(255, 249, 232, .8) }

/* ---------- 7. Collection ----------
   Its first screen is a cover: the water, and the title on it. As the
   page goes on the title docks top left (as in the earlier build), a veil
   of paper comes over the water and the four rituals arrive. */
.collection__media{ position:absolute; inset:0; transform-origin:50% 70%; will-change:transform }
.collection__media .look img{ object-position:40% 50% }
.collection__veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 42% 50%, rgba(var(--veil), .74), rgba(var(--veil), .22) 70%, rgba(var(--veil), 0));
}
.collection__paper{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:var(--page) url(/assets/img/e/grain.png) 0 0 / 192px repeat;
}
html[data-look="flashy"] .collection__paper{
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(255, 249, 236, .9), rgba(255, 249, 236, 0) 70%),
    var(--page) url(/assets/img/e/grain.png) 0 0 / 192px repeat;
}

.collection__inner{ position:absolute; inset:0; z-index:2 }
.cover{
  position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center;
  padding:var(--navh) var(--gr) var(--tb) var(--gl); text-align:center; pointer-events:none;
}
/* The size and place of the title on the cover. Never seen: the title
   itself is measured against it. */
.cover__slot{
  display:inline-block; visibility:hidden; text-align:left; white-space:nowrap;
  font:300 var(--fs-h2)/.95 var(--display); letter-spacing:-.016em;
}
.cover__slot span{ display:block }
.cover__slot .i{ font-style:italic; letter-spacing:-.01em; padding-left:.9em }
.cover .label{ margin-bottom:1.8rem }
.cover__sub{ max-width:26em; margin-top:2.1rem; font-size:var(--fs-lede); line-height:1.6; color:var(--text); text-wrap:balance }
.cover .orn{ margin-top:2.2rem }
/* The title is laid out where it docks; JS scales it up into the cover. */
.collection__title{
  position:absolute; z-index:3; left:var(--gl); top:calc(var(--navh) + clamp(.6rem, 3.2vh, 2rem));
  font:300 clamp(2.1rem, 1.3rem + 2.1vw, 3.5rem)/.95 var(--display); letter-spacing:-.016em;
  transform-origin:0 0; white-space:nowrap;
}
.collection__title .i{ display:block; font-style:italic; letter-spacing:-.01em; padding-left:.9em }
.collection__mark{
  position:absolute; z-index:3; left:var(--gut); top:calc(var(--navh) - .3rem); opacity:0;
}

/* ---------- 8. The run ----------
   The four rituals pass one by one, as the page scrolls: the one in front
   is whole, its neighbours wait at the edges. */
.run{ position:absolute; inset:0; z-index:2; pointer-events:none }
.run__track{
  position:absolute; left:0; top:var(--run-top, 24%); height:var(--card-h, 60%);
  display:flex; gap:var(--card-gap, 6vw); list-style:none;
  padding-left:calc(50vw - var(--card-w, 60vw) / 2);
  will-change:transform;
}
.card{ flex:none; width:var(--card-w, 60vw); height:100%; pointer-events:auto; transform-origin:50% 55%; will-change:transform }
.card__inner{
  position:relative; height:100%;
  display:grid; grid-template-columns:var(--media-w, 46%) minmax(0, 1fr);
  background:var(--card); border:1px solid var(--rule);
  box-shadow:0 40px 80px -46px var(--shadow);
  transition:background-color .9s var(--e-soft), border-color .9s, box-shadow .9s;
}
html[data-look="flashy"] .card__inner{
  background:linear-gradient(158deg, #FFFCF5 0%, #FBF1DE 60%, #F6E5C6 100%);
  border-color:rgba(205, 162, 92, .62);
  box-shadow:0 46px 90px -44px var(--shadow), 0 0 0 1px rgba(255, 246, 225, .7) inset;
}
.card__media{ position:relative; overflow:hidden; margin:0; background:var(--page-2) }
.card__media .look img{ transform:translateX(var(--px, 0%)) scale(1.1) }
/* the hairline frame inside the photograph */
.card__media::after{
  content:""; position:absolute; inset:.7rem; z-index:2; pointer-events:none;
  border:1px solid rgba(255, 250, 240, .55);
}
.card__tag{
  position:absolute; z-index:3; left:1.4rem; top:1.35rem; padding:.55em .8em .5em;
  background:rgba(var(--veil), .86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font:450 .56rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  font-variant-numeric:lining-nums;
}
/* One sweep of light across the photograph as it takes the front: a band
   of light that slides (a transform, so the graphics card moves it; no
   blending, which would make every frame of it a repaint). */
.card__sheen{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none }
.card__sheen::before{
  content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:60%;
  background:linear-gradient(105deg, rgba(255, 250, 238, 0) 20%, rgba(255, 250, 238, .26) 50%, rgba(255, 250, 238, 0) 80%);
  transform:translate3d(-110%, 0, 0); opacity:0;
}
html[data-look="flashy"] .card__sheen::before{ background:linear-gradient(105deg, rgba(255, 246, 222, 0) 20%, rgba(255, 246, 222, .42) 50%, rgba(255, 246, 222, 0) 80%) }
.card.is-front .card__sheen::before{ animation:sheen 2.4s .25s var(--e-out) both }
@keyframes sheen{ 0%{ opacity:1; transform:translate3d(-110%, 0, 0) } 85%{ opacity:1 } 100%{ opacity:0; transform:translate3d(190%, 0, 0) } }

.card__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.6rem, 4.6vh, 3.6rem) clamp(1.6rem, 3.6vw, 3.8rem);
  min-width:0;
}
.card__copy > *{ transition:opacity .5s var(--e-soft) }
.card__no{ display:flex; align-items:center; gap:.9rem; font-variant-numeric:lining-nums }
.card__no::after{ content:""; width:2.2rem; height:1px; background:var(--gold) }
.card h3{ margin-top:clamp(1rem, 2.8vh, 1.8rem) }
.card h3 .label{ display:block; margin-bottom:.7rem; color:var(--muted) }
.card__name{ display:block; font:400 var(--fs-name)/1 var(--display); letter-spacing:-.008em }
.card__claims{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem;
  margin-top:clamp(.9rem, 2.2vh, 1.4rem); color:var(--muted); letter-spacing:.24em; font-size:.6rem;
}
.card__claims span + span::before{
  content:""; display:inline-block; width:4px; height:4px; margin-right:.8rem; vertical-align:middle;
  background:var(--gold); transform:rotate(45deg) translateY(-1px);
}
.card__quote{
  margin-top:clamp(1.1rem, 3.2vh, 2rem); max-width:19em;
  font:400 var(--fs-quote)/1.42 var(--display); font-style:italic; color:var(--text);
  text-wrap:balance;
}
.card__buy{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.4rem;
  margin-top:clamp(1.3rem, 3.8vh, 2.4rem); padding-top:clamp(1rem, 2.6vh, 1.5rem); border-top:1px solid var(--rule);
}
.card__price{ font:400 1.02rem/1 var(--sans); letter-spacing:.05em; color:var(--ink); font-variant-numeric:lining-nums }
.card__price span{ margin-left:.7rem; font-weight:300; font-size:.8rem; letter-spacing:.04em; color:var(--muted) }
.add{
  position:relative; padding:.95rem 1.5rem .9rem; border:1px solid var(--gold);
  font:450 var(--fs-label)/1 var(--sans); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink);
  transition:background-color .5s var(--e-out), color .5s var(--e-out), border-color .5s;
}
.add:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--page) }
html[data-look="flashy"] .add{ border-color:transparent; background:linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(100deg, #9C7333, #F2DDA8, #B58A47) border-box }
html[data-look="flashy"] .add:focus-visible{ background:linear-gradient(100deg, #8E652B, #C99F5C 40%, #E9CF95 55%, #A57B3C) border-box; color:#FFFBF2 }
.add.is-added{ color:var(--gold-dk) }

.run__bar{
  position:absolute; left:var(--gl); right:var(--gr); bottom:calc(clamp(1rem, 3.6vh, 2.2rem) + var(--dock-lane, 0px) + var(--tb));
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem, 3vw, 2.6rem);
}
.run__count{ display:flex; align-items:baseline; gap:.6rem; color:var(--ink) }
.run__now{
  position:relative; display:block; height:1em; overflow:hidden;
  font:300 var(--fs-count)/1 var(--display); font-variant-numeric:lining-nums; letter-spacing:.01em;
}
.run__now span{ display:block; transition:transform .9s var(--e-out) }
.run__of{ font-variant-numeric:lining-nums; color:var(--muted) }
.run__line{ position:relative; height:1px; background:var(--hair) }
.run__line i{ position:absolute; inset:0; background:var(--gold); transform-origin:0 50%; transform:scaleX(var(--p, 0)) }
.run__name{ color:var(--ink); min-width:14em; text-align:right }
.run__name span{ display:inline-block; transition:opacity .45s var(--e-soft), transform .6s var(--e-out) }
.run__name.is-swap span{ opacity:0; transform:translateY(6px) }

/* What moves while the page scrolls is drawn once and then moved by the
   graphics card, not repainted: every layer that fades or slides with the
   scroll is its own. (Not the docking title: it is scaled, and a scaled
   layer would be a blurred one; it is repainted crisp instead.) */
.hero__shade, .collection__paper, .run, .run__bar, .card__copy, .card__media{ will-change:opacity }
.cover{ will-change:opacity, transform }
.collection__inner, .card__media .look img, .card__media .glints{ will-change:transform }

/* ---------- 9. Closing ----------
   It slides up over the last ritual, the way the rooms join on
   mdebeauty.com: the one below holds still while this one arrives. */
.closing{
  position:relative; z-index:5;
  height:var(--stage, 100svh); height:100lvh;
  margin-top:calc(var(--stage, 100svh) * -1); margin-top:-100lvh;
  display:grid; place-content:center; justify-items:center; gap:0; text-align:center;
  padding:var(--navh) var(--gr) calc(clamp(2rem, 6vh, 3.4rem) + var(--tb)) var(--gl);
  background:var(--page-2) url(/assets/img/e/grain.png) 0 0 / 192px repeat; color:var(--text);
  box-shadow:0 -30px 60px -40px var(--shadow);
}
.closing__ma{ width:clamp(5.6rem, 9vw, 7.6rem); margin-bottom:2.4rem }
.closing__ma img{ width:100%; height:auto }
.closing__line{ font:300 clamp(2.4rem, 1.4rem + 3.2vw, 4.6rem)/1.02 var(--display); letter-spacing:-.012em; color:var(--ink) }
.closing__line em{ font-style:italic }
.closing .orn{ margin:2.2rem 0 1.6rem }
.closing__contact{ margin-top:1.6rem; font-size:.86rem; letter-spacing:.03em }
.closing__contact a{ border-bottom:1px solid transparent; transition:border-color .5s }
.closing__contact a:focus-visible{ border-color:var(--gold) }
.closing__legal{ position:absolute; left:var(--gl); right:var(--gr); bottom:calc(clamp(1.2rem, 3.6vh, 2rem) + var(--dock-lane, 0px) + var(--tb)); font-size:.66rem; letter-spacing:.06em; color:var(--muted) }

/* ---------- 10. Review dock ----------
   For the review only (hidden with ?final): which opening, which look,
   and play the opening again. */
.dock{
  position:fixed; z-index:60; left:50%; bottom:calc(clamp(.8rem, 2.6vh, 1.4rem) + var(--sb)); transform:translate(-50%, 0);
  display:flex; align-items:stretch; gap:0;
  padding:.3rem; border:1px solid rgba(173, 139, 85, .45); border-radius:999px;
  background:rgba(28, 21, 15, .78); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  color:#F4EBDD; box-shadow:0 18px 40px -18px rgba(20, 12, 6, .5);
  font:450 .6rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  transition:opacity .8s var(--e-out), transform .8s var(--e-out);
}
html.is-opening .dock{ opacity:0; transform:translate(-50%, 1rem); pointer-events:none }
.is-final .dock{ display:none }
.dock > *{ display:flex; align-items:center }
.dock__film{ gap:.15rem; padding:0 .4rem 0 .2rem }
.dock__film p{ display:grid; gap:.42rem; padding:0 .55rem; min-width:12.5rem; text-align:center }
.dock__k{ color:rgba(244, 235, 221, .6); font-size:.52rem; letter-spacing:.24em; font-variant-numeric:lining-nums }
.dock__v{ font:400 1.02rem/1 var(--display); letter-spacing:.02em; text-transform:none; color:#FBF3E4 }
.dock__step{ width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; font:300 1.1rem/1 var(--display); color:#F4EBDD; transition:background-color .4s }
.dock__step:focus-visible{ background:rgba(244, 235, 221, .12) }
.dock__look{ position:relative; margin:0 .25rem; padding:.2rem; border-radius:999px; background:rgba(244, 235, 221, .08) }
.dock__look button{ position:relative; z-index:1; padding:.85rem 1.15rem .8rem; border-radius:999px; letter-spacing:.22em; color:rgba(244, 235, 221, .66); transition:color .6s var(--e-out) }
.dock__look button[aria-pressed="true"]{ color:#2A1D12 }
.dock__thumb{
  position:absolute; z-index:0; top:.2rem; bottom:.2rem; left:.2rem; width:var(--tw, 50%); border-radius:999px;
  background:linear-gradient(100deg, #E7D3A6, #F8EBCB 50%, #D9BC86);
  transform:translateX(var(--tx, 0)); transition:transform .7s var(--e-out), width .7s var(--e-out);
}
.dock__replay{ gap:.55rem; padding:0 1.1rem 0 .9rem; border-left:1px solid rgba(244, 235, 221, .14); color:#F4EBDD; transition:color .4s }
.dock__replay svg{ width:.85rem; height:.85rem; fill:none; stroke:currentColor; stroke-width:1.3 }
.dock__replay:focus-visible{ color:var(--gold-lt) }

/* ---------- 11. Look change ----------
   With view transitions the new look opens out of the toggle in a circle
   (a ring on water); without them, the pictures cross-dissolve. */
::view-transition-old(root), ::view-transition-new(root){ animation:none; mix-blend-mode:normal }
::view-transition-new(root){ z-index:2 }

/* ---------- The opening ---------- */
.opening{ position:fixed; inset:0; z-index:900; overflow:hidden; pointer-events:auto }
.opening__frame{
  position:absolute; inset:0; overflow:hidden;
  background:#0d0a07 var(--film-poster, none) 50% 50% / cover no-repeat;
}
.opening__film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  opacity:0; transition:opacity .6s var(--e-soft);
}
.opening.is-playing .opening__film{ opacity:1 }
.opening__frame::after{ content:""; position:absolute; inset:0; background:#120c07; opacity:0; transition:opacity 2s var(--e-soft) }
.opening.is-revealing .opening__frame{
  -webkit-mask-image:radial-gradient(circle at 50% 100%, transparent calc(var(--hole) - 1.5px), #000 calc(var(--hole) + .5px));
          mask-image:radial-gradient(circle at 50% 100%, transparent calc(var(--hole) - 1.5px), #000 calc(var(--hole) + .5px));
}
.opening.is-revealing .opening__film{ transform:scale(1.05); transition:opacity .6s, transform var(--reveal-t, 2s) var(--e-soft) }
.opening.is-revealing .opening__frame::after{ opacity:.28 }
.opening__ring{
  position:absolute; left:50%; top:100%; width:calc(var(--hole) * 2 + 2px); height:calc(var(--hole) * 2 + 2px);
  transform:translate(-50%, -50%); border-radius:50%; pointer-events:none;
  border:1px solid rgba(255, 238, 202, .95);
  box-shadow:0 0 26px 3px rgba(255, 223, 160, .55), inset 0 0 28px 2px rgba(255, 238, 202, .4);
  opacity:0;
}
.opening.is-revealing .opening__ring{ animation:ring var(--reveal-t, 2s) linear both }
@keyframes ring{ 0%{ opacity:0 } 8%{ opacity:1 } 70%{ opacity:.9 } 100%{ opacity:0 } }
.opening__skip{
  position:absolute; z-index:3; right:max(clamp(1rem, 3vw, 2.4rem), env(safe-area-inset-right, 0px)); bottom:calc(clamp(.8rem, 3vh, 1.8rem) + var(--sb));
  padding:.8rem .3rem; color:rgba(255, 246, 230, .82);
  font:450 .6rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(40, 24, 8, .45);
  transition:opacity .5s, color .4s;
}
.opening__skip:focus-visible{ color:#fff }
/* When the phone will not start the film by itself (Low Power Mode, Data
   Saver): one quiet invitation in the middle of the first frame. */
.opening__play{
  position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%, -50%);
  display:grid; justify-items:center; gap:1.1rem; padding:1.2rem 1.4rem;
  color:#FFF8EC; font:450 .64rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  text-shadow:0 1px 14px rgba(40, 24, 8, .55);
  opacity:0; transition:opacity .7s var(--e-out);
}
.opening__play[hidden]{ display:none }
.opening.is-asking .opening__play{ opacity:1 }
.opening__play i{
  position:relative; width:4.6rem; height:4.6rem; border-radius:50%;
  border:1px solid rgba(255, 238, 202, .92); background:rgba(26, 17, 8, .2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 0 34px rgba(255, 220, 160, .38);
}
.opening__play i::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-36%, -50%);
  border-style:solid; border-width:.55rem 0 .55rem .92rem; border-color:transparent transparent transparent #FFF6E4;
}
.opening__play span{
  padding:.75em 1.1em .7em 1.4em; border-radius:999px; white-space:nowrap;
  background:rgba(26, 17, 8, .38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  text-shadow:none;
}
.opening__time{
  position:absolute; z-index:3; left:0; bottom:0; width:100%; height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255, 236, 196, 0), rgba(255, 236, 196, .85));
  transform-origin:0 50%; transform:scaleX(var(--t, 0)); opacity:.55;
}
.opening.is-revealing .opening__skip, .opening.is-revealing .opening__time{ opacity:0 }

/* Hover belongs to a mouse. On a phone a tap would leave these "hovered"
   (Safari keeps :hover after a tap), so they exist only where there is a
   pointer that can hover. */
@media (hover: hover){
  .nav__link:hover::after{ transform:none }
  .cta:hover::after{ transform:scaleX(1.55) }
  .bag-drawer__checkout:hover{ background:var(--page) }
  .add:hover{ background:var(--ink); border-color:var(--ink); color:var(--page) }
  html[data-look="flashy"] .add:hover{ background:linear-gradient(100deg, #8E652B, #C99F5C 40%, #E9CF95 55%, #A57B3C) border-box; color:#FFFBF2 }
  .closing__contact a:hover{ border-color:var(--gold) }
  .dock__step:hover{ background:rgba(244, 235, 221, .12) }
  .dock__replay:hover{ color:var(--gold-lt) }
  .opening__skip:hover{ color:#fff }
}

/* Fingers: every control is at least 44 points (Apple) / 48dp-ish
   (Android) to touch, without changing how it looks. */
@media (pointer: coarse){
  .nav__link, .nav__bag{ display:inline-flex; align-items:center; min-height:44px }
  .nav__bag{ gap:.45em }
  .cta{ min-height:44px }
  .add{ display:inline-flex; align-items:center; min-height:44px }
  .dock__step{ width:2.75rem; height:2.75rem }
  .dock__look button{ min-height:2.6rem }
  .dock__replay{ min-height:2.75rem }
  .opening__skip{ min-height:44px; padding:1rem .7rem }
  .bag-drawer > header button{ min-height:44px }
  .bag-item__qty{ grid-template-columns:2.4rem 1.8rem 2.4rem }
  .bag-item__qty button{ min-height:2.4rem }
  .closing__contact a{ display:inline-block; padding:.7rem 0 }
}

/* ---------- 12. Phones and tablets ----------
   Three cases. Any small screen: tighter gutters, a smaller nav and dock.
   Portrait (a phone held upright, a small tablet): the rooms stack, the
   picture above and the words below. Landscape on a phone: the desktop
   arrangement, made compact for a screen about 390 points tall. */
@media (max-width: 899px){
  :root{ --gut:1.35rem; --navh:4.1rem; --fs-label:.66rem }
  .nav__mark .nav__ma{ height:2.05rem }
  .dock{ max-width:calc(100vw - 1.2rem); font-size:.54rem }
  .dock__film p{ min-width:7.6rem; padding:0 .2rem }
  .dock__v{ font-size:.92rem }
  .dock__k b{ display:none }
  .dock__look button{ padding:.8rem .75rem .75rem; letter-spacing:.16em }
  .dock__replay{ padding:0 .8rem }
  .dock__replay span{ display:none }
  .closing__legal{ text-align:center }
  /* the dock would sit over the counter while the rituals run */
  html.in-run .dock{ opacity:0; transform:translate(-50%, 1rem); pointer-events:none }
  html:not(.is-final){ --dock-lane:0px }
}

@media (max-width: 899px) and (orientation: portrait){
  /* The founder's picture is the top two thirds; the words sit below it
     on the paper, centred. */
  .hero__media{ inset:0 0 auto; height:64%; -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 72%, transparent 100%) }
  .hero__media .look img{ object-position:50% 30% }
  .glints--hero{ inset:0 0 auto; height:64% }
  .hero__veil{ background:linear-gradient(180deg, rgba(var(--veil), .5) 0%, rgba(var(--veil), 0) 14%) }
  html[data-look="flashy"] .hero__veil{ background:linear-gradient(180deg, rgba(var(--veil), .55) 0%, rgba(var(--veil), 0) 14%) }
  .hero__copy{ left:var(--gl); right:var(--gr); top:auto; bottom:calc(clamp(4.4rem, 11vh, 6rem) + var(--tb) + var(--sb)); text-align:center }
  .hero__eyebrow{ justify-content:center }
  .hero__eyebrow::before{ display:none }
  .hero__title{ margin-top:1rem; font-size:clamp(2.5rem, 11.4vw, 3.4rem) }
  .hero__title .line--i{ padding-left:0 }
  .hero__lede{ margin:1.1rem auto 0; max-width:21em; font-size:1rem }
  .hero__copy .cta{ margin-top:.9rem }
  .hero__foot{ justify-content:center; bottom:calc(1.1rem + var(--tb) + var(--sb)) }
  .hero__place{ display:none }
  .hero .stand-in{ top:calc(var(--navh) + .3rem); bottom:auto; right:var(--gr); font-size:.5rem; letter-spacing:.16em }

  .cover{ padding-top:calc(var(--navh) + 1rem) }
  .cover .label{ margin-bottom:1.2rem }
  .cover__slot{ font-size:clamp(2.9rem, 12.6vw, 3.6rem) }
  .cover__sub{ max-width:19em; font-size:1rem }
  .collection__title{ font-size:clamp(1.9rem, 8.6vw, 2.4rem) }
  .collection__veil{ background:radial-gradient(ellipse 90% 52% at 50% 50%, rgba(var(--veil), .78), rgba(var(--veil), .2) 74%, rgba(var(--veil), 0)) }

  .card__inner{ grid-template-columns:1fr; grid-template-rows:var(--media-h, 52%) minmax(0, 1fr) }
  .card__media::after{ inset:.5rem }
  .card__tag{ left:1rem; top:1rem }
  .card__copy{ justify-content:flex-start; padding:1.05rem 1.15rem 1.1rem }
  .card__no{ display:none }
  .card h3{ margin-top:0 }
  .card h3 .label{ margin-bottom:.4rem; font-size:.58rem }
  .card__name{ font-size:clamp(1.75rem, 8vw, 2.2rem) }
  .card__claims{ display:none }
  .card__quote{ margin-top:.55rem; font-size:1.08rem; line-height:1.36 }
  .card__buy{ margin-top:auto; padding-top:.8rem; gap:.6rem }
  .card__price{ font-size:.94rem }
  .add{ padding:.85rem 1.05rem .8rem; font-size:.6rem }

  .run__bar{ grid-template-columns:auto 1fr; bottom:calc(1rem + var(--tb) + var(--sb)) }
  .run__name{ display:none }
}

/* A phone on its side: about 390 points of height. The desktop
   arrangement, every vertical measure tightened; the collection's title
   steps aside once docked, so the rituals can use the whole height. */
@media (orientation: landscape) and (max-height: 520px){
  :root{ --navh:3.3rem; --fs-label:.62rem }
  .nav__mark .nav__ma{ height:1.75rem }
  .hero__copy{ top:calc(var(--navh) + .3rem) }
  .hero__title{ margin-top:.7rem; font-size:min(var(--fs-h1), 6.3vw, 13.5vh) }
  .hero__lede{ margin-top:.8rem; max-width:21em; font-size:.92rem; line-height:1.5 }
  .hero__copy .cta{ margin-top:.3rem }
  .hero__foot, .hero .stand-in{ display:none }

  .cover{ padding-top:var(--navh) }
  .cover .label{ margin-bottom:.7rem }
  .cover__slot{ font-size:min(var(--fs-h2), 18vh) }
  .cover__sub, .cover .orn{ display:none }
  .collection__title{ font-size:min(clamp(2.1rem, 1.3rem + 2.1vw, 3.5rem), 9vh) }

  .card__copy{ padding:.9rem clamp(1rem, 3vw, 1.8rem) }
  .card__no, .card__claims{ display:none }
  .card h3{ margin-top:0 }
  .card h3 .label{ margin-bottom:.35rem }
  .card__name{ font-size:min(var(--fs-name), 9vh) }
  .card__quote{ margin-top:.5rem; font-size:min(var(--fs-quote), 5vh); line-height:1.35 }
  .card__buy{ margin-top:.8rem; padding-top:.7rem }
  .card__tag{ left:.9rem; top:.9rem }
  .card__media::after{ inset:.45rem }

  .run__bar{ bottom:calc(.55rem + var(--tb) + var(--sb)) }
  .run__now{ font-size:2.1rem }
  html:not(.is-final){ --dock-lane:0px }
  html.in-run .dock{ opacity:0; transform:translate(-50%, 1rem); pointer-events:none }

  .closing__ma{ width:3.6rem; margin-bottom:1rem }
  .closing__line{ font-size:min(clamp(2.4rem, 1.4rem + 3.2vw, 4.6rem), 11vh) }
  .closing .orn{ margin:1rem 0 .7rem }
  .closing__contact{ margin-top:.6rem }
  .closing__legal{ bottom:calc(.6rem + var(--tb) + var(--sb)) }
}

@media (prefers-reduced-motion: reduce){
  html.is-arrived .hero__media .look img, html.is-arrived .hero__eyebrow, html.is-arrived .hero__title .line > span,
  html.is-arrived .hero__lede, html.is-arrived .hero__copy .cta, html.is-arrived .hero__foot{ animation-duration:.01s; animation-delay:0s }
  html[data-look="flashy"] .metal{ animation:none }
  .scroll-cue i::after{ animation:none; transform:none }
  .card.is-front .card__sheen::before{ animation:none }
}