/* Shared by the served HTML and the interactive shell. No renderer styles. */
@font-face { font-family: Outfit; font-weight: 100 900; font-style: normal; font-display: optional; src: url('/fonts/outfit-normal-latin.woff2') format('woff2'); }
@font-face { font-family: Fraunces; font-weight: 400 700; font-style: normal; font-display: optional; src: url('/fonts/fraunces-normal-latin.woff2') format('woff2'); }
body { margin: 0; }
.view-cover { position: fixed; inset: 0; z-index: 1100; overflow: hidden; background: #0b0b10; color: #f8fafc; font-family: var(--font-site, Outfit, system-ui, sans-serif); }
.view-cover a { color: inherit; }
.view-cover-image { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: blur(7px) brightness(.6); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.view-cover-centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(90%, 420px); text-align: center; }
/* The cover stays dark in either site theme. Match its first paint to the
   dark-surface accent once the shared tokens arrive. */
.view-cover-load { appearance: none; border: 1px solid #ffc8bc; border-radius: 999px; padding: 17px 30px; background: var(--site-accent-on-dark, #f2a08f); color: #181315; font: 650 18px/1.2 var(--font-site, Outfit, system-ui, sans-serif); cursor: pointer; box-shadow: 0 8px 40px #0007; }
.view-cover-load:disabled { cursor: wait; opacity: .85; }
.view-cover-load:focus-visible,.view-cover-more:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.view-cover-centre p { font-size: 14px; text-shadow: 0 1px 4px black; }
.view-cover-brand { position: absolute; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px; font-size: 22px; text-decoration: none; }
.view-cover-back { position: absolute; top: 18px; left: 18px; background: #131316df; border: 1px solid #ffffff26; border-radius: 999px; padding: 10px 14px; text-decoration: none; font-size: 13px; }
.view-cover-info { position: absolute; top: 66px; left: 18px; box-sizing: border-box; width: min(418px, 46vw); max-height: calc(100% - 150px); overflow: auto; border: 1px solid #ffffff26; border-radius: 18px; padding: 16px 18px; background: #131316ef; }
.view-cover-info h1 { font: 600 22px/1.2 Fraunces, Georgia, serif; margin: 0 0 12px; }
.view-cover-info p { font-size: 13px; line-height: 1.6; }
.view-cover-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-wrap; }
.view-cover-description[data-expanded] { -webkit-line-clamp: unset; }
.view-cover-more { color: #ef8a7a; background: none; border: 0; padding: 0; cursor: pointer; }
.view-cover-info ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; font-size: 12px; }
.view-cover-info li { border: 1px solid #ffffff26; border-radius: 999px; padding: 4px 8px; }
.view-cover-noscript { position: absolute; bottom: 0; right: 18px; font-size: 12px; }
@media (max-width: 860px) {
  .view-cover-info { top: auto; bottom: 65px; left: 12px; right: 12px; width: auto; max-height: 30%; }
  .view-cover-centre { top: 36%; }
}