/* creepy-static.css — public-site creepy variants. */
main { max-width: 820px; }

.cr-hero { border: 2px solid #000; padding: 18px 22px 20px; margin-bottom: 28px; position: relative; }
.cr-hero::before { content: "PUBLIC RECORD · SOURCED · LINKED"; position: absolute; top: -10px; left: 16px; background: #fff; padding: 0 8px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #000; }
.cr-h1 { margin: 0 0 10px; border: 0; padding: 0; font-family: "Times New Roman", Times, serif; font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -0.5px; }
.cr-sub { margin: 0; font-family: "Times New Roman", Times, serif; font-size: 15.5px; line-height: 1.55; color: #222; }
.cr-meta { margin: 14px 0 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.6px; color: #555; }
.cr-warning { border: 1px dashed #000; padding: 10px 12px; margin-bottom: 26px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.6; color: #333; }
.cr-warning strong { color: #000; }

.cr-list { list-style: none; padding: 0; margin: 0; }
.cr-item { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 22px 0 24px; border-bottom: 1px solid #000; }
.cr-item:last-child { border-bottom: 0; }
.cr-rank { font-family: ui-monospace, Menlo, monospace; font-size: 44px; font-weight: 700; line-height: 1; color: #000; letter-spacing: -2px; }
.cr-rank-suffix { display: block; font-size: 10px; font-weight: 400; letter-spacing: 1.2px; color: #555; margin-top: 2px; }
.cr-body-with-image { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 16px; }
.cr-body-with-image .cr-itemhero { margin: 0; padding: 0; border: 1px solid #000; background: #fff; display: flex; flex-direction: column; }
.cr-body-with-image .cr-itemhero img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid #000; }
.cr-body-with-image .cr-itemhero figcaption { padding: 6px 8px 7px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; line-height: 1.45; color: #777; letter-spacing: 0.2px; }
.cr-body-with-image .cr-itemhero figcaption a { color: #777; }
.cr-body-with-image .cr-body-text { min-width: 0; }
@media (max-width: 740px) { .cr-body-with-image { grid-template-columns: 1fr; } }
.cr-tag { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #000; padding: 2px 7px; margin-bottom: 8px; transform: rotate(-1deg); }
.cr-fact { margin: 0 0 8px; font-family: "Times New Roman", Times, serif; font-size: 17px; line-height: 1.5; color: #000; }
.cr-why { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid #000; font-family: "Times New Roman", Times, serif; font-size: 14.5px; line-height: 1.5; color: #333; background: #fafafa; }
.cr-source { margin: 0 0 6px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #555; }
.cr-source strong { color: #000; font-weight: 700; letter-spacing: 0.4px; }
.cr-link { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #000; text-decoration: none; border-bottom: 1px solid #000; padding-bottom: 1px; }
.cr-link:hover { background: #fffacd; }
.cr-link::before { content: "→ "; }
@media (max-width: 640px) { .cr-h1 { font-size: 28px; } .cr-item { grid-template-columns: 50px 1fr; gap: 12px; padding: 18px 0 20px; } .cr-rank { font-size: 32px; } .cr-fact { font-size: 15.5px; } .cr-why { font-size: 13.5px; } }