:root {
  --black: #101010;
  --black-soft: #181818;
  --paper: #f3f0e9;
  --orange: #ff6b1a;
  --violet: #7253d7;
  --blue: #91b7c4;
  --line: rgba(16, 16, 16, .18);
  --body: "Manrope", Arial, sans-serif;
  --display: "Space Grotesk", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --edge: clamp(1.25rem, 5vw, 5.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--black); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--orange); color: var(--black); font-weight: 800; transform: translateY(-180%); transition: transform .2s; }.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 10; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--edge); color: var(--paper); transition: background .18s, color .18s; }.site-header.is-scrolled { position: fixed; padding-block: 1rem; background: rgba(16, 16, 16, .95); box-shadow: 0 1px 0 rgba(243, 240, 233, .15); }
.logo { font: 700 1rem/1 var(--display); letter-spacing: -.065em; }.logo span { color: var(--orange); }
.site-nav { display: flex; gap: clamp(1.4rem, 3vw, 3.5rem); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.site-nav a { border-bottom: 1px solid transparent; padding-bottom: .35rem; transition: border-color .2s, color .2s; }.site-nav a:hover, .site-nav a:focus-visible { color: var(--orange); border-color: currentColor; }
.menu-toggle { display: none; }

.hero { min-height: min(800px, 92vh); position: relative; display: flex; align-items: end; overflow: hidden; isolation: isolate; background: var(--black); color: var(--paper); }.hero-photo { position: absolute; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: grayscale(100%) contrast(1.05); }.hero-overlay { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(16,16,16,.9) 0%, rgba(16,16,16,.58) 41%, rgba(16,16,16,.08) 75%), linear-gradient(0deg, rgba(16,16,16,.72), transparent 50%); }.hero::after { content: ""; position: absolute; right: 9%; bottom: 0; width: 12px; height: 41%; background: var(--orange); }
.hero-content { width: 100%; padding: 10rem var(--edge) clamp(3rem, 8vw, 6.5rem); }.kicker, .section-label { margin: 0; font: .65rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }.kicker { color: var(--orange); }.hero h1 { max-width: 800px; margin: .9rem 0 0; font: 700 clamp(5.4rem, 13vw, 12rem)/.74 var(--display); letter-spacing: -.105em; text-transform: uppercase; }.hero h1 span { color: var(--orange); }.hero-role { margin: 2.2rem 0 0; font-size: .85rem; font-weight: 600; line-height: 1.6; }.hero-link { position: absolute; right: var(--edge); bottom: 3rem; display: inline-flex; align-items: center; gap: 1.7rem; border-bottom: 1px solid var(--orange); padding-bottom: .65rem; font: .67rem var(--mono); letter-spacing: .07em; text-transform: uppercase; transition: color .2s; }.hero-link:hover { color: var(--orange); }

.section { padding: clamp(5rem, 10vw, 9rem) var(--edge); }.section-label { display: flex; align-items: center; gap: .8rem; color: #63615c; }.section-label span { color: var(--orange); }.section-label::after { content: ""; width: 45px; height: 1px; background: currentColor; }.about { border-bottom: 1px solid var(--line); }.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: clamp(3rem, 11vw, 14rem); margin-top: clamp(3.4rem, 7vw, 7rem); }.about h2, .media h2, .contact h2 { margin: 0; font: 700 clamp(2.8rem, 5vw, 5.8rem)/.95 var(--display); letter-spacing: -.075em; }.bio-copy { max-width: 585px; }.bio-copy > p { margin: 0 0 1.2rem; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.7; }.artist-facts { display: grid; gap: .8rem; margin: 2.5rem 0 0; border-top: 1px solid var(--line); padding-top: 1.25rem; }.artist-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; font-size: .78rem; line-height: 1.45; }.artist-facts dt { color: #6b6861; font: .61rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }.artist-facts dd { margin: 0; font-weight: 700; }

.media { background: var(--black); color: var(--paper); }.media .section-label { color: rgba(243, 240, 233, .58); }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }.media h2 { max-width: 700px; }.media-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 1rem; }.media-item > a { position: relative; display: block; overflow: hidden; aspect-ratio: .82; background: var(--black-soft); }.media-feature > a { aspect-ratio: 1.15; }.media-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); transition: filter .45s, transform .6s; }.media-item > a:hover img { filter: grayscale(0%); transform: scale(1.04); }.watch-badge, .listen-badge { position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: .8rem; align-items: center; padding: .7rem .85rem; background: var(--orange); color: var(--black); font: .6rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }.watch-badge b, .listen-badge b { font-size: .85rem; }.audio-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1.5vw, 1.4rem); padding: 2rem; background: linear-gradient(138deg, var(--violet), #27214d 56%, var(--blue)); }.audio-art i { width: clamp(5px, 1vw, 9px); background: var(--orange); }.audio-art i:nth-child(1), .audio-art i:nth-child(9) { height: 18%; }.audio-art i:nth-child(2), .audio-art i:nth-child(8) { height: 40%; }.audio-art i:nth-child(3), .audio-art i:nth-child(7) { height: 67%; }.audio-art i:nth-child(4), .audio-art i:nth-child(6) { height: 47%; }.audio-art i:nth-child(5) { height: 85%; }.media-caption { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding-top: 1rem; }.media-caption p { grid-column: 1 / -1; margin: 0; color: var(--orange); font: .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.media-caption h3 { margin: 0; font: 600 clamp(1rem, 1.6vw, 1.38rem)/1.15 var(--display); letter-spacing: -.04em; }.media-caption span { align-self: end; color: rgba(243, 240, 233, .6); font: .6rem var(--mono); }

.contact { display: grid; grid-template-columns: 1.1fr .6fr; gap: clamp(4rem, 10vw, 13rem); padding: clamp(5rem, 10vw, 9rem) var(--edge); background: var(--orange); color: var(--black); }.section-label-light { color: rgba(16,16,16,.65); }.section-label-light span { color: var(--paper); }.contact h2 { margin-top: clamp(3rem, 6vw, 5.5rem); font-size: clamp(3.5rem, 7vw, 7.7rem); }.contact-form { max-width: 580px; margin-top: 2.2rem; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.form-field { display: grid; gap: .45rem; margin-top: 1rem; }.form-field label { font: .61rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }.form-field input, .form-field textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(16,16,16,.7); border-radius: 0; outline: 0; padding: .55rem 0; background: transparent; color: var(--black); font: 600 .94rem var(--body); resize: vertical; }.form-field input:focus, .form-field textarea:focus { border-color: var(--paper); }.form-submit { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.6rem; border: 1px solid var(--black); padding: .8rem 1rem; background: var(--black); color: var(--paper); font: 600 .65rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }.form-submit:hover, .form-submit:focus-visible { background: var(--paper); color: var(--black); }.contact-content > p { margin: 1rem 0 0; font-size: .85rem; }.socials { align-self: end; display: grid; border-top: 1px solid rgba(16,16,16,.5); }.socials a { display: flex; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid rgba(16,16,16,.5); font: 600 .75rem var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: transform .18s, color .18s; }.socials a:hover { color: var(--paper); transform: translate3d(.7rem, 0, 0); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem var(--edge); background: var(--black); color: var(--paper); }.site-footer p, .site-footer > a:last-child { margin: 0; color: rgba(243,240,233,.63); font: .6rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }.site-footer > a:last-child:hover { color: var(--orange); }

@media (max-width: 720px) { .site-header { padding-top: 1.2rem; }.menu-toggle { position: relative; z-index: 12; display: block; border: 0; padding: .2rem 0; background: none; color: inherit; font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.8rem; background: var(--orange); color: var(--black); font: 700 clamp(2rem, 10vw, 4.2rem)/1 var(--display); letter-spacing: -.07em; opacity: 0; pointer-events: none; transition: opacity .2s; }.site-nav.is-open { opacity: 1; pointer-events: auto; }.site-nav a { padding: 0; }.hero { min-height: 680px; }.hero-photo { object-position: 61% center; }.hero-overlay { background: linear-gradient(90deg, rgba(16,16,16,.88), rgba(16,16,16,.32)), linear-gradient(0deg, rgba(16,16,16,.75), transparent 60%); }.hero-content { padding-top: 8.2rem; }.hero h1 { font-size: clamp(4.8rem, 21vw, 7.5rem); }.hero::after { right: 1.25rem; width: 8px; height: 28%; }.hero-link { left: var(--edge); right: auto; bottom: 1.8rem; }.about-layout, .contact { grid-template-columns: 1fr; }.about-layout { gap: 2.3rem; }.section-heading { display: block; }.section-heading h2 { margin-top: 3rem; }.media-grid { grid-template-columns: 1fr; gap: 2.5rem; }.media-item > a, .media-feature > a { aspect-ratio: 1.15; }.media-item:not(.media-feature) { display: grid; grid-template-columns: .8fr 1fr; gap: 1rem; align-items: end; }.media-item:not(.media-feature) .media-caption { padding: 0; }.contact { gap: 3.5rem; }.contact h2 { margin-top: 3rem; }.site-footer { align-items: start; flex-direction: column; }.site-footer > a:last-child { display: none; } }
@media (max-width: 420px) { .hero { min-height: 620px; }.hero-role { margin-top: 1.5rem; }.artist-facts div { grid-template-columns: 1fr; gap: .3rem; }.media-item:not(.media-feature) { grid-template-columns: 1fr; }.media-item:not(.media-feature) .media-caption { padding-top: 0; }.media-item:not(.media-feature) > a { aspect-ratio: 1.35; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.site-header, .site-nav, .media-item img, .socials a { transition: none; } }

/* Local video files in the media gallery */
.media-item > video { display: block; width: 100%; aspect-ratio: .82; background: var(--black-soft); object-fit: cover; }
.media-feature > video { aspect-ratio: 1.15; }
@media (max-width: 720px) { .media-item > video, .media-feature > video { aspect-ratio: 1.15; } }
@media (max-width: 420px) { .media-item:not(.media-feature) > video { aspect-ratio: 1.35; } }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; gap: 0; } }

/* Lightweight motion: opacity and transform stay on the compositor. */
.hero-content { animation: hero-enter .55s cubic-bezier(.2, .8, .2, 1) both; }
.motion-ready .reveal-on-scroll { opacity: 0; transform: translate3d(0, 18px, 0); will-change: opacity, transform; }
.motion-ready .reveal-on-scroll.is-visible { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .42s ease-out, transform .42s ease-out; will-change: auto; }
@keyframes hero-enter { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@supports (content-visibility: auto) { .about, .media, .contact { content-visibility: auto; contain-intrinsic-size: auto 800px; } }
@media (prefers-reduced-motion: reduce) { .hero-content { animation: none; } }