/* Southern Palace Lotus — the storefront page. Layout only; components live in spl.css, values in tokens.css. */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { overflow-x: clip; }
body.is-locked { overflow: hidden; }
:where(body, section, footer, .s-drawer)[data-theme] { background-color: var(--surface); color: var(--ink); }
.s-header, .s-cursor { color: var(--ink); }

/* film grain: the velvet of the box, the tooth of the paper */
.s-grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.s-wrap { width: min(1320px, 100% - 2 * clamp(24px, 4vw, 48px)); margin-inline: auto; }
.s-section { position: relative; padding-block: clamp(96px, 11vw, 150px); }
.s-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1200ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)), transform 1400ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1600ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); transition-delay: var(--d, 0ms); }
[data-reveal="mask"] img { transform: scale(1.14); transition: transform 2200ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); transition-delay: var(--d, 0ms); }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="mask"].is-in img { transform: scale(1); }
.no-js [data-reveal], .is-static [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* ---------------------------------------------------------------- intro: the lotus draws itself */
.s-intro { position: fixed; inset: 0 0 auto; height: min(100vh, 1400px); z-index: 100; display: grid; place-content: center; justify-items: center; gap: 28px; background: #0c0b0a; cursor: pointer;
  transition: opacity 1000ms var(--ease-silk, cubic-bezier(.65, 0, .35, 1)), visibility 0s linear 1000ms; }
.s-intro .spl-lotus { --lotus-size: min(300px, 58vw); }
.s-intro .spl-wordmark { --wordmark-width: min(420px, 78vw); color: var(--gold); opacity: 0; transform: translateY(12px); transition: opacity 900ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)) 1500ms, transform 1200ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)) 1500ms; }
.s-intro.is-drawing .spl-wordmark { opacity: 1; transform: none; }
.s-intro__skip { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font: 500 10.5px/1 var(--font-sans); letter-spacing: .32em; text-transform: uppercase; color: #8c8373; }
.s-intro.is-done { opacity: 0; visibility: hidden; }
.s-intro.is-done .spl-lotus { transform: scale(.92); transition: transform 1000ms var(--ease-silk, cubic-bezier(.65, 0, .35, 1)); }

/* ---------------------------------------------------------------- cursor */
.s-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 300ms; }
.s-cursor.is-on { opacity: 1; }
.s-cursor__ring, .s-cursor__dot { position: absolute; left: 0; top: 0; border-radius: 50%; }
.s-cursor__ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--accent-ink); display: grid; place-items: center;
  transition: width 500ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)), height 500ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)), margin 500ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)), background-color 500ms, border-color 300ms; }
.s-cursor__dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--accent-ink); }
.s-cursor__label { font: 500 9.5px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--on-action); opacity: 0; transition: opacity 300ms; }
.s-cursor.is-link .s-cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.s-cursor.is-view .s-cursor__ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--action); border-color: var(--action); }
.s-cursor.is-view .s-cursor__label { opacity: 1; }
.s-cursor.is-view .s-cursor__dot { opacity: 0; }
/* drag: a small hairline ring with two chevrons, the word beneath it, so the lotus stays in view while it turns */
.s-cursor.is-drag .s-cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: color-mix(in srgb, var(--gold) 10%, transparent); }
.s-cursor.is-drag .s-cursor__ring::before, .s-cursor.is-drag .s-cursor__ring::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
  border-left: 1px solid var(--accent-ink); border-bottom: 1px solid var(--accent-ink); }
.s-cursor.is-drag .s-cursor__ring::before { left: 6px; transform: translateY(-50%) rotate(45deg); }
.s-cursor.is-drag .s-cursor__ring::after { right: 6px; transform: translateY(-50%) rotate(-135deg); }
.s-cursor.is-drag .s-cursor__label { white-space: nowrap; font-size: 7.5px; letter-spacing: .2em; padding-left: .2em; color: var(--accent-ink); opacity: 1; }
.s-cursor.is-drag .s-cursor__dot { opacity: 0; }
.s-cursor.is-drag.is-down .s-cursor__ring { width: 50px; height: 50px; margin: -25px 0 0 -25px; background: color-mix(in srgb, var(--gold) 18%, transparent); }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .s-cursor { display: none; } }

/* ---------------------------------------------------------------- header */
.s-header { position: fixed; inset: 0 0 auto; z-index: 50; background: transparent; transition: transform 700ms var(--ease-silk, cubic-bezier(.65, 0, .35, 1)), background-color 500ms, box-shadow 500ms, backdrop-filter 500ms; }
.s-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; width: min(1440px, 100% - 2 * clamp(20px, 3.4vw, 48px)); margin-inline: auto; transition: height 500ms var(--ease-silk, cubic-bezier(.65, 0, .35, 1)); }
.s-header.is-scrolled { background: color-mix(in srgb, var(--surface-raised) 82%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 var(--line); }
.s-header.is-scrolled .s-header__inner { height: 68px; }
.s-header.is-hidden { transform: translateY(-100%); }
.s-nav { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.s-nav--right { justify-content: flex-end; }
.s-nav a { position: relative; padding: 10px 0; font: 400 12.5px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.s-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--accent-ink); transform: scaleX(0); transform-origin: right; transition: transform var(--duration-calm, 700ms) var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.s-nav a.is-current { color: var(--accent-ink); }
.s-nav__shop { color: var(--accent-ink) !important; }
.s-header__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.s-header__logo .spl-lotus { --lotus-size: 40px; transition: transform 1200ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-header__logo:hover .spl-lotus { transform: rotate(-6deg) scale(1.06); }
.s-header__logo .spl-wordmark { --wordmark-width: 176px; color: var(--ink); }
.s-menu-btn { display: none; justify-self: end; align-items: center; gap: 12px; height: 44px; padding: 0 2px; background: none; border: 0; color: var(--ink); font: 500 11.5px/1 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; cursor: pointer; }
.s-menu-btn i { display: grid; gap: 6px; width: 26px; }
.s-menu-btn i::before, .s-menu-btn i::after { content: ""; height: 1px; background: currentColor; transition: transform 500ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-menu-btn[aria-expanded="true"] i::before { transform: translateY(3.5px) rotate(20deg); }
.s-menu-btn[aria-expanded="true"] i::after { transform: translateY(-3.5px) rotate(-20deg); }

.s-drawer { position: fixed; inset: 0; z-index: 45; display: grid; align-content: center; gap: 18px; padding: 110px clamp(24px, 6vw, 48px) 48px; visibility: hidden; opacity: 0; transition: opacity 600ms var(--ease-silk, cubic-bezier(.65, 0, .35, 1)), visibility 0s linear 600ms; }
.s-drawer.is-open { visibility: visible; opacity: 1; transition: opacity 600ms var(--ease-silk, cubic-bezier(.65, 0, .35, 1)); }
.s-drawer a { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--font-serif); font-weight: 300; font-size: 26px; color: var(--ink); }
.s-drawer a em { font-family: var(--font-display); font-size: 18px; color: var(--accent-ink); }
.s-drawer .spl-lotus { --lotus-size: 120px; position: absolute; right: -20px; bottom: -10px; opacity: .08; }

@media (max-width: 960px) {
  .s-header__inner { grid-template-columns: auto 1fr; height: 68px; }
  .s-nav { display: none; }
  .s-header__logo .spl-lotus { --lotus-size: 34px; }
  .s-header__logo .spl-wordmark { --wordmark-width: 150px; }
  .s-menu-btn { display: inline-flex; }
}

/* ---------------------------------------------------------------- hero */
.s-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: clamp(680px, 100svh, 1080px); padding: 76px clamp(20px, 4vw, 48px) 64px; text-align: center; }
.s-hero__halo { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 38%, color-mix(in srgb, var(--gold) 13%, transparent) 0%, transparent 70%),
              radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--gold) 7%, transparent) 0%, transparent 60%); }
.s-hero__dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.s-hero__stage { --stage: min(54svh, 86vw, 660px); position: relative; width: var(--stage); aspect-ratio: 1; margin-bottom: calc(var(--stage) * -.2); mix-blend-mode: screen; will-change: transform; }
.s-hero__lotus { position: relative; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1600ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-hero__lotus.is-ready, .s-hero__poster { opacity: 1; }
.s-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1600ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-hero__stage.has-video .s-hero__poster { opacity: 0; }
/* real-time lotus: replaces the video once its first frame is drawn; drag to turn */
.s-hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 28px rgb(226 202 147 / .16)); transition: opacity 600ms var(--ease-silk, cubic-bezier(.65, 0, .35, 1)); }
.s-hero__stage.has-gl .s-hero__gl { opacity: 1; }
.s-hero__stage.has-gl .s-hero__lotus, .s-hero__stage.has-gl .s-hero__poster { opacity: 0; transition-duration: 450ms; }
.s-hero__stage.is-grabbing .s-hero__gl { cursor: grabbing; }
.s-hero__hint { position: absolute; left: 50%; top: 5%; z-index: 1; display: inline-flex; align-items: center; gap: 10px; transform: translateX(-50%);
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--accent-ink);
  opacity: 0; pointer-events: none; transition: opacity 900ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-hero__hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.s-hero__stage.has-gl .s-hero__hint { opacity: .85; animation: s-hint 3.2s var(--ease-silk, cubic-bezier(.65, 0, .35, 1)) infinite; }
.s-hero__stage.was-turned .s-hero__hint { opacity: 0; animation: none; }
@keyframes s-hint { 0%, 100% { letter-spacing: .3em; } 50% { letter-spacing: .36em; } }
.s-hero__copy { position: relative; display: grid; justify-items: center; gap: 14px; max-width: 760px; }
.s-hero__title { margin: 0; line-height: 0; }
.s-hero__wordmark { width: min(540px, 82vw); height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgb(202 178 127 / .22)); }
.s-hero__kr { margin: 6px 0 0; font-family: var(--font-serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.4; letter-spacing: -.02em; }
.s-hero__lead { margin: 0; max-width: 34em; font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.9; color: var(--ink-muted); }
.s-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }
.s-hero__meta { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: space-between; align-items: end; width: min(1440px, 100% - 2 * clamp(20px, 3.4vw, 48px)); margin-inline: auto; pointer-events: none; }
.s-hero__meta > * { pointer-events: auto; }
.s-hero__now { display: flex; align-items: baseline; gap: 12px; text-decoration: none; font: 500 11px/1 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-muted); }
.s-hero__now em { font-family: var(--font-display); font-size: 22px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--accent-ink); }
.s-hero__scroll { display: grid; justify-items: center; gap: 12px; text-decoration: none; font: 500 10.5px/1 var(--font-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-muted); }
.s-hero__scroll i { position: relative; width: 1px; height: 56px; overflow: hidden; background: var(--line); }
.s-hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold); animation: s-scrollcue 2.4s var(--ease-silk, cubic-bezier(.65, 0, .35, 1)) infinite; }
@keyframes s-scrollcue { to { top: 100%; } }
@media (max-width: 720px) {
  .s-hero { padding-top: 64px; padding-bottom: 88px; }
  .s-hero__stage { --stage: min(58svh, 124vw); flex: none; }
  .s-hero .spl-eyebrow { letter-spacing: .22em; font-size: 10.5px; }
  .s-hero .spl-eyebrow::before, .s-hero .spl-eyebrow::after { display: none; }
  .s-hero__meta { bottom: 22px; }
  .s-hero__now { display: none; }
  .s-hero__meta { justify-content: center; }
  .s-hero__cta .spl-btn { min-height: 48px; padding: 0 22px; }
}

/* ---------------------------------------------------------------- marquee band */
.s-band { padding-block: 0; }

/* ---------------------------------------------------------------- maison */
.s-maison { overflow: hidden; }
.s-maison__watermark { position: absolute; right: -8%; top: 50%; width: min(820px, 90vw); transform: translateY(-50%); color: var(--gold); opacity: .09; pointer-events: none; }
.s-maison__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.s-maison__figure { margin: 0; }
.s-maison__figure .spl-arch { aspect-ratio: 4 / 5.4; background: var(--blush); }
.s-maison__figure figcaption, .s-caption { margin-top: 16px; font-size: 12.5px; line-height: 1.6; letter-spacing: .02em; color: var(--ink-faint); }
.s-caption em, .s-maison__figure figcaption em { font-family: var(--font-display); font-size: 16px; color: var(--ink-muted); }
.s-statement { margin: 26px 0 30px; font-family: var(--font-serif); font-weight: 300; font-size: clamp(30px, 3.9vw, 52px); line-height: 1.38; letter-spacing: -.035em; }
.s-maison__lead { max-width: 30em; margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.95; font-weight: 300; color: var(--ink-muted); }
.s-maison__sign { margin: 22px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.8vw, 24px); color: var(--accent-ink); }
.s-maison__sign em { font-style: normal; letter-spacing: .04em; }
.s-pillars { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.s-pillars li { padding: 28px 22px 4px 0; }
.s-pillars li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.s-pillars .s-pillar__no { display: block; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1; color: var(--accent-ink); }
.s-pillars h3 { margin: 16px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: .01em; }
.s-pillars h3 small { display: block; margin-top: 6px; font-family: var(--font-serif); font-size: 15px; font-weight: 400; letter-spacing: .02em; color: var(--accent-ink); }
.s-pillars p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-muted); }
@media (max-width: 960px) {
  .s-maison__grid { grid-template-columns: 1fr; }
  .s-maison__figure { width: min(440px, 100%); justify-self: center; }
}
@media (max-width: 720px) {
  .s-pillars { grid-template-columns: 1fr; }
  .s-pillars li, .s-pillars li + li { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- collections */
.s-collection__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.s-collection__text { display: grid; gap: 22px; align-content: start; }
.s-collection__text .spl-heading { margin-bottom: 4px; }
.s-collection__desc { margin: 0; max-width: 32em; color: var(--ink-muted); }
.s-collection__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 10px; }
.s-collection__specs { margin: 0; font-size: 12.5px; letter-spacing: .06em; color: var(--ink-faint); }
.s-collection__specs b { font-weight: 500; color: var(--ink-muted); }

.s-gloves { overflow: hidden; }
.s-gloves::before { content: ""; position: absolute; left: -10%; top: 6%; width: 70%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 11%, transparent), transparent); }
.s-gloves__visual { position: sticky; top: 110px; align-self: start; display: grid; justify-items: center; gap: 26px; }
.s-gloves__visual .spl-medallion { --medallion-size: min(560px, 100%); }
.s-gloves__name { display: flex; align-items: baseline; gap: 14px; margin: 0; font: 500 11px/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); }
.s-gloves__name span[data-swatch-latin] { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.s-editorial { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(20px, 3vw, 48px); align-items: end; margin-top: clamp(96px, 10vw, 150px); }
.s-editorial figure { margin: 0; }
.s-editorial .spl-arch { aspect-ratio: 4 / 5.2; }
.s-editorial__sq { aspect-ratio: 1; overflow: hidden; background: var(--surface-sunken); }
.s-editorial__sq img { width: 100%; height: 100%; object-fit: cover; }
.s-editorial blockquote { margin: 0 0 12%; }
.s-editorial blockquote p { margin: 0 0 18px; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; color: var(--ink); }
.s-editorial blockquote cite { font: 500 11px/1.6 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; font-style: normal; color: var(--accent-ink); }
@media (max-width: 960px) {
  .s-collection__grid { grid-template-columns: 1fr; }
  .s-gloves__visual, .s-duo { position: relative; top: 0; }
  .s-editorial { grid-template-columns: 1fr 1fr; }
  .s-editorial blockquote { grid-column: 1 / -1; order: -1; margin: 0; }
}

/* ---------------------------------------------------------------- the gift */
.s-gift__head { max-width: 880px; margin: 0 auto clamp(64px, 8vw, 110px); }
.s-gift__latin { margin: 6px 0 4px; font-family: var(--font-display); font-weight: 300; font-size: clamp(46px, 6.4vw, 92px); line-height: .95; letter-spacing: -.01em; }
.s-gift__intro { margin: 10px auto 0; max-width: 32em; color: var(--ink-muted); }
.s-gift__body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); }
.s-gift__stage { position: sticky; top: 104px; align-self: start; height: min(76svh, 760px); display: grid; grid-template-rows: 1fr auto; gap: 18px; }
.s-gift__frame { position: relative; overflow: hidden; background: var(--blush); }
.s-gift__frame::after { content: ""; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); pointer-events: none; }
.s-gift__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1100ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)), transform 2400ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-gift__frame img.is-active { opacity: 1; transform: scale(1); }
.s-gift__counter { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font: 500 11px/1 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); }
.s-gift__counter b { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 34px; letter-spacing: 0; color: var(--accent-ink); }
.s-gift__bar { position: relative; flex: 1; height: 1px; margin: 0 22px; background: var(--line); align-self: center; }
.s-gift__bar i { position: absolute; left: 0; top: 0; height: 1px; width: 25%; background: var(--gold); transition: width 900ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-gift__steps { list-style: none; margin: 0; padding: 0; }
.s-gift__step { min-height: min(72svh, 700px); display: grid; align-content: center; gap: 14px; padding: 24px 0; opacity: .32; transition: opacity 900ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-gift__step.is-active { opacity: 1; }
.s-gift__step .s-step__no { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(64px, 7vw, 104px); line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--accent-ink); }
.s-gift__step h3 { margin: 4px 0 0; font-family: var(--font-serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.4; letter-spacing: -.02em; }
.s-gift__step p { margin: 0; max-width: 26em; color: var(--ink-muted); }
.s-gift__img-inline { display: none; }
@media (max-width: 960px) {
  .s-gift__body { grid-template-columns: 1fr; }
  .s-gift__stage { display: none; }
  .s-gift__step { min-height: 0; opacity: 1; padding: 0 0 56px; }
  .s-gift__img-inline { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 10px; background: var(--blush); }
}

/* ---------------------------------------------------------------- duo: worn arch + product inset (muffler, tote) */
.s-duo { position: sticky; top: 110px; align-self: start; padding: 0 12% 12% 0; }
.s-duo__main { aspect-ratio: 4 / 5; }
.s-duo__main img, .s-duo__inset img { transition: opacity var(--duration-calm, 700ms) var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-duo__main img.is-leaving, .s-duo__inset img.is-leaving { opacity: 0; }
.s-duo__main, .s-duo__inset { position: relative; }
.s-duo__main img, .s-duo__inset img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-duo__inset { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 5; overflow: hidden; border: 10px solid var(--surface); box-shadow: var(--shadow-lift); background: var(--surface-sunken); }
.s-duo__inset--wide { width: 52%; aspect-ratio: 5 / 4; }
/* a small gold seal on the arch: what's new */
.s-duo__seal { position: absolute; left: -22px; top: 9%; z-index: 1; display: grid; place-content: center; justify-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: var(--action); color: var(--on-action); box-shadow: var(--shadow-lift); transform: rotate(-10deg);
  font: 500 9.5px/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }
.s-duo__seal em { display: block; margin-bottom: 4px; padding-right: .3em; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: 0; text-transform: none; }
.s-duo__seal::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--on-action) 35%, transparent); border-radius: 50%; }
.s-collection__grid--flip > :first-child { order: 2; }
@media (max-width: 960px) { .s-collection__grid--flip > :first-child { order: 0; } .s-duo { position: relative; top: 0; max-width: 520px; justify-self: center; width: 100%; } .s-duo__seal { left: -8px; width: 78px; height: 78px; } }

/* the per-colour line under a swatch set (size, palette) */
.s-swatch-note { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; font-size: 13px; letter-spacing: .02em; color: var(--ink-faint); }
.s-swatch-note span + span::before { content: "·"; margin-right: 18px; color: var(--accent-ink); }

/* ---------------------------------------------------------------- muffler: oat paper, a styling triptych */
.s-muffler { background-color: var(--surface-sunken); }
.s-muffler .s-duo__inset { border-color: var(--surface-sunken); }
.s-styling { margin-top: clamp(96px, 10vw, 150px); }
.s-styling__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-bottom: 22px; margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.s-styling__title { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.3; letter-spacing: -.03em; }
.s-styling__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); gap: clamp(18px, 2.6vw, 40px); align-items: end; }
.s-styling__grid figure { margin: 0; }
.s-styling__grid .spl-arch { aspect-ratio: 4 / 5.2; }
.s-styling__wide { aspect-ratio: 4 / 3; overflow: hidden; background: var(--blush); margin-bottom: 18%; }
.s-styling__tall { aspect-ratio: 4 / 5; overflow: hidden; background: var(--blush); }
.s-styling__wide img, .s-styling__tall img { width: 100%; height: 100%; object-fit: cover; }
.s-styling__grid figcaption { display: grid; gap: 6px; margin-top: 16px; font-size: 13px; line-height: 1.7; color: var(--ink-muted); }
.s-styling__grid figcaption em { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--ink); }
.s-styling__grid figure:nth-child(2) figcaption { margin-top: calc(-18% + 16px); }
@media (max-width: 960px) {
  .s-styling__grid { grid-template-columns: 1fr 1fr; }
  .s-styling__grid figure:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .s-styling__wide { margin-bottom: 0; }
  .s-styling__grid figure:nth-child(2) figcaption { margin-top: 16px; }
}

/* ---------------------------------------------------------------- tote */
.s-cestlavie { font-family: var(--font-display); font-size: 1.2em; color: var(--accent-ink); white-space: nowrap; }
.s-review { margin: 6px 0 0; padding: 22px 0 0 26px; border-top: 1px solid var(--line); position: relative; }
.s-review::before { content: "“"; position: absolute; left: -4px; top: 10px; font-family: var(--font-display); font-size: 54px; line-height: 1; color: var(--gold); }
.s-review p { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--ink); }
.s-review cite { display: flex; gap: 10px; align-items: center; margin-top: 10px; font: 500 11px/1 var(--font-sans); font-style: normal; letter-spacing: .16em; color: var(--ink-faint); }
.s-review cite span { letter-spacing: .1em; color: var(--gold-deep); }

/* ---------------------------------------------------------------- lookbook */
.s-lookbook { overflow: hidden; }
.s-lookbook__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.s-lookbook__ctrl { display: flex; gap: 10px; }
.s-round { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); border: 1px solid var(--accent-ink); background: none; color: var(--ink); cursor: pointer; transition: background-color var(--duration-quick, 240ms), color var(--duration-quick, 240ms); }
.s-round:hover { background: var(--ink); color: var(--surface); }
.s-round svg { width: 20px; height: 10px; }
.s-round svg path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.s-round--prev svg { transform: scaleX(-1); }
.s-lookbook__rail { --edge: max(clamp(24px, 4vw, 48px), (100% - 1320px) / 2); display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; padding: 0 var(--edge) 8px; cursor: grab; overscroll-behavior-x: contain; }
.s-lookbook__rail::-webkit-scrollbar { display: none; }
.s-lookbook__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.s-lookbook__rail figure { flex: none; margin: 0; scroll-snap-align: start; width: clamp(240px, 26vw, 380px); }
.s-lookbook__rail figure:nth-child(3n + 2) { width: clamp(260px, 30vw, 440px); margin-top: 60px; }
.s-lookbook__rail figure:nth-child(3n) { margin-top: 24px; }
.s-lookbook__rail .s-lb__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-sunken); }
.s-lookbook__rail figure:nth-child(odd) .s-lb__img { border-radius: var(--radius-arch) var(--radius-arch) 0 0; }
.s-lookbook__rail img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1600ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-lookbook__rail figure:hover img { transform: scale(1.04); }
.s-lookbook__rail figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }
.s-lookbook__rail figcaption em { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.s-lookbook__progress { position: relative; height: 1px; margin-top: 40px; background: var(--line); }
.s-lookbook__progress i { position: absolute; left: 0; top: 0; height: 1px; width: 20%; background: var(--gold); transition: transform 200ms linear; transform-origin: left; }
@media (max-width: 720px) { .s-lookbook__head { flex-direction: column; align-items: start; } .s-lookbook__ctrl { display: none; } }

/* ---------------------------------------------------------------- the maison line */
.s-line__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.s-line__aside { position: sticky; top: 120px; display: grid; gap: 22px; }
.s-line__aside p { margin: 0; color: var(--ink-muted); max-width: 26em; }
.s-line__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.s-line__list li { border-bottom: 1px solid var(--line); }
.s-line__row { position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 18px; padding: 26px 0; text-decoration: none; color: var(--ink); }
.s-line__no { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--accent-ink); }
.s-line__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.01em; transition: transform 900ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)), color 400ms; }
.s-line__name small { margin-left: 16px; font-family: var(--font-serif); font-size: 15px; font-weight: 400; letter-spacing: .02em; color: var(--ink-muted); vertical-align: middle; }
.s-line__go { font: 500 11px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-ink); }
a.s-line__row:hover .s-line__name { transform: translateX(14px); font-style: italic; }
.s-line__row .spl-lotus { --lotus-size: 34px; position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; transition: opacity 500ms, transform 900ms var(--ease-bloom, cubic-bezier(.22, 1, .36, 1)); }
.s-line__row--soon .s-line__go { color: var(--ink-faint); }
@media (max-width: 960px) { .s-line__grid { grid-template-columns: 1fr; } .s-line__aside { position: static; } }
@media (max-width: 560px) { .s-line__row { grid-template-columns: 34px 1fr; } .s-line__go { grid-column: 2; } .s-line__name small { display: block; margin: 10px 0 0; } }

/* ---------------------------------------------------------------- shop */
.s-shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 56px); margin-top: clamp(56px, 7vw, 96px); }
.s-shop__grid .spl-card__media { aspect-ratio: 4 / 4.6; }
.s-shop__note { margin: clamp(48px, 6vw, 72px) 0 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
@media (max-width: 1080px) { .s-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-shop__grid > :last-child { grid-column: 1 / -1; width: min(100%, calc(50% - clamp(14px, 1.8vw, 28px))); justify-self: center; } }
@media (max-width: 760px) { .s-shop__grid { grid-template-columns: 1fr; } .s-shop__grid > :last-child { width: auto; } }

/* ---------------------------------------------------------------- footer */
.s-footer { background: var(--surface-sunken); padding: clamp(96px, 10vw, 140px) 0 36px; text-align: center; overflow: hidden; }
.s-footer .spl-ornament { --ornament-width: min(520px, 80%); margin-bottom: 64px; }
.s-footer__lockup { display: inline-grid; justify-items: center; gap: 22px; text-decoration: none; }
.s-footer__lockup .spl-lotus { --lotus-size: clamp(110px, 12vw, 150px); }
.s-footer__lockup .spl-wordmark { --wordmark-width: clamp(260px, 30vw, 380px); color: var(--gold); }
.s-footer__tag { margin: 26px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 22px; color: var(--ink-muted); }
.s-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin: 56px 0 72px; }
.s-footer__nav a { font: 400 12px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); }
.s-footer__nav a:hover { color: var(--accent-ink); }
.s-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); }
.s-footer__legal p { margin: 0; }
@media (max-width: 720px) { .s-footer__legal { justify-content: center; text-align: center; } }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal="mask"] { opacity: 1; transform: none; clip-path: none; }
  [data-reveal="mask"] img { transform: none; }
  .s-hero__lotus { display: none; }
  .s-hero__stage.has-video .s-hero__poster { opacity: 1; }
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 720px) {
  .s-br-wide { display: none; }
  .spl-eyebrow { letter-spacing: .26em; }
}
.spl-eyebrow__index { white-space: nowrap; }

/* ---------------------------------------------------------------- phones: comfort pass (layout only; desktop untouched) */
.s-coarse { display: none; }
@media (pointer: coarse) { .s-fine { display: none; } .s-coarse { display: inline; } }
@media (max-width: 960px) {
  /* the inline gift photos carry width/height attributes, which pinned them at full pixel height (700–1000px) and zoomed in */
  .s-gift__img-inline { height: auto; aspect-ratio: auto; }
}
@media (max-width: 720px) {
  .s-section { padding-block: 76px; }
  .spl-eyebrow { font-size: 11.5px; }
  .s-hero__stage { --stage: min(50svh, 108vw); }
  /* the glove medallion's orbit text ran past both screen edges */
  .s-gloves__visual .spl-medallion { --medallion-size: min(340px, 86vw); }
  .s-gloves__name span[data-swatch-latin] { font-size: 26px; }
  /* bigger tap targets: colour dots, text links, footer links */
  .spl-swatch { width: 44px; height: 44px; }
  .spl-swatch__dot { width: 30px; height: 30px; }
  .spl-btn--text { padding: 14px 0; }
  .spl-btn--text::after { bottom: 8px; }
  .s-footer__nav { gap: 0 4px; margin: 40px 0 48px; }
  .s-footer__nav a { padding: 14px 10px; font-size: 12.5px; }
  /* photo pairs: a little more room for the pictures */
  .s-duo { padding: 0 6% 16% 0; }
  .s-duo__inset { border-width: 6px; }
  .s-duo__seal { left: 8px; top: 10px; width: 70px; height: 70px; font-size: 8.5px; }
  .s-duo__seal em { font-size: 21px; }
  .s-editorial { gap: 14px; margin-top: 72px; }
  .s-styling { margin-top: 72px; }
  .s-styling__grid { gap: 14px; }
  /* the collection list: one line per row instead of three */
  .s-line__row { padding: 18px 0; }
  .s-line__name { font-size: 32px; }
  .s-line__name small { display: inline; margin: 0 0 0 10px; font-size: 14px; }
  .s-line__go { font-size: 11.5px; }
  .s-review cite, .s-gift__counter { font-size: 11.5px; }
  .s-shop__grid .spl-card__media { aspect-ratio: 4 / 4.2; }
  .s-shop__note { font-size: 13px; line-height: 1.7; padding-inline: 12px; }
  /* menu drawer: fits short phones (iPhone SE) and scrolls if it must */
  .s-drawer { overflow-y: auto; align-content: start; gap: 6px; padding-top: 92px; }
  .s-drawer a { padding: 13px 0; font-size: 23px; }
}

/* ---------------------------------------------------------------- phones & tablets: shop without scrolling back and forth
   one column: name → photo → colour dots → Coupang button → description → features.
   the dots sit right under the photo they change, and the buy button right under the dots. */
@media (max-width: 960px) {
  .s-collection__grid { row-gap: 16px; }
  .s-collection__text { display: contents; }
  .s-collection__text > .spl-heading { order: 1; margin-bottom: 4px; }
  .s-collection__grid > .s-gloves__visual, .s-collection__grid > .s-duo { order: 2; }
  .s-collection__text > .spl-swatches { order: 3; }
  .s-collection__text > .s-collection__cta { order: 4; margin: 0 0 18px; }
  .s-collection__text > .s-collection__desc { order: 5; }
  .s-collection__text > .spl-features { order: 6; }
  .s-collection__text > .s-collection__specs { order: 7; }
  .s-collection__text > .s-review { order: 8; }
  .s-gloves__visual { gap: 14px; }
  /* short phones: cap the photo pair by screen height so photo + dots + button share one screen */
  .s-duo { width: min(100%, 520px, 38svh); justify-self: center; }
  .s-gloves__visual .spl-medallion { --medallion-size: min(340px, 86vw, 44svh); }
}