{% load parody_web %}<title>{{ section.title|cut:"`" }} (PDF) — {{ book.title }}</title>
<script>
/* Apply the stored theme before first paint, exactly as base.html does. This
   page loads the theme tokens but never ran this, so a reader who had chosen
   dark mode got a light PDF view — the choice was on the site and this page
   was not listening. No stored preference = follow the OS. */
(function () {
  try {
    var t = localStorage.getItem('parody-theme');
    if (t === 'dark' || t === 'light') document.documentElement.dataset.theme = t;
  } catch (e) {}
})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
{% comment %}
Chrome-free by design, but it still needs the design tokens — without them the
bar would ignore the reader's theme (and dark mode) entirely. Only tokens: the
book stylesheets style prose this page does not have.
{% endcomment %}
<link rel="stylesheet" href="{% static 'parody_web/css/tokens.css' %}">
<style>{% theme_css %}</style>
{% include "parody_web/_pdf_view_head.html" %}
<style>
  .pdf-shell { position: fixed; inset: 0; display: flex; flex-direction: column;
               background: var(--paper, #fff); color: var(--ink, #111); }
  .pdf-bar { display: flex; align-items: baseline; gap: 1rem; flex: none;
             padding: .55rem .9rem; border-bottom: 1px solid var(--rule, #ddd);
             font: 500 .9rem/1.3 var(--font-display, system-ui, sans-serif); }
  .pdf-bar .pdf-title { font-weight: 600; }
  .pdf-bar .pdf-book { color: var(--ink-muted, #666); font-size: .85rem; }
  .pdf-bar .pdf-spacer { margin-left: auto; }
  .pdf-bar a { color: inherit; text-decoration: none; opacity: .8; }
  .pdf-bar a:hover, .pdf-bar a:focus-visible { opacity: 1; text-decoration: underline; }
  /* The stage is a positioning context so a replacement can lay its own
     canvases out inside it. */
  .pdf-stage { position: relative; flex: 1 1 auto; min-height: 0; }
  .pdf-stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
</style>
<div class="pdf-shell">
  <nav class="pdf-bar">
    <span class="pdf-title">{% if section.number %}{{ section.number }} {% endif %}{{ section.title|cut:"`" }}</span>
    <span class="pdf-book">{{ book.title }}</span>
    {% include "parody_web/_pdf_view_toolbar.html" %}
    <span class="pdf-spacer"></span>
    <a href="{% section_url book chapter.slug section.slug %}">← Back to the section</a>
    {% include "parody_web/_pdf_view_download.html" %}
  </nav>
  <div class="pdf-stage" data-section-key="{{ section.key }}">
    {% include "parody_web/_pdf_view_stage.html" %}
  </div>
</div>