/* ==========================================================================
   Ugo Monye — redesign
   Palette is built outward from the logo's oxblood (#3B121B). Coral comes from
   the house's beadwork and nude pink from the Opulence collection.
   ========================================================================== */
:root {
  --trio-ar: 1239 / 1443;
  --oxblood: #3b121b;
  --ink: #1d080d;
  --wine: #572932;
  --bone: #efe9df;
  --ivory: #faf6ef;
  --nude: #eec9c0;
  --coral: #c8452a;
  --gold: #c9a15f;
  --line: rgba(59, 18, 27, .22);
  --muted: #6d5459;

  --sans: "Montserrat", sans-serif;
  --display: var(--sans);

  --gutter: clamp(16px, 2.6vw, 40px);
  --r-lg: clamp(22px, 3vw, 44px);
  --r-md: clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(.76, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --head-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--oxblood);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--oxblood); color: var(--ivory); padding: 10px 16px; border-radius: 99px; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display { font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

/* Logo is a transparent PNG used as a mask so it can take any brand colour */
.logo-mask, .mark-mask { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.logo-mask { --m: url(../img/logo.png); aspect-ratio: 863 / 618; }
.mark-mask { --m: url(../img/mark.png); aspect-ratio: 417 / 475; }

/* Buttons + chips ------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 99px; background: var(--oxblood); color: var(--ivory); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s, transform .3s var(--ease-out); }
.btn:hover { background: var(--coral); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.btn--ghost:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--ivory); }
.btn--light { background: var(--ivory); color: var(--oxblood); }
.btn--light:hover { background: var(--coral); color: var(--ivory); }
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border: 1px solid currentColor; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

/* Header ---------------------------------------------------------------- */
.head { position: fixed; inset: 0 0 auto; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--head-h); padding: 0 var(--gutter); pointer-events: none; transition: color .35s, transform .5s var(--ease); }
.head > * { pointer-events: auto; }
.head__logo { width: 62px; justify-self: start; }
.head__nav { display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: rgba(250, 246, 239, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--oxblood); box-shadow: 0 1px 0 rgba(59, 18, 27, .06); }
.head__nav a { padding: 8px 16px; border-radius: 99px; font-size: 12px; font-weight: 500; transition: background .25s, color .25s; }
.head__nav a:hover, .head__nav a[aria-current] { background: var(--oxblood); color: var(--ivory); }
.head__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.head__end .btn { min-height: 40px; padding: 0 18px; font-size: 11px; }
.head.on-dark { color: var(--ivory); }
.head.is-hidden { transform: translateY(-110%); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(250, 246, 239, .9); color: var(--oxblood); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 25px; }
.menu-open .burger span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 90px var(--gutter) 32px; background: var(--oxblood); color: var(--ivory); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s .6s; }
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path .6s var(--ease); }
.menu a.display { font-size: clamp(32px, 10.5vw, 56px); display: block; }
.menu__meta { font-size: 13px; opacity: .75; }

/* Loader + hero — reference: "loding video sample" ------------------------ */
.loader { position: fixed; inset: 0; z-index: 90; background: var(--bone); overflow: hidden; }
.loader__arch { position: absolute; overflow: hidden; background: var(--nude); will-change: left, top, width, height; }
.loader__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.no-loader .loader { display: none; }

.hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: var(--head-h); background: var(--bone); overflow: hidden; }
.hero__top { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: end; gap: clamp(20px, 4vw, 72px); padding: clamp(12px, 2vh, 32px) var(--gutter) clamp(20px, 3.4vh, 44px); }
.hero h1 { font-size: clamp(46px, min(7.4vw, 12.4vh), 142px); font-weight: 600; }
.line { display: block; overflow: hidden; white-space: nowrap; padding-bottom: .06em; margin-bottom: -.06em; }
.line > span { display: inline-block; transform: translateY(0); transition: transform 1.1s var(--ease); }
.is-loading .hero .line > span { transform: translateY(112%); }
.line:nth-child(2) > span { transition-delay: .09s; } .line:nth-child(3) > span { transition-delay: .18s; }
.hero__spin { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: .68em; height: .68em; margin-left: .12em; background: var(--oxblood); color: var(--bone); border-radius: 50%; }
.hero__spin .mark-mask { width: 46%; animation: flip 7s var(--ease) infinite; }
@keyframes flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.hero__aside { display: grid; gap: 16px; justify-items: start; max-width: 40ch; padding-bottom: .6vh; transition: opacity .9s .35s, transform .9s .35s var(--ease-out); }
.hero__aside p { font-size: clamp(14px, 1.15vw, 16px); line-height: 1.55; }
.is-loading .hero__aside { opacity: 0; transform: translateY(16px); }
.is-loading .head { transform: translateY(-110%); }
.rail { position: relative; flex: 0 0 auto; height: clamp(190px, 41vh, 460px); overflow: hidden; }
.rail__track { display: flex; gap: clamp(8px, 1vw, 16px); width: max-content; height: 100%; animation: drift 70s linear infinite; }
.is-loading .rail__track { animation-play-state: paused; }
.rail__item { flex: none; height: 100%; aspect-ratio: .86; overflow: hidden; background: var(--nude); }
.rail__item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transition: transform 1.4s var(--ease-out); }
.rail__item:hover img { transform: scale(1.06); }
/* The rail alternates the two halves of the monogram: arch, then U */
.rail__item:nth-child(odd) { border-radius: 999px 999px 0 0; }
.rail__item:nth-child(even) { border-radius: 0 0 999px 999px; }
.is-loading .rail__item { visibility: hidden; }
@keyframes drift { to { transform: translateX(calc(-50% - clamp(4px, .5vw, 8px))); } }

/* Marquee strip */
.ticker { background: var(--ink); color: var(--ivory); overflow: hidden; padding: 12px 0; }
.ticker__track { display: flex; width: max-content; animation: drift2 38s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ticker i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.ticker span:nth-of-type(even) { color: var(--nude); }
.ticker--logo { background: var(--oxblood); padding: 16px 0; }
.ticker--logo span { font: 600 clamp(20px, 2.2vw, 30px)/1 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--ivory) !important; }
.ticker--logo .mark-mask { width: 22px; color: var(--gold); }
@keyframes drift2 { to { transform: translateX(-50%); } }

/* Statement — scroll-coloured words with inline imagery ------------------- */
.statement { padding: clamp(64px, 11vw, 150px) var(--gutter) clamp(52px, 8vw, 110px); background: var(--ivory); }
.statement__shows { display: grid; justify-items: center; gap: 22px; margin-bottom: clamp(48px, 7vw, 96px); text-align: center; }
.statement__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(24px, 5vw, 80px); font: 600 clamp(20px, 2.6vw, 36px)/1.1 var(--display); }
.statement__row a { transition: color .3s; } .statement__row a:hover { color: var(--coral); }
.statement__text { max-width: 1440px; margin: 0 auto; font-family: var(--display); font-size: clamp(27px, 3.9vw, 66px); font-weight: 500; line-height: 1.24; letter-spacing: -.03em; }
.word { color: rgba(59, 18, 27, .16); transition: color .35s; }
.word.on { color: var(--oxblood); }
.inl { display: inline-block; vertical-align: -.12em; height: .86em; border-radius: 99px; overflow: hidden; opacity: .2; transition: opacity .5s, transform .6s var(--ease-out); transform: scale(.85); }
.inl.on { opacity: 1; transform: none; }
.inl img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 18%; }
.inl--img { width: 2.1em; }
.inl--dot { width: .86em; display: inline-flex; align-items: center; justify-content: center; background: var(--coral); color: var(--ivory); }
.inl--dot .mark-mask { width: 44%; }
.inl--chip { height: auto; vertical-align: .12em; padding: .32em .9em; border: 1px solid var(--oxblood); font: 600 clamp(9px, 1.05vw, 15px)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

/* Bento — reference: "websitelayout_1concept" ------------------------------ */
.bento-wrap { padding: 0 var(--gutter) clamp(52px, 8vw, 110px); background: var(--ivory); }
.bento { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .38fr); grid-template-rows: auto auto; gap: clamp(10px, 1.1vw, 18px); color: var(--oxblood); }
.bento > * { border-radius: var(--r-md); overflow: hidden; }
.bento__look { position: relative; grid-row: 1 / 3; grid-column: 1; min-height: 0; background: var(--nude); }
.bento__look > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.swatches { position: absolute; right: clamp(10px, 1.4vw, 22px); top: 50%; transform: translateY(-50%); display: grid; gap: clamp(6px, .8vw, 12px); z-index: 2; }
.swatch { position: relative; display: block; width: clamp(38px, 4vw, 62px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ivory); overflow: hidden; transition: transform .4s var(--ease-out); }
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatches li { position: relative; }
.swatches li:hover .swatch, .swatches li:focus-within .swatch { transform: scale(1.14); }
.swatches em { position: absolute; right: calc(100% + 8px); top: 50%; transform: translate(6px, -50%); padding: 5px 10px; border-radius: 99px; background: var(--ink); color: var(--ivory); font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.swatches li:hover em { opacity: 1; transform: translate(0, -50%); }
.bento__title { grid-column: 2 / 4; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.8vw, 44px); background: var(--nude); color: var(--oxblood); }
.bento__title h2 { font-size: clamp(44px, 7.4vw, 136px); font-weight: 600; line-height: .94; }
.bento__title h2 small { display: block; font: inherit; font-size: .6em; margin-top: .08em; }
.bento__foot { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; max-width: 58ch; }
.bento__foot .stars { font: 600 30px/.8 var(--display); color: var(--coral); letter-spacing: .05em; }
.bento__foot p { font-size: clamp(14px, 1.1vw, 16px); }
.bento__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bento__wide { position: relative; min-height: clamp(200px, 19vw, 320px); }
.bento__wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.4s var(--ease-out); }
.bento:hover .bento__wide img { transform: scale(1.04); }
.bento__explore { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--nude); color: var(--oxblood); writing-mode: vertical-rl; transform: rotate(180deg); font: 600 clamp(20px, 2.4vw, 38px)/1 var(--display); transition: background .3s, color .3s; }
.bento__explore:hover { background: var(--coral); color: var(--ivory); }
.bento__knot { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: clamp(54px, 6vw, 92px); aspect-ratio: 1; border-radius: 50% !important; background: var(--ink); color: var(--gold); pointer-events: none; }
.bento__knot .mark-mask { width: 46%; animation: flip 7s var(--ease) infinite; }
/* The Deity: runway film and hand-lettered title */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.bento__look--film { background: #000; }
.bento__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.bento__sound { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(250, 246, 239, .4); border-radius: 50%; background: rgba(16, 6, 9, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ivory); cursor: pointer; transition: background .25s, border-color .25s; }
.bento__sound:hover, .bento__sound[aria-pressed="true"] { background: rgba(16, 6, 9, .78); border-color: var(--gold); }
.bento__sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bento__sound .spk { fill: currentColor; }
.bento__sound[aria-pressed="false"] .on, .bento__sound[aria-pressed="true"] .off { display: none; }
.deity-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 26px); }
.deity-type { display: block; width: clamp(230px, 33vw, 600px); height: auto; }
.bento__title .deity-head small { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 600 clamp(12px, 1.1vw, 16px)/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.bento__title .deity-head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: soon 2.4s var(--ease) infinite; }
@keyframes soon { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201, 161, 95, .5); } 60% { opacity: .55; box-shadow: 0 0 0 8px rgba(201, 161, 95, 0); } }
@media (prefers-reduced-motion: reduce) { .bento__title .deity-head small::before { animation: none; } }

/* Collections slider — reference: "collectiontransition sample" ------------ */
.slides { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--ink); color: var(--ivory); --panel: 33.33%; }
.slides canvas, .slides__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.slides__fallback { display: none; object-fit: cover; }
.no-gl .slides__fallback { display: block; }
.slide-panel { position: absolute; top: 0; bottom: 0; left: 0; width: var(--panel); display: flex; flex-direction: column; padding: clamp(84px, 13vh, 130px) clamp(20px, 3vw, 52px) clamp(22px, 4vh, 40px); overflow: hidden; will-change: transform, clip-path; }
.slide-panel__num { font-size: 12px; letter-spacing: .08em; opacity: .75; margin-bottom: clamp(20px, 4vh, 44px); }
.slide-panel__eyebrow { margin-bottom: 14px; color: var(--gold); }
.slide-panel h3 { font-size: clamp(30px, 3.3vw, 60px); line-height: 1.06; }
.slide-panel__copy { margin-top: 22px; max-width: 34ch; font-size: clamp(13px, 1.02vw, 15px); opacity: .82; }
.slide-panel__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(250, 246, 239, .22); font-size: 13px; }
.slide-panel__foot a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; transition: color .25s; }
.slide-panel__foot a:hover { color: var(--gold); }
.slides__ctrl { position: absolute; right: var(--gutter); bottom: clamp(22px, 4vh, 40px); z-index: 6; display: flex; align-items: center; gap: 8px; }
.round { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(250, 246, 239, .65); color: var(--ivory); background: rgba(29, 8, 13, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s, color .25s; }
.round:hover { background: var(--ivory); color: var(--oxblood); }
.slides__bar { position: absolute; left: var(--panel); right: 0; bottom: 0; height: 2px; z-index: 6; background: rgba(250, 246, 239, .2); }
.slides__bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--gold); }

/* Depth moment — type behind the figures ----------------------------------- */
.throne { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--oxblood); color: var(--ivory); }
.throne__type { position: absolute; left: 0; right: 0; top: clamp(70px, 10vh, 110px); text-align: center; font-size: clamp(50px, 11.6vw, 240px); font-weight: 600; line-height: 1; will-change: transform; }
.throne__type span { display: block; }
.throne__fig { position: absolute; left: 50%; bottom: -5vh; height: 68vh; aspect-ratio: var(--trio-ar); transform: translateX(-50%); will-change: transform; }
.throne__fig img { width: 100%; height: 100%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35)); }
.throne__note { position: absolute; left: var(--gutter); bottom: clamp(22px, 5vh, 56px); z-index: 3; max-width: 24ch; font-size: 13px; line-height: 1.5; }
.stamp { position: absolute; right: clamp(16px, 5vw, 90px); top: clamp(96px, 44vh, 480px); z-index: 3; width: clamp(92px, 11vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--coral); color: var(--ivory); }
.stamp svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.stamp svg text { font: 600 9.5px var(--sans); letter-spacing: .04em; fill: currentColor; text-transform: uppercase; }
.stamp .mark-mask { position: absolute; left: 50%; top: 50%; width: 26%; transform: translate(-50%, -50%); }
@keyframes spin { to { transform: rotate(360deg); } }
.tab { position: absolute; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: clamp(18px, 2.2vw, 30px) clamp(22px, 3vw, 44px); background: var(--nude); color: var(--oxblood); border-top-left-radius: var(--r-md); font: 600 clamp(20px, 2.6vw, 42px)/1 var(--display); transition: background .3s, color .3s; }
.tab:hover { background: var(--coral); color: var(--ivory); }

/* Looks grid ---------------------------------------------------------------- */
.looks { padding: clamp(64px, 9vw, 130px) var(--gutter); background: var(--ivory); }
.looks__head { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.looks__head h2 { font-size: clamp(46px, 7.4vw, 136px); }
.looks__head p { max-width: 30ch; font-size: 14px; }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 22px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.filters::-webkit-scrollbar { display: none; }
.filters button { min-height: 52px; padding: 0 26px; font-size: 13px; transition: background .25s, color .25s; }
.filters button:hover { background: rgba(59, 18, 27, .08); }
.filters button[aria-pressed="true"] { background: var(--oxblood); color: var(--ivory); border-color: var(--oxblood); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 18px); }
.card { position: relative; display: block; aspect-ratio: .74; border-radius: var(--r-md); overflow: hidden; background: var(--bone); opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.card.in { opacity: 1; transform: none; }
.card > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transition: transform 1.2s var(--ease-out); }
.card:hover > img { transform: scale(1.05); }
.card__tag { position: absolute; left: 10px; top: 10px; padding: 6px 11px; border-radius: 99px; background: rgba(250, 246, 239, .9); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card__label { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: calc(var(--r-md) - 6px); background: var(--ivory); }
.card__label b { display: block; font: 600 clamp(17px, 1.6vw, 25px)/1.05 var(--display); }
.card__label small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.card__go { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--oxblood); color: var(--ivory); transition: background .25s, transform .4s var(--ease-out); }
.card:hover .card__go { background: var(--coral); transform: rotate(-45deg); }
.looks__more { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 44px); }

/* The House ------------------------------------------------------------------ */
.house { position: relative; padding: clamp(10px, 1.1vw, 18px); background: var(--ink); }
.house__in { position: relative; display: grid; gap: clamp(10px, 1.1vw, 18px); padding: clamp(72px, 9vw, 130px) clamp(16px, 5vw, 80px) clamp(20px, 5vw, 80px); border-radius: var(--r-lg); overflow: hidden; color: var(--ivory); }
.house__bg { position: absolute; inset: 0; z-index: 0; }
.house__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.house__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 8, 13, .72), rgba(29, 8, 13, .4) 45%, rgba(29, 8, 13, .8)); }
.house__in > :not(.house__bg) { position: relative; z-index: 1; }
.house h2 { font-size: clamp(42px, 6.6vw, 120px); margin-bottom: clamp(20px, 3vw, 44px); }
.h-card { padding: clamp(20px, 2.8vw, 44px); border-radius: var(--r-md); }
.h-card h3 { margin-bottom: 10px; font: 600 clamp(22px, 2.5vw, 40px)/1.06 var(--display); }
.h-card p { max-width: 62ch; font-size: clamp(14px, 1.1vw, 16px); }
.h-card--light { background: var(--ivory); color: var(--oxblood); }
.house__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.1vw, 18px); }
.house__crest { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: clamp(50px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--gold); }
.house__crest .mark-mask { width: 44%; }

/* CTA + footer --------------------------------------------------------------- */
.cta { padding: clamp(10px, 1.1vw, 18px); background: var(--ink); }
.cta__in { position: relative; display: flex; min-height: clamp(460px, 74vh, 800px); padding: clamp(24px, 4vw, 64px); border-radius: var(--r-lg); overflow: hidden; color: var(--ivory); }
.cta__in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.cta__in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 8, 13, .78), rgba(29, 8, 13, .05) 72%); }
.cta__body { position: relative; z-index: 1; align-self: end; display: grid; gap: 20px; justify-items: start; }
.cta h2 { max-width: 12ch; font-size: clamp(44px, 7vw, 128px); line-height: 1; }
.foot { padding: clamp(40px, 5vw, 72px) var(--gutter) 24px; background: var(--ink); color: var(--ivory); font-size: 14px; }
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px clamp(20px, 3vw, 48px); padding-bottom: clamp(28px, 4vw, 56px); }
.foot__logo { width: 92px; color: var(--ivory); margin-bottom: 18px; }
.foot__about { max-width: 38ch; opacity: .78; }
.foot h4 { margin-bottom: 12px; color: var(--gold); }
.foot li { margin-bottom: 8px; }
.foot li a { display: inline-block; padding: 2px 0; transition: color .25s; }
.foot li a:hover { color: var(--nude); }
.foot address { font-style: normal; }
.foot__base { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(250, 246, 239, .18); font-size: 12px; opacity: .72; }

/* Lookbook page -------------------------------------------------------------- */
.lb-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; background: var(--panel-c, var(--oxblood)); color: var(--ivory); }
.lb-hero__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: calc(var(--head-h) + 30px) var(--gutter) clamp(28px, 5vw, 64px); }
.lb-hero h1 { font-size: clamp(44px, 6.6vw, 124px); line-height: 1; }
.lb-hero p { max-width: 50ch; font-size: clamp(14px, 1.15vw, 17px); opacity: .88; }
.lb-hero__img { position: relative; overflow: hidden; min-height: 60vh; }
.lb-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; animation: settle 1.8s var(--ease-out) both; }
@keyframes settle { from { transform: scale(1.1); } to { transform: none; } }
.lb-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-tabs a { min-height: 54px; padding: 0 28px; background: rgba(250, 246, 239, .12); font-size: 13px; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-out); }
.lb-tabs a:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); transform: translateY(-3px); }
.lb-tabs a[aria-current] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.lb-tabs--dark a { background: var(--oxblood); border-color: var(--oxblood); color: var(--ivory); }
.lb-tabs--dark a:hover { background: var(--coral); border-color: var(--coral); color: var(--ivory); }
.gallery { columns: 3; column-gap: clamp(8px, 1.1vw, 18px); padding: clamp(10px, 1.1vw, 18px); background: var(--ivory); }
.gallery button { display: block; width: 100%; margin-bottom: clamp(8px, 1.1vw, 18px); break-inside: avoid; border-radius: var(--r-md); overflow: hidden; background: var(--bone); opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.gallery button.in { opacity: 1; transform: none; }
.gallery button:nth-child(5n + 1) { border-radius: 999px 999px var(--r-md) var(--r-md); }
.gallery img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.gallery button:hover img { transform: scale(1.03); }
.lb-next { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: clamp(36px, 5vw, 72px) var(--gutter); background: var(--ivory); }
.lb-next a.display { font-size: clamp(30px, 5vw, 92px); transition: color .3s; }
.lb-next a.display:hover { color: var(--coral); }
dialog.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(29, 8, 13, .96); color: var(--ivory); }
dialog.lightbox::backdrop { background: transparent; }
.lightbox__in { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 64px 12px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; }
.lightbox .round { position: absolute; }
.lightbox .x { top: 12px; right: 12px; }
.lb-arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 96px; height: min(240px, 46vh); padding: 0; border: 0; border-radius: 18px; background: transparent; color: var(--ivory); transform: translateY(-50%); cursor: pointer; transition: background .25s, color .25s; }
.lb-arrow svg { width: 40px; height: 96px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.lb-arrow:hover { background: rgba(250, 246, 239, .08); }
.lightbox .p { left: 12px; }
.lightbox .n { right: 12px; }
.lb-arrow.p:hover svg { transform: translateX(-6px); }
.lb-arrow.n:hover svg { transform: translateX(6px); }
/* On a lookbook cover the arrows lead to the neighbouring lookbooks, over the photo */
.lb-arrow--hero { width: 76px; height: min(220px, 40vh); background: rgba(14, 7, 8, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lb-arrow--hero:hover { background: rgba(14, 7, 8, .62); }
.lb-hero__img .p { left: 16px; }
.lb-hero__img .n { right: 16px; }
.lb-arrow:focus-visible { outline: 2px solid var(--ivory); outline-offset: -4px; }
@media (min-width: 1001px) { .lightbox__in { padding-left: 124px; padding-right: 124px; } }

/* Appointments page ----------------------------------------------------------- */
.ap-hero { min-height: 100vh; min-height: 100svh; background: var(--oxblood); color: var(--ivory); }
.ap-hero__left { display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: calc(var(--head-h) + 26px) var(--gutter) 0; }
.ap-hero h1 { font-size: clamp(42px, 6.4vw, 120px); line-height: 1; text-align: center; }
.ap-hero .rail__track { animation-duration: 110s; }
.ap-hero .rail { align-self: stretch; height: clamp(150px, 24vh, 240px); margin: clamp(40px, 6vh, 72px) calc(var(--gutter) * -1) 0; }
.ap-form { display: grid; gap: 16px; width: min(720px, 100%); margin-top: clamp(28px, 5vh, 56px); }
.ap-form > p { max-width: 54ch; margin: 0 auto 8px; font-size: 14px; text-align: center; opacity: .85; }
.field { display: grid; gap: 6px; }
.field label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid transparent; border-radius: 14px; background: var(--ivory); color: var(--oxblood); font-size: 16px; transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(200, 69, 42, .45); }
.field textarea { min-height: 96px; resize: vertical; }
.ap-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ap-form .btn { justify-content: center; min-height: 52px; }
.ap-form small { text-align: center; opacity: .75; }
.stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.1vw, 18px); padding: clamp(10px, 1.1vw, 18px); background: var(--ink); }
.stores .h-card p { font-size: 14px; }

/* Collections page ------------------------------------------------------------- */
.cx-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; min-height: 62vh; padding: calc(var(--head-h) + 30px) var(--gutter) clamp(28px, 4vw, 56px); background: var(--bone); }
.cx-intro h1 { font-size: clamp(50px, 9.4vw, 176px); font-weight: 600; line-height: .98; }
.cx-intro__side { display: grid; gap: 20px; }
.cx-intro__side p { max-width: 42ch; }
.cx h2 { font-size: clamp(44px, 6.6vw, 124px); line-height: 1; }
.cx .slide-panel__num { margin: 0; }
.cx__eyebrow { color: var(--gold); }
.cx__btn { justify-self: start; align-self: flex-start; min-height: 54px; margin-top: 6px; padding: 0 28px; font-size: 13px; }
a.lb-hero__img { display: block; }
a.lb-hero__img img { animation: none; transition: transform 1.4s var(--ease-out); }
a.lb-hero__img:hover img { transform: scale(1.04); }
.cx-end { justify-content: center; text-align: center; padding-block: clamp(56px, 8vw, 120px); }
@media (min-width: 821px) and (min-height: 620px) {
  /* Each collection slides up and over the last */
  .cx { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
  .cx { box-shadow: 0 -24px 60px rgba(29, 8, 13, .28); }
  .cx-end { position: relative; z-index: 1; }
  .cx { scroll-margin-top: -90px; }
  /* The words sit in the middle of the cloth panel, level with the model */
  .cx .lb-hero__text { justify-content: center; padding-bottom: calc(var(--head-h) + 30px); }
}

/* Page motion: silk falls over the page, and lifts off the next ---------------- */
.pt { position: fixed; inset: 0; z-index: 95; }
canvas.pt { width: 100%; height: 100%; }
.pt__mark { z-index: 96; display: flex; align-items: center; justify-content: center; color: var(--ivory); pointer-events: none; }
.pt__mark .mark-mask { width: clamp(52px, 6vw, 84px); }
/* Covers the new page from its first paint until the silk takes over */
.pt-drape body::after { content: ""; position: fixed; inset: 0; z-index: 94; background: var(--pt-img, none) center / 100% 100% no-repeat, color-mix(in srgb, var(--pt-c, #4a1622) 78%, #000); }
/* The monogram stays on the cover too, so it never blinks out between the two pages */
.pt-drape body::before { content: ""; position: fixed; left: 50%; top: 50%; z-index: 95; width: clamp(52px, 6vw, 84px); aspect-ratio: 417 / 475; background: var(--ivory); -webkit-mask: url(../img/mark.png) center / contain no-repeat; mask: url(../img/mark.png) center / contain no-repeat; transform: translate(-50%, -50%); }

/* Custom cursor ------------------------------------------------------------------ */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea { cursor: text !important; }
.has-cursor select, .has-cursor dialog button { cursor: pointer !important; }
.has-cursor dialog, .has-cursor dialog * { cursor: auto !important; }
.has-cursor dialog button { cursor: pointer !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 120; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.cursor.on { opacity: 1; }
.cursor span { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1.5px rgba(250, 246, 239, .85); color: var(--ivory); font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%); transition: width .35s var(--ease-out), height .35s var(--ease-out), background .25s, opacity .2s; }
.cursor[data-state="link"] span { width: 52px; height: 52px; background: rgba(200, 69, 42, .22); }
.cursor[data-state="label"] span { width: 96px; height: 96px; background: var(--oxblood); }
.cursor[data-state="off"] span { opacity: 0; }
.cursor.down span { scale: .86; }

/* Press logos: masks so they take the colour of the section they sit on ------------ */
.press { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 30px); text-align: center; }
.press__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px clamp(36px, 6.5vw, 104px); }
.press__logo { display: block; height: clamp(30px, 3.5vw, 50px); background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.press__logo--vogue { --m: url(../img/press/vogue.svg); width: clamp(112px, 12.5vw, 178px); }
.press__logo--gq { --m: url(../img/press/gq.svg); width: clamp(66px, 7vw, 100px); }
.press__logo--forbes { --m: url(../img/press/forbes.svg); width: clamp(100px, 10.5vw, 150px); }
.press__logo--glitz { --m: url(../img/press/glitz.png); width: clamp(104px, 11vw, 158px); }
.statement .press { margin-bottom: clamp(48px, 6vw, 84px); }
.ap-hero .press { margin-top: clamp(36px, 5vh, 60px); }
@media (max-width: 520px) {
  .press__row { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; width: 100%; max-width: 320px; }
}

.ico { display: inline-block; flex: none; width: .72em; height: .72em; vertical-align: -.04em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Scroll reveal --------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --head-h: 68px; }
  .head { grid-template-columns: 1fr auto; }
  .head__nav, .head__end .btn { display: none; }
  .burger { display: block; }
  .head__logo { width: 52px; }
  .hero__top { grid-template-columns: 1fr; gap: 16px; align-items: start; align-content: end; }
  .line { white-space: normal; }
  .hero h1 { font-size: clamp(40px, 11.6vw, 82px); }
  .rail { height: clamp(190px, 36vh, 340px); }
  .bento { grid-template-columns: minmax(0, 1fr) 72px; }
  .bento__title { grid-column: 1 / -1; grid-row: 1; }
  .bento__look { grid-column: 1 / -1; grid-row: 2; min-height: 118vw; }
  .bento__wide { grid-column: 1; grid-row: 3; min-height: 56vw; }
  .bento__explore { grid-column: 2; grid-row: 3; }
  .bento__knot { display: none; }
  .swatches em { opacity: 1; transform: translate(0, -50%); }
  .slides { --panel: 0%; height: auto; min-height: 0; display: grid; grid-template-rows: 62vh auto; }
  .slides canvas, .slides__fallback { height: 62vh; bottom: auto; }
  .slides__stage { grid-row: 2; position: relative; min-height: 370px; }
  .slide-panel { position: absolute; inset: 0; width: 100%; padding: 26px var(--gutter) 22px; }
  .slide-panel h3 { font-size: clamp(30px, 8.6vw, 54px); }
  .slide-panel__num { margin-bottom: 14px; }
  .slides__ctrl { top: calc(62vh - 62px); bottom: auto; right: 12px; }
  .slides__bar { left: 0; top: 62vh; bottom: auto; }
  .throne { height: auto; min-height: 0; aspect-ratio: auto; padding-top: 96px; }
  .throne__type { position: relative; top: 0; font-size: 12.4vw; }
  .throne__fig { position: relative; left: 50%; bottom: 0; margin-top: -6vw; height: auto; width: 92vw; }
  .throne__note { position: relative; left: 0; bottom: 0; padding: 18px var(--gutter) 90px; max-width: none; }
  .stamp { top: auto; bottom: 170px; right: 12px; width: 84px; }
  .hero__spin { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__label { padding: 9px 10px; }
  .card__go { width: 30px; height: 30px; }
  .card__tag { font-size: 9px; padding: 5px 8px; }
  .house__pair { grid-template-columns: 1fr; }
  .cta__in::after { background: linear-gradient(0deg, rgba(29, 8, 13, .85), rgba(29, 8, 13, .05) 72%); }
  .lb-hero, .ap-hero { grid-template-columns: 1fr; }
  .lb-hero__img { order: -1; min-height: 62vh; }
  .cx-intro { grid-template-columns: 1fr; min-height: 0; }
  .lb-tabs a { min-height: 50px; padding: 0 22px; }
  .lb-hero__text { padding-top: 26px; }
  .gallery { columns: 2; }
  .ap-hero .rail { height: 170px; }
  .stores { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ap-form__two { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv, .card, .gallery button { opacity: 1; transform: none; }
}

/* Header button stays visible over dark sections */
.head.on-dark .btn { background: var(--ivory); color: var(--oxblood); }
.head.on-dark .btn:hover { background: var(--coral); color: var(--ivory); }

/* ==========================================================================
   Dark edition. Everything above matches the light site; this layer recolours it.
   Oxblood is the page, ink and wine set the sections apart, ivory carries the
   type, and nude, gold and coral stay as accents.
   ========================================================================== */
:root { color-scheme: dark; --black: #0e0708; --brown: #160d09; --hair: rgba(250, 246, 239, .12); --line: rgba(250, 246, 239, .22); --muted: #cdb3ad; }
html { background: var(--oxblood); }
body { background: var(--oxblood); color: var(--ivory); }
:focus-visible { outline-color: var(--gold); }

/* Buttons: ivory is the primary fill on every dark surface */
.btn { background: var(--ivory); color: var(--oxblood); }
.btn:hover { color: var(--ivory); }
.btn--ghost { background: transparent; color: inherit; }
.btn--ghost:hover { background: var(--ivory); border-color: var(--ivory); color: var(--oxblood); }

/* Header */
.head { color: var(--ivory); }
.head__nav { background: rgba(29, 8, 13, .72); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(250, 246, 239, .14); }
.head__nav a:hover, .head__nav a[aria-current] { background: var(--ivory); color: var(--oxblood); }
.burger { background: rgba(29, 8, 13, .72); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(250, 246, 239, .2); }
.menu { background: var(--ink); }

/* Blurring what sits behind these means recalculating the blur every time the moving cloth
   beneath them redraws, so on this edition they are nearly solid instead */
.head__nav, .burger, .round { -webkit-backdrop-filter: none; backdrop-filter: none; }
.head__nav, .burger { background: rgba(14, 7, 8, .86); }
.round { background: rgba(14, 7, 8, .78); }

/* Loader + hero */
/* The loader is see-through so its arches play over the moving cloth */
.loader { background: transparent; }
.rail-wait .rail__item { visibility: hidden; }
.rail-wait .rail__track { animation-play-state: paused; }
.hero { background: var(--ink); }
.hero__fabric, .cx-intro__fabric { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__fabric, .cx-intro__fabric, .ap-hero__fabric { opacity: 0; transition: opacity .9s var(--ease-out); }
.hero__fabric.is-lit, .cx-intro__fabric.is-lit, .ap-hero__fabric.is-lit { opacity: 1; }
.hero__top, .hero .rail { position: relative; z-index: 1; }
.loader__arch, .rail__item { background: var(--wine); }
.hero__spin { background: var(--nude); color: var(--oxblood); }

/* Tickers */
.ticker { background: var(--wine); }
.ticker--logo { background: var(--oxblood); }

/* Statement */
.statement, .bento-wrap { background: var(--ink); }
.statement__row a:hover, .lb-next a.display:hover { color: var(--nude); }
.word { color: rgba(250, 246, 239, .16); }
.word.on { color: var(--ivory); }
.inl--chip { border-color: var(--nude); color: var(--nude); }

/* Bento */
.bento { color: var(--ivory); }
.bento__look { background: var(--wine); }
.bento__title { background: var(--black); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--hair); }
.bento__foot .stars { color: var(--gold); }
.bento__explore { background: var(--black); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--hair); }
.bento__knot { background: var(--gold); color: var(--ink); }

/* Slider: each panel takes its accent from its own collection */
.slide-panel__eyebrow { color: var(--accent); }
.slides__bar i { background: var(--accent); }
/* The buttons sit straight under the text, so they are seen before the slide moves on */
.slide-panel__foot { justify-content: flex-start; gap: 10px; margin-top: clamp(20px, 3.4vh, 34px); padding-top: 0; border-top: 0; }
.slide-panel__foot .btn { min-height: 52px; padding: 0 24px; gap: 10px; }
.slide-panel__foot .btn:hover { color: var(--ivory); background: var(--coral); }
.slide-panel__foot .btn--ghost:hover { color: var(--oxblood); background: var(--ivory); }
@media (max-width: 820px) {
  .slides__stage { min-height: 450px; }
}

/* Depth moment: a black show space, lit like a runway */
.throne { isolation: isolate; background: var(--black); }
/* Stage light: rose at the heart, falling away through coral and wine. It sits
   opposite the gold on the wheel so the figures lift off it */
.throne::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(ellipse 22% 34% at 50% 48%, rgba(238, 201, 192, .42), rgba(238, 201, 192, 0) 100%),
  radial-gradient(ellipse 66% 78% at 50% 56%, rgba(200, 69, 42, .6), rgba(87, 41, 50, .5) 48%, rgba(87, 41, 50, 0) 100%);
  animation: stage 7s ease-in-out infinite; }
/* The floor fades into the brown of the looks below, so the two sections run together */
.throne::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(22, 13, 9, 0), var(--brown)); }
@keyframes stage { 50% { opacity: .74; } }
/* No filter here: the figures move on scroll, and the stage light behind them already lifts them */
.throne__fig img { filter: none; }
/* Phones: the figures stand on the section's bottom edge, with the uneven lower
   edge of the cut-out cropped away, and the note sits over them */
@media (max-width: 820px) {
  .throne { padding-bottom: 0; }
  .throne__fig { margin-bottom: -16vw; }
  .throne__note { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px var(--gutter) 84px; background: linear-gradient(180deg, rgba(22, 13, 9, 0), rgba(22, 13, 9, .86) 48%); }
}

/* Looks */
.looks { background: var(--brown); }
.filters button:hover { background: rgba(250, 246, 239, .1); }
.filters button[aria-pressed="true"] { background: var(--ivory); color: var(--oxblood); border-color: var(--ivory); }
.card { background: var(--wine); }
.card__tag { background: rgba(29, 8, 13, .78); color: var(--ivory); }
.card__label { background: var(--black); }
.card__go { background: var(--ivory); color: var(--oxblood); }
.card:hover .card__go { color: var(--ivory); }

/* Cards on the house and appointments sections */
.h-card--light { background: var(--black); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--hair); }
.house__crest { background: var(--gold); color: var(--ink); }

/* Collections + lookbook */
.cx-intro { position: relative; overflow: hidden; background: var(--ink); }
.cx-intro > :not(canvas) { position: relative; z-index: 1; }
/* A soft fall of shadow towards the bottom keeps the small text crisp on the cloth */
.cx-intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(14, 7, 8, .55), rgba(14, 7, 8, .28) 45%, rgba(14, 7, 8, 0) 80%); }
.lb-tabs--dark a { background: var(--ivory); border-color: var(--ivory); color: var(--oxblood); }
.cx { border-top: 1px solid rgba(250, 246, 239, .1); }
.cx__eyebrow { color: var(--accent); }
/* The hold leaves space behind the last section; it shares the footer's colour */
body[data-page="collections"] main { background: var(--ink); }
.gallery, .lb-next { background: var(--ink); }
.gallery button { background: var(--panel-c); }
/* The extra margin is scroll distance: the section holds still for this long before
   the next one starts to cover it, leaving time to read and reach its button */
:root { --hold: 42vh; }
@media (min-width: 821px) and (min-height: 620px) {
  .cx { margin-bottom: var(--hold); }
}
/* Phones and tablets: the same cover-over, with each collection filling the screen as one
   card, the photograph on top and the words beneath it */
@media (max-width: 820px) {
  .cx { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr) auto; margin-bottom: 30vh; box-shadow: 0 -18px 44px rgba(29, 8, 13, .32); }
  .cx .lb-hero__img { min-height: 0; }
  .cx .lb-hero__text { gap: 10px; padding: 18px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
  .cx h2 { font-size: clamp(36px, 10vw, 64px); }
  .cx .lb-hero__text > p:not([class]) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  .cx .cx__btn { min-height: 48px; margin-top: 2px; }
  .cx-end { position: relative; z-index: 1; }
}
/* Lookbook: the hero pins, holds, and the gallery slides up over it */
#lb-hero { position: sticky; top: 0; margin-bottom: var(--hold); }
.gallery { background: var(--deep); position: relative; z-index: 1; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, .45); padding-top: clamp(14px, 1.6vw, 26px); }
.lb-next { position: relative; z-index: 1; }
/* Collection video, after the gallery */
.lb-film { position: relative; z-index: 1; padding: clamp(28px, 4vw, 64px) var(--gutter) clamp(40px, 6vw, 96px); background: var(--deep, var(--ink)); color: var(--ivory); }
.lb-film__frame { aspect-ratio: 1080 / 608; overflow: hidden; border-radius: var(--r-lg); background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.lb-film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-film[hidden] { display: none; }
/* Next collection: a preview laid out like the page it leads to */
.lb-next--img { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; min-height: clamp(460px, 80vh, 860px); padding: 0; background: var(--panel-c); }
.lb-next__text { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px; padding: clamp(28px, 5vw, 64px) var(--gutter); }
.lb-next__eyebrow { color: var(--accent); }
.lb-next__img { position: relative; display: block; overflow: hidden; }
.lb-next__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transition: transform 1.4s var(--ease-out); }
.lb-next__img:hover img { transform: scale(1.04); }
/* The way on to the next lookbook reads as a button: round arrow, a labelled button, a tag on the photo */
.lb-next__title { display: inline-flex; align-items: center; gap: .3em; }
.lb-next__go { flex: none; display: inline-grid; place-items: center; width: clamp(46px, 4.4vw, 76px); aspect-ratio: 1; border-radius: 50%; background: var(--ivory); color: var(--panel-c, var(--ink)); transition: transform .45s var(--ease-out), background .3s, color .3s; animation: nudge 2.8s var(--ease) infinite; }
.lb-next__go svg, .lb-next__tag svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lb-next__title:hover .lb-next__go, .lb-next--img:has(.lb-next__img:hover) .lb-next__go { animation: none; transform: translateX(8px); background: var(--accent); }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 82% { transform: translateX(7px); } }
.lb-next__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-next__tag { position: absolute; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px 12px 18px; border: 1px solid rgba(250, 246, 239, .35); border-radius: 99px; background: rgba(16, 6, 9, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ivory); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background .3s; }
.lb-next__tag svg { width: 14px; height: 14px; }
.lb-next__img:hover .lb-next__tag { background: rgba(16, 6, 9, .78); }
@media (prefers-reduced-motion: reduce) { .lb-next__go { animation: none; } }
@media (max-width: 820px) {
  .lb-next--img { grid-template-columns: 1fr; min-height: 0; }
  .lb-next__img { order: -1; min-height: 110vw; }
}

/* Appointments: the same aso oke as the collections header, a touch deeper behind small labels */
.ap-hero { position: relative; overflow: hidden; }
.ap-hero__fabric { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ap-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(14, 7, 8, .24); }
.ap-hero__left { position: relative; z-index: 1; }
.ap-form > p, .ap-form small { opacity: 1; }

/* Form */
.field input, .field select, .field textarea { background: var(--ink); border-color: rgba(250, 246, 239, .24); color: var(--ivory); }
.field select option { background: var(--ink); color: var(--ivory); }

/* Appointment steps */
.ap-form { scroll-margin-top: calc(var(--head-h) + 12px); }
.bk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; padding: 0; list-style: none; }
.bk-steps button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 0 0; border-top: 2px solid rgba(250, 246, 239, .28); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; color: rgba(250, 246, 239, .72); cursor: default; }
.bk-steps i { font-style: normal; }
.bk-steps [aria-current] button { border-top-color: var(--ivory); color: var(--ivory); }
.bk-steps .is-done button { border-top-color: var(--nude); color: var(--nude); cursor: pointer; }
.bk-steps .is-done button:hover { color: var(--ivory); }
.bk-step { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; animation: bk-in .45s var(--ease-out) both; }
.bk-step[hidden] { display: none; }
@keyframes bk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bk-q { float: left; width: 100%; margin-bottom: 16px; padding: 0; font: 600 clamp(22px, 2.4vw, 30px)/1.15 var(--display); letter-spacing: -.02em; text-align: center; outline: none; }
.bk-q + * { clear: both; }
.bk-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-type input, .bk-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bk-type { position: relative; cursor: pointer; }
.bk-type > span { display: grid; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid rgba(250, 246, 239, .24); border-radius: 16px; background: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.bk-type b { font: 600 17px/1.2 var(--display); }
.bk-type small { font-size: 13px; line-height: 1.35; text-align: left; opacity: .8; }
.bk-type:hover > span { border-color: var(--ivory); }
.bk-type input:checked + span { background: var(--ivory); border-color: var(--ivory); color: var(--oxblood); }
.bk-type input:focus-visible + span, .bk-slot input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.bk-when { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.bk-cal, .bk-times { padding: 16px; border: 1px solid rgba(250, 246, 239, .2); border-radius: 18px; background: var(--ink); }
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk-cal__head button { width: 44px; height: 44px; border-radius: 50%; color: var(--ivory); transition: background .2s, opacity .2s; }
.bk-cal__head button:hover:not(:disabled) { background: rgba(250, 246, 239, .12); }
.bk-cal__head button:disabled { opacity: .28; cursor: default; }
.bk-cal__title { font-weight: 600; font-size: 15px; }
.bk-cal__days, .bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.bk-cal__days { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.bk-day { aspect-ratio: 1; min-height: 40px; border-radius: 50%; font-size: 14px; font-weight: 500; transition: background .2s, color .2s; }
.bk-day:hover:not(:disabled) { background: rgba(250, 246, 239, .14); }
.bk-day:disabled { opacity: .3; cursor: default; }
.bk-day.is-today { box-shadow: inset 0 0 0 1px var(--gold); }
.bk-day[aria-pressed="true"] { background: var(--ivory) !important; color: var(--oxblood); font-weight: 700; }
.bk-times { display: flex; flex-direction: column; gap: 12px; }
.bk-slots__head { font-weight: 600; font-size: 14px; line-height: 1.35; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.bk-slot { position: relative; cursor: pointer; }
.bk-slot span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid rgba(250, 246, 239, .3); border-radius: 99px; font-size: 13px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.bk-slot:hover span { border-color: var(--ivory); }
.bk-slot input:checked + span { background: var(--ivory); border-color: var(--ivory); color: var(--oxblood); font-weight: 700; }
.bk-times small { margin-top: auto; font-size: 12px; line-height: 1.45; text-align: left; }
.bk-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px; margin: 0; padding: 20px 22px; border: 1px solid rgba(250, 246, 239, .2); border-radius: 18px; background: var(--ink); }
.bk-summary dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1.9; text-transform: uppercase; color: var(--muted); }
.bk-summary dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.bk-note { font-size: 14px; text-align: center; }
.bk-error { padding: 12px 16px; border-radius: 12px; background: var(--ivory); color: var(--oxblood); font-size: 14px; font-weight: 600; text-align: center; }
.bk-error[hidden], .bk-send-note[hidden], .bk-nav[hidden], .bk-steps[hidden] { display: none; }
.bk-nav { display: flex; gap: 10px; }
.bk-nav .bk-next { flex: 1; }
.bk-nav .bk-back { padding: 0 30px; }
.bk-nav .btn { justify-content: center; min-height: 52px; }
.bk-nav .bk-back[hidden] { display: none; }
.ap-form .bk-send-note { font-size: 13px; }
.bk-done { text-align: center; }
.bk-done__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.bk-done__links[hidden] { display: none; }
@media (max-width: 820px) {
  .bk-when { grid-template-columns: 1fr; }
  .bk-steps button { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 10px; letter-spacing: .03em; }
}
@media (max-width: 480px) {
  .bk-types { grid-template-columns: 1fr; }
}

/* Cursor */
.cursor[data-state="label"] span { background: var(--ivory); color: var(--oxblood); }

/* ==========================================================================
   Pre-order: header bag, look panel, bag, checkout, size chart, shop page
   ========================================================================== */
.bagbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(14, 7, 8, .86); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(250, 246, 239, .2); transition: background .25s, color .25s; }
.bagbtn[hidden] { display: none; }
.bagbtn__n[hidden] { display: none; }
.bagbtn:hover { background: var(--ivory); color: var(--oxblood); }
.bagbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.bagbtn__n { position: absolute; right: -3px; top: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: var(--ink); font: 700 11px/20px var(--sans); text-align: center; }
html.sheet-open { overflow: hidden; }

.lb-hero__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-hero__acts .cx__btn { margin-top: 6px; }
.lightbox__pre { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; max-width: min(760px, calc(100% - 140px)); padding: 10px 10px 10px 18px; border-radius: 28px; background: rgba(14, 7, 8, .88); box-shadow: inset 0 0 0 1px rgba(250, 246, 239, .16); transform: translateX(-50%); }
.lightbox__pre[hidden] { display: none; }
.lightbox__sum { flex: 1 1 220px; font-size: 13px; line-height: 1.4; }
.lightbox__pre .btn { min-height: 46px; }
.lightbox__in { padding-bottom: 96px; }

/* Sheets share one look: dark, rounded, over a dimmed page */
dialog.sheet { max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ivory); background: var(--ink); overflow: hidden; }
dialog.sheet::backdrop { background: rgba(14, 7, 8, .74); }
dialog.sheet[open] { animation: sheet-in .5s var(--ease-out) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.sheet .round { flex: none; }
.sheet .display { font-weight: 600; letter-spacing: -.03em; }
.co-link { padding: 0; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--accent, var(--nude)); }
.co-link:hover { color: var(--ivory); }

/* Look panel */
.lk { position: fixed; inset: 14px; width: auto; height: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: var(--r-lg); background: var(--deep, var(--ink)); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.lk:not([open]) { display: none; }
.lk__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 72px 18px 18px; background: var(--panel-c, var(--wine)); container-type: size; overflow: hidden; }
.lk__frame { position: relative; width: min(100cqw, 100cqh * var(--ar, .8)); aspect-ratio: var(--ar, .8); border-radius: var(--r-md); overflow: hidden; background: rgba(0, 0, 0, .2); }
.lk__frame[hidden], .lk__ghosts[hidden] { display: none; }
.lk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), transform-origin 0s; }
.lk__spots { position: absolute; inset: 0; }
.lk-spot { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; transform: translate(-13px, -13px); }
.lk-spot i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(14, 7, 8, .55); box-shadow: inset 0 0 0 2px var(--ivory); transition: background .25s, transform .3s var(--ease-out); }
.lk-spot i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(250, 246, 239, .6); animation: spot 2.4s ease-out infinite; }
.lk-spot i::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 16px/1 var(--sans); color: var(--ivory); }
@keyframes spot { 0% { box-shadow: 0 0 0 0 rgba(250, 246, 239, .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(250, 246, 239, 0); } }
.lk-spot span { padding: 6px 11px; border-radius: 99px; background: var(--ivory); color: var(--oxblood); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease-out); pointer-events: none; }
.lk-spot:hover span, .lk-spot:focus-visible span, .lk-spot.is-near span { opacity: 1; transform: none; }
.lk-spot:hover i, .lk-spot.is-near i { transform: scale(1.15); }
.lk-spot[aria-pressed="true"] i { background: var(--ivory); }
.lk-spot[aria-pressed="true"] i::after { content: "✓"; color: var(--oxblood); font-size: 13px; }
.lk-spot[aria-pressed="true"] i::before { animation: none; }
/* Labels near the right edge open leftwards */
.lk-spot[style*="left:7"], .lk-spot[style*="left:8"], .lk-spot[style*="left:9"] { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -13px); }
.lk__views { position: absolute; left: 50%; top: 16px; z-index: 2; display: flex; padding: 4px; border-radius: 99px; background: rgba(14, 7, 8, .7); transform: translateX(-50%); }
.lk__views button, .co-units button { min-height: 38px; padding: 0 16px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .25s, color .25s; }
.lk__views button[aria-pressed="true"], .co-units button[aria-pressed="true"] { background: var(--ivory); color: var(--oxblood); }
.lk__prev, .lk__next { position: absolute; bottom: 18px; z-index: 2; }
.lk__prev { left: 18px; } .lk__next { right: 18px; }
.lk__ghosts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; width: 100cqw; height: 100cqh; }
.lk__ghosts[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.lk-ghost { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; padding: 14px 12px; border-radius: var(--r-md); background: rgba(250, 246, 239, .08); box-shadow: inset 0 0 0 1px rgba(250, 246, 239, .16); text-align: center; transition: background .25s, box-shadow .25s; }
.lk-ghost:hover { background: rgba(250, 246, 239, .14); }
.lk-ghost[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ivory); background: rgba(250, 246, 239, .16); }
.lk-ghost[aria-pressed="true"]::after { content: "✓"; position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ivory); color: var(--oxblood); font-size: 13px; font-weight: 700; }
.lk-ghost__pic { display: block; min-height: 0; }
.lk-ghost__pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .4)); transition: transform .6s var(--ease-out); }
.lk-ghost:hover .lk-ghost__pic img { transform: translateY(-4px) scale(1.03); }
.lk-ghost.is-detail .lk-ghost__pic img { object-fit: cover; border-radius: 14px; filter: none; }
.lk-ghost__txt { display: grid; gap: 1px; }
.lk-ghost__txt b { font-size: 13px; font-weight: 600; }
.lk-ghost__txt small { font-size: 11.5px; opacity: .72; }
.lk__side { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: clamp(22px, 3vw, 44px) clamp(18px, 2.6vw, 40px) 0; overflow-y: auto; overscroll-behavior: contain; }
.lk__x { position: absolute; right: 16px; top: 16px; }
.lk__eyebrow { color: var(--accent); }
.lk__side h2 { font-size: clamp(38px, 4.4vw, 76px); line-height: 1; }
.lk__hint { max-width: 46ch; font-size: 14px; opacity: .85; }
.lk__pieces { display: grid; gap: 8px; }
.lk-piece { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 24px; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 18px; background: rgba(250, 246, 239, .06); box-shadow: inset 0 0 0 1px rgba(250, 246, 239, .14); cursor: pointer; transition: background .25s, box-shadow .25s; }
.lk-piece:hover { background: rgba(250, 246, 239, .11); }
.lk-piece input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lk-piece:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.lk-piece.is-on { background: rgba(250, 246, 239, .14); box-shadow: inset 0 0 0 1.5px var(--ivory); }
.pc-thumb { display: block; flex: none; width: 56px; height: 70px; padding: 4px; border-radius: 12px; background: rgba(250, 246, 239, .08); overflow: hidden; }
.pc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pc-thumb.is-detail { padding: 0; }
.pc-thumb.is-detail img { object-fit: cover; }
.lk-piece__txt { display: grid; gap: 2px; min-width: 0; }
.lk-piece__txt b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.lk-piece__txt small { font-size: 12.5px; line-height: 1.35; opacity: .75; }
.lk-piece__price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.lk-piece__tick { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(250, 246, 239, .5); display: grid; place-items: center; font-size: 12px; font-weight: 700; transition: background .2s; }
.lk-piece.is-on .lk-piece__tick { background: var(--ivory); color: var(--oxblood); box-shadow: none; }
.lk-piece.is-on .lk-piece__tick::after { content: "✓"; }
.lk__all { align-self: flex-start; padding: 6px 0; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lk__more { display: grid; gap: 10px; padding-top: 6px; }
.lk__more .eyebrow { opacity: .7; }
.lk__strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lk-mini { position: relative; flex: none; width: 58px; height: 74px; border-radius: 12px; overflow: hidden; opacity: .6; transition: opacity .25s, box-shadow .25s; }
.lk-mini:hover, .lk-mini[aria-current] { opacity: 1; }
.lk-mini[aria-current] { box-shadow: 0 0 0 2px var(--ivory); }
.lk-mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.lk-mini span { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 99px; background: rgba(14, 7, 8, .78); font-size: 10px; font-weight: 700; }
.lk__foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: auto calc(clamp(18px, 2.6vw, 40px) * -1) 0; padding: 16px clamp(18px, 2.6vw, 40px) 18px; background: var(--deep, var(--ink)); box-shadow: 0 -1px 0 rgba(250, 246, 239, .12); }
.lk__sum { display: grid; gap: 2px; }
.lk__sum small { font-size: 12px; opacity: .75; }
.lk__sum b { font-size: 20px; font-weight: 600; }
.lk__add { min-height: 52px; padding: 0 26px; }
.lk__add:disabled { opacity: .55; cursor: default; transform: none; }
.lk__add:disabled:hover { background: var(--ivory); color: var(--oxblood); }

/* Bag and size chart: panels from the right */
.bagd, .chart { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); height: 100%; border-radius: var(--r-lg) 0 0 var(--r-lg); }
dialog.bagd[open], dialog.chart[open] { animation: from-right .5s var(--ease-out) both; }
@keyframes from-right { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bagd__in, .chart__in { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 24px clamp(18px, 2.4vw, 32px); overflow-y: auto; }
.bagd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bagd__head h2 { font-size: clamp(28px, 3vw, 40px); }
.bagd__list { display: grid; gap: 10px; }
.bagd__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 32px; align-items: center; gap: 12px; padding: 8px; border-radius: 18px; background: rgba(250, 246, 239, .06); }
.bagd__txt { display: grid; gap: 2px; min-width: 0; }
.bagd__txt b { font-size: 15px; font-weight: 600; }
.bagd__txt small { font-size: 12px; opacity: .8; }
.bagd__edit { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.bagd__price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.bagd__rm { width: 32px; height: 32px; border-radius: 50%; font-size: 18px; opacity: .7; transition: background .2s, opacity .2s; }
.bagd__rm:hover { opacity: 1; background: rgba(250, 246, 239, .12); }
.bagd__empty { display: grid; justify-items: start; gap: 16px; padding: 20px 0; }
.bagd__foot { position: sticky; bottom: -24px; display: grid; gap: 12px; margin-top: auto; padding: 18px 0 24px; background: var(--ink); box-shadow: 0 -1px 0 rgba(250, 246, 239, .14); }
.bagd__foot[hidden] { display: none; }
.bagd__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.bagd__total b { font-size: 24px; font-weight: 600; }
.bagd__total[hidden] { display: none; }
.bagd__note { font-size: 13px; line-height: 1.5; opacity: .8; }
.bagd__go { justify-content: center; min-height: 54px; }
.co-units { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: 99px; background: rgba(250, 246, 239, .08); }
.chart__tables { display: grid; gap: 22px; }
.chart__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.chart__t caption { padding-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-align: left; text-transform: uppercase; color: var(--nude); }
.chart__t th, .chart__t td { padding: 9px 8px; border-bottom: 1px solid rgba(250, 246, 239, .12); text-align: left; font-weight: 500; }
.chart__t thead th { font-size: 12px; opacity: .7; }
.chart__t tbody th { font-weight: 700; }

/* Checkout */
.co { position: fixed; inset: 14px; width: auto; height: auto; border-radius: var(--r-lg); }
.co__in { display: flex; flex-direction: column; height: 100%; }
.co__head { display: flex; align-items: center; gap: 16px; padding: 16px clamp(16px, 3vw, 40px); border-bottom: 1px solid rgba(250, 246, 239, .1); }
.co__steps { flex: 1; margin: 0; }
.co__steps span { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 2px solid rgba(250, 246, 239, .28); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(250, 246, 239, .72); }
.co__steps i { font-style: normal; }
.co__steps [aria-current] span { border-top-color: var(--ivory); color: var(--ivory); }
.co__steps .is-done span { border-top-color: var(--nude); color: var(--nude); }
.co__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(20px, 3vw, 48px); min-height: 0; padding: clamp(22px, 3vw, 44px) clamp(16px, 3vw, 40px); overflow-y: auto; overscroll-behavior: contain; }
.co__main { display: grid; gap: 16px; align-content: start; width: min(720px, 100%); }
.co__main .bk-q { text-align: left; margin-bottom: 4px; }
.co__aside { align-self: start; position: sticky; top: 0; display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: var(--black); box-shadow: inset 0 0 0 1px var(--hair); }
.co__aside[hidden] { display: none; }
.co__aside .eyebrow { color: var(--nude); }
.co-sum { display: grid; gap: 10px; }
.co-sum li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.co-sum .pc-thumb { width: 44px; height: 55px; border-radius: 10px; }
.co-sum b { display: block; font-weight: 600; line-height: 1.25; }
.co-sum small { font-size: 12px; opacity: .75; }
.co-sum__row { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(250, 246, 239, .12); font-size: 13px; }
.co-sum__row span:last-child { opacity: .8; text-align: right; }
.co-sum__total { font-size: 15px; }
.co-sum__total b { font-size: 22px; font-weight: 600; }
.co-sum__note { font-size: 12px; line-height: 1.5; opacity: .7; }
.co-pay { display: grid; gap: 12px; padding: 20px 22px; border-radius: 18px; background: var(--black); box-shadow: inset 0 0 0 1px var(--hair); font-size: 15px; }
.co-pay__amt { display: flex; justify-content: space-between; align-items: baseline; }
.co-pay__amt b { font-size: clamp(26px, 3vw, 36px); font-weight: 600; }
.co-test { padding: 12px 14px; border-radius: 12px; background: rgba(201, 161, 95, .14); color: #f3dcb2; font-size: 13px; line-height: 1.5; }
.co-paid { justify-self: start; padding: 8px 14px; border-radius: 99px; background: rgba(250, 246, 239, .1); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nude); }
.co-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-best em { justify-self: start; margin-bottom: 4px; padding: 3px 9px; border-radius: 99px; background: var(--gold); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.co-panel, .co-when { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: var(--black); box-shadow: inset 0 0 0 1px var(--hair); }
.co-panel[hidden], .co-when[hidden], .co-upsell[hidden] { display: none; }
.co-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.co-panel__head p { font-weight: 600; }
.co-sizes { display: grid; gap: 8px; }
.co-sizes li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px; align-items: center; gap: 12px; font-size: 14px; }
.co-sizes .pc-thumb { width: 44px; height: 55px; border-radius: 10px; }
.co-sizes b { display: block; font-weight: 600; }
.co-sizes small { font-size: 12px; opacity: .75; }
.co-sizes select { min-height: 46px; padding: 0 12px; border: 1px solid rgba(250, 246, 239, .3); border-radius: 12px; background: var(--ink); color: var(--ivory); font-size: 15px; }
.co-measures { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.co-help, .co-sendnote { font-size: 13px; line-height: 1.5; opacity: .8; }
.co-upsell__in { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border-radius: 18px; background: linear-gradient(120deg, rgba(201, 161, 95, .2), rgba(201, 161, 95, .06)); box-shadow: inset 0 0 0 1px rgba(201, 161, 95, .5); cursor: pointer; }
.co-upsell__in input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gold); }
.co-upsell__in b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: #f3dcb2; }
.co-upsell__in small { font-size: 13px; line-height: 1.5; opacity: .9; }
.co-where { display: flex; flex-wrap: wrap; gap: 8px; }
.co-where .bk-slot span { padding: 0 18px; }
.co-done { display: grid; justify-items: center; gap: 16px; max-width: 560px; margin: 4vh auto 0; text-align: center; }
.co-done .bk-q { text-align: center; }
.co-done__mark { width: 54px; color: var(--gold); }

/* Toast */
.toast { position: fixed; inset: auto auto 22px 50%; margin: 0; border: 0; overflow: visible; z-index: 130; pointer-events: none; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border-radius: 99px; background: var(--ivory); color: var(--oxblood); font-size: 14px; font-weight: 600; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transform: translate(-50%, 20px); opacity: 0; transition: transform .45s var(--ease-out), opacity .35s; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* In the enlarged photo the bottom belongs to its own bar, so the note drops in from the top */
.lightbox .toast { inset: 22px auto auto 50%; transform: translate(-50%, -20px); }
.lightbox .toast.is-on { transform: translate(-50%, 0); }
.toast button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 99px; background: var(--oxblood); color: var(--ivory); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Shop page */
.sh-hero { min-height: 70vh; }
.sh-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sh-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.sh-steps i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ivory); color: var(--oxblood); font-style: normal; font-size: 12px; font-weight: 700; }
.sh-looks { scroll-margin-top: 80px; }
button.card { width: 100%; padding: 0; text-align: left; }
.sh-card__dots i { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(14, 7, 8, .4); box-shadow: inset 0 0 0 2px var(--ivory); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease-out); }
.sh-card:hover .sh-card__dots i, .sh-card:focus-visible .sh-card__dots i { opacity: 1; transform: none; }
.sh-card .card__tag { color: var(--accent); }
.sh-fit { grid-template-columns: repeat(3, 1fr); }
.sh-fit h2 { grid-column: 1 / -1; padding: clamp(28px, 4vw, 56px) 0 clamp(8px, 1vw, 16px); font-size: clamp(42px, 6.6vw, 120px); color: var(--ivory); }
.sh-fit .h-card { display: grid; gap: 10px; align-content: start; justify-items: start; }

@media (max-width: 1000px) {
  .co-methods { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .bagbtn { width: 44px; height: 44px; }
  .lk { inset: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 54vh) minmax(0, 1fr); border-radius: 0; }
  .lk__stage { padding: 62px 10px 10px; }
  .lk__views { top: 12px; }
  .lk__prev, .lk__next { bottom: 16px; width: 42px; height: 42px; }
  .lk__prev { left: 14px; } .lk__next { right: 14px; }
  .lk__side { padding: 18px 16px 0; gap: 12px; }
  .lk__x { position: fixed; right: 12px; top: 12px; z-index: 3; }
  .lk__side h2 { font-size: 34px; }
  .lk__hint { font-size: 13px; }
  .lk-piece { grid-template-columns: 48px minmax(0, 1fr) auto 22px; gap: 10px; }
  .lk-piece .pc-thumb { width: 48px; height: 60px; }
  .lk-piece__price { font-size: 13px; }
  .lk__foot { margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .lk__add { padding: 0 20px; }
  .lk-spot span { display: none; }
  .lightbox__pre { left: 8px; right: 8px; max-width: none; transform: none; bottom: 70px; padding: 10px; border-radius: 22px; }
  .lightbox__pre .btn { flex: 1; justify-content: center; padding: 0 12px; }
  .lightbox__sum { flex-basis: 100%; text-align: center; }
  .lightbox__in { padding-bottom: 210px; }
  .lb-arrow { width: 52px; height: 150px; top: calc(50% - 74px); border-radius: 14px; background: rgba(14, 7, 8, .42); }
  .lb-arrow svg { width: 28px; height: 68px; stroke-width: 3.5; }
  .lightbox .p { left: 4px; } .lightbox .n { right: 4px; }
  .lb-hero__img .lb-arrow { top: 50%; }
  .lb-hero__img .p { left: 8px; } .lb-hero__img .n { right: 8px; }
  .bagd, .chart { width: 100vw; border-radius: 0; }
  .co { inset: 0; border-radius: 0; }
  .co__body { grid-template-columns: 1fr; }
  .co__aside { position: static; }
  .co__steps span { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 10px; letter-spacing: .03em; }
  .co-sizes li { grid-template-columns: 44px minmax(0, 1fr) 92px; }
  .sh-fit { grid-template-columns: 1fr; }
  .toast { inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; justify-content: space-between; transform: translateY(20px); }
  .toast.is-on { transform: none; }
  .lightbox .toast { inset: calc(72px + env(safe-area-inset-top)) 12px auto 12px; transform: translateY(-20px); }
  .lightbox .toast.is-on { transform: none; }
}