/* Rauha: a slim book about one table, laid on a floor of 1:2 mats. Hemp-oat ground, washi mats for
   long text, 1px seams as the only ornament, a folio counted through every mat, and blackwood as the
   one colour that answers the hand. */
@font-face { font-family: "M PLUS 1"; src: url("/assets/fonts/specimen/m-plus-1-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("/assets/fonts/specimen/shippori-mincho-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* the chosen timber's earlywood and latewood, so the drawn end grain can cross-fade between species */
@property --rh-early { syntax: "<color>"; inherits: true; initial-value: #D9BF96; }
@property --rh-late { syntax: "<color>"; inherits: true; initial-value: #B8966A; }

.spec-rauha {
  --rh-oat: #AC9D7F; --rh-ink: #1A1815; --rh-bw: #5A3A22; --rh-washi: #E9E1CF; --rh-ink-2: #3A342B;
  --rh-field: #F3EEE3; --rh-seam: rgba(26, 24, 21, .24); --rh-bw-wash: rgba(90, 58, 34, .08);
  --rh-text: "M PLUS 1", "Hiragino Sans", "Segoe UI", system-ui, sans-serif;
  --rh-head: "Shippori Mincho", "Iowan Old Style", Georgia, serif;
  --rh-ease: cubic-bezier(.2, 0, .2, 1);
}
body.spec-rauha { margin: 0; background: #AC9D7F; }
.spec-rauha #spec-main { display: block; container: rh / inline-size; }

/* ── the floor: a square cell, 8 across from 1200, 6 from 760, 2 on phones; rounded to whole pixels
   so every seam is one crisp pixel ── */
.rh-page {
  --rh-side: clamp(16px, 3.34cqi, 48px); --rh-cols: 2; --rh-pad: 18px;
  --rh-c: round(down, calc((min(100cqi, 1440px) - 2 * var(--rh-side)) / var(--rh-cols)), 1px);
  --rh-w: calc(var(--rh-cols) * var(--rh-c));
  counter-reset: rh-mat;
  background: var(--rh-oat); color: var(--rh-ink);
  font: 400 15px/1.5 var(--rh-text); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--rh-c) * .75);
}
@container rh (min-width: 820px) { .rh-page { --rh-cols: 6; --rh-pad: clamp(18px, 2.8cqi, 40px); } }
@container rh (min-width: 1200px) { .rh-page { --rh-cols: 8; } }
.rh-page *, .rh-page *::before, .rh-page *::after { box-sizing: border-box; }
:where(.rh-page) :where(h1, h2, h3, p, ol, ul, dl, dd, dt, figure, fieldset) { margin: 0; padding: 0; }
:where(.rh-page) :where(ol, ul) { list-style: none; }
.rh-page img { display: block; max-width: none; }
.rh-page a { color: var(--rh-ink); text-decoration: underline 1px var(--rh-ink); text-underline-offset: 4px; transition: text-decoration-color .3s var(--rh-ease), text-decoration-thickness .3s var(--rh-ease), color .3s var(--rh-ease); }
.rh-page a:hover, .rh-page a:focus-visible { text-decoration-thickness: 2px; text-decoration-color: var(--rh-bw); }
.rh-page .rh-wa a:hover, .rh-page .rh-wa a:focus-visible { color: var(--rh-bw); }
.rh-page :focus-visible { outline: 2px solid var(--rh-bw); outline-offset: 3px; }
.rh-page [hidden] { display: none !important; }
.rh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.rh-ico { display: inline-block; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; }
.rh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rh-hatch-l { stroke: var(--rh-seam); stroke-width: .6; }
.rh-page strong { font-weight: 500; }

.rh-floor {
  position: relative; display: grid; width: var(--rh-w); margin-inline: auto;
  grid-template-columns: repeat(var(--rh-cols), var(--rh-c)); grid-auto-rows: var(--rh-c);
}
/* each mat draws only its own top and left seam; the floor draws its right and bottom edge */
.rh-floor::after { content: ""; position: absolute; inset: 0; box-shadow: inset -1px -1px 0 var(--rh-seam); pointer-events: none; z-index: 6; }
.rh-mat {
  position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden;
  counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam);
  padding: var(--rh-pad) var(--rh-pad) max(var(--rh-pad), 34px);
}
.rh-wa { background: var(--rh-washi); }
/* the folio: every mat is counted; text mats show their number, plates (photographs, the canvas) do not */
.rh-mat:not(.rh-pl)::after {
  content: counter(rh-mat); content: counter(rh-mat) / "";
  position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); letter-spacing: .02em; color: var(--rh-ink); pointer-events: none;
}
.rh-mat.rh-wa::after { color: var(--rh-ink-2); }
.rh-pl { padding: 0; }
.rh-pl > picture, .rh-pl > img { position: absolute; inset: 1px 0 0 1px; display: block; }
.rh-pl > picture img { width: 100%; height: 100%; object-fit: cover; }

/* ── thresholds: plain oat between floors, the h2 low on the left ── */
.rh-thr {
  width: var(--rh-w); margin-inline: auto; min-height: 88px; padding: 28px 0 20px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
}
.rh-page h2 { font: 500 clamp(1.625rem, 1.439rem + .762cqi, 2.125rem)/1.22 var(--rh-head); }
.rh-page h3 { font: 500 clamp(1.25rem, 1.157rem + .381cqi, 1.5rem)/1.3 var(--rh-head); }
.rh-stand { font-size: 15px; line-height: 1.5; max-width: 34em; }
@container rh (min-width: 820px) { .rh-thr { min-height: calc(var(--rh-c) * .6); padding-top: 20px; } }
@container rh (min-width: 1200px) {
  .rh-thr { display: grid; grid-template-columns: repeat(8, var(--rh-c)); column-gap: 0; align-content: end; align-items: baseline; }
  .rh-thr h2 { grid-column: 1 / 5; }
  .rh-stand { grid-column: 5 / 9; padding-left: 12px; }
}
.rh-sec { scroll-margin-top: calc(var(--bar-h, 42px) + 52px); }
.rh-top { padding-top: 10px; }

/* ── type ── */
.rh-h1 { font: 500 min(clamp(1.75rem, 1.1rem + 2.667cqi, 3.5rem), calc(var(--rh-c) * .34))/1.1 var(--rh-head); letter-spacing: -.005em; }
.rh-h1 span { display: block; white-space: nowrap; }
.rh-lead { font-weight: 300; font-size: clamp(1rem, .861rem + .571cqi, 1.375rem); line-height: 1.5; letter-spacing: .005em; max-width: 26em; }
.rh-body { font-weight: 300; font-size: 15px; line-height: 1.6; max-width: 34em; }
@container rh (min-width: 820px) { .rh-body { font-size: clamp(15px, calc(var(--rh-c) * .1), 17px); line-height: 1.65; } }
.rh-body + .rh-body { margin-top: .7em; }
.rh-cap, .rh-foot { font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--rh-ink-2); }
.rh-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--rh-bw); }

/* ── the nav: one long oat strip under the bar ── */
.rh-nav { position: sticky; top: var(--bar-h, 42px); z-index: 60; background: var(--rh-oat); box-shadow: inset 0 -1px 0 var(--rh-seam); }
.rh-nav-in { width: var(--rh-w); margin-inline: auto; height: 52px; display: flex; align-items: center; gap: 20px; }
.rh-page .rh-mark { font: 500 20px/1 var(--rh-head); letter-spacing: .02em; text-decoration: none; padding: 6px 0; }
.rh-run { display: none; position: relative; font-size: 13px; min-width: 18em; height: 1.45em; }
.rh-run span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .6s var(--rh-ease); }
.rh-run-b { opacity: 0; }
.rh-navl { display: none; margin-left: auto; gap: 28px; font-size: 14px; }
.rh-page .rh-navl a { text-decoration-color: transparent; }
.rh-page .rh-navl a:hover, .rh-page .rh-navl a:focus-visible { text-decoration-color: var(--rh-bw); }
.rh-contents { margin-left: auto; position: relative; }
.rh-contents summary { list-style: none; cursor: pointer; font-size: 15px; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.rh-contents summary::-webkit-details-marker { display: none; }
.rh-contents[open] summary .rh-ico { transform: rotate(180deg); }
.rh-sheet { position: absolute; right: 0; top: calc(100% + 7px); width: min(300px, calc(100cqi - 32px)); background: var(--rh-washi); box-shadow: 0 0 0 1px var(--rh-seam); padding: 12px 18px 16px; }
.rh-sheet ol { counter-reset: rh-toc; }
.rh-sheet li { counter-increment: rh-toc; display: flex; gap: 12px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--rh-seam); }
.rh-sheet li::before { content: counter(rh-toc); content: counter(rh-toc) / ""; font-size: 13px; color: var(--rh-ink-2); min-width: 1.4em; }
.rh-page .rh-sheet a { font-size: 15px; text-decoration-color: transparent; }
.rh-read { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rh-bw); transform: scaleX(0); transform-origin: left; pointer-events: none; }
@supports (animation-timeline: scroll()) { .rh-read { animation: rh-read linear both; animation-timeline: scroll(root); } }
@keyframes rh-read { to { transform: scaleX(1); } }
@container rh (min-width: 820px) { .rh-nav-in { height: 56px; } .rh-navl { display: flex; } .rh-contents { display: none; } }
@container rh (min-width: 1200px) { .rh-run { display: block; } }
@supports (transition-behavior: allow-discrete) { .rh-sheet { transition: opacity .6s var(--rh-ease); @starting-style { opacity: 0; } } }

/* ── timber plates: a board of the chosen timber set into the floor. A plate is a size container, so an
   upright plate turns its board on end, and the grain runs the long way. ── */
.rh-bwin { position: relative; overflow: hidden; container-type: size; }
.rh-bwin img {
  --rh-iw: max(100cqw, calc(100cqh / (1.5 * var(--rh-bh))));
  position: absolute; max-width: none; width: var(--rh-iw); height: calc(var(--rh-iw) * 1.5);
  left: calc(50cqw - var(--rh-iw) / 2); top: calc(50cqh - (var(--rh-bt) + var(--rh-bh) / 2) * 1.5 * var(--rh-iw));
}
.rh-bw-oak, .rh-page[data-t="oak"] .rh-follow { --rh-bt: .006; --rh-bh: .234; }
.rh-bw-blackwood, .rh-page[data-t="blackwood"] .rh-follow { --rh-bt: .259; --rh-bh: .228; }
.rh-bw-spotted, .rh-page[data-t="spotted"] .rh-follow { --rh-bt: .505; --rh-bh: .230; }
.rh-bw-redgum, .rh-page[data-t="redgum"] .rh-follow { --rh-bt: .752; --rh-bh: .240; }
.rh-plate { container-type: size; }
.rh-plate > .rh-bwin { position: absolute; inset: 1px 0 0 1px; transition: opacity .3s var(--rh-ease); }
@container (orientation: portrait) {
  .rh-plate > .rh-bwin { inset: auto; left: calc(50% + .5px); top: calc(50% + .5px); width: calc(100cqh - 1px); height: calc(100cqw - 1px); transform: translate(-50%, -50%) rotate(90deg); }
}
.rh-swap .rh-follow > .rh-bwin { opacity: 0; }

/* ── 1. the first screen: a floor of seven mats ── */
.rh-f-top { grid-template-areas: "h h" "p p" "m m" "n e" "n e"; }
.rh-hh { grid-area: h; display: flex; flex-direction: column; gap: 10px; }
.rh-hp { grid-area: p; }
.rh-hp img { object-position: 50% 58%; }
.rh-tp { grid-area: t; }
.rh-nm { grid-area: n; font-size: 15px; line-height: 1.5; }
.rh-hm { grid-area: m; }
.rh-he { grid-area: e; }
.rh-he img { object-position: 36% 60%; }
.rh-hx { grid-area: x; }
.rh-tp, .rh-hx { display: none; }
.rh-links { grid-area: h; align-self: end; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 var(--rh-pad) 34px; font-size: 15px; font-weight: 500; }
.rh-links a { white-space: nowrap; }
.rh-links .rh-ico { margin-left: 4px; }
.rh-hx ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 14px; }
@media (max-height: 600px) and (max-width: 699px) { .rh-hh { padding-top: 14px; gap: 8px; } .rh-hh .rh-eyebrow { font-size: 12px; } }
@container rh (min-width: 820px) {
  .rh-f-top { grid-template-areas: "h h h h m m" "h h h h m m" "p p p p m m" "p p p p m m"; }
  .rh-hh { justify-content: flex-end; gap: 16px; }
  .rh-he { display: none; }
  .rh-links { grid-area: m; flex-direction: column; align-items: flex-start; padding-bottom: 0; margin-bottom: 104px; }
  /* the name note sits at the foot of the tall washi mat */
  .rh-nm { grid-area: m; align-self: end; z-index: 3; counter-increment: none; box-shadow: none; overflow: visible; font-size: 13px; line-height: 1.45; padding-top: 0; }
  .rh-nm::after { display: none; }
}
@container rh (min-width: 1200px) {
  .rh-f-top { grid-template-areas: "h h h h p p p p" "h h h h p p p p" "t n m m m m e e" "t n m m m m x x"; }
  .rh-tp, .rh-he, .rh-hx { display: block; }
  .rh-links { flex-direction: row; gap: 28px; margin-bottom: 0; padding-bottom: var(--rh-pad); }
  .rh-nm { grid-area: n; align-self: stretch; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); overflow: hidden; padding-top: var(--rh-pad); padding-inline: 16px; }
  .rh-nm::after { display: block; }
}

/* ── 2. the room: four mats, the sentence and the controls either side of the table and its corner ── */
.rh-f-room { grid-template-areas: "s s" "t t" "b b" "r r" "q q"; }
.rh-js .rh-f-room { grid-template-areas: "s s" "t t" "b b" "z z" "k g" "k g" "q q"; }
@media (max-height: 600px) and (max-width: 699px) { .rh-js .rh-f-room { grid-template-areas: "t t" "b b" "z z" "s s" "k g" "k g" "q q"; } }
.rh-L { grid-area: l; }
.rh-L1 { grid-area: s; }
.rh-L2 { grid-area: q; }
.rh-R { grid-area: r; }
.rh-z { grid-area: z; }
.rh-wt { grid-area: k; }
.rh-we { grid-area: g; }
.rh-rp { grid-area: v; }
.rh-rn { grid-area: w; font-size: 13px; line-height: 1.45; }
.rh-tmat { grid-area: t; z-index: 3; pointer-events: none; }
.rh-bmat { grid-area: b; z-index: 3; pointer-events: none; }
.rh-rp, .rh-rn { display: none; }
.rh-table { grid-row: t-start / b-end; grid-column: t-start / t-end; position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; background: var(--rh-oat); }
.rh-table.is-drag { cursor: grabbing; }
.rh-table:focus-visible { outline: 2px solid var(--rh-bw); outline-offset: -3px; }
.rh-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rh-poster { position: absolute; left: 0; width: 100%; height: 50%; z-index: 1; overflow: hidden; transition: opacity .6s var(--rh-ease); }
.rh-poster img { width: 100%; height: 100%; object-fit: cover; }
.rh-poster-t { top: 0; }
.rh-poster-t img { object-position: 50% 58%; }
.rh-poster-b { top: 50%; background: var(--rh-washi); }
.rh-poster-b img { object-position: 36% 62%; }
.rh-table.is-live .rh-poster { opacity: 0; }
.rh-hint, .rh-cap-b { z-index: 4; align-self: start; pointer-events: none; font-size: 13px; line-height: 1.45; letter-spacing: .02em; padding: 12px 14px 0; max-width: 26em; transition: opacity .6s var(--rh-ease); }
.rh-hint { grid-area: t; }
.rh-cap-b { grid-area: b; color: var(--rh-ink-2); opacity: 0; }
.rh-table.is-live ~ .rh-cap-b, .rh-is-nogl .rh-cap-b { opacity: 1; }
.rh-is-nogl .rh-cap-b { display: none; }
.rh-is-nogl .rh-hint { justify-self: start; margin: 12px 14px 0; padding: 5px 10px; background: var(--rh-washi); }
.rh-nogl { position: absolute; left: 0; top: 50%; width: 100%; height: 50%; z-index: 2; overflow: hidden; background: var(--rh-washi); }
.rh-nogl .rh-bwin { position: absolute; top: 0; bottom: 0; right: 0; left: 34%; opacity: 0; transition: opacity .6s var(--rh-ease); }
.rh-nogl .rh-bwin.is-on { opacity: 1; }
.rh-nogl-sec { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; display: grid; place-items: center; box-shadow: inset -1px 0 0 var(--rh-seam); }
.rh-nogl-sec .rh-edge-lg { display: none; width: min(76%, 140px); margin: 0; }
.rh-nogl-sec .rh-edge-lg.is-on { display: block; }
.rh-L, .rh-R { display: contents; }
.rh-L > .rh-sub, .rh-R .rh-sub, .rh-R .rh-nojs {
  position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; counter-increment: rh-mat;
  box-shadow: inset 1px 1px 0 var(--rh-seam); padding: var(--rh-pad);
}
.rh-page:not(.rh-js) .rh-R { display: block; position: relative; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); padding: var(--rh-pad); background: var(--rh-washi); }
.rh-page:not(.rh-js) .rh-R .rh-nojs { box-shadow: none; padding: 0; counter-increment: none; }
.rh-js .rh-ctl { display: contents; }
.rh-js .rh-nojs { display: none; }
.rh-nojs p { font-size: 15px; max-width: 26em; }
.rh-nojs ul { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 15px; }
@container rh (min-width: 1200px) { .rh-nojs ul { grid-template-columns: 1fr; } }
@container rh (min-width: 820px) {
  .rh-f-room, .rh-js .rh-f-room { grid-template-areas: "l l t t t t" "l l t t t t" "l l b b b b" "l l b b b b" "r r r r v w" "r r r r v w"; }
  .rh-rp, .rh-rn { display: block; }
  .rh-rn { padding-inline: 14px; }
  .rh-L, .rh-R, .rh-page:not(.rh-js) .rh-R {
    display: flex; flex-direction: column; position: relative; min-width: 0; min-height: 0; overflow: hidden;
    counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); padding: var(--rh-pad) var(--rh-pad) 34px;
  }
  .rh-L::after, .rh-R::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); color: var(--rh-ink-2); }
  .rh-L > .rh-sub, .rh-R .rh-sub, .rh-R .rh-nojs { counter-increment: none; box-shadow: none; padding: 0; overflow: visible; background: none; }
  .rh-L { gap: 22px; }
  .rh-js .rh-ctl { display: grid; grid-template-columns: .9fr 1fr 1.15fr; column-gap: 20px; }
  .rh-we, .rh-wt { box-shadow: inset 1px 0 0 var(--rh-seam) !important; padding-left: 16px !important; }
  .rh-wt .rh-tnote { display: none; }
}
@container rh (min-width: 1200px) {
  .rh-f-room, .rh-js .rh-f-room { grid-template-areas: "l l t t t t r r" "l l t t t t r r" "l l b b b b r r" "l l b b b b r r"; }
  .rh-rp, .rh-rn { display: none; }
  .rh-js .rh-ctl { display: flex; flex-direction: column; gap: 10px; }
  .rh-we, .rh-wt { box-shadow: inset 0 1px 0 var(--rh-seam) !important; padding: 10px 0 0 !important; }
  .rh-z { gap: 8px; }
  .rh-wt .rh-tnote { display: block; }
}

.rh-sentence { font: 500 1.375rem/1.36 var(--rh-head); text-wrap: balance; }
.rh-ln { display: inline; }
@container rh (min-width: 820px) { .rh-ln { display: block; } .rh-sentence { font-size: clamp(1.375rem, calc(var(--rh-c) * .155), 1.875rem); } }
.rh-nw { white-space: nowrap; }
.rh-w { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; letter-spacing: inherit; }
button.rh-w { display: inline-grid; text-align: left; text-decoration: underline 1.5px var(--rh-bw); text-underline-offset: 6px; text-decoration-skip-ink: none; }
button.rh-w:hover { text-decoration-thickness: 2.5px; }
button.rh-w > span { grid-area: 1 / 1; transition: opacity .6s var(--rh-ease); white-space: nowrap; }
button.rh-w > span + span { opacity: 0; }
.rh-x { transition: opacity .6s var(--rh-ease); }
.rh-x.is-out { opacity: 0; }
.rh-price { font-size: 17px; line-height: 1.4; }
.rh-price strong { font-variant-numeric: tabular-nums; }
.rh-real { margin-top: 4px; font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--rh-ink-2); max-width: 30em; }
.rh-act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.rh-page .rh-btn {
  display: block; min-height: 42px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--rh-bw); color: var(--rh-washi); font: 500 15px/1.3 var(--rh-text); letter-spacing: .01em; padding: 10px 18px;
  transition: background-color .3s var(--rh-ease);
}
.rh-page .rh-btn:hover { background: #452B18; }
.rh-status { font-size: 13px; line-height: 1.45; color: var(--rh-ink-2); transition: opacity .6s var(--rh-ease); }
.rh-status:empty { display: none; }

.rh-page fieldset { border: 0; min-width: 0; margin: 0; }
.rh-page legend, .rh-size label { font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.rh-page legend { padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.rh-radios { clear: both; display: grid; }
.rh-radios input, .rh-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rh-radios label { display: flex; align-items: center; gap: 8px; min-height: clamp(26px, calc(var(--rh-c) * .19), 36px); padding: 0 4px 0 2px; font-size: 14px; line-height: 1.2; cursor: pointer; transition: color .3s var(--rh-ease), background-color .3s var(--rh-ease); }
.rh-radios label::before, .rh-opts label::before {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rh-ink);
  transition: box-shadow .3s var(--rh-ease), background-color .3s var(--rh-ease);
}
.rh-radios label:hover, .rh-opts label:hover { background: var(--rh-bw-wash); }
.rh-radios input:checked + label, .rh-opts input:checked + label { color: var(--rh-bw); }
.rh-radios input:checked + label::before, .rh-opts input:checked + label::before { box-shadow: inset 0 0 0 1px var(--rh-bw), inset 0 0 0 3.5px var(--rh-washi); background: var(--rh-bw); }
.rh-radios input:focus-visible + label, .rh-opts input:focus-visible + label { outline: 2px solid var(--rh-bw); outline-offset: 0; }
.rh-sw { flex: none; width: 12px; height: 12px; }
.rh-sw-oak { background: #CDB083; } .rh-sw-blackwood { background: #82562F; } .rh-sw-spotted { background: #A67E58; } .rh-sw-redgum { background: #7A3D29; }
.rh-tnote { font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--rh-ink-2); margin-top: 6px; }
.rh-edge-sm { flex: none; }
.rh-sec-fill { fill: url(#rh-hatch); }
.rh-sec-line, .rh-grain { fill: none; stroke: var(--rh-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rh-grain { stroke-width: .75; stroke: var(--rh-ink-2); }
.rh-radios input:checked + label .rh-sec-line { stroke: var(--rh-bw); }
.rh-z { display: flex; flex-direction: column; gap: 12px; }
.rh-size-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rh-num { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; color: var(--rh-ink-2); }
.rh-page input[type="number"] {
  width: 5em; font: 500 15px/1.3 var(--rh-text); font-variant-numeric: tabular-nums; color: var(--rh-ink); text-align: right;
  background: var(--rh-field); border: 1px solid var(--rh-seam); border-radius: 0; padding: 3px 5px; -moz-appearance: textfield;
}
.rh-page input[type="number"]::-webkit-inner-spin-button { opacity: .5; }
.rh-page input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 4px 0 0; cursor: pointer; background: none;
  background: linear-gradient(var(--rh-bw), var(--rh-bw)) 0 50% / var(--rh-fill, 33.3%) 2px no-repeat, linear-gradient(var(--rh-seam), var(--rh-seam)) 0 50% / 100% 1px no-repeat;
}
.rh-page input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 8px; border-radius: 1px; background: var(--rh-bw); border: 0; }
.rh-page input[type="range"]::-moz-range-thumb { width: 16px; height: 8px; border-radius: 1px; background: var(--rh-bw); border: 0; }
@media (max-height: 600px) and (max-width: 699px) { .rh-L > .rh-sub, .rh-R .rh-sub { padding-block: 12px; } }
/* small mats (one row tall) sit a little higher, so three lines fit above the folio */
.rh-sm { padding-top: 14px; padding-bottom: 30px; }
/* phones: the room's left and right mats dissolve into their parts (display: contents), so both wrappers' folios would
   land on the floor's corner, one over the other, on the price mat. The price mat carries its own; the wrappers still count. */
@container rh (max-width: 819.98px) {
  .rh-page .rh-L::after, .rh-js .rh-R::after { content: none; }
  .rh-L > .rh-L2::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); letter-spacing: .02em; color: var(--rh-ink-2); pointer-events: none; }
  /* the price mat is one row tall: the button stands at its foot, to the right, and the folio keeps its corner */
  .rh-L > .rh-L2 { display: flex; flex-direction: column; padding-bottom: 12px; }
  .rh-L2 .rh-price { line-height: 1.3; }
  .rh-L2 .rh-real { line-height: 1.4; letter-spacing: .01em; }
  .rh-L2 .rh-act { margin-top: auto; padding-top: 8px; justify-content: flex-end; }
  /* once the table is added, the confirmation takes the note's place */
  .rh-L2 .rh-status { order: -1; flex-basis: 100%; }
  .rh-L2:has(.rh-status:not(:empty)) .rh-real { display: none; }
}
/* the narrowest phones: the price and the button only */
@container rh (max-width: 359.98px) {
  .rh-L2 .rh-real { display: none; }
  .rh-L2 .rh-btn { padding-inline: 12px; }
}

/* ── 3. at the bench ── */
.rh-f-bench { grid-template-areas: "p p" "e e" "e e" "e e" "e e"; }
.rh-bp { grid-area: p; }
.rh-bp img { object-position: 40% 62%; }
.rh-be { grid-area: e; display: flex; flex-direction: column; padding-bottom: 9px; }
/* the caption sits on the folio's line, just to its right */
.rh-be .rh-foot { margin-top: auto; padding: 12px 0 0 22px; }
.rh-bg { grid-area: g; display: flex; align-items: flex-end; }
.rh-bc { grid-area: c; }
.rh-bg, .rh-bc { display: none; }
.rh-pull { font-weight: 400; font-size: 20px; line-height: 1.4; max-width: 21em; text-wrap: balance; }
@container rh (min-width: 820px) { .rh-pull { font-size: clamp(19px, calc(var(--rh-c) * .145), 26px); } }
.rh-pull-in { font-weight: 300; margin-bottom: 18px; }
@container rh (min-width: 820px) {
  .rh-f-bench { grid-template-areas: "p p g g g g" "p p g g g g" "p p e e e e" "p p e e e e"; }
  .rh-bp img { object-position: 50% 50%; }
  .rh-bg { display: flex; }
  .rh-be { padding-top: 18px; }
  .rh-pull-in { display: none; }
}
@container rh (min-width: 1200px) {
  .rh-f-bench { grid-template-areas: "p p e e g g g g" "p p e e g g g g" "p p e e c c c c" "p p e e c c c c"; }
  .rh-bc { display: block; }
}

/* ── 4. four timbers ── */
.rh-f-timbers { grid-template-areas: "i a" "i a" "o1 o1" "o2 o2" "b1 b1" "b2 b2" "s1 s1" "s2 s2" "r1 r1" "r2 r2"; }
.rh-ti { grid-area: i; }
.rh-tall { grid-area: a; }
.rh-tall img { object-position: 50% 50%; }
.rh-l-oak { grid-area: o1; } .rh-l-blackwood { grid-area: b1; } .rh-l-spotted { grid-area: s1; } .rh-l-redgum { grid-area: r1; }
.rh-leaf { display: contents; scroll-margin-top: calc(var(--bar-h, 42px) + 56px); }
.rh-leaf > .rh-sub { position: relative; min-width: 0; min-height: 0; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); }
/* on a phone each leaf is two mats: its board, with the name set on a washi strip at the board's foot,
   and its notes */
.rh-l-oak .rh-lw, .rh-l-oak .rh-leaf-h { grid-area: o1; } .rh-l-oak .rh-notes { grid-area: o2; }
.rh-l-blackwood .rh-lw, .rh-l-blackwood .rh-leaf-h { grid-area: b1; } .rh-l-blackwood .rh-notes { grid-area: b2; }
.rh-l-spotted .rh-lw, .rh-l-spotted .rh-leaf-h { grid-area: s1; } .rh-l-spotted .rh-notes { grid-area: s2; }
.rh-l-redgum .rh-lw, .rh-l-redgum .rh-leaf-h { grid-area: r1; } .rh-l-redgum .rh-notes { grid-area: r2; }
.rh-leaf > .rh-lw .rh-bwin { position: absolute; inset: 1px 0 0 1px; }
.rh-leaf > .rh-lt { display: contents; counter-increment: none; }
.rh-leaf-h { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; z-index: 3; align-self: end; justify-self: stretch; margin: 0 0 0 1px; padding: 6px 12px 7px; background: var(--rh-washi); box-shadow: inset 0 1px 0 var(--rh-seam); }
.rh-leaf-h h3 { font-size: 19px; }
.rh-notes { display: grid; align-content: start; gap: 2px; position: relative; min-width: 0; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); background: var(--rh-washi); padding: 12px var(--rh-pad) 30px; }
.rh-notes::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); color: var(--rh-ink-2); }
.rh-notes div { display: block; font-size: 14px; line-height: 1.45; }
@container rh (min-width: 820px) { .rh-notes div { font-size: clamp(13.5px, calc(var(--rh-c) * .086), 15px); } }
.rh-notes dt { display: inline; font-size: 13px; font-weight: 500; letter-spacing: .02em; margin-right: .4em; }
.rh-notes dd { display: inline; font-weight: 300; margin: 0; }
.rh-page .rh-tbtn { font: 500 13px/1.45 var(--rh-text); letter-spacing: .02em; color: var(--rh-ink); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline 1px var(--rh-ink); text-underline-offset: 4px; transition: color .3s var(--rh-ease), text-decoration-color .3s var(--rh-ease); }
.rh-page .rh-tbtn:hover, .rh-page .rh-tbtn:focus-visible { color: var(--rh-bw); text-decoration: underline 2px var(--rh-bw); }
@container rh (min-width: 820px) {
  .rh-f-timbers { grid-template-areas: "i i o o o o" "i i o o o o" "i i b b b b" "i i b b b b" "s s s s a a" "s s s s a a" "r r r r a a" "r r r r a a"; }
  .rh-l-oak { grid-area: o; } .rh-l-blackwood { grid-area: b; } .rh-l-spotted { grid-area: s; } .rh-l-redgum { grid-area: r; }
  .rh-leaf {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "w n" "h n"; column-gap: clamp(16px, 2cqi, 28px); align-content: start;
    position: relative; min-width: 0; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); padding: var(--rh-pad) var(--rh-pad) 34px;
  }
  .rh-leaf::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); color: var(--rh-ink-2); }
  .rh-leaf > .rh-sub { counter-increment: none; box-shadow: none; overflow: visible; }
  .rh-leaf > .rh-lw { grid-area: w; aspect-ratio: 2 / 1; }
  .rh-leaf > .rh-lw .rh-bwin { inset: 0; }
  .rh-leaf .rh-leaf-h { grid-area: h; flex-direction: column; align-items: flex-start; align-self: start; margin: 10px 0 0; padding: 0; background: none; box-shadow: none; }
  .rh-leaf-h h3 { font-size: clamp(1.25rem, 1.157rem + .381cqi, 1.5rem); }
  .rh-leaf .rh-notes { grid-area: n; margin-top: 0; gap: 8px; counter-increment: none; box-shadow: none; background: none; padding: 0; overflow: visible; }
  .rh-notes::after { display: none; }
  .rh-notes dt { display: block; margin: 0; }
  .rh-notes dd { display: block; }
}
@container rh (min-width: 1200px) {
  .rh-f-timbers { grid-template-areas: "i i o o o o a a" "i i o o o o a a" "i i b b b b a a" "i i b b b b a a" "s s s s r r r r" "s s s s r r r r"; }
}

/* ── 5. how a board is cut ── */
.rh-f-cut { grid-template-areas: "f q" "f q" "a a" "c c" "e e" "k k" "d d"; }
.rh-cf { grid-area: f; } .rh-cq { grid-area: q; } .rh-ca { grid-area: a; } .rh-cc { grid-area: c; } .rh-cd { grid-area: d; } .rh-ce { grid-area: e; } .rh-ck { grid-area: k; }
.rh-fig { display: flex; flex-direction: column; gap: 10px; }
.rh-log { display: block; width: 100%; max-width: 240px; height: auto; flex: none; }
.rh-fig figcaption { font-size: 13px; line-height: 1.45; }
.rh-ca, .rh-cd, .rh-ck { font-size: 14px; line-height: 1.5; }
.rh-ring { fill: none; stroke: var(--rh-ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.rh-bark { opacity: 1; }
.rh-pith { fill: var(--rh-ink); }
.rh-board { fill: var(--rh-field); stroke: var(--rh-bw); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rh-board-g { stroke: var(--rh-ink-2); stroke-width: 1; stroke-dasharray: 3 2; }
.rh-bn { font: 500 11px/1 var(--rh-text); fill: var(--rh-ink); }
.rh-slab { fill: none; stroke: var(--rh-ink-2); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.rh-split { fill: none; stroke: var(--rh-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.rh-cut { width: 100%; max-width: 420px; border-collapse: collapse; font-size: 13px; line-height: 1.45; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rh-cut caption { text-align: left; font-weight: 500; padding-bottom: 4px; }
.rh-cut th, .rh-cut td { height: 20px; padding: 0; box-shadow: inset 0 1px 0 var(--rh-seam); font-weight: 400; text-align: left; white-space: nowrap; }
.rh-cut td { text-align: right; }
.rh-cut td:nth-child(2) { font-weight: 500; padding-right: 12px; }
.rh-cutnote { font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--rh-ink-2); margin-top: 8px; display: none; }
/* the end of your top, close: the boards' rings, a glue line at the centre. 32 mm is the mat's height. */
.rh-ce { container-type: size; }
.rh-eg { position: absolute; inset: 1px 0 0 1px; overflow: hidden; background: var(--rh-early); }
.rh-eg-in { position: absolute; inset: -8px 0; display: flex; justify-content: center; filter: url(#rh-wob); transform: translateX(var(--rh-shift, 0px)); }
.rh-eg-b {
  --rh-r: 5.625; --rh-pp: -70% 45%; --rh-rp: calc(var(--rh-ring, 2.4) * 100cqh / 32);
  flex: none; height: 100%; width: calc(var(--rh-r) * 100cqh);
  background: repeating-radial-gradient(circle at var(--rh-pp), var(--rh-early) 0, var(--rh-early) calc(var(--rh-rp) * .47), var(--rh-late) calc(var(--rh-rp) * .75), var(--rh-early) var(--rh-rp));
  box-shadow: inset -1px 0 0 rgba(26, 24, 21, .45);
  transition: --rh-early .6s var(--rh-ease), --rh-late .6s var(--rh-ease);
}
.rh-eg-b:nth-child(even) { --rh-pp: 165% 55%; }
@container rh (min-width: 820px) {
  .rh-f-cut { grid-template-areas: "f f f f a d" "f f f f a d" "e e q q q q" "k k q q q q" "c c c c c c" "c c c c c c" "c c c c c c"; }
  .rh-fig { flex-direction: row; align-items: center; gap: clamp(16px, 2.4cqi, 32px); }
  .rh-log { width: auto; height: 100%; max-height: 240px; aspect-ratio: 1; }
  .rh-fig figcaption { font-size: 14px; max-width: 16em; }
  .rh-cutnote { display: block; }
  .rh-ck { padding-top: 14px; padding-bottom: 30px; }
  .rh-ca, .rh-cd { padding-inline: 14px; font-size: 13px; line-height: 1.45; }
}
@container rh (min-width: 1200px) {
  .rh-f-cut { grid-template-areas: "f f f f q q q q" "f f f f q q q q" "a c c c c d e e" "a c c c c d k k"; }
}
@container rh (max-width: 819px) { .rh-fig figcaption { font-size: 13px; } .rh-cc, .rh-ck { padding-top: 14px; padding-bottom: 30px; } }

/* ── 6. four edges ── */
.rh-f-edges { grid-template-areas: "a b" "a b" "y y" "c d" "c d"; }
.rh-p1 { grid-area: a; } .rh-p2 { grid-area: b; } .rh-p3 { grid-area: c; } .rh-p4 { grid-area: d; }
.rh-ey { grid-area: y; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.rh-ev { grid-area: v; display: none; }
.rh-prof { display: flex; flex-direction: column; padding-inline: 14px; }
.rh-edge-lg { display: block; width: min(100%, 134px, calc(var(--rh-c) * .62)); height: auto; margin: 4px 0 14px; }
.rh-prof h3 { font-size: clamp(17px, calc(var(--rh-c) * .135), 24px); }
.rh-prof p { font-size: 13px; line-height: 1.45; margin-top: 4px; }
.rh-yours { display: block; width: min(100%, 461px); height: auto; }
.rh-ey-t { font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--rh-ink-2); }
@container rh (min-width: 820px) {
  .rh-f-edges { grid-template-areas: "a b c d y y" "a b c d v v"; }
  .rh-ev { display: block; }
  .rh-yours { display: none; }
  .rh-ey { justify-content: flex-start; padding-top: 14px; padding-bottom: 30px; }
}
@container rh (min-width: 1200px) {
  .rh-f-edges { grid-template-areas: "a b c d y y y y" "a b c d y y y y"; }
  .rh-ev { display: none; }
  .rh-yours { display: block; }
  .rh-ey { justify-content: flex-end; padding-bottom: 40px; }
}

/* ── 7. benches and cabinets ── */
.rh-f-pieces { grid-template-areas: "b b" "m m" "c n" "c n" "t t"; }
.rh-pc { grid-area: c; } .rh-pb { grid-area: b; } .rh-pr { grid-area: r; } .rh-pm { grid-area: m; } .rh-pn { grid-area: n; } .rh-ps { grid-area: s; } .rh-pt { grid-area: t; }
.rh-pr, .rh-ps { display: none; }
.rh-pc img { object-position: 50% 70%; }
.rh-pb img { object-position: 50% 64%; }
.rh-pm, .rh-pn { font-size: 13px; line-height: 1.45; }
.rh-pt .rh-body { line-height: 1.55; }
@container rh (max-width: 819px) { .rh-pm, .rh-pt { padding-top: 14px; padding-bottom: 30px; } .rh-pt .rh-body + .rh-body { margin-top: .4em; } }
@container rh (min-width: 820px) {
  .rh-f-pieces { grid-template-areas: "c c b b b b" "c c b b b b" "c c m m t t" "c c n n t t" "s s s s t t" "s s s s t t"; }
  .rh-ps { display: block; }
  .rh-pm, .rh-pn { padding-top: 14px; padding-bottom: 30px; }
}
@container rh (min-width: 1200px) {
  .rh-f-pieces { grid-template-areas: "c c b b b b t t" "c c b b b b t t" "c c r m m s t t" "c c r n n s t t"; }
  .rh-pr { display: block; }
}

/* ── 8. the boards wait ── */
.rh-f-drying { grid-template-areas: "s s" "k k" "d1 d1" "d2 d2" "r r"; }
.rh-ds { grid-area: s; }
.rh-ds img { object-position: 50% 58%; }
.rh-dt { display: contents; }
.rh-d1 { grid-area: d1; } .rh-d2 { grid-area: d2; }
.rh-dt > .rh-sub { position: relative; min-width: 0; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); padding: 14px var(--rh-pad) 30px; max-width: none; margin: 0; }
.rh-dt > .rh-sub::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); color: var(--rh-ink-2); }
.rh-dk { grid-area: k; } .rh-dr { grid-area: r; } .rh-dv { grid-area: v; display: none; }
.rh-dk, .rh-dr { font-size: 13px; line-height: 1.45; padding-top: 14px; padding-bottom: 30px; }
@container rh (min-width: 820px) {
  .rh-f-drying { grid-template-areas: "s s s s s s" "s s s s s s" "s s s s s s" "t t t t k k" "t t t t r r"; }
  .rh-dt { display: block; grid-area: t; position: relative; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); padding: var(--rh-pad) var(--rh-pad) 34px; }
  .rh-dt::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); color: var(--rh-ink-2); }
  .rh-dt > .rh-sub { counter-increment: none; box-shadow: none; padding: 0; overflow: visible; background: none; max-width: 34em; }
  .rh-dt > .rh-sub::after { display: none; }
  .rh-dt > .rh-sub + .rh-sub { margin-top: .7em; }
}
@container rh (min-width: 1200px) {
  .rh-f-drying { grid-template-areas: "s s s s s s t t" "s s s s s s t t" "s s s s s s t t" "k k r r v v t t"; }
  .rh-dv { display: block; }
}

/* ── 9. living with it ── */
.rh-f-care { grid-template-areas: "k k" "m m" "m m" "m m" "m m" "s s" "h l" "h l" "o o"; }
.rh-ck2 { grid-area: k; } .rh-cm { grid-area: m; } .rh-cv2 { grid-area: v; display: none; }
.rh-cs { grid-area: s; } .rh-ch { grid-area: h; } .rh-cl { grid-area: l; } .rh-co { grid-area: o; }
.rh-f-care dt { font-size: 13px; font-weight: 500; letter-spacing: .02em; margin-bottom: 4px; }
.rh-f-care dd { margin: 0; font-size: 14px; line-height: 1.45; }
.rh-cs, .rh-co { padding-top: 14px; padding-bottom: 30px; }
.rh-ch, .rh-cl { padding-inline: 14px; }
.rh-ck2 dd { font-weight: 300; font-size: clamp(17px, calc(var(--rh-c) * .12), 22px); line-height: 1.45; max-width: 24em; }
.rh-ck2 { display: flex; flex-direction: column; justify-content: flex-end; }
.rh-cm dd { font-size: inherit; }
.rh-join { display: block; width: min(100%, 300px); height: auto; margin: 10px 0 14px; }
.rh-jh { fill: url(#rh-hatch); stroke: var(--rh-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.rh-jb2 { fill: var(--rh-field); stroke: var(--rh-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.rh-jl { fill: none; stroke: var(--rh-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.rh-jd { stroke-dasharray: 3 3; stroke-width: 1; }
.rh-jb { stroke-dasharray: 2 3; }
.rh-live { font-size: 14px; line-height: 1.5; margin-top: 12px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--rh-seam); }
@container rh (min-width: 820px) {
  .rh-f-care { grid-template-areas: "k k k k m m" "k k k k m m" "s s h l m m" "o o h l m m"; }
}
@container rh (min-width: 1200px) {
  .rh-f-care { grid-template-areas: "k k k k m m v v" "k k k k m m v v" "s s h l m m v v" "o o h l m m v v"; }
  .rh-cv2 { display: block; }
}

/* ── 10. how a table comes to be ── */
.rh-f-order { grid-template-areas: "a a" "b b" "c c" "d d" "e e" "n n" "w w"; }
.rh-stages { display: contents; }
.rh-s1 { grid-area: a; } .rh-s2 { grid-area: b; } .rh-s3 { grid-area: c; } .rh-s4 { grid-area: d; } .rh-s5 { grid-area: e; }
.rh-ov { grid-area: v; display: none; } .rh-on { grid-area: n; } .rh-ow { grid-area: w; display: flex; align-items: flex-end; }
.rh-st { display: flex; align-items: baseline; gap: 18px; }
.rh-stn { font: 500 34px/1 var(--rh-head); min-width: .7em; }
.rh-st p { font-size: 15px; line-height: 1.5; max-width: 20em; }
.rh-on { font-size: 14px; line-height: 1.5; }
.rh-ow { font-size: 15px; font-weight: 500; }
@container rh (min-width: 820px) {
  .rh-f-order { grid-template-areas: "a b c d e n" "a b c d e n"; }
  .rh-ow { display: none; }
  .rh-st { flex-direction: column; gap: 14px; padding-inline: 14px; }
  .rh-st p { font-size: 14px; }
  .rh-on { padding-inline: 14px; font-size: 13px; line-height: 1.45; }
}
@container rh (min-width: 1200px) {
  .rh-f-order { grid-template-areas: "a b c d e v n n" "a b c d e v w w"; }
  .rh-ov, .rh-ow { display: flex; }
  .rh-ov { display: block; }
  .rh-on, .rh-ow { padding: 14px var(--rh-pad) 30px; }
}

/* ── 11. write to the bench, then the colophon ── */
.rh-f-write { grid-template-areas: "fa fa" "fa fa" "fa fa" "fa fa" "f3 f3" "f3 f3" "f3 f3" "f3 f3" "d d" "a a" "c c" "z z"; }
.rh-form { display: contents; }
.rh-fA { grid-area: fa; display: flex; flex-direction: column; gap: 14px; }
.rh-f3 { grid-area: f3; display: flex; flex-direction: column; gap: 14px; }
.rh-form > .rh-sub { position: relative; min-width: 0; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); padding: var(--rh-pad) var(--rh-pad) 34px; }
.rh-form > .rh-sub::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); color: var(--rh-ink-2); }
.rh-f1, .rh-f2 { display: flex; flex-direction: column; gap: 12px; }
.rh-side { grid-area: d; display: flex; flex-direction: column; gap: 10px; }
.rh-side p { font-size: 14px; line-height: 1.5; max-width: 28em; }
.rh-apart { color: var(--rh-ink-2); }
.rh-mark2 { grid-area: a; font: 500 20px/1 var(--rh-head); letter-spacing: .02em; }
.rh-colo { grid-area: c; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; letter-spacing: .02em; padding-top: 14px; padding-bottom: 30px; }
.rh-last { grid-area: z; font-size: 13px; letter-spacing: .02em; }
.rh-last::after { font: 500 30px/1 var(--rh-text) !important; left: var(--rh-pad) !important; bottom: 14px !important; font-variant-numeric: tabular-nums; }
.rh-fld label, .rh-fset legend { display: block; font-size: 13px; font-weight: 500; letter-spacing: .02em; margin-bottom: 4px; }
.rh-opt { font-weight: 400; color: var(--rh-ink-2); }
.rh-page .rh-fld input, .rh-page .rh-fld textarea {
  display: block; width: 100%; font: 400 15px/1.4 var(--rh-text); color: var(--rh-ink); background: var(--rh-field);
  border: 1px solid var(--rh-seam); border-radius: 0; padding: 7px 9px; transition: border-color .3s var(--rh-ease);
}
.rh-page .rh-fld textarea { resize: none; min-height: 4.6em; }
.rh-page .rh-fld :is(input, textarea):hover { border-color: rgba(26, 24, 21, .5); }
.rh-hintf { display: block; font-size: 13px; line-height: 1.45; color: var(--rh-ink-2); margin-top: 3px; }
.rh-opts { display: flex; flex-wrap: wrap; gap: 0 16px; clear: both; }
.rh-opts span { position: relative; }
.rh-opts label { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 14px; cursor: pointer; padding-right: 4px; transition: color .3s var(--rh-ease), background-color .3s var(--rh-ease); }
.rh-ftable { padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--rh-seam); background: var(--rh-field); }
.rh-ftable h3 { font: 500 15px/1.4 var(--rh-text); letter-spacing: .01em; margin-bottom: 2px; }
.rh-ftable h3:focus { outline: none; }
.rh-ftable h3:focus-visible { outline: 2px solid var(--rh-bw); }
.rh-ft-empty, .rh-ft-t { font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--rh-ink-2); }
.rh-ft-s { font-size: 14px; line-height: 1.45; }
.rh-ft-t { font-variant-numeric: tabular-nums; margin-top: 2px; }
.rh-ft-full .rh-tbtn { margin-top: 2px; }
.rh-fl { display: flex; flex-direction: column; flex: 1; }
.rh-fl textarea { flex: 1; }
.rh-nothing { font-size: 13px; color: var(--rh-ink-2); }
.rh-send { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.rh-fstatus { opacity: 0; }
.rh-fstatus.is-on { opacity: 1; }
@container rh (min-width: 820px) {
  .rh-f-write { grid-template-areas: "f f f f d d" "f f f f d d" "f f f f d d" "f f f f d d" "f f f f a a" "f f f f c1 c1" "f f f f c2 c2" "f f f f z z"; }
  .rh-form { grid-area: f; display: flex; flex-direction: column; gap: 14px; }
  .rh-form > .rh-fA, .rh-form > .rh-f3 { grid-area: auto; }
  .rh-form > .rh-sub { counter-increment: none; box-shadow: none; padding: 0; overflow: visible; background: none; }
  .rh-form > .rh-sub::after { display: none; }
  .rh-fA { gap: 12px; }
  .rh-colo { display: contents; }
  .rh-c1 { grid-area: c1; } .rh-c2 { grid-area: c2; }
  .rh-colo > .rh-sub { position: relative; min-width: 0; overflow: hidden; counter-increment: rh-mat; box-shadow: inset 1px 1px 0 var(--rh-seam); padding: 14px var(--rh-pad) 30px; }
  .rh-colo > .rh-sub::after { content: counter(rh-mat); content: counter(rh-mat) / ""; position: absolute; left: 12px; bottom: 11px; font: 400 13px/1 var(--rh-text); color: var(--rh-ink); }
  .rh-mark2, .rh-last { padding-top: 14px; }
}
@container rh (min-width: 1200px) {
  .rh-f-write { grid-template-areas: "f f f f f f d d" "f f f f f f d d" "f f f f f f d d" "a a c c z z d d"; }
  .rh-form { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: clamp(20px, 2.4cqi, 36px); align-items: stretch; }
  .rh-fA { display: contents; }
  .rh-colo { display: flex; }
  .rh-colo > .rh-sub { counter-increment: none; box-shadow: none; padding: 0; overflow: visible; }
  .rh-colo > .rh-sub::after { display: none; }
}

/* ── motion: the first floor is laid once at load; later floors are laid as they come into view.
   Before the script runs everything is visible, and under reduced motion nothing fades. ── */
.rh-load .rh-f-top > * > *, .rh-load .rh-links { animation: rh-fade .6s var(--rh-ease) both; animation-delay: calc(150ms + var(--rh-i, 0) * 80ms); }
.rh-load .rh-hp > picture { animation-delay: 0ms; }
.rh-lay .rh-floor > .rh-mat > *, .rh-lay .rh-floor > :not(.rh-mat) .rh-sub > *, .rh-lay .rh-floor .rh-leaf > * { opacity: 0; }
.rh-lay .rh-floor::after, .rh-lay .rh-floor > * { --rh-seam-o: 0; }
.rh-lay.rh-in .rh-floor > .rh-mat > *, .rh-lay.rh-in .rh-floor > :not(.rh-mat) .rh-sub > *, .rh-lay.rh-in .rh-floor .rh-leaf > * { opacity: 1; transform: none; transition: opacity .6s var(--rh-ease), transform .6s var(--rh-ease); transition-delay: calc(120ms + var(--rh-i, 0) * 80ms); }
.rh-lay .rh-floor > .rh-mat:not(.rh-pl) > * { transform: translateY(6px); }
@keyframes rh-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rh-page *, .rh-page *::before, .rh-page *::after { transition: none !important; animation: none !important; }
  .rh-read { transform: scaleX(0) !important; }
}