/* Carolina Quotes.
   Quotations are set in a serif and given room; everything else is quiet sans
   so the words stay the loudest thing on the page. */

:root {
  --paper: #fbfaf7;
  --ink: #1c1b19;
  --muted: #6b6760;
  --hair: #e2ded6;
  --card: #ffffff;
  --accent: #2f6d96;
  --accent-soft: #eaf1f6;
  /* The state's symbols as a palette: navy and Carolina blue, the cardinal
     (state bird), longleaf pine (state tree), and dogwood cream (state flower). */
  --navy: #1f4e79;
  --carolina: #4b9cd3;
  --cardinal: #c8102e;
  --pine: #2e5e3e;
  --dogwood: #f6f1e6;
  --flag: #9a6b2f;
  --danger: #a3372f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14161a;
    --ink: #e9e6e0;
    --muted: #9a958c;
    --hair: #2a2e35;
    --card: #1a1d22;
    --accent: #7db8dd;
    --accent-soft: #1d2933;
    --flag: #cfa261;
    --danger: #d98077;
  }
}
:root[data-theme="dark"] {
  --paper: #14161a; --ink: #e9e6e0; --muted: #9a958c; --hair: #2a2e35;
  --card: #1a1d22; --accent: #7db8dd; --accent-soft: #1d2933;
  --flag: #cfa261; --danger: #d98077;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-text-size-adjust: 100%;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- chrome ---------------------------------------------------------- */
.top { border-bottom: 1px solid var(--hair); background: var(--card); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 14px; }
.brand {
  font: 600 1.05rem/1 var(--sans); letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
}
.mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.top nav a {
  color: var(--muted); text-decoration: none; font-size: .92rem;
  padding: 6px 10px; border-radius: 6px;
}
.top nav a:hover { color: var(--ink); background: var(--accent-soft); }
.top nav a.on { color: var(--ink); background: var(--accent-soft); }

main { padding-block: 36px 64px; }

.bottom { border-top: 1px solid var(--hair); padding-block: 28px 40px; }
.bottom p { color: var(--muted); font-size: .84rem; max-width: 52rem; margin: 0 0 8px; }

/* ---- type ------------------------------------------------------------ */
h1 { font: 600 clamp(1.7rem, 4.5vw, 2.5rem)/1.15 var(--sans); letter-spacing: -0.022em; margin: 0 0 12px; }
h2 { font: 600 1.18rem/1.3 var(--sans); letter-spacing: -0.012em; margin: 40px 0 14px;
     padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.lede { font-size: 1.06rem; color: var(--muted); max-width: 46rem; margin: 0 0 20px; }
.muted { color: var(--muted); }
.err { color: var(--danger); }
.ok { color: var(--accent); }
section { margin-bottom: 8px; }

/* ---- hero + search --------------------------------------------------- */
.hero { padding-bottom: 8px; }
.hero h1 { margin-bottom: 6px; }
.stat { color: var(--muted); font-size: .9rem; margin-top: 12px; }

.search { display: flex; gap: 8px; max-width: 34rem; margin: 18px 0 0; }
.search input {
  flex: 1; min-width: 0; font: inherit; padding: 11px 13px;
  border: 1px solid var(--hair); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.search button, .btn, .submit button, .acts button {
  font: 500 .93rem var(--sans); padding: 11px 16px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn { background: transparent; color: var(--accent); }
.btn:hover { background: var(--accent-soft); }
.acts button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }

/* ---- quote cards ----------------------------------------------------- */
.cards { display: grid; gap: 14px; align-items: start;
         grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
@media (max-width: 40rem) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--hair); border-radius: 10px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 10px;
}
.card blockquote {
  margin: 0; font: 1.08rem/1.55 var(--serif);
  hanging-punctuation: first;
}
.card blockquote:not(.bare)::before { content: "\201C"; }
.card blockquote:not(.bare)::after { content: "\201D"; }
.qlink { color: inherit; text-decoration: none; }
.qlink:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.card footer { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.by { font-weight: 600; font-size: .92rem; text-decoration: none; }
.src { font-style: normal; font-size: .81rem; color: var(--muted); line-height: 1.45; }
.mean { margin: 0; font-size: .9rem; }
.cards.dim .card { background: transparent; border-style: dashed; }

.flag {
  margin: 0; font-size: .76rem; color: var(--flag);
  display: inline-flex; align-items: center; gap: 6px; text-transform: lowercase;
}
.flag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flag); flex: none; }

/* ---- single quote ---------------------------------------------------- */
.single { max-width: 44rem; }
.big {
  margin: 0 0 18px; font: 1.7rem/1.4 var(--serif); letter-spacing: -0.01em;
  hanging-punctuation: first;
}
.big:not(.bare)::before { content: "\201C"; }
.big:not(.bare)::after { content: "\201D"; }
.attrib { font-size: 1.02rem; margin: 0 0 6px; }
.big-src { font-size: .92rem; color: var(--muted); margin: 0 0 14px; }
.prov {
  font-size: .82rem; color: var(--muted); border-left: 2px solid var(--hair);
  padding-left: 14px; margin: 26px 0;
}

/* ---- people ---------------------------------------------------------- */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.people a {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink);
}
.people a:hover { background: var(--accent-soft); }
.people strong { font-weight: 600; }
.people .muted { font-size: .85rem; flex: 1; min-width: 0; }
.count {
  font-size: .75rem; color: var(--muted); background: var(--accent-soft);
  padding: 2px 8px; border-radius: 20px; margin-left: auto; flex: none;
}
.jump { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; }
.jump a {
  padding: 5px 11px; border: 1px solid var(--hair); border-radius: 6px;
  text-decoration: none; font-size: .88rem;
}
.jump a.on { background: var(--accent-soft); border-color: var(--accent); }
.letter h2 { margin-top: 34px; }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tags a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--hair); border-radius: 20px; text-decoration: none;
  font-size: .88rem; color: var(--ink);
}
.tags a:hover { border-color: var(--accent); }
.tags .count { margin: 0; }

/* ---- person page ----------------------------------------------------- */
.phead { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 8px; }
@media (max-width: 34rem) { .phead { flex-direction: column; gap: 14px; } }
.portrait {
  width: 150px; height: auto; border-radius: 8px; flex: none;
  border: 1px solid var(--hair); background: var(--card);
}
.years { color: var(--muted); margin: 0 0 8px; font-size: .95rem; }
.ties { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.ties li {
  font-size: .83rem; padding: 3px 11px; border-radius: 20px;
  background: var(--accent-soft); color: var(--ink);
}
.links { display: flex; gap: 14px; flex-wrap: wrap; font-size: .88rem; margin: 10px 0 0; }

/* ---- forms ----------------------------------------------------------- */
.submit, .review { max-width: 42rem; }
.submit label { display: block; font-size: .9rem; font-weight: 500; margin: 20px 0 6px; }
.submit fieldset { border: 1px solid var(--hair); border-radius: 8px; padding: 12px 16px; margin: 0 0 6px; }
.submit fieldset label { font-weight: 400; margin: 6px 0; }
.submit legend { font-size: .82rem; color: var(--muted); padding: 0 6px; }
.submit input[type="radio"] { margin-right: 8px; }
.submit input:not([type="radio"]), .submit textarea, .acts input {
  width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--hair);
  border-radius: 8px; background: var(--card); color: var(--ink);
}
.submit textarea { font-family: var(--serif); resize: vertical; }
.submit input:focus, .submit textarea:focus, .acts input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.submit button { margin-top: 24px; }
.req { color: var(--muted); font-weight: 400; font-size: .78rem; margin-left: 8px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 34rem) { .two { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }

.review dl { display: grid; grid-template-columns: 6rem 1fr; gap: 3px 12px; font-size: .86rem; margin: 0; }
.review dt { color: var(--muted); }
.review dd { margin: 0; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.acts input { flex: 1; min-width: 12rem; }

.api { list-style: none; padding: 0; }
.api li { padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: .93rem; }
code {
  font: .88em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--accent-soft); padding: 2px 6px; border-radius: 4px;
}
.note { border-top: 1px solid var(--hair); margin-top: 48px; padding-top: 8px; }
.note p { max-width: 46rem; color: var(--muted); font-size: .92rem; }

/* ---- standing, records and the model page ---------------------------- */
.chip {
  display: inline-block; font-size: .74rem; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  border: 1px solid transparent;
}
.chip-native, .chip-resident { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.chip-affiliated { background: transparent; color: var(--muted); border-color: var(--hair); }

.standing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.standing .years { color: var(--muted); font-size: .92rem; }

.rec { border-top: 1px solid var(--hair); margin-top: 28px; padding-top: 4px; }
.rec h2 {
  border: 0; padding: 0; margin: 0 0 10px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.facts { display: grid; grid-template-columns: 6rem 1fr; gap: 3px 14px; margin: 10px 0; font-size: .88rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.cite-block {
  font-size: .9rem; line-height: 1.6; background: var(--card);
  border: 1px solid var(--hair); border-radius: 8px; padding: 14px 16px; margin: 0;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; word-break: break-all; }

.tabs { margin-bottom: 18px; }
.tabs a { font-size: .9rem; }
.fine { font-size: .78rem; }

.model { display: grid; grid-template-columns: 9rem 1fr; gap: 10px 18px; margin: 16px 0 28px; }
.model dt { font-weight: 600; font-size: .92rem; }
.model dd { margin: 0; color: var(--muted); font-size: .93rem; }
@media (max-width: 34rem) { .model { grid-template-columns: 1fr; gap: 2px 0; }
  .model dd { margin-bottom: 12px; } }
.model-list { max-width: 44rem; color: var(--muted); }
.model-list strong { color: var(--ink); }
.model-table { border-collapse: collapse; font-size: .9rem; margin: 10px 0 24px; }
.model-table th, .model-table td { text-align: left; padding: 6px 28px 6px 0; border-bottom: 1px solid var(--hair); }
.model-table th { font-weight: 600; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }

/* Not every Library likeness is a head-and-shoulders study; several are wide
   documentary photographs. Cropping one to imitate a portrait would misrepresent
   the picture, so the slot is wide enough to read the image as it was taken. */
.portrait-fig { margin: 0; flex: none; width: 210px; }
.portrait-fig figcaption { font-size: .7rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.portrait { width: 210px; height: auto; border-radius: 8px;
            border: 1px solid var(--hair); background: var(--card); display: block; }

.tie-src { font-size: .72rem; margin-left: 4px; color: var(--muted); }


/* ---- the brand mark ------------------------------------------------------ */
.brand-mark { width: 30px; height: 30px; flex: none; display: block; }
.mark { display: none; }

/* ---- the homepage hero, in colour ---------------------------------------- */
.hero-band {
  background: var(--navy);
  background-image:
    radial-gradient(circle at 88% 20%, rgba(75,156,211,.35), transparent 42%),
    radial-gradient(circle at 8% 110%, rgba(200,16,46,.22), transparent 38%);
  color: var(--dogwood);
  width: 100vw; margin-left: calc(50% - 50vw);
  /* No negative top margin. main carries class "wrap", whose padding rule
     outranks main's own, so main's top padding is 0; a -36px margin here
     pulled the band up underneath the header. */
  margin-top: 0; margin-bottom: 34px;
  padding: 46px 0 40px;
}
.hero-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
@media (max-width: 44rem) { .hero-band .wrap { grid-template-columns: 1fr; }
  .hero-seal { width: 118px; order: -1; } }
.hero-band h1 { color: #fff; margin-bottom: 8px; font-size: clamp(2rem, 5vw, 3rem); }
.hero-band .lede { color: #d7e5f2; max-width: 40rem; }
.hero-band .motto {
  font: italic 1rem/1.4 var(--serif); color: #9fc3e3; margin: 0 0 14px; letter-spacing: .02em;
}
.hero-band .motto b { color: #fff; font-style: normal; font-weight: 600; }
.hero-band .stat { color: #c8d9e8; }
.hero-band .stat a { color: #fff; }
.hero-band .search input { border-color: transparent; }
.hero-band .search button { background: var(--cardinal); border-color: var(--cardinal); }
.hero-band .search button:hover { filter: brightness(1.08); }
.hero-seal { width: 190px; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.28)); }

/* ---- colour through the body --------------------------------------------- */
main h2 { position: relative; padding-left: 14px; }
main h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .55em;
  width: 4px; border-radius: 2px; background: var(--cardinal);
}
.card { border-left: 3px solid var(--carolina); }
.cards.dim .card { border-left-color: var(--hair); }
.card blockquote:not(.bare)::before { color: var(--cardinal); font-weight: 700; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 6px 0 8px; }
.tile {
  display: block; padding: 18px 18px 16px; border-radius: 12px; color: #fff; text-decoration: none;
  min-height: 108px; position: relative; overflow: hidden;
}
.tile b { display: block; font: 600 1.05rem/1.25 var(--sans); margin-bottom: 4px; }
.tile span { font-size: .85rem; opacity: .88; }
.tile::after {
  content: "\201C"; position: absolute; right: 12px; bottom: -34px;
  font: 7rem/1 var(--serif); opacity: .16;
}
.tile:hover { filter: brightness(1.07); }
.tile-navy { background: var(--navy); }
.tile-pine { background: var(--pine); }
.tile-cardinal { background: var(--cardinal); }
.tile-carolina { background: #2f7fb6; }

.chip-native, .chip-resident { background: var(--navy); color: #fff; border-color: var(--navy); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-band { background-color: #10263d; }
  :root:not([data-theme="light"]) .card { border-left-color: #4b9cd3; }
}

/* ---- a person's books ---------------------------------------------------- */
.shelf { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.book {
  display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 16px 16px 14px;
  border-radius: 6px 12px 12px 6px; text-decoration: none; color: var(--dogwood);
  background: linear-gradient(90deg, rgba(0,0,0,.28) 0 7px, transparent 7px), var(--navy);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 8px 18px -10px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.book:nth-child(3n+2) { background-color: var(--pine); }
.book:nth-child(3n+3) { background-color: var(--cardinal); }
.book:hover { transform: translateY(-3px); }
.book-title { font: 600 1rem/1.3 var(--serif); color: #fff; }
.book-year { font-size: .8rem; opacity: .8; }
.book-cta { margin-top: auto; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
            opacity: .92; border-top: 1px solid rgba(255,255,255,.22); padding-top: 8px; }
.disclosure { font-size: .76rem; color: var(--muted); margin-top: 10px; }

/* ---- the names on the map ------------------------------------------------ */
.names { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.name-card {
  display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 12px;
  text-decoration: none; color: var(--ink); background: var(--card);
  border: 1px solid var(--hair); border-top: 4px solid var(--cardinal);
}
.name-card:hover { border-color: var(--carolina); border-top-color: var(--cardinal); }
.name-card .place { font: 600 1.35rem/1.15 var(--serif); color: var(--navy); }
.name-card .named { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 4px; }
.name-card .who { font-weight: 600; }
.name-card .muted { font-size: .82rem; }

/* Reading edition: equal care for light, dark, and small screens. */
:root { color-scheme: light; --wrap: 76rem; --paper: #f7f5ef; --ink: #1c302f; --muted: #596b66; --hair: #d9dfd5; --card: #fffefa; --accent: #286454; --accent-soft: #e7eee7; --button-ink: #fff; --hero-paper: #edf1e8; --hero-ink: #193e36; --hero-muted: #526c62; --feature-paper: #fffdf5; --shadow: 0 12px 36px rgba(24,54,45,.06); }
:root[data-theme="dark"] { color-scheme: dark; --paper: #111c1b; --ink: #e7eee3; --muted: #a7b9af; --hair: #31423c; --card: #192824; --accent: #a2d3b3; --accent-soft: #293e33; --button-ink: #12271d; --hero-paper: #152a23; --hero-ink: #edf3df; --hero-muted: #afc4b2; --feature-paper: #20372c; --shadow: 0 12px 36px rgba(0,0,0,.15); }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #111c1b; --ink: #e7eee3; --muted: #a7b9af; --hair: #31423c; --card: #192824; --accent: #a2d3b3; --accent-soft: #293e33; --button-ink: #12271d; --hero-paper: #152a23; --hero-ink: #edf3df; --hero-muted: #afc4b2; --feature-paper: #20372c; --shadow: 0 12px 36px rgba(0,0,0,.15); } }
html { scroll-behavior: smooth; }
.wrap { padding-inline: clamp(20px,4vw,48px); }
.top .wrap { padding-block: 20px; gap: 12px 20px; }
.brand { font-family: var(--serif); font-size: 1.35rem; }
.theme-control select { font: 500 .78rem var(--sans); color: var(--ink); border: 1px solid var(--hair); background: var(--card); border-radius: 24px; padding: 9px 24px 9px 12px; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
main.wrap { padding-top: 36px; padding-bottom: 72px; }
main.wrap:has(.hero-band) { padding-top: 0; }
.hero-band, :root:not([data-theme="light"]) .hero-band { background: var(--hero-paper); color: var(--hero-ink); padding: 72px 0 60px; border-bottom: 1px solid var(--hair); margin-bottom: 48px; }
.hero-band .wrap { grid-template-columns: 1.35fr 1fr; gap: 64px; }
.hero-band .motto { display: none; }
.eyebrow { font: 600 .65rem/1.5 var(--sans); letter-spacing: .18em; margin: 0 0 22px; color: var(--hero-muted); }
.hero-band h1 { font: 400 clamp(2.8rem,5.2vw,4.7rem)/1.04 var(--serif); letter-spacing: -.045em; color: var(--hero-ink); margin: 0 0 24px; }
.hero-band h1 em { font-weight: 400; }
.hero-band .lede { color: var(--hero-muted); font-size: 1rem; max-width: 34rem; }
.hero-band .search { max-width: 35rem; margin-top: 26px; }
.hero-band .search input { border: 1px solid var(--hair); border-radius: 8px; background: var(--card); padding: 15px; }
.hero-band .search button { border-color: var(--accent); background: var(--accent); color: var(--button-ink); padding-inline: 24px; }
.hero-band .stat { color: var(--hero-muted); font-size: .75rem; max-width: 32rem; margin-top: 26px; }
.quick-voices { display: flex; flex-wrap: wrap; gap: 8px 13px; font-size: .72rem; margin-top: 15px; color: var(--hero-muted); }
.quick-voices a { color: var(--hero-ink); }
.hero-feature { background: var(--feature-paper); border: 1px solid var(--hair); padding: 30px 34px 22px; border-radius: 3px 3px 48px 3px; box-shadow: var(--shadow); transform: rotate(1deg); }
.hero-feature .eyebrow { margin-bottom: 6px; }
.feature-quote-mark { font: 5rem/.9 var(--serif); display: block; color: var(--accent); margin-top: 18px; }
.hero-feature blockquote { font: 400 clamp(1.7rem,2.7vw,2.25rem)/1.24 var(--serif); margin: -8px 0 27px; letter-spacing: -.025em; }
.feature-author { display:flex; justify-content:space-between; color:var(--hero-ink); font-size:.87rem; font-weight:600; text-decoration:none; }
.feature-source { font-size:.71rem; line-height:1.7; color:var(--hero-muted); margin:9px 0 26px; }
.feature-source a { color:var(--hero-muted); }
.feature-foot { border-top:1px solid var(--hair); padding-top:17px; font-size:.54rem; letter-spacing:.12em; color:var(--hero-muted); }
main h2 { font: 400 1.65rem/1.25 var(--serif); padding: 0 0 14px; margin-top: 46px; }
main h2::before { display:none; }
.tiles { gap: 16px; }
.tile { background:var(--card); color:var(--ink); border:1px solid var(--hair); border-top:3px solid var(--accent); border-radius:7px; min-height:130px; padding:22px; }
.tile b { font:500 1.15rem/1.3 var(--serif); }
.tile span { display:block; font-size:.78rem; color:var(--muted); opacity:1; margin-top:9px; }
.tile::after { display:none; }
.tile:hover { filter:none; background:var(--accent-soft); }
.cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.card { border:1px solid var(--hair); border-radius:8px; padding:26px; box-shadow:var(--shadow); min-width:0; }
.card blockquote { font-size:1.17rem; line-height:1.55; }
.card blockquote:not(.bare)::before { color:var(--accent); }
.card .src { overflow-wrap:anywhere; }
.search button, .submit button, .acts button { color:var(--button-ink); }
.name-card .place { color:var(--accent); }
.people { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px; }
.people a { border-bottom:1px solid var(--hair); border-radius:0; padding:17px 0; }
.people .muted { flex-basis:70%; }
.people .count { margin-left:auto; }
.bottom { background:var(--card); }
.profile .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:60rem) { .hero-band .wrap { gap:32px; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .top nav { order:3; width:100%; margin:0; } .theme-control { margin-left:auto; } }
@media(max-width:44rem) { .hero-band .wrap { grid-template-columns:1fr; gap:34px; } .hero-band { padding:38px 0; } .hero-feature { transform:none; padding:26px; } .hero-feature blockquote { font-size:1.8rem; } .cards,.profile .cards,.people { grid-template-columns:1fr; } .hero-band h1 { font-size:3.15rem; } .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .tile { padding:16px; } .top nav a { padding:6px 8px; font-size:.82rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }

.new-voices { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 1.5rem; }
.new-voices a { padding:1.15rem 0; border-bottom:1px solid var(--hair); color:var(--ink); text-decoration:none; font-family:Georgia,serif; font-size:1.12rem; }
.new-voices a:hover { color:var(--accent); }
.new-voices span { display:block; margin-top:.4rem; color:var(--muted); font: .76rem system-ui,sans-serif; }
@media(max-width:60rem) { .new-voices { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:40rem) { .new-voices { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* The two-state collection. */
.state-collections { display:grid;grid-template-columns:1fr 1fr;gap:1.25rem; }
.state-collection { display:block;padding:2rem;border:1px solid var(--hair);border-radius:6px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .18s ease,border-color .18s ease; }
.state-collection:hover { transform:translateY(-3px);border-color:var(--accent); }
.state-collection h3 { font:2.2rem Georgia,serif;margin:1rem 0 .6rem; }
.state-collection p { color:var(--muted);margin:0 0 1.6rem; }
.state-collection > span:last-child { display:flex;justify-content:space-between;gap:.8rem;font-size:.85rem; }
.state-collection.sc { border-top:4px solid #b28a4b; }
.state-collection.nc { border-top:4px solid #729da9; }
.state-tabs { display:flex;flex-wrap:wrap;gap:.4rem;margin:1.75rem 0 1rem; }
.state-tabs a { border:1px solid var(--hair);border-radius:999px;padding:.6rem 1rem;text-decoration:none;color:var(--muted);font-weight:600; }
.state-tabs a.on { background:var(--accent);color:var(--button-ink);border-color:var(--accent); }
.standing { display:flex;flex-wrap:wrap;gap:.4rem;align-items:center; }
@media(max-width:40rem) { .state-collections {grid-template-columns:1fr;} .state-collection {padding:1.5rem;} .state-tabs a {font-size:.82rem;padding:.55rem .75rem;} }
@media(prefers-reduced-motion:reduce) { .state-collection {transition:none;} }

/* Library search stays within the mobile viewport. */
.searchbar select { max-width: 100%; min-width: 0; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); border-radius: 6px; padding: 12px; }
@media (max-width: 640px) { .searchbar { flex-wrap: wrap; } .searchbar select { flex: 1 1 100%; } }

.library-search { max-width: 100%; display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,260px) auto; gap: 12px; margin: 24px 0; }
.library-search input, .library-search select { width:100%; min-width:0; padding:14px; border:1px solid var(--hair); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; }
.library-search button { border-radius:8px; padding:14px 24px; }
.library-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:640px) { .library-search { grid-template-columns:1fr; } }