/* Population Pyramid Practice: a census office worksheet. Pale stone page, white sheets, a deep teal for actions,
   and the pyramid's own two colours: slate blue for males, terracotta for females. Geometric sans headings with a
   ruled left edge. On paper: dark grey male bars, light grey female bars, black lines. */
:root {
  --bg: #f3f4ef;
  --paper: #ffffff;
  --ink: #1d2422;
  --muted: #4b5552;
  --line: #d6dbd3;
  --edge: #7f8a85;
  --accent: #0d5f58;
  --accent-ink: #ffffff;
  --accent-soft: #dcefeb;
  --info: #1f5d86;
  --ok: #17663a;
  --ok-soft: #dff1e6;
  --close: #7a5300;
  --close-soft: #f7ecd4;
  --bad: #a2261f;
  --bad-soft: #f8e1de;
  --focus: #1b5fd0;
  --g-bg: #ffffff;
  --g1: #e1e5df;
  --g2: #aab3ad;
  --male: #3a6ea5;
  --male-edge: #24507e;
  --female: #c2553a;
  --female-edge: #8f3622;
  --user: #0d5f58;
  --head: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r: 3px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151918;
    --paper: #1c2120;
    --ink: #e5ebe8;
    --muted: #a7b2ad;
    --line: #2d3532;
    --edge: #66726d;
    --accent: #5cc4b6;
    --accent-ink: #0b1f1c;
    --accent-soft: #163330;
    --info: #8cc2ec;
    --ok: #8adca6;
    --ok-soft: #142c1e;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9c8f;
    --bad-soft: #3a1c18;
    --focus: #8ab8ff;
    --g-bg: #181d1c;
    --g1: #262d2b;
    --g2: #46514d;
    --male: #6b9fd6;
    --male-edge: #9cc2ea;
    --female: #e0805f;
    --female-edge: #f1aa90;
    --user: #5cc4b6;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
a { color: var(--info); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.hero { padding: 16px 0 4px; max-width: 860px; margin-top: 14px; }
h1 { font: 700 clamp(1.75rem, 5.2vw, 2.6rem)/1.08 var(--head); margin: 0 0 8px; letter-spacing: -0.01em; }
.lede { margin: 0 0 6px; color: var(--muted); max-width: 68ch; }
h2 { font: 700 1.3rem/1.2 var(--head); margin: 0 0 10px; }

/* setup */
.setup { margin: 16px 0 4px; }
fieldset { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 5px; font-size: 0.95rem; }
.setgrid { display: grid; gap: 0 18px; }
@media (min-width: 760px) { .setgrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 300px) and (max-width: 759px) { .setgrid { grid-template-columns: 1fr 1fr; } .setgrid > :first-child { grid-column: 1 / -1; } }
.seg { display: grid; gap: 4px; }
.seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg { position: relative; display: block; cursor: pointer; }
.sg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sg > span { display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%; padding: 4px 6px; text-align: center; font-size: 0.92rem; font-weight: 600; line-height: 1.15;
  background: var(--paper); border: 1px solid var(--line); border-bottom: 3px solid var(--line); border-radius: var(--r); color: var(--muted); }
.sg input:checked + span { color: var(--ink); border-color: var(--edge); border-bottom-color: var(--accent); background: var(--accent-soft); }
.sg input:focus-visible + span, .tg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.tdet { margin: 2px 0 8px; }
.tdet > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.tdet > summary::-webkit-details-marker { display: none; }
.tdet > summary::before { content: ""; width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid var(--accent); border-right: 0; transition: transform 0.15s; }
.tdet[open] > summary::before { transform: rotate(90deg); }
.tdet .tsum { font-weight: 400; color: var(--muted); font-size: 0.92rem; }
.toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
@media (min-width: 760px) { .toggles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tg { position: relative; display: block; cursor: pointer; }
.tg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tg span { display: flex; flex-direction: column; justify-content: center; min-height: 44px; height: 100%; padding: 5px 8px 5px 30px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--muted); line-height: 1.2; }
.tg span::before { content: ""; position: absolute; left: 9px; top: 50%; width: 14px; height: 14px; margin-top: -8px; border: 2px solid var(--edge); border-radius: 2px; }
.tg b { font-size: 0.92rem; font-weight: 600; }
.tg small { display: none; color: var(--muted); font-size: 0.875rem; }
@media (min-width: 1020px) { .tg small { display: block; } }
.tg input:checked + span { color: var(--ink); border-color: var(--edge); }
.tg input:checked + span::before { border-color: var(--accent); background: var(--accent); }
.tg input:checked + span::after { content: ""; position: absolute; left: 14px; top: 50%; width: 4px; height: 8px; margin-top: -7px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.setrow { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 600; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; }
select { max-width: 100%; }
.btn { font: inherit; font-weight: 650; min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.small { padding: 6px 14px; }
.btn:hover { filter: brightness(0.95); }
.link { font: inherit; background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--info); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.note { overflow-wrap: anywhere; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--close); background: var(--close-soft); border-radius: var(--r); }
.note.info { border-color: var(--info); background: var(--paper); }
.note .link { min-height: 0; padding: 0; font-weight: 600; }

/* the sheet */
.sheet { margin: 14px 0 0; background: var(--paper); border: 1px solid var(--line); padding: 4px 14px 0; }
@media (max-width: 600px) { .sheet { margin-left: -16px; margin-right: -16px; border-left: 0; border-right: 0; padding: 4px 16px 0; } }
.sheet:focus { outline: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding: 8px 0 4px; }
.sheet-head h2 { margin: 0; font-size: 1.25rem; }
.code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.score { margin: 0; font-size: 0.95rem; color: var(--muted); }
.defs { margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 18px; }
.defs li { max-width: 60ch; }
.rules .rdefs { display: none; margin: 0 0 8px; }
@media (max-width: 599px) { .defs { display: none; } .rules .rdefs { display: block; } }
.rules { margin: 2px 0 0; font-size: 0.92rem; }
.rules > summary { cursor: pointer; color: var(--info); min-height: 44px; display: flex; align-items: center; }
.rules ul { margin: 0 0 8px; padding-left: 1.2em; }
.rules p { margin: 0 0 6px; max-width: 75ch; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { border-top: 1px solid var(--line); padding: 18px 0 8px; }
.q h3 { font: 700 1.15rem/1.25 var(--head); margin: 0 0 4px; }
.q h3 .qn { color: var(--accent); }
.q .scen { margin: 0 0 10px; max-width: 75ch; }

/* figures: the pyramid with its table beside it; the parts beside the figure on wide screens */
@media (min-width: 1040px) {
  .qbody { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .q-compare .qbody { grid-template-columns: 1fr; }
}
.fig { margin: 0 0 14px; display: grid; gap: 10px 16px; align-items: start; }
@media (min-width: 640px) { .fig-one:not(.solo), .fig-plot { grid-template-columns: minmax(0, 1fr) auto; } }
.fig.solo { max-width: 560px; }
.fig-two .pair { display: grid; gap: 10px 16px; }
@media (min-width: 700px) { .fig-two .pair { grid-template-columns: 1fr 1fr; } .fig-two { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 1040px) { .q-compare .fig-two { max-width: 1000px; } }
.pfig { margin: 0; min-width: 0; }
svg.pyr { display: block; width: 100%; max-width: 560px; height: auto; background: var(--g-bg); border: 1px solid var(--line); }
.pyr .g1 { stroke: var(--g1); stroke-width: 0.4; }
.pyr .g2 { stroke: var(--g2); stroke-width: 0.6; }
.pyr .mid, .pyr .base { stroke: var(--ink); stroke-width: 0.8; }
.pyr .bm { fill: var(--male); stroke: var(--male-edge); stroke-width: 0.4; }
.pyr .bf { fill: var(--female); stroke: var(--female-edge); stroke-width: 0.4; }
.pyr .kbar { fill: var(--user); stroke: var(--user); fill-opacity: 0.6; }
.pyr .gap { fill: none; stroke: var(--edge); stroke-width: 0.7; stroke-dasharray: 2.2 1.6; }
.pyr .ubar { fill: var(--user); fill-opacity: 0.5; stroke: var(--user); stroke-width: 0.8; }
.pyr .age { font: 7.6px var(--sans); fill: var(--ink); text-anchor: middle; }
.pyr .tm, .pyr .tf { font: 7.6px var(--sans); fill: var(--ink); text-anchor: middle; }
.pyr .sx { font: 700 8.6px var(--sans); text-anchor: middle; }
.pyr .sxm { fill: var(--male-edge); }
.pyr .sxf { fill: var(--female-edge); }
.pyr .axc { font: 600 7.8px var(--sans); fill: var(--muted); text-anchor: middle; }
.pyr .ptitle { font: 700 8.8px var(--sans); fill: var(--ink); }
.pyr .hit { fill: transparent; cursor: crosshair; }
.pyr .hit:hover { fill: var(--accent-soft); fill-opacity: 0.6; }
.dsrc { margin: 3px 0 0; font-size: 0.875rem; color: var(--muted); }
.tapnote { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); }
.keyfig { max-width: 420px; margin: 0 0 8px; }

/* tables beside a pyramid */
.side { min-width: 0; }
.tcap { margin: 0 0 3px; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.ttot { margin: 4px 0 0; font-size: 0.9rem; font-weight: 600; }
.tnote { margin: 3px 0 0; font-size: 0.875rem; color: var(--muted); }
.halves { display: flex; flex-direction: column; }
.halves .vtab + .vtab thead { display: none; }
.halves .vtab + .vtab tbody tr:first-child > * { border-top: 0; }
@media (max-width: 639px) { .halves { flex-direction: row; flex-wrap: wrap; gap: 8px; } .halves .vtab + .vtab thead { display: table-header-group; } .halves .vtab + .vtab tbody tr:first-child > * { border-top: 1px solid var(--line); } }
.vtab, .btab { border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.vtab th, .vtab td, .btab th, .btab td { border: 1px solid var(--line); padding: 2px 8px; text-align: right; }
.vtab thead th, .btab thead th { font-weight: 600; background: var(--bg); text-align: center; }
.vtab tbody th, .btab tbody th { font-weight: 600; color: var(--muted); text-align: left; white-space: nowrap; }
.btab caption { caption-side: top; text-align: left; font-size: 0.86rem; font-weight: 600; color: var(--muted); padding-bottom: 3px; }
.btab .tot th, .btab .tot td { border-top: 2px solid var(--edge); }
@media (max-width: 400px) { .vtab th, .vtab td { padding: 2px 4px; font-size: 0.84rem; } }

/* questions */
.qparts { max-width: 760px; min-width: 0; }
.part { margin: 0 0 14px; min-width: 0; }
.part > .prompt, .part legend { display: block; font-weight: 600; margin: 0 0 6px; font-size: 1rem; }
.opts { display: grid; gap: 4px; }
.opts.row { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-width: 680px; }
.opt { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.opt input { margin: 3px 0 0; min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.opt .ot { min-width: 0; }
.opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.ain { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.ain input { width: 9em; max-width: 100%; font-family: var(--mono); }
.ain .unit { color: var(--muted); white-space: nowrap; }
.qfoot { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.fbwrap:empty { display: none; }
.fb { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--r); max-width: 70ch; }
.fb.right { background: var(--ok-soft); color: var(--ok); }
.fb.close { background: var(--close-soft); color: var(--close); }
.fb.wrong, .fb.unread { background: var(--bad-soft); color: var(--bad); }
.part.is-right .ain input { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.part.is-wrong .ain input, .part.is-unread .ain input { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.part.is-close .ain input { border-color: var(--close); box-shadow: inset 0 0 0 1px var(--close); }
.work { margin-top: 4px; }
.work > summary { cursor: pointer; color: var(--muted); font-size: 0.93rem; padding: 10px 0; min-height: 44px; display: flex; align-items: center; list-style: none; }
.work > summary::-webkit-details-marker { display: none; }
.work > summary::before { content: "+"; margin-right: 6px; font-weight: 700; font-family: var(--mono); }
.work[open] > summary::before { content: "−"; }
.work .ans { margin: 0 0 2px; }
.steps { margin: 2px 0 10px; padding-left: 1.2em; font-size: 0.94rem; overflow-wrap: anywhere; }
.ask { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 6px 10px; background: var(--close-soft); border-radius: var(--r); }
.ask .link { padding: 0 4px; }
.ask[hidden] { display: none; }
.sheet-foot { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }

.share { margin: 12px 0 8px; }
.print-row { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; }
.print-row label, .share-out label { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; font-weight: 600; }
.share-out input { width: 100%; }
.recent { margin-top: 12px; border-top: 1px solid var(--line); }
.recent summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 4px 0; }
.recent small { display: block; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; margin: 8px 0 10px; }
.sheet-foot .hint { margin: 0; }

.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 160%); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); max-width: calc(100% - 32px); transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast, .tdet > summary::before { transition: none; } }

/* content */
.content { padding: 24px 0 8px; max-width: 840px; }
.content h2 { margin-top: 30px; }
.content p { max-width: 70ch; }
.ltab { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.ltab th, .ltab td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ltab th { font-size: 0.88rem; color: var(--muted); font-weight: 600; }
.ltab td:first-child { font-weight: 600; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.faq details p { margin: 0 0 12px; }
.sources { font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; margin-top: 20px; }

footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 16px 0 28px; color: var(--muted); font-size: 0.92rem; }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-footer a { color: var(--ink); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 600px) {
  .sg > span { font-size: 0.86rem; }
  .ltab thead { display: none; }
  .ltab tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .ltab td { display: block; border: 0; padding: 1px 0; }
  .ltab td:not(:first-child) { color: var(--muted); }
}

/* print: worksheet and key only; dark grey male bars, light grey female bars, black lines */
.print-root { display: none; }
@page { margin: 0.45in 0.5in; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --edge: #555; --g-bg: #fff; --g1: #9a9a9a; --g2: #4a4a4a;
    --male: #6a6a6a; --male-edge: #000; --female: #d2d2d2; --female-edge: #000; --user: #000; }
  body { background: #fff; color: #000; font: 10.5pt/1.38 var(--sans); }
  main, footer, .toast, .skip, #announce { display: none !important; }
  .print-root { display: block; }
  svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  svg.pyr { border: 0; max-width: none; }
  .pyr .g1 { stroke-width: 0.45; }
  .pyr .g2 { stroke-width: 0.75; }
  .pyr .sxm, .pyr .sxf, .pyr .axc { fill: #000; }
  .pyr .kbar { fill: #fff; stroke: #000; stroke-width: 1; stroke-dasharray: none; }
  .pyr .gap { stroke: #000; stroke-width: 0.6; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8.5pt var(--sans); color: #444; text-align: right; padding-bottom: 6pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2pt solid #000; margin-bottom: 6pt; }
  .ph h2 { font: 700 15pt var(--head); margin: 0; }
  .ph p { margin: 0; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 4pt; }
  .pdefs { margin: 0 0 4pt; padding-left: 12pt; font-size: 8.5pt; color: #222; }
  .pq { list-style: none; margin: 0; padding: 0; }
  .pq > li { padding: 6pt 0; border-bottom: 0.75pt solid #999; break-inside: avoid; page-break-inside: avoid; }
  .pq h3 { font: 700 11pt var(--head); margin: 0 0 2pt; }
  .pq .pscen { margin: 0 0 4pt; font-size: 9.5pt; }
  .pfigs .fig { margin: 0 0 4pt; display: flex; gap: 6mm; align-items: flex-start; max-width: none; }
  .pfigs .pfig { flex: none; width: 86mm; }
  .pfigs svg.pyr { width: 86mm; }
  .pfigs .fig-two .pair { display: flex; gap: 4mm; }
  .pfigs .fig-two .pfig { width: 74mm; }
  .pfigs .fig-two svg.pyr { width: 74mm; }
  .pfigs .dsrc { font-size: 7.5pt; color: #333; }
  .pfigs .tnote { font-size: 8pt; color: #333; margin-top: 2pt; }
  .pfigs .halves { flex-direction: row; gap: 3mm; }
  .pfigs .halves .vtab + .vtab thead { display: table-header-group; }
  .pfigs .halves .vtab + .vtab tbody tr:first-child > * { border-top: 0.75pt solid #888; }
  .pfigs .vtab, .pfigs .btab { font-size: 8.5pt; }
  .pfigs .vtab th, .pfigs .vtab td, .pfigs .btab th, .pfigs .btab td { border-color: #888; padding: 0.5pt 4pt; }
  .pfigs .vtab thead th, .pfigs .btab thead th { background: none; }
  .pfigs .tcap, .pfigs .btab caption { color: #000; font-size: 8.5pt; }
  /* a pyramid with no table: the parts sit beside it */
  .pq > li.solo-fig { display: grid; grid-template-columns: 86mm minmax(0, 1fr); column-gap: 6mm; }
  .pq > li.solo-fig .pqh { grid-column: 1 / -1; }
  .pparts { font-size: 9.5pt; columns: 2; column-gap: 8mm; }
  .solo-fig .pparts { columns: 1; }
  /* a pyramid with a table: the table and then the parts in a column beside the pyramid */
  .pq > li.pk-one:not(.solo-fig), .pq > li.pk-plot { display: grid; grid-template-columns: 86mm minmax(0, 1fr); column-gap: 6mm; align-items: start; }
  .pq > li.pk-one:not(.solo-fig) .pqh, .pq > li.pk-plot .pqh { grid-column: 1 / -1; }
  .pq > li.pk-one:not(.solo-fig) .pfigs, .pq > li.pk-one:not(.solo-fig) .pfigs .fig,
  .pq > li.pk-plot .pfigs, .pq > li.pk-plot .pfigs .fig { display: contents; }
  .pq > li.pk-one:not(.solo-fig) .pfig, .pq > li.pk-plot .pfig { grid-column: 1; grid-row: 2 / span 2; width: 86mm; }
  .pq > li.pk-one:not(.solo-fig) .pfig svg.pyr, .pq > li.pk-plot .pfig svg.pyr { width: 86mm; }
  .pq > li.pk-one:not(.solo-fig) .side, .pq > li.pk-plot .side { grid-column: 2; grid-row: 2; margin-bottom: 5pt; }
  .pq > li.pk-one:not(.solo-fig) .pparts, .pq > li.pk-plot .pparts { grid-column: 2; grid-row: 3; columns: 1; }
  .pq > li.solo-fig { grid-template-columns: 86mm minmax(0, 1fr); }
  .pparts .pp { margin: 0 0 7pt; break-inside: avoid; page-break-inside: avoid; }
  .pparts .pp p { margin: 0 0 3pt; }
  .pparts ol.popts { margin: 0; padding-left: 15pt; list-style: upper-alpha; }
  .pparts ol.popts li { margin: 0 0 1pt; }
  .pparts ol.popts.row { display: flex; flex-wrap: wrap; gap: 0 24pt; }
  .pparts .pline { margin-top: 8pt !important; }
  .pdone { font-style: italic; color: #333; }
  .pcredit { font-size: 7.5pt; color: #333; margin: 6pt 0 0; grid-column: 1 / -1; }
  .pkey { break-before: page; page-break-before: always; }
  .pk { margin: 0; padding-left: 0; list-style: none; }
  .pk > li { padding: 4pt 0 5pt; border-bottom: 0.75pt solid #bbb; }
  .pk .pkp { break-inside: avoid; page-break-inside: avoid; }
  .pk h3 { font: 700 10.5pt var(--head); margin: 0; break-after: avoid; page-break-after: avoid; }
  .pk p { margin: 1pt 0 0; }
  .pk .pka { font-weight: 700; }
  .pk ul { margin: 1pt 0 0; padding-left: 13pt; font-size: 9pt; line-height: 1.35; }
  .pkfig { float: right; width: 70mm; margin: 0 0 4pt 6mm; }
  .pkfig svg.pyr { width: 70mm !important; }
  .pk > li::after { content: ""; display: block; clear: both; }
}

/* phones: the first pyramid on the first screen */
@media (max-width: 599px) {
  .hero { margin-top: 8px; padding: 6px 0 2px; }
  h1 { font-size: 1.7rem; margin-bottom: 4px; }
  .lede { font-size: 1rem; line-height: 1.45; }
  .setup { margin-top: 10px; }
  .setgrid legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .setgrid fieldset { margin-bottom: 6px; }
  .tdet { margin: 0; }
  .tdet .tsum { display: none; }
  .sheet-head { padding-top: 6px; }
  .q { padding-top: 12px; }
  .q .scen { margin-bottom: 6px; font-size: 1rem; }
}