/* Compliance and reference pages: Investor Charter, Accessibility statement,
   Report an accessibility problem, Image credits.

   One grid for the whole page, so everything starts on one of two vertical
   lines. The left rail holds the eyebrow, then the page contents (or, on the
   report page, the other ways to reach us). The main column holds the title,
   the lede, the at-a-glance strip and the text, capped at a reading measure.
   Loaded after pages.css and before type.css. */

:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"], body[data-page="credits"]) {
  --rail: 220px;
  --rail-gap: clamp(28px, 5vw, 80px);
  --measure: 68ch;
}
body[data-doc="report"] { --rail: clamp(260px, 28%, 340px); }
:is(body[data-page="privacy"], body[data-page="disclaimer"]) { --rail: 220px; --rail-gap: clamp(28px, 5vw, 80px); --measure: 68ch; }
:is(body[data-page="privacy"], body[data-page="disclaimer"]) .draft-banner { max-width: calc(min(100%, var(--shell)) - 2 * var(--gutter)); }
.doc__body.prose h2 { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.15; }
.doc__body.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc__body.prose p, .doc__body.prose li { font-size: 1rem; line-height: 1.65; }
.doc__meta { margin-top: 36px !important; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--muted); }

/* the draft notice sits on the same content edges as everything else */
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .draft-banner {
  max-width: calc(min(100%, var(--shell)) - 2 * var(--gutter));
}

/* ---------------------------------------------------------------- head */
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head .shell,
.doc__head {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--rail-gap);
  align-items: start;
}
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head .shell > *,
.doc__head > * { grid-column: 2; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head .eyebrow,
.doc__head .eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-top: 0.9em; /* sits level with the first line of the title */
}
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head h1,
.doc__title {
  grid-row: 1;
  margin: 0 !important;
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
  line-height: 1.02;
}
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head .lede,
.doc__lede {
  margin-top: 20px;
  max-width: var(--measure);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .statement-meta { max-width: var(--measure); }

/* ---------------------------------------------------------------- body */
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .doc-layout {
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--rail-gap);
}
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .doc-contents { top: calc(var(--header-h, 72px) + 40px); }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .doc-contents h2 { font-family: var(--face-text); font-size: 0.75rem; letter-spacing: 0.12em; margin: 0 0 12px; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .doc-contents a { font-size: 0.9rem; line-height: 1.35; padding-block: 8px; }

:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .prose { max-width: var(--measure); }
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .prose p,
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .prose li { font-size: 1rem; line-height: 1.65; }

/* sections open on a hairline rule with one fixed rhythm */
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose h2 {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem);
  line-height: 1.15;
  scroll-margin-top: calc(var(--header-h, 72px) + 32px);
}
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose .glance + h2,
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose > h2:first-child { margin-top: 0; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose h3 { margin-top: 28px; font-family: var(--face-text); font-size: 1.05rem; font-weight: 700; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .prose ul,
:is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .prose ol { padding-left: 1.2em; }

/* at a glance: four equal cells across the full measure */
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .glance { margin: 0 0 48px; grid-auto-rows: 1fr; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .glance > * { padding: 20px 18px 22px; gap: 8px; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .glance__value { font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.75rem); letter-spacing: -0.02em; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .glance__label { font-size: 0.85rem; line-height: 1.45; }

/* tables in the charter keep to the measure and read as ruled rows */
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose th,
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
:is(body[data-page="investor-charter"], body[data-page="accessibility"]) .prose th { font-family: var(--face-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* report page: the other ways to reach us sit in the rail, the form in the
   main column at a comfortable form width, both starting on one top line */
body[data-doc="report"] .split {
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--rail-gap);
  align-items: start;
}
body[data-doc="report"] .split > .prose { font-size: 0.95rem; }
body[data-doc="report"] .split > .prose h2 { font-size: 1.1rem; margin-top: 32px; line-height: 1.2; }
body[data-doc="report"] .split > .prose h2:first-child { margin-top: 0; }
body[data-doc="report"] .split > .prose p { font-size: 0.95rem; }
body[data-doc="report"] .split > div:last-child { max-width: 640px; }
body[data-doc="report"] .split > div:last-child > h2 { margin-top: 0; line-height: 1.2; }

/* credits page */
.doc { padding-block: clamp(44px, 7vw, 84px) clamp(56px, 8vw, 110px); }
.doc__head { padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--rule); }
.doc__body { margin-left: calc(var(--rail) + var(--rail-gap)); max-width: var(--measure); padding-top: clamp(28px, 4vw, 48px); }
.credits-page { list-style: none; padding: 0; margin: 0; }
.credits-page li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.credits-page__what { font-family: var(--face-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.credits-page__src { font-size: 0.95rem; color: var(--ink-soft); }
.credits-page a { text-decoration: underline; text-underline-offset: 0.15em; }


@media (max-width: 900px) {
  :is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head .shell,
  .doc__head,
  :is(body[data-page="investor-charter"], body[data-page="accessibility"]) .doc-layout,
  body[data-doc="report"] .split { grid-template-columns: 1fr; }
  :is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head .shell > *,
  .doc__head > * { grid-column: 1; grid-row: auto; }
  :is(body[data-page="investor-charter"], body[data-page="accessibility"], body[data-doc="report"]) .page-head .eyebrow,
  .doc__head .eyebrow { padding-top: 0; margin-bottom: 16px; }
  .doc__body { margin-left: 0; }
  body[data-doc="report"] .split > .prose { order: 2; }
}

/* audit facts on the accessibility statement */
.audit-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 20px; }
.audit-facts > div { padding: 14px 16px 14px 0; }
.audit-facts > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.audit-facts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.audit-facts dd { margin: 4px 0 0; font-size: 1rem; }
@media (max-width: 560px) { .audit-facts { grid-template-columns: 1fr; } .audit-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }