@font-face{font-family:Lilita;src:url('./assets/lilita-one.ttf') format('truetype');font-display:swap}
@font-face{font-family:Caveat;src:url('./assets/caveat.ttf') format('truetype');font-display:swap;font-weight:600}
:root{color-scheme:light;--pink:#f8c2c5;--cocoa:#451c11;--berry:#c73862;font-family:Arial,Helvetica,sans-serif;color:var(--cocoa);background:var(--pink)}
*{box-sizing:border-box}html{height:100%;overflow:hidden}body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}
.construction{position:relative;flex:1;min-height:0;isolation:isolate;display:flex;justify-content:center;background:#f9e8df url('./assets/cruje-world.png') center center/cover no-repeat;container-type:size;overflow:hidden}
.construction:after{content:'';position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(transparent,var(--pink));z-index:-1}
.hero-copy{width:56%;text-align:center;align-self:flex-start;display:flex;flex-direction:column;align-items:center;padding-top:clamp(8px,2cqh,24px);gap:clamp(5px,1.3cqh,12px)}
.brand{font-family:Lilita,Arial,sans-serif;font-size:clamp(38px,15cqh,108px);line-height:.95;margin:0;letter-spacing:-.045em;transform:rotate(-5deg)}.brand span{position:absolute;font-size:.45em;right:-.3em;top:.1em;color:#d86569}
.brand-tagline{font-size:clamp(10px,1.9cqh,14px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;margin:0 0 clamp(0px,1cqh,10px)}
h1{font-family:Caveat,cursive;font-size:clamp(24px,6cqh,46px);font-weight:600;line-height:.95;margin:0}h1 strong{font-family:Lilita,Arial,sans-serif;font-weight:400;display:block;font-size:clamp(48px,16cqh,120px);line-height:1.04;letter-spacing:-.035em;color:#e23d6c;text-shadow:0 2px 0 #a72b4b,0 5px 12px #c6385a26;transform:rotate(-4deg);margin-top:4px}
.soon{font-size:clamp(12px,2.4cqh,17px);letter-spacing:.4em;text-transform:uppercase;margin:4px 0}
.candy-progress{width:min(300px,65%);height:clamp(14px,3.6cqh,25px);border-radius:50px;background:#f6d4bf;box-shadow:inset 0 2px 5px #67372265,0 1px 1px #fff8;overflow:hidden;padding:3px}
.candy-progress span{display:block;width:58%;height:100%;border-radius:50px;background:repeating-linear-gradient(120deg,#ed4375 0 13px,#ffa2bd 13px 23px);box-shadow:inset 0 2px 2px #fff8}
.detail{font-family:Caveat,cursive;font-size:clamp(17px,3.4cqh,27px);margin:0;line-height:1.05}
.closing{flex:none;display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(210px,1fr) minmax(150px,.65fr);align-items:center;gap:clamp(20px,4vw,60px);padding:12px clamp(24px,8vw,150px) 18px;background:var(--pink)}
.signup h2{font-family:Caveat,cursive;font-weight:600;font-size:clamp(22px,3vh,30px);text-align:center;line-height:.95;margin:0 0 12px;transform:rotate(-4deg)}.signup h2 span{font-size:1.15em}
.email-field{display:flex;min-height:44px;background:#fffafa;border-radius:40px;overflow:hidden}input,button{font:inherit}input{min-width:0;flex:1;width:100%;border:0;background:transparent;padding:12px 16px;color:var(--cocoa);font-size:16px}input::placeholder{color:#7f7070;opacity:1}input:focus{outline:none}.email-field:focus-within{outline:2px solid var(--berry);outline-offset:3px}
.email-field button{border:0;border-radius:40px;background:var(--berry);color:white;padding:10px 20px;white-space:nowrap;cursor:pointer;font-size:14px}.email-field button:hover{background:#a7294e}.email-field button span{margin-left:12px;font-size:22px;line-height:16px}
button:focus-visible,a:focus-visible{outline:2px solid var(--cocoa);outline-offset:4px}.email-field button:focus-visible{outline-offset:-5px;outline-color:white}
.social{border-left:1px solid #875a535e;padding-left:clamp(20px,3vw,50px);text-align:center}.social>p:first-child{font-size:14px;line-height:1.3;margin:0 0 14px}.social-links{display:flex;justify-content:center;gap:24px}.social-icon{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border:0;border-radius:50%;background:var(--cocoa);color:#fff7ee;cursor:pointer}.social-icon:hover{background:#8b3443;color:white}.social-icon svg{width:23px;height:23px}
.closing-message{font-family:Caveat,cursive;font-size:clamp(20px,2.6vh,29px);line-height:1.1;transform:rotate(-8deg);text-align:center;white-space:nowrap;margin:0}.closing-message em{font-style:normal;text-decoration:underline;text-decoration-color:#db5478;text-decoration-thickness:2px;text-underline-offset:6px}.closing-message span{font-size:1.2em}
.status{font-size:12px;line-height:1.3;margin:6px 0 0}.status:empty{display:none}
footer{flex:none;width:calc(100% - 64px);max-width:1440px;margin:0 auto;padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #451c1124;font-size:12px;line-height:1.4}footer p{margin:0}footer p>span{padding:0 6px}a{color:inherit;text-underline-offset:4px;font-weight:700}a:hover{color:#992241}
.accessible-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.closing{padding:10px 24px 14px;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.closing-message{display:none}.hero-copy{width:70%}.social{padding-left:20px}.social-links{gap:18px}}
@media(max-width:520px){.construction{background-position:center bottom}.construction:before{content:'';position:absolute;inset:0;background:linear-gradient(#fff2e899,#fff3e644 65%,transparent);z-index:-1}.hero-copy{width:94%;padding-top:clamp(16px,6cqh,45px);gap:clamp(7px,1.5cqh,12px)}.brand{font-size:clamp(42px,14cqh,90px)}h1{font-size:clamp(24px,6cqh,38px)}h1 strong{font-size:clamp(48px,16cqh,96px)}.brand-tagline{font-size:10px;letter-spacing:.12em}.soon{font-size:12px}.closing{grid-template-columns:minmax(0,1fr);padding:12px 20px;gap:12px}.signup h2{font-size:24px;margin-bottom:10px;transform:none}.signup h2 br{display:none}.social{border:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:10px}.social>p:first-child{text-align:left;max-width:160px;margin:0;font-size:13px}.social-links{gap:12px}.social-icon{width:36px;height:36px}.social-icon svg{width:21px;height:21px}.email-field button span{display:none}.email-field button{padding:10px 18px}footer{width:calc(100% - 40px);flex-direction:column;gap:2px;padding:7px 0;font-size:12px}}
@media(max-height:550px){.closing{padding-top:7px;padding-bottom:9px}.signup h2{font-size:22px;margin-bottom:8px}.signup h2 br{display:none}footer{padding-top:5px;padding-bottom:5px}.hero-copy{gap:4px;padding-top:6px}.brand-tagline{margin:0}.soon{margin:0}}
@media(prefers-reduced-motion:no-preference){a,button{transition:background-color .15s,color .15s}}

/* Rounded handmade lettering inspired by the original Cruje artwork. */
@font-face{font-family:Chewy;src:url('./assets/chewy.ttf') format('truetype');font-display:swap}
.brand{font-family:Chewy,cursive;font-weight:400;letter-spacing:-.055em}
h1{font-family:Chewy,cursive;font-weight:400;font-size:clamp(22px,5.7cqh,43px);line-height:1.08}
h1 strong.dulcura-lettering{display:block;width:min(43vw,70cqh);max-width:100%;font-size:inherit;line-height:0;margin:4px auto 0;transform:rotate(-3deg);text-shadow:none}
.dulcura-lettering img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 2px #a42d4810)}
@media(max-width:520px){h1{font-size:clamp(22px,5.2cqh,34px)}h1 strong.dulcura-lettering{width:min(91vw,66cqh);margin-top:6px}.brand{font-size:clamp(42px,14cqh,90px)}}
@media(max-height:450px){h1{font-size:clamp(17px,5.7cqh,30px)}h1 strong.dulcura-lettering{width:min(38vw,58cqh)}}

/* Custom transparent Cruje wordmark. */
.brand{width:min(36vw,47cqh);max-width:100%;font-size:inherit;line-height:0;transform:none;letter-spacing:normal}
.brand img{display:block;width:100%;height:auto}
@media(max-width:520px){.brand{width:min(73vw,43cqh);font-size:inherit}}
/* Compact landscape phones: reserve space for every line of the hero. */
@media (max-height:380px) and (min-width:521px){
  .hero-copy{padding-top:4px;gap:2px;width:70%}
  .brand{width:min(27vw,38cqh)}
  .brand-tagline{font-size:8px;line-height:1.2;letter-spacing:.12em}
  h1{font-size:clamp(14px,8cqh,20px);line-height:1}
  h1 strong.dulcura-lettering{width:min(32vw,51cqh);margin-top:2px}
  .soon{font-size:10px;line-height:1.1;letter-spacing:.25em}
  .candy-progress{height:12px;padding:2px;width:45%}
  .detail{font-size:14px;line-height:1}
  .closing{gap:12px;padding:6px 20px 8px}
  .signup h2{font-size:20px;margin-bottom:6px}
  .social>p:first-child{margin-bottom:8px}
}