/* Alibi. A lake at night, by candlelight: lake-green dark, candle ivory, brass. Oxblood only for the killer. */
:root {
  --lakebed: #0e1719;
  --water: #16232a;
  --water-2: #1d2d33;
  --hairline: rgba(236, 228, 212, 0.12);
  --candle: #ece4d4;
  --fog: #8d9a96;
  --brass: #b8925a;
  --brass-dim: rgba(184, 146, 90, 0.45);
  --oxblood: #8e2b2b;
  --oxblood-ink: #a33a35;
  --form: #f1ede3;
  --form-ink: #22201c;
  --form-rule: rgba(34, 32, 28, 0.22);
  --solved: #c9b68a;

  --display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --typed: "Courier Prime", "Courier New", monospace;

  --control-h: 54px;
  --radius: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(184, 146, 90, 0.07), transparent 60%),
    radial-gradient(80% 80% at 100% 100%, rgba(29, 45, 51, 0.9), transparent 70%),
    var(--lakebed);
  background-attachment: fixed;
  color: var(--candle);
  font-family: var(--body);
  /* Bodoni Moda's largest optical size spaces W/w badly at TV sizes; hold it at text-display weight. */
  font-variation-settings: 'opsz' 28;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Wordmark */
.logo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo .dot { color: var(--brass); font-style: normal; }

/* Small-caps label: the one structural voice used everywhere */
.label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Buttons: quiet rectangles. Primary is candle on lake, never candy. */
.btn {
  appearance: none;
  height: var(--control-h);
  padding: 0 30px;
  border: 1px solid var(--candle);
  border-radius: var(--radius);
  background: var(--candle);
  color: var(--lakebed);
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
}
.btn:hover { background: #fff; border-color: #fff; }
.btn:active { opacity: 0.8; }
.btn:disabled { opacity: 0.3; cursor: default; background: var(--candle); }
.btn.ghost { background: transparent; color: var(--candle); border-color: var(--hairline); }
.btn.ghost:hover { border-color: var(--brass); color: #fff; }

/* Portrait: a framed monogram, like the paintings in Graham's hallway. */
.portrait {
  --c: #44606f;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 64px;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--c) 55%, #f3e9d6 8%), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, var(--lakebed)), color-mix(in srgb, var(--c) 18%, #070b0c));
  border: 1px solid var(--brass-dim);
  outline: 1px solid rgba(0, 0, 0, 0.5);
  outline-offset: -5px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  color: rgba(243, 233, 214, 0.92);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  overflow: hidden;
}
.portrait::after {
  /* faint shoulders silhouette under the monogram */
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -22%;
  height: 45%;
  border-radius: 50% 50% 0 0;
  background: rgba(0, 0, 0, 0.28);
}
.portrait span { position: relative; z-index: 1; transform: translateY(-12%); }
.portrait.blank { background: transparent; border-style: dashed; border-color: var(--hairline); outline: 0; box-shadow: none; }
.portrait.blank::after { display: none; }

/* Framed bust portrait (TV and phone). */
.frame-bust { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #05080a; }
.frame-bust .bust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Evidence: a typed sheriff's form clipped to a manila folder ---------- */
.doc {
  position: relative;
  color: var(--form-ink);
  font-family: var(--typed);
  padding: 34px 30px 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 30%),
    var(--form);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 50px rgba(0, 0, 0, 0.55),
    10px 10px 0 -2px #c9b07a,
    10px 10px 30px rgba(0, 0, 0, 0.4);
}
.doc .doc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--form-ink);
}
.doc .doc-agency {
  font-family: var(--body);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(34, 32, 28, 0.6);
}
.doc .doc-title { font-family: var(--body); font-weight: 700; font-size: 1.05em; letter-spacing: 0.06em; text-transform: uppercase; }
.doc .doc-case { font-size: 0.72em; color: rgba(34, 32, 28, 0.6); white-space: nowrap; }
.doc dl { display: grid; grid-template-columns: max-content 1fr; margin: 0 0 18px; }
.doc dt, .doc dd { padding: 7px 0; border-bottom: 1px solid var(--form-rule); margin: 0; }
.doc dt {
  font-family: var(--body);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(34, 32, 28, 0.55);
  padding-right: 22px;
  padding-top: 10px;
}
.doc .finding-label {
  font-family: var(--body);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(34, 32, 28, 0.55);
  margin-bottom: 6px;
}
.doc .finding { font-size: 1.15em; line-height: 1.4; }
.doc .finding mark {
  background: linear-gradient(transparent 58%, rgba(142, 43, 43, 0.18) 58%);
  color: var(--form-ink);
  font-weight: 700;
}

/* Rubber stamp, slightly uneven ink */
.stamp {
  position: absolute;
  top: 18px;
  right: 22px;
  transform: rotate(-6deg);
  padding: 4px 10px 3px;
  border: 2px solid var(--oxblood-ink);
  border-radius: 2px;
  color: var(--oxblood-ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.66em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.82;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, 0.65) 75%, #000 90%);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, 0.65) 75%, #000 90%);
}
.doc .stamp { top: auto; bottom: 18px; right: 24px; }
.doc { padding-bottom: 60px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}