@font-face{font-family:'Instrument Serif';src:url(/sketchbook/instrument-serif.woff2) format('woff2');font-display:block}
@font-face{font-family:'Sacramento';src:url(/sketchbook/sacramento.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-weight:200 600;src:url(/sketchbook/newsreader.woff2) format('woff2');font-display:swap}
:root{--paper:#ece7dc;--card:#fbf8f1;--ink:#2b2721;--ink-faint:rgba(43,39,33,.72);--line:rgba(43,39,33,.12);--accent:#b4532a}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;min-height:100svh;background:var(--paper) url(/sketchbook/bg-wash.jpg) center/cover fixed;color:var(--ink);font-family:'Newsreader',Georgia,serif;padding:16px}
main{max-width:34em;margin:6vh auto;background:linear-gradient(172deg,#fbf8f1,#f3eee3);border-radius:22px;padding:clamp(22px,5vw,36px);box-shadow:0 30px 56px rgba(60,44,22,.16)}
h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(28px,6vw,36px);margin:0 0 8px;line-height:1.1}
p{font-size:17px;line-height:1.6;margin:0 0 12px}
a{color:inherit}
.faint{color:var(--ink-faint);font-size:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* The primary button is the landing page's CTA (index.html .sheet .cta): one button style across the site. */
button,.btn{font:inherit;font-size:14px;letter-spacing:.1em;text-transform:uppercase;border:0;border-radius:999px;padding:14px 24px;text-align:center;text-wrap:balance;
  background:#8b5e35;color:#fbf7ee;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(58,38,16,.35),0 1px 2px rgba(74,50,22,.22),0 6px 14px rgba(74,50,22,.18);
  transition:background-color .18s,transform .16s}
button:hover,.btn:hover{background:#96683c;transform:translateY(-1px)}
button:active,.btn:active{background:#7d5430;transform:translateY(1px)}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
button.quiet,.btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;
  font-size:15px;letter-spacing:0;text-transform:none;padding:10px 20px}
button.quiet:hover,.btn.quiet:hover{background:rgba(43,39,33,.05);transform:none}
button[disabled]{opacity:.5;cursor:default}
input[type=email],input[type=text]{font:inherit;font-size:17px;width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;margin:0 0 12px}
.story{border-top:1px solid var(--line);padding:16px 0}
.story .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px}
.story .premise{margin:4px 0 10px;line-height:1.55}
.story h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:24px;margin:0 0 4px}
.story audio{width:100%;margin:8px 0}
.writing{height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:w 1.8s ease-in-out infinite;margin:10px 0}
@keyframes w{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.writing{animation:none;background:var(--accent);opacity:.4}}
/* Same wordmark and nav links as the landing page's header (index.html .top .name / .top .login). */
nav.top{max-width:34em;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
nav.top .links{display:flex;gap:6px}
nav.top .name{font-family:'Sacramento','Snell Roundhand','Apple Chancery',cursive;font-size:clamp(32px,3.2vw,44px);
  text-transform:lowercase;line-height:1.22;text-decoration:none;color:var(--ink)}
nav.top .links a{font-size:17px;color:var(--ink);opacity:.8;text-decoration:none;padding:8px}
nav.top .links a:hover{opacity:1;text-decoration:underline}
@media (max-width:640px){nav.top .name{font-size:30px}}
footer{max-width:34em;margin:18px auto;text-align:center}
footer a{white-space:nowrap}