:root {
  --ink: rgba(93, 74, 54, 0.82);
  --ink-soft: rgba(93, 74, 54, 0.68);
  --ink-faint: rgba(93, 74, 54, 0.44);
  --warm-shadow: rgba(255, 242, 224, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: #f4d7c6;
}

.page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background-image: url("../img/reading-nook-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Very light atmosphere layer. This helps the live text feel like it belongs
   to the sunlit wall rather than floating over the room. */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 42% 42%, rgba(255, 239, 222, 0.22), transparent 38%),
    linear-gradient(90deg, rgba(107, 58, 31, 0.05), transparent 40%, rgba(255, 242, 224, 0.08));
  pointer-events: none;
}

.wall-message {
  position: absolute;
  top: clamp(6.25rem, 14vh, 9.5rem);
  left: clamp(18rem, 29vw, 31rem);
  width: min(34rem, 42vw);
  color: var(--ink);
  text-align: left;
  text-wrap: balance;
  opacity: 0.88;
  mix-blend-mode: multiply;
  filter: blur(0.08px);
  text-shadow:
    0 1px 0 var(--warm-shadow),
    0 8px 28px rgba(255, 244, 230, 0.18);
  transform-origin: center left;
  transform: perspective(1400px) rotateY(-1.1deg) rotateZ(0.05deg);
}

.eyebrow {
  margin: 0 0 1.2rem;
  font-size: clamp(2.1rem, 3.8vw, 4.1rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.flourish {
  width: 9.5rem;
  height: 1rem;
  margin: 0 0 1.7rem 7.8rem;
  opacity: 0.56;
  background:
    linear-gradient(90deg, transparent 0 8%, var(--ink-faint) 8% 42%, transparent 42% 58%, var(--ink-faint) 58% 92%, transparent 92%),
    radial-gradient(ellipse at center, var(--ink-faint) 0 18%, transparent 19%);
  background-repeat: no-repeat;
  background-size: 100% 1px, 1.8rem 0.7rem;
  background-position: center 50%, center 50%;
}

h1 {
  max-width: 26rem;
  margin: 0 0 2rem;
  font-size: clamp(1.85rem, 2.55vw, 3rem);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.body-copy,
.reserved-line {
  max-width: 28rem;
  margin: 0;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.small-rule {
  width: 5.8rem;
  height: 1px;
  margin: 1.35rem 0 1rem;
  background: var(--ink-faint);
  opacity: 0.72;
}

.reserved-line {
  font-size: clamp(0.95rem, 1.05vw, 1.12rem);
  font-style: italic;
}

@media (max-width: 900px) {
  .page {
    min-height: 100dvh;
    background-position: 61% center;
  }

  .page::before {
    background:
      linear-gradient(180deg, rgba(255, 238, 221, 0.70), rgba(255, 238, 221, 0.30) 52%, rgba(112, 65, 39, 0.08)),
      radial-gradient(circle at 45% 34%, rgba(255, 247, 237, 0.62), transparent 48%);
  }

  .wall-message {
    top: clamp(4.2rem, 9vh, 6.5rem);
    left: 7vw;
    width: min(31rem, 86vw);
    opacity: 0.92;
    transform: none;
    filter: none;
    text-shadow:
      0 1px 0 rgba(255, 246, 235, 0.55),
      0 10px 28px rgba(255, 242, 224, 0.32);
  }

  .eyebrow {
    font-size: clamp(2.25rem, 10vw, 4rem);
    margin-bottom: 0.95rem;
  }

  .flourish {
    margin-left: clamp(4.8rem, 22vw, 7.8rem);
    margin-bottom: 1.35rem;
  }

  h1 {
    max-width: 19rem;
    font-size: clamp(1.75rem, 7vw, 2.7rem);
    margin-bottom: 1.55rem;
  }

  .body-copy,
  .reserved-line {
    max-width: 20.5rem;
    font-size: clamp(0.98rem, 4.2vw, 1.15rem);
    line-height: 1.48;
  }

  .desktop-break {
    display: none;
  }

  .small-rule {
    margin: 1.1rem 0 0.85rem;
  }
}

@media (max-width: 520px) {
  .page {
    background-position: 67% center;
  }

  .wall-message {
    top: 7.2vh;
    left: 8vw;
    width: 84vw;
  }

  .eyebrow {
    font-size: clamp(2rem, 10.5vw, 3rem);
  }

  h1 {
    max-width: 17rem;
  }
}

/* Landscape phones: preserve more of the lower image area so the rug/cat
   stays visible, while shifting the text block back onto the clean wall. */
@media (max-width: 950px) and (orientation: landscape) {
  .page {
    min-height: 100dvh;
    background-position: 66% 74%;
  }

  .page::before {
    background:
      linear-gradient(90deg, rgba(255, 239, 223, 0.38), rgba(255, 239, 223, 0.14) 42%, rgba(255, 239, 223, 0.04)),
      radial-gradient(circle at 36% 30%, rgba(255, 248, 239, 0.22), transparent 42%);
  }

  .wall-message {
    top: 1.1rem;
    left: 20vw;
    width: min(23rem, 40vw);
    opacity: 0.92;
    transform: none;
    filter: none;
    text-shadow:
      0 1px 0 rgba(255, 246, 235, 0.58),
      0 8px 24px rgba(255, 242, 224, 0.20);
  }

  .eyebrow {
    margin-bottom: 0.55rem;
    font-size: clamp(1.6rem, 4vw, 2.35rem);
  }

  .flourish {
    width: 6.2rem;
    margin: 0 0 0.8rem 4.3rem;
  }

  h1 {
    max-width: 13.5rem;
    margin-bottom: 0.95rem;
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    line-height: 1.15;
  }

  .body-copy,
  .reserved-line {
    max-width: 14.25rem;
    font-size: clamp(0.75rem, 1.55vw, 0.92rem);
    line-height: 1.35;
  }

  .small-rule {
    width: 3.6rem;
    margin: 0.7rem 0 0.55rem;
  }

  .desktop-break {
    display: none;
  }
}