@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#ecebe7;--muted:#8c8b98;--copper:#f6b184}*{box-sizing:border-box}body{margin:0;background:#080910;color:var(--ink);font-family:'DM Sans',sans-serif}main{position:relative;min-height:850px;height:100svh;overflow:hidden}canvas,.vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.vignette{background:linear-gradient(180deg,rgba(8,9,16,.2),transparent 35%,transparent 75%,#080910)}header,footer{position:absolute;left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between}header{top:35px}a{color:inherit;text-decoration:none}.brand{display:flex;align-items:center;gap:14px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;line-height:1.15;letter-spacing:2px}.mark{font-size:48px;line-height:.7;color:var(--copper);font-weight:400}.edition{font-size:12px;letter-spacing:2px;color:var(--muted)}.edition span{margin:0 12px;color:#50424a}button{font:inherit;border:1px solid #ffffff21;border-radius:6px;background:#ffffff09;color:var(--ink);padding:12px 18px;cursor:pointer;font-size:14px}button:hover{border-color:#f6b18480;background:#ffffff10}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--copper);outline-offset:5px}.quiet{border-color:transparent;background:transparent}.quiet span{margin-left:8px}.intro{position:absolute;top:17%;left:8%;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:3px;color:var(--copper);margin:0 0 24px}h1{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(32px,3.6vw,55px);line-height:1.08;letter-spacing:-2px;margin:0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--copper)}.subtitle{font-size:16px;color:var(--muted);margin-top:24px}.stage-caption{position:absolute;top:47%;left:8%;right:8%;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#a29ca9}.stage-caption span:first-child{color:var(--copper)}.controls{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:28px;padding:12px 18px;background:#13121ce0;border:1px solid #ffffff1c;border-radius:12px;backdrop-filter:blur(20px);white-space:nowrap}.controls>button:first-child{display:flex;align-items:center;gap:12px;border:0;background:transparent;min-width:105px}.divider{width:1px;height:28px;background:#ffffff1b}label{font-size:14px;color:#b6b2bf}input[type=range]{width:90px;margin-left:14px;vertical-align:middle;accent-color:var(--copper);cursor:pointer}footer{bottom:32px;font-size:12px;letter-spacing:1.6px;color:#777381}.asterisk{font-size:22px;color:var(--copper);margin-left:15px;vertical-align:middle}dialog{background:#17151f;color:var(--ink);border:1px solid #69514a;border-radius:14px;width:min(520px,90vw);padding:28px}dialog::backdrop{background:#05050bc9;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:28px}textarea{width:100%;resize:vertical;min-height:120px;max-height:300px;padding:14px;margin-top:14px;color:var(--ink);font:inherit;line-height:1.5;background:#0b0a11;border:1px solid #ffffff26;border-radius:6px}dialog p{font-size:14px;color:var(--muted)}#apply{background:var(--copper);color:#191018}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:700px){main{min-height:760px}header{top:24px;left:6%;right:6%}.edition{display:none}.brand{font-size:12px}.intro{top:18%;left:7%}h1{font-size:clamp(30px,6.7vw,47px);letter-spacing:-1.5px}.eyebrow{font-size:12px;letter-spacing:1.8px}.stage-caption{left:7%;right:7%;top:46%}.stage-caption span:last-child{display:none}.controls{bottom:90px;width:90%;gap:14px;flex-wrap:wrap;justify-content:center;padding:12px}.controls>button:first-child{min-width:auto;padding:10px}.divider{display:none}input[type=range]{width:65px;margin-left:8px}.controls #edit{width:100%;padding:4px}footer{left:7%;right:7%;bottom:25px;font-size:12px;line-height:1.5;gap:18px}footer>span{max-width:55%}footer>span:last-child{text-align:right}.asterisk{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* The entrance and inner pages share the copper-and-starlight palette. */
.hero-logo{position:absolute;right:7%;top:-5%;width:min(68vw,860px);height:auto;filter:url(#logo-background-removal);pointer-events:none}
.controls{bottom:150px}.enter-button{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);display:inline-block;padding:14px 36px;border:1px solid #f6b18480;border-radius:6px;background:#15121ce8;color:#ffe2ca;letter-spacing:.25em;font-size:16px;font-weight:600;box-shadow:0 0 24px #f6b18418;transition:background .2s,box-shadow .2s}.enter-button:hover{background:#30202a;box-shadow:0 0 32px #f6b18435}
.inner-page{background:radial-gradient(ellipse at 50% 45%,#24192e 0%,#100e1c 45%,#080910 80%)}
.portal{min-height:100svh;height:auto;overflow:visible;display:flex;align-items:center;justify-content:center;padding:110px 24px 60px}
.portal-home{position:absolute;top:36px;left:4.5%;font-family:'Space Grotesk',sans-serif;font-size:16px;letter-spacing:.12em;color:var(--copper)}
.portal-menu{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vh,38px)}
.portal-menu a{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,5.5vw,64px);font-weight:600;line-height:1.15;letter-spacing:-.02em;transition:transform .2s}.portal-menu a:hover{transform:scale(1.06)}
.cycle-colour{animation:colour-cycle 9s linear infinite;text-shadow:0 0 24px currentColor}
@keyframes colour-cycle{0%,100%{color:#ffc398}20%{color:#ffa9d3}40%{color:#c4b0ff}60%{color:#9ddaff}80%{color:#a5f4dc}}
.pending-section{text-align:center}.section-name{font-size:16px;letter-spacing:.2em;color:var(--muted);margin:0 0 30px}.pending-glow{font-size:clamp(48px,10vw,110px);letter-spacing:-.04em;color:#ffe1c8;text-shadow:0 0 10px #ffd6b690,0 0 32px #eea57680,0 0 70px #dd7b5550}.back-menu{display:inline-block;margin-top:48px;font-size:16px;color:var(--copper);padding:12px 22px;border:1px solid #f6b18440;border-radius:6px}
@media(max-width:700px){.hero-logo{top:28%;right:7%;width:300px}.controls{bottom:180px}.enter-button{bottom:95px}.portal-home{top:28px;left:7%}.portal-menu{gap:28px}}
@media(prefers-reduced-motion:reduce){.cycle-colour{animation:none;color:#ffc398}.portal-menu a,.enter-button{transition:none}}

/* Smaller surrounding typography keeps the sine scroller as the main event. */
.brand{font-size:12px}.mark{font-size:40px}.edition{font-size:12px;letter-spacing:1.5px}
.intro h1{font-size:clamp(26px,2.9vw,44px);letter-spacing:-1.5px}
.subtitle{font-size:14px}.eyebrow{letter-spacing:2px;margin-bottom:18px}
.stage-caption,footer{letter-spacing:1.2px}.controls label,.controls button{font-size:12px}
.enter-button{font-size:14px}.portal-home{font-size:14px}
.portal-menu a{font-size:clamp(56px,9vw,104px)}.section-name,.back-menu{font-size:14px}
.pending-glow{font-size:clamp(40px,8vw,88px)}
@media(max-width:700px){.brand{font-size:12px}.intro h1{font-size:clamp(25px,5.4vw,38px)}.eyebrow{letter-spacing:1.3px}}

/* Smooth demoscene plasma behind the menu. */
.plasma-page{isolation:isolate;background:#080910}
#plasma{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:auto}
.plasma-page::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,#08091080 0%,#08091030 65%,#08091090 100%)}
.plasma-page .portal{z-index:2}
.plasma-page .portal-menu a{text-transform:uppercase;text-shadow:0 2px 5px #000,0 0 24px currentColor}

/* Song players share the menu's flowing plasma and copper palette. */
.songs-section{width:min(680px,100%);text-align:center}
.songs-eyebrow{font-size:12px;letter-spacing:.24em;color:var(--copper);margin:0 0 16px}
.songs-section>h1{font-size:clamp(36px,7vw,64px);letter-spacing:.04em;margin-bottom:38px}
.songs-list{display:grid;gap:22px;text-align:left}
.song-card{padding:26px;border:1px solid #f6b18440;border-radius:16px;background:#0b0b16dc;box-shadow:0 12px 40px #0003;backdrop-filter:blur(12px)}
.song-number{margin:0 0 14px;font-size:12px;letter-spacing:.18em;color:var(--copper);display:flex;justify-content:space-between}
.song-number span{color:var(--muted);letter-spacing:.06em}
.song-card h2{font-size:clamp(22px,4vw,30px);line-height:1.25;margin:0 0 22px;letter-spacing:-.02em}
.song-card audio{display:block;width:100%;color-scheme:dark}
@media(max-width:700px){.song-card{padding:20px 16px}.songs-section>h1{margin-bottom:28px}}

/* Display the complete project artwork without cropping. */
.projects-section{width:min(1200px,100%);text-align:center}
.projects-section>.section-name{font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:1.4;margin:0 0 28px;letter-spacing:.2em}
.project-image-link{display:block;border-radius:10px;overflow:hidden;box-shadow:0 16px 60px #0006;border:1px solid #f6b18430}
.project-image{display:block;width:100%;height:auto;object-fit:contain}

/* Warm menu lettering stays legible across the moving copper highlights. */
.plasma-page .portal-menu{padding:26px clamp(22px,5vw,54px);background:transparent;border:0;box-shadow:none}
.plasma-page .portal-menu .cycle-colour{animation-name:copper-menu-cycle;color:#ffc398;text-shadow:0 2px 4px #000,0 0 12px #000b,0 0 20px #e6a06b45}
@keyframes copper-menu-cycle{0%,100%{color:#ffc398}20%{color:#f6b184}40%{color:#ffd3a3}60%{color:#ffe3bd}80%{color:#eeb183}}

/* Original artwork is fully visible and opens at its native resolution. */
.gfx-section{width:min(1100px,100%);text-align:center}
.gfx-section>.section-name{font-family:'Space Grotesk',sans-serif;font-weight:500;line-height:1.4;letter-spacing:.2em;margin:0 0 30px}
.gfx-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.gfx-artwork{display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:10px;border:1px solid #f6b18430;background:#050509;transition:border-color .2s}
.gfx-artwork:hover{border-color:#f6b184a0}
.gfx-artwork img{display:block;width:100%;height:auto;object-fit:contain}
.gfx-wide{grid-column:1/-1}
@media(max-width:700px){.gfx-gallery{grid-template-columns:1fr;gap:20px}}
@media(prefers-reduced-motion:reduce){.gfx-artwork{transition:none}}



/* Keep the enlarged menu centred, allowing long labels to wrap on narrow screens. */
.plasma-page .portal-menu{max-width:100%;text-align:center}
.plasma-page .portal-menu a{max-width:100%}
@media(max-width:700px){.plasma-page .portal-menu{padding-left:0;padding-right:0}}

/* A copper wireframe cube rotates behind the introduction lettering. */
.intro{isolation:isolate}
.cube-scene{--cube-size:clamp(93.75px,10.625vw,131.25px);--cube-half:calc(var(--cube-size)/2);position:absolute;left:14%;top:13px;width:var(--cube-size);height:var(--cube-size);perspective:700px;z-index:-1;pointer-events:none;opacity:.55}
.copper-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:copper-cube-turn 24s linear infinite}
.cube-face{position:absolute;inset:0;border:1.5px solid #e6a06b;background:transparent;box-shadow:0 0 5px #c5793b30,inset 0 0 5px #c5793b20;backface-visibility:visible}
.cube-front{transform:translateZ(var(--cube-half))}
.cube-back{transform:rotateY(180deg) translateZ(var(--cube-half))}
.cube-right{transform:rotateY(90deg) translateZ(var(--cube-half))}
.cube-left{transform:rotateY(-90deg) translateZ(var(--cube-half))}
.cube-top{transform:rotateX(90deg) translateZ(var(--cube-half))}
.cube-bottom{transform:rotateX(-90deg) translateZ(var(--cube-half))}
.intro h1{text-shadow:0 2px 10px #080910}
@keyframes copper-cube-turn{from{transform:rotateX(-20deg) rotateY(25deg) rotateZ(0deg)}to{transform:rotateX(340deg) rotateY(385deg) rotateZ(360deg)}}
@media(max-width:700px){.cube-scene{top:16px;left:12%}}
@media(prefers-reduced-motion:reduce){.copper-cube{animation:none;transform:rotateX(-20deg) rotateY(25deg)}}