:root {
  color-scheme: light;
  --ink: #191a1c;
  --quiet: #56575a;
  --line: #e4e4e5;
  --field-line: #c6c7c9;
  --accent: #a54712;
  --serif: 'Lora', Georgia, serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font: 15px/1.5 system-ui, sans-serif; }
button, textarea, select { font: inherit; }
button { cursor: pointer; }
.archive { width: min(100%, 840px); margin: auto; padding: 0 clamp(17px, 5%, 42px) 24px; overflow-wrap: anywhere; }
.masthead { text-align: center; padding: 40px 0 26px; }
.skyline { display: block; width: min(100%, 488px); height: auto; aspect-ratio: 5.35; object-fit: cover; margin: 0 auto 17px; }
h1, h3 { font-family: var(--serif); }
h1 { margin: 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.18; letter-spacing: -.025em; }
.section-name { margin: 6px 0 0; color: #da3230; font-weight: 650; }
.intro { margin: 6px 0 23px; color: var(--quiet); }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.search-form textarea { min-width: 0; resize: vertical; min-height: 50px; border: 1px solid var(--field-line); border-radius: 0; padding: 12px 13px; font-size: 16px; }
.search-form button { min-height: 50px; padding: 0 20px; background: var(--ink); color: #fff; border: 1px solid var(--ink); font-weight: 600; }
.search-form button:hover { background: #38393c; }
.search-form button span { margin-inline-start: 10px; color: #f0403e; }
.examples, .toolbar, .filters, .metadata { display: flex; flex-wrap: wrap; align-items: center; }
.examples { justify-content: center; gap: 6px; margin-top: 10px; color: var(--quiet); font-size: 12px; }
.examples button, select { border: 1px solid var(--field-line); border-radius: 0; padding: 4px 8px; background: #fff; color: var(--ink); }
.examples button:hover { border-color: var(--accent); color: var(--accent); }
.toolbar { justify-content: space-between; gap: 8px 16px; padding: 11px 0; border-block: 1px solid var(--line); }
.toolbar h2 { margin: 0; font-size: 14px; }
.filters { gap: 7px 12px; color: var(--quiet); font-size: 12px; }
.filters label { display: flex; gap: 5px; align-items: center; }
.results { list-style: none; padding: 0; margin: 0; }
.results li { padding: 19px 0; border-bottom: 1px solid var(--line); }
.metadata { gap: 4px 10px; color: var(--quiet); font-size: 12px; }
.topic { color: var(--accent); font-weight: 650; }
.paid { padding: 0 6px; border: 1px solid var(--field-line); background: #fafafa; color: var(--ink); font-weight: 600; }
.results h3 { margin: 5px 0; font-size: clamp(19px, 3vw, 25px); line-height: 1.24; font-weight: 600; }
.results a { color: var(--ink); text-decoration: none; }
.results a:hover { color: var(--accent); text-decoration: underline; }
.results p { margin: 5px 0 0; color: var(--quiet); }
.result-description mark { background: #ffe6e3; color: inherit; font-weight: 650; }
.paid-summary mark { color: #b72321; }
.description-label { font-weight: 650; }
footer { text-align: center; margin-top: 17px; font-size: 13px; }
footer a { color: var(--quiet); text-underline-offset: 3px; }

@media (max-width: 480px) {
  .masthead { padding-top: 24px; }
  .search-form { grid-template-columns: minmax(0, 1fr); }
  .search-form textarea { min-height: 78px; }
}

@media (pointer: coarse) {
  .examples button, select { min-height: 44px; }
}