:root{
  --gold:#f2d28b;
  --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Georgia, serif;
  color:#fff;
  background:#000;
  overflow-x:hidden;
}
.bg{
  position:fixed; inset:0;
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.70)),
    url('../img/bg.jpg') center/cover no-repeat;
  z-index:-2;
}
.vignette{
  position:fixed; inset:0;
  background: radial-gradient(circle at 50% 20%, rgba(0,0,0,.12), rgba(0,0,0,.82) 74%);
  z-index:-1;
  pointer-events:none;
}
.page{
  min-height:100vh;
  padding-bottom: calc(170px + var(--safe));
}
header{
  max-width:1100px;
  margin:0 auto;
  padding: 18px 16px 6px;
}
.card{
  text-align:center;
  padding: 16px 16px 12px;
  border-radius:22px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
h1{margin:0;font-size: clamp(26px, 3.6vw, 40px);}
.date{
  margin-top:8px;
  color:var(--gold);
  letter-spacing:.22em;
  font-size:12px;
  text-transform:uppercase;
}
.quote{margin-top:10px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.92);}
.instructions{
  margin-top:8px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.section{
  max-width:1100px;
  margin:0 auto;
  padding: 10px 16px 18px;
}
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 34px 22px;
  justify-items:center;
  margin-top: 10px;
}
@media(min-width:620px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media(min-width:980px){ .grid{ grid-template-columns: repeat(3, 1fr);} }

/* DETAILS item */
.item{
  position:relative;
  width: 320px;
  max-width: 86vw;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.80));
}
.item[aria-disabled="true"]{ opacity:.45; filter: drop-shadow(0 26px 56px rgba(0,0,0,.35)); }
.item summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.item summary::-webkit-details-marker{ display:none; }
.item summary:focus{ outline:none; }

.num{
  position:absolute;
  top:-14px; right:-14px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 11px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.10em;
  color: var(--gold);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  z-index:5;
}

/* Envelope stack */
.envWrap{ position:relative; }
.envSizer{ width:100%; display:block; visibility:hidden; }
.envImg{
  position:absolute; inset:0;
  width:100%;
  display:block;
  transition: opacity .18s ease, transform .40s ease;
  transform-origin:50% 70%;
}
.envImg.opened{ opacity:0; transform: translateY(18px) scale(.95); }
.envImg.closed{ opacity:1; transform: scale(1); }

.item[open] .envImg.closed{ opacity:0; transform: scale(.95); }
.item[open] .envImg.opened{ opacity:1; transform: translateY(0) scale(1); }
.item[open] .envWrap{ animation: pop .40s ease-out; }
@keyframes pop{ 0%{transform:scale(1)} 50%{transform:scale(1.07)} 100%{transform:scale(1)} }

/* SUPER BRIGHT sparkles */
.envWrap::after{
  content:"";
  position:absolute;
  left:50%; top:45%;
  width:12px; height:12px;
  background:#fff;
  border-radius:50%;
  opacity:0;
  transform: translate(-50%,-50%) scale(.5);
  box-shadow:
    -80px -30px 0 #fff,
    -40px -80px 0 #fff4c2,
    0px -100px 0 #ffe9a6,
    60px -80px 0 #fff4c2,
    90px -20px 0 #fff,
    -70px 20px 0 #ffe9a6,
    70px 20px 0 #ffe9a6,
    -18px -46px 0 #fff,
    22px -46px 0 #fff4c2;
}
.item[open] .envWrap::after{
  opacity:1;
  animation: spark 1s ease-out both;
}
@keyframes spark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  50%{opacity:1;transform:translate(-50%,-110%) scale(1.6)}
  100%{opacity:0;transform:translate(-50%,-170%) scale(2)}
}

/* STRONG petals */
.envWrap::before{
  content:"";
  position:absolute;
  left:50%; top:40%;
  width:14px; height:20px;
  background:#ffd6e6;
  border-radius:60% 40% 70% 30% / 60% 60% 40% 40%;
  opacity:0;
  transform: translate(-50%,-50%) scale(.8);
  box-shadow:
    -40px -20px 0 #ffe4ef,
    40px -20px 0 #ffe4ef,
    -70px 10px 0 #ffd6e6,
    70px 10px 0 #ffd6e6,
    -10px -60px 0 #ffe4ef,
    14px -60px 0 #ffd6e6;
}
.item[open] .envWrap::before{
  opacity:1;
  animation: petals 1.2s ease-out both;
}
@keyframes petals{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}
  50%{opacity:1;transform:translate(-50%,-110%) scale(1.4)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1.6)}
}

/* Player */
.player{
  position:fixed; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.78);
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  padding: 14px 16px calc(14px + var(--safe));
}
.inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.btn{
  width:40px;height:40px;border-radius:50%;
  border:none;background:var(--gold);color:#15120f;
  font-weight:800;cursor:pointer;
}
.btn:disabled{opacity:.5; cursor:default;}
.range{flex:1;min-width:220px;accent-color:var(--gold);}
.time{font-size:12px;min-width:90px;text-align:right;color:rgba(255,255,255,.76);}
.download{
  color:#fff;text-decoration:none;font-size:13px;
  border:1px solid rgba(255,255,255,.22);
  padding:8px 12px;border-radius:16px;
  white-space:nowrap;
}


/* ===== CSS AUTO-CLOSE (visual) =====
   Even if Safari blocks JS timers on file://,
   the envelope will *visually* close ~2s after opening. */
.item[open] .envImg.opened{
  animation: openedAutoClose 2.05s ease-in-out forwards;
}
.item[open] .envImg.closed{
  animation: closedAutoClose 2.05s ease-in-out forwards;
}

@keyframes openedAutoClose{
  0%{opacity:1; transform: translateY(0) scale(1);}
  70%{opacity:1; transform: translateY(0) scale(1);}
  100%{opacity:0; transform: translateY(18px) scale(.95);}
}
@keyframes closedAutoClose{
  0%{opacity:0; transform: scale(.95);}
  70%{opacity:0; transform: scale(.95);}
  100%{opacity:1; transform: scale(1);}
}
/* stop sparkles/petals after close moment */
.item[open] .envWrap::after{ animation-duration: 1.2s; }
.item[open] .envWrap::before{ animation-duration: 1.3s; }


/* ===== PREMIUM TYPOGRAPHY ===== */

h1{
  font-family: 'Playfair Display', serif;
  letter-spacing: .04em;
}

.date{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
}

.main-quote{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px;
  margin-top:12px;
}

.sub-quote{
  font-family: 'Cormorant Garamond', serif;
  font-size:18px;
  max-width:760px;
  margin:14px auto 0 auto;
  line-height:1.6;
  color:rgba(255,255,255,.92);
}

.divider{
  width:60px;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  margin:14px auto 0 auto;
  opacity:.8;
}

/* ===== SIGNATURE SECTION ===== */
.signature{
  padding: 18px 20px 32px;
  text-align:center;
}

.signature-inner{
    max-width:800px;
    margin:0 auto;
}

.sig-line{
    width:80px;
    height:1px;
    background:linear-gradient(to right, transparent, var(--gold), transparent);
    margin:0 auto 18px auto;
}

.sig-text{
    font-family:'Cormorant Garamond', serif;
    font-size:18px;
    color:rgba(255,255,255,.75);
    margin-bottom:12px;
}

.sig-name{
    font-family:'Playfair Display', serif;
    font-size:34px;
    font-style:italic;
    letter-spacing:.04em;
}

.sig-role{
    font-family:'Cormorant Garamond', serif;
    font-size:14px;
    letter-spacing:.25em;
    text-transform:uppercase;
    margin-top:6px;
    opacity:.85;
}

.sig-links{
    margin-top:28px;
    font-family:ui-sans-serif, system-ui;
    font-size:14px;
}

.sig-links a{
    color:white;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.3);
    padding-bottom:2px;
}

.sig-links span{
    margin:0 10px;
    opacity:.6;
}

.sig-links a:hover{
    opacity:.7;
}


/* Gold decorative lines around Audio Booth */
.sig-role-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:10px;
}

.sig-gold-line{
    width:50px;
    height:1px;
    background:linear-gradient(to right, transparent, var(--gold), transparent);
}

.sig-role{
    font-family:'Cormorant Garamond', serif;
    font-size:14px;
    letter-spacing:.25em;
    text-transform:uppercase;
    opacity:.9;
}


/* ===== PLAYING HIGHLIGHT (elegant halo) ===== */
.item.playing{
  transform: translateY(-6px);
  transition: transform .25s ease;
  filter: drop-shadow(0 34px 80px rgba(0,0,0,.82));
}
.item.playing .envWrap{
  animation: playingPulse 1.9s ease-in-out infinite;
}
.item.playing .envWrap::after{
  opacity: .55;
  animation: playingHalo 1.9s ease-in-out infinite;
}
@keyframes playingPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.015); }
}
@keyframes playingHalo{
  0%,100%{
    transform: translate(-50%,-52%) scale(1.05);
    filter: blur(.2px);
  }
  50%{
    transform: translate(-50%,-58%) scale(1.18);
    filter: blur(.45px);
  }
}