@font-face { font-family: "Klee One Book"; src: url("KleeOne-book.ttf") format("truetype"); font-style: normal; font-weight: 400; }
@font-face { font-family: "Ilta Mono"; src: url("IltaMono-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; }
@page { margin: 7%; }
html, body { color: #2b1c22; background: #f7f0e8; }
body { margin: 0; padding: 0; font-family: Georgia, "Times New Roman", "Klee One Book", serif; line-height: 1.55; }
.opening { break-after: page; page-break-after: always; min-height: 38em; box-sizing: border-box; padding: 7em 3em 3em; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.opening h1 { margin: 0; color: #6f1833; font: 400 3.2em/1.3 "Klee One Book", serif; letter-spacing: .13em; }
.opening p:nth-of-type(1), .opening p:nth-of-type(2) { font-family: "Ilta Mono", monospace; text-transform: lowercase; letter-spacing: .22em; }
.opening p:nth-of-type(1) { color: #946c3e; margin-top: 1.8em; }
.opening p:nth-of-type(2) { color: #49664e; margin-top: 3em; }
.opening p:nth-of-type(3) { max-width: 22em; margin: 4em auto 0; color: #58464c; font-style: italic; }
.poem-page { break-before: page; page-break-before: always; break-inside: avoid-page; page-break-inside: avoid; margin: 0; padding: 0; }
.folio { box-sizing: border-box; min-height: 38em; min-height: 88vh; margin: 0; padding: 2.2em 1.8em 2em; display: flex; flex-direction: column; border: .08em solid #d4b896; background: #fbf6ef; position: relative; }
h2 { margin: 0 0 1.4em; padding: 0 0 .65em; border-bottom: .08em solid #c89b69; color: #49664e; font: 400 .68em/1.35 "Ilta Mono", monospace; letter-spacing: .035em; overflow-wrap: anywhere; }
.poem-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1em; align-items: center; flex: 1; min-width: 0; }
.jp-poem { justify-self: center; align-self: center; writing-mode: vertical-rl; text-orientation: upright; font: 400 1.48em/1.75 "Klee One Book", serif; letter-spacing: .045em; height: 9.2em; color: #23151a; min-width: 0; max-width: 100%; }
.jp-poem span { display: block; }
.poem-notes { min-width: 0; max-width: 100%; padding: .5em 0; overflow-wrap: anywhere; }
.poem-notes > p:first-child { margin: 0 0 1.25em; color: #6f1833; font: 400 .64em/1.65 "Klee One Book", serif; overflow-wrap: anywhere; }
blockquote { box-sizing: border-box; max-width: 100%; margin: 0 0 1.35em; padding: .75em .8em; background: #f1e3d6; color: #6f1833; text-align: center; font-size: .9em; line-height: 1.45; font-style: italic; overflow-wrap: anywhere; }
blockquote p { margin: 0; }
.poem-notes > blockquote + p { margin: 0; color: #493b40; font-size: .7em; line-height: 1.45; overflow-wrap: anywhere; }
.mark { position: absolute; bottom: 1.2em; right: 1.5em; color: #c89b69; font-size: .7em; }

@media (prefers-color-scheme: dark) {
  html, body { color: #eadfd8; background: #0b090d; }
  .folio { background: #120d12; border-color: #5e3441; }
  .opening h1, .jp-poem { color: #f0dfd6; }
  .subtitle, .mark { color: #d49a4e; }
  .byline, h2 { color: #8fbf78; }
  .opening p:nth-of-type(3), .poem-notes > blockquote + p { color: #cdbec3; }
  h2 { border-color: #704058; }
  .poem-notes > p:first-child, blockquote { color: #e29aae; }
  blockquote { background: #25151e; }
}

@page { size: A5 portrait; margin: 0; }
.cover-page { box-sizing: border-box; display: grid; place-items: center; break-after: page; page-break-after: always; background: #120d12; }
.cover-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reader-nav { font-family: "Ilta Mono", monospace; font-size: .72rem; text-align: center; margin: 0 auto 1rem; }
.reader-nav a { color: #8fbf78; }
@media screen {
  html { background: #0b090d; }
  body { max-width: 828px; margin: 0 auto; padding: 1.25rem; background: #0b090d; }
  .cover-page, .opening, .poem-page { min-height: min(1224px, calc(100vh - 2.5rem)); margin: 0 0 1.5rem; box-shadow: 0 22px 60px rgba(0,0,0,.42); }
  .cover-page { min-height: auto; }
  .cover-page img { height: auto; }
}
@media print {
  html, body { width: 148mm; margin: 0; padding: 0; background: #f7f0e8 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .reader-nav { display: none; }
  .cover-page, .opening, .poem-page { box-sizing: border-box; width: 148mm; height: 210mm; min-height: 210mm; margin: 0; padding: 0; overflow: hidden; break-after: page; page-break-after: always; }
  .cover-page img { width: 148mm; height: 210mm; object-fit: cover; }
  .opening { padding: 24mm 16mm; }
  .folio { height: 210mm; min-height: 0; padding: 14mm 12mm 12mm; }
}