/* ==========================================================================
   TWO ROOMS — "THE REACH"   (.rch, index.html)

   Replaces the span (css/span.css, unlinked, kept on disk), which was
   correct and austere: two plates at true relative size with extension
   lines dropping to a dimension rule. It read as an engineering drawing,
   and the client asked for the section staged in real depth instead.

   THE THING DEPTH IS ACTUALLY FOR HERE. The two rooms do not only differ
   in size — they differ in HOW FAR YOU STAND FROM THE PERSON WHO SIGNS.
   At a one-till counter you are at arm's length from the owner. In a
   corporate account you are across a boardroom table from the account
   holder and whoever else they brought. That distance is the real
   difference between the two rooms, so the section is built in actual
   perspective and Z position carries the meaning. This is not depth
   applied to a flat idea; the idea was always spatial.

   THE STANDARD IS NOW SAID, NOT DRAWN. An earlier build carried a flat
   gold rule in screen space behind both rooms — the one thing that
   refused the perspective — captioned "one team, one standard". It was
   removed on the client's look, and the note at THE STANDARD below has
   the full argument: it filled across the section on the scrub and read
   as a progress bar, and it restated the h2 verbatim four seconds after
   the reader had passed it. The contrast it was making is still in the
   section — two rooms, two depths, two sizes, one h2 over them — it is
   just carried in words now.

   AND THE SECTION IS B2B ONLY, WHICH IS THE WHOLE SITE'S RULE. Both
   rooms are businesses: a one-till operator's counter and a corporate
   account's table. The two are not two channels and never were in this
   build — they are two sizes of the same customer, and the copy names
   the person who signs in each ("the owner", "the account holder")
   rather than naming a market.

   THE 3D DISCIPLINE, kept from the threshold and worth restating
   because every rule here is a silent failure if broken:
   · NO filter, opacity, mask, clip or overflow on .rch__stage or
     .rch__room — each one flattens preserve-3d without warning. The
     photograph's brightness lives on the <img>, a leaf; the plate's
     overflow clip is a leaf container with nothing 3D inside it.
   · NO .reveal on the scene or anything in it. .reveal sets opacity and
     a transform, so on a perspective ancestor it would flatten the
     whole scene and fight the stage transform at the same time. The
     scene has its own scroll-driven entrance; only flat type reveals.
   · NO body copy inside the perspective context. Only the numerals
     stand in the scene. Type on an angled, foreshortened plane is
     unreadable at exactly the moment it matters.

   THE SCROLL IS THE APPROACH. One registered number, --rchdraw: the
   stage swings from rotateY(-19deg) square to rotateY(-7deg) and dollies
   forward as the reader arrives, both rooms wipe open in turn, and the
   labels resolve. Unpinned — the lap on about.html keeps the site's only
   pin.

   THE HAND IS THE BEST PART, and it is only possible because the section
   is genuinely 3D: pointing at a room BRINGS IT FORWARD and pushes the
   other back. "We go into this room" is not a caption, it is what the
   pointer does. The clock does the same thing on its own every 5.4s so
   the depth is legible before anyone touches it.

   REST IS THE SETTLED SCENE. --rchdraw's initial value is 1: no JS, a
   dead CDN and reduced motion all render both rooms open and in key and
   every word at full contrast.
   ========================================================================== */

/* the approach, 0 arriving .. 1 settled. Inherited: one scrubbed write on
   the section drives the stage, both rooms, the rule and the labels. */
@property --rchdraw { syntax: "<number>"; inherits: true; initial-value: 1; }

.rch {
  position: relative;
  padding-block: clamp(2.3rem, 1.85rem + 1.9vw, 3.9rem);
  /* the far room is out-set to right:-3% so its PROJECTED edge lands on
     the container, which leaves its LAYOUT box past the viewport — and
     scrollWidth reads the layout box. Worse, it only showed up when
     room B was the live one, because stepping forward scales it up
     again; the first measurement pass had room A live and read clean.
     `clip` and not `hidden` so this never becomes a scroll container,
     and safe because .rch is outside the perspective context. */
  overflow-x: clip;

  /* the three beats, windows on the one number. --rch-rule was the
     fourth and is gone with the standard it drew (see THE STANDARD,
     below); --rch-say keeps its own window and is unaffected. */
  --rch-a:    clamp(0, calc((var(--rchdraw) - 0.02) / 0.26), 1);
  --rch-b:    clamp(0, calc((var(--rchdraw) - 0.16) / 0.30), 1);
  --rch-say:  clamp(0, calc((var(--rchdraw) - 0.66) / 0.34), 1);

  /* the stage's own settle, derived from the approach */
  --rch-turn: calc(-19deg + 12deg * var(--rchdraw));
  --rch-dolly: calc(-150px + 150px * var(--rchdraw));
}

/* --------------------------------------------------------------------------
   THE HEAD
   -------------------------------------------------------------------------- */
.rch__head {
  display: grid;
  gap: 0.3rem;
}
.rch__h {
  margin: 0;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.16;
  text-wrap: balance;
  max-width: 30ch;
}
.rch__h em { color: var(--gold-light); font-style: italic; }

/* --------------------------------------------------------------------------
   THE SCENE — one perspective context, one stage, and nothing on either
   that could flatten it.
   -------------------------------------------------------------------------- */
/* perspective-origin 50% and not 46%: an off-centre origin shifts the
   whole projected stage sideways (measured 29px right, which pushed the
   near room 41px outside the container's left edge and the stage 28px
   past its right). In a section where everything else on the page ranges
   to the container, that reads as a mistake rather than as a bleed. */
.rch__scene {
  position: relative;
  margin-top: clamp(1.3rem, 1rem + 1.1vw, 2rem);
  height: clamp(268px, 14rem + 8vw, 350px);
  perspective: 1500px;
  perspective-origin: 50% 42%;
}
.rch__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
  transform: rotateY(var(--rch-turn)) translate3d(0, 0, var(--rch-dolly));
}

/* ----------------------------------------------------------------------
   A ROOM — a panel standing in the space. Near and small, or far and
   large: the pair resolves to comparable apparent sizes on screen, which
   is the point. Different rooms, same standing.
   ---------------------------------------------------------------------- */
.rch__room {
  position: absolute;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, calc(var(--z) + var(--push, 0px)));
  transition: transform 0.55s var(--ease-out);
  /* the room's own share of the clock */
  --rchlit: 0;
  --push: 0px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* THE SIZE CONTRAST HAS TO BE BUILT AGAINST THE PERSPECTIVE, not on top
   of it. Near-and-small plus far-and-large pull toward each other on
   screen: the first pass (34% at +90, 56% at -170) resolved to 416 and
   610px, a ratio of 1.47 where the flat version had 1.89 — close enough
   in size to read as two ordinary photographs rather than as two rooms
   at two scales. Pushing the near room further forward AND smaller in
   world space (20% at +160, 52% at -200) restores it to ~2.0 while
   deepening the Z separation the whole concept rests on.

   Room A also sits at left 7% and not 3%: a near room is scaled UP by
   the perspective divide about the origin, so a world position on the
   container's edge projects OUTSIDE it — measured 8px off the left of
   the viewport, clipping the small room's edge. */
.rch__room--a { left: 7%;  bottom: 6%; width: 20%; --z: 160px; }
/* and room B sits at right: -3%, the mirror of the same effect: a FAR
   room is scaled DOWN, so a world position on the container's edge
   projects inside it — measured 46px of inset against room A's 2px,
   which reads as the composition drifting left rather than as depth. */
.rch__room--b { right: -3%; top: 0;    width: 52%; --z: -200px; }

/* live: the room steps toward the reader. The clock does this on its own
   and the hand does it on demand — one property, so they cannot fight. */
.rch.is-a .rch__room--a,
.rch.is-b .rch__room--b { --rchlit: 1; --push: 54px; }
.rch.is-a .rch__room--b,
.rch.is-b .rch__room--a { --push: -30px; }
.rch__room:hover,
.rch__room:focus-visible { --rchlit: 1; --push: 74px; }

/* the plate is a LEAF: overflow lives here and nowhere higher, because
   overflow on any 3D ancestor silently flattens the whole scene */
.rch__plate {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-gold);
  clip-path: inset(0 calc((1 - var(--open, 1)) * 100%) 0 0);
}
.rch__room--a .rch__plate { --open: var(--rch-a); }
.rch__room--b .rch__plate { --open: var(--rch-b); }
.rch__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --kb is the per-image grade folded into ONE brightness so the live
     lift multiplies through it. Sampled: retail 81.4, meeting 56.0 — a
     25-point spread. Fully corrected (0.77 / 1.12) because these two
     exist to be compared: both land at ~63 live and ~45 at rest. */
  filter: saturate(0.82) contrast(1.03)
          brightness(calc((0.7 + 0.3 * var(--rchlit)) * var(--kb, 1)));
  transition: filter 0.5s var(--ease-out);
}

/* THE EDGE — a real face rotated into the third dimension, so a room
   reads as a panel standing in space rather than as a scaled picture.
   This is what sells the depth; the rotation alone barely foreshortens. */
.rch__edge {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 16px;
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold-shadow) calc(var(--rchlit) * 60%), var(--surface-2)),
    var(--obsidian));
  transition: background 0.5s var(--ease-out);
}

/* the numeral stands WITH the room — the only thing besides the
   photographs allowed inside the perspective context */
.rch__no {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding-bottom: 0.5rem;
  font-size: clamp(0.7rem, 0.62rem + 0.3vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: color-mix(in srgb, var(--gold-light) calc(var(--rchlit) * 100%), var(--gold));
  opacity: clamp(0, calc(var(--open, 1) * 2 - 0.5), 1);
  transition: color 0.4s var(--ease-out);
}

/* --------------------------------------------------------------------------
   THE STANDARD — flat, screen space, a SIBLING of the scene and never a
   descendant. It is the one thing in the section that does not
   foreshorten, does not angle and does not move with the stage: the
   rooms are at two depths and two sizes, and the line under them is
   identical for both.
   -------------------------------------------------------------------------- */
   REMOVED, ON THE CLIENT'S LOOK. `.rch__level` was a 2px gold rule that
   ran the full width of the section BEHIND both photographs and drew
   itself left to right on the scrub, with "ONE TEAM, ONE STANDARD" set
   under it. The reasoning above still holds in the abstract — one flat
   thing refusing the perspective is a real argument — but two faults
   beat it in practice:

   IT READ AS A PROGRESS BAR. A gold rule that starts at zero width and
   fills across the full measure of the section as you scroll is, to
   anybody who has ever used a website, a loading indicator. That is the
   standing instruction on this site — no bar of any kind, nothing that
   fills or measures — and this was the one place it had been broken.

   AND IT SAID THE HEADLINE TWICE. "One team, one standard" sat 63% down
   a section whose h2 already reads "One standard, whatever the
   business." The rule was a graphic restatement of a line the reader
   had passed four seconds earlier.

   NOTHING ELSE MOVED WITH IT. The rule was absolutely positioned and a
   sibling of the stage, so its removal changes no layout, no motion and
   no image treatment: the stage still swings and dollies, both rooms
   still wipe open, the hand still brings a room forward, and the labels
   still resolve on their own window. The argument it carried is now
   carried by the h2 and by the foot line, in words.

   The markup went with it — there is no `.rch__level` element in
   index.html any more, and `--rch-rule` is gone from the beats above. */

/* --------------------------------------------------------------------------
   THE LABELS — flat, on stone, ranged to the container edges under the
   room each belongs to. Two words and a name apiece; the scene has
   already said which is which.
   -------------------------------------------------------------------------- */
.rch__labels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 0.7rem + 1.6vw, 2.4rem);
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem);
}
.rch__label {
  min-width: 0;
  opacity: clamp(0, calc(var(--rch-say) * 1.8), 1);
  transform: translate3d(0, calc((1 - var(--rch-say)) * 8px), 0);
}
.rch__label--b { justify-self: end; text-align: right; }
.rch__name {
  display: block;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.28;
  color: color-mix(in srgb, var(--white) calc(var(--rchlit) * 100%), var(--ink));
  transition: color 0.4s var(--ease-out);
}
.rch.is-a .rch__label--a,
.rch.is-b .rch__label--b { --rchlit: 1; }
/* `.rch__who` — the second line under each name — is DELETED, not left
   here unused. CONTENT-REWRITE.md has exactly one sentence about these two
   rooms and it is now spent once across the h2 and the two names; there is
   no second fact to put on a second line, and the version that was here
   ("The owner." / "The account holder.") is now the name itself. */

/* --------------------------------------------------------------------------
   THE ONE LINE, STANDING IN THE SCENE.

   It used to sit in the foot under the labels. It is here now because the
   removed rule left ~350px of empty ground between the near, small room
   and the far, large one, and something true has to stand in it or the
   gap reads as a layout fault rather than as air.

   IT TAKES THE RULE'S EXACT STRUCTURAL SLOT: a sibling of .rch__stage
   inside the perspective element, never a descendant, and with NO
   transform of its own — so `perspective` has nothing to act on and the
   type stays dead flat and fully legible while everything around it is
   foreshortened. That is the same "one flat thing" contrast the rule was
   making, now made by the sentence that makes the section B2B.

   Ranged into the upper-left void: room A's projected top is ~176px and
   room B's projected left is ~626px at 1280, so at 3 lines this clears
   both. The measure is capped against BOTH a character count and a
   percentage, because the rooms' projected boxes move with the width.
   -------------------------------------------------------------------------- */
.rch__say {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  margin: 0;
  /* The measure is capped against BOTH a character count and a percentage
     because the rooms' PROJECTED boxes move with the width: room A's top
     sits at ~176px and room B's left at ~626px at 1280, and this line has
     to clear both at every width it is absolute at. 30ch/46% lands it at
     four lines, which is the most that fits above room A. */
  max-width: min(30ch, 46%);
  font-size: clamp(0.98rem, 0.9rem + 0.36vw, 1.16rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--vein);
  text-wrap: pretty;
  opacity: clamp(0, calc(var(--rch-say) * 1.8), 1);
}
/* "You get" is the source file's own label for the deliverables that
   follow it; it is set as one rather than dropped, so the line reads as an
   answer and not as a list of nouns. */
.rch__say b {
  font-weight: 600;
  color: var(--gold-light);
}

/* the way out */
.rch__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: clamp(0.8rem, 0.5rem + 1.2vw, 2rem);
  margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
}
.rch__room:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 8px;
}

/* --------------------------------------------------------------------------
   THE TURN — under 1000 the perspective is dropped entirely rather than
   squeezed. Two panels in depth need width to be read as depth at all;
   below that they overlap into a muddle. The rooms stack flat, keeping
   their size difference and their live key, and the standard closes the
   column exactly as it does on the desk.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* The scene becomes a plain column, and anything absolutely positioned
     in it MUST come out of that with it. This is the lesson the removed
     rule taught: left at top:63% of a now-auto-height scene it landed
     inside room B's photograph — a gold line and its caption sitting on
     top of a picture of people, which is the one thing this project never
     does. .rch__say inherits the warning and the fix: static, first in
     the column, full measure. */
  .rch__scene {
    height: auto;
    perspective: none;
    display: flex;
    flex-direction: column;
  }
  .rch__say {
    order: 0;
    position: static;
    max-width: none;
    margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  }
  .rch__stage {
    order: 1;
    position: static;
    transform: none;
    transform-style: flat;
    display: flex;
    flex-direction: column;
    row-gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  }
  .rch__room {
    position: static;
    transform: none;
    width: 100%;
  }
  .rch__room--a { width: 70%; max-width: 22rem; }
  .rch__room--b { width: 100%; }
  .rch__room:hover,
  .rch__room:focus-visible { --push: 0px; }
  .rch__edge { display: none; }
  .rch__no {
    position: static;
    display: block;
    padding: 0 0 0.4rem;
  }
  .rch__labels {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.7rem, 0.6rem + 0.4vw, 1rem);
  }
  .rch__label--b { justify-self: start; text-align: left; }
  /* every other thing in the column is left-ranged here, so the way out
     is too — right-aligning it made sense only while it was the second
     half of a space-between row. */
  .rch__foot { justify-content: flex-start; }
}

/* nothing approaches on its own; every state survives at its finished value */
@media (prefers-reduced-motion: reduce) {
  .rch__room,
  .rch__plate img,
  .rch__edge,
  .rch__no,
  .rch__name { transition: none; }
}