:root {
  --ink: #111827;
  --brand: #CC8800;
  --poster: #C55221;
  --paper: #FFF8ED;
  --utility: #FFFFFF;
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --rule: #d8cdbd;
}
body { color: var(--ink); background: var(--paper); }
header { background: var(--utility); border-top: 8px solid var(--brand); border-bottom: 1px solid var(--ink); }
header > div > a { color: var(--ink); text-decoration: none; }
header > div > a span { border-left: 1px solid var(--ink); padding-left: 24px; }
nav details { border: 1px solid var(--rule); background: var(--paper); }
nav summary { background: var(--utility); }
nav details[open] summary { border-bottom: 1px solid var(--rule); }
nav li a { color: var(--ink); text-decoration: none; }
nav li a[aria-current="page"] { background: var(--brand); color: var(--ink); font-weight: 600; }
nav li a:hover, summary:hover { background: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
nav li a[aria-current="page"]:hover { background: var(--brand); }
[data-surface="paper"] { background: var(--paper); }
[data-surface="white"] { background: var(--utility); border-block: 1px solid var(--rule); }
[data-surface="poster"] { background: var(--poster); color: var(--utility); }
[data-surface="danger"] { background: var(--utility); border-left: 8px solid var(--danger); border-block: 1px solid var(--danger); }
[data-surface="danger"] h2 { color: var(--danger); }
section:not([data-hero]) > [data-wrap] > h2 { padding-top: 16px; border-top: 4px solid var(--brand); }
[data-hero] aside, [data-layout="split"] aside { background: var(--utility); color: var(--ink); border-left: 8px solid var(--brand); }
[data-layout="cards"] > article { background: var(--utility); border: 1px solid var(--rule); }
[data-layout="cards"] > article + article { border-left: 0; }
dd { border-bottom: 1px solid var(--rule); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
p a:hover, dd a:hover { text-decoration-thickness: 3px; }
[data-action] { color: var(--ink); background: var(--brand); border: 1px solid var(--ink); border-radius: 2px; text-decoration: none; }
[data-action]:hover { background: var(--paper); text-decoration: underline; }
[data-skip] { background: var(--ink); color: var(--utility); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
[data-surface="poster"] a:focus-visible { outline-color: var(--utility); }
[data-surface="poster"] aside a:focus-visible { outline-color: var(--ink); }
fieldset { border: 1px solid var(--ink); background: var(--utility); }
legend { color: var(--ink); }
input[type="checkbox"] { background: var(--utility); border: 2px solid var(--ink); border-radius: 0; }
input[type="checkbox"]:checked { background: var(--success); }
input[type="checkbox"]:checked::after { border-color: var(--utility); }
label:has(input:checked) { text-decoration: underline; text-underline-offset: 4px; }
[data-write] { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
footer { color: var(--utility); background: var(--ink); border-top: 8px solid var(--brand); }
footer a:focus-visible { outline-color: var(--utility); }
::selection { color: var(--ink); background: var(--brand); }
@media (max-width: 800px) {
  header > div > a span { padding-left: 16px; }
  [data-layout="cards"] > article + article { border-left: 1px solid var(--rule); border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  body, section, [data-surface="poster"], fieldset { color: var(--ink) !important; background: var(--utility) !important; }
  section > [data-wrap] > h2 { border-top: 0 !important; padding-top: 0 !important; }
  input[type="checkbox"]:checked { background: var(--utility); }
  input[type="checkbox"]:checked::after { border-color: var(--ink); }
}