.tavern-docs {
  --serif: var(--sans);
  color-scheme: dark;
  background: var(--cream);
  color: var(--ink);
  font: 15px/1.95 var(--sans);
}

.tavern-docs :is(a, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}

.tavern-docs a { color: var(--gold); }
.tavern-docs a:hover { color: #ffe0a0; }

.tavern-docs .tutorial-header {
  max-width: 1200px;
  padding: 24px 36px;
  border-bottom: 2px solid var(--line);
  gap: 20px;
}

.tavern-docs .tutorial-brand { color: var(--ink); }
.tavern-docs .tutorial-brand img {
  border: 2px solid var(--line);
  border-radius: 2px;
  box-shadow: 3px 3px 0 #060907;
}
.tavern-docs .tutorial-brand strong {
  font: 700 22px/1.5 var(--sans);
  letter-spacing: 2px;
}
.tavern-docs .tutorial-brand small { color: var(--muted); }
.tavern-docs .tutorial-header nav.pages-nav { gap: 22px; }
.tavern-docs .pages-nav a { color: var(--muted); }
.tavern-docs .pages-nav a[aria-current="page"] { color: var(--gold); }

.tavern-docs :is(.return-link, .primary-link) {
  border: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: 3px 3px 0 #060907;
  transition: background-color .15s, border-color .15s;
}
.tavern-docs .return-link { background: var(--paper); color: var(--gold); }
.tavern-docs .pages-nav .return-link { color: var(--gold); }
.tavern-docs .primary-link {
  color: var(--on-accent);
  background: var(--gold);
  font-weight: 700;
  min-height: 46px;
}
.tavern-docs .primary-link:hover {
  color: var(--on-accent);
  background: #f3cc81;
  border-color: #f3cc81;
}
.tavern-docs .return-link:hover { background: var(--green-soft); }
.tavern-docs .skip-link { color: var(--gold); border-width: 2px; }

.tavern-docs .tutorial-intro {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  padding: 56px 0 48px;
  border-bottom: 2px solid var(--line);
}
.tavern-docs .tutorial-intro h1 {
  font: 700 clamp(32px, 3.2vw, 44px)/1.5 var(--sans);
  letter-spacing: 1px;
  color: var(--ink);
}
.tavern-docs .intro-copy { font-size: 15px; line-height: 2; }
.tavern-docs .intro-note {
  padding: 20px 22px;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 2px;
  box-shadow: 6px 6px 0 #060907;
  background: var(--paper);
}
.tavern-docs .intro-note::before {
  content: "";
  display: block;
  height: 100px;
  margin: -20px -22px 20px;
  border-bottom: 2px solid var(--line);
  background: #121714 url("assets/tavern/arcane-library.webp") center 49% / cover no-repeat;
  image-rendering: pixelated;
}
.tavern-docs .note-label { color: var(--gold); font-size: 14px; }
.tavern-docs .intro-note ol { font-size: 13px; }
.tavern-docs .intro-note > a { font-size: 12px; }
.tavern-docs .version-chip {
  border: 2px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
  letter-spacing: .5px;
}
.tavern-docs .version-chip b { font: 11px/1.8 var(--pixel-font); color: var(--gold); }
.tavern-docs .hero-facts { gap: 8px; }
.tavern-docs .hero-facts span { border: 1px solid var(--line); color: #ccc8b6; }

.tavern-docs :is(.page-section, .guide-section) { scroll-margin-top: 24px; }
.tavern-docs .page-section { padding: 44px 0; }
.tavern-docs :is(.page-lead, .section-heading h2, .audience-card h3, .doc-links h3, .cta-band h2, .tutorial-finish h3, .release-side h3) {
  font-family: var(--sans);
}
.tavern-docs .page-lead { font-size: 17px; color: #dcd6c6; }
.tavern-docs .section-heading { align-items: center; gap: 16px; }
.tavern-docs .section-heading h2 { font-weight: 700; font-size: 26px; }
.tavern-docs .section-number {
  display: grid;
  place-items: center;
  align-self: center;
  flex-shrink: 0;
  width: 43px;
  height: 43px;
  font: 11px/1 var(--pixel-font);
  opacity: 1;
  border: 2px solid var(--line);
  background: var(--paper);
  box-shadow: 3px 3px 0 #060907;
}
.tavern-docs .feature-grid { gap: 16px; border: 0; background: none; }
.tavern-docs .feature-card {
  border: 2px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 4px 4px 0 #060907;
}
.tavern-docs .feature-card:nth-child(even) { background: var(--panel); }
.tavern-docs .feature-index { font: 11px/1.8 var(--pixel-font); }
.tavern-docs .feature-card h3 { font-size: 16px; color: var(--ink); }
.tavern-docs :is(.feature-card, .audience-card, .doc-links) p { font-size: 14px; }
.tavern-docs :is(.audience-card, .doc-links > a, .cta-band, .tutorial-finish, .mode-compare > article, .tool-reference) {
  border: 2px solid var(--line);
  border-radius: 2px;
  box-shadow: 4px 4px 0 #060907;
  background: var(--paper);
}
.tavern-docs .audience-card { border-top: 3px solid var(--gold); }
.tavern-docs :is(.audience-card, .doc-links) h3 { font-weight: 600; }
.tavern-docs .audience-card ul { font-size: 13px; }
.tavern-docs .doc-links > a { color: var(--ink); }
.tavern-docs .doc-links > a:hover { color: var(--ink); border-color: var(--gold); }
.tavern-docs .cta-band { border-left: 4px solid var(--gold); }
.tavern-docs .cta-band h2 { font-size: 23px; font-weight: 600; }
.tavern-docs .cta-band p { font-size: 14px; }
.tavern-docs .release { gap: 28px; }
.tavern-docs .release-tag { border-width: 2px; color: var(--gold); }
.tavern-docs .release-side h3 { font-size: 18px; font-weight: 600; }
.tavern-docs .release-side p { font-size: 12px; }
.tavern-docs .change-list > li { font-size: 14px; }
.tavern-docs .change-kind {
  height: auto;
  min-height: 25px;
  align-self: start;
  border: 1px solid #726344;
  color: var(--gold);
  background: #302c20;
}
.tavern-docs .change-kind.fix { color: #b4d8b0; background: #203026; border-color: #47684e; }
.tavern-docs .change-kind.note { color: #c5c4b5; background: var(--panel); border-color: var(--line); }
.tavern-docs .version-line > li::before { border-radius: 0; }
.tavern-docs .limit-list > li { border-width: 2px; font-size: 14px; }

.tavern-docs .tutorial-layout { grid-template-columns: 225px minmax(0, 1fr); gap: 40px; }
.tavern-docs .tutorial-sidebar { top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-color: var(--line) var(--panel); }
.tavern-docs .tutorial-contents {
  padding: 12px;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 2px;
  background: var(--panel);
}
.tavern-docs .tutorial-contents summary { color: var(--gold); }
.tavern-docs .tutorial-contents nav { gap: 3px; }
.tavern-docs .tutorial-contents nav > a { padding: 9px 7px; line-height: 1.8; gap: 10px; }
.tavern-docs .tutorial-contents nav > a:hover { color: var(--gold); background: var(--green-soft); }
.tavern-docs .tutorial-contents nav span { font: 9px/1.8 var(--pixel-font); flex-shrink: 0; }
.tavern-docs .sidebar-note { padding: 0 12px; }
.tavern-docs .step-list > li::before { border-width: 2px; border-radius: 2px; font: 9px/1 var(--pixel-font); }
.tavern-docs .step-list p { font-size: 14px; }
.tavern-docs .guide-tip { background: #252c20; border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.tavern-docs .guide-tip strong { color: var(--gold); }
.tavern-docs .guide-tip p { font-size: 13px; color: #d6d3c3; }
.tavern-docs .entry-path { padding: 12px 15px; font-size: 12px !important; border-left: 3px solid var(--gold); }
.tavern-docs .mode-label { border-color: #726344; background: #302c20; }
.tavern-docs .structure-line > span { font-family: var(--sans); }
.tavern-docs .structure-line small { font-size: 11px; }
.tavern-docs .option-number { color: var(--on-accent); background: var(--gold); font: 12px var(--pixel-font); border: 2px solid #f3cc81; }
.tavern-docs :is(.mode-compare, .guide-columns, .storage-facts, .writing-options) p { font-size: 14px; }
.tavern-docs .tool-reference h4 { color: var(--gold); font-size: 13px; }
.tavern-docs .tool-reference p { font-size: 13px; }
.tavern-docs .tutorial-finish h3 { font-weight: 600; }
.tavern-docs .tutorial-footer { margin-top: 30px; border-top: 2px solid var(--line); }

@media (max-width: 1000px) {
  .tavern-docs .tutorial-header { flex-wrap: wrap; }
  .tavern-docs .tutorial-header nav.pages-nav { flex-wrap: wrap; }
  .tavern-docs .tutorial-intro { gap: 28px; grid-template-columns: minmax(0, 1fr) 280px; }
  .tavern-docs .tutorial-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 760px) {
  .tavern-docs .tutorial-header { padding: 20px 22px; gap: 20px; }
  .tavern-docs .tutorial-header nav.pages-nav { width: 100%; gap: 16px; }
  .tavern-docs .tutorial-header nav.pages-nav > a:first-child { display: inline-flex; }
  .tavern-docs .tutorial-header nav.pages-nav .return-link { margin-left: auto; }
  .tavern-docs .tutorial-intro { display: block; padding: 36px 0; }
  .tavern-docs .tutorial-intro h1 { font-size: 32px; }
  .tavern-docs .intro-copy { font-size: 14px; }
  .tavern-docs .intro-note { margin-top: 30px; padding: 20px 22px; }
  .tavern-docs .intro-note::before { height: 110px; }
  .tavern-docs .tutorial-layout { display: block; }
  .tavern-docs .tutorial-sidebar { position: static; max-height: none; overflow: visible; }
  .tavern-docs .tutorial-contents nav { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 360px; overflow-y: auto; }
  .tavern-docs .tutorial-contents nav > a { min-width: 0; overflow-wrap: anywhere; padding: 9px 3px; gap: 8px; }
  .tavern-docs .section-heading { gap: 13px; }
  .tavern-docs .section-heading h2 { font-size: 23px; }
  .tavern-docs .section-number { width: 36px; height: 36px; font-size: 9px; }
  .tavern-docs .page-section { padding: 34px 0; }
  .tavern-docs .change-list > li { font-size: 13px; }
  .tavern-docs .structure-line small { font-size: 10px; }
  .tavern-docs .intro-actions { gap: 18px; }
  .tavern-docs .tutorial-footer { gap: 18px; }
}

@media (max-width: 420px) {
  .tavern-docs .tutorial-header { padding: 18px 18px; }
  .tavern-docs .tutorial-brand strong { font-size: 21px; }
  .tavern-docs .tutorial-header nav.pages-nav { gap: 12px 16px; font-size: 12px; }
  .tavern-docs .tutorial-header nav.pages-nav .return-link { margin-left: 0; }
  .tavern-docs .tutorial-intro h1 { font-size: 28px; }
  .tavern-docs .intro-copy { font-size: 14px; }
  .tavern-docs .section-heading h2 { font-size: 21px; }
  .tavern-docs .hero-facts span { font-size: 10px; padding: 6px 8px; }
  .tavern-docs .feature-card { padding: 20px; }
  .tavern-docs .tutorial-contents nav > a { font-size: 11px; gap: 7px; }
  .tavern-docs .tutorial-contents nav span { font-size: 8px; }
  .tavern-docs .structure-line { flex-wrap: wrap; gap: 8px; }
  .tavern-docs .structure-line > span { min-width: 48px; font-size: 13px; }
  .tavern-docs .structure-line small { font-size: 9px; }
  .tavern-docs .cta-band-actions { gap: 12px; }
}

@media print {
  .tavern-docs {
    --cream: #fff;
    --paper: #fff;
    --panel: #fff;
    --ink: #111;
    --muted: #333;
    --gold: #604c27;
    --green: #604c27;
    --green-soft: #fff;
    --line: #bbb;
    color-scheme: light;
  }
  .tavern-docs .intro-note::before { display: none; }
  .tavern-docs :is(.feature-card, .audience-card, .doc-links > a, .intro-note, .cta-band, .tutorial-finish, .mode-compare > article, .tool-reference, .section-number) { box-shadow: none; }
  .tavern-docs :is(.page-lead, .guide-tip p, .hero-facts span, .guide-tip strong, a) { color: #111; }
  .tavern-docs :is(.guide-tip, .change-kind, .mode-label) { background: #fff; color: #111; }
}