/* OLEA. Clean botanical skincare. Site styles.
   Register: editorial clean beauty. PP Mori + Editorial New. Fluid rem (1920 base desktop, 375 base mobile).
   No em dashes anywhere in this file. */

:root {
  --ink: #3b3b3b;
  --ink-2: #232323;
  --ink-3: #222;
  --gray2: #767676;
  --gray3: #787878;
  --line: #c8c8c8;
  --line-2: #d8d8d8;
  --card: #f5f5f5;
  --blush: #f3e8e7;
  --bone: #f2ede5;
  --pink: #f0c8ca;
  --sand: #d5c9ba;
  --dot: #e39ba0;
  --white: #fff;
  --ease: cubic-bezier(.18, .71, .11, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --sans: "PP Mori", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Editorial New", Georgia, "Times New Roman", serif;
  --gutter: 4.2rem;
  --fs-s: max(.8rem, 12px);
  --fs-xs: max(.75rem, 11.5px);
}

@font-face { font-family: "PP Mori"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/PPMori-Regular.woff2) format("woff2"); }
@font-face { font-family: "PP Mori"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/PPMori-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Editorial New"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/EditorialNew-Italic.woff2) format("woff2"); }

/* Fluid rem: 16px at 1920, 12px at 1440, clamped. Mobile: 14px at 375. */
html { font-size: clamp(11px, .833333vw, 18px); scroll-behavior: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
@media (max-width: 767.98px) { html { font-size: clamp(13px, 3.73333vw, 16px); } :root { --gutter: 1.2rem; } }

body { background: var(--white); color: var(--ink); font-family: var(--sans); font-size: max(1rem, 12.5px); line-height: 1.2; overflow-x: hidden; }
h1, h2, h3, h4, h5, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
img { display: block; }
p { line-height: 1.4; }
h1, h2 { font-family: var(--sans); font-size: 4.5rem; font-weight: 600; letter-spacing: 0; line-height: 1.1; text-transform: uppercase; }
h3, h4, h5 { font-weight: 400; }
.ico { width: 1.25em; height: 1.25em; display: block; }

/* Focus + touch targets */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
.footer__email input:focus-visible { outline-offset: 2px; }
@media (hover: none) {
  .navbar-hamburger, .product-card__quick, .qty button, .cart__close, .modal__close, .slider-arrow, .cart__item-remove, .footer__copyright-links button { min-width: 44px; min-height: 44px; }
  .qty { padding: .15rem .3rem; }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Utilities */
.container { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.text-underline { text-decoration: underline; text-underline-offset: .15em; }
.text-gray2 { color: var(--gray2); }
.text-gray3 { color: var(--gray3); }
.font-small { display: block; font-size: var(--fs-s); font-weight: 400; letter-spacing: 0; }
.font-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; text-transform: none; }
.maxwidth { max-width: 24rem; }
.maxwidth-0 { max-width: 20rem; margin-inline: auto; }
/* a link that is really a button still has to sit on the same baseline as its siblings */
button.link { padding: 0; text-align: left; display: inline-block; }
.link { position: relative; }
.link::after { content: ""; position: absolute; left: 0; bottom: -.15em; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.pill, .pill-fill { display: inline-block; border-radius: 5rem; font-size: var(--fs-s); line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.pill { border: 1px solid var(--line); padding: .6rem 2rem .4rem; }
.pill-fill { background: var(--white); color: var(--ink); padding: .8rem 2rem .6rem; }
.rule-wrap { padding: 0; }
.rule { height: 1px; background: var(--line-2); width: 100%; }
.rule--light { background: var(--gray3); opacity: .6; margin: 6rem 0 4rem; }
.masking-text { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.masking-text .line { display: block; will-change: transform; }

.btn { background: var(--ink); border-radius: 5rem; color: var(--white); cursor: pointer; display: inline-block; padding: 1.5rem 3rem; text-transform: uppercase; font-size: var(--fs-s); letter-spacing: .04em; transition: background .4s var(--ease), transform .3s var(--ease); }
.btn:hover { background: #000; transform: translateY(-1px); }
.btn__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; background: var(--white); color: var(--ink); border-radius: 5rem; font-size: var(--fs-s); padding: 1.5rem 4rem; text-decoration: underline; text-underline-offset: .15em; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--line); }
.btn__icon-arrow { position: absolute; right: 0; top: 50%; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; transform: translate(-25%, -50%); transition: transform .3s var(--ease); }
.btn__icon:hover .btn__icon-arrow { transform: translate(-25%, -50%) scale(1.1); }
.icon-global { display: flex; align-items: center; width: 100%; max-width: 20rem; border: 1px solid var(--line); border-radius: 5rem; padding: .65rem .5rem; text-align: center; text-decoration: underline; text-underline-offset: .15em; font-size: var(--fs-s); letter-spacing: .04em; }
.icon-global span:first-child { flex: 1; margin-left: 2rem; }
.icon-global-right { width: 3rem; height: 3rem; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; transition: transform .3s var(--ease); }
.icon-global:hover .icon-global-right { transform: scale(1.1); }
.arrowlong { width: 5rem; height: 5rem; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; transition: transform .3s var(--ease), background-color .8s var(--ease), color .8s var(--ease); }
.arrowlong .ico { width: 1.6rem; height: 1.6rem; transition: transform .5s var(--ease); }
.arrowlong.white { background: var(--white); color: var(--ink); }
.icon-clone { display: inline-flex; align-items: center; gap: 1rem; font-size: var(--fs-s); letter-spacing: .04em; text-align: left; }
.icon-clone:hover .arrowlong { transform: scale(1.1); }
.icon-clone:hover .arrowlong .ico { transform: translate(18%, -18%); }
.text-underline-border { position: relative; }
.text-underline-border::after { content: ""; position: absolute; left: 0; bottom: 12%; width: 100%; height: .035em; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.text-underline-border.active::after { transform: scaleX(1); }

/* Wordmark: same object at two sizes. Every internal measure in em so one ratio is the whole FLIP. */
.wordmark { display: inline-flex; align-items: center; gap: .16em; font-family: var(--sans); font-weight: 600; letter-spacing: .16em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.wordmark__t { display: block; line-height: 1; }
.wordmark__dot { display: block; width: .3em; height: .3em; border-radius: 50%; background: var(--dot); flex: none; margin-top: .22em; }
.wordmark--footer { font-size: 1.6rem; color: var(--ink); }

/* ---------------- Loader: bone curtain, clip contract ---------------- */
.loader {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem;
  background: radial-gradient(90% 70% at 50% -10%, rgba(243, 232, 231, .9) 0%, rgba(243, 232, 231, 0) 60%), var(--white);
  color: var(--ink);
  clip-path: circle(150% at var(--cx, 50%) var(--cy, 46%));
  animation: ldFailsafe 0s linear 6000ms forwards;
}
.loader.is-leaving { pointer-events: none; }
.loader.gone, .loader.is-gone { display: none; }
.loader.is-closing { clip-path: circle(0% at var(--cx, 50%) var(--cy, 46%)); transition: clip-path .54s cubic-bezier(.65, 0, .35, 1); }
@keyframes ldFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader__mark { font-size: clamp(3rem, 9vw, 7.6rem); color: var(--ink); animation: ldMark .9s var(--ease-out) both; }
.loader.is-armed .loader__mark { animation: none; }
.loader.is-armed .loader__mark .wordmark__t { display: inline-flex; overflow: hidden; line-height: 1.1; }
.ld-l { display: inline-block; will-change: transform; }
@keyframes ldMark { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
.loader__chrome { font-size: var(--fs-s); letter-spacing: .18em; text-transform: uppercase; color: var(--gray3); animation: ldChrome .8s var(--ease-out) .25s both; }
@keyframes ldChrome { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.loader__meter { display: flex; align-items: center; gap: 1.2rem; }
.loader__bar { position: relative; display: block; width: min(220px, 42vw); height: 1px; background: rgba(59, 59, 59, .16); overflow: hidden; }
.loader__bar i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--ink); transition: width .12s linear; }
.loader__count { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; color: var(--ink); }
.loader__foot { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .loader { display: none !important; } }

/* ---------------- Header ---------------- */
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 300; transition: background 1s var(--ease), transform .8s var(--ease), box-shadow 1s var(--ease); }
#header.is--hidden { transform: translateY(-100%); }
#header.active { background: var(--white); }
#header.is-flying { z-index: 950; pointer-events: none; }
#header.is-booting .navbar-menu-list, #header.is-booting .navbar-cta, #header.is-booting .navbar-hamburger { opacity: 0; transform: translateY(-8px); pointer-events: none; }
html:not(.js) #header.is-booting .navbar-menu-list, html:not(.js) #header.is-booting .navbar-cta, html:not(.js) #header.is-booting .navbar-hamburger { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) #header { position: absolute; }
html:not(.js) .navbar-hamburger { display: none !important; }
html:not(.js) .navbar-menu { position: static !important; transform: none !important; pointer-events: auto !important; opacity: 1 !important; background: transparent !important; padding: 0 !important; height: auto !important; display: flex; flex-direction: row; }
html:not(.js) .navbar-menu-foot { display: none !important; }
html:not(.js) .navbar-menu-list { flex-direction: row !important; gap: 1.2rem !important; flex-wrap: wrap; }
html:not(.js) .navbar-menu-list a { font-size: var(--fs-s) !important; font-weight: 400 !important; color: var(--white) !important; }
.navbar-menu-list, .navbar-cta, .navbar-hamburger { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; position: relative; }
.navbar-logo { font-size: 1.8rem; color: var(--ink); position: relative; z-index: 2; transition: color .16s linear; will-change: transform; }
#header.is--white .navbar-logo { color: var(--white); }
#header.is--white .navbar-logo.on-bone, #header.menu-open .navbar-logo { color: var(--ink); }
.navbar-menu-list { display: flex; gap: 3rem; }
.navbar-menu-list a { display: block; font-size: var(--fs-s); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); position: relative; transition: color 1s var(--ease); }
.navbar-menu-list a::after { content: ""; position: absolute; left: 0; bottom: -.3em; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.navbar-menu-list a:hover::after { transform: scaleX(1); transform-origin: left; }
#header.is--white .navbar-menu-list a { color: var(--white); }
.navbar-menu-foot { display: none; }
.navbar-cta { position: relative; z-index: 2; }
.navbar-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #333; color: var(--white); transition: background 1s var(--ease), color 1s var(--ease), transform .3s var(--ease); }
.navbar-cart:hover { transform: scale(1.06); }
.navbar-cart .ico { width: 1.4rem; height: 1.4rem; }
#header.is--white .navbar-cart { background: var(--white); color: #333; }
#header.menu-open .navbar-cart { background: #333; color: var(--white); }
.navbar-cart__count { position: absolute; top: -.3rem; right: -.3rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 1rem; background: var(--dot); color: var(--white); font-size: max(.7rem, 10px); font-weight: 600; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .4s var(--ease-out); }
.navbar-cart__count.is-visible { transform: scale(1); }
.navbar-cart__count.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.navbar-hamburger { display: none; position: relative; z-index: 2; width: 2.6rem; height: 2.6rem; flex-direction: column; justify-content: center; gap: 6px; padding: 0; }
.navbar-hamburger-line { display: block; width: 100%; height: 1.5px; background: var(--ink); transition: transform .45s var(--ease-io), background-color .3s ease; transform-origin: center; }
#header.is--white .navbar-hamburger-line { background: var(--white); }
#header.menu-open .navbar-hamburger-line { background: var(--ink); }
#header.menu-open .navbar-hamburger-line:first-child { transform: translateY(3.75px) rotate(45deg); }
#header.menu-open .navbar-hamburger-line:last-child { transform: translateY(-3.75px) rotate(-45deg); }
body.no-scroll { overflow: hidden; }

/* ---------------- Hero ---------------- */
.intro { position: relative; height: 100vh; height: 100svh; min-height: 34rem; display: flex; align-items: center; justify-content: center; background: var(--blush); overflow: hidden; margin: 0; padding: 0 15px; }
.intro__image { position: absolute; inset: 0; }
.overlay-black { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .14) 45%, rgba(0, 0, 0, .3)); z-index: 2; }
.parallax { position: relative; overflow: hidden; }
.parallax-image { display: block; width: 100%; height: 120%; position: relative; top: -10%; will-change: transform; backface-visibility: hidden; }
.parallax-image img { width: 100%; height: 100%; object-fit: cover; }
.intro__image .parallax { position: absolute; inset: 0; }
.intro__image .parallax-image { height: 112%; top: 0; }
/* The reference hero was slow-motion video. The still gets a slow scale drift so the surface keeps breathing. */
.intro__image .parallax-image img { animation: heroDrift 18s ease-in-out infinite alternate; transform-origin: 50% 60%; will-change: transform; }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .intro__image .parallax-image img { animation: none; } }
.intro__text { position: relative; z-index: 3; margin-bottom: 26vh; text-align: center; color: var(--white); }
.intro__title { color: var(--white); font-size: 6.5rem; line-height: 1; text-transform: none; font-weight: 600; }
.intro__title .font-serif { font-weight: 400; }
.intro__desc { color: var(--white); margin: 1.5rem auto 0; max-width: 24rem; font-size: 1rem; }
.intro__cta { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; width: min(21rem, 54vw); padding: 2.4rem 1.6rem 1.9rem; border-radius: 11rem 11rem 0 0; background: rgba(255, 255, 255, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--ink); text-align: center; transition: padding-bottom .5s var(--ease), background-color .5s var(--ease); }
.intro__cta:hover { padding-bottom: 2.7rem; background: var(--white); }
.intro__cta-text { font-size: var(--fs-s); letter-spacing: .06em; text-decoration: underline; text-underline-offset: .15em; }
.intro__cta-arrow { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; transition: transform .5s var(--ease); }
.intro__cta:hover .intro__cta-arrow { transform: translateY(5px) scale(1.06); }

/* ---------------- Values ---------------- */

/* ---------------- Explore / shop ---------------- */
.explore { padding: 6rem 0 0; position: relative; }
.explore__title { line-height: 1; margin-bottom: 8rem; }
.explore__hint + .explore__cta { margin-top: 0; }
.explore__title .font-serif { display: block; font-size: 1.4em; letter-spacing: -.04em; line-height: 1; }
.explore__hint { position: relative; height: 0; }
.explore__blurb { position: absolute; left: 67%; top: -13.5rem; width: 15rem; padding: 1.4rem 1.6rem; border-radius: 14px; background: var(--card); font-size: var(--fs-xs); line-height: 1.45; text-align: center; color: var(--ink); }
.explore__hint-arrow { position: absolute; right: 4%; top: -9rem; width: 1.6rem; height: 1.6rem; color: var(--ink); }
/* --col-pad is the column gutter as an absolute length, so the rail can reach back out to the page edge */
.half { --col-pad: calc(4vw + .75rem); display: flex; align-items: center; justify-content: space-between; width: 100%; height: 120vh; min-height: 65rem; overflow: hidden; }
.half__content, .half__img { width: 50%; min-width: 0; }
.half__img { height: 100%; }
.half__img .parallax-image { height: 120%; }
.half__content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; max-height: 52rem; padding: 0 var(--col-pad); }
.half__text { display: flex; align-items: flex-end; justify-content: space-between; }
.half__title { font-family: var(--sans); font-size: 4rem; font-weight: 400; letter-spacing: 0; line-height: 1 !important; max-width: 20rem; text-transform: none; }
.half__title .font-serif { font-size: 1.1em; }
.slider-arrow { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; transition: transform .3s var(--ease), opacity .3s; }
.slider-arrow:hover { transform: scale(1.1); }
.slider-arrow.is-disabled { opacity: .35; pointer-events: none; }
.slider-nav { display: flex; align-items: center; gap: .8rem; flex: none; }
.slider-arrow--prev { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.slider-arrow--prev .ico { transform: rotate(180deg); }
.slider-count { font-size: var(--fs-s); font-variant-numeric: tabular-nums; color: var(--gray3); letter-spacing: .06em; min-width: 4.2em; text-align: center; }
.half__note { font-size: var(--fs-s); letter-spacing: .04em; max-width: 22rem; }
.half__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }

/* ---------- Product rails: native scroll snapping, no carousel library ----------
   The track is a real overflow-x scroller, so momentum, keyboard and accessibility come from
   the platform. It is widened outward by exactly one column pad so the row still runs off the
   page edge the way the reference does, with no clip-path needed. */
.slider__track { position: relative; z-index: 1; display: flex; gap: var(--rail-gap); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.slider__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.slider__track.is-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.slider__track > * { scroll-snap-align: start; flex: 0 0 calc((100% - var(--rail-bleed) - var(--rail-gap)) / 2); min-width: 0; }
.slider { --rail-gap: 15px; --rail-bleed: 0px; position: relative; margin: 2rem 0; }
/* :not is load-bearing: .half--rev carries .half too, and both margins would double the box */
#explore .half:not(.half--rev) .slider__track { margin-right: calc(-1 * var(--col-pad)); }
#explore .half--rev .slider__track { margin-left: calc(-1 * var(--col-pad)); direction: rtl; }
#explore .half--rev .slider__track > * { direction: ltr; }
#explore .half .slider, #explore .half--rev .slider { --rail-bleed: var(--col-pad); }

/* The card that ends every rail. Reaching the end IS the invitation, and it is a button, not a gesture. */
.card-all { justify-content: space-between; gap: 1.6rem; text-align: left; background: var(--ink); color: var(--white);
  padding: 1.7rem 1.4rem; isolation: isolate; transition: color .55s var(--ease); }
.card-all__fill { position: absolute; inset: 0; z-index: -1; background: var(--pink); transform: translateY(101%);
  transition: transform .6s var(--ease); }
.card-all:hover { color: var(--ink); }
.card-all:hover .card-all__fill { transform: translateY(0); }
.card-all__eyebrow { font-size: var(--fs-xs); letter-spacing: .16em; opacity: .7; }
.card-all__title { font-size: 2.1rem; line-height: 1.02; letter-spacing: -.01em; }
.card-all__title .font-serif { font-size: 1.12em; }
.card-all__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-all__meta { font-size: var(--fs-xs); letter-spacing: .12em; opacity: .7; }
.card-all__ico { width: 3rem; height: 3rem; flex: none; border-radius: 50%; border: 1px solid currentColor;
  display: flex; align-items: center; justify-content: center; transition: transform .45s var(--ease); }
.card-all__ico .ico { width: 1.1rem; height: 1.1rem; }
.card-all:hover .card-all__ico { transform: translateX(4px); }

/* ---------- Flood-fill button (vg1-modern), the single shop control ---------- */
.btn-flood { position: relative; display: inline-flex; align-items: center; gap: 1.1rem; height: 4.4rem; padding: 0 .6rem 0 2.2rem;
  border-radius: 999px; background: var(--ink); color: var(--white); overflow: hidden; isolation: isolate;
  transition: color .6s var(--ease); }
.btn-flood__fill { position: absolute; inset: 0; z-index: -1; background: var(--pink); transform: translateY(101%);
  transition: transform .6s var(--ease); }
.btn-flood:hover .btn-flood__fill { transform: translateY(0); }
.btn-flood:hover { color: var(--ink); }
.btn-flood__label { font-size: var(--fs-s); letter-spacing: .1em; }
.btn-flood__ico { width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; background: currentColor;
  display: flex; align-items: center; justify-content: center; transition: transform .45s var(--ease); }
.btn-flood__ico .ico { width: 1.2rem; height: 1.2rem; color: var(--ink); transition: color .6s var(--ease); }
.btn-flood:hover .btn-flood__ico { transform: translate(3px, 0); }
.btn-flood:hover .btn-flood__ico .ico { color: var(--pink); }
.btn-flood--sm { height: 3.8rem; padding: 0 .5rem 0 1.8rem; gap: .9rem; }
.btn-flood--sm .btn-flood__ico { width: 2.8rem; height: 2.8rem; }
.explore__cta { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: 0 0 5rem; text-align: center; }
.explore__cta-note { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--gray3); }

/* ---------- Collection plates: the STONE picture-overlap, ported ---------- */
.plates { position: relative; z-index: 1; }
.plate { position: relative; z-index: 1; isolation: isolate; }
.plate__window { position: relative; width: 100%; height: 88vh; min-height: 46rem; overflow: hidden; background: var(--card); }
/* inset -14% is the doc's overscan: the layer drifts inside the window and never exposes an edge */
.plate__layer { position: absolute; inset: -14% 0; display: flex; align-items: center; justify-content: center; will-change: transform; backface-visibility: hidden; }
.plate__img { width: 100%; height: 100%; object-fit: cover; }
.plate__window::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 26%, transparent 70%, rgba(0, 0, 0, .2)); }
.plate__titlebar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  padding: clamp(26px, 4vh, 40px) clamp(40px, 7vw, 76px); display: grid; place-items: center; pointer-events: none;
  background: rgba(35, 35, 35, .12);
  -webkit-backdrop-filter: blur(15px) brightness(.92) saturate(1.06); backdrop-filter: blur(15px) brightness(.92) saturate(1.06);
  -webkit-mask-image: radial-gradient(116% 128% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(116% 128% at 50% 50%, #000 40%, transparent 100%); }
.plate__title { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(22px, 3.4vw, 42px); line-height: 1; color: #f6f3ee; text-shadow: 0 1px 34px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .plate__layer { transform: none !important; } }

/* ---------- All products: the destination the pull opens ---------- */
.modal--all .modal__panel { width: min(96vw, 118rem); max-height: 92vh; padding: 3.2rem 2.6rem 3rem; }
.allp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin: 0 0 2.4rem; }
.allp__title { font-size: 3.4rem; font-weight: 400; line-height: 1; text-transform: none; letter-spacing: -.01em; }
.allp__title .font-serif { font-size: 1.15em; }
.allp__count { font-size: var(--fs-s); letter-spacing: .1em; text-transform: uppercase; color: var(--gray3); flex: none; }
.allp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.allp__grid .product-card { height: 100%; min-width: 0; }
.modal__rule { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--pink); transform-origin: 50% 50%; pointer-events: none; z-index: 40; animation: floodRule 900ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes floodRule { 0% { transform: scaleX(0); opacity: 1; } 46% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.allp__grid.is-arriving { animation: floodArrive 640ms cubic-bezier(.22, 1.28, .36, 1) both; }
@keyframes floodArrive { 0% { transform: translate3d(0, 18px, 0); } 58% { transform: translate3d(0, -4px, 0); } 100% { transform: translate3d(0, 0, 0); } }


.product-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: auto; background: var(--card-bg, var(--pink)); border-radius: 14px; padding: 1.5rem 1rem; overflow: hidden; user-select: none; -webkit-user-select: none; }
.product-card__head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.product-card__quick { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255, 255, 255, 0); transition: background .3s var(--ease), transform .3s var(--ease); }
.product-card__quick:hover { background: var(--white); transform: scale(1.08); }
.product-card__quick .ico { width: 1.3rem; height: 1.3rem; }
.product-card__media { position: relative; display: block; width: 100%; height: 27rem; max-height: 45vh; margin: -.5rem auto 1rem; padding: 0; cursor: pointer; z-index: 1; }
.product-card__img, .product-card__img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.22); transition: opacity .35s ease;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); }
.product-card__img2 { opacity: 0; z-index: 2; }
.product-card:hover .product-card__img { opacity: 0; }
.product-card:hover .product-card__img2 { opacity: 1; }
.product-card__foot { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.product-card__title { font-size: var(--fs-s); line-height: 1.3; max-width: 70%; text-transform: uppercase; letter-spacing: .02em; }
.product-card__price { font-size: var(--fs-s); font-variant-numeric: tabular-nums; }

/* ---------------- Ethos ---------------- */
.ethos { position: relative; padding: 12rem 0 18rem; background: var(--card); overflow: hidden; }
.ethos .container { position: relative; }
.ethos__pill { position: absolute; left: 6%; top: 5vw; opacity: .7; }
.ethos__title { font-size: 10vw; line-height: .9; text-align: center; letter-spacing: -.01em; }
.ethos__title-2 { font-size: 10vw; line-height: .9; text-align: left; letter-spacing: -.01em; transform: translateX(38%); }
.ethos__title-2 .font-serif { font-weight: 400; letter-spacing: -.03em; }
.ethos__bottom, .ethos__items { position: relative; }
.ethos__items { width: 52%; margin-top: 8rem; display: grid; gap: 3rem; }
.ethos__item { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.ethos__item-head { display: flex; align-items: flex-start; gap: 1.2rem; }
.ethos__item-head h3 { font-size: 1.2rem; line-height: 1.15; }
.ethos__icon { width: 2.8rem; height: 2.8rem; flex: none; color: var(--ink); }
.ethos__item p { font-size: max(.9rem, 12px); }
.ethos__image { position: absolute; right: 6%; bottom: -10rem; width: 24rem; height: auto; z-index: 1; pointer-events: none; }
.ethos__arrow { position: absolute; left: 0; top: 34%; z-index: 2; color: var(--ink); text-transform: uppercase; text-decoration: underline; text-underline-offset: .15em; line-height: 1.25; }
.ethos__arrow-text { display: block; }

/* ---------------- Offer ---------------- */
.offer .half { height: auto; min-height: 100vh; align-items: stretch; }
.offer .half__img { height: auto; min-height: 100vh; }
.offer__media { position: relative; }
.offer__media .parallax-image { position: absolute; inset: 0; height: 120%; top: -10%; }
.offer__text { position: absolute; left: 6%; top: 8%; z-index: 2; max-width: 34rem; color: var(--ink); }
.offer__title { font-size: 4.5rem; font-weight: 600; line-height: .82; text-transform: uppercase; }
.offer__title i { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 1.12em; font-weight: 400; text-transform: none; letter-spacing: -.02em; }
.offer__desc { margin-top: 1.4rem; font-size: max(.9rem, 12px); max-width: 24rem; color: var(--gray3); }
.offer__cta { position: absolute; right: 5%; top: 8%; z-index: 2; flex-direction: column; align-items: center; gap: .8rem; color: var(--ink); }
.offer__content { position: relative; min-height: 100vh; max-height: none; height: auto; padding: 5rem calc(4% + .75rem) 6rem; justify-content: space-between; }
.offer__arrow { position: absolute; left: -2rem; top: 34%; width: 52rem; max-width: 96%; height: auto; color: var(--ink); pointer-events: none; }
.offer__thumb { position: relative; z-index: 1; width: 17rem; aspect-ratio: 357 / 465; margin: 10rem 0 4rem; overflow: hidden; }
.offer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.offer__copy { display: block; }
.offer__copy .half__title { font-size: 2.5rem; margin-top: 1.4rem; max-width: 26rem; line-height: 1.1 !important; }
.offer__copy p { margin-top: 1rem; font-size: max(.9rem, 12px); max-width: 26rem; }

/* ---------------- Journal ---------------- */
.journal { background: var(--ink-3); color: var(--white); padding: 8rem 0; }
.journal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; align-items: start; }
.journal__side { display: flex; flex-direction: column; align-items: center; padding-top: 4rem; }
.journal__title { line-height: .8; margin-bottom: 1.6rem; text-align: center; }
.journal__title .font-serif { font-size: 1.4em; }
.journal__desc { font-size: max(.9rem, 12px); }
.journal__small { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 5rem; width: 100%; }
.journal__more { margin-top: 4rem; flex-direction: column; align-items: center; gap: 1rem; color: var(--white); }
.journal-card { background: var(--white); color: var(--ink); overflow: hidden; width: 100%; }
.journal-card__link { display: block; width: 100%; padding: 0; text-align: left; color: inherit; }
.journal-card__image { position: relative; height: 15rem; overflow: hidden; }
.journal-card__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1s var(--ease); }
.journal-card:hover img { transform: scale(1); }
.journal-card__text { padding: 2rem; }
.journal-card__title { font-size: max(1.1rem, 13px); line-height: 1.25; font-weight: 400; text-transform: none; margin-bottom: 1rem; }
.journal-card__desc { color: var(--gray3); font-size: max(.9rem, 12px); }
.journal-card__detail { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; }
.journal-card--featured .journal-card__image { height: 37rem; }
.journal-card--featured .journal-card__text { padding: 2rem 2rem 4rem; }
.journal-card--featured .journal-card__title { font-size: 1.75rem; }
.ribbon { position: absolute; left: 2.6rem; top: 2rem; z-index: 2; background: var(--white); border-radius: 5rem; font-size: var(--fs-s); font-weight: 600; line-height: 1; padding: .55rem 1.5rem .4rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------------- Connect ---------------- */
.connect { padding: 12rem 0 22rem; overflow: hidden; }
.connect__grid { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: 0; align-items: stretch; }
.connect__center { position: relative; padding: 0 3rem; }
.connect__title-1 { position: absolute; left: 50%; top: -6.2rem; transform: translateX(-50%); z-index: 2; white-space: nowrap; }
.connect__image { width: 100%; aspect-ratio: 1061 / 728; overflow: hidden; }
.connect__image img { width: 100%; height: 100%; object-fit: cover; }
.connect__title-2 { position: absolute; left: 50%; bottom: -6rem; transform: translateX(-50%); font-size: 6.3rem; line-height: .65; z-index: 2; white-space: nowrap; }
.connect__socmed { position: absolute; left: 50%; bottom: -17rem; transform: translate(-50%, -50%); width: 100%; max-width: 20rem; }
.connect__desc { display: none; }
.connect__col { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.connect__col--left { justify-content: flex-end; transform: translateY(40%); }
.connect__tile { overflow: hidden; width: 100%; }
.connect__tile img { width: 100%; height: 100%; object-fit: cover; }
.connect__tile--small { aspect-ratio: 387 / 259; }
.connect__tile--portrait { aspect-ratio: 370 / 491; }
.connect__side-text { font-size: max(.9rem, 12px); max-width: 14rem; padding-bottom: 10%; }

/* ---------------- Footer ---------------- */
.footer { position: relative; overflow: hidden; }
.footer__parallax { position: relative; height: 90vh; overflow: hidden; }
.footer__parallax .wrapper { height: 120%; margin-top: -10%; will-change: transform; }
.footer__parallax-image { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.06); }
.footer__wrapper { display: grid; grid-template-columns: 5fr 1fr 6fr; gap: 0 2rem; padding: 0 0 3rem; }
.footer__email-wrapper { grid-column: 1; margin-top: -30%; position: relative; z-index: 2; }
.footer__links { grid-column: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: 2.5rem; align-self: start; }
.footer__col .subtitle { font-size: var(--fs-s); text-transform: uppercase; margin-bottom: 1.1rem; letter-spacing: .04em; }
.footer__col li { font-size: max(1.1rem, 13px); }
.footer__col li:not(:last-child) { margin-bottom: 1rem; }
.footer__email { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; background: var(--bone); color: var(--ink); padding: 7rem 5.5rem 6.5rem; text-align: left;
  border-radius: 44% 56% 46% 54% / 44% 40% 46% 44%; }
.footer__email-title { font-size: 4.4rem; font-weight: 400; line-height: 1; letter-spacing: -.01em; text-transform: none; margin-bottom: 1.6rem; }
.footer__field { position: relative; width: 100%; margin: 3.4rem 0 1.2rem; }
.footer__email input { width: 100%; padding: 1.5rem 7rem 1.5rem 2rem; border: 1px solid var(--line); border-radius: 5rem; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-s); letter-spacing: .06em; text-transform: uppercase; outline: none; transition: border-color .4s var(--ease); }
.footer__email input::placeholder { color: var(--gray2); opacity: 1; }
.footer__email input:focus-visible { border-color: var(--ink); }
.footer__email input:disabled { opacity: .5; }
.footer__submit { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); }
.footer__email-cta { font-size: var(--fs-xs); letter-spacing: .16em; color: var(--gray2); }
.footer__email .maxwidth-0 { margin-left: 0; margin-right: 0; max-width: 29rem; }
.footer__email .rule { margin-top: 2.2rem; }
.footer__submit .arrowlong { width: 5rem; height: 5rem; background: var(--ink); color: var(--white); }
.footer__submit:hover .arrowlong { background: var(--dot); transform: scale(1.06); }
.journal .text-gray3 { color: #b9b9b9; }
.footer__email-msg { min-height: 1.4em; margin-top: 1rem; font-size: max(.9rem, 12px); color: var(--ink); }
.footer__email-msg.is-error { color: #a33b41; }
.footer__copyright { padding: 2rem 0 3rem; }
.footer__tag { margin: 1rem 0 2rem; max-width: 18rem; line-height: 1.4; }
.footer__copyright-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.footer__copyright-links { display: flex; gap: 2rem; }
.footer__copyright-links button { color: var(--gray3); padding: 0; }

/* ---------------- Cart drawer ---------------- */
.cart { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; visibility: hidden; pointer-events: none; transition: visibility 0s linear .8s; }
.cart.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cart__overlay { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .8s var(--ease); }
.cart.is-open .cart__overlay { opacity: .5; }
.cart__panel { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; max-width: 40rem; height: 100%; background: var(--white); padding: 2rem 4rem 2.5rem; transform: translateX(100%); transition: transform .8s var(--ease); overflow: hidden; }
.cart.is-open .cart__panel { transform: none; }
.cart__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4vh; }
.cart__title { font-size: 2.5rem; line-height: 1; display: flex; align-items: flex-start; gap: .4rem; }
.cart__sup { font-size: var(--fs-s); line-height: 1; margin-top: .4rem; vertical-align: top; }
.cart__close { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background .3s var(--ease); }
.cart__close:hover { background: var(--card); }
.cart__view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.cart__view.is-active { display: flex; }
.cart__empty { margin-top: 18vh; text-align: center; }
.cart__empty-title { font-size: 4rem; line-height: 1; margin-bottom: 2rem; }
.cart__empty .icon-global { margin-inline: auto; }
.cart__ship { margin-bottom: 1.5rem; }
.cart__ship-bar { position: relative; height: 2px; background: var(--line-2); margin-top: .6rem; overflow: hidden; border-radius: 2px; }
.cart__ship-bar i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--ink); transition: width .8s var(--ease); }
.cart__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gray3) var(--line-2); padding-right: .5rem; }
.cart__list::-webkit-scrollbar { width: 3px; }
.cart__list::-webkit-scrollbar-track { background: var(--line-2); }
.cart__list::-webkit-scrollbar-thumb { background: var(--gray3); border-radius: 10px; }
.cart__item { display: grid; grid-template-columns: 80px 1fr; gap: 0 25px; padding: 1rem 0; border-bottom: 1px solid var(--line-2); animation: itemIn .5s var(--ease-out) both; }
@keyframes itemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cart__item.is-removing { animation: itemOut .35s var(--ease) both; }
@keyframes itemOut { to { opacity: 0; transform: translateX(12px); } }
.cart__item-image { width: 80px; height: 80px; border-radius: 7px; overflow: hidden; background: var(--card-bg, var(--card)); }
.cart__item-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.cart__item-wrapper { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: .3rem 0; }
.cart__item-header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cart__item-title { font-size: max(1.1rem, 13px); font-weight: 400; line-height: 1.25; text-transform: none; max-width: 70%; }
.cart__item-series { display: block; font-size: var(--fs-xs); color: var(--gray3); margin-top: .3rem; text-transform: uppercase; letter-spacing: .04em; }
.cart__item-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__item-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qty { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 5rem; padding: .25rem .4rem; }
.qty button { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background .3s; }
.qty button:hover { background: var(--card); }
.qty button .ico { width: 1rem; height: 1rem; }
.qty span { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.cart__item-remove { font-size: var(--fs-s); color: var(--gray3); text-decoration: underline; text-underline-offset: .15em; padding: 0; }
.cart__item-remove:hover { color: var(--ink); }
.cart__footer { padding-top: 1.5rem; }
.cart__promo { display: flex; gap: .5rem; border: 1px solid var(--line); border-radius: 5rem; padding: .3rem .3rem .3rem 1.4rem; }
.cart__promo input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: max(.85rem, 11.5px); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.cart__promo-btn { padding: .8rem 1.6rem; border-radius: 5rem; background: var(--ink); color: var(--white); font-size: var(--fs-xs); letter-spacing: .06em; transition: background .3s; }
.cart__promo-btn:hover { background: #000; }
.cart__promo-msg { min-height: 1.2em; margin: .6rem 0 0 1.4rem; color: var(--gray3); }
.cart__promo-msg.is-ok { color: #2f7a4c; }
.cart__promo-msg.is-error { color: #b3474d; }
.cart__row { display: flex; justify-content: space-between; align-items: baseline; padding: .6rem 0; font-size: max(1rem, 12.5px); }
.cart__row p:last-child { font-variant-numeric: tabular-nums; }
.cart__row--subtotal { font-size: 1.25rem; border-top: 1px solid var(--line-2); margin-top: .6rem; padding-top: 1.2rem; }
.cart__row--total { font-size: 1.4rem; border-top: 1px solid var(--line-2); margin-top: .6rem; padding-top: 1.2rem; }
.cart__checkout { margin: 1.5rem 0 1rem; background: var(--ink); color: var(--white); border-color: var(--ink); }
.cart__checkout .btn__icon-arrow { background: var(--white); color: var(--ink); }
.cart__back { align-self: flex-start; color: var(--gray3); padding: 0; margin-bottom: 2rem; }
.cart__summary-title, .cart__done-title { font-size: 2.5rem; line-height: 1; margin-bottom: 2rem; }
.cart__summary-list { border-bottom: 1px solid var(--line-2); margin-bottom: 1rem; }
.cart__summary-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; font-size: max(.95rem, 12.5px); }
.cart__summary-list li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__view--done { align-items: center; justify-content: center; text-align: center; }
.cart__done-title { font-size: 4rem; }
.cart__done-btn { margin-top: 2.5rem; }

/* ---------------- Modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 2rem; visibility: hidden; pointer-events: none; transition: visibility 0s linear .7s; }
.modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .6s var(--ease); }
.modal.is-open .modal__overlay { opacity: 1; }
.modal__panel { position: relative; z-index: 2; width: min(92vw, 76rem); max-height: 88vh; overflow: auto; overscroll-behavior: contain; background: var(--white); border-radius: 14px; padding: 3.5rem; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .7s var(--ease); scrollbar-width: thin; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close { position: absolute; right: 1.2rem; top: 1.2rem; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); z-index: 3; transition: background .3s; }
.modal__close:hover { background: var(--card); }
.qv { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.qv__media { position: relative; border-radius: 14px; background: var(--card-bg, var(--pink)); overflow: hidden; aspect-ratio: 4 / 5; }
.qv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.15); transition: opacity .4s ease;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); }
.qv__media .qv__alt { opacity: 0; }
.qv__media:hover img:not(.qv__alt) { opacity: 0; }
.qv__media:hover .qv__alt { opacity: 1; }
.qv__title { font-size: 2.5rem; line-height: 1.1; margin: 1.6rem 0 1rem; text-transform: none; }
.qv__price { font-size: 1.4rem; margin-bottom: 1.6rem; font-variant-numeric: tabular-nums; }
.qv__desc { font-size: max(1rem, 12.5px); line-height: 1.5; }
.qv__facts { margin: 1.6rem 0 2.4rem; display: grid; gap: .5rem; }
.qv__facts li::before { content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--dot); margin-right: .7rem; vertical-align: middle; }
.qv__actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.prose--index { max-width: none; }
.jindex__lede { margin-bottom: 2.6rem; }
.jindex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 0; }
.jindex__item { display: flex; flex-direction: column; text-align: left; color: inherit; background: var(--card);
  border-radius: 12px; overflow: hidden; transition: background .35s var(--ease), transform .45s var(--ease); }
.jindex__item:hover { background: var(--pink); transform: translateY(-3px); }
.jindex__media { display: block; overflow: hidden; }
/* height auto, or the height attribute wins over aspect-ratio and the thumbnail stretches */
.jindex__item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transform: scale(1.04); transition: transform 1s var(--ease); }
.jindex__item:hover img { transform: scale(1); }
.jindex__body { display: flex; flex-direction: column; gap: .7rem; flex: 1; padding: 1.4rem 1.3rem 1.3rem; }
.jindex__date { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--gray3); }
.jindex__heading { font-size: max(1.15rem, 14px); line-height: 1.3; }
.jindex__read { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .8rem;
  font-size: var(--fs-xs); letter-spacing: .12em; color: var(--gray3); transition: color .35s var(--ease); }
.jindex__read .ico { width: 1rem; height: 1rem; transition: transform .45s var(--ease); }
.jindex__item:hover .jindex__read { color: var(--ink); }
.jindex__item:hover .jindex__read .ico { transform: translateX(4px); }
.prose h3 { font-size: 2.5rem; line-height: 1.1; text-transform: none; margin: 1rem 0 1.6rem; max-width: 30rem; }
.prose p { color: var(--gray3); font-size: max(1.05rem, 13px); line-height: 1.55; max-width: 44rem; }
.prose p + p { margin-top: 1.2rem; }

/* ---------------- Toast, scrollbar, reveals ---------------- */
.toast { position: fixed; left: 50%; bottom: 2.4rem; z-index: 1200; transform: translate(-50%, 20px); opacity: 0; background: var(--ink-2); color: var(--white); border-radius: 5rem; padding: 1rem 2rem; font-size: var(--fs-s); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.scrollbar { position: fixed; right: 6px; top: 0; height: 100%; width: 2px; z-index: 250; pointer-events: none; }
.scrollbar__thumb { width: 100%; height: 18vh; background: var(--ink); opacity: .35; border-radius: 2px; will-change: transform; }
.reveal { transform: translateY(30px); transition: opacity 1s var(--ease-out), transform 1.05s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
.fade { will-change: opacity; }
.parallax-scroll, .parallax-scroll-item { will-change: transform; backface-visibility: hidden; }
.draw__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.js) .draw__path, .draw.is-drawn .draw__path { stroke-dasharray: none; stroke-dashoffset: 0; }

/* ---------------- Mobile ---------------- */
@media (max-width: 767.98px) {
  .intro__cta { width: min(19rem, 62vw); gap: .8rem; padding: 1.8rem 1.2rem 1.5rem; border-radius: 9rem 9rem 0 0; }
  /* both rails read left to right on a phone, and both bleed out to the right gutter */
  #explore .half .slider__track, #explore .half--rev .slider__track { direction: ltr; margin-left: 0;
    margin-right: calc(-1 * var(--gutter)); }
  #explore .half .slider, #explore .half--rev .slider { --rail-bleed: var(--gutter); }
  /* one and a third cards: big enough to read, and the sliver proves the rail keeps going */
  .slider__track > * { flex-basis: 74%; }
  .plate__window { height: 62vh; min-height: 34rem; }
  .plate__titlebar { padding: 22px 30px; }
  .card-all__title { font-size: 1.9rem; }
  .explore__cta { margin-bottom: 3.5rem; }
  .btn-flood { height: 4rem; padding: 0 .5rem 0 1.6rem; }
  .half__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .allp__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .allp__title { font-size: 2.4rem; }
  .allp__head { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.8rem; }
  .allp__count { flex: 0 1 auto; }
  .modal--all .modal__panel { width: 100%; padding: 2.4rem 1.2rem 2rem; }
  h1, h2 { font-size: 2.5rem; }
  .navbar { padding: .9rem 0; }
  .navbar-hamburger { display: flex; order: 1; }
  .navbar-logo { order: 2; font-size: 1.5rem; }
  .navbar-cta { order: 3; }
  .navbar-menu { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; background: var(--white); padding: 16vh var(--gutter) 12vh; transform: translateX(-100%); pointer-events: none; transition: transform .8s var(--ease); }
  #header.menu-open .navbar-menu { transform: none; pointer-events: auto; opacity: 1; }
  #header.menu-open .navbar-cta, #header.menu-open .navbar-hamburger, #header.menu-open .navbar-menu-list { opacity: 1; transform: none; pointer-events: auto; }
  .navbar-menu-list { flex-direction: column; gap: 1.4rem; }
  .navbar-menu-list a, #header.is--white .navbar-menu-list a { font-size: 2.2rem; font-weight: 600; color: var(--ink); }
  .navbar-menu-foot { display: block; line-height: 1.6; }

  .intro { padding: 0 15px; height: 100svh; }
  .intro__title { font-size: 3.25rem; }
  .intro__text { margin-bottom: 22vh; }
  .intro__cta { width: 90%; max-width: 90%; padding: 1.5rem .5rem; }
  .intro__cta-arrow { width: 3rem; height: 3rem; }


  .explore { padding: 5rem 0 0; }
  .explore__title { margin-bottom: 3rem; }
  .explore__hint { height: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 4rem; }
  .explore__blurb { position: static; width: 100%; max-width: 22rem; }
  .explore__hint-arrow { position: static; }
  .half, .offer .half { flex-direction: column; height: auto; min-height: 0; }
  .half__content, .half__img { width: 100%; }
  .half__img { height: 70vh; }
  .half__img, .offer .half__img { order: 2; }
  .half__content { order: 1; height: auto; max-height: none; padding: 1.6rem var(--gutter) 3rem; }
  .half__title { font-size: 2.5rem; }
  .product-card__media { height: 25rem; max-height: 50vh; }
  .half__note { margin-top: 1rem; }

  .ethos { padding: 6rem 0; }
  .ethos__pill { position: static; display: inline-block; margin-bottom: 1.5rem; }
  .ethos__title { font-size: 15vw; text-align: left; }
  .ethos__title-2 { font-size: 17vw; transform: none; text-align: left; margin-top: .2em; }
  .ethos__items { width: 100%; margin-top: 4rem; gap: 2.5rem; }
  .ethos__item { grid-template-columns: 1fr; gap: 1rem; }
  /* bottom: -10rem from the desktop rule still applied under position relative and pushed it 10rem down */
  .ethos__image { position: relative; inset: auto; width: 62%; margin: 2.5rem 0 0 auto; }
  .ethos__arrow { position: static; margin-top: 3rem; }

  .offer__media { min-height: 0; height: 130vw; }
  .offer .half__img { min-height: 0; }
  .offer__text { left: var(--gutter); top: 2rem; max-width: 80%; }
  .offer__title { font-size: 2.7rem; }
  .offer__title i { font-size: 1.1em; }
  .offer__cta { right: var(--gutter); top: auto; bottom: 2rem; }
  .offer__content { min-height: 0; padding: 4rem var(--gutter) 3rem; }
  .offer__arrow { display: none; }
  .offer__thumb { width: 100%; aspect-ratio: 5 / 3; border-radius: 12px; margin: 0 0 2.2rem; }

  .journal { padding: 5rem 0; }
  .journal__grid { grid-template-columns: 1fr; gap: 3rem; }
  .journal__side { order: 2; padding-top: 0; }
  .journal__title { margin-top: 0; }
  .journal__small { grid-template-columns: 1fr; margin-top: 3rem; }
  .journal-card--featured { order: 1; }
  .journal-card--featured .journal-card__image { height: 30rem; }
  .journal-card--featured .journal-card__title { font-size: 1.4rem; }
  .ribbon { left: 1rem; top: 1rem; }

  .connect { padding: 6rem 0 5rem; }
  .connect__grid { grid-template-columns: 1fr; }
  .connect__col { display: none; }
  /* every piece back into normal flow: absolutely placed headings landed on the photograph */
  .connect__center { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
  .connect__title-1, .connect__title-2, .connect__socmed, .connect__desc {
    position: static; left: auto; right: auto; top: auto; bottom: auto; transform: none; white-space: normal; }
  .connect__title-1 { order: 1; }
  .connect__image { order: 2; width: 100%; aspect-ratio: 375 / 420; }
  .connect__title-2 { order: 3; font-size: 3.4rem; line-height: .88; margin-top: -.3rem; }
  .connect__socmed { order: 4; width: 100%; max-width: 20rem; }
  .connect__desc { order: 5; display: block; max-width: 24rem; font-size: max(.9rem, 12px); }

  .footer__parallax { height: 70vh; }
  .footer__parallax-image { height: 80vh; }
  .footer__wrapper { grid-template-columns: 1fr; padding-bottom: 2rem; }
  .footer__email-wrapper { grid-column: 1; margin-top: -30%; margin-bottom: 4rem; }
  .footer__links { grid-column: 1; grid-template-columns: 1fr 1fr; padding-top: 0; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__email { padding: 5rem 2rem 4.4rem; border-radius: 40% 60% 42% 58% / 20% 18% 32% 30%; }
  .footer__email-title { font-size: 2.5rem; margin-bottom: 1rem; }
  .footer__field { margin: 2rem 0 1rem; }
  .footer__email input { padding: 1.2rem 5.4rem 1.2rem 1.4rem; }
  .footer__submit .arrowlong { width: 4rem; height: 4rem; }
  .rule--light { margin: 4rem 0 2rem; }
  .footer__copyright-wrapper { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .cart__panel { padding: 1.6rem var(--gutter) 1.6rem; max-width: 100%; }
  .toast { bottom: auto; top: 5.2rem; max-width: 86vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cart__title { font-size: 2.2rem; }
  .cart__empty-title { font-size: 3rem; }
  .cart__item { grid-template-columns: 70px 1fr; gap: 0 15px; }
  .cart__item-image { width: 70px; height: 70px; }
  .modal { padding: 1rem; }
  .modal__panel { padding: 2.4rem 1.4rem 2rem; max-height: 90vh; }
  .qv { grid-template-columns: 1fr; gap: 1.6rem; }
  .qv__title, .prose h3 { font-size: 1.9rem; }
  .jindex { grid-template-columns: 1fr; gap: 1rem; }
  .jindex__item { flex-direction: row; align-items: stretch; }
  .jindex__media { flex: 0 0 9.5rem; }
  .jindex__item img { height: 100%; aspect-ratio: auto; }
  .jindex__body { padding: 1rem 1.1rem; gap: .45rem; }
  .jindex__read { display: none; }
  .scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-scroll, .parallax-scroll-item, .parallax-image, .footer__parallax .wrapper, .footer__email { transform: none !important; }
  .reveal, .masking-text .line { opacity: 1 !important; transform: none !important; }
  .allp__grid.is-arriving, .modal__rule { animation: none !important; }
  .draw__path { stroke-dasharray: none; stroke-dashoffset: 0; }
}