/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS — full letters, set one after another.

   Replaces the card→modal pattern built in an earlier session. The client
   asked for "presentation as my current website, namely only the full
   testimonial" (2026-08-29): nothing is truncated, nothing needs a click.
   ══════════════════════════════════════════════════════════════════ */

.letters { max-width: 820px; }

/* The Trudeau letter opens the page, as it does on his own site. */
.letter-feature { max-width: 520px; margin: 0 auto 88px; }
.letter-feature img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 22px 56px -24px rgba(42,42,42,0.45);
}
.letter-feature figcaption {
  font-family: 'Inter', sans-serif;
  font-style: italic; font-weight: 300;
  font-size: 13px; line-height: 1.7;
  color: #6b6b6b; margin-top: 16px; text-align: center;
}
.letter-feature figcaption strong { font-style: normal; font-weight: 500; color: var(--crimson); }

.letter { padding: 0 0 56px; margin-bottom: 56px; border-bottom: 1px solid rgba(117,38,31,0.18); }
.letter:last-of-type { border-bottom: 0; }

/* The heading is the client's own, verbatim from his site — it already carries
   the relationship ("Parents of Kristen French"), so there is no separate role
   line to set. A crimson rule under it does the hierarchy instead. */
.letter-head { margin-bottom: 26px; }
.letter-head h2 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin: 0;
  max-width: 30em;
}
.letter-head::after {
  content: '';
  display: block;
  width: 48px; height: 1px;
  background: var(--crimson);
  margin-top: 18px;
}

.letter-body p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: #3a3a3a;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.letter-body p:last-child { margin-bottom: 0; }
/* Salutations and sign-offs are single short lines; let them breathe. */
.letter-body p:first-child { font-style: italic; color: #555; }

/* ─── Short notes — REMOVED 2026-09-01 ───
   The four Rosenzweig-circle notes were set here as compressed pull-quotes with
   their salutations and sign-offs dropped. On "Testimonials – keep all in" they
   were restored as full letters like the other fourteen; this grid has no users. */

@media (max-width: 900px) {
  .letter-feature { margin-bottom: 64px; }
}
@media (max-width: 600px) {
  .letter { padding-bottom: 44px; margin-bottom: 44px; }
  .letter-body p { font-size: 15.5px; }
}

/* ─── 2026-09-02 POLISH (page-local) ─── */
.letter-body p { font-weight: 400; max-width: 68ch; }                 /* 18 long letters at weight 300 was the hardest read on the site */
.letter-body p:first-child { font-style: normal; color: #3a3a3a; }    /* the blanket rule italicised nine opening paragraphs */
.letter-body p.salutation, .letter-body p.signoff { font-style: italic; color: #555; }
.letter-body p.attribution { font-size: 14px; line-height: 1.7; color: #6b6b6b; }
.letter-head h2 { font-size: clamp(21px, 2.1vw, 25px); }
.letter { border-bottom-color: rgba(117,38,31,0.24); }
.letter:last-of-type { padding-bottom: 0; margin-bottom: 0; }
.letter-feature figcaption { font-weight: 400; font-size: 13px; color: #5c5c5c; }
@media (max-width: 600px) { .letter-body p { font-size: 16px; line-height: 1.8; } }

/* ══════════════════════════════════════════════════════════════════
   2026-09-04 WAYFINDING — the eighteen letters get an apparatus.

   The complaint was that the page is one endless scroll with no way to
   see where you are, how much is left, or to reach a named correspondent.
   It is answered the way the site already answers it on Selected Case
   Profiles: a Contents index, a sticky rail with scrollspy, and a way
   back up from every item — so the two long pages navigate identically.

   Nothing is truncated (the "read it whole" rule stands) and no wording
   is invented: every name and role clause in the index is lifted from
   his own testimonial heading, re-laid out on two lines.
   ══════════════════════════════════════════════════════════════════ */

/* The measure stays 820px; the column only widens where the rail has
   somewhere to sit beside it. Below 1180px the Contents index is the
   navigation, exactly as on case-profiles. */
@media (min-width: 1180px) {
  .letters { max-width: 1074px; }
  .letters-grid { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 0 64px; align-items: start; }
  .letters-main { max-width: 820px; }
}

/* ─── Contents ─── */
.letters-toc { margin: 0 0 76px; padding: 0 0 34px; border-bottom: 1px solid rgba(117,38,31,0.20); scroll-margin-top: 22px; }
.letters-toc > p { font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.42em; text-transform:uppercase;
                   color:var(--crimson); margin:0 0 14px; }
.letters-toc ol { list-style:none; margin:0; padding:0; }
/* Two columns from tablet up: eighteen single-file entries would be a scroll
   of their own, which is the problem this is here to solve. `columns` reads
   top-of-column-one → top-of-column-two, so the numbering still runs in order. */
@media (min-width: 860px) { .letters-toc ol { columns: 2; column-gap: 56px; } }
.letters-toc li { border-top:1px solid rgba(117,38,31,0.16); break-inside:avoid; }
.letters-toc a { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:baseline; gap:0 10px;
                 padding:11px 0; text-decoration:none; color:#3a3a3a; transition:color .2s ease; }
.letters-toc a:hover, .letters-toc a:focus-visible { color:var(--crimson); }
.letters-toc .toc-num { font-family:'Cinzel',serif; font-size:12px; color:var(--crimson); letter-spacing:0.06em; }
.letters-toc .toc-title { font-family:'Cinzel',serif; font-size:15.5px; line-height:1.34; letter-spacing:0.01em; }
.letters-toc .toc-role { display:block; font-family:'Inter',sans-serif; font-style:italic; font-weight:400;
                         font-size:12.5px; line-height:1.5; letter-spacing:0; color:#6b6b6b; margin-top:4px; }

/* ─── Sticky rail (desktop only — it is a pointer affordance) ─── */
.letters-rail { display: none; }
@media (min-width: 1180px) {
  .letters-rail { display:block; position:sticky; top:118px;
                  /* eighteen entries can outrun a short viewport; the 4px
                     padding keeps the focus ring off the scroll box's edge */
                  max-height:calc(100vh - 158px); overflow-y:auto; overscroll-behavior:contain;
                  scrollbar-width:thin; padding:4px 4px 4px 6px; margin:-4px -4px -4px -6px; }
  .letters-rail p.rail-label { font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.36em;
                               text-transform:uppercase; color:var(--crimson); margin:0 0 12px; }
  .letters-rail ol { list-style:none; margin:0; padding:0; border-left:1px solid rgba(117,38,31,0.18); }
  .letters-rail li a { display:grid; grid-template-columns:30px minmax(0,1fr); gap:0 8px; align-items:baseline;
                       padding:8px 0 8px 14px; margin-left:-1px; border-left:2px solid transparent;
                       font-family:'Josefin Sans',sans-serif; font-size:11px; letter-spacing:0.08em;
                       text-transform:uppercase; color:#5f5f5f; text-decoration:none;   /* AA on cream */
                       line-height:1.4;   /* four of the eighteen names wrap; 1.0 ran them together */
                       transition:color .2s ease, border-color .2s ease; }
  .letters-rail li a .r-num { font-family:'Cinzel',serif; font-size:9.5px; color:#6b615b; }
  .letters-rail li a:hover, .letters-rail li a:focus-visible { color:var(--crimson); }
  .letters-rail li a:hover .r-num, .letters-rail li a:focus-visible .r-num { color:var(--crimson); }
  .letters-rail li a.is-active { color:var(--crimson); border-left-color:var(--crimson); }
  .letters-rail li a.is-active .r-num { color:var(--crimson); }
}

/* ─── The letter itself: a hanging numeral and a way back ─── */
.letter { scroll-margin-top: 22px; }   /* scroll-padding (96) + this = the 118px rail top */
.letter-num { font-family:'Cinzel',serif; font-size:12.5px; letter-spacing:0.1em;
              color:var(--crimson); margin:0 0 10px; }   /* eyebrow tracking (0.34em) read "II" as two I's */
.letter-back { margin:30px 0 0; max-width:68ch; text-align:right; }
.letter-back a { display:inline-block; font-family:'Josefin Sans',sans-serif; font-size:11px;
                 letter-spacing:0.22em; text-transform:uppercase; color:#6b6b6b; text-decoration:none;
                 padding:17px 0 17px 20px; margin:-17px 0;   /* 45px target, same look */
                 transition:color .2s ease; }
.letter-back a:hover, .letter-back a:focus-visible { color:var(--crimson); }

/* ─── Reading progress — superseded 2026-09-26 by the folio rule (folio.css),
   which also shows which letter the reader is in. ─── */

@media (max-width: 600px) {
  .letters-toc { margin-bottom: 56px; }
  .letters-toc a { grid-template-columns:40px minmax(0,1fr); padding:12px 0; }
  .letters-toc .toc-title { font-size:15px; }
  .letter-back { margin-top: 24px; }
}

/* 2026-09-16 meeting — "make sure all the testimonials are word to word the same,
   even the ending". Fourteen letters had lost the name they were signed with; each
   is restored from his CV. A signature sits tight under its sign-off, as on paper. */
.letter-body p.signature { font-style: normal; font-weight: 500; color: #3a3a3a; line-height: 1.6; }
.letter-body p.signoff + p.signature { margin-top: 4px; }

/* ─── 2026-09-24 — the CV's bulleted list in the Mahaffy letter ───
   The CV sets these thirteen items as bullets; they had been plain paragraphs. */
.letter-body .letter-list {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7;
  color: #3a3a3a; max-width: 68ch; margin: 0 0 1.2em; padding-left: 1.3em;
}
.letter-body .letter-list li { margin: 0 0 0.45em; padding-left: 0.2em; }
.letter-body .letter-list li::marker { color: var(--crimson); }
@media (max-width: 600px) { .letter-body .letter-list { font-size: 15.5px; } }

/* ══════════════════════════════════════════════════════════════════
   2026-09-26 — LETTERS AS SHEETS
   Kiarash: the page is long and the reader must always know where they
   are; nothing in the letters changes. Nineteen letters ran together as
   one column of cream prose split by hairlines. Each is now its own sheet
   of paper laid on the page, a shade lighter than the cream, so a letter
   has an edge: where it starts, where it ends, that the next is another
   hand. Its number sits top right like a folio on letter paper. The same
   sheets are what the scroll edition stacks, one over the last.
   The running head and the folio rule are assets/css/folio.css.
   ══════════════════════════════════════════════════════════════════ */
:root { --paper: #FBF9F5; }

.letter {
  background: var(--paper);
  border: 1px solid rgba(117,38,31,0.10);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(42,42,42,0.04), 0 26px 48px -38px rgba(42,42,42,0.34);
  padding: 60px 68px 52px;
  margin-bottom: 40px;
}
.letter:last-of-type { padding-bottom: 52px; }

/* Letterhead: the heading, its rule, and the number in the top-right corner */
.letter-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: start; margin-bottom: 30px; }
.letter-head h2 { grid-column: 1; grid-row: 1; }
.letter-head::after { grid-column: 1; }
.letter-num {
  grid-column: 2; grid-row: 1; margin: -4px 0 0;
  font-size: 30px; line-height: 1; letter-spacing: 0.04em;
  color: var(--crimson);
}
.letter-back { margin-top: 36px; }

@media (max-width: 900px) {
  .letter { padding: 48px 40px 44px; margin-bottom: 32px; }
  .letter:last-of-type { padding-bottom: 44px; }
}
/* Phones: the sheet runs edge to edge and the page's gutter moves inside it,
   so no line of a letter gets shorter than it was. */
@media (max-width: 600px) {
  .letter {
    margin-inline: -22px; padding: 40px 22px 36px;
    border-inline: 0; border-radius: 0; margin-bottom: 16px;
    box-shadow: none;                /* edge to edge, a shadow only muddies the gap */
  }
  .letter:last-of-type { padding-bottom: 36px; }
  .letter-head { column-gap: 18px; margin-bottom: 26px; }
  .letter-num { font-size: 22px; margin-top: -1px; }
  .letter-back { margin-top: 28px; }
}