/* ==========================================================================
   RUSTIC — exhibition room. Loaded on a/rustic.html only.

   TIER 2. Material over pattern: the page is built of rendered materials —
   unfinished wood grain (gradients, an SVG turbulence streak layer and drawn
   lines), paper with tooth, dark bark slabs, rough woven cloth — and its
   hierarchy is ranked by material weight: heaviest boards carry the primary
   sections, paper the asides, rough cloth the small print. Nothing photographic,
   nothing animates, nothing pastel outside the one captioned failure panel
   in the parent-pair demonstration.

   Colour: deeper, richer wood browns (research, 2026-09-29, replaced the
   brief's earlier pale neutrals); the specific browns are ours.
   Contrast, every text/ground pair introduced here:
   - chalk #EFE8DA on heavy board #412A1B ..... 10.96:1
   - chalk #EFE8DA on mid board #57391F ....... 8.57:1
   - kicker #CFC5B2 on heavy board #412A1B .... >6.1:1
   - ink #33302A on paper #EAE3D1 ............. 10.27:1
   - ink-2 #5C554A on paper #EAE3D1 ........... 5.75:1
   - ink #33302A on rough cloth #CFBE9E ....... 7.21:1
   - chalk #EAE6DC on bark #2A2019 ............ 12.77:1
   - chalk #EFE8DA on chalkboard #262B26 ...... 11.83:1
   - chalk #EFE8DA on strap #4B3120 ........... 9.79:1
   - ink #33302A on alias tag #C9BCA4 ......... 7.02:1
   - control ink #35322C on smooth #E7E5E1 .... 10.15:1
   - demo pastel heading #7C5B66 on #F4E8ED ... 4.97:1 (display, demo zone)
   - demo pastel body #4A3E44 on #F4E8ED ...... 8.53:1
   The sprig drawing in the failure panel is decorative (aria-hidden) and
   carries no text.
   ========================================================================== */

@font-face {
  font-family: "Rock Salt RU";
  src: url("fonts/rock-salt.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zilla RU";
  src: url("fonts/zilla.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.ru-page {
  /* deeper, richer browns (the record's colours); the particular woods are ours */
  --ru-ground: #6B4F37;
  --ru-ground-2: #654A33;
  --ru-board-heavy: #412A1B;
  --ru-board-heavy-2: #3A2517;
  --ru-board-mid: #57391F;
  --ru-board-mid-2: #4F341D;
  --ru-strap: #4B3120;
  --ru-paper: #EAE3D1;
  --ru-cloth: #CFBE9E;
  --ru-bark: #2A2019;
  --ru-chalkboard: #262B26;
  --ru-chalk: #EFE8DA;
  --ru-chalk-2: #CFC5B2;
  --ru-ink: #33302A;
  --ru-ink-2: #5C554A;
  --ru-ours-light: #E9DFC8;
  --ru-ours-dark: #6F4A33;
  --ru-edge: rgba(26, 20, 14, 0.55);
  --ru-smooth: #E7E5E1;

  /* wood-grain streaks: SVG turbulence stretched horizontally, alpha only.
     Rendered, not photographic. */
  --ru-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.085' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* paper tooth: fine isotropic noise at very low alpha. */
  --ru-tooth: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  --ru-hand: "Rock Salt RU", "Bradley Hand", "Segoe Print", cursive;
  --ru-body: "Zilla RU", Rockwell, "Roboto Slab", Georgia, serif;

  background: var(--paper); /* shell mat; the room ground lives on main */
}

/* The ground: a wall of horizontal planks, grain running along them. */
.ru-page main {
  background:
    var(--ru-grain),
    repeating-linear-gradient(
      180deg,
      transparent 0 146px,
      rgba(24, 18, 12, 0.30) 146px 149px,
      rgba(255, 255, 255, 0.05) 149px 151px,
      transparent 151px 298px
    ),
    linear-gradient(var(--ru-ground), var(--ru-ground-2));
  color: var(--ru-chalk);
  font-family: var(--ru-body);
}

.ru-room { padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) 0; overflow-x: clip; }
.ru { max-width: 72rem; margin-inline: auto; }

.ru-room a:focus-visible,
.ru-room label:focus-visible {
  outline: 3px solid var(--ru-chalk);
  outline-offset: 3px;
}

/* ---- shared board recipe ------------------------------------------------- */
.ru-board,
.ru-sign__board,
.ru-materials {
  position: relative;
  background:
    var(--ru-grain),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 96px),
    linear-gradient(var(--b1, var(--ru-board-mid)), var(--b2, var(--ru-board-mid-2)));
  color: var(--ru-chalk);
  border: 3px solid var(--ru-edge);
  border-radius: 2px;
  box-shadow:
    0 10px 22px rgba(20, 15, 10, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.2rem, 3.5vw, 2.6rem);
}

/* ---- nails ---------------------------------------------------------------- */
.ru-nail {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #B7AC99, #6E655A 45%, #2E2822 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ru-nail--tl { top: 10px; left: 12px; }
.ru-nail--tr { top: 10px; right: 12px; }
.ru-nail--bl { bottom: 10px; left: 12px; }
.ru-nail--br { bottom: 10px; right: 12px; }
.ru-nail--pin { top: -6px; left: 50%; margin-left: -7px; width: 15px; height: 15px; }

/* ---- the sign ------------------------------------------------------------- */
.ru-sign { text-align: center; margin-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2rem, 5vw, 3rem); }
.ru-sign__board {
  --b1: var(--ru-board-heavy);
  --b2: var(--ru-board-heavy-2);
  display: inline-block;
  width: min(46rem, 100%);
  border-width: 5px;
  transform: rotate(-0.5deg);
  padding-block: clamp(1.8rem, 4vw, 3rem);
  box-shadow:
    0 16px 32px rgba(20, 15, 10, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.ru-kicker {
  margin: 0 0 1rem;
  font: 400 0.72rem/1.4 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ru-chalk-2);
}
.ru-h1 {
  margin: 0 0 1.2rem;
  font: 400 clamp(2.6rem, 8vw, 4.4rem)/1.35 var(--ru-hand);
  color: var(--ru-chalk);
  transform: rotate(-1.2deg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}
.ru-defining {
  margin: 0 auto;
  max-width: 42ch;
  font: 400 1.05rem/1.7 var(--ru-body);
  color: var(--ru-chalk);
}
.ru-tags {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
}
.ru-tag {
  background:
    var(--ru-tooth),
    linear-gradient(#C9BCA4, #C1B49C);
  color: var(--ru-ink);
  font: 400 0.82rem/1 var(--ru-body);
  padding: 0.45rem 0.8rem 0.5rem;
  border: 1px solid rgba(26, 20, 14, 0.4);
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(20, 15, 10, 0.3);
  position: relative;
}
.ru-tag::before {
  /* the tag's tie hole — drawn */
  content: "";
  position: absolute;
  top: 50%; left: -3px;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--ru-ground-2);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
.ru-tag:nth-child(odd) { transform: rotate(-1.4deg); }
.ru-tag:nth-child(even) { transform: rotate(1.1deg); }

/* ---- the ranking slab (bark) ----------------------------------------------- */
/* Dark bark: vertical fissures drawn as stripes, a ragged edge, no finish. */
.ru-plate {
  position: relative;
  width: min(36rem, 100%);
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 11px, rgba(255, 240, 220, 0.04) 11px 13px, transparent 13px 23px),
    linear-gradient(168deg, #33271E 0%, var(--ru-bark) 55%, #231A13 100%);
  color: #EAE6DC;
  border-radius: 3px 9px 4px 11px / 11px 4px 9px 3px;
  border: 2px solid #17100B;
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(20, 15, 10, 0.4);
  padding: 1.4rem clamp(1.2rem, 3vw, 2rem) 1.5rem;
}

/* ---- boards --------------------------------------------------------------- */
.ru-board--heavy {
  --b1: var(--ru-board-heavy);
  --b2: var(--ru-board-heavy-2);
  width: min(54rem, 100%);
  margin: 0 auto 0 0;
  border-width: 4px;
}
.ru-board--mid {
  width: min(46rem, 100%);
  margin: clamp(2rem, 5vw, 3rem) 0 0 auto;
  transform: rotate(0.35deg);
}
.ru-h2 {
  margin: 0 0 1.1rem;
  font: 400 clamp(1.3rem, 2.6vw, 1.7rem)/1.55 var(--ru-hand);
  color: var(--ru-chalk);
  transform: rotate(-0.8deg);
}
.ru-h2::after {
  /* a brush dash under the heading — paint, not a rule */
  content: "";
  display: block;
  width: 5.5rem; height: 5px;
  margin-top: 0.5rem;
  border-radius: 3px 5px 4px 6px;
  background: linear-gradient(92deg, var(--ru-chalk-2) 0 82%, transparent);
  opacity: 0.75;
  transform: rotate(-0.6deg);
}

/* ---- paper ---------------------------------------------------------------- */
.ru-paper {
  position: relative;
  background: var(--ru-tooth), linear-gradient(var(--ru-paper), #E4DCC8);
  color: var(--ru-ink);
  box-shadow: 0 6px 14px rgba(20, 15, 10, 0.35);
  padding: 1.5rem 1.4rem 1.3rem;
}

/* ---- the materials bench -------------------------------------------------- */
.ru-materials {
  --b1: var(--ru-board-heavy);
  --b2: var(--ru-board-heavy-2);
  width: min(64rem, 100%);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  border-width: 4px;
}
.ru-materials__intro { margin: 0 0 1.6rem; font-size: 0.98rem; line-height: 1.7; max-width: 58ch; }
.ru-mat-set {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 1.6rem;
  align-items: flex-start;
}
.ru-mat { position: relative; padding: 1.1rem 1.2rem 1.2rem; }
.ru-mat__name { margin: 0 0 0.4rem; font: 400 1.02rem/1.4 var(--ru-body); }
.ru-mat__rank {
  display: inline-block;
  font: 400 0.68rem/1 var(--mono);
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 50rem;
  padding: 0.22rem 0.5rem 0.26rem;
  margin-right: 0.4rem;
  vertical-align: 0.12em;
}
.ru-mat__carries { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.55; }
.ru-mat__how { margin: 0; font: 400 0.7rem/1.55 var(--mono); }

.ru-mat--wood {
  flex: 1 1 20rem;
  background:
    var(--ru-grain),
    linear-gradient(#5E4128, #563B23);
  color: var(--ru-chalk);
  border: 2px solid var(--ru-edge);
  box-shadow: 0 6px 12px rgba(20, 15, 10, 0.35);
  transform: rotate(-0.5deg);
  overflow: hidden;
}
.ru-mat--wood .ru-mat__how, .ru-mat--bark .ru-mat__how { color: var(--ru-chalk-2); }
.ru-mat__grain {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ru-mat__grain path, .ru-mat__grain ellipse {
  fill: none;
  stroke: rgba(30, 22, 15, 0.5);
  stroke-width: 1.4;
}
.ru-mat--wood > p { position: relative; }

.ru-mat--paper {
  flex: 1 1 15rem;
  background: var(--ru-tooth), linear-gradient(var(--ru-paper), #E3DBC7);
  color: var(--ru-ink);
  box-shadow: 0 5px 10px rgba(20, 15, 10, 0.3);
  transform: rotate(0.8deg);
}
.ru-mat--paper .ru-mat__how, .ru-mat--cloth .ru-mat__how { color: var(--ru-ink-2); }

.ru-mat--bark {
  flex: 1 1 15rem;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 11px, rgba(255, 240, 220, 0.04) 11px 13px, transparent 13px 23px),
    linear-gradient(160deg, #33271E 0%, var(--ru-bark) 60%);
  color: #EAE6DC;
  border-radius: 3px 9px 4px 11px / 11px 4px 9px 3px;
  border: 2px solid #17100B;
  box-shadow: 0 5px 12px rgba(20, 15, 10, 0.35);
  transform: rotate(-0.6deg);
}

.ru-mat--cloth {
  flex: 1 1 14rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(74, 56, 36, 0.2) 0 2px, transparent 2px 5px),
    var(--ru-cloth);
  color: var(--ru-ink);
  border: 1px dashed rgba(94, 84, 66, 0.55); /* the cut swatch edge */
  transform: rotate(0.5deg);
}


/* ---- demonstrations -------------------------------------------------------- */
.ru-demo {
  --b1: var(--ru-board-mid);
  --b2: var(--ru-board-mid-2);
  position: relative;
  background:
    var(--ru-grain),
    linear-gradient(var(--b1), var(--b2));
  border: 3px solid var(--ru-edge);
  border-radius: 2px;
  box-shadow: 0 10px 22px rgba(20, 15, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  width: min(60rem, 100%);
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.2rem, 3.5vw, 2.6rem);
}
.ru-demo--parent { margin-left: auto; transform: rotate(-0.3deg); }
.ru-demo__intro { margin: 0 0 1.5rem; font-size: 0.98rem; line-height: 1.7; max-width: 60ch; }
.ru-demo__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.ru-demo__panel { margin: 0; display: flex; flex-direction: column; }
.ru-demo__cap {
  margin-top: auto;
  background: var(--ru-tooth), linear-gradient(var(--ru-paper), #E4DCC8);
  color: var(--ru-ink);
  font: 400 0.72rem/1.6 var(--mono);
  padding: 0.8rem 0.9rem;
  box-shadow: 0 4px 8px rgba(20, 15, 10, 0.25);
}
.ru-demo__cap b { font-weight: 700; }

/* demo A: the hand and the system */
.ru-demo__handsign {
  margin: 0 0 0.9rem;
  background:
    var(--ru-grain),
    linear-gradient(#4E3520, #47301D);
  border: 3px solid var(--ru-edge);
  color: var(--ru-chalk);
  font: 400 clamp(1.5rem, 3.4vw, 2.1rem)/1.5 var(--ru-hand);
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.6rem) 1rem;
  transform: rotate(-1.6deg);
  box-shadow: 0 6px 14px rgba(20, 15, 10, 0.35);
}
.ru-demo__setsign {
  margin: 0 0 0.9rem;
  background: linear-gradient(176deg, #ECEAE6, var(--ru-smooth));
  border: 1px solid #C9C6C0;
  border-radius: 4px;
  color: #35322C;
  font: 400 clamp(1.05rem, 2.4vw, 1.4rem)/1.4 var(--ru-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: clamp(2rem, 4.6vw, 3.1rem) 1rem;
  box-shadow: 0 2px 6px rgba(20, 15, 10, 0.18);
}

/* demo B: material against pattern. The pattern mini is the record's own
   named failure, contained here and captioned; pastel exists nowhere else
   on the route. */
.ru-demo__mini {
  padding: 1.2rem 1.2rem 1.3rem;
  margin-bottom: 0.9rem;
  min-height: 11rem;
}
.ru-demo__mini--board {
  background:
    var(--ru-grain),
    repeating-linear-gradient(180deg, transparent 0 64px, rgba(24, 18, 12, 0.3) 64px 66px, transparent 66px 130px),
    linear-gradient(#4E3520, #47301D);
  border: 3px solid var(--ru-edge);
  color: var(--ru-chalk);
  box-shadow: 0 6px 14px rgba(20, 15, 10, 0.35);
  transform: rotate(-0.7deg);
}
.ru-demo__mini--pattern {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(217, 167, 188, 0.35) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(90deg, rgba(217, 167, 188, 0.35) 0 10px, transparent 10px 20px),
    #F7F0F3;
  border: 6px solid #EFE9DC; /* the museum's mat: a specimen, not a surface of this room */
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(20, 15, 10, 0.2);
  color: #4A3E44;
  overflow: hidden;
}
.ru-demo__sprig { position: absolute; right: 6px; bottom: 2px; width: 56px; height: 56px; }
.ru-demo__sprig svg { width: 100%; height: 100%; }
.ru-demo__sprig path { stroke: #8FA88B; stroke-width: 1.6; }
.ru-demo__sprig ellipse, .ru-demo__sprig circle { fill: #D9A7BC; }
.ru-demo__sprig circle { fill: #E7C89B; }
.ru-demo__minihead {
  margin: 0 0 0.7rem;
  font: 400 1.35rem/1.5 var(--ru-hand);
  transform: rotate(-1deg);
}
.ru-demo__minihead--pattern {
  font: 300 italic 1.45rem/1.4 var(--ru-body);
  letter-spacing: 0.05em;
  color: #7C5B66;
  transform: none;
}
.ru-demo__minibody { margin: 0; font-size: 0.88rem; line-height: 1.6; max-width: 34ch; }
.ru-demo__minibody--pattern { color: #4A3E44; }
.ru-demo__ours {
  margin: 1.2rem 0 0;
  font: 400 0.74rem/1.6 var(--mono);
  color: var(--ru-chalk-2);
}
.ru-demo__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ru-chalk); text-underline-offset: 3px; }

/* ---- the rules sheet -------------------------------------------------------- */
.ru-rules { display: flex; justify-content: center; margin-top: clamp(2.5rem, 6vw, 4rem); }
.ru-paper--rules {
  width: min(32rem, 100%);
  transform: rotate(-0.8deg);
  padding: 1.8rem clamp(1.3rem, 4vw, 2.2rem) 1.6rem;
}
.ru-h2--paper { color: var(--ru-ink); }
.ru-h2--paper::after { background: linear-gradient(92deg, var(--ru-ink-2) 0 82%, transparent); opacity: 0.5; }
.ru-rules__list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font: 400 1.05rem/1.9 var(--ru-body);
  color: var(--ru-ink);
}
.ru-rules__list li::before { content: "×"; margin-right: 0.55rem; color: var(--ru-ours-dark); }
.ru-rules__note { margin: 0; font: 400 0.72rem/1.6 var(--mono); color: var(--ru-ink-2); }

/* ---- small screens ----------------------------------------------------------- */
@media (max-width: 48rem) {
  .ru-board--mid, .ru-demo--parent, .ru-sign__board, .ru-tag,
  .ru-mat--wood, .ru-mat--paper, .ru-mat--bark, .ru-mat--cloth,
  .ru-paper--rules, .ru-demo__mini--board {
    transform: none;
  }
  .ru-demo__handsign { transform: rotate(-1deg); }
}


/* ==========================================================================
   THE RECORD — the rest of the wall. The ranking holds to the foot of the
   page: bark for the particulars and the diagnostic, boards for the
   argument, the recognition, what carries the look and the rules, pinned
   paper for the asides, hung signs for the exits, and rough cloth for the small
   print. Headings are painted (Rock Salt); every sentence is upright Zilla.
   Contrast, pairs added here:
   - chalk-2 #CFC5B2 on mid board #57391F ....... 6.11:1
   - chalk-2 #CFC5B2 on bark #2A2019 ............ 9.31:1
   - chalk #EFE8DA on the wall #6B4F37 .......... 6.15:1 (the painted Use it heading only)
   - ink #33302A on tag #C9BCA4 / #C1B49C ....... 7.02:1 / 6.43:1
   Small labels on the cloth are set in ink, not ink-2: the weave shifts the ground.
   ========================================================================== */

/* Motionless: the shell's scroll reveal does not reach the record. */
.ru-page main > section.ru-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

.ru-rec {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  color: var(--ru-chalk);
  font: 400 1.05rem/1.7 var(--ru-body);
}
/* The cloth runs to the foot and to both edges of the page's column. */
.ru-page.sideshell > main { padding-block-end: 0; }
.ru-rec b { font-weight: 700; }
.ru-rec a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.ru-rec a:hover { text-decoration-thickness: 2px; }
.ru-rec :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.ru-rwall {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  overflow-x: clip;
}
.ru-rs { position: relative; min-width: 0; }

/* sentences */
.ru-rt { margin: 0.5rem 0; max-width: 62ch; text-wrap: pretty; }
.ru-rt--k { font: 400 0.78rem/1.6 var(--mono); color: var(--ru-chalk-2); }
.ru-pull {
  margin: 0 0 1rem;
  max-width: 30ch;
  font: 400 clamp(1.3rem, 2.8vw, 1.75rem)/1.5 var(--ru-body);
  text-wrap: balance;
}
.ru-rb > p, .ru-rb > div, .ru-rb > h2 { position: relative; }

/* boards in the record: the hero's recipe, re-ranked */
.ru-rec .ru-board--heavy { margin: 0 auto 0 0; }
.ru-rec .ru-board--mid { margin: 0 0 0 auto; }
.ru-rb--wide { width: min(64rem, 100%); }
.ru-rec .ru-rb--wide { margin-inline: auto; }
.ru-count {
  display: inline-block;
  margin-left: 0.4rem;
  font: 400 1rem/1 var(--ru-body);
  color: var(--ru-chalk-2);
}

/* 1. the particulars: a bark slab */
.ru-rplate { width: min(40rem, 100%); }
.ru-h2--plate { color: #EAE6DC; }
.ru-facts { margin: 0; padding: 0; }
.ru-facts > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.2rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px dashed rgba(234, 230, 220, 0.3);
}
.ru-facts dt {
  font: 400 0.72rem/1.9 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ru-chalk-2);
}
.ru-facts dd { margin: 0; }

/* pinned paper asides */
.ru-asides {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.6rem 1.8rem;
  margin-top: 1.8rem;
}
.ru-rs--plate .ru-asides, .ru-rs--plate > .ru-rp { margin-top: 1.6rem; }
.ru-rp {
  position: relative;
  flex: 1 1 15rem;
  max-width: 24rem;
  background: var(--ru-tooth), linear-gradient(var(--ru-paper), #E4DCC8);
  color: var(--ru-ink);
  box-shadow: 0 6px 14px rgba(20, 15, 10, 0.35);
  padding: 1.4rem 1.3rem 1.2rem;
  transform: rotate(0.9deg);
}
.ru-rp:nth-child(even) { transform: rotate(-0.8deg); }
.ru-rp__lab { margin: 0 0 0.5rem; font: 400 0.95rem/1.6 var(--ru-hand); }
.ru-rp__p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.ru-costs { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; }
.ru-costs li, .ru-tagk {
  background: var(--ru-tooth), linear-gradient(#C9BCA4, #C1B49C);
  color: var(--ru-ink);
  border: 1px solid rgba(26, 20, 14, 0.4);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(20, 15, 10, 0.3);
}
.ru-costs li { font-size: 0.98rem; line-height: 1.3; padding: 0.4rem 0.75rem 0.45rem; }
.ru-costs li:nth-child(odd) { transform: rotate(-1.2deg); }
.ru-costs li:nth-child(even) { transform: rotate(1deg); }

/* 3. the diagnostic, on bark inside the board */
.ru-dx { width: min(38rem, 100%); margin: 1.2rem 0; }
.ru-dx__lab {
  margin: 0 0 0.35rem;
  font: 400 0.72rem/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ru-chalk-2);
}
.ru-dx__p { margin: 0; font-size: 1.12rem; line-height: 1.6; color: #EAE6DC; }

/* kind-of-claim tags: the alias tag, reused */
.ru-tagk {
  display: inline-block;
  font: 400 0.84rem/1.3 var(--ru-body);
  padding: 0.22rem 0.6rem 0.26rem;
  transform: rotate(-1deg);
}

/* 4. what carries the look: one plank per dimension */
.ru-cl { margin: 0.6rem 0; }
.ru-cl__row {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 0.3rem 1.4rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 2px solid rgba(24, 18, 12, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ru-cl__dim { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; }
.ru-cl__dim a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.15rem; }
.ru-cl__val p { margin: 0.3rem 0; }
.ru-cl__nl { font: 400 0.78rem/1.6 var(--mono); color: var(--ru-chalk-2); }
.ru-cl__val .ru-cl__nl { margin: 0.2rem 0 0; }
.ru-cl__tags { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.ru-cl__tags a { display: inline-flex; align-items: center; min-height: 44px; }
.ru-face { font-size: 1.1em; white-space: nowrap; }
.ru-chips { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ru-chips li {
  width: 5.4rem;
  padding: 0.35rem 0.35rem 0.3rem;
  background: var(--ru-tooth), linear-gradient(var(--ru-paper), #E4DCC8);
  box-shadow: 0 3px 7px rgba(20, 15, 10, 0.35);
}
.ru-chips li:nth-child(odd) { transform: rotate(-1.2deg); }
.ru-chips li:nth-child(even) { transform: rotate(0.9deg); }
.ru-chips__c { display: block; height: 2.6rem; border: 1px solid rgba(26, 20, 14, 0.4); }
.ru-chips__hex { display: block; margin-top: 0.3rem; font: 400 0.72rem/1.2 var(--mono); color: var(--ru-ink); text-align: center; }

/* 5. rules: each area its own plank */
.ru-area { margin-top: 1rem; padding-top: 0.9rem; border-top: 3px solid rgba(24, 18, 12, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.ru-area__h { margin: 0 0 0.3rem; font: 400 1.05rem/1.7 var(--ru-hand); transform: rotate(-0.5deg); }
.ru-area ul { list-style: none; margin: 0; padding: 0; }
.ru-area li { padding: 0.55rem 0; }
.ru-area li + li { border-top: 1px dashed rgba(239, 232, 218, 0.22); }
.ru-area li > .ru-rt { display: block; margin: 0.35rem 0 0; }
.ru-ev { display: block; margin-top: 0.2rem; font: 400 0.76rem/1.5 var(--mono); color: var(--ru-chalk-2); }
.ru-area--ctx { border: 2px dashed rgba(239, 232, 218, 0.35); padding: 0.8rem 1rem; }

/* 6. what it rules out: paper, as the avoidance list */
.ru-rs--c { display: flex; justify-content: center; }
.ru-rsheet { width: min(36rem, 100%); padding: 1.8rem clamp(1.3rem, 4vw, 2.2rem) 1.6rem; transform: rotate(-0.6deg); }
.ru-out + .ru-out { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed rgba(51, 48, 42, 0.35); }
.ru-out__h { margin: 0; font: 400 1rem/1.6 var(--ru-hand); }
.ru-out__k { margin: 0.2rem 0 0; font: 400 0.76rem/1.5 var(--mono); color: var(--ru-ink-2); }

/* 7. use it: signs hung on the wall */
.ru-h2--wall { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.ru-signs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.6rem;
}
.ru-sgn {
  position: relative;
  background:
    var(--ru-grain),
    linear-gradient(var(--ru-board-mid), var(--ru-board-mid-2));
  border: 3px solid var(--ru-edge);
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(20, 15, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 1.7rem 1.3rem 1.2rem;
  transform: rotate(-0.6deg);
}
.ru-sgn:nth-child(even) { transform: rotate(0.5deg); }
.ru-sgn a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.2rem;
  line-height: 1.3;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ru-chalk-2);
}
.ru-sgn .ru-rt { margin: 0.3rem 0 0; font-size: 0.98rem; line-height: 1.6; }

/* 8. the small print, on rough cloth to the foot of the page */
.ru-lnb {
  margin-top: clamp(3rem, 7vw, 5rem);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(74, 56, 36, 0.2) 0 2px, transparent 2px 5px),
    var(--ru-cloth);
  color: var(--ru-ink);
  border-top: 3px solid var(--ru-edge);
  margin-inline: calc(-1 * var(--s6));
  padding: clamp(1.8rem, 4vw, 2.6rem) calc(var(--s6) + max(0px, (100% - 72rem) / 2) + clamp(1rem, 4vw, 3rem)) clamp(3rem, 7vw, 5rem);
}
@media (max-width: 60rem) {
  .ru-lnb {
    margin-inline: calc(-1 * var(--s4));
    padding-inline: calc(var(--s4) + clamp(1rem, 4vw, 3rem));
  }
}
.ru-h2--cloth { color: var(--ru-ink); font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
.ru-h2--cloth::after { background: linear-gradient(92deg, var(--ru-ink-2) 0 82%, transparent); opacity: 0.5; }
.ru-lns + .ru-lns { margin-top: clamp(2rem, 5vw, 3rem); }
.ru-conf { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.ru-conf li { padding: 0.6rem 0; border-top: 1px solid rgba(94, 84, 66, 0.35); }
.ru-conf__n { display: block; font-size: 1.2rem; line-height: 1.3; }
.ru-conf__n a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 2px; }
.ru-conf__k { display: block; font: 400 0.72rem/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ru-ink); }
.ru-conf .ru-rt { display: block; margin: 0.3rem 0 0; }
.ru-warn {
  max-width: 58ch;
  margin: 1rem 0;
  padding: 0.7rem 0;
  border-block: 2px solid rgba(51, 48, 42, 0.55);
  font-size: 1.08rem;
  line-height: 1.6;
}
.ru-tw { overflow-x: auto; margin-top: 1rem; }
.ru-tw:focus-visible { outline: 3px solid var(--ru-ink); outline-offset: 3px; }
.ru-ledger { width: 100%; max-width: 46rem; border-collapse: collapse; font-size: 0.98rem; }
.ru-ledger th, .ru-ledger td { padding: 0.45rem 0.6rem; border-bottom: 1px dashed rgba(94, 84, 66, 0.5); text-align: left; font-weight: 400; }
.ru-ledger thead th { font: 400 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ru-ink); border-bottom: 2px solid rgba(51, 48, 42, 0.55); }
.ru-ledger td { white-space: nowrap; }
.ru-foot { display: flex; flex-wrap: wrap; gap: 0 1.8rem; margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.ru-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 48rem) {
  .ru-rec .ru-board--mid, .ru-rp, .ru-rp:nth-child(even), .ru-sgn, .ru-sgn:nth-child(even),
  .ru-chips li, .ru-costs li, .ru-rsheet { transform: none; }
  .ru-asides { justify-content: stretch; }
  .ru-rp { max-width: none; }
  .ru-cl__row { grid-template-columns: 1fr; }
  .ru-facts > div { grid-template-columns: 1fr; gap: 0; }
  .ru-ledger td { white-space: normal; }
}
@media (max-width: 30rem) {
  .ru-ledger { font-size: 0.92rem; }
  .ru-ledger th, .ru-ledger td { padding: 0.4rem 0.3rem; }
  .ru-ledger thead th { letter-spacing: 0.04em; font-size: 0.66rem; }
  .ru-ledger tbody th { overflow-wrap: anywhere; }
}

/* ---- ornament made of the material (Design Completion Campaign, 2026-09-29) ----
   Documented: stick-on-bark stars and diamonds. Drawn as a geometric figure over
   bark fissures; the caption is the record's claim. */
.ru-twig { margin-top: clamp(2.5rem, 6vw, 4rem); width: min(46rem, 100%); margin-left: auto; margin-right: 0; }
.ru-twig__fig { margin: 0; }
.ru-twig__bark {
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 11px, rgba(255, 240, 220, 0.04) 11px 13px, transparent 13px 23px),
    linear-gradient(168deg, #33271E 0%, var(--ru-bark) 55%, #231A13 100%);
  border: 2px solid #17100B;
  border-radius: 3px 9px 4px 11px / 11px 4px 9px 3px;
  padding: 1rem;
  transform: rotate(0.4deg);
}
.ru-twig__svg { display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; }
.ru-twig__sticks path { fill: none; stroke: #B08A5E; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ru-twig__ends circle { fill: #D8BE95; stroke: #6B4A2B; stroke-width: 1.5; }
.ru-twig__k { display: block; margin: 0.2rem 0; color: var(--ru-ink-2); }
.ru-twig__fig .ru-demo__cap { display: block; margin-top: 1rem; }
.ru-rules__doc { margin: 0 0 0.8rem; font: 400 0.92rem/1.6 var(--ru-body); color: var(--ru-ink); }
@media (max-width: 48rem) { .ru-twig__bark { transform: none; } }