@font-face{font-family:"Awesome Serif";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/awesome-serif-semibold.otf) format("opentype")}
@font-face{font-family:"Awesome Serif";font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/awesome-serif-italic.otf) format("opentype")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-600.woff2) format("woff2")}

:root{
  --ivory:#F8F4EC;--ink:#0F2A38;--midnight:#013D5A;--muted:#435763;
  --honey:#EDB547;--butter:#F3D27A;--celeste:#BDD3CE;--white:#fff;
  --serif:"Awesome Serif",Georgia,"Times New Roman",serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:22px;--r-btn:20px;--r-field:14px;--ws:.06em;
  --out:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--celeste) var(--ivory)}
body{margin:0;min-height:100vh;background-color:var(--ivory);background-image:var(--grain);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--honey);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--midnight);outline-offset:3px}
.join :focus-visible{outline-color:var(--honey)}

.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.page{position:relative;max-width:440px;margin:0 auto;padding:18px 16px 30px;overflow-x:clip}

/* header: one quiet print of you with your name in its margin, the logo and your line beside it */
.hero{margin:0 auto}
.hero__row{display:flex;align-items:center;justify-content:center;gap:8px}
.print{flex:none;margin:0;padding:7px 7px 2px;background:var(--white);box-shadow:0 14px 24px -14px rgba(15,42,56,.5),0 1px 3px rgba(15,42,56,.2);transform:rotate(-2.5deg)}
.print img{display:block;width:104px;height:124px;object-fit:cover;object-position:50% 26%;background:var(--celeste);font-size:0;color:transparent}
.print figcaption{padding:3px 0 4px;color:var(--midnight);font:italic 600 21px/1.3 var(--serif);text-align:center}
.logo{flex:none;width:clamp(112px,34vw,132px);margin:0}
.logo img{display:block;width:100%;height:auto}
.tag{max-width:310px;margin:12px auto 0;color:var(--muted);font:400 14.5px/1.3 var(--sans);text-align:center;text-wrap:balance}

/* youtube: the gold card */
.yt{display:flex;align-items:center;gap:14px;min-height:76px;margin-top:18px;padding:12px 16px 12px 12px;border-radius:var(--r-card);background:var(--honey);color:var(--ink);text-decoration:none;box-shadow:0 14px 26px -14px rgba(15,42,56,.55),0 2px 4px rgba(15,42,56,.16);transition:transform .25s var(--out)}
.yt:active{transform:scale(.985)}
.disc{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--midnight);color:var(--honey);box-shadow:0 6px 12px -6px rgba(1,61,90,.7)}
.disc .i{width:24px;height:24px;margin-left:3px;fill:currentColor;stroke:none}
.yt__text{min-width:0}
.yt strong{display:block;font:600 26px/1.08 var(--serif);word-spacing:var(--ws)}
.yt small{display:block;font-size:13px;line-height:1.35}
.go{margin-left:auto;color:var(--midnight)}

/* signup: the deep blue card */
.join{position:relative;margin-top:10px;padding:16px 18px 12px;border-radius:var(--r-card);background:var(--midnight);color:var(--white);box-shadow:0 16px 30px -14px rgba(1,61,90,.55),0 2px 6px rgba(1,61,90,.2)}
.pill{position:absolute;top:16px;right:16px;padding:2px 11px;border-radius:999px;background:var(--honey);color:var(--ink);font:600 12px/1.6 var(--sans);letter-spacing:.03em}
.join h2{margin:0 56px 4px 0;font:600 31px/1.05 var(--serif);word-spacing:var(--ws)}
.join h2 em{margin-left:-.06em;font-style:italic;color:var(--honey)}
.join__sub{margin:0 0 12px;color:var(--celeste);font-size:13.5px;line-height:1.5;text-wrap:pretty}
.signup__row{display:flex;flex-wrap:wrap;gap:8px}
.signup input{flex:1 1 150px;min-width:0;height:52px;padding:0 16px;border:2px solid transparent;border-radius:var(--r-field);background:var(--white);color:var(--ink);font:400 16px var(--sans);caret-color:var(--midnight)}
.signup input::placeholder{color:var(--muted);opacity:1}
.signup input:focus-visible{outline:3px solid var(--honey);outline-offset:2px}
.signup button{flex:0 0 auto;height:52px;padding:0 20px;border:0;border-radius:var(--r-field);background:var(--honey);color:var(--ink);font:600 15px var(--sans);cursor:pointer;transition:transform .2s var(--out),background-color .2s}
.signup button:active{transform:scale(.97)}
.fine{margin:10px 0 0;color:var(--celeste);font-size:12.5px;line-height:1.45;text-wrap:pretty}
.thanks,.oops{margin:12px 0 0;padding:12px 14px;border-radius:var(--r-field);background:rgba(255,255,255,.12);color:var(--white);font-weight:600}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.signup button:disabled{opacity:.7;cursor:progress}
.signup.is-done .signup__row,.signup.is-done .fine{display:none}

.wait{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding:16px 20px 14px;border-radius:var(--r-card);background:rgba(243,210,122,.55);color:var(--ink);text-decoration:none;transition:transform .25s var(--out)}
.wait:active{transform:scale(.985)}
.wait__title{font:600 24px/1.08 var(--serif);word-spacing:var(--ws);text-wrap:balance}
.wait__sub{font-size:13.5px;line-height:1.45;text-wrap:pretty}
.wait__go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin-top:6px;padding:0 18px;border-radius:var(--r-field);background:var(--midnight);color:var(--white);font:600 14.5px var(--sans)}
.wait__go .i{width:18px;height:18px}

.rows{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid rgba(15,42,56,.15)}
.rows a{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 4px;border-bottom:1px solid rgba(15,42,56,.15);color:inherit;text-decoration:none;transition:background-color .2s}
.rows a>.i:first-child{color:var(--midnight);margin:0 4px}
.rows a:active{background:rgba(189,211,206,.35)}
.row__text{min-width:0}
.rows strong{display:block;font:600 15.5px/1.3 var(--sans)}
.rows small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.foot{margin-top:18px;text-align:center}
.foot p{margin:0;color:var(--muted);font-size:12.5px}

/* one entrance: your photo develops, like an instant print, while the rest settles in */
.js .rise{animation:rise .8s var(--out) backwards;animation-delay:calc(var(--i,0)*80ms)}
.js .print img{animation:develop 2.1s .25s ease-out backwards}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes develop{from{filter:sepia(1) saturate(.3) brightness(1.35) contrast(.7) blur(3px)}}

@media (max-width:340px){
  .print img{width:88px;height:106px}
  .logo{width:104px}
}
@media (hover:hover){
  .yt:hover,.wait:hover{transform:translateY(-2px)}
  .rows a:hover{background:rgba(189,211,206,.28)}
  .signup button:hover{background:var(--butter)}
}
@media (min-width:900px){
  .page{max-width:500px;padding-top:44px}
  .print img{width:128px;height:152px}
  .print figcaption{font-size:25px}
  .logo{width:160px}
  .tag{max-width:380px;font-size:16px}
  .yt strong{font-size:30px}
  .join h2{font-size:36px}
  .wait__title{font-size:29px}
}
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .print img{animation:none}
  .yt,.wait,.signup button,.rows a{transition:none}
  .yt:hover,.wait:hover{transform:none}
}