/* Philip Board author site. Cleaner, faster take on the current look.
   Background colors sampled Friday, Nov 13, 2026 from the live WordPress
   Elementor CSS and the section background images it uses:
   - #080808: footer background image Untitled-33.png (average and median)
   - #211416: hero background image Untitled-1.png (median)
   - #330f0e: mid-page background image Untitled-3.png (average)
   - #bc202d: brand red from Elementor CSS, Untitled-5.png, and Rectangle-35.png
   - #ffffff: header bar (live nav text is #000000 on a light header)
   - #e85a64: a lighter tint of the brand red, used for links and small labels
     on dark backgrounds so body text contrast stays at least 4.5:1
*/
:root {
  --red: #bc202d;
  --red-dark: #8f1822;
  --red-bright: #e85a64;
  --ink: #f5f0f0;
  --ink-on-light: #161616;
  --muted: #c9b8b8;
  --line: #3a2a2c;
  --page: #080808;
  --paper: #211416;
  --alt: #330f0e;
  --card: #161010;
  --white: #ffffff;
  --header: #ffffff;
  --footer: #080808;
  --max: 1120px;
  --radius: 14px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, .brand-word {
  font-family: Questrial, Poppins, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
  color: var(--white);
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.skip {
  position: absolute; left: -999px; top: 0;
}
.skip:focus { left: 16px; top: 16px; background: #fff; color: var(--ink-on-light); padding: 8px 12px; z-index: 100; }

/* Header stays light, matching the live site nav (black text on a white bar). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e1db;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0;
}
/* Wordmark colors from the book cover: dark teal #0c2424 (top of the cover)
   and maroon #542418 (cover title field). The previous business logo is not used. */
.logo {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; line-height: 1.1; color: inherit; text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-name {
  font-family: Questrial, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0c2424;
}
.logo-book {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #542418;
}
nav.main-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav.main-nav a {
  display: block; padding: 8px 12px; color: var(--ink-on-light); font-size: 0.92rem; font-weight: 500;
  border-radius: 999px;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"] {
  background: #f6ecec; color: var(--red); text-decoration: none;
}
.nav-toggle {
  display: none; background: none; border: 0; font: inherit; cursor: pointer; color: var(--ink-on-light);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--white); color: var(--ink-on-light); }
.btn-light { background: #fff; color: var(--red); }
.btn-light:hover { background: #f6ecec; color: var(--red-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.2em 0 0; }

/* Hero and sections */
.hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--page) 100%);
  padding: 48px 0 64px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--red-bright); font-weight: 600; margin-bottom: 10px; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 38rem; }
.cover-wrap { display: flex; justify-content: center; }
.cover-wrap img {
  width: min(360px, 100%); border-radius: 8px; box-shadow: var(--shadow);
}
.section { padding: 72px 0; }
.section.alt { background: var(--alt); }
.section-head { max-width: 40rem; margin-bottom: 32px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split img { border-radius: var(--radius); width: 100%; object-fit: cover; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 1.4em 0; }
.specs dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; color: var(--white); }

/* Buy cards */
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.store-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; min-height: 160px; display: flex; flex-direction: column; gap: 8px;
}
.store-card.featured { border: 2px solid var(--red); box-shadow: var(--shadow); }
.store-card h3 { margin-bottom: 0.2em; }
.store-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-bright); }
.pending { background: #3a1a1c; color: var(--red-bright); }

/* Blog cards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.card:hover { text-decoration: none; transform: translateY(-2px); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-body { padding: 18px 18px 22px; }
.card-body h3 { font-size: 1.15rem; }
.card-body p { color: var(--muted); font-size: 0.95rem; }

/* Testimonials, matching the live #bc202d testimonial slides with white text. */
.section:has(.quotes) {
  background: var(--red);
  color: var(--white);
}
.section:has(.quotes) h2,
.section:has(.quotes) h3,
.section:has(.quotes) .eyebrow {
  color: var(--white);
}
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.quote {
  background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius); padding: 22px;
}
.quote p { font-size: 0.98rem; color: var(--white); }
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.quote-who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote-who strong { display: block; color: var(--white); }

/* Article */
.prose { max-width: 44rem; margin: 0 auto; }
.prose h1 { margin-top: 0; }
.prose h2, .prose h3 { margin-top: 1.4em; }
.article-hero { padding: 48px 0 12px; }
.meta { color: var(--muted); font-size: 0.92rem; }

/* Forms: light fields keep typed text easy to read on the dark page. */
form.contact { max-width: 36rem; display: grid; gap: 14px; }
label { font-weight: 600; font-size: 0.92rem; }
input, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: #fff; color: var(--ink-on-light);
}
input:focus, textarea:focus { outline: 2px solid var(--red); border-color: var(--red); }
.form-status { margin-top: 10px; font-weight: 600; }
.form-status.ok { color: #7dcea0; }
.form-status.err { color: var(--red-bright); }

/* Video */
.video-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.video-frame video, .video-frame iframe, .video-frame img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.notice {
  background: #3a3114; border: 1px solid #c4a44a; color: #f5e6b8;
  padding: 14px 16px; border-radius: 10px; margin: 0 0 24px;
}
.notice.review { background: #3a1a1c; border-color: #e2b4b8; color: #f2c4c8; }

/* Unavailable / hidden */
.unavailable { text-align: center; padding: 80px 0; max-width: 36rem; margin: 0 auto; }

/* Footer */
.site-footer { background: var(--footer); color: #f3f3f3; padding: 48px 0 24px; margin-top: 0; border-top: 6px solid var(--red); }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 8px; }
.copy { border-top: 1px solid #333; margin-top: 32px; padding-top: 16px; color: #bdbdbd; font-size: 0.88rem; }

@media (max-width: 880px) {
  .hero-grid, .split, .card-grid, .quotes, .footer-grid { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  nav.main-nav { display: none; width: 100%; }
  nav.main-nav.open { display: block; }
  nav.main-nav ul { flex-direction: column; padding: 0 0 12px; }
  .header-inner { flex-wrap: wrap; }
}

/* Audiobook (hidden section) */
.track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.track-list .track {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.track-list .track div { display: flex; flex-direction: column; gap: 2px; }
.track-list .track span { color: var(--ink); }
.placeholder-label { color: var(--muted); font-size: 0.88rem; font-style: italic; }
#buy-audiobook[aria-disabled="true"] { opacity: 0.7; cursor: not-allowed; }