/* Approved site brand integrations. Branden's original styles.css stays unchanged. */
:root {
  --sans: Arial, Helvetica, sans-serif;
  --paper: #f2f2ef;
  --muted: #a4aba8;
  --green: #00d4aa;
  --green-soft: rgba(0, 212, 170, 0.2);
  --line: #ffffff18;
}
.lede, .chapter-panel p:last-child, .meaning-head > p:last-child,
.translation-grid p, .manifesto-copy > p:not(.eyebrow) { color: var(--muted); }
.play-button { min-height: 44px; margin-top: 18px; }
.play-button b { display: flex; align-items: center; gap: 12px; font-weight: 400; }
.play-button svg { width: 18px; height: 18px; flex: none; }
.play-button:hover b, .play-button:focus-visible b { text-decoration: underline; text-underline-offset: 5px; }
.play-button:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.story-inline-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; margin-left: 6px; color: var(--green); }
.ep-site-footer { display: block; height: auto; margin-top: auto; padding: 24px 0; border-top: 1px solid #ffffff12; background: #070a09; color: #f2f2ef; font: 16px/1.5 Arial, Helvetica, sans-serif; }
.ep-site-footer-container { width: min(calc(100% - 80px), 1200px); margin-inline: auto; }
.ep-site-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ep-site-footer-brand { min-width: 0; }
.ep-site-footer a { color: inherit; text-decoration: none; }
.ep-site-footer .ep-site-wordmark { font-size: 26px; font-weight: 500; letter-spacing: -1.2px; white-space: nowrap; }
.ep-site-wordmark span { color: #00d4aa; }
.ep-site-footer-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 6px; color: #a4aba8; font: 13px/1.5 Arial, Helvetica, sans-serif; }
.ep-site-footer-follow a { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; }
.ep-site-footer-follow svg { width: 14px; height: 14px; }
.ep-site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.ep-site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.ep-site-footer a:hover, .ep-site-wordmark:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.ep-site-footer a:focus-visible { outline: 2px solid #00d4aa; outline-offset: 4px; }
@media (max-width: 900px) {
  .ep-site-footer-container { width: calc(100% - 48px); }
  .ep-site-footer-main { align-items: flex-start; flex-direction: column; gap: 24px; }
}
@media (max-width: 700px) {
  .ep-site-footer .ep-site-wordmark { font-size: 23px; }
}

@media (max-width: 380px) {
  .ep-site-footer-container { width: calc(100% - 32px); }
  .ep-site-footer .ep-site-wordmark { font-size: 21px; }
}

.ep-site-footer-links { display: flex; flex-direction: column; align-items: flex-end; }
.ep-site-footer .ep-site-footer-heart { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: #a4aba8; font: 13px/1.5 Arial, Helvetica, sans-serif; }
.ep-site-footer-heart svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .ep-site-footer-links { align-items: flex-start; } }

/* Use the approved EP. artwork instead of the original serif lettering. */
.manifesto-mark { position: relative; border: 0; border-radius: 0; box-shadow: none; text-decoration: none; }
.manifesto-mark img { display: block; width: 100%; height: auto; }
.manifesto-mark::after { content: ""; position: absolute; inset: auto 20% 12%; height: 1px; background: #f2f2ef; opacity: 0; }
.manifesto-mark:hover::after, .manifesto-mark:focus-visible::after { opacity: 1; }
.masthead .brand:hover, .masthead .brand:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.manifesto-mark:focus-visible, .masthead .brand:focus-visible { outline: 2px solid #00d4aa; outline-offset: 4px; }

/* Give the mobile introduction and artwork their own space before playback. */
@media (max-width: 820px) {
  .intro h1 { font-size: clamp(38px, 12.5vw, 68px); }
  .cinema:not(.playing) { display: flex; flex-direction: column; min-height: 0; padding: 100px 0 64px; }
  .cinema:not(.playing) .intro { position: relative; inset: auto; order: 1; width: auto; margin: 0 24px; transform: none; }
  .cinema:not(.playing) #kleinCanvas { position: relative; inset: auto; order: 2; height: 340px; flex: none; }
  .cinema:not(.playing) .skip { bottom: 30px; }
  .sound-toggle { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; }
  .sound-toggle span:last-child { display: inline; font-size: 12px; }
  .sound-icon { display: none; }
}