/* ============================================================
   Bureau of Recreational Vehicles
   Shared stylesheet — bureau.css
   ============================================================ */

:root {
  --paper: #f3eada;
  --paper-2: #ece1cb;
  --ink: #2b1f10;
  --ink-soft: #6b5638;
  --rule: #8b6f4e;
  --gold: #b8860b;
  --burnt: #a0451c;
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); }
a:hover { color: var(--burnt); }

/* ----- Utility nav (top of every page) ----- */
.utility-nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.utility-nav-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.utility-nav a {
  text-decoration: none;
  color: var(--ink-soft);
}
.utility-nav a:hover {
  color: var(--ink);
}
.utility-nav .nav-right {
  color: var(--ink-soft);
}

/* ----- Masthead ----- */
.masthead {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 32px 24px;
  text-align: center;
  border-bottom: 3px double var(--ink);
}
.seal {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  display: block;
}
.masthead-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.22em;
  margin: 0;
  line-height: 1.15;
}
.masthead-sub {
  font-size: 11px;
  letter-spacing: 0.3em;
  margin-top: 10px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ----- Document control bar ----- */
.control-bar {
  max-width: 880px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  gap: 16px;
  flex-wrap: wrap;
}

/* ----- Document container ----- */
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

/* ----- Exhibit header ----- */
.exhibit-header {
  margin-top: 48px;
}
.exhibit-id {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.exhibit-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 30px;
  margin: 6px 0 10px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.exhibit-classification {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* ----- Spec table ----- */
.specs {
  margin: 36px 0 8px;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.specs caption {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  padding-bottom: 8px;
}
.specs tr {
  border-top: 1px solid var(--rule);
}
.specs tr:last-child {
  border-bottom: 1px solid var(--rule);
}
.specs th, .specs td {
  padding: 10px 0;
  text-align: left;
  vertical-align: top;
}
.specs th {
  font-weight: 500;
  width: 45%;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.specs td {
  font-weight: 500;
}

/* ----- Section headings ----- */
.section-head {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin: 56px 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
.section-attribution {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  letter-spacing: 0.05em;
  font-style: italic;
}

/* ----- Body text ----- */
.body p {
  margin: 0 0 1.2em;
  hyphens: auto;
}
.body p.signoff {
  text-align: right;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.body ol, .body ul {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}
.body li {
  margin-bottom: 0.4em;
}

/* ----- Marginal notes ----- */
.marginal {
  margin: 36px 0;
  padding: 18px 22px 18px 24px;
  border-left: 3px solid var(--burnt);
  background: rgba(184, 134, 11, 0.07);
  font-size: 14px;
}
.marginal-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--burnt);
  margin: 0 0 10px;
}
.marginal p {
  margin: 0;
  font-style: italic;
  line-height: 1.6;
}

/* ----- Cross-references ----- */
.crossref {
  margin: 56px 0 24px;
  padding: 14px 18px;
  border: 1px dashed var(--rule);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.crossref-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.crossref ul {
  margin: 0;
  padding-left: 20px;
}
.crossref li {
  margin-bottom: 4px;
}

/* ----- Footer ----- */
.footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  border-top: 3px double var(--ink);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.footer-line {
  margin: 6px 0;
}
.footer-stamp {
  display: inline-block;
  margin-top: 18px;
  padding: 5px 14px;
  border: 2px solid var(--burnt);
  color: var(--burnt);
  transform: rotate(-1.5deg);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
}

/* ----- Filing strip ----- */
.filing-strip {
  max-width: 760px;
  margin: 16px auto 0;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   Home page components
   ============================================================ */

.home-section {
  margin-top: 56px;
}
.home-section:first-of-type {
  margin-top: 48px;
}

/* Exhibit list (home page) */
.exhibit-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.exhibit-list-item {
  border-top: 1px solid var(--rule);
}
.exhibit-list-item:last-child {
  border-bottom: 1px solid var(--rule);
}
.exhibit-list-item a {
  display: block;
  padding: 18px 0;
  text-decoration: none;
  color: var(--ink);
}
.exhibit-list-item a:hover {
  background: rgba(184, 134, 11, 0.05);
}
.exhibit-list-num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.exhibit-list-title {
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.exhibit-list-meta {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* Staff cards (Staff Directory page) */
.staff-card {
  border-top: 1px solid var(--rule);
  padding: 24px 0 8px;
  margin: 0;
}
.staff-card:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.staff-card-head {
  margin-bottom: 14px;
}
.staff-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.staff-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.staff-meta {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  letter-spacing: 0.03em;
}
.staff-bio {
  font-size: 14px;
}
.staff-bio p:last-child {
  margin-bottom: 0.4em;
}
.staff-card.pending .staff-name,
.staff-card.pending .staff-title {
  opacity: 0.78;
}
.staff-card.memorial .staff-name {
  font-style: italic;
}
.staff-card.memorial .staff-title {
  color: var(--ink-soft);
}

/* Vacancy table (Staff Directory page) */
.vacancy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}
.vacancy-table thead th {
  text-align: left;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--ink);
}
.vacancy-table tbody td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.vacancy-table tbody td:first-child {
  font-weight: 500;
  width: 38%;
}
.vacancy-table tbody td:nth-child(2) {
  width: 14%;
  color: var(--burnt);
  font-weight: 500;
  white-space: nowrap;
}
.vacancy-table tbody td:nth-child(3) {
  color: var(--ink-soft);
  font-style: italic;
}

/* Notice block */
.notice {
  margin: 56px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--burnt);
  background: rgba(160, 69, 28, 0.04);
  font-size: 14px;
}
.notice-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--burnt);
  margin: 0 0 8px;
}
.notice p {
  margin: 0;
}

/* ============================================================
   Wide-screen layout: marginalia in the actual margin
   ============================================================ */
@media (min-width: 1100px) {
  .doc {
    max-width: 1100px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .doc > .exhibit-header,
  .doc > .specs,
  .doc > .crossref,
  .doc > .home-section,
  .doc > .notice {
    max-width: 620px;
  }

  .curatorial {
    display: grid;
    grid-template-columns: minmax(0, 620px) 320px;
    column-gap: 60px;
    align-items: start;
    justify-content: start;
  }

  .curatorial-head {
    grid-column: 1 / -1;
    max-width: 620px;
  }

  .curatorial-body {
    grid-column: 1;
    min-width: 0;
  }

  .curatorial-margin {
    grid-column: 2;
    min-width: 0;
  }

  .curatorial-margin .marginal {
    margin: 0 0 22px 0;
    font-size: 13px;
    padding: 14px 18px;
    line-height: 1.55;
    background: rgba(184, 134, 11, 0.05);
  }

  .curatorial-margin .marginal:last-child {
    margin-bottom: 0;
  }
}

/* ============================================================
   Narrow-screen adjustments
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 14px; }
  .masthead-title { font-size: 22px; letter-spacing: 0.18em; }
  .exhibit-title { font-size: 24px; }
  .doc, .masthead, .footer, .filing-strip, .control-bar, .utility-nav-inner { padding-left: 20px; padding-right: 20px; }
  .specs th { width: 55%; }
}