* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #d4dbed;
  color: #1c1c1e;
}

main {
  padding-top: 7.5rem;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ===============================
Top Navigation
================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 7.5rem;
  background-color: #3a4865;
  color: white;
  padding: 0.75rem 1.25rem;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;

  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

header h1, header .site-title {
  grid-row: 1;
  margin: 0;
  text-align: center;
  font-size: 2.25rem;
  line-height: 1.1;
  justify-self: center;
}

header h1 a, header .site-title a {
  font-family: "Arial Black", "Segoe UI", "Trebuchet MS", sans-serif;
  color: #ffca26;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

header nav.header {
  grid-row: 2;
  justify-self: end;
  /* sit just to the left of the Thomas & Lydia headshot, with a gap */
  margin-right: 8.5rem;
}

header nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

header nav a {
  color: white;
  text-decoration: none;
  text-transform: none;
  font-size: 1.15rem;
  font-weight: 700;
}

header nav a:hover {
  color: #f90;
}

nav ul li.dropdown {
  position: relative;
}

header nav ul li a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 0.5rem 0;
  height: 2rem;
  line-height: 2rem;
}

nav ul li.dropdown > a i {
  font-size: 0.7rem;
  transform: rotate(90deg);
  line-height: 1;
  vertical-align: middle;
  margin-top: 1px;
}

nav ul li.dropdown:hover .dropdown-menu,
nav ul li.dropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -145px;
  background-color: #3a4865;
  width: 290px;
  padding: 5px;
  z-index: 1000;
  border-radius: 0 0 8px 8px;
}

.dropdown-menu li {
  display: block;
  padding:5px;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  color: white;
  font-size: 0.85rem;
  text-transform: none;
  font-weight: normal;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color: #112244;
  color: #f90;
}

.dropdown-menu li a img, ul.podcast-mobile-menu li a img {
  height: 32px;
  width: 32px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.site-headshot {
  height:100%;
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.site-headshot img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.15);
}

button.hamburger {
  display: none;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;

  position: static;   /* important: let the grid place it */
  top: auto;
  right: auto;

  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

button.hamburger i {
  font-size: 2.2rem; /* adjust this size as needed */
  display: inline-block;
  background: linear-gradient(90deg, #ff9900, #ffcc00, #ffaa33);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.15);
  line-height: 1;
}

/* Hide the entire mobile nav container initially */
.mobile-nav {
  display: none;
}

/* Style for the nav container when visible */
.mobile-nav {
  background-color: #071124;
  border-top: 2px solid #444;
  padding: 1rem;
  position: absolute;
  top: 5rem;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.mobile-nav ul, .mobile-nav li {
    list-style: none;
}

ul.podcast-mobile-menu {
  margin-left:30px;
}

.happy-title {
  width:100%;
  text-align: center;
  font-family: "Arial Black", "Segoe UI", "Trebuchet MS", sans-serif
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    #0a1124 0%,
    #0d162e 30%,
    #08101f 60%,
    #03060c 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 2rem auto;
  padding: 0.5rem 1rem;
  display: inline-block;
  line-height: 1.2;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),  
    0 0 2px rgba(255, 255, 255, 0.05);
}

.featured-podcasts {
  padding: 2.5rem 2rem 2rem;
  background-color: transparent;
  text-align: left;
  margin-bottom:25px;
}

.featured-podcast-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
}

.featured-podcast-logo-link {
  display: inline-block;
  transition: transform 0.2s ease;
}

.featured-podcast-logo-link:hover {
  transform: scale(1.05);
}

.featured-podcast-logo {
  width: 120px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.latest-blog-feature {
  max-width: 1100px;
  margin: 4rem auto;
  padding: 3rem 2rem;
  background: linear-gradient(to right, #fff8f0, #fffce6);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.blog-feature-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.blog-feature-image img {
  width: 300px;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  object-fit: cover;
}

.blog-feature-content {
  flex: 1;
  min-width: 250px;
}

.blog-feature-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #071124;
}

.blog-feature-title a, span.author-name a, .post-meta a {
  color: #071124;
  text-decoration: none;
}

.blog-feature-title a:hover, span.author-name a:hover, .post-meta a:hover {
  color: #ff9900;
}

.blog-feature-date {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 1rem;
}

.blog-feature-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.blog-feature-snippet {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.blog-feature-readmore {
  display: inline-block;
  background-color: #071124;
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background-color 0.3s ease;
}

.blog-feature-readmore:hover {
  background-color: #0d1d44;
  color: #ff9900;
}

/* ===============================
   Latest Episodes (front page)
================================== */
.latest-podcast-episodes {
  width:100%;
  margin:0px;
  padding-left:150px;
  padding-right:150px;
}

.episode-grid-container {
  width:100%;
  display:flex;
  justify-content:center;
}

.latest-episodes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.episode-card {
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.episode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.episode-logo-small {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  margin-bottom: 1rem;
}

/* Hover state: visual cue that images are links */
a:hover img.episode-logo-small {
    cursor: pointer;
    transform: translateY(-1px);
    box-shadow: 0 0.4rem 0.9rem rgba(0, 0, 0, 0.25);
    opacity: 0.9;
}

/* Make sure episode titles also behave nicely as links */
.episode-top a {
    color: inherit;
    text-decoration: none;
}

.episode-top a:hover h3 {
    text-decoration: underline;
    cursor: pointer;
}

.episode-title {
  font-size: 0.85rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  height: 4.8em;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.episode-snippet {
  font-size: 0.9rem;
  color: #444;
  text-align: center;
  margin-bottom: 1rem;
}

.episode-date {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.5rem;
}

/*Blog Posts*/

.blog-two-column {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: flex-start;
}

.blog-post-stream {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.post-snippet {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.post-snippet:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Top section: image + title + author info */
.post-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}


.post-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.post-meta {
  flex: 1;
  min-width: 200px;
}

.meta-date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 0.75rem;
}

/* Author image + name */
.post-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-headshot {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.author-name {
  font-weight: bold;
  color: #1c1c1e;
  font-style: italic;
  font-size: 1rem;
}

/* Main body snippet */
.post-snippet-body {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

.post-snippet-body p {
  margin: 0;
}

/* Right-aligned sidebar */
.blog-sidebar {
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.blog-sidebar h2 {
  font-size: 1.2rem;
  color: #071124;
  margin-bottom: 1rem;
}

.blog-sidebar a {
  color: #005bbb;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.podcast-links li {
  margin-bottom: 1rem;
}

/* 🔗 Modern Link Styling */
a {
  color: #005bbb;
  text-decoration: none;
  transition: color 0.2s ease;
}


/* Restore progress bar default width */
.episode-card .plyr__progress {
  flex: 1 1 auto;
}

/* Ensure buttons and layout stay sane */
.episode-card .plyr__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Keep play, mute, etc. from stretching */
.episode-card .plyr__controls > button {
  flex: 0 0 auto;
}

/* Contain the volume section tightly */
.episode-card .plyr__volume {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide volume slider by default */
.episode-card .plyr__volume input[type='range'] {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: rotate(-90deg) translateX(-50px) translateY(-35px);
  transform-origin: center center;
  appearance: none;
  background:#1c1c1e;
  border-radius: 3px;
  z-index: 2;
  padding:5px;
}

/* Show on hover */
.episode-card .plyr__volume:hover input[type='range'] {
  display: block;
}

/* ===============================
   Podcast Hero and Metadata
================================== */
.podcast-hero {
  text-align: center;
  margin-bottom: 3rem;
}

.podcast-banner {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
  margin-bottom: 2rem;
}

.podcast-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  align-items: flex-start;
}

.podcast-logo, .podcast-sidebar-logo {
  width: 160px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.podcast-sidebar-logo {
  margin:0 auto;
}

.podcast-sidebar-logo:hover {
  border:1px solid #f5f5d5;
}

.podcast-description {
  flex: 1;
  min-width: 250px;
  max-width: 600px;
  text-align: left;
}

.podcast-description h1 {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
}

.podcast-description p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333;
}

.podcast-description ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  margin: 1rem 0;
}

.podcast-description ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #071124;
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.podcast-description ul li a:hover {
  background-color: #0d1d44;
  color: #f90;
}

.podcast-description ul li a img {
  height: 20px;
  width: 20px;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ===============================
   Episodes
================================== */
.episode-list-container {
  max-width: 960px;
  margin: 4rem auto;
  padding: 0 1rem;
  margin-bottom: 6rem;
}

.episode {
  display: flex;
  flex-direction:column;
  gap: 1.5rem;
  align-items: flex-start;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.episode-top {
  display:flex;
}

.episode:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.episode-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.episode-content {
  flex: 1;
  text-align: left;
}

.episode h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  margin-left:15px;
  margin-top:25px;
  color: #071124;
}

/* Container for spacing and vibe — slim + light (RESTYLE 2) */
.plyr--audio {
  margin: 1.25rem 0;
  border-radius: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
}

/* Control bar */
.plyr__controls {
  background-color: transparent;
  color: var(--ink-2);
  font-family: inherit;
}

/* Buttons */
.plyr__controls button {
  color: var(--ink-2);
  transition: color 0.2s ease, transform 0.2s ease;
}

.plyr__controls button:hover {
  color: var(--accent);
  transform: scale(1.12);
}

/* Time, progress, tooltip */
.plyr__time {
  color: var(--ink-2);
}
.plyr__tooltip {
  color: var(--panel);
}

/* Progress + volume tracks: light rail, accent fill via plyr vars */
.plyr__progress input[type='range'],
.plyr__volume input[type='range'] {
  background: transparent;
}

/* Active focus ring */
.plyr--full-ui input[type='range']:focus {
  box-shadow: 0 0 0 2px rgba(3, 78, 200, 0.25);
  outline: none;
}

.plyr {
  --plyr-color-main: var(--accent);
  --plyr-audio-controls-background: transparent;
  --plyr-audio-control-color: var(--ink-2);
  --plyr-audio-control-color-hover: var(--accent);
  --plyr-range-fill-background: var(--accent);
  --plyr-range-track-background: var(--line);
  --plyr-range-thumb-background: var(--accent);
}

.episode-content p {
  width: 100%;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

.episode-content p a {
  display: inline;
  color: #005bbb;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.episode-content p em {
  display: block;
  font-size: 0.9rem;
  color: #888;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
  font-size: 1rem;
  font-weight: bold;
}

/* 2026-10-13 (LOOKS): the old navy fill is gone. The later restyle colours
   the text with the show accent, and SIO's accent (#111) on navy was
   invisible. Buttons are now light pills; see the LAUNCH POLISH block. */
.pagination a {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.author-details {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.author-headshot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ccc;
}

.post-header-image {
  width: 100%;
  margin: 1.5rem 0;
  border-radius: 12px;
}

.post-body {
  font-size: 1.1rem;
  line-height: 1.75;
}

.episode-people {
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.episode-people span.author-name {
    font-size:80%;
}

.episode-people img.author-headshot {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5em;
}

.episode-people .author-name {
  font-size: 0.95em;
  display: inline-block;
  vertical-align: middle;
}

.person-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.person-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.person-headshot {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

.person-details {
  flex: 1;
}

.person-name {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.person-role {
  font-size: 1.1rem;
  color: #666;
}

.person-bio {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  padding: 1rem 0;
}

.person-links,
.person-links-section,
.person-socials {
  padding: 1rem 0;
}

.person-links-section, h3,
.person-socials h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.person-links-section, ul {
  list-style: none;
  padding-left: 0;
}

.person-links-section, li {
  margin: 0.5rem 0;
}

.person-links-section a {
  color: #0066cc;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.person-links-section a:hover {
  color: #004a99;
  text-decoration: underline;
}

/* Person socials: modern pill-style list with icons */
.person-socials-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.person-social-item {
  margin-bottom: 0.5rem;
}

.person-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  color: #005bbb;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

.person-social-link:hover,
.person-social-link:focus-visible {
  background-color: #f7f7f7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  color: #003f7a;
}

.person-social-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Service-specific icons – point these to your actual icon asset URLs */
.person-social-icon--linkedin {
  background-image: url('/images/logos/linkedin.png');
}

.person-social-icon--bluesky {
  background-image: url('/images/logos/bluesky.png');
}

.person-social-icon--x {
  background-image: url('/images/logos/x.png');
}

.person-social-icon--facebook {
  background-image: url('/images/logos/facebook.png');
}

.person-social-icon--mastodon {
  background-image: url('/images/logos/mastodon.png');
}

.person-social-icon--reddit {
  background-image: url('/images/logos/reddit.png');
}

.person-social-icon--instagram {
  background-image: url('/images/logos/instagram.png');
}

.person-social-icon--patreon {
  background-image: url('/images/logos/patreon-modern.png');
}

.person-social-label {
  white-space: nowrap;
}

/* ===============================
   Person Profile Sidebar
================================== */

.person-profile .person-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 2.5rem;
  align-items: flex-start;
}

.person-main .person-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #ddd;
  padding: 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.person-sidebar {
  background: linear-gradient(to bottom, #f7f7fb, #ffffff);
  border-radius: 16px;
  border: 1px solid #ddd;
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

h2.person-sidebar-heading {
  margin-bottom: 2.0rem;
}

.person-sidebar-intro {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1.25rem;
}

.person-episodes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.person-episode-card {
  border-radius: 12px;
  background-color: #fafafa;
  border: 1px solid #e1e1e6;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.person-episode-podcast {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.15rem;
}

.person-episode-podcast-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.person-episode-podcast-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #071124;
}

.person-episode-title-link {
  text-decoration: none;
}

.person-episode-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #005bbb;
  line-height: 1.4;
}

.person-episode-title-link:hover .person-episode-title {
  color: #ff9900;
}

.person-episode-meta {
  font-size: 0.8rem;
  color: #888;
}

/* (2026-10-13 LOOKS) this rule's selector had been lost, leaving a stray
   "} font-size…}" fragment; restored as the contact alert base. */
.contact-alert {
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.contact-alert-success {
  background-color: #e6f6ea;
  color: #256c3a;
  border: 1px solid #b7e3c2;
}

.contact-alert-error {
  background-color: #fff4f2;
  color: #a63b2b;
  border: 1px solid #f2c1b9;
}

.contact-field {
  margin-bottom: 1.25rem;
}

.contact-field-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contact-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #071124;
  margin-bottom: 0.25rem;
}

.contact-field .required {
  color: #d22;
  font-weight: 700;
}

.contact-field input,
.contact-field textarea,
.contact-field select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.95rem;
  font-family: inherit;
  color: #1c1c1e;
  background-color: #fafafa;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.contact-field textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {
  outline: none;
  border-color: #ff9900;
  box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.25);
  background-color: #ffffff;
}

.contact-field input.invalid,
.contact-field textarea.invalid,
.contact-field select.invalid {
  border-color: #cc3a3a;
  box-shadow: 0 0 0 1px rgba(204, 58, 58, 0.35);
  background-color: #fff7f7;
}

.field-error {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #cc3a3a;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.field-error.active {
  opacity: 1;
}

.contact-actions {
  margin-top: 1.5rem;
  text-align: right;
}

.contact-submit-button {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: none;
  background-color: #071124;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.contact-submit-button:hover {
  background-color: #0d1d44;
  color: #ff9900;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.contact-submit-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Utility for JS-controlled sections */
.is-hidden {
  display: none !important;
}

/* ===============================
   Footer
================================== */
footer {
  background-color: #222;
  color: #ccc;
  text-align: center;
  padding: 2rem;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
}

footer a {
  color: #f90;
  text-decoration: none;
}

footer .container,
footer .stackcontainer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.socials {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  text-align: center;
}

.socials img {
  margin: 0 10px;
  height: 50px;
}

.socials img:hover {
  transform: scale(1.1);
}

.site-footer h3 {
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 0.05rem;
  margin-bottom: 0.25rem;
  text-align: center;
}

.site-footer p {
  font-size: 0.85rem;
  color: #bbb;
  margin-top: 2rem;
}


/* ===============================
   Responsive Tweaks
================================== */

@media (max-width: 1124px) {
  .latest-episodes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .episode-card {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
  }

  header nav.header {
    display: none;
    flex-direction: column;
    background-color: #071124;
    padding: 1rem 2rem;
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    z-index: 999;
  }

  site-nav.open {
    display: flex;
  }

  header nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
  }

  header nav ul li {
    width: 100%;
  }

  header nav a {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
  }
  
  .site-headshot {
      display:none;
  }

  button.hamburger { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
  }

  .dropdown-menu {
    display: none !important;
  }

  .dropdown-menu {
    position: relative;
    display: none;
    width: 100%;
    padding: 0;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu {
    display: block;
  }

  .dropdown-menu li {
    width: 100%;
  }

  .dropdown-menu a {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
  }

  .episode-card {
    max-width: 100%;
  }


  .podcast-meta {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .podcast-description {
    text-align: left;
  }

  .podcast-description ul {
    justify-content: flex-start;
  }

  .episode {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .episode-content {
    text-align: left;
    width: 100%;
  }

  .episode-logo {
    margin-bottom: 1rem;
  }

  .blog-sidebar {
    display:none;
  }

  .blog-two-column {
    display:flex;
  }

  .site-footer .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-footer .socials {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .latest-podcast-episodes {
    padding:0px;
  }
  .latest-episodes-grid {
    grid-template-columns: 1fr;
  }

  .socials {
    flex-direction: column;
    align-items: center;
  }

}

/* Responsive tweaks for contact page */
@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 1.75rem 1.5rem;
  }
}

@media (max-width: 640px) {
  .contact-field-group {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 1.5rem 1.25rem;
  }

  .contact-actions {
    text-align: center;
  }

  .contact-submit-button {
    width: 100%;
    max-width: 260px;
  }
}

/* ===== episode conversion surfaces (2026-07-16) ===== */
.show-chip{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;margin-bottom:.4rem}
.show-chip img{width:44px;height:44px;border-radius:8px}
.episode-title{margin:.2rem 0 .1rem;font-size:1.5rem;line-height:1.25}
.episode-title a{text-decoration:none;color:inherit}
.episode-byline{color:#666;margin:.1rem 0 .9rem;font-size:.92rem}
.episode-actions{margin:1.1rem 0 .4rem;padding-top:.9rem;border-top:1px solid #e3e3e3}
.episode-actions-label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#777;margin-bottom:.45rem}
.episode-actions-row{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.episode-actions-row li{margin:0}
.share-button{cursor:pointer;font:inherit}
.episode-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:.9rem;border-top:1px solid #e3e3e3;font-size:.95rem}
.episode-nav a{text-decoration:none}
.episode-nav-next{margin-left:auto;text-align:right}
.pagination{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin:1.2rem 0 .3rem;flex-wrap:wrap}
.pagination-status{color:#666;font-size:.92rem}
.pagination-jump{margin-top:0;font-size:.88rem;gap:1.6rem}

/* ===== transcripts (2026-07-17) ===== */
.episode-transcript{margin-top:1.4rem;padding-top:1rem;border-top:2px solid #e3e3e3}
.episode-transcript h2{font-size:1.25rem}
.episode-transcript p{line-height:1.65;max-width:70ch}
.transcript-note{font-size:.85rem;color:#777;font-style:italic}
.episode-transcript .ts{color:#999;font-size:.8rem;margin-right:.3rem;font-variant-numeric:tabular-nums}

/* ================================================================
   SERIOUS POD DESIGN SYSTEM v2 (2026-07-17) — override layer.
   Neutral paper canvas + ink; each show supplies the accent.
   ================================================================ */
:root{
  --paper:#FAFAF8; --panel:#FFFFFF; --ink:#1B2430; --ink-2:#4A5568;
  --ink-3:#8A94A2; --line:#E4E2DC; --accent:#C9403A;
}
body.show-opening-arguments{--accent:#034EC8}
body.show-where-theres-woke{--accent:#117A83}
body.show-gavel-gavel{--accent:#C85347}
body.show-dear-old-dads{--accent:#C88F0A}
body.show-serious-inquiries-only{--accent:#111111}

body{background:var(--paper);color:var(--ink)}
/* keep the top offset for the fixed header (base rule set padding-top:7.5rem) */
main{max-width:1080px;margin:0 auto;padding:7.5rem 20px 0}

/* masthead: ink on paper, accent underline on the wordmark */
header{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(27,36,48,.05)}
header h1, header .site-title{font-size:1.5rem;letter-spacing:-.01em}
header h1 a, header .site-title a{color:var(--ink);text-decoration:none;border-bottom:3px solid var(--accent);padding-bottom:2px}
header nav.header a{color:var(--ink-2)}
header nav.header a:hover{color:var(--ink)}
.site-headshot img{width:56px;height:56px;border-radius:50%;border:2px solid var(--line)}

/* content alignment + type scale */
.episode-list-container{text-align:left}
.episode-list-container h2{font-size:1.35rem;text-align:left;margin:1.6rem 0 .9rem;letter-spacing:-.01em}
h2, h3{color:var(--ink)}

/* episode entries: light rows, not tombstones */
.episode{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 3px rgba(27,36,48,.04);padding:16px 18px;margin-bottom:14px;text-align:left}
.episode-top{display:flex;align-items:center;gap:12px;text-align:left}
.episode-top img.episode-logo{width:56px;height:56px;border-radius:8px;flex-shrink:0}
.episode-top h3{font-size:1.06rem;line-height:1.35;margin:0;text-align:left;color:var(--ink)}
.episode-top a{text-decoration:none}
.episode-top a:hover h3{color:var(--accent)}
.episode-description{color:var(--ink-2);font-size:.94rem;line-height:1.55;max-width:70ch}
/* teaser rows clamp to 3 lines; the full episode page never clamps */
.episode:not(.episode-single) .episode-description{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.episode-description *{font-size:inherit!important;line-height:inherit!important}
.episode-content p em{color:var(--ink-3);font-style:normal;font-size:.85rem}
.episode-people{color:var(--ink-3);font-size:.85rem}
.episode-people .author-name a{color:var(--ink-2);text-decoration:none}

/* players: slim + accent, never a dark slab */
.plyr--audio .plyr__controls{background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--ink-2)}
.plyr{--plyr-color-main:var(--accent);--plyr-audio-controls-background:transparent;
  --plyr-audio-control-color:var(--ink-2);
  /* settings (speed) menu: match the light paper design so it stays readable */
  --plyr-menu-background:var(--panel);
  --plyr-menu-color:var(--ink-2);
  --plyr-menu-arrow-color:var(--ink-3);
  --plyr-menu-back-border-color:var(--line);
  --plyr-menu-radius:8px;
  --plyr-menu-shadow:0 6px 18px rgba(27,36,48,.16);
  box-shadow:none;margin:.5rem 0}
/* readable menu panel: 1px line border, ink text, accent on the active speed */
.plyr__menu__container{border:1px solid var(--line)}
.plyr__menu__container .plyr__control{color:var(--ink-2)}
.plyr__menu__container .plyr__control:hover,
.plyr__menu__container .plyr__control:focus{background:var(--paper);color:var(--ink)}
.plyr__menu__container .plyr__control[aria-checked="true"]::before{background:var(--accent)}
.plyr__menu__container .plyr__control--forward .plyr__menu__value{color:var(--ink-3)}

/* buttons pick up the show accent */
.podcast-button{background:var(--panel);border:1.5px solid var(--line);border-radius:8px;color:var(--ink)}
.podcast-button:hover{border-color:var(--accent);color:var(--accent)}
.podcast-button-patreon{border-color:var(--accent);color:var(--accent);font-weight:600}
.episode-actions{border-top-color:var(--line)}
.episode-nav a, .pagination a{color:var(--accent);text-decoration:none;font-weight:600}
.pagination a{border:1.5px solid var(--line);border-radius:8px;padding:6px 14px}
.pagination a:hover{border-color:var(--accent)}

/* homepage show tiles: name + accent underline */
.podcast-icons a, .podcasts-row a{text-decoration:none}
footer.site-footer{background:var(--ink)}

/* ================================================================
   RESTYLE PASS 2 (2026-07-17) — home cards, tiles, players, person.
   ================================================================ */

/* per-ELEMENT show accent (body.show-* only covers show pages;
   these let a tile/card carry its own show accent on the home page) */
.show-opening-arguments{--accent:#034EC8}
.show-where-theres-woke{--accent:#117A83}
.show-gavel-gavel{--accent:#C85347}
.show-dear-old-dads{--accent:#C88F0A}
.show-serious-inquiries-only{--accent:#111111}

/* ---- section headings: left-aligned, consistent ---- */
.featured-podcasts, .latest-podcast-episodes{text-align:left}
/* ONE shared content column: main{max-width:1080px;margin:0 auto} is the
   column. Zero the legacy horizontal padding on .featured-podcasts (it used
   to inset the tiles + heading ~32px), so its "The Podcasts" heading and the
   tile row align to the SAME left/centre as the "Latest Episodes" heading and
   the episode cards below. Headings stay flush-left; the tile row is centred
   in the column (see .featured-podcast-row justify-content:center). */
.featured-podcasts{padding-left:0;padding-right:0}
.featured-podcasts > h2,
.latest-podcast-episodes > h2{
  font-size:1.5rem;text-align:left;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 1.1rem;max-width:1080px;
}
.latest-podcast-episodes > h2{margin-left:auto;margin-right:auto}
/* the template used <br><br> for spacing — neutralize them */
.featured-podcasts > br, .latest-podcast-episodes > br{display:none}

/* ---- show-tiles strip: UNIFORM tiles — fixed art, one-line names ----
   Every tile is the same fixed width with a 132px-square logo and a show
   name forced onto ONE line (nowrap), so art size + baseline never shift
   with name length ("Serious Inquiries Only" is the longest and must fit). */
.featured-podcast-row{gap:2rem 1.5rem;justify-content:center;align-items:flex-start;max-width:1080px;margin:0 auto}
.featured-podcast-logo-link{
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  text-decoration:none;width:152px;flex:0 0 152px;
}
.featured-podcast-logo{width:132px;height:132px;object-fit:cover;flex:0 0 auto;
  border-radius:12px;box-shadow:0 3px 10px rgba(27,36,48,.12)}
.featured-podcast-name{
  font-size:.8rem;font-weight:700;line-height:1.2;text-align:center;
  letter-spacing:-.012em;white-space:nowrap;max-width:100%;width:100%;box-sizing:border-box;
  color:var(--ink);padding-bottom:5px;border-bottom:3px solid var(--accent);
}
.featured-podcast-logo-link:hover .featured-podcast-name{color:var(--accent)}

/* ================================================================
   ONE episode row component (2026-07-17) — used identically on the
   home "Latest Episodes" list AND every /podcasts/* show page.
   Full-width rows like a podcast player: art left, then title,
   2-line description, muted meta line, and a slim accent player.
   Per-show accent rides in on the row's .show-<slug> class.
   ================================================================ */
.latest-podcast-episodes{padding-left:0;padding-right:0}
.episode-rows{max-width:1080px}

.episode-row{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;margin-bottom:14px;
  box-shadow:0 1px 3px rgba(27,36,48,.04);
  transition:box-shadow .2s ease, transform .2s ease;
}
.episode-row:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(27,36,48,.08)}

.episode-row-art{flex-shrink:0;display:block;line-height:0}
.episode-row-art img.episode-row-logo{
  width:60px;height:60px;border-radius:8px;object-fit:cover;display:block;box-shadow:none;
}
.episode-row:hover .episode-row-art img{opacity:.92}

.episode-row-body{flex:1;min-width:0;text-align:left}
.episode-row-title{
  font-size:1.06rem;font-weight:700;line-height:1.3;letter-spacing:-.005em;
  margin:0 0 .25rem;text-align:left;
}
.episode-row-title a{color:var(--ink);text-decoration:none}
.episode-row-title a:hover{color:var(--accent)}

.episode-row-desc{
  color:var(--ink-2);font-size:.92rem;line-height:1.5;text-align:left;
  margin:0 0 .3rem;max-width:70ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.episode-row-desc *{font-size:inherit!important;line-height:inherit!important}

.episode-row-meta{
  color:var(--ink-3);font-size:.82rem;font-weight:400;line-height:1.45;
  text-align:left;margin:.15rem 0 0;
}

/* slim player, sized to the body column (never a dark slab) */
.episode-row .plyr-audio{width:100%}
.episode-row .plyr{max-width:100%;margin:.55rem 0 0}

/* ---- subscribe / follow buttons: constrain the platform icons ---- */
.podcast-button img{height:18px;width:18px;object-fit:contain;border-radius:3px;box-shadow:none}
.episode-actions-row{align-items:center}
.episode-actions-row .podcast-button{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;font-size:.9rem}

/* ---- episode page: merged byline, tidy description ---- */
.episode-byline-people{color:var(--ink-2);font-size:.92rem;margin:.5rem 0 0}
.episode-byline-people a{color:var(--ink);text-decoration:none;font-weight:600}
.episode-byline-people a:hover{color:var(--accent)}
/* the legacy .episode-title{height:4.8em} left a tall empty box under the
   title — reset it so the byline sits right under the heading */
.episode-title{height:auto;overflow:visible;text-align:left}
.episode-single .episode-title{margin-bottom:.3rem}
.episode-single .episode-byline{margin-top:.2rem}
/* neutralize pasted-in Libsyn/ProseMirror inline junk visually */
.episode-single .episode-description p{margin:0 0 .9rem}
.episode-single .episode-description p:last-child{margin-bottom:0}
/* the old .episode-content p em{display:block} forced footer bits onto
   their own lines and shrank/greyed them — restore natural inline flow */
.episode-single .episode-description em{
  display:inline;font-style:italic;color:inherit;font-size:inherit;
}
.episode-single .episode-description strong{font-weight:700;color:inherit}
.episode-single .episode-description a{color:var(--accent);font-weight:600}
.episode-single .episode-description h1,
.episode-single .episode-description h2,
.episode-single .episode-description h3,
.episode-single .episode-description h4{
  font-size:1rem!important;font-weight:700;margin:.9rem 0 .3rem;display:inline;
}
.episode-single .episode-description [style]{background:transparent!important;color:inherit!important}
.episode-single .episode-description br + br{display:none}

/* ---- person page: replace the logo-as-headshot with a clean monogram ---- */
.person-monogram{
  width:96px;height:96px;border-radius:50%;background:var(--paper);
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;font-weight:700;color:var(--ink-3);margin-bottom:.75rem;
  text-transform:uppercase;
}
.person-main .person-card{border-color:var(--line)}
.person-role{color:var(--ink-2)}
.person-bio{color:var(--ink-2)}

/* ---- show-hero "Listen on" buttons: match the light design system ----
   (legacy .podcast-description ul li a painted them dark navy; raise
   specificity with the .podcast-button class to bring them into line) ---- */
.podcast-description ul li a.podcast-button{
  background:var(--panel);color:var(--ink);border:1.5px solid var(--line);
}
.podcast-description ul li a.podcast-button:hover{
  background:var(--panel);border-color:var(--accent);color:var(--accent);
}
.podcast-description ul li a.podcast-button img{height:18px;width:18px;box-shadow:none}

/* keep the single-episode header left-aligned on mobile (the generic
   .episode mobile rule centers everything, which fights the art/title flow) */
@media (max-width:768px){
  .episode-single{align-items:flex-start;text-align:left}
}

/* ---- mobile: 2-up uniform tiles, names still on one line ---- */
@media (max-width:600px){
  /* trim section padding + gap so two 152px tiles fit 2-up inside main's
     20px rails at 390px (390 - 40 main - 16 section = 334; 2*152 + 12 = 316) */
  .featured-podcasts{padding:1.75rem .5rem 1.5rem}
  .featured-podcast-row{justify-content:center;gap:1.2rem .75rem}
  .episode-card{max-width:none}
  /* row players gain -30/+30 + settings; drop volume/mute so progress keeps room */
  .episode-row .plyr__volume{display:none}
  .episode-row .plyr__controls button[data-plyr="mute"]{display:none}
}


/* ================================================================
   RESTYLE PASS 3 (2026-07-17) — mobile person stack + About prose.
   ================================================================ */

/* BLOCKER fix: the two-column person profile grid never collapsed on
   mobile, crushing the bio card and Recent Episodes into ~170px columns.
   Stack them full-width below the tablet breakpoint. */
@media (max-width: 768px) {
  .person-profile .person-layout {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* About / default-template prose: reading-width cap + vertical rhythm.
   default.antlers.html wraps markdown in <article class="page-prose">
   (about-us is the only page on the default template). */
.page-prose {
  max-width: 68ch;
  margin-left: 0;
}
.page-prose > h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
  margin: 2rem 0 0.6rem;
}
.page-prose > h2:first-child {
  margin-top: 0;
}
.page-prose > p {
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 1rem;
}
.page-prose ul {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
}
.page-prose li {
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}
.page-prose a {
  color: var(--accent, #034EC8);
  text-decoration: none;
  font-weight: 600;
}
.page-prose a:hover {
  text-decoration: underline;
}

/* ---- player controls: text skip labels (-15 / +30) + live speed label ----
   Owner request: no rewind/fast-forward icons and no gear icon. The skip
   buttons read "-15" / "+30" (matching their real 15s/30s seek), and the
   settings toggle shows the CURRENT speed ("1×", "1.5×", ...) as a small pill. */
/* This theme wants transparent control backgrounds ("never a dark slab") and
   colours hover text with the accent — but Plyr still FILLS hover/open/focus
   buttons with the accent, so content rendered accent-on-accent (invisible:
   the "1×" pill vanished while the menu was open). Keep that fill transparent
   so every control's icon/label stays legible on hover and while the speed
   menu is open. (Custom property resolves regardless of stylesheet order.) */
.plyr{ --plyr-audio-control-background-hover: transparent; }
.plyr__control .plyr-skip-label,
.plyr__control .plyr-speed-label{
  font-size:.8rem;
  font-weight:700;
  line-height:1;
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  /* clicks must land on the BUTTON, not the label — Plyr's toggleMenu bails
     unless event.target is the settings button itself (its own icons use the
     same trick). Also keeps our custom skip handlers firing on the button. */
  pointer-events:none;
}
/* keep the skip buttons compact but give the numbers room */
.plyr__controls button[data-plyr="rewind"],
.plyr__controls button[data-plyr="fast-forward"]{
  width:auto;
  min-width:2.3em;
  padding-left:.35em;
  padding-right:.35em;
}
/* the settings toggle now holds the speed pill instead of a gear */
.plyr__controls button[data-plyr="settings"]{
  width:auto;
}
.plyr__controls button[data-plyr="settings"] .plyr-speed-label{
  display:inline-block;
  padding:.2em .5em;
  min-width:2.4em;
  text-align:center;
  color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:999px;
}
.plyr__controls button[data-plyr="settings"]:hover .plyr-speed-label,
.plyr__controls button[data-plyr="settings"][aria-expanded="true"] .plyr-speed-label{
  color:var(--accent);
  border-color:var(--accent);
}

/* ================================================================
   One-click speed popover (2026-07-17) — replaces Plyr's two-click
   "Speed >" submenu. player-setup.js clones the settings toggle to
   drop Plyr's own menu handler and opens this list directly: one
   click shows the speeds, one more picks + closes + updates the pill.
   ================================================================ */
.plyr__menu{position:relative}
.sio-speed-pop{
  position:absolute;bottom:calc(100% + 6px);right:0;z-index:6;
  display:flex;flex-direction:column;min-width:5.5em;padding:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 6px 18px rgba(27,36,48,.16);
}
.sio-speed-pop[hidden]{display:none}
.sio-speed-opt{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;
  border-radius:6px;padding:.4em .7em;margin:0;width:100%;
  font:inherit;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--ink-2);cursor:pointer;white-space:nowrap;
}
.sio-speed-opt:hover,.sio-speed-opt:focus{background:var(--paper);color:var(--ink);outline:none}
.sio-speed-opt.is-selected{color:var(--accent);font-weight:700}

/* ================================================================
   NAV + MASTHEAD RESTYLE (2026-07-17, takeover)
   Owner feedback: (1) "The Serious Pod Network" masthead too small;
   (2) the Podcasts dropdown (desktop) + hamburger panel (mobile) were
   still the legacy dark navy with dark-grey link text (unreadable).
   Bring both into the light paper design system. This block is last
   in the file so it wins the cascade over the legacy base rules.
   ================================================================ */

/* --- 1. Masthead: noticeably bigger on desktop, safely scaled on
        mobile so it never wraps or collides with the hamburger. --- */
@media (min-width: 769px){
  header{padding:1rem 1.5rem; row-gap:.4rem}
  header h1, header .site-title{font-size:2.1rem; line-height:1.08}
}
@media (max-width: 768px){
  header h1, header .site-title{font-size:1.35rem; line-height:1.1}
}

/* --- 2. Desktop "Podcasts" dropdown: floating light card --- */
.dropdown-menu{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 34px rgba(27,36,48,.16);
  width:300px;
  margin-left:-150px;
  padding:6px;
}
.dropdown-menu li{padding:2px}
/* .dropdown ancestor raises specificity above the legacy
   `header nav.header a` rule so links are true --ink, accent on hover */
.dropdown .dropdown-menu a{
  color:var(--ink);
  font-size:.98rem;
  font-weight:500;
  gap:.7rem;
  padding:.55rem .7rem;
  height:auto;
  line-height:1.3;
  border-radius:8px;
}
.dropdown .dropdown-menu a:hover{
  background:var(--paper);
  color:var(--accent);
}
.dropdown-menu li a img,
ul.podcast-mobile-menu li a img{
  height:38px; width:38px;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(27,36,48,.15);
}

/* --- 3. Mobile hamburger panel + podcast submenu: light card --- */
.mobile-nav{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 14px 14px;
  box-shadow:0 16px 34px rgba(27,36,48,.18);
  padding:.5rem 1rem 1rem;
}
.mobile-nav a{color:var(--ink); font-weight:600}
.mobile-nav a:hover{color:var(--accent)}
.mobile-menu > li{border-bottom:1px solid var(--line)}
.mobile-menu > li:last-child{border-bottom:none}
.mobile-menu > li > a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem .2rem; font-size:1.05rem;
}
.podcast-mobile-menu{
  margin:.15rem 0 .5rem;
  padding-left:.6rem;
  border-left:2px solid var(--line);
}
.podcast-mobile-menu li a{
  display:flex; align-items:center; gap:.6rem;
  color:var(--ink); font-weight:500; font-size:1rem;
  height:auto; line-height:1.3;
  padding:.5rem .2rem;
}
.podcast-mobile-menu li a:hover{color:var(--accent)}

/* ===== 2026-08-24: Lydia's website change requests ===== */
/* Snazzier header — deep navy bookend (pairs with the footer), gold wordmark */
header{background:linear-gradient(120deg,#0C1730 0%,#1D2B52 55%,#31406B 100%);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 2px 12px rgba(7,17,36,.35)}
header h1 a, header .site-title a{color:#FFCA26;border-bottom-color:var(--accent)}
header nav.header a{color:#D4DBED}
header nav.header a:hover{color:#FFFFFF}
.site-headshot img{border:2px solid rgba(255,255,255,.55)}

/* Meet the hosts (About page) */
.hosts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin:1.25rem 0 2rem}
.host-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 1px 6px rgba(27,36,48,.05)}
.host-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:.9rem}
.host-card h3{margin:.2rem 0 .1rem}
.host-card h3 a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent)}
.host-role{color:var(--ink-3);font-size:.9rem;margin:.15rem 0 .6rem}
.host-card p{color:var(--ink-2);font-size:.95rem;line-height:1.55}

/* ===== search (2026-08-24) ===== */
.nav-search{display:flex;align-items:center}
.nav-search form{display:flex;margin:0}
.nav-search input{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:8px;color:#fff;padding:.35rem .7rem;font-size:.95rem;width:10rem}
.nav-search input::placeholder{color:rgba(255,255,255,.55)}
.nav-search input:focus{outline:2px solid #FFCA26;background:rgba(255,255,255,.18)}
.podcast-mobile-menu .nav-search input{width:100%;background:rgba(0,0,0,.06);border-color:var(--line);color:var(--ink)}
.podcast-mobile-menu .nav-search input::placeholder{color:var(--ink-3)}
.search-page-form{display:flex;gap:10px;margin:1rem 0 1.5rem}
.search-page-form input{flex:1;max-width:34rem;padding:.6rem .9rem;border:1px solid var(--line);border-radius:10px;font-size:1.05rem;background:var(--panel);color:var(--ink)}
.search-page-form button{padding:.6rem 1.1rem;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.search-results{list-style:none;padding:0;margin:0}
.search-hit{padding:.7rem 0;border-bottom:1px solid var(--line)}
.search-hit-title{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent)}
.search-hit-meta{display:block;color:var(--ink-3);font-size:.9rem;margin-top:.15rem}
.search-none,.search-hint{color:var(--ink-2)}
.error-page{text-align:center;padding:2.5rem 0}
.error-page .search-page-form{justify-content:center}
.error-links a{color:var(--ink);border-bottom:2px solid var(--accent);text-decoration:none}
.nav-search-mobile{padding:.4rem 0}
.nav-search-mobile input{width:100%;background:rgba(0,0,0,.05);border:1px solid var(--line);color:var(--ink)}
.nav-search-mobile input::placeholder{color:var(--ink-3)}
.nav-search-mobile input:focus{outline:2px solid var(--accent);background:#fff}

/* ================================================================
   LAUNCH POLISH (2026-10-13, pre-flip audit, team LOOKS).
   Last in the file so it wins the cascade. Desktop players and the
   desktop header are deliberately left as they were.
   ================================================================ */

/* ---- text-safe show colours ----
   --accent is the brand colour (borders, underlines, player fill).
   --accent-ink is the same hue darkened where needed so TEXT in it meets
   WCAG AA (>= 4.5:1) on white: GG #C85347 was 4.4:1 and DOD #C88F0A 2.8:1. */
:root{--accent-ink:#B23A33;--ink-3:#69727F}
.show-opening-arguments{--accent-ink:#034EC8}
.show-where-theres-woke{--accent-ink:#117A83}
.show-gavel-gavel{--accent-ink:#B0433A}
.show-dear-old-dads{--accent-ink:#8A6200}
.show-serious-inquiries-only{--accent-ink:#111111}

.episode-nav a{color:var(--accent-ink)}
.episode-single .episode-description a{color:var(--accent-ink)}
.podcast-button-patreon{color:var(--accent-ink)}
.podcast-button:hover,
.podcast-description ul li a.podcast-button:hover{color:var(--accent-ink)}

/* ---- 2. pagination: light pills, readable for every show ---- */
.pagination{gap:.75rem 1rem}
.pagination a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem 1.05rem;border-radius:8px;
  background:var(--panel);color:var(--accent-ink);
  border:1.5px solid var(--line);
  font-weight:700;line-height:1.2;text-decoration:none;
  box-shadow:0 1px 2px rgba(27,36,48,.05);
}
.pagination a:hover,
.pagination a:focus-visible{background:var(--panel);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 2px 8px rgba(27,36,48,.10)}
.pagination-jump a{min-height:38px;padding:.35rem .9rem;font-size:.88rem}
.pagination-status{color:#5B6472}

/* ---- 6a. episode number tag (OA1304, VR46, GG12) on the date line ---- */
.episode-number-tag{
  display:inline-block;vertical-align:baseline;white-space:nowrap;
  padding:.04em .45em;border-radius:4px;
  border:1px solid var(--line);
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background:var(--panel);color:var(--accent-ink);
  font-size:.86em;font-weight:700;letter-spacing:.02em;line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.episode-row-meta{color:var(--ink-3)}
.episode-byline{color:#5B6472}
.episode-byline a{color:var(--accent-ink);white-space:nowrap}

/* ---- 6b. homepage one-line intro under the header ---- */
.hero{padding:0}
.hero-tagline{
  margin:2rem 0 .25rem;max-width:60ch;
  font-size:1.15rem;line-height:1.5;color:var(--ink-2);text-align:left;
}

/* ---- 3a. footer: labelled social links in a wrapping row ----
   Each link already carries title + aria-label ("Opening Arguments on
   Reddit"); the caption shows that title so the two Bluesky and two
   Reddit icons can be told apart without hovering. */
footer.site-footer{padding:2.25rem 1rem 1.75rem}
.socials{
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;gap:1.1rem 1.25rem;margin:0 auto;max-width:720px;
}
.socials a{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  width:8.75rem;padding:.6rem .35rem .55rem;border-radius:10px;
  color:#C9D1E3;font-size:.78rem;font-weight:600;line-height:1.3;
  text-align:center;text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
.socials a::after{content:attr(title)}
.socials a:hover,.socials a:focus-visible{background:rgba(255,255,255,.07);color:#fff}
.socials img{height:40px;width:40px;object-fit:contain;margin:0}
.socials img:hover{transform:none}
.socials a:hover img{transform:scale(1.06)}
.site-footer p{margin-top:1.5rem}

/* ---- 4. About page: centred column, real title, 3-up hosts ---- */
.page-prose{max-width:1040px;margin:0 auto;padding:2.75rem 0 1rem}
.page-prose > h1,
.page-prose > h2,
.page-prose > p,
.page-prose > ul{max-width:720px;margin-left:auto;margin-right:auto}
.page-prose > h1{
  font-size:2.25rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink);
  margin-top:0;margin-bottom:1.25rem;
}
.page-prose > h1 + h2,
.page-prose > h2:first-child{margin-top:0}
.page-prose > h2{font-size:1.4rem;margin-top:2.25rem;margin-bottom:.7rem}
.page-prose a{color:var(--accent-ink)}
/* the show list: each show gets its own colour rule, like the home tiles */
.page-prose > ul{list-style:none;padding:0;margin-bottom:1.25rem}
.page-prose > ul > li{
  margin:0 0 .85rem;padding:.1rem 0 .1rem 1rem;
  border-left:3px solid var(--line);
}
.page-prose > ul > li:has(a[href="/podcasts/opening-arguments"]){border-left-color:#034EC8}
.page-prose > ul > li:has(a[href="/podcasts/where-theres-woke"]){border-left-color:#117A83}
.page-prose > ul > li:has(a[href="/podcasts/serious-inquiries-only"]){border-left-color:#111111}
.page-prose > ul > li:has(a[href="/podcasts/gavel-gavel"]){border-left-color:#C85347}
.page-prose > ul > li:has(a[href="/podcasts/dear-old-dads"]){border-left-color:#C88F0A}
.page-prose a[href="/podcasts/opening-arguments"]{color:#034EC8}
.page-prose a[href="/podcasts/where-theres-woke"]{color:#117A83}
.page-prose a[href="/podcasts/serious-inquiries-only"]{color:#111111}
.page-prose a[href="/podcasts/gavel-gavel"]{color:#B0433A}
.page-prose a[href="/podcasts/dear-old-dads"]{color:#8A6200}
/* hosts: three across on desktop (no orphan), one column on phones */
.page-prose .hosts-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin:1.25rem 0 2.25rem;
}
.host-card{display:flex;flex-direction:column;padding:18px}
.host-card h3{font-size:1.15rem;margin:.1rem 0 .15rem}
.host-role{color:var(--ink-3);font-size:.88rem;line-height:1.4}
.host-card p:last-child{margin-bottom:0}
.page-prose .hosts-grid + p{margin-top:0}
/* "Meet the hosts" heads the wider hosts grid, so it lines up with the grid */
.page-prose > h2:has(+ .hosts-grid){max-width:none}

/* ---- 5. Contact: no empty gap, plain heading, copy beside the form ---- */
.contact-page{padding:2.5rem 0 1rem}
.contact-page .container{max-width:1000px;padding:0}
.contact-hero .container{padding-bottom:1.75rem}
.contact-page .happy-title{
  display:block;margin:0 0 .75rem;padding:0;text-align:left;
  font-family:inherit;font-size:2.25rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--ink);text-shadow:none;
}
.contact-intro{max-width:62ch;font-size:1.1rem;line-height:1.6;color:var(--ink-2)}
.contact-layout{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:2.5rem;align-items:start;
}
.contact-copy h2{font-size:1.3rem;line-height:1.3;color:var(--ink);margin:0 0 .6rem}
.contact-copy p{color:var(--ink-2);line-height:1.6;margin:0 0 .9rem}
.contact-list{list-style:none;padding:0;margin:0 0 1.1rem}
.contact-list li{
  color:var(--ink-2);line-height:1.5;margin:0 0 .7rem;
  padding:.1rem 0 .1rem .85rem;border-left:3px solid var(--line);
}
.contact-list li strong{color:var(--ink)}
.contact-note{font-size:.92rem;color:var(--ink-3)}
.contact-form-card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1.9rem 2rem;box-shadow:0 2px 10px rgba(27,36,48,.06);
}
.contact-field label{color:var(--ink)}
.contact-field input,.contact-field textarea,.contact-field select{border-color:#D3D0C8;background:#FDFDFC}
.contact-submit-button{background:#1B2430}
.contact-submit-button:hover{background:#2A3547;color:#FFCA26}
@media (max-width:960px){
  .contact-layout{grid-template-columns:1fr;gap:1.5rem}
}

/* search box: let the input shrink so the button stays inside the column */
.search-page-form input{min-width:0}

/* ---- person page: socials pills may wrap (no sideways scroll) ---- */
.person-social-label{white-space:normal}
.person-social-link{max-width:100%}

/* ---- 3b. phone + tablet header: one compact bar, no dead navy band ---- */
@media (max-width:768px){
  header{
    height:64px;padding:0 1rem;
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px;
    justify-items:start;align-items:center;gap:0 .75rem;
  }
  header h1, header .site-title{grid-column:1;grid-row:1;justify-self:start;text-align:left;font-size:1.3rem}
  button.hamburger{grid-column:2;grid-row:1;justify-self:end;width:44px;height:44px}
  button.hamburger i{font-size:1.9rem}
  .mobile-nav{top:100%}
  /* show list in the open menu: drop the stacked flex gap + global li margin
     (each row was 86px tall); rows stay >= 54px, a comfortable tap target */
  .mobile-nav .podcast-mobile-menu{gap:0}
  .mobile-nav .podcast-mobile-menu li{margin:0}
  .nav-search-mobile form{width:100%}
  main{padding-top:64px}
}

/* ---- 1 + 3 + phone spacing (<= 600px) ---- */
@media (max-width:600px){
  main{padding-left:16px;padding-right:16px}

  /* 1a. audio player: seek bar gets its own full-width line on top; the
     buttons sit underneath. Volume is hidden (phones use their own volume
     buttons; iOS ignores page volume anyway). */
  /* .plyr.plyr--audio: plyr.css loads after this file, so out-rank it */
  .plyr.plyr--audio .plyr__controls{
    flex-wrap:wrap;justify-content:flex-start;
    padding:6px 8px 4px;row-gap:0;
  }
  .plyr.plyr--audio .plyr__controls .plyr__controls__item.plyr__progress__container{
    order:-1;flex:1 0 100%;margin:0;padding:6px 4px 2px;
  }
  .plyr--audio .plyr__volume,
  .plyr--audio .plyr__controls [data-plyr="mute"]{display:none}
  .plyr--audio .plyr__controls > .plyr__controls__item:first-child{margin-right:2px}
  .plyr--audio .plyr__controls .plyr__time{margin-left:auto}
  .plyr--audio .plyr__controls .plyr__menu{margin-left:2px}

  /* 1b. list rows (home + show pages): art + title side by side, then the
     description, date line and player at the row's full width */
  .episode-row{
    display:grid;grid-template-columns:48px minmax(0,1fr);
    column-gap:12px;row-gap:0;padding:14px 14px 10px;
  }
  .episode-row-body{display:contents}
  .episode-row-body > *{grid-column:1 / -1}
  .episode-row-art{grid-column:1;grid-row:1;align-self:start}
  .episode-row-art img.episode-row-logo{width:48px;height:48px}
  .episode-row-body > .episode-row-title{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:1rem}
  .episode-row-desc{margin-top:.6rem}
  .episode-row .plyr{margin-top:.5rem}

  /* episode page: less chrome around the card so the player has room */
  .episode-list-container{margin:1.25rem auto 3rem;padding:0}
  .episode-single{padding:16px 14px;gap:.7rem}
  .episode-single .episode-byline{margin-bottom:.2rem}
  .episode-single .episode-title{font-size:1.4rem}

  /* show pages: same rails as the rest of the page */
  .podcast-hero .episode-list-container{margin-top:2rem}

  /* phone hero + About + Contact */
  .hero-tagline{font-size:1rem;margin-top:1.5rem}
  .page-prose{padding-top:1.75rem}
  .page-prose > h1{font-size:1.8rem}
  .page-prose .hosts-grid{grid-template-columns:1fr;gap:14px}
  .host-card{
    display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:14px;
    align-items:center;padding:14px;
  }
  .host-card > a:first-child{grid-column:1;grid-row:1 / span 2;align-self:start}
  .host-card .host-photo{margin:0;border-radius:50%}
  .host-card h3{grid-column:2;grid-row:1;align-self:end}
  .host-card .host-role{grid-column:2;grid-row:2;align-self:start;margin-bottom:0}
  .host-card > p:last-child{grid-column:1 / -1;margin-top:.8rem}
  .contact-page{padding-top:1.5rem}
  .contact-page .happy-title{font-size:1.8rem}
  .contact-form-card{padding:1.25rem 1rem}

  /* person page: lighter rails */
  .person-profile.container{padding:1.25rem 0}
  .person-main .person-card{padding:1.25rem}
  .person-sidebar{padding:1.25rem}

  /* 3a. footer captions: two per line on a phone */
  .socials{gap:.6rem .5rem}
  .socials a{width:9.5rem}
}

/* ================================================================
   LAUNCH POLISH 2 (2026-10-13, pre-flip audit-fix2, team POLISH).
   Last in the file so it wins the cascade.
   ================================================================ */

/* ---- episode notes: lists sit inside the card ----
   The global reset (* {padding:0}) left numbered lists with no indent, so
   "1." to "5." sat on the card border; a stray global "ul {list-style:none}"
   also hid bullets. */
.episode-single .episode-description ol,
.episode-single .episode-description ul{padding-left:1.6em;margin:0 0 .9rem}
.episode-single .episode-description ol{list-style:decimal outside}
.episode-single .episode-description ul{list-style:disc outside}
.episode-single .episode-description li{margin:.3rem 0;padding-left:.2em}
.episode-single .episode-description li > p{margin:0}
.episode-single .episode-description li > p + p{margin-top:.5rem}

/* ---- pagination: Newest / Oldest jump buttons are full 44px tap targets ---- */
.pagination-jump a{min-height:44px}

/* ---- contact (guest form): First/Last name stack on phones with the same
   gap as every other field (the grid gap was adding to the field margin) ---- */
.contact-field-group{row-gap:0}

/* ---- 404: breathing room between heading, intro, search and show links ---- */
.error-page h1{font-size:2rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 .85rem}
.error-page > p{max-width:62ch;margin:0 auto 1.25rem;line-height:1.6}
.error-page .error-links{line-height:2;color:var(--ink-2)}

/* ---- short pages (404, Contact at tablet width): no pale band under the
   footer. The canvas below the body is painted in the footer's ink, so the
   footer simply runs to the bottom of the window. (body keeps its own paper
   background, so nothing else changes; a dark rubber-band overscroll at the
   top matches the navy header.) ---- */
html{background:var(--ink)}

/* ---- person page social pills: rounded box rather than a stretched pill
   if a long label ever wraps; smaller type on phones so
   "Patreon (Serious Inquiries Only)" fits on one line ---- */
.person-social-link{border-radius:1.25rem;line-height:1.3}

@media (max-width:600px){
  .error-page{padding:1.75rem 0 1rem}
  .error-page h1{font-size:1.55rem;margin-bottom:.75rem}
  .person-social-link{font-size:.9rem;padding:.45rem .8rem}
}