/* The 3D heroes (hero3d.js): the scene sits on the right of the headline, and stacks under it on phones. The still image
   inside each box is the fallback when WebGL is missing; it hides once the canvas draws. No hue 20 to 65. */
.h3d { position: relative; width: 100%; aspect-ratio: 6 / 5; }
.h3d__still, .h3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h3d__still { object-fit: contain; }
.h3d[data-state="live"] .h3d__still, .h3d[data-state="still"] .h3d__still { visibility: hidden; }

/* post 1: soft daylight behind the split hero */
.p-story .s-hero { max-width: 1320px; }
.h3d--shop { margin: -24px -12px -24px 0; background: radial-gradient(60% 55% at 55% 60%, color-mix(in srgb, var(--lilac) 70%, transparent), transparent 70%); }

/* post 2: the night hero becomes two columns, the clock on the right */
.n-hero--3d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center; justify-items: stretch; text-align: left; min-height: min(86vh, 820px); padding: 72px max(24px, calc((100vw - 1320px) / 2)) 72px; background: radial-gradient(55% 60% at 75% 50%, rgba(124, 107, 255, .35), transparent 70%), linear-gradient(180deg, #060719 0%, #11113F 55%, #2A1670 100%); }
.n-hero--3d .n-hero__in { max-width: 600px; }
.n-hero--3d .n-eyebrow, .n-hero--3d .share { justify-content: flex-start; }
.n-hero--3d .n-dek { margin-left: 0; }
.n-hero--3d h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); }

@media (max-width: 900px) {
  .n-hero--3d { grid-template-columns: 1fr; padding: 48px 16px 24px; min-height: 0; }
  .h3d--shop { margin: 0; }
  .h3d { aspect-ratio: 1 / 1; max-width: 520px; margin-inline: auto; }
}
.feat__art img, .night-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.night-card__art { background: radial-gradient(60% 60% at 50% 50%, rgba(124, 107, 255, .35), transparent 70%), linear-gradient(180deg, #060719, #2A1670); }