/* Approved content-page shell and artwork; no particles or player. */
:root { color-scheme:dark; font-family:Arial,Helvetica,sans-serif; background:#000; color:#f0f0ef; --overlay:#151819; --ink:#070a0b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; padding:12px; display:grid; place-items:center; background:#000; }
button { font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid #fff; outline-offset:5px; }
button:not(:disabled) { cursor:pointer; }
::selection { color:#050708; background:#e5e5df; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.stage { position:relative; isolation:isolate; width:min(100%,calc((100svh - 24px) * 1.59879)); aspect-ratio:1586/992; overflow:hidden; border-radius:12px; background:#000; container-type:inline-size; }
.visual { position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 10.483871% 0); }
.reference,.atmosphere { position:absolute; inset:0; width:100%; height:100%; display:block; }
.reference,.scene-source { display:none; }
.scene { position:absolute; inset:0; width:100%; height:88.306452%; object-fit:cover; object-position:right center; }
.wordmark { position:absolute; left:10.7%; top:7.25%; width:34%; height:11.5%; pointer-events:none; }
.wordmark-art { display:block; width:100%; height:100%; overflow:hidden; }
.wordmark-visible { display:none; }
.frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.frame path { fill:var(--overlay); stroke:none; }
.spine { position:absolute; inset:0 auto 34% 0; width:6.3%; display:flex; align-items:center; flex-direction:column; }
.home { position:absolute; top:2.3%; left:10%; width:78%; height:12.2%; border:0; background:transparent; padding:0; transform:scale(.8); transform-origin:center; }
/* Use the selected transparent PNG directly, preserving its native colors. */
.home img { display:block; width:100%; height:100%; object-fit:contain; }
.nav-items { position:absolute; left:0; top:16.5%; width:100%; display:grid; gap:.55cqw; }
.nav-button { border:0; padding:0 0 0 1.5cqw; background:none; text-align:left; font-size:1.144cqw; line-height:1.2; min-height:3.05cqw; position:relative; transform:scale(.8); transform-origin:1.5cqw center; }
.nav-button::after { display:none; }
.nav-button:hover,.nav-button:focus-visible { color:#fff; text-shadow:0 0 15px #fff8; }
.footer { position:absolute; inset:88.3% 0 0; border:0; background:transparent; display:grid; grid-template-columns:31.4% 37.2% 31.4%; padding:1.75cqw 2.4cqw 1.2cqw; align-items:start; }
.copyright { font-family:Consolas,'Courier New',monospace; letter-spacing:.16em; font-size:.89cqw; white-space:nowrap; padding-top:.65cqw; }
.social { display:flex; align-items:center; justify-content:space-evenly; border-inline:1px solid #383c3d; min-height:2.1cqw; }
.icon-button { width:3.05cqw; height:2.5cqw; border:0; background:none; display:grid; place-items:center; padding:.2cqw; }
.icon-button svg { width:1.8cqw; height:1.8cqw; fill:currentColor; }
.icon-button:hover { color:#c9cdce; }
.footer-links { display:flex; flex-direction:column; align-items:flex-end; gap:1cqw; padding-top:.05cqw; }
.footer-links-row { display:flex; align-items:center; gap:1.45cqw; }
.footer-links-row::before { content:""; height:1.2cqw; width:1px; background:#777c7c; margin-right:.8cqw; }
.footer-links button { border:0; padding:.15cqw .3cqw; background:none; font-family:Consolas,'Courier New',monospace; font-size:.9cqw; letter-spacing:.04em; }
.footer-links button+button { border-left:1px solid #777c7c; padding-left:1.6cqw; }
.footer-links-row:last-child::before { display:none; }
.footer-links-row:last-child button { color:#b5b8b7; font-size:.84cqw; }
.feedback { position:absolute; left:12%; bottom:13.65%; margin:0; max-width:48%; background:#080b0bea; padding:8px 12px; border-radius:3px; color:#e4e6e6; font-size:13px; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.feedback.visible { opacity:1; }
.render-note { position:absolute; left:10.7%; top:21%; margin:0; background:#080b0be8; font-size:13px; padding:8px 12px; max-width:75%; }
.render-note[hidden] { display:none; }
/* At narrow widths the original 1586:992 composition remains the visual
   authority; HTML controls reflow so their labels and focus targets stay usable. */
@media(max-width:760px) {
 body { display:block; padding:8px; }
 .stage { width:100%; min-height:calc(100svh - 16px); aspect-ratio:auto; padding-top:142px; padding-bottom:180px; }
 .stage::before { content:""; position:absolute; inset:0 0 140px; z-index:-1; border-radius:12px; background:var(--overlay); }
 .visual { top:145px; bottom:140px; left:10px; right:10px; border-radius:24px; clip-path:none; }
 .reference { height:250%; width:auto; max-width:none; top:-57.5%; left:70%; transform:translateX(-70%); object-fit:fill; }
 .scene { inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; transform:none; }
 .frame { display:none; }
 .wordmark { top:22px; left:24px; width:calc(100% - 48px); height:auto; z-index:2; }
 .wordmark-art { display:none; }
 .wordmark-visible { display:block; margin:0; font-size:clamp(26px,7vw,42px); letter-spacing:.06em; font-style:italic; font-weight:400; line-height:1.2; color:#f40000; }
 .wordmark-visible strong { font-weight:800; }
 .wordmark-visible small { color:#f0f0ef; display:block; font:10px/2.5 Arial,sans-serif; letter-spacing:.36em; font-style:normal; }
 .spine { top:101px; left:22px; right:22px; width:auto; height:42px; bottom:auto; z-index:3; }
 .home { display:none; }
 .nav-items { position:static; display:flex; justify-content:space-between; gap:8px; }
 .nav-button { font-size:15.4px; min-height:36px; padding:4px 2px; text-shadow:0 1px 5px black; }
 .nav-button::after { display:none; }
 .nav-button br { display:none; }
 .footer { top:auto; height:132px; bottom:0; padding:14px 22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
 .copyright { font-size:10px; letter-spacing:.09em; padding:0; order:2; }
 .social { width:100%; border:0; min-height:28px; }
 .icon-button { width:36px; height:32px; padding:4px; }
 .icon-button svg { width:21px; height:21px; }
 .footer-links { order:3; gap:5px; padding:0; }
 .footer-links-row { gap:9px; }
 .footer-links-row::before { display:none; }
 .footer-links button { font-size:11px; padding:2px; }
 .footer-links button+button { padding-left:10px; }
 .footer-links-row:last-child button { font-size:10px; }
 .feedback { left:66px; bottom:280px; max-width:calc(100% - 90px); font-size:11px; }
 .render-note { left:24px; top:155px; max-width:calc(100% - 48px); font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .feedback { transition:none; } }

.spine a { color:inherit; text-decoration:none; }
.nav-button { display:flex; align-items:center; }
.nav-button[aria-current="page"] { color:#fff; }
a:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.wordmark-art { clip-path:inset(45% 0 0); }
.page-title-art { position:absolute; left:0; top:0; width:100%; height:40%; overflow:hidden; pointer-events:none; }
@media(max-width:760px) { .wordmark { height:76px; } .page-title-art { height:38px; } .wordmark-visible { padding-top:40px; } }