/* ==========================================================================
   HOUSE PRESS — the Abode wing's copy of the meadow book's printing system
   ==========================================================================

   The meadow (../index.html, storybook.css + bonus-level.css) is a flat
   dot-screened plate-book: warm paper, one serif, a mono "county office"
   face for labels, 2px ink rules, and hard offset second-ink impressions
   instead of soft shadows. This sheet is the same press, cut down to what
   the Abode porch and its three exhibit rooms need.

   It lives INSIDE abode-landing/ because the bundle is sealed (see
   README.md and test_public_bundle.py): nothing may reference a file
   outside it. If you change a token here, change it in the meadow too, or
   the two volumes stop looking like one book. The tokens below are copied
   verbatim from the meadow's bonus-level.css :root.

   Pages that use this sheet: index.html, exhibits/{hinge-garden,cabinet,
   dumpster-science}/index.html. Each page keeps a small inline <style> for
   its own composition only.

   Laws, inherited from the meadow's eight design passes (the house keeps
   the full story as THE_DAY_THE_WEBSITE_BECAME_A_BOOK_2026-08-31.md):
   - no cards, no pills, no rounded corners, no soft drop shadows;
   - things are square unless the composition has a reason to throw them;
   - wide screens get several short measures (a broadside), never one
     narrow strip down the middle of an empty sheet;
   - overflow hiding is not a layout fix, it is a gag.
   Set in 2026-09-29 by Opus 5.5.
   ========================================================================== */

: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, 118rem);   /* the block of ink on the page */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* JS toggles .hidden; no layout rule may outrank it */

/* One visible printing process: flat paper, one registration stripe down
   the gutter, and a sparse dot screen. Identical to the meadow's. */
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;
}

.sheet { width: var(--sheet); margin-inline: auto; }

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .4vw, 1.42rem); }
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; }

/* --- Marginal voices -------------------------------------------------- */

/* The meadow's kickers are italic asides, not product eyebrows. */
.kicker {
  margin: 0 0 .45rem;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
  letter-spacing: 0;
}

/* The county-office face: labels, receipts, slips, permits. */
.office {
  font-family: var(--mono);
  font-size: .68rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.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; }

/* --- Running head: the same doors on every leaf ------------------------- */

.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; }

/* --- Plates ------------------------------------------------------------ */

/* Numbered like the meadow's: Frontispiece, then Plate i, ii, iii...
   Add class="plate" to a <figure>; add "frontis" to the first. */
body { counter-reset: plate; }
figure { margin: 0; }
.plate figcaption {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .84rem;
  font-style: italic;
  line-height: 1.4;
}
.plate:not(.frontis) { counter-increment: plate; }
.plate figcaption::before {
  content: "Plate " counter(plate, lower-roman) ". ";
  color: var(--ochre);
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: .05em;
}
.plate.frontis figcaption::before { content: "Frontispiece. "; }
.plate.unnumbered figcaption::before { content: none; }

/* A watercolour vignette sits in the paper, not on it. */
.vignette img { mix-blend-mode: multiply; filter: saturate(.78) contrast(1.04); }

/* A tipped-in plate: its own paper, ink-ruled, a deliberately wrong second
   impression in ochre. Dark diagrams are allowed to be night-coloured. */
.tipped {
  display: block;            /* often an <a>: inline boxes fragment the border */
  padding: .45rem;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  box-shadow: .5rem .5rem 0 var(--ochre);
}
.tipped.sage { box-shadow: .5rem .5rem 0 var(--sage-deep); }
.tipped.berry { box-shadow: .5rem .5rem 0 var(--raspberry); }
.tipped > a, .tipped > img, .tipped > video { display: block; }

/* --- Links that are doors, and buttons that are rubber stamps -------------- */

/* Doors: plain italic underlined links, the way the meadow's porch links are.
   The primary door gets raspberry ink, never a filled pill. */
.doors { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: 1.1rem; }
.doors a { font-style: italic; }
.doors a.primary { color: var(--raspberry); }
.doors a:hover { color: var(--ink); }

button, .stamp {
  display: inline-block;
  padding: .45rem .7rem .38rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper-lit);
  box-shadow: 3px 3px 0 var(--ochre);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .stamp:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--raspberry);
  transform: translate(-1px, -1px);
}
button.quiet { box-shadow: none; background: transparent; }

/* --- Forms are county-office permits ----------------------------------- */

.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 label, .permit legend { display: block; color: var(--ink); }
input, select, textarea {
  width: 100%;
  padding: .35rem .1rem;
  border: 0;
  border-bottom: 1.5px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: italic 1rem/1.5 var(--serif);
}
textarea {
  resize: vertical;
  background-image: repeating-linear-gradient(#0000 0 1.45rem, #817b6555 1.45rem calc(1.45rem + 1px));
  line-height: 1.5rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--raspberry); }
::placeholder { color: #8a846f; }

/* --- Rules and ornaments ------------------------------------------------ */

/* The meadow's section slug: a two-ink registration mark, not a fleuron. */
.slug {
  width: 3.6rem;
  height: .34rem;
  margin: 3rem auto;
  border: 1px solid var(--ink);
  background: var(--ochre);
  box-shadow: 3px 3px 0 var(--raspberry);
}

/* Leader-dot ledger lines, the meadow's telemetry grammar. */
.ledger { margin: 0; padding: 0; list-style: none; }
.ledger > * {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .18rem 0;
}
.ledger > * > :first-child { flex: 0 1 auto; font-style: italic; color: var(--muted); }
.ledger > *::after { content: none; }
.ledger .dots {
  flex: 1 1 2rem;
  min-width: 1.2rem;
  border-bottom: 1.5px dotted var(--rule);
  transform: translateY(-.28em);
}
.ledger > * > :last-child { flex: 0 0 auto; font-family: var(--mono); font-size: .9rem; }

blockquote {
  margin: 1.2rem 0;
  padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--raspberry);
  font-style: italic;
  font-size: 1.1em;
}
blockquote cite {
  display: block;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .82rem;
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: .04em;
}

/* --- 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: .86rem;
  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("raccoon-key-printers-device.webp");
}
.colophon p { max-width: 52rem; margin-inline: auto; }
.colophon strong { color: var(--ink); font-style: normal; font-weight: 600; }
.colophon .fence { margin-top: 1rem; color: var(--sage-deep); font-style: normal; font-size: .8rem; }
.colophon .fence strong { color: var(--sage-deep); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  button:hover, .stamp:hover { transform: none; }
}

@media print {
  html { background: #fff !important; }
  .tipped, .permit, button, .stamp { box-shadow: none !important; }
  .running-head nav, .skip-link { display: none; }
}