/* ==========================================================================
   THE READING ROOM: the meadow's flat dot-screened press, cut down to one
   long page of shelves.  Tokens copied verbatim from the meadow's
   bonus-level.css :root (see abode-landing/assets/house-press.css).
   No cards, no pills, no soft shadows; things are square unless an
   illustration has a reason to throw them.  No inline styles anywhere:
   this site's CSP allows stylesheets from 'self' only.
   ========================================================================== */

:root {
  color-scheme: light;
  --paper: #f1ead6;
  --paper-deep: #e8ddc2;
  --paper-lit: #f7f0dc;
  --ink: #2e3026;
  --muted: #625f50;
  --sage-deep: #3f5f43;
  --sage-soft: #aab79a;
  --raspberry: #a13e55;
  --ochre: #835817;
  --rule: #817b65;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-body: clamp(1.02rem, .95rem + .25vw, 1.14rem);
  --sheet: min(100% - 2.4rem, 74rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, #0000 0 2.1rem, #a13e5518 2.1rem 2.2rem, #0000 2.2rem),
    radial-gradient(circle, #2e302612 0 .55px, #0000 .7px);
  background-size: auto, 5px 5px;
  background-repeat: no-repeat, repeat;
  background-blend-mode: multiply;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--text-body);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.5rem + 4.6vw, 5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.5rem); line-height: 1.2; }
p { margin: .7rem 0 0; text-wrap: pretty; }
strong { font-weight: 650; }
a { color: var(--sage-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--raspberry); }
:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 3px; }
code, .mono { font-family: var(--mono); font-size: .86em; }
.sheet { width: var(--sheet); margin-inline: auto; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 5; padding: .5rem .8rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 1rem; }

.office {
  font-family: var(--mono);
  font-size: .68rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.kicker { margin: 0 0 .45rem; color: var(--muted); font-size: .9rem; font-style: italic; }

/* --- running head ------------------------------------------------------- */

.running-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .4rem 1.6rem; width: var(--sheet); margin: 0 auto; padding: 1.1rem 0 .55rem;
  border-bottom: 2px solid var(--ink); font-size: .92rem;
}
.running-head .home { font-style: italic; }
.running-head .home::before { content: "← "; font-style: normal; }
.running-head nav { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.running-head nav a { color: var(--ink); font-style: italic; }
.running-head nav a:hover { color: var(--raspberry); }
.running-head .folio { color: var(--muted); font-style: italic; }

/* --- title page ---------------------------------------------------------- */

.title-page { width: var(--sheet); margin: 0 auto; padding: 2.6rem 0 1rem; display: grid; gap: 1.6rem 3rem; align-items: end; }
@media (min-width: 62rem) { .title-page { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.title-page .lede { margin-top: 1rem; font-size: 1.28em; line-height: 1.4; max-width: 34rem; }
.title-page .byline { margin-top: 1.1rem; color: var(--muted); font-style: italic; }
.frontis { margin: 0; }
.frontis svg { width: 100%; }
.frontis figcaption { margin-top: .55rem; color: var(--muted); font-size: .84rem; font-style: italic; line-height: 1.4; }
.frontis figcaption::before { content: "Frontispiece. "; color: var(--ochre); font-style: normal; font-variant: small-caps; letter-spacing: .05em; }

.prose { width: var(--sheet); margin: 0 auto; }
.cols .prose { width: auto; margin: 0; }
.prose .measure { max-width: 44rem; }

.cols { width: var(--sheet); margin: 2.2rem auto 0; display: grid; gap: 1.8rem 3rem; }
@media (min-width: 62rem) { .cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.permit {
  padding: 1rem 1.1rem 1.1rem;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--paper-deep) 48%, transparent);
  box-shadow: .45rem .45rem 0 var(--ochre);
}
.permit .office { color: var(--ochre); margin: 0; }
.permit p { margin-top: .5rem; }

.howto { margin: .8rem 0 0; padding: 0; list-style: none; }
.howto li { padding: .5rem 0 .5rem 1.1rem; border-left: 3px solid var(--sage-soft); margin-top: .5rem; }
.howto li strong { font-style: italic; font-weight: 600; }

.shelf-ledger { margin: 1.4rem 0 0; padding: 0; list-style: none; max-width: 40rem; }
.shelf-ledger li { display: flex; align-items: baseline; gap: .4rem; padding: .18rem 0; }
.shelf-ledger a { font-style: italic; }
.shelf-ledger .dots { flex: 1 1 2rem; min-width: 1.2rem; border-bottom: 1.5px dotted var(--rule); transform: translateY(-.28em); }
.shelf-ledger .n { font-family: var(--mono); font-size: .9rem; color: var(--muted); }

.slug { width: 3.6rem; height: .34rem; margin: 3.2rem auto; border: 1px solid var(--ink); background: var(--ochre); box-shadow: 3px 3px 0 var(--raspberry); }

/* --- shelves ------------------------------------------------------------- */

.shelf { width: var(--sheet); margin: 0 auto; }
.shelf > header { border-top: 2px solid var(--ink); padding-top: 1.1rem; display: grid; gap: .8rem 3rem; }
@media (min-width: 62rem) { .shelf > header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.shelf > header .intro { max-width: 40rem; }
.shelf-group { margin-top: 2.2rem; }
.shelf-group > h3 { font-style: italic; font-size: 1.25rem; padding-bottom: .35rem; border-bottom: 1.5px solid var(--rule); }
.shelf-group > .group-note { margin: .45rem 0 0; color: var(--muted); font-style: italic; max-width: 40rem; }

.works { margin: 0; padding: 0; list-style: none; }
.work { padding: 1.15rem 0 1.2rem; border-bottom: 1.5px dotted var(--rule); }
.work:last-child { border-bottom: 0; }
.work .id { margin: 0; color: var(--muted); }
.work h3 { margin-top: .25rem; }
.work h3 a { color: var(--ink); text-decoration-color: var(--rule); }
.work h3 a:hover { color: var(--raspberry); }
.work .facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; margin-top: .55rem; font-size: .92rem; }
.work .facts .count { color: var(--muted); font-style: italic; }
.work .facts .warn { color: var(--raspberry); font-style: italic; }
.work .facts .warn.none { color: var(--muted); }
.work .blurb { max-width: 46rem; }
.work .doors { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .8rem; }
.work .doors a { font-style: italic; }
.work .doors a.primary { color: var(--raspberry); }
.work .doors a.primary:hover { color: var(--ink); }
.work details { margin-top: .6rem; max-width: 46rem; }
.work summary { cursor: pointer; color: var(--muted); font-style: italic; font-size: .9rem; }
.work details p { margin-top: .4rem; font-size: .9rem; color: var(--muted); }
.work .label-note { margin-top: .6rem; padding: .35rem .7rem; border-left: 3px solid var(--ochre); color: var(--ink); font-style: italic; max-width: 46rem; }

.rate {
  display: inline-block; padding: .08rem .4rem .02rem; border: 1.5px solid currentColor;
  font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.rate-general { color: var(--sage-deep); }
.rate-teen { color: var(--ochre); }
.rate-mature { color: var(--raspberry); }
.rate-explicit { color: var(--paper); background: var(--raspberry); border-color: var(--raspberry); }
.rate-notrated { color: var(--muted); }

.by-claude .id::after { content: " · written by Claude models"; color: var(--sage-deep); }

/* --- the willow ----------------------------------------------------------
   The twelve works of the Can't Rewind Verse hang from one tree: a drooping
   strand with leaves runs down the left gutter of each entry (a tiled SVG,
   so it stretches with the text), and the frontispiece above is the tree. */

.willow .works { --strand: 3.3rem; }
.willow .work {
  position: relative;
  padding-left: calc(var(--strand) + .6rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' viewBox='0 0 40 120'%3E%3Cpath d='M20 0 C27 20 12 40 20 60 C27 80 12 100 20 120' fill='none' stroke='%233f5f43' stroke-width='1.6'/%3E%3Cpath d='M23 17 C30 11 36 13 38 19 C32 23 26 23 23 17Z' fill='%23aab79a' stroke='%233f5f43' stroke-width='1'/%3E%3Cpath d='M15 52 C8 46 3 48 1 54 C7 58 13 58 15 52Z' fill='%23aab79a' stroke='%233f5f43' stroke-width='1'/%3E%3Cpath d='M23 85 C30 79 36 81 38 87 C32 91 26 91 23 85Z' fill='%23aab79a' stroke='%233f5f43' stroke-width='1'/%3E%3Cpath d='M15 112 C8 106 3 108 1 114 C7 118 13 118 15 112Z' fill='%23aab79a' stroke='%233f5f43' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: 0 0;
  background-size: var(--strand) calc(var(--strand) * 3);
}
.willow .work .id { color: var(--sage-deep); }
.willow .work .tag-part {
  position: absolute; left: .55rem; top: .95rem; width: 2.2rem; height: 1.45rem;
  display: grid; place-items: center; background: var(--sage-deep); color: var(--paper);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 2px 2px 0 var(--ochre);
}

/* --- colophon ------------------------------------------------------------- */

.colophon { width: var(--sheet); margin: 4rem auto 0; padding: 1.6rem 0 2.6rem; border-top: 2px solid var(--ink); color: var(--muted); font-size: .88rem; font-style: italic; text-align: center; }
.colophon::before { content: ""; display: block; width: 5.2rem; aspect-ratio: 420 / 589; margin: -.2rem auto .8rem; background: center / contain no-repeat url("../abode/assets/raccoon-key-printers-device.webp"); }
.colophon p { max-width: 52rem; margin-inline: auto; }
.colophon strong { color: var(--ink); font-style: normal; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  html { background-image: none; }
  .running-head nav, .skip-link { display: none; }
  .work { break-inside: avoid; }
}