/* Framing only: native markup, photo, title and body remain renderer-owned. */
html, body { color-scheme: dark; background: transparent !important; overflow: auto !important; }
html.standalone { background: #040106 !important; }
#letter-footer, #letter-hint { display: none !important; }
body > :not(#letter-panel):not(script):not(style) { display: none !important; }
body.letter-viewing #letter-panel.typeset-reader.is-open {
  position: relative; inset: auto; transform: none; width: 100%; min-height: 100vh;
  padding: 24px; box-sizing: border-box; display: flex; opacity: 1; container-type: normal;
}
#letter-panel.typeset-reader #letter-inner.has-letter-photo {
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto;
  gap: 22px; padding: 20px; max-height: none; overflow: visible;
  background: radial-gradient(ellipse at 50% 20%, #351323e8, #100810e8 75%) !important;
  border: 1px solid #ffc3dc25; box-shadow: 0 24px 80px #0005;
  --dh-reader-ink: #f7deeb; --dh-reader-surface: #100810; --dh-reader-accent: #ba7394;
}
#letter-panel.typeset-reader .letter-photo-wrap { justify-self: center; max-width: 190px; max-height: none; transform: rotate(-3deg); }
#letter-panel.typeset-reader .letter-photo-wrap img { display: block; max-height: 190px; width: 100%; object-fit: cover; }
#letter-panel.typeset-reader .letter-text-wrap { overflow: visible; max-height: none; padding: 0; width: 100%; }
#letter-panel.typeset-reader #letter-title { font-size: 28px; margin-bottom: 16px; }
#letter-panel.typeset-reader #letter-body { font-size: 18px; line-height: 1.7; }
@media (min-width: 800px) {
  body.letter-viewing #letter-panel.typeset-reader.is-open { max-width: 960px; margin: auto; }
  #letter-panel.typeset-reader #letter-inner.has-letter-photo { grid-template-columns: .7fr 1fr; gap: 40px; }
  #letter-panel.typeset-reader .letter-photo-wrap { max-width: 300px; }
  #letter-panel.typeset-reader .letter-photo-wrap img { max-height: 360px; }
  #letter-panel.typeset-reader #letter-body { font-size: 22px; }
}
@media (max-width: 360px) {
  body.letter-viewing #letter-panel.typeset-reader.is-open { padding: 10px; }
  #letter-panel.typeset-reader #letter-inner.has-letter-photo { padding: 12px; }
}