/* Weird — deliberately plain. A card catalog, not a magazine.
   Light by default, with a dark variant for readers whose system asks for one. */

:root {
  --bg: #f4f1e8;
  --surface: #fbf9f3;
  --ink: #1c1a17;
  --dim: #6b6559;
  --rule: #d8d2c4;
  --link: #7a3b12;
  --link-hover: #a4501a;
  --flag: #7a6c48;   /* 4.57:1 on --bg, 4.91:1 on --surface */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f;
    --surface: #1c1b16;
    --ink: #e8e3d6;
    --dim: #9b9484;
    --rule: #33302a;
    --link: #d99a5b;
    --link-hover: #f0b478;
    --flag: #a89a72;
  }
}

* { box-sizing: border-box; }

html {
  /* Reserve the scrollbar so short and long pages do not shift horizontally. */
  scrollbar-gutter: stable;
}

/* Skip link: first thing in the tab order, invisible until focused. */
.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip:focus { top: 0.5rem; }

/* Nothing here animates for its own sake, but the scripted scroll does, and a
   reader who asked for less motion should not get it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.wordmark:hover { color: var(--link-hover); }

.masthead nav { display: flex; gap: 1.25rem; }
.masthead nav a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--link-hover); }

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* Landing masthead. The art carries the word, so it IS the h1 rather than
   sitting above a second one saying the same thing. Its alt text is the title.
   The art is cream, so on a dark page it gets knocked back rather than glaring. */
.masthead-h1 { margin: 0; font-size: 0; line-height: 0; }

.masthead-art {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin: 0 0 2rem;
}

@media (prefers-color-scheme: dark) {
  .masthead-art { filter: brightness(0.82) contrast(1.04); }
}

h1, h2, h3 { text-wrap: balance; }

h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.lede { color: var(--dim); margin: 0 0 2rem; }

h2.section {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.entry {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem 1.35rem;
  margin: 0 0 1.25rem;
}

.entry h2 {
  font-size: 1.16rem;
  line-height: 1.35;
  margin: 0 0 0.6rem;
}
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--link-hover); text-decoration: underline; }

.desc { margin: 0 0 0.85rem; }

.meta, .prov, .rights {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.71rem;
  line-height: 1.6;
  color: var(--dim);
  margin: 0.3rem 0 0;
}

.meta { color: var(--flag); letter-spacing: 0.04em; }
.prov .go { font-weight: 600; }
.prov .sep { opacity: 0.5; padding: 0 0.15rem; }
.rights { font-style: normal; opacity: 0.8; }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.25rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}
.pager .where { color: var(--dim); }
.index-pager { justify-content: flex-start; gap: 0.55rem; }
.index-pager a { text-decoration: none; }

ul.all { list-style: none; margin: 0; padding: 0; }
ul.all li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
ul.all .dim {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  color: var(--dim);
  white-space: nowrap;
}

footer {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--dim);
}
footer p { margin: 0 0 0.4rem; }

@media (max-width: 520px) {
  h1 { font-size: 1.55rem; }
  .entry { padding: 1.05rem 1rem; }
  .pager { flex-direction: column; align-items: flex-start; }
  .browse { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------- enhancement
   Controls that only work with scripting stay hidden until app.js adds .js
   to the root, so nothing dead is ever on screen. */
.js-only { display: none; }
.js .js-only { display: revert; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.browse {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.browse input[type="search"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.browse input[type="search"]:focus-visible,
.browse select:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}

.browse select {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  padding: 0.45rem 0.5rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.browse .count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--dim);
  white-space: nowrap;
}

/* Accession number: the archive's own shelf mark, top-right of each card. */
.entry { position: relative; }

.accession {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  opacity: 0.65;
}
.accession a { color: inherit; text-decoration: none; }
.accession a:hover { color: var(--link-hover); opacity: 1; }

.entry h2, .entry h3 { padding-right: 4.5rem; }

.entry h3 {
  font-size: 1.16rem;
  line-height: 1.35;
  margin: 0 0 0.6rem;
}
.entry h3 a { color: var(--ink); text-decoration: none; }
.entry h3 a:hover { color: var(--link-hover); text-decoration: underline; }

/* Windows high-contrast mode replaces the palette wholesale; make sure the
   things that carry meaning by colour alone keep a visible edge. */
@media (forced-colors: active) {
  .entry, .browse input, .browse select, .skip { border: 1px solid CanvasText; }
  .entry:target { outline: 2px solid Highlight; }
  a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* Touch targets: the accession anchor and the footer key hints are small text,
   so give them room to be hit. */
.accession a, .masthead nav a { display: inline-block; min-height: 24px; }
.masthead nav a { padding: 0.25rem 0; }

.stats {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--flag);
  margin: 0 0 1.25rem;
}

footer .keys { margin-top: 0.75rem; opacity: 0.75; }
footer kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-right: 0.1rem;
}

/* An anchored entry is marked, so /p/4#e37 lands somewhere visible. */
.entry:target { border-color: var(--link); }

/* ---------------------------------------------------------------- print
   A page should print like what it is: catalog cards. */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --ink: #000;
    --dim: #555; --rule: #bbb; --link: #000; --flag: #555;
  }
  body { font-size: 11pt; }
  .masthead nav, .browse, .pager, .masthead-art, footer .keys,
  .js-only { display: none !important; }
  .entry {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #bbb;
  }
  .entry h2 a, .prov a { text-decoration: none; }
  /* On paper a link is useless unless it says where it goes. */
  .prov a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* The preview is a plate on a catalog card, not a hero image. Ten full-width
   scans would make a page several thousand pixels tall and bury the text that
   tells you what you are looking at. Small, floated, one click from the real
   thing. */
.entry { display: flow-root; }          /* contain the float */

.entry .scan {
  float: left;
  width: 9rem;
  margin: 0.15rem 1.1rem 0.6rem 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg);
  line-height: 0;
}
.entry .scan img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
  object-fit: cover;
  object-position: top center;
}
.entry .scan:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* The provenance lines read as a block; do not let them wrap around the plate. */
.entry .prov, .entry .rights { clear: left; }

@media (max-width: 520px) {
  .entry .scan {
    float: none;
    width: 100%;
    margin: 0 0 0.9rem;
  }
  .entry .scan img { max-height: 14rem; }
}

/* ------------------------------------------------------------ item pages
   One page per document: the commentary is the point, the document is one
   click away, and the provenance is stated rather than implied. */

.plate {
  margin: 0 0 1.75rem;
  padding: 0;
}
.plate img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
}
.plate figcaption {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  color: var(--dim);
  margin-top: 0.45rem;
}

.analysis { margin: 0 0 1rem; }
.analysis p { margin: 0 0 1.1rem; }
.analysis blockquote {
  margin: 1.2rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 2px solid var(--flag);
  color: var(--ink);
  font-style: italic;
}
.analysis blockquote p { margin: 0.5rem 0; }

.getit { margin: 0 0 1.75rem; }
.getit .go {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  padding: 0.55rem 1rem;
  border: 1px solid var(--link);
  border-radius: 3px;
  text-decoration: none;
}
.getit .go:hover { background: var(--surface); }

.removed {
  border: 1px solid var(--flag);
  border-radius: 3px;
  background: var(--surface);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: 0.93rem;
}

.prov-list {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.73rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.prov-list dt {
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.64rem;
  margin-top: 0.8rem;
}
.prov-list dd { margin: 0.15rem 0 0; word-break: break-word; }
.prov-list code { font-size: 0.92em; color: var(--dim); }

/* The item pager carries titles, so it needs room to wrap. */
.pager .prev, .pager .next { max-width: 15rem; }

@media (max-width: 520px) {
  .pager .prev, .pager .next { max-width: none; }
}