/* ============================================================
   CHARLES E. CHUMLEY - AUTHOR SITE
   Design tokens
   ============================================================ */

:root {
  /* Sand / memoir palette */
  --cream: #F5F0E8;
  --cream-deep: #ECE3D2;
  --sand: #8B7355;
  --sand-light: #B4A186;
  --ink: #2B2420;
  --navy: #1F2E3D;
  --navy-deep: #16222E;
  --gold: #C9A66B;

  /* Kids' series palette */
  --coral: #FF6B4A;
  --teal: #1D9A93;
  --sunshine: #F4B942;
  --violet: #7B5EA7;
  --kids-bg: #FFF8EE;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-kids: 'Baloo 2', var(--font-sans);

  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1.2em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   SIGNATURE ELEMENT - the wave seam
   A recurring wave-shaped seam at the bottom of a section. This is
   a transparent overlay, not a separate colored block: above the
   crest, whatever is really there (a photo, a gradient, a flat
   color) shows through untouched, and only the area below the
   crest is filled, with the color of the section that follows, so
   the two genuinely meet at the wave with no guessed or mismatched
   color in between. A thin gold line traces the crest as the accent.
   The containing section needs position: relative (see
   .wave-host below); the wave itself is positioned absolutely as
   that section's last element.
   ============================================================ */

.wave-host { position: relative; }

.wave-seam {
  position: absolute;
  left: 0;
  right: 0;
  height: 46px;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}

/* Default: wave lives inside the section ABOVE the seam, revealing
   that section's real background above the crest, with a flat guess
   below matching the (simple, flat-colored) section that follows. */
.wave-seam.pos-bottom { bottom: -6px; }

/* Flipped: wave lives inside the section BELOW the seam, revealing
   that section's real background (useful when it isn't a flat
   color, e.g. has its own gradients) below the crest, with a flat
   guess above matching the (simple, flat-colored) section before it. */
.wave-seam.pos-top { top: -6px; }

.wave-seam svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave-seam .wave-crest {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
}

/* pos-bottom variants: fill = color of the section that follows */
.wave-seam--to-cream .wave-fill { fill: var(--cream); }
.wave-seam--to-cream-deep .wave-fill { fill: var(--cream-deep); }
.wave-seam--to-navy .wave-fill { fill: var(--navy); }

/* pos-top variant: fill = color of the section that comes before */
.wave-seam--from-cream .wave-fill { fill: var(--cream); }

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid rgba(139, 115, 85, 0.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-decoration: none;
}

.site-title span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
}

.nav-links a {
  text-decoration: none;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-links a:hover, .nav-links a[aria-current="page"] {
  border-color: var(--gold);
  color: var(--navy);
}

.nav-cta {
  background: var(--navy);
  color: var(--cream) !important;
  padding: 9px 18px !important;
  border-radius: 3px;
  border-bottom: none !important;
}
.nav-cta:hover { background: var(--navy-deep); border-color: transparent !important; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--navy);
}

@media (max-width: 820px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(139,115,85,0.25);
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid rgba(139,115,85,0.15); }
  .nav-links a { display: block; padding: 14px 28px; border-bottom: none; }
  .nav-cta { margin: 10px 28px; display: inline-block; }
  .nav-toggle { display: block; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--navy); color: var(--cream); }
.btn-primary:hover { background: var(--navy-deep); }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--cream); }

.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: #B8935A; }

.btn-kids { background: var(--coral); color: #fff; font-family: var(--font-kids); }
.btn-kids:hover { background: #E85A3A; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0; }

/* ============================================================
   HERO (Home)
   ============================================================ */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 30%;
  color: #fff;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,34,46,0.15) 0%, rgba(22,34,46,0.35) 55%, rgba(22,34,46,0.82) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 80px 28px 64px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  color: #fff;
  max-width: 16ch;
}

.hero-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.2rem;
  max-width: 46ch;
  color: #F1EADA;
  margin-top: 14px;
}

/* ============================================================
   SECTIONS
   ============================================================ */

section { padding: 84px 0; }
.section-tight { padding: 56px 0; }

.section-cream { background: var(--cream); }
.section-deep { background: var(--cream-deep); }
.section-navy { background: var(--navy); color: var(--cream); }
.section-navy h2, .section-navy h3 { color: #fff; }

.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

.section-head .eyebrow { color: var(--sand); text-align: inherit; }
.section-navy .section-head .eyebrow { color: var(--gold); }

h2.section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* ============================================================
   BOOK PROMO - home page memoir block
   ============================================================ */

.book-promo {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
}

.book-promo img { border-radius: 4px; box-shadow: 0 24px 48px -12px rgba(43,36,32,0.35); }

/* Bridge section (home page): headline, photo, and paragraph as three
   independent grid areas, so desktop and mobile can each place them
   in the right order without fighting over column widths.
   Desktop: headline+paragraph in a left column, photo on the right.
   Mobile: headline, then photo, then paragraph, stacked. */
.bridge-promo {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas:
    "top   image"
    "bottom image";
  column-gap: 56px;
  row-gap: 14px;
  align-items: start;
}
.bridge-promo .bridge-top { grid-area: top; }
.bridge-promo .bridge-bottom { grid-area: bottom; margin: 0; }
.bridge-promo .bridge-image {
  grid-area: image;
  align-self: center;
  border-radius: 4px;
  box-shadow: 0 24px 48px -12px rgba(43,36,32,0.35);
}

@media (max-width: 780px) {
  .bridge-promo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "image"
      "bottom";
    row-gap: 20px;
  }
}

.pull-quote {
  border-left: 3px solid var(--gold);
  padding-left: 24px;
  margin: 28px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--navy);
}
.pull-quote cite {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.82rem;
  color: var(--sand);
  margin-top: 10px;
  letter-spacing: 0.02em;
}

@media (max-width: 780px) {
  .book-promo { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  .book-promo img { max-width: 260px; margin: 0 auto; }
}

/* ============================================================
   PAINTBRUSH / KIDS BAND
   ============================================================ */

.kids-band {
  background: var(--kids-bg);
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255,107,74,0.10) 0, transparent 40%),
    radial-gradient(circle at 92% 80%, rgba(29,154,147,0.12) 0, transparent 40%);
  position: relative;
}

.kids-band .eyebrow { color: var(--coral); }
.kids-band h2 { font-family: var(--font-kids); color: var(--violet); }

.kids-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.kids-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px -14px rgba(43,36,32,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.kids-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -14px rgba(43,36,32,0.36); }
.kids-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.kids-card-body { padding: 18px 18px 22px; }
.kids-card-body h3 { font-family: var(--font-kids); font-size: 1.08rem; color: var(--violet); margin-bottom: 6px; }
.kids-card-body p { font-family: var(--font-sans); font-size: 0.88rem; color: #57493c; margin-bottom: 10px; }

@media (max-width: 900px) {
  .kids-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kids-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Coloring book grid, denser.
   Flexbox with centered wrapping rather than a strict grid, so a
   partial final row (e.g. 7 items = 4 + 3) centers itself instead
   of hugging the left edge. */
.coloring-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.coloring-grid a {
  text-decoration: none;
  color: var(--ink);
  display: block;
  flex: 0 1 240px;
}
.coloring-grid img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 22px -10px rgba(43,36,32,0.3);
  transition: transform 0.2s ease;
}
.coloring-grid a:hover img { transform: translateY(-4px); }
.coloring-grid .cap {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  margin-top: 8px;
  color: var(--navy);
}

@media (max-width: 780px) {
  .coloring-grid a { flex-basis: 42%; }
}

/* Media grid: podcast appearances and video clips, each linking out
   to wherever it actually lives (YouTube, Apple Podcasts, etc). */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.media-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 30px -14px rgba(43,36,32,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.media-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -14px rgba(43,36,32,0.36); }
.media-thumb { position: relative; aspect-ratio: 16/9; background: var(--navy-deep); overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-play span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(22,34,46,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.media-platform {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(22,34,46,0.82);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
}

.media-page-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(201,166,107,0.92);
  color: var(--navy-deep);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
}
.media-card-body { padding: 16px 18px 20px; }
.media-card-body h3 { font-size: 1.02rem; margin-bottom: 4px; }
.media-card-body p { font-family: var(--font-sans); font-size: 0.85rem; color: var(--sand); margin: 0; }

/* ============================================================
   PLACEHOLDER BOX (for missing final assets)
   ============================================================ */

.placeholder-box {
  border: 2px dashed var(--sand-light);
  border-radius: 6px;
  background: rgba(139,115,85,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--sand);
  padding: 20px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--navy-deep);
  color: #CFC7B8;
  padding: 56px 0 32px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}

.footer-grid h4 {
  font-family: var(--font-sans);
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.footer-grid a {
  color: #CFC7B8;
  text-decoration: none;
  display: block;
  margin-bottom: 9px;
}
.footer-grid a:hover { color: var(--gold); }

.footer-charity {
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 38ch;
}
.footer-charity a { display: inline; color: var(--gold); }

.social-icons { display: flex; gap: 22px; margin-top: 6px; }
.social-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
.social-icons .icon-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(207,199,184,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.social-icons a:hover .icon-circle { border-color: var(--gold); background: rgba(201,166,107,0.12); }
.social-icons svg { width: 18px; height: 18px; fill: #CFC7B8; }
.social-icons a:hover svg { fill: var(--gold); }
.social-icons .icon-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: #CFC7B8;
  white-space: nowrap;
}
.social-icons a:hover .icon-label { color: var(--gold); }

/* Light-background variant, used on the About page */
.social-icons-light .icon-circle { border-color: rgba(139,115,85,0.4); }
.social-icons-light svg { fill: var(--navy); }
.social-icons-light .icon-label { color: var(--sand); }
.social-icons-light a:hover .icon-circle { border-color: var(--gold); background: rgba(201,166,107,0.12); }
.social-icons-light a:hover svg { fill: var(--navy); }

.footer-bottom {
  border-top: 1px solid rgba(207,199,184,0.18);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: #9C9484;
}

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */

.page-header {
  padding: 64px 0 48px;
  background: var(--cream-deep);
  text-align: center;
  border-bottom: 1px solid rgba(139,115,85,0.2);
}
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--navy); }
.page-header p { font-style: italic; color: var(--sand); max-width: 52ch; margin: 0 auto; }

/* ============================================================
   MY BOOKS PAGE
   ============================================================ */

.blurb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}
.blurb-card {
  background: #fff;
  padding: 28px 26px;
  border-radius: 6px;
  box-shadow: 0 10px 26px -14px rgba(43,36,32,0.25);
}
.blurb-card p { font-style: italic; color: var(--ink); margin-bottom: 12px; font-size: 0.98rem; }
.blurb-card cite { font-family: var(--font-sans); font-style: normal; font-size: 0.82rem; color: var(--sand); }

@media (max-width: 780px) { .blurb-grid { grid-template-columns: 1fr; } }

.narrative-book {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid rgba(139,115,85,0.18);
}
.narrative-book:last-child { border-bottom: none; }
.narrative-book img { border-radius: 8px; box-shadow: 0 14px 30px -14px rgba(43,36,32,0.3); }
.narrative-book h3 { font-family: var(--font-kids); color: var(--violet); font-size: 1.4rem; }

@media (max-width: 700px) {
  .narrative-book { grid-template-columns: 140px 1fr; gap: 22px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.about-hero img { border-radius: 6px; box-shadow: 0 24px 48px -16px rgba(43,36,32,0.3); }

@media (max-width: 780px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero img { max-width: 300px; margin: 0 auto; }
}

.mini-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.mini-gallery img { border-radius: 6px; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 700px) { .mini-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   RESOURCES / FREE GUIDE
   ============================================================ */

.resource-promo {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.resource-promo img {
  border-radius: 6px;
  box-shadow: 0 24px 48px -16px rgba(43,36,32,0.35);
}
.resource-promo form .field:last-of-type { margin-bottom: 18px; }

@media (max-width: 780px) {
  .resource-promo { grid-template-columns: 1fr; text-align: left; }
  .resource-promo img { max-width: 240px; margin: 0 auto; }
}

/* Resource hub grid (resources.html): one card per guide, each
   linking to its own dedicated landing page. */
.resource-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.resource-hub-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 30px -14px rgba(43,36,32,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resource-hub-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -14px rgba(43,36,32,0.36); }
.resource-hub-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.resource-hub-card-body { padding: 20px 22px 26px; }
.resource-hub-card-body h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--navy); }
.resource-hub-card-body p { font-family: var(--font-sans); font-size: 0.88rem; color: #57493c; margin-bottom: 16px; }

@media (max-width: 860px) {
  .resource-hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .resource-hub-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* Download page layout: the requested guide on the left (larger),
   the other two guides in a compact sidebar on the right, visible
   without scrolling. Falls back to stacked on narrow screens. */
.download-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}
.download-main { text-align: left; }
.download-main img {
  max-width: 200px;
  margin-bottom: 24px;
  border-radius: 6px;
  box-shadow: 0 24px 48px -16px rgba(43,36,32,0.3);
}
.download-main .btn-row { justify-content: flex-start; }

.also-like-sidebar {
  background: var(--cream-deep);
  border-radius: 10px;
  padding: 22px;
}
.also-like-sidebar h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sand);
  margin: 0 0 18px;
}
.also-like-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  transition: transform 0.2s ease;
}
.also-like-card + .also-like-card { margin-top: 16px; }
.also-like-card:hover { transform: translateY(-3px); }
.also-like-card img {
  width: 88px;
  height: 112px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -8px rgba(43,36,32,0.32);
}
.also-like-card span {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

@media (max-width: 780px) {
  .download-layout { grid-template-columns: 1fr; }
  .download-main { text-align: center; }
  .download-main img { margin-left: auto; margin-right: auto; }
  .download-main .btn-row { justify-content: center; }
  .also-like-sidebar { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   SPEAKING / KEYNOTES
   ============================================================ */

.keynote-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
  padding: 44px 0;
  border-bottom: 1px solid rgba(139,115,85,0.2);
}
.keynote-card:last-child { border-bottom: none; }
.keynote-card img {
  border-radius: 8px;
  box-shadow: 0 20px 40px -16px rgba(43,36,32,0.32);
  width: 100%;
}
.keynote-card h2 { font-size: 1.5rem; margin-bottom: 2px; }
.keynote-card .keynote-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sand);
  font-size: 1.02rem;
  margin-bottom: 14px;
}
.keynote-card .keynote-desc { font-size: 1rem; margin-bottom: 14px; }
.keynote-card .keynote-audience {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 4px;
}
.keynote-card .keynote-lengths {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--sand);
  margin-bottom: 18px;
}
.keynote-ideas {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.keynote-ideas li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-style: italic;
  color: var(--navy);
  font-size: 0.96rem;
  line-height: 1.5;
}
.keynote-ideas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

@media (max-width: 700px) {
  .keynote-card { grid-template-columns: 1fr; text-align: left; }
  .keynote-card img { max-width: 220px; }
}

.speaking-contact-box {
  background: var(--cream-deep);
  border-radius: 10px;
  padding: 36px;
  max-width: 640px;
  margin: 0 auto;
}
.speaking-contact-box h3 { margin-bottom: 10px; }
.speaking-contact-box .field:last-of-type { margin-bottom: 18px; }

/* ============================================================
   BLOG
   ============================================================ */

.blog-post {
  max-width: 700px;
  margin: 0 auto;
}
.blog-post .post-meta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--sand);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.blog-post h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.blog-post img { border-radius: 6px; margin: 30px 0; box-shadow: 0 20px 40px -18px rgba(43,36,32,0.3); }
.blog-post p { font-size: 1.06rem; }

/* ============================================================
   FORMS
   ============================================================ */

.form-wrap { max-width: 560px; margin: 0 auto; }

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--sand-light);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 130px; }

.payment-box {
  background: var(--cream-deep);
  border: 1px solid rgba(139,115,85,0.3);
  border-radius: 6px;
  padding: 26px 28px;
  margin: 32px 0;
}
.payment-box h3 { color: var(--navy); font-size: 1.1rem; margin-bottom: 10px; }
.payment-box .venmo { font-family: var(--font-sans); font-weight: 700; color: var(--navy); font-size: 1.1rem; }

/* ============================================================
   COMING SOON
   ============================================================ */

.coming-soon-wrap {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 0;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.small { font-size: 0.85rem; }
.text-sand { color: var(--sand); }
.spotify-embed { border-radius: 12px; margin-top: 20px; box-shadow: 0 20px 40px -20px rgba(43,36,32,0.35); }