/* D. J. MacIain — djmaciain.com
   Palette drawn from the Dangerous Dames and Knucklehead covers */

:root {
  --ink:      #0b0a08;  /* Knucklehead black */
  --smoke:    #1a1714;  /* warm near-black for panels */
  --oxblood:  #330709;  /* Dangerous Dames title band */
  --slate:    #1f3439;  /* Dangerous Dames smoke-teal */
  --aqua:     #a8dce0;  /* Dangerous Dames title */
  --gold:     #c08f2e;  /* Dangerous Dames rules */
  --amber:    #f2c14e;  /* Knucklehead title */
  --tan:      #d6c69a;  /* Knucklehead author name */
  --brick:    #a3302c;  /* Knucklehead underline */
  --silver:   #c8c5c3;  /* Dangerous Dames author name */
  --text:     #e6e0d4;

  --display: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --body:    "Libre Baskerville", Baskerville, Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(242, 193, 78, 0.14), transparent 70%),
    var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--amber); }
a:hover, a:focus-visible { color: var(--aqua); }

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

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--amber); color: var(--ink);
  padding: 0.5rem 1rem; z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { width: min(62rem, 100% - 2rem); margin-inline: auto; }

/* ---------- Header ---------- */

.site-header {
  text-align: center;
  padding: 4.5rem 0 3rem;
}

.author-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--tan);
  margin: 0;
}

.rule {
  border: 0;
  height: 3px;
  width: min(22rem, 70%);
  margin: 1.5rem auto;
  background: var(--brick);
}

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 2rem;
}
.site-nav a {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--silver);
  text-decoration: none;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--amber); }

/* Name and its red rule: the rule runs just past the first and last letters */
.name-block { display: inline-block; }
.name-block .rule { width: calc(100% + 1rem); margin: 1.25rem -0.5rem 1.5rem; }

/* ---------- Book feature (Dangerous Dames palette) ---------- */

.book {
  background: var(--oxblood);
  border-block: 6px solid var(--gold);
  padding: 3.5rem 0;
}

.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr;
  gap: 3rem;
  align-items: center;
}

.cover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.book-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  color: var(--aqua);
  margin: 0;
}

.series {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--silver);
  margin: 0.5rem 0 1.5rem;
}

.blurb { margin: 0 0 2rem; max-width: 36rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--aqua); color: var(--ink); }

.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover, .btn-amber:focus-visible { background: transparent; color: var(--amber); border-color: var(--amber); }

/* ---------- Reader magnet (Knucklehead palette) ---------- */

.magnet {
  padding: 4.5rem 0;
  background:
    radial-gradient(ellipse 50% 60% at 30% 40%, rgba(214, 198, 154, 0.08), transparent 70%),
    var(--smoke);
}

.magnet-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 16rem);
  gap: 3rem;
  align-items: center;
}

.kicker {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--tan);
  margin: 0;
}

.magnet-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0.25rem 0 0;
  line-height: 1.1;
}

.magnet .rule { margin: 1rem 0 1.5rem; width: min(18rem, 80%); }

.magnet p { max-width: 34rem; }

.signup-embed { margin-top: 1.5rem; }

/* ---------- Footer (Dangerous Dames smoke-teal) ---------- */

.site-footer {
  background: var(--slate);
  border-top: 6px solid var(--gold);
  padding: 2.5rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--silver);
}
.site-footer p { margin: 0.35rem 0; }
.site-footer a { color: var(--silver); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--amber); }
.imprint { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--text); }

/* ---------- Privacy / text pages ---------- */

.page {
  padding: 1rem 0 4rem;
}
.page .wrap { max-width: 44rem; }
.page h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--aqua);
  margin: 0 0 0.25rem;
}
.page h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--amber);
  margin: 2.25rem 0 0.5rem;
}
.page .updated { font-style: italic; color: var(--tan); margin-top: 0; }
.page ul { padding-left: 1.25rem; }
.page li { margin-bottom: 0.4rem; }

/* ---------- Small screens ---------- */

@media (max-width: 44rem) {
  .book-grid, .magnet-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cover-wrap { max-width: 15rem; margin-inline: auto; }
  .magnet-grid .cover-wrap { order: -1; }
  .book-copy, .magnet-copy { text-align: center; }
  .blurb, .magnet p { margin-inline: auto; }
  .magnet .rule { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}