/* Skinside Out — tokens read from the original WordPress/Astra site */
:root {
  --c-black: #000;
  --c-hero: #0d0d0d;
  --c-ink: #191919;        /* headings */
  --c-text: #404040;       /* body copy */
  --c-label: #3a3a3a;      /* podcast list labels */
  --c-wine: #5b1d34;       /* inline links */
  --c-gold: #d1b242;       /* submit button */
  --c-nav: #f5f5f5;
  --c-soft: #f8f8f8;       /* about band */
  --c-white: #fff;

  --font: "Montserrat", sans-serif;
  --fs-body: 18px;
  --lh-body: 1.7;

  --container: 1200px;
  --gutter: 20px;
  --radius-card: 15px;
  --shadow-card: 3px 8px 12px 0 rgba(0, 0, 0, .44);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h6 { margin: 0; color: var(--c-ink); font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }

/* Header */
.site-header {
  position: absolute; inset: 0 0 auto; z-index: 10;
  height: 70px;
}
.site-header .container {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.site-logo { position: absolute; left: 0; top: 0; }
.site-logo img { width: 220px; height: 88px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.nav a {
  display: block; padding: 0 18px; line-height: 70px;
  color: var(--c-nav); text-decoration: none; font-size: 18px;
}
.nav a:hover { color: var(--c-gold); }
.menu-toggle {
  display: none; position: absolute; right: 0; top: 14px;
  width: 43px; height: 43px; padding: 0; border: 0; border-radius: 2px;
  background: transparent; color: var(--c-nav); cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; fill: currentColor; }

/* Home hero */
.hero {
  background: linear-gradient(90deg, var(--c-hero) 0%, var(--c-black) 100%);
  padding: 60px 0 20px;
}
.hero img { width: 100%; }

.player-wrap { margin-top: -50px; position: relative; }
.player-card {
  background: var(--c-white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 20px;
}
.player-card iframe { display: block; width: 100%; height: 390px; border: 0; }
.listen-links { text-align: center; font-size: 16px; color: var(--c-ink); font-weight: 600; margin: 15px 0 0; line-height: 1.5; }
.listen-links a { color: var(--c-wine); text-decoration: none; }
.listen-links a:hover { text-decoration: underline; }

/* Logo carousel */
.logos { position: relative; padding: 40px 0; }
.logos-track {
  display: flex; gap: 24px; align-items: center;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 0 56px;
}
.logos-track::-webkit-scrollbar { display: none; }
.logos-track > div {
  flex: 0 0 177px; height: 110px; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
}
.logos-track img { max-width: 137px; max-height: 110px; width: auto; }
.logos-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 35px; height: 35px; border: 0; border-radius: 50%;
  background: #efefef; color: #333; cursor: pointer; font-size: 18px; line-height: 1;
}
.logos-btn.prev { left: 13px; }
.logos-btn.next { right: 13px; }

/* Two-column intro */
.intro { padding: 35px 0 85px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.intro h2 { font-size: 36px; line-height: 1.3; margin-bottom: 25px; }

/* CTA band */
.cta {
  background: url("img/home-bg.jpg") center / cover no-repeat;
  min-height: 615px; display: flex; align-items: center;
}
.cta-inner { margin-left: auto; width: 730px; max-width: 100%; margin-right: calc((100% - min(100% - 40px, 1200px)) / 2 + 75px); }
.cta h2 { color: #fff; font-size: 86px; line-height: 87px; margin-bottom: 20px; }
.cta p { color: #fff; font-size: 18px; line-height: 1.4; max-width: 650px; }

/* Inner-page title band */
.page-hero {
  background: linear-gradient(to right, #050505, #050505), url("img/header.jpg") center / cover;
  padding: 100px 0 70px; text-align: center;
}
.page-hero h1 { color: #fff; font-size: 64px; line-height: 1.7; line-height: 110px; }

/* About */
.about-main { padding: 35px 0 0; }
.about-main .split { align-items: start; gap: 40px; }
.about-main h2 { font-size: 34px; margin-bottom: 40px; }
.about-main .split > div:first-child { padding: 28px 28px 0; }
.about-main img { border-radius: 15px; }
.band { background: var(--c-soft); padding: 35px 0 50px; }
.band h2 { font-size: 34px; text-align: center; margin-bottom: 20px; }
.band p { margin-bottom: 36px; }
.band p:last-child { margin-bottom: 0; }

/* Podcast directory */
.directory { padding: 35px 0 60px; }
.directory h2 { font-size: 34px; text-align: center; margin-bottom: 30px; }
.platforms {
  display: grid; grid-template-columns: repeat(2, 330px); justify-content: center;
  column-gap: 70px; list-style: none; margin: 0; padding: 0;
}
.platforms li { height: 69px; }
.platforms a {
  display: flex; align-items: center; gap: 15px; height: 41px;
  color: var(--c-label); text-decoration: none; font-size: 15px;
}
.platforms a:hover { color: var(--c-wine); }
.platforms img, .platforms svg { width: 41px; height: 41px; flex: none; }
.platforms svg { padding: 8px; }

/* Footer */
.site-footer { background: var(--c-black); color: #fff; padding: 60px 0 45px; }
.footer-top { display: grid; grid-template-columns: 275px 1fr; gap: 50px; align-items: center; }
.footer-top h3 { color: #fff; font-size: 32px; margin-bottom: 20px; }
.signup { display: flex; gap: 16px; align-items: flex-start; }
.signup input {
  flex: 1; min-width: 0; font: 400 15px/1.7 var(--font); padding: 8px;
  border: 1px solid #fff; border-radius: 0; background: #fff; color: #000;
}
.signup button {
  font: 700 16px/1 var(--font); padding: 14px 40px; border: 0; border-radius: 0;
  background: var(--c-gold); color: var(--c-ink); cursor: pointer;
}
.signup button:hover { filter: brightness(1.08); }
.signup button[disabled] { opacity: .6; cursor: progress; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 12px 0 0; font-size: 15px; min-height: 1.7em; }
.form-status.ok { color: var(--c-gold); }
.form-status.err { color: #ff8a8a; }

.footer-mid {
  border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 40px; padding-top: 40px;
  display: flex; justify-content: center; text-align: center;
}
.follow .socials { justify-content: center; }
.footer-mid h6, .copyright { font-size: 14px; font-weight: 400; color: #fff; margin: 0; }
.follow h6 { font-weight: 600; margin-bottom: 12px; }
.socials { display: flex; gap: 16px; }
.socials a { color: #fff; display: block; }
.socials svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.copyright { text-align: center; margin-top: 40px; }
@media (min-width: 922px) {
  /* Divider row and copyright sit under the sign-up column, not under the logo */
  .footer-mid, .copyright { margin-left: 325px; }
}

/* Tablet (Astra breakpoint) */
@media (max-width: 921px) {
  body { font-size: 15px; }
  .site-logo img { width: 160px; height: auto; }
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 70px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); background: var(--c-black); }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { line-height: 50px; padding: 0 20px; }
  .split { grid-template-columns: 1fr; }
  .cta-inner { margin: 0 auto; width: min(100% - 40px, 730px); }
  .cta h2 { font-size: 56px; line-height: 1.1; }
  .footer-top { grid-template-columns: 1fr; justify-items: center; }
  .footer-top > div { width: 100%; }
  .platforms { grid-template-columns: repeat(2, minmax(0, 330px)); column-gap: 30px; }
}

/* Mobile */
@media (max-width: 767px) {
  .hero { padding: 70px 0 20px; }
  .player-wrap { margin-top: 0; }
  .player-card { box-shadow: none; padding: 20px 0; }
  .intro h2 { font-size: 26px; }
  .intro .split img { width: 100vw; max-width: none; margin-inline: calc(-1 * var(--gutter)); }
  .cta h2 { font-size: 30px; line-height: 38px; }
  .cta p { font-size: 20px; line-height: 1.25; }
  .page-hero { padding: 100px 0 40px; }
  .page-hero h1 { font-size: 40px; line-height: 1.3; }
  .about-main h2, .band h2, .directory h2 { font-size: 24px; }
  .platforms { grid-template-columns: 1fr; justify-items: start; padding-left: 20px; }
  .footer-top h3 { font-size: 15px; }
  .signup { flex-direction: column; align-items: stretch; }
  .signup button { align-self: flex-start; }
}