/* ═══════════════════════════════════════════════
   AMYNILYSPEDIDA PAGE STYLES — Ancient Pill Millipedes
   Page-specific accent: amber / fossil theme
   ═══════════════════════════════════════════════ */

/* ─── PAGE-SPECIFIC VARIABLES ─── */
:root {
  --amber:  #c47a2a;
  --amber2: #d4924a;
  --amber3: #e8aa60;
  --bone:   #c8b89a;
  --bone2:  #e0d4b8;
  --stone:  #8a8070;
  --stone2: #5a5248;
  --coal:   #1a1814;
  --fern:   #5a7a4a;
  --fern2:  #3d5233;
  --fern3:  #222e1a;
  --muted2: #2e2820;
  --spine:  #d4924a;
  --rust:   #8b4513;
  --rust2:  #6b3410;
  --iron:   #7a6a50;
}

[data-theme="light"] {
  --amber:  #8a5518;
  --amber2: #a06820;
  --amber3: #b87a2a;
  --bone:   #4a4030;
  --bone2:  #3a3020;
  --stone:  #6a6050;
  --stone2: #8a8070;
  --coal:   #e8e0d0;
  --fern:   #3a5a2a;
  --fern2:  #2a4a1a;
  --fern3:  #b8c8a8;
  --muted2: #c0b8a8;
  --spine:  #a06820;
  --rust:   #a05520;
  --rust2:  #8a4518;
  --iron:   #9a8a70;
}

/* ─── STONE TEXTURE ─── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1000;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity:0.55;mix-blend-mode:overlay;
}

/* ─── COAL STRATA LINES ─── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(
    180deg,
    transparent 0px,transparent 38px,
    rgba(20,16,10,0.04) 38px,rgba(20,16,10,0.04) 40px
  );
}

/* ─── HERO BANNER ─── */
.hero-banner-bg {
  background: url('../images/fossil-banner.png') center/cover no-repeat;
}
.hero-banner-bg::after {
  background: rgba(10, 8, 5, 0.65);
}
[data-theme="light"] .hero-banner-bg::after {
  background: rgba(245, 242, 235, 0.5);
}

/* ─── HERO ─── */
.hero{ padding: 7rem 2rem 5rem; }
.hero-strata{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.hero-strata svg{width:100%;height:100%;opacity:0.12;}
.hero-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.hero-rings svg{width:min(800px,100vw);height:min(800px,100vw);animation:slowSpin 120s linear infinite;opacity:0.18;}
@keyframes slowSpin{to{transform:rotate(360deg);}}

/* Drifting spores / particles */
.paleo-particle{
  position:absolute;pointer-events:none;border-radius:50%;
  animation:sporeDrift var(--dur,12s) var(--delay,0s) infinite linear;
  opacity:0;
}
@keyframes sporeDrift{
  0%{opacity:0;transform:translate(0,0) rotate(0deg);}
  8%{opacity:var(--max-op,0.4);}
  92%{opacity:var(--max-op,0.2);}
  100%{opacity:0;transform:translate(var(--tx,30px),var(--ty,-80px)) rotate(180deg);}
}

.hero-eyebrow{color:var(--amber);opacity:0.8;}
.extinct-badge{
  display:inline-block;font-size:0.65rem;letter-spacing:0.28em;text-transform:uppercase;
  padding:0.22rem 0.8rem;border-radius:2px;
  background:rgba(196,122,42,0.12);color:var(--amber2);
  border:1px solid rgba(196,122,42,0.2);margin-bottom:1rem;
}
.millipede-wrap{cursor:pointer;margin:0 auto 1.5rem;display:inline-flex;align-items:center;justify-content:center;user-select:none;}
.hero h1 em{color:var(--amber2);}
h1 .dagger{color:var(--amber);font-style:normal;}
.hero-subtitle{color:var(--text2);font-size:0.9rem;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:3rem;font-family:'Jost',sans-serif;font-style:normal;}
.hero-stats{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap;}
.hero-stat{text-align:center;}
.hero-stat-num{display:block;font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--amber2);font-weight:300;line-height:1;margin-bottom:0.3rem;}
.hero-stat-label{font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);}
.scroll-hint{opacity:0.45;}
.scroll-line{height:40px;background:linear-gradient(to bottom,var(--amber),transparent);animation:scrollP 2.4s ease-in-out infinite;}
@keyframes scrollP{0%,100%{opacity:0.3;}50%{opacity:1;}}

/* ─── DIVIDERS ─── */
.divider{opacity:0.5;}
.divider.amber{background:linear-gradient(to right,transparent,var(--amber),transparent);opacity:0.18;}

/* ─── SECTION OVERRIDES ─── */
.section-label{color:var(--amber);opacity:0.75;}
.section-title em{color:var(--amber2);}
.section-body{color:var(--text);font-size:1rem;line-height:1.8;margin-bottom:2.5rem;}
.section-body p+p{margin-top:0.9rem;}

/* ─── REVEAL DELAYS ─── */
.rd1{transition-delay:0.12s;}.rd2{transition-delay:0.24s;}.rd3{transition-delay:0.36s;}

/* ─── GRIDS ─── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;margin-top:3rem;}
@media(max-width:768px){.two-col{grid-template-columns:1fr;gap:2rem;}}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4rem;margin-top:2.5rem;}
@media(max-width:768px){.three-col{grid-template-columns:1fr;}}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem;}
@media(max-width:768px){.four-col{grid-template-columns:1fr 1fr;}}

/* ─── IRONSTONE CARDS ─── */
.iron-card{
  border:1px solid rgba(196,122,42,0.15);border-radius:6px;padding:1.5rem;
  background:rgba(255,255,255,0.015);transition:transform 0.3s,border-color 0.3s;
}
[data-theme="light"] .iron-card{background:rgba(0,0,0,0.02);}
.iron-card:hover{transform:translateY(-4px);border-color:rgba(196,122,42,0.3);}
.ic-icon{font-size:1.4rem;margin-bottom:0.7rem;}
.ic-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--cream2);margin-bottom:0.4rem;font-weight:400;}
.ic-text{font-size:0.85rem;color:var(--text);line-height:1.7;}
.ic-tag{display:inline-block;margin-top:0.7rem;font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--clr,var(--amber));opacity:0.75;}

/* ─── FOSSIL SITE CARDS ─── */
.site-card{
  border:1px solid rgba(196,122,42,0.12);border-radius:8px;
  background:rgba(255,255,255,0.015);overflow:hidden;
  transition:transform 0.3s,border-color 0.3s;
}
[data-theme="light"] .site-card{background:rgba(0,0,0,0.02);}
.site-card:hover{transform:translateX(4px);border-color:rgba(196,122,42,0.28);}
.site-top{padding:1.2rem 1.4rem 0.8rem;border-bottom:1px solid rgba(196,122,42,0.08);}
.site-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--amber2);font-weight:400;margin-bottom:0.15rem;}
.site-geo{font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}
.site-body{padding:0.9rem 1.4rem 1.2rem;font-size:0.85rem;color:var(--text);line-height:1.7;}
.site-tag{display:inline-block;margin-top:0.6rem;font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;padding:0.18rem 0.6rem;border-radius:2px;background:rgba(196,122,42,0.1);color:var(--amber);}

/* ─── SEGMENT COMPARISON ─── */
.seg-compare{
  display:flex;gap:2rem;align-items:flex-end;margin-top:2.5rem;flex-wrap:wrap;
  background:rgba(255,255,255,0.015);border:1px solid rgba(196,122,42,0.12);
  border-radius:8px;padding:1.8rem;
}
[data-theme="light"] .seg-compare{background:rgba(0,0,0,0.02);}
.seg-unit{text-align:center;flex:1;min-width:140px;}
.seg-label{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--cream2);margin-bottom:0.3rem;font-style:italic;}
.seg-era{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:0.8rem;}
.seg-count{font-family:'Cormorant Garamond',serif;font-size:2.5rem;margin-bottom:0.3rem;font-weight:300;}
.seg-bars{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;max-width:120px;margin:0 auto;}
.seg-bar{width:12px;border-radius:2px;background:var(--clr);opacity:0.8;}
.seg-lbl-small{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:0.4rem;}
.seg-arrow{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--stone2);align-self:center;opacity:0.5;}

/* ─── SPINE ANATOMY ─── */
.spine-panel{
  background:rgba(255,255,255,0.015);border:1px solid rgba(196,122,42,0.15);
  border-radius:10px;padding:1.5rem;
}
[data-theme="light"] .spine-panel{background:rgba(0,0,0,0.02);}
.spine-label{font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem;}
.spine-caption{font-size:0.75rem;text-align:center;margin-top:0.8rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;}

/* ─── VOLVATION COMPARISON ─── */
.vol-compare{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:3rem;}
@media(max-width:768px){.vol-compare{grid-template-columns:1fr;}}
.vol-box{
  background:rgba(255,255,255,0.015);border:1px solid rgba(196,122,42,0.12);
  border-radius:10px;padding:1.8rem;
}
[data-theme="light"] .vol-box{background:rgba(0,0,0,0.02);}
.vol-box.ancient{border-color:rgba(196,122,42,0.25);}
.vol-box.modern{border-color:rgba(90,122,74,0.2);}
.vol-box h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--cream2);margin-bottom:0.3rem;font-weight:300;}
.vol-box .vb-sub{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;}
.vol-box p{font-size:0.88rem;color:var(--text);line-height:1.75;margin-bottom:0.8rem;}
.vol-tag{display:inline-block;padding:0.18rem 0.6rem;border-radius:3px;font-size:0.66rem;letter-spacing:0.15em;text-transform:uppercase;margin:0.2rem;}
.vtag-a{background:rgba(196,122,42,0.12);color:var(--amber);}
.vtag-g{background:rgba(90,122,74,0.12);color:var(--fern);}

/* ─── PALEOECOLOGY ─── */
.paleo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;margin-top:3rem;}
.paleo-card{
  border:1px solid rgba(196,122,42,0.1);border-left:3px solid var(--clr,var(--amber));
  border-radius:5px;padding:1.4rem;background:rgba(255,255,255,0.015);transition:transform 0.3s;
}
[data-theme="light"] .paleo-card{background:rgba(0,0,0,0.02);}
.paleo-card:hover{transform:translateX(4px);}
.pc-icon{font-size:1.4rem;margin-bottom:0.6rem;}
.pc-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--cream2);margin-bottom:0.4rem;font-weight:400;}
.pc-text{font-size:0.85rem;color:var(--text);line-height:1.7;}
.pc-tag{display:inline-block;margin-top:0.7rem;font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--clr,var(--amber));opacity:0.75;}

/* ─── GENUS CARDS ─── */
.genus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.3rem;margin-top:2.5rem;}
.genus-card{
  border:1px solid rgba(196,122,42,0.15);border-radius:8px;
  background:rgba(255,255,255,0.015);padding:1.5rem;
  transition:transform 0.3s,border-color 0.3s;
}
[data-theme="light"] .genus-card{background:rgba(0,0,0,0.02);}
.genus-card:hover{transform:translateY(-4px);border-color:rgba(196,122,42,0.3);}
.genus-name{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--amber2);font-weight:400;font-style:italic;margin-bottom:0.15rem;}
.genus-author{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:0.8rem;}
.genus-text{font-size:0.85rem;color:var(--text);line-height:1.7;margin-bottom:0.8rem;}
.genus-species{font-size:0.82rem;color:var(--fern);font-style:italic;line-height:1.6;}

/* ─── EXTINCTION TIMELINE ─── */
.extinction-wrap{
  background:rgba(255,255,255,0.015);border:1px solid rgba(196,122,42,0.12);
  border-radius:10px;padding:2rem;margin-top:3rem;
}
[data-theme="light"] .extinction-wrap{background:rgba(0,0,0,0.02);}
.ext-title{font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--amber);margin-bottom:1.5rem;}
.ext-bar-wrap{position:relative;height:48px;margin-bottom:0.5rem;}
.ext-bar{height:32px;border-radius:4px;display:flex;align-items:center;padding:0 0.8rem;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:400;position:absolute;transition:all 0.3s;}
.ext-label{font-size:0.78rem;color:var(--text2);margin-top:0.4rem;font-style:italic;}
.ext-event{
  font-size:0.8rem;color:var(--amber2);margin-top:0.3rem;
  display:flex;align-items:center;gap:0.4rem;font-style:italic;
}
.ext-event::before{content:'★';color:var(--amber);font-size:0.8rem;font-style:normal;}
.ext-line{width:1px;height:10px;background:rgba(196,122,42,0.3);margin-left:0;}

/* ─── µCT VIZ ─── */
.uct-wrap{
  background:rgba(255,255,255,0.02);border:1px solid rgba(196,122,42,0.15);
  border-radius:8px;padding:1.2rem;
}
[data-theme="light"] .uct-wrap{background:rgba(0,0,0,0.03);}
.uct-label{font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--amber);margin-bottom:0.8rem;}
.uct-caption{font-size:0.72rem;text-align:center;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.6rem;}

/* ─── TELOPOD DISCOVERY BOX ─── */
.discovery-box{
  background:linear-gradient(135deg,rgba(196,122,42,0.04),rgba(90,122,74,0.02));
  border:1px solid rgba(196,122,42,0.25);border-radius:10px;padding:2rem;margin-top:2.5rem;
}
.disc-header{font-family:'Cormorant Garamond',serif;font-size:0.72rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--amber);margin-bottom:0.8rem;}
.disc-title{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--cream2);line-height:1.2;margin-bottom:1rem;font-weight:300;}
.disc-title em{font-style:italic;color:var(--amber2);}
.disc-body{font-size:0.92rem;color:var(--text);line-height:1.8;}
.disc-stat-row{display:flex;gap:2rem;margin-top:1.5rem;flex-wrap:wrap;}
.disc-stat{text-align:center;}
.disc-stat-val{display:block;font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--amber2);font-weight:300;line-height:1;}
.disc-stat-lbl{font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}

/* ─── QUOTE ─── */
.quote-block{border-left:2px solid var(--amber);padding:1rem 1.5rem;margin:2rem 0;background:rgba(196,122,42,0.03);border-radius:0 6px 6px 0;}
.quote-block p{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:var(--text2);line-height:1.7;}

/* ─── VOL STEP ─── */
.vol-steps{counter-reset:step;}
.vol-step{position:relative;padding:1rem 1rem 1rem 3rem;margin-bottom:0.8rem;border-radius:6px;border:1px solid rgba(196,122,42,0.1);background:rgba(255,255,255,0.01);cursor:pointer;transition:all 0.3s;counter-increment:step;}
[data-theme="light"] .vol-step{background:rgba(0,0,0,0.02);}
.vol-step::before{content:counter(step,'0');position:absolute;left:0.9rem;top:50%;transform:translateY(-50%);font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--stone2);font-weight:300;}
.vol-step.active{border-color:var(--amber2);background:rgba(196,122,42,0.04);}
.vol-step.active::before{color:var(--amber2);}
.vol-step h4{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--cream2);margin-bottom:0.2rem;font-weight:400;}
.vol-step p{font-size:0.82rem;color:var(--text);line-height:1.6;}
.vol-note{font-size:0.8rem;color:var(--amber2);font-style:italic;margin-top:0.3rem;}
.vol-visual{display:flex;flex-direction:column;align-items:center;gap:1.2rem;}
.vol-progress{display:flex;gap:0.5rem;}
.vol-pip{width:6px;height:6px;border-radius:50%;background:var(--muted2);transition:background 0.3s;}
.vol-pip.active{background:var(--amber2);}
.vol-btn-row{display:flex;gap:0.8rem;}
.vol-btn{background:none;border:1px solid rgba(196,122,42,0.25);color:var(--amber2);font-family:'Jost',sans-serif;font-size:0.78rem;letter-spacing:0.15em;padding:0.5rem 1.1rem;cursor:pointer;border-radius:3px;transition:all 0.3s;}
.vol-btn:hover{background:rgba(196,122,42,0.07);border-color:var(--amber2);}

/* ─── LEGACY SECTION ─── */
.legacy-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-top:2.5rem;}
@media(max-width:768px){.legacy-grid{grid-template-columns:1fr;}}
.legacy-card{
  border:1px solid rgba(90,122,74,0.15);border-radius:8px;padding:1.8rem;
  background:rgba(255,255,255,0.015);
}
[data-theme="light"] .legacy-card{background:rgba(0,0,0,0.02);}
.lc-icon{font-size:1.8rem;margin-bottom:0.8rem;}
.lc-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--cream2);margin-bottom:0.5rem;font-weight:400;}
.lc-text{font-size:0.88rem;color:var(--text);line-height:1.75;}
.lc-arrow{display:block;margin-top:0.8rem;font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--fern);}

/* ─── MAP SECTION ─── */
.map-section{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3rem;}
@media(max-width:768px){.map-section{grid-template-columns:1fr;}}
.world-map-wrap{position:sticky;top:6rem;}
.world-map-label{font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:0.8rem;text-align:center;}
#world-map{width:100%;aspect-ratio:2/1;border-radius:8px;border:1px solid rgba(196,122,42,0.18);overflow:hidden;}
.map-legend{display:flex;flex-wrap:wrap;gap:0.6rem 1.2rem;margin-top:1rem;justify-content:center;}
.legend-item{display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:var(--muted);}
.legend-dot{width:8px;height:8px;border-radius:50%;}

/* ─── SECTION BACKGROUNDS (dark mode) ─── */
#morphology,
#paleoecology,
#reproduction {
  background: rgba(8,10,6,0.7);
}
.pangea-map-box {
  background: rgba(10,12,8,0.7);
}
.closing-quote-box {
  background: rgba(10,12,8,0.7);
}

/* Light mode overrides */
[data-theme="light"] #morphology,
[data-theme="light"] #paleoecology,
[data-theme="light"] #reproduction {
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .pangea-map-box {
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .closing-quote-box {
  background: rgba(0,0,0,0.03);
}