:root {
–red: #c0392b;
–dark-red: #7b1a12;
–cream: #f0e8d8;
–paper: #e8dcc8;
–ink: #1a1209;
–faded: #6b5c47;
–stamp-green: #2d5a27;
–gold: #b8960c;
}

- {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
background-color: #2a2018;
font-family: ‘IBM Plex Mono’, monospace;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px 80px;
background-image:
radial-gradient(ellipse at 20% 50%, rgba(80,40,10,0.4) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(60,20,5,0.3) 0%, transparent 50%);
}

/* Scanline overlay */
body::before {
content: ‘’;
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.03) 2px,
rgba(0,0,0,0.03) 4px
);
pointer-events: none;
z-index: 100;
}

/* ── DOSSIER CARD ── */
.dossier {
width: 100%;
max-width: 780px;
background: var(–cream);
position: relative;
box-shadow:
0 0 0 1px rgba(0,0,0,0.3),
4px 4px 0 rgba(0,0,0,0.2),
8px 8px 0 rgba(0,0,0,0.1),
0 30px 80px rgba(0,0,0,0.6);
animation: pageLoad 0.8s ease-out both;
}

@keyframes pageLoad {
from { opacity: 0; transform: translateY(30px) rotate(-0.5deg); }
to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* Paper texture overlay */
.dossier::after {
content: ‘’;
position: absolute;
inset: 0;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ width=‘300’ height=‘300’%3E%3Cfilter id=‘noise’%3E%3CfeTurbulence type=‘fractalNoise’ baseFrequency=‘0.9’ numOctaves=‘4’ stitchTiles=‘stitch’/%3E%3CfeColorMatrix type=‘saturate’ values=‘0’/%3E%3C/filter%3E%3Crect width=‘300’ height=‘300’ filter=‘url(%23noise)’ opacity=‘0.04’/%3E%3C/svg%3E”);
pointer-events: none;
opacity: 0.6;
}

/* ── HEADER STRIP ── */
.header-strip {
background: var(–ink);
padding: 10px 28px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 3px solid var(–red);
}

.dept-label {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 9px;
letter-spacing: 3px;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
}

.classification {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(–red);
text-transform: uppercase;
border: 1px solid var(–red);
padding: 3px 8px;
opacity: 0.9;
}

/* ── MAIN HEADER ── */
.main-header {
padding: 36px 40px 28px;
border-bottom: 1px solid rgba(26,18,9,0.2);
position: relative;
background: linear-gradient(180deg, var(–paper) 0%, var(–cream) 100%);
}

.file-id {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
letter-spacing: 2px;
color: var(–faded);
margin-bottom: 10px;
}

.name-block {
display: flex;
align-items: flex-end;
gap: 20px;
margin-bottom: 8px;
}

h1 {
font-family: ‘Bebas Neue’, sans-serif;
font-size: clamp(64px, 12vw, 108px);
line-height: 0.9;
color: var(–ink);
letter-spacing: 2px;
}

h1 span {
color: var(–red);
}

.title-tag {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
letter-spacing: 3px;
color: var(–faded);
text-transform: uppercase;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(26,18,9,0.2);
}

.tagline {
font-family: ‘Crimson Pro’, serif;
font-size: 18px;
font-style: italic;
color: var(–faded);
max-width: 500px;
line-height: 1.5;
}

/* Photo placeholder */
.photo-box {
position: absolute;
top: 36px;
right: 40px;
width: 110px;
height: 140px;
border: 2px solid var(–ink);
background: var(–paper);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
overflow: hidden;
}

.photo-box::before {
content: ‘?’;
font-family: ‘Bebas Neue’, sans-serif;
font-size: 72px;
color: rgba(26,18,9,0.12);
line-height: 1;
}

.photo-caption {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 7px;
letter-spacing: 1.5px;
color: var(–faded);
text-align: center;
text-transform: uppercase;
position: absolute;
bottom: 6px;
}

/* ── STAMP ── */
.stamp-unconfirmed {
position: absolute;
top: 50px;
right: 170px;
font-family: ‘Bebas Neue’, sans-serif;
font-size: 22px;
letter-spacing: 3px;
color: var(–red);
border: 3px solid var(–red);
padding: 6px 12px;
transform: rotate(-14deg);
opacity: 0.55;
pointer-events: none;
white-space: nowrap;
}

/* ── BODY ── */
.body {
padding: 32px 40px;
}

/* ── SECTIONS ── */
.section {
margin-bottom: 36px;
animation: fadeUp 0.6s ease-out both;
}

@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: translateY(0); }
}

.section:nth-child(1) { animation-delay: 0.15s; }
.section:nth-child(2) { animation-delay: 0.25s; }
.section:nth-child(3) { animation-delay: 0.35s; }
.section:nth-child(4) { animation-delay: 0.45s; }
.section:nth-child(5) { animation-delay: 0.55s; }

.section-label {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: white;
background: var(–ink);
display: inline-block;
padding: 4px 10px;
margin-bottom: 14px;
}

/* ── PROFILE GRID ── */
.profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid rgba(26,18,9,0.2);
}

.profile-row {
display: contents;
}

.profile-key {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(–faded);
background: rgba(26,18,9,0.04);
padding: 10px 14px;
border-bottom: 1px solid rgba(26,18,9,0.1);
border-right: 1px solid rgba(26,18,9,0.1);
}

.profile-val {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px;
color: var(–ink);
padding: 10px 14px;
border-bottom: 1px solid rgba(26,18,9,0.1);
}

.profile-val.redacted {
background: var(–ink);
color: var(–ink);
user-select: none;
cursor: pointer;
position: relative;
transition: background 0.3s, color 0.3s;
}

.profile-val.redacted:hover {
background: var(–dark-red);
color: var(–cream);
}

.profile-val.redacted::after {
content: ‘[ HOVER TO REVEAL ]’;
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 8px;
letter-spacing: 2px;
color: rgba(240,232,216,0.2);
}

.unknown-tag {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
color: var(–red);
font-style: normal;
}

/* ── EVIDENCE LIST ── */
.evidence-list {
list-style: none;
border: 1px solid rgba(26,18,9,0.15);
}

.evidence-list li {
padding: 14px 18px;
border-bottom: 1px solid rgba(26,18,9,0.1);
font-family: ‘Crimson Pro’, serif;
font-size: 16px;
color: var(–ink);
line-height: 1.5;
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: start;
}

.evidence-list li:last-child {
border-bottom: none;
}

.evidence-list li:hover {
background: rgba(192,57,43,0.04);
cursor: default;
}

.evidence-num {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 9px;
color: var(–faded);
letter-spacing: 1px;
padding-top: 3px;
}

/* ── STATS ROW ── */
.stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(26,18,9,0.15);
border: 1px solid rgba(26,18,9,0.15);
margin-bottom: 16px;
}

.stat-box {
background: var(–cream);
padding: 20px 16px;
text-align: center;
}

.stat-box:hover .stat-number {
color: var(–red);
transition: color 0.2s;
}

.stat-number {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 52px;
line-height: 1;
color: var(–ink);
display: block;
}

.stat-number.unknown {
color: var(–red);
font-size: 42px;
}

.stat-label {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(–faded);
text-transform: uppercase;
display: block;
margin-top: 4px;
}

/* ── TESTIMONIALS ── */
.testimonials {
display: grid;
gap: 12px;
}

.testimonial {
background: rgba(26,18,9,0.04);
border-left: 3px solid var(–ink);
padding: 14px 18px;
}

.testimonial blockquote {
font-family: ‘Crimson Pro’, serif;
font-size: 17px;
font-style: italic;
color: var(–ink);
line-height: 1.55;
margin-bottom: 8px;
}

.testimonial cite {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(–faded);
text-transform: uppercase;
font-style: normal;
}

/* ── CERT GRID ── */
.cert-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.cert-item {
border: 1px solid rgba(26,18,9,0.2);
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: center;
}

.cert-icon {
font-size: 20px;
flex-shrink: 0;
}

.cert-name {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
letter-spacing: 1px;
color: var(–ink);
line-height: 1.5;
}

.cert-status {
font-size: 8px;
color: var(–stamp-green);
letter-spacing: 1px;
text-transform: uppercase;
display: block;
margin-top: 2px;
}

/* ── SIGHTING LOG ── */
.sighting-log {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px;
line-height: 2;
color: var(–faded);
border: 1px dashed rgba(26,18,9,0.2);
padding: 20px;
background: rgba(26,18,9,0.02);
}

.sighting-log .entry {
display: flex;
gap: 16px;
border-bottom: 1px solid rgba(26,18,9,0.07);
padding: 6px 0;
color: var(–ink);
}

.sighting-log .entry:last-child {
border-bottom: none;
}

.sighting-time {
color: var(–faded);
flex-shrink: 0;
font-size: 10px;
}

.sighting-status {
color: var(–red);
font-size: 10px;
flex-shrink: 0;
margin-left: auto;
}

/* ── FOOTER ── */
.dossier-footer {
background: var(–ink);
padding: 18px 40px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 3px solid var(–red);
}

.footer-text {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 9px;
letter-spacing: 2px;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
}

.footer-seal {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 11px;
letter-spacing: 3px;
color: var(–gold);
opacity: 0.7;
}

/* ── DIVIDER ── */
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(26,18,9,0.2), transparent);
margin: 8px 0 28px;
}

/* ── CLOSING NOTE ── */
.closing-note {
font-family: ‘Crimson Pro’, serif;
font-size: 15px;
color: var(–faded);
font-style: italic;
line-height: 1.7;
text-align: center;
padding: 0 20px;
}

/* ── BLINK CURSOR ── */
.cursor {
display: inline-block;
width: 8px;
height: 14px;
background: var(–ink);
vertical-align: middle;
animation: blink 1.1s step-end infinite;
margin-left: 2px;
}

@keyframes blink {
0%, 100% { opacity: 1; }
50%       { opacity: 0; }
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
.main-header          { padding: 28px 24px; }
.body                 { padding: 24px; }
.photo-box            { display: none; }
.stamp-unconfirmed    { right: 20px; }
.profile-grid         { grid-template-columns: 1fr; }
.profile-key          { border-right: none; }
.stats-row            { grid-template-columns: 1fr; }
.cert-grid            { grid-template-columns: 1fr; }
h1                    { font-size: 64px; }
}