:root {
  --page: #efefef;
  --ink: #141312;
  --metal: #111010;
  --bone: #f3f0ea;
  --accent: #2a2a2a;
  --mist: linear-gradient(135deg, #e6e6e6 0%, #d6d6d6 100%);
  --graphite: linear-gradient(155deg, #3d3d3d 0%, #262626 50%, #121212 100%);
  /* Gold for headings: a deeper ramp that stays legible on the light greys, a brighter one for the graphite panels. */
  --gold-ink: linear-gradient(100deg, #6a4b10 0%, #9c7322 28%, #c99f45 47%, #a57b26 62%, #5f430d 100%);
  /* Dark panels and the cards on them share a gold hairline; panels lift off the page, cards off the panel. */
  --gold-line: 1px solid rgb(216 173 76 / .5);
  --gold-edge: 1px solid #b8913f;   /* big dark panels: opaque, since a translucent line sinks into their own black wall */
  --gold-line-soft: 1px solid rgb(216 173 76 / .22);   /* the cards floating inside the hero */
  --panel-shadow: 0 30px 60px -32px rgb(0 0 0 / .55), 0 8px 18px -10px rgb(0 0 0 / .25);
  --card-shadow: 0 18px 36px -16px rgb(0 0 0 / .75);
  /* Hero glass: thin enough that the wall shows through blurred, with a soft shadow lifting it off. */
  /* Trial: outline only, no fill or blur. The glass values were:
     --glass: linear-gradient(160deg, rgb(255 255 255 / .11), rgb(255 255 255 / .03)), rgb(30 30 30 / .12);
     --glass-blur: blur(10px) saturate(150%);
     --glass-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 16px 36px -14px rgb(0 0 0 / .6); */
  --glass: none;
  --glass-blur: none;
  --glass-edge: 0 none;   /* trial; the outline was 1px solid rgb(255 255 255 / .13) */
  --glass-shadow: none;
  --gold-shine: linear-gradient(100deg, #b0863a 0%, #ecd08a 38%, #fff1c8 50%, #d8ad4c 66%, #a07526 100%);

  --font-ui: "Trio Grotesk", "Archivo", sans-serif;

  --gutter: clamp(6px, .6vw, 10px);
  --r: clamp(12px, 1vw, 16px);   /* kept under half the slimmest bar (the 36px ticker), so every box shows the same corner */
  --gap: clamp(4px, .4vw, 6px);
  --top-h: clamp(52px, 4vw, 62px);   /* the white header bar above the hero */
  --strip: clamp(36px, 2.8vw, 44px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-stretch: 125%;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--metal); color: var(--bone); }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.tnum { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -40px;
  padding: 8px 12px;
  background: var(--metal);
  color: var(--bone);
  font-size: 12px;
  z-index: 3;
}
.skip:focus { top: 8px; }

/* Preloader: the signature writes itself, then a circle opens from the centre to reveal the page. */

@property --hole {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;   /* above the menu bar too: nothing shows before the page opens */
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: loader-bail 0s linear 6s forwards;   /* never leave the page covered if the script fails */
}

/* Two halves of the dark wall; on exit they part, up and down, and uncover the page. */
.loader__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #121212 url("/themes/sasha/assets/annie.webp?v=2") center / cover;
  transition: transform 1.1s var(--ease-io);
}
.loader__half--top { top: 0; background-position: center top; border-bottom: 1px solid rgb(216 173 76 / .35); }
.loader__half--bottom { bottom: 0; background-position: center bottom; border-top: 1px solid rgb(216 173 76 / .35); }
.loader.is-done .loader__half--top { transform: translateY(-101%); }
.loader.is-done .loader__half--bottom { transform: translateY(101%); }

.loader__mark {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: clamp(220px, 26vw, 380px);
  transition: opacity .4s linear, transform .8s var(--ease);
}
.loader.is-done .loader__mark { opacity: 0; transform: translateY(-14px) scale(.96); }

/* The gold signature writes itself in, then a light runs across it. */
.loader__sign {
  position: relative;
  width: 100%;
  animation: loader-write 1.3s var(--ease-io) both;
}
.loader__sign img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .6)); }
.loader__sign::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 241 200 / .85) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  -webkit-mask: url("/themes/sasha/assets/logo-wide-gold.webp") center / contain no-repeat;
  mask: url("/themes/sasha/assets/logo-wide-gold.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: loader-shine 1.6s var(--ease-io) 1.1s infinite;
}

.loader__bar {
  position: relative;
  width: 72%;
  height: 1px;
  overflow: hidden;
  background: rgb(216 173 76 / .18);
}
.loader__bar span {
  position: absolute;
  inset: 0;
  background: var(--gold-shine);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform .25s linear;
}

.loader__count {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  color: #d8ad4c;
  font-variant-numeric: tabular-nums;
}

@keyframes loader-write { from { clip-path: inset(-5% 100% -5% 0); } to { clip-path: inset(-5% 0 -5% 0); } }
@keyframes loader-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes loader-bail { to { visibility: hidden; } }

/* The menu bar opens from its centre once the loader parts; logo and links drop in after it. */
body:not(.sub) .top { animation: bar-open 1.1s var(--ease-io) .35s backwards; }
@keyframes bar-open {
  from { clip-path: inset(0 50% 0 50% round var(--r)); opacity: .2; }
  to { clip-path: inset(0 0 0 0 round var(--r)); opacity: 1; }
}

/* The page holds its entrance, and stays put, until the loader starts to open. */
body:has(> .loader:not(.is-done)) { overflow: hidden; }
body:has(> .loader:not(.is-done)) :not(.loader, .loader *) { animation-play-state: paused !important; }

/* Hero */

/* Hero plus ticker fill the first screen exactly. */
main { flex: none; display: flex; height: max(460px, calc(100svh - var(--top-h) - var(--strip) - 2 * var(--gap) - 2 * var(--gutter))); }

.hero {
  --px: .62;
  --py: .32;
  position: relative;
  flex: 1;
  --edge: clamp(8px, .8vw, 12px);           /* inset of the menu bar and the bottom cards */
  --inset: clamp(18px, 1.8vw, 32px);         /* the card, notes and rail keep this clear of the hero's edge */
  --card-w: clamp(260px, 20vw, 340px);
  border: var(--gold-edge);
  border-radius: var(--r);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  background: #0b0b0b;
  color: #f1f0ec;
  isolation: isolate;
  animation: grow 1s var(--ease) backwards;
}

.hero__bg {
  position: absolute;
  inset: -3%;
  transform: translate(calc((.5 - var(--px)) * 2.4%), calc((.5 - var(--py)) * 2.4%)) scale(1.02);
  will-change: transform;
}

/* The band of window light creeps across the wall, slow enough to feel like time passing. */
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: settle 2s var(--ease) backwards, drift 34s ease-in-out 2s infinite alternate;
}

/* Cursor spotlight falling on the wall itself. */
.hero__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;   /* soft-light barely lifts a near-black wall; the logo's shadow needs light to fall in */
  background: radial-gradient(42vmax 42vmax at calc(var(--px) * 100%) calc(var(--py) * 100%), rgb(255 238 208 / .2), transparent 70%);
}

.hero__stage { position: absolute; inset: 0; pointer-events: none; }

.hero__anchor { position: absolute; left: 0; right: 0; top: 19%; height: 54%; }

.hero__metal { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__fallback { position: absolute; left: 18%; top: 19%; width: 64%; height: 54%; object-fit: contain; mix-blend-mode: multiply; }

/* "Fashion" hangs under "Ferrano", sized and placed from the mark's box (set by the logo script), spaced wide like a label line. */
.hero__tag {
  position: absolute;
  left: calc(var(--logo-l, 18%) + var(--logo-w, 64%) * .67);
  top: calc(var(--logo-t, 30%) + var(--logo-h, 30%) * .68);
  margin: 0;
  font-size: calc(var(--logo-w, 900px) * .026);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
  animation: tag-in 1.6s var(--ease) 2s backwards;
}
@keyframes tag-in { from { opacity: 0; letter-spacing: 1.1em; } }

/* Two short notes on the wall between the columns: what the clothes are made of and who they are cut for. */
/* One thin glass bar in the bottom-right: three titles split by hairlines, on the slider card's baseline. */
.hero__notes {
  position: absolute;
  right: var(--inset);
  bottom: var(--inset);
  display: flex;
  align-items: center;
  border: var(--glass-edge);
  border-radius: calc(var(--r) * .6);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  pointer-events: none;
  animation: drop-in 1s var(--ease) 1.8s backwards;
  transition: opacity .4s var(--ease);
}
.hero.is-menu .hero__notes { opacity: 0; }   /* on a phone the bar sits under the menu's drop */

.hero__note {
  padding: 13px clamp(20px, 2.4vw, 44px);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: #e0bd62;
}
.hero__note + .hero__note { border-left: 1px solid rgb(224 189 98 / .25); }

/* A slim glass rail down the right edge: the brand's socials and a cue to scroll on. */
.hero__rail {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  right: var(--inset);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  height: fit-content;
  margin-block: auto;
  padding: 16px 9px;
  border: var(--glass-edge);
  border-radius: 999px;
  color: #e0bd62;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  animation: drop-in 1s var(--ease) 1.6s backwards;
}
.hero__rail a { display: inline-flex; transition: color .4s var(--ease), transform .5s var(--ease); }
.hero__rail a:hover { color: #fff1c8; transform: translateY(-2px); }

.hero__rail-line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgb(224 189 98 / .3);
}
.hero__rail-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: #ecd08a;
  animation: rail-drip 2.4s var(--ease-io) infinite;
}
@keyframes rail-drip { to { top: 100%; } }

.hero__rail-text {
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* Header: the menu on its own bar above the hero, dressed like the ticker, with the stacked logo at its centre. */
/* The bar stays at the top while the page scrolls under it. */
.top {
  position: sticky;
  top: var(--gutter);
  z-index: 40;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--top-h);
  margin-bottom: var(--gap);
  padding-inline: clamp(16px, 1.6vw, 26px);
  border: var(--gold-edge);
  border-radius: var(--r);
  background: linear-gradient(160deg, #363636 0%, #2a2a2a 50%, #1e1e1e 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), var(--panel-shadow);
}

.nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.9vw, 30px);
  font-size: clamp(11px, .8vw, 12px);
  font-weight: 500;
  text-transform: uppercase;
  color: #e0bd62;
  animation: drop-in .9s var(--ease) .72s backwards;
}

.nav > a, .menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 38px;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 100% calc(50% + 11px) / 0 1px no-repeat;
  transition: background-size .6s var(--ease);
}
.nav > a:hover, .menu__trigger:hover, .menu.is-open .menu__trigger {
  background-position: 0 calc(50% + 11px);
  background-size: 100% 1px;
}

.menu { position: relative; }
.menu--phone { display: none; }

.menu__trigger svg { transition: transform .6s var(--ease); }
.menu.is-open .menu__trigger svg { transform: rotate(180deg); }

/* Drop panel dressed like the bar: solid graphite, gold edge, gold capitals; it unrolls from the top and the
   links follow one by one. A strip above it keeps the hover alive across the gap. */
.menu__panel {
  position: absolute;
  top: calc(100% + 40px);
  left: -14px;
  width: 220px;
  padding: 10px 18px 12px;
  border: 1px solid rgb(216 173 76 / .28);
  border-radius: var(--r);
  color: rgb(224 189 98 / .9);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(160deg, #363636 0%, #2a2a2a 50%, #1e1e1e 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 22px 44px -22px rgb(0 0 0 / .7);
  clip-path: inset(0 0 100% 0 round var(--r));
  opacity: 0;
  visibility: hidden;
  transition: clip-path .5s var(--ease-io), opacity .25s linear, visibility 0s .5s;
}
.menu__panel::before { content: ""; position: absolute; inset: -42px 0 auto; height: 42px; }

.menu.is-open .menu__panel {
  clip-path: inset(-20px -20px -40px -20px round var(--r));
  opacity: 1;
  visibility: visible;
  transition: clip-path .6s var(--ease-io), opacity .2s linear, visibility 0s;
}

.menu__panel ul { position: relative; margin: 0; padding: 0; list-style: none; }

.menu__panel li {
  border-bottom: 1px solid rgb(216 173 76 / .09);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s linear, transform .15s linear;
}
.menu__panel li:last-child { border-bottom: 0; }
.menu.is-open .menu__panel li {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
  transition-delay: calc(120ms + var(--i, 0) * 45ms);
}
.menu__panel li:nth-child(2) { --i: 1; }
.menu__panel li:nth-child(3) { --i: 2; }
.menu__panel li:nth-child(4) { --i: 3; }
.menu__panel li:nth-child(5) { --i: 4; }
.menu__panel li:nth-child(6) { --i: 5; }
.menu__panel li:nth-child(7) { --i: 6; }
.menu__panel li:nth-child(8) { --i: 7; }
.menu__panel li:nth-child(9) { --i: 8; }

/* A gold dash slides in before the link under the pointer; the others step back. */
.menu__panel a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 36px;
  transition: opacity .3s var(--ease), color .3s var(--ease), gap .5s var(--ease);
}
.menu__panel a::before {
  content: "";
  width: 0;
  height: 1px;
  background: var(--gold-shine);
  transition: width .5s var(--ease);
}
.menu__panel a:hover, .menu__panel a:focus-visible { gap: 10px; color: #fff1c8; }
.menu__panel a:hover::before, .menu__panel a:focus-visible::before { width: 16px; }
.menu__panel ul:hover a:not(:hover) { opacity: .45; }

.menu__cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.menu__group { margin: 6px 0 4px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgb(241 240 236 / .55); }

.crest, .notch { position: absolute; }

/* Stacked logo at the header's centre, clear of its top and bottom edges. */
.crest {
  top: 50%;
  left: 50%;
  height: calc(var(--top-h) - 12px);
  translate: -50% -50%;
  animation: drop-in .85s var(--ease) .5s backwards;
}
.crest img { display: block; width: auto; height: 100%; transition: transform .9s var(--ease); }
.crest:hover img { transform: scale(1.06); }
.crest:focus-visible { outline-offset: 2px; border-radius: 6px; }


/* Bottom columns: deliberately unequal. */

/* One glass card in the bottom-left corner; its messages take turns, each bar filling while its slide shows. */
.notch {
  --d: .9s;
  left: var(--inset);
  bottom: var(--inset);
  display: grid;
  width: var(--card-w);
  border: var(--gold-line-soft);
  border-radius: var(--r);
  box-shadow: var(--card-shadow);
  /* A panel of the same wall, lifted a shade, so the hover glow has a surface to land on. */
  background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03)), #161616 url("/themes/sasha/assets/annie.webp?v=2") center / cover;
  animation: grow-out .85s var(--ease) var(--d) backwards;
}

.notch__dots {
  position: absolute;
  z-index: 2;
  top: calc(clamp(22px, 2vw, 30px) - 5px);
  right: clamp(18px, 1.7vw, 26px);
  display: flex;
  gap: 2px;
}
.notch__dot {
  position: relative;
  width: 30px;
  height: 24px;   /* a finger-sized target; the bar itself stays 2px */
  padding: 0;
  border: 0;
  background: linear-gradient(rgb(255 255 255 / .22), rgb(255 255 255 / .22)) center / 26px 2px no-repeat;
  cursor: pointer;
}
.notch__dot::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 11px;
  height: 2px;
  background: var(--gold-shine);
  transform: scaleX(0);
  transform-origin: left;
}
.notch__dot.is-on::after { animation: slide-fill 6.5s linear forwards; }
.notch:hover .notch__dot::after, .notch:focus-within .notch__dot::after { animation-play-state: paused; }
@keyframes slide-fill { to { transform: none; } }

.drop {
  --gx: 80%;
  --gy: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.7vw, 26px);
  border-radius: var(--r);
  overflow: hidden;
}
.notch .drop {
  grid-area: 1 / 1;
  padding: clamp(16px, 1.4vw, 22px);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.notch .drop__title { font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.notch .drop__list { margin-bottom: clamp(16px, 1.6vw, 24px); font-size: 11px; }   /* a set breath above the CTA instead of a stretched gap */
.notch .drop.is-on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .1s, visibility 0s; }
/* A slide's title rises again each time it comes round; after the first, without the entrance delay. */
.notch .drop:not(.is-on) .line > span { animation: none; }
.notch.is-live .drop.is-on .line > span { animation-delay: .15s; }
.notch.is-live .drop.is-on .line + .line > span { animation-delay: .25s; }
.drop:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 1px; border-radius: var(--r); }

.drop__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px 240px at var(--gx) var(--gy), rgb(255 255 255 / .18), transparent 70%);
  transition: opacity .6s var(--ease);
}
.drop:hover .drop__glow { opacity: 1; }

.drop__title, .drop__list, .drop__cta { position: relative; }

.drop__title {
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.06;
  text-transform: uppercase;
  transition: transform .9s var(--ease);
}
.drop:hover .drop__title { transform: translateX(4px); }

.line { display: block; overflow: hidden; }
.line > span { display: block; animation: line-up .9s var(--ease) calc(var(--d) + .22s) backwards; }
.line + .line > span { animation-delay: calc(var(--d) + .32s); }

.drop__list {
  margin-top: 10px;
  max-width: 38ch;
  font-size: 11.5px;
  font-stretch: 100%;
  line-height: 1.5;
  color: rgb(255 255 255 / .78);
}

.drop__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: #e0bd62;
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform .5s var(--ease);
}

.drop__cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--gold-shine);
  opacity: .55;
  transition: opacity .5s;
}
.drop:hover .drop__cta::before { opacity: 1; }

.drop__label { display: block; overflow: hidden; line-height: 1.3; padding-block: .16em; }   /* room for Ć's acute and Ę's ogonek */
.drop__label > span { position: relative; display: block; transition: transform .7s var(--ease); }
.drop__label > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.drop:hover .drop__label > span { transform: translateY(-100%); }

.drop__cta svg { flex: none; color: #d8ad4c; transition: transform .7s var(--ease); }
.drop:hover .drop__cta svg { transform: translateX(6px); }

/* Looping strip */

.ticker {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--strip);
  margin-top: var(--gap);
  border-radius: var(--r);
  overflow: hidden;
  /* Solid colours sampled from the hero's glass card as it reads over the wall. Glass itself would show the light
     page through it here, and the card's drop shadow would smear grey onto that page, so neither is reused. */
  border: var(--gold-edge);
  background: linear-gradient(160deg, #363636 0%, #2a2a2a 50%, #1e1e1e 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), var(--panel-shadow);
  animation: grow .9s var(--ease) 1.26s backwards;
}

.ticker__run {
  display: flex;
  width: max-content;
  animation: ticker 52s linear infinite;
}
.ticker:hover .ticker__run { animation-play-state: paused; }

.ticker__track {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(11px, .75vw, 12.5px);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker__track li {
  display: flex;
  align-items: center;
  background: var(--gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A small gold ring between items. */
.ticker__track li::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline: clamp(22px, 2.6vw, 40px);
  border: 1px solid #c9a045;
  border-radius: 50%;
}

@keyframes ticker { to { transform: translateX(-50%); } }

/* Brand story: the lead lights up word by word as it is scrolled through. */

.about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 320px) auto;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  padding: clamp(70px, 8vw, 120px) clamp(14px, 1.7vw, 26px);
  overflow-x: clip;   /* the spinning badge's corners must not widen the page */
}

.about__lead {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.05rem, 1.75vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: pretty;
}
.about__lead em { font-style: normal; color: var(--accent); }

.word { opacity: var(--lit, 1); transition: opacity .25s linear; }

.about__side p { margin: 0 0 20px; font-size: 14px; font-stretch: 100%; line-height: 1.55; }

.about__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: #8a6420;
  border-top: 1px solid rgb(201 159 69 / .55);
  transition: border-color .5s;
}
.about__link:hover { border-color: #c99f45; }
.about__link svg { flex: none; color: #a57b26; transition: transform .7s var(--ease); }
.about__link:hover svg { transform: translateX(6px); }
.about__link:hover .drop__label > span { transform: translateY(-100%); }

.about__badge {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: clamp(112px, 11.5vw, 168px);
  aspect-ratio: 1;
}

.about__badge svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  fill: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  text-transform: uppercase;
  transform: rotate(calc(var(--spin, 0) * 1deg));
}

.about__badge img { width: 42%; height: auto; }

/* Latest collections: one column stands open, the others wait as slim strips. */

.looks {
  position: relative;
  padding: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(14px, 1.4vw, 22px);
  border: var(--gold-edge);
  border-radius: var(--r);
  box-shadow: var(--panel-shadow);
  color: #f1f0ec;
  background: #121212 url("/themes/sasha/assets/annie.webp?v=2") center / cover;   /* the hero's black wall */
}

.looks__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: clamp(52px, 5vw, 70px);
  margin-bottom: clamp(10px, 1.1vw, 16px);
  padding-inline: clamp(8px, 1.3vw, 20px);
}

/* The heading sits inside the dark panel, in gold. */
.looks__head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
}
.looks__head .about__link { min-width: 180px; border-top: 0; border-bottom: 1px solid rgb(216 173 76 / .55); }
.looks__head .about__link, .looks__head .about__link svg { color: #e0bd62; }

.looks__row {
  display: flex;
  gap: var(--gap);
  height: clamp(560px, 92svh, 900px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.look {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 1s var(--ease);
}
.look.is-active { flex-grow: 1.7; }

.look a { display: flex; flex-direction: column; height: 100%; }

.look__photo {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: var(--gold-line);
  border-radius: var(--r);
  box-shadow: var(--card-shadow);
  background: #d9d9d9;
}

/* The photo always fills the height, so the whole figure stays in frame at any column width.
   A blurred copy of the same wall fills whatever is left at the sides. */
.look__photo::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--photo) center / cover;
  filter: blur(26px);
}

.look__photo img {
  position: absolute;
  left: 50%;
  top: 0;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
}

/* Waiting columns rest a little quieter, so the open one carries the section without any added colour. */
.look__photo { filter: saturate(.72) opacity(.78); transition: filter .9s var(--ease); }
.look.is-active .look__photo { filter: none; }

.look__info {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  height: 136px;
  padding: 14px 2px 0;
}

.look__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px;
  font-stretch: 100%;
  line-height: 1.3;
}

.look__price { font-size: 13px; font-variant-numeric: tabular-nums; transition: color .6s var(--ease); }
.look__price small { font-size: 11px; }
.look.is-active .look__price { color: #ecd08a; }

.look__btn {
  justify-self: start;
  margin-top: 2px;
  padding: 9px 16px;
  border-radius: calc(var(--r) * .45);
  color: var(--ink);
  background: var(--gold-shine);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  transition: filter .35s var(--ease), transform .5s var(--ease);
}
.look a:hover .look__btn, .look a:focus-visible .look__btn { filter: brightness(.86); transform: translateY(-1px); }
.look a:focus-visible { outline-offset: -3px; border-radius: var(--r); }

/* Brand film: the caption lives in a corner notch, so it never fights the footage. */

.film {
  position: relative;
  margin-top: var(--gap);
  border: var(--gold-edge);
  border-radius: var(--r);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  aspect-ratio: 80 / 27;
  max-height: 53svh;
  width: 100%;
  background: #d0d0d0;
}

.film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: grayscale(1) contrast(1.04); }

/* Clip the video, not the section: a fully clipped section would never register as on screen. */
.js .film:not(.is-in) video { clip-path: inset(50% 50% 50% 50% round var(--r)); }
.film.is-in video { animation: grow 1.1s var(--ease) backwards; }

/* A dark glass plate on the footage; it breathes, its width following the current line. */
.film__caption {
  position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  left: clamp(14px, 1.4vw, 22px);
  padding: clamp(8px, .8vw, 12px) clamp(14px, 1.4vw, 22px);
  border: 1px solid rgb(216 173 76 / .35);
  border-radius: calc(var(--r) * .6);
  background: rgb(12 12 12 / .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: clamp(1.15rem, 2vw, 1.9rem);
  line-height: 1.15;
  text-transform: uppercase;
}


/* All lines share one grid cell; JS sets the cell to the current line's width and CSS glides between them. */
.film__lines {
  box-sizing: content-box;
  display: grid;
  justify-items: start;
  padding: .12em .1em;   /* keeps glyph overhang and accents clear of the sliding-text clip */
  overflow: hidden;
  transition: width .8s var(--ease);
}
.film__lines span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity .3s linear, transform .3s linear;
}
.film__lines span.is-on {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}

/* Categories: an uneven bento. Multiply melts the photos' white studio backdrops into the card's grey. */

/* The category grid sits on the hero's black wall. */
.cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  margin-bottom: clamp(32px, 5vw, 70px);
  padding: clamp(12px, 1.3vw, 20px);
  border: var(--gold-edge);
  border-radius: var(--r);
  box-shadow: var(--panel-shadow);
  background: #121212 url("/themes/sasha/assets/annie.webp?v=2") center / cover;
}

.cat {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;   /* the shop's own photo format, so every picture shows whole */
  border: var(--gold-line);
  border-radius: var(--r);
  box-shadow: var(--card-shadow);
  background: var(--graphite);
  isolation: isolate;
}

.cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.cat:hover img { transform: scale(1.035); }

/* The eighth tile closes the grid with a way into the whole shop. */
.cat--all {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 1.8vw, 28px);
  color: #f1f0ec;
}
.cat__all { position: relative; display: grid; gap: 10px; }
.cat__all-k {
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.1;
  text-transform: uppercase;
  background: var(--gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat__all-t { max-width: 24ch; font-size: 13px; font-stretch: 100%; line-height: 1.5; color: rgb(255 255 255 / .72); }
.cat--all svg { position: relative; align-self: flex-end; color: #d8ad4c; transition: transform .7s var(--ease); }
.cat--all:hover svg { transform: translateX(6px); }

/* Gradients can't transition, so the lifted graphite sits ready on a layer and fades in. */
.cat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #4c4c4c 0%, #313131 50%, #1a1a1a 100%);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.cat:hover::before, .cat:focus-visible::before { opacity: 1; }


/* The name sits inside the card on a dark fade, in gold; it steps in a touch on hover. */
.cat__tab {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: clamp(40px, 4vw, 64px) clamp(14px, 1.4vw, 22px) clamp(12px, 1.2vw, 18px);
  background-image: var(--gold-shine), linear-gradient(transparent, rgb(0 0 0 / .55) 45%, rgb(0 0 0 / .82));
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  color: transparent;
  font-size: clamp(.95rem, 1.35vw, 1.3rem);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  transition: padding-left .7s var(--ease);
}
.cat:hover .cat__tab, .cat:focus-visible .cat__tab { padding-left: clamp(22px, 2.2vw, 34px); }

.cat:focus-visible { outline: 1.5px solid #e0bd62; outline-offset: 2px; }


/* Reasons to buy: three equal columns split by hairlines, each with the same weight of copy. */

.perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: clamp(32px, 5vw, 70px);
  border-block: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.perk {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: start;
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 3vw, 44px);
}
.perk + .perk { border-left: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }

.perk__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  border: 1px solid rgb(201 159 69 / .55);
  border-radius: 50%;
  color: #a57b26;
  background: var(--mist);
  transition: transform .8s var(--ease);
}
.perk:hover .perk__icon { transform: rotate(-8deg) scale(1.06); }

.perk h3 {
  margin: 0 0 8px;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--accent);
}

.perk p {
  max-width: 38ch;
  margin: 0;
  font-size: 14px;
  font-stretch: 100%;
  line-height: 1.55;
}

.perk a {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Footer: the one full block of graphite on the page, closed by the signature written large. */

.foot {
  position: relative;
  padding: clamp(36px, 4vw, 60px) clamp(18px, 2.4vw, 36px) clamp(14px, 1.5vw, 22px);
  border: var(--gold-edge);
  border-radius: var(--r);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  color: #fff;
  background: #121212 url("/themes/sasha/assets/annie.webp?v=2") center / cover;   /* the hero's black wall closes the page */
}

/* The way back up, in the panel's top-right corner. */
.foot__up {
  position: absolute;
  top: clamp(12px, 1.2vw, 18px);
  right: clamp(18px, 2.4vw, 36px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e0bd62;
  font-size: 12px;
  font-weight: 500;
  line-height: 32px;
  text-transform: uppercase;
}
.foot__up svg { transition: transform .6s var(--ease); }
.foot__up:hover svg { transform: translateY(-4px); }


.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.foot__claim p {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.18;
}

.foot__col h2 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: #e0bd62;
}

.foot__col ul { margin: 0; padding: 0; list-style: none; }

.foot__col li {
  font-size: 14px;
  font-stretch: 100%;
  line-height: 1.85;
}

.foot__col a {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size .55s var(--ease);
}
.foot__col a:hover { background-position: 0 100%; background-size: 100% 1px; }

.foot__social { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px !important; }
.foot__social a { display: inline-flex; color: #e0bd62; background: none; transition: color .4s var(--ease), transform .5s var(--ease); }
.foot__social a:hover { color: #fff1c8; transform: translateY(-2px); }

/* A small signature under the claim. */
.foot__sign {
  width: min(100%, 260px);
  margin-top: clamp(18px, 2vw, 28px);
}
.foot__sign img { display: block; width: 100%; height: auto; }

/* The wrapper is what gets watched: a fully clipped image would never count as on screen. */
.js .foot__sign:not(.is-in) img { clip-path: inset(-4% 100% -4% 0); }
.foot__sign.is-in img { animation: sign-write 2s var(--ease-io) backwards; }
@keyframes sign-write { from { clip-path: inset(-4% 100% -4% 0); } to { clip-path: inset(-4% 0 -4% 0); } }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .24);
  font-size: 12px;
  font-stretch: 100%;
}

/* Everything in a section sweeps in from the left, one element after another, once it reaches the screen. */
.js [data-in] { opacity: 0; }
.is-in [data-in], [data-in].is-in {
  opacity: 1;
  animation: sweep-in 1.2s var(--ease) calc(var(--i, 0) * 170ms) backwards;
}
.is-in .look[data-in], .cat[data-in].is-in { animation-name: sweep-open; animation-duration: 1.2s; }

@keyframes sweep-in { from { opacity: 0; translate: -150px 0; } }
@keyframes sweep-open {
  from { opacity: 0; translate: -120px 0; clip-path: inset(0 100% 0 0 round var(--r)); }
  to { clip-path: inset(-20px -20px -20px -20px round var(--r)); }
}

/* Every block opens from its own centre. grow-out ends past the box so the ears are never cut off. */
@keyframes grow {
  from { clip-path: inset(50% 50% 50% 50% round var(--r)); }
  to { clip-path: inset(0 0 0 0 round var(--r)); }
}
@keyframes grow-out {
  from { clip-path: inset(50% 50% 50% 50%); }
  to { clip-path: inset(-40px -40px -40px -40px); }
}
@keyframes settle { from { transform: scale(1.14); } }
@keyframes drift { to { transform: scale(1.07) translate(-2.2%, 1.4%); } }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1100px) {
  .nav .nav__lg { display: none; }
}

/* Phone: the logo keeps the width above the columns; the shorter one steps down beside the taller. */

@media (max-width: 760px) {
  /* One Menu button carries everything on a phone. */
  .menu--phone { display: block; }
  .nav--l > :not(.menu--phone), .nav--r > :not(:last-child) { display: none; }

  .notch__dots { top: 13px; right: 12px; }

  .menu__panel--all { left: -10px; width: calc(100vw - 32px); padding: 10px 14px; }
  .menu__panel a { min-height: 40px; }

  main { height: max(560px, calc(100svh - var(--top-h) - var(--strip) - 2 * var(--gap) - 2 * var(--gutter))); }

  .hero__anchor { top: 22%; height: 30%; }

  .hero__fallback { left: 8%; top: 22%; width: 84%; height: 30%; }

  /* The cards fill the bottom on a phone, so the notes go up into the empty top corners. */
  .hero__notes { left: var(--inset); top: var(--inset); bottom: auto; }
  .hero__note { flex: 1; padding: 11px 6px; font-size: 9px; letter-spacing: .02em; text-align: center; }
  .hero__rail { display: none; }

  .notch { right: var(--inset); width: auto; }


  .drop { padding: 14px; }
  .drop__title { font-size: 1.05rem; }
  .cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot { padding-top: 56px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__claim { grid-column: 1 / -1; }
  .foot__col:last-child { grid-column: 1 / -1; }

  .perks { grid-template-columns: 1fr; }
  .perk { grid-template-columns: 60px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; padding: 24px 6px; }
  .perk + .perk { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
  .perk__icon { grid-row: 1 / 3; margin-bottom: 0; }

  .film { aspect-ratio: 4 / 3; max-height: none; }
  .film video { object-position: 62% 55%; }

  .about { grid-template-columns: 1fr; gap: 28px; }
  .about__badge { grid-column: 1; grid-row: auto; justify-self: end; }

  .looks__head { min-height: 66px; padding-inline: 6px; }
  .looks__head h2 { font-size: 1.05rem; }
  .looks__head .about__link { min-width: 0; flex: 0 0 auto; gap: 10px; }

  .looks__row {
    height: 610px;
    margin-inline: calc(var(--gap) * -1 - var(--gutter));
    padding-inline: calc(var(--gap) + var(--gutter));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--gap) + var(--gutter));
    scrollbar-width: none;
  }
  .look, .look.is-active { flex: 0 0 74%; scroll-snap-align: start; }
  .look__photo { filter: none; }
  .look__price { color: #ecd08a; }

  .drop__list { font-size: 11.5px; }
  .drop__cta { font-size: 10px; gap: 6px; font-stretch: 100%; white-space: nowrap; }
  .drop__cta svg { width: 18px; }
  .drop__cta svg { width: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__bg { transform: none; }
}

/* Gold headings. Each element clips its own gradient, so words and lines that fade or slide on their own keep their gold. */
.about__lead em:not(:has(.word)), .about__lead em .word, .perk h3 {
  background: var(--gold-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gold on the dark panels: the bright ramp. */
.looks__head h2, .film__lines span {
  background: var(--gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.drop__title .line > span, .drop__title:not(:has(.line)), .foot__claim p {
  background: var(--gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}