@font-face { font-family: Bonum; src: url(fonts/bonum-regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: Bonum; src: url(fonts/bonum-bold.woff) format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: Bonum; src: url(fonts/bonum-italic.woff) format('woff'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --pad: #e7f0e1;
  --sheet: #f5faf1;
  --rule: #c3d7b9;
  --ink: #12304a;
  --graphite: #4d5b62;
  --pencil: #bd102b;
  --line: 28px;
}

* { box-sizing: border-box; }
html { background: var(--pad); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 17px/var(--line) Bonum, 'Bookman Old Style', Georgia, serif;
  font-variant-numeric: lining-nums;
  background-color: var(--pad);
  background-image:
    linear-gradient(to right, transparent 0, transparent calc(var(--margin) - 4px), var(--pencil) calc(var(--margin) - 4px), var(--pencil) calc(var(--margin) - 3px), transparent calc(var(--margin) - 3px), transparent calc(var(--margin) - 1px), var(--pencil) calc(var(--margin) - 1px), var(--pencil) var(--margin), transparent var(--margin)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line));
  --margin: max(16px, calc(50vw - 560px));
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--pencil); }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px 0 28px; }
.prose { max-width: 680px; }

.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: var(--line); padding-bottom: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; text-decoration: none; }
.brand .tick { width: 24px; height: 20px; }
.top nav { display: flex; gap: 20px; font-size: 15px; }

h1, h2, h3 { font-weight: 700; margin: 0; }
h1 { font-size: clamp(38px, 6.2vw, 68px); line-height: 1.04; letter-spacing: -0.012em; max-width: 15em; margin-bottom: var(--line); }
h2 { font-size: 30px; line-height: calc(var(--line) * 1.5); margin-bottom: calc(var(--line) / 2); }
h3 { font-size: 19px; line-height: var(--line); }
p { margin: 0 0 var(--line); }
.lede { font-size: 21px; line-height: 32px; max-width: 34em; margin-bottom: calc(var(--line) * 1.5); }
.quiet { color: var(--graphite); }

.tick { width: 30px; height: 24px; flex: none; overflow: visible; }
.tick path { fill: none; stroke: var(--pencil); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }

/* The working sheet */
.tool { background: var(--sheet); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--rule); margin-bottom: calc(var(--line) * 2); }
.drops { display: grid; grid-template-columns: 1fr 1fr; }
.drop { position: relative; padding: 20px; min-height: 196px; border-bottom: 1px solid var(--ink); }
.drop + .drop { border-left: 1px solid var(--ink); }
.drop h2 { font-size: 21px; line-height: var(--line); margin: 0; }
.drop p { margin: 0 0 12px; color: var(--graphite); font-size: 15px; line-height: 22px; }
.drop.over { background: #fff; box-shadow: inset 0 0 0 3px var(--pencil); }
.pick { display: inline-block; cursor: pointer; padding: 9px 16px; border: 1px solid var(--ink); background: #fff; font: inherit; font-size: 16px; line-height: 22px; color: var(--ink); }
.pick:hover { background: var(--ink); color: #fff; }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop input[type=file]:focus-visible + .pick { outline: 2px solid var(--pencil); outline-offset: 2px; }

.files { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; line-height: 21px; }
.file { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 6px 0; border-top: 1px dashed var(--rule); }
.file-name { font-weight: 700; overflow-wrap: anywhere; }
.file .link { grid-column: 2; grid-row: 1; }
.file-note { grid-column: 1 / -1; color: var(--graphite); }
.file-proven .file-note { color: #1c5b34; }
.file-partial .file-note, .file-scanned .file-note, .file-unreadable .file-note, .file-error .file-note, .file-password .file-note, .file-unverified .file-note { color: var(--pencil); }
.file-warn { grid-column: 1 / -1; margin: 4px 0 0; color: var(--pencil); font-size: 14px; line-height: 20px; }
.file-note-plain { grid-column: 1 / -1; margin: 2px 0 0; color: var(--graphite); font-size: 14px; line-height: 20px; }
.pw { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
.pw input { flex: 1; min-width: 0; }
.mapper { margin-top: 8px; display: grid; gap: 6px; }
.mapper p { margin: 0; }
.mapper label { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
input[type=password], select { font: inherit; font-size: 15px; padding: 5px 6px; border: 1px solid var(--ink); background: #fff; color: var(--ink); max-width: 100%; }

button { font: inherit; color: inherit; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; color: var(--graphite); }
.link:hover { color: var(--pencil); }
.small { padding: 4px 12px; border: 1px solid var(--ink); background: #fff; cursor: pointer; font-size: 15px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 16px 20px; }
.actions label { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; }
.go { padding: 11px 22px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; font-weight: 700; font-size: 17px; line-height: 24px; }
.go:hover:not(:disabled) { background: var(--pencil); border-color: var(--pencil); }
.go:disabled { background: #dfe6da; color: #5b6863; border-color: #9fb1a0; cursor: not-allowed; }
.sample { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 16px; }
.sample:hover { color: var(--pencil); }
.push { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.status { padding: 0 20px; margin: 0; font-size: 15px; line-height: 22px; color: var(--graphite); }
.status:empty { display: none; }
.status + .status { color: var(--pencil); }
.status:last-of-type { padding-bottom: 12px; }
.notes { margin: 0; padding: 0 20px 12px 38px; color: var(--pencil); font-size: 15px; line-height: 22px; }
.notes:empty { display: none; }

.convert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 20px; border-top: 1px solid var(--ink); font-size: 15px; }
.convert p { margin: 0 auto 0 0; }
.convert[hidden] { display: none; }

/* Results read like a reconciliation sheet */
.results { padding: 20px; border-top: 1px solid var(--ink); outline: none; }
.results[hidden] { display: none; }
.results > h2 { font-size: 26px; line-height: 36px; margin-bottom: 12px; }
.sum { width: 100%; max-width: 720px; border-collapse: collapse; margin-bottom: 16px; font-size: 16px; }
.sum th, .sum td { padding: 5px 0; border-bottom: 1px solid var(--rule); font-weight: 400; text-align: left; line-height: 22px; }
.sum th { display: flex; align-items: center; gap: 8px; }
.sum td.num { padding-left: 16px; }
.sum .sum-open th a { font-weight: 700; }
.sum .sum-open td:nth-child(2) { color: var(--pencil); font-weight: 700; }
.num { text-align: right; white-space: nowrap; font-feature-settings: 'tnum' 1, 'lnum' 1; }
th.num { text-align: right; }

.sec { margin-top: 24px; }
.sec h3, .sec summary { font-weight: 700; font-size: 18px; line-height: 26px; }
.sec summary { cursor: pointer; }
.sec-help { margin: 0 0 8px; font-size: 15px; line-height: 22px; color: var(--graphite); }
.scroll { overflow-x: auto; }
.sec table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 21px; }
.sec th { text-align: left; padding: 4px 8px 4px 0; border-bottom: 2px solid var(--ink); }
.sec th.num { text-align: right; }
.sec td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sec td.num { padding-right: 0; padding-left: 12px; }
.sec td:first-child { white-space: nowrap; }
.hint { color: var(--pencil); font-style: italic; }
.download { margin-top: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .results:not([hidden]) .sum-ok .tick path { animation: draw 600ms ease-out both 150ms; }
}
@keyframes draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }

/* Reading sections sit straight on the ruled paper */
.band { margin-bottom: calc(var(--line) * 2); }
.steps { margin: 0; padding: 0 0 0 26px; max-width: 680px; }
.steps li { margin-bottom: calc(var(--line) / 2); }
.catches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 900px; margin: 0; }
.catches dt { font-weight: 700; }
.catches dd { margin: 0 0 var(--line); }
.faq dt { font-weight: 700; }
.faq dd { margin: 0 0 var(--line); max-width: 680px; }
.price { border-collapse: collapse; max-width: 680px; width: 100%; background: var(--sheet); border: 1px solid var(--ink); }
.price th, .price td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); line-height: 24px; }
.price td:first-child, .price th:first-child { font-weight: 700; white-space: nowrap; }

.foot { padding-top: var(--line); padding-bottom: calc(var(--line) * 2); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.article h1 { font-size: clamp(32px, 5vw, 48px); }
.article h2 { font-size: 24px; line-height: 42px; margin-top: var(--line); margin-bottom: 0; }
.article ol, .article ul { padding-left: 26px; margin: 0 0 var(--line); }
.article .cta { display: inline-block; padding: 9px 18px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; margin-bottom: var(--line); }
.article .cta:hover { background: var(--pencil); color: #fff; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .drops { grid-template-columns: 1fr; }
  .drop + .drop { border-left: 0; }
  .drop { min-height: 0; }
  .push { margin-left: 0; }
  .catches { grid-template-columns: 1fr; }
  .wrap { padding: 0 16px 0 24px; }
  .top nav { gap: 12px; font-size: 14px; white-space: nowrap; }
  .top { padding-top: 14px; padding-bottom: 14px; }
  .tool { box-shadow: 3px 3px 0 var(--rule); }
  .price td:first-child { white-space: normal; }
}