/* Clanker Calamity — instruction booklet site.
   One page = one <section class="page">. The book shows two of them as a spread and turns a
   sheet about the spine (manual.js). Every length inside a page is in cqw, i.e. a percentage of
   the PAGE width, so a page scales as one picture when the window changes. A page is as tall as the
   window allows, whatever its content - a short page keeps its white space, as a printed page does -
   with the NES booklet ratio (21:16) as the floor for a short window; only a page whose content needs
   more grows taller, and then the window scrolls, the page never does (the owner's "tall landscape",
   then "max size to start and not shrink them for less content", 2026-09-18). */

:root {
  --ink: #24231f;
  --ink-soft: #4a463d;
  --red: #a83d30;
  --red-deep: #8d2f24;
  --yellow: #f2cf27;
  --haz: #e0aa19;
  --paper: #e5d6b4;
  --band: #cfc4a6;
  --tint-rose: #e7c4b3;
  --tint-salmon: #ecd2ab;
  --tint-sand: #ddd0ad;
  --strip: #cf7a5e;
  --plate: #25282c;
  --white: #f7f1de;
  --page-ratio: 21 / 16;
  --u: 1cqw;                        /* the page unit: a share of the page's width on a desktop, a fixed size on a phone */
  --chrome: 150px;                  /* desk padding, the bar under the book, the footer */
  /* the book is as wide as the window allows AND no wider than the window's height lets the
     tallest page fit. 1.80 is DERIVED: two pages across, divided by 1.11, a hair above the fullest
     page's measured height-to-width ratio (1.10 at 514px wide after the phrasing pass, 2026-09-18). Re-measure it when a
     page is added or grows; the self-test's fit loop is what finds a page it no longer covers. */
  --book-w: max(720px, min(1500px, calc(100% - 150px), calc((100vh - var(--chrome)) * 1.80)));
  --flip-ms: 750ms;
  --pad-x: calc(5.6 * var(--u));
}

* { box-sizing: border-box; }
html { background: #26282c; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: radial-gradient(ellipse at 50% 25%, #3a3d43 0, #26282c 55%, #191a1d 100%);
}
#pages[hidden] { display: none; }

/* ---------- the desk and the book ---------- */
.desk { padding: 24px 0 26px; display: flex; flex-direction: column; align-items: center; }
.bookframe { position: relative; width: var(--book-w); }
.book {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  perspective: 2800px;
  transform: translateX(var(--shift, 0));
  transition: transform var(--flip-ms) ease-in-out, height var(--flip-ms) ease-in-out;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;   /* a drag turns the page; it must not highlight the text */
}
.book img { -webkit-user-drag: none; user-drag: none; }   /* nor start a native image drag */
.book.closed-front { --shift: -25%; }
.book.closed-back { --shift: 25%; }

.leaf { position: relative; min-width: 0; display: flex; container-type: inline-size; }
/* a page's drop shadow must not fall across the spine onto its neighbour: the sheet's page is
   above everything while it turns, so the neighbour's shadow would appear on it only on landing.
   80px is DERIVED from the page shadow (0 18px 46px): larger than its blur plus offset on any side. */
.leaf-left { clip-path: inset(-80px 0 -80px -80px); }
.leaf-right { clip-path: inset(-80px -80px -80px 0); }
.measure {                          /* where a page is measured before it goes on the sheet */
  position: absolute; left: 0; top: 0; width: 50%; height: 0; overflow: hidden;
  visibility: hidden; pointer-events: none; display: block; container-type: inline-size;
}                                   /* block, not flex: a flex box would stretch the page to its zero height */

/* the turning sheet */
.flipper {
  position: absolute; top: 0; width: 50%; height: 100%; z-index: 5;
  transform-style: preserve-3d; will-change: transform; pointer-events: none;
}
.flipper[hidden] { display: none; }
.flipper.fwd { left: 50%; transform-origin: left center; animation: flipFwd var(--flip-ms) cubic-bezier(.45, .05, .35, 1) forwards; }
.flipper.bwd { left: 0; transform-origin: right center; animation: flipBwd var(--flip-ms) cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes flipFwd { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes flipBwd { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
.face {
  position: absolute; inset: 0; display: flex; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: inline-size;
}
.face-back { transform: rotateY(180deg); }
.face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .38));
  animation: shade var(--flip-ms) ease-in-out forwards;
}
.face-back::after { background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .38)); }
@keyframes shade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root { --flip-ms: 1ms; } }

/* turn buttons beside the book, and the bar under it */
.turn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: var(--plate); color: var(--yellow); border: 2px solid var(--yellow);
  font: 900 18px/1 "Courier New", monospace; box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
.turn:hover { background: #33373c; }
.turn:disabled { opacity: .25; cursor: default; }
.turn-prev { left: -68px; }
.turn-next { right: -68px; }
.bookbar {
  margin-top: 12px; display: flex; gap: 14px; align-items: center;
  font: 900 13px/1 "Courier New", monospace; letter-spacing: .16em; color: #e9e1ca;
}
.bookbar button {
  background: var(--plate); color: var(--yellow); border: 2px solid var(--yellow);
  padding: 9px 14px; font: inherit; letter-spacing: inherit; cursor: pointer;
}
.bookbar button:disabled { opacity: .25; cursor: default; }
.bookbar #where { min-width: 12ch; text-align: center; }
.bookbar .keys { font-weight: 400; color: #9d977f; letter-spacing: .08em; }

/* ---------- a page ---------- */
.page {
  position: relative;
  width: 100%;
  /* as tall as the window allows, floored at the 21:16 booklet ratio (76.2 units) and capped at 1.25 times
     the page's width, so a tall narrow screen does not stretch a page into a column of paper. 1.25 is a
     CHOICE, not a measurement: it sits above a 1080p desktop window's own ratio (about 1.23 with the
     chrome taken off), so a desktop never meets the cap and a portrait tablet does. */
  min-height: max(calc(76.2 * var(--u)), min(calc(100vh - var(--chrome)), calc(125 * var(--u))));
  display: flex; flex-direction: column;
  padding: calc(4.6 * var(--u)) var(--pad-x) calc(9.5 * var(--u));
  font-size: calc(2.15 * var(--u)); line-height: 1.42;
  color: var(--ink);
  background: var(--paper) url(assets/paper.webp) 0 0 / 1024px 1024px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
}
.page[data-side="right"] { background-position: 41% 63%; }   /* facing pages must not be twins */
.page > * { position: relative; }
.page::before {                     /* aged edges and the gutter shadow at the spine */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(80, 55, 20, .22) 100%);
}
.page[data-side="left"]::before {
  background:
    linear-gradient(to left, rgba(60, 40, 12, .34), rgba(60, 40, 12, .10) 5%, transparent 13%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(80, 55, 20, .22) 100%);
}
.page[data-side="right"]::before {
  background:
    linear-gradient(to right, rgba(60, 40, 12, .34), rgba(60, 40, 12, .10) 5%, transparent 13%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(80, 55, 20, .22) 100%);
}
.leaf-left .page, .face .page { cursor: default; }

/* folio: the prototype's wide plate at the bottom OUTER corner, as the NES booklets placed the
   number. The caution tape is a striped band painted under a transparent border, so it is the
   same crisp stripe on all four sides at any size; a border-image squashed it into a smear. */
.page[data-folio]::after {
  content: attr(data-folio-label);
  position: absolute; bottom: calc(2.8 * var(--u)); z-index: 2;
  font: 900 calc(1.9 * var(--u))/1 "Courier New", monospace; letter-spacing: .18em; white-space: nowrap;
  color: var(--yellow);
  border: calc(.85 * var(--u)) solid transparent; padding: calc(1.1 * var(--u)) calc(1.9 * var(--u));
  background:
    linear-gradient(var(--plate), var(--plate)) padding-box,
    repeating-linear-gradient(135deg, var(--yellow) 0 calc(1.1 * var(--u)), #1c1e21 calc(1.1 * var(--u)) calc(2.2 * var(--u))) border-box;
  box-shadow: calc(.7 * var(--u)) calc(.7 * var(--u)) 0 #8b8068;
}
.page[data-side="left"][data-folio]::after { left: calc(4 * var(--u)); content: "FORM CC-7 · PAGE " attr(data-folio-label); }
.page[data-side="right"][data-folio]::after { right: calc(4 * var(--u)); content: "PAGE " attr(data-folio-label) " · PLANT 7"; }

/* ---------- vocabulary ---------- */
.chapter {                          /* Zelda's grey band, red rule, condensed red caps */
  display: flex; align-items: stretch;
  margin: 0 calc(-1 * var(--pad-x)) calc(3 * var(--u)); padding: 0 var(--pad-x);
  background: var(--band); border-bottom: calc(.5 * var(--u)) solid var(--red);
}
.chapter-no {
  display: flex; align-items: center;
  font: 900 calc(2.6 * var(--u))/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-stretch: condensed;
  letter-spacing: .12em; color: var(--white); background: var(--red); padding: calc(1.3 * var(--u)) calc(1.6 * var(--u)); margin-right: calc(2 * var(--u));
  box-shadow: inset calc(-.4 * var(--u)) 0 0 rgba(0, 0, 0, .25);
}
.chapter-name {
  display: flex; align-items: center;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-stretch: condensed;
  font-weight: 900; font-size: calc(3.4 * var(--u)); letter-spacing: .06em; text-transform: uppercase; color: var(--red-deep);
}

h2.raised {                         /* the prototype's raised title */
  font-family: Impact, "Arial Black", Haettenschweiler, sans-serif; font-weight: 400;
  font-size: calc(6.6 * var(--u)); line-height: .95; letter-spacing: .02em; margin: 0 0 calc(2.2 * var(--u)); color: var(--ink);
  text-shadow: -1px -1px 0 #fff8e6, calc(.45 * var(--u)) calc(.45 * var(--u)) 0 #bfb394;
}
h2.raised::after {
  content: ""; display: block; width: 58%; height: calc(1.4 * var(--u)); margin-top: calc(1.4 * var(--u));
  border: 2px solid #1a1a1a;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 calc(2.2 * var(--u)), #26282b calc(2.2 * var(--u)) calc(4.4 * var(--u)));
}
h3 {
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-stretch: condensed;
  font-weight: 900; font-size: calc(2.6 * var(--u)); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em;
  color: var(--red-deep); margin: calc(1.4 * var(--u)) 0 calc(.8 * var(--u));
}
p { margin: 0 0 calc(1.2 * var(--u)); }
.intro { font-size: calc(2.35 * var(--u)); font-weight: 700; margin-bottom: calc(2 * var(--u)); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)); }

/* callouts: the prototype's hard offset shadows and heavy frames, so they sit ON the paper */
.hint {                             /* Zelda's unlabelled tinted box, with a caution band along its top */
  background: var(--tint-salmon); padding: 0 calc(2.4 * var(--u)) calc(1.8 * var(--u)); margin: calc(2.4 * var(--u)) 0 0;
  border: 2px solid #252525; font-size: calc(2.05 * var(--u)); box-shadow: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 #8b8068;
}
.hint::before {
  content: ""; display: block; height: calc(1 * var(--u)); margin: 0 calc(-2.4 * var(--u)) calc(1.4 * var(--u));
  background: repeating-linear-gradient(135deg, var(--yellow) 0 calc(1.1 * var(--u)), #26282b calc(1.1 * var(--u)) calc(2.2 * var(--u)));
}
.caution {                          /* the prototype's warning box */
  background: #f1cd39; border: 3px solid #1f1f1f; padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); margin: calc(2.4 * var(--u)) 0 0;
  font-size: calc(2 * var(--u)); box-shadow: calc(.8 * var(--u)) calc(.8 * var(--u)) 0 #262626;
}
.caution b, .note b {
  display: block; font: 900 calc(1.7 * var(--u))/1 "Courier New", monospace; letter-spacing: .2em; margin-bottom: calc(.7 * var(--u));
}
.caution b { color: #1f1f1f; }
.caution b::before { content: "\26A0\FE0E  "; font-size: calc(2.2 * var(--u)); }
.note {                             /* the prototype's note box */
  margin: calc(2.4 * var(--u)) 0 0; padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); background: #e2d6b6;
  border: 3px solid #252525; border-left: calc(1.6 * var(--u)) solid var(--red); font-size: calc(2 * var(--u));
  box-shadow: calc(.7 * var(--u)) calc(.7 * var(--u)) 0 #8b8068;
}
.note b { color: var(--red-deep); }
.tipstrip {                         /* Zelda's strip along the foot of every spread */
  margin: auto calc(-1 * var(--pad-x)) calc(1.4 * var(--u)); padding: calc(1.4 * var(--u)) var(--pad-x);
  min-height: calc(8.1 * var(--u));                 /* two lines on every page, so the band's top and bottom both run straight across a spread */
  background: var(--strip); color: #2e1710; font-size: calc(1.95 * var(--u)); font-style: italic; line-height: 1.35;
}
.tipstrip b { font-style: normal; font-weight: 900; color: #5a1a10; letter-spacing: .12em; margin-right: .7em; }
.tipstrip + * { margin-top: 0; }

/* contents */
.contents-head {
  font-family: Impact, "Arial Black", sans-serif; font-weight: 400; font-size: calc(6 * var(--u)); line-height: 1;
  letter-spacing: .04em; color: var(--red-deep); margin: 0 0 calc(2.6 * var(--u));
  text-shadow: -1px -1px 0 #fff8e6, calc(.4 * var(--u)) calc(.4 * var(--u)) 0 #bfb394;
}
.contents { list-style: none; padding: 0; margin: 0; font-size: calc(2.3 * var(--u)); font-weight: 700; width: 95%; }   /* the leaders run nearly to the margin (the owner, 2026-09-18) */
.contents a { display: flex; align-items: baseline; color: inherit; text-decoration: none; padding: calc(1.05 * var(--u)) 0; }
.contents a:hover span { color: var(--red-deep); }
.contents i { flex: 1; border-bottom: calc(.38 * var(--u)) dotted var(--ink); margin: 0 .6em; transform: translateY(-.3em); }
.contents b { font: 900 calc(2.5 * var(--u))/1 "Courier New", monospace; color: var(--red-deep); }
.stamp {
  position: absolute; right: calc(6 * var(--u)); top: calc(3 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.6 * var(--u)); transform: rotate(7deg);
  border: calc(.7 * var(--u)) double var(--red-deep); color: var(--red-deep);
  font: 900 calc(1.8 * var(--u))/1.2 "Courier New", monospace; letter-spacing: .18em; text-align: center; opacity: .85;
}

/* inside cover */
.seal { display: grid; grid-template-columns: calc(21 * var(--u)) 1fr; gap: calc(3 * var(--u)); align-items: center; margin-bottom: calc(2.6 * var(--u)); }
.seal-ring {
  width: calc(21 * var(--u)); aspect-ratio: 1; border-radius: 50%; border: calc(.8 * var(--u)) double var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--yellow); box-shadow: inset 0 0 0 calc(1.6 * var(--u)) #e6c322, calc(.5 * var(--u)) calc(.5 * var(--u)) 0 #9b8e72; transform: rotate(-6deg);
}
.seal-ring b { font: 400 calc(2.7 * var(--u))/1.05 Impact, "Arial Black", sans-serif; letter-spacing: .04em; }
.seal-ring span { font: 700 calc(1.3 * var(--u))/1 "Courier New", monospace; letter-spacing: .22em; margin: calc(.5 * var(--u)) 0; }
.seal-text { font: italic calc(1.9 * var(--u))/1.4 Georgia, "Times New Roman", serif; margin: 0; }
.thanks { font-size: calc(2.2 * var(--u)); font-weight: 700; }
.pleaseread { border: 3px solid var(--ink); padding: calc(1.5 * var(--u)) calc(2 * var(--u)); font-weight: 700; font-size: calc(2 * var(--u)); margin: calc(1.6 * var(--u)) 0 calc(2.4 * var(--u)); background: #eadfc0; box-shadow: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 #8b8068; }
.precautions { padding-left: calc(2.6 * var(--u)); margin: 0; font-size: calc(1.95 * var(--u)); }
.precautions li { margin-bottom: calc(.5 * var(--u)); }
.copyright { margin-top: auto; font: 700 calc(1.5 * var(--u))/1.4 "Courier New", monospace; letter-spacing: .1em; color: var(--ink-soft); }

/* story */
.story-body { width: 66%; }
.story-body p { font: italic calc(2.2 * var(--u))/1.45 Georgia, "Times New Roman", serif; }
.story-body p.lede { font-weight: 700; font-size: calc(2.6 * var(--u)); margin-bottom: calc(.6 * var(--u)); }
.story-body h2.raised { font-size: calc(5.6 * var(--u)); color: var(--red-deep); }
.objective { margin-top: calc(2.4 * var(--u)); background: var(--plate); color: var(--white); padding: calc(1.6 * var(--u)) calc(2 * var(--u)); border: 2px solid #0e0f11; border-left: calc(1.6 * var(--u)) solid var(--yellow); font-size: calc(2 * var(--u)); box-shadow: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 #8b8068; }
.objective b { color: var(--yellow); }
.story-figure { position: absolute; right: calc(2 * var(--u)); top: calc(15 * var(--u)); width: calc(22 * var(--u)); margin: 0; text-align: center; }
.story-figure img { width: 100%; height: auto; display: block; transform: rotate(-5deg); filter: drop-shadow(calc(.6 * var(--u)) calc(.8 * var(--u)) 0 rgba(0, 0, 0, .35)); }
.story-figure figcaption { font: italic calc(1.5 * var(--u))/1.3 Georgia, serif; margin-top: calc(1.4 * var(--u)); color: var(--ink-soft); }

/* the game screen: a figure with numbered callouts, the way the controller pages were drawn */
.callout-figure { position: relative; margin: 0 0 calc(2 * var(--u)); border: 3px solid #141517; background: #202327; padding: calc(.9 * var(--u)); box-shadow: calc(.7 * var(--u)) calc(.7 * var(--u)) 0 #8f8369; }
.callout-figure img { display: block; width: 100%; height: auto; }
.co {
  position: absolute; width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--yellow); border: calc(.35 * var(--u)) solid #141517; color: #141517;
  font: 900 calc(2.2 * var(--u))/1 "Courier New", monospace; display: grid; place-items: center;
  box-shadow: calc(.3 * var(--u)) calc(.3 * var(--u)) 0 rgba(0, 0, 0, .55);
}
.callout-key { columns: 2; column-gap: calc(3 * var(--u)); padding: 0; margin: 0; list-style: none; counter-reset: co; font-size: calc(1.85 * var(--u)); }
.callout-key li { counter-increment: co; position: relative; padding-left: calc(4 * var(--u)); margin-bottom: calc(1 * var(--u)); break-inside: avoid; }
.callout-key li::before {
  content: counter(co); position: absolute; left: 0; top: 0; width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%;
  background: var(--plate); color: var(--yellow); font: 900 calc(1.7 * var(--u))/calc(3 * var(--u)) "Courier New", monospace; text-align: center;
}

/* the template spread */
.steps { list-style: none; padding: 0; margin: 0 0 calc(2.2 * var(--u)); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(1.2 * var(--u)); }
.steps li { background: var(--tint-sand); border: 2px solid #343434; padding: calc(1.4 * var(--u)) calc(1.2 * var(--u)); font-size: calc(1.8 * var(--u)); line-height: 1.35; box-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 #8b8068; }
.steps li span { display: grid; place-items: center; width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: var(--plate); color: var(--yellow); font: 900 calc(2.2 * var(--u))/1 "Courier New", monospace; margin-bottom: calc(.8 * var(--u)); }
.steps li b { display: block; font-size: calc(2 * var(--u)); margin-bottom: calc(.4 * var(--u)); }
.steps li p { margin: 0; }
.order { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(.9 * var(--u)); background: var(--plate); color: #f4ebd0; padding: calc(1.4 * var(--u)); border: 2px solid #0e0f11; border-top: calc(.8 * var(--u)) solid var(--haz); font: 900 calc(1.6 * var(--u))/1 Arial, sans-serif; letter-spacing: .06em; box-shadow: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 #8b8068; margin-bottom: calc(.6 * var(--u)); }
.order b { color: var(--yellow); font-size: calc(1.8 * var(--u)); }

/* the plant key: Zelda's catalogue rows */
.catalogue { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.6 * var(--u)) calc(3.4 * var(--u)); margin-top: calc(1 * var(--u)); }
.cat-row { display: grid; grid-template-columns: calc(9 * var(--u)) 1fr; gap: calc(1.5 * var(--u)); align-items: start; border-bottom: 1px solid #a89b7d; padding-bottom: calc(1.4 * var(--u)); }
.cat-row img { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border: calc(.35 * var(--u)) solid #222; background: #333; display: block; box-shadow: calc(.45 * var(--u)) calc(.45 * var(--u)) 0 #8b8068; }
.cat-row b { display: block; color: var(--red-deep); font: 900 calc(2.05 * var(--u))/1.1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-stretch: condensed; text-transform: uppercase; margin-bottom: calc(.45 * var(--u)); }
.cat-row p { margin: 0; font-size: calc(1.95 * var(--u)); line-height: 1.35; }
.cat-row small { display: block; font: 700 calc(1.6 * var(--u))/1.3 "Courier New", monospace; color: #695e48; margin-bottom: calc(.3 * var(--u)); letter-spacing: .06em; }
.cat-head { grid-column: 1 / -1; margin: calc(1 * var(--u)) 0 0; padding-bottom: calc(.5 * var(--u)); border-bottom: calc(.35 * var(--u)) solid var(--red); font-size: calc(2.4 * var(--u)); letter-spacing: .1em; }
.catalogue > .cat-head:first-child { margin-top: 0; }

/* pointers, trade secrets, memo */
.pointers { padding: 0; margin: 0 0 calc(1.4 * var(--u)); list-style: none; font-size: calc(1.95 * var(--u)); }
.pointers li { position: relative; padding-left: calc(3.2 * var(--u)); margin-bottom: calc(.9 * var(--u)); }
.pointers li::before { content: ""; position: absolute; left: 0; top: .5em; width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); background: var(--red); border-radius: 50%; }
.secret { margin: calc(1.6 * var(--u)) 0 0; padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); border: calc(.55 * var(--u)) dashed var(--ink); background: #e8dcc0; font-size: calc(1.85 * var(--u)); box-shadow: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 #8b8068; }
.secret-head { font: 400 calc(3 * var(--u))/1 Impact, "Arial Black", sans-serif; letter-spacing: .08em; color: var(--red-deep); margin-bottom: calc(1 * var(--u)); }
.secret-head::before { content: "\2605  "; }
.secret p { margin-bottom: calc(.7 * var(--u)); }
.memo {
  flex: 1; margin-top: calc(2.2 * var(--u)); min-height: calc(14 * var(--u));
  background: repeating-linear-gradient(to bottom, transparent 0 calc(3.4 * var(--u)), #8f8468 calc(3.4 * var(--u)) calc(calc(3.4 * var(--u)) + 1px));
}
.memo-full { margin-top: calc(1 * var(--u)); min-height: calc(40 * var(--u)); }
.memo-head { display: inline-block; background: var(--paper); padding: 0 .6em 0 0; font: 900 calc(2 * var(--u))/calc(3.4 * var(--u)) "Courier New", monospace; letter-spacing: .24em; }

/* cover and back cover */
.page.cover { padding: 0; background: #1b1d21; color: var(--white); justify-content: flex-start; }
.page.cover::before, .page.backcover::before { display: none; }
.cover-art { display: block; width: 100%; height: auto; border-bottom: calc(.6 * var(--u)) solid var(--yellow); }
.cover-code {
  position: absolute; top: calc(2.4 * var(--u)); right: calc(2.6 * var(--u)); z-index: 2;
  font: 700 calc(1.6 * var(--u))/1 "Courier New", monospace; letter-spacing: .16em;
  border: 2px solid var(--yellow); color: var(--yellow); background: rgba(20, 22, 25, .78); padding: calc(.8 * var(--u)) calc(1.1 * var(--u));
  box-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 rgba(0, 0, 0, .6);
}
.cover-band {
  flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(2 * var(--u)) var(--pad-x);
  background: #1b1d21 repeating-linear-gradient(135deg, transparent 0 24px, rgba(224, 170, 25, .09) 24px 48px);
}
.cover-title { font: 900 calc(5 * var(--u))/1 "Arial Black", Arial, sans-serif; letter-spacing: .22em; color: var(--white); }
.cover-sub { font: 700 calc(1.7 * var(--u))/1 "Courier New", monospace; letter-spacing: .22em; color: #cac4b2; margin-top: calc(1.3 * var(--u)); }
.page.backcover { padding: 0; background: #1b1d21 url(assets/plate.jpg) center / cover; display: grid; place-items: center; }
.backcover img { width: 44%; height: auto; filter: drop-shadow(0 calc(1 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, .7)); }
.colophon { position: absolute; bottom: calc(3 * var(--u)); left: 0; right: 0; text-align: center; font: 700 calc(1.5 * var(--u))/1.7 "Courier New", monospace; letter-spacing: .2em; color: #cac4b2; }
.backlinks { position: absolute; top: calc(3.5 * var(--u)); left: 0; right: 0; text-align: center; font: 900 calc(1.8 * var(--u))/1.7 "Courier New", monospace; letter-spacing: .2em; }   /* the owner, 2026-09-19: the links at the top, bold */
.backlinks a { color: var(--yellow); font-weight: 900; text-decoration: none; }
.backlinks a:hover { text-decoration: underline; }

/* the site's own line under the book, and the same links on the back cover */
.sitefoot { margin-top: 12px; width: var(--book-w); padding-top: 11px; border-top: 1px solid #0d0e10; box-shadow: 0 -1px 0 #3b3e44; display: flex; gap: 16px; align-items: center; justify-content: center; font: 900 12px/1 "Courier New", monospace; letter-spacing: .18em; color: #6f6a58; }
.sitefoot a { color: var(--yellow); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.sitefoot a:hover { border-bottom-color: var(--yellow); }
.colophon a { color: var(--yellow); text-decoration: none; }
.colophon a:hover { text-decoration: underline; }
.pointers a { color: inherit; text-decoration: none; }
.pointers a b { color: var(--red-deep); text-decoration: underline; text-underline-offset: .2em; }
.record-head { display: grid; grid-template-columns: 1.2fr 2fr 1fr 1fr 1.4fr; gap: calc(1 * var(--u)); font: 900 calc(1.6 * var(--u))/1 "Courier New", monospace; letter-spacing: .16em; color: var(--red-deep); border-bottom: calc(.35 * var(--u)) solid var(--red); padding-bottom: calc(.6 * var(--u)); }

/* sixteen contents entries in one column, narrow enough to clear the cards in the corner */
.contents { display: grid; grid-template-columns: 1fr; width: 95%; font-size: calc(2.15 * var(--u)); }
.contents a { padding: calc(.55 * var(--u)) 0; }
.contents b { font-size: calc(2.4 * var(--u)); }

/* the seal is a generated scalloped disc with a trophy faded behind the words */
.seal-ring { background: url(assets/seal.webp) center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(calc(.5 * var(--u)) calc(.6 * var(--u)) 0 #9b8e72); }
.seal-ring b, .seal-ring span { text-shadow: 0 0 calc(.5 * var(--u)) rgba(242, 207, 39, .95), 0 0 calc(1 * var(--u)) rgba(242, 207, 39, .8); }
/* the contents page's cards: a fan of three */

/* three kinds of note (the owner, 2026-09-18): red is danger, yellow is warning and information,
   green is a tip or good news. A note at the foot of a page is where a strip used to run. */
.note { background: #efd98a; border-left-color: #c9a11c; }
.note b { color: #6b4e08; }
.hint { background: #f3e3a6; }
.tip {
  margin: calc(2.4 * var(--u)) 0 0; padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); background: #b9c99b;
  border: 3px solid #252525; border-left: calc(1.6 * var(--u)) solid #2f6b3a; font-size: calc(2 * var(--u)); box-shadow: calc(.7 * var(--u)) calc(.7 * var(--u)) 0 #8b8068;
}
.tip b { display: block; font: 900 calc(1.7 * var(--u))/1 "Courier New", monospace; letter-spacing: .2em; margin-bottom: calc(.7 * var(--u)); color: #24522d; }
.tip.foot { margin-top: auto; margin-bottom: calc(1.4 * var(--u)); }
.danger {
  margin: calc(2.4 * var(--u)) 0 0; padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)); background: #b33c2e; color: #f7f1de;
  border: 3px solid #1f1f1f; font-size: calc(2 * var(--u)); box-shadow: calc(.8 * var(--u)) calc(.8 * var(--u)) 0 #262626;
}
.danger b { display: block; font: 900 calc(1.7 * var(--u))/1 "Courier New", monospace; letter-spacing: .2em; margin-bottom: calc(.7 * var(--u)); color: var(--yellow); }
.danger b::before { content: "\26A0\FE0E  "; font-size: calc(2.2 * var(--u)); }

/* a chapter name is one line, always, so both bands of a spread are the same height */
.chapter-name { white-space: nowrap; font-size: calc(3.05 * var(--u)); letter-spacing: .04em; }

/* ---------- phones: the same pages as a scrolling stack, the book switched off ---------- */
@media (max-width: 719px) {
  :root { --u: 7px; }                /* 6.5px until 2026-09-18; the owner asked for more readable phones, and a 360px screen still holds every band name at 7 */
  .bookframe, .bookbar { display: none; }
  .desk { padding: 10px 0 14px; }
  body.stacked #pages { display: block; width: 100%; padding: 0 8px; }
  body.stacked #pages .page { width: 100%; min-height: 0; margin: 0 0 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
  body.stacked .cols, body.stacked .catalogue, body.stacked .contents { grid-template-columns: 1fr; width: 100%; }
  body.stacked .callout-key { columns: 1; }
  body.stacked .steps { grid-template-columns: 1fr 1fr; }
  body.stacked .story-body { width: 100%; }
  body.stacked .cover-title { font-size: min(calc(5 * var(--u)), 7.3vw); }   /* INSTRUCTION is one word; 7.3vw is what fits a 360px screen's page */
  body.stacked .chapter-name { white-space: normal; line-height: 1.05; padding: calc(.9 * var(--u)) 0; font-size: calc(2.9 * var(--u)); }
  body.stacked .chapter-no { font-size: calc(2.1 * var(--u)); letter-spacing: .06em; padding: calc(1.2 * var(--u)) calc(1.1 * var(--u)); }   /* APPENDIX is a wide word; on a phone it leaves room for the name */   /* a name set on one line for the desktop band would run past a phone */
  body.stacked .story-figure { position: static; width: 40%; margin: calc(2 * var(--u)) auto 0; }
  body.stacked .seal { grid-template-columns: calc(21 * var(--u)) 1fr; }
  .sitefoot { width: 100%; flex-wrap: wrap; gap: 10px 14px; padding: 10px 8px 0; }
}
/* short landscape screens keep the spread and get their height back from the chrome */
@media (min-width: 720px) and (max-height: 520px) {
  :root { --chrome: 96px; }
  .desk { padding: 8px 0 10px; }
  .bookbar { margin-top: 6px; }
  .sitefoot { margin-top: 6px; padding-top: 6px; }
}

/* the cards spread: the game's own card art in a grid, names beneath */
.cardgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(2 * var(--u)) calc(1 * var(--u)); margin-top: calc(1.2 * var(--u)); }
.cardgrid figure { margin: 0; text-align: center; }
.cardgrid img { width: 100%; height: auto; display: block; filter: drop-shadow(calc(.35 * var(--u)) calc(.45 * var(--u)) 0 rgba(0, 0, 0, .35)); }
.cardgrid figcaption { margin-top: calc(.8 * var(--u)); font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-stretch: condensed; font-weight: 900; font-size: calc(2 * var(--u)); line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; color: var(--red-deep); }
@media (max-width: 719px) { body.stacked .cardgrid { grid-template-columns: repeat(4, 1fr); } }

/* the deck's show-and-tell rows: the card art beside its own entry */
.cardrows { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.6 * var(--u)) calc(3 * var(--u)); margin-top: calc(1.2 * var(--u)); }
.cardrow { display: grid; grid-template-columns: auto 1fr; gap: calc(1.6 * var(--u)); align-items: start; border-bottom: 1px solid #a89b7d; padding-bottom: calc(1.4 * var(--u)); }
/* the faces fan on the diagonal: each later card sits a third of a width to the right and a
   little lower, so every card's middle column, the unit and its move, stays in view */
.cardrow .cards { display: flex; align-items: flex-start; --cw: calc(14 * var(--u)); }
.cardrow .cards.n2 { --cw: calc(13 * var(--u)); }
.cardrow .cards.n3 { --cw: calc(11 * var(--u)); }
.cardrow .cards img { width: var(--cw); height: auto; display: block; flex: none; transform-origin: 50% 100%; filter: drop-shadow(calc(.35 * var(--u)) calc(.45 * var(--u)) 0 rgba(0, 0, 0, .35)); }
.cardrow .cards img:nth-child(2) { margin-left: calc(-.34 * var(--cw)); margin-top: calc(.11 * var(--cw)); }
.cardrow .cards img:nth-child(3) { margin-left: calc(-.34 * var(--cw)); margin-top: calc(.22 * var(--cw)); }
.cardrow .cards.n2 img:nth-child(1) { transform: rotate(-3deg); }
.cardrow .cards.n2 img:nth-child(2) { transform: rotate(3deg); }
.cardrow .cards.n3 img:nth-child(1) { transform: rotate(-4deg); }
.cardrow .cards.n3 img:nth-child(3) { transform: rotate(4deg); }
.cardrow b { display: block; color: var(--red-deep); font: 900 calc(2.05 * var(--u))/1.1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-stretch: condensed; text-transform: uppercase; margin-bottom: calc(.45 * var(--u)); }
.cardrow p { margin: 0; font-size: calc(1.9 * var(--u)); line-height: 1.35; }
.cardgrid figcaption small { display: block; font: 700 calc(1.75 * var(--u))/1.2 "Courier New", monospace; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: calc(.4 * var(--u)); }
@media (max-width: 719px) { body.stacked .cardrows { grid-template-columns: 1fr; } }

/* the oversized face on the deck's first page, with the game's own words set in its boxes: the
   rectangles CCCardArt.h measures on the 512x768 art, as fractions, and the sizes SCCCardFrame.cpp
   fits them at (30, 19 and 22 art pixels), scaled with the card. Roboto Bold is the engine's own
   face (CCUIStyle.h), served from assets/fonts with its licence */
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url(assets/fonts/roboto-bold.woff2) format("woff2"); }
.anatomy { display: grid; grid-template-columns: auto 1fr; gap: calc(4 * var(--u)); align-items: center; margin: calc(1.6 * var(--u)) 0 0; }
.bigcard { position: relative; --cw: calc(31 * var(--u)); width: var(--cw); margin-left: calc(2 * var(--u)); filter: drop-shadow(calc(.6 * var(--u)) calc(.8 * var(--u)) 0 rgba(0, 0, 0, .35)); }
.bigcard img { width: 100%; height: auto; display: block; }
.bc { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; color: #fff; font-family: "Roboto", Arial, sans-serif; font-weight: 700; line-height: 1.12; }
.bc-priority { left: 57.03%; top: 2.6%; width: 15.63%; height: 3.65%; font-size: calc(19 / 512 * var(--cw)); }
.bc-title { left: 13.67%; top: 9.38%; width: 77.73%; height: 8.07%; font-size: calc(30 / 512 * var(--cw)); }
.bc-desc { left: 14.06%; top: 77.6%; width: 71.88%; height: 12.76%; font-size: calc(22 / 512 * var(--cw)); }
.cardkey { columns: 1; font-size: calc(2 * var(--u)); }
.cardkey li { margin-bottom: calc(2.2 * var(--u)); }
@media (max-width: 719px) {
  body.stacked .anatomy { grid-template-columns: 1fr; }
  body.stacked .bigcard { margin: 0 auto; }
}

/* a rubber stamp slapped on the Dent cards page's top corner (the owner, 2026-09-18): worn by an SVG
   speckle and a slight warp, multiplied onto the paper so it reads as ink rather than a sticker. The
   intro beside it is narrowed so no words sit under the ink */
.intro.stamped { max-width: calc(62 * var(--u)); }
.void-stamp { position: absolute; right: calc(2 * var(--u)); top: calc(1 * var(--u)); width: calc(20 * var(--u)); margin: 0; transform: rotate(-12deg); mix-blend-mode: multiply; opacity: .88; pointer-events: none; }
.void-stamp svg { display: block; width: 100%; height: auto; }
@media (max-width: 719px) { body.stacked .void-stamp { position: static; width: 42%; margin: calc(2 * var(--u)) auto 0; transform: rotate(-8deg); } }

/* the game's commendations fill a blank corner (the owner, 2026-09-18): the badge art from the
   owner's Achievements folder, each with the condition its row in CCAchievements.cpp states */
.commend { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1 * var(--u)) calc(1.2 * var(--u)); align-content: start; }
.commend.n4 { grid-template-columns: repeat(4, 1fr); }
.commend.n5 { grid-template-columns: repeat(5, 1fr); }
.commend.below { margin-top: calc(2.2 * var(--u)); }
.commend.n4 img, .commend.n5 img { width: 60%; }
.commend h4 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: calc(.3 * var(--u)) calc(2 * var(--u)); margin: 0 0 calc(.4 * var(--u)); font: 900 calc(1.7 * var(--u))/1 "Courier New", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--red-deep); border-bottom: calc(.35 * var(--u)) solid var(--red); padding-bottom: calc(.55 * var(--u)); }
.commend h4 span { font-size: calc(1.4 * var(--u)); letter-spacing: .14em; color: var(--ink-soft); }   /* they are Steam's, and on no other store (the owner, 2026-09-18) */
.commend figure { margin: 0; text-align: center; }
.commend img { display: block; width: 70%; height: auto; margin: 0 auto; filter: drop-shadow(calc(.3 * var(--u)) calc(.4 * var(--u)) 0 rgba(0, 0, 0, .3)); }
.commend figcaption { margin-top: calc(.6 * var(--u)); font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-stretch: condensed; font-weight: 900; font-size: calc(1.75 * var(--u)); line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; color: var(--red-deep); }
.commend figcaption small { display: block; margin-top: calc(.35 * var(--u)); font: 400 calc(1.6 * var(--u))/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; letter-spacing: 0; color: var(--ink); }
@media (max-width: 719px) { body.stacked .commend, body.stacked .commend.n4, body.stacked .commend.n5 { grid-template-columns: repeat(2, 1fr); } }

/* interoffice memos (the owner, 2026-09-18: "in-world memo notes in your dry voice"): a slip of
   lighter paper taped on askew, typewriter face, the header a red rubber-stamp line */
.memo-note { position: relative; width: 96%; margin: calc(1.8 * var(--u)) 0 0 calc(.6 * var(--u)); padding: calc(1 * var(--u)) calc(1.6 * var(--u)) calc(.9 * var(--u)); background: #f3ecd9; border: 1px solid #b7ab8c; transform: rotate(-1.2deg); box-shadow: calc(.5 * var(--u)) calc(.6 * var(--u)) 0 rgba(0, 0, 0, .28); font: 400 calc(1.6 * var(--u))/1.3 "Courier New", monospace; color: #2a2620; }
.memo-note::before { content: ""; position: absolute; top: calc(-.9 * var(--u)); left: 50%; width: calc(9 * var(--u)); height: calc(1.8 * var(--u)); background: rgba(236, 199, 84, .6); border: 1px solid rgba(0, 0, 0, .12); transform: translateX(-50%) rotate(-2deg); }
.memo-note b { display: block; font: 900 calc(1.4 * var(--u))/1 "Courier New", monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--red-deep); }
.memo-note small { display: block; margin: calc(.4 * var(--u)) 0 calc(.5 * var(--u)); padding-bottom: calc(.4 * var(--u)); border-bottom: 1px solid #b7ab8c; font-size: calc(1.4 * var(--u)); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.memo-note p { margin: 0; }

/* a drawn robot peeks up from a free corner with a bubble (the owner, 2026-09-18: clipart, not
   the logo's bot). On a right page it stands at the left and talks rightward; .flip mirrors that
   for a left page, whose folio plate takes the left corner */
.mascot { position: absolute; left: calc(3 * var(--u)); right: calc(30 * var(--u)); bottom: calc(1.5 * var(--u)); display: flex; align-items: flex-end; gap: calc(.5 * var(--u)); pointer-events: none; }
.mascot .peek { width: calc(15 * var(--u)); height: auto; flex: none; filter: drop-shadow(calc(.4 * var(--u)) calc(.4 * var(--u)) 0 rgba(0, 0, 0, .3)); }
.mascot .bubble { position: relative; flex: 1; margin-bottom: calc(9.5 * var(--u));   /* clear of the folio plate below it */ padding: calc(1.1 * var(--u)) calc(1.5 * var(--u)); background: #fffbef; border: 2px solid #141517; border-radius: calc(1.6 * var(--u)); box-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 rgba(0, 0, 0, .35); font: 700 calc(1.7 * var(--u))/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink); }
.mascot .bubble::before, .mascot .bubble::after { content: ""; position: absolute; left: calc(1.4 * var(--u)); bottom: calc(-1.5 * var(--u)); border-style: solid; border-width: calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0 0; border-color: #141517 transparent transparent transparent; }
.mascot .bubble::after { left: calc(1.4 * var(--u) + 2px); bottom: calc(-1.5 * var(--u) + 3px); border-width: calc(1.3 * var(--u)) calc(1.3 * var(--u)) 0 0; border-color: #fffbef transparent transparent transparent; }
/* the robot keeps away from the folio plate: a left page's plate is at its left, so the robot stands at the
   right there and talks leftward; the page's side comes from the script, so a renumbering cannot strand it */
.page[data-side="left"] .mascot { left: calc(30 * var(--u)); right: calc(3 * var(--u)); flex-direction: row-reverse; }
.page[data-side="left"] .mascot .bubble::before, .page[data-side="left"] .mascot .bubble::after { left: auto; right: calc(1.4 * var(--u)); border-width: calc(1.5 * var(--u)) 0 0 calc(1.5 * var(--u)); border-color: #141517 transparent transparent transparent; }
.page[data-side="left"] .mascot .bubble::after { right: calc(1.4 * var(--u) + 2px); border-width: calc(1.3 * var(--u)) 0 0 calc(1.3 * var(--u)); border-color: #fffbef transparent transparent transparent; }
@media (max-width: 719px) {
  body.stacked .mascot, body.stacked .page[data-side="left"] .mascot { position: static; margin-top: calc(2 * var(--u)); flex-direction: row; }
  body.stacked .memo-note { width: 100%; margin-left: 0; }
  body.stacked .page.backcover { aspect-ratio: 9 / 10; }   /* in the stack a page is as tall as its content, and the back cover's is three things placed on a plate: give it a plate's height */
}

/* a previous reader's pencil doodle in a page's empty corner (the owner, 2026-09-18) */
.doodle-corner { position: absolute; right: calc(3 * var(--u)); bottom: calc(10.5 * var(--u)); width: calc(44 * var(--u)); margin: 0; transform: rotate(-4deg); pointer-events: none; }
.doodle-corner .doodle { display: block; width: 100%; height: auto; }
@media (max-width: 719px) { body.stacked .doodle-corner { position: static; width: 70%; margin: calc(1 * var(--u)) auto 0; } }
.doodle-corner.bl { left: calc(5 * var(--u)); right: auto; bottom: calc(11 * var(--u)); width: calc(30 * var(--u)); transform: rotate(3deg); }
.doodle-corner.br { right: calc(5 * var(--u)); bottom: calc(11 * var(--u)); width: calc(30 * var(--u)); transform: rotate(-3deg); }

/* the AI disclosure sits at the foot of the Notices page, above the robot and its bubble */
/* the developer's note steps out of Plant 7's voice on purpose (the owner, 2026-09-18: "i want it to
   read more from me, even though it breaks the image"): a plain typed letter on lighter paper, signed */
.devnote { margin: calc(1 * var(--u)) 0 0; padding: calc(1.6 * var(--u)) calc(2.2 * var(--u)) calc(1.4 * var(--u)); background: #f4eedf; border: 2px solid #2b2823; box-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 rgba(0, 0, 0, .3); font-size: calc(2.1 * var(--u)); line-height: 1.45; color: #2a2620; }
.devnote b { display: block; margin-bottom: calc(.8 * var(--u)); font: 900 calc(2.2 * var(--u))/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .02em; color: #2a2620; }
.devnote p { margin: 0 0 calc(.9 * var(--u)); }
.devnote i { display: block; margin-top: calc(.4 * var(--u)); font: italic calc(2 * var(--u))/1 Georgia, "Times New Roman", serif; }
@media (max-width: 719px) { body.stacked .devnote { margin-top: calc(2 * var(--u)); } }
.doodle-corner.greet { width: calc(37 * var(--u)); left: calc(26 * var(--u)); bottom: calc(5 * var(--u)); transform: rotate(2deg); }   /* bigger, and just left of the page's centre (the owner, 2026-09-18) */
.doodle-corner.unit { top: calc(8.5 * var(--u)); bottom: auto; right: calc(4 * var(--u)); width: calc(24 * var(--u)); transform: rotate(3deg); }

/* a tile's variations under its entry: small pictures in a row. .ph marks a placeholder that reuses the
   kind's picture until the game's generator writes the real one (the owner, 2026-09-19) */
.variants { display: flex; flex-wrap: wrap; gap: calc(.6 * var(--u)) calc(.7 * var(--u)); margin-top: calc(.9 * var(--u)); }
.variants figure { margin: 0; width: calc(6.6 * var(--u)); text-align: center; }   /* four abreast fit a column: the turntable's options on one row */
.variants img { display: block; width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); margin: 0 auto; border: 1px solid #222; background: #333; }
.variants figcaption { margin-top: calc(.35 * var(--u)); font: 700 calc(1.3 * var(--u))/1.15 "Courier New", monospace; letter-spacing: .02em; color: var(--ink-soft); }

.tip + .tip, .tip + .hint, .note + .tip { margin-top: calc(1 * var(--u)); }   /* two callouts in a row sit closer than a callout under text */

/* the playtesters, as a list in two columns so the names are not lost in the paragraph (the owner, 2026-09-19) */
.thanks-list { columns: 2; column-gap: calc(3 * var(--u)); margin: calc(.8 * var(--u)) 0 calc(.9 * var(--u)); padding-left: calc(2.4 * var(--u)); font-weight: 900; }
.thanks-list li { break-inside: avoid; margin: 0 0 calc(.2 * var(--u)); }

/* The site footer carries the publisher chain Epic Online Services' brand review asks a public site to
   make explicit (2026-09-22): the application, the publisher brand and the legal company behind it, in
   one place a reviewer lands on. It was a single row of links; the links keep that row and the prose
   sits above and below them, in a reading face rather than the row's spaced monospace. */
.sitefoot { flex-direction: column; gap: 9px; text-align: center; }
/* The row spans the footer and breaks BETWEEN links, never inside a label: at a narrow width the old
   rule let "BUY NOW ON STEAM" split after "ON", which reads as two separate links. */
.foot-links { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }
.foot-links a, .foot-links span { white-space: nowrap; }
.foot-about, .foot-legal { margin: 0; max-width: 78ch; font: 400 12.5px/1.55 system-ui, "Segoe UI", Arial, sans-serif; letter-spacing: 0; color: #8a8674; }
.foot-about b { color: #a5a08a; }
.foot-legal { font-size: 11.5px; color: #77735f; }
.foot-legal b { color: #928d79; }
@media (max-width: 720px) { .foot-about, .foot-legal { font-size: 12px; padding: 0 4px; } }

/* The publisher's own site, linked from its name (2026-09-22), so a reviewer can follow the chain from
   the game to Isolation Inc without being told to. In the legal block it keeps the block's colour with a
   dotted rule rather than the link row's yellow: two bright words in small print read as a banner. */
.foot-legal a { color: inherit; border-bottom: 1px dotted currentColor; padding-bottom: 1px; }
.foot-legal a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }