/* One continuous surface, from the field to its project nodes. */
html { scrollbar-gutter: stable; }
body { background: radial-gradient(ellipse at 70% 35%, #101318 0%, #070809 40%, #050607 75%) fixed; }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .023; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.hero { background: transparent; height: 240svh; }
.hero-sticky { background: transparent; min-height: 0; overflow: visible; isolation: auto; }
.hero-sticky::after { display: none; }
.field-canvas { position: fixed; z-index: 1; pointer-events: none; }
.hero-copy { z-index: 3; }
h1 { position: relative; font-weight: 500; letter-spacing: -.055em; }
.title-mask { position: relative; transform-origin: 0 0; transition: none; width: max-content; }
.title-dispersion { position: absolute !important; inset: 0; color: transparent; text-shadow: -1.5px 0 rgba(0,229,255,.7), 1.5px 0 rgba(176,76,255,.6); opacity: 0; pointer-events: none; transform: none !important; animation: none !important; }
.descriptor { grid-template-columns: 1fr; gap: 14px; max-width: 330px; color: #8c9197; }
.descriptor p:first-child { color: #b1b6bb; }
.micro-status { color: #8c929b; }
.sound-toggle, .opening-replay { min-height: 32px; }
.scroll-indicator { color: #8a9099; }
.spectrum { left: 51%; }
.skip-to-work { position: fixed; top: 12px; left: 16px; z-index: 110; padding: 14px 18px; background: #e8eaed; color: #050607; transform: translateY(-180%); font-size: 13px; }
.skip-to-work:focus { transform: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid #b7c5cf; outline-offset: 6px; }
.works { background: transparent; min-height: 0; padding-top: 20svh; padding-bottom: 20svh; overflow: visible; }
.works::before { display: none; }
.works-title-anchor { position: absolute; top: 1.5svh; left: 4.2vw; width: 1px; height: 1px; }
.works-head { margin-bottom: clamp(65px, 10svh, 110px); }
.works-index > span { color: #90969d; font-size: 10px; }
.works-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(44px, 7vw, 110px); }
.project-row { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-right: 25px; }
.project-row h3 { font-size: clamp(1.2rem, 2vw, 2rem); }
.project-type { grid-column: 2; text-align: left; margin-top: -22px; color: #7f8791; }
.project-no { grid-row: 1 / 3; color: #9197a0; }
.project-node { z-index: 4; }
.project-preview { top: 7svh; }
.about { position: relative; z-index: 4; padding-top: 12svh; min-height: 86svh; border-top: 1px solid #171b20; }
.about-label { color: #9298a1; }
.contact-block { margin: 8svh 0; scroll-margin-top: 50px; }
.contact-eyebrow { font: 10px/1.5 var(--font-standard); letter-spacing: .09em; color: #9198a2; }
.contact-pending { font-size: 14px; color: #a3aab2; }
.contact-email { display: inline-block; font-size: clamp(18px, 3vw, 38px); letter-spacing: -.035em; padding-block: 10px; }
.contact-email span { font-size: .65em; margin-left: 10px; }
.contact-block .contact-link { display: inline-block; margin-top: 18px; min-height: 40px; }
.about footer { gap: 18px; align-items: center; color: #858c95; line-height: 1.5; }
.cursor, .cursor-trail { opacity: 0; transition: opacity .2s; }
body.cursor-active .cursor, body.cursor-active .cursor-trail { opacity: 1; }
body:has(dialog[open]) .cursor, body:has(dialog[open]) .cursor-trail { visibility: hidden; }
dialog, dialog a, dialog button, dialog input { cursor: auto !important; }
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-copy { top: 48%; }
  .nav { font-size: 10px; }
}
@media (max-width: 900px) {
  .works-grid { grid-template-columns: 1fr; }
  .project-type { display: block; }
  .works-head { gap: 34px; }
}
@media (max-width: 760px) {
  .hero { height: 230svh; }
  .hero-copy { top: 47%; }
  h1 { font-size: clamp(42px, calc(20vw - 12.8px), 100px); }
  .nav { font-size: 10px; }
  .nav nav { gap: 15px; }
  .brand { max-width: none; gap: 6px; }
  .brand span:last-child { display: none; }
  .brand-slash { display: none; }
  .micro-status { top: 83px; font-size: 9px; }
  .descriptor p:last-child { display: block; }
  .descriptor { font-size: 13px; gap: 12px; }
  .scroll-indicator { display: flex; left: 24px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 65px)); font-size: 8px; letter-spacing: .05em; }
  .scroll-indicator b { height: 23px; }
  .micro-right { font-size: 8px; right: 24px; bottom: max(25px, env(safe-area-inset-bottom)); }
  .spectrum { left: 24px; width: 34vw; bottom: max(29px, env(safe-area-inset-bottom)); }
  .works { padding-top: 17svh; padding-bottom: 12svh; }
  .works-title-anchor { left: 24px; }
  .works-index { display: block; }
  .works-index > span { margin-bottom: 16px; }
  .works-head { margin-bottom: 50px; }
  .project-row { min-height: 96px; }
  .project-type { font-size: 9px; }
  .about footer { flex-wrap: wrap; font-size: 8px; }
  .about footer > span:first-child { flex-basis: 100%; }
}
@media (max-height: 580px) and (min-width: 600px) {
  h1 { font-size: min(8vw, 16svh); }
  .hero-copy { top: 50%; }
  .descriptor { margin-top: 18px; font-size: 12px; gap: 5px; }
  .descriptor p:last-child { display: none; }
  .micro-status { top: 85px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .title-mask { transform: none !important; opacity: 1 !important; }
  .title-dispersion { display: none; }
  .cursor, .cursor-trail { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  .scroll-indicator span { font-size: 0; }
  .scroll-indicator span::after { content: 'SCROLL TO EXPLORE'; font-size: 9px; }
}