/* Zosso Productions – static rebuild of the former WordPress page (theme Twenty Twenty-Five values) */

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: fallback;
  src: url("/fonts/Manrope-VariableFont_wght.woff2") format("woff2");
}

:root {
  --space-30: 20px;
  --space-40: 30px;
  --space-50: clamp(30px, 5vw, 50px);
  --space-60: clamp(30px, 7vw, 70px);
  --space-70: clamp(50px, 7vw, 90px);
  --gap: 1.2rem;
  --text-large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
  --text-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: #fff;
  color: #111;
  font-family: Manrope, sans-serif;
  font-size: var(--text-large);
  font-weight: 300;
  letter-spacing: -0.1px;
  line-height: 1.4;
}

a {
  color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: .1em;
}

h2, p { text-wrap: pretty; }

/* layout */
.wrap { padding-left: var(--space-50); padding-right: var(--space-50); }
.wide { max-width: 1340px; margin-left: auto; margin-right: auto; }
.content { max-width: 645px; margin-left: auto; margin-right: auto; }

/* site title */
.site-title { margin: 0; font-weight: 700; letter-spacing: -.5px; }
.site-title a { text-decoration: none; }
.site-title a:hover { text-decoration: underline; }

/* header */
.bar {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-30);
  padding-bottom: var(--space-30);
}

/* main */
main {
  margin-top: var(--space-60);
  padding-top: var(--space-60);
  padding-bottom: var(--space-60);
}
figure { margin: 0 0 var(--space-60); }
figure img { display: block; width: 100%; height: auto; }
.podcasts h2 {
  margin: 0;
  font-size: var(--text-x-large);
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.pods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: var(--gap);
}
.pod {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pod:hover, .pod:focus-visible {
  border-color: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}
.pod img {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  object-fit: cover;
}
.pod-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pod-name { font-weight: 600; line-height: 1.25; }
.pod-meta { font-size: .8em; color: #686868; }
main p { margin: var(--gap) 0 0; }


.podcasts + p { margin-top: var(--space-50); }