/* Penelope Wheezer — author site. Shared styles.
   Palette: deep navy #072235, gold #FDCE64, pale teal #A9D1CC (the Matty cover colors),
   on a warm paper background. Modeled on the Capricorn Creations Books page. */
:root {
  --bg: #f7f1e5;
  --surface: #fffaf1;
  --ink: #221d18;
  --muted: #6d5c4c;
  --line: #dccbb2;
  --navy: #072235;
  --navy-2: #0d3350;
  --gold: #FDCE64;
  --gold-dark: #9a6b12;
  --teal: #A9D1CC;
  --teal-dark: #2e6f6a;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(7, 34, 53, .14);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.6;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }
a { color: var(--teal-dark); }

/* Header band + nav */
header.band {
  background: var(--navy);
  background-image: radial-gradient(1.5px 1.5px at 12% 30%, #ffffffcc 50%, transparent 51%), radial-gradient(1px 1px at 78% 18%, #ffffff99 50%, transparent 51%), radial-gradient(1.2px 1.2px at 55% 70%, #ffffffaa 50%, transparent 51%), radial-gradient(1px 1px at 32% 82%, #ffffff88 50%, transparent 51%), radial-gradient(1.4px 1.4px at 90% 62%, #ffffffbb 50%, transparent 51%), radial-gradient(1px 1px at 5% 65%, #ffffff99 50%, transparent 51%);
  color: #fdf8ee;
  padding: 40px 0 30px;
  text-align: center;
}
header.band .kicker { margin: 0 0 8px; color: var(--gold); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
header.band h1 { margin: 0; font: 700 2.5rem/1.1 "Newsreader", Georgia, serif; }
header.band .sub { margin: 12px auto 0; max-width: 600px; color: var(--teal); font-size: 1.02rem; }
nav.main {
  background: var(--navy-2);
  padding: 10px 0;
}
nav.main .wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
nav.main a {
  color: #fdf8ee; text-decoration: none; font-weight: 700; font-size: .98rem;
  padding: 6px 2px;
}
nav.main a:hover { color: var(--gold); text-decoration: underline; }
nav.main a[aria-current="page"] { color: var(--gold); border-bottom: 2px solid var(--gold); }

/* Content */
main { padding: 10px 0 6px; }
.intro { margin: 18px 0 6px; font-size: 1.06rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  margin: 26px 0;
}
.card h2 { margin: 0 0 10px; font: 700 1.65rem/1.15 "Newsreader", Georgia, serif; }
.card .kicker { margin: 0 0 4px; color: var(--gold-dark); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.card p { margin: 0 0 9px; }
.card p.punch { font-weight: 700; }
.card ul { margin: 6px 0 12px; padding-left: 22px; }
.card li { margin-bottom: 6px; }

/* Hero cover row (home) */
.covers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 26px 0 6px;
}
.covers figure { margin: 0; }
.covers img {
  width: 100%; height: 250px; object-fit: contain; display: block;
  background: var(--navy);
  border-radius: 10px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.covers figcaption { margin-top: 8px; text-align: center; font-size: .9rem; color: var(--muted); font-weight: 700; }

/* Section link cards (home) */
.linkcards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0; }
.linkcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; text-decoration: none; color: var(--ink);
  display: block;
}
.linkcard:hover { border-color: var(--gold-dark); }
.linkcard h3 { margin: 0 0 6px; font: 700 1.3rem/1.2 "Newsreader", Georgia, serif; color: var(--navy); }
.linkcard p { margin: 0; color: var(--muted); font-size: .98rem; }
.linkcard .go { color: var(--gold-dark); font-weight: 700; }

/* Book entries */
.book img.cover { width: 100%; height: auto; display: block; border-radius: 10px; }
.book .byline { margin: 0 0 10px; color: var(--muted); font-weight: 700; }
.bookrow { display: grid; grid-template-columns: 240px 1fr; gap: 26px; }
.buyrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.price { font-weight: 700; color: var(--muted); }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  background: var(--navy); color: #fdf8ee; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.btn:hover { background: var(--navy-2); }
.btn.gold { background: var(--gold); color: #2c1d13; }
.btn.gold:hover { background: #ffd97e; }
.tagline {
  font: italic 600 1.25rem/1.4 "Newsreader", Georgia, serif;
  color: var(--navy); text-align: center; margin: 6px 0 16px;
}

/* Video facade (click-to-play) */
.vidfacade { position: relative; aspect-ratio: 9/16; max-width: 340px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: var(--navy); display: block; text-decoration: none; }
.vidfacade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vidfacade .playbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(7,34,53,.85); border: 3px solid var(--gold); }
.vidfacade .playbtn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-38%,-50%); border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent var(--gold); }
.vidfacade:hover .playbtn { transform: translate(-50%,-50%) scale(1.07); background: rgba(7,34,53,.97); }
.vidfacade .vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; color: #fdf8ee; font-weight: 700; background: linear-gradient(transparent, rgba(4,18,29,.85)); }
.vsub { margin: 0 0 16px; color: var(--muted); text-align: center; }

/* Story text (How This Book Began) */
.story p { margin: 0 0 12px; }
.story .signoff { margin-top: 18px; font-weight: 700; }

/* Chapter timing list */
.chapters { columns: 2; column-gap: 34px; margin: 6px 0 12px; padding-left: 22px; }
.chapters li { margin-bottom: 7px; break-inside: avoid; }

footer { padding: 30px 0 40px; color: var(--muted); font-size: .9rem; }
footer .wrap { border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--gold-dark); font-weight: 700; text-decoration: none; }

@media (max-width: 700px) {
  header.band h1 { font-size: 2rem; }
  .covers { grid-template-columns: repeat(2, 1fr); }
  .linkcards { grid-template-columns: 1fr; }
  .bookrow { grid-template-columns: 1fr; }
  .bookrow img.cover { max-width: 260px; margin: 0 auto; }
  .chapters { columns: 1; }
  .card { padding: 18px; }
  .btn { width: 100%; justify-content: center; }
}