/* Truefall: limestone chalk, ink, one jade laser. Set out from a single cross-line laser at the left edge. */

@font-face { font-family: "Fira Sans Extra Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/specimen/fira-sans-extra-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans Extra Condensed"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/specimen/fira-sans-extra-condensed-300.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/fira-sans-400.woff2") format("woff2"); }

body.spec-truefall { margin: 0; background: #ECEBE6; }

.spec-truefall .tf-root {
  --tf-chalk: #ECEBE6;
  --tf-ink: #131517;
  --tf-ink-2: #44494B;
  --tf-jade: #00BC98;
  --tf-jade-lo: #00A283;
  --tf-jade-hi: #52D8BA;
  --tf-steel: #A7ACAA;
  --tf-hair: rgb(19 21 23 / .22);
  --tf-cond: "Fira Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --tf-text: "Fira Sans", system-ui, sans-serif;
  --tf-m: 96px;
  --tf-gap: 56px;
  --tf-nav: 56px;
  --tf-band: clamp(72px, 9vw, 152px);
  --tf-ease: cubic-bezier(.2, .7, .1, 1);
  background: var(--tf-chalk);
  color: var(--tf-ink);
  font: 400 clamp(16px, 1.1vw, 18.5px)/1.55 var(--tf-text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (max-width: 1180px) { .spec-truefall .tf-root { --tf-m: 76px; --tf-gap: 40px; } }
@media (max-width: 1023px) { .spec-truefall .tf-root { --tf-m: 40px; --tf-gap: 24px; } }
@media (max-width: 700px) { .spec-truefall .tf-root { --tf-m: 16px; --tf-gap: 12px; } }

.spec-truefall .tf-root *, .spec-truefall .tf-root *::before, .spec-truefall .tf-root *::after { box-sizing: border-box; }
:where(.spec-truefall .tf-root) :where(h1, h2, h3, p, ul, ol, figure, fieldset) { margin: 0; padding: 0; }
:where(.spec-truefall .tf-root) :where(ul, ol) { list-style: none; }
:where(.spec-truefall .tf-root) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.spec-truefall .tf-root) :where(a) { color: inherit; }
.spec-truefall .tf-root :focus-visible { outline: 2px solid var(--tf-ink); outline-offset: 3px; }
.spec-truefall .tf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* heading pairs: one size, one ink; 800 over 300 */
.spec-truefall .tf-h-hi, .spec-truefall .tf-h-lo { display: block; }
.spec-truefall .tf-h-hi { font-weight: 800; }
.spec-truefall .tf-h-lo { font-weight: 300; }
.spec-truefall .tf-h1, .spec-truefall .tf-h2 { font-family: var(--tf-cond); color: var(--tf-ink); -webkit-text-stroke: .09em var(--tf-ks, var(--tf-chalk)); paint-order: stroke fill; }
.spec-truefall .tf-h2 { font-size: clamp(38px, 6.2vw, 92px); line-height: .9; letter-spacing: -.01em; }
.spec-truefall .tf-h2 > span, .spec-truefall .tf-pair-t > span { text-wrap: balance; }

/* ---------- nav ---------- */
.spec-truefall .tf-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 80;
  height: var(--tf-nav); display: flex; align-items: center; gap: 32px;
  padding: 0 var(--tf-m);
  background: rgb(236 235 230 / .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tf-hair);
}
.spec-truefall .tf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.spec-truefall .tf-mark { display: block; width: 28px; height: 28px; flex: none; }
.spec-truefall .tf-name { font: 800 22px/1 var(--tf-cond); letter-spacing: -.005em; }
.spec-truefall .tf-root .tf-links { display: flex; gap: 26px; margin-left: auto; }
.spec-truefall .tf-links a { font-size: 15px; text-decoration: none; padding: 6px 0; }
.spec-truefall .tf-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.spec-truefall .tf-cta {
  flex: none; position: relative; font: 800 19px/1 var(--tf-cond); text-decoration: none; padding: 10px 0;
}
.spec-truefall .tf-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--tf-jade);
  box-shadow: 0 0 6px rgb(0 188 152 / .45); transform-origin: 0 50%; transform: scaleX(.28); transition: transform .36s var(--tf-ease);
}
.spec-truefall .tf-cta:hover::after, .spec-truefall .tf-cta:focus-visible::after { transform: scaleX(1); }
@media (max-width: 1023px) { .spec-truefall .tf-root .tf-links { gap: 18px; } .spec-truefall .tf-links a { font-size: 14px; } }
@media (max-width: 900px) { .spec-truefall .tf-nav .tf-links { display: none; } .spec-truefall .tf-cta { margin-left: auto; } }
@media (max-width: 360px) { .spec-truefall .tf-nav { gap: 12px; } .spec-truefall .tf-name { font-size: 20px; } .spec-truefall .tf-cta { font-size: 17px; } }

/* ---------- the laser housing: fixed at the left edge, riding the nearest level ---------- */
.spec-truefall .tf-laser { display: none; }
.spec-truefall.tf-js .tf-laser {
  display: block; position: fixed; left: 0; top: 0; z-index: 60; width: 18px; height: 40px; pointer-events: none;
  transform: translate3d(0, var(--tf-ly, -80px), 0); transition: transform .36s cubic-bezier(.2, .7, .1, 1), opacity .3s;
  filter: drop-shadow(1px 1px 1.5px rgb(19 21 23 / .28));
}
.spec-truefall .tf-laser svg { display: block; width: 100%; height: 100%; }
.spec-truefall .tf-laser .tf-aperture { filter: drop-shadow(0 0 3px rgb(0 188 152 / .9)); }
.spec-truefall.tf-js .tf-laser.tf-off { opacity: 0; }
.spec-truefall .tf-laser.tf-lz-dim .tf-aperture { fill: #6b7072; filter: none; transition: fill .6s; }
@media (max-width: 1023px) { .spec-truefall.tf-js .tf-laser { width: 14px; height: 32px; } }
@media (max-width: 700px) { .spec-truefall.tf-js .tf-laser { width: 7px; height: 26px; } }
@media (max-width: 339px) { .spec-truefall.tf-js .tf-laser { display: none; } }

/* ---------- hero: the floor in plan, laid from the cross ---------- */
.spec-truefall .tf-level, .spec-truefall .tf-plumb { position: absolute; background: var(--tf-jade); box-shadow: 0 0 6px rgb(0 188 152 / .4); opacity: .92; }
.spec-truefall .tf-node { position: absolute; left: var(--tf-dx); top: var(--tf-dy); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #bff5e6; box-shadow: 0 0 8px 2px rgb(0 188 152 / .8); }
.spec-truefall .tf-far { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--tf-ink-2); line-height: 1; }
.spec-truefall .tf-far-n { font: 300 clamp(18px, 1.5vw, 22px)/1 var(--tf-cond); color: var(--tf-ink); }
.spec-truefall .tf-far-w { font-size: 12.5px; }

.spec-truefall .tf-floor {
  --tf-wx: .68; --tf-wy: .5;
  --tf-pitch: clamp(150px, min(19vw, 36svh), 300px);
  --tf-dx: calc(var(--tf-wx) * 100cqw); --tf-dy: calc(var(--tf-wy) * 100cqh);
  --tf-ks: rgb(236 235 230 / .9);
  position: relative; container-type: size; overflow: hidden;
  height: calc(100svh - var(--bar-h, 40px) - var(--tf-nav)); min-height: 560px;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(28px, 6.5svh, 68px) var(--tf-m) 0;
  background: #9EA09A;
}
.spec-truefall .tf-fl { position: absolute; inset: 0; z-index: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.spec-truefall .tf-fl-photo, .spec-truefall .tf-fl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.spec-truefall .tf-fl-photo img { object-fit: cover; }
/* the poster: one photograph with the joints drawn on it, a joint crossing on the waste */
.spec-truefall .tf-fl-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(19 21 23 / .42) 0 2px, rgb(255 255 255 / .28) 2px 3px, #0000 3px),
    linear-gradient(rgb(19 21 23 / .42) 0 2px, rgb(255 255 255 / .28) 2px 3px, #0000 3px);
  background-size: var(--tf-pitch) var(--tf-pitch);
  background-position: calc(var(--tf-wx) * 100cqw - 1px) calc(var(--tf-wy) * 100cqh - 1px);
}
.spec-truefall .tf-fl-c { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.spec-truefall .tf-fl-pitch { position: absolute; left: 0; top: 0; width: var(--tf-pitch); height: 1px; visibility: hidden; pointer-events: none; }
.spec-truefall .tf-fl-js .tf-fl-c { display: block; }
.spec-truefall .tf-fl-js :is(.tf-fl-photo, .tf-fl-grid) { visibility: hidden; }
.spec-truefall .tf-fl-js:not(.tf-fl-on) .tf-fl { background: repeating-linear-gradient(rgb(19 21 23 / .05) 0 1px, #0000 1px 9px); }
/* daylight from the window at the top left, and a little at the foot, so the words read on the stone */
.spec-truefall .tf-fl::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 96% at 0% 0%, rgb(236 235 230 / .93), rgb(236 235 230 / .87) 46%, rgb(236 235 230 / .42) 74%, #0000 100%),
    radial-gradient(ellipse 44% 42% at 100% 100%, rgb(236 235 230 / .86), rgb(236 235 230 / .6) 48%, #0000 100%);
}
.spec-truefall .tf-fl-waste {
  position: absolute; z-index: 3; left: calc(var(--tf-wx) * 100%); top: calc(var(--tf-wy) * 100%);
  width: var(--tf-wsz, calc(var(--tf-pitch) * .183)); height: var(--tf-wsz, calc(var(--tf-pitch) * .183)); transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgb(19 21 23 / .8) 0 1.5px, #0000 2.1px) 50% 50% / 7px 7px,
    linear-gradient(135deg, #e4e7e5, #b3b8b6 48%, #858a88);
  background-clip: content-box, border-box; padding: calc(var(--tf-wsz, 40px) * .16); box-sizing: border-box;
  outline: 1px solid rgb(19 21 23 / .75); box-shadow: 0 0 0 3px rgb(167 172 170 / .55);
}
.spec-truefall .tf-floor .tf-level { z-index: 4; left: 0; right: 0; top: calc(var(--tf-dy) - 1px); height: 2px; box-shadow: 0 0 8px rgb(0 188 152 / .7); opacity: 1; }
.spec-truefall .tf-floor .tf-plumb { z-index: 4; top: 0; bottom: 0; left: calc(var(--tf-dx) - 1px); width: 2px; box-shadow: 0 0 8px rgb(0 188 152 / .7); opacity: 1; }
.spec-truefall .tf-floor .tf-fl-cross { display: none; z-index: 5; left: var(--tf-dx); top: var(--tf-dy); width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.spec-truefall .tf-floor.tf-fl-on .tf-fl-cross { display: block; }
.spec-truefall .tf-fl-cross .tf-cross-ring { inset: 15px; border-width: 2.5px; }
.spec-truefall .tf-fl-cross:hover .tf-cross-ring, .spec-truefall .tf-fl-cross.tf-held .tf-cross-ring { inset: 11px; }
.spec-truefall .tf-fl-hint {
  position: absolute; z-index: 5; left: 0; top: 0; display: none; pointer-events: none; white-space: nowrap;
  font: 300 22px/1 var(--tf-cond); color: var(--tf-ink); padding: 5px 9px 6px; background: rgb(236 235 230 / .88); border-radius: 2px;
  transition: opacity .5s;
}
.spec-truefall .tf-fl-on.tf-fl-ready .tf-fl-hint { display: block; }
.spec-truefall .tf-fl-touched .tf-fl-hint { opacity: 0; }

/* the headline, one weight, top left; the intro under it */
.spec-truefall .tf-floor .tf-h1 {
  position: relative; z-index: 6; max-width: 5.3em;
  font-size: clamp(52px, min(8.2vw, 14.5svh), 136px); font-weight: 800; line-height: .88; letter-spacing: -.012em;
  -webkit-text-stroke-width: .05em; text-wrap: balance;
}
.spec-truefall .tf-sub { position: relative; z-index: 6; margin-top: clamp(18px, 3svh, 30px); width: min(36ch, 40cqw); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; }
.spec-truefall .tf-sub p { text-wrap: pretty; }
.spec-truefall .tf-root .tf-go {
  position: relative; display: inline-flex; gap: 10px; align-items: center; margin-top: 18px; padding: 8px 0 10px;
  color: var(--tf-ink); text-decoration: none; font: 800 23px/1 var(--tf-cond); letter-spacing: .005em;
}
.spec-truefall .tf-root .tf-go::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tf-jade); box-shadow: 0 0 6px rgb(0 188 152 / .5); transform-origin: 0 50%; transition: transform .36s var(--tf-ease); }
.spec-truefall .tf-root .tf-go:hover::after { transform: scaleX(1.08); }

/* the solver's answer, at the foot on the right */
.spec-truefall .tf-fl-act { position: absolute; z-index: 6; right: var(--tf-m); bottom: clamp(22px, 5svh, 52px); width: min(40ch, 36cqw); }
.spec-truefall .tf-fl-say { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; text-wrap: pretty; }
.spec-truefall .tf-fl-say b { font: 800 1.14em/1 var(--tf-cond); letter-spacing: .005em; }
.spec-truefall .tf-fl-best {
  display: none; margin-top: 14px; min-height: 44px; padding: 9px 16px 10px; cursor: pointer;
  font: 800 21px/1 var(--tf-cond); color: var(--tf-ink); background: rgb(236 235 230 / .92); border: 1.5px solid var(--tf-ink); border-radius: 2px;
}
.spec-truefall .tf-fl-best::before { content: ""; display: inline-block; width: 11px; height: 11px; margin: 0 9px 1px 0; vertical-align: middle; background: linear-gradient(var(--tf-jade), var(--tf-jade)) 50% 0 / 2px 100% no-repeat, linear-gradient(var(--tf-jade), var(--tf-jade)) 0 50% / 100% 2px no-repeat; }
.spec-truefall .tf-fl-best:hover { background: var(--tf-chalk); }
.spec-truefall .tf-fl-on .tf-fl-best { display: inline-block; }

@media (max-width: 1023px) {
  .spec-truefall .tf-floor { --tf-wx: .66; --tf-wy: .62; }
  .spec-truefall .tf-sub { width: min(38ch, 56cqw); }
  .spec-truefall .tf-fl-act { width: min(40ch, 46cqw); }
}
@media (max-width: 700px) {
  .spec-truefall .tf-floor { --tf-wx: .66; --tf-wy: .64; min-height: 600px; padding-top: 22px; }
  .spec-truefall .tf-floor .tf-h1 { font-size: clamp(46px, 14vw, 66px); }
  .spec-truefall .tf-sub { width: auto; max-width: 34ch; font-size: 15.5px; line-height: 1.45; }
  .spec-truefall .tf-sub-x { display: none; }
  .spec-truefall .tf-root .tf-go { margin-top: 8px; font-size: 21px; }
  .spec-truefall .tf-fl-act { left: var(--tf-m); right: var(--tf-m); width: auto; bottom: 16px; }
  .spec-truefall .tf-fl-say { font-size: 15px; }
  .spec-truefall .tf-fl-best { margin-top: 10px; font-size: 19px; }
  .spec-truefall .tf-fl::after {
    background:
      linear-gradient(rgb(236 235 230 / .9), rgb(236 235 230 / .8) 44%, rgb(236 235 230 / .2) 56%, #0000 62%, #0000 74%, rgb(236 235 230 / .7) 84%, rgb(236 235 230 / .9));
  }
  .spec-truefall .tf-fl-hint { font-size: 19px; }
}
@media (max-width: 380px), (max-width: 700px) and (max-height: 700px) {
  .spec-truefall .tf-sub-y { display: none; }
}

/* ======================================================================
   The bands. Each one is set out to its own datum: a level at a real
   bathroom height, a plumb on a real vertical. Nothing is boxed.
   ====================================================================== */
.spec-truefall .tf-band {
  --tf-dy: 50%; --tf-dx: 40%;
  --tf-colw: calc((100cqw - 2 * var(--tf-m) - 11 * var(--tf-gap)) / 12);
  position: relative; container-type: inline-size;
  padding: var(--tf-band) var(--tf-m);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--tf-gap); align-items: start;
}
.spec-truefall .tf-band > * { grid-column: 1 / -1; position: relative; z-index: 2; }
.spec-truefall .tf-band > :is(.tf-rooms-row, .tf-drain, .tf-membrane, .tf-wall, .tf-gfig, .tf-course-w) { z-index: 0; }
.spec-truefall .tf-copy { max-width: 60ch; text-wrap: pretty; }
.spec-truefall .tf-copy + .tf-copy { margin-top: 14px; }
.spec-truefall .tf-quiet { font-size: 14px; color: var(--tf-ink-2); }

/* the band's cross: projected, never a frame */
.spec-truefall .tf-band > .tf-level, .spec-truefall .tf-band > .tf-plumb, .spec-truefall .tf-band > .tf-node, .spec-truefall .tf-band > .tf-far { position: absolute; z-index: 1; pointer-events: none; grid-column: auto; }
.spec-truefall .tf-band > .tf-level { left: 0; right: 0; top: calc(var(--tf-dy) - .75px); height: 1.5px; transform-origin: 0 50%; }
.spec-truefall .tf-band > .tf-plumb { top: 0; bottom: 0; left: calc(var(--tf-dx) - .75px); width: 1.5px; transform-origin: 50% 0; }
.spec-truefall .tf-band > .tf-node { left: var(--tf-dx); top: var(--tf-dy); }
.spec-truefall .tf-band > .tf-far { right: 18px; top: calc(var(--tf-dy) - 8px); transform: translateY(-100%); z-index: 3; }
.spec-truefall .tf-band > .tf-far .tf-far-w { color: var(--tf-ink-2); }
@media (max-width: 700px) {
  .spec-truefall .tf-band > .tf-far { right: 10px; top: calc(var(--tf-dy) + 8px); transform: none; }
}

/* ---------- 2 · the set-out: a field of glazed tile ---------- */
.spec-truefall .tf-setout { display: block; padding: 48px 0; }
.spec-truefall .tf-field {
  position: relative; z-index: 0; overflow: hidden;
  min-height: calc(100svh - var(--bar-h, 40px) - var(--tf-nav) - 96px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--tf-gap); row-gap: 28px; align-content: start;
  padding: clamp(56px, 6vw, 104px) var(--tf-m) clamp(48px, 5vw, 80px);
  --tf-ks: #00BC98;
  background:
    linear-gradient(90deg, rgb(19 21 23 / .35) 2px, #0000 2px) 0 0 / 120px 120px,
    linear-gradient(rgb(19 21 23 / .35) 2px, #0000 2px) 0 0 / 120px 120px,
    linear-gradient(210deg, #0000 38%, rgb(82 216 186 / .38) 44%, #0000 52%) 0 0 / 120px 120px,
    linear-gradient(45deg, #00A283, #00BC98 45%) 0 0 / 120px 120px, #00BC98;
}
.spec-truefall .tf-field > * { position: relative; z-index: 2; min-width: 0; }
.spec-truefall .tf-field-c { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; }
.spec-truefall .tf-so-live .tf-field-c { display: block; }
.spec-truefall .tf-so-text { grid-column: 1 / span 5; grid-row: 1; }
.spec-truefall .tf-so-text .tf-h2 { margin-bottom: 28px; font-size: clamp(38px, 5.2vw, 78px); }
.spec-truefall .tf-so-text .tf-copy { max-width: 40ch; }
.spec-truefall .tf-so-hint { margin-top: 18px; font: 300 24px/1.1 var(--tf-cond); display: none; }
.spec-truefall .tf-so-hint::before { content: ""; display: inline-block; width: 22px; height: 1.5px; margin: 0 10px 6px 0; vertical-align: middle; background: var(--tf-ink); }
.spec-truefall .tf-so-live .tf-so-hint { display: block; }
.spec-truefall .tf-so-act { grid-column: 1 / span 5; grid-row: 2; display: none; }
.spec-truefall .tf-so-live .tf-so-act { display: block; }
.spec-truefall .tf-best {
  font: 800 24px/1 var(--tf-cond); color: var(--tf-chalk); background: var(--tf-ink); border: 0; border-radius: 2px;
  padding: 14px 24px 13px; min-height: 48px; cursor: pointer;
}
.spec-truefall .tf-best:hover { background: #24282b; }
.spec-truefall .tf-best::after { content: " B"; font-weight: 300; opacity: .6; margin-left: .35em; }
.spec-truefall .tf-why { margin-top: 16px; max-width: 42ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.45; }
.spec-truefall .tf-so-plan { grid-column: 6 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 18px; }
.spec-truefall .tf-plan { position: relative; height: clamp(340px, 50svh, 540px); display: grid; place-items: center; }
.spec-truefall .tf-plan-svg { width: 100%; height: 100%; max-width: 640px; }
.spec-truefall .tf-plan-svg text { font: 400 12px var(--tf-text); text-anchor: middle; fill: var(--tf-ink); }
.spec-truefall .tf-plan-svg .tf-plan-dim { font-size: 14px; }
.spec-truefall .tf-so-live .tf-plan-svg { visibility: hidden; }
.spec-truefall .tf-so-ctl { display: none; flex-wrap: wrap; align-items: flex-end; gap: 10px 30px; }
.spec-truefall .tf-so-live .tf-so-ctl { display: flex; }
.spec-truefall .tf-ctl-g { display: flex; flex-wrap: wrap; gap: 0 16px; }
.spec-truefall .tf-ctl-g button {
  font: 300 28px/1 var(--tf-cond); color: var(--tf-ink); background: none; border: 0; padding: 8px 0 7px; min-height: 44px; cursor: pointer;
  border-bottom: 2px solid #0000;
}
.spec-truefall .tf-ctl-g button[aria-pressed="true"] { font-weight: 800; border-bottom-color: var(--tf-ink); }
.spec-truefall .tf-ctl-g button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; text-decoration: line-through 1px; }
.spec-truefall .tf-ctl-g button:hover:not([aria-pressed="true"]) { border-bottom-color: rgb(19 21 23 / .4); }
.spec-truefall .tf-sw { gap: 0 12px; align-items: flex-end; }
.spec-truefall .tf-sw button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 2px; font: 400 12px/1 var(--tf-text); border: 0; }
.spec-truefall .tf-sw button[aria-pressed="true"] { font-weight: 400; }
.spec-truefall .tf-sw i {
  display: block; height: 30px; outline: 1px solid rgb(19 21 23 / .6); outline-offset: 0;
  background: linear-gradient(200deg, #0000 40%, rgb(120 228 203 / .6) 48%, #0000 56%), linear-gradient(45deg, #00A283, #05C29F 55%);
}
.spec-truefall .tf-sw button[aria-pressed="true"] i { outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.spec-truefall .tf-sw-100 { width: 30px; background-size: 6px 6px !important; box-shadow: inset 0 0 0 30px rgb(0 0 0 / 0); }
.spec-truefall .tf-sw .tf-sw-100 { background: repeating-linear-gradient(90deg, #0000 0 5px, rgb(19 21 23 / .7) 5px 6px), repeating-linear-gradient(#0000 0 5px, rgb(19 21 23 / .7) 5px 6px), #05C29F; }
.spec-truefall .tf-sw-300 { width: 30px; }
.spec-truefall .tf-sw-36 { width: 40px; height: 20px !important; }
.spec-truefall .tf-sw-600 { width: 30px; }
.spec-truefall .tf-sw-612 { width: 48px; height: 24px !important; }
.spec-truefall .tf-dims { font-size: 14px; align-self: center; }
.spec-truefall .tf-dim { font: 800 17px/1 var(--tf-cond); padding: 4px 2px; border-bottom: 1px dotted var(--tf-ink); cursor: default; }
.spec-truefall .tf-sentence { grid-column: 1 / -1; grid-row: 3; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.3; max-width: 52ch; text-wrap: pretty; margin-top: 12px; }
.spec-truefall .tf-sentence b { font: 800 1.08em/1 var(--tf-cond); letter-spacing: .005em; }
.spec-truefall .tf-field > .tf-quiet { grid-column: 1 / -1; grid-row: 4; color: var(--tf-ink); }

/* the cross you hold, the room's handles, the waste */
.spec-truefall .tf-cross, .spec-truefall .tf-hdl, .spec-truefall .tf-waste-h { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 5; touch-action: none; }
.spec-truefall .tf-cross { display: none; cursor: grab; border-radius: 50%; }
.spec-truefall .tf-so-live .tf-cross { display: block; }
.spec-truefall .tf-cross.tf-held { cursor: grabbing; }
.spec-truefall .tf-cross-ring { position: absolute; inset: 11px; border: 2px solid var(--tf-chalk); border-radius: 50%; box-shadow: 0 0 0 1px rgb(19 21 23 / .55), inset 0 0 0 1px rgb(19 21 23 / .35); }
.spec-truefall .tf-cross-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--tf-ink); }
.spec-truefall .tf-cross:hover .tf-cross-ring, .spec-truefall .tf-cross.tf-held .tf-cross-ring { inset: 8px; }
.spec-truefall .tf-cross:focus-visible { outline-offset: -4px; }
.spec-truefall .tf-hdl { cursor: ew-resize; }
.spec-truefall .tf-hdl-y { cursor: ns-resize; }
.spec-truefall .tf-hdl::before { content: ""; position: absolute; inset: 16px; background: linear-gradient(#c9cdcb, #A7ACAA 55%, #858a88); outline: 1px solid var(--tf-ink); }
.spec-truefall .tf-hdl:hover::before, .spec-truefall .tf-hdl.tf-held::before { inset: 14px; }
.spec-truefall .tf-waste-h { cursor: move; border-radius: 3px; }
.spec-truefall .tf-waste-h:hover { outline: 1px dashed rgb(19 21 23 / .6); outline-offset: -8px; }
.spec-truefall .tf-setout > .tf-level, .spec-truefall .tf-setout > .tf-plumb { background: rgb(19 21 23 / .85); box-shadow: none; opacity: 1; }
.spec-truefall .tf-setout > .tf-node { display: none; }
.spec-truefall .tf-setout:not(.tf-so-live) > :is(.tf-level, .tf-plumb, .tf-far) { display: none; }
.spec-truefall .tf-setout > .tf-far .tf-far-w, .spec-truefall .tf-setout > .tf-far .tf-far-n { color: var(--tf-ink); }
.spec-truefall .tf-setout > .tf-far { right: 18px; }
.spec-truefall .tf-setout > .tf-far.tf-far-off { visibility: hidden; }

/* plan to wall: the tiles that fly */
.spec-truefall .tf-vt { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spec-truefall .tf-vt-row { position: absolute; }
.spec-truefall .tf-vt-t { position: absolute; display: block; background: linear-gradient(200deg, #0000 38%, rgb(120 228 203 / .45) 46%, #0000 54%), linear-gradient(45deg, #00A283, #00BC98 50%); box-shadow: inset 0 1px 0 rgb(214 255 243 / .5); }
.spec-truefall .tf-vt-cut { background: repeating-linear-gradient(-45deg, rgb(0 120 97 / .55) 0 1px, #0000 1px 7px), linear-gradient(45deg, #00A283, #00BC98 50%); }

@media (max-width: 1180px) {
  .spec-truefall .tf-plan { height: clamp(320px, 44svh, 480px); }
  .spec-truefall .tf-ctl-g:not(.tf-sw) button { font-size: 25px; }
  .spec-truefall .tf-setout > .tf-far { display: none; }
}
@media (max-width: 1023px) {
  .spec-truefall .tf-so-text, .spec-truefall .tf-so-act { grid-column: 1 / -1; }
  .spec-truefall .tf-so-text .tf-copy { max-width: 56ch; }
  .spec-truefall .tf-so-plan { grid-column: 1 / -1; grid-row: 3; }
  .spec-truefall .tf-sentence { grid-row: 4; }
  .spec-truefall .tf-field > .tf-quiet { grid-row: 5; }
}
@media (max-width: 700px) {
  .spec-truefall .tf-setout { padding: 32px 0; }
  .spec-truefall .tf-field { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 48px var(--tf-m) 40px; row-gap: 22px; }
  .spec-truefall .tf-so-plan { grid-row: 2; gap: 14px; }
  .spec-truefall .tf-plan { order: 1; height: min(300px, 86vw); }
  .spec-truefall .tf-dims { order: 2; }
  .spec-truefall .tf-so-ctl { order: 3; gap: 4px 20px; }
  .spec-truefall .tf-so-act { grid-row: 3; }
  .spec-truefall .tf-best { width: 100%; }
  .spec-truefall .tf-ctl-g:not(.tf-sw) button { font-size: 22px; }
  .spec-truefall .tf-sw { gap: 0 10px; }
  .spec-truefall .tf-so-hint { font-size: 20px; }
  .spec-truefall .tf-setout > .tf-far, .spec-truefall .tf-where > .tf-far { display: none; }
}

/* ---------- 3 · rooms: three photographs set on one line ---------- */
.spec-truefall .tf-rooms { padding-bottom: calc(var(--tf-band) * .7); }
.spec-truefall .tf-rooms > .tf-h2 { grid-column: 1 / span 10; margin-bottom: clamp(40px, 5vw, 72px); }
.spec-truefall .tf-rooms-row {
  --tf-line: 18cqw;
  container-type: inline-size; margin-right: max(0px, 92px - var(--tf-m));
  height: calc(33cqw + 270px); outline-offset: 6px;
}
/* the row stops short of the right margin so the level's far end (900, vanity top) lands on open ground */
.spec-truefall .tf-room { position: absolute; margin: 0; }
.spec-truefall .tf-room img { width: 100%; height: auto; }
.spec-truefall .tf-room figcaption { max-width: 38ch; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; text-wrap: pretty; }
.spec-truefall .tf-room figcaption strong { display: block; font: 800 clamp(24px, 2.1vw, 32px)/1 var(--tf-cond); margin-bottom: 8px; }
.spec-truefall .tf-room-vanity { left: 0; width: 52cqw; top: calc(var(--tf-line) - .5 * 52cqw * .5625); }
.spec-truefall .tf-room-vanity figcaption { margin-top: 40px; padding-left: 0; }
.spec-truefall .tf-room-powder { left: 56cqw; width: 20cqw; top: calc(var(--tf-line) - .55 * 20cqw * 1.5); }
.spec-truefall .tf-room-powder figcaption { margin-top: 120px; }
.spec-truefall .tf-room-bath { left: 80cqw; width: 20cqw; top: calc(var(--tf-line) - .45 * 20cqw * .6667); }
.spec-truefall .tf-room-bath figcaption { margin-top: 40px; }
.spec-truefall .tf-rooms-n { display: none; }
@media (max-width: 1023px) {
  .spec-truefall .tf-rooms > .tf-h2 { grid-column: 1 / -1; }
  .spec-truefall .tf-rooms-row { height: calc(33cqw + 330px); }
  .spec-truefall .tf-room-powder figcaption { margin-top: 64px; }
}
@media (max-width: 700px) {
  .spec-truefall .tf-rooms-row {
    --tf-line: 64.4vw;
    display: flex; gap: 16px; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--tf-m)); padding: 0 var(--tf-m) 8px; scroll-padding: 0 var(--tf-m);
  }
  .spec-truefall .tf-rooms-row::-webkit-scrollbar { display: none; }
  .spec-truefall .tf-room { position: static; flex: none; width: 78vw; scroll-snap-align: start; }
  .spec-truefall .tf-room-vanity { margin-top: calc(var(--tf-line) - .5 * 78vw * .5625); }
  .spec-truefall .tf-room-powder { margin-top: calc(var(--tf-line) - .55 * 78vw * 1.5); }
  .spec-truefall .tf-room-bath { margin-top: calc(var(--tf-line) - .45 * 78vw * .6667); }
  .spec-truefall .tf-room figcaption, .spec-truefall .tf-room-powder figcaption, .spec-truefall .tf-room-bath figcaption { margin-top: 24px; padding: 0; }
  .spec-truefall .tf-rooms-n { display: block; margin-top: 16px; font: 300 22px/1 var(--tf-cond); }
  /* on a phone the swiped row fills the level from edge to edge: no open ground for the far label */
  .spec-truefall .tf-rooms > .tf-far { display: none; }
}

/* ---------- 4 · behind the tile: one wall, ten coats ---------- */
.spec-truefall .tf-behind {
  --tf-ww: calc(5 * var(--tf-colw) + 4 * var(--tf-gap));
  --tf-wh: min(78svh, calc(var(--tf-ww) * 1.9067));
  --tf-lv: calc(var(--tf-wh) * .3147);
  --tf-cn: clamp(40px, 5.6vw, 84px);
  row-gap: clamp(40px, 5vw, 72px);
}
.spec-truefall .tf-bh-head { grid-column: 1 / span 12; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: end; }
.spec-truefall .tf-bh-head .tf-h2 { grid-column: 1 / span 8; }
.spec-truefall .tf-bh-head .tf-copy { grid-column: 9 / span 4; }
.spec-truefall .tf-coat-now { grid-column: 1 / span 4; grid-row: 2; padding-top: calc(var(--tf-lv) - .8 * var(--tf-cn) - 34px); }
.spec-truefall .tf-coat-n { font-size: 14px; color: var(--tf-ink-2); margin-bottom: 10px; }
.spec-truefall .tf-coat-name { font: 800 var(--tf-cn)/.9 var(--tf-cond); letter-spacing: -.01em; -webkit-text-stroke: .09em var(--tf-chalk); paint-order: stroke fill; }
.spec-truefall .tf-coat-say { margin-top: 30px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; max-width: 30ch; min-height: 7.5em; }
.spec-truefall .tf-coat-hint { margin-top: 18px; font-size: 14px; color: var(--tf-ink-2); }
.spec-truefall .tf-coat-btns { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.spec-truefall .tf-coat-b { font: 800 22px/1 var(--tf-cond); color: var(--tf-chalk); background: var(--tf-ink); border: 0; border-radius: 2px; padding: 12px 18px 11px; min-height: 44px; cursor: pointer; }
.spec-truefall .tf-coat-b:hover { background: #24282b; }
.spec-truefall .tf-coat-strip { background: none; color: var(--tf-ink); padding-inline: 0; border-bottom: 2px solid var(--tf-ink); border-radius: 0; }
.spec-truefall .tf-coat-strip:hover { background: none; border-bottom-color: var(--tf-jade); }
.spec-truefall .tf-coat-now { display: none; }
.spec-truefall .tf-layers-live .tf-coat-now { display: block; }
.spec-truefall .tf-wall { grid-column: 5 / span 5; grid-row: 2; justify-self: center; margin: 0; }
.spec-truefall .tf-wall-svg { display: block; height: var(--tf-wh); width: auto; max-width: 100%; overflow: visible; touch-action: pan-y; outline-offset: 8px; -webkit-user-select: none; user-select: none; }
.spec-truefall .tf-layers-live .tf-wall-svg { cursor: none; }
.spec-truefall .tf-wall-svg .tf-cut-l { font: 400 52px var(--tf-text); fill: var(--tf-ink); paint-order: stroke fill; stroke: rgb(236 235 230 / .85); stroke-width: 14px; stroke-linejoin: round; }
.spec-truefall .tf-trowel { opacity: 0; pointer-events: none; transition: opacity .2s; }
.spec-truefall .tf-wall-svg.tf-hover .tf-trowel { opacity: 1; }
.spec-truefall .tf-coats { grid-column: 1 / span 4; grid-row: 2; align-self: end; font-size: 15px; line-height: 1.55; color: var(--tf-ink); }
.spec-truefall .tf-coats li { display: inline; }
.spec-truefall .tf-coats li::after { content: " "; }
.spec-truefall .tf-coats strong { font-weight: 400; font-style: normal; text-decoration: underline 1px var(--tf-steel); text-underline-offset: 3px; }
.spec-truefall .tf-layers-live .tf-coats { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.spec-truefall .tf-behind:not(.tf-layers-live) .tf-coat { clip-path: none; }
.spec-truefall .tf-behind:not(.tf-layers-live) .tf-cut-l { display: block; }
.spec-truefall .tf-layers-live .tf-cut-l { display: none; }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c2 { clip-path: url(#tf-cut-2); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c3 { clip-path: url(#tf-cut-3); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c4 { clip-path: url(#tf-cut-4); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c5 { clip-path: url(#tf-cut-5); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c6 { clip-path: url(#tf-cut-6); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c7 { clip-path: url(#tf-cut-7); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c8 { clip-path: url(#tf-cut-8); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c9 { clip-path: url(#tf-cut-9); }
.spec-truefall .tf-behind:not(.tf-layers-live) #tf-c10 { clip-path: url(#tf-cut-10); }
.spec-truefall .tf-layers-live #tf-c1 { mask: url(#tf-m-1); }
.spec-truefall .tf-layers-live #tf-c2 { mask: url(#tf-m-2); }
.spec-truefall .tf-layers-live #tf-c3 { mask: url(#tf-m-3); }
.spec-truefall .tf-layers-live #tf-c4 { mask: url(#tf-m-4); }
.spec-truefall .tf-layers-live #tf-c5 { mask: url(#tf-m-5); }
.spec-truefall .tf-layers-live #tf-c6 { mask: url(#tf-m-6); }
.spec-truefall .tf-layers-live #tf-c7 { mask: url(#tf-m-7); }
.spec-truefall .tf-layers-live #tf-c8 { mask: url(#tf-m-8); }
.spec-truefall .tf-layers-live #tf-c9 { mask: url(#tf-m-9); }
.spec-truefall .tf-layers-live #tf-c10 { mask: url(#tf-m-10); }
.spec-truefall .tf-m-full { transition: opacity .28s linear; }
.spec-truefall .tf-membrane { grid-column: 10 / span 3; grid-row: 2; margin: calc(var(--tf-lv) - .25 * 1.5 * (3 * var(--tf-colw) + 2 * var(--tf-gap) + var(--tf-m))) calc(-1 * var(--tf-m)) 0 0; }
.spec-truefall .tf-membrane img { width: 100%; height: auto; }
@media (max-width: 1023px) {
  .spec-truefall .tf-behind { --tf-ww: calc(6 * var(--tf-colw) + 5 * var(--tf-gap)); }
  .spec-truefall .tf-bh-head .tf-h2, .spec-truefall .tf-bh-head .tf-copy { grid-column: 1 / -1; }
  .spec-truefall .tf-bh-head .tf-copy { margin-top: 20px; }
  .spec-truefall .tf-wall { grid-column: 1 / span 6; grid-row: 2; justify-self: start; }
  .spec-truefall .tf-coat-now, .spec-truefall .tf-coats { grid-column: 7 / -1; grid-row: 2; }
  .spec-truefall .tf-membrane { grid-column: 5 / -1; grid-row: 3; margin: 0 calc(-1 * var(--tf-m)) 0 0; }
}
@media (max-width: 700px) {
  .spec-truefall .tf-behind { --tf-cn: 40px; --tf-wh: min(572px, calc((100cqw - 2 * var(--tf-m)) * 1.9067)); }
  .spec-truefall .tf-wall { grid-column: 1 / -1; justify-self: center; }
  .spec-truefall .tf-coat-now, .spec-truefall .tf-coats { grid-column: 1 / -1; grid-row: 3; padding-top: 0; }
  .spec-truefall .tf-coat-say { min-height: 0; }
  .spec-truefall .tf-membrane { grid-column: 2 / -1; grid-row: 4; }
}

/* ---------- 5 · three people ---------- */
.spec-truefall .tf-three { row-gap: 56px; padding-block: calc(var(--tf-band) * 1.1); }
.spec-truefall .tf-three-h { font: 400 clamp(40px, 6.6vw, 104px)/.88 var(--tf-cond); margin: 0; }
.spec-truefall .tf-pair { display: block; position: relative; padding-bottom: .34em; }
.spec-truefall .tf-pair + .tf-pair { margin-top: .5em; }
.spec-truefall .tf-pair-t { display: block; -webkit-text-stroke: .09em var(--tf-chalk); paint-order: stroke fill; }
.spec-truefall .tf-pair-1 { width: calc(9 * var(--tf-colw) + 8 * var(--tf-gap)); }
.spec-truefall .tf-pair-2 { margin-left: calc(3 * (var(--tf-colw) + var(--tf-gap))); width: calc(8 * var(--tf-colw) + 7 * var(--tf-gap)); }
.spec-truefall .tf-pair-3 { margin-left: calc(6 * (var(--tf-colw) + var(--tf-gap))); width: calc(6 * var(--tf-colw) + 5 * var(--tf-gap)); }
.spec-truefall .tf-sx { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.spec-truefall .tf-sx .tf-sl { position: absolute; left: -.2em; right: -.3em; bottom: .12em; top: auto; height: 1.5px; transform-origin: 0 50%; background: var(--tf-jade); box-shadow: 0 0 6px rgb(0 188 152 / .4); opacity: .9; }
.spec-truefall .tf-sx .tf-sp { position: absolute; left: .045em; top: -.25em; bottom: -.05em; width: 1.5px; background: var(--tf-jade); box-shadow: 0 0 6px rgb(0 188 152 / .4); opacity: .9; transform-origin: 50% 0; }
.spec-truefall .tf-sx .tf-sf { position: absolute; right: -.3em; bottom: calc(.12em + 8px); display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-weight: 400; line-height: 1; }
.spec-truefall .tf-sx .tf-far-n { font: 300 clamp(18px, 1.5vw, 22px)/1 var(--tf-cond); }
.spec-truefall .tf-sx .tf-far-w { font: 400 12.5px/1 var(--tf-text); color: var(--tf-ink-2); }
.spec-truefall .tf-three > .tf-copy { grid-column: 7 / span 5; font-size: clamp(17px, 1.3vw, 20px); }
@media (max-width: 1023px) {
  .spec-truefall .tf-pair-1, .spec-truefall .tf-pair-2, .spec-truefall .tf-pair-3 { width: auto; }
  .spec-truefall .tf-pair-2 { margin-left: calc(2 * (var(--tf-colw) + var(--tf-gap))); }
  .spec-truefall .tf-pair-3 { margin-left: calc(4 * (var(--tf-colw) + var(--tf-gap))); }
  .spec-truefall .tf-three > .tf-copy { grid-column: 5 / -1; }
}
@media (max-width: 700px) {
  .spec-truefall .tf-pair-2 { margin-left: 8vw; } .spec-truefall .tf-pair-3 { margin-left: 16vw; }
  .spec-truefall .tf-three > .tf-copy { grid-column: 1 / -1; }
  .spec-truefall .tf-sx .tf-sf { right: 0; }
}

/* ---------- 6 · water: the drain, full bleed ---------- */
.spec-truefall .tf-water { display: block; padding: 0; }
.spec-truefall .tf-drain { margin: 0; position: relative; }
.spec-truefall .tf-drain img { width: 100%; height: max(92svh, 760px); object-fit: cover; object-position: 50% 50%; }
.spec-truefall .tf-drain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 22% 26%, rgb(236 235 230 / .42), rgb(236 235 230 / 0) 72%); }
.spec-truefall .tf-water-t { position: absolute; left: var(--tf-m); top: 72px; width: calc(8 * var(--tf-colw) + 7 * var(--tf-gap)); --tf-ks: rgb(214 211 204 / .9); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tf-gap); align-items: start; }
.spec-truefall .tf-water-t .tf-h2 { grid-column: 1 / -1; }
.spec-truefall .tf-water-t .tf-copy:nth-of-type(3) { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; }
.spec-truefall .tf-water-t .tf-h2 { margin-bottom: 24px; }
.spec-truefall .tf-water-t .tf-copy { font-size: clamp(16px, 1.1vw, 18px); max-width: 56ch; }
@media (max-width: 1180px) {
  .spec-truefall .tf-water { display: flex; flex-direction: column-reverse; }
  .spec-truefall .tf-water-t { position: relative; left: auto; top: auto; width: auto; padding: var(--tf-band) var(--tf-m) 48px; --tf-ks: var(--tf-chalk); display: block; }
  .spec-truefall .tf-water-t .tf-copy:nth-of-type(3) { margin-top: 14px; }
  .spec-truefall .tf-water-t .tf-copy { max-width: 60ch; }
  .spec-truefall .tf-drain img { height: auto; aspect-ratio: 16 / 9; }
  .spec-truefall .tf-drain::after { display: none; }
}
@media (max-width: 700px) { .spec-truefall .tf-drain img { aspect-ratio: 4 / 5; } }

/* ---------- 7 · the glass, into its channel ---------- */
.spec-truefall .tf-glassb { padding-bottom: calc(var(--tf-band) * .6); }
.spec-truefall .tf-gfig { grid-column: 1 / span 6; grid-row: 1; margin: 0; }
.spec-truefall .tf-gsvg { display: block; width: 100%; height: auto; max-height: 120svh; overflow: visible; }
.spec-truefall .tf-gsvg .tf-g-l { font: 400 15px var(--tf-text); fill: var(--tf-ink); }
.spec-truefall .tf-gfig figcaption { margin-top: 12px; font-size: 14px; color: var(--tf-ink-2); }
.spec-truefall .tf-glass-t { grid-column: 8 / span 5; grid-row: 1; position: sticky; top: calc(var(--bar-h, 40px) + var(--tf-nav) + 48px); padding-top: 10svh; }
.spec-truefall .tf-glass-t .tf-h2 { margin-bottom: 28px; }
.spec-truefall .tf-g-bead { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (max-width: 1023px) {
  .spec-truefall .tf-gfig { grid-column: 1 / span 7; }
  .spec-truefall .tf-glass-t { grid-column: 8 / -1; padding-top: 4svh; }
}
@media (max-width: 700px) {
  .spec-truefall .tf-gfig { grid-column: 1 / -1; grid-row: 2; }
  .spec-truefall .tf-glass-t { grid-column: 1 / -1; grid-row: 1; position: relative; top: auto; padding: 0 0 32px; }
  .spec-truefall .tf-gsvg .tf-g-l { font-size: 24px; }
}

/* ---------- 8 · where: the suburbs as a course of tiles ---------- */
.spec-truefall .tf-where { row-gap: clamp(40px, 5vw, 64px); }
.spec-truefall .tf-where > .tf-h2 { grid-column: 1 / span 8; }
/* The course is set out like a skirting course: every named tile whole and inside the
   margins, each row offset by a third, and only the cut pieces at the two ends left empty. */
.spec-truefall .tf-course-w {
  --tf-n: 6; --tf-kmax: 1; /* the short last row takes the two-thirds offset */
  --tf-tw: calc(100cqw / (var(--tf-n) + var(--tf-kmax) / 3)); /* the band is the container: 100cqw is the width inside its margins */ --tf-th: calc(var(--tf-tw) * .56);
  margin: 0 calc(-1 * var(--tf-m)); overflow: hidden; position: relative;
}
.spec-truefall .tf-course { display: grid; grid-template-columns: repeat(var(--tf-n), var(--tf-tw)); grid-auto-rows: var(--tf-th); border-top: 1px solid var(--tf-steel); padding-left: var(--tf-m); }
.spec-truefall .tf-course li {
  --k: 0; position: relative; display: flex; align-items: flex-end; padding: 0 .3em .42em .45em;
  font: 800 min(38px, calc(var(--tf-tw) * .19))/.95 var(--tf-cond); letter-spacing: -.005em; text-wrap: balance;
  border-right: 1px solid var(--tf-steel); border-bottom: 1px solid var(--tf-steel);
  transform: translateX(calc(var(--tf-tw) * var(--k) / 3));
}
.spec-truefall .tf-course li:nth-child(even) { font-weight: 300; }
/* the empty cut pieces: joints drawn every tile width out to the edge of the page */
.spec-truefall .tf-course li::before, .spec-truefall .tf-course li::after {
  content: ""; position: absolute; top: 0; bottom: -1px; width: calc(var(--tf-tw) * 3);
  border-bottom: 1px solid var(--tf-steel); display: none;
}
.spec-truefall .tf-course li::before { right: 100%; background: repeating-linear-gradient(to left, var(--tf-steel) 0 1px, transparent 1px var(--tf-tw)); }
.spec-truefall .tf-course li::after { left: calc(100% + 1px); background: repeating-linear-gradient(to right, transparent 0 calc(var(--tf-tw) - 1px), var(--tf-steel) 0 var(--tf-tw)); }
.spec-truefall .tf-course li:last-child::after { display: block; }
/* six to a row: 6 · 6 · 4 */
.spec-truefall .tf-course li:nth-child(6n + 1)::before, .spec-truefall .tf-course li:nth-child(6n)::after { display: block; }
.spec-truefall .tf-course li:nth-child(n + 7) { --k: 1; }
.spec-truefall .tf-course li:nth-child(n + 13) { --k: 2; }
.spec-truefall .tf-course-base { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.spec-truefall .tf-where > .tf-far { top: calc(var(--tf-dy) + 10px); transform: none; }
.spec-truefall .tf-where > .tf-copy { grid-column: 1 / span 6; }
/* four to a row: 4 · 4 · 4 · 4 */
@media (max-width: 1180px) {
  .spec-truefall .tf-course-w { --tf-n: 4; --tf-kmax: 2; }
  .spec-truefall .tf-course li:nth-child(n)::before, .spec-truefall .tf-course li:nth-child(n)::after { display: none; }
  .spec-truefall .tf-course li:nth-child(4n + 1)::before, .spec-truefall .tf-course li:nth-child(4n)::after { display: block; }
  .spec-truefall .tf-course li:nth-child(n + 5) { --k: 1; }
  .spec-truefall .tf-course li:nth-child(n + 9) { --k: 2; }
  .spec-truefall .tf-course li:nth-child(n + 13) { --k: 0; }
}
/* three to a row on a phone: 3 · 3 · 3 · 3 · 3 · 1 */
@media (max-width: 700px) {
  .spec-truefall .tf-course-w { --tf-n: 3; --tf-th: calc(var(--tf-tw) * .5); }
  .spec-truefall .tf-course li { font-size: min(38px, calc(var(--tf-tw) * .19)); }
  .spec-truefall .tf-course li:nth-child(n)::before, .spec-truefall .tf-course li:nth-child(n)::after { display: none; }
  .spec-truefall .tf-course li:nth-child(3n + 1)::before, .spec-truefall .tf-course li:nth-child(3n)::after, .spec-truefall .tf-course li:last-child::after { display: block; }
  .spec-truefall .tf-course li:nth-child(n + 4) { --k: 1; }
  .spec-truefall .tf-course li:nth-child(n + 7) { --k: 2; }
  .spec-truefall .tf-course li:nth-child(n + 10) { --k: 0; }
  .spec-truefall .tf-course li:nth-child(n + 13) { --k: 1; }
  .spec-truefall .tf-course li:nth-child(n + 16) { --k: 2; }
  .spec-truefall .tf-where > .tf-h2, .spec-truefall .tf-where > .tf-copy { grid-column: 1 / -1; }
}
/* two to a row on a narrow phone: 0 · 1 · 2 thirds, repeating */
@media (max-width: 480px) {
  .spec-truefall .tf-course-w { --tf-n: 2; }
  .spec-truefall .tf-course li:nth-child(n)::before, .spec-truefall .tf-course li:nth-child(n)::after { display: none; }
  .spec-truefall .tf-course li:nth-child(odd)::before, .spec-truefall .tf-course li:nth-child(even)::after { display: block; }
  .spec-truefall .tf-course li:nth-child(n) { --k: 0; }
  .spec-truefall .tf-course li:nth-child(n + 3) { --k: 1; }
  .spec-truefall .tf-course li:nth-child(n + 5) { --k: 2; }
  .spec-truefall .tf-course li:nth-child(n + 7) { --k: 0; }
  .spec-truefall .tf-course li:nth-child(n + 9) { --k: 1; }
  .spec-truefall .tf-course li:nth-child(n + 11) { --k: 2; }
  .spec-truefall .tf-course li:nth-child(n + 13) { --k: 0; }
  .spec-truefall .tf-course li:nth-child(n + 15) { --k: 1; }
}

/* ---------- 9 · questions ---------- */
.spec-truefall .tf-asked > .tf-h2 { grid-column: 1 / span 5; grid-row: 1; }
.spec-truefall .tf-qs { grid-column: 6 / -1; grid-row: 1; border-top: 1px solid var(--tf-hair); }
.spec-truefall .tf-qs details { border-bottom: 1px solid var(--tf-hair); position: relative; }
.spec-truefall .tf-qs summary { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--tf-cond); padding: 20px 0; min-height: 44px; cursor: pointer; list-style: none; display: flex; gap: 18px; align-items: center; }
.spec-truefall .tf-qs summary::-webkit-details-marker { display: none; }
.spec-truefall .tf-qs summary::before { content: ""; flex: none; width: 22px; height: 22px; background: linear-gradient(var(--tf-jade), var(--tf-jade)) center / 100% 2px no-repeat; filter: drop-shadow(0 0 3px rgb(0 188 152 / .5)); }
.spec-truefall .tf-qs details[open] summary::before { background: linear-gradient(var(--tf-jade), var(--tf-jade)) center / 100% 2px no-repeat, linear-gradient(var(--tf-jade), var(--tf-jade)) center / 2px 100% no-repeat; }
.spec-truefall .tf-qs details::after { content: ""; position: absolute; left: 10px; top: 42px; width: 2px; height: 0; background: var(--tf-jade); box-shadow: 0 0 6px rgb(0 188 152 / .45); transition: height .45s cubic-bezier(.3, .6, .2, 1); }
.spec-truefall .tf-qs details[open]::after { height: calc(100% - 58px); }
.spec-truefall .tf-qs summary:hover { text-decoration: underline 1px; text-underline-offset: 6px; }
.spec-truefall .tf-qs details p { padding: 0 0 24px 40px; max-width: 58ch; }
@media (max-width: 1023px) {
  .spec-truefall .tf-asked > .tf-h2 { grid-column: 1 / -1; }
  .spec-truefall .tf-qs { grid-column: 1 / -1; grid-row: 2; margin-top: 40px; }
}

/* ---------- 10 · the form, on the one line that falls ---------- */
.spec-truefall .tf-talk { row-gap: 0; padding-bottom: calc(var(--tf-band) * .8); }
.spec-truefall .tf-talk > .tf-h2 { grid-column: 1 / span 11; }
.spec-truefall .tf-fall { grid-column: 1 / -1; position: relative; height: 72px; margin: 20px calc(-1 * var(--tf-m)) 28px; container-type: inline-size; z-index: 1; }
.spec-truefall .tf-fall .tf-fall-l { position: absolute; left: 0; top: 24px; height: 1.5px; width: calc(100cqw - var(--tf-m) - 24px); rotate: .955deg; transform-origin: 0 50%; }
.spec-truefall .tf-drain-d {
  position: absolute; right: var(--tf-m); width: 48px; height: 10px; top: calc(24px + (100cqw - var(--tf-m) - 24px) * .01667 - 3px);
  background: repeating-linear-gradient(90deg, #0000 0 3px, rgb(19 21 23 / .55) 3px 4px), linear-gradient(#c9cdcb, #A7ACAA 50%, #858a88);
  outline: 1.5px solid var(--tf-ink);
}
.spec-truefall .tf-fall-far { position: absolute; right: calc(var(--tf-m) + 60px); top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1; }
.spec-truefall .tf-fall-far .tf-far-n { font: 300 clamp(18px, 1.5vw, 22px)/1 var(--tf-cond); }
.spec-truefall .tf-fall-far .tf-far-w { font-size: 12.5px; color: var(--tf-ink-2); }
.spec-truefall .tf-bead { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #52D8BA; box-shadow: 0 0 6px 1px rgb(0 188 152 / .8), inset -1px -1px 0 rgb(0 120 97 / .6); opacity: 0; }
.spec-truefall .tf-talk > .tf-plumb { top: 0; bottom: 0; }
.spec-truefall .tf-form { grid-column: 3 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: 30px var(--tf-gap); }
.spec-truefall .tf-f { display: grid; gap: 6px; border: 0; margin: 0; min-width: 0; position: relative; padding-bottom: 2px; }
.spec-truefall .tf-f > span, .spec-truefall .tf-f legend { font: 300 24px/1.1 var(--tf-cond); padding: 0; }
.spec-truefall label.tf-f::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tf-ink); rotate: .955deg; transform-origin: 0 50%; }
.spec-truefall .tf-f-wide, .spec-truefall .tf-f-room, .spec-truefall .tf-f-when, .spec-truefall .tf-send-row { grid-column: 1 / -1; }
.spec-truefall .tf-f :is(input[type="text"], select, textarea) {
  font: inherit; color: inherit; min-height: 44px; padding: 10px 0; background: transparent; border: 0; border-radius: 0; width: 100%;
}
.spec-truefall .tf-f :is(input[type="text"], select, textarea):focus-visible { outline: 2px solid var(--tf-ink); outline-offset: 3px; }
.spec-truefall .tf-f ::placeholder { color: #6b7072; }
.spec-truefall .tf-f select { appearance: none; background: linear-gradient(45deg, #0000 45%, var(--tf-ink) 45% 55%, #0000 55%) right 6px center / 8px 8px no-repeat, linear-gradient(-45deg, #0000 45%, var(--tf-ink) 45% 55%, #0000 55%) right 0 center / 8px 8px no-repeat; padding-right: 24px; }
.spec-truefall .tf-f textarea { resize: vertical; }
.spec-truefall .tf-f-room, .spec-truefall .tf-f-when { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.spec-truefall .tf-f-room legend, .spec-truefall .tf-f-when legend { width: 100%; margin-bottom: 6px; float: left; }
.spec-truefall .tf-f-room label, .spec-truefall .tf-f-when label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 300 23px/1 var(--tf-cond); cursor: pointer; }
.spec-truefall .tf-f input[type="radio"] { width: 18px; height: 18px; accent-color: var(--tf-ink); margin: 0; }
.spec-truefall .tf-f input[type="radio"]:checked + span { font-weight: 800; }
.spec-truefall .tf-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.spec-truefall .tf-send { font: 800 24px/1 var(--tf-cond); color: var(--tf-chalk); background: var(--tf-ink); border: 0; border-radius: 2px; padding: 14px 34px 13px; cursor: pointer; min-height: 48px; }
.spec-truefall .tf-send:hover { background: #24282b; }
.spec-truefall .tf-status { font-size: 15px; }
@media (max-width: 1023px) { .spec-truefall .tf-form { grid-column: 1 / -1; } .spec-truefall .tf-talk > .tf-h2 { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .spec-truefall .tf-form { grid-template-columns: 1fr; }
  .spec-truefall .tf-fall-far { right: var(--tf-m); top: auto; bottom: 0; }
}

/* ---------- foot: the laser switches off ---------- */
.spec-truefall .tf-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 56px var(--tf-m) 64px; font-size: 14px; }
.spec-truefall .tf-foot > .tf-level { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; transform-origin: 0 50%; opacity: .7; }
.spec-truefall .tf-root .tf-foot-links { margin-left: auto; flex-wrap: wrap; gap: 8px 22px; }
.spec-truefall .tf-foot-links a { font-size: 14px; }
@media (max-width: 700px) { .spec-truefall .tf-root .tf-foot-links { margin-left: 0; } }

/* ---------- the laser strikes, band by band (scroll-driven) ---------- */
@keyframes tf-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tf-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tf-press { 0% { transform: translateY(-12px); } 80% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes tf-lower { 0% { transform: translateY(var(--tf-lift, -180px)) scaleX(0); } 45% { transform: translateY(var(--tf-lift, -180px)) scaleX(1); } 60% { transform: translateY(var(--tf-lift, -180px)) scaleX(1); } 100% { transform: translateY(0) scaleX(1); } }
@keyframes tf-off { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes tf-pane { from { transform: translateY(-64px); } to { transform: none; } }
@keyframes tf-bead-d { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tf-node { 0%, 70% { opacity: 0; } 85% { opacity: 1; filter: brightness(1.6); } 100% { opacity: 1; } }

@supports (animation-timeline: view()) {
  .spec-truefall .tf-sda, .spec-truefall .tf-foot { view-timeline: --tf-v block; }
  .spec-truefall .tf-sda :is(.tf-level, .tf-plumb, .tf-node, .tf-far, .tf-settle, .tf-sp, .tf-sf, .tf-g-pane, .tf-g-bead) { animation-timeline: --tf-v; animation-fill-mode: both; animation-timing-function: linear; }
  .spec-truefall .tf-sda .tf-settle { animation-name: tf-press; animation-range: entry 5% cover 24%; }
  .spec-truefall .tf-sda > .tf-far { animation-name: tf-press; animation-range: cover 22% cover 30%; }
  .spec-truefall .tf-sda > .tf-node { animation-name: tf-node; animation-range: entry 20% cover 40%; }
  /* rooms: the level, then the plumb */
  .spec-truefall .tf-rooms > .tf-level { animation-name: tf-x; animation-range: entry 10% cover 28%; }
  .spec-truefall .tf-rooms > .tf-plumb { animation-name: tf-y; animation-range: cover 24% cover 38%; }
  /* behind: the wall is checked for plumb first */
  .spec-truefall .tf-behind > .tf-plumb { animation-name: tf-y; animation-range: entry 5% cover 20%; }
  .spec-truefall .tf-behind > .tf-level { animation-name: tf-x; animation-range: cover 18% cover 32%; }
  /* three: three short crosses, stepping down */
  .spec-truefall .tf-three .tf-sl { animation: tf-x linear both; animation-timeline: --tf-v; }
  .spec-truefall .tf-three .tf-sp { animation-name: tf-y; }
  .spec-truefall .tf-three .tf-sf { animation-name: tf-press; }
  .spec-truefall .tf-pair-1 :is(.tf-sl, .tf-sp) { animation-range: entry 20% cover 30%; }
  .spec-truefall .tf-pair-2 :is(.tf-sl, .tf-sp) { animation-range: cover 22% cover 38%; }
  .spec-truefall .tf-pair-3 :is(.tf-sl, .tf-sp) { animation-range: cover 30% cover 46%; }
  .spec-truefall .tf-pair-1 .tf-sf { animation-range: cover 22% cover 30%; }
  .spec-truefall .tf-pair-2 .tf-sf { animation-range: cover 32% cover 38%; }
  .spec-truefall .tf-pair-3 .tf-sf { animation-range: cover 40% cover 46%; }
  /* water: struck at the niche height, then lowered onto the grate */
  .spec-truefall .tf-water > .tf-level { --tf-lift: calc(-.3 * max(92svh, 760px)); animation-name: tf-lower; animation-range: entry 30% cover 55%; }
  .spec-truefall .tf-water > .tf-plumb { animation-name: tf-y; animation-range: cover 50% cover 60%; }
  /* glass: level, the pane lowered onto it, the bead, the plumb last */
  .spec-truefall .tf-glassb > .tf-level { animation-name: tf-x; animation-range: entry 5% cover 18%; }
  .spec-truefall .tf-glassb .tf-g-pane { animation-name: tf-pane; animation-range: cover 15% cover 30%; }
  .spec-truefall .tf-glassb .tf-g-bead { animation-name: tf-bead-d; animation-range: cover 28% cover 38%; }
  .spec-truefall .tf-glassb > .tf-plumb { animation-name: tf-y; animation-range: cover 34% cover 46%; }
  /* where: the level advances joint by joint */
  .spec-truefall .tf-where > .tf-level { animation-name: tf-x; animation-timing-function: steps(8, jump-end); animation-range: entry 20% cover 40%; }
  .spec-truefall .tf-where > .tf-plumb { animation-name: tf-y; animation-range: cover 36% cover 44%; }
  /* talk: along the fall */
  .spec-truefall .tf-talk .tf-fall-l { animation: tf-x linear both; animation-timeline: --tf-v; animation-range: entry 15% cover 32%; }
  .spec-truefall .tf-talk > .tf-plumb { animation-name: tf-y; animation-range: cover 28% cover 40%; }
  /* the foot: the line goes back into the housing */
  .spec-truefall .tf-foot > .tf-level { animation: tf-off linear both; animation-timeline: --tf-v; animation-range: entry 40% entry 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-truefall .tf-root *, .spec-truefall .tf-root *::before, .spec-truefall .tf-root *::after { transition-duration: 0s !important; animation: none !important; }
  .spec-truefall .tf-foot > .tf-level { transform: scaleX(0); }
}