:root {
  color-scheme: light dark;
  --ink: #17211d;
  --muted: #5f6c66;
  --paper: #f3f0e8;
  --card: #fffdf7;
  --accent: #e4572e;
  --note-text: #4a554f;
  --line: #cbc7ba;
  --shadow: 0 18px 60px rgb(36 42 38 / 10%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgb(23 33 29 / 4%) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 2rem;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

button, a { font: inherit; }
a { color: inherit; }

.shell {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
  padding: 1.25rem 0 2rem;
}

.masthead, .eyebrow, .lab-note, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.masthead { padding-block: .5rem 3rem; }

.header-actions, .header-actions nav {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.nav-link, .theme-toggle {
  padding: .55rem .7rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
  text-decoration: none;
}

.nav-link:hover, .nav-link.is-current { border-color: var(--line); color: var(--ink); }
.theme-toggle { border-color: var(--line); cursor: pointer; }
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2.6rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.status, .eyebrow, footer { color: var(--muted); font-size: .78rem; }
.status-dot { display: inline-block; width: .55rem; aspect-ratio: 1; margin-right: .4rem; border-radius: 50%; background: #2a9d5b; }

.joke-card {
  position: relative;
  overflow: hidden;
  min-height: 29rem;
  padding: clamp(1.4rem, 5vw, 4.5rem);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.joke-card::after {
  position: absolute;
  right: -1.5rem;
  bottom: -4.4rem;
  color: var(--accent);
  opacity: .08;
  content: "?";
  font: 700 22rem/1 Georgia, serif;
  pointer-events: none;
}

.eyebrow { position: relative; z-index: 1; text-transform: uppercase; letter-spacing: .08em; }

h1, .punchline {
  position: relative;
  z-index: 1;
  max-width: 19ch;
  margin: 3.5rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 7vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}

.punchline {
  max-width: 30ch;
  margin-top: 2rem;
  color: var(--accent);
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  letter-spacing: -.025em;
  line-height: 1.12;
}

.punchline::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--accent);
  opacity: .5;
}

.copy-button {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding: .8rem 1rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.copy-button:hover { background: var(--ink); color: var(--card); }
.copy-button:focus-visible, .brand:focus-visible, .nav-link:focus-visible, .theme-toggle:focus-visible, footer a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.copy-status { display: inline; margin-left: .75rem; color: var(--muted); font-size: .78rem; }

.lab-note { align-items: flex-start; max-width: 48rem; padding: 3rem 0; }
.note-index { margin: 0; color: var(--accent); font: 500 2rem/1 Georgia, serif; }
.lab-note div { max-width: 38rem; }
.lab-note h2 { margin: 0 0 .65rem; font: 500 clamp(1.4rem, 3vw, 2rem)/1.1 Georgia, serif; }
.lab-note p:last-child { margin: 0; color: var(--note-text); line-height: 1.7; }

.mechanism-badge {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .25rem .6rem;
  border: 1px solid var(--line);
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

footer { border-top: 1px solid var(--line); }
footer a { color: var(--ink); }

.history-hero { max-width: 50rem; padding: 3rem 0 4rem; }
.history-hero .eyebrow { display: block; }
.history-hero h1 { margin-top: 1.5rem; max-width: 14ch; }
.history-hero > p:last-child { max-width: 58ch; color: var(--note-text); line-height: 1.7; }
.history-list { display: grid; gap: 1rem; padding-bottom: 4rem; }
.history-card {
  display: grid;
  grid-template-columns: minmax(8rem, .35fr) 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(1.3rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: var(--card);
}
.history-meta { color: var(--muted); font-size: .78rem; line-height: 1.7; text-transform: uppercase; letter-spacing: .06em; }
.history-meta .mechanism-badge { display: inline-block; margin-top: .35rem; font-size: .68rem; }
.history-card h2 { max-width: 24ch; margin: 0; font: 500 clamp(1.7rem, 4vw, 3rem)/1.05 Georgia, serif; letter-spacing: -.035em; }
.history-punchline { margin: 1rem 0; color: var(--accent); font: 500 clamp(1.2rem, 2.5vw, 1.7rem)/1.2 Georgia, serif; }
.history-note { max-width: 65ch; margin: 0; color: var(--note-text); line-height: 1.65; }

@media (hover: hover) {
  .history-card:hover,
  .history-card:focus-within {
    border-left-color: var(--accent);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ecf3ef;
    --muted: #a8b5af;
    --paper: #111714;
    --card: #18211d;
    --accent: #ff8765;
    --note-text: #c3cec8;
    --line: #39463f;
    --shadow: 0 18px 60px rgb(0 0 0 / 28%);
  }
}

:root[data-theme="dark"] {
  --ink: #ecf3ef;
  --muted: #a8b5af;
  --paper: #111714;
  --card: #18211d;
  --accent: #ff8765;
  --note-text: #c3cec8;
  --line: #39463f;
  --shadow: 0 18px 60px rgb(0 0 0 / 28%);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (max-width: 38rem) {
  .status { font-size: 0; }
  .status-dot { margin: 0; }
  .masthead { padding-bottom: 1.5rem; }
  .joke-card { min-height: 32rem; }
  .eyebrow { align-items: flex-start; flex-direction: column; }
  .lab-note { flex-direction: column; }
  .masthead { align-items: flex-start; }
  .header-actions { align-items: flex-end; flex-direction: column-reverse; }
  .history-card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .copy-button { transition: background-color 150ms ease, color 150ms ease; }
  .history-card { transition: border-left-color 200ms ease; }
}