/* Fonts are served from this site (no Google calls) */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-700.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400-italic.woff2) format('woff2')}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/patrick-hand-400.woff2) format('woff2')}
:root{
  --paper:#FBF7EF; --paper-2:#F4EEE3; --lilac:#EFE6F7;
  --ink:#2F2A36; --ink-soft:#4A4450; --muted:#6B6472;
  --purple:#5E3F91; --purple-deep:#3A285A; --gold:#C99A2E; --gold-line:#B88A1E;
  --hand:'Patrick Hand', 'Segoe Print', cursive;
  --body:'Atkinson Hyperlegible', 'Segoe UI', Verdana, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.6;overflow-x:hidden}
a{color:var(--purple)}a:hover{color:#3F2768}
img{max-width:100%}
h1,h2{font-family:var(--hand);font-weight:400;color:var(--purple);margin:0}
h2{font-size:48px;line-height:1.1}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}
.sketch{filter:url(#pencil)}

/* Buttons: Maggie's hand-drawn purple frame, stretched in the middle only */
.ib{display:inline-flex;align-items:center;justify-content:center;height:90px;margin:-18px 0 -21px;padding:0 12px 5px;
  border-style:solid;border-color:transparent;border-width:0 38px 0 40px;
  border-image-source:url(/img/btn-outline.png);border-image-slice:0 85 0 90 fill;border-image-repeat:stretch;
  background:none;font-family:var(--hand);font-size:24px;line-height:1;color:var(--purple-deep);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease}
.ib:hover{color:#2A1A45;transform:rotate(-1.2deg) translateY(-2px)}
.ib:focus-visible{outline:3px dashed var(--purple);outline-offset:2px}
.ib:disabled{opacity:.35;cursor:default;transform:none}

header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px}
.pen{font-family:var(--hand);font-size:26px;color:var(--purple)}
.stamp{position:relative;display:block;padding:6px 22px;transform:rotate(-4deg);font-family:var(--hand);font-size:22px;color:var(--ink);isolation:isolate}
.stamp::before{content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--gold-line);border-radius:50% 45% 55% 48%/60% 50% 55% 45%;background:#F8EDCB;filter:url(#pencil)}

.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:48px;padding-bottom:72px}
.hero-text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px}
.eyebrow{font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(52px,7vw,84px);line-height:1.02}
.swoosh{margin-top:-10px;max-width:70%}
.tagline{font-size:22px;line-height:1.5;max-width:30em}
.lede{max-width:32em;color:var(--ink-soft)}
.hero-btns{display:flex;flex-wrap:wrap;gap:18px 22px;padding-top:10px}
.hero-cover{flex:1 1 360px;min-width:0;display:flex;justify-content:center}
.hero-cover img{width:100%;max-width:430px;height:auto;transform:rotate(2deg);border:1.5px solid var(--ink);box-shadow:0 2px 0 #E4DACB,14px 18px 0 -2px #EADFF6,14px 18px 0 0 var(--ink)}

.band{background:var(--paper-2);border-top:1.5px dashed #CFC4B2;border-bottom:1.5px dashed #CFC4B2}
.meet{display:flex;flex-wrap:wrap-reverse;align-items:center;gap:56px;padding-top:72px;padding-bottom:72px}
.meet-pic{flex:1 1 320px;min-width:0;display:flex;justify-content:center}
.meet-pic img{width:100%;max-width:380px;height:auto;border-radius:50%}
.meet-text{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:18px}
.meet-text p{max-width:32em}
.ticks{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:14px;align-items:flex-start}
.ticks svg{flex:none;margin-top:2px}

/* Sneak peek flip-book */
.peek{padding-top:80px;padding-bottom:80px}
.peek-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:40px}
.peek-head p{color:var(--ink-soft);max-width:30em}
.peek-hint{margin-top:4px;font-family:var(--hand);font-size:22px;color:var(--purple)}
.fb{flex-direction:column;align-items:center;gap:24px}
.fb-single{display:flex}
.fb-spread{display:none}
@media (min-width:760px){.fb-single{display:none}.fb-spread{display:flex}}
.book{position:relative;isolation:isolate;touch-action:pan-y}
.book:focus-visible{outline:3px dashed var(--purple);outline-offset:10px}
.book-single{width:min(100%,460px);aspect-ratio:17/22;perspective:1800px;cursor:pointer}
.book-spread{width:min(100%,960px);aspect-ratio:34/22;perspective:2400px}
.stack{position:absolute;z-index:-1;border:2px solid var(--ink);filter:url(#pencil)}
.page-face{position:absolute;inset:0;background:#fff;border:2px solid var(--ink);overflow:hidden}
.page-face img,.page-btn img{display:block;width:100%;height:100%;object-fit:cover}
.blank{height:100%;display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;font-family:var(--hand);font-size:30px;color:var(--purple)}
.flip-top{transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.page-btn{position:absolute;top:0;bottom:0;width:50%;margin:0;padding:0;background:#fff;border:2px solid var(--ink);overflow:hidden;cursor:pointer;font:inherit}
.page-btn:disabled{cursor:default}
.page-btn:focus-visible{outline:3px dashed var(--purple);outline-offset:-6px}
.page-btn.left{left:0;border-right-width:1px}
.page-btn.right{left:50%;border-left-width:1px}
.spine-l,.spine-r{position:absolute;top:0;bottom:0;width:36px;pointer-events:none}
.spine-l{right:0;background:linear-gradient(to left,rgba(47,42,54,.18),rgba(47,42,54,0))}
.spine-r{left:0;background:linear-gradient(to right,rgba(47,42,54,.18),rgba(47,42,54,0))}
.leaf{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:left center;transform-style:preserve-3d;z-index:2}
.leaf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border:2px solid var(--ink);overflow:hidden}
.leaf-face img{display:block;width:100%;height:100%;object-fit:cover}
.leaf-front{box-shadow:-10px 0 22px rgba(47,42,54,.22)}
.leaf-back{transform:rotateY(180deg);box-shadow:10px 0 22px rgba(47,42,54,.22)}
.fb-caption{font-family:var(--hand);font-size:24px;color:var(--ink-soft);text-align:center}
.spread-caps{display:flex;justify-content:space-between;width:min(100%,960px);gap:24px;margin-top:8px;font-family:var(--hand);font-size:22px;color:var(--ink-soft)}
.spread-caps span{flex:1 1 0;text-align:center}

/* Notify */
.notify-band{background:var(--lilac);border-top:1.5px dashed #C9B8DF;border-bottom:1.5px dashed #C9B8DF}
.notify{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:72px;padding-bottom:72px}
.notify-pic{flex:0 1 220px;display:flex;justify-content:center;margin:0 auto}
.notify-pic img{width:220px;height:220px;border-radius:50%;object-fit:cover}
.notify-text{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:14px}
.notify-text>p{max-width:32em}
form.signup{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-end;padding-top:6px}
.field{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700}
.input-wrap{position:relative;isolation:isolate}
.input-wrap::before{content:"";position:absolute;inset:0;z-index:-1;background:#FFFDF8;border:2px solid var(--ink);border-radius:10px 4px 12px 5px/5px 12px 4px 10px;filter:url(#pencil)}
.input-wrap input{width:100%;min-height:56px;padding:12px 16px;border:0;background:transparent;font:inherit;font-size:20px;color:var(--ink)}
.input-wrap input:focus-visible{outline:3px dashed var(--purple);outline-offset:4px}
.hp{position:absolute;left:-9999px}
.thanks{margin-top:6px;font-family:var(--hand);font-size:28px;color:var(--ink)}
.oops{margin-top:6px;color:#8A2D2D}

.pair{display:flex;flex-wrap:wrap;gap:40px;padding-top:80px;padding-bottom:80px}
.pair>div{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pair h2{font-size:40px}
.pair p{max-width:28em}
.pair .ib{margin-top:-10px}

footer{border-top:1.5px dashed #CFC4B2}
footer img{display:block;width:100%;max-width:1160px;height:auto;margin:0 auto}
footer p{padding:20px 24px 36px;text-align:center;font-size:16px;color:var(--muted)}

@media (max-width:640px){
  .hero-btns>a{flex:1 1 100%}
}

/* Was inline style="" (moved here so the security rules can block inline styles) */
.svgdefs{position:absolute}
.stack-s1{inset:10px -10px -10px 10px;background:#F4EEE3;border-radius:4px 10px 6px 8px/8px 4px 10px 6px}
.stack-s2{inset:5px -5px -5px 5px;background:#FFFDF8;border-radius:6px 4px 8px 10px/4px 10px 6px 8px}
.stack-p1{inset:-16px -18px -18px -16px;z-index:-3;background:#5E3F91;border-width:2.5px;border-radius:8px 14px 10px 12px/12px 8px 14px 10px}
.stack-p2{inset:-6px -8px -8px -6px;z-index:-2;background:#F4EEE3;border-radius:4px 10px 6px 8px/8px 4px 10px 6px}
.pen a{color:inherit;text-decoration:none}

/* CASL consent note under the sign-up form */
.consent{flex:1 1 100%;font-size:16px;line-height:1.5;color:var(--ink-soft);max-width:36em}

/* Plain pages: privacy, thanks, 404 */
.plain{padding-top:56px;padding-bottom:80px;max-width:820px}
.plain h1{font-size:clamp(44px,6vw,64px);line-height:1.05;margin-bottom:18px}
.plain h2{font-size:34px;margin:36px 0 10px}
.plain p,.plain li{max-width:38em}
.plain p+p{margin-top:14px}
.plain ul{padding-left:1.2em;margin:10px 0 0}
.plain li+li{margin-top:8px}
.plain .ib{margin-top:28px}
.small{font-size:16px;color:var(--muted)}
footer nav{display:flex;justify-content:center;gap:24px;padding:16px 24px 0;font-size:16px}
footer nav a{color:var(--muted)}
.nowrap{white-space:nowrap}
.oops-page{display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:24px;padding-bottom:72px;text-align:center}
.oops-pic{display:block;width:100%;max-width:1000px;height:auto;mix-blend-mode:multiply}
.oops-page .txt{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:34em}
.oops-page h1{font-size:clamp(40px,6vw,64px);line-height:1.05}
.oops-page .ib{margin-top:8px}
