:root{
      --ink:#0b0b10; --edge:#1f1f2a; --text:#e6e6e8; --muted:#9aa0a6;
      --btn:#cbb17f; --btn2:#a58a5a;

      /* subscribe card/theme */
      --dt-bg: #0c0d10;
      --dt-panel: #1a1c22;
      --dt-border: #242a33;
      --dt-text: #e8ecf3;
      --dt-muted: #a9b3c1;
      --dt-accent: #3E4857;        /* button color */
      --dt-accent-2: #2bb2fc;      /* subtle link accent */
      --dt-success-bg:#0e3b27; --dt-success-border:#17a768; --dt-success:#c8f5dd;
      --dt-error-bg:#3a1414;   --dt-error-border:#ff5a5a;   --dt-error:#ffd9d9;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:system-ui,"Segoe UI",Inter,Roboto,sans-serif; color:var(--text);
      background: radial-gradient(circle at 50% 20%, #0c0c14, #000);
      overflow-x:hidden;
    }

    header{max-width:1100px;margin:0 auto;padding:18px 20px;display:flex;justify-content:space-between;align-items:center}
    header a{color:var(--text);text-decoration:none;font-weight:600}
    nav a{color:var(--muted);text-decoration:none;margin-left:18px}
    nav a:hover{color:var(--text)}

    /* Keep the v3 badge visible but NON-floating (no DOM moves) */
    .grecaptcha-badge{
      position: static !important;
      transform: none !important;
      right: auto !important; bottom: auto !important; left: auto !important;
      box-shadow: none !important;
      margin: 6px 0 0 !important;
      opacity: .65; transition: opacity .15s ease;
    }
    .grecaptcha-badge:hover { opacity: 1; }

    .hero{
      position: relative;
      max-width: 1100px;
      margin: 40px auto 0;
      padding: clamp(20px, 3vw, 40px) clamp(24px, 5vw, 56px) 30px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 32px;
      align-items: center;
      min-height: clamp(420px, 65vh, 760px);
      border: 1px solid var(--edge);
      border-radius: 14px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(5,7,12,.65) 0%, rgba(5,7,12,.45) 35%, rgba(5,7,12,.75) 100%),
        url("https://upload.wikimedia.org/wikipedia/commons/5/5e/Stars_01_%28MK%29.jpg")
          center 35% / cover no-repeat;
    }
    .hero > *{ position: relative; z-index: 1; min-width: 0; }
    .hero::after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(6,7,12,.55) 0%, rgba(6,7,12,.35) 35%, rgba(6,7,12,.70) 100%);
      z-index:0; pointer-events:none;
    }
    .hero > div:first-of-type{ padding-right: clamp(24px, 5vw, 72px); }

    @media (max-width: 860px){
      .hero{ grid-template-columns:1fr; padding: 24px; }
      .hero > div:first-of-type{ padding-right: 0; }
    }

    .kicker{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.9rem}
    h1{font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:1px;margin:.25rem 0 .75rem}
    .lede{line-height:1.75;color:#dcdcdf}

    .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
    .btn{appearance:none;border:none;cursor:pointer;padding:.85rem 1.2rem;border-radius:8px;font-weight:600;
      background:linear-gradient(90deg,var(--btn),var(--btn2));color:#000;text-decoration:none;transition:transform .15s, box-shadow .15s}
    .btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(191,169,122,.25)}
    .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--edge)}

    .panel{
      background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
      border:1px solid var(--edge);border-radius:14px;padding:18px;
      box-shadow:inset 0 0 40px rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.35)
    }

    .cover-wrap{
      display:flex;align-items:center;justify-content:center;
      padding:8px;background:#0f0f16;border-radius:12px;border:1px solid var(--edge)
    }
    .cover{
      max-height:min(80vh, 1300px); max-width:100%;
      height:auto; width:auto; object-fit:contain;
      border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.45);
    }

    .section{max-width:1100px;margin:56px auto;padding:0 20px}
    .section.panel h2{margin:0 0 10px}

    footer{border-top:1px solid var(--edge);max-width:1100px;margin:56px auto 30px;
      padding:20px;color:var(--muted);font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

    /* Subscribe / Brevo styling */
    .dt-subscribe { display:grid; place-items:center; background:transparent; }
    .dt-card {
      width:100%; max-width:560px;
      background: var(--dt-panel);
      border: 1px solid var(--dt-border);
      border-radius: 12px; padding: 20px;
    }
    .dt-title { font-size: clamp(22px, 3vw, 28px); font-weight:700; color: var(--dt-text); margin:0 0 8px; }
    .dt-copy  { color: var(--dt-muted); margin:0 0 18px; line-height:1.55; }

    .dt-field { display:grid; gap:8px; margin: 14px 0; }
    .dt-label { color: var(--dt-text); font-weight:600; font-size:14px; }
    .dt-input {
      width:100%; height:44px; border-radius:8px; border:1px solid var(--dt-border);
      background:#111317; color:var(--dt-text); padding:0 14px; outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    .dt-input::placeholder { color:#6b7482; }
    .dt-input:focus { border-color:#2b3646; box-shadow:0 0 0 3px rgba(43,54,70,.35); }

    .entry__specification { color: var(--dt-muted) !important; font-size:12px !important; }
    .entry__error--primary {
      background: var(--dt-error-bg) !important; color: var(--dt-error) !important;
      border: 1px solid var(--dt-error-border) !important;
      border-radius: 8px !important; padding: 8px 12px !important;
    }

    .sib-form-message-panel { border-radius: 10px !important; border-width: 1px !important;
      margin: 0 0 12px !important; padding: 10px 12px !important; }
    #success-message { background: var(--dt-success-bg) !important; color: var(--dt-success) !important; border-color: var(--dt-success-border) !important; }
    #error-message   { background: var(--dt-error-bg)   !important; color: var(--dt-error)   !important; border-color: var(--dt-error-border)   !important; }

    .dt-btn {
      display:inline-grid; place-items:center;
      height:44px; padding:0 18px; border:0; border-radius:8px;
      font-weight:700; letter-spacing:.02em; color:#fff;
      background: var(--dt-accent); cursor:pointer;
      transition: transform .06s ease, filter .2s ease;
    }
    .dt-btn:hover  { filter:brightness(1.08); }
    .dt-btn:active { transform:translateY(1px); }

    .sib-form a { color: var(--dt-accent-2); text-decoration: underline; }
    #sib-container { background: transparent !important; border: 0 !important; text-align: left !important; }
	
	/* --- Audio section --- */
	.listen .audio-card{
	  display:grid; gap:12px;
	  background: var(--dt-panel);
	  border:1px solid var(--dt-border);
	  border-radius:12px; padding:18px;
	  box-shadow: inset 0 0 40px rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.35);
	}
	.listen .audio-meta{display:grid; gap:4px}
	.listen .audio-title{font-weight:700; color:var(--dt-text);}
	.listen .audio-sub{color:var(--dt-muted); font-size:.95rem}
	.listen audio{
	  width:100%;
	  height:40px;
	  background:#0f1117;
	  border:1px solid var(--dt-border);
	  border-radius:8px;
	}
	.listen .audio-help{color:var(--dt-muted); font-size:.9rem}
	
	/* ===========================
   Chapter page layout & styling
   =========================== */

.chapter-main {
  max-width: 1100px;
  margin: 40px auto 60px;
  padding: 0 20px;
}

/* Reuse the card look but tune it for long reading */
.chapter-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px clamp(20px, 3vw, 36px) 32px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.02), transparent 55%),
    linear-gradient(180deg, rgba(14,16,22,.97), rgba(10,11,15,.98));
  border-radius: 16px;
  border-color: rgba(255,255,255,.06);
  box-shadow:
    0 26px 60px rgba(0,0,0,.7),
    inset 0 0 40px rgba(255,255,255,.02);
}

/* Header + meta */
.chapter-header {
  margin-bottom: 18px;
}

.chapter-header h1 {
  margin: 4px 0 4px;
}

.chapter-meta {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Body text */
.chapter-body {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #e4e6ec;
}

/* Give the reading experience some breathing room */
.chapter-body p {
  margin: 0 0 1.1em;
}

/* Subtle drop cap for first paragraph */
.chapter-body .drop::first-letter {
  float: left;
  font-size: 2.8rem;
  line-height: 1;
  padding-right: 8px;
  padding-top: 4px;
  font-weight: 600;
  color: var(--btn);
}

/* Make emphasized text soften nicely */
.chapter-body em {
  color: var(--muted);
}

/* Chapter footer CTA */
.chapter-footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 0.98rem;
  color: var(--dt-muted, var(--muted));
}

/* Make the CTA button sit nicely inline */
.chapter-footer .btn {
  display: inline-block;
  margin-top: 6px;
}

/* Slight tweak so long text on small screens still feels good */
@media (max-width: 700px) {
  .chapter-shell {
    padding: 22px 18px 26px;
  }
  .chapter-body {
    font-size: 0.98rem;
    line-height: 1.75;
  }
  .chapter-body .drop::first-letter {
    font-size: 2.3rem;
    padding-top: 2px;
  }
}