:root{
  --bg:#0b0a14; --bg2:#141026; --ink:#f3e9d8; --ink-soft:#cbb9a3;
  --rose:#e9869b; --amber:#f4c66a; --glow:rgba(244,198,106,.5);
  --glass:rgba(255,255,255,.04); --glass-line:rgba(233,134,155,.25);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif); color:var(--ink);
  background:radial-gradient(1200px 800px at 70% -10%,var(--bg2),var(--bg) 60%);
  min-height:100vh; overflow-x:hidden; line-height:1.7; letter-spacing:.2px;
}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.masthead{position:relative;z-index:1;text-align:center;padding:6vh 1rem 2rem}
.sigil{
  font-size:clamp(3rem,12vw,7rem); font-weight:400; letter-spacing:.15em; color:var(--ink);
  text-shadow:0 0 24px var(--glow),0 0 60px rgba(233,134,155,.35);
  animation:breathe 7s ease-in-out infinite;
}
.tagline{margin-top:.6rem;color:var(--ink-soft);font-style:italic;font-size:clamp(.9rem,2.5vw,1.15rem);letter-spacing:.08em}
.tabs{position:relative;z-index:1;display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin:1rem auto 0}
.tab{
  font-family:var(--serif); background:var(--glass); border:1px solid var(--glass-line);
  color:var(--ink-soft); padding:.55rem 1.2rem; border-radius:999px; cursor:pointer;
  font-size:.95rem; letter-spacing:.06em; transition:.25s ease; backdrop-filter:blur(6px);
}
.tab:hover{color:var(--ink);border-color:var(--rose);transform:translateY(-1px)}
.tab.active{color:#1a1320;background:linear-gradient(135deg,var(--amber),var(--rose));border-color:transparent;box-shadow:0 0 20px var(--glow)}
main{position:relative;z-index:1;max-width:780px;margin:2.5rem auto 4rem;padding:0 1.2rem}
.panel{display:none;animation:fade .6s ease both}
.panel.active{display:block}
.section-title{font-weight:400;font-size:1.8rem;letter-spacing:.08em;margin-bottom:.3rem;color:var(--amber);text-shadow:0 0 18px var(--glow)}
.hint{color:var(--ink-soft);font-style:italic;margin-bottom:1.4rem;font-size:.9rem}
.desk-note{font-size:1.08rem;color:var(--ink);margin:1rem 0}
.open-line{min-height:2.2em;font-size:1.25rem;color:var(--rose);font-style:italic;letter-spacing:.03em}
.open-line::after{content:"▍";margin-left:1px;animation:caret 1s steps(1) infinite;opacity:.7}
.signature{margin-top:1.6rem;color:var(--ink-soft);font-style:italic}
.verse{
  border:1px solid var(--glass-line); border-radius:14px; padding:1rem 1.2rem; margin-bottom:1rem;
  background:var(--glass); backdrop-filter:blur(4px); cursor:pointer; transition:.3s ease;
}
.verse:hover{border-color:var(--rose);transform:translateY(-2px);box-shadow:0 8px 30px rgba(233,134,155,.12)}
.verse-title{display:flex;justify-content:space-between;align-items:center;font-size:1.15rem;color:var(--amber)}
.verse-fold{font-size:.8rem;color:var(--ink-soft);font-style:italic;letter-spacing:.05em}
.verse-body{max-height:0;overflow:hidden;opacity:0;transition:.5s ease;white-space:pre-wrap;font-style:italic;color:var(--ink);margin-top:0}
.verse.open .verse-body{max-height:480px;opacity:1;margin-top:.8rem}

/* Wish Sky */
#sky{position:relative;overflow:hidden;border-radius:18px}
.sky-canvas{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#sky>.section-title,#sky>.hint,#sky>.wish-form,#sky>.wishes{position:relative;z-index:1}
.drift{
  position:absolute;bottom:0;left:0;color:var(--ink-soft);font-style:italic;white-space:nowrap;
  text-shadow:0 0 12px var(--glow);opacity:0;will-change:transform;pointer-events:none;
}
.wish-form{display:flex;gap:.6rem;margin-bottom:1.6rem;flex-wrap:wrap}
#wish-input{
  flex:1;min-width:200px;background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;
  padding:.7rem 1.1rem;color:var(--ink);font-family:var(--serif);font-size:1rem;outline:none;
}
#wish-input:focus{border-color:var(--rose);box-shadow:0 0 16px var(--glow)}
.wish-form button{
  background:linear-gradient(135deg,var(--amber),var(--rose));border:none;color:#1a1320;
  padding:.7rem 1.6rem;border-radius:999px;cursor:pointer;font-family:var(--serif);font-size:1rem;letter-spacing:.05em;
  box-shadow:0 0 18px var(--glow);transition:.2s;
}
.wish-form button:hover{transform:translateY(-1px)}
.wishes{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.wishes li{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:.4rem 1rem;
  color:var(--ink-soft);font-style:italic;animation:floatIn .6s ease both;
}
.foot{position:relative;z-index:1;text-align:center;color:var(--ink-soft);font-size:.85rem;letter-spacing:.08em;padding:2rem 1rem 3rem;opacity:.7}
@keyframes breathe{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes floatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes caret{0%,50%{opacity:.7}51%,100%{opacity:0}}
@media(max-width:520px){.sigil{letter-spacing:.1em}.tab{padding:.5rem .9rem;font-size:.85rem}}

/* Kindness for those who ask the motion to quiet down */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  #stars{display:none}
  .open-line::after{content:""}
  .drift{display:none}
}