/* =====================================================================
   FASOSKI — landing page stylesheet

   Design tokens first: palette, a single type scale, tracking rhythm,
   a radii scale and a layered shadow system. Every size and spacing
   value in the page resolves to one of these, so the page reads as
   deliberate rather than ad hoc.

   FULL-BLEED ARCHITECTURE
   -----------------------
   No page canvas, no gutters, no per-section rounding: every section
   runs edge to edge and its colour carries the eye down the page.
   Instead of hard colour-block cuts, each section's background opens
   with a short ramp FROM the colour the section above it ended on, so
   every junction matches by construction and no seam is ever visible.
   `--t-ramp` is that ramp length; a section's `.wrap` clears it with its
   own top padding, so no text ever sits inside a gradient.

   Rounded corners now appear only on things that are genuinely cards —
   product cards, the header pill, badges, buttons, chips.

   Mobile-first: base styles target ~375px, breakpoints widen upward.
   ===================================================================== */

/* ------------------------------ tokens ------------------------------ */
:root {
  /* --- palette -------------------------------------------------------
     --lilac is the one survivor of the old page canvas: it now earns its
     keep as the badge fill, the focus ring and the header progress bar. */
  --black: #0d0d0d;
  --ink: #141414;
  --white: #ffffff;

  --lilac: #b9a2e6;
  --violet: #bda4de;
  --lavender: #e8e6f1;
  --acid: #e9fe57;        /* acid / marigold family */
  --marigold: #f7c948;

  --muted: #6b6b74;
  --muted-strong: #56565e;

  /* --- the colour journey down the page -----------------------------
     Each section starts on the previous section's terminal colour and
     ramps into its own over `--t-ramp`, so the page reads as one
     continuous surface rather than a stack of blocks.
     --c-hero-end   hero floor, a lit lilac-grey
     --c-arrivals   white
     --c-collection violet
     --c-gallery    a hair off white, so violet releases gently
     --c-products   acid
     --c-marquee    black
     --c-festival   the festival body, deepening to --c-festival-end
     --c-footer     deep violet, so the white wordmark finally reads  */
  --c-hero-end: #e4ddf2;
  --c-arrivals: var(--white);
  --c-collection: var(--violet);
  --c-gallery: #fbfafe;
  --c-products: var(--acid);
  --c-marquee: var(--black);
  --c-festival: #efedf4;
  --c-festival-end: #ded6ee;
  --c-footer: #5a37a6;

  /* --- type scale ---------------------------------------------------
     Four steps, used everywhere:
       1.0625rem  lead / prices
       0.875rem   body copy, footer links
       0.78125rem functional UI floor (12.5px) — nav, cart, buttons, chips
       0.6875rem  micro caps — badges, stickers, eyebrows, kickers
     Nothing renders below 11px.                                              */
  --fs-micro: .6875rem;
  --fs-ui: .78125rem;
  --fs-body: .875rem;
  --fs-lead: 1.0625rem;

  --fs-h-card: clamp(1.0625rem, 1.35vw, 1.5rem);      /* product names       */
  --fs-h-sub: clamp(1.5rem, 2.6vw, 2.6rem);           /* collage title       */
  --fs-h-section: clamp(2.15rem, 5.4vw, 4.75rem);     /* section headings    */
  --fs-h-festival: clamp(2.1rem, 6.4vw, 5.6rem);      /* festival headline   */

  /* --- tracking rhythm --------------------------------------------- */
  --tr-display: -.015em;   /* display type      */
  --tr-snug: -.005em;
  --tr-chip: .06em;        /* filter chips      */
  --tr-ui: .1em;           /* nav, cart         */
  --tr-btn: .09em;         /* buttons           */
  --tr-micro: .14em;       /* micro caps        */

  /* --- radii scale -------------------------------------------------- */
  --r-2xs: 8px;
  --r-xs: 12px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --pill: 999px;

  /* --- hairlines ---------------------------------------------------- */
  --hair: 1px solid rgba(13, 13, 13, .09);
  --hair-strong: 1px solid rgba(13, 13, 13, .16);
  --hair-light: 1px solid rgba(255, 255, 255, .16);

  /* --- layered shadows: soft, multi-stop, low opacity --------------- */
  --sh-1: 0 1px 1px rgba(24, 12, 46, .03), 0 3px 8px rgba(24, 12, 46, .045);
  --sh-2: 0 1px 1px rgba(24, 12, 46, .03), 0 6px 16px rgba(24, 12, 46, .06),
          0 16px 34px rgba(24, 12, 46, .055);
  --sh-3: 0 2px 2px rgba(24, 12, 46, .03), 0 10px 24px rgba(24, 12, 46, .07),
          0 30px 60px rgba(24, 12, 46, .09);

  /* --- layout ------------------------------------------------------- */
  --gutter: 10px;          /* only insets the floating header pill now */
  --maxw: 1440px;
  --pad-x: clamp(16px, 3.6vw, 56px);
  --t-ramp: clamp(52px, 5.6vw, 96px);   /* section-to-section colour ramp */

  --font-display: "Anton", "Archivo Black", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-body: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

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

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);          /* the hero's own top colour, nothing else */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul { list-style: none; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; border-radius: 6px; }
.panel--band :focus-visible,
.panel--marquee :focus-visible { outline-color: var(--acid); }

/* A fine grain over the whole page: material quality, one flat layer,
   no blend mode, no animation — it costs a single paint. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink); color: var(--white); padding: 10px 16px;
  border-radius: 10px; text-decoration: none; font-weight: 700; font-size: var(--fs-ui);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ sections ============================== */
/* Full bleed. No canvas, no gutters, no section rounding.

   THE RAMP RULE: `--t-ramp` is the length of the blend from the previous
   section's colour into this one, and its length is set by how far apart
   the two colours are. Long ramp for a small move (white → violet),
   short ramp for a big one (acid → black), because a long ramp between
   two distant colours spends its middle in mud. */
.page { padding: 0; }

.panel {
  position: relative;
  border-radius: 0;
  margin-bottom: 0;
  overflow: clip;
  background-color: var(--white);
}

/* The hero opens the page, so it has nothing to ramp from; it simply
   ends on the floor tone the category band will ramp out of. */
.panel--hero {
  background-color: var(--c-hero-end);
  background-image:
    radial-gradient(112% 72% at 50% -14%, #ffffff 0%, #fcfbff 30%, #f5f1fc 54%, #ece6f8 78%, var(--c-hero-end) 100%),
    linear-gradient(180deg, var(--white) 0%, var(--c-hero-end) 100%);
  padding-bottom: 0;
}

/* the black category rail: the hero's floor falls into it over a short
   ramp, and its own bottom dissolves into the arrivals section */
.panel--band {
  --t-ramp: clamp(22px, 2.4vw, 40px);
  background-color: var(--black);
  background-image: linear-gradient(180deg, var(--c-hero-end) 0, var(--black) var(--t-ramp));
}

/* black → white: a big jump, so a short ramp */
.panel--arrivals {
  --t-ramp: clamp(22px, 2.6vw, 46px);
  background-color: var(--c-arrivals);
  background-image: linear-gradient(180deg, var(--c-marquee) 0, var(--c-arrivals) var(--t-ramp));
}

/* white → violet: a near neighbour, so it can take a long, soft ramp */
.panel--collection {
  --t-ramp: clamp(48px, 5.4vw, 78px);
  background-color: var(--c-collection);
  background-image: linear-gradient(180deg, var(--c-arrivals) 0, var(--c-collection) var(--t-ramp));
}

/* violet → a hair off white */
.panel--gallery {
  --t-ramp: clamp(48px, 5.4vw, 78px);
  background-color: var(--c-gallery);
  background-image: linear-gradient(180deg, var(--c-collection) 0, var(--c-gallery) var(--t-ramp));
}

/* near-white → acid, the most saturated move on the page after black */
.panel--products {
  --t-ramp: clamp(30px, 3.4vw, 56px);
  background-color: var(--c-products);
  background-image: linear-gradient(180deg, var(--c-gallery) 0, var(--c-products) var(--t-ramp));
}

/* acid → black: the widest jump on the page, so the shortest ramp —
   anything longer spends its whole middle in olive mud */
.panel--marquee {
  --t-ramp: clamp(18px, 2.2vw, 34px);
  background-color: var(--c-marquee);
  background-image: linear-gradient(180deg, var(--c-products) 0, var(--c-marquee) var(--t-ramp));
  padding-top: calc(var(--t-ramp) + clamp(6px, 1vw, 14px));
}

/* black → mist: light emerging out of the dark band */
.panel--festival {
  --t-ramp: clamp(24px, 2.8vw, 48px);
  background-color: var(--c-festival-end);
  background-image: linear-gradient(180deg,
    var(--c-marquee) 0,
    var(--c-festival) var(--t-ramp),
    var(--c-festival) 62%,
    var(--c-festival-end) 100%);
}

/* the close: a saturated violet, so the white wordmark finally has
   something to sit on */
.panel--footer {
  --t-ramp: clamp(48px, 5.4vw, 78px);
  background-color: var(--c-footer);
  background-image: linear-gradient(180deg,
    var(--c-festival-end) 0,
    #b49ae4 var(--t-ramp),
    #8f6fd0 46%,
    #6b4bbb 78%,
    var(--c-footer) 100%);
  padding-bottom: clamp(16px, 1.8vw, 24px);
  overflow: hidden;
}

/* Section body. Every section's content starts the same distance from its
   top edge, so the vertical rhythm is uniform while the colour ramps are
   free to vary in length. `--t-ramp` is always shorter than that padding,
   so no text is ever set inside a gradient. */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(40px, 4.6vw, 78px) var(--pad-x) clamp(52px, 5vw, 88px);
}

/* --------------------------- type helpers --------------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  font-size: var(--fs-h-section);
  line-height: .92;
  letter-spacing: var(--tr-snug);
}
.section-title--light { color: var(--white); }
.section-title--left {
  text-align: left;
  /* optical margin: pull the caps' side bearing back onto the grid line */
  margin-left: -.022em;
}

/* ------------------------------ buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--pill); cursor: pointer;
  padding: 14px 20px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-ui);
  letter-spacing: var(--tr-btn); text-transform: uppercase; text-decoration: none;
  transition: transform .24s var(--ease-out), background-color .24s var(--ease-soft),
              color .24s var(--ease-soft), box-shadow .24s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn--dark  { background: var(--ink); color: var(--white); }
.btn--dark:hover  { box-shadow: var(--sh-2); }
.btn--acid  { background: var(--acid); color: var(--ink); }
.btn--ghost { background: #f4f3f5; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--sm { padding: 10px 15px; font-size: var(--fs-ui); gap: 8px; }

.btn__dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--ink); color: var(--white);
  transition: transform .3s var(--ease-out), background-color .24s var(--ease-soft);
}
.btn__dot svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__dot { transform: rotate(45deg); }
.btn--acid .btn__dot { background: var(--ink); color: var(--white); }
.btn--dark .btn__dot { background: var(--white); color: var(--ink); }
.btn--ghost .btn__dot { background: var(--ink); color: var(--white); }

.btn-circle {
  width: clamp(94px, 9.6vw, 126px); aspect-ratio: 1; border-radius: 50%;
  background: var(--marigold); color: var(--ink);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-display); text-transform: uppercase; text-align: center;
  font-size: clamp(.86rem, 1.05vw, 1.06rem); line-height: .95; letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 14px 34px rgba(34, 12, 74, .34);
  transition: transform .3s var(--ease-out), background-color .24s var(--ease-soft),
              box-shadow .3s var(--ease-out);
}
.btn-circle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.btn-circle:hover { transform: scale(1.07) rotate(-4deg); background: var(--acid); box-shadow: 0 0 0 6px rgba(255, 255, 255, .24), 0 20px 44px rgba(34, 12, 74, .4); }
.btn-circle:hover svg { transform: rotate(45deg); }

.circle-btn {
  width: clamp(42px, 4vw, 52px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center; flex: none;
}
.circle-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cta-row { display: flex; justify-content: center; margin-top: clamp(24px, 3.2vw, 46px); }

/* ------------------------------- tags ------------------------------- */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-micro); letter-spacing: var(--tr-ui); text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--pill); white-space: nowrap;
}
.tag--new { background: var(--acid); color: var(--ink); }
.tag--sticker {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  background: var(--marigold); color: var(--ink);
  box-shadow: 0 1px 1px rgba(24, 12, 46, .04), 0 6px 14px rgba(24, 12, 46, .16);
  font-size: var(--fs-micro);
}

/* ============================== 1. HEADER =========================== */
/* A floating frosted pill. It is a card, so it keeps its radius; it now
   rides over the full-bleed sections instead of sitting in a gutter. */
.panel--header {
  position: sticky; top: var(--gutter); z-index: 120;
  overflow: visible;                      /* keeps sticky + drawer working */
  margin: var(--gutter) clamp(10px, 1.4vw, 24px) 0;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(13, 13, 13, .04), 0 6px 18px rgba(24, 12, 46, .05);
  transition: background-color .35s var(--ease-soft), box-shadow .35s var(--ease-out),
              border-radius .35s var(--ease-out);
}
.panel--header.is-stuck {
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--sh-2);
}

.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: clamp(9px, 1.1vw, 12px) clamp(14px, 2.4vw, 34px);
  transition: padding .35s var(--ease-out);
}
.panel--header.is-stuck .header__inner { padding-block: clamp(6px, .8vw, 8px); }

.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.logo__mark { width: 20px; height: 20px; fill: var(--ink); flex: none; transition: transform .5s var(--ease-out); }
.logo:hover .logo__mark { transform: rotate(72deg); }
.logo__word {
  font-family: var(--font-display); font-size: clamp(1.12rem, 1.9vw, 1.5rem);
  letter-spacing: .01em; text-transform: uppercase; line-height: 1;
  transition: font-size .35s var(--ease-out);
}
.panel--header.is-stuck .logo__word { font-size: clamp(1.02rem, 1.6vw, 1.28rem); }
.logo__word sup { font-family: var(--font-body); font-size: .5em; font-weight: 700; top: -.5em; }

/* scroll progress hairline — the header reads as a live app chrome */
.header__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: linear-gradient(90deg, var(--lilac), var(--ink));
  transform: scaleX(var(--scroll-p, 0));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .35s var(--ease-soft);
}
.panel--header.is-stuck .header__progress { opacity: 1; }

.nav { display: none; }
.header__actions { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); justify-self: end; }

.link-quiet {
  display: none; font-size: var(--fs-ui); font-weight: 700; letter-spacing: var(--tr-ui);
  text-transform: uppercase; text-decoration: none; color: var(--muted);
  transition: color .2s var(--ease-soft);
}
.link-quiet:hover { color: var(--ink); }

.cart {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-size: var(--fs-ui); font-weight: 700;
  letter-spacing: var(--tr-ui); text-transform: uppercase;
}
.cart__icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart.is-bump .cart__icon { animation: cartBump .44s var(--ease-out); }

.burger {
  width: 40px; height: 34px; border: 0; background: none; cursor: pointer;
  display: grid; place-content: center; gap: 5px; padding: 0;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  border-top: var(--hair);
  background: var(--white);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  animation: drawerIn .26s var(--ease-out);
}
.drawer__nav { display: flex; flex-direction: column; padding: 6px clamp(16px, 4vw, 34px) 18px; }
.drawer__nav a {
  padding: 14px 0; text-decoration: none; font-weight: 700; font-size: var(--fs-body);
  letter-spacing: var(--tr-ui); text-transform: uppercase; border-bottom: var(--hair);
}
.drawer__nav a:last-child { border-bottom: 0; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes cartBump { 50% { transform: translateY(-4px) scale(1.15); } }

/* =============================== 2. HERO ============================ */
.hero {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(18px, 2.6vw, 40px) var(--pad-x) clamp(26px, 3.4vw, 50px);
}

.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 6px;
}

/* The headline is sized to the layout measure so its longest line aligns
   to the grid: (min(100vw − scrollbar, --maxw) − 2 · pad-x) · 0.1112.
   0.1112 = 0.975 ÷ 8.77em — 8.77em being the measured width of
   "NAVIGATING THE FASHION" in Anton at the display tracking below, taken
   at its widest across sizes, and 0.975 the hair of optical inset that
   keeps the type off the margin.
   The min() against --maxw matters: the section is capped at 1440px, so a
   pure 100vw formula keeps growing the type past that and the line wraps.
   The floor is 1.9rem so the line still fits the measure at 320px, where
   the calc and the clamp cross over. */
.hero__title {
  z-index: 3;                 /* the type sits IN FRONT of the figure */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, calc((min(100vw - 15px, var(--maxw)) - 2 * var(--pad-x)) * .1112), 10.5rem);
  line-height: .82;
  letter-spacing: var(--tr-display);
}
/* optical centring: tracking adds a trailing space after the last glyph,
   which biases centred caps to the left; give half of it back */
.hero__title span { display: block; padding-left: calc(var(--tr-display) * -.5); }

/* The figure group: the cut-out and the lit floor it stands in travel
   together, so the figure never floats free of its own shadow.
   Below 900px it is a flow item under the headline; from 900px it is
   anchored to the floor of the stage and half the stage tall, which is
   exactly the depth that puts the top of the head under line 1 (the
   headline block is centred in the same box). */
.hero__figure {
  position: relative;
  display: block;
  align-self: end;
  z-index: 2;
  translate: var(--fig-x, 0) var(--fig-y, 0px);
}
.hero__model {
  position: relative;
  z-index: 2;
  width: clamp(212px, 29vw, 392px);
  /* the source cut-out is cropped mid-thigh, so its base is a hard straight
     edge. Dissolving the last of it into the light pool is what stops the
     figure reading as a sticker pasted onto the page.
     NOTE: no `filter: drop-shadow` here. A filter and a mask on the same
     element make Chromium composite the masked layer against an
     unpremultiplied backing, which paints a pale rectangle over the whole
     image box. The ground's own cast shadow does the job instead. */
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%);
}

/* The floor. Three stacked layers, painted in this order, so the figure
   reads as standing on a lit surface with real contact weight rather
   than pasted over a gradient:
     1. a tight, dark contact shadow right on the point the figure meets
        the floor
     2. a wider, softer cast shadow
     3. a bright elliptical pool of light, LARGER than the two shadows,
        so there is always lit floor around the contact point
   The hero floor is a lilac-grey (--c-hero-end), not white, which is
   what finally lets the light pool read at all — a white pool on a
   near-white background was invisible by construction. */
.hero__ground {
  position: absolute;
  z-index: 1;
  /* centred on the figure, but never wider than the viewport — a box the
     panel has to clip would cut the pool off with a straight edge on
     phones, where the figure's clamp floor is proportionally large.
     Every layer reaches alpha 0 at the box edge, so the box edge itself
     is always invisible. */
  left: 50%; bottom: -12%;
  width: min(212%, 94vw);
  height: 34%;
  translate: -50% 0;
  pointer-events: none;
  background:
    radial-gradient(24% 22% at 50% 64%, rgba(44, 22, 86, .50), rgba(44, 22, 86, .18) 52%, rgba(44, 22, 86, 0) 78%),
    radial-gradient(40% 34% at 50% 66%, rgba(44, 22, 86, .22), rgba(44, 22, 86, .06) 56%, rgba(44, 22, 86, 0) 82%),
    radial-gradient(50% 28% at 50% 70%, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .86) 40%, rgba(255, 255, 255, .35) 68%, rgba(255, 255, 255, 0) 92%);
}
/* a single hairline on the ground line, fading at both ends, ties the
   figure to the layout instead of leaving it hanging over the gutter */
.hero__ground::after {
  content: "";
  position: absolute; left: 6%; right: 6%; top: 68%;
  height: 1px;
  background: linear-gradient(90deg, rgba(44, 22, 86, 0), rgba(44, 22, 86, .34) 16%, rgba(44, 22, 86, .34) 84%, rgba(44, 22, 86, 0));
}

.hero__decor {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; z-index: 4;
}
.hero__decor > * { position: relative; }

/* "Summer is coming" — the season, not a generic product claim; a coil
   glyph over two lines of caps, lilac, straight (it is a badge, not a
   sticker). */
.hero__badge {
  display: grid; justify-items: center; gap: 7px;
  background: var(--lilac); color: var(--ink);
  border-radius: var(--r-md); padding: 12px 16px 13px;
  box-shadow: var(--sh-1);
  text-align: center;
}
.hero__badge-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.hero__badge-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero__badge-text { font-weight: 700; font-size: var(--fs-micro); line-height: 1.25; letter-spacing: var(--tr-btn); text-transform: uppercase; }

/* the lower-left lockup: marker + label + rule that runs to the block
   edge, so no element reads as a clipped fragment, over a display line */
.hero__meta {
  order: 5; width: 100%;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--muted-strong);
}
.hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.hero__rule { flex: 1 1 auto; height: 1px; background: currentColor; opacity: .3; }
.hero__since {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: .9rem; letter-spacing: var(--tr-ui); color: var(--ink); line-height: 1;
}

.hero__sale {
  width: clamp(72px, 15vw, 132px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.hero__sale-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.hero__sale-text {
  fill: var(--ink); font-family: var(--font-body); font-weight: 700;
  /* sized so the repeated string fills the 465-unit circle without clipping */
  font-size: 17px; letter-spacing: 2px; text-transform: uppercase;
}
.hero__sale-glyph { width: 26%; fill: var(--ink); position: relative; }
.hero__sale::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: var(--acid); box-shadow: var(--sh-1);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__card {
  position: relative;
  z-index: 5;                 /* above headline (3), figure (2) and decor (4) */
  width: min(232px, 64%);
  margin-top: 18px;
  background: var(--white); border-radius: var(--r-md); padding: 9px;
  box-shadow: var(--sh-2); text-align: center;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.hero__card img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); }
/* the badge must sit above the photo it overlaps */
.hero__card .tag--new { position: absolute; top: 17px; left: 17px; z-index: 2; }
.hero__card-name { font-weight: 700; font-size: var(--fs-micro); letter-spacing: var(--tr-btn); text-transform: uppercase; margin: 9px 0 8px; }
.hero__card .btn { width: 100%; }

/* ====================== 3. CATEGORY BAND ============================ */
/* Full-bleed black. One treatment for every item — white label on a
   neutral chip — with the acid reserved for hover/focus, so colour now
   means state instead of decoration. */
.band__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: calc(var(--t-ramp) + clamp(12px, 1.7vw, 22px)) var(--pad-x) clamp(18px, 2.2vw, 30px);
}
.filterbar__list {
  display: flex; align-items: center; gap: clamp(2px, .9vw, 14px);
  margin: 0 auto; padding: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.filterbar__list::-webkit-scrollbar { display: none; }
.filterbar__item {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  color: var(--white); text-decoration: none;
  font-weight: 700; font-size: var(--fs-ui); letter-spacing: var(--tr-chip); text-transform: uppercase;
  padding: 5px 13px 5px 6px; border-radius: var(--pill); white-space: nowrap;
  transition: background-color .22s var(--ease-soft), color .22s var(--ease-soft);
}
.filterbar__chip {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .13);
  display: grid; place-items: center;
  transition: background-color .22s var(--ease-soft), transform .3s var(--ease-out);
}
.filterbar__chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.filterbar__item:hover,
.filterbar__item:focus-visible { color: var(--acid); background: rgba(255, 255, 255, .07); }
.filterbar__item:hover .filterbar__chip,
.filterbar__item:focus-visible .filterbar__chip { background: var(--acid); color: var(--ink); transform: rotate(-8deg); }

/* ============================== 4. GRIDS =========================== */
.grid { display: grid; gap: clamp(12px, 1.5vw, 22px); }
.grid--4 { grid-template-columns: minmax(0, 1fr); margin-top: clamp(24px, 3vw, 46px); }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(24px, 3vw, 46px); }

/* shared media treatment: a hairline inset keeps every photo feeling
   framed, and the image lifts fractionally on hover */
.pcard__img, .ccard__media img, .tcard__media img, .collage__item img {
  transition: transform .7s var(--ease-out);
}

/* --- arrivals: landscape product cards --- */
.pcard {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 12px; padding: 10px;
  background: var(--white); border: var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.pcard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.pcard__img {
  width: 100%; height: 100%; min-height: 176px;
  object-fit: cover; border-radius: var(--r-sm); background: var(--lavender);
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .05);
}
.pcard:hover .pcard__img { transform: scale(1.025); }
.pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 2px 0; }
.pcard__name {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-h-card); line-height: .98; letter-spacing: var(--tr-snug);
}
.pcard__copy { font-size: var(--fs-body); line-height: 1.42; color: var(--muted); }
.pcard__price { font-weight: 800; font-size: var(--fs-lead); margin-top: auto; font-variant-numeric: tabular-nums; }
.pcard .btn { align-self: flex-start; }

/* --- collection: category cards --- */
.ccard {
  position: relative; display: flex; flex-direction: column; gap: 11px;
  padding: 11px; text-decoration: none;
  background: rgba(255, 255, 255, .58);
  border: var(--hair-light);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 1px rgba(24, 12, 46, .02);
  transition: transform .4s var(--ease-out), background-color .4s var(--ease-soft),
              box-shadow .4s var(--ease-out);
}
.ccard:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .88); box-shadow: var(--sh-2); }
.ccard__media { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--white); aspect-ratio: 4 / 4.3; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .05); }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; }
.ccard:hover .ccard__media img { transform: scale(1.045); }
.ccard__label {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(.9rem, 1.15vw, 1.18rem); letter-spacing: .02em; color: var(--ink);
  margin-top: auto; padding-top: 2px;
}
.ccard__tag { position: absolute; top: 20px; right: 20px; z-index: 3; box-shadow: none; }

/* --- top products: t-shirt cards --- */
.tcard {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 10px; border-radius: var(--r-lg);
  border: 1px solid rgba(13, 13, 13, .07);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.tcard--1 { background: #d9ecf6; }
.tcard--2 { background: #e3dbf7; }
.tcard--3 { background: #e6e6e3; }
.tcard--4 { background: #f9dbE7; }
.tcard:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.tcard__media { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--white); aspect-ratio: 4 / 4.6; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .05); }
.tcard__media img { width: 100%; height: 100%; object-fit: cover; }
.tcard:hover .tcard__media img { transform: scale(1.045); }
.tcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 2px; }
.tcard__label { font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; }
.tcard__price { font-weight: 800; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.tcard__add {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(13, 13, 13, .18);
  transition: transform .3s var(--ease-out), background-color .24s var(--ease-soft), color .24s var(--ease-soft);
}
.tcard__add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tcard__add:hover { background: var(--acid); color: var(--ink); transform: rotate(90deg); }

/* ============================= 6. GALLERY ========================== */
.gallery__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(14px, 2.4vw, 34px); }
.gallery__note { display: flex; align-items: center; gap: 14px; max-width: 22rem; }
.gallery__note p { font-size: var(--fs-ui); font-weight: 600; letter-spacing: var(--tr-ui); text-transform: uppercase; line-height: 1.55; }

.collage {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 48px);
}
.collage__item { overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.collage__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.collage__item:hover img { transform: scale(1.035); }
.collage__text { text-align: center; padding: 6px; }
.collage__kicker { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.collage__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h-sub); line-height: .95; margin: 12px 0 14px; }

.collage__copy { font-size: var(--fs-body); line-height: 1.55; color: var(--muted); max-width: 32ch; margin-inline: auto; }

.readmore {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(22px, 2.6vw, 40px);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1rem, 1.4vw, 1.3rem); letter-spacing: .02em;
  text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 4px;
}
.readmore svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.readmore:hover svg { transform: translate(3px, -3px); }

/* ============================ 7. MARQUEE =========================== */
.marquee { overflow: hidden; padding: clamp(15px, 1.7vw, 24px) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); }
/* Each list travels its own width, so the loop stays seamless no matter
   how many copies are needed to fill the viewport. */
.marquee__inner { display: flex; width: max-content; }
.marquee__list { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: 0 clamp(8px, 1.2vw, 20px); animation: marqueeScroll var(--marquee-dur, 26s) linear infinite; }
.marquee__list li {
  font-family: var(--font-display); text-transform: uppercase; color: var(--white);
  font-size: clamp(1.1rem, 2.4vw, 2.05rem); white-space: nowrap; letter-spacing: var(--tr-snug);
}
.marquee__star { display: flex; }
.marquee__star svg { width: clamp(.9rem, 1.3vw, 1.25rem); height: clamp(.9rem, 1.3vw, 1.25rem); fill: var(--acid); }
.marquee:hover .marquee__list { animation-play-state: paused; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ============================ 8. FESTIVAL ========================== */
.festival { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); justify-items: center; text-align: center; }
.festival__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-h-festival); line-height: .9; letter-spacing: var(--tr-snug);
  z-index: 3;                 /* the type sits in front of the bust */
}
.festival__title span { display: block; }

/* the figure is a bust cut-out, so it is presented as one: it rises out
   of the section floor inside its own light pool rather than pretending
   to be a whole body */
.festival__figure {
  position: relative;
  z-index: 2;
  width: clamp(190px, 24vw, 306px);
  margin-bottom: -2px;
  translate: 0 var(--fig-y, 0px);
}
.festival__figure img {
  position: relative; z-index: 2; width: 100%;
  /* see .hero__model: a filter plus a mask on one element is a Chromium
     compositing trap, so the shadow lives in .festival__ground instead */
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%);
}
/* the same three-layer grounding as the hero — contact shadow, cast
   shadow, then a light pool larger than both — on the section's own
   deeper floor tone, so the bust reads as standing rather than pasted */
.festival__ground {
  position: absolute;
  z-index: 1;
  left: 50%; bottom: -12%;
  width: min(190%, 92vw);
  height: 34%;
  translate: -50% 0;
  pointer-events: none;
  background:
    radial-gradient(24% 22% at 50% 64%, rgba(44, 22, 86, .46), rgba(44, 22, 86, .16) 52%, rgba(44, 22, 86, 0) 78%),
    radial-gradient(40% 34% at 50% 66%, rgba(44, 22, 86, .20), rgba(44, 22, 86, .05) 56%, rgba(44, 22, 86, 0) 82%),
    radial-gradient(50% 28% at 50% 70%, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .86) 40%, rgba(255, 255, 255, .35) 68%, rgba(255, 255, 255, 0) 92%);
}
.festival__ground::after {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 68%;
  height: 1px;
  background: linear-gradient(90deg, rgba(44, 22, 86, 0), rgba(44, 22, 86, .30) 16%, rgba(44, 22, 86, .30) 84%, rgba(44, 22, 86, 0));
}

.festival__side { display: flex; flex-direction: column; align-items: center; gap: 22px; z-index: 3; }
.festival__side p { font-size: var(--fs-body); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; line-height: 1.65; max-width: 38ch; }

/* ============================= 9. FOOTER =========================== */
.footer__glow {
  position: absolute; left: 50%; top: -14%;
  width: 120%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22), transparent 60%);
  pointer-events: none;
}

/* the wordmark is now set on saturated violet, and the yellow disc is
   aligned to its cap height and overlapping its last letters, so the
   two read as one composed lockup instead of a badge sitting nearby */
.footer__brand { position: relative; }
.footer__watermark {
  position: relative;
  display: block; width: 100%; height: auto;
  overflow: visible;
  margin-bottom: clamp(22px, 3vw, 44px);
}
.footer__circle {
  position: absolute; display: none;
  right: clamp(-22px, -1.3vw, -8px);
  top: 50%; translate: 0 -50%;
  z-index: 3;
}

.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 42px); position: relative; }
.footer__col h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1rem, 1.2vw, 1.2rem); letter-spacing: .04em; margin-bottom: 13px; color: var(--white); }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.footer__col a { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-body); text-decoration: none; color: rgba(255, 255, 255, .76); transition: color .2s var(--ease-soft); }
.footer__col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.soc { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; transition: background-color .24s var(--ease-soft); }
.soc svg { width: 14px; height: 14px; fill: none; stroke: var(--white); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer__col a:hover .soc { background: var(--acid); }
.footer__col a:hover .soc svg { stroke: var(--ink); }
.footer__social li:first-child .soc { background: var(--marigold); }
.footer__social li:first-child .soc svg { stroke: var(--ink); }

.footer__bar {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  margin-top: clamp(24px, 3vw, 42px); padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: var(--fs-ui); color: rgba(255, 255, 255, .7);
}
.footer__legal { display: inline-flex; gap: 10px; align-items: center; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }

/* ============================== toast ============================== */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 300;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: var(--white);
  padding: 13px 20px; border-radius: var(--pill);
  font-size: var(--fs-ui); font-weight: 600; letter-spacing: var(--tr-chip);
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease-soft), transform .26s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================== 10,000ft: hero entrance choreography =========== */
.hero__title span { animation: heroLine 1s var(--ease-out) .08s both; }
.hero__title span:nth-child(2) { animation-delay: .18s; }
.hero__figure { animation: heroFigure 1.2s var(--ease-out) .12s both; }
.hero__decor > * { animation: heroDecor .9s var(--ease-out) both; }
.hero__decor > *:nth-child(1) { animation-delay: .34s; }
.hero__decor > *:nth-child(2) { animation-delay: .42s; }
.hero__decor > *:nth-child(3) { animation-delay: .5s; }
.hero__card { animation: heroDecor .9s var(--ease-out) .46s both; }

@keyframes heroLine { from { opacity: 0; transform: translateY(.42em); } to { opacity: 1; transform: none; } }
@keyframes heroFigure { from { opacity: 0; transform: translateY(26px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes heroDecor { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================== scroll reveal ========================= */
/* Staggered: script.js sets --i per item within its grid, so a row of
   cards arrives as a sequence instead of a single block. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-soft) calc(var(--i, 0) * 70ms),
              transform .85s var(--ease-out) calc(var(--i, 0) * 70ms);
}

/* ============================== ≥ 600px ============================ */
@media (min-width: 600px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__circle { display: inline-flex; }
}

/* ============================== ≥ 900px ============================ */
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The stage is the floor plan: the headline is centred in it and the
     figure is anchored to its bottom at half its height. Because the
     centred two-line block occupies exactly the upper half, half the
     stage is exactly the depth at which the figure's head clears line 1
     and rises behind line 2 — the reference's composition. */
  .hero__stage { min-height: clamp(520px, 58vw, 880px); }

  .hero__figure {
    position: absolute;
    left: 50%; bottom: 0;
    /* 51% is the depth at which the top of the head lands on line 1's
       baseline, i.e. the whole head sits behind line 2 only. From the
       centred block: baseline = (S − 1.64·fs)/2 + 0.776·fs, so the
       figure's height is S/2 + 0.044·fs — 51% of the stage for every
       width where both clamps track vw. */
    height: 51%;
    --fig-x: -50%;
    margin-bottom: 0;
  }
  .hero__model { width: auto; height: 100%; }

  .hero__decor { position: absolute; inset: 0; display: block; width: auto; margin: 0; pointer-events: none; }
  .hero__decor > * { position: absolute; pointer-events: auto; }
  .hero__badge { left: 0; top: 10%; }
  .hero__sale { right: 0; top: 3%; }
  .hero__meta { left: 0; bottom: 5%; width: min(300px, 24%); margin-top: 0; }
  .hero__card { position: absolute; right: 0; bottom: 1%; width: clamp(158px, 15vw, 202px); margin-top: 0; }

  .filterbar__list { justify-content: center; }

  .collage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr); }
  .collage__item--left { translate: 0 var(--par-y, -14px); }
  .collage__item--right { translate: 0 calc(var(--par-y, 14px) * -1); }

  /* festival: headline and copy in column one, the bust rising from the
     floor of column two — no figure sitting on top of the words.
     The figure stretches to the grid area so it can never overflow the
     section and get clipped at the top. */
  .festival {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    grid-template-rows: auto 1fr;
    min-height: clamp(430px, 33vw, 500px);
    text-align: left; justify-items: start; align-items: start;
  }
  .festival__title { grid-area: 1 / 1 / 2 / 2; align-self: start; }
  .festival__figure {
    grid-area: 1 / 2 / 3 / 3;
    justify-self: center;
    align-self: stretch;
    width: auto;
    margin-bottom: 0;
  }
  .festival__figure img { height: 100%; width: auto; margin-inline: auto; }
  .festival__side { grid-area: 2 / 1 / 3 / 2; align-items: flex-start; align-self: center; }

  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================== ≥ 1000px =========================== */
@media (min-width: 1000px) {
  .nav {
    display: flex; gap: clamp(18px, 2.4vw, 40px);
    justify-self: center;
    font-size: var(--fs-ui); font-weight: 600; letter-spacing: var(--tr-ui); text-transform: uppercase;
  }
  .nav a { text-decoration: none; position: relative; padding: 4px 0; }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; background: var(--ink);
    transition: right .32s var(--ease-out);
  }
  .nav a:hover::after { right: 0; }
  .link-quiet { display: inline-flex; }
  .burger { display: none; }
  .drawer { display: none !important; }
}

/* ============================== ≥ 1200px =========================== */
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wrap { padding-bottom: clamp(56px, 5vw, 92px); }
}

/* ===================== motion preferences ========================== */
@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: 0ms !important;
  }
  .marquee__list { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .hero__sale-ring { animation: none; }
  .marquee__star { display: flex; }
  /* every entrance and reveal resolves to its finished, visible state */
  .hero__title span, .hero__figure, .hero__decor > *, .hero__card { animation: none; opacity: 1; transform: none; }
  html.js .reveal { opacity: 1; transform: none; }
  .hero__figure, .festival__figure { translate: var(--fig-x, 0) 0; }
  .collage__item--left, .collage__item--right { translate: none; }
}

/* ===================== very narrow safety net ====================== */
@media (max-width: 380px) {
  :root { --gutter: 6px; --pad-x: 14px; }
  .hero__sale { width: 82px; }
  .marquee__list li { font-size: 1.05rem; }
}