/* BONUS LEVEL, 2026-09-03
 *
 * The storybook pass was already lovely. Its last machine tell was that every
 * lovely thing had been lovely in the same comprehensive way: simulated pulp,
 * polite tiny rotations, soft physical shadows, and perfectly fluid scaling.
 *
 * This thin chapter makes fewer, harder decisions. The page is a screen made
 * by somebody who likes old printing, not a screen pretending to be an old
 * object. Gemini Pro supplied the useful phrase "bureaucratic risograph";
 * Opus 4.6 supplied the loupe and objections recorded in the design salon.
 */

:root {
  --paper: #f1ead6;
  --paper-deep: #e8ddc2;
  --ink: #2e3026;
  --muted: #625f50;
  --sage-deep: #3f5f43;
  --sage-soft: #aab79a;
  --raspberry: #a13e55;
  --ochre: #835817;
  --rule: #817b65;
}

/* One visible printing process, rather than four simulated paper processes. */
html {
  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;
}

body::before { content: none; display: none; }

/* The narrow book used a fleuron between every chapter. One repeated antique
   glyph is theme; a little two-ink registration slug is the printing system. */
main > section + section::before,
main > .two-up::before {
  content: "";
  width: 3.6rem;
  height: .34rem;
  border: 1px solid var(--ink);
  background: var(--ochre);
  box-shadow: 3px 3px 0 var(--raspberry);
}

/* Stop pantomiming accidental placement. A thing is square unless the
   composition has a real reason to throw it. */
.vignette,
.goss-paper,
.abode-map,
.art-cabinet .art-plaque,
button { transform: none; }

.vignette img {
  filter: saturate(.72) contrast(1.06);
  mix-blend-mode: multiply;
}

/* Physical depth becomes a deliberately wrong second ink impression. */
.goss-paper {
  border: 2px solid var(--ink);
  background: #f7f0dc;
  box-shadow: .55rem .55rem 0 var(--ochre);
}

.goss-paper::before,
.goss-paper::after { display: none; }

.goss-body p:first-child::first-letter { text-shadow: none; }

.abode-map {
  padding: .45rem;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  box-shadow: .5rem .5rem 0 var(--sage-deep);
}

.abode-map:hover { transform: translate(-2px, -2px); }

.art-cabinet .art-plaque {
  box-shadow: .55rem .55rem 0 var(--sage-deep), inset 0 0 28px #4a0a2973;
}

/* County-office typography makes the snack aperture much funnier. */
.snack-panel label,
.guestbook form label {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .67rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.guestbook form {
  margin-top: 1.25rem;
  padding: .9rem 1rem 1rem;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--paper-deep) 48%, transparent);
  box-shadow: .45rem .45rem 0 var(--ochre);
}

button {
  padding: .4rem .65rem .34rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ochre);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

button:hover {
  color: var(--paper);
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--raspberry);
  transform: translate(-1px, -1px);
}

/* The new two-ink block is a printer's device, not content. The actual image
   carries no words and therefore changes none of the commissioned copy. */
body > footer.book-colophon::before {
  content: "";
  display: block;
  width: 6.1rem;
  aspect-ratio: 420 / 589;
  margin: -1rem auto .75rem;
  background: center / contain no-repeat url("storybook/meadow/raccoon-key-printers-device.webp");
}

@media (min-width: 1180px) {
  /* The former title was heraldically symmetrical. This one behaves like an
     opinionated small-press cover: one hard registration stripe, one enormous
     quiet title block, two illustrations that do not pretend to balance. */
  .book-masthead {
    position: relative;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 31rem;
    padding: 1.35rem 2.1rem 2rem 2.7rem;
    border: 2px solid var(--ink);
    box-shadow: .75rem .75rem 0 var(--sage-soft);
    background: color-mix(in srgb, var(--paper-deep) 32%, transparent);
    text-align: left;
  }

  .book-masthead::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    width: .7rem;
    background: var(--raspberry);
  }

  .book-masthead .book-nav {
    grid-column: 5 / 12;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 1.2rem;
    border-bottom: 2px solid var(--ink);
  }

  .book-masthead .hero-copy {
    grid-column: 5 / 11;
    align-self: center;
    padding-left: clamp(.4rem, 1.1vw, 1.1rem);
  }

  .book-masthead .eyebrow { margin-inline: 0; }
  .book-masthead .eyebrow::before,
  .book-masthead .eyebrow::after { content: none; }

  .book-masthead h1 {
    max-width: 8.5ch;
    font-size: clamp(4.7rem, 6.3vw, 7rem);
    line-height: .87;
    letter-spacing: -.035em;
  }

  .book-masthead h1::after {
    width: 7rem;
    margin: 1.25rem 0 0;
    text-align: left;
  }

  .book-masthead .lead {
    max-width: 29rem;
    margin: 1rem 0 0;
    font-size: 1rem;
  }

  .book-masthead .hero-vignette {
    grid-column: 1 / 5;
    align-self: end;
    width: 100%;
    max-width: 28rem;
    margin: 0;
  }

  .book-masthead .weather-vignette {
    grid-column: 11 / 13;
    align-self: end;
    width: min(11vw, 11rem);
    margin: 0 0 0 auto;
  }

  .book-masthead .vignette figcaption { text-align: left; }
  .book-masthead .weather-vignette figcaption { text-align: right; }

  /* Make the broadside's rules structural rather than politely decorative. */
  main { column-gap: clamp(1.2rem, 1.6vw, 1.8rem); }
  .spread--abode,
  .snack-panel,
  .agent-panel { border-left: 2px solid var(--ink); }
  .spread--guestbook { border-top: 2px solid var(--ink); }

  .goss-paper { box-shadow: .7rem .7rem 0 var(--ochre); }
  .abode-map { box-shadow: .55rem .55rem 0 var(--sage-deep); }
}

@media (max-width: 760px) {
  html {
    background-image: radial-gradient(circle, #2e302612 0 .55px, #0000 .7px);
    background-size: 5px 5px;
  }

  .goss-paper { box-shadow: .35rem .35rem 0 var(--ochre); }
  .guestbook form { box-shadow: .3rem .3rem 0 var(--ochre); }
}

/* The single-column leaf is only 60rem wide here; the older four-rem map
   intrusion fell off the physical screen between the phone and broadside
   breakpoints. Keep the intrusion for the narrow and wide compositions, not
   for this awkward middle shelf. */
@media (min-width: 761px) and (max-width: 1179px) {
  .abode-map {
    width: 19rem;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abode-map:hover,
  button:hover { transform: none; }
}

@media print {
  html { background: #fff !important; }
  .book-masthead { box-shadow: none !important; }
  .book-masthead::after { display: none !important; }
  .goss-paper,
  .abode-map,
  .art-cabinet .art-plaque,
  .guestbook form,
  button { box-shadow: none !important; }
  body > footer.book-colophon::before { filter: grayscale(1); }
}