:root{
  --bg:#000;
  --fg:#fff;
  --dim:#a3a3a3;   /* 8.6:1 on black */
  --faint:#8a8a8a; /* 6.0:1 on black, still AA */
  --line:#3a3a3a;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  font-family:var(--mono);font-weight:300;font-size:15px;line-height:1.6;letter-spacing:.02em;
  text-transform:lowercase;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#fff;color:#000}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12vh 24px 48px;width:100%;max-width:560px;margin:0 auto;
}
.marker{margin:0 0 56px;font-size:11px;letter-spacing:.24em;color:var(--faint)}
.grid{width:100px;height:100px;display:block;margin:0 auto 40px}
.pulse{animation:pulse 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.18}}

h1{margin:0;font-size:22px;font-weight:400;letter-spacing:.42em;padding-left:.42em}
.line{margin:10px 0 0;color:var(--dim);font-size:14px;letter-spacing:.08em}

.node{margin-top:84px;width:100%;max-width:400px}
.node h2{margin:0;font-size:13px;font-weight:400;letter-spacing:.28em;padding-left:.28em}
.sub{margin:8px 0 22px;color:var(--dim);font-size:13px}

.field{display:flex;border-bottom:1px solid var(--line);transition:border-color .4s}
.field:focus-within{border-color:var(--fg)}
input[type=email]{
  flex:1;min-width:0;background:transparent;border:0;border-radius:0;color:var(--fg);
  font:inherit;font-size:16px;/* prevents iOS zoom */letter-spacing:.04em;text-transform:none;
  padding:12px 4px;outline:none;
}
input[type=email]::placeholder{color:#6f6f6f;opacity:1}
button{
  background:transparent;border:0;color:var(--dim);font:inherit;font-size:12px;letter-spacing:.24em;
  padding:12px 4px 12px 16px;cursor:pointer;text-transform:lowercase;transition:color .3s;
}
button:hover,button:focus-visible{color:var(--fg)}
button:disabled{cursor:default;color:var(--faint)}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
input[type=email]:focus-visible{outline:none}

.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.status{min-height:1.6em;margin:16px 0 0;font-size:13px;color:var(--dim);letter-spacing:.06em}
.status.ok{color:var(--fg)}
form.done .field{display:none}

/* no-js fallback: the function redirects to /#received after a plain form post */
.received-static{display:none;margin:16px 0 0;font-size:13px;color:var(--fg);letter-spacing:.06em}
.received-static:target{display:block}
.node:has(.received-static:target) form{display:none}

.foot{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:24px 24px 32px;font-size:11px;letter-spacing:.14em;color:var(--faint);text-align:center;
}
.foot p{margin:0}
.x{display:inline-flex;align-items:center;gap:8px;color:var(--faint);text-decoration:none;padding:6px;transition:color .3s}
.x:hover,.x:focus-visible{color:var(--fg)}

@media (max-width:480px){
  body{font-size:14px}
  .wrap{padding-top:9vh}
  .marker{margin-bottom:44px;font-size:10px;letter-spacing:.18em}
  .grid{width:72px;height:72px;margin-bottom:32px}
  h1{font-size:19px;letter-spacing:.34em;padding-left:.34em}
  .node{margin-top:64px}
}
@media (prefers-reduced-motion:reduce){
  .pulse{animation:none;opacity:.55}
  *{transition:none!important}
}
.line a{color:inherit;text-underline-offset:4px}