/* Podcastlijstje: plain CSS, no build step */

:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --text: #1d1b19;
  --muted: #6b655e;
  --line: #e7e2db;
  --accent: #d9480f;
  --accent-soft: #fdebe2;
  --up: #2b8a3e;
  --down: #c92a2a;
  --radius: 10px;
  --wrap: 72rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161412;
    --surface: #1f1c19;
    --text: #f1ede8;
    --muted: #a39b92;
    --line: #34302b;
    --accent: #ff8a4c;
    --accent-soft: #3a2519;
    --up: #69db7c;
    --down: #ff8787;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration-color: var(--line);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

h1,
h2 {
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.25rem;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1rem;
}

main.wrap {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.875rem;
}

.lead {
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 40rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header and footer */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand span {
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: 0.25rem;
}

/* At least 44 pixels tall, an easy target on a phone */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--bg);
}

.site-nav a[aria-current] {
  color: var(--accent);
  background: var(--accent-soft);
}

.search-toggle {
  display: none;
}

.search {
  position: relative;
  margin-left: auto;
  flex: 1 1 14rem;
  max-width: 20rem;
}

.search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* Phones: logo and search button on one row, the menu below it, scrolling
   sideways when it doesn't fit */
@media (max-width: 40rem) {
  .site-header__inner {
    gap: 0.5rem 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .search-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
  }

  .site-nav {
    order: 3;
    flex-basis: 100%;
    margin: 0 -0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* Narrower, so all five fit from 390 pixels wide; narrower phones scroll */
  .site-nav {
    gap: 0.125rem;
  }

  .site-nav a {
    padding: 0 0.375rem;
    font-size: 0.875rem;
  }

  .search {
    order: 2;
    margin-left: 0;
    max-width: none;
    flex-basis: 100%;
  }

  .search--foldable:not(.search--open) {
    display: none;
  }
}

.search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Suggestions under the search boxes (static/js/search.js) */

.suggestions {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 10;
  min-width: 18rem;
  max-height: 70vh;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.suggestions a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.625rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}

.suggestions img {
  grid-row: span 2;
  border-radius: 4px;
  background: var(--line);
  object-fit: cover;
}

.suggestions a > span {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion__name {
  font-weight: 600;
}

.suggestion__detail {
  color: var(--muted);
  font-size: 0.8125rem;
}

.suggestions [aria-selected='true'] a,
.suggestions a:hover {
  background: var(--accent-soft);
}

.suggestion--all {
  border-top: 1px solid var(--line);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.site-footer p {
  margin: 0.5rem 0 0;
}

/* Tabs above a chart, to switch to another chart (_chart_tabs.html) */

.tabs {
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tabs__link:hover {
  color: var(--text);
}

.tabs__link[aria-current] {
  border-bottom-color: var(--accent);
  color: var(--text);
}

/* Pages of running text, such as the privacy page */

.prose {
  max-width: 44rem;
  font-size: 1.0625rem;
}

.prose h2 {
  margin-top: 2rem;
}

/* The player, fixed to the bottom while an episode is loaded */

.player {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);
}

.player[hidden] {
  display: none;
}

/* Room under the footer, so the player covers nothing */
.has-player body {
  padding-bottom: 6rem;
}

.player__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.player__image {
  flex: none;
  border-radius: 6px;
  object-fit: cover;
}

.player__text {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  min-width: 0;
  font-size: 0.875rem;
}

.player__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player__podcast {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player__controls {
  display: flex;
  flex: 2 1 20rem;
  align-items: center;
  gap: 0.25rem;
}

.player__audio {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
}

.player__button {
  flex: none;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.player__button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.player__close {
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 40rem) {
  .has-player body {
    padding-bottom: 8rem;
  }

  .player__controls {
    flex-basis: 100%;
  }

  /* No room next to the audio controls; phones skip from the lock screen */
  .player__button[data-skip] {
    display: none;
  }
}

/* Turbo's bar at the top while the next page loads */
.turbo-progress-bar {
  background: var(--accent);
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  margin-bottom: 1rem;
}

/* Charts */

.intro {
  margin-bottom: 2rem;
}

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
}

.chart,
.chart-page .chart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.chart-page {
  max-width: 44rem;
}

.chart-entry__stats {
  text-align: right;
  white-space: nowrap;
}

.chart-nav {
  max-width: 44rem;
  margin-top: 2rem;
}

.chart-nav h3 {
  margin-bottom: 0.5rem;
}

.chart-nav__categories {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 11rem;
  column-gap: 1.5rem;
}

.chart-nav__categories li {
  padding: 0.125rem 0;
}

.chart__header {
  margin-bottom: 0.75rem;
}

.chart__header p {
  margin: 0;
  font-size: 0.875rem;
}

.chart__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chart-entry {
  display: grid;
  grid-template-columns: 2rem 56px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}

.chart-entry:first-child {
  border-top: 0;
}

.chart-entry__rank {
  font-weight: 800;
  font-size: 1.125rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-entry__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chart-entry__text .muted {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-entry__name {
  font-weight: 600;
  text-decoration: none;
}

.move {
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: 2.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.move--up {
  color: var(--up);
}

.move--down {
  color: var(--down);
}

.move--same {
  color: var(--muted);
}

.move--new {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.more {
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}

.artwork {
  display: block;
  border-radius: 6px;
  background: var(--line);
  object-fit: cover;
}

.artwork--large {
  width: 200px;
  height: 200px;
  border-radius: var(--radius);
}

/* Podcast lists */

.sort {
  max-width: 44rem;
}

.sort strong {
  color: var(--text);
}

.crumbs {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.feed-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.75rem;
}

.feed-item {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  min-width: 0;
}

.feed-item > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feed-item .muted {
  font-size: 0.875rem;
}

.feed-item__title {
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Makers */

.maker-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  columns: 18rem;
  column-gap: 2rem;
}

.maker-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}

.maker-list a {
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.maker-list .muted {
  white-space: nowrap;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.pagination a {
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}

/* Podcast detail */

.feed__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.feed__header > div {
  flex: 1 1 18rem;
}

.feed__people {
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.badge {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  text-decoration: none;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.button {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.button:hover {
  background: var(--accent);
  color: #fff;
}

.button--quiet {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.other-apps {
  margin-top: 0.5rem;
}

.other-apps summary {
  display: inline-block;
  cursor: pointer;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.other-apps summary::after {
  content: ' ▾';
}

.other-apps[open] summary::after {
  content: ' ▴';
}

.other-apps .links {
  margin-top: 0.5rem;
}

.follow-links {
  margin: 0.5rem 0 0;
}

.feed__description {
  max-width: 44rem;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}

.episodes {
  max-width: 44rem;
  margin-top: 2rem;
}

.episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.episode {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.episode__title {
  font-size: 1.0625rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.episode p {
  margin: 0.25rem 0 0.5rem;
}

.play-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.play-button:hover {
  background: var(--accent);
  color: #fff;
}

.play-button.is-playing {
  background: var(--accent);
  color: #fff;
}

/* A triangle, or two bars while playing */
.play-button__icon {
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

.play-button.is-playing .play-button__icon {
  clip-path: polygon(
    0 0,
    35% 0,
    35% 100%,
    0 100%,
    0 0,
    65% 0,
    100% 0,
    100% 100%,
    65% 100%,
    65% 0
  );
}

.episode__description {
  color: var(--muted);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.episode__description p {
  margin: 0.5rem 0;
}

.episode__description summary {
  display: block;
  margin: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

.episode__description summary::-webkit-details-marker {
  display: none;
}

/* Folded, the first paragraph shows at most three lines */
.episode__start {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.episode__more {
  color: var(--accent);
  font-weight: 600;
}

.episode__description[open] .episode__start {
  display: block;
}

.episode__description[open] .episode__more {
  display: none;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  max-width: 44rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

/* Chart history on podcast pages */

.history {
  --history-apple: #2a78d6;
  --history-spotify: #1baf7a;

  max-width: 44rem;
}

@media (prefers-color-scheme: dark) {
  .history {
    --history-apple: #3987e5;
    --history-spotify: #199e70;
  }
}

.history__figure {
  margin: 0 0 1rem;
}

.history__graph {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  overflow: visible;
}

.history__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.history__axis,
.history__label {
  fill: var(--muted);
  font-size: 12px;
}

.history__label {
  fill: var(--text);
}

/* The graph shrinks on phones; larger text keeps it readable */
@media (max-width: 30rem) {
  .history__axis,
  .history__label {
    font-size: 15px;
  }
}

.history__series--apple {
  --series: var(--history-apple);
}

.history__series--spotify {
  --series: var(--history-spotify);
}

.history__line {
  fill: none;
  stroke: var(--series);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.history__dot {
  fill: var(--series);
  stroke: var(--bg);
  stroke-width: 2;
}

.history__target {
  fill: transparent;
}

.history__target:hover {
  fill: var(--series);
  fill-opacity: 0.25;
}

.history__table-wrap {
  overflow-x: auto;
}

.history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.history__table th,
.history__table td {
  padding: 0.375rem 0.75rem 0.375rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.history__table thead th {
  color: var(--muted);
  font-weight: normal;
}

.history__table tbody th {
  font-weight: normal;
  white-space: nowrap;
}

.history__swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.375rem;
  border-radius: 2px;
  vertical-align: -0.0625rem;
}

.history__swatch--apple {
  background: var(--history-apple);
}

.history__swatch--spotify {
  background: var(--history-spotify);
}

/* Homepage */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  min-width: 0;
}

.card h2 {
  margin-bottom: 0.125rem;
}

.card > .muted.small,
.home-block > .muted.small {
  margin: 0 0 0.75rem;
}

.nowrap {
  white-space: nowrap;
}

.big-search {
  position: relative;
  display: flex;
  gap: 0.75rem;
  max-width: 44rem;
  margin-top: 1.25rem;
}

.big-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.0625rem;
}

.big-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.big-search button {
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background: #c2410c;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.big-search button:hover {
  background: #9a3412;
}

.home-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.home-top__side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 56rem) {
  .home-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chart-links {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}

.mini-list .move {
  min-width: 3rem;
  text-align: left;
}

/* A podcast's artwork in a short list (_mini_artwork.html), or a grey square */
.mini-list__artwork {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--line);
  object-fit: cover;
}

.mini-list__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.mini-list__name {
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mini-list__rank {
  width: 1rem;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.home-block {
  margin-top: 2.5rem;
}

.block-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.episode-cards,
.category-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.category-tiles {
  margin-top: 0.75rem;
}

.episode-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.episode-card__podcast {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.episode-card p {
  margin: 0;
}

.episode-card .play-button {
  align-self: flex-start;
  margin-top: auto;
}

.category-tile__name {
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.category-tile__name a {
  text-decoration: none;
}

.home-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.5rem;
  align-items: end;
  margin-top: 2.5rem;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1d1b19;
  color: #faf8f5;
}

.numbers p {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.numbers strong {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.numbers span {
  color: #d8d1c7;
  font-size: 0.875rem;
}

.numbers a {
  color: #ffb38a;
  font-weight: 700;
}

.numbers a:hover {
  color: #fff;
}

/* Podcast tips: our Instagram posts */

.tip-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

/* Two posts side by side on phones, like Instagram's own grid */
@media (max-width: 30rem) {
  .tip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

.tip-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
}

.tip-tile__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--line);
  object-fit: cover;
  margin-bottom: 0.25rem;
}

.tip-tile__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tip-podcasts {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 44rem;
}

.tip-podcasts .feed-item {
  align-items: flex-start;
}

.tip-podcasts .artwork {
  flex: none;
  width: 96px;
  height: 96px;
}

.tip-podcasts__note {
  margin-top: 0.375rem;
}