/* Readability and input fixes for the original Soda Pop layout. */
:root { --muted: #b6a9c7; }
.nav-pill, .hero-note, .whisper { color: #ff936f; }
.footer-credit { color: var(--muted); }
.gate-btn { opacity: 1; animation-name: accessibleGatePulse; }
@keyframes accessibleGatePulse {
  0%, 100% { border-color: #ff936f; }
  50% { border-color: #ffe066; box-shadow: 0 0 18px #ff5c3538; }
}
:focus-visible { outline: 2px solid var(--cold); outline-offset: 5px; }
.nav-btn { min-height: 44px; justify-content: center; }
.compare-wrap { overflow-x: auto; }
.compare-table { min-width: 480px; }
.kr-line { display: inline-block; max-width: 100%; }
.kr-line::after {
  background: #240a19; border: 1px solid var(--sweet); color: #fff;
  white-space: normal; width: 240px; max-width: calc(100vw - 48px);
}
.kr-line:focus-visible::after, .kr-line.is-open::after { opacity: 1; }
.author-avatar { width: 140px; height: 140px; border-radius: 12px; }
.site-footer .author-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.site-footer .author-meta { max-width: 42rem; }
body.page-hidden *, body.page-hidden *::before, body.page-hidden *::after {
  animation-play-state: paused !important;
}
@media (max-width: 700px) {
  .site-nav { flex-wrap: wrap; gap: .5rem; padding: .7rem 1rem; }
  .site-nav > div:first-child { flex-wrap: wrap; gap: .3rem !important; min-width: 0; }
  .nav-logo { font-size: 1.2rem; }
  .nav-pill { font-size: .55rem; padding: .1rem .4rem; }
  .nav-right { flex-wrap: wrap; }
  .loss-tag, .cultural-tag, .diff-tag, .philosophy-tag { flex-direction: column; }
  .tag-label { white-space: normal; }
  .tag-text { min-width: 0; overflow-wrap: anywhere; }
  .nav-btn { font-size: .65rem; }
  .author-avatar { width: 120px; height: 120px; }
  .kr-line::after {
    position: static; transform: none; display: none; width: auto;
    margin: .35rem 0; opacity: 1;
  }
  .kr-line:focus-visible::after, .kr-line.is-open::after {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html, body, a, button, [role="button"] { cursor: auto; }
  #cursor-bubble, .cursor-trail, .burst-ring, .burst-particle { display: none !important; }
  .dissolve { opacity: 1 !important; filter: none !important; transform: none !important; }
}
@media print {
  :root { --text: #111; --muted: #333; --fizz: #111; --cold: #111; --sweet: #111; --soda: #111; }
  html, body { background: white !important; color: #111 !important; }
  #soda-gate, .site-nav, #bubblesLayer, #cursor-bubble, #heroBubbles,
  .cursor-trail, .burst-ring, .burst-particle, audio, .hero-note, .back-home { display: none !important; }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; animation: none !important; transition: none !important; }
  main, .wrap, .hero, .site-footer { max-width: none !important; padding: 1rem 0 !important; }
  .dissolve { opacity: 1 !important; filter: none !important; transform: none !important; }
  main *, .hero *, .site-footer * { color: #111 !important; background: transparent !important; }
  .compare-wrap { overflow: visible; }
  .compare-table { min-width: 0; font-size: 9pt; }
  .compare-table td, .compare-table th { padding: .35rem; }
  .kr-line::after { position: static; display: inline; opacity: 1; transform: none; content: ' (' attr(data-tip) ')'; border: 0; }
  h2, .section-label { break-after: avoid; }
  tr, .author-card { break-inside: avoid; }
}
