/**
 * Section: Director's letter
 *
 * Ported from `_mockups/directors-message.html` `.dm-letter-grid` /
 * `.dm-portrait` / `.dm-letter` / `.dm-sig`, which the inventory names as
 * canonical. `about.html` `.ab-dir`, the teaser, renders through the same
 * treatment with a shorter body: per the inventory it loses `.ab-dir`'s
 * decorative quotation glyph and its gold left rule and gains the letter's
 * typography, which is a recorded delta rather than an oversight.
 *
 * WHAT IS NOT IN THIS FILE. `.ph-badge` (the missing-name marker), `.note`,
 * `.eyebrow`, `.btn` and `.section` are shared and live in `components.css`
 * or `tokens.css`. None is re-declared here.
 *
 * THE STICKY OFFSET IS `calc(var(--header-h) + var(--s-4))`, never a literal
 * 72px. `--header-h` exists precisely because hardcoding it was a Phase 2
 * finding, and AGENTS.md §6 lists it among the traps already solved upstream.
 *
 * ONE GOLD MOMENT. The design brief for this page allows a single gold accent
 * and spends it on the Fraunces drop cap. The drop cap is applied to the first
 * paragraph of the letter through `:first-of-type`, so it follows the content
 * rather than needing a class the client has to remember to apply. Everything
 * else on the page stays in forest and ink.
 *
 * CONTRAST, measured rather than eyeballed. The section sits on the default
 * mist ground, #f7f4ee:
 *
 *   --ink        #14231f  on mist  14.83:1   the letter
 *   --forest     #0e4038  on mist  10.57:1   bold lead-ins, signature, role
 *   --ink-soft   #45524d  on mist   7.45:1   the caption and the draft note
 *   --gold-deep  #7e622e  on mist   5.21:1   the drop cap and the eyebrow
 *   --gold-deep  #7e622e  through the .ph-badge stripe   5.17:1
 *
 * The badge is measured on paper and not on mist because `.ph-badge` pins its
 * own `background-color: var(--paper)` and inherits no ground. This file used
 * to quote 4.74 against mist, which was true of the component before it was
 * pinned and is now simply the wrong ground. 5.17 is the composite of
 * --gold-tint-10 over paper computed in float; rounding that composite to a
 * hex first reports 5.18, which is the wrong way to err in a header that
 * claims to be measured.
 *
 * All clear WCAG AA for normal text, the badge being the tightest and being a
 * shared component rather than this file's. Re-measure if any token moves. No
 * tint token is used as a text colour anywhere here.
 */

.directors-letter-grid {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* No portrait supplied, so the letter runs full width instead of sitting
   beside an empty column. Set by the renderer from the content. */
.directors-letter-grid--noportrait {
  grid-template-columns: minmax(0, 1fr);
}

/* --- the portrait column -------------------------------------------------- */
.directors-letter-portrait {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  margin: 0;
}

.directors-letter-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-m);
}

.directors-letter-portrait figcaption {
  margin-top: var(--s-3);
  display: grid;
  gap: .5em;
  justify-items: start;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.directors-letter-portrait-name {
  font-weight: 600;
  color: var(--ink);
}

.directors-letter-portrait-role {
  font-weight: 600;
  color: var(--forest);
}

/* --- the letter ----------------------------------------------------------- */

/* An editorial measure. Typography carries this page, so the column is capped
   at the readable line length rather than at the container. */
.directors-letter-letter { max-width: 66ch; }

.directors-letter-letter .eyebrow { margin-bottom: var(--s-3); }

.directors-letter-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
  margin-bottom: var(--s-4);
}

.directors-letter-salute {
  font-size: var(--text-2xl);
  font-weight: 500;
  margin-bottom: var(--s-4);
}

.directors-letter-body p {
  color: var(--ink);
  line-height: var(--leading-body);
}

.directors-letter-body p + p { margin-top: var(--s-4); }

/* The opening paragraph, and the page's single gold moment. */
.directors-letter-body > p:first-of-type { font-size: var(--text-lg); }

.directors-letter-body > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 600;
  color: var(--gold-deep);
  font-size: 3.1em;
  float: left;
  line-height: .8;
  padding: .04em .14em 0 0;
}

/* The bold inline lead-ins. In the mock-up these carry a class; in a rich-text
   field the client simply bolds the opening words, so the treatment follows
   `<strong>` and needs nothing from them. */
.directors-letter-body strong {
  font-weight: 700;
  color: var(--forest);
}

/* --- the signature -------------------------------------------------------- */
.directors-letter-sig {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* A handwritten feel from the display face in italic, rather than a third
   font. The font budget is two families. */
.directors-letter-sig-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--forest);
}

.directors-letter-sig-role {
  margin-top: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.directors-letter-actions { margin-top: var(--s-5); }

/* --- breakpoints (canonical: 1024 / 860 / 620 / 560) ---------------------- */
@media (max-width: 860px) {
  .directors-letter-grid { grid-template-columns: minmax(0, 1fr); }

  /* Sticky has nothing left to do once the portrait sits above the letter,
     and a sticky element in a single column would pin itself over the text. */
  .directors-letter-portrait {
    position: static;
    max-width: 300px;
  }
}

@media (max-width: 560px) {
  .directors-letter-body > p:first-of-type::first-letter { font-size: 2.6em; }
}