/* 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);
}

/* The four introductions, read one at a time through the figure beside them. The choice is one
   piece of state and it moves both: the buttons are the same control the front page uses for
   fig. 1, so a reader who has met them there meets them again here. Geometry from the handoff. */
.cohort-page .cohort-lens { padding-top: 42px; }
.cohort-page .role-explorer [hidden] { display: none; }
.cohort-page .lenses {
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--mono); font-size: 12.5px;
}
.cohort-page .lens-btn {
  font: inherit; background: none; border: 0; padding: 6px 0;
  border-bottom: 1px solid transparent; color: var(--muted); letter-spacing: 0.02em;
  cursor: pointer;
}
.cohort-page .lens-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.cohort-page .lens-btn:hover { color: var(--moss); }
.cohort-page .lens-btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 5px; }
.cohort-page .role-overview {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 54px;
  align-items: start; margin-top: 36px;
}
.cohort-page .role-copy { min-width: 0; }
.cohort-page .role-introduction .seat-name { margin-bottom: 16px; }
.cohort-page .seat-name { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.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 .role-introduction .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; margin-top: 14px;
  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 .role-introduction > p:last-child {
  margin-top: 26px; font-size: 22px; line-height: 1.55; color: var(--body); text-wrap: pretty;
}
.cohort-page .role-overview .figure {
  display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0;
}
.cohort-page .role-overview .figure svg { width: 100%; height: auto; display: block; }
.cohort-page .role-overview .caption {
  font-family: var(--mono); font-size: 11.5px; color: var(--mono-2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* The caption reads on two lines rather than pushing the page sideways. `nowrap` kept the
   description on one line, and on a 360px screen that one line was wider than the screen: the
   document scrolled, in every lens. The version stamp is short enough to keep whole. */
.cohort-page .role-overview .caption span:last-child { white-space: nowrap; }
@media (max-width: 760px) {
  .cohort-page .role-overview { grid-template-columns: 1fr; gap: 28px; }
  .cohort-page .role-introduction > p:last-child { font-size: 20px; }
}

/* 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; }

@media (max-width: 520px) {
  .cohort-page .cohort-wrap { padding: 32px 20px 96px; }
}

/* #83 · Design's own account, after the record already here. A different shape from that one —
   one participant accounting for what they made and for what happened when it came back — so it
   is written as its own section rather than bent onto the four-seat record above it.

   Tokens, not the literals the approved preview inlined, because the note at the top of this file
   says so: #4d6a3f and #6b665b are exactly --moss and --muted. Its #d8d2c4 hairline is not exactly
   --hair (#d9d3c5); the token is used, so this page's rules still move together when a token does,
   and the PR says what that costs — one value per channel, on a hairline. */
.cohort-page .design-record { border-top: 1px solid var(--hair); margin-top: 72px; padding: 48px 0; }
.cohort-page .design-record h2 { font-weight: 400; font-size: clamp(30px, 4vw, 48px); margin: 20px 0 30px; }
.cohort-page .record-prose { max-width: 740px; }
.cohort-page .record-prose p { margin: 0 0 24px; }
.cohort-page .record-encounter { max-width: 800px; margin: 40px auto; }
.cohort-page .record-encounter figure { margin: 0; }
.cohort-page .encounter-drawing { display: block; width: 100%; height: auto; }
.cohort-page .drawing-history {
  margin: 32px 0; padding: 22px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.cohort-page .drawing-history > summary { cursor: pointer; font: 14px/1.7 var(--mono); }
.cohort-page .iteration { margin: 20px 0; padding: 18px; border: 1px solid var(--hair); }
.cohort-page .iteration p { max-width: 740px; }
.cohort-page .iteration img { display: block; width: 100%; height: auto; max-width: 950px; margin: 24px auto; }
.cohort-page .record-signature { font: 12px/1.7 var(--mono); color: var(--moss); }
/* This page had no disclosures before #83, so it carried no focus ring for one. Every other page
   that opens something adds its own; this is that rule, at the same weight and offset. A summary
   a keyboard can reach and cannot see is not operable. */
.cohort-page summary:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }