/* Shared neutral palette and appearance control. app.js owns theme state. */
body,
body.editorial {
  --bg: #fff;
  --ink: #111;
  --fg: #111;
  --muted: #626262;
  --rule: #d4d4d4;
  --tint: #f5f5f5;
  --accent: #111;
  --accent-soft: #e6e6e6;
  color-scheme: light;
  background: var(--bg);
  color: var(--ink);
}

body.dark,
body.editorial.dark {
  --bg: #111;
  --ink: #f3f3f3;
  --fg: #f3f3f3;
  --muted: #b0b0b0;
  --rule: #454545;
  --tint: #1b1b1b;
  --accent: #f3f3f3;
  --accent-soft: #444;
  color-scheme: dark;
}

.ink-art { filter: none; }
body.dark .ink-art { filter: invert(1); }
#darkmode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

#darkmode-toggle:hover { border-color: var(--ink); }
#darkmode-toggle[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--tint);
  font-weight: 600;
}
#darkmode-toggle:focus-visible,
.essay-toolbar a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.essay-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}

.editorial-essay .essay-toolbar .back-link {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.95rem;
}

.editorial-essay .essay-art { aspect-ratio: 3 / 2; }

@media (max-width: 480px) {
  .essay-toolbar { margin-bottom: 2rem; gap: 1rem; }
  .editorial-essay .essay-toolbar .back-link { font-size: 0.88rem; }
  .editorial-essay .essay-art { width: 210px; max-height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  body, #darkmode-toggle { transition: none; }
}