/* Calm, competent, official. The joke only works if the interface takes it seriously. */
:root {
  --bg: #f6f6f3;
  --surface: #ffffff;
  --text: #16181d;
  --muted: #5d6270;
  --line: #e3e3de;
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: #e8eefc;
  --status: #b45309;
  --status-soft: #fef3e2;
  --notice: #fff8db;
  --notice-line: #f0d97a;
  --stamp: #b42318;
  --stamp-green: #067647;
  --go: #15803d;
  --go-ink: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .04);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a20;
    --text: #eceef2;
    --muted: #9aa0ad;
    --line: #2a2e37;
    --accent: #6d95ff;
    --accent-ink: #0b0f1a;
    --accent-soft: #1b2440;
    --status: #f5a524;
    --status-soft: #2b2112;
    --notice: #221f12;
    --notice-line: #4d4420;
    --stamp: #f97066;
    --stamp-green: #47cd89;
    --go: #3ec27a;
    --go-ink: #06140c;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
/* celebs.wtf: the star from the CWTF logo, wrapped round the wordmark, in the site's own colours. The text
   is fixed to one width (textLength), so the "l" meets the end of the star's top line whatever the system font. Its outline in the bar's
   colour cuts the star where the "c" crosses it, as in the original artwork. */
.logo-mark { height: 36px; width: 120px; flex: none; }
.logo-star { fill: var(--accent); }
.logo-text { fill: var(--text); font-weight: 800; stroke: var(--surface); stroke-width: 28px; stroke-linejoin: round; paint-order: stroke; }
.logo-tld { fill: var(--accent); font-weight: 600; }
.service-tag { font-size: 13px; color: var(--muted); }

.notice { background: var(--notice); border-bottom: 1px solid var(--notice-line); font-size: 14px; padding: 10px 0; }

/* Hero */
.hero { padding: 56px 0 32px; max-width: 720px; }
h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 14px; }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 28px; }

.search {
  display: flex; gap: 8px; padding: 6px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search .field { position: relative; flex: 1; min-width: 0; display: flex; }
.search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent; color: inherit;
  font: inherit; font-size: 17px; padding: 10px 12px;
}

/* The search box types out names of people on file, with a block cursor (app.js, startTyper). It sits
   over the empty input and gets out of the way the moment anyone clicks in. */
.typer {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 10px 12px; font-size: 17px; color: var(--muted);
  white-space: nowrap; overflow: hidden; pointer-events: none;
}
.typer[hidden] { display: none; }
.typer-cursor {
  display: inline-block; flex: none; width: .55em; height: 1.15em; margin-left: 2px;
  background: var(--go); opacity: .85; border-radius: 1px;
}
.typer.idle .typer-cursor { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hint { font-size: 13px; color: var(--muted); margin: 10px 2px 0; }
.search button { background: var(--go); color: var(--go-ink); }

button {
  font: inherit; font-weight: 600; font-size: 15px;
  border: 0; border-radius: 8px; padding: 10px 18px;
  background: var(--accent); color: var(--accent-ink);
  cursor: pointer; transition: filter .15s, transform .05s;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }

/* Layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; padding-bottom: 64px; align-items: start; }
.main-col { min-width: 0; }
.side { display: grid; gap: 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.side-card { padding: 20px; }
.side-card h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.side-card ul { list-style: none; margin: 0; padding: 0; }
.side-card li + li { border-top: 1px solid var(--line); }
.side-card li a { display: block; padding: 8px 0; color: var(--text); text-decoration: none; font-weight: 500; }
.side-card li a:hover { color: var(--accent); }
#recent a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#recent .role { flex: none; }
.side-card .empty { color: var(--muted); font-size: 14px; }
.stat .big { font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.stat p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* In the news (home page only) */
.news { padding: 28px; }
.news[hidden] { display: none; }
.news-head h2 { margin: 2px 0 4px; font-size: 24px; letter-spacing: -.015em; }
.news-lede { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 20px 16px; }
.news-item { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; }
.news-frame { display: block; margin-bottom: 4px; }
.news-item:hover .news-name { color: var(--accent); }
.news-item:hover .news-frame img { filter: brightness(1.05); }
.news-name { font-weight: 650; font-size: 15px; line-height: 1.3; }
.news-status {
  margin-top: 2px; padding-top: 6px; border-top: 2px solid var(--status);
  font-size: 13px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-transform: uppercase; text-wrap: balance;
}
.news-hook { font-size: 13px; color: var(--muted); line-height: 1.4; }
.news-hook-label { font-weight: 600; }

/* Loading */
.loading { padding: 48px 24px; text-align: center; color: var(--muted); }
.spinner {
  width: 28px; height: 28px; margin: 0 auto 14px;
  border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* "Which one?" */
.choose { padding: 28px; }
.choose[hidden] { display: none; }
.choose h2 { margin: 0 0 4px; font-size: 20px; }
.choose-lede { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
#choose-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
#choose-list button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 500;
}
#choose-list button:hover { border-color: var(--accent); filter: none; }
.choose-desc { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }

/* Not found */
.notfound { padding: 28px; border-left: 4px solid var(--status); }
.notfound h2 { margin: 0 0 6px; font-size: 20px; }
.notfound p { margin: 0; color: var(--muted); }

/* Record */
.record { position: relative; padding: 32px; animation: rise .35s ease-out; }

/* The real-world status: deliberately plain, no Registry voice. Sits in the record footer. */
.actual { margin: 14px 0 0; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.actual[hidden] { display: none; }
.actual-label { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
#r-actual-text { color: var(--text); }
.actual-source { font-size: 11px; color: var(--muted); }
.actual-source[hidden] { display: none; }


/* "Mortality status": a form box under the reference with an ink stamp in it. The stamp's angle and
   offset (--rot, --dx, --dy) vary per report, so no two look stamped by the same hand. */
.head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 42%; }
.head-right .ref { max-width: none; }
.mortality { position: relative; width: 104px; height: 104px; border: 1.5px dashed var(--line); border-radius: 4px; }
.mortality[hidden] { display: none; }
.mortality-label { position: absolute; top: 4px; left: 6px; right: 6px; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mortality-stamp {
  position: absolute; left: 50%; top: 54%; width: 84px; height: 84px; pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, -6deg));
  opacity: .88;
}
.mortality-stamp:empty { display: none; }
.mortality-stamp.deceased { color: var(--stamp); }
.mortality-stamp.alive { color: var(--stamp-green); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.record-head > div:first-child { flex: 1; min-width: 0; }
.record-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.record-head h2 { margin: 2px 0 0; font-size: 32px; letter-spacing: -.02em; line-height: 1.15; }
.rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--muted); }
.rating[hidden] { display: none; }
.qualifier { font-size: .6em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.qualifier[hidden], .also-on-file[hidden] { display: none; }
.role { width: 1em; height: 1em; vertical-align: -.125em; color: var(--muted); stroke-width: 1.75; }
h2 .role { width: .75em; height: .75em; vertical-align: 0; }
.also-on-file { margin: 12px 0 0; font-size: 14px; color: var(--muted); font-style: italic; }
.also-on-file a { color: var(--accent); }
.stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 2px; color: var(--line); }
.stars::before { content: '★★★★★'; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #e3a008; }
.stars-fill::before { content: '★★★★★'; }
.rating-text strong { color: var(--text); font-weight: 600; }
.ref { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); text-align: right; max-width: 42%; overflow-wrap: anywhere; }

.confidence { margin: 20px 0 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.confidence-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.confidence-label { font-size: 15px; color: var(--muted); }
.confidence-value { display: flex; align-items: baseline; gap: 8px; }
#r-confidence { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.confidence-value small { font-size: 13px; color: var(--muted); }
.confidence .meter { height: 8px; margin: 12px 0 0; }

/* The splash: the status is a tabloid front-page headline, so it is set like one, with the deadpan
   sentence-case headline as its sub-deck. The amber keeps it tied to the status tag in the news list. */
.status { margin: 18px 0 0; padding: 14px 0 0; border-top: 3px solid var(--status); }
.status strong {
  display: block;
  font-size: clamp(26px, 3.6vw, 38px); font-weight: 900; line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.headline { font-size: 18px; line-height: 1.45; margin: 12px 0 0; color: var(--muted); }
.record-head + .confidence { margin-top: 24px; }
@keyframes pulse { 50% { opacity: .35; } }
.archived-banner { margin: 0 0 20px; padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); color: var(--text); font-size: 14px; }
.archived-banner[hidden], #archive-card[hidden] { display: none; }
.archived-banner a { color: var(--accent); }
#archive-list li a { display: block; padding: 8px 0; color: var(--text); text-decoration: none; }
#archive-list li a:hover { color: var(--accent); }
#archive-list .archive-date { display: block; font-size: 12px; color: var(--muted); }
#archive-list li.current a { color: var(--accent); }

.cols { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.photo { margin: 0; }
.frame { position: relative; border-radius: 10px; overflow: hidden; background: var(--line); aspect-ratio: 4 / 3; }
.frame.developing, .frame.failed { display: grid; place-items: center; }
.frame.developing img, .frame.failed img { display: none; }
.frame.developing::after, .frame.failed::after { font-size: 13px; color: var(--muted); }
.frame.developing::after { content: 'Developing photo…'; animation: pulse 1.6s ease-in-out infinite; }
.frame.failed::after { content: 'Photo unavailable. The negative has been misfiled.'; padding: 0 16px; text-align: center; }
.frame.developing {
  background: linear-gradient(100deg, var(--line) 30%, var(--surface) 50%, var(--line) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }
.frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Photo looks (public/camera.js): roughing up the image model's polished output so photos feel taken
   on a phone, a security camera or a cheap old digital camera. One per report, stable. */
.frame img { transform-origin: center; }
.photo-grain, .photo-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.photo-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.frame.developing .photo-grain, .frame.developing .photo-overlay, .frame.failed .photo-grain, .frame.failed .photo-overlay { display: none; }

.frame[data-look] .photo-grain { opacity: .3; } /* every look gets phone grain */
.frame[data-look="offcentre"] img { transform: scale(1.35) translate(-12%, 6%); }
.frame[data-look="tight"] img { transform: scale(1.5) translate(6%, 14%); }
.frame[data-look="lowlight"] img { filter: brightness(.8) contrast(1.12) saturate(.7) blur(.6px); }
.frame[data-look="lowlight"] .photo-grain { opacity: .55; }
.frame[data-look="zoom"] img { filter: blur(.8px) saturate(.75) contrast(.92); transform: scale(1.3) translate(5%, -3%); }
.frame[data-look="zoom"] .photo-grain { opacity: .45; }
.frame[data-look="flash"] img { filter: contrast(1.35) brightness(1.12) saturate(1.08); }
.frame[data-look="flash"] .photo-overlay { opacity: 1; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .6) 100%); }
.frame[data-look="digicam"] img { filter: saturate(1.45) sepia(.15) contrast(1.06); }
.frame[data-look="motion"] img { filter: blur(.7px); transform: scale(1.03); }
.frame[data-look="window"] img { filter: contrast(.88) brightness(1.04) blur(.3px); }
.frame[data-look="window"] .photo-overlay {
  opacity: 1;
  background: linear-gradient(115deg, rgba(255, 255, 255, .18), transparent 35%, rgba(255, 255, 255, .1) 55%, transparent 68%);
}
.frame[data-look="clean"] .photo-grain { opacity: 0; }
figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.credit { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; opacity: .8; }
.credit[hidden] { display: none; }

.facts { margin: 0; }
.facts > div { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts > div:first-child { padding-top: 0; }
.facts > div[hidden] { display: none; }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; }
.meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0 6px; }
.meter div { height: 100%; border-radius: inherit; background: var(--accent); transition: width .8s cubic-bezier(.2, .8, .2, 1); }

.report { margin-top: 28px; max-width: 64ch; }
.report p { margin: 0 0 14px; }

.advice { margin-top: 20px; padding: 16px 18px; border-radius: 10px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
.advice-title { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.advice p { margin: 0; }

.record-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.record-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
button.linklike { background: none; padding: 0; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
button.linklike:disabled { color: var(--muted); cursor: progress; }
.recount-msg { margin: 10px 0 0; font-size: 14px; color: var(--status); }
.recount-msg:empty { display: none; }
.record-foot .fine { margin-top: 12px; }
.fine { font-size: 12px; color: var(--muted); margin: 0; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 14px; color: var(--muted); }
footer p { max-width: 760px; margin: 0 0 8px; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .news { padding: 20px; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .service-tag { display: none; }
  .hero { padding-top: 36px; }
  .search { flex-direction: column; }
  .record { padding: 20px; }
  .status strong { font-size: 26px; }
  .record-head { flex-direction: column; gap: 6px; }
  .ref { text-align: left; max-width: none; }
  .head-right { align-items: flex-start; max-width: none; }
}