:root {
  color-scheme: light dark;
  --margo-surface: #ffffff;
  --margo-surface-alt: #f5f7fa;
  --margo-text: #17202a;
  --margo-text-strong: #0b1220;
  --margo-accent: #155eef;
  --margo-outline: #7b8794;
  --margo-gap: 1.5rem;
  --margo-reading-measure: 75ch;
}
[data-color-mode="dark"], html.dark {
  --margo-surface: #111827;
  --margo-surface-alt: #1f2937;
  --margo-text: #e5e7eb;
  --margo-text-strong: #ffffff;
  --margo-accent: #8ab4ff;
  --margo-outline: #9ca3af;
}
* { box-sizing: border-box; }
html { background: var(--margo-surface); color: var(--margo-text); }
body { margin: 0; min-inline-size: 0; font-family: system-ui, sans-serif; line-height: 1.6; }
.margo-skip-link { position: absolute; inset-inline-start: 0.75rem; inset-block-start: 0.75rem; transform: translateY(-200%); padding: 0.75rem 1rem; background: var(--margo-surface); color: var(--margo-text-strong); outline: 3px solid var(--margo-accent); z-index: 10; }
.margo-skip-link:focus { transform: none; }
.margo-frame { display: grid; gap: var(--margo-gap); max-inline-size: 100%; padding: 1rem; }
.margo-frame > .margo-area { min-inline-size: 0; }
.margo-area--main-content { inline-size: 100%; margin-inline: auto; }
.margo-document { color: var(--margo-text); }
.margo-document a { color: var(--margo-accent); }
:where(.margo-frame :focus-visible, .margo-document :focus-visible) { outline: 3px solid var(--margo-accent); outline-offset: 2px; }
@media (max-width: 719px) { .margo-frame { padding: 0.75rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
@media print { .margo-skip-link { display: none !important; } .margo-frame { display: block; padding: 0; } .margo-area--main-content { max-inline-size: none; } }

.margo-document__metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  min-inline-size: 0;
}
.margo-document__metadata > * { min-inline-size: 0; }
.margo-document__publication-dates {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.8rem;
  min-inline-size: 0;
}
.margo-document__publication-date {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  break-inside: avoid;
}
.margo-document__publication-label { font-weight: 650; }
.margo-document__publication-date time { overflow-wrap: anywhere; }
.margo-document__publication-separator {
  color: var(--margo-outline, var(--color-outline, #7b8794));
  font-weight: 700;
}
@media print {
  .margo-document__publication-dates { break-inside: avoid; }
}