/* The cover-sheet system for every page except the homepage (which carries
   the same rules inline, plus its own sections). Ramy picked direction A,
   "Cover sheet", on 2026-10-04 and extended it to the rest of the site on
   2026-10-05: each page is a sheet in the same set, with grey paper space
   around it, a title block down the right edge, black linework on white, and
   one accent blue for actions. Resources is set as a project manual and the
   blog as a surveyor's field book.

   Type is Overpass (Highway Gothic lineage, SIL OFL, self-hosted in
   /assets/fonts) with Overpass Mono for sheet numbers, sections and dates. */

@font-face {
  font-family: "Overpass";
  src: url("/assets/fonts/overpass-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("/assets/fonts/overpass-mono-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --sheet:        #ffffff;
  --line:         #14181d;   /* plotted linework */
  --rule:         #d5dae0;   /* light rules inside a cell */
  --cell:         #f3f5f7;   /* a filled cell, hover ground */

  --navy:         #1E3A5F;
  --accent:       #0b61f4;   /* white text on it: 5.21:1 */
  --accent-hover: #0a55d6;
  --accent-tint:  #eef3fb;

  --ink:          #14181d;
  --ink-2:        #48525e;   /* 7.9:1 on white */
  --ink-3:        #5b6571;   /* 5.9:1 on white: labels, captions */

  /* field book: the red margin line and the blue page rules */
  --fb-red:       #d64a42;
  --fb-blue:      #b9d3ea;

  --ease-out: cubic-bezier(.23,1,.32,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: 16px; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sheet);
  padding: 12px;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: #cfe0fd; color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb-logo :focus-visible, .tb-bar :focus-visible { outline-color: #fff; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: #fff; color: var(--navy); border: 2px solid var(--line);
  padding: 12px 16px; font-size: 14px; font-weight: 700;
}
.skip-link:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sep { margin-right: 0.22em; }
.nw { white-space: nowrap; }   /* sheet numbers such as C2-109 never break at the hyphen */   /* Overpass sets its middle dot flush right */

/* ---------- the sheet ---------- */
.sheet { background: var(--sheet); border: 1px solid var(--line); padding: 10px; }
.sheet-inner { border: 2px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) 272px; }
.draw { min-width: 0; display: flex; flex-direction: column; grid-column: 1; grid-row: 1; }
main { padding: 52px 48px 56px; flex: 1; }

/* ---------- title block ---------- */
.tb-col { border-left: 2px solid var(--line); grid-column: 2; grid-row: 1; }
.tb { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.tb-logo { background: var(--navy); padding: 18px 16px 16px; border-bottom: 2px solid var(--line); }
.tb-logo img { width: 132px; height: auto; display: block; }
.tb-prod { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; margin-top: 10px; }
.tb-prod span { color: rgba(255,255,255,0.68); font-weight: 600; }
.tb-cell { border-bottom: 1px solid var(--line); padding: 10px 16px 12px; }
.tb-label { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.tb-label-vol { margin-top: 14px; }
.tb-index { list-style: none; margin: 0; padding: 0; }
.tb-index a { display: grid; grid-template-columns: 54px 1fr; gap: 4px; align-items: center; min-height: 30px; padding: 3px 4px; margin: 0 -4px; border-top: 1px solid var(--rule); font-size: 13px; font-weight: 600; line-height: 1.25; }
.tb-index li:first-child a { border-top: 0; }
.tb-index .no { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tb-index a:hover { background: var(--cell); }
.tb-index a[aria-current] { background: var(--accent-tint); }
.tb-index a[aria-current] .no { color: var(--accent); }
.tb-vols a { grid-template-columns: 1fr auto; }
.tb-vols .kind { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tb-vols a[aria-current] .kind { color: var(--accent); }
.tb-links a { display: block; padding: 3px 0; font-size: 13px; font-weight: 600; }
.tb-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tb-issue .hero-cta { width: 100%; }
.tb-alt { display: block; text-align: center; font-size: 13px; font-weight: 600; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; }
.tb-sheet { border-bottom: 0; }
.tb-sheet-no { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tb-sheet-no.is-long { font-size: 34px; letter-spacing: 0; }   /* a manual section, "02 30 00" */
.tb-sheet-of { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; }
.tb-bar { display: none; }

/* ---------- buttons ---------- */
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 2px;
  background: var(--accent); color: #fff;
  font-size: 16px; font-weight: 700; line-height: 1;
  transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.hero-cta:hover { background: var(--accent-hover); }
.hero-cta:active { transform: scale(0.97); }

/* ---------- footer: links and the plot stamp ---------- */
.footer { border-top: 2px solid var(--line); padding: 26px 48px 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.footer-links a { font-size: 14px; font-weight: 600; line-height: 1.9; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plot-stamp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--ink-3); text-transform: uppercase; }

/* ---------- page heads ---------- */
.kind-label, .crumb {
  font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.crumb a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.crumb a:hover { color: var(--ink); }
h1 { font-size: clamp(36px, 4.2vw, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.pg-head { border-bottom: 2px solid var(--line); padding-bottom: 28px; margin-bottom: 40px; }
.pg-head h1 { margin-top: 14px; max-width: 24ch; }
.pg-intro { margin-top: 18px; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.pg-intro a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.updated { margin-top: 14px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- running text ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; margin: 52px 0 14px; padding-top: 16px; border-top: 2px solid var(--line); scroll-margin-top: 16px; }
/* the page head already draws a rule above the first heading */
.prose > h2:first-child, .prose > section:first-child > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 19px; font-weight: 800; line-height: 1.3; text-wrap: balance; margin: 32px 0 8px; scroll-margin-top: 16px; }
.prose h4 { font-size: 16px; font-weight: 800; margin: 24px 0 6px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong, .prose b { font-weight: 800; }
.prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--line); font-size: 19px; font-weight: 600; line-height: 1.5; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--cell); border: 1px solid var(--rule); padding: 1px 5px; }
.prose pre { margin: 0 0 18px; background: var(--cell); border: 1.5px solid var(--line); padding: 14px 16px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose hr { border: 0; border-top: 2px solid var(--line); margin: 40px 0; }
.prose img { max-width: 100%; height: auto; display: block; border: 2px solid var(--line); }
.prose figure { margin: 28px 0; }
.prose figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.prose th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 6px 18px 8px 0; border-bottom: 2px solid var(--line); vertical-align: bottom; }
.prose td { padding: 8px 18px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

.callout { margin: 24px 0; border: 1.5px solid var(--line); padding: 14px 18px; }
.callout p { margin: 0; font-size: 15px; color: var(--ink-2); }
.foot-note { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 72ch; }
.foot-note a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- a page with contents beside it ---------- */
/* The contents column only sits beside the text when there is room for a
   readable measure next to it; below that it goes above. */
.with-toc { display: grid; grid-template-columns: minmax(0, 72ch) 248px; justify-content: start; gap: 56px; align-items: start; }
.with-toc > .page-toc { grid-column: 2; grid-row: 1; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.with-toc > :not(.page-toc) { grid-column: 1; grid-row: 1; min-width: 0; }
.page-toc { padding-top: 4px; }
.page-toc ol, .page-toc ul { list-style: none; margin: 0; padding: 0; }
.page-toc a { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: 600; line-height: 1.35; }
.page-toc a:hover { color: var(--accent); }
.page-toc .no { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 1px; }

/* ---------- Resources: the project manual ---------- */
.pm-cover { border: 2px solid var(--line); padding: 34px 36px 32px; text-align: center; }
.pm-cover h1 { font-size: clamp(44px, 5vw, 72px); line-height: 1; margin: 14px auto 10px; }
.pm-cover .kind-label { font-size: 13px; letter-spacing: 0.24em; }
.pm-sub { font-size: 18px; font-weight: 700; color: var(--navy); }
.pm-intro { margin: 18px auto 0; max-width: 62ch; color: var(--ink-2); font-size: 16px; }
.pm-intro a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sheet-break { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 56px 0 28px; font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.sheet-break .rule { border-top: 2px solid var(--line); }
.toc { width: 100%; border-collapse: collapse; }
.toc thead th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 0 0 8px; border-bottom: 2px solid var(--line); }
.toc thead th:last-child { text-align: right; }
.toc tr.div th { text-align: left; padding: 30px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.toc tbody tr.div:first-child th { padding-top: 18px; }
.toc .divno { font-family: var(--mono); font-weight: 700; margin-right: 14px; color: var(--ink-3); }
.toc td { padding: 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.toc td.secno { width: 112px; font-family: var(--mono); font-size: 14px; font-weight: 700; padding-top: 13px; white-space: nowrap; }
.toc td.sect { padding-right: 18px; }
.leader { display: flex; align-items: baseline; gap: 8px; min-height: 26px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.leader::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted var(--ink-3); transform: translateY(-4px); }
.leader:hover span { text-decoration: underline; text-underline-offset: 3px; }
.blurb { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; max-width: 76ch; }
.toc td.tags { width: 1%; white-space: nowrap; padding-top: 12px; text-align: right; }
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.3; text-transform: uppercase; border: 1.5px solid var(--line); padding: 3px 7px; margin-left: 6px; }
a.tag.vid { background: var(--ink); color: #fff; }
a.tag.vid:hover { background: var(--accent); border-color: var(--accent); }
.end-of { margin-top: 28px; text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.pm-foot { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-2); }
.pm-foot a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* /docs/: the index of every section and article */
.ix-div { margin-top: 36px; }
.ix-div-title { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.ix-div-title .divno, .vid-sched .divno { font-family: var(--mono); font-weight: 700; margin-right: 14px; color: var(--ink-3); }
.ix-sec { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.ix-sec h3 { display: flex; align-items: baseline; gap: 16px; font-size: 19px; font-weight: 800; line-height: 1.3; }
.ix-sec h3 .secno { flex: none; width: 96px; font-family: var(--mono); font-size: 14px; font-weight: 700; }
.ix-sec h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ix-intro { margin: 6px 0 0 112px; max-width: 72ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ix-arts { list-style: none; margin: 10px 0 0 112px; padding: 0; columns: 2; column-gap: 32px; }
.ix-arts li { break-inside: avoid; }
.ix-arts a { display: grid; grid-template-columns: 40px 1fr; gap: 6px; min-height: 26px; padding: 3px 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.ix-arts a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.ix-arts .no { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 1px; }
/* /resources/ appendix B: the video schedule */
.vid-sched h2 { font-size: 26px; font-weight: 800; margin-bottom: 16px; }
.vid-sched .schedule { max-width: none; }
.vid-sched .schedule td { font-size: 15px; }

/* ---------- a manual section (each docs page) ---------- */
.spec-head { border-bottom: 2px solid var(--line); padding-bottom: 26px; margin-bottom: 36px; }
.spec-head h1 { margin-top: 12px; max-width: 26ch; }
.spec-head .pg-intro { max-width: 68ch; }
.spec-no { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.spec-no .crumb { margin-left: 10px; letter-spacing: 0.08em; }
.doc-note { margin-top: 20px; max-width: 68ch; border: 1.5px solid var(--line); padding: 12px 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.doc-note strong { color: var(--ink); }
/* Articles are numbered the way a spec section's are: 1.01, 1.02 ... and the
   steps inside them as lettered paragraphs. Generated by CSS, so the anchors
   and the text stay as they were. */
.spec { counter-reset: art; }
.spec .doc-topic { counter-increment: art; }
.spec .doc-topic > h2 { display: flex; align-items: baseline; gap: 14px; }
.spec .doc-topic > h2::before { content: "1." counter(art, decimal-leading-zero); flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.spec-toc ol { counter-reset: tart; }
.spec-toc li { counter-increment: tart; }
.spec-toc a::before { content: "1." counter(tart, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 1px; }
.doc-steps { list-style: none; counter-reset: para; padding-left: 0 !important; }
.doc-steps > li { counter-increment: para; position: relative; padding-left: 30px; }
.doc-steps > li::before { content: counter(para, upper-alpha) "."; position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 14px; font-weight: 700; line-height: 1.75; color: var(--ink-3); }
.doc-shot { margin: 24px 0; }
.doc-related { font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 10px; }
.doc-related::first-line { font-weight: 700; }

/* ---------- the blog: a field book ---------- */
.fb-cover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.fb-label { border: 2px solid var(--line); padding: 22px 24px; }
.fb-label h1 { font-size: clamp(32px, 3vw, 40px); line-height: 1.05; margin: 12px 0 18px; }
.fb-label dl { margin: 0; border-top: 1px solid var(--line); }
.fb-label dl div { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid var(--rule); padding: 6px 0; }
.fb-label dt { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.fb-label dd { margin: 0; font-weight: 700; }
.fb-lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); padding-top: 6px; }
/* A field book page: every line of the index sits on a blue rule (28px),
   with the red margin line after the date column. */
.fb-page { border: 2px solid var(--line); }
.fb-cover + .fb-page { margin-top: 48px; }
.fb-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 2px solid var(--line); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.fb-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fb-head h2 { font: inherit; letter-spacing: inherit; }
.fb-index { width: 100%; border-collapse: collapse; line-height: 28px;
  background: linear-gradient(90deg, transparent 0 131px, var(--fb-red) 131px 133px, transparent 133px),
              repeating-linear-gradient(to bottom, transparent 0 27px, var(--fb-blue) 27px 28px); }
.fb-index thead th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 0 20px; height: 28px; vertical-align: bottom; line-height: 28px; }
.fb-index thead th:last-child { text-align: right; }
.fb-index td { padding: 0 20px 28px; vertical-align: top; }
.fb-index td.d { width: 132px; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.fb-index td.s a { font-size: 18px; font-weight: 800; }
.fb-index td.s a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fb-index .x { display: block; font-size: 14px; color: var(--ink-2); max-width: 78ch; }
.fb-index td.pg { width: 70px; text-align: right; font-family: var(--mono); font-size: 16px; font-weight: 700; }

/* one entry: the page strip, then the text inside the red margin line */
.fb-entry { position: relative; }
.fb-entry .fb-body { position: relative; padding: 34px 40px 40px 72px; }
.fb-entry .fb-body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 44px; width: 2px; background: var(--fb-red); }
.fb-date { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.fb-entry h1 { margin-top: 10px; max-width: 24ch; font-size: clamp(34px, 3.8vw, 50px); }
.post-meta { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.post-summary { margin: 28px 0 36px; max-width: 72ch; border: 1.5px solid var(--line); padding: 0 18px 0;
  background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--fb-blue) 27px 28px); background-position: 0 6px; }
.post-summary p { font-size: 16px; line-height: 28px; }
.post-summary-label { font-family: var(--mono); font-size: 11px !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-top: 6px; }
.post-summary p:last-child { padding-bottom: 8px; }
.fb-turn { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--line); }
.fb-turn a { display: block; padding: 14px 20px 16px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.fb-turn a:hover { background: var(--cell); }
.fb-turn a + a, .fb-turn .next { border-left: 1px solid var(--line); text-align: right; grid-column: 2; }
.fb-turn .pgno { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.post-back { margin-top: 20px; font-size: 15px; font-weight: 700; }
.post-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- general sheets ---------- */
.schedule { width: 100%; max-width: 860px; border-collapse: collapse; border: 2px solid var(--line); }
.schedule caption { text-align: left; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 10px; }
.schedule th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 10px 16px; border-bottom: 2px solid var(--line); background: var(--cell); }
.schedule td { padding: 14px 16px; border-top: 1px solid var(--rule); vertical-align: top; }
.schedule td + td, .schedule th + th { border-left: 1px solid var(--line); }
.schedule .mark { width: 70px; font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.schedule a { font-weight: 800; color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 2px solid var(--line); max-width: 960px; }
.link-grid a { display: block; background: var(--sheet); padding: 18px 20px 20px; }
.link-grid a:hover { background: var(--cell); }
.link-grid .t { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; }
.link-grid .b { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.link-grid .no { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }

/* Guides: the answer-first opening, numbered steps, the questions block and
   the closing line with price, versions and trial. */
.tb-label a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.kind-label a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-head h1 { max-width: 30ch; }
.guide-answer { margin-top: 20px; max-width: 66ch; font-size: 19px; line-height: 1.6; color: var(--ink); border-left: 3px solid var(--accent); padding: 2px 0 2px 18px; }
.prose ol.steps { list-style: none; counter-reset: step; padding-left: 0; }
/* The number hangs in the left margin, so a step can mix bold and plain text
   (a grid would turn each run of text into its own cell). */
.prose ol.steps > li { counter-increment: step; position: relative; padding-left: 38px; margin-bottom: 10px; }
.prose ol.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1.95; color: var(--ink-3); }
.guide-faq h3 { margin-top: 26px; }
.guide-cta { margin-top: 48px; border: 2px solid var(--line); padding: 18px 20px 20px; display: grid; gap: 14px; }
.guide-cta p { margin: 0; }
.guide-cta-line { font-size: 16px; color: var(--ink-2); }
.guide-cta-line strong { color: var(--ink); }
.prose .guide-cta a.hero-cta { color: #fff; text-decoration: none; }
/* the comparison: full drawing width for the table, a readable measure for text */
.guide-wide { max-width: none; }
.guide-wide > :not(.cmp-wrap):not(.guide-cta) { max-width: 72ch; }
.guide-wide .guide-cta { max-width: 860px; }
.cmp-wrap { margin: 8px 0 28px; border: 2px solid var(--line); }
/* Fits the drawing width at every size: five columns wrap their text on wide
   screens, and below 900px each row becomes a block with labelled cells, so
   no column is ever pushed out of view behind a sideways scroll. */
.prose table.cmp { display: table; width: 100%; margin: 0; font-size: 14px; line-height: 1.5; table-layout: fixed; }
.prose table.cmp th, .prose table.cmp td { overflow-wrap: break-word; hyphens: auto; }
.prose table.cmp th, .prose table.cmp td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose table.cmp thead th { background: var(--cell); color: var(--ink); font-size: 12px; letter-spacing: 0.04em; border-bottom: 2px solid var(--line); }
.prose table.cmp thead th:first-child { width: 15%; }
.prose table.cmp tbody th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--cell); }
.prose table.cmp td + td, .prose table.cmp th + td, .prose table.cmp th + th { border-left: 1px solid var(--rule); }
.prose table.cmp .us { background: var(--accent-tint); }
.prose table.cmp .nd { color: var(--ink-3); }
.prose table.cmp sup a, .src-ref { font-family: var(--mono); font-size: 11px; text-decoration: none; }
/* the feature matrix: one feature per row, a mark per product */
.mx-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 10px; font-size: 13px; color: var(--ink-2); }
.mk { font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", var(--font); font-size: 17px; line-height: 1; margin-right: 6px; vertical-align: -1px; }
.mk.y { color: var(--ink); }
.mk.p { color: var(--ink-2); }
.mk.n { color: var(--ink-3); }
.us .mk.y { color: var(--accent); }
.mk-note { font-size: 13px; }
.mk-note.nd { color: var(--ink-3); }
.prose table.mx .mx-group th { background: var(--ink); color: #fff; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; }
.prose table.mx .mx-total th, .prose table.mx .mx-total td { background: var(--cell); font-size: 14px; border-bottom: 2px solid var(--line); }
.prose table.mx .mx-total td.us { background: var(--accent-tint); color: var(--accent); }
.prose table.mx tbody th { font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 800; }
.sources { font-size: 14px; line-height: 1.55; }
.sources li { margin-bottom: 8px; }
.sources .id { font-family: var(--mono); font-weight: 700; margin-right: 6px; }
.guide-list { display: grid; gap: 1px; background: var(--line); border: 2px solid var(--line); max-width: 960px; }
.guide-list a { display: grid; grid-template-columns: 80px 1fr; gap: 4px 16px; background: var(--sheet); padding: 18px 20px 20px; }
.guide-list a:hover { background: var(--cell); }
.guide-list .no { grid-row: span 2; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink-3); padding-top: 4px; }
.guide-list .t { font-size: 20px; font-weight: 800; line-height: 1.25; }
.guide-list .b { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 80ch; }

/* FAQ: groups numbered like divisions, questions like articles. */
.faq { counter-reset: grp; }
.faq > h2 { counter-increment: grp; counter-reset: q; display: flex; align-items: baseline; gap: 14px; }
.faq > h2::before { content: counter(grp, decimal-leading-zero); flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink-3); }
.faq > h3 { counter-increment: q; display: grid; grid-template-columns: 52px 1fr; gap: 0; }
.faq > h3::before { content: counter(grp) "." counter(q, decimal-leading-zero); font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink-3); padding-top: 4px; }
.faq > p, .faq > ul { margin-left: 52px; }
.faq-more { font-size: 14px; color: var(--ink-2); }
.faq-toc ol { counter-reset: tg; }
.faq-toc li { counter-increment: tg; }
.faq-toc a::before { content: counter(tg, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 1px; }

/* Terms: the agreement, set as written */
.eula-doc { max-width: 82ch; }
.eula-doc .eula-p, .eula-doc .eula-clause, .eula-doc .eula-subclause { font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; }
.eula-doc .eula-subclause { padding-left: 24px; }
.eula-doc table { border-collapse: collapse; margin: 0 0 20px; }
.eula-doc td { vertical-align: top; padding: 4px 22px 4px 0; }
.eula-doc td .eula-p { margin: 0; }
.eula-version { font-size: 14px; color: var(--ink-2); margin: 0 0 28px; border: 1.5px solid var(--line); padding: 10px 14px; }
.uppercase-emphasis { text-transform: uppercase; font-size: 15px; letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .prose table.cmp, .prose table.cmp tbody, .prose table.cmp tr, .prose table.cmp th, .prose table.cmp td { display: block; width: auto; }
  .prose table.cmp thead { display: none; }
  .prose table.cmp tr { border-bottom: 2px solid var(--line); }
  .prose table.cmp tr:last-child { border-bottom: 0; }
  .prose table.cmp tbody th { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .prose table.cmp td { border-left: 0 !important; padding: 8px 12px 10px; }
  .prose table.cmp td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .prose table.cmp td.us::before { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta { transition: none; }
}

/* ---------- narrower screens: the title block becomes a top bar ---------- */
@media (max-width: 1360px) {
  .with-toc { display: block; }
  .with-toc > .page-toc { position: static; max-height: none; margin-bottom: 40px; max-width: 72ch; }
  .page-toc ol, .page-toc ul { columns: 2; column-gap: 32px; }
  .page-toc li { break-inside: avoid; }
}
@media (max-width: 1100px) {
  body { padding: 12px; }
  .sheet { padding: 6px; }
  .sheet-inner { grid-template-columns: 1fr; }
  .tb-col { grid-column: 1; grid-row: 1; border-left: 0; border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 50; }
  .draw { grid-row: 2; }
  .tb { display: none; }
  .tb-bar { display: flex; align-items: center; gap: 10px; background: var(--navy); padding: 8px 10px 8px 14px; position: relative; }
  .tb-bar-logo { display: flex; align-items: center; min-height: 44px; }
  .tb-bar-logo img { width: 92px; height: auto; display: block; }
  .tb-bar-sheet { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
  .tb-bar .hero-cta { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .tb-menu summary { list-style: none; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.45); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
  .tb-menu summary::-webkit-details-marker { display: none; }
  .tb-menu-panel { position: absolute; right: 0; top: 100%; width: min(340px, 100%); max-height: calc(100vh - 80px); overflow-y: auto; background: #fff; border: 2px solid var(--line); padding: 10px 16px 14px; }
  .tb-menu-panel .tb-index a { min-height: 44px; }
  .tb-menu-panel .tb-links { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: 2px solid var(--line); padding-top: 8px; }
  .tb-menu-panel .tb-links a { min-height: 44px; display: flex; align-items: center; }
  main { padding: 40px 32px 40px; }
  html { scroll-padding-top: 72px; }
  .prose h2, .prose h3 { scroll-margin-top: 72px; }
  .footer { padding: 24px 32px; }
  .fb-cover { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  body { padding: 0; font-size: 16px; }
  .sheet { padding: 0; border: 0; }
  .sheet-inner { border-width: 0; }
  main { padding: 28px 18px 32px; }
  .tb-bar-sheet { display: none; }
  .tb-bar .hero-cta { margin-left: auto; }
  .pg-intro { font-size: 17px; }
  .prose h2 { font-size: 23px; margin-top: 40px; }
  .page-toc ol, .page-toc ul { columns: 1; }
  .page-toc a { min-height: 44px; align-items: center; }
  .pm-cover { padding: 24px 18px; }
  .toc thead { display: none; }
  .toc, .toc tbody, .toc tr, .toc td, .toc th { display: block; width: auto; }
  .toc tr:not(.div) { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .toc td { border: 0; padding: 0; }
  .toc td.secno { width: auto; padding-top: 2px; font-size: 13px; }
  .toc td.sect { padding-right: 0; }
  .toc td.tags { grid-column: 2; width: auto; text-align: left; padding-top: 6px; white-space: normal; }
  .tag { margin: 0 6px 0 0; min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; }
  .leader::after { display: none; }
  .fb-index { background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--fb-blue) 27px 28px); }
  .fb-index thead { display: none; }
  .fb-index tr { display: grid; grid-template-columns: 1fr auto; padding: 0 16px 28px; }
  .fb-index td { display: block; padding: 0; width: auto !important; }
  .fb-index td.d { grid-column: 1; grid-row: 1; }
  .fb-index td.pg { grid-column: 2; grid-row: 1; }
  .fb-index td.s { grid-column: 1 / -1; }
  .fb-head { padding: 4px 16px; align-items: center; min-height: 44px; letter-spacing: 0.1em; font-size: 12px; }
  .fb-head a { display: inline-flex; align-items: center; min-height: 40px; }
  .fb-entry .fb-body { padding: 24px 16px 28px 34px; }
  .fb-entry .fb-body::before { left: 18px; }
  .fb-turn { grid-template-columns: 1fr; }
  .fb-turn a + a, .fb-turn .next { border-left: 0; border-top: 1px solid var(--line); text-align: left; grid-column: 1; }
  .schedule th, .schedule td { padding: 10px 12px; }
  .schedule .mark { width: auto; }
  .link-grid { grid-template-columns: 1fr; }
  .guide-answer { font-size: 17px; padding-left: 14px; }
  .guide-list a { grid-template-columns: 1fr; }
  .guide-list .no { grid-row: auto; padding-top: 0; }
  .ix-sec h3 { flex-direction: column; gap: 2px; }
  .ix-intro, .ix-arts { margin-left: 0; }
  .ix-arts { columns: 1; }
  .ix-arts a { min-height: 40px; align-items: center; }
  .vid-sched .schedule td { font-size: 14px; }
  .faq > h3 { grid-template-columns: 44px 1fr; }
  .faq > p, .faq > ul { margin-left: 0; }
  .footer { padding: 22px 18px; }
  .footer-links a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}