/* ============================================================
   VAVS — one-page artist site
   Near-black canvas, pink→purple neon, heavy display type
   ============================================================ */

/* self-hosted fonts (no Google CDN call) — see fonts/fonts.css */
@import url('fonts/fonts.css');

:root{
  --bg:        #07070a;
  --bg-2:      #0c0c11;
  --panel:     #121219;
  --panel-2:   #16161f;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.05);
  --text:      #f3f3f6;
  --muted:     #8c8c98;
  --muted-2:   #5c5c68;

  /* Vice City neon — hot pink → purple → cyan (var names kept for compatibility) */
  --green:   #ff2e88;   /* primary accent (hot pink) */
  --blue: #22d3ff;      /* secondary accent (cyan) */
  --green-soft:   rgba(255,46,136,.5);
  --blue-soft: rgba(34,211,255,.5);
  --grad:   linear-gradient(108deg, #ff2e88 0%, #b24bff 50%, #22d3ff 100%);
  --grad-r: linear-gradient(108deg, #22d3ff 0%, #b24bff 50%, #ff2e88 100%);

  --display: 'Archivo Black', 'Archivo', system-ui, sans-serif;   /* heavy grotesque display face (OFL) */
  --sans:    'Space Grotesk', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* diagonal hairlines as a fixed backdrop texture — sits behind all content
   (z-index:-1), so it only shows through on the dark/empty areas of the page. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.11) 0 1px, transparent 1px 84px);
}
::selection{ background:var(--green); color:#fff; }

/* page scrollbar — neon, matched to the palette (gallery opts out separately) */
html{ scrollbar-width:thin; scrollbar-color:var(--green) var(--bg); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--grad); border-radius:10px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--grad-r); }
::-webkit-scrollbar-corner{ background:var(--bg); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; background:none; border:none; }
canvas{ display:block; }

/* grain overlay — whole page */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* kicker / mono label */
.kicker{
  font-family:var(--mono); font-size:15px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:10px;
}
.kicker .dot{ display:none; }

/* section heading */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.sec-title{
  font-family:var(--display); font-weight:900; line-height:1.02;
  font-size:clamp(40px,7vw,86px); letter-spacing:-.02em; text-transform:uppercase;
}
.sec-title em{ font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--muted-2); }
.sec-title .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(7,7,10,.72); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:14px 32px; border-bottom:1px solid var(--line-2);
}
.nav-logo{ display:inline-flex; align-items:center; font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:.04em; }
.nav-logo .v{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-logo img{ height:30px; width:auto; display:block; }
@media (max-width:430px){ .nav-logo img{ height:26px; } }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-family:var(--mono); font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  position:relative; padding:6px 0; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--grad); transition:right .35s var(--ease-out);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ right:0; }
.nav-eq{ display:flex; align-items:flex-end; gap:3px; height:14px; }
.nav-eq span{ width:3px; background:var(--green); border-radius:2px; height:30%; }
.nav-eq.live span{ animation:eq .9s ease-in-out infinite; }
.nav-eq.live span:nth-child(2){ animation-delay:.25s; }
.nav-eq.live span:nth-child(3){ animation-delay:.5s; }
@keyframes eq{ 0%,100%{height:25%} 50%{height:100%} }
/* keep the anchor links visible on mobile — just tighten them so they fit next to the logo */
@media (max-width:720px){
  .nav{ padding:16px 16px; }
  .nav.scrolled{ padding:12px 16px; }
  .nav-links{ gap:13px; }
  .nav-links a{ font-size:11px; letter-spacing:.08em; }
}
@media (max-width:430px){
  .nav-links{ gap:9px; }
  .nav-links a{ font-size:10px; letter-spacing:.03em; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:13vh 0 6vh; overflow:hidden; z-index:2; }

.hero-inner{ position:relative; z-index:3; width:100%; }
.hero-kicker{ margin-bottom:20px; }

/* THE wordmark */
.wordmark{
  position:relative; font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(96px,26vw,360px); line-height:.82; letter-spacing:-.03em; display:inline-block;
}
.wordmark .row{ position:relative; z-index:1; display:flex; }
.wm-letter{
  position:relative; display:inline-block;
  /* horizontal padding gives the clipped gradient room to fill the glyph's overhang
     (the V/A diagonal tips); the equal negative margin keeps the visual spacing. */
  padding:0 .09em; margin:0 -.09em;
  background:linear-gradient(108deg,#ff2e88,#b24bff 48%,#22d3ff 92%);
  background-size:220% 100%; background-position:0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s linear infinite;
  will-change:opacity, transform, background-position;
}
@keyframes shimmer{ to{ background-position:220% 0; } }

/* soft neon glow that breathes behind the title — pushes it into the background.
   Only opacity/scale animate (cheap); the heavy blur is static. */
.wm-glow{
  position:absolute; left:0; top:0; z-index:0; pointer-events:none; user-select:none;
  font:inherit; letter-spacing:inherit; text-transform:inherit; white-space:nowrap;
  background:linear-gradient(108deg,#ff2e88,#b24bff 48%,#22d3ff 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:blur(28px); opacity:0;
  /* stay hidden during the entrance delay, fade in with the letters, then breathe */
  animation:wm-glow-in 800ms var(--ease-out) 520ms both, wm-breathe 5.5s ease-in-out 1320ms infinite;
}
@keyframes wm-glow-in{ from{ opacity:0; } to{ opacity:.3; } }
@keyframes wm-breathe{
  0%,100%{ opacity:.3;  transform:scale(1); }
  50%    { opacity:.62; transform:scale(1.03); }
}

/* glitch layers (sit on the whole wordmark) — chromatic RGB split: cyan + magenta
   ghosts slice and offset in opposite directions, firing in several short bursts. */
.glitch{ position:relative; }
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; inset:0; z-index:2; font:inherit; text-transform:inherit;
  pointer-events:none; opacity:0; will-change:opacity, transform, clip-path;
}
.glitch::before{ color:#1ef0ff; text-shadow:0 0 18px rgba(30,240,255,.5); }   /* cyan */
.glitch::after{  color:#ff3bd0; text-shadow:0 0 18px rgba(255,59,208,.45); }  /* magenta */
.glitch.go::before{ animation:gl-a 4.8s steps(2,end) infinite; }
.glitch.go::after{  animation:gl-b 4.8s steps(2,end) infinite; }
@keyframes gl-a{
  0%,15%,21%,48%,53%,85%,91%,100%{ opacity:0; transform:translate(0); clip-path:inset(0 0 100% 0); }
  16%{ opacity:.9; transform:translate(-6px,-2px); clip-path:inset(8% 0 64% 0); }
  18%{ opacity:.8; transform:translate(5px,1px);   clip-path:inset(44% 0 22% 0); }
  20%{ opacity:.7; transform:translate(-3px,2px);  clip-path:inset(74% 0 6% 0); }
  49%{ opacity:.9; transform:translate(-7px,1px);  clip-path:inset(30% 0 40% 0); }
  51%{ opacity:.75;transform:translate(4px,-2px);  clip-path:inset(60% 0 16% 0); }
  86%{ opacity:.85;transform:translate(-5px,-1px); clip-path:inset(4% 0 80% 0); }
  88%{ opacity:.7; transform:translate(6px,2px);   clip-path:inset(52% 0 28% 0); }
}
@keyframes gl-b{
  0%,14%,20%,47%,52%,84%,90%,100%{ opacity:0; transform:translate(0); clip-path:inset(0 0 100% 0); }
  15%{ opacity:.85;transform:translate(6px,2px);   clip-path:inset(18% 0 52% 0); }
  17%{ opacity:.8; transform:translate(-5px,-1px); clip-path:inset(56% 0 26% 0); }
  19%{ opacity:.65;transform:translate(4px,-2px);  clip-path:inset(2% 0 84% 0); }
  48%{ opacity:.85;transform:translate(7px,-1px);  clip-path:inset(38% 0 34% 0); }
  50%{ opacity:.7; transform:translate(-4px,2px);  clip-path:inset(68% 0 10% 0); }
  85%{ opacity:.8; transform:translate(5px,1px);   clip-path:inset(12% 0 70% 0); }
  87%{ opacity:.65;transform:translate(-6px,-2px); clip-path:inset(46% 0 30% 0); }
}

.hero-tag{
  margin-top:34px; max-width:540px; font-size:clamp(16px,1.5vw,20px); color:var(--muted); line-height:1.55;
}
.hero-tag b{ color:var(--text); font-weight:600; }

.scrollcue{
  position:absolute; left:32px; bottom:30px; z-index:3; display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:14px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2);
}
.scrollcue .bar{ width:48px; height:1px; background:var(--muted-2); position:relative; overflow:hidden; }
.scrollcue .bar::after{ content:''; position:absolute; inset:0; width:40%; background:var(--green); animation:slidebar 2.2s var(--ease) infinite; }
@keyframes slidebar{ 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }

@keyframes fadeUp{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)} }

/* ============================================================
   SECTION shell
   ============================================================ */
.section{ position:relative; z-index:2; padding:140px 0; }
/* translucent lift (not an opaque fill) so the single fixed backdrop lines show
   straight through — keeps every section's lines from the same fixed source. */
.section.music{ background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.018) 30%, rgba(255,255,255,.018) 70%, transparent 100%); padding-top:96px; padding-bottom:48px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.vis{ opacity:1; transform:none; }

/* ============================================================
   VINYL CAROUSEL
   ============================================================ */
/* minmax(0,…) so a long single-word title (e.g. "Straßenrennen") can't push its
   column past its fr share and shrink the stage/vinyl — the columns hold size
   regardless of track title; the title wraps instead (see .p-title). */
.player{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:64px; align-items:center; }
@media (max-width:900px){ .player{ grid-template-columns:1fr; gap:48px; } }
@media (max-width:520px){ .stage{ width:76%; } }   /* gutter so the slid-out record + tonearm stay within the viewport */

.stage{
  position:relative; width:100%; aspect-ratio:1/1; max-width:520px; margin:0 auto;
  perspective:1400px; --slide:42%;
}
.stage-glow{
  position:absolute; inset:-12% -12% -18% -12%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 60% 45%, var(--blue-soft), transparent 62%);
  filter:blur(46px); opacity:.7; transition:background .8s var(--ease); will-change:transform;
}

/* the record */
.vinyl{
  position:absolute; top:6%; left:6%; width:80%; height:80%; border-radius:50%; z-index:1;
  background:
    repeating-radial-gradient(circle at 50% 50%, #101015 0px, #1c1c24 1.3px, #101015 2.6px),
    radial-gradient(circle at 38% 32%, #34343f 0%, #15151b 45%, #0c0c11 100%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 2px rgba(255,255,255,.05), inset 0 0 36px rgba(0,0,0,.55), 0 0 60px rgba(31,139,255,.16);
  transform:translateX(0) rotate(0deg);
  will-change:transform;
}
.vinyl::before{ /* sheen */
  content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 200deg, transparent 0deg, rgba(255,255,255,.07) 30deg, transparent 70deg, transparent 200deg, rgba(255,255,255,.05) 240deg, transparent 290deg);
  mix-blend-mode:screen;
}
.vinyl .label{
  position:absolute; left:50%; top:50%; width:38%; height:38%; transform:translate(-50%,-50%);
  border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
  background:var(--grad);
}
.vinyl .label .lab-t{ font-family:var(--display); font-weight:900; font-size:clamp(11px,1.9vw,16px); line-height:1; text-transform:uppercase; letter-spacing:-.01em; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.3); }
.vinyl .label .lab-s{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.8); margin-top:4px; }
.vinyl .hole{ position:absolute; left:50%; top:50%; width:3.2%; height:3.2%; transform:translate(-50%,-50%); border-radius:50%; background:#050507; box-shadow:0 0 0 2px rgba(255,255,255,.06); }


/* the sleeve / cover — larger than the record, which peeks out behind it */
.sleeve{
  position:absolute; top:2%; left:0%; width:92%; height:92%; z-index:2; border-radius:6px; overflow:hidden;
  box-shadow:0 40px 80px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  transform-origin:center; will-change:opacity, transform; cursor:pointer;
}
.cover{ position:absolute; inset:0; }
.cover .ph{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px);
}
.cover .meta{ position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:space-between; }
.cover .meta .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.cover .meta .num{ font-family:var(--mono); font-size:15px; letter-spacing:.2em; color:rgba(255,255,255,.65); }
.cover .meta .brand{ font-family:var(--display); font-weight:900; font-size:18px; letter-spacing:.06em; color:rgba(255,255,255,.9); }
.cover .meta .ct{ font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:1.02; font-size:clamp(26px,4.6vw,42px); letter-spacing:-.02em; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.cover .meta .cs{ font-family:var(--mono); font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:8px; }
.cover .ring{ position:absolute; right:-30%; top:-30%; width:80%; height:80%; border-radius:50%; border:1px solid rgba(255,255,255,.16); z-index:1; }
.cover .ring.two{ right:-18%; top:-18%; width:55%; height:55%; }
/* Spotify cover art on a black square: `contain` keeps the whole artwork at a
   uniform sleeve size — square covers fill it, while any odd/low-res cover is
   centred with black fill instead of being cropped. Scrim keeps text legible. */
.cover .cover-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; z-index:0; }
.cover .cover-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,7,10,.46) 0%, rgba(7,7,10,.05) 30%, rgba(7,7,10,.10) 55%, rgba(7,7,10,.78) 100%); }
.cover .meta{ z-index:2; }

/* sleeve opening hint (top) */
.sleeve::after{ content:''; position:absolute; top:0; left:8%; right:8%; height:5%; background:linear-gradient(180deg, rgba(0,0,0,.35), transparent); z-index:3; }

/* tonearm — pivots top-centre, drops the stylus onto the VISIBLE right crescent of the record */
.tonearm{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.ta-base{ position:absolute; top:1%; left:85%; width:12%; height:12%; border-radius:24%; background:linear-gradient(150deg,#2a2a33,#0f0f14); box-shadow:0 5px 12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07); }
.ta-base::after{ content:''; position:absolute; left:50%; top:50%; width:34%; height:34%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 38% 32%,#52525d,#16161b); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }
.ta-arm{ position:absolute; top:7%; left:91%; margin-left:-2.5px; width:5px; height:42%; transform-origin:top center; transform:rotate(-26deg); background:linear-gradient(180deg,#4a4a55,#262630); border-radius:4px; box-shadow:0 3px 7px rgba(0,0,0,.5); will-change:transform; }
.ta-arm .ta-counter{ position:absolute; left:50%; top:-12%; transform:translateX(-50%); width:240%; height:10%; border-radius:4px; background:linear-gradient(#3a3a44,#181820); box-shadow:0 2px 5px rgba(0,0,0,.5); }
.ta-arm .ta-head{ position:absolute; left:50%; bottom:-2%; transform:translateX(-50%); width:230%; height:9%; min-height:13px; border-radius:2px; background:linear-gradient(180deg,#2c2c35,#141419); box-shadow:0 2px 5px rgba(0,0,0,.5); }
.ta-arm .ta-head::after{ content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); width:6px; height:7px; border-radius:1px; background:var(--green); box-shadow:0 0 9px var(--green-soft); }

/* ---- player details ---- */
.pdetails{ position:relative; min-width:0; }   /* allow the column to shrink; title wraps rather than forcing layout */
.p-index{ font-family:var(--mono); font-size:16px; letter-spacing:.24em; color:var(--muted); margin-bottom:18px; }
.p-index b{ color:var(--green); }
.p-title{ font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:1.0; letter-spacing:-.02em; font-size:clamp(40px,6vw,76px); margin-bottom:14px; overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
.p-sub{ color:var(--muted); font-size:16px; max-width:380px; margin-bottom:30px; }

.viz{ width:100%; height:56px; margin-bottom:22px; opacity:.9; }

.progress{ height:3px; background:var(--line); border-radius:3px; position:relative; overflow:hidden; margin-bottom:30px; }
.progress .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--grad); transition:width .12s linear; }

.controls{ display:flex; align-items:center; gap:14px; }
.ctrl{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--text); transition:border-color .3s, background .3s, transform .2s; flex:none;
}
.ctrl:hover{ border-color:var(--green); transform:translateY(-2px); }
.ctrl svg{ width:18px; height:18px; }
.ctrl.play{ width:72px; height:72px; background:var(--grad); border:none; box-shadow:0 14px 30px -10px var(--blue-soft); }
.ctrl.play:hover{ filter:brightness(1.08); }
.ctrl.play svg{ width:24px; height:24px; }
.ctrl.mute.muted{ color:var(--muted-2); }
.ctrl.play:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.4); }
.ctrl.play:disabled:hover{ filter:grayscale(.4); transform:none; }
.ctrl.sp-open{ margin-left:auto; width:46px; height:46px; color:var(--muted); }
.ctrl.sp-open:hover{ color:#1ed760; border-color:#1ed760; }   /* Spotify green */

/* 30-second-preview hint + full-song link under the controls */
.preview-note{
  display:flex; align-items:center; gap:10px; margin-top:22px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--muted-2);
}
.preview-note .dot{ flex:none; width:6px; height:6px; border-radius:50%; background:#1ed760; box-shadow:0 0 8px rgba(30,215,96,.6); }
.preview-note a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; transition:color .3s, border-color .3s; }
.preview-note a:hover{ color:#1ed760; border-color:#1ed760; }
.placeholder-note{ font-family:var(--mono); font-size:14px; letter-spacing:.04em; color:var(--muted-2); margin-top:22px; line-height:1.6; }
.placeholder-note b{ color:var(--muted); }

/* tracklist strip */
.strip{ margin-top:60px; }
.strip-track{
  display:grid; grid-template-columns:38px 1fr auto; gap:20px; align-items:center;
  padding:16px 18px; border-top:1px solid var(--line-2); cursor:pointer; position:relative;
  transition:background .35s var(--ease); overflow:hidden;
}
.strip-track:last-child{ border-bottom:1px solid var(--line-2); }
.strip-track::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--grad); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); }
.strip-track:hover{ background:rgba(255,255,255,.025); }
.strip-track.active{ background:rgba(0,229,138,.06); }
.strip-track.active::before{ transform:scaleY(1); transform-origin:top; }
.strip-num{ font-family:var(--mono); font-size:16px; color:var(--muted-2); }
.strip-track.active .strip-num{ color:var(--green); }
.strip-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(18px,2.4vw,26px); letter-spacing:-.01em; min-width:0; }
.strip-name span{ display:block; font-family:var(--mono); font-weight:400; font-size:14px; letter-spacing:.16em; color:var(--muted); margin-top:5px; text-transform:none; }
.strip-play{ font-family:var(--mono); font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; }
.strip-sp{ display:grid; place-items:center; width:22px; height:22px; flex:none; color:var(--muted); transition:color .3s var(--ease), transform .3s var(--ease); }
.strip-sp svg{ width:20px; height:20px; }
.strip-sp:hover{ color:var(--green); transform:scale(1.12); }
.strip-track.active .strip-sp{ color:var(--green); }
.strip-eq{ display:flex; align-items:flex-end; gap:2px; height:14px; opacity:0; transition:opacity .3s; }
.strip-track > *{ position:relative; z-index:1; }
.strip-track.active.playing::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background:repeating-linear-gradient(108deg,
    transparent 0 24px,
    rgba(0,229,138,.11) 24px 26px,
    transparent 26px 44px,
    rgba(31,139,255,.07) 44px 45px,
    transparent 45px 70px,
    rgba(0,229,138,.05) 70px 73px,
    transparent 73px 104px,
    rgba(31,139,255,.10) 104px 105px,
    transparent 105px 138px);
  background-size:200% 100%;
  animation:stripeMove 26s linear infinite;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 28%, #000 100%);
  mask-image:linear-gradient(90deg, transparent, #000 28%, #000 100%);
}
@keyframes stripeMove{ to{ background-position:200% 0; } }
.strip-track.active .strip-eq{ opacity:1; }
.strip-eq span{ width:3px; background:var(--green); border-radius:2px; height:30%; }
.strip-track.active.playing .strip-eq span{ animation:eq .9s ease-in-out infinite; }
.strip-track.active.playing .strip-eq span:nth-child(2){ animation-delay:.3s; }
.strip-track.active.playing .strip-eq span:nth-child(3){ animation-delay:.55s; }

/* mobile: long titles need the room — drop the "Abspielen" word and let the
   Spotify logo be the compact play affordance; the whole row still taps to play */
@media (max-width:560px){
  .strip{ margin-top:44px; }
  .strip-track{ grid-template-columns:26px 1fr auto; gap:14px; padding:15px 2px; }
  .strip-num{ font-size:14px; }
  .strip-name{ font-size:18px; line-height:1.12; }
  .strip-name span{ font-size:12px; letter-spacing:.1em; margin-top:4px; }
  .strip-play{ gap:9px; }
  .strip-playlabel{ display:none; }
  .strip-sp{ width:44px; height:44px; }
  .strip-sp svg{ width:30px; height:30px; }
}

/* ============================================================
   LINKS
   ============================================================ */
.links-list{ border-top:1px solid var(--line); }
#links.section{ padding-top:84px; }
.link-row{
  position:relative; display:flex; align-items:center; gap:28px; padding:30px 28px;
  border-bottom:1px solid var(--line); overflow:hidden; transition:padding-left .4s var(--ease);
}
.link-row .fill{ position:absolute; inset:0; z-index:0; background:var(--grad); transform:translateY(101%); transition:transform .5s var(--ease-out); }
.link-row:hover .fill{ transform:translateY(0); }
.link-row > *{ position:relative; z-index:1; transition:color .4s var(--ease); }
.link-row:hover{ padding-left:40px; }
.link-row:hover, .link-row:hover .l-handle, .link-row:hover .l-idx{ color:#0a0a0c; }
.l-idx{ font-family:var(--mono); font-size:16px; color:var(--muted-2); width:40px; }
.l-ico{ width:34px; height:34px; flex:none; display:grid; place-items:center; }
.l-ico svg{ width:30px; height:30px; stroke:currentColor; }
.l-name{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(26px,4vw,46px); letter-spacing:-.02em; flex:1; }
.l-handle{ font-family:var(--mono); font-size:16px; letter-spacing:.1em; color:var(--muted); }
.l-arrow{ width:30px; height:30px; flex:none; transition:transform .4s var(--ease); }
.link-row:hover .l-arrow{ transform:translate(6px,-6px); }
@media (max-width:640px){ .l-handle{ display:none; } .link-row{ gap:18px; padding:24px 18px; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ position:relative; overflow:hidden; }
#kontakt.section{ padding-top:16px; padding-bottom:104px; }
.contact-inner{ position:relative; z-index:3; text-align:center; }
.contact h2{ font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.96; letter-spacing:-.03em; font-size:clamp(56px,12vw,164px); }
.contact h2 .stroke{ color:transparent; -webkit-text-stroke:1.5px var(--muted-2); }
.contact h2 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.contact-sub{ color:var(--muted); max-width:440px; margin:30px auto 40px; font-size:17px; }
.contact-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.contact-foot{ margin-top:30px; font-family:var(--mono); font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); }
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:18px 30px; border-radius:100px;
  font-family:var(--mono); font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); transition:border-color .3s, transform .25s, background .3s, color .3s;
}
.btn:hover{ transform:translateY(-3px); }
.btn.primary{ background:var(--grad); border:none; color:#0a0a0c; font-weight:700; box-shadow:0 16px 40px -14px var(--green-soft); }
.btn.primary:hover{ filter:brightness(1.06); }
.btn.ghost:hover{ border-color:var(--green); }
.btn svg{ width:16px; height:16px; }

/* ============================================================
   EVENTS (Bandsintown upcoming shows)
   ============================================================ */
.section.events{ padding-top:16px; }
.event-list{ margin-top:6px; border-top:1px solid var(--line-2); }
.event-row{
  display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:28px;
  padding:22px 10px; border-bottom:1px solid var(--line-2);
  color:inherit; text-decoration:none; position:relative;
  transition:background .35s var(--ease), padding .35s var(--ease);
}
.event-row:hover{ background:rgba(255,255,255,.025); padding-left:18px; }
.event-date{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.event-date .ev-day{ font-family:var(--display); font-weight:900; font-size:30px; }
.event-date .ev-mon{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.event-info{ min-width:0; }
.event-venue{ font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(18px,2.4vw,26px); line-height:1.05; }
.event-place{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.event-cta{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); transition:color .3s; }
.event-cta svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.event-row:hover .event-cta{ color:var(--green); }
.event-row:hover .event-cta svg{ transform:translate(3px,-3px); }
.event-cta.sold{ color:var(--muted-2); }
.event-empty{ margin-top:18px; font-family:var(--mono); font-size:14px; letter-spacing:.1em; color:var(--muted); }
@media (max-width:560px){
  .event-row{ grid-template-columns:48px 1fr; gap:16px; }
  .event-cta{ grid-column:1 / -1; justify-self:start; margin-top:10px; }
  .event-date .ev-day{ font-size:24px; }
  /* the long words "Bevorstehende / Veranstaltungen" overflow at the default size */
  .events .sec-title{ font-size:clamp(24px,6.6vw,40px); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; z-index:2; padding:70px 0 40px; border-top:1px solid var(--line-2); }
.footer-mark{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(70px,20vw,260px); line-height:.8; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.08); text-align:center; user-select:none; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; margin-top:40px; flex-wrap:wrap; gap:16px; font-family:var(--mono); font-size:15px; letter-spacing:.1em; color:var(--muted-2); }
.footer-row a:hover{ color:var(--green); }
/* legal links on their own centered line at the very bottom */
.footer-legal{ display:flex; justify-content:center; gap:26px; margin-top:28px; font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.footer-legal a{ color:var(--muted-2); transition:color .3s; }
.footer-legal a:hover{ color:var(--green); }
/* subtle webdesign credit at the very bottom — same style as the rest of the footer */
.footer-credit{ margin-top:16px; text-align:center; font-family:var(--mono); font-size:15px; letter-spacing:.1em; color:var(--muted-2); }
.footer-credit button{ font:inherit; letter-spacing:inherit; color:var(--muted-2); cursor:pointer; transition:color .3s; }
.footer-credit button:hover{ color:var(--green); }

/* webdesign-anfrage modal */
.modal-backdrop{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(5,5,8,.74); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  animation:modal-fade .25s ease;
}
.modal{
  position:relative; width:100%; max-width:460px; text-align:center;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:18px; padding:40px 34px 32px;
  box-shadow:0 40px 110px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03);
  animation:modal-pop .3s var(--ease-out);
}
.modal h3{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(24px,5vw,32px); line-height:1.05; letter-spacing:-.01em; margin-bottom:16px; }

/* reusable ghost + chromatic-glitch word (same look as the .sec-title em titles, but
   self-contained: animates the pink/cyan split via the lightweight gbg keyframes, so it
   works inside the dynamically-shown modal without the scroll-driven --ab loop). */
.glitch-text{ position:relative; display:inline-block; color:transparent; -webkit-text-stroke:1.5px var(--muted-2); }
.glitch-text::before, .glitch-text::after{
  content:attr(data-text); position:absolute; left:0; top:0; color:transparent;
  -webkit-text-stroke-width:1.5px; pointer-events:none;
}
.glitch-text::before{ -webkit-text-stroke-color:#ff2e88; animation:gbg-a 7s steps(1,end) infinite; }
.glitch-text::after{  -webkit-text-stroke-color:#22d3ff; animation:gbg-b 7s steps(1,end) infinite; }
@media (prefers-reduced-motion: reduce){
  .glitch-text::before{ animation:none; transform:translate(-.6px,0); }
  .glitch-text::after{  animation:none; transform:translate(.6px,0); }
}
.modal p{ color:var(--muted); line-height:1.7; font-size:15px; margin-bottom:26px; }
.modal-sign{ display:block; margin-top:14px; font-family:var(--mono); letter-spacing:.06em; color:var(--text); }
.modal .btn{ width:100%; justify-content:center; }
.modal-mail{ margin-top:14px; font-family:var(--mono); font-size:13px; letter-spacing:.12em; color:var(--muted-2); }
.modal-x{ position:absolute; top:12px; right:16px; font-size:26px; line-height:1; color:var(--muted-2); transition:color .3s, transform .3s; }
.modal-x:hover{ color:var(--green); transform:rotate(90deg); }
@keyframes modal-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modal-pop{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
/* stack + center the footer on mobile (instead of the left-aligned wrap) */
@media (max-width:600px){
  .footer-row{ flex-direction:column; align-items:center; text-align:center; gap:20px; }
  .footer-row > span{ justify-content:center; }
}

/* ============================================================
   PARALLAX BANDS (cinematic stills between sections)
   ============================================================ */
.featured{ position:relative; z-index:2; padding-top:56px; }
.featured .sec-head{ margin-bottom:30px; }
.pband{ position:relative; z-index:2; width:100%; overflow:hidden; display:flex; align-items:flex-end; }
.featured .pband{ border-radius:14px; }

/* chromatic glitch border around the featured video — two offset neon outlines
   (pink + cyan) that stay slightly split and periodically glitch-slice. */
.pband-frame{ position:relative; border-radius:14px; }
.pband-frame::before,
.pband-frame::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  border:1.6px solid; border-radius:inherit; mix-blend-mode:screen;
}
.pband-frame::before{ border-color:#ff2e88; box-shadow:0 0 9px rgba(255,46,136,.45); animation:pbg-a 5s linear infinite; }
.pband-frame::after{  border-color:#22d3ff; box-shadow:0 0 9px rgba(34,211,255,.4);  animation:pbg-b 5s linear infinite; }
@keyframes pbg-a{
  0%,42%,52%,86%,100%{ transform:translate(-1.5px,0); clip-path:inset(0 0 0 0); }
  44%{ transform:translate(-5px,2px);  clip-path:inset(0 0 66% 0); }
  47%{ transform:translate(3px,-2px);  clip-path:inset(58% 0 12% 0); }
  88%{ transform:translate(-4px,-2px); clip-path:inset(0 0 55% 0); }
  92%{ transform:translate(4px,2px);   clip-path:inset(45% 0 25% 0); }
  95%{ transform:translate(-2px,1px);  clip-path:inset(25% 0 50% 0); }
}
@keyframes pbg-b{
  0%,40%,50%,84%,100%{ transform:translate(1.5px,0); clip-path:inset(0 0 0 0); }
  42%{ transform:translate(5px,-2px);  clip-path:inset(0 0 60% 0); }
  46%{ transform:translate(-3px,2px);  clip-path:inset(50% 0 20% 0); }
  86%{ transform:translate(4px,2px);   clip-path:inset(0 0 50% 0); }
  90%{ transform:translate(-4px,-2px); clip-path:inset(40% 0 30% 0); }
  94%{ transform:translate(2px,-1px);  clip-path:inset(20% 0 60% 0); }
}
.pband-imgwrap{ position:absolute; inset:-58% 0; z-index:0; }
.pband-img{ width:100%; height:100%; object-fit:cover; will-change:transform; filter:saturate(1.08) contrast(1.03) brightness(1.08); }
.pband-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,7,10,0) 45%, rgba(7,7,10,.34) 78%, rgba(7,7,10,.58) 100%); }
.pband-grain{ position:absolute; inset:0; z-index:1; mix-blend-mode:overlay; opacity:.5; background:linear-gradient(transparent 50%, rgba(0,0,0,.04) 50%); background-size:100% 3px; pointer-events:none; }
.pband-inner{ position:relative; z-index:2; padding-bottom:48px; padding-top:48px; }
.pband-line{ font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:1.02; letter-spacing:-.02em; font-size:clamp(34px,6vw,82px); margin-top:18px; max-width:14ch; text-shadow:0 4px 30px rgba(0,0,0,.4); }
.pband-line em{ font-style:normal; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.8); }
.pband-link{ display:flex; cursor:pointer; }
.pband-link .pband-img{ transition:filter .6s var(--ease); }
.pband-link:hover .pband-img{ filter:saturate(1.18) contrast(1.05) brightness(1.16); }
.pband-play{ display:inline-grid; place-items:center; width:22px; height:22px; margin-left:12px; border-radius:50%; background:var(--grad); color:#fff; box-shadow:0 6px 16px -6px var(--blue-soft); }
.pband-link:hover .pband-line em{ -webkit-text-stroke-color:var(--green); }

/* ---------- scroll-reactive chromatic aberration for the ghost section words ----------
   The base word stays a faint outline; two duplicate outlines (pink + cyan, from the
   data-text attr) sit nearly on top of it and split apart by --ab px — a value the scroll
   loop in initMotion drives from scroll velocity (calm at rest, more split while moving).
   The words also carry data-speed for a gentle vertical parallax. */
.sec-title em,
.contact h2 .stroke{
  position:relative; display:inline-block; color:transparent;
  -webkit-text-stroke:1.5px var(--muted-2);
}
.sec-title em::before, .sec-title em::after,
.contact h2 .stroke::before, .contact h2 .stroke::after{
  content:attr(data-text); position:absolute; left:0; top:0;
  color:transparent; -webkit-text-stroke-width:1.5px;
  pointer-events:none; opacity:.9; mix-blend-mode:screen;
}
.sec-title em::before, .contact h2 .stroke::before{ -webkit-text-stroke-color:#ff2e88; transform:translateX(calc(var(--ab,0) * -1px)); }
.sec-title em::after,  .contact h2 .stroke::after{  -webkit-text-stroke-color:#22d3ff; transform:translateX(calc(var(--ab,0) *  1px)); }
@media (prefers-reduced-motion: reduce){
  .sec-title em::before, .sec-title em::after,
  .contact h2 .stroke::before, .contact h2 .stroke::after{ transform:none; opacity:.6; }
}

/* ============================================================
   GALLERY (horizontal drifting stills)
   ============================================================ */
.gallery{ position:relative; z-index:2; padding:72px 0 56px; overflow:hidden; }
.gallery-viewport{ margin-top:8px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; cursor:grab; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gallery-viewport{ scrollbar-width:none; -ms-overflow-style:none; }
.gallery-viewport::-webkit-scrollbar{ display:none; }
.gallery-viewport.dragging{ cursor:grabbing; scroll-behavior:auto; }
.gallery-viewport.dragging .gshot img{ pointer-events:none; }
.gallery-track{ display:flex; gap:24px; padding:0 6vw; width:max-content; }
.gshot, .gshot img{ user-select:none; -webkit-user-drag:none; }
.gshot{ position:relative; flex:none; height:340px; border-radius:8px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px var(--line-2); }
.gshot-link{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
.gshot img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05); transition:transform .6s var(--ease); }
.gshot:hover img{ transform:scale(1.04); }
.gshot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 18px 16px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.75)); }
.gshot .gnum{ color:var(--green); }

/* chromatic glitch border on each gallery still. Kept lightweight on purpose: the offset
   pink/cyan outlines animate with TRANSFORM ONLY (no clip-path, no blend-mode), so they're
   GPU-composited — even ~10 animating at once (while the strip auto-scrolls) stays cheap.
   A resting ~1.2px split with two short glitch bursts per cycle; staggered so they don't
   all flicker in unison. */
.gshot::before, .gshot::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1.4px solid; border-radius:inherit;
}
.gshot::before{ border-color:#ff2e88; box-shadow:inset 0 0 9px rgba(255,46,136,.28); animation:gbg-a 7s steps(1,end) infinite; }
.gshot::after{  border-color:#22d3ff; box-shadow:inset 0 0 9px rgba(34,211,255,.24); animation:gbg-b 7s steps(1,end) infinite; }
.gshot:nth-child(2n)::before, .gshot:nth-child(2n)::after{ animation-delay:-2.5s; }
.gshot:nth-child(3n)::before, .gshot:nth-child(3n)::after{ animation-delay:-4.3s; }
.gshot:nth-child(4n)::before, .gshot:nth-child(4n)::after{ animation-delay:-1.4s; }
@keyframes gbg-a{
  0%,18%,21%,59%,62%,100%{ transform:translate(-0.6px,0); }
  19%{ transform:translate(-3px,1px); }
  20%{ transform:translate(2px,-1px); }
  60%{ transform:translate(-2.5px,-1px); }
  61%{ transform:translate(3px,1px); }
}
@keyframes gbg-b{
  0%,16%,19%,57%,60%,100%{ transform:translate(0.6px,0); }
  17%{ transform:translate(3px,-1px); }
  18%{ transform:translate(-2px,1px); }
  58%{ transform:translate(2.5px,1px); }
  59%{ transform:translate(-3px,-1px); }
}
@media (max-width:720px){ .gshot{ height:260px; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .wm-letter{ opacity:1; clip-path:none; transform:none; }
}

/* ============================================================
   LEGAL SUBPAGES (impressum.html / datenschutz.html)
   ============================================================ */
.legal-nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; background:rgba(7,7,10,.72); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-2);
}
.legal-nav .nav-logo{ font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:.04em; text-decoration:none; color:var(--text); }
.legal-nav .nav-logo .v{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.legal-nav .back{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; }
.legal-nav .back:hover{ color:var(--green); }

.legal{ max-width:820px; margin:0 auto; padding:72px 32px 120px; }
.legal h1{ font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(44px,9vw,96px); line-height:.95; margin-bottom:8px; }
.legal h1 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.legal .lead{ font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom:48px; }
.legal h2{ font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--green); margin:40px 0 12px; }
.legal h3{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--text); margin:24px 0 8px; }
.legal p, .legal address, .legal li{ font-style:normal; color:var(--muted); line-height:1.75; max-width:68ch; }
.legal ul{ padding-left:20px; margin:8px 0; }
.legal li{ margin:4px 0; }
.legal address strong, .legal p strong{ color:var(--text); font-weight:600; }
.legal a{ color:#ff5ec0; text-decoration:none; border-bottom:1px solid rgba(255,94,192,.4); }
.legal a:hover{ color:#fff; }
.legal .todo{ color:var(--muted-2); font-style:italic; }
.legal hr{ border:none; border-top:1px solid var(--line-2); margin:48px 0; }
.legal small{ color:var(--muted-2); font-size:13px; line-height:1.7; display:block; }