:root{--paper:#f6eedb;--paper2:#efe2c4;--tomato:#b8321f;--olive:#5b6b2e;--ink:#2b1d14;--butter:#e9b949}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Newsreader',serif;
background-image:radial-gradient(circle at 20% 10%,rgba(233,185,73,.18),transparent 40%),radial-gradient(circle at 85% 80%,rgba(184,50,31,.10),transparent 45%),repeating-linear-gradient(0deg,rgba(43,29,20,.025) 0 1px,transparent 1px 4px);min-height:100vh}
.display{font-family:'Playfair Display',serif}
.hand{font-family:'Caveat',cursive}
.gingham{padding:10px;background:
repeating-linear-gradient(0deg,rgba(184,50,31,.35) 0 10px,transparent 10px 20px),
repeating-linear-gradient(90deg,rgba(184,50,31,.35) 0 10px,transparent 10px 20px),#fff;border-radius:14px}
.card{background:#fffaf0;border-radius:8px;box-shadow:0 2px 0 rgba(43,29,20,.15),0 14px 30px -12px rgba(43,29,20,.35)}
.lined{background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(91,107,46,.25) 31px 32px)}
.blank{display:inline-block;min-width:3.2em;border-bottom:6px solid var(--tomato);animation:wig 2.4s ease-in-out infinite;transform-origin:center}
@keyframes wig{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2px)}}
.rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.bubble{display:inline-block;animation:bub 1s ease-in-out infinite}
@keyframes bub{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.08)}}
.chip{border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:.9rem;transition:.15s;background:#fffaf0}
.chip.on{background:var(--ink);color:var(--paper)}
.chip:hover{transform:translateY(-1px)}
.btn{font-family:'Playfair Display',serif;font-weight:900;border:2px solid var(--ink);border-radius:10px;padding:8px 14px;background:#fffaf0;box-shadow:3px 3px 0 var(--ink);transition:.1s}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn-main{background:var(--tomato);color:#fff7e8;font-size:1.3rem;padding:12px 22px}
.story{max-width:70ch;font-size:1.17rem;line-height:1.8}
.story h1{font-family:'Playfair Display',serif;font-weight:900;font-size:2.4rem;line-height:1.1;color:var(--tomato);margin:.2em 0 .6em}
.story h2{font-family:'Playfair Display',serif;font-weight:900;font-size:1.6rem;color:var(--olive);margin:1.6em 0 .5em;border-bottom:2px dashed rgba(91,107,46,.4);padding-bottom:.2em}
.story h3{font-family:'Playfair Display',serif;font-style:italic;font-size:1.25rem;margin:1.2em 0 .4em}
.story p{margin:0 0 1em}
.story ul{list-style:"✦  ";padding-left:1.5em;margin-bottom:1em}
.story ol{list-style:decimal;padding-left:1.5em;margin-bottom:1em}
.story li{margin:.3em 0}
.story blockquote{border-left:4px solid var(--butter);padding-left:1em;font-style:italic;color:#5a4636}
.story strong{color:var(--tomato)}
.story>p:first-of-type::first-letter{font-family:'Playfair Display',serif;font-weight:900;float:left;font-size:4.2em;line-height:.8;padding:.08em .1em 0 0;color:var(--tomato)}