:root{
  --ink:#26221c;
  --paper:#f6efe2;
  /*--accent:#d4af37;*/
  --accent:#dBAE36;
  --accent-dk:#b68d1d;
  /* --nav:#2f2b24; */
--nav: #07131d;
  --card:#ffffff;
  --muted:#6d5f4f;
  --rail: 1400px; /* match .container max-width */
  --cover-blue-dark: #0a3557;
  --cover-blue-mid:  #0f4c75;
  --cover-blue-lite: #1b6fa3;

  /* Tweak these if you ever want slightly different proportions */
  --header-vh: 20vh;   /* ~20% of viewport for the title band */
  --hero-vh:   32vh;   /* ~32% of viewport for the hero band  */
  --header-cap: 260px; /* header max height */
  --header-min: 120px; /* header min height */
  --hero-cap:   650px; /* hero max height */
}
html{
  scroll-behavior:smooth;
  font-size: 16px;
}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:'Merriweather', serif; line-height:1.6;
  font-size: clamp(16px, 1.05vw + 10px, 20px); /* grows on big screens */
  line-height: 1.6;
}

/*************************************************** HEADER ***************************************************/

header{
  position: relative;
  overflow: hidden;
  height: 300px;
  background-color: #000;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  text-align: center;
}

header::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2400px;          /* match your banner image width */
  height: 300px;

  background-image:
    linear-gradient(
      to right,
      #000 0%,
      rgba(0,0,0,0.85) 12%,
      rgba(0,0,0,0.4) 25%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.4) 75%,
      rgba(0,0,0,0.85) 88%,
      #000 100%
    ),
    url("/images/title.jpg");

  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 2400px 300px, 2400px 300px;

  filter: contrast(1.05) brightness(1.03);
  z-index: 0;
  pointer-events: none;
}

header img{
  display:none;
}

header a{
  position: relative;
  z-index: 1;
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
}

/*************************************************** Shimmer ***************************************************/
.logo-wrap{
  position: relative;
  display: inline-block;
}

.logo-wrap::after{
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;

  left: 50.67%;
  top: 40.1%;

  width: 120px;
  height: 120px;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(255,255,240,1) 0%,
      rgba(255,240,180,.95) 6%,
      rgba(255,220,130,.85) 12%,
      rgba(255,200,90,.60) 22%,
      rgba(255,170,50,.35) 38%,
      rgba(255,150,30,.18) 55%,
      rgba(255,130,10,0) 72%
    );

  box-shadow:
    0 0 16px rgba(255,235,150,.85),
    0 0 40px rgba(255,200,80,.55),
    0 0 80px rgba(255,170,50,.35);

  opacity: .14;
  filter: blur(.35px);

  animation: nGlowPulse 5.5s ease-in-out infinite;
}

@keyframes nGlowPulse{
  0%, 82%, 100%{
    opacity: .10;
    transform: translate(-50%, -50%) scale(.85);
  }

  86%{
    opacity: .35;
    transform: translate(-50%, -50%) scale(1.05);
  }

  90%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.45);
  }

  94%{
    opacity: .35;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

body.disable-shimmer .logo-wrap::after{
  animation: none !important;
  opacity: 0 !important;
}

/*************************************************** NAV ***************************************************/
nav,
nav.sticky,
nav.scrolled,
header.scrolled nav,
header.sticky nav{
  background-color: #2b2b2b !important;
  backdrop-filter: none !important;
border-top: 2px solid #b68d1d;
border-bottom: 2px solid #b68d1d;
box-shadow:
  inset 0 1px 0 rgba(255,215,120,.15),
  inset 0 -1px 0 rgba(255,215,120,.15);
}

nav {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;           /* prevent wrapping */
  overflow-x: auto;            /* allow gentle horizontal scroll if needed */
  white-space: nowrap;         /* keep links on one line */
  scrollbar-width: none;       /* Firefox */

  border-top: 1px solid rgba(212,175,55,0.25);
  border-bottom: 1px solid #5c4b2a;

  transform: translate3d(0,0,0);      /* stronger layer promotion */
  will-change: transform;              /* hint Safari’s compositor */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;                      /* isolate repaints to the nav */
}
nav::-webkit-scrollbar { display: none; } /* Safari/iOS */

nav a {
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  color: #f6e7b2 !important;
  padding: 16px 18px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: clamp(16px, 1.2vw, 20px);
}
nav a:hover, nav a:focus { background: #4a4136; color: #fff; }

/*************************************************** HERO ***************************************************/
.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 420px;
  box-sizing: border-box;
  padding: 0 24px 34px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  color: #eee;
  background: #000;
  border-bottom: 4px solid var(--accent-dk);
  box-shadow: 0 4px 6px rgba(0,0,0,.25);
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 100%;
  background-image: url("/images/hero-bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1400px calc(100% + 8px);
  z-index: 0;
}

.hero::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      #000 0%,
      rgba(0,0,0,.6) 3%,
      rgba(0,0,0,.4) 6%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0) 94%,
      #000 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.3) 0%,
      rgba(0,0,0,.1) 10%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,.1) 90%,
      rgba(0,0,0,.3) 100%
    );
}

.hero .content{
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 760px;
  margin-bottom: 40px;   /* vertical alignment of white text */
}

.hero p {
  max-width: 620px;
  margin: 12px auto 0;   /* small gap under the gold title */
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5;
  color: #f2eadb;        /* slightly warmer than pure white */
  text-shadow:
    0 2px 6px rgba(0,0,0,.95),
    0 8px 22px rgba(0,0,0,.85),
    0 0 28px rgba(0,0,0,.75);
}

/*************************************************** BOOK ***************************************************/
.buy-wrap{
  display: grid;
  grid-template-columns: 500px minmax(0, 520px);
  gap: 36px;
  justify-content: center;
  align-items: start;
}

.book-media {
  position: relative !important;
  width: 500px !important;
  max-width: none !important;
  justify-self: center !important;
  border: 4px solid var(--accent-dk) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  background: transparent !important;
  line-height: 0 !important;
}

.book-media .book-poster,
.book-media .book-video {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.book-media .book-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cta {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;  
  text-decoration: none;
  color: #2a1a00;

  padding: 14px 26px;
  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #f5d77a 0%,
      #d4af37 45%,
      #b68d1d 100%
    );

  border: 1px solid rgba(120, 85, 10, 0.6);

  box-shadow:
    0 0 14px rgba(255,215,120,.45),
    0 3px 8px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.25);

  transition: all 0.18s ease;
}

.cta:hover {
  transform: translateY(2px);

  background:
    linear-gradient(
      180deg,
      #ffe08a 0%,
      #e0bb45 50%,
      #c99a1a 100%
    );

  box-shadow:
    0 3px 8px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.25);
}

.availability {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 15px;
  color: rgba(0,0,0,0.65);
  font-family: "Montserrat", sans-serif;
}

@media (max-width: 980px) {
  .buy-wrap {
    grid-template-columns: 1fr !important;
  }

  .book-media {
    width: min(560px, 100%) !important;
  }
}

/*************************************************** BOOK ENDORSEMENTS ***************************************************/

.buy-wrap .buy-copy {
  max-width: 520px;
}

.endorsements {
  margin: 18px 0 18px;
  display: grid;
  gap: 12px;
}

.endorsement {
  margin: 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.55);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.endorsement p {
  margin: 0 0 10px;
  font-family: "Merriweather", serif;
  font-size: 1.02rem;
  line-height: 1.45;
  color: #2a2a2a;
}

.endorsement cite {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.72);
}

/* Optional: slightly tighter on small screens */
@media (max-width: 700px) {
  .endorsement {
    padding: 12px 14px;
  }
  .endorsement p {
    font-size: 0.98rem;
  }
}

/*************************************************** BOOK MOVIE ***************************************************/

.book-media{
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 350px;   /* matches your current .book cap */
  aspect-ratio: 604 / 900;
  border: 4px solid var(--accent-dk);
  background-color: var(--paper);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border-radius: 6px;
  overflow: hidden;
}

/* Both layers occupy the exact same box */
.book-media .book{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  display: block;
}

/* Image shows first */
.book-poster{
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
  z-index: 1;
}

/* Video is hidden until ready */
.book-video{
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
  z-index: 2;
  background: transparent;
}

/* When ready, video fades in over the image */
.book-media.is-video-ready .book-video{
  opacity: 1;
  visibility: visible;
}

.book-media.is-video-ready .book-poster{
  opacity: 0;
}

/* Fallback play button if autoplay is blocked */
.book-video-fallback{
  position: absolute;
  inset: auto 12px 12px 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  cursor: pointer;
}

.book-media.needs-user-play .book-video-fallback{
  display: inline-flex;
}

.book-video-fallback[hidden]{
  display: none !important;
}

/*************************************************** COMMON ***************************************************/

.section{
  padding: 64px clamp(20px, 5vw, 56px);
}
.section--compact {
  padding: 32px clamp(20px, 4vw, 40px);
}
.section.divider{
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 -1px 0 rgba(0,0,0,.06) inset,
              0 1px 0 rgba(0,0,0,.06) inset;
  overflow: hidden;       /* keeps any blur or shadow inside */
}
.container{
  max-width: 1200px;           /* a tad wider, still centered */
  margin-inline: auto;         /* shorthand for left/right auto */
}
h2{
  font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:clamp(26px,3.2vw,40px); 
  color:#3a3026; 
  margin:0 0 12px;
  font-weight: 900;
}
.lede{
  font-weight: 500;        /* or 600 if your font supports it well */
  color: #3f352c;          /* darker parchment brown */
  margin:0 0 22px;
}

/* Make sure all images behave */
img{ display:block; max-width:100%; height:auto; }

/* PLACEHOLDERS */
.placeholder{ background:var(--card); border:1px solid #e6dcc8; border-radius:10px; padding:18px 20px; }

/* white panel */
.placeholder{
  max-width: 900px;
  padding: 32px 36px;

  background: #FDFCF4;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
}
.placeholder ul{
  margin:0;
  padding-left:22px;
}
.placeholder li{
  margin:12px 0;
  font-size:1.05rem;
}
.placeholder ul ul li{
  margin: 4px 0;   /* tighter vertical spacing */
}
.placeholder ul ul{
  margin-top: 4px;
  margin-bottom: 6px;
}

.forum-logo { 
  display: block;
  margin: 1.5rem auto; /* centers horizontally */
  max-width:320px;
  margin-top:15px;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

footer{ background:#241f19; color:#e9dcc2; text-align:center; padding:30px 12px; }

/*************************************************** ABOUT ***************************************************/

.about-section{
  position: relative;
  overflow: hidden;
}

.about-section::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 350px);

  width: 1100px;

  background-image: url("/images/apache.jpg");
  background-repeat: no-repeat;
  background-position: right 40px center;
  background-size: auto 100%;

  opacity: 0.8;
  pointer-events: none;
  z-index: 0;

  /* fade the image into the page */
  -webkit-mask-image: radial-gradient(ellipse at center,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,0.92) 60%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0.18) 90%,
    rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse at center,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,0.92) 60%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0.18) 90%,
    rgba(0,0,0,0) 100%);
}

.about-section .container{
  position: relative;
  z-index: 1;
}

@media (max-width: 900px){
  .about-section::after{
    display: none;
  }
}

/* reserve space for the Apache art on the right */
.about-section .container > h2,
.about-section .container > p,
.about-section .container > .placeholder{
  max-width: 845px;
}

@media (max-width: 900px){
  .about-section .container > h2,
  .about-section .container > p,
  .about-section .container > .placeholder{
    max-width: 100%;
  }
}

/*************************************************** TIMELINE ***************************************************/

.timeline-section{
  background:#f9f3e6;
}

.timeline-section .lede{
  max-width:none;
}

.timeline-section .timeline-intro,
.timeline-section .timeline-wrap{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.timeline-section .timeline-intro{
  margin-bottom:1.6rem;
}

.timeline-interactive{
  position:relative;
  width:100%;
}

.timeline-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* Invisible hover/click zones */
.timeline-hotspot{
  position:absolute;
  z-index:5;
  display:block;
  padding:0;
  margin:0;
  border:1px solid rgba(255,215,100,0);
  border-radius:8px;
  background:rgba(255,215,100,0);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* Soft glow so users can tell something is interactive */
.timeline-hotspot:hover,
.timeline-hotspot:focus-visible{
  background:rgba(255,215,100,.12);
  border:2px solid #d4a23b;
  box-shadow:
    0 0 0 2px rgba(255,215,120,.35),
    0 0 18px rgba(212,162,59,.45),
    0 10px 25px rgba(0,0,0,.35);
  outline:none;
  transform:scale(1.015);
}

/* Tooltip */
.timeline-tooltip{
  position:absolute;
  z-index:20;
  min-width:220px;
  max-width:320px;

  padding:12px 14px;
  border-radius:10px;

  background:rgba(22,16,10,.96);
  color:#f6ead1;

  border:2px solid #d7a84a; /* gold border */

  box-shadow:
    0 0 0 1px rgba(255,215,120,.35) inset,
    0 10px 28px rgba(0,0,0,.35);

  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;

  pointer-events:none;
}

.timeline-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.timeline-tooltip-title{
  margin-bottom:.35rem;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  color:#f1c76a;
}

.timeline-tooltip-text{
  font-size:.95rem;
  line-height:1.45;
}

/* =========================
   HOTSPOT COORDINATES
   Based on attached image: 1536 × 1059
   ========================= */

/* Apache Tribes bar */
.hs-apaches{
  left:0%;
  top:16.70%;
  width:96%;
  height:10.2%;
}

/* Spanish bar */
.hs-spanish{
  left:4%;
  top:26%;
  width:30%;
  height:19%;
}

/* Spanish Rediscovery text block */
.hs-rediscovery{
  left:40%;
  top:26%;
  width:50%;
  height:18.5%;
}

/* Ysleta Family bar */
.hs-ysleta{
  left:10%;
  top:45%;
  width:73%;
  height:11%;
}

/* Geronimo bar */
.hs-geronimo{
  left:49%;
  top:55%;
  width:35%;
  height:10%;
}

/* 1880s Prospectors bar */
.hs-prospectors{
  left:63%;
  top:64%;
  width:34%;
  height:10%;
}

/* Excavators bar
   Note: this one runs off the right edge in the source image,
   so the width here covers the visible portion only. */
.hs-excavators{
  left:77%;
  top:73%;
  width:23%;
  height:16%;
}

/* Optional: timeline title ornament area if you ever want it interactive */
.hs-title{
  left:13.50%;
  top:1.80%;
  width:73.20%;
  height:15.20%;
  display:none;
}

/* Mobile tooltip tuning */
@media (max-width: 768px){
  .timeline-tooltip{
    min-width:180px;
    max-width:260px;
    padding:10px 12px;
  }

  .timeline-tooltip-title{
    font-size:.95rem;
  }

  .timeline-tooltip-text{
    font-size:.88rem;
    line-height:1.4;
  }
}

/*************************************************** MEDIA ***************************************************/

.media-thumb{
  float:right;

  width:420px;

  margin-left:40px;
  margin-top:10px;
  margin-right:-250px;   /* pushes rock much farther right */

  display:block;

  border:none;
  background:none;
  box-shadow:none;

  /* base shadow */
  filter:
    drop-shadow(0 14px 10px rgba(0,0,0,.45))   /* tight contact shadow */
    drop-shadow(0 40px 55px rgba(0,0,0,.25));  /* soft falloff shadow */

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.media-thumb:hover{
  transform: scale(1.15) translateY(-4px);

  filter:
    drop-shadow(0 18px 16px rgba(0,0,0,.5))    /* stronger contact shadow */
    drop-shadow(0 50px 70px rgba(0,0,0,.3));   /* deeper falloff */
}

/* optional: slightly reduce effect on smaller screens */
@media (max-width: 900px){
  .media-thumb:hover{
    transform: scale(1.03) translateY(-2px);
  }
}


/*************************************************** MOBILE ***************************************************/
@media (max-width: 720px) {

  header{
    height: 140px;
    background: #000 url("/images/title-mobile.jpg") no-repeat center center / auto 100%;
  }
  header::before{
    content: none !important;
    display: none !important;
    }
  

  nav a{
    padding: 12px 14px;
    font-size: clamp(14px, 2.8vw, 17px);
  }

  nav a:hover,
  nav a:focus{
    background: #4a4136;
    color: #fff;
  }

  .hero::before,
  .hero::after{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .hero{
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    height: 300px !important;
    padding: 110px 18px 18px !important;
    box-sizing: border-box !important;

    color: #eee !important;
    border-bottom: 4px solid var(--accent-dk) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,.25) !important;

    background-color: #000 !important;
    background-image:
      linear-gradient(
        to bottom,
      rgba(0,0,0, .2) 0%,
      rgba(0,0,0, .1) 10%,
      rgba(0,0,0, .1) 65%,
      rgba(0,0,0, .5) 75%,
      rgba(0,0,0, .5) 100%
      ),
      url("/images/hero-mobile.jpg") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center top, center top !important;
    background-size: 100% 100%, 100% 100% !important;
  }

  .hero .content{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 65px;  /* vertical alignment of white text */
  }

  .hero p{
    max-width: 100%;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.35;
    color: #f2eadb;
    text-shadow:
      0 3px 10px rgba(0,0,0,.95),
      0 10px 30px rgba(0,0,0,.85);
  }
.buy-wrap{
  grid-template-columns: 1fr !important;
}

/* flatten the text container so its children can be reordered */
.buy-copy{
  display: contents;
}

/* order the pieces */

.buy-copy > h2{
  order: 1;
  text-align: center;
  margin-bottom: 18px;
}

.book-media{
  order: 2;
  justify-self: center;
  margin-bottom: 24px;
}

.buy-copy > .endorsements{
  order: 3;
  width: 100%;
  margin-bottom: 20px;
}

.buy-copy > .cta{
  order: 4;
  justify-self: center;
  margin: 0 auto 12px;
}

.buy-copy > .availability{
  order: 5;
  text-align: center;
}

  .media-thumb{
    float: none;
    display: block;
    width: 70%;
    margin: 25px auto;
  }
}