/* =========================================================================
   306th BG Design System
   Shared styles used across all pages (homepage, SearchV7, future pages)
   ========================================================================= */

/* -------- DESIGN TOKENS -------- */
:root {
  /* Palette */
  --paper:       #FBF5E4;
  --paper-warm:  #F3EAD1;  /* Every shaded content box on the site. This is
                              the committee's shading knob: lighten it toward
                              --paper to flatten the boxes, darken it to
                              separate them more. Measured, the shading costs
                              about a tenth of the contrast a box would have
                              on plain paper, and no text token drops below AA
                              on it, so it was left as designed. See
                              docs/session-37-report.md for the numbers. */
  --cream:       #FFF8D0;
  --ink:         #1C2230;
  --ink-soft:    #2F3A4F;
  --quiet:       #4A5266;  /* S37: was #5A6275. AA 5.09 -> 6.51 on the
                              worst background. The committee's readability
                              knob for grey text; darken further if asked. */
  --rule:        #C9B988;
  --rule-soft:   rgba(201, 185, 136, 0.4);
  --gold:        #C89824;
  --gold-bright: #E8B840;
  --rust:        #9B3C18;
  --rust-deep:   #6B2B0E;
  --navy:        #1E2A4A;
  --olive:       #4A5D3A;
  --link:        #6B2B0E;
  --link-hover:  #9B3C18;

  /* Type stack */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-label:   'Oswald', 'Arial Narrow', sans-serif;

  /* ---- Type scale -------------------------------------------------
     The committee's readability feedback tunes here, not in page CSS.
     Raise a value and every page that uses it follows, because all
     visitor-facing font sizes reference these rather than literal px.

     Sizes are deliberately generous: the design target is older members
     and researchers, per the committee. --fs-note is the floor for
     prose and data; nothing readable should sit below it.

     Line heights are unitless ratios everywhere on the site, so they
     scale with these automatically and need no parallel adjustment. */
  --fs-body:       18px;  /* base body text */
  --fs-content:    17px;  /* content-box prose */
  --fs-content-sm: 16px;  /* secondary prose, card bodies */
  --fs-meta:       15px;  /* annotations, entry meta, captions */
  --fs-note:       14px;  /* smallest prose or data. The floor. */
  --fs-label:      13px;  /* uppercase letter-spaced labels */
  --fs-label-sm:   12px;  /* smallest kickers and badges */

  /* Homepage hero artwork wash. --hero-wash is the strength and is the one
     number to change: raise it to mute the painting further, lower it to let
     more of the art through, 0 removes the wash entirely.
     The tint is warm-dark rather than paper because the headline sits pale on
     this panel. A paper veil would read as faded print but would pull the gold
     unit name down toward the 3:1 large-text floor, where a warm-dark veil
     mutes the art and gains headline contrast at the same time. If the
     committee wants the faded-print look and accepts that cost, change
     --hero-wash-tint to 251, 245, 228. */
  --hero-wash: 0.12;
  --hero-wash-tint: 46, 38, 28;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layout */
  --container:   1280px;
  --container-narrow: 960px;
}

/* -------- RESET -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* -------- BASE TYPOGRAPHY -------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(ellipse 1000px 400px at 50% 200px, rgba(232, 184, 64, 0.06), transparent),
    radial-gradient(ellipse 800px 400px at 50% 100%, rgba(155, 60, 24, 0.04), transparent);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
}

p { margin: 0; }

em { font-style: italic; color: var(--rust); }

img { max-width: 100%; height: auto; display: block; }

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   UTILITY BAR (top of every page)
   ========================================================================= */
.utility-bar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.utility-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.utility-inner a { color: var(--paper); opacity: 0.7; transition: opacity 0.2s; }
.utility-inner a:hover { opacity: 1; color: var(--gold-bright); }
.utility-left, .utility-right { display: flex; gap: 24px; align-items: center; }
.utility-tag { opacity: 0.55; }

/* =========================================================================
   SITE HEADER (banner image)
   ========================================================================= */
.site-header {
  /* The banner caps at 1600px, so above that the header's own background
     shows down both sides. The committee asked for that to read as page
     rather than as a coloured band, so it is the paper token. Nothing
     about the banner image itself changes: it keeps its width, its cap
     and its centring. */
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  text-align: center;
  overflow: hidden;
}
.site-header img.banner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* =========================================================================
   PRIMARY NAV
   ========================================================================= */
.main-nav {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(28, 34, 48, 0.04), 0 8px 24px -16px rgba(28, 34, 48, 0.15);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.nav-links { display: flex; list-style: none; flex-wrap: wrap; justify-content: center; }
.nav-links a {
  display: block;
  padding: 16px 22px;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--rust);
  border-bottom-color: var(--rust);
}
/* The two section labels the Board asked for are long -- "Search the
   Records" and "Explore the Archives" -- and at their full tracking the
   six-item nav takes a second row from 1100px down, where it used to take
   one. Tightening the padding and letter-spacing below that width buys the
   row back without shortening the labels or touching the type scale. */
@media (max-width: 1100px) {
  .nav-links a { padding: 16px 13px; letter-spacing: 0.10em; }
}
@media (max-width: 560px) {
  .nav-links a { padding: 12px 9px; letter-spacing: 0.06em; }
}

/* Anything linked to by fragment has to clear the sticky nav, or the nav
   sits on top of the thing the visitor followed the link to reach.

   The height is not a constant and cannot be written as one: the nav
   wraps, so it is 59px on one row, 117px on two and 151px on three, and
   which of those applies depends on the label lengths as much as the
   viewport. 306bg.js measures it and keeps --sticky-nav in step. The
   value here is the one-row case, so the rule is still right if the
   script does not run. */
:root { --sticky-nav: 59px; }
[id] { scroll-margin-top: calc(var(--sticky-nav) + 16px); }

/* =========================================================================
   SECTION HEADERS / KICKERS
   ========================================================================= */
.section-title { text-align: center; margin-bottom: 40px; }
.section-title .kicker,
.kicker {
  font-family: var(--font-label);
  font-size: var(--fs-note);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
  display: block;
}
.section-title .kicker { margin-bottom: 12px; }
.section-title h1,
.section-title h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-block;
  border: 1.5px solid var(--ink);
  transition: all 0.2s;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}
.btn:hover { background: var(--ink); color: var(--gold-bright); }
.btn-primary {
  background: var(--ink);
  color: var(--gold-bright);
}
.btn-primary:hover {
  background: var(--rust);
  color: var(--paper);
  border-color: var(--rust);
}
.btn-sm {
  padding: 10px 18px;
  font-size: var(--fs-note);
}

/* =========================================================================
   FORM CONTROLS (shared base for SearchV7 and future forms)
   ========================================================================= */
.form-label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}

.form-input,
.form-select,
input[type="text"].form-control,
input[type="search"].form-control,
select.form-select {
  font-family: var(--font-body);
  font-size: var(--fs-content);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form-input:focus,
.form-select:focus,
input[type="text"].form-control:focus,
input[type="search"].form-control:focus,
select.form-select:focus {
  border-color: var(--rust);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(155, 60, 24, 0.12);
}
.form-input::placeholder,
input.form-control::placeholder {
  color: var(--quiet);
  font-style: italic;
}

/* Select arrow */
select.form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%235A6275' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Checkboxes */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--rust);
  cursor: pointer;
  flex-shrink: 0;
}
.form-check-label {
  font-family: var(--font-body);
  font-size: var(--fs-content);
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
}
.form-check-label em { font-style: italic; color: var(--rust); }

/* Invalid / errors */
.is-invalid {
  border-color: var(--rust) !important;
  background: rgba(155, 60, 24, 0.04);
}
.invalid-feedback {
  display: block;
  color: var(--rust);
  font-size: var(--fs-content-sm);
  font-style: italic;
  margin-top: 6px;
}

/* =========================================================================
   CALLOUT / INFO BOX
   ========================================================================= */
.callout {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  padding: 20px 24px;
  margin-bottom: 24px;
  font-size: var(--fs-content);
  line-height: 1.55;
  color: var(--ink-soft);
}
.callout strong {
  color: var(--rust);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
.callout p + p { margin-top: 10px; }
.callout em { font-style: italic; color: inherit; }
.callout.compact { padding: 14px 20px; font-size: var(--fs-content-sm); }

/* Collapsible details */
details.callout {
  padding: 0;
  cursor: default;
}
details.callout summary {
  padding: 14px 24px;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-note);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.callout summary::-webkit-details-marker { display: none; }
details.callout summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
}
details[open].callout summary::after { content: '−'; }
details.callout .callout-body {
  padding: 0 24px 20px;
  font-size: var(--fs-content);
  color: var(--ink-soft);
  line-height: 1.6;
}
details.callout .callout-body p + p { margin-top: 10px; }

/* =========================================================================
   TABS (SearchV7)
   ========================================================================= */
.tabs-nav {
  display: flex;
  list-style: none;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tabs-nav button {
  background: none;
  border: none;
  padding: 14px 28px;
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--quiet);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.tabs-nav button:hover { color: var(--ink); }
.tabs-nav button.active {
  color: var(--rust);
  border-bottom-color: var(--rust);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 32px 28px;
  margin-top: 64px;
}
.footer-inner { max-width: var(--container); margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(251, 245, 228, 0.12);
}
.footer-brand h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--gold-bright);
  font-style: italic;
}
.footer-brand p {
  font-size: var(--fs-content);
  line-height: 1.6;
  color: rgba(251, 245, 228, 0.7);
  max-width: 380px;
}
.footer-col h5 {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: var(--fs-content); color: rgba(251, 245, 228, 0.75); }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--fs-meta);
  color: rgba(251, 245, 228, 0.5);
}
.footer-bottom a { color: rgba(251, 245, 228, 0.7); }
.footer-bottom a:hover { color: var(--gold-bright); }

/* =========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================= */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 800px) {
  .nav-inner { padding: 0 16px; overflow-x: auto; }
  .utility-inner { padding: 8px 16px; }
  .utility-left, .utility-right { gap: 16px; flex-wrap: wrap; }
  .section-title h1,
  .section-title h2 { font-size: 28px; }
  .tabs-nav button { padding: 12px 18px; font-size: var(--fs-note); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* === Utility bar "Join" CTA enhancement === */
/* Make the Join link visually heavier than other utility items —
   gold background, contrast color, slight padding, no underline.
   Targets the FIRST utility-right link, which is consistently "Join" across all pages. */
.utility-bar .utility-right a[href*="membership-form"] {
  background: var(--gold-bright);
  color: var(--ink);
  padding: 4px 12px;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  transition: background 0.15s, color 0.15s;
}
.utility-bar .utility-right a[href*="membership-form"]:hover {
  background: var(--rust);
  color: var(--paper);
}

/* Don't change active link color on hover — it's already in its destination */
.main-nav .nav-links li a.active:hover {
  color: var(--ink);
}