@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Oswald:wght@500;600&family=Playfair+Display:ital,wght@1,600&display=swap');

:root {
  --ink: #04090c;
  --ink-soft: #081217;
  --ivory: #f3efe5;
  --gold: #c99a46;
  --gold-bright: #e3bd72;
  --line: rgba(201, 154, 70, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ivory);
  background:
    radial-gradient(circle at 18% 10%, rgba(201,154,70,.09), transparent 28rem),
    var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
}

a { color: inherit; }
.site-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand, .listen-link { text-decoration: none; }
.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: "Oswald", sans-serif;
  font-size: .9rem;
  letter-spacing: .16em;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  letter-spacing: -.08em;
  transform: rotate(-2deg);
}
.listen-link {
  color: var(--gold-bright);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
}

main { width: min(1480px, 100%); margin: 0 auto; }
.intro {
  display: grid;
  grid-template-columns: 1.2fr .75fr;
  align-items: end;
  gap: 3rem;
  padding: clamp(4.25rem, 9vw, 8rem) 5vw clamp(3rem, 6vw, 5rem);
}
.eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 -1.5rem;
  color: var(--gold-bright);
  font-family: "Oswald", sans-serif;
  font-size: .8rem;
  letter-spacing: .27em;
}
h1 {
  margin: 0;
  font-family: "Oswald", Impact, sans-serif;
  font-size: clamp(3.5rem, 7vw, 7.4rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
h1 em {
  color: var(--gold-bright);
  font-family: "Playfair Display", Georgia, serif;
  font-size: .79em;
  font-weight: 600;
  text-transform: none;
}
.intro-copy {
  max-width: 34rem;
  margin: 0 0 .5rem;
  color: rgba(243,239,229,.67);
  font-size: 1.05rem;
  line-height: 1.75;
}

.genre-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 2vw;
  padding: 1px;
  background: var(--line);
}
.genre-card {
  position: relative;
  min-height: min(52vw, 610px);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background: #101010;
}
.genre-card img, .veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.genre-card img {
  object-fit: cover;
  filter: saturate(.78) contrast(1.08) brightness(.8);
  transition: transform .85s cubic-bezier(.2,.8,.2,1), filter .65s ease;
}
.veil {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.86) 100%),
    linear-gradient(90deg, rgba(4,9,12,.2), transparent 55%);
}
.number {
  position: absolute;
  top: 1.8rem;
  right: 2rem;
  z-index: 2;
  color: rgba(255,255,255,.7);
  font-family: "Oswald", sans-serif;
  font-size: .85rem;
  letter-spacing: .15em;
}
.card-content {
  position: absolute;
  z-index: 2;
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.8rem, 4vw, 3.5rem);
  display: grid;
  gap: .65rem;
}
.card-content small {
  color: var(--gold-bright);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.card-content strong {
  max-width: 90%;
  font-family: "Oswald", Impact, sans-serif;
  font-size: clamp(2.35rem, 5vw, 5.6rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.card-content strong span { color: var(--gold-bright); }
.card-action {
  width: max-content;
  margin-top: .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--gold);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.card-action b { display: inline-block; margin-left: .45rem; transition: transform .25s ease; }
.genre-card:hover img, .genre-card:focus-visible img { transform: scale(1.045); filter: saturate(.95) contrast(1.07) brightness(.9); }
.genre-card:hover .card-action b, .genre-card:focus-visible .card-action b { transform: translate(3px,-3px); }
.genre-card:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: -3px; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 5vw 3rem;
  color: rgba(243,239,229,.52);
  font-size: .8rem;
}
.footer-scripture { text-align: right; }
.footer-scripture b { color: var(--gold-bright); font-weight: 500; }

/* Compact presentation for placement inside a Bandzoogle HTML Code feature. */
.embed-mode body { background: var(--ink); }
.embed-mode .site-header,
.embed-mode footer { display: none; }
.embed-mode .intro {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.embed-mode .genre-grid { margin: 0; }
.embed-mode .genre-card { min-height: min(45vw, 520px); }

@media (max-width: 760px) {
  .site-header { min-height: 68px; padding: 0 1.2rem; }
  .brand { font-size: .75rem; letter-spacing: .12em; }
  .brand-mark { width: 34px; height: 34px; }
  .listen-link { font-size: 0; }
  .listen-link span { font-size: 1.25rem; }
  .intro { grid-template-columns: 1fr; gap: 1.5rem; padding: 4.5rem 1.25rem 3rem; }
  .eyebrow { margin: 0; }
  h1 { font-size: clamp(3.25rem, 15vw, 5.25rem); }
  .intro-copy { max-width: 30rem; font-size: 1rem; }
  .genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .genre-card { min-height: 120px; }
  .number,
  .card-content small { display: none; }
  .genre-card img {
    display: block;
    object-position: center;
  }
  .card-content {
    left: .8rem;
    right: .8rem;
    top: auto;
    bottom: .65rem;
    transform: none;
    gap: .3rem;
  }
  .card-content strong {
    max-width: 100%;
    font-size: clamp(1.2rem, 5.5vw, 1.7rem);
    line-height: 1;
  }
  .card-content strong span { display: block; }
  .card-action {
    margin-top: .25rem;
    font-size: .7rem;
  }
  footer { flex-direction: column; padding: 2rem 1.25rem 3rem; }
  .footer-scripture { text-align: left; line-height: 1.5; }
  .embed-mode .intro { display: none; }
  .embed-mode .genre-card { min-height: 120px; }
  .embed-mode .card-content {
    left: .65rem;
    right: .65rem;
    bottom: .6rem;
  }
  .embed-mode .card-content strong { font-size: clamp(1rem, 4.2vw, 1.25rem); }
  .embed-mode .card-action {
    margin-top: .15rem;
    font-size: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .genre-card img, .card-action b { transition: none; }
}