:root {
  --cream: #f4f0e8;
  --warm-white: #faf8f4;
  --charcoal: #1c1c1c;
  --ink: #2a2a2a;
  --mid-gray: #555;
  --light-gray: #6b6b6b;
  --rule-gray: #d0ccc4;
  --amber: #c8760a;
  --amber-light: #f5c842;
  --amber-pale: #fef3d0;
  --col: 760px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--charcoal);
  font: 16px/1.6 'Crimson Pro', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 0.92em/1 'JetBrains Mono', ui-monospace, monospace; }

/* ── Masthead ── */
.masthead {
  background: var(--charcoal);
  color: var(--cream);
  border-bottom: 3px solid var(--amber);
  position: sticky;
  top: 0;
  z-index: 10;
}
.masthead-inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--cream);
  font: 600 16px/1 'Playfair Display', Georgia, serif;
  letter-spacing: 0.04em;
}
.brand-mark { color: var(--amber); font-size: 14px; }
.brand-name { font-style: italic; }
.masthead-nav {
  font: 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.masthead-nav a, .masthead-nav .btn-link {
  color: #cfcbc4;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.masthead-nav a:hover, .masthead-nav .btn-link:hover { color: var(--amber-light); }
.masthead-sep { opacity: 0.4; }
.who { color: #999; }

/* ── Layout ── */
main {
  max-width: var(--col);
  margin: 0 auto;
  padding: 36px 24px 72px;
  min-height: 60vh;
}
.placeholder {
  color: var(--light-gray);
  font-style: italic;
  padding: 48px 0;
  text-align: center;
}

/* ── Sectioning ── */
.eyebrow {
  font: 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--amber);
  opacity: 0.5;
}
h1.page-title {
  font: 700 32px/1.2 'Playfair Display', Georgia, serif;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
h2.section {
  font: 700 22px/1.3 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
  margin: 28px 0 16px;
}

/* ── Group list ── */
.group-list { list-style: none; padding: 0; margin: 0; }
.group-row {
  border-bottom: 1px solid var(--rule-gray);
  padding: 16px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
}
.group-row:last-child { border-bottom: 0; }
.group-row a.name {
  font: 600 17px/1.2 'Crimson Pro', Georgia, serif;
  color: var(--charcoal);
}
.group-row a.name:hover { color: var(--amber); text-decoration: none; }
.group-row .meta {
  font: 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: var(--light-gray);
  text-align: right;
}
.group-row .summary {
  grid-column: 1 / 2;
  color: var(--mid-gray);
  font-size: 15px;
  font-style: italic;
}

/* ── Article list ── */
.article-table { width: 100%; border-collapse: collapse; }
.article-table th, .article-table td {
  border-bottom: 1px solid var(--rule-gray);
  padding: 12px 8px;
  text-align: left;
  vertical-align: top;
}
.article-table th {
  font: 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light-gray);
  border-bottom: 2px solid var(--charcoal);
}
.article-table td.subject a {
  font: 600 16px/1.3 'Crimson Pro', Georgia, serif;
  color: var(--charcoal);
}
.article-table td.subject a:hover { color: var(--amber); }
.article-table td.from {
  font-size: 14px;
  color: var(--mid-gray);
}
.article-table td.date {
  font: 11px/1 'JetBrains Mono', ui-monospace, monospace;
  color: var(--light-gray);
  white-space: nowrap;
}
.article-table tr:hover td { background: var(--warm-white); }

/* ── Article view ── */
.article-meta {
  background: var(--warm-white);
  border: 1px solid var(--rule-gray);
  border-left: 3px solid var(--amber);
  padding: 14px 18px;
  margin: 0 0 24px;
  font: 13px/1.6 'JetBrains Mono', ui-monospace, monospace;
  color: var(--mid-gray);
}
.article-meta .label { color: var(--charcoal); display: inline-block; min-width: 110px; }
.article-meta .label::after { content: ':'; color: var(--amber); margin-right: 6px; }
.article-body {
  white-space: pre-wrap;
  font: 16px/1.7 'Crimson Pro', Georgia, serif;
  color: var(--ink);
  margin: 0 0 32px;
}
.article-actions {
  display: flex;
  gap: 12px;
  margin: 24px 0 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-gray);
}

/* ── Buttons ── */
button.primary, .btn.primary {
  background: var(--charcoal);
  color: var(--cream);
  border: 1px solid var(--charcoal);
  padding: 10px 20px;
  font: 600 13px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
button.primary:hover, .btn.primary:hover { background: var(--amber); border-color: var(--amber); }
button, .btn {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--rule-gray);
  padding: 10px 20px;
  font: 600 13px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
button:hover, .btn:hover { border-color: var(--amber); color: var(--amber); }
.btn-link {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* ── Dialog forms ── */
dialog {
  border: 0;
  border-top: 3px solid var(--amber);
  padding: 28px 32px;
  background: var(--warm-white);
  color: var(--charcoal);
  max-width: 520px;
  width: calc(100vw - 48px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
dialog::backdrop { background: rgba(0,0,0,0.5); }
dialog h2 {
  font: 700 22px/1.2 'Playfair Display', Georgia, serif;
  margin: 0 0 8px;
}
dialog .muted {
  color: var(--mid-gray);
  font-size: 14px;
  margin: 0 0 18px;
}
dialog label {
  display: block;
  margin: 14px 0;
  font: 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light-gray);
}
dialog input, dialog textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rule-gray);
  background: white;
  color: var(--charcoal);
  font: 15px/1.5 'Crimson Pro', Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
}
dialog input:focus, dialog textarea:focus {
  outline: none;
  border-color: var(--amber);
}
dialog textarea {
  font: 15px/1.6 ui-monospace, 'JetBrains Mono', monospace;
  resize: vertical;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-gray);
}
.error {
  color: #c0392b;
  font-size: 14px;
  margin: 12px 0 0;
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--rule-gray);
  margin-top: 56px;
  padding: 20px 24px;
  text-align: center;
}
.footnote {
  font: 11px/1.6 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: var(--light-gray);
}

@media (max-width: 720px) {
  .masthead-nav { font-size: 11px; gap: 10px; }
  main { padding: 24px 16px 48px; }
  h1.page-title { font-size: 26px; }
  .article-meta { font-size: 12px; }
  .article-body { font-size: 15px; }
  .article-table th:nth-child(3), .article-table td.date { display: none; }
}