/* ==========================================================
   Base styles shared by every page.
   Load this first, then the page's own stylesheet.

   1. Design tokens   (colors, fonts, spacing; change them here)
   2. Reset
   3. Page defaults
   4. Site header
   5. Page title label
   6. Utilities
   ========================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Paper and ink */
  --color-manila: #f6ecd0; /* card stock */
  --color-cream: #e8dcc0;
  --color-card-bg: #d8c08f; /* punch-card desk behind the cards */
  --color-ink: #2b2a26;
  --color-ink-soft: #5c5240;
  --color-ink-faded: #6b5d40;
  --color-rule: #3f3a2e; /* printed lines on the cards */
  --color-line: #c9b88a;
  --color-border: #dccb9b;
  --color-slot: #4a3d26; /* the punch slot at the top of a card */
  --color-tan: #c9b48a;
  --color-tan-dark: #8a7550;

  /* Stamp colors */
  --color-red: #b4372f;
  --color-red-dark: #942b24;
  --color-blue: #1e3a8a;
  --color-blue-dark: #172e6e;
  --color-green: #15803d;
  --color-amber: #f2b84b; /* also the keyboard focus ring */

  /* Type */
  --font-body: 'Courier Prime', 'Courier New', monospace;
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-screen: 'VT323', 'Courier New', monospace;

  /* Shape */
  --radius: 6px;
  --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.2);
  --focus-ring: 3px solid var(--color-amber);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* ---------- 3. Page defaults ---------- */
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-card-bg);
  background-image: url('../assets/punch-pattern.svg');
  background-size: 200px 300px;
  background-attachment: fixed;
}

a {
  color: var(--color-blue);
}

a:hover {
  color: var(--color-red);
}

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

/* ---------- 4. Site header (same on every page) ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background-color: var(--color-manila);
  border-bottom: 2px solid var(--color-rule);
}

.logo {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-ink);
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.nav a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav a[aria-current='page'] {
  color: var(--color-red);
}

/* ---------- 5. Page title label ---------- */
.page-header {
  width: calc(100% - 32px);
  max-width: 640px;
  margin: 24px auto 8px;
  padding: 24px 20px;
  text-align: center;
  background-color: var(--color-manila);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: 8px;
}

.page-header p {
  color: var(--color-ink-soft);
}

/* ---------- 6. Utilities ---------- */

/* Read by screen readers, hidden on screen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The hidden attribute always wins over display rules */
[hidden] {
  display: none !important;
}

/* Each page stylesheet also tones down its own animations. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}