/* ========== Global Reset & Base ========== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Georgia', serif;
  background: linear-gradient(to bottom,
      #f4c542,
      /* monk saffron yellow */
      #d98b3a,
      /* ochre-orange blend */
      #d17927,
      /* deeper orange robe tone */
      #c13f00,
      /* vermillion */
      #d8b499
      /* soft brown for footer */
    );
  color: #111;
  transition: background 3s ease;
}
html {
  scroll-behavior: smooth;
}


/* ========== Structure ========== */
.room-container {
  max-width: 750px;
  margin: auto;
  padding: 2rem 1.5rem 4rem 1.5rem;
  text-align: center;
  animation: fadeInSlide 2s ease-out;
}

@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Titles ========== */
.room-title h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.subtitle {
  font-size: 1rem;
  color: #5a4430;
}

/* ========== Gallery Section ========== */
.soulprint-gallery h2 {
  margin-top: 2rem;
  font-size: 1.4rem;
  font-weight: bold;
}

.gallery-intro {
  font-style: italic;
  margin-bottom: 2rem;
}

.soulprint-entry h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.soulprint-image {
  display: block;
  margin: 0 auto 0.5rem auto;
  max-width: 90%;
  height: auto;
}

.soulprint-center {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.soulprint-reflection {
  font-size: 1rem;
  line-height: 1.6;
}

/* ========== Section 3 & 4 (Centered) ========== */
.centered-text {
  text-align: center;
}

/* ========== Quiet Builders Section ========== */
.quiet-builders h2 {
  margin-top: 3rem;
  font-size: 1.3rem;
  font-weight: bold;
}

/* ========== Drop Phrase (Stamp-In and Stay) ========== */
.drop-phrase {
  display: inline-block;
  padding: 1.3rem 1.6rem;
  padding-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  font-weight: 600;
  font-size: 1.3rem;
  font-family: serif;
  color: #a12300;
  text-align: center;
  text-shadow:
    0 0 2px rgba(255, 230, 180, 0.7),    /* soft outer glow */
    0 0 6px rgba(255, 230, 200, 0.35),
    0 0 8px rgba(161, 35, 0, 0.6);
  box-shadow:
    0 2px 5px rgba(255, 240, 220, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  margin: 2.2rem auto 2.8rem auto;
  width: fit-content;
  max-width: 90%;
  opacity: 1;
  animation:
    stampFadeIn 2.4s ease-out forwards,
    glowPulse 3.2s ease-in-out 2.4s infinite;
  animation-fill-mode: forwards;

}

/* KEYFRAMES */
@keyframes stampFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
    filter: blur(2px);
    text-shadow: none;
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
    filter: blur(0);
    text-shadow:
      0 0 15px rgba(255, 230, 180, 0.6),
      0 0 30px rgba(255, 220, 140, 0.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow:
      0 0 6px rgba(255, 230, 200, 0.35),
      0 0 8px rgba(161, 35, 0, 0.6),
      0 0 2px rgba(255, 230, 180, 0.7); /* warm yellow glow */
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 6px rgba(255, 230, 200, 0.35),
      0 0 8px rgba(161, 35, 0, 0.6),
      0 0 2px rgba(255, 230, 180, 0.7); /* warm yellow glow */
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 14px rgba(255, 230, 200, 0.65),
      0 0 18px rgba(161, 35, 0, 0.85),
      0 0 6px rgba(255, 230, 180, 0.9);
  }
}

/* MOBILE RESPONSIVE */
@media screen and (max-width: 768px) {
  .drop-phrase {
    font-size: 1.3rem;
    padding: 1.3rem 1.6rem;
  }
}

/* ========== Donation Block ========== */
.donation-block {
  background: #fdf2e3;
  padding: 1.5rem;
  margin: 2rem auto;
  border-radius: 10px;
  border: 1px solid #e3c3a5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  max-width: 500px;
  text-align: center;
}

.moon-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.qr-code {
  width: 80px;
  height: 80px;
  margin-top: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Final Signature ========== */
.final-signature {
  text-align: center;
  margin-top: 2rem;
  font-size: 1rem;
  opacity: 0;
  animation: stampFade 3s ease-out 1.2s forwards;
}

@keyframes stampFade {
  0% {
    opacity: 0;
    transform: scale(1.25) rotate(-4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes signatureFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.signature-block {
  opacity: 0;
  animation: signatureFade 1.8s ease-out 1s forwards;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
}


.seal-image {
  width: 80px;
  margin-top: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Waveform Motion ========== */
.waveform-wrapper {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: 2rem;
  overflow: hidden;
}

.waveform-line {
  position: absolute;
  width: 200%;
  height: 100%;
  background: repeating-linear-gradient(to right,
      #f6e6b2 0%,
      #fbd8a0 25%,
      #f7b092 50%,
      #fbd8a0 75%,
      #f6e6b2 100%);
  opacity: 0.5;
  animation: waveformFlow 6s linear infinite;
  transform: skewY(-2deg);
}

@keyframes waveformFlow {
  from {
    transform: translateX(0) skewY(-2deg);
  }

  to {
    transform: translateX(-50%) skewY(-2deg);
  }
}

/* ========== Magnifier ========== */
.magnifier {
  position: fixed;
  top: 18px;
  right: 18px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 999;
}

/* ========== Image Modal ========== */
#image-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}

#modal-image {
  display: block;
  margin: 80px auto;
  max-width: 80%;
  max-height: 80%;
}

#close-modal {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

.mute-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  transition: background 0.3s;
}

.mute-toggle:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* ========== Responsive ========== */
@media screen and (max-width: 768px) {
  .room-container {
    padding: 1.5rem 1rem 3rem;
  }

  .qr-code,
  .seal-image {
    width: 65px;
    height: 65px;
  }

  .drop-phrase {
    font-size: 1rem;
  }

  #modal-image {
    margin: 50px auto;
    max-width: 90%;
    max-height: 75%;
  }
}

/* ========== Dark Mode ========== */
body.dark-mode {
  background: linear-gradient(to bottom,
      #1e1b16,
      #2a2118,
      #3b2c1e,
      #4d3220,
      #5a3c26);
  color: #e7e2d9;
}

body.dark-mode .subtitle,
body.dark-mode .gallery-intro,
body.dark-mode .soulprint-reflection,
body.dark-mode .donation-block p,
body.dark-mode .final-signature,
body.dark-mode .drop-phrase {
  color: #e7e2d9;
}

body.dark-mode .donation-block {
  background: #3a2d1f;
  border-color: #5c4633;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.04);
}

body.dark-mode .moon-icon {
  color: #ffe399;
}

body.dark-mode .drop-phrase {
  color: #ffbb88;
  text-shadow: 0 0 4px rgba(255, 102, 51, 0.3);
}

body.dark-mode .seal-image,
body.dark-mode .qr-code {
  filter: brightness(1.1) contrast(1.2);
}

.drop-phrase {
  font-size: 1.05rem;
}

@keyframes roomDropPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(255, 174, 66, 0.4);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.4;
    box-shadow: 0 0 60px rgba(255, 174, 66, 0.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
    box-shadow: 0 0 0px rgba(255, 174, 66, 0);
  }
}



#room-drop-pulse {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,174,66,0.6) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.room-drop-active {
  animation: roomDropPulse 2s ease-out 1;
  transform-origin: center center;
}

@media screen and (max-width: 768px) {
  .drop-phrase {
    padding: 16px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #a12300; /* deep vermillion */
    background: rgba(255, 245, 210, 0.15); /* warm parchment tone – very light */
    border: 1px solid rgba(255, 230, 170, 0.35); /* light ochre border */
    border-radius: 16px;

    box-shadow:
      0 1px 2px rgba(255, 200, 120, 0.3),
      0 4px 6px rgba(255, 200, 120, 0.2),
      0 0 6px rgba(255, 230, 180, 0.25);

    text-align: center;
    text-shadow:
      0 1px 1px rgba(255, 220, 160, 0.3),
      0 0 3px rgba(255, 230, 170, 0.2); /* very soft glow */

    animation: fadeInPhrase 2.5s ease-in-out 1 forwards;
  }
}

@media screen and (max-width: 375px) {
  .drop-phrase {
    font-size: 15px;
  }
}

#ambient-glow {
  position: fixed;
  top: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  background: rgba(255, 174, 66, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 174, 66, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Optional: text zoom mode for the page */
:root{
  --font-scale-normal: 1;
  --font-scale-zoomed: 1.12; /* tweak if you want larger/smaller */
}
body{ font-size: calc(16px * var(--font-scale-normal)); }
body.zoom-on{ font-size: calc(16px * var(--font-scale-zoomed)); }

/* Modal quick styles */
#textModal.dark{
  background: rgba(0,0,0,0.92);
  color: #fff;
}

.soulprint-entry h3 { text-align: center; margin: 0.25rem 0 0.5rem; }
.soulprint-center { display: grid; place-items: center; }
.soulprint-image { max-width: 100%; height: auto; display: block; }
.soulprint-reflection { text-align: center; margin-top: 0.5rem; }

.soulprint-actions {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.soulprint-actions .btn {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #a12300;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
  transition: transform .12s ease;
}
.soulprint-actions .btn:hover { transform: translateY(-1px); }

/* Back to Chamber — raised gold pill */
.back-link{
  /* layout */
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  /* size */
  padding: 10px 14px;
  min-height: 38px;
  border-radius: 999px;

  /* look */
  background: linear-gradient(180deg, #f8e3ba 0%, #e7bf7a 100%); /* soft gold → ochre */
  color: #3a2400;
  font-weight: 700;
  text-decoration: none;
  letter-spacing:.1px;

  /* border & elevation */
  border: 1px solid rgba(176,108,45,.35);
  box-shadow:
    0 10px 22px rgba(161,35,0,.18),   /* warm drop shadow */
    0 2px  0   rgba(255,255,255,.55) inset, /* top highlight */
    0 -1px 0   rgba(0,0,0,.06) inset;       /* lower edge */

  /* polish */
  backdrop-filter: blur(4px) saturate(110%);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Hover = a touch higher + brighter */
.back-link:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(161,35,0,.24),
    0 2px  0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(0,0,0,.07) inset;
  filter: saturate(1.05);
}

/* Active = pressed */
.back-link:active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(161,35,0,.16),
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 0 rgba(0,0,0,.08) inset;
}

/* Keyboard focus ring (vermillion, consistent with theme) */
.back-link:focus-visible{
  outline: 3px solid #c41219;
  outline-offset: 2px;
}

/* Optional: small left icon arrow if you include one */
.back-link .icon{ font-size: 1.05rem; line-height: 1; }

/* Optional floating variant (if you want it docked) */
.back-link.is-floating{
  position: fixed;
  left: 12px;
  top: 12px;           /* or bottom: 12px; if you prefer a FAB */
  z-index: 10006;
}

/* Back to Chamber — micro polish */
.back-link{
  color: #2c1a00;                /* a touch darker for contrast */
  letter-spacing: .12px;         /* tiny crispness */
}

/* Add a chevron automatically (no HTML change) */
.back-link::before{
  content: "←";
  display: inline-block;
  margin-right: .45rem;
  transform: translateY(-1px);
  opacity: .9;
}

/* Slightly more “lift” on hover */
.back-link:hover{
  box-shadow:
    0 14px 28px rgba(161,35,0,.26),
    0 2px 0 rgba(255,255,255,.65) inset,
    0 -1px 0 rgba(0,0,0,.08) inset;
}

/* Mobile: a bit tighter */
@media (max-width: 480px){
  .back-link{ padding: 8px 12px; min-height: 34px; }
}

/* --- Responsive placement --- */
/* Default: inline (desktop/tablet) */
.back-link{
  position: static;   /* sits in header flow */
}

/* Mobile: float bottom-left and auto-hide on scroll */
@media (max-width: 720px){
  .back-link{
    position: fixed;
    left:  max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    top: auto;
    z-index: 10006;
  transition:
  transform .28s cubic-bezier(.16,.84,.44,1),
  opacity   .28s linear,
  box-shadow .20s ease;
  }

  @media (prefers-reduced-motion: reduce){
  .back-link{ transition: none; }
}

  /* Slide off-screen while reading; keeps a gentle presence */
  .back-link.is-hidden{
    transform: translateY(120%);
    opacity: .35;
    box-shadow: none;
  }
}

@media (max-width: 480px){
  .back-link{
    font-size: .85rem;
    padding: 8px 10px;
    max-width: 180px;      /* keeps chip compact on narrow phones */
    text-align: center;
  }
}

/* Make dynamically-inserted gallery cards visible */
#gallery .fade-in-on-scroll { opacity: 1; transform: none; }


/* After audio starts, JS adds .unlocked to hide it */
#audio-overlay.unlocked{
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: opacity .4s ease;
}

/* Soulprint Haiku styling (final, unified) */
.soulprint-haiku{
  text-align: center;
  margin: 8px auto;       /* unified spacing */
  font-style: italic;
  line-height: 1.6;
  opacity: .95;           /* gentle visual balance */
}

.soulprint-haiku .haiku-line{
  display: block;         /* one line per row */
}

.soulprint-placeholder{
  width:min(560px,90%); aspect-ratio:4/3; display:grid; place-items:center;
  margin:0 auto 8px; border:1px dashed rgba(0,0,0,.25); border-radius:12px;
  background:rgba(255,255,255,.55); font-style:italic; color:#6b4a3a;
}

/* ——— Soulprint Gallery Centering ——— */
.soulprint-gallery { text-align: center; }
.soulprint-gallery h2,
.gallery-intro { text-align: center; }

.soulprint-entry h3 { text-align: center; }

.soulprint-center {
  display: grid;
  place-items: center;  /* centers image/placeholder */
}

.soulprint-image {
  display: block;
  margin: 0 auto;       /* centers the img element */
}

.soulprint-placeholder { 
  margin: 0 auto;       /* centers the "Coming soon" box */
}

.soulprint-haiku { text-align: center; }
.soulprint-reflection { text-align: center; }

.soulprint-actions {
  justify-content: center;
  text-align: center;
}

/* A11y: visually hidden but accessible to screen readers */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.haiku-signature {
  margin: 6px auto 10px;
  text-align: center;
  opacity: .92;
  line-height: 1.3;
}
.haiku-signature .sig-name   { font-weight: 600; }
.haiku-signature .sig-role   { font-style: italic; opacity: .9; }
.haiku-signature .sig-seal   { display:block; margin: 4px auto 0; width: 44px; height:auto; }

@media (prefers-color-scheme: dark){
  .haiku-signature { opacity: .95; }
}

.truth-seals{ display:grid; gap:16px; margin:12px auto 20px; max-width:900px; }
@media (min-width:720px){ .truth-seals{ grid-template-columns:1fr 1fr; } }

.truth-seal{
  text-align:center; background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.12); border-radius:14px;
  padding:14px 16px; backdrop-filter:blur(6px) saturate(118%);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.truth-seal-mark{ display:block; width:40px; height:auto; margin:2px auto 8px; }
.truth-seal-mark-emoji{ font-size:22px; margin:2px auto 8px; }
.truth-seal-text{ margin:0; line-height:1.55; font-weight:600; color:#a12300; }

@media (prefers-color-scheme:dark){
  .truth-seal{ background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.18); }
  .truth-seal-text{ color:#f4c542; }
}

/* Monk-robe vibe cards (ochre → light saffron), soft shadows */
.truth-seal{
  text-align:center;
  background: linear-gradient(
    180deg,
    rgba(255, 243, 205, 0.92) 0%,   /* saffron/ochre */
    rgba(229, 170, 82, 0.28) 100%   /* warm robe tint */
  );
  border: 1px solid rgba(161, 35, 0, 0.12);        /* faint vermillion edge */
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(6px) saturate(118%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Seal image */
.truth-seal-mark{
  display:block;
  width: 40px;
  height:auto;
  margin: 2px auto 6px;
}

/* Vermillion “seal line” under the seal */
.truth-seal-rule{
  width: 64px;
  height: 2px;
  background: #a12300;                 /* vermillion */
  border-radius: 2px;
  margin: 6px auto 10px;
}

/* Text color: keep readable, not vermillion */
.truth-seal-text{
  margin: 0;
  line-height: 1.55;
  font-weight: 600;
  color: #2a1a10;                      /* deep ink */
}
/* Dark mode harmony */
@media (prefers-color-scheme: dark){
  .truth-seal{
    background: linear-gradient(
      135deg,
      #f6c542 0%,   /* saffron yellow */
      #e2952a 40%,  /* ochre orange */
      #d17927 75%,  /* deep robe orange */
      #c13f00 100%  /* vermillion accent */
    );
    border-color: rgba(255,255,255,0.18);
  }
  .truth-seal-text { 
    color: #fdf6e3;   /* soft parchment tone for readability */
  }
}


/* Vermillion text, Chamber 1 style */
.vermillion{
  color: #a12300;          /* vermillion */
  font-weight: 700;        /* give it a little authority */
  letter-spacing: .1px;    /* subtle crispness */
  text-shadow: 0 1px 0 rgba(255,255,255,.35); /* improves contrast on light robe */
}

/* If you prefer the same color in dark mode, keep this.
   If you want saffron in dark, switch to #f4c542 instead. */
@media (prefers-color-scheme: dark){
  .vermillion{
    color: #a12300;        /* keep vermillion on dark too */
    text-shadow: none;
  }
}

/* Desktop/laptop: always hide overlay */
@media (any-hover: hover) and (pointer: fine) {
  #audio-overlay { display: none !important; }
}

/* Phones/tablets: show overlay */
@media (hover: none) and (pointer: coarse) {
  #audio-overlay {
    display: flex !important;
    z-index: 10050;            /* keep above UI */
    pointer-events: auto;
  }
}

/* Overlay defaults: HIDDEN unless JS shows it on mobile */
#audio-overlay {
  /* your existing styles (position, colors, etc.) */
  display: none;              /* <-- important: hidden by default */
  pointer-events: auto;
  z-index: 10050;             /* above back-fab & magnifier */
}

/* Make #mute-button behave like .mute-toggle (no HTML changes needed) */
#mute-button{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10005;           /* keep above fab/overlays */
  transition: background 0.3s;
  pointer-events: auto;
}
#mute-button:hover{ background: rgba(255, 255, 255, 0.9); }

/* If you also had .mute-toggle styles, keep them; this ID block wins */

#mute-button { z-index: 10005; pointer-events: auto; }


/* ===== Room 1 — Journal unified theme block ===== */
/* Base tokens (keep or adjust to your palette) */
:root{
  --ink:#1f1a16;
  --ink-soft:#241e18;
  --paper:#fffaf3;
  --robe-ochre:#d8a24b;
  --robe-burnt:#b06c2d;
  --vermillion:#c41219;
  --ring:#e6d6b8;

  /* Indigo variant tokens */
  --indigo-ink:#1d2333;
  --indigo-soft:#202638;
  --indigo-line:#2e3a5c;
}

/* ——— Default: Warm Ochre Blend ——— */
#journal.journal-section{
  background: linear-gradient(
    180deg,
    rgba(216,162,75,.08) 0%,
    rgba(255,250,243,.65) 40%,
    rgba(255,255,255,0) 100%
  );
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  border-radius: 18px;
  padding: clamp(16px, 3.2vw, 40px);
}
#journal .journal-title{ color: var(--ink); position: relative; isolation: isolate; }
#journal .journal-title::before{ /* Monk Robe Glow */
  content:""; position:absolute; inset:-6px -10px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(216,162,75,.20), rgba(216,162,75,0) 70%);
  filter: blur(6px); z-index:-1; border-radius: 16px;
}
#journal .journal-preface{ color: var(--ink-soft); }

#journal .seal-line{
  height: 1.5px; border: 0;
  background: linear-gradient(90deg, rgba(196,18,25,.65), rgba(196,18,25,.35));
  margin: 8px 0 14px;
}

#journal .entry{
  background: rgba(255,250,243,.82);
  border: 1px solid rgba(230,214,184,.55);
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  border-radius: 14px;
  padding: 16px 14px;
}
#journal .entry-title{ color: var(--ink); }
#journal .entry-body p{ color: var(--ink-soft); }
#journal .entry-haiku{
  background: rgba(216,162,75,.12);
  border-left: 3px solid rgba(176,108,45,.60);
  border-radius: 8px;
  padding: 10px 12px; margin: 12px 0;
}
#journal .filter-btn{
  border: 1px solid rgba(216,162,75,.55);
  background: #fff; padding: 6px 10px; border-radius: 999px;
  font-size: .9rem; cursor: pointer;
}
#journal .filter-btn[aria-pressed="true"]{
  background: rgba(216,162,75,.85);
  border-color: rgba(176,108,45,.85);
  color: #fff;
}

/* ——— Optional: ultra-soft entries (remove borders) ——— */
/* Uncomment if you want even less structure */
/*
#journal .entry{
  border: none; box-shadow: none;
  background: rgba(255,250,243,.76);
}
*/

/* ——— Indigo Whisper variant ———
   Activate by adding class="theme-indigo" to <body> or a wrapper.
   Keeps vermillion accent; shifts neutrals toward indigo.
--------------------------------------------------------------- */
.theme-indigo #journal.journal-section{
  background: linear-gradient(
    180deg,
    rgba(22,32,56,.06) 0%,
    rgba(255,250,243,.70) 45%,
    rgba(255,255,255,0) 100%
  );
}
.theme-indigo #journal .journal-title{ color: var(--indigo-ink); }
.theme-indigo #journal .journal-title::before{
  background: radial-gradient(60% 60% at 50% 50%, rgba(46,58,92,.18), rgba(46,58,92,0) 70%);
}
.theme-indigo #journal .journal-preface{ color: var(--indigo-soft); }

.theme-indigo #journal .entry{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(46,58,92,.14);
}
.theme-indigo #journal .entry-title{ color: var(--indigo-ink); }
.theme-indigo #journal .entry-body p{ color: var(--indigo-soft); }
.theme-indigo #journal .entry-haiku{
  background: rgba(46,58,92,.08);
  border-left: 3px solid rgba(46,58,92,.5);
}

.theme-indigo #journal .filter-btn{
  border-color: rgba(46,58,92,.35);
}
.theme-indigo #journal .filter-btn[aria-pressed="true"]{
  background: rgba(46,58,92,.85);
  border-color: rgba(46,58,92,.85);
  color: #fff;
}
/* ——— End Indigo variant ——— */

/* ——— Utilities ——— */
#journal .permalink:focus{ outline: 2px dashed var(--robe-ochre); outline-offset: 2px; }
@media (max-width: 640px){
  #journal.journal-section{ padding: 14px; }
  #journal .entry{ padding: 12px; }
}

/* Match Journal H2 to Gallery H2 size */
#journal .journal-title{
  font-size: clamp(1.5rem, 2.0vw, 2rem) !important;
  line-height: 1.2;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Lighter cards & separator */
#journal .entry{
  box-shadow: 0 1px 6px rgba(0,0,0,.025);
  border-radius: 12px;
}
#journal .seal-line{
  height: 1px;
  background: linear-gradient(90deg, rgba(196,18,25,.35), rgba(196,18,25,.2));
}

/* Normalize all section H2s (Journal, Soulprint, etc.) */
#journal .journal-title,
#gallery-title,
#artist-title,           /* if you have one */
.section-title {         /* catch-all if you use this class elsewhere */
  font-size: clamp(1.5rem, 2.0vw, 2rem) !important;
  line-height: 1.2;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Keep entry titles clearly below H2 */
#journal .entry-title { font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 650; }

/* Normalize all Room 1 section headers (H2) */
.room-container h2{
  font-size: clamp(1.5rem, 2.0vw, 2rem) !important;
  line-height: 1.2;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Extra vertical space between Journal and Soulprint */
#journal.journal-section{
  margin-bottom: clamp(24px, 5vw, 72px);   /* add space below the Journal block */
}

/* Optional: add a little space above the Soulprint header too */
.soulprint-gallery{
  margin-top: clamp(12px, 2.5vw, 36px);
  scroll-margin-top: 96px;                 /* nicer anchor jump to Soulprint */
}

/* Softer Journal shadow so the edge doesn't look heavy near the next header */
#journal.journal-section{
  box-shadow: 0 3px 16px rgba(0,0,0,0.035);
}

/* Extra breathing room between subtitle and My Journal */
#journal.journal-section{
  margin-top: clamp(16px, 4vw, 56px);   /* push the Journal block down a bit */
  scroll-margin-top: 96px;              /* clean anchor jump to #journal */
}

/* Consistent outer frame (≈ 11:16) */
figure.soulprint-media{
  display:block;
  margin:0;
  width:100%;
  aspect-ratio: 11 / 16;     /* tuned to your scans; 3/4 also OK */
  border-radius:12px;
  overflow:hidden;
  /* subtle shadow */
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

/* Center the image perfectly inside the frame (“mat” box) */
figure.soulprint-media > .soulprint-media-inner{
  box-sizing: border-box;
  padding:12px;                  /* white mat */
  width:100%; height:100%;
  display:flex;
  align-items:center;            /* vertical center */
  justify-content:center;        /* horizontal center */
  background:#fff;
}

/* Full image, no cropping */
figure.soulprint-media > .soulprint-media-inner > img.soulprint-image{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  margin:0;                      /* ensure no stray margins */
}

figure.soulprint-media{ transition: transform .15s ease, box-shadow .15s ease; }
figure.soulprint-media:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }

/* === Soulprint frames: hover + fade-in friendly (paste at END of style.css) === */

/* Motion-safe transitions */
@media (prefers-reduced-motion: no-preference) {
  figure.soulprint-media{
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  }

  /* Hover + keyboard focus lift */
  figure.soulprint-media:hover,
  figure.soulprint-media:focus-visible,
  .soulprint-entry:hover figure.soulprint-media{
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
    filter: saturate(1.03);
    outline: none;
  }
}

/* --- Make fade-in compatible with hover --- */
/* Base fade-in state (adjust if your class names differ) */
.soulprint-gallery.fade-in-on-scroll figure.soulprint-media{
  opacity: 0;
  transform: translateY(16px);
}

/* HOTFIX: never hide Soulprint frames */
.soulprint-gallery figure.soulprint-media{
  opacity: 1 !important;
  transform: none !important;
}

/* Hover/focus lift (motion-safe) */
@media (prefers-reduced-motion: no-preference) {
  figure.soulprint-media{
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  }
  figure.soulprint-media:hover,
  figure.soulprint-media:focus-visible,
  .soulprint-entry:hover figure.soulprint-media{
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
    filter: saturate(1.03);
    outline: none;
  }
}

@keyframes sp-micro-pulse {
  0%   { transform: none; filter: none; }
  40%  { transform: scale(1.012); filter: saturate(1.03); }
  100% { transform: none; filter: none; }
}

/* runs once after reveal */
.js-enabled .soulprint-gallery figure.soulprint-media.revealed.pulse-once {
  animation: sp-micro-pulse .28s ease-out 1 both;
}

/* Optional: visual state for the speaker button */
.audio-toggle.is-on { filter: saturate(1.1); opacity: 1; }
.audio-toggle[aria-pressed="false"] { opacity: .8; }

/* Position the speaker button (optional) */
.audio-toggle{
  position: fixed; right: 16px; bottom: 16px;
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: #fff; border: 0; box-shadow: 0 8px 22px rgba(0,0,0,.25);
  cursor: pointer; z-index: 9999;
}
.audio-toggle.is-on { filter: saturate(1.1); opacity: 1; }
.audio-toggle[aria-pressed="false"] { opacity: .85; }

.room1-cta {
  max-width: 900px;
  margin: 2rem auto 1rem;
  text-align: center;
}
.room1-pricing { font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; }
.cta-buttons { display: inline-flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.btn { display:inline-block; padding:.6rem 1rem; border-radius:999px; text-decoration:none; font-weight:600; }
.btn-primary { background:#fff; color:#000; box-shadow:0 8px 22px rgba(0,0,0,.15); }
.btn-ghost { background:transparent; border:1px solid rgba(255,255,255,.6); color:#fff; }
.room1-signature { margin:.5rem 0 0; font-size:.95rem; opacity:.9; }


/* Add extra separation after gallery and before personal reflections */
.soulprint-gallery {
  margin-bottom: 4rem; /* adds ~64px vertical space */
}

.room1-cta {
  margin-top: 4rem;
  margin-bottom: 4rem; /* adds visual pause before Why I Paint */
}

/* --- Journal Signature Block (final) --- */
.journal-entry .sig3 img.sig3-seal{
  display:block;
  margin:10px auto;
  width:80px;      /* desktop */
  height:auto;
}

/* Mobile */
@media (max-width:640px){
  .journal-entry .sig3 img.sig3-seal{
    width:64px;    /* mobile */
  }
}

/* Safety: in case any global img rules fight this */
img.sig3-seal{ max-width:80px; height:auto; }


.btn.load-more{
  display:block;
  margin:16px auto;
  padding:10px 16px;
  border-radius:999px;
}

/* Journal page button — lighter gold to match the ochre gradient */
#journal .btn.load-more {
  background: linear-gradient(to bottom, #f2d9b0, #dfb277);
  color: #3a2400;
  box-shadow: 0 2px 6px rgba(58,36,0,0.12);
}
#journal .btn.load-more:hover {
  box-shadow: 0 3px 10px rgba(58,36,0,0.18);
}
#journal .btn.load-more:active {
  box-shadow: 0 1px 4px rgba(58,36,0,0.22);
}

/* Gallery button — slightly deeper gold for contrast on the orange */
#gallery + .btn.load-more,
#gallery-container .btn.load-more {
  background: linear-gradient(to bottom, #e9c284, #cf9a5d);
  color: #2c1a00;
  box-shadow: 0 2px 6px rgba(44,26,0,0.16);
}
#gallery + .btn.load-more:hover,
#gallery-container .btn.load-more:hover {
  box-shadow: 0 3px 10px rgba(44,26,0,0.22);
}
#gallery + .btn.load-more:active,
#gallery-container .btn.load-more:active {
  box-shadow: 0 1px 4px rgba(44,26,0,0.26);
}

.btn.load-more:focus-visible {
  outline: 2px solid #7a3f00;
  outline-offset: 3px;
}

#journal-load-more {
  margin-top: 1.6rem;
}

/* Soulprint Gallery text rhythm */
.haiku{
  text-align: center;
  line-height: 1.6;
  margin: .75rem 0 1rem;   /* space above/below the haiku */
  font-size: 1rem;         /* tune to taste */
  letter-spacing: .1px;
}

.reflection{
  text-align: center;
  line-height: 1.6;
  white-space: normal;     /* ensure long lines wrap */
  margin: .25rem 0 1rem;
}

/* Optional: card links row */
.sp-links{
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: .75rem;
}

/* --- Soulprint Gallery (new .sp-* cards) --- */
.sp-card{
  background:#fff;
  color:#111;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sp-title{ margin:0; font-weight:700; font-size:1rem; line-height:1.25; }

/* Consistent image frame */
.sp-image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;

  /* show full artwork (letterbox if needed) */
  aspect-ratio: 4 / 5;      /* change to 1 / 1 or 3 / 2 if your set is mostly square/wide */
  object-fit: contain;       /* was: cover */
  background: #f6f6f6;       /* neutral mat behind transparent/letterboxed areas */

  max-height: 560px;         /* safety cap; adjust or remove if you want taller */
}


.sp-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

/* Per-card ratio overrides (optional, future-ready) */
.sp-card[data-ratio="1:1"]  .sp-image { aspect-ratio: 1 / 1; }
.sp-card[data-ratio="3:2"]  .sp-image { aspect-ratio: 3 / 2; }  /* landscape */
.sp-card[data-ratio="16:9"] .sp-image { aspect-ratio: 16 / 9; } /* wide */
.sp-card[data-ratio="2:3"]  .sp-image { aspect-ratio: 2 / 3; }  /* tall */
.sp-card[data-ratio="5:7"]  .sp-image { aspect-ratio: 5 / 7; }
.sp-card[data-ratio="4:3"]  .sp-image { aspect-ratio: 4 / 3; }


/* Journal controls row */
#journal-controls{
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: .5rem 0 .5rem;
}
#journal-controls .btn.load-more{
  background: linear-gradient(to bottom, #f2d9b0, #dfb277);
  color: #3a2400;
  box-shadow: 0 2px 6px rgba(58,36,0,0.12);
}
#journal-controls .btn.load-more:disabled{
  opacity: .5;
  pointer-events: none;
}

/* ——— Warm controls: no gray ——— */
#journal-controls,
#gallery-controls{
  display: inline-flex;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: 999px;
  background: rgba(255, 236, 205, .22);              /* warm parchment haze */
  border: 1px solid rgba(176,108,45,.28);            /* robe ochre line */
  box-shadow: 0 4px 14px rgba(161,35,0,.10);         /* vermillion-tinted shadow */
  backdrop-filter: blur(4px) saturate(115%);
}

/* Buttons — gold, not gray */
#journal-controls .btn.load-more,
#gallery-controls .btn.load-more{
  background: linear-gradient(to bottom, #f2d9b0, #dfb277); /* warm gold */
  color: #3a2400;                                /* deep ink-brown */
  border: 1px solid rgba(176,108,45,.35);        /* ochre edge */
  box-shadow: 0 2px 8px rgba(161,35,0,.16);      /* warm glow */
}
#journal-controls .btn.load-more:hover,
#gallery-controls .btn.load-more:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(161,35,0,.25);
}
#journal-controls .btn.load-more:active,
#gallery-controls .btn.load-more:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(161,35,0,.22);
}

/* Focus ring — vermillion, not blue/gray */
#journal-controls .btn.load-more:focus-visible,
#gallery-controls .btn.load-more:focus-visible{
  outline: 3px solid #c41219;           /* vermillion */
  outline-offset: 2px;
}

/* Disabled state — softened gold (no gray fade) */
#journal-controls .btn.load-more:disabled,
#gallery-controls .btn.load-more:disabled{
  background: linear-gradient(to bottom, #ecd2a6, #d4a669);
  color: #6b3f0e;
  opacity: .9;                           /* keep color; no gray-out */
  box-shadow: none;
  cursor: default;
}

#gallery-controls #gallery-load-more { margin: 0; }
#gallery-controls { margin: 1rem auto 2rem; }

/* Journal controls capsule spacing + keep load-more flush inside */
#journal-controls { margin: 1rem auto 2rem; }
#journal-controls #journal-load-more { margin: 0; }
#journal-controls .btn.load-more { white-space: nowrap; } /* prevent wrapping */

/* Let the gallery area be wide enough for 3 cards on laptop */
.soulprint-gallery .room-container{
  max-width: 1100px;           /* allows 3 columns comfortably */
  margin-left: auto;
  margin-right: auto;
}

/* Soulprint Gallery grid: 1 / 2 / 3 columns; center partial rows */
#gallery{
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0,1fr);   /* 1 col on mobile */
  justify-content: center;                /* center leftover cards */
  align-content: start;
  justify-items: stretch;
}
@media (min-width: 720px){
  #gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* tablet: 2 cols */
}
@media (min-width: 1200px){
  #gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* laptop/desktop: 3 cols */
}

/* Magnifier — top-right, rotates when active */
.magnifier{
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 10001;
  transition: transform 180ms ease;
}
.magnifier.is-on{ transform: rotate(180deg); }

/* Zoom panel tucked under the magnifier */
.zoom-panel{
  position: fixed;
  top: 68px;            /* sits under the magnifier (44px + spacing) */
  right: 12px;
  width: 180px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  z-index: 10000;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: grid;
  gap: 8px;
}
.zoom-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.zoom-label{ text-align: center; font-weight: 600; min-width: 48px; }
.zoom-slider{
  width: 100%;
  accent-color: #c41219; /* vermillion */
}
.zoom-panel button{
  appearance: none;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
  cursor: pointer;
}
.zoom-panel button:hover{ background: rgba(255,255,255,.18); }
.zoom-panel .zoom-reset{ justify-self: center; padding: 6px 12px; }

@media (max-width: 480px){
  .zoom-panel{ width: 160px; right: 8px; top: 64px; }
}

/* Show panel only when zoom is active */
.zoom-panel{ display: none; }
body.zoom-on .zoom-panel{ display: grid; }

.zoom-panel button:focus-visible,
.zoom-panel .zoom-slider:focus-visible { outline: 2px solid #c41219; outline-offset: 2px; }

/* Hide Back to Chamber when printing */
@media print {
  .back-link { display: none !important; }
}

/* Make the QR tile hug the code instead of spanning the column */
#donation .qr-column{
  display:flex;                 /* keep caption under it nicely */
  flex-direction:column;
  align-items:center;       /* or center if you prefer */
}

#donation .qr-box{
  display:inline-block;         /* key: no full-width block */
  width:auto;                   /* prevent accidental 100% */
  background:#fff;
  border:1px solid #e9e0d6;
  border-radius:10px;
  padding:6px;
}

#donation .qr-box img{
  width:112px; height:112px; display:block;
}

#donation .qr-caption{
  margin-top:.35rem; text-align:left; opacity:.68; font-size:.82rem;
}

/* (optional) tighten the left column so the tile feels snug */
#donation .donation-card{
  grid-template-columns: 200px 1fr;   /* try 180–200px */
}