/* The Meadow chapter of the shared 4840 storybook.
 *
 * Fourth pass — the raccoon with the waistcoat.
 *
 * Third pass subtracted correctly and then kept subtracting past the target,
 * arriving at beige Swiss minimalism: an unbounded 71rem broadsheet, nine
 * tracked-out monospace kickers, and every illustration parked in its own
 * grid cell.  Quiet is not the same thing as bookish.
 *
 * This pass restores the four things that actually make a page read as a
 * children's book: a BOUNDED PAGE (paper with an edge, lying on a desk), a
 * NARROW MEASURE, TEXT THAT WRAPS AROUND THE PICTURES, and a small amount of
 * unashamed ORNAMENT.  Monospace is now rationed to genuinely machine-facing
 * text, where it is a joke again.
 */
:root {
  color-scheme: light;
  --paper: #f4eede;
  --paper-deep: #eae0ca;
  --paper-shadow: #cbbb98;
  --desk: #cfc0a1;          /* the table the book is lying on */
  --desk-deep: #b9a984;
  --ink: #3d352b;
  --muted: #6f6558;
  --sage: #8d987e;
  --sage-soft: #b8bea9;
  --sage-deep: #55643d;
  --raspberry: #9a4f55;
  --berry-soft: #cfabad;
  --ochre: #846126;
  --rule: #bcae94;
  --leaf: 100%;                               /* fifth pass: the sheet is the screen */
  --page: min(60rem, calc(100vw - 3rem));     /* the block of ink upon it */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-body: clamp(1.02rem, .93rem + .32vw, 1.17rem);

  /* --- Paper, built the way real paper is: three layers ----------------
   * fibres — fine fractal noise, the pulp itself
   * mottle — very low-frequency cloud, the unevenness of a hand-made sheet
   * foxing — a few warm blooms where the sheet has aged in the light
   */
  /* laid paper: fine close-set laid lines, widely spaced chain lines */
  --laid:  repeating-linear-gradient(0deg,  #6b5a3a0d 0 1px, #0000 1px 3.4px);
  --chain: repeating-linear-gradient(90deg, #6b5a3a0a 0 1px, #0000 1px 118px);
  --fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.28'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0075' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* The sheet now runs to the edges of the screen.  It is still a page: the
 * margins are simply generous, which is the entire purpose of margins. */
html {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(58% 42% at 10% 5%,  #e6dcc033, #0000 72%),
    radial-gradient(52% 38% at 92% 24%, #eadfc42e, #0000 72%),
    radial-gradient(66% 46% at 24% 58%, #e4d9bd2b, #0000 72%),
    radial-gradient(60% 44% at 86% 86%, #e7dcc12e, #0000 72%),
    /* foxing — small age spots, as on any sheet that has sat in a drawer */
    radial-gradient(circle at 17% 22%, #a8873f26, #0000 .7rem),
    radial-gradient(circle at 63% 9%,  #9c7c3a1f, #0000 .5rem),
    radial-gradient(circle at 81% 47%, #a8873f21, #0000 .85rem),
    radial-gradient(circle at 34% 71%, #9c7c3a1c, #0000 .6rem),
    radial-gradient(circle at 91% 78%, #a8873f24, #0000 .5rem),
    var(--laid),
    var(--chain),
    var(--mottle),
    var(--fibres);
  background-size: auto, auto, auto, auto,
                   auto, auto, auto, auto, auto,
                   auto, auto, 1100px 1100px, 320px 320px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
                     no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
                     repeat, repeat, repeat, repeat;
  background-blend-mode: multiply;
}

body {
  counter-reset: plate;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 3rem);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-body);
  line-height: 1.62;
  /* Do not hide layout mistakes. The legacy sheet clips x-overflow; this
     chapter deliberately restores visibility so a future over-wide plate
     fails loudly instead of losing its right edge in polite silence. — Codex */
  overflow-x: visible;
}

/* Old paper is never evenly lit.  A warm vignette at the screen edges reads
 * as the sheet curling gently away from the reader. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(125% 88% at 50% 40%, #0000 50%, #6b5a3a1a 86%, #5a4a2f2e 100%);
}

/* Type sits in a comfortable column; the illustrations get the wide margins. */
.book-masthead, main, body > footer.book-colophon {
  width: var(--page);
  margin-inline: auto;
}

a { color: var(--sage-deep); text-underline-offset: .18em; text-decoration-thickness: .5px; }
a:hover { color: var(--raspberry); }
button, input, textarea { font: inherit; }
p { text-wrap: pretty; }

/* ---- Ornament ------------------------------------------------------- */
/* Books end sections with a fleuron, not a 1200px hairline. */
main > section + section::before,
main > .two-up::before {
  content: "❧";
  display: block;
  margin: 0 auto clamp(2.2rem, 5vw, 3.6rem);
  color: var(--ochre);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  opacity: .9;
}

/* Kickers are marginal asides in the author's voice, not product eyebrows. */
.eyebrow, .kicker {
  margin: 0 0 .5rem;
  max-width: 30rem;
  color: var(--ochre);
  font-family: var(--serif);
  font-size: .93rem;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

/* ---- Title page ------------------------------------------------------ */
.book-masthead {
  min-height: auto;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.4rem) 0 clamp(2rem, 5vw, 3.4rem);
  display: block;
  background: transparent;
  text-align: center;
}
.book-masthead .stars, .book-masthead::after { display: none; }
.book-masthead .book-nav {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.4rem;
  margin: 0 0 clamp(2.4rem, 8vw, 5rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: .9rem;
  letter-spacing: 0;
}
.book-masthead .book-nav a { color: var(--muted); text-decoration-color: var(--rule); }
.book-masthead .book-nav a:hover { color: var(--raspberry); }
.book-masthead .hero-copy { position: static; z-index: auto; max-width: none; }
.book-masthead .eyebrow { margin-inline: auto; color: var(--muted); font-size: .86rem; }
.book-masthead h1 {
  max-width: none;
  margin: .2rem 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 3.7rem);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.04;
  text-wrap: balance;
}
/* A title-page rule with a diamond in it, the oldest trick in the book. */
.book-masthead h1::after {
  content: "✦";
  display: block;
  width: 11rem;
  margin: 1.15rem auto 0;
  padding-top: .95rem;
  border-top: 1px solid var(--rule);
  color: var(--ochre);
  font-size: .68rem;
  line-height: 1;
}
.book-masthead .lead {
  max-width: 27rem;
  margin: 1.35rem auto 0;
  color: var(--muted);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.6;
  text-wrap: pretty;
}
.hero-vignette {
  max-width: 30rem;
  margin: clamp(1.4rem, 4vw, 2.4rem) auto 0;
  transform: rotate(1.2deg);
}

/* ---- Illustrations: intrusions the text has to flow around ----------- */
.vignette { margin: 0; color: var(--muted); counter-increment: plate; }
.hero-vignette { margin-inline: auto; counter-increment: none; }
/* The windsock was promoted out of the weather band and onto the title page
   (ImageGen2's idea, and a good one).  On a phone it tucks into the margin. */
.book-masthead .weather-vignette { width: 7.5rem; margin: -.4rem .9rem 0 auto; transform: rotate(-1.2deg); }
.book-masthead .weather-vignette figcaption { text-align: right; }
.book-masthead .weather-vignette img { transform: scaleX(-1); }
/* An observatory catalogues its plates.  The frontispiece, by convention,
   is not numbered. */
.vignette figcaption::before {
  content: "Plate " counter(plate, lower-roman) ". ";
  color: var(--ochre);
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: .02em;
}
.hero-vignette figcaption::before { content: "Frontispiece. "; }
.vignette img { display: block; width: 100%; height: auto; }
.vignette figcaption {
  margin-top: .35rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .82rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}
.hero-vignette figcaption { font-size: .88rem; }

/* Right-hand marginal cuts, with the prose closing around them. */
.weather-vignette, .porch-vignette, .snack-vignette, .burrow-vignette {
  float: right;
  shape-margin: 1rem;
}
.weather-vignette  { width: 11rem;   margin: -.5rem 0 .4rem 1.3rem;  transform: rotate(-2deg); }
/* the lyrebird is a tailpiece: right-hand margin, tucked up under the clipping */
.goss-vignette     { width: 14rem;   margin: -3.5rem 0 0 auto;       transform: rotate(2.3deg); }
.porch-vignette    { width: 15rem;   margin: 1.6rem 0 .8rem 1.6rem;  transform: rotate(1.4deg); }
.snack-vignette    { width: 12rem;   margin: -.4rem -2.6rem .5rem 1.4rem; transform: rotate(1deg); }
/* One picture leaves the right margin entirely, because a book may simply
   contain a raccoon and decline to explain itself. */
.burrow-vignette {
  float: left;
  width: 15rem;
  margin: .6rem 1.6rem .4rem -3rem;
  transform: rotate(-1deg);
}
.vignette img { filter: drop-shadow(0 .5rem .7rem #3d352b1f); }

main { margin-bottom: 3rem; position: relative; z-index: 1; }
.panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
main > section { margin-top: clamp(2.6rem, 6vw, 4.2rem); }
.spread, .section-copy { display: block; max-width: none; }
.spread { position: relative; padding: 0; }
.spread::after, .two-up::after, .chapterlet::after { content: ""; display: block; clear: both; }

/* Headings: one modest line of book type.  No three-line poster towers. */
.panel h2 {
  max-width: none;
  margin: .1rem 0 .7rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: .002em;
  line-height: 1.16;
  text-wrap: balance;
}
.panel p { max-width: 36rem; color: var(--ink); line-height: 1.62; }
.panel code { font-family: var(--mono); font-size: .85em; }

/* A decorated initial, once or twice a chapter. */
.dropcap::first-letter {
  float: left;
  margin: .38rem .5rem -.1rem 0;
  color: var(--sage-deep);
  font-family: var(--serif);
  font-size: 3.1em;
  font-weight: 500;
  line-height: .72;
}

/* ---- Machine weather: observations written along one line ------------ */
.spread--weather { border-block: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); padding: 1.1rem 0 1.3rem; }
.spread--weather::before { display: none; }
.telemetry .kicker { margin-bottom: .35rem; }
.telemetry h2 { max-width: 20ch; font-size: clamp(1.45rem, 3.4vw, 1.8rem); }
.telemetry h2 span { color: var(--sage-deep); font-style: italic; }
.telemetry dl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1.6rem;
  margin: .7rem 0 0;
  padding: 0;
  border: 0;
  max-width: 26rem;
}
.telemetry dl div { display: flex; align-items: baseline; gap: .4rem; padding: 0; border: 0; background: transparent; }
.telemetry dt { color: var(--muted); font-family: var(--serif); font-size: .88rem; font-style: italic; letter-spacing: 0; text-transform: none; }
.telemetry dd { margin: 0; color: var(--ink); font-family: var(--mono); font-size: .92rem; font-variant-numeric: tabular-nums; }

/* ---- A clipping pasted onto the page --------------------------------- */
.spread--goss { padding: 0; }
.goss-paper {
  position: relative;
  width: min(100%, 40rem);
  margin: 0 auto 0 -2rem;
  padding: 1rem 1.3rem 1.1rem;
  border: 0;
  background: linear-gradient(#fdfaf0, #f7f0dd);
  box-shadow: 0 .5rem 1.2rem -.5rem #3d352b33;
  transform: rotate(-.5deg);
}
.goss-paper::before, .goss-paper::after { content: ""; position: absolute; width: 3.4rem; height: .6rem; background: #cbb98166; }
.goss-paper::before { top: -.3rem; left: 12%; transform: rotate(-3deg); }
.goss-paper::after { right: 9%; bottom: -.3rem; transform: rotate(4deg); }
.goss-masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .45rem; border-bottom: 2px solid var(--rule); }
.goss-masthead .kicker { margin-bottom: .2rem; color: var(--muted); font-size: .82rem; }
.goss-masthead h2 { margin: 0; font-size: clamp(1.7rem, 4.4vw, 2.3rem); font-weight: 600; line-height: 1; }
.goss-mark { color: var(--ochre); font-size: .5em; vertical-align: .26em; }
.goss-edition { flex: 0 0 auto; margin: 0; color: var(--muted) !important; font-family: var(--serif); font-size: .74rem !important; font-style: italic; line-height: 1.3 !important; text-align: right; text-transform: none; }
.goss-body {
  display: block;
  overflow-wrap: anywhere;
  margin-top: .8rem;
  padding: 0; border: 0; background: transparent;
  color: var(--ink); font-size: .84rem; line-height: 1.5;
  column-count: 2; column-gap: 1.5rem; column-rule: 1px solid #cbb98155;
}
.goss-body p { max-width: none; column-break-inside: auto; margin: 0 0 .8rem; color: var(--ink) !important; break-inside: auto; }
/* A live Gazette still deserves a typesetter's point of entry. The first
   fetched paragraph opens with a restrained two-line initial, like a field
   circular rather than another content block. — Codex */
.goss-body p:first-child::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  color: var(--raspberry);
  font-family: var(--serif);
  font-size: 3.05em;
  font-weight: 500;
  line-height: .72;
  text-shadow: 0 1px 0 #fffaf0aa;
}
.goss-byline { max-width: none; margin: .8rem 0 0 !important; padding-top: .45rem; border-top: 1px solid var(--rule); color: var(--muted) !important; font-family: var(--serif); font-size: .76rem; font-style: italic; letter-spacing: 0; text-transform: none; }

/* ---- The Abode: a map tipped onto the page --------------------------- */
.spread--abode { padding: 0; }
.abode-map {
  float: left;
  width: 21rem;
  margin: .3rem 1.8rem 1.2rem -4rem;
  padding: .35rem;
  background: var(--paper-deep);
  box-shadow: .3rem .4rem 0 var(--paper-shadow), 0 .6rem 1.4rem -.6rem #3d352b40;
  transform: rotate(-2deg);
  
}
.abode-map:hover { transform: rotate(-.6deg); }
.abode-map img { display: block; width: 100%; height: auto; }

/* Actions are annotations under the prose, not a row of controls. */
.porch-actions { display: block; max-width: 33rem; margin-top: .9rem; font-style: italic; }
.porch-button, .porch-button:visited {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--sage-deep);
  background: transparent;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: .18em;
}
.porch-actions .porch-button + .porch-button::before { content: " · "; color: var(--rule); text-decoration: none; }
.porch-button.primary, .porch-button.primary:visited {
  color: var(--ink);
  border-color: transparent;
  background: transparent;
  text-decoration-color: var(--raspberry);
}
.porch-button:hover, .porch-button.primary:hover { color: var(--raspberry); background: transparent; }

/* ---- The one object allowed to shout --------------------------------- */
.spread--specimen { padding: 0; }
.art-cabinet .art-plaque {
  float: right;
  width: 22rem;
  min-height: 0;
  margin: .2rem 0 1.2rem 1.8rem;
  padding: 1.2rem 1rem;
  border-width: 9px;
  box-shadow: .3rem .4rem 0 var(--paper-shadow), inset 0 0 35px #4a0a2988, 0 .7rem 1.5rem -.6rem #3d352b4d;
  transform: rotate(1.4deg);
}
.art-cabinet h2 { max-width: none; font-size: clamp(1.5rem, 3.4vw, 1.85rem); }

/* ---- Two small chapters, deliberately not two equal cards ------------ */
.two-up { display: block; margin: clamp(2.6rem, 6vw, 4.2rem) 0 0; border: 0; }
.chapterlet { min-width: 0; padding: 0; }
.agent-panel { max-width: 37rem; margin: clamp(2.4rem, 6vw, 3.8rem) 0 0 auto; }
.chapterlet h2 { font-size: clamp(1.5rem, 3.4vw, 1.85rem); }
.snack-panel { max-width: 34rem; }

/* Forms: ruled lines on paper.  Almost invisible until a paw is on them. */
.snack-panel label, .guestbook form label {
  display: block;
  margin: .7rem 0 .1rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .88rem;
  font-style: italic;
}
input, textarea {
  width: 100%;
  margin-top: .2rem;
  padding: .28rem .15rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  outline: none;
  color: var(--ink);
  background: transparent;
  font-family: var(--serif);
}
input::placeholder, textarea::placeholder { color: #756b5c; font-style: italic; }
input:focus, textarea:focus { border-color: var(--sage-deep); box-shadow: 0 1px 0 var(--sage-deep); }
.snack-panel input { display: block; max-width: 17rem; }
/* Ruled writing paper, as a guestbook ought to be. */
textarea {
  min-height: 5.4rem;
  padding: 0 .15rem;
  line-height: 1.8rem;
  resize: vertical;
  background-image: repeating-linear-gradient(#0000 0 calc(1.8rem - 1px), #bcae9466 calc(1.8rem - 1px) 1.8rem);
  border-bottom-color: transparent;
}
textarea:focus { border-bottom-color: transparent; box-shadow: none; background-image: repeating-linear-gradient(#0000 0 calc(1.8rem - 1px), #55643d55 calc(1.8rem - 1px) 1.8rem); }
/* A small stamped control, cut slightly crooked. */
button {
  margin-top: .7rem;
  padding: .3rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 3px 8px 4px 7px;
  box-shadow: none;
  color: var(--sage-deep);
  background: transparent;
  font-family: var(--serif);
  font-size: .92rem;
  font-style: italic;
  font-weight: 500;
  cursor: pointer;
  transform: rotate(-.6deg);
}
button:hover { color: var(--paper); border-color: var(--sage-deep); background: var(--sage-deep); }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 4px; }
.snack-panel output {
  display: block;
  max-width: 24rem;
  min-height: 0;
  margin-top: .7rem;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .92rem;
  font-style: italic;
  line-height: 1.5;
}

/* ---- Agents: the one place monospace is still a joke ------------------ */
.agent-panel ul { max-width: 30rem; padding-left: 1.1rem; font-size: .95rem; line-height: 1.75; }
.agent-panel ul code { font-family: var(--mono); font-size: .82rem; }
.agent-panel .agent-call, .book-masthead .agent-call {
  max-width: 30rem;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.65;
}
.agent-panel .agent-call strong, .book-masthead .agent-call strong { color: var(--raspberry); }
.agent-panel blockquote {
  max-width: 30rem;
  margin: .9rem 0 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: .88rem;
  font-style: italic;
  line-height: 1.55;
}

/* ---- Guestbook ------------------------------------------------------- */
.spread--guestbook { display: block; padding: 0; border: 0; }
.guestbook-head { display: block; }
.guestbook-head h2 { max-width: none; font-size: clamp(1.5rem, 3.4vw, 1.85rem); }
.guestbook-head > p { max-width: 34rem; margin: 0 0 .4rem; }
.guestbook form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .2rem 1.6rem;
  max-width: 34rem;
  margin: 1rem 0 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.guestbook form > label { flex: 1 1 11rem; }
.guestbook form .message { flex: 1 1 100%; margin-top: .9rem; }
.guestbook form button { margin: .6rem 0 0 auto; }
.guestbook form output { flex: 1 1 100%; color: var(--sage-deep); font-family: var(--serif); font-size: .9rem; font-style: italic; }
.entries { display: block; max-width: 36rem; }
.entry { min-width: 0; padding: .85rem 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); border-radius: 0; background: transparent; }
.entry:last-child { border-bottom: 0; }
.entry p { max-width: none; margin: .3rem 0; color: var(--ink) !important; font-size: 1rem; }
.entry header { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.entry strong { color: var(--ink); font-family: var(--serif); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.entry time, .entry small { color: var(--muted); font-family: var(--serif); font-size: .82rem; font-style: italic; }
.entry small { display: block; }

/* The illustrator supplied his own printer's credit, signed in the image as
 * GPT-4o / the png-monkey. It is content, not merely ornament, hence the alt. */
.imagegen-credit {
  /* 68rem was technically twice the old width and emotionally four times
     the monkey. Keep the credit generous, but back inside the printed page. */
  width: min(40rem, 88vw);
  margin: clamp(3rem, 6vw, 5rem) auto 1.2rem;
}
.imagegen-credit img { display: block; width: 100%; height: auto; }

body > footer.book-colophon {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 1rem 0 2.2rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--serif);
  font-size: .86rem;
  font-style: italic;
}
body > footer.book-colophon strong { color: var(--sage-deep); font-style: normal; font-weight: 600; }

/* ---- Narrow pages ---------------------------------------------------- */
@media (max-width: 760px) {
  body { box-shadow: none; padding-inline: 1.35rem; }
  .book-masthead { padding-bottom: 2.2rem; }
  .book-masthead .book-nav { margin-bottom: 2.2rem; }
  .hero-vignette { max-width: 17rem; }
  .abode-map { float: none; width: min(100%, 19rem); margin: 0 auto 1.2rem; }
  .art-cabinet .art-plaque { float: none; width: 100%; margin: 0 0 1.2rem; }
  .goss-paper { margin-inline: -.5rem; }
  .goss-body { column-count: 1; column-rule: 0; }
  .goss-edition { display: none; }
  .guestbook form > label { flex: 1 1 100%; }
  .guestbook form button { margin-left: 0; }
}
@media (max-width: 480px) {
  .book-masthead h1 { font-size: 2.35rem; }
  .weather-vignette, .porch-vignette, .snack-vignette { margin-right: -.6rem; width: 8.5rem; }
  .goss-vignette { width: 9rem; margin: .4rem -.6rem 0 auto; }
  .burrow-vignette { float: none; width: 11rem; margin: 1rem auto .6rem; }
  .telemetry dl { gap: .25rem 1.1rem; }

}
/* ======================================================================
 * SIXTH PASS — the broadside.
 *
 * The proprietor is a creature of the Old Web and objects, correctly, to
 * having information penned into a strip down the middle of a large screen
 * for the comfort of a hypothetical slow reader.
 *
 * The typographic answer agrees with her.  A short line is required for
 * reading; an EMPTY MARGIN is not.  Newspapers, broadsides, almanacks and
 * illuminated manuscripts have used the entire sheet for five hundred years
 * and got their short lines from COLUMNS.  The modern web chose margins
 * instead only because CSS columns need a known height, and a web page has
 * none.  Sections do, though — so we set the sections side by side.
 *
 * Below 1180px this all collapses back to the single-column book.
 * ====================================================================== */
@media (min-width: 1180px) {
  :root { --page: 100%; --text-body: 1.06rem; }

  main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2vw, 2.4rem);
    row-gap: clamp(2rem, 2.6vw, 3rem);
    align-items: start;
    margin-top: 1.6rem;
  }
  /* Stretch, so the column RULES run the full height of their row. A
     broadsheet column that ends early leaves white space at the FOOT of a
     ruled column, which reads as typesetting; the same white space with the
     rule stopping short of it reads as a hole in the page. Same pixels,
     entirely different page. */
  main > section, main > article { margin-top: 0; align-self: stretch; }
  /* the fleurons were separators for a stack; a broadside separates with rules */
  main > section + section::before, main > .two-up::before { display: none; }
  /* the two chapterlets become first-class columns of the sheet */
  .two-up { display: contents; }

  .spread--weather   { grid-column: 1 / -1; }
  .spread--goss      { grid-column: 1 / 8; }
  .spread--abode     { grid-column: 8 / -1; }
  .spread--specimen  { grid-column: 1 / 6; }
  .snack-panel       { grid-column: 6 / 9; }
  .agent-panel       { grid-column: 9 / -1; }
  .spread--guestbook { grid-column: 1 / -1; }

  /* Column rules, as on any broadsheet front page. */
  .spread--abode, .snack-panel, .agent-panel {
    padding-left: clamp(1.4rem, 1.9vw, 2.2rem);
    border-left: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
    /* the two chapterlets are grandchildren of `main` via `display: contents`,
       so they need their own stretch to carry the rule to the foot of the row */
    align-self: stretch;
  }

  /* Nothing is capped any more.  Each column is its own measure. */
  .panel p, .snack-panel, .agent-panel ul, .agent-panel .agent-call,
  .agent-panel blockquote, .entries, .guestbook-head > p, .guestbook form,
  .porch-actions, .snack-panel output, .telemetry dl { max-width: none; }
  .agent-panel { margin: 0; }
  .chapterlet h2, .panel h2 { font-size: clamp(1.45rem, 1.5vw, 1.75rem); }

  /* --- The title page ------------------------------------------------
   * Seventh pass.  The frontispiece experiment stranded the title at the far
   * left and exiled the raccoon to the far right with a hundred and forty
   * millimetres of nothing between them.  A title page does not work that way.
   *
   * So: a full-bleed DOUBLE RULE FRAME, title matter centred within it, and
   * the telescope raccoon set beneath as the PRINTER'S DEVICE — the emblem
   * that has sat in exactly that position on title pages since about 1490.
   * The frame spends the whole screen; the composition stays centred inside
   * it, which is what a margin is actually for.
   */
  .book-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 2fr) minmax(0, 1.35fr);
    align-items: center;
    column-gap: clamp(1rem, 2vw, 2.5rem);
    text-align: center;
    margin: 1.2rem 0 0;
    padding: clamp(1.2rem, 2vw, 1.9rem) clamp(2rem, 5vw, 5rem) clamp(1.8rem, 3vw, 2.6rem);
    border: 1px solid var(--rule);
    box-shadow:
      inset 0 0 0 .42rem transparent,
      inset 0 0 0 .48rem color-mix(in srgb, var(--rule) 62%, transparent);
    /* Corner flourishes — cribbed, with thanks, from ImageGen2's render.
       Four printed corners is a five-hundred-year-old move and he was right
       that the frame was bare without them. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(0 15 15)' fill='none' stroke='%23846126' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M29 2 H10 A8 8 0 0 0 2 10 V29'/%3E%3Cpath d='M9.5 4.5 A5 5 0 0 0 4.5 9.5'/%3E%3C/g%3E%3Ccircle cx='7' cy='7' r='1.5' fill='%23846126'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(90 15 15)' fill='none' stroke='%23846126' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M29 2 H10 A8 8 0 0 0 2 10 V29'/%3E%3Cpath d='M9.5 4.5 A5 5 0 0 0 4.5 9.5'/%3E%3C/g%3E%3Ccircle cx='7' cy='7' r='1.5' fill='%23846126'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(270 15 15)' fill='none' stroke='%23846126' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M29 2 H10 A8 8 0 0 0 2 10 V29'/%3E%3Cpath d='M9.5 4.5 A5 5 0 0 0 4.5 9.5'/%3E%3C/g%3E%3Ccircle cx='7' cy='7' r='1.5' fill='%23846126'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(180 15 15)' fill='none' stroke='%23846126' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M29 2 H10 A8 8 0 0 0 2 10 V29'/%3E%3Cpath d='M9.5 4.5 A5 5 0 0 0 4.5 9.5'/%3E%3C/g%3E%3Ccircle cx='7' cy='7' r='1.5' fill='%23846126'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: .18rem .18rem, right .18rem top .18rem, left .18rem bottom .18rem, right .18rem bottom .18rem;
  }
  .book-masthead .book-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: center;
    margin: 0 auto clamp(1.4rem, 2.6vw, 2.2rem);
    padding-bottom: .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  }
  .book-masthead .eyebrow { margin-inline: auto; }
  .book-masthead .eyebrow::before { content: "❦ "; color: var(--ochre); font-style: normal; }
  .book-masthead .eyebrow::after  { content: " ❦"; color: var(--ochre); font-style: normal; }
  .book-masthead h1 {
    font-size: clamp(3rem, 5.6vw, 5.4rem);
    /* the faintest impression of ink pressed into damp paper */
    text-shadow: 0 1px 0 #fffaf0aa, 0 -1px 0 #3d352b12;
  }
  .book-masthead h1::after { margin-inline: auto; width: 16rem; }
  .book-masthead .lead {
    margin-inline: auto;
    max-width: 33rem;
    font-size: 1.08rem;
  }
  .book-masthead .hero-copy { grid-column: 2; grid-row: 2; }
  /* Heraldry calls these SUPPORTERS: the two beasts either side of the
     device.  ImageGen2 proposed the arrangement; it fills the width, it pairs
     the two plates, and it halves the height of the title page. */
  .book-masthead .hero-vignette {
    grid-column: 1; grid-row: 2;
    max-width: min(30vw, 30rem);
    margin: 0 auto;
  }
  .book-masthead .weather-vignette {
    grid-column: 3; grid-row: 2;
    float: none;
    /* Its portrait canvas reaches the same visual height as the landscape
       spyglass plate at fifteen rem wide. Equal outer columns keep the title
       on the physical centreline rather than averaging unequal supporters. */
    width: min(15vw, 15rem);
    margin: 0 auto;
  }
  .book-masthead .vignette figcaption { text-align: center; }

  /* --- Machine weather ------------------------------------------------
   * Four readings spread evenly across 1800px looked stretched because
   * nothing connected them.  The fix is five hundred years old and lives in
   * every table of contents ever set: LEADER DOTS.  Wide spacing stops being
   * an accident the moment something walks across it.
   */
  .spread--weather {
    display: flex;
    align-items: baseline;
    gap: clamp(1.2rem, 2.4vw, 2.6rem);
    padding: .55rem 0 .7rem;
  }
  .telemetry .section-copy { flex: 0 0 auto; order: 1; max-width: 15rem; }
  .telemetry h2 { margin-bottom: 0; font-size: 1.5rem; }
  .telemetry dl { flex: 1 1 auto; display: flex; gap: 0 clamp(1.2rem, 2.2vw, 2.4rem); margin: 0; order: 2; }
  .telemetry dl div { flex: 1 1 0; min-width: 0; gap: .45rem; overflow: hidden; }
  .telemetry dt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
  .telemetry dt::after {
    content: "  · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·";
    color: color-mix(in srgb, var(--rule) 85%, transparent);
    font-style: normal;
  }
  .telemetry dd { flex: 0 0 auto; }

  /* --- The gazette fills its column, three columns of newsprint ------- */
  .goss-paper { width: auto; margin: 0; transform: rotate(-.35deg); }
  .goss-body { column-count: 3; column-gap: 1.2rem; font-size: .8rem; }
  .goss-vignette { width: 8.5rem; margin: -2.5rem 0 0 auto; }

  /* --- Objects sized to their columns --------------------------------- */
  .abode-map { width: 13rem; margin: .2rem 1.2rem .6rem 0; }
  /* the screwdriver becomes a tailpiece at the foot of the column */
  .porch-vignette { float: none; width: 16rem; margin: 1.4rem 0 0 auto; }
  .art-cabinet .art-plaque { width: 16rem; min-height: 0; padding: 1.5rem 1.1rem; margin: .2rem 0 .8rem 1.4rem; }
  .art-cabinet .art-plaque strong { font-size: 1.15rem; line-height: 1.4; }
  .art-cabinet .art-plaque small { font-size: .78rem; }
  .art-sparkles { font-size: 1rem; }
  .snack-vignette { float: none; width: 100%; max-width: 11rem; margin: .8rem 0 .4rem; }
  .snack-vignette figcaption { text-align: left; }
  .burrow-vignette { width: 9rem; margin: .3rem 1.1rem .3rem 0; }
  .agent-panel blockquote { clear: left; }

  /* --- Guestbook: writing desk on the left, the register across ------- */
  .spread--guestbook {
    display: grid;
    grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 3vw, 3.4rem);
    align-items: start;
    padding-top: clamp(1.6rem, 2.4vw, 2.4rem);
    border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  }
  .guestbook-head { grid-column: 1; }
  .guestbook form { grid-column: 1; margin-bottom: 0; }
  .entries {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: clamp(1.4rem, 1.9vw, 2.2rem);
    border-left: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
    column-count: 2;
    column-gap: clamp(1.6rem, 2.2vw, 2.6rem);
    column-rule: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
  }
  .entry { break-inside: avoid; padding-top: 0; }
  .entry p { max-width: none; }

  /* --- The tailpiece --------------------------------------------------
   * The printer's credit is a direct child of `main`, and `main` is a
   * twelve-column grid, so with no placement of its own the plaque was
   * auto-flowed into ONE twelfth of the sheet and then overflowed its own
   * track — which is why it sat marooned against the left edge with fourteen
   * hundred pixels of blank paper beside it and a hole above and below.
   *
   * A device at the foot of a book is not marooned; it is CENTRED BETWEEN
   * RULES, and the rules are what spend the width. Give it the whole measure
   * and let the two rules run out to the edges of the sheet.
   */
  .imagegen-credit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.4rem, 2.6vw, 2.8rem);
    width: auto;
    max-width: none;
    margin: clamp(2.2rem, 3.4vw, 3.2rem) 0 0;
  }
  .imagegen-credit::before,
  .imagegen-credit::after {
    content: "";
    height: 1px;
    background-image: linear-gradient(90deg, #0000, var(--rule) 30%, var(--rule));
  }
  .imagegen-credit::after { background-image: linear-gradient(270deg, #0000, var(--rule) 30%, var(--rule)); }
  .imagegen-credit img { width: min(34rem, 34vw); }

  body > footer.book-colophon { margin-top: clamp(1.4rem, 2.2vw, 2.2rem); }
}

/* On a genuinely large screen the columns get wider, so the TYPE gets bigger
 * to keep the line honest.  This is how a broadsheet scales; it is not how a
 * modern web page scales, and the modern web page is wrong. */
@media (min-width: 1640px) {
  :root { --text-body: 1.15rem; }
  .goss-body { font-size: .86rem; }
  .entries { column-count: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .abode-map, .porch-button, button, .goss-paper, .vignette, .art-plaque { transform: none; }
}

@media print {
  @page { margin: 1.6cm; }
  html, body { background: #fff !important; color: #111 !important; }
  body { padding: 0 0.8cm; font-size: 10.5pt; background-image: none !important; }
  body::before { display: none; }
  .book-masthead { margin: 0 0 0.8cm; padding: 0.8cm 0.6cm; border: 1px solid #777; box-shadow: none; background: none !important; }
  .book-masthead::after { display: none; }
  .book-masthead .book-nav, .book-masthead .stars { display: none; }
  main { display: block !important; margin-top: 0.6cm; }
  main > section, main > article, .two-up { display: block !important; margin-top: 0.9cm; }
  .spread--weather, .spread--goss, .spread--abode, .spread--specimen, .snack-panel, .agent-panel, .spread--guestbook, .imagegen-credit { grid-column: auto !important; border-left: 0 !important; padding-left: 0 !important; }
  .goss-paper, .abode-map, .art-cabinet .art-plaque, .vignette, .book-masthead { transform: none !important; box-shadow: none !important; }
  .goss-body { column-count: 2; column-gap: 1.2rem; }
  .entries { column-count: 2; column-gap: 1.2rem; }
  /* Background textures and gradients are ink-wasters on paper */
  .goss-paper, .abode-map, .art-plaque { background-image: none !important; }
  a { color: #111; text-decoration-thickness: 0.5px; }
  button, input, textarea { border-color: #777; }
  /* Avoid breaking plates and entries across pages where possible */
  .vignette, .abode-map, .art-plaque, .entry, .goss-paper { break-inside: avoid; }
}