/* ================= ORBIT ================= */
.orbit {
  display: grid; align-items: center; padding-bottom: 30vh;
  background: radial-gradient(120% 80% at 75% 0%, #121a3d 0%, var(--space) 62%);
}
.limb {
  position: absolute; z-index: -1; left: 50%; top: calc(100% - 26vh);
  width: 300vw; height: 300vw; margin-left: -150vw; border-radius: 50%;
  background: radial-gradient(closest-side, var(--night) 97.6%, #3d8de0 99.1%, #bfe6ff 99.65%, rgba(160, 215, 255, 0) 100%);
  box-shadow: 0 0 90px 24px rgba(70, 150, 255, .28), 0 0 260px 80px rgba(60, 110, 255, .14);
}
.limb::after {
  content: ""; position: absolute; left: 50%; top: -10px; width: 46vw; height: 22px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 244, 220, .95), rgba(255, 180, 110, .45) 45%, transparent);
  filter: blur(3px);
}
.hero { padding-top: 4vh; }
.hero-name { font-size: clamp(3.6rem, 1rem + 11vw, 11.5rem); line-height: .86; letter-spacing: -.045em; margin: 0 0 .4em; }
.hero-name span { display: block; font-weight: 300; }
.hero-name em {
  display: block; width: fit-content; padding: 0 .12em 0 .5em; font-weight: 400;
  background: linear-gradient(95deg, #ffe3b3 0%, #ff9d66 42%, #e3577d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.descend {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 1.2rem; opacity: .85; text-decoration: none;
  font: 500 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.descend svg { width: 12px; height: 20px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ================= SUMMIT ================= */
.summit {
  padding-bottom: clamp(300px, 52vh, 620px);
  background: linear-gradient(180deg, var(--night) 0%, #1f1f45 22%, #42295a 40%, #8a4560 56%, #d4704f 68%, #f2a35f 80%, #f8d39a 100%);
}
.summit .lede { text-shadow: 0 1px 18px rgba(11, 26, 51, .5); }
.range { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: clamp(340px, 60vh, 700px); }
.ridge {
  position: absolute; left: 0; bottom: -40px; width: 100%; height: calc(100% + 40px);
  transform: translate3d(0, calc((var(--r, .5) - .5) * var(--d, 0) * 1px), 0);
}
.sun {
  position: absolute; left: 64%; bottom: 46%; width: clamp(90px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff7e0 0 44%, #ffd890 60%, rgba(255, 196, 120, 0) 71%);
  transform: translate3d(-50%, calc((.5 - var(--r, .5)) * 220px), 0);
}
.kit {
  justify-self: end; width: min(100%, 360px); padding: 22px 24px 18px;
  border: 1px solid rgba(243, 236, 223, .32); background: rgba(11, 26, 51, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: .78rem/1.5 var(--mono);
}
.kit h3 { font: 500 .68rem var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.kit ol { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.kit li { counter-increment: k; display: flex; gap: 14px; padding: 9px 0; border-top: 1px dashed rgba(243, 236, 223, .22); }
.kit li::before { content: counter(k, decimal-leading-zero); opacity: .5; }
.kit p { margin: 12px 0 0; font-size: .7rem; opacity: .6; }
@media (max-width: 860px) { .kit { justify-self: start; } }

/* ================= CAMPSITE / MUSIC ================= */
.band-links { display: flex; flex-wrap: wrap; gap: 8px; }
.band-links .chip { text-decoration: none; }
.campfire {
  background:
    radial-gradient(55% 35% at 50% 100%, rgba(255, 122, 50, .22), transparent 70%),
    linear-gradient(180deg, #1a1f2b 0%, #141117 35%, #0f0b0a 100%);
}
.music-grid {
  display: grid; align-items: center; margin: clamp(40px, 6vw, 80px) 0;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px);
}
@media (max-width: 860px) { .music-grid { grid-template-columns: minmax(0, 1fr); } }
.setlist {
  position: relative; max-width: 360px; padding: 30px 30px 26px; rotate: -2.5deg;
  color: var(--ink); background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(23, 20, 15, .06) 33px 34px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}
.setlist::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 120px; height: 28px; translate: -50% 0; rotate: 3deg;
  background: rgba(255, 244, 214, .6); box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.setlist h3 { font: 500 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-bottom: 14px; }
.setlist ol { list-style: none; margin: 0; padding: 0; counter-reset: s; font: 400 1.45rem/1.42 var(--marker); }
.setlist li { counter-increment: s; }
.setlist li::before { content: counter(s) ". "; opacity: .45; font-size: .8em; }
.setlist .encore { margin: 16px 0 0; font: 400 1.05rem/1.3 var(--marker); color: var(--rust); rotate: -1.5deg; }

.foodweb svg { width: 100%; height: auto; overflow: visible; }
.foodweb .edge { fill: none; stroke: rgba(243, 236, 223, .32); stroke-width: 1.2; transition: opacity .25s; }
.foodweb .edge.vibe { stroke: var(--ochre); stroke-dasharray: 3 6; }
.foodweb .node, .foodweb .elabel { transition: opacity .25s; outline: none; }
.foodweb .band { cursor: pointer; }
.foodweb .band circle { stroke: rgba(243, 236, 223, .55); stroke-width: 1; }
.foodweb .band:focus-visible circle { stroke: var(--ochre); stroke-width: 2.5; }
.foodweb text { paint-order: stroke; stroke: #131015; stroke-width: 5px; stroke-linejoin: round; }
.foodweb .band text { font: italic 400 16px var(--serif); fill: var(--cream); text-anchor: middle; }
.foodweb .person circle { fill: var(--cream); }
.foodweb .person text { font: 400 11px var(--mono); fill: var(--cream-dim); }
.foodweb .elabel { font: italic 300 13px var(--serif); fill: var(--ochre); }
.foodweb svg.focus .node:not(.on), .foodweb svg.focus .edge:not(.on), .foodweb svg.focus .elabel:not(.on) { opacity: .14; }

.guitar-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chords { display: flex; flex-wrap: wrap; gap: 8px; }
.amp[aria-pressed="true"] { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
#guitar-canvas {
  width: 100%; height: clamp(170px, 20vw, 240px); border-radius: 6px;
  cursor: crosshair; touch-action: none; box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

/* ================= SEA LEVEL / POOL ================= */
.poolhall {
  background:
    radial-gradient(70% 45% at 50% 68%, rgba(255, 214, 150, .13), transparent 70%),
    linear-gradient(180deg, #0f0b0a 0%, #0c0e0c 40%, #0a0f0c 100%);
}
.pool-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; }
.neon {
  margin: 1.5rem 0 0; rotate: -5deg; text-align: center;
  font: 400 clamp(1.6rem, 1rem + 2vw, 2.6rem)/1 var(--marker);
  color: #ffe4f4; text-shadow: 0 0 2px #fff, 0 0 8px #ff4fb8, 0 0 20px #ff2fa0, 0 0 44px #ff2fa0;
  animation: flicker 8s infinite;
}
.neon span {
  display: block; margin-top: .3em; font-size: .55em; letter-spacing: .1em;
  color: #e2f6ff; text-shadow: 0 0 2px #fff, 0 0 8px #4cc9ff, 0 0 20px #1aa9ff, 0 0 40px #1aa9ff;
}
@keyframes flicker { 0%, 91%, 93%, 96%, 100% { opacity: 1; } 92%, 95% { opacity: .35; } }
.table-wrap { margin-top: clamp(28px, 4vw, 48px); }
#pool-canvas {
  width: 100%; aspect-ratio: 11 / 6; cursor: crosshair; touch-action: none;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6));
}
.pool-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.tray { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-height: 16px; }
.tray i { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset -2px -3px 4px rgba(0, 0, 0, .35); }

/* ================= SHALLOWS ================= */
.shallows {
  min-height: 110vh;
  background: linear-gradient(180deg, #23a2b6 0%, #137fa3 24%, #0d5f86 52%, #09415f 78%, #062a44 100%);
}
.shallows h2, .shallows .lede { text-shadow: 0 2px 24px rgba(4, 40, 64, .45); }
.surface {
  position: absolute; z-index: 1; top: -1px; left: 0; width: calc(100% + 240px); height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v12c-30 0-30 10-60 10S150 12 120 12 90 22 60 22 30 12 0 12z' fill='%230a0f0c'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 26px;
  animation: drift 9s linear infinite;
}
@keyframes drift { to { transform: translateX(-240px); } }
.rays { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 85%; overflow: hidden; pointer-events: none; }
.rays i {
  position: absolute; top: -10%; width: 10vw; min-width: 60px; height: 120%;
  background: linear-gradient(180deg, rgba(220, 250, 255, .5), rgba(220, 250, 255, 0) 80%);
  filter: blur(12px); opacity: .45; transform-origin: 50% 0;
  animation: sway 12s ease-in-out infinite alternate;
}
.rays i:nth-child(1) { left: 6%; --a: 20deg; animation-duration: 13s; }
.rays i:nth-child(2) { left: 24%; --a: 14deg; width: 6vw; animation-duration: 9s; }
.rays i:nth-child(3) { left: 46%; --a: 18deg; animation-duration: 15s; }
.rays i:nth-child(4) { left: 66%; --a: 10deg; width: 14vw; animation-duration: 11s; }
.rays i:nth-child(5) { left: 84%; --a: 16deg; width: 5vw; animation-duration: 8s; }
@keyframes sway { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) - 9deg)); } }
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: .6rem; padding: 8px 16px;
  border: 1px solid rgba(243, 236, 223, .5); border-radius: 999px;
  font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ================= TWILIGHT / LIFE ================= */
.twilight { background: linear-gradient(180deg, #062a44 0%, #041a2e 30%, #030f1d 70%, #020812 100%); }
.twilight .two { align-items: start; }
.lightchart { margin: 2.2rem 0 2rem; max-width: 420px; }
.lightchart svg { width: 100%; height: auto; overflow: visible; }
.lightchart line { stroke: rgba(243, 236, 223, .12); }
.lightchart text { font: 400 10px var(--mono); fill: rgba(243, 236, 223, .6); }
.lightchart .curve { fill: none; stroke: var(--glow); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(127, 245, 220, .6)); }
.lightchart .dot { fill: var(--glow); }
.lightchart .ann { fill: var(--cream); font: italic 400 12px var(--serif); }
.tree { position: sticky; top: 12vh; }
@media (max-width: 860px) { .tree { position: static; } }
.tree svg { width: 100%; height: auto; overflow: visible; }
.tree .br { fill: none; stroke: rgba(243, 236, 223, .26); stroke-width: 1; stroke-linecap: round; }
.tree .br.lit { stroke: var(--glow); stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(127, 245, 220, .75)); }
.tree .tip { fill: rgba(243, 236, 223, .45); }
.tree .tip.lit { fill: #dcfff6; filter: drop-shadow(0 0 5px var(--glow)); }
.js .tree .br { stroke-dasharray: 1; stroke-dashoffset: 1; animation: grow .9s cubic-bezier(.3, .6, .3, 1) var(--d, 0s) forwards paused; }
.js .tree .tip { opacity: 0; animation: fade .6s ease var(--d, 0s) forwards paused; }
.js .tree.in .br, .js .tree.in .tip { animation-play-state: running; }
@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
.tree figcaption .chip { margin-left: 6px; }

/* ================= ABYSS ================= */
.abyss { background: linear-gradient(180deg, #020812 0%, #010409 60%, #000 100%); }
.abyss::before {
  content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: -480px; bottom: 0;
  background:
    radial-gradient(circle 1.2px at 20px 30px, rgba(220, 235, 255, .5) 98%, transparent) 0 0 / 120px 120px,
    radial-gradient(circle 1px at 70px 90px, rgba(220, 235, 255, .32) 98%, transparent) 0 0 / 160px 160px,
    radial-gradient(circle 1.6px at 150px 40px, rgba(127, 245, 220, .4) 98%, transparent) 0 0 / 240px 240px;
  animation: snow 70s linear infinite;
}
@keyframes snow { to { transform: translateY(480px); } }
.turtle {
  position: absolute; z-index: -1; top: 14%; left: 0; width: clamp(130px, 15vw, 230px);
  fill: #0f2a30; stroke: rgba(127, 245, 220, .35); stroke-width: .8;
  filter: drop-shadow(0 0 14px rgba(127, 245, 220, .18));
  animation: swim 70s linear infinite;
}
.turtle .scutes { fill: none; stroke: rgba(127, 245, 220, .22); }
.turtle .ft, .turtle .fb, .turtle .rt, .turtle .rb { animation: paddle 3.6s ease-in-out infinite; }
.turtle .ft { transform-origin: 66px 30px; }
.turtle .fb { transform-origin: 66px 50px; animation-name: paddle-b; }
.turtle .rt { transform-origin: 36px 33px; }
.turtle .rb { transform-origin: 36px 47px; animation-name: paddle-b; }
@keyframes paddle { 50% { transform: rotate(-16deg); } }
@keyframes paddle-b { 50% { transform: rotate(16deg); } }
@keyframes swim {
  from { transform: translate(-25vw, 0); }
  50% { transform: translate(45vw, 30px); }
  to { transform: translate(115vw, -10px); }
}
.mail {
  display: inline-block; margin: .4rem 0 2.6rem; padding-bottom: 6px; text-decoration: none; overflow-wrap: anywhere;
  font: italic 300 clamp(1.5rem, 1rem + 3vw, 3.2rem)/1.1 var(--serif); letter-spacing: -.02em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color .3s, text-shadow .3s;
}
.mail:hover { color: var(--glow); text-shadow: 0 0 22px rgba(127, 245, 220, .5); }
.colophon { border-top: 1px solid rgba(243, 236, 223, .14); padding-top: 22px; font: .72rem/1.7 var(--mono); opacity: .7; }
.colophon p { max-width: 60em; }
.colophon a { text-underline-offset: 3px; }
.clacks { cursor: help; }