/* presentation.css */
/* Preserved presentation. Legacy album selectors and exact repeats removed. */
:root {
--bg: #02040a;
  --bg-soft: #07101c;
  --ink: #f6fbff;
  --muted: #93a4b8;
  --blue: #0057ff;
  --blue-hot: #19a7ff;
  --magenta: #ff36f4;
  --line: rgba(255, 255, 255, 0.16);
  --alert: #ff36f4;
  --panel: rgba(2, 8, 20, 0.72);
  --text: var(--ink);
  --white: #ffffff;
  --ease: cubic-bezier(.22,1,.36,1);
  font-family: "Arial", "Helvetica Neue", sans-serif;
}

@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
#reload .bio-copy p {
font-size: clamp(0.92rem, min(1.04vw, 1.72vh), 1.18rem);
    line-height: 1.44;
    margin-bottom: clamp(0.55rem, 1.05vh, 0.9rem);
}

}

* {
box-sizing: border-box;
}

html {
background: var(--bg);
  color: var(--ink);
  scroll-behavior: auto;
  scroll-snap-type: none;
  scroll-padding-top: 5.5rem;
}

body {
margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 76% 12%, rgba(0, 87, 255, 0.22), transparent 26rem),
    linear-gradient(180deg, #000 0%, var(--bg) 45%, #000 100%);
  color: var(--ink);
}

body.modal-open {
overflow: hidden;
}

a {
color: inherit;
  text-decoration: none;
}

img {
display: block;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

video,
canvas {
user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#empire-webgl {
position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Client-side deterrent for authored visual assets. This is intentionally
   scoped to project media so normal navigation and text remain accessible. */
.asset-protected {
-webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#cursor-signal {
position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.86;
}

.noise-layer,
.scanline-layer {
position: fixed;
  top: 0;
  right: -3rem;
  bottom: 0;
  left: -3rem;
  z-index: 2;
  pointer-events: none;
}

.noise-layer {
opacity: 0.054;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,0.65) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(0,87,255,0.12) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
  animation: noiseShift 0.8s steps(2, end) infinite;
}

.scanline-layer {
display: none;
}

/* The DNA helix needs a calm field behind it. Keep the global texture, but
   pause its strobing while the encrypted-portfolio segment is in focus. */
body.is-projects-dna-focus .noise-layer {
animation-play-state: paused;
  opacity: 0.024 !important;
}

.boot-screen {
position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: #000;
  color: var(--blue-hot);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  overflow: hidden;
  animation: bootExit 0.7s ease 2.85s forwards;
}

.boot-screen::before,
.boot-screen::after {
content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.boot-screen::before {
background:
    radial-gradient(circle at 50% 50%, rgba(0, 87, 255, 0.22), transparent 18rem),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 7px);
  animation:
    bootGlowIn 0.9s cubic-bezier(.22,1,.36,1) both,
    bootFlicker 0.22s steps(2, end) 0.9s infinite;
}

.boot-screen::after {
display: none;
}

.boot-line {
position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--blue);
  box-shadow: 0 0 28px var(--blue);
  transform-origin: center;
  animation: bootLine 2.85s cubic-bezier(.22,1,.36,1) both;
}

.boot-screen > span {
position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: 0 0 18px rgba(25, 167, 255, 0.8);
  animation: bootJolt 2.5s steps(2, end) both;
}

.site-header {
position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0));
  backdrop-filter: blur(14px);
}

.brand-mark {
display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.brand-mark img {
width: 2.4rem;
  height: 2.4rem;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  filter: contrast(1.15);
}

nav {
display: flex;
  gap: clamp(0.7rem, 2vw, 1.4rem);
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

nav a {
transition: color 0.45s ease, text-shadow 0.45s ease;
}

nav a:hover {
color: var(--ink);
  text-shadow: 0 0 18px var(--blue-hot);
}

main {
position: relative;
  z-index: 3;
}

.section-panel {
position: relative;
  min-height: 100vh;
  padding: clamp(6rem, 10vw, 9rem) clamp(1rem, 5vw, 5rem);
  /* Every panel shares the exact horizontal rail of the header icon. This
     widens the authored stage while keeping left and right breathing room
     perfectly symmetrical. */
  padding-right: clamp(1rem, 3vw, 2rem);
  padding-left: clamp(1rem, 3vw, 2rem);
  display: grid;
  align-items: center;
  isolation: isolate;
  scroll-snap-align: none;
}

.section-panel::before {
content: attr(data-section);
  position: absolute;
  /* JS assigns this per section from its actual landing destination, so a
     marker always meets the same viewport landmark despite bespoke anchors. */
  top: var(--section-marker-top, 14px);
  /* Section markers share the header navigation's right rail. On wide
     screens this shifts them roughly 40px right; smaller viewports retain a
     safe, responsive edge gutter. */
  right: clamp(1rem, 3vw, 2rem);
  color: rgba(255, 255, 255, 0.18);
  font-size: clamp(2rem, 8vw, 8rem);
  font-weight: 900;
  line-height: 1;
  z-index: -1;
}

.hero {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 36rem);
  gap: clamp(2rem, 7vw, 7rem);
  padding-top: clamp(7rem, 11vw, 10rem);
}

.hero-copy {
position: relative;
  z-index: 2;
  min-width: 0;
}

.eyebrow,
.section-kicker {
margin: 0 0 1rem;
  color: var(--blue-hot);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.split-title {
position: relative;
  margin: 0;
  max-width: 11ch;
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: 0.78;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 22px rgba(0, 87, 255, 0.55),
    0 0 54px rgba(0, 87, 255, 0.22);
}

.split-title::before,
.split-title::after,
.glitch-text::after {
content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.split-title::before {
color: var(--blue-hot);
  transform: translate(0.055em, -0.025em) skewX(-3deg);
  clip-path: polygon(0 3%, 100% 0, 100% 18%, 0 26%, 0 42%, 100% 36%, 100% 48%, 0 57%);
  opacity: 0.76;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px rgba(25, 167, 255, 0.65));
  animation: glitchSlice 3.4s steps(2, end) infinite;
}

.split-title::after {
color: var(--alert);
  transform: translate(-0.045em, 0.025em) skewX(4deg);
  clip-path: polygon(0 58%, 100% 51%, 100% 64%, 0 70%, 0 82%, 100% 78%, 100% 93%, 0 100%);
  opacity: 0.44;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(255, 54, 244, 0.58));
  animation: glitchSlice 2.6s steps(2, end) infinite reverse;
}

.glitch-text {
position: relative;
}

.glitch-text::after {
color: var(--alert);
  transform: translateX(0.12rem);
  clip-path: inset(52% 0 0);
  opacity: 0.38;
}

.hero-statement {
max-width: 42rem;
  margin: 1.6rem 0 2rem;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.45;
}

.hero-actions {
display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.primary-link,
.ghost-link {
display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.2rem;
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), border-color 0.5s ease, background 0.5s ease;
}

.primary-link {
background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 30px rgba(0, 87, 255, 0.34);
}

.ghost-link {
background: rgba(255, 255, 255, 0.035);
}

.primary-link:hover,
.ghost-link:hover {
transform: translateY(-0.18rem);
  border-color: var(--blue-hot);
}

.identity-core {
position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: min(100%, 31rem);
  transform-style: preserve-3d;
}

.identity-core::before {
content: "";
  position: absolute;
  inset: 12% -10% 8%;
  border: 1px solid rgba(0, 87, 255, 0.44);
  background: linear-gradient(135deg, rgba(0, 87, 255, 0.16), transparent 48%, rgba(255,255,255,0.08));
  transform: skewY(-7deg);
  box-shadow: 0 0 80px rgba(0, 87, 255, 0.2);
}

.identity-core img {
position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  object-fit: cover;
  object-position: center 64%;
  filter: contrast(1.15) saturate(0.72);
  mix-blend-mode: screen;
}

.identity-readout,
.hud {
display: grid;
  gap: 0.5rem;
  color: rgba(246, 251, 255, 0.72);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.identity-readout {
position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.58);
}

.identity-readout .signal-online {
display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #39ff88;
  font-style: normal;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(57, 255, 136, 0.68);
}

.identity-readout .signal-online::before {
width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #39ff88;
  box-shadow: 0 0 0.6rem rgba(57, 255, 136, 0.95), 0 0 1.1rem rgba(57, 255, 136, 0.52);
  content: "";
}

.story-grid {
display: grid;
  grid-template-columns: minmax(20rem, 0.7fr) minmax(22rem, 1.3fr);
  gap: clamp(2rem, 6vw, 6rem);
}

.story-section h2 {
max-width: 10ch;
  font-size: clamp(2.4rem, 5.4vw, 5.8rem);
}

.story-copy .section-kicker {
margin: -0.25rem 0 1rem;
}

h2 {
margin: 0 0 clamp(1rem, 2vw, 1.45rem);
  max-width: 13ch;
  font-size: clamp(2.4rem, 7vw, 7rem);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.story-copy p,
.signal-copy p,
.artist-copy p {
margin: 0 0 0.9rem;
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.52;
}

.studio-stack {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.studio-card,
.project-row,
.server-card {
position: relative;
  padding: 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(0,87,255,0.16), transparent 38%),
    var(--panel);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.studio-card {
display: grid;
  align-content: start;
  min-height: 12rem;
  cursor: zoom-in;
  background:
    linear-gradient(90deg, rgba(0,87,255,0.08), transparent 32%),
    rgba(2, 8, 20, 0.18);
  backdrop-filter: blur(8px);
}

.studio-card-large {
grid-column: span 2;
  min-height: 17rem;
}

/* Keep the Sound Labs caption as a solid, readable in-image plate at every size. */
.studio-card-large p {
background: #000;
}

/* Keep the Sound Labs preview's working surface higher in its frame. */
.studio-card-large img {
object-position: center calc(50% + 15px);
}

/* The source readout sits close to the right edge; favour that edge so the
   complete ALWAYS ON status remains visible in the Live Servers preview. */
.studio-card-live img {
object-position: right center;
}

.studio-card img {
position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.96;
  filter: saturate(1.1) contrast(1.08);
  transition: transform 0.8s cubic-bezier(.22,1,.36,1), opacity 0.8s ease;
}

.studio-card::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.14)),
    radial-gradient(circle at 18% 16%, rgba(0, 87, 255, 0.1), transparent 18rem),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 8px);
}

.studio-card:hover img {
opacity: 1;
  transform: scale(1.04);
}

.studio-card:focus-visible {
outline: 2px solid var(--blue-hot);
  outline-offset: 3px;
}

.studio-card div {
position: absolute;
  inset: 1.05rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: start;
  max-width: min(100%, 30rem);
}

.studio-card::after,
.project-row::after,
.server-card::after {
content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  transform: translateX(-120%);
  transition: transform 0.8s cubic-bezier(.22,1,.36,1);
}

.studio-card:hover::after,
.project-row:hover::after,
.server-card:hover::after {
transform: translateX(120%);
}

.studio-card span,
.project-row span,
.project-row strong,
.server-card span,
.server-card strong {
color: var(--blue-hot);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.studio-card h3,
.project-row h3,
.server-card h3 {
margin: 0.55rem 0 0.35rem;
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  text-transform: uppercase;
}

.studio-card h3,
.studio-card span {
text-shadow: 0 0 14px rgba(0, 0, 0, 0.86);
}

.studio-card h3 {
order: 1;
  margin: 0 0 0.12rem;
}

.studio-card span {
order: 2;
}

.studio-card p,
.project-row p,
.server-card p {
margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.studio-card p {
order: 3;
  display: inline;
  margin-top: auto;
  padding: 0.08rem 0.12rem;
  border: 1px solid rgba(255, 255, 255, 0.035);
  /* Captions are a solid black extension of each artwork, never a translucent
     overlay: the visual beneath must not compete with the copy. */
  background: #000;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.studio-card:nth-child(2) h3 {
max-width: 9ch;
}

.project-row {
display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  grid-template-areas:
    "emblem title status"
    "emblem description description";
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.project-row h3 {
grid-area: title;
  margin: 0;
}

.project-row p {
grid-area: description;
  margin-top: 0.2rem;
}

.service-emblem {
grid-area: emblem;
  position: relative;
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(0, 184, 255, 0.58);
  background: linear-gradient(145deg, rgba(0, 87, 255, 0.26), rgba(2, 4, 10, 0.88));
  box-shadow: inset 0 0 14px rgba(0, 87, 255, 0.16), 0 0 12px rgba(0, 87, 255, 0.14);
}

.service-emblem::before,
.service-emblem::after {
position: absolute;
  color: var(--blue-hot);
  content: "";
}

.service-emblem.is-web::before {
width: 1rem;
  height: 1rem;
  border: 1px solid var(--blue-hot);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.18rem rgba(0, 87, 255, 0.12);
}

.service-emblem.is-web::after {
width: 1.18rem;
  height: 0.38rem;
  border-top: 1px solid var(--blue-hot);
  border-bottom: 1px solid var(--blue-hot);
}

.service-emblem.is-app::before {
content: "<>";
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
}

.service-emblem.is-music::before {
width: 0;
  height: 0;
  border-top: 0.52rem solid transparent;
  border-bottom: 0.52rem solid transparent;
  border-left: 0.84rem solid var(--blue-hot);
  filter: drop-shadow(0 0 0.35rem rgba(0, 184, 255, 0.72));
}

.service-emblem.is-show::before {
width: 1.18rem;
  height: 1.1rem;
  background: repeating-linear-gradient(90deg, var(--blue-hot) 0 1px, transparent 1px 0.38rem);
  opacity: 0.82;
}

.service-emblem.is-show::after {
width: 1.18rem;
  height: 1.1rem;
  background: radial-gradient(circle at 16% 26%, var(--text) 0 0.11rem, transparent 0.12rem), radial-gradient(circle at 50% 68%, var(--text) 0 0.11rem, transparent 0.12rem), radial-gradient(circle at 84% 40%, var(--text) 0 0.11rem, transparent 0.12rem);
}

/* Clear service symbols: identifiable at a glance, with a distinct colour signal per discipline. */
.service-emblem {
--service-color: #45dbff;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--service-color) 80%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--service-color) 19%, transparent), transparent 52%),
    rgba(2, 10, 25, 0.92);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--service-color) 14%, transparent), 0 0 18px color-mix(in srgb, var(--service-color) 16%, transparent);
}

.service-emblem::before,
.service-emblem::after {
display: none;
}

.service-emblem.is-web {
--service-color: #2bbcff;
}

.service-emblem.is-app {
--service-color: #a47aff;
}

.service-emblem.is-music {
--service-color: #ff63d8;
}

.service-emblem.is-show {
--service-color: #ffbd4a;
}

.service-emblem.is-performance {
--service-color: #ffbd4a;
}

.service-emblem.is-studio {
--service-color: #ffbd4a;
}

.service-emblem.is-show svg {
width: 3.38rem;
  height: 3.38rem;
  filter: none;
}

.service-emblem.is-show svg .live-dot {
fill: #ff405f;
  stroke: none;
  filter: drop-shadow(0 0 0.28rem rgba(255, 64, 95, 0.95));
}

.service-emblem.is-show svg .mixer {
color: #168ce8;
  stroke: #168ce8;
  filter: drop-shadow(0 0 0.16rem rgba(22, 140, 232, 0.34));
}

.service-emblem.is-show svg .mixer-deck {
fill: rgba(0, 87, 255, 0.12);
}

.service-emblem.is-show svg .camera {
color: #ffbd4a;
  stroke: #ffbd4a;
  fill: rgba(121, 77, 5, 0.18);
  filter: drop-shadow(0 0 0.2rem rgba(255, 189, 74, 0.44));
}

.service-emblem.is-show svg .wrench {
filter: none;
}

.service-emblem.is-performance svg {
width: 3.42rem;
  height: 3.42rem;
  filter: none;
}

.service-emblem.is-performance svg .performance-camera {
stroke: #ffbd4a;
  fill: rgba(121, 77, 5, 0.18);
  filter: drop-shadow(0 0 0.2rem rgba(255, 189, 74, 0.44));
}

.service-emblem.is-performance svg .performance-camera .live-dot {
fill: #ff405f;
  stroke: none;
  filter: drop-shadow(0 0 0.28rem rgba(255, 64, 95, 0.95));
}

.service-emblem.is-performance svg .performer {
stroke: #59dfff;
  fill: rgba(0, 112, 255, 0.16);
  filter: drop-shadow(0 0 0.18rem rgba(41, 195, 255, 0.4));
}

.service-emblem.is-performance svg .dj-deck {
stroke: #168ce8;
  filter: drop-shadow(0 0 0.16rem rgba(22, 140, 232, 0.34));
}

.service-emblem.is-performance svg .deck-body {
fill: rgba(0, 87, 255, 0.12);
}

.service-emblem.is-studio svg {
width: 3.3rem;
  height: 3.3rem;
  filter: none;
}

.service-emblem.is-studio svg .studio-wrench {
filter: drop-shadow(0 0 0.28rem rgba(255, 189, 74, 0.54));
}

.service-emblem svg {
width: 3.3rem;
  height: 3.3rem;
  overflow: visible;
  color: var(--service-color);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 0.42rem color-mix(in srgb, var(--service-color) 72%, transparent));
  transition: transform 0.35s cubic-bezier(.22, 1, .36, 1), filter 0.35s ease;
}

.service-emblem.is-music svg path:nth-of-type(1) {
fill: currentColor;
  stroke-width: 1.2;
}

.service-emblem.is-web svg text {
fill: currentColor;
  stroke: none;
  font-family: "Courier New", monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.project-row:hover .service-emblem svg,
.project-row:focus-within .service-emblem svg {
transform: scale(1.12);
  filter: drop-shadow(0 0 0.75rem color-mix(in srgb, var(--service-color) 94%, transparent));
}

.project-row:hover .service-emblem svg,
.project-row:focus-within .service-emblem svg {
animation: service-pulse 0.72s ease-in-out infinite alternate;
}

@keyframes service-orbit {
50% { transform: scale(1.12) rotate(11deg); }
}

@keyframes service-system {
50% { transform: scale(1.12) translateY(-0.1rem); }
}

@keyframes service-pulse {
to { transform: scale(1.2); }
}

@keyframes service-stage {
to { transform: scale(1.12) rotate(-5deg); }
}

/* Service emblems: one compact visual language for portals, systems, audio and live spaces. */
.service-emblem {
border-color: rgba(0, 195, 255, 0.74);
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(0, 184, 255, 0.13) 46% 47%, transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(0, 132, 255, 0.3), transparent 54%),
    rgba(1, 9, 25, 0.9);
  box-shadow: inset 0 0 18px rgba(0, 101, 255, 0.2), 0 0 17px rgba(0, 126, 255, 0.14);
}

.service-emblem::before,
.service-emblem::after {
box-sizing: border-box;
  filter: drop-shadow(0 0 0.36rem rgba(0, 195, 255, 0.64));
}

.service-emblem.is-web::before {
width: 1.46rem;
  height: 0.94rem;
  border: 1px solid #58dfff;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 48%, rgba(113, 230, 255, 0.85) 49% 51%, transparent 52%);
  box-shadow: inset 0 0 0 0.25rem rgba(0, 88, 255, 0.13), 0 0 0.45rem rgba(0, 184, 255, 0.28);
  transform: skewX(-13deg);
}

.service-emblem.is-web::after {
width: 1.88rem;
  height: 1.36rem;
  border-top: 1px solid rgba(77, 218, 255, 0.66);
  border-bottom: 1px solid rgba(77, 218, 255, 0.66);
  opacity: 0.72;
  transform: rotate(-15deg);
}

.service-emblem.is-app::before {
width: 0.39rem;
  height: 0.39rem;
  background: #72e8ff;
  box-shadow:
    -0.74rem -0.42rem 0 -0.04rem #1b89ff,
    0.74rem -0.42rem 0 -0.04rem #62eaff,
    -0.74rem 0.42rem 0 -0.04rem #62eaff,
    0.74rem 0.42rem 0 -0.04rem #1b89ff,
    0 0 0.68rem rgba(0, 201, 255, 0.52);
  transform: rotate(45deg);
}

.service-emblem.is-app::after {
width: 1.62rem;
  height: 1.06rem;
  border-top: 1px solid rgba(65, 210, 255, 0.82);
  border-bottom: 1px solid rgba(65, 210, 255, 0.82);
  background: linear-gradient(90deg, transparent 49%, rgba(89, 226, 255, 0.95) 50% 51%, transparent 52%);
  opacity: 0.78;
}

.service-emblem.is-music::before {
width: 1.44rem;
  height: 1.22rem;
  border: 0;
  background:
    linear-gradient(90deg, #167cff 0 0.15rem, transparent 0.15rem 0.3rem, #31dbff 0.3rem 0.46rem, transparent 0.46rem 0.62rem, #8cf5ff 0.62rem 0.78rem, transparent 0.78rem 0.94rem, #31dbff 0.94rem 1.1rem, transparent 1.1rem 1.26rem, #167cff 1.26rem 1.44rem);
  clip-path: polygon(0 63%, 10% 63%, 10% 35%, 21% 35%, 21% 76%, 33% 76%, 33% 14%, 45% 14%, 45% 91%, 56% 91%, 56% 27%, 68% 27%, 68% 71%, 79% 71%, 79% 43%, 90% 43%, 90% 59%, 100% 59%, 100% 100%, 0 100%);
}

.service-emblem.is-music::after {
width: 1.92rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #77edff 20% 80%, transparent);
  box-shadow: 0 0 0.46rem rgba(0, 211, 255, 0.85);
  transform: translateY(0.8rem);
}

.service-emblem.is-show::before {
width: 1.52rem;
  height: 1.28rem;
  background: linear-gradient(90deg, rgba(75, 224, 255, 0.08) 0 31%, transparent 32% 67%, rgba(75, 224, 255, 0.08) 68%);
  border: 1px solid #52ddff;
  clip-path: polygon(0 100%, 12% 0, 88% 0, 100% 100%);
}

.service-emblem.is-show::after {
width: 1.46rem;
  height: 0.76rem;
  background:
    radial-gradient(circle at 12% 14%, #d9fbff 0 0.1rem, transparent 0.11rem),
    radial-gradient(circle at 50% 68%, #4de5ff 0 0.12rem, transparent 0.13rem),
    radial-gradient(circle at 88% 14%, #d9fbff 0 0.1rem, transparent 0.11rem),
    linear-gradient(90deg, transparent 12%, rgba(76, 226, 255, 0.75) 13% 14%, transparent 15% 49%, rgba(76, 226, 255, 0.75) 50% 51%, transparent 52% 86%, rgba(76, 226, 255, 0.75) 87% 88%, transparent 89%);
}

.project-status {
grid-area: status;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: start;
  justify-self: end;
  margin-top: 0.14rem;
  gap: 0.42rem;
  min-width: 4.25rem;
  color: rgba(246, 251, 255, 0.64) !important;
  font-size: 0.66rem !important;
  white-space: nowrap;
}

.project-status.is-live {
color: #39ff88 !important;
  text-shadow: 0 0 14px rgba(57, 255, 136, 0.45);
}

.project-status.is-live::before {
width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #39ff88;
  box-shadow: 0 0 0.6rem rgba(57, 255, 136, 0.95), 0 0 1.1rem rgba(57, 255, 136, 0.52);
  content: "";
}

.games-section {
grid-template-columns: minmax(0, 0.75fr) minmax(22rem, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  overflow: hidden;
}

#servers {
align-content: start;
  align-items: end;
}

.games-planet {
position: absolute;
  z-index: 0;
  /* Centre the world in the visible stage beneath the fixed header. Section
     07 lands slightly below the viewport top, so the optical lift keeps the
     globe centred in what the visitor can actually see. */
  top: calc(50% - clamp(3rem, 6.5vh, 4rem));
  left: 33.333%;
  /* Preserve the authored one-third placement while giving the planet a
     noticeably stronger physical presence in the 07 stage. */
  width: min(58.8vw, 60rem, 110.4vh);
  aspect-ratio: 1;
  pointer-events: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  cursor: grab;
  transition: opacity 1.4s var(--ease);
  overflow: hidden;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.96) 66%, rgba(0, 0, 0, 0.58) 76%, transparent 91%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.96) 66%, rgba(0, 0, 0, 0.58) 76%, transparent 91%);
}

.games-planet.is-ready {
opacity: 1;
}

.games-planet.is-dragging {
cursor: grabbing;
}

.games-section.is-planet-draggable {
cursor: grab;
}

.games-section.is-planet-dragging {
cursor: grabbing;
}

.games-planet canvas {
position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.games-copy,
.server-grid {
position: relative;
  z-index: 1;
}

.games-section::after {
content: "";
  position: absolute;
  /* The former 18% top inset exposed the hard edge of this layer as a
     horizontal seam. Bleed the complete energy field beyond every edge so
     blue and magenta effects fade naturally across the whole section. */
  inset: -6%;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 48%, rgba(0, 184, 255, 0.18), transparent 29rem),
    linear-gradient(112deg, transparent 0 34%, rgba(0, 87, 255, 0.2) 35%, transparent 43%),
    linear-gradient(70deg, transparent 0 58%, rgba(255, 54, 244, 0.14) 59%, transparent 67%);
}

.games-copy h2 {
max-width: 12ch;
  font-size: clamp(2.4rem, 7vw, 6rem);
}

.games-copy p {
margin: 0 0 1.05rem;
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}

.story-copy p:last-child,
.signal-copy p:last-child,
.artist-copy p:last-child,
.games-copy p:last-child {
margin-bottom: 0;
}

.server-grid {
display: grid;
  gap: 0.9rem;
}

.server-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas:
    "art title"
    "art description"
    "art status";
  gap: 0.7rem 1rem;
  align-items: center;
}

.server-card h3,
.server-card p,
.server-card strong {
  min-width: 0;
  max-width: 100%;
}

.server-card h3 {
  grid-area: title;
}

.server-card p {
  grid-area: description;
  overflow-wrap: anywhere;
}

.server-card .server-game-art {
  grid-area: art;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid rgba(0, 184, 255, 0.26);
  background: #02040a;
  object-fit: contain;
  filter: saturate(1.12) contrast(1.08);
}

.server-card strong {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.55rem;
  white-space: nowrap;
}'

.server-status span {
color: var(--blue-hot);
}

.server-card strong em {
display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #39ff88;
  font-style: normal;
  text-shadow: 0 0 14px rgba(57, 255, 136, 0.45);
}

.server-card strong em::before {
content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #39ff88;
  box-shadow: 0 0 0.6rem rgba(57, 255, 136, 0.95), 0 0 1.1rem rgba(57, 255, 136, 0.52);
}

/* Keep the complete Servers composition inside the viewport after its anchor.
   Width and height both participate, so short laptop screens remain as balanced
   as taller presentation displays. */
#servers .games-copy h2 {
font-size: clamp(3rem, min(7vw, 9vh), 6rem);
  line-height: 0.94;
  margin-block: clamp(0.55rem, 1.5vh, 1rem);
}

#servers .games-title-line {
display: block;
  white-space: nowrap;
}

@media (max-width: 720px) {
#servers .games-title-line {
white-space: normal;
}

#servers .games-title-word {
display: block;
}
}

#servers .games-copy,
#servers .server-grid {
align-self: end;
}

#servers .games-copy p {
margin-bottom: clamp(0.55rem, 1.35vh, 1rem);
  font-size: clamp(0.88rem, min(1.4vw, 2.05vh), 1.2rem);
  line-height: 1.42;
}

#servers .games-copy p:last-child {
margin-bottom: 0;
}

#servers .server-grid {
gap: clamp(0.5rem, 1.25vh, 0.9rem);
}

#servers .server-card {
padding: clamp(0.68rem, 1.65vh, 1.05rem);
  gap: clamp(0.4rem, 1vh, 0.7rem) clamp(0.65rem, 1.2vw, 1rem);
}

#servers .server-card h3 {
margin: clamp(0.18rem, 0.6vh, 0.45rem) 0 clamp(0.12rem, 0.45vh, 0.32rem);
  font-size: clamp(1.05rem, min(2vw, 3vh), 1.75rem);
  line-height: 1.05;
}

#servers .server-card p {
font-size: clamp(0.82rem, min(1.25vw, 1.9vh), 1rem);
  line-height: 1.38;
}

#servers .server-card .server-game-art {
width: clamp(3.4rem, 8vh, 4.5rem);
  height: clamp(3.4rem, 8vh, 4.5rem);
}

#servers .server-card strong {
font-size: clamp(0.62rem, min(0.9vw, 1.45vh), 0.72rem);
}

.featured-row {
border-color: rgba(0, 87, 255, 0.55);
  box-shadow: inset 0 0 38px rgba(0, 87, 255, 0.12);
}

.biopic-section {
grid-template-columns: minmax(18rem, 0.82fr) minmax(22rem, 1.18fr);
  gap: clamp(2rem, 7vw, 7rem);
  overflow: hidden;
}

.biopic-section::after {
content: "";
  position: absolute;
  inset: 14% -12% 12% 28%;
  z-index: -1;
  background:
    radial-gradient(circle at 72% 28%, rgba(0, 87, 255, 0.22), transparent 24rem),
    linear-gradient(108deg, transparent 0 20%, rgba(255, 54, 244, 0.16) 21%, transparent 28%),
    linear-gradient(74deg, transparent 0 54%, rgba(25, 167, 255, 0.16) 55%, transparent 62%);
}

.bio-copy h2 {
max-width: 11ch;
  font-size: clamp(2.4rem, 6vw, 6.2rem);
  text-transform: none;
}

.bio-subtitle {
margin: 0.45rem 0 1.2rem;
  color: rgba(246, 251, 255, 0.52) !important;
  font-size: clamp(1rem, 2vw, 1.65rem) !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1 !important;
  text-transform: uppercase;
}

.bio-copy p {
margin: 0 0 0.9rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.52;
}

.bio-copy p:last-child {
margin-bottom: 0;
}

.bio-readout {
display: grid;
  gap: 0.45rem;
  margin-top: 1.4rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(90deg, rgba(0, 87, 255, 0.14), transparent),
    rgba(0, 0, 0, 0.5);
  color: rgba(246, 251, 255, 0.74);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.bio-quote {
position: absolute;
  left: 6%;
  right: 6%;
  bottom: 12.1rem;
  z-index: 3;
  margin: 0;
  color: rgba(210, 222, 232, 0.72) !important;
  font-family: "Courier New", monospace;
  font-size: clamp(0.92rem, 1.55vw, 1.45rem) !important;
  font-weight: 900;
  line-height: 1.02 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
  text-shadow:
    0 0 5px rgba(25, 167, 255, 0.35),
    0.04em 0 rgba(255, 54, 244, 0.22),
    -0.04em 0 rgba(0, 87, 255, 0.25);
  mix-blend-mode: screen;
}

.bio-quote::before {
content: "UNVERIFIED FIELD REPORT:";
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(255, 54, 244, 0.88);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-shadow: 0 0 12px rgba(255, 54, 244, 0.44);
}

.bio-quote::after {
content: "";
  position: absolute;
  inset: -0.45rem -0.55rem;
  z-index: -1;
  border: 1px solid rgba(210, 222, 232, 0.16);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 7px),
    rgba(0, 0, 0, 0.26);
  transform: skewX(-5deg);
}

.bio-collage {
position: relative;
  min-height: clamp(48rem, 76vw, 64rem);
}

.bio-video-bg {
position: absolute;
  inset: 2rem -4% 9rem 6%;
  z-index: -1;
  overflow: hidden;
  border: 1px solid rgba(0, 184, 255, 0.14);
  background: #000;
  opacity: 0.24;
  filter: saturate(1.25) contrast(1.24);
  mix-blend-mode: screen;
  transform: rotate(1.2deg);
}

.bio-video-bg video {
width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.bio-video-bg::before,
.bio-video-bg::after {
content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bio-video-bg::before {
background:
    radial-gradient(circle at 50% 42%, transparent 0 38%, rgba(0, 0, 0, 0.78) 78%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 8px);
}

.bio-video-bg::after {
background: linear-gradient(108deg, transparent 0 42%, rgba(0, 87, 255, 0.34) 45%, rgba(255, 54, 244, 0.22) 48%, transparent 56%);
}

.bio-photo,
.bio-logo-strip {
position: absolute;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 64px rgba(0, 87, 255, 0.18);
}

.bio-photo img,
.bio-logo-strip img {
width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.08);
}

.bio-photo:has(figcaption) img {
height: calc(100% - 1.85rem);
}

.bio-photo figcaption {
position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.35rem 0.55rem;
  background: #000;
  color: rgba(246, 251, 255, 0.82);
  font-family: "Courier New", monospace;
  font-size: clamp(0.48rem, 0.66vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.bio-photo::after,
.bio-logo-strip::after {
content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.42)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.bio-photo-party {
inset: 18% 2% auto auto;
  width: min(48%, 22rem);
  aspect-ratio: 0.8 / 1;
  transform: rotate(2.5deg);
}

.bio-photo-mask {
left: 3%;
  bottom: 18rem;
  width: min(34%, 14rem);
  aspect-ratio: 1 / 1;
  transform: rotate(-5deg);
  z-index: 2;
}

.bio-photo-camera {
left: 45%;
  top: 27rem;
  width: min(33%, 16rem);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%) rotate(-2.5deg);
  z-index: 3;
}

.bio-photo-rave {
left: 2%;
  top: 6.2rem;
  width: min(67%, 36rem);
  aspect-ratio: 16 / 9;
  transform: rotate(-1.2deg);
  z-index: 0;
  opacity: 0.86;
}

.bio-logo-strip {
left: 12%;
  right: 0;
  top: 0;
  height: clamp(5rem, 8vw, 7.5rem);
  transform: rotate(-1.5deg);
  z-index: 1;
}

.bio-logo-strip img {
object-position: center;
}

.reload-links {
position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0.55rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  z-index: 4;
}

.reload-link {
position: relative;
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
  min-height: 4.65rem;
  padding: 0.65rem 0.8rem;
  overflow: hidden;
  border: 1px solid rgba(246, 251, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(0, 87, 255, 0.16), transparent 70%),
    rgba(0, 0, 0, 0.7);
  box-shadow:
    inset 0 0 18px rgba(0, 87, 255, 0.08),
    0 0 26px rgba(0, 87, 255, 0.09);
}

.reload-link::before {
content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 35%, rgba(0, 184, 255, 0.2) 48%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--ease);
}

.reload-link img {
grid-row: span 2;
  width: 2.45rem;
  height: 2.45rem;
  object-fit: cover;
}

.reload-link span {
min-width: 0;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.reload-link em {
min-width: 0;
  overflow: hidden;
  color: rgba(210, 222, 232, 0.66);
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reload-link:hover {
border-color: rgba(0, 184, 255, 0.72);
  transform: translateY(-0.18rem);
  box-shadow:
    inset 0 0 20px rgba(0, 87, 255, 0.12),
    0 0 30px rgba(0, 87, 255, 0.16);
}

.reload-link:hover::before {
transform: translateX(130%);
}

.artist-section {
grid-template-columns: minmax(0, 0.68fr) minmax(18rem, 36rem);
  gap: clamp(2rem, 8vw, 8rem);
  overflow: hidden;
}

.artist-section::after {
content: "";
  position: absolute;
  inset: 16% -10% auto 38%;
  height: 26rem;
  z-index: -1;
  background:
    linear-gradient(102deg, transparent 0 18%, rgba(255, 54, 244, 0.62) 19%, transparent 23%),
    linear-gradient(106deg, transparent 0 36%, rgba(0, 87, 255, 0.72) 37%, transparent 42%),
    linear-gradient(111deg, transparent 0 58%, rgba(255, 54, 244, 0.36) 59%, transparent 63%);
  filter: blur(1px);
  opacity: 0.75;
  transform: skewY(-8deg);
  animation: beamPulse 1s ease-in-out infinite alternate;
}

.artist-copy h2 {
max-width: 12ch;
  font-size: clamp(2.4rem, 6vw, 6.2rem);
}

#asteroid-factory .artist-copy h2 {
max-width: 12ch;
  margin-bottom: clamp(0.7rem, 1.5vh, 1.3rem);
  font-size: clamp(2.45rem, min(5.7vw, 9.4vh), 6.2rem);
  line-height: 0.9;
}

#asteroid-factory .artist-name {
display: block;
  width: max-content;
  white-space: nowrap;
}

#asteroid-factory .artist-copy p {
margin-bottom: clamp(0.55rem, 1.15vh, 0.9rem);
  font-size: clamp(0.92rem, min(1.35vw, 2.05vh), 1.18rem);
  line-height: 1.46;
}

#asteroid-factory .artist-statement {
display: grid;
  gap: clamp(0.6rem, 1.25vh, 1rem);
}

#asteroid-factory .artist-statement p {
margin: 0;
}

#asteroid-factory .signal-tags {
gap: clamp(0.35rem, 0.75vh, 0.55rem);
  margin-top: clamp(0.65rem, 1.45vh, 1.5rem);
}

#asteroid-factory .signal-tags span {
padding: clamp(0.34rem, 0.75vh, 0.5rem) clamp(0.5rem, 0.7vw, 0.7rem);
}

#asteroid-factory .album-art {
width: min(100%, min(36rem, 72vh));
}

.signal-tags {
display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.signal-tags span {
padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.38);
  color: rgba(246, 251, 255, 0.78);
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.album-art {
position: relative;
  margin: 0;
  width: min(100%, 32rem);
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000;
  box-shadow:
    0 0 80px rgba(0, 87, 255, 0.24),
    -1.2rem 1.2rem 0 rgba(0, 87, 255, 0.14);
  transform: rotate(1.5deg);
}

.album-art::before,
.album-art::after {
content: "";
  position: absolute;
  pointer-events: none;
}

.album-art::before {
inset: -1px;
  border: 1px solid rgba(255, 54, 244, 0.44);
  clip-path: polygon(0 0, 58% 0, 44% 100%, 0 100%);
  mix-blend-mode: screen;
}

.album-art::after {
left: -12%;
  right: -8%;
  top: 33%;
  height: 0.18rem;
  background: linear-gradient(90deg, transparent, var(--magenta), #fff, transparent);
  box-shadow:
    0 0 24px rgba(255, 54, 244, 0.8),
    0 1.2rem 28px rgba(0, 87, 255, 0.5);
  transform: rotate(-16deg);
}

.album-art img {
display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.08);
}

.album-art figcaption {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.album-art figcaption span {
color: var(--blue-hot);
}

.album-art figcaption strong {
color: var(--ink);
}

.environment-visual {
position: absolute;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #000;
  opacity: 0.28;
  filter: saturate(1.16) contrast(1.2);
  mix-blend-mode: screen;
}

.environment-visual video {
width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.environment-visual::before,
.environment-visual::after {
content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.environment-visual::before {
background:
    radial-gradient(circle at 50% 45%, transparent 0 36%, rgba(0,0,0,0.72) 74%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 7px);
}

.environment-visual::after {
background: linear-gradient(108deg, transparent 0 42%, rgba(255, 54, 244, 0.55) 43%, rgba(25, 167, 255, 0.5) 45%, transparent 48%);
  opacity: 0.75;
}

.environment-visual-logo {
width: min(48rem, 58vw);
  height: min(34rem, 58vh);
  left: 43%;
  top: 8rem;
  transform: translateX(-50%) rotate(2deg);
  opacity: 0.24;
}

.environment-visual-skull {
position: sticky;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  width: min(64rem, 72vw);
  height: min(32rem, 50vh);
  left: auto;
  right: auto;
  top: 9rem;
  margin-top: 5rem;
  transform: rotate(-4deg);
  z-index: 0;
  opacity: 0.23;
}

.album-story {
grid-template-columns: minmax(19rem, 0.86fr) minmax(18rem, 1.14fr);
  overflow-x: clip;
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: clamp(0.8rem, 1.8vw, 1.6rem);
  align-items: start;
  padding-top: clamp(5rem, 7vw, 7rem);
}

.album-story::after {
content: "";
  position: absolute;
  inset: 10% -20% 8% 28%;
  z-index: -1;
  background:
    radial-gradient(circle at 48% 24%, rgba(0, 194, 255, 0.22), transparent 22rem),
    linear-gradient(112deg, transparent 0 18%, rgba(255, 54, 244, 0.2) 19%, transparent 24%),
    linear-gradient(68deg, transparent 0 52%, rgba(0, 87, 255, 0.22) 53%, transparent 58%);
  opacity: 0.92;
}

.album-sticky {
grid-column: 1;
  grid-row: 2;
  z-index: 2;
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 0;
}

.album-identity {
position: relative;
  min-height: auto;
}

.album-cover {
position: relative;
  z-index: 2;
  width: min(100%, 31rem);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #000;
  box-shadow:
    0 0 70px rgba(0, 87, 255, 0.25),
    1rem 1rem 0 rgba(255, 54, 244, 0.13);
}

.album-cover::before {
content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent, rgba(0,0,0,0.18)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.album-cover img {
width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.08);
}

.desktop-notice {
display: none;
}

@media (max-width: 760px) {
.desktop-notice:not(.is-dismissed) {
position: fixed;
    top: 4.8rem;
    left: clamp(1rem, 3vw, 2rem);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: calc(100vw - 2rem);
    padding: 0.38rem 0.42rem 0.38rem 0.5rem;
    border: 1px solid rgba(255, 72, 82, 0.3);
    border-left-color: rgba(255, 72, 82, 0.84);
    background: rgba(5, 7, 14, 0.76);
    box-shadow: 0 0 18px rgba(255, 54, 76, 0.08);
    color: rgba(255, 132, 139, 0.92);
    font-family: "Courier New", monospace;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.35;
}

.desktop-notice span {
min-width: 0;
}

.desktop-notice button {
flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 190, 194, 0.9);
    cursor: pointer;
    font: 1rem/1 Arial, sans-serif;
}
}

.song-chapters {
grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24vh;
  padding: 4vh 0 28vh;
}

.song-chapter {
position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 32%);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  min-height: 48vh;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(120deg, rgba(0, 87, 255, 0.12), rgba(255, 54, 244, 0.05), transparent 66%),
    rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  opacity: 0.56;
  transform: translateX(0);
  transition:
    opacity 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    transform 0.32s cubic-bezier(.22,1,.36,1);
  scroll-snap-align: none;
}

/* The album is a long reading space: snap to its individual tracks, never to
   the section wrapper, so 06 can flow cleanly into 07. */
#all2dnb {
scroll-snap-align: none;
}

.song-chapter::before {
content: "";
  position: absolute;
  left: -1px;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--blue-hot);
  box-shadow: 0 0 22px rgba(25, 167, 255, 0.55);
  opacity: 0.4;
}

.song-chapter.is-active {
opacity: 1;
  border-color: rgba(25, 167, 255, 0.58);
  box-shadow: 0 0 60px rgba(0, 87, 255, 0.16);
  transform: translateX(-0.8rem);
}

.song-chapter.is-active::before {
background: var(--magenta);
  box-shadow: 0 0 26px rgba(255, 54, 244, 0.7);
  opacity: 1;
}

.song-chapter span {
color: var(--blue-hot);
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}

.song-chapter h3 {
margin: 0.8rem 0;
  font-size: clamp(1.8rem, 5vw, 4.4rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.song-chapter p {
max-width: 36rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.52;
}

.song-art {
position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(120deg, rgba(0, 87, 255, 0.2), rgba(255, 54, 244, 0.08), transparent 68%),
    rgba(0, 0, 0, 0.62);
  box-shadow:
    inset 0 0 22px rgba(0, 87, 255, 0.1),
    0 0 34px rgba(0, 87, 255, 0.12);
}

.song-art::after {
content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.34)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
}

.song-art img {
width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08);
}

.song-art video {
width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08);
}

.song-art-empty {
display: grid;
  place-items: center;
}

.song-art-empty span {
color: rgba(210, 222, 232, 0.5);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

/* Lift only the first two section markers above their identity imagery. Their
   blend mode keeps the authored blue linework visually running through them. */
#hero::before,
#studios::before {
z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (min-width: 901px) {
#reload.biopic-section {
align-content: start;
    align-items: stretch;
}

#reload .bio-collage {
display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    align-content: space-between;
    column-gap: clamp(0.9rem, 1.4vw, 1.5rem);
    row-gap: clamp(1.4rem, 2.4vh, 2.5rem);
}

#reload .bio-video-bg {
inset: 38% auto auto 8%;
    width: min(92vw, 82rem);
    height: auto;
    aspect-ratio: 16 / 9;
    opacity: 0.32;
    transform: translate(-50%, -50%);
}

#reload .bio-logo-strip {
position: relative;
    inset: auto;
    /* The identity strip is the headline of the whole visual field, not a
       floating card: span the complete 12-column photo composition. */
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    align-self: start;
    transform: none;
}

/* The section number is intentionally a HUD layer; let it cut across the
     full-width Re-Load strip instead of being hidden behind it. */
  #reload.biopic-section::before {
z-index: 5;
    pointer-events: none;
}

#reload .bio-photo {
position: relative;
    inset: auto;
    width: 100%;
    justify-self: stretch;
    align-self: start;
    transform: none;
}

#reload .bio-photo-rave {
grid-column: 1 / 8;
    grid-row: 2;
}

#reload .bio-photo-party {
grid-column: 8 / 13;
    grid-row: 2;
}

#reload .bio-photo-camera {
grid-column: 5 / 10;
    grid-row: 3;
}

#reload .bio-photo-mask {
grid-column: 2 / 6;
    grid-row: 4;
}

#reload .bio-quote {
position: relative;
    inset: auto;
    grid-column: 2 / 12;
    grid-row: 5;
    align-self: center;
    margin-bottom: 2.625rem;
    transform: none;
}

#reload .reload-links {
position: relative;
    inset: auto;
    grid-column: 1 / 13;
    grid-row: 6;
    align-self: end;
}

#asteroid-factory .album-art {
transform: translateX(clamp(1rem, 2.6vw, 3.25rem)) rotate(1.5deg);
}
}

.large-link {
min-height: 4rem;
  font-size: clamp(0.78rem, 1.4vw, 1rem);
}

.hud {
position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9;
  padding: 0.8rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(12px);
}

.album-player {
position: fixed;
  left: 50%;
  top: auto;
  bottom: 0.75rem;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(12rem, 0.85fr) minmax(22rem, 1.55fr) minmax(10rem, 0.75fr);
  gap: 0.12rem 1rem;
  align-items: center;
  width: min(54rem, calc(100vw - 24rem));
  min-height: 3.2rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(0, 87, 255, 0.18), transparent 72%),
    rgba(0, 0, 0, 0.48);
  box-shadow: inset 0 0 18px rgba(0, 87, 255, 0.05);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.35rem);
  transition:
    opacity 0.32s var(--ease),
    transform 0.32s var(--ease);
  backdrop-filter: blur(14px);
}

.album-player.is-visible {
opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.album-player > span {
grid-column: 1;
  grid-row: 1;
  color: var(--blue-hot);
  font-family: "Arial", "Helvetica Neue", sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.album-player strong {
grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.album-player-controls {
grid-column: 1;
  grid-row: 2;
  display: flex;
  gap: 0.35rem;
}

.album-seek {
grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6rem;
  gap: 0.55rem;
  align-items: center;
  color: rgba(210, 222, 232, 0.78);
  font-family: "Arial", "Helvetica Neue", sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.album-seek input {
width: 100%;
  min-width: 0;
  accent-color: var(--blue-hot);
}

.contact-choice-modal {
position: fixed;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background:
    linear-gradient(rgba(0, 184, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 184, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(0, 87, 255, 0.2), transparent 30rem),
    rgba(0, 0, 0, 0.88);
  background-size: 4rem 4rem, 4rem 4rem, auto, auto;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
  transition: opacity 220ms var(--ease), transform 280ms var(--ease);
  backdrop-filter: blur(16px);
}

.contact-choice-modal.is-open {
opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.contact-choice-shell {
position: relative;
  width: min(34rem, 100%);
  padding: 3.85rem 0.85rem 0.85rem;
  border: 1px solid rgba(0, 184, 255, 0.62);
  background:
    linear-gradient(125deg, rgba(0, 87, 255, 0.12), transparent 48%),
    rgba(1, 5, 13, 0.97);
  box-shadow:
    inset 0 0 0 1px rgba(0, 87, 255, 0.14),
    inset 0 0 48px rgba(0, 87, 255, 0.08),
    0 0 50px rgba(0, 87, 255, 0.18);
}

.contact-choice-shell::before,
.contact-choice-shell::after {
content: "";
  position: absolute;
  width: 5.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-hot), transparent);
  box-shadow: 0 0 14px rgba(0, 184, 255, 0.75);
}

.contact-choice-shell::before {
top: -1px; left: -1px;
}

.contact-choice-shell::after {
right: -1px; bottom: -1px; transform: rotate(180deg);
}

.contact-choice-close {
position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  min-height: 2.4rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.78);
  color: var(--text);
  cursor: pointer;
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.contact-choice-close:hover,
.contact-choice-close:focus-visible {
border-color: var(--blue-hot); color: var(--blue-hot);
}

.contact-choice-line {
position: absolute;
  top: 1.55rem;
  left: 1.2rem;
  right: 6rem;
  margin: 0;
  color: rgba(207, 225, 255, 0.72);
  font-size: clamp(0.7rem, 1vw, 0.78rem);
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.contact-choice-actions {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem;
}

.contact-choice-button {
display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.65rem;
  padding: 0.75rem;
  border: 1px solid rgba(0, 122, 255, 0.42);
  background: rgba(0, 10, 25, 0.82);
  color: var(--blue-hot);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.contact-choice-button:hover,
.contact-choice-button:focus-visible {
border-color: var(--blue-hot);
  background: rgba(0, 45, 95, 0.56);
  outline: none;
  transform: translateY(-2px);
}

.contact-choice-button strong {
font-size: 0.78rem; letter-spacing: 0.1em;
}

.contact-choice-button.is-copied {
border-color: rgba(70, 255, 154, 0.72); color: #46ff9a;
}

@media (max-width: 560px) {
.contact-choice-shell {
width: min(22rem, 100%); padding-top: 3.75rem;
}

.contact-choice-line {
top: 1.35rem; right: 5.2rem; font-size: 0.66rem;
}

.contact-choice-actions {
grid-template-columns: 1fr;
}

.contact-choice-button {
min-height: 3.35rem;
}
}

.album-player.is-playing {
border-color: rgba(25, 167, 255, 0.88);
  box-shadow:
    inset 0 0 22px rgba(0, 87, 255, 0.16),
    0 0 16px rgba(0, 137, 255, 0.34),
    0 0 40px rgba(0, 87, 255, 0.2);
  animation: player-signal-glow 2.4s ease-in-out infinite;
}

@keyframes player-signal-glow {
0%, 100% { border-color: rgba(25, 167, 255, 0.52); box-shadow: inset 0 0 18px rgba(0, 87, 255, 0.12), 0 0 12px rgba(0, 137, 255, 0.22), 0 0 28px rgba(0, 87, 255, 0.14); }
  50% { border-color: rgba(25, 167, 255, 0.95); box-shadow: inset 0 0 26px rgba(0, 87, 255, 0.2), 0 0 20px rgba(0, 137, 255, 0.46), 0 0 48px rgba(0, 87, 255, 0.28); }
}

.album-player-waveform {
grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  align-items: end;
  gap: 0.18rem;
  height: 0.48rem;
  margin-top: -0.06rem;
  overflow: hidden;
}

.album-player-waveform span {
display: block;
  min-height: 0.08rem;
  background: linear-gradient(180deg, var(--blue-hot), var(--magenta));
  box-shadow: 0 0 10px rgba(25, 167, 255, 0.45);
  transform-origin: bottom;
  animation: waveform 0.7s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.album-player.is-playing .album-player-waveform span {
animation-play-state: running;
}

.album-player-waveform span:nth-child(2n) {
animation-duration: 0.48s;
}

.album-player-waveform span:nth-child(3n) {
animation-duration: 0.92s;
}

.album-volume {
grid-column: 3;
  grid-row: 1 / 3;
  display: grid;
  gap: 0.2rem;
  color: rgba(210, 222, 232, 0.72);
  font-family: "Arial", "Helvetica Neue", sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.album-volume input {
width: 100%;
  accent-color: var(--blue-hot);
}

.album-player button {
min-height: 2rem;
  padding: 0 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.54);
  color: rgba(246, 251, 255, 0.86);
  cursor: pointer;
  font-family: "Arial", "Helvetica Neue", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.album-player button:hover {
border-color: rgba(0, 184, 255, 0.7);
  color: var(--blue-hot);
}

.onlyfans-modal {
position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 87, 255, 0.18), transparent 32rem),
    rgba(0, 0, 0, 0.86);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
  backdrop-filter: blur(14px);
}

.onlyfans-modal.is-open {
opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.onlyfans-modal img {
width: min(92vw, 44rem);
  max-height: 82vh;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 60px rgba(0, 87, 255, 0.22),
    0 0 120px rgba(0, 0, 0, 0.8);
}

.onlyfans-close {
position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  top: clamp(1rem, 3vw, 2rem);
  min-height: 2.7rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.72);
  color: var(--text);
  cursor: pointer;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.onlyfans-close:hover {
border-color: rgba(0, 184, 255, 0.72);
  color: var(--blue-hot);
}

@keyframes bootExit {
to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes bootLine {
0% {
    transform: scaleX(0);
  }
  72% {
    transform: scaleX(0.76);
  }
  82% {
    transform: scaleX(0.82);
    box-shadow: 0 0 32px var(--blue);
  }
  100% {
    transform: scaleX(1);
    box-shadow:
      0 0 26px var(--blue),
      0 0 90px rgba(25, 167, 255, 0.75);
  }
}

@keyframes bootGlowIn {
from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 0.42;
    filter: blur(0);
  }
}

@keyframes bootFlicker {
0%, 100% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes bootJolt {
0%, 12%, 100% {
    transform: translate(0, 0);
  }
  14% {
    transform: translate(-0.2rem, 0.05rem);
  }
  18% {
    transform: translate(0.15rem, -0.06rem);
  }
  70% {
    transform: translate(0.08rem, 0);
  }
}

@keyframes glitchSlice {
0%, 86%, 100% {
    transform: translate(0, 0);
  }
  88% {
    transform: translate(0.08em, -0.03em);
  }
  91% {
    transform: translate(-0.05em, 0.04em);
  }
}

@keyframes noiseShift {
0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(-0.35rem,0.25rem,0);
  }
}

@keyframes beamPulse {
from {
    opacity: 0.48;
    transform: translateX(-1rem) skewY(-8deg);
  }
  to {
    opacity: 0.88;
    transform: translateX(1rem) skewY(-8deg);
  }
}

@keyframes waveform {
from {
    transform: scaleY(0.24);
  }
  to {
    transform: scaleY(1);
  }
}

@media (max-width: 900px) {
.portfolio-arrow,
  .album-player button {
min-width: 2.75rem;
    min-height: 2.75rem;
}

.album-player input[type="range"] {
min-height: 2.75rem;
}

html,
  body {
width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

main,
  .section-panel {
width: 100%;
    max-width: 100vw;
    overflow-x: clip;
}

nav {
display: none;
}

.hero,
.story-grid,
.biopic-section,
.artist-section,
.album-story,
.games-section {
grid-template-columns: 1fr;
}

.bio-collage {
min-height: clamp(58rem, 120vw, 68rem);
}

.bio-video-bg {
inset: 2rem 0 8rem 0;
    opacity: 0.2;
}

.bio-photo-party {
top: 18rem;
    right: 0;
    width: min(54%, 21rem);
}

.bio-photo-mask {
bottom: 17rem;
    width: min(38%, 12rem);
}

.bio-photo-camera {
left: 46%;
    right: auto;
    top: 30rem;
    width: min(34%, 14rem);
}

.bio-photo-rave {
left: 0;
    right: auto;
    top: 6rem;
    bottom: auto;
    width: min(72%, 32rem);
}

.bio-logo-strip {
left: 5%;
}

.reload-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bio-quote {
bottom: 17.4rem;
}

.environment-visual-logo {
width: min(115vw, 100%);
    height: 24rem;
    left: 50%;
    right: auto;
    top: 10rem;
    opacity: 0.16;
}

.album-story {
grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
}

.environment-visual-skull {
position: absolute;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: 24rem;
    right: auto;
    left: 50%;
    top: 12rem;
    margin-top: 0;
    transform: translateX(-50%) rotate(-4deg);
    z-index: -1;
    opacity: 0.15;
}

.album-sticky {
position: relative;
    top: auto;
}

.album-identity {
min-height: auto;
}

.album-cover {
width: min(100%, 30rem);
}

.song-chapters {
grid-column: 1;
    grid-row: auto;
    width: 100%;
    gap: 1rem;
    padding: 0;
}

.song-chapter {
grid-template-columns: 1fr;
    min-height: auto;
    transform: translateX(0);
}

.song-chapter p {
max-width: none;
    font-size: clamp(0.92rem, 3.6vw, 1.02rem);
    line-height: 1.42;
}

.song-chapter p br {
display: none;
}

.song-art {
max-width: 18rem;
    justify-self: center;
}

.song-chapter.is-active {
transform: translateX(0);
}

.identity-core {
width: min(22rem, 82vw);
}

.project-row {
grid-template-columns: 3.6rem minmax(0, 1fr);
    grid-template-areas:
      "emblem title"
      "emblem description"
      "status status";
    gap: 0.35rem;
}

.server-card {
grid-template-columns: 1fr;
}

.server-card .server-game-art {
grid-row: auto;
}

.server-card p {
grid-column: auto;
}

.studio-stack {
grid-template-columns: 1fr;
}

.studio-card-large {
grid-column: auto;
}

.album-art {
width: min(100%, 32rem);
    justify-self: center;
}

.hud {
display: none;
}

.album-player {
left: 0.75rem;
    right: 0.75rem;
    top: 0.45rem;
    bottom: auto;
    width: auto;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    transform: translateY(-0.35rem);
}

.album-player.is-visible {
transform: translateY(0);
}

.games-planet {
top: 50%;
    right: auto;
    left: -10vw;
    width: min(76vw, 28rem);
    opacity: 0;
    transform: translateY(-50%);
}

.games-planet.is-ready {
opacity: 1;
}

.album-player > span {
grid-column: 1;
    grid-row: 1;
}

.album-player strong {
grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
}

.album-seek,
  .album-volume,
  .album-player-waveform {
grid-column: 1 / -1;
    grid-row: auto;
}

.album-player-controls {
grid-column: 2;
    grid-row: 1;
    justify-self: end;
}
}

@media (max-width: 560px) {
.brand-mark span {
max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-panel {
padding-left: 1rem;
    padding-right: 1rem;
}

.split-title {
font-size: clamp(3.5rem, 21vw, 5.8rem);
}

.primary-link,
  .ghost-link {
width: 100%;
    justify-content: center;
}

.reload-links {
grid-template-columns: 1fr;
}

.bio-collage {
/* Six channel links form a tall mobile stack. Give the editorial collage
       its own stage above that stack so captions and the field report never
       compete for the same physical area. */
    min-height: 92rem;
}

/* Mobile Re-Load collage: each photo occupies a deliberately separate
     vertical band, preserving its caption before the field report begins. */
  #reload .bio-photo-rave {
/* Clear the full-width Re-Load strip before the Saint Rave image starts.
       At phone width the former 1rem offset hid the top of the photograph
       beneath the banner. */
    top: 6rem;
    width: min(74%, 23rem);
}

#reload .bio-photo-party {
top: 18rem;
    right: 0.4rem;
    width: min(54%, 17rem);
}

#reload .bio-photo-mask {
top: 31rem;
    bottom: auto;
    left: 0.4rem;
    width: min(39%, 12rem);
}

#reload .bio-photo-camera {
top: 43rem;
    left: 44%;
    width: min(36%, 11rem);
}

.bio-quote {
right: 4%;
    bottom: 35.5rem;
    left: 4%;
    font-size: 0.86rem !important;
}

.album-art figcaption {
flex-direction: column;
    align-items: flex-start;
}
}

/* Mobile service ledger: keep icon, copy and status on one deliberate
   reading path rather than letting the status float in a separate empty row. */
@media (max-width: 760px) {
#projects .project-row {
grid-template-columns: 4.35rem minmax(0, 1fr);
    grid-template-areas:
      "emblem title"
      "status description";
    align-items: start;
    gap: 0.38rem 0.75rem;
    min-height: 0;
    padding: 1rem 1.1rem;
}

#projects .service-emblem {
width: 4.35rem;
    height: 4.35rem;
}

#projects .project-row h3 {
margin: 0.06rem 0 0;
    font-size: clamp(1.1rem, 5.45vw, 1.45rem);
    line-height: 1.04;
}

#projects .project-row p {
margin: 0;
    font-size: clamp(0.92rem, 4.05vw, 1rem);
    line-height: 1.38;
}

#projects .project-status {
justify-self: center;
    align-self: start;
    min-width: 0;
    margin: 0;
    font-size: 0.62rem !important;
}
}

@media (prefers-reduced-motion: reduce) {
*,
  *::before,
  *::after {
animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
}
}

/* Public portfolio archive */
.public-portfolio {
display: block;
  overflow: hidden;
  padding-top: clamp(5rem, 9vw, 9rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

/* Compact desktop/tablet still has enough horizontal rail for the main routes.
   Keep the navigation available here; truly phone-sized layouts retain the
   deliberately minimal header. */
@media (min-width: 720px) and (max-width: 900px) {
header {
gap: 0.75rem;
    padding-inline: clamp(0.85rem, 2vw, 1.25rem);
}

nav {
display: flex;
    flex: 0 1 auto;
    gap: clamp(0.42rem, 1.2vw, 0.72rem);
    font-size: clamp(0.58rem, 1.15vw, 0.68rem);
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.brand-mark {
font-size: 0.7rem;
}

.brand-mark img {
width: 2rem; height: 2rem;
}
}

/* Mobile service cards use one clear reading column: the emblem and its live
   marker stay together on the left, while title and description read as a
   single stacked block on the right. */
@media (max-width: 760px) {
#projects .project-row {
grid-template-areas:
      "emblem title"
      "emblem description"
      "status description";
    grid-template-rows: auto auto auto;
    align-items: start;
}

#projects .project-row p {
align-self: start;
    padding-top: 0.1rem;
}

#projects .project-status {
justify-self: center;
    align-self: end;
}

/* One shared visual rail for all service marks: this keeps every SVG and
     LIVE marker aligned even when a heading wraps onto a second line. */
  #projects .project-row {
grid-template-columns: 4.35rem minmax(0, 1fr);
    column-gap: 0.78rem;
}

#projects .service-emblem {
justify-self: center;
    align-self: start;
}

#projects .project-status {
width: 4.35rem;
    justify-self: center;
    justify-content: center;
    text-align: center;
}

#projects .project-row h3,
  #projects .project-row p {
min-width: 0;
}
}

.public-portfolio-heading {
display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.72fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.public-portfolio-heading h2 {
max-width: 10ch;
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 7rem);
  line-height: 0.9;
}

.public-portfolio-heading > p {
max-width: 34rem;
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
}

.portfolio-carousel {
position: relative;
  min-height: clamp(23rem, 47vw, 38rem);
  border: 1px solid rgba(0, 184, 255, 0.24);
  background:
    linear-gradient(115deg, rgba(0, 87, 255, 0.13), transparent 38%),
    radial-gradient(circle at 50% 55%, rgba(0, 184, 255, 0.12), transparent 34%),
    rgba(2, 8, 20, 0.42);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.portfolio-carousel::before,
.portfolio-carousel::after {
content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 184, 255, 0.55), transparent);
  pointer-events: none;
}

.portfolio-carousel::before {
top: 18%;
}

.portfolio-carousel::after {
bottom: 20%;
}

.portfolio-track {
position: absolute;
  inset: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem);
}

.portfolio-card {
position: absolute;
  top: 50%;
  left: 50%;
  width: min(42vw, 35rem);
  aspect-ratio: 16 / 9;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transition: transform 0.65s var(--ease), opacity 0.55s ease, filter 0.55s ease;
  filter: saturate(0.65) brightness(0.55);
}

.portfolio-card.is-center,
.portfolio-card.is-left,
.portfolio-card.is-right {
opacity: 1;
  pointer-events: auto;
}

.portfolio-card.is-center {
z-index: 4;
  transform: translate(-50%, -50%) scale(1);
  filter: saturate(1.1) brightness(1);
}

.portfolio-card.is-left {
z-index: 2;
  transform: translate(calc(-50% - min(39vw, 31rem)), -50%) scale(0.72) rotate(-4deg);
}

.portfolio-card.is-right {
z-index: 2;
  transform: translate(calc(-50% + min(39vw, 31rem)), -50%) scale(0.72) rotate(4deg);
}

.portfolio-card-button {
position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(0, 184, 255, 0.45);
  background: rgba(1, 5, 14, 0.82);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5), 0 0 2.5rem rgba(0, 87, 255, 0.16);
  overflow: hidden;
}

.portfolio-card.is-center .portfolio-card-button:hover {
border-color: var(--blue-hot);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5), 0 0 3.5rem rgba(0, 87, 255, 0.36);
}

.portfolio-card-image,
.portfolio-card-image img {
display: block;
  width: 100%;
  height: 100%;
}

.portfolio-card-image {
position: absolute;
  inset: 0;
  z-index: 1;
}

.portfolio-card-image img {
object-fit: cover;
  opacity: 0.7;
  filter: contrast(1.08) saturate(1.05);
}

.portfolio-card-button::after {
content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 20%, rgba(1, 5, 14, 0.92) 100%);
  pointer-events: none;
}

.portfolio-card-meta {
position: absolute;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  left: clamp(1rem, 2.4vw, 2rem);
  z-index: 2;
  display: grid;
  gap: 0.35rem;
}

.portfolio-card-meta small,
.portfolio-card-meta em {
color: var(--blue-hot);
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.portfolio-card-meta strong {
color: #f6fbff;
  font-size: clamp(1.15rem, 2.4vw, 2rem);
  line-height: 1;
  text-shadow: 0 0 18px rgba(0, 87, 255, 0.55);
}

.portfolio-card-meta em {
color: rgba(246, 251, 255, 0.56); font-size: 0.61rem;
}

.portfolio-arrow {
position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(0, 184, 255, 0.5);
  background: rgba(2, 8, 20, 0.78);
  color: var(--blue-hot);
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
}

.portfolio-arrow:hover {
background: var(--blue); color: white;
}

.portfolio-arrow-prev {
left: 1.2rem;
}

.portfolio-arrow-next {
right: 1.2rem;
}

.portfolio-carousel-status {
display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.portfolio-carousel-status span:first-child {
color: var(--blue-hot);
}

.portfolio-modal {
position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  backdrop-filter: blur(16px);
}

.portfolio-modal.is-open {
opacity: 1; pointer-events: auto; transform: scale(1);
}

.portfolio-modal-shell {
position: relative;
  display: grid;
  grid-template-columns: minmax(16rem, 1.1fr) minmax(16rem, 0.9fr);
  width: min(72rem, 100%);
  max-height: min(85vh, 46rem);
  border: 1px solid rgba(0, 184, 255, 0.42);
  background: linear-gradient(120deg, rgba(0, 87, 255, 0.12), rgba(2, 8, 20, 0.96) 55%);
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.7), 0 0 4rem rgba(0, 87, 255, 0.18);
  overflow: hidden;
}

.portfolio-modal-image {
align-self: start; min-height: 0; aspect-ratio: 16 / 9; background: #02040a;
}

.portfolio-modal-image img {
display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}

.portfolio-modal-image {
position: relative;
}

.portfolio-modal-live {
position: relative; min-width: 0; width: 100%; overflow: visible; background: #030405;
}

.portfolio-modal-live iframe {
display: block; width: 100%; height: min(82vh, 50rem); min-height: 38rem; border: 0; background: #030405;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])),
.portfolio-modal:has(.portfolio-modal-live:not([hidden])).is-open {
place-items: start center; padding: 0.5rem; overflow: hidden; transform: none;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-shell {
display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; width: 100%; height: calc(100vh - 1rem); max-width: 100%; max-height: none; overflow: hidden;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live {
grid-column: 1; grid-row: 2; align-self: stretch; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; overflow: hidden;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live iframe {
height: 100%; min-height: 0;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy {
grid-column: 1; grid-row: 1; display: grid; grid-template-columns: minmax(14rem, 0.55fr) minmax(24rem, 1.45fr); grid-template-rows: auto auto auto; align-items: center; column-gap: clamp(2rem, 5vw, 6rem); padding: 0.55rem clamp(5.5rem, 7vw, 8rem) 0.55rem clamp(1.5rem, 3vw, 3rem); overflow: hidden;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy .section-kicker {
grid-column: 1; grid-row: 1; margin: 0 0 0.25rem;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy h2 {
grid-column: 1; grid-row: 2; font-size: clamp(1.5rem, 2vw, 2.2rem); margin: 0 0 0.35rem;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy .portfolio-modal-status {
grid-column: 1; grid-row: 3; margin: 0;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
display: block; grid-column: 2; grid-row: 1 / 4; max-width: 48rem; margin: 0; line-height: 1.42; white-space: pre-line;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy .primary-link {
display: none;
}

/*
 * Hivemind alignment protocol:
 * keep the briefing copy on the same vertical axis as the embedded workspace.
 * The first track mirrors the demo sidebar; the remaining 2rem accounts for
 * the modal's left padding/gap and the workspace's internal title padding.
 */
.portfolio-modal.is-hivemind-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy {
--hivemind-sidebar-width: clamp(22.5rem, 32vw, 31.25rem);
  grid-template-columns: calc(var(--hivemind-sidebar-width) - 0.5rem) minmax(0, 1fr);
  column-gap: 1rem;
  padding-left: 1rem;
}

.portfolio-modal.is-hivemind-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy h2 {
font-size: clamp(1.75rem, 2vw, 2.2rem);
}

.portfolio-modal.is-hivemind-preview .portfolio-modal-copy .portfolio-modal-status.portfolio-modal-badges {
flex-wrap: nowrap;
  gap: 0.25rem;
}

.portfolio-modal.is-hivemind-preview .portfolio-modal-copy .portfolio-badge {
padding: 0.16rem 0.28rem;
  font-size: 0.54rem;
  letter-spacing: 0.075em;
  white-space: nowrap;
}

.portfolio-modal.is-hivemind-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
width: 100%;
  max-width: none;
  font-size: clamp(0.9rem, 1.1vw, 1.02rem);
}

@media (max-width: 1320px) and (min-width: 981px) {
.portfolio-modal.is-hivemind-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy {
--hivemind-sidebar-width: 23.75rem;
}
}

/* Mobile studio cards become image cards with a solid caption extension.
   This preserves every important part of the artwork instead of laying copy
   across it, and intentionally lets the stacked section grow vertically. */
@media (max-width: 800px) {
.studio-card,
  .studio-card-large {
display: grid;
    grid-template-rows: clamp(12.5rem, 52vw, 17rem) auto;
    min-height: 0;
    padding: 0;
    background: #000;
    isolation: isolate;
}

.studio-card img {
position: relative;
    inset: auto;
    z-index: 0;
    grid-row: 1;
    width: 100%;
    height: 100%;
}

.studio-card div {
position: static;
    inset: auto;
    display: contents;
    max-width: none;
}

.studio-card h3,
  .studio-card span {
position: absolute;
    left: 0.85rem;
    z-index: 2;
}

.studio-card h3 {
top: 1.65rem;
    margin: 0;
}

.studio-card span {
top: 0.7rem;
}

.studio-card p,
  .studio-card-large p {
z-index: 1;
    grid-row: 2;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 0;
    background: #000;
    color: var(--muted);
    line-height: 1.42;
}
}

@media (max-width: 980px) and (min-width: 801px) {
.portfolio-modal.is-hivemind-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy {
display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.8rem 4.5rem 0.8rem 1rem;
}

.portfolio-modal.is-hivemind-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
margin-top: 0.65rem;
}
}

.portfolio-modal-copy {
display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 4rem);
}

.portfolio-modal-copy h2 {
margin: 0 0 1rem; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(1.85rem, 3.4vw, 3.65rem); line-height: 0.98;
}

.portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
max-width: 32rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55;
}

.portfolio-modal-status {
color: var(--blue-hot) !important; font-family: "Courier New", monospace; font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}

.portfolio-modal-status.portfolio-modal-badges {
display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}

.portfolio-modal-copy .primary-link {
align-self: flex-start; margin-top: 1.5rem;
}

.portfolio-modal-close {
position: absolute; top: 1rem; right: 1rem; z-index: 3; min-height: 2.6rem; padding: 0 0.85rem; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.75); color: var(--text); cursor: pointer; font-family: "Courier New", monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
}

.portfolio-modal-close:hover {
border-color: var(--blue-hot); color: var(--blue-hot);
}

.portfolio-modal.is-notice .portfolio-modal-shell {
grid-template-columns: minmax(20rem, 1.15fr) minmax(18rem, 0.85fr);
  width: min(72rem, 100%);
  min-height: 0;
  border-color: rgba(0, 184, 255, 0.58);
  background:
    linear-gradient(90deg, rgba(0, 184, 255, 0.14), transparent 1px) 0 0 / 5rem 100%,
    linear-gradient(135deg, rgba(0, 87, 255, 0.15), rgba(2, 8, 20, 0.98) 48%, rgba(0, 184, 255, 0.05));
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.78), 0 0 3rem rgba(0, 132, 255, 0.2);
}

.portfolio-modal.is-notice .portfolio-modal-live {
display: none !important;
}

.portfolio-modal.is-notice .portfolio-modal-image {
display: block;
  align-self: center;
  margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(0, 184, 255, 0.35);
  box-shadow: 0 0 2.5rem rgba(0, 87, 255, 0.18);
  overflow: hidden;
}

.portfolio-modal.is-notice .portfolio-modal-copy {
position: relative;
  justify-content: flex-start;
  padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem);
}

.portfolio-modal.is-notice .portfolio-modal-copy::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(13rem, 42%);
  height: 2px;
  background: var(--blue-hot);
  box-shadow: 0 0 1.25rem rgba(0, 184, 255, 0.8);
}

.portfolio-modal.is-notice .portfolio-modal-copy h2 {
max-width: 15ch;
  margin-bottom: 0.8rem;
  font-size: clamp(2.2rem, 5vw, 4.25rem);
}

.portfolio-modal.is-internal .portfolio-modal-copy h2 {
max-width: none;
  white-space: nowrap;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.portfolio-modal.is-internal .section-kicker[hidden] {
display: none !important;
}

.portfolio-modal.is-notice .portfolio-modal-status {
margin: 0 0 1.35rem;
}

.portfolio-modal.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
max-width: 34rem;
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.65;
  white-space: pre-wrap;
}

.studio-preview-modal {
position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 3, 10, 0.94);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  backdrop-filter: blur(16px);
}

.studio-preview-modal.is-open {
opacity: 1; pointer-events: auto; transform: scale(1);
}

.studio-preview-shell {
position: relative;
  display: grid;
  width: min(92vw, 92rem);
  max-height: min(88vh, 58rem);
  padding: 0.7rem;
  border: 1px solid rgba(0, 184, 255, 0.5);
  background: #02040a;
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.78), 0 0 4rem rgba(0, 87, 255, 0.2);
}

.studio-preview-media {
position: relative;
  overflow: hidden;
  background: #000;
}

.studio-preview-shell img {
display: block;
  width: 100%;
  max-height: min(76vh, 52rem);
  object-fit: contain;
  background: #000;
}

.studio-preview-media h2 {
position: absolute;
  top: clamp(0.85rem, 2vw, 1.5rem);
  left: clamp(0.85rem, 2vw, 1.5rem);
  max-width: calc(100% - 8rem);
  margin: 0;
  color: var(--text);
  font-size: clamp(1.6rem, 3.6vw, 4rem);
  line-height: 0.92;
  text-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.96);
  text-transform: uppercase;
}

.studio-preview-description {
margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  line-height: 1.5;
}

.studio-preview-close {
position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  z-index: 1;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.75);
  color: var(--text);
  cursor: pointer;
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.studio-preview-close:hover {
border-color: var(--blue-hot); color: var(--blue-hot);
}

@media (max-width: 800px) {
.public-portfolio-heading {
display: block;
}

.public-portfolio-heading > p {
margin-top: 1.2rem;
}

.portfolio-carousel {
min-height: 31rem;
}

.portfolio-card {
width: min(78vw, 27rem);
}

.portfolio-card.is-left {
transform: translate(calc(-50% - 48vw), -50%) scale(0.62) rotate(-4deg);
}

.portfolio-card.is-right {
transform: translate(calc(-50% + 48vw), -50%) scale(0.62) rotate(4deg);
}

.portfolio-arrow {
width: 2.5rem; height: 2.5rem;
}

.portfolio-arrow-prev {
left: 0.65rem;
}

.portfolio-arrow-next {
right: 0.65rem;
}

.portfolio-carousel-status {
display: grid; gap: 0.4rem;
}

.portfolio-modal-shell {
display: block; max-height: 90vh; overflow: auto;
}

.portfolio-modal-image {
height: auto; min-height: 0; aspect-ratio: 16 / 9;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-shell {
display: grid; width: 100%; height: calc(100svh - 1rem); max-width: 100%; max-height: none;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live {
width: 100%; height: 100%; min-height: 0; aspect-ratio: auto;
}

.portfolio-modal-live iframe {
height: 100%; min-height: 0;
}

.portfolio-modal-copy {
padding: 1.5rem;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy {
display: flex; flex-direction: column; align-items: flex-start; padding: 0.8rem 4rem 0.8rem 1rem;
}

.portfolio-modal:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
max-width: 100%; margin-top: 0.65rem;
}
}

/* Status-only portfolio notices stay compact and never expose project actions. */
.portfolio-modal.is-notice .portfolio-modal-shell {
display: grid;
  grid-template-columns: minmax(20rem, 1.15fr) minmax(18rem, 0.85fr);
  width: min(72rem, calc(100vw - 2rem));
  max-width: 72rem;
  height: auto;
  min-height: 0;
  max-height: min(85vh, 42rem);
  overflow: hidden;
}

.portfolio-modal.is-notice .portfolio-modal-copy {
display: flex;
  flex-direction: column;
}

.portfolio-modal.is-notice [data-portfolio-modal-link],
.portfolio-modal [data-portfolio-modal-link][hidden] {
display: none !important;
}

/* Notice projects use one deliberately composed, two-column briefing layout. */
.portfolio-modal.is-notice .portfolio-modal-shell {
display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.88fr);
  grid-template-areas:
    "kicker ."
    "title ."
    "status ."
    "image briefing";
  grid-template-rows: auto auto auto auto;
  align-items: start;
  gap: 0.55rem clamp(2rem, 4vw, 4rem);
  width: min(74rem, calc(100vw - 2rem));
  max-width: 74rem;
  max-height: min(86vh, 46rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  overflow: auto;
}

.portfolio-modal.is-notice .portfolio-modal-copy {
display: contents;
  padding: 0;
}

.portfolio-modal.is-notice .portfolio-modal-copy::before {
display: none;
}

.portfolio-modal.is-notice .portfolio-modal-copy .section-kicker {
grid-area: kicker;
  margin: 0;
}

.portfolio-modal.is-notice .portfolio-modal-copy h2 {
grid-area: title;
  max-width: none;
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 0.98;
  white-space: normal;
  overflow-wrap: anywhere;
}

.portfolio-modal.is-notice .portfolio-modal-status {
grid-area: status;
  margin: 0 0 0.65rem;
}

.portfolio-modal.is-notice .portfolio-modal-status.portfolio-modal-badges {
display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.portfolio-modal.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
grid-area: briefing;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* Keep description paragraphs readable without stretching them to the card edge. */
  justify-content: flex-start;
  gap: 2lh;
  max-width: 32rem;
  height: 100%;
  margin: 0;
  font-size: clamp(0.95rem, 1.18vw, 1.06rem);
  line-height: 1.58;
}

.portfolio-modal-description > span {
display: block;
}

.portfolio-modal.is-notice .portfolio-modal-close {
top: 0.75rem;
  right: 0.75rem;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  font-size: 0.62rem;
}

.portfolio-modal.is-notice .portfolio-modal-image {
grid-area: image;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  aspect-ratio: 16 / 9;
}

.portfolio-modal.is-notice .portfolio-modal-image img {
width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.portfolio-modal-caption {
display: flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.35rem 0.55rem;
  border-top: 1px solid rgba(0, 184, 255, 0.24);
  background: #000;
  color: rgba(246, 251, 255, 0.82);
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.portfolio-modal-caption[hidden] {
display: none;
}

/* The Re-Load portal contains an editorial image and a longer briefing. On
   compact desktop windows, stack the image above a two-column readout so the
   complete card remains visible instead of becoming a narrow, tall split. */
@media (min-width: 801px) and (max-width: 980px) {
.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-shell {
grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "title title"
      "status status"
      "image image"
      "briefing briefing";
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 0.45rem 1.25rem;
    width: min(62rem, calc(100vw - 1.25rem));
    max-width: 62rem;
    max-height: calc(100svh - 1.25rem);
    padding: 1.15rem 1.35rem;
    overflow: hidden;
}

.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-copy h2 {
font-size: clamp(1.75rem, 4vw, 2.45rem);
}

.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-status {
margin-bottom: 0.15rem;
}

.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-image {
width: min(100%, 45rem);
    height: clamp(11rem, 27vw, 14rem);
    justify-self: center;
    aspect-ratio: auto;
}

.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-image img {
height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
display: block;
    max-width: none;
    column-count: 2;
    column-gap: clamp(1.25rem, 4vw, 2.5rem);
    font-size: clamp(0.82rem, 1.45vw, 0.96rem);
    line-height: 1.38;
}

.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-description > span {
break-inside: avoid;
    margin-bottom: 0.65rem;
}
}

.portfolio-modal.is-notice .portfolio-modal-image:has(.portfolio-modal-caption:not([hidden])) {
display: grid;
  grid-template-rows: auto auto;
  aspect-ratio: auto;
}

.portfolio-modal.is-notice .portfolio-modal-image:has(.portfolio-modal-caption:not([hidden])) img {
height: auto;
}

@media (min-width: 801px) and (max-width: 980px) {
.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-image:has(.portfolio-modal-caption:not([hidden])) {
grid-template-rows: minmax(0, 1fr) auto;
    height: clamp(11rem, 27vw, 14rem);
}

.portfolio-modal.is-reload-portal.is-notice:not(.is-wide-briefing) .portfolio-modal-image:has(.portfolio-modal-caption:not([hidden])) img {
height: 100%;
    min-height: 0;
}
}

/* The Hivemind is a desktop-first interface. On phones the project opens as
   a clear project card instead of attempting to run the full workspace. */
.portfolio-modal.is-mobile-hivemind-fallback .portfolio-modal-description > span:first-child {
color: #ff4b5f;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Task Manager uses a wider visual-first briefing so interface text stays readable. */
.portfolio-modal.is-task-manager.is-notice,
.portfolio-modal.is-itemfinder.is-notice ,
.portfolio-modal.is-wide-briefing.is-notice {
padding: 0.5rem;
}

.portfolio-modal.is-task-manager.is-notice .portfolio-modal-shell,
.portfolio-modal.is-itemfinder.is-notice .portfolio-modal-shell ,
.portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-shell {
grid-template-columns: minmax(0, 1.65fr) minmax(22rem, 0.75fr);
  width: min(96rem, calc(100vw - 1rem));
  max-width: 96rem;
  max-height: calc(100svh - 1rem);
  gap: 0.6rem clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.25rem, 2vw, 2rem);
}

.portfolio-modal.is-task-manager.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status),
.portfolio-modal.is-itemfinder.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) ,
.portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
max-width: 27rem;
}


/* TravelTranslate keeps its longer briefing within the banner height. */
@media (min-width: 901px) {
  .portfolio-modal.is-traveltranslate-briefing.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
    height: var(--portfolio-briefing-height);
    max-height: var(--portfolio-briefing-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.5rem;
  }
}/* Invoice Generator opens on its full invoice, so a portrait-oriented image slot
   keeps every line and payment detail readable without clipping the document. */
.portfolio-modal.is-invoice-generator.is-notice {
padding: clamp(0.5rem, 1.5vw, 1.5rem);
}

.portfolio-modal.is-invoice-generator.is-notice .portfolio-modal-shell {
grid-template-columns: minmax(20rem, 0.72fr) minmax(19rem, 0.72fr);
  grid-template-areas:
    "kicker ."
    "title ."
    "status ."
    "image briefing";
  width: min(72rem, calc(100vw - 1rem));
  max-width: 72rem;
  max-height: calc(100svh - 1rem);
  gap: 0.55rem clamp(1.75rem, 3.5vw, 3.25rem);
  padding: clamp(1rem, 2.1vw, 1.75rem);
}

.portfolio-modal.is-invoice-generator.is-notice .portfolio-modal-image {
width: auto;
  max-width: min(31vw, 25rem);
  height: min(74vh, 42rem);
  aspect-ratio: 1055 / 1491;
  justify-self: center;
  align-self: center;
  background: #02040a;
}

.portfolio-modal.is-invoice-generator.is-notice .portfolio-modal-image img {
width: 100%;
  height: 100%;
  aspect-ratio: 1055 / 1491;
  object-fit: contain;
}

.portfolio-modal.is-invoice-generator.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
align-self: stretch;
  max-width: 30rem;
}

@media (max-width: 900px) {
.portfolio-modal.is-task-manager.is-notice .portfolio-modal-shell,
  .portfolio-modal.is-itemfinder.is-notice .portfolio-modal-shell ,
  .portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-shell {
display: block;
    width: min(46rem, calc(100vw - 1rem));
    max-height: calc(100svh - 1rem);
    overflow: auto;
}

.portfolio-modal.is-task-manager.is-notice .portfolio-modal-image,
  .portfolio-modal.is-itemfinder.is-notice .portfolio-modal-image ,
  .portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-image {
margin-top: 1rem;
}

.portfolio-modal.is-task-manager.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status),
  .portfolio-modal.is-itemfinder.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) ,
  .portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
display: block;
    height: auto;
    max-width: none;
    margin-top: 1rem;
}

.portfolio-modal.is-task-manager.is-notice .portfolio-modal-description > span + span,
  .portfolio-modal.is-itemfinder.is-notice .portfolio-modal-description > span + span ,
  .portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-description > span + span {
margin-top: 1rem;
}
}

@media (max-width: 760px) {
.portfolio-modal.is-notice .portfolio-modal-shell {
display: block;
    max-height: 92svh;
    padding: 3.25rem 1.5rem 1.5rem;
    overflow-y: auto;
}

/* The visual-first cards have their own desktop shell rules. Reset those
     on phones so every project keeps the same protected gap below CLOSE. */
  .portfolio-modal.is-task-manager.is-notice .portfolio-modal-shell,
  .portfolio-modal.is-itemfinder.is-notice .portfolio-modal-shell ,
  .portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-shell {
width: min(calc(100% - 1rem), 46rem);
    max-height: 92svh;
    padding: 3.25rem 1.5rem 1.5rem;
}

.portfolio-modal.is-notice .portfolio-modal-copy {
display: flex;
    flex-direction: column;
}

.portfolio-modal.is-notice .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
display: block;
    height: auto;
    margin-top: 1rem;
}

.portfolio-modal.is-notice .portfolio-modal-description > span + span {
margin-top: 1rem;
}

.portfolio-modal.is-notice .portfolio-modal-image {
width: min(100%, 26rem);
    margin: 1.25rem auto 0;
}

.portfolio-modal.is-task-manager.is-notice .portfolio-modal-image,
  .portfolio-modal.is-itemfinder.is-notice .portfolio-modal-image ,
  .portfolio-modal.is-wide-briefing.is-notice .portfolio-modal-image {
width: min(100%, 26rem);
    margin: 1.25rem auto 0;
}

/* Mirror the top visual breathing room below an image/caption before its
     project title begins, so mobile notice cards do not feel top-heavy. */
  .portfolio-modal.is-notice:has(.portfolio-modal-image:not([hidden])) .portfolio-modal-copy h2 {
margin-top: 1.25rem;
}

/* The invoice is a portrait document.  Do not inherit the desktop viewport
     height here: the 31vw width cap would otherwise leave a large empty frame
     around a tiny, contained image. */
  .portfolio-modal.is-invoice-generator.is-notice .portfolio-modal-image {
width: min(100%, 19rem);
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    aspect-ratio: 1055 / 1491;
}

.portfolio-modal.is-invoice-generator.is-notice .portfolio-modal-image img {
width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}
}

/* Public portfolio carousel refinement: compact TostiPost-style ring layout */
.public-portfolio {
padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3rem, 5vw, 5rem);
}

.public-portfolio-heading {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.66fr); margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.public-portfolio-heading h2 {
max-width: 12ch;
}

.portfolio-carousel {
min-height: clamp(25rem, 39vw, 34rem); border-radius: 0.2rem;
}

.portfolio-carousel::before {
top: 12%;
}

.portfolio-carousel::after {
bottom: 13%;
}

.portfolio-track {
inset: 2.7rem 0 3.4rem;
}

.portfolio-card {
width: min(35vw, 33rem); aspect-ratio: 1.55; opacity: 0; filter: grayscale(0.85) saturate(0.5) brightness(0.48); transform: translate(-50%, -50%) scale(0.52); transition: transform 0.7s cubic-bezier(.22,1,.36,1), opacity 0.6s ease, filter 0.6s ease;
}

.portfolio-card.is-center, .portfolio-card.is-near-left, .portfolio-card.is-near-right, .portfolio-card.is-far-left, .portfolio-card.is-far-right {
opacity: 1; pointer-events: auto;
}

.portfolio-card.is-center {
z-index: 5; transform: translate(-50%, -50%) scale(1); filter: grayscale(0) saturate(1.1) brightness(1);
}

.portfolio-card.is-near-left {
z-index: 4; transform: translate(calc(-50% - min(27vw, 22rem)), -50%) scale(0.7) rotate(-3deg);
}

.portfolio-card.is-near-right {
z-index: 4; transform: translate(calc(-50% + min(27vw, 22rem)), -50%) scale(0.7) rotate(3deg);
}

.portfolio-card.is-far-left {
z-index: 2; transform: translate(calc(-50% - min(47vw, 38rem)), -50%) scale(0.5) rotate(-7deg);
}

.portfolio-card.is-far-right {
z-index: 2; transform: translate(calc(-50% + min(47vw, 38rem)), -50%) scale(0.5) rotate(7deg);
}

.portfolio-card-button {
border-radius: 0.15rem;
}

.portfolio-card-image img {
opacity: 0.78;
}

.portfolio-card-meta {
right: 1.2rem; bottom: 1rem; left: 1.2rem;
}

.portfolio-arrow {
width: 2.7rem; height: 2.7rem; border-radius: 50%;
}

.portfolio-carousel-status {
margin-top: 0.55rem;
}

@media (max-width: 800px) {
.public-portfolio {
padding-top: 3rem; padding-bottom: 3.5rem;
}

.public-portfolio-heading {
margin-bottom: 1.3rem;
}

.portfolio-carousel {
min-height: 25rem;
}

.portfolio-track {
inset: 2.5rem 0 3.2rem;
}

.portfolio-card {
width: min(68vw, 25rem);
}

.portfolio-card.is-near-left {
transform: translate(calc(-50% - 43vw), -50%) scale(0.62) rotate(-3deg);
}

.portfolio-card.is-near-right {
transform: translate(calc(-50% + 43vw), -50%) scale(0.62) rotate(3deg);
}

.portfolio-card.is-far-left {
transform: translate(calc(-50% - 72vw), -50%) scale(0.45) rotate(-7deg);
}

.portfolio-card.is-far-right {
transform: translate(calc(-50% + 72vw), -50%) scale(0.45) rotate(7deg);
}

.portfolio-card-meta {
right: 0.8rem; bottom: 0.75rem; left: 0.8rem;
}

.portfolio-card-meta small, .portfolio-card-meta em {
font-size: 0.54rem;
}

.portfolio-card-meta strong {
font-size: 1rem;
}
}

/* Portfolio content hierarchy refinement */
.public-portfolio {
padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.public-portfolio-heading {
margin-bottom: clamp(0.8rem, 2vw, 1.5rem);
}

.public-portfolio-heading > p {
margin-bottom: 0;
}

.portfolio-carousel {
min-height: clamp(22rem, 34vw, 29rem); border-color: rgba(0, 184, 255, 0.13); background: transparent;
}

.portfolio-carousel::before {
top: 10%; opacity: 0.45;
}

.portfolio-carousel::after {
bottom: 10%; opacity: 0.35;
}

.portfolio-track {
inset: 3.7rem 0 3.8rem;
}

.portfolio-active-title {
position: absolute; top: 1rem; left: 50%; z-index: 8; min-width: min(78vw, 34rem); transform: translateX(-50%); text-align: center; pointer-events: none;
}

.portfolio-active-title span {
display: block; color: var(--blue-hot); font-family: "Courier New", monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}

.portfolio-active-title h3 {
margin: 0.25rem 0 0; color: var(--blue-hot); font-size: clamp(1.65rem, 3.4vw, 3.2rem); line-height: 0.95; text-shadow: 0 0 22px rgba(0, 184, 255, 0.42);
}

.portfolio-card-meta {
display: none;
}

.portfolio-card-button::after {
background: linear-gradient(180deg, rgba(1, 5, 14, 0.03), rgba(1, 5, 14, 0.2));
}

.portfolio-card-image img {
opacity: 0.86;
}

.portfolio-carousel-status {
margin-top: 0.45rem;
}

.portfolio-carousel-status::before {
content: ""; flex: 1; order: 1;
}

.portfolio-carousel-status span:first-child {
order: 0;
}

.portfolio-carousel-status span:last-child {
order: 2;
}

@media (max-width: 800px) {
.public-portfolio {
padding-top: 2rem; padding-bottom: 2.5rem;
}

.portfolio-carousel {
min-height: 22rem;
}

.portfolio-track {
inset: 3.6rem 0 3.4rem;
}

.portfolio-active-title {
top: 0.85rem;
}

.portfolio-active-title h3 {
font-size: 1.65rem;
}
}

.portfolio-active-description {
max-width: min(44rem, 78vw); margin: 0.7rem auto 0; color: var(--muted); font-size: clamp(0.88rem, 1.25vw, 1.05rem); line-height: 1.35; text-align: center;
}

/* A sliding bitmap needs only a transform and opacity transition. Animating
   filter chains on the whole card repeatedly reallocates large GPU surfaces. */
/* Portfolio showcase polish */
.public-portfolio {
padding-top: clamp(1.8rem, 3vw, 3rem); padding-bottom: clamp(1.8rem, 3vw, 3rem);
}

.public-portfolio-heading {
display: block; margin-bottom: clamp(0.25rem, 0.6vw, 0.55rem);
}

.public-portfolio-heading h2 {
max-width: none; margin: 0; font-size: clamp(2.35rem, 5.8vw, 5.5rem); line-height: 0.95; white-space: nowrap;
}

.public-portfolio-heading .section-kicker {
margin-bottom: 0.25rem;
}

.portfolio-heading-sub {
margin: 0.12rem 0 0;
  color: var(--blue-hot);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.portfolio-carousel {
border: 0; box-shadow: none;
}

.portfolio-carousel::before, .portfolio-carousel::after {
opacity: 0.18;
}

.portfolio-carousel {
min-height: clamp(23rem, 31vw, 32rem);
}

.portfolio-track {
inset: 2.35rem 0 0.8rem;
}

.portfolio-active-title {
top: 0.35rem; z-index: 12;
}

.portfolio-active-title small {
display: block; margin-bottom: 0.2rem; color: rgba(246, 251, 255, 0.48); font-family: "Courier New", monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
}

.portfolio-active-description {
margin-top: 0.25rem;
}

.portfolio-card {
width: min(50vw, 48rem); aspect-ratio: 16 / 9;
}

.portfolio-active-title span {
font-size: 0.76rem; letter-spacing: 0.18em;
}

.portfolio-active-title h3 {
display: none;
}

.portfolio-active-description {
position: relative; z-index: 13; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0.45rem 0.6rem; margin-top: 0.55rem;
}

.portfolio-active-description-badges {
  display: flex; flex: 0 0 100%; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.36rem;
}

.portfolio-badge {
padding: 0.22rem 0.44rem; border: 1px solid rgba(172, 193, 223, 0.32); background: rgba(13, 24, 43, 0.64); color: rgba(228, 237, 249, 0.78); font-family: "Courier New", monospace; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.11em; line-height: 1; text-transform: uppercase;
}

.portfolio-badge.is-digital-empire {
border-color: rgba(0, 184, 255, 0.58); background: rgba(0, 87, 255, 0.14); color: var(--blue-hot);
}

.portfolio-badge.is-client {
border-color: rgba(238, 72, 230, 0.62); background: rgba(147, 30, 149, 0.16); color: #ef7cf2;
}

.portfolio-badge.is-application {
border-color: rgba(55, 228, 255, 0.62); background: rgba(0, 126, 160, 0.15); color: #5ceaff;
}

.portfolio-badge.is-website {
border-color: rgba(139, 202, 255, 0.62); background: rgba(26, 108, 180, 0.15); color: #9dd5ff;
}

.portfolio-badge.is-system {
border-color: rgba(128, 156, 255, 0.58); background: rgba(70, 80, 186, 0.14); color: #a9bdff;
}

.portfolio-badge.is-workflow {
border-color: rgba(187, 211, 236, 0.42); color: #d8e7f7;
}

.portfolio-badge.is-work-in-progress {
border-color: rgba(246, 214, 118, 0.58); background: rgba(125, 93, 13, 0.14); color: #ffe48a;
}

.portfolio-badge.is-data-management {
border-color: rgba(109, 225, 191, 0.54); background: rgba(15, 117, 91, 0.14); color: #84f0cd;
}

.portfolio-badge.is-internal-use {
border-color: rgba(55, 228, 255, 0.62); background: rgba(0, 126, 160, 0.15); color: #5ceaff;
}

/* Hivemind has a dedicated 16:9 crop so the complete brain map stays readable in the carousel. */
.portfolio-card[data-project="hivemind"] .portfolio-card-image img {
opacity: 1 !important;
  filter: contrast(1.06) saturate(1.2) brightness(1.08);
}

.portfolio-card[data-project="hivemind"] .portfolio-card-button::after {
background: linear-gradient(180deg, rgba(1, 5, 14, 0.015), rgba(1, 5, 14, 0.08));
}

.portfolio-active-description-body {
flex-basis: 100%; max-width: min(44rem, 78vw); white-space: pre-line;
}

@media (max-width: 760px) {
  .portfolio-modal.is-mobile-hivemind-fallback .portfolio-modal-copy .portfolio-modal-status.portfolio-modal-badges {
    display: grid; grid-template-columns: repeat(2, max-content);
    justify-content: center; justify-items: center;
    width: 100%; max-width: 100%; min-width: 0;
    gap: .5rem; padding-inline: .25rem; box-sizing: border-box;
  }
  .portfolio-modal.is-mobile-hivemind-fallback .portfolio-modal-badges .portfolio-badge {
    white-space: nowrap; font-size: clamp(.5rem, 2.2vw, .62rem);
    letter-spacing: .04em;
  }
}

.portfolio-active-description[data-project="traveltranslate"],
.portfolio-active-description[data-project="reload-health"],
.portfolio-active-description[data-project="hivemind"],
.portfolio-active-description[data-project="invoice"],
.portfolio-active-description[data-project="reload-portal"] {
  max-width: min(72rem, 92vw);
}/* Keep the longer portfolio briefs to their two intentional sentence rows. */
.portfolio-active-description-body[data-project="traveltranslate"],
.portfolio-active-description-body[data-project="reload-health"],
.portfolio-active-description-body[data-project="hivemind"],
.portfolio-active-description-body[data-project="invoice"],
.portfolio-active-description-body[data-project="reload-portal"] {
  max-width: min(72rem, 92vw);
}

.portfolio-card-button::after {
z-index: 2;
}

.portfolio-card-button::before {
content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid transparent; box-shadow: none; pointer-events: none;
}

.portfolio-card-button,
.portfolio-card.is-center .portfolio-card-button,
.portfolio-card.is-center .portfolio-card-button:hover {
border-color: transparent;
}

.portfolio-card.is-center .portfolio-card-button {
animation: none;
}

.portfolio-card.is-center .portfolio-card-button::before {
animation: none;
}

.portfolio-card::after {
content: ""; position: absolute; inset: -1px; z-index: 8; box-sizing: border-box; border: 1px solid transparent; opacity: 0; pointer-events: none;
}

.portfolio-card.is-center::after {
animation: portfolio-card-glow 8.2s ease-in-out 0.5s both;
}

.portfolio-card.is-near-left, .portfolio-card.is-near-right {
z-index: 4; opacity: 0.58; filter: grayscale(0.52) saturate(0.68) brightness(0.64); pointer-events: auto; transform: translate(calc(-50% - min(36vw, 32rem)), -50%) scale(0.58) rotate(-3deg);
}

.portfolio-card.is-near-right {
transform: translate(calc(-50% + min(36vw, 32rem)), -50%) scale(0.58) rotate(3deg);
}

.portfolio-card.is-far-left, .portfolio-card.is-far-right {
z-index: 2; opacity: 0.22; filter: grayscale(0.85) saturate(0.35) brightness(0.4);
}

.portfolio-card.is-far-left {
transform: translate(calc(-50% - min(52vw, 44rem)), -50%) scale(0.38) rotate(-6deg);
}

.portfolio-card.is-far-right {
transform: translate(calc(-50% + min(52vw, 44rem)), -50%) scale(0.38) rotate(6deg);
}

.portfolio-card.is-center .portfolio-card-image img {
opacity: 0.94;
}

.portfolio-card[data-project="itemfinder"] .portfolio-card-image {
overflow: hidden; background: #02040a;
}

.portfolio-card[data-project="itemfinder"] .portfolio-card-image::before {
content: ""; position: absolute; inset: -1.5rem; background: var(--portfolio-backdrop) center / cover no-repeat; filter: blur(1rem) saturate(1.2) brightness(0.52); opacity: 0.72; transform: scale(1.08);
}

.portfolio-card[data-project="itemfinder"] .portfolio-card-image img {
position: relative; z-index: 1; object-fit: contain;
}

.portfolio-card.is-center {
z-index: 7; transform: translate(-50%, -50%) scale(1) !important;
}

/* The active project name belongs above the visual, never inside the card. */
.portfolio-active-title {
position: relative;
  top: auto;
  left: auto;
  z-index: 12;
  min-width: 0;
  margin: 0 auto 0.35rem;
  transform: none;
  text-align: center;
  pointer-events: none;
}

.public-portfolio .portfolio-active-title,
.public-portfolio .portfolio-carousel {
top: -0.5rem;
}

.public-portfolio .portfolio-active-title {
margin-bottom: -0.2rem;
  transform: translateY(0.55rem);
}

.public-portfolio .portfolio-active-title small {
margin-bottom: 0.1rem;
  font-size: 0.68rem;
}

.public-portfolio .portfolio-active-title span {
font-size: clamp(0.88rem, 1.15vw, 1.05rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.1;
}

.public-portfolio .portfolio-track {
transform: translateY(-0.75rem);
}

.public-portfolio .portfolio-card {
width: min(48vw, 46rem);
}

.public-portfolio .portfolio-active-description {
margin-top: -1.3rem;
}

@keyframes portfolio-card-glow {
0%, 100% { border-color: transparent; box-shadow: 0 0 0 rgba(0, 87, 255, 0); opacity: 0; }
  13.6% { border-color: rgba(0, 184, 255, 0.9); box-shadow: 0 0 0.65rem rgba(0, 184, 255, 0.36), 0 0 1.8rem rgba(0, 87, 255, 0.32); opacity: 1; }
  78.8% { border-color: rgba(0, 184, 255, 0.82); box-shadow: 0 0 0.55rem rgba(0, 184, 255, 0.28), 0 0 1.5rem rgba(0, 87, 255, 0.24); opacity: 0.88; }
}

.portfolio-arrow {
width: 2rem; height: 2rem; border: 0; border-radius: 0; background: transparent; font-size: 2.2rem;
}

.portfolio-arrow:hover {
background: transparent; color: white; text-shadow: 0 0 1rem rgba(0, 184, 255, 0.9);
}

.portfolio-carousel-status {
justify-content: center; margin-top: 0.22rem;
}

.portfolio-carousel-status span {
color: var(--blue-hot);
}

/* Let the showcase claim the spare vertical room while keeping every preview at 16:9. */
@media (min-width: 801px) {
.public-portfolio {
--portfolio-carousel-height: clamp(23rem, min(36vw, calc(100svh - 20rem)), 35rem);
}

.public-portfolio .portfolio-carousel {
height: var(--portfolio-carousel-height);
    min-height: var(--portfolio-carousel-height);
}

.public-portfolio .portfolio-card {
width: auto;
    height: min(calc(var(--portfolio-carousel-height) - 3.15rem), 34vw);
    max-width: 58vw;
}
}

@media (min-width: 801px) {
.public-portfolio-heading h2 {
transform: translateX(-0.3rem);
}
}

@media (max-width: 800px) {
.public-portfolio-heading h2 {
font-size: clamp(2rem, 10vw, 3.5rem); white-space: normal;
}

.portfolio-heading-sub {
margin-top: 0.12rem;
}

.portfolio-carousel {
min-height: 23rem;
}

.portfolio-track {
inset: 2.35rem 0 0.9rem;
}

.portfolio-card {
width: min(76vw, 28rem);
}

.portfolio-card.is-near-left {
transform: translate(calc(-50% - 42vw), -50%) scale(0.54) rotate(-3deg);
}

.portfolio-card.is-near-right {
transform: translate(calc(-50% + 42vw), -50%) scale(0.54) rotate(3deg);
}

.portfolio-card.is-far-left {
transform: translate(calc(-50% - 70vw), -50%) scale(0.34) rotate(-6deg);
}

.portfolio-card.is-far-right {
transform: translate(calc(-50% + 70vw), -50%) scale(0.34) rotate(6deg);
}

.portfolio-active-description {
display: block;
}

.portfolio-active-description-badges {
display: flex; margin-bottom: 0.3rem;
}
}

/* Authored landing views: keep the opening, studio and final transmissions whole on desktop. */
@media (min-width: 901px) {
.hero {
/* The opening is a single, deliberate viewport composition.  Keep every
       hero element inside it instead of letting the tall identity art extend
       the panel and require an extra scroll. */
    height: 100svh;
    min-height: 100svh;
    padding-top: clamp(5.4rem, 7.2vh, 6.8rem);
    padding-bottom: clamp(2.2rem, 4vh, 4rem);
    overflow: hidden;
}

.split-title {
font-size: clamp(4rem, 10.4vw, 9.8rem);
}

.hero-statement {
margin: 1.05rem 0 1.25rem;
}

.identity-core {
width: min(100%, clamp(23rem, 31vw, 32rem));
    height: min(100%, 44rem);
    aspect-ratio: 4 / 5;
}

.identity-core img {
width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* Equal top/bottom crop preserves the face and the surrounding blue frame. */
    object-position: center;
}

.story-section {
min-height: 100svh;
    padding-top: clamp(4.6rem, 6.2vh, 6rem);
    padding-bottom: clamp(2.2rem, 4vh, 4rem);
}

.story-section h2 {
max-width: 15ch;
    font-size: clamp(2.3rem, 3.65vw, 4.45rem);
    line-height: 0.94;
}

.story-copy p {
font-size: clamp(0.94rem, 1.16vw, 1.12rem);
    line-height: 1.42;
}

.project-row {
min-height: 3.05rem;
    gap: 0.5rem;
}

.project-row p {
font-size: 0.92rem;
    line-height: 1.3;
}
}

/* Ultrawide is a distinct composition, not simply a stretched desktop layout. */
@media (min-width: 1600px) and (min-aspect-ratio: 19 / 9) {
.section-panel {
padding-right: clamp(1rem, 3vw, 2rem);
    padding-left: clamp(1rem, 3vw, 2rem);
}

.hero {
grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    gap: clamp(3rem, 5.2vw, 8rem);
}

.split-title {
max-width: 12ch;
    font-size: clamp(4.5rem, 8.6vw, 10.5rem);
}

.hero-statement {
max-width: 38rem;
    font-size: clamp(1.1rem, 1.35vw, 1.42rem);
}

.identity-core {
width: min(100%, 30rem);
}

.story-grid {
grid-template-columns: minmax(30rem, 0.9fr) minmax(38rem, 1.1fr);
    gap: clamp(3rem, 4.5vw, 6.5rem);
}

.story-section h2 {
max-width: 17ch;
    font-size: clamp(3rem, 3.35vw, 5rem);
}

.studio-stack {
gap: 0.9rem;
}

.biopic-section {
grid-template-columns: minmax(33rem, 0.97fr) minmax(40rem, 1.03fr);
    gap: clamp(2.25rem, 3.8vw, 5.5rem);
    align-items: start;
    padding-top: clamp(3rem, 4.5vh, 4.75rem);
}

.bio-copy p {
max-width: 47rem;
    font-size: clamp(0.98rem, 1.08vw, 1.12rem);
    line-height: 1.43;
}

.artist-section,
  .games-section {
grid-template-columns: minmax(31rem, 0.86fr) minmax(42rem, 1.14fr);
    gap: clamp(3rem, 5vw, 7rem);
}

.artist-copy h2,
  .games-copy h2 {
font-size: clamp(3rem, 4vw, 5.7rem);
}

.album-story {
grid-template-columns: minmax(27rem, 0.8fr) minmax(42rem, 1.2fr);
    column-gap: clamp(3rem, 5vw, 7rem);
}

.album-cover {
width: min(100%, 34rem);
}

.song-chapter {
min-height: 45vh;
}

.public-portfolio-heading {
max-width: min(100%, 112rem);
}

.portfolio-carousel {
min-height: min(35rem, 60vh);
}

.portfolio-card {
width: min(44vw, 52rem);
}

.portfolio-track {
inset: 2.35rem 0 2.1rem;
}
}

/* The shared anchor now starts below the fixed header. Keep the section
   markers there, but reclaim the legacy top padding inside the first content
   panels so their compositions begin on the same tight visual grid. */
@media (min-width: 901px) {
#studios.story-section,
  #reload.biopic-section,
  #asteroid-factory.artist-section {
padding-top: clamp(1.75rem, 3.5vh, 3rem);
}

#projects .project-row {
/* Use the available lower stage instead of leaving an oversized footer
       beneath the fifth service card. */
    min-height: clamp(4.8rem, 7.1vh, 5.55rem);
    padding: clamp(0.52rem, 0.82vh, 0.68rem);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.7rem;
    row-gap: clamp(0.12rem, 0.3vh, 0.24rem);
}

#projects .project-row h3 {
align-self: start;
    margin-top: 0.03rem;
    line-height: 1.04;
}

#projects .project-row p {
align-self: end;
    margin-top: 0;
    margin-bottom: 0.03rem;
    line-height: 1.36;
}

#projects .project-status {
align-self: center;
    margin-top: 0;
}



#public-portfolio.public-portfolio {
padding-top: clamp(1.35rem, 2.75vh, 2.25rem);
}

/* Album 06 keeps its dedicated chapter landmark; reduce only its internal
     opening padding so the transmission begins on the shared content grid. */
  #all2dnb.album-story {
padding-top: clamp(0.75rem, 1.2vw, 1.2rem);
}

/* Tall visual stacks otherwise centre their copy too low in the panel. */
  #studios .story-grid {
grid-template-columns: minmax(18rem, 0.7fr) minmax(28rem, 1.3fr);
    gap: clamp(1.5rem, 3vw, 4rem);
    transform: translateY(clamp(-3.5rem, -4.5vh, -2.25rem));
}

/* Keep the editorial copy fixed while every studio image shifts into the
     marker field. The number 01 is a HUD layer, so it may intentionally sit
     over the right edge of the lead image. */
  #studios .studio-stack {
/* The authored HUD overlap needs an equal amount of reserved room
       on the far edge; otherwise the shifted image wall touches the viewport. */
    width: calc(100% - 32px);
    transform: translateX(32px);
}

/* The studio labels use the quiet strip above each white heading, leaving
     the heading composition untouched and reserving the lower edge for copy. */
  /* Each studio image keeps its authored height. The copy is a contiguous
     black footer inside the same card, rather than a detached element below. */
  #studios .studio-card {
--studio-description-footer: 2.8rem;
    overflow: hidden;
    min-height: 13.4rem;
    margin-bottom: 0;
    padding: 0;
}

#studios .studio-card-large {
--studio-description-footer: 1.75rem;
    min-height: 14.2rem;
}

#studios .studio-card img,
  #studios .studio-card::before {
bottom: var(--studio-description-footer);
}

#studios .studio-card img {
height: calc(100% - var(--studio-description-footer));
}

/* Sound Labs keeps its caption inside the photo field. Its saved footer
     height is reassigned to the four smaller studio visuals below. */
  #studios .studio-card-large img {
bottom: 0;
    height: 100%;
    object-position: center calc(50% - 13px);
}

#studios .studio-card-large::before {
bottom: 0;
}

#studios .studio-card-large p {
background: #000;
}

#studios .studio-card div {
inset: 0;
    max-width: none;
    width: 100%;
    height: 100%;
}

#studios .studio-card span {
position: absolute;
    top: 0.2rem;
    left: 0.525rem;
    padding: 0.08rem 0.28rem;
    background: #000;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.34);
}

#studios .studio-card h3 {
margin: 1.05rem 0.525rem 0;
}

#studios .studio-card p {
position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--studio-description-footer);
    max-width: none;
    margin: 0;
    padding: 0.34rem 0.525rem;
    background: #000 !important;
    box-shadow: none;
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: nowrap;
    transform: none;
}

#asteroid-factory .artist-copy {
transform: translateY(clamp(-1.5rem, -2.5vh, -1rem));
}

#asteroid-factory .album-art {
transform: translateX(clamp(4rem, 7vw, 8rem)) rotate(1.5deg);
}

/* Section 05 starts beneath a fixed header. Extend its atmospheric beam
     field behind that boundary so no empty black band appears before the
     blue and magenta signal effects, while its copy clears the header. */
  #asteroid-factory.artist-section {
padding-top: clamp(2.4rem, 4.35vh, 3.6rem);
}

#asteroid-factory.artist-section::after {
inset: clamp(-6rem, -9vh, -4.5rem) -10% clamp(-6rem, -9vh, -4.5rem) 30%;
    height: auto;
    transform: translateY(clamp(-2.25rem, -4vh, -1.5rem)) skewY(-8deg);
}

/* Section labels are HUD data, not background decoration. On the Re-Load
     visual, keep 05 in front of the image while leaving all pointer input
     available to the content beneath it. */
  #asteroid-factory.section-panel::before {
z-index: 3;
    pointer-events: none;
}
}

/* A two-column image wall becomes too compressed on compact desktops. Keep
   the intro rail, but turn the studio cards into a deliberately scrollable
   single column so every frame and caption remains fully readable. */
@media (min-width: 901px) and (max-width: 1200px) {
#studios.story-section {
align-items: start;
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 4rem;
}

#studios .story-grid {
align-items: start;
    transform: none;
}

#studios .studio-stack {
grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
}

#studios .studio-card,
  #studios .studio-card-large {
--studio-description-footer: 3.2rem;
    min-height: 14.8rem;
    grid-column: 1;
}

#studios .studio-card p {
min-height: var(--studio-description-footer);
    white-space: normal;
}
}

@media (min-width: 901px) {
#all2dnb.album-story {
/* Give the evolving track artwork priority over the static album cover:
       this balance applies to every chapter, not only the active one. */
    grid-template-columns: minmax(16rem, 0.76fr) minmax(30rem, 1.24fr);
    grid-template-rows: minmax(calc(100vh - 5.5rem), auto) auto;
    padding-top: 0;
}

#all2dnb .album-cover {
width: min(100%, 28rem);
}

/* Keep the fixed album cover centred within the chapter field once it
     becomes sticky. The viewport-aware offset prevents it from jutting into
     the transmission above on compact desktop heights. */
  #all2dnb .album-sticky {
top: clamp(8.5rem, 15vh, 12.5rem);
}

#all2dnb .song-chapter {
grid-template-columns: minmax(0, 1fr) minmax(15rem, 38%);
}

#all2dnb.section-panel::before {
z-index: 5;
    pointer-events: none;
}

#all2dnb .song-chapters {
padding-top: 12vh;
}
}

@keyframes album-signal-spin {
to { transform: rotate(360deg); }
}

@keyframes album-signal-breathe {
0%, 100% { transform: scale(0.96); opacity: 0.74; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes album-wave-pulse {
from { transform: scaleY(0.48); opacity: 0.38; }
  to { transform: scaleY(1); opacity: 0.92; }
}

@keyframes album-entry-glow {
0%, 100% { text-shadow: 0 0 0.65rem rgba(25, 167, 255, 0.38); }
  50% { text-shadow: 0 0 1.7rem rgba(25, 167, 255, 0.98), 0 0 2.8rem rgba(255, 54, 244, 0.28); }
}

@keyframes album-entry-chevron {
0%, 22%, 100% { opacity: 0.18; text-shadow: 0 0 0.35rem rgba(255, 54, 244, 0.18); }
  8%, 15% { opacity: 1; text-shadow: 0 0 1.15rem rgba(255, 54, 244, 0.95), 0 0 2rem rgba(25, 167, 255, 0.44); }
}

/* Mobile server readout: hold the game art in a dedicated left rail and keep
   the complete server readout centred beside it instead of stacking below. */
@media (max-width: 760px) {
#servers .server-card {
grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "art title"
      "description description"
      "status status";
    align-items: center;
    gap: 0.28rem 0.85rem;
    padding: 0.85rem 1rem;
}

#servers .server-card .server-game-art {
grid-area: art;
    grid-row: auto;
    width: 4.5rem;
    height: 4.5rem;
    justify-self: center;
    align-self: center;
}

#servers .server-card h3 {
grid-area: title;
    margin: 0;
    align-self: center;
}

#servers .server-card p {
grid-area: description;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 0;
    align-self: center;
}

#servers .server-card strong {
grid-area: status;
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
}
}

/* The contact bar used a desktop eye-line lift on phones as well, which cut
   through the ASCII wordmark. Restore it to the natural flow below the mark
   and extend only its right edge to the page rail. */
@media (max-width: 640px) {
#projects .mobile-inline-break {
display: none;
}
}

/* Phone carousel: the active project is the focal object, not a timid
   thumbnail. The neighbouring cards remain peripheral while its centre card
   gains the requested 30% visual weight. */
@media (max-width: 800px) {
.portfolio-card.is-center {
transform: translate(-50%, -50%) scale(1.56) !important;
}

/* The Sound Labs source has a dark ceiling. Lift its crop slightly so the
     live-blue room reaches the top card edge instead of reading as a black
     band above the preview. */
  #studios .studio-card-large img {
object-position: center 34%;
}
}

.mobile-gap-space {
display: none;
}

/* Static-host deterrence layer. Keep form controls usable, but remove the
   browser's casual selection/drag/print affordances from authored media. */
.host-asset-guard body,
.host-asset-guard main,
.host-asset-guard .portfolio-modal {
-webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.host-asset-guard input,
.host-asset-guard textarea,
.host-asset-guard select,
.host-asset-guard [contenteditable="true"],
.host-asset-guard [role="textbox"] {
-webkit-user-select: text;
  user-select: text;
}

.host-asset-guard img,
.host-asset-guard video,
.host-asset-guard canvas,
.host-asset-guard iframe,
.host-asset-guard .asset-protected {
-webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media print {
.host-asset-guard body {
display: none !important;
}

.host-asset-guard::after {
content: "DIGITAL EMPIRE — protected presentation";
    display: grid;
    min-height: 100vh;
    place-items: center;
    background: #000;
    color: #19a7ff;
    font: 700 14pt "Courier New", monospace;
    letter-spacing: 0.12em;
}
}

@media (max-width: 900px) {
#all2dnb .mobile-gap-space {
display: inline;
}
}

/* Removed an invalid, browser-ignored patch block beginning with a stray +. */
/* 2026-08-27 — final 21:9 art-direction refinement ------------------------- */
@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
#reload.biopic-section {
grid-template-columns: minmax(31rem, 0.7fr) minmax(54rem, 1.3fr);
    gap: clamp(3rem, 4.5vw, 6rem);
    align-items: start;
    min-height: auto;
}

}

/* Re-Load reading rhythm and background-film integration. */
#reload .section-kicker { margin:0 0 clamp(.28rem,.6vh,.52rem); }
#reload .bio-copy h2 { margin:0; }
#reload .bio-subtitle { margin:clamp(.1rem,.3vh,.24rem) 0 clamp(.38rem,.75vh,.65rem) !important; }
#reload .bio-copy .bio-intro { margin-bottom:clamp(.72rem,1.35vh,1.15rem); }
#reload .bio-copy .bio-context { margin-bottom:clamp(.8rem,1.55vh,1.3rem); }
#reload .bio-copy .bio-origin { margin-top:0; }

#reload .bio-video-bg {
  inset:1% -7% 4% -7%;
  opacity:.31;
  filter:brightness(1.12) saturate(1.3) contrast(1.22);
}
#reload .bio-video-bg::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.58) 5%, transparent 13%, transparent 87%, rgba(0,0,0,.58) 95%, rgba(0,0,0,.96) 100%),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 16%, transparent 84%, rgba(0,0,0,.3)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 8px);
}

/* Hosted ultrawide normalization -------------------------------------------------
   Keep the authored 16:9 compositions intact on 21:9/32:9 stages. The surrounding
   viewport becomes breathing room instead of stretching every internal grid. */
@media (min-width: 1600px) and (min-aspect-ratio: 21 / 10) {
#studios .story-grid,
  #reload.biopic-section,
  #asteroid-factory.artist-section,
  #all2dnb.album-story {
box-sizing: border-box;
    width: min(100%, 120rem);
    margin-inline: auto;
}

/* 01 — preserve the complete studio frames inside a 1920-style stage. */
  #studios .story-grid {
grid-template-columns: minmax(25rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 3vw, 3.75rem);
}

#studios .studio-stack {
width: 100%;
    transform: none;
}

#studios .studio-card p {
white-space: normal;
}

/* 04 — one cinematic viewport instead of three disconnected scroll slices. */
  #reload.biopic-section {
grid-template-columns: minmax(32rem, 0.92fr) minmax(43rem, 1.08fr);
    gap: clamp(2rem, 3vw, 4rem);
    min-height: calc(100svh - 1px);
    padding-top: clamp(1rem, 2vh, 1.75rem);
    padding-bottom: clamp(1rem, 2vh, 1.75rem);
    align-items: center;
}

#reload .bio-copy h2 {
margin-bottom: 0.45rem;
    font-size: clamp(3.5rem, 4.1vw, 5.25rem);
}

#reload .bio-copy h3 {
margin: 0 0 0.5rem;
}

#reload .bio-copy p {
max-width: 46rem;
    margin-bottom: clamp(0.35rem, 0.65vh, 0.6rem);
    font-size: clamp(0.72rem, 0.72vw, 0.94rem);
    line-height: 1.28;
}

#reload .bio-status {
margin-top: 0.6rem;
}

#reload .bio-collage {
min-height: 0;
    height: min(78svh, 49rem);
}

#reload .bio-video-bg {
inset: 1% -2% 4% 2%;
}

#reload .bio-video-bg video {
object-fit: cover;
}

/* 05 — cancel the legacy rightward shove that cuts the cover off-screen. */
  #asteroid-factory.artist-section {
grid-template-columns: minmax(31rem, 0.88fr) minmax(31rem, 1.12fr);
    gap: clamp(3rem, 4vw, 6rem);
    padding-inline: clamp(2rem, 3vw, 4rem);
}

#asteroid-factory .album-art {
width: min(36rem, 68svh);
    max-width: 100%;
    justify-self: end;
    transform: rotate(1.5deg);
}

#asteroid-factory .environment-visual-logo {
width: min(60rem, 48vw);
    height: min(42rem, 72svh);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(2deg);
}

/* 06 — scale the mural by its own ratio and rebalance cover/card space. */
  #all2dnb.album-story {
grid-template-columns: minmax(24rem, 0.9fr) minmax(38rem, 1.1fr);
    column-gap: clamp(3rem, 4vw, 5rem);
}

#all2dnb .album-cover {
width: min(34rem, 62svh);
}

#all2dnb .song-chapters {
width: 100%;
    padding-top: 8vh;
}

#all2dnb .song-chapter {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 35%);
}

#all2dnb .environment-visual-skull video {
transform: scale(2);
}
}

@keyframes host-contact-signal-drift {
from { transform: translate3d(-3.5%, -1.5%, 0); }
  to { transform: translate3d(3.5%, 1.5%, 0); }
}

/* Live V2 ultrawide refinement -------------------------------------------------
   These rules intentionally begin at 21:9. Regular desktop and mobile layouts
   keep their established composition. */
@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
/* 01: stop the studio wall before the fixed section marker. */
  #studios .studio-stack {
width: calc(100% - clamp(5rem, 6vw, 9rem));
    justify-self: start;
}

/* 04: give the copy a calm reading rail and restore the collage as one
     coherent, height-bound composition instead of a stretched grid. */
  #reload.biopic-section {
grid-template-columns: minmax(29rem, 0.72fr) minmax(46rem, 1.28fr);
    gap: clamp(2.5rem, 4vw, 5rem);
}

#reload .bio-copy,
  #reload .bio-copy p {
max-width: 39rem;
}

#reload .bio-collage {
display: block;
    position: relative;
    width: 100%;
    height: min(78svh, 49rem);
    min-height: 40rem;
}

#reload .bio-logo-strip {
position: absolute;
    top: 0;
    right: 0;
    left: 5%;
    width: auto;
    height: clamp(4.6rem, 8svh, 6.25rem);
}

#reload .bio-photo-rave {
position: absolute;
    top: clamp(5.4rem, 10svh, 7rem);
    left: 2%;
    width: 59%;
}

#reload .bio-photo-party {
position: absolute;
    top: clamp(5.4rem, 10svh, 7rem);
    right: 0;
    left: auto;
    width: 36%;
}

#reload .bio-photo-camera {
position: absolute;
    top: clamp(21rem, 42svh, 27rem);
    left: 43%;
    width: 28%;
    transform: translateX(-50%) rotate(-2deg);
}

#reload .bio-photo-mask {
position: absolute;
    bottom: clamp(8.5rem, 16svh, 11rem);
    left: 3%;
    width: 25%;
    transform: rotate(-4deg);
}

#reload .bio-quote {
position: absolute;
    right: 4%;
    bottom: clamp(5rem, 9svh, 6.5rem);
    left: 4%;
    margin: 0;
}

#reload .reload-links {
position: absolute;
    right: 2%;
    bottom: 0.4rem;
    left: 2%;
}
}

/* Host export final cascade sync. This block stays last because the hosted
   stylesheet carries deployment-only ultrawide rules after the shared build. */
@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
#reload.biopic-section {
grid-template-columns: minmax(31rem, 0.7fr) minmax(54rem, 1.3fr); gap: clamp(3rem, 4.5vw, 6rem); align-items: start; min-height: auto; padding-block: clamp(2rem, 3.5vh, 3.5rem);
}

#reload .bio-copy,
  #reload .bio-copy p {
max-width: 40rem;
}

#reload .bio-collage {
display: grid; position: relative; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: clamp(5rem, 8svh, 6.75rem) auto auto auto auto; gap: clamp(0.9rem, 1.15vw, 1.4rem); width: 100%; height: auto; min-height: 0; align-content: start; overflow: visible;
}

#reload .bio-logo-strip,
  #reload .bio-photo,
  #reload .bio-quote,
  #reload .reload-links {
position: relative; inset: auto; width: 100%; margin: 0; transform: none;
}

#reload .bio-logo-strip {
grid-column: 1 / -1; grid-row: 1; height: 100%;
}

#reload .bio-photo-rave {
grid-column: 1 / 8; grid-row: 2; aspect-ratio: 16 / 9;
}

#reload .bio-photo-party {
grid-column: 8 / 13; grid-row: 2 / span 2; height: 100%; min-height: 0; aspect-ratio: auto;
}

#reload .bio-photo-mask {
grid-column: 1 / 5; grid-row: 3; aspect-ratio: 4 / 3;
}

#reload .bio-photo-camera {
grid-column: 5 / 8; grid-row: 3; aspect-ratio: 4 / 3;
}

#reload .bio-photo img {
width: 100%; height: 100%; object-fit: cover;
}

#reload .bio-quote {
grid-column: 1 / -1; grid-row: 4; padding: 0.8rem 1rem;
}

#reload .reload-links {
grid-column: 1 / -1; grid-row: 5;
}
}

/* Canonical final cascade: section 04 + cinematic section 06. */
@media (min-width: 901px) {
#reload .bio-photo, #reload .bio-photo img {
background: #000;
}

#reload .bio-photo img {
object-fit: contain; object-position: center;
}
}

@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
#reload.biopic-section {
align-items: stretch;
}

/* The full card is an accessible sound trigger on the hosted-server stage. */
.server-sound-trigger,
.server-sound-trigger::before,
.server-sound-trigger::after {
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none;
}
.server-sound-trigger {
  position:absolute;
  z-index:4;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  cursor:pointer;
  background:transparent;
}
.server-sound-trigger:focus-visible { outline:2px solid var(--blue-hot); outline-offset:-3px; }
.server-card.is-sounding::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,184,255,.15),transparent 42%);
  animation:server-sound-pulse .55s ease-out;
}
@keyframes server-sound-pulse { from { opacity:1; } to { opacity:0; } }

/* Section 04 uses an explicit editorial grid. It keeps all Re-Load images
   available without the old absolute-positioning collisions. */
#reload .bio-collage {
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto auto auto auto auto auto auto;
  gap:clamp(.65rem,1.05vw,1.25rem);
  width:min(100%,68rem) !important;
  height:auto !important;
  min-height:0 !important;
  align-content:start;
}
#reload .bio-logo-strip,
#reload .bio-photo,
#reload .bio-quote,
#reload .reload-links {
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0;
  margin:0 !important;
}
#reload .bio-logo-strip { grid-column:1 / -1; grid-row:1; aspect-ratio:8.8 / 1; }
#reload .bio-photo { display:grid; grid-template-rows:1fr auto; overflow:hidden; background:#000; cursor:zoom-in; }
#reload .bio-photo img { width:100%; height:100%; min-height:0; object-fit:cover; background:#000; }
/* Captions are content, not decoration: keep them comfortably readable in
   every card, including the small square cards and narrow mobile stage. */
#reload .bio-photo figcaption {
  min-height:clamp(2rem,3.2cqw,2.6rem);
  padding:clamp(.42rem,.85cqw,.62rem) clamp(.6rem,1.15cqw,.85rem);
  font-size:clamp(.74rem,1.15vw,1.05rem) !important;
  line-height:1.2;
  letter-spacing:.045em !important;
  white-space:normal;
}
#reload .bio-photo-rave { grid-column:1 / 8; grid-row:2; aspect-ratio:16 / 9; transform:rotate(-1.15deg) !important; }
#reload .bio-photo-party { grid-column:8 / 13; grid-row:2; aspect-ratio:3 / 4; transform:rotate(1.35deg) !important; }
#reload .bio-photo-audia3 { grid-column:1 / 8; grid-row:3; aspect-ratio:16 / 9; transform:rotate(1.1deg) !important; }
#reload .bio-photo-rotterdam { grid-column:8 / 13; grid-row:3; aspect-ratio:1 / 1; transform:rotate(1.25deg) !important; }
#reload .bio-photo-studio { grid-column:1 / 5; grid-row:4; aspect-ratio:1 / 1; transform:rotate(-1.15deg) !important; }
#reload .bio-photo-camera { grid-column:5 / 9; grid-row:4; aspect-ratio:1 / 1; transform:rotate(.8deg) !important; }
#reload .bio-photo-mask { grid-column:9 / 13; grid-row:4; aspect-ratio:1 / 1; transform:rotate(-1.25deg) !important; }
#reload .bio-photo-pov { grid-column:1 / 7; grid-row:5; aspect-ratio:16 / 9; transform:rotate(-.75deg) !important; }
#reload .bio-photo-korsacrew { grid-column:7 / 13; grid-row:5; aspect-ratio:16 / 9; transform:rotate(-1.1deg) !important; }
#reload .bio-quote { grid-column:1 / -1; grid-row:6; }
#reload .reload-links { grid-column:1 / -1; grid-row:7; }
@media (max-width:900px) {
  #reload .bio-collage { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; width:100% !important; }
  #reload .bio-logo-strip, #reload .bio-quote, #reload .reload-links { grid-column:1 / -1; grid-row:auto; }
  #reload .bio-photo { grid-column:auto; grid-row:auto; transform:rotate(0) !important; }
  #reload .bio-photo-rave, #reload .bio-photo-pov, #reload .bio-photo-korsacrew, #reload .bio-photo-audia3 { grid-column:1 / -1; }
}

/* The original editorial split: a bounded reading rail on the left and the
   ordered photo story on the right. Tablets switch to one column before either
   side becomes too narrow. */
@media (min-width:901px) {
  #reload.biopic-section {
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(1.5rem,3vw,4rem);
    align-items:start;
  }
  #reload .bio-copy { min-width:0; max-width:40rem; }
  #reload .bio-collage { justify-self:start; }
}

#reload .bio-copy {
display: flex; flex-direction: column; min-height: 100%;
}

#reload .bio-copy p {
font-size: clamp(.92rem, min(1.04vw, 1.72vh), 1.18rem); line-height: 1.44; margin-bottom: clamp(.55rem, 1.05vh, .9rem);
}

#reload .bio-readout {
display: flex; gap: 1.4rem; justify-content: space-between; margin-top: auto; white-space: nowrap;
}

#reload .bio-collage {
align-self: stretch;
}

#reload .reload-links {
align-self: end;
}

#reload .bio-photo img {
object-fit: contain; object-position: center; background: #000;
}
}

/* Client-site preview frame: Suus and TostiPost retain a normal desktop canvas
   inside the project viewer. The surrounding rails intentionally belong to
   Digital Empire rather than the client sites. */
.portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(0, 90rem) minmax(2rem, 1fr);
  align-items: stretch;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0, 122, 255, 0.08) 0 1px, transparent 1px 0.5rem),
    linear-gradient(180deg, rgba(1, 8, 20, 0.98), rgba(1, 4, 12, 0.98));
}

.portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live::before,
.portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live::after {
  content: "";
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0.65rem;
  border-block: 1px solid rgba(28, 160, 255, 0.3);
  color: rgba(150, 197, 238, 0.55);
  font-size: clamp(0.44rem, 0.52vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-align: center;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}

.portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live::after {
  transform: rotate(180deg);
}

.portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live iframe {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  border-inline: 1px solid rgba(58, 174, 255, 0.52);
  box-shadow: 0 0 3rem rgba(0, 112, 255, 0.16);
}

@media (max-width: 900px) {
  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live {
    display: block;
  }

  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live::before,
  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live::after {
    display: none;
  }
}

/* Phones always keep vertical swipes native. Interactive canvases remain
   clickable, but may never claim a page swipe as an in-scene gesture. */
@media (max-width: 900px), (pointer: coarse) {
  .projects-dna,
  .projects-dna iframe,
  .games-planet,
  .games-planet canvas {
    touch-action: pan-y;
    overscroll-behavior: auto;
  }
}
/* A project viewer is its own scrolling surface. Lock the presentation behind
   it and reserve the full phone viewport for the client-site preview. */
body.modal-open {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overscroll-behavior: none;
}

@media (max-width: 760px) {
  .portfolio-modal {
    padding: 0.35rem;
    overscroll-behavior: contain;
  }

  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-shell {
    height: calc(100svh - 0.7rem);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy {
    padding: 0.55rem 4.15rem 0.5rem 0.8rem;
    gap: 0.18rem;
  }

  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy h2 {
    margin: 0;
    font-size: clamp(1.5rem, 8vw, 2rem);
    line-height: 1;
  }

  .portfolio-modal[data-project="suus"].is-client-web-preview .portfolio-modal-copy h2 {
    width: calc(100% - 2rem); min-width: 0; max-width: 100%;
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    overflow-wrap: break-word;
  }
  .portfolio-modal[data-project="suus"].is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
    display: block; width: calc(100% + 3.35rem); max-width: none;
    margin: .35rem 0 0; -webkit-line-clamp: unset; line-clamp: unset;
    overflow: visible; font-size: clamp(.78rem, 3.65vw, .92rem); line-height: 1.35;
  }
  .portfolio-modal[data-project="suus"].is-client-web-preview .portfolio-modal-description > span + span {
    margin-top: .16rem;
  }

  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
    display: -webkit-box;
    margin: 0.2rem 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: clamp(0.86rem, 4.25vw, 1rem);
    line-height: 1.3;
  }

  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live,
  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-live iframe {
    min-height: 0;
    height: 100%;
    overscroll-behavior: contain;
  }
}
/* Server-card sound controls are invisible click surfaces at every viewport. */
#servers .server-sound-trigger,
#servers .server-sound-trigger::before,
#servers .server-sound-trigger::after {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#servers .server-sound-trigger {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
#servers .server-sound-trigger:focus-visible {
  outline: 2px solid var(--blue-hot) !important;
  outline-offset: -3px;
}

/* Avoid repeatedly rasterising a moving card's entire filter surface. */
.public-portfolio .portfolio-card {
  filter: none;
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .6s ease;
  backface-visibility: hidden;
}
@media (max-width: 900px) {
  .noise-layer, #cursor-signal { display: none; }
  /* hidden computes overflow-y:auto and makes BODY the sticky scroll
     container, although the document viewport is what actually scrolls. */
  body:not(.modal-open) { overflow-x: clip; overflow-y: visible; }
  .site-header, .portfolio-modal, .portfolio-modal-shell, .studio-preview-modal,
  .song-chapter, .album-art, .song-art {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .portfolio-modal { background: #02050b; }
  #asteroid-factory .album-art, #all2dnb .song-art {
    transform: none; filter: none;
  }
  #asteroid-factory .album-art::after, #all2dnb .song-art::after { display: none; }
  #all2dnb .song-chapter { opacity: 1; transition: border-color .32s ease; }
  #asteroid-factory .album-art img, #all2dnb .song-art img, #all2dnb .song-art video {
    filter: none; mix-blend-mode: normal;
  }
  .portfolio-modal.is-client-web-preview:has(.portfolio-modal-live:not([hidden])) .portfolio-modal-copy > p:not(.section-kicker):not(.portfolio-modal-status) {
    padding-right: 0; font-size: .85rem; line-height: 1.3;
  }
}

/* album-intro.css */
/* Album 06: a single editorial composition, sized by width AND stage height. */
@media (max-width: 900px) {
  #asteroid-factory, #all2dnb .song-chapter {
    padding-bottom: calc(var(--mobile-player-height, 10rem) + 2rem);
    scroll-margin-bottom: calc(var(--mobile-player-height, 10rem) + 1rem);
  }
  #asteroid-factory .album-art, #all2dnb .song-art {
    width: min(100%, max(10rem, calc(100svh - var(--header-h) - var(--mobile-player-height, 10rem) - 4rem)));
    margin-inline: auto;
    scroll-margin-top: calc(var(--header-h) + 1rem);
  }
}
@media(min-width:2400px) {
  #all2dnb.album-story { width:min(100%,156rem); }
}
#all2dnb > .a2-intro {
  position:relative; z-index:4; grid-column:1/-1; grid-row:1;
  display:grid; align-content:center;
  width:min(100%,156rem,calc((100svh - var(--header-h)) * 2.65));
  min-width:0; min-height:calc(100svh - var(--header-h) - 1rem);
  margin-inline:auto; padding:clamp(1.5rem,3.5vh,3.5rem) clamp(1rem,3vw,4rem);
}
#all2dnb > .a2-intro::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center,#02060be8 15%,#02060bb5 60%,transparent 85%);
}
#all2dnb .a2-grid {
  display:grid; grid-template-columns:minmax(20rem,.34fr) minmax(0,.66fr);
  grid-template-areas:"kicker kicker" "title title" "copy art";
  align-items:center; gap:clamp(.7rem,1.8vh,1.6rem) clamp(2rem,3.4vw,5rem);
  min-width:0; width:100%;
}
#all2dnb .a2-kicker {
  grid-area:kicker; margin:0; text-align:center; color:var(--blue-hot);
  font-size:clamp(.72rem,.85vw,1rem); font-weight:800; line-height:1.3;
  letter-spacing:.24em; text-transform:uppercase;
}
#all2dnb .a2-title {
  grid-area:title; width:100%; max-width:none; min-width:0;
  margin:0 0 clamp(.4rem,1.2vh,1.2rem); padding-bottom:clamp(1rem,2.8vh,2.5rem);
  border-bottom:1px solid rgba(92,157,255,.22);
  color:var(--white); font-size:clamp(4rem,min(8.6vw,13.5vh),10.5rem);
  line-height:.86; font-weight:900; letter-spacing:-.055em; text-align:center;
  white-space:nowrap;
}
#all2dnb .a2-copy {
  grid-area:copy; display:grid; align-content:center; gap:clamp(.85rem,1.7vh,1.4rem);
  min-width:0; width:100%; max-width:35rem; padding:0; border:0;
  background:radial-gradient(ellipse at left,#020712df,transparent 95%);
}
#all2dnb .a2-copy p {
  margin:0; min-width:0; max-width:100%; color:#c3cfdc;
  font-size:clamp(.94rem,.99vw,1.14rem); line-height:1.62; overflow-wrap:break-word;
}
#all2dnb .a2-copy .a2-lead {
  margin-bottom:.15rem; color:white; font-size:clamp(1.1rem,1.32vw,1.55rem);
  font-weight:750; line-height:1.32; letter-spacing:-.015em; text-wrap:pretty;
}
#all2dnb .a2-nowrap { white-space:nowrap; }
#all2dnb .a2-art { grid-area:art; position:relative; min-width:0; width:100%; margin:0; aspect-ratio:1942/809; }
#all2dnb .a2-art img {
  display:block; width:100%; height:100%; object-fit:contain;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent);
}
#all2dnb .a2-entry {
  position:absolute; left:50%; bottom:-.2rem; z-index:2; transform:translateX(-50%);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  width:max-content; max-width:100%; min-height:44px; margin:0; padding:.4rem;
  border:0; background:transparent; color:var(--blue-hot); cursor:pointer;
  text-shadow:0 0 .7rem #0091fff2,0 0 1.2rem #000;
}
#all2dnb .a2-entry strong { font-size:clamp(.65rem,.72vw,.84rem); line-height:1.25; letter-spacing:.05em; text-align:center; }
#all2dnb .a2-entry span { display:inline-block; color:var(--magenta); font-size:1.15rem; animation:a2-entry-arrow 1.6s ease-in-out infinite; }
#all2dnb .a2-entry span:last-child { animation-delay:.18s; }
@keyframes a2-entry-arrow { 0%,100% { transform:translateY(-2px) rotate(90deg); opacity:.5; } 50% { transform:translateY(3px) rotate(90deg); opacity:1; } }
@media(prefers-reduced-motion:reduce) { #all2dnb .a2-entry span { animation:none; transform:rotate(90deg); } }
@media(max-width:1199px) {
  #all2dnb > .a2-intro { width:100%; min-height:auto; padding:2.25rem clamp(1rem,4vw,3rem) 3rem; }
  #all2dnb .a2-grid { grid-template-columns:1fr; grid-template-areas:"kicker" "title" "art" "copy"; gap:1.25rem; }
  #all2dnb .a2-title { font-size:clamp(3.2rem,12vw,7.5rem); padding-bottom:1.5rem; }
  #all2dnb .a2-art { max-width:65rem; justify-self:center; }
  #all2dnb .a2-copy { max-width:52rem; justify-self:center; gap:1rem; }
  #all2dnb .a2-copy p { font-size:1rem; }
  #all2dnb .a2-copy .a2-lead { font-size:1.3rem; }

}
@media(min-width:720px) and (max-width:1199px) {
  #all2dnb .a2-copy { grid-template-columns:1fr 1fr; column-gap:2rem; align-items:start; }
  #all2dnb .a2-copy .a2-lead { grid-column:1/-1; text-align:center; margin-bottom:.5rem; }
}
@media(max-width:560px) {
  #all2dnb > .a2-intro { padding-inline:0; }
  #all2dnb .a2-grid { gap:1.15rem; }
  #all2dnb .a2-title { font-size:15.4vw; }
  #all2dnb .a2-copy { padding-inline:.5rem; }
  #all2dnb .a2-copy p { font-size:.95rem; line-height:1.65; }
  #all2dnb .a2-copy .a2-lead { font-size:1.15rem; }
  #all2dnb .a2-entry { bottom:-.65rem; width:100%; }
  #all2dnb .a2-entry strong { font-size:.61rem; }
}

/* interface.css */
/* Shared controls and restrained typography refinements. */
:root { --header-h: 4.4rem; }
.site-header { gap: 1rem; }
.site-header.is-menu-open { z-index:20; }
.site-header .header-tools { display:flex; align-items:center; gap:.65rem; margin-left:1rem; }
.site-header nav { margin-left:auto; }




.menu-toggle { min-width:2.25rem; min-height:2.75rem; padding:.4rem; border:0; background:transparent; color:var(--muted); font:700 .7rem "Courier New",monospace; cursor:pointer; display:none; }
.site-header :focus-visible,[role="dialog"] :focus-visible,.a2-entry:focus-visible { outline:2px solid var(--blue-hot); outline-offset:4px; }





@media(min-width:901px) and (max-width:1199px) {
 .hero .split-title { font-size:clamp(3rem,5vw,4rem); }
 #asteroid-factory .artist-copy h2 { font-size:clamp(2rem,3vw,2.3rem); }
 #servers .games-copy h2 { font-size:clamp(2.6rem,5vw,3.5rem); }
}
@media(max-width:1100px) {
 .site-header { gap:.5rem; }
 .site-header .brand-mark { gap:.55rem; }
 .site-header .header-tools { gap:.25rem; }
 .site-header nav { gap:.6rem; }
}
@media(max-width:900px) {
 #studios .story-copy h2 { max-width:12ch; }
 
 .site-header { padding-inline:1rem; }
 .site-header .header-tools { margin-left:auto; }
 .site-header .brand-mark span { font-size:.7rem; }
 .menu-toggle { display:block; min-width:3rem; }
 .site-header nav { display:none; }
 .site-header.is-menu-open nav { display:flex; position:absolute; left:0; right:0; top:100%; max-height:calc(100svh - var(--header-h)); overflow-y:auto; flex-direction:column; align-items:stretch; gap:0; padding:.75rem 1rem; margin:0; background:rgba(2,4,10,.98); border-bottom:1px solid var(--blue-hot); box-shadow:0 1rem 3rem #000b; }
 .site-header.is-menu-open nav a { display:block; padding:1rem; min-height:3rem; font-size:.85rem; }
 .site-header.is-menu-open .menu-toggle { color:var(--blue-hot); }
 
}
@media(max-width:380px) { .site-header {padding-inline:.6rem} .site-header .brand-mark {gap:.35rem} .site-header .brand-mark span {font-size:.63rem}  }
/* A compact bottom player leaves the mobile header and menu available. */
@media(max-width:900px) {
 #album-player { left:.5rem; right:.5rem; top:auto; bottom:max(.5rem,env(safe-area-inset-bottom)); width:auto; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .5rem; padding:.5rem .65rem; background:linear-gradient(100deg,#061430f5,#02040af5); transform:translateY(.35rem); }
 #album-player.is-visible { transform:translateY(0); }
 #album-player { backdrop-filter:none; -webkit-backdrop-filter:none; background:#030b19; }
 #album-player > span { grid-column:1; grid-row:1; font-size:.58rem; letter-spacing:.02em; }
 #album-player strong { grid-column:1; grid-row:2; font-size:.8rem; text-align:left; }
 #album-player .album-player-controls { grid-column:2; grid-row:1 / 3; }
 #album-player button { min-height:2.75rem; padding:0 .55rem; font-size:.65rem; letter-spacing:.02em; }
 #album-player .album-seek { grid-column:1 / -1; grid-row:3; min-height:1.5rem; }
 #album-player .album-volume { grid-column:1 / -1; grid-row:4; grid-template-columns:2rem 1fr; align-items:center; min-height:1.5rem; }
 #album-player .album-player-waveform { display:none; }
 #album-player input[type="range"] { min-height: 1.75rem; height: 1.75rem; }
}

/* projects-layout.css */
/* Section 03 layout: heading, briefing and ledger form one reading column. */
/* Give wrapped badge rows the same centre, including the longer system tags. */
@media (max-width: 900px) {
  .public-portfolio .portfolio-active-description {
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; padding-inline: .75rem;
  }
  .public-portfolio .portfolio-active-description-badges {
    box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  }
  .public-portfolio .portfolio-active-description-badges > * { flex: 0 0 auto; max-width: 100%; }
}
#projects.projects-section {
  display:grid; grid-template-columns:minmax(0,1fr); align-content:start; align-items:start;
  gap:.55rem; min-height:calc(100svh - var(--header-h));
  padding-top:clamp(1.25rem,2.5svh,2rem); padding-bottom:clamp(2rem,4svh,3rem);
}
#projects .projects-copy { display:grid; gap:.35rem; width:100%; min-width:0; z-index:2; }
#projects .projects-copy h2 { max-width:none; margin:0; font-size:clamp(2.3rem,4.1vw,4.5rem); line-height:1.05; letter-spacing:-.025em; }
#projects .projects-heading-sub { margin:0; color:var(--blue-hot); font-size:clamp(.76rem,.9vw,1rem); line-height:1.35; font-weight:800; letter-spacing:.04em; }
#projects .projects-intro { display:grid; gap:clamp(.45rem,1svh,.8rem); width:100%; margin:0; }
#projects .projects-intro p { max-width:none; margin:0; color:var(--muted); font-size:clamp(.94rem,1.02vw,1.2rem); line-height:1.45; letter-spacing:normal; }
#projects .projects-intro .projects-services-lead { margin:.1rem 0 0; padding:0; border:0; color:var(--blue-hot); font-size:.78rem; font-weight:800; line-height:1.3; letter-spacing:.045em; text-transform:uppercase; }
#projects .project-ledger { display:grid; width:100%; min-width:0; margin:0; gap:clamp(.3rem,.6svh,.5rem); z-index:2; }
@media(min-width:901px) {
  #projects.projects-section { grid-template-columns:minmax(0, min(70%,72rem)) minmax(0,1fr); }
  #projects .projects-copy,#projects .project-ledger { grid-column:1; }
  #projects .project-row { min-height:clamp(3.8rem,7svh,5.5rem); padding:clamp(.4rem,.75svh,.65rem); }
}
@media(max-width:900px) {
  #projects .projects-copy h2 { font-size:clamp(2rem,6.8vw,3.7rem); }
  #projects .projects-intro p { font-size:1rem; }
}
@media(min-width:901px) and (max-height:800px) {
  #projects .service-emblem { width:3.25rem; height:3.25rem; }
}


/* The decorative stage reaches the viewport floor at chapter entry. */
.projects-dna {
display: none;
}

@media (min-width: 1000px) {
.projects-dna {
position: absolute;
    --projects-dna-lift: clamp(3.25rem, 8.5svh, 5rem);
    top: calc(-1 * var(--projects-dna-lift));
    bottom: auto;
    right: clamp(3rem, 6vw, 7rem);
    z-index: 1;
    display: block;
    width: clamp(18rem, 32vw, 40rem);
    height: calc(100svh - var(--header-h) + var(--projects-dna-lift));
    overflow: visible;
    background: transparent;
    /* Horizontal counterpart to the iframe's existing vertical fade. Keeping
       them on separate layers makes the masks multiply cleanly, producing a
       soft exit on all four edges instead of a hard particle cutoff. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.44) 9%, #000 18%, #000 82%, rgba(0, 0, 0, 0.44) 91%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.44) 9%, #000 18%, #000 82%, rgba(0, 0, 0, 0.44) 91%, transparent 100%);
}

.projects-dna iframe {
display: block;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 92%, transparent 100%);
}
}


/* Reserve a stable lower stage for a future client-logo ticker on spacious
   desktop screens. The slot collapses completely on shorter and mobile views. */
#projects .project-ticker-reserve { display:none; }

@media (min-width:901px) and (min-height:900px) {
  #projects.projects-section {
    grid-template-rows:auto auto minmax(clamp(7.5rem, 12svh, 12rem), 1fr);
    align-content:stretch;
  }

  #projects .project-ticker-reserve {
    display:block;
    grid-column:1;
    min-width:0;
    min-height:clamp(7.5rem, 12svh, 12rem);
    pointer-events:none;
  }
}

/* contact-stage.css */
/* Contact owns its complete stage, footer and artwork. No legacy overrides. */
#signal.contact-section {
  --contact-footer-space:3.3rem;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center; gap:clamp(2rem,5vw,7rem);
  min-height:calc(100svh - var(--header-h));
  padding:clamp(1.5rem,3vh,2.5rem) max(2rem,calc((100% - 140rem)/2)) calc(var(--contact-footer-space) + 1.5rem);
  overflow:clip; isolation:isolate; background:#01040a44;
}
#signal .contact-copy { position:relative; z-index:2; min-width:0; max-width:42rem; transform:none; }
#signal .contact-copy h2 {
  max-width:11ch; margin:.65rem 0 1.2rem;
  font-size:clamp(2.5rem,min(5.4vw,8svh),6.5rem); line-height:.94;
}
#signal .contact-copy p:not(.eyebrow) {
  max-width:45ch; color:#b7c8dc; font-size:clamp(.95rem,min(1.1vw,1.8svh),1.2rem);
  line-height:1.55; margin:0;
}
#signal .contact-visual {
  position:relative; z-index:1; justify-self:center; min-width:0;
  width:min(100%,64rem,calc((100svh - var(--header-h) - var(--contact-footer-space) - 5rem)*.9889));
  aspect-ratio:1247/1261; container-type:inline-size;
}
#signal .contact-logo-art { position:absolute; inset:-6%; z-index:1; pointer-events:none; }
#signal .contact-logo-mark {
  display:block; width:100%; height:100%; object-fit:contain; opacity:1;
  /* A narrow dark edge separates the transparent ASCII mark from the bright cipher field. */
  filter:brightness(1.12) saturate(1.3) contrast(1.05) drop-shadow(0 0 1px rgba(0,0,0,.98)) drop-shadow(0 0 3px rgba(0,0,0,.72));
}
#signal .contact-logo-censor { display:none; }
#signal .contact-cipher-art {
  position:absolute; inset:0 0 var(--contact-footer-space) 40%; z-index:0; opacity:.925; mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 24%);
  mask-image:linear-gradient(to right,transparent,#000 24%);
}
#signal .contact-cipher-art iframe { display:block; width:100%; height:100%; border:0; background:transparent; }
#signal .contact-actions { position:absolute; z-index:3; top:49.216%; left:22%; width:85%; margin:0; padding:0; transform:translateY(-50%); }
#signal .contact-actions .large-link {
  position:relative; display:flex; align-items:center; justify-content:flex-start; width:100%;
  min-height:44px; height:11.424cqw; padding:.35rem max(.7rem,3cqw);
  border:1px solid #149eff; background:#01050bf5; box-shadow:0 0 24px #0057ff33;
  color:#f6fbff; font-size:clamp(.78rem,3.65cqw,2.6rem); line-height:1.1;
  letter-spacing:.005em; white-space:nowrap; text-align:left; transform:none;
}
/* The pseudo-element remains part of the clickable mail control. The section
   clips it exactly at its right edge, independent of screen width or zoom. */
#signal .contact-actions .large-link::after {
  content:""; position:absolute; left:calc(100% - 1px); top:-1px; bottom:-1px; width:100vw;
  border-block:1px solid #149eff; background:inherit;
}
#signal .contact-actions .large-link:hover { color:white; background:#062450; border-color:#79d7ff; }
#signal .contact-footer {
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"details since actions";
  align-items:center; gap:1rem; min-height:var(--contact-footer-space); padding:.65rem clamp(1rem,3vw,2rem);
  background:#000e; color:#cfe1ffc2; font-size:.74rem; letter-spacing:.12em; line-height:1.25; text-transform:uppercase;
}
#signal .contact-footer-left { grid-area:details; justify-self:start; }
#signal .contact-footer-kvk::before { content: '· '; }
#signal .contact-footer-center { grid-area:since; justify-self:center; }
#signal .contact-footer-right { grid-area:actions; justify-self:end; display:flex; gap:1.4rem; }
#signal .contact-footer a:hover { color:white; }
@media(max-width:1100px) and (min-width:701px) {
  #signal.contact-section { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem; padding-inline:1.5rem; }
  #signal .contact-copy h2 { font-size:clamp(2.3rem,min(5.2vw,7.5svh),4rem); }
  #signal .contact-copy p:not(.eyebrow) { font-size:.92rem; }
  #signal .contact-footer { font-size:.62rem; letter-spacing:.06em; }
}
@media(max-width:700px) {
  #signal.contact-section { --contact-footer-space:3.5rem; grid-template-columns:1fr; gap:2rem; padding:2rem 1rem calc(var(--contact-footer-space) + 1.5rem); }
  #signal .contact-copy { max-width:34rem; justify-self:center; width:100%; }
  #signal .contact-copy h2 { max-width:14ch; font-size:clamp(2.6rem,10vw,4rem); }
  #signal .contact-copy p:not(.eyebrow) { font-size:.96rem; }
  #signal .contact-visual { width:min(100%,34rem); }
  #signal .contact-actions { left:21%; width:79%; }
  #signal .contact-cipher-art { left:0; -webkit-mask-image:linear-gradient(to bottom,transparent 42%,#000 68%); mask-image:linear-gradient(to bottom,transparent 42%,#000 68%); }
  #signal .contact-footer { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"details since actions"; gap:.25rem .5rem; font-size:.56rem; letter-spacing:.04em; }
  #signal .contact-footer-kvk { display:block; margin-top:.25rem; }
  #signal .contact-footer-kvk::before { content:none; }
  #signal .contact-footer-right { flex-wrap:wrap; justify-content:flex-end; }
  #signal .contact-footer-right { gap:.65rem; }
}
@media(max-height:550px) and (min-width:701px) {
  #signal .contact-copy h2 { font-size:2.4rem; max-width:15ch; margin-bottom:1rem; }
  #signal .contact-copy p:not(.eyebrow) { font-size:.85rem; line-height:1.45; }
  #signal .contact-visual { width:min(100%,23rem); }
}

/* Small screens must preserve a native vertical swipe through the interactive
   cipher field; taps still reach the matrix. */
@media (max-width: 900px), (pointer: coarse) {
  #signal .contact-cipher-art,
  #signal .contact-cipher-art iframe {
    touch-action: pan-y;
    overscroll-behavior: auto;
  }
}

/* reload-v2-snapshot.css */
@font-face {
  font-family: "Michroma";
  src: url("assets/fonts/michroma/Michroma-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}


/* Re-Load collage, canonical responsive composition ------------------------
   Independent stacks prevent a portrait from stretching the row between the
   Saint Rave and POV images. These rules own the final layout on every size. */
#reload.biopic-section {
  align-items: start;
  overflow: clip;
}

#reload .bio-collage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  align-content: start;
  align-self: start;
  gap: clamp(1.15rem, 1.7vw, 1.8rem);
  width: min(100%, 58rem);
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
}

#reload .bio-primary-grid,
#reload .bio-square-grid,
#reload .bio-wide-grid,
#reload .bio-photo-stack {
  position: relative;
  inset: auto;
  z-index: 1;
  display: grid;
  min-width: 0;
  align-items: start;
  gap: clamp(1.05rem, 1.45vw, 1.55rem);
}

#reload .bio-primary-grid {
  grid-template-columns: minmax(0, 1.58fr) minmax(11rem, 0.92fr);
}

#reload .bio-photo-stack {
  grid-template-columns: minmax(0, 1fr);
}

#reload .bio-square-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#reload .bio-wide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#reload .bio-logo-strip,
#reload .bio-photo,
#reload .bio-quote,
#reload .reload-links {
  position: relative !important;
  inset: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
}

#reload .bio-logo-strip {
  aspect-ratio: 8.8 / 1;
}

#reload .bio-logo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#reload .bio-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  container-type: inline-size;
  overflow: visible;
  background: transparent;
}

#reload .bio-photo img,
#reload .bio-photo:has(figcaption) img {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  background: #000;
}

#reload .bio-photo-rave img,
#reload .bio-photo-pov img { aspect-ratio: 1672 / 941; }
#reload .bio-photo-party img { aspect-ratio: 597 / 728; }
#reload .bio-photo-rotterdam img,
#reload .bio-photo-mask img,
#reload .bio-photo-camera img,
#reload .bio-photo-studio img { aspect-ratio: 1 / 1; }
#reload .bio-photo-korsacrew img,
#reload .bio-photo-audia3 img { aspect-ratio: 1.65 / 1; }

#reload .bio-photo figcaption {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 1.4rem;
  padding: 0.25rem 0.48rem;
  overflow: visible;
  color: #fff;
  font-family: "Arial", "Helvetica Neue", sans-serif;
  font-size: clamp(0.46rem, 1.5cqw, 0.62rem);
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  white-space: nowrap;
}

#reload .bio-photo-rave,
#reload .bio-photo-party,
#reload .bio-photo-mask,
#reload .bio-photo-camera,
#reload .bio-photo-pov,
#reload .bio-photo-rotterdam,
#reload .bio-photo-studio {
  transform: none;
}

#reload .bio-photo-korsacrew { transform: rotate(-0.75deg); }
#reload .bio-photo-audia3 { transform: rotate(0.75deg); }
#reload .bio-photo-audia3 img { transform: none; }

#reload .bio-quote {
  padding: clamp(0.65rem, 1vw, 0.85rem) clamp(0.8rem, 1.4vw, 1.15rem);
}

#reload .reload-links {
  margin-top: clamp(-0.7rem, -0.8vw, -0.35rem) !important;
}

@media (min-width: 901px) {
  #reload.biopic-section {
    grid-template-columns: minmax(29rem, 0.88fr) minmax(38rem, 1.12fr);
    gap: clamp(2.25rem, 3.5vw, 4.5rem);
  }

  #reload .bio-collage {
    justify-self: start;
  }
}

@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
  #reload.biopic-section {
    grid-template-columns: minmax(29rem, 0.86fr) minmax(38rem, 1.14fr);
  }

  #reload .bio-collage {
    width: min(100%, 54rem);
  }
}

@media (max-width: 900px) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 4rem);
    min-height: 0;
    height: auto;
    overflow: clip;
  }

  #reload .bio-collage {
    justify-self: center;
    width: 100%;
  }

  #reload .bio-primary-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(12rem, 0.95fr);
  }
}

@media (max-width: 600px) {
  #reload .bio-primary-grid,
  #reload .bio-square-grid,
  #reload .bio-wide-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #reload .bio-photo figcaption {
    font-size: clamp(0.52rem, 2.45cqw, 0.66rem);
    letter-spacing: 0.055em;
  }
}

/* Re-Load large-screen balance: copy and collage scale as one composition. */
#reload .bio-quote {
  display: grid;
  align-content: center;
  min-height: clamp(3.65rem, 4.6vw, 4.8rem);
  margin: 0 !important;
  padding: clamp(0.62rem, 0.85vw, 0.85rem) clamp(0.85rem, 1.25vw, 1.2rem);
  overflow: visible;
  color: rgba(225, 235, 246, 0.92) !important;
  font-size: clamp(0.76rem, 1.08vw, 1.12rem) !important;
  line-height: 1.16 !important;
  mix-blend-mode: normal;
  transform: none;
}

#reload .bio-quote::after {
  inset: 0;
  transform: none;
}

@media (min-width: 1101px) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    align-items: stretch;
  }

  #reload .bio-copy {
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(1rem, 2.8vh, 2.5rem);
  }

  #reload .bio-copy h2 {
    font-size: clamp(3.7rem, 4.85vw, 6.15rem);
    line-height: 0.96;
  }

  #reload .bio-copy .bio-subtitle {
    font-size: clamp(1.05rem, 1.3vw, 1.55rem) !important;
    margin-bottom: clamp(1rem, 1.8vh, 1.5rem);
  }

  #reload .bio-copy p {
    max-width: 38rem;
    font-size: clamp(0.88rem, 0.78vw + 0.2rem, 1.16rem);
    line-height: 1.38;
    margin-bottom: clamp(0.48rem, 0.85vh, 0.78rem);
  }

  #reload .bio-collage {
    width: min(100%, 52rem);
    justify-self: start;
  }

  #reload .bio-primary-grid,
  #reload .bio-square-grid,
  #reload .bio-wide-grid {
    padding: clamp(0.28rem, 0.42vw, 0.48rem);
  }

  #reload .bio-photo-rave { transform: rotate(-0.9deg); }
  #reload .bio-photo-pov { transform: rotate(0.72deg); }
  #reload .bio-photo-party { transform: rotate(1deg); }
  #reload .bio-photo-rotterdam { transform: rotate(-0.82deg); }
  #reload .bio-photo-mask { transform: rotate(-1.05deg); }
  #reload .bio-photo-camera { transform: rotate(0.88deg); }
  #reload .bio-photo-studio { transform: rotate(-0.78deg); }
  #reload .bio-photo-korsacrew { transform: rotate(-1.1deg); }
  #reload .bio-photo-audia3 { transform: rotate(1.1deg); }
}

@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #reload .bio-copy p {
    font-size: clamp(0.98rem, min(0.92vw, 1.72vh), 1.22rem);
    line-height: 1.42;
  }

  #reload .bio-collage {
    width: min(100%, 50rem);
  }
}

/* Collage resilience: intrinsic caption widths may never widen the section. */
#reload.biopic-section,
#reload .bio-copy,
#reload .bio-collage,
#reload .bio-primary-grid,
#reload .bio-photo-stack,
#reload .bio-square-grid,
#reload .bio-wide-grid,
#reload .bio-photo,
#reload .bio-photo figcaption {
  min-width: 0;
  max-width: 100%;
}

#reload .bio-collage {
  box-sizing: border-box;
  padding-inline: clamp(0.35rem, 0.65vw, 0.65rem);
}

#reload .bio-photo figcaption {
  overflow: hidden;
}

#reload .bio-photo-rave { transform: rotate(-0.38deg); }
#reload .bio-photo-pov { transform: rotate(0.32deg); }
#reload .bio-photo-party { transform: rotate(0.5deg); }
#reload .bio-photo-rotterdam { transform: rotate(-0.42deg); }
#reload .bio-photo-mask { transform: rotate(-0.45deg); }
#reload .bio-photo-camera { transform: rotate(0.38deg); }
#reload .bio-photo-studio { transform: rotate(-0.34deg); }
#reload .bio-photo-korsacrew { transform: rotate(-0.62deg); }
#reload .bio-photo-audia3 { transform: rotate(0.62deg); }

@media (min-width: 901px) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }

  #reload .bio-collage {
    width: 100%;
    justify-self: stretch;
  }

  #reload .bio-primary-grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(0, 0.92fr);
  }
}

/* At compact laptop widths the copy and collage both retain usable space. */
@media (min-width: 901px) and (max-width: 1350px) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.15rem, 2vw, 1.8rem);
  }

  #reload .bio-collage {
    gap: clamp(0.8rem, 1.2vw, 1.1rem);
  }

  #reload .bio-primary-grid,
  #reload .bio-photo-stack,
  #reload .bio-square-grid,
  #reload .bio-wide-grid {
    gap: clamp(0.7rem, 1vw, 0.95rem);
  }
}

@media (max-width: 1100px) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 4rem);
    min-height: 0;
    height: auto;
  }

  #reload .bio-collage {
    justify-self: center;
    width: min(100%, 58rem);
  }

  #reload .bio-primary-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(12rem, 0.95fr);
  }
}

/* Definitive bottom-of-file adjustments. */
#reload .bio-photo figcaption {
  font-size: clamp(0.4rem, 1.28cqw, 0.64rem) !important;
  letter-spacing: 0.012em !important;
}

#reload .bio-video-bg {
  inset: clamp(0.4rem, 1.4vh, 1.2rem) clamp(0.4rem, 1.5vw, 2rem) !important;
  opacity: 0.38 !important;
}

#reload .bio-video-bg video {
  transform: scale(1.24) !important;
}

@media (max-width: 600px) {
  #reload .bio-primary-grid,
  #reload .bio-square-grid,
  #reload .bio-wide-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #reload .bio-photo-rave,
  #reload .bio-photo-party,
  #reload .bio-photo-mask,
  #reload .bio-photo-camera,
  #reload .bio-photo-pov,
  #reload .bio-photo-rotterdam,
  #reload .bio-photo-studio,
  #reload .bio-photo-korsacrew,
  #reload .bio-photo-audia3 {
    transform: none;
  }
}

/* Final detail pass for compact captions and the chapter-scale motion layer. */
#reload .bio-photo figcaption {
  font-size: clamp(0.4rem, 1.28cqw, 0.64rem);
  letter-spacing: 0.012em;
}

#reload .bio-video-bg {
  inset: clamp(0.4rem, 1.4vh, 1.2rem) clamp(0.4rem, 1.5vw, 2rem) !important;
  opacity: 0.38;
}

#reload .bio-video-bg video {
  transform: scale(1.24);
}

/* Section 04 final ownership: these rules deliberately come last. */
#reload.biopic-section > .bio-video-shell {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: 0;
  width: 100vw;
  height: 100%;
  overflow: clip;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transform: translateX(-50%);
  transition: none;
}

#reload.biopic-section > .bio-video-shell > .bio-video-bg {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  border: 0 !important;
  opacity: 0.3 !important;
  transform: none !important;
}

#reload.biopic-section > .bio-video-shell > .bio-video-bg::before {
  background:
    linear-gradient(
      90deg,
      rgba(3, 5, 12, 0.96) 0%,
      rgba(3, 5, 12, 0.72) 8%,
      rgba(3, 5, 12, 0) 24%,
      rgba(3, 5, 12, 0) 76%,
      rgba(3, 5, 12, 0.72) 92%,
      rgba(3, 5, 12, 0.96) 100%
    ),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 8px) !important;
}

#reload.biopic-section > .bio-video-shell > .bio-video-bg::after {
  opacity: 0.42;
}

#reload.biopic-section > .bio-video-shell > .bio-video-bg video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  filter: brightness(0.75);
}

#reload.biopic-section > .bio-copy {
  position: relative;
  z-index: 2;
}

#reload.biopic-section > .bio-copy p {
  color: rgba(248, 252, 255, 0.96) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.94), 0 0 24px rgba(0, 0, 0, 0.72);
}

#reload.biopic-section > .bio-copy .bio-subtitle {
  color: #fff !important;
  font-size: clamp(1.24rem, 4.8vw, 1.72rem) !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.96);
}

@media (min-width: 1101px) {
  #reload.biopic-section > .bio-copy {
    display: grid !important;
    grid-auto-rows: max-content;
    align-content: space-between;
    align-self: stretch;
    min-height: 100%;
    gap: clamp(0.55rem, 1.05vh, 1rem);
    padding-bottom: 0;
  }

  #reload.biopic-section > .bio-copy p {
    margin-bottom: 0 !important;
    font-size: clamp(0.96rem, min(0.94vw, 1.8vh), 1.24rem) !important;
    line-height: 1.42 !important;
  }


  #reload.biopic-section > .bio-copy .bio-subtitle {
    font-size: clamp(1.35rem, 1.55vw, 1.82rem) !important;
  }

  #reload.biopic-section > .bio-copy .bio-readout {
    margin-top: clamp(0.7rem, 1.3vh, 1.25rem) !important;
  }
}

@media (max-width: 1100px) {
  #reload.biopic-section > .bio-video-shell > .bio-video-bg {
    height: 100svh !important;
  }
}
#reload.biopic-section {
  position: relative;
  isolation: isolate;
}

#reload .bio-collage {
  position: static !important;
}

#reload .bio-video-bg {
  position: absolute !important;
  inset: clamp(0.7rem, 2.4vh, 2rem) clamp(0.7rem, 2.4vw, 3.5rem) !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  opacity: 0.34;
  transform: none !important;
}

#reload .bio-video-bg video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

#reload .bio-copy,
#reload .bio-logo-strip,
#reload .bio-primary-grid,
#reload .bio-square-grid,
#reload .bio-wide-grid,
#reload .bio-quote,
#reload .reload-links {
  position: relative;
  z-index: 1;
}

#reload .bio-photo {
  overflow: hidden !important;
  grid-template-rows: minmax(0, 1fr) auto;
}

#reload .bio-photo figcaption {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(1.35rem, 2.3cqw, 1.72rem);
  padding: 0.22rem 0.48rem;
  overflow: hidden !important;
  background: #000;
  color: #fff;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: clamp(0.48rem, 1.42cqw, 0.66rem);
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1;
  white-space: nowrap;
  text-overflow: clip;
}

#reload .bio-quote {
  display: grid;
  align-content: center;
  min-height: clamp(3.55rem, 4.4vw, 4.6rem);
  margin: 0 !important;
  padding: clamp(0.62rem, 0.85vw, 0.85rem) clamp(0.85rem, 1.25vw, 1.2rem);
  color: rgba(225, 235, 246, 0.94) !important;
  font-size: clamp(0.78rem, 1.05vw, 1.1rem) !important;
  line-height: 1.16 !important;
  mix-blend-mode: normal;
  transform: none !important;
}

#reload .bio-quote::after {
  inset: 0;
  transform: none;
}

@media (min-width: 1101px) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    align-items: stretch;
  }

  #reload .bio-copy {
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(1rem, 2.8vh, 2.5rem);
  }

  #reload .bio-copy h2 {
    font-size: clamp(3.7rem, 4.85vw, 6.15rem);
    line-height: 0.96;
  }

  #reload .bio-copy .bio-subtitle {
    font-size: clamp(1.05rem, 1.3vw, 1.55rem) !important;
    margin-bottom: clamp(1rem, 1.8vh, 1.5rem);
  }

  #reload .bio-copy p {
    max-width: 38rem;
    font-size: clamp(0.9rem, 0.8vw + 0.2rem, 1.18rem);
    line-height: 1.4;
    margin-bottom: clamp(0.48rem, 0.85vh, 0.78rem);
  }

  #reload .bio-collage {
    width: min(100%, 52rem) !important;
    justify-self: start;
  }

  #reload .bio-primary-grid,
  #reload .bio-square-grid,
  #reload .bio-wide-grid {
    padding: clamp(0.3rem, 0.44vw, 0.5rem);
  }

  #reload .bio-photo-rave { transform: rotate(-0.9deg); }
  #reload .bio-photo-pov { transform: rotate(0.72deg); }
  #reload .bio-photo-party { transform: rotate(1deg); }
  #reload .bio-photo-rotterdam { transform: rotate(-0.82deg); }
  #reload .bio-photo-mask { transform: rotate(-1.05deg); }
  #reload .bio-photo-camera { transform: rotate(0.88deg); }
  #reload .bio-photo-studio { transform: rotate(-0.78deg); }
  #reload .bio-photo-korsacrew { transform: rotate(-1.1deg); }
  #reload .bio-photo-audia3 { transform: rotate(1.1deg); }
}

@media (min-width: 1800px) and (min-aspect-ratio: 21 / 10) {
  #reload.biopic-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #reload .bio-copy p {
    font-size: clamp(1rem, min(0.98vw, 1.74vh), 1.24rem);
    line-height: 1.42;
  }

  #reload .bio-collage {
    width: min(100%, 50rem) !important;
  }
}

@media (max-width: 600px) {
  #reload .bio-photo-rave,
  #reload .bio-photo-pov,
  #reload .bio-photo-party,
  #reload .bio-photo-rotterdam,
  #reload .bio-photo-mask,
  #reload .bio-photo-camera,
  #reload .bio-photo-studio,
  #reload .bio-photo-korsacrew,
  #reload .bio-photo-audia3 {
    transform: none;
  }
}

/* Section 04 adopts Section 01's editorial proportions: a compact reading
   rail at left and a generous image wall at right. Compact screens retain
   the established single-column flow. */
@media (min-width: 1101px) {
  #reload.biopic-section {
    grid-template-columns: minmax(21rem, 0.74fr) minmax(28rem, 1.26fr);
    gap: clamp(1.5rem, 3vw, 4rem);
  }

  #reload.biopic-section > .bio-copy,
  #reload.biopic-section > .bio-copy p {
    max-width: 100%;
  }

  #reload.biopic-section > .bio-collage {
    width: 100% !important;
    max-width: none;
    justify-self: stretch;
  }
}

/* Re-Load photos share Section 01's preview modal, keyboard behavior and
   open/close sounds. The figure retains its authored tilt while the image
   supplies the subtle hover movement. */
#reload .bio-photo[data-studio-preview] {
  cursor: zoom-in;
}

#reload .bio-photo[data-studio-preview] img {
  transition: transform 0.65s cubic-bezier(.22, 1, .36, 1), filter 0.4s ease;
}

#reload .bio-photo[data-studio-preview]:hover img {
  transform: scale(1.025) !important;
  filter: saturate(1.08) contrast(1.04);
}

#reload .bio-photo[data-studio-preview]:focus-visible {
  outline: 2px solid var(--blue-hot);
  outline-offset: 4px;
}

/* Re-Load images use their own card label inside the shared photo preview.
   It remains intentionally quieter than the large Studio headings. */
.studio-preview-modal.is-reload-photo-preview .studio-preview-media h2 {
  font-size: clamp(0.8rem, 1.8vw, 2rem);
  line-height: 1.1;
}

/* Give every Re-Load image a real viewing stage. The media now fills that
   stage edge-to-edge, avoiding the small centred image surrounded by black on
   all four sides. */
.studio-preview-modal.is-reload-photo-preview .studio-preview-shell {
  width: min(94vw, 100rem);
}

.studio-preview-modal.is-reload-photo-preview .studio-preview-media {
  height: min(78vh, 58rem);
}

.studio-preview-modal.is-reload-photo-preview .studio-preview-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.studio-preview-modal.is-reload-photo-preview .studio-preview-description:empty {
  display: none;
}

/* Give the closing field report enough visual authority to read as a quote,
   rather than a small technical label beneath the photographs. */
#reload .bio-quote {
  align-content: center;
  min-height: clamp(4.7rem, 7vw, 6.6rem);
  padding: clamp(0.8rem, 1.15vw, 1.1rem) clamp(1rem, 1.55vw, 1.45rem);
  color: rgba(246, 251, 255, 0.96) !important;
  /* The parent keeps the technical field-report treatment. */
  font-family: "Courier New", monospace;
  font-size: var(--reload-quote-size, clamp(1rem, 1.55vw, 1.55rem)) !important;
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.22 !important;
  text-transform: none;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.75);
}

#reload .bio-quote > span {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-family: "Michroma", Bahnschrift, "Arial Narrow", Arial, sans-serif;
  /* Michroma ships only as Regular; the browser adds a controlled synthetic
     weight here so the quote carries more authority. */
  font-synthesis: weight;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}

#reload .bio-quote::before {
  /* Match the compact photo-caption typography while retaining the report's
     magenta colour defined by the original treatment. */
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 900;
  letter-spacing: 0.045em;
}

/* Experiment: only the long-form artist description shares the new Re-Load
   display voice. Headings, the subtitle and status readout stay untouched. */
#reload .bio-copy > p {
  text-wrap: pretty;
  font-family: "Michroma", Bahnschrift, "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.012em;
}

#reload .bio-quote::before {
  margin-bottom: 0.45rem;
  font-size: clamp(0.58rem, 0.72vw, 0.74rem);
  letter-spacing: 0.12em;
}

#reload .bio-photo figcaption {
  font-size: clamp(0.34rem, 0.86cqw, 0.5rem) !important;
  letter-spacing: 0.018em !important;
}

#reload .bio-primary-grid,
#reload .bio-square-grid,
#reload .bio-wide-grid {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#reload .bio-photo[data-studio-preview] {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Keep the name and role as one editorial unit. The rest of the text can
   still distribute through the stage without pulling the subtitle away. */
#reload .bio-heading {
  display: grid;
  gap: clamp(0.18rem, 0.45vh, 0.38rem);
}

#reload .bio-heading h2,
#reload .bio-heading .bio-subtitle {
  margin: 0 !important;
}

#reload .bio-heading .bio-subtitle {
  margin-bottom: clamp(0.8rem, 1.45vh, 1.2rem) !important;
}

/* Above a 1920 px canvas, preserve the balanced 1920 composition instead of
   stretching the copy gaps and collage indefinitely. The video shell stays
   viewport-wide behind this bounded editorial stage. */
@media (min-width: 1921px) {
  #reload.biopic-section {
    width: min(calc(100% - clamp(3rem, 7vw, 10rem)), 120rem);
    margin-inline: auto;
  }
}

/* Re-Load card labels: preserve legibility at every collage scale. */
#reload .bio-photo {
  container-type: inline-size;
}

#reload .bio-photo figcaption {
  min-height: clamp(1.5rem, 2.1cqw, 1.9rem);
  padding: clamp(0.22rem, 0.58cqw, 0.34rem) clamp(0.45rem, 2cqw, 0.8rem);
  /* One caption scale across the whole collage: the established
     “PICTURE TAKEN BACKSTAGE” treatment is the visual reference. */
  font-size: var(--reload-caption-size, clamp(0.7rem, 0.75vw, 0.78rem)) !important;
  letter-spacing: 0 !important;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 600px) {
  #reload .bio-photo figcaption {
    min-height: 2rem;
    font-size: clamp(0.66rem, 2.8cqw, 0.8rem);
  }
}

#reload .bio-copy .bio-emphasis {
  font-weight: 600;
  font-synthesis: weight;
}

/* Keep the Re-Load title lock-up in the same display voice as its description. */
#reload .bio-copy .bio-heading h2,
#reload .bio-copy .bio-heading .bio-subtitle {
  font-family: "Michroma", Bahnschrift, "Arial Narrow", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-synthesis: weight;
  letter-spacing: 0.012em;
}
#reload .bio-copy .bio-strong {
    display: block;
  width: 100%;
  text-align: center;
font-weight: 700;
  font-synthesis: weight;
}

#reload .bio-copy .section-kicker {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-synthesis: weight;
}
#reload .bio-copy .bio-heading h2 {
  transform: translateX(-0.035em);
}

@media (max-width: 900px) {
  #reload.biopic-section > .bio-video-shell { overflow: visible; }
  #reload.biopic-section > .bio-video-shell > .bio-video-bg { filter: none; mix-blend-mode: normal; }
  #reload.biopic-section > .bio-video-shell > .bio-video-bg video {
    object-fit: contain !important; filter: none;
  }
  #reload .bio-quote { font-size: .9rem !important; height: auto; max-height: none; }
  #reload .bio-quote > span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
}