/* layout: a fixed 3D night city behind everything; the page scrolls the camera down an avenue
   while HUD panels slide in over it. hero → pinned gig track → profile → comms → street level. */
:root {
  --ink: #130c0d;
  --rose: #f6b6be;
  --lilac: #ffdffb;
  --pine: #29ab87;
  --gold: #f2ce6c;
  --love: #d68585;
  --iris: #b9a2e8;
  --blue: #7fb4ff;
  --text: #f7e0e2;
  --mute: #b4979c;
  --panel: rgba(26, 14, 18, .86);
  --line: rgba(246, 182, 190, .18);
  --f-display: "Oxanium", "Chakra Petch", system-ui, sans-serif;
  --f-body: "Chakra Petch", system-ui, sans-serif;
  --f-mono: "Share Tech Mono", ui-monospace, "Cascadia Code", monospace;
  --grad: linear-gradient(45deg, var(--rose), var(--pine) 50%, var(--iris));
  --cut: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.2, 1.3, .4, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { background: var(--ink); scroll-padding-top: 64px; overflow-x: clip }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.55 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased }
a { color: inherit }
button { font: inherit; color: inherit }
::selection { background: var(--rose); color: var(--ink) }
:focus-visible { outline: 1px dashed var(--gold); outline-offset: 4px }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px) }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0 }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--rose); color: var(--ink); padding: 10px 14px; font: 14px var(--f-mono); text-decoration: none }
.skip:focus { top: 12px }

/* ---------- city backdrop ---------- */
.city { position: fixed; inset: 0; z-index: 0; background: var(--ink) }
.city .poster, .city canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.city .poster { object-fit: cover }
.city canvas { opacity: 0; transition: opacity .9s var(--ease) }
.city.live canvas { opacity: 1 }
.scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(19, 12, 13, calc(.82 * var(--heroL, 1))) 0%, rgba(19, 12, 13, calc(.45 * var(--heroL, 1))) 38%, rgba(19, 12, 13, 0) 62%),
    linear-gradient(0deg, rgba(19, 12, 13, var(--floor, .35)), rgba(19, 12, 13, 0) 40%),
    rgba(19, 12, 13, var(--dim, 0)) }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .12) 2px 3px), radial-gradient(120% 90% at 50% 45%, transparent 58%, rgba(0, 0, 0, .5)) }
main { position: relative; z-index: 2 }

/* ---------- cut-corner frame ---------- */
.frame { position: relative; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); background: var(--grad); padding: 1px }
.frame > .in { clip-path: inherit; background: linear-gradient(160deg, rgba(44, 24, 30, .94), rgba(20, 12, 15, .95)); height: 100%; position: relative }

/* ---------- HUD ---------- */
.hud { position: sticky; top: 0; z-index: 50; background: rgba(19, 12, 13, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px) }
.hud .wrap { display: flex; align-items: center; gap: 18px; height: 52px; font: 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase }
.brand { font: 800 15px/1 var(--f-display); letter-spacing: .12em; color: var(--rose); text-decoration: none; white-space: nowrap }
.brand b { color: var(--pine) }
.hud nav { display: flex; gap: 18px; margin-left: auto }
.hud nav a { text-decoration: none; color: var(--mute); transition: color .15s; white-space: nowrap }
.hud nav a:hover, .hud nav a.on { color: var(--rose) }
.hud nav a::before { content: "/"; color: var(--pine); margin-right: 4px }
.hud .stat { display: flex; gap: 16px; color: var(--mute); white-space: nowrap }
.dot { display: inline-block; width: 7px; height: 7px; background: var(--pine); margin-right: 6px; box-shadow: 0 0 8px var(--pine); animation: blink 2.4s steps(1) infinite }
.eddies { color: var(--gold) }
@keyframes blink { 50% { opacity: .25 } }
.hudbtn { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 1px solid var(--line); color: var(--rose); padding: 7px 10px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; white-space: nowrap }
.hudbtn:hover { border-color: var(--rose); background: rgba(246, 182, 190, .08) }
#sndBtn[aria-pressed="true"] { color: var(--pine); border-color: rgba(41, 171, 135, .5) }
.hud-progress { height: 2px; background: transparent; position: absolute; left: 0; right: 0; bottom: -1px }
.hud-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad) }

/* ---------- depth rail ---------- */
.rail { transition: opacity .4s, transform .4s var(--ease); position: fixed; z-index: 40; right: clamp(10px, 1.6vw, 26px); top: 50%; transform: translateY(-46%); height: min(58vh, 520px); width: 64px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; font: 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: right }
.rail b { display: block; color: var(--rose); font: 600 15px/1 var(--f-display); letter-spacing: .04em; margin-top: 4px; font-variant-numeric: tabular-nums }
html.pinned .rail { opacity: 0; transform: translate(20px, -46%); pointer-events: none }
.rail-bot b { color: var(--gold) }
.rail-line { list-style: none; margin: 0; padding: 0 12px 0 0; position: relative; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line) }
.rail-line li { position: relative; height: 0 }
.rail-line a { position: absolute; right: -12px; top: -6px; display: flex; align-items: center; gap: 8px; text-decoration: none; color: transparent; white-space: nowrap; padding: 0 0 0 10px; transition: color .2s }
.rail-line a::after { content: ""; width: 8px; height: 1px; background: var(--mute); transition: width .2s, background .2s }
.rail-line a:hover, .rail-line a:focus-visible, .rail-line a.on { color: var(--rose) }
.rail-line a.on::after, .rail-line a:hover::after { width: 16px; background: var(--rose) }
.rail-mark { position: absolute; right: -4px; top: calc(var(--railTop, 30px) + var(--p, 0) * var(--railH, 300px)); width: 9px; height: 9px; background: var(--pine); box-shadow: 0 0 10px var(--pine); transform: rotate(45deg) }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100svh - 52px); display: grid; align-content: center }
.hero-grid { width: 100%; position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; padding-block: clamp(40px, 7vh, 90px) clamp(70px, 10vh, 110px) }
.kicker { font: 13px/1.4 var(--f-mono); color: var(--pine); letter-spacing: .14em; text-transform: uppercase; display: flex; gap: 10px; flex-wrap: wrap }
.kicker span { color: var(--mute) }
.kicker span::before { content: "· " }
.name { font: 800 clamp(64px, min(11.5vw, 17vh), 168px)/.84 var(--f-display); letter-spacing: -.02em; text-transform: lowercase; margin-block: 18px 22px; color: var(--text); text-shadow: 0 0 40px rgba(19, 12, 13, .6) }
.name .l2 { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; text-shadow: none }
.glitch { position: relative; display: inline-block }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0 }
.glitch::before { color: var(--rose); transform: translate(-3px, 0); clip-path: inset(10% 0 60% 0) }
.glitch::after { color: var(--pine); transform: translate(3px, 0); clip-path: inset(55% 0 12% 0) }
.glitch:hover::before, .glitch.zap::before { opacity: .9; animation: gl1 .35s steps(2) infinite }
.glitch:hover::after, .glitch.zap::after { opacity: .9; animation: gl2 .3s steps(2) infinite }
@keyframes gl1 { 0% { clip-path: inset(8% 0 70% 0); transform: translate(-4px, 1px) } 50% { clip-path: inset(40% 0 30% 0); transform: translate(3px, -1px) } 100% { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 0) } }
@keyframes gl2 { 0% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 0) } 50% { clip-path: inset(15% 0 65% 0); transform: translate(-3px, 1px) } 100% { clip-path: inset(35% 0 40% 0); transform: translate(2px, -1px) } }
.tag { font-size: clamp(18px, 1.9vw, 22px); max-width: 34ch; margin: 0 }
.tag em { font-style: normal; color: var(--rose) }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; align-items: center }
.cta { --cut: 10px; display: inline-block; text-decoration: none; font: 600 16px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border: 0; color: var(--ink) }
.cta .in { display: flex; gap: 10px; align-items: center; padding: 16px 26px; background: var(--rose); transition: background .2s; overflow: hidden }
.cta .in i { font-style: normal; transition: transform .3s var(--spring) }
.cta:hover .in i { transform: translateY(3px) }
.cta.ghost:hover .in i { transform: translate(3px, -3px) }
.cta .in::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-130%); pointer-events: none }
.cta:hover .in::after, .cta:focus-visible .in::after { transform: translateX(130%); transition: transform .7s var(--ease) }
.cta:hover .in { background: var(--lilac) }
.cta.ghost { color: var(--rose) }
.cta.ghost .in { background: rgba(19, 12, 13, .9) }
.cta.ghost .in::after { background: linear-gradient(105deg, transparent 35%, rgba(246, 182, 190, .3) 50%, transparent 65%) }
.cta.ghost:hover .in { background: #2a181c }
.mag { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .5s var(--spring) }
.mag.near { transition: transform .12s linear }
.stakes { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 14px/1.4 var(--f-mono); color: var(--mute) }
.stakes b { color: var(--gold); font-weight: 400; font-variant-numeric: tabular-nums }
.stakes li::before { content: "> "; color: var(--pine) }
.descend { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 11px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); opacity: calc(1 - var(--hp, 0) * 4) }
.descend i { width: 1px; height: 38px; background: linear-gradient(var(--rose), transparent); animation: drip 1.8s var(--ease) infinite }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top } 45% { transform: scaleY(1); transform-origin: top } 55% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

/* construct card */
.construct-wrap { perspective: 1100px; justify-self: center }
.construct { --cut: 22px; width: min(360px, 80vw); transform: rotateY(calc(-14deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)) rotateZ(3deg); transition: transform .5s var(--ease); filter: drop-shadow(0 0 28px rgba(246, 182, 190, .28)) drop-shadow(0 30px 60px rgba(0, 0, 0, .6)) }
.construct.tilting { transition: transform .08s linear }
.construct .in { padding: 16px 18px 18px }
.c-head { display: flex; justify-content: space-between; font: 12px/1 var(--f-mono); color: var(--mute); letter-spacing: .1em; text-transform: uppercase }
.c-head b { color: var(--pine); font-weight: 400 }
.core { width: 260px; height: 260px; margin: 6px auto 4px; background: url(/assets/core-sheet.webp) 0 0/9360px 260px no-repeat; animation: spin 3.6s steps(36) infinite; max-width: 100% }
@keyframes spin { to { background-position: -9360px 0 } }
.c-name { font: 800 26px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase }
.c-rows { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 0; font: 13px/1.35 var(--f-mono) }
.c-rows dt { color: var(--mute); text-transform: uppercase }
.c-rows dd { margin: 0 }
.bar { height: 6px; background: rgba(246, 182, 190, .12); margin-top: 12px; position: relative; overflow: hidden }
.bar i { position: absolute; inset: 0 31% 0 0; background: var(--grad) }
.c-foot { display: flex; justify-content: space-between; font: 11px/1 var(--f-mono); color: var(--mute); margin-top: 6px }

/* glare for tilt cards */
.tilt > .in::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 223, 251, .16), transparent 45%); opacity: var(--go, 0); transition: opacity .3s }

/* ---------- kinetic type ---------- */
.kinetic { overflow: hidden; padding-block: clamp(30px, 6vw, 80px); pointer-events: none; transform: skewX(var(--kv, 0deg)) }
.k-row { display: flex; gap: .5em; white-space: nowrap; width: max-content; font: 800 clamp(64px, 13vw, 200px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; color: rgba(246, 182, 190, .08); transform: translateX(calc(var(--k, .5) * -32% + 4%)) }
.k-row .o { color: transparent; -webkit-text-stroke: 1.5px rgba(246, 182, 190, .5) }
.kinetic.rev .k-row { transform: translateX(calc(var(--k, .5) * 32% - 40%)) }
@supports (animation-timeline: view()) {
  html.motion .kinetic .k-row { animation: kx linear both; animation-timeline: view() }
  html.motion .kinetic.rev .k-row { animation-name: kxr }
}
@keyframes kx { from { transform: translateX(4%) } to { transform: translateX(-28%) } }
@keyframes kxr { from { transform: translateX(-40%) } to { transform: translateX(-8%) } }

/* ---------- section heads ---------- */
section { padding-block: clamp(56px, 8vw, 110px) }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px }
.sh h2 { font: 800 clamp(56px, 10vw, 132px)/.82 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1.5px var(--rose); filter: drop-shadow(0 0 18px rgba(19, 12, 13, .9)) }
.sh h2 span { color: var(--rose); -webkit-text-stroke: 0 }
.sh p { margin: 0; max-width: 44ch; color: var(--mute); font: 14px/1.5 var(--f-mono); padding: 12px 14px; background: rgba(19, 12, 13, .72); border-left: 2px solid var(--pine) }
.sh p b { color: var(--text); font-weight: 400 }

/* ---------- panel reveals ---------- */
@supports (animation-timeline: view()) {
  html.motion .slide-l, html.motion .slide-r, html.motion .slide-up { animation: inL both var(--ease); animation-timeline: view(); animation-range: entry 0% entry 80% }
  html.motion .slide-r { animation-name: inR }
  html.motion .slide-up { animation-name: inU }
}
@keyframes inL { from { opacity: 0; transform: translateX(-14vw) skewX(6deg); filter: blur(6px) } }
@keyframes inR { from { opacity: 0; transform: translateX(14vw) skewX(-6deg); filter: blur(6px) } }
@keyframes inU { from { opacity: 0; transform: translateY(80px); filter: blur(6px) } }
html.motion.no-sda .slide-l, html.motion.no-sda .slide-r, html.motion.no-sda .slide-up { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease) }
html.motion.no-sda .slide-l.pre { opacity: 0; transform: translateX(-14vw) skewX(6deg); filter: blur(6px) }
html.motion.no-sda .slide-r.pre { opacity: 0; transform: translateX(14vw) skewX(-6deg); filter: blur(6px) }
html.motion.no-sda .slide-up.pre { opacity: 0; transform: translateY(80px); filter: blur(6px) }

/* ---------- gigs ---------- */
.gigs-sec { padding-bottom: 40px }
.track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px) }
.gig { grid-column: span 2; display: flex; --scan: 1 }
.gig.big { grid-column: span 3 }
.gig .in { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--scan) * 130% - 30%), rgba(0, 0, 0, .12) calc(var(--scan) * 130% - 4%));
  mask-image: linear-gradient(90deg, #000 calc(var(--scan) * 130% - 30%), rgba(0, 0, 0, .12) calc(var(--scan) * 130% - 4%)) }
.gig::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: calc(var(--scan) * 100%); background: var(--pine); box-shadow: 0 0 14px 2px var(--pine); opacity: calc(var(--scan) * (1 - var(--scan)) * 4); pointer-events: none }
.gig { transition: background .3s, transform .5s var(--ease) }
.gig:hover { background: linear-gradient(45deg, var(--gold), var(--rose), var(--iris)) }
.gig.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) }
.gig.tilting { transition: background .3s, transform .08s linear }
.g-top { display: flex; justify-content: space-between; align-items: center; font: 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute) }
.chip { padding: 5px 8px; border: 1px solid currentColor; font: 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; display: inline-block }
.st-live { color: var(--pine) } .st-priv { color: var(--gold) } .st-rev { color: var(--iris) } .st-pub { color: var(--lilac) } .st-sold { color: var(--love) }
.chip:hover, .stack span:hover { animation: chipg .36s steps(3) 1 }
@keyframes chipg {
  0% { text-shadow: -2px 0 var(--love), 2px 0 var(--pine); transform: translate(2px, 0); clip-path: inset(0 0 45% 0) }
  33% { text-shadow: 2px 0 var(--love), -2px 0 var(--blue); transform: translate(-2px, 1px); clip-path: inset(40% 0 0 0) }
  66% { text-shadow: -1px 0 var(--gold), 1px 0 var(--pine); transform: translate(1px, -1px); clip-path: inset(20% 0 20% 0) }
}
.gig h3 { font: 800 clamp(26px, 2.6vw, 34px)/1 var(--f-display); text-transform: lowercase; letter-spacing: -.01em }
.fixer { font: 12px/1 var(--f-mono); color: var(--pine); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px }
.gig p { margin: 0; opacity: .9; max-width: 62ch }
.note { font: 13px/1.45 var(--f-mono); color: var(--mute); border-left: 2px solid var(--love); padding-left: 10px }
.g-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font: 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute) }
.g-meta b { display: block; font: 600 17px/1.2 var(--f-display); letter-spacing: .02em; color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums }
.g-meta .pay b { color: var(--gold) }
.threat { display: flex; gap: 3px; margin-top: 6px }
.threat i { width: 16px; height: 9px; background: rgba(246, 182, 190, .14); transform: skewX(-20deg) }
.threat.t1 i:nth-child(-n+1), .threat.t2 i:nth-child(-n+2), .threat.t3 i:nth-child(-n+3), .threat.t4 i:nth-child(-n+4), .threat.t5 i { background: var(--love); box-shadow: 0 0 8px rgba(214, 133, 133, .6) }
.stack { display: flex; flex-wrap: wrap; gap: 6px }
.stack span { font: 11px/1 var(--f-mono); padding: 5px 7px; background: rgba(246, 182, 190, .08); color: var(--rose); letter-spacing: .04em; display: inline-block }
.g-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.g-link { font: 600 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); text-decoration: none; align-self: flex-start; padding: 4px 0 }
.g-link:hover { color: var(--lilac) }
.g-link.off { color: var(--mute); cursor: default }
.g-link.as-btn { background: none; border: 0; cursor: pointer }
.copy { background: none; border: 1px solid var(--line); color: var(--mute); font: 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 7px; cursor: pointer; transition: color .15s, border-color .15s }
.copy:hover { color: var(--pine); border-color: var(--pine) }
.copy.ok { color: var(--ink); background: var(--pine); border-color: var(--pine) }
.doodle { float: right; width: 84px; height: 84px; margin: -6px -6px 0 10px }
.doodle path, .doodle circle { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0 }
.doodle.draw path, .doodle.draw circle { animation: draw 1.4s cubic-bezier(.3, .7, .3, 1.2) both }
@keyframes draw { from { stroke-dashoffset: 400 } }
.classified:not(.open) .redact { filter: blur(7px); opacity: .55; user-select: none; pointer-events: none }
.unlock { position: absolute; inset: 44px 16px 16px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; font: 13px/1.4 var(--f-mono); color: var(--mute) }
.unlock b { font: 800 28px/1 var(--f-display); color: var(--gold); letter-spacing: .12em }
.classified.open .unlock { display: none }
.classified.open .in { animation: pop .5s var(--spring) }
@keyframes pop { from { transform: scale(.92); opacity: 0 } }
.track-hud { display: none }
.strip { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 26px; font: 14px/1.5 var(--f-mono); color: var(--mute); padding: 18px 16px; border-block: 1px solid var(--line); background: rgba(19, 12, 13, .7) }
.strip b { color: var(--rose); font-weight: 400 }
.strip .lab { color: var(--pine); text-transform: uppercase; letter-spacing: .1em }

/* horizontal pinned mode (desktop, js, motion ok) */
html.h-mode .pin { position: relative }
html.h-mode .pin-stick { position: sticky; top: 52px; height: calc(100vh - 52px); overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: 22px }
html.h-mode .track { display: flex; gap: 22px; width: max-content; max-width: none; margin: 0; padding-inline: max(16px, calc((100vw - 1240px) / 2 + 40px)) 14vw; transform: translate3d(var(--tx, 0px), 0, 0); align-items: stretch }
html.h-mode .gig { width: clamp(340px, 30vw, 430px); flex: none; max-height: calc(100vh - 170px) }
html.h-mode .gig.big { width: clamp(420px, 38vw, 560px) }
html.h-mode .track-hud { display: flex; align-items: center; gap: 16px; font: 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-inline: max(16px, calc((100vw - 1240px) / 2 + 40px)); max-width: 100vw }
html.h-mode .track-hud b { color: var(--rose); font-weight: 400 }
html.h-mode .track-hud i { flex: 0 1 320px; height: 2px; background: var(--line); position: relative }
html.h-mode .track-hud i b { position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--gp, 0)) }

/* ---------- profile ---------- */
.prof { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px }
.prof .in { padding: 22px 24px }
.ptitle { font: 12px/1 var(--f-mono); color: var(--pine); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; display: flex; justify-content: space-between }
.ptitle span { color: var(--mute) }
.big-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px }
.bs b { display: block; font: 800 clamp(30px, 3.4vw, 46px)/1 var(--f-display); color: var(--rose); font-variant-numeric: tabular-nums }
.bs span { font: 12px/1.35 var(--f-mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em }
.bs.warn b { color: var(--gold) } .bs.ok b { color: var(--pine) }
.chart-wrap { overflow-x: auto; margin-top: 22px }
#hours { display: block; width: 100%; min-width: 480px; height: auto }
#hours .gl { stroke: rgba(246, 182, 190, .1) }
.chart-wrap .ax { fill: var(--mute); font: 10px var(--f-mono) }
.chart-wrap .lb { font: 11px var(--f-mono); fill: var(--rose) }
.chart-wrap .lb.nt { fill: var(--gold) } .chart-wrap .lb.lo { fill: var(--pine) }
#hours .hb { fill: rgba(246, 182, 190, .38); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s var(--ease) calc(var(--i) * 32ms), fill .2s }
#hours .hb.pk { fill: var(--rose) } #hours .hb.nt { fill: var(--gold) } #hours .hb.lo { fill: var(--pine) }
#hours .hb:hover { fill: var(--lilac) }
#hours .hb.cur { fill: var(--lilac); filter: drop-shadow(0 0 6px var(--lilac)) }
#hours .now { fill: rgba(255, 223, 251, .06); stroke: rgba(255, 223, 251, .4); stroke-dasharray: 2 3 }
#hours.armed .hb { transform: scaleY(0) }
#hours.armed .lb { opacity: 0 }
#hours .lb { transition: opacity .5s 1s }
.chart-cap { margin-top: 8px; font: 12px/1.4 var(--f-mono); color: var(--mute); letter-spacing: .04em }
.chart-cap b { color: var(--lilac); font-weight: 400 }
#months { display: block; width: 100%; height: auto }
#months .line { fill: none; stroke: var(--rose); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) }
#months .area { transition: opacity 1.2s .6s }
#months .dot { fill: var(--gold); transition: opacity .4s 1.6s }
#months.armed .line { stroke-dashoffset: 1 }
#months.armed .area, #months.armed .dot, #months.armed .lb { opacity: 0 }
#months .lb { transition: opacity .4s 1.6s }
.months-wrap { margin-top: 20px }
.spec { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font: 14px/1.4 var(--f-mono); margin: 0 }
.spec dt { color: var(--mute); text-transform: uppercase; letter-spacing: .06em }
.spec dd { margin: 0 }
.spec dd b { color: var(--rose); font-weight: 400 }
.dayjob { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--line); font: 14px/1.5 var(--f-body) }
.dayjob span { font: 12px/1 var(--f-mono); color: var(--gold); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 6px }

/* ---------- comms ---------- */
.tx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px }
.tx { position: relative; padding: 16px 18px 18px 20px; background: rgba(22, 12, 16, .82); border-left: 2px solid var(--rose); display: grid; gap: 10px }
.tx:nth-child(4n+2), .tx:nth-child(4n+3) { border-left-color: var(--pine) }
.tx:nth-child(even) { transform: translateY(40px) }
.tx-h { font: 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute) }
.tx q { quotes: none; font: 500 clamp(19px, 1.9vw, 25px)/1.25 var(--f-display); color: var(--text); overflow-wrap: anywhere }
.tx q::before { content: "“"; color: var(--rose); margin-right: 2px }
.tx q::after { content: "”"; color: var(--rose) }
.tx q .u { color: var(--pine); opacity: .7 }
.tx.done .tx-h::after { content: " · decoded"; color: var(--pine) }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; padding: clamp(20px, 3vw, 36px); background: linear-gradient(180deg, rgba(19, 12, 13, .2), rgba(19, 12, 13, .78)) }
.contact h2 { font: 800 clamp(48px, 8vw, 110px)/.88 var(--f-display); text-transform: lowercase; text-shadow: 0 0 30px rgba(19, 12, 13, .8) }
.contact h2 span { color: var(--rose) }
.contact p { color: var(--mute); font: 15px/1.5 var(--f-mono); max-width: 48ch }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 15px/1 var(--f-mono) }
.links li { display: flex; align-items: center; justify-content: space-between; gap: 14px }
.links a { text-decoration: none; display: inline-flex; gap: 10px; padding: 6px 0 }
.links a::before { content: "[>]"; color: var(--pine) }
.links a:hover { color: var(--rose) }
footer { margin-top: 60px; padding-block: 28px 40px; border-top: 1px solid var(--line); font: 12px/1.6 var(--f-mono); color: var(--mute); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
body.street #streetMsg { color: var(--pine) }

/* ---------- overlays ---------- */
.ov { position: fixed; inset: 0; z-index: 100; background: rgba(12, 7, 8, .9); display: grid; place-items: center; padding: 16px; transition: opacity .35s }
.ov.fade { opacity: 0; pointer-events: none }
.breach { --cut: 20px; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; animation: ovin .35s var(--out) }
@keyframes ovin { from { transform: translateY(14px) scale(.98); opacity: 0 } }
.breach .in { padding: 22px clamp(16px, 3vw, 28px); height: auto }
.b-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap }
.b-title h2 { font: 800 clamp(22px, 4vw, 32px)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--rose) }
.b-timer { font: 20px/1 var(--f-mono); color: var(--gold); font-variant-numeric: tabular-nums }
.b-sub { font: 13px/1.5 var(--f-mono); color: var(--mute); margin: 8px 0 16px }
.b-body { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start }
.matrix { display: grid; grid-template-columns: repeat(5, 44px); gap: 4px; padding: 10px; border: 1px solid var(--line) }
.cell { width: 44px; height: 38px; display: grid; place-items: center; font: 18px/1 var(--f-mono); background: none; border: 0; cursor: pointer }
.cell.hl { background: rgba(41, 171, 135, .12) }
.cell:hover:not(:disabled) { color: var(--ink); background: var(--rose) }
.cell:disabled { cursor: default; color: rgba(247, 224, 226, .35) }
.cell.used { color: var(--pine) !important; background: none; outline: 1px dashed var(--pine); outline-offset: -3px }
.cell.pick { animation: pk .3s }
@keyframes pk { 0% { background: var(--pine); color: var(--ink) } }
.buf { display: flex; gap: 6px; margin-bottom: 16px }
.buf i { width: 40px; height: 34px; border: 1px dashed var(--line); display: grid; place-items: center; font: 16px/1 var(--f-mono); font-style: normal; color: var(--pine) }
.lbl { font: 11px/1 var(--f-mono); color: var(--mute); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px }
.daemon { padding: 10px 12px; border: 1px solid var(--line); font: 16px/1 var(--f-mono); display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.daemon .seq i { font-style: normal; margin-right: 6px }
.daemon .seq i.ok { color: var(--pine) }
.daemon .dname { color: var(--gold) }
.daemon small { display: block; width: 100%; font-size: 12px; color: var(--mute); margin-top: 6px }
.b-status { margin-top: 16px; font: 14px/1.4 var(--f-mono); color: var(--mute); min-height: 2.8em }
.b-status.win { color: var(--pine) } .b-status.fail { color: var(--love) }
.b-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap }
.prank .in { padding: 20px 22px }
.prank-list { display: grid; gap: 8px; margin-top: 14px }
.prank-list button { all: unset; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); font: 15px/1.3 var(--f-mono) }
.prank-list button:hover, .prank-list button:focus-visible { border-color: var(--rose); background: rgba(246, 182, 190, .08) }
.prank-list button span { color: var(--mute); font-size: 12px; text-align: right }
.rps-hands { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.rps-hands button { flex: 1; min-width: 90px }
.rps-board { display: flex; justify-content: space-between; font: 800 44px/1 var(--f-display); margin-top: 16px; color: var(--rose) }
.rps-board .r { text-align: right }
.rps-board small { display: block; font: 11px/1 var(--f-mono); color: var(--mute); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px }
.nuke { position: fixed; inset: 0; z-index: 140; background: radial-gradient(circle, rgba(214, 133, 133, .35), rgba(19, 12, 13, .97)); display: grid; place-items: center; text-align: center; padding: 16px }
.nuke h2 { font: 800 clamp(80px, 20vw, 240px)/1 var(--f-display); color: var(--love) }
.nuke p { font: 16px/1.5 var(--f-mono); max-width: 40ch; margin-inline: auto }
.nuke .gg { font: 800 clamp(40px, 8vw, 96px)/1 var(--f-display); color: var(--pine); text-transform: lowercase }

/* ---------- toasts, damage, pet, bots ---------- */
#toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; width: min(560px, calc(100% - 32px)); pointer-events: none }
.toast { --cut: 10px; animation: tin .35s var(--out) }
.toast.out { animation: tout .3s var(--ease) forwards }
.toast .in { padding: 12px 16px; font: 14px/1.45 var(--f-mono) }
.toast b { color: var(--gold); font-weight: 400; display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px }
@keyframes tin { from { transform: translateY(16px); opacity: 0 } }
@keyframes tout { to { transform: translateY(10px); opacity: 0 } }
.dmg { position: fixed; z-index: 130; pointer-events: none; font: 800 30px/1 var(--f-display); color: var(--love); text-shadow: 0 0 12px rgba(214, 133, 133, .8), 2px 2px 0 var(--ink); animation: dmg 1s ease-out forwards }
.dmg.crit { color: var(--gold); font-size: 46px; text-shadow: 0 0 18px rgba(242, 206, 108, .9), 2px 2px 0 var(--ink) }
.dmg.pine { color: var(--pine); font-size: 22px; text-shadow: 0 0 12px rgba(41, 171, 135, .8), 2px 2px 0 var(--ink) }
@keyframes dmg { to { transform: translateY(-70px) scale(1.2); opacity: 0 } }
.hit { animation: hit .3s }
@keyframes hit { 25% { translate: -5px 2px } 50% { translate: 4px -2px } 75% { translate: -2px 1px } }
#pet { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80; width: 64px; height: 64px; cursor: pointer; background: none; border: 0; padding: 0 }
#pet svg { width: 100%; height: 100%; image-rendering: pixelated; animation: bob 1.6s steps(2) infinite }
#pet.faint svg { animation: none; transform: rotate(90deg) translateX(20px) }
@keyframes bob { 50% { transform: translateY(-3px) } }
#pet .bubble { position: absolute; right: 56px; bottom: 52px; width: max-content; max-width: 220px; background: var(--lilac); color: var(--ink); font: 12px/1.35 var(--f-mono); padding: 7px 9px 14px; text-align: left; clip-path: polygon(0 0, 100% 0, 100% 80%, 92% 80%, 88% 100%, 84% 80%, 0 80%) }
.bot { position: fixed; bottom: 6px; z-index: 79; width: 34px; height: 34px; pointer-events: none; animation: walk linear forwards }
@keyframes walk { from { transform: translateX(-60px) } to { transform: translateX(calc(100vw + 60px)) } }
body.sheesh { animation: sh .6s steps(3) 2 }
@keyframes sh { 33% { filter: hue-rotate(90deg) saturate(2.4); translate: 4px 0 } 66% { filter: invert(.1) hue-rotate(-60deg); translate: -4px 0 } }
.sheesh-word { position: fixed; inset: 0; z-index: 135; display: grid; place-items: center; pointer-events: none; font: 800 clamp(60px, 16vw, 220px)/1 var(--f-display); color: var(--gold); text-shadow: 6px 0 var(--rose), -6px 0 var(--pine); animation: dmg 1.2s ease-out forwards }
.night-banner { position: relative; z-index: 51; background: var(--gold); color: var(--ink); font: 13px/1.3 var(--f-mono); text-align: center; padding: 8px 16px; letter-spacing: .04em }

/* ---------- reticle ---------- */
#reticle { position: fixed; left: 0; top: 0; z-index: 110; pointer-events: none; width: 28px; height: 28px; opacity: 0; transform: translate(-100px, -100px); transition: opacity .2s, width .18s var(--ease), height .18s var(--ease) }
#reticle.on { opacity: 1 }
#reticle .c { position: absolute; width: 8px; height: 8px; border: 0 solid var(--rose); transition: border-color .2s, width .2s, height .2s }
#reticle .tl { left: 0; top: 0; border-width: 1px 0 0 1px } #reticle .tr { right: 0; top: 0; border-width: 1px 1px 0 0 }
#reticle .bl { left: 0; bottom: 0; border-width: 0 0 1px 1px } #reticle .br { right: 0; bottom: 0; border-width: 0 1px 1px 0 }
#reticle.lock .c { border-color: var(--pine); width: 12px; height: 12px }
#reticle.lock .tl, #reticle.lock .br { animation: lockin .3s var(--spring) }
@keyframes lockin { from { width: 2px; height: 2px } }
#reticle .rd { position: absolute; left: 100%; top: 100%; margin: 6px 0 0 4px; font: 11px/1.3 var(--f-mono); color: var(--rose); white-space: nowrap; background: rgba(19, 12, 13, .85); padding: 3px 6px; letter-spacing: .08em; text-transform: uppercase }
#reticle .rd:empty { display: none }
#reticle .rd b { color: var(--pine); font-weight: 400 }
#reticle.flip .rd { left: auto; right: 100%; margin: 6px 4px 0 0 }
html.reticle-on, html.reticle-on a, html.reticle-on button { cursor: crosshair }
html.reticle-on .ov, html.reticle-on .ov button { cursor: auto }
html.reticle-on .ov button { cursor: pointer }
html.reticle-on :focus-visible:not(.ov *) { outline-color: transparent }

/* ---------- utility ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
html.shot main, html.shot .hud, html.shot .rail, html.shot #pet, html.shot .scrim, html.shot #nightBanner, html.shot #reticle, html.shot .ov, html.shot body::after { visibility: hidden }
html.shot body::after { display: none }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rail { display: none }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr }
  .construct-wrap { justify-self: start }
  .track { grid-template-columns: repeat(2, 1fr) }
  .gig, .gig.big { grid-column: span 1 }
  .prof { grid-template-columns: minmax(0, 1fr) }
  .hud .stat .opt { display: none }
}
@media (max-width: 760px) {
  .name { font-size: 23vw }
  .kicker span { width: 100% }
  .kicker span::before { content: none }
  .hud nav { display: none }
  .hud .wrap { gap: 10px }
  .hud .stat { margin-left: auto; gap: 10px }
  .hud .stat > span:first-child { display: none }
  .track { grid-template-columns: 1fr }
  .big-stats { grid-template-columns: repeat(2, 1fr) }
  .contact { grid-template-columns: 1fr }
  .b-body { grid-template-columns: 1fr }
  .matrix { grid-template-columns: repeat(5, 1fr); width: 100% }
  .cell { width: auto }
  .construct { transform: rotateZ(2deg); width: min(320px, 100%) }
  .doodle { width: 64px; height: 64px }
  .tx-list { grid-template-columns: 1fr }
  .tx:nth-child(even) { transform: none }
  .scrim { background: linear-gradient(180deg, rgba(19, 12, 13, calc(.55 * var(--heroL, 1))), rgba(19, 12, 13, calc(.75 * var(--heroL, 1)))), linear-gradient(0deg, rgba(19, 12, 13, var(--floor, .35)), rgba(19, 12, 13, 0) 40%), rgba(19, 12, 13, var(--dim, 0)) }
  .descend { display: none }
  .k-row { font-size: 19vw }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important }
  .core { animation: none }
  .mag, .tilt { transform: none }
}
html:not(.js) .copy, html:not(.js) #sndBtn, html:not(.js) #breachBtn, html:not(.js) [data-breach], html:not(.js) [data-rps], html:not(.js) #pet { display: none }