/* System fonts only: nothing to download, works offline and on low-end devices. */
:root {
  --paper: #FAFBF8;   /* page */
  --ink: #1F2B2D;     /* text */
  --drape: #2C6B63;   /* surgical-drape teal: step numbers, links, callouts */
  --caution: #9A4F17; /* key points only */
  --rule: #D6DEDA;
  --mist: #EEF3F1;
  --read: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.6 var(--read); }
main, .masthead, .colophon { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
a { color: var(--drape); }
a:focus-visible, button:focus-visible, select:focus-visible, video:focus-visible { outline: 3px solid var(--drape); outline-offset: 2px; }

.masthead { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rule); font-family: var(--ui); }
.brand { font-weight: 650; text-decoration: none; color: var(--ink); }
.langs a { margin-left: .75rem; text-decoration: none; font-size: .9rem; }
.langs a[aria-current] { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: .25em; }

h1, h2 { font-family: var(--ui); line-height: 1.2; }
h1 { font-size: 1.85rem; margin: 1.25rem 0 .5rem; }
.site-title { font-size: 1.6rem; max-width: 22ch; }
.crumb { font: .9rem var(--ui); margin: 1.25rem 0 0; }
.notice { font: .95rem/1.45 var(--ui); background: var(--mist); border-left: 4px solid var(--caution); padding: .6rem .8rem; }
.notice.quiet { border-left-color: var(--rule); }
.prose { max-width: 38rem; }

.toc-section h2 { font-size: 1.05rem; margin: 1.75rem 0 .25rem; }
.toc { list-style: none; padding: 0; margin: 0; }
.toc li { padding: .55rem 0; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.toc a { font-weight: 600; }
.toc-meta, .saved-mark { font: .85rem var(--ui); color: #56666A; }
.saved-mark { color: var(--drape); }

.prefs { font: .9rem var(--ui); display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 1.25rem 0 0; }
.prefs label { display: flex; gap: .4rem; align-items: center; }
select, button { font: inherit; font-family: var(--ui); min-height: 2.5rem; }
.offline-control { font: .9rem var(--ui); }
button { background: var(--drape); color: #fff; border: 0; border-radius: 4px; padding: .4rem .9rem; }
button.remove { background: transparent; color: var(--drape); border: 1px solid var(--drape); }

/* The step sequence is the spine of the page: large numerals in the margin. */
.steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: none; }
.step { position: relative; padding: 0 0 2rem 3.75rem; border-left: 2px solid var(--rule); margin-left: 1.4rem; }
.step:last-child { border-left-color: transparent; }
.step h2 { margin: 0 0 .75rem; font-size: 1.15rem; display: flex; flex-wrap: wrap; gap: 0 .6rem; align-items: baseline; }
.step-n { position: absolute; left: -1.4rem; top: -.35rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--drape); color: var(--drape); font: 700 1.35rem/2.55rem var(--ui); text-align: center; }
.step-of { font-size: .8rem; font-weight: 400; color: #56666A; }

.clip { margin: 0; }
.frame { position: relative; background: #000; aspect-ratio: 16 / 9; }
.frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.callout { position: absolute; transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--drape); color: #fff; border: 2px solid #fff; font: 700 1rem/1.75rem var(--ui); text-align: center; pointer-events: none; }
.legend { font: .95rem/1.5 var(--ui); padding-left: 1.6rem; margin: .6rem 0; }
.legend li::marker { color: var(--drape); font-weight: 700; }
.clip figcaption, .clip-error, .no-media { font: .85rem var(--ui); color: #56666A; }
.no-media { background: var(--mist); padding: .75rem; }
.key-point { margin-top: .75rem; border-left: 4px solid var(--caution); padding: .25rem 0 .25rem .75rem; }
.key-point strong { color: var(--caution); font-family: var(--ui); }

.colophon { font: .85rem/1.5 var(--ui); color: #56666A; border-top: 1px solid var(--rule); padding-top: 1rem; padding-bottom: 2rem; margin-top: 2rem; }
@media (max-width: 30rem) { .step { padding-left: 2.6rem; } h1 { font-size: 1.55rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.pdf-link a { font: 600 1rem var(--ui); }
.plan { font: .9rem/1.5 var(--ui); background: var(--mist); padding: .75rem 1rem; margin: 1rem 0; }
.plan h2 { font-size: .95rem; margin: 0 0 .5rem; }
.plan dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: 0 0 .5rem; }
.plan dt { color: #56666A; } .plan dd { margin: 0; }
.plan p { margin: 0; }

.byline { font: .9rem var(--ui); color: #56666A; margin: -.25rem 0 .75rem; }
.kind { display: inline-block; font-size: .75rem; letter-spacing: .02em; text-transform: uppercase; padding: .05rem .45rem; border: 1px solid var(--rule); border-radius: 3px; margin-left: .35rem; }
.kind-procedure { border-color: var(--drape); color: var(--drape); }
.summary { max-width: 38rem; font-size: 1.05rem; }
.quiet-prose { color: #56666A; }
.no-media p { margin: 0 0 .35rem; }
.shot-plan { font-size: .85rem; color: #56666A; }
.source-ref { color: #7A8A8E; }
.filming-notes { margin-top: .5rem; }
.filming-notes summary { cursor: pointer; color: var(--drape); }
.filming-notes p { margin: .35rem 0 0; }

.jump { font: .9rem var(--ui); margin: .25rem 0 0; }
.chapter-text { border-top: 2px solid var(--rule); margin-top: 1rem; padding-top: .5rem; }
.chapter-text h2 { font-size: 1.25rem; }
.attribution { font: .85rem/1.5 var(--ui); color: #56666A; background: var(--mist); padding: .6rem .8rem; }
.prose h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.prose img { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; margin: 1rem auto .25rem; }
.prose img + p em, .prose p > em:only-child { font: .9rem/1.45 var(--ui); color: #56666A; }
.prose ul { padding-left: 1.4rem; }

.size-line { font: .85rem/1.5 var(--ui); color: #56666A; margin: .25rem 0 0; }
.size-line .size-label { color: var(--ink); font-weight: 600; }
.size-line .cur { color: var(--drape); font-weight: 650; }
.size-banner { font: .9rem/1.5 var(--ui); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin: .5rem 0 0; }
.size-banner strong { font-variant-numeric: tabular-nums; }
.fine { font: .82rem/1.45 var(--ui); color: #56666A; }
.sizes h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.table-wrap { overflow-x: auto; margin: 0 0 .5rem; }
.size-table { border-collapse: collapse; width: 100%; font: .9rem/1.4 var(--ui); }
.size-table th, .size-table td { text-align: left; padding: .45rem .6rem .45rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.size-table thead th { font-weight: 600; color: #56666A; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.size-table tbody th { font-weight: 500; }
.size-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.size-table tr.total th, .size-table tr.total td { font-weight: 650; border-top: 2px solid var(--rule); }
.size-table tr.this-build { background: var(--mist); }
.size-table .here { font-size: .75rem; color: var(--drape); border: 1px solid var(--drape); border-radius: 3px; padding: 0 .35rem; margin-left: .35rem; white-space: nowrap; }
.size-table.chapters tbody th { font-weight: 400; }
.size-section { border-bottom: 1px solid var(--rule); }
.size-section summary { cursor: pointer; padding: .6rem 0; font: 600 .95rem var(--ui); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.size-section summary .sum { font-weight: 400; color: #56666A; font-variant-numeric: tabular-nums; }
.size-table code, .fine code { font-size: .8rem; word-break: break-all; }