/*
  plain.css: the plain world (the document in the browser's own clothes) and the print sheet.

  Three layers:
    1. Both worlds, every medium: a few global utilities the DOM contract relies on.
    2. @media screen, html.plain: a browser-default mimic, pinned to explicit values so it renders
       the same in every engine, then deliberately typeset (42em measure, a clear hierarchy).
    3. @media print: standalone. outside.css is wrapped in @media screen, so a print from either
       world uses only these rules and always comes out as the plain résumé.
  The plain world uses no web fonts at all.
*/

/* ---------------------------------------------------------------------------------------------
   1. Both worlds
   --------------------------------------------------------------------------------------------- */

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Chips: without JS the explanation is always shown inline; with JS it follows aria-expanded. */
html.js .chip[aria-expanded="false"] + .chip-x { display: none; }

/* Controls that do nothing without JS are not shown without JS. */
html:not(.js) .needs-js,
html:not(.js) .door { display: none !important; }

/* ---------------------------------------------------------------------------------------------
   2. Screen
   --------------------------------------------------------------------------------------------- */

@media screen {

  html { scrollbar-gutter: stable; }
  body { margin: 0; position: relative; }
  .print-only { display: none !important; }

  /* The beam canvas and the exit overlay never take part in layout. The canvas is scroll-locked: it lives
     in the document inside a clip the size of the page, and the engine moves it (transform) to cover the
     viewport plus a margin, so the compositor scrolls the drawing together with the text. */
  #beam-clip {
    position: absolute; inset: 0; overflow: hidden;
    z-index: 0; pointer-events: none;
  }
  #beam {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100vh; height: 100lvh;
    will-change: transform; pointer-events: none;
  }
  #fx { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
  #fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ---- the page --------------------------------------------------------------------------- */

  html.plain {
    background: #fff;
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html.plain #doc {
    position: relative; z-index: 1;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 8px;
    background: #fff;
    color: #000;
    font: 16px/1.25 'Times New Roman', Times, serif;
    font-synthesis: weight style;
    overflow-wrap: break-word;
  }

  html.plain #main,
  html.plain #doc > footer { max-width: 42em; }

  /* Mode switches. */
  html.plain .w-out,
  html.plain .bar,
  html.plain figure.slot,
  html.plain .slot-labels,
  html.plain .slot-controls,
  html.plain .figure-hit,
  html.plain .fig-controls,
  html.plain .arrow { display: none !important; }

  /* Odometer markup (ui.js) never shows in the plain world: final values only. */
  html.plain .odo { display: none !important; }
  html.plain .odo-final {
    position: static !important;
    width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; clip-path: none; white-space: normal;
  }

  /* ---- browser defaults, pinned ------------------------------------------------------------- */

  html.plain h1 { font-size: 2em; font-weight: bold; margin: .67em 0; line-height: 1.15; }
  html.plain h2 { font-size: 1.5em; font-weight: bold; margin: .83em 0; line-height: 1.2; }
  html.plain h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; line-height: 1.2; }
  html.plain p { margin: 1em 0; }
  html.plain ul,
  html.plain ol { margin: 1em 0; padding-left: 40px; }
  html.plain ul ul { margin: 0; }
  html.plain blockquote { margin: 1em 40px; }
  html.plain figure { margin: 1em 40px; }
  html.plain b,
  html.plain strong { font-weight: bold; }
  html.plain small { font-size: .8125em; }
  html.plain sup { font-size: .75em; line-height: 0; vertical-align: super; }
  html.plain code,
  html.plain kbd { font-family: monospace; font-size: .8125em; }
  html.plain small code,
  html.plain small kbd { font-size: 1em; }
  html.plain img { max-width: 100%; height: auto; border: 0; }

  html.plain a:link { color: #0000ee; text-decoration: underline; }
  html.plain a:visited { color: #551a8b; }
  html.plain a:active { color: #ee0000; }

  html.plain table { border-collapse: separate; border-spacing: 2px; }
  html.plain th { font-weight: bold; }

  /* Buttons are left completely alone (the real UA control) except the few that are really
     text: readouts that point at evidence, and the retired-themes egg. */
  html.plain .ev,
  html.plain .ro-btn,
  html.plain .egg-themes {
    appearance: none; -webkit-appearance: none;
    margin: 0; padding: 0; border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    line-height: inherit;
    cursor: auto;
  }

  /* ---- skip links, contents --------------------------------------------------------------- */

  html.plain .skip { display: inline; }

  html.plain #contents { margin: 1.5em 0; }
  html.plain #contents .contents-h { margin: 0; }
  html.plain #contents ol { margin: .25em 0 0; list-style-type: decimal-leading-zero; }

  /* ---- sections --------------------------------------------------------------------------- */

  html.plain main > .sec:not(.hero),
  html.plain #notes {
    margin-top: 2.5em;
    padding-top: .25em;
    border-top: 1px solid #a0a0a0;
    box-shadow: inset 0 1px 0 #e6e6e6;
  }

  html.plain .sec-head { margin-bottom: 1em; }
  html.plain .eyebrow { margin: 1em 0 0; font-size: .8125em; }
  html.plain .sec-head h2 { margin: .2em 0 .35em; }
  html.plain .deck { margin: .35em 0 1em; font-style: italic; }
  html.plain .sec-head .deck:last-child { margin-bottom: 0; }

  /* Readouts inside sections read as one typeset line: 578 campaign levels · 808 tests · … */
  html.plain .sec .readouts {
    list-style: none;
    padding-left: 0;
  }
  html.plain .sec .readouts > li { display: inline; }
  html.plain .sec .readouts > li + li::before { content: " · "; font-weight: normal; }
  html.plain .ro-v,
  html.plain .lv { font-weight: bold; }
  html.plain .ro-v,
  html.plain .lv .ev { white-space: nowrap; }
  html.plain .sec .readouts > li.ro-flip { display: inline-flex; column-gap: .25em; }
  html.plain .sec .readouts > li.ro-flip::before { order: -2; }
  html.plain .sec .readouts > li.ro-flip .ro-l { order: -1; }

  /* Chips: interactive ones stay real buttons; status chips read as teletype labels. */
  html.plain .chip-status,
  html.plain .chip-peak:not(button) { font-family: monospace; font-size: .8125em; white-space: nowrap; }
  html.plain .chip-x { font-size: .9em; }
  html.plain .chip-x::before { content: " ("; }
  html.plain .chip-x::after { content: ")"; }
  html.plain button.chip { vertical-align: baseline; }
  /* Without JS a chip cannot open, so it reads as a label and its explanation is already shown. */
  html.plain:not(.js) button.chip {
    appearance: none; -webkit-appearance: none;
    margin: 0; padding: 0; border: 0; background: none; color: inherit;
    font: .8125em monospace; cursor: auto;
  }

  /* Pull quotes. */
  html.plain figure.pull { margin: 1em 0; }
  html.plain figure.pull blockquote { margin: 0 40px; }
  html.plain figure.pull blockquote p { margin: 0; }
  html.plain figure.pull figcaption { margin: .25em 40px 0; font-size: .8125em; }

  /* ---- 01 hero ----------------------------------------------------------------------------- */

  html.plain .hero h1 { margin-bottom: .2em; }
  html.plain .hero .eyebrow { margin: 0; font-size: 1em; }
  html.plain .hero .role { margin: 0; }
  html.plain .hero .tagline { font-style: italic; }
  html.plain .hero-email { margin: 1em 0; }
  html.plain .hero-email .copy { margin-left: .25em; }
  html.plain .door { margin: 1em 0; }
  html.plain .door-row { margin: 0; }
  html.plain .door-row .door-leave { margin-right: .35em; }
  html.plain .door-row .door-stay { white-space: nowrap; }
  html.plain .door-esc { margin: .25em 0 0; }
  html.plain .hero .hero-deck { font-style: normal; }
  html.plain .sec .readouts.readouts-hero { list-style: disc; padding-left: 40px; }
  html.plain .sec .readouts.readouts-hero > li { display: list-item; }
  html.plain .sec .readouts.readouts-hero > li + li::before { content: none; }

  /* ---- 02 games ---------------------------------------------------------------------------- */

  html.plain .lead { margin: 1em 0 0; }
  html.plain .games { list-style: none; padding-left: 0; margin: 1.5em 0; }
  html.plain .game {
    position: relative;
    min-height: 56px;
    margin: 0 0 1.25em;
    padding-left: 72px;
  }
  html.plain .game .icon {
    position: absolute; left: 0; top: 2px;
    width: 56px; height: 56px;
  }
  html.plain .game h3 { margin: 0; }
  html.plain .game p { margin: .1em 0; }
  html.plain .game .genre { font-size: .8125em; }
  html.plain .game .line { font-style: italic; }

  html.plain .proof-block h3 { margin: 1.5em 0 .25em; }
  html.plain .proof-intro { margin: 0 0 1em; }
  html.plain .proof {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    column-gap: 12px;
  }
  /* Row 1: the two landscape captures. Row 2: the three phone captures. */
  html.plain .proof::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  html.plain .capture { margin: 0 0 1em; order: 1; }
  html.plain .capture-tall { order: 3; }
  html.plain .capture img { display: block; width: 100%; }
  /* The two landscape captures share one height: each grows in proportion to its aspect ratio. */
  html.plain .capture-wide { flex: 1.786 1 0; min-width: 12em; }
  html.plain .capture-wide + .capture-wide { flex-grow: 2.174; }
  html.plain .capture-tall { flex: 0 1 calc((100% - 24px) / 3); }
  /* Phone captures: crop the status bar away (SPEC 3.7), even here. */
  html.plain .capture-tall img {
    aspect-ratio: 720 / 1440;
    object-fit: cover;
    object-position: 50% 100%;
  }
  html.plain .capture figcaption { margin-top: .25em; font-size: .8125em; }

  /* ---- 03 hue ------------------------------------------------------------------------------- */

  html.plain .features li,
  html.plain .side li { margin: .35em 0; }
  html.plain .app { display: flex; align-items: center; gap: 12px; margin: 1em 0; }
  html.plain .app-icon { width: 64px; height: 64px; flex: none; }
  html.plain .app .links { margin: 0; }

  /* ---- 04 pulse ----------------------------------------------------------------------------- */

  html.plain .reveal { margin: 1em 0 0; }

  /* ---- 05 money, 11 readouts: ledgers ------------------------------------------------------- */

  html.plain .ledger { padding-left: 40px; }
  html.plain .ledger > li { margin: .2em 0; }
  html.plain .ledger-main > li { margin: .5em 0; }
  html.plain .ledger .ls { display: block; font-size: .8125em; }
  html.plain .rule { font-style: italic; }

  /* ---- 07 book club: the retired-themes egg (UA convention for "hover for more") ------------- */

  html.plain .egg { position: relative; }
  html.plain .egg-themes { text-decoration: underline dotted; text-underline-offset: 2px; }
  html.plain .egg-x {
    display: none;
    position: absolute; left: 0; top: 100%; z-index: 2;
    margin-top: 2px; padding: 1px 4px;
    background: #ffffe1; color: #000;
    border: 1px solid #767676;
    font: 13px/1.3 monospace;
    white-space: nowrap;
  }
  html.plain .egg-themes:hover + .egg-x,
  html.plain .egg-themes:focus + .egg-x { display: block; }

  /* ---- 08 board ----------------------------------------------------------------------------- */

  html.plain .pattern h3 { margin-bottom: .5em; }
  html.plain .flow { margin: .5em 0; }
  html.plain .flow-line { margin: .5em 0 1em; }

  /* ---- 09 bench ---------------------------------------------------------------------------- */

  html.plain .bench-item { margin: 1.5em 0; }
  html.plain .bi-head h3 { margin: 0; }
  html.plain .bi-status { margin: .15em 0 0; }
  html.plain .bi-main p,
  html.plain .bi-side p { margin: .5em 0; }
  html.plain .bi-quote { margin: .5em 40px; font-style: italic; }
  html.plain .bi-quote p { margin: 0; }
  html.plain .bi-side .readouts { margin: .5em 0; }

  /* ---- 10 trace: milestones as a dated list -------------------------------------------------- */

  html.plain .milestones { list-style: none; padding-left: 0; }
  html.plain .milestones > li { margin: .35em 0; padding-left: 1.5em; text-indent: -1.5em; }
  html.plain .milestones time { font-weight: bold; }

  /* ---- 12, 13 tables: the <table border=1 cellpadding=4> look ------------------------------ */

  html.plain table.misfires,
  html.plain table.lab {
    width: 100%;
    border: 1px outset #808080;
    font-size: 1em;
  }
  html.plain table.misfires th,
  html.plain table.misfires td,
  html.plain table.lab th,
  html.plain table.lab td {
    border: 1px inset #808080;
    padding: 4px;
    text-align: left;
    vertical-align: top;
  }
  html.plain table.misfires tbody th,
  html.plain table.lab tbody th { width: 30%; }
  html.plain table.lab td:last-child { width: 28%; }
  html.plain output { font-family: monospace; font-size: .8125em; }

  /* ---- 14 record --------------------------------------------------------------------------- */

  html.plain .jobs { list-style: none; padding-left: 0; }
  html.plain .job { margin: .75em 0; }
  html.plain .job-head { margin: 0; }
  html.plain .job-points { margin: .25em 0 0; }
  html.plain .job-note { margin: .15em 0 0; }
  html.plain .edu { padding-left: 40px; }
  html.plain .caps > li { margin: .5em 0; }
  html.plain .print-action { margin: 1.5em 0 0; }

  /* ---- 15 transmit, notes, footer ---------------------------------------------------------- */

  html.plain .transmit-email { font-size: 1.17em; font-weight: bold; margin: 0 0 .5em; }
  html.plain .transmit-actions { margin: .5em 0 1em; }
  html.plain .transmit-actions .cta + .cta { margin-left: .5em; }
  html.plain .contact-links > li { margin: .2em 0; }
  html.plain .reenter kbd { margin-left: .25em; }
  html.plain .colophon { margin-top: 1.5em; font-size: .8125em; line-height: 1.35; }
  html.plain .colophon small,
  html.plain .note small { font-size: 1em; }
  html.plain p.note { font-size: .8125em; line-height: 1.35; }

  html.plain .notes { font-size: .8125em; }
  html.plain .notes > li { margin: .3em 0; }
  html.plain #doc > footer { margin-top: 2em; font-size: .8125em; }

  /* ---- narrow screens ---------------------------------------------------------------------- */

  @media (max-width: 600px) {
    html.plain ul,
    html.plain ol,
    html.plain .ledger,
    html.plain .edu,
    html.plain .readouts-hero { padding-left: 24px; }
    html.plain .sec .readouts,
    html.plain .games,
    html.plain .jobs,
    html.plain .milestones { padding-left: 0; }
    html.plain blockquote,
    html.plain figure.pull blockquote,
    html.plain .bi-quote { margin-left: 20px; margin-right: 0; }
    html.plain figure.pull figcaption { margin-left: 20px; }
    html.plain .game { padding-left: 64px; }
    html.plain .game .icon { width: 48px; height: 48px; }
    html.plain .capture-tall { flex-basis: calc((100% - 24px) / 3); }

    /* Tables become one bordered block per row, each cell labeled. */
    html.plain table.misfires,
    html.plain table.lab { border: 0; border-spacing: 0; }
    html.plain table.misfires thead,
    html.plain table.lab thead {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%);
    }
    html.plain table.misfires tbody,
    html.plain table.lab tbody,
    html.plain table.misfires tr,
    html.plain table.lab tr { display: block; }
    html.plain table.misfires tr,
    html.plain table.lab tr { margin: 0 0 8px; border: 1px outset #808080; padding: 2px; }
    html.plain table.misfires tbody th,
    html.plain table.misfires td,
    html.plain table.lab tbody th,
    html.plain table.lab td,
    html.plain table.lab td:last-child { display: block; width: auto; border: 0; padding: 3px 4px; }
    html.plain table.misfires td::before,
    html.plain table.lab td::before {
      content: attr(data-label) ": ";
      font-weight: bold;
    }
  }
}

/* ---------------------------------------------------------------------------------------------
   3. Print: the plain résumé, from either world. Target: three Letter pages or fewer.
   --------------------------------------------------------------------------------------------- */

@media print {
  @page { margin: 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  html { font-size: 10.5pt; }
  body {
    margin: 0;
    font: 10.5pt/1.2 'Times New Roman', Times, serif;
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    mask: none !important;
    -webkit-mask: none !important;
    filter: none !important;
  }
  #doc,
  #main {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
  }
  /* The hero is never hidden on paper, whatever the intro was doing on screen. */
  .hero, .hero * { opacity: 1 !important; visibility: visible !important; transform: none !important; }

  /* Not on paper. */
  #beam-clip, #beam, #fx, #announcer, dialog,
  .bar, .skip, .door, .cue, .sound-hint, .hero-more,
  #contents,
  figure.slot, .slot-labels, .slot-controls, .figure-hit, .fig-controls,
  .proof-block,
  #misfires, #lab,
  .odo, .needs-js, .more, .w-out, .arrow, .skip-sep, .transmit-actions,
  .reveal, #trace .deck, #readouts .deck, .pattern, .sec-games .sec-wide > .links, .transmit-email,
  .chip-x, .egg-x, .ieee-note,
  .sec:not(.hero) .eyebrow,
  .game .line, .game .detail, .game .icon, .app-icon,
  .bi-main .detail, .bi-quote { display: none !important; }

  button { display: none !important; }
  button.ev, button.ro-btn, button.chip, button.egg-themes {
    all: unset;
    display: inline !important;
    font: inherit;
  }
  .print-only { display: block !important; }
  .odo-final {
    position: static !important;
    width: auto !important; height: auto !important; margin: 0 !important;
    overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important;
  }

  a { text-decoration: none; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    word-break: break-all;
  }
  sup { font-size: 7pt; line-height: 0; vertical-align: super; }
  sup a::after { content: none !important; }
  /* Links whose text already is the address do not repeat it. */
  .contact-links li + li a::after,
  #civic .links a::after,
  #bookclub .links a::after,
  #hue .links a[href="https://huecommand.com"]::after,
  .bi-side .links a[href="https://plondex.com"]::after { content: none; }
  code, kbd { font-family: 'Courier New', Courier, monospace; font-size: 9pt; }

  h1, h2, h3 { font-weight: bold; }
  h2 { break-after: avoid; page-break-after: avoid; }
  h1 { font-size: 20pt; line-height: 1.1; margin: 0 0 2pt; }
  h2 { font-size: 12.5pt; margin: 9pt 0 1pt; }
  h3 { font-size: 10.5pt; margin: 5pt 0 1pt; }
  p { margin: 0 0 4pt; orphans: 2; widows: 2; }
  ul, ol { margin: 0 0 4pt; padding-left: 14pt; }
  li { margin: 0; }
  blockquote, figure { margin: 0 0 4pt; }
  li, .lrow, .bench-item, tr { break-inside: avoid; page-break-inside: avoid; }

  /* Hero: name, place, role, email, GitHub first. */
  .hero .eyebrow, .hero .role { margin: 0; }
  .hero .tagline { font-style: italic; margin: 2pt 0; }
  .hero .deck { margin: 0 0 3pt; }
  .hero-email, .hero .print-only { margin: 0; }
  .hero-email .w-plain { display: inline; }

  /* Every readout list is one typeset line. */
  .readouts, .ledger-money { list-style: none; padding: 0; margin: 1pt 0 3pt; }
  .readouts > li, .ledger-money > li { display: inline; }
  .readouts > li + li::before,
  .ledger-money > li + li::before { content: " · "; }
  .ro-v, .lv { font-weight: bold; }
  .readouts-hero { margin-top: 3pt; }

  .sec-head .deck { font-style: italic; margin: 0 0 1pt; }
  .sec-head .lead, .credit { margin: 0 0 2pt; }
  .links, .note { margin: 0 0 2pt; }
  .note small { font-size: 8.5pt; }

  /* Games: one line each, with the App Store address. */
  .games { list-style: none; padding: 0; margin: 2pt 0 3pt; }
  .game { margin: 0 0 1pt; }
  .game h3, .game .genre, .game .link { display: inline; font-size: 10.5pt; margin: 0; }
  .game .genre::before { content: " · "; font-weight: normal; }
  .game .link::before { content: " · "; }
  .game .link a::after { content: none; }
  .game .link a { font-size: 0; }
  .game .link a::before { content: attr(href); font-size: 8.5pt; }
  .game .chip-status { font-size: 8pt; }

  /* Board: the pattern as one inline chain. */
  .flow { list-style: none; padding: 0; margin: 0; }
  .flow > li { display: inline; }
  .flow > li + li::before { content: " → "; }

  /* Bench: name and status, then the one line and its readouts run in. */
  .bench-item { margin: 0 0 3pt; }
  .bi-head h3, .bi-head .bi-status { display: inline; margin: 0; }
  .bi-status .chip { font-family: 'Courier New', Courier, monospace; font-size: 8pt; margin-left: 4pt; }
  .bi-main, .bi-side, .bi-main .one, .bi-side .readouts { display: inline; margin: 0; }
  .bi-side .readouts::before { content: " "; }
  .bi-side .links { display: block; margin: 0; }
  .readouts > li.ro-flip { display: inline-flex; column-gap: .25em; }
  .readouts > li.ro-flip::before { order: -2; }
  .readouts > li.ro-flip .ro-l { order: -1; }

  /* Trace: the milestones print (the figure does not), in two columns. */
  .milestones {
    list-style: none; padding: 0; margin: 2pt 0 0;
    columns: 2; column-gap: 16pt;
    font-size: 9pt; line-height: 1.2;
  }
  .milestones > li { margin: 0 0 1.5pt; }
  .milestones time { font-weight: bold; }
  .milestones .w-plain { display: inline; }

  /* Readouts ledger: value, what it counts, source. */
  .ledger-main { list-style: none; padding: 0; margin: 2pt 0; font-size: 9.5pt; }
  .ledger-main > li { margin: 0 0 1.5pt; }
  .ledger-main .ls { font-size: 8.5pt; }
  .ledger-main .ls::before { content: " · "; }
  .ledger-main .ls .w-plain { display: inline; }
  .rule { font-style: italic; }

  /* Record: in full. */
  .jobs { list-style: none; padding: 0; }
  .job { margin: 0 0 3pt; }
  .job-head { margin: 0; }
  .job-points { margin: 0; }
  .job-note { margin: 0; }
  .caps { padding-left: 16pt; font-size: 9.5pt; }
  .caps > li { margin: 0 0 1.5pt; }
  .cap-ev { font-style: italic; }

  /* Transmit and notes. */
  .transmit-email { font-weight: bold; margin: 0; }
  .transmit-line { margin: 0 0 2pt; }
  .contact-links { list-style: none; padding: 0; }
  .contact-links > li { display: inline; }
  .contact-links > li + li::before { content: " · "; }
  .contact-links .note { display: none; }
  #notes { margin-top: 8pt; }
  #notes h2 { font-size: 10.5pt; }
  .notes { font-size: 8pt; padding-left: 14pt; columns: 2; column-gap: 16pt; }
  .notes > li { margin: 0 0 1pt; }
  #doc > footer { margin-top: 3pt; font-size: 8pt; }
  #doc > footer p { margin: 0; }
}