/* =========================================================================
   Blutmärchen — public site stylesheet (Folio edition)
   Monochrome silver-and-parchment palette. The cover art supplies all
   chromatic tension; the chrome stays cool ink + warm bone + a single
   thread of gold. No blood reds anywhere — replaced by gold ornament
   and cool moonlight silver.
   ========================================================================= */

:root {
  /* Cool deep ground */
  --ink-bg-1:    #0a0a0c;
  --ink-bg-2:    #11131a;
  --ink-bg-3:    #181a23;
  --ink-bg-4:    #202531;

  /* Warm parchment text */
  --bone-1:      #ECE2CD;
  --bone-2:      #C8BCA8;
  --bone-3:      #908676;
  --bone-4:      #5a544a;

  /* Gold thread */
  --gold-1:      #D4BE8C;
  --gold-2:      #C9B380;
  --gold-3:      #8a7349;
  --gold-4:      #5d4f33;

  /* Cool moonlight silver */
  --silver-1:    #C9D0D8;
  --silver-2:    #8a93a0;
  --silver-3:    #495260;

  --rule:        rgba(201, 179, 128, 0.18);
  --rule-strong: rgba(201, 179, 128, 0.42);
  --rule-cold:   rgba(138, 147, 160, 0.22);

  /* Legacy aliases — keep so any in-line styles using the old tokens still resolve */
  --bg:          var(--ink-bg-1);
  --bg-2:        var(--ink-bg-2);
  --ink:         var(--bone-1);
  --ink-dim:     var(--bone-2);
  --ink-muted:   var(--bone-3);
  --blood:       var(--gold-1);          /* old red anchor → gold */
  --blood-deep:  var(--gold-3);
  --gold:        var(--gold-2);
  --gold-deep:   var(--gold-3);

  --serif-display: 'Cormorant Garamond', Georgia, serif;
  --serif-caps:    'Cormorant Unicase', 'Cormorant Garamond', serif;
  --serif-body:    'EB Garamond', Georgia, serif;
  --blackletter:   'UnifrakturMaguntia', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink-bg-1);
  color: var(--bone-1);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmospheric backdrop — cool moon halo + cold low light, no warm reds */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 88% 8%, rgba(201,208,216,0.14) 0%, transparent 28%),
    radial-gradient(ellipse at 50% 100%, rgba(73,82,96,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0c 0%, #08090e 60%, #050609 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

a { color: var(--bone-1); text-decoration: none; }
a:hover { color: var(--gold-1); }
::selection { background: var(--gold-3); color: var(--ink-bg-1); }

.layer { position: relative; z-index: 3; }

/* ── Top navigation ───────────────────────────────────────────────────── */
.bm-topnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(10, 10, 12, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  backdrop-filter: blur(10px) saturate(0.9);
  border-bottom: 1px solid var(--rule);
}
.bm-topnav .brand {
  font-family: var(--blackletter);
  font-size: 1.45rem; color: var(--bone-1);
  letter-spacing: 0.025em;
}
.bm-topnav .brand .b-letter {
  /* The "B" no longer screams red — restrained gold gilding instead */
  color: var(--gold-1);
  text-shadow: 0 0 14px rgba(212, 190, 140, 0.35);
}
.bm-topnav nav { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.bm-topnav nav a {
  font-family: var(--serif-caps);
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bone-2); transition: color 0.25s;
}
.bm-topnav nav a:hover, .bm-topnav nav a.active { color: var(--gold-1); }
.bm-topnav .lang { font-size: 0.62rem; color: var(--bone-4); letter-spacing: 0.25em; }
.bm-topnav .lang a { color: var(--bone-4); margin: 0 0.3rem; }
.bm-topnav .lang a.active { color: var(--gold-2); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  min-height: 86vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 4rem 1.5rem 3rem; position: relative; text-align: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(73,82,96,0.18), transparent 60%),
    linear-gradient(180deg, #0d0d11 0%, #08090e 70%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 90%, rgba(201,179,128,0.08), transparent 35%);
}

.top-bar {
  font-family: var(--serif-caps);
  letter-spacing: 0.45em; font-size: 0.72rem;
  color: var(--gold-2); text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.bandname {
  font-family: var(--blackletter);
  font-size: clamp(3.5rem, 12vw, 9rem);
  line-height: 0.95; color: var(--bone-1);
  text-shadow: 0 0 32px rgba(201,208,216,0.10);
  margin-bottom: 1.5rem; letter-spacing: 0.02em;
  position: relative; z-index: 3;
}
.bandname .b-letter {
  color: var(--gold-1);
  text-shadow: 0 0 20px rgba(212, 190, 140, 0.45);
}

.hero-rule {
  width: 6rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3) 50%, transparent);
  margin: 1rem auto 1.5rem;
}

.single-mark {
  font-family: var(--serif-caps);
  font-size: 0.78rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 1rem;
}
.single-title {
  font-family: var(--serif-display);
  font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500;
  color: var(--bone-1); margin-bottom: 0.4rem; font-style: italic; letter-spacing: 0.005em;
}
.single-subtitle {
  font-family: var(--serif-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--bone-2); font-style: italic; margin-bottom: 2.5rem;
}

.release-date {
  display: inline-block; font-family: var(--serif-caps);
  font-size: 0.72rem; letter-spacing: 0.4em; color: var(--bone-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 0.7rem 1.5rem; text-transform: uppercase;
}
@keyframes ember { 0%,100% { opacity: 0.65; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.ember { display: inline-block; animation: ember 3.5s ease-in-out infinite; color: var(--gold-2); }

/* ── Sections ─────────────────────────────────────────────────────────── */
section { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
@media (max-width: 640px) { section { padding: 3.5rem 1.25rem; } }

.section-mark {
  font-family: var(--serif-caps);
  font-size: 0.66rem; letter-spacing: 0.45em; color: var(--gold-2);
  text-transform: uppercase; text-align: center; margin-bottom: 0.8rem;
}
.section-title {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 500;
  text-align: center; color: var(--bone-1); margin-bottom: 0.5rem; font-style: italic;
}
.section-rule {
  width: 5rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
  margin: 0 auto 3rem;
}

/* ── Listen / Player ──────────────────────────────────────────────────── */
.listen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 820px) { .listen-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.cover-frame {
  position: relative; aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, var(--ink-bg-3), var(--ink-bg-2));
  padding: 12px;
  box-shadow:
    0 0 0 1px var(--gold-3),
    0 0 0 9px var(--ink-bg-1),
    0 0 0 10px var(--rule),
    0 30px 60px rgba(0,0,0,0.6);
}
.cover-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.embed-wrap {
  background: rgba(17, 19, 26, 0.6);
  border: 1px solid var(--rule);
  padding: 0.8rem;
}
.embed-wrap iframe { width: 100%; min-height: 250px; border: 0; display: block; }

/* ── Tale tiles grid ──────────────────────────────────────────────────── */
.tales-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tale-tile {
  position: relative;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(17,19,26,0.55), rgba(10,10,12,0.55));
  padding: 2rem 1.6rem;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.tale-tile:hover {
  border-color: var(--gold-2);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(24,26,35,0.6), rgba(17,19,26,0.6));
}
.tale-tile .tile-num {
  font-family: var(--serif-caps);
  font-size: 0.66rem; letter-spacing: 0.42em; color: var(--gold-2);
  text-transform: uppercase;
}
.tale-tile .tile-name {
  font-family: var(--blackletter);
  font-size: 2.2rem; color: var(--bone-1);
  line-height: 1.05; letter-spacing: 0.012em;
}
.tale-tile .tile-sub {
  font-family: var(--serif-display);
  font-style: italic; color: var(--bone-2); font-size: 1rem;
}
.tale-tile .tile-cta {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--serif-caps);
  font-size: 0.66rem; letter-spacing: 0.32em; color: var(--gold-2);
  text-transform: uppercase;
}

/* ── News list ────────────────────────────────────────────────────────── */
.news-list { display: flex; flex-direction: column; gap: 2rem; max-width: 760px; margin: 0 auto; }
.news-item { border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.news-item .meta {
  font-family: var(--serif-caps);
  font-size: 0.66rem; letter-spacing: 0.32em; color: var(--bone-3);
  text-transform: uppercase; margin-bottom: 0.4rem;
}
.news-item h3 {
  font-family: var(--serif-display);
  font-size: 1.6rem; font-style: italic; color: var(--bone-1);
  margin-bottom: 0.5rem; font-weight: 500;
}
.news-item .lead { color: var(--bone-2); font-size: 1.05rem; }
.news-item a.read-more {
  display: inline-block; margin-top: 0.6rem;
  font-family: var(--serif-caps);
  font-size: 0.66rem; letter-spacing: 0.32em; color: var(--gold-2);
  text-transform: uppercase;
}

/* ── Quote (Faust-style) ──────────────────────────────────────────────── */
blockquote.faust {
  border: none; margin: 3rem auto; max-width: 600px; text-align: center;
  font-family: var(--blackletter);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--bone-1); line-height: 1.55;
  padding: 2rem 1rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  position: relative;
  text-shadow: 0 0 14px rgba(201, 208, 216, 0.10);
}
blockquote.faust::before, blockquote.faust::after {
  content: '✦'; position: absolute; color: var(--gold-2);
  font-size: 0.8rem; left: 50%; transform: translateX(-50%);
}
blockquote.faust::before { top: -0.5rem; background: var(--ink-bg-1); padding: 0 0.7rem; }
blockquote.faust::after  { bottom: -0.5rem; background: var(--ink-bg-1); padding: 0 0.7rem; }
blockquote.faust cite {
  display: block; font-family: var(--serif-display); font-style: italic;
  font-size: 0.92rem; color: var(--bone-3); margin-top: 1rem;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.bm-form { max-width: 540px; margin: 1.5rem auto 0; display: flex; flex-direction: column; gap: 0.9rem; }
.bm-form .row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bm-form .row > * { flex: 1 1 220px; }
.bm-form input[type="text"],
.bm-form input[type="email"],
.bm-form input[type="password"],
.bm-form textarea,
.bm-form select {
  width: 100%; padding: 0.85rem 1rem;
  background: rgba(17, 19, 26, 0.65);
  border: 1px solid var(--rule);
  color: var(--bone-1);
  font-family: var(--serif-body); font-size: 1rem;
  outline: none; transition: border-color 0.2s, background 0.2s;
}
.bm-form textarea { min-height: 160px; resize: vertical; }
.bm-form input:focus, .bm-form textarea:focus, .bm-form select:focus {
  border-color: var(--gold-2);
  background: rgba(24, 26, 35, 0.7);
}
.bm-form button, .bm-btn {
  padding: 0.85rem 1.5rem;
  background: transparent; border: 1px solid var(--gold-3);
  color: var(--bone-1);
  font-family: var(--serif-caps);
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; text-decoration: none;
  display: inline-block;
}
.bm-form button:hover, .bm-btn:hover {
  background: rgba(201, 179, 128, 0.06);
  border-color: var(--gold-1);
  color: var(--gold-1);
}
.bm-btn.ghost { background: transparent; border-color: var(--gold-3); color: var(--bone-2); }
.bm-btn.ghost:hover {
  background: rgba(201, 179, 128, 0.06);
  border-color: var(--gold-1);
  color: var(--gold-1);
}
.bm-form .honeypot { position: absolute; left: -9999px; }
.field-label {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--serif-caps);
  font-size: 0.66rem; letter-spacing: 0.32em; color: var(--gold-2);
  text-transform: uppercase;
}

/* ── Faces messages ───────────────────────────────────────────────────── */
.bm-messages ul { list-style: none; padding: 0; margin: 1rem auto; max-width: 540px; }
.bm-messages li {
  padding: 0.7rem 1rem; border-left: 2px solid var(--gold-2);
  background: rgba(17, 19, 26, 0.6); margin-bottom: 0.5rem;
  font-family: var(--serif-body);
  color: var(--bone-1);
}
.bm-messages li.error { border-left-color: var(--silver-2); color: var(--silver-1); }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: 3rem 1.5rem 2rem; margin-top: 3rem; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(17,19,26,0.55));
}
.footer-bandname {
  font-family: var(--blackletter);
  font-size: 2rem; color: var(--bone-2); margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.footer-bandname .b-letter { color: var(--gold-3); }
.footer-tag {
  font-family: var(--serif-display);
  font-style: italic; color: var(--bone-3);
  font-size: 0.95rem; margin-bottom: 1.5rem;
}
.footer-links { display: flex; justify-content: center; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.footer-links a {
  color: var(--bone-3); text-decoration: none;
  font-family: var(--serif-caps);
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold-1); }
.footer-meta {
  color: var(--bone-4); font-size: 0.82rem;
  font-family: var(--serif-display); font-style: italic;
}
.footer-meta a { color: inherit; }
.footer-meta .motto {
  display: block; margin-top: 0.6rem;
  font-family: var(--serif-caps);
  font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-3);
  font-style: normal;
}

/* ── Lyrics / two-column body ─────────────────────────────────────────── */
.lyrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 900px; margin: 0 auto; }
@media (max-width: 720px) { .lyrics-grid { grid-template-columns: 1fr; gap: 2rem; } }
.lyrics-col h3 {
  font-family: var(--serif-caps);
  font-size: 0.7rem; letter-spacing: 0.42em; color: var(--gold-2);
  text-transform: uppercase; margin-bottom: 1.5rem; text-align: center;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.8rem;
  font-weight: 500;
}
.lyrics-col {
  font-family: var(--serif-body);
  font-size: 1.05rem; line-height: 1.85; color: var(--bone-2);
}
.lyrics-col p { margin-bottom: 1.2rem; }
.lyrics-col em { color: var(--bone-1); font-style: italic; }

/* ── Admin look (minimal, dark, readable) ─────────────────────────────── */
.bm-admin { padding: 2rem 1.5rem; max-width: 1100px; margin: 0 auto; }
.bm-admin h1 {
  font-family: var(--serif-display); font-style: italic;
  font-size: 2rem; color: var(--bone-1); margin-bottom: 1.5rem;
}
.bm-admin table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.bm-admin th, .bm-admin td {
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--rule);
  text-align: left; vertical-align: top;
}
.bm-admin th {
  color: var(--gold-2); font-family: var(--serif-caps);
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 500;
}
.bm-admin .stat-row {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.bm-admin .stat {
  border: 1px solid var(--rule); padding: 1.4rem;
  background: rgba(17, 19, 26, 0.6);
}
.bm-admin .stat .label {
  font-family: var(--serif-caps); font-size: 0.7rem;
  letter-spacing: 0.32em; color: var(--gold-2); text-transform: uppercase;
}
.bm-admin .stat .value {
  font-family: var(--serif-display); font-style: italic;
  font-size: 2rem; color: var(--bone-1); margin-top: 0.4rem;
}