:root {
  --bg: #121410;
  --ink: #f3f0e8;
  --quiet: #c4bfb2;
  --line: #2c2f2a;
  --panel: #1a1c18;
  --refuse: #e23d32;
  --refuse-deep: #b42318;
  --row: #171915;
  --row-hot: #22261f;
  --sans: "Schibsted Grotesk", "Segoe UI", sans-serif;
  --mono: "Red Hat Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  caret-color: var(--refuse);
}

::selection {
  background: #5a2420;
  color: var(--ink);
}

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

body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--bg); }
body::-webkit-scrollbar-thumb {
  background: #3a3d36;
  border: 3px solid var(--bg);
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 8px;
}

.mark {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

nav {
  display: flex;
  gap: 22px;
}

nav a {
  color: var(--quiet);
  text-decoration: none;
  font-weight: 500;
}

nav a:hover { color: var(--ink); }

main {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 96px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 96px);
  padding-bottom: 48px;
}

h1 {
  margin: 0;
  font-size: 5.4rem;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 11ch;
}

.lede {
  margin: 28px 0 0;
  max-width: 38ch;
  color: var(--quiet);
  font-size: 1.35rem;
  line-height: 1.45;
}

.decision {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 28px 28px 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .decision.fresh {
    animation: settle 560ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes settle {
  from { transform: translateY(8px); filter: blur(2px); }
  to { transform: none; filter: none; }
}

.decision-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.who {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.who span {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.who time {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}

.status {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--refuse);
}

.status.bought,
.status.held {
  color: var(--ink);
}

.facts {
  margin: 28px 0 0;
}

.facts div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.facts dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--quiet);
}

.facts dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  max-width: 42ch;
}

.decision-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.printer {
  margin: 0;
  max-width: 36ch;
  color: var(--quiet);
  font-size: 0.95rem;
}

.pause {
  appearance: none;
  border: 0;
  background: var(--refuse);
  color: #fff8f4;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.7em 1.05em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(178, 36, 28, 0.28);
}

.pause:hover { background: var(--refuse-deep); }

.pause:active { transform: translateY(1px); }

.pause.held {
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
}

.method,
.desks,
.record,
.close {
  padding-top: 72px;
}

h2 {
  margin: 0 0 20px;
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 18ch;
}

.method-list,
.desk-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}

.method-list div,
.desk-list div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.method-list dt,
.desk-list dt {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.method-list dd,
.desk-list dd,
.section-copy,
.record-head p,
.close p {
  margin: 0;
  max-width: 62ch;
  color: var(--quiet);
}

.section-copy { margin: -4px 0 28px; }

.record-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 18px;
}

.record-head h2 { margin: 0; }

.record-head p { max-width: 36ch; }

.tape-scroll { overflow-x: auto; }

.tape {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tape th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--quiet);
  padding: 0 12px 10px;
}

.tape td { padding: 0; }

.tape button {
  width: 100%;
  display: grid;
  grid-template-columns: 6.5rem 1.3fr 0.8fr 1fr;
  gap: 8px;
  text-align: left;
  background: var(--row);
  border: 0;
  border-top: 1px solid var(--line);
  color: inherit;
  font: inherit;
  padding: 14px 12px;
  cursor: pointer;
}

.tape button:hover,
.tape button[aria-current="true"] {
  background: var(--row-hot);
}

.tape .call-refused { color: var(--refuse); }

.close p { margin-top: 12px; font-size: 1.2rem; max-width: 46ch; }

@media (max-width: 860px) {
  .bar,
  main { width: min(100% - 32px, 1120px); }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 28px;
    padding-bottom: 48px;
  }
  h1 { font-size: 3.2rem; max-width: 14ch; }
  .status { font-size: 3.2rem; }
  .method-list,
  .desk-list,
  .record-head { grid-template-columns: 1fr; display: grid; }
  .record-head { align-items: start; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  .decision-foot { flex-direction: column; align-items: stretch; }
  .tape thead { display: none; }
  .tape,
  .tape tbody,
  .tape tr,
  .tape td { display: block; width: 100%; }
  .tape button { grid-template-columns: 1fr auto; }
  .tape button span:nth-child(3),
  .tape button span:nth-child(4) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .decision.fresh { animation: none; }
}