/* ==========================================================================
   Plimpton Innovations — long-form article (white papers)
   Uses only the brand tokens from base.css: #000000, #FFFFFF, #1A1A1A, #595959,
   #B3B3B3, #E6E6E6. Arial for all text; KaTeX fonts only inside rendered math.
   No rounded corners, shadows or gradients. 1px Grey 30 rules.
   ========================================================================== */

.page-article {
  --wp-fs: 1.0625rem;          /* 17 px phone */
  --wp-measure: 44rem;         /* one column width for everything in the text column: paragraphs,
                                  symbol notes, equations, tables, figures and notices share one right edge
                                  (about 75 characters of Arial at 18 px). In rem, so smaller text keeps the edge. */
  --wp-toc-w: 15rem;
}
@media (min-width: 64rem) { .page-article { --wp-fs: 1.125rem; } }   /* 18 px desktop */

/* ---------- Head ---------- */
.wp-head { padding-block: var(--s3) var(--s4); }
.wp-head > * { max-width: 52rem; }
.wp-proto { margin-bottom: var(--s4); font-size: 0.875rem; }
.wp-proto p { margin: 0; }
.wp-series { margin-bottom: var(--s2); }
.wp-head h1 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.1; max-width: 28ch; margin-bottom: var(--s3); }
.wp-byline { color: var(--muted); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin-bottom: var(--s3); }
.wp-author { color: var(--fg); font-weight: 700; }
.wp-download { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0; }
.wp-download .btn { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.875rem; }
.wp-proto-inline { font-weight: 400; }

/* ---------- Two-column layout: contents left, text right ---------- */
.wp-layout { display: block; padding-bottom: var(--s6); padding-top: var(--s2); }
@media (min-width: 64rem) {
  .wp-layout { display: grid; grid-template-columns: var(--wp-toc-w) minmax(0, 1fr); column-gap: var(--s6); align-items: start; padding-top: var(--s5); }
}

/* ---------- Contents ---------- */
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { text-decoration: none; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 0.25rem; padding-block: 0.4rem; line-height: 1.3; }
.toc a:hover { text-decoration: underline; }
.toc li:first-child a { grid-template-columns: minmax(0, 1fr); }
.toc__n { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); }
.toc__pdf { margin: var(--s2) 0 0; padding-top: var(--s2); border-top: 1px solid var(--rule); font-size: 0.875rem; font-weight: 700; }
.toc__pdf a { display: inline; padding: 0; text-decoration: underline; }

.toc--side { display: none; }
@media (min-width: 64rem) {
  .toc--side {
    display: block; position: sticky; top: calc(var(--header-h) + var(--s3));
    max-height: calc(100vh - var(--header-h) - var(--s5)); overflow-y: auto;
    font-size: 0.875rem; border-top: 1px solid var(--fg); padding-top: var(--s2);
  }
  .toc--side li + li { border-top: 1px solid var(--grey-10); }
  .toc--phone { display: none; }
}
.toc--phone { border-block: 1px solid var(--rule); margin-bottom: var(--s4); font-size: 0.9375rem; }
.toc--phone summary {
  cursor: pointer; list-style: none; font-weight: 700; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
}
.toc--phone summary::-webkit-details-marker { display: none; }
.toc--phone summary::after { content: "+"; font-size: 1.25rem; }
.toc--phone[open] summary::after { content: "\2212"; }
.toc--phone nav { padding-bottom: var(--s2); }
.toc--phone li + li { border-top: 1px solid var(--grey-10); }
.toc--phone a { min-height: 44px; align-items: center; }

/* ---------- Body text ---------- */
.wp-body { font-size: var(--wp-fs); line-height: 1.6; min-width: 0; }
.wp-body > *, .wp-sec > * { max-width: var(--wp-measure); }
.wp-body > .wp-sec { max-width: var(--wp-measure); }  /* the rule between sections ends at the same edge as the text */
.wp-body p, .wp-body ol { margin-bottom: 1em; }
.wp-sec { padding-top: var(--s4); }
.wp-sec + .wp-sec { margin-top: var(--s3); border-top: 1px solid var(--rule); }
.wp-sec h2 {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.2; margin: 0 0 var(--s3);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6em;
}
.wp-sec h2#executive-summary { display: block; }
.wp-sec h3 {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.3; margin: 2em 0 0.6em;
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 0.4em;
}
.wp-sec h3#units-and-conventions { display: block; }
.sec-num { font-variant-numeric: tabular-nums; }
.wp-sec h3 .sec-num { color: var(--muted); }
.wp-body .symbols { font-size: 0.875em; line-height: 1.55; color: var(--grey-90); }
.wp-steps { padding-left: 1.6em; }
.wp-steps li { margin-bottom: 0.5em; padding-left: 0.2em; }
.wp-body sub, .wp-body sup { line-height: 0; }
a.cite { text-decoration: none; white-space: nowrap; }
a.cite:hover { text-decoration: underline; }

/* ---------- Notice (Education, not tuning instruction) ---------- */
.wp-notice {
  border-left: 4px solid var(--fg); background: var(--grey-10); padding: var(--s2) var(--s3); margin-bottom: var(--s2);
  font-size: 0.9375em; line-height: 1.55;
}
.wp-notice__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 var(--s1); line-height: 1.4; }
.wp-notice p { margin: 0; }

/* ---------- Equations: own box, scrolls sideways on narrow screens ---------- */
.eq { display: flex; align-items: center; gap: var(--s2); margin: 1.25em 0 1em; max-width: var(--wp-measure); }
.eq__math { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-block: 0.25em; }
.eq__math:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.eq__math .katex-display { margin: 0; }
.eq__math .katex-display > .katex { text-align: center; }

.eq__num { flex: none; font-variant-numeric: tabular-nums; font-size: 0.9375em; }
@media (max-width: 47.99rem) {
  .eq__math { border-block: 1px solid var(--grey-10); }
  .eq__math .katex-display > .katex { text-align: left; }
}
.wp-body .katex { font-size: 1.12em; }
.wp-body .tex .katex { font-size: 1.05em; }
td .tex .katex, th .tex .katex { font-size: 1em; }

/* ---------- Figures (full measure, caption below) ---------- */
.wp-fig { margin: var(--s4) 0; }
.wp-fig img { width: 100%; height: auto; background: var(--white); }
.wp-fig figcaption { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); margin-top: var(--s2); border-top: 1px solid var(--rule); padding-top: var(--s1); }
.wp-fig figcaption strong { display: block; color: var(--fg); font-size: 0.875rem; margin-bottom: 0.2rem; }

/* ---------- Tables (Grey 10 header, horizontal rules only) ---------- */
.wp-table { margin: var(--s4) 0 var(--s2); }
.wp-table.table-wrap { max-width: var(--wp-measure); }
.wp-body table.data { font-size: 0.8125rem; line-height: 1.45; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }
@media (min-width: 48rem) { .wp-body table.data { font-size: 0.875rem; } }
.wp-body table.data caption { caption-side: top; text-align: left; font-weight: 700; font-size: 0.875rem; padding-bottom: var(--s1); }
.wp-body table.data th, .wp-body table.data td { padding: 0.55rem 0.75rem 0.55rem 0; }
.wp-body table.data thead th { padding-left: 0.75rem; vertical-align: bottom; }
.wp-body table.data tbody th, .wp-body table.data tbody td { padding-left: 0.75rem; }
.wp-body table.data tbody th { width: auto; min-width: 9rem; }
.wp-body table.data tbody tr:last-child > * { border-bottom: 0; }
.wp-body table.data tr.group th {
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted);
  padding-top: 0.8rem; padding-bottom: 0.4rem;
}
.wp-body table.data tr.group--cond th { text-transform: none; letter-spacing: 0.04em; }
#table-3 table, #table-9 table, #table-10 table { min-width: 44rem; }
#table-4 table, #table-8 table, #table-11 table { min-width: 36rem; }
#table-1 table, #table-2 table, #table-5 table, #table-6 table, #table-7 table { min-width: 30rem; }
.table-notes { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); margin-bottom: var(--s3); }
.table-notes p { margin: 0 0 0.35rem; }
@media (min-width: 64rem) { .wp-sec > .table-notes { max-width: none; } }

/* ---------- References ---------- */
.refs { list-style: none; padding: 0; margin: var(--s3) 0 0; font-size: 0.875em; line-height: 1.5; }
.refs li { position: relative; padding: 0.5rem 0 0.5rem 3em; border-top: 1px solid var(--grey-10); overflow-wrap: break-word; }
.refs li:target { background: var(--grey-10); }
.ref-n { position: absolute; left: 0; top: 0.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.refs a { overflow-wrap: anywhere; }
.refs i { font-style: italic; }

.wp-end { margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--rule); font-size: 0.875rem; font-weight: 700; }
.wp-end a { text-decoration: none; }
.wp-end a::before { content: "\2191\00a0"; }

/* ---------- Anchors land below the sticky header ---------- */
.page-article [id] { scroll-margin-top: calc(var(--header-h) + var(--s2)); }

/* ---------- Print ---------- */
@media print {
  .toc, .wp-download, .wp-proto, .wp-end { display: none !important; }
  .wp-layout { display: block; border: 0; }
  .eq__math { overflow: visible; }
  .wp-fig, .wp-table, .eq { break-inside: avoid; }
}

/* Wide tables scroll sideways on phones; keyboard users reach them with Tab (tabindex in the source). */
.table-wrap:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }