/* The landing page above the texts. The tokens and the base type are
   `edition.css`'s; this is only the page's own layout.

   **A cream sheet on kraft board.** These pages have neither of the reading view's
   bands, so here the board is the ground and `main` the paper on it. */
body.landing { background:var(--board) var(--grain-board) }
body.landing main { position:relative; max-width:38rem; margin:2.5rem auto;
                    padding:3rem 16px 4rem; display:block;
                    background:var(--bg) var(--grain) }
@media (max-width:40rem) { body.landing main { margin:0 auto } }
body.landing .logo { display:block; margin:0 auto 1.25rem }
/* The name printed as a block. The block is a `::before` and not the `h1`'s own
   background because the rough edge is a displacement filter (`site/_print.html`)
   and on the `h1` it would displace the letters too. A browser without the filter
   gets a square block, which is also right. */
body.landing h1 { position:relative; isolation:isolate; width:fit-content;
                  margin:0 auto 1.25rem; padding:.3em .6em; font-size:3rem;
                  line-height:1.1; font-weight:normal; color:var(--on-block) }
body.landing h1::before { content:""; position:absolute; inset:0; z-index:-1;
                          background:var(--block); filter:url(#rough-edge) }
body.landing h2 { margin:2.5rem 0 1rem; padding-bottom:.25rem; font-size:1.75rem;
                  font-weight:normal; border-bottom:1px solid var(--rule) }
body.landing h1, body.landing h2 { text-align: center }
body.landing a { color:var(--accent) }
/* The sleeve's one red line, across the sheet's corner and behind nothing. */
.red-line { position:absolute; top:0; right:0; width:min(11rem,30%); height:7rem;
            stroke:var(--sel); stroke-width:1.5; pointer-events:none }
.texts { list-style:none; margin:0; padding:0 }
.texts li { margin:0 0 1.5rem; display:flex; flex-wrap:wrap; gap:1rem 1.25rem; align-items:flex-start }
.text-about { flex:1 1 14rem; min-width:0 }
.text-cover { flex:0 1 20rem; margin:0; max-width:100% }
.text-cover img { display:block; width:100%; height:auto; border:1px solid var(--rule);
                  mix-blend-mode:var(--print) }
.text-cover figcaption { margin-top:.3rem; color:var(--dim); font-size:.8rem }
.text-title { display:block; font-size:1.75rem; line-height:1.2; margin-bottom:.35rem }
.text-by, .text-state { display:block }
.text-state { color:var(--dim); font-size:.9rem }
.text-notes { margin-top:1.5rem; color:var(--dim); font-size:.85rem }
.text-notes + .text-notes { margin-top:.5rem }
.text-notes summary { cursor:pointer }
.text-notes strong { color:var(--fg) }
.text-notes a { overflow-wrap:anywhere }