/* Department of Cool Shit: deadpan government letterhead. Manila folders, rubber stamps, Public Sans. */

:root {
  --paper: #f3eee2;
  --paper-2: #e9e2d1;
  --folder: #e8dcbd;
  --ink: #1b1a16;
  --muted: #655f53;
  --rule: #c9bea4;
  --stamp: #b4301c;
  --link: #23467a;
  --strip-bg: #1b1a16;
  --strip-ink: #efe8d6;
  --photo-bg: #fffdf7;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15140f; --paper-2: #1d1b15; --folder: #25221a; --ink: #ece5d3; --muted: #a39b89;
    --rule: #3b362a; --stamp: #e2654f; --link: #93b5e8; --strip-bg: #0a0907; --strip-ink: #d9d1bd;
    --photo-bg: #2e2a21; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15140f; --paper-2: #1d1b15; --folder: #25221a; --ink: #ece5d3; --muted: #a39b89;
  --rule: #3b362a; --stamp: #e2654f; --link: #93b5e8; --strip-bg: #0a0907; --strip-ink: #d9d1bd;
  --photo-bg: #2e2a21; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; height: auto; }

.wrap { max-width: 60rem; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 640px) { .wrap { padding-inline: 28px; } }

.eyebrow { font: 600 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stamp); margin: 0 0 10px; }

/* "Official website" strip */
.gov { background: var(--strip-bg); color: var(--strip-ink); font: 500 12px/1.4 var(--font-mono); letter-spacing: .03em; }
.gov .wrap { display: flex; align-items: center; gap: 10px; padding-block: 7px; }
.gov svg { width: 18px; height: 18px; flex: none; }

.preview-bar { background: var(--stamp); color: #fff; text-align: center; padding: 6px 16px; font: 700 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* Home masthead */
.mast { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; padding-block: 52px 40px; border-bottom: 3px double var(--rule); }
.seal { width: 136px; height: 136px; color: var(--ink); display: block; }
.mast h1 { font: 900 clamp(2.5rem, 8vw, 4.75rem)/.95 var(--font-sans); letter-spacing: -.025em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.mission { font-size: 1.15rem; max-width: 34rem; margin: 16px 0 0; }
@media (max-width: 600px) {
  .mast { grid-template-columns: 1fr; gap: 20px; padding-block: 32px 28px; }
  .seal { width: 96px; height: 96px; }
}

/* Inner-page masthead */
.mini-mast { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-bottom: 3px double var(--rule); }
.mini-mast .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 900 15px/1.05 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; }
.seal-sm { width: 46px; height: 46px; display: block; flex: none; }
.mini-mast .back { font: 500 13px/1 var(--font-mono); color: var(--muted); }

/* Case files */
.ledger { padding-block: 40px 24px; }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.ledger-head h2 { font: 800 1rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.ledger-head span { font: 13px/1 var(--font-mono); color: var(--muted); }
.empty { color: var(--muted); font-family: var(--font-mono); }
.files { list-style: none; margin: 0; padding: 52px 0 0; display: grid; gap: 56px; }

.folder { position: relative; background: var(--folder); border: 1px solid var(--rule); border-radius: 0 10px 10px 10px;
  padding: 28px 26px 26px; display: grid; gap: 22px; box-shadow: 0 1px 0 var(--rule), 0 10px 24px -18px rgb(0 0 0 / .45); }
.folder.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); align-items: start; }
.folder .tab { position: absolute; left: -1px; top: -31px; height: 31px; padding: 0 16px; display: flex; align-items: center;
  background: var(--folder); border: 1px solid var(--rule); border-bottom: 0; border-radius: 9px 9px 0 0;
  font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folder-text { display: grid; gap: 8px; align-content: start; min-width: 0; }
.meta { font: 13px/1.4 var(--font-mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.meta .kicker { color: var(--stamp); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.folder h3 { font: 800 clamp(1.6rem, 4.4vw, 2.3rem)/1.05 var(--font-sans); letter-spacing: -.015em; margin: 2px 0 4px; text-wrap: balance; }
.folder h3 a { color: inherit; text-decoration: none; }
.folder h3 a::after { content: ""; position: absolute; inset: -32px 0 0 0; border-radius: inherit; }
.folder:hover h3 a, .folder h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.folder h3 a:focus-visible { outline: none; }
.folder:has(h3 a:focus-visible) { outline: 3px solid var(--stamp); outline-offset: 3px; }
.summary { margin: 0; max-width: 36rem; }
.read { font: 600 13px/1 var(--font-mono); color: var(--link); letter-spacing: .04em; margin-top: 6px; }

.stamp { position: absolute; z-index: 2; right: 18px; top: -18px; transform: rotate(var(--tilt, -6deg)); pointer-events: none;
  border: 3px solid var(--stamp); color: var(--stamp); border-radius: 5px; padding: 5px 11px 4px;
  font: 900 15px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase;
  background: color-mix(in srgb, var(--folder) 82%, transparent); opacity: .92; }

.photo { position: relative; background: var(--photo-bg); padding: 8px; transform: rotate(2.2deg); margin-top: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 8px 18px -10px rgb(0 0 0 / .5); }
.photo::before { content: ""; position: absolute; top: -11px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%) rotate(-3deg);
  background: rgb(250 246 225 / .6); border: 1px solid rgb(0 0 0 / .07); }
.photo img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
@media (max-width: 720px) {
  .folder { padding: 26px 18px 20px; }
  .folder.has-photo { grid-template-columns: 1fr; }
  .photo { order: -1; max-width: 24rem; margin-top: 6px; }
  .stamp { font-size: 13px; right: 12px; }
}

/* About */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 24px 40px; padding-block: 32px 8px; margin-top: 24px; border-top: 3px double var(--rule); }
.about h2 { font: 800 .85rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.about p { margin: 0; color: var(--muted); }

/* Footer */
.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 40px; padding-top: 18px; padding-bottom: 44px;
  border-top: 1px solid var(--rule); font: 13px/1.5 var(--font-mono); color: var(--muted); }
.site-foot a { color: inherit; }

/* Standard-layout posts */
.report { max-width: 42rem; margin: 0 auto; padding-block: 44px 8px; }
.report h1 { font: 900 clamp(2.2rem, 6.5vw, 3.5rem)/1.02 var(--font-sans); letter-spacing: -.025em; margin: 6px 0 16px; text-wrap: balance; }
.report .lede { font-size: 1.2rem; margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table, .prose figure { margin: 0 0 1.1em; }
.prose h2 { font: 800 1.65rem/1.15 var(--font-sans); letter-spacing: -.01em; margin: 1.8em 0 .5em; }
.prose h3 { font: 800 1.25rem/1.25 var(--font-sans); margin: 1.5em 0 .4em; }
.prose h4, .prose h5, .prose h6 { font: 700 1rem/1.3 var(--font-sans); margin: 1.4em 0 .4em; }
.prose li + li { margin-top: .3em; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-2); padding: .1em .3em; border-radius: 3px; }
.prose pre { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; overflow-x: auto; font: 14px/1.55 var(--font-mono); }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose blockquote { padding-left: 16px; border-left: 3px solid var(--stamp); color: var(--muted); }
.prose img, .prose video { border-radius: 4px; display: block; }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule); }
.prose hr { border: 0; border-top: 3px double var(--rule); margin: 2.2em 0; }

/* 404 */
.notfound { padding-block: 64px 24px; max-width: 40rem; }
.notfound h1 { font: 900 clamp(2.4rem, 7vw, 3.8rem)/1 var(--font-sans); text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 16px; }
.notfound p { margin: 0 0 12px; }