/* Fettler. Subpage additions. Loaded after styles.css, which owns every
   token, the header, the footer, the spec grid and the artefact tables. Nothing
   here restates those; this file only adds what the launch subpages need. */

:root {
  --fs-page-h1: 48px;
}

/* Breadcrumb, above the page heading. Archivo, never mono, because no machine
   produced it. The separator is drawn in CSS so it is not read aloud. */
.crumbs { padding-top: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1); }
.crumbs li { font-size: var(--fs-small); line-height: 1.45; letter-spacing: 0.005em;
  color: var(--ink-2); font-variation-settings: "wdth" 92, "wght" 500; }
.crumbs li + li::before { content: "/"; color: var(--rule); margin-right: var(--s1); }
.crumbs a { text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { border-bottom-color: var(--oxide); }
}
.crumbs [aria-current="page"] { color: var(--ink); }

/* Subpage opening block. Smaller than the homepage display, still the page's
   loudest voice, and it sits above the margin rule rather than inside it. */
.page-head { padding-top: var(--s3); padding-bottom: var(--s5); }
.page-h1 { font-size: var(--fs-page-h1); line-height: 1.02; letter-spacing: -0.02em;
  font-variation-settings: "wdth" 114, "wght" 620; max-width: 20ch; }
.page-head .lead { margin-top: var(--s3); }
.page-head .credential { max-width: 56ch; }
.page-head .actions { margin-top: var(--s4); }

/* Spacing between a subpage heading, its lead and the paragraph beneath it.
   styles.css sets these only for the homepage layouts. */
.page-h1 + .lead { margin-top: var(--s3); }
.lead + .body { margin-top: var(--s3); }

/* A prose table: the ledger's frame, but Archivo cells, for content a person
   wrote rather than a run produced. */
.rtable { width: 100%; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--radius); border-collapse: collapse; text-align: left; }
.rtable thead th { font-family: var(--mono); font-size: var(--fs-mono-h); font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink-2); padding: var(--s2) 12px;
  border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.rtable td, .rtable tbody th { font-family: var(--sans); font-size: var(--fs-body);
  line-height: 1.62; font-weight: 400; padding: var(--s2) 12px; vertical-align: top;
  border-bottom: 1px solid var(--rule); }
.rtable tbody th { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; width: 190px; }
.rtable tbody tr:last-child td, .rtable tbody tr:last-child th { border-bottom: 0; }
.rtable .c-owner { color: var(--ink-2); width: 170px; }
.rtable .c-mono { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-2); }

/* A document check panel: the run strip's frame, wider cells, no time column. */
.doctable td { vertical-align: top; }
.doctable .c-state { width: 150px; white-space: normal; }
.doctable th.c-state { width: 150px; }

/* The caption a synthetic example carries when it sits outside a table. */
.demo-note { font-size: var(--fs-small); line-height: 1.45; letter-spacing: 0.005em;
  color: var(--ink-2); margin-top: var(--s1); }

/* Grouped lists. Used for the manufacturing backlog and the workflow prompts. */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--marker-gap); row-gap: var(--s4); margin-top: var(--s4); }
.group { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.group h3 { margin-bottom: var(--s2); }
.group ul { display: grid; row-gap: var(--s1); }
.group li { position: relative; padding-left: var(--s2); font-size: var(--fs-body);
  line-height: 1.62; }
.group li::before { content: ""; position: absolute; left: 0; top: 11px;
  width: 4px; height: 4px; background: var(--rule); }

/* Step blocks: a mono week range, then a heading, then the body. */
.steps { display: grid; row-gap: var(--s4); margin-top: var(--s4); }
.steps > li { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.steps .when { font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.5;
  color: var(--ink-2); margin-bottom: var(--s1); }
.steps .body { margin-top: var(--s1); }
.steps .body + .body { margin-top: var(--s2); }

/* A short block of onward links, closing a section. */
.onward { border-top: 1px solid var(--rule); margin-top: var(--s4); padding-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s3); }
.onward a { font-size: var(--fs-body); }

/* The three prompts on the contact page. */
.prompts { counter-reset: p; display: grid; row-gap: var(--s3); margin-top: var(--s4); }
.prompts li { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.prompts .prompt { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; }
.prompts .body { margin-top: var(--s1); color: var(--ink-2); }

/* The privacy notice and any other single-column document page. */
.doc h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em;
  font-variation-settings: "wdth" 104, "wght" 600; margin-top: var(--s5); }
.doc .small { margin-top: var(--s3); }
.doc .rules-list { margin-top: var(--s3); }

/* The 404 page. Its section headings are h2 for document order, set at h3 size. */
.gone { max-width: 640px; }
.as-h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; }
.gone .actions { margin-top: var(--s4); }

@media (max-width: 1080px) {
  .rtable tbody th { width: 150px; }
  .rtable .c-owner { width: 140px; }
}

@media (max-width: 859px) {
  :root { --fs-page-h1: 38px; }
  .page-head { padding-top: var(--s2); padding-bottom: var(--s4); }
  .crumbs { padding-top: var(--s3); }
  .groups { grid-template-columns: 1fr; }
  .rtable { min-width: 520px; }
  .doctable { min-width: 460px; }
  .onward { flex-direction: column; gap: var(--s2); }
  .doc h2 { font-size: 27px; margin-top: var(--s4); }
}

/* A clarifying paragraph immediately beneath an artefact panel. */
.after-panel { margin-top: var(--s3); }

/* Subpage phone layouts share the main document's type and touch scale. */
@media (max-width: 1080px) {
  .crumbs li { min-width: 0; overflow-wrap: anywhere; }
  .crumbs a { vertical-align: middle; }
}
@media (max-width: 859px) {
  .page-head { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 719px) {
  .rtable, .rtable tbody, .rtable tr { display: block; width: 100%; min-width: 0; }
  .rtable thead { display: none; }
  .rtable tr { padding: 24px 12px; border-bottom: 1px solid var(--rule); }
  .rtable tr:last-child { border-bottom: 0; }
  .rtable tbody th, .rtable td, .rtable .c-owner { display: block; width: auto;
    padding: 0; border: 0; overflow-wrap: anywhere; }
  .rtable td { margin-top: 16px; }
  .rtable td::before { content: attr(data-label); display: block; font-weight: 600;
    font-size: var(--fs-mono-h); color: var(--ink-2); margin-bottom: 4px; }
  .reflow-hint { display: none; }
  .actions a[href^="mailto:"] { width: 100%; }
  .gone a { display: flex; min-height: 48px; }
  .gone .rules-list a { width: 100%; }
}

@media (max-height: 499px) and (max-width: 1080px) {
  :root { --fs-page-h1: 38px; }
  .page-head { padding-top: 64px; padding-bottom: 64px; }
  .doc h2 { font-size: 27px; }
}