:root { --ink:#120e10; --paper:#e7d6b8; --cream:#f5edda; --red:#d84943; --cyan:#58c7c0; --line:rgba(245,237,218,.3); --mono:"DM Mono",monospace; --sans:"Space Grotesk",sans-serif; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; background:var(--ink); color:var(--cream); font-family:var(--sans); }
body { overflow:hidden; }
button, a { font:inherit; }
button { color:inherit; }
a { color:inherit; }
.room-shell, #room-canvas { width:100%; height:100svh; }
.room-shell { position:relative; overflow:hidden; background:radial-gradient(circle at 65% 32%, #382522, #120e10 67%); }
#room-canvas { position:absolute; inset:0; display:block; outline:none; cursor:crosshair; }
.grain, .vignette { position:absolute; inset:0; pointer-events:none; z-index:2; }
.grain { opacity:.055; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.vignette { background:radial-gradient(ellipse at center, transparent 48%, rgba(9,6,7,.34) 100%); }
.hud { position:absolute; z-index:5; inset:0 0 auto; padding:1.25rem clamp(1rem,3vw,2.5rem); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; pointer-events:none; }
.hud a, .hud button { pointer-events:auto; }
.wordmark { text-decoration:none; font:500 1.5rem var(--mono); letter-spacing:-.15em; }
.wordmark span, em { color:var(--red); font-style:normal; font-weight:400; }
.room-name, .eyebrow, .mono { margin:0; font:.61rem/1.35 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.room-name { color:rgba(245,237,218,.65); }
.motion-toggle { justify-self:end; border:1px solid var(--line); padding:.48rem .62rem; background:rgba(18,14,16,.4); cursor:pointer; font:.58rem var(--mono); letter-spacing:.05em; }
.motion-toggle[aria-pressed="false"] { color:var(--cyan); border-color:var(--cyan); }
.room-intro { position:absolute; z-index:4; left:clamp(1rem,7vw,7rem); bottom:clamp(7rem,14vh,10rem); width:min(410px,calc(100% - 2rem)); pointer-events:none; text-shadow:0 2px 18px #120e10; transition:opacity .35s, transform .35s; }
.room-intro.is-muted { opacity:0; transform:translateY(1rem); }
.eyebrow { color:var(--cyan); }
h1, h2, p { margin-top:0; }
h1, h2 { text-transform:uppercase; letter-spacing:-.075em; line-height:.82; }
h1 { margin:.75rem 0 1rem; font-size:clamp(3.4rem,8.5vw,7.5rem); }
.intro-copy { width:min(310px,100%); margin:0; color:rgba(245,237,218,.76); line-height:1.45; }
.object-controls { position:absolute; z-index:5; bottom:1.4rem; left:50%; transform:translateX(-50%); display:flex; gap:.55rem; width:max-content; max-width:calc(100% - 2rem); }
.object-control, .back-button, .project-link { border:1px solid var(--line); background:rgba(18,14,16,.72); padding:.65rem .8rem; cursor:pointer; text-transform:uppercase; text-decoration:none; font:.6rem var(--mono); letter-spacing:.04em; backdrop-filter:blur(4px); transition:background .18s, color .18s, transform .18s; }
.object-control span { color:var(--red); margin-right:.4rem; }
.object-control:hover, .object-control:focus-visible, .back-button:hover, .back-button:focus-visible, .project-link:hover, .project-link:focus-visible { color:var(--ink); background:var(--cyan); border-color:var(--cyan); outline:none; transform:translateY(-2px); }
.credits { position:absolute; z-index:5; right:clamp(1rem,3vw,2.5rem); bottom:1.25rem; max-width:255px; color:rgba(245,237,218,.67); font:.5rem/1.42 var(--mono); text-transform:uppercase; letter-spacing:.025em; text-align:right; }
.credits .eyebrow { margin-bottom:.25rem; font-size:.5rem; color:rgba(88,199,192,.8); }
.credits p { margin:0; }
.credits ul { margin:.25rem 0 .35rem; padding:0; list-style:none; }
.credits a { color:var(--cream); text-decoration-color:rgba(245,237,218,.4); text-underline-offset:.18em; }
.credits a:hover, .credits a:focus-visible { color:var(--cyan); outline:none; }
.object-tooltip { position:absolute; z-index:4; left:50%; top:22%; transform:translateX(-50%); min-height:1rem; pointer-events:none; color:var(--cream); font:.62rem var(--mono); letter-spacing:.08em; text-transform:uppercase; text-shadow:0 2px 10px #000; }
.detail-panel { position:absolute; z-index:8; inset:clamp(4.6rem,9vh,7rem) clamp(1rem,7vw,7rem) clamp(4.6rem,9vh,6rem); display:none; overflow:auto; color:var(--ink); background:var(--paper); border:1px solid rgba(18,14,16,.8); box-shadow:11px 11px 0 rgba(216,73,67,.7), -4px -4px 0 rgba(88,199,192,.45); padding:clamp(1.5rem,4vw,4rem); }
.detail-panel.is-visible { display:block; animation:panel-in .32s cubic-bezier(.2,.8,.2,1); }
@keyframes panel-in { from { opacity:0; transform:translateY(1rem) rotate(.6deg); } to { opacity:1; transform:none; } }
.detail-panel .eyebrow { color:#9e2e31; }
.panel-close { position:absolute; right:1rem; top:.5rem; border:0; background:none; color:var(--ink); cursor:pointer; font-size:2rem; line-height:1; }
.panel-close:hover, .panel-close:focus-visible { color:var(--red); outline:none; }
.id-card-layout { display:grid; grid-template-columns:1fr 1fr; margin:1.3rem 0 2rem; border:1px solid rgba(18,14,16,.6); min-height:330px; }
.identity-side, .contact-side { padding:clamp(1.3rem,3vw,2.5rem); }
.identity-side { background:#d9c7a9; border-right:1px dashed rgba(18,14,16,.65); }
.contact-side { background:#e7d6b8; display:flex; flex-direction:column; align-items:flex-start; }
.card-stamp, .skills-label { margin:0; font:.56rem var(--mono); letter-spacing:.09em; }
.identity-side h2, .crate-panel h2, .album-copy h2 { margin:.9rem 0 1.2rem; font-size:clamp(2.6rem,5.8vw,5.2rem); }
.role { font:.65rem/1.5 var(--mono); letter-spacing:.05em; }
.profile-facts { margin:2rem 0 0; display:grid; gap:.8rem; }
.profile-facts div { border-top:1px solid rgba(18,14,16,.35); padding-top:.45rem; }
.profile-facts dt { font:.55rem var(--mono); color:#9e2e31; }
.profile-facts dd { margin:.2rem 0 0; font-size:.9rem; }
.contact-note { max-width:280px; margin:1.7rem 0 1.2rem; line-height:1.42; }
.contact-side a { margin:.22rem 0; border-bottom:1px solid var(--ink); text-decoration:none; font-weight:600; }
.contact-side a span, .project-link span { color:var(--red); }
.skills-label { margin-top:auto; padding-top:2rem; line-height:1.6; }
.back-button { color:var(--ink); border-color:rgba(18,14,16,.5); background:transparent; }
.crate-panel { max-width:800px; }
.crate-panel h2 { font-size:clamp(3.2rem,8vw,6.8rem); }
.crate-instruction { max-width:390px; line-height:1.4; }
.record-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:2rem 0; border-top:1px solid rgba(18,14,16,.45); }
.record-choice { display:flex; justify-content:space-between; gap:1rem; text-align:left; border:0; border-bottom:1px solid rgba(18,14,16,.45); background:transparent; padding:1rem .25rem; color:var(--ink); cursor:pointer; font:600 clamp(.9rem,1.8vw,1.3rem)/1 var(--sans); }
.record-choice:nth-child(odd) { border-right:1px solid rgba(18,14,16,.45); padding-right:1rem; }
.record-choice:nth-child(even) { padding-left:1rem; }
.record-choice span { color:#9e2e31; font:.57rem var(--mono); }
.record-choice:hover, .record-choice:focus-visible { background:#d84943; color:var(--cream); outline:none; }
.record-choice:hover span, .record-choice:focus-visible span { color:var(--cream); }
.album-panel { --vinyl-primary:#d84943; --vinyl-deep:#211a20; --vinyl-label:#e7d6b8; max-width:1050px; }
.album-book { display:grid; grid-template-columns:1fr 1fr; margin:1.2rem 0 2rem; min-height:380px; box-shadow:0 0 0 1px rgba(18,14,16,.75); transform-origin:center; animation:book-open .45s cubic-bezier(.22,.8,.2,1); }
@keyframes book-open { from { transform:perspective(900px) rotateY(-55deg) scale(.9); opacity:0; } to { transform:none; opacity:1; } }
.album-copy, .album-disc-side { padding:clamp(1.5rem,4vw,3.5rem); }
.album-copy { position:relative; background:#d8c4a4; border-right:1px dashed rgba(18,14,16,.7); }
.album-number { color:#a02c30; }
.album-description { max-width:390px; font-size:clamp(1rem,1.7vw,1.3rem); line-height:1.4; }
.project-link { display:inline-block; margin-top:1rem; }
.album-disc-side { display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 45%, var(--vinyl-deep), #171318 70%); color:var(--cream); }
.album-disc-side > p, .disc-hint { font:.55rem var(--mono); letter-spacing:.09em; }
.vinyl-disc { position:relative; display:grid; place-items:center; width:min(235px,68vw); height:min(235px,68vw); flex:none; margin:1rem 0; padding:0; border:0; border-radius:50%; overflow:hidden; cursor:pointer; background:transparent; box-shadow:0 10px 20px rgba(0,0,0,.45), 0 0 24px var(--vinyl-primary); transition:transform .3s ease; }
.vinyl-model { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.vinyl-disc:hover, .vinyl-disc:focus-visible { transform:rotate(35deg) scale(1.05); outline:2px solid var(--cyan); outline-offset:5px; }
.disc-label { position:absolute; z-index:1; width:24%; text-align:center; color:#120e10; font:.42rem/1.1 var(--mono); letter-spacing:.02em; text-transform:uppercase; }
.fallback { display:none; position:relative; z-index:9; min-height:100svh; padding:7rem 1.5rem 3rem; background:var(--ink); overflow:auto; }
.fallback p:not(.eyebrow) { max-width:540px; line-height:1.5; }
.fallback-links { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 3rem; }
.fallback-links a { border:1px solid var(--line); padding:.55rem .75rem; text-decoration:none; font:.6rem var(--mono); text-transform:uppercase; }
.fallback-projects { display:grid; gap:.65rem; max-width:700px; }
.fallback-projects a { border-bottom:1px solid var(--line); padding:.75rem 0; text-decoration:none; }
body.no-webgl { overflow:auto; }
body.no-webgl #room-canvas, body.no-webgl .hud, body.no-webgl .room-intro, body.no-webgl .object-controls, body.no-webgl .object-tooltip, body.no-webgl .credits, body.no-webgl .grain, body.no-webgl .vignette { display:none; }
body.no-webgl .fallback { display:block; }
@media (max-width:700px) {
  .hud { grid-template-columns:1fr auto; padding:calc(.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left)); }
  .room-name, .credits { display:none; }
  .motion-toggle { min-height:2.75rem; padding:.5rem .65rem; }
  .room-intro { left:max(1rem, env(safe-area-inset-left)); bottom:6.2rem; width:min(390px, calc(100% - 2rem)); }
  .object-tooltip { top:5.1rem; max-width:calc(100% - 2rem); text-align:center; }
  .object-controls { bottom:calc(.75rem + env(safe-area-inset-bottom)); width:calc(100% - 2rem); gap:.5rem; }
  .object-control { flex:1 1 0; min-height:2.75rem; padding:.55rem .35rem; font-size:.53rem; line-height:1.25; }
  .detail-panel { inset:calc(3.75rem + env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); padding:2.35rem 1rem 1rem; box-shadow:5px 5px 0 rgba(216,73,67,.7), -2px -2px 0 rgba(88,199,192,.45); }
  .panel-close { top:.55rem; right:.65rem; min-width:2.75rem; min-height:2.75rem; }
  .id-card-layout, .album-book { grid-template-columns:1fr; }
  .identity-side, .album-copy { border-right:0; border-bottom:1px dashed rgba(18,14,16,.65); }
  .id-card-layout { min-height:0; margin:1rem 0 1.25rem; }
  .identity-side, .contact-side, .album-copy, .album-disc-side { padding:1.25rem; }
  .contact-side { min-height:0; }
  .profile-facts { margin-top:1.25rem; }
  .skills-label { margin-top:1.5rem; padding-top:1.25rem; }
  .record-list { grid-template-columns:1fr; margin:1.25rem 0; }
  .record-choice { min-height:3.2rem; }
  .record-choice:nth-child(odd) { border-right:0; padding-right:.25rem; }
  .record-choice:nth-child(even) { padding-left:.25rem; }
  .album-book { min-height:0; margin:1rem 0 1.25rem; }
  .album-disc-side { min-height:260px; }
  .back-button { min-height:2.75rem; }
}
@media (max-width:420px) {
  h1 { font-size:clamp(2.65rem, 14vw, 3.4rem); }
  .room-intro { bottom:5.5rem; }
  .intro-copy { font-size:.88rem; }
  .object-control span { display:block; margin:0 0 .15rem; }
  .identity-side h2, .crate-panel h2, .album-copy h2 { font-size:clamp(2.25rem, 14vw, 3.3rem); }
  .vinyl-disc { width:min(210px, 66vw); height:min(210px, 66vw); }
}
@media (max-width:700px) and (max-height:500px) {
  .room-intro { bottom:4.7rem; }
  .room-intro .intro-copy, .object-tooltip { display:none; }
  h1 { margin:.4rem 0 0; font-size:clamp(2.35rem, 8vw, 3.4rem); }
  .detail-panel { top:calc(3.5rem + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }