/* Journey layout, section seams, study rooms, vines, fireflies, darkness, lamp, paper sheets. */

/* ---------- journey ---------- */
#journey { display: none; position: relative; z-index: 2; padding-bottom: 4rem; }
#journey.on { display: block; }
/* Hide until scroll destination is set — prevents flash of journey start */
#journey.prejump {
  visibility: hidden;
  pointer-events: none;
}

.beat {
  max-width: 40rem; margin: 0 auto; padding: 3.5rem 1.25rem;
  position: relative;
}
/* Seams: every full-bleed section dissolves into var(--seam) at top and bottom,
   so a room, a level and a corridor all meet on the same colour. */
.beat.poem::before,
.beat.poem::after {
  content: "";
  display: block;
  position: absolute; left: 0; right: 0; z-index: 12;
  height: 14vh;
  pointer-events: none;
}
.beat.poem::before { top: 0; background: linear-gradient(to bottom, var(--seam), rgba(28,25,20,0)); }
.beat.poem::after { bottom: 0; background: linear-gradient(to top, var(--seam), rgba(28,25,20,0)); }
/* Poem rooms — full-bleed wall that keeps the stage faintly underneath */
.beat.poem {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
}
body.mood-poem #stage {
  opacity: 0.28;
  visibility: visible;
  filter: saturate(0.85) brightness(0.7);
  transition: opacity 1.6s ease, filter 2s ease, visibility 1.6s;
}
body.mood-poem.growth-sun #stage {
  opacity: 0.42;
  filter: saturate(1.05) brightness(0.95);
}

/* Desk study room — aged plaster that slowly brightens as growth takes over */
.study-room {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  background:
    radial-gradient(ellipse 42% 32% at 16% 18%, rgba(110, 86, 48, 0.16), transparent 62%),
    radial-gradient(ellipse 36% 28% at 84% 16%, rgba(50, 46, 38, 0.24), transparent 55%),
    radial-gradient(ellipse 55% 42% at 70% 80%, rgba(120,90,40,0.07), transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0,0,0,0.58), transparent 55%),
    repeating-linear-gradient(88deg, rgba(255,245,220,0.02) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(30,24,16,0.07) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #5e584e 0%, #4a453c 28%, #3b362f 58%, #2a261f 100%);
  color: #1a1610;
  box-shadow:
    inset 0 0 160px rgba(0,0,0,0.5),
    inset 0 -50px 90px rgba(0,0,0,0.4);
  transition: box-shadow 3.2s ease;
}
.study-room::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.62;
  background:
    radial-gradient(ellipse 22% 18% at 24% 30%, rgba(70,60,40,0.24), transparent 70%),
    radial-gradient(ellipse 18% 14% at 76% 48%, rgba(50,45,35,0.22), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(0,0,0,0.035) 46px 47px),
    repeating-linear-gradient(18deg, transparent 0 73px, rgba(255,230,190,0.02) 73px 74px);
  transition: opacity 2.8s ease;
}
.study-room::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background:
    radial-gradient(ellipse 80% 70% at 50% 38%, transparent 40%, rgba(0,0,0,0.52) 100%);
  transition: background 3s ease, opacity 3s ease;
}
body.growth-vines .study-room {
  background:
    radial-gradient(ellipse 42% 32% at 16% 18%, rgba(90, 110, 50, 0.12), transparent 62%),
    radial-gradient(ellipse 36% 28% at 84% 16%, rgba(70, 80, 40, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 42% at 70% 80%, rgba(100, 90, 40, 0.08), transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0,0,0,0.4), transparent 55%),
    repeating-linear-gradient(88deg, rgba(255,245,220,0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #686258 0%, #524c40 32%, #423c32 62%, #322c24 100%);
}
/* sunlit walls are painted lighter rather than filtered — a filter on the whole
   room re-rasterises every animated child each frame */
body.growth-sun .study-room {
  background:
    radial-gradient(ellipse 60% 46% at 72% 10%, rgba(255, 228, 160, 0.22), transparent 60%),
    radial-gradient(ellipse 42% 32% at 16% 18%, rgba(120, 150, 60, 0.14), transparent 62%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0,0,0,0.26), transparent 55%),
    repeating-linear-gradient(88deg, rgba(255,245,220,0.03) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #8f876f 0%, #746a55 32%, #5d5444 62%, #463d30 100%);
  box-shadow:
    inset 0 0 140px rgba(255, 220, 140, 0.16),
    inset 0 -40px 80px rgba(80, 110, 40, 0.1);
}
body.growth-sun .study-room::after {
  background:
    radial-gradient(ellipse 90% 70% at 72% 8%, rgba(255, 226, 150, 0.38), transparent 46%),
    radial-gradient(ellipse 80% 70% at 50% 38%, transparent 55%, rgba(40, 36, 18, 0.12) 100%);
}
body.growth-sun .poem-paper[data-pos="0"] {
  filter: brightness(1.08) saturate(1.05);
}
.study-wall {
  position: relative;
  flex: 1 1 auto;
  min-height: 44vh;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.25rem, 5vw, 3.5rem) 0.5rem;
}
.beat.poem .local-notes {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible;
}
.beat.poem .local-notes .note {
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  opacity: 0.92;
  z-index: 2;
  width: 92px; height: 92px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.28), transparent 38%),
    linear-gradient(180deg, #d4c478, #b8a050);
  box-shadow:
    1px 2px 0 rgba(255,255,255,0.22) inset,
    3px 6px 12px rgba(0,0,0,0.5);
  filter: saturate(0.9) brightness(0.95);
  transition: transform 0.25s ease, opacity 0.35s ease, filter 0.35s ease;
  touch-action: manipulation;
  transform: rotate(var(--r, -4deg));
  border-radius: 1px 1px 2px 1px;
  position: absolute;
  color: inherit;
  font: inherit;
  text-align: left;
}
.beat.poem .local-notes .note:hover {
  transform: rotate(var(--r, -4deg)) scale(1.06);
  filter: saturate(1) brightness(1.05);
}
/* read notes stay pinned (so they can be reread), just faded with a tick */
.beat.poem .local-notes .note.got { opacity: 0.6; filter: saturate(0.5) brightness(0.85); }
.beat.poem .local-notes .note.got::after {
  content: "✓"; position: absolute; right: 6px; bottom: 4px;
  font: 700 13px var(--mono); color: rgba(60,80,40,0.85);
}
/* stops: no desk, just a tall wall of bigger notes */
.beat.poem.stop .study-wall { min-height: 100vh; }
.beat.poem.stop .room-dark { opacity: 0.3 !important; }
.beat.poem.stop .local-notes .note { width: 128px; height: 128px; }
.beat.poem.stop .local-notes .note.ruled { width: 140px; height: 156px; }
.beat.poem.stop .local-notes .note .scribble { font-size: 10.5px; }

/* reading a wall note */
#note-reader {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: rgba(10, 8, 6, 0.55);
  opacity: 0; transition: opacity 0.25s ease;
  cursor: pointer;
}
#note-reader[hidden] { display: none; }
#note-reader.show { opacity: 1; }
#note-reader .nr-card {
  position: relative;
  width: min(30rem, calc(100vw - 3rem));
  padding: 2.2rem 2rem 2.4rem;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.3), transparent 38%),
    linear-gradient(180deg, #e2d28c, #c8b062);
  box-shadow: 0 24px 50px rgba(0,0,0,0.6), 1px 2px 0 rgba(255,255,255,0.25) inset;
  transform: rotate(-1.4deg) scale(0.96);
  transition: transform 0.25s ease;
  color: #2a2216;
}
#note-reader.show .nr-card { transform: rotate(-1.4deg) scale(1); }
#note-reader .nr-card::before {
  content: ""; position: absolute; left: 34%; top: -12px; width: 32%; height: 24px;
  background: rgba(220, 205, 160, 0.7); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transform: rotate(-2deg);
}
#note-reader .nr-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.8;
}
#note-reader .nr-count {
  position: absolute; right: 1rem; bottom: 0.7rem;
  font: 0.56rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(42,34,22,0.55);
}

/* map / door jumps: snap the environment instead of animating everything in between */
body.jumping *, body.jumping *::before, body.jumping *::after { transition: none !important; }
.beat.poem .local-notes .note.ruled {
  width: 108px; height: 128px;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(60,70,90,0.22) 14px 15px),
    linear-gradient(165deg, #e8e0cc, #cfc4ae);
}
.beat.poem .local-notes .note.tape::before {
  left: 22%; top: -8px; width: 56%; height: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 40%),
    rgba(200, 185, 140, 0.55);
  border: 1px solid rgba(120,100,60,0.3);
  box-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.beat.poem .local-notes .note .scribble {
  color: rgba(40,35,28,0.62);
  font-size: 9.5px;
  inset: 12px 10px;
  word-break: normal;
}
/* ----- living vines: one SVG network per room, grows across the journey ----- */
.room-vines {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; overflow: visible;
}
.room-vines svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
}
.room-vines path {
  fill: none;
  stroke: #2f5a2a;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--off, 200);
  opacity: 0;
  transition: stroke-dashoffset 6.4s cubic-bezier(0.25, 0.75, 0.3, 1), opacity 0.8s ease;
}
.room-vines path.grown { opacity: 1; }
.room-vines path.under { stroke: #1f3d1c; }
.room-vines path.under.grown { opacity: 0.85; }
.vine-leaf {
  position: absolute;
  width: var(--lw, 15px); height: var(--lh, 10px);
  margin: calc(var(--lh, 10px) / -2) 0 0 calc(var(--lw, 15px) / -2);
  background:
    radial-gradient(ellipse at 24% 46%, #6a9e46 0%, #43772f 48%, #26491d 100%);
  border-radius: 82% 12% 82% 12%;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.35);
  transform: rotate(var(--lr, 0deg)) scale(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 1.1s ease;
}
.vine-leaf::after {
  content: "";
  position: absolute; left: 12%; top: 48%;
  width: 72%; height: 1px;
  background: rgba(190,225,150,0.35);
  transform: rotate(-6deg);
}
.vine-leaf.out { opacity: 0.95; transform: rotate(var(--lr, 0deg)) scale(1); }
.vine-leaf.pale { filter: brightness(1.12) saturate(0.95); }
.vine-bud {
  position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #f2ead0, #c9b06a 60%, #7d6a33);
  opacity: 0; transform: scale(0);
  transition: transform 1.2s ease, opacity 1s ease;
}
.vine-bud.out { opacity: 0.9; transform: scale(1); }

/* ----- fireflies take over as light once the lamp is swallowed ----- */
.room-fireflies {
  position: absolute; inset: 0; z-index: 9;
  pointer-events: none; opacity: 0;
  transition: opacity 2.6s ease;
}
body.fireflies-on .room-fireflies { opacity: 1; }
/* looping animations sleep unless their section is near the screen */
body:not(.fireflies-on) .firefly,
#journey > .beat:not(.live) .firefly,
#journey > .beat:not(.live) .world-window .rain span { animation-play-state: paused; }
.firefly {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #f6ffbe;
  box-shadow: 0 0 10px 3px rgba(222,255,150,0.55), 0 0 26px 10px rgba(170,220,90,0.18);
  animation:
    ff-drift var(--fd, 9s) ease-in-out infinite alternate,
    ff-blink var(--fb, 3.4s) ease-in-out infinite;
  animation-delay: var(--fdelay, 0s), var(--fdelay, 0s);
}
@keyframes ff-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--fx, 40px), var(--fy, -30px)); }
}
@keyframes ff-blink {
  0%, 100% { opacity: 0.12; }
  42% { opacity: 1; }
  58% { opacity: 0.75; }
}

/* ----- room darkness: driven by the desk lamp ----- */
.room-dark {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 58% at 62% 86%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.42) 62%, rgba(0,0,0,0.7) 100%);
  opacity: 0.55;
  transition: opacity 1.1s ease, background 1.4s ease;
}
body.lamp-off .room-dark {
  opacity: 1;
  background:
    radial-gradient(ellipse 58% 44% at 56% 88%, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.82) 58%, rgba(0,0,0,0.93) 100%);
}
body.fireflies-on .room-dark {
  opacity: 1;
  background:
    radial-gradient(ellipse 66% 52% at 52% 80%, rgba(24,38,16,0.3) 0%, rgba(0,0,0,0.74) 58%, rgba(0,0,0,0.9) 100%);
}
body.growth-sun .room-dark,
body.growth-sun.fireflies-on .room-dark,
body.growth-sun.lamp-off .room-dark {
  opacity: 0.28;
  background:
    radial-gradient(ellipse 70% 50% at 74% 6%, rgba(255, 226, 140, 0.28), transparent 46%),
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 50%, rgba(40, 48, 20, 0.22) 100%);
}

.windows-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin: clamp(0.5rem, 2vh, 1.25rem) auto 0;
  max-width: 42rem;
  padding-top: 0.35rem;
}

.study-desk {
  position: relative;
  z-index: auto; /* no stacking context: the paper column can sit above the room vines */
  margin-top: auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 10vh;
  background:
    linear-gradient(180deg, rgba(140,110,70,0.1), transparent 22%),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.14) 0 1px,
      transparent 1px 11px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,200,140,0.03) 0 2px,
      transparent 2px 8px
    ),
    linear-gradient(180deg, #4a301c 0%, #3a2514 32%, #2a1a10 68%, #1c120a 100%);
  box-shadow:
    0 -14px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(180,150,100,0.1),
    inset 0 -22px 28px rgba(0,0,0,0.45);
  border-top: 3px solid #5a3c24;
}
.study-desk::before {
  content: "";
  display: block;
  height: 12px;
  margin: 0 -0.75rem;
  background:
    linear-gradient(180deg, #5e3e26, #2e1c10);
  box-shadow: 0 6px 14px rgba(0,0,0,0.55);
}
.desk-surface {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 1.6rem 0.85rem 1.85rem;
  background:
    radial-gradient(ellipse 55% 50% at 78% 18%, rgba(200,160,80,0.1), transparent 55%),
    radial-gradient(ellipse 40% 30% at 20% 70%, rgba(0,0,0,0.18), transparent 60%),
    radial-gradient(ellipse 70% 40% at 40% 0%, rgba(100,70,40,0.1), transparent 60%),
    repeating-linear-gradient(
      88deg,
      rgba(255,200,140,0.03) 0 2px,
      transparent 2px 14px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(20,10,4,0.16) 0 1px,
      transparent 1px 7px
    ),
    linear-gradient(180deg, #3e2a18, #2c1c10);
}
/* ----- desk lamp: brass architect lamp, base on the desk, head hanging over the sheet ----- */
/* The lamp box runs from above the paper's top edge down to the desk; the head
   is pinned to the top (so the shade always hangs just over the sheet), the base
   to the bottom, and the post stretches between them. */
.desk-lamp {
  position: absolute;
  right: var(--lamp-right, -150px); top: -185px; bottom: -6px;
  width: 480px;
  margin: 0; padding: 0; border: 0;
  background: none;
  z-index: 30;
  pointer-events: none;
  touch-action: manipulation;
}
.desk-lamp svg { position: absolute; overflow: visible; }
.desk-lamp .lamp-head {
  left: 0; top: 0; width: 480px; height: 240px;
  transform-origin: 420px 200px; /* the elbow, so it stays on the post */
  transform: scale(var(--lamp-scale, 1));
}
.desk-lamp .lamp-base {
  left: 340px; bottom: 0; width: 160px; height: 44px;
  transform-origin: 50% 100%;
  transform: scale(var(--lamp-scale, 1));
}
.desk-lamp .lamp-post {
  position: absolute; left: 413px; top: 200px; bottom: 30px; width: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #3a2912, #a98446 32%, #f2d99c 52%, #8a6632 78%, #271a0b);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,0.5));
  transition: filter 0.8s ease;
}
.desk-lamp .lamp-post::after {
  content: ""; position: absolute; left: 18px; top: 12%; bottom: 12%;
  border-left: 4px dashed #c9a868; opacity: 0.85;
}
body.lamp-off .desk-lamp .lamp-post { filter: brightness(0.62); }
.desk-lamp .lamp-body {
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.55));
  transition: filter 0.8s ease;
}
.desk-lamp .lamp-hit { pointer-events: visiblePainted; cursor: pointer; }
.desk-lamp:focus-visible { outline: none; }
.desk-lamp:focus-visible .lamp-body { filter: drop-shadow(0 0 6px rgba(255,220,150,0.85)); }
.desk-lamp .lamp-bulb,
.desk-lamp .lamp-mouth { opacity: 0.18; transition: opacity 0.5s ease; }
body.lamp-off .desk-lamp .lamp-body { filter: brightness(0.62) drop-shadow(0 12px 16px rgba(0,0,0,0.55)); }

/* the light itself: a cone from the shade plus a warm pool, screened onto the paper */
/* spans the whole paper plus the lamp box, so the cone can fall across the sheet;
   the shade's mouth sits 340px in from the right edge, 180px down */
.lamp-light {
  position: absolute;
  left: 0; right: var(--lamp-right, -150px); top: -185px; bottom: 0;
  z-index: 29;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.lamp-cone {
  position: absolute; inset: 0;
  clip-path: polygon(calc(100% - 410px) 168px, calc(100% - 272px) 200px, calc(100% - 150px) 100%, 0 100%);
  background:
    radial-gradient(ellipse 70% 90% at calc(100% - 340px) 180px, rgba(255,232,176,0.4), rgba(255,212,142,0.16) 48%, rgba(255,200,120,0) 88%);
}
.lamp-pool {
  position: absolute;
  left: 6%; right: 190px; top: 175px; bottom: 6%;
  background: radial-gradient(ellipse closest-side at 62% 35%, rgba(255,216,150,0.3), rgba(255,200,130,0.08) 60%, transparent 100%);
}
body:not(.lamp-off) .lamp-light,
body:not(.lamp-off) .desk-lamp .lamp-bulb,
body:not(.lamp-off) .desk-lamp .lamp-mouth { opacity: 1; }

/* rain makes the filament stutter */
.study-room.raining .lamp-light,
.study-room.raining .desk-lamp .lamp-bulb {
  animation: lamp-flicker 5.5s steps(1, end) infinite;
}
body.lamp-off .study-room.raining .lamp-light,
body.lamp-off .study-room.raining .desk-lamp .lamp-bulb { animation: none; }
@keyframes lamp-flicker {
  0%, 46%, 52%, 61%, 69%, 100% { opacity: 1; }
  47%, 50% { opacity: 0.22; }
  62%, 64% { opacity: 0.35; }
  70%, 71% { opacity: 0.1; }
}

/* vines finally swallow the lamp: they climb the base and lower arm */
.lamp-vines {
  position: absolute;
  left: 78%; width: 20%; bottom: 0; height: 64%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.lamp-vines i {
  position: absolute;
  width: 7px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #3f7a37, #2a5626 60%, #1b3a18);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 2.6s cubic-bezier(0.22, 0.85, 0.3, 1);
  box-shadow: 0 0 0 1px rgba(16,32,12,0.4);
}
.lamp-vines i::before, .lamp-vines i::after {
  content: "";
  position: absolute; width: 16px; height: 11px;
  background: radial-gradient(ellipse at 26% 46%, #63974a, #2d5522 70%);
  border-radius: 82% 12% 82% 12%;
}
.lamp-vines i::before { left: -13px; top: 22%; transform: rotate(-32deg); }
.lamp-vines i::after { right: -13px; top: 58%; transform: rotate(36deg) scaleX(-1); }
.lamp-vines i:nth-child(1) { left: 22%; bottom: 4px; height: 58%; }
.lamp-vines i:nth-child(2) { left: 46%; bottom: 8px; height: 96%; transition-delay: 0.4s; }
.lamp-vines i:nth-child(3) { left: 70%; bottom: 4px; height: 52%; transition-delay: 0.8s; }
.lamp-vines i:nth-child(4) { left: 54%; bottom: 46%; height: 50%; width: 6px; transition-delay: 1.2s; }
.desk-lamp.overtaken .lamp-vines { opacity: 1; }
.desk-lamp.overtaken .lamp-vines i { transform: scaleY(1); }
.desk-lamp.overtaken .lamp-hit { cursor: not-allowed; }
.desk-lamp.overtaken .lamp-body { filter: brightness(0.74) saturate(0.8) drop-shadow(0 12px 16px rgba(0,0,0,0.55)); }
/* ----- stacked sheets on the desk (one room holds several papers) ----- */
.paper-col {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 40rem;
  z-index: 6; /* above .room-vines (5), below .room-dark (7) */
  margin-right: 190px;
}
.paper-stack {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 8rem;
  perspective: 1400px;
}
.poem-paper {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  padding: clamp(1.4rem, 3.2vw, 2.15rem) clamp(1.3rem, 3vw, 2.2rem) clamp(1.7rem, 3.5vw, 2.5rem);
  background:
    radial-gradient(ellipse 30% 20% at 12% 8%, rgba(140,110,60,0.12), transparent 70%),
    radial-gradient(ellipse 40% 25% at 88% 92%, rgba(90,70,40,0.14), transparent 70%),
    linear-gradient(115deg, transparent 0 78%, rgba(80,60,30,0.08) 92%, transparent 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0 28px,
      rgba(90,70,40,0.04) 28px 29px
    ),
    linear-gradient(180deg, #e2d2a8 0%, #d4c090 48%, #c8b078 100%);
  color: #2a2216;
  box-shadow:
    0 1px 0 rgba(255,245,210,0.28) inset,
    0 18px 36px rgba(0,0,0,0.5),
    3px 8px 16px rgba(0,0,0,0.35),
    0 0 0 1px rgba(70,55,30,0.35);
  border: 1px solid rgba(90,70,40,0.4);
  transform-origin: 50% 100%;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.85, 0.28, 1),
    filter 0.55s ease,
    opacity 0.45s ease;
  cursor: pointer;
}
.poem-paper[data-pos="0"] {
  z-index: 20;
  transform: translate(0, 0) rotate(-0.4deg);
  cursor: default;
}
.poem-paper[data-pos="1"] {
  z-index: 19;
  transform: translate(16px, 13px) rotate(1.9deg) scale(0.985);
  filter: brightness(0.8) saturate(0.9);
}
.poem-paper[data-pos="2"] {
  z-index: 18;
  transform: translate(31px, 25px) rotate(-2.4deg) scale(0.97);
  filter: brightness(0.66) saturate(0.85);
}
.poem-paper[data-pos="3"] {
  z-index: 17;
  transform: translate(45px, 36px) rotate(3deg) scale(0.955);
  filter: brightness(0.56) saturate(0.8);
}
.poem-paper[data-pos="hidden"] {
  z-index: 16;
  transform: translate(52px, 44px) rotate(3.4deg) scale(0.95);
  filter: brightness(0.5);
  opacity: 0;
  pointer-events: none;
}
.poem-paper:not([data-pos="0"]):hover {
  filter: brightness(0.92) saturate(1);
}
.sheet-no {
  position: absolute; right: 0.9rem; top: 0.55rem;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(70,55,30,0.55);
}
.sheet-tabs {
  position: relative;
  z-index: 24;
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; flex-wrap: wrap;
  margin: 0.85rem auto 0;
  padding-top: 0.2rem;
}
.sheet-tabs button {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.34rem 0.6rem;
  color: rgba(236,226,200,0.6);
  border: 1px solid rgba(236,226,200,0.2);
  background: rgba(18,13,8,0.5);
  touch-action: manipulation;
}
.sheet-tabs button:hover:not(:disabled) { color: #f1e6cd; border-color: rgba(236,226,200,0.5); }
.sheet-tabs button:disabled { opacity: 0.3; cursor: default; }
.sheet-tabs .sheet-dot.on {
  color: #1d1710;
  background: linear-gradient(180deg, #ddc98f, #bda767);
  border-color: rgba(60,45,20,0.6);
}
.sheet-tabs .sheet-dot.read::after { content: " ·"; }
.sheet-count {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(236,226,200,0.42);
  padding: 0 0.3rem;
}
.poem-paper::before {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 36px; height: 36px;
  background: linear-gradient(225deg, transparent 45%, rgba(0,0,0,0.14) 70%, rgba(255,240,200,0.1) 100%);
  border-radius: 0 0 2px 0;
  pointer-events: none;
}
.poem-paper::after {
  content: "";
  position: absolute; inset: 11px;
  border: 1px solid rgba(90,70,40,0.18);
  pointer-events: none;
  box-shadow: inset 0 0 30px rgba(120,90,40,0.06);
}
.stanza-gap {
  height: 0;
  margin: 1.1rem 0 1.25rem;
  border-bottom: 1px solid rgba(90,70,40,0.18);
  position: relative;
}
.stanza-gap::after {
  content: "";
  position: absolute; left: 50%; top: -2px;
  width: 5px; height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(90,70,40,0.16);
}
.beat.poem .line {
  position: relative; z-index: 1;
  font-style: italic;
  font-size: clamp(1.02rem, 2.2vw, 1.28rem);
  line-height: 1.85;
  margin-bottom: 1.15rem;
  color: #2c2418;
  text-shadow: none;
  padding: 0;
  background: none;
}
.beat.poem .line:last-child { margin-bottom: 0; }
/* Lines are always readable; a freshly turned sheet just inks in from faint. */
.poem-paper.ink-in .line {
  animation: ink-in 0.8s ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes ink-in {
  from { opacity: 0.22; transform: translateY(5px); filter: blur(0.5px); }
  to { opacity: 1; transform: none; filter: none; }
}
body.lamp-off .poem-paper { filter: brightness(0.42) saturate(0.65) contrast(0.95); }
body.lamp-off .poem-paper[data-pos="0"] { filter: brightness(0.5) saturate(0.7); }
body.fireflies-on .poem-paper[data-pos="0"] {
  filter: brightness(0.86) saturate(0.82) hue-rotate(-6deg);
}
body.growth-sun .poem-paper[data-pos="0"],
body.growth-sun.lamp-off .poem-paper[data-pos="0"],
body.growth-sun.fireflies-on .poem-paper[data-pos="0"] {
  filter: brightness(1.1) saturate(1.06);
}

@media (max-width: 1000px) {
  .paper-col { --lamp-scale: 0.82; --lamp-right: -128px; margin-right: 150px; }
}
@media (max-width: 760px) {
  .desk-surface { align-items: flex-end; }
  .paper-col { --lamp-scale: 0.6; --lamp-right: -110px; width: 100%; max-width: 100%; margin-right: 100px; }
}
@media (max-width: 640px) {
  .beat.poem { min-height: 100vh; }
  .study-room { min-height: 100vh; }
  .study-wall { min-height: 34vh; padding-bottom: 0.25rem; }
  .paper-col { --lamp-scale: 0.5; --lamp-right: -96px; margin-right: 80px; }
  .windows-row { gap: 0.85rem; max-width: 100%; }
  .poem-paper[data-pos="2"], .poem-paper[data-pos="3"] { opacity: 0.001; }
}