/*
 * KANSAS BOOK DEPOSITORY — MASTER DESIGN SYSTEM
 * Version 1.1 | 2026-08-18
 *
 * Visual source: KBD-Logo.png
 * Brand character: warm, institutional, archival, trustworthy.
 *
 * EXTRACTED LOGO COLORS
 *   Depository Navy  #012751  — primary mark and dominant brand color
 *   Paper White      #FEFEFE  — secondary/logo negative space
 *
 * SUPPORTING WEB PALETTE
 *   Archive Cream    #F6F1E7  — default page background
 *   Aged Paper       #E9DECA  — alternating sections and subtle panels
 *   Charcoal Ink     #292824  — primary body copy
 *   Muted Ink        #64615A  — secondary copy and metadata
 *   Brass            #A8782F  — restrained warm accent; rules/icons only
 *   Archive Blue     #163B5F  — secondary navy surface
 *
 * TYPOGRAPHY
 *   Display/headings: sturdy slab serif, echoing the logo's institutional
 *   block lettering. Preferred: Roboto Slab. Fallback: Rockwell/Georgia.
 *   Labels/navigation: condensed industrial sans with generous tracking.
 *   Preferred: Oswald. Fallback: Arial Narrow/system sans.
 *   Body: clean, highly readable humanist sans. Preferred: Source Sans 3.
 *   Fallback: Segoe UI/system sans.
 *
 * If web fonts are available, load:
 *   Roboto Slab 600–800, Oswald 500–700, Source Sans 3 400–700.
 * Do not substitute decorative vintage fonts for body copy.
 *
 * LOGO USE
 *   Keep the supplied artwork navy/white. Do not recolor the sunflower.
 *   Maintain clear space of at least 10% of the displayed logo width.
 *   Place on Paper White or Archive Cream; never on a busy photograph.
 *
 * VOICE AND CONTENT PRINCIPLES
 *   KBD is a knowledgeable first point of contact, not a restrictive gatekeeper.
 *   Invite people to show us the books before they sort, donate, or discard them.
 *   Do not publish a long accept/do-not-accept list that asks owners to evaluate
 *   their own material. Every collection is different; KBD makes the decision
 *   after considering the books, their subjects, condition, history, and the
 *   collection as a whole.
 *   Use clear, ordinary language: "You do not need to be a book expert."
 *   Project care, judgment, and professional bookselling knowledge without
 *   exaggeration, sentimentality, or unsupported claims about value.
 *   Respect provenance when it is known, but never imply that a collection must
 *   have documented provenance to deserve thoughtful evaluation.
 *   Present practical outcomes honestly: purchase, individual sale, placement,
 *   research hold, donation, or responsible removal.
 *
 * CORE MESSAGE
 *   "Let us see the books before you decide what they are worth—or what should
 *   happen to them."
 */

:root {
  color-scheme: light;

  /* Core brand colors */
  --kbd-navy: #012751;
  --kbd-paper-white: #fefefe;

  /* Supporting palette */
  --kbd-cream: #f6f1e7;
  --kbd-aged-paper: #e9deca;
  --kbd-charcoal: #292824;
  --kbd-muted-ink: #64615a;
  --kbd-brass: #a8782f;
  --kbd-archive-blue: #163b5f;
  --kbd-rule: #c8bda8;

  /* Interaction colors */
  --kbd-navy-hover: #001d3d;
  --kbd-link: #0b466f;
  --kbd-focus: #b77a22;
  --kbd-error: #8b2f2f;
  --kbd-success: #356342;

  /* Semantic assignments */
  --kbd-color-page: var(--kbd-cream);
  --kbd-color-surface: var(--kbd-paper-white);
  --kbd-color-surface-alt: var(--kbd-aged-paper);
  --kbd-color-text: var(--kbd-charcoal);
  --kbd-color-text-muted: var(--kbd-muted-ink);
  --kbd-color-heading: var(--kbd-navy);
  --kbd-color-border: var(--kbd-rule);

  /* Type families */
  --kbd-font-display: "Roboto Slab", Rockwell, "Rockwell Nova", Georgia, serif;
  --kbd-font-label: Oswald, "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --kbd-font-body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --kbd-text-xs: 0.79rem;
  --kbd-text-sm: 0.9rem;
  --kbd-text-base: 1rem;
  --kbd-text-lg: clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  --kbd-text-h3: clamp(1.35rem, 1.18rem + 0.75vw, 1.75rem);
  --kbd-text-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  --kbd-text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);

  /* Spacing: 4px base rhythm */
  --kbd-space-1: 0.25rem;
  --kbd-space-2: 0.5rem;
  --kbd-space-3: 0.75rem;
  --kbd-space-4: 1rem;
  --kbd-space-5: 1.5rem;
  --kbd-space-6: 2rem;
  --kbd-space-7: 3rem;
  --kbd-space-8: 4.5rem;

  /* Shape, borders, and depth */
  --kbd-radius-sm: 0.2rem;
  --kbd-radius-md: 0.35rem;
  --kbd-border-thin: 1px solid var(--kbd-rule);
  --kbd-border-strong: 3px solid var(--kbd-navy);
  --kbd-shadow-sm: 0 2px 10px rgb(1 39 81 / 0.08);
  --kbd-shadow-md: 0 8px 28px rgb(1 39 81 / 0.12);
  --kbd-content-width: 72rem;
  --kbd-reading-width: 44rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--kbd-color-page);
  color: var(--kbd-color-text);
  font-family: var(--kbd-font-body);
  font-size: var(--kbd-text-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--kbd-space-4);
  color: var(--kbd-color-heading);
  font-family: var(--kbd-font-display);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: var(--kbd-text-h1); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--kbd-text-h2); }
h3 { font-size: var(--kbd-text-h3); }
h4 { font-size: var(--kbd-text-lg); }

p {
  margin: 0 0 var(--kbd-space-5);
  max-width: var(--kbd-reading-width);
}

a {
  color: var(--kbd-link);
  text-decoration-color: rgb(11 70 111 / 0.45);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--kbd-navy);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--kbd-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--kbd-aged-paper);
  color: var(--kbd-navy);
}

.kbd-container {
  width: min(100% - 2rem, var(--kbd-content-width));
  margin-inline: auto;
}

.kbd-section {
  padding-block: clamp(var(--kbd-space-7), 6vw, var(--kbd-space-8));
}

.kbd-section--paper { background: var(--kbd-paper-white); }
.kbd-section--aged { background: var(--kbd-aged-paper); }
.kbd-section--navy { background: var(--kbd-navy); color: var(--kbd-paper-white); }
.kbd-section--navy :is(h1, h2, h3, h4, a) { color: var(--kbd-paper-white); }

.kbd-eyebrow,
.kbd-nav,
.kbd-meta,
.kbd-button {
  font-family: var(--kbd-font-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kbd-eyebrow {
  margin-bottom: var(--kbd-space-3);
  color: var(--kbd-navy);
  font-size: var(--kbd-text-sm);
}

.kbd-eyebrow::before {
  display: inline-block;
  width: 2rem;
  height: 2px;
  margin-right: var(--kbd-space-3);
  background: var(--kbd-brass);
  vertical-align: middle;
  content: "";
}

.kbd-meta {
  color: var(--kbd-color-text-muted);
  font-size: var(--kbd-text-xs);
}

.kbd-lede {
  color: var(--kbd-archive-blue);
  font-family: var(--kbd-font-display);
  font-size: var(--kbd-text-lg);
  line-height: 1.55;
}

.kbd-rule {
  width: 4rem;
  height: 3px;
  margin-block: var(--kbd-space-5);
  border: 0;
  background: var(--kbd-brass);
}

.kbd-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--kbd-space-2);
  padding: 0.7rem 1.2rem;
  border: 2px solid var(--kbd-navy);
  border-radius: var(--kbd-radius-sm);
  background: var(--kbd-navy);
  color: var(--kbd-paper-white);
  font-size: var(--kbd-text-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.kbd-button:hover {
  border-color: var(--kbd-navy-hover);
  background: var(--kbd-navy-hover);
  color: var(--kbd-paper-white);
}

.kbd-button--secondary {
  background: transparent;
  color: var(--kbd-navy);
}

.kbd-button--secondary:hover {
  background: var(--kbd-navy);
  color: var(--kbd-paper-white);
}

.kbd-card {
  padding: clamp(var(--kbd-space-5), 3vw, var(--kbd-space-6));
  border: var(--kbd-border-thin);
  border-top: var(--kbd-border-strong);
  border-radius: var(--kbd-radius-md);
  background: var(--kbd-color-surface);
  box-shadow: var(--kbd-shadow-sm);
}

.kbd-card > :last-child {
  margin-bottom: 0;
}

.kbd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--kbd-space-5);
}

label {
  display: block;
  margin-bottom: var(--kbd-space-2);
  color: var(--kbd-navy);
  font-family: var(--kbd-font-label);
  font-size: var(--kbd-text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: var(--kbd-border-thin);
  border-radius: var(--kbd-radius-sm);
  background: var(--kbd-paper-white);
  color: var(--kbd-charcoal);
  font: inherit;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--kbd-navy);
}

.kbd-site-header {
  border-bottom: 1px solid rgb(1 39 81 / 0.22);
  background: rgb(254 254 254 / 0.96);
  box-shadow: var(--kbd-shadow-sm);
}

.kbd-logo {
  width: clamp(8rem, 16vw, 12rem);
  height: auto;
}

.kbd-site-footer {
  padding-block: var(--kbd-space-7);
  border-top: 4px solid var(--kbd-brass);
  background: var(--kbd-navy);
  color: var(--kbd-paper-white);
}

/* Design guardrails
 * 1. Navy leads; brass is punctuation, not a large background field.
 * 2. Prefer cream and paper-white fields to stark gray UI surfaces.
 * 3. Use square-to-soft corners; avoid pill-shaped cards and buttons.
 * 4. Use archival imagery with natural color and generous negative space.
 * 5. Keep all-caps condensed type to short labels, navigation, and metadata.
 * 6. Maintain a minimum 4.5:1 text contrast and visible keyboard focus.
 */

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

@media print {
  body { background: #fff; color: #000; }
  .kbd-button { border-color: #000; background: transparent; color: #000; }
}