:root{
  --bg:#0E0A0B;
  --ink:#F5F5F5;
  --sand:#D9C9B0;
  --gray:#A39B96;
  --dim:#6E6660;
  --deep:#4E4742;
  --red:#D32027;
  --line:rgba(217,201,176,.55);
  --hair:rgba(245,245,245,.08);
  --stone:'Marcellus','Times New Roman',serif;
  --text:'Literata',Georgia,serif;
  --col:36rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(120% 55% at 50% -10%, rgba(245,235,220,.04), transparent 60%), var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:clamp(19px, 1.1vw + 14.5px, 20.5px);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  display:flex;flex-direction:column;
}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

.nav{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:baseline;padding:1.2rem clamp(1.25rem,5vw,3rem)}
.nav .wordmark{font-family:var(--stone);font-size:1.05rem;letter-spacing:.22em;color:var(--ink);text-decoration:none}
.nav .links a{font-family:var(--stone);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--ink)}

.cold{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem 1.2rem;position:relative;margin-top:-4rem}
.cold p{font-family:var(--stone);color:var(--ink);font-size:clamp(1.45rem, 5.4vw, 2.7rem);line-height:1.42;white-space:nowrap;opacity:0;animation:fadein 1.6s ease forwards}
.cold .l1{animation-delay:.3s}
.cold .l2{animation-delay:1.0s}
.cold .l3{color:var(--sand);margin-top:.35em;animation-delay:2.1s}
.cold .hint{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);font-family:var(--stone);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--deep);opacity:0;animation:fadein 1.4s ease 3.4s forwards}
@keyframes fadein{to{opacity:1}}

.col{max-width:var(--col);margin:0 auto;padding:0 1.35rem}
.block{padding:clamp(3.2rem,8vh,5.5rem) 0}
.block p+p{margin-top:1.35rem}
.rule{width:2.4rem;height:1px;background:var(--line);border:0;margin:clamp(2.6rem,6vh,4rem) auto}

.say{font-family:var(--stone);color:var(--sand);text-align:center;font-size:clamp(1.45rem,3.6vw,2.05rem);line-height:1.38;margin:clamp(3rem,7vh,4.6rem) 0}
.say.name{font-size:clamp(1.6rem,4.2vw,2.35rem)}
.say+p{margin-top:0}
.block p+.say{margin-top:clamp(3rem,7vh,4.6rem)}
.nb{white-space:nowrap}
.hi{color:var(--sand)}
.note{font-style:italic;font-size:.9em;color:var(--gray)}
.framed{padding:0}

.rv{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s ease}
.rv.in{opacity:1;transform:none}

.who-rule{grid-column:1 / -1;margin:0 auto clamp(2.2rem,5vh,3.4rem)}
.who{max-width:68rem;margin:clamp(2rem,6vh,4rem) auto 0;padding:0 1.35rem;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1rem,4vw,3rem);align-items:center}
.who .q{font-family:var(--stone);color:var(--sand);font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.35;text-align:left;margin:0;padding-bottom:6vh}
.who .face{position:relative;overflow:hidden}
.who .face img{display:block;width:100%;height:min(78vh,760px);object-fit:cover;object-position:50% 18%;filter:brightness(.78);
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 52% 38%,#000 20%,rgba(0,0,0,.45) 50%,transparent 78%);
  mask-image:radial-gradient(ellipse 60% 58% at 52% 38%,#000 20%,rgba(0,0,0,.45) 50%,transparent 78%)}

.kid{display:flex;justify-content:center;padding:clamp(3rem,8vh,6rem) 1.5rem clamp(2rem,6vh,4rem)}
.kid img{display:block;width:min(88vw,460px);height:auto;filter:brightness(.8);
  -webkit-mask-image:radial-gradient(ellipse 54% 52% at 50% 46%,#000 36%,rgba(0,0,0,.5) 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 54% 52% at 50% 46%,#000 36%,rgba(0,0,0,.5) 60%,transparent 100%)}

.signup{margin:2.2rem auto 0;max-width:340px}
.signup .row{display:flex;gap:.5rem}
.signup .formkit-alert{list-style:none;margin:0 0 .9rem;padding:0;font-size:.85em;color:var(--gray);text-align:center}
.signup .formkit-alert:empty{display:none}
.signup button[data-active]{opacity:.55;cursor:wait}
.signup input[type="email"]{flex:1;background:transparent;border:1px solid var(--deep);color:var(--ink);font:inherit;font-size:.9rem;padding:.7rem .9rem;border-radius:2px;min-width:0}
.signup input::placeholder{color:var(--dim)}
.signup button{background:transparent;border:1px solid var(--ink);color:var(--ink);font-family:var(--stone);font-size:.9rem;letter-spacing:.08em;padding:.7rem 1.1rem;border-radius:2px;cursor:pointer}
.signup button:hover,.signup button:active{background:var(--red);border-color:var(--red);color:#fff}

.sign{display:flex;justify-content:center;padding:clamp(4rem,10vh,7rem) 1.5rem clamp(4rem,10vh,7rem)}
.pulse-svg{width:min(34vw,150px);height:auto;overflow:visible}
.pulse-svg path{fill:var(--red);clip-path:inset(0 100% 0 0)}
.in .pulse-svg path{animation:wipe 1.7s cubic-bezier(.3,0,.2,1) .2s forwards,beat .5s ease-in-out 2.15s 1}
@keyframes wipe{0%{clip-path:inset(0 100% 0 0)}30%{clip-path:inset(0 76% 0 0)}55%{clip-path:inset(0 34% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes beat{0%,100%{filter:brightness(1)}45%{filter:brightness(1.4)}}

.page{width:100%;max-width:var(--col);margin:0 auto;padding:clamp(3rem,9vh,6rem) 1.35rem 4rem;flex:1}
.page h1{font-family:var(--stone);color:var(--sand);font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.4;font-weight:400;margin-bottom:2.4rem}
.page p{margin-bottom:1.35rem}
.page .quiet{color:var(--gray);font-size:.92em}
.page h2{font-family:var(--stone);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);font-weight:400;margin:2.8rem 0 1.1rem}
.page ul{list-style:none;margin-bottom:1.35rem}
.page li{margin-bottom:.5rem}
.lost{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem 1.5rem}
.lost .say{margin:0 0 .8rem}
.lost .soft{color:var(--gray)}

footer{border-top:1px solid var(--hair);padding:2.2rem clamp(1.25rem,5vw,3rem) 2.6rem;text-align:center;font-family:var(--stone);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--deep);line-height:2.2}
footer .foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:1.4rem;margin-bottom:.4rem}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .legal{text-transform:none;letter-spacing:.04em;font-family:var(--text);font-size:.8rem;color:var(--dim)}

@media (max-width:700px){
  .who{grid-template-columns:1fr;gap:0;padding:0}
  .who .q{order:1;padding:0 1.35rem 1.2rem;text-align:center;font-size:1.7rem}
  .who .face{order:2;margin:0 auto;width:min(92vw,420px)}
  .who .face img{height:auto;object-fit:contain;object-position:50% 50%;filter:brightness(.72);
    -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 42%,#000 38%,rgba(0,0,0,.55) 64%,transparent 100%);
    mask-image:radial-gradient(ellipse 62% 60% at 50% 42%,#000 38%,rgba(0,0,0,.55) 64%,transparent 100%)}
  .cold{margin-top:-3rem}
}
@media (max-width:700px){
  body{font-size:21px;line-height:1.6;font-weight:450}
  .block{padding:2.8rem 0}
  .block p+p{margin-top:1.25rem}
  .say{font-size:1.9rem;margin:3.2rem 0}
  .block p+.say{margin-top:3.2rem}
  .say.name{font-size:2.1rem}
  .rule{margin:2.8rem auto}
  .cold p{font-size:clamp(1.35rem,6.2vw,1.9rem)}
  .signup{max-width:none}
  .nb.long{white-space:normal}
}
@media (min-width:701px) and (max-width:1000px){
  .who{grid-template-columns:1fr 1fr;gap:1.5rem}
  .who .face img{height:min(62vh,560px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cold p,.cold .hint{animation:none;opacity:1}
  .rv{opacity:1;transform:none;transition:none}
  .pulse-svg path{clip-path:none;animation:none}
}

.kid.small img{width:min(70vw,320px)}
.page .links-list p{margin-bottom:.6rem}
.page .links-list a{font-family:var(--stone);font-size:1.15rem;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--deep)}
.page .links-list a:hover{border-color:var(--ink)}
.lost .say,.lost .soft,.lost .back{opacity:0;animation:fadein 1.4s ease forwards}
.lost .say{animation-delay:.3s}
.lost .soft{animation-delay:1.1s}
.lost .back{animation-delay:2.1s}
@media (prefers-reduced-motion:reduce){.lost .say,.lost .soft,.lost .back{animation:none;opacity:1}}