:root { color-scheme: light; --ink: #111; --blue: #0000ee; --purple: #551a8b; --muted: #666; --line: #c9c9c9; --bar: #eee; --pad: 12px; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.45; }
a { color: var(--blue); text-decoration: underline; }
a:visited { color: var(--purple); }
a:hover { color: #c00; }
a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
main { box-sizing: border-box; width: min(calc(100% - 22px), 900px); margin: 0 auto; padding: 18px var(--pad) 34px; }
main > h1,
main > .meta,
main > .story-art,
main > article { max-width: 620px; }
h1 { margin: 0 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 7vw, 52px); font-weight: 400; line-height: 1.06; }
.meta { margin-bottom: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.story-art { width: min(100%, 520px); margin: 0 0 28px; }
.story-art img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.story-art figcaption { margin-top: 6px; color: var(--muted); font-size: 12px; }
article { max-width: 640px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.65; }
article p { margin: 0 0 18px; }
article p:last-child { margin-bottom: 0; }
.poem-note { margin-bottom: 7px; color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.child-poem { margin: 0 0 22px; padding: 10px 12px; border-left: 3px solid var(--line); background: #fafafa; font-size: 16px; line-height: 1.75; }
.child-poem p { margin: 0; }
@media (max-width: 460px) {
  main { padding-right: 4px; padding-left: 4px; }
  article { font-size: 18px; line-height: 1.7; }
}