/* ==========================================================================
   ALL WEAR STYLE: main stylesheet
   --------------------------------------------------------------------------
   Design read: preserve-the-brand redesign of a premium streetwear resale
   catalogue, dark editorial / European underground language, native CSS.
   Dials: DESIGN_VARIANCE 8 / MOTION_INTENSITY 6 / VISUAL_DENSITY 3.

   House rules (kept everywhere):
   - one dark theme, warm-neutral monochrome, no accent colour
   - all-sharp corners (radius 0), hairlines only where they organise content
   - one eyebrow on the page (hero); sections are named by their headline
   - mono type is reserved for numerals and the hero annotations
   - motion only where it explains something; all of it honours reduced motion
   --------------------------------------------------------------------------
   01 Tokens       05 Hero         09 CTA          13 Motion
   02 Base         06 Collection   10 Footer       14 Responsive
   03 Shared       07 About        11 Modal        15 Reduced motion
   04 Navigation   08 Brands       12 Toast        16 Shop (rating, guide, delivery)
   ========================================================================== */

/* 01 TOKENS --------------------------------------------------------------- */
:root {
  --bg: #0b0b0a;
  --bg-rgb: 11 11 10;
  --bg-2: #10100f;           /* about section */
  --bg-3: #171715;           /* panels, image wells */
  --ink: #ecebe6;
  --ink-2: #bebdb6;
  --mute: #8f8e88;           /* lowest text tone: 5.9:1 on --bg (WCAG AA) */
  --line: rgb(236 235 230 / .12);
  --line-2: rgb(236 235 230 / .38);   /* control borders: 3:1 against --bg (WCAG 1.4.11) */

  --f-display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --f-text: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --max: 1600px;
  --gutter: clamp(20px, 4vw, 56px);
  --pad-x: max(var(--gutter), calc((100% - var(--max)) / 2));
  --nav-h: 72px;
  --section-y: clamp(64px, 7vw, 112px);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --t-fast: .18s;
  --t: .45s;

  /* global layer scale (components only use small local stacking orders) */
  --z-menu: 90;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 260;
  --z-grain: 300;
  --z-skip: 400;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--bg);
  scrollbar-color: #2b2b28 var(--bg);
  scrollbar-width: thin;
  -webkit-tap-highlight-color: transparent;   /* every control has its own :active / :focus-visible state */
}
a, button, input, select, label { touch-action: manipulation; }
html.is-locked { overflow: hidden; padding-right: var(--sbw, 0px); }
html.is-locked .nav { right: var(--sbw, 0px); }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Film grain from the campaign photo: one fixed, static, non-interactive layer */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2b2b28; }

/* 03 SHARED --------------------------------------------------------------- */
[hidden] { display: none !important; }   /* component display rules must never un-hide */
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.icon { width: 1em; height: 1em; flex: none; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-skip);
  padding: 12px 16px;
  background: var(--ink); color: var(--bg);
  font: 600 12px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

.display {
  font-family: var(--f-display);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
/* Masked lines for headline reveals; the padding keeps Д/Щ/Ц descenders visible */
.line { display: block; overflow: hidden; padding: .03em 0 .07em; margin-bottom: -.07em; }
.line > span { display: block; }
.display em, .hero__title em { font-style: normal; color: var(--mute); }

/* Typesetting details */
.card__name, .principle h3, .modal__title, .empty__art { width: clamp(150px, 16vw, 240px); height: auto; margin-bottom: 6px; }
.empty__title { text-wrap: balance; }
.collection__lead, .about__body, .principle p, .modal__desc, .cta__note { text-wrap: pretty; }
.card__no, .card__price, .modal__price, .filter__count, .results, .collection__count, .stat dd { font-variant-numeric: tabular-nums; }

/* Buttons: one shape (sharp), two weights (outline / solid), one XL size for the hero */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  color: var(--ink);
  font: 600 12.5px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: -1px;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-io);
}
.btn .icon { font-size: 20px; transition: transform var(--t) var(--ease); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { color: var(--bg); border-color: var(--ink); }
.btn:focus-visible::before { transform: scaleY(1); }

.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--solid::before { background: var(--bg); }
.btn--solid:focus-visible { color: var(--ink); }

.btn--xl {
  min-height: 72px;
  width: min(100%, 440px);
  padding: 0 26px 0 30px;
  border-color: rgb(236 235 230 / .5);
  font: 800 clamp(19px, 1.45vw, 23px)/1 var(--f-display);
  letter-spacing: .08em;
}
.btn--xl .icon { font-size: 28px; }
.btn--block { width: 100%; }

@media (hover: hover) {
  .btn:hover { color: var(--bg); border-color: var(--ink); }
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover .icon { transform: translateX(5px); }
  .btn:hover .icon--diag { transform: translate(3px, -3px); }
  .btn--solid:hover { color: var(--ink); }
}

/* Status (availability): text only, no decorative dot */
.status {
  font: 600 11px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.status.is-off { color: var(--mute); }

/* 04 NAVIGATION ----------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-scrolled,
.is-menu-open .nav {
  background: rgb(var(--bg-rgb) / .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.nav__inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding-inline: var(--pad-x);
}

.logo { justify-self: start; display: flex; align-items: center; gap: 14px; }
.logo__mark {
  width: 52px; height: 52px;
  flex: none;
  transition: transform .7s var(--ease);
}
.logo__text { display: flex; flex-direction: column; gap: 6px; }
.logo__text strong { font: 900 21px/.9 var(--f-display); letter-spacing: .06em; white-space: nowrap; }
.logo__text small { font: 600 10px/1 var(--f-text); letter-spacing: .3em; color: var(--mute); white-space: nowrap; }
@media (hover: hover) {
  .logo:hover .logo__mark { transform: rotate(-10deg); }
}

.nav__links { display: flex; gap: clamp(28px, 3.2vw, 52px); }
.nav__links a {
  position: relative;
  padding: 10px 0;
  color: var(--ink-2);
  font: 600 12px/1 var(--f-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--t) var(--ease);
}
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) {
  .nav__links a:hover { color: var(--ink); }
  .nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}

.nav__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.btn-board {
  position: relative;
  display: inline-flex; align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--line-2);
  font: 600 12px/1 var(--f-text);
  letter-spacing: .22em;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-board::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform .5s var(--ease-io);
}
.btn-board:active { transform: scale(.97); }
.btn-board:focus-visible { color: var(--bg); }
.btn-board:focus-visible::before { transform: none; }
@media (hover: hover) {
  .btn-board:hover { color: var(--bg); border-color: var(--ink); }
  .btn-board:hover::before { transform: none; }
}

.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
}
.burger span {
  position: absolute; left: 12px; right: 12px;
  height: 1px;
  background: var(--ink);
  transition: transform .5s var(--ease-io), top .5s var(--ease-io);
}
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.is-menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.is-menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* Mobile menu */
.menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: calc(var(--nav-h) + 24px) var(--pad-x) calc(28px + env(safe-area-inset-bottom));
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-io), visibility 0s linear .7s;
}
.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s var(--ease-io), visibility 0s;
}
.menu__links { display: flex; flex-direction: column; }
.menu__links a { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.menu__word { display: block; overflow: hidden; padding-bottom: .04em; }
.menu__word > span {
  display: block;
  font: 900 clamp(56px, 16vw, 112px)/.88 var(--f-display);
  text-transform: uppercase;
  transform: translateY(105%);
  transition: transform .75s var(--ease);
}
.menu.is-open .menu__word > span { transform: none; }
.menu.is-open a:nth-child(1) .menu__word > span { transition-delay: .2s; }
.menu.is-open a:nth-child(2) .menu__word > span { transition-delay: .26s; }
.menu.is-open a:nth-child(3) .menu__word > span { transition-delay: .32s; }
.menu.is-open a:nth-child(4) .menu__word > span { transition-delay: .38s; }
.menu__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: .45s; }
.menu__meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font: 400 14px/1.4 var(--f-text);
  color: var(--mute);
}
.menu__meta a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); }

/* 05 HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  min-height: max(700px, 100svh);
  padding: calc(var(--nav-h) + clamp(28px, 5vh, 64px)) var(--pad-x) clamp(48px, 8vh, 96px);
  overflow: clip;
  isolation: isolate;
}

/* a page-coloured strip over the photo's left edge, which can land on a half pixel */
.hero::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: calc(42% - 1px);
  z-index: 0;
  width: 3px;
  background: var(--bg);
  pointer-events: none;
}
.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.12) brightness(.8);
}
/* The photograph dissolves into the page on every side */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 3px 0 0 var(--bg);   /* hides the sub-pixel seam on the left edge */
  background:
    linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / .86) 12%, rgb(var(--bg-rgb) / .3) 36%, rgb(var(--bg-rgb) / 0) 58%),
    linear-gradient(270deg, rgb(var(--bg-rgb) / .88) 0%, rgb(var(--bg-rgb) / .3) 14%, rgb(var(--bg-rgb) / 0) 30%),
    linear-gradient(0deg, var(--bg) 0%, rgb(var(--bg-rgb) / .6) 14%, rgb(var(--bg-rgb) / 0) 38%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / .9) 0%, rgb(var(--bg-rgb) / 0) 22%);
}

.hero__content {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* The page's single eyebrow */
.hero__eyebrow {
  font: 600 12px/1 var(--f-text);
  letter-spacing: .3em;
  color: var(--ink-2);
}
.hero__title {
  margin-top: auto;
  padding-top: 48px;
  font: 900 clamp(84px, 13vw, 248px)/.8 var(--f-display);
  letter-spacing: -.012em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__title .line { padding-bottom: .05em; }
.hero__title .line:nth-child(2) { margin-left: -.035em; }

.hero__sub {
  display: flex; flex-wrap: wrap; row-gap: 10px;
  margin-top: clamp(24px, 3.6vh, 40px);
  font: 600 12px/1.3 var(--f-text);
  letter-spacing: .16em;
  color: var(--ink-2);
}
.hero__sub li { padding-inline: 16px; border-left: 1px solid var(--line-2); }
.hero__sub li:first-child { padding-left: 0; border-left: 0; }
.hero__cta { margin-top: clamp(28px, 4.6vh, 52px); }

/* Editorial annotations requested in the brief */
.anno {
  position: absolute; z-index: 1;
  display: flex; flex-direction: column;
  font: 400 11px/1.95 var(--f-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
}
.anno--top { top: calc(var(--nav-h) + clamp(28px, 5vh, 64px)); right: var(--pad-x); align-items: flex-end; text-align: right; }
.anno--top span:first-child { color: var(--ink); }
.anno--stack { top: 34%; left: 48%; }
.anno__gap { position: relative; height: 1.4em; }
.anno__gap::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 1px; background: var(--line-2); }
.anno--geo {
  right: var(--pad-x);
  bottom: clamp(48px, 8vh, 96px);
  align-items: flex-end;
  letter-spacing: .62em;
  margin-right: -.62em;
  color: var(--ink);
}

/* 06 COLLECTION ----------------------------------------------------------- */
.collection { padding: var(--section-y) var(--pad-x); }

.collection__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(24px, 4vw, 72px);
}
.collection__title {
  display: flex; align-items: flex-start;
  font-size: clamp(72px, 13vw, 236px);
}
.collection__title .line { flex: none; }
.collection__count {
  margin: .35em 0 0 .4em;
  font: 400 clamp(13px, 1vw, 16px)/1 var(--f-mono);
  letter-spacing: 0;
  color: var(--mute);
}
.collection__count::before { content: "("; }
.collection__count::after { content: ")"; }
.collection__lead {
  max-width: 46ch;
  margin-top: clamp(24px, 2.6vw, 40px);
  font: 300 clamp(18px, 1.45vw, 22px)/1.5 var(--f-text);
  color: var(--ink-2);
}
.seal { width: clamp(112px, 13vw, 210px); margin-top: .5vw; }
.seal img { width: 100%; height: auto; }

/* Toolbar: filters + labelled fields */
.toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px;
  margin-top: clamp(64px, 8vw, 120px);
  border-bottom: 1px solid var(--line);
}
.filters {
  display: flex; gap: clamp(10px, calc(2.6vw - 12px), 28px);
  min-width: 0;
  margin-inline: -6px;   /* buttons carry 6px side padding so the focus ring is never clipped */
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  position: relative;
  flex: none;
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 20px 6px;
  color: var(--mute);
  font: 600 12px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.filter__count { font: 400 11px/1 var(--f-mono); letter-spacing: 0; }
.filter:focus-visible { outline-offset: -2px; }
.filter::after {
  content: "";
  position: absolute; left: 6px; right: 6px; bottom: -1px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--t) var(--ease);
}
.filter[aria-pressed="true"] { color: var(--ink); }
.filter[aria-pressed="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) { .filter:hover { color: var(--ink); } }

.toolbar__tools { display: flex; gap: 16px; padding-bottom: 16px; flex: none; }
.field { display: grid; gap: 8px; }
.field__label {
  font: 600 11px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.field__control { position: relative; display: flex; align-items: center; }
.field input,
.field select {
  width: 100%; height: 44px;
  padding: 0 42px 0 14px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  font: 400 14px/1 var(--f-text);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--t) var(--ease);
}
.field select { cursor: pointer; background-color: var(--bg); }
.field option { background: var(--bg); color: var(--ink); }
.field input::placeholder { color: var(--mute); opacity: 1; }
.field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.field .icon { position: absolute; right: 14px; font-size: 17px; color: var(--mute); pointer-events: none; }
.field--search { width: clamp(220px, 18vw, 290px); }
.field--sort { width: clamp(190px, 14vw, 220px); }

.results {
  padding: 18px 0 22px;
  font: 400 12px/1 var(--f-mono);
  color: var(--mute);
}
.results b { font-weight: 400; color: var(--ink); }

/* Catalogue grid: hairlines between pieces, no rounded cards */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.card::after {
  content: "";
  position: absolute; inset: -1px;
  z-index: 3;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--t) var(--ease);
}
.card__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
}
.card__no { font: 400 12px/1 var(--f-mono); color: var(--ink); }

/* Product photos: one square frame for every card, the photo always whole (contain), never cropped or
   stretched. Square because the shop's product photos are square posts with a designed frame (logo, label
   at the edge); any other shape is centred on the dark card background. */
.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-3);
}
/* Loading skeleton: a slow light sweep until the photo arrives */
.card__media::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(236 235 230 / .05) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 1.8s linear infinite;   /* transform only: no repaint per frame */
}
.card__media:has(img.is-loaded)::before,
.card__media.is-missing::before { animation: none; background: none; }
@keyframes shimmer { to { transform: translateX(100%); } }

.card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .5s var(--ease);
}
.card__media img.is-loaded { opacity: 1; }
/* a photo turned in the admin: shown whole, turned, scaled by the script to fit (see fitRotation) */
.card__media img.is-rotated, .modal__media img.is-rotated { object-fit: contain; rotate: var(--rot); }
.card.is-sold .card__media img { filter: brightness(.5); }   /* product photos stay in colour; sold ones are only dimmed */

/* Typographic fallback when a photo is missing */
.card__media.is-missing::after,
.modal__media.is-missing::after {
  content: attr(data-brand);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  font: 900 clamp(40px, 5vw, 72px)/.9 var(--f-display);
  text-align: center;
  text-transform: uppercase;
  color: var(--bg-3);
  -webkit-text-stroke: 2px var(--line-2);
  paint-order: stroke fill;
}
.card__media.is-missing img, .modal__media.is-missing img { display: none; }

.card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 18px 18px; }
.card__name {
  font: 800 clamp(23px, 1.85vw, 30px)/.92 var(--f-display);
  letter-spacing: .005em;
  text-transform: uppercase;
  transition: transform var(--t) var(--ease);
}
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible)::after { border-color: var(--ink); }
.card__tag {
  margin-top: 10px;
  font: 500 13px/1.4 var(--f-text);
  color: var(--mute);
  transition: transform var(--t) var(--ease) .03s;
}
.card__foot {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: auto;
  padding-top: 24px;
}
.card__price { font: 800 clamp(25px, 2vw, 32px)/1 var(--f-display); letter-spacing: .01em; }
.card.is-sold .card__price, .card.is-sold .card__name { color: var(--mute); }
.card__size { font: 500 12.5px/1 var(--f-text); color: var(--mute); white-space: nowrap; }
.card__arrow {
  margin-left: auto;
  align-self: center;
  font-size: 24px;
  color: var(--ink-2);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}

@media (hover: hover) {
  .card:hover::after { border-color: rgb(236 235 230 / .45); }
  .card.is-sold:hover .card__media img { filter: brightness(.62); }
  .card:hover .card__name, .card:hover .card__tag { transform: translateX(4px); }
  .card:hover .card__arrow { transform: translateX(6px); color: var(--ink); }
}

/* Empty state */
.empty {
  display: grid; justify-items: start; gap: 18px;
  padding: clamp(56px, 8vw, 112px) 0;
  border-top: 1px solid var(--line);
}
.empty[hidden] { display: none; }
.empty__title { font: 900 clamp(56px, 8vw, 128px)/.84 var(--f-display); text-transform: uppercase; color: var(--ink-2); }
.empty__text { color: var(--mute); }

/* 02b FILM: the short video on its own, right after the first screen -----
   One vertical frame with room around it; it carries its album-cover label. */
.film {
  display: grid;
  grid-template-columns: auto minmax(0, 36rem);
  justify-content: center;
  align-items: center;
  gap: 40px clamp(48px, 8vw, 144px);
  padding: clamp(56px, 6vw, 96px) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.film__frame {
  position: relative; margin: 0; overflow: hidden; background: var(--bg-3);
  width: min(380px, calc(78svh * 9 / 16)); aspect-ratio: 9 / 16;
}
.film__text { display: grid; justify-items: start; }
.film__eyebrow { font: 600 12px/1 var(--f-text); letter-spacing: .3em; color: var(--ink-2); }
.film__title { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(60px, 7vw, 120px); }
.film__sub {
  justify-self: stretch;
  margin-top: clamp(28px, 3vw, 44px); padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 300 clamp(21px, 1.8vw, 28px)/1.3 var(--f-text);
}
.film__body { max-width: 44ch; margin-top: 14px; font: 300 clamp(16px, 1.15vw, 18px)/1.6 var(--f-text); color: var(--ink-2); text-wrap: pretty; }
.film__cta { margin-top: clamp(28px, 3vw, 40px); }
.film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.9) contrast(1.05); }
.film__label {
  position: absolute; left: clamp(10px, 1.2vw, 16px); bottom: clamp(10px, 1.2vw, 16px);
  width: clamp(58px, 26%, 100px); height: auto;
  pointer-events: none;
}
.film__toggle {
  position: absolute; right: clamp(8px, 1vw, 14px); bottom: clamp(8px, 1vw, 14px);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--ink);
  background: rgb(11 11 10 / .55);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.film__toggle .icon { width: 18px; height: 18px; }
.film__toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .film__toggle:hover { background: rgb(11 11 10 / .8); border-color: var(--ink); } }

/* CENSORED, laid across a photo (white shape with alpha) */
.stamp {
  position: absolute; left: 50%; top: 24%;
  width: 82%; height: auto;
  translate: -50% -50%; rotate: -7deg;
  opacity: .9;
  pointer-events: none;
}

/* 07 ABOUT ---------------------------------------------------------------- */
.about { padding: var(--section-y) var(--pad-x); background: var(--bg-2); }

.about__title {
  display: flex; flex-wrap: nowrap; gap: 0 .2em;
  font-size: clamp(84px, 16.2vw, 274px);   /* 274px fills the 1600px content width */
  line-height: .8;
  white-space: nowrap;
}
.about__title .line { flex: none; }
/* Outline type: the stroke is painted under a fill of the section colour,
   which hides the overlapping contours inside variable-font glyphs */
.line--outline > span { color: var(--bg-2); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* The brand statement lives inside the ouroboros: the cycle of a second life */
.manifesto {
  display: grid;
  width: min(100%, 680px);
  margin: clamp(48px, 6vw, 96px) auto 0;
}
.manifesto > * { grid-area: 1 / 1; }
.manifesto img { width: 100%; height: auto; }
.manifesto__text {
  align-self: start;
  justify-self: center;
  width: 56%;
  margin-top: 34%;
  text-align: center;
  font: 300 clamp(17px, 1.8vw, 28px)/1.2 var(--f-text);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.manifesto__text strong { font-weight: 700; }

.about__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px clamp(40px, 8vw, 160px);
  margin-top: clamp(48px, 6vw, 96px);
}
.about__foot .about__photo { justify-self: end; }
/* left column: the statement, then the portrait that points back at the reader */
.about__lead { display: grid; gap: clamp(28px, 4vw, 56px); justify-items: start; }
.about__photo { margin: 0; width: min(100%, 400px); aspect-ratio: 736 / 1041; overflow: hidden; background: var(--bg-3); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }   /* a poster: shown whole and in its own colours */
/* both columns hang from the same hairline */
.about__body {
  max-width: 34ch;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 300 clamp(20px, 1.7vw, 28px)/1.35 var(--f-text);
  color: var(--ink-2);
}
.stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 24px;
  padding: 18px 0 16px;
  border-top: 1px solid var(--line);
}
.stat dd { order: -1; font: 900 clamp(52px, 5.2vw, 96px)/.85 var(--f-display); text-transform: uppercase; }
.stat dd sup { font-size: .42em; vertical-align: top; margin-left: .04em; color: var(--mute); }
.stat dt {
  justify-self: end;
  text-align: right;
  font: 600 12px/1.4 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Principles: an asymmetric trio (one tall plate, two stacked) */
.principles {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(56px, 7vw, 112px);
}
.principle {
  display: grid;
  background: var(--bg-3);
  overflow: hidden;
}
.principle--lead { grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto; }
.principle:not(.principle--lead) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.principle--flip .principle__img { order: 2; }
.principle__img {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  padding: clamp(24px, 3vw, 48px);
}
.principle--lead .principle__img { aspect-ratio: auto; padding: clamp(40px, 5vw, 88px) clamp(40px, 5vw, 88px) 0; }
.principle__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .9s var(--ease); }
.principle--lead .principle__img img { max-height: min(60vh, 560px); }   /* the tall plate no longer sets the height of the whole block */
.principle__text { padding: clamp(24px, 2.6vw, 44px); }
.principle h3 { font: 900 clamp(36px, 3.6vw, 64px)/.86 var(--f-display); text-transform: uppercase; }
.principle p { max-width: 30ch; margin-top: 14px; font: 400 15.5px/1.6 var(--f-text); color: var(--ink-2); }
@media (hover: hover) { .principle:hover .principle__img img { transform: scale(1.035); } }

/* 08 BRANDS --------------------------------------------------------------- */
.brands {
  padding-block: clamp(24px, 3vw, 44px);
  border-block: 1px solid var(--line);
  overflow: clip;
}
/* The strip moves with the reader's scroll instead of looping on its own
   (no autoplay, so nothing to pause: WCAG 2.2.2) */
.marquee { overflow: hidden; view-timeline-name: --brands; }
/* Default: a still, centred typographic wall (also the reduced-motion view) */
.marquee__track { display: flex; }
.marquee__group { display: flex; flex: 1; flex-wrap: wrap; justify-content: center; align-items: center; }
.marquee__group[aria-hidden] { display: none; }
.marquee__group li {
  padding-inline: .32em;
  font: 900 clamp(44px, 6.4vw, 116px)/.9 var(--f-display);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__group li.is-outline { color: var(--bg); -webkit-text-stroke: 2.4px var(--ink-2); paint-order: stroke fill; }
/* Enhancement: one continuous strip that drifts with the reader's scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .marquee__track { width: max-content; animation: brands-drift linear both; animation-timeline: --brands; animation-range: cover 0% cover 100%; }
    .marquee__group { flex: none; flex-wrap: nowrap; }
    .marquee__group[aria-hidden] { display: flex; }
  }
}
@keyframes brands-drift { from { transform: translateX(0); } to { transform: translateX(-26%); } }

/* 09 CTA ------------------------------------------------------------------ */
.cta {
  position: relative;
  padding: var(--section-y) var(--pad-x) 0;
  overflow: clip;
}
.cta__title { font-size: clamp(52px, 8.4vw, 164px); }
.cta__title .line > span { white-space: nowrap; }
.cta__title .line:nth-child(2) { margin-left: 1.05em; }

/* Three faces sit in the space beside the headline's second line */
.cta__faces {
  position: absolute;
  top: calc(var(--section-y) + clamp(52px, 8.4vw, 164px) * .86);
  right: var(--pad-x);
  width: clamp(190px, 18vw, 320px);
  margin: 0;
}
.cta__faces img { width: 100%; height: auto; }

.cta__row {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 40px 48px;
  margin-top: clamp(56px, 6.4vw, 96px);
}
.cta__label {
  font: 600 12px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.cta__handle { margin-top: 14px; font: 800 clamp(36px, 4vw, 66px)/1 var(--f-display); letter-spacing: .03em; }
.cta__note { margin-top: 14px; color: var(--mute); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__actions .btn { min-width: 250px; }

/* The crocodile lies along the bottom edge: its crop line is the ground line */
.cta__band {
  margin: clamp(40px, 5vw, 80px) calc(50% - 50vw) 0;   /* full bleed at any width; the section clips the overflow */
}
.cta__band img {
  width: min(100%, 1680px); height: auto;
  margin-left: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
}

/* 10 FOOTER --------------------------------------------------------------- */
.footer {
  padding: clamp(48px, 5vw, 80px) var(--pad-x) 0;
  border-top: 1px solid var(--line);
  overflow: clip;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer__brand { display: flex; flex-direction: column; gap: 10px; }
.footer__mark { width: 72px; height: 72px; margin-bottom: 8px; }
.footer__brand strong { font: 900 30px/1 var(--f-display); letter-spacing: .06em; }
.footer__brand span { font: 400 12px/1 var(--f-mono); color: var(--mute); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.footer__heading {
  margin-bottom: 10px;
  font: 600 11px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.footer__col a {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 32px;   /* touch target */
  color: var(--ink-2);
  font: 400 15px/1.3 var(--f-text);
  transition: color var(--t) var(--ease);
}
.footer__col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--t) var(--ease);
}
.footer__col--end { align-items: flex-end; }
.footer__top .icon { font-size: 18px; transition: transform var(--t) var(--ease); }
@media (hover: hover) {
  .footer__col a:hover { color: var(--ink); }
  .footer__col a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .footer__top:hover .icon { transform: translateY(-3px); }
}

.footer__word {
  margin-top: clamp(40px, 5vw, 80px);
  font: 900 calc(min(100vw - 2 * var(--gutter), var(--max)) / 5.62)/.76 var(--f-display);
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  color: var(--bg);
  -webkit-text-stroke: 2px rgb(236 235 230 / .2);
  paint-order: stroke fill;
  user-select: none;
}
.footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font: 400 12.5px/1.6 var(--f-text);
  color: var(--mute);
}

/* 11 MODAL ---------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: clamp(16px, 3vw, 48px);
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgb(4 4 4 / .84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.modal__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  width: min(1200px, 100%);
  height: min(800px, calc(100dvh - 2 * clamp(16px, 3vw, 48px)));
  background: var(--bg);
  border: 1px solid var(--line-2);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.modal__dialog:focus { outline: none; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }

/* The photo has its own row: "Цял размер" sits in a bar above it and the thumbnails in a strip below it,
   so nothing covers the photo, its logo or the label at its edge */
.modal__media { position: relative; overflow: hidden; background: var(--bg-3); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.modal__media img {
  grid-row: 2;
  width: 100%; height: 100%; min-height: 0;
  object-fit: contain;   /* the whole photo, whatever the window's shape */
  transition: opacity .4s var(--ease);
}
.modal__media.is-sold img { filter: brightness(.7); }

.modal__close {
  position: absolute; top: 0; right: 0; z-index: 5;
  display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 20px;
  background: var(--bg);
  border-left: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  font: 600 12px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.modal__close .icon { font-size: 18px; transition: transform var(--t) var(--ease); }
.modal__close:active { transform: scale(.97); }
@media (hover: hover) {
  .modal__close:hover { background: var(--ink); color: var(--bg); }
  .modal__close:hover .icon { transform: rotate(90deg); }
}

.modal__info {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: clamp(72px, 6.4vw, 92px) clamp(24px, 3.6vw, 56px) clamp(24px, 2.6vw, 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__meta {
  display: flex; justify-content: space-between; gap: 16px;
  font: 600 12px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.modal__no { font: 600 12px/1 var(--f-text); letter-spacing: .08em; color: var(--ink); font-variant-numeric: tabular-nums; }
.modal__title {
  margin-top: 18px;
  font: 900 clamp(44px, 4.4vw, 78px)/.86 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.modal__tag { margin-top: 12px; font: 500 14px/1.4 var(--f-text); color: var(--mute); }
.modal__price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: clamp(26px, 3vw, 40px);
}
.modal__price { font: 900 clamp(42px, 3.8vw, 64px)/1 var(--f-display); }
.modal__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.modal__specs > div { padding-top: 18px; }
.modal__specs > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.modal__specs dt {
  font: 600 11px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.modal__specs dd { margin-top: 12px; font: 800 clamp(30px, 2.6vw, 42px)/1 var(--f-display); text-transform: uppercase; }
.modal__specs dd small { display: block; margin-top: 8px; font: 400 14px/1.3 var(--f-text); text-transform: none; color: var(--mute); }
.modal__desc { max-width: 46ch; margin-top: 28px; font: 400 15.5px/1.65 var(--f-text); color: var(--ink-2); }
.modal__actions { margin-top: auto; padding-top: 32px; }
.modal__actions .btn { min-height: 64px; font: 800 19px/1 var(--f-display); letter-spacing: .1em; }
.modal__hint { margin-top: 12px; font: 400 13px/1.5 var(--f-text); color: var(--mute); }
.modal__pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.modal__pager button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  color: var(--mute);
  font: 600 12px/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease);
}
.modal__pager .icon { font-size: 18px; transition: transform var(--t) var(--ease); }
@media (hover: hover) {
  .modal__pager button:hover { color: var(--ink); }
  .modal__pager [data-prev]:hover .icon { transform: translateX(-4px); }
  .modal__pager [data-next]:hover .icon { transform: translateX(4px); }
}
/* swap fade when paging between pieces */
.modal__info > * { transition: opacity .3s var(--ease); }
.modal__info.is-swapping > *, .modal__media.is-swapping img { opacity: 0; transition: opacity .18s; }

/* 12 TOAST ---------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  max-width: calc(100vw - 32px);
  padding: 16px 20px;
  background: var(--ink); color: var(--bg);
  font: 600 13px/1.45 var(--f-text);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 13 MOTION --------------------------------------------------------------- */
/* Scroll reveals (IntersectionObserver adds .is-in) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .display .line > span { transform: translate3d(0, 110%, 0); transition: transform 1.05s var(--ease); }
.js .display .line:nth-child(2) > span { transition-delay: .09s; }
.js .display .line:nth-child(3) > span { transition-delay: .18s; }
.js .display.is-in .line > span { transform: none; }
.js .collection__count { opacity: 0; transition: opacity .8s var(--ease) .35s; }
.js .collection__title.is-in .collection__count { opacity: 1; }

/* first paint of the grid waits until the section scrolls in */
.js .grid:not(.is-in) .card { opacity: 0; }
.grid.is-in .card { animation: card-in .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes card-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } }

/* Hero intro, once the display font is in (body.is-ready) */
.js .nav { opacity: 0; transition: opacity .8s var(--ease) .1s, background-color .5s var(--ease), border-color .5s var(--ease); }
.js .hero__media { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s var(--ease-io) .05s; }
.js .hero__media img { scale: 1.14; transition: scale 2.2s var(--ease) .05s; }
.js .hero [data-intro] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .9s var(--ease), transform 1s var(--ease); }
/* 150%: the whole text box (ascender space included) waits below the mask, so the font swap is not a layout shift */
.js .hero__title .line > span { transform: translate3d(0, 150%, 0); transition: transform 1.15s var(--ease); }

.is-ready .nav { opacity: 1; }
.is-ready .hero__media { clip-path: inset(0 0 0 0); }
.is-ready .hero__media img { scale: 1; }
.is-ready .hero [data-intro] { opacity: 1; transform: none; }
.is-ready .hero__title .line:nth-child(1) > span { transform: none; transition-delay: .35s; }
.is-ready .hero__title .line:nth-child(2) > span { transform: none; transition-delay: .47s; }
.is-ready .hero [data-intro="1"] { transition-delay: .25s; }
.is-ready .hero [data-intro="3"] { transition-delay: .75s; }
.is-ready .hero [data-intro="4"] { transition-delay: .85s; }
.is-ready .hero [data-intro="5"] { transition-delay: 1s; }
.is-ready .hero [data-intro="6"] { transition-delay: 1.1s; }

/* Scroll-driven details (no scroll listeners). Browsers without
   scroll timelines simply show the still composition. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* time: the memento seal turns while the collection passes */
    .seal img { animation: seal-turn linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* story: the crocodile creeps into place under the final call */
    .cta__band { animation: creep linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
@keyframes seal-turn { from { rotate: -40deg; } to { rotate: 40deg; } }
@keyframes creep { from { translate: -9% 0; } to { translate: 0 0; } }

/* 14 RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1279px) {
  .anno--stack { left: 46%; top: 32%; }
}

@media (max-width: 1180px) {
  .toolbar { flex-direction: column; align-items: stretch; gap: 0; border-bottom: 0; }
  .filters { border-bottom: 1px solid var(--line); }
  .toolbar__tools { padding: 20px 0 0; }
  .field--search { flex: 1; width: auto; max-width: 420px; }
  .results { padding-top: 24px; }
}

@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .footer__col--end { align-items: flex-start; }
  /* tablet: the lead plate runs full width (image | text), the other two sit side by side */
  .principles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .principle--lead { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; }
  .principle--lead .principle__img { aspect-ratio: 1 / 1; padding: clamp(32px, 5vw, 56px); }
  .principle:not(.principle--lead) { grid-template-columns: 1fr; align-items: start; }
  .principle--flip .principle__img { order: 0; }
  .principle:not(.principle--lead) .principle__img { aspect-ratio: 4 / 3; }
}

/* Navigation collapses to the hamburger */
@media (max-width: 899px) {
  :root { --nav-h: 64px; }
  .nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav__links { display: none; }
  .burger { display: block; }
  .btn-board { height: 44px; padding: 0 18px; }

  /* Hero: photo on top, the headline overlaps its fade */
  .hero {
    min-height: auto;
    padding-top: calc(min(70svh, 760px) - clamp(150px, 26vw, 230px));
    padding-bottom: 56px;
  }
  .hero::before { display: none; }
  .hero__media { inset: 0 0 auto 0; width: 100%; height: min(70svh, 760px); }
  .hero__media img { object-position: 50% 18%; }
  .hero__media::after {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgb(var(--bg-rgb) / .82) 18%, rgb(var(--bg-rgb) / .2) 46%, rgb(var(--bg-rgb) / 0) 62%),
      linear-gradient(180deg, rgb(var(--bg-rgb) / .9) 0%, rgb(var(--bg-rgb) / 0) 26%),
      linear-gradient(90deg, rgb(var(--bg-rgb) / .5) 0%, rgb(var(--bg-rgb) / 0) 30%, rgb(var(--bg-rgb) / 0) 70%, rgb(var(--bg-rgb) / .5) 100%);
  }
  .hero__title { padding-top: 20px; font-size: clamp(64px, 20.4vw, 170px); }
  .anno--top { top: calc(var(--nav-h) + 24px); }
  .anno--stack { top: calc(var(--nav-h) + 24px); left: var(--pad-x); }
  .anno--geo { display: none; }

  .collection__title { font-size: clamp(64px, 17vw, 150px); }

  .about__title { flex-direction: column; font-size: clamp(84px, 30vw, 260px); line-height: .82; }
  .about__title .line:nth-child(2) { margin-left: .42em; }   /* diagonal stagger */
  .about__title .line:nth-child(3) { align-self: flex-end; }
  .about__foot { grid-template-columns: 1fr; }

  .cta__title { font-size: clamp(56px, 14.4vw, 132px); }
  .cta__title .line > span { white-space: normal; }
  .cta__title .line:nth-child(2) { margin-left: 0; }
  .cta__faces { position: static; width: min(46vw, 240px); margin: 40px 0 -16px auto; }
  .cta__band img { width: 150%; max-width: none; margin-left: -50%; }

  .modal { padding: 0; }
  .modal__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%; height: 100dvh;
    border: 0;
  }
  .modal__close { top: 12px; right: 12px; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); background: rgb(var(--bg-rgb) / .8); }
  .modal__media img { height: min(calc(100vw - 24px), 40svh); }   /* a square photo at full width, still leaving room for the text */
  .modal__info { padding: 26px var(--gutter) 0; scroll-padding-bottom: 110px; }   /* focused items clear the sticky bar */
  .modal__title { margin-top: 14px; font-size: clamp(40px, 11vw, 64px); }
  /* the inquiry bar sticks to the bottom; DOM order (actions, then pager) matches the visual order */
  .modal__actions {
    position: sticky; bottom: 0; z-index: 2;
    margin: 20px calc(var(--gutter) * -1) 0;
    padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0), var(--bg) 24%);
  }
  .modal__pager { margin-top: 4px; padding-bottom: 16px; }
  .modal__pager button { min-width: 44px; justify-content: center; }
  .modal__hint { display: none; }
}

@media (max-width: 767px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__top { padding: 14px 14px; }
  .card__body { padding: 18px 14px 14px; }
  .cta__actions .btn { flex: 1 1 240px; min-width: 0; }
  .principles { grid-template-columns: 1fr; }
  .principle:not(.principle--lead) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
  .principle.principle--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .principle--flip .principle__img { order: 2; }
  .principle:not(.principle--lead) .principle__img { aspect-ratio: 1 / 1; }
}

/* Phones */
@media (max-width: 559px) {
  :root { --section-y: 64px; }
  .btn-board { display: none; }
  .logo { gap: 12px; }
  .logo__text strong { font-size: 19px; }

  .hero { padding-bottom: 44px; }
  .hero__title { font-size: min(20.2vw, 104px); }
  .hero__sub { flex-direction: column; row-gap: 8px; padding-left: 14px; border-left: 1px solid var(--line-2); }
  .hero__sub li, .hero__sub li:first-child { padding: 0; border: 0; }
  .hero__cta { width: 100%; }
  .btn--xl { min-height: 66px; padding: 0 22px; font-size: 19px; }
  .anno { font-size: 10px; letter-spacing: .26em; line-height: 1.9; }
  .anno--stack { display: none; }   /* at phone crops it would sit on the first face */

  .collection__head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "lead seal"; column-gap: 20px; }
  .collection__intro { display: contents; }
  .collection__title { grid-area: title; font-size: min(21vw, 110px); }
  .collection__lead { grid-area: lead; }
  .seal { grid-area: seal; align-self: end; width: 84px; }

  .toolbar { margin-top: 48px; }
  .filters {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: calc(var(--gutter) - 6px);
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
    mask-image: linear-gradient(90deg, #000 84%, transparent);
  }
  .toolbar__tools { flex-direction: column; gap: 16px; }
  .field--search, .field--sort { width: 100%; max-width: none; }

  /* phones: a two-column catalogue, like a printed lookbook */
  .card__top { padding: 10px 10px 9px; }
  .status { letter-spacing: .08em; }
  .card__body { padding: 14px 10px 12px; }
  .card__name { font-size: 19px; line-height: .95; }
  .card__tag {
    margin-top: 7px;
    font-size: 11.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card__foot { padding-top: 14px; gap: 8px; }
  .card__price { font-size: 21px; }
  .card__size { display: none; }   /* shown in the product view */
  .card__arrow { font-size: 18px; }

  .about__title { font-size: 30.5vw; }
  .manifesto { margin-top: 72px; }
  .manifesto > * { grid-area: auto; }
  .manifesto__text { width: 100%; margin-top: 32px; font-size: 26px; text-align: left; }
  .stat dd { font-size: 64px; }
  /* principles stay compact: all three plates run image | text */
  .principle--lead, .principle:not(.principle--lead) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .principle.principle--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }   /* text keeps the wide column */
  .principle__img, .principle--lead .principle__img { aspect-ratio: 1 / 1; padding: 16px; }
  .principle__text { padding: 20px 18px; }
  .principle h3 { font-size: 30px; }
  .principle p { margin-top: 10px; font-size: 14px; }

  .marquee__group li { font-size: min(72px, 16vw); }   /* THE NORTH FACE fits 375px in the still wall */

  .cta__title { font-size: min(15.6vw, 80px); }
  .cta__handle { font-size: 38px; }
  .cta__actions { flex-direction: column; width: 100%; }
  .cta__actions .btn { width: 100%; flex: none; }
  .cta__band img { width: 210%; margin-left: -110%; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; }

  .modal__pager span { display: none; }
}

@media (max-width: 380px) {
  .logo__text small { display: none; }
}

/* Short landscape screens: keep the hero inside the viewport */
@media (min-width: 900px) and (max-height: 760px) {
  .hero__title { font-size: clamp(80px, min(13vw, 21vh), 248px); }
  .anno--stack { top: 28%; }
}

/* 16 SHOP ------------------------------------------------------------------
   Hero copy and actions, condition rating (stars), the condition guide,
   the delivery page. Same tokens and rules as the rest of the site. */

/* Hero: one sentence on what the shop is, then the way in */
.hero__lead {
  max-width: 38ch;
  margin-top: clamp(20px, 3vh, 32px);
  font: 300 clamp(16px, 1.3vw, 19px)/1.5 var(--f-text);
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 30px;
  margin-top: clamp(28px, 4.6vh, 52px);
}
.hero__actions .hero__cta { margin-top: 0; }
.hero__link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font: 600 12px/1 var(--f-text);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.hero__link .icon { font-size: 16px; transition: transform var(--t) var(--ease); }
@media (hover: hover) {
  .hero__link:hover { color: var(--ink); border-color: var(--ink); }
  .hero__link:hover .icon { transform: translate(3px, -3px); }
}
.hero__link:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.is-ready .hero [data-intro="2"] { transition-delay: .62s; }

/* Stars: an outline and a filled copy clipped to 0 / 50 / 100% of the star's width */
.stars { display: inline-flex; gap: .16em; vertical-align: middle; color: var(--ink); line-height: 0; }
.star { position: relative; flex: none; width: 1em; height: 1em; }
.star svg { position: absolute; top: 0; left: 0; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.star__fill { position: absolute; inset: 0; width: var(--fill, 0%); overflow: hidden; }
.star__fill svg { fill: currentColor; }

.card__cond {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  font: 500 12px/1 var(--f-text);
  color: var(--ink-2);
}
.card__cond .stars { font-size: 13px; }

/* Result count + the way to the condition guide */
.results-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.results-row[hidden] { display: none; }
.link-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0;
  font: 500 12.5px/1.2 var(--f-text);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.link-btn .icon { font-size: 15px; }
@media (hover: hover) { .link-btn:hover { color: var(--ink); text-decoration-color: var(--ink); } }
.link-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.toolbar[hidden] { display: none; }

/* The five grades (about section and the small window) */
.grades { padding-top: 18px; border-top: 1px solid var(--line); }
.grades__title {
  margin-bottom: 8px;
  font: 800 clamp(28px, 2.6vw, 40px)/.95 var(--f-display);
  text-transform: uppercase;
}
.grades__list { display: grid; }
.grade {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.grade:last-child { border-bottom: 0; }
.grade .stars { font-size: 15px; }
.grade__score { font: 400 12px/1 var(--f-mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.grade__label { font: 700 15px/1.2 var(--f-text); }
.grade__text { grid-column: 1 / -1; font: 300 14.5px/1.5 var(--f-text); color: var(--ink-2); text-wrap: pretty; }

.grades-dlg {
  width: min(560px, calc(100% - 32px));
  max-height: min(86svh, 760px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: contain;
}
.grades-dlg::backdrop { background: rgb(var(--bg-rgb) / .78); backdrop-filter: blur(3px); }
.grades-dlg[open] { animation: dlg-in .45s var(--ease) both; }
@keyframes dlg-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.grades-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.grades-dlg__title { font: 900 clamp(34px, 4.4vw, 52px)/.9 var(--f-display); text-transform: uppercase; }
.grades-dlg .modal__close { position: static; flex: none; border: 1px solid var(--line-2); }
.grades-dlg__lead { margin: 14px 0 6px; font: 300 15px/1.5 var(--f-text); color: var(--ink-2); }

/* Product view: the condition takes the whole row */
.modal__specs > .modal__cond { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; }
.modal__specs > .modal__cond dd { font: inherit; text-transform: none; display: grid; gap: 10px; justify-items: start; }
.cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cond .stars { font-size: 20px; }
.cond__score { font: 400 13px/1 var(--f-mono); color: var(--ink-2); }
.cond__label { font: 700 16px/1.2 var(--f-text); }
.cond__note { flex-basis: 100%; font: 300 14px/1.5 var(--f-text); color: var(--ink-2); }

/* Footer: the owner's panel stays reachable without competing with the shop */
.footer__admin { color: var(--mute); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
@media (hover: hover) { .footer__admin:hover { color: var(--ink-2); } }

/* Delivery page ------------------------------------------------------------ */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(48px, 9vh, 120px)) var(--pad-x) clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}
/* the crosshair: the destination. A mask, so it takes the ink colour of the page */
.page-hero__mark {
  position: absolute; right: var(--pad-x); top: calc(50% + var(--nav-h) / 2);
  width: clamp(140px, 22vw, 320px); aspect-ratio: 480 / 476;
  translate: 0 -50%;
  background: var(--ink-2);
  -webkit-mask: url("../assets/img/mark-crosshair.webp") center / contain no-repeat;
  mask: url("../assets/img/mark-crosshair.webp") center / contain no-repeat;
}
@media (max-width: 767px) {
  .page-hero__mark { position: static; display: block; width: 96px; margin-top: 32px; translate: none; }
}
.page-hero__title {
  font: 900 clamp(76px, 15vw, 240px)/.8 var(--f-display);
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.page-hero__lead { max-width: 46ch; margin-top: clamp(20px, 3vh, 34px); font: 300 clamp(17px, 1.5vw, 22px)/1.45 var(--f-text); color: var(--ink-2); }

.delivery { padding: var(--section-y) var(--pad-x); }
.delivery__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 7vw, 140px);
  align-items: start;
}
.delivery__no { display: block; margin-bottom: 14px; font: 400 12px/1 var(--f-mono); color: var(--mute); }
.delivery__heading { font: 900 clamp(40px, 4.4vw, 72px)/.9 var(--f-display); text-transform: uppercase; }
.delivery__body { display: grid; gap: 22px; max-width: 64ch; grid-row: span 2; }
.delivery__photo {
  position: relative; grid-column: 1; margin: 0;
  width: min(100%, 360px); aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--bg-3);
}
.delivery__photo > img:first-child { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.88) contrast(1.05); }
.delivery__body > p { font: 300 clamp(17px, 1.35vw, 20px)/1.6 var(--f-text); color: var(--ink-2); text-wrap: pretty; }
.delivery__lead { padding-top: 18px; border-top: 1px solid var(--line); }
.delivery__body > p.delivery__lead { font: 300 clamp(22px, 2.1vw, 32px)/1.3 var(--f-text); color: var(--ink); }
.delivery__lead strong { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.notice {
  display: grid; gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--ink);
  background: var(--bg-3);
}
.notice__title { font: 600 12px/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.notice p:not(.notice__title) { font: 300 16px/1.55 var(--f-text); color: var(--ink-2); }
.delivery__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.delivery__handle { font: 400 13px/1.5 var(--f-mono); color: var(--mute); }
.delivery__handle a { color: var(--ink); }

@media (max-width: 899px) {
  .delivery__grid { grid-template-columns: 1fr; }
  .delivery__body { grid-row: auto; }
  .delivery__photo { width: min(100%, 320px); }
  .film { gap: 40px 48px; }
  .film__frame { width: min(300px, calc(78svh * 9 / 16)); }
}
/* phones: one column, the video first */
@media (max-width: 699px) {
  .film { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .film__frame { width: min(100%, 360px); }
}
@media (max-width: 559px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__link { justify-content: center; border-bottom: 0; }
  .delivery__actions .btn { width: 100%; }
  .grade { grid-template-columns: auto minmax(0, 1fr); }
  .grade__label { grid-column: 1 / -1; }
}

/* 15 REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  .js [data-reveal], .js .hero [data-intro] { opacity: 1; transform: none; }
  .js .display .line > span, .js .hero__title .line > span { transform: none; }
  .js .hero__media { clip-path: none; }
  .js .hero__media img { scale: 1; }
}

/* Several photos per item: count on the card, small switches + full size in the product window */
.status.is-reserved { color: var(--ink); text-decoration: underline dashed 1px; text-underline-offset: 4px; }
.card.is-reserved .card__media img { filter: brightness(.8); }
.modal__media img { cursor: zoom-in; }
.modal__zoom { grid-row: 1; justify-self: start; margin: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: rgb(11 11 10 / .72); color: var(--ink); font: 600 11px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.modal__zoom .icon { width: 18px; height: 18px; }
.modal__zoom:focus-visible, .modal__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.modal__thumbs { grid-row: 3; padding: 0 12px 12px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.modal__thumbs[hidden] { display: none; }
.modal__thumb { flex: none; width: 48px; height: 48px; padding: 0; overflow: hidden; background: var(--bg-3); border: 1px solid rgb(242 239 232 / .25); }
.modal__thumb[aria-current="true"] { border-color: var(--ink); outline: 1px solid var(--ink); }
.modal__thumb img { width: 100%; height: 100%; object-fit: contain; transform: none !important; cursor: pointer; }