/* ==========================================================================
   9 — WHY NOW? WHY HERE?
   R16k — REBUILT to a supplied reference: "redo this section exactly in the
   attached layout and style." Argument left, photo mosaic right.

   WHAT IT REPLACED: the R9r bento board — a 4x2 grid of photo cards with two
   captions set over the pictures. Every one of those rules is gone; the five
   photographs are the same five files.

   ⚠ THREE THINGS IN THIS SECTION NOW BREAK STATED RULES, all by direction and
   all recorded in design-rules R16k rather than absorbed:
     1. ✅ CLOSED AT R16n. The tiles were rounded to 12px, a fourth page
        radius against §14's three; they are square again and the token is
        deleted.
     2. ✅ CLOSED AT R16l. The eyebrow was unframed, which made it the page's
        second where §10a permits one; it now takes the same --emphasis
        --filled variant §5 and §6 use.
     3. Four copy strings are placeholders because they are not in the
        content document. R16o removed a fifth and sixth with the list item
        that carried them: it was the only one of the three whose title AND
        body were both invented by the reference, so nothing of the content
        document was lost with it. TWO ITEMS REMAIN and each carries a real
        document sentence. The reference supplies them; direction was document
        copy only, so they are marked rather than transcribed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE SPLIT
   5/7 asymmetric, which §4 lists as one of the four permitted layouts. The
   argument gets the narrower half and the pictures the wider one, matching
   the reference's proportion (roughly 530 against 1070 of a 1774 frame).

   ⚠ §15 ADJACENCY IS INTACT AND WAS CHECKED, not assumed: built 8 is
   proportional-width columns, this is a 5/7 split with a mosaic, built 10 is
   a sticky stack. The Hero is also two columns but is seven sections away.
   -------------------------------------------------------------------------- */
.venue__inner {
  display: grid;
  gap: var(--gap-heading-to-content);
}

@media (min-width: 992px) {
  .venue__inner {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: var(--space-3xl);
  }
}

/* --------------------------------------------------------------------------
   THE ARGUMENT
   -------------------------------------------------------------------------- */
.venue__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* R16l — A WRAPPER AND NOTHING ELSE, exactly as .principles__eyebrow and
   .members__eyebrow are. The .eyebrow component supplies the frame, the type,
   the case and the tracking; display: flex is only here so the box shrinks to
   the label instead of stretching across the column.

   R16k's own type rules are gone with the bare treatment: size, weight,
   tracking, case and the violet colour were all restating what the component
   already sets, and a second copy of a component's type is how a variant
   starts drifting from it. */
.venue__eyebrow { display: flex; }

/* --font-size-h1, not --font-size-display. The reference's headline is the
   largest thing in the section but §7's plate title is the page's peak and
   sets at h1; a display line here would outrank the Summit announcement. */
.venue__title {
  margin-block-start: var(--gap-title-group);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-heading);
  text-wrap: balance;
}

.venue__points {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--gap-heading-to-content);
  padding: 0;
  list-style: none;
}

/* R16r — the disc-to-text gap is --space-md (24), up from 16. The next value
   on §4's scale; there is nothing between them. R16s then doubled the
   vertical interval, so the horizontal one is no longer competing with it. */
.venue__point {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   THE SEPARATOR — R16s, by direction

   TWO CHANGES IN ONE: the interval between the items doubles from 32 to 64,
   and a hairline sits in the middle of it.

   32 OF PADDING ON TOP OF THE LIST'S 32 GAP, rather than one value of 64.
   That is what puts the line exactly halfway: the gap is above it and the
   padding below, both --space-lg, so the rule is centred in the interval
   instead of hanging off one side of it. One value of 64 would have put the
   line hard against whichever edge carried it.

   THE PADDING IS ON THE <li>, NOT ON THE TEXT, and that distinction is
   load-bearing. .venue__point aligns its two children to flex-start, so
   padding on the item moves the disc and the sentence down TOGETHER. Padding
   on .venue__point-body would have moved the text alone and left the disc
   floating 32px above its own line.

   THE LINE IS A PSEUDO-ELEMENT, NOT A BORDER, because a border-block-start
   spans the item's whole width and would run left underneath the disc. This
   one starts at the text's left edge — inset by the disc's width plus the
   row gap, both read from the same tokens the layout uses, so it cannot
   drift if either changes — and runs to the column's right edge.

   --color-border-strong, white at 0.20: the value §3's separators, §5's card
   borders and §11's lattice all settled on. --color-border-default at 0.10 is
   1.3:1 on black and would not be there at all.
   -------------------------------------------------------------------------- */
.venue__point + .venue__point {
  padding-block-start: var(--space-lg);
}

.venue__point + .venue__point::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  /* R16w — the inset follows the MARK's width, not the disc's. It was
     --icon-box-size (52) + the row gap; the disc is gone and the glyph is
     --icon-size-feature (24), so the line starts 48px in rather than 76 and
     still lands exactly on the text's left edge. Both terms are the same
     tokens the row uses. */
  inset-inline-start: calc(var(--icon-size-feature) + var(--space-md));
  inset-inline-end: 0;
  block-size: var(--border-hairline);
  background-color: var(--color-border-strong);
}

/* --------------------------------------------------------------------------
   THE MARK — R16w

   THE DISC IS REMOVED, by direction. It was a 52px circle in
   --color-surface-panel with a violet hairline ring; the glyph now sits bare
   against the section ground.

   ⚠ --icon-box-size IS ORPHANED AGAIN. R15q orphaned it when §5's disc went,
   R16k gave it a consumer here two revisions later, and this takes it away
   again. It stays declared in tokens.css on the same stated ground as before.

   ⚠ SO IS THE 50% RADIUS, in this section. §14 lists --radius-avatar's
   consumers as "shapes with no corners to square"; §9 is no longer one of
   them.

   OPTICAL ALIGNMENT, NOT flex-start. The disc was 52px against a 26px line
   and sat naturally at the top. A 24px glyph beside a 33.8px line box would
   hang above the capline instead, so it is nudged down by half the
   difference. The calc reads the same three tokens the type does — h4 size,
   lead leading, feature icon size — so it cannot drift if any of them moves.

   ⚠ 1em WOULD HAVE BEEN WRONG HERE, which is why the size token is named
   instead. .plate__fact-icon uses `1em * --line-height-body` and that works
   there because the icon inherits the list's own font-size. This span
   inherits 18px body copy from the <ul> while the SENTENCE beside it is 26px,
   so 1em would resolve against the wrong number entirely.
   -------------------------------------------------------------------------- */
/* R16v — WHITE. --color-text-heading, 21:1 on the section ground.

   ⚠ THE COLOUR HAS MOVED THREE TIMES and the measurements are kept so the
   next change does not need re-deriving. On black, with the disc gone:

     --color-text-heading      #FFFFFF   21.0:1
     --color-accent-identity   #865BFF    4.95:1   (R16k, and R16z undone)
     --color-accent-identity-deep #6146ED  3.61:1

   All three clear the 3:1 a non-text mark needs. The prohibition attached to
   #865BFF is about WHITE TYPE ON IT, not the colour itself on black — it is
   available here whenever it is wanted. */
.venue__mark {
  flex: none;
  margin-block-start: calc(
    (var(--font-size-h4) * var(--line-height-lead) - var(--icon-size-feature)) / 2
  );
  color: var(--color-text-heading);
}

.venue__glyph {
  inline-size: var(--icon-size-feature);
  block-size: var(--icon-size-feature);
}

.venue__point-body {
  min-inline-size: 0;
  max-inline-size: var(--measure-prose);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-heading);        /* 21:1 on black */
}

/* THE VENUE NAME — gold, by direction (R16q). <em> rather than a class
   because it IS emphasis, and the italic is turned off because the face's
   italic is not part of this system.

   --color-accent-emphasis-dim #BE9D4A, 8.1:1 on black — §3's inline-emphasis
   role in its dimmer of two tones. The other is --color-accent-emphasis
   #F2D98A sand at 15.1:1.

   ⚠⚠ THE NAME IN CLAUDE.md IS NOT THE NAME IN tokens.css. R16k wrote
   `var(--color-accent-text-01)`, which is the name §3's colour table uses.
   tokens.css does not have it: it declares --color-accent-emphasis and
   --color-accent-emphasis-dim, and has since the foundation build. An
   undefined custom property in `color` falls back to INHERIT, so this rule
   was dead and the venue name rendered the same white as the sentence around
   it — no error anywhere, nothing to see. CHECK tokens.css, NOT THE TABLE,
   before writing either of these two colours again.

   R16x — WHITE ON A VIOLET BLOCK, UNDONE AT R16y by direction. What it
   established is worth keeping even though the code is gone: of the page's
   two violets, only --color-accent-identity-deep #6146ED can carry white
   (5.82:1). --color-accent-identity #865BFF is 4.24:1 and §19 names that
   pairing in the prohibited list — and it is the one that reads as "purple"
   at a glance, so it is the one that would be reached for. */
.venue__point-body em {
  font-style: normal;
  color: var(--color-accent-emphasis-dim);
}

/* --------------------------------------------------------------------------
   THE MOSAIC

   TWELVE COLUMNS AND THREE ROWS, placed explicitly. The row proportions are
   the reference's own, measured off it: 315 / 235 / 250 against a board 1072
   wide and 810 tall. They are written as fr so they hold at every width, and
   the board's aspect-ratio is what gives the fr rows something to resolve
   against — without it the rows would collapse to their content and the tall
   tile would stop being tall.

   ⚠ BELOW 992 THE PLACEMENT IS THROWN AWAY, deliberately. A 12-column mosaic
   at 390px would give each tile 30px of width. The board becomes two columns
   of 3:2 tiles in source order, which is a different composition rather than
   a squeezed one.
   -------------------------------------------------------------------------- */
.venue__board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}

.venue__tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 3 / 2;
  background-color: var(--color-surface-card);
  /* ✅ R16n — SQUARE, by direction, and this closes R16k's largest break.
     R16k had rounded these to 12px to match the reference, which added a
     FOURTH radius to a system §14 caps at three and undid R6x's "if it can be
     clicked, it is square" for a plain rounded rectangle. --radius-tile is
     deleted from tokens.css rather than left as an orphan: an illegal value
     with a name is an invitation to reuse it.

     §9's photographs now match every other photograph on the page — the
     Hero's cards, §5's cards, §6's thumbnails, §10's portraits. The
     inconsistency R16k recorded as "the cost" is gone.

     THE CLAIM TILE IS SQUARED TOO. It is not an image, so the direction did
     not name it — but it sits in the same grid as five square photographs and
     a single rounded violet panel among them would read as a mistake rather
     than as a distinction. */
  border-radius: var(--radius-control);   /* 0 — R6x */
}

/* .media__img in the markup carries the hover zoom and the transition; these
   two are what make the picture fill a tile it does not share a ratio with.
   Every file here is far larger than its tile, so cover only ever crops. */
.venue__tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Centre is right for five of the six tiles — their subjects are central
     and the crop takes the frame's middle. Tile A is the exception below. */
  object-position: center;
}

/* R17q — TILE A IS CROPPED TO HER FACE, by direction.

   A.jpg is 4000x6000, a 2:3 portrait, and every tile it lands in is wider
   than it is tall — so `cover` scales by width and throws away the top and
   bottom. Her face sits at about 27% down the frame, and the default centre
   crop shows 25%–75% at desktop and 28%–72% at mobile: she is right on the
   boundary at desktop and outside it at mobile, which is where the top of her
   head was going.

   object-position Y is not the same number as "27% down the picture" — it
   positions the SCALED image inside the box, so the value that lands her face
   in the middle of the crop works out at roughly 4% at desktop and 8% at
   mobile. 10% is one value close to both: it sits her a little above centre
   in the tile at every width, with the crop taking background above her head
   rather than the head itself.

   ⚠ RE-DERIVE THIS IF THE TILE'S SPAN OR THE ROW HEIGHTS CHANGE. The number
   is a function of the tile's aspect ratio against the file's, not of the
   photograph alone. */
.venue__tile--a img { object-position: center 10%; }

/* The violet panel. No photograph — see the markup note. */
/* R17o — align-items: stretch, not flex-end, and 12px of padding.

   THE PARAGRAPH HAS TO FILL THE TILE for its two lines to be pushed apart:
   flex-end sized it to its content and parked it at the bottom, which leaves
   `justify-content` on the paragraph nothing to distribute. Stretched, it is
   as tall as the tile and can hold one line at the top and one at the foot.

   --space-xs (12) rather than --gap-card-padding (32/24), by direction. It is
   also what buys the width the claim needs: 20px back on each side is 40px of
   text room, and the word needed about 15 of them. */
.venue__tile--claim {
  display: flex;
  align-items: stretch;
  padding: var(--space-xs);
  background-color: var(--color-accent-identity-deep);
}

/* R17m — one clause per line, and the numeral keeps the tile's own colour.

   ⚠ .t-numeral SETS --color-text-heading FOR A DARK GROUND. That is white,
   which is right on black and wrong to leave unexamined on violet — here it
   happens to be the colour the claim already uses, so `inherit` changes
   nothing today and stops the utility deciding this tile's colour if either
   value ever moves. §7 overrides it the same way for the same reason.

   THE TILE STAYS UPPERCASE. The copy arrived in sentence case; the tile's
   type is uppercase chrome and the reference set this line that way too, so
   it renders "125 LEADERS. ONE CONVERSATION." Say if sentence case was
   meant — it is one declaration. */
/* Each group is a block, and so is each word inside it — so the claim reads
   as four lines in two groups: the figure and its noun at the top, the pair
   at the foot. .venue__claim's space-between distributes the GROUPS, not the
   words, which is why the nesting is worth having. */
.venue__claim-line { display: block; }
.venue__claim-word { display: block; }

/* R17p — the figure sets larger, by direction. --font-size-h3 is the floor
   §12a sets for a numeral that states a quantity ("display scale — never
   below H3"), and 125 is the seat count, the same figure the Hero and §7
   carry.

   IT NEEDS ITS OWN LEADING AND TRACKING, not the label's. .venue__claim runs
   at body leading with wide uppercase tracking, which is right for a 14px
   caption and wrong for a 34px numeral — the tracking would space the digits
   apart and 1.48 would drop the noun beneath it too far. .t-numeral already
   supplies the tighter tracking and the tabular figures; this adds the size
   and the leading. */
.venue__claim-figure {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
}

.venue__claim .t-numeral { color: inherit; }

/* R17n — the claim is explicitly flush left, by direction.

   TWO DECLARATIONS, BECAUSE ONE WOULD NOT HAVE SETTLED IT. The tile is a flex
   container, so the paragraph was a shrink-to-fit item sized to its longest
   line, and `text-align` on a box that is only as wide as its own text has
   nothing to align. inline-size: 100% gives it the full tile to align within;
   text-align: start then puts every line on the same left edge.

   `start`, not `left` — the page uses logical properties throughout, and
   `start` follows the writing direction where `left` would not. */
.venue__claim {
  inline-size: 100%;
  /* One line at the top, one at the foot — the two .venue__claim-line spans
     are the only children, so space-between puts one at each end with no
     margins and nothing to keep in step if a third line is ever added. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: start;
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-heading);   /* 5.82:1 on the deep violet */
}

@media (min-width: 992px) {
  .venue__board {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 315fr 235fr 250fr;
    aspect-ratio: 1072 / 810;
  }

  /* Ratios are the grid's job here, not the tile's: every tile is sized by
     its span and the row heights above, so an aspect-ratio would fight it. */
  .venue__tile { aspect-ratio: auto; }

  .venue__tile--a     { grid-column: 1 / 6;   grid-row: 1; }
  /* R16t — 6/11 -> 6/13. The aside held columns 11-13 of this row and was
     removed with its placeholder copy; the magazine tile takes them, so the
     top row spans the board like the two rows beneath it rather than ending
     in an empty third. */
  .venue__tile--b     { grid-column: 6 / 13;  grid-row: 1; }
  .venue__tile--c     { grid-column: 1 / 6;   grid-row: 2 / 4; }
  .venue__tile--d     { grid-column: 6 / 13;  grid-row: 2; }
  /* R17p — back to three columns, by direction. R17o widened this tile to
     four to fit "CONVERSATION." on one line; the copy is "ROOM." now, which
     is about 45px against that word's 125, so the extra column has no reason
     left and tile E takes it back. */
  .venue__tile--e     { grid-column: 6 / 10;  grid-row: 3; }
  .venue__tile--claim { grid-column: 10 / 13; grid-row: 3; }
}

/* ==========================================================================
   MOBILE — THE MOSAIC BECOMES A RAIL. R17r, by direction: the tiles move
   horizontally on their own "to reduce scroll depth".

   IT IS A REAL SCROLL CONTAINER, NOT A MARQUEE. .marquee would have been the
   other route, but it works by duplicating its group so the loop is seamless
   — twelve tiles instead of six, the claim's text in the DOM twice, and no
   way for a reader to move it themselves. A scroll-snap rail carries the six
   tiles once, takes a swipe, takes the arrow keys, and the timer in
   js/motion.js only does what a finger would.

   78% RATHER THAN 100%: the next tile shows at the edge, which is what tells
   a reader the row continues. A full-width tile gives no such signal and
   reads as a static image that happens to change.

   THE NATIVE SCROLLBAR IS HIDDEN, so the peeking tile IS the affordance.
   That is the same trade §6's rail makes.

   ⚠ THE CONDITIONS DO NOT OVERLAP with the >=992 grid block above, so source
   order does not matter here — unusually for this file.
   ========================================================================== */
@media (max-width: 991px) {
  .venue__board {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .venue__board::-webkit-scrollbar { display: none; }

  .venue__tile {
    flex: 0 0 78%;
    aspect-ratio: 3 / 2;
    scroll-snap-align: start;
  }

  /* The claim is not a photograph and has no ratio to hold; letting it match
     the others keeps the rail's rhythm even. */
  .venue__tile--claim { aspect-ratio: 3 / 2; }
}