/*
Theme Name: Records to the People
Theme URI: https://recordstothepeople.com
Author: Records to the People
Description: The Records to the People archive as a WordPress theme. 406 records of Black music history, 25 written chapters, a year of curriculum, and the print editions. The archive renders from static data inside the theme; WordPress handles the surrounding site, and the two print editions are sold through Easy Digital Downloads.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: records-to-the-people
*/

/* The archive brings its own styles. These cover ordinary WordPress pages,
   posts and the admin-facing side of the site, in the same visual language. */

:root {
  --rttp-bg: #f3f2f2;
  --rttp-ink: #201e1d;
  --rttp-accent: #ec3013;
  --rttp-rule: rgba(32, 30, 29, 0.25);
}

body {
  margin: 0;
  background: var(--rttp-bg);
  color: var(--rttp-ink);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rttp-ink); text-decoration: none; }
a:hover { color: var(--rttp-accent); }
a:focus-visible { outline: 2px solid var(--rttp-accent); outline-offset: 2px; }
::selection { background: rgba(32, 30, 29, 0.14); }

.rttp-wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

.rttp-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 2px solid var(--rttp-ink);
}
.rttp-brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rttp-brand span { color: var(--rttp-accent); }
.rttp-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.rttp-nav a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rttp-main { padding: 64px 0 96px; }
.rttp-main h1 {
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.rttp-main h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 48px 0 12px;
}
.rttp-main h3 { font-size: 19px; font-weight: 800; margin: 32px 0 8px; }
.rttp-main p, .rttp-main li { max-width: 68ch; text-wrap: pretty; }
.rttp-main img { max-width: 100%; height: auto; filter: grayscale(1); }
.rttp-main blockquote {
  margin: 32px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--rttp-ink);
  font-size: 21px;
  line-height: 1.5;
}
.rttp-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(32, 30, 29, 0.65);
  margin: 0 0 12px;
}

.rttp-list { display: grid; gap: 0; border-top: 2px solid var(--rttp-ink); margin: 32px 0 0; }
.rttp-list article { padding: 24px 0; border-bottom: 1px solid var(--rttp-rule); }
.rttp-list h2 { margin: 0 0 6px; font-size: 22px; }

.rttp-foot {
  padding: 24px 0 64px;
  border-top: 2px solid var(--rttp-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(32, 30, 29, 0.65);
}

.rttp-btn {
  display: inline-block;
  padding: 14px 20px;
  background: var(--rttp-accent);
  color: var(--rttp-bg);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
}
.rttp-btn:hover { background: #c92a10; color: var(--rttp-bg); }