/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP FIT

   Composition rules for the landing page: how much a section shows, how tall
   it stands, how many columns the nine areas take.

   IT USED TO BE THE OPPOSITE OF THIS FILE. Its stated target was "each section
   fits a 1080p viewport — roughly 940px of usable height", and every one of
   those rules was written at the top of the file, unguarded, then partially
   walked back by max-width blocks at the foot. A phone loaded the whole
   desktop composition first: a 58svh minimum on a section that had no reason
   to reserve one, a nine-card grid to un-column, and — worst of it — an area
   description clamped to a single line, on the device with the most room to
   scroll and the least to click.

   The areas have since left this file entirely: they are a 3x3 icon menu now,
   three across at every width, styled in core.css. What is left here is the
   President, the VMGO columns and the section rhythm.

   So: everything outside a media query is the phone, and the fit target is
   named in the tier it applies to. Breakpoints match core.css — 481, 769, 993,
   1201 — because a fifth width would mean two layouts changing at almost, but
   not quite, the same moment.

   `body.is-compact` is load-bearing, not decoration. vmgo.html carries an
   inline <style> whose selectors sit at (0,1,0) and, being in the body, load
   after this file; the class puts these rules at (0,2,0) so they still win.
   Dropping it would silently hand the VMGO type back to the section template.
   ═══════════════════════════════════════════════════════════════════════════ */

body.is-compact {
  --section-pad: clamp(2rem, calc(3vw * var(--ui-scale)), 2.5rem);
  --gap:         clamp(1rem, calc(1.6vw * var(--ui-scale)), 1.5rem);
  --card-pad:    clamp(1.25rem, calc(2vw * var(--ui-scale)), 1.75rem);
}

/* ── Section heads ────────────────────────────────────────────────────────── */
body.is-compact .section-head { margin-bottom: clamp(1.25rem, calc(2.5vw * var(--ui-scale)), 2rem); }
body.is-compact .t-section { font-size: clamp(1.625rem, calc(3vw * var(--ui-scale)), 2.25rem); }
body.is-compact .section-head .lead { font-size: 1.0625rem; margin-top: .75rem; }
body.is-compact .eyebrow { margin-bottom: .5rem; }
body.is-compact .section-head.center > h2::after { margin-top: .875rem; height: 2px; }

body.is-compact .prose { line-height: 1.65; }

/* ── Hero ─────────────────────────────────────────────────────────────────────
   Deliberately NOT setting .doc-hero min-height here. `body.is-compact X`
   scores (0,2,1) against brand.css's own `.doc-hero` at (0,1,0), so a value
   here would silently beat the height brand.css sets — the one that keeps the
   banner under a screen so the section below breaks the fold.
   ───────────────────────────────────────────────────────────────────────────── */
body.is-compact .doc-ribbon {
  padding-block: calc(var(--nav-h) + clamp(1.5rem, calc(3vw * var(--ui-scale)), 2.5rem)) clamp(2rem, calc(4vw * var(--ui-scale)), 3rem);
}
body.is-compact .doc-masthead {
  padding-bottom: 1rem;
  margin-bottom: clamp(1.25rem, calc(2.5vw * var(--ui-scale)), 2rem);
}
body.is-compact .doc-rule { margin: 1.125rem 0; }
body.is-compact .hero-actions { margin-top: 1.5rem; }

/* ── The Institution ──────────────────────────────────────────────────────── */
body.is-compact #about .prose p { margin-bottom: 1em; }

/* ── President ────────────────────────────────────────────────────────────────
   Stacked, with the portrait capped so it does not take a whole screen before
   the message. It is 1200×1655 — ratio 0.725, taller than it is wide — and is
   shown uncropped, so its height is entirely a function of its width.
   ───────────────────────────────────────────────────────────────────────────── */
body.is-compact #president .pub-split { grid-template-columns: 1fr; }
body.is-compact #president .split-media { max-width: 20rem; margin-inline: auto; }
body.is-compact #president .split-media img {
  width: 100%;
  height: auto;          /* uncropped — natural 0.725 ratio preserved */
  aspect-ratio: auto;
  object-fit: contain;
}
body.is-compact .quote-mark { font-size: 3.5rem; margin-bottom: -1rem; }
body.is-compact .pull-quote { font-size: clamp(1.25rem, calc(2vw * var(--ui-scale)), 1.625rem); }
body.is-compact .signature { margin-top: 1.25rem; }

/* ── VMGO ─────────────────────────────────────────────────────────────────────
   Four stacked blocks. No minimum height: a floor that a phone cannot fill is
   just reserved white, and the columns only become columns at 993.
   ───────────────────────────────────────────────────────────────────────────── */
body.is-compact .vmgo-section {
  padding-block: clamp(2.5rem, calc(5vw * var(--ui-scale)), 4rem);
}
body.is-compact .vmgo-band {
  padding: 0 0 .875rem;
  margin-bottom: 1.375rem;
  width: 100%;
}
body.is-compact .vmgo-band i  { font-size: 1.625rem; }
body.is-compact .vmgo-band h2 { font-size: 1.375rem; }

/* ONE SIZE for all four columns, and it has to be set HERE — see the note on
   `body.is-compact` at the head of this file. The mission used to step DOWN a
   size because it carries roughly three times the text of the other columns;
   that job belongs to the column widths, not to printing four columns in three
   sizes under four identical headings. */
body.is-compact .vmgo-statement,
body.is-compact .vmgo-mission li,
body.is-compact .vmgo-values li,
body.is-compact .vv-name {
  font-size: 1.0625rem;
  line-height: 1.7;
}

body.is-compact .vmgo-mission { gap: 1rem; }
body.is-compact .vmgo-mission li { gap: .75rem; }
body.is-compact .vmgo-mission .vm-num {
  width: 1.625rem; height: 1.625rem; font-size: .8125rem;
}
body.is-compact .vmgo-values { gap: 1rem; }
body.is-compact .vmgo-values li::before { width: .375rem; height: .375rem; }
/* No font-size here. This line used to set .vv-name to 1.1875rem, and being a
   later rule of equal specificity it beat the unified size above — so Core
   Values alone stayed a size larger than the three columns beside it. */

/* Monuments: watermarks, kept small enough on a phone that they stay behind
   the text rather than washing across it. */
body.is-compact .vmgo-monument--left {
  height: clamp(18rem, 60vh, 30rem);
  width: auto;
  top: auto; bottom: 0; left: -4%;
  opacity: .07;
}
body.is-compact .vmgo-monument--right {
  width: clamp(12rem, calc(26vw * var(--ui-scale)), 18rem);
  height: auto;
}

/* ── Nine Areas ───────────────────────────────────────────────────
   Nothing here any more. The nine areas were a grid of cards this file spent
   sixty lines composing — a photograph, a description clamped to a line, three
   counts — and are now a 3x3 menu of icon tiles with no composition to fit,
   styled once in core.css under `.area-menu`.

   That is why this file no longer has an #areas block at any tier: a menu that
   is three across at every width has nothing left for a desktop-fit layer to
   decide.
   ───────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   TIERS — now that there is room
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 993px) {
  /* ── President, side by side ──────────────────────────────────────────────
     At a half-width 580px the portrait stands 800px tall against a message of
     roughly 585px, leaving a ~215px void beside the text. Widening it makes
     that worse, not better: height grows at 1/0.725 per pixel of width while
     the message only reflows a little taller. So the portrait is narrowed to
     ~26rem (416px → ~574px tall) and the message takes the rest. The two
     columns then finish at close to the same height. */
  body.is-compact #president .pub-split {
    grid-template-columns: minmax(0, 26rem) 1fr;
    gap: clamp(1.5rem, calc(3vw * var(--ui-scale)), 2.5rem);
    align-items: center;
  }
  body.is-compact #president .split-media { max-width: none; margin-inline: 0; }

  /* ── VMGO, four columns ──────────────────────────────────────────────────
     A min-height is a floor, not a target: 58svh keeps the section generous
     without padding it out with nothing. It was 92svh, from when the landing
     page was built to show one section per viewport — with the type scaled
     down that centred 409px of content in an 828px box, and a visitor scrolled
     through a screen of white to reach the President. */
  body.is-compact .vmgo-section {
    min-height: 58svh;
    display: flex;
    align-items: center;
  }
  /* This section runs wider than the rest of the page. At a 1320px container
     on a 1920px screen roughly 300px sits unused on each side while the four
     columns are squeezed to ~280px — narrow enough that the enlarged type
     wraps every few words. Widening to ~1680px takes each column to ~365px.
     It is the only section that does this, and it will look visibly wider than
     About, President and Areas — deliberate, to buy the columns their measure. */
  body.is-compact .vmgo-section > .pub-container {
    width: 100%;
    max-width: min(105rem, 94vw);
    padding-inline: clamp(1.5rem, calc(3.5vw * var(--ui-scale)), 3rem);
  }

  /* Columns STRETCH — that is what gives the dividers a full, equal length —
     but their CONTENT is top-aligned, so all four sub-components start on the
     same line regardless of how much text each carries. The block as a whole
     stays vertically centred in the section, so leftover height splits evenly
     above and below rather than pooling at the bottom. */
  body.is-compact .vmgo-cols {
    gap: 0 clamp(1.5rem, calc(2.4vw * var(--ui-scale)), 2.5rem);
    --vmgo-gap: clamp(1.5rem, calc(2.4vw * var(--ui-scale)), 2.5rem);
    align-items: stretch;
  }
  body.is-compact .vmgo-col { display: flex; flex-direction: column; }
  body.is-compact .vmgo-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* top-aligned */
    align-items: flex-start;       /* left-aligned */
  }
  body.is-compact .vmgo-mission,
  body.is-compact .vmgo-values { width: 100%; align-content: start; }

  /* The statue runs far taller than the section — about 1,200px against ~600px
     — so it is anchored from the TOP: the crop then takes the plinth and lower
     legs, which is how a statue is normally cropped, and the head and torso
     stay in frame. At this scale it spans nearly the full container width, so
     the opacity drops or it washes across all four columns. */
  body.is-compact .vmgo-monument--left {
    height: clamp(36rem, 150vh, 84rem);
    top: -9%;
    bottom: auto;
    left: -13%;
    opacity: .09;
  }
  body.is-compact .vmgo-monument--right {
    width: clamp(22rem, calc(42vw * var(--ui-scale)), 38rem);
  }
}