/* Rollcall homepage. A paper register, ticks in biro. Fonts are served from this site (OFL): Sora, Karla, Caveat. */
@font-face{font-family:Sora;src:url(/fonts/sora.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Karla;src:url(/fonts/karla.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Caveat;src:url(/fonts/caveat.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root{--paper:#fffef9;--desk:#eef2f6;--ink:#1e2a38;--soft:#465466;--faint:#6b7888;--biro:#1d4ed8;--red:#c2410c;--line:#b9cbe6;--margin:#e8a0a0}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--desk);color:var(--ink);font:400 17px/1.55 Karla,system-ui,sans-serif}
main,header,footer{max-width:560px;margin:0 auto;padding:0 22px}
a{color:inherit}input,button{font:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);padding:8px 12px;z-index:5}
:focus-visible{outline:3px solid var(--biro);outline-offset:3px}

header{display:flex;justify-content:space-between;align-items:center;padding-top:20px}
.logo{font:700 21px Sora,sans-serif;letter-spacing:-.03em;text-decoration:none}
.logo::before{content:"\2713";font:700 26px Caveat,cursive;color:var(--biro);margin-right:5px}
header a.top{font-weight:700;font-size:15px;padding:12px 0}.logo{padding:6px 0}

h1{font:700 38px/1.08 Sora,sans-serif;letter-spacing:-.04em;margin:32px 0 12px}
h1 span{display:block;font:700 50px/.95 Caveat,cursive;color:var(--biro);letter-spacing:0;margin-top:4px}
.lede{margin:0 0 24px;color:var(--soft)}

/* The register: ruled paper with a red margin line. Row height and the ruling share one number. */
.reg{--row:56px;background-color:var(--paper);margin:0 -8px;padding:14px 14px 0 0;box-shadow:0 1px 0 #cfd6de,0 10px 24px rgba(30,42,56,.12);transform:rotate(.6deg);
 background-image:linear-gradient(90deg,transparent 46px,var(--margin) 46px,var(--margin) 48px,transparent 48px),repeating-linear-gradient(var(--paper) 0 calc(var(--row) - 1px),var(--line) calc(var(--row) - 1px) var(--row))}
.reg-head{font:600 12px Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 0 60px;height:42px;line-height:42px;display:flex;justify-content:space-between}
.reg ul{list-style:none;margin:0;padding:0 0 28px}
.reg li{height:var(--row);display:grid;grid-template-columns:48px 1fr auto;align-items:center}
.tk{font:700 34px Caveat,cursive;color:var(--biro);text-align:center}.tk.no{color:#c8ced6;font-size:20px}
.who b{font:600 16px Sora,sans-serif;letter-spacing:-.02em;padding-left:12px;display:block}
.who small{padding-left:12px;font-size:13px;color:var(--faint);display:block;margin-top:-2px}
.note{font:500 21px/1 Caveat,cursive;color:var(--biro);padding-right:6px;text-align:right}
.due .note{color:var(--red)}
.scr{font:500 24px/1.1 Caveat,cursive;color:var(--red);margin:16px 0 0 60px;transform:rotate(-2deg)}
.eg{font-size:13px;color:var(--faint);margin:8px 0 0;text-align:right}

.btn,button{display:block;width:100%;background:var(--biro);color:#fff;border:0;border-radius:10px;padding:17px;font:700 17px Sora,sans-serif;text-align:center;text-decoration:none;cursor:pointer}
.btn{margin-top:22px}.btn:hover,button:hover{background:#1a43bd}
.sub{text-align:center;font-size:14px;color:var(--soft);margin:10px 0 0}

h2{font:700 27px/1.1 Sora,sans-serif;letter-spacing:-.04em;margin:56px 0 12px}
.day{display:grid;grid-template-columns:74px 1fr;gap:0 10px;margin:0}
.day dt{font:700 26px Caveat,cursive;color:var(--biro);padding-top:2px}
.day dd{margin:0 0 18px}.day dd b{display:block;font:600 17px Sora,sans-serif;letter-spacing:-.02em}

.isnt p{margin:0 0 14px}.isnt b{font-weight:700}

.sum{background:var(--ink);color:var(--desk);border-radius:14px;padding:22px 22px 20px}
.sum .n{font:700 80px/.9 Sora,sans-serif;letter-spacing:-.06em}.sum .n small{font:500 17px Karla,sans-serif;letter-spacing:0;color:#aeb9c7}
.sum p{margin:12px 0 0;color:#cfd8e3}.sum p b{color:#fff}
.vs{font:700 26px/1.15 Caveat,cursive;color:var(--red);margin:14px 0 0;transform:rotate(-1deg)}

form{margin:0}label{display:block;font-weight:700;font-size:15px;margin-top:14px}
label span{font-weight:400;color:var(--faint)}
input[type=text],input[type=tel]{display:block;width:100%;margin-top:6px;padding:14px;border:0;border-bottom:2px solid var(--ink);background:var(--paper);border-radius:0;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form button{margin-top:22px}button[disabled]{opacity:.6;cursor:default}
.fine{font-size:13px;color:var(--soft);text-align:center;margin:12px 0 0}
.err{color:var(--red);font-weight:700;font-size:15px;margin:10px 0 0}
.done{background:var(--paper);padding:22px;box-shadow:0 1px 0 #cfd6de,0 10px 24px rgba(30,42,56,.12);transform:rotate(-.5deg)}
.done .tk{display:block;font-size:64px;line-height:.8;text-align:left}
.done h3{font:700 22px Sora,sans-serif;letter-spacing:-.03em;margin:6px 0 6px}.done p{margin:0}

footer{margin-top:54px;padding-bottom:44px;font-size:13px;color:var(--soft)}footer p{margin:0}footer a{display:inline-block;padding:11px 0}
.plain{padding-top:48px;padding-bottom:60px}.plain h1{font-size:30px}.plain h2{font-size:20px;margin:30px 0 6px}.plain p,.plain li{color:var(--soft)}.plain ul{padding-left:20px}
@media (min-width:700px){h1{font-size:46px}h1 span{font-size:60px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}