:root {
  /* Theme Tokens */
  --ink: #2a1c18;
  --paper: #f6ead9;
  --frame: #d28b5d;
  --shadow: rgba(20, 8, 5, 0.38);
  /* Mobile width: use almost the full screen, but never go wider than 410px. */
  --screen-width: min(100vw - 32px, 410px);
  /* Desktop width: allow a little more horizontal space, up to 650px. */
  --screen-width-desktop: min(100vw - 48px, 650px);
  /* Border-image slice size: tells CSS how much of the card image to use for the frame edges. */
  --card-slice: 76 fill;
}

/* Base Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Document Background */
html {
  min-height: 100%;
  background: #170d0d;
}

/* Page Surface */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  font-family: "Patrick Hand", cursive;
  background:
    radial-gradient(
      circle at center,
      rgba(23, 13, 13, 0) 34%,
      rgba(23, 13, 13, 0.22) 64%,
      rgba(10, 5, 5, 0.66) 100%
    ),
    url("./assets/background.png") center top / 520px auto repeat;
}

/* Media Defaults */
img {
  display: block;
  max-width: 100%;
}

/* Page Layout */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  padding: 28px 16px 40px;
}

/* Story Screen Container */
.story-screen {
  width: var(--screen-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pumpkin Illustration */
.pumpkin-art {
  width: min(82vw, 310px);
  margin: 10px auto -28px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
}

/* Stretchable Card Frame */
.story-card {
  width: 100%;
  border: 28px solid transparent;
  border-image: url("./assets/card.png") var(--card-slice) stretch;
  filter: drop-shadow(0 14px 26px var(--shadow));
}

/* Card Inner Spacing */
.story-card__inner {
  min-height: 380px;
  padding: 28px 16px 18px;
}

/* Story Heading */
.story-title {
  margin: 0;
  text-align: center;
  font-family: "Walter Turncoat", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  line-height: 1.05;
}

/* Story Body */
.story-description {
  margin-top: 18px;
  font-family: "Playpen Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(1.25rem, 3.35vw, 1.2rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
}

/* Paragraph Reset */
.story-description p {
  margin: 0;
  white-space: pre-line;
}

/* Paragraph Spacing */
.story-description p + p {
  margin-top: 1.2em;
}

/* Tablet And Desktop Layout */
@media (min-width: 540px) {
  .page {
    padding-top: 42px;
    padding-bottom: 48px;
  }

  .pumpkin-art {
    width: 330px;
    margin-bottom: -34px;
  }

  .story-screen {
    width: var(--screen-width-desktop);
  }

  .story-card__inner {
    padding: 36px 24px 24px;
  }
}

/* Compact Phone Adjustments */
@media (max-width: 360px) {
  .page {
    padding-inline: 10px;
  }

  .story-card {
    border-width: 24px;
  }

  .story-card__inner {
    padding: 24px 12px 16px;
  }
}

/* Large Screen Vignette Tuning */
@media (min-width: 768px) {
  body {
    background:
      radial-gradient(
        circle at center,
        rgba(23, 13, 13, 0) 42%,
        rgba(23, 13, 13, 0.18) 70%,
        rgba(10, 5, 5, 0.62) 100%
      ),
      url("./assets/background.png") center top / 520px auto repeat;
  }
}