/* 黑咪之爪 · components. Static look only; motion lives in motion.css.
   Sizes use --u (1% of the spread) so pages keep their proportions. */

/* ---------- Chapter opener: red manuscript squares ---------- */

.chapter-head { position: relative; display: flex; align-items: flex-end; gap: calc(var(--cell) * 0.22); flex: none; overflow-x: clip; }
.chapter-no { font: 600 calc(var(--cell) * 0.28) / 1 var(--serif); color: var(--ink-red); letter-spacing: 0.06em; mix-blend-mode: multiply; padding-bottom: 0.3em; }
.grid-title { display: flex; margin: 0; font: 900 calc(var(--cell) * 0.66) / 1 var(--serif); perspective: 600px; }
.grid-title.latin-title { font: 600 calc(var(--cell) * 0.74) / 1 'EB Garamond', serif; }
.cell { position: relative; display: grid; place-items: center; width: var(--cell); height: var(--cell); border: 1.5px solid var(--ink-red); margin-left: -1.5px; mix-blend-mode: multiply; }
.cell:first-child { margin-left: 0; }
.cell b { font-weight: inherit; filter: url(#ink); position: relative; }
.cell b::before { content: attr(data-ch); position: absolute; inset: 0; color: var(--ink-yellow); transform: translate(0.03em, -0.025em); z-index: -1; }

.runner {
  position: absolute; z-index: 2; top: 50%; left: 0;
  height: calc(var(--cell) * 1.9); aspect-ratio: 1090 / 635;
  background: var(--ink-black);
  -webkit-mask: url('../img/cat_mask.png') center / contain no-repeat;
          mask: url('../img/cat_mask.png') center / contain no-repeat;
  transform: translate(-110%, -50%) scaleX(-1);
  pointer-events: none; visibility: hidden;
}
.cell .leaf { position: absolute; inset: 3px; background: color-mix(in srgb, var(--ink-red) 85%, var(--stock)); mix-blend-mode: multiply; transform-origin: left center; backface-visibility: hidden; }
.cell .leaf::after { content: ''; position: absolute; right: 14%; top: 50%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--ink-yellow); }
.cell .pawprint {
  position: absolute; width: 46%; aspect-ratio: 1; right: 4%; bottom: 4%;
  background: radial-gradient(circle at 50% 70%, var(--ink-black) 0 26%, transparent 27%),
              radial-gradient(circle at 18% 36%, var(--ink-black) 0 11%, transparent 12%),
              radial-gradient(circle at 39% 18%, var(--ink-black) 0 11%, transparent 12%),
              radial-gradient(circle at 62% 18%, var(--ink-black) 0 11%, transparent 12%),
              radial-gradient(circle at 83% 36%, var(--ink-black) 0 11%, transparent 12%);
  opacity: 0; mix-blend-mode: multiply;
}
.cell .scratch { position: absolute; inset: -10%; width: 120%; height: 120%; fill: none; stroke: var(--ink-red); stroke-width: 7; stroke-linecap: round; mix-blend-mode: multiply; }
.cell .scratch path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- Speech bubbles ---------- */

.bubble {
  position: absolute; z-index: 3; left: var(--x, 50%); top: var(--y, 0);
  max-width: 13em; margin: 0; padding: 0.5em 0.8em 0.55em;
  font: 400 calc(var(--fs) * 0.95) / 1.45 var(--comic);
  color: var(--ink-black); background: #fffdf5;
  border: 2px solid var(--ink-black); border-radius: 1.1em 1.1em 1.1em 0.3em;
  box-shadow: 3px 3px 0 var(--ink-yellow);
  pointer-events: none; white-space: normal; text-align: left;
}
.bubble::after { content: ''; position: absolute; left: 14px; bottom: -12px; width: 16px; height: 14px; background: inherit; border: 2px solid var(--ink-black); border-top: 0; border-right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* Tail on the right, pointing down to a speaker on the right. */
.bubble.tail-r { border-radius: 1.1em 1.1em 0.3em 1.1em; transform-origin: calc(100% - 12px) 100%; }
.bubble.tail-r::after { left: auto; right: 14px; border-left: 0; border-right: 2px solid var(--ink-black); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble.sour { box-shadow: 3px 3px 0 var(--ink-red); }
.bubble.grawlix { letter-spacing: 0.06em; color: var(--ink-red); box-shadow: 3px 3px 0 var(--ink-black); }
.bubble:empty { visibility: hidden; }

/* ---------- 02: the library's web page ---------- */

.browser { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: #fffdf5; border: 2px solid var(--ink-black); border-radius: calc(var(--u) * 0.8); box-shadow: 5px 5px 0 var(--ink-blue); overflow: hidden; font-size: calc(var(--fs) * 0.92); }
.browser-bar { display: flex; align-items: center; gap: 5px; padding: calc(var(--u) * 0.7) calc(var(--u) * 1); border-bottom: 2px solid var(--ink-black); font: 600 calc(var(--u) * 0.85) / 1 var(--serif); letter-spacing: 0.04em; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-black); flex: none; }
.browser-bar i:nth-child(1) { background: var(--ink-red); }
.browser-bar i:nth-child(2) { background: var(--ink-yellow); }
.browser-bar span { margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink-black) 7%, transparent); }
.browser-sub { margin: calc(var(--u) * 0.8) calc(var(--u) * 1.4) 0; font: italic 400 calc(var(--u) * 0.85) / 1.3 'EB Garamond', serif; opacity: 0.7; }
.staff { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 34% 1fr; gap: calc(var(--u) * 1.2); align-items: center; padding: calc(var(--u) * 1) calc(var(--u) * 1.4); line-height: 1.75; }
.staff + .staff { border-top: 1.5px dashed var(--rule); grid-template-columns: 1fr 34%; }
.staff + .staff figure { order: 2; }
.staff figure { height: 100%; display: flex; align-items: center; }
.staff figure .art { max-height: 100%; object-fit: contain; }
.staff h3 { margin: 0 0 2px; font: 400 calc(var(--u) * 1.15) / 1.3 var(--cute); color: var(--ink-blue); }
.staff h3 small { font-size: 0.78em; color: var(--ink-black); opacity: 0.7; margin-left: 0.4em; }
.staff p { margin: 0; text-align: left; }
.staff-owner { margin: 0; padding: calc(var(--u) * 0.7) calc(var(--u) * 1.4); border-top: 1.5px dashed var(--rule); font: 400 calc(var(--u) * 0.95) / 1.4 var(--cute); color: var(--ink-blue); }
.staff-owner b { color: var(--ink-black); font-weight: 400; margin-right: 0.5em; }
.notes { position: absolute; inset: 0; pointer-events: none; }
.notes i { position: absolute; top: 18%; left: 62%; font: normal 600 calc(var(--u) * 1.4) / 1 var(--serif); color: var(--ink-blue); opacity: 0; }
.ears { position: absolute; top: 4%; left: 42%; width: 40%; height: 20%; pointer-events: none; }

/* ---------- 04: shelter listings ---------- */

.listing { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); padding: calc(var(--u) * 1.4); background: #fffdf5; border: 2px solid var(--ink-black); border-radius: calc(var(--u) * 0.6); font-size: calc(var(--fs) * 0.95); }
.page.l .listing { transform: rotate(-0.8deg); }
.page.r .listing { transform: rotate(0.6deg); margin-top: calc(var(--u) * 3); }
.listing p { margin: 0; text-align: left; }
.tags, .fit { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { font: italic 500 calc(var(--u) * 0.95) / 1 'EB Garamond', serif; padding: 3px 10px 4px; border: 1.5px solid var(--ink-black); border-radius: 99px; }
.listing.chosen .tags li { background: var(--ink-yellow); }
.fit li { font: 400 calc(var(--u) * 0.78) / 1 var(--cute); padding: 3px 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink-black) 6%, transparent); }
.fit b { font: 600 1em/1 var(--serif); margin-left: 2px; }
.fit .no b { color: var(--ink-red); }
.fit .yes b { color: #2c8a4a; }
.fit .maybe b { color: var(--ink-blue); }
.fit .no-need b { font: 400 1em/1 var(--cute); }
.stamp { position: absolute; right: 7%; top: 18%; padding: 0.2em 0.5em; font: 900 calc(var(--u) * 2.2) / 1.1 var(--serif); letter-spacing: 0.12em; color: var(--ink-red); border: 3px solid var(--ink-red); border-radius: 6px; transform: rotate(-14deg); mix-blend-mode: multiply; filter: url(#ink); pointer-events: none; }
.listing.chosen .stamp { color: var(--ink-blue); border-color: var(--ink-blue); transform: rotate(9deg); }

/* ---------- Bento of living panels ---------- */

.bento { flex: 1 1 0; min-height: 0; display: grid; gap: calc(var(--u) * 1); }
.bento.home { grid-template-columns: 1fr 1.1fr; grid-template-rows: 1fr 1fr; }
.bento.home .tall { grid-row: span 2; }
.bento.play { grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr 1fr; }
.bento.play .wide { grid-column: span 2; }
.panel { position: relative; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 0.6); background: #fffdf5; border: 2px solid var(--ink-black); border-radius: calc(var(--u) * 0.6); overflow: hidden; }
.panel > .art { flex: 1 1 0; min-height: 0; object-fit: contain; }
.panel:nth-child(3n+1) { box-shadow: 4px 4px 0 var(--ink-yellow); }
.panel:nth-child(3n+2) { box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink-red) 80%, transparent); }
.panel:nth-child(3n) { box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink-blue) 70%, transparent); }
.panel .note { margin: 0.3em 0 0; flex: none; }
.moth-scene { flex: 1 1 0; box-shadow: 4px 4px 0 var(--ink-yellow); }
.moth-wrap { position: relative; flex: 1 1 0; min-height: 0; aspect-ratio: 1192 / 1320; max-width: 100%; margin: 0 auto; }
.moth-wrap > .art:first-child { width: 100%; height: 100%; object-fit: contain; }
.moth-scene .moth { position: absolute; left: calc(118 / 1192 * 100%); top: calc(266 / 1320 * 100%); width: calc(150 / 1192 * 100%); }

/* ---------- 05: before / after ---------- */

.before-after { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 0.8fr 0.25fr 1fr; grid-template-rows: minmax(0, 0.8fr) minmax(0, 1fr) auto; gap: 0 calc(var(--u) * 0.6); }
.ba.lady { grid-area: 1 / 1 / 2 / 2; }
.ba-arrow { grid-area: 1 / 2 / 3 / 3; align-self: center; justify-self: center; }
.ba.after { grid-area: 2 / 2 / 3 / 4; justify-content: flex-end; }
.ba { position: relative; height: 100%; min-height: 0; display: flex; align-items: flex-end; }
.ba .art { max-height: 100%; object-fit: contain; }
.ba.lady { align-items: center; }
.ba-tag { position: absolute; left: 0; top: 0; font: 400 calc(var(--u) * 0.8) / 1 var(--cute); padding: 3px 7px; background: var(--ink-black); color: #fffdf5; border-radius: 3px; }
.ba-arrow { font: 400 calc(var(--u) * 2.4) / 1 var(--cute); color: var(--ink-red); }
.before-after .note { grid-column: 1 / -1; }

/* ---------- 04: the two words, two cards ---------- */

.cards-page { gap: calc(var(--u) * 1.6); }
.flip { all: unset; position: relative; display: block; flex: 1 1 0; min-height: 0; cursor: pointer; perspective: 1400px; -webkit-tap-highlight-color: transparent; transform-origin: 50% 90%; }
.flip:focus-visible { outline: 2px dashed var(--ink-blue); outline-offset: 6px; }
.flip .face { position: absolute; inset: 0; display: block; padding: calc(var(--u) * 1.3) calc(var(--u) * 1.6); background: #fffdf5; border: 2px solid var(--ink-black); border-radius: calc(var(--u) * 1); box-shadow: 6px 6px 0 var(--ink-yellow); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 700ms var(--ease-spring); overflow: hidden; }
.flip .face.back { transform: rotateY(180deg); box-shadow: 6px 6px 0 var(--ink-red); }
.flip.play .face.front { box-shadow: 6px 6px 0 var(--ink-blue); }
.flip[aria-pressed='true'] .front { transform: rotateY(-180deg); }
.flip[aria-pressed='true'] .back { transform: rotateY(0); }
.face .word { display: block; font: italic 500 calc(var(--u) * 2.4) / 1 'EB Garamond', serif; }
.face .small-text { position: relative; z-index: 2; display: block; margin-top: calc(var(--u) * 0.6); max-width: 50%; font: 400 calc(var(--fs) * 0.9) / 1.6 var(--serif); }
.face .art { position: absolute; }
.power { display: inline-block; margin-left: 0.15em; font-weight: 900; font-size: 1.35em; line-height: 1.2; color: var(--ink-black); }
.power.red { color: var(--ink-red); mix-blend-mode: multiply; }
.social .front .art { right: 4%; bottom: 5%; height: 82%; }
.social .back .art { right: 4%; bottom: 5%; height: 80%; }
.social .bubble { max-width: 11em; font-size: calc(var(--fs) * 0.95); }
.big-glyph { position: absolute; left: 5%; bottom: 0; font: 900 calc(var(--u) * 10) / 1 var(--serif); color: var(--ink-red); mix-blend-mode: multiply; filter: url(#ink); opacity: 0.9; }
.claw { position: absolute; left: 3%; bottom: 18%; width: 24%; aspect-ratio: 1; fill: none; stroke: var(--ink-red); stroke-width: 7; stroke-linecap: round; mix-blend-mode: multiply; }
.claw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* The couplet: two vertical lines in red ink, no frame. */
.couplet { position: absolute; right: 5%; top: 9%; display: flex; gap: calc(var(--u) * 0.7); writing-mode: vertical-rl; font: 600 calc(var(--u) * 1.15) / 1 var(--serif); letter-spacing: 0.22em; color: var(--ink-red); mix-blend-mode: multiply; }
.couplet span { white-space: nowrap; }
.couplet span + span { margin-block-start: calc(var(--u) * 1.6); }
.pounce-art { left: 18%; bottom: 3%; height: 56%; }
.vacuum-art { right: 3%; bottom: 4%; height: 70%; }
.small-text.after { position: absolute !important; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.2); max-width: 34% !important; margin: 0; color: var(--ink-blue); font-family: var(--cute) !important; }
/* A tiny "turn me over" mark in the corner instead of words. */
.flip-hint { position: absolute; right: calc(var(--u) * 0.8); bottom: calc(var(--u) * 0.7); z-index: 4; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); fill: #fffdf5; stroke: var(--ink-black); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.flip-hint path { fill: none; stroke: var(--ink-red); }

/* ---------- 05: the door strip ---------- */

.door-page { isolation: isolate; }
.ren { position: absolute; z-index: -1; right: -2%; top: 8%; font: 900 calc(var(--u) * 38) / 1 var(--serif); color: color-mix(in srgb, var(--ink-red) 11%, transparent); pointer-events: none; }
.strip { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 0.66fr 1fr; align-items: end; gap: calc(var(--u) * 1.4); }
.strip figure { height: 100%; min-height: 0; display: flex; align-items: flex-end; }
.strip .art { max-height: 100%; object-fit: contain; object-position: bottom; }
.treat { align-self: flex-end; }

/* ---------- 06: door with Yumi peeking out of the gap ---------- */

.door-row { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 42%; gap: calc(var(--u) * 1.4); align-items: start; }
.door-loop { align-self: end; }
.door-loop { position: relative; isolation: isolate; }
.door-loop .door { position: relative; z-index: 1; }
/* The gap sits at the leaf's free edge; Yumi slides out of it, at cat size. */
.peek-gap { position: absolute; z-index: 2; left: 77.2%; bottom: 7.4%; width: 19%; aspect-ratio: 600 / 1135; overflow: hidden; }
.peek-gap .peek { width: 100%; transform: translateX(-100%); }

/* ---------- 06: Dunbar ---------- */

.dunbar { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.dunbar svg { flex: 1 1 0; min-height: 0; width: 100%; }
.dunbar circle { stroke: var(--ink-black); stroke-width: 1.4; }
.dunbar .r6 { fill: color-mix(in srgb, var(--ink-blue) 8%, transparent); stroke-dasharray: 3 4; }
.dunbar .r5 { fill: color-mix(in srgb, var(--ink-blue) 12%, transparent); stroke-dasharray: 3 4; }
.dunbar .r4 { fill: color-mix(in srgb, var(--ink-blue) 16%, transparent); stroke-width: 2.4; }
.dunbar .r3 { fill: color-mix(in srgb, var(--ink-yellow) 30%, transparent); }
.dunbar .r2 { fill: color-mix(in srgb, var(--ink-yellow) 55%, transparent); }
.dunbar .r1 { fill: color-mix(in srgb, var(--ink-red) 70%, transparent); }
.dunbar text { text-anchor: middle; font: 400 13px var(--cute); fill: var(--ink-black); }
.dunbar .n { font: 600 15px 'EB Garamond', serif; fill: var(--ink-red); }
.dunbar .core { font-size: 11px; fill: #fffdf5; }
.dunbar .core .n { fill: #fffdf5; font-size: 16px; }

/* ---------- 06: the two fears ---------- */

.fears .page { justify-content: center; padding: calc(var(--u) * 4); }
.fears .bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; mix-blend-mode: normal; }
.fears .outside { color: #f4efe4; background: #14121b; }
.fears .inside { color: #fffdf5; background: #1e4f8f; }
.fear-text { position: relative; z-index: 1; }
.fear-text p { margin: 0; }
.fear-text .pre { font: 400 calc(var(--u) * 1.2) / 1.6 var(--serif); opacity: 0.8; margin-bottom: calc(var(--u) * 1.4); }
.fear-text .big { font: 900 calc(var(--u) * 2.9) / 1.45 var(--serif); text-shadow: 0 0 calc(var(--u) * 1.2) rgb(0 0 0 / 0.55); }
.fear-text .post { margin-top: calc(var(--u) * 1.6); font: 400 calc(var(--u) * 1.3) / 1.6 var(--cute); }
.outside .fear-text { margin-top: -20%; }
.outside .fear-text .big { max-width: 9em; }
.inside .fear-text { align-self: flex-end; text-align: right; margin-top: -30%; }
.inside .fear-text .big { max-width: 8em; margin-left: auto; }
.box { position: relative; z-index: 1; background: color-mix(in srgb, #fffdf5 94%, transparent); border: 1.5px solid var(--ink-black); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); box-shadow: 4px 4px 0 rgb(0 0 0 / 0.18); color: var(--ink-black); }
.box.oikos { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 4); width: 64%; font-size: calc(var(--fs) * 0.95); }
.box.oikos p { margin: 0; text-align: left; }
.alt-btn { all: unset; position: absolute; z-index: 2; top: calc(var(--u) * 1.2); right: calc(var(--u) * 1.2); padding: 3px 9px; border-radius: 99px; background: rgb(255 253 245 / 0.85); color: var(--ink-black); font: 400 11px/1.3 var(--cute); cursor: pointer; }
.page.l .alt-btn { right: auto; left: calc(var(--u) * 1.2); }
.alt-btn:hover { background: var(--ink-yellow); }

/* ---------- 07: the atlas spread ---------- */

.atlas-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0.95; z-index: 0; }
.atlas .page { z-index: 1; justify-content: center; }
.atlas .box { padding: calc(var(--u) * 2) calc(var(--u) * 2.2); }
.atlas .chapter-head { margin-bottom: var(--gap); }
.borges { margin: 0; }
.borges svg { width: 100%; height: auto; }
.borges .line, .borges .dash, .borges .faint { fill: none; stroke: var(--ink-black); stroke-width: 1.8; stroke-linecap: round; }
.borges .dash { stroke-dasharray: 3 4; }
.borges .faint { stroke: var(--ink-blue); stroke-dasharray: 2 3; }
.borges .dot { fill: var(--ink-red); }
.borges .spray circle { fill: var(--ink-red); }
.borges .cap text { text-anchor: middle; font: 400 13px var(--cute); fill: var(--ink-blue); }

/* ---------- 07: care ---------- */

.care-row { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(var(--u) * 1.6); align-items: start; }
.chain ol { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * 1.5); }
.chain li { position: relative; justify-self: start; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.9); font: 600 calc(var(--fs) * 0.86) / 1.4 var(--serif); background: #fffdf5; border: 2px solid var(--ink-black); border-radius: 999px; }
.chain li:nth-child(2) { margin-left: 8%; }
.chain li:nth-child(3) { margin-left: 16%; }
.chain li.last { margin-left: 24%; border-style: dashed; color: var(--ink-red); background: transparent; }
.chain li + li::before { content: ''; position: absolute; left: 18px; top: calc(var(--u) * -1.6); height: calc(var(--u) * 1.5); border-left: 2px dashed var(--ink-black); }
.chain li::after { content: ''; position: absolute; left: 13px; top: calc(var(--u) * -1.8); width: 10px; height: 10px; border-radius: 50%; background: var(--ink-red); opacity: 0; }
.chain li:first-child::after { display: none; }
.carer svg { width: 100%; height: auto; }
.carer .node { fill: #fffdf5; stroke: var(--ink-black); stroke-width: 2; }
.carer text { text-anchor: middle; font: 600 12px var(--serif); fill: var(--ink-black); }
.carer .arr { fill: none; stroke: var(--ink-black); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carer .arr.back { stroke: var(--ink-red); stroke-dasharray: 4 5; }
.carer .q { font: 900 20px var(--serif); fill: var(--ink-red); }

/* ---------- 08 ---------- */

.caption-latin { margin-top: 0.3em; font: italic 400 calc(var(--u) * 1.4) / 1.3 'EB Garamond', serif; }
.glasses { flex: 0.8 1 0; }
.footnote { flex: none; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-top: 2px solid var(--ink-black); background: color-mix(in srgb, var(--ink-yellow) 14%, transparent); font: 400 calc(var(--fs) * 0.82) / 1.7 var(--serif); }
.footnote p { margin: 0 0 0.6em; text-align: left; }
.footnote p:last-child { margin: 0; }
.footnote p:first-child::before { content: '注 '; font-weight: 900; color: var(--ink-red); }

/* ---------- 09 ---------- */

.search { flex: none; padding: calc(var(--u) * 1.2); background: #fffdf5; border: 2px solid var(--ink-black); border-radius: calc(var(--u) * 0.8); box-shadow: 5px 5px 0 var(--ink-blue); }
.search-box { display: flex; align-items: center; gap: 2px; min-height: calc(var(--u) * 3); padding: 0 calc(var(--u) * 1.1); border: 2px solid var(--ink-black); border-radius: 99px; font: 400 calc(var(--fs) * 0.95) / 1 var(--serif); }
.search-box::before { content: ''; width: 12px; height: 12px; margin-right: 8px; border: 2.5px solid var(--ink-black); border-radius: 50%; box-shadow: 5px 5px 0 -3.5px var(--ink-black); flex: none; }
.caret { width: 2px; height: 1.2em; background: var(--ink-red); }
.results { margin: calc(var(--u) * 1) 0 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * 0.7); }
.results li { height: calc(var(--u) * 0.7); border-radius: 6px; background: color-mix(in srgb, var(--ink-black) 12%, transparent); transform-origin: left; }
.results li:nth-child(1) { width: 86%; }
.results li:nth-child(2) { width: 64%; }
.results li:nth-child(3) { width: 74%; }

.stats { flex: none; margin: 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); background: var(--ink-black); color: #fffdf5; border-radius: calc(var(--u) * 0.8); box-shadow: 5px 5px 0 var(--ink-yellow); font: 400 calc(var(--fs) * 0.92) / 1 var(--comic); display: grid; gap: calc(var(--u) * 0.8); }
.stats div { display: grid; grid-template-columns: 5em 1fr; align-items: center; gap: 10px; }
.stats dt { letter-spacing: 0.06em; }
.stats dd { position: relative; isolation: isolate; margin: 0; height: calc(var(--u) * 1.2); border: 1.5px solid #fffdf5; border-radius: 4px; font-size: calc(var(--u) * 0.8); line-height: calc(var(--u) * 1); text-align: right; padding-right: 6px; color: #fffdf5; }
.stats dd::before { content: ''; position: absolute; inset: 1.5px auto 1.5px 1.5px; width: calc(var(--v) * (100% - 3px)); background: var(--ink-yellow); border-radius: 2px; transform-origin: left; z-index: -1; }
.stats .hot dd::before { background: var(--ink-red); }

.penguins { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 0.8fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--u) * 1); align-items: end; }
.penguins figure { height: 100%; display: flex; align-items: flex-end; min-height: 0; }
.penguins .art { max-height: 100%; object-fit: contain; }
.penguins .note { grid-column: 1 / -1; }
.coda-page { justify-content: center; }
.coda-page .fig { flex: 0.9 1 0; }
.coda-page .marginalia { position: absolute; right: calc(var(--pad-x) * 0.7); top: var(--pad-y); max-height: 62%; }

/* ---------- 10 ---------- */

.plates { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 0 calc(var(--u) * 0.4); }
.plates .art { max-height: 100%; object-fit: contain; width: 136%; margin-left: -18%; }
.plates .p1 { z-index: 1; }
.plates .p2 { transform: translateY(-12%) rotate(6deg); }
.plates .p3 { transform: translateY(4%) rotate(-4deg); z-index: 1; }
.plates .note { grid-column: 1 / -1; text-align: center; }
.cook-row { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); align-items: end; }
.cook-row figure { height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.cook-row figure > .art { flex: 1 1 0; min-height: 0; object-fit: contain; object-position: bottom; }
.pot-stage { position: relative; flex: 1 1 0; min-height: 0; aspect-ratio: 1100 / 1275; max-width: 100%; margin: 0 auto; }
.pot-stage > .art:first-child { width: 100%; height: 100%; object-fit: contain; }
.pot-loop .steam { position: absolute; left: 30%; top: 2%; width: 20%; opacity: 0; }
.pot-loop .steam.two { left: 38%; width: 16%; }

.menu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 2) calc(var(--u) * 1.8); text-align: center; background: #f7f2e6; border: 1px solid color-mix(in srgb, var(--ink-black) 40%, transparent); box-shadow: 0 8px 22px -12px rgb(0 0 0 / 0.4); font-family: 'EB Garamond', serif; }
.menu p { margin: 0; }
.alien { width: calc(var(--u) * 3.4); fill: var(--ink-black); }
.alien .eye { fill: #b77cc9; }
.menu-name { font: 600 calc(var(--u) * 1.15) / 1.1 'EB Garamond', serif; letter-spacing: 0.12em; }
.menu-greek { font: italic 400 calc(var(--u) * 1.1) / 1 'EB Garamond', serif; letter-spacing: 0.06em; }
.menu-greek span { font-style: normal; font-size: 0.7em; margin: 0 0.4em; opacity: 0.7; }
.menu-mission { margin: calc(var(--u) * 0.8) 0 !important; font: italic 400 calc(var(--fs) * 0.95) / 1.9 var(--serif); }
.menu-sign { font: 400 calc(var(--u) * 1.3) / 1 var(--cute); color: var(--ink-blue); }

.finale-page { justify-content: flex-start; }
.finale-art .bubble { font-size: calc(var(--fs) * 1.1); }
.finale-text p { margin: 0 0 1em; font: 600 calc(var(--u) * 1.7) / 1.9 var(--serif); }
.finale-text .last-line { font-weight: 900; font-size: calc(var(--u) * 2.4); }
.end-mark { margin: 0; text-align: center; font: 400 calc(var(--u) * 1) / 1 var(--cute); color: var(--ink-blue); letter-spacing: 0.3em; }

/* ---------- Phones ---------- */

@media (max-width: 767px) {
  .flip.social, .flip.play { flex: none; height: 92vw; }
  .face .small-text { max-width: 58%; }
  .strip, .door-row, .penguins, .cook-row, .plates { flex: none; }
  .strip { height: 60vw; }
  .door-row { grid-template-columns: 1fr; }
  .door-loop { width: 60%; justify-self: center; }
  .plates { height: 46vw; }
  .cook-row { height: 70vw; }
  .listing { flex: none; }
  .listing .fig { height: 60vw; }
  .browser, .menu, .dunbar { flex: none; }
  .dunbar svg { flex: none; height: 82vw; }
  .care-row { grid-template-columns: 1fr; flex: none; }
  .ren { font-size: 60vw; }
  .fears .page { min-height: 130vw; }
  .box.oikos { position: relative; inset: auto; width: auto; margin-top: 20px; }
  .inside .fear-text, .outside .fear-text { margin-top: 0; }
  .coda-page .marginalia { position: static; writing-mode: horizontal-tb; max-height: none; }
  .couplet { font-size: 14px; }
  .big-glyph { font-size: 110px; }
}

/* ---------- 11-08 additions ---------- */

/* 10: the menu laid on the courtyard picture. */
.menu-stack { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.menu-stack .fig { flex: 1 1 0; }
.menu-stack .fig .art { object-position: left top; }
.menu-stack .menu { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 0.68; flex: none; transform: rotate(3deg); z-index: 2; }

@media (max-width: 767px) {
  .front-cover { min-height: 150vw; }
  .issue { left: 20px; top: 24px; font-size: 64px; }
  .issue span { font-size: 14px; }
  .title { right: 18px; top: 22px; font-size: 62px; }
  .cover-cat { left: 14px; top: 132px; width: 68%; }
  .date { right: 20px; bottom: 96px; font-size: 12px; }
  .inkbar { right: 20px; bottom: 70px; }
  .inkbar i { width: 10px; }
  .staff-run { bottom: 24px; height: 40px; }
  .sheet-note { font-size: 22px; }
  .singer { width: 64px; }
  .singer b { font-size: 18px; }
  .back-cover .imprint { margin-bottom: 0; }
}

/* Print: both faces of a flip card, side by side. */
@media print {
  .cards-page .flip { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); perspective: none; }
  .flip .face, .flip .face.back, .flip[aria-pressed='true'] .front { position: relative; inset: auto; transform: none !important; backface-visibility: visible; }
  .face .word { font-size: calc(var(--u) * 1.8); }
  .face .small-text { max-width: 100%; font-size: calc(var(--fs) * 0.78); }
  .social .front .art, .social .back .art { height: 52%; }
  .pounce-art { left: 6%; height: 40%; }
  .vacuum-art { height: 48%; }
  .couplet { font-size: calc(var(--u) * 0.85); top: 40%; }
  .big-glyph { font-size: calc(var(--u) * 6); }
  .small-text.after { max-width: 44% !important; }
  .flip-hint { display: none; }
  .orbit .moon { transform: translate(-50%, -50%) rotate(calc(var(--k) * 90deg + 45deg)) translateY(calc(var(--u) * -23)) rotate(calc(var(--k) * -90deg - 45deg)) !important; }
}

/* ---------- 11-08b additions ---------- */

/* 02: the library page, smaller, sharing the page with the chapter text. */
.browser.compact { flex: 1 1 0; font-size: calc(var(--fs) * 0.86); }
.browser.compact .staff { line-height: 1.6; padding: calc(var(--u) * 0.7) calc(var(--u) * 1.2); }

/* 03: home in fragments — Memphis shapes, brutalist white frames. */
.memphis .collage {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(16, 1fr);
  gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 2.4) calc(var(--u) * 2.4) calc(var(--u) * 3.6);
}
.memphis .page { z-index: 2; pointer-events: none; }
.shape { position: absolute; display: block; pointer-events: none; mix-blend-mode: multiply; }
.m-sun { left: calc(var(--u) * 1.2); top: calc(var(--u) * 26); width: calc(var(--u) * 19); aspect-ratio: 1; border-radius: 50%; background: var(--ink-yellow); }
.m-tri { left: calc(var(--u) * 83); top: calc(var(--u) * 21); width: calc(var(--u) * 14); height: calc(var(--u) * 12); background: var(--ink-blue); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(14deg); opacity: 0.85; }
.m-tri2 { left: calc(var(--u) * 45); top: calc(var(--u) * 54); width: calc(var(--u) * 10); height: calc(var(--u) * 9); background: var(--ink-red); clip-path: polygon(0 0, 100% 30%, 20% 100%); transform: rotate(-10deg); }
.m-dots { left: calc(var(--u) * 2); top: calc(var(--u) * 57); width: calc(var(--u) * 16); height: calc(var(--u) * 10); background: radial-gradient(circle, var(--ink-blue) 28%, transparent 30%) 0 0 / calc(var(--u) * 1.4) calc(var(--u) * 1.4); }
.m-dots2 { left: calc(var(--u) * 58); top: calc(var(--u) * 0.8); width: calc(var(--u) * 13); height: calc(var(--u) * 5); background: radial-gradient(circle, var(--ink-black) 22%, transparent 24%) 0 0 / calc(var(--u) * 1.1) calc(var(--u) * 1.1); }
.m-stripe { left: calc(var(--u) * 41); top: calc(var(--u) * 18); width: calc(var(--u) * 17); height: calc(var(--u) * 11); background: repeating-linear-gradient(-45deg, var(--ink-red) 0 calc(var(--u) * 0.35), transparent 0 calc(var(--u) * 1.1)); opacity: 0.8; }
.m-ring { left: calc(var(--u) * 46); top: calc(var(--u) * 33); width: calc(var(--u) * 8); aspect-ratio: 1; border-radius: 50%; border: calc(var(--u) * 0.45) solid var(--ink-black); mix-blend-mode: normal; }
.m-wave { left: calc(var(--u) * 27); top: calc(var(--u) * 0.6); width: calc(var(--u) * 28); height: calc(var(--u) * 3.6); }
.m-wave path, .m-zig path, .m-squig path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m-wave path { stroke: var(--ink-red); stroke-width: 4; }
.m-zig { left: calc(var(--u) * 60); top: calc(var(--u) * 65.5); width: calc(var(--u) * 24); height: calc(var(--u) * 3); }
.m-zig path { stroke: var(--ink-black); }
.m-squig { left: calc(var(--u) * 92); top: calc(var(--u) * 37); width: calc(var(--u) * 6); }
.m-squig path { stroke: var(--ink-blue); stroke-width: 4; }

.frag { position: relative; z-index: 1; min-width: 0; min-height: 0; margin: 0; display: flex; padding: calc(var(--u) * 0.6); background: #fffdf5; border: 2.5px solid var(--ink-black); box-shadow: 5px 5px 0 var(--ink-black); }
.frag > .art { flex: 1 1 0; min-width: 0; min-height: 0; height: 100%; object-fit: contain; }
.frag.txt { padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5); align-items: center; font-size: calc(var(--fs) * 0.95); }
.t1 { grid-area: 2 / 2 / 6 / 12; box-shadow: 6px 6px 0 var(--ink-red); }
.f-chair { grid-area: 6 / 2 / 14 / 6; transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--ink-blue); }
.f-toilet { grid-area: 6 / 6 / 13 / 11; transform: rotate(1.5deg); }
.note-box { grid-area: 13 / 6 / 16 / 12; align-items: center; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2); font: 400 var(--fs-s) / 1.55 var(--cute); color: var(--ink-blue); background: color-mix(in srgb, var(--ink-yellow) 30%, #fffdf5); box-shadow: 4px 4px 0 var(--ink-blue); transform: rotate(-1deg); }
.f-laptop { grid-area: 2 / 14 / 6 / 18; transform: rotate(2deg); box-shadow: 5px 5px 0 var(--ink-yellow); }
.f-switch { grid-area: 1 / 19 / 6 / 24; transform: rotate(-1.5deg); }
.f-arm { grid-area: 6 / 14 / 10 / 20; box-shadow: 5px 5px 0 var(--ink-red); }
.f-sky { grid-area: 6 / 20 / 10 / 25; border-radius: 50%; transform: rotate(4deg); box-shadow: 5px 5px 0 var(--ink-blue); }
.t2 { grid-area: 10 / 14 / 15 / 20; box-shadow: 6px 6px 0 var(--ink-blue); transform: rotate(-0.6deg); }
.f-keys { grid-area: 10 / 20 / 16 / 25; transform: rotate(2.4deg); box-shadow: 5px 5px 0 var(--ink-yellow); }

/* 04: a ring of play around the one-month photo; the ring sways slowly. */
@property --spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.orbit { position: absolute; z-index: 1; left: 50%; top: 52%; width: calc(var(--u) * 64); aspect-ratio: 1; transform: translate(-50%, -50%); }
.orbit-track { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px dashed var(--ink-blue); }
.orbit-core { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 4) calc(var(--u) * 4.4); border-radius: 50%; background: color-mix(in srgb, var(--ink-yellow) 34%, #fffdf5); border: 2.5px solid var(--ink-black); box-shadow: 6px 6px 0 var(--ink-red); text-align: center; }
.orbit-core .prose p { text-align: center; font-size: calc(var(--fs) * 0.92); line-height: 1.75; }
.core-fig { display: flex; flex-direction: column; align-items: center; }
.core-fig .art { width: calc(var(--u) * 11); }
.core-fig .note { margin-top: 0; text-align: center; max-width: 20em; }
.moon { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 13); margin: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--k) * 90deg + 45deg + var(--spin))) translateY(calc(var(--u) * -23)) rotate(calc(var(--k) * -90deg - 45deg - var(--spin))); }
.disc { display: grid; place-items: center; aspect-ratio: 1; padding: calc(var(--u) * 1); border-radius: 50%; background: #fffdf5; border: 2px solid var(--ink-black); overflow: hidden; }
.moon:nth-of-type(4n+1) .disc { box-shadow: 4px 4px 0 var(--ink-yellow); }
.moon:nth-of-type(4n+2) .disc { box-shadow: 4px 4px 0 var(--ink-blue); }
.moon:nth-of-type(4n+3) .disc { box-shadow: 4px 4px 0 var(--ink-red); }
.moon:nth-of-type(4n) .disc { box-shadow: 4px 4px 0 var(--ink-black); }
.disc > .art { width: 100%; height: 100%; object-fit: contain; }
.disc .moth-wrap { flex: none; height: 100%; width: auto; }
.moon .note { position: absolute; left: 50%; top: 100%; width: calc(var(--u) * 15); transform: translateX(-50%); text-align: center; font-size: calc(var(--fs-s) * 0.92); }
.orbit-lead { max-width: calc(var(--u) * 15); }
.orbit-sheet .page { pointer-events: none; }
.orbit-sheet .page > * { pointer-events: auto; }

/* 08: the sprawl, big. */
.penguin-page { justify-content: center; }

/* 09: the line about rituals, in bold black. */
.ritual { margin: 0; font: 900 calc(var(--u) * 1.5) / 1.5 var(--serif); letter-spacing: 0.04em; }

@media (max-width: 767px) {
  .memphis .page, .orbit-sheet .page.r { display: none; }
  .memphis .collage, .orbit { position: relative; inset: auto; left: auto; top: auto; transform: none; width: auto; aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 18px; padding: 24px 18px 30px; }
  .memphis .shape, .orbit-track { display: none; }
  .frag { grid-area: auto !important; transform: none !important; }
  .frag.txt, .note-box { grid-column: 1 / -1 !important; }
  .frag > .art { height: auto; max-height: 52vw; }
  .orbit-core { position: relative; inset: auto; grid-column: 1 / -1; border-radius: 28px; padding: 22px; }
  .moon { position: relative; left: auto; top: auto; width: auto; transform: none !important; }
  .moon .note { position: static; transform: none; width: auto; }
  .orbit-lead { max-width: none; }
  .orbit-sheet .page.l { min-height: 0; }
}
.disc .moth-wrap { box-shadow: none; }

/* 11-08b fixes */
.social .front .art { height: 64%; }
.social .back .art { height: 68%; }
.pounce-art { left: 10%; height: 46%; }
.care-row { gap: calc(var(--u) * 1); }
.chain ol { gap: calc(var(--u) * 0.9); }
.chain li { padding: calc(var(--u) * 0.25) calc(var(--u) * 0.7); font-size: calc(var(--fs) * 0.78); }
.chain li + li::before { top: calc(var(--u) * -1); height: calc(var(--u) * 0.9); }
.carer svg { max-height: calc(var(--u) * 10); }
.care-row .note { font-size: calc(var(--fs-s) * 0.92); }
/* 09: three plates scattered on the table, big. */
.plates { position: relative; display: block; flex: 1 1 0; min-height: 0; }
.plates .art { position: absolute; width: auto; height: 58%; margin: 0; aspect-ratio: 1; }
.plates .p1 { left: 0; top: 0; transform: rotate(-6deg); }
.plates .p2 { right: 2%; top: 14%; transform: rotate(8deg); }
.plates .p3 { left: 22%; bottom: 8%; transform: rotate(-2deg); }
.plates .note { position: absolute; right: 0; bottom: 0; max-width: 46%; text-align: right; }
/* 09: the pot and the seasoning packet, big and staggered. */
.cook-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; align-items: stretch; }
.cook-row figure:first-child { grid-area: 1 / 1 / 2 / 3; justify-content: flex-start; align-items: flex-start; }
.cook-row figure:last-child { grid-area: 2 / 1 / 3 / 3; align-items: flex-end; }
.cook-row figure > .art { width: 62%; }
.cook-row figure .note { max-width: 62%; }
.cook-row figure:last-child .note { text-align: right; }
/* 08: the sprawl runs off the page edge. */
.penguin-page { padding-left: 0; }
.penguin-page .fig { flex: none; align-items: flex-start; }
.penguin-page .fig .art { width: 118%; max-width: none; margin-left: -6%; }
.penguin-page .note { margin: calc(var(--u) * 1) 0 0 var(--pad-x); font-size: calc(var(--fs) * 1.05); }
/* 04: a bigger ring. */
.orbit { width: calc(var(--u) * 68); top: 51%; }
.moon { width: calc(var(--u) * 15); transform: translate(-50%, -50%) rotate(calc(var(--k) * 90deg + 45deg + var(--spin))) translateY(calc(var(--u) * -24.5)) rotate(calc(var(--k) * -90deg - 45deg - var(--spin))); }
.orbit-core .prose p { font-size: var(--fs); }
.core-fig .art { width: calc(var(--u) * 13); }
@media (max-width: 767px) {
  .plates { height: 80vw; flex: none; }
  .cook-row { height: 130vw; }
  .penguin-page { padding-left: var(--pad-x); }
  .penguin-page .fig .art { width: 100%; margin: 0; }
  .penguin-page .note { margin-left: 0; }
}
@media print {
  .orbit .moon { transform: translate(-50%, -50%) rotate(calc(var(--k) * 90deg + 45deg)) translateY(calc(var(--u) * -24.5)) rotate(calc(var(--k) * -90deg - 45deg)) !important; }
}
.carer svg { max-height: calc(var(--u) * 8); } .reg { overflow: visible; }
@media (max-width: 767px) {
  .browser.compact { flex: none; }
  .orbit { width: auto; top: auto; }
  .menu-stack { flex: none; }
  .menu-stack .menu { position: relative; width: 80%; margin: -14vw auto 0; }
  .coda-page .fig .art { max-height: 56vh; }
}
@media (max-width: 767px) {
  .browser .staff { flex: none; }
  .coda-page .fig .art { max-height: 46vh; }
}
.orbit-core { padding: calc(var(--u) * 5.4) calc(var(--u) * 6); gap: calc(var(--u) * 0.4); }
.orbit-core .prose p { font-size: calc(var(--fs) * 0.86); line-height: 1.7; }
.core-fig .art { width: calc(var(--u) * 10); }
.penguin-page .fig .art { flex: none; height: auto; }
.plates .art { height: 50%; }
.plates .p1 { left: 0; top: 0; }
.plates .p2 { right: 0; top: 10%; }
.plates .p3 { left: 12%; top: auto; bottom: 0; }
@media (max-width: 767px) { .orbit-core { padding: 22px; } .orbit-core .prose p { font-size: 15px; } }
@media (max-width: 767px) { .moon { width: auto; min-width: 0; } .orbit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Place the ring without a transform: Chrome's PDF pagination splits translated absolute boxes. */
.orbit { left: calc(50% - var(--u) * 34); top: calc(51% - var(--u) * 34); transform: none; }
@media (max-width: 767px) { .orbit { left: auto; top: auto; } }

/* ---------- 11-09 review ---------- */
/* Cards: the pill under each word (from v2); art keeps its own proportions. */
.face .when { display: inline-block; margin-top: calc(var(--u) * 0.5); padding: calc(var(--u) * 0.15) calc(var(--u) * 0.7); font: 400 var(--fs-s) / 1.35 var(--cute); color: #fffdf5; background: var(--ink-black); border-radius: 4px; }
.face.back .when { background: var(--ink-red); }
.flip .face .art { width: auto; max-width: 70%; }
.flip .face .art.pounce-art { max-width: 64%; }
/* Why all black cats */
.black-note { margin: calc(var(--u) * -0.6) 0 0; max-width: 22em; align-self: flex-end; transform: rotate(-1.5deg); color: var(--ink-blue); }
/* 27: the penguin, smaller, with its note; then the line, big. */
.penguin-row { flex: 1 1 0; min-height: 0; display: flex; gap: calc(var(--u) * 1.6); align-items: flex-end; }
.penguin-row .art { flex: none; width: 46%; height: auto; max-height: 100%; object-fit: contain; object-position: left bottom; }
.penguin-row .note { margin: 0 0 calc(var(--u) * 2.4); max-width: 12em; align-self: flex-end; }
.penguin-row + .coda { margin-bottom: calc(var(--u) * 1); }
/* Back cover: a second staff above the blurb, Yumi's portrait in the middle. */
/* Same staff at the same height as on the front cover; the colophon sits above it. */
.back .page.back-cover { padding-bottom: calc(var(--u) * 13.4); }
.avatar { position: relative; align-self: center; width: calc(var(--u) * 15); margin: calc(var(--u) * 3.4) 0 0; }
.avatar img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid var(--ink-black); box-shadow: 5px 5px 0 var(--ink-yellow); }
.avatar .note { position: absolute; left: calc(100% + var(--u) * 1.2); bottom: 8%; width: 9.5em; margin: 0; transform: rotate(-3deg); }
@media (max-width: 767px) {
  .avatar { width: 46vw; }
  .avatar .note { position: static; width: auto; margin-top: 14px; transform: none; }
  .back .page.back-cover { padding-bottom: 96px; }
  .penguin-row { flex: none; }
  .penguin-row .art { max-height: 44vw; }
}
/* 23: give Yumi and her glasses a little more room under the longer note. */
.glasses { min-height: calc(var(--u) * 8); }
/* 31: the finale picture fills the page from the fold; the closing lines sit in its empty sky. */
.finale-page { position: relative; }
.finale-page .finale-art { position: absolute; left: 0; bottom: calc(var(--u) * 3); width: 100%; flex: none; }
.finale-page .finale-art .art { flex: none; width: 100%; height: auto; }
.finale-page .finale-text { position: relative; z-index: 2; margin-left: auto; width: 62%; }
.finale-page .end-mark { position: absolute; right: var(--pad-x); bottom: calc(var(--u) * 4.4); }
@media (max-width: 767px) {
  .finale-page .finale-art { position: relative; left: auto; bottom: auto; }
  .finale-page .finale-text { width: auto; }
  .finale-page .end-mark { position: static; }
}
/* Phone 30: picture first at full size, the menu card tucked under its bottom-right corner. */
@media (max-width: 767px) {
  .menu-stack .fig { flex: none; }
  .menu-stack .fig .art { flex: none; height: auto; max-height: none; }
  .menu-stack .menu { width: 62%; aspect-ratio: auto; margin: -16vw 0 0 auto; padding: 18px 14px; }
}
@media (max-width: 767px) {
  .social .front .art { height: 58%; }
  .flip .face .small-text { max-width: 54%; }
}

/* ---------- 11-09 second pass ---------- */
/* sociable: words in a narrow column on the left; bubble top right, picture bottom right. */
.social .face .small-text { max-width: 38%; }
.social .front .art, .social .back .art { right: 3%; bottom: 4%; height: 58%; }
.social .bubble { max-width: 10em; }
.social .big-glyph { font-size: calc(var(--u) * 8); }
/* playful: the pistachio pounce a little further right */
.pounce-art { left: 24%; }
/* 27: the penguin, a bit bigger, in the middle of the empty space */
.penguin-row { align-items: center; justify-content: center; }
.penguin-row .art { width: 54%; max-height: calc(var(--u) * 22); object-position: center; }
.penguin-row .note { margin: 0; align-self: center; }
@media (max-width: 767px) {
  .social .face .small-text { max-width: 44%; }
  /* Spread-wide pieces: their page numbers ride along at the end, not mid-page. */
  .orbit-sheet .page.l .folio { display: none; }
  .orbit-sheet .page.l { padding-bottom: 0; }
  .memphis .collage::after, .orbit::after { grid-column: 1 / -1; justify-self: end; font: 600 11px / 1 var(--serif); letter-spacing: 0.08em; opacity: 0.65; }
  .memphis .collage::after { content: '8 – 9'; }
  .orbit::after { content: '10 – 11'; }
  /* 23 on phones: the note at reading size, the picture above it and never behind it. */
  .glasses { flex: none; min-height: 0; }
  .glasses .art { max-height: 38vh; }
  .footnote { font-size: 15px; line-height: 1.8; background: color-mix(in srgb, var(--ink-yellow) 22%, #fffdf5); }
  .penguin-row .art { width: 50%; max-height: 52vw; }
}
@media (max-width: 767px) { .pounce-art { left: 6%; } }
@media (max-width: 767px) { .coda { font-size: 30px; } }
/* Card art never distorts when its width is capped (phone). */
.flip .face .art { object-fit: contain; object-position: right bottom; }
.flip .face .art.pounce-art { object-position: left bottom; }