:root {
  --paper: #dbf1ee;
  --ink: #131a15;
  --ink-soft: #445045;
  --muted: #7d857e;
  --rule: rgba(19, 26, 21, 0.14);
  --heading: #e04a2a;
  --heading-shadow: #1f3a5f;
  --heading-shadow-dark: #f0c823;
  --accent: #a3200f;
  --night: #0b1226;
  --night-deep: #060a1a;
  --night-glow: #1c2a55;
  --cream: #f6efdd;
  --cream-soft: #cfc7b3;
  --cream-mute: #8a8571;
  --max: 900px;
  --serif: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(19, 26, 21, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(19, 26, 21, 0.035) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Night band (header + hero) ---------- */
.night-band {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--night-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--night-deep) 0%, var(--night) 100%);
  box-shadow: inset 0 -12px 20px -12px rgba(0,0,0,0.55);
  overflow: hidden;
}

/* Star fields: single element with many box-shadows = many stars, one paint layer */
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stars-fine::before,
.stars-mid::before,
.stars-big::before,
.stars-twinkle-a::before,
.stars-twinkle-b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: #fff;
}
/* Dense tiny stars — dim, no twinkle */
.stars-fine::before {
  box-shadow:
    47px 82px 0 0.5px rgba(255,255,255,0.55),
    122px 41px 0 0.5px rgba(255,255,255,0.5),
    186px 210px 0 0.5px rgba(255,255,255,0.6),
    241px 88px 0 0.5px rgba(255,255,255,0.45),
    308px 154px 0 0.5px rgba(255,255,255,0.55),
    377px 46px 0 0.5px rgba(255,255,255,0.6),
    433px 189px 0 0.5px rgba(255,255,255,0.5),
    491px 108px 0 0.5px rgba(255,255,255,0.55),
    559px 34px 0 0.5px rgba(255,255,255,0.45),
    612px 227px 0 0.5px rgba(255,255,255,0.6),
    674px 138px 0 0.5px rgba(255,255,255,0.55),
    723px 62px 0 0.5px rgba(255,255,255,0.5),
    791px 196px 0 0.5px rgba(255,255,255,0.6),
    849px 91px 0 0.5px rgba(255,255,255,0.5),
    902px 244px 0 0.5px rgba(255,255,255,0.45),
    968px 154px 0 0.5px rgba(255,255,255,0.6),
    1024px 47px 0 0.5px rgba(255,255,255,0.55),
    1093px 178px 0 0.5px rgba(255,255,255,0.5),
    1152px 115px 0 0.5px rgba(255,255,255,0.55),
    1218px 264px 0 0.5px rgba(255,255,255,0.6),
    1277px 52px 0 0.5px rgba(255,255,255,0.5),
    1341px 199px 0 0.5px rgba(255,255,255,0.45),
    1403px 88px 0 0.5px rgba(255,255,255,0.55),
    1462px 168px 0 0.5px rgba(255,255,255,0.6),
    1522px 34px 0 0.5px rgba(255,255,255,0.5),
    73px 302px 0 0.5px rgba(255,255,255,0.55),
    148px 361px 0 0.5px rgba(255,255,255,0.5),
    212px 424px 0 0.5px rgba(255,255,255,0.6),
    281px 338px 0 0.5px rgba(255,255,255,0.5),
    348px 461px 0 0.5px rgba(255,255,255,0.55),
    414px 391px 0 0.5px rgba(255,255,255,0.6),
    478px 484px 0 0.5px rgba(255,255,255,0.5),
    541px 356px 0 0.5px rgba(255,255,255,0.45),
    606px 442px 0 0.5px rgba(255,255,255,0.55),
    671px 313px 0 0.5px rgba(255,255,255,0.5),
    738px 468px 0 0.5px rgba(255,255,255,0.6),
    806px 384px 0 0.5px rgba(255,255,255,0.5),
    864px 331px 0 0.5px rgba(255,255,255,0.55),
    928px 442px 0 0.5px rgba(255,255,255,0.6),
    992px 371px 0 0.5px rgba(255,255,255,0.5),
    1061px 488px 0 0.5px rgba(255,255,255,0.45),
    1121px 328px 0 0.5px rgba(255,255,255,0.55),
    1188px 407px 0 0.5px rgba(255,255,255,0.5),
    1246px 356px 0 0.5px rgba(255,255,255,0.55),
    1312px 468px 0 0.5px rgba(255,255,255,0.6),
    1379px 342px 0 0.5px rgba(255,255,255,0.5),
    1441px 421px 0 0.5px rgba(255,255,255,0.55),
    1502px 361px 0 0.5px rgba(255,255,255,0.5);
}
/* Medium stars — brighter, still no twinkle */
.stars-mid::before {
  box-shadow:
    88px 128px 0 1px rgba(255,255,255,0.75),
    268px 61px 0 1px rgba(255,255,255,0.8),
    421px 158px 0 1px rgba(255,255,255,0.75),
    582px 236px 0 1px rgba(255,255,255,0.7),
    744px 84px 0 1px rgba(255,255,255,0.8),
    908px 178px 0 1px rgba(255,255,255,0.75),
    1072px 128px 0 1px rgba(255,255,255,0.7),
    1234px 216px 0 1px rgba(255,255,255,0.8),
    1398px 62px 0 1px rgba(255,255,255,0.75),
    1521px 178px 0 1px rgba(255,255,255,0.7),
    142px 384px 0 1px rgba(255,255,255,0.7),
    322px 442px 0 1px rgba(255,255,255,0.75),
    488px 328px 0 1px rgba(255,255,255,0.7),
    652px 411px 0 1px rgba(255,255,255,0.8),
    822px 348px 0 1px rgba(255,255,255,0.75),
    988px 462px 0 1px rgba(255,255,255,0.7),
    1152px 371px 0 1px rgba(255,255,255,0.75),
    1318px 442px 0 1px rgba(255,255,255,0.8),
    1478px 384px 0 1px rgba(255,255,255,0.7);
}
/* Big stars — bright, twinkle group A */
.stars-big::before {
  box-shadow:
    218px 76px 2px 0.5px rgba(255,255,255,0.95),
    668px 148px 2px 0.5px rgba(255,255,255,0.95),
    1148px 92px 2px 0.5px rgba(255,255,255,0.95),
    1466px 218px 2px 0.5px rgba(255,255,255,0.95),
    398px 421px 2px 0.5px rgba(255,255,255,0.95),
    878px 344px 2px 0.5px rgba(255,255,255,0.95),
    1288px 478px 2px 0.5px rgba(255,255,255,0.95);
  animation: twinkle-a 3.6s ease-in-out infinite;
}
/* Twinkle group A — mid stars, slow */
.stars-twinkle-a::before {
  box-shadow:
    342px 118px 1.5px 0.5px rgba(255,255,255,0.9),
    784px 194px 1.5px 0.5px rgba(255,255,255,0.9),
    1218px 68px 1.5px 0.5px rgba(255,255,255,0.9),
    488px 288px 1.5px 0.5px rgba(255,255,255,0.9),
    1058px 388px 1.5px 0.5px rgba(255,255,255,0.9);
  animation: twinkle-a 4.2s ease-in-out infinite;
  animation-delay: 0.8s;
}
/* Twinkle group B — different timing so no two blink together */
.stars-twinkle-b::before {
  box-shadow:
    528px 128px 1.5px 0.5px rgba(255,255,255,0.9),
    968px 68px 1.5px 0.5px rgba(255,255,255,0.9),
    1358px 192px 1.5px 0.5px rgba(255,255,255,0.9),
    228px 356px 1.5px 0.5px rgba(255,255,255,0.9),
    768px 428px 1.5px 0.5px rgba(255,255,255,0.9),
    1188px 268px 1.5px 0.5px rgba(255,255,255,0.9);
  animation: twinkle-b 5.4s ease-in-out infinite;
  animation-delay: 1.6s;
}
@keyframes twinkle-a {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@keyframes twinkle-b {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .stars-big::before,
  .stars-twinkle-a::before,
  .stars-twinkle-b::before { animation: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 2;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 14, "SOFT" 50;
  color: #17b03a;
  text-shadow: 1px 1px 0 #f0c823;
  text-decoration: none;
}
.site-nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
}
.site-nav a { text-decoration: none; color: var(--cream-soft); }
.site-nav a:hover { color: var(--cream); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 88px; position: relative; overflow: hidden; z-index: 1; }

/* ---------- Floating decorations ---------- */
.float {
  position: absolute;
  pointer-events: none;
  user-select: none;
  height: auto;
  z-index: 0;
  opacity: 0.9;
  filter: drop-shadow(0 8px 14px rgba(19, 26, 21, 0.12));
  will-change: transform;
}
.float-ghost {
  width: 110px;
  top: 40px;
  left: 3%;
  animation: floatGhost 9s ease-in-out infinite;
}
.float-ufo {
  width: 140px;
  top: 70px;
  right: 4%;
  animation: floatUfo 11s ease-in-out infinite;
}
.float-tarot1 {
  width: 88px;
  bottom: 60px;
  left: 5.5%;
  z-index: 2;
  animation: floatTarot1 13s ease-in-out infinite;
}
.float-tarot2 {
  width: 88px;
  bottom: 78px;
  left: 2.5%;
  z-index: 1;
  animation: floatTarot2 15s ease-in-out infinite;
}
.float-crystal1 {
  width: 60px;
  bottom: 70px;
  right: 4.5%;
  animation: floatCrystal1 10s ease-in-out infinite;
}
.float-crystal2 {
  width: 68px;
  bottom: 100px;
  right: 8%;
  animation: floatCrystal2 12s ease-in-out infinite;
}
@keyframes floatGhost {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50%      { transform: translate3d(14px, -18px, 0) rotate(3deg); }
}
@keyframes floatUfo {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50%      { transform: translate3d(-22px, 10px, 0) rotate(-3deg); }
}
@keyframes floatTarot1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50%      { transform: translate3d(10px, -14px, 0) rotate(2deg); }
}
@keyframes floatTarot2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); }
  50%      { transform: translate3d(-6px, -10px, 0) rotate(3deg); }
}
@keyframes floatCrystal1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
  50%      { transform: translate3d(-8px, -16px, 0) rotate(-4deg); }
}
@keyframes floatCrystal2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  50%      { transform: translate3d(6px, -12px, 0) rotate(-2deg); }
}
@media (max-width: 720px) {
  .float-ghost { width: 72px; top: 20px; left: 3%; }
  .float-ufo   { width: 90px; top: 34px; right: 3%; }
  /* Hide bottom-corner floats on mobile — they collide with the CTA buttons */
  .float-tarot1,
  .float-tarot2,
  .float-crystal1,
  .float-crystal2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-art {
  margin: 0;
}
.hero-art img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 12px 40px -12px rgba(0,0,0,0.18);
}
.hero-copy h1 {
  font-family: 'Bungee', var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  font-variation-settings: normal;
  color: #17b03a;
  text-shadow: 3px 3px 0 #f0c823;
  margin: 0 0 24px;
}
.tagline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cream-soft);
  margin: 0 0 28px;
  max-width: 38ch;
}
.tagline-host {
  display: inline-block;
  margin-top: 10px;
  color: var(--cream-mute);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.tagline-host a { color: var(--cream-soft); text-decoration-color: rgba(255,255,255,0.35); }
.tagline-host a:hover { color: var(--cream); }
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--cream);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--heading-shadow-dark); border-color: var(--heading-shadow-dark); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(246, 239, 221, 0.5); }
.btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- Sections ---------- */
section h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 48, "SOFT" 60;
  color: var(--heading);
  text-shadow: 2px 2px 0 var(--heading-shadow);
  margin: 0 0 32px;
}

/* ---------- Episodes ---------- */
.episodes {
  padding: 56px 0;
}
.ep-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ep {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.ep:first-child { padding-top: 4px; }
.ep:last-child { border-bottom: none; }
.ep-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--muted);
  letter-spacing: 0.01em;
  font-variation-settings: "opsz" 24, "SOFT" 30;
  font-variant-numeric: tabular-nums;
}
.ep-body { min-width: 0; }
.ep h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 36, "SOFT" 60;
  color: var(--heading);
  text-shadow: 2px 2px 0 var(--heading-shadow);
  margin: 0 0 6px;
  line-height: 1.2;
}
.ep-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.ep-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 58ch;
}
.ep {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 20px;
  align-items: start;
}
.ep-thumb {
  display: block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.ep-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ep-body h3 a {
  color: inherit;
  text-decoration: none;
}
.ep-body h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ep-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-width: 132px;
}
.btn-sm {
  padding: 10px 22px;
  font-size: 15px;
  letter-spacing: 0.02em;
}
/* Light-bg button variant used in the episode list. Cream background,
   ink text, subtle border — reads well on the paper section. */
.ep-actions .btn {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--rule);
}
.ep-actions .btn:hover {
  background: var(--heading);
  border-color: var(--heading);
  color: var(--cream);
}
.ep-actions .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.ep-actions .btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.episode-actions .btn {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--rule);
}
.episode-actions .btn:hover {
  background: var(--heading);
  border-color: var(--heading);
  color: var(--cream);
}
.episode-actions .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.ep-audio {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0;
  height: 40px;
  border-radius: 999px;
  outline: none;
}
.ep-audio::-webkit-media-controls-panel {
  background-color: var(--paper);
}

/* ---------- Episode page ---------- */
.episode-main {
  padding: 40px 0 72px;
}
.crumbs {
  margin: 0 0 28px;
  font-size: 15px;
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.episode-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}
.episode-cover {
  display: block;
  width: 220px;
  height: 220px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  object-fit: cover;
}
.episode-eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.episode-heading h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 48, "SOFT" 60;
  color: var(--heading);
  text-shadow: 2px 2px 0 var(--heading-shadow);
  margin: 0 0 12px;
  line-height: 1.1;
}
.episode-heading .ep-meta {
  margin: 0 0 20px;
}
.episode-player {
  margin-bottom: 16px;
}
.episode-actions {
  display: flex;
  gap: 12px;
}
.episode-notes {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  max-width: 62ch;
}
.episode-notes h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--heading);
  text-shadow: 2px 2px 0 var(--heading-shadow);
  margin: 0 0 16px;
}
.episode-notes p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
}
.episode-notes a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 720px) {
  .ep {
    grid-template-columns: 84px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: start;
  }
  .ep-thumb {
    grid-row: 1; grid-column: 1;
    width: 84px; height: 84px;
  }
  .ep-body { grid-row: 1; grid-column: 2; }
  .ep-body h3 { font-size: 20px; }
  .ep-desc { font-size: 14px; }
  .ep-actions {
    grid-row: 2; grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
    margin-top: 4px;
  }
  .ep-actions .btn-sm { flex: 1; text-align: center; }
  .episode-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .episode-cover { width: 160px; height: 160px; }
}
.ep-loading,
.ep-error,
.ep-fallback {
  list-style: none;
  padding: 24px 0;
  color: var(--muted);
  font-size: 15px;
}
.ep-empty {
  list-style: none;
  padding: 32px 0 8px;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}
.ep-empty h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 48, "SOFT" 60;
  color: var(--heading);
  text-shadow: 2px 2px 0 var(--heading-shadow);
  margin: 0 0 12px;
  line-height: 1.15;
}
.ep-empty p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
}

/* ---------- About ---------- */
.about {
  padding: 56px 0;
  border-top: 1px solid var(--rule);
}
.about-inner p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  font-variation-settings: "opsz" 24, "SOFT" 40;
  margin: 0 0 16px;
  max-width: 60ch;
}
.about-inner p:last-of-type { margin-bottom: 0; }
.credits-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--heading);
  text-shadow: 2px 2px 0 var(--heading-shadow);
  margin: 40px 0 14px;
}
.credits {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 60ch;
}
.credits li {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 8px;
}
.credits li:last-child { margin-bottom: 0; }
.credits a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.credits a:hover { text-decoration-thickness: 2px; }

/* ---------- Subscribe ---------- */
.subscribe {
  padding: 56px 0;
  border-top: 1px solid var(--rule);
}
.sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.sub-list a {
  display: inline-block;
  padding: 4px 0;
  font-size: 15px;
  color: var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--rule);
  margin-top: 32px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-copy {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.footer-logo {
  display: inline-block;
  line-height: 0;
  opacity: 0.85;
  transition: opacity .15s ease;
}
.footer-logo:hover { opacity: 1; }
.footer-logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .hero { padding: 40px 0 40px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-art { max-width: 420px; margin: 0 auto; }
  .tagline { max-width: none; }
  .site-nav { gap: 16px; font-size: 14px; }
  .site-title { font-size: 18px; }
  section h2 { font-size: 24px; margin-bottom: 24px; }
  .ep { grid-template-columns: 84px 1fr; gap: 14px 16px; }
  .ep-thumb { width: 84px; height: 84px; }
  .ep-thumb img { width: 84px; height: 84px; }
  .ep-actions { grid-column: 1 / -1; grid-row: 2; flex-direction: row; min-width: 0; }
  .ep-actions .btn { flex: 1; text-align: center; }
  .ep h3 { font-size: 19px; }
  .about-inner p { font-size: 17px; }
}