/* ==========================================================================
   The Hmong Inc. — About + Board & Staff, v1 draft
   Register: LIGHT / INSTITUTIONAL (the "typeset" side of the system).

   Built against playbooks/anti-ai-slop-design.md. The earlier draft clustered
   tells (a fabricated hero-metric band, a wall of identical empty avatar tiles,
   an eyebrow over every block). This version decides instead of decorates:
   sections we cannot honestly fill were cut, not stubbed; hierarchy comes from
   the display/body scale already in styles.css, not from a kicker on every row.

   Only extends styles.css — never overrides its system. Tokens from :root.
   ========================================================================== */

/* --- breadcrumb ----------------------------------------------------------- */
.crumb {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--secondary); display: flex; gap: .55rem; align-items: center;
  margin: 0 0 1.6rem;
}
.crumb a { color: var(--secondary); text-decoration: none; }
.crumb a:hover { color: var(--green-ink); }
.crumb span { color: var(--hair-strong); }
.crumb b { font-variation-settings: "wdth" 100, "wght" 700; color: var(--ink); }

/* --- page head -----------------------------------------------------------
   The institutional counterpart to the home hero: no photograph behind the
   type, because the register's whole argument is that seriousness reads in the
   typesetting. One small fact block on the right — identity, not a stat grid. */
.pagehead { padding-block: clamp(52px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.pagehead__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px); align-items: end;
}
@media (max-width: 900px) { .pagehead__grid { grid-template-columns: 1fr; gap: 2.4rem; } }
.pagehead .d1 { font-size: clamp(2.75rem, 6.4vw, 5.4rem); }
.pagehead__lede { margin-top: 1.6rem; max-width: 32ch; color: var(--secondary); }

.factrail { border-top: 2px solid var(--green); padding-top: 1.4rem; }
.factrail dt {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink);
}
.factrail dd {
  margin: .3rem 0 1.35rem;
  font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: 1.06rem; line-height: 1.24; color: var(--ink);
  font-variant-numeric: lining-nums;
}
.factrail dd:last-child { margin-bottom: 0; }
.factrail dd small {
  display: block; margin-top: .3rem; font-family: var(--body); font-variation-settings: normal;
  text-transform: none; font-size: .9rem; font-weight: 400; color: var(--secondary); letter-spacing: 0;
}

/* --- mission statement (CAAM s02: the one big serif claim) ----------------
   One thing said large in the body voice, with a single concrete phrase in
   italic. The form is a chosen reference; the copy is plain and specific. */
.statement { margin-inline: 0; }
.statement .lede {
  font-size: clamp(1.9rem, 3.9vw, 3.35rem); line-height: 1.24; letter-spacing: -.014em;
  max-width: 24ch;
}
.statement .lede em { font-style: italic; color: var(--green-ink); }
.statement__foot { margin-top: 2.4rem; display: flex; gap: 1.4rem 2rem; flex-wrap: wrap; align-items: center; }

/* --- split caption -------------------------------------------------------
   styles.css positions .split__note ABSOLUTELY — tuned for the home page's
   seam "breakout" split, where the card floats over the photo's corner. This
   page's split is an ordinary two-column block, so that absolute note detaches
   and hangs below the image. Here the media column is a figure: the caption is
   fixed to the photo's bottom edge, in normal flow, so nothing floats loose. */
.split .split__media { display: flex; flex-direction: column; }
.split .split__media img { aspect-ratio: 4 / 3; border-radius: 4px 4px 0 0; }
.split .split__note {
  position: static; inset: auto; max-width: none; margin: 0;
  border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 4px 4px;
  box-shadow: none; background: var(--card);
}

/* --- what we do: the four areas as a typeset index (not image cards) ------
   Home shows the four areas as photographic pillars; About states them as a
   plain institutional index — one repeated row primitive, no pictures, so the
   two pages don't read as the same block twice. */
.arealist { border-top: 1px solid var(--hair-strong); margin-top: clamp(34px, 4vw, 52px); }
.arealink {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: clamp(18px, 3vw, 44px);
  align-items: baseline; padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--hair); text-decoration: none; color: inherit;
}
.arealink__t { font-family: var(--display); font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase; font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -.004em; color: var(--ink); }
.arealink__d { color: var(--secondary); font-size: 1rem; line-height: 1.5; }
.arealink__go { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary);
  white-space: nowrap; padding-bottom: 5px;
  background-image: linear-gradient(var(--green), var(--green)), linear-gradient(var(--hair-strong), var(--hair-strong));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0 2px, 100% 1px;
  transition: background-size .32s cubic-bezier(.19,1,.22,1), color .18s ease; }
.arealink:hover .arealink__go, .arealink:focus-visible .arealink__go { background-size: 100% 2px, 100% 1px; color: var(--green-ink); }
.arealink:hover .arealink__t { color: var(--green-ink); }
@media (max-width: 720px) {
  .arealink { grid-template-columns: 1fr; gap: .5rem; }
  .arealink__go { justify-self: start; }
}

/* --- leadership (CAAM s05: the executive, in their own words) --------------
   The board roster and staff aren't confirmed yet, so there is no grid of empty
   tiles. One real person is shown; the rest is an honest note. Dr. Thao's photo
   hasn't arrived either — an initials monogram stands in (playbook §05: a
   monogram is honest, a fake stock face is not). */
.lead { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 880px) { .lead { grid-template-columns: 1fr; gap: 2rem; max-width: 60ch; } }
.lead__portrait {
  aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden;
  background: var(--raised); border: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem; text-align: center; margin: 0;
}
.lead__portrait img { width: 100%; height: 100%; object-fit: cover; }
.lead__mono {
  font-family: var(--display); font-variation-settings: "wdth" 68, "wght" 850;
  font-size: clamp(2.8rem, 6vw, 4.6rem); letter-spacing: .01em; color: var(--green-ink); line-height: 1;
}
.lead__monocap {
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .72rem; letter-spacing: .04em; color: var(--secondary);
}
.lead__name { margin: 0; }
.lead__role { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .98rem; letter-spacing: .01em; color: var(--green-ink); margin: .6rem 0 0; }
.lead__cred { font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 500;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); margin: .35rem 0 1.5rem; }
.lead__bio { color: var(--secondary); max-width: 56ch; }
.lead__quote {
  margin: 1.8rem 0 0; padding-left: 1.6rem; border-left: 3px solid var(--green);
  font-family: var(--body); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.42;
  letter-spacing: -.006em; color: var(--ink);
}
.lead__quote cite { display: block; margin-top: .9rem; font-style: normal;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }

/* the honest board/staff state, until the client sends a roster */
.board-note { margin-top: clamp(40px, 5vw, 68px); padding-top: 1.8rem; border-top: 1px solid var(--hair-strong); max-width: 60ch; }
.board-note h3 { margin: 0 0 .6rem; }