/* ==========================================================================
   Selah Girls Society: tokens, base, shared components
   Base system: Wizz (volt pink on B/W editorial) + Adanola (lookbook grid)
   ========================================================================== */

:root {
  --pink: #ff3d9e;
  --pink-ink: #c4146d;          /* pink text on paper / paper-2: AA (5.7 / 5.1) */
  --paper: #ffffff;
  --paper-2: #f4f2ee;
  --ink: #000000;
  --ink-2: #292929;
  --muted: #6b6b6b;
  --line: #dadada;
  --surface: #eeeeee;
  --rule-ui: #858585;           /* input / checkbox edges: 3:1 on bg-2 */

  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --rule: var(--line);
  --on-pink: #000;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-script: "Great Vibes", cursive;
  --f-gothic: "Grenze Gotisch", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-caption: 0.6875rem;
  --t-sm: 0.875rem;
  --t-body: 1rem;
  --t-lg: 1.125rem;
  --t-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --t-h2: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
  --t-h1: clamp(2.75rem, 1.4rem + 6vw, 7.5rem);
  --t-mega: clamp(4.5rem, 1rem + 15vw, 17rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --maxw: 1440px;
  --section: clamp(5rem, 3rem + 8vw, 11rem);
  --radius: 14px;
  --radius-sm: 8px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms;
  --dur: 240ms;

  --g-grain: url("../graphics/grain.webp");
  --g-paper: url("../graphics/paper.webp");
  --g-halftone: url("../graphics/halftone.webp");
  --m-lancet: url("../graphics/mask-lancet.svg");
  --m-twin: url("../graphics/mask-arch-twin.svg");
  --m-ogee: url("../graphics/mask-ogee.svg");
  --m-quatrefoil: url("../graphics/mask-quatrefoil.svg");
  --m-rose: url("../graphics/mask-rose.svg");
  --o-rose: url("../graphics/line-tracery-rose.svg");
  --o-arch: url("../graphics/line-arch-frame.svg");
  --o-divider: url("../graphics/line-divider.svg");
  --o-frame: url("../graphics/line-dropcap-frame.svg");

  color-scheme: light;
}

:root[data-theme="dark"],
[data-theme-invert] {
  --bg: #050505;
  --bg-2: #121212;
  --fg: #ffffff;
  --fg-2: #d6d6d6;
  --muted: #9a9a9a;
  --rule: #2b2b2b;
  --surface: #1a1a1a;
  --rule-ui: #6a6a6a;
  --pink-ink: var(--pink);
  color-scheme: dark;
}
/* The inverted section flips back to paper when the page is dark. */
:root[data-theme="dark"] [data-theme-invert] {
  --bg: var(--paper-2);
  --bg-2: #e9e6e0;
  --fg: #000;
  --fg-2: #292929;
  --muted: #5c5c5c;
  --rule: #d4d0c8;
  --rule-ui: #858585;
  --surface: #e4e1db;
  --pink-ink: #c4146d;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--t-body)/1.5 var(--f-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--pink); color: #000; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 999; background: var(--pink); color: #000; padding: .6rem 1rem; border-radius: 99px; }
.skip:focus { top: 1rem; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.mono { font-family: var(--f-mono); font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; }

.h1, .h2, .h3 { margin: 0; font-family: var(--f-display); text-transform: uppercase; }
.h1 { font-size: var(--t-h1); line-height: .86; font-weight: 800; font-variation-settings: "wdth" 72; letter-spacing: -.02em; }
.h2 { font-size: var(--t-h2); line-height: .9; font-weight: 750; font-variation-settings: "wdth" 75; letter-spacing: -.015em; }
.h3 { font-size: var(--t-h3); line-height: 1.05; font-weight: 650; font-variation-settings: "wdth" 85; }
.script { font-family: var(--f-script); text-transform: none; color: var(--pink); font-weight: 400; letter-spacing: 0; }

/* small superscript count after a heading (e.g. Shop all ⁶) */
.count { font: 500 .22em/1 var(--f-mono); color: var(--pink-ink); vertical-align: super; margin-left: .3em; letter-spacing: 0; }
.footer__h { margin: 0 0 .4rem; font: 650 var(--t-sm)/1 var(--f-display); text-transform: uppercase; color: #fff; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 61 158 / .55); } 70%, 100% { box-shadow: 0 0 0 8px rgb(255 61 158 / 0); } }

/* ---------- grain + texture ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background: var(--g-grain); background-size: 256px; opacity: .07; mix-blend-mode: multiply;
  animation: grain-shift 1s steps(4) infinite;
}
:root[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .06; }
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); }
}

/* ---------- ornaments: stroke SVGs painted via mask so they take currentColor ---------- */
.ornament {
  display: block; background: currentColor;
  -webkit-mask: var(--o) center / contain no-repeat; mask: var(--o) center / contain no-repeat;
}
.ornament--rose { --o: var(--o-rose); aspect-ratio: 1; }
.ornament--arch { --o: var(--o-arch); aspect-ratio: 1 / 2; }
.ornament--divider { --o: var(--o-divider); aspect-ratio: 30 / 1; }
.ornament--frame { --o: var(--o-frame); aspect-ratio: 1; }
.section-rule { width: 100%; height: 22px; aspect-ratio: auto; color: var(--rule); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; margin-block: 1.5rem 2.5rem; clip-path: inset(0 0 0 0); }

/* ---------- arch-media: photo in a gothic mask with grain inner shadow ---------- */
.arch { position: relative; margin: 0; --mask: var(--m-lancet); aspect-ratio: 1 / 2; }
.arch--twin { --mask: var(--m-twin); aspect-ratio: 6 / 7; }
.arch--ogee { --mask: var(--m-ogee); aspect-ratio: 2 / 3; }
.arch--quatrefoil { --mask: var(--m-quatrefoil); aspect-ratio: 1; }
.arch--rose { --mask: var(--m-rose); aspect-ratio: 1; }
.arch__mask {
  position: absolute; inset: 0; overflow: hidden; background: var(--surface);
  -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat;
}
.arch__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 900ms var(--ease-out); }
/* inner grained shadow: vignette + grain concentrated at the edges */
.arch__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgb(0 0 0 / .45) 100%),
    var(--g-grain) 0 0 / 180px;
  mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(110% 85% at 50% 45%, transparent 35%, #000 95%); mask: radial-gradient(110% 85% at 50% 45%, transparent 35%, #000 95%);
}
.arch__shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 61 158 / .0) 55%, rgb(255 61 158 / .18)); mix-blend-mode: screen; }
.arch__outline {
  position: absolute; inset: -10px; pointer-events: none; color: var(--pink);
  background: currentColor; -webkit-mask: var(--o-arch) center / 100% 100% no-repeat; mask: var(--o-arch) center / 100% 100% no-repeat;
  opacity: 0; transform: scale(.98); transition: opacity var(--dur) var(--ease-out), transform 500ms var(--ease-out);
}
.arch--lancet .arch__outline, .arch--ogee .arch__outline { opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .arch:hover .arch__img { transform: scale(1.02); }
  .arch:hover .arch__outline { transform: scale(1.02); }
}

/* ---------- logo ---------- */
.logo { display: inline-grid; justify-items: center; line-height: .8; }
.logo__caps { font: 700 .72rem/1 var(--f-display); letter-spacing: .2em; font-variation-settings: "wdth" 110; text-transform: uppercase; }
.logo__script { font: 400 2.1rem/.6 var(--f-script); color: var(--pink); margin: -.05em 0 -.02em; transform: rotate(-6deg); }

/* ---------- roll text (hover duplicate slides up) ---------- */
.roll { display: inline-flex; overflow: hidden; position: relative; line-height: 1.15; vertical-align: top; }
.roll__in { display: inline-block; transition: transform 420ms var(--ease-out); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover > .roll .roll__in, button:hover > .roll .roll__in, a:hover .roll .roll__in, button:hover .roll .roll__in { transform: translateY(-100%); }
  a:hover .roll::after, button:hover .roll::after { transform: translateY(-100%); }
}

/* ---------- buttons + links ---------- */
.btn {
  --b-bg: var(--fg); --b-fg: var(--bg);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg);
  font: 650 var(--t-sm)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 100;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -2px 6px rgb(0 0 0 / .25), 0 1px 2px rgb(0 0 0 / .12);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* grained inner shadow on every button */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-grain) 0 0 / 140px; opacity: .22; mix-blend-mode: overlay; border-radius: inherit; }
/* fill wipe */
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-fill, var(--pink)); clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path 500ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--pink { --b-bg: var(--pink); --b-fg: #000; --b-fill: #000; }
.btn--ink { --b-fill: var(--pink); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--fg); box-shadow: inset 0 0 0 1px var(--rule); }
.btn--block { width: 100%; }
.btn__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--dur) var(--ease-out); }
.btn > * { transition: color var(--dur) var(--ease-out); }
/* on dark surfaces a black fill would vanish into the background: fill white instead */
:is(.footer, .series, .script-cta) .btn--pink { --b-fill: #fff; }
@media (hover: hover) and (pointer: fine) {
  :is(.footer, .series, .script-cta) .btn--pink:hover { color: #000; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
  .btn--pink:hover { color: #fff; }
  .btn--ink:hover { color: #000; }
  .btn:hover .btn__arrow { transform: translateX(4px); }
}

.link-under { position: relative; display: inline-block; width: fit-content; }
.link-under::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-under:hover::after { transform: scaleX(1); transform-origin: left; } }

.link-roll { display: inline-flex; width: fit-content; }
.footer__cols .link-roll .roll::after { color: var(--pink); }
.link-arrow {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .6rem; height: 34px;
  font: 600 var(--t-sm)/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  transition: color 300ms var(--ease-out);
}
.link-arrow::after {
  content: "→"; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--rule); transition: transform 450ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
/* the arrow's circle morphs into a capsule that sweeps over the word */
.link-arrow::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 34px; border-radius: 999px;
  background: var(--pink); opacity: 0; transform: scale(.6);
  transition: width 500ms var(--ease-out), opacity 150ms var(--ease-out), transform 300ms var(--ease-out);
}
.link-arrow--back { flex-direction: row-reverse; }
.link-arrow--back::after { content: "←"; }
.link-arrow--back::before { right: auto; left: 0; }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: #000; }
  .link-arrow:hover::before { width: calc(100% + 1rem); opacity: 1; transform: none; }
  .link-arrow:hover::after { box-shadow: none; transform: translateX(2px); }
  .link-arrow--back:hover::after { transform: translateX(-2px); }
}
.link-arrow:focus-visible::before { width: calc(100% + 1rem); opacity: 1; transform: none; }
.link-arrow:focus-visible { color: #000; outline-offset: 6px; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.icon-btn::before { content: ""; position: absolute; inset: -4px; } /* larger hit area */
.icon-btn:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--surface); } }

/* chips, pills, tags, swatches */
.chip {
  min-width: 44px; height: 36px; padding: 0 .8rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule); font: 500 var(--t-caption)/1 var(--f-mono); letter-spacing: .06em;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip:active { transform: scale(.94); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--fg); color: var(--bg); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .chip:hover { box-shadow: inset 0 0 0 1px var(--fg); } }

.pills { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 3px rgb(0 0 0 / .12); }
.pills__ind { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--fg); box-shadow: 0 2px 8px rgb(0 0 0 / .18); transition: transform 450ms var(--ease-out), width 450ms var(--ease-out); }
.pill { position: relative; z-index: 1; padding: .7rem 1.1rem; border-radius: 999px; font: 600 var(--t-caption)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; transition: color 300ms var(--ease-out); white-space: nowrap; }
.pill.is-under { color: var(--bg); }

.tag { display: inline-flex; padding: .35rem .6rem; border-radius: 999px; font: 600 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.tag--pink { background: var(--pink); color: #000; }

.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15), inset 0 -3px 4px rgb(0 0 0 / .18); }
.swatch--lg { position: relative; width: 34px; height: 34px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.swatch--lg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch--lg:has(input:checked) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); }
.swatch--lg:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 4px; }
.swatch--lg:active { transform: scale(.9); }

/* ---------- marquee ---------- */
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee__track { display: flex; flex-shrink: 0; align-items: center; gap: 1.5rem; padding-right: 1.5rem; animation: marquee var(--speed, 30s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { white-space: nowrap; }
.marquee__sep { color: var(--pink); }
/* dark theme flips the ticker to white: hot pink is only 3.3:1 there */
:root[data-theme="dark"] .ticker .marquee__sep { color: #c4146d; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- ticker + nav ---------- */
.ticker { position: relative; z-index: 51; background: var(--fg); color: var(--bg); font: 500 var(--t-caption)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: .55rem 0; }
.nav { position: sticky; top: 0; z-index: 50; padding: .75rem var(--gutter); transition: transform 500ms var(--ease-out); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__inner {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: var(--maxw); margin-inline: auto; padding: .4rem .5rem .4rem 1.25rem; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent), 0 8px 30px -12px rgb(0 0 0 / .25);
}
.nav__links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; display: flex; align-items: center; height: 40px; font: 600 var(--t-caption)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.nav__link .roll { line-height: 1.2; }
.nav__link.is-active::before { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--pink); }
.nav__logo { justify-self: center; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav__logo:hover { transform: rotate(-3deg) scale(1.04); } }
.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.icon--moon { display: none; }
:root[data-theme="dark"] .icon--sun { display: none; }
:root[data-theme="dark"] .icon--moon { display: block; }
[data-theme-toggle] .icon { transition: transform 500ms var(--ease-out); }
[data-theme-toggle]:active .icon { transform: rotate(90deg) scale(.8); }
.icon__wave { opacity: .25; transition: opacity var(--dur) var(--ease-out); }
[data-sound-toggle][aria-pressed="true"] .icon__wave { opacity: 1; stroke: var(--pink); }

.bag-btn {
  display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .5rem 0 1rem; margin-left: .35rem; border-radius: 999px;
  background: var(--fg); color: var(--bg); font: 600 var(--t-caption)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  transition: transform var(--dur-fast) var(--ease-out);
}
.bag-btn:active { transform: scale(.95); }
.bag-btn__count { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 999px; background: var(--pink); color: #000; font-weight: 600; }
.bag-btn.is-bump .bag-btn__count { animation: bump 500ms var(--ease-out); }
@keyframes bump { 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.92); } }

.nav__burger { display: none; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: currentColor; transition: transform 400ms var(--ease-out); }
.nav__burger span:first-child { transform: translateY(-4px); }
.nav__burger span:last-child { transform: translateY(4px); }
.nav__burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: -1; display: grid; align-content: center; padding: 6rem var(--gutter) 2rem;
  background: var(--bg); clip-path: inset(0 0 100% 0); transition: clip-path 600ms var(--ease-in-out); visibility: hidden;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu a { display: block; overflow: hidden; font: 800 clamp(3rem, 15vw, 6rem)/.95 var(--f-display); font-variation-settings: "wdth" 70; text-transform: uppercase; }
.mobile-menu a span { display: block; transform: translateY(100%); transition: transform 600ms var(--ease-out); }
.mobile-menu.is-open a span { transform: none; }
.mobile-menu li:nth-child(2) span { transition-delay: 60ms; }
.mobile-menu li:nth-child(3) span { transition-delay: 120ms; }
.mobile-menu li:nth-child(4) span { transition-delay: 180ms; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; padding-left: 1rem; }
  .nav__logo { justify-self: start; }
  .nav__burger { display: inline-grid; }
  [data-sound-toggle], .nav__actions > a.icon-btn { display: none; }
  .bag-btn__label { display: none; }
  .bag-btn { padding: 0 .4rem; }
}

/* ---------- section head ---------- */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* ---------- dropcap (illuminated initial) ---------- */
.dropcap { position: relative; float: left; display: grid; place-items: center; width: 1.9em; aspect-ratio: 1; margin: .08em .25em 0 0; font-size: 2.2em; line-height: 1; color: var(--pink); }
.dropcap__frame { position: absolute; inset: 0; color: currentColor; }
.dropcap__letter {
  font: 700 1.5em/1 var(--f-gothic); color: transparent;
  background: var(--img) center / cover, var(--pink); background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1px var(--pink);
  filter: contrast(1.2);
}

/* ---------- product card ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 2rem); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); row-gap: clamp(2rem, 4vw, 4rem); }

.card { position: relative; perspective: 900px; }
.card__media {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-2); transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent);
}
.card.is-tilting .card__media { transition: transform 120ms linear, box-shadow 400ms var(--ease-out); box-shadow: 0 30px 50px -30px rgb(0 0 0 / .45); }
/* gothic arch watermark behind the tee */
.card__arch { position: absolute; inset: 10% 22% 0; background: var(--surface); -webkit-mask: var(--m-lancet) center bottom / 100% 100% no-repeat; mask: var(--m-lancet) center bottom / 100% 100% no-repeat; transition: transform 700ms var(--ease-out), background-color 400ms var(--ease-out); transform-origin: bottom; }
/* inner grain shadow inside the card */
.card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--g-grain) 0 0 / 160px; mix-blend-mode: multiply; opacity: .35; -webkit-mask: radial-gradient(90% 80% at 50% 45%, transparent 40%, #000); mask: radial-gradient(90% 80% at 50% 45%, transparent 40%, #000); }
.card__flip { position: absolute; inset: 6% 6% 4%; transform-style: preserve-3d; transition: transform 800ms var(--ease-in-out); }
.card__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .18)); }
.card__face--back { transform: rotateY(180deg); }
.card__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .45), transparent 45%); opacity: 0; mix-blend-mode: soft-light; transition: opacity 400ms var(--ease-out); }
.card__tag { position: absolute; top: .9rem; left: .9rem; }
.card__info { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.card__name { margin: 0; font: 650 var(--t-sm)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .02em; font-variation-settings: "wdth" 90; }
.card__price { margin: 0; font: 500 var(--t-sm)/1.2 var(--f-mono); white-space: nowrap; }
.card__price s { color: var(--muted); margin-right: .4rem; }
.card__swatches { display: flex; gap: 6px; margin-top: .6rem; }
.card__quick {
  position: absolute; left: .75rem; right: .75rem; top: calc((100% - 5rem) - 4.5rem); z-index: 3;
  padding: .75rem; border-radius: calc(var(--radius) - 4px);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .3), inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform 400ms var(--ease-out);
}
.card__quick-label { margin: 0 0 .5rem; color: var(--muted); }
.card__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.card__sizes .chip { height: 30px; min-width: 38px; }
.card__quick.is-added .card__quick-label { color: var(--pink-ink); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__arch { transform: scaleY(1.06); background: color-mix(in srgb, var(--pink) 22%, var(--surface)); }
  .card:hover .card__glare { opacity: 1; }
  .card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; pointer-events: auto; }
}
@media (hover: none) {
  .card__quick { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: .75rem; background: var(--bg-2); backdrop-filter: none; box-shadow: none; }
}
.card.is-flipped .card__flip { transform: rotateY(180deg); }

/* flying thumbnail for add-to-bag */
.fly { position: fixed; z-index: 200; width: 80px; height: 80px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .25)); }

/* ---------- forms ---------- */
.field { position: relative; margin-bottom: 1rem; }
.field input, .field select {
  width: 100%; height: 58px; padding: 1.4rem 1rem .5rem; border: 0; border-radius: var(--radius-sm);
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule-ui), inset 0 2px 4px rgb(0 0 0 / .06);
  transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  outline: none;
}
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg);
  -webkit-box-shadow: 0 0 0 100px var(--bg-2) inset, inset 0 0 0 1px var(--rule-ui);
  transition: background-color 9999s;
}
.field input:focus { box-shadow: inset 0 0 0 1.5px var(--fg); background: var(--bg); }
.field label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transform-origin: left; transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field input:-webkit-autofill + label { transform: translateY(-110%) scale(.74); color: var(--fg); }
.field.is-invalid input { box-shadow: inset 0 0 0 1.5px var(--pink); animation: shake 380ms var(--ease-out); }
.field.is-valid input { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 40%, transparent); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.field--inline { display: flex; gap: .5rem; }
.field--inline input { flex: 1; }
.field--inline label { left: 1rem; top: 29px; }
.field--pw input { padding-right: 4.5rem; }
.field__eye { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); padding: .5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.check { display: flex; align-items: center; gap: .75rem; margin: .5rem 0 1.5rem; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check__box { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--rule-ui); display: grid; place-items: center; transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.check__box::after { content: ""; width: 10px; height: 6px; border: 2px solid #000; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform 300ms var(--ease-out); margin-top: -2px; }
.check input:checked + .check__box { background: var(--pink); box-shadow: none; }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--pink); outline-offset: 2px; }

.select select { appearance: none; height: 36px; padding: 0 2rem 0 1rem; border: 0; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .7rem center / 14px no-repeat; font: 500 var(--t-caption)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }

.meter { height: 4px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: var(--pink); border-radius: inherit; transition: width 700ms var(--ease-out); }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.drawer.is-open { pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .4); opacity: 0; transition: opacity 400ms var(--ease-out); backdrop-filter: blur(2px); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: .5rem; right: .5rem; bottom: .5rem; width: min(440px, calc(100% - 1rem));
  display: flex; flex-direction: column; border-radius: calc(var(--radius) + 6px); background: var(--bg);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5), inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
  transform: translateX(calc(100% + 1rem)); transition: transform 500ms var(--ease-drawer); overflow: hidden;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.25rem .75rem 1.5rem; }
.drawer__head sup { font: 500 var(--t-caption) var(--f-mono); color: var(--pink-ink); }
.drawer__ship { padding: 0 1.5rem 1rem; display: grid; gap: .5rem; }
.drawer__items { flex: 1; overflow: auto; list-style: none; margin: 0; padding: 0 1.5rem; overscroll-behavior: contain; }
.drawer__empty { display: none; flex: 1; place-content: center; justify-items: center; gap: 1.25rem; text-align: center; padding: 2rem; }
.drawer.is-empty .drawer__empty, .is-empty > .drawer__empty { display: grid; }
.drawer.is-empty .drawer__items, .drawer.is-empty .drawer__foot, .drawer.is-empty .drawer__ship { display: none; }
.drawer__empty-arch { width: 70px; color: var(--pink); animation: float 4s var(--ease-in-out) infinite alternate; }
@keyframes float { to { transform: translateY(-10px) rotate(3deg); } }
.drawer__foot { padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--rule); display: grid; gap: 1rem; }
.drawer__total { display: flex; justify-content: space-between; font: 600 var(--t-lg) var(--f-display); text-transform: uppercase; }

.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.line__img { width: 76px; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--bg-2); object-fit: contain; padding: 6px; outline: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); outline-offset: -1px; }
.line__name { font: 650 var(--t-sm)/1.2 var(--f-display); text-transform: uppercase; margin: 0 0 .25rem; }
.line__meta { color: var(--muted); }
.line__right { display: grid; justify-items: end; gap: .5rem; font: 500 var(--t-sm) var(--f-mono); }
.line__remove { font: 500 var(--t-caption) var(--f-mono); text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
@media (hover: hover) and (pointer: fine) { .line__remove:hover { color: var(--pink-ink); } }
.qty { display: inline-flex; align-items: center; height: 36px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); }
.qty button { width: 34px; height: 100%; border-radius: 999px; font-size: 1.1rem; transition: background-color var(--dur) var(--ease-out); }
.qty button:active { background: var(--surface); }
.qty output { min-width: 1.6rem; text-align: center; font: 500 var(--t-sm) var(--f-mono); }
.qty output.is-tick { animation: tick 300ms var(--ease-out); }
@keyframes tick { 40% { transform: translateY(-4px); opacity: .4; } }

/* ---------- footer ---------- */
.footer { position: relative; margin-top: var(--section); background: #000; color: #fff; overflow: hidden; --rule: #2b2b2b; --bg-2: #111; --surface: #1a1a1a; --muted: #8f8f8f; --fg: #fff; --bg: #000; }
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; padding-top: clamp(4rem, 8vw, 7rem); }
.newsletter .h2 { margin-bottom: 1.5rem; }
.newsletter__msg { min-height: 1.2em; margin-top: .75rem; color: var(--pink); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer__cols div { display: grid; gap: .7rem; align-content: start; }
.footer__mark { position: relative; display: grid; place-items: center; padding-top: 4rem; }
.footer__word { font: 900 var(--t-mega)/.78 var(--f-display); font-variation-settings: "wdth" 62; letter-spacing: -.03em; color: #fff; text-transform: uppercase; display: block; }
.footer__rose { position: absolute; width: min(42vw, 520px); color: var(--pink); opacity: .9; top: 10%; }
.footer__credit { grid-column: 1 / -1; margin: 1rem 0 0; color: var(--muted); }
.footer__credit a { color: #fff; }
.footer__base { position: relative; z-index: 2; background: #000; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.5rem; border-top: 1px solid var(--rule); color: var(--muted); }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; gap: 3rem; } .footer__cols { grid-template-columns: repeat(2, 1fr); } }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.loader__mark { display: grid; justify-items: center; }
.loader__word { display: block; overflow: hidden; font: 700 clamp(1.4rem, 4vw, 2.6rem)/1 var(--f-display); letter-spacing: .3em; font-variation-settings: "wdth" 110; padding-left: .3em; }
.loader__word > span { display: block; transform: translateY(105%); }
.loader__script { width: min(78vw, 560px); height: auto; overflow: visible; margin: -2.5% 0 -1.5%; }
.loader__script text { font: 400 200px var(--f-script); fill: transparent; stroke: var(--pink); stroke-width: 1.6; }
.loader__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.5rem; display: flex; justify-content: space-between; color: var(--muted); }
.loader__shape { width: 30px; height: 30px; overflow: visible; }
.loader__shape path { fill: none; stroke: var(--fg); stroke-width: 3; vector-effect: non-scaling-stroke; }
html:not(.js) .loader, .loader.is-done { display: none; }

/* ---------- page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 500ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 700ms var(--ease-in-out) both; }
@keyframes vt-out { to { opacity: .4; transform: translateY(-4%) scale(.98); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0 round 40px 40px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }

/* ---------- reveal defaults (JS animates in; without JS everything shows) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js .is-in[data-reveal] { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .grain { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* theme toggle: circular wipe from the toggle button */
html.is-theming::view-transition-old(root) { animation: none; }
html.is-theming::view-transition-new(root) { animation: theme-wipe 650ms var(--ease-in-out) both; }
@keyframes theme-wipe { from { clip-path: circle(0 at var(--tx) var(--ty)); } to { clip-path: circle(150vmax at var(--tx) var(--ty)); } }

/* Product cutouts sit on a light paper stage in both themes (editorial studio feel). */
.card__media, .spin, .series__item, .line__img, .thumb, .summary__items img, .sticky-buy img {
  --stage: #f1eee8;
  background-color: var(--stage);
  color-scheme: light;
}
.card__arch { background: #e4dfd6; }
:root[data-theme="dark"] .card__media, :root[data-theme="dark"] .spin { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 -60px 80px -40px rgb(0 0 0 / .35); }

/* full-bleed final section (home CTA) runs straight into the footer: no white gap */
main:has(> .script-cta:last-child) + .footer { margin-top: 0; }

/* ---------- footer credit: mini browser window pops out of "Movor" ---------- */
.credit { position: relative; display: inline-block; color: #fff; }
.credit__name { position: relative; display: inline-block; transition: color 200ms var(--ease-out); }
.credit__name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.credit__win {
  position: absolute; left: -.5rem; bottom: calc(100% + 12px); z-index: 5; width: 240px;
  border-radius: 10px; overflow: hidden; background: #151511;
  box-shadow: 0 24px 50px -12px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .1);
  transform-origin: 12% 110%; transform: translateY(10px) scale(.6) rotate(-4deg); opacity: 0; pointer-events: none;
  clip-path: inset(100% 0 0 0 round 10px);
  transition: transform 280ms var(--ease-out), opacity 160ms var(--ease-out), clip-path 320ms var(--ease-out);
}
.credit__bar { display: flex; align-items: center; gap: 4px; padding: 7px 8px; background: #22221d; border-bottom: 1px solid rgb(255 255 255 / .06); }
.credit__bar i { width: 6px; height: 6px; border-radius: 50%; background: #4a4a42; }
.credit__bar i:first-child { background: var(--pink); }
.credit__url { margin-left: 6px; flex: 1; padding: 2px 8px; border-radius: 99px; background: #151511; color: #b9b8ae; font: 500 9px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: none; }
.credit__view { display: block; height: 124px; overflow: hidden; }
.credit__view img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transform-origin: 20% 40%; }
/* open on hover/focus; the page inside drifts in slowly */
.credit:focus-visible .credit__win { transform: none; opacity: 1; clip-path: inset(0 0 0 0 round 10px); }
.credit:focus-visible .credit__name { color: var(--pink); }
@media (hover: hover) and (pointer: fine) {
  .credit:hover .credit__win { transform: none; opacity: 1; clip-path: inset(0 0 0 0 round 10px); }
  .credit:hover .credit__name { color: var(--pink); }
  .credit:hover .credit__name::after { transform: scaleX(1); }
  .credit:hover .credit__view img { animation: credit-browse 5s 400ms var(--ease-in-out) infinite alternate; }
}
@keyframes credit-browse { to { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .credit__view img { animation: none !important; } }

/* ---------- custom dropdown (listbox) ---------- */
.dd { position: relative; }
.dd__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd__btn {
  display: inline-flex; align-items: center; gap: .6rem; height: 36px; padding: 0 .8rem 0 1rem; border-radius: 999px;
  background: var(--surface); font: 500 var(--t-caption)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .12); transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dd__btn:active { transform: scale(.97); }
.dd__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 300ms var(--ease-out); }
.dd.is-open .dd__chev { transform: rotate(180deg); }
.dd__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; background: var(--bg); outline: none;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / .35), inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);
  transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none; visibility: hidden;
  transition: opacity 150ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s 200ms;
}
.dd.is-open .dd__list { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out); }
.dd__opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-radius: 10px; cursor: pointer;
  font: 500 var(--t-caption)/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.dd__opt.is-active { background: var(--surface); color: var(--fg); }
.dd__opt[aria-selected="true"] { color: var(--fg); }
.dd__opt[aria-selected="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }