/* ─── TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --bg:        #050507;
  --bg-2:      #0b0a10;
  --ink:       #f6f4ef;
  --ink-dim:   rgba(246,244,239,0.55);
  --line:      rgba(246,244,239,0.12);

  /* tweakable trio */
  --c1: #ff2bd6;   /* magenta */
  --c2: #00f0c8;   /* cyan */
  --c3: #ffd86b;   /* gold */

  --maxw: 1480px;
  --pad: clamp(20px, 4vw, 56px);
}
:root[data-mode="light"]{
  --bg:      #f3efe6;
  --bg-2:    #e9e3d4;
  --ink:     #0d0c10;
  --ink-dim: rgba(13,12,16,0.55);
  --line:    rgba(13,12,16,0.18);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:"Sora", ui-sans-serif, system-ui, sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body{ font-size:16px; line-height:1.5; }
::selection{ background:var(--c1); color:#000; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.mono{ font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; }
.upper{ text-transform:uppercase; letter-spacing:0.08em; }
.dim{ color:var(--ink-dim); }
.tab{ font-variant-numeric: tabular-nums; }

/* ─── GLOBAL FX: stars + grain ───────────────────────────────────────── */
.bg-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bg-stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.9), transparent 50%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1.2px 1.2px at 40% 70%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1px 1px at 10% 90%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(.8px .8px at 55% 15%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1.4px 1.4px at 92% 60%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(.8px .8px at 30% 50%, rgba(255,255,255,.45), transparent 50%);
  background-size: 800px 800px;
  animation: drift 80s linear infinite;
  opacity: .8;
}
@keyframes drift{ to{ background-position: 800px 800px; } }
.bg-vignette{
  position:absolute; inset:0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.6) 100%);
}
.bg-grain{
  position:absolute; inset:-10%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size:240px 240px; opacity:.14; mix-blend-mode:overlay;
  animation: grain 1.4s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)}
  40%{transform:translate(7%,-4%)} 60%{transform:translate(-3%,6%)}
  80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

.wrap{ position:relative; z-index:1; }
.row{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ─── NAV ────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: color-mix(in oklch, var(--bg), transparent 45%);
  border-bottom: 1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ height:22px; width:auto; }
.brand-text{ font-family:"JetBrains Mono", monospace; font-weight:600; letter-spacing:.16em; font-size:11px; text-transform:uppercase; opacity:.8; }
.nav-links{ display:flex; gap:28px; font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.nav-links a{ color:var(--ink-dim); transition: color .2s; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a sup{ color:var(--c1); font-size:9px; margin-left:4px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 16px; border-radius:999px; cursor:pointer; user-select:none;
  transition: transform .2s ease, background .2s, color .2s, border-color .2s;
  border: 1px solid transparent; background:transparent; color:inherit;
}
.btn .arr{ transition: transform .2s; }
.btn:hover{ transform: translateY(-1px); }
.btn:hover .arr{ transform: translate(3px, 0); }

.btn-code{ background:#0d0c10; color:var(--ink); border-color:var(--line); }
.btn-code:hover{ border-color: rgba(246,244,239,.4); }
.btn-cta{ border-color:var(--ink); color:var(--ink); }
.btn-cta:hover{ background: var(--ink); color:#000; }
.btn-pill{ background: var(--c1); color:#000; border-color: transparent; }
.btn-pill:hover{ background: var(--c3); }

.nav-cta{ padding:9px 14px; border:1px solid var(--ink); border-radius:999px;
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; gap:8px; align-items:center; transition: all .2s;
}
.nav-cta:hover{ background:var(--ink); color:#000; }
.nav-cta:hover .arr{ transform: translateX(3px); }

/* ─── HERO ───────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height: 100vh;
  display:grid; place-items:center;
  padding: 100px var(--pad) 60px;
  overflow:visible;
}
.hero-stage{
  position:relative;
  width: min(900px, 88vw); aspect-ratio: 1 / 1;
  display:grid; place-items:center;
  margin: 0 auto;
}
.ring-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  animation: ringspin 120s linear infinite;
  filter: saturate(1.1);
}
.ring-canvas.b{
  animation-duration: 60s; animation-direction: reverse;
  opacity:.7;
  mix-blend-mode: screen;
}
@keyframes ringspin{ to{ transform: rotate(360deg); } }
.crown-glow{
  position:absolute; inset:8%; border-radius:50%;
  background:
    radial-gradient(circle at 50% 55%,
      color-mix(in oklch, var(--c3), transparent 35%) 0%,
      color-mix(in oklch, var(--c1), transparent 60%) 30%,
      color-mix(in oklch, var(--c2), transparent 78%) 55%,
      transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.85; transform:scale(1)} 50%{opacity:1; transform:scale(1.05)} }
.crown-3d{
  position:relative; width: 70%; aspect-ratio: 1/1;
  z-index:2;
}
.crown-3d canvas{ width:100% !important; height:100% !important; display:block; }
.crown-loading{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:"JetBrains Mono", monospace; font-size:11px;
  letter-spacing:.18em; color:var(--ink-dim); text-transform:uppercase;
}
.crown-loading::after{ content:"_"; animation: blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* Hero copy frame around the stage */
.hero-frame{
  position:absolute; inset: 0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(40px,6vw,80px) var(--pad);
  pointer-events:none;
}
.hero-frame > *{ pointer-events:auto; }

.hero-top, .hero-bot{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  font-family:"JetBrains Mono", monospace; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
  width:100%;
}
.hero-top b, .hero-bot b{ color:var(--ink); font-weight:500; }
.hero-top .right, .hero-bot .right{ text-align:right; }
.hero-bot{ align-items:flex-end; }

.hero-title{
  position:absolute; left:0; right:0; top:50%;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
  transform: translateY(-50%);
}
.hero-title h1{
  margin:0; font-family:"Sora", sans-serif; font-weight:300;
  font-size: clamp(64px, 13.5vw, 220px);
  line-height: .82; letter-spacing: -0.05em;
  text-transform:uppercase;
  text-align:center; white-space:nowrap;
  background: linear-gradient(180deg, #fff 0%, #fff 55%, color-mix(in oklch, var(--c3), white 20%) 100%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
  text-shadow: 0 0 80px color-mix(in oklch, var(--c1), transparent 80%);
}
.hero-title h1 .word{ display:inline-block; }
.hero-title h1 .char{ display:inline-block; opacity:0; transform: translateY(0.4em) rotateX(-40deg); }
.hero-title .tag{
  margin-top: clamp(14px, 1.4vw, 22px);
  font-family:"JetBrains Mono", monospace;
  font-size: clamp(11px, 1vw, 13px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim); opacity:0; transform: translateY(8px);
  display:flex; align-items:center; gap:14px;
}
.hero-title .tag i{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--c1);
  box-shadow: 0 0 14px var(--c1);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.4; transform:scale(.7) } }

.hero-cta{
  position:absolute; left:50%; bottom: clamp(60px, 8vh, 100px);
  transform:translateX(-50%);
  display:flex; gap:14px; opacity:0;
}

/* ─── MARQUEE ────────────────────────────────────────────────────────── */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding: 18px 0;
  background: rgba(0,0,0,.35);
}
.marquee-track{
  display:flex; gap:48px; white-space:nowrap;
  animation: scroll 36s linear infinite;
  font-family:"JetBrains Mono", monospace; font-size: clamp(15px,1.6vw,22px);
  letter-spacing:.1em; text-transform:uppercase;
}
.marquee-track > span{ display:inline-flex; align-items:center; gap:48px; padding-right:48px; }
.marquee-track em{ font-style:normal; color: var(--c1); }
.marquee-track em:nth-of-type(3n+2){ color: var(--c2); }
.marquee-track em:nth-of-type(3n){ color: var(--c3); }
@keyframes scroll{ to{ transform: translateX(-50%); } }

/* ─── SECTION HEAD ──────────────────────────────────────────────────── */
.section{ position:relative; padding: clamp(80px,10vw,160px) 0; }
.section-head{
  display:grid; grid-template-columns: auto 1fr auto; gap: clamp(20px,3vw,40px);
  align-items:baseline; margin-bottom: clamp(36px,5vw,64px);
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.section-no{
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; color:var(--ink-dim);
  text-transform:uppercase;
}
.section-title{
  margin:0; font-family:"Sora", sans-serif; font-weight:300;
  font-size: clamp(32px,5vw,72px); letter-spacing:-0.03em; line-height:.95;
}
.section-title em{ font-style:normal;
  background: linear-gradient(90deg, var(--c1), var(--c3) 50%, var(--c2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-kicker{ font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--ink-dim); letter-spacing:.16em; text-transform:uppercase; }

/* ─── WORKS / MIX GRID ──────────────────────────────────────────────── */
.mix-grid{
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.mix{
  position:relative; overflow:hidden; border-radius:18px;
  background: var(--bg-2); border:1px solid var(--line);
  isolation:isolate; cursor:pointer;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.mix:hover{ transform: translateY(-6px); border-color: color-mix(in oklch, var(--c1), transparent 40%); }
.mix .art{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  background: #000;
}
.mix .art img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .4s;
  filter: saturate(1.1);
}
.mix:hover .art img{ transform: scale(1.06); filter: saturate(1.25); }
.mix .art::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
.mix .badge{
  position:absolute; left:14px; top:14px; z-index:2;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink); padding:5px 9px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  backdrop-filter: blur(8px);
}
.mix .badge.hot{ background: var(--c1); color:#000; border-color: transparent; }
.mix .dur{
  position:absolute; right:14px; top:14px; z-index:2;
  font-family:"JetBrains Mono", monospace; font-size:11px;
  color: #fff; padding:5px 8px;
  background: rgba(0,0,0,.5);
  border-radius:6px;
}
.mix .play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:80px; height:80px; border-radius:50%;
  background: rgba(0,0,0,.5); color:#fff;
  border:1px solid rgba(255,255,255,.4);
  display:grid; place-items:center; z-index:2;
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.1em;
  backdrop-filter: blur(8px);
  transition: transform .3s, background .3s, border-color .3s;
}
.mix:hover .play{ transform: translate(-50%,-50%) scale(1.12); background: var(--c1); border-color: var(--c1); color:#000; }
.mix .meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 16px 18px 18px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:14px;
  color:#fff;
}
.mix .meta h3{
  margin:0; font-family:"Sora", sans-serif; font-weight:500;
  font-size: clamp(17px,1.5vw,22px); letter-spacing:-0.01em; line-height:1.15;
}
.mix .meta .sub{
  font-family:"JetBrains Mono", monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-top:5px;
}
.mix .meta .stat{
  font-family:"JetBrains Mono", monospace; font-size:11px; opacity:.65; text-align:right; white-space:nowrap;
}

.mix.span-7{ grid-column: span 7; }
.mix.span-5{ grid-column: span 5; }
.mix.span-4{ grid-column: span 4; }
.mix.span-8{ grid-column: span 8; }
.mix.span-6{ grid-column: span 6; }
.mix.span-3{ grid-column: span 3; }
@media (max-width:1000px){
  .mix.span-3,.mix.span-4,.mix.span-5,.mix.span-6,.mix.span-7,.mix.span-8{ grid-column: span 12; }
}

/* ─── VIDEO GRID (YT thumbnails) ────────────────────────────────────── */
.vid-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.vid-grid .feat{ grid-column: span 2; grid-row: span 2; }
@media (max-width:1100px){ .vid-grid{ grid-template-columns: repeat(3, 1fr); } .vid-grid .feat{ grid-column: span 2; grid-row: span 2; } }
@media (max-width:760px){ .vid-grid{ grid-template-columns: repeat(2, 1fr); } .vid-grid .feat{ grid-column: span 2; grid-row: auto; } }

.vid{
  position:relative; overflow:hidden; border-radius:14px;
  background:#000; border:1px solid var(--line); cursor:pointer;
  isolation:isolate; aspect-ratio: 16/9;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.vid.feat{ aspect-ratio: 1/1; }
.vid:hover{ transform: translateY(-4px); border-color: color-mix(in oklch, var(--c1), transparent 30%); box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklch, var(--c1), transparent 50%); }
.vid img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .3s;
  filter: saturate(1.1);
}
.vid:hover img{ transform: scale(1.06); filter: saturate(1.3); }
.vid::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, transparent 30%, rgba(0,0,0,.85) 100%);
}
.vid .v-title{
  position:absolute; left:12px; bottom:12px; right:60px; z-index:2;
  font-family:"Sora", sans-serif; font-weight:600;
  font-size: clamp(13px, 1.1vw, 17px); letter-spacing:-0.01em;
  color:#fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.vid.feat .v-title{ font-size: clamp(18px, 1.6vw, 26px); }
.vid .v-sub{
  position:absolute; left:12px; top:12px; z-index:2;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color: #fff; padding:4px 8px; background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  backdrop-filter: blur(8px);
}
.vid .v-play{
  position:absolute; right:12px; bottom:12px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.95); color:#000;
  display:grid; place-items:center; font-size:11px;
  transition: transform .25s, background .25s;
}
.vid.feat .v-play{ width:60px; height:60px; font-size: 14px; }
.vid:hover .v-play{ background: var(--c1); color:#fff; transform: scale(1.1); }

/* ─── MODAL VIDEO PLAYER ────────────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center;
  padding: 4vw;
  backdrop-filter: blur(20px);
}
.modal.open{ display:flex; animation: modalIn .2s ease-out; }
@keyframes modalIn{ from{ opacity:0 } to{ opacity:1 } }
.modal-in{
  position:relative; width: min(1280px, 100%); aspect-ratio: 16/9;
  border-radius: 18px; overflow:hidden;
  box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
  background:#000;
}
.modal-in iframe{ width:100%; height:100%; border:0; display:block; }
.modal-close{
  position:absolute; top:-44px; right:0;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color:#fff; cursor:pointer;
  font-family:"JetBrains Mono", monospace; font-size:16px;
  display:grid; place-items:center;
  transition: background .2s, transform .2s;
}
.modal-close:hover{ background: var(--c1); border-color: var(--c1); color:#000; transform: rotate(90deg); }
.modal-meta{
  position:absolute; left:0; top:-44px;
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.7);
  display:flex; align-items:center; gap:14px;
}
.modal-meta b{ color:#fff; font-weight:500; }

/* ─── ABOUT BIO — long-form ─────────────────────────────────────────── */
.about-grid{ grid-template-columns: 5fr 7fr; }
.bio.long h2{ font-size: clamp(28px,3.6vw,52px); margin-bottom: 28px; }
.bio.long p{ max-width: 64ch; }
.bio.long p.lede{ font-size: clamp(17px,1.3vw,21px); line-height:1.5; color:var(--ink); font-weight:300; }
.bio.long p.lede + p.lede{ margin-top: 10px; }
.bio.long .pull{
  margin: 40px 0; padding: 24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:"Sora", sans-serif; font-weight:300;
  font-size: clamp(22px, 2.4vw, 34px); line-height:1.2; letter-spacing:-0.02em;
  color: var(--ink);
}
.bio.long .pull span{
  background: linear-gradient(90deg, var(--c1) 0%, var(--c3) 60%, var(--c2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bio.long .set-list{
  margin: 28px 0; padding: 0; list-style:none;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px;
}
.bio.long .set-list li{
  font-family:"JetBrains Mono", monospace; font-size: 12.5px;
  display:flex; gap:10px; align-items:baseline;
  color: var(--ink-dim);
}
.bio.long .set-list li::before{
  content:"+"; color: var(--c1); font-weight:600;
}
.bio.long .set-list li b{ color: var(--ink); font-weight:500; }
@media (max-width: 760px){ .bio.long .set-list{ grid-template-columns: 1fr; } }

/* Inline photo figure */
.bio-figure{
  margin: 40px 0; padding: 0;
  display:flex; flex-direction:column; gap: 14px;
}
.bio-figure-frame{
  position:relative; aspect-ratio: 16/9; border-radius: 16px; overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  isolation: isolate;
}
.bio-figure-frame img{
  width:100%; height:100%; object-fit: cover; display:block;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .3s;
  filter: saturate(1.15) contrast(1.05);
}
.bio-figure:hover .bio-figure-frame img{ transform: scale(1.03); }
.bio-figure-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45) 100%),
    radial-gradient(120% 60% at 50% 100%, color-mix(in oklch, var(--c1), transparent 80%), transparent 60%);
  mix-blend-mode: screen;
}
.bio-figure-stamp{
  position:absolute; left:14px; top:14px; z-index:2;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; padding:6px 10px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  backdrop-filter: blur(8px);
}
.bio-figure figcaption{
  font-family:"JetBrains Mono", monospace; font-size: 12px; line-height:1.5;
  color: var(--ink-dim); letter-spacing:.02em; max-width: 64ch;
  padding-left: 14px; border-left: 2px solid var(--c1);
}
.bio-figure figcaption b{ color: var(--ink); font-weight:600; letter-spacing:.06em; }
.bio-figure figcaption i{ color: var(--c1); font-style: normal; font-weight:600; }

/* Duality block */
.duality{
  display:grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items:stretch;
  margin: 48px 0;
}
.duality .col{
  padding: 28px;
  border:1px solid var(--line); border-radius:18px;
  background: color-mix(in oklch, var(--bg-2), transparent 30%);
  position:relative; overflow:hidden;
}
.duality .col h4{
  margin:0 0 12px; font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink-dim);
}
.duality .col .name{
  font-family:"Sora", sans-serif; font-weight:500;
  font-size: clamp(22px,2.4vw,30px); margin: 0 0 16px; letter-spacing:-0.02em;
}
.duality .col p{ font-size:14px; line-height:1.5; color:var(--ink); margin:0; max-width:none; }
.duality .col.left .name{ color: #fff; }
.duality .col.right .name{
  background: linear-gradient(90deg, var(--c1), var(--c3), var(--c2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.duality .col.right::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in oklch, var(--c1), transparent 70%), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, color-mix(in oklch, var(--c2), transparent 70%), transparent 60%);
  pointer-events:none; opacity:.6;
}
.duality .vs{
  align-self:center; font-family:"JetBrains Mono", monospace; font-size:11px;
  letter-spacing:.16em; color: var(--ink-dim); padding: 0 8px;
}
.duality .summary{
  margin-top: -10px; font-family:"JetBrains Mono", monospace; font-size:12px;
  color: var(--ink-dim); text-align:center; max-width:50ch; margin-left:auto; margin-right:auto;
  letter-spacing:.04em;
}
@media (max-width:760px){
  .duality{ grid-template-columns: 1fr; }
  .duality .vs{ text-align:center; }
}

/* ─── UPCOMING SHOWS ────────────────────────────────────────────────── */
.shows{ padding:0; margin-top: clamp(40px,5vw,72px); }
.shows-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.shows-list li{
  display:grid; grid-template-columns: 130px 1fr 1fr 1fr auto;
  gap: clamp(14px,2vw,28px); align-items:center;
  padding: 22px 0; border-bottom:1px solid var(--line);
  font-family:"JetBrains Mono", monospace; font-size: 13px;
  transition: padding .25s ease, background .25s ease;
}
.shows-list li:hover{ padding-left: 12px; padding-right: 12px; background: color-mix(in oklch, var(--bg-2), transparent 50%); }
.shows-list .date{ color: var(--c1); letter-spacing:.08em; text-transform:uppercase; }
.shows-list .venue{ font-family:"Sora", sans-serif; font-size: clamp(18px,1.5vw,22px); font-weight:500; letter-spacing:-0.01em; color:var(--ink); }
.shows-list .city{ color: var(--ink-dim); text-transform:uppercase; letter-spacing:.12em; }
.shows-list .kind{ color: var(--ink-dim); text-transform:uppercase; letter-spacing:.12em; }
.shows-list .cta{
  display:inline-flex; gap:6px; align-items:center; padding: 8px 14px;
  border:1px solid var(--line); border-radius:999px;
  font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.shows-list .cta:hover{ background:var(--c1); border-color: var(--c1); color:#000; }
@media (max-width:880px){
  .shows-list li{ grid-template-columns: 1fr; gap:6px; padding:18px 0; }
  .shows-list .cta{ justify-self:start; margin-top:6px; }
}

/* ─── ABOUT ─────────────────────────────────────────────────────────── */
.about-grid{
  display:grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 2fr);
  gap: clamp(28px,4vw,72px); align-items:start;
}
@media (max-width:1000px){ .about-grid{ grid-template-columns: 1fr; } }

.portrait{
  position: sticky; top: 92px;
  aspect-ratio: 4/5; border-radius:24px; overflow:hidden;
  background:#000; border:1px solid var(--line); isolation:isolate;
}
@media (max-width:1000px){ .portrait{ position: relative; top:0; } }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--c1), transparent 65%), transparent 35%),
    linear-gradient(-30deg, color-mix(in oklch, var(--c2), transparent 70%), transparent 40%);
  mix-blend-mode: color-dodge; pointer-events:none;
}
.portrait .corner-tag{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color: #fff; padding:6px 10px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.25); border-radius:999px;
  backdrop-filter: blur(8px);
}
.portrait .corner-tag i{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: #19c37d; margin-right:8px; box-shadow:0 0 10px #19c37d;
}

.bio h2{
  margin:0 0 24px; font-family:"Sora", sans-serif; font-weight:300;
  font-size: clamp(28px,3.6vw,52px); line-height:1.05; letter-spacing:-0.02em;
}
.bio h2 em{ font-style:normal;
  background: linear-gradient(90deg, var(--c1) 0%, var(--c3) 60%, var(--c2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bio p{ font-size: clamp(15px,1.1vw,17px); line-height:1.65; color:var(--ink); max-width:60ch; text-wrap:pretty; }
.bio p + p{ margin-top: 14px; }
.bio p b{ font-weight:600; }

.bio-stats{
  margin-top: 36px; display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
  border-top:1px solid var(--line); padding-top:24px;
}
.bio-stats div{ font-family:"JetBrains Mono", monospace; }
.bio-stats .k{ font-size: clamp(26px,2.4vw,36px); font-weight:500; letter-spacing:-0.02em; color:var(--ink); }
.bio-stats .k span{ color:var(--ink-dim); font-size:.6em; margin-left:4px; }
.bio-stats .l{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-top:6px; }

.bio-list{ margin-top: 36px; padding:0; border-top:1px solid var(--line); }
.bio-list li{
  list-style:none; display:grid; grid-template-columns: 80px 1.2fr 1fr auto; gap:16px;
  padding: 14px 0; border-bottom:1px solid var(--line);
  font-family:"JetBrains Mono", monospace; font-size:12px; align-items:baseline;
}
.bio-list li .yr{ color: var(--ink-dim); letter-spacing:.1em; }
.bio-list li .vn{ text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--ink); }
.bio-list li .city{ color: var(--ink-dim); text-transform:uppercase; letter-spacing:.1em; }
.bio-list li .role{ color: var(--c1); letter-spacing:.1em; text-transform:uppercase; }

/* ─── FULL BLEED IMAGE ──────────────────────────────────────────────── */
.bleed{
  position:relative; height: 76vh; min-height: 520px; overflow:hidden;
  margin: clamp(60px,8vw,120px) 0;
}
.bleed img{ width:100%; height:100%; object-fit:cover; }
.bleed::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.85) 100%);
}
.bleed .overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end;
  padding: clamp(28px,5vw,64px) var(--pad);
}
.bleed-text{
  max-width: var(--maxw); margin: 0 auto; width:100%;
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:flex-end;
}
.bleed-text h3{
  margin:0; font-family:"Sora", sans-serif; font-weight:300;
  font-size: clamp(36px,6vw,84px); line-height:.95; letter-spacing:-0.03em;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.bleed-text .meta{
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color: rgba(255,255,255,.85); text-align:right;
}

/* ─── BOOK / FOOTER ────────────────────────────────────────────────── */
.book{
  position:relative; border:1px solid var(--line); border-radius:28px;
  padding: clamp(40px,6vw,84px) clamp(28px,4vw,64px);
  overflow:hidden; isolation:isolate;
  background: var(--bg-2);
}
.book::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in oklch, var(--c1), transparent 60%), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in oklch, var(--c2), transparent 60%), transparent 60%),
    radial-gradient(50% 60% at 50% 100%, color-mix(in oklch, var(--c3), transparent 70%), transparent 60%);
  filter: blur(20px); opacity:.9;
}
.book-in{ position:relative; z-index:1; display:grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items:end; }
@media (max-width:1000px){ .book-in{ grid-template-columns: 1fr; } }
.book h2{
  margin:0; font-family:"Sora", sans-serif; font-weight:300;
  font-size: clamp(48px,8vw,140px); line-height:.88; letter-spacing:-0.04em;
}
.book h2 em{ font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.book .side{ font-family:"JetBrains Mono", monospace; font-size:13px; letter-spacing:.04em; }
.book .side a{ display:flex; justify-content:space-between; gap:12px; padding: 14px 0; border-top:1px solid var(--line); color:var(--ink-dim); transition: color .2s; }
.book .side a:last-child{ border-bottom:1px solid var(--line); }
.book .side a:hover{ color:var(--ink); }
.book .side a span{ color:var(--ink); }

footer{
  padding: 40px 0 60px; margin-top: 80px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-dim);
}
footer .left{ display:flex; align-items:center; gap:12px; }
footer .left img{ height:18px; opacity:.7; }

/* ─── SCROLL REVEAL ─────────────────────────────────────────────────── */
.r{ opacity:0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.r.in{ opacity:1; transform:none; }
.r.r-d1{ transition-delay:.08s; }
.r.r-d2{ transition-delay:.16s; }
.r.r-d3{ transition-delay:.24s; }
.r.r-d4{ transition-delay:.32s; }
.r.from-l{ transform: translateX(-40px); }
.r.from-l.in{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .r{ opacity:1; transform:none; }
  .ring-canvas, .bg-stars, .bg-grain, .marquee-track, .crown-glow{ animation:none !important; }
}