/* ==========================================================================
   Susie Carson Research Room — archival interface
   Chrome stays quiet so hundred-year-old photographs can carry the page.
   ========================================================================== */

:root {
  --ink:        #1a1a17;
  --ink-2:      #3d3d36;
  --muted:      #6b6b60;
  --faint:      #9a9a8d;
  --rule:       #ddd8cc;
  --rule-soft:  #e9e4d9;
  --paper:      #f5f2ec;
  --paper-2:    #fbf9f5;
  --white:      #ffffff;
  --oxblood:    #7c3b2e;
  --oxblood-2:  #9c4d3d;
  --sea:        #2f5464;
  --ochre:      #a8762c;
  --shadow:     0 1px 2px rgba(26,26,23,.06), 0 8px 24px -12px rgba(26,26,23,.18);
  --shadow-lg:  0 2px 4px rgba(26,26,23,.06), 0 24px 60px -20px rgba(26,26,23,.3);

  --serif: "Source Serif 4", ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --rail: 264px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* The background is set on html too: on a short page the body box ends above
   the fold and the browser's white would show as a band beneath the footer. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }

body {
  margin: 0;
  /* Keeps the footer at the bottom when the results are few, instead of
     stranding it mid-screen. */
  min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; border-radius: 2px; }

/* Parked above the fold rather than at left:-9999px: an off-canvas element to
   the left still counts toward the scrollable area in some browsers, which is a
   silent source of horizontal scroll on narrow screens. */
.skip {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-130%); transition: transform .15s;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; border-radius: 0 0 4px 0;
}
.skip:focus { transform: none; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ shell */

.wrap { max-width: 1400px; margin: 0 auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 760px; }
.wrap--mid { max-width: 1080px; }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245,242,236,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in { display: flex; align-items: center; gap: 2rem; min-height: 68px; }

.wordmark { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; margin-right: auto; }
.wordmark strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.wordmark span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); border-left: 1px solid var(--rule); padding-left: .6rem;
}
@media (max-width: 640px) { .wordmark span { display: none; } }

.nav { display: flex; gap: .35rem; align-items: center; }
.nav a {
  text-decoration: none; font-size: .875rem; color: var(--muted);
  padding: .45rem .7rem; border-radius: 4px; transition: color .15s, background .15s;
}
.nav a:hover { color: var(--ink); background: rgba(26,26,23,.05); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; background: var(--oxblood); margin-top: .3rem; border-radius: 2px;
}

/* Below 640px the wordmark and four nav items cannot share a line — they were
   overflowing the viewport and taking the whole page's horizontal scroll with
   them. The nav drops to its own row and may scroll sideways on its own. */
@media (max-width: 640px) {
  .masthead__in { flex-wrap: wrap; gap: 0 1rem; min-height: 0; padding-block: .55rem; }
  .wordmark { margin-right: 0; }
  .nav {
    width: 100%; margin-left: -.7rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
}

/* --------------------------------------------------------------- footer */

main { flex: 1 0 auto; }
.foot { flex-shrink: 0; border-top: 1px solid var(--rule); margin-top: 5rem; padding: 3rem 0 4rem; background: var(--paper-2); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.foot h4 { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: .75rem; }
.foot p, .foot li { font-size: .85rem; color: var(--muted); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .35rem; }
.foot a { color: var(--muted); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.foot a:hover { color: var(--oxblood); }
.rights {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: .78rem; color: var(--faint); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ============================================================ front door */

/* padding-block, not the padding shorthand: this element is also a .wrap, and
   the shorthand reset its padding-inline to 0 — on a phone that put the
   epigraph and the welcome text hard against both edges of the screen. */
.epigraph { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2rem, 5vw, 3.5rem); }
.epigraph blockquote {
  margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 3.1vw, 2.15rem);
  line-height: 1.34; letter-spacing: -.018em; color: var(--ink); max-width: 20ch;
}
.epigraph blockquote em { font-style: italic; color: var(--oxblood); }
.epigraph cite {
  display: block; margin-top: 1.5rem; font-style: normal; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .13em; color: var(--faint);
}
.epigraph__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 900px) { .epigraph__grid { grid-template-columns: 1fr; } }

.welcome { font-size: 1.02rem; color: var(--ink-2); max-width: 46ch; }
.welcome strong { font-weight: 600; color: var(--ink); }

/* mosaic of real thumbnails on the front door */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; background: var(--rule-soft); aspect-ratio: 1; }
.mosaic figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .4s; }
.mosaic figure:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.06); }

/* audience router — the Society's own three phrasings */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (max-width: 780px) { .paths { grid-template-columns: 1fr; } }
.path {
  background: var(--paper); padding: 2rem 1.75rem 1.75rem; text-decoration: none; display: block;
  transition: background .18s; position: relative;
}
.path:hover { background: var(--paper-2); }
.path__k { font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--oxblood); margin-bottom: .85rem; }
.path h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.path p { font-size: .86rem; color: var(--muted); margin: 0; }
.path__go { margin-top: 1rem; font-size: .82rem; color: var(--ink); display: inline-flex; gap: .4rem; align-items: center; }
.path:hover .path__go { color: var(--oxblood); }
.path:hover .path__go span { transform: translateX(3px); }
.path__go span { transition: transform .2s; }

/* section furniture */
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band--tint { background: var(--paper-2); border-block: 1px solid var(--rule); }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.25rem; flex-wrap: wrap; }
.eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); margin-bottom: .6rem; }
.band__head h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -.02em; }
.band__head p { color: var(--muted); font-size: .92rem; max-width: 54ch; margin: .6rem 0 0; }

.textlink { font-size: .86rem; color: var(--oxblood); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(124,59,46,.3); padding-bottom: 1px; }
.textlink:hover { border-bottom-color: var(--oxblood); }

/* ------------------------------------------------------------- stat rail */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--paper); padding: 1.5rem 1.25rem; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.stat span { display: block; margin-top: .5rem; font-size: .76rem; color: var(--muted); line-height: 1.4; }

/* ---------------------------------------------------------- dual timeline */

.tl { margin-top: 1rem; }
.tl__legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; font-size: .78rem; color: var(--muted); }
.tl__legend i { display: inline-block; width: 10px; height: 10px; margin-right: .45rem; vertical-align: -1px; border-radius: 2px; }
.tl__chart { display: flex; align-items: flex-end; gap: clamp(2px, .5vw, 6px); height: 190px; padding-top: 1rem; }
.tl__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; position: relative; cursor: pointer; text-decoration: none; }
.tl__bar { border-radius: 2px 2px 0 0; transition: opacity .18s, transform .18s; transform-origin: bottom; min-height: 2px; }
.tl__bar--subject { background: var(--sea); }
.tl__bar--pub { background: var(--ochre); opacity: .55; }
.tl__col:hover .tl__bar { opacity: 1; transform: scaleY(1.03); }
.tl__x { display: flex; gap: clamp(2px, .5vw, 6px); margin-top: .6rem; border-top: 1px solid var(--rule); padding-top: .55rem; }
.tl__x span { flex: 1; text-align: center; font-size: .64rem; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .tl__x span:nth-child(even) { visibility: hidden; } }
.tl__tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  background: var(--ink); color: var(--paper); font-size: .72rem; padding: .5rem .7rem; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 10; line-height: 1.5;
}
.tl__col:hover .tl__tip { opacity: 1; }
/* A tip centred on an end column hangs off the side of the page and gives the
   whole document a horizontal scrollbar. The outermost columns anchor to their
   own edge instead of their centre. */
.tl__col:nth-child(-n+3) .tl__tip { left: 0; transform: translateX(0) translateY(-6px); }
.tl__col:nth-last-child(-n+3) .tl__tip { left: auto; right: 0; transform: translateX(0) translateY(-6px); }
/* Without a pointer there is no hover to reveal these, so they are only a
   source of overflow. Below 700px the bars are a few pixels wide and cannot be
   aimed at anyway — the same width at which the axis starts dropping labels. */
@media (hover: none), (max-width: 700px) { .tl__tip { display: none; } }

/* ============================================================== archive */

.archive { display: grid; grid-template-columns: var(--rail) 1fr; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; padding-top: 2rem; }
@media (max-width: 900px) { .archive { grid-template-columns: 1fr; } }

/* search */
.search { position: relative; margin-bottom: 1.25rem; }
.search input {
  width: 100%; font: inherit; font-size: 1rem; padding: .8rem 2.4rem .8rem 2.6rem;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--white); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(47,84,100,.12); }
.search input::placeholder { color: var(--faint); }
/* type=search draws its own cancel button in WebKit, which would sit alongside
   ours. */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Direct child only. `.search svg` also matched the icon inside the clear
   button, absolutely positioning it out of its own button — which collapsed the
   button to its padding and left the cross floating past the field's edge. */
.search > svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }

.search__clear {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--faint); border-radius: 50%;
}
.search__clear[hidden] { display: none; }
.search__clear:hover { color: var(--ink); background: rgba(26,26,23,.06); }

/* facet rail */
.rail { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; padding-right: .5rem; padding-bottom: 2rem; }
@media (max-width: 900px) { .rail { position: static; max-height: none; overflow: visible; } }
.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.rail::-webkit-scrollbar-track { background: transparent; }

.facet { border-bottom: 1px solid var(--rule-soft); }
.facet > summary {
  cursor: pointer; list-style: none; padding: .85rem 0; display: flex; align-items: center; gap: .5rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 500;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint); transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.facet[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.facet > summary:hover { color: var(--ink); }
.facet__body { padding-bottom: 1rem; max-height: 300px; overflow-y: auto; }
.facet__body::-webkit-scrollbar { width: 6px; }
.facet__body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

/* The whole row is the target, not the 14px box inside it. The negative inset
   lets the hover tint reach past the text without moving the checkbox out of
   line with the section heading above it. */
.opt {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  font-size: .84rem; color: var(--ink-2); line-height: 1.35;
  padding: .4rem .4rem .4rem .35rem; margin: 0 -.4rem 0 -.35rem;
  border-radius: 3px; transition: background-color .12s, color .12s;
}
.opt:hover { color: var(--ink); background: rgba(26,26,23,.045); }

/* Drawn rather than left to the OS, which renders a blue rounded square that
   belongs to no other control on the page. appearance:none keeps the real
   input in place, so the label, keyboard and screen reader all still work. */
.opt input {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 15px; height: 15px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--white);
  background-repeat: no-repeat; background-position: center;
  transition: background-color .12s, border-color .12s;
}
.opt:hover input { border-color: var(--faint); }
.opt input:checked {
  background-color: var(--oxblood); border-color: var(--oxblood);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 4.2l2.6 2.6L9 1.4'/></svg>");
}
.opt input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

.opt em { font-style: normal; margin-left: auto; font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; padding-left: .5rem; }
.opt--off { opacity: .38; }

.rail__reset {
  width: 100%; margin-top: 1.1rem; padding: .6rem; background: none; border: 1px solid var(--rule);
  border-radius: 3px; cursor: pointer; font-size: .8rem; color: var(--muted); transition: all .15s;
}
.rail__reset:hover { border-color: var(--oxblood); color: var(--oxblood); }
.rail__reset[disabled] { opacity: .4; cursor: default; }
.rail__reset[disabled]:hover { border-color: var(--rule); color: var(--muted); }

/* results toolbar */
.toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.count { font-size: .88rem; color: var(--muted); }
.count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.controls { display: flex; gap: 1.25rem; align-items: center; }
.controls label { font-size: .78rem; color: var(--faint); margin-right: .4rem; }
/* Native select chrome is the one element on the page still drawn by the OS,
   and it reads as borrowed against everything around it. Suppressing the
   default appearance means supplying our own chevron. */
.controls select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: .82rem; padding: .4rem 1.75rem .4rem .6rem;
  border: 1px solid var(--rule); border-radius: 3px;
  background-color: var(--white); color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239a9a8d' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right .55rem center;
  transition: border-color .15s;
}
.controls select:hover { border-color: var(--faint); }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; padding: .3rem .5rem .3rem .65rem;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 100px; cursor: pointer;
}
.chip:hover { background: var(--oxblood); }
.chip i { font-style: normal; opacity: .55; }

/* results grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 1.5rem 1.25rem; }
.grid--list { grid-template-columns: 1fr; gap: 0; }

.card { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; font: inherit; }
.card__img {
  aspect-ratio: 4/3; background: var(--rule-soft); overflow: hidden; border-radius: 2px; position: relative;
  border: 1px solid var(--rule-soft); transition: border-color .2s, box-shadow .2s;
}
.card:hover .card__img { border-color: var(--faint); box-shadow: var(--shadow); }
.card__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); transition: transform .5s cubic-bezier(.2,.7,.3,1); background: var(--rule-soft); }
.card:hover .card__img img { transform: scale(1.045); }
.card__body { padding-top: .7rem; }
.card__title { font-size: .87rem; line-height: 1.4; color: var(--ink); margin-bottom: .3rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card:hover .card__title { color: var(--oxblood); }
.card__meta { font-size: .73rem; color: var(--faint); display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.card__meta b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* placeholder for items with no retrievable image */
.ph { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--rule-soft) 0 10px, var(--paper-2) 10px 20px); color: var(--faint); }
.ph svg { opacity: .5; }

.badge {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; padding: .18rem .4rem;
  border-radius: 2px; font-weight: 600; white-space: nowrap;
}
.badge--restricted { background: rgba(168,118,44,.16); color: #7d5410; }
.badge--missing { background: rgba(124,59,46,.14); color: var(--oxblood); }
.card__flag { position: absolute; top: .5rem; left: .5rem; z-index: 2; }

/* list rows */
.row { display: grid; grid-template-columns: 58px 1fr auto; gap: 1rem; align-items: center; padding: .75rem .5rem; border-bottom: 1px solid var(--rule-soft); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; font: inherit; width: 100%; }
.row:hover { background: var(--paper-2); }
.row__img { width: 58px; height: 44px; object-fit: cover; border-radius: 2px; background: var(--rule-soft); }
.row__t { font-size: .89rem; line-height: 1.4; }
.row__m { font-size: .74rem; color: var(--faint); margin-top: .15rem; }
.row__y { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.sentinel { height: 1px; }
.more { text-align: center; padding: 2.5rem 0; color: var(--faint); font-size: .84rem; }

/* The empty state is a child of the results grid, so without this it is laid
   out as one 206px column and wraps to a hard-to-read ribbon. */
.empty { grid-column: 1 / -1; text-align: center; padding: 5rem 1rem; }
.empty h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.empty p { color: var(--muted); font-size: .9rem; max-width: 42ch; margin-inline: auto; }

/* ---------------------------------------------------------------- drawer */

.scrim { position: fixed; inset: 0; background: rgba(26,26,23,.42); backdrop-filter: blur(2px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 100;
  background: var(--paper); border-left: 1px solid var(--rule); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.3,.8,.3,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer.on { transform: none; }
.drawer__bar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.drawer__bar strong { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 500; }
.drawer__x { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--muted); padding: .4rem; line-height: 0; border-radius: 3px; }
.drawer__x:hover { background: rgba(26,26,23,.07); color: var(--ink); }
.drawer__scroll { overflow-y: auto; flex: 1; }
.drawer__img { background: #14140f; display: grid; place-items: center; min-height: 220px; }
.drawer__img img { max-height: 46vh; width: auto; max-width: 100%; object-fit: contain; }
.drawer__body { padding: 1.5rem 1.5rem 2.5rem; }
.drawer__body h2 { font-size: 1.4rem; line-height: 1.25; margin-bottom: 1rem; }

.dl { display: grid; grid-template-columns: 116px 1fr; gap: .55rem 1rem; font-size: .85rem; margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.dl dt { color: var(--faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; padding-top: .18rem; }
.dl dd { margin: 0; color: var(--ink-2); }
.dl dd code { font-family: var(--mono); font-size: .78rem; color: var(--muted); word-break: break-all; }

.tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.tag { font-size: .76rem; padding: .22rem .55rem; background: var(--white); border: 1px solid var(--rule); border-radius: 100px; cursor: pointer; color: var(--ink-2); transition: all .15s; }
.tag:hover { border-color: var(--oxblood); color: var(--oxblood); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 3px;
  text-decoration: none; font-size: .87rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: all .15s;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--oxblood); }
.btn--ghost { border-color: var(--rule); color: var(--ink-2); background: var(--white); }
.btn--ghost:hover { border-color: var(--faint); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btnrow { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

.note {
  font-size: .82rem; padding: .85rem 1rem; border-radius: 3px; border-left: 2px solid;
  background: var(--white); color: var(--ink-2); margin-bottom: 1.25rem;
}
.note--warn { border-color: var(--ochre); background: rgba(168,118,44,.07); }
.note--stop { border-color: var(--oxblood); background: rgba(124,59,46,.06); }

/* ============================================================ editorial */

.prose { font-size: 1rem; line-height: 1.72; color: var(--ink-2); }
.prose h2 { font-size: 1.45rem; margin: 2.75rem 0 .9rem; color: var(--ink); }
.prose h3 { font-size: 1.08rem; margin: 2rem 0 .6rem; color: var(--ink); }
.prose blockquote {
  margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--oxblood);
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink);
}
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--oxblood); text-underline-offset: 3px; }
.lede { font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; color: var(--ink); }

.pagehead { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--rule); }
.pagehead h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); letter-spacing: -.025em; margin-bottom: .75rem; }
.pagehead p { color: var(--muted); max-width: 58ch; margin: 0; }

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 780px) { .cols2 { grid-template-columns: 1fr; gap: 1.5rem; } }

.panel { background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 1.5rem 1.6rem; }
.panel h3 { font-size: 1rem; margin-bottom: .75rem; }
.panel p, .panel li { font-size: .88rem; color: var(--muted); }
.panel p:last-child { margin-bottom: 0; }

table.data { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 1.5rem 0; }
table.data th, table.data td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--rule-soft); }
table.data th { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 500; }
table.data td b { font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: var(--paper-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ========================================================== collections */

.shelves { padding: 2.5rem 0 1rem; border-top: 1px solid var(--rule); }
.shelves:first-child { border-top: 0; }
.shelves__head { margin-bottom: 1.75rem; max-width: 62ch; }
.shelves__head h2 { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: .4rem; }
.shelves__head p { font-size: .9rem; color: var(--muted); margin: 0; }

.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.shelf { background: var(--paper); text-decoration: none; display: flex; flex-direction: column; transition: background .18s; }
.shelf:hover { background: var(--paper-2); }
.shelf__img { aspect-ratio: 4/3; overflow: hidden; background: var(--rule-soft); }
.shelf__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.shelf:hover .shelf__img img { transform: scale(1.04); }
.shelf__body { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.shelf__k { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--oxblood); margin-bottom: .4rem; }
.shelf h3 { font-size: 1.02rem; line-height: 1.25; margin-bottom: .45rem; letter-spacing: -.01em; }
.shelf p { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shelf__n { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; gap: .75rem; font-size: .73rem; color: var(--faint); }

/* the Society's own words, shown when the view narrows to one section */
.secnote { background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--sea);
  padding: 1.4rem 1.5rem; margin-bottom: 1.5rem; max-width: 78ch; }
.secnote h2 { font-size: 1.3rem; letter-spacing: -.015em; margin-bottom: .7rem; }
.secnote p { font-size: .88rem; color: var(--ink-2); margin: 0 0 .7rem; line-height: 1.6; }
.secnote__lead { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.secnote__src { margin: .9rem 0 0; font-size: .8rem; }

@media print {
  .masthead, .rail, .drawer, .scrim, .foot { display: none !important; }
}
.results { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.result { display:grid; grid-template-columns:112px 1fr; gap:1rem; text-align:left; border:0; background:var(--paper); padding:.75rem; cursor:pointer; color:inherit; }
.result:hover { background:var(--paper-2); }
.result__img { width:112px; aspect-ratio:4/3; overflow:hidden; background:var(--rule-soft); }
.result__img img { width:100%; height:100%; object-fit:cover; }
.result__body h3 { font-family:var(--serif); font-size:1rem; margin:.25rem 0; }
.result__body p { color:var(--muted); font-size:.78rem; }
/* Small-screen navigation is fully visible without requiring a hidden sideways scroll. */
@media (max-width: 640px) {
  .nav { margin-left: 0; overflow: visible; justify-content: space-between; gap: 0; }
  .nav a { padding: .4rem .28rem; font-size: .76rem; }
}
/* Contain arbitrary Drive previews and long archival titles within the item drawer. */
.drawer__img { overflow: hidden; padding: 1rem; }
.drawer__img img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.drawer__body { min-width: 0; overflow-wrap: anywhere; }
.drawer__body h2, .dl dd { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 420px) { .dl { grid-template-columns: 88px minmax(0, 1fr); } }

/* Browse iteration: stable result geometry, progressive desktop facets, mobile filter sheet. */
.archive-results { min-width: 0; container-type: inline-size; }
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 660px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 420px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.opt--extra { display: none; }
.facet--expanded .opt--extra { display: flex; }
.facet__more { width: 100%; padding: .55rem 0; border: 0; background: none; color: var(--oxblood); text-align: left; font: inherit; font-size: .78rem; cursor: pointer; }
.mobile-browse-tools, .filter-panel__bar, .filter-panel__actions { display: none; }
.modal-open { overflow: hidden; overscroll-behavior: none; }
.drawer__scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

@media (max-width: 900px) {
  .archive { display: block; padding-top: 1rem; }
  .archive-results { container-type: normal; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-browse-tools { display: flex; margin-bottom: 1rem; }
  .filter-open { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--white); color: var(--ink); padding: .65rem .85rem; font: inherit; font-size: .85rem; cursor: pointer; }
  .filter-open b { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .25rem; border-radius: 1rem; background: var(--oxblood); color: white; font-size: .68rem; }
  .filter-open b[hidden] { display: none; }
  .filter-panel { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: var(--paper); transform: translateX(-100%); transition: transform .25s cubic-bezier(.3,.8,.3,1); }
  .filter-panel.on { transform: none; }
  .filter-panel__bar { display: flex; align-items: center; min-height: 58px; padding: .75rem 1rem; border-bottom: 1px solid var(--rule); flex: 0 0 auto; }
  .filter-panel__bar strong { font-family: var(--serif); font-size: 1.1rem; }
  .filter-panel .search { margin: 1rem 1rem 0; flex: 0 0 auto; }
  .filter-panel .rail { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem 1rem; }
  .filter-panel__actions { display: grid; grid-template-columns: 1fr 2fr; gap: .75rem; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--paper); flex: 0 0 auto; }
  .filter-panel__actions .btn { justify-content: center; }
  .filter-scrim { display: none; }
  .toolbar { align-items: center; }
}
@media (max-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .toolbar { align-items: flex-start; }
  .controls { gap: .6rem; width: 100%; justify-content: space-between; }
  .controls label { display: block; margin: 0 0 .25rem; }
  .controls select { max-width: 46vw; }
  .drawer { width: 100vw; border-left: 0; }
  .drawer__scroll { height: 0; flex: 1 1 auto; }
}

/* Correct the grid without inline-size containment: containment collapsed the parent grid's intrinsic width. */
.archive-results { container-type: normal; }
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1220px) and (min-width: 901px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1020px) and (min-width: 901px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .filter-panel, .drawer { inset: 0; width: auto; height: 100dvh; transition: none; }
}
/* Keep search immediately available on mobile; only the high-cardinality facets move into the sheet. */
.modal-open { overflow: visible; }
@media (max-width: 900px) {
  .mobile-browse-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: stretch; }
  .mobile-browse-tools .search { margin: 0; }
  .filter-panel > .search { display: none; }
  .filter-open { height: 100%; }
}
/* The timeline compares two independent distributions, so pair bars rather than visually stacking them. */
.tl__col { flex-direction: row; align-items: flex-end; justify-content: center; gap: 2px; }
.tl__bar { width: calc(50% - 1px); }
@media (max-width: 900px) { .filter-panel .rail { padding-bottom: 2rem; } }

/* One page scrollbar on desktop; one panel scrollbar in the mobile filter sheet. */
@media (min-width: 901px) {
  .rail { position: static; max-height: none; overflow: visible; padding-right: 0; }
}
.facet__body { max-height: none; overflow: visible; }
.active-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: -0.65rem 0 1.25rem; }
.active-filters[hidden] { display: none; }
.filter-chip { border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); color: var(--ink-2); padding: .38rem .65rem; font: inherit; font-size: .74rem; cursor: pointer; }
.filter-chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
@media (max-width: 900px) {
  .filter-panel .rail { overflow-y: auto; overscroll-behavior: contain; }
  .facet__body { overflow: visible; }
  .active-filters { margin-top: -.45rem; }
}

/* Scope is explicit after deep-linking, and no facet creates a scrollbar inside a scrollbar. */
.chips:empty, .chips[hidden] { display: none; }
.chip { border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); color: var(--ink-2); padding: .38rem .65rem; font: inherit; font-size: .74rem; cursor: pointer; }
.chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
@media (min-width: 901px) {
  .rail { position: static; max-height: none; overflow: visible; padding-right: 0; }
}
.facet__body { max-height: none; overflow: visible; }
@media (max-width: 900px) {
  .filter-panel .rail { overflow-y: auto; overscroll-behavior: contain; }
  .facet__body { overflow: visible; }
}

/* Leave room to scroll the final facet above the fixed mobile action bar. */
@media (max-width: 900px) { .filter-panel .rail { padding-bottom: 7rem; } }

/* Date range: the plot has inset endpoints; fields and presets are separate rows. */
.date-filter { padding: .75rem 0 1.1rem; }
.date-chart { position:relative; height:96px; margin:0 0 2rem; cursor:crosshair; touch-action:none; user-select:none; }
.date-bars { position:absolute; inset:0; display:flex; align-items:end; gap:1px; border-bottom:1px solid var(--rule); overflow:hidden; }
.date-bar { flex:1 1 0; min-width:1px; background:color-mix(in srgb,var(--ink) 24%,var(--paper)); opacity:.8; }
.date-bar.is-selected { background:var(--oxblood); opacity:.88; }
.date-selection { position:absolute; inset-block:0; border:0; background:color-mix(in srgb,var(--oxblood) 8%,transparent); pointer-events:none; }
.date-selection::before,.date-selection::after { content:""; position:absolute; top:0; bottom:0; width:2px; background:var(--oxblood); transform:translateX(-50%); }
.date-selection::before { left:0; }
.date-selection::after { left:100%; }
.date-handle { position:absolute; z-index:2; bottom:-9px; width:36px; height:36px; margin-left:0; padding:0; border:0; border-radius:4px; background:transparent; cursor:ew-resize; touch-action:none; }
.date-handle::after { content:""; position:absolute; left:11px; top:17px; width:14px; height:14px; border-radius:50%; background:var(--oxblood); box-shadow:none; }
.date-handle:focus-visible { outline:2px solid var(--oxblood); outline-offset:2px; }
.date-axis { position:absolute; left:0; right:0; bottom:-24px; display:flex; justify-content:space-between; color:var(--muted); font:600 .68rem/1 var(--mono); pointer-events:none; }
.date-axis span:first-child { transform:translateX(-50%); }
.date-axis span:last-child { transform:translateX(50%); }
.date-fields { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:.5rem; align-items:end; margin:0 0 .9rem; }
.date-field span { display:block; margin:0 0 .3rem; color:var(--ink-2); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.date-field input { box-sizing:border-box; width:100%; min-height:44px; border:1px solid var(--rule); border-radius:3px; background:var(--white); color:var(--ink); padding:.55rem .6rem; font:600 1rem/1 var(--mono); font-variant-numeric:tabular-nums; }
.date-field input:focus { border-color:var(--oxblood); outline:2px solid color-mix(in srgb,var(--oxblood) 22%,transparent); outline-offset:1px; }
.date-field input.is-invalid { border-color:#a12c2c; outline-color:color-mix(in srgb,#a12c2c 20%,transparent); }
.date-fields__dash { padding-bottom:.75rem; color:var(--muted); font-size:.75rem; }
.date-error { margin:.5rem 0 0; color:#8c2020; font-size:.75rem; line-height:1.4; }
.date-error[hidden],.date-note[hidden] { display:none; }
.date-note { margin:0 0 .75rem; color:var(--muted); font-size:.72rem; line-height:1.45; }
.date-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.date-preset { box-sizing:border-box; display:flex; align-items:center; justify-content:center; min-width:0; min-height:38px; margin:0; padding:.45rem .5rem; border:1px solid var(--rule); border-radius:3px; outline:0; box-shadow:none; background:var(--paper); color:var(--ink-2); font:inherit; font-size:.7rem; line-height:1.15; text-align:center; cursor:pointer; }
.date-preset:first-child { grid-column:1 / -1; }
.date-preset:hover { border-color:var(--oxblood); color:var(--oxblood); }
.date-preset:focus-visible { outline:2px solid var(--oxblood); outline-offset:2px; }
.date-preset.is-active { border-color:var(--oxblood); background:var(--oxblood); color:var(--white); font-weight:600; box-shadow:none; }
@media (max-width:900px) {
  .date-filter { padding-top:.75rem; }
  .date-chart { height:118px; margin-top:.25rem; }
  .date-field input { min-height:50px; font-size:1.08rem; }
  .date-presets { gap:.6rem; }
  .date-preset { min-height:46px; padding:.55rem .65rem; font-size:.78rem; }
}
/* Facets are always present sections. Progressive disclosure is reserved for long value lists. */
.facet__title { margin: 0; padding: .95rem 0 .7rem; border-bottom: 1px solid var(--rule-soft); font-family: var(--serif); font-size: .92rem; font-weight: 650; color: var(--ink); }
.facet > summary { display: none; }
/* Homepage hero slots are curated records, not decorative wallpaper. */
.mosaic__item { display: block; min-width: 0; color: inherit; }
.mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic__item figure { width: 100%; height: 100%; }
.mosaic__item:hover img, .mosaic__item:focus-visible img { transform: scale(1.05); filter: saturate(1) contrast(1.06); }
.mosaic__item:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
/* Selected facet values are pinned above the collapsed remainder. */
.opt--selected { background: color-mix(in srgb, var(--oxblood) 7%, transparent); font-weight: 600; }

/* Cards preview collection context; the full human-authored description appears in Browse. */
.shelf__body > p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.secnote p:last-child { margin-bottom:0; }
.rights a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.rights-policy h2 { scroll-margin-top: 5rem; }
.rights-policy li { margin-bottom: .55rem; }
.rights-policy__address { font-style: normal; line-height: 1.7; margin-block: 1.25rem; }
/* Long policy links may wrap on narrow screens; navigation uses concise labels. */
@media (max-width: 640px) {
  .prose .textlink { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
}
/* About is the canonical home for visit guidance and archive-use policy. */
.page-jump { display:flex; flex-wrap:wrap; gap:.55rem 1rem; margin-top:1.35rem; padding-top:1rem; border-top:1px solid var(--rule); }
.page-jump a { color:var(--oxblood); font-size:.8rem; font-weight:600; text-underline-offset:3px; }
.about-section { scroll-margin-top:5rem; }
.about-section > h2 { font-family:var(--serif); font-size:clamp(1.65rem,3vw,2.4rem); margin:.3rem 0 1rem; }
.about-contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.25rem; }
.about-contact-grid address { font-style:normal; line-height:1.75; }
.about-contact-grid .panel > p:last-child { margin-bottom:0; }
.rights-policy > h3 { margin:2rem 0 .65rem; font-family:var(--serif); font-size:1.28rem; scroll-margin-top:5rem; }
.rights-policy > h3:first-of-type { margin-top:1.6rem; }
.rights-policy blockquote { margin:1rem 0 0; padding:1rem 1.15rem; border-left:4px solid var(--oxblood); background:var(--paper-2); font-family:var(--serif); font-size:1.05rem; }
@media (max-width:640px) {
  .about-contact-grid { grid-template-columns:1fr; }
  .page-jump { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
  .page-jump a { padding:.5rem 0; }
}
/* Curated collection families retain their provenance while broad groups aid discovery. */
.collection-group { padding:3rem 0 1.5rem; border-top:1px solid var(--rule); }
.collection-group:first-child { border-top:0; }
.collection-group__head { max-width:68ch; margin-bottom:1.5rem; }
.collection-group__head h2 { margin:.25rem 0 .55rem; font-size:clamp(1.65rem,3vw,2.35rem); }
.collection-group__head p { margin:0; color:var(--muted); line-height:1.65; }
.collection-tree { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.collection-tree > .shelf { border:1px solid var(--rule); height:100%; }
.family { border:1px solid var(--rule); background:var(--paper); }
.family__head { display:grid; grid-template-columns:160px minmax(0,1fr); color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); }
.family__img { min-height:150px; overflow:hidden; background:var(--rule-soft); }
.family__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.family__head:hover .family__img img { transform:scale(1.04); }
.family__copy { padding:1rem 1.1rem; min-width:0; }
.family__k { color:var(--oxblood); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.family__copy h3 { margin:.28rem 0 .45rem; font-size:1.22rem; }
.family__copy p { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 .7rem; color:var(--muted); font-size:.8rem; line-height:1.5; }
.family__count { color:var(--faint); font-size:.74rem; }
.family__children { columns:2; column-gap:0; list-style:none; margin:0; padding:.55rem 0; }
.family__children > li { break-inside:avoid; }
.family__children a { display:flex; justify-content:space-between; gap:.7rem; padding:.48rem 1rem; color:var(--ink-2); text-decoration:none; font-size:.78rem; }
.family__children a:hover { color:var(--oxblood); background:var(--paper-2); }
.family__children b { color:var(--faint); font:600 .7rem/1.5 var(--mono); }
.family__nested { list-style:none; margin:0 0 .35rem .8rem; padding:0 0 0 .45rem; border-left:1px solid var(--rule); }
.family__nested a { font-size:.72rem; padding-block:.3rem; }
@media (max-width:900px) { .collection-tree { grid-template-columns:1fr; } }
@media (max-width:520px) {
 .family__head { grid-template-columns:112px minmax(0,1fr); }
 .family__img { min-height:130px; }
 .family__children { columns:1; }
}

/* Collections is an editorial overview: immediate families only, never the full filing tree. */
.collection-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:stretch; }
.collection-card { display:grid; grid-template-rows:190px 1fr; min-width:0; border:1px solid var(--rule); background:var(--paper); color:inherit; text-decoration:none; }
.collection-card__image { overflow:hidden; background:var(--rule-soft); }
.collection-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease,filter .45s ease; }
.collection-card:hover .collection-card__image img,.collection-card:focus-visible .collection-card__image img { transform:scale(1.035); filter:contrast(1.04); }
.collection-card:focus-visible { outline:3px solid var(--oxblood); outline-offset:3px; }
.collection-card__body { display:flex; flex-direction:column; min-height:190px; padding:1.05rem 1.15rem; }
.collection-card__kind { color:var(--oxblood); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.collection-card__body h3 { margin:.3rem 0 .5rem; font-size:1.25rem; }
.collection-card__body p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; margin:0 0 .8rem; color:var(--muted); font-size:.8rem; line-height:1.55; }
.collection-card__meta { display:flex; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:.8rem; border-top:1px solid var(--rule-soft); color:var(--faint); font-size:.72rem; }
.collection-card__meta span:last-child { color:var(--oxblood); }
@media (max-width:760px) { .collection-overview { grid-template-columns:1fr; } .collection-card { grid-template-columns:118px minmax(0,1fr); grid-template-rows:auto; } .collection-card__body { min-height:165px; } }
@media (max-width:420px) { .collection-card { grid-template-columns:96px minmax(0,1fr); } .collection-card__body { min-height:155px; padding:.9rem; } .collection-card__meta { display:block; } .collection-card__meta span { display:block; } .collection-card__meta span+span { margin-top:.25rem; } }

/* Browse exposes the complete hierarchy as a true expandable selection tree. */
.collection-filter-tree { padding:.35rem 0 .8rem; }
.collection-tree-row { display:flex; align-items:center; min-height:36px; padding-left:calc(var(--tree-depth) * 15px); }
.collection-tree-toggle,.collection-tree-spacer { flex:0 0 28px; width:28px; height:32px; }
.collection-tree-toggle { display:grid; place-items:center; border:0; border-radius:3px; background:transparent; color:var(--oxblood); font:700 1rem/1 var(--mono); cursor:pointer; }
.collection-tree-toggle:hover,.collection-tree-toggle:focus-visible { background:var(--paper-2); outline:1px solid var(--rule); }
.collection-tree-option { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:.45rem; flex:1; min-width:0; padding:.34rem .2rem .34rem 0; cursor:pointer; }
.collection-tree-option input { width:16px; height:16px; margin:0; accent-color:var(--oxblood); }
.collection-tree-label { min-width:0; color:var(--ink-2); font-size:.76rem; line-height:1.25; }
.collection-tree-option em { color:var(--faint); font:normal 600 .67rem/1 var(--mono); }
.collection-tree-option:has(input:checked) .collection-tree-label,.collection-tree-option:has(input:indeterminate) .collection-tree-label { color:var(--ink); font-weight:650; }
.collection-tree-row:hover { background:color-mix(in srgb,var(--oxblood) 4%,transparent); }
@media (max-width:900px) { .collection-tree-row { min-height:44px; padding-left:calc(var(--tree-depth) * 17px); } .collection-tree-toggle,.collection-tree-spacer { flex-basis:34px; width:34px; height:40px; } .collection-tree-option { min-height:44px; } .collection-tree-option input { width:19px; height:19px; } .collection-tree-label { font-size:.83rem; } }
/* Chevron buttons must read as navigation, not as another checkbox state. */
.collection-tree-toggle { margin-right:3px; color:var(--faint); font-size:.92rem; }
.collection-tree-toggle:hover,.collection-tree-toggle:focus-visible { color:var(--oxblood); }
.collection-tree-spacer { margin-right:3px; }
/* Keep structural UI quiet; historical descriptions carry the narrative. */
.collection-card__meta { justify-content:flex-start; }
.date-note[hidden] { display:none; }
/* The histogram, year fields, and presets identify the date control visually. */
.facet__title--visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Browse cards occupy stable desktop tracks regardless of result count or title length. */
html { scrollbar-gutter: stable; }
@media (min-width: 1221px) {
  .archive-results .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1021px) and (max-width: 1220px) {
  .archive-results .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1020px) {
  .archive-results .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  .archive-results .grid { align-items: stretch; }
  .archive-results .card { width: 100%; min-width: 0; height: 100%; grid-template-rows: 172px minmax(72px, auto); }
  .archive-results .card__img { height: 172px; aspect-ratio: auto; }
  .archive-results .card__body { min-width: 0; }
  .archive-results .card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 3.75em; overflow-wrap: anywhere; }
}
.archive { width: 100%; }
/* A .wrap used as a flex-body child must not shrink-wrap sparse page content. */
main.wrap { width: 100%; }
/* Infinite loading is primary; this remains an explicit keyboard/fallback control. */
.more { display:block; width:max-content; margin:1.25rem auto 2.5rem; padding:.65rem .9rem; border:1px solid var(--rule); border-radius:3px; background:var(--paper); color:var(--oxblood); cursor:pointer; }
.more:hover,.more:focus-visible { border-color:var(--oxblood); background:var(--paper-2); }
.more[hidden] { display:none; }

/* A single selected collection identifies the results; it is not a callout. */
#secnote:empty { display:none; }
.collection-context { margin:0 0 1.55rem; padding:1.15rem 0 1.25rem; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule-soft); }
.collection-context__heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.collection-context h2 { margin:0; font-size:clamp(1.25rem,2vw,1.55rem); letter-spacing:-.015em; }
.collection-context p { max-width:72ch; margin:.7rem 0 0; color:var(--ink-2); font-size:.86rem; line-height:1.62; }
.collection-context__clear { flex:0 0 auto; border:0; background:none; color:var(--muted); padding:.3rem 0; font:inherit; font-size:.72rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.collection-context__clear:hover,.collection-context__clear:focus-visible { color:var(--oxblood); }
@media (max-width:520px) {
  .collection-context { padding-block:1rem; }
  .collection-context__heading { align-items:flex-start; }
  .collection-context h2 { font-size:1.28rem; }
  .collection-context p { font-size:.84rem; }
  .collection-context__clear { padding-top:.15rem; }
}

/* Collection notes preserve authored context without taking ownership of filter controls. */
.collection-context__clear { display:none; }
.collection-context-note h3 { margin:0; font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.012em; }
.collection-context-note p { max-width:72ch; margin:.65rem 0 0; color:var(--ink-2); font-size:.85rem; line-height:1.6; }
.collection-context-note__scope { margin:.3rem 0 .5rem; color:var(--faint); font-size:.7rem; }
/* The toolbar owns the controls/results boundary; collection context must not draw a second rule. */
.collection-context { border-top: 0; padding-top: .85rem; }
/* A compact return path after browsing deep into the result stream. */
.back-to-top { position:fixed; right:max(1rem,env(safe-area-inset-right)); bottom:max(1rem,env(safe-area-inset-bottom)); z-index:90; display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--rule); border-radius:50%; background:color-mix(in srgb,var(--paper) 94%,transparent); color:var(--oxblood); box-shadow:0 4px 18px rgba(30,24,18,.16); font-size:.92rem; cursor:pointer; backdrop-filter:blur(6px); }
.back-to-top:hover,.back-to-top:focus-visible { border-color:var(--oxblood); background:var(--paper); transform:translateY(-1px); }
.back-to-top[hidden] { display:none; }
@media (max-width:520px) { .back-to-top { width:48px; height:48px; } }

/* Full-width plot aligns with its year fields and preset controls. */
.date-axis { left:0; right:0; }
.date-axis span:first-child { transform:none; }
.date-axis span:last-child { transform:none; }

/* Active constraints are labels with an explicit remove control, not clickable tags. */
.chip { display:inline-flex; align-items:center; gap:.2rem; padding:.2rem .22rem .2rem .65rem; border:1px solid var(--rule); border-radius:999px; background:var(--paper-2); color:var(--ink-2); font-size:.74rem; cursor:default; }
.chip:hover { border-color:var(--rule); background:var(--paper-2); color:var(--ink-2); }
.chip__label { line-height:1.35; }
.chip__remove { display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); font:600 1rem/1 var(--sans); cursor:pointer; }
.chip__remove:hover,.chip__remove:focus-visible { background:color-mix(in srgb,var(--oxblood) 10%,transparent); color:var(--oxblood); outline:0; }
.chip__remove:focus-visible { box-shadow:0 0 0 2px color-mix(in srgb,var(--oxblood) 30%,transparent); }

/* Home ends on a full-width band; hand it directly to the footer. */
.home .foot { margin-top:0; }

/* ====================================================== editorial stories */
.stories-intro{padding-block:clamp(3.5rem,8vw,7rem) 3rem}.stories-intro h1{font-family:var(--serif);font-size:clamp(4rem,9vw,8rem);font-weight:400;line-height:.9}.stories-intro p{max-width:720px;margin-top:1.3rem;color:var(--muted);font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.6}.story-index{display:grid;gap:2rem;padding-bottom:5rem}.story-index-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);min-height:440px;background:var(--white);border:1px solid var(--rule)}.story-index-card:nth-child(even){grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)}.story-index-card:nth-child(even) .story-index-card__visual{order:2}.story-index-card__visual{position:relative;overflow:hidden;background:var(--rule-soft)}.story-index-card__visual img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.story-index-card:hover img{transform:scale(1.015)}.story-index-card__visual span{position:absolute;left:1rem;bottom:1rem;padding:.45rem .65rem;background:rgba(25,23,20,.86);color:#fff;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase}.story-index-card__copy{align-self:center;padding:clamp(2rem,5vw,4rem)}.story-index-card__copy h2{font-family:var(--serif);font-size:clamp(2.1rem,4vw,4rem);font-weight:400;line-height:1}.story-index-card__copy h2 a{text-decoration:none}.story-index-card__copy p{margin-top:1rem;color:var(--muted);line-height:1.7}.story-more{display:inline-block;margin-top:1.4rem;color:var(--oxblood);font-size:.75rem;text-decoration:none}
.theme-navy{--story-accent:#24475b}.theme-moss{--story-accent:#526149}.theme-oxblood{--story-accent:var(--oxblood)}.story-hero-editorial{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(400px,1.18fr);min-height:680px;background:var(--ink);color:var(--paper)}.story-hero-editorial--full{grid-template-columns:minmax(340px,.68fr) minmax(480px,1.32fr)}.story-hero-editorial--offset{grid-template-columns:minmax(400px,1.05fr) minmax(350px,.95fr);background:var(--story-accent)}.story-hero-editorial__copy{align-self:center;padding:clamp(2rem,7vw,7rem)}.story-hero-editorial__copy>a{display:inline-block;margin-bottom:3rem;color:#ded7cc;font-size:.72rem;text-decoration:none}.story-kicker{color:var(--story-accent,var(--oxblood));font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.story-hero-editorial .story-kicker{color:#e6bfb0}.story-hero-editorial h1{max-width:720px;margin-top:.8rem;font-family:var(--serif);font-size:clamp(3.3rem,6vw,7rem);font-weight:400;letter-spacing:-.04em;line-height:.91}.story-hero-editorial__copy>p{max-width:650px;margin-top:1.5rem;color:#ddd6cb;font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.3rem);line-height:1.65}.story-hero-editorial__copy small{display:block;margin-top:2rem;color:#aaa298;font-size:.66rem}.story-hero-editorial figure{display:flex;flex-direction:column;min-width:0}.story-hero-editorial figure>a{flex:1;min-height:620px;overflow:hidden}.story-hero-editorial figure img{width:100%;height:100%;object-fit:cover}.story-hero-editorial figcaption{padding:.65rem 1rem;color:#aaa298;font-size:.65rem}.story-hero-editorial figcaption a{color:#ddd6cb}
.story-article{padding-block:2rem 6rem}.story-block{margin-block:clamp(4rem,9vw,8rem)}.story-narrative{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:clamp(2rem,6vw,6rem);align-items:start}.story-narrative .story-kicker{padding-top:.7rem}.story-narrative h2{grid-column:2;font-family:var(--serif);font-size:clamp(2.5rem,5vw,5rem);font-weight:400;line-height:1;letter-spacing:-.035em}.story-narrative .story-copy{grid-column:2;max-width:760px;color:var(--muted);font-size:1.04rem;line-height:1.8}.story-image-text{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(2rem,6vw,6rem);align-items:center}.story-image-text.image-right figure,.story-image-text.image-right-dark figure{order:2}.story-image-text.image-right-dark{padding:clamp(1.5rem,4vw,3rem);background:var(--ink);color:var(--paper)}.story-image-text figure>a{display:block;overflow:hidden;background:var(--rule-soft)}.story-image-text figure img{display:block;width:100%;max-height:660px;object-fit:cover}.story-image-text.image-right-dark figure img{object-fit:contain}.story-image-text figcaption{margin-top:.5rem;color:var(--faint);font-size:.65rem}.story-image-text h2{margin-top:.65rem;font-family:var(--serif);font-size:clamp(2.2rem,4vw,4.2rem);font-weight:400;line-height:1}.story-image-text>div p{margin-top:1.1rem;color:var(--muted);line-height:1.75}.story-image-text.image-right-dark>div p{color:#d6d0c5}
.story-section-head{max-width:740px;margin-bottom:1.5rem}.story-section-head h2{margin-top:.5rem;font-family:var(--serif);font-size:clamp(2.2rem,4vw,4rem);font-weight:400;line-height:1}.story-section-head p{margin-top:.8rem;color:var(--muted);line-height:1.7}.story-voice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.story-voice-cards article{padding:clamp(1.4rem,3vw,2.2rem);border-top:4px solid var(--story-accent,var(--oxblood));background:var(--white)}.story-voice-cards h2{font-family:var(--serif);font-size:1.7rem;font-weight:400}.story-voice-cards p{margin-top:.7rem;color:var(--muted);font-size:.86rem;line-height:1.65}.story-timeline>div:last-child{border-top:1px solid var(--rule)}.story-timeline article{display:grid;grid-template-columns:110px 18px 1fr;gap:1rem;padding-block:1.5rem;border-bottom:1px solid var(--rule)}.story-timeline time{color:var(--story-accent,var(--oxblood));font-family:var(--serif);font-size:1.15rem}.story-timeline article>span{width:10px;height:10px;margin-top:.35rem;border-radius:50%;background:var(--story-accent,var(--oxblood))}.story-timeline h3{font-family:var(--serif);font-size:1.35rem}.story-timeline p{margin:.35rem 0;color:var(--muted);font-size:.84rem}.story-timeline a{color:var(--oxblood);font-size:.72rem;text-decoration:none}
.evidence-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.evidence-card{border:1px solid var(--rule);background:var(--white)}.evidence-card>a{display:block;height:200px;overflow:hidden;background:var(--rule-soft)}.evidence-card img{width:100%;height:100%;object-fit:cover}.evidence-card>div{padding:1rem}.evidence-card small{text-transform:uppercase;color:var(--faint);font-size:.58rem;letter-spacing:.1em}.evidence-card h3{margin-top:.25rem;font-family:var(--serif);font-size:1.05rem;line-height:1.25}.evidence-card h3 a{text-decoration:none}.evidence-card p{margin-top:.35rem;color:var(--faint);font-size:.7rem}.story-collection-link{display:grid;grid-template-columns:1fr minmax(280px,.7fr);min-height:340px;background:var(--story-accent,var(--oxblood));color:#fff}.story-collection-link>div{align-self:center;padding:clamp(2rem,5vw,4.5rem)}.story-collection-link .story-kicker{color:#f1d7ce}.story-collection-link h2{margin-top:.55rem;font-family:var(--serif);font-size:clamp(2.3rem,4vw,4.5rem);font-weight:400;line-height:1}.story-collection-link p{max-width:620px;margin-top:1rem;color:#eee7df;line-height:1.7}.story-collection-link>div>a{display:inline-block;margin-top:1.3rem;color:#fff}.story-collection-link__visual{overflow:hidden}.story-collection-link__visual img{width:100%;height:100%;object-fit:cover}
@media(max-width:850px){.story-index-card,.story-index-card:nth-child(even),.story-hero-editorial,.story-hero-editorial--full,.story-hero-editorial--offset,.story-narrative,.story-image-text,.story-collection-link{grid-template-columns:1fr}.story-index-card:nth-child(even) .story-index-card__visual{order:0}.story-index-card__visual{min-height:350px}.story-hero-editorial figure{order:-1}.story-hero-editorial figure>a{min-height:480px}.story-narrative h2,.story-narrative .story-copy{grid-column:1}.story-image-text.image-right figure,.story-image-text.image-right-dark figure{order:0}.evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-collection-link__visual{height:280px}}
@media(max-width:520px){.stories-intro h1{font-size:4rem}.story-index-card__visual{min-height:260px}.story-hero-editorial figure>a{min-height:380px}.story-hero-editorial__copy{padding:2rem 1.25rem 3rem}.story-hero-editorial h1{font-size:3.2rem}.story-article{padding-inline:1rem}.story-timeline article{grid-template-columns:76px 12px 1fr;gap:.6rem}.evidence-grid{grid-template-columns:1fr 1fr;gap:.6rem}.evidence-card>a{height:145px}.evidence-card>div{padding:.7rem}.story-collection-link{margin-inline:-1rem}}