/* =========================================================
   JUNKSISTA — Smartlink-Landingpage (l/<slug>/)

   Eigenes Stylesheet, wie legal.css und aus demselben Grund:
   style.css bringt Hero, Player, Parallax und die Reveal-
   Klassen mit, davon braucht eine Seite mit Cover und sechs
   Links nichts. Tokens sind aus style.css uebernommen.

   Die Seite laedt kein Skript. Das ist keine Sparsamkeit,
   sondern der Punkt: ohne JS gibt es nichts zu speichern,
   nichts einzuwilligen und nichts, was vor dem ersten Klick
   an einen Dritten geht. Ein Smartlink, der einen Banner
   braucht, ist an dieser Stelle das falsche Werkzeug.
   ========================================================= */

:root {
  --bg:        #08080a;
  --surface:   #131317;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --text:      #f3f1ef;
  --muted:     #9c9ca4;
  --red:       #c53238;
  --teal:      #7fd4cd;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:    cubic-bezier(.16,1,.3,1);

  --gut: clamp(1.25rem, 5vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.sl {
  margin: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 7vw, 4rem) var(--gut);
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

/* ---------- Hintergrund ----------
   Das Cover als Flaeche, unscharf und abgedunkelt. Die Regel "die Artworks
   nicht filtern" bleibt unangetastet: das Cover selbst steht scharf und
   ungefiltert darueber, hier laeuft eine zweite, rein dekorative Ebene.
   Sie ist der einzige Farbwert, den diese Seite von sich aus hat, und sie
   ist pro Release ein anderer.

   Statisch, nicht animiert — ein dauerlaufender Vollbild-Effekt hat den
   Compositor hier schon einmal angehalten (s. CLAUDE.md, Animationen).
   Der Ueberstand von 12 % faengt die weichen Kanten des Blurs ab. */
.sl-bg {
  position: fixed;
  inset: -12%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: blur(64px) saturate(115%);
  opacity: .42;
  pointer-events: none;
}
.sl-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent, rgba(8,8,10,.86) 78%),
    linear-gradient(180deg, rgba(8,8,10,.55), rgba(8,8,10,.9));
}

/* ---------- Rahmen ---------- */

.sl-card {
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
}

.sl-brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  margin-bottom: clamp(2rem, 6vw, 3.4rem);
}
/* wordmark.png ist 364 px breit (s. CLAUDE.md) — 124 px Anzeigebreite bleiben
   auch auf Retina scharf. Der drop-shadow haelt die Haarlinien lesbar, sobald
   ein helles Cover dahinter liegt. */
.sl-brand img { width: 124px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.sl-brand i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); flex: none;
}

/* Einspaltig bis 840 px, darueber Cover links neben den Links. Ein Cover, das
   auf dem Desktop 700 px hoch dasteht und die Dienste unter die Kante schiebt,
   verfehlt den Zweck der Seite: sie soll ohne Scrollen entscheidbar sein. */
.sl-grid { display: grid; gap: clamp(1.6rem, 5vw, 3rem); }

@media (min-width: 840px) {
  .sl-grid { grid-template-columns: 380px 1fr; align-items: start; }
}

/* ---------- Cover ---------- */

.sl-art { margin: 0; }
/* Einspaltig frisst ein formatfuellendes Cover die ganze erste Bildschirmhoehe,
   und der Besucher landet auf einem Bild ohne einen einzigen Knopf darunter.
   Der Deckel greift genau dort, wo das passiert — auf flachen Fenstern: bei
   375 x 812 sind 40svh 325 px und damit praktisch die volle Spalte, bei
   375 x 667 nur 267 px. Kein Breakpoint noetig, die Hoehe entscheidet. */
@media (max-width: 839px) {
  .sl-art { max-width: min(100%, 40svh); }
}
.sl-art img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}

/* ---------- Kopf ---------- */

.sl-eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--display);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1rem;
}
.sl-eyebrow i { width: 26px; height: 1px; background: var(--teal); opacity: .6; flex: none; }

/* Breit, nicht schmal: die Seite ueberschreibt hier keinen Abschnitt, sie
   nennt einen Titel — dieselbe Achsenseite wie "0A" auf der Startseite.
   Die Regel steht in CLAUDE.md unter "Zwei Schriftbreiten". */
.sl-title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.2rem);
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 .7rem;
  text-wrap: balance;
}

.sl-meta {
  margin: 0 0 clamp(1.8rem, 5vw, 2.4rem);
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .04em;
}

/* ---------- Dienste ---------- */

.sl-services { list-style: none; margin: 0; padding: 0; }

.sl-svc + .sl-svc { border-top: 1px solid var(--line-soft); }

.sl-svc a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  text-decoration: none;
  transition: color .35s var(--ease);
}

/* Derselbe Wisch wie .btn auf der Startseite: eine Flaeche faehrt von unten
   ein, statt dass eine Farbe umspringt. Beide Ebenen liegen auf z-index -1
   hinter dem Text, das Element isoliert seinen Stacking-Kontext selbst. */
.sl-svc a::before,
.sl-svc a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transition: transform .45s var(--ease);
}
.sl-svc a::before { background: transparent; transform: translateY(0); }
.sl-svc a::after  { background: var(--red); transform: translateY(101%); }
.sl-svc a:hover::after,
.sl-svc a:focus-visible::after { transform: translateY(0); }
.sl-svc a:hover,
.sl-svc a:focus-visible { color: #fff; }

/* Die erste Zeile ist die, die die Band selbst zuerst haben will — auf
   junksista.de Bandcamp. Sie steht rot ausgefuellt da und dreht auf Hover
   ins Helle, wie .btn--solid. */
.sl-svc--primary a { color: #fff; }
.sl-svc--primary a::before { background: var(--red); }
.sl-svc--primary a::after  { background: var(--text); }
.sl-svc--primary a:hover,
.sl-svc--primary a:focus-visible { color: #08080a; }
.sl-svc--primary + .sl-svc { border-top-color: transparent; }

.sl-svc__ico { display: flex; }
.sl-svc__ico svg { width: 20px; height: 20px; }
.sl-ico--fill { fill: currentColor; stroke: none; }
.sl-ico--line {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.sl-svc__name {
  font-family: var(--display);
  font-weight: 600; font-stretch: 106%;
  font-size: .88rem; letter-spacing: .14em; text-transform: uppercase;
}

/* .68rem auf --red sind 7,8:1 in Weiss und damit auch klein tragfaehig
   (Kontrasttabelle in CLAUDE.md). Auf --bg laeuft die Zeile auf --muted,
   nicht dunkler: 7,3:1 statt 3,9:1. */
.sl-svc__verb {
  font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  transition: color .35s var(--ease);
}
.sl-svc a:hover .sl-svc__verb,
.sl-svc a:focus-visible .sl-svc__verb { color: inherit; }
.sl-svc--primary .sl-svc__verb { color: rgba(255,255,255,.72); }

/* ---------- Fuss ---------- */

.sl-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .8rem 1.5rem;
  margin-top: clamp(2.4rem, 7vw, 3.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
}
.sl-back {
  text-decoration: none;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.sl-back:hover { color: var(--red); }
/* --muted statt der dunkleren Fussfarbe der Startseite: 7,3:1. Rot laege bei
   2,4:1 und faellt fuer Fliesstext durch (s. legal.css). */
.sl-legal { margin: 0; color: var(--muted); }
.sl-legal a { color: var(--muted); text-underline-offset: .18em; }
.sl-legal a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}