/* pages/about — About, Questions, Come back later and the Legal documents (docs/DESIGN.md §6).
   One sheet, because the layout links this file for all four routes; every rule is scoped under its
   page root (.about-page, .questions-page, .later-page, .legal-page). White ground, one mild grey
   step for alternating sections, hairlines as the only separators, no numbered apparatus and no
   running mark. Guest sheet: guest vocabulary only. */

.about-page, .questions-page, .later-page, .legal-page { background: var(--bg); --page-top: clamp(2.75rem, 5vw, 5.5rem); }

/* Section rhythm, as on the home page: alternate white and mist, never mechanically. */
.about-page .section { padding-block: var(--section-gap); }
.about-page .section--mist { background: var(--bg-2); }
.about-page .section + .section:not(.section--mist) { padding-block-start: 0; }
.about-page .section--mist + .section:not(.section--mist) { padding-block-start: var(--section-gap); }

/* A section head used three times on About: eyebrow + title left, one lead right, hung on the baseline. */
.about-page .sec-head { align-items: end; row-gap: 1.25rem; margin-block-end: clamp(2.5rem, 6vw, 4.5rem); }
.about-page .sec-head h2 { margin: .5rem 0 0; max-width: 15ch; }
.about-page .sec-head__lead { color: var(--fg-2); max-width: 40ch; padding-block-end: .35rem; }

/* =================================================================================================
   ABOUT — the people · why we started · the standard · from the mailbox
   ================================================================================================= */

/* 1. Head: copy at column 1, one still running off the right edge — the page's single asymmetry. */
.about-head { padding-block: var(--page-top) var(--section-gap); }
.about-head__grid { align-items: start; row-gap: clamp(2rem, 5vw, 3.5rem); }
.about-head__copy { display: flex; flex-direction: column; align-items: flex-start; }
/* The copy hangs from the top of the still, optically level with the image inside its mat. */
@media (min-width: 64em) { .about-head__copy { padding-block-start: clamp(1.5rem, 2.5vw, 2.25rem); } }
.about-head__eyebrow { margin-block-end: clamp(1rem, 2.5vw, 2rem); }
.about-head__title { font-size: var(--t-display-l); line-height: .98; letter-spacing: -.025em; margin: 0; max-width: 12ch; }
.about-head__lead { margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 40ch; color: var(--fg-2); }
.about-head__note { margin-block-start: 1.1rem; max-width: 38ch; color: var(--fg-3); }
.about-head__plate { margin-inline-end: calc(var(--margin) * -1); padding: 0; background: none; }

@media (max-width: 63.98em) {
  .about-head__plate { margin-inline: calc(var(--margin) * -1); }
  .about-head__plate.mat--1x1 { aspect-ratio: 4 / 3; }
  .about-head__title { max-width: 16ch; }
}

/* 2. Why we started: a measured column of prose, one quoted line beside it. */
.about-why__body { row-gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.about-why__prose { display: flex; flex-direction: column; gap: 1.25rem; }
.about-why__prose p { color: var(--fg-2); max-width: 52ch; }

.about-why__quote { position: relative; margin: 0; padding-block-start: clamp(1.5rem, 3vw, 2rem); border-block-start: 1px solid var(--line-2); }
.about-why__quote::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; width: 2.5rem; height: 1px; background: var(--accent-bright); }
.about-quote { margin: 0; }
.about-quote p { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--fg); max-width: 20ch; margin: 0; text-wrap: balance; }
.about-quote__foot { display: flex; flex-direction: column; gap: .4rem; margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem); }
.about-quote__cite { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.about-quote__note { font-size: var(--t-small); color: var(--fg-3); max-width: 32ch; }

/* 3. The standard: four commitments, two up, each under a hairline with a teal tick. */
.about-standard__list { list-style: none; margin: 0; padding: 0; row-gap: clamp(2rem, 4vw, 3rem); }
.about-standard__item { grid-column: span 6; position: relative; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.about-standard__tick { position: absolute; inset-block-start: -1px; inset-inline-start: 0; width: 2.5rem; height: 1px; background: var(--accent-bright); }
.about-standard__title { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .6rem; max-width: 24ch; }
.about-standard__body { color: var(--fg-2); margin: 0; max-width: 48ch; }
.about-standard__plate { margin-block-start: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 64em) {
  .about-standard__item:nth-child(odd) { padding-inline-end: var(--gap); }
}
@media (max-width: 63.98em) {
  .about-standard__item { grid-column: span 6; }
  .about-standard__plate.mat--16x9 { aspect-ratio: 3 / 2; }   /* a phone-width 16:9 is a letterbox */
}
@media (max-width: 39.98em) {
  .about-standard__item { grid-column: span 4; }
}

/* 4. From the mailbox: three letters, upright, initials and month only, one disclosure line. */
.about-letters__list { list-style: none; margin: 0; padding: 0; row-gap: clamp(2rem, 4vw, 3rem); }
.about-letters__item { grid-column: span 4; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line-2); }
.about-letters__figure { margin: 0; }
.about-letter { margin: 0; }
.about-letter__text { font-size: var(--t-lead); font-style: normal; font-weight: 400; line-height: 1.35; color: var(--fg); margin: 0; max-width: 32ch; text-wrap: pretty; }
.about-letter__text::before { content: "\201C"; }
.about-letter__text::after { content: "\201D"; }
.about-letter__cite { margin-block-start: 1.1rem; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.about-letters__note { margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--fg-3); }

@media (max-width: 63.98em) { .about-letters__item { grid-column: span 6; } }
@media (max-width: 39.98em) { .about-letters__item { grid-column: span 4; } }

/* 5. Foot — a coda rather than a section: a hairline and two ways on. The first selector matches the
   rhythm rule above class for class, and comes later, so the coda keeps its tighter measure. */
.about-page .section--mist + .section.about-foot,
.about-page .about-foot { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.about-foot__row { padding-block-start: clamp(1rem, 2vw, 1.5rem); }

/* =================================================================================================
   QUESTIONS — a heading that stays put, an accordion beside it, the members' set beneath
   ================================================================================================= */
.questions { padding-block: var(--page-top) var(--section-gap); }
.questions__grid { row-gap: clamp(2rem, 4vw, 3rem); }
.questions__sticky { display: flex; flex-direction: column; align-items: flex-start; }
.questions__title { margin: clamp(.75rem, 2vw, 1.5rem) 0 0; max-width: 9ch; font-size: var(--t-display-l); line-height: .98; letter-spacing: -.025em; overflow-wrap: normal; }
.questions__lead { margin-block-start: var(--gap); color: var(--fg-2); max-width: 32ch; }
.questions__link { margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem); }

.questions__acc { margin: 0; }
.questions__acc .acc__t { font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.questions__acc .acc__btn { transition: color var(--d-hover) var(--ease-out); }
.questions__acc .acc__btn:hover .acc__t { color: var(--fg); }
.questions__acc .acc__sign { color: var(--fg-3); }
.questions__acc .acc__btn[aria-expanded="true"] .acc__sign { color: var(--mark); }
.questions__acc .acc__body .prose { color: var(--fg-2); }
.questions__acc .acc__body .prose p + p { margin-block-start: .9em; }
.questions__members { margin-block-start: clamp(3rem, 6vw, 5rem); }
.questions__members-eyebrow { margin-block-end: var(--gap); }

@media (min-width: 64em) {
  .questions__sticky { position: sticky; top: calc(var(--nav-h) + var(--block)); }
  .questions__main { padding-block-start: .35rem; }
  .questions__acc .acc__btn { padding-block: 1.75rem; }
}
@media (max-width: 63.98em) {
  .questions__main { margin-block-start: clamp(2rem, 5vw, 3rem); }
}

/* =================================================================================================
   COME BACK LATER — the gate's "No": white, a hairline frame, one line and the way out
   ================================================================================================= */
.later { position: relative; }
.later__inner { display: grid; align-items: center; min-height: 100dvh; padding-block: calc(var(--nav-h) + var(--block)) var(--block); }
.later__inner::before { content: ""; position: absolute; inset: 24px; border: 1px solid var(--line); pointer-events: none; }
.later__title { margin-block-start: clamp(.75rem, 2vw, 1.5rem); max-width: 10ch; }
.later__lead { margin-block-start: var(--gap); color: var(--fg-2); max-width: 42ch; }
.later__legal { margin-block-start: calc(var(--block) * .75); color: var(--fg-3); }
.later__legal a { color: var(--fg-3); }
.later__legal a:hover { color: var(--fg); }
@media (max-width: 63.98em) { .later__inner::before { inset: 16px; } }

/* =================================================================================================
   LEGAL — a document: eyebrow, headline, lead, a meta ledger, a contents column, numbered sections
   ================================================================================================= */
.legal { padding-block: var(--page-top) var(--section-gap); }
.legal__head { align-items: end; row-gap: calc(var(--block) * .5); }
.legal__title { margin-block-start: clamp(.75rem, 2vw, 1.5rem); max-width: 11ch; }
.legal__lead { margin-block-start: var(--gap); color: var(--fg-2); max-width: 52ch; }
.legal__meta { margin-block-end: .35rem; }
.legal__meta .ledger__key, .legal__meta .ledger__val { font-size: var(--t-small); }
.legal__meta .ledger__val { color: var(--fg-2); }
.legal__body { margin-block-start: clamp(2.5rem, 5vw, 4rem); row-gap: var(--block); }

/* contents */
.legal__toc-list { display: flex; flex-direction: column; border-block-start: 1px solid var(--line); margin-block-start: 1rem; }
.legal__toc-item { border-block-end: 1px solid var(--line); }
.legal__toc-link {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: baseline;
  padding: .7rem 0; font-size: var(--t-small); line-height: 1.35; color: var(--fg-3);
  transition: color var(--d-hover) var(--ease-out);
}
.legal__toc-link:hover, .legal__toc-link:focus-visible, .legal__toc-link[aria-current="true"] { color: var(--fg); }
.legal__toc-link[aria-current="true"] .legal__toc-n { color: var(--mark); }
.legal__toc-n { font-variant-numeric: tabular-nums; color: var(--fg-3); transition: color var(--d-hover) var(--ease-out); }
.legal__toc-t { text-wrap: pretty; }

/* sections */
.legal__sections { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); }
.legal-section { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--gap); scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.legal-section__n { grid-column: 1; font-size: var(--t-small); font-variant-numeric: tabular-nums; color: var(--fg-3); padding-block-start: .35em; }
.legal-section__title { grid-column: 2; font-size: var(--t-h3); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; max-width: 26ch; }
.legal-section__body { grid-column: 2; margin-block-start: 1rem; }
.legal-section__body > p:first-child { color: var(--fg-2); }
.legal-section__body table { margin-block-start: 1.5em; }
.legal-section__body th:first-child, .legal-section__body td:first-child { width: 9.5rem; padding-inline-end: var(--gap); font-variant-numeric: tabular-nums; }
.legal-section__body td { color: var(--fg-2); }
.legal-section__body td:last-child { color: var(--fg-3); font-size: var(--t-small); white-space: nowrap; }
.legal-section__body em { font-family: inherit; font-style: normal; font-size: 1em; color: var(--fg-3); }   /* the bracketed placeholders counsel still has to settle */

/* foot: a hairline, the other documents, the ask */
.legal__foot { margin-block-start: clamp(3rem, 6vw, 5rem); }
.legal__foot-row { display: flex; flex-wrap: wrap; gap: var(--gap) calc(var(--block) * 1.5); align-items: baseline; justify-content: space-between; padding-block-start: var(--gap); }
.legal__docs { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: baseline; }
.legal__docs .eyebrow { margin-inline-end: .5rem; }
.legal__doc {
  font-size: var(--t-small); color: var(--fg-3); padding-block: .35rem;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: right calc(100% - .2rem);
  transition: background-size var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.legal__doc:hover, .legal__doc:focus-visible, .legal__doc.is-current { color: var(--fg); background-size: 100% 1px; background-position: left calc(100% - .2rem); }
.legal__ask { font-size: var(--t-small); color: var(--fg-3); }

@media (min-width: 64em) {
  .legal__toc-inner { position: sticky; top: calc(var(--nav-h) + var(--block) * .5); padding-inline-end: var(--gap); }
  .legal__sections { padding-block-start: .35rem; }
}
@media (max-width: 63.98em) {
  .legal__meta { max-width: 26rem; }
  .legal__toc-list { columns: 2; column-gap: var(--gap); display: block; }
  .legal__toc-item { break-inside: avoid; }
  .legal-section { grid-template-columns: 2rem minmax(0, 1fr); }
  .legal__sections { gap: var(--block); }
}
@media (max-width: 39.98em) {
  .legal__toc-list { columns: 1; }
  .legal-section { grid-template-columns: 1fr; }
  .legal-section__n, .legal-section__title, .legal-section__body { grid-column: 1; }
  .legal-section__n { padding: 0; margin-block-end: .35rem; }
  .legal-section__body td:last-child { white-space: normal; }
}

/* ---- Reduced motion / Still: nothing on these pages moves except colour ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .legal__toc-link, .legal__toc-n, .legal__doc, .questions__acc .acc__btn { transition: none; }
}