:root {
  --parchment: #f4efe4;
  --card: #fbf8f1;
  --ink: #2b2419;
  --ink-soft: #6f6150;
  --rubric: #9e2b25;
  --green: #3a6b48;
  --rule: #d8cdb8;        /* separators: deliberately faint */
  --edge: #9f8758;        /* control boundaries: 3.0:1 on parchment, 3.3:1 on card */
  --shadow: 0 1px 2px rgb(43 36 25 / 8%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.5rem 1.25rem 3rem;
  background: var(--parchment);
  color: var(--ink);
  font: 16px/1.55 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--ink); color: var(--parchment); padding: .5rem .75rem;
}

header { text-align: center; margin-bottom: 2rem; }
h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 600; letter-spacing: .01em; }
.tagline { margin: .2rem 0 1rem; color: var(--ink-soft); font-style: italic; }
.label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); font-weight: 600; margin: 0 0 .6rem;
}
.hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }

nav { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }

/* Setting display on button/.mode outranks the user-agent [hidden] rule, so
   restore it explicitly or every `hidden` attribute in the markup is ignored. */
[hidden] { display: none !important; }

button, .mode {
  font: inherit; padding: .45rem 1rem; cursor: pointer;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--edge); border-radius: 2px;
  display: inline-block; line-height: 1.4;
}
button:hover:not(:disabled), .mode:hover { border-color: var(--ink-soft); }
button:focus-visible, .mode:focus-visible { outline: 2px solid var(--rubric); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }

/* Press feedback. There was hover and there was focus, but nothing happened on
   the way down, which is the half of a click the finger notices. */
button, .mode { transition: scale .1s ease, border-color .12s ease; }
button:active:not(:disabled), .mode:active { scale: .96; }
@media (prefers-reduced-motion: reduce) {
  button, .mode { transition: border-color .12s ease; }
  button:active:not(:disabled), .mode:active { scale: 1; }
}
.mode.is-active,
.mode[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }

main { max-width: 64rem; margin: 0 auto; }

#stage { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
#card { margin: 0; flex: 0 0 auto; }
#view {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--rule); background: #efe9df; box-shadow: var(--shadow);
}
#credit { font-size: .7rem; color: var(--ink-soft); margin-top: .45rem; max-width: 460px; }
#controls { flex: 1 1 16rem; min-width: 14rem; }
#prompt { margin-top: 0; font-size: 1.05rem; }
.note { font-size: .8rem; color: var(--ink-soft); min-height: 1.2em; margin: .5rem 0 0; }

#stats { display: flex; gap: 1.5rem; margin: 1.75rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
#stats div { margin: 0; }
#stats dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); }
#stats dd { margin: .1rem 0 0; font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.slot {
  min-width: 2.2rem; padding: .5rem .3rem; border-style: dashed;
  color: var(--ink-soft); background: transparent; align-self: stretch;
}
.slot:hover, .slot:focus-visible { background: var(--rubric); color: var(--parchment); border-color: var(--rubric); }
.placed {
  display: flex; flex-direction: column; gap: .15rem; padding: .55rem .75rem;
  border: 1px solid var(--rule); background: var(--card); min-width: 8.5rem; box-shadow: var(--shadow);
}
.placed strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.placed span { font-size: .75rem; color: var(--ink-soft); }
.empty-board { color: var(--ink-soft); font-style: italic; margin: 0; }

#reveal, #summary {
  margin-top: 2.5rem; padding: 1.5rem;
  border-top: 3px double var(--rule); background: var(--card);
}
.verdict { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.verdict.right { color: var(--green); }
.verdict.wrong { color: var(--rubric); }
#reveal h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.when { margin: 0 0 1rem; color: var(--ink-soft); }
.contents { margin: .5rem 0; }
.hand {
  margin: 1.25rem 0; padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--rubric); font-style: italic;
}
.hand h3 {
  margin: 0 0 .3rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; font-style: normal; color: var(--ink-soft);
}
.corpus { margin: 1rem 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .92rem; }
.lookalikes h3 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); margin: 1.25rem 0 .5rem;
}
.strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; }
.strip img { height: 120px; width: auto; border: 1px solid var(--rule); background: #efe9df; }
.links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 1.25rem 0; }
a { color: var(--rubric); }
#next-round { margin-top: .5rem; background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.grid { font-size: 1.5rem; letter-spacing: .1em; margin: .5rem 0 1rem; }

footer { max-width: 64rem; margin: 3.5rem auto 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
.attribution { font-size: .74rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 40rem) {
  #stage { gap: 1.25rem; }
  #stats { gap: 1.1rem; }
}

/* ---- shared nav --------------------------------------------------------- */
.submodes { margin-top: .5rem; }

/* ---- Look Closer -------------------------------------------------------- */
.field { display: block; border: 0; padding: 0; margin: 0 0 1.25rem; }
.field > span, .field legend {
  display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-soft); margin-bottom: .45rem; padding: 0;
}
#year { width: 100%; accent-color: var(--rubric); }
#year-out { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.choices { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Spans the setup row rather than one group, because it explains all of them. */
.locked-note { flex-basis: 100%; margin: .1rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.chip { padding: .3rem .7rem; font-size: .85rem; text-transform: capitalize; }
.chip.is-chosen { background: var(--rubric); color: var(--parchment); border-color: var(--rubric); }

/* A chip the daily has fixed is not unavailable, it is decided. The generic
   `button:disabled { opacity: .45 }` made the chosen chip the faintest thing on
   the screen -- and the chosen chip is the one piece of information the player
   needs, since they did not pick it. So the choice stays at full strength and
   only the roads not taken recede. */
.chip:disabled { opacity: 1; }
.chip:disabled:not(.is-chosen) { opacity: .42; }
.chip.is-chosen:disabled {
  background: var(--rubric); color: var(--parchment); border-color: var(--rubric);
}
#commit { background: var(--ink); color: var(--parchment); border-color: var(--ink); }

/* ---- The Shelf ---------------------------------------------------------- */
.headline { font-size: 1.5rem; margin: 0 0 .3rem; }
.bars { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 2rem; }
.bar { display: grid; grid-template-columns: 7rem 1fr auto; gap: .75rem; align-items: center; }
.bar-label { font-size: .82rem; color: var(--ink-soft); text-align: right; }
.bar-track { background: var(--rule); height: 1.1rem; display: block; min-width: 2px; }
.bar-fill { background: var(--rubric); height: 100%; display: block; }
.bar-count { font-size: .75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.met { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.met-item { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; }
.met-item img {
  width: 100%; height: 11rem; object-fit: cover;
  border: 1px solid var(--rule); background: #efe9df;
}
.met-shelf { font-size: .8rem; }
.met-when { font-size: .72rem; color: var(--ink-soft); }
main section { margin-top: 2rem; }


/* ---- the arrange table -------------------------------------------------- */

.setup {
  display: flex; gap: 2.5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--rule);
}
.setup-group .label { margin-bottom: .5rem; }
.round-label {
  margin: 0 0 .5rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rubric);
}
.prompt { font-size: 1.05rem; margin: 0 0 1.25rem; min-height: 1.6em; }

.table {
  display: flex; gap: .85rem; align-items: flex-start;
  overflow-x: auto; padding: .5rem .25rem 1.25rem;
  scroll-snap-type: x proximity;
}

.card {
  flex: 0 0 auto; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* The image is the handle: grab it to reorder, tap it to work the crop dial. */
.card-seat {
  display: block; border: 1px solid var(--rule); background: #efe9df;
  box-shadow: var(--shadow); cursor: grab; touch-action: none;
  position: relative;
}
.card-seat::after {
  /* Written by app.js, because the next tap widens on the first three steps
     and returns to the detail on the last. A fixed string here said "look
     closer" over a control that showed more of the page. */
  content: attr(data-hint);
  position: absolute; inset: auto 0 0 0; padding: .3rem;
  font-size: .62rem; text-align: center; letter-spacing: .04em;
  background: rgb(43 36 25 / 72%); color: var(--parchment);
  opacity: 0; transition: opacity .15s ease;
}
.card-seat:hover { border-color: var(--ink-soft); }
.card-seat:hover::after { opacity: 1; }
.card-seat:active { cursor: grabbing; }
.card-seat canvas { display: block; }

.card:hover { transform: translateY(-3px); }
.card:hover .card-seat { box-shadow: 0 6px 14px rgb(43 36 25 / 18%); }

.card.is-dragging { transform: translateY(-6px) rotate(-1.2deg); z-index: 5; }
.card.is-dragging .card-seat {
  box-shadow: 0 12px 26px rgb(43 36 25 / 28%); border-color: var(--ink);
}
.card.is-dragging .card-seat::after { opacity: 0; }

.card.is-right .card-seat { border-color: var(--green); border-width: 2px; }
.card.is-wrong .card-seat { border-color: var(--rubric); border-width: 2px; }

.card-bar {
  display: flex; gap: .3rem .6rem; justify-content: center; flex-wrap: wrap;
  align-self: center;                      /* stay centred under the page */
}
/* The crop dial and the reorder arrows wrap as units. Letting the bar break
   wherever it likes put one arrow on a line of its own. */
.card-group { display: flex; gap: .3rem; flex: 0 0 auto; }
.icon {
  padding: .22rem .55rem; font-size: .95rem; line-height: 1.2;
  min-width: 2.1rem; text-align: center;
}
.icon:hover:not(:disabled) { background: var(--ink); color: var(--parchment); border-color: var(--ink); }

/* The crop dial is worded rather than drawn. Every glyph for "show more of
   the page" reads as a zoom, and this zooms the other way. */
.icon.crop {
  font-size: .68rem; letter-spacing: .03em; padding: .28rem .4rem;
  min-width: 0; text-transform: lowercase;
}

.card-facts {
  display: flex; flex-direction: column; gap: .1rem;
  text-decoration: none; color: inherit; padding: .4rem .1rem 0;
  max-width: 12rem;
}
.card-facts strong { font-size: .85rem; font-variant-numeric: tabular-nums; }
.card-facts span { font-size: .72rem; color: var(--ink-soft); }
.card-facts em { font-size: .68rem; color: var(--rubric); font-style: normal; }
.card-facts:hover em { text-decoration: underline; }

.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 1.5rem; }
#check { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
#check:hover { background: var(--rubric); border-color: var(--rubric); }

/* A seat whose page has not arrived. The ruled placeholder breathes, so the
   wait reads as a deal in progress rather than as a broken image, and nothing
   about the card moves or resizes when the real page lands. */
/* `progress` would say "you cannot touch this", and the player can: a
   face-down card drags like any other. Only the crop dial is unavailable,
   and those buttons are disabled to say so. */
.card.is-pending .card-seat { cursor: grab; }
.card.is-pending .card-seat::after { content: none; }
.card.is-pending .card-seat canvas { animation: dealing 1.7s ease-in-out infinite; }
@keyframes dealing {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card-seat::after { transition: none; }
  .card.is-dragging { transform: none; }
  /* Motion is not the only cue: the placeholder still reads as unfinished. */
  .card.is-pending .card-seat canvas { animation: none; opacity: .78; }
}

/* ---- observations ------------------------------------------------------- */
.notes-field { display: block; margin: 0 0 1.25rem; max-width: 44rem; }
.notes-field .label em {
  font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400;
}
#notes {
  width: 100%; font: inherit; font-size: .92rem; padding: .6rem .7rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 2px; resize: vertical;
}
#notes:focus-visible { outline: 2px solid var(--rubric); outline-offset: 1px; }
#notes::placeholder { color: var(--ink-soft); opacity: .8; font-style: italic; }

/* ---- look-alike strip: each one opens its own record -------------------- */
.strip { align-items: flex-start; }
.strip-item {
  display: flex; flex-direction: column; gap: .15rem; flex: 0 0 auto;
  text-decoration: none; color: inherit; max-width: 8rem;
}
.strip-item img {
  height: 120px; width: auto; border: 1px solid var(--rule); background: #efe9df;
  transition: border-color .15s ease, transform .15s ease;
}
.strip-item:hover img { border-color: var(--rubric); transform: translateY(-2px); }
.strip-item:focus-visible img { outline: 2px solid var(--rubric); outline-offset: 2px; }
.strip-shelf { font-size: .68rem; }
.strip-when { font-size: .64rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .strip-item img { transition: none; } }


/* ---- Look Closer: the looking glass ------------------------------------- */
.stage { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; }
.stage #card { margin: 0; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.stage #controls { flex: 1 1 18rem; min-width: 15rem; }

.looking-glass { position: relative; display: block; max-width: 100%; }
.looking-glass #view {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--ink); background: #1c1712;
  cursor: zoom-in; box-shadow: var(--shadow);
}
.looking-glass #view:hover { border-color: var(--rubric); }

.glass-hint {
  position: absolute; inset: auto 0 1rem 0; margin: 0;
  text-align: center; pointer-events: none;
  font-size: .8rem; letter-spacing: .04em; font-style: italic;
  color: rgb(244 239 228 / 85%); text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
}

.looks {
  margin: .55rem 0 .3rem; font-size: .82rem; color: var(--ink-soft);
  display: flex; align-items: center; gap: .5rem;
}
.dots { color: var(--rubric); letter-spacing: .18em; font-size: .78rem; }

#hand {
  width: 100%; font: inherit; padding: .5rem .65rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 2px;
}
#hand:focus-visible { outline: 2px solid var(--rubric); outline-offset: 1px; }
#hand-field span em {
  font-style: italic; text-transform: none; letter-spacing: 0;
}

/* Chips carry real labels now, so stop force-capitalising them. */
.chip { text-transform: none; }

/* ---- masthead ----------------------------------------------------------- */
h1 a, .site-title a { color: inherit; text-decoration: none; }
h1 a:hover, .site-title a:hover { color: var(--rubric); }
/* On a manuscript page the h1 is the shelfmark, so the site name is a <p> that
   still has to look like the masthead it is. */
.site-title {
  margin: 0; font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 600;
  letter-spacing: .01em; line-height: 1.1;
}
.game-name {
  margin: .15rem 0 .1rem; font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--rubric);
}


/* Narrow viewports: smaller controls so two manuscripts still fit side by side. */
@media (max-width: 26rem) {
  .icon { min-width: 1.8rem; padding: .18rem .35rem; font-size: .85rem; }
  .icon.crop { min-width: 0; padding: .18rem .28rem; font-size: .6rem; }
  .table { gap: .5rem; }
  .card-facts strong { font-size: .78rem; }
  .card-facts span, .card-facts em { font-size: .66rem; }
  .card-seat::after { font-size: .55rem; padding: .2rem; }
}

/* ---- zoom controls ------------------------------------------------------ */
.zoom-controls {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .5rem; flex-wrap: wrap;
}
.zoom-controls button { padding: .25rem .6rem; min-width: 2.1rem; line-height: 1.2; }
.zoom-controls button:hover:not(:disabled) {
  background: var(--ink); color: var(--parchment); border-color: var(--ink);
}
#zoom-level {
  font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--ink-soft);
  min-width: 2.6rem; text-align: center;
}
#zoom-fit { font-size: .8rem; }

/* The page itself: grab to move, and it says so. */
.looking-glass #view { cursor: grab; touch-action: none; }
.looking-glass #view.is-panning { cursor: grabbing; }
.looking-glass #view:focus-visible { outline: 2px solid var(--rubric); outline-offset: 2px; }

/* ---- search -------------------------------------------------------------- */
.find-field { display: block; max-width: 34rem; margin: 0 0 1.5rem; }
#q {
  width: 100%; font: inherit; font-size: 1.15rem; padding: .6rem .75rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 2px;
}
#q:focus-visible { outline: 2px solid var(--rubric); outline-offset: 1px; }
#q::placeholder { color: var(--ink-soft); opacity: .75; font-style: italic; }

.find-facets {
  display: flex; gap: 2rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.chip-count {
  font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .6;
}
.chip.is-chosen .chip-count { opacity: .8; }

.find-status {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1.25rem;
}
.find-status strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.find-surprise { font-size: .85rem; font-style: italic; }

.find-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1.25rem;
}
.find-card {
  display: flex; flex-direction: column; gap: .25rem;
  text-decoration: none; color: inherit;
}
.find-card img {
  width: 100%; height: 12rem; object-fit: cover; display: block;
  border: 1px solid var(--rule); background: #efe9df;
  transition: border-color .15s ease, transform .15s ease;
}
.find-card:hover img { border-color: var(--rubric); transform: translateY(-2px); }
.find-card:focus-visible img { outline: 2px solid var(--rubric); outline-offset: 2px; }
.find-shelf { font-size: .82rem; }
.find-when { font-size: .7rem; color: var(--ink-soft); }

/* A page the image server did not send. The same ruled placeholder the game
   draws on a face-down card, so a missing photograph reads as a page we have
   not got rather than as a broken site. */
.find-card.is-pageless img { visibility: hidden; }
.find-card.is-pageless {
  position: relative;
}
.find-card.is-pageless img {
  background:
    linear-gradient(to bottom, transparent 0 1.1rem,
      var(--rule) 1.1rem 1.25rem, transparent 1.25rem 2.2rem) 0 0 / 100% 2.2rem repeat-y,
    #efe9df;
  visibility: visible;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .find-card img { transition: none; }
  .find-card:hover img { transform: none; }
}

/* ---- one manuscript ------------------------------------------------------ */
.ms { max-width: 46rem; }
.crumb { margin: 0 0 1rem; font-size: .8rem; }
.ms-shelfmark { margin: 0 0 .15rem; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 600; }
.ms-summary { margin: 0 0 1.5rem; color: var(--ink-soft); font-style: italic; }

.ms-figure { margin: 0 0 1.75rem; }
.ms-figure img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); background: #efe9df; box-shadow: var(--shadow);
}
.ms-figure figcaption {
  font-size: .7rem; color: var(--ink-soft); margin-top: .45rem; max-width: 40rem;
}

.ms-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .9rem 1.5rem; margin: 0 0 2rem;
  padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.ms-facts div { margin: 0; }
.ms-facts dt {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 600;
}
.ms-facts dd { margin: .15rem 0 0; }

.ms-block { margin: 0 0 1.75rem; }
.ms-block h2, .ms-fold summary {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); font-weight: 600; margin: 0 0 .4rem;
}
.ms-block p { margin: 0 0 .7rem; }
.ms-block ul { margin-bottom: .9rem; }

/* Folded because the catalogue's decoration note can run to eight thousand
   words. Everything is still on the page; it is just not in the way. */
.ms-fold summary { cursor: pointer; color: var(--rubric); }
.ms-fold summary:hover { text-decoration: underline; }
.ms-fold summary:focus-visible { outline: 2px solid var(--rubric); outline-offset: 2px; }
.ms-fold[open] summary { margin-bottom: .7rem; }

.ms-owners { margin: 0; padding-left: 1.1rem; }
.ms-owners li { margin-bottom: .2rem; }
.ms-role { font-size: .75rem; color: var(--ink-soft); }
.ms-note { font-size: .74rem; color: var(--ink-soft); margin: .5rem 0 0; }
.ms-note code { font-size: .95em; }

.ms-source {
  margin: 2.5rem 0 1.5rem; padding: 1.25rem;
  border-top: 3px double var(--rule); background: var(--card);
}
.ms-source h2 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); font-weight: 600; margin: 0 0 .5rem;
}
.ms-source p { margin: 0 0 .7rem; font-size: .88rem; }
.ms-source p:last-child { margin-bottom: 0; }
.ms-play { margin: 2rem 0 0; }

/* ---- every manuscript, by century --------------------------------------- */
.browse-list { columns: 18rem; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.browse-list li { margin-bottom: .45rem; break-inside: avoid; }
.browse-when { display: block; font-size: .7rem; color: var(--ink-soft); }
.browse-count {
  font-size: .7rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  letter-spacing: 0; text-transform: none;
}