/* Ricasso: a grinder-scratched steel bench seen from straight above, everything squared to the grid. */
@font-face { font-family: "Montagu Slab"; src: url("/assets/fonts/specimen/montagu-slab-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url("/assets/fonts/specimen/spline-sans-mono-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

body.spec-ricasso { margin: 0; background: #23272B; }
.spec-ricasso {
  --rc-bench: #23272B; --rc-board: #23272B; --rc-joint: #15181B; --rc-lip: #363C43; --rc-grain: #2E3338;
  --rc-ink: #ECE6DC; --rc-temper: #86A8E6; --rc-temper-d: #6F92D3; --rc-straw: #D6AE68;
  --rc-steel: #8E949A; --rc-steel-d: #5E6368; --rc-card: #E6DFD2; --rc-card-edge: #C9C0B0;
  --rc-slab: "Montagu Slab", "Roboto Slab", Rockwell, serif;
  --rc-mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;
  --rc-m: clamp(16px, 4.5vw, 72px);
  --rc-gut: 24px;
  --rc-mm: clamp(2px, calc(100vw / 400), 3.6px);
  --rc-ease: cubic-bezier(.2, .7, .2, 1);
  --rc-grain-img: url("/assets/work/ricasso/ground-sm.webp");
}
.rc-site { background: var(--rc-bench); color: var(--rc-ink); font-family: var(--rc-slab); font-optical-sizing: auto; font-weight: 380; font-size: clamp(1.03rem, .98rem + .2vw, 1.1rem); line-height: 1.62; -webkit-font-smoothing: antialiased; }
.rc-site *, .rc-site *::before, .rc-site *::after { box-sizing: border-box; }
.rc-site h1, .rc-site h2, .rc-site h3, .rc-site p, .rc-site ol, .rc-site ul, .rc-site figure { margin: 0; }
.rc-site ol, .rc-site ul { padding: 0; list-style: none; }
.rc-site img { display: block; max-width: 100%; height: auto; }
.rc-site a { color: inherit; }
.rc-site :focus-visible { outline: 2px solid var(--rc-temper); outline-offset: 3px; }
.rc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rc-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rc-board { background-color: var(--rc-board); background-image: var(--rc-grain-img); background-size: 1200px 600px; box-shadow: inset 0 1px 0 var(--rc-joint), inset 0 2px 0 var(--rc-lip); }

/* ── type ─────────────────────────────────────────────────────────── */
.rc-cap, .rc-mono, .rc-spec, .rc-hint { font-family: var(--rc-mono); }
.rc-cap { font-size: .6875rem; font-weight: 560; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: var(--rc-steel); }
.rc-mono { font-size: .8125rem; font-weight: 420; line-height: 1.5; color: var(--rc-steel); }
.rc-site h2 { font-weight: 280; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.rc-tag-h { display: block; font-family: var(--rc-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }

/* ── buttons ──────────────────────────────────────────────────────── */
.rc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; background: var(--rc-temper); color: var(--rc-bench); font-family: var(--rc-mono); font-weight: 600; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; transition: background-color .18s var(--rc-ease), box-shadow .18s var(--rc-ease); }
.rc-site .rc-btn { color: var(--rc-bench); }
.rc-btn:hover { background: color-mix(in srgb, var(--rc-temper) 88%, var(--rc-ink)); box-shadow: inset 0 0 0 1px var(--rc-ink); }
.rc-btn:active { background: var(--rc-temper-d); }
.rc-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0; background: none; border: 0; color: inherit; font: inherit; font-family: var(--rc-mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rc-steel); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.rc-link:hover { text-decoration-color: var(--rc-temper); }
.rc-link[hidden] { display: none; }

/* ── nav: a board strip under the slim bar ───────────────────────── */
.rc-nav { position: sticky; top: var(--bar-h, 40px); z-index: 60; height: 56px; box-shadow: inset 0 -1px 0 var(--rc-joint), 0 1px 0 var(--rc-lip); }
.rc-nav-in { height: 56px; display: flex; align-items: center; gap: 28px; padding: 0 var(--rc-m); max-width: 1744px; margin: 0 auto; }
.rc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--rc-ink); min-height: 44px; }
.rc-brand-mark { width: 40px; height: 28px; color: var(--rc-ink); flex: none; }
.rc-brand-name { font-family: var(--rc-mono); font-weight: 600; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; }
.rc-links { display: flex; gap: 26px; margin-left: auto !important; }
.rc-links a, .rc-menu-list a { font-family: var(--rc-mono); font-size: .75rem; font-weight: 480; letter-spacing: .06em; text-decoration: none; color: var(--rc-ink); padding: 14px 0; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color .18s; }
.rc-links a:hover, .rc-menu-list a:hover { text-decoration-color: var(--rc-temper); }
.rc-nav-cta { min-height: 40px; padding: 0 16px; }
.rc-menu { display: none; position: relative; margin-left: auto; }
.rc-menu summary { list-style: none; cursor: pointer; font-family: var(--rc-mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.rc-menu summary::-webkit-details-marker { display: none; }
.rc-menu summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.rc-menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rc-menu-list { position: absolute; right: -8px; top: calc(100% + 6px); min-width: 200px; background: var(--rc-board); border: 1px solid var(--rc-steel-d); padding: 8px 18px; box-shadow: 0 10px 18px rgb(0 0 0 / .45); }
.rc-menu-list a { display: block; padding: 12px 0; }
@media (max-width: 759px) {
  .rc-links { display: none; }
  .rc-menu { display: block; }
  .rc-nav-in { gap: 14px; }
}
@media (max-width: 374px) {
  .rc-brand-name { letter-spacing: .1em; font-size: .6875rem; }
  .rc-brand { gap: 6px; }
  .rc-nav-in { gap: 8px; padding: 0 12px; }
  .rc-menu summary { gap: 5px; font-size: .6875rem; letter-spacing: .06em; }
  .rc-nav-cta { padding: 0 8px; font-size: .625rem; letter-spacing: .04em; }
  .rc-brand-mark { width: 30px; height: 21px; }
  .rc-stage .rc-spec { bottom: 60px; }
}

/* ── hero: the knife across the bench ────────────────────────────── */
.rc-hero { position: relative; box-shadow: none; }
.rc-stage {
  position: relative; overflow: hidden; container-type: size;
  height: max(520px, calc(100svh - var(--bar-h, 40px) - 56px));
  /* the poster's frame (2048 × 1152), covering the stage */
  --fw: max(100cqw, 177.7778cqh); --fh: calc(var(--fw) * .5625);
  --fl: calc((100cqw - var(--fw)) / 2); --ft: calc((100cqh - var(--fh)) / 2);
  --pinx: calc(var(--fl) + var(--fw) * .1812); --piny: calc(var(--ft) + var(--fh) * .409);
  --spine-y: calc(var(--ft) + var(--fh) * .331); --heel-y: calc(var(--ft) + var(--fh) * .639);
  --h1fs: clamp(2rem, min(1.1rem + 5.2vw, 10.4svh), 6.5rem);
  --tag-top: calc(var(--heel-y) + clamp(28px, 5svh, 44px));
  --hole: 36px;
  --tag-left: max(var(--rc-m), calc(var(--pinx) - var(--hole)));
}
.rc-knife { position: absolute; inset: 0; background: #1D2024; }
.rc-poster img { position: absolute; left: var(--fl); top: var(--ft); width: var(--fw); height: var(--fh); max-width: none; object-fit: cover; }
.rc-knife canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s var(--rc-ease); cursor: grab; touch-action: pan-y; outline-offset: -6px; }
.rc-knife canvas:active { cursor: grabbing; }
.rc-live canvas { opacity: 1; }
.rc-live .rc-dstamp { opacity: 0; }
.rc-dstamp { position: absolute; left: calc(var(--fl) + var(--fw) * .3242); top: calc(var(--ft) + var(--fh) * .5138); width: 0; height: 0; pointer-events: none; transition: opacity .7s; }
.rc-dstamp span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font-family: var(--rc-mono); font-weight: 700; text-transform: uppercase; font-size: clamp(6px, calc(var(--fw) * .0052), 11px); letter-spacing: .22em; color: rgb(40 44 50 / .62); border: 1px solid rgb(40 44 50 / .5); border-radius: 50%; padding: .5em 1.3em; text-shadow: 0 1px 0 rgb(255 255 255 / .18); }

.rc-over { position: absolute; inset: 0; pointer-events: none; }
.rc-over > * { pointer-events: auto; }
.rc-hero-cap { position: absolute; top: 20px; right: var(--rc-m); }
.rc-h1-box { position: absolute; left: var(--rc-m); right: var(--rc-m); top: 0; height: max(calc(var(--spine-y) - 24px), calc(var(--h1fs) * 2.2)); display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.rc-h1 { font-weight: 220; font-variation-settings: "opsz" 144; font-size: var(--h1fs); line-height: .98; letter-spacing: -.015em; text-shadow: 0 2px 18px rgb(13 15 18 / .55); }
.rc-br-m { display: none; }

/* the hero tag, tied to the rear handle pin */
.rc-htag { position: absolute; left: var(--tag-left); top: var(--tag-top); width: min(344px, calc(100cqw - 2 * var(--rc-m))); --pdx: 0px; --pdy: 0px; }
.rc-string { position: absolute; background: var(--rc-temper); pointer-events: none; }
.rc-string-v { width: 1.25px; left: calc(var(--hole) - .625px); top: calc(var(--piny) + var(--pdy) - var(--tag-top)); height: calc(var(--tag-top) - var(--piny) - var(--pdy) + 18px); }
.rc-string-h { height: 1.25px; top: calc(var(--piny) + var(--pdy) - var(--tag-top) - .625px); left: min(var(--hole), calc(var(--pinx) + var(--pdx) - var(--tag-left))); width: max(calc(var(--pinx) + var(--pdx) - var(--tag-left) - var(--hole)), calc(var(--tag-left) + var(--hole) - var(--pinx) - var(--pdx))); }
.rc-knot { position: absolute; left: calc(var(--pinx) + var(--pdx) - var(--tag-left) - 6px); top: calc(var(--piny) + var(--pdy) - var(--tag-top) - 6px); width: 12px; height: 12px; border: 1.25px solid var(--rc-temper); border-radius: 50%; pointer-events: none; }
.rc-card { position: relative; color: var(--rc-bench); background: linear-gradient(225deg, transparent 8.5px, var(--rc-card) 9px) right top / 51% 100% no-repeat, linear-gradient(135deg, transparent 8.5px, var(--rc-card) 9px) left top / 51% 100% no-repeat; }
.rc-hole { position: absolute; left: calc(var(--hole) - 5px); top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--rc-bench); box-shadow: 0 0 0 1px var(--rc-card-edge); }
.rc-htag-card { padding: 34px 22px 12px; transform-origin: var(--hole) 18px; rotate: var(--rc-swing, 0deg); filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); }
.rc-htag-line { font-family: var(--rc-mono); font-size: .8125rem; font-weight: 420; line-height: 1.5; }
.rc-htag-drag { display: none; }
.rc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 14px; }
.rc-htag .rc-link { color: var(--rc-bench); text-decoration-color: var(--rc-steel-d); }
.rc-htag .rc-link:hover { text-decoration-color: var(--rc-temper-d); }

.rc-lede { font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); font-weight: 330; line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.rc-lede-in { position: absolute; top: calc(var(--tag-top) + 6px); left: calc(var(--rc-m) + (100cqw - 2 * var(--rc-m) + var(--rc-gut)) * 5 / 12); width: calc((100cqw - 2 * var(--rc-m) + var(--rc-gut)) * 5 / 12 - var(--rc-gut)); max-width: 36ch; text-shadow: 0 1px 12px rgb(13 15 18 / .6); }
.rc-lede-out { display: none; padding: 40px var(--rc-m) 8px; }
.rc-spec, .rc-hint { position: absolute; bottom: 18px; font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); line-height: 1.4; }
.rc-spec { left: max(calc(var(--rc-m) + (100cqw - 2 * var(--rc-m) + var(--rc-gut)) * 5 / 12), calc(var(--rc-m) + 153 * var(--rc-mm) + 28px)); }
.rc-spec sup { font-size: .75em; line-height: 0; vertical-align: .5em; }
.rc-spec-short { display: none; }
.rc-hint { right: var(--rc-m); }
.rc-rule { display: block; width: calc(153 * var(--rc-mm)); height: calc(13 * var(--rc-mm)); overflow: visible; }
.rc-rule-ticks { stroke: var(--rc-temper); stroke-width: 1px; fill: none; }
.rc-rule-fig { font-family: var(--rc-mono); font-weight: 700; font-size: 2.6px; letter-spacing: .1px; fill: var(--rc-steel); text-anchor: middle; }
.rc-hero-rule { position: absolute; left: var(--rc-m); bottom: 16px; }
.rc-hero .rc-spec, .rc-hero .rc-hint, .rc-hero-cap { text-shadow: 0 1px 6px rgb(13 15 18 / .9); }

/* short desktop screens: the lede opens the next board */
@media (min-aspect-ratio: 1/1) and (max-height: 779px) {
  .rc-lede-in, .rc-hero-rule { display: none; }
  .rc-stage { --tag-top: calc(var(--heel-y) + 24px); }
  .rc-htag-card { padding: 30px 20px 6px; }
  .rc-actions { margin-top: 8px; }
  .rc-lede-out { display: block; }
  .rc-spec-long { display: none; }
}
/* laptop screens: the lede's column runs long and would reach the spec line
   (the script measures every other size and sets .rc-lede-low where it would) */
@media (min-aspect-ratio: 1/1) and (max-width: 1399px) and (max-height: 909px), (min-aspect-ratio: 1/1) and (max-width: 1199px) and (max-height: 989px) {
  .rc-lede-in { display: none; }
  .rc-lede-out { display: block; }
}
.rc-hero.rc-lede-low .rc-lede-in { display: none; }
.rc-hero.rc-lede-low .rc-lede-out { display: block; }
.rc-hero.rc-rule-off .rc-hero-rule { display: none; }
@media (min-aspect-ratio: 1/1) and (max-width: 1599px) {
  .rc-spec-long { display: none; }
}
@media (max-width: 1279px) {
  .rc-hint-keys { display: none; }
}

/* portrait: the knife turns 90° clockwise and runs down the right */
@media (max-aspect-ratio: 1/1) {
  .rc-stage {
    --rc-vert: 1;
    height: max(420px, calc(100svh - var(--bar-h, 40px) - 56px));
    --fw: 123.4cqw; --fh: max(100cqh, calc(var(--fw) * 1.77778));
    --fl: calc(17.5cqw - 14px); --ft: 0px;
    --pinx: calc(var(--fl) + var(--fw) * .591); --piny: calc(var(--ft) + var(--fh) * .1812);
    --edge-x: calc(var(--fl) + var(--fw) * .361);
    --col-w: calc(var(--edge-x) - 16px - 14px);
    --h1fs: clamp(1.5rem, min(9.4cqw, calc(var(--col-w) / 5.7)), 4.6rem);
    --tag-top: calc(20px + var(--h1fs) * 3.92 + 30px);
    --tag-w: min(var(--col-w), 360px);
    --hole: calc(var(--tag-w) - 18px);
    --tag-left: 16px;
  }
  .rc-poster img { width: var(--fh); height: var(--fw); left: calc(var(--fl) + var(--fw) / 2 - var(--fh) / 2); top: calc(var(--ft) + var(--fh) / 2 - var(--fw) / 2); rotate: 90deg; -webkit-mask-image: linear-gradient(to top, transparent, #000 9%); mask-image: linear-gradient(to top, transparent, #000 9%); }
  .rc-dstamp { left: calc(var(--fl) + var(--fw) * .4862); top: calc(var(--ft) + var(--fh) * .3242); }
  .rc-dstamp span { transform: translate(-50%, -50%); font-size: clamp(6px, calc(var(--fh) * .0052), 11px); }
  .rc-h1-box { left: 16px; right: auto; width: var(--col-w); top: 20px; height: auto; display: block; }
  .rc-h1 { max-width: none; }
  .rc-br-d { display: none; }
  .rc-br-m { display: inline; }
  .rc-hero-cap { display: none; }
  .rc-htag { width: var(--tag-w); }
  .rc-htag-card { padding: 34px 14px 6px; }
  .rc-lede-in { display: none; }
  .rc-lede-out { display: block; padding-top: 36px; }
  .rc-spec { left: 16px; width: var(--col-w); bottom: 44px; }
  .rc-spec-long { display: none; }
  .rc-hint { left: 16px; right: auto; bottom: 18px; width: var(--col-w); }
  .rc-hero-rule { display: none; }
}
@media (max-aspect-ratio: 1/1) and (min-width: 600px) and (min-height: 960px) {
  .rc-lede-in { display: block; left: 16px; top: auto; bottom: 120px; width: var(--col-w); max-width: 30ch; }
  .rc-lede-out { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .rc-actions { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 10px; }
  .rc-actions .rc-btn { width: 100%; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 520px) {
  .rc-spec-mid { display: none; }
  .rc-spec-short { display: inline; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 600px) {
  .rc-stage { --tag-top: calc(20px + var(--h1fs) * 3.92 + 22px); --h1fs: 2rem; }
  .rc-htag-line, .rc-spec, .rc-etch { display: none; }
  .rc-htag-card { padding: 30px 12px 4px; }
  .rc-htag-drag { display: block; position: absolute; left: 14px; top: 11px; font-family: var(--rc-mono); font-size: .5625rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
  .rc-actions { margin-top: 0; }
  .rc-hint { display: none; }
}

/* ── sections: each one a board of the same bench ────────────────── */
.rc-sec { position: relative; padding: clamp(96px, 13vh, 168px) 0 calc(clamp(80px, 12vh, 160px) + 48px); }
.rc-sec > .rc-cap { position: absolute; top: 28px; left: var(--rc-m); }
.rc-sec > .rc-rule { position: absolute; left: var(--rc-m); bottom: 24px; }
.rc-wrap { max-width: 1600px; margin: 0 auto; padding: 0 var(--rc-m); }
.rc-head { display: grid; gap: 20px; align-content: start; }
.rc-head p { max-width: 62ch; }
.rc-note { font-family: var(--rc-mono); font-size: .8125rem; color: var(--rc-temper); }
.rc-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--rc-gut); align-items: start; }
.rc-split > :first-child { grid-column: 1 / span 5; }
.rc-split > :last-child { grid-column: 7 / -1; }
.rc-split-head { align-items: end; }
.rc-split-head > :first-child { grid-column: 1 / span 6; }
.rc-split-head > :last-child { grid-column: 8 / span 5; }
.rc-lede-2 { font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); font-weight: 330; line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.rc-split-photo > :first-child { grid-column: 1 / span 7; }
.rc-split-photo > :last-child { grid-column: 9 / -1; }
.rc-flip > :first-child { grid-column: 1 / span 4; }
.rc-flip > :last-child { grid-column: 6 / -1; }
.rc-photo { position: relative; }
.rc-photo img { width: 100%; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); }
.rc-mono { font-family: var(--rc-mono); }
.rc-seam { font-size: .6875rem; color: var(--rc-steel); }

/* tags: small cards with a punched hole */
.rc-tags { display: grid; gap: 16px; }
.rc-tags .rc-card { padding: 30px 18px 16px; font-family: var(--rc-mono); font-size: .8125rem; font-weight: 420; line-height: 1.5; max-width: 360px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); transform-origin: 50% 15px; }
.rc-tags .rc-card::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 10px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--rc-bench); box-shadow: 0 0 0 1px var(--rc-card-edge); }
.rc-woods, .rc-stone-tags { margin-top: 12px; }
.rc-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-card .rc-tag-h { color: #3B3F45; }

/* ── 02 stages: the photo full-bleed, tags tied to their objects ── */
.rc-stages-bench { position: relative; margin-top: 56px; container-type: inline-size; }
.rc-stages-photo { position: relative; margin: 0; overflow: hidden; }
.rc-stages-photo img { width: 100%; }
.rc-stamps li { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--b) * 100% + 10px); translate: -50% 0; font-family: var(--rc-mono); font-size: .5625rem; font-weight: 700; letter-spacing: .22em; color: var(--rc-ink); opacity: .72; padding: 3px 4px 3px 6px; border: 1px solid rgb(236 230 220 / .4); border-radius: 50%; }
.rc-stage-tags { padding: 0 var(--rc-m); margin: 32px auto 0; max-width: 1600px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1181px) {
  .rc-stamps { display: none; }
  .rc-stage-tags { position: relative; display: block; height: 178px; max-width: none; margin: 30px 0 0; padding: 0; }
  .rc-stage-tags li { position: absolute; top: 0; left: calc(var(--x) * 100cqw); width: min(188px, 13.2cqw); translate: -50% 0; }
  .rc-stage-tags li::after { content: ""; position: absolute; left: 50%; bottom: calc(100% - 15px); width: 1.25px; margin-left: -.625px; height: calc((1 - var(--b)) * 56.25cqw + 30px + 15px); background: var(--rc-temper); }
}

/* the softbox pass (scroll-driven) and the set-down */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rc-stages { timeline-scope: --rc-pass; }
    .rc-stages-photo { view-timeline: --rc-pass block; }
    .rc-stages-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 38%, rgb(226 236 255 / .5) 47%, rgb(234 242 255 / .62) 50%, rgb(226 236 255 / .5) 53%, transparent 62%) 100% 0 / 300% 100% no-repeat; mix-blend-mode: soft-light; animation: rc-pass linear both; animation-timeline: --rc-pass; animation-range: cover 12% cover 88%; }
    .rc-stage-tags li { animation: rc-lit linear both; animation-timeline: --rc-pass; animation-range: cover calc(12% + 76% * var(--p) - 6%) cover calc(12% + 76% * var(--p) + 6%); }
    .rc-photo img, .rc-macro-box, .rc-job-wrap, .rc-coupons .rc-pc { animation: rc-set linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
  }
}
@keyframes rc-pass { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes rc-lit { 0%, 100% { filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)) brightness(1); } 50% { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)) brightness(1.08); } }
@keyframes rc-set { from { scale: 1.012; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .45)); } to { scale: 1; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); } }
@keyframes rc-swing { 0% { rotate: 2.5deg; } 30% { rotate: -1.3deg; } 55% { rotate: .6deg; } 78% { rotate: -.2deg; } 100% { rotate: 0deg; } }
@media (prefers-reduced-motion: no-preference) {
  .rc-in .rc-woods .rc-card, .rc-in .rc-care .rc-card, .rc-in .rc-stone-tags .rc-card { animation: rc-swing .7s var(--rc-ease) both; }
  .rc-in .rc-tags .rc-card:nth-child(2) { animation-delay: 60ms; }
  .rc-in .rc-tags .rc-card:nth-child(3) { animation-delay: 120ms; }
  .rc-in .rc-tags .rc-card:nth-child(4) { animation-delay: 180ms; }
  .rc-in .rc-tags .rc-card:nth-child(5) { animation-delay: 240ms; }
}

/* ── 03 the pattern bench ─────────────────────────────────────── */
.rc-bl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--rc-gut); align-items: start; }
.rc-bl-text { grid-column: 1 / span 6; display: grid; gap: 18px; align-content: start; }
.rc-bl-text p:not([class]) { max-width: 52ch; }
.rc-bl-view { grid-column: 7 / -1; display: grid; gap: 28px; position: sticky; top: calc(var(--bar-h, 40px) + 80px); }
.rc-num { display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; }
.rc-site .rc-num { margin: 12px 0 0; padding-top: 22px; }
.rc-num-n { font-weight: 100; font-variation-settings: "opsz" 144; font-size: clamp(6rem, 2rem + 8vw, 11rem); line-height: .82; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rc-num-l { font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-bl-live { display: grid; gap: 28px; }
.rc-site:not(.rc-js) .rc-bl-live { display: none; }
.rc-bl-view > noscript { display: block; }
.rc-macro-fig, .rc-diag-fig { margin: 0; }
.rc-macro-box { position: relative; aspect-ratio: 16 / 5; overflow: hidden; container-type: inline-size; background: #1D2024; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); }
.rc-macro-box canvas, .rc-diag-fig canvas { display: block; width: 100%; height: 100%; }
.rc-macro-box canvas { position: absolute; inset: 0; }
.rc-macro-crop { position: absolute; left: 50%; top: 50%; width: 31.25cqw; height: 100cqw; translate: -50% -50%; rotate: 90deg; overflow: hidden; }
.rc-site .rc-macro-crop img, .rc-site .rc-pc img { position: absolute; left: -104.9%; top: -26.67%; width: 749.3%; max-width: none; height: auto; }
.rc-site .rc-pc img { top: -195.1%; filter: brightness(calc(1 - var(--i) * .075)) contrast(calc(1 - var(--i) * .03)); }
[data-crop="1"] .rc-macro-crop img, [data-crop="1"] .rc-pc img { left: -248.8%; }
[data-crop="2"] .rc-macro-crop img, [data-crop="2"] .rc-pc img { left: -392.7%; }
[data-crop="3"] .rc-macro-crop img, [data-crop="3"] .rc-pc img { left: -539%; }
.rc-diag-fig canvas { aspect-ratio: 4 / 1; }
.rc-figcap { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-coupons-nojs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rc-coupon { margin: 0; }
.rc-coupon-img { position: relative; display: block; aspect-ratio: 205 / 655; overflow: hidden; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); }
.rc-site .rc-coupon-img img { position: absolute; left: 0; top: 0; width: 749.27%; max-width: none; height: auto; translate: -14% -17.09%; }
.rc-coupon:nth-child(2) .rc-coupon-img img { translate: -33.2% -17.09%; }
.rc-coupon:nth-child(3) .rc-coupon-img img { translate: -52.41% -17.09%; }
.rc-coupon:nth-child(4) .rc-coupon-img img { translate: -71.94% -17.09%; }
.rc-coupon figcaption { margin-top: 10px; font-family: var(--rc-mono); font-size: .625rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }

.rc-tray { margin-top: 28px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--rc-joint), inset 0 2px 0 var(--rc-lip); display: grid; gap: 32px; }
.rc-tray[hidden] { display: none; }
.rc-rail { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-step { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; background: transparent; color: var(--rc-ink); border: 1px solid var(--rc-steel-d); border-radius: 0; font-family: var(--rc-mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .18s, background-color .18s, color .18s; }
.rc-step-n { font-size: .5625rem; font-weight: 700; letter-spacing: .22em; color: var(--rc-steel); }
.rc-step:hover { border-color: var(--rc-temper); }
.rc-step[aria-pressed="true"] { background: var(--rc-temper); border-color: var(--rc-temper); color: var(--rc-bench); }
.rc-step[aria-pressed="true"] .rc-step-n { color: var(--rc-bench); }
.rc-ctls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.rc-ctl { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--rc-steel-d); min-width: 0; }
.rc-ctl[hidden] { display: none; }
.rc-ctl-l { font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-ink); padding: 0; }
.rc-ctl-v { font-family: var(--rc-mono); font-size: .8125rem; font-weight: 500; color: var(--rc-ink); font-variant-numeric: tabular-nums; text-align: right; }
.rc-ctl-h { grid-column: 1 / -1; font-family: var(--rc-mono); font-size: .6875rem; color: var(--rc-steel); line-height: 1.45; }
.rc-ctl-h sup { font-size: .75em; line-height: 0; vertical-align: .5em; }
.rc-ctl .rc-range, .rc-ctl .rc-seg-in, .rc-ctl .rc-switch { grid-column: 1 / -1; }
.rc-ctl-folds .rc-stepper { display: flex; align-items: center; gap: 2px; }
.rc-ctl-folds .rc-ctl-v { min-width: 2ch; text-align: center; font-size: 1rem; }
.rc-sq { width: 40px; height: 40px; background: transparent; border: 1px solid var(--rc-steel-d); color: var(--rc-ink); font: 500 1.1rem/1 var(--rc-mono); cursor: pointer; }
.rc-sq:hover { border-color: var(--rc-temper); }
.rc-sq:disabled { opacity: .4; cursor: default; border-color: var(--rc-steel-d); }
.rc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.rc-range::-webkit-slider-runnable-track { height: 1px; background: var(--rc-steel); }
.rc-range::-moz-range-track { height: 1px; background: var(--rc-steel); }
.rc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; margin-top: -11px; background: var(--rc-temper); border: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--rc-board); }
.rc-range::-moz-range-thumb { width: 16px; height: 22px; background: var(--rc-temper); border: 0; border-radius: 0; }
.rc-range:focus-visible { outline-offset: 0; }
.rc-seg { min-inline-size: 0; }
.rc-seg legend { float: left; }
.rc-seg-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.rc-seg-in label, .rc-chip { position: relative; display: inline-flex; }
.rc-seg-in input, .rc-chip input, .rc-shape input, .rc-opt input, .rc-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-seg-in span, .rc-chip span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--rc-steel-d); font-family: var(--rc-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rc-seg-in input:checked + span, .rc-chip input:checked + span { background: var(--rc-temper); border-color: var(--rc-temper); color: var(--rc-bench); }
.rc-seg-in input:focus-visible + span, .rc-chip input:focus-visible + span, .rc-shape input:focus-visible ~ span, .rc-opt input:focus-visible + span, .rc-check input:focus-visible + span { outline: 2px solid var(--rc-temper); outline-offset: 3px; }
.rc-switch { display: flex; align-items: center; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; background: transparent; border: 1px solid var(--rc-steel-d); color: var(--rc-ink); font-family: var(--rc-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rc-switch::before { content: ""; width: 26px; height: 12px; margin-right: 12px; border: 1px solid var(--rc-steel); background: linear-gradient(90deg, var(--rc-steel) 0 10px, transparent 10px); }
.rc-switch[aria-checked="true"] { border-color: var(--rc-temper); }
.rc-switch[aria-checked="true"]::before { border-color: var(--rc-temper); background: linear-gradient(90deg, transparent 0 14px, var(--rc-temper) 14px); }
.rc-tray-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-top: 16px; border-top: 1px solid var(--rc-steel-d); }
.rc-recipe { font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-recipe .rc-hot { color: var(--rc-temper); }
.rc-bl-line { margin-top: 24px; max-width: 62ch; font-size: .8125rem; color: var(--rc-steel); }
.rc-billet .rc-seam { margin-top: 6px; }

/* ── 04 parts of a knife: tags anchored to their points ───────── */
.rc-anat { position: relative; margin-top: 24px; padding: 176px 0 172px; container-type: inline-size;
  --dw: min(100cqw, calc(388 * var(--rc-mm)));
  --dh: calc(var(--dw) * 58 / 388);
  --tw: clamp(124px, 12cqw, 176px); }
.rc-draw { position: relative; width: var(--dw); aspect-ratio: 388 / 58; margin: 0 auto; }
.rc-anat-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rc-dr * { fill: none; stroke: var(--rc-steel); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.rc-dr .rc-dr-blade { fill: rgb(142 148 154 / .12); stroke: var(--rc-ink); }
.rc-dr .rc-dr-hdl { fill: rgb(13 15 18 / .35); }
.rc-dr .rc-dr-bev { stroke: var(--rc-steel); stroke-dasharray: 1 0; opacity: .8; }
.rc-dr .rc-dr-tang { stroke-dasharray: 4 3; }
.rc-dr .rc-dr-pin { fill: var(--rc-steel); stroke: none; }
.rc-p { fill: transparent; stroke: transparent; stroke-width: 1.25px; vector-effect: non-scaling-stroke; transition: fill .2s, stroke .2s; }
.rc-anat-svg .rc-dr { transition: opacity .2s; }
.rc-pt { position: absolute; left: calc(var(--xf) * 100%); top: calc(var(--yf) * 100%); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--rc-temper); box-shadow: 0 0 0 2px var(--rc-board); }
.rc-pt-tang { anchor-name: --rc-tang; } .rc-pt-bolster { anchor-name: --rc-bolster; } .rc-pt-ricasso { anchor-name: --rc-ricasso; }
.rc-pt-spine { anchor-name: --rc-spine; } .rc-pt-tip { anchor-name: --rc-tip; } .rc-pt-choil { anchor-name: --rc-choil; }
.rc-pt-heel { anchor-name: --rc-heel; } .rc-pt-edge { anchor-name: --rc-edge; } .rc-pt-belly { anchor-name: --rc-belly; }
#rc-t-tang { --a: --rc-tang; } #rc-t-bolster { --a: --rc-bolster; } #rc-t-ricasso { --a: --rc-ricasso; }
#rc-t-spine { --a: --rc-spine; } #rc-t-tip { --a: --rc-tip; } #rc-t-choil { --a: --rc-choil; }
#rc-t-heel { --a: --rc-heel; } #rc-t-edge { --a: --rc-edge; } #rc-t-belly { --a: --rc-belly; }
.rc-tag { position: absolute; position-anchor: var(--a); width: var(--tw); display: block; padding: 10px 12px 11px; text-align: left; color: var(--rc-bench); font-family: var(--rc-mono); border: 0; cursor: pointer; background: linear-gradient(225deg, transparent 6.5px, var(--rc-card) 7px) right top / 51% 100% no-repeat, linear-gradient(135deg, transparent 6.5px, var(--rc-card) 7px) left top / 51% 100% no-repeat; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); }
.rc-tag-n { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rc-tag-d { display: block; max-height: 0; overflow: hidden; font-size: .75rem; font-weight: 420; line-height: 1.45; transition: max-height .25s var(--rc-ease), margin .25s var(--rc-ease); }
.rc-tag:is(:hover, :focus-visible, [aria-pressed="true"]) { z-index: 2; width: max(var(--tw), 232px); }
.rc-tag:is(:hover, :focus-visible, [aria-pressed="true"]) .rc-tag-d { max-height: 12em; margin-top: 6px; }
.rc-tag[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--rc-temper-d); }
.rc-tag::before { content: ""; position: absolute; width: 1.25px; background: var(--rc-temper); }
.rc-up { position-area: top center; margin-bottom: calc(24px + var(--k) * var(--dh)); }
.rc-up.rc-sl { position-area: top span-left; }
.rc-up.rc-sr { position-area: top span-right; }
.rc-dn { position-area: bottom center; margin-top: calc(24px + (1 - var(--k)) * var(--dh)); }
.rc-dn.rc-sl { position-area: bottom span-left; }
.rc-dn.rc-sr { position-area: bottom span-right; }
.rc-up::before { top: 100%; height: calc(24px + var(--k) * var(--dh)); }
.rc-dn::before { bottom: 100%; height: calc(24px + (1 - var(--k)) * var(--dh)); }
.rc-sc::before { left: calc(50% - .625px); }
.rc-sl::before { right: 2.4px; }
.rc-sr::before { left: 2.4px; }
.rc-sl { text-align: right; }
.rc-lead { display: none; }
.rc-anat-note { display: none; }
.rc-parts { display: none; }
/* lighting the part: CSS first */
.rc-anat:has(.rc-tag:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-dr { opacity: .4; }
.rc-anat:has(#rc-t-tip:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-tip,
.rc-anat:has(#rc-t-belly:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-belly,
.rc-anat:has(#rc-t-edge:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-edge,
.rc-anat:has(#rc-t-spine:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-spine,
.rc-anat:has(#rc-t-heel:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-heel,
.rc-anat:has(#rc-t-choil:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-choil,
.rc-anat:has(#rc-t-ricasso:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-ricasso,
.rc-anat:has(#rc-t-bolster:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-bolster,
.rc-anat:has(#rc-t-tang:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-p-tang { fill: rgb(134 168 230 / .35); stroke: var(--rc-ink); }
@supports not (anchor-name: --a) {
  .rc-tag { display: none; }
  .rc-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; margin-top: 40px; font-family: var(--rc-mono); font-size: .8125rem; line-height: 1.5; counter-reset: part; }
  .rc-parts li { counter-increment: part; border-top: 1px solid var(--rc-steel-d); padding-top: 12px; }
  .rc-parts .rc-tag-h::before { content: counter(part) " "; color: var(--rc-temper); }
  .rc-anat { padding: 40px 0; }
  .rc-pt::after { content: attr(data-n); position: absolute; left: 8px; top: -16px; font-family: var(--rc-mono); font-size: .6875rem; font-weight: 700; color: var(--rc-ink); }
}

/* ── 05 timber ────────────────────────────────────────────────── */
.rc-woods { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
.rc-woods-l { grid-column: 1 / -1; float: left; width: 100%; padding: 0 0 4px; font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-woods .rc-card { cursor: pointer; padding-bottom: 38px; transition: transform .18s var(--rc-ease); }
.rc-woods .rc-card:hover { transform: translateY(-2px); }
.rc-on { position: absolute; left: 18px; bottom: 13px; font-size: .5625rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rc-bench); opacity: 0; transition: opacity .18s; }
.rc-on::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--rc-temper-d); vertical-align: -1px; }
.rc-woods .rc-card:has(input:checked) { background: linear-gradient(225deg, transparent 8.5px, #F1ECE3 9px) right top / 51% 100% no-repeat, linear-gradient(135deg, transparent 8.5px, #F1ECE3 9px) left top / 51% 100% no-repeat; }
.rc-woods .rc-card:has(input:checked) .rc-on { opacity: 1; }
.rc-woods .rc-card:has(input:checked)::after { content: ""; position: absolute; inset: 0; border-bottom: 3px solid var(--rc-temper-d); pointer-events: none; }
.rc-woods .rc-card:has(input:focus-visible) { outline: 2px solid var(--rc-temper); outline-offset: 4px; }

/* ── 06 care: the coupons ─────────────────────────────────────── */
.rc-care-cap { margin-bottom: 14px; }
.rc-site .rc-coupons-fig { margin: 80px 0 0; }
.rc-coupons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.rc-pc { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #3A3F45; }
.rc-pc canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc-pc-l { display: block; margin-top: 10px; font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-ink); }
.rc-coupons-fig .rc-seam { margin-top: 18px; max-width: 70ch; }

/* ── 08 shed ──────────────────────────────────────────────────── */
.rc-split-shed > :first-child { grid-column: 1 / span 5; }
.rc-split-shed > :last-child { grid-column: 7 / span 5; align-self: center; }
.rc-photo-tall img { max-height: 86vh; width: auto; }
.rc-spec-list { margin: 20px 0 0; display: grid; font-family: var(--rc-mono); font-size: .75rem; line-height: 1.5; }
.rc-spec-list div { display: grid; grid-template-columns: 13ch 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rc-steel-d); }
.rc-spec-list dt { font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-spec-list dd { margin: 0; }

/* ── 09 the job tag ───────────────────────────────────────────── */
.rc-job-wrap { position: relative; max-width: 1120px; margin: 0 auto; }
.rc-job-string { position: absolute; left: 50%; bottom: calc(100% - 30px); width: 1.25px; margin-left: -.625px; height: calc(clamp(96px, 13vh, 168px) + 30px); background: var(--rc-temper); }
.rc-job { position: relative; background-color: var(--rc-board); background-image: var(--rc-grain-img); background-size: 1200px 600px; clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%, 0 28px); padding: 64px clamp(20px, 5vw, 64px) clamp(32px, 5vw, 56px); }
.rc-job::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--rc-steel-d); clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%, 0 28px); background: linear-gradient(135deg, transparent calc(50% - .7px), var(--rc-steel-d) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) left top / 28px 28px no-repeat, linear-gradient(225deg, transparent calc(50% - .7px), var(--rc-steel-d) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) right top / 28px 28px no-repeat; }
.rc-job > * { position: relative; }
.rc-job-hole { position: absolute; left: 50%; top: 22px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--rc-bench); box-shadow: 0 0 0 1px var(--rc-steel), inset 0 2px 3px rgb(0 0 0 / .6); }
.rc-job-top { display: flex; justify-content: space-between; align-items: start; gap: 24px 48px; padding-bottom: 32px; border-bottom: 1px solid var(--rc-steel-d); }
.rc-job-title { display: grid; gap: 14px; max-width: 46ch; }
.rc-price { display: grid; justify-items: end; gap: 4px; flex: none; text-align: right; }
.rc-price-l { font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-price-v { font-family: var(--rc-mono); font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); font-weight: 500; letter-spacing: -.01em; color: var(--rc-ink); font-variant-numeric: tabular-nums; }
.rc-job-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 56px; padding-top: 32px; }
.rc-job-knife, .rc-job-you { display: grid; gap: 28px; align-content: start; }
.rc-job-knife[hidden] { display: none; }
.rc-f { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: 10px; }
.rc-f legend, .rc-f > label:not([class]), .rc-count label { padding: 0; margin-bottom: 10px; font-family: var(--rc-mono); font-size: .6875rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-f > label:not([class]), .rc-count label { margin-bottom: 0; }
.rc-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-shape { position: relative; display: grid; gap: 8px; padding: 14px 14px 12px; border: 1px solid var(--rc-steel-d); cursor: pointer; }
.rc-shape svg { width: 100%; height: auto; max-height: 34px; fill: var(--rc-steel); }
.rc-shape span, .rc-opt span { font-size: .9375rem; line-height: 1.35; }
.rc-shape em, .rc-opt em { display: block; font-style: normal; font-family: var(--rc-mono); font-size: .6875rem; color: var(--rc-steel); margin-top: 2px; }
.rc-shape:has(input:checked) { border-color: var(--rc-temper); box-shadow: inset 0 0 0 1px var(--rc-temper); }
.rc-shape:has(input:checked) svg { fill: var(--rc-temper); }
.rc-len, .rc-count { grid-template-columns: 1fr auto; align-items: center; }
.rc-len .rc-range, .rc-count .rc-range { grid-column: 1 / -1; }
.rc-len-v { font-family: var(--rc-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.rc-opt { position: relative; display: block; padding: 14px 16px 14px 44px; border: 1px solid var(--rc-steel-d); cursor: pointer; }
.rc-opt::before { content: ""; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--rc-steel); }
.rc-opt:has(input:checked) { border-color: var(--rc-temper); }
.rc-opt:has(input:checked)::before { border-color: var(--rc-temper); background: radial-gradient(circle, var(--rc-temper) 0 4px, transparent 4.5px); }
.rc-opt a { color: var(--rc-ink); text-decoration-color: var(--rc-steel); text-underline-offset: 3px; }
.rc-opt a:hover { text-decoration-color: var(--rc-temper); }
.rc-yours b { font-weight: 500; color: var(--rc-ink); }
.rc-timber-f, .rc-hand { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-timber-f legend, .rc-hand legend { width: 100%; float: left; }
.rc-chip span { padding: 0 16px; }
.rc-site .rc-f input[type="text"], .rc-site .rc-f textarea { width: 100%; min-height: 48px; padding: 10px 0; background: transparent; color: var(--rc-ink); border: 0; border-bottom: 1px solid var(--rc-steel); border-radius: 0; font: 380 1.0625rem/1.5 var(--rc-slab); }
.rc-site .rc-f textarea { padding: 10px 12px; border: 1px solid var(--rc-steel-d); resize: vertical; }
.rc-site .rc-f input[type="text"]:focus-visible, .rc-site .rc-f textarea:focus-visible { outline: 2px solid var(--rc-temper); outline-offset: 2px; }
.rc-check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1rem; }
.rc-check span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 12px; border: 1px solid var(--rc-steel); vertical-align: -3px; }
.rc-check input:checked + span::before { background: var(--rc-temper); border-color: var(--rc-temper); box-shadow: inset 0 0 0 3px var(--rc-board); }
.rc-count { display: grid; gap: 6px; margin-top: 6px; }
.rc-count[hidden] { display: none; }
.rc-send { display: grid; gap: 12px; justify-items: start; padding-top: 8px; }
.rc-status { min-height: 1.5em; font-family: var(--rc-mono); font-size: .8125rem; color: var(--rc-ink); }

.rc-foot { position: relative; padding: 72px var(--rc-m) 64px; display: grid; gap: 8px; justify-items: start; overflow: hidden; }
.rc-foot-name { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-steel); }
.rc-foot-mark { position: absolute; right: var(--rc-m); top: 50%; translate: 0 -50%; width: min(420px, 50vw); height: auto; aspect-ratio: 56 / 38; color: var(--rc-ink); opacity: .06; }

/* ── 1024–1180 ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rc-split > :first-child { grid-column: 1 / span 6; }
  .rc-split > :last-child { grid-column: 7 / -1; }
  .rc-split-head > :first-child { grid-column: 1 / span 7; }
  .rc-split-head > :last-child { grid-column: 8 / -1; }
  .rc-split-photo > :first-child { grid-column: 1 / span 7; }
  .rc-split-photo > :last-child { grid-column: 8 / -1; }
  .rc-flip > :first-child { grid-column: 1 / span 5; }
  .rc-flip > :last-child { grid-column: 6 / -1; }
  .rc-bl-text { grid-column: 1 / span 6; }
  .rc-bl-view { grid-column: 7 / -1; }
  .rc-num-n { font-size: clamp(5rem, 1rem + 10vw, 9rem); }
  .rc-ctls { grid-template-columns: 1fr; }
  .rc-coupons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-care { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .rc-split > :first-child, .rc-split > :last-child, .rc-split-head > :first-child, .rc-split-head > :last-child { grid-column: 1 / -1; }
  .rc-split-head { gap: 20px; }
  .rc-photo-tall img { max-height: none; width: 100%; }
  .rc-job-cols { grid-template-columns: 1fr; }
  .rc-bl { display: flex; flex-direction: column; gap: 0; }
  .rc-bl-text { display: contents; }
  .rc-site .rc-bl-text > * + * { margin-top: 18px; }
  .rc-bl-view { position: static; order: 1; margin-top: 36px; }
  .rc-bl .rc-tray, .rc-bl .rc-bl-line, .rc-bl .rc-seam { order: 2; }
  .rc-ctls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-num { justify-content: flex-start; }
  .rc-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── phones ───────────────────────────────────────────────────── */
@media (max-width: 699px) {
  .rc-site { --rc-gut: 16px; }
  .rc-sec { padding: 88px 0 104px; }
  .rc-sec > .rc-rule { width: calc(100vw - 32px); height: calc((100vw - 32px) * 13 / 153); }
  .rc-stage-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rc-stamps li { top: auto; bottom: 6px; }
  .rc-tags .rc-card { padding: 28px 14px 14px; }
  .rc-woods, .rc-care { grid-template-columns: 1fr; }
  .rc-coupons-nojs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-coupon-img { aspect-ratio: 205 / 400; }
  .rc-macro-box { aspect-ratio: 16 / 7; }
  .rc-macro-crop { width: 43.75cqw; height: 140cqw; }
  .rc-diag-fig canvas { aspect-ratio: 5 / 2; }
  .rc-figcap { flex-direction: column; gap: 2px; }
  .rc-rail { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--rc-m)); padding: 2px var(--rc-m) 6px; scrollbar-width: none; }
  .rc-step { flex: none; scroll-snap-align: start; }
  .rc-ctls { grid-template-columns: 1fr; gap: 20px; }
  .rc-coupons { gap: 10px; }
  .rc-job { padding: 56px 18px 28px; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); }
  .rc-job::after { clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); background-size: 20px 20px; }
  .rc-job-top { flex-direction: column; }
  .rc-price { justify-items: start; text-align: left; }
  .rc-shapes { grid-template-columns: 1fr 1fr; }
  .rc-shape { padding: 12px 10px 10px; }
  .rc-shape span { font-size: .875rem; }

  /* the parts, in slots down a vertical knife */
  .rc-anat { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); grid-template-rows: repeat(10, 48px); column-gap: 14px; padding: 8px 0; margin-top: 32px; }
  .rc-draw { grid-column: 2; grid-row: 1 / -1; width: 72px; height: 480px; aspect-ratio: auto; margin: 0; }
  .rc-anat-svg { position: absolute; left: 50%; top: 50%; width: 480px; height: 71.75px; translate: -50% -50%; rotate: 90deg; }
  .rc-pt { left: calc((1 - var(--yf)) * 100%); top: calc(var(--xf) * 100%); }
  .rc-tag { position: static; position-area: none; margin: 0; width: auto; max-width: 100%; align-self: center; min-height: 44px; display: flex; align-items: center; padding: 8px 12px; }
  .rc-tag::before { display: none; }
  .rc-anat .rc-tag:is(:hover, :focus-visible, [aria-pressed="true"]) { width: auto; }
  .rc-tag-d { display: none; }
  .rc-sl { text-align: left; }
  #rc-t-tang { grid-area: 1 / 3 / span 2; anchor-name: --rc-tag-tang; }
  #rc-t-bolster { grid-area: 3 / 3 / span 2; anchor-name: --rc-tag-bolster; }
  #rc-t-ricasso { grid-area: 5 / 3 / span 2; anchor-name: --rc-tag-ricasso; }
  #rc-t-spine { grid-area: 7 / 3 / span 2; anchor-name: --rc-tag-spine; }
  #rc-t-tip { grid-area: 9 / 3 / span 2; anchor-name: --rc-tag-tip; }
  #rc-t-choil { grid-area: 2 / 1 / span 2; anchor-name: --rc-tag-choil; justify-self: end; }
  #rc-t-heel { grid-area: 4 / 1 / span 2; anchor-name: --rc-tag-heel; justify-self: end; }
  #rc-t-edge { grid-area: 6 / 1 / span 2; anchor-name: --rc-tag-edge; justify-self: end; }
  #rc-t-belly { grid-area: 8 / 1 / span 2; anchor-name: --rc-tag-belly; justify-self: end; }
  #rc-t-tang, #rc-t-bolster, #rc-t-ricasso, #rc-t-spine, #rc-t-tip { justify-self: start; }
  .rc-anat-note { display: block; min-height: 4.5em; margin-top: 20px; font-family: var(--rc-mono); font-size: .8125rem; line-height: 1.5; }
  .rc-anat-note b { display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-temper); }
  @supports (anchor-name: --a) {
    .rc-lead { display: block; position: absolute; pointer-events: none; border: 0 solid var(--rc-temper); }
    .rc-lead-tang, .rc-lead-bolster, .rc-lead-ricasso, .rc-lead-spine, .rc-lead-tip { border-left-width: 1.25px; }
    .rc-lead-choil, .rc-lead-heel, .rc-lead-edge, .rc-lead-belly { border-right-width: 1.25px; }
    .rc-lead-tang { left: anchor(--rc-tang center); right: anchor(--rc-tag-tang left); top: anchor(--rc-tag-tang center); bottom: anchor(--rc-tang center); border-top-width: 1.25px; }
    .rc-lead-bolster { left: anchor(--rc-bolster center); right: anchor(--rc-tag-bolster left); top: anchor(--rc-tag-bolster center); bottom: anchor(--rc-bolster center); border-top-width: 1.25px; }
    .rc-lead-ricasso { left: anchor(--rc-ricasso center); right: anchor(--rc-tag-ricasso left); top: anchor(--rc-ricasso center); bottom: anchor(--rc-tag-ricasso center); border-bottom-width: 1.25px; }
    .rc-lead-spine { left: anchor(--rc-spine center); right: anchor(--rc-tag-spine left); top: anchor(--rc-spine center); bottom: anchor(--rc-tag-spine center); border-bottom-width: 1.25px; }
    .rc-lead-tip { left: anchor(--rc-tip center); right: anchor(--rc-tag-tip left); top: anchor(--rc-tag-tip center); bottom: anchor(--rc-tip center); border-top-width: 1.25px; }
    .rc-lead-choil { right: anchor(--rc-choil center); left: anchor(--rc-tag-choil right); top: anchor(--rc-tag-choil center); bottom: anchor(--rc-choil center); border-top-width: 1.25px; }
    .rc-lead-heel { right: anchor(--rc-heel center); left: anchor(--rc-tag-heel right); top: min(anchor(--rc-tag-heel center), anchor(--rc-heel center)); bottom: min(anchor(--rc-tag-heel center), anchor(--rc-heel center)); border-bottom-width: 1.25px; }
    .rc-lead-edge { right: anchor(--rc-edge center); left: anchor(--rc-tag-edge right); top: anchor(--rc-tag-edge center); bottom: anchor(--rc-edge center); border-top-width: 1.25px; }
    .rc-lead-belly { right: anchor(--rc-belly center); left: anchor(--rc-tag-belly right); top: anchor(--rc-tag-belly center); bottom: anchor(--rc-belly center); border-top-width: 1.25px; }
    .rc-anat:has(#rc-t-heel:is(:hover, :focus-visible, [aria-pressed="true"])) .rc-lead-heel { border-color: var(--rc-temper); }
  }
  .rc-anat:has(.rc-tag[aria-pressed="true"]) .rc-lead { opacity: .45; }
  .rc-anat:has(#rc-t-tang[aria-pressed="true"]) .rc-lead-tang, .rc-anat:has(#rc-t-bolster[aria-pressed="true"]) .rc-lead-bolster,
  .rc-anat:has(#rc-t-ricasso[aria-pressed="true"]) .rc-lead-ricasso, .rc-anat:has(#rc-t-spine[aria-pressed="true"]) .rc-lead-spine,
  .rc-anat:has(#rc-t-tip[aria-pressed="true"]) .rc-lead-tip, .rc-anat:has(#rc-t-choil[aria-pressed="true"]) .rc-lead-choil,
  .rc-anat:has(#rc-t-heel[aria-pressed="true"]) .rc-lead-heel, .rc-anat:has(#rc-t-edge[aria-pressed="true"]) .rc-lead-edge,
  .rc-anat:has(#rc-t-belly[aria-pressed="true"]) .rc-lead-belly { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-knife canvas, .rc-dstamp { transition: none; }
  .rc-htag-card { rotate: 0deg; }
  .rc-tag-d, .rc-p, .rc-anat-svg .rc-dr, .rc-woods .rc-card { transition: none; }
}