/* Shared type and keycaps across the illustrated desk. */
:root {
  --desk-ink: #203b36;
  --desk-key-ink: #1d315c;
  --desk-key-width: clamp(34px, 3.2vw, 48px);
  --desk-key-height: clamp(36px, 3.4vw, 51px);
  --desk-section-gap: clamp(22px, 2.5vw, 30px);
}
.panel .bead-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 auto var(--desk-section-gap);
  letter-spacing: normal;
}
.panel .bead-heading span,
.panel .bead-heading span:nth-child(even) {
  display: grid;
  flex: 0 0 var(--desk-key-width);
  place-items: center;
  width: var(--desk-key-width);
  height: var(--desk-key-height);
  border: 1px solid #a5a9a1;
  border-radius: 5px 5px 6px 6px;
  background: linear-gradient(165deg, #f7f6ec, #d8ded5);
  box-shadow: inset 2px 2px 0 #fff, inset -3px -3px 0 #b2bbb2, 0 4px 0 #87948c, 1px 6px 4px #364f4833;
  color: var(--desk-key-ink);
  font: 600 clamp(19px, 2vw, 27px)/1 'Outfit', sans-serif;
  transform: none;
}
.panel .bead-heading i { flex: 0 0 13px; width: 13px; }
.panel .bead-heading span:hover {
  translate: 0 3px;
  box-shadow: inset 2px 2px 0 #fff, inset -3px -3px 0 #b2bbb2, 0 1px 0 #87948c, 1px 2px 2px #364f4833;
}
.panel .products-intro,
.panel .media-intro,
.panel .page-lead,
.page-book > p {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--desk-ink);
  font: 400 clamp(16px, 1.5vw, 20px)/1.5 'Outfit', sans-serif;
  text-align: center;
}
.product-page > .products-intro { padding: 0; background: none; }
.product-story-copy h2,
.product-preview h3,
.featured-episode strong,
.page-about h2,
.page-about h3 { font-family: 'Outfit', sans-serif; }
@media (max-width: 700px) {
  :root { --desk-key-width: clamp(24px, 7vw, 32px); --desk-key-height: clamp(29px, 7.7vw, 35px); }
  .panel .bead-heading { gap: 4px; }
  .panel .bead-heading span,
  .panel .bead-heading span:nth-child(even) { font-size: clamp(15px, 4.5vw, 19px); }
  .panel .bead-heading i { flex-basis: 6px; width: 6px; }
}

/* Let the illustrated board dissolve into the same cork surface on long pages. */
.product-page {
  position: relative;
  isolation: isolate;
  background: #e9ad62 url('assets/cork-texture.webp') center top / 700px auto repeat;
}
.product-page::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: clamp(400px, 50vw, 740px);
  background: url('assets/project-board.png') center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 38%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 700px) {
  .product-page { background-size: 500px auto; }
  .product-page::before { height: 460px; background-size: auto 700px; }
}
.page-book > p { margin-bottom: 28px; }
/* Keep the illustrated desk visible while giving page introductions room to read. */
.page-about,
.page-book {
  background-image: linear-gradient(to bottom, #f3f2dd70 0, #f3f2dd70 450px, transparent 900px), url('assets/desk-paper.png');
}

.product-story-copy p { max-width: 55ch; }