/* ==========================================================================
   8 — WHO'S IN THE ROOM
   R9i — rebuilt on a supplied reference: media left, content right, the
   figures as a marked stat list, a rule, then a small-caps kicker block.

   THE ICON COLUMN IS THE FIGURE. The reference puts a violet glyph at the
   head of every stat row. Three glyphs would have to mean three things, and
   they do not — §3 already carries the note about three identical marks
   saying less than none. The percentage takes that column instead: it is the
   thing the row is about, it is already violet, and it needs no invention.

   ONE ACCENT, NOT THREE (R9h). §12a permits a comparative set up to three
   accents; §2–§6 spend one and let scale and label separate the members. The
   band carries the proportion at three intensities of that one violet, which
   is the comparison the three hues were making.

   THE BAND SURVIVES THE RELAYOUT and is the reason this section still holds
   its entry in the cell motif. It moved from full-width above the columns to
   the head of the content column, where it introduces the three figures
   rather than standing apart from them.

   HALVES, NOT 5/7. §15's vocabulary is full · halves · thirds · 7-5, and the
   reference sits at roughly 45/55 — halves is the nearest legal reading. It
   also avoids a fourth asymmetric split: §2 is 7/5 and §4 and §9 are both
   5/7 already. Adjacency holds: §7 is a full-bleed centred plate, §9 is 5/7.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE BOX — R9j, by direction: the same container §4 uses.
   --color-surface-panel, square, 48 -> 64px of padding. Nothing about the
   section changes except what sits behind it — and three things had to move
   because of that, all measured against the box rather than the page ground:

     the media placeholder   .ph fills with --color-surface-hover #1A1A1A,
                             which is 1.03:1 here — it would not be there at
                             all. It takes --color-bg-base, 1.17:1, the same
                             hole-punched inversion §4's ✗ rows and §6's
                             avatars both needed.

     the figures             #6146ED on the box is 3.08:1. They are 34px/700
                             so large-text AA applies and 3.0 is the bar —
                             a margin of 0.08, which is not a margin.
                             --color-accent-identity #865BFF is 4.23:1.

     the (Handful) mark      18px/700. ⚠ THE LARGE-TEXT THRESHOLD IS 18.67px
                             BOLD, so 18px bold is NORMAL text and needs 4.5.
                             Neither violet reaches it — #6146ED 3.08, #865BFF
                             4.23. It goes white and rests on weight alone.

   Unchanged and still passing: heading 17.93:1 · body 8.65:1 · kicker 5.19:1.
   -------------------------------------------------------------------------- */
/* R17c — 48 -> 24 at mobile, by direction. §9a sets panel padding at
   48/64/80, and 48 is the value it names for the smallest step — but that
   step was written for a panel sitting inside a 1280 container, not one
   sitting inside a 342px viewport. At 390px the box was spending 96px of its
   width, more than a quarter of the screen, on its own inset.

   --space-md (24) is --gap-card-padding's mobile value, so the box now insets
   exactly as far as every card on the page does at this width. The >=992 rule
   below is untouched: nothing about the desktop panel changes. */
.room__box {
  background-color: var(--color-surface-panel);
  border-radius: var(--radius-control);   /* 0 — square, as §4 */
  padding: var(--space-md);
}

@media (min-width: 992px) {
  .room__box { padding: var(--space-3xl); }
}

/* ⚠⚠ minmax(0, 1fr) IS THE FIX, AND IT IS NOT COSMETIC — this one missing
   value produced all three faults reported at once.

   The track used to be implicit, which makes it `auto`. An `auto` grid track
   is sized to its content's max-content contribution, and .room__media is a
   1000x1000 <img>. A REPLACED ELEMENT WITH A PERCENTAGE WIDTH CONTRIBUTES ITS
   INTRINSIC WIDTH, not the percentage — `inline-size: 100%` does not protect
   the track, because the track is what the percentage would resolve against.
   So the column sized itself to 1000px inside a 342px container:

     · the box ran ~660px past the viewport   -> the horizontal overflow
     · the image drew 1000px wide and mostly off-screen -> "the image is missing"
     · being square, it also drew 1000px TALL -> the scroll depth

   minmax(0, 1fr) caps the track's minimum at 0, so the image can no longer
   size it and the percentage resolves against the container instead. The
   >=992 rule already had this and was never affected — the fault was mobile
   only, which is why it appeared when the page was first looked at on a
   phone. */
.room__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

/* R9q — BOTTOMS ALIGN, by direction. Two changes, and each is needed:

   1. `align-items: start` is gone, so the grid's default `stretch` applies
      and both columns become the row's height.

   2. The image is told to FILL that height. Stretch alone was not enough:
      .ph--square gives it a definite block-size from its inline-size, and a
      definite size beats stretch — the column would grow and the image would
      sit square at the top of it. `block-size: 100%` overrides the ratio at
      this breakpoint only.

   ⚠ THE RATIO STILL MATTERS BELOW 992. In one column .room__media has no row
   to fill and nothing inside it but a label, so a height of 100% would
   resolve against nothing and the block would collapse. .ph--square is what
   holds it open there, which is why the override is scoped rather than
   applied to the base rule. */
/* R13d — .room__media IS AN <img> NOW, and it needs its own base rule.

   ⚠ THIS MUST STAY ABOVE THE MEDIA QUERY. `block-size: auto` here and
   `block-size: 100%` there are the same specificity (0,1,0) — a media query
   adds none — so source order is the only thing deciding which wins. Below
   this rule, `auto` would beat the 992 override at every width and the image
   would stop filling the row.

   block-size: auto IS REQUIRED, not tidiness. `height="1000"` on the <img> is
   a presentational hint, and a hint wins wherever no CSS sets a height — the
   same trap that made the Hero cards 1800px tall. Without this the block
   would render full-width by 1000px on mobile.

   aspect-ratio holds the square below 992, where the old .ph--square did.
   Above 992 both dimensions become definite and the ratio is ignored, which
   is exactly what should happen: the image fills the row the content column
   sets and object-fit crops the difference. */
/* 3:2 on mobile, square from 992. The file is 1:1 and the desktop column
   shows it square; on a phone a square photograph is as tall as the container
   is wide, which is the single largest block of scroll in this section for an
   image that carries no information. 3:2 is the ratio .ph--3-2 already uses
   and takes roughly a third of that height back. object-fit: cover crops
   rather than squashes, and the subject is central. */
.room__media {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* R18a — THE WIPE'S GROUND. Added with .reveal--wipe; the reasoning for the
   wrapper existing at all is in index.html and motion.css.

   ⚠ min-inline-size: 0 IS R13d'S FIX MOVED UP ONE LEVEL, and it is the whole
   reason this rule exists rather than the wrapper being a bare <div>.

   The frame is the grid item now. A grid item's automatic minimum size
   (`min-width: auto`) resolves to its content's min-content contribution, and
   for a replaced element with a percentage inline size that contribution is
   its INTRINSIC width — the same 1000px that produced all three faults above.
   minmax(0, 1fr) protects the TRACK. It does not protect the ITEM inside the
   track, which would simply overflow it instead, and §8 would be back to
   running past the viewport on a phone with the wrapper taking the blame.

   overflow: hidden makes that automatic minimum 0 on its own, so the two
   declarations say the same thing twice. Both stay: the first states the
   intent where a reader will look for it, the second holds if the first is
   ever "tidied" away. */
.room__frame {
  min-inline-size: 0;
  overflow: hidden;
}

@media (min-width: 992px) {
  .room__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl);
  }

  .room__media {
    aspect-ratio: 1;
    block-size: 100%;
  }
}

/* BLOCKER: no photography exists.

   R9n — SQUARE, down from 4/5, by direction: reduce the image and the card
   follows. The image was the taller of the two columns and therefore set the
   box's height on its own; at 1:1 in a half-width column it lands close to
   the content column instead, so the card loses roughly a fifth of its height
   and the two sides come out near level.

   It takes .ph--square rather than a local aspect-ratio — the ratio family
   already has the value, and one fewer bespoke number in a section file.

   It also takes .ph--on-panel now, which is the shared fix for the ground
   problem this section solved locally at R9j. Same result, one rule. */
/* ✅ THE HOOK THIS NOTE DESCRIBED IS NOW IN USE. .room__media carried no rule
   of its own while it was a placeholder — .ph--square set the ratio and
   .ph--on-panel set the ground — and the class was kept "as a hook for the
   photograph's own treatment when it lands". R13d is that treatment; the rule
   lives above the 992 media query, where source order requires it. */

.room__content { display: flex; flex-direction: column; }

/* R9m — THE BAND IS REMOVED, by direction.

   ⚠ IT WAS §8's ENTRY IN THE CELL MOTIF. §14 puts the cell in five sections —
   4, 8, 10, 11, 12 — and states the absences are load-bearing. It is four
   now. §8 also loses the thing that stated the proportion BEFORE the numerals
   did: the figures now announce the split rather than confirming it, which is
   the reverse of how this section was built to read.

   Also gone with it: the section's violet. Nothing here carries violet any
   more, so §8's accent is gold alone (R9l) rather than gold for the figures
   and violet for the structure. That is one accent, which is what §16 asks
   for — the section arrived there by subtraction rather than by decision. */

/* --------------------------------------------------------------------------
   THE STAT LIST — the reference's icon-and-label rows
   -------------------------------------------------------------------------- */
.room__stats {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}

/* R9l — TOP-ALIGNED, not baseline-aligned. By direction.

   `baseline` lined the figure's baseline up with the group name's, which for
   a 34px figure beside 20px type pushes the figure's TOP well above the name
   it heads — that is what the row was doing wrong.

   `start` aligns the two content boxes at their tops instead, and the cap
   heights then land within about a pixel of each other: at line-height 1.08
   the figure's cap top sits ~2.4px into its box and the name's ~1.4px into
   its own. No nudge needed, and nothing to re-tune if either size moves. */
.room__stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-md);
}

/* R17d — THE FIGURE STACKS ABOVE ITS COPY AT ≤767, by direction.

   Side by side, the 4ch numeral column plus its 24px gap took about 100px of
   a 342px viewport, leaving roughly 240px for the text — which is where
   "Individual contributors" started breaking across two lines and the body
   beneath it ran to six. One column gives that width back to the copy.

   ≤767, NOT ≤991. This one is about the width available to the row, and at
   768 the content column is already ~700px wide — the numeral and the text
   sit beside each other there with room to spare. The header and dock rules
   use 992 because their reason is the CTA, not the measure; the boundary
   follows the reason rather than being applied uniformly.

   THE GAP DROPS 24 -> 8 WITH THE AXIS. 24px was the interval between two
   things standing side by side; stacked, the same value reads as a break
   between the number and the label rather than a pair. 8 against the 32
   separating one stat from the next keeps the grouping unambiguous.

   ⚠ THIS BLOCK MUST STAY BELOW THE RULE IT OVERRIDES. Media queries add no
   specificity — the nav CTA spent a revision not hiding for exactly this
   reason, and .room__media and .principles__item before it. */
/* R17l — 767 -> 991, by direction: landscape phones and tablets take the
   portrait-phone layout, not the desktop one. A landscape phone is 667-932px
   wide, which sits in the 768-991 band, so the old boundary left it on the
   desktop composition it is far too narrow for.

   THIS IS NOW THE SAME LINE EVERY OTHER BELOW-DESKTOP RULE USES — the
   logo-only header, the sticky dock, and the panel paddings all break at 992.
   The page has one boundary between "desktop" and "everything else" again
   rather than two. */
@media (max-width: 991px) {
  .room__stat {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }
}

/* H3 is §12a's floor for a display numeral — "never below H3" — and the right
   value here: at H2 or display the figure would outweigh the row it heads.
   Tabular figures so the counter cannot reflow the row while it counts (§18).

   R9l — GOLD, by direction, and it resolves a margin that was too thin. The
   figures were violet, and violet on this box was the tightest pairing in the
   section:

     #6146ED  3.08:1   large-text AA is 3.0 — a margin of 0.08 (R9j)
     #865BFF  4.23:1   +1.23, and still short of normal-text AA
     #BE9D4A  6.92:1   +3.92, and clears NORMAL text as well

   Gold is the value the section can carry at any size, which the violet could
   not. It also matches §4, where gold is already what marks the row that is
   not the answer. */
/* R9o — LOOS, by direction, and this breaks a stated rule with a named
   failure mode. §5: "NUMERALS STAY MUNDIAL. Counters must not reflow while
   counting (§10); that needs tabular figures. Mundial's are confirmed,
   Loos's are not. A display numeral shifting width mid-count is a worse fault
   than a mixed face at one scale."

   These are counters — data-counter="50" runs 0 -> 50 on entry — so that is
   the exact case the rule was written about.

   ⚠ THE FIX IS THE BOX, NOT THE FONT. `font-variant-numeric: tabular-nums`
   is kept and does no harm, but it is a REQUEST: if Loos publishes no tabular
   set the browser ignores it silently and the figures stay proportional. So
   the column is pinned instead — a fixed 4ch inline-size, which is §10's own
   remedy stated in full: "tabular figures, BOX SIZED FOR THE FINAL VALUE".
   With the box fixed, the row cannot move whatever Loos's digit metrics turn
   out to be. 4ch covers three glyphs plus the wider % sign.

   ⚠ IT SPLITS THE PAGE'S NUMERALS. §12's and §13's figures are still Mundial.
   Two faces now carry display numerals, which is the "mixed face at one
   scale" the rule was trading against — worth resolving one way or the other
   before launch rather than leaving §8 as the odd one.

   WEIGHT 700 IS LEGAL HERE. Loos publishes 400 and 700 in this kit and
   nothing between, so bold is a real face rather than a synthesised one. */
.room__figure {
  inline-size: 4ch;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-accent-emphasis-dim);   /* gold #BE9D4A — 6.92:1 */
}

.room__group-name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-heading);
}

.room__group-body {
  margin-block-start: var(--space-2xs);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   THE RULE AND THE KICKER — the reference's "BRANDS EDUCATED" block
   Same 1px --color-border-strong every rule between items on this page uses.
   -------------------------------------------------------------------------- */
.room__rule {
  margin-block-start: var(--space-xl);
  margin-block-end: 0;
  border: 0;
  border-block-start: var(--border-hairline) solid var(--color-border-strong);
}

/* R9q — everything above the rule stays packed at the top; the rule and the
   partners rail take the slack and settle on the floor, which is what puts
   the logos level with the image's bottom edge.

   ⚠ THIS HAS TO SIT BELOW THE BASE RULE, not up with the rest of the ≥992
   block. A media query adds no specificity, so both declarations are (0,1,0)
   and source order decides — declared above, `auto` would have lost to
   --space-xl silently and the rail would simply not have moved. */
@media (min-width: 992px) {
  .room__rule { margin-block-start: auto; }
}

.room__partners { margin-block-start: var(--space-lg); }

.room__kicker {
  margin-block-end: var(--space-sm);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* R9k — .room__partners-figure is gone with the line it marked. The
   "(Handful)" text was replaced by the logo rail; see index.html for what
   that removed. */