/** Shopify CDN: Minification failed

Line 2185:79 Unexpected "*"

**/
/* ============================================================
   MUTPL WRLDS — Design System
   ============================================================ */
:root {
  /* materials */
  --bone: #F3EFE7;
  --pearl: #E7E9ED;
  --platinum: #C9CCD2;
  --silver: #9BA1AB;
  --ink: #0F1013;
  --ink-2: #2A2C31;
  --gold: #C9A86A;
  --gold-hi: #E8D3A4;
  --gold-lo: #8F7140;
  --sunrise: #C8241E;
  --burnt: #C2551E;
  --ice: #BCD3E8;

  --glass: rgba(255, 255, 255, .22);
  --glass-strong: rgba(250, 249, 246, .72);
  --glass-line: rgba(255, 255, 255, .55);
  --holo: 0 0 0 1px rgba(255,255,255,.6), 0 0 24px rgba(255,255,255,.35), inset 0 0 18px rgba(255,255,255,.25);

  /* type */
  --f-display: 'Syncopate', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-ui: 'Manrope', system-ui, -apple-system, sans-serif;

  /* motion (Emil) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* layout */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --nav-h: 72px;
  --r: 18px;
  --r-sm: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: #E9B49A; color: var(--ink);
  font: 400 16px/1.6 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--bone); border-radius: 8px; transition: top .2s var(--ease-out); }
.skip:focus { top: 16px; }
[hidden] { display: none !important; }

/* ---------------- THE LIVING SKY ---------------- */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #E9A07A; }
.sky[data-theme="daylight"] { background: #CFDDEB; }
.sky__plates { position: absolute; inset: -4%; will-change: transform; }
.sky__plate {
  position: absolute; inset: 0; background: center 62% / cover no-repeat;
  opacity: 0; filter: blur(14px); transform: scale(1.12);
  transition: opacity 1.1s var(--ease-out), filter 1.1s var(--ease-out);
  /* constant on-screen drift: slow ease-in-out pan, never stops */
  animation: plate-drift 64s var(--ease-in-out) infinite alternate;
}
.sky__plate.is-on { opacity: 1; filter: blur(0); }
@keyframes plate-drift {
  from { transform: scale(1.12) translate3d(-3.2%, .6%, 0); }
  to   { transform: scale(1.12) translate3d(3.2%, -.6%, 0); }
}
.sky__clouds { position: absolute; inset: -2%; width: 104%; height: 104%; will-change: transform; }
.sky--nogl .sky__clouds { display: none; }
/* Fallback when WebGL is unavailable: drifting photographic cloud band */
.sky--nogl .sky__plates::after {
  content: ''; position: absolute; inset: 40% -50% -10% -50%;
  background: url(sky-showroom.jpg) center bottom / 50% auto repeat-x;
  opacity: .35; mix-blend-mode: screen; animation: band 120s linear infinite;
}
@keyframes band { to { transform: translate3d(50%, 0, 0); } }
.sky__veil { position: absolute; inset: 0; pointer-events: none; transition: background .9s var(--ease-out); }
body[data-route="home"] .sky__veil { background: radial-gradient(120% 70% at 50% 45%, transparent 40%, rgba(40, 10, 20, .28)); }
body[data-route="shop"] .sky__veil,
body[data-route="product"] .sky__veil { background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.18)); }
body[data-route="editorial"] .sky__veil { background: linear-gradient(to bottom, rgba(14, 10, 16, .62), rgba(14, 10, 16, .78)); }
body[data-route="page"] .sky__veil { background: rgba(243, 239, 231, .55); }

@media (prefers-reduced-motion: reduce) {
  .sky__plate { animation-duration: 400s; }
}

/* ---------------- NAV ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter); color: #fff;
  transition: background .3s ease, color .3s ease, backdrop-filter .3s ease;
}
.nav.is-solid { background: rgba(250, 249, 246, .55); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.5); }
body[data-route="shop"] .nav, body[data-route="product"] .nav, body[data-route="page"] .nav { color: var(--ink); }
body[data-route="editorial"] .nav.is-solid { background: rgba(15, 16, 19, .5); color: #fff; border-bottom-color: rgba(255,255,255,.08); }
.nav__mark { font: 700 15px/1 var(--f-display); letter-spacing: .32em; display: inline-flex; gap: .55em; white-space: nowrap; }
.nav__mark span { font-weight: 400; opacity: .8; }
.nav__links { display: flex; gap: clamp(14px, 2vw, 30px); font: 500 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.nav__links a { position: relative; padding: 8px 0; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease-out); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav__tools { display: flex; align-items: center; gap: 4px; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; position: relative; transition: transform .16s var(--ease-out), background .2s ease; }
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.icon-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: rgba(255,255,255,.18); } }
.cart-btn__count { position: absolute; top: 6px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--ink); font: 700 10px/17px var(--f-ui); text-align: center; transition: transform .25s var(--ease-out); }
.cart-btn__count[data-empty] { transform: scale(.6); opacity: 0; }
.cart-btn__count.bump { animation: bump .4s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35); } }
.menu-btn { display: none; }

.menu { position: fixed; inset: 0; z-index: 9; padding: calc(var(--nav-h) + 24px) var(--gutter) 32px; background: rgba(250,249,246,.86); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.menu nav { display: grid; gap: 4px; }
.menu a { font: 700 clamp(20px, 6vw, 28px)/1.2 var(--f-display); letter-spacing: .06em; padding: 12px 0; border-bottom: 1px solid rgba(15,16,19,.08); text-transform: uppercase; }
.menu:not([hidden]) { animation: fade-in .25s var(--ease-out); }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .menu-btn { display: inline-grid; }
}

/* ---------------- PRIMITIVES ---------------- */
main { position: relative; z-index: 1; outline: none; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.glass {
  background: var(--glass-strong); border: 1px solid var(--glass-line);
  backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 30px 80px -30px rgba(30, 40, 60, .35), inset 0 1px 0 rgba(255,255,255,.7);
}
.eyebrow { font: 600 11px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; }
.display { font: 700 clamp(34px, 6.4vw, 104px)/.98 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.serif { font-family: var(--f-serif); font-weight: 400; }
.sample-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 99px; border: 1px dashed currentColor; font: 600 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }

.btn {
  --bg: var(--ink); --fg: var(--bone);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--bg); color: var(--fg);
  font: 600 12px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase;
  transition: transform .16s var(--ease-out), background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn--gold { --fg: var(--ink); background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px -12px rgba(143,113,64,.7); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn--ghost:hover { --bg: rgba(255,255,255,.14); }
}
.link-line { position: relative; display: inline-block; padding-bottom: 3px; font: 600 12px/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
.link-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-line:hover::after { transform: scaleX(.35); } }

/* Route transitions */
.view { animation: view-in .6s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------------- HOME / FIRST WORLD ---------------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 28px; text-align: center; color: #fff; padding: calc(var(--nav-h) + 16px) var(--gutter) 28px; }
.hero__inner { display: grid; justify-items: center; gap: 0; transition: transform 1.2s var(--ease-in-out), opacity .8s ease, filter .8s ease; }
.hero.is-leaving .hero__float { opacity: 0; transform: translateY(40px) scale(.9); }
.hero.is-leaving .hero__inner { transform: scale(1.6); opacity: 0; filter: blur(8px); }
.hero__mark {
  font: 700 clamp(40px, 10.5vw, 168px)/.9 var(--f-display); letter-spacing: .06em; margin: 0;
  background: linear-gradient(180deg, #fff 30%, #FFF4EA 60%, #FFE4CF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(255, 240, 225, .35);
  filter: drop-shadow(0 2px 30px rgba(120, 40, 20, .25));
}
.hero__mark span { display: block; font-weight: 400; font-size: .42em; letter-spacing: .62em; margin-top: .25em; padding-left: .62em; }
.hero__we { margin: clamp(22px, 3.2vw, 40px) 0 0; font: 600 clamp(11px, 1.1vw, 14px)/1.9 var(--f-ui); letter-spacing: .42em; text-transform: uppercase; }
.hero__line { margin: clamp(18px, 2.4vw, 30px) 0 0; font: italic 400 clamp(22px, 2.6vw, 38px)/1.2 var(--f-serif); max-width: 22ch; text-shadow: 0 1px 20px rgba(90, 30, 20, .3); }
.hero__cta { margin-top: clamp(30px, 4.4vw, 56px); }
.hero__scroll { display: none; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; opacity: .75; display: grid; justify-items: center; gap: 10px; }
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(#fff, transparent); animation: scroll-cue 2.6s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes scroll-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Hero entrance (once on load) */
[data-enter] > * { animation: enter 1.4s var(--ease-out) both; }
[data-enter] > *:nth-child(2) { animation-delay: .35s; }
[data-enter] > *:nth-child(3) { animation-delay: .8s; }
[data-enter] > *:nth-child(4) { animation-delay: 1.2s; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); filter: blur(10px); } }

/* ---------------- THE GOLD TELEPORT BUTTON ---------------- */
.teleport {
  position: relative; display: inline-grid; place-items: center;
  width: clamp(200px, 22vw, 260px); height: 64px; border-radius: 999px;
  font: 700 13px/1 var(--f-display); letter-spacing: .46em; padding-left: .46em; color: #2B2112;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #F4E6C4 0%, #D9BC85 32%, #B8955A 58%, #E2CB98 82%, #C6A468 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 6px rgba(120, 88, 40, .35),
    0 0 0 1px rgba(255, 236, 200, .55), 0 16px 40px -14px rgba(120, 60, 20, .65), 0 0 60px -10px rgba(255, 210, 150, .45);
  transition: transform .16s var(--ease-out), box-shadow .3s ease;
  isolation: isolate; overflow: visible;
}
.teleport::before { /* metallic sheen that travels on hover */
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  transition: background-position .9s var(--ease-out);
}
.teleport::after { /* energy field ring */
  content: ''; position: absolute; inset: -10px; border-radius: inherit; border: 1px solid rgba(255, 236, 200, .7);
  opacity: 0; transform: scale(.94); pointer-events: none;
}
.teleport:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .teleport:hover::before { background-position: 150% 0; }
  .teleport:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 6px rgba(120,88,40,.35), 0 0 0 1px rgba(255,236,200,.8), 0 18px 46px -14px rgba(120,60,20,.7), 0 0 90px -10px rgba(255,214,160,.6); }
}
.teleport.is-charging::after { animation: field 1s var(--ease-out) infinite; }
.teleport.is-charging { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px #fff, 0 0 120px 10px rgba(255, 226, 180, .8); }
@keyframes field { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.5); } }

/* Warp overlay */
.warp { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: grid; place-items: center; }
.warp__line { margin: 0; font: italic 400 clamp(32px, 6vw, 88px)/1 var(--f-serif); color: #fff; opacity: 0; transform: scale(.92); filter: blur(12px); text-shadow: 0 0 40px rgba(255, 230, 190, .8); transition: opacity .5s var(--ease-out), transform 1.1s var(--ease-out), filter .5s var(--ease-out); }
.warp.show-line .warp__line { opacity: 1; transform: scale(1.06); filter: blur(0); }
.warp__flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, #FFF6E6 45%, #F3DDB2 100%); opacity: 0; transition: opacity .28s var(--ease-out); }
.warp.flash .warp__flash { opacity: 1; }
.warp.flash .warp__line { opacity: 0; transition-duration: .2s; }
.warp.fade .warp__flash { opacity: 0; transition: opacity .9s var(--ease-out); }

/* ---------------- HOME SECTIONS ---------------- */
.band { position: relative; min-height: 100svh; display: grid; align-content: center; padding: 120px 0; color: #fff; }
.band--statement .display { max-width: 15ch; text-shadow: 0 2px 40px rgba(60, 20, 30, .35); }
.band--statement .serif { font-size: clamp(20px, 2vw, 28px); line-height: 1.4; max-width: 34ch; margin: 32px 0 0; opacity: .92; }
.band__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

/* ---------------- SHOWROOM / SECOND WORLD ---------------- */
.showroom { padding: calc(var(--nav-h) + clamp(32px, 6vw, 80px)) 0 120px; color: var(--ink); }
.showroom__head { display: grid; gap: 18px; margin-bottom: clamp(28px, 4vw, 52px); }
.showroom__head .display { font-size: clamp(34px, 6vw, 92px); color: #fff; text-shadow: 0 2px 30px rgba(60, 90, 130, .35); }
.showroom__head p:not(.eyebrow) { margin: 0; max-width: 52ch; font: italic 400 clamp(18px, 1.6vw, 22px)/1.4 var(--f-serif); color: var(--ink-2); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: clamp(36px, 5vw, 64px); padding: 10px; border-radius: 24px; }
.showroom__head .eyebrow { margin: 0; color: var(--ink-2); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 999px; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .16s var(--ease-out); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-pressed="true"]):hover { background: rgba(255,255,255,.6); } }
.chip small { opacity: .55; margin-right: 6px; font-weight: 500; }
.select { min-height: 40px; padding: 0 34px 0 16px; border-radius: 999px; border: 1px solid rgba(15,16,19,.14); background: rgba(255,255,255,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230F1013' stroke-width='1.4'/%3E%3C/svg%3E") right 14px center no-repeat; appearance: none; font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 760px) { .chips { flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .chip { flex: none; } }

/* Floating artifacts */
.field { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 44px) clamp(16px, 2.4vw, 36px); align-items: start; }
.artifact { grid-column: span 4; position: relative; display: block; perspective: 900px; }
.artifact:nth-child(6n+2) { margin-top: clamp(30px, 6vw, 90px); }
.artifact:nth-child(6n+4) { margin-top: clamp(10px, 2vw, 30px); }
.artifact:nth-child(6n+5) { margin-top: clamp(40px, 7vw, 110px); }
@media (max-width: 1024px) { .artifact { grid-column: span 6; } }
@media (max-width: 560px) { .artifact { grid-column: span 12; margin-top: 0 !important; } }

.artifact__float { animation: levitate var(--dur, 7s) var(--ease-in-out) var(--delay, 0s) infinite alternate; will-change: transform; }
@keyframes levitate { from { transform: translate3d(0, -7px, 0); } to { transform: translate3d(0, 7px, 0); } }
.artifact__case {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(236, 242, 250, .38));
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 70px -40px rgba(40, 60, 90, .55), inset 0 0 30px rgba(255,255,255,.35);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.artifact__case::after { /* holographic white outline + sheen */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
  transition: background-position 1.1s var(--ease-out);
}
.artifact__case img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.artifact__case { padding: 8px; }
.artifact__case img { border-radius: calc(var(--r) - 8px); }
.artifact__shadow { height: 18px; margin: 14px auto 0; width: 62%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40,60,90,.28), transparent); animation: shadow-breathe var(--dur, 7s) var(--ease-in-out) var(--delay, 0s) infinite alternate; }
@keyframes shadow-breathe { from { transform: scaleX(.86); opacity: .6; } to { transform: scaleX(1.04); opacity: 1; } }
.artifact__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding: 0 4px; }
.artifact__name { font: 700 12px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.artifact__cat { font: 500 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-top: 6px; }
.artifact__price { font: 600 14px/1 var(--f-ui); white-space: nowrap; }
.badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px; border-radius: 99px; background: rgba(15,16,19,.86); color: var(--gold-hi); font: 600 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .artifact:hover .artifact__case { transform: translateY(-6px) scale(1.012); box-shadow: 0 60px 90px -40px rgba(40,60,90,.6), 0 0 0 1px #fff, 0 0 40px rgba(255,255,255,.55), inset 0 0 30px rgba(255,255,255,.4); }
  .artifact:hover .artifact__case::after { background-position: -60% 0; }
  .artifact:hover .artifact__case img { transform: scale(1.03); }
}
.artifact.is-selected .artifact__case { transform: translateZ(80px) scale(1.06); }

.empty { padding: 60px 0; text-align: center; font: italic 22px/1.4 var(--f-serif); }

/* New dimensions tiles */
.dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 860px) { .dims { grid-template-columns: 1fr; } }
.dim { position: relative; min-height: 360px; padding: 28px; border-radius: var(--r); display: grid; align-content: space-between; color: #fff; overflow: hidden; background: linear-gradient(160deg, rgba(20, 30, 50, .55), rgba(20, 30, 50, .2)); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dim::before { content: ''; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(closest-side, rgba(232, 211, 164, .45), transparent); animation: levitate 8s var(--ease-in-out) infinite alternate; }
.dim h3 { font: 700 clamp(22px, 2.4vw, 30px)/1.05 var(--f-display); text-transform: uppercase; margin: 12px 0 0; position: relative; }
.dim p { margin: 0; position: relative; opacity: .85; }
.dim .eyebrow { color: var(--gold-hi); position: relative; }

/* ---------------- PRODUCT DETAIL ---------------- */
.pdp { padding: calc(var(--nav-h) + 24px) 0 100px; }
.crumbs { display: flex; gap: 10px; font: 600 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 22px; color: var(--ink-2); flex-wrap: wrap; }
.crumbs a { opacity: .65; transition: opacity .2s ease; }
.crumbs a:hover { opacity: 1; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .pdp__grid { grid-template-columns: 1fr; } }
.pdp__stage { position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 900px) { .pdp__stage { position: relative; top: 0; } }
.pdp__stage .artifact__case { aspect-ratio: 4 / 5; animation: come-forward .9s var(--ease-out) both; }
@keyframes come-forward { from { transform: translateZ(0) scale(.86) translateY(30px); opacity: 0; filter: blur(8px); } }
.pdp__stage .artifact__float { --dur: 8s; }
.pdp__panel { padding: clamp(22px, 3vw, 40px); border-radius: var(--r); animation: view-in .8s .15s var(--ease-out) both; }
.pdp__title { font: 700 clamp(26px, 3vw, 42px)/1.02 var(--f-display); text-transform: uppercase; margin: 14px 0 10px; letter-spacing: .01em; }
.pdp__tagline { font: italic 400 20px/1.35 var(--f-serif); margin: 0 0 18px; color: var(--ink-2); }
.pdp__price { font: 600 22px/1 var(--f-ui); margin: 0 0 26px; }
.opt { margin: 0 0 22px; border: 0; padding: 0; }
.opt legend, .opt__label { display: flex; justify-content: space-between; width: 100%; font: 600 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; padding: 0; }
.opt__label button { text-decoration: underline; text-underline-offset: 3px; letter-spacing: .12em; }
.swatches, .sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(15,16,19,.15); transition: transform .16s var(--ease-out); }
.swatch i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.swatch:active { transform: scale(.94); }
.size { min-width: 54px; height: 46px; padding: 0 12px; border-radius: 12px; font: 600 13px/1 var(--f-ui); box-shadow: inset 0 0 0 1px rgba(15,16,19,.18); background: rgba(255,255,255,.5); transition: background .18s ease, color .18s ease, transform .16s var(--ease-out); }
.size[aria-checked="true"] { background: var(--ink); color: var(--bone); box-shadow: none; }
.size:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.size:active:not(:disabled) { transform: scale(.96); }
.stock-note { min-height: 20px; margin: -8px 0 18px; font: 500 13px/1.4 var(--f-ui); color: var(--burnt); }
.qty { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15,16,19,.18); background: rgba(255,255,255,.5); }
.qty button { width: 44px; height: 46px; font-size: 18px; transition: transform .16s var(--ease-out); }
.qty button:active { transform: scale(.9); }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.pdp__buy { display: flex; gap: 10px; align-items: center; margin: 4px 0 26px; }
.pdp__buy .btn { flex: 1; }
.acc { border-top: 1px solid rgba(15,16,19,.1); }
.acc details { border-bottom: 1px solid rgba(15,16,19,.1); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 54px; cursor: pointer; font: 600 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 18px; font-weight: 400; transition: transform .25s var(--ease-out); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .acc__body { padding: 0 0 20px; color: var(--ink-2); font-size: 15px; }
.acc ul { margin: 0; padding-left: 18px; }
.related { margin-top: clamp(60px, 8vw, 120px); }
.related h2 { font: 700 clamp(20px, 2vw, 28px)/1 var(--f-display); text-transform: uppercase; margin: 0 0 28px; color: #fff; text-shadow: 0 2px 20px rgba(60,90,130,.35); }
.related .artifact { grid-column: span 3; }
@media (max-width: 1024px) { .related .artifact { grid-column: span 6; } }

/* ---------------- DRAWER / CART ---------------- */
.drawer { position: fixed; inset: 0; z-index: 20; }
.drawer__scrim, .search__scrim, .modal__scrim { position: absolute; inset: 0; background: rgba(15, 16, 19, .32); animation: fade-in .3s var(--ease-out); }
.drawer__panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px)); border-radius: 22px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; animation: drawer-in .5s var(--ease-drawer); }
@keyframes drawer-in { from { transform: translateX(calc(100% + 20px)); } }
.drawer.is-closing .drawer__panel { transform: translateX(calc(100% + 20px)); transition: transform .28s var(--ease-out); }
.drawer.is-closing .drawer__scrim { opacity: 0; transition: opacity .28s ease; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 14px 24px; border-bottom: 1px solid rgba(255,255,255,.6); }
.drawer__head h2 { margin: 0; font: 700 14px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; }
.drawer__body { overflow-y: auto; padding: 8px 24px; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid rgba(255,255,255,.6); display: grid; gap: 14px; }
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(15,16,19,.08); align-items: start; }
.line__img { width: 84px; aspect-ratio: 4/5; border-radius: 10px; background: rgba(255,255,255,.6); border: 1px solid #fff; overflow: hidden; }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__name { font: 700 11px/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; margin: 2px 0 6px; }
.line__opts { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.line .qty { transform: scale(.86); transform-origin: left; }
.line__price { font-weight: 600; text-align: right; }
.line__remove { display: block; margin-top: 10px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; opacity: .7; min-height: 24px; }
.sum-row { display: flex; justify-content: space-between; font-size: 15px; }
.sum-row strong { font-size: 18px; }
.ship-meter { height: 3px; border-radius: 3px; background: rgba(15,16,19,.08); overflow: hidden; }
.ship-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform-origin: left; transition: transform .5s var(--ease-out); }
.fine { font-size: 12px; color: var(--ink-2); margin: 0; }
.cart-empty { padding: 48px 0; text-align: center; display: grid; gap: 18px; justify-items: center; }
.cart-empty p { margin: 0; font: italic 22px/1.3 var(--f-serif); }

/* ---------------- SEARCH ---------------- */
.search { position: fixed; inset: 0; z-index: 20; }
.search__panel { position: absolute; left: 50%; top: 12vh; width: min(720px, calc(100% - 24px)); transform: translateX(-50%); border-radius: 22px; overflow: hidden; animation: pop-in .28s var(--ease-out); transform-origin: top center; }
@keyframes pop-in { from { opacity: 0; transform: translateX(-50%) scale(.97) translateY(-6px); } }
.search__field { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 24px; border-bottom: 1px solid rgba(255,255,255,.6); }
.search__field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 22px/1.3 var(--f-serif); padding: 10px 0; }
.search__results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.result { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 12px; transition: background .15s ease; }
.result:hover, .result:focus-visible { background: rgba(255,255,255,.6); }
.result img { width: 56px; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; }
.result b { display: block; font: 700 11px/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.result small { color: var(--ink-2); }
.search__hint { padding: 22px 16px; color: var(--ink-2); font: italic 18px/1.4 var(--f-serif); margin: 0; }

/* ---------------- MODAL ---------------- */
.modal { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 16px; }
.modal__panel { position: relative; width: min(560px, 100%); max-height: 86vh; overflow: auto; border-radius: 22px; padding: 30px; animation: modal-in .3s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: scale(.96); } }
.modal__panel h2 { margin: 0 0 16px; font: 700 18px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.modal__close { position: absolute; top: 12px; right: 12px; }
table.sizes-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 14px; }
.sizes-table th, .sizes-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(15,16,19,.1); }
.sizes-table th { font: 600 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }

/* ---------------- TOAST ---------------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 220%); visibility: hidden; padding: 14px 22px; border-radius: 999px; background: rgba(15,16,19,.9); color: var(--bone); font: 500 14px/1.3 var(--f-ui); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); transition: transform .4s var(--ease-out), visibility .4s; max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast b { color: var(--gold-hi); font-weight: 600; }

/* ---------------- EDITORIAL: MANIFESTO / MOVEMENT / ABOUT / CREATORS ---------------- */
.editorial { color: #F6F1EA; }
.manifesto { padding: calc(var(--nav-h) + 12vh) 0 20vh; }
.manifesto__intro { min-height: 70vh; display: grid; align-content: center; }
.m-line { margin: 0; font: 400 clamp(26px, 4vw, 58px)/1.18 var(--f-serif); max-width: 22ch; opacity: .14; filter: blur(3px); transition: opacity 1s var(--ease-out), filter 1s var(--ease-out), transform 1s var(--ease-out); transform: translateY(14px); }
.m-line.is-lit { opacity: 1; filter: blur(0); transform: none; }
.m-line--caps { font: 700 clamp(26px, 4.6vw, 72px)/1.02 var(--f-display); text-transform: uppercase; max-width: 18ch; letter-spacing: .01em; }
.m-line--gold { color: var(--gold-hi); }
.m-stanza { display: grid; gap: .5em; margin: 0 0 clamp(90px, 18vh, 200px); }
.m-silence { height: clamp(120px, 26vh, 300px); }

.movement { padding: calc(var(--nav-h) + 40px) 0 80px; }
.decl { min-height: 92svh; display: grid; align-content: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.decl__no { font: 600 11px/1 var(--f-ui); letter-spacing: .3em; color: var(--gold-hi); margin-bottom: 26px; }
.decl q { quotes: none; display: block; font: 700 clamp(30px, 6vw, 96px)/1 var(--f-display); text-transform: uppercase; max-width: 16ch; letter-spacing: -.005em; }
.decl q .serif { text-transform: none; font-style: italic; font-weight: 400; letter-spacing: 0; font-size: 1.08em; color: var(--gold-hi); }
.word { display: inline-block; opacity: .12; transition: opacity .6s var(--ease-out); }
.decl.is-lit .word { opacity: 1; }

.page-head { padding: calc(var(--nav-h) + clamp(48px, 10vh, 120px)) 0 clamp(36px, 6vw, 72px); }
.page-head .display { max-width: 16ch; }
.page-head p { font: italic 400 clamp(20px, 2vw, 28px)/1.4 var(--f-serif); max-width: 40ch; margin: 24px 0 0; opacity: .9; }

.creators-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); padding-bottom: 100px; }
@media (max-width: 900px) { .creators-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .creators-grid { grid-template-columns: 1fr; } }
.creator { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; display: grid; align-content: end; padding: 24px; border: 1px dashed rgba(255,255,255,.35); background: radial-gradient(120% 80% at 30% 20%, rgba(255, 200, 160, .22), transparent 60%), linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); transition: transform .4s var(--ease-out), border-color .3s ease; }
.creator::before { content: ''; position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 0 18px rgba(255,255,255,.03), 0 0 0 40px rgba(255,255,255,.02); }
@media (hover: hover) and (pointer: fine) { .creator:hover { transform: translateY(-2px); border-color: rgba(232, 211, 164, .6); } }
.creator__slot { font: 600 10px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hi); }
.creator h3 { margin: 10px 0 8px; font: 700 20px/1.1 var(--f-display); text-transform: uppercase; }
.creator p { margin: 0; font: italic 18px/1.35 var(--f-serif); opacity: .85; }
.spotlight { padding: 100px 0 120px; border-top: 1px solid rgba(255,255,255,.12); }
.spotlight__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
@media (max-width: 900px) { .spotlight__grid { grid-template-columns: repeat(2, 1fr); } }
.spot { padding: 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); min-height: 160px; display: grid; align-content: space-between; }
.spot b { font: 700 13px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.spot span { opacity: .7; font-size: 14px; }

.about-statement { padding: 6vh 0 18vh; }
.about-statement p { font: 400 clamp(22px, 2.7vw, 40px)/1.32 var(--f-serif); max-width: 28ch; margin: 0 0 1.1em; }
.about-statement p.caps { font: 700 clamp(22px, 3.4vw, 52px)/1.05 var(--f-display); text-transform: uppercase; color: var(--gold-hi); }

/* ---------------- INVITATION ---------------- */
.invite { min-height: 100svh; display: grid; align-content: center; padding: 120px 0; color: #fff; text-align: center; }
.invite .display { font-size: clamp(30px, 5.4vw, 86px); max-width: 18ch; margin: 0 auto; text-shadow: 0 2px 40px rgba(60, 20, 30, .35); }
.invite .serif { font-size: clamp(22px, 2.4vw, 34px); font-style: italic; margin: 22px 0 44px; }
.signup { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.signup input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0 20px; color: #fff; font-size: 16px; }
.signup input::placeholder { color: rgba(255,255,255,.8); }
.signup-msg { min-height: 24px; margin: 14px 0 0; font-size: 14px; }
.signup-msg.err { color: #FFD9CF; }
.invite__final { margin-top: 80px; font: 700 clamp(13px, 1.3vw, 16px)/1.8 var(--f-display); letter-spacing: .36em; }
@media (max-width: 560px) { .signup { flex-direction: column; border-radius: 22px; } .signup input { min-height: 50px; } }

/* ---------------- PLAIN PAGES (shipping, account) ---------------- */
.plain { padding: calc(var(--nav-h) + 60px) 0 120px; }
.plain__card { max-width: 820px; padding: clamp(24px, 4vw, 52px); border-radius: var(--r); }
.plain__card h1 { font: 700 clamp(26px, 3.6vw, 48px)/1.02 var(--f-display); text-transform: uppercase; margin: 0 0 22px; }
.plain__card h2 { font: 700 14px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; margin: 34px 0 10px; }
.plain__card p, .plain__card li { color: var(--ink-2); }
.form { display: grid; gap: 14px; max-width: 420px; margin-top: 18px; }
.field-row { display: grid; gap: 6px; }
.field-row label { font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.field-row input { min-height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(15,16,19,.18); background: rgba(255,255,255,.7); }
.notice { padding: 14px 16px; border-radius: 12px; background: rgba(201, 168, 106, .16); border: 1px solid rgba(201,168,106,.5); font-size: 14px; }

/* ---------------- FOOTER ---------------- */
.footer { position: relative; z-index: 1; background: rgba(15, 16, 19, .9); color: #EDE8DF; padding: 72px 0 32px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__brand { font: 700 18px/1.2 var(--f-display); letter-spacing: .26em; }
.footer__brand + p { font: italic 18px/1.4 var(--f-serif); opacity: .75; margin: 14px 0 0; max-width: 26ch; }
.footer h4 { margin: 0 0 14px; font: 600 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer li a { display: inline-block; padding: 6px 0; opacity: .8; transition: opacity .2s ease; }
.footer li a:hover { opacity: 1; }
.footer__base { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; opacity: .6; }

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion: reduce) {
  .artifact__float, .artifact__shadow, .dim::before, .hero__scroll i { animation: none; }
  [data-enter] > *, .view, .pdp__stage .artifact__case, .pdp__panel { animation: fade-in .3s ease both; }
  .m-line, .word { transition: opacity .4s ease; transform: none; filter: none; }
  .hero.is-leaving .hero__float { opacity: 0; transform: translateY(40px) scale(.9); }
.hero.is-leaving .hero__inner { transform: none; }
}

.drawer__foot:empty { display: none; }

/* Featured pieces floating in the first screen */
.hero__float { display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 22px); width: 100%; max-width: 1100px; transition: opacity .6s ease, transform 1s var(--ease-in-out); }
.mini { flex: 0 1 min(124px, 13vh); min-width: 0; display: grid; gap: 8px; justify-items: center; color: #fff; animation: enter 1.2s var(--ease-out) calc(1.4s + var(--i) * 70ms) both; }
.mini__case { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 5px; border-radius: 14px; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 40px -24px rgba(60, 20, 30, .6), 0 0 22px rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: levitate var(--dur) var(--ease-in-out) var(--delay) infinite alternate; transition: box-shadow .3s ease; }
.mini__case img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: transform .5s var(--ease-out); }
.mini__label { font: 500 11px/1.35 var(--f-ui); letter-spacing: .06em; text-shadow: 0 1px 10px rgba(60,20,30,.5); }
.mini__label b { display: block; font: 700 9.5px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .mini:hover .mini__case { box-shadow: 0 30px 50px -24px rgba(60,20,30,.7), 0 0 0 1px #fff, 0 0 34px rgba(255,255,255,.5); }
  .mini:hover .mini__case img { transform: scale(1.03); }
}
@media (max-width: 760px) {
  .hero__float { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 10px; width: calc(100% + var(--gutter) * 2); }
  .hero__float::-webkit-scrollbar { display: none; }
  .mini { flex: 0 0 112px; scroll-snap-align: start; }
}
@media (max-height: 760px) and (min-width: 761px) { .mini { flex-basis: 110px; } .hero__line { display: none; } }
.band--collection { min-height: 0; padding: 100px 0 120px; }
.band__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 48px; }
.band__head .display { font-size: clamp(28px, 4.4vw, 64px); }
.nav__shop { display: none; }
@media (max-width: 1080px) { .nav__shop { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 600 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; } }
@media (prefers-reduced-motion: reduce) { .mini__case { animation: none; } .mini { animation: fade-in .3s ease both; } }

/* Phones: products must be on the first screen; nav must fit */
@media (max-width: 560px) {
  .nav__tools [aria-label="Account"], .nav__tools [data-action="search"] { display: none; }
  .nav__mark { font-size: 12px; letter-spacing: .26em; }
  .nav__shop { padding: 0 8px; }
  .hero { gap: 16px; padding-top: calc(var(--nav-h) + 4px); padding-bottom: 16px; }
  .hero__mark { font-size: clamp(34px, 12vw, 52px); }
  .hero__we { margin-top: 14px; font-size: 10px; line-height: 1.8; }
  .hero__line { margin-top: 12px; font-size: 18px; }
  .hero__cta { margin-top: 20px; }
  .teleport { height: 54px; width: 200px; }
  .mini { flex: 0 0 96px; }
  .mini__label b { font-size: 8.5px; }
}
.menu__search { text-align: left; font: 700 clamp(20px, 6vw, 28px)/1.2 var(--f-display); letter-spacing: .06em; padding: 12px 0; border-bottom: 1px solid rgba(15,16,19,.08); text-transform: uppercase; min-height: 44px; }

/* Tapstitch mockups: square, white ground — show the whole garment */
/* Pieces float on their own: transparent cutouts, no cases, no white */
.artifact__case, .mini__case { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; overflow: visible !important; border-radius: 0 !important; }
.artifact__case::after { display: none; }
.artifact__case img, .mini__case img, .line__img img, .result img { object-fit: contain; background: none; border-radius: 0 !important; }
.artifact__case img, .mini__case img {
  filter: drop-shadow(0 28px 26px rgba(20, 30, 50, .32)) drop-shadow(0 4px 6px rgba(20, 30, 50, .18));
  transition: transform .6s var(--ease-out), filter .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .artifact:hover .artifact__case { transform: translateY(-6px); box-shadow: none !important; }
  .artifact:hover .artifact__case img, .mini:hover .mini__case img {
    transform: scale(1.04);
    /* holographic white outline that follows the garment */
    filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 34px 28px rgba(20, 30, 50, .34));
  }
}
.line__img { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); }
.mini__case img { filter: drop-shadow(0 18px 16px rgba(40, 10, 20, .4)); }
.badge { top: 0; left: 0; }
.pdp__stage .artifact__case { aspect-ratio: 1 / 1; }
.artifact__case, .mini__case { aspect-ratio: 1 / 1; }
.line__img, .result img { aspect-ratio: 1 / 1; }

/* ---------- Main page: name, tagline, TELEPORT, side quote ---------- */
body[data-route="home"] .footer { display: none; }
body[data-route="home"] .hero { display: grid; grid-template-rows: none; place-items: center; min-height: 100svh; padding: var(--nav-h) var(--gutter); }
body[data-route="home"] .hero__we { margin-top: clamp(26px, 3.4vw, 44px); font-size: clamp(12px, 1.15vw, 15px); letter-spacing: .5em; padding-left: .5em; }
body[data-route="home"] .hero__cta { margin-top: clamp(40px, 5.6vw, 72px); }
.hero__quote {
  position: absolute; left: var(--gutter); bottom: clamp(36px, 9vh, 88px); margin: 0; max-width: 400px; text-align: left; color: #fff;
  padding-left: 18px; border-left: 1px solid rgba(232, 211, 164, .8);
  animation: enter 1.4s var(--ease-out) 1.5s both; transition: opacity .6s ease;
}
.hero__quote blockquote { margin: 0; font: 400 clamp(20px, 1.9vw, 28px)/1.25 var(--f-serif); text-shadow: 0 1px 18px rgba(70, 20, 25, .45); }
.hero__quote em { color: var(--gold-hi); }
.hero__quote figcaption { margin-top: 14px; }
.hero__quote figcaption a { display: inline-flex; align-items: center; min-height: 44px; font: 600 10px/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; opacity: .85; border-bottom: 0; }
.hero__quote figcaption a::after { content: '\2192'; margin-left: 8px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero__quote figcaption a:hover::after { transform: translateX(3px); } }
.hero.is-leaving .hero__quote { opacity: 0; }
@media (max-width: 700px) {
  .hero__quote { left: 50%; transform: translateX(-50%); bottom: 28px; width: calc(100% - var(--gutter) * 2); max-width: 340px; text-align: center; border-left: 0; padding-left: 0; animation-name: fade-in; }
  .hero__quote blockquote { font-size: 20px; }
}

/* ---------- Wordmark: make MUTPL WRLDS pop ---------- */
body[data-route="home"] .hero__inner { position: relative; }
body[data-route="home"] .hero__inner::before { /* soft halo that lifts the type off the clouds */
  content: ''; position: absolute; z-index: -1; left: 50%; top: 32%; width: 135%; height: 120%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(45, 12, 24, .34), rgba(45, 12, 24, .12) 55%, transparent);
}
body[data-route="home"] .hero__mark {
  font-size: clamp(54px, 13.2vw, 220px); letter-spacing: .045em; line-height: .86;
  /* chrome-white finish + a travelling light band */
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.98) 48%, rgba(255, 241, 214, .9) 52%, transparent 62%) -160% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #F3EEF0 58%, #E9EEF6 72%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.9))
    drop-shadow(0 0 22px rgba(255, 244, 230, .55))
    drop-shadow(0 10px 34px rgba(70, 14, 22, .5));
  animation: enter 1.4s var(--ease-out) both, mark-sweep 9s linear 1.6s infinite;
}
body[data-route="home"] .hero__mark span {
  font-weight: 700; font-size: .5em; letter-spacing: .5em; padding-left: .5em; margin-top: .22em;
  background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes mark-sweep {
  0%   { background-position: -160% 0, 0 0; }
  22%  { background-position: 260% 0, 0 0; }
  100% { background-position: 260% 0, 0 0; }
}
body[data-route="home"] .hero__we {
  font-weight: 700; color: #fff; opacity: 1;
  text-shadow: 0 1px 14px rgba(70, 14, 22, .55);
}
@media (max-width: 560px) {
  body[data-route="home"] .hero__mark { font-size: clamp(46px, 16vw, 72px); }
  body[data-route="home"] .hero__mark span { letter-spacing: .38em; padding-left: .38em; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="home"] .hero__mark { animation: fade-in .3s ease both; }
}

.hero__quote { max-width: none; }
.hero__quote blockquote span, .hero__quote blockquote em { display: block; }
@media (min-width: 701px) { .hero__quote blockquote span, .hero__quote blockquote em { white-space: nowrap; } .hero__quote blockquote { font-size: clamp(18px, 1.6vw, 24px); } }
@media (max-width: 700px) { .hero__quote { max-width: 340px; } }

/* ---------- MUTPL = multiple: the wordmark as parallel Wrlds ---------- */
.mark { position: relative; display: grid; justify-items: center; --mx: 0; --my: 0; }
.mark > * { grid-area: 1 / 1; }
.mark__solid { position: relative; z-index: 2;
  transform: translate3d(calc(var(--mx) * 5px), calc(var(--my) * 3px), 0); }
body[data-route="home"] .mark__echo, body[data-route="home"] .mark__echo span {
  background: none !important; color: transparent; filter: none;
  -webkit-text-stroke: 1.2px var(--c);
}
body[data-route="home"] .mark__echo {
  z-index: 1; pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 12px var(--glow));
  opacity: var(--o, .8);
  transform: translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * .6px), 0);
  animation: enter 1.6s var(--ease-out) var(--in, .3s) both, echo-drift var(--t, 8s) var(--ease-in-out) var(--in, .3s) infinite alternate;
  transition: scale 1.1s var(--ease-out), opacity .8s ease, filter .8s ease;
}
.mark__echo--sun  { --c: rgba(255, 128, 84, .95);  --glow: rgba(255, 110, 70, .55);  --ox: -16px; --oy: -9px;  --d: -30; --t: 7.5s; --in: .45s; }
.mark__echo--ice  { --c: rgba(196, 226, 255, .95); --glow: rgba(170, 210, 255, .55); --ox: 18px;  --oy: 10px;  --d: 38;  --t: 9s;   --in: .6s; }
.mark__echo--gold { --c: rgba(236, 214, 166, .9);  --glow: rgba(232, 200, 140, .45); --ox: 3px;   --oy: 20px;  --d: 16;  --t: 11s;  --in: .75s; --o: .6; scale: 1.035; }
@keyframes echo-drift {
  from { translate: calc(var(--ox) * -.35) calc(var(--oy) * -.35); }
  to   { translate: var(--ox) var(--oy); }
}
/* TELEPORT: the parallel Wrlds split apart */
.hero.is-leaving .mark__echo--sun  { scale: 1.9;  opacity: 0; }
.hero.is-leaving .mark__echo--ice  { scale: 2.4;  opacity: 0; }
.hero.is-leaving .mark__echo--gold { scale: 1.45; opacity: 0; }
@media (max-width: 560px) {
  .mark__echo--sun  { --ox: -8px; --oy: -5px; }
  .mark__echo--ice  { --ox: 9px;  --oy: 6px; }
  .mark__echo--gold { --ox: 2px;  --oy: 10px; }
  body[data-route="home"] .mark__echo, body[data-route="home"] .mark__echo span { -webkit-text-stroke-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="home"] .mark__echo { animation: fade-in .4s ease both; translate: var(--ox) var(--oy); transform: none; }
}

/* echoes: stronger read against the sunrise */
body[data-route="home"] .mark__echo, body[data-route="home"] .mark__echo span { -webkit-text-stroke-width: 2px; color: var(--fill); }
body[data-route="home"] .mark__echo { filter: drop-shadow(0 0 16px var(--glow)) drop-shadow(0 0 2px var(--glow)); }
.mark__echo--sun  { --fill: rgba(255, 110, 70, .16);  --ox: -34px; --oy: -18px; --o: .95; }
.mark__echo--ice  { --fill: rgba(170, 210, 255, .16); --ox: 38px;  --oy: 20px;  --o: .95; }
.mark__echo--gold { --fill: rgba(232, 200, 140, .12); --ox: 6px;   --oy: 38px;  --o: .75; }
@media (max-width: 560px) {
  .mark__echo--sun  { --ox: -14px; --oy: -8px; }
  .mark__echo--ice  { --ox: 16px;  --oy: 9px; }
  .mark__echo--gold { --ox: 3px;   --oy: 16px; }
  body[data-route="home"] .mark__echo, body[data-route="home"] .mark__echo span { -webkit-text-stroke-width: 1.4px; }
}

/* ==========================================================================
   THE LAB — home page as a futuristic laboratory.
   The teleport machine is the room's only window: the live sky shows through it.
   ========================================================================== */
body[data-route="home"] { --pr: min(17vw, 23svh); --pcy: 64svh; }
.lab { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; transform-origin: 50% var(--pcy); }
body[data-route="home"] .lab { display: block; }

/* Room: masked so the portal is a hole onto the moving sky */
.lab__room {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(circle at 50% var(--pcy), rgba(160, 205, 255, .28), rgba(160, 205, 255, .08) 28%, transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12.5vw),
    linear-gradient(180deg, #0A0D12 0%, #131820 46%, #0C0F14 100%);
  -webkit-mask: radial-gradient(circle var(--pr) at 50% var(--pcy), transparent calc(var(--pr) - 1px), #000 var(--pr));
          mask: radial-gradient(circle var(--pr) at 50% var(--pcy), transparent calc(var(--pr) - 1px), #000 var(--pr));
}
.lab__ceiling {
  position: absolute; left: -30%; right: -30%; top: 0; height: 40%; transform-origin: top center;
  transform: perspective(700px) rotateX(-66deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(225, 238, 255, .7) 9% 9.5%, transparent 9.5% 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 60px),
    linear-gradient(#0B0E13, #161B24);
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%); mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
  filter: drop-shadow(0 0 6px rgba(200, 225, 255, .5));
}
.lab__floor {
  position: absolute; left: -40%; right: -40%; bottom: 0; height: 46%; transform-origin: bottom center;
  transform: perspective(600px) rotateX(70deg);
  background:
    radial-gradient(ellipse 30% 55% at 50% 0%, rgba(160, 210, 255, .45), transparent 70%),
    repeating-linear-gradient(90deg, rgba(160, 205, 255, .22) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, rgba(160, 205, 255, .22) 0 1px, transparent 1px 70px),
    linear-gradient(#0E131A, #0A0D12);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%); mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  animation: floor-flow 6s linear infinite; /* constant motion: linear */
}
@keyframes floor-flow { to { background-position: 0 0, 0 0, 0 70px, 0 0; } }

/* Machine */
.lab__machine { position: absolute; left: 50%; top: var(--pcy); width: calc(var(--pr) * 2); height: calc(var(--pr) * 2); transform: translate(-50%, -50%); }
.lab__machine > * { position: absolute; }
.lab__glow { inset: calc(var(--pr) * -.7); border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 205, 255, .30), rgba(150, 205, 255, .08) 60%, transparent); animation: breathe 4.8s var(--ease-in-out) infinite alternate; }
@keyframes breathe { from { opacity: .65; } to { opacity: 1; } }
.lab__frame {
  inset: calc(var(--pr) * -.15); border-radius: 50%;
  background: conic-gradient(from 20deg, #2E3440, #D7DCE4 10%, #5A6271 22%, #F1F4F8 34%, #3B4250 46%, #B9C0CB 60%, #2E3440 72%, #E6EAF0 86%, #2E3440);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--pr) * .15), #000 calc(100% - var(--pr) * .15 + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--pr) * .15), #000 calc(100% - var(--pr) * .15 + 1px));
}
.lab__frame::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 calc(var(--pr) * .05) rgba(0,0,0,.6); }
.lab__ring { inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.lab__ring--outer { inset: calc(var(--pr) * -.3); width: calc(100% + var(--pr) * .6); height: calc(100% + var(--pr) * .6); stroke: rgba(205, 220, 240, .55); stroke-width: .35; stroke-dasharray: 7 2.2 1 2.2; animation: ring-spin 60s linear infinite; }
.lab__ring--ticks { stroke: rgba(236, 214, 166, .85); stroke-width: 2.4; stroke-dasharray: .35 2.6; animation: ring-spin 90s linear infinite reverse; }
.lab__ring--inner { stroke: rgba(190, 225, 255, .7); stroke-width: .5; stroke-dasharray: 30 6 4 6; animation: ring-spin 40s linear infinite; filter: drop-shadow(0 0 2px rgba(190,225,255,.9)); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.lab__ring { transform-origin: 50% 50%; transform-box: fill-box; }
.lab__horizon { inset: 0; border-radius: 50%; box-shadow: inset 0 0 calc(var(--pr) * .22) calc(var(--pr) * .02) rgba(170, 215, 255, .6), inset 0 0 4px 1px rgba(255,255,255,.85); }
.lab__node {
  left: 50%; top: 50%; width: calc(var(--pr) * .16); height: calc(var(--pr) * .07); border-radius: 3px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--pr) * 1.075));
  background: linear-gradient(180deg, #F0F3F7, #6B7382); box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.lab__node::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 40%; transform: translate(-50%, -50%); border-radius: 2px; background: #CFE6FF; box-shadow: 0 0 8px 2px rgba(170, 215, 255, .9); animation: node-blink 2.8s steps(1) infinite; }
.lab__node:nth-of-type(2)::after { animation-delay: .7s; } .lab__node:nth-of-type(3)::after { animation-delay: 1.4s; } .lab__node:nth-of-type(4)::after { animation-delay: 2.1s; }
@keyframes node-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
.lab__pylon { top: 50%; width: calc(var(--pr) * .14); height: calc(var(--pr) * 1.32); background: linear-gradient(90deg, #262B34, #C9CFD8 35%, #6B7382 60%, #1E232B); border-radius: 4px 4px 2px 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.lab__pylon--l { left: calc(var(--pr) * -.3); transform: skewX(8deg); }
.lab__pylon--r { right: calc(var(--pr) * -.3); transform: skewX(-8deg); }
.lab__pad { left: 50%; top: calc(100% + var(--pr) * .14); width: calc(var(--pr) * 3); height: calc(var(--pr) * .5); transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(180, 220, 255, .55), rgba(60, 90, 130, .55) 45%, #12161D 70%, #0A0D12 100%);
  box-shadow: 0 0 0 1px rgba(200, 225, 255, .35), 0 0 40px rgba(150, 205, 255, .35); }
.lab__pad i { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(200, 230, 255, .6); animation: breathe 2.4s var(--ease-in-out) infinite alternate; }
.lab__beam { left: 50%; top: 50%; width: calc(var(--pr) * 1.1); height: calc(var(--pr) * 1.2); transform: translateX(-50%); background: linear-gradient(to top, rgba(180, 222, 255, .35), transparent); filter: blur(10px); border-radius: 40%; }

/* Charging + entering the portal */
.lab.is-charging .lab__glow { animation-duration: .5s; }
.lab.is-charging .lab__horizon { box-shadow: inset 0 0 calc(var(--pr) * .4) calc(var(--pr) * .06) rgba(200, 235, 255, .9), inset 0 0 6px 2px #fff; transition: box-shadow .4s ease; }
.lab { transition: transform 1.2s var(--ease-in-out), opacity 1s ease .2s; }
.lab.is-entering { transform: scale(4.5); opacity: 0; }

/* ---------- Hero layout inside the lab ---------- */
body[data-route="home"] .hero { display: block; position: relative; height: 100svh; min-height: 0; padding: 0; overflow: hidden; }
body[data-route="home"] .hero__inner { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 1svh); }
body[data-route="home"] .hero__inner::before { display: none; }
body[data-route="home"] .hero__mark { font-size: clamp(40px, min(8.6vw, 12.5svh), 150px); }
body[data-route="home"] .hero__we { margin-top: clamp(12px, 1.6svh, 20px); }
.hero__machine { position: absolute; left: 50%; top: var(--pcy); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 14px;
  transition: transform 1.2s var(--ease-in-out), opacity .8s ease; }
.hero.is-leaving .hero__machine { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }

/* ---------- Chrome TELEPORT button that clearly reads as pressable ---------- */
.hero__machine .teleport {
  width: clamp(190px, calc(var(--pr) * 1.35), 270px); height: clamp(60px, calc(var(--pr) * .4), 76px);
  color: #0F1218; letter-spacing: .44em; padding-left: .44em; font-size: clamp(12px, 1vw, 15px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #F7F9FC 0%, #C3CAD4 38%, #8A93A1 52%, #DDE2E9 70%, #F2F5F9 100%);
  box-shadow:
    inset 0 1px 0 #fff, inset 0 -3px 6px rgba(40, 48, 60, .45), inset 0 0 0 1px rgba(255,255,255,.6),
    0 0 0 3px #1A1F27, 0 0 0 4px rgba(200, 220, 245, .55),         /* machined rim */
    0 10px 0 -2px #2A303A, 0 12px 0 -2px rgba(0,0,0,.4),            /* depth: it's a physical key */
    0 18px 36px -10px rgba(0, 0, 0, .7), 0 0 50px rgba(170, 215, 255, .45);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .2s ease;
  cursor: pointer;
}
.hero__machine .teleport::before { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; }
/* idle invitation: a slow pulse ripples outward from the key */
.hero__machine .teleport::after {
  inset: -4px; border: 1.5px solid rgba(190, 228, 255, .85); opacity: 0; transform: scale(1);
  animation: key-pulse 2.6s var(--ease-out) 1.8s infinite;
}
@keyframes key-pulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45, 1.9); } }
@media (hover: hover) and (pointer: fine) {
  .hero__machine .teleport:hover { transform: translateY(-2px); filter: brightness(1.06);
    box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(40,48,60,.45), inset 0 0 0 1px rgba(255,255,255,.7),
      0 0 0 3px #1A1F27, 0 0 0 4px rgba(210, 232, 255, .9), 0 12px 0 -2px #2A303A, 0 14px 0 -2px rgba(0,0,0,.4),
      0 22px 40px -10px rgba(0,0,0,.7), 0 0 70px rgba(180, 225, 255, .7); }
  .hero__machine .teleport:hover::before { background-position: 150% 0; }
  .hero__machine .teleport:hover::after { animation-play-state: paused; opacity: 0; }
}
/* pressed: the key physically sinks into the machine */
.hero__machine .teleport:active, .hero__machine .teleport.is-charging {
  transform: translateY(8px) scale(.98);
  box-shadow: inset 0 2px 6px rgba(40, 48, 60, .55), inset 0 0 0 1px rgba(255,255,255,.5),
    0 0 0 3px #1A1F27, 0 0 0 4px rgba(220, 240, 255, 1), 0 2px 0 -2px #2A303A,
    0 6px 14px -6px rgba(0,0,0,.6), 0 0 90px rgba(200, 235, 255, .95);
}
.hero__machine .teleport.is-charging::after { animation: field .9s var(--ease-out) infinite; border-color: #fff; }
.teleport__hint { font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .3em; text-transform: uppercase; color: rgba(220, 236, 255, .85); text-shadow: 0 0 10px rgba(150, 205, 255, .8); }
.teleport__hint::before { content: '▲ '; font-size: 8px; }

/* ---------- HUD + log ---------- */
.hud { position: absolute; top: var(--pcy); transform: translateY(-50%); width: 210px; padding: 16px 0 16px 16px; border-left: 1px solid rgba(190, 220, 255, .35);
  font: 400 10px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: rgba(220, 232, 248, .9);
  animation: fade-in 1s ease 1.6s both; }
.hud--l { left: var(--gutter); }
.hud--r { right: var(--gutter); text-align: right; border-left: 0; border-right: 1px solid rgba(190, 220, 255, .35); padding: 16px 16px 16px 0; }
.hud::before, .hud::after { content: ''; position: absolute; width: 10px; height: 1px; background: rgba(190, 220, 255, .7); }
.hud--l::before { left: -1px; top: 0; } .hud--l::after { left: -1px; bottom: 0; }
.hud--r::before { right: -1px; top: 0; } .hud--r::after { right: -1px; bottom: 0; }
.hud__k { margin: 0 0 4px; color: rgba(160, 190, 225, .7); font: 400 10px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; }
.hud__v { margin: 0 0 14px; font-size: 11px; color: #EAF2FF; }
.hud__v--gold { color: var(--gold-hi); }
.hud__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9FE3B5; box-shadow: 0 0 8px #9FE3B5; margin-right: 8px; vertical-align: 1px; animation: breathe 1.4s ease infinite alternate; }
.hud__bar { height: 3px; background: rgba(190, 220, 255, .15); overflow: hidden; }
.hud__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, rgba(150, 205, 255, .4), #CFE6FF); transform-origin: left; animation: field-level 5s var(--ease-in-out) infinite alternate; }
@keyframes field-level { from { transform: scaleX(.72); } to { transform: scaleX(.94); } }
body[data-route="home"] .hero__quote .hud__k { margin-bottom: 10px; }
body[data-route="home"] .hero__quote { border-left-color: rgba(190, 220, 255, .45); }
@media (max-width: 1100px) { .hud { display: none; } }

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  body[data-route="home"] { --pr: min(36vw, 22svh); --pcy: 57svh; }
  body[data-route="home"] .hero__mark { font-size: clamp(40px, 14.5vw, 64px); }
  body[data-route="home"] .hero__quote .hud__k { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lab__ring, .lab__floor, .lab__glow, .lab__pad i, .lab__node::after, .hud__bar i, .hud__dot, .hero__machine .teleport::after { animation: none !important; }
  .lab.is-entering { transform: none; }
}

/* ==========================================================================
   SPACE STATION — the lab floats in space; the portal shows the cloud Wrld.
   ========================================================================== */
.lab__room {
  background:
    radial-gradient(ellipse 60% 40% at 18% 30%, rgba(120, 170, 255, .10), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 22%, rgba(255, 120, 80, .08), transparent 70%),
    radial-gradient(circle at 50% var(--pcy), rgba(160, 205, 255, .22), rgba(160, 205, 255, .05) 30%, transparent 50%),
    radial-gradient(ellipse at 50% 40%, #0A0F1C 0%, #05070D 60%, #020306 100%);
}
/* Star layers: tiled point-light fields drifting at different speeds (constant motion = linear) */
.lab__stars { position: absolute; inset: -10%; background-repeat: repeat; }
.lab__stars--far {
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 88px 62px, rgba(200,220,255,.6), transparent 100%),
    radial-gradient(1px 1px at 150px 120px, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 40px 170px, rgba(255,230,210,.6), transparent 100%),
    radial-gradient(1px 1px at 190px 30px, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 120px 200px, rgba(200,220,255,.5), transparent 100%);
  background-size: 130px 130px; animation: stars-drift 240s linear infinite; opacity: .8;
}
.lab__stars--mid {
  background-image:
    radial-gradient(1.5px 1.5px at 30px 40px, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 260px 150px, rgba(210,230,255,.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 170px 300px, rgba(255,235,215,.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 330px 60px, #fff, transparent 100%);
  background-size: 240px 240px; animation: stars-drift 150s linear infinite, twinkle 4s ease-in-out infinite alternate;
}
.lab__stars--near {
  background-image:
    radial-gradient(2px 2px at 80px 120px, #fff, transparent 100%),
    radial-gradient(2.5px 2.5px at 420px 330px, rgba(220,235,255,1), transparent 100%),
    radial-gradient(2px 2px at 300px 520px, rgba(255,225,200,1), transparent 100%);
  background-size: 620px 620px; animation: stars-drift 90s linear infinite, twinkle 5.5s ease-in-out 1s infinite alternate;
  filter: drop-shadow(0 0 3px rgba(200, 225, 255, .9));
}
@keyframes stars-drift { to { background-position: -1240px 310px; } }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
/* Planet horizon below the station: sunrise atmosphere on the limb */
.lab__planet {
  position: absolute; left: 50%; top: 84svh; width: 260vw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 170, 120, .55), rgba(255, 120, 80, .18) 3%, transparent 9%),
    radial-gradient(circle at 50% 2%, #1B2A44 0%, #0D1526 6%, #060A12 14%);
  box-shadow:
    0 0 0 1px rgba(255, 190, 150, .55),
    0 -6px 30px 2px rgba(255, 140, 90, .55),
    0 -30px 120px 20px rgba(120, 175, 255, .28);
}
/* Observation-deck struts framing the view */
.lab__strut { position: absolute; top: -10%; width: 3.2vw; min-width: 22px; height: 70%; background: linear-gradient(90deg, #0B0E14, #2A303B 45%, #0B0E14); box-shadow: 0 0 0 1px rgba(160, 200, 255, .12), 0 0 30px rgba(0,0,0,.8); }
.lab__strut--l { left: 6vw; transform: rotate(24deg); transform-origin: top; }
.lab__strut--r { right: 6vw; transform: rotate(-24deg); transform-origin: top; }
.lab__strut::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(rgba(190, 225, 255, .5), transparent); }
/* the machine floats: pad becomes a hovering platform */
.lab__pad { animation: pad-float 6s var(--ease-in-out) infinite alternate; box-shadow: 0 0 0 1px rgba(200, 225, 255, .45), 0 0 60px rgba(150, 205, 255, .45), 0 30px 60px rgba(0,0,0,.8); }
@keyframes pad-float { from { translate: 0 -3px; } to { translate: 0 4px; } }

/* ---------- fixes from review ---------- */
body[data-route="home"] .hero__inner { top: calc(var(--nav-h) + 3svh); }
body[data-route="home"] .hero__mark { font-size: clamp(40px, min(7.6vw, 11svh), 132px); }
.mark__echo--sun  { --ox: -16px; --oy: -9px; }
.mark__echo--ice  { --ox: 18px;  --oy: 10px; }
.mark__echo--gold { --ox: 3px;   --oy: 16px; }
.mark__echo--sun { --d: -18; } .mark__echo--ice { --d: 22; } .mark__echo--gold { --d: 10; }
.teleport__hint { padding: 7px 12px; border-radius: 999px; background: rgba(6, 10, 18, .62); border: 1px solid rgba(190, 225, 255, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #EAF4FF; }
@media (max-width: 700px) {
  .lab__strut { display: none; }
  .lab__planet { top: 86svh; width: 420vw; }
  .mark__echo--sun  { --ox: -9px; --oy: -5px; } .mark__echo--ice { --ox: 10px; --oy: 6px; } .mark__echo--gold { --ox: 2px; --oy: 9px; }
}
@media (prefers-reduced-motion: reduce) { .lab__stars, .lab__pad { animation: none !important; } }

/* ==========================================================================
   v3 MACHINE — photoreal industrial gateway render (Figma-generated, original design).
   Render geometry: hole centre (0.4995, 0.4385) of width, hole radius 0.2906 of width.
   Image width = pr / 0.2906 = 3.441 * pr, so its window matches the sky portal exactly.
   ========================================================================== */
body[data-route="home"] { --pr: min(15vw, 19.5svh); --pcy: calc(33svh + var(--pr) * 1.44); }
.lab__room {
  -webkit-mask: radial-gradient(circle calc(var(--pr) * 1.03) at 50% var(--pcy), transparent calc(var(--pr) * 1.03 - 1px), #000 calc(var(--pr) * 1.03));
          mask: radial-gradient(circle calc(var(--pr) * 1.03) at 50% var(--pcy), transparent calc(var(--pr) * 1.03 - 1px), #000 calc(var(--pr) * 1.03));
}
.lab__frame, .lab__ring--outer, .lab__ring--ticks, .lab__pylon, .lab__pad, .lab__node, .lab__beam { display: none !important; }
.lab__render {
  position: absolute; width: calc(var(--pr) * 3.441); height: auto; max-width: none;
  left: calc(var(--pr) - var(--pr) * 3.441 * .4995); top: calc(var(--pr) - var(--pr) * 3.441 * .4385);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .75)) drop-shadow(0 0 30px rgba(120, 200, 255, .12));
  transition: filter .4s ease;
}
/* energy inside the window: faint cyan rim + slow rotating field line */
.lab__horizon { box-shadow: inset 0 0 calc(var(--pr) * .18) calc(var(--pr) * .015) rgba(120, 220, 255, .55), inset 0 0 3px 1px rgba(190, 240, 255, .7); }
.lab__ring--inner { stroke: rgba(130, 225, 255, .55); stroke-width: .4; stroke-dasharray: 18 4 2 4; }
.lab__glow { inset: calc(var(--pr) * -.9); background: radial-gradient(closest-side, rgba(110, 200, 255, .20), rgba(110, 200, 255, .05) 60%, transparent); }
/* charging: the gateway powers up */
.lab.is-charging .lab__render { filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(120, 220, 255, .55)) brightness(1.15); }
.lab.is-charging .lab__horizon { box-shadow: inset 0 0 calc(var(--pr) * .45) calc(var(--pr) * .05) rgba(160, 235, 255, .95), inset 0 0 6px 2px #fff; }

/* quote: let it wrap gracefully so it never runs into the base */
.hero__quote { max-width: min(330px, 26vw) !important; }
.hero__quote blockquote span, .hero__quote blockquote em { white-space: normal !important; text-wrap: balance; }
.hero__quote blockquote { font-size: clamp(17px, 1.35vw, 21px) !important; }

/* ---------- Wordmark: effects removed, new face (Tektur) ---------- */
body[data-route="home"] .hero__mark {
  font-family: 'Tektur', var(--f-display); font-weight: 800; letter-spacing: .07em; line-height: .9;
  font-size: clamp(42px, min(8.2vw, 12svh), 140px);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #F3F6FA; filter: none; text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
  animation: enter 1.2s var(--ease-out) both;
}
body[data-route="home"] .hero__mark span {
  font-family: 'Tektur', var(--f-display); font-weight: 500; font-size: .42em; letter-spacing: .72em; padding-left: .72em; margin-top: .3em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #F3F6FA;
}
.mark__solid { transform: none !important; }
body[data-route="home"] .hero__we { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; letter-spacing: .5em; font-size: clamp(11px, .95vw, 13px); color: rgba(225, 238, 255, .9); text-shadow: none; }

@media (max-width: 700px) {
  body[data-route="home"] { --pr: min(29vw, 17svh); --pcy: calc(29svh + var(--pr) * 1.44); }
  body[data-route="home"] .hero__mark { font-size: clamp(38px, 13.5vw, 60px); }
  .hero__quote { max-width: 340px !important; }
}


/* ==========================================================================
   v4 — HIGH-END FASHION PASS
   Restraint: one wordmark, one portal, one line of manifesto. Nothing else.
   ========================================================================== */

/* Machine: monochrome gunmetal so it reads as an object, not a game prop */
.lab__render { filter: grayscale(.9) contrast(1.08) brightness(.92) drop-shadow(0 40px 50px rgba(0,0,0,.8)); }
.lab.is-charging .lab__render { filter: grayscale(.6) contrast(1.1) brightness(1.12) drop-shadow(0 40px 50px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(255,255,255,.35)); }
.lab__ring--inner { display: none; }
/* seamless window: the edge falls into soft shadow, like looking through deep glass */
.lab__horizon { box-shadow: inset 0 0 calc(var(--pr) * .32) calc(var(--pr) * .04) rgba(4, 6, 10, .55), inset 0 0 0 1px rgba(255,255,255,.08); }
.lab.is-charging .lab__horizon { box-shadow: inset 0 0 calc(var(--pr) * .5) calc(var(--pr) * .05) rgba(255,255,255,.75); }
.lab__glow { background: radial-gradient(closest-side, rgba(255, 236, 220, .10), transparent 70%); }
.lab__stars--near { filter: none; }
.lab__strut { opacity: .7; }

/* ---------- The portal IS the button ---------- */
.hero__machine { width: calc(var(--pr) * 2); height: calc(var(--pr) * 2); gap: 0; display: block; }
.hero__machine .teleport--portal {
  all: unset; box-sizing: border-box; position: absolute; inset: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.hero__machine .teleport--portal::before {          /* soft centre shade so type reads on any sky */
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(12, 10, 16, .34), rgba(12, 10, 16, .10) 60%, transparent 85%);
  transition: background .5s ease;
}
.hero__machine .teleport--portal::after {           /* hover: the window brightens, like light coming through */
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0; transform: none; border: 0; animation: none;
  background: radial-gradient(closest-side, rgba(255, 248, 240, .32), transparent 75%);
  transition: opacity .5s var(--ease-out);
}
.teleport__word {
  position: relative; padding: 0 0 12px .62em;
  font: 600 clamp(15px, 1.25vw, 19px)/1 'Archivo', var(--f-ui); font-stretch: 125%;
  letter-spacing: .62em; text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
  transition: letter-spacing .5s var(--ease-out), transform .16s var(--ease-out);
}
.teleport__word::after {                            /* hairline that draws out on hover */
  content: ''; position: absolute; left: 50%; bottom: 0; width: 46px; height: 1px; background: #fff;
  transform: translateX(-50%); transition: width .5s var(--ease-out);
}
.teleport__sub {
  font: italic 400 clamp(14px, 1.05vw, 16px)/1 var(--f-serif); letter-spacing: .02em; color: rgba(255,255,255,.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5); opacity: .9; transition: opacity .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero__machine .teleport--portal:hover::after { opacity: 1; }
  .hero__machine .teleport--portal:hover .teleport__word { letter-spacing: .7em; }
  .hero__machine .teleport--portal:hover .teleport__word::after { width: 100%; }
}
.hero__machine .teleport--portal:active .teleport__word { transform: scale(.97); }
.hero__machine .teleport--portal:focus-visible { outline: 1px solid #fff; outline-offset: 6px; }
.hero__machine .teleport--portal.is-charging::after { opacity: 1; transition-duration: .3s; }
.hero__machine .teleport--portal.is-charging .teleport__word::after { width: 100%; }
.hero__machine .teleport--portal.is-charging, .hero__machine .teleport--portal:active { box-shadow: none; }
/* touch: no hover, so show the full line by default */
@media (hover: none) { .teleport__word::after { width: 100%; } }

/* ---------- Wordmark: wide, heavy grotesk ---------- */
body[data-route="home"] .hero__mark {
  font-family: 'Archivo', var(--f-ui); font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; line-height: .88;
  font-size: clamp(40px, min(8.4vw, 12svh), 142px); text-shadow: none; color: #fff;
}
body[data-route="home"] .hero__mark span {
  font-family: 'Archivo', var(--f-ui); font-stretch: 125%; font-weight: 400; font-size: .3em; letter-spacing: 1.05em; padding-left: 1.05em; margin-top: .55em;
}
body[data-route="home"] .hero__we {
  font: italic 400 clamp(17px, 1.4vw, 21px)/1 var(--f-serif); letter-spacing: .02em; text-transform: none; color: rgba(255,255,255,.88); margin-top: clamp(14px, 2svh, 22px);
}
body[data-route="home"] .hero__we::first-letter { text-transform: uppercase; }

/* ---------- Quote: quiet editorial caption ---------- */
body[data-route="home"] .hero__quote { border-left: 0; padding-left: 0; }
body[data-route="home"] .hero__quote blockquote { font-size: clamp(15px, 1.15vw, 18px) !important; line-height: 1.45; }
body[data-route="home"] .hero__quote em { color: rgba(255,255,255,.7); }
body[data-route="home"] .hero__quote figcaption a { font: 600 10px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .3em; }

/* nav on home: lighter, more fashion */
body[data-route="home"] .nav__links { font-family: 'Archivo', var(--f-ui); font-stretch: 125%; font-weight: 400; font-size: 10.5px; letter-spacing: .24em; }

@media (max-width: 700px) {
  body[data-route="home"] .hero__mark { font-size: clamp(36px, 12.5vw, 56px); }
  .teleport__word { font-size: 13px; }
  .teleport__sub { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .teleport__word, .teleport__word::after, .hero__machine .teleport--portal::after { transition: none; }
}
/* neutralise the old chrome-key states on the portal button */
.hero__machine .teleport.teleport--portal:hover,
.hero__machine .teleport.teleport--portal:active,
.hero__machine .teleport.teleport--portal.is-charging { transform: none; filter: none; box-shadow: none; }
.hero__machine .teleport.teleport--portal::before,
.hero__machine .teleport.teleport--portal:hover::before { background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }
.hero__machine .teleport.teleport--portal.is-charging::after { animation: none; border: 0; transform: none; }

/* ---------- Realistic galaxy backdrop (Figma-generated astrophotography) ---------- */
.lab__galaxy {
  position: absolute; inset: -10%;
  background: #000 50% 50% / cover no-repeat;
  /* slow on-screen movement: the galaxy turns and breathes, never stops */
  animation: galaxy-drift 160s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
.lab__galaxy::after { /* vignette + soft light spill from the portal */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% calc(var(--pcy) + 6%), rgba(255, 220, 190, .10), transparent 32%),
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(2, 3, 6, .7) 100%);
}
@keyframes galaxy-drift {
  from { transform: rotate(-1.5deg) scale(1.04) translate3d(-1%, 0, 0); }
  to   { transform: rotate(2.5deg)  scale(1.12) translate3d(1.5%, -1%, 0); }
}
/* the photo carries the starfield now; keep only a light parallax layer on top */
.lab__stars--far { display: none; }
.lab__stars--mid { opacity: .45; }
.lab__stars--near { opacity: .8; }
@media (max-width: 700px) { .lab__galaxy { background-position: 42% 22%; } }
@media (prefers-reduced-motion: reduce) { .lab__galaxy { animation: none; } }

/* ---------- Inside the portal: a glimpse of the next Wrld (editorial scene) ---------- */
.lab__scene { inset: 0; border-radius: 50%; overflow: hidden; background: #2a2730; }
.lab__scene img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  /* slow, continuous push-in: on-screen movement eases in and out */
  animation: scene-push 38s var(--ease-in-out) infinite alternate;
  transform-origin: 50% 64%;
}
@keyframes scene-push { from { transform: scale(1.04); } to { transform: scale(1.18) translate3d(0, -1.5%, 0); } }
.lab__horizon { z-index: 1; }
.lab__render { z-index: 2; }
/* type sits in the calm sky above the doorway */
.hero__machine .teleport--portal { place-content: start center; padding-top: 27%; }
.hero__machine .teleport--portal::before { background: radial-gradient(ellipse 70% 45% at 50% 34%, rgba(14, 12, 18, .38), transparent 75%); }
.hero__machine .teleport--portal::after { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255, 246, 236, .24), transparent 75%); }
/* wordmark legibility over the galaxy core */
body[data-route="home"] .hero__mark { text-shadow: 0 2px 30px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .3); }
body[data-route="home"] .hero__we { text-shadow: 0 1px 14px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) { .lab__scene img { animation: none; } }

/* ---------- Outlined wordmark ---------- */
body[data-route="home"] .hero__mark,
body[data-route="home"] .hero__mark span {
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(1.4px, .16vw, 2.4px) #fff;
  text-shadow: none;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 2px 18px rgba(0, 0, 0, .55));
}
body[data-route="home"] .hero__mark span { -webkit-text-stroke-width: 1px; filter: none; }

/* ---------- Bigger manifesto quote ---------- */
body[data-route="home"] .hero__quote { max-width: min(380px, calc(50vw - var(--pr) * 1.75 - var(--gutter) - 16px)) !important; }
body[data-route="home"] .hero__quote blockquote { font-size: clamp(20px, 1.85vw, 28px) !important; line-height: 1.22; }
body[data-route="home"] .hero__quote blockquote span, body[data-route="home"] .hero__quote blockquote em { margin-bottom: .25em; }
body[data-route="home"] .hero__quote em { color: rgba(255, 255, 255, .78); }
@media (max-width: 700px) {
  body[data-route="home"] .hero__quote { max-width: 340px !important; }
  body[data-route="home"] .hero__quote blockquote { font-size: 20px !important; }
}

/* ---------- Earth from orbit: the gateway stands above it ---------- */
/* image: horizon sits 28% down; space above it is faded out so the galaxy shows through */
.lab__planet { display: none; }
.lab__earth {
  position: absolute; left: 50%; width: max(112vw, 150svh); height: auto; max-width: none;
  top: calc(80svh - max(112vw, 150svh) * .5625 * .28);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 19%, #000 26.5%);
          mask-image: linear-gradient(to bottom, transparent 19%, #000 26.5%);
  animation: earth-orbit 90s var(--ease-in-out) infinite alternate; /* slow on-screen drift */
}
@keyframes earth-orbit { from { transform: translateX(-52%); } to { transform: translateX(-48%); } }
@media (max-width: 700px) {
  .lab__earth { width: 280vw; top: calc(84svh - 280vw * .5625 * .28); }
}
@media (prefers-reduced-motion: reduce) { .lab__earth { animation: none; } }
/* wordmark outline: a touch stronger on WRLDS */
body[data-route="home"] .hero__mark span { -webkit-text-stroke-width: 1.4px; }
@media (max-width: 700px) {
  .lab__earth { top: calc(67svh - 280vw * .5625 * .28); }
  body[data-route="home"] .hero__quote blockquote, body[data-route="home"] .hero__quote figcaption { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.85); }
}

/* ==========================================================================
   4K galaxy: star-free 3840×2160 nebula plate + native-resolution star canvas
   ========================================================================== */
.lab__galaxy {
  background-image: url(milkyway-2k.jpg);
  filter: saturate(.92) contrast(1.06);
}
.lab__starcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 700px) { .lab__galaxy { background-position: 42% 22%; } }

/* Blend: grade toward black near Earth, a quiet pool of dark behind the wordmark, soft vignette */
.lab__galaxy::after {
  z-index: 1;
  background:
    radial-gradient(ellipse 30% 20% at 50% 17%, rgba(2, 3, 6, .28), transparent 100%),
    linear-gradient(to bottom, transparent 46%, rgba(2, 3, 6, .55) 66%, rgba(2, 3, 6, .92) 80%),
    radial-gradient(circle at 50% calc(var(--pcy) + 6%), rgba(255, 220, 190, .08), transparent 30%),
    radial-gradient(ellipse 80% 75% at 50% 42%, transparent 50%, rgba(2, 3, 6, .78) 100%);
}
.lab__strut { display: none; }
.lab__stars--mid { display: none; }
.lab__stars--near { opacity: .35; }
/* Earth: soften the seam where the atmosphere meets space */
.lab__earth { -webkit-mask-image: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,.6) 24.5%, #000 27.5%); mask-image: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,.6) 24.5%, #000 27.5%); }

/* ==========================================================================
   REAL SKY — NASA SVS Deep Star Maps 2020 (Gaia DR2 + Hipparcos/Tycho), galactic view.
   Credit: NASA/Goddard SVS; Gaia DR2: ESA/Gaia/DPAC.
   ========================================================================== */
.lab__galaxy {
  inset: -32%;
  background: #000 url(milkyway-2k.jpg) 50% 50% / cover no-repeat;
  filter: none;
  animation: milkyway-drift 180s var(--ease-in-out) infinite alternate;
}
@media (min-width: 1600px), (min-resolution: 2dppx) {
  .lab__galaxy { background-image: url(milkyway-4k.jpg); }
}
/* the band sweeps diagonally behind the gateway; drift is slow, on-screen movement */
@keyframes milkyway-drift {
  from { transform: rotate(-15deg) scale(1.0) translate3d(-1.5%, 0, 0); }
  to   { transform: rotate(-11deg) scale(1.06) translate3d(1.5%, -1%, 0); }
}
@media (max-width: 700px) {
  .lab__galaxy { background-position: 50% 50%; }
  .lab__galaxy { inset: -60%; }
  @keyframes milkyway-drift { from { transform: rotate(-35deg) scale(1); } to { transform: rotate(-31deg) scale(1.05); } }
}
.lab__galaxy::after {
  background:
    radial-gradient(ellipse 30% 20% at 50% 17%, rgba(0, 0, 0, .25), transparent 100%),
    linear-gradient(to bottom, transparent 48%, rgba(0, 0, 0, .5) 66%, rgba(0, 0, 0, .9) 80%),
    radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, .6) 100%);
}
.lab__stars { display: none !important; }
.lab__room { background: #000; }
.hero__credit {
  position: absolute; right: var(--gutter); bottom: 14px; margin: 0; max-width: 46ch; text-align: right;
  font: 400 9.5px/1.4 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .08em; color: rgba(255,255,255,.42);
}
@media (max-width: 700px) { .hero__credit { left: var(--gutter); right: var(--gutter); max-width: none; text-align: center; bottom: 8px; font-size: 8.5px; } }
@media (prefers-reduced-motion: reduce) { .lab__galaxy { animation: none; transform: rotate(-13deg); } }
.hero__credit { max-width: none; white-space: nowrap; font-size: 9px; color: rgba(255,255,255,.62); text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.9); bottom: 12px; }
@media (max-width: 700px) { .hero__credit { white-space: normal; font-size: 8px; } }

/* ==========================================================================
   v5 MACHINE — luxury-house portal (black ceramic, brushed titanium, gold inlay).
   Render geometry: window centre (0.4986, 0.4019), radius 0.2953 of width -> width = 3.386 × pr.
   Nameplate on the plinth: centre (0.50, 0.893), size 0.25 × 0.067 of width.
   ========================================================================== */
body[data-route="home"] { --pcy: calc(33svh + var(--pr) * 1.36); }
@media (max-width: 700px) { body[data-route="home"] { --pcy: calc(29svh + var(--pr) * 1.36); } }
.lab__render {
  width: calc(var(--pr) * 3.386);
  left: calc(var(--pr) - var(--pr) * 3.386 * .4986);
  top: calc(var(--pr) - var(--pr) * 3.386 * .4019);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.85)) drop-shadow(0 0 1px rgba(255,255,255,.15));
}
.lab.is-charging .lab__render { filter: drop-shadow(0 40px 60px rgba(0,0,0,.85)) drop-shadow(0 0 36px rgba(255, 236, 200, .45)) brightness(1.12); }
/* window edge: the gold inlay meets the scene with a fine shadow, like glass set into ceramic */
.lab__horizon { box-shadow: inset 0 0 calc(var(--pr) * .22) calc(var(--pr) * .02) rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(232, 211, 164, .35); }

/* Engraved nameplate: MUTPL WRLDS · Teleport Machine · 2026 */
.lab__plate {
  position: absolute; z-index: 3; left: calc(var(--pr) + var(--pr) * .0047); top: calc(var(--pr) + var(--pr) * 1.663);
  width: calc(var(--pr) * .8465); height: calc(var(--pr) * .227); transform: translate(-50%, -50%);
  display: grid; place-content: center; justify-items: center; gap: calc(var(--pr) * .018);
  color: rgba(52, 40, 22, .82); text-align: center; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 246, 225, .55), 0 -1px 0 rgba(40, 28, 10, .25);   /* engraved: lit lower edge, shaded upper */
}
.lab__plate b { font: 800 calc(var(--pr) * .072)/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .14em; padding-left: .14em; }
.lab__plate span { font: 500 calc(var(--pr) * .038)/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; }

.lab__plate span { white-space: nowrap; letter-spacing: .2em; padding-left: .2em; font-size: calc(var(--pr) * .036); }

/* ==========================================================================
   v6 MACHINE — realistic luxury gateway (black ceramic, titanium, champagne-gold rim light).
   Render geometry: window centre (0.499, 0.4141), radius 0.2711 -> width = 3.689 × pr.
   Nameplate: centre (0.498, 0.854), size 0.324 × 0.075 of width.
   ========================================================================== */
body[data-route="home"] { --pcy: calc(33svh + var(--pr) * 1.46); }
@media (max-width: 700px) { body[data-route="home"] { --pcy: calc(29svh + var(--pr) * 1.46); } }
.lab__render {
  width: calc(var(--pr) * 3.689);
  left: calc(var(--pr) - var(--pr) * 3.689 * .499);
  top: calc(var(--pr) - var(--pr) * 3.689 * .4141);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.85));
}
.lab.is-charging .lab__render { filter: drop-shadow(0 40px 60px rgba(0,0,0,.85)) drop-shadow(0 0 40px rgba(255, 214, 150, .5)) brightness(1.15); }
/* the gold rim glows onto the scene edge */
.lab__horizon { box-shadow: inset 0 0 calc(var(--pr) * .2) calc(var(--pr) * .02) rgba(255, 200, 130, .35), inset 0 0 calc(var(--pr) * .06) rgba(0,0,0,.5); }
.lab__plate {
  left: calc(var(--pr) - var(--pr) * .004); top: calc(var(--pr) + var(--pr) * 1.623);
  width: calc(var(--pr) * 1.195); height: calc(var(--pr) * .277);
}
.lab__plate b { font-size: calc(var(--pr) * .088); }
.lab__plate span { font-size: calc(var(--pr) * .044); }

body[data-route="home"] { --pr: min(14.5vw, 18.4svh); }
@media (max-width: 700px) { body[data-route="home"] { --pr: min(28vw, 16svh); } }

/* ==========================================================================
   Blend the gateway into Earth: earthlight from below, base fading into the
   atmosphere, haze at the horizon, and a soft contact shadow for weight.
   Render box: width 3.689pr, left pr-1.8408pr, top pr-1.5276pr; base bottom ≈ pr+1.903pr.
   ========================================================================== */
.lab__render {
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, rgba(0,0,0,.55) 90%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 84%, rgba(0,0,0,.55) 90%, transparent 96%);
}
/* Earth's blue light bouncing up onto the machine, clipped to the machine's own shape */
.lab__uplight {
  position: absolute; z-index: 2; pointer-events: none;
  width: calc(var(--pr) * 3.689); aspect-ratio: 1;
  left: calc(var(--pr) - var(--pr) * 3.689 * .499); top: calc(var(--pr) - var(--pr) * 3.689 * .4141);
  background: linear-gradient(to top, rgba(110, 175, 255, .55) 4%, rgba(110, 175, 255, .22) 22%, transparent 45%);
  -webkit-mask: url(portal-luxe-real.webp) center / 100% 100% no-repeat;
          mask: url(portal-luxe-real.webp) center / 100% 100% no-repeat;
  mix-blend-mode: screen; opacity: .9;
}
/* atmospheric haze in front of the base where it meets the horizon */
.lab__haze {
  position: absolute; z-index: 4; pointer-events: none;
  left: 50%; top: calc(var(--pr) + var(--pr) * 1.98); width: calc(var(--pr) * 5.4); height: calc(var(--pr) * .9);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(170, 210, 255, .30), rgba(120, 180, 255, .12) 45%, transparent 72%);
  filter: blur(6px);
}
/* contact shadow under the plinth */
.lab__contact {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: calc(var(--pr) + var(--pr) * 1.86); width: calc(var(--pr) * 3.6); height: calc(var(--pr) * .55);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 55%, transparent);
  filter: blur(10px);
}
.lab__plate { z-index: 3; }
.lab.is-entering .lab__haze, .lab.is-entering .lab__uplight { opacity: 0; transition: opacity .6s ease; }

/* ==========================================================================
   v7 MACHINE — clean gateway render, standing flush on Earth's horizon.
   Render geometry: window centre (0.4989, 0.4176), radius 0.2942 -> width = 3.399 × pr.
   Base bottom edge at 0.957 -> 1.833pr below window centre. Plate centre (0.50, 0.908), 0.328 × 0.055.
   No blend layers: crisp object, crisp horizon.
   ========================================================================== */
body[data-route="home"] { --pr: min(13.5vw, 17svh); --pcy: calc(33svh + var(--pr) * 1.36); --hz: calc(var(--pcy) + var(--pr) * 1.833); }
@media (max-width: 700px) { body[data-route="home"] { --pr: min(27vw, 15svh); --pcy: calc(29svh + var(--pr) * 1.36); } }
.lab__render {
  width: calc(var(--pr) * 3.399);
  left: calc(var(--pr) - var(--pr) * 3.399 * .4989);
  top: calc(var(--pr) - var(--pr) * 3.399 * .4176);
  -webkit-mask-image: none; mask-image: none;
  filter: none;
}
.lab.is-charging .lab__render { filter: drop-shadow(0 0 36px rgba(255, 214, 150, .5)) brightness(1.12); }
.lab__uplight, .lab__haze, .lab__contact { display: none !important; }
/* Earth's horizon meets the plinth's bottom edge exactly */
.lab__earth { top: calc(var(--hz) - max(112vw, 150svh) * .5625 * .28); }
@media (max-width: 700px) { .lab__earth { top: calc(var(--hz) - 280vw * .5625 * .28); } }
.lab__plate {
  left: calc(var(--pr) + var(--pr) * .004); top: calc(var(--pr) + var(--pr) * 1.667);
  width: calc(var(--pr) * 1.115); height: calc(var(--pr) * .187);
  gap: calc(var(--pr) * .012);
}
.lab__plate b { font-size: calc(var(--pr) * .074); }
.lab__plate span { font-size: calc(var(--pr) * .036); }

.lab__plate span { color: rgba(38, 28, 12, .92); font-weight: 600; }

body[data-route="home"] .hero__we { font-size: clamp(21px, 1.8vw, 27px); margin-top: clamp(12px, 1.6svh, 18px); }
@media (max-width: 700px) { body[data-route="home"] .hero__we { font-size: 19px; } }

body[data-route="home"] .hero__we { font-size: clamp(28px, 2.45vw, 37px); margin-top: clamp(14px, 1.8svh, 20px); }
body[data-route="home"] { --pcy: calc(36svh + var(--pr) * 1.36); }
@media (max-width: 700px) { body[data-route="home"] .hero__we { font-size: 25px; } body[data-route="home"] { --pcy: calc(31svh + var(--pr) * 1.36); } }

/* "We are creators" in the brand face (Archivo Expanded), locked up with the wordmark */
body[data-route="home"] .hero__we {
  font: 600 clamp(17px, 1.55vw, 24px)/1 'Archivo', var(--f-ui); font-stretch: 125%; font-style: normal;
  text-transform: uppercase; letter-spacing: .34em; padding-left: .34em; color: #fff;
  margin-top: clamp(16px, 2.2svh, 24px);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}
@media (max-width: 700px) { body[data-route="home"] .hero__we { font-size: 14px; letter-spacing: .28em; padding-left: .28em; } }

/* WRLDS bigger */
body[data-route="home"] .hero__mark span { font-size: .46em; letter-spacing: .66em; padding-left: .66em; margin-top: .42em; -webkit-text-stroke-width: clamp(1.4px, .13vw, 2px); }

/* ==========================================================================
   v8 HOME — one photograph: the portal scene, full screen.
   No galaxy, no Earth, no machine. Wordmark, TELEPORT and the manifesto line sit on it.
   ========================================================================== */
.lab__room { -webkit-mask: none !important; mask: none !important; background: #1d1a20; }
.lab__galaxy, .lab__earth, .lab__planet, .lab__stars, .lab__machine { display: none !important; }
.lab__scenebg { position: absolute; inset: 0; overflow: hidden; }
.lab__scenebg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  transform-origin: 50% 66%;
  animation: hero-push 40s var(--ease-in-out) infinite alternate; /* slow, continuous push-in */
}
@keyframes hero-push { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(0, -1%, 0); } }
.lab__scenebg::after { /* quiet grading for type: soft top for the lockup, soft lower-left for the quote */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 9, 14, .55) 0%, rgba(10, 9, 14, .18) 32%, transparent 48%),
    radial-gradient(ellipse 45% 40% at 0% 100%, rgba(10, 9, 14, .55), transparent 70%);
}
/* entering: walk toward the doorway */
.lab { transform-origin: 50% 64%; }

/* TELEPORT sits above the glowing doorway */
body[data-route="home"] .hero__machine {
  top: 54svh; width: auto; height: auto; transform: translate(-50%, -50%);
}
.hero.is-leaving .hero__machine { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
body[data-route="home"] .hero__machine .teleport--portal {
  position: relative; inset: auto; border-radius: 0; padding: 22px 46px 20px;
}
body[data-route="home"] .hero__machine .teleport--portal::before,
body[data-route="home"] .hero__machine .teleport--portal::after { inset: -30px -60px; border-radius: 50%; }
body[data-route="home"] .hero__machine .teleport--portal::before { background: radial-gradient(closest-side, rgba(14, 12, 18, .32), transparent 80%); }
body[data-route="home"] .hero__machine .teleport--portal::after { background: radial-gradient(closest-side, rgba(255, 244, 230, .22), transparent 80%); }
.teleport__word { font-size: clamp(16px, 1.35vw, 21px); }
@media (max-width: 700px) {
  .lab__scenebg img { object-position: 47% 60%; }
  body[data-route="home"] .hero__machine { top: 50svh; }
}
@media (prefers-reduced-motion: reduce) { .lab__scenebg img { animation: none; } }

body[data-route="home"] .hero__machine { top: 45svh; }
@media (max-width: 700px) { body[data-route="home"] .hero__machine { top: 42svh; } }

/* ==========================================================================
   v9 HOME — the glowing doorway is the centre of the page, and TELEPORT lives inside it.
   Doorway in the photo: centre (0.5248, 0.6328), size 0.021 × 0.13 of the square image.
   The photo is placed so that point sits at (50vw, --dy); the push-in scales around it.
   ========================================================================== */
body[data-route="home"] { --z: 1.35; --S: calc(max(100vw, 100svh) * var(--z)); --dy: 58svh; }
@media (max-aspect-ratio: 1/1) { body[data-route="home"] { --z: 1.4; --dy: 56svh; } }
.lab__scenebg img {
  position: absolute; max-width: none; object-fit: fill;
  width: var(--S); height: var(--S);
  left: calc(50vw - var(--S) * .5248); top: calc(var(--dy) - var(--S) * .6328);
  transform-origin: 52.48% 63.28%;
  animation: door-push 40s var(--ease-in-out) infinite alternate;
}
@keyframes door-push { from { transform: scale(1); } to { transform: scale(1.08); } }
.lab { transform-origin: 50% var(--dy); }     /* TELEPORT flies straight into the doorway */

/* TELEPORT inside the doorway, set vertically, glowing like the frame */
body[data-route="home"] .hero__machine { top: var(--dy); left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; }
body[data-route="home"] .hero__machine .teleport--portal {
  padding: 0; border-radius: 0;
  width: max(48px, calc(var(--S) * .021 + 28px)); height: calc(var(--S) * .13);
  place-content: center;
}
body[data-route="home"] .hero__machine .teleport--portal::before { background: none; }
body[data-route="home"] .hero__machine .teleport--portal::after {
  inset: -18% -160%; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 228, 185, .38), transparent 70%);
}
body[data-route="home"] .teleport__word {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Archivo', var(--f-ui); font-stretch: 100%; font-weight: 700;
  font-size: clamp(10px, calc(var(--S) * .0085), 18px);
  letter-spacing: calc(var(--S) * .0058); padding: 0;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 236, 205, .95), 0 0 16px rgba(255, 196, 120, .75), 0 0 30px rgba(255, 170, 90, .45);
  transition: text-shadow .4s ease, transform .16s var(--ease-out);
}
body[data-route="home"] .teleport__word::after { display: none; }
body[data-route="home"] .teleport__sub { display: none; }
@media (hover: hover) and (pointer: fine) {
  body[data-route="home"] .hero__machine .teleport--portal:hover .teleport__word {
    letter-spacing: calc(var(--S) * .0058);
    text-shadow: 0 0 6px #fff, 0 0 22px rgba(255, 210, 140, 1), 0 0 44px rgba(255, 180, 100, .8);
  }
}
body[data-route="home"] .hero__machine .teleport--portal:focus-visible { outline-offset: 10px; }

/* ==========================================================================
   v10 HOME — a regular glowing doorway at the centre of the page, the figure just in front.
   Photo 16:9. Door: centre (0.5068, 0.4873), size 0.110 W × 0.2616 H.
   --Sw is the displayed photo width; the door centre is pinned to (50vw, --dy).
   ========================================================================== */
body[data-route="home"] { --z: 1.15; --dy: 55svh; --Sw: calc(max(100vw, 177.78svh) * var(--z)); }
@media (max-aspect-ratio: 1/1) { body[data-route="home"] { --z: 1.03; --dy: 48svh; } }
.lab__scenebg img {
  width: var(--Sw); height: calc(var(--Sw) * .5625);
  left: calc(50vw - var(--Sw) * .5068); top: calc(var(--dy) - var(--Sw) * .5625 * .4873);
  transform-origin: 50.68% 48.73%;
}
.lab { transform-origin: 50% var(--dy); }

/* TELEPORT inside the door: dark ink on the glowing light */
body[data-route="home"] .hero__machine { top: var(--dy); }
body[data-route="home"] .hero__machine .teleport--portal {
  width: calc(var(--Sw) * .110 * .86); height: calc(var(--Sw) * .5625 * .2616 * .86);
  gap: calc(var(--Sw) * .004);
}
body[data-route="home"] .teleport__word {
  writing-mode: horizontal-tb; text-orientation: mixed;
  font: 700 calc(var(--Sw) * .0098)/1 'Archivo', var(--f-ui); font-stretch: 125%;
  letter-spacing: .34em; padding: 0 0 calc(var(--Sw) * .004) .34em;
  color: rgba(28, 20, 14, .9); text-shadow: 0 0 1px rgba(255, 245, 230, .6);
}
body[data-route="home"] .teleport__word::after { display: block; background: rgba(28, 20, 14, .75); width: 28%; }
body[data-route="home"] .teleport__sub {
  display: block; color: rgba(40, 28, 18, .78); text-shadow: none;
  font-size: calc(var(--Sw) * .0068);
}
@media (hover: hover) and (pointer: fine) {
  body[data-route="home"] .hero__machine .teleport--portal:hover .teleport__word { letter-spacing: .4em; text-shadow: 0 0 1px rgba(255,245,230,.6); }
  body[data-route="home"] .hero__machine .teleport--portal:hover .teleport__word::after { width: 100%; }
}
body[data-route="home"] .hero__machine .teleport--portal::after {
  inset: -22% -40%; border-radius: 40%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 236, 205, .35), transparent 72%);
}
@media (max-aspect-ratio: 1/1) {
  body[data-route="home"] .teleport__word { font-size: max(12px, calc(var(--Sw) * .0098)); }
  body[data-route="home"] .teleport__sub { font-size: max(10px, calc(var(--Sw) * .0068)); }
}

body[data-route="home"] .teleport__word { font-size: calc(var(--Sw) * .0074); letter-spacing: .3em; padding-left: .3em; }
body[data-route="home"] .teleport__sub { font-size: calc(var(--Sw) * .006); }
@media (hover: hover) and (pointer: fine) { body[data-route="home"] .hero__machine .teleport--portal:hover .teleport__word { letter-spacing: .34em; } }
@media (max-aspect-ratio: 1/1) { body[data-route="home"] .teleport__word { font-size: max(11px, calc(var(--Sw) * .0074)); } body[data-route="home"] .teleport__sub { font-size: max(9.5px, calc(var(--Sw) * .006)); } }

/* v11 — empty scene, regular door. Door: centre (0.4997, 0.4572), size 0.0775 W × 0.331 H. */
body[data-route="home"] { --dy: 52svh; }
@media (max-aspect-ratio: 1/1) { body[data-route="home"] { --dy: 46svh; } }
.lab__scenebg img {
  left: calc(50vw - var(--Sw) * .4997); top: calc(var(--dy) - var(--Sw) * .5625 * .4572);
  transform-origin: 49.97% 45.72%;
}
body[data-route="home"] .hero__machine .teleport--portal {
  width: calc(var(--Sw) * .0775 * .84); height: calc(var(--Sw) * .5625 * .331 * .84);
}
body[data-route="home"] .teleport__word { font-size: calc(var(--Sw) * .0062); letter-spacing: .28em; padding-left: .28em; }
body[data-route="home"] .teleport__sub { font-size: calc(var(--Sw) * .0054); }
@media (max-aspect-ratio: 1/1) {
  body[data-route="home"] .teleport__word { font-size: max(10.5px, calc(var(--Sw) * .0062)); letter-spacing: .24em; padding-left: .24em; }
  body[data-route="home"] .teleport__sub { font-size: max(9px, calc(var(--Sw) * .0054)); }
}

@media (min-aspect-ratio: 1/1) { body[data-route="home"] { --z: 1.3; --dy: 58svh; } }

/* ==========================================================================
   SYMMETRY PASS (home) — one centre line for everything.
   ========================================================================== */
/* Nav: three equal-weight columns so the links sit exactly on the centre line */
body[data-route="home"] .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
body[data-route="home"] .nav__mark { justify-self: start; }
body[data-route="home"] .nav__links { justify-self: center; }
body[data-route="home"] .nav__tools { justify-self: end; }

/* Manifesto line: bottom centre */
body[data-route="home"] .hero__quote {
  left: 50% !important; right: auto !important; bottom: clamp(26px, 5.5svh, 56px) !important;
  transform: translateX(-50%); width: min(720px, calc(100vw - var(--gutter) * 2)); max-width: none !important;
  text-align: center; border: 0; padding: 0;
}
body[data-route="home"] .hero__quote blockquote { font-size: clamp(18px, 1.55vw, 24px) !important; line-height: 1.3; }
body[data-route="home"] .hero__quote blockquote span,
body[data-route="home"] .hero__quote blockquote em { display: block; white-space: nowrap !important; margin: 0; }
body[data-route="home"] .hero__quote figcaption { margin-top: 10px; display: flex; justify-content: center; }
body[data-route="home"] .hero__quote figcaption a { padding-left: .3em; }
body[data-route="home"] .hero__quote blockquote, body[data-route="home"] .hero__quote figcaption { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 22px rgba(10, 8, 14, .85); }
@media (max-width: 560px) {
  body[data-route="home"] .hero__quote blockquote span,
  body[data-route="home"] .hero__quote blockquote em { white-space: normal !important; }
  body[data-route="home"] .hero__quote blockquote { font-size: 17px !important; }
}

/* Even shading: top band for the lockup, bottom band for the quote — no corner bias */
.lab__scenebg::after {
  background:
    linear-gradient(to bottom, rgba(10, 9, 14, .55) 0%, rgba(10, 9, 14, .16) 30%, transparent 46%),
    linear-gradient(to top, rgba(10, 9, 14, .62) 0%, rgba(10, 9, 14, .2) 18%, transparent 32%);
}
body[data-route="home"] .nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
body[data-route="home"] .hero__quote figcaption a { padding-left: 0; }

@media (max-width: 1080px) { body[data-route="home"] .nav { display: flex; } }

/* ==========================================================================
   BREATHING ROOM — lockup and door each get their own space, with even gaps.
   Door photo limit: the image must cover the top edge, so --dy ≤ 0.257 × --Sw.
   ========================================================================== */
body[data-route="home"] .hero__inner { top: calc(var(--nav-h) + 2.5svh); }
body[data-route="home"] .hero__mark { font-size: clamp(36px, min(7vw, 9.6svh), 124px); }
body[data-route="home"] .hero__mark span { margin-top: .38em; }
body[data-route="home"] .hero__we { font-size: clamp(13px, 1.25vw, 19px); margin-top: clamp(12px, 1.9svh, 20px); }
@media (min-aspect-ratio: 1/1) { body[data-route="home"] { --z: 1.2; --dy: 54.5svh; } }
@media (max-aspect-ratio: 1/1) {
  body[data-route="home"] { --dy: 47svh; }
  body[data-route="home"] .hero__mark { font-size: clamp(34px, 11.5vw, 52px); }
  body[data-route="home"] .hero__we { font-size: 13px; }
}


/* ==========================================================================
   PAINTINGS — a quiet gallery room: warm off-white walls, works hung large,
   museum wall labels, full-screen viewer.
   ========================================================================== */
body[data-route="gallery"] .sky__veil { background: #F2EFEA; }
body[data-route="gallery"] .nav { color: var(--ink); }
body[data-route="gallery"] .nav.is-solid { background: rgba(242, 239, 234, .82); border-bottom-color: rgba(15,16,19,.06); }
.gallery { padding: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) 0 clamp(80px, 12vh, 140px); color: var(--ink); }
.gallery__head { text-align: center; margin-bottom: clamp(56px, 9vh, 110px); }
.gallery__head .eyebrow { color: rgba(15,16,19,.55); margin: 0; }
.gallery__title {
  margin: 18px 0 0; font: 800 clamp(44px, 7vw, 112px)/.9 'Archivo', var(--f-ui); font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .02em;
}
.gallery__intro { margin: 22px 0 0; font: italic 400 clamp(18px, 1.6vw, 24px)/1.4 var(--f-serif); color: rgba(15,16,19,.7); }
.gallery__wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 64px); align-items: end; }
@media (max-width: 960px) { .gallery__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery__wall { grid-template-columns: 1fr; } }
.work { margin: 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.work__frame {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: zoom-in;
  background: #fff; padding: clamp(10px, 1.2vw, 18px);
  box-shadow: 0 1px 2px rgba(15,16,19,.08), 0 18px 40px -22px rgba(15,16,19,.35);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.work__frame img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .work__frame:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15,16,19,.08), 0 30px 60px -26px rgba(15,16,19,.45); }
}
.work__frame:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.work__label { display: grid; gap: 5px; justify-items: center; }
.work__label b { font: 700 12px/1.3 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }
.work__label span { font: 400 13px/1.4 var(--f-ui); color: rgba(15,16,19,.6); }
.work__status { font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; }
.work__status--available { color: #3A6B4B !important; }
.work__inquire { margin-top: 4px; font-size: 11px; }
.work--empty .work__frame { cursor: default; aspect-ratio: 4 / 5; display: grid; place-items: center; background: transparent; box-shadow: none; border: 1px dashed rgba(15,16,19,.25); }
.work--empty .work__frame span { font: 400 11px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; color: rgba(15,16,19,.45); }
.work--empty:hover .work__frame { transform: none; }
.gallery__note { text-align: center; margin: clamp(56px, 8vh, 96px) 0 0; font: italic 400 17px/1.4 var(--f-serif); color: rgba(15,16,19,.55); }

/* Full-screen viewer */
.lightbox { position: fixed; inset: 0; z-index: 45; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; background: rgba(14, 13, 16, .96); color: #F2EFEA; animation: fade-in .25s ease; }
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; display: grid; gap: 16px; justify-items: center; padding: 64px 0 40px; }
.lightbox__figure img { max-width: 100%; max-height: calc(100svh - 160px); object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox__figure figcaption { font: 400 13px/1.4 var(--f-ui); color: rgba(242,239,234,.75); text-align: center; }
.lightbox__figure figcaption b { font: 700 12px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: #F2EFEA; margin-right: 8px; }
.lightbox .icon-btn { color: #F2EFEA; justify-self: center; }
.lightbox__close { position: absolute; top: 16px; right: 16px; }
/* incomplete rows centre themselves (symmetry) */
.gallery__wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.gallery__wall > .work { flex: 0 0 calc((100% - 2 * clamp(28px, 4vw, 64px)) / 3); }
@media (max-width: 960px) { .gallery__wall > .work { flex-basis: calc((100% - clamp(28px, 4vw, 64px)) / 2); } }
@media (max-width: 560px) { .gallery__wall > .work { flex-basis: 100%; } }

/* ==========================================================================
   FRONT / BACK — every piece shows both sides.
   Crossfade with a whisper of blur so the turn reads as one motion (Emil).
   ========================================================================== */
.artifact__case { position: relative; }
.artifact__case .artifact__back { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.artifact__case img { transition: opacity .35s ease, filter .35s ease, transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .artifact:hover .artifact__case:has(.artifact__back) .artifact__front { opacity: 0; filter: blur(3px); }
  .artifact:hover .artifact__case .artifact__back { opacity: 1; filter: none; }
}

.pdp__flip { all: unset; display: block; position: relative; width: 100%; height: 100%; cursor: pointer; }
.pdp__flip:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.pdp__img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease, filter .35s ease, transform .35s var(--ease-out); }
.pdp__img--back { position: absolute; inset: 0; opacity: 0; filter: blur(3px); transform: scale(.985); }
.pdp__stage[data-view="back"] .pdp__img--front { opacity: 0; filter: blur(3px); transform: scale(.985); }
.pdp__stage[data-view="back"] .pdp__img--back { opacity: 1; filter: none; transform: none; }

.view-switch { display: flex; justify-content: center; gap: 4px; margin: 14px auto 0; padding: 4px; width: max-content; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.view-switch button { min-height: 40px; min-width: 88px; padding: 0 18px; border-radius: 999px; font: 600 11px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); transition: background .2s ease, color .2s ease, transform .16s var(--ease-out); }
.view-switch button[aria-checked="true"] { background: var(--ink); color: var(--bone); }
.view-switch button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .pdp__img, .artifact__case img { transition: opacity .2s ease; filter: none !important; transform: none !important; } }


/* ==========================================================================
   360° TURN — product page (drag) and collection cards (hover), real 3D.
   ========================================================================== */
.pdp__flip { perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.pdp__flip.is-dragging { cursor: grabbing; }
.pdp__img, .pdp__img--back,
.pdp__stage[data-view="back"] .pdp__img--front,
.pdp__stage[data-view="back"] .pdp__img--back { opacity: 1; transition: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; -webkit-user-drag: none; }
.pdp__img--back { transform: rotateY(180deg); filter: none; }
.spin-hint { margin: 10px 0 0; text-align: center; font: 500 10px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: rgba(15,16,19,.55); }
.spin-hint::before { content: '↻  '; letter-spacing: 0; }

/* cards: a real 3D flip on hover */
.artifact__case { perspective: 1200px; }
.artifact__case .artifact__front, .artifact__case .artifact__back {
  -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 1 !important; filter: drop-shadow(0 28px 26px rgba(20, 30, 50, .32)) !important;
  transition: transform .8s var(--ease-in-out);
}
.artifact__case .artifact__back { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .artifact:hover .artifact__case:has(.artifact__back) .artifact__front { transform: rotateY(-180deg); }
  .artifact:hover .artifact__case .artifact__back { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .artifact__case .artifact__front, .artifact__case .artifact__back { transition: none; }
}

.pdp__stage .pdp__img, .pdp__stage .artifact__case img.pdp__img { transition: none !important; }

.spin-hint, .view-switch { user-select: none; -webkit-user-select: none; }


/* Front / Back switch only — the piece turns over with a 3D flip when a side is chosen */
.pdp__flip { cursor: default; touch-action: auto; }
.pdp__stage .pdp__img, .pdp__stage .artifact__case img.pdp__img {
  transition: transform .8s var(--ease-in-out) !important;
  filter: drop-shadow(0 28px 26px rgba(20, 30, 50, .32)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .pdp__stage .pdp__img, .pdp__stage .artifact__case img.pdp__img { transition: none !important; }
}


/* ==========================================================================
   FRONT / BACK — plain photo swap (no 3D). Thumbnails under the main image.
   ========================================================================== */
.pdp__stage .pdp__img, .pdp__stage .artifact__case img.pdp__img,
.pdp__stage[data-view="back"] .pdp__img--front, .pdp__stage[data-view="back"] .pdp__img--back {
  transform: none !important; -webkit-backface-visibility: visible; backface-visibility: visible;
  transition: opacity .25s ease !important;
}
.pdp__stage .pdp__img--back { position: absolute; inset: 0; opacity: 0; }
.pdp__stage[data-view="back"] .pdp__img--front { opacity: 0; }
.pdp__stage[data-view="back"] .pdp__img--back { opacity: 1; }
.view-switch { display: none; }

.pdp__thumbs { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.pdp__thumb {
  display: grid; justify-items: center; gap: 8px; padding: 8px 8px 10px; width: 92px; border-radius: 14px;
  background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .2s ease, background .2s ease, transform .16s var(--ease-out);
}
.pdp__thumb img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(20,30,50,.25)); }
.pdp__thumb span { font: 600 10px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.pdp__thumb[aria-pressed="true"] { background: rgba(255,255,255,.85); border-color: var(--ink); }
.pdp__thumb:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pdp__thumb:hover { background: rgba(255,255,255,.7); } }

/* collection: hover simply swaps to the back photo (no rotation) */
.artifact__case .artifact__front, .artifact__case .artifact__back { transform: none !important; -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity .3s ease; }
.artifact__case .artifact__back { opacity: 0 !important; }
@media (hover: hover) and (pointer: fine) {
  .artifact:hover .artifact__case:has(.artifact__back) .artifact__front { opacity: 0 !important; }
  .artifact:hover .artifact__case .artifact__back { opacity: 1 !important; }
}


/* Product photo + 1/2 switch always fit on one screen; switch sits right under the garment */
.pdp__stage .artifact__float { width: min(100%, calc(100svh - var(--nav-h) - 210px)); margin: 0 auto; }
.pdp__thumbs { margin-top: 10px; gap: 10px; }
.pdp__thumb { grid-template-columns: 40px auto; display: inline-grid; align-items: center; gap: 10px; width: auto; padding: 6px 16px 6px 6px; border-radius: 999px; }
.pdp__thumb img { width: 40px; height: 40px; filter: drop-shadow(0 3px 4px rgba(20,30,50,.25)); }
.pdp__thumb span { font-size: 11px; }
.pdp__thumb span b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: rgba(15,16,19,.08); font-weight: 700; letter-spacing: 0; }
.pdp__thumb[aria-pressed="true"] span b { background: var(--ink); color: var(--bone); }
@media (max-width: 900px) { .pdp__stage .artifact__float { width: min(100%, 64svh); } }


/* FLIP button under the product; the swap itself is instant (the card-turn hides it) */
.pdp__stage .pdp__img, .pdp__stage .artifact__case img.pdp__img { transition: none !important; }
.pdp__flip { transform-origin: 50% 50%; }
.pdp__flipbtn {
  display: flex; align-items: center; gap: 10px; margin: 12px auto 0; min-height: 46px; padding: 0 26px 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--bone);
  font: 700 12px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(15,16,19,.6);
  transition: transform .16s var(--ease-out), background .2s ease;
}
.pdp__flipbtn span { padding-left: .3em; }
.pdp__flipbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-out); }
.pdp__flipbtn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pdp__flipbtn:hover { background: #24262c; } .pdp__flipbtn:hover svg { transform: rotate(180deg); } }
.pdp__thumbs { display: none !important; }

/* Seamless flip: the shadow lives on the still frame, not on the flipping images (no clipped box edges) */
.pdp__stage .pdp__img, .pdp__stage .artifact__case img.pdp__img { filter: none !important; will-change: auto !important; }
.pdp__stage .pdp__flip { will-change: auto; }
.pdp__stage .artifact__case { filter: drop-shadow(0 28px 26px rgba(20, 30, 50, .32)); overflow: visible !important; }

/* ==========================================================================
   ALIGNED GRID — every product on the same row line, frames equal, labels level.
   The float stays, but all pieces move together so rows stay flush.
   ========================================================================== */
.field > .artifact, .field > .artifact:nth-child(n) { margin-top: 0 !important; }
.field { align-items: stretch; }
.artifact { --dur: 7s !important; --delay: 0s !important; display: flex; flex-direction: column; }
.artifact__meta { margin-top: auto; padding-top: 10px; align-items: flex-start; }
.artifact__meta > div { min-height: 2.9em; }
.artifact__price { line-height: 1.3; }

/* One floor line: every garment stands on the bottom of its frame, so no piece sits higher than another */
.field .artifact__case img, .field .artifact__case .artifact__front, .field .artifact__case .artifact__back { object-position: 50% 100% !important; }

/* Manifesto line: bigger, in the brand face (Archivo Expanded) */
body[data-route="home"] .hero__quote { width: min(1000px, calc(100vw - var(--gutter) * 2)); }
body[data-route="home"] .hero__quote blockquote { font-family: 'Archivo', var(--f-ui) !important; font-stretch: 125%; font-size: clamp(19px, 1.75vw, 28px) !important; line-height: 1.3; letter-spacing: .01em; }
body[data-route="home"] .hero__quote blockquote span { font-weight: 600; color: #fff; }
body[data-route="home"] .hero__quote blockquote em { font-style: normal; font-weight: 400; color: rgba(255,255,255,.82); }
@media (max-width: 700px) { body[data-route="home"] .hero__quote blockquote { font-size: 16px !important; } }

/* Full text nav only when it fits beside the logo; otherwise the menu button (no overlap) */
@media (max-width: 1499px) {
  .nav__links { display: none !important; }
  .menu-btn { display: inline-grid; }
  .nav__shop { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 600 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
}


/* ---------------- RELEASE GATE (pre-release: portal + date only) ---------------- */
[data-prelaunch] .nav__links, [data-prelaunch] .nav__tools, [data-prelaunch] .menu-btn, [data-prelaunch] .menu, [data-prelaunch] .skip { display: none !important; }
[data-prelaunch] .nav { justify-content: center; grid-template-columns: 1fr !important; }
[data-prelaunch] .nav__mark { justify-self: center; pointer-events: none; }
.release { text-align: center; display: grid; justify-items: center; gap: 10px; }
.release__label { margin: 0; font: 600 11px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.release__date { margin: 0; font: 800 clamp(26px, 3.2vw, 48px)/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .12em; padding-left: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.release__count { margin: 6px 0 0; display: flex; gap: clamp(14px, 2vw, 28px); justify-content: center; min-height: 40px; }
.release__count span { display: grid; justify-items: center; gap: 6px; font: 500 9.5px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.release__count b { font: 600 clamp(18px, 1.8vw, 26px)/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .06em; padding-left: .06em; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .release__date { font-size: 24px; } .release__count b { font-size: 18px; } }

[data-prelaunch] .nav { display: none !important; }


/* ---------------- TELEPORT GATE ---------------- */
.modal:has(.gate) .modal__panel { width: min(460px, 100%); background: rgba(14, 15, 19, .82); color: #f3f1ec; border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 60px -10px rgba(255, 214, 160, .25); padding: 34px 28px 26px; }
.modal:has(.gate) .modal__close { color: #f3f1ec; }
.gate { text-align: center; }
.gate__kicker { margin: 0 0 10px; font: 600 10.5px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: #e6c68f; }
.modal .gate__title { margin: 0 0 10px; font: 800 22px/1.1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
.gate__lede { margin: 0 0 18px; font: 400 14.5px/1.5 var(--f-ui); color: rgba(243,241,236,.82); }
.gate__lede b { color: #fff; }
.gate__fields { display: grid; gap: 10px; text-align: left; }
.gate__field { display: grid; gap: 6px; }
.gate__field span, .gate__unlock label { font: 600 10px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .28em; text-transform: uppercase; color: rgba(243,241,236,.66); }
.gate input[type=email], .gate input[type=tel], .gate input[name=gate_name], .gate__unlock input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: 500 15px/1 var(--f-ui); }
.gate input:focus { outline: 2px solid #e6c68f; outline-offset: 1px; border-color: transparent; }
.gate__check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin: 4px 0 2px; font: 400 12px/1.45 var(--f-ui); color: rgba(243,241,236,.72); cursor: pointer; }
.gate__check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #e6c68f; }
.gate__go { min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: linear-gradient(180deg, #f3dcae, #d8b46a); color: #141414; font: 700 12px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .26em; text-transform: uppercase; cursor: pointer; transition: transform .16s var(--ease-out), filter .2s ease; }
.gate__go:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .gate__go:hover { filter: brightness(1.06); } }
.gate__go--wide { width: 100%; margin-top: 6px; }
.gate__go:disabled { opacity: .6; cursor: wait; }
.gate__fine { margin: 10px 0 0; font: 400 11.5px/1.45 var(--f-ui); color: rgba(243,241,236,.55); text-align: center; }
.gate__error { min-height: 1em; margin: 8px 0 0; font: 500 13px/1.4 var(--f-ui); color: #ffb4a8; }
.gate__error:empty { display: none; }
.gate__skip { margin-top: 14px; background: none; border: 0; color: rgba(243,241,236,.6); font: 500 12px/1 var(--f-ui); letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate__code { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 10px; padding: 10px 10px 10px 18px; border-radius: 14px; border: 1px dashed rgba(230,198,143,.7); background: rgba(230,198,143,.08); }
.gate__code span { font: 800 22px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .14em; color: #fff; }
.gate__copy { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.gate__unlock { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); text-align: left; }
.gate__row { display: flex; gap: 8px; }
.gate__row input { flex: 1; text-transform: uppercase; letter-spacing: .2em; }
@media (max-width: 420px) { .gate__row { flex-direction: column; } }
#mw-signup-host { display: none !important; }


/* gate: second path + release reminder */
.gate__unlock label { color: rgba(243,241,236,.8); }
.gate__release { display: grid; justify-items: center; gap: 4px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.gate__release span { font: 600 10px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: #e6c68f; }
.gate__release b { font: 800 17px/1.2 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.gate__release small { font: 400 12px/1.3 var(--f-ui); color: rgba(243,241,236,.6); }
.modal:has(.gate) .modal__panel { max-height: 92svh; }
@media (max-width: 700px) {
  .modal:has(.gate) { padding: 10px; }
  .modal:has(.gate) .modal__panel { padding: 22px 18px 16px; }
  .gate__kicker { margin-bottom: 6px; }
  .modal .gate__title { font-size: 19px; margin-bottom: 6px; }
  .gate__lede { margin-bottom: 10px; font-size: 13.5px; }
  .gate__fields { gap: 7px; }
  .gate__field { gap: 4px; }
  .gate input[type=email], .gate input[type=tel], .gate input[name=gate_name], .gate__unlock input { min-height: 40px; }
  .gate__go { min-height: 42px; }
  .gate__check { margin: 2px 0 0; font-size: 11px; }
  .gate__fine { margin-top: 6px; font-size: 10.5px; }
  .gate__unlock { margin-top: 12px; padding-top: 12px; gap: 6px; }
  .gate__row { flex-direction: row; }
  .gate__row .gate__go { padding: 0 16px; }
  .gate__release { margin-top: 12px; padding-top: 10px; gap: 2px; }
  .gate__release b { font-size: 15px; }
}


/* subscriber codes: two rows */
.gate__codes { display: grid; gap: 8px; margin: 4px 0 10px; }
.gate__codes .gate__code { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 0; text-align: left; }
.gate__codes .gate__code span { font-size: 18px; }
.gate__codes .gate__code small { font: 500 11.5px/1.3 var(--f-ui); color: rgba(243,241,236,.75); letter-spacing: .04em; }
.gate__codes .gate__code { grid-template-columns: 1fr auto; grid-template-areas: "code copy" "note copy"; row-gap: 4px; padding: 10px 10px 10px 16px; width: 100%; box-sizing: border-box; }
.gate__codes .gate__code span { grid-area: code; }
.gate__codes .gate__code small { grid-area: note; }
.gate__codes .gate__code .gate__copy { grid-area: copy; }

.modal .gate__title, .gate__kicker { padding-left: 30px; padding-right: 30px; }


/* teleportation discount line in the bag */
.sum-row--tele span, .sum-row--tele strong { color: #b07d2a; }


/* product page: no pre-made layer on the floating picture, so phones draw it at full resolution */
.pdp__stage .artifact__float { will-change: auto; }
.pdp__stage .pdp__flip, .pdp__stage .pdp__img { -webkit-backface-visibility: visible; backface-visibility: visible; }


/* ==========================================================================
   SHARP PRODUCT PICTURE (phones): the picture is never scaled, blurred, filtered or floated.
   The shadow is a separate soft ellipse underneath, so Safari draws the garment at full resolution.
   ========================================================================== */
.pdp__stage .artifact__case { animation: pdp-in .5s ease-out both !important; filter: none !important; perspective: none !important; transform: none !important; }
@keyframes pdp-in { from { opacity: 0; } to { opacity: 1; } }
.pdp__stage .artifact__float { animation: none !important; will-change: auto !important; transform: none !important; }
.pdp__stage .pdp__img, .pdp__stage .artifact__case img.pdp__img { filter: none !important; transform: none !important; will-change: auto !important; }
.pdp__stage .pdp__flip { perspective: none; }
.pdp__stage .artifact__case::after {
  content: ''; display: block !important; position: absolute; z-index: -1; top: auto; left: 14%; right: 14%; bottom: -12px; height: 26px;
  box-shadow: none; transition: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 30, 50, .34), rgba(20, 30, 50, 0)); pointer-events: none;
}
.pdp__stage .artifact__shadow { display: none; }
@media (prefers-reduced-motion: reduce) { .pdp__stage .artifact__case { animation: none !important; } }

/* collection grid on phones: still pictures, no filters, so they stay sharp too */
@media (hover: none), (pointer: coarse) {
  .artifact__float { animation: none !important; will-change: auto !important; }
  .artifact__case img, .mini__case img, .artifact__case .artifact__front, .artifact__case .artifact__back { filter: none !important; }
  .artifact__case { perspective: none !important; }
}

/* the garment stands on the bottom of its frame, right above its shadow */
.pdp__stage .pdp__img { object-position: 50% 100% !important; }


/* ==========================================================================
   NO BLUR ON PRODUCTS. iPhones can get stuck on the first frame of a blur animation,
   so no entrance animates blur at all, and the product picture shows instantly.
   ========================================================================== */
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
@keyframes come-forward { from { opacity: 0; } }
.pdp__stage .artifact__case { animation: none !important; opacity: 1 !important; filter: none !important; }
.pdp__stage .badge { filter: none !important; }
.pdp__stage .pdp__img, .pdp__stage .pdp__img--front, .pdp__stage .pdp__img--back,
.pdp__stage[data-view="back"] .pdp__img--front { filter: none !important; }
.artifact__case .artifact__front, .artifact__case .artifact__back,
.artifact:hover .artifact__case:has(.artifact__back) .artifact__front { filter: none !important; }


/* Phones: keep the release date clear of Safari's floating bottom bar */
@media (max-width: 700px) {
  body[data-route="home"] .hero__quote.release { bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
  .release { gap: 8px; }
}


/* Product page: 'Teleport back' to the collection */
.back-to-shop {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 18px 10px 12px; min-height: 44px;
  border-radius: 999px; background: var(--ink); color: var(--bone);
  font: 700 11px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .26em; text-transform: uppercase;
  box-shadow: 0 10px 24px -14px rgba(15,16,19,.6); transition: transform .16s var(--ease-out), background .2s ease;
}
.back-to-shop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.back-to-shop:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .back-to-shop:hover { background: #24262c; } .back-to-shop:hover svg { transform: translateX(-3px); } }
/* phones: it stays in reach while scrolling down to sizes */
@media (max-width: 900px) {
  .back-to-shop { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; }
}


/* Category pills: text centred inside the bubble */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; line-height: 1; }
.chip small { margin-right: 0; line-height: 1; }
@media (max-width: 760px) {
  .toolbar { padding: 8px; }
  .chips { gap: 4px; padding: 0; scroll-padding-inline: 8px; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { min-height: 38px; padding: 0 14px; }
  .chip:last-child { margin-right: 28px; }
}

/* Phones: two pieces a row, picture + name + price all in frame */
@media (max-width: 560px) {
  .field { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .field > .artifact { grid-column: auto; min-width: 0; }
  .field .artifact__case { padding: 5px; }
  .field .artifact__case img { object-fit: contain; }
  .field .artifact .badge { font-size: 8px; padding: 4px 7px; top: 6px; left: 6px; letter-spacing: .14em; }
  .field .artifact__shadow { display: none; }
  .field .artifact__meta { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 2px 0; }
  .field .artifact__meta > div { min-height: 0; width: 100%; }
  .field .artifact__name { font-size: 10.5px; letter-spacing: .06em; line-height: 1.3; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .field .artifact__cat { display: none; }
  .field .artifact__price { font-size: 13px; }
}


/* ---------------- Teleport a fit ---------------- */
.fit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; justify-self: start; width: max-content;
  min-height: 48px; padding: 0 22px 0 18px; border-radius: 999px; margin-top: 6px;
  background: var(--ink); color: var(--bone);
  font: 700 11px/1 'Archivo', var(--f-ui); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(232,211,164,.45) inset, 0 14px 30px -16px rgba(15,16,19,.7), 0 0 28px -8px rgba(232,211,164,.55);
  transition: transform .16s var(--ease-out), box-shadow .3s ease;
}
.fit-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--gold-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.fit-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .fit-btn:hover svg { transform: rotate(180deg); } .fit-btn:hover { box-shadow: 0 0 0 1px rgba(232,211,164,.7) inset, 0 14px 30px -16px rgba(15,16,19,.7), 0 0 36px -6px rgba(232,211,164,.75); } }
.fit-btn--line { width: 100%; margin: 14px 0 6px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(15,16,19,.22); }
.fit-btn--line svg { stroke: currentColor; }

.modal:has(.fit) .modal__panel { width: min(640px, 100%); max-height: 92svh; padding: 28px 26px 22px; }
.fit { transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.fit.is-leaving { opacity: 0; transform: translateY(-10px) scale(.985); }
.fit.is-arriving { opacity: 0; transform: translateY(12px) scale(.985); }
.fit__eyebrow { margin: 0 0 8px; font: 600 10px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.fit__title { margin: 0 !important; font: 800 24px/1.05 'Archivo', var(--f-ui) !important; font-stretch: 125%; letter-spacing: .06em !important; text-transform: uppercase; }
.fit__palette { display: flex; align-items: center; gap: 6px; margin: 12px 0 18px; font: 500 12px/1.2 var(--f-ui); color: var(--ink-2); }
.fit__palette i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15,16,19,.18); }
.fit__palette span { margin-left: 4px; }
.fit__pieces { display: grid; gap: 10px; }
.fit__piece { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.fit__img { display: block; aspect-ratio: 4 / 5; border-radius: 12px; background: linear-gradient(160deg, #eef3f9, #dfe7f1); overflow: hidden; }
.fit__img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; padding: 6px; }
.fit__info { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.fit__role { margin: 0; font: 600 10px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; opacity: .55; }
.fit__name { font: 700 13px/1.25 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.fit__color { display: flex; align-items: center; gap: 7px; margin: 0; font: 500 12px/1 var(--f-ui); color: var(--ink-2); }
.fit__color i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15,16,19,.2); }
.fit__price { margin: 0; font: 600 14px/1 var(--f-ui); }
.fit__size { margin-top: 4px; min-width: 104px; }
.fit__msg { min-height: 18px; margin: 10px 0 0; font: 500 12px/1.4 var(--f-ui); color: #a3322a; }
.fit__foot { display: grid; gap: 12px; margin-top: 6px; }
.fit__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 12px; border-top: 1px solid rgba(15,16,19,.12); font: 600 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
.fit__total b { font: 700 18px/1 var(--f-ui); letter-spacing: 0; }
.fit__actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.fit__actions .btn { width: 100%; justify-content: center; white-space: nowrap; }
.fit__again svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-right: 8px; transition: transform .5s var(--ease-out); }
.fit__again:active svg { transform: rotate(180deg); }
@media (max-width: 560px) {
  .modal:has(.fit) { padding: 10px; }
  .modal:has(.fit) .modal__panel { padding: 22px 16px 16px; }
  .fit__title { font-size: 20px !important; }
  .fit__palette { margin: 10px 0 14px; }
  .fit__piece { grid-template-columns: 104px 1fr; gap: 12px; padding: 8px; }
  .fit__name { font-size: 11.5px; }
  .fit__actions { grid-template-columns: 1fr; }
  .fit__actions .btn { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .fit, .fit-btn svg { transition: none; } }


/* Collection: colours cycle every 3s */
.artifact__case .artifact__next { position: absolute; opacity: 0 !important; transition: opacity .5s ease !important; z-index: 1; pointer-events: none; }
.artifact__case .artifact__next.in { opacity: 1 !important; }
.artifact__case .badge { z-index: 3; }
.artifact__dots { display: flex; gap: 5px; margin: 8px 4px 0; }
.artifact__dots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15,16,19,.22); opacity: .45; transform: scale(.85); transition: opacity .3s ease, transform .3s var(--ease-out); }
.artifact__dots i.on { opacity: 1; transform: scale(1.1); box-shadow: inset 0 0 0 1px rgba(15,16,19,.35), 0 0 0 2px rgba(255,255,255,.85); }
@media (max-width: 560px) { .field .artifact__dots { margin: 6px 2px 0; gap: 4px; } .field .artifact__dots i { width: 7px; height: 7px; } }


/* Teleport a fit: the preview space (portal scene) */
.fit__space { position: relative; height: clamp(300px, 46vh, 420px); margin: 0 0 14px; border-radius: 20px; overflow: hidden; background: #2a2433; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px -24px rgba(20,16,30,.7); }
.fit__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transform: scale(1.35); transform-origin: 50% 52%; z-index: -2; }
.fit__space::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,30,.05) 40%, rgba(20,16,30,.35)); }
.fit__beam { position: absolute; left: 50%; top: 8%; width: 46%; height: 86%; transform: translateX(-50%); z-index: -1; border-radius: 40% 40% 12px 12px;
  background: radial-gradient(ellipse 50% 55% at 50% 48%, rgba(255,240,215,.55), rgba(255,226,180,.18) 55%, transparent 75%); animation: fit-beam 2.6s ease-in-out infinite alternate; }
@keyframes fit-beam { from { opacity: .7; } to { opacity: 1; } }
.fit__look { position: absolute; left: 50%; bottom: 7%; width: 64%; height: 88%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.fit__wear { display: block; width: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(15,10,25,.35)); }
.fit__wear--top { position: relative; z-index: 2; max-width: 100%; height: 44%; object-position: 50% 100%; margin-bottom: -5%; }
.fit__wear--bottom { position: relative; z-index: 1; max-width: 78%; height: 58%; object-position: 50% 0; }
.fit__look--shorts .fit__wear--top { height: 52%; }
.fit__look--shorts .fit__wear--bottom { height: 36%; max-width: 72%; }
.fit__floor { position: absolute; left: 50%; bottom: 4%; width: 46%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,236,205,.7), rgba(255,220,170,.2) 60%, transparent); }
/* arrival: the pieces drop through the portal */
.fit .fit__wear { animation: fit-drop .6s var(--ease-out) both; }
.fit .fit__wear--bottom { animation-delay: .08s; }
.fit .fit__beam { }
@keyframes fit-drop { from { opacity: 0; transform: translateY(-26px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .fit__space { height: 320px; } .fit__look { width: 74%; } .fit__piece { grid-template-columns: 72px 1fr; } }
@media (prefers-reduced-motion: reduce) { .fit .fit__wear, .fit__beam { animation: none; } }

/* Home: TELEPORT on the door throbs so it reads as the button */
@keyframes tp-throb {
  0%, 100% { transform: scale(1); text-shadow: 0 1px 18px rgba(0,0,0,.45); }
  50% { transform: scale(1.09); text-shadow: 0 0 14px rgba(255,248,236,.95), 0 0 34px rgba(255,214,160,.8), 0 1px 18px rgba(0,0,0,.35); }
}
@keyframes tp-glow { 0%, 100% { opacity: .15; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
body[data-route="home"] .hero__machine .teleport--portal .teleport__word { animation: tp-throb 1.8s cubic-bezier(.45,0,.55,1) infinite; will-change: transform; }
body[data-route="home"] .hero__machine .teleport--portal::after { animation: tp-glow 1.8s cubic-bezier(.45,0,.55,1) infinite !important; }
body[data-route="home"] .hero__machine .teleport--portal:hover .teleport__word,
body[data-route="home"] .hero__machine .teleport--portal.is-charging .teleport__word { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  body[data-route="home"] .hero__machine .teleport--portal .teleport__word, body[data-route="home"] .hero__machine .teleport--portal::after { animation: none !important; }
}

/* Home door: the 'Tap / Click to teleport' line reads clearly on the bright door */
body[data-route="home"] .hero__machine .teleport__sub { font: 700 9.5px/1.2 'Archivo', var(--f-ui); font-stretch: 112%; font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: rgba(40,28,18,.92); opacity: 1; margin-top: 2px; }
@media (min-width: 761px) { body[data-route="home"] .hero__machine .teleport__sub { font-size: 11px; } }
@media (max-width: 760px) { body[data-route="home"] .hero__machine .teleport__word { font-size: 12.5px; } }

/* Home door: TELEPORT only, always inside the door frame (sized from --door-w, set by JS) */
body[data-route="home"] .hero__machine .teleport__sub { display: none !important; }
body[data-route="home"] .hero__machine .teleport--portal .teleport__word {
  font-size: clamp(8px, calc(var(--door-w, 110px) * .085), 22px) !important;
  font-stretch: 112%; letter-spacing: .18em !important; padding: 0 0 .9em .18em; white-space: nowrap;
}
body[data-route="home"] .hero__machine .teleport--portal:hover .teleport__word { letter-spacing: .18em !important; }
@keyframes tp-throb {
  0%, 100% { transform: scale(1); text-shadow: 0 1px 18px rgba(0,0,0,.45); }
  50% { transform: scale(1.06); text-shadow: 0 0 12px rgba(255,248,236,.95), 0 0 28px rgba(255,214,160,.8), 0 1px 18px rgba(0,0,0,.35); }
}

/* Home: manifesto quote in all caps */
body[data-route="home"] .hero__quote blockquote { text-transform: uppercase; letter-spacing: .04em; }
body[data-route="home"] .hero__quote blockquote span, body[data-route="home"] .hero__quote blockquote em { font-size: .86em; }
/* Home: TELEPORT grows a little more on each throb (still inside the door) */
@keyframes tp-throb {
  0%, 100% { transform: scale(1); text-shadow: 0 1px 18px rgba(0,0,0,.45); }
  50% { transform: scale(1.13); text-shadow: 0 0 12px rgba(255,248,236,.95), 0 0 30px rgba(255,214,160,.85), 0 1px 18px rgba(0,0,0,.35); }
}


/* Collection: garments centred + balanced to one visual size (--bal set per image by JS) */
.field .artifact__case img, .field .artifact__case .artifact__front, .field .artifact__case .artifact__back,
.related .artifact__case img, .related .artifact__case .artifact__front, .related .artifact__case .artifact__back {
  object-fit: contain !important; object-position: 50% 50% !important;
  transform: scale(var(--bal, 1)) !important; transform-origin: 50% 50%;
}
.artifact__case .artifact__next { transform: scale(var(--bal, 1)) !important; }


/* Home: the scene's push-in zooms straight into the door (origin set by JS), the teleport zoom too */
@keyframes hero-push { from { transform: scale(1.02); } to { transform: scale(1.12); } }
body[data-route="home"] .lab { transform-origin: 50% 50% !important; }
body[data-route="home"] .hero__inner { left: 0; right: 0; }
body[data-route="home"] .hero__mark span { display: block; }
body[data-route="home"] .hero__we { white-space: nowrap; }

/* Fit preview: 'Teleport again' at the left of the garments */
.fit__side { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; justify-items: center; gap: 7px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fit__side-ring { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(15,16,19,.72); box-shadow: inset 0 0 0 1px rgba(232,211,164,.55), 0 0 22px -4px rgba(255,214,160,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .16s var(--ease-out), box-shadow .3s ease; }
.fit__side-ring svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.fit__side-label { font: 700 9px/1.25 'Archivo', var(--f-ui); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.fit__side:active .fit__side-ring { transform: scale(.94); }
.fit__side:active .fit__side-ring svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .fit__side:hover .fit__side-ring svg { transform: rotate(180deg); } .fit__side:hover .fit__side-ring { box-shadow: inset 0 0 0 1px rgba(232,211,164,.8), 0 0 28px -2px rgba(255,214,160,.85); } }
.fit__side:focus-visible { outline: none; } .fit__side:focus-visible .fit__side-ring { outline: 2px solid var(--gold); outline-offset: 3px; }
.fit__look { width: 58%; }
.fit__actions { grid-template-columns: 1fr !important; }
@media (max-width: 560px) { .fit__look { width: 60%; left: calc(50% + 14px); } .fit__side { left: 10px; } .fit__side-ring { width: 46px; height: 46px; } }

/* Fit preview: the same sunset world, framed on the open salt flat (no door behind the clothes) */
.fit__scene { object-position: 0% 54% !important; transform: scale(1.9) !important; transform-origin: 0% 54% !important; }
.fit__beam { display: none !important; }

/* Home: everything is still — no throb, no glow pulse, no entrance, no hover shifts, no background drift */
body[data-route="home"] .hero__inner, body[data-route="home"] .hero__inner *,
body[data-route="home"] .hero__machine, body[data-route="home"] .hero__machine *,
body[data-route="home"] .hero__machine .teleport--portal::before, body[data-route="home"] .hero__machine .teleport--portal::after,
body[data-route="home"] .hero__machine .teleport__word::after,
body[data-route="home"] .hero__quote, body[data-route="home"] .hero__quote * { animation: none !important; }
body[data-route="home"] .hero__machine .teleport--portal .teleport__word { transition: none !important; }
body[data-route="home"] .hero__machine .teleport--portal::after { animation: none !important; opacity: .55 !important; transform: none !important; transition: none !important; }
body[data-route="home"] .hero__machine .teleport--portal:hover .teleport__word::after, body[data-route="home"] .hero__machine .teleport__word::after { transition: none !important; }
body[data-route="home"] .hero__inner:not(.is-leaving), body[data-route="home"] .hero__mark, body[data-route="home"] .hero__we, body[data-route="home"] .hero__quote { opacity: 1 !important; }
body[data-route="home"] .lab__scenebg img { animation: none !important; transform: scale(1.02) !important; }


/* Fit preview: garments on one real-world scale (positions from --top-*/--bot-* set per fit) */
.fit__look { display: block !important; }
.fit__look .fit__wear { position: absolute !important; left: 50%; width: auto; max-width: 100%; margin: 0 !important; object-fit: contain; }
.fit__look .fit__wear--top { top: var(--top-top); height: var(--top-h) !important; transform: translateX(-50%); object-position: 50% 100%; z-index: 2; }
.fit__look .fit__wear--bottom { top: var(--bot-top); height: var(--bot-h) !important; transform: translateX(-50%); object-position: 50% 0; z-index: 1; }
.fit .fit__look .fit__wear { animation-name: fit-drop-x !important; }
@keyframes fit-drop-x { from { opacity: 0; transform: translate(-50%, -26px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }


/* Phones: the home screen holds still (no drag, no bounce, no toolbar shuffle) */
@media (max-width: 900px) {
  html:has(body[data-route="home"]), body[data-route="home"] { overflow: hidden !important; height: 100%; overscroll-behavior: none; }
  body[data-route="home"] { position: fixed; inset: 0; width: 100%; touch-action: none; }
  body[data-route="home"] #main > .view ~ * { display: none; }
}
/* the one moving thing on the home screen: TELEPORT throbs inside the portal */
body[data-route="home"] .hero__machine .teleport--portal .teleport__word {
  animation: tp-throb 1.8s cubic-bezier(.45,0,.55,1) infinite !important; transform-origin: 50% 50%;
}
body[data-route="home"] .hero__machine .teleport--portal.is-charging .teleport__word { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { body[data-route="home"] .hero__machine .teleport--portal .teleport__word { animation: none !important; } }

/* Fit preview: outfits centred in one place; the floor glow sits under each outfit */
.fit__look { left: 50% !important; width: 54% !important; }
.fit__floor { top: calc(5% + 88% * var(--floor, 1) - 8px) !important; bottom: auto !important; }
.fit__side { left: 8px; }
.fit__side-label { font-size: 8.5px; }
@media (max-width: 560px) { .fit__look { left: 50% !important; width: 52% !important; } .fit__side-ring { width: 44px; height: 44px; } }

/* Home, every screen size: the page itself never scrolls, so the words stay locked to the door */
html:has(body[data-route="home"]), body[data-route="home"] { overflow: hidden !important; height: 100%; overscroll-behavior: none; }
body[data-route="home"] { position: fixed; inset: 0; width: 100%; }
body[data-route="home"] #main > .view ~ * { display: none; }


/* TELEPORT throbs around the centre of its letters (the line under it stays below) */
body[data-route="home"] .hero__machine .teleport--portal .teleport__word { transform-origin: 50% .5em !important; }

/* Home: the manifesto preview reads as one voice — every line the same bold white */
body[data-route="home"] .hero__quote blockquote span,
body[data-route="home"] .hero__quote blockquote em { font-weight: 600 !important; font-style: normal !important; color: #fff !important; opacity: 1 !important; }

/* Home loads clean: no slide-in, and the words/door appear once, already in place */
body[data-route="home"] .view { animation: none !important; transform: none !important; }
html:not(.home-ready) body[data-route="home"] .hero__inner,
html:not(.home-ready) body[data-route="home"] .hero__machine,
html:not(.home-ready) body[data-route="home"] .hero__quote,
html:not(.home-ready) body[data-route="home"] .lab__scenebg img { opacity: 0 !important; }
body[data-route="home"] .lab__scenebg img { transition: opacity .5s ease; }
html.home-ready body[data-route="home"] .hero__inner,
html.home-ready body[data-route="home"] .hero__quote { transition: opacity .5s ease !important; }
html.home-ready body[data-route="home"] .hero__machine { transition: opacity .5s ease; }


/* Fit preview: Flip (right) mirrors Teleport again (left) */
.fit__side--right { left: auto !important; right: 8px; }
.fit__look { transition: transform .19s cubic-bezier(.4,0,.2,1); }
.fit__look.is-flipping { transform: translateX(-50%) scaleX(.02) !important; }
.fit__side--right[aria-pressed="true"] .fit__side-ring { box-shadow: inset 0 0 0 1px rgba(232,211,164,.9), 0 0 26px -2px rgba(255,214,160,.85); }
@media (max-width: 560px) { .fit__side--right { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .fit__look { transition: none; } }