/* ============================================================================
   The Builders Series — page layer
   Loaded after system/styles.css. Everything the design system already does
   is left alone; this file holds only what is true of THIS page.

   Seven deviations from the design system, all deliberate:

   1. NO FREIGHT BIG PRO. The Builders Series wordmark is Helvetica Neue and
      it is this page's display voice, so system/tokens/fonts.css points
      --lp-display at --lp-sans and never loads RC Display.

   2. THE DISPLAY TIERS ARE RE-FIT. The system's display sizes are Freight Big
      Pro measurements. Helvetica Neue caps set far wider at the same px — the
      section head "THE ROOM STAYS SMALL ON PURPOSE." measures 1524px in HN
      Regular at the system's 78.97, against a 640px measure. Sizes below were
      chosen by measuring advance widths, not by eye.

   3. DISPLAY CARRIES -0.021em. The system's zero-tracking rule is a statement
      about Freight, whose strings match their unkerned advance. The Builders
      wordmark is drawn at -0.021em and must not be changed, so every display
      line on the page is fitted to the wordmark rather than against it.
      Furniture — body, labels, controls, footer — stays at --lp-tracking: 0.

   4. TWO NEW PAGE BLOCKS, both because they carry photographs and the system
      bans photography inside a panel: the session list, and the continuum
      card that every sibling landing page uses.

   5. THE REGISTRATION COLUMN STICKS. The split band pairs one form with five
      sessions, so the apparatus column runs roughly five times the height of
      the argument column and the band would otherwise read as 2,600px of
      empty page beside the sessions. The form travels with them instead.
      Above 980 only; below that the band is one column and stacks.

   6. BUTTON LABELS ARE CENTRED IN THEIR BOX. This is a fix, not a taste
      change, and it is measured. The system gives .lp-btn / .lp-btn-ghost a
      height and a top padding only, with no bottom padding. Inside a real
      <button> that works, because a form control centres its own label — the
      submit bars measure 21.33 above / 20.00 below in a 55.67px box. On the
      inline-block <span> the system's own continuum template uses, nothing
      centres it, so the label rides 2.50px high: 11.33 above / 16.33 below in
      a 41.67px box. High-riding button text is exactly the symptom
      tokens/fonts.css attributes to Helvetica Neue LT Pro, which is why it
      reads as the wrong font — but only the four plain Helvetica Neue faces
      load here, and every element on the page resolves to RC Sans. The cause
      is the padding, not the typeface. Reported upstream; the system's
      templates/series-registration.html has it too.

   7. THE CLOSED HERO'S SCRIM IS DEEPER — 0.70 rather than the system's 0.555.
      The seats photograph carries blown highlights on the seat backs, and at
      0.555 white type sat at 4.85:1 against them: AA, but the type read as
      competing with the photograph rather than sitting on it. At 0.70 the
      worst pixel of any text region measures 8.52:1.
   ========================================================================= */

.lp-page {
  /* ── Display re-fit ──────────────────────────────────────────────────────
     Section heads: 56px on a 600px measure breaks both of this page's heads
     into two lines with the Bold run opening line two —
     "BRING THE PROBLEM" / "YOU ACTUALLY HAVE." at 561.8 / 593.9
     "THE ROOM STAYS" / "SMALL ON PURPOSE."  at 471.0 / 566.0            */
  --lp-t-section:      56px;
  --lp-t-section-lh:   55px;
  --lp-title-measure: 600px;

  /* Session titles keep the system's panel tier. At 38.9px Bold caps the
     longest, "MEMBERS BRING MEMBERS", measures 533.2px in the split band's
     637.7px right column — all five titles hold one line at canvas scale. */
  --lp-t-panel-lh:      40px;

  /* ── Page tokens ─────────────────────────────────────────────────────── */
  --bs-mark:         87.28px;  /* the wordmark, at the system's climax tier */
  --bs-mark-lh:         0.86;  /* the wordmark's own leading — do not change */
  --bs-mark-track: -0.021em;   /* the wordmark's own fitting — do not change */
  --bs-session-gap:     65px;  /* = --lp-panel-gap, the system's row gap     */
  --bs-form-w:      630.2px;   /* = the .lp-form max-width in forms.css      */
  --bs-session-step:    14px;  /* title -> date -> body                      */
}

/* ── THE WORDMARK ─────────────────────────────────────────────────────────
   This is the logo, not a headline. Helvetica Neue Bold, all caps, three
   stacked lines, leading 0.86, tracking -0.021em. It is reproduced here
   exactly as approved (2026-08-25); only its size scales with the page.
   Nothing about the face, weight, case, leading or tracking may change. */
.bs-mark {
  font-family: var(--lp-sans);
  font-weight: 700;
  font-size: calc(var(--k) * var(--bs-mark));
  line-height: var(--bs-mark-lh);
  letter-spacing: var(--bs-mark-track);
}
.bs-mark span {
  display: block;
  text-transform: uppercase;
}

/* ── HERO FURNITURE ───────────────────────────────────────────────────── */

/* When the series meets. Medium so it reads as fact, not as argument. */
.bs-when {
  margin-top: calc(var(--k) * 14.6px);
  font-weight: 500;
  font-size: calc(var(--ks) * var(--lp-t-body));
  line-height: calc(var(--ks) * var(--lp-t-body-lh));
}

/* The hero's one action. Ghost, because the ground is photographic. */
.bs-hero-action { margin-top: calc(var(--k) * 44px); }

/* ── DISPLAY TRACKING ─────────────────────────────────────────────────────
   Section heads and session titles join the wordmark's fitting. Furniture
   is untouched and stays at --lp-tracking. */
.lp-section-title,
.bs-session__title { letter-spacing: var(--bs-mark-track); }

/* ── THE SESSIONS ─────────────────────────────────────────────────────────
   The right column of the registration band. Five rows, each a title, its
   photograph, the line it turns on, the body, and which session it is.
   Vertical space separates them; no rules, no numerals, no cards. */
.bs-sessions > li + li { margin-top: calc(var(--k) * var(--bs-session-gap)); }

/* Photographs are leadership.rottmancreative.com's own session set, in the
   colour that page runs them in, at 772 x 540. The figure holds the native
   ratio at any column width. */
.bs-session__photo {
  margin: calc(var(--k) * 22px) 0 0;
  aspect-ratio: 772 / 540;
  overflow: clip;
  background: var(--lp-accent-tint);
}
.bs-session__photo img { width: 100%; height: 100%; object-fit: cover; }

/* The line the session turns on. Regular against the Light body under it —
   weight carries it, so it needs no quote marks, rule or colour bar. */
.bs-session__pull {
  margin-top: calc(var(--k) * 26px);
  font-weight: 400;
  font-size: calc(var(--ks) * var(--lp-t-body));
  line-height: calc(var(--ks) * var(--lp-t-body-lh));
}

.bs-session__title {
  font-family: var(--lp-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(var(--k) * var(--lp-t-panel));
  line-height: calc(var(--k) * var(--lp-t-panel-lh));
}
/* Which session it is, and when it meets once that is known. Last in the
   row, as it is on the sibling series pages. */
.bs-session__when {
  margin-top: calc(var(--k) * var(--bs-session-step));
  font-weight: 500;
  font-size: calc(var(--ks) * var(--lp-t-panel-body));
  line-height: calc(var(--ks) * var(--lp-t-panel-body-lh));
}
.bs-session__body {
  margin-top: calc(var(--k) * var(--bs-session-step));
  font-weight: 300;
  font-size: calc(var(--ks) * var(--lp-t-panel-body));
  line-height: calc(var(--ks) * var(--lp-t-panel-body-lh));
}

/* ── THE REGISTRATION COLUMN ──────────────────────────────────────────────
   See deviation 5. .lp-split already sets align-items: start, so the grid
   item is content-height and can stick inside the band. */
@media (min-width: 981px) {
  .bs-apply { position: sticky; top: calc(var(--k) * 60px); }
}

/* In the comp the form is alone in its column, so nothing sits above it and
   forms.css sets no top margin. Here it follows the band body. */
.bs-apply .lp-form { margin-top: calc(var(--k) * 44px); }

/* The legal line takes the column width by default. In the comp that IS the
   form width; here the column is the split band's wide left one, so the legal
   would run 247px past the submit bar. */
.bs-apply .lp-legal { max-width: calc(var(--k) * var(--bs-form-w)); }

/* ── WHERE THE THINKING CONTINUES ─────────────────────────────────────────
   The continuum every sibling landing page carries, reproduced as the standard
   card rather than as a panel row: square grayscale photograph, label, accent
   hairline, one line, one action. The system has no card, and the panel row
   cannot hold a photograph, so this is a page block.

   The one substitution from the sibling pages is the action: their rounded
   pill becomes the system's solid button, because it would otherwise be the
   only radius anywhere on the page. */
.bs-continuum-title { margin-bottom: calc(var(--k) * 56px); }

.bs-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--k) * var(--lp-panel-gap));
}

.bs-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--lp-ink);
}
.bs-card__photo {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: clip;
  background: var(--lp-ground);
}
.bs-card__photo img { width: 100%; height: 100%; object-fit: cover; }
/* The continuum photographs are grayscale at source on every sibling page.
   Brightness is the only hover move — nothing here reveals colour. */
.bs-card__photo img { transition: filter 160ms cubic-bezier(.4,0,.2,1); }
.bs-card:hover .bs-card__photo img,
.bs-card:focus-visible .bs-card__photo img { filter: brightness(1.12); }

.bs-card__label {
  margin-top: calc(var(--k) * 22px);
  font-weight: 700;
  font-size: calc(var(--ks) * var(--lp-t-panel-body));
  line-height: calc(var(--ks) * var(--lp-t-panel-body-lh));
}
/* The hairline under the label is the sibling pages' own device and the one
   place the accent appears as a graphic rather than a fill. */
.bs-card__rule {
  height: 1px;
  margin: calc(var(--k) * 12px) 0 calc(var(--k) * 16px);
  background: var(--lp-accent);
}
.bs-card__sub {
  font-weight: 300;
  font-size: calc(var(--ks) * var(--lp-t-panel-body));
  line-height: calc(var(--ks) * var(--lp-t-panel-body-lh));
  flex: 1 0 auto;
}
.bs-card__action { margin-top: calc(var(--k) * 26px); }
.bs-card:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 6px; }

/* ── FORM ─────────────────────────────────────────────────────────────────
   The system sizes inputs only. Form 23's fourth ask is a textarea, so it
   takes the field's own padding and rules over two and a half field
   heights — enough for a sentence without becoming a comment box. */
.lp-form textarea {
  height: calc(var(--k) * var(--lp-field-h) * 2.5) !important;
  padding-top: calc(var(--k) * var(--lp-field-pad-t)) !important;
  padding-bottom: calc(var(--k) * var(--lp-field-pad-t)) !important;
  resize: vertical !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────
   The system does the structural work at 980. Two things need a hand: the
   wordmark, because three lines of caps want more of a narrow screen than
   --k gives, and the card grid, which the system's panel-row breakpoints do
   not cover. Cards go two-up rather than one-up at 980 — four short cards in
   a single column reads as four sections. */
@media (max-width: 1120px) {
  .bs-cards { gap: calc(var(--k) * 48px); }
}
@media (max-width: 980px) {
  .lp-page { --bs-mark: 108px; }
  .bs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bs-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .lp-page { --bs-mark: 128px; }
  .bs-hero-action { margin-top: calc(var(--ks) * 34px); }
}
@media (max-width: 440px) {
  .lp-page { --bs-mark: 148px; }
}

/* Both forms sit on the white ground, so field fills need no override — the
   tint is on the continuum band, which carries no form. */

/* ── THE HERO SCRIM ───────────────────────────────────────────────────────
   The closed hero's flat scrim, deepened from the system's 0.555. See
   deviation 5 at the top of this file. */
.lp-hero--closed .lp-hero__scrim { background: rgba(0, 0, 0, 0.70); }

/* ── BUTTON LABEL CENTRING ────────────────────────────────────────────────
   See deviation 6. Centre the label the way a <button> does, keeping the
   measured height, the horizontal padding and width-from-the-label. The
   submits are real <button> elements and already centre themselves. */
.lp-btn,
.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}