:root { --paper:#0b0b0a; --ink:#ecebe6; --muted:#95938b; --accent:#e8693c; }
* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; scroll-padding-block:80px 8px; }
html:has(.scene-link:focus-visible) { scroll-behavior:auto; }
#projects,.project-scene { scroll-margin-block-start:-80px; }
body { margin:0; min-width:240px; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
::selection { background:var(--accent); color:var(--paper); }
[hidden] { display:none !important; }
.visually-hidden,.visual-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; z-index:20; padding:12px 16px; background:var(--ink); color:var(--paper); transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.home-header { position:fixed; inset:0 0 auto; z-index:8; height:72px; display:flex; align-items:center; justify-content:space-between; padding-inline:32px; background:linear-gradient(#08090bf5,#08090bb0 65%,#08090b00); pointer-events:none; }
.home-header a { pointer-events:auto; }
.home-wordmark { display:inline-flex; align-items:center; min-width:44px; min-height:44px; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.home-wordmark span { color:var(--accent); }
.home-nav { display:flex; align-items:center; gap:32px; font-size:15px; font-weight:700; }
.home-nav a { display:inline-flex; align-items:center; min-height:44px; }
.home-nav a:hover { color:var(--accent); }
.home-visual { position:relative; height:100svh; min-height:320px; overflow:hidden; isolation:isolate; background:#000; }
.home-visual::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(0deg,var(--paper),transparent 24%); }
main:focus { outline:none; }
#kineticCanvas { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; }
.home-static { position:absolute; inset:0; z-index:-3; display:grid; place-items:center; color:#bd82d6; font:900 clamp(6rem,24vw,26rem)/1 "Arial Black",Arial,sans-serif; }
.visual-ready .home-static { display:none; }
.hero-bottom { position:absolute; bottom:24px; left:32px; right:32px; display:flex; justify-content:center; }
.scroll-cue { display:inline-flex; align-items:center; justify-content:center; min-width:80px; min-height:48px; font-size:15px; font-weight:700; color:var(--ink); }
.scroll-cue:hover { color:var(--accent); }
.project-scene { position:relative; height:100svh; min-height:480px; display:grid; padding:96px 6vw 56px; scroll-margin-top:0; }
.scene-link { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:24px; min-height:0; }
.scene-art { min-width:0; min-height:0; overflow:hidden; }
.scene-picture,.scene-image { display:block; width:100%; height:100%; }
.scene-image { object-fit:contain; }
.scene-caption { text-align:center; }
.scene-name { margin:0; font-size:clamp(36px,4vw,60px); font-weight:800; line-height:1.05; letter-spacing:-.025em; overflow-wrap:anywhere; }
.scene-link:hover .scene-name { color:var(--accent); }
.home-footer { display:flex; flex-wrap:wrap; align-items:center; gap:8px 32px; margin:0 6vw; padding-block:28px; font-size:14px; font-weight:600; color:var(--muted); }
.home-footer-name { margin-right:auto; }
.home-footer a { display:inline-flex; align-items:center; min-height:44px; }
.home-footer a:hover { color:var(--accent); }
@media(max-width:700px) {
  html { scroll-padding-block-start:72px; }
  #projects,.project-scene { scroll-margin-block-start:-72px; }
  .home-header { height:64px; padding-inline:24px; }
  .home-nav { gap:24px; }
  .hero-bottom { left:24px; right:24px; bottom:16px; }
  .project-scene { padding:88px 24px 48px; }
  .scene-link { gap:20px; }
  .scene-name { font-size:36px; }
  .home-footer { margin-inline:24px; }
  .home-footer-name { width:100%; }
}
@media(max-height:480px) {
  .project-scene { min-height:320px; padding:80px 24px 24px; }
  .scene-link { gap:16px; }
  .scene-name { font-size:32px; }
}
@media(max-height:480px) and (min-width:500px) {
  .scene-link { grid-template-columns:minmax(0,1fr) minmax(0,.6fr); grid-template-rows:1fr; align-items:center; gap:24px; }
  .scene-art { height:100%; }
  .scene-caption { text-align:left; }
  .scene-name { font-size:clamp(24px,4vw,32px); }
}
@media(max-width:300px) { .scene-name { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }