: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%; }

/* Visible by default; hidden only while it waits to be written in, so no setting (Reduce Motion, an old Safari) can leave it blank. */
.hero__fallback { position: absolute; left: 18%; top: 19%; width: 64%; height: 54%; object-fit: contain; }
.hero__fallback.is-waiting { -webkit-clip-path: inset(-10% 100% -10% 0); clip-path: inset(-10% 100% -10% 0); }
.hero__fallback.is-on { animation: flat-write 1.5s var(--ease-io) .25s both; }
@keyframes flat-write {
  from { -webkit-clip-path: inset(-10% 100% -10% 0); clip-path: inset(-10% 100% -10% 0); }
  to { -webkit-clip-path: inset(-10% -2% -10% 0); clip-path: inset(-10% -2% -10% 0); }
}

/* "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 {
    top: calc(100% + 16px);
    left: -10px;
    width: calc(100vw - 32px);
    padding: 10px 14px;
    background: linear-gradient(160deg, #4a4a4a 0%, #3d3d3d 50%, #303030 100%);   /* lighter than the bar, so it reads as a sheet on top */
  }
  .menu__panel--all::before { inset: -18px 0 auto; height: 18px; }
  .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%; }


  /* 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; }
  /* The badge sits beside the lead text, not on a row of its own. */
  .about:has(.about__badge) { grid-template-columns: minmax(0, 1fr) 92px; column-gap: 14px; row-gap: 24px; align-items: start; }
  .about:has(.about__badge) .about__lead { grid-column: 1; grid-row: 1; }
  .about:has(.about__badge) .about__side { grid-column: 1 / -1; }
  .about__badge { grid-column: 2; grid-row: 1; width: 92px; margin-top: 2px; }

  .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;
}

/* ---- phone type scale ---- */
/* On a phone the type steps down: the footer most, headings by about a fifth, body copy a little. */
@media (max-width: 760px) {
  .foot { padding-top: 48px; }
  .foot__grid { gap: 22px 18px; }
  .foot__claim p { font-size: 1.05rem; line-height: 1.2; }
  .foot__sign { width: min(100%, 170px); margin-top: 14px; }
  .foot__col h2 { margin-bottom: 8px; font-size: 11px; letter-spacing: .06em; }
  .foot__col li { font-size: 12.5px; line-height: 1.8; }
  .foot__social { gap: 4px 14px; }
  .foot__legal { margin-top: 28px; font-size: 10.5px; }
  .foot__up { font-size: 11px; }

  .about__lead { font-size: 15px; }
  .about__side p { font-size: 13px; }
  .looks__head h2 { font-size: .95rem; }
  .look__name { font-size: 12px; }
  .film__caption { font-size: 15px; }
  .notch .drop__title { font-size: .95rem; }
  .perk h3 { font-size: 14px; }
  .perk p { font-size: 13px; }
}

/* ---- latest collections without a panel ---- */
/* "Najnowsze kolekcje" stands on the page itself: no dark wall, no frame; the type turns ink and deep gold like the text beside it. */
.looks { padding-inline: 0; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); background: none; }
.looks__head { padding-inline: 0; }
.looks__head h2 { background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.looks__head .about__link { border-bottom-color: rgb(138 100 32 / .45); }
.looks__head .about__link, .looks__head .about__link svg { color: #8a6420; }
.look__price, .look.is-active .look__price { color: #8a6420; }
@media (max-width: 760px) { .look__price { color: #8a6420; } }

/* ---- categories without a panel ---- */
/* The category tiles stand on the page too: no dark wall or frame around the grid, the tiles keep their own look. */
.cats { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }

/* ---- light grey slider card ---- */
/* The hero's slider card on light grey: ink copy and deep gold, so it reads like a printed label on the black wall. */
.notch {
  border: 1px solid rgb(184 145 63 / .55);
  background: linear-gradient(160deg, #ececec 0%, #dcdcdc 55%, #cfcfcf 100%);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .7);
}
.notch .drop { color: var(--ink); }
.notch .drop__title .line > span, .notch .drop__title:not(:has(.line)) { background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notch .drop__list { color: rgb(20 19 18 / .78); }
.notch .drop__cta { color: #7a5a17; }
.notch .drop__cta svg { color: #7a5a17; }
.notch .drop__glow { background: radial-gradient(240px 240px at var(--gx) var(--gy), rgb(255 255 255 / .55), transparent 70%); }
.notch__dot { background: linear-gradient(rgb(20 19 18 / .22), rgb(20 19 18 / .22)) center / 26px 2px no-repeat; }
.notch__dot::after { background: var(--gold-ink); }

/* ---- light grey bars ---- */
/* The menu bar and the ticker in the slider card's light grey: deep gold type, the gold edge kept. */
.top, .ticker {
  border: 1px solid rgb(184 145 63 / .55);
  background: linear-gradient(160deg, #f4eee7 0%, #e9dfd3 55%, #ddd0c1 100%);   /* the hero's cream beige */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), 0 14px 30px -18px rgb(80 60 40 / .4);
}
.nav { color: #7a5a17; }
.nav > a:hover, .menu__trigger:hover, .menu.is-open .menu__trigger { color: #5f430d; }
.ticker__track li { background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticker__track li::after { border-color: #9c7322; }

/* ---- gold on light: contrast ---- */
/* Gold type on the light grey and on the page: a deeper ramp, so even its brightest point keeps 4.5:1 for small text. */
:root { --gold-deep: linear-gradient(100deg, #5a3f0b 0%, #634810 45%, #6e5114 58%, #5a3f0b 100%); }
.ticker__track li,
.notch .drop__title .line > span, .notch .drop__title:not(:has(.line)),
.looks__head h2 { background: var(--gold-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticker__track li::after { border-color: #7a5a17; }
.nav, .notch .drop__cta, .notch .drop__cta svg { color: #6e5114; }

/* ---- beige hero ---- */
/* The hero on the beige studio backdrop: the wall no longer creeps, the copy on it turns ink and deep gold. */
.hero { background: #ddd1c4; color: var(--ink); }
.hero__bg img { animation: settle 2s var(--ease) backwards; }
.hero__spot { mix-blend-mode: soft-light; background: radial-gradient(42vmax 42vmax at calc(var(--px) * 100%) calc(var(--py) * 100%), rgb(255 250 240 / .45), transparent 70%); }
.hero__tag { color: #3b2f22; }
.hero__note { color: #5a3f0b; }
.hero__note + .hero__note { border-left-color: rgb(90 63 11 / .3); }
.hero__rail { color: #5a3f0b; }

/* ---- beige drop-downs ---- */
/* The drop-down menus in the same cream beige as the bar they hang from. */
.menu__panel, .menu__panel--all {
  border-color: rgb(184 145 63 / .45);
  color: #6e5114;
  background: linear-gradient(160deg, #f6f1ea 0%, #ece3d8 55%, #e2d6c8 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 22px 44px -22px rgb(80 60 40 / .45);
}
.menu__panel li { border-bottom-color: rgb(110 81 20 / .14); }
.menu__panel a:hover, .menu__panel a:focus-visible { color: #3b2f22; }
.menu__group { color: rgb(59 47 34 / .6); }

/* ---- hero in the "Natural" palette ---- */
/* Cream #FEF4EA and sand #ECDFCF carry the hero, mocha #A38772 shades its edges, sage #B0B098 and
   terracotta #D0A189 are small accents; the gold stays gold. Ink on these tones is a dark mocha. */
:root {
  --nat-cream: #fef4ea;
  --nat-sand: #ecdfcf;
  --nat-mocha: #a38772;
  --nat-sage: #b0b098;
  --nat-terra: #d0a189;
  --nat-ink: #4a3a2f;
}
.hero { background: var(--nat-sand); color: var(--nat-ink); }
.hero__spot { mix-blend-mode: soft-light; background: radial-gradient(42vmax 42vmax at calc(var(--px) * 100%) calc(var(--py) * 100%), rgb(254 244 234 / .55), transparent 70%); }
.hero__tag { color: #5c4a3d; }

/* The slider card: cream to sand, a sage hairline under the title area, gold edge and type. */
.notch {
  border: 1px solid rgb(184 145 63 / .5);
  background: linear-gradient(160deg, var(--nat-cream) 0%, #f4e9dc 55%, var(--nat-sand) 100%);
  box-shadow: 0 18px 40px -20px rgb(90 66 48 / .45);
}
.notch .drop { color: var(--nat-ink); }
.notch .drop__list { color: var(--nat-ink); }
.notch .drop__cta::before { background: var(--nat-sage); opacity: .7; }
.notch__dot { background: linear-gradient(rgb(74 58 47 / .22), rgb(74 58 47 / .22)) center / 26px 2px no-repeat; }

/* The three notes and the side rail sit on the mocha edge, so they get a cream sheet to stay legible. */
.hero__notes { background: rgb(254 244 234 / .82); border: 1px solid rgb(184 145 63 / .35); }
.hero__note { color: #5c4a3d; }
.hero__note + .hero__note { border-left-color: rgb(176 176 152 / .7); }
.hero__rail { color: #5c4a3d; background: rgb(254 244 234 / .82); border: 1px solid rgb(184 145 63 / .35); }

/* Menu bar, drop-downs and ticker: cream and sand; terracotta dots between the ticker words. */
.top, .menu__panel, .menu__panel--all {
  background: linear-gradient(160deg, var(--nat-cream) 0%, #f5ebdf 55%, var(--nat-sand) 100%);
}
.ticker { background: linear-gradient(160deg, #f5ebdf 0%, var(--nat-sand) 55%, #e3d3c0 100%); }
.ticker__track li::after { border-color: var(--nat-terra); background: rgb(208 161 137 / .35); }
.menu__panel li { border-bottom-color: rgb(176 176 152 / .45); }

/* ---- hero shapes ---- */
/* A shape in each corner, the middle left to the logo: they drift a little against the cursor and float slowly. */
.hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate(calc((var(--px) - .5) * 1.6%), calc((var(--py) - .5) * 1.6%));
}
.deco { position: absolute; display: block; animation: deco-float 18s ease-in-out infinite alternate; }

/* Top left: a gold hairline ring falling out of the corner, a terracotta bead on its line. */
.deco--ring { left: -14vmin; top: -20vmin; width: 52vmin; aspect-ratio: 1; border: 1px solid rgb(184 145 63 / .4); border-radius: 50%; }
.deco--dot {
  left: calc(-14vmin + 52vmin * .853 - 5px); top: calc(-20vmin + 52vmin * .853 - 5px);
  width: 10px; aspect-ratio: 1; border-radius: 50%; background: #d0a189; opacity: .8;
}

/* Top right: a palette pill hanging from the top edge, a small sage bead beside it. */
.deco--pill {
  right: 9%; top: -12vmin; width: 11vmin; height: 36vmin;
  border: 1px solid rgb(184 145 63 / .45); border-radius: 999px;
  background: linear-gradient(0deg, rgb(254 244 234 / .45), transparent 75%);
  animation-duration: 24s; animation-delay: -8s;
}
.deco--bead { right: calc(9% + 15vmin); top: 9vmin; width: 3.4vmin; aspect-ratio: 1; border-radius: 50%; background: rgb(176 176 152 / .6); animation-duration: 20s; }

/* Bottom left: a soft sage moon half out of the corner, behind the slider card. */
.deco--sage {
  left: -9vmin; bottom: -12vmin; width: 34vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 60% 35%, rgb(176 176 152 / .5), rgb(176 176 152 / .18) 70%);
  animation-duration: 22s; animation-delay: -5s;
}

/* Bottom right: a quarter ring in the corner and the ghost "XXL" in the empty band above the notes. */
.deco--quarter { right: -22vmin; bottom: -22vmin; width: 44vmin; aspect-ratio: 1; border: 1px solid rgb(184 145 63 / .38); border-radius: 50%; animation: none; }
.deco--xxl {
  right: 4%; bottom: 13%;
  font-size: clamp(90px, 15vw, 260px);
  font-weight: 500;
  font-stretch: 125%;
  line-height: .8;
  letter-spacing: -.02em;
  color: rgb(163 135 114 / .08);
  -webkit-text-stroke: 1px rgb(110 81 20 / .2);
  animation-duration: 30s;
}

@keyframes deco-float { to { transform: translate(0, -10px) rotate(.6deg); } }

@media (max-width: 760px) {
  .deco--ring { width: 62vmin; left: -26vmin; top: -24vmin; }
  .deco--dot { left: calc(-26vmin + 62vmin * .853 - 4px); top: calc(-24vmin + 62vmin * .853 - 4px); width: 8px; }
  .deco--pill { right: 7%; top: -14vmin; width: 13vmin; height: 40vmin; }
  .deco--bead { right: calc(7% + 18vmin); top: 12vmin; width: 5vmin; }
  .deco--sage { width: 46vmin; left: -16vmin; bottom: 18%; }
  .deco--quarter { width: 60vmin; right: -30vmin; bottom: 22%; }
  .deco--xxl { right: 4%; bottom: 38%; font-size: 24vw; }
}
@media (prefers-reduced-motion: reduce) { .hero__deco { transform: none; } }

/* ---- dark mocha menu ---- */
/* The menu bar and its drop-downs one step darker than the hero's sand, with dark mocha type (6.4:1 or better). */
.top, .menu__panel, .menu__panel--all {
  border-color: rgb(184 145 63 / .5);
  background: linear-gradient(160deg, #e4d6c6 0%, #ddcdbb 55%, #d6c4b0 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 14px 30px -18px rgb(80 60 40 / .4);
}
.nav { color: #4a3a2f; }
.nav > a:hover, .menu__trigger:hover, .menu.is-open .menu__trigger { color: #2e231b; }
.menu__panel, .menu__panel--all { color: #4a3a2f; }
.menu__panel a:hover, .menu__panel a:focus-visible { color: #2e231b; }
.menu__panel li { border-bottom-color: rgb(74 58 47 / .14); }
.menu__group { color: rgb(74 58 47 / .62); }

/* ---- home page in the "Natural" palette ---- */
/* Below the hero the page keeps the same warm, light tone: ivory instead of cool grey, warm dark type,
   gold for headings and lines, sage and terracotta only as small accents. */
:root {
  --page: #f3efe8;
  --ink: #2f251e;
  --accent: #4a3a2f;
  --mist: linear-gradient(135deg, #fef4ea 0%, #ecdfcf 100%);
}
body { background: var(--page); }

/* Film: the black-and-white footage warms up a touch; the caption becomes a cream plate with deep-gold type. */
.film { background: #e3d9cc; }
.film video { filter: grayscale(1) sepia(.22) contrast(1.02) brightness(1.03); }
.film__caption { border-color: rgb(184 145 63 / .45); background: rgb(254 244 234 / .84); }
.film__lines span { background: var(--gold-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* "Cały sklep" tile: cream and sand like the hero card. */
.cat--all { color: var(--nat-ink); background: linear-gradient(160deg, var(--nat-cream) 0%, #f4e9dc 55%, var(--nat-sand) 100%); }
.cat__all-k { background: var(--gold-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cat__all-t { color: var(--nat-ink); }
.cat--all svg { color: #5a3f0b; }

/* Perks: sage hairlines, cream icon discs. */
.perks { position: relative; isolation: isolate; border-block-color: rgb(176 176 152 / .55); }
.perk + .perk { border-left-color: rgb(176 176 152 / .55); }
.perk__icon { border-color: rgb(184 145 63 / .5); color: #6e5114; background: var(--mist); }
.perk h3 { color: var(--nat-ink); }

/* Footer: the hero's paper and sand instead of the black wall; the signature in black metal like the hero mark. */
.foot {
  border-color: rgb(184 145 63 / .5);
  color: var(--nat-ink);
  background: linear-gradient(165deg, #ece9e2 0%, #dfdcd4 45%, #d6ccbe 100%);
  box-shadow: 0 24px 50px -30px rgb(90 66 48 / .4);
  isolation: isolate;
}
.foot__claim p { background: var(--gold-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__col h2, .foot__up, .foot__social a { color: #5a3f0b; }
.foot__social a:hover { color: #2f251e; }
.foot__legal { border-top-color: rgb(74 58 47 / .22); }

/* One quiet shape per block, behind the content. */
.about { isolation: isolate; }
.about::before, .perks::before, .foot::before, .foot::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.about::before {
  right: 8%; top: 50%; translate: 0 -50%;
  width: 30vmin; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgb(184 145 63 / .3);
}
.about + .film + .about::before, .looks + .about::before {
  right: auto; left: -15vmin; top: 0; translate: 0 -20%; width: 22vmin;
  border: 0; background: radial-gradient(circle at 60% 35%, rgb(176 176 152 / .4), rgb(176 176 152 / .12) 70%);
}
.perks::before {
  left: 50%; top: -5px; width: 10px; aspect-ratio: 1; border-radius: 50%;
  background: #d0a189; opacity: .8; translate: -50% 0;
}
.foot::before {
  right: -16vmin; bottom: -16vmin; width: 40vmin; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgb(184 145 63 / .35);
}
.foot::after {
  left: -8vmin; top: -10vmin; width: 26vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 60% 60%, rgb(176 176 152 / .35), transparent 70%);
}

/* ---- emphasis gold on the light page ---- */
/* The gold words in the brand texts use the deep ramp on the ivory page, so they keep 4.5:1. */
.about__lead em:not(:has(.word)), .about__lead em .word { background: var(--gold-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- latest collections, minimal ---- */
/* "Cały sklep" lifts to a deeper sand on hover instead of the old graphite layer. */
.cat--all::before { background: linear-gradient(160deg, #f4e9dc 0%, var(--nat-sand) 55%, #e3d3c0 100%); }

/* Latest collections: five equal cards, the photo filling each one. On hover the photo leans in slowly
   and a gold hairline frame appears inside it; the link under it draws its line and arrow longer. */
.looks__row { height: clamp(500px, 80svh, 780px); }
.look, .look.is-active { flex: 1 1 0; }
.look__photo, .look.is-active .look__photo { filter: none; }
.look__photo {
  border: 1px solid rgb(184 145 63 / .3);
  box-shadow: 0 20px 40px -28px rgb(60 45 30 / .5);
  background: #e9e2d8;
}
.look__photo::before { display: none; }
.look__photo img {
  inset: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
  transition: transform 1.6s var(--ease);
}
.look__photo::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(254 244 234 / .9);
  border-radius: calc(var(--r) * .7);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.look a:hover .look__photo img, .look a:focus-visible .look__photo img { transform: scale(1.05); }
.look a:hover .look__photo::after, .look a:focus-visible .look__photo::after { opacity: 1; transform: none; }

.look__info { height: auto; min-height: 104px; gap: 4px; padding: 16px 2px 6px; align-content: start; }
.look__name { font-size: 13px; color: var(--nat-ink); }
.look__price, .look.is-active .look__price { color: #6e5114; }

.look__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0 0 6px;
  border-radius: 0;
  color: #5a3f0b;
  background: linear-gradient(currentColor, currentColor) 0 100% / 34px 1px no-repeat;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  transition: background-size .7s var(--ease), color .4s var(--ease);
}
.look__btn::after { content: "\2192"; font-size: 13px; letter-spacing: 0; transition: transform .7s var(--ease); }
.look a:hover .look__btn, .look a:focus-visible .look__btn { filter: none; transform: none; color: #2f251e; background-size: 100% 1px; }
.look a:hover .look__btn::after, .look a:focus-visible .look__btn::after { transform: translateX(6px); }

@media (max-width: 760px) {
  .looks__row { height: 560px; }
  .look, .look.is-active { flex: 0 0 74%; }
}

/* ---- preloader in the new look ---- */
/* Preloader in the site's tones: two halves of cream paper, the signature in black metal writing itself in,
   a gold hairline filling below it and the count in deep gold. */
.loader__half { background: linear-gradient(170deg, #f6f1ea 0%, #ece9e2 55%, #dfdcd4 100%); }
.loader__half--top { border-bottom-color: rgb(184 145 63 / .45); }
.loader__half--bottom { border-top-color: rgb(184 145 63 / .45); background: linear-gradient(10deg, #dacdbd 0%, #e6dfd5 45%, #ece9e2 100%); }
.loader__sign::after { background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .75) 50%, transparent 62%) no-repeat; background-size: 250% 100%; }
.loader__bar { background: rgb(110 81 20 / .15); }
.loader__count { color: #6e5114; }