:root{ 
    --paper: #FBF6EE; 
    --paper-warm: #F3E7D5; 
    --ink: #241417; 
    --ink-soft: #4A3438; 
    --wine: #6E2439; 
    --wine-deep: #4A1826; 
    --gold: #B8863F; 
    --blush: #E7C9C0; 
    --rodrigo: #7252a5e6; 
    --her-blue: #b8e3e9e6; 
  } 

  *{ box-sizing: border-box; } 

  html{ scroll-behavior: smooth; } 

  body{ 
    margin:0; 
    background: var(--paper); 
    color: var(--ink); 
    font-family: 'Work Sans', sans-serif; 
    font-weight: 400; 
    line-height: 1.6; 
  } 

  h1, h2, .display{ 
    font-family: 'Fraunces', serif; 
    font-weight: 500; 
    color: var(--ink); 
    margin: 0; 
  } 

  section{ 
    padding: 6rem 1.5rem; 
    max-width: 720px; 
    margin: 0 auto; 
  } 

  .wide{ max-width: 1000px; } 

  /* ---------- HERO ---------- */ 
  .hero{ 
    min-height: 100svh; 
    max-width: none; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    padding: 2rem 1.5rem; 
    background: 
      radial-gradient(ellipse at 50% 20%, var(--blush) 0%, transparent 55%), 
      var(--paper); 
  } 

  .hero-eyebrow{ 
    font-family: 'Fraunces', serif; 
    font-style: italic; 
    font-size: 1.05rem; 
    color: var(--wine); 
    margin-bottom: 0.75rem; 
  } 

  .hero h1{ 
    font-size: clamp(2.75rem, 9vw, 5.5rem); 
    line-height: 1.05; 
  } 

  .hero p{ 
    max-width: 34ch; 
    margin: 1.5rem 0 0; 
    color: var(--ink-soft); 
    font-size: 1.05rem; 
  } 

  .scroll-hint{ 
    margin-top: 3.5rem; 
    font-size: 0.9rem; 
    color: var(--ink-soft); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 0.5rem; 
  } 

  .scroll-hint svg{ 
    animation: bob 2s ease-in-out infinite; 
  } 

  @keyframes bob{ 
    0%,100%{ transform: translateY(0); } 
    50%{ transform: translateY(6px); } 
  } 

  /* ---------- SECTION HEADS ---------- */ 
  .section-head{ 
    margin-bottom: 2.5rem; 
  } 

  .section-head h2{ 
    font-size: clamp(1.9rem, 4vw, 2.6rem); 
  } 

  .section-head p{ 
    color: var(--ink-soft); 
    margin-top: 0.6rem; 
    max-width: 50ch; 
  } 

  /* ---------- GALLERY ---------- */ 

  .gallery-grid img{ 
    width: 100%; 
    height: 100%; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    display: block; 
    cursor: pointer; 
    border-radius: 3px; 
    transition: transform 0.35s ease; 
  } 

  .gallery-grid img:hover{ 
    transform: scale(1.03); 
  } 

  .gallery-grid .tall{ grid-row: span 2; aspect-ratio: 1 / 2.1; } 
  .gallery-grid .wide-item{ grid-column: span 2; aspect-ratio: 2.1 / 1; } 

  .lightbox{ 
    position: fixed; 
    inset: 0; 
    background: rgba(36, 20, 23, 0.92); 
    display: none; 
    align-items: center; 
    justify-content: center; 
    z-index: 100; 
    padding: 2rem; 
  } 

  .lightbox.open{ display: flex; } 

    .lightbox img{
  max-width: min(90vw, 820px);
  max-height: 85vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.lightbox.open img{
  transform: scale(1);
  opacity: 1;
}

  .lightbox-close{ 
    position: absolute; 
    top: 1.5rem; 
    right: 1.5rem; 
    background: none; 
    border: 1px solid rgba(255,255,255,0.4); 
    color: var(--paper); 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    font-size: 1.1rem; 
    cursor: pointer; 
  } 

  /* ---------- MUSIC PLAYER ---------- */ 
  .player{ 
    background: var(--paper-warm); 
    border-radius: 6px; 
    padding: 2rem; 
  } 

  .now-playing{ 
    display: flex; 
    align-items: baseline; 
    justify-content: space-between; 
    margin-bottom: 1.25rem; 
  } 

  .now-playing .track-title{ 
    font-family: 'Fraunces', serif; 
    font-style: italic; 
    font-size: 1.3rem; 
  } 

  .now-playing .track-note{ 
    font-size: 0.85rem; 
    color: var(--ink-soft); 
  } 

  .progress-row{ 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    font-size: 0.8rem; 
    color: var(--ink-soft); 
    margin-bottom: 1.5rem; 
  } 

  .progress-track{ 
    flex: 1; 
    height: 3px; 
    background: rgba(110, 36, 57, 0.15); 
    border-radius: 2px; 
    cursor: pointer; 
    position: relative; 
  } 

  .progress-fill{ 
    position: absolute; 
    top:0; left:0; height:100%; 
    background: var(--wine); 
    border-radius: 2px; 
    width: 0%; 
  } 

  .controls{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 1.5rem; 
    margin-bottom: 2rem; 
  } 

  .controls button{ 
    background: none; 
    border: none; 
    cursor: pointer; 
    color: var(--ink); 
    padding: 0.4rem; 
  } 

  .controls button.play-btn{ 
    background: var(--wine); 
    color: var(--paper); 
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
  } 

  .playlist{ 
    border-top: 1px solid rgba(110,36,57,0.12); 
  } 

  .playlist-item{ 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.85rem 0.25rem; 
    border-bottom: 1px solid rgba(110,36,57,0.12); 
    cursor: pointer; 
    font-size: 0.95rem; 
  } 

  .playlist-item:hover{ color: var(--wine); } 

  .playlist-item.active{ 
    color: var(--wine); 
    font-weight: 500; 
  } 

  .playlist-item .why{ 
    font-size: 0.8rem; 
    color: var(--ink-soft); 
    font-style: italic; 
  } 

  /* ---------- VOICE MESSAGES ---------- */ 
  .voice-grid{ 
    display: grid; 
    gap: 0.9rem; 
  } 

  .voice-note{ 
    background: var(--paper-warm); 
    border-radius: 6px; 
    padding: 1.1rem 1.3rem; 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    cursor: pointer; 
    border: 1px solid transparent; 
    transition: border-color 0.2s ease; 
  } 

  .voice-note:hover{ border-color: rgba(110,36,57,0.25); } 

  .voice-note .vn-btn{ 
    flex-shrink: 0; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: var(--wine); 
    color: var(--paper); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: none; 
  } 

  .voice-note .vn-title{ 
    font-family: 'Fraunces', serif; 
    font-style: italic; 
    font-size: 1.05rem; 
  } 

  .voice-note .vn-sub{ 
    font-size: 0.82rem; 
    color: var(--ink-soft); 
  } 

  /* ---------- LETTER ---------- */ 
  .letter-wrap{ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
  } 

  .seal{ 
    width: 84px; 
    height: 84px; 
    border-radius: 50%; 
    background: var(--wine); 
    color: var(--paper); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: 'Fraunces', serif; 
    font-style: italic; 
    font-size: 1rem; 
    cursor: pointer; 
    border: none; 
    box-shadow: 0 8px 24px rgba(110,36,57,0.35); 
    transition: transform 0.2s ease; 
  } 

  .seal:hover{ transform: scale(1.05); } 

  .seal-caption{ 
    margin-top: 1rem; 
    font-size: 0.9rem; 
    color: var(--ink-soft); 
  } 

  .letter-body{ 
    max-width: 60ch; 
    margin-top: 2.5rem; 
    display: none; 
  } 

  .letter-body.open{ display: block; } 

  .letter-body p{ 
    font-family: 'Fraunces', serif; 
    font-size: 1.2rem; 
    line-height: 1.75; 
    color: var(--ink); 
  } 

  .letter-body p + p{ margin-top: 1.4rem; } 

  .letter-sign{ 
    margin-top: 2rem; 
    font-family: 'Fraunces', serif; 
    font-style: italic; 
    color: var(--wine); 
  } 

  /* ---------- REASONS ---------- */ 
  .reasons-box{ 
    background: var(--wine); 
    color: var(--paper); 
    border-radius: 6px; 
    padding: 2.5rem 2rem; 
    text-align: center; 
  } 

  .reasons-box .reason-text{ 
    font-family: 'Fraunces', serif; 
    font-style: italic; 
    font-size: 1.4rem; 
    min-height: 4.5rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
  } 

  .reasons-box button{ 
    margin-top: 1rem; 
    background: var(--paper); 
    color: var(--wine); 
    border: none; 
    padding: 0.7rem 1.6rem; 
    border-radius: 30px; 
    font-family: 'Work Sans', sans-serif; 
    font-size: 0.9rem; 
    cursor: pointer; 
  } 

  /* ---------- FOOTER ---------- */ 
  footer{ 
    text-align: center; 
    padding: 4rem 1.5rem 5rem; 
    color: var(--ink-soft); 
    font-size: 0.85rem; 
  } 

  footer .display{ 
    display: block; 
    font-size: 1.1rem; 
    color: var(--wine); 
    margin-bottom: 0.5rem; 
  } 

  @media (max-width: 540px){ 
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); } 
    section{ padding: 4.5rem 1.25rem; } 
  } 

/* ---------- RECORD PLAYER ---------- */
  .record-wrap{
    display: flex;
    justify-content: left;
    margin-bottom: 1.5rem;
  }

  .record{
    width: 120px;
    height: 120px;
    transition: transform 0.2s ease;
  }

  .record.spinning{
    animation: spin 2.4s linear infinite;
  }

  @keyframes spin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }

  .record-label{
    transition: fill 0.4s ease;
  }

  /* ---------- ENVELOPE LETTER ---------- */
  .envelope-wrap{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 1200px;
    min-height: 230px;
    transition: min-height 0.6s ease;
  }

  .envelope-wrap.open{
    min-height: 640px;
  }

  .envelope{
    position: relative;
    width: 280px;
    height: 180px;
    cursor: pointer;
  }

  .envelope-pocket{
    position: absolute;
    inset: 0;
    background: var(--wine-deep);
    border-radius: 4px;
    z-index: 1;
  }

  .envelope-pocket::after{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wine);
    clip-path: polygon(0 100%, 50% 42%, 100% 100%);
  }

  .envelope-flap{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 62%;
    background: var(--wine);
    clip-path: polygon(0 0, 100% 0, 50% 88%);
    border-radius: 4px 4px 0 0;
    transform-origin: top center;
    backface-visibility: hidden;
    transition: transform 0.6s ease, opacity 0.5s ease 0.15s;
    z-index: 3;
  }

  .envelope-paper{
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translateX(-50%);
    width: 88%;
    height: 0;
    background: var(--paper);
    border-radius: 3px;
    box-shadow: 0 14px 34px rgba(36,20,23,0.32);
    overflow: hidden;
    z-index: 1;
    transition: width 0.6s ease, height 0.6s ease, top 0.6s ease;
  }

  .envelope-paper-inner{
    padding: 2rem 1.75rem;
    overflow-y: auto;
    max-height: 100%;
  }

  .envelope-paper-inner p{
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink);
  }

  .envelope-paper-inner p + p{ margin-top: 1.2rem; }

  .envelope-wrap.open .envelope-flap{
    transform: rotateX(-150deg);
    opacity: 0;
  }

  .envelope-wrap.open .envelope-paper{
    top: 20px;
    width: min(600px, 92vw);
    height: min(560px, 70vh);
    z-index: 4;
  }

  .envelope-caption{
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
    transition: opacity 0.3s ease;
  }

  .envelope-wrap.open .envelope-caption{
    opacity: 0;
  }

  /* ---------- VIDEO MESSAGE ---------- */
  #video video{
    width: 100%;
    border-radius: 6px;
    display: block;
  }

  /* ---------- SIDE SPRITES (optional) ---------- */
  .side-sprite{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 0;
    display: none;
  }

  .side-sprite-left{ left: 2.5vw; }
  .side-sprite-right{ right: 2.5vw; }

  @media (min-width: 1180px){
    .side-sprite{ display: block; }
  }

.scrapbook-gallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem 0 1rem;
}

.record-star{
  transition: fill 0.4s ease;
}

.polaroid{
  background: white;
  padding: 0.9rem 0.9rem 2.2rem;
  box-shadow: 0 6px 16px rgba(36,20,23,0.22), 0 2px 4px rgba(36,20,23,0.12);
  margin: -0.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  position: relative;
}

.polaroid img{
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: block;
}

.polaroid::after{
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 46px;
  height: 18px;
  background: var(--tape-color, rgba(255,255,255,0.55));
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.polaroid:hover{
  transform: rotate(0deg) scale(1.08) !important;
  z-index: 20 !important;
  box-shadow: 0 14px 28px rgba(36,20,23,0.32);
}

.polaroid:nth-child(1){ transform: rotate(-6deg) translateY(6px); z-index: 1; --tape-color: var(--rodrigo); }
.polaroid:nth-child(2){ transform: rotate(4deg) translateY(-4px); z-index: 2; --tape-color: #c77e6ae6; }
.polaroid:nth-child(3){ transform: rotate(-3deg) translateY(10px); z-index: 3; --tape-color: #faafabE6; }
.polaroid:nth-child(4){ transform: rotate(6deg) translateY(-8px); z-index: 4; --tape-color: var(--her-blue); }
.polaroid:nth-child(5){ transform: rotate(-8deg) translateY(2px); z-index: 5; --tape-color: #2d9562b3; }
.polaroid:nth-child(6){ transform: rotate(3deg) translateY(8px); z-index: 6; --tape-color: #45312cE6; }
.polaroid:nth-child(7){ transform: rotate(-4deg) translateY(-6px); z-index: 7; --tape-color: #ab767fe6; }
.polaroid:nth-child(8){ transform: rotate(5deg) translateY(4px); z-index: 8; --tape-color: #e3d284e6; }
.polaroid:nth-child(9){ transform: rotate(-6deg) translateY(8px); z-index: 8; --tape-color: #f7d2d0E6; }
.polaroid:nth-child(10){ transform: rotate(6deg) translateY(-4px); z-index: 10; --tape-color:#E60023b3; }
.polaroid:nth-child(11){ transform: rotate(-4deg) translateY(4px); z-index: 10; --tape-color:#f0b8bee6; }
.polaroid:nth-child(12){ transform: rotate(3deg) translateY(-7px); z-index: 10; --tape-color:#aa8551e6; }
.polaroid:nth-child(13){ transform: rotate(8deg) translateY(-9px); z-index: 10; --tape-color:#564244e6; }
.polaroid:nth-child(14){ transform: rotate(-9deg) translateY(6px); z-index: 10; --tape-color:#ffeee8e6; }

/* ---------- MUSIC PLAYLIST SCROLL ---------- */
.playlist{
  max-height: 320px;
  overflow-y: scroll;
  padding-right: 0.5rem;
}

.playlist-item{
  padding-right: 0.75rem;
}

.playlist{
  scrollbar-width: thin;
  scrollbar-color: var(--wine) var(--paper-warm);
}

/* Chrome/Safari/Edge: */
.playlist::-webkit-scrollbar{
  width: 8px;
}

.playlist::-webkit-scrollbar-track{
  background: var(--paper-warm);
  border-radius: 4px;
}

.playlist::-webkit-scrollbar-thumb{
  background: var(--wine);
  border-radius: 4px;
}

/* ---------- POEMS ---------- */
.poem-row{
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 1rem 0.25rem 1.5rem;
  scroll-snap-type: x mandatory;
}

.poem-card{
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--paper-warm);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(36,20,23,0.18);
  cursor: pointer;
  position: relative;
  min-height: 300px;
  overflow: hidden;
  transition: flex-basis 0.4s ease;
  text-align: center;
}

.poem-cover{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  padding: 1.5rem;
  text-align: center;
}

.poem-cover h3{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--wine);
}

.poem-content{
  display: none;
  padding: 1.75rem;
}

.poem-content p{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  line-height: 1.8;
  white-space: pre-line;
  color: var(--ink);
  
}

.poem-card.open{
  flex-basis: 360px;
}

.poem-card.open .poem-cover{
  display: none;
}

.poem-card.open .poem-content{
  display: block;
}

/* ---------- VOICE MESSAGE PROGRESS BAR ---------- */
.vn-info{
  flex: 1;
  min-width: 0;
}

.vn-progress-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.vn-progress-track{
  flex: 1;
  height: 3px;
  background: rgba(110,36,57,0.15);
  border-radius: 2px;
  position: relative;
}

.vn-progress-fill{
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 0%;
  background: var(--wine);
  border-radius: 2px;
}

/* ---------- GALLERY PET SPRITES (chimney + gold) ---------- */
#gallery{
  position: relative;
}

.pet-sprite{
  position: absolute;
  top: 50%;
  width: 110px;
  z-index: 5;
  pointer-events: none;
  image-rendering: pixelated;
}

.pet-sprite-left{
  left: -42px;
  transform: translateY(-50%) rotate(-8deg);
  top: 65%;
}

.pet-sprite-right{
  right: -42px;
  transform: translateY(-50%) rotate(7deg);
  top: 45%;
}

@media (max-width: 540px){
  .pet-sprite{ width: 62px; }
  .pet-sprite-left{ left: -16px; }
  .pet-sprite-right{ right: -16px; }
}


body{
  overflow-x: hidden;
}

.video-container {
  width: 100%;
  max-width: 800px; 
  margin: 0 auto;   
}

.video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}