:root {
    color-scheme: light;
    --paper: #f6f3eb;
    --ink: #243944;
    --muted: #5e6d70;
    --blue: #365b70;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 19px/1.75 Georgia, 'Times New Roman', serif;
}
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.skip { position: absolute; top: -5rem; left: 1rem; background: var(--paper); padding: .5rem; }
.skip:focus { top: 1rem; }

.masthead {
    position: relative;
    overflow: hidden;
    background: #173e51;
    border-bottom: 6px solid #a5b5a4;
    padding: 1.6rem max(28px, calc((100vw - 904px) / 2)) 1.8rem;
}
.identity { position: relative; z-index: 1; }
.botanical {
    position: absolute;
    right: 12%;
    bottom: -80px;
    width: 230px;
    height: 350px;
    border-left: 1px solid #a5b5a450;
    transform: rotate(28deg);
    pointer-events: none;
}
.botanical i {
    position: absolute;
    width: 130px;
    height: 65px;
    border: 1px solid #a5b5a440;
    border-radius: 0 100% 0 100%;
    left: 0;
    top: 30px;
    transform: rotate(-25deg);
    background: #a5b5a407;
}
.botanical i:nth-child(2) { top: 110px; }
.botanical i:nth-child(3) { top: 190px; }
.botanical i:nth-child(4) { left: -130px; top: 70px; transform: scaleX(-1) rotate(-25deg); }
.botanical i:nth-child(5) { left: -130px; top: 150px; transform: scaleX(-1) rotate(-25deg); }
.botanical i:nth-child(6) { left: -130px; top: 230px; transform: scaleX(-1) rotate(-25deg); }
.wordmark {
    display: block;
    color: #f3f2e9;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(1.7rem, 5.5vw, 3rem);
    line-height: 1.25;
    letter-spacing: -.035em;
}
.wordmark:hover { color: #d3dccb; }
.wordmark span { font-size: .65em; font-style: italic; letter-spacing: 0; }
.identity p {
    max-width: 65ch;
    margin: .9rem auto 0;
    color: #c4d1cc;
    font-size: 18px;
    line-height: 1.55;
    text-align: center;
}

main { max-width: 1040px; margin: auto; padding: 2.5rem 32px 4rem; }
.layout { display: grid; grid-template-columns: minmax(0, 40ch) 230px; gap: 2rem; align-items: start; justify-content: center; }
h1, h2 { font-weight: normal; line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); letter-spacing: -.025em; margin: .6rem 0 2rem; }
p { margin: 0 0 1.5rem; }
time { display: block; font-size: 16px; color: var(--muted); }
.verse { font-size: 19px; line-height: 1.85; overflow-wrap: anywhere; }
.verse p { margin-bottom: 1.6rem; }
.verse h3 { font-size: 1.1em; font-weight: normal; }

/* Keep the contents beside the poem, with one quiet dividing rule. */
aside { border-left: 1px solid #d5d8cf; padding: 2rem 0 0 1.5rem; }
.index-heading { color: var(--ink); font-size: 20px; margin: 0 0 1.5rem; }
.poem-index { list-style: none; padding: 0; margin: 0; }
.poem-index li { margin: 0 0 1.1rem; font-size: 17px; line-height: 1.45; }
.poem-index time { margin-top: .3rem; font-size: 13px; color: var(--muted); }
.poem-index a { text-decoration: none; }
.poem-index a:hover { text-decoration: underline; }
.back { display: block; width: fit-content; margin-bottom: 2.5rem; font-size: 17px; text-decoration: none; }
.reading { max-width: 650px; margin: auto; }
.poem-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 3rem; font-size: 17px; }
.poem-nav a { max-width: 28ch; text-decoration: none; }
.source { margin-top: 2.5rem; font-size: 16px; }
footer {
    max-width: 1040px;
    margin: auto;
    padding: 0 32px 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 15px;
}
footer a { text-decoration: none; }

@media (max-width: 700px) {
    .masthead { padding: 1.2rem 22px 1.4rem; }
    .botanical { right: -90px; opacity: .6; }
    main { padding: 2.5rem 22px 3rem; }
    .layout { grid-template-columns: 1fr; gap: 3rem; }
    aside { border-left: 0; border-top: 1px solid #d5d8cf; padding: 1.5rem 0 0; }
    .verse { font-size: 19px; }
    .poem-nav { flex-direction: column; }
    footer { padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
    .skip, .botanical, aside, footer, .poem-nav, .back, .source { display: none; }
    body { background: white; color: black; }
    .masthead { padding-top: 0; background: white; border: 0; }
    .identity p { color: black; }
    .wordmark { font-size: 2rem; color: black; }
    main { padding: 2rem 0; }
    .layout { display: block; }
    .verse { overflow-wrap: normal; }
}

.preformatted-verse { white-space: pre-wrap; font: inherit; margin-bottom: 1.6rem; }
.all-poems { margin: 1.5rem 0 0; font-size: 17px; }
.collection > h1 { margin-bottom: 2.5rem; }
.collection-year { margin-bottom: 2.5rem; }
.collection-year h2 { color: var(--muted); font-size: 22px; margin: 0 0 1.2rem; }
.collection .poem-index time { display: inline; margin-left: 1rem; }
@media (max-width: 700px) {
    .collection .poem-index time { display: block; margin-left: 0; }
}