/* ========== CUSTOM FONTS ========== */
@font-face {
  font-family: 'CCSBjork';
  src: url('../fonts/CCSBjork-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CCSBjork';
  src: url('../fonts/CCSBjork.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CCSBjork';
  src: url('../fonts/CCSBjork-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hermissoul';
  src: url('../fonts/Hermissoul-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-1: #0a0a0a;
  --bg-2: #1a1a1a;
  --text: #f5f1e8;
  --accent: #d4a574;
  --accent-soft: rgba(212, 165, 116, 0.15);

  /* Strong custom easings — built-in ease/ease-out are too weak.
     UI motion needs punch to feel intentional. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

html, body { width: 100%; max-width: 100%; }
html { scroll-behavior: auto; }

body {
  font-family: 'EB Garamond', serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text);
  background: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Scroll-container hardening — prevents off-screen GSAP transforms
   from creating a phantom horizontal scrollbar on iPad. */
[data-scroll-container] { overflow-x: hidden; max-width: 100vw; }

/* Scrub-word: each bio word fades up from low opacity as the user scrolls. */
.scrub-word {
  display: inline-block;
  will-change: opacity;
}


/* ========== ATMOSPHERIC BACKGROUND STACK ========== */
.bg-gradient, .bg-hue, .bg-vignette, .bg-paper, .bg-grain,
.bg-mouse-light, .bg-particles-global {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}

.bg-gradient {
  background:
    radial-gradient(ellipse at 20% 10%, #1a1424 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, #0e1a28 0%, transparent 55%),
    #07060a;
  background-size: 200% 200%;
  animation: bgDrift 120s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0%   { background-position:   0%   0%, 100% 100%; }
  50%  { background-position:  20%  30%,  70%  80%; }
  100% { background-position:  40%  60%,  30%  20%; }
}

.bg-hue {
  background: linear-gradient(180deg, #0d1b2a 0%, #000 100%);
  animation: hueShift 60s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.7;
}
@keyframes hueShift {
  0%   { background: linear-gradient(180deg, #0d1b2a 0%, #000 100%); }
  50%  { background: linear-gradient(180deg, #1b0d2a 0%, #000 100%); }
  100% { background: linear-gradient(180deg, #0d1b2a 0%, #000 100%); }
}

.bg-vignette {
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.6) 100%);
}

.bg-paper {
  opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  background-size: 800px 800px;
}

.bg-grain {
  opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.bg-mouse-light {
  background: radial-gradient(circle 460px at var(--mx, 50%) var(--my, 40%),
    rgba(212, 165, 116, 0.14) 0%,
    rgba(212, 165, 116, 0.05) 25%,
    transparent 60%);
  mix-blend-mode: screen;
  transition: background 0.12s linear;
}

/* Stained-glass layers — scoped to hero + streaming banner.
   Rest of the page stays calm, with only .bg-mouse-light reacting. */
.hero .bg-stained,
.hero .bg-stained-glass,
.spotify-banner .bg-stained,
.spotify-banner .bg-stained-glass {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

.hero .bg-stained-glass,
.spotify-banner .bg-stained-glass {
  background-image: url("../images/stained-glass.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.42;
  transition: opacity .45s ease;
  /* Less blur, more saturation = clearer cathedral glass.
     0.5px micro-blur removes JPEG artefacts without softening the colours. */
  filter: blur(0.5px) saturate(1.6) brightness(1.15) contrast(1.05);
  -webkit-mask-image: radial-gradient(circle 380px at var(--mx, 50%) var(--my, 40%),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.82) 35%, rgba(0,0,0,0.32) 70%, rgba(0,0,0,0) 95%);
          mask-image: radial-gradient(circle 380px at var(--mx, 50%) var(--my, 40%),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.82) 35%, rgba(0,0,0,0.32) 70%, rgba(0,0,0,0) 95%);
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
  /* Hint to compositor: this layer's mask + opacity will animate. */
  will-change: mask-image, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero .bg-stained-glass.is-active,
.spotify-banner .bg-stained-glass.is-active { opacity: 0.7; }

/* Streaming banner: a touch calmer than the hero so it reads as a reprise */
.spotify-banner .bg-stained-glass { opacity: 0.32; filter: blur(0.8px) saturate(1.4) brightness(1.08) contrast(1.03); }
.spotify-banner .bg-stained-glass.is-active { opacity: 0.55; }

/* Mobile: smaller mask, slightly less aggressive but still clear */
@media (max-width: 700px) {
  .hero .bg-stained-glass,
  .spotify-banner .bg-stained-glass {
    -webkit-mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 40%),
      rgba(0,0,0,1) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0) 92%);
            mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 40%),
      rgba(0,0,0,1) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0) 92%);
    filter: blur(0.6px) saturate(1.5) brightness(1.12) contrast(1.04);
  }
  .hero .bg-stained-glass.is-active { opacity: 0.62; }
  .spotify-banner .bg-stained-glass.is-active { opacity: 0.5; }
}

.hero .bg-stained,
.spotify-banner .bg-stained {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 420px at var(--mx, 50%) var(--my, 40%),
      rgba(138, 88, 164, 0.32) 0%, rgba(138, 88, 164, 0) 70%),
    radial-gradient(circle 620px at calc(var(--mx, 50%) + 180px) calc(var(--my, 40%) + 80px),
      rgba(56, 96, 168, 0.28) 0%, rgba(56, 96, 168, 0) 70%),
    radial-gradient(circle 560px at calc(var(--mx, 50%) - 220px) calc(var(--my, 40%) - 60px),
      rgba(216, 78, 90, 0.22) 0%, rgba(216, 78, 90, 0) 70%),
    radial-gradient(circle 700px at calc(var(--mx, 50%) + 60px) calc(var(--my, 40%) - 180px),
      rgba(72, 148, 128, 0.22) 0%, rgba(72, 148, 128, 0) 70%),
    radial-gradient(circle 500px at calc(var(--mx, 50%) - 80px) calc(var(--my, 40%) + 220px),
      rgba(230, 178, 88, 0.26) 0%, rgba(230, 178, 88, 0) 70%);
  filter: blur(22px);
}
.hero .bg-stained { opacity: 0.8; }
.spotify-banner .bg-stained { opacity: 0.6; }

.bg-particles-global { opacity: 0.8; }

/* Ensure all content is above the background layers */
[data-scroll-container], .modal { position: relative; z-index: 1; }
.modal { z-index: 1000; }

a { color: var(--text); text-decoration: none; transition: color .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--accent); }
}

img { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Universal press feedback — every interactive element scales down briefly
   on press. Subtle (0.97) so it feels responsive, not bouncy. */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button:active, a[href]:active, [role="button"]:active,
.modal-close:active,
.lang-toggle:active, .footer-link:active, .lt-close-bottom:active,
.spotify-cta:active, .stream-cta:active {
  transform: scale(0.97);
  transition: transform .12s var(--ease-out);
}

/* Font families */
h1, h2, h3, h4, .presskit-link {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-weight: 400;
}

.hero-title {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
}
.hero-claim {
  font-family: 'Hermissoul', 'Cormorant Garamond', serif;
  font-style: normal;
}
.section-title {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
}
.song-title {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
}
.modal-inner h3 {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
}

/* ========== LANGUAGE TOGGLE ==========
   Two named buttons rather than EN|DE: German is the resting state of the
   site now, so stepping to English has to be an obvious offer. */
.lang-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(212, 165, 116, 0.28);
  border-radius: 2px;
  background: rgba(20, 16, 12, 0.5);
}

.lang-btn {
  padding: 0.34rem 0.72rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  color: rgba(245, 241, 232, 0.72);
  border-radius: 1px;
  white-space: nowrap;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.lang-btn.is-active { background: var(--accent); color: #14100c; }
@media (hover: hover) and (pointer: fine) {
  .lang-btn:not(.is-active):hover { background: rgba(212, 165, 116, 0.16); color: var(--text); }
}
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ========== LANGUAGE VISIBILITY ========== */
html[lang="en"] .lang-de { display: none !important; }
html[lang="de"] .lang-en { display: none !important; }

/* old .mouse-light removed — replaced by layered .bg-* stack */

/* ========== HERO ========== */
.hero {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 72vh;
  /* The language switch is pinned to the top right. On a narrow screen the
     title reaches up into it, so the hero keeps a floor of clearance —
     enough for the switch plus a breath. On wide screens the centring
     takes over long before this matters. */
  padding-top: max(5.5rem, 7vh);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  inset: 0;                  /* match viewport so contain fits exactly */
  z-index: 0;
  background: #06050a;       /* theatrical letterbox behind the portrait */
}

/* ============================================================
   HERO — pure typographic composition on atmospheric layers.
   No portrait image, no animation — title + gold rule + CTA.
   ============================================================ */
.hero::before {
  background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.55) 95%);
}

.hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: 2rem 1.5rem;
}

.hero-title {
  margin: 0;
  text-align: center;
}

.hero-rule {
  width: clamp(180px, 32vw, 320px);
  height: 10px;
  opacity: 0.92;
}

.spotify-cta--hero { margin-top: 0; }

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

/* Lantern glow follows mouse */
.lantern-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.4) 0%, rgba(212, 165, 116, 0.1) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  left: 50%; top: 60%;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: transform 0.3s ease-out, opacity 0.4s ease;
  z-index: 2;
}

#particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 1.5rem;
}

.hero-title {
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  /* Der Name ist doppelt so lang wie der alte und bricht deshalb um.
     Die Zeilen ruecken eng zusammen, damit er als ein Schriftzug steht
     und nicht als Liste. Die Versalien kommen aus dem Stylesheet, damit
     im Quelltext der Name lesbar bleibt. */
  text-transform: uppercase;
  line-height: 1.04;
  opacity: 0;
  position: relative;
  display: inline-block;
  /* Stained-glass gradient fill — amber / ruby / teal / cobalt / violet */
  background-image: linear-gradient(
    110deg,
    #e6b258 0%,
    #d4a574 18%,
    #d84e5a 36%,
    #f5f1e8 50%,
    #489480 64%,
    #3860a8 82%,
    #8a58a4 100%
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* Kein filter auf diesem Element. background-clip:text und filter
     zusammen lassen die Schrift in Safari auf iOS verschwinden -- das
     Element belegt seinen Platz und malt nichts. Der Schein kommt
     stattdessen aus ::before, einer eigenen Ebene. */
  animation: titleReveal 2.8s cubic-bezier(.22,.61,.36,1) forwards,
             titleLight 22s ease-in-out infinite alternate 2.8s;
  animation-delay: .3s, 3.1s;
}

/* Subtle halo — a soft amber glow that breathes behind the letters */
.hero-title::before {
  content: '';
  position: absolute;
  inset: -30% -8%;
  background: radial-gradient(ellipse at center,
    rgba(212, 165, 116, 0.18) 0%,
    rgba(216, 78, 90, 0.08) 35%,
    transparent 70%);
  filter: blur(22px);
  z-index: -1;
  opacity: 0;
  animation: haloBreathe 7s ease-in-out infinite alternate 2s;
}

@keyframes titleReveal {
  from { opacity: 0; transform: translateY(30px); letter-spacing: 0.3em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.14em; }
}

@keyframes titleLight {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:  50% 50%; }
}

@keyframes haloBreathe {
  0%   { opacity: 0.55; transform: scale(0.95); }
  100% { opacity: 0.95; transform: scale(1.08); }
}

/* When reduced motion is preferred, stop the color drift */
@media (prefers-reduced-motion: reduce) {
  /* The gradient stops wandering; see the block further down for the rest. */
  .hero-title { background-position: 50% 50%; }
  .hero-title::before { animation: none; opacity: 0.7; }
}

.hero-claim {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-style: italic;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
  min-height: 1.5em;
  color: rgba(245, 241, 232, 0.9);
}

.hero-claim span::after {
  content: '';
}

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





/* ========== SECTIONS (shared) ========== */
section {
  position: relative;
  padding: clamp(2.75rem, 7vh, 5.5rem) 1.5rem;
  max-width: 100%;
}

.section-title {
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  font-weight: 400;
  /* Without this the title borrowed the body's leading of 1.8, which is
     right for a paragraph and far too airy for fifty-pixel letters. On a
     phone "Cover Songs by Mika Maria" breaks into two lines and stood
     with a whole empty line between them. */
  line-height: 1.15;
  text-align: center;
  margin-bottom: 5rem;
  letter-spacing: 0.08em;

  /* Derselbe Kirchenfenster-Verlauf wie im Titel oben: er liegt in den
     Buchstaben statt hinter ihnen und wandert langsam durch.

     Die Breite folgt dem Text. Ohne fit-content spannt sich der Verlauf
     ueber die ganze Zeilenbreite, und bei einer kurzen Ueberschrift auf
     einem breiten Schirm saesse in den Buchstaben nur die weisse Mitte. */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(
    110deg,
    #e6b258 0%,
    #d4a574 18%,
    #d84e5a 36%,
    #f5f1e8 50%,
    #489480 64%,
    #3860a8 82%,
    #8a58a4 100%
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* Weder text-shadow noch filter. Der text-shadow laege bei
     durchsichtiger Fuellung hinter den Buchstaben und schiene durch sie
     hindurch, was den Verlauf truebt. Und filter zusammen mit
     background-clip:text laesst die Schrift in Safari auf iOS
     verschwinden. Der Schein kommt aus einer eigenen Ebene. */
  position: relative;
  animation: titleLight 22s ease-in-out infinite alternate;
}
.section-title::before {
  content: '';
  position: absolute;
  inset: -45% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(212, 165, 116, 0.16) 0%,
    rgba(216, 78, 90, 0.06) 40%,
    transparent 72%);
  filter: blur(20px);
}

/* Wandernde Verlaeufe sind teuer; auf einem muehsam rechnenden Geraet
   steht das Licht still und der Schein faellt weg. */
.low-power .section-title { animation: none; }
.low-power .section-title::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .section-title { animation: none; background-position: 20% 50%; }
}

/* ========== STATEMENT ========== */
.statement { padding-top: clamp(1.5rem, 4vh, 3rem); padding-bottom: 3rem; }
.statement-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.bio-portrait {
  /* Stand auf 240px gedeckelt, was neben einer 600px breiten Textspalte
     wie eine Briefmarke wirkte. Die Deckelung stammte nicht aus dem
     Entwurf, sondern aus der Datei: beim Abspecken der Bilder war das
     Original von 2268px auf 560px geschrumpft und gab nicht mehr her.
     Mit der zurueckgeholten Vorlage darf es die Groesse haben, die der
     Platz hergibt. */
  width: clamp(200px, 44vw, 360px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(212, 165, 116, 0.22),
    inset 0 0 0 1px rgba(212, 165, 116, 0.35);
  /* Initial state — JS' GSAP scrubs scale up; the io fallback flips
     the opacity. Both end at 1, so reduced-motion users still see it. */
  opacity: 0;
  transition: opacity .9s var(--ease-out);
}
.bio-portrait.is-visible { opacity: 1; }
.bio-portrait::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 60px rgba(212, 165, 116, 0.18);
}
.bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) brightness(0.98);
}

.bio p { margin-bottom: 1.5rem; }
.bio a { border-bottom: 1px solid rgba(212, 165, 116, 0.3); }
.bio a:hover { border-color: var(--accent); }

/* ========== SONGS ========== */
.songs { padding: 3rem 1rem 6rem; }
.contact-list li { padding: 1rem 0; }

/* ========== ABOUT — fullbleed cinematic portrait ========== */
.about {
  padding: 0;            /* breakout — no section padding */
  position: relative;
}

/* Stage = full-viewport portrait with overlay typography */
.about-stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* break out of any container */
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;     /* heading sits at the bottom */
  justify-content: center;
  padding-bottom: 6vh;
}

/* About portrait — always show the WHOLE square image on every device.
   Contain preserves the full composition; the dark letterbox reads as frame. */
.about-portrait {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #07060a;
  filter: brightness(0.95) contrast(1.05) saturate(1.05);
  animation: kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -1.5%); }
}

.about-portrait-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(7,6,10,0.35) 0%, transparent 25%, transparent 75%, rgba(7,6,10,0.85) 100%);
  pointer-events: none;
}
.about-portrait-grain {
  position: absolute; inset: 0;
  opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
}

.about-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
}
.about-eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.9;
  margin-bottom: 2rem;
}
.about-eyebrow::before,
.about-eyebrow::after {
  content: '';
  display: inline-block;
  width: 38px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: 0 1.2rem;
  opacity: 0.6;
}
.about-heading {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(4.5rem, 12vw, 9rem);
  letter-spacing: 0.06em;
  line-height: 0.95;
  color: var(--text);
  text-shadow: 0 8px 40px rgba(0,0,0,0.6),
               0 0 60px rgba(212, 165, 116, 0.18);
  margin: 0;
}
.about-hairline {
  width: 1px; height: 80px;
  margin: 2.5rem auto 0;
  background: linear-gradient(to bottom, rgba(212,165,116,0.5), transparent);
}

.about-bio {
  max-width: 620px;
  margin: 0 auto;
  padding: 8rem 2rem 10rem;
  font-size: 1.2rem;
  line-height: 1.85;
  text-align: center;
}
.about-bio p { margin-bottom: 1.6rem; }
.about-bio p:last-of-type { margin-bottom: 2.5rem; }

.presskit-link {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.06em;
  border: 1px solid rgba(212, 165, 116, 0.4);
  border-radius: 2px;
  opacity: 0.8;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .about-stage { min-height: 560px; }
  /* contain-fit keeps the whole portrait visible; no position tweak needed */
}

/* ========== CONTACT ========== */
.contact { text-align: center; }
.contact-list { list-style: none; max-width: 480px; margin: 0 auto; }
.contact-list li {
  padding: 1rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

/* ========== FOOTER ========== */
.footer {
  text-align: center;
  padding: 3rem 1.5rem;
  font-size: 0.85rem;
  opacity: 0.5;
}
.footer p + p { margin-top: 0.5rem; }
.footer-link {
  font-size: inherit;
  opacity: 1;
  border-bottom: 1px solid transparent;
  transition:
    color .25s var(--ease-out),
    border-color .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-link:hover { color: var(--accent); border-color: var(--accent); }
}

/* ========== MODALS ========== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  opacity: 0;
  animation: modalFade .4s ease forwards;
  overflow-y: auto;
}
@keyframes modalFade { to { opacity: 1; } }
.modal[hidden] { display: none; }
.modal-inner {
  background: var(--bg-2);
  border: 1px solid rgba(212, 165, 116, 0.2);
  padding: 3rem 2.5rem;
  max-width: 600px;
  width: 100%;
  position: relative;
  border-radius: 3px;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-inner h3 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.modal-inner h4 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; color: var(--accent); }
.modal-inner p { font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.7; }
.modal-inner a { color: var(--accent); border-bottom: 1px solid rgba(212, 165, 116, 0.4); }
.modal-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.6;
  transition:
    opacity .2s var(--ease-out),
    color .2s var(--ease-out),
    transform .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { opacity: 1; color: var(--accent); transform: scale(1.1); }
}

/* ========== SCROLL-TRIGGER ANIMATIONS ========== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger groups — siblings fade in with a small per-item delay,
   creating a natural cascade instead of a single block-fade. */
.bio > p.fade-in.is-visible:nth-child(1) { transition-delay: 0ms; }
.bio > p.fade-in.is-visible:nth-child(2) { transition-delay: 80ms; }
.bio > p.fade-in.is-visible:nth-child(3) { transition-delay: 160ms; }
.bio > p.fade-in.is-visible:nth-child(4) { transition-delay: 240ms; }

.contact-list.fade-in.is-visible li:nth-child(1) { transition-delay: 0ms; }
.contact-list.fade-in.is-visible li:nth-child(2) { transition-delay: 70ms; }

/* ========== RESPONSIVE ========== */
/* Tablet — iPad portrait (768px) up to small laptop (1024px).
   Sits between mobile and desktop and deserves its own dial-in. */
@media (min-width: 701px) and (max-width: 1024px) {
  section { padding: clamp(2.5rem, 6vh, 4rem) 1.75rem; }
  .stream-links { gap: 2rem 3rem; }
}

@media (max-width: 900px) {
  section { padding: clamp(2.25rem, 5vh, 3.5rem) 1.25rem; }
  .about-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-title { letter-spacing: 0.08em; }
}

@media (max-width: 600px) {
  .mouse-light { display: none; }
  /* particles stay on — they're part of the hero atmosphere */
  section { padding: clamp(2rem, 4.5vh, 3rem) 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
  }
  /* Everything that is normally faded in starts at zero opacity and relies
     on its animation to bring it back. With animations reduced to nothing,
     that reliance is a trap: the hero would stay blank. Here nothing fades
     in, so nothing can fail to arrive. */
  .hero-title, .hero-eyebrow, .hero-rule, .hero-sub,
  .moon-menu, .spotify-cta--hero, .fade-in, .band, .plate,
  .craft-figure, .craft-text, .sl-item, .sc-inner, .sc-tile,
  /* Das runde Portraet fehlte hier. Es blieb bei reduzierter Bewegung
     als einziges auf Deckkraft null und wartete auf eine Einblendung,
     die dort gar nicht mehr stattfindet. */
  .bio-portrait, .channel-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* Particles are slow drifting motes, not aggressive motion — keep them.
     Mouse-driven cursor light is fine too; only the auto-animated
     ambient backgrounds get hidden. */
  .bg-stained, .bg-gradient { animation: none; }
}

/* ============================================================
   SPOTIFY — CTA buttons + dedicated banner section
   ============================================================ */
.spotify-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(212, 165, 116, 0.4);
  border-radius: 2px;
  background: rgba(7, 6, 10, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    box-shadow .25s var(--ease-out),
    transform .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .spotify-cta:hover {
    color: #1ed760;                      /* Spotify green — only on hover */
    border-color: #1ed760;
    box-shadow: 0 0 30px rgba(30, 215, 96, 0.25);
    transform: translateY(-2px);
  }
}
.spotify-icon { width: 18px; height: 18px; }
.spotify-icon--large { width: 24px; height: 24px; }

/* Hero CTA — compact, sits below the claim */
.spotify-cta--hero {
  margin-top: 2.5rem;
  opacity: 0;
  animation: heroFadeIn 1.3s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: 1.3s;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 0.92; transform: translateY(0); }
}

/* Dedicated banner between Songs and About — full-width, golden frame */
.spotify-banner {
  position: relative;
  padding: clamp(3rem, 8vh, 6rem) 1.5rem;
  text-align: center;
  overflow: hidden;
}
.spotify-banner__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 2rem;
  z-index: 2;
}

.spotify-banner__label {
  font-family: 'EB Garamond', serif;
  font-size: 0.75rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
  opacity: 0.9;
}
.stream-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  margin-top: 1.5rem;
}

.stream-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  color: rgba(245, 241, 232, 0.88);
  text-decoration: none;
  transition: transform .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .stream-cta:hover { transform: translateY(-3px); }
}

.stream-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  color: inherit;
  transition: color .35s ease, filter .35s ease;
}

.stream-cta--spotify:hover .stream-icon {
  color: #1ed760;
  filter: drop-shadow(0 0 22px rgba(30, 215, 96, 0.55));
}
.stream-cta--apple:hover .stream-icon {
  color: #fa243c;
  filter: drop-shadow(0 0 22px rgba(250, 36, 60, 0.6));
}

.spotify-banner__sub {
  margin-top: 2rem;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(245, 241, 232, 0.6);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .spotify-banner { padding: 6rem 1rem; }
  .spotify-banner__inner { padding: 3rem 1.5rem; }
  .stream-cta { padding: 0.5rem; }
  .stream-icon { width: 44px; height: 44px; }
}

/* ============================================================
   MANIFESTO — why handmade music, and why these covers.
   Column-width prose in the middle of the night page: the reader
   has just been through the songs and is being told what they are for.
   ============================================================ */
.manifesto {
  padding: clamp(2rem, 6vh, 4rem) 1.5rem clamp(1rem, 3vh, 2rem);
}

.manifesto-inner {
  max-width: 34em;
  margin: 0 auto;
}

.manifesto-inner p {
  margin-bottom: 1.5rem;
  color: rgba(245, 241, 232, 0.82);
}
.manifesto-inner p:last-child { margin-bottom: 0; }



/* ============================================================
   SHORTS — a rail of upright films

   Four stills in a row that can be pushed sideways with a finger, a
   trackpad or the two arrows. Pressing one opens it large and upright,
   the shape it was filmed in, over a darkened page.

   The rail is padded rather than centred: justify-content:center on a
   scrolling flex row makes the left overflow unreachable in several
   browsers. Padding of half the leftover width does the same job and
   keeps every tile in reach.
   ============================================================ */
.shorts { padding: clamp(2rem, 6vh, 4rem) 0 clamp(1rem, 4vh, 3rem); }
.shorts-lead {
  max-width: 34em;
  margin: 0 auto clamp(1.4rem, 3.5vh, 2.2rem);
  padding: 0 1.5rem;
  text-align: center;
  font-size: 0.92rem;
  color: rgba(245, 241, 232, 0.62);
}

.shorts-gallery { position: relative; }

.shorts-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* Kein scroll-snap. Die Polsterung, die den Streifen mittig haelt,
     schiebt den Einrastpunkt der ersten Kachel weiter nach rechts, als
     ueberhaupt gescrollt werden kann -- der Browser landet dann beim
     Laden ganz rechts, und der Streifen beginnt am Ende. Freies
     Schieben ist fuer eine Bilderreihe ohnehin das ruhigere Verhalten. */
  /* 940 statt der 980, die vier Kacheln zusammen messen: so ragt die
     vierte auf jeder Breite ein Stück über den Rand. Ein Streifen, der
     genau aufgeht, sieht aus wie eine fertige Reihe und lädt niemanden
     zum Schieben ein. */
  padding: 0.6rem max(1.5rem, calc((100% - 940px) / 2)) 1.4rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shorts-rail::-webkit-scrollbar { display: none; }
.shorts-rail:focus-visible { outline: 1px solid rgba(212, 165, 116, 0.5); outline-offset: -4px; }

.short {
  flex: 0 0 auto;
  width: clamp(148px, 42vw, 230px);
  aspect-ratio: 9 / 16;
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background: #0c0a10;
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.18),
    0 16px 42px rgba(0, 0, 0, 0.58);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.short img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* On a big iMac four tiles at 230px sit lost in the middle of the page.
   They grow at the same two thresholds the song list uses. */
@media (min-width: 1500px) { .short { width: 268px; } }
@media (min-width: 2000px) { .short { width: 300px; } }
.short:hover, .short:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.42),
    0 24px 56px rgba(0, 0, 0, 0.66);
}

/* The badge sits low and small: the still should be the thing seen
   first, the invitation second. */
.short-play {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(8, 7, 12, 0.62);
  color: rgba(245, 241, 232, 0.92);
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.38);
  transition: background .45s var(--ease-out);
}
.short-play svg { width: 20px; height: 20px; margin-left: 2px; }
.short:hover .short-play { background: rgba(212, 165, 116, 0.82); color: #0a0810; }

/* The arrows show wherever there is something to scroll to, finger or
   mouse alike. Without one a touch screen gives no sign that the row
   continues past the edge. */
.shorts-arrow {
  position: absolute;
  top: calc(50% - 10px);
  transform: translateY(-50%);
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(10, 8, 14, 0.72);
  color: rgba(245, 241, 232, 0.85);
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.3);
  transition: opacity .4s var(--ease-out), background .4s var(--ease-out);
}
.shorts-arrow svg { width: 22px; height: 22px; }
.shorts-arrow { display: grid; }
.shorts-arrow--prev { left: clamp(0.4rem, 2vw, 1.6rem); }
.shorts-arrow--next { right: clamp(0.4rem, 2vw, 1.6rem); }
.shorts-arrow:hover { background: rgba(212, 165, 116, 0.8); color: #0a0810; }
.shorts-arrow:disabled { opacity: 0; pointer-events: none; }

/* Everything already fits: there is nothing to scroll to. */
.shorts--static .shorts-arrow { display: none; }

/* Until somebody has pushed the row once, the forward arrow leans that
   way every few seconds. Four pixels, slowly -- enough to read as an
   invitation, not enough to nag. It stops for good at the first touch. */
@keyframes shorts-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  72%           { transform: translateX(4px); }
  84%           { transform: translateX(0); }
}
.shorts--untouched .shorts-arrow--next:not(:disabled) svg {
  animation: shorts-nudge 3.6s var(--ease-out) infinite;
}
.low-power .shorts-arrow--next svg { animation: none !important; }

/* ---------- The window ---------- */
.shorts-box {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(4, 3, 7, 0.94);
  backdrop-filter: blur(6px);
}
.shorts-box[hidden] { display: none; }

.shorts-box-stage { display: grid; gap: 0.9rem; justify-items: center; }
.shorts-box-frame {
  /* Upright, and never taller than the screen it is shown on. The
     width follows from the height so the film is never letterboxed. */
  width: min(calc(100vw - 2rem), calc((100vh - 9rem) * 9 / 16), 430px);
  aspect-ratio: 9 / 16;
  border-radius: 3px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.22),
    0 30px 80px rgba(0, 0, 0, 0.7);
}
.shorts-box-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.shorts-box-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: rgba(245, 241, 232, 0.7);
}
.shorts-box-step {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(245, 241, 232, 0.07);
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.26);
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.shorts-box-step svg { width: 20px; height: 20px; }
.shorts-box-step:hover { background: rgba(212, 165, 116, 0.8); color: #0a0810; }
.shorts-box-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}
.shorts-box-close {
  position: absolute;
  top: clamp(0.6rem, 2vh, 1.6rem);
  right: clamp(0.6rem, 2vw, 1.6rem);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(245, 241, 232, 0.07);
  color: rgba(245, 241, 232, 0.85);
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.26);
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.shorts-box-close svg { width: 22px; height: 22px; }
.shorts-box-close:hover { background: rgba(212, 165, 116, 0.8); color: #0a0810; }

/* For a reader who cannot see the play badge */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .short, .short-play, .shorts-arrow,
  .shorts-box-step, .shorts-box-close { transition: none; }
  .shorts-arrow--next svg { animation: none !important; }
  .short:hover, .short:focus-visible { transform: none; }
  .shorts-rail { scroll-behavior: auto; }
}

/* ============================================================
   SONG LIST
   Ten songs, ten quiet rows. Closed, the whole list is about one
   screen tall; open, only ever one of them. A long lyric scrolls
   inside its own panel so it can never stretch the page again.
   ============================================================ */

.sl-list {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
}

.sl-item {
  border-bottom: 1px solid rgba(212, 165, 116, 0.14);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.sl-item:first-child { border-top: 1px solid rgba(212, 165, 116, 0.14); }
.sl-item.is-visible { opacity: 1; transform: translateY(0); }

.sl-head { margin: 0; font-weight: 400; }

.sl-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.3rem);
  padding: 0.85rem 0.4rem;
  text-align: left;
  cursor: pointer;
  transition: background .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sl-row:hover { background: rgba(212, 165, 116, 0.05); }
  .sl-row:hover .sl-cover img { transform: scale(1.07); }
  .sl-row:hover .sl-title { color: var(--text); }
}
.sl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sl-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(245, 241, 232, 0.45);
}

.sl-cover {
  display: block;
  width: clamp(46px, 8vw, 58px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.sl-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease-out);
}

.sl-title-wrap { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; min-width: 0; }

.sl-title {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(245, 241, 232, 0.88);
  transition: color .4s var(--ease-out);
}

.sl-badge {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  white-space: nowrap;
}

.sl-chevron { display: flex; color: var(--accent); opacity: 0.6; }
.sl-chevron svg {
  width: 20px; height: 20px;
  transition: transform .5s var(--ease-out);
}
.sl-item.is-open .sl-chevron svg { transform: rotate(180deg); }
.sl-item.is-open .sl-title { color: var(--text); }
.sl-item.is-open .sl-cover { box-shadow: 0 4px 20px color-mix(in oklab, var(--song-accent) 45%, transparent); }

/* ---------- Panel ---------- */
.sl-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .55s var(--ease-drawer);
}
.sl-panel[hidden] { display: none; }

.sl-panel-inner {
  padding: 0.6rem 0.4rem 2.2rem clamp(0.4rem, 3vw, 4.2rem);
}

.sl-player { position: relative; }
.sl-player.is-playing .sl-play,
.sl-player.is-playing .sl-player-note { display: none; }

.sl-player iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 2px;
  display: block;
}

.sl-play {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.4rem 0.6rem 1rem;
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: 2px;
  color: var(--accent);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out);
}
.sl-play svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) {
  .sl-play:hover { background: rgba(212, 165, 116, 0.1); border-color: var(--accent); }
}

.sl-player-note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.42);
  max-width: 42ch;
}

.sl-quote {
  margin: 1.6rem 0 0;
  font-family: 'Hermissoul', 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.6;
  color: color-mix(in oklab, var(--song-accent) 60%, #f5f1e8);
  padding-left: 1rem;
  border-left: 1px solid color-mix(in oklab, var(--song-accent) 45%, transparent);
  text-wrap: pretty;
}

/* ---------- Lyrics ----------
   Sixty-four lines used to push the whole page down. Now the sheet
   keeps its own height and scrolls within itself. */
.sl-lyrics-wrap { margin-top: 1.8rem; }

.sl-lyrics-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
  margin-bottom: 0.8rem;
}

.sl-lyrics {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 1rem;
  font-size: 0.98rem;
  line-height: 1.9;
  color: rgba(245, 241, 232, 0.7);
  /* The sheet fades out at its lower edge so it reads as continuing */
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.sl-lyrics::-webkit-scrollbar { width: 3px; }
.sl-lyrics::-webkit-scrollbar-thumb { background: rgba(212, 165, 116, 0.3); border-radius: 3px; }
.sl-line { display: block; }
.sl-break { display: block; height: 0.9em; }

.sl-links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

.sl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(212, 165, 116, 0.25);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: rgba(245, 241, 232, 0.75);
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.sl-link svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .sl-link:hover { color: var(--text); border-color: var(--accent); }
}

.sl-credits {
  margin-top: 1.6rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.42);
}

@media (max-width: 560px) {
  .sl-row { gap: 0.7rem; padding: 0.75rem 0.2rem; }
  .sl-num { display: none; }
  .sl-panel-inner { padding-left: 0.2rem; padding-right: 0.2rem; }
  .sl-lyrics { max-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-item { opacity: 1; transform: none; transition: none; }
  .sl-panel { transition: none; }
}

/* ============================================================
   MOON MENU — the way around the site, hanging under the title.

   Four phases: full moon home, half moon to the covers, two thin
   crescents for the legal pages. Each drifts on its own clock, so the
   row never pulses in unison the way a synchronised animation does.
   ============================================================ */
.moon-menu {
  opacity: 0;
  /* Navigation cannot keep people waiting. It arrives just behind the
     title, not two seconds later. */
  animation: heroFadeIn 1.1s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .55s;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  /* Sechs Monde statt fuenf: Abstaende und Scheiben mussten enger
     werden, sonst reisst die Reihe auf mittleren Schirmen. */
  gap: clamp(0.8rem, 2.6vw, 2.6rem);
  margin: 0 auto;
  padding: 0.5rem 0;
}

.moon-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem;
  -webkit-tap-highlight-color: transparent;
}

.moon-disc {
  display: block;
  /* Muss bei 700px an die engere Stufe anschliessen, sonst
     schrumpfen die Monde, waehrend der Schirm waechst. */
  width: clamp(56px, 10vw, 100px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* The glow is the moon's own light on the dark around it */
  filter: drop-shadow(0 0 14px rgba(212, 165, 116, 0.28));
  transition: filter .6s var(--ease-out), transform .6s var(--ease-out);
  animation: moonDrift 11s ease-in-out infinite alternate;
}
.moon-disc svg { width: 100%; height: 100%; display: block; }

/* Each moon on its own clock: different durations, different starts */
.moon-orb:nth-child(1) .moon-disc { animation-duration: 11s;   animation-delay: 0s; }
.moon-orb:nth-child(2) .moon-disc { animation-duration: 13.5s; animation-delay: -3s; }
.moon-orb:nth-child(3) .moon-disc { animation-duration: 9.5s;  animation-delay: -6s; }
.moon-orb:nth-child(4) .moon-disc { animation-duration: 15s;   animation-delay: -1.5s; }

@keyframes moonDrift {
  0%   { transform: translate3d(0, -5px, 0); }
  100% { transform: translate3d(0,  6px, 0); }
}

.moon-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.72rem, 1.5vw, 0.9rem);
  letter-spacing: 0.14em;
  text-align: center;
  color: rgba(245, 241, 232, 0.62);
  transition: color .4s var(--ease-out);
  max-width: 11ch;
  line-height: 1.35;
  text-wrap: balance;
  min-height: 2.7em;
}

@media (hover: hover) and (pointer: fine) {
  .moon-orb:hover .moon-disc {
    filter: drop-shadow(0 0 26px rgba(212, 165, 116, 0.6));
    transform: scale(1.07);
  }
  .moon-orb:hover .moon-name { color: var(--text); }
}
.moon-orb:active .moon-disc { transform: scale(0.97); }
.moon-orb:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.moon-orb[aria-current="page"] .moon-name { color: var(--text); }
.moon-orb[aria-current="page"] .moon-disc {
  filter: drop-shadow(0 0 20px rgba(212, 165, 116, 0.45));
}

/* ---------- Language switch, always in reach ---------- */
.lang-toggle {
  position: fixed;
  top: 1.2rem; right: 1.2rem;
  z-index: 210;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(212, 165, 116, 0.28);
  border-radius: 2px;
  background: rgba(14, 11, 8, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- The small bar, for once the hero is behind you ---------- */
.moon-mini {
  position: fixed;
  top: 1.2rem; left: 1.2rem;
  z-index: 205;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.2rem);
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(212, 165, 116, 0.18);
  border-radius: 2px;
  background: rgba(14, 11, 8, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.moon-mini.is-shown { opacity: 1; transform: none; pointer-events: auto; }

.moon-mini-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(245, 241, 232, 0.7);
  white-space: nowrap;
  transition: color .35s var(--ease-out);
}
.moon-mini-item svg { width: 14px; height: 14px; color: var(--accent); opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .moon-mini-item:hover { color: var(--text); }
  .moon-mini-item:hover svg { opacity: 1; }
}
.moon-mini-item[aria-current="page"] { color: var(--text); }

@media (max-width: 700px) {
  .moon-mini { gap: 0.55rem; padding: 0.35rem 0.5rem; }
  .moon-mini-item span { display: none; }
  .moon-mini-item svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .moon-disc { animation: none; }
}

/* Forced visible by the safety net when a hero animation never ran */
.is-forced-visible { opacity: 1 !important; transform: none !important; }

/* ============================================================
   LOW POWER
   Set by js/performance.js when the machine is weak or the measured
   frame rate drops. Only decoration is dropped: every word, every
   picture and every link stays exactly where it was.

   What goes, and why:
     backdrop blur   — the most expensive thing on the page per pixel
     blend modes     — force the compositor to re-read what is beneath
     large blurs     — the halo and the paper grain are full-screen
     pointer light   — repaints a 460px gradient on every mouse move
     endless drifts  — keep the compositor awake with nothing to show
   ============================================================ */
.low-power .lang-toggle,
.low-power .moon-mini,
.low-power .modal,
.low-power .spotify-cta {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Without the blur these need to carry their own opaque ground */
.low-power .lang-toggle,
.low-power .moon-mini { background: rgba(12, 10, 8, 0.92); }
.low-power .modal { background: rgba(7, 6, 10, 0.96); }
.low-power .spotify-cta { background: rgba(7, 6, 10, 0.8); }

.low-power .bg-paper,
.low-power .bg-grain,
.low-power .bg-mouse-light { display: none; }

.low-power .bg-particles-global,
.low-power #particle-canvas { display: none; }

.low-power .hero-title::before { display: none; }
.low-power .hero-title { filter: none; }   /* nur noch Altlast, filter ist weg */
.low-power .moon-disc { filter: none; }
.low-power .lantern-glow { display: none; }

/* The slow background drifts and the light that wanders over the title */
/* The moons keep drifting even here: a transform on five small elements
   is composited on the GPU and costs nothing worth saving. Only a stated
   preference for reduced motion stills them. */
.low-power .bg-gradient,
.low-power .bg-hue,
.low-power .hero-title,
.low-power .sl-item { animation: none; }

/* Shadows are cheap next to blurs, but a dozen large ones still cost */
.low-power .sl-cover,
.low-power .moon-orb .moon-disc { box-shadow: none; }

/* The cathedral window is the single most expensive thing on the page:
   a large photograph carrying blur, saturate, brightness and contrast,
   composited through a blend mode, on two sections at once. In the
   frugal mode it stays, plainly: same picture, no processing. */
.low-power .bg-stained,
.low-power .bg-stained-glass {
  filter: none !important;
  mix-blend-mode: normal;
  opacity: 0.42;
}
.low-power .bg-hue { mix-blend-mode: normal; opacity: 0.5; }
.low-power 

/* Beat the specificity of the current-page rule, and stop transitions
   from carrying an expensive value for another half second. */
.low-power .moon-orb .moon-disc,
.low-power .moon-orb[aria-current="page"] .moon-disc {
  filter: none;
  transition: none;
}

/* ============================================================
   BY HAND — the picture strip, in the dark.
   Text and photograph take turns leading; each row arrives from the
   side its picture sits on. Moved here from the covers page: how the
   music is made belongs with the person who makes it.
   ============================================================ */
.craft { padding: clamp(3rem, 9vh, 6rem) 1.5rem clamp(2rem, 6vh, 4rem); }

.craft-row {
  max-width: 1000px;
  margin: 0 auto clamp(3rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4.5vw, 3.4rem);
  align-items: center;
}
.craft-row:last-child { margin-bottom: 0; }
.craft-row--flip .craft-figure { order: 2; }

.craft-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.craft-row--flip .craft-figure { transform: translateX(36px); }
.craft-row.is-visible .craft-figure { opacity: 1; transform: translateX(0); }

.craft-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 2s var(--ease-out);
}
.craft-row.is-visible .craft-figure img { transform: scale(1); }

.craft-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease-out) .15s, transform 1.2s var(--ease-out) .15s;
}
.craft-row.is-visible .craft-text { opacity: 1; transform: translateY(0); }

.craft-text p {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.82;
  color: rgba(245, 241, 232, 0.8);
  max-width: 40ch;
}
/* Until the voice paragraph there was only ever one per row, so the gap
   between them had never come up. */
.craft-text p + p { margin-top: 1.3rem; }

@media (max-width: 760px) {
  .craft-row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .craft-row--flip .craft-figure { order: 0; }
  .craft-figure, .craft-row--flip .craft-figure { transform: translateY(28px); }
  .craft-row.is-visible .craft-figure { transform: translateY(0); }
  .craft-text p { max-width: none; }
}

/* ---------- Full-width band ----------
   The movement is on the frame, never on the photograph: a scale on the
   image itself crops it, and a head can end up outside the frame. */
.band {
  position: relative;
  width: 100%;
  margin: clamp(2rem, 7vh, 5rem) 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
}
.band.is-visible { opacity: 1; transform: none; }
.band img { width: 100%; height: auto; display: block; }

/* A panorama used as a divider. Four to one is generous on a desk and a
   thin strip on a phone -- which is the right behaviour for something
   whose job is to separate two sections. Below 700px it keeps a little
   more height and holds the left end of the picture, where the person
   is; the empty snow reads as nothing at 98 pixels tall.
   No veil: unlike the other bands this photograph is already dark. */
.band--panorama { aspect-ratio: 4 / 1; --band-focus: 6%; }
.band--panorama img { height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .band--panorama { aspect-ratio: 5 / 2; }
  /* Welcher Teil des Panoramas auf dem Telefon stehen bleibt. Jedes Band
     setzt seinen eigenen Wert; der Vorgabewert haelt das linke Ende. */
  .band--panorama img { object-position: var(--band-focus) center; }
}

/* ============================================================
   A PLATE — one photograph set down on the dark page

   A band runs the full width and reads as a window cut into the page.
   A plate is the opposite: a picture laid down, with a rule around it
   and room to breathe either side. It is for photographs that want to
   be looked at rather than passed through — and for upright or square
   ones, which a full-width band would have to crop.
   ============================================================ */
.plate {
  width: min(500px, calc(100% - 3rem));
  margin: clamp(3rem, 9vh, 6rem) auto;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
}
.plate.is-visible { opacity: 1; transform: translateY(0); }
.plate--tall { width: min(400px, calc(100% - 3rem)); }

.plate-inner {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  /* A hairline in the same gold the page uses elsewhere, so the picture
     sits on the paper instead of floating above it. */
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.20),
    0 22px 60px rgba(0, 0, 0, 0.62);
}
.plate img { width: 100%; height: auto; display: block; }

/* Same reasoning as the band veil below, gentler: these are smaller. */
.plate-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(7, 6, 10, 0.32) 0%, rgba(7, 6, 10, 0) 15%,
    rgba(7, 6, 10, 0) 85%, rgba(7, 6, 10, 0.32) 100%);
}

/* These photographs are bright and the page is not; fade their edges
   into the dark so a band reads as a window, not a pasted rectangle. */
.band-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    #07060a 0%, rgba(7, 6, 10, 0) 9%, rgba(7, 6, 10, 0) 91%, #07060a 100%);
}

.low-power .craft-figure,
.low-power .band { box-shadow: none; }

/* The name of whoever wrote a cover, next to its title */
.sl-written {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(245, 241, 232, 0.55);
  white-space: nowrap;
}
.sl-soon {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: rgba(245, 241, 232, 0.5);
}

/* A section title on a page that is not the home page */
.hero--page { height: auto; min-height: 60vh; padding: 8rem 1.5rem 2.5rem; }
.hero-title--page {
  font-size: clamp(2.6rem, 8.5vw, 5.4rem);
  letter-spacing: 0.12em;
}
.hero-lead {
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
  color: rgba(245, 241, 232, 0.68);
  text-wrap: pretty;
}
.songs--covers { padding-top: 0; }

/* The image notice: quieter than the links above it, but readable.
   Transparency about how the photographs were made. */
.footer-note {
  max-width: 62ch;
  margin: 2.4rem auto 0 !important;
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(245, 241, 232, 0.5);
  text-wrap: pretty;
}



/* ============================================================
   READ ON — see the note in in-other-voices.css. A long text does not
   have to arrive all at once.
   ============================================================ */
.read-more {
  position: relative;
  display: block;
  width: 100%;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0 0 0.4rem;
  text-align: center;
  color: var(--accent);
}
.read-more-line {
  display: block;
  height: 1px;
  margin-bottom: 1.4rem;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.45) 50%, transparent);
  transition: background .5s var(--ease-out);
}
.read-more-label {
  display: block;
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 1.2;
  transition: color .4s var(--ease-out), letter-spacing .5s var(--ease-out);
}
.read-more-arrow {
  width: 24px; height: 24px;
  margin-top: 0.5rem;
  transition: transform .6s var(--ease-out);
  animation: readNudge 3.6s ease-in-out infinite;
}
@keyframes readNudge {
  0%, 82%, 100% { transform: translateY(0); }
  90%           { transform: translateY(4px); }
}
@media (hover: hover) and (pointer: fine) {
  .read-more:hover .read-more-label { color: var(--text); letter-spacing: 0.26em; }
  .read-more:hover .read-more-line {
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.8) 50%, transparent);
  }
  .read-more:hover .read-more-arrow { transform: translateY(3px); }
}
.read-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.read-more.is-open .read-more-arrow { transform: rotate(180deg); animation: none; }

.read-rest {
  overflow: hidden;
  max-height: 0;
  transition: max-height .7s var(--ease-out);
}
.read-rest[hidden] { display: none; }
.read-rest > p:first-child { padding-top: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  .read-more-arrow { animation: none; }
  .read-rest { transition: none; }
}
.low-power .read-more-arrow { animation: none; }


/* YouTube joins the streaming row */
@media (hover: hover) and (pointer: fine) {
  .stream-cta--youtube:hover { color: #ff4444; border-color: #ff4444; }
}

/* ============================================================
   CHANNELS
   Two cards, and three tiles above them when reels have been chosen.
   Built so the block stands on the cards alone: an empty reel list
   must not leave a stranded line of text.

   The cover frames are served from this site, so nothing reaches
   Instagram or YouTube until somebody clicks: no embed script, no
   cookies, no third party watching the reader.
   ============================================================ */
.social { padding: clamp(2.5rem, 6vh, 4.5rem) 1.5rem; }

.sc-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.sc-inner.is-visible { opacity: 1; transform: none; }

.sc-head {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.75);
  margin-bottom: clamp(1.8rem, 4vh, 2.6rem);
}

/* ---------- The cards ---------- */
/* Hier standen zwei Karten in zwei Spalten. Geblieben ist eine, und
   eine einzelne Spalte haette sie an den linken Rand gestellt. Als
   zentrierte Reihe steht sie mittig -- und zwei stuenden es auch
   wieder, falls je eine zweite dazukommt. */
.sc-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.6rem, 2.5vw, 1.4rem);
  max-width: 500px;
  margin: 0 auto;
}
.sc-card { width: min(240px, 100%); }

.sc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(1.4rem, 3.5vw, 2rem) 1rem;
  border: 1px solid rgba(212, 165, 116, 0.22);
  border-radius: 3px;
  background: rgba(20, 16, 12, 0.35);
  transition: border-color .45s var(--ease-out),
              background .45s var(--ease-out),
              transform .45s var(--ease-out);
}

.sc-mark {
  display: block;
  width: clamp(30px, 5vw, 36px);
  height: clamp(30px, 5vw, 36px);
  color: var(--accent);
  transition: color .45s var(--ease-out), transform .5s var(--ease-out);
}
.sc-mark svg { width: 100%; height: 100%; display: block; }

.sc-name {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--text);
}

.sc-handle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(245, 241, 232, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .sc-card:hover {
    border-color: rgba(212, 165, 116, 0.55);
    background: rgba(30, 24, 17, 0.5);
    transform: translateY(-3px);
  }
  .sc-card:hover .sc-mark { transform: scale(1.08); }
  /* Each platform's own colour, but only under the pointer */
  .sc-card--instagram:hover .sc-mark { color: #e1719b; }
}
.sc-card:active { transform: translateY(-1px); }
.sc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- The reel tiles ---------- */
.sc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 2vw, 1.1rem);
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}

.sc-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(20, 16, 12, 0.6);
  border: 1px solid rgba(212, 165, 116, 0.18);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease-out) var(--tile-delay, 0s),
              transform .9s var(--ease-out) var(--tile-delay, 0s),
              border-color .4s var(--ease-out);
}
.sc-inner.is-visible .sc-tile { opacity: 1; transform: none; }

.sc-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out), opacity .5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sc-tile:hover { border-color: rgba(212, 165, 116, 0.5); }
  .sc-tile:hover img { transform: scale(1.05); opacity: 0.75; }
  .sc-tile:hover .sc-play { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
.sc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sc-tile--bare {
  background: radial-gradient(ellipse at 50% 40%, rgba(212, 165, 116, 0.1), transparent 70%),
              rgba(20, 16, 12, 0.55);
}

.sc-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(36px, 6.5vw, 50px);
  height: clamp(36px, 6.5vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(7, 6, 10, 0.5);
  border: 1px solid rgba(245, 241, 232, 0.4);
  color: rgba(245, 241, 232, 0.92);
  opacity: 0.85;
  transition: transform .5s var(--ease-out), opacity .4s var(--ease-out);
}
.sc-play svg { width: 45%; height: 45%; margin-left: 8%; }

.sc-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.7rem 0.7rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  color: rgba(245, 241, 232, 0.9);
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 10, 0.8));
}

@media (max-width: 540px) {
  .sc-tiles { gap: 0.45rem; }
  .sc-caption { font-size: 0.7rem; padding: 1.2rem 0.5rem 0.5rem; }
  .sc-head { font-size: 1.15rem; letter-spacing: 0.18em; margin-bottom: 1.2rem; }
  .sc-card { padding: 1rem 0.5rem; gap: 0.35rem; }
  .sc-mark { width: 26px; height: 26px; }
  .sc-name { font-size: 0.95rem; }
  .sc-handle { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-inner, .sc-tile { opacity: 1; transform: none; transition: none; }
}
.low-power .sc-tile img, .low-power .sc-card { transition: none; }


/* Skip link — off screen until a keyboard reaches it, then it lands
   where it can be read. Anyone tabbing in gets past the menu in one
   keystroke instead of five moons. */
.skip-link {
  position: fixed;
  top: 0.6rem; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 300;
  padding: 0.6rem 1.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  transition: transform .25s var(--ease-out);
  background: #14100c;
  color: #f5f1e8;
  border: 1px solid var(--accent);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Instagram in the streaming row — its own colour only under the pointer,
   like Spotify's green and YouTube's red. */
@media (hover: hover) and (pointer: fine) {
  .stream-cta--instagram:hover { color: #e1719b; border-color: #e1719b; }
}

/* The fifth pair carries a landscape photograph where the others are
   upright. Cropping it to 4:5 would cut the microphone out of frame,
   and the microphone is the reason the picture is there at all. */
.craft-figure--wide { aspect-ratio: 3 / 2; }
.craft-figure--wide img { object-position: 34% center; }
.craft-row--wide { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
.craft-row--wide .craft-text p { max-width: 46ch; }
@media (max-width: 760px) {
  .craft-figure--wide { aspect-ratio: 4 / 3; }
  .craft-row--wide { grid-template-columns: minmax(0, 1fr); }
}

/* Five moons must stay one row: an orb is as wide as its label, and five
   labels the width of "Datenschutz" do not fit a phone. */
/* Mittlere Schirme: noch eine Reihe, aber ohne Gedraenge. */
@media (max-width: 700px) {
  .moon-menu { gap: 0.5rem; }
  .moon-disc { width: clamp(56px, 11vw, 72px); }
  .moon-name {
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    max-width: 9ch;
    min-height: 2.4em;
  }
  .moon-orb { gap: 0.5rem; padding: 0.2rem; }
}

/* Auf dem Telefon zwei Reihen zu dritt.
   Sechs Monde nebeneinander zu zwingen hiess, jeden auf 44 Pixel zu
   schrumpfen -- lesbar war das nicht mehr. In zwei Reihen hat jeder
   das Doppelte an Breite, und die Namen passen wieder in eine Zeile,
   statt auf neun Zeichen gekuerzt umzubrechen. */
@media (max-width: 560px) {
  .moon-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 4.5vw, 1.7rem) clamp(0.4rem, 2vw, 0.9rem);
    width: min(100%, 25rem);
    justify-items: center;
    align-items: start;
  }
  .moon-disc { width: clamp(60px, 19vw, 88px); }
  .moon-name {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    max-width: none;
    min-height: 0;
  }
  .moon-orb { gap: 0.55rem; padding: 0.15rem; }
}


/* A way out of the modal that does not depend on spotting the × in the
   corner: a named button and the other pages, at the end of the text
   where the reader actually is. */
.modal-foot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(212, 165, 116, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
}

.modal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out);
}
.modal-back svg { width: 17px; height: 10px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .modal-back:hover { background: rgba(212, 165, 116, 0.1); border-color: var(--accent); }
}

.modal-links {
  margin: 0 !important;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em;
  color: rgba(245, 241, 232, 0.45);
}
.modal-links a { color: rgba(245, 241, 232, 0.7); border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .modal-links a:hover { color: var(--accent); }
}

@media (max-width: 520px) {
  .modal-foot { flex-direction: column; align-items: flex-start; }
}

/* The back button carries .modal-close so the existing handler shuts the
   window on it — but not its absolute corner position. */
.modal-back { position: static; font-size: 0.85rem; line-height: 1; }

/* The footer sits outside <main> so it counts as contentinfo. That took
   away the stacking context it used to inherit, and the fixed background
   layers — position:fixed with z-index 0 — began painting over it. A
   static element loses that contest every time. */
.footer { position: relative; z-index: 1; }

/* ============================================================
   SONG LIST ON LARGE SCREENS
   At 720px the list is half a laptop and barely a quarter of a big
   iMac: a thin ribbon with emptiness on both sides. Below 1500px
   nothing changes — on a phone the proportions are already right.
   ============================================================ */
@media (min-width: 1500px) {
  .sl-list { max-width: 880px; }
  .sl-row {
    padding: 1.15rem 0.6rem;
    gap: 1.7rem;
  }
  .sl-cover { width: 76px; }
  .sl-title { font-size: 1.62rem; }
  .sl-num { font-size: 0.78rem; letter-spacing: 0.2em; }
  .sl-badge, .sl-written { font-size: 0.78rem; }
  .sl-panel-inner { padding-left: 6rem; padding-bottom: 2.6rem; }
  .sl-quote { font-size: 1.4rem; }
  .sl-lyrics { max-height: 420px; font-size: 1.06rem; }
  .songs-lead, .hero-lead { font-size: 1.12rem; }
}

@media (min-width: 2000px) {
  .sl-list { max-width: 1000px; }
  .sl-row { padding: 1.35rem 0.8rem; gap: 2rem; }
  .sl-cover { width: 88px; }
  .sl-title { font-size: 1.85rem; }
  .sl-panel-inner { padding-left: 7rem; }
  .sl-lyrics { max-height: 460px; font-size: 1.12rem; }
}

/* ============================================================
   DIE INITIALE

   Der erste Buchstabe einer langen Passage, in der Schrift der
   Ueberschriften und in Gold.

   Ein echtes Element und nicht ::first-letter: Die Textanimation
   ersetzt jedes Wort durch ein inline-block, und in so einen Kasten
   kann ein Browser nicht hineingreifen, um einen ersten Buchstaben zu
   gestalten. Die Initiale waere verschwunden, sobald das Skript laeuft.
   Die Zerlegung ueberspringt sie deshalb.
   ============================================================ */
.initial {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--accent);
  /* Er steht in der Zeile und wird nicht umflossen. Die enge
     Zeilenhoehe haelt den Kasten des Buchstabens klein genug, dass die
     erste Zeile nicht aufgeschoben wird: gemessen 6.03 statt 6.00
     Zeilen, also ein Pixel. Mit 0.82 waren es drei. */
  font-size: 2.2em;
  line-height: 0.72;
  padding-right: 0.03em;
}

/* ============================================================
   UNTERRICHT

   Der einzige Abschnitt, der etwas anbietet statt etwas zu zeigen.
   Er steht deshalb in einem eigenen Rahmen und hat einen Schein
   dahinter, der langsam atmet -- auffaellig genug, um im Vorbeiscrollen
   haengenzubleiben, aber im selben Gold wie das Mondmenue, die Striche
   und die Initialen. Er soll herausstechen und nicht herausfallen.
   ============================================================ */
.lessons {
  position: relative;
  padding: clamp(2rem, 6vh, 4rem) 1.5rem clamp(2.5rem, 7vh, 5rem);
  scroll-margin-top: 2rem;     /* der Mond springt hierher */
}

.lessons-inner {
  position: relative;
  max-width: 44em;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(212, 165, 116, 0.22);
  border-radius: 3px;
  background: linear-gradient(165deg,
    rgba(212, 165, 116, 0.07) 0%,
    rgba(212, 165, 116, 0.02) 55%,
    transparent 100%);
  text-align: center;
  overflow: hidden;
}

/* Der Schein atmet: neun Sekunden hin, neun zurueck. Langsam genug,
   dass man ihn eher spuert als sieht. */
.lessons-glow {
  position: absolute;
  inset: -40% -15%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%,
    rgba(212, 165, 116, 0.17) 0%, transparent 62%);
  animation: lessons-breathe 9s ease-in-out infinite;
}
@keyframes lessons-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

.lessons-lead {
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: var(--text);
  margin-bottom: 1.4rem;
}
.lessons-body {
  position: relative;
  max-width: 34em;
  margin: 0 auto 1.1rem;
  color: rgba(245, 241, 232, 0.82);
}
.lessons-body:last-of-type { margin-bottom: 0; }

/* Das Zimmer, in dem der Unterricht stattfindet. Mittelgross: es soll
   den Ort zeigen, nicht den Abschnitt an sich reissen. Derselbe
   Haarstrich wie bei den Platten auf der Musikseite. */
/* Ein leiser Nachsatz unter den Kontaktwegen. Der Linktext benennt
   das Ziel selbst -- wer Links vorgelesen bekommt, hoert sonst nur
   "hier". */
.lessons-more {
  position: relative;
  margin-top: 1.6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.lessons-more a {
  color: rgba(245, 241, 232, 0.62);
  border-bottom: 1px solid rgba(212, 165, 116, 0.35);
  padding-bottom: 1px;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.lessons-more a:hover, .lessons-more a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.lessons-place {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 2vw, 1.1rem);
  width: min(100%, 34rem);
  margin: 2.2rem auto 0;
}
.lessons-place figure { margin: 0; }
.lessons-place img {
  width: 100%;
  /* Ein quadratisches Haus und ein breiter Raum: erst auf ein
     gemeinsames Format gebracht stehen sie als Paar nebeneinander,
     statt als zwei verschieden hohe Bilder. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.20),
    0 14px 34px rgba(0, 0, 0, 0.55);
}
/* Auf dem Telefon untereinander, sonst waeren beide zu klein. */
@media (max-width: 560px) {
  .lessons-place { grid-template-columns: 1fr; gap: 1.4rem; }
}
.lessons-place figcaption {
  margin-top: 0.7rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
}

.lessons-price {
  position: relative;
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.45rem, 4.2vw, 2rem);
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 1.9rem 0 1.7rem;
}

.lessons-ways {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}
.lessons-way {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid rgba(212, 165, 116, 0.38);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: background .45s var(--ease-out), color .45s var(--ease-out),
              border-color .45s var(--ease-out);
}
.lessons-way svg { width: 17px; height: 17px; flex: 0 0 auto; }
.lessons-way:hover, .lessons-way:focus-visible {
  background: rgba(212, 165, 116, 0.88);
  border-color: rgba(212, 165, 116, 0.88);
  color: #0a0810;
}

/* Ein Schein, der auf einem muehsam rechnenden Geraet atmet, ist der
   erste Luxus, auf den verzichtet wird. */
.low-power .lessons-glow { animation: none; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .lessons-glow { animation: none; opacity: 0.7; }
  .lessons-way { transition: none; }
}

/* ============================================================
   DER KANAL

   An die Stelle der beiden Liederlisten getreten. Eine Tafel, die
   ganz Link ist: Zeichen, Name, ein Satz und der Weg hinaus. Sie
   liegt in einem Schein, der langsam atmet -- derselbe Bernstein,
   den auch die Ueberschriften tragen.

   Das YouTube-Zeichen ist hier nicht rot, sondern im Rubin des
   Hausverlaufs gehalten. Die Form allein wird erkannt, und daneben
   steht das Wort; ein Fremdkoerper in Signalrot waere der einzige
   Punkt der Seite, der schreit.
   ============================================================ */
.channel {
  padding-top: clamp(1rem, 4vh, 2.5rem);
}

.channel-card {
  position: relative;
  opacity: 0;
  transform: translateY(26px);
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  width: min(720px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(212, 165, 116, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(212, 165, 116, 0.07), rgba(26, 26, 26, 0.55) 55%);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition:
    opacity 1.1s var(--ease-out),
    border-color 600ms var(--ease-out),
    transform 900ms var(--ease-out),
    box-shadow 600ms var(--ease-out);
}
.channel-card.is-visible { opacity: 1; transform: translateY(0); }

/* Der Schein hinter der Tafel. Er sitzt unter dem Inhalt und ist fuer
   Zeigegeraete unsichtbar, damit er den Klick nicht abfaengt. */
.channel-aura {
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 22% 50%,
    rgba(230, 178, 88, 0.22) 0%,
    rgba(216, 78, 90, 0.10) 38%,
    transparent 72%);
  opacity: 0.85;
  animation: channelBreath 11s var(--ease-in-out) infinite alternate;
}
@keyframes channelBreath {
  from { opacity: 0.6;  transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.08); }
}

.channel-mark {
  flex: none;
  width: clamp(58px, 11vw, 84px);
  line-height: 0;
}
.channel-mark svg { width: 100%; height: auto; display: block; }
.channel-mark-body {
  fill: #d84e5a;
  opacity: 0.88;
  transition: opacity 500ms var(--ease-out), fill 500ms var(--ease-out);
}
.channel-mark-play { fill: #0a0a0a; }

.channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.channel-eyebrow {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212, 165, 116, 0.8);
}

/* Der Kanalname darf umbrechen -- auf schmalen Geraeten ist er laenger
   als die Tafel breit ist. Umbrochen wird an einer beliebigen Stelle,
   weil ein Wort ohne Leerzeichen sonst hinauslaeuft. */
.channel-name {
  font-family: 'CCSBjork', 'Cormorant Garamond', serif;
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--text);
  overflow-wrap: anywhere;
}

.channel-text {
  font-size: clamp(0.92rem, 2.3vw, 1.02rem);
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.72);
  max-width: 34ch;
}

.channel-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.channel-arrow {
  width: 19px;
  height: 19px;
  transition: transform 500ms var(--ease-out);
}

/* Nur auf Geraeten mit Zeiger. Auf dem Handy gibt es kein Schweben,
   und eine Tafel, die sich beim Antippen hebt, wirkt wie ein Ruckeln. */
@media (hover: hover) and (pointer: fine) {
  .channel-card:hover,
  .channel-card:focus-visible {
    border-color: rgba(212, 165, 116, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 18px 50px -24px rgba(230, 178, 88, 0.45);
  }
  .channel-card:hover .channel-arrow,
  .channel-card:focus-visible .channel-arrow { transform: translateX(6px); }
  .channel-card:hover .channel-mark-body,
  .channel-card:focus-visible .channel-mark-body { opacity: 1; fill: #e2545f; }
}
.channel-card:focus-visible {
  outline: 2px solid rgba(212, 165, 116, 0.75);
  outline-offset: 5px;
}
.channel-card:active { transform: translateY(-1px) scale(0.995); }

/* Schmale Geraete: Zeichen ueber den Text, alles in die Mitte. */
@media (max-width: 560px) {
  .channel-card {
    flex-direction: column;
    text-align: center;
    gap: 1.1rem;
  }
  .channel-body { align-items: center; }
  .channel-text { max-width: none; }
}

/* Wer Bewegung abbestellt hat, bekommt den Schein ruhig -- aber
   sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .channel-aura { animation: none; opacity: 0.8; transform: none; }
  .channel-arrow { transition: none; }
}
.low-power .channel-aura { animation: none; opacity: 0.8; transform: none; }