@font-face{font-family:Newsreader;src:url('assets/fonts/newsreader-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('assets/fonts/ibm-plex-mono-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Anybody;src:url('assets/fonts/anybody-800.ttf') format('truetype');font-weight:800;font-display:swap}
:root{color-scheme:light;--paper:#F6F0E2;--ink:#1F2722;--oxide:#A63F32}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Newsreader,Georgia,serif;-webkit-font-smoothing:antialiased}
.page{max-width:1360px;margin:auto;padding:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.identity{display:flex;align-items:center;gap:24px}
/* Display the supplied logo's artwork, omitting only the large blank margins.
   The source PNG is unchanged. Multiply lets its white paper share the ground. */
.logo{display:block;position:relative;flex:none;width:64px;aspect-ratio:1440/2220;overflow:hidden;mix-blend-mode:multiply}
.logo img{position:absolute;max-width:none;width:210%;height:auto;left:-55.55%;top:-50.45%}
.name{font-family:Anybody,sans-serif;font-size:20px;font-weight:800;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.photograph{margin:0;min-width:0}
.photograph img{display:block;width:100%;height:auto}
.invitation{min-width:0;padding-top:4px}
h1{font-size:clamp(44px,10vw,66px);font-weight:400;line-height:1.02;letter-spacing:-.035em;margin:0 0 24px}
.intro{font-size:21px;line-height:1.4;max-width:30ch;margin:0 0 30px}
form{max-width:420px}
label{display:block;font-family:Plex,monospace;font-size:12px;line-height:1.5;margin-bottom:9px}
input,button{font:400 14px/1.4 Plex,monospace;border-radius:0;width:100%;min-height:54px}
input{appearance:none;background:transparent;border:1px solid var(--ink);padding:15px;color:var(--ink)}
input::placeholder{color:var(--ink);opacity:.8}
button{margin-top:10px;padding:15px;border:1px solid var(--oxide);background:var(--oxide);color:var(--paper);cursor:pointer}
button:hover{background:var(--ink);border-color:var(--ink)}
button[aria-disabled=true]{cursor:wait}
input:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.small{font:400 11px/1.65 Plex,monospace;margin:16px 0 0}
.status{font:400 11px/1.65 Plex,monospace;margin:16px 0 0;min-height:37px;color:var(--oxide)}
.status:empty{display:none}
#signup .formkit-alert-error{color:var(--oxide);padding:0;list-style:none;font:400 13px/1.6 Plex,monospace}
#signup .formkit-alert-error:empty{display:none}
#signup [data-element=success]{font-size:23px;line-height:1.4;padding:20px 0;color:var(--ink)}
#signup [data-element=success]:focus{outline:2px solid var(--ink);outline-offset:6px}
#signup .kit-credit{display:inline-block;margin-top:12px;color:var(--ink);font:400 11px/1.6 Plex,monospace;text-underline-offset:3px}
#signup button:disabled{cursor:wait;opacity:.8}
.table-rule{height:2px;background:var(--oxide);margin-top:8px}
@media(min-width:850px){
  .page{padding:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:8%;row-gap:40px;min-height:100svh}
  .identity{grid-column:1;grid-row:1;gap:28px}
  .logo{width:78px}
  .name{font-size:24px}
  .photograph{grid-column:2;grid-row:1/4;align-self:center}
  .invitation{grid-column:1;grid-row:2;align-self:center;padding:20px 0}
  h1{font-size:clamp(52px,5vw,74px);margin-bottom:28px}
  .intro{font-size:23px;margin-bottom:32px}
  .table-rule{grid-column:1;grid-row:3;align-self:end;margin:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}