/* 40 Home section: hero copy, artwork, primary calls to action. */
.studio-stage { position: absolute; inset: 0 10% 0 23%; overflow: hidden; background: radial-gradient(circle at 57% 41%, rgba(16,49,48,.18), transparent 41%); }
.hero-copy { position: absolute; left: 6%; top: 16%; z-index: 4; width: 47%; }
.brand-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(15px, 2vh, 30px); padding: 3px 6px; color: #020500; background: var(--blue); font-size: .9em; }
.brand-tag b { width: 8px; height: 8px; background: var(--blue-hot); box-shadow: 12px 0 0 #080c0a; }
.hero-copy h1 { margin: 0; color: #deded5; font-family: Arial Black, Arial, sans-serif; font-size: clamp(32px, 4.15vw, 69px); line-height: .82; letter-spacing: -.065em; transform: scaleX(.86); transform-origin: left center; text-shadow: 0 0 5px rgba(255,255,255,.14); }
.hero-copy h1 span { color: var(--blue-hot); }
.hero-copy h1 sup { margin-left: .15em; color: var(--blue-hot); font: 700 .25em/1 Arial, sans-serif; letter-spacing: 0; vertical-align: top; }
.hero-copy p { max-width: 32em; margin: clamp(14px, 2vh, 28px) 0; color: #c9cbc4; line-height: 1.5; font-family: "Courier New", monospace; }
.ui-button { min-height: 30px; padding: .65em 1.2em; border: 1px solid #171713; color: #171713; background: #bbb9ae; box-shadow: inset 1px 1px #f0eee5, inset -2px -2px #67675f; cursor: pointer; white-space: nowrap; }
.ui-button:hover { color: white; background: var(--blue); box-shadow: inset 1px 1px #6580ff, inset -2px -2px #081771, 0 0 10px rgba(20,61,255,.25); }
.ui-button:active { transform: translateY(1px); box-shadow: inset 2px 2px #090d27; }
.archive-cta { min-width: min(100%, 220px); color: #d7d9d0; border-color: #d7d9d0; background: rgba(6,9,7,.6); box-shadow: inset 1px 1px rgba(255,255,255,.25); text-align: left; }
.archive-cta span { float: right; font-size: 1.5em; line-height: .7; }
.scroll-cue { position: absolute; left: 0; top: calc(100% + clamp(18px, 4vh, 48px)); display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; color: var(--blue-hot); background: none; font-size: .85em; cursor: pointer; white-space: nowrap; }
.scroll-cue i { position: relative; flex: 1; height: 3px; background: var(--blue); }
.scroll-cue i::after { content: ""; position: absolute; right: 0; top: -2px; width: 6px; height: 6px; background: var(--red); transform: rotate(45deg); }

.hero-art { position: absolute; inset: 3% 0 -7% 24%; overflow: hidden; pointer-events: none; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #070a08 0%, transparent 16% 83%, rgba(3,7,5,.7)); mix-blend-mode: multiply; pointer-events: none; }
.hero-art img { position: absolute; z-index: 2; right: 9%; top: -8%; width: 94%; height: 112%; object-fit: cover; object-position: 60% center; filter: contrast(1.12) saturate(1.2) brightness(1.08); mix-blend-mode: screen; }
.hero-letter { position: absolute; z-index: 1; right: 4%; top: 4%; color: var(--blue); font: 900 clamp(260px, 37vw, 600px)/.75 Arial Black, sans-serif; opacity: .72; transform: rotate(-5deg); }
.cross { position: absolute; z-index: 5; color: #e8e9e2; font-size: 28px; font-family: Arial, sans-serif; }
.cross-a { left: 21%; top: 3%; }.cross-b { left: 13%; bottom: 10%; }
.annotation { position: absolute; z-index: 5; right: 4%; bottom: 3%; color: #8aaaff; font-size: .7em; text-align: right; }