html, body {
  margin: 0;
}

body {
color:#2b1d0e; 
background:#fffdcc;
font-family:Georgia,Times,"Times New Roman",serif;
min-height:100vh;
line-height:1.6;
font-size: clamp(1.05rem, 1rem + 0.35vw, 1.5rem);
/* Improves text rendering smoothness across different browser engines */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content {
  width: min(90%, 70ch);
  margin-inline: auto;
}

/* Banner */

img {
  display:block;
  max-width:100%;
  height:auto;
}



/* Banner container with gradient */
 .banner-container {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: clamp(8px, 2vw, 20px);
  border-radius: clamp(10px, 2vw, 20px);
  background: radial-gradient(circle, 
    rgba(0, 225, 255, 0.8) 0%,
    rgba(255, 253, 204, 0.6) 70%,
    rgba(255, 253, 204, 0.7) 100%
  );
}

.banner-container img {
  width:100%;
}

/* Animation */

/* Fade-in animation */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Banner fade-in */
.banner-fade {
    animation: fadeIn 2.5s ease-in-out forwards;
}





h1 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color:#ff0;
  text-shadow:2px 2px 8px red;
  font-family:"Lucida Calligraphy",cursive;
  line-height:1.2;
}

h2 {
  font-style:italic;
  text-align:center;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height:1.25;
  padding:5px;
  text-shadow:2px 2px 8px #ff0;
}

h3 {
 font-style:italic;
 text-align:center;
 font-size: clamp(1.15rem, 2vw, 1.5rem);
 line-height: 1.3; 
 padding:5px;
 text-shadow:2px 2px 8px #ff0;
}

.spn-title {
  color:#00E1FF;
}

body {
  color: #2b1d0e; 
  background: #fffdcc;
  font-family: Georgia, Times, "Times New Roman", serif;
  min-height: 100vh; /* Changed 100% to 100vh to map correctly to viewport height */
  line-height: 1.6;  /* Dropped 'em' unit - unitless line-height is safer for scaling font sizes */
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.5rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {  
  margin-block: 1.2rem;
  text-align: left;
}

/* Montage Wrapper */
.montage {
  line-height: 1.15;
  margin-block: 1.5rem 2.75rem; /* Generous spacing top, massive spacing bottom before normal text returns */
  
  margin-inline: auto;
}

/* Targets blocks of memories */
.montage .flash {
  color: rgba(43, 29, 14, 0.85); /* Uses your exact body color but drops it to 85% opacity */
  margin-block-end: 1.5rem; /* Automatically forces clean, extra space between each memory chunk */
}

/* Targets every paragraph inside a memory block */
.montage .flash p {
  margin-block: 0.2rem;
  font-size: 0.85em;
  text-indent: 2em; /* Subtle layout shift for continuation lines */
}

/* Automatically style the very first paragraph of ANY memory block */
.montage .flash p:first-child {
  text-indent: 3em; /* Deep indent for the start of a fresh memory fragment */
}

/* The striking final line of the flashback */
.montage .montage-final {
  text-align: center;
  text-indent: 0;
  font-size: 0.85em;
  margin-top: 1.1em;
  margin-bottom: 2.5em;

}


.poem {
  text-align: center;
  /* 2rem top, auto sides, 4rem bottom (adds extra room after the poem) */
  margin: 2rem auto 4rem auto; 
}


.poem-lines {
  display: inline-block;
  text-align: left;
  font-style: italic;
  line-height: 1.4;
}

/* Adds consistent spacing between all stanzas */
.poem-lines p {
  margin-block: 0 2rem; /* Replaces your blank lines with clean CSS space */
}

.poem-lines .poem-title {
  text-align: center;
  font-weight: bold;
  margin-block: 0 6rem;
}


.before-poem {
  margin-block-end: 8rem;
}

/* Modifiers to scale back the layout for quieter, embedded poems */
.poem.poem--embedded {
  margin-block-start: 2rem;  /* Cut the top margin in half */
  margin-block-end: 2rem;    /* Cut the bottom margin in half */
}

.poem--embedded .poem-lines {
  line-height: 1.3;          /* Tighten the vertical space between lines */
}

.poem--embedded .poem-lines p {
  margin-block-end: 0.5rem;  /* Tiny gap if you add multiple stanzas later */
}




/* Container to handle the outer spacing and lock the interior lines */
.montage-container {
  margin-block: 2rem; /* Creates a clean, uniform gap before and after the montage */
}

/* Handles the individual, rapid-fire memory lines */
.montage-memory {
  font-size: 0.93rem;
  line-height: 1.0; /* Slightly adjusted up from 0.98 to keep descenders like 'g' or 'y' from smashing into letters below */
  margin-block: 0.35rem; /* Explicitly forces a tiny, uniform micro-gap between lines */
 font-weight: 500;
  /* Adds a microscopic blur to make the text appear slightly bolder */
  text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.25); 
  /* CRITICAL: Replaces the manual   with clean, accessible space */
  text-indent: 2rem; 
}

.saved {
  font-weight: bold;
  font-size: .93em;
  font-style: italic;
}

.dream-jump {
  margin-block: 4rem;
}

.dream-jump-large {
  margin-block: 6rem;
}


.chapter-nav {
  display: flex;
  flex-wrap: wrap; /* Allows links to drop to a new line as whole units */
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1rem; /* Replaces old margins with perfect vertical/horizontal spacing */
  font-size: clamp(0.75rem, 3.5vw, 0.9rem); /* Smoothly shrinks text on tiny screens */
  margin: 1.5rem auto 2rem;
}

.chapter-nav a {
  white-space: nowrap; /* CRITICAL: Prevents words/arrows inside a link from splitting */
  /* Remove individual side margins since 'gap' on the parent container handles it now */
}

.chapter-nav a:link,
.chapter-nav a:visited {
  color: #00E1FF;
  text-shadow: 2px 2px 8px #ff0;
}

.chapter-nav a:hover {
  color: #92c2df;
}

.bottomnav {
   width: min(90%, 70ch);
   margin: 4rem auto; 
   padding: 0;
}

.bottomnav a {
  text-decoration: none;
  display: inline-block;
  padding: 4px 8px;
}

.bottomnav a:hover {
  background-color: #00008B;
 }

.previous,
.next {   
   background-color: #00E1FF;
   box-shadow:2px 2px 1px #ff0;
  color: #ff0;
}

.round {
  border-radius: 50%;
}

.arrow {
  border: solid #ff0;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

ul.spn-nav {
  width: min(90%, 70ch);
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  text-shadow: 2px 2px #ff0;
  overflow: auto;
}

ul.spn-nav li {
  float: left;
}

ul.spn-nav li a {
  display: block;
  text-align: center;
  font-size: 1.2em;
  padding: 14px 16px;
}

ul.spn-nav li a:link,
ul.spn-nav li a:visited {
  color: #00E1FF;
}

ul.spn-nav li a.active {
  color: #300107;
}

ul.spn-nav li a:hover {
  color: red;
}

ul.spn-nav li:first-child {
  text-shadow: 1px 1px #ff0;
}

ul.spn-nav li:not(:first-child) {
display: none;
}

ul.spn-nav li.icon {
  float: right;
  display: inline-block;
  color: #00E1FF;

}

ul.spn-nav.responsive {
  position: relative;
}

ul.spn-nav.responsive li.icon {
  position: absolute;
  right: 0;
  bottom: 0;
}

ul.spn-nav.responsive li {
  float: none;
  display: block;
}
  
ul.spn-nav.responsive li a {
  font-size: .9em;
  text-decoration: underline;
  text-shadow: 1px 1px #ff0;
  display: block;
  text-align: center;
}

ul.spn-nav li.icon::after {
  content: "Chapters";
  display: block;
  font-style: normal;
  text-shadow: 2px 2px 8px #ff0;
  font-size: .9em;
  text-align: center;
  margin-top: -10px;
}

ul.spn-nav li.icon::after {
  color:  #00E1FF;
}

.spn-hamburg {
  width: 20px;
  height: 3px;
  box-shadow: 2px 2px 1px #ff0;
  margin: 4px auto;
  background-color:  #00E1FF;
}

@media (max-width: 480px) {
  .poem-lines p {
    /* Minimum: 0.8rem, Fluid: 4% of screen width, Maximum: 1rem */
    font-size: clamp(0.8rem, 4vw, 1rem); 
    line-height: 1.5;   
  }
}