/* =========================================
   PYRAMID STAGE — Crossfade + Overlay + Monolith
   (Torches moved to torches.css)
   CLEANED: duplicates removed, rules consolidated
   NOTE: styling/values preserved (only de-duped + re-ordered)
========================================= */

/* =========================
   STAGE BASE
========================= */

.pyramid-stage{
  position: relative;
  width: 100%;
  min-height: 100vh;   /* KEY */
  background: #000;
  overflow: hidden;    /* usually what you want for a stage */
  height: auto;
}




/* Both layers must be stacked and fill the stage */
.stage-layer{
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  height: auto;              /* IMPORTANT: let content define height */
  opacity: 0;
  transition: opacity 2.2s ease;
  background: #000;
}


/* Entrance starts visible */
body:not(.in-chamber) .entrance-layer{ opacity: 1; }


/* Chamber starts hidden */
.chamber-layer{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
}

/* Full-width image (no cropping) */
.stage-image{
  width: 100%;
  height: auto;
  display: block;
}

/* JS will set the stage height once the image loads */
.pyramid-stage.ready{
  /* height is set inline by JS */
}

/* Scroll snap padding (menu + gap above monolith) */
html{
  scroll-padding-top: 300px; /* tune if needed */
}



/* =========================
   CHAMBER: veil + overlay + content
========================= */

/* Chamber image stays at base */
.chamber-layer .stage-image{
  position: relative;
  z-index: 0;
}

/* DUSTY VEIL (between image and overlay) */
.chamber-veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(240,230,210,0.08), rgba(60,45,30,0.18)),
    radial-gradient(circle at 50% 45%,
      rgba(255,255,255,0.06) 0%,
      rgba(0,0,0,0.45) 80%);
  pointer-events: none;
}

/* Default chamber overlay (dim, pre-torch state) */
.chamber-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  opacity: 0.92;
  filter: brightness(0.32) saturate(0.65) contrast(1.15);

  background:
    radial-gradient(900px 520px at 50% 45%,
      rgba(10, 8, 14, 0.65) 0%,
      rgba(0, 0, 0, 0.85) 60%,
      rgba(0, 0, 0, 0.95) 100%);

  transition:
    opacity 3s ease,
    filter 3s ease;
}

/* Brightening when torches ignite */
body.chamber-lit .chamber-overlay{
  opacity: 0.08;
  filter: none;
}

/* Chamber content above everything */
.chamber-content{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(1400px, 95%);
  padding: clamp(2rem, 5vw, 4rem) 0;
  opacity: 0;
  transition: opacity 1.8s ease 0.6s;
  z-index: 4;
}

body.in-chamber .chamber-content{ opacity: 1; }

/* =========================
   CROSSFADE STATES
========================= */

body.in-chamber .entrance-layer{
  opacity: 0;
  pointer-events: none;
}

body.in-chamber .chamber-layer{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   REQUIRED: hidden pattern image for fire JS
   (remove if you no longer use #bg)
========================= */
#bg{
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* =========================
   MONOLITH — FADE / DEBLUR REVEAL
========================= */

.monolith{
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;

  width: min(1300px, 97vw);
  z-index: 6;

  --monolith-x: 0px;  /* nudge if needed */

  opacity: 0;
  filter: blur(10px);
  transform: translateX(var(--monolith-x))
             translateY(calc(var(--monolith-y, 0px) + 14px));

  animation: none;
  will-change: opacity, transform, filter;

  overflow: visible;
}

/* Reveal animation */
body.monolith-on .monolith{
  animation: monolithFadeIn 4s ease-in-out forwards;
}

@keyframes monolithFadeIn{
  0%{
    opacity: 0;
    filter: blur(12px);
    transform: translateX(var(--monolith-x))
               translateY(calc(var(--monolith-y, 0px) + 18px));
  }
  100%{
    opacity: 1;
    filter: blur(0);
    transform: translateX(var(--monolith-x))
               translateY(var(--monolith-y, 0px));
  }
}

/* =========================
   MONOLITH — STONE SLAB (repeating background)
========================= */

.monolith-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  /* exactly two full vertical tiles */
  height: 320vh;
  max-height: 320vh;
  overflow: hidden;

  width: min(1265px, 96vw);
  margin: 0 auto;

  background-image: url("../images/backgrounds/inner-chamber-sandstone-monolith.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;

  border: 0;
  border-radius: 0;
  pointer-events: none;
}

/* Soot shadow pocket behind inscription */
.monolith-inner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 94%);
  height: 100%;

  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.08) 70%,
    rgba(0,0,0,0.0) 85%
  );

  filter: blur(22px);
  opacity: 0.9;

  z-index: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

:root{
  --monolith-tile-height: 140vh; /* tweak until one tile = one full slab */
}


/* =========================================
   MONOLITH TEXT — WARM POLISHED STONE (LIGHT)
   Reddish-brown mineral slab with depth
========================================= */

.monolith-page .monolith-text{
  position: relative;
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 18px;


  background:
 radial-gradient(140% 160% at 30% 20%,
  rgba(226,208,190,0.90) 0%,
  rgba(206,178,150,0.88) 38%,
  rgba(176,145,115,0.82) 100%);



/* X-offset = 0 → centered (no left/right bias)

Y-offset = 10px → shadow is pushed DOWN (light is from above)

blur-radius = 18px → how soft / spread the shadow is

rgba(...) → color + strength */



  /* THIS creates the sunken cut */
  box-shadow:
    /* hard cut edge */
    inset 0 0 0 2px rgba(90,50,25,0.55),

    /* top inner shadow (depth) */
    inset 0 10px 18px rgba(60,30,10,0.45),

    /* bottom inner highlight (light bounce) */
    inset 0 -6px 10px rgba(255,255,255,0.55),

    /* cavity shadow */
    inset 0 28px 48px rgba(0,0,0,0.25),

    /* external depth */
    0 20px 42px rgba(0,0,0,0.45);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

@media (min-width: 900px){
  .monolith-page .monolith-text{ width: 850px; }
}


.monolith-page .monolith-text::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.25) 6%,
      rgba(255,255,255,0.0) 16%
    );

  mix-blend-mode: overlay;
}



/* Subtle sediment + iron bloom */
.monolith-page .monolith-text::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(60% 50% at 30% 22%,
      rgba(160, 90, 40, 0.10) 0%,
      transparent 70%),
    radial-gradient(55% 60% at 70% 65%,
      rgba(120, 60, 30, 0.08) 0%,
      transparent 75%);
  

  opacity: 0.85;
}

/* Title inside the carved stone */
.monolith-text h2{
  margin-top: 1vh;
  margin-bottom: 0.6em;
  text-align: center;

  color: rgb(175, 110, 45);
  text-shadow:
    0 1px 0 rgba(80, 30, 10, 0.85),
    0 0 8px rgba(240, 180, 90, 0.45),
    0 0 16px rgba(200, 130, 60, 0.30);

  letter-spacing: 0.12em;
}



/* =========================================
   MONOLITH TEXT — INK + HEADINGS (parchment-like)
   Applies to: <div class="monolith-text"> ... </div>
========================================= */


/* 1) Ink color for body text + lists (match parchment vibe) */
.monolith-page .monolith-text p,
.monolith-page .monolith-text li{
  color: #2b1e12;   /* same ink as parchment */
  text-shadow: none;
  filter: none;
  mix-blend-mode: normal;
}

/* 2) Links inside monolith text (optional but nice) */
.monolith-page .monolith-text a{
  color: #4a2a12;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* 3) List spacing + bullets behaving consistently */
.monolith-page .monolith-text ul,
.monolith-page .monolith-text ol{
  margin-left: 0;
  padding-left: 2rem;
  list-style-position: inside;
}

/* 4) Section headings (brighter forged gold-bronze) */
.monolith-page .monolith-text h2{
  color: rgb(175, 110, 45);

  text-shadow:
    0 1px 0 rgba(80, 30, 10, 0.85),
    0 0 8px rgba(240, 180, 90, 0.45),
    0 0 16px rgba(200, 130, 60, 0.30);

  font-weight: 700;
  letter-spacing: 0.12em;
  filter: none;
  mix-blend-mode: normal;
}

/* 5) Subsection headings (dark bronze-ink) */
.monolith-page .monolith-text h3{
  color: rgb(105, 65, 35);

  text-shadow:
    0 1px 0 rgba(60, 25, 10, 0.55),
    0 0 3px rgba(180, 130, 70, 0.18),
    0 0 6px rgba(140, 90, 40, 0.10);

  font-weight: 600;
  letter-spacing: 0.035em;
  filter: none;
  mix-blend-mode: normal;
}

/* =========================================
   SINGLE NAV: pinned to bottom of screen,
   visually "at bottom of monolith" and
   OUTSIDE the scrolling text box
========================================= */

/* Make sure nav always paints on top */
body.in-chamber .monolith-nav{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  width: min(520px, 94vw) !important;

  z-index: 999999 !important;
  margin: 0 !important;

  pointer-events: auto !important;
}

/* Reserve space so the last paragraph never hides behind nav */
body.in-chamber .monolith-text{
  padding-bottom: 9rem !important; /* adjust 7–10rem depending on button height */
}


/* ===================================
   MONOLITH NAV — MOBILE FIX
=================================== */

/* MOBILE FIRST */
.monolith-nav{
  display: flex;
  flex-direction: column;   /* stack buttons */
  gap: 0.6rem;
  align-items: stretch;
}

.monolith-btn{
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.2;
  min-height: 36px;
  text-align: center;
}

/* Slightly emphasize the portal button */
.monolith-btn.portal{
  font-size: 0.9rem;
}

/* ===================================
   TABLET+
=================================== */

@media (min-width: 600px){
  .monolith-nav{
    flex-direction: row;     /* back to row */
    justify-content: space-between;
    align-items: center;
  }

  .monolith-btn{
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }
}

/* ===================================
   DESKTOP
=================================== */

@media (min-width: 900px){
  .monolith-btn{
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }
}

/* =========================================
   INNER CHAMBER NAV — MOBILE BUTTON FIX
========================================= */
@media (max-width: 699px){

  body.in-chamber .monolith-nav{
    width: min(420px, 92vw) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
  }

  body.in-chamber .monolith-nav .monolith-btn{
    width: 100% !important;
    min-width: 0 !important;

    padding: 0.55rem 0.7rem !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;

    min-height: 38px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.in-chamber .monolith-nav .monolith-btn.portal{
    font-size: 0.86rem !important;
  }

  body.in-chamber .monolith-text{
    padding-bottom: 11rem !important;
  }
}





/* =========================
   MONOLITH — ETCHED OVERLAY (text layer) [took the html for this out of the inner-chamber page!]
========================= */

.monolith-etch{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 95%);
  text-align: left;

  padding-top: 0vh;
  min-height: 60vh;

  /* NOTE: you currently use a full-slab overlay */
  height: 320vh;

  pointer-events: auto;
}

/* Shared: ink absorbed by stone */
.monolith-etch h2,
.monolith-etch p{
  mix-blend-mode: multiply;
}

/* Inscription titles */
.monolith-etch h2{
  color: #f6d27a;

  text-shadow:
    0 0 2px rgba(255,220,150,0.9),
    0 0 6px rgba(214,170,92,0.65),
    0 0 14px rgba(214,170,92,0.35),

    0 2px 0 rgba(0,0,0,0.9),
    0 -1px 0 rgba(0,0,0,0.7),
    1px 0 0 rgba(0,0,0,0.7),
   -1px 0 0 rgba(0,0,0,0.55);

  letter-spacing: 0.14em;
  z-index: 2;
}

/* Inscription body */
.monolith-etch p{
  color: #ead9b8;

  text-shadow:
    0 2px 0 rgba(0,0,0,0.9),
    0 -2px 0 rgba(0,0,0,0.65),
    2px 0 0 rgba(0,0,0,0.6),
   -2px 0 0 rgba(0,0,0,0.45),
    0 0 2px rgba(214,170,92,0.28);

  filter: contrast(1.12) saturate(0.95);
  z-index: 2;
}


/* =========================================
   MONOLITH SLAB — TYPE SCALE
========================================= */

.monolith-page .monolith-text{
  font-size: clamp(1.15rem, 1.9vw, 1.38rem);
  line-height: 1.7;
}



/* =========================
   MONOLITH — BASE TYPOGRAPHY (SAFE)
   (does not override slab container visuals)
========================= */

.monolith-title{
  font-family: "EWOAncient", serif;
  color: rgba(55, 40, 22, 0.92);
  text-shadow: 0 2px 0 rgba(255,255,255,0.25), 0 -1px 0 rgba(0,0,0,0.18);
  width: min(900px, 92%);
  margin: 0 auto;
  text-align: center;
}

.monolith-text{
  width: min(900px, 92%);
  margin: 0 auto;
  text-align: left;
  padding: clamp(18px, 2.4vw, 32px)
           clamp(20px, 3vw, 36px)
           clamp(24px, 3vw, 40px);
}



/* Only apply the “ancient” typography to text INSIDE the monolith text,
   and let your slab-specific rules override as needed */
.monolith-text p,
.monolith-text li{
  font-family: "EWOAncient", serif;
  color: rgba(55, 40, 22, 0.92);
  text-shadow: 0 2px 0 rgba(255,255,255,0.25), 0 -1px 0 rgba(0,0,0,0.18);
}


/* Inlay glyph */
.inlay{
  display: inline-block;
  color: rgba(214, 170, 92, 0.95);

  text-shadow:
    0 0 2px rgba(255, 240, 200, 0.85),
    0 0 8px rgba(214, 170, 92, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.6);

  letter-spacing: 0.15em;
  font-size: 5em;
  opacity: 0.95;

  filter: saturate(1.15) contrast(1.05);
}

/* =========================
   STORY PAGE SWITCH (fade)
========================= */

.monolith-page{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  visibility: hidden;
  pointer-events: none;
}

.monolith-page.is-active{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);

  visibility: visible;
  pointer-events: auto;

  transition: opacity 700ms ease, visibility 0s;
  /* Only the active page gets constrained to the monolith height */

  max-height: 100%;
  height: 100%;
  overflow: hidden;          /* prevents the page from pushing downward */
  box-sizing: border-box;
  padding-top: 8vh;          /* keep your spacing, but only on the active one */
}



/* ==============================
   MONOLITH NAV (Prev | Portal | Next)
============================== */

.monolith-nav{
  mix-blend-mode: normal;
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.monolith-btn{
  display: inline-block;
  white-space: nowrap;

  background:
    radial-gradient(circle at 50% 45%,
      rgba(214,170,92,0.14) 0%,
      rgba(8,5,15,0.35) 48%,
      rgba(8,5,15,0.55) 100%);
  border: 1px solid rgba(214,170,92,0.85);
  color: rgba(240,225,190,0.95);

  font-family: "EWOAncient", serif;
  letter-spacing: 0.22em;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;

  text-shadow:
    0 1px 0 rgba(0,0,0,0.65),
    0 0 10px rgba(255,245,220,0.18);

  box-shadow:
    0 0 0 1px rgba(214,170,92,0.12),
    0 0 18px rgba(214,170,92,0.18),
    inset 0 0 14px rgba(214,170,92,0.10);

  transition:
    transform 0.25s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    color 0.3s ease,
    text-shadow 0.3s ease;

  mix-blend-mode: normal;
  position: relative;
  z-index: 10;
}

/* Portal flavor (middle button) */
.monolith-btn.portal{
  letter-spacing: 0.32em;
  opacity: 0.9;
}

/* Hover = glowing gold halo */
.monolith-btn:hover{
  color: rgb(255, 225, 150);

  text-shadow:
    0 0 6px rgba(255,230,170,0.9),
    0 0 14px rgba(255,200,120,0.8),
    0 0 28px rgba(255,170,90,0.6);

  border-color: rgba(255,215,130,1);

  box-shadow:
    0 0 0 1px rgba(255,215,130,0.6),
    0 0 18px rgba(255,200,120,0.85),
    0 0 36px rgba(255,180,90,0.65),
    inset 0 0 14px rgba(255,215,150,0.35);
}

/* Pressed */
.monolith-btn:active{
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(255,215,130,0.4),
    0 0 12px rgba(255,180,90,0.6),
    inset 0 0 10px rgba(255,200,120,0.4);
}



/* =========================
   MONOLITH — SCROLL FIX (your working system)
   NOTE: values preserved; duplicates removed
========================= */

/* 0) NEVER clamp the slab */
body.in-chamber .monolith-inner{
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
  padding-bottom: var(--nav-clearance);
  box-sizing: border-box;
}

/* 1) Etch overlay resolves height; acts as nav positioning context */
body.in-chamber .monolith-etch{
  top: 0;
  bottom: 0;
  height: 100%;

  /* keep your current behavior/number (even if odd) */
  max-height: calc(320vh - 140px);

  position: absolute;
}

/* 2) Text is the scroll container */
body.in-chamber .monolith-text{
  overflow-y: auto !important;
  overflow-x: hidden !important;

  max-height: calc(100% - 40vh);


  -webkit-overflow-scrolling: touch;

  /* default (short stories let page scroll; JS toggles class when needed) */
  overscroll-behavior: auto;

  /* === FIX: remove ghost space at bottom of the slab text box === */
  padding-bottom: 2rem !important;   /* was huge (9–11rem) causing empty scroll */
}

/* also kill the last paragraph's bottom margin (often adds extra "air") */
body.in-chamber .monolith-text > :last-child{
  margin-bottom: 0 !important;
}



body.in-chamber.monolith-needs-scroll .monolith-text{
  overscroll-behavior: contain;
}

/* 3) Active story contributes to scroll height */
body.in-chamber .monolith-page.is-active{
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/* 4) Nav pinning (your latest, de-duped final intent: absolute overlay) */
body.in-chamber .monolith-nav{
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  min-height: var(--nav-clearance);
  width: min(500px, 95%);

  z-index: 200;
  margin: 0;
  box-sizing: border-box;
  padding: 0.9rem 1rem 1.1rem;
  pointer-events: auto;
}


body.in-chamber{
  --nav-clearance: 120px; /* adjust 100–140px if needed */
}






/* =========================
   HISTORICAL INSCRIPTION STYLES (as provided)
========================= */

.monolith-etch .ewo-article-excerpt{
  position: relative;
  z-index: 2;
  width: min(780px, 92%);
  margin: 0 auto;
  padding: clamp(0.75rem, 1.6vw, 1.35rem) 0;
}

.monolith-etch .ewo-article-header h2{
  color: #f3cf7a;
  letter-spacing: 0.12em;

  text-shadow:
    0 0 2px rgba(255,220,150,0.75),
    0 0 6px rgba(214,170,92,0.45),
    0 0 12px rgba(214,170,92,0.22),

    0 2px 0 rgba(0,0,0,0.92),
    0 -1px 0 rgba(0,0,0,0.72),
    1px 0 0 rgba(0,0,0,0.68),
   -1px 0 0 rgba(0,0,0,0.52);

  margin: 0 0 0.75rem;
}

.monolith-etch .ewo-article-intro,
.monolith-etch .ewo-article-citation{
  color: #e8d6b5;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.88),
    0 -2px 0 rgba(0,0,0,0.62),
    2px 0 0 rgba(0,0,0,0.58),
   -2px 0 0 rgba(0,0,0,0.42),
    0 0 2px rgba(214,170,92,0.20);

  filter: contrast(1.10) saturate(0.92);
  margin: 0 0 0.85rem;
}

.monolith-etch .ewo-quote{
  position: relative;
  margin: 1.25rem auto 1.25rem;
  padding: 1.1rem 1.05rem 1.0rem;

  width: min(760px, 100%);
  border-radius: 18px;

  background:
    radial-gradient(ellipse at 50% 35%,
      rgba(0,0,0,0.48) 0%,
      rgba(0,0,0,0.30) 38%,
      rgba(0,0,0,0.14) 60%,
      rgba(0,0,0,0.00) 82%
    ),
    linear-gradient(180deg,
      rgba(214,170,92,0.08),
      rgba(214,170,92,0.02)
    );

  filter: blur(0);
  mix-blend-mode: normal;
}

.monolith-etch .ewo-quote::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    radial-gradient(circle at 25% 20%,
      rgba(255,235,195,0.06),
      rgba(255,235,195,0.00) 52%
    ),
    radial-gradient(circle at 80% 70%,
      rgba(214,170,92,0.05),
      rgba(214,170,92,0.00) 55%
    );

  opacity: 0.9;
  pointer-events: none;
}

.monolith-etch .ewo-quote p{
  color: #ead9b8;

  text-shadow:
    0 2px 0 rgba(0,0,0,0.92),
    0 -2px 0 rgba(0,0,0,0.68),
    2px 0 0 rgba(0,0,0,0.62),
   -2px 0 0 rgba(0,0,0,0.46),
    0 0 2px rgba(214,170,92,0.22);

  filter: contrast(1.12) saturate(0.93);

  font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  line-height: 1.72;
  letter-spacing: 0.02em;

  margin: 0 0 0.95rem;
}

.monolith-etch .ewo-quote p:first-child{
  text-indent: 1.1em;
}

.monolith-etch .ewo-quote-footer p{
  margin: 0.6rem 0 0;
  opacity: 0.92;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.92em;
}

.monolith-etch .ewo-commentary{
  position: relative;
  width: min(780px, 92%);
  margin: 1.25rem auto 0;
  padding: 0.95rem 0 0;
}

.monolith-etch .ewo-commentary h3{
  color: #f0c96f;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  text-shadow:
    0 0 2px rgba(255,220,150,0.55),
    0 0 6px rgba(214,170,92,0.30),

    0 2px 0 rgba(0,0,0,0.92),
    0 -1px 0 rgba(0,0,0,0.70),
    1px 0 0 rgba(0,0,0,0.65),
   -1px 0 0 rgba(0,0,0,0.50);

  margin: 0 0 0.75rem;
}

.monolith-etch .ewo-commentary p{
  color: #efe2c6;

  text-shadow:
    0 2px 0 rgba(0,0,0,0.90),
    0 -2px 0 rgba(0,0,0,0.62),
    2px 0 0 rgba(0,0,0,0.56),
   -2px 0 0 rgba(0,0,0,0.40),
    0 0 4px rgba(214,170,92,0.14);

  filter: contrast(1.08) saturate(0.98);

  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.82;
  letter-spacing: 0.03em;

  margin: 0 0 0.95rem;
}

.monolith-etch .ewo-quote + .ewo-commentary{
  border-top: 1px solid rgba(214,170,92,0.22);
  padding-top: 1.05rem;
}

/* =========================
   MOBILE TUNING (as provided)
========================= */
@media (max-width: 560px){
  body.in-chamber .monolith-etch{
    max-height: calc(100vh - 120px);
  }

  body.in-chamber .monolith-text{
    max-height: calc(100vh - 205px) !important;
    padding-bottom: 2rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .monolith-etch .ewo-quote{
    padding: 0.95rem 0.85rem;
    border-radius: 16px;
  }
  .monolith-etch .ewo-quote p{
    line-height: 1.68;
  }
}

/* =========================================
   MONOLITH SCROLLBAR — carved wood + real noise texture
   (Chrome/Edge/Safari)
========================================= */

.monolith-text::-webkit-scrollbar{
  width: 18px;
}

/* Track = dark stone groove */
.monolith-text::-webkit-scrollbar-track{
  border-radius: 14px;

  background:
    linear-gradient(to right,
      rgba(0,0,0,0.85),
      rgba(40,28,16,0.55),
      rgba(0,0,0,0.85)
    );

  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.95),
    inset 0 0 2px rgba(214,170,92,0.25);

  border: 1px solid rgba(214,170,92,0.18);
}

/* Thumb = WOOD (grain + knots) + NOISE overlay */
.monolith-text::-webkit-scrollbar-thumb{
  border-radius: 14px;

  /* “carved handle” edge */
  border: 1px solid rgba(214,170,92,0.40);

  /* IMPORTANT: multi-layer texture */
  background-image:
    /* SVG noise overlay (tiny, repeats) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .18 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>"),

    /* knots / irregular stains */
    radial-gradient(18px 14px at 30% 22%,
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.00) 70%
    ),
    radial-gradient(22px 18px at 68% 60%,
      rgba(255,235,190,0.18),
      rgba(255,235,190,0.00) 72%
    ),
    radial-gradient(16px 12px at 55% 82%,
      rgba(0,0,0,0.28),
      rgba(0,0,0,0.00) 70%
    ),

    /* hard grain lines (this is what makes it read as wood) */
    repeating-linear-gradient(180deg,
      rgba(255,235,200,0.22) 0px,
      rgba(255,235,200,0.22) 2px,
      rgba(0,0,0,0.00) 4px,
      rgba(0,0,0,0.00) 8px
    ),

    /* base wood stain */
    linear-gradient(180deg,
      rgba(85,55,28,0.98),
      rgba(150,105,62,0.98),
      rgba(70,42,20,0.98)
    );

  background-blend-mode:
    overlay,   /* noise */
    multiply,  /* knots */
    screen,    /* warm knot highlight */
    multiply,  /* shadow knot */
    overlay,   /* grain */
    normal;    /* stain */

  background-size:
    120px 120px,
    auto,
    auto,
    auto,
    auto,
    auto;

  box-shadow:
    inset 0 0 6px rgba(255,235,190,0.12),
    inset 0 2px 2px rgba(0,0,0,0.38),
    0 0 10px rgba(0,0,0,0.88);
}

.monolith-text::-webkit-scrollbar-thumb:hover{
  filter: brightness(1.08) saturate(1.10);
}

.monolith-text::-webkit-scrollbar-thumb:active{
  filter: brightness(0.95) contrast(1.10);
}

/* Firefox fallback (no textures possible) */
.monolith-text{
  scrollbar-width: thin;
  scrollbar-color: rgba(150,105,62,0.95) rgba(0,0,0,0.75);
}


/* Blackout overlay (shared on portal + inner pages) */
#pageBlackout.page-blackout{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
  transition: opacity 650ms ease;
}

#pageBlackout.page-blackout.is-on{
  opacity: 1;
}

/* =========================================
   CHAMBER IMAGE GALLERY
========================================= */

.chamber-gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin: 2.2rem 0;
}

/* individual figure */

.chamber-figure{
  margin: 0;
}

/* image frame */

.chamber-figure button{
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.chamber-figure img{
  width: 100%;
  height: auto;
  display: block;

  border-radius: 10px;

  border: 1px solid rgba(80,55,25,0.35);

  box-shadow:
    0 8px 22px rgba(0,0,0,0.45);
}

/* caption */

.chamber-figure figcaption{
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;

  margin-top: 0.45rem;

  color: rgba(30, 21, 9, 0.75);
  font-style: italic;
}

@media (max-width: 680px){

  .chamber-gallery{
    grid-template-columns: 1fr;
  }

}



/* =========================
   REDUCED MOTION SAFETY
========================= */
@media (prefers-reduced-motion: reduce){
  .chamber-overlay,
  .monolith,
  .entrance-layer,
  .chamber-layer,
  .enter-whisper,
  .enter-btn{
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }
}

/* =========================================
   INNER CHAMBER NAV — FORCE SMALL MOBILE BUTTONS
========================================= */
@media (max-width: 900px){

  body.in-chamber .monolith-nav{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;

    width: min(420px, 92vw) !important;
    max-width: 92vw !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  body.in-chamber .monolith-nav .monolith-btn,
  body.in-chamber .monolith-nav a.monolith-btn,
  body.in-chamber .monolith-nav button.monolith-btn{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;

    padding: 0.45rem 0.6rem !important;
    margin: 0 !important;

    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;

    min-height: 34px !important;
    height: auto !important;

    white-space: normal !important;
    text-align: center !important;
  }

  body.in-chamber .monolith-nav .monolith-btn.portal{
    font-size: 0.82rem !important;
  }

  body.in-chamber .monolith-text{
    padding-bottom: 11.5rem !important;
  }
}