/* page.css — the shared shape of every page, after the homepage.
 *
 * The homepage set the rule: a quiet menu bar, one small centred group, and a
 * two-row footer. A content page keeps that rule and adds only a reading
 * column under it:
 *
 *   .page-intro   the page's name in the display face and one line under it,
 *                 centred, with the room around it the homepage has;
 *   .page-body    one narrow column of the page's own words;
 *   .more         a section folded shut, so the page opens short and nothing
 *                 has to be deleted to get there;
 *   .foot         the footer the homepage uses (status line, then © / Privacy).
 *
 * Colours and type are design.css's. Page stylesheets (os/app.css,
 * economy/economy.css, …) still style their own tables and panels inside.
 */

/* Header, content, footer: the footer sits on the bottom of the screen even
   when a page is short, as it does on the homepage. minmax(0, …) keeps a
   wide table from widening the whole page; tables scroll inside .scroll-x. */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Intro ----------------------------------------------------------- */
.page-intro {
  text-align: center;
  padding: clamp(56px, 12vh, 128px) var(--pad-x) clamp(36px, 6vh, 60px);
}
.page-intro__title {
  margin: 0 auto;
  max-width: none;
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .04em;
}
.page-intro__line {
  margin: 14px auto 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--bone-2);
}
/* A verification state, when the page has one ("Designed", "Measured"). */
.page-intro__state { margin: 18px 0 0; }

/* ---- Reading column -------------------------------------------------- */
.page-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(64px, 11vh, 120px);
}
.page-body > p,
.page-body .more__body > p { color: var(--bone-2); }
.page-body h2 {
  margin: 0 0 12px;
  max-width: none;
  font-size: clamp(19px, 1.8vw, 22px);
  letter-spacing: -.01em;
  line-height: 1.3;
}
/* Only the column's own prose, not lists and headings inside a page's cards
   and panels, which their page stylesheets set. design.css sets headings at
   line-height 1.02 for display sizes; at reading size that is cramped once a
   heading wraps. */
.page-body > h3,
.more__body > h3 { margin: 22px 0 8px; font-size: 17px; line-height: 1.35; }
.page-body > ul,
.more__body > ul { padding-left: 1.2em; color: var(--bone-2); }
.page-body > ul > li,
.more__body > ul > li { margin: 0 0 6px; }
.page-body .small { color: var(--bone-3); }
/* A link that leaves the page: underlined word, up-right arrow, as on the
   homepage's News link. */
.page-link {
  color: var(--bone);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.page-link:hover { color: var(--flux); }

/* ---- Folded sections ------------------------------------------------- */
/* A plain <details>: it opens with the keyboard, with find-in-page, and with
   no script at all. */
.more { border-top: 1px solid var(--rule); }
.more:last-of-type { border-bottom: 1px solid var(--rule); }
.more + :not(.more) { margin-top: 32px; }
.more > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bone);
  cursor: pointer;
  list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  color: var(--bone-3);
}
.more[open] > summary::after { content: "\2212"; }
.more > summary:hover { text-decoration: underline; text-underline-offset: .22em; }
.more__body { padding: 0 0 26px; }
.more__body > :last-child { margin-bottom: 0; }

/* ---- Footer ---------------------------------------------------------- */
/* Two rows, as on a search engine's front page: where things stand, then the
   small print. */
.foot {
  font-size: 14px;
  color: var(--bone-2);
  background: var(--st-1);
}
.foot__status {
  margin: 0;
  max-width: none;
  padding: 14px clamp(16px, 2.4vw, 32px);
  border-bottom: 1px solid var(--rule);
}
.foot__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px clamp(16px, 2.4vw, 32px);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--bone-2); border-bottom: 0; }
.foot a:hover { color: var(--bone); text-decoration: underline; }

@media (max-width: 640px) {
  .foot__status { text-align: center; }
  .foot__row { justify-content: center; text-align: center; }
}