@font-face {
  font-family: "Routed Gothic";
  src: url("../font/routed-gothic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg-page: #f9f9f9;
  --bg-content: #ffffff;
  --bg-thumb: #ffffff;
  --bg-infobox-title: #dfe4ea;
  --bg-infobox-section: #eaecf0;
  --bg-note-title: #dfe7f2;
  --bg-note-body: #f2f5f9;
  --text: #202122;
  --text-soft: #404244;
  --text-muted: #54595d;
  --link: #002bb8;
  --link-visited: #5a3696;
  --border: #aaaaaa;
  --border-soft: #e2e5e8;
  --border-thumb: #cccccc;
  --status-verified-bg: #d6efd8;
  --status-verified-fg: #14532d;
  --status-documented-bg: #dbe7fa;
  --status-documented-fg: #1e3a8a;
  --status-disputed-bg: #f9e3a8;
  --status-disputed-fg: #7a5600;
  --status-unverified-bg: #2b2b2b;
  --status-unverified-fg: #f0f0f0;
  --status-speculative-bg: #f8d7d7;
  --status-speculative-fg: #7f1d1d;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #14161a;
  --bg-content: #1f2226;
  --bg-thumb: #26292e;
  --bg-infobox-title: #2e3440;
  --bg-infobox-section: #292e35;
  --bg-note-title: #26303f;
  --bg-note-body: #1b2028;
  --text: #e8eaed;
  --text-soft: #b6babf;
  --text-muted: #9aa0a6;
  --link: #7aa0ff;
  --link-visited: #b1a1e0;
  --border: #3c4044;
  --border-soft: #34383d;
  --border-thumb: #4a4f55;
  --status-verified-bg: #1d3a24;
  --status-verified-fg: #8fd19a;
  --status-documented-bg: #1e2f4d;
  --status-documented-fg: #8fb4f8;
  --status-disputed-bg: #46380f;
  --status-disputed-fg: #e6c766;
  --status-unverified-bg: #1a1a1a;
  --status-unverified-fg: #d4d4d4;
  --status-speculative-bg: #46201f;
  --status-speculative-fg: #f0a8a8;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-page);
  color: var(--text);
  font-family: sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:visited {
  color: var(--link-visited);
}

a:hover,
a:focus {
  text-decoration: underline;
}

h1,
h2 {
  font-family: "Routed Gothic", sans-serif;
  font-weight: normal;
  line-height: 1.25;
  margin: 1em 0 0.5em 0;
  padding-bottom: 0.17em;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

h1 {
  font-size: 1.85rem;
}

main > h1:first-child {
  margin-top: 0;
}

h2 {
  font-size: 1.4rem;
}

h3,
h4,
h5,
h6 {
  font-family: sans-serif;
  font-weight: bold;
  line-height: 1.3;
  margin: 0.85em 0 0.35em 0;
}

h3 {
  font-size: 1.15rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.9rem;
}

h6 {
  font-size: 0.85rem;
}

p {
  margin: 0.5em 0 0.85em 0;
}

.site-layout {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem 0.75rem 0.75rem 0;
}

.sidebar {
  width: 190px;
  min-width: 190px;
  flex-shrink: 0;
  padding: 0 0.65rem;
  box-sizing: border-box;
}

.sidebar-logo {
  display: block;
  margin: 0 auto 0.65rem auto;
  text-align: center;
}

.sidebar-image {
  display: block;
  max-width: 135px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.nav-portlet {
  background-color: var(--bg-content);
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  font-size: 0.825rem;
  line-height: 1.45;
}

.theme-portlet {
  margin-top: 0.5rem;
  text-align: center;
}

#theme-toggle {
  width: 100%;
  background-color: var(--bg-content);
  color: var(--link);
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  font-family: sans-serif;
  font-size: 0.825rem;
  line-height: 1.45;
  cursor: pointer;
}

#theme-toggle:hover,
#theme-toggle:focus {
  text-decoration: underline;
}

.menu-toggle {
  display: none;
}

.nav-folder {
  margin: 0.15rem 0;
}

.nav-folder > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-folder > summary::-webkit-details-marker {
  display: none;
}

.nav-folder > summary::before {
  content: "▸ ";
  font-size: 0.75em;
  color: var(--text-muted);
}

.nav-folder[open] > summary::before {
  content: "▾ ";
}

.nav-children {
  padding-left: 0.9rem;
}

.nav-item {
  margin: 0.15rem 0;
}

.nav-item a[aria-current="page"] {
  font-weight: bold;
  color: var(--text);
}

main {
  flex: 1;
  min-width: 0;
  background-color: var(--bg-content);
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem 2rem 1.5rem;
  box-sizing: border-box;
}

main::after {
  content: "";
  display: table;
  clear: both;
}

.infobox {
  float: right;
  clear: right;
  width: 280px;
  max-width: 100%;
  margin: 0.25rem 0 1rem 1.25rem;
  padding: 0.2rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.infobox-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.infobox-title {
  font-family: "Routed Gothic", sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
  text-align: center;
  background-color: var(--bg-infobox-title);
  border: 1px solid var(--border);
  padding: 0.3rem 0.5rem;
}

.infobox-archive-status {
  text-align: center;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: underline dashed;
  text-underline-offset: 0.2em;
  cursor: help;
}

tr:last-child .infobox-archive-status {
  border-bottom: none;
}

.status-verified {
  background-color: var(--status-verified-bg);
  color: var(--status-verified-fg);
}

.status-documented {
  background-color: var(--status-documented-bg);
  color: var(--status-documented-fg);
}

.status-disputed {
  background-color: var(--status-disputed-bg);
  color: var(--status-disputed-fg);
}

.status-unverified {
  background-color: var(--status-unverified-bg);
  color: var(--status-unverified-fg);
}

.status-speculative {
  background-color: var(--status-speculative-bg);
  color: var(--status-speculative-fg);
}

.infobox-image-cell {
  padding: 0.45rem 0.25rem;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}

.infobox-image {
  margin: 0;
  text-align: center;
}

.infobox-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: var(--bg-thumb);
  border: 1px solid var(--border-thumb);
  padding: 2px;
  box-sizing: border-box;
}

.infobox-caption {
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-top: 0.3rem;
}

.infobox-section-title {
  font-family: "Routed Gothic", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  text-align: center;
  background-color: var(--bg-infobox-section);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
}

.infobox-field th,
.infobox-field td {
  vertical-align: top;
  padding: 0.25rem 0.45rem;
  border-bottom: 1px solid var(--border-soft);
}

.infobox-field:last-child th,
.infobox-field:last-child td {
  border-bottom: none;
}

.infobox-label {
  width: 38%;
  text-align: left;
  font-weight: bold;
  border-right: 1px solid var(--border-soft);
}

.infobox-value {
  text-align: left;
}

.infobox-list {
  margin: 0;
  padding-left: 1.15rem;
}

.see-also-list {
  margin: 0.4em 0 0 0;
  padding-left: 1.5rem;
}

blockquote.archival-note {
  display: flow-root;
  margin: 1rem 0;
  padding: 0;
  background-color: var(--bg-note-body);
  border: 1px solid var(--border);
}

.archival-note-title {
  font-family: "Routed Gothic", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: var(--bg-note-title);
  border-bottom: 1px solid var(--border);
  padding: 0.25rem 0.6rem;
  margin: 0;
}

.archival-note > *:not(.archival-note-title) {
  margin-left: 0.6rem;
  margin-right: 0.6rem;
}

.archival-note > p:not(.archival-note-title),
.archival-note > ul,
.archival-note > ol {
  margin-top: 0.5rem;
}

.archival-note > :last-child {
  margin-bottom: 0.6rem;
}

.site-footer {
  margin-left: 190px;
  padding: 0 0.75rem 1.5rem 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 768px) {
  .site-layout {
    display: block;
    padding: 0.5rem;
  }

  .sidebar {
    width: 100%;
    min-width: 0;
    padding: 0;
    margin-bottom: 0.5rem;
  }

  .sidebar-logo,
  .sidebar-image {
    display: none;
  }

  .menu-toggle {
    display: inline-block;
    background-color: var(--bg-content);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.3rem 0.65rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  .nav-menu {
    display: none;
    margin-top: 0.35rem;
  }

  .nav-menu.is-open {
    display: block;
  }

  main {
    padding: 0.9rem 1rem 1.5rem 1rem;
  }

  .infobox {
    float: none;
    width: 100%;
    margin: 0 0 1.25rem 0;
  }

  .site-footer {
    margin-left: 0;
    padding: 0.25rem 0.5rem 1.25rem 0.5rem;
  }
}
