/* Prototype D · Briefing, quieter: B's boxes and numbered sections, with A's reading text and lighter, smaller headings. */
/* IBM Plex (SIL Open Font License, fonts/OFL.txt), served from this site: latin and latin-ext only. */
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-400-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-400-italic-latin.woff2") format("woff2"); 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: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2"); 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: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-serif-400-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-serif-400-italic-latin.woff2") format("woff2"); 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: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-serif-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-serif-400-latin.woff2") format("woff2"); 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: "IBM Plex Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-serif-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-serif-600-latin.woff2") format("woff2"); 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: "IBM Plex Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-serif-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-serif-700-latin.woff2") format("woff2"); 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 { --amber-text: #8a5a00;
  --bg: #ffffff;
  --ink: #14202b;
  --muted: #55626f;
  --navy: #12304a;
  --amber: #f2a900;
  --amber-tint: #fff6dc;
  --panel: #eef2f6;
  --rule: #d5dde5;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--serif); }
/* Reading text is serif; headings and the briefing furniture stay sans. */
h1, h2, .proto-banner, .site-header, .kicker, figcaption, .fw-list strong, .fw-more, .cta, .position, .toc, .glance, .key-label, .byline, .note, .draft-flag, .read-first, .questions li::before, .cite, .license-line, .site-footer { font-family: var(--sans); }
a { color: var(--navy); text-underline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.proto-banner { font-size: .8rem; font-weight: 500; background: var(--amber); color: #1b1300; padding: .45rem 1rem; text-align: center; }
.proto-banner a { color: #1b1300; }

.site-header { background: var(--navy); color: #fff; padding: 1rem max(1rem, calc((100% - 70rem) / 2)); display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; justify-content: space-between; }
.site-name { color: #fff; font-weight: 600; font-size: 1.15rem; text-decoration: none; letter-spacing: .02em; }
.site-name span { color: var(--amber); }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .92rem; font-weight: 500; }
.site-nav a { color: #fff; text-decoration: none; }
.site-nav a[aria-current] { box-shadow: inset 0 -2px var(--amber); }
.nav-off { color: #9fb2c4; }
.page-article .nav-off, .related .nav-off { color: var(--muted); }
.site-nav .nav-off { color: #9fb2c4; }

main { max-width: 70rem; margin: 0 auto; padding: 0 1rem 3rem; }

/* Home */
.hero { padding: 2.5rem 0 1rem; display: grid; gap: 0 2.5rem; }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem; }
.hero h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.18; font-weight: 600; color: var(--navy); margin: 0 0 1rem; }
.lede { font-size: 1.2rem; margin: 0 0 1.5rem; max-width: 36rem; }
.hero-figure, .diagram { margin: 1rem 0 1.5rem; background: var(--panel); padding: 1rem; border-radius: 4px; }
figcaption { font-size: .82rem; color: var(--muted); margin-top: .5rem; }
svg { width: 100%; height: auto; display: block; }
svg .ground { fill: #c9d4de; }
svg .zone { fill: var(--amber); opacity: .45; }
svg .track { fill: none; stroke: var(--navy); stroke-width: 2.5; }
svg .touch { fill: var(--navy); }
svg .label { font: 500 13px var(--sans); fill: var(--navy); }

.intro, .question, .framework, .calculator { max-width: 44rem; }
section h2 { font-size: 1.2rem; font-weight: 600; color: var(--navy); margin: 2.25rem 0 .75rem; }
.calculator { background: var(--amber-tint); border-left: 6px solid var(--amber); padding: .25rem 1.5rem 1rem; margin: 2rem 0; }
.calc-sentence { font-size: 1.2rem; line-height: 2; }
.calc-sentence input { font: inherit; width: 9ch; border: 2px solid var(--navy); border-radius: 3px; text-align: center; background: #fff; color: var(--navy); -moz-appearance: textfield; }
.calc-sentence input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-sentence output { font-weight: 600; background: var(--navy); color: #fff; padding: .05rem .4rem; border-radius: 3px; }
.calc-note { font-size: .92rem; color: var(--muted); }

.fw-list { list-style: none; padding: 0; counter-reset: fw; display: grid; gap: .75rem; }
.fw-list li { counter-increment: fw; border: 1px solid var(--rule); border-radius: 4px; padding: .9rem 1rem .9rem 3.4rem; position: relative; }
.fw-list li::before { content: counter(fw); position: absolute; left: 1rem; top: .85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: .9rem; display: grid; place-items: center; }
.fw-list strong { display: block; font-weight: 600; color: var(--navy); }
.fw-list a { text-decoration: none; }
.fw-list a strong::after { content: " →"; color: var(--amber-text); }
.fw-more { color: var(--muted); font-size: .92rem; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.cta a { display: inline-block; padding: .7rem 1.1rem; border-radius: 4px; font-weight: 500; text-decoration: none; }
.cta-primary { background: var(--navy); color: #fff; border: 2px solid var(--navy); }
.cta-secondary { border: 2px solid var(--navy); }

/* Articles */
.article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 3rem; }
.position { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .85rem; color: var(--muted); padding-top: 1.5rem; }
.pos-here { background: var(--navy); color: #fff; font-weight: 600; padding: .1rem .55rem; border-radius: 3px; letter-spacing: .04em; }
.article h1 { font-size: clamp(1.6rem, 3.6vw, 2.15rem); line-height: 1.2; font-weight: 600; color: var(--navy); margin: 1rem 0 1.25rem; }
.subtitle { display: block; font-weight: 400; font-size: .75em; color: var(--ink); }
.key-idea { background: var(--amber-tint); border-left: 6px solid var(--amber); padding: 1rem 1.25rem; margin: 0 0 1rem; font-size: 1.1rem; }
.key-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .35rem; color: #6b4b00; }
.key-idea p:last-child { margin: 0; }
.byline { font-size: .88rem; color: var(--muted); }
.author { font-weight: 700; color: var(--ink); }
.toc { background: var(--panel); border-radius: 4px; padding: .9rem 1.1rem; font-size: .92rem; margin: 1rem 0 1.5rem; }
.toc-title { font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; margin: 0 0 .4rem; color: var(--navy); }
.toc ol { margin: 0; padding-left: 1.2rem; }

.body { counter-reset: sec; max-width: 44rem; }
.body h2 { counter-increment: sec; font-size: 1.15rem; font-weight: 600; color: var(--navy); margin: 2.25rem 0 .6rem; padding-top: .8rem; border-top: 1px solid var(--navy); }
.body h2::before { content: counter(sec) ". "; content: counter(sec) ". " / ""; color: var(--amber-text); }
.anchor { color: var(--muted); text-decoration: none; font-weight: 400; }
.anchor:focus-visible { color: var(--navy); outline: 2px solid var(--navy); outline-offset: 2px; }
h2:hover .anchor, h3:hover .anchor { color: var(--navy); }
blockquote.statement { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--navy); color: #fff; font-size: 1.25rem; font-weight: 600; border-radius: 4px; }
blockquote.pull { margin: 1.25rem 0; padding: .25rem 0 .25rem 1rem; border-left: 4px solid var(--amber); font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.narrative { font-family: var(--serif); font-style: italic; font-size: 1.1rem; max-width: 44rem; }
.note { display: block; font-size: .84rem; color: var(--muted); background: var(--panel); border-radius: 3px; padding: .5rem .75rem; margin: -.25rem 0 1rem; }
.note-num { font-weight: 700; color: var(--navy); margin-right: .35rem; }

.glance { border: 2px solid var(--navy); border-radius: 4px; margin: 1rem 0 1.5rem; max-width: 44rem; }
.glance h2 { margin: 0; background: var(--navy); color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding: .45rem 1rem; }
.glance dl { display: grid; grid-template-columns: 10rem minmax(0, 1fr); margin: 0; }
.glance dt, .glance dd { padding: .5rem 1rem; border-top: 1px solid var(--rule); margin: 0; font-size: .95rem; }
.glance dt { font-weight: 600; background: var(--panel); }
.factor-list dt { font-family: var(--sans); font-weight: 600; margin-top: .8rem; color: var(--navy); }
.factor-list dd { margin: .2rem 0 0; }
.draft-flag { font-size: .8rem; font-weight: 700; color: #6b4b00; background: var(--amber-tint); border: 1px dashed var(--amber); display: inline-block; padding: .2rem .5rem; }
.questions { counter-reset: q; list-style: none; padding: 0; }
.questions li { counter-increment: q; padding: .6rem .75rem .6rem 2.6rem; position: relative; border-bottom: 1px solid var(--rule); }
.questions li::before { content: "Q" counter(q); content: "Q" counter(q) / ""; position: absolute; left: .5rem; font-weight: 600; color: var(--amber-text); }

.related, .cite { max-width: 44rem; margin-top: 2rem; border-top: 1px solid var(--rule); }
.related h2, .cite h2 { font-size: 1rem; }
.cite-apa { font-size: .92rem; background: var(--panel); padding: .75rem 1rem; border-radius: 4px; }
.cite summary { cursor: pointer; font-weight: 500; }
.cite pre { font-size: .8rem; background: var(--panel); padding: .75rem; overflow-x: auto; }
.license-line { font-size: .88rem; color: var(--muted); }
.site-footer { background: var(--panel); padding: 1.5rem max(1rem, calc((100% - 70rem) / 2)); font-size: .85rem; color: var(--muted); }


/* Home introduction and reading order; case-study prerequisite */
.path { padding-left: 1.4rem; }
.path li { margin: 0 0 .3rem; }
.path li::marker { font-weight: 700; color: var(--navy); }
.path .nav-off { color: var(--muted); }
.read-first { background: var(--panel); border-left: 6px solid var(--navy); padding: .6rem 1rem; margin: 0 0 1.25rem; font-size: .95rem; max-width: 44rem; }

@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .hero-figure { grid-column: 2; grid-row: 1 / span 3; }
  .article { grid-template-columns: 15rem minmax(0, 44rem); }
  .article > * { grid-column: 2; }
  .article > .toc { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: 1rem; margin-top: 4.5rem; }
}

/* Wide screens: notes move into a right-hand margin, as in A. */
@media (min-width: 78rem) {
  main.article { max-width: 80rem; }
  .article { grid-template-columns: 14rem minmax(0, 42rem) 16rem; }
  .body > .note { float: right; clear: right; width: 15rem; margin: .2rem -18rem 1rem 0; }
}

@media print {
  .proto-banner, .site-nav, .position, .toc, .anchor, .cta { display: none; }
  .site-header { background: none; color: var(--ink); padding: 0 0 .5rem; border-bottom: 2px solid var(--ink); }
  .site-name { color: var(--ink); }
  body { font-size: 10.5pt; }
  .article { display: block; }
  .body > .note { float: none; width: auto; margin: -.25rem 0 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .body h2, .glance, .key-idea, blockquote { break-inside: avoid; }
  blockquote.statement { background: none; color: var(--ink); border: 2px solid var(--ink); }
}

/* Round 3: reading-order links, tables, placeholders, source markers, case list */
.next-up { margin-top: 2.5rem; margin-bottom: 1rem; }
.next-label { font: 600 .75rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin: 0 0 .4rem; }
.next-up a { display: block; padding: .9rem 1.1rem; border: 2px solid var(--navy); border-radius: 4px; text-decoration: none; font: 600 1.05rem/1.4 var(--sans); color: var(--navy); }
.next-up a:hover { background: var(--amber-tint); }
.next-up a span { display: block; font-weight: 400; font-size: .92rem; color: var(--muted); margin-top: .2rem; }
table.data { border-collapse: collapse; width: 100%; font: 400 .95rem/1.4 var(--sans); font-variant-numeric: tabular-nums; margin-top: 1rem; margin-bottom: 1rem; }
table.data caption { text-align: left; font-weight: 600; margin-bottom: .4rem; }
table.data th, table.data td { padding: .4rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
table.data thead th { border-bottom: 2px solid var(--ink); font-weight: 600; }
table.data tbody th { font-weight: 600; }
table.data tr.hl { background: var(--amber-tint); }
.table-note { font: 400 .9rem/1.5 var(--sans); color: var(--muted); }
.placeholder { margin-top: 1.25rem; margin-bottom: 1.25rem; padding: .9rem 1.1rem; border: 2px dashed var(--amber); border-radius: 4px; background: var(--amber-tint); font: 400 .92rem/1.5 var(--sans); color: var(--muted); }
.placeholder p { margin: 0; }
.placeholder strong { color: var(--ink); }
.placeholder-inline { font-style: italic; color: var(--muted); }
.source-flag { font: 600 .8rem/1.4 var(--sans); color: #1d4f7a; background: #e3eef8; display: inline-block; width: fit-content; padding: .2rem .5rem; border-radius: 3px; }
.see-also { font: 400 .95rem/1.5 var(--sans); }
.premises { padding-left: 1.4rem; }
.premises li { margin-bottom: .5rem; }
.premises li::marker { font-weight: 600; color: var(--navy); }
.case-cards { list-style: none; padding: 0; display: grid; gap: .9rem; }
.case-cards li { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem 1.1rem; }
.case-cards li > a strong, .case-cards li > strong { font-size: 1.1rem; }
.case-cards li > a { text-decoration: none; }
.case-cards li > a strong { font-family: var(--sans); font-weight: 600; color: var(--navy); }
.case-cards li > a strong::after { content: " →"; color: var(--amber-text); }
.case-meta { display: block; font: 400 .85rem/1.4 var(--sans); color: var(--muted); }
.case-cards li p { margin: .4rem 0 0; }
.case-cards .source-flag { margin-top: .5rem; }
.not-built { font: 400 .75rem/1.4 var(--sans); color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 0 .35rem; margin-left: .35rem; white-space: nowrap; }
.downloads { padding-left: 1.2rem; }
.body h3 { font: 600 1.05rem/1.3 var(--sans); margin: 1.5rem 0 .4rem; }
a.pos-prev, a.pos-next { text-decoration: none; }
@media print {
  .next-up { display: none; }
  .placeholder, table.data, .case-cards li { break-inside: avoid; }
}

/* Oct 23: quoted headline, grouped reading list, figures, author's note */
.hero h1 { text-wrap: balance; }
.hero h1 .phrase { display: inline-block; }
.hero h1 .hang { margin-left: -.42em; }
.path-group { margin: 1.1rem 0 .25rem; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.path-groups .path { margin-top: 0; }
.diagram img { display: block; width: 100%; height: auto; }
.author-note { font-family: var(--sans); font-size: .88rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: .75rem; margin-top: 2rem; }
.diagram-tall img { max-width: 20rem; margin: 0 auto; }

/* Oct 24: photo grid (About, test flying) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.photo-grid figure { margin: 0; }
.photo-grid img { display: block; width: 100%; height: auto; border-radius: 3px; }

/* Oct 24: the paper's indented italic asides (material beyond the talk) */
.amp-label { font: 600 .74rem/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .35rem; }
.body > .amp { border-left: 3px solid var(--rule); padding-left: .9rem; }

/* Oct 24: Anaheim Q&A transcript */
.qa p { margin: 0 0 .9rem; }
.qa strong { font-family: var(--sans); font-size: .9rem; color: var(--navy); }

/* Oct 24: one-page handout */
.handout-credit { font-family: var(--sans); font-size: .85rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: .6rem; margin-top: 1.5rem; }
@media print {
  .page-handout body, .page-handout { font-size: 9.5pt; line-height: 1.32; }
  .page-handout ol.premises { margin: .2rem 0; }
  .page-handout .questions li { line-height: 1.25; }
  .page-handout .site-footer, .page-handout .draft-flag { display: none; }
  .page-handout h1 { font-size: 15pt; margin: 0 0 .3rem; }
  .page-handout h2 { font-size: 11pt; margin: .6rem 0 .2rem; border: 0; padding: 0; }
  .page-handout .body p, .page-handout li { margin: 0 0 .2rem; }
  .page-handout table.data { font-size: 8.5pt; margin: .2rem 0; }
  .page-handout table.data th, .page-handout table.data td { padding: .08rem .4rem; }
  .page-handout .questions li { padding-top: .1rem; padding-bottom: .1rem; }
  .page-handout .site-header { margin-bottom: .3rem; }
}
@page { margin: .5in; }

/* Oct 24: calculator examples, 100-crew grid, simulation, cylinder */
.calc-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.calc-presets button, #calc-run { font: 500 .85rem var(--sans); color: var(--navy); background: #fff; border: 1.5px solid var(--navy); border-radius: 3px; padding: .3rem .6rem; cursor: pointer; }
.calc-presets button:hover, #calc-run:hover { background: var(--navy); color: #fff; }
#calc-run:disabled { opacity: .5; cursor: default; }
.calc-visual { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 1rem; }
.calc-grid-title { font: 600 .85rem var(--sans); margin: 0 0 .4rem; }
.calc-grid { display: grid; grid-template-columns: repeat(10, 1.1rem); gap: 3px; }
.calc-grid .sq { width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--navy); border-radius: 2px; background: #fff; }
.calc-grid .sq.fail { background: var(--navy); }
.calc-cylinder { margin: 0; width: 9rem; }
.calc-cylinder svg { width: 100%; height: auto; }
.calc-cylinder .cyl { fill: #c9d4de; }
.calc-cylinder .chamber { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.calc-cylinder .chamber.loaded { fill: var(--navy); }
.calc-cylinder .cyl-axis { fill: var(--navy); }
.calc-cylinder figcaption { font-size: .8rem; }
@media print { .calc-presets, #calc-run { display: none; } }

/* Oct 24 review fixes: long URLs in notes, phone tables and diagram labels, print breaks */
.note, .paper-notes li { overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  table.data th, table.data td { padding-left: .35rem; padding-right: .35rem; }
  table.data { font-size: .85rem; }
  svg .label { font-size: 22px; }
}
@media print {
  h2, h3 { break-after: avoid; }
  table.data { break-inside: auto; }
  table.data tr { break-inside: avoid; }
  .site-footer, .cite details, .placeholder { display: none; }
}
svg .leader { stroke: var(--navy); stroke-width: 1; }
.cite-apa, .cite p { overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
@media (max-width: 30rem) { .glance dl { grid-template-columns: minmax(0, 1fr); } .glance dd { border-top: 0; padding-top: 0; } }
/* Oct 24 visual review: matching box widths, header aligned with wide pages, placeholders, print */
.key-idea, .toc { max-width: 44rem; }
.placeholder { margin-inline: 0; }
@media (min-width: 78rem) { .site-header, .site-footer { padding-left: max(1rem, calc((100% - 80rem) / 2)); padding-right: max(1rem, calc((100% - 80rem) / 2)); } }
@media print { .fw-list li { break-inside: avoid; } }
svg .wind line { stroke: var(--navy); stroke-width: 2; }
svg .wind polygon { fill: var(--navy); }

/* Embedded video (Vimeo); the Anaheim recording is 4:3 */
.video-figure { margin: 1.25rem 0; }
.video { aspect-ratio: 4 / 3; background: var(--ink); }
.video-wide { aspect-ratio: 16 / 9; } /* the induction video is 960x540 */
.video iframe { display: block; width: 100%; height: 100%; border: 0; }
.pull cite { display: block; margin-top: .5rem; font: 600 .85rem/1.4 var(--sans); font-style: normal; color: var(--muted); }
.pull cite::before { content: "— "; }
/* Oct 25: a month and year stay on one line in date columns */
table.dated td:first-child { white-space: nowrap; }
/* Oct 25: a tall photo beside the text it belongs to; full width on phones */
.photo-side { margin: 0 0 1rem; }
.photo-side img { display: block; width: 100%; max-width: 20rem; height: auto; border-radius: 3px; }
@media (min-width: 40rem) { .photo-side { float: right; width: 14rem; margin: .3rem 0 1rem 1.5rem; } }
#versions { clear: both; }
@media print { .print-hint { display: none; } }
/* Oct 26: short clips hosted on the site, shown with the browser's own player */
.video-figure video { display: block; width: 100%; height: auto; background: var(--ink); border-radius: 3px; }
/* Oct 26 review fixes */
/* Skip link: hidden until it has keyboard focus */
.skip-link { position: absolute; left: .5rem; top: -3rem; z-index: 10; background: #fff; color: var(--navy); font: 600 .9rem var(--sans); padding: .5rem .8rem; border: 2px solid var(--navy); border-radius: 3px; }
.skip-link:focus { top: .5rem; }
/* The footer meets the bottom of the window on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
.site-footer { margin-top: auto; }
/* 404: one column, no empty contents column */
main.not-found { display: block; max-width: 44rem; }
/* Home: a way into the content on the first screen */
.hero-links { font: 400 1rem/1.5 var(--sans); margin: 0 0 1.5rem; }
/* Bylines link to About and the paper; keep the author's name looking like a name */
a.author { color: var(--ink); }
/* Tables keep their full width; narrow screens scroll the wrapper, not the table */
.table-scroll > table.data { margin-top: 0; }
.table-scroll { margin: 1rem 0; }
/* Cases by factor: the factor numbers alone on the narrowest phones */
@media (max-width: 22rem) {
  .th-name { display: none; }
  .factor-table th, .factor-table td { padding-left: .25rem; padding-right: .25rem; }
}
/* Diagrams drawn as images get the whole column on phones, so their labels stay readable */
@media (max-width: 30rem) { .diagram { padding: .5rem 0; background: none; } }
/* A photo that only exists small is shown no larger than it is */
.photo-natural img { max-width: 640px; margin: 0 auto; }
/* About: then-and-now photos at one shape; a lone 4:3 photo across the grid */
.photo-pair img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; }
.photo-grid .photo-wide { grid-column: 1 / -1; }
.photo-grid .photo-wide img { max-width: 30rem; }
@media print {
  /* Videos cannot play on paper: hide the players, keep the self-hosted posters without controls, print where to watch */
  .video { display: none; }
  .video-figure video::-webkit-media-controls { display: none !important; }
  figcaption[data-watch]::after { content: " Watch: " attr(data-watch) "."; }
  /* Photos no taller than about a third of a page */
  .diagram img, .photo-grid img, .photo-side img, .photo-natural img { max-height: 3.5in; width: auto; max-width: 100%; margin: 0 auto; }
  .photo-side { float: none; width: auto; }
  /* Citations stay on screen; the license line keeps its address but short */
  .cite { display: none; }
  .license-line a[href^="https://creativecommons.org"]::after { content: " (creativecommons.org/licenses/by-sa/4.0)"; }
  .license-line { break-before: avoid; margin-top: .25rem; margin-bottom: 0; font-size: .8rem; }
  main { padding-bottom: 0; }
  .table-scroll { overflow: visible; }
  .skip-link, .related { display: none; }
  body { display: block; min-height: 0; }
}
@media print { .page-handout .table-scroll { margin: .2rem 0; } .page-handout .print-hint { display: none; } .page-handout main { padding-bottom: 0; } .page-handout .handout-credit { margin-top: .6rem; padding-top: .3rem; } }

/* Phones: the header nav on one line; the briefing outline as stacked rows, each cell labelled */
@media screen and (max-width: 26rem) { .site-nav { gap: .25rem .85rem; font-size: .86rem; } }
@media screen and (max-width: 40rem) {
  table.outline thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.outline, table.outline tbody, table.outline tr, table.outline td { display: block; }
  table.outline caption { display: block; }
  table.outline tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
  table.outline td { border: 0; padding: .15rem 0; }
  table.outline td::before { font-weight: 600; }
  table.outline td:nth-child(1)::before { content: "Minutes (20 · 30): "; }
  table.outline td:nth-child(3)::before { content: "Show: "; }
  table.outline td:nth-child(4)::before { content: "Page: "; }
}

/* Find page: search box, results, and the index of every page (reached from the footer) */
.find-search { margin: 0 0 1.5rem; max-width: 44rem; }
.find-label { display: block; font: 600 .75rem var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--navy); margin: 0 0 .35rem; }
.find-input { width: 100%; font: 400 1.05rem var(--sans); padding: .6rem .75rem; border: 2px solid var(--navy); border-radius: 3px; background: #fff; color: var(--ink); }
.find-input:focus { outline: 3px solid var(--amber); outline-offset: 1px; }
.find-status { font: .88rem var(--sans); color: var(--muted); margin: .5rem 0; }
.find-status:empty { display: none; }
.find-results { list-style: none; padding: 0; margin: 0; }
.find-results li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.find-hit { font-family: var(--sans); font-weight: 500; }
.find-where { font-weight: 600; }
.find-snippet { font-size: .92rem; margin: .2rem 0 0; color: var(--ink); overflow-wrap: anywhere; }
.find mark { background: var(--amber-tint); color: inherit; box-shadow: inset 0 -2px 0 var(--amber); }
.find-index h2::before { content: none; }
.si-group { font: 600 .75rem var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--navy); margin: 1.5rem 0 .4rem; }
.si-pages { list-style: none; padding: 0; margin: 0; }
.si-pages > li { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.si-page { font-family: var(--sans); font-weight: 600; }
.si-desc { display: block; font-size: .9rem; color: var(--muted); }
.si-sections { font: .85rem/1.5 var(--sans); margin: .3rem 0 0; padding-left: 1.1rem; }
.si-subs { color: var(--muted); }
.si-subs::before { content: " — "; }
@media print { .find-search { display: none; } }

/* Nov 1: homepage 3D top-landing graphic (svg#a3d). Generated by docs/landing-graphic/make_approach.py in the
   meier-safe project (`make_approach.py approach.css`); kept here because the CSP blocks inline <style>. */
#a3d .c { fill: none; stroke: #12304a; stroke-opacity: .18; stroke-width: .6; }
#a3d .label { font: 500 13px var(--sans); fill: #12304a; stroke: #f4f5f2; stroke-width: 4; stroke-linejoin: round; paint-order: stroke; }
#a3d .label.k { font-weight: 700; }
#a3d .case { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
#a3d .track { fill: none; stroke: #12304a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#a3d .shadow { fill: none; stroke: #12304a; stroke-width: 1.1; stroke-dasharray: 1.5 3.5; stroke-opacity: .6; }
#a3d .drop { stroke: #12304a; stroke-width: .7; stroke-opacity: .35; }
#a3d .leader { stroke: #12304a; stroke-width: .8; }
#a3d .w { fill: none; stroke: #3f6f9a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#a3d .wh { fill: #3f6f9a; }
#a3d .touch { fill: #fff; stroke: #12304a; stroke-width: 2.5; }
@media (max-width: 30rem) { #a3d .label { font-size: 22px; } }