/* xity.quest — watercolor sketchbook, diagonal sections, refined Baskerville */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream: #f8f5f0;
  --coral: #ff6b6b;
  --lavender: #a080e0;
  --teal: #40c8b8;
  --wash-pink: #ffe0e0;
  --wash-lavender: #e8e0f8;
  --text: #2a2828;
  --muted: #6a6868;
}

html, body {
  background: var(--cream);
  color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Sketchbook opening */
.opening {
  position: relative;
  min-height: 100vh;
  padding: 20vh 32px 12vh;
  text-align: center;
  overflow: hidden;
}

.wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.wash-coral { background: var(--coral); width: 56vmin; height: 56vmin; top: -10vmin; left: -10vmin; }
.wash-lavender { background: var(--lavender); width: 60vmin; height: 60vmin; bottom: -10vmin; right: -10vmin; }
.wash-teal { background: var(--teal); width: 40vmin; height: 40vmin; top: 30%; right: 20%; opacity: 0.30; }

.top-tag, .hand {
  font-family: 'Kalam', cursive;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.top-tag { margin-bottom: 4vh; }

.quest-title {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: clamp(48px, 11vw, 160px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  position: relative;
  z-index: 2;
}

.diagonal-rule {
  display: block;
  margin: 32px auto 24px;
  max-width: 60vw;
}

.opening-tag {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 22px);
  color: var(--text);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.leaf-art { position: absolute; pointer-events: none; opacity: 0.85; }
.tree { left: 4vw; bottom: 8vh; width: clamp(60px, 8vw, 110px); height: auto; }
.bird { right: 8vw; top: 12vh; width: clamp(48px, 7vw, 80px); height: auto; opacity: 0.9; }

/* Diagonal sections */
.page {
  position: relative;
  padding: 130px 32px 130px;
  margin-top: -40px;
  background: var(--cream);
  overflow: hidden;
}
.diag {
  clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
}
.page[data-bg="pink"] { background: var(--wash-pink); }
.page[data-bg="lavender"] { background: var(--wash-lavender); }
.page[data-bg="cream"] { background: var(--cream); }

.page-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.page-h {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.1;
  margin: 12px 0 24px;
  letter-spacing: -0.01em;
}

.page p {
  margin-bottom: 1.2em;
  font-size: 17px;
}
.page p em { font-style: italic; color: var(--muted); }

.wave {
  width: 100%;
  height: 40px;
  margin-top: 36px;
  display: block;
}
.wave-double { height: 60px; }

.flowers {
  position: absolute;
  right: 4vw;
  top: 18vh;
  opacity: 0.85;
}

/* Glitch reveal at section transitions */
.page.in {
  animation: page-glitch 100ms steps(2);
}
@keyframes page-glitch {
  0%   { transform: translateX(0); filter: hue-rotate(0deg); }
  50%  { transform: translateX(3px); filter: hue-rotate(8deg); }
  100% { transform: translateX(0); filter: hue-rotate(0deg); }
}

/* Closing */
.closing {
  padding: 60px 32px 80px;
  text-align: center;
  background: var(--cream);
  border-top: 1px dashed var(--muted);
  margin-top: 40px;
}

@media (max-width: 720px) {
  .leaf-art { display: none; }
  .page { padding: 90px 24px 90px; }
  .opening { padding: 14vh 24px 8vh; }
}