/* =========================================================
   HAZEL — MEMORY JOURNAL
========================================================= */


:root {

  --cream: #f5eee4;

  --paper: #fcf7ef;

  --paper-dark: #e9ddcc;

  --ink: #443a31;

  --muted: #887b6c;

  --brown: #826850;

  --sage: #9da58e;

  --rose: #c99d96;

  --dark-rose: #a87872;

  --line:
    rgba(68, 58, 49, 0.15);

  --white:
    #fffdf9;

  --shadow:
    0 28px 70px
    rgba(65, 48, 34, 0.16);

}


/* =========================================================
   RESET
========================================================= */


* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

  scroll-snap-type: y proximity;

}


body {

  margin: 0;

  background: var(--cream);

  color: var(--ink);

  font-family:
    "Georgia",
    "Times New Roman",
    serif;

  overflow-x: hidden;

}


button {

  font: inherit;

}


/* =========================================================
   GENERAL
========================================================= */


.scene {

  min-height: 100svh;

  scroll-snap-align: start;

  scroll-snap-stop: always;

  position: relative;

  overflow: hidden;

}


.eyebrow {

  margin: 0 0 20px;

  color: var(--brown);

  font-family:
    "DM Sans",
    sans-serif;

  font-size: .7rem;

  font-weight: 600;

  letter-spacing: .18em;

  text-transform: uppercase;

}


/* =========================================================
   INTRO
========================================================= */


.intro {

  display: grid;

  place-items: center;

  text-align: center;

  background:

    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.95),
      transparent 38%
    ),

    var(--cream);

  transition:

    opacity 1s ease,

    transform 1s ease;

}


.intro-content {

  position: relative;

  z-index: 2;

  padding: 30px;

}


.paw {

  font-size: 2rem;

  margin-bottom: 28px;

  animation:
    gentleHop
    2.5s
    ease-in-out
    infinite;

}


.intro h1 {

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3.1rem, 8vw, 7rem);

  font-weight: 400;

  line-height: 1.02;

  letter-spacing: -.025em;

}


.intro-subtitle {

  color: var(--muted);

  margin: 26px 0 40px;

  font-family:
    Georgia,
    serif;

  font-size: 1rem;

  line-height: 1.8;

}


/* =========================================================
   MAIN BUTTON
========================================================= */


.primary-button {

  border:

    1px solid
    var(--ink);

  background:

    var(--ink);

  color:

    var(--white);

  padding:

    16px 25px;

  border-radius:

    999px;

  cursor:

    pointer;

  transition:

    transform .3s ease,

    background .3s ease;

}


.primary-button span {

  margin-left: 12px;

}


.primary-button:hover {

  transform:
    translateY(-3px);

  background:

    var(--brown);

}


.scroll-hint {

  position: absolute;

  bottom: 28px;

  color: var(--muted);

  font-family:
    "DM Sans",
    sans-serif;

  font-size: .65rem;

  letter-spacing: .16em;

  text-transform: uppercase;

}


/* =========================================================
   PAPER GRAIN
========================================================= */


.grain {

  position: absolute;

  inset: 0;

  opacity: .07;

  pointer-events: none;

  background-image:

    url(
      "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"
    );

}


/* =========================================================
   HERO
========================================================= */


.hero {

  display: grid;

  place-items: center;

  padding: 9vh 7vw;

  background:

    var(--paper);

}


.hero-glow {

  position: absolute;

  width: 55vw;

  height: 55vw;

  max-width: 700px;

  max-height: 700px;

  border-radius: 50%;

  background:

    rgba(201,157,150,.13);

  filter:

    blur(35px);

}


.hero-copy {

  position: relative;

  z-index: 2;

  text-align: center;

}


.five {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:

    clamp(
      10rem,
      27vw,
      23rem
    );

  line-height: .68;

  font-weight: 400;

  color: var(--brown);

  opacity: .9;

}


.hero h2 {

  margin:

    35px 0 14px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:

    clamp(
      1.5rem,
      4vw,
      3rem
    );

  font-weight: 400;

  letter-spacing: .035em;

}


.hero-subtitle {

  color: var(--muted);

  line-height: 1.8;

}


/* =========================================================
   HERO PHOTO
========================================================= */


.hero-photo-wrap {

  position: absolute;

  right: 8%;

  bottom: 9%;

  width:
    min(
      300px,
      28vw
    );

  transform:
    rotate(4deg);

  box-shadow:
    var(--shadow);

  z-index: 3;

}


.hero-photo {

  display: block;

  width: 100%;

  height: auto;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  border:

    10px solid
    white;

}


/* Little piece of paper tape */

.photo-tape {

  position: absolute;

  top: -15px;

  left: 50%;

  width: 80px;

  height: 27px;

  transform:
    translateX(-50%)
    rotate(-2deg);

  background:

    rgba(
      225,
      211,
      188,
      .78
    );

  opacity: .85;

}


/* =========================================================
   HERO PAWS
========================================================= */


.paw-trail {

  position: absolute;

  bottom: 8%;

  left: 8%;

  display: flex;

  gap: 22px;

  font-size: 1.25rem;

  transform:
    rotate(-15deg);

  opacity: .55;

}


.story-scroll {

  position: absolute;

  bottom: 30px;

  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 7px;

  color: var(--muted);

  font-family:
    "DM Sans",
    sans-serif;

  font-size: .62rem;

  letter-spacing: .15em;

  text-transform: uppercase;

}


.story-arrow {

  font-size: 1.1rem;

  animation:
    softDown
    2s
    ease-in-out
    infinite;

}


/* =========================================================
   MEMORY CHAPTER
========================================================= */


.memory {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    7svh
    8vw;

  color:
    var(--white);

}


.memory-beginning {

  background:

    var(--sage);

}


/* The early years move through soft, food-inspired colours so each
   memory feels like its own little scrapbook page. */

.memory-bath {

  background: #91a4a0;

}


.memory-thirty {

  background: #b58d83;

}


.memory-coriander {

  background: #7e987b;

}


.memory-watermelon {

  background: #c98283;

}


.memory-carrot {

  background: #b97850;

}


.memory-five-months {

  background: #877c9a;

}


.memory-million {

  background: #6f817b;

}


.memory-birthday {

  background:

    var(--dark-rose);

}


/* Hazel's second chapter is intentionally varied—each colour and card
   reads like a different page rescued from a family scrapbook. */

.memory-poses { background: #aa7b83; }

.memory-cat { background: #789a96; }

.memory-precious { background: #907e94; }

.memory-clothes { background: #8c9c74; }

.memory-portrait { background: #a98069; }

.memory-travel { background: #688f9a; }

.memory-santa { background: #9a7271; }

.memory-new-year { background: #718d70; }

.memory-cravings { background: #847159; }

.memory-rain { background: #718b9f; }

.memory-moving { background: #95826f; }

.memory-mango { background: #c08a4d; }

.memory-second-birthday { background: #a97580; }

.memory-midnight-food { background: #7e7259; }

.memory-santa-love { background: #9a6e68; }

.memory-busy-day { background: #7c9276; }

.memory-sunday { background: #9f8c6f; }

.memory-lootera { background: #886a77; }

.memory-love-story { background: #a97683; }

.memory-sleepy { background: #78869c; }

.memory-beach { background: #6c9eaa; }

.memory-world-cup { background: #6b8971; }

.memory-repeat { background: #8c7f6c; }

.memory-third-birthday { background: #9b6d79; }

.memory-cuteness { background: #aa8192; }

.memory-cuteness-continued { background: #90788b; }

.memory-pure-love { background: #8a9a86; }

.memory-coriander-photo { background: #79966f; }

.memory-backpack { background: #8b816a; }

.memory-railway { background: #6f8996; }

.memory-fourth-birthday { background: #a8737e; }

.memory-rakhi { background: #aa7f68; }

.memory-mamabear { background: #9a7888; }

.memory-dreaming { background: #777e9a; }

.memory-girlfriend { background: #907d91; }

.memory-green-food { background: #738a63; }

/* The firsts chapter uses quieter, airy tones to let the milestones feel
   like keepsakes rather than another playful montage. */

.memory-first-flight { background: #7894a5; }

.memory-first-rakhi { background: #a98170; }

.memory-first-world { background: #849887; }

.memory-first-sky { background: #839aae; }

.memory-first-home { background: #9a816e; }


/* =========================================================
   CHAPTER LABEL
========================================================= */


.chapter-label {

  display: flex;

  align-items: center;

  gap: 15px;

  font-size: .75rem;

}


.chapter-number {

  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  border:
    1px solid
    rgba(255,255,255,.5);

  border-radius: 50%;

  font-family:
    Georgia,
    serif;

  font-size: 1rem;

}


.chapter-title {

  font-family:
    "Segoe Print",
    "Bradley Hand",
    "Snell Roundhand",
    "URW Chancery L",
    cursive;

  font-size: 1rem;

  letter-spacing: .01em;

}


/* =========================================================
   MEMORY LAYOUT
========================================================= */


.memory-layout {

  min-height: 0;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: clamp(2.5rem, 7vw, 7rem);

  align-items: center;

  max-width: 1250px;

  margin:
    4svh auto
    0;

}


.memory-layout.reverse
.memory-copy {

  order: 0;

}


.memory-layout.reverse
.memory-media {

  order: 1;

}


/* =========================================================
   VIDEO
========================================================= */


.memory-media {

  width: 100%;

}


.video-frame {

  position: relative;

  width:
    min(
      100%,
      460px
    );

  margin: auto;

  transform:
    rotate(-2.5deg);

  box-shadow:
    var(--shadow);

  background:
    #28231f;

  border:
    10px solid
    white;

}


.memory-layout.reverse
.video-frame {

  transform:
    rotate(2.5deg);

}


.memory-video {

  display: block;

  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  background:
    #28231f;

}


/* A photograph appears as a slightly imperfect physical print, rather
   than as a flat image in a web layout. */

.portrait-photo {

  width: min(100%, 500px);

  margin: auto;

  padding: 11px 11px 25px;

  background: #fffdf9;

  color: var(--ink);

  box-shadow: var(--shadow);

  transform: rotate(-3deg);

}


.portrait-photo img {

  display: block;

  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

}


.portrait-photo figcaption {

  margin: 15px 4px 0;

  font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;

  font-size: .95rem;

  text-align: center;

  transform: rotate(-1deg);

}


.travel-clips {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;

  align-items: start;

}


.travel-clips .video-frame {

  border-width: 7px;

}


.travel-clips > div:last-child {

  margin-top: 55px;

}


.travel-clips > div:last-child .video-frame {

  transform: rotate(3deg);

}


/* Related clips sit together like an album spread, with intentionally
   uneven spacing and rotation rather than a rigid media grid. */

.memory-collage {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

  align-items: start;

}


.memory-collage .video-frame {

  width: 100%;

  border-width: 7px;

}


.memory-collage > :nth-child(even) {

  margin-top: 42px;

}


.memory-collage > :nth-child(3n) {

  transform: rotate(2deg);

}


.three-up {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}


.four-up {

  grid-template-columns: repeat(4, minmax(0, 1fr));

}


.three-up .photo-caption,
.birthday-spread .photo-caption {

  width: 100%;

  font-size: .8rem;

}


.mini-photo {

  margin: 0;

  padding: 7px 7px 17px;

  background: #fffdf9;

  box-shadow: 0 15px 35px rgba(65, 48, 34, .2);

  color: var(--ink);

  transform: rotate(-2deg);

}


.mini-photo img {

  display: block;

  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

}


/* Keep memory photographs intact. Their varied proportions are part of
   the scrapbook feel, so no part of a photo is cropped away. */

.memory .mini-photo img,
.memory .portrait-photo img {

  height: auto;

  aspect-ratio: auto;

  object-fit: contain;

}


.wide-photo {

  grid-column: 1 / -1;

  width: min(100%, 640px);

  justify-self: center;

}


.mini-photo figcaption {

  margin-top: 9px;

  font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;

  font-size: .75rem;

  text-align: center;

}


.birthday-spread {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}


.birthday-spread .mini-photo {

  grid-column: span 1;

}


/* =========================================================
   VIDEO CONTROL
========================================================= */


.video-control {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(
      -50%,
      -50%
    );

  width: 62px;

  height: 62px;

  border:
    1px solid
    rgba(255,255,255,.7);

  border-radius: 50%;

  background:
    rgba(0,0,0,.32);

  backdrop-filter:
    blur(8px);

  color: white;

  cursor: pointer;

  font-size: .95rem;

  transition:
    transform .3s ease,
    background .3s ease;

}


/* Videos quietly play as part of the story; clicking the video still
   toggles playback, without displaying an on-screen control. */

.video-control {

  display: none;

}


.video-control:hover {

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1.08);

  background:
    rgba(0,0,0,.5);

}


/* =========================================================
   PHOTO CAPTION
========================================================= */


.photo-caption {

  margin:

    22px
    auto
    0;

  width:
    min(
      90%,
      500px
    );

  font-family:

    "Segoe Print",
    "Bradley Hand",
    "Snell Roundhand",
    "URW Chancery L",
    cursive;

  font-size:
    1rem;

  text-align:
    center;

  opacity:
    .85;

  transform:
    rotate(-1.5deg);

}


/* =========================================================
   MEMORY STORY
========================================================= */


.memory-copy {

  max-width:
    500px;

}


.memory h2 {

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:

    clamp(
      3rem,
      6vw,
      6.3rem
    );

  font-weight:
    400;

  line-height:
    1.03;

  letter-spacing:
    -.025em;

}


.story-text {

  margin-top:
    28px;

  max-width:
    450px;

     
 color:
    rgba(
      255,
      250,
      243,
      .84
    );

  line-height:
    1.9;

  font-size:
    1rem;

}


.story-text strong {

  font-weight:
    600;

  color:
    white;

}


/* =========================================================
   HANDWRITTEN MEMORY NOTE
========================================================= */


.memory-note {

  margin-top:
    30px;

  max-width:
    430px;

  font-family:

    "Segoe Print",
    "Bradley Hand",
    "Snell Roundhand",
    "URW Chancery L",
    cursive;

  font-size:
    1.05rem;

  line-height:
    1.8;

  color:
    rgba(52, 36, 12, 0.9);

  transform:
    rotate(-1.5deg);

}


/* =========================================================
   MEMORY METADATA
========================================================= */


.memory-meta {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px 24px;

  margin-top:
    42px;

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    .62rem;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

  opacity:
    .68;

}


/* =========================================================
   STORY TRANSITION
========================================================= */


.story-transition {

  display:
    grid;

  place-items:
    center;

  text-align:
    center;

  background:
    var(--paper);

}


.transition-content {

  padding:
    10vw;

}


.transition-content h2 {

  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:

    clamp(
      3rem,
      7vw,
      7rem
    );

  font-weight:
    400;

  line-height:
    1.05;

}


.transition-paw {

  margin-top:
    45px;

  font-size:
    1.8rem;

  opacity:
    .6;

  animation:
    gentleHop
    2.5s
    ease-in-out
    infinite;

}


/* =========================================================
   NEXT CHAPTER
========================================================= */


.coming-next {

  display:
    grid;

  place-items:
    center;

  padding:
    10vw;

  text-align:
    center;

  background:
    var(--cream);

}


.coming-next h2 {

  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:

    clamp(
      4rem,
      8vw,
      8rem
    );

  font-weight:
    400;

}


.coming-next p:not(.eyebrow) {

  color:
    var(--muted);

  line-height:
    1.9;

  margin:
    25px auto
    40px;

}


.chapter-preview {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    24px;

  padding:
    16px 24px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      .45
    );

}


.chapter-preview span:first-child {

  color:
    var(--brown);

  font-size:
    .8rem;

}


/* =========================================================
   PROGRESS
========================================================= */


.progress {

  position:
    fixed;

  z-index:
    20;

  top:
    50%;

  right:
    20px;

  transform:
    translateY(-50%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    8px;

}


.progress-dot {

  width:
    7px;

  height:
    7px;

  border:
    1px solid
    var(--brown);

  border-radius:
    50%;

  transition:
    transform .3s ease,
    background .3s ease;

}


.progress-dot.active {

  background:
    var(--brown);

  transform:
    scale(1.7);

}


.progress-line {

  width:
    1px;

  height:
    28px;

  background:
    var(--line);

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */


.reveal {

  opacity:
    0;

  transform:
    translateY(40px);

  transition:

    opacity 1.1s ease,

    transform 1.1s ease;

}


.reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);

}


/* =========================================================
   INTRO EXIT
========================================================= */


.intro.hide {

  opacity:
    0;

  transform:
    scale(1.025);

  pointer-events:
    none;

}


/* =========================================================
   ANIMATIONS
========================================================= */


@keyframes gentleHop {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }

}


@keyframes softDown {

  0%,
  100% {
    transform:
      translateY(0);

    opacity:
      .55;
  }

  50% {
    transform:
      translateY(6px);

    opacity:
      1;
  }

}


@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

    scroll-snap-type: none;

  }

}


/* =========================================================
   MOBILE
========================================================= */


@media (max-width: 760px) {


  .progress {

    right:
      9px;

  }


  .intro-content {

    padding:
      24px;

  }


  .intro h1 {

    font-size:
      clamp(
        3rem,
        13vw,
        5rem
      );

  }


  .hero {

    padding:
      12vh
      8vw;

  }


  .hero-photo-wrap {

    position:
      relative;

    right:
      auto;

    bottom:
      auto;

    width:
      min(
        230px,
        58vw
      );

    margin-top:
      50px;

  }


  .hero-copy {

    margin-top:
      -15px;

  }


  .five {

    font-size:
      12rem;

  }


  .paw-trail {

    display:
      none;

  }


  .story-scroll {

    bottom:
      18px;

  }


  .memory {

    padding:
      6svh
      8vw;

  }


  .memory-layout {

    grid-template-columns:
      1fr;

    gap:
      4svh;

    margin-top:
      6vh;

  }


  .memory-layout.reverse
  .memory-copy {

    order:
      0;

  }


  .memory-layout.reverse
  .memory-media {

    order:
      1;

  }


  .memory-copy {

    order:
      1;

  }


  .memory-media {

    order:
      0;

  }


  .memory h2 {

    font-size:
      clamp(
        2.7rem,
        12vw,
        4.25rem
      );

  }


  .video-frame {

    width:
      min(100%, 42svh);

    transform:
      rotate(-1.5deg);

  }


  .memory-layout.reverse
  .video-frame {

    transform:
      rotate(1.5deg);

  }


  .video-control {

    width:
      55px;

    height:
      55px;

  }


  .memory-note {

    font-size:
      1rem;

  }


  .travel-clips {

    gap: 14px;

  }


  .travel-clips > div:last-child {

    margin-top: 32px;

  }


  .portrait-photo {

    width: min(100%, 380px);

  }


  .three-up,
  .birthday-spread,
  .four-up {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }


  .memory-collage {

    gap: 12px;

  }


  .memory-collage > :nth-child(even) {

    margin-top: 24px;

  }


  .transition-content {

    padding:
      15vw 8vw;

  }


  .transition-content h2 {

    font-size:
      clamp(
        3rem,
        13vw,
        5rem
      );

  }


  .coming-next {

    padding:
      15vw 8vw;

  }


  .coming-next h2 {

    font-size:
      clamp(
        3.5rem,
        15vw,
        6rem
      );

  }

}
/* =========================================================
   PROLOGUE
========================================================= */

.prologue {

  min-height: 100svh;

  display: grid;

  place-items: center;

  padding: 12vh 8vw;

  text-align: center;

  background:
    var(--cream);

  position: relative;

}


.prologue-content {

  max-width: 850px;

}


.prologue-date {

  display: inline-block;

  margin: 25px 0 42px;

  padding: 13px 22px 11px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.25rem,
      5vw,
      4.75rem
    );

  font-weight: 400;

  line-height: .9;

  letter-spacing: .04em;

  color:
    var(--brown);

  border-top:
    1px solid
    rgba(130, 104, 80, .45);

  border-bottom:
    1px solid
    rgba(130, 104, 80, .45);

}


.prologue h2 {

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      4rem,
      8vw,
      8rem
    );

  font-weight: 400;

  line-height: .98;

  letter-spacing: -.03em;

}


.prologue-story {

  max-width: 520px;

  margin: 45px auto 0;

  color:
    var(--muted);

  font-size:
    1.05rem;

  line-height:
    2;

}


.prologue-paw {

  margin-top: 55px;

  font-size: 1.6rem;

  opacity: .5;

  animation:
    gentleHop
    2.5s
    ease-in-out
    infinite;

}


/* =========================================================
   ORIGIN / HANDOVER
========================================================= */

.origin-memory {

  min-height: 85svh;

  display: grid;

  place-items: center;

  padding:
    12vh
    8vw;

  background:
    var(--paper);

}


.origin-inner {

  width: 100%;

  max-width: 1000px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10vw;

  align-items: center;

}


.origin-heading h2 {

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.5rem,
      6vw,
      6rem
    );

  font-weight: 400;

  line-height: 1.02;

}


.origin-letter {

  position: relative;

  padding:
    50px;

  background:
    #f8f0e3;

  box-shadow:
    0 20px 50px
    rgba(70,50,35,.09);

  transform:
    rotate(2deg);

}


.letter-mark {

  margin-bottom: 25px;

  color:
    var(--brown);

}


.origin-letter p {

  color:
    var(--muted);

  line-height:
    1.9;

}


.origin-letter .handwritten {

  color:
    var(--brown);

}


/* =========================================================
   TIMELINE MEMORIES
========================================================= */

.timeline-memory {

  min-height: 100svh;

  padding:
    14vh
    9vw;

  display: grid;

  grid-template-columns:
    .12fr
    1fr
    1fr;

  gap: 5vw;

  align-items: center;

  background:
    var(--paper-dark);

  color:
    var(--ink);

}


.timeline-memory:nth-of-type(even) {

  background:
    var(--cream);

}


.timeline-number {

  align-self: start;

  padding-top: 20px;

  font-family:
    Georgia,
    serif;

  font-size:
    .8rem;

  color:
    var(--brown);

}


/* =========================================================
   TIMELINE PHOTO
========================================================= */

.timeline-media {

  position: relative;

}


.timeline-photo {

  width:
    min(
      100%,
      520px
    );

  padding:
    12px;

  background:
    var(--white);

  box-shadow:
    var(--shadow);

  transform:
    rotate(-3deg);

}


.timeline-photo.tilted {

  transform:
    rotate(3deg);

}


.timeline-photo img {

  display:
    block;

  width:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

}


/* =========================================================
   TIMELINE STORY
========================================================= */

.timeline-story {

  max-width:
    500px;

}


.timeline-story h2 {

  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.5rem,
      6vw,
      6rem
    );

  font-weight:
    400;

  line-height:
    1;

}


.timeline-story > p:not(.eyebrow):not(.handwritten) {

  margin-top:
    30px;

  color:
    var(--muted);

  line-height:
    1.9;

}


/* =========================================================
   HANDWRITTEN DARK NOTE
========================================================= */

.dark-note {

  color:
    var(--brown);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {


  .prologue {

    padding:
      12vh
      8vw;

  }


  .prologue h2 {

    font-size:
      clamp(
        3.5rem,
        15vw,
        5.5rem
      );

  }


  .origin-inner {

    grid-template-columns:
      1fr;

    gap:
      8vh;

  }


  .origin-letter {

    padding:
      35px;

  }


  .timeline-memory {

    min-height:
      auto;

    padding:
      14vh
      8vw;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7vh;

  }


  .timeline-number {

    padding:
      0;

  }


  .timeline-photo {

    width:
      90%;

    margin:
      0 auto;

  }


  .timeline-story {

    max-width:
      none;

  }


  .timeline-story h2 {

    font-size:
      clamp(
        3.5rem,
        15vw,
        5.5rem
      );

  }

}

/* add on css for new sections */
/* =========================================================
   HAZEL — ADDITIONAL STYLES
   Narrator transitions + Final scene + Surprise message
   Add this at the END of your existing style.css
========================================================= */


/* =========================================================
   NARRATOR TRANSITIONS
========================================================= */

.narrator-intro,
.story-transition {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 120px 8vw;

  overflow: hidden;

  text-align: center;
}


/* Soft background atmosphere */

.story-transition::before {
  content: "";

  position: absolute;
  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 70%
    );

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  pointer-events: none;

  opacity: 0.7;
}


/* Content */

.transition-content {
  position: relative;

  width: min(760px, 100%);

  margin: 0 auto;

  z-index: 2;
}


/* Narrator eyebrow */

.story-transition .eyebrow {
  margin-bottom: 28px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  opacity: 0.65;
}


/* Narrator heading */

.story-transition h2 {
  margin: 0 auto 34px;

  max-width: 760px;

  line-height: 1.05;

  letter-spacing: -0.025em;
}


/* Narrator paragraph */

.story-transition .story-text {
  max-width: 650px;

  margin: 0 auto;

  line-height: 1.9;

  opacity: 0.78;
}


/* Little paw */

.transition-paw {
  margin-top: 48px;

  font-size: 25px;

  opacity: 0.6;

  animation: hazel-paw-breathe 3s ease-in-out infinite;
}


@keyframes hazel-paw-breathe {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  50% {
    transform: translateY(-7px);
    opacity: 0.8;
  }

}


/* =========================================================
   SPECIAL NARRATOR INTRO
========================================================= */

.narrator-intro {
  min-height: 90vh;
}


.narrator-intro .transition-content {
  max-width: 820px;
}


.narrator-intro h2 {
  font-size: clamp(42px, 6vw, 82px);
}


.narrator-intro .story-text {
  font-size: clamp(17px, 1.5vw, 21px);

  line-height: 1.95;
}


/* =========================================================
   FINAL TRANSITION
========================================================= */

.final-transition {
  min-height: 100vh;
  min-height: 100svh;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.48),
      transparent 65%
    );
}


.final-transition h2 {
  font-size: clamp(45px, 7vw, 90px);
}


.final-transition .story-text {
  font-size: clamp(17px, 1.4vw, 21px);

  line-height: 2;
}


/* =========================================================
   FINAL ENDING
========================================================= */

.ending {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 120px 7vw;

  overflow: hidden;

  text-align: center;
}


/* Background glow */

.ending::before {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0) 68%
    );

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  pointer-events: none;
}


/* Ending content */

.ending-content {
  position: relative;

  z-index: 2;

  width: min(900px, 100%);

  margin: 0 auto;
}


/* Ending paw */

.ending-content > .paw {
  font-size: 30px;

  margin-bottom: 24px;

  opacity: 0.7;
}


/* Ending eyebrow */

.ending .eyebrow {
  margin-bottom: 25px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  opacity: 0.65;
}


/* Main ending heading */

.ending h2 {
  margin: 0 auto 38px;

  font-size: clamp(48px, 7vw, 92px);

  line-height: 0.98;

  letter-spacing: -0.04em;
}


/* Ending paragraph */

.ending-text {
  max-width: 680px;

  margin: 0 auto;

  font-size: clamp(17px, 1.45vw, 21px);

  line-height: 1.9;

  opacity: 0.8;
}


/* Ending handwritten note */

.ending .memory-note {
  max-width: 560px;

  margin: 42px auto 60px;

  line-height: 1.6;
}


/* =========================================================
   SURPRISE BOX
========================================================= */

.surprise-wrapper {
  width: min(620px, 100%);

  margin: 55px auto 0;
}


/* Clickable box */

.surprise-box {
  position: relative;

  width: 100%;

  min-height: 155px;

  padding: 32px 35px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border: 1px solid rgba(70, 55, 45, 0.16);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.7),
      rgba(247, 238, 226, 0.75)
    );

  box-shadow:
    0 18px 50px rgba(65, 48, 35, 0.08);

  cursor: pointer;

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;

  color: inherit;

  font-family: inherit;
}


.surprise-box:hover {
  transform: translateY(-7px);

  box-shadow:
    0 25px 65px rgba(65, 48, 35, 0.13);

  border-color:
    rgba(70, 55, 45, 0.25);
}


.surprise-box:active {
  transform: translateY(-2px);
}


/* Focus accessibility */

.surprise-box:focus-visible {
  outline: 2px solid currentColor;

  outline-offset: 5px;
}


/* Gift icon */

.surprise-icon {
  font-size: 38px;

  line-height: 1;

  margin-bottom: 8px;

  transition:
    transform 0.5s ease;
}


.surprise-box:hover .surprise-icon {
  transform: translateY(-4px) rotate(-4deg);
}


/* Box title */

.surprise-title {
  font-size: clamp(18px, 2vw, 23px);

  font-weight: 600;

  letter-spacing: -0.01em;
}


/* Hint */

.surprise-hint {
  font-size: 13px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  opacity: 0.55;

  margin-top: 4px;
}


/* Open state */

.surprise-box.is-open {
  border-radius: 22px 22px 0 0;

  border-bottom-color: transparent;

  box-shadow: none;
}


.surprise-box.is-open .surprise-icon {
  transform: rotate(8deg) scale(1.05);
}


/* =========================================================
   SURPRISE MESSAGE
========================================================= */

.surprise-message {
  overflow: hidden;

  border-radius: 0 0 22px 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88),
      rgba(247, 238, 226, 0.92)
    );

  border:
    1px solid rgba(70, 55, 45, 0.16);

  border-top: none;

  animation:
    surprise-reveal 0.7s cubic-bezier(.22, .61, .36, 1);
}


@keyframes surprise-reveal {

  from {
    opacity: 0;

    transform:
      translateY(-18px);

    clip-path:
      inset(0 0 100% 0);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);

    clip-path:
      inset(0 0 0 0);
  }

}


/* Inner message */

.surprise-inner {
  padding: 60px 55px 55px;
}


/* Surprise eyebrow */

.surprise-inner .eyebrow {
  margin-bottom: 22px;

  font-size: 12px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  opacity: 0.55;
}


/* Paw */

.surprise-paw {
  font-size: 24px;

  margin-bottom: 28px;

  opacity: 0.6;
}


/* Mother's message */

.mother-message {
  max-width: 570px;

  margin: 0 auto;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(18px, 1.6vw, 23px);

  line-height: 1.9;

  letter-spacing: 0.005em;

  text-align: center;

  opacity: 0.9;
}


/* Signature */

.mother-signature {
  margin-top: 38px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-style: italic;

  font-size: 17px;

  opacity: 0.7;
}


/* =========================================================
   FINAL PAW TRAIL
========================================================= */

.final-paw-trail {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 25px;

  margin-top: 65px;

  opacity: 0.45;
}


.final-paw-trail span {
  display: inline-block;

  font-size: 19px;
}


.final-paw-trail span:nth-child(1) {
  transform: rotate(-12deg) translateY(3px);
}


.final-paw-trail span:nth-child(2) {
  transform: rotate(8deg) translateY(-3px);
}


.final-paw-trail span:nth-child(3) {
  transform: rotate(-5deg) translateY(2px);
}


/* =========================================================
   FINAL LINE
========================================================= */

.final-line {
  margin-top: 35px;

  font-size: clamp(20px, 2vw, 27px);

  font-weight: 500;

  letter-spacing: 0.01em;

  opacity: 0.8;
}


/* =========================================================
   HIDDEN ATTRIBUTE
========================================================= */

.surprise-message[hidden] {
  display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .story-transition,
  .narrator-intro,
  .ending {
    padding:
      90px
      22px;
  }


  .story-transition h2,
  .ending h2 {
    line-height: 1.05;
  }


  .story-transition .story-text,
  .ending-text {
    line-height: 1.8;
  }


  .transition-paw {
    margin-top: 35px;
  }


  .ending-content > .paw {
    font-size: 26px;
  }


  .surprise-wrapper {
    margin-top: 40px;
  }


  .surprise-box {
    min-height: 140px;

    padding:
      28px
      20px;
  }


  .surprise-inner {
    padding:
      45px
      22px
      40px;
  }


  .mother-message {
    font-size: 17px;

    line-height: 1.8;
  }


  .mother-signature {
    font-size: 16px;

    line-height: 1.6;
  }


  .final-paw-trail {
    gap: 17px;

    margin-top: 45px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .transition-paw,
  .surprise-message {
    animation: none;
  }


  .surprise-box,
  .surprise-icon {
    transition: none;
  }

}
/* =========================================================
   HAZEL — IDENTITY SECTION
========================================================= */

.hazel-identity {
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 248, 236, 0.95),
      rgba(226, 215, 199, 0.98) 75%
    );

  color: #3f342c;
}

.hazel-identity::before {
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0) 70%
    );
}

.hazel-identity .eyebrow {
  color: #6f5b4b;
  opacity: 0.85;
}

.hazel-identity h2 {
  color: #2f2721;
}

.hazel-identity .story-text {
  color: #4c4036;
  opacity: 0.9;
}