:root{--threshold-black:#070707;--threshold-graphite:#101010;--threshold-ivory:#f1eee8;--threshold-muted:#9a9791;--threshold-orange:#ff654d;--threshold-violet:#665cff;--threshold-line:rgba(241,238,232,.12)}
.threshold-door-left{transform-origin:left center!important;transform:translate3d(calc(var(--threshold-open)*-44%),0,0) rotateY(calc(var(--threshold-open)*7deg))!important}.threshold-door-right{transform-origin:right center!important;transform:translate3d(calc(var(--threshold-open)*44%),0,0) rotateY(calc(var(--threshold-open)*-7deg))!important}.threshold-preview .thumb,.threshold-preview img,.threshold-preview video{display:block;width:100%;height:100%;object-fit:cover}.threshold-issue{position:absolute;z-index:5;top:96px;right:28px;font-size:9px;letter-spacing:.18em}.threshold-hero .stats{position:absolute;z-index:5;right:28px;bottom:28px;display:flex;gap:18px}.threshold-hero .stat{padding:0;border:0;background:none;text-align:right}.threshold-hero .stat b{font-size:13px}.threshold-hero .stat span{display:block;color:var(--threshold-muted);font-size:9px;letter-spacing:.12em}
body{background:var(--threshold-black);color:var(--threshold-ivory)}
.site-header{border-color:transparent;background:linear-gradient(to bottom,rgba(7,7,7,.76),transparent);transition:background .3s ease,border-color .3s ease}.site-header.is-scrolled{border-color:var(--threshold-line);background:rgba(7,7,7,.86)}
.threshold-hero{--threshold-x:0;--threshold-y:0;--threshold-open:0;position:relative;min-height:100svh;overflow:clip;isolation:isolate;background:#070707}.threshold-surface{position:absolute;z-index:3;inset:0;pointer-events:none;perspective:1400px}.threshold-door{position:absolute;top:0;bottom:0;width:50.2%;background:linear-gradient(120deg,#0e0e0e,#050505 58%,#111);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}.threshold-door-left{left:0;transform:translate3d(calc(var(--threshold-open)*-44%),0,0)}.threshold-door-right{right:0;transform:translate3d(calc(var(--threshold-open)*44%),0,0)}.threshold-glow{position:absolute;top:-10%;bottom:-10%;left:50%;width:clamp(3px,calc(3px + var(--threshold-open)*74vw),74vw);transform:translateX(-50%);background:linear-gradient(180deg,var(--threshold-violet),#ffe1b5 48%,var(--threshold-orange));filter:blur(calc(2px + var(--threshold-open)*28px));opacity:calc(.78 - var(--threshold-open)*.3)}.threshold-preview{position:absolute;z-index:1;inset:clamp(72px,10vh,112px) clamp(5vw,9vw,150px) clamp(64px,8vh,96px) 42%;border:1px solid rgba(255,255,255,.12);background:#0b0b0b;transform:translate3d(calc(var(--threshold-x)*8px),calc(var(--threshold-y)*8px),0) scale(calc(.9 + var(--threshold-open)*.1))}.threshold-copy{position:absolute;z-index:5;left:28px;bottom:7vh;width:min(810px,64vw)}.threshold-copy h1{margin:0;font-size:clamp(64px,9vw,148px);line-height:.82;letter-spacing:-.082em}.threshold-copy .hero-copy{width:min(560px,80%);margin-top:26px;color:var(--threshold-muted)}.hero-actions{display:flex;gap:12px;margin-top:25px}.primary-link,.secondary-link{min-height:46px;display:inline-flex;align-items:center;padding:0 18px;border-radius:3px;text-decoration:none}.primary-link{background:var(--threshold-ivory);color:#090909}.secondary-link{border:1px solid var(--threshold-line);color:var(--threshold-ivory)}.crossing{height:18svh;display:grid;place-items:center;border-block:1px solid var(--threshold-line);color:#6e6b67;font-size:9px;letter-spacing:.22em}
.curated-section{padding-block:clamp(72px,8vw,112px) clamp(52px,6vw,88px)}.archive-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.38fr);gap:32px;align-items:end;padding-block:clamp(46px,5vw,72px) clamp(28px,3vw,42px);border-top:1px solid var(--threshold-line)}.archive-intro h2{margin:12px 0 0;font-size:clamp(48px,7vw,96px);line-height:.88;letter-spacing:-.065em}.archive-intro>p{max-width:360px;margin:0;color:var(--threshold-muted)}
.threshold-hero > .threshold-preview{position:absolute;inset:clamp(72px,10vh,112px) clamp(5vw,9vw,150px) clamp(64px,8vh,96px) 42%;width:auto;height:auto;aspect-ratio:auto;z-index:1}.threshold-hero > .threshold-preview .thumb{width:100%;height:100%;aspect-ratio:auto}.threshold-hero > .threshold-preview img,.threshold-hero > .threshold-preview video{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.threshold-hero > .threshold-preview{position:relative;inset:auto;order:1;width:100%;height:auto;aspect-ratio:4/3;transform:none}.threshold-hero > .threshold-preview .thumb{width:100%;height:100%;aspect-ratio:auto}.threshold-hero{overflow-x:hidden}.threshold-copy{position:relative;left:auto;bottom:auto;width:auto;order:2}}
@media (max-width: 1199px){.threshold-preview{left:34%;right:28px}.threshold-copy{width:min(760px,72vw)}}
@media (max-width: 767px){.wrap,.section-heading-row{padding-inline:18px}.site-header nav a:not(.header-enter),.site-header .catalog-total{display:none}.threshold-hero{min-height:100svh;display:flex;flex-direction:column;padding:76px 18px 24px}.threshold-surface{opacity:.55}.threshold-door{transform:none}/* CTA-first mobile art direction keeps the primary action in the initial viewport. */.threshold-preview{position:relative;inset:auto;order:1;width:100%;aspect-ratio:4/3;transform:none}.threshold-copy{position:relative;inset:auto;z-index:5;order:2;width:100%;margin-top:-36%}.threshold-copy h1{font-size:clamp(52px,16vw,76px);line-height:.88}.threshold-copy .hero-copy{width:100%;font-size:13px}.threshold-hero .stats{position:relative;inset:auto;order:3;display:grid;grid-template-columns:repeat(4,1fr);width:100%;margin-top:28px}.threshold-issue{top:78px;right:18px}.crossing{height:12svh}.curated-section{padding-block:80px 64px}.archive-intro{grid-template-columns:1fr;gap:18px;padding-block:42px 24px}.hero-actions{align-items:stretch;flex-direction:column}.primary-link,.secondary-link{width:100%;min-height:48px}}
@media (prefers-reduced-motion: reduce){.threshold-door,.threshold-preview,.featured-track{animation:none!important;transform:none!important;transition-duration:.01ms!important}.threshold-glow{width:38vw;filter:blur(20px);opacity:.32}.crossing{display:none}}

/* B2.3 fluid hero: the core geometry stays fixed while the perimeter reveals more work. */
.threshold-hero {
  --threshold-x: 0;
  --threshold-y: 0;
  position: relative;
  display: block;
  min-height: 100svh;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 16%, rgba(118, 103, 255, .12), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(255, 101, 77, .1), transparent 30%),
    #191918;
}
.hero-wall {
  position: absolute;
  z-index: 1;
  inset: 68px -3vw 0;
  transform-origin: 52% 50%;
  animation: hero-wall-drift 18s ease-in-out infinite alternate;
}
.hero-wall-tile {
  position: absolute;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 0;
  background: #242422;
  color: var(--threshold-ivory);
  box-shadow: 0 24px 52px rgba(0, 0, 0, .34);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, filter .25s ease;
}
.hero-wall-tile:hover,
.hero-wall-tile:focus-visible { border-color: rgba(255, 255, 255, .58); filter: brightness(1.06); }
.hero-wall-tile .thumb,
.hero-wall-tile img,
.hero-wall-tile video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}
.hero-wall-tile .thumb { aspect-ratio: auto; transform: none !important; box-shadow: none; }
.hero-wall-tile img,
.hero-wall-tile video { filter: saturate(1.02) contrast(1.025) brightness(1.05); }
.hero-wall-tile::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 63% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .64));
  pointer-events: none;
}
.hero-wall-label {
  position: absolute;
  z-index: 4;
  left: 11px;
  bottom: 9px;
  font-size: 9px;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px #000;
}
.hero-slot-1 { left: -4%; top: 1%; width: 40%; height: auto; aspect-ratio: 1.25; }
.hero-slot-2 { left: 35%; top: 0; width: 35%; height: auto; aspect-ratio: 1.35; }
.hero-slot-3 { left: 69%; top: 1%; width: 35%; height: auto; aspect-ratio: 1.35; }
.hero-slot-4 { left: 35%; bottom: 1%; width: 65%; height: auto; aspect-ratio: 1.7; }
.hero-slot-5,
.hero-slot-6,
.hero-slot-7,
.hero-slot-8 { display: none; }
.threshold-copy {
  position: absolute;
  z-index: 5;
  left: 28px;
  bottom: 6vh;
  width: min(810px, 64vw);
  margin: 0;
  padding: 0;
}
.threshold-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8vw;
  bottom: -10vh;
  width: min(980px, 76vw);
  height: 62vh;
  background: radial-gradient(ellipse at 24% 78%, rgba(3, 3, 3, .94) 0, rgba(6, 6, 6, .72) 40%, rgba(7, 7, 7, .22) 62%, transparent 76%);
  pointer-events: none;
}
.threshold-copy h1 { max-width: 820px; }
.hero-ink-motion {
  color: transparent;
  background: linear-gradient(105deg, #f1eee8 0 22%, #7667ff 40%, #ff654d 56%, #f1eee8 76% 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: hero-ink-flow 14s ease-in-out infinite alternate;
}
.threshold-hero .stats {
  position: absolute;
  z-index: 5;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 18px;
  margin: 0;
}
@keyframes hero-wall-drift {
  from { transform: perspective(1180px) rotateX(1.4deg) rotateZ(2deg) scale(.94); }
  to { transform: perspective(1180px) translate3d(-1%, -1.4%, 0) rotateX(-.5deg) rotateZ(.7deg) scale(.98); }
}
@keyframes hero-ink-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (min-width: 768px) {
  .threshold-copy h1 { font-size: clamp(60px, 7.7vw, 126px); }
}

@media (min-width: 1600px) {
  .hero-slot-1 { left: 2%; top: 2%; width: 34%; height: auto; aspect-ratio: 1.25; }
  .hero-slot-2 { left: 36%; top: 2%; width: 31%; height: auto; aspect-ratio: 1.35; }
  .hero-slot-3 { left: 67%; top: 2%; width: 31%; height: auto; aspect-ratio: 1.35; }
  .hero-slot-4 { left: 36%; bottom: 2%; width: 55%; height: auto; aspect-ratio: 1.7; }
  .hero-slot-5 { display: block; left: -13%; top: 3%; width: 25%; height: 41%; transform: rotate(-7deg); }
  .hero-slot-6 { display: block; right: -14%; bottom: 7%; width: 25%; height: 38%; transform: rotate(7deg); }
}
@media (min-width: 2200px) {
  .hero-slot-1 { left: 14%; top: 4%; width: 28.8%; height: auto; aspect-ratio: 1.25; }
  .hero-slot-2 { left: 42.8%; top: 4%; width: 25.6%; height: auto; aspect-ratio: 1.35; }
  .hero-slot-3 { left: 68.4%; top: 4%; width: 25.6%; height: auto; aspect-ratio: 1.35; }
  .hero-slot-4 { left: 42.8%; bottom: 4%; width: 51.2%; height: auto; aspect-ratio: 1.7; }
  .hero-slot-5 { left: -4%; top: 1%; width: 22%; height: 42%; }
  .hero-slot-6 { right: -5%; bottom: 1%; width: 22%; height: 40%; }
  .hero-slot-7 { display: block; left: 3%; bottom: -11%; width: 22%; height: 37%; transform: rotate(5deg); }
}
@media (min-width: 3200px) {
  .hero-slot-1 { left: 20%; top: 10%; width: 23.04%; height: auto; aspect-ratio: 1.25; }
  .hero-slot-2 { left: 43.04%; top: 10%; width: 20.48%; height: auto; aspect-ratio: 1.35; }
  .hero-slot-3 { left: 63.52%; top: 10%; width: 20.48%; height: auto; aspect-ratio: 1.35; }
  .hero-slot-4 { left: 43.04%; bottom: 10%; width: 40.96%; height: auto; aspect-ratio: 1.7; }
  .hero-slot-5 { left: 0; top: 1%; width: 20%; height: 40%; }
  .hero-slot-6 { right: 0; bottom: 2%; width: 20%; height: 38%; }
  .hero-slot-7 { left: 0; bottom: 0; width: 20%; height: 38%; }
  .hero-slot-8 { display: block; right: 0; top: 0; width: 18%; height: 34%; transform: rotate(-5deg); }
}

@media (max-width: 767px) {
  .threshold-hero { display: block; min-height: 100svh; padding: 0; }
  .hero-wall { inset: 58px 0 0; overflow: hidden; animation: hero-wall-mobile-drift 17s ease-in-out infinite alternate; }
  .hero-slot-1 { left: -8%; top: 5%; width: 72%; height: auto; aspect-ratio: 1.35; transform: rotate(-2deg); }
  .hero-slot-2 { left: auto; right: -12%; top: 9%; width: 58%; height: auto; aspect-ratio: 1.35; transform: rotate(3deg); }
  .hero-slot-3 { left: 2%; top: 32%; width: 82%; height: auto; aspect-ratio: 1.6; transform: rotate(1deg); }
  .hero-slot-4 { left: auto; right: -6%; bottom: 20%; width: 70%; height: auto; aspect-ratio: 1.6; transform: rotate(-3deg); }
  .threshold-copy { position: absolute; left: 18px; bottom: 24px; width: calc(100% - 36px); margin: 0; }
  .threshold-copy::before { left: -22px; bottom: -30px; width: 105vw; height: 58vh; }
  .threshold-copy h1 { font-size: clamp(48px, 14.5vw, 70px); line-height: .88; }
  .threshold-copy .hero-copy { width: 100%; margin-top: 18px; font-size: 13px; }
  .threshold-hero .stats { display: none; }
}
@keyframes hero-wall-mobile-drift {
  from { transform: translate3d(0, 0, 0) scale(.97); }
  to { transform: translate3d(-.8%, -1%, 0) scale(.995); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wall,
  .hero-ink-motion { animation: none !important; }
  .hero-wall { transform: none !important; }
  .hero-ink-motion { background-position: 52% 50%; }
}

/* Gapless Hero: preserve the B2.3 collage over a moving underlay. */
.threshold-hero { overflow: hidden; contain: paint; }
.hero-wall { inset: -6vh -4vw 0; }
.hero-slot-1,
.hero-slot-2,
.hero-slot-3 { z-index: 2; }
.hero-slot-1 { left: -4%; right: auto; top: -2%; bottom: auto; width: 41%; height: 58%; aspect-ratio: auto; transform: rotate(-1.8deg); z-index: 3; }
.hero-slot-2 { left: 30%; right: auto; top: -4%; bottom: auto; width: 46%; height: 56%; aspect-ratio: auto; transform: rotate(1.4deg); z-index: 2; }
.hero-slot-3 { left: 72%; right: auto; top: -1%; bottom: auto; width: 34%; height: 58%; aspect-ratio: auto; transform: rotate(1deg); z-index: 1; }
.hero-slot-4 { left: -1%; right: auto; top: -1%; bottom: auto; width: 102%; height: 102%; aspect-ratio: auto; transform: none; z-index: 0; }
.hero-slot-4 .hero-wall-label { display: none; }
@media (max-width: 767px) {
  .hero-wall { inset: -6vh -4vw 0; }
  .hero-slot-1 { left: -9%; right: auto; top: 2%; bottom: auto; width: 78%; height: 56%; aspect-ratio: auto; transform: rotate(-2.5deg); }
  .hero-slot-2 { left: auto; right: -14%; top: 8%; bottom: auto; width: 58%; height: 44%; aspect-ratio: auto; transform: rotate(3deg); }
  .hero-slot-3 { left: 4%; right: auto; top: 34%; bottom: auto; width: 82%; height: 48%; aspect-ratio: auto; transform: rotate(1.2deg); }
}
@keyframes hero-wall-drift {
  from { transform: perspective(1180px) rotateX(1.4deg) rotateZ(2deg) scale(1.02); }
  to { transform: perspective(1180px) translate3d(-1%, -1.4%, 0) rotateX(-.5deg) rotateZ(.7deg) scale(1.06); }
}
@keyframes hero-wall-mobile-drift {
  from { transform: translate3d(0, 0, 0) scale(1.01); }
  to { transform: translate3d(-.8%, -1%, 0) scale(1.04); }
}