/* ============================================================
   THE DILIGENT MACHINE — design system
   An engineering notebook, not a web app.
   Type: IBM Plex Serif (prose) · IBM Plex Mono (labels, data)
   ============================================================ */

:root {
  --paper: #f4f1e8;
  --paper-deep: #ebe6d8;
  --ink: #1e2022;
  --ink-soft: #4d5257;
  --blue: #2b5d8a;      /* engineer's blue */
  --blue-deep: #1f4466;
  --red: #a63a2b;       /* the stamp */
  --green: #3d6b4f;     /* the checkmark */
  --grid: rgba(43, 93, 138, 0.10);
  --hairline: #cfc8b4;
  --measure: 64ch;
  --frame: 1000px;
}

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

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.62;
}

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

h1, h2, h3 { line-height: 1.15; text-wrap: balance; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin-bottom: 1rem; max-width: var(--measure); }
ul, ol { margin: 0 0 1rem 1.3rem; max-width: var(--measure); }
li { margin-bottom: .4rem; }

a { color: var(--blue-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--red); }

.mono, .label {
  font-family: "IBM Plex Mono", Consolas, monospace;
}
.label {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-deep); display: block; margin-bottom: .7rem;
}

.frame { max-width: var(--frame); margin: 0 auto; padding: 0 1.3rem; }
section { padding: 3rem 0; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 2px solid var(--ink); background: var(--paper); }
.masthead .frame {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .9rem;
}
.wordmark {
  font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .02em; text-decoration: none; color: var(--ink);
  display: flex; align-items: center; gap: .6rem;
}
.wordmark:hover { color: var(--ink); }
.wordmark .gear { color: var(--blue); }
nav.mainnav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
nav.mainnav a {
  font-family: "IBM Plex Mono", monospace; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
nav.mainnav a:hover, nav.mainnav a[aria-current="page"] { color: var(--red); border-bottom: 2px solid var(--red); }

/* ---------- panels: white index cards on the graph paper ---------- */

.card {
  background: #fbfaf5;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(30,32,34,.14);
  padding: 1.6rem 1.7rem;
}

.stamp {
  display: inline-block; font-family: "IBM Plex Mono", monospace;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); border: 2px solid var(--red); padding: .18rem .6rem;
  transform: rotate(-1.6deg); background: rgba(166,58,43,.04);
}
.stamp--green { color: var(--green); border-color: var(--green); background: rgba(61,107,79,.05); }
.stamp--blue { color: var(--blue-deep); border-color: var(--blue-deep); background: rgba(43,93,138,.05); }

.serial { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--ink-soft); letter-spacing: .08em; }

/* ---------- buttons ---------- */

.btn, a.payhip-buy-button {
  display: inline-block; font-family: "IBM Plex Mono", monospace;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--blue-deep); color: var(--paper);
  border: 2px solid var(--ink); padding: .8rem 1.4rem;
  text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 rgba(30,32,34,.25);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover, a.payhip-buy-button:hover { transform: translate(-1px,-2px); box-shadow: 5px 5px 0 rgba(30,32,34,.28); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { color: var(--ink); }
.btn--red { background: var(--red); }

/* ---------- home grid ---------- */

.deskgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.deskgrid .card { display: flex; flex-direction: column; gap: .6rem; }
.deskgrid .card .push { margin-top: auto; padding-top: 1rem; }

/* ---------- ledger table ---------- */

table.ledger {
  border-collapse: collapse; width: 100%;
  font-family: "IBM Plex Mono", monospace; font-size: .84rem;
  background: #fbfaf5; border: 1.5px solid var(--ink);
}
table.ledger th, table.ledger td { padding: .55rem .8rem; border-bottom: 1px solid var(--hairline); text-align: left; }
table.ledger th { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; background: var(--paper-deep); border-bottom: 1.5px solid var(--ink); }
table.ledger td.num, table.ledger th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.ledger tr.total td { border-top: 2px solid var(--ink); font-weight: 700; }
.pos { color: var(--green); } .neg { color: var(--red); }

/* ---------- the game ---------- */

.case-head { margin: 1.4rem 0 .4rem; }
.case-head .crime { font-size: 1.28rem; font-weight: 600; max-width: 40ch; }
.lies-note {
  font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: var(--red);
  font-weight: 700; letter-spacing: .06em; margin: .6rem 0 1.2rem;
}

.suspects { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.suspect {
  text-align: left; background: #fbfaf5; border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(30,32,34,.14); padding: 1rem 1.1rem;
  font: inherit; color: inherit; cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.suspect:hover:not(:disabled) { transform: translate(-1px,-2px); box-shadow: 5px 5px 0 rgba(30,32,34,.2); }
.suspect .who { font-family: "IBM Plex Mono", monospace; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); display: block; }
.suspect .role { font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--ink-soft); display: block; margin-bottom: .35rem; }
.suspect .quote { font-style: italic; }
.suspect:disabled { cursor: default; }
.suspect.cleared { opacity: .55; }
.suspect.guilty { border-color: var(--red); box-shadow: 4px 4px 0 rgba(166,58,43,.35); }
.suspect.wrong { border-color: var(--red); border-style: dashed; opacity: .8; }
.suspect .tag { font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: .5rem; }
.suspect .tag.lied { color: var(--red); }
.suspect .tag.honest { color: var(--green); }

.verdict { margin-top: 1.6rem; }
.verdict .card p:last-child { margin-bottom: 0; }
.hidden { display: none; }

.notes-toggle { margin-top: 1rem; }
details.worknotes { margin-top: 1rem; max-width: var(--measure); }
details.worknotes summary { cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); }
details.worknotes pre {
  font-family: "IBM Plex Mono", monospace; font-size: .82rem; line-height: 1.7;
  background: #fbfaf5; border: 1.5px solid var(--ink); padding: 1rem 1.2rem; margin-top: .7rem;
  overflow-x: auto; white-space: pre-wrap;
}

/* ---------- forms ---------- */

.listform { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; max-width: 32rem; }
.listform input[type="email"] {
  flex: 1 1 220px; font-family: "IBM Plex Mono", monospace; font-size: .9rem;
  padding: .8rem .9rem; border: 1.5px solid var(--ink); background: #fbfaf5; color: var(--ink);
}
.listform input[type="email"]:focus { outline: 3px solid var(--blue); outline-offset: 1px; }

/* ---------- footer ---------- */

footer.baseplate {
  border-top: 2px solid var(--ink); margin-top: 3rem; padding: 2rem 0 2.8rem;
  font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--ink-soft);
  background: var(--paper);
}
footer.baseplate .frame { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
footer.baseplate nav { display: flex; flex-direction: column; gap: .35rem; }
footer.baseplate a { color: var(--ink-soft); text-decoration: none; }
footer.baseplate a:hover { color: var(--red); text-decoration: underline; }
.foot-note { max-width: 46ch; line-height: 1.7; }

.small { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--ink-soft); }
.mt-2 { margin-top: 2rem; }
.rule { border: 0; border-top: 1.5px solid var(--hairline); margin: 2.4rem 0; }