/* Becoming Founders: the cover's paper collage, kept quiet around one loud hero. */
:root {
  --paper: #F1E5D8;
  --paper-light: #F8F2E8;
  --news: #E9DFCF;
  --ink: #181614;
  --tomato: #FF4F1F;
  --cobalt: #2340FF;
  --tape: rgba(232, 214, 178, 0.85);
  --type: "Courier Prime", "Courier New", monospace;
  --measure: 34rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(rgba(24, 22, 20, 0.035) 1px, transparent 1.2px);
  background-size: 5px 5px;
  color: var(--ink);
  font-family: var(--type);
  font-size: 1.1875rem;
  line-height: 1.6;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--tomato); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper-light); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

/* the torn edge shared by strips, cards and captions */
.strip, .card, .note, .sticky, .host figcaption, .photo figcaption, .button {
  clip-path: polygon(0 6%, 4% 0, 12% 4%, 22% 0, 33% 5%, 46% 1%, 58% 5%, 70% 0, 83% 4%, 94% 0, 100% 6%, 99% 30%, 100% 55%, 98% 80%, 100% 96%,
                     90% 100%, 78% 95%, 64% 100%, 50% 96%, 37% 100%, 24% 95%, 12% 100%, 2% 96%, 0 75%, 2% 50%, 0 25%);
}

/* hero: the cover art is the page's one loud thing */
.hero { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 0; }
.hero-art { width: 100%; }
.listen { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; padding: 0 0 0 6%; margin-top: -11%; position: relative; }
.strip {
  display: inline-block; padding: .6rem 1.4rem .55rem; font-weight: 700; font-size: 1.05rem; text-decoration: none;
  background: var(--paper-light); box-shadow: 0 6px 14px rgba(24, 22, 20, .18);
}
.strip-live { background: var(--tomato); color: var(--ink); transform: rotate(-1.5deg); }
.strip-live:hover { transform: rotate(-2.5deg) translateY(-1px); }
.strip-soon { color: rgba(24, 22, 20, .62); transform: rotate(1deg); font-weight: 400; }
.strip-soon:nth-child(3) { transform: rotate(-.6deg); }

main { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
section { padding-top: 5.5rem; }
h2 { margin: 0 0 1.5rem; font-weight: 400; line-height: 1.1; }

/* ransom-note headings */
.ransom { display: inline-flex; flex-wrap: wrap; gap: .12em .38em; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.word { display: inline-flex; gap: .04em; }
.cut {
  display: inline-block; padding: .04em .09em 0; line-height: 1; text-transform: uppercase;
  transform: translateY(var(--y)) rotate(var(--r)) scale(var(--s));
  box-shadow: 0 2px 4px rgba(24, 22, 20, .22);
}
.cut.ink { background: var(--ink); color: var(--paper-light); }
.cut.paper { background: var(--paper-light); color: var(--ink); }
.cut.tomato { background: var(--tomato); color: var(--ink); }
.cut.news { background: var(--news); color: var(--ink); }
.cut.cobalt { background: var(--cobalt); color: var(--paper-light); }
.cut.dots { background: var(--news) radial-gradient(rgba(24, 22, 20, .35) 1.1px, transparent 1.3px) 0 0 / 6px 6px; color: var(--ink); }
.abril { font-family: "Abril Fatface", serif; }
.alfa { font-family: "Alfa Slab One", serif; font-size: .92em; }
.anton { font-family: "Anton", sans-serif; font-size: 1.05em; }
.dmserif { font-family: "DM Serif Display", serif; }

.lede { max-width: var(--measure); margin: 0 0 2.5rem; }

/* episode: a taped photo and a typed index card */
.episode-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.photo { margin: 0; background: var(--paper-light); padding: .8rem .8rem 0; transform: rotate(-1deg); box-shadow: 0 16px 36px rgba(24, 22, 20, .22); position: relative; }
.photo::before, .photo::after {
  content: ""; position: absolute; top: -14px; width: 120px; height: 34px; background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.photo::before { left: -26px; transform: rotate(-28deg); }
.photo::after { right: -26px; transform: rotate(24deg); }
.photo video { width: 100%; background: var(--ink); }
.photo figcaption { display: inline-block; margin: .7rem 0 -1.1rem .4rem; padding: .3rem .9rem; background: var(--paper); font-size: .95rem; transform: rotate(.6deg); position: relative; }

.card {
  padding: 1.6rem 1.6rem 2rem 3rem; transform: rotate(1.2deg);
  background: var(--paper-light) repeating-linear-gradient(transparent 0 1.6rem, rgba(35, 64, 255, .18) 1.6rem calc(1.6rem + 1px)) 0 2.9rem / 100% 100% no-repeat;
  box-shadow: 0 12px 28px rgba(24, 22, 20, .16); position: relative;
}
.card::before { content: ""; position: absolute; left: 2rem; top: 0; bottom: 0; width: 1px; background: rgba(255, 79, 31, .55); }
.card-title { margin: 0 0 .2rem; font-weight: 700; }
.chapters { list-style: none; margin: 0 0 1.6rem; padding: 0; font-size: 1rem; line-height: 1.6rem; }
.chapters .t { display: inline-block; min-width: 3.4rem; font-weight: 700; }

.button {
  display: inline-block; padding: .65rem 1.4rem .6rem; background: var(--tomato); color: var(--ink); font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 14px rgba(24, 22, 20, .18);
}
.button:hover { background: var(--ink); color: var(--paper-light); }
.button-ink { background: var(--ink); color: var(--paper-light); }
.button-ink:hover { background: var(--cobalt); }

/* the show: a scrap of notebook paper */
.note { max-width: 40rem; padding: 1.8rem 2.2rem; background: var(--news); transform: rotate(-.7deg); box-shadow: 0 10px 24px rgba(24, 22, 20, .14); }
.note p { margin: 0 0 .9rem; }
.note p:last-child { margin: 0; }

/* hosts: two cut-out portraits */
.host-grid { display: flex; flex-wrap: wrap; gap: 3rem 4rem; }
.host { margin: 0; width: min(320px, 100%); }
.host img { width: 100%; border: 10px solid var(--paper-light); box-shadow: 0 14px 30px rgba(24, 22, 20, .22); }
.host-left { transform: rotate(-2deg); }
.host-right { transform: rotate(1.8deg); margin-top: 2.5rem; }
.host figcaption { display: inline-block; margin: -1.2rem 0 0 1rem; padding: .45rem 1rem; background: var(--paper-light); position: relative; font-size: 1rem; }
.host .name { display: block; font-weight: 700; font-size: 1.1rem; }

/* be a guest: a tomato sticky note */
.sticky { max-width: 34rem; padding: 2rem 2.2rem 2.4rem; background: var(--tomato); transform: rotate(1.4deg); box-shadow: 0 14px 30px rgba(24, 22, 20, .2); }
.sticky h2 { font-family: "DM Serif Display", serif; font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .6rem; }
.sticky p { margin: 0 0 1.4rem; }

.footer { max-width: 1120px; margin: 6rem auto 0; padding: 2.5rem 1.25rem 3rem; border-top: 2px dashed rgba(24, 22, 20, .25); }
.footer-title { width: 260px; margin-bottom: 1rem; }
.footer p { margin: .2rem 0; font-size: 1rem; }
.footer .small { margin-top: 1rem; font-size: .9rem; color: rgba(24, 22, 20, .65); }

@media (max-width: 860px) {
  .episode-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .card { transform: rotate(.6deg); }
}
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .hero { padding: 0; }
  .listen { margin-top: -14%; padding: 0 1rem; }
  .strip { font-size: .98rem; }
  section { padding-top: 4rem; }
  .photo::before, .photo::after { width: 80px; height: 26px; }
  .host-grid { gap: 1.5rem; flex-wrap: nowrap; }
  .host { width: 50%; }
  .host-right { margin-top: 1.5rem; }
  .host figcaption { margin-left: .4rem; padding: .35rem .6rem; font-size: .85rem; }
  .host .name { font-size: .95rem; }
  .note, .sticky { padding: 1.4rem 1.4rem 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* questions: plain, typed */
.faq dl { max-width: 44rem; margin: 0; }
.faq dt { font-weight: 700; margin-top: 1.4rem; }
.faq dd { margin: .25rem 0 0; }
.card-more { margin: 1rem 0 0; font-size: 1rem; }

/* episode page: a plain, readable transcript */
.transcript { max-width: 46rem; padding: 2.5rem 1.25rem 5rem; }
.transcript h1 { font-family: "DM Serif Display", serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: .5rem 0 1rem; }
.transcript h2 { font-family: "DM Serif Display", serif; font-size: 1.8rem; margin-top: 3rem; }
.transcript h3 { font-size: 1.1rem; margin: 2.2rem 0 .6rem; }
.transcript h3 .t, .transcript .chapters .t { color: rgba(24, 22, 20, .6); font-weight: 400; margin-right: .4rem; }
.transcript .lines p { margin: 0 0 1rem; }
.transcript .small { margin-top: 3rem; font-size: .9rem; color: rgba(24, 22, 20, .65); }
.transcript .ts { color: rgba(24, 22, 20, .55); font-size: .9rem; text-decoration: none; margin-right: .4rem; }
.transcript .ts:hover { color: var(--tomato); }

/* the show's accounts */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin: 1.4rem 0 .4rem; padding: 0; }
.social img { width: 40px; height: 40px; }
.social a { display: block; border-radius: 8px; }
.social .soon { opacity: .35; filter: grayscale(1); }
.soon-note { margin: 0; font-weight: 700; }
.photo-mission { max-width: 760px; margin: 0 0 3rem; transform: rotate(.8deg); }

/* episode page: the full episode, taped in like the trailer */
.photo-player { margin: 0 0 2.5rem; padding-bottom: .8rem; }
.photo-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--ink); }

/* RSS + follow row under the listen strips */
.strip-rss { color: var(--ink); transform: rotate(.6deg); }
.strip-rss:hover, .strip-follow:hover { transform: rotate(-1deg) translateY(-1px); }
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: 1.2rem 0 0 6%; }
.follow-label { font-weight: 700; margin-right: .25rem; }
.strip-follow { background: var(--ink); color: var(--paper-light); font-size: .95rem; padding: .45rem 1.1rem .4rem; transform: rotate(-.8deg); }
.strip-follow:nth-of-type(even) { transform: rotate(.9deg); }
@media (max-width: 720px) { .follow { padding: 1rem 1rem 0; } }

/* long URLs in FAQ answers wrap instead of widening the page on phones */
.faq dd { overflow-wrap: anywhere; }
/* the photo tape pokes past the edge on phones: no sideways scroll */
html, body { overflow-x: clip; }