/* Proof sheet. Newsprint and ink, with a proofreader's red pencil.
   Colour pulled from the references first (aged newsprint, letterpress ink,
   a Col-Erase carmine pencil), contrast checked after. */
:root {
  --paper: #efe9da;
  --paper-deep: #e4dcc8;
  --ink: #1b1815;
  --ink-soft: #4a433b;
  --rule: #b9ae97;
  --bar: #2c4a6e;          /* press blue: the one data hue */
  --bar-quiet: #6f8196;
  --pencil: #c2301c;       /* reserved for the proofreader */

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body: 'Source Serif 4', Georgia, serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;

  /* Motion by role: a mark being drawn, a bar being set, a stamp landing. */
  --dur-quick: 180ms;
  --dur-set: 620ms;
  --dur-draw: 900ms;
  --ease-set: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-stamp: cubic-bezier(0.34, 1.56, 0.64, 1);

  --measure: 39rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #d9d1bd;
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--body);
  font-optical-sizing: auto;
}

/* The sheet: paper with grain, set off-centre so the left margin is the wide one. */
.sheet {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem) 4rem clamp(1.25rem, 11vw, 9rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .07  0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(178deg, var(--paper) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  box-shadow: 0 1px 0 #fff8 inset, 0 18px 40px -22px #3b2f1d99, 0 2px 6px #3b2f1d33;
}

/* Registration marks at the corners of the sheet. */
.reg { position: absolute; width: 22px; height: 22px; border: 1px solid var(--ink-soft); border-radius: 50%; opacity: .55; }
.reg::before, .reg::after { content: ''; position: absolute; background: var(--ink-soft); }
.reg::before { left: 50%; top: -7px; bottom: -7px; width: 1px; }
.reg::after { top: 50%; left: -7px; right: -7px; height: 1px; }
.reg-tl { top: 18px; left: 18px; } .reg-tr { top: 18px; right: 18px; }
.reg-bl { bottom: 18px; left: 18px; } .reg-br { bottom: 18px; right: 18px; }

/* Masthead */
.mast { position: relative; margin-bottom: 3.5rem; }
.slug { margin: 0 0 1.4rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
h1 {
  margin: 0; max-width: 13ch;
  font: 400 clamp(3rem, 9.4vw, 6.6rem)/.93 var(--display);
  letter-spacing: .005em; text-transform: uppercase;
}
h1 .hl { background: linear-gradient(transparent 62%, #c2301c2e 62% 92%, transparent 92%); }
.deck { max-width: 31rem; margin: 1.6rem 0 0; font-size: 1.3rem; line-height: 1.4; color: var(--ink-soft); }

/* Lede and run facts: dense block beside the open masthead. */
.lede { max-width: var(--measure); margin-bottom: 4rem; }
.dropcap { float: left; margin: .1em .12em 0 0; font: 400 4.4rem/.78 var(--display); }
code { font: 600 .92em/1 ui-monospace, 'SF Mono', Menlo, monospace; background: #1b18150f; padding: .08em .3em; border-radius: 3px; }
.runfacts { display: grid; grid-template-columns: repeat(4, auto); gap: 0 2rem; justify-content: start; margin: 1.8rem 0 0; padding: .9rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.runfacts dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.runfacts dd { margin: .1rem 0 0; font: 400 1.9rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.runfacts dd small { display: block; max-width: 11rem; font: 400 .74rem/1.3 var(--body); color: var(--ink-soft); }

section { margin-bottom: 4.5rem; }
h2 { margin: 0 0 .7rem; max-width: 20ch; font: 400 clamp(1.9rem, 4.4vw, 2.9rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
h3 { margin: 0 0 .5rem; max-width: 30ch; font: 700 1.4rem/1.2 var(--body); }
p { max-width: var(--measure); margin: 0 0 1rem; }
.say { font-size: 1.2rem; color: var(--ink-soft); }
.note { font-size: .92rem; font-style: italic; color: var(--ink-soft); }
.finding { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.finding:first-of-type { margin-top: 1.6rem; }

/* Bars: one hue, thin, direct-labelled. The row that matters is full ink-blue. */
.bars { max-width: 44rem; margin: 1.2rem 0 1rem; display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: minmax(9rem, 15.5rem) 1fr 5.4rem; align-items: center; gap: .9rem; padding: 2px 0; border-radius: 4px; transition: background var(--dur-quick) linear; }
.bar:hover { background: #1b18150d; }
.bar .lab { font-size: .98rem; line-height: 1.25; }
.bar .track { display: block; height: 14px; border-left: 1px solid var(--ink-soft); }
.bar i { display: block; height: 100%; width: calc(var(--v) * 1%); min-width: 3px; background: var(--bar-quiet); border-radius: 0 4px 4px 0; transform: scaleX(0); transform-origin: left; }
.bar.keep i { background: var(--bar); }
.bar.keep .lab { font-weight: 700; }
.bar .val { font: 400 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar .val small { font: 400 .78rem/1 var(--body); color: var(--ink-soft); margin-left: .25rem; }
.bars.in i { transform: scaleX(1); transition: transform var(--dur-set) var(--ease-set); }
.bars.in .bar:nth-child(2) i { transition-delay: 70ms; }
.bars.in .bar:nth-child(3) i { transition-delay: 140ms; }
.bars.in .bar:nth-child(4) i { transition-delay: 210ms; }
.bars.in .bar:nth-child(5) i { transition-delay: 280ms; }
.bars.red i { background: var(--pencil); opacity: .8; }

/* Table */
.tablewrap { overflow-x: auto; margin: 1.4rem 0 1.2rem; }
table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; }
thead th { padding: 0 .9rem .5rem 0; text-align: left; vertical-align: bottom; font: 600 .74rem/1.25 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
tbody th { text-align: left; font-weight: 700; }
tbody th, td { padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num { font: 400 1.2rem/1.3 var(--display); }
tr.thin th, tr.thin td { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.hyp { padding: 1rem 1.2rem; border-left: 4px solid var(--bar); background: #2c4a6e12; }

/* Signature move: the red pencil. Clean type is what the ads say; the pencil is our read. */
.pencil { margin: 0; max-width: 36rem; color: var(--pencil); font: 500 1.55rem/1.22 var(--hand); }
.pencil b { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.open { position: relative; margin: 2rem 0 0 -1.2rem; padding: .9rem 1.1rem 1rem 1.4rem; border-left: 3px solid var(--pencil); border-radius: 2px 14px 12px 3px; background: #c2301c0d; transform: rotate(-.7deg) translateX(-10px); transform-origin: left top; opacity: 0; }
.open.in { transform: rotate(-.7deg) translateX(0); opacity: 1; transition: transform var(--dur-draw) var(--ease-set), opacity var(--dur-set) linear; }

/* The five findings: big numerals, tight text. */
.five { list-style: none; margin: 1.6rem 0 2.4rem; padding: 0; counter-reset: f; max-width: 44rem; }
.five li { position: relative; padding: 1rem 0 1rem 4.2rem; border-top: 1px solid var(--rule); counter-increment: f; }
.five li:last-child { border-bottom: 1px solid var(--rule); }
.five li::before { content: counter(f); position: absolute; left: 0; top: .55rem; font: 400 3.4rem/1 var(--display); color: var(--bar); }
.five strong { display: block; font-size: 1.28rem; line-height: 1.25; margin-bottom: .15rem; }

.gaps li::before { color: var(--pencil); }

/* Part dividers: a heavy band that splits the sheet into its three arguments. */
.part { display: flex; align-items: baseline; gap: 1.1rem; margin: 5.5rem 0 3rem -1.2rem; padding: .7rem 1.2rem .6rem; background: var(--ink); color: var(--paper); transform: rotate(-.4deg); max-width: 46rem; }
.part span { font: 600 .78rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.part strong { font: 400 clamp(1.5rem, 3.6vw, 2.2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }

/* The questions borrowers type, set as slips. */
.qs { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem .7rem; margin: 1.3rem 0 1.5rem; padding: 0; max-width: 46rem; }
.qs li { padding: .5rem .9rem .55rem; background: #fbf8ef; border: 1px solid var(--rule); border-radius: 999px; box-shadow: 2px 3px 0 #1b181512; font-weight: 600; font-size: 1.02rem; }
.qs li:nth-child(odd) { transform: rotate(-.5deg); } .qs li:nth-child(3n) { transform: rotate(.6deg); }

.runfacts.wide { grid-template-columns: repeat(2, minmax(0, 20rem)); gap: 1.4rem 2.4rem; }
.runfacts.wide dd small { max-width: 17rem; font-size: .86rem; margin-top: .25rem; }

/* Category sections */
.cat { padding-top: 2.2rem; border-top: 6px solid var(--ink); }
.cat h2 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); }
.cat h3 { margin-top: 2.1rem; }

/* A clipped ad: the advertiser's own words, set like a cutting pasted to the sheet. */
.clip { position: relative; max-width: 34rem; margin: 1.1rem 0 1.5rem 1.2rem; padding: 1rem 1.2rem .9rem; background: #fbf8ef; border: 1px solid var(--rule); box-shadow: 3px 4px 0 #1b181514, 0 10px 22px -14px #3b2f1d80; transform: rotate(.5deg); }
.clip:nth-of-type(even) { transform: rotate(-.6deg); margin-left: 2.4rem; }
.clip p { margin: 0 0 .5rem; font-size: 1.12rem; line-height: 1.42; font-weight: 600; }
.clip cite { font: 400 .8rem/1.3 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

.angles { max-width: var(--measure); margin: .6rem 0 0; padding-left: 1.15rem; }
.angles li { margin-bottom: .75rem; padding-left: .2rem; }
.angles li::marker { color: var(--bar); }

/* Coupon: the clip-out box every mail-order ad ended on. */
.coupon { max-width: 44rem; padding: 1.6rem 1.7rem 1.1rem; border: 2px dashed var(--ink); background: #fffdf655; transform: rotate(-.35deg); opacity: .0; translate: 0 14px; }
.coupon.in { opacity: 1; translate: 0 0; transition: opacity var(--dur-set) linear, translate var(--dur-set) var(--ease-set); }
.coupon ol, .coupon ul { margin: 1rem 0 0; padding-left: 1.3rem; }
.coupon li { margin-bottom: .7rem; padding-left: .3rem; max-width: 36rem; }
.coupon li::marker { font-family: var(--display); }

footer { max-width: 44rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
footer p { font-size: .84rem; line-height: 1.5; color: var(--ink-soft); max-width: none; }

@media (max-width: 720px) {
  body { font-size: 1.05rem; }
  .open { margin-left: 0; }
  .part { margin-left: 0; flex-direction: column; gap: .35rem; }
  .runfacts.wide { grid-template-columns: 1fr; }
  .clip, .clip:nth-of-type(even) { margin-left: 0; }
  .five li { padding-left: 3.1rem; } .five li::before { font-size: 2.6rem; }
  .runfacts { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
  .bar { grid-template-columns: 1fr 6.4rem; gap: .2rem .6rem; }
  .bar .lab { grid-column: 1 / -1; }
  .reg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bar i, .bars.in i { transform: none; transition: none; }
  .open, .open.in { opacity: 1; transform: rotate(-.7deg); transition: none; }
  .coupon, .coupon.in { opacity: 1; translate: 0 0; transition: none; }
}

@media print {
  body { background: none; } .sheet { box-shadow: none; }
  .bar i { transform: none; } .open { opacity: 1; } .coupon { opacity: 1; translate: 0 0; }
}