/* UNITY 2B3 store — mono editorial.
   Every colour is a token. Purple has exactly one job: membership. */

:root {
  --page: #FFFFFF;
  --plate: #F4F3F0;
  --ink: #111111;
  --ink-hover: #000000;
  --ink-muted: #8A8A8A;
  --ink-faint: #C4C1BC;
  --rule: #ECECEC;
  --member: #7B2FBE;

  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cond: 'Barlow Condensed', var(--font-body);

  --gap-grid: 28px;
  --shell: 1440px;

  --t-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-image: 400ms ease;
}

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

/* clip rather than hidden: hidden on the root turns it into a scroll container,
   which breaks position:sticky on the header. This exists because the page
   transition scales the content past 1.0 for a moment, and without it the
   overflow flicks a horizontal scrollbar in and out on every arrival. */
html { overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--member); outline-offset: 3px; }

/* No max-width: the shell now runs to the viewport and each page caps itself
   where it needs to. Gutters are proportional so wide screens breathe. */
.shell { margin: 0 auto; padding: 0 1%; }

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

.label {
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* ---------- announcement ---------- */

.announce {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  background: var(--ink); color: var(--page);
  font-family: var(--font-cond); font-size: 14px; letter-spacing: 0.08em;
  padding: 9px 16px;
}
.announce button {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px;
}

/* ---------- nav ---------- */

.nav { border-bottom: 1px solid var(--rule); position: sticky; top: 0;
  background: var(--page); z-index: 30; }
.nav-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 28px; max-width: 1900px; margin: 0 auto; }
.nav-logo { display: block; line-height: 0; }
.nav-logo img { height: 50px; width: auto; display: block; }
.nav-links { display: none; gap: 22px; font-family: var(--font-cond);
  font-size: 16px; letter-spacing: 0.05em; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav-actions { display: flex; gap: 18px; align-items: center; }
.nav-actions button { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-cond); font-size: 16px; letter-spacing: 0.04em; color: var(--ink); }

/* ---------- grid ---------- */

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (min-width: 720px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-empty { grid-column: 1 / -1; color: var(--ink-muted); padding: 40px 0 80px; }

/* ---------- product card ---------- */

.card { display: block; opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base); }
.card.is-in { opacity: 1; transform: none; }
/* Cutouts must not scale, so the whole card lifts instead — motion without
   distorting the garment against its plate. */
.card.is-in:hover { transform: translateY(-6px); }

.card-plate { position: relative; background: var(--plate); aspect-ratio: 4 / 5; overflow: hidden; }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card-img-b { opacity: 0; transition: opacity var(--t-image); }
.card:hover .card-img-b { opacity: 1; }

.card-badge { position: absolute; top: 12px; left: 12px; background: var(--page);
  font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.06em; padding: 3px 10px; }

.card-fav { position: absolute; top: 9px; right: 9px; background: none; border: 0;
  font-size: 19px; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px;
  opacity: 0; transition: opacity var(--t-fast); }
.card:hover .card-fav, .card-fav:focus-visible { opacity: 1; }
.card-fav.is-on { opacity: 1; color: var(--member); }

.card-sizes { position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.94); display: flex; justify-content: center; gap: 14px;
  padding: 8px 0; font-family: var(--font-cond); font-size: 14px;
  transform: translateY(100%); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.card:hover .card-sizes { transform: none; }
.size-cell.is-out { color: var(--ink-faint); text-decoration: line-through; }

/* Clip sits over the plate. object-fit is contain to match the still: these are
   cutouts, so cover would crop the garment. */
.card-motion { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
.card.is-playing .card-motion { opacity: 1; }
.card.is-playing .card-img-b { opacity: 0; }

.card-name { font-size: 15px; margin-top: 11px; }
.card-meta { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.card-price { font-size: 14px; margin-top: 6px; }
.card-was { color: var(--ink-faint); margin-left: 7px; }
.card-member { font-size: 13px; color: var(--member); margin-top: 2px; }

/* ---------- category page ---------- */

.cat-head { padding: 40px 0 26px; }
.cat-title { font-family: var(--font-cond); font-size: 36px; font-weight: 600;
  letter-spacing: 0.01em; margin: 0; }
.cat-count { color: var(--ink-muted); font-size: 14px; margin: 4px 0 0; }
.cat-body { display: block; padding-bottom: 80px; }
@media (min-width: 900px) {
  .cat-body.has-filters { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 44px; }
}
.filters fieldset { border: 0; border-top: 1px solid var(--rule); padding: 14px 0; margin: 0; }
.filters legend { padding: 0; }
.filters label { display: block; font-size: 14px; padding: 4px 0; cursor: pointer; }

/* ---------- product page ---------- */

.crumbs { font-size: 13px; color: var(--ink-muted); padding: 18px 0; }
@media (min-width: 1080px) { .pdp-panel .crumbs { padding: 0 0 10px; } }
.crumbs a:hover { color: var(--ink); }

.pdp-grid { display: grid; grid-template-columns: 1fr; gap: 22px; padding-bottom: 70px; }

/* Below 1080px this stays an ordinary stacked page that scrolls as one. A
   viewport-locked layout on a phone fights the browser chrome appearing and
   disappearing, and there is no hover there for the zoom anyway. */
@media (min-width: 1080px) {
  main[data-pdp].shell { max-width: 1860px; }

  .pdp-grid {
    /* Proportional rather than fixed: the three columns keep their relationship
       to each other as the viewport grows, instead of the image column taking
       every extra pixel. */
    grid-template-columns: 10% 50% 38%;
    justify-content: center;
    gap: 0 2%;
    padding: 1% 1% 0;
    width: 100%;
    max-width: 100%;
    /* --pdp-top is measured in gallery.js: the announcement bar is dismissible,
       so the distance from the top of the viewport is not a constant. */
    height: calc(100vh - var(--pdp-top, 150px));
  }
  /* min-height:0 lets a grid child actually scroll. Without it the child is
     floored at its content height and the overflow silently never happens. */
  .pdp-thumbs, .pdp-stage, .pdp-panel { min-height: 0; }
}

/* ---------- pdp gallery ---------- */

.pdp-stage {
  position: relative; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pdp-media-el { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (min-width: 1080px) {
  /* The stage is sized by the photo, so it is usually narrower than its
     column. `center` first as the fallback that works everywhere, then
     anchor-center for browsers that support anchor positioning. */
  .pdp-stage {
    height: 100%; aspect-ratio: 4 / 5; width: auto;
    justify-self: center;
    justify-self: anchor-center;
  }
  .pdp-media-el { max-height: 100%; }
}
@media (max-width: 1079px) { .pdp-stage { aspect-ratio: 4 / 5; } }

.pdp-thumbs { display: flex; gap: 10px; }
@media (min-width: 1080px) {
  .pdp-thumbs {
    flex-direction: column; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; padding-right: 4px;
  }
}
@media (max-width: 1079px) {
  .pdp-thumbs { order: 2; overflow-x: auto; padding-bottom: 4px; }
  .pdp-thumbs .pdp-thumb { flex: 0 0 64px; }
}

.pdp-thumb {
  position: relative; flex: 0 0 auto; padding: 0; cursor: pointer;
  background: var(--plate); border: 1px solid transparent; width: 100%;
  aspect-ratio: 4 / 5; overflow: hidden;
  transition: border-color var(--t-fast), opacity var(--t-fast);
  opacity: 0.62;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb.is-on { opacity: 1; border-color: var(--ink); }

/* A play glyph drawn in CSS rather than shipped as an asset — it is a triangle. */
.pdp-thumb-play {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: translate(-40%, -50%);
  border-left: 11px solid var(--page);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
}

@media (min-width: 1080px) {
  .pdp-panel { overflow-y: auto; padding-right: 10px; scrollbar-width: thin; }

  /* Pinned to the top of its own column while the rest of the panel scrolls
     under it. sticky rather than fixed: fixed would leave the flow and need
     hardcoded coordinates, which break the moment the column moves or resizes.
     The opaque background is what stops the scrolling content showing through. */
  .pdp-panel .pdp-name {
    position: sticky; top: 0; z-index: 2;
    background: #FFFFFF; margin: 0;
    padding-bottom: 10px;
  }
  .pdp-panel .pdp-tagline { padding-top: 2rem; }
}

/* ---------- below the fold ---------- */

.pdp-more { padding: 72px 0 90px; display: grid; gap: 64px; }
.rail-head {
  font-family: var(--font-cond); font-weight: 600;
  font-size: 22px; letter-spacing: 0.06em; text-transform: lowercase;
  margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
/* A rail rather than a grid: these are a sideways glance on the way past, not
   a results page, and a wrapping grid would push the next block off the screen. */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: var(--gap-grid); overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 1080px) { .rail { grid-auto-columns: minmax(240px, 1fr); } }

/* ---------- round hover zoom ---------- */

.pdp-lens, .pdp-zoom {
  position: fixed; border-radius: 50%; pointer-events: none;
  opacity: 0; z-index: 40; transition: opacity var(--t-fast);
}
.pdp-lens {
  width: 176px; height: 176px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), inset 0 0 22px rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.08);
}
.pdp-zoom {
  width: 460px; height: 460px;
  background-repeat: no-repeat; background-color: var(--plate);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.45);
}
.pdp-lens.is-on, .pdp-zoom.is-on { opacity: 1; }

/* No hover to speak of, so the whole apparatus is dead weight. */
@media (max-width: 1079px), (hover: none), (pointer: coarse) {
  .pdp-lens, .pdp-zoom { display: none; }
}

/* The panel was sticky when this page was two columns that scrolled together.
   It now either fills a fixed-height column and carries its own scroll (>=1080)
   or sits in a stacked page that scrolls as one -- sticky is wrong for both, and
   align-self:start left it 150px short of its own column. */
@media (min-width: 1080px) { .pdp-panel { align-self: stretch; } }
.pdp-name { font-family: var(--font-cond); font-size: 32px; font-weight: 600;
  line-height: 1.1; margin: 0; }
.pdp-tagline { color: var(--ink-muted); font-size: 14px; margin: 5px 0 0; }
.pdp-price { font-size: 21px; margin-top: 16px; }
.pdp-was { color: var(--ink-faint); font-size: 16px; margin-left: 8px; }
.pdp-member { font-size: 14px; color: var(--member); margin-top: 3px; }

.pdp-field { margin-top: 22px; }
.pdp-field-head { display: flex; justify-content: space-between; align-items: baseline; }
.link { background: none; border: 0; padding: 0; font-family: var(--font-body);
  font-size: 13px; text-decoration: underline; cursor: pointer; color: var(--ink); }

.swatches { display: flex; gap: 10px; margin-top: 9px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule);
  padding: 0; cursor: pointer; }
.swatch.is-on { outline: 1px solid var(--ink); outline-offset: 2px; }

.sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 7px; margin-top: 9px; }
.size { background: none; border: 1px solid var(--rule); padding: 11px 0;
  font-family: var(--font-body); font-size: 13px; cursor: pointer; color: var(--ink); }
.size.is-on { background: var(--ink); color: var(--page); border-color: var(--ink); }
.size.is-out { color: var(--ink-faint); text-decoration: line-through; cursor: not-allowed; }
.sizes.needs-pick { outline: 1px solid var(--member); outline-offset: 5px; }

.btn { display: block; width: 100%; background: var(--ink); color: var(--page);
  border: 0; padding: 15px; font-family: var(--font-body); font-size: 14px;
  letter-spacing: 0.02em; cursor: pointer; margin-top: 18px; }
.btn:hover { background: var(--ink-hover); }

.pdp-fulfil { font-size: 13px; color: var(--ink-muted); margin: 10px 0 0; }

.acc { margin-top: 24px; border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-item summary { padding: 14px 0; font-size: 14px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: '+'; color: var(--ink-muted); font-size: 17px; }
.acc-item[open] summary::after { content: '\2212'; }
.acc-body { padding-bottom: 16px; font-size: 14px; color: var(--ink-muted); }
.acc-body ul { margin: 8px 0 0; padding-left: 18px; }

/* ---------- mobile buy bar and size sheet ---------- */

.buybar { display: none; }
@media (max-width: 899px) {
  .buybar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--page); border-top: 1px solid var(--rule); padding: 10px 16px 14px; }
  .buybar .btn { margin-top: 8px; }
  .pdp-panel > .btn, .pdp-panel > .pdp-fulfil { display: none; }
  body.has-buybar { padding-bottom: 116px; }
}

.sheet-scrim { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.32); z-index: 46; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 47; background: var(--page);
  border-radius: 14px 14px 0 0; padding: 14px 16px 26px; }
.sheet-grip { width: 36px; height: 3px; background: var(--ink-faint); border-radius: 2px;
  margin: 0 auto 14px; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; }
.sheet-size { display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: 14px 2px; font-family: var(--font-body); font-size: 15px;
  color: var(--ink); cursor: pointer; }
.sheet-size.is-out { color: var(--ink-faint); cursor: not-allowed; }
.sheet-note { font-size: 13px; color: var(--ink-muted); }

/* ---------- drawers ---------- */

.scrim { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.32);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base); z-index: 40; }
.scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--page); border-left: 1px solid var(--rule); z-index: 50;
  transform: translateX(100%); transition: transform var(--t-base);
  display: flex; flex-direction: column; }
.drawer.is-open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center;
  padding: 20px; border-bottom: 1px solid var(--rule); }
.drawer-head button { background: none; border: 0; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-foot { padding: 20px; border-top: 1px solid var(--rule); }

.cart-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); }
.cart-line img { background: var(--plate); width: 76px; height: 95px; object-fit: contain; }
.cart-line-name { font-size: 14px; }
.cart-line-meta { font-size: 13px; color: var(--ink-muted); }
.cart-line-remove { background: none; border: 0; padding: 5px 0; font-size: 13px;
  color: var(--ink-muted); text-decoration: underline; cursor: pointer; }
.cart-line-price { font-size: 14px; white-space: nowrap; }
.cart-empty { color: var(--ink-muted); }
.cart-sub { display: flex; justify-content: space-between; font-size: 15px; margin: 0 0 4px; }
.soon { font-size: 13px; color: var(--member); margin: 12px 0 0; }

.wish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- home ---------- */

.triptych { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); }
@media (min-width: 720px) { .triptych { grid-template-columns: repeat(3, 1fr); } }
/* No CSS scale on the doors. The clip already contains its own slow push-in,
   so a transform here would stack two zooms and read as overdone. The only
   hover motion is the video itself, cross-fading in over the still. */
.door { position: relative; display: block; background: var(--plate); overflow: hidden; }
.door img { width: 100%; aspect-ratio: 3 / 4; max-height: 35vw; object-fit: cover; }

/* Motion clip sits over the still and only becomes visible once it is actually
   playing, so a slow network or a 404 simply leaves the still in place. */
.door-motion { position: absolute; inset: 0; width: 100%; height: 100%;
  max-height: 35vw; object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity 320ms ease; }
.door.is-playing .door-motion { opacity: 1; }
.door-label { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: var(--page); font-family: var(--font-cond); font-size: 18px;
  letter-spacing: 0.06em; padding: 12px 36px; white-space: nowrap; }
.door:hover .door-label { background: var(--ink); color: var(--page); }
.door-missing { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; background: var(--plate); color: var(--ink-faint); font-size: 14px; }

.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  padding: 46px 28px; border-bottom: 1px solid var(--rule);
  max-width: var(--shell); margin: 0 auto; }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust div { display: flex; flex-direction: column; }
.trust strong { font-family: var(--font-cond); font-size: 17px; letter-spacing: 0.06em;
  font-weight: 600; }
.trust span { font-size: 14px; color: var(--ink-muted); }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 70px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tiles a { background: var(--plate); font-family: var(--font-cond); font-size: 18px;
  letter-spacing: 0.05em; padding: 30px;
  transition: background var(--t-fast), transform var(--t-fast); }
.tiles a:hover { background: var(--rule); transform: translateY(-3px); }

.section-head { font-family: var(--font-cond); font-size: 28px; font-weight: 600;
  margin: 54px 0 22px; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--rule); padding: 40px 28px 60px; }
.foot-inner { max-width: var(--shell); margin: 0 auto; display: flex;
  flex-wrap: wrap; gap: 28px; justify-content: space-between;
  font-size: 14px; color: var(--ink-muted); }
.foot a:hover { color: var(--ink); }

/* ---------- motion ---------- */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- collections ---------- */

.cat-strapline { font-family: var(--font-cond); font-size: 19px; letter-spacing: 0.04em;
  color: var(--ink-muted); margin: 6px 0 0; }

.col-list { display: flex; flex-direction: column; }

/* Full-bleed editorial rows, alternating side, each one its own world. */
.col-row { position: relative; display: grid; grid-template-columns: 1fr;
  align-items: stretch; overflow: hidden; }
@media (min-width: 900px) {
  .col-row { grid-template-columns: 1.35fr 1fr; min-height: 88vh; }
  .col-row:nth-child(even) .col-media { order: 2; }
}

.col-media { display: block; overflow: hidden; background: var(--plate); }
/* cover, not contain: these are editorial frames, not cutouts on a plate. */
.col-media img { width: 100%; height: 100%; min-height: 52vh; object-fit: cover;
  transform: scale(1.01);
  transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.col-row:hover .col-media img { transform: scale(1.06); }
.col-media-empty { min-height: 52vh; background: var(--plate); }

.col-copy { display: flex; flex-direction: column; justify-content: center;
  padding: 68px 52px; max-width: 60ch; }
.col-eyebrow { font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 18px; }
.col-name { font-family: var(--font-cond); font-size: clamp(40px, 6vw, 76px); font-weight: 600;
  line-height: 0.98; letter-spacing: -0.005em; margin: 0; text-wrap: balance; }
.col-strap { font-family: var(--font-cond); font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.02em; margin: 16px 0 0; }
.col-desc { font-size: 15.5px; line-height: 1.75; color: var(--ink-muted);
  margin: 22px 0 0; max-width: 46ch; }
.col-cta { display: inline-block; align-self: flex-start; margin-top: 32px;
  font-family: var(--font-cond); font-size: 16px; letter-spacing: 0.08em;
  text-transform: lowercase; padding-bottom: 5px; position: relative; }
.col-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform-origin: left;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1); }
.col-row:hover .col-cta::after { transform: scaleX(0.4); }

/* Copy reveals as the row enters view — staggered so the eye reads name,
   strapline, then detail rather than taking the block in at once. */
.col-copy > * { opacity: 0; transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1), transform 700ms cubic-bezier(0.22,0.61,0.36,1); }
.col-row.is-revealed .col-copy > * { opacity: 1; transform: none; }
.col-row.is-revealed .col-copy > *:nth-child(1) { transition-delay: 60ms; }
.col-row.is-revealed .col-copy > *:nth-child(2) { transition-delay: 150ms; }
.col-row.is-revealed .col-copy > *:nth-child(3) { transition-delay: 240ms; }
.col-row.is-revealed .col-copy > *:nth-child(4) { transition-delay: 330ms; }
.col-row.is-revealed .col-copy > *:nth-child(5) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .col-copy > * { opacity: 1; transform: none; }
}

/* Each collection carries its own visual world. 'mono' is the store's default
   language and needs no overrides. */
[data-theme-block="gold"] { background: #0C0C0C; color: #F5F1E6; }
[data-theme-block="gold"] .col-media { background: #0C0C0C; }
[data-theme-block="gold"] .col-eyebrow,
[data-theme-block="gold"] .col-desc { color: #A99668; }
[data-theme-block="gold"] .col-strap { color: #C8A84B; }

[data-theme-block="blackout"] { background: #0E0E0E; color: #EDEDED; }
[data-theme-block="blackout"] .col-media { background: #141414; }
[data-theme-block="blackout"] .col-eyebrow,
[data-theme-block="blackout"] .col-desc { color: #8A8A8A; }
[data-theme-block="blackout"] .col-strap { color: #FFFFFF; }

/* A collection page inherits the same world, so the grid does not snap back to
   white the moment you step inside the collection. */
body[data-collection-theme="blackout"],
body[data-collection-theme="gold"] {
  --page: #111111; --plate: #1A1A1A; --ink: #EDEDED; --ink-muted: #8A8A8A;
  --ink-faint: #5A5A5A; --rule: #2A2A2A; --ink-hover: #FFFFFF;
}
body[data-collection-theme="gold"] {
  --page: #0C0C0C; --plate: #151310; --ink: #F5F1E6; --ink-muted: #A99668;
  --ink-faint: #6B5F42; --rule: #2A241A; --member: #C8A84B;
}
body[data-collection-theme="blackout"] .nav-logo img,
body[data-collection-theme="gold"] .nav-logo img { filter: invert(1); }
body[data-collection-theme="blackout"] .announce,
body[data-collection-theme="gold"] .announce { background: var(--plate); color: var(--ink); }

/* ---------- logo intro ---------- */

.intro {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--page);
  display: grid; place-items: center;
}
.intro img {
  width: min(46vw, 520px); height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* The ground fades a beat after the mark starts moving, so the mark is still
   readable as it lands rather than dissolving on the way. */
.intro.is-out { opacity: 0; pointer-events: none; transition: opacity 420ms ease 300ms; }

body.intro-lock { overflow: hidden; }
/* The nav mark is the landing point, so it stays out of sight until the flying
   one has arrived on top of it. */
body.intro-lock .nav-logo img { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- gender landing pages ---------- */

.lp-hero { position: relative; overflow: hidden; background: var(--plate); }
.lp-hero-media { position: relative; height: min(76vh, 720px); }
.lp-hero-media img,
.lp-hero-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
}
/* The clip fades in over its own poster frame, so there is never a black gap
   between the still and the first painted frame. */
.lp-hero-vid { opacity: 0; transition: opacity 600ms ease; }
.lp-hero-vid.is-on { opacity: 1; }

/* Scrim only under the copy column, so the image stays honest everywhere else. */
.lp-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0) 68%);
}

.lp-hero-copy {
  position: absolute; z-index: 1; left: 0; bottom: 0;
  padding: 0 28px 54px; max-width: min(620px, 92%);
  color: #FFFFFF;
}
.lp-eyebrow {
  margin: 0 0 12px; font-family: var(--font-cond); font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.78);
}
.lp-title {
  margin: 0 0 14px; font-family: var(--font-cond); font-weight: 600;
  font-size: clamp(46px, 9vw, 104px); line-height: 0.94; letter-spacing: 0.005em;
}
.lp-strap {
  margin: 0 0 26px; font-size: clamp(17px, 2.2vw, 21px); font-weight: 300;
  line-height: 1.4; max-width: 30ch; color: rgba(255,255,255,0.92);
}
.lp-cta {
  display: inline-block; padding: 13px 30px;
  background: var(--page); color: var(--ink);
  font-family: var(--font-cond); font-size: 16px; letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.lp-cta:hover { background: var(--ink); color: var(--page); }

/* Hero copy staggers in once the frame behind it has loaded. */
.lp-hero [data-r] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 620ms cubic-bezier(0.19, 1, 0.22, 1),
              transform 620ms cubic-bezier(0.19, 1, 0.22, 1);
}
.lp-hero [data-r]:nth-child(1) { transition-delay: 80ms; }
.lp-hero [data-r]:nth-child(2) { transition-delay: 170ms; }
.lp-hero [data-r]:nth-child(3) { transition-delay: 260ms; }
.lp-hero [data-r]:nth-child(4) { transition-delay: 350ms; }
.lp-hero.is-revealed [data-r] { opacity: 1; transform: none; }

.lp-sec { padding: 74px 28px 0; }
.lp-sec:last-of-type { padding-bottom: 90px; }
.lp-h2 {
  margin: 0 0 28px; font-family: var(--font-cond); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px); letter-spacing: 0.02em;
}

/* Sections lift in as they arrive. Nothing is hidden by the stylesheet alone:
   JS adds .will-reveal immediately before it starts observing, so if the script
   never runs, or the observer never fires, the content is simply there. Hiding
   content in CSS and depending on a callback to bring it back is how a page
   ends up blank. The product grid is deliberately not gated this way -- its
   cards already stagger themselves as they render. */
.lp-sec.will-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 620ms var(--t-base), transform 620ms var(--t-base);
}
.lp-sec.will-reveal.is-revealed { opacity: 1; transform: none; }

.lp-rail {
  display: grid; gap: var(--gap-grid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px)  { .lp-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .lp-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.lp-tile { display: block; }
.lp-tile-media {
  display: block; overflow: hidden; background: var(--plate);
  aspect-ratio: 4 / 5; margin-bottom: 11px;
}
.lp-tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-image);
}
.lp-tile:hover .lp-tile-media img { transform: scale(1.05); }
.lp-tile-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--font-cond); font-size: 17px; letter-spacing: 0.04em;
}
.lp-tile-name { border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
.lp-tile:hover .lp-tile-name { border-bottom-color: var(--ink); }
.lp-tile-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.lp-cols { display: grid; gap: var(--gap-grid); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .lp-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-col { display: block; position: relative; overflow: hidden; background: var(--ink); }
.lp-col-media { display: block; aspect-ratio: 4 / 5; }
.lp-col-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms var(--t-base), opacity var(--t-fast);
  opacity: 0.86;
}
.lp-col:hover .lp-col-media img { transform: scale(1.045); opacity: 0.72; }
.lp-col-body {
  position: absolute; inset: auto 0 0 0; padding: 24px 24px 26px;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0,0,0,0.66), rgba(0,0,0,0));
}
.lp-col-name {
  display: block; font-family: var(--font-cond); font-size: 24px; letter-spacing: 0.03em;
}
.lp-col-strap {
  display: block; margin-top: 4px; font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,0.86);
}
.lp-col-go {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  transform: translateY(6px); opacity: 0;
  transition: transform var(--t-base), opacity var(--t-base);
}
.lp-col:hover .lp-col-go { transform: none; opacity: 1; }
/* Touch has no hover, so the affordance must not be hover-only there. */
@media (hover: none) { .lp-col-go { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .lp-hero [data-r], .lp-sec.will-reveal,
  .lp-tile-media img, .lp-col-media img, .lp-col-go, .lp-hero-vid { transition: none; }
  .lp-hero [data-r] { opacity: 1; transform: none; }
  .lp-col-go { opacity: 1; transform: none; }
}

/* ---------- mega menu ---------- */

/* .nav is position:sticky, which is a positioned element, so it already forms
   the containing block for the panel below. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--page);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 26px 44px -30px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.mega.is-open { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 899px) { .mega { display: none; } }

.mega-grid {
  max-width: 1900px; margin: 0 auto; padding: 36px 28px 44px;
  display: grid; grid-template-columns: 0.8fr 1.1fr 1.9fr; gap: 52px;
}
.mega-grid.is-wide { grid-template-columns: 0.8fr 3fr; }

.mega-head {
  margin: 0 0 18px;
  font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}

.mega-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 11px;
  font-family: var(--font-cond); font-size: 17px; letter-spacing: 0.03em;
}
.mega-list.is-rich { gap: 17px; }
.mega-list a { display: inline-block; border-bottom: 1px solid transparent; }
.mega-list a:hover { border-bottom-color: var(--ink); }
.mega-all { margin-top: 6px; }
.mega-all a { color: var(--ink-muted); }
.mega-all a:hover { color: var(--ink); }
.mega-soon { color: var(--ink-muted); font-family: var(--font-body); font-size: 14px; }
.mega-col-name { display: block; }
.mega-col-strap {
  display: block; font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0; line-height: 1.4; color: var(--ink-muted);
}

.mega-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mega-feats.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-feat { display: grid; gap: 9px; align-content: start; }
.mega-feat-media {
  display: block; overflow: hidden; background: var(--plate); aspect-ratio: 4 / 3;
}
.mega-feat-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-image); }
.mega-feat:hover .mega-feat-media img { transform: scale(1.045); }
.mega-feat-empty { display: block; width: 100%; height: 100%; }
.mega-feat-name {
  font-family: var(--font-cond); font-size: 18px; letter-spacing: 0.04em;
}
.mega-feat-strap { font-size: 13px; color: var(--ink-muted); line-height: 1.4; }

/* Text reveal. Scoped to .mega so the same markup rendered into the mobile
   sheet stays visible without needing an open state of its own. */
.mega [data-reveal] {
  opacity: 0; transform: translateY(9px);
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 26ms + 50ms);
}
.mega.is-open [data-reveal] { opacity: 1; transform: none; }
/* Must follow the rule above: equal specificity, and moving between panels
   should land instantly rather than replaying the reveal. */
.mega.is-instant [data-reveal] { transition: none; opacity: 1; transform: none; }

.nav-links a[aria-expanded="true"] { border-bottom-color: var(--ink); }

/* ---------- mobile nav ---------- */

.nav-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 900px) { .nav-burger { display: none; } }

.nav-mobile {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--page); border-top: 1px solid var(--rule);
  box-shadow: 0 26px 44px -30px rgba(0, 0, 0, 0.3);
  max-height: 78vh; overflow-y: auto;
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.nav-mobile.is-open { opacity: 1; transform: none; }
@media (min-width: 900px) { .nav-mobile { display: none; } }

.nav-m-group { border-bottom: 1px solid var(--rule); }
.nav-m-group summary {
  list-style: none; cursor: pointer; padding: 17px 28px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-cond); font-size: 20px; letter-spacing: 0.04em;
}
.nav-m-group summary::-webkit-details-marker { display: none; }
.nav-m-group summary::after { content: "+"; color: var(--ink-muted); font-size: 19px; }
.nav-m-group[open] summary::after { content: "‘2"; }
.nav-m-body { padding: 0 28px 10px; }
.nav-m-body .mega-grid { display: block; padding: 0; }
.nav-m-body .mega-col { margin-bottom: 22px; }
.nav-m-body .mega-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.nav-m-body .mega-feats.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-m-flat {
  display: block; padding: 17px 28px; border-bottom: 1px solid var(--rule);
  font-family: var(--font-cond); font-size: 20px; letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .mega, .nav-mobile, .nav-burger span,
  .mega [data-reveal], .mega-feat-media img { transition: none; }
  .mega [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- pixel page transition ---------- */
/* Port of Codrops PixelTransition demo 3: cells scale 0 -> 1.01 with opacity,
   delayed by their grid distance from the bottom-right cell so the sweep runs
   diagonally. Timing constants live in transition.js. */

:root { --pixel-fill: #111111; --pixel-ease: cubic-bezier(0.45, 0, 0.55, 1); }

/* Arriving through a transition. A module script is deferred, so the incoming
   document would otherwise paint before the grid exists: page, then grid
   slamming on top, then sweep. The inline script in <head> sets this class
   synchronously and transition.js drops it once the grid is opaque, so the
   seam between the two documents is never visible.

   This rule hides the entire page, so the release is guarded by a timer in the
   same inline script that sets it -- see the note there. */
html.pixel-arriving { background: var(--pixel-fill); }
html.pixel-arriving body { opacity: 0; }

/* Leaving: the page scales down to 0.75, so whatever sits behind it becomes
   visible for the length of the sweep. Painted to match the cells, otherwise
   the white page ground shows through as a flash. */
html.pixel-leaving, html.pixel-leaving body { background: var(--pixel-fill); }
body[data-collection-theme="gold"] { --pixel-fill: #0C0C0C; }

.pixel-wrap {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  display: grid;
  grid-template-columns: repeat(var(--pixel-cols), 1fr);
  grid-template-rows: repeat(var(--pixel-rows), 1fr);
  opacity: 1;
}
.pixel-wrap.is-covering { pointer-events: auto; }

.pixel {
  background: var(--pixel-fill);
  transform: scale(0);
  opacity: 0;
  transform-origin: 50% 50%;
  transition: transform 300ms var(--pixel-ease), opacity 300ms var(--pixel-ease);
  will-change: transform, opacity;
}
/* On arrival the page is already hidden, so the covered state has to be committed
   without animating. Transitions are suppressed for that one frame, then switched
   back on so the staggered hide can play. */
.pixel-wrap.is-instant .pixel { transition: none; }

/* 1.01 rather than 1: a hairline overlap so no seam shows between cells. */
.pixel-wrap.is-covering .pixel { transform: scale(1.01); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pixel-wrap { display: none; }
}