/* #process (pass 7b, owner: SECTIONS) · the chapters, the layers, the promise and the sample builder (#finishes).
   Chapters (owner, 2026-10-25): the pass-2 numeral windows (a still of the step seen through its numeral: the photo · a black
   numeral on white, screen · the paper, multiply) on ONE still stage, every device. The runway (.pr-run) is one screen plus the
   pin (--pin); its stage is sticky and one screen tall (svh: no jump when Safari's bars move). While it holds, the figure, the
   photo and the text change 01 → 04 in place: process.js moves .is-on / .is-before / .is-after when the middle of the screen
   enters a block of the runway (.pr-at); CSS plays the swap on a clock: the old figure and text leave in 150 ms, the new ones
   arrive over 250 ms after that (never two figures at once), the photos crossfade in 400 ms; reversing plays it backwards.
   Under html.sda a hairline under the numeral fills with the pin (the only scroll-linked mark; transform only).
   The default is the still list (each step with its own numeral, .pr-num): no script, reduced motion / "stop animations",
   larger text from the accessibility menu, or a screen under 521 px tall. Nothing reads the scroll position.
   Layers: CSS 3D planes that separate once, on a clock, as the figure arrives (every device; motion sweep plan 004).
   (The pass-7 version, one room's story in four pictures: archive/pass7-v9-sections-2026-10-25/.) */

#process { position: relative; z-index: 2; padding: 12svh 0 12svh; }

/* ---------- head (the pass-2 size) ---------- */
#process .pr-head { padding: 0 var(--gut); margin-bottom: 7svh; }
#process .pr-head__h, #process .pr-step__t, #process .pr-promise__h, #process .fin__h, #process .pn {
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
}
#process .pr-head__h { margin: 0; font-size: clamp(50px, 14.6vw, 150px); line-height: .92; color: var(--ink); }
#process .pr-head__l { display: block; }
@media (min-width: 900px) {
  #process .pr-head { margin-bottom: 9svh; }
  #process .pr-head__h { font-size: min(9vw, 150px); }
}

/* ---------- the numeral window (the stage's and the list's) ----------
   Sizes in CSS (nothing shifts when the module loads): "01"-"04" advance .932em in the display face, the figures' ink rises
   .73em above a baseline at .80em of a line-height: 1 box. --nfs is the numeral's size, --nh the window's height. */
#process { --prcol: calc(100vw - 2 * var(--gut)); }
#process .pr-num, #process .pr-pin {
  --nfs: calc(var(--prcol) * 1.04);
  --npad: max(12px, calc(var(--nfs) * .05));
  --nh: calc(var(--npad) + var(--nfs) * .74 + max(12px, calc(var(--nfs) * .04)));
}
#process .pn-win {
  position: relative; display: block; isolation: isolate; overflow: hidden; overflow: clip; contain: paint;
  height: var(--nh, 62vw); background: #8a7868;
}
#process .pn-ph { position: absolute; inset: 0; display: block; }
#process .pn-pic { display: contents; }
#process .pn-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); max-width: none; }
#process .pn-knock { position: absolute; inset: 0; z-index: 1; background: #fff; mix-blend-mode: screen; }
#process .pn {
  position: absolute; top: calc(var(--npad) - var(--nfs) * .07); right: var(--gut); direction: ltr; unicode-bidi: isolate; display: flex;
  color: #000; font-size: var(--nfs, 56vw); line-height: 1;
}
#process .pn .d { display: block; }
#process .pn-paper {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply;
  background: var(--paper) url(../assets/paper.webp) 0 0 / 256px 256px;
}
/* where each still is framed inside its numeral */
#process .pr-step[data-k="1"] .pn-img, #process .pn-ph[data-k="1"] .pn-img { --op: 50% 56%; }
#process .pr-step[data-k="2"] .pn-img, #process .pn-ph[data-k="2"] .pn-img { --op: 50% 62%; }
#process .pr-step[data-k="3"] .pn-img, #process .pn-ph[data-k="3"] .pn-img { --op: 50% 56%; }
#process .pr-step[data-k="4"] .pn-img, #process .pn-ph[data-k="4"] .pn-img { --op: 50% 48%; }

/* ---------- the still list (the default) ---------- */
#process .pr-run { position: relative; }
#process .pr-at, #process .pr-pin { display: none; }
#process .pr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9svh; }
#process .pr-step { position: relative; min-width: 0; }
#process .pr-num { margin-bottom: 22px; }
#process .pr-step__txt { padding: 0 var(--gut); max-width: calc(34ch + 2 * var(--gut)); }
#process .pr-step__t { margin: 0 0 14px; font-size: clamp(44px, 12vw, 72px); line-height: .96; color: var(--ink); }
#process .pr-step__p { margin: 0; font: 400 var(--fs-lead)/1.55 var(--text); color: var(--ink-2); }
/* one note for the section (the stills are illustrations) */
#process .pr-note { margin: 6svh var(--gut) 0; font: 400 var(--fs-xs)/1.5 var(--text); color: var(--ink-3t); }
@media (min-width: 900px) {
  /* each step a row: its numeral window to the right edge, the text beside it */
  #process { --pinw: calc((100vw - 2 * var(--gut) - 5vw) / 1.92); }
  #process .pr-steps { gap: 10svh; }
  #process .pr-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); column-gap: 5vw; align-items: center; padding-inline-end: var(--gut); }
  #process .pr-num { margin: 0; --nfs: min(calc(var(--pinw) * 1.03), 70vh); }
  #process .pr-step__txt { padding: 0; max-width: 32ch; }
  #process .pr-step__t { font-size: min(6.4vw, 108px); }
  #process .pr-note { margin-top: 4svh; }
}

/* ---------- the stage ---------- */
/* the runway: one screen + the pin; step k is on while the middle of the screen is in its block (.pr-at), so step 1 holds
   --t2 into the pin (it was already seen arriving), 2 and 3 hold (--t3 - --t2) and (--t4 - --t3), step 4 the rest of the pin */
@media (min-height: 521px) {
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-run { --t2: 34svh; --t3: 80svh; --t4: 126svh; --pin: 160svh; height: calc(100svh + var(--pin)); view-timeline: --prrun block; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-at { display: block; position: absolute; left: 0; width: 1px; visibility: hidden; pointer-events: none; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-at[data-k="1"] { top: 0; height: calc(50svh + var(--t2)); }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-at[data-k="2"] { top: calc(50svh + var(--t2)); height: calc(var(--t3) - var(--t2)); }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-at[data-k="3"] { top: calc(50svh + var(--t3)); height: calc(var(--t4) - var(--t3)); }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-at[data-k="4"] { top: calc(50svh + var(--t4)); bottom: 0; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip;
    display: flex; flex-direction: column; justify-content: center; padding-top: var(--hdr);
  }
  /* phones: the numeral over the text; the numeral gives way on a short screen so the longest step always fits */
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-pin {
    display: block; position: relative; flex: none; padding-bottom: 20px;
    --nfs: min(calc(var(--prcol) * 1.04), calc((100svh - var(--hdr) - 290px) * 1.2));
  }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-num { display: none; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-steps { display: grid; gap: 0; flex: none; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-step { grid-area: 1 / 1; }

  /* the swap: the figure and the text leave in 150 ms, the new ones arrive over 250 ms after it; the photos crossfade */
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-pin .pn-ph { opacity: 0; transition: opacity 400ms var(--ease-out); }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-pin .pn-ph.is-on { opacity: 1; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pn-fig { display: grid; justify-items: start; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pn-g {
    grid-area: 1 / 1; opacity: 0; transform: translateY(.06em);
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pn-g.is-before { transform: translateY(-.06em); }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pn-g.is-on { opacity: 1; transform: none; transition: opacity 250ms var(--ease-out) 150ms, transform 250ms var(--ease-out) 150ms; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-step {
    opacity: 0; transform: translateY(var(--rise, 12px));
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-step.is-before { transform: translateY(calc(-1 * var(--rise, 12px))); }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-step.is-on { opacity: 1; transform: none; transition: opacity 250ms var(--ease-out) 150ms, transform 250ms var(--ease-out) 150ms; }

  /* the pin's hairline (scroll-driven browsers only): a track and its fill under the numeral, from the start side */
  html.sda:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-pin::before {
    content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 9px; height: 1px; background: rgba(20, 18, 16, .14);
  }
  html.sda:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-prog {
    display: block; position: absolute; left: var(--gut); right: var(--gut); bottom: 8px; height: 3px; background: var(--copper);
    transform: scaleX(0); transform-origin: 100% 50%;
    animation: prProg linear both; animation-timeline: --prrun; animation-range: contain 0% contain 100%;
  }
}
#process .pr-prog { display: none; }
@keyframes prProg { to { transform: scaleX(1); } }

@media (min-width: 900px) and (min-height: 521px) {
  /* desktops: the numeral to the right edge, the text beside it, both in the middle of the screen */
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); column-gap: 5vw; align-items: center; align-content: center;
    padding: var(--hdr) var(--gut) 0;
  }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-pin { grid-column: 1; grid-row: 1; padding-bottom: 22px; --nfs: min(calc(var(--pinw) * 1.03), calc((100svh - var(--hdr)) * .8)); }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-pin .pn-win { margin-inline: calc(-1 * var(--gut)) 0; }
  html.sda:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-pin::before,
  html.sda:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-prog { right: 0; left: 0; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-steps { grid-column: 2; grid-row: 1; }
  html.js:not(.rm, .a11y-size-2, .a11y-size-3) #process .pr-step { display: block; padding: 0; }   /* (not the list's row) */
}

/* ---------- the layers ----------
   Five strips, top to bottom: the clear top coat (glass), the finish layer (the visitor's chosen finish: the builder's still,
   process.js), the colour coat (the base colour of that palette), the primer, the existing tiles. Each strip is its own 3D
   plane (perspective · tilt · turn) lifted off the one below along the screen (no preserve-3d nesting, so it reads the same in
   every engine). Phones: the strips span the column and each label sits in the gap above its strip; wide screens: the stack
   takes half the row, the labels stand beside it with hairlines. Separated by default (complete without scripts); stacked
   under html.js until the figure arrives, then they lift apart on a clock (below). */
#process .ly { --G: 126px; --G0: 7px; --S: .85; --depth: 112px; margin: 10svh var(--gut) 0; display: grid; gap: 14px; }
#process .ly__cap { font: 600 var(--fs-h4)/1.25 var(--text); color: var(--ink); }
#process .ly__body { position: relative; }
#process .ly__scene { position: relative; height: calc(4 * var(--G) * var(--S) + var(--depth) * .62 + 70px); --tilt: perspective(1400px) rotateX(54deg) rotateZ(-4deg); }
#process .ly__stack { position: absolute; left: 0; right: 0; bottom: 18px; height: var(--depth); }
#process .ly__p {
  position: absolute; inset: 0; display: block; z-index: var(--n);
  background: var(--paper) url(../assets/paper.webp) 0 0 / 256px 256px;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .2), 0 6px 0 0 #cdc3b3, 0 26px 34px -20px rgba(20, 18, 16, .42);
  transform: translateY(calc(var(--n) * var(--G) * var(--S) * -1)) var(--tilt);
}
#process .ly__win { position: absolute; inset: 7px; display: block; background: #999 50% 50% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .28); }
/* the top coat: a clear, glossy sheet (no paper): a faint tint, bright edges and the streaks of light on glass */
#process .ly__p--coat { background: rgba(214, 226, 230, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 0 0 2px rgba(20, 18, 16, .14), 0 26px 34px -20px rgba(20, 18, 16, .25); }
#process .ly__p--coat .ly__win {
  inset: 0; box-shadow: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, .62) 14%, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .42) 46%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, 0) 88%);
}
/* the finish layer: the chosen finish (process.js sets --fin-img to the builder's still of it) */
#process .ly__p--finish .ly__win { background-image: var(--fin-img, url(../assets/process/fin/metallic-graphite.webp)); background-position: 30% 72%; background-size: 160% auto; }
/* the colour coat: the palette's base colour (process.js sets --coat), with the paper's tooth */
#process .ly__p--color .ly__win { background: var(--coat, #2f3034) url(../assets/paper.webp) 0 0 / 180px 180px; background-blend-mode: multiply; }
#process .ly__p--primer .ly__win { background: #a29d95 url(../assets/paper.webp) 0 0 / 140px 140px; background-blend-mode: multiply; }
#process .ly__p--base .ly__win { background-image: url(../assets/process/layer-base.webp); background-image: image-set(url(../assets/process/layer-base.avif) type("image/avif"), url(../assets/process/layer-base.webp) type("image/webp")); background-size: cover; }
#process .ly:not(.is-near) .ly__p--finish .ly__win, #process .ly:not(.is-near) .ly__p--base .ly__win { background-image: none; }

/* the labels: they ride with their strips, always in clear paper beside the stack */
#process .ly__list { position: absolute; inset: 0; pointer-events: none; z-index: 6; margin: 0; padding: 0; list-style: none; }
#process .ly__list li {
  position: absolute; display: flex; gap: 8px;
  font: 500 var(--fs-body)/1.2 var(--text); color: var(--ink-2);
  transform: translateY(calc(var(--n) * var(--G) * var(--S) * -1));
}
/* phones and tablets: the stack keeps the end side, the labels stand in a column at the start side,
   each one level with its strip's centre, a hairline running from it towards the strip */
@media (max-width: 899.98px) {
  #process .ly__stack { right: auto; width: 55%; }
  #process .ly__list { inset: 0 0 0 calc(55% + 12px); }
  #process .ly__list li { left: 0; right: 0; bottom: calc(18px + var(--depth) * .5); height: 0; align-items: center; text-wrap: balance; }
  #process .ly__list li::after { content: ""; flex: 1 1 8px; min-width: 8px; height: 1px; background: rgba(20, 18, 16, .3); }
}

/* the separation (motion sweep plan 004): time-based on every device, once the figure arrives (process.js adds .is-in when its
   top passes 90 % of the screen): each strip lifts 520 ms on the house curve, 40 ms apart from the bottom up; each label fades in
   after its strip has started, 300 ms. All at rest within 680 ms (nothing may still move 700 ms after the thumb stops). Without
   scripts the figure is simply separated. */
#process .ly__p { transition: transform 520ms var(--ease-out) calc(var(--n) * 40ms); }
#process .ly__list li { transition: transform 520ms var(--ease-out) calc(var(--n) * 40ms), opacity var(--t-fade) var(--ease-out) calc(150ms + var(--n) * 40ms); }
html.js #process .ly:not(.is-in) .ly__p { transform: translateY(calc(var(--n) * var(--G0) * var(--S) * -1)) var(--tilt); }
html.js #process .ly:not(.is-in) .ly__list li { transform: translateY(calc(var(--n) * var(--G0) * var(--S) * -1)); opacity: 0; }
html.rm #process .ly__p { transform: translateY(calc(var(--n) * var(--G) * var(--S) * -1)) var(--tilt) !important; }
html.rm #process .ly__list li { transform: translateY(calc(var(--n) * var(--G) * var(--S) * -1)) !important; opacity: 1 !important; }
@media (min-width: 600px) {
  #process .ly { --G: 140px; --depth: 132px; }
}
/* wide screens: the stack takes half the row (at the start side), the labels stand beside it, their hairlines pointing at it */
@media (min-width: 900px) {
  #process .ly { --G: 118px; --depth: 170px; margin-top: 12svh; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5vw; }
  #process .ly__cap { grid-column: 1; grid-row: 1; }
  #process .ly__body { grid-column: 1 / -1; grid-row: 2; }
  #process .ly__scene { --tilt: perspective(1800px) rotateX(58deg) rotateZ(-12deg); }
  #process .ly__stack { left: auto; right: 2%; width: 50%; }
  #process .ly__list { inset: 0 calc(52% + 2vw) 0 0; }
  #process .ly__list li { right: 0; bottom: calc(18px + var(--depth) * .3); align-items: baseline; white-space: nowrap; }
  #process .ly__list li::after { content: ""; order: -1; width: 56px; height: 1px; background: rgba(20, 18, 16, .35); align-self: center; }
}

/* ---------- the promise ---------- */
/* a display line + one line under it, both from the right; the line pours in (the page's drop, data-in="drop") */
#process .pr-promise { margin: 14svh var(--gut) 0; display: grid; gap: 16px; justify-items: start; }
#process .pr-promise__h { margin: 0; font-size: clamp(34px, 3px + 8.6vw, 40px); line-height: 1; color: var(--ink); white-space: nowrap; }
#process .pr-promise__p { margin: 0; font: 400 var(--fs-lead)/1.5 var(--text); color: var(--ink-2); max-width: 34ch; --i: 3; }
#process .pm { display: inline-block; transform-origin: 50% 0; }
@media (min-width: 900px) { #process .pr-promise__h { font-size: clamp(56px, 24px + 2.5vw, 72px); } }

/* ---------- the sample builder (#finishes) ---------- */
#process .fin { margin: 14svh var(--gut) 0; scroll-margin-top: calc(var(--hdr) + 12px); }
#process .fin:focus { outline: none; }
#process .fin__card {
  position: relative; display: grid; gap: 22px; padding: 22px 12px 26px; max-width: 1200px; margin-inline: auto;
  background: var(--paper-2) url(../assets/paper.webp) 0 0 / 256px 256px;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .1), 0 1px 0 rgba(20, 18, 16, .06), 0 34px 70px -46px rgba(20, 18, 16, .55);
}
#process .fin__h { margin: 0; font-size: clamp(30px, 2px + 7.6vw, 36px); line-height: 1; color: var(--ink); }
#process .fin__sample { display: grid; gap: 12px; min-width: 0; }
#process .fin__win { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #1b1714; }
#process .fin__still, #process .fin__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
#process .fin__gl { opacity: 0; transition: opacity var(--t-fade) var(--ease-out); }
#process .fin.gl-on .fin__gl { opacity: 1; }
#process .fin__still { transition: opacity var(--t-fade) var(--ease-out); }
/* the cut: the paper's wall seen along the top and the start edge, a hairline all round */
#process .fin__cut {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .5), inset 0 4px 0 -1px rgba(198, 188, 172, .9), inset -4px 0 0 -1px rgba(214, 206, 192, .7),
    inset 0 18px 22px -16px rgba(0, 0, 0, .55), inset -14px 0 18px -14px rgba(0, 0, 0, .35);
}
#process .fin__label { display: flex; flex-wrap: wrap; gap: 2px 6px; font: 400 var(--fs-s)/1.5 var(--text); color: var(--ink-2); }
#process .fin__label .dot { padding: 0; }
#process .fin__ctl { display: grid; gap: 20px; min-width: 0; }
#process .fin__row { display: grid; gap: 10px; }
#process .fin__l { font: 500 var(--fs-s)/1.3 var(--text); color: var(--ink-2); }
#process .fin__l b { color: var(--ink); font-weight: 600; }
#process .fin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#process .fin-chip, #process .fin-seg__b {
  appearance: none; border: 0; margin: 0; cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 12px;
  background: transparent; color: var(--ink); font: 500 var(--fs-s)/1 var(--text);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .28); transition: background-color .25s, color .25s, box-shadow .25s, transform var(--t-press) var(--ease-out);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
/* (motion sweep plan 008) a press answers under the finger at once */
#process .fin-chip:active, #process .fin-seg__b:active { transform: scale(.97); }
#process .fin-chip[aria-checked="true"], #process .fin-seg__b[aria-checked="true"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) and (pointer: fine) { #process .fin-chip:hover:not([aria-checked="true"]), #process .fin-seg__b:hover:not([aria-checked="true"]) { box-shadow: inset 0 0 0 1px var(--ink); } }
#process .fin-chip:focus-visible, #process .fin-seg__b:focus-visible, #process .fin-sw:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
#process .fin-seg { display: inline-flex; width: max-content; max-width: 100%; }
#process .fin-seg__b + .fin-seg__b { margin-inline-start: -1px; }
#process .fin-sws { display: flex; flex-wrap: wrap; gap: 3px; min-height: 44px; }   /* (the row is filled by builder.js: its height is held from the first paint, so nothing below moves) */
@media (max-width: 381.98px) { #process .fin-sws { min-height: calc(2 * 44px + 3px); } }   /* (seven 44 px swatches need 326 px: two rows below a 382 px screen) */
#process .fin-sw {
  appearance: none; border: 0; margin: 0; padding: 0; cursor: pointer; width: 44px; height: 44px; position: relative;
  background: transparent; display: grid; place-items: center; touch-action: manipulation;
}
#process .fin-sw i { display: block; width: 34px; height: 34px; background: var(--sw); background: url(../assets/process/fin/swatches.webp) calc(var(--c) / 6 * 100%) calc(var(--r) / 3 * 100%) / 700% 400% no-repeat; box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .25); transition: transform var(--t-press) var(--ease-out); }
#process .fin-sw:active i { transform: scale(.9); transition-duration: 100ms; }
#process .fin-sw::after { content: ""; position: absolute; inset: 1px; box-shadow: inset 0 0 0 1.5px var(--ink); opacity: 0; transition: opacity .25s; }
#process .fin-sw[aria-checked="true"]::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { #process .fin-sw:hover i { transform: scale(1.06); } }
#process .fin__sheen { font: 400 var(--fs-s)/1.55 var(--text); color: var(--ink-2); max-width: 42ch; }
#process .fin__panels { padding-top: 16px; border-top: 1px solid rgba(20, 18, 16, .14); }
#process .fin__panel[hidden] { display: none; }
#process .fin__pt { font: 600 var(--fs-h4)/1.3 var(--text); color: var(--ink); margin: 0 0 6px; }
#process .fin__pp { font: 400 var(--fs-body)/1.6 var(--text); color: var(--ink-2); }
#process .fin__for { font: 400 var(--fs-s)/1.5 var(--text); color: var(--ink-2); margin-top: 8px; }
#process .fin__for b { font-weight: 600; color: var(--ink); }
#process .fin__note { font: 400 var(--fs-xs)/1.65 var(--text); color: var(--ink-3t); max-width: 52ch; }
#process .fin__room { justify-self: start; font-size: var(--fs-btn); min-height: 44px; line-height: 32px; }
@media (min-width: 900px) {
  #process .fin { margin-top: 16svh; }
  #process .fin__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5vw; row-gap: 26px; padding: 48px 4vw 52px; }
  #process .fin__h { grid-column: 1 / -1; font-size: clamp(40px, 12px + 2.4vw, 56px); }
  #process .fin__sample { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--hdr) + 24px); }
  #process .fin__ctl { grid-column: 2; grid-row: 2; gap: 24px; }
}

/* high contrast: no picture inside the numerals (they stay, as plain figures), no progress line */
html.a11y-contrast #process .pn-ph, html.a11y-contrast #process .pn-paper, html.a11y-contrast #process .pr-prog,
html.a11y-contrast #process .pr-pin::before { display: none !important; }
html.a11y-contrast #process .pn-win { background: #000; }
html.a11y-contrast #process .pn-knock { background: none; mix-blend-mode: normal; }
html.a11y-contrast #process .pn { color: #fff; }