/* Shared by the Almanac and The Lunatic Times. */
:root {
  --newsprint: #f1ecdf; --ink: #181613; --ink-2: #3d3a34; --red: #c2261c;
  --serif: "EB Garamond", "Iowan Old Style", Garamond, Georgia, serif;
  --news: "Newsreader", "Times New Roman", Times, serif;
  --gothic: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
  --black: "Manufacturing Consent", "Old English Text MT", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 12px; background: var(--ink); color: var(--newsprint); font: 600 13px var(--gothic); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- the consent notice, set like a small notice in the paper ---- */
.notice { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: 14px; z-index: 40; width: min(380px, calc(100vw - 28px));
  background: var(--newsprint); color: var(--ink); border: 3px double var(--ink); padding: 12px 14px 12px; font: 15px/1.32 var(--news);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.notice-k { margin: 0; font: 800 10px var(--gothic); letter-spacing: .14em; text-transform: uppercase; }
.notice h2 { margin: 2px 0 0; font: 800 21px/1.05 var(--news); letter-spacing: -.01em; }
.notice p { margin: 6px 0 0; }
.notice label { display: flex; gap: 8px; align-items: center; margin-top: 9px; font: 600 12px var(--gothic); letter-spacing: .02em; cursor: pointer; }
.notice input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; flex: none; }
.notice-b { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.notice button { font: 800 10.5px var(--gothic); letter-spacing: .13em; text-transform: uppercase; padding: 9px 11px 8px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--newsprint); cursor: pointer; }
.notice button + button { background: transparent; color: var(--ink); }
.notice button:hover { background: var(--red); border-color: var(--red); color: var(--newsprint); }
.notice-f { font: 600 11px var(--gothic); }
.notice a { color: inherit; }

/* ---- redaction: methods are on the far side ---- */
.bar { background: var(--ink); color: transparent; border-radius: 1px; -webkit-user-select: none; user-select: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .1em; }

/* ---- the halftone dissolve between the moon and the paper ---- */
.dissolve { position: fixed; inset: 0; z-index: 60; pointer-events: none; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print { .notice, .skip { display: none !important; } }