:root{
  --lav:#cda0f5; --lav2:#ead5ff; --p:#68407e; --ink:#261a2d;
  --deep:#211827; --cream:#fffaf5; --muted:#76687c; --pink:#efa9d2;
  --line:#53386522; --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:linear-gradient(135deg,#c99af4,#ead4ff);font-family:"Space Grotesk",sans-serif;min-height:100vh}
button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
a{text-decoration:none;color:inherit}
.mono{font-family:"DM Mono",monospace;letter-spacing:.06em}
.tiny{font-size:8px}.purple{color:var(--p)}
#flowers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.flower{position:absolute;color:#fff9;font-size:12px;animation:fall linear infinite}
@keyframes fall{from{transform:translateY(-10vh) rotate(0);opacity:0}12%{opacity:1}to{transform:translate(50px,110vh) rotate(360deg);opacity:0}}

.nav{position:sticky;top:10px;z-index:30;width:min(1180px,calc(100% - 28px));margin:10px auto 0;padding:11px 17px;display:flex;justify-content:space-between;align-items:center;background:#fffaf4dc;border:1px solid #fff;border-radius:999px;box-shadow:0 10px 35px #4b2f5b18;backdrop-filter:blur(14px)}
.brand{font:500 17px "DM Mono",monospace}.brand span{color:var(--p)}
.nav-links{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{padding:8px 9px;border-radius:99px;font:8px "DM Mono",monospace}
.nav-links a:hover,.nav-links a.active{background:var(--lav)}

.page{position:relative;z-index:1;width:min(1100px,calc(100% - 34px));margin:auto;padding:85px 0 100px}
.page-head{margin-bottom:35px}.page-head>span{color:var(--p);font:8px "DM Mono",monospace}
.page-head h1{margin:10px 0 8px;font:700 clamp(58px,8vw,100px)/.82 "Cormorant Garamond",serif;letter-spacing:-.04em}
.page-head h1 em{color:var(--p)}.page-head p{max-width:700px;color:var(--muted);line-height:1.6}
.backline{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.btn{border:0;border-radius:999px;padding:12px 17px;font-weight:700;font-size:10px}
.btn.dark{background:var(--deep);color:#fff}.btn.light{background:#fff9;border:1px solid #51345e30}.btn.pink{background:var(--pink);color:var(--deep)}
.btn:hover{transform:translateY(-2px)}

.card{background:#fffaf4bd;border:1px solid #fff;box-shadow:0 22px 60px #42255018}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.paper{padding:28px}.paper-top{display:flex;justify-content:space-between;color:var(--p);font-size:8px}
.quote{padding:30px;background:#fffaf4c5}.quote p{font:600 31px/1.2 "Cormorant Garamond",serif}.quote-mark{font:60px "Cormorant Garamond",serif;color:var(--p)}
.file{padding:24px;background:#fffaf4b8;border:1px solid #fff;box-shadow:0 18px 45px #42255015}
.file .num{color:var(--p);font:8px "DM Mono",monospace}.file h2{font:700 29px "Cormorant Garamond",serif;margin:9px 0}.file p{font-size:12px;line-height:1.65;color:#5e5263}.file small{color:var(--p);font:7px "DM Mono",monospace}
.flower-logo{width:150px;height:150px;border-radius:50%;background:#fffaf4;display:grid;place-items:center;margin:auto;box-shadow:0 22px 60px #42255018;position:relative}
.flower-logo:before{content:"✿";position:absolute;color:var(--p);font-size:60px;top:24px}.flower-logo b{margin-top:35px;font:700 48px "Cormorant Garamond",serif;color:var(--p)}

.home{min-height:calc(100vh - 70px);display:grid;place-items:center;padding-top:40px}
.home-card{width:min(900px,100%);padding:55px;text-align:center;background:#fffaf4d8;border:1px solid #fff;box-shadow:0 30px 90px #42255022}
.home-card .classified{display:inline-block;padding:7px 10px;border:1px dashed var(--p);font:8px "DM Mono",monospace;transform:rotate(-2deg)}
.home-card h1{font:700 clamp(85px,16vw,160px)/.75 "Cormorant Garamond",serif;color:var(--p);margin:25px 0 12px}
.home-card h2{font:600 clamp(28px,4vw,48px)/1 "Cormorant Garamond",serif;margin:0}
.home-card p{max-width:620px;margin:18px auto;color:var(--muted);line-height:1.6}
.home-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.home-link{padding:20px;background:#fff8;border:1px solid #fff;text-align:left;transition:.2s}
.home-link:hover{transform:translateY(-4px);background:#fff}
.home-link b{display:block;font:700 25px "Cormorant Garamond",serif;color:var(--p)}
.home-link span{display:block;margin-top:5px;color:var(--muted);font-size:9px}

.hero-layout{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px}
.hero-layout h1{font-size:clamp(65px,8vw,110px)}
.monogram{width:390px;height:390px;margin:auto;position:relative}.orbit{position:absolute;border:1px solid #68407e30;border-radius:50%}.o1{inset:20px}.o2{inset:70px;border-style:dashed}
.monogram .center{position:absolute;inset:125px;border-radius:50%;background:#fffaf4;display:grid;place-items:center;box-shadow:0 22px 60px #42255018}
.monogram .center span{position:absolute;top:18px;color:var(--p);font-size:45px}.monogram .center b{margin-top:30px;font:700 50px "Cormorant Garamond",serif;color:var(--p)}
.monogram .letters span{position:absolute;width:43px;height:43px;border-radius:50%;background:#fffaf4;display:grid;place-items:center;color:var(--p);font:700 25px "Cormorant Garamond",serif;box-shadow:0 8px 20px #42255018}
.monogram .l{top:0;left:50%;transform:translateX(-50%)}.monogram .a1{right:0;top:50%;transform:translateY(-50%)}.monogram .m{bottom:0;left:50%;transform:translateX(-50%)}.monogram .a2{left:0;top:50%;transform:translateY(-50%)}
.tag{position:absolute;padding:7px 10px;background:#fffaf4e8;border-radius:7px;color:var(--p);font:8px "DM Mono",monospace}.t1{top:18px;right:0}.t2{top:120px;left:0}.t3{bottom:60px;right:5px}.t4{bottom:25px;left:10px}

.traits{display:grid;grid-template-columns:1fr 1fr;gap:11px}.trait{padding:20px;background:#fffaf455;border-top:1px solid #68407e25}.trait span{color:var(--p);font:8px "DM Mono",monospace}.trait h3{font:700 27px "Cormorant Garamond",serif;margin:7px 0}.trait p{font-size:12px;line-height:1.6;color:#5e5263}

.meter{margin:16px 0}.meter-label{display:flex;justify-content:space-between;font:8px "DM Mono",monospace;margin-bottom:6px}.meter-label b{color:var(--p);font-weight:500}.track{height:9px;background:#e5d8ed;border-radius:99px;overflow:hidden}.track i{display:block;height:100%;background:linear-gradient(90deg,var(--p),var(--pink));border-radius:99px}

.initial{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:center;padding:17px 0;border-bottom:1px solid #4b355815}.initial>b{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:var(--lav2);color:var(--p);font:700 27px "Cormorant Garamond",serif}.initial strong{display:block;font:700 20px "Cormorant Garamond",serif}.initial small{color:var(--muted);font-size:9px;line-height:1.4}

.stats-board{max-width:850px;margin:auto;padding:30px;background:#fffdf9;border:1px solid #fff;box-shadow:0 22px 60px #42255018}.stats-header{display:flex;justify-content:space-between;border-bottom:1px solid #4b355820;padding-bottom:13px;color:var(--p);font-size:8px}.stat{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:10px;padding:18px 0;border-bottom:1px solid #4b355815;align-items:center}.stat span,.stat small{font:8px "DM Mono",monospace;color:var(--muted)}.stat strong{font:700 30px "Cormorant Garamond",serif}.conclusion{text-align:center;padding-top:20px}.conclusion span{color:var(--p);font-size:8px}.conclusion p{font:16px/1.5 "Caveat",cursive;color:#5e5263}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.photo{margin:0;padding:10px;background:#fffdf9;box-shadow:0 18px 45px #42255015}.photo-box{aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(140deg,#a86fe0,#e8d3ff);color:#fff;font:10px "DM Mono",monospace;text-align:center}.photo-box small{display:block;font-size:7px;margin-top:5px}.photo figcaption{padding:10px 2px 3px;font:10px "Caveat",cursive;color:#5e5263}

.hotline-page{background:var(--deep);color:#fff;min-height:100vh}.hotline-page .nav{color:var(--ink)}.hotline-page .page-head>span{color:var(--pink)}.hotline-page .page-head h1{color:#fff}.hotline-page .page-head h1 em{color:var(--pink)}.hotline-page .page-head p{color:#cdbed1}
.hotline-box{padding:25px;background:#ffffff09;border:1px solid #fff2;border-radius:18px;max-width:900px}.hotline-top{display:flex;justify-content:space-between;font-size:8px;color:#bdb0c4}.ready{color:#a9efbe}.hotline-box label{display:block;margin:24px 0 8px;color:var(--pink);font:8px "DM Mono",monospace}.hotline-box textarea{width:100%;min-height:190px;padding:16px;resize:vertical;border:1px solid #fff2;border-radius:12px;outline:none;background:#17111e;color:#fff;line-height:1.6}.hotline-box textarea:focus{border-color:#efa9d2aa}.hotline-controls{display:flex;justify-content:space-between;align-items:center;margin-top:11px}.hotline-controls small{color:#766a7d;font:8px "DM Mono",monospace}.solution{margin-top:22px;padding:24px;border-radius:15px;background:var(--cream);color:var(--ink)}.solution-top{display:flex;justify-content:space-between;color:var(--p);font:8px "DM Mono",monospace}.solution h2{color:var(--p);font:700 40px "Cormorant Garamond",serif;margin:15px 0 5px}.solution p{color:#5a4e60;font-size:13px;line-height:1.7}.next{padding:14px;background:#f0e5f7;border-radius:9px}.next span{display:block;color:var(--p);font:8px "DM Mono",monospace}.next strong{display:block;margin-top:5px}.friend{margin:15px 0;color:var(--p);font:21px "Caveat",cursive}

.mission-progress{padding:21px;background:#fffaf4b8;border:1px solid #fff;box-shadow:0 18px 45px #42255015}.project-top{display:flex;justify-content:space-between}.project-top span{color:var(--p);font:8px "DM Mono",monospace}.project-top strong{color:var(--p);font:20px "DM Mono",monospace}.progress{height:11px;background:#e6d8ef;border-radius:99px;overflow:hidden;margin-top:14px}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--p),var(--pink));transition:.5s}.mission{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;margin:9px 0;padding:15px 17px;background:#fffaf4b5;border:1px solid #fff}.mission.locked{opacity:.45}.mission-num{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:var(--lav2);color:var(--p);font:9px "DM Mono",monospace}.mission h2{margin:0;font:700 25px "Cormorant Garamond",serif}.mission p{margin:3px 0;color:var(--muted);font-size:11px}.status{color:var(--p);font:8px "DM Mono",monospace}.small-btn{margin-top:5px;padding:8px 11px;border:0;border-radius:99px;background:var(--lav);font:700 8px "DM Mono",monospace}.complete{margin-top:14px;padding:43px;text-align:center;background:var(--deep);color:#fff}.complete h2{font:700 70px "Cormorant Garamond",serif;margin:5px}.complete span{color:var(--pink);font:8px "DM Mono",monospace}

.last-card{max-width:850px;margin:auto;padding:55px;text-align:center;background:#fffaf4bb;border:1px solid #fff;box-shadow:0 22px 60px #42255018}.last-card h1{font:700 80px "Cormorant Garamond",serif;margin:8px}.last-card p{max-width:650px;margin:18px auto;color:#5c5062;line-height:1.7}.big{margin:34px 0;color:var(--p);font:700 clamp(42px,6vw,68px)/.9 "Cormorant Garamond",serif}.video{margin-top:35px;padding-top:22px;border-top:1px dashed #0002}.video>span{color:var(--p);font:8px "DM Mono",monospace}.video video{width:100%;margin-top:10px;border-radius:12px;background:var(--deep)}

footer{width:min(1100px,calc(100% - 34px));margin:auto;padding:30px 0 45px;display:flex;justify-content:space-between;color:#514455;font:8px "DM Mono",monospace}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#1c142299;backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(500px,100%);padding:33px;border-radius:18px;background:var(--cream);box-shadow:0 30px 90px #0005}.modal-card .close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:27px}.modal-card>span{color:var(--p);font:8px "DM Mono",monospace}.modal-card h2{font:700 42px "Cormorant Garamond",serif;margin:8px 0}.modal-card p{color:var(--muted);line-height:1.5}.modal-card label{display:block;margin:18px 0 7px;font-size:8px}.modal-card input:not([type=checkbox]){width:100%;padding:12px;border:1px solid #0002;border-radius:8px;text-transform:uppercase;font-family:"DM Mono",monospace}.check{display:flex!important;gap:8px;align-items:center}.error{min-height:17px;margin-top:7px;color:#a24d7d;font-size:8px}

@media(max-width:900px){.grid2,.hero-layout{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}.monogram{width:320px;height:320px}.home-links{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.nav-links{display:none}.page{padding-top:60px}.home-card{padding:35px 18px}.home-links,.grid3,.photo-grid,.traits{grid-template-columns:1fr}.page-head h1{font-size:58px}.monogram{width:280px;height:280px}.monogram .center{inset:90px}.monogram .letters span{width:35px;height:35px;font-size:20px}.stat{grid-template-columns:1fr 1fr}.stat small{grid-column:2}.mission{grid-template-columns:45px 1fr}.mission>div:last-child{grid-column:2}footer{display:block}.last-card{padding:35px 20px}}
/* =========================================
   LAMA ORBIT ANIMATION
   ========================================= */

/* Outer circle slowly rotates and breathes */
.monogram .o1 {
  animation: orbitOuter 12s ease-in-out infinite;
  transform-origin: center;
}

/* Inner dashed circle moves in the opposite direction */
.monogram .o2 {
  animation: orbitInner 8s ease-in-out infinite;
  transform-origin: center;
}


/* Outer circle movement */
@keyframes orbitOuter {

  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(90deg) scale(1.025);
  }

  50% {
    transform: rotate(180deg) scale(1);
  }

  75% {
    transform: rotate(270deg) scale(1.025);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }

}


/* Inner circle moves opposite */
@keyframes orbitInner {

  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(-90deg) scale(0.97);
  }

  50% {
    transform: rotate(-180deg) scale(1);
  }

  75% {
    transform: rotate(-270deg) scale(0.97);
  }

  100% {
    transform: rotate(-360deg) scale(1);
  }

}


/* =========================================
   MAKE THE L / A / M / A LETTERS FLOAT
   ========================================= */

.monogram .letters span {
  animation: letterFloat 4s ease-in-out infinite;
}


/* Each letter gets a slightly different timing */

.monogram .letters .l {
  animation-delay: 0s;
}

.monogram .letters .a1 {
  animation-delay: -1s;
}

.monogram .letters .m {
  animation-delay: -2s;
}

.monogram .letters .a2 {
  animation-delay: -3s;
}


@keyframes letterFloat {

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

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

}


/* =========================================
   PERSONALITY TAGS FLOAT SLIGHTLY
   ========================================= */

.monogram .tag {
  animation: tagFloat 5s ease-in-out infinite;
}

.monogram .t1 {
  animation-delay: -0.5s;
}

.monogram .t2 {
  animation-delay: -1.7s;
}

.monogram .t3 {
  animation-delay: -2.8s;
}

.monogram .t4 {
  animation-delay: -4s;
}


@keyframes tagFloat {

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

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

}


/* =========================================
   CENTER L HAS A VERY SUBTLE PULSE
   ========================================= */

.monogram .center {
  animation: centerPulse 4s ease-in-out infinite;
}


@keyframes centerPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }

}


/* =========================================
   ACCESSIBILITY
   Stop animations if the user prefers
   reduced motion.
   ========================================= */

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

  .monogram .o1,
  .monogram .o2,
  .monogram .letters span,
  .monogram .tag,
  .monogram .center {
    animation: none;
  }

}
/* =========================================
   LAMA PROFILE CARD
   ========================================= */

.profile-card {
  width: min(380px, 100%);
  margin: auto;
  padding: 22px;
  background: #fffaf4d8;
  border: 1px solid #fff;
  border-radius: 24px;
  box-shadow: 0 25px 70px #42255020;
  position: relative;
  overflow: hidden;
}


/* Top */

.profile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: var(--p);
  font: 8px "DM Mono", monospace;

  letter-spacing: .05em;
}

.profile-status {
  color: #62a978;
}


/* Photo */

.profile-photo {
  width: 100%;
  aspect-ratio: 4 / 5;

  margin-top: 18px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #cda0f5,
      #ead5ff
    );

  border-radius: 18px;

  border: 1px solid #fff;

  position: relative;
}


.profile-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform .6s ease;
}


.profile-photo:hover img {
  transform: scale(1.04);
}


/* Name */

.profile-name {
  text-align: center;
  margin-top: 18px;
}


.profile-name h2 {
  margin: 0;

  font: 700 42px
    "Cormorant Garamond",
    serif;

  color: var(--ink);
}


.profile-name span {
  display: block;

  margin-top: 2px;

  color: var(--p);

  font: 8px
    "DM Mono",
    monospace;

  letter-spacing: .08em;
}


/* Tags */

.profile-tags {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 15px;
}


.profile-tags span {
  padding: 7px 9px;

  border-radius: 999px;

  background: var(--lav2);

  color: var(--p);

  font: 7px
    "DM Mono",
    monospace;
}


/* Personal note */

.profile-note {
  margin-top: 18px;

  padding-top: 15px;

  border-top: 1px dashed #68407e35;

  text-align: center;
}


.profile-note > span {
  color: var(--p);

  font: 7px
    "DM Mono",
    monospace;

  letter-spacing: .08em;
}


.profile-note p {
  margin: 8px auto 0;

  max-width: 280px;

  color: var(--muted);

  font: 13px/1.5
    "Caveat",
    cursive;
}


/* Small floating detail */

.profile-card::after {
  content: "L";

  position: absolute;

  right: -20px;
  bottom: -35px;

  font: 120px
    "Cormorant Garamond",
    serif;

  color: #68407e0b;

  pointer-events: none;
}

/* =========================================================
   HOTLINE — FROM ME
   ========================================================= */

.from-me {
    margin-top: 24px;
    padding: 18px 20px;
    border-left: 2px solid var(--p);
    background: rgba(255, 255, 255, 0.025);
}

.from-me-label {
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--p);
    margin-bottom: 8px;
}

.from-me p {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
    font-family: "Caveat", cursive;
    font-size: 21px;
}


/* =========================================================
   HOTLINE — CALL ME NOW
   ========================================================= */

.call-me {
    margin-top: 20px;
    padding: 42px 30px;
    border: 1px solid rgba(190, 130, 190, 0.45);
    background: rgba(255, 255, 255, 0.035);
    text-align: center;
}

.call-me-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--p);
    margin-bottom: 20px;
}

.call-me h2 {
    margin: 0 0 20px;
    font-family: "Cormorant Garamond", serif;
    font-size: 64px;
    line-height: 0.9;
}

.call-me p {
    max-width: 500px;
    margin: 0 auto 22px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
}

.call-note {
    max-width: 500px;
    margin: 0 auto 30px;
    font-family: "Caveat", cursive;
    font-size: 24px;
    line-height: 1.3;
}


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

.hidden {
    display: none !important;
}


/* =========================================================
   STATUS
   ========================================================= */

#status {
    transition: 0.3s ease;
}

#status:not(.ready) {
    color: var(--p);
}


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

@media (max-width: 700px) {

    .call-me {
        padding: 32px 20px;
    }

    .call-me h2 {
        font-size: 48px;
    }

    .from-me p {
        font-size: 19px;
    }

}
/* =========================================================
   PROJECT — PERSONAL MESSAGE
========================================================= */

.project-message {
    margin-top: 18px;
    padding: 30px 32px;

    border: 1px solid rgba(190, 130, 190, 0.35);

    background: rgba(255, 255, 255, 0.035);

    position: relative;

    overflow: hidden;

    animation: messageIn 0.55s ease;
}


.project-message::before {

    content: "✿";

    position: absolute;

    right: 28px;
    top: 14px;

    font-size: 42px;

    opacity: 0.12;

}


.project-message-label {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--p);

    margin-bottom: 13px;

}


.project-message h2 {

    margin: 0 0 12px;

    font-family: "Cormorant Garamond", serif;

    font-size: 44px;

    line-height: 1;

}


.project-message p {

    margin: 0;

    max-width: 700px;

    color: var(--muted);

    line-height: 1.75;

    font-size: 14px;

}


.message-signature {

    margin-top: 18px;

    font-family: "Caveat", cursive;

    font-size: 23px;

}


@keyframes messageIn {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   PROJECT PHASE CARDS
========================================================= */

.mission {

    position: relative;

    padding: 23px;

    margin-bottom: 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.025);

    transition: 0.25s ease;

}


.mission:hover {

    border-color: rgba(190, 130, 190, 0.3);

    transform: translateY(-1px);

}


.mission.completed {

    opacity: 0.65;

}


.mission-number {

    font-family: "DM Mono", monospace;

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--p);

    margin-bottom: 7px;

}


.mission-title {

    font-family: "Cormorant Garamond", serif;

    font-size: 31px;

    margin-bottom: 5px;

}


.mission-description {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;

    max-width: 650px;

}


.mission-button {

    margin-top: 16px;

    padding: 9px 15px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: transparent;

    color: inherit;

    font-family: "DM Mono", monospace;

    font-size: 8px;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.2s ease;

}


.mission-button:hover {

    background: rgba(255, 255, 255, 0.07);

}


.mission.completed .mission-button {

    opacity: 0.6;

}


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

@media (max-width: 700px) {

    .project-message {

        padding: 25px 20px;

    }


    .project-message h2 {

        font-size: 36px;

    }


    .project-message p {

        font-size: 13px;

    }


    .mission-title {

        font-size: 27px;

    }


}
/* =========================================================
   PROJECT MODE
========================================================= */

.project-page {
    min-height: 100vh;
}


/* =========================================================
   PROJECT MAIN
========================================================= */

.project-page-content {
    position: relative;
    z-index: 1;

    width: min(900px, calc(100% - 34px));

    margin: 0 auto;

    padding: 55px 0 80px;
}


/* =========================================================
   HEADING
========================================================= */

.project-heading {
    margin-bottom: 30px;
}


.project-code {
    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 7px;

    letter-spacing: 1.5px;

    margin-bottom: 7px;
}


.project-heading h1 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(55px, 8vw, 82px);

    line-height: .82;

    letter-spacing: -.04em;

    color: var(--ink);
}


.project-heading p {
    margin: 13px 0 0;

    color: var(--muted);

    font-family: "Space Grotesk", sans-serif;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   STATUS BOX
========================================================= */

.project-status {
    padding: 17px 20px;

    background: #fffaf4c9;

    border: 1px solid #fff;

    border-radius: 10px;

    box-shadow: 0 15px 35px #42255012;

    margin-bottom: 9px;
}


.project-status-top {
    display: flex;

    justify-content: space-between;

    align-items: center;
}


.status-label {
    display: block;

    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 6px;

    letter-spacing: 1px;

    margin-bottom: 3px;
}


.status-title {
    font-family: "Cormorant Garamond", serif;

    font-size: 16px;

    font-weight: 600;
}


.status-count {
    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 11px;
}


.project-progress {
    height: 7px;

    margin-top: 13px;

    background: #e5d9ed;

    border-radius: 999px;

    overflow: hidden;
}


.project-progress div {
    width: 0;

    height: 100%;

    background: linear-gradient(
        90deg,
        var(--p),
        var(--pink)
    );

    border-radius: 999px;

    transition: width .5s ease;
}


/* =========================================================
   PHASE LIST
========================================================= */

.phases {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


/* =========================================================
   PHASE ROW
========================================================= */

.project-phase {
    display: grid;

    grid-template-columns: 38px minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    min-height: 61px;

    padding: 9px 11px;

    background: #fffaf4b8;

    border: 1px solid #fff;

    border-radius: 9px;

    box-shadow: 0 10px 25px #4225500d;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.project-phase:hover:not(.locked) {
    transform: translateY(-2px);

    box-shadow: 0 14px 30px #42255015;
}


/* =========================================================
   PHASE NUMBER
========================================================= */

.phase-number {
    width: 29px;

    height: 29px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background: var(--lav2);

    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 7px;
}


/* =========================================================
   PHASE INFO
========================================================= */

.phase-info {
    min-width: 0;
}


.phase-title {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 17px;

    line-height: 1;

    font-weight: 600;
}


.phase-description {
    margin: 3px 0 0;

    color: var(--muted);

    font-family: "Space Grotesk", sans-serif;

    font-size: 7px;

    line-height: 1.4;
}


/* =========================================================
   PHASE RIGHT SIDE
========================================================= */

.phase-right {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 5px;
}


.phase-tag {
    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 5px;

    letter-spacing: .5px;
}


.phase-button {
    border: 0;

    padding: 6px 10px;

    border-radius: 999px;

    background: var(--pink);

    color: var(--deep);

    font-family: "DM Mono", monospace;

    font-size: 6px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


.phase-button:hover {
    transform: translateY(-1px);

    filter: brightness(1.03);
}


/* =========================================================
   LOCKED PHASE
========================================================= */

.project-phase.locked {
    opacity: .48;
}


.project-phase.locked .phase-number {
    background: #e9e0ed;

    color: #8c7d91;
}


.project-phase.locked .phase-button {
    background: #e7dfea;

    color: #8b7b90;

    cursor: not-allowed;
}


/* =========================================================
   COMPLETED PHASE
========================================================= */

.project-phase.completed {
    background: #fffaf4a0;
}


.project-phase.completed .phase-number {
    background: var(--p);

    color: white;
}


.project-phase.completed .phase-button {
    background: #ded1e6;

    color: var(--p);

    cursor: pointer;
}


/* =========================================================
   PERSONAL MESSAGE
========================================================= */

.project-message {
    position: relative;

    margin-bottom: 9px;

    padding: 22px 24px;

    background: #fffaf4e5;

    border: 1px solid #fff;

    border-radius: 10px;

    box-shadow: 0 15px 40px #42255018;

    animation: projectMessageIn .5s ease;
}


.project-message::after {
    content: "✿";

    position: absolute;

    right: 18px;

    top: 12px;

    color: var(--p);

    font-size: 26px;

    opacity: .12;
}


.message-label {
    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 6px;

    letter-spacing: 1.5px;

    margin-bottom: 8px;
}


.project-message h2 {
    margin: 0 0 8px;

    color: var(--ink);

    font-family: "Cormorant Garamond", serif;

    font-size: 30px;

    line-height: 1;
}


.project-message p {
    max-width: 700px;

    margin: 0;

    color: var(--muted);

    font-family: "Space Grotesk", sans-serif;

    font-size: 9px;

    line-height: 1.7;
}


.message-signature {
    margin-top: 10px;

    color: var(--p);

    font-family: "Caveat", cursive;

    font-size: 18px;
}


@keyframes projectMessageIn {

    from {
        opacity: 0;

        transform: translateY(-8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.final-message {
    margin-top: 9px;

    padding: 40px 25px;

    text-align: center;

    background: var(--deep);

    color: white;

    border-radius: 10px;

    animation: projectMessageIn .6s ease;
}


.final-small {
    color: var(--pink);

    font-family: "DM Mono", monospace;

    font-size: 7px;

    letter-spacing: 1.5px;
}


.final-message h2 {
    margin: 5px 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 65px;

    line-height: .9;
}


.final-message p {
    margin: 12px auto 18px;

    max-width: 430px;

    color: #d5c8d8;

    font-size: 10px;

    line-height: 1.6;
}


.final-heart {
    margin-bottom: 17px;

    color: var(--pink);

    font-size: 25px;
}


.final-button {
    display: inline-block;

    padding: 10px 15px;

    border-radius: 999px;

    background: var(--pink);

    color: var(--deep);

    font-family: "DM Mono", monospace;

    font-size: 7px;

    font-weight: 700;
}


/* =========================================================
   MODAL
========================================================= */

.phase-modal {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: grid;

    place-items: center;

    padding: 20px;

    background: #211827aa;

    backdrop-filter: blur(8px);
}


.phase-modal-card {
    position: relative;

    width: min(430px, 100%);

    padding: 28px;

    background: var(--cream);

    border-radius: 14px;

    box-shadow: 0 30px 80px #0005;

    animation: projectMessageIn .3s ease;
}


.modal-close {
    position: absolute;

    top: 8px;

    right: 12px;

    border: 0;

    background: none;

    color: var(--ink);

    font-size: 25px;

    cursor: pointer;
}


.modal-code {
    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 7px;

    letter-spacing: 1px;
}


.phase-modal-card h2 {
    margin: 8px 0;

    color: var(--ink);

    font-family: "Cormorant Garamond", serif;

    font-size: 36px;

    line-height: 1;
}


.phase-modal-card p {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;
}


.phase-modal-card label:not(.confirmation) {
    display: block;

    margin-bottom: 6px;

    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 7px;
}


.phase-modal-card input[type="text"] {
    width: 100%;

    padding: 11px;

    border: 1px solid #0002;

    border-radius: 7px;

    outline: none;

    background: white;

    color: var(--ink);

    font-family: "DM Mono", monospace;

    font-size: 10px;

    text-transform: uppercase;
}


.phase-modal-card input[type="text"]:focus {
    border-color: var(--p);
}


.confirmation {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    color: var(--muted);

    font-size: 8px;

    cursor: pointer;
}


.confirmation input {
    accent-color: var(--p);
}


.verify-button {
    width: 100%;

    margin-top: 15px;

    padding: 11px;

    border: 0;

    border-radius: 999px;

    background: var(--deep);

    color: white;

    font-family: "DM Mono", monospace;

    font-size: 7px;

    font-weight: 700;

    cursor: pointer;
}


.verify-button:hover {
    transform: translateY(-1px);
}


.modal-error {
    min-height: 15px;

    margin-top: 7px;

    color: #a24d7d;

    font-family: "DM Mono", monospace;

    font-size: 7px;
}


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

@media (max-width: 650px) {

    .project-page-content {
        padding-top: 45px;
    }


    .project-phase {
        grid-template-columns: 32px minmax(0, 1fr) auto;

        gap: 8px;

        padding: 8px;
    }


    .phase-number {
        width: 27px;
        height: 27px;
    }


    .phase-title {
        font-size: 15px;
    }


    .phase-description {
        font-size: 6px;
    }


    .phase-button {
        padding: 6px 8px;

        font-size: 5px;
    }


    .project-message {
        padding: 20px;
    }


    .project-message h2 {
        font-size: 27px;
    }


    .project-message p {
        font-size: 8px;
    }

}
.confirmation {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 16px;

    color: var(--muted);

    font-family: "Caveat", cursive;
    font-size: 19px;

    cursor: pointer;

    user-select: none;
}

.confirmation input {
    appearance: none;

    width: 19px;
    height: 19px;

    flex-shrink: 0;

    border: 1.5px solid var(--p);
    border-radius: 4px;

    background: transparent;

    cursor: pointer;

    position: relative;

    transition: 0.2s ease;
}

.confirmation input:checked {
    background: var(--p);
    transform: scale(1.05);
}

.confirmation input:checked::after {
    content: "✓";

    position: absolute;

    left: 3px;
    top: -2px;

    color: white;

    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.confirmation:has(input:checked) {
    color: var(--p);
}
.project-intro-message {
    margin: -10px 0 28px;
    padding: 18px 20px;

    max-width: 760px;

    border-left: 2px solid var(--p);

    background: rgba(255, 250, 244, 0.35);
}


.project-intro-label {
    margin-bottom: 8px;

    color: var(--p);

    font-family: "DM Mono", monospace;

    font-size: 7px;

    letter-spacing: 1.5px;
}


.project-intro-message p {
    margin: 0 0 8px;

    color: var(--muted);

    font-family: "Space Grotesk", sans-serif;

    font-size: 9px;

    line-height: 1.7;
}


.project-intro-message p:last-child {
    margin-bottom: 0;
}
/* =========================================
   LILY BACKGROUND FLOWERS
========================================= */

#flowers {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    pointer-events: none;
    overflow: hidden;

    z-index: 0;
}

.flower {
    position: absolute;

    top: -30px;

    display: block;

    color: rgba(186, 174, 192, 0.28);

    font-size: 10px;
    line-height: 1;

    pointer-events: none;

    animation-name: lilyFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    will-change: transform, opacity;
}

@keyframes lilyFall {

    0% {
        transform:
            translate3d(0, -40px, 0)
            rotate(0deg);

        opacity: 0;
    }

    10% {
        opacity: 0.35;
    }

    50% {
        transform:
            translate3d(25px, 50vh, 0)
            rotate(180deg);

        opacity: 0.28;
    }

    90% {
        opacity: 0.18;
    }

    100% {
        transform:
            translate3d(-20px, 110vh, 0)
            rotate(360deg);

        opacity: 0;
    }
}