/* ============================================================
   THE STRANGER PAGE — cinematic, identity-rich, image-heavy.
   Joel mandate 2026-05-01: "go a little harder with identity stuff."
   ============================================================ */

/* Cross-book quote grid — 6 profound Stranger lines, one per book */
.stranger-cross-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 0 auto 48px;
  max-width: 980px;
}
.stranger-cross {
  margin: 0;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(26, 39, 54,0.55) 0%, rgba(5, 5, 5,0.85) 100%);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-left: 3px solid var(--bronze-hi, #E1CD9B);
  border-radius: 6px;
  text-align: left;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.stranger-cross:hover {
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 24px rgba(194, 158, 70,0.15);
}
.stranger-cross-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 12px;
}
.stranger-cross blockquote {
  margin: 0 0 10px;
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--ivory, #F4EDD7);
}
.stranger-cross cite {
  font-family: 'Belda', serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(244, 237, 215,0.85);
}
.stranger-video-card--small {
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 22px;
  font-size: 13px;
}
@media (max-width: 760px) {
  .stranger-cross-grid { grid-template-columns: 1fr; gap: 14px; max-width: 540px; }
  .stranger-cross { padding: 22px 20px; }
}

.stranger-page-hero {
  position: relative;
  min-height: 88vh;
  padding: 140px 24px 120px;
  text-align: center;
  color: var(--ivory, #F4EDD7);
  overflow: hidden;
}
.stranger-page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  /* The first moment of creation — Trinity over the clay, the breath, the
     explosion of light. Joel mandate 2026-05-02: open the Stranger page
     where the Stranger always was — at the very beginning. */
  background-image: url('strangers/all/adam_creation_explosion_of_light.jpg');
  background-size: cover;
  background-position: center;
  /* Brightened slightly per Joel 2026-05-02: was 0.62, now 0.78 */
  filter: brightness(0.78) contrast(1.04);
  animation: stranger-ken-burns 28s ease-in-out infinite alternate;
}
.stranger-page-hero::after {
  /* Lighter scrim so the brightened background reads — Joel mandate 2026-05-02. */
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(5, 5, 5,0.12) 0%, rgba(5, 5, 5,0.55) 100%),
    linear-gradient(180deg, rgba(5, 5, 5,0.20) 0%, transparent 30%, transparent 70%, rgba(5, 5, 5,0.78) 100%);
}
@keyframes stranger-ken-burns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -1%); }
}
.stranger-page-hero > * { position: relative; z-index: 2; }
.stranger-page-hero h1 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.02;
  margin: 0 auto 22px;
  color: var(--ivory, #F4EDD7) !important;
  letter-spacing: -0.005em;
  text-shadow: 0 4px 28px rgba(0,0,0,0.85), 0 0 60px rgba(0,0,0,0.5);
  max-width: 940px;
}
.stranger-page-hero h1 em { color: var(--bronze-hi, #E1CD9B); font-style: italic; }

/* ============================================================
   STRANGER = SANDSTONE-PURITY family override.
   The page identity is divine — bronze accents shift to a warmer,
   stone-toned ivory so the page "feels" purity-family without
   breaking the cinematic dark composition.
   ============================================================ */
body[data-book="stranger"] .stranger-page-hero h1 em,
body[data-book="stranger"] .stranger-anchor h2 em,
body[data-book="stranger"] .stranger-creed h2 em,
body[data-book="stranger"] .stranger-page-hero-eyebrow,
body[data-book="stranger"] .stranger-anchor-eyebrow,
body[data-book="stranger"] .stranger-anchor-cite,
body[data-book="stranger"] .stranger-creed .label,
body[data-book="stranger"] .stranger-sightings .label {
  color: var(--sand-3, #EEEFEA) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}
/* Soften the warm gold radial in the anchor section to a cooler stone-light */
body[data-book="stranger"] .stranger-anchor {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(224,223,214,0.18) 0%, transparent 72%),
    linear-gradient(180deg, #050505 0%, #0F1620 100%);
}
.stranger-page-hero-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin: 0 0 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}
.stranger-page-hero-lede {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(244, 237, 215,0.95);
  margin: 0 auto;
  max-width: 660px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75);
}
.stranger-hero-cta {
  margin-top: 32px;
}

.stranger-anchor {
  padding: 110px 24px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(194, 158, 70,0.20) 0%, transparent 70%),
    linear-gradient(180deg, #050505 0%, #0F1620 100%);
  color: var(--ivory, #F4EDD7);
  text-align: center;
}
.stranger-anchor .wrap-narrow { max-width: 820px; margin: 0 auto; }
.stranger-anchor-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin: 0 0 18px;
}
.stranger-anchor h2 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  color: var(--ivory, #F4EDD7) !important;
  margin: 0 0 26px;
}
.stranger-anchor h2 em { color: var(--bronze-hi, #E1CD9B); font-style: italic; }
.stranger-anchor-verse {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5;
  color: rgba(244, 237, 215,0.92);
  margin: 0 auto 18px;
  max-width: 620px;
}
.stranger-anchor-cite {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}

.stranger-creed {
  padding: 90px 24px;
  background: linear-gradient(180deg, #0F1620 0%, #050505 100%);
  color: var(--ivory, #F4EDD7);
}
.stranger-creed .wrap { max-width: 1180px; margin: 0 auto; }
.stranger-creed .label { color: var(--bronze-hi, #E1CD9B) !important; }
.stranger-creed h2 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  text-align: center;
  margin: 12px 0 36px;
  color: var(--ivory, #F4EDD7) !important;
}
.stranger-creed h2 em { color: var(--bronze-hi, #E1CD9B); font-style: italic; }
.stranger-creed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.creed-card {
  padding: 30px 28px 32px;
  background: linear-gradient(180deg, rgba(26, 39, 54,0.55) 0%, rgba(5, 5, 5,0.85) 100%);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 12px;
}
.creed-card h3 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  color: var(--bronze-hi, #E1CD9B);
  margin: 0 0 14px;
}
.creed-card p {
  font-family: 'Belda', serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(244, 237, 215,0.88);
  margin: 0;
}
.creed-card p + p { margin-top: 12px; }
@media (max-width: 900px) { .stranger-creed-grid { grid-template-columns: 1fr; } }

.stranger-sightings {
  padding: 100px 24px;
  background: linear-gradient(180deg, #050505 0%, #0F1620 100%);
  color: var(--ivory, #F4EDD7);
}
.stranger-sightings .wrap { max-width: 1320px; margin: 0 auto; }
.stranger-sightings .label { color: var(--bronze-hi, #E1CD9B) !important; }
.stranger-sightings h2 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 50px);
  text-align: center;
  margin: 12px 0 18px;
  color: var(--ivory, #F4EDD7) !important;
}
.stranger-sightings h2 em { color: var(--bronze-hi, #E1CD9B); font-style: italic; }
.stranger-sightings > .wrap > .section-head > p.lede {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 17px;
  text-align: center;
  color: rgba(244, 237, 215,0.78);
  margin: 0 auto 36px;
  max-width: 640px;
}
.stranger-book-block {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid rgba(194, 158, 70,0.22);
}
.stranger-book-block:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.stranger-book-head {
  text-align: center;
  margin-bottom: 22px;
}
.stranger-book-head-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  display: block;
  margin-bottom: 8px;
}
.stranger-book-head h3 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ivory, #F4EDD7) !important;
  margin: 0 0 8px;
}
.stranger-book-head p {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(244, 237, 215,0.82);
  margin: 0;
}
.stranger-frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.stranger-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #1A2736;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.stranger-frame:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 0 32px rgba(194, 158, 70,0.20);
}
.stranger-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, filter 0.4s ease;
}
.stranger-frame:hover img {
  transform: scale(1.05);
  filter: brightness(1.08) contrast(1.05);
}
.stranger-frame-feature { grid-column: span 2; aspect-ratio: 21 / 9; }

.stranger-video-slot {
  padding: 100px 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(194, 158, 70,0.10) 0%, transparent 70%),
    linear-gradient(180deg, #0F1620 0%, #050505 100%);
  color: var(--ivory, #F4EDD7);
  text-align: center;
}
.stranger-video-slot .wrap-narrow { max-width: 880px; margin: 0 auto; }
.stranger-video-slot .label { color: var(--bronze-hi, #E1CD9B) !important; }
.stranger-video-slot h2 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  margin: 12px 0 18px;
  color: var(--ivory, #F4EDD7) !important;
}
.stranger-video-slot h2 em { color: var(--bronze-hi, #E1CD9B); font-style: italic; }
.stranger-video-card {
  margin: 36px auto 0;
  aspect-ratio: 16 / 9;
  max-width: 860px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 50% at center, rgba(194, 158, 70,0.16) 0%, transparent 70%),
    linear-gradient(135deg, #1A2736 0%, #050505 100%);
  border: 1px solid rgba(194, 158, 70,0.42);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.stranger-video-card-icon {
  font-size: 56px;
  color: var(--bronze-hi, #E1CD9B);
  opacity: 0.55;
}
.stranger-video-card-text {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(244, 237, 215,0.85);
}

.stranger-reveal {
  padding: 100px 24px;
  background: linear-gradient(180deg, #050505 0%, #0F1620 100%);
  color: var(--ivory, #F4EDD7);
  text-align: center;
}
.stranger-reveal .wrap-narrow { max-width: 720px; margin: 0 auto; }
.stranger-reveal h2 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 52px);
  margin: 14px 0 18px;
  color: var(--ivory, #F4EDD7) !important;
}
.stranger-reveal h2 em { color: var(--bronze-hi, #E1CD9B); font-style: italic; }
.stranger-reveal p {
  font-family: 'Belda', serif;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(244, 237, 215,0.88);
  margin: 0 0 26px;
}
.stranger-reveal .label { color: var(--bronze-hi, #E1CD9B) !important; }

@media (max-width: 720px) {
  .stranger-page-hero { padding: 130px 18px 80px; min-height: auto; }
  .stranger-anchor { padding: 70px 18px; }
  .stranger-creed { padding: 60px 18px; }
  .stranger-sightings { padding: 60px 18px; }
  .stranger-video-slot { padding: 60px 18px; }
  .stranger-reveal { padding: 60px 18px; }
  .stranger-frame-feature { grid-column: span 1; aspect-ratio: 16 / 10; }
  .stranger-frame-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}