/*
 Theme Name:   ChrisPaulJones Child
 Theme URI:    https://chrispauljones.com
 Description:  Custom child theme for ChrisPaulJones.com — editable via Appearance > Customize. v1.7 — Paginated Collage Photo Gallery (5 photos per page, 1 large + 4 small layout, click to expand with title/caption) + Parallax Scrolling on hero & Story photos.
 Author:       Chris Paul Jones
 Template:     twentytwentyfour
 Version:      1.7
 Text Domain:  chrispaul-child
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap');

/* ─── HIDE DEFAULT WORDPRESS THEME ELEMENTS ──── */
.wp-site-blocks, header.wp-block-template-part, footer.wp-block-template-part { display: none !important; }

/* ─── DESIGN TOKENS — Crimson · Cream · Gold accent ─── */
:root {
  /* PRIMARY — Kappa Alpha Psi crimson */
  --crimson:        #A6192E;
  --crimson-light:  #C4243C;
  --crimson-deep:   #7A0F1F;
  --crimson-glow:   rgba(196, 36, 60, 0.25);

  /* SECONDARY — warm cream */
  --cream:          #F4E8C9;
  --cream-soft:     #E8DCB8;
  --cream-muted:    #C9BE9E;

  /* TERTIARY — subtle gold accent (kept light to nod at fraternity heritage without dominating) */
  --gold:           #C9A84C;
  --gold-light:     #E8C97A;

  /* DARKS — crimson-tinged for warmth (replaces pure charcoal) */
  --bg-base:        #14080A;   /* near-black with a whisper of red */
  --bg-mid:         #1E0C10;   /* slightly raised surface */
  --bg-soft:        #2A1218;   /* card / quote surface */
  --bg-deep:        #0B0405;   /* deepest panel */

  --text-muted:     #8C7B7E;
  --text-mid:       #C9BBBE;

  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Outfit', sans-serif;
  --section-pad:    6rem 5%;
  --max-w:          1200px;

  /* Backwards-compat aliases (other code may still reference these) */
  --charcoal:       var(--bg-base);
  --charcoal-mid:   var(--bg-mid);
  --charcoal-soft:  var(--bg-soft);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg-base); color: var(--cream); line-height: 1.7; font-weight: 300; }

/* ─── NAV ────────────────────────────────────── */
body > nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; background: rgba(20, 8, 10, 0.94); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(196, 36, 60, 0.22); }
.nav-logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--cream); text-decoration: none; display: flex; align-items: center; }
.nav-logo span { color: var(--crimson-light); font-style: italic; }
.nav-logo-img { padding: 0; }
.nav-logo-img img { display: block; max-width: 100%; height: auto; transition: opacity 0.3s; }
.nav-logo-img:hover img { opacity: 0.85; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-muted); text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: var(--crimson-light); }
.nav-cta { background: transparent; border: 1px solid var(--crimson); color: var(--cream); padding: 0.55rem 1.4rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; text-decoration: none; }
.nav-cta:hover { background: var(--crimson); color: var(--cream); border-color: var(--crimson); }

/* ─── HERO ───────────────────────────────────── */
.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 5%; padding-top: 6rem; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-deep) 100%); }
.hero::before { content: ''; position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: linear-gradient(135deg, var(--crimson-deep) 0%, var(--bg-mid) 100%); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%); z-index: 0; opacity: 0.85; }
.hero::after { content: ''; position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: radial-gradient(ellipse at top right, rgba(196, 36, 60, 0.18) 0%, transparent 60%); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%); z-index: 0; pointer-events: none; }
.hero-text { position: relative; z-index: 1; padding-right: 4rem; }
.hero-eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--crimson-light); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--crimson-light); }
.hero-name { font-family: var(--font-display); font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 300; line-height: 1.05; color: var(--cream); margin-bottom: 1.5rem; }
.hero-name strong { font-weight: 700; font-style: italic; color: var(--cream); display: block; text-shadow: 0 0 30px var(--crimson-glow); }
.hero-tagline { font-size: 1rem; font-weight: 300; color: var(--cream-muted); line-height: 1.8; max-width: 420px; margin-bottom: 3rem; }
.hero-actions { display: flex; gap: 1.25rem; align-items: center; }
.btn-primary { background: var(--crimson); color: var(--cream); padding: 0.9rem 2.2rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-block; box-shadow: 0 4px 18px rgba(166, 25, 46, 0.35); }
.btn-primary:hover { background: var(--crimson-light); color: var(--cream); box-shadow: 0 6px 24px rgba(196, 36, 60, 0.5); transform: translateY(-1px); }
.btn-ghost { color: var(--cream); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 0.6rem; transition: color 0.3s; }
.btn-ghost:hover { color: var(--crimson-light); }
.btn-ghost::after { content: '→'; transition: transform 0.3s; }
.btn-ghost:hover::after { transform: translateX(4px); }
.hero-visual { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero-photo-frame { width: 340px; height: 480px; background: var(--bg-soft); border: 1px solid rgba(244, 232, 201, 0.25); position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hero-photo-frame::after { content: ''; position: absolute; bottom: -16px; right: -16px; width: 100%; height: 100%; border: 1px solid var(--gold); opacity: 0.55; z-index: -1; }
.hero-stats { display: flex; gap: 2rem; margin-top: 2rem; }
.stat-item { text-align: center; }
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--cream); display: block; }
.stat-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-muted); }
.scroll-hint { position: absolute; bottom: 3rem; left: 5%; display: flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream-muted); z-index: 2; }
.scroll-line { width: 40px; height: 1px; background: var(--cream-muted); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { width: 40px; opacity: 0.4; } 50% { width: 60px; opacity: 0.8; } }

/* ─── SECTIONS ───────────────────────────────── */
section { position: relative; }
.section-inner { max-width: var(--max-w); margin: 0 auto; padding: var(--section-pad); }
.section-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crimson-light); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--crimson-light); }
.section-headline { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 300; line-height: 1.15; color: var(--cream); margin-bottom: 1.5rem; }
.section-headline em { font-style: italic; font-weight: 600; color: var(--crimson-light); }
.gold-rule { width: 48px; height: 1px; background: var(--crimson-light); margin: 2rem 0; }

/* ─── ABOUT ──────────────────────────────────── */
#about { background: var(--bg-mid); position: relative; overflow: hidden; }
#about::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(196, 36, 60, 0.08) 0%, transparent 70%); pointer-events: none; }

/* TOP ROW: Headline (left) + Story Photo (right), balanced & vertically centered */
.about-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
}
.about-headline-block { padding-right: 1rem; }

.about-photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  border: 1px solid rgba(244, 232, 201, 0.2);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.about-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-photo-frame::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--gold);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}
.about-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--cream-muted);
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--crimson-deep) 100%);
  opacity: 0.85;
}
.about-photo-placeholder .ph-icon { font-size: 2.5rem; opacity: 0.5; margin-bottom: 0.5rem; color: var(--cream); }
.about-photo-placeholder p { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; line-height: 1.6; }

/* BOTTOM ROW: Body text (left) + Pillar cards (right) — balanced columns */
.about-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

.about-body { color: var(--cream-muted); font-size: 1rem; line-height: 1.9; margin-bottom: 1.5rem; }
.about-quote { border-left: 2px solid var(--crimson); padding-left: 1.5rem; margin: 2.5rem 0; }
.about-quote blockquote { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; font-weight: 300; color: var(--cream); line-height: 1.5; }

.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.pillar-card { background: var(--bg-soft); border: 1px solid rgba(196, 36, 60, 0.18); padding: 1.5rem; transition: border-color 0.3s, transform 0.3s; }
.pillar-card:hover { border-color: var(--crimson); transform: translateY(-2px); }
.pillar-num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: rgba(196, 36, 60, 0.55); display: block; margin-bottom: 0.4rem; }
.pillar-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); margin-bottom: 0.5rem; }
.pillar-desc { font-size: 0.82rem; color: var(--cream-muted); line-height: 1.6; }

/* ─── PHOTO GALLERY ──────────────────────────── */
#gallery { background: var(--bg-base); }
.gallery-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.gallery-desc { color: var(--cream-muted); font-size: 1rem; line-height: 1.9; }

/* Empty state */
.gallery-empty {
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--crimson-deep) 100%);
  border: 1px dashed rgba(244, 232, 201, 0.25);
  padding: 4rem 2rem;
  text-align: center;
  opacity: 0.85;
}
.gallery-empty-icon { font-size: 3rem; color: var(--cream); opacity: 0.4; margin-bottom: 1rem; }
.gallery-empty-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--cream); margin-bottom: 0.5rem; }
.gallery-empty-text { font-size: 0.85rem; color: var(--cream-muted); line-height: 1.7; }
.gallery-empty-text strong { color: var(--cream); }

/* Lightbox (v1.7: title at top, image in middle, caption at bottom) */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(11, 4, 5, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}
.gallery-lightbox.open { display: flex; }
.gallery-lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  max-height: 100%;
  width: 100%;
  gap: 1.25rem;
}
.gallery-lightbox-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 600;
  color: var(--cream);
  text-align: center;
  margin: 0;
  max-width: 800px;
  line-height: 1.3;
}
.gallery-lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
#cpj-lb-img {
  max-width: 100%;
  max-height: calc(100vh - 14rem);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.gallery-lightbox-caption {
  font-size: 0.95rem;
  color: var(--cream-muted);
  line-height: 1.65;
  text-align: center;
  margin: 0;
  max-width: 800px;
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
  position: absolute;
  background: rgba(166, 25, 46, 0.85);
  color: var(--cream);
  border: 1px solid rgba(244, 232, 201, 0.3);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.2s;
}
.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover { background: var(--crimson-light); transform: scale(1.08); }
.gallery-lightbox-close { top: 1.5rem; right: 1.5rem; }
.gallery-lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-prev:hover { transform: translateY(-50%) scale(1.08); }
.gallery-lightbox-next:hover { transform: translateY(-50%) scale(1.08); }


/* ─── v1.7 COLLAGE GALLERY (5-per-page, paginated) ─── */
/* Layout: 3-col × 2-row CSS grid. Center tile (pos=2) spans 2 cols and 2 rows.
   Result mirrors the reference image: large center photo with two small
   photos stacked on each side. Tiles are visually swapped to the right
   page via the .is-visible class — they remain in the DOM so swap is
   instant (no flash, no reflow of layout-affecting properties). */
.gallery-collage-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.gallery-collage {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  aspect-ratio: 4 / 3;
  width: 100%;
}
/* All tiles start hidden; only those on the current page show. */
.gallery-tile {
  margin: 0;
  display: none;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 36, 60, 0.18);
  background: var(--bg-soft);
  /* Subtle entrance for the page swap */
  animation: cpj-fade-in 0.4s ease both;
}
.gallery-tile.is-visible { display: block; }
/* Position the 5 visible tiles into the grid */
.gallery-tile[data-pos="0"] { grid-column: 1; grid-row: 1; }
.gallery-tile[data-pos="1"] { grid-column: 1; grid-row: 2; }
.gallery-tile[data-pos="2"] { grid-column: 2; grid-row: 1 / span 2; } /* large center */
.gallery-tile[data-pos="3"] { grid-column: 3; grid-row: 1; }
.gallery-tile[data-pos="4"] { grid-column: 3; grid-row: 2; }

/* Partial last page: when the final page has fewer than 5 photos,
   ditch the fixed collage grid and lay the available photos out as
   a centered flex row of equal squares. Avoids empty grid cells. */
.gallery-collage.is-partial {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  aspect-ratio: auto;
}
.gallery-collage.is-partial .gallery-tile {
  flex: 0 1 calc((100% - 4rem) / 4);
  aspect-ratio: 1 / 1;
  /* Reset grid placement so the flex layout takes over */
  grid-column: auto !important;
  grid-row: auto !important;
}
.gallery-collage.is-partial[data-tiles-on-page="1"] .gallery-tile { flex-basis: 60%; aspect-ratio: 4 / 3; }
.gallery-collage.is-partial[data-tiles-on-page="2"] .gallery-tile { flex-basis: calc(50% - 0.5rem); }
.gallery-collage.is-partial[data-tiles-on-page="3"] .gallery-tile { flex-basis: calc(33.333% - 0.7rem); }
.gallery-collage.is-partial[data-tiles-on-page="4"] .gallery-tile { flex-basis: calc(25% - 0.75rem); }

@keyframes cpj-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.gallery-tile-btn {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
  overflow: hidden;
}
.gallery-tile-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, filter 0.4s ease;
}
.gallery-tile-btn:hover img { transform: scale(1.05); filter: brightness(0.85); }
.gallery-tile-btn:focus-visible { outline: 3px solid var(--crimson-light); outline-offset: 3px; }
.gallery-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 8, 10, 0.92) 0%, rgba(20, 8, 10, 0) 55%);
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.gallery-tile-btn:hover .gallery-tile-overlay,
.gallery-tile-btn:focus-visible .gallery-tile-overlay { opacity: 1; }
.gallery-tile-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  font-style: italic;
  color: var(--cream);
  line-height: 1.25;
}
/* Slightly larger title for the big center tile */
.gallery-tile[data-pos="2"] .gallery-tile-title { font-size: 1.3rem; }

/* Pagination */
.gallery-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.gallery-page-arrow,
.gallery-page-num {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(244, 232, 201, 0.3);
  min-width: 40px;
  height: 40px;
  padding: 0 0.85rem;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
}
.gallery-page-arrow { font-size: 1.3rem; line-height: 1; }
.gallery-page-numbers { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.gallery-page-arrow:hover:not([disabled]),
.gallery-page-num:hover:not(.is-active) {
  background: var(--bg-soft);
  border-color: rgba(244, 232, 201, 0.6);
}
.gallery-page-num.is-active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--cream);
  cursor: default;
}
.gallery-page-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.gallery-page-arrow:focus-visible,
.gallery-page-num:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}
.gallery-page-counter {
  text-align: center;
  margin-top: 0.85rem;
  color: var(--cream-muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.04em;
}
.gallery-page-counter-sep { margin: 0 0.5rem; opacity: 0.5; }

/* Responsive collage */
@media (max-width: 900px) {
  .gallery-collage { aspect-ratio: 1 / 1; gap: 0.75rem; }
}
@media (max-width: 640px) {
  /* On phones the 4-around-1 collage gets cramped — switch to a clean
     3-row stack: large feature photo on top, then two rows of two. */
  .gallery-collage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    aspect-ratio: auto;
    gap: 0.6rem;
  }
  .gallery-tile[data-pos="0"] { grid-column: 1; grid-row: 2; }
  .gallery-tile[data-pos="1"] { grid-column: 2; grid-row: 2; }
  .gallery-tile[data-pos="2"] { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 4 / 3; }
  .gallery-tile[data-pos="3"] { grid-column: 1; grid-row: 3; }
  .gallery-tile[data-pos="4"] { grid-column: 2; grid-row: 3; }
  .gallery-tile[data-pos="0"],
  .gallery-tile[data-pos="1"],
  .gallery-tile[data-pos="3"],
  .gallery-tile[data-pos="4"] { aspect-ratio: 1 / 1; }
  .gallery-page-arrow, .gallery-page-num { min-width: 36px; height: 36px; font-size: 0.9rem; }
  .gallery-lightbox { padding: 4rem 1rem 2rem; }
  .gallery-lightbox-title { font-size: 1.2rem; }
  .gallery-lightbox-prev { left: 0.5rem; }
  .gallery-lightbox-next { right: 0.5rem; }
  .gallery-lightbox-close { top: 1rem; right: 1rem; }
}


/* ─── v1.5 PARALLAX ──────────────────────────── */
/* Frame elements that hold parallax images need overflow:hidden
   (already on .hero-photo-frame and .about-photo-frame in this theme).
   The .cpj-parallax target is moved with translate3d via JS. */
.cpj-parallax-on .cpj-parallax {
  transition: transform 0.05s linear;
}
/* Slightly oversize parallax images so the translate doesn't reveal
   gaps at the top/bottom of their frames. */
.cpj-parallax-on .hero-photo-frame .cpj-parallax,
.cpj-parallax-on .about-photo-frame .cpj-parallax {
  height: 115%;
  width: 100%;
  object-fit: cover;
  margin-top: -7.5%;
}
/* Disable on small screens — perf + the effect breaks on tall mobile stacks */
@media (max-width: 820px) {
  .cpj-parallax-on .cpj-parallax {
    transform: none !important;
    height: 100%;
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cpj-parallax-on .cpj-parallax {
    transform: none !important;
    height: 100%;
    margin-top: 0;
  }
  .gallery-tile { animation: none; }
}

/* ─── SPEAKING ───────────────────────────────── */
#speaking { background: var(--bg-base); }
.speaking-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.speaking-desc { color: var(--cream-muted); font-size: 1rem; line-height: 1.9; }
.topics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: rgba(196, 36, 60, 0.18); }
.topic-card { background: var(--bg-mid); padding: 2.5rem 2rem; transition: background 0.3s; }
.topic-card:hover { background: var(--bg-soft); }
.topic-icon { font-size: 1.6rem; margin-bottom: 1.25rem; display: block; }
.topic-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--cream); margin-bottom: 0.75rem; line-height: 1.2; }
.topic-desc { font-size: 0.85rem; color: var(--cream-muted); line-height: 1.75; }
.topic-card.featured { background: var(--bg-soft); border-top: 2px solid var(--crimson); }

/* ─── VENTURES ───────────────────────────────── */
#ventures { background: var(--bg-mid); }
.ventures-list { display: flex; flex-direction: column; border: 1px solid rgba(196, 36, 60, 0.18); margin-top: 3rem; }
.venture-row { display: grid; grid-template-columns: 56px 1fr 2fr auto; align-items: center; gap: 2rem; padding: 2rem 2.5rem; border-bottom: 1px solid rgba(196, 36, 60, 0.12); transition: background 0.3s; }
.venture-row:last-child { border-bottom: none; }
.venture-row:hover { background: var(--bg-soft); }
.venture-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: rgba(196, 36, 60, 0.5); text-align: center; }
.venture-name { font-size: 1rem; font-weight: 500; color: var(--cream); margin-bottom: 0.2rem; }
.venture-role { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson-light); }
.venture-desc { font-size: 0.88rem; color: var(--cream-muted); line-height: 1.7; }
.venture-tag { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); background: var(--crimson); padding: 0.35rem 0.85rem; white-space: nowrap; }

/* ─── MEDIA ──────────────────────────────────── */
#media { background: var(--bg-base); }
.press-strip { display: flex; align-items: center; gap: 3rem; padding: 2rem 0; border-top: 1px solid rgba(196, 36, 60, 0.18); border-bottom: 1px solid rgba(196, 36, 60, 0.18); margin: 3rem 0; overflow-x: auto; }
.press-label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream-muted); white-space: nowrap; flex-shrink: 0; }
.press-divider { width: 1px; height: 24px; background: rgba(196, 36, 60, 0.3); flex-shrink: 0; }
.press-item { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(244, 232, 201, 0.45); white-space: nowrap; flex-shrink: 0; transition: color 0.3s; }
.press-item:hover { color: var(--cream); }
.media-feature { background: var(--bg-soft); border: 1px solid rgba(196, 36, 60, 0.22); padding: 3rem; display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.media-quote { font-family: var(--font-display); font-size: 1.6rem; font-style: italic; font-weight: 300; color: var(--cream); line-height: 1.5; margin-bottom: 1.25rem; }
.media-source { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson-light); }
.media-badge { text-align: center; flex-shrink: 0; }
.media-badge-text { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-muted); display: block; margin-bottom: 0.25rem; }
.media-badge-show { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--crimson-light); display: block; }
.media-badge-host { font-size: 0.75rem; color: var(--cream-muted); margin-top: 0.25rem; display: block; }

/* ─── CONTACT ────────────────────────────────── */
#contact { background: var(--bg-mid); position: relative; overflow: hidden; }
#contact::before { content: ''; position: absolute; bottom: -150px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(196, 36, 60, 0.08) 0%, transparent 70%); pointer-events: none; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6rem; align-items: start; position: relative; z-index: 1; }
.contact-body { color: var(--cream-muted); font-size: 1rem; line-height: 1.9; margin-bottom: 2.5rem; }
.contact-items { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
.contact-item { display: flex; gap: 1rem; align-items: center; }
.contact-item-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--crimson-light); min-width: 80px; }
.contact-item-val { font-size: 0.9rem; color: var(--cream-muted); }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-muted); }
.form-input, .form-select, .form-textarea { background: var(--bg-soft); border: 1px solid rgba(196, 36, 60, 0.22); color: var(--cream); padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 0.9rem; outline: none; transition: border-color 0.3s; width: 100%; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--crimson-light); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9BBBE' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form-select option { background: var(--bg-mid); }

/* ─── FOOTER ─────────────────────────────────── */
.cpj-footer { background: var(--bg-deep); border-top: 1px solid rgba(196, 36, 60, 0.22); padding: 3rem 5%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-logo { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--cream); display: flex; align-items: center; }
.footer-logo span { color: var(--crimson-light); font-style: italic; }
.footer-logo-img img { display: block; max-width: 100%; height: auto; }
.footer-links { display: flex; gap: 2rem; list-style: none; }
.footer-links a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-muted); text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--crimson-light); }
.footer-copy { font-size: 0.75rem; color: var(--cream-muted); }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 8rem; }
  .hero::before, .hero::after { display: none; }
  .hero-visual { height: auto; padding: 3rem 0; }
  .hero-photo-frame { width: 260px; height: 360px; }

  .about-top { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
  .about-headline-block { padding-right: 0; }
  .about-photo-frame { aspect-ratio: 16 / 10; }
  .about-bottom { grid-template-columns: 1fr; gap: 3rem; }
  .about-pillars { grid-template-columns: 1fr 1fr; }

  .gallery-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .gallery-lightbox { padding: 5rem 1rem 3rem; }
  .gallery-lightbox-close { top: 1rem; right: 1rem; }
  .gallery-lightbox-prev { left: 0.5rem; }
  .gallery-lightbox-next { right: 0.5rem; }

  .speaking-intro { grid-template-columns: 1fr; gap: 2rem; }
  .topics-grid { grid-template-columns: 1fr 1fr; }
  .venture-row { grid-template-columns: 40px 1fr; gap: 1rem; }
  .venture-desc, .venture-tag { display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  .media-feature { grid-template-columns: 1fr; gap: 2rem; }
  .cpj-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  :root { --section-pad: 4rem 6%; }
  .topics-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .about-pillars { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════
   v2.0 — Media Logo Grid + Book Section + Overflow Fix
   ══════════════════════════════════════════════════════ */

/* Global overflow fix — stops page being wider than screen */
html, body { max-width:100%; }
body { overflow-x: clip; }

/* ── Media: square logo grid ─────────────────────────── */
.cpj-media-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 3rem 0;
}

.cpj-media-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  width: 200px;
  text-decoration: none;
  transition: transform 0.25s;
}

.cpj-media-card:hover { transform: translateY(-4px); }

.cpj-media-logo {
  width: 200px;
  height: 200px;
  background: var(--bg-soft);
  border: 1px solid rgba(201,168,76,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.cpj-media-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

.cpj-media-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}

.cpj-media-logo-placeholder span {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: rgba(201,168,76,0.4);
  letter-spacing: 0.05em;
}

.cpj-media-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.cpj-media-desc {
  font-size: 0.75rem;
  color: var(--cream-muted);
  line-height: 1.6;
}

/* Remove old press-strip (keep for fallback graceful degradation) */
.press-strip { display: none; }

/* ── Book section layout ─────────────────────────────── */
.cpj-book-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}

.cpj-book-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.cpj-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cpj-book-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.cpj-book-frame {
  position: relative;
  width: 100%;
  max-width: 340px;
}

.cpj-book-frame-shadow {
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(201,168,76,0.3);
  z-index: 0;
  pointer-events: none;
}

.cpj-book-img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(201,168,76,0.2);
}

.cpj-book-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg-soft);
  border: 1px solid rgba(201,168,76,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
  padding: 2rem;
}

.cpj-book-placeholder span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.4);
  text-align: center;
}

.cpj-book-caption {
  text-align: center;
  width: 100%;
  max-width: 340px;
}

.cpj-book-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--bg-base);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.28rem 0.9rem;
  margin-bottom: 0.9rem;
}

.cpj-book-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 0.3rem;
  letter-spacing: 0.03em;
}

.cpj-book-byline {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: 0.75rem;
}

.cpj-book-cap-desc {
  font-size: 0.83rem;
  color: var(--cream-muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.cpj-book-site-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(201,168,76,0.35);
  padding-bottom: 2px;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 860px) {
  .cpj-book-grid { grid-template-columns:1fr; gap:3rem; }
  .cpj-media-card { width:160px; }
  .cpj-media-logo { width:160px; height:160px; }
}

@media (max-width: 560px) {
  .cpj-media-card { width:130px; }
  .cpj-media-logo { width:130px; height:130px; }
}


/* v2.2 — ensure gallery pagination is never caught by site-nav positioning */
.gallery-pagination { position: static !important; top: auto !important; }


/* v2.3 — Media scrolling banner */
.cpj-media-scroller::-webkit-scrollbar { height: 6px; }
.cpj-media-scroller::-webkit-scrollbar-track { background: rgba(244,232,201,0.08); border-radius: 3px; }
.cpj-media-scroller::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.4); border-radius: 3px; }
.cpj-media-scroller::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
.cpj-media-arrow:hover { background: var(--gold) !important; color: var(--bg-base) !important; }
@media (max-width: 700px) {
  .cpj-media-arrow { display: none !important; }
  .cpj-media-scroller { padding: 0.5rem 1rem !important; }
}