/* ═══════════════════════════════════════════════════════════
   MILLIONS OF WORDS — VISUAL IDENTITY
   ═══════════════════════════════════════════════════════════
   Single source of truth for the sticker engine, site layout,
   and shared UI components. Every frontend page loads this.
   ═══════════════════════════════════════════════════════════ */


/* ── Sticker engine ────────────────────────────────────────
   The core technique: three layers stacked via pseudo-elements.
   Apply data-text="{{ text }}" on the element so ::before/::after
   can replicate the text. Works on any inline/inline-block element.
   ────────────────────────────────────────────────────────── */
.sticker,
.site-title,
.nav-link,
.page-title,
.back-sticker {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-family: 'Bungee', sans-serif;
  text-transform: uppercase;
  line-height: 1;
  color: #ffffff;
}

.sticker::before,
.site-title::before,
.nav-link::before,
.page-title::before,
.back-sticker::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #000000;
  -webkit-text-stroke: 0.07em #000000;
  paint-order: stroke fill;
  z-index: -1;
}

.sticker::after,
.site-title::after,
.nav-link::after,
.page-title::after,
.back-sticker::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #000000;
  -webkit-text-stroke: 0.15em #001200;
  paint-order: stroke fill;
  z-index: -2;
}

/* ── Sticker size/shadow variants ──────────────────────────
   Default .sticker is medium. Named variants have fixed roles.
   ────────────────────────────────────────────────────────── */

/* Generic sticker — medium, usable for any purpose */
.sticker {
  filter: drop-shadow(-4px 4px 0px #b8860b);
}

/* Site logo */
.site-title {
  font-size: clamp(48px, 8vw, 80px);
  letter-spacing: 2px;
  line-height: 0.9;
  filter: drop-shadow(-6px 6px 0px #b8860b);
}

/* Page h1 on sub-pages */
.page-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: 1px;
  filter: drop-shadow(-4px 4px 0px #b8860b);
}

/* Nav links — small, nowrap */
.nav-link {
  font-size: clamp(14px, 2vw, 22px);
  letter-spacing: 1px;
  white-space: nowrap;
  text-decoration: none;
  filter: drop-shadow(-2px 2px 0px #b8860b);
  transition: filter 0.15s ease;
}
.nav-link:hover {
  filter: drop-shadow(-4px 4px 0px #b8860b);
}
.nav-link:focus-visible {
  outline: 2px solid #b8860b;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Back button text */
.back-sticker {
  font-size: clamp(1rem, 2vw, 1.4rem);
  filter: drop-shadow(-3px 3px 0px #b8860b);
}

/* ── Site header ────────────────────────────────────────────
   Shared across all frontend pages.
   ────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid #2e6040;
  overflow: hidden;
}

.site-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
}

.site-header-title {
  overflow: visible;
  min-width: 0;
}

.site-header-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ── Back button wrapper ────────────────────────────────────
   Used on all sub-pages to navigate back.
   ────────────────────────────────────────────────────────── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: #8b949e;
  transition: color 0.12s;
}
.back-btn:hover { color: #e6edf3; }
.back-btn:focus-visible {
  outline: 2px solid #c44060;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Page hero band ─────────────────────────────────────────
   Banner below the site-header on sub-pages.
   ────────────────────────────────────────────────────────── */
.page-hero {
  border-bottom: 1px solid #2e6040;
  padding: 2rem 0 1.75rem;
}
.page-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Page content wrapper ───────────────────────────────────
   Centered, padded content area.
   ────────────────────────────────────────────────────────── */
.page-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Search input ───────────────────────────────────────────
   Used on All Albums, etc.
   ────────────────────────────────────────────────────────── */
.search-input {
  width: 100%;
  background: #172817;
  border: 1px solid #2e6040;
  border-radius: 4px;
  color: #e6edf3;
  font-size: 0.875rem;
  padding: 0.6rem 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: #c44060; }
.search-input::placeholder { color: #6e7681; }

/* ── Data table ─────────────────────────────────────────────
   Used on All Albums, All Words, etc.
   ────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: #c9d1d9;
}
.data-table thead th {
  padding: 0.6rem 1rem;
  text-align: left;
  font-size: 0.6rem;
  color: #6e7681;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 2px solid #2e6040;
  white-space: nowrap;
  background: var(--bg-primary);
}
.data-table thead th button {
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  font-family: inherit;
}
.data-table thead th button:hover { color: #e6edf3; }
.data-table tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid #1e3c24;
}
.data-table tbody tr:hover td { background: #172817; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .cell-primary a {
  color: #e6edf3;
  text-decoration: none;
  font-weight: 500;
}
.data-table .cell-primary a:hover { color: #c44060; }
.data-table .cell-muted { color: #6e7681; font-size: 0.75rem; }

/* ── Prose ──────────────────────────────────────────────────
   Body text for content-heavy pages like About.
   ────────────────────────────────────────────────────────── */
.prose {
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.75;
  color: #c9d1d9;
}
.prose p + p { margin-top: 1.25rem; }
.prose a { color: #c44060; }
.prose a:hover { color: #e6edf3; text-decoration: underline; }

/* ── Word cloud ─────────────────────────────────────────────
   All Words frequency cloud.
   ────────────────────────────────────────────────────────── */
.word-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.word-cloud-item { color: #c9d1d9; line-height: 1.2; transition: color 0.1s; cursor: default; }
.word-cloud-item:hover { color: #c44060; }
.word-cloud-item.freq-xl { font-size: 2.2rem; font-weight: 700; }
.word-cloud-item.freq-lg { font-size: 1.5rem; font-weight: 600; }
.word-cloud-item.freq-md { font-size: 1.05rem; }
.word-cloud-item.freq-sm { font-size: 0.8rem; color: #6e7681; }