/* Burn After Reading: a typed dossier on a desk, stamped once it's read.
   The CSP forbids inline styles, so everything visual lives in this file. */

@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/courier-prime-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/courier-prime-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-style: italic; font-display: swap; src: url("../fonts/courier-prime-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Stencil"; font-weight: 700; font-display: swap; src: url("../fonts/big-shoulders-stencil-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Stencil"; font-weight: 900; font-display: swap; src: url("../fonts/big-shoulders-stencil-display-latin-900-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --desk: #d6cfbf;
  --desk-deep: #bfb5a0;
  --lamp: rgba(255, 253, 244, .6);
  --paper: #fbf8f0;
  --paper-shade: #f2ecdf;
  --folder: #d9bc80;
  --folder-edge: #c09d59;
  --folder-ink: rgba(66, 45, 10, .72);
  --ink: #1d1a15;
  --ink-2: #544d3d;
  --ink-3: #857d6b;
  --rule: #e4dbc9;
  --rule-strong: #cdc1a7;
  --stamp: #c3261f;
  --on-stamp: #fff8ec;
  --ember: #f2661b;
  --ember-glow: rgba(242, 102, 27, .45);
  --char: #2a1a0e;
  --link: #1f45a0;
  --redact: #1a1814;
  --clip: #7b818a;
  --focus: #1f45a0;
  --shadow-paper: 0 1px 1px rgba(60, 45, 20, .08), 0 14px 26px -14px rgba(60, 45, 20, .35), 0 44px 70px -44px rgba(60, 45, 20, .5);
  --shadow-folder: 0 24px 44px -26px rgba(60, 45, 20, .55);
  --blend: multiply;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 0 0 0 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --x-mark:
    linear-gradient(45deg, transparent calc(50% - 1.3px), var(--stamp) calc(50% - 1.3px) calc(50% + 1.3px), transparent calc(50% + 1.3px)),
    linear-gradient(-45deg, transparent calc(50% - 1.3px), var(--stamp) calc(50% - 1.3px) calc(50% + 1.3px), transparent calc(50% + 1.3px));

  --font-type: "Courier Prime", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --font-stencil: "Big Shoulders Stencil", "Arial Narrow", Impact, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --desk: #13110f;
    --desk-deep: #080706;
    --lamp: rgba(255, 164, 84, .11);
    --paper: #1e1c18;
    --paper-shade: #25221d;
    --folder: #4b3c22;
    --folder-edge: #362b18;
    --folder-ink: rgba(255, 228, 184, .6);
    --ink: #ede5d4;
    --ink-2: #b6ac95;
    --ink-3: #847b67;
    --rule: #312d26;
    --rule-strong: #463f34;
    --stamp: #ff5343;
    --on-stamp: #1b0f0c;
    --ember: #ff8a3d;
    --ember-glow: rgba(255, 138, 61, .5);
    --char: #050302;
    --link: #a3bcff;
    --redact: #040404;
    --clip: #6d737b;
    --focus: #ffb070;
    --shadow-paper: 0 0 0 1px rgba(255, 255, 255, .035), 0 34px 70px -24px rgba(0, 0, 0, .9);
    --shadow-folder: 0 34px 70px -34px rgba(0, 0, 0, .95);
    --blend: screen;
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--desk);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-type);
  -webkit-font-smoothing: antialiased;
}

/* Lamp light, shadowed edges and grain, pinned to the viewport so the
   lighting never tiles or seams as the page scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 60% at 50% -8%, var(--lamp), transparent 62%),
    radial-gradient(140% 90% at 50% 125%, var(--desk-deep), transparent 70%),
    var(--noise);
}

::selection { background: var(--stamp); color: var(--on-stamp); }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }

code {
  font-family: var(--font-type);
  font-size: .92em;
  padding: .05em .35em;
  background: var(--rule);
  border-radius: 2px;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- masthead & colophon ---------- */

.masthead, .desk, .colophon {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(22px, env(safe-area-inset-top)) 0 6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; color: var(--stamp); flex: none; }
.brand-name {
  font: 900 1.5rem/1 var(--font-stencil);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.brand:hover .brand-mark { animation: flicker 0.9s ease-in-out infinite alternate; }

.masthead-note {
  margin: 0;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.colophon {
  padding: 4px 0 40px;
  font-size: .8rem;
  color: var(--ink-3);
}
.colophon p { margin: 14px 0 0; letter-spacing: .06em; }
.how summary {
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: "+ "; }
.how[open] summary::before { content: "\2212  "; }
.how summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.how ol { display: grid; gap: 6px; max-width: 72ch; margin: 12px 0 0; padding-left: 1.5em; }

/* ---------- the dossier ---------- */

.desk { flex: 1; padding: 30px 0 34px; }

.dossier { position: relative; padding-top: 34px; }

.folder {
  position: absolute;
  inset: 34px -12px -14px 12px;
  border-radius: 4px 12px 12px 12px;
  background: linear-gradient(172deg, var(--folder), var(--folder-edge));
  box-shadow: var(--shadow-folder);
  transform: rotate(1.3deg);
  transform-origin: 20% 0;
}

.folder-tab {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  display: flex;
  align-items: center;
  height: 34px;
  min-width: 200px;
  padding: 0 22px;
  border-radius: 10px 14px 0 0;
  background: var(--folder);
  color: var(--folder-ink);
  font: 700 .7rem/1 var(--font-type);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.paper {
  position: relative;
  min-height: 440px;
  padding: clamp(26px, 5.5vw, 58px) clamp(20px, 6.5vw, 66px) clamp(30px, 6vw, 58px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--paper), var(--paper-shade));
  box-shadow: var(--shadow-paper);
}

/* Clipped just right of the folder tab, leaving the corner for the stamp. */
.clip {
  position: absolute;
  top: -30px;
  left: clamp(176px, 34%, 290px);
  width: 22px;
  height: 60px;
  fill: none;
  stroke: var(--clip);
  stroke-width: 2.4;
  stroke-linecap: round;
  transform: rotate(6deg);
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .25));
}

.paper-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: clamp(24px, 4.5vw, 40px);
  padding-bottom: 10px;
  border-bottom: 3px double var(--rule-strong);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.classification { font-weight: 700; color: var(--stamp); }
.file-no span { color: var(--ink-2); letter-spacing: .08em; text-transform: none; }

/* ---------- typography ---------- */

.headline {
  margin: 0 0 16px;
  font: 900 clamp(2.5rem, 8.2vw, 4.5rem)/.9 var(--font-stencil);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.accent { color: var(--stamp); }

.lede {
  max-width: 56ch;
  margin: 0 0 30px;
  font-size: 1.02rem;
  color: var(--ink-2);
}
.lede strong { color: var(--ink); }

.label {
  display: block;
  padding: 0;
  font: 700 .74rem/1.2 var(--font-type);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.muted { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-3); }

.fineprint { max-width: 62ch; margin: 24px 0 0; font-size: .8rem; color: var(--ink-3); }

.alert {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid var(--stamp);
  background: color-mix(in srgb, var(--stamp) 9%, transparent);
  font-size: .92rem;
}

.notice {
  margin: 0;
  padding: 12px 14px;
  border: 1.5px dashed var(--rule-strong);
  font-size: .9rem;
  color: var(--ink-2);
}
.notice strong { color: var(--ink); }

kbd {
  padding: 1px 5px;
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  font: 700 .68rem var(--font-type);
  color: var(--ink-2);
}

/* ---------- form ---------- */

.form { display: grid; gap: 28px; }

.field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field { display: block; }
fieldset.field > legend { margin-bottom: 10px; }

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.sheet {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-type);
  overflow-wrap: anywhere;
}

/* Typed onto ruled paper; the lines scroll with the text. */
.ruled {
  min-height: calc(9 * 1.6em + 31px);
  resize: vertical;
  background-color: transparent;
  background-image: linear-gradient(to bottom, transparent calc(1.6em - 1px), var(--rule) calc(1.6em - 1px));
  background-size: 100% 1.6em;
  background-origin: content-box;
  background-attachment: local;
  caret-color: var(--stamp);
}
.ruled::placeholder { color: var(--ink-3); opacity: 1; }
.ruled.dropping {
  border-style: dashed;
  border-color: var(--stamp);
  background-color: color-mix(in srgb, var(--stamp) 6%, transparent);
}

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tool-btn {
  padding: 5px 10px;
  border: 1.5px dashed var(--ink-3);
  border-radius: 2px;
  color: var(--ink-2);
  font: 700 .66rem/1 var(--font-type);
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.tool-btn:hover { border-style: solid; border-color: var(--ink); color: var(--ink); }
.file-input:focus-visible + .tool-btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.field-note { margin: 0; font-size: .8rem; color: var(--ink-3); }
.sheet:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }

.readout {
  min-height: 5em;
  background: color-mix(in srgb, var(--paper-shade) 65%, transparent);
}
.raw, .plain {
  margin: 0;
  font: 400 1rem/1.6 var(--font-type);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.empty { margin: 0; color: var(--ink-3); font-style: italic; }

.input {
  width: 100%;
  min-width: 0;
  padding: 12px 2px 10px;
  border: 0;
  border-bottom: 2px solid var(--ink-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1rem/1.3 var(--font-type);
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:focus { outline: none; border-bottom-color: var(--stamp); background: color-mix(in srgb, var(--paper-shade) 80%, transparent); }

.pass { position: relative; }
.pass .input { padding-right: 74px; }
.pass-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 700 .68rem/1 var(--font-type);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.pass-toggle:hover { color: var(--ink); }
.pass-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Checkbox and radio choices, marked with a red X like a paper form. */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.check input, .choice input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.box {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 1px;
}
.check input:checked + .box { background-image: var(--x-mark); }
.check input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 11px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 2px;
  font-size: .92rem;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.choice span::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink-3);
}
.choice span:hover { border-color: var(--ink-2); }
.choice input:checked + span { border-color: var(--ink); background: var(--paper-shade); font-weight: 700; }
.choice input:checked + span::before { border-color: var(--ink); background-image: var(--x-mark); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Segmented toggles (Write / Preview, Formatted / Raw). */
.seg { display: inline-flex; border: 1.5px solid var(--ink-2); border-radius: 2px; }
.seg-btn {
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 700 .66rem/1 var(--font-type);
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1.5px solid var(--ink-2); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The size meter is a fuse: it burns down as the message grows. */
.meter { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.fuse {
  --left: calc((1 - var(--used, 0)) * 100%);
  position: relative;
  flex: none;
  width: 130px;
  height: 3px;
  background:
    linear-gradient(90deg, var(--ink-2) var(--left), transparent var(--left)),
    repeating-linear-gradient(90deg, var(--rule-strong) 0 2px, transparent 2px 6px);
}
.fuse::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--left);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c4 0 22%, var(--ember) 48%, transparent 72%);
  box-shadow: 0 0 10px 3px var(--ember-glow);
  animation: flicker .9s ease-in-out infinite alternate;
}
.fuse:not(.lit)::after { display: none; }
.fuse.over::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: radial-gradient(circle, #fff6c4 0 20%, var(--stamp) 50%, transparent 72%); }
.counter { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.counter.over { color: var(--stamp); font-weight: 700; }

.turnstile { min-height: 65px; }

.actions, .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.toolbar { margin-top: 22px; }
.hint { font-size: .74rem; color: var(--ink-3); }
@media (hover: none) { .hint { display: none; } }

/* ---------- buttons ---------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-edge: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--btn-edge);
  border-radius: 2px;
  background: var(--btn-bg);
  box-shadow: 4px 4px 0 var(--btn-edge);
  color: var(--btn-fg);
  font: 700 .8rem/1 var(--font-type);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-edge); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--btn-edge); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: 2px 2px 0 var(--btn-edge); }
.btn[aria-busy="true"] { cursor: progress; opacity: .8; }
.btn-primary { --btn-bg: var(--stamp); --btn-fg: var(--on-stamp); }
.btn-danger { --btn-fg: var(--stamp); --btn-edge: var(--stamp); }
.btn-danger[data-armed] { --btn-bg: var(--stamp); --btn-fg: var(--on-stamp); animation: alarm .5s ease-in-out infinite alternate; }
.btn-ghost {
  min-height: 40px;
  padding: 0 6px;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.btn-ghost:hover, .btn-ghost:active { transform: none; box-shadow: none; color: var(--stamp); }

/* ---------- result ---------- */

.linkbox { display: grid; gap: 10px; }
.linkbox-row { display: flex; gap: 14px; }
.link-input {
  flex: 1;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: var(--paper-shade);
  font-size: .92rem;
  text-overflow: ellipsis;
}
.link-input:focus { border-bottom-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
#result-pass { margin-top: 22px; }

.qr { display: grid; justify-items: start; gap: 10px; margin: 24px 0 0; }
.qr-code svg { display: block; width: 208px; height: 208px; padding: 12px; border: 2px solid var(--ink); background: #fff; }
.qr figcaption { max-width: 42ch; font-size: .8rem; color: var(--ink-3); }

/* ---------- reading ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 28px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.facts > div { padding: 12px 14px; }
.facts > div + div { border-left: 1px dashed var(--rule-strong); }
.facts dt { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font-weight: 700; font-size: 1.05rem; }

/* Blacked-out lines standing in for the message until it's revealed. */
.redacted { display: grid; gap: 12px; margin: 0 0 30px; }
.redacted i {
  display: block;
  width: var(--w);
  height: 15px;
  background: var(--redact);
  clip-path: polygon(0 10%, 100% 0, 99.4% 100%, .4% 88%);
  transform-origin: right center;
}
.redacted i:nth-child(1) { --w: 92%; }
.redacted i:nth-child(2) { --w: 76%; }
.redacted i:nth-child(3) { --w: 97%; }
.redacted i:nth-child(4) { --w: 61%; }
.redacted i:nth-child(5) { --w: 88%; }
.redacted i:nth-child(6) { --w: 34%; }

.opened { display: grid; gap: 14px; }
.opened .toolbar { margin-top: 8px; }

/* Rendered Markdown. */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 0 0 1em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin: 1.3em 0 .45em;
  font-family: var(--font-stencil);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.32rem; }
.prose h4, .prose h5, .prose h6 { font-size: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: .25em; }
.prose li:has(> input[type="checkbox"]) { list-style: none; }
.prose li > input[type="checkbox"] { margin: 0 .5em 0 0; accent-color: var(--stamp); }
.prose blockquote { margin-left: 0; padding-left: 16px; border-left: 4px solid var(--stamp); color: var(--ink-2); }
/* Code blocks only; a plain-text message is a pre.plain and stays typed on paper. */
.prose pre:not(.plain) { overflow-x: auto; padding: 14px 16px; border-radius: 2px; background: var(--ink); color: var(--paper); }
.prose pre code { padding: 0; background: none; color: inherit; font-size: .92em; }
.prose hr { margin: 1.6em 0; border: 0; border-top: 2px dashed var(--rule-strong); }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: 6px 12px; border: 1px solid var(--rule-strong); text-align: left; }
.prose th { background: var(--paper-shade); }
/* Pictures sit on white like prints clipped into the file, which also keeps
   transparent PNGs such as QR codes readable (and scannable) in dark mode. */
.prose img, .plain img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .5em 0;
  padding: 8px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .5);
}
.prose del { color: var(--ink-3); }
.prose .img-link::before { content: "[image] "; font-size: .85em; color: var(--ink-3); }

/* ---------- gone ---------- */

/* A hole burned clean through the page. */
.burn-hole {
  position: relative;
  width: min(230px, 62%);
  aspect-ratio: 1.2;
  margin: 0 0 28px;
  border-radius: 46% 54% 41% 59% / 57% 43% 57% 43%;
  background: radial-gradient(closest-side, var(--desk) 55%, var(--char) 64%, #6f2c0b 71%, color-mix(in srgb, var(--ember) 75%, transparent) 76%, rgba(130, 70, 25, .22) 86%, transparent);
  animation: smolder 2.8s ease-in-out infinite alternate;
}
.burn-hole::after {
  content: "";
  position: absolute;
  inset: 16% 10% 12% 18%;
  border-radius: 60% 40% 52% 48% / 42% 58% 42% 58%;
  background: radial-gradient(closest-side, var(--desk) 70%, transparent 78%);
  transform: rotate(24deg);
}

/* ---------- the stamp ---------- */

.stamp {
  position: absolute;
  z-index: 3;
  top: clamp(12px, 3vw, 24px);
  right: clamp(12px, 5vw, 48px);
  padding: .16em .45em .06em;
  border: .09em solid currentColor;
  border-radius: .08em;
  outline: .035em solid currentColor;
  outline-offset: -.19em;
  color: var(--stamp);
  font: 900 clamp(1.9rem, 6.6vw, 3.2rem)/1 var(--font-stencil);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .88;
  mix-blend-mode: var(--blend);
  pointer-events: none;
  user-select: none;
  transform: rotate(-9deg);
  -webkit-mask-image: var(--grunge);
  mask-image: var(--grunge);
  -webkit-mask-size: 240px;
  mask-size: 240px;
}

/* ---------- motion ---------- */

@keyframes flicker {
  from { transform: scale(.85); filter: brightness(.9); }
  to { transform: scale(1.15); filter: brightness(1.25); }
}
@keyframes alarm { to { box-shadow: 4px 4px 0 var(--btn-edge), 0 0 18px var(--ember-glow); } }
@keyframes smolder {
  from { filter: drop-shadow(0 0 2px var(--ember-glow)); }
  to { filter: drop-shadow(0 0 12px var(--ember-glow)); }
}

@media (prefers-reduced-motion: no-preference) {
  .dossier { animation: arrive .75s cubic-bezier(.2, .8, .2, 1) both; }
  .screen:not([hidden]) > *, .opened > * { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; }
  .screen:not([hidden]) > :nth-child(2), .opened > :nth-child(2) { animation-delay: .05s; }
  .screen:not([hidden]) > :nth-child(3), .opened > :nth-child(3) { animation-delay: .1s; }
  .screen:not([hidden]) > :nth-child(4), .opened > :nth-child(4) { animation-delay: .15s; }
  .screen:not([hidden]) > :nth-child(n+5), .opened > :nth-child(n+5) { animation-delay: .2s; }
  .sealed > * { animation: none; }

  .stamp.slam { animation: slam .5s cubic-bezier(.2, .7, .3, 1.25) both; }
  .paper.jolt { animation: jolt .3s .27s ease-out; }

  .lifting .redacted i { animation: unredact .42s cubic-bezier(.6, 0, .9, .4) forwards; }
  .lifting .redacted i:nth-child(2) { animation-delay: .05s; }
  .lifting .redacted i:nth-child(3) { animation-delay: .1s; }
  .lifting .redacted i:nth-child(4) { animation-delay: .15s; }
  .lifting .redacted i:nth-child(5) { animation-delay: .2s; }
  .lifting .redacted i:nth-child(6) { animation-delay: .25s; }
  .lifting > :not(.redacted) { transition: opacity .3s; opacity: .25; }
  .opened { animation: develop .6s ease-out both; }
}

@keyframes arrive { from { opacity: 0; transform: translateY(22px) rotate(-.5deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes slam {
  0% { opacity: 0; transform: rotate(-9deg) scale(2.3); }
  60% { opacity: .95; transform: rotate(-9deg) scale(.95); }
  100% { opacity: .88; transform: rotate(-9deg) scale(1); }
}
@keyframes jolt {
  30% { transform: translate(1px, 2px); }
  65% { transform: translate(-1px, -1px); }
}
@keyframes unredact { to { transform: scaleX(0); opacity: 0; } }
@keyframes develop { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .masthead-note { display: none; }
  .brand-name { font-size: 1.3rem; }
  .desk { padding-top: 18px; }
  .folder { inset: 34px -6px -8px 6px; transform: rotate(.9deg); }
  .folder-tab { min-width: 150px; padding: 0 16px; font-size: .64rem; }
  .linkbox-row { flex-direction: column; }
  .meter { margin-left: 0; }
  .hint { display: none; }
  .stamp { top: 42px; }
}

@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { border-left: 0; border-top: 1px dashed var(--rule-strong); }
  .actions .btn, .toolbar .btn:not(.btn-ghost) { flex: 1 1 auto; }
}