/* The Cohort page, at the geometry the accepted prototype authored. Every rule is under
   .cohort-page, so nothing here reaches the homepage, a note, a work page or the practice page —
   which matters more here than it did for the practice page, because several of these class names
   (.reserved, .figure, .caption, .cta) are names other pages already use for their own things.

   The colours and faces are the shared tokens from site.css rather than repeated values, so a
   token change still moves this page with the rest of the site. Defaults are set to 0 wherever the
   shell specifies a margin, because accumulated heading and paragraph defaults are what pull a
   measured layout out of true. */

.cohort-page { background: var(--paper); color: var(--ink); }
.cohort-page .cohort-wrap {
  max-width: 1080px; margin: 0 auto; padding: 40px 32px 140px; box-sizing: border-box;
  font-family: var(--serif); font-size: 20px; line-height: 1.55;
}
.cohort-page .cohort-wrap h1,
.cohort-page .cohort-wrap h2,
.cohort-page .cohort-wrap p { margin: 0; }

/* Header: back link and stamp on one baseline, over the hairline. */
.cohort-page .cohort-nav {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: 12px 24px; font-family: var(--mono); font-size: 12.5px; color: var(--mono-2);
  padding-bottom: 20px; border-bottom: 1px solid var(--hair);
}
.cohort-page .cohort-nav a,
.cohort-page .cohort-nav .stamp { white-space: nowrap; color: inherit; }

/* Head */
.cohort-page .cohort-head {
  padding-top: 72px; display: flex; flex-direction: column; gap: 20px; max-width: 620px;
}
.cohort-page .cohort-head .eyebrow {
  font-family: var(--mono); font-size: 12.5px; color: var(--mono-2);
}
.cohort-page .cohort-head h1 {
  font-weight: 400; font-size: clamp(38px, 5vw, 58px); line-height: 1.08;
  letter-spacing: -0.01em; text-wrap: balance;
}
.cohort-page .cohort-head .lead { font-size: 22px; color: var(--body); text-wrap: pretty; }
.cohort-page .cohort-head .frame {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--mono-2);
}

/* Seats: one rule above the set, one under each row. Two columns where there is room — who the
   seat is on the left, what it does on the right — and one column where there is not. */
.cohort-page .seats {
  padding-top: 88px; display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--hair);
}
.cohort-page .seat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px 56px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--hair);
}
.cohort-page .seat-who { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cohort-page .seat-name { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cohort-page .seat-name .seat {
  font-family: var(--mono); font-size: 11.5px; color: var(--mono-2); white-space: nowrap;
}
.cohort-page .seat-name h2 { font-weight: 400; font-size: 30px; line-height: 1.15; }
.cohort-page .seat-name h2.moss { color: var(--moss); }
.cohort-page .seat-who .holds { font-size: 21px; color: var(--body); text-wrap: pretty; }
/* A tag is a word, not a button: one hairline, no radius, and a long one wraps inside the page
   rather than pushing it sideways. */
.cohort-page .tags {
  display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 11.5px;
}
.cohort-page .tags .tag {
  border: 1px solid var(--hair); color: var(--mono-2); padding: 4px 9px;
  max-width: 100%; overflow-wrap: anywhere;
}
.cohort-page .seat-what { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cohort-page .seat-what > p { color: var(--body); text-wrap: pretty; }
.cohort-page .pairs {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 16px;
  font-family: var(--mono); font-size: 11.5px; color: var(--mono-2);
}
.cohort-page .pairs .value {
  color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.4;
  text-wrap: pretty;
}
.cohort-page .pairs .value.muted { color: var(--mono-2); }

/* Not yet introduced. No count, and no row of numbered blanks: how much larger the Office is is
   not this page's to say. The names list appears only when a record carries names. */
.cohort-page .reserved {
  padding-top: 72px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px 64px; align-items: start;
}
.cohort-page .reserved-said {
  display: flex; flex-direction: column; gap: 16px; max-width: 440px;
}
.cohort-page .reserved-said .eyebrow {
  font-family: var(--mono); font-size: 12.5px; color: var(--mono-2);
}
.cohort-page .reserved-said > p { color: var(--body); text-wrap: pretty; }
.cohort-page .reserved-said .mono-note {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--mono-2);
}
.cohort-page .reserved .named {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 0 24px;
}
.cohort-page .reserved .named li {
  padding: 14px 0; border-top: 1px solid var(--hair); font-size: 18px;
}

/* Continuity, beside fig. 3 at the geometry it already had. */
.cohort-page .continuity {
  padding-top: 112px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px 64px; align-items: start;
}
.cohort-page .continuity-said {
  display: flex; flex-direction: column; gap: 20px; max-width: 460px;
}
.cohort-page .continuity-said .eyebrow {
  font-family: var(--mono); font-size: 12.5px; color: var(--mono-2);
}
.cohort-page .continuity-said h2 {
  font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; text-wrap: balance;
}
.cohort-page .continuity-said p { color: var(--body); text-wrap: pretty; }
.cohort-page .continuity-said .pull { font-size: 22px; font-style: italic; color: var(--ink); }
.cohort-page .continuity .figure {
  display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.cohort-page .continuity .figure svg { width: 100%; height: auto; display: block; }
.cohort-page .continuity .caption {
  font-family: var(--mono); font-size: 11.5px; color: var(--mono-2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cohort-page .continuity .caption span { white-space: nowrap; }

/* On the record: what each seat said, then where they arrived. A card carries who spoke; it
   carries a date only when one has been verified, and today none has. */
.cohort-page .on-record { padding-top: 112px; display: flex; flex-direction: column; gap: 24px; }
.cohort-page .record-said {
  display: flex; flex-direction: column; gap: 12px; max-width: 560px;
}
.cohort-page .record-said .eyebrow {
  font-family: var(--mono); font-size: 12.5px; color: var(--mono-2);
}
.cohort-page .record-said h2 {
  font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; text-wrap: balance;
}
.cohort-page .record-said > p { color: var(--body); text-wrap: pretty; }
.cohort-page .saids {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px; align-items: start;
}
.cohort-page .saids .said {
  border: 1px solid var(--hair); padding: 18px; display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.cohort-page .saids .who { font-family: var(--mono); font-size: 11.5px; color: var(--mono-2); }
.cohort-page .saids .said p { font-size: 19px; text-wrap: pretty; }
.cohort-page .record-end {
  display: flex; flex-direction: column; gap: 14px; max-width: 620px; padding-top: 8px;
}
.cohort-page .record-end > p { color: var(--body); text-wrap: pretty; }
.cohort-page .record-end .pull { font-size: 22px; font-style: italic; color: var(--ink); }
.cohort-page .on-record .cta { align-self: flex-start; margin-top: 0; }

/* Footer */
.cohort-page .cohort-foot {
  padding-top: 120px; display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 32px; font-family: var(--mono); font-size: 11.5px; color: var(--mono-2);
}
.cohort-page .cohort-foot .stamp { white-space: nowrap; }

/* Narrow: the pairs' fixed 110px key column does not fit a phone beside its value, so the row
   stacks rather than pushing the page sideways. The nominal column minimums above already give
   way through `min(100%, …)`. */
@media (max-width: 520px) {
  .cohort-page .cohort-wrap { padding: 32px 20px 96px; }
  .cohort-page .pairs { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .cohort-page .pairs .key { padding-top: 8px; }
}