/* OPENINGS — L & E Little Hand Publishing
   ---------------------------------------------------------------------------
   Two grounds, each doing what it is good at:
     PAPER (#F4EFE5) — everything you read or buy from. Warm, because the
       covers themselves average #FCECDB; the previous cool #F7FAFB made them
       read as yellowed scans.
     NIGHT (#1B3A4B) — only where illustrations live, so the artwork glows.

   One rule holds everywhere: type NEVER sits on artwork. Every word is in a
   flat band of known colour, which makes contrast structural rather than
   something audited across 195 unpredictable images.

   Print is expressed through construction — hard seams, flooded fields, real
   page furniture — never through texture. No grain, no noise, no kraft brown.
   No pink in the interface (tools/palette_lint.py enforces it); the artwork
   keeps its own, including Lea's pinafore. */

:root {
  --paper:    #F4EFE5;
  --paper-2:  #EAE2D4;
  --ink:      #1F1B17;   /* 14.9:1 on paper */
  --ink-soft: #5A5148;   /* 6.8:1 — real body copy, not a whisper */
  --blue:     #1B3A8F;   /* house ink: links, the ampersand */
  --marigold: #F2B71B;   /* flood only, never a text colour */
  --gold-ink: #7A5B12;   /* the marigold wound down until it can be read: 5.5:1 */
  --rule:     #D8CEBB;

  --night:    #1B3A4B;   /* the picture ground */
  --night-tx: #F4EEE4;   /* ~12:1 on night */
  --night-dim:#C7D5DC;   /* 8.4:1 on night */

  /* Endpapers: five deep families across the fifteen, not a fifteen-step hue
     wheel. The book.json accents could not do this job — twelve of the fifteen
     sit in the same pale blue band, so they carried no wayfinding at all. */
  /* Rust, not the old #AB331F. Brick sat at hue 8.6, inside the pink band
     (330-12 through 0), and that was invisible while the walls were flooded
     because it is only light enough to read as pink once it is mixed toward
     paper. Washed it landed on #D09182 - a dusty pink on three book pages
     and, for longer than anyone noticed, on the kitchen wall. Rotated to
     hue 20 it clears the band at every wash level, and mixing toward cream
     only pushes the hue further away, so it cannot creep back. Saturation
     and lightness are untouched, so it is still the same weight of colour
     as its four siblings. */
  --brick:  #AB4E1F;
  --navy:   #274893;
  --teal:   #10574F;
  --forest: #2C5A22;
  --bronze: #5C551A;
  /* A room colour rather than an endpaper - the bedroom and the colouring
     pages - and until now the only one of them written as a literal in
     scenes.json and the templates instead of as a token. It is declared here
     so palette_lint has something to test: the lint cannot see what --room
     holds on a given page, so it checks every ground colour the palette
     declares, and a colour that is not declared is a colour it cannot check. */
  --indigo: #3B3273;
  --endpaper: var(--teal);          /* set per book page */
  --endpaper-tx: #F6F1E7;

  --measure: 62ch;
  --gut: clamp(20px, 4vw, 56px);
  --seam: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: clamp(16px, 15.2px + .25vw, 18px);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: .18em; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* The ring has to clear 3:1 against whatever it is drawn on, and the site has
   two grounds. Blue is 8.95:1 on paper and 1.08-1.57:1 on the six wall
   colours - invisible on every one of them. Marigold is the reverse: 3.6-6.1
   on the walls, 1.58 on paper. So the ring follows the ground, not the page.
   Measured, not guessed; see docs/ui-ux-review.md. */
.night :focus-visible,
.panel--endpaper :focus-visible { outline-color: var(--marigold); }
/* The walls used to be in that list, and they were right to be while the walls
   were flooded. Washed to 58% they are pale, and marigold on them measures
   1.65-2.02:1 - it fails the 3:1 a state indicator has to clear, on every one
   of the six. Ink is 4.67:1 at its worst and 5.2-11.4 elsewhere, so the ring
   follows the ground the way the original note says it should; the ground just
   moved. .night and the endpapers are still dark and keep marigold. */
.room :focus-visible,
.page-wall :focus-visible,
.shelf-wall :focus-visible { outline-color: var(--ink); }
/* ...and back to blue for the things standing ON a wall that are themselves
   paper: the cards, the framed colouring sheets, and the room rail, which
   lives inside .room but sits on its own cream band. */
.page-card :focus-visible,
.sheet :focus-visible,
.rooms :focus-visible { outline-color: var(--blue); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper);
        padding: .75rem 1.25rem; text-decoration: none; z-index: 20; }
.skip:focus { left: var(--gut); top: .5rem; }

/* Fraunces with its SOFT and WONK axes wound up: the serifs go rounded and the
   letterforms lean, which reads storybook rather than editorial.
   The axes are PINNED in the font request (opsz 144, SOFT 100, WONK 1,
   wght 700-800) rather than served as a full 4-axis variable font - measured,
   that is 78KB instead of 254KB. Only display sizes use this face, so a fixed
   optical size of 144 is the right one. */
h1, h2, h3, .mark {
  font-family: Fraunces, Georgia, serif; font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.012em; line-height: 1.08; margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 26px + 2.2vw, 56px); }
h2 { font-size: clamp(22px, 19px + 1.1vw, 32px); }
h3 { font-size: clamp(17px, 16px + .4vw, 21px); }
p { margin: 0 0 .85em; }
.prose { max-width: var(--measure); }
.lede { font-size: clamp(17px, 16px + .5vw, 21px); }
.soft { color: var(--ink-soft); }

.meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 10px;
}
.panel--marigold .meta { color: var(--ink); }        /* --ink-soft is 4.27:1 here */
.night .meta, .panel--endpaper .meta { color: var(--night-dim); }

/* ---- masthead ------------------------------------------------------- */

/* The bar stays quiet on purpose: the scenes are where the colour lives, and
   a masthead that competed with them would leave the rooms nothing to be. It
   belongs to the site by material instead - the same cream paper, the same
   hard ink seam - and it earns its keep by telling you where you are, which
   it never did: aria-current was styled and never emitted.

   Sticky, because the catalogue is 2700px tall on a phone and the way out of
   it should not be 2700px away. */
.bar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; justify-content: flex-start;
  flex-wrap: nowrap; gap: 6px 16px;
  padding: 9px var(--gut); min-height: 44px;
  border-bottom: var(--seam) solid var(--ink); background: var(--paper);
}
/* Three things in the bar now, not two, so the links take the slack and the
   two fixed items sit at the ends. min-width:0 is what lets the link row
   shrink and scroll on a narrow screen instead of shoving the pill off. */
.bar .nav { margin-inline-start: auto; min-width: 0; }
.grownups {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 16px;
  background: var(--marigold); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
/* Marigold is a flood colour and never a text one - here it is the flood, and
   the label on it is ink at 9.4:1. It is the only marigold in the bar, which
   is the whole point: it has to read as a different kind of thing from the
   four links beside it. */
/* Tighter on a phone so the label row keeps as much of the bar as it can. The
   44px minimum height is held by min-height, not by the padding, so this costs
   the target nothing. */
@media (max-width: 29.99rem) {
  .grownups { padding: 8px 12px; font-size: 13px; }
}
.grownups:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.grownups[aria-current] { box-shadow: inset 0 0 0 2px var(--paper), 2px 2px 0 var(--ink); }
/* A sticky bar that wraps is a sticky bar twice the height: the wordmark plus
   three links came to 112px on a 375px phone, which is a seventh of the screen
   given away on every page. Under 30rem the mark is the logo alone - it is the
   brand's own mark, the name is in the title bar and in the footer - and the
   whole bar fits one 54px row with the labels intact. The name stays in the
   accessible name of the link. */
@media (max-width: 29.99rem) {
  /* .bar .mark, not .mark: the footer carries the same mark and has all the
     room in the world, so hiding the name there just left a bare logo. */
  .bar .mark span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.mark {
  font-size: clamp(18px, 16px + .6vw, 24px); text-decoration: none;
  color: var(--ink); display: inline-flex; align-items: center; gap: 10px;
  /* Under 30rem the name is hidden and only the 36px logo shows, which left
     the home link a 36x44 target. */
  min-height: 44px; min-width: 44px; justify-content: flex-start;
}
.mark img { width: 36px; height: 36px; }
/* The brand's own gold rather than the hallway's blue - but wound down until
   it is legible. Marigold itself is 1.6:1 on this paper and the goldenrod I
   reached for first was 2.84:1, which is why the ampersand could not be read;
   the palette's own note says marigold is a flood colour and never a text
   one, and it was right. */
.mark em { color: var(--gold-ink); font-style: normal; }
/* nowrap at every width, not only under 22.5rem. The bar gained a fifth
   control and at 390px the four labels wrapped to THREE rows - a sticky bar
   three rows tall is a third of a phone screen given away on every page, which
   is the exact failure the 22.5rem rule further down was written to prevent.
   The labels scroll under the pill instead; the pill itself never moves,
   because it is the one control in the bar aimed at the person buying. */
.nav {
  display: flex; flex-wrap: nowrap; gap: 4px 16px;
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; }
/* 13.5px in a bar that is otherwise 18-24px read as a caption rather than as
   the site's navigation. */
.nav a {
  color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 500;
  min-height: 44px; min-width: 44px; padding-inline: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--rule); }
/* You are here. The rule is ink, not marigold: marigold on cream paper is
   1.6:1, and a state indicator has to clear 3:1 the same way the hotspot
   rings do - it is the same rule, and the bar does not get an exemption for
   being small. Ink is 12:1. The bold label carries it a second way, so the
   state does not depend on seeing a 3px line at all. */
.nav a[aria-current] { border-bottom-color: var(--ink); font-weight: 700; }

/* A 320px phone has 305px of bar and four labels plus the logo came to 326,
   so it wrapped to two rows again. Tighter spacing gets it under; nowrap and
   a hidden scrollbar are the guarantee, so the sticky bar is one row at any
   width rather than one row at the widths I happened to measure. */
@media (max-width: 22.5rem) {
  .bar { padding-inline: 12px; gap: 10px; }
  .nav {
    flex-wrap: nowrap; gap: 10px;
    overflow-x: auto; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding-inline: 2px; min-width: 40px; }
}

/* ---- the opening: picture, hard seam, flat panel -------------------- */

.opening { border-top: var(--seam) solid var(--ink); }
/* The plates are portrait 7:10, so stacked above the words a full-width one
   is 1095px tall on a 768 tablet - a whole screen of picture before a single
   sentence. Capped, and cropped a little above centre so the faces survive
   the crop. */
.opening__pic img { width: 100%; max-height: 68vh; object-fit: cover;
                    object-position: 50% 46%; }
.panel { padding: clamp(22px, 3vw, 40px) var(--gut) clamp(26px, 3.4vw, 46px);
         border-top: var(--seam) solid var(--ink); }
/* Washed with the banner it is quoting. This was a real inconsistency rather
   than a judgement call: the same --marigold rendered flooded here and mixed
   58% on the front page, so the two pages showed two different yellows and
   the grown-ups hero was visibly louder than the hero it echoes. The type on
   it is already ink, which goes from 9.4:1 to 11.4:1 on the paler ground. */
.panel--marigold { background: color-mix(in srgb, var(--marigold) 58%, var(--paper)); }
.panel--paper2   { background: var(--paper-2); }
.panel--endpaper { background: var(--endpaper); color: var(--endpaper-tx); }
.panel--endpaper .soft { color: #E4D9C6; }
/* NOT washed, and that is the decision rather than an oversight. It is the one
   block on the buyer's page whose job is to stop the eye - the three titles
   actually on sale - and it is the only dark ground left on the site outside
   the book endpapers. Washed, /grown-ups/ becomes four pale bands in a row and
   the buy shortcut reads as one more section; dark, it is the gear change into
   the part the adult came for, and the covers on it glow, which is the reason
   --night existed in the first place. Its own label colour is scoped in
   scene.css so the shelf wall's ink does not follow it here. */
.panel--night    { background: var(--night); color: var(--night-tx); }
.panel--night .soft { color: var(--night-dim); }

@media (min-width: 46rem) {
  .opening--split { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .opening--split .panel { border-top: 0; border-left: var(--seam) solid var(--ink);
                           display: flex; flex-direction: column; justify-content: center; }
  /* The picture's own aspect set the row, so the hero was 1200px tall on an
     849px screen - a screen and a half before a word. The column is capped
     and the picture crops into it. */
  .opening--split .opening__pic { max-height: 78vh; overflow: hidden; }
  .opening--split .opening__pic img { height: 100%; max-height: none;
                                      object-fit: cover; object-position: 50% 46%; }
}

/* ---- buttons: name what happens, and what it costs ------------------ */

.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 20px; border-radius: 0;
  font-weight: 700; font-size: 15px; text-decoration: none;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--out { background: transparent; color: var(--ink); }
.btn--out:hover { background: var(--ink); color: var(--paper); }
.panel--endpaper .btn, .panel--night .btn {
  background: var(--paper); color: var(--ink); border-color: var(--paper); }
.panel--endpaper .btn:hover, .panel--night .btn:hover { background: transparent; color: var(--paper); }
.panel--endpaper .btn--out, .panel--night .btn--out {
  background: transparent; color: var(--paper); }

/* ---- the lap: the cover sits across the seam ------------------------ */
/* The signature. A book is glued into its endpaper; the cover overlaps the
   join by a fixed amount, so the page is recognisable from a 100px crop. */

/* Washed to 50%, the way every .room wall is mixed toward paper. This band was
   the last flooded ground on the site and it is why a book page did not look
   like the rest of it: brick next to walls sitting at #7D8EB6. At 50%
   brick lands on #D09182. No text sits directly on this band - the words are
   all inside .lap__below, which is paper - so the wash costs no contrast. */
.lap { background: color-mix(in srgb, var(--endpaper) 50%, var(--paper));
       border-top: var(--seam) solid var(--ink);
       padding: 0 var(--gut);
       position: relative; isolation: isolate; }
/* The same wallpaper the rooms have, in ink at 17%, so the band reads as a
   surface rather than a slab of colour. */
.lap::before, .spreads::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ink); opacity: .17;
  -webkit-mask-image: var(--pattern); mask-image: var(--pattern);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 140px; mask-size: 140px;
}
.lap__inner { position: relative; padding-top: clamp(26px, 4vw, 54px); }
.lap__cover {
  width: min(62%, 300px); margin: 0 auto; position: relative; z-index: 2;
  box-shadow: 0 12px 30px -12px rgba(31,27,23,.6);
  border: 1px solid rgba(31,27,23,.3);
}
.lap__below {
  background: var(--paper); margin: -72px calc(var(--gut) * -1) 0;
  padding: 88px var(--gut) clamp(26px, 3vw, 44px);
}
/* The paper bleeds off the right edge on purpose, so the endpaper shows only
   on the left - but the words inside it are capped at 62ch for reading, which
   left about 63% of the panel as bare cream running the full height of the
   page. The buy control was at the bottom of that single column, under the
   blurb and a seven-item list: the one thing a buyer came for, below the fold.
   It moves into an aside beside the blurb, which fills the panel and puts the
   button next to the words that sell it. */
@media (min-width: 64rem) {
  .lap__below {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, var(--measure)) minmax(240px, 22rem);
    gap: 0 clamp(32px, 4vw, 72px);
  }
  /* The aside starts level with the blurb, not with the title. */
  .lap__side { padding-top: .4em; }
  .lap__side .spec { margin-top: 22px; }
}
@media (min-width: 58rem) {
  /* A definite 300px track, not minmax(0, min-content). The cover is an <img>
     carrying the global max-width:100%, and sizing its own column by its
     min-content made that percentage circular: the track asked the image how
     wide it wanted to be, the image asked the track. Chrome resolved the pair
     at 2.22px, so the cover - the one thing on a book page that has to be
     there - rendered as a dot on every screen wide enough for this query.
     The column was always going to be 300px; saying so removes the loop. */
  .lap__inner { display: grid; grid-template-columns: 300px 1fr;
                gap: 0 clamp(28px,4vw,64px); }
  .lap__cover { width: 300px; margin: 0; }
  .lap__below { margin: 0 calc(var(--gut) * -1) 0 0; padding: clamp(26px,3vw,44px) var(--gut);
                align-self: start; }
}

/* ---- catalogue tiles: butted, no gaps ------------------------------- */

.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: var(--seam); background: var(--ink);
  border-top: var(--seam) solid var(--ink); border-bottom: var(--seam) solid var(--ink);
}
.tile {
  background: var(--endpaper); color: var(--endpaper-tx);
  padding: 12px 11px 14px; text-decoration: none; display: block;
}
.tile img { width: 100%; margin-bottom: 8px; border: 1px solid rgba(31,27,23,.25); }
/* These are spans, so they need to be told to stack. */
.tile__t { display: block; font-size: 12.5px; line-height: 1.2; font-weight: 700; }
.buy__t { display: block; }

/* ---- the colouring PDFs on a book page ------------------------------ */

.buy { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
       gap: clamp(10px, 2vw, 22px); margin-top: 18px; }
.buy > * { min-width: 0; }   /* grid items default to min-width:auto and refuse to shrink */
.buy a { text-decoration: none; color: inherit; }
.buy img { width: 100%; border: 1px solid rgba(31,27,23,.22); }
.buy__t { font-size: 12.5px; line-height: 1.25; margin-top: 8px; font-weight: 700; }

/* ---- inside the book: pictures on night ----------------------------- */

.night { background: var(--night); color: var(--night-tx); }
/* The same argument the scenes settled, applied where it was never applied.
   The plates are portrait 7:10, so a full-bleed spread on a desktop is about
   3000px tall - six of them made "Inside the book" 18,413px of an 24,118px
   page, three quarters of the whole thing, and a buyer had to scroll past a
   mural to reach the shelf at the bottom. Capped, each spread is a page you
   look at, held on the night ground the way a book is held open, and the
   section comes down to roughly a screen per page. On a phone max-width wins
   and it still fills the width, which is where full-bleed belongs. */
/* Six pages laid out as a set, not stacked one under another. Capping each at
   82vh was already a big improvement on the 3000px mural, but six of them in a
   column is still six screens of scrolling to see what is essentially a
   contact sheet - and the point of "Inside the book" is that you can take the
   whole thing in. Three across, two rows, on the washed endpaper the band
   above it uses, so the section belongs to the page instead of dropping into
   a dark well halfway down.
   The grid is capped so the pages stay page-sized on a wide monitor rather
   than growing into six murals side by side. */
.spreads {
  position: relative; isolation: isolate;
  background: color-mix(in srgb, var(--endpaper) 50%, var(--paper));
  border-top: var(--seam) solid var(--ink);
  padding: clamp(20px,3vw,38px) var(--gut) clamp(26px,3.5vw,46px);
  display: grid; gap: clamp(16px, 2.2vw, 30px);
  grid-template-columns: minmax(0, 1fr);
  /* The columns are capped and centred rather than the container being
     max-width'd - the band still bleeds the full width of the page, the pages
     on it stay page-sized. */
  justify-content: center;
}
@media (min-width: 34rem) { .spreads { grid-template-columns: repeat(2, minmax(0, 360px)); } }
@media (min-width: 60rem) { .spreads { grid-template-columns: repeat(3, minmax(0, 360px)); } }
.spread { margin: 0; }
.spread picture { display: block; }
.spread img {
  width: 100%; height: auto;
  border: 2px solid var(--ink);
  box-shadow: 0 10px 24px -12px rgba(31,27,23,.6);
}
.caption {
  padding: 12px var(--gut) 15px; background: var(--night);
  color: var(--night-tx); font-size: 14px; margin: 0;
}
.caption--tint { background: var(--endpaper); color: var(--endpaper-tx); }

/* ---- colouring ------------------------------------------------------ */

/* Two columns, always: a sheets list is one book's pair, never a catalogue.

   It used to be the catalogue - one flat grid of all thirty - and the column
   count carried the meaning, because auto-fill picked seven on a wide screen
   and split half the books' pairs across a row break. That was fixed by
   forcing an even count at 4/6/8, which worked but left the pairing resting on
   arithmetic. Both listings group by book now, so the pair is structural and
   the stepped column counts are gone with the problem they solved. */
.sheets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px); margin-top: 26px; padding: 0; list-style: none;
}
/* A sheet is line art to colour in, not a thumbnail: past about 300px it is
   just bigger, and two of them should not outrun the text beside them. */
.sheets--pair { grid-template-columns: repeat(2, minmax(0, 300px)); }
.sheet img {
  width: 100%; background: #fff; margin-bottom: 10px;
  border: 1px solid var(--rule); border-radius: 6px;
}
.sheet__c { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }

/* ---- tables, notes, footer ------------------------------------------ */

.spec { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; max-width: 34rem; }
.spec th, .spec td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.spec th { font-weight: 500; color: var(--ink-soft); width: 46%; }

.pending {
  border-left: var(--seam) solid var(--ink); padding: 2px 0 2px 14px;
  color: var(--ink-soft); margin-top: 18px; max-width: var(--measure);
}
.alias { font-size: 13.5px; color: var(--ink-soft); margin-top: -.4em; }

/* The date the privacy policy last changed. Metadata about the document, not
   a sentence in it, so it steps down from the prose and sits tight under the
   lede it qualifies - the same treatment .alias gets under a title. */
.stamp {
  font-size: 13.5px; color: var(--ink-soft);
  margin-top: -.2em; letter-spacing: .01em;
}

/* The footer was the same five links the bar already had, laid flat, with the
   one genuinely useful line on the page - what the book physically is, and how
   it was made - set in the smallest grey on the site. It is a colophon now:
   three named groups, and the imprint given its own rule and its own weight,
   because "24pp, 7x10in paperback" is what a buyer wants and "illustrated
   with AI assistance and checked by hand" is what they deserve to be told. */
.colophon {
  padding: clamp(26px,3.4vw,44px) var(--gut) clamp(26px,3.4vw,44px);
  background: var(--paper-2); border-top: var(--seam) solid var(--ink);
  font-size: 13px; color: var(--ink-soft);
}
.colophon a { color: var(--ink); }
.colophon__top {
  display: grid; gap: clamp(20px,3vw,40px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 46rem) {
  .colophon__top { grid-template-columns: auto 1fr; }
}
.mark--foot { align-self: start; }
/* Capped, not 1fr. Stretched across a 1456px screen the three groups sat
   380px apart and stopped reading as groups at all. */
.colophon__cols {
  display: grid; gap: 6px clamp(20px,3vw,44px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 210px));
  justify-content: start;
}
.colophon__col { display: flex; flex-direction: column; }
.colophon__col h2 {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 400; color: var(--ink-soft); margin: 0 0 2px;
}
.colophon__col a {
  /* 44 both ways: "About" is 35px of text, and a target is a box, not a word. */
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center;
  text-decoration: none; border-bottom: 2px solid transparent;
  align-self: flex-start;
}
.colophon__col a:hover { border-bottom-color: var(--marigold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}