@charset "utf-8";
/* CSS Document */

body.prehistoricpage {
  background: var(--bg); /* #232024 */
}


/* ===== PP – Section 2 (centered stage with floating caption) ===== */
.pp-seg2{
  background: var(--paper);
  color:#111;
  width:min(1200px, 92vw);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px) 0 clamp(28px, 6vw, 48px);
  position: relative;

  /* dark “stage” bar behind the media */
  --bleed: clamp(28px, 4vw, 80px);
  --stage-gray: #3f3e42;
}
.pp-seg2::before{
  content:"";
  position:absolute; inset:0 auto 0 50%;
  transform: translateX(-50%);
  width: calc( min(1200px, 92vw) + (2 * var(--bleed)) );
  background: var(--stage-gray);
  z-index: 0;
  box-shadow: inset 0 10px 24px rgba(0,0,0,.25);
}

.pp-model{
  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
  z-index: 1; /* above the stage */
}
.pp-model{
  /* tweak to taste */
  --cap-gap: clamp(22px, 2.6vw, 28px);   /* edge + dots spacing */
  --cap-w: 320px;                        /* unified caption width */
  --cap-buffer: clamp(16px, 2.4vw, 36px);/* extra space from midline/dots */
  --cap-pad-x: clamp(14px, 2.2vw, 22px); /* inside padding L/R */
  --cap-pad-y: clamp(10px, 2vw, 16px);   /* inside padding T/B */
}

/* slider frame */
.pp-slider{
  position: relative;
  background: var(--ink);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  overflow: hidden;
}
.pp-slider img{
  display:block;
  width:100%;
  height: 60vh;           /* keeps the footprint consistent */
  max-height: 720px;
  object-fit: contain;
  background:#111;
}

/* arrows & dots */
.pp-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:999px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  cursor:pointer; z-index: 3;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
}
.pp-arrow.prev{ left: 12px; }
.pp-arrow.next{ right:12px; }
.pp-arrow:hover{ box-shadow: 0 12px 26px rgba(0,0,0,.34); }
.pp-arrow:active{ transform: translateY(-50%) scale(.98); }
.pp-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* dots (single definition) */
.pp-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: var(--cap-gap); display:flex; gap:8px; z-index:2;
}

.pp-dots button{
  width:8px; height:8px; border-radius:50%;
  background: rgba(255,255,255,.45);
  border:0; padding:0; cursor:pointer;
}
.pp-dots button.is-active{ background:#fff; }

/* === single, unified caption block (no duplicates elsewhere) === */
.pp-caption-card{
  position:absolute;
  right: var(--cap-gap);
  bottom: calc(40px + var(--cap-gap));           /* sits above dots */
  display:grid; grid-template-columns: auto 1px 1fr; align-items:center;
  gap: clamp(10px, 2vw, 18px);

  /* unified width: fixed to --cap-w unless it would cross the midline */
  width: min(var(--cap-w), calc(50% - var(--cap-gap) - var(--cap-buffer)));
  padding: var(--cap-pad-y) var(--cap-pad-x);
  color:#fff;
  z-index: 2;

  /* glassy card look (your styles) */
  background: color-mix(in srgb, #858a90 86%, transparent);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pp-caption-card h3{
  margin:0;
  font-family:'Red Hat Display',sans-serif;
  font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  font-size: clamp(12px, 1.4vw, 14px); color:#fff;
}
.pp-caption-card .vr{ width:1px; height:100%; background: rgba(255,255,255,.75); }
.pp-caption-card p{
  margin:0; color: rgba(255,255,255,.96);
  font-family:'Montserrat',sans-serif; line-height:1.6;
  font-size: clamp(12px, 1.2vw, 14px);
}

/* Mobile: caption drops below the image, full width */
@media (max-width: 900px){
  .pp-slider img{ height: 52vh; }
  .pp-caption-card{
    position: static;
    margin-top: 10px;
    width: 100%;
    grid-template-columns: 1fr; gap:8px; text-align:left;
  }
  .pp-caption-card .vr{ display:none; }
}


/* Consistent, smaller caption that never crosses the midline */
.pp-slider{
  --cap-gap: clamp(22px, 2.6vw, 28px);   /* edge + dots spacing (vertical & right) */
  --cap-w: 320px;                        /* target caption width */
  --cap-buffer: clamp(16px, 2.4vw, 36px);/* <-- extra space from the center/dots */
  --cap-pad-x: clamp(14px, 2.2vw, 22px); /* (optional) inside padding left/right */
  --cap-pad-y: clamp(10px, 2vw, 16px);   /* (optional) inside padding top/bottom */
}



.pp-cap{
  position: absolute;
  right: var(--cap-gap);
  bottom: calc(44px + var(--cap-gap));           /* stays above dots */
  box-sizing: border-box;
  /* Fixed width unless it would hit the midline; then it shrinks */
  width: min(var(--cap-w), calc(var(--cap-guard) - var(--cap-gap)));
  max-width: none;                                /* we control it with the line above */
}



/* Mobile: center the caption and let it breathe */
@media (max-width: 880px){
  .pp-cap{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(92%, 520px);                       /* unified but smaller on phones */
    bottom: calc(48px + var(--cap-gap));
  }
  .pp-dots{ bottom: calc(var(--cap-gap) * 0.7); }
}













/* C) UNITS block */
.pp-units{
  background: var(--ink);
  color:#f0f0f0;
  /* more breathing room from section above */
  margin-top: clamp(24px, 6vw, 64px);
  padding: clamp(26px, 5vw, 48px) 0 clamp(32px, 6vw, 56px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.pp-units-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid; gap: clamp(18px, 3.6vw, 28px);
}

/* headline + line */
.units-head{ position:relative; padding-top: clamp(10px, 2vw, 12px); }

/* UNITS section title */
.units-head h2 {
  font-family: "agency-fb", sans-serif;
  font-weight: 700; /* bold */
  letter-spacing: .045em;
  font-size: clamp(36px, 6.5vw, 64px); /* bigger min & max */
  line-height: 1.05;
  margin: clamp(10px, 2vw, 16px) 0 0;
}

.units-line{
  position:absolute; left:0; right:0; top:0; height:2px;
  background: var(--accent-2); opacity:.85;
}
.units-dot{
  position:absolute; right: clamp(8px, 3vw, 24px); top: -4px;
  width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* content grid — give the image a bit more real estate */
.units-grid{
  display:grid;
  grid-template-columns: 0.42fr 0.58fr; /* was 0.46/0.54 */
  gap: clamp(20px, 4.6vw, 32px);
  align-items:start;
}

/* list */
.list-kicker{
  margin: 0 0 12px 0;
  font-family:'Montserrat',sans-serif;
  font-weight:700; letter-spacing:.02em; opacity:.92;
}
.units-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.units-list li{
  position:relative; padding-left:18px; cursor:pointer;
  font-size: clamp(14px, 1.6vw, 16px);
  transition: opacity .2s ease, transform .2s ease;
}
.units-list li:hover{ opacity:.9; transform: translateX(2px); }
.units-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background:#dcdcdc; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.units-list strong{
	font-family: "agency-fb", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 28px); 
}

.units-list small{ color:#c9c9c9; }

/* color-coded dropdown (hidden until a unit is selected) */
.units-dropdown{ margin-top: 12px; display:none; }
.units-dropdown[open] summary{ border-bottom:1px dashed rgba(255,255,255,.25); }
.units-dropdown summary{
  cursor:pointer; list-style:none; outline:none;
  padding:8px 0; font-weight:700;
}
.units-dropdown .layers{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.units-dropdown .layers li{
  padding-left:16px; position:relative; cursor:pointer; font-size: .95rem;
}
.units-dropdown .layers li::before{
  content:""; position:absolute; left:0; top:.45em; width:10px; height:10px; border-radius:2px;
  background: currentColor; box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}

/* Hide nested layers until the unit is active */
.units-list .layers{
  list-style:none;
  margin: 6px 0 0 18px;  /* indent under unit */
  padding:0;
  display:none;
}
.units-list li.active .layers{
  display:grid;
  gap:6px;
}

/* Legend bullets + color for nested items */
.units-list .layers li{
font-family: "agency-fb", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px); /* optional for readability */
padding-left:16px;
  position:relative;
  cursor:pointer;
}

.units-list .layers li::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:10px; height:10px; border-radius:2px;
  background: currentColor;                 /* matches text color */
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}

/* Keep the top-level unit bullet you already had */
.units-list > ul > li{
  position:relative; padding-left:18px;
}
.units-list > ul > li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background:#dcdcdc; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}


/* map panel */
.units-map{
  margin:0; position:relative;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 36px rgba(0,0,0,.24);
  background: #0f0f11; /* frame */
  display:grid; place-items:center;
  aspect-ratio: 4 / 3;                /* a bit taller than square */
}
.units-stage{
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  background: #2b2b2e;     /* shows as letterbox behind transparent PNGs */
  overflow: hidden;        /* guards against stray large images */
}

.units-stage > img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.units-caption{
  position:absolute;
  right:12px; bottom:10px;            /* sits at the lower-right of the image */
  text-align:right;
  font-size:.9rem;
  line-height:1.2;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 10px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  pointer-events:none;
}
.units-caption.is-hidden{ display:none; }     /* hide when a unit is selected */


/* optional highlight overlay hook */
.units-highlight{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition: opacity .2s ease;
  /* simple glow you can recolor with JS */
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.6), 0 0 40px rgba(255,255,255,.18);
}

/* carousel buttons */

.units-controls{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; pointer-events:none;
}
.units-btn{
  pointer-events:auto;
  width:40px; height:40px; border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1;
  border-radius:10px; backdrop-filter: blur(4px);
} /* keep buttons clickable */

.units-btn:hover{ background: rgba(0,0,0,.5); }

/* responsive */
@media (max-width: 900px){
  .units-grid{ grid-template-columns: 1fr; }
  .units-map{ aspect-ratio: 16 / 12; }
}

/* === UNITS — phones & small tablets ================================ */
@media (max-width: 900px){
  .pp-units{ padding: clamp(24px,6vw,48px) 0; }

  /* header centers up a bit tighter */
  .units-head{ text-align:center; padding-top: 6px; }
  .units-head h2{ font-size: clamp(28px, 9vw, 40px); }
  .units-line{ opacity:.9; }

  /* stack list over image, tighter gap */
  .units-grid{
    grid-template-columns: 1fr;
    gap: clamp(14px, 4vw, 18px);
    align-items: stretch;
  }

  /* list becomes a soft card with big tap targets */
  .units-list{
    background: color-mix(in srgb, #ffffff 4%, transparent);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: clamp(10px, 3.4vw, 14px);
  }
  .list-kicker{ opacity:.95; margin-bottom: 8px; }

  .units-list ul{ gap: 10px; }
  .units-list > ul > li{
    padding: 12px 14px 12px 36px;           /* bigger hit area */
    border-radius: 10px;
    background: color-mix(in srgb, #ffffff 6%, transparent);
    border: 1px solid rgba(255,255,255,.06);
    transition: background .2s ease, transform .15s ease;
  }
  .units-list > ul > li:hover{ transform: translateX(2px); }
  .units-list > ul > li::before{ left: 12px; top: calc(50% - 4px); }

  .units-list strong{
    font-size: clamp(18px, 5.2vw, 22px);
    letter-spacing:.02em;
  }

  /* nested layers show as tidy bullets when a unit is active */
  .units-list .layers{
    margin: 8px 0 0 0;
    padding: 0;
    gap: 6px;
  }
  .units-list .layers li{
    font-size: clamp(14px, 4.2vw, 16px);
    padding-left: 18px;
  }
  .units-list .layers li::before{ top: .6em; }

  /* map/card */
  .units-map{
    border-radius: 14px;
    aspect-ratio: 16 / 10;                 /* a little taller than desktop */
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
  }
  .units-stage{ border-radius: inherit; }

  /* keep paddles reachable */
  .units-controls{
    inset: 0;                               /* stay on top of the image */
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
  }
  .units-btn{
    width: 38px; height: 38px;
    border-radius: 10px;
    font-size: 20px;
  }

  /* caption a touch larger */
  .units-caption{
    right: 12px; bottom: 12px;
    font-size: .9rem;
    padding: 6px 10px;
    border-radius: 8px;
  }
}

/* extra-small phones */
@media (max-width: 560px){
  .units-map{ aspect-ratio: 4 / 3; }        /* taller for small screens */
  .units-list > ul > li{ padding: 12px 12px 12px 34px; }
  .units-btn{ width: 36px; height: 36px; }
  .units-caption{ font-size: .85rem; }
}


















/* makes the native hidden attribute win everywhere */
[hidden] { display: none !important; }

/* ===== Prehistoric Pathways – Section 3 ===== */
.pp-seg3{
  --pp-green: #9bbf9f;       /* soft sage for large circle */
  background: var(--bg);
  color:#111;
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  gap: 0;
  padding: clamp(24px,5vw,36px) 0;
}

.pp-seg3 .pp-era-head{
  position: relative;
  /* add extra bottom padding so the rail can sit without colliding the figure */
  padding-bottom: clamp(60px, 8vw, 120px);
}

/* A) black band */
.pp-era-head{
  position:relative;
  background:#16191c;
  color:#fff;
  padding: clamp(18px,3.6vw,28px) clamp(16px,3.2vw,24px);
  overflow:visible;
}
.pp-era-eyebrow{
  margin:0 0 6px 0;
  text-align:center;
  font-family:"agency-fb","Agency FB",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  font-size: clamp(20px, 3.2vw, 32px);
}

.pp-era-title{
  margin:0;
  font-weight:900;
  letter-spacing:.06em;
  font-size: clamp(48px, 10.8vw, 128px);
  color:#9bbf9f; /* “CAMBRIAN” in sage */
}

/* Section 3: Era headline in Agency FB Bold */
.pp-era-title{
  font-family: "agency-fb","Agency FB", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;        /* Agency FB Bold */
  letter-spacing: .05em;   /* slight tracking looks nice in all-caps */
}


/* KEEP this (scoped) */
.pp-seg3 .pp-era-rail{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -28px;
  width: min(980px, 92vw);
  height: clamp(88px, 12vw, 140px);
  overflow: hidden;
  display: grid;
  place-items: center;
  z-index: 3;
}


.pp-seg3 .pp-era-dots .dot{
  --s: 1;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #0e0f11;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  transform: scale(var(--s));
  transition: transform .25s ease, box-shadow .25s ease, outline-color .2s ease;
  cursor: pointer;
}
.pp-seg3 .pp-era-dots .dot.is-active{
  --s: 2.2;                           /* enlarged center dot */
  outline: 4px solid var(--ink);
}

.pp-seg3 .pp-era-dots{
  position: relative;                 /* no absolute positioning here */
  right: auto;
  bottom: auto;
  display: flex;                      /* use a flex row so gaps are measured */
  align-items: center;
  gap: 14px;
  will-change: transform;
  transition: transform .35s ease;
}

.pp-era-dots{
  display:flex;
  align-items:center;
  gap:14px;
  will-change: transform;
  transition: transform .35s ease;
}

/* Every dot sits in a fixed slot so spacing never changes */
.pp-era-dots .dot{
  --s: 1;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 3px solid #0e0f11;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  background: transparent;          /* no white fill */
  transform: scale(var(--s));
  transition: transform .25s ease, box-shadow .25s ease, outline-color .2s ease;
  cursor: pointer;

  /* make the dot a circular “mask” for the PNG */
  position: relative;
	 z-index: 1;
  overflow: hidden;                 /* clip the PNG to the circle */
}

/* The PNG fills the dot and scales with it */
.pp-era-dots .dot .dot-icon{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;              /* preserve icon aspect */
  pointer-events: none;             /* keep clicks on the button */
}

.pp-era-dots .dot.is-active{
 --s: 2.2;                         /* same big circle effect */
  outline: 4px solid var(--ink);
	z-index: 10; 
}

/* Optional: subtle hover/focus ring */
.pp-era-dots .dot:hover,
.pp-era-dots .dot:focus-visible{
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}

/* Optional: center header text too */
.pp-era-head{ text-align:center; }

/* Add symmetric padding so any dot can sit in the exact center */
.pp-seg3 .pp-era-dots{
  padding-inline: var(--rail-pad, 0px);   /* left & right */
}

/* B) model image */
/* B) model image — uniform size for every slide */
.pp-era-figure{
  background: #9a9a9a;
  border-left: 1px solid rgba(0,0,0,.08);
  border-right: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 36px rgba(0,0,0,.12);

  /* NEW: unify the visible area */
  aspect-ratio: 16 / 10;                 /* a bit shorter than 16:9 */
  max-height: clamp(320px, 48vw, 560px); /* caps on very tall/wide screens */
  overflow: hidden;     
  width: min(980px, 92vw);
  margin: 0 auto;                    /* centers the figure */
  display: grid;                     /* centers the bitmap inside too */
  place-items: center;
}

.pp-era-figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* no cropping; letterbox when needed */
  object-position: center center;
}
/* C) caption bar */
.pp-era-caption{
  display:grid;
  grid-template-columns: auto 1px 1fr;
  align-items:center;
  gap: clamp(12px, 3vw, 24px);
  background:#3e4247; color:#eef0f2;
  padding: clamp(16px,3.2vw,20px) clamp(16px,3.2vw,24px);
  border-left: 1px solid rgba(0,0,0,.06);
  border-right:1px solid rgba(0,0,0,.06);
  margin-top: -1px; /* snug to image */
}
.pp-era-caption h4{
  margin:0; font-weight:900; letter-spacing:.06em; font-size: clamp(14px,1.8vw,18px);
}
.pp-era-caption h4 span{
  font-weight:600; opacity:.9;
}
.pp-era-caption .vr{ width:1px; height:100%; background: rgba(255,255,255,.6); }
.pp-era-caption p{ margin:0; line-height:1.55; }

/* purple progress nub */
.pp-era-progress{
  position:relative; height: 40px; background:transparent;
}
.pp-era-progress span{
  position:absolute; left: clamp(12px, 8vw, 120px); top: 12px;
  width:10px; height:10px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(125,59,224,.25);
}


/* make sure caption bars sit above the figure shadow */
.pp-era-caption { 
  position: relative; 
  z-index: 2; 
}



@media (max-width: 980px){
  .pp-seg3 .pp-era-dots{ position:relative; margin:0; }
  .pp-era-dots .dot-large{ width:100px; height:100px; }
  .pp-era-dots .dot{ width:44px; height:44px; }
}

@media (max-width: 680px){
  .pp-era-caption{ grid-template-columns: 1fr; }
  .pp-era-caption .vr{ display:none; }
}


/* Make dot size/outline animate smoothly */
.pp-era-dots .dot{
  transition: width .25s ease, height .25s ease, outline-color .2s ease, transform .25s ease;
}


/* Era image caption + controls, scoped to seg3 */
.pp-era-figure{ position:relative; }
.era-caption{
  position:absolute; right:12px; bottom:10px;
  text-align:right; font-size:.9rem; line-height:1.2;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 10px; border-radius: 8px; backdrop-filter: blur(4px);
  pointer-events:none;
}
.era-caption.is-hidden{ display:none; }

.era-controls{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; pointer-events:none;
}
.era-btn{
  pointer-events:auto;
  width:40px; height:40px; border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1;
  border-radius:10px; backdrop-filter: blur(4px);
}
.era-btn:hover{ background: rgba(0,0,0,.5); }

/* Ensure the dot rail (inside header) always paints above the figure */
.pp-seg3 .pp-era-head{ position: relative; z-index: 10; }

/* --- Responsive tuning for the active dot/rail --- */
@media (max-width: 900px){
  .pp-seg3 .pp-era-head{ padding-bottom: clamp(48px, 10vw, 90px); }
  .pp-seg3 .pp-era-rail{ bottom: -20px; height: clamp(70px, 14vw, 110px); }
  .pp-seg3 .pp-era-dots{ gap: 10px; }
  .pp-seg3 .pp-era-dots .dot{ width: 44px; height: 44px; border-width: 2px; }
  .pp-seg3 .pp-era-dots .dot.is-active{
    --s: 1.8;                 /* smaller enlargement on mobile */
    outline-width: 3px;
  }
}

@media (max-width: 540px){
  .pp-seg3 .pp-era-rail{ bottom: -16px; height: clamp(64px, 15vw, 96px); }
  .pp-seg3 .pp-era-dots .dot{ width: 40px; height: 40px; }
  .pp-seg3 .pp-era-dots .dot.is-active{ --s: 1.7; }
}

/* === Section 3: phone/tablet polish ============================== */
@media (max-width: 900px){
  /* let the big active dot hang outside the rail without clipping */
  .pp-seg3 .pp-era-rail{
    overflow: visible;              /* was hidden */
    z-index: 20;                    /* belt-and-suspenders */
  }

  /* (optional) a hair smaller when enlarged on mobile */
  .pp-seg3 .pp-era-dots .dot.is-active{
    --s: 1.85;                      /* you had 1.8–2.2; tweak as you like */
    outline-width: 3px;
  }

  /* caption bar text a touch smaller */
  .pp-era-caption h4{ font-size: clamp(12px, 3.4vw, 16px); }
  .pp-era-caption p { font-size: clamp(12px, 3.2vw, 14px); }
}

@media (max-width: 540px){
  /* keep the rail nudged a bit closer without clipping */
  .pp-seg3 .pp-era-rail{ bottom: -14px; }
}



/* ===== Prehistoric Pathways – Section 4 ===== */
/* Full-bleed background now lives on the section itself */
.pp-seg4{
  background: var(--paper);
  color:#111;
  /* full width on the section; spacing stays here */
  padding: clamp(24px,5vw,40px) 0;
}

/* New: width-constrained inner wrapper for the content */
.pp4-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  gap: clamp(18px, 4vw, 28px);
}

/* header (purple rule + dot, bold title, purple subhead) */
.pp-cards-head{
  text-align:center;
  display:grid; place-items:center; gap: 10px;
  position:relative;
}
.pp-cards-head .head-rule{
  width:min(760px, 86%); height:2px; background: var(--accent-2);
  display:block;
}
.pp-cards-head .head-dot{
  position:absolute; right: calc((100% - min(760px, 86%)) / 2);
  top: -6px; width:10px; height:10px; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 0 2px rgba(125,59,224,.25);
}
.pp-cards-head h2{
  margin: 6px 0 0 0;
  font-weight:900; letter-spacing:.02em;
  font-size: clamp(22px, 6vw, 48px);
}
.pp-cards-head .sub{
  margin: 4px 0 0 0;
  font-size: clamp(14px, 2.6vw, 22px);
  color: var(--accent-2);
}

/* stage with layered cards */
.pp-card-stage{
  position:relative;
  display:grid; grid-template-columns: 1fr;
  place-items:center;
  min-height: clamp(260px, 42vw, 480px);
}

/* let the JS turn buttons “on” without affecting other sections */
.side-card.is-live { pointer-events: auto; cursor: pointer; }


/* side “cards” (darker rectangles) — scaled down to match smaller main card */
.side-card{
  position:absolute; top:50%; transform:translateY(-50%);
  width: clamp(28px, 4vw, 46px);
  height: clamp(160px, 24vw, 280px);
  background:#8a8a8a; opacity:.85;
  border:none; border-radius: 4px;
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
  pointer-events:none; /* becomes pointer when wired later */
}
.side-card.left{ left: clamp(10px, 3vw, 26px); }
.side-card.right{ right: clamp(10px, 3vw, 26px); }

/* main image card — consistent, smaller size with fixed aspect ratio for all 12 images */
.card-main{
  margin:0;
  width: min(780px, 86%);            /* smaller than before */
  aspect-ratio: 16 / 9;              /* uniform ratio across the set */
  background:#c8c8c8;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 22px 44px rgba(0,0,0,.18);
  overflow:hidden;                    /* ensure clean crop of images */
}
.card-main img{
   display:block;                  /* consistent framing, no distortion */ 
	width:100%;
	height:100%;
 object-fit: contain;                /* show the whole PNG, no crop */
 object-position: center;                 /* consistent framing, no distortion */
}

/* copy below */
.pp-card-copy{
  width:min(980px, 92%);
  margin: 0 auto;
}

/* Title: slightly larger + Agency FB (Adobe Fonts kit link already provided) */
.pp-card-copy h3{
  margin: clamp(16px, 3vw, 20px) 0 8px 0;
  font-family: "agency-fb","Agency FB",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 700;
  letter-spacing:.08em;               /* tighter than before; more brand-forward */
  font-size: clamp(18px, 3vw, 28px);  /* was 16–24; now slightly larger */
  color:#3a3a3a;
  text-transform: uppercase;
}

/* body copy unchanged */
.pp-card-copy p{
  margin:0;
  font-family:'Montserrat',sans-serif;
  line-height:1.6; color:#3d3d3d;
}


/* --- Section 4: keep paddles visible & clickable on medium screens --- */
.pp-card-stage{
  /* room for paddles on both sides */
  --paddle: clamp(32px, 5vw, 56px);           /* paddle width */
  --lane: calc(var(--paddle) + 10px);         /* a little gutter */
  position: relative;
  padding-inline: var(--lane);                /* create the lanes */
  min-height: clamp(260px, 42vw, 480px);
}

/* paddles on top of the main card */
.side-card{
  width: var(--paddle);
  height: clamp(140px, 22vw, 260px);
  z-index: 3;                                 /* sit above the card */
  pointer-events: auto;                       /* ensure tappable */
  cursor: pointer;
}

.card-main{
  z-index: 1;
  /* max 780px, otherwise “what’s left” after the lanes */
  width: min(780px, calc(100% - (2 * var(--lane))));
  aspect-ratio: 16 / 9;
}

/* Keep paddles on mobile; shrink & reserve lanes */
@media (max-width: 760px){
  .pp-card-stage{
    --paddle: 28px;
    --lane: calc(var(--paddle) + 6px);
    padding-inline: var(--lane);
  }
  .pp-seg4 .side-card{
    display: block;                 /* override the old rule */
    width: var(--paddle);
    height: clamp(110px, 26vw, 180px);
    z-index: 3;
  }
  .pp-seg4 .card-main{
    width: min(780px, calc(100% - (2 * var(--lane))));
  }
}

/* If you truly want to hide paddles only on *very* small screens */
@media (max-width: 420px){
  .pp-seg4 .side-card{ display: none; }
  .pp-card-stage{ padding-inline: 0; }
  .pp-seg4 .card-main{ width: 94%; }
}

//* ---- Section 4 mobile: paddles w/ edge-only fade ---- */
@media (max-width: 540px){
  .pp-card-stage{ padding-inline: 0; --lane: 16px; }  /* visual width of the fade */
  .pp-seg4 .card-main{ width: 100%; }

  /* big invisible hit areas */
  .pp-seg4 .side-card{
    display:block;
    position:absolute; top:0; bottom:0;
    width:34%; height:100%;
    transform:none;
    background: transparent;        /* no gradient on the whole overlay */
    border:0; z-index:5; cursor:pointer;
  }
  .pp-seg4 .side-card.left{  left:0;  }
  .pp-seg4 .side-card.right{ right:0; }

  /* chevrons */
  .pp-seg4 .side-card::before{
    content: '‹';
    display:grid; place-items:center;
    font-size: 28px; line-height:1;
    color:#fff; opacity:.95; text-shadow:0 2px 8px rgba(0,0,0,.5);
    width:100%; height:100%;
  }
  .pp-seg4 .side-card.right::before{ content:'›'; }

  /* show a *narrow* fade only in a slim edge strip */
  .pp-seg4 .side-card::after{
    content:""; position:absolute; top:0; bottom:0; width:var(--lane);
    pointer-events:none;            /* keep the paddle clickable */
  }
  .pp-seg4 .side-card.left::after{
    left:0;
    background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0));
  }
  .pp-seg4 .side-card.right::after{
    right:0;
    background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,0));
  }
}

/* keep paddles enabled under 420px (overrides your old hide rule) */
@media (max-width: 420px){
  .pp-seg4 .side-card{ display:block; }
}














/* ===== Prehistoric Pathways – Section 5 ===== */
.pp-seg5{
  background: var(--ink-2);
  color:#111;
  padding: clamp(24px,5vw,40px) 0;
}

.pp5-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  gap: clamp(18px, 4vw, 28px);
}


.pp-seg5 .pp-cards-head h2 {
  color: var(--paper); /* or #fff for pure white */
}

/* collage grid */
.pp-collage{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
}

.pp-collage.pp-collage--sm{
  width: min(980px, 88%);  /* <— slightly smaller than the inner wrapper */
  margin: 0 auto;          /* keep it centered under the header */
}

.tile{
  position:relative; display:block; background:#c8c8c8;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  overflow:hidden;
  aspect-ratio: 16 / 10;
  transition: transform .12s ease, box-shadow .2s ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}
.tile img{
  width:100%; height:100%; object-fit:cover; display:block;
}


/* responsive */
@media (max-width: 720px){
  .pp-collage{ grid-template-columns: 1fr; }
}