.reading-options[hidden] { display: none; }
.reading-options { width: 100%; }

.reading-options > summary {
  display: block; position: relative; width: fit-content; margin: 0 auto;
  list-style: none; cursor: pointer; padding: 2px 6px;
  font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 0.92rem; letter-spacing: 0.03em;
  color: var(--vizon); transition: color 0.2s ease;
}
.reading-options > summary::-webkit-details-marker { display: none; }
.reading-options > summary::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-4.5px) rotate(45deg); transition: transform 0.25s ease;
}
.reading-options[open] > summary::after { transform: translateY(-1.5px) rotate(-135deg); }
.reading-options > summary:hover, .reading-options[open] > summary { color: var(--petrol); }
.reading-options > summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.reading-panel {
  width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 12px 16px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); text-align: left;
}
.reading-options[open] > .reading-panel { animation: drawerReveal 0.25s ease; }
.reading-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.reading-choice + .reading-choice { margin-top: 4px; }
.reading-choice-label { min-width: 6.6em; font: italic 0.9rem/1.4 'EB Garamond', Georgia, serif; color: var(--vizon); }
.reading-choice button {
  min-height: 36px; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  font: italic 0.95rem/1.3 'EB Garamond', Georgia, serif;
}
.reading-choice button:hover { color: var(--petrol); }
.reading-choice button[aria-pressed="true"] { border-color: var(--petrol); color: var(--petrol); }

.reading-sample {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 36px; margin-left: 6px;
  font-family: 'EB Garamond', Georgia, serif; font-size: calc(1em * var(--reading-scale, 1)); line-height: 1; color: var(--ink-soft);
}
.reading-print {
  display: block; margin-top: 12px; min-height: 40px; padding: 5px 10px;
  border: 1px solid var(--rule); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer;
  font: italic 1rem/1.4 'EB Garamond', Georgia, serif;
}
.reading-print:hover { border-color: var(--petrol); color: var(--petrol); }
.reading-panel button:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.reading-note { margin: 10px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--vizon); }
@media (max-width: 480px) {
  .reading-panel { padding: 12px 14px; }

  .reading-choice-label { flex-basis: 100%; }
  .reading-choice + .reading-choice { margin-top: 8px; }
}

html[data-reading-size] .essay-body[data-reading-body] { font-size: calc(1em * var(--reading-scale)); }
html[data-reading-spacing] .essay-body[data-reading-body] :is(p, li, blockquote) { line-height: var(--reading-spacing); }

.print-head, .print-colophon { display: none; }
.essay-puzzle-wrap { text-align: center; margin: 38px 0 0; }
.essay-puzzle-wrap + .essay-guess-wrap { margin-top: 10px; }
@media print {
  @page { margin: 18mm; }
  html, body.is-post { background: white !important; color: black !important; }
  body.is-post { display: block; font-size: 12pt; }
  body.is-post .container { display: block; max-width: none; padding: 0; }
  body.is-post .container > :not(main), body.is-post .skip-link,
  body.is-post .essay-article > :not(.essay-card-wrapper),
  body.is-post .essay-card-wrapper > :not(.essay-header):not(.essay-body):not(.print-colophon),
  body.is-post .essay-header > :not(.essay-title-block):not(.essay-date-line):not(.print-head),
  body.is-post :is(.keep-toast, .keep-prompt, .keep-panel, .reader-translate, .snow-overlay, .rain-overlay) { display: none !important; }
  body.is-post :is(.essay-card-wrapper, .essay-header, .essay-body) { opacity: 1 !important; transform: none !important; animation: none !important; max-width: none; }
  body.is-post .essay-header { padding: 0 0 20pt; }
  body.is-post .essay-header h1 { color: black; font-size: 24pt; }
  body.is-post .essay-date-line { color: black; }

  body.is-post .print-head {
    display: flex; justify-content: space-between; gap: 12pt; align-self: stretch; margin: 0 0 30pt;
    font: 8.5pt/1.2 'EB Garamond', Georgia, serif; letter-spacing: 0.16em; text-transform: uppercase; color: black;
  }
  body.is-post .print-colophon { display: block; margin: 42pt 0 0; text-align: center; color: black; break-inside: avoid; }
  body.is-post .print-colophon p { margin: 0; color: black; }
  body.is-post .print-colophon-brand { font: italic 15pt/1.1 'Cormorant Garamond', Georgia, serif; }
  body.is-post .print-colophon .print-colophon-line { margin-top: 3pt; font: italic 9.5pt/1.3 'EB Garamond', Georgia, serif; }

  @supports (top: round(up, 1%, 1vh)) {
    body.is-post .essay-card-wrapper { position: relative; }
    body.is-post .print-colophon {
      position: absolute; left: 0; right: 0; top: calc(round(up, 100% + 64pt, 100vh) - 40pt);
      display: flex; flex-direction: column; justify-content: flex-end; height: 40pt; margin: 0;
    }
  }
  body.is-post .essay-body { padding: 0; }
  body.is-post .essay-body :is(p, li, blockquote, h2, h3) { color: black; orphans: 3; widows: 3; }
  body.is-post .essay-body :is(h2, h3) { break-after: avoid; }
  body.is-post .essay-body a { color: black; }
}