/* Monospark / photographic identity / September 2026 */
:root { --navy:#08090e; --ink:#08090e; --paper:#f2f3f8; --muted:#a5a7b6; --signal:#b5e8f0; --signal-soft:#b5e8f0; --magenta:#8970e8; --panel:#101117; --line:rgba(190,195,224,.18); }
body { background:var(--navy); }
.site-header { border-color:var(--line); height:96px; }
.brand img { width:190px; height:auto; display:block; }
nav, .header-cta { font-size:14px; letter-spacing:.04em; }
nav { gap:26px; }
.hero { min-height:800px; height:100svh; max-height:1080px; padding:180px 6vw 100px; isolation:isolate; }
.hero-signal { z-index:-1; background:#07080c; }
.studio-layer { position:absolute; background-repeat:no-repeat; background-size:cover; }
.studio-main { inset:-8% -7% -8% 28%; background-image:url('assets/2026/studio-5513.webp'); background-position:57% 47%; transform:rotate(-10deg) scale(1.13); filter:saturate(.58) contrast(1.4) brightness(.68); mask-image:linear-gradient(90deg,transparent,black 32%); }
.studio-echo { inset:49% -8% -20% 25%; background-image:url('assets/2026/studio-5511.webp'); background-position:center 68%; transform:rotate(-15deg) scale(1.12); filter:saturate(.9) contrast(1.35) brightness(.65); mix-blend-mode:screen; opacity:.5; mask-image:linear-gradient(0deg,transparent,black 40%,transparent 94%); }
.studio-faders { inset:0 55% 0 -20%; background-image:url('assets/2026/studio-5515.webp'); background-position:60% center; filter:grayscale(1) contrast(1.7) brightness(.34); transform:rotate(12deg) scale(1.25); opacity:.4; mask-image:linear-gradient(90deg,black,transparent); }
.hero-signal::after { background:linear-gradient(90deg,rgba(8,9,14,.92),rgba(8,9,14,.56) 38%,rgba(8,9,14,.04) 82%),linear-gradient(0deg,#08090e 1%,transparent 35%),linear-gradient(180deg,rgba(8,9,14,.6),transparent 32%); }
.studio-scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(2,3,8,.14) 3px 4px); opacity:.65; }
.hero .eyebrow { top:145px; font-size:12px; color:#b9bbca; }
.hero-wordmark { display:block; width:min(720px,70vw); height:auto; margin:0 0 42px; filter:drop-shadow(0 3px 18px #08090e); }
.hero-copy h1 { font-size:clamp(42px,4.5vw,68px); letter-spacing:-.06em; line-height:1.05; font-weight:500; }
.hero-copy h1 em { color:var(--signal); text-shadow:none; }
.hero-copy > p { max-width:440px; font-size:16px; color:#b9bac8; margin-top:26px; }
.hero-actions { position:relative; z-index:2; margin-top:32px; gap:28px; }
.button,.text-link { font-size:14px; letter-spacing:0; }
.button-primary { box-shadow:none; }
.hero-meta { right:6vw; bottom:35px; font-size:12px; }
.eyebrow,.kicker,.section-label,.video-card p { font-size:12px; }
.signal-cable { display:none; }
.panel-module { border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; background:transparent; padding:80px 0; margin:0 6vw; width:88%; }
.panel-module::before,.panel-module::after,.panel-module > .section-label::before { display:none; }
.section-label span { color:var(--signal); border-color:var(--line); }
.latest-layout { gap:7vw; max-width:1280px; align-items:center; }
.release-art { background:none; border:1px solid var(--line); box-shadow:0 25px 70px #0006; padding:0; display:block; }
.release-art::before,.release-art::after { display:none; }
.release-art img { display:block; width:100%; height:100%; object-fit:contain; }
.release-description { color:var(--muted); }
.platforms a { font-size:14px; }
.release-archive { margin-top:90px; border-top:1px solid var(--line); padding-top:32px; }
.archive-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:28px; }
.archive-heading h3 { margin:0; font:500 24px 'Unbounded',sans-serif; letter-spacing:-1px; }
.archive-heading span { font-size:12px; color:var(--muted); }
.release-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 28px; }
.release-grid figure { margin:0; min-width:0; }
.release-grid img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; display:block; background:#111; border:1px solid var(--line); transition:transform .35s; }
.release-grid figure:hover img { transform:translateY(-4px); }
.release-grid figcaption { margin-top:14px; font-size:14px; line-height:1.5; }
.quote-section { background:#0b0d15; }
.quote-birds { opacity:.08; }
.product-browser { border-color:var(--line); }
.product-details p { font-size:16px; }
.feature-chips span,.product-details small,.product-cta p span { font-size:12px; }
.gear-card { border-color:var(--line); }
.studio-gear .gear-visual { width:100%; height:150px; border:0; border-radius:0; background-size:cover; filter:saturate(.55) contrast(1.2); box-shadow:none; transform:none; }
.studio-gear .gear-visual::before,.studio-gear .gear-visual::after { display:none; }
.mininova .gear-visual { background-image:linear-gradient(0deg,#08090e44,transparent),url('assets/2026/studio-5512.webp'); background-position:center; }
.keylab .gear-visual { background-image:linear-gradient(0deg,#08090e44,transparent),url('assets/2026/studio-5515.webp'); background-position:center; }
.about { margin:70px 6vw 0; width:88%; padding:70px 0 110px; gap:7vw; grid-template-columns:1.15fr 1fr; align-items:center; border-top:1px solid var(--line); }
.artist-photo { margin:0; min-width:0; position:relative; }
.artist-photo img { display:block; width:100%; height:auto; aspect-ratio:4/4.2; object-fit:cover; object-position:100% center; filter:saturate(.45) contrast(1.12); }
.artist-photo figcaption { font-size:12px; color:var(--muted); padding-top:16px; letter-spacing:.04em; }
.about-copy { border:0; padding:0; }
.about-logo { display:block; width:100%; max-width:440px; height:auto; margin-bottom:44px; }
.about-copy > p { font-size:16px; }
.about-copy h2 { font-size:clamp(30px,3.4vw,52px); letter-spacing:-.05em; line-height:1.15; }
footer { border-color:var(--line); }
footer p,footer a { font-size:14px; }
footer small { font-size:12px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--signal); outline-offset:6px; }
@media(min-width:901px) { .latest-layout { grid-template-columns:1fr 1fr; } }
@media(max-width:1100px) { nav { gap:18px; } .brand img { width:160px; } .header-cta { display:none; } .site-header { grid-template-columns:1fr auto; } }
@media(max-width:900px) {
  .site-header { height:76px; }
  .hero { min-height:760px; padding:170px 6vw 90px; }
  .hero .eyebrow { top:118px; }
  .hero-wordmark { width:86vw; margin-bottom:40px; }
  .studio-main { left:5%; opacity:.8; }
  .hero-copy h1 { font-size:clamp(40px,7vw,62px); }
  .hero-signal::after { background:linear-gradient(90deg,#08090edb,#08090e35),linear-gradient(0deg,#08090e 2%,transparent 65%); }
  .release-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 18px; }
  .panel-module { width:88%; margin:0 6vw; padding:64px 0; }
  .about { grid-template-columns:1fr; gap:48px; }
  .artist-photo img { aspect-ratio:5/4; object-position:center; }
  .about-logo { max-width:420px; }
}
@media(max-width:560px) {
  .hero { min-height:740px; height:auto; padding:200px 6vw 65px; }
  .hero .eyebrow { top:118px; letter-spacing:1px; font-size:12px; }
  .hero-wordmark { margin-bottom:36px; width:88vw; }
  .hero-copy h1 { font-size:42px; letter-spacing:-2px; }
  .hero-copy > p { font-size:16px; max-width:320px; }
  .studio-main { inset:0 -90% 10% -20%; background-position:65% center; opacity:.7; }
  .studio-echo { inset:35% -90% 0 0; opacity:.28; }
  .hero-actions { gap:24px; }
  .archive-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .archive-heading h3 { font-size:21px; }
  .release-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
  .release-grid figcaption { font-size:14px; }
  .release-archive { margin-top:56px; }
  .about { margin-top:24px; padding-bottom:60px; }
  .artist-photo img { aspect-ratio:4/5; object-position:100% center; }
  .button,.text-link { font-size:14px; }
  .site-header nav { background:#0d0f17; top:76px; }
}
@media(prefers-reduced-motion:no-preference) {
  .studio-main { animation:studio-drift 22s ease-in-out infinite alternate; }
  @keyframes studio-drift { to { transform:rotate(-8deg) scale(1.18) translate(-1%,1%); } }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Two supplied video stills: retain the full artwork at every screen size. */
.video-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.video-pair .video-card { min-width:0; max-width:100%; }
.video-pair .video-visual { width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.video-pair .video-visual img { position:absolute; inset:0; width:100%; max-width:100%; height:100%; object-fit:contain; display:block; }
.video-pair .card-play { top:auto; left:auto; right:16px; bottom:16px; transform:none; }
.video-pair .video-card:hover .card-play { transform:scale(1.08); }
@media(max-width:760px) { .video-pair { grid-template-columns:1fr; } }

.gear-mirage .gear-visual { background:#080b15; box-shadow:none; }
.gear-mirage .gear-visual::before,.gear-mirage .gear-visual::after { display:none; }
.gear-mirage .gear-visual img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* Small points of charge float across the instrument photograph. */
.hero-electrons { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 62%); }
.hero-electrons span { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); border-radius:50%; background:#d5f9ff; box-shadow:0 0 5px #a9eaff,0 0 13px #81bfff99; opacity:0; animation:electron-flow var(--duration) var(--delay) linear infinite; }
.hero-electrons span:nth-child(4n) { background:#ffb98f; box-shadow:0 0 5px #ff8a51,0 0 13px #ff5a2f80; }
@keyframes electron-flow { 0% { transform:translate3d(0,0,0) scale(.6); opacity:0; } 18% { opacity:.65; } 50% { transform:translate3d(calc(var(--dx)*.5),calc(var(--dy)*.42),0) scale(1); opacity:.85; } 82% { opacity:.5; } 100% { transform:translate3d(var(--dx),var(--dy),0) scale(.5); opacity:0; } }
.hero.electrons-paused .hero-electrons span { animation-play-state:paused; }
@media(max-width:560px) { .hero-electrons span:nth-child(n+13) { display:none; } }
@media(prefers-reduced-motion:reduce) { .hero-electrons { display:none; } }

.inspiration-cover { background:#08090e; }
.inspiration-cover img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.influences .album-row small { display:block; font-size:14px; line-height:1.6; }

/* Keep the virtual-instrument content available for a later launch. */
[hidden] { display:none !important; }
.past-gear { grid-template-columns:repeat(4,minmax(0,1fr)); }
.gear-photo { min-width:0; }
.gear-photo .gear-visual { height:150px; flex-shrink:0; background:#10141e; box-shadow:none; }
.gear-photo .gear-visual::before,.gear-photo .gear-visual::after { display:none; }
.gear-photo .gear-visual img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; padding:8px; }
.actors-portrait { padding:0; background:none; aspect-ratio:1; overflow:hidden; }
.actors-portrait::before,.actors-portrait::after { display:none; }
.actors-portrait img { display:block; width:100%; height:100%; object-fit:contain; }
@media(max-width:900px) { .past-gear { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .past-gear { grid-template-columns:1fr; } .gear-photo .gear-visual { height:180px; } }

.artist-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.artist-links a { font:14px/1.6 "Space Mono",monospace; color:var(--paper); padding:8px 0; border-bottom:1px solid var(--line); }
.artist-links a:hover { color:var(--signal); border-color:var(--signal); }
.artist-links a span { color:var(--signal); }
.hero-platforms { position:relative; z-index:2; margin-top:18px; }
.catalog-links { margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px; }
.catalog-links > p { font-size:14px; color:var(--muted); }
footer .footer-platforms { gap:12px 20px; }
@media(max-width:560px) { .hero-platforms { gap:12px 18px; } }