/* Deposition — declassified courtroom record.
   Plain CSS, no build step, no dependencies.
   Type: Libre Baskerville (record text) over DM Mono (labels, docket, tape). */

:root {
  --paper: #efeae0;      /* the sheet */
  --paper-hi: #f7f3ea;   /* the exhibit card */
  --band: #e7e0d2;       /* form/header bands */
  --desk: #cfc8ba;       /* behind the sheet */
  --ink: #1a1917;
  --muted: #625e54;
  --line: #c6bfb0;
  --line-soft: #ddd6c8;
  --red: #8c2525;
  --red-deep: #6d1c1c;
  --tape: #100f0d;       /* redaction */
  --tape-bar: #6e6a5e;   /* unrevealed letter blocks */
  --tape-text: #f3eee4;  /* revealed letters */
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--paper) }

a { color: var(--red) }
a:hover { color: var(--ink) }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }

/* ── The sheet ───────────────────────────────────────────── */

.page {
  max-width: 880px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  padding: clamp(26px, 5vw, 48px) clamp(20px, 6vw, 72px) clamp(48px, 8vw, 80px);
  box-shadow: 0 0 0 1px #0000000f, 0 20px 64px -24px #4a453b6b;
}

/* ── Masthead ────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 10px;
  font: 500 .74rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--red);
}

.masthead {
  padding-bottom: clamp(14px, 2.4vw, 22px);
  border-bottom: 4px double var(--ink);
}

.masthead .eyebrow { margin-bottom: clamp(12px, 2.4vw, 18px) }

.masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 28px);
}

h1 {
  margin: 0;
  font-size: clamp(2.8rem, 11.5vw, 5.4rem);
  line-height: .86;
  letter-spacing: -.045em;
  font-weight: 700;
}

.date-block {
  flex: 0 0 auto;
  text-align: right;
  padding-bottom: .4em;
  font: 500 .72rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  white-space: nowrap;
}

.date-block strong {
  display: block;
  margin-top: 7px;
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--ink);
}

/* ── The exhibit card ────────────────────────────────────── */

.quote-card {
  margin-top: clamp(24px, 4vw, 34px);
  background: var(--paper-hi);
  border: 1px solid var(--line);
  box-shadow: 7px 7px 0 -1px #c3bbab;
}

.doc-head {
  display: flex;
  justify-content: flex-end;
  padding: 10px clamp(18px, 4vw, 30px);
  background: var(--band);
  border-bottom: 1px solid var(--line);
}

.doc-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 .7rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red);
  white-space: nowrap;
}

.doc-flag::before {
  content: "";
  display: block;
  width: 22px;
  height: 9px;
  background: var(--tape);
}

.quote-body {
  position: relative;
  padding: clamp(26px, 5vw, 48px) clamp(20px, 5vw, 48px) clamp(24px, 4vw, 36px) clamp(36px, 7.5vw, 68px);
}

/* transcript margin rule */
.quote-body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(18px, 4vw, 34px);
  width: 5px;
  border-left: 1px solid #bfa2a2;
  border-right: 1px solid #bfa2a2;
}

.quote-card blockquote {
  margin: 0;
  font-size: clamp(1.28rem, 3vw, 2rem);
  line-height: 1.72;
  letter-spacing: -.005em;
  text-wrap: pretty;
}

.quote-card blockquote::before { content: "\201C"; color: var(--red); margin-right: .04em }
.quote-card blockquote::after { content: "\201D"; color: var(--red); margin-left: .04em }

/* ── The redaction ───────────────────────────────────────── */

.redaction {
  display: inline-block;
  min-width: 2.6em;
  padding: .2em .4em .22em;
  margin: 0 .07em;
  background: var(--tape);
  box-shadow: inset 0 1px 0 #ffffff1a;
  color: var(--tape-text);
  font: 500 .8em/1.2 var(--mono);
  letter-spacing: .14em;
  text-align: center;
  vertical-align: -.26em;
  overflow: hidden;
}

.redaction .red-prev,
.redaction .red-latest { display: inline-block; color: var(--tape-text) }

.redaction .red-bars {
  display: inline-block;
  color: var(--tape-bar);
  letter-spacing: .02em;
  font-family: ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

.redaction .peel { animation: peel .5s cubic-bezier(.2, .85, .25, 1) }

@keyframes peel {
  0%   { transform: translateY(-125%) rotate(-7deg); opacity: 0 }
  55%  { opacity: 1 }
  100% { transform: none; opacity: 1 }
}

/* ── Quiet guess status ──────────────────────────────────── */

.guess-status {
  margin: clamp(24px, 4vw, 34px) 0 clamp(20px, 3vw, 28px);
  padding: 12px 0 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.meter {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font: 500 .7rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

.meter-label { margin-right: auto; color: var(--ink) }
#remaining { color: var(--ink); font-weight: 500 }
.guess-count { margin-left: 8px; color: var(--muted); white-space: nowrap }
.guess-count b { color: var(--ink); font-weight: 500 }

.slots {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}

.slot {
  flex: 1 1 0;
  height: 7px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 0;
  color: transparent;
}

.slot::before { content: none }
.slot.miss { border-color: var(--muted); background: var(--muted) }
.slot.hit { border-color: var(--red); background: var(--red) }

/* ── Guess form ──────────────────────────────────────────── */

.guess-form { max-width: 520px }

.guess-form label {
  display: block;
  margin-bottom: 8px;
  font: 500 .7rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.input-row { display: flex; flex-direction: column; gap: 8px }

.input-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 15px 14px;
  border: 1px solid var(--ink);
  background: var(--paper-hi);
  color: var(--ink);
  font: 500 1.05rem/1.2 var(--mono);
  letter-spacing: .02em;
}

.input-row input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px }

.input-row input:disabled {
  border-color: var(--line);
  background: var(--band);
  color: var(--muted);
  cursor: not-allowed;
}

button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 500 .7rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

button:hover:not(:disabled) { background: var(--ink); color: var(--paper) }
button:active:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--paper) }
button:disabled { opacity: .4; cursor: not-allowed }

.feedback {
  min-height: 1.6em;
  margin: 13px 0 0;
  font: 500 .76rem/1.6 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--red);
}

.feedback:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 7px;
  margin-right: .7em;
  vertical-align: .08em;
  background: var(--red);
}

/* ── Record closed ───────────────────────────────────────── */

.reveal {
  margin-top: clamp(30px, 5vw, 46px);
  padding-top: clamp(26px, 4vw, 38px);
  border-top: 4px double var(--ink);
}

.reveal-heading { margin-bottom: clamp(20px, 3vw, 30px) }

.stamp {
  display: inline-block;
  margin: 0 0 clamp(16px, 2.4vw, 22px);
  padding: 9px 15px 8px;
  border: 2px solid var(--red);
  outline: 1px solid var(--red);
  outline-offset: 3px;
  color: var(--red);
  font: 500 .82rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .2em;
  transform: rotate(-2.2deg);
  transform-origin: left center;
}

.reveal h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.full-quote {
  margin: 0 0 clamp(16px, 2.4vw, 22px);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.8;
  text-wrap: pretty;
}

.answer-word {
  padding: 0 .06em;
  background: transparent;
  box-shadow: inset 0 -.4em 0 #8c252530;
  border-bottom: 1px solid var(--red);
  color: var(--ink);
  font-weight: 700;
}

.context {
  margin: 0 0 clamp(22px, 3.4vw, 32px);
  max-width: 58ch;
  font: italic 400 1rem/1.75 var(--serif);
  color: var(--muted);
}

.plain-block {
  margin: 0 0 clamp(18px, 3vw, 26px);
  max-width: 58ch;
}

.plain-block .eyebrow {
  margin: 0 0 6px;
}

.plain-meaning,
.citation {
  padding-top: clamp(16px, 2.4vw, 20px);
}

.citation .source-link {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font: 500 .72rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
}

.citation .source-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.citation .source-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px }

.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.copy {
  padding: 0 20px;
  min-height: 38px;
  border: 1px solid var(--red);
  color: var(--red);
  background: transparent;
  letter-spacing: .18em;
}

.copy:hover { border-color: var(--red-deep); color: var(--red-deep); background: rgba(140,37,37,.06) }

.share-row span {
  font: 500 .74rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red);
}

.muted { color: var(--muted); font: 500 .8rem/1.7 var(--mono) }

/* ── Footer ──────────────────────────────────────────────── */

footer {
  margin-top: clamp(52px, 9vw, 88px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 4px double var(--ink);
}

footer p {
  margin: 0;
  max-width: 70ch;
  font: 500 .78rem/1.75 var(--mono);
  color: var(--muted);
}

.dedication {
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 2.4vw, 1.35rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.dedication::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-bottom: clamp(16px, 2.4vw, 24px);
  background: var(--red);
}

.dedication em { font-style: italic; color: var(--red) }

/* ── Empty pool ──────────────────────────────────────────── */

.notice { padding: clamp(40px, 8vw, 76px) 0 }
.notice h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em }
.notice p { margin: 0; max-width: 50ch; color: var(--muted) }

/* ── Narrow widths ───────────────────────────────────────── */

@media (max-width: 560px) {
  .page { padding: 22px 18px 46px }
  .masthead-row { flex-wrap: wrap }
  .date-block { text-align: left; padding-bottom: 0 }
  .date-block { font-size: .64rem; letter-spacing: .1em }
  .date-block strong { font-size: .88rem }
  .doc-flag::before { width: 18px }
  .quote-card blockquote { font-size: 1.26rem; line-height: 1.7 }
  .redaction { letter-spacing: .09em }
  .slots { grid-template-columns: repeat(2, 1fr); gap: 7px }
  .input-row button { width: 100% }
  .share-row .copy { width: 100% }
  .stamp { font-size: .74rem; letter-spacing: .15em }
  .quote-card { box-shadow: 4px 4px 0 -1px #c3bbab }
}

@media (prefers-reduced-motion: reduce) {
  .redaction .peel { animation: none }
  button { transition: none }
}