:root {
  color-scheme: light;
  --paper: #fbf8ef;
  --sheet: #fffdf7;
  --ink: #182a22;
  --muted: #525e54;
  --forest: #152921;
  --gold: #e8c988;
  --rule: #dfded1;
  --body-font: "DM Sans", system-ui, sans-serif;
  --title-font: "Instrument Serif", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.6 var(--body-font); }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #a56826; outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.04; }
h2 { font: 400 clamp(2.5rem, 5vw, 4rem)/1 var(--title-font); }
.shell { width: min(100% - 5rem, 73rem); margin-inline: auto; }
.skip-link { position: absolute; z-index: 5; top: .75rem; left: .75rem; background: var(--sheet); padding: .65rem 1rem; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { background: var(--sheet); }
.header-inner { min-height: 4.65rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font: 400 2rem/1 var(--title-font); text-decoration: none; }
.book-mark { width: 1.75rem; height: 1.75rem; position: relative; display: inline-block; border-radius: 50%; background: var(--forest); }
.book-mark::before, .book-mark::after { content: ""; position: absolute; top: .56rem; width: .43rem; height: .59rem; border: 1px solid var(--gold); }
.book-mark::before { left: .41rem; border-radius: 2px 2px 0 2px; transform: skewY(12deg); }
.book-mark::after { right: .41rem; border-radius: 2px 2px 2px 0; transform: skewY(-12deg); }
.site-header nav { display: flex; gap: clamp(1rem, 3.5vw, 2.75rem); }
.site-header nav a, .header-source { color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.site-header a:hover { color: #795222; }
.header-source { display: inline-flex; align-items: center; gap: .4rem; }
.external-icon { position: relative; display: inline-block; width: .7em; height: .7em; flex-shrink: 0; vertical-align: .02em; }
.external-icon::before { content: ""; position: absolute; top: 0; right: 0; width: .49em; height: .49em; border-top: .1em solid; border-right: .1em solid; }
.external-icon::after { content: ""; position: absolute; left: .03em; bottom: 0; width: .87em; height: .1em; background: currentColor; transform: rotate(-45deg); transform-origin: left center; }

.hero { background: radial-gradient(ellipse at 72% 72%, #2d4030 0%, transparent 57%), var(--forest); color: var(--paper); }
.hero-inner { min-height: 31.5rem; padding-block: 3.1rem; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.hero h1 { max-width: 10ch; font: 400 clamp(4rem, 7.9vw, 7.6rem)/.89 var(--title-font); letter-spacing: -.025em; }
.hero h1 em { color: var(--gold); font-weight: 400; }
.hero-copy > p { color: #d8dfd0; }
.hero-copy > p:first-of-type { max-width: 37ch; margin-block: 1.4rem 1.75rem; font-size: 1.08rem; }
.hero-button { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; padding: .75rem 1.05rem; border-radius: .25rem; background: var(--gold); color: var(--forest); font-weight: 700; text-decoration: none; }
.hero-button:hover { background: #f5dea9; }
.hero-copy .hero-stats { margin-top: 1.05rem; color: #d4ddcd; font-size: .85rem; }
.hero-figure { min-width: 0; align-self: center; }
.photo-frame { border: 1px solid #64705a; padding: .55rem; background: #182920; box-shadow: 0 1.3rem 3rem #0b18198a; }
.photo-frame img { width: 100%; aspect-ratio: 1000 / 740; object-fit: cover; object-position: center; }
.hero-figure figcaption { margin-top: .65rem; color: #d5dcce; font-size: .83rem; }
.hero-figure figcaption a { text-underline-offset: .18em; text-decoration-color: #bfc6b6; }

.topics { padding-block: clamp(2.5rem, 6vw, 4rem); }
.topics h2 { margin-bottom: 1.15rem; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.topic-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: start; gap: .2rem .6rem; min-height: 6.7rem; padding: .95rem 1.05rem; border: 1px solid var(--rule); border-radius: .25rem; color: var(--ink); background: var(--sheet); text-align: left; }
.topic-card:hover { border-color: #947345; background: #f6f0e2; }
.topic-name { font: 400 clamp(1.55rem, 2.6vw, 2.15rem)/1.02 var(--title-font); }
.topic-count { grid-column: 1; color: var(--muted); font-size: .82rem; }
.topic-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #795222; font-size: 1.25rem; }

.collection { padding-block: clamp(2.5rem, 6vw, 4rem); border-block: 1px solid var(--rule); background: #eff0e7; }
.collection-inner h2 { margin-bottom: 1.35rem; }
.filters { display: grid; grid-template-columns: minmax(12rem, 1.65fr) minmax(10rem, 1fr) minmax(9rem, .75fr); gap: .8rem; }
.field { display: grid; align-content: start; gap: .32rem; min-width: 0; font-size: .86rem; font-weight: 700; }
.field input, .field select { min-width: 0; width: 100%; height: 3.1rem; padding: .55rem .75rem; border: 1px solid #afb4a8; border-radius: .25rem; background: var(--sheet); color: var(--ink); font-size: .96rem; font-weight: 500; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.results-bar { display: flex; align-items: baseline; justify-content: space-between; gap: .65rem; margin-block: 1.15rem .65rem; color: var(--muted); font-size: .9rem; }
.text-button { border: none; background: transparent; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: .16em; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; list-style: none; margin: 0; padding: 0; }
.entry { position: relative; height: 100%; padding: .85rem 2.9rem .9rem 1rem; border: 1px solid var(--rule); border-radius: .25rem; background: var(--sheet); }
.entry:hover, .entry:focus-within { border-color: #947345; }
.entry-meta { display: flex; flex-wrap: wrap; gap: .25rem .55rem; align-items: baseline; margin-bottom: .25rem; color: var(--muted); font-size: .81rem; }
.entry-kind { color: #664820; font-weight: 700; }
.entry h3 { font: 400 1.7rem/1.06 var(--title-font); overflow-wrap: anywhere; }
.entry h3 a { text-decoration: none; }
.entry h3 a::after { content: ""; position: absolute; inset: 0; border-radius: .25rem; }
.entry h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.entry-arrow { position: absolute; top: 50%; right: .8rem; width: 1.85rem; height: 1.85rem; display: grid; place-items: center; border-radius: 50%; transform: translateY(-50%); background: #eef0e6; color: #314d3c; font: 600 1rem/1 var(--body-font); }
.entry-author { margin-top: .3rem; color: var(--muted); font-size: .87rem; overflow-wrap: anywhere; }
.empty-state { padding: 1rem; border: 1px solid var(--rule); border-radius: .25rem; background: var(--sheet); }
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.pagination button { display: inline-flex; justify-content: center; gap: .4rem; min-height: 2.65rem; padding: .5rem .75rem; border: 1px solid #b3baa9; border-radius: .25rem; background: var(--sheet); color: var(--ink); font-size: .87rem; font-weight: 700; }
.pagination button:hover:enabled { border-color: var(--ink); }
.pagination button:disabled { opacity: .57; cursor: default; }
.pagination > span { color: var(--muted); font-size: .88rem; text-align: center; }

footer { background: var(--forest); color: var(--paper); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-block: 2rem; }
.footer-inner h2 { margin-bottom: .55rem; font-size: 2.15rem; }
.footer-inner p { max-width: 62ch; color: #d8dfd0; font-size: .93rem; }
.footer-inner > a { flex-shrink: 0; font-size: .9rem; }
.footer-inner a { text-underline-offset: .16em; }
.footer-inner .photo-credit { margin-top: .6rem; color: #c4cebd; font-size: .81rem; }

@media (max-width: 55rem) {
  .shell { width: calc(100% - 3rem); }
  .hero-inner { min-height: auto; gap: 2rem; }
  .hero h1 { font-size: clamp(3.5rem, 8vw, 5.4rem); }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 39rem) {
  .shell { width: calc(100% - 2rem); }
  .header-inner { min-height: 4.1rem; gap: .6rem; }
  .brand { gap: .35rem; font-size: 1.65rem; }
  .site-header nav { gap: .75rem; }
  .site-header nav a { font-size: .83rem; }
  .header-source { display: none; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: 2.2rem 1.55rem; gap: 1.45rem; }
  .hero h1 { max-width: 12ch; font-size: clamp(3.4rem, 12vw, 5rem); }
  .hero-copy > p:first-of-type { margin-block: 1rem 1.25rem; font-size: 1rem; }
  .hero-copy .hero-stats { margin-top: .7rem; }
  .hero-figure { width: min(100%, 25rem); }
  .topic-card { min-height: 5.9rem; padding: .7rem; }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search-field { grid-column: 1 / -1; }
  .result-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}