/* Shared layout and theme. Each catalog category may add its own stylesheet. */
:root {
  color-scheme: light;
  --paper: #f8f7f4;
  --ink: #202b47;
  --muted: #666777;
  --line: #dad8df;
  --accent: #59408f;
  --gold: #966621;
  --quiet: #eeebf2;
  --light-image: block;
  --dark-image: none;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #151e34;
    --ink: #f0edf5;
    --muted: #acb1c3;
    --line: #354059;
    --accent: #b69bdd;
    --gold: #f2cf81;
    --quiet: #202b47;
    --light-image: none;
    --dark-image: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151e34;
  --ink: #f0edf5;
  --muted: #acb1c3;
  --line: #354059;
  --accent: #b69bdd;
  --gold: #f2cf81;
  --quiet: #202b47;
  --light-image: none;
  --dark-image: block;
}
* { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
button { font: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }
[hidden] { display: none !important; }
.wrap { width: min(1080px, calc(100% - 112px)); margin-inline: auto; }
.site-header {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font: 28px/1 var(--serif);
  letter-spacing: -.065em;
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav { display: flex; align-items: center; gap: 34px; }
.nav-link {
  position: relative;
  padding: 12px 0;
  text-decoration: none;
  font-size: 14px;
  color: var(--muted);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--gold);
  bottom: 5px;
  left: 0;
  right: 0;
}
.site-main { flex: 1; padding-block: 72px 96px; }
.home-hero {
  min-height: 345px;
  display: grid;
  grid-template-columns: 1fr 360px;
  align-items: center;
  gap: 70px;
  padding: 10px 38px 34px 0;
}
.home-title {
  font: normal clamp(68px, 8vw, 112px)/1.04 var(--serif);
  letter-spacing: -.075em;
  margin-left: -.055em;
}
.home-tagline {
  margin-top: 26px;
  color: var(--muted);
  font-size: 19px;
  letter-spacing: .01em;
}
.home-emblem { display: block; width: 320px; justify-self: end; }
.home-directory { margin-top: 70px; }
.category-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.directory-entry { border-top: 1px solid var(--line); }
.directory-link { padding: 24px 0 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; text-decoration: none; }
.directory-count { grid-column: 1 / -1; color: var(--muted); font-size: 11px; letter-spacing: .12em; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.directory-title { font: 28px/1.3 var(--serif); letter-spacing: -.025em; }
.directory-arrow { color: var(--accent); font-size: 24px; font-weight: 300; padding-right: 3px; }
.directory-link:hover .directory-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.category-heading { padding-block: 6px 52px; }
.category-heading-line { display: flex; align-items: flex-start; gap: 20px; }
.category-heading h1 { font: normal clamp(48px, 5vw, 64px)/1.15 var(--serif); letter-spacing: -.05em; }
.category-count { color: var(--muted); font-size: 12px; letter-spacing: .08em; padding-top: 10px; font-variant-numeric: tabular-nums; }
.entry-list { border-top: 1px solid var(--line); }
.entry { display: flex; align-items: center; gap: 30px; padding-block: 36px; border-bottom: 1px solid var(--line); }
.entry-copy { flex: 1; min-width: 0; }
.entry-heading { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 8px; }
.entry h2 { font: normal 30px/1.25 var(--serif); letter-spacing: -.035em; }
.entry-description { max-width: 620px; color: var(--muted); margin-top: 12px; font-size: 16px; line-height: 1.7; }
.item-status { color: var(--muted); font-size: 11px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.item-status::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--gold); }
.item-image { display: block; width: 112px; flex: 0 0 112px; }
.item-image img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--item-image-radius, 0); }
.image-light { display: var(--light-image); }
.image-dark { display: var(--dark-image); }
.site-footer { padding-block: 23px 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-name { color: var(--muted); font-size: 12px; letter-spacing: .015em; }
.theme-control { padding: 0; margin: 0; border: 0; display: flex; align-items: center; gap: 14px; }
.theme-label { color: var(--muted); font-size: 11px; }
.theme-options { display: flex; gap: 2px; }
.theme-options button { border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; padding: 6px 9px; border-radius: 3px; font-size: 11px; min-height: 32px; }
.theme-options button:hover { color: var(--ink); }
.theme-options button[aria-pressed="true"] { background: var(--quiet); color: var(--ink); border-color: var(--line); }
.not-found { padding-block: 45px 120px; }
.not-found-code { color: var(--gold); font-size: 12px; letter-spacing: .1em; margin-bottom: 24px; }
.not-found h1 { font: normal clamp(48px, 6vw, 72px)/1.15 var(--serif); letter-spacing: -.055em; }
.return-link { display: inline-block; margin-top: 28px; font-size: 15px; color: var(--accent); }
.return-link span { margin-left: 16px; }
.skip-link { position: absolute; left: 16px; top: -100px; background: var(--ink); color: var(--paper); padding: 10px 18px; z-index: 10; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.site-main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1500px) {
  .home-hero { min-height: 390px; }
  .site-main { padding-top: 90px; }
}
@media (max-width: 850px) {
  .wrap { width: calc(100% - 72px); }
  .home-hero { grid-template-columns: 1fr 240px; gap: 30px; padding-right: 0; min-height: 290px; }
  .home-emblem { width: 240px; }
  .home-title { font-size: 80px; }
  .home-tagline { font-size: 17px; }
  .home-directory { margin-top: 48px; }
  .category-directory { gap: 24px; }
  .theme-label { display: none; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 48px); }
  .site-header { min-height: 88px; gap: 16px; }
  .wordmark { font-size: 25px; }
  .primary-nav { gap: 19px; }
  .nav-link { font-size: 12px; }
  .site-main { padding-block: 40px 64px; }
  .home-hero { grid-template-columns: 1fr; gap: 30px; text-align: center; padding: 0; min-height: 0; }
  .home-copy { grid-row: 2; }
  .home-title { font-size: 68px; }
  .home-tagline { margin-top: 18px; font-size: 16px; }
  .home-emblem { grid-row: 1; justify-self: center; width: 200px; }
  .home-directory { margin-top: 48px; }
  .category-directory { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--line); }
  .directory-link { padding: 19px 0; grid-template-columns: 34px 1fr auto; }
  .directory-count { grid-column: auto; margin: 0; font-size: 10px; }
  .directory-title { font-size: 25px; }
  .directory-arrow { font-size: 22px; }
  .category-heading { padding-block: 10px 36px; }
  .category-heading h1 { font-size: 48px; }
  .entry { gap: 22px; align-items: flex-start; padding-block: 28px; }
  .item-image { width: 72px; flex-basis: 72px; }
  .entry h2 { font-size: 27px; }
  .entry-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .entry-description { font-size: 14px; margin-top: 12px; }
  .item-status { font-size: 10px; }
  .site-footer { padding-block: 18px 24px; gap: 12px; }
  .footer-name { font-size: 10px; }
  .theme-options button { font-size: 10px; padding-inline: 7px; min-height: 34px; }
  .not-found { padding-block: 30px 100px; }
}
@media (max-width: 350px) {
  .wrap { width: calc(100% - 36px); }
  .primary-nav { gap: 13px; }
  .nav-link { font-size: 11px; }
  .wordmark { font-size: 23px; }
  .home-title { font-size: 60px; }
  .entry { gap: 16px; }
  .item-image { width: 56px; flex-basis: 56px; }
}