/* Archival Scholarly Minimalist: monochrome, sharp corners, no shadows.
   Source Serif 4 for headings, Inter for body/UI, Plus Jakarta Sans for the
   logo. Tokens below mirror docs/stitch_registry_of_type_design's design
   system rather than duplicating Tailwind, this project ships no build
   step for CSS. */

:root {
  --color-bg: #f8f9fa;
  --color-bg-alt: #f3f4f5;
  --color-bg-card: #ffffff;
  --color-text: #191c1d;
  --color-text-muted: #4c4546;
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-link: #43506a;
  --color-outline: #7e7576;
  --color-outline-variant: #d8d2d3;
  --color-callout-bg: #efefef;
  --color-info-accent: #1b4332;
  --color-header-bg: #fcfcfa;
  --color-header-border: #2a2a2a;
  --color-header-fg: #2a2a2a;
  --color-header-fg-muted: #6b6b6b;
  --color-header-accent: #2a2a2a;
  /* The one orange in this design system. Defined once here (not
     redeclared in the dark-mode block below), so anything using it stays
     the exact same color in both themes rather than drifting into a
     second, different orange per theme. */
  --color-accent: #febb54;
  --font-logo: "Plus Jakarta Sans", sans-serif;
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --container-max: 46rem;
}

/* Three-state theming: no explicit choice follows the OS
   (prefers-color-scheme, guarded so an explicit "light" pick can override
   a dark OS), and an explicit choice (data-theme, set by the toggle button
   in the header, see .theme-toggle below) always wins regardless of OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #2e3132;
    --color-bg-alt: #35393a;
    --color-bg-card: #26292a;
    --color-text: #f0f1f2;
    --color-text-muted: #c9c5c6;
    --color-primary: #ffffff;
    --color-on-primary: #191c1d;
    --color-link: #c6cddb;
    --color-outline: #8f8788;
    --color-outline-variant: #4a4344;
    --color-callout-bg: #3a3536;
    --color-info-accent: #2d6a4f;
    --color-header-bg: #0a0a0a;
    --color-header-border: var(--color-accent);
    --color-header-fg: #e1d9c4;
    --color-header-fg-muted: #b9b0a0;
    --color-header-accent: var(--color-accent);
  }
}
:root[data-theme="dark"] {
  --color-bg: #2e3132;
  --color-bg-alt: #35393a;
  --color-bg-card: #26292a;
  --color-text: #f0f1f2;
  --color-text-muted: #c9c5c6;
  --color-primary: #ffffff;
  --color-on-primary: #191c1d;
  --color-link: #c6cddb;
  --color-outline: #8f8788;
  --color-outline-variant: #4a4344;
  --color-callout-bg: #3a3536;
  --color-info-accent: #2d6a4f;
  --color-header-bg: #0a0a0a;
  --color-header-border: var(--color-accent);
  --color-header-fg: #e1d9c4;
  --color-header-fg-muted: #b9b0a0;
  --color-header-accent: var(--color-accent);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--color-link); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

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

/* Header, present on every page. Background/border/foreground colors come
   from the --color-header-* tokens above (deliberately distinct from the
   page's --color-bg/--color-text, this is an accent band, not a plain
   panel). Dark mode additionally gets a diamond halftone texture,
   old-newsprint-style, fading in only for the bottom strip right above the
   border so it never sits behind the search input's text. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-header-bg);
  background-repeat: repeat-x;
  background-position: left bottom;
  border-bottom: 3px solid var(--color-header-border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    background-image: url("halftone-diamond.svg");
    background-size: 12px 64px;
  }
}
:root[data-theme="dark"] .site-header {
  background-image: url("halftone-diamond.svg");
  background-size: 12px 64px;
}

.site-header .logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { display: block; height: 24px; width: auto; }
.logo-img-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img-light { display: none; }
  :root:not([data-theme="light"]) .logo-img-dark { display: block; }
}
:root[data-theme="dark"] .logo-img-light { display: none; }
:root[data-theme="dark"] .logo-img-dark { display: block; }

.header-search-wrap {
  position: relative;
  width: 26rem;
  max-width: 40vw;
  flex-shrink: 1;
  margin-left: auto;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-alt);
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 0.4rem 0.85rem;
}

/* :focus-within, not :focus on the input alone, so the ring stays on
   while the clear button briefly has focus too. */
.header-search:focus-within {
  background: var(--color-bg-card);
  border-color: var(--color-accent);
}

.header-search .header-search-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--color-text);
}

.header-search input::placeholder { color: var(--color-text-muted); }
.header-search input:focus { outline: none; }
/* Custom clear button below replaces the native one, which would
   otherwise double up with it in Chrome/Safari. */
.header-search input[type="search"]::-webkit-search-cancel-button { display: none; }

.header-search-clear {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-outline);
  color: var(--color-bg-card);
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header-search-clear:hover { background: var(--color-text-muted); }
.header-search-clear[hidden] { display: none; }

.about-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-header-accent);
  font-size: 0.85rem;
  font-weight: 600;
  /* No margin-left:auto here: the theme toggle button is unconditional
     (every page, including home, unlike the search form), so it always
     sits directly before About and is what claims the free space instead
     (see .theme-toggle below), keeping the trailing group flush together
     regardless of whether search is present. */
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-header-accent);
  /* Pushes the whole trailing group (itself + About) right when search
     is absent (home page). When search IS present, its own
     margin-left:auto already did this job, so cancel this one instead of
     stacking two auto-margins (which would open a gap between search and
     the toggle, see 2026-08 search redesign for the same bug elsewhere). */
  margin-left: auto;
}
.header-search-wrap ~ .theme-toggle { margin-left: 0; }
.theme-toggle:hover { opacity: 0.8; }
.theme-toggle svg { display: block; width: 1.2rem; height: 1.2rem; }
/* Shows the icon for the mode a click would switch *to* (moon while
   light, sun while dark), same convention as most theme toggles. Default
   (no explicit choice, light OS or dark OS not yet evaluated): assume
   light, so moon shows; the dark-OS media query below flips it exactly
   like the color tokens above do. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.about-link .about-icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.about-link .ring { fill: var(--color-header-accent); }
.about-link .glyph { fill: var(--color-header-bg); }
.about-link:hover { opacity: 0.8; }

main { max-width: var(--container-max); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.breadcrumb {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 0;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-outline-variant);
}

.record-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.record-id {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  padding: 0.15rem 0.5rem;
}

/* Same badge language as .record-id above, one per authority file, linking
   straight out instead of printing the raw URL as visible page text. */
.identifier-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.identifier-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  padding: 0.15rem 0.5rem;
  text-decoration: none;
}
.identifier-badge:hover { border-color: var(--color-outline); color: var(--color-text); }

button.copy-id {
  cursor: pointer;
}
button.copy-id:hover {
  border-color: var(--color-outline);
  color: var(--color-text);
}
button.copy-id.copied {
  border-color: var(--color-info-accent);
  color: var(--color-info-accent);
}
button.copy-id.copied::after {
  content: " \2713";
}

.ark-permalink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: -1rem 0 1.5rem;
}
.ark-permalink code {
  font-family: var(--font-body);
  font-size: 0.8rem;
  word-break: break-all;
}
button.copy-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  line-height: 0;
  flex: none;
}

button.print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  line-height: 0;
  flex: none;
  margin-left: auto;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
button.print-btn:hover { color: var(--color-text); }
button.print-btn svg { display: block; width: 20px; height: 20px; }

.callout {
  background: var(--color-callout-bg);
  border-left: 2px solid var(--color-primary);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.callout strong {
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}
.callout p { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.callout a { color: var(--color-link); }

dl.facts {
  display: grid;
  grid-template-columns: 8rem 1fr;
  row-gap: 0.75rem;
  column-gap: 1rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-outline-variant);
}
dl.facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
dl.facts dd { margin: 0; font-size: 1rem; }

.bio, .description { font-size: 1.125rem; line-height: 1.65; max-width: 38rem; }

ul.record-list { list-style: none; margin: 0; padding: 0; }
ul.record-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-outline-variant);
}
ul.record-list li:last-child { border-bottom: none; }
ul.record-list a { color: var(--color-text); text-decoration: none; font-weight: 600; }
ul.record-list a:hover { color: var(--color-link); text-decoration: underline; }
ul.record-list .role { font-size: 0.8rem; color: var(--color-text-muted); text-align: right; white-space: nowrap; }

.see-also {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-outline-variant);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.see-also h2 {
  border: none;
  margin: 0 0 0.75rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.see-also ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.see-also a { text-decoration: none; }
.see-also a:hover { text-decoration: underline; }

ul.plain-list { padding-left: 1.1rem; margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
ul.plain-list a { color: var(--color-link); }
ul.plain-list li { margin-bottom: 0.3rem; }

.json-link { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2.5rem; }
.json-link a { color: var(--color-link); }

.citation-block {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-outline-variant);
}
.citation-block h2 { margin-top: 0; }

.citation-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.citation-style {
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-outline-variant);
  padding: 0.3rem 0.5rem;
}

button.citation-download {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
button.citation-download:hover { border-color: var(--color-outline); color: var(--color-text); }

.citation-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-outline-variant);
  padding: 0.85rem 1rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

footer.site-footer {
  border-top: 1px solid var(--color-outline-variant);
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}
footer.site-footer a { color: inherit; }
footer.site-footer p { margin: 0; }

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.footer-logo-link {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.85;
}

.section-anchor {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.45rem;
  color: var(--color-text-muted);
  opacity: 0.5;
}
.section-anchor:hover, .section-anchor:focus-visible { opacity: 1; }

.cc-badge-link { display: inline-block; margin-top: 0.75rem; opacity: 0.85; }
.cc-badge-link:hover { opacity: 1; }
.cc-badge { display: block; height: 31px; width: auto; }
.footer-logo-link:hover { opacity: 1; }
.footer-logo { display: block; height: 16px; width: auto; }
.footer-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer-logo-light { display: none; }
  :root:not([data-theme="light"]) .footer-logo-dark { display: block; }
}
:root[data-theme="dark"] .footer-logo-light { display: none; }
:root[data-theme="dark"] .footer-logo-dark { display: block; }

/* Home page */
.home-hero { text-align: center; padding: 3.5rem 1.5rem 3rem; max-width: 40rem; margin: 0 auto; }
.home-hero .tagline { font-size: 1.125rem; color: var(--color-text-muted); margin: 0 0 2.5rem; }

.home-search { position: relative; margin-bottom: 2rem; }
.home-search input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.2rem;
  font-style: italic;
  padding: 0.5rem 2rem 0.5rem 0;
  border: none;
  border-bottom: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-text);
}
.home-search input::placeholder { color: var(--color-text-muted); }
.home-search input:focus { outline: none; border-bottom-color: var(--color-link); }
.home-search svg { position: absolute; right: 0.1rem; bottom: 0.6rem; color: var(--color-text-muted); pointer-events: none; }

.letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-bottom: 2rem; }
.letters button, .letters .letter-disabled {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-family: var(--font-body);
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-primary);
}
.letters button { cursor: pointer; }
.letters button:hover { background: var(--color-bg-alt); }
.letters button[aria-current="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.letters .letter-disabled { border-color: var(--color-outline-variant); color: var(--color-outline-variant); cursor: default; }

.stat-line { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 2rem; }
.stat-line strong { color: var(--color-text); }

.utility-links { font-size: 0.8rem; color: var(--color-text-muted); text-align: center; }
.utility-links a { color: var(--color-link); }

#results { max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem 3rem; }
#results h2 { text-align: left; }
#results .results-meta { font-size: 0.9rem; color: var(--color-text-muted); margin: -0.5rem 0 1.5rem; }
#results ul { list-style: none; padding: 0; margin: 0 0 2rem; }
#results li { padding: 0.6rem 0; border-bottom: 1px solid var(--color-outline-variant); text-align: left; }
#results a { color: var(--color-text); font-weight: 600; text-decoration: none; }
#results a:hover .name { text-decoration: underline; color: var(--color-link); }
#results .kind-tag {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--color-primary);
  padding: 0.1rem 0.35rem;
  margin-left: 0.5rem;
  color: var(--color-text-muted);
  vertical-align: middle;
  text-decoration: none;
}
#results .subtitle { display: block; font-size: 0.85rem; font-weight: 400; color: var(--color-text-muted); margin-top: 0.1rem; text-decoration: none; }

/* Header search quick-select dropdown. Border, not shadow, for elevation,
   consistent with this site's flat/no-shadow visual language elsewhere. */
.header-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 0.3rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-outline);
  max-height: 60vh;
  overflow-y: auto;
}

.header-search-results ul { list-style: none; margin: 0; padding: 0; }
.header-search-results li { border-bottom: 1px solid var(--color-outline-variant); }
.header-search-results li:last-child { border-bottom: none; }
.header-search-results a {
  display: block;
  padding: 0.5rem 0.7rem;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.header-search-results a:hover,
.header-search-results a:focus { background: var(--color-bg-alt); }
.header-search-results .kind-tag {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--color-primary);
  padding: 0.1rem 0.35rem;
  margin-left: 0.5rem;
  color: var(--color-text-muted);
  vertical-align: middle;
}
.header-search-results .subtitle { display: block; font-size: 0.8rem; font-weight: 400; color: var(--color-text-muted); margin-top: 0.1rem; }
.header-search-results .no-matches { padding: 0.6rem 0.7rem; font-size: 0.85rem; color: var(--color-text-muted); }

@media (max-width: 640px) {
  /* Search wraps to its own full-width row here (order: 3 below), right
     where the dark-mode halftone would otherwise sit (anchored to the
     header's bottom edge) — dropped on narrow viewports so it never
     competes with the search input's legibility. */
  .site-header { padding: 0.6rem 1rem; flex-wrap: wrap; background-image: none; }
  .header-search-wrap { max-width: none; width: 100%; order: 3; margin-left: 0; }
  /* Icon only, no "About" label, to save header width on narrow screens. */
  .about-link span { display: none; }
  .about-link { gap: 0; }
  main, #results { padding-left: 1rem; padding-right: 1rem; }
  h1 { font-size: 1.75rem; }
  dl.facts { grid-template-columns: 1fr; row-gap: 0.35rem; }
  dl.facts dt { margin-top: 0.5rem; }
  ul.record-list li { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  ul.record-list .role { text-align: left; }
}

/* Print: drop chrome that only makes sense on screen (nav header, footer,
   copy/download buttons, the print button itself), keep the record content
   and the citation text readable on paper. */
@media print {
  .site-header, .site-footer, .breadcrumb, .json-link, button.print-btn { display: none; }
  .copy-icon-btn { display: none; }
  .citation-controls { display: none; }
  .citation-text { display: block; border: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  main { max-width: none; padding: 0; }
}