:root{--ink:#050505;--blush:#e2aa9e}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink);color-scheme:dark}body{margin:0;min-width:320px;overflow-x:hidden;background:var(--ink);color:#fff;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:10px 14px;border-radius:999px;color:#111;background:#fff;transform:translateY(-150%)}.skip-link:focus{transform:none}.page-shell{width:100%;min-height:100vh}.artboard{position:relative;width:min(100%,1920px);margin:auto;overflow:clip;isolation:isolate}picture,.page-art{display:block;width:100%}.page-art{height:auto;user-select:none;pointer-events:none;filter:contrast(1.025) saturate(.9)}.gloss{position:absolute;inset:-25%;z-index:2;pointer-events:none;background:linear-gradient(112deg,transparent 31%,rgba(255,255,255,.015) 39%,rgba(255,255,255,.09) 47%,rgba(255,255,255,.02) 54%,transparent 64%);transform:translate3d(-38%,0,0);animation:glassSweep 10s ease-in-out infinite;mix-blend-mode:screen}.cursor-glow{position:absolute;z-index:3;width:360px;height:360px;left:var(--mouse-x,50%);top:var(--mouse-y,20%);transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;opacity:.22;background:radial-gradient(circle,rgba(255,240,234,.18),rgba(255,255,255,.03) 38%,transparent 70%);transition:left .16s ease-out,top .16s ease-out;mix-blend-mode:screen}@keyframes glassSweep{0%,18%{transform:translate3d(-42%,0,0);opacity:.18}52%{opacity:.65}78%,100%{transform:translate3d(43%,0,0);opacity:.14}}.glass-nav{position:absolute;z-index:8;top:2.1%;right:3.4%;display:flex;gap:clamp(4px,1vw,14px);padding:7px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(15,15,15,.32);backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 28px rgba(0,0,0,.18)}.glass-nav a,.hotspot span,.mobile-actions a{color:rgba(255,255,255,.95);text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(8px,.66vw,12px)}.glass-nav a{padding:9px 12px;border-radius:999px;transition:.2s}.glass-nav a:hover,.glass-nav a:focus-visible{background:rgba(255,255,255,.11);transform:translateY(-1px);outline:none}.hotspot{position:absolute;z-index:9;display:grid;place-items:center;overflow:hidden;color:#fff;text-decoration:none;border:1px solid rgba(226,170,158,.72);background:rgba(10,10,10,.2);backdrop-filter:blur(4px) saturate(130%);-webkit-backdrop-filter:blur(4px) saturate(130%);transition:.2s}.hotspot:hover,.hotspot:focus-visible{transform:translateY(-2px) scale(1.018);background:rgba(226,170,158,.15);outline:2px solid rgba(255,255,255,.72);outline-offset:2px}.portfolio-button{left:3.72%;top:74.22%;width:13.48%;height:3.42%}.support-button{left:3.72%;top:95.85%;width:12.17%;height:3.28%}.anchor{position:absolute;left:0;width:1px;height:1px;scroll-margin-top:84px}.about-anchor{top:35%}.portfolio-anchor{top:61%}.support-anchor{top:80%}.mobile-actions{display:none}@media(max-width:700px){body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}.artboard{width:100%;max-width:none;margin:0;overflow:hidden}.glass-nav{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;right:auto;z-index:30;max-width:calc(100vw - 20px);transform:translateX(-50%);background:rgba(12,12,12,.78)}.glass-nav a{padding:8px clamp(6px,2.4vw,10px);font-size:9px}.hotspot{min-width:44px;min-height:24px}.hotspot span{font-size:clamp(5px,1.6vw,8px);letter-spacing:.08em}.mobile-actions{position:fixed;z-index:40;right:12px;bottom:max(12px,env(safe-area-inset-bottom));left:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(8,8,8,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.mobile-actions a{display:grid;min-height:44px;place-items:center;border:1px solid rgba(226,170,158,.48);border-radius:12px;background:rgba(226,170,158,.08);font-size:10px}.cursor-glow{display:none}}@media(hover:none),(pointer:coarse){.gloss{animation-duration:16s;opacity:.28}.cursor-glow{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gloss{animation:none}.cursor-glow{display:none}}
.donation-button {
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.donation-button:hover,
.donation-button:focus-visible {
  background: rgba(226,170,158,.18);
}

@media (max-width:700px){
  .page-art{width:100%;height:auto;filter:contrast(1.02) saturate(.92)}
  .hotspot{display:none}
  .anchor.about-anchor{top:27%}
  .anchor.portfolio-anchor{top:54%}
  .anchor.support-anchor{top:79%}
  .glass-nav{width:calc(100vw - 20px);justify-content:center;gap:2px}
  .glass-nav a{flex:1;text-align:center;white-space:nowrap}
}

/* Final approved landing artwork */
.page-art { display:block; width:100%; height:auto; }

/* Hotspots aligned to the approved desktop artwork */
.portfolio-button {
  left: 3.55%;
  top: 35.75%;
  width: 18.35%;
  height: 5.65%;
}
.support-button {
  left: 23.85%;
  top: 35.75%;
  width: 20.1%;
  height: 5.65%;
}

/* Section anchors for approved layout */
.about-anchor { top: 43%; }
.portfolio-anchor { top: 67%; }
.support-anchor { top: 84%; }

@media (max-width:700px) {
  .page-art { width:100%; height:auto; }
  .hotspot { display:none; }
  .mobile-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .glass-nav {
    width:calc(100vw - 18px);
    max-width:none;
  }
  .glass-nav a {
    font-size:8px;
    padding:8px 4px;
  }
  .about-anchor { top: 43%; }
  .portfolio-anchor { top: 67%; }
  .support-anchor { top: 84%; }
}

/* Invisible interactive layer aligned to the buttons and navigation baked into the approved artwork. */
.glass-nav,
.hotspot {
  display: none !important;
}

.art-hotspots {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.click-zone {
  position: absolute;
  display: block;
  pointer-events: auto;
  background: transparent;
  border: 0;
  border-radius: 14px;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 190, 150, .18);
}

/* The normal state stays invisible, so the approved artwork is untouched. */
.click-zone:hover {
  background: rgba(255, 205, 175, .035);
}

.click-zone:focus-visible {
  outline: 2px solid rgba(255, 215, 185, .95);
  outline-offset: 3px;
  background: rgba(255, 205, 175, .06);
}

/* Top navigation baked into the artwork. Coordinates are relative to 1536 x 1024. */
.nav-about     { left: 42.5%; top: 2.25%; width: 8.5%;  height: 5.8%; }
.nav-portfolio { left: 51.2%; top: 2.25%; width: 10.2%; height: 5.8%; }
.nav-motion    { left: 61.7%; top: 2.25%; width: 8.8%;  height: 5.8%; }
.nav-scenes    { left: 70.7%; top: 2.25%; width: 16.3%; height: 5.8%; }
.nav-contact   { left: 87.1%; top: 2.25%; width: 10.0%; height: 5.8%; }

/* Two hero buttons baked into the artwork. */
.hero-portfolio { left: 3.55%; top: 35.75%; width: 18.35%; height: 5.65%; }
.hero-support   { left: 23.85%; top: 35.75%; width: 20.10%; height: 5.65%; }

/* Lower portfolio and support buttons baked into the artwork. */
.lower-portfolio { left: 3.70%; top: 77.10%; width: 17.10%; height: 4.15%; }
.lower-support   { left: 3.70%; top: 96.20%; width: 15.70%; height: 3.55%; }

@media (max-width: 700px) {
  /* The baked desktop nav is too small on phones, so the fixed mobile action bar remains the primary control. */
  .nav-about,
  .nav-portfolio,
  .nav-motion,
  .nav-scenes,
  .nav-contact {
    display: none;
  }

  /* Keep all visible baked buttons live on phones as well. */
  .hero-portfolio { left: 3.55%; top: 35.75%; width: 18.35%; height: 5.65%; }
  .hero-support   { left: 23.85%; top: 35.75%; width: 20.10%; height: 5.65%; }
  .lower-portfolio { left: 3.70%; top: 77.10%; width: 17.10%; height: 4.15%; }
  .lower-support   { left: 3.70%; top: 96.20%; width: 15.70%; height: 3.55%; }
}

/* Mobile-first repair: use enlarged stacked artwork instead of shrinking the desktop page. */
@media (max-width:700px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .artboard {
    width: 100%;
    max-width: none;
    overflow: hidden;
  }

  .page-art {
    width: 100%;
    height: auto;
  }

  .glass-nav {
    display: flex !important;
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    z-index: 50;
    width: calc(100vw - 16px);
    max-width: 520px;
    transform: translateX(-50%);
    justify-content: center;
    gap: 2px;
    padding: 6px;
    background: rgba(8,8,8,.82);
    border: 1px solid rgba(255,220,195,.32);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }

  .glass-nav a {
    flex: 1;
    padding: 9px 4px;
    font-size: 8px;
    text-align: center;
    white-space: nowrap;
  }

  .mobile-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    z-index: 60;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 8px;
    border-radius: 18px;
    background: rgba(7,7,7,.86);
    border: 1px solid rgba(255,213,186,.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mobile-actions a {
    min-height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255,194,155,.48);
    background: rgba(255,194,155,.08);
    font-size: 10px;
  }

  .art-hotspots {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
  }

  .click-zone {
    pointer-events: auto;
  }

  /* Hide the baked desktop top navigation click zones on mobile.
     The fixed glass navigation above replaces them with proper tap targets. */
  .nav-about,
  .nav-portfolio,
  .nav-motion,
  .nav-scenes,
  .nav-contact {
    display: none !important;
  }

  /* Every visible baked button remains clickable in the stacked mobile artwork. */
  .hero-portfolio {
    display:block !important;
    left:8.5938%;
    top:18.9863%;
    width:44.0625%;
    height:3.0606%;
  }

  .hero-support {
    display:block !important;
    left:57.1875%;
    top:18.9863%;
    width:42.0312%;
    height:3.0606%;
  }

  .lower-portfolio {
    display:block !important;
    left:15.4891%;
    top:71.1925%;
    width:70.9239%;
    height:3.5185%;
  }

  .lower-support {
    display:block !important;
    left:13.1034%;
    top:91.6883%;
    width:54.4828%;
    height:2.7476%;
  }

  .about-anchor { top:39.3176%; }
  .portfolio-anchor { top:61.3587%; }
  .support-anchor { top:81.1559%; }

  .cursor-glow { display:none !important; }
}