/* ============================================================
   The Red Dot School — Brand Book  ·  v0.2
   Colors & type now MEASURED from the live Webflow CSS and the
   RENTAL_HOUSE architectural plates. Editorial register:
   grotesk display ↔ Garamond serif body. Page-internal sizing
   in cqw so pages scale faithfully and print correctly.
   ============================================================ */

:root {
  /* Core (confirmed) */
  --red:    #E04A14;   /* Vermillion — "The Red Dot" / drawing ink */
  --lime:   #D0FF00;   /* Chartreuse — highlight / active */
  --ink:    #000000;   /* Body type */
  --paper:  #FFFFFF;   /* Page */
  --cream:  #F4F0E6;   /* Drawing field — plates */

  /* Secondary (in CSS, roles TBD) */
  --green:  #00FF80;
  --cyan:   #00B7FF;
  --blue:   #2895F7;
  --mint:   #CCFFC6;
  --pink:   #FFDEDE;
  --aqua:   #00FFD5;   /* v0.5 — folded in from §3e shadow tokens */
  --coral:  #FF9395;   /* v0.5 — folded in from §3e shadow tokens */

  /* Playful display palette (§3e web behaviors — distinct from core tokens) */
  --p-red:    #FF0000;  /* hard-offset shadow red */
  --p-blue:   #0073FF;  /* hard-offset shadow blue */
  --p-coral:  #FF6060;  /* per-letter hover (active) */
  --p-peri:   #8390FA;  /* periwinkle (commented original) */
  --p-gold:   #FAC748;  /* gold */
  --p-pink:   #F88DAD;  /* pink */
  --p-green:  #5FB44A;  /* idle link cycle green */
  --p-teal:   #37B6C4;  /* idle link cycle teal */

  /* Construction-line grays (from plates) */
  --steel:  #5D6C7B;
  --slate:  #758696;
  --gray:   #C3C3C3;
  --muted:  #5D6C7B;
  --rule:   #111111;

  --backdrop: #d8d4ca;
  --ink-soft: #333333;   /* dark grey — sans-heading text under the hard-offset shadow */

  --grotesk: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;  /* Aktiv Grotesk subst. */
  --serif: "EB Garamond", "Adobe Garamond Pro", Georgia, serif;     /* Adobe Garamond subst. */
  --jp: "Noto Sans JP", sans-serif;
  --jpserif: "Zen Old Mincho", "Hina Mincho", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--backdrop);
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Document column ---------- */
.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2vw;
  padding: 4vw 0 6vw;
}

/* ---------- Page sheet ---------- */
.page {
  position: relative;
  width: min(1440px, 94vw);
  aspect-ratio: 3 / 2;
  background: var(--paper);
  container-type: inline-size;
  box-shadow: 0 2px 2px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.16);
  overflow: hidden;
}
.page.cream { background: var(--cream); }

.sheet { position: absolute; inset: 0; display: flex; flex-direction: column; }

.page-body {
  position: absolute;
  top: 5.8cqw;
  left: 7cqw;
  right: 7cqw;
  bottom: 6.4cqw;
}

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--grotesk);
  font-size: 0.92cqw;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.eyebrow.muted { color: var(--muted); }

.display {
  font-family: var(--grotesk);
  font-size: 7cqw;
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}

h1.page-title {
  font-family: var(--grotesk);
  font-size: 4cqw;
  line-height: 1.02;
  letter-spacing: -0.018em;
  font-weight: 700;
  margin: 0;
}

h2.sub {
  font-family: var(--grotesk);
  font-size: 2cqw;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}

/* ---------- Hard-offset drop-shadow on sans headings (§3e applied) ----------
   Dark-grey type lifted off the page by a solid, no-blur colored duplicate.
   The offset color alternates vermillion / blue page to page for print-
   misregistration rhythm. Pages are sibling <section class="page">. */
.display,
h1.page-title,
h2.sub,
.title-jp,
.sub-jp {
  color: var(--ink-soft);
  text-shadow: 0.05em 0.06em 0 var(--heading-shadow, var(--red));
}
.book > .page:nth-of-type(odd)  { --heading-shadow: color-mix(in srgb, var(--red) 20%, transparent); }     /* vermillion ~20% (matches Wall Party demo) */
.book > .page:nth-of-type(even) { --heading-shadow: color-mix(in srgb, var(--p-blue) 18%, transparent); }  /* blue ~18% (matches Wall Party demo) */

/* Back cover sits on vermillion — keep its headings clean (white, no shadow). */
.page.reverse .display,
.page.reverse h1.page-title,
.page.reverse h2.sub,
.page.reverse .title-jp,
.page.reverse .sub-jp {
  color: var(--paper);
  text-shadow: none;
}

.lead {
  font-family: var(--serif);
  font-size: 2cqw;
  line-height: 1.42;
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

p, li { text-wrap: pretty; }

.body {
  font-family: var(--serif);
  font-size: 1.5cqw;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  max-width: 44ch;
}
.body + .body { margin-top: 0.85em; }

.aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.48cqw;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

.mono {
  font-family: var(--mono);
  font-size: 0.92cqw;
  letter-spacing: 0.01em;
}

.flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0.07cqw solid var(--gray);
  padding: 0.2cqw 0.6cqw;
  white-space: nowrap;
}
.flag.measured { color: #1a7a3a; border-color: #1a7a3a; }
.flag.confirmed { color: #1a7a3a; border-color: #1a7a3a; }
.flag.open { color: var(--red); border-color: var(--red); }

/* ---------- Title block (four-zone footer) ---------- */
.title-block {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  bottom: 2.6cqw;
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr 1.2fr;
  align-items: baseline;
  gap: 1cqw;
  padding-top: 0.9cqw;
  border-top: 0.085cqw solid var(--rule);
  font-family: var(--grotesk);
  font-size: 0.8cqw;
  letter-spacing: 0.04em;
}
.title-block span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-section { text-transform: uppercase; letter-spacing: 0.18em; }
.tb-title { text-align: center; text-transform: uppercase; letter-spacing: 0.14em; }
.tb-title .draft { color: var(--red); font-style: normal; }
.tb-no { font-family: var(--mono); text-align: right; letter-spacing: 0.02em; }
.tb-org { text-align: right; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; }

/* ---------- Japanese type ---------- */
/* §9 hard rule: Japanese is VISUALLY COEQUAL with English — same size,
   same weight class, same color, same paired face. Never smaller / lighter /
   muted / parenthetical / subordinated. Companion classes below inherit the
   metrics of their English equivalent; only the typeface changes. */
.jp { font-family: var(--jpserif); }

/* JP companion to a grotesk page-title — coequal size/weight, set inline
   per page to match the English title's font-size. */
.title-jp {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 2.6cqw;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0.7cqw 0 0;
}
/* JP companion to an eyebrow — same size, weight, and (muted) color */
.eyebrow-jp {
  font-family: var(--jp);
  font-weight: 600;
  font-size: 0.92cqw;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0.45cqw 0 0;
}
/* JP companion to body copy — Zen Old Mincho, coequal with .body */
.body-jp {
  font-family: var(--jpserif);
  font-weight: 400;
  font-size: 1.5cqw;
  line-height: 1.5;
  color: var(--ink);
  margin: 0.7cqw 0 0;
  text-wrap: pretty;
}
.lead-jp {
  font-family: var(--jpserif);
  font-weight: 400;
  font-size: 2cqw;
  line-height: 1.42;
  color: var(--ink);
  margin: 1cqw 0 0;
  text-wrap: pretty;
}
.aside-jp {
  font-family: var(--jpserif);
  font-size: 1.48cqw;
  line-height: 1.45;
  color: var(--ink);
  margin: 0.5cqw 0 0;
}

/* ---------- The dot ---------- */
.dot { display: inline-block; border-radius: 50%; background: var(--red); }

/* ---------- Four marks ---------- */
.mark { display: block; }
.mark svg { display: block; width: 100%; height: 100%; }
.mark .fill { fill: var(--red); }
.mark .stroke { fill: none; stroke: var(--red); }
.shape-name { font-family: var(--grotesk); font-weight: 600; font-size: 1.45cqw; letter-spacing: -0.01em; margin: 0; }
.shape-jp { font-family: var(--jp); font-weight: 600; font-size: 1.45cqw; margin-left: 0.4cqw; }
.shape-organ { font-family: var(--grotesk); font-weight: 500; font-size: 0.92cqw; letter-spacing: 0.02em; color: var(--ink); margin: 0.55cqw 0 0; }

/* ---------- Utility ---------- */
.col { display: flex; flex-direction: column; }
.row { display: flex; }
.between { justify-content: space-between; }
.rule { height: 0.085cqw; background: var(--rule); border: 0; }
.fine-rule { height: 0.07cqw; background: var(--gray); border: 0; }
.grid { display: grid; }

/* contents list */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li {
  display: grid;
  grid-template-columns: 3.4cqw 1fr auto;
  align-items: baseline;
  gap: 1cqw;
  padding: 0.46cqw 0;
  border-top: 0.07cqw solid var(--gray);
  font-family: var(--grotesk);
  font-size: 1.18cqw;
}
.toc li:last-child { border-bottom: 0.07cqw solid var(--gray); }
.toc .n { font-family: var(--mono); font-size: 0.92cqw; color: var(--muted); }
.toc .pg { font-family: var(--mono); font-size: 0.92cqw; color: var(--muted); }
.toc-jp { font-family: var(--jp); font-weight: 400; font-size: 1.18cqw; color: var(--ink); letter-spacing: 0.02em; margin-left: 0.7cqw; }

/* five-organ list (Foundation page) */
.organs { list-style: none; margin: 0; padding: 0; align-self: center; }
.organs li {
  display: grid;
  grid-template-columns: 3.2cqw 1fr;
  gap: 1.4cqw;
  align-items: baseline;
  padding: 1.15cqw 0;
  border-top: 0.07cqw solid var(--gray);
}
.organs li:last-child { border-bottom: 0.07cqw solid var(--gray); }
.organs .o-n { font-family: var(--mono); font-size: 1.05cqw; color: var(--red); }
.organs .o-name { font-family: var(--grotesk); font-weight: 600; font-size: 1.5cqw; letter-spacing: -0.01em; margin: 0; }
.organs .o-jp { font-family: var(--jp); font-weight: 600; font-size: 1.5cqw; letter-spacing: 0; margin-left: 0.5cqw; }
.organs .o-desc { font-family: var(--serif); font-size: 1.18cqw; line-height: 1.4; color: var(--ink); margin: 0.45cqw 0 0; }

/* swatch grid */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.swatch .chip { width: 100%; aspect-ratio: 5 / 3.4; border: 0.07cqw solid rgba(0,0,0,.12); }
.swatch .meta { margin-top: 0.6cqw; }
.swatch .role { font-family: var(--grotesk); font-size: 1.08cqw; font-weight: 600; letter-spacing: -0.005em; }
.swatch .hex { font-family: var(--mono); font-size: 0.9cqw; color: var(--muted); margin-top: 0.12cqw; }
.swatch .where { font-size: 1.02cqw; line-height: 1.34; color: var(--ink); margin-top: 0.4cqw; }

/* secondary palette mini-chips */
.minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8cqw; }
.mini .c { width: 100%; aspect-ratio: 2/1; border: 0.07cqw solid rgba(0,0,0,.1); }
.mini .h { font-family: var(--mono); font-size: 0.72cqw; color: var(--muted); margin-top: 0.3cqw; }

/* data table */
.dtable { width: 100%; border-collapse: collapse; }
.dtable td, .dtable th { text-align: left; vertical-align: top; padding: 0.6cqw 1cqw 0.6cqw 0; border-top: 0.07cqw solid var(--gray); }
.dtable tr:first-child td, .dtable tr:first-child th { border-top: 0.085cqw solid var(--rule); }
.dtable th { font-family: var(--grotesk); font-size: 0.85cqw; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--muted); }
.dtable .k { font-family: var(--grotesk); font-weight: 600; font-size: 1.12cqw; width: 32%; }
.dtable .v { font-size: 1.2cqw; }
.dtable .v .jp { font-family: var(--jpserif); color: var(--muted); }

/* back cover */
.page.reverse { background: var(--red); color: var(--paper); }
.page.reverse .title-block { border-color: rgba(255,255,255,.5); }
.page.reverse .tb-title .draft { color: var(--lime); }

/* ---------- Reading-progress chrome (screen only) ---------- */
.pageindex {
  position: fixed; right: 1.4vw; bottom: 1.4vw; z-index: 50;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: #2a2a2a; background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  padding: 7px 11px; border: 1px solid rgba(0,0,0,.12); user-select: none;
}

/* ============================================================
   v0.4 — JP coequal companions for body content.
   §9 hard rule extended past headers: every English content
   string gets a Japanese counterpart in its paired face, at
   coequal size / weight / color. These inherit metrics from
   their English sibling; only the typeface changes.
   ============================================================ */

/* companion to h2.sub */
.sub-jp {
  font-family: var(--jp);
  font-weight: 600;
  font-size: 2cqw;
  line-height: 1.16;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0.4cqw 0 0;
}

/* companion to organ descriptions (Foundation page) */
.organs .o-desc-jp {
  font-family: var(--jpserif);
  font-size: 1.18cqw;
  line-height: 1.4;
  color: var(--ink);
  margin: 0.3cqw 0 0;
}

/* companion to shape routing line + shape body/aside (Shapes page) */
.shape-organ-jp {
  font-family: var(--jp);
  font-weight: 500;
  font-size: 0.92cqw;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0.2cqw 0 0;
}

/* block JP companion inside a list item — inherits the li's size */
.lj {
  display: block;
  font-family: var(--jpserif);
  color: var(--ink);
  line-height: 1.4;
  margin-top: 0.28cqw;
}

/* swatch role + where companions (Color page) */
.swatch .role-jp {
  font-family: var(--jp);
  font-weight: 600;
  font-size: 1.08cqw;
  color: var(--ink);
  margin-top: 0.14cqw;
}
.swatch .where-jp {
  font-family: var(--jpserif);
  font-size: 1.0cqw;
  line-height: 1.32;
  color: var(--ink);
  margin-top: 0.26cqw;
}

/* data-table key companion (Identity page) */
.dtable .kj {
  display: block;
  font-family: var(--jp);
  font-weight: 600;
  font-size: 1.0cqw;
  color: var(--ink);
  margin-top: 0.18cqw;
}

/* bilingual status flag — stacks JP under EN, allowed to wrap */
.flag.bi {
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  max-width: 22ch;
}
.flag .fj {
  display: block;
  font-family: var(--jp);
  margin-top: 0.15cqw;
}

/* Tweak: toggle the [DRAFT] markers */
.hide-draft .draft { display: none; }

/* Shapes page: let each column take its natural height (no equal-height
   stretch) and never shrink, so bilingual text is not clipped. */
.shapes-row > .col { align-self: start; flex-shrink: 0; min-height: 0; }
.shapes-row .mark { width: 3.8cqw !important; height: 3.8cqw !important; }

/* ============================================================
   v0.5 — Registers (§1a) + Web display behaviors (§3e).
   Two registers of one identity (RDS Pure / RDS Refined) and the
   three signature web treatments, demonstrated live on the page.
   ============================================================ */

/* ---------- Registers: Pure vs Refined ---------- */
.registers { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0.085cqw solid var(--rule); }
.reg { padding: 1.0cqw 1.4cqw 1.1cqw; }
.reg.pure { border-right: 0.085cqw solid var(--rule); }
.reg .reg-tag { font-family: var(--mono); font-size: 0.74cqw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0; }
.reg .reg-name { font-family: var(--grotesk); font-weight: 700; font-size: 1.6cqw; letter-spacing: -0.015em; margin: 0.3cqw 0 0; }
.reg.pure .reg-name { color: var(--red); }
.reg .reg-name-jp { font-family: var(--jp); font-weight: 700; font-size: 1.22cqw; margin: 0.18cqw 0 0; }
.reg .reg-voice { font-family: var(--serif); font-style: italic; font-size: 1.0cqw; line-height: 1.32; margin: 0.45cqw 0 0; }
.reg ul { list-style: none; margin: 0.55cqw 0 0; padding: 0; }
.reg li { font-family: var(--serif); font-size: 0.92cqw; line-height: 1.26; padding: 0.22cqw 0 0.22cqw 1.1cqw; position: relative; border-top: 0.07cqw solid var(--gray); }
.reg li:before { position: absolute; left: 0; top: 0.5cqw; font-family: var(--mono); font-size: 0.9cqw; }
.reg.pure li:before { content: "●"; color: var(--red); font-size: 0.7cqw; top: 0.6cqw; }
.reg.refined li:before { content: "·"; color: var(--muted); }
.reg li .lj { font-size: 0.82cqw; margin-top: 0.1cqw; }

/* register chooser table */
.chooser { width: 100%; border-collapse: collapse; }
.chooser td { font-family: var(--serif); font-size: 0.98cqw; line-height: 1.28; padding: 0.34cqw 1cqw 0.34cqw 0; border-top: 0.07cqw solid var(--gray); vertical-align: top; }
.chooser tr:first-child td { border-top: 0.085cqw solid var(--rule); }
.chooser .reg-cell { font-family: var(--grotesk); font-weight: 600; font-size: 0.92cqw; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; width: 26%; }
.chooser .reg-cell.is-pure { color: var(--red); }
.chooser .reg-cell.is-refined { color: var(--ink); }

/* ---------- Web behavior demos (§3e) ---------- */
.behaviors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; }
.beh { display: flex; flex-direction: column; }
.beh .beh-no { font-family: var(--mono); font-size: 0.9cqw; color: var(--red); }
.beh .beh-name { font-family: var(--grotesk); font-weight: 600; font-size: 1.28cqw; letter-spacing: -0.005em; margin: 0.45cqw 0 0; }
.beh .beh-name-jp { font-family: var(--jp); font-weight: 600; font-size: 1.05cqw; margin: 0.2cqw 0 0; }
.beh .stage {
  margin: 1cqw 0; padding: 1.8cqw 1.2cqw; min-height: 7.2cqw;
  border: 0.07cqw solid var(--gray); background: var(--paper);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.beh .beh-desc { font-family: var(--serif); font-size: 1.0cqw; line-height: 1.38; margin: 0; }
.beh .beh-desc-jp { font-family: var(--jpserif); font-size: 0.92cqw; line-height: 1.4; margin: 0.32cqw 0 0; }
.beh .beh-spec { font-family: var(--mono); font-size: 0.74cqw; color: var(--muted); margin: 0.6cqw 0 0; letter-spacing: 0.01em; }

/* (1) idle link color cycle — ~2s hue sweep, content links only */
@keyframes rds-link-cycle {
  0%   { color: #E8551E; }
  20%  { color: #FAC748; }
  40%  { color: #5FB44A; }
  60%  { color: #37B6C4; }
  80%  { color: #F88DAD; }
  100% { color: #E8551E; }
}
.cycle-link {
  font-family: var(--grotesk); font-weight: 600; font-size: 1.7cqw;
  letter-spacing: -0.01em; text-decoration: underline; text-underline-offset: 0.2em;
  animation: rds-link-cycle 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cycle-link { animation: none; color: var(--red); }
}

/* (2) per-letter color on hover — Waveshape .heading__color behavior.
   Canonical driver: rds-letter-color.js (warm palette #ff4400 #fc6e3a #f26050
   #fc6f84, revert 3s). The .1s transition matches the live site's color fade. */
.heading__color {
  font-family: var(--grotesk); font-weight: 700; font-size: 1.7cqw;
  letter-spacing: -0.01em; cursor: default;
}
.heading__color .letter { transition: color 0.1s ease; }

/* (3) hard-offset colored drop-shadow — no blur, solid offset duplicate */
.shadow-demo {
  font-family: var(--grotesk); font-weight: 700; font-size: 2.1cqw;
  letter-spacing: -0.02em; color: #00FF80;
  text-shadow: 0 0.18cqw 0 rgba(255,0,0,0.2);
}
.shadow-demo .jpline {
  display: block; font-family: var(--jp); font-weight: 700; font-size: 1.4cqw;
  margin-top: 0.3cqw; color: var(--ink);
  text-shadow: 0 0.16cqw 0 rgba(0,115,255,0.18);
}

/* ---------- Embossed imagery (§07b) ----------
   Live demo on the Embossed Imagery page. A stylized image sails slowly
   across a bordered stage at low opacity; title text sits in front.
*/
.emboss-stage {
  position: relative;
  height: 14cqw;
  border: 0.07cqw solid var(--gray);
  background: var(--paper);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.emboss-art {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* Image is taller than the stage; contain it within the stage's content box
     by sizing to a smaller height via mask/positioning trick: use auto + max-height
     can't be set on a background — instead constrain via aspect-ratio'd wrapper */
  background-size: auto 92%;
  filter: saturate(.78);
  opacity: 0;
  transform: translateX(110%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .emboss-art {
    animation: rds-emboss-sail 28s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .emboss-art {
    opacity: 0.30;
    transform: translateX(18%);
  }
}
@keyframes rds-emboss-sail {
  0%   { transform: translateX(110%);  opacity: 0; }
  10%  { opacity: 0.30; }
  50%  { transform: translateX(0);     opacity: 0.30; }
  90%  { opacity: 0.30; }
  100% { transform: translateX(-110%); opacity: 0; }
}
.emboss-text {
  position: relative; z-index: 1;
  padding: 0 2cqw;
  color: var(--ink-soft);
}
.emboss-text .sub { text-shadow: none; }

/* Static variant: no drift, image sits centered at fixed low opacity. */
.emboss-stage.static .emboss-art {
  animation: none !important;
  opacity: 0.30;
  transform: none;
  background-size: auto 88%;
}

/* Side-by-side comparison: two stages in one row. */
.emboss-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1cqw;
}
.emboss-duo .emboss-stage { height: 14cqw; }
.emboss-stage .emboss-mode {
  position: absolute; top: 0.7cqw; right: 0.85cqw;
  font-family: var(--mono); font-size: 0.78cqw;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
}

/* ---------- Print ---------- */
@media print {
  @page { size: 1440px 960px; margin: 0; }
  html, body { background: #fff; }
  .book { gap: 0; padding: 0; }
  .pageindex { display: none; }
  .page { width: 1440px; box-shadow: none; break-after: page; page-break-after: always; }
}