/* ==========================================================================
   IMAGNARY HOUSE
   ========================================================================== */

@font-face{font-family:"IM Fell English"; src:url("../fonts/im-fell-english.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"IM Fell English"; src:url("../fonts/im-fell-english-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap}
@font-face{font-family:"IM Fell English SC"; src:url("../fonts/im-fell-english-sc.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Caveat"; src:url("../fonts/caveat-500.woff2") format("woff2"); font-weight:500; font-display:swap}
@font-face{font-family:"Caveat"; src:url("../fonts/caveat-700.woff2") format("woff2"); font-weight:700; font-display:swap}
@font-face{font-family:"Amatic SC"; src:url("../fonts/amatic-sc-700.woff2") format("woff2"); font-weight:700; font-display:swap}
@font-face{font-family:"Gochi Hand"; src:url("../fonts/gochi-hand.woff2") format("woff2"); font-weight:400; font-display:swap}
@font-face{font-family:"Homemade Apple"; src:url("../fonts/homemade-apple.woff2") format("woff2"); font-weight:400; font-display:swap}

:root{
  --night:#0a1328;
  --night-deep:#070e1f;
  --cream:#f4ead3;
  --cream2:#d6cdb6;
  --dim:#9097ad;
  --gold:#e3b35c;
  --gold2:#f4d38e;
  --ink:#2b2219;
  --serif:"IM Fell English", Georgia, "Times New Roman", serif;
  --sc:"IM Fell English SC", Georgia, serif;
  --gutter:clamp(16px, 4vw, 56px);
}

*, *::before, *::after{box-sizing:border-box}
html, body{margin:0; height:100%}
body{
  font:17px/1.6 var(--serif); color:var(--cream); background:var(--night-deep);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1, h2, h3, p, ol, dl, dd{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--gold2); outline-offset:3px; border-radius:4px}

/* ============ THE STAGE ============ */
.app{
  position:relative; display:flex; flex-direction:column; height:100vh; height:100svh; min-height:600px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 70% at 6% 108%, rgba(227,179,92,.20), transparent 70%),
    radial-gradient(55% 60% at 96% -10%, rgba(120,150,235,.22), transparent 70%),
    linear-gradient(180deg, #12224a 0%, #0a1328 55%, #070e1f 100%);
}
/* paper grain */
.app::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* fireflies */
.app::after, .body::after{content:""; position:absolute; top:0; left:0; width:3px; height:3px; border-radius:50%; pointer-events:none; z-index:-1}
.app::after{box-shadow:6vw 22vh 6px 1px rgba(255,221,140,.85), 18vw 64vh 5px 1px rgba(255,221,140,.7), 31vw 12vh 6px 1px rgba(255,221,140,.6), 44vw 78vh 6px 1px rgba(255,221,140,.8), 57vw 30vh 5px 1px rgba(255,221,140,.55), 69vw 70vh 6px 1px rgba(255,221,140,.8), 82vw 18vh 6px 1px rgba(255,221,140,.7), 93vw 56vh 5px 1px rgba(255,221,140,.75);
  animation:drift 16s ease-in-out infinite alternate, twinkle 5s ease-in-out infinite}
.body::after{box-shadow:12vw 40vh 5px 1px rgba(255,221,140,.7), 25vw 8vh 6px 1px rgba(255,221,140,.6), 38vw 52vh 5px 1px rgba(255,221,140,.7), 50vw 14vh 6px 1px rgba(255,221,140,.8), 63vw 60vh 5px 1px rgba(255,221,140,.6), 76vw 36vh 6px 1px rgba(255,221,140,.7), 88vw 74vh 5px 1px rgba(255,221,140,.6);
  animation:drift2 21s ease-in-out infinite alternate, twinkle 6.5s ease-in-out 2s infinite}

/* ============ TOP BAR ============ */
.bar{position:relative; z-index:2; display:flex; align-items:center; gap:16px; padding:16px var(--gutter); border-bottom:1px solid rgba(244,234,211,.08)}
.brand{font-family:var(--sc); font-size:22px; letter-spacing:.06em; white-space:nowrap; margin-right:auto}
.brand i{font-style:normal; color:var(--gold)}
.nav{display:flex; gap:4px; padding:4px; border-radius:999px; background:rgba(244,234,211,.05); border:1px solid rgba(244,234,211,.1)}
.tab{padding:8px 18px; border-radius:999px; font-family:var(--sc); font-size:15px; letter-spacing:.05em; color:var(--cream2); white-space:nowrap; transition:background .3s, color .3s}
.tab:hover{color:var(--cream); background:rgba(244,234,211,.08)}
.tab[aria-current="page"]{background:var(--cream); color:var(--night)}
.shop{font-family:var(--sc); font-size:15px; letter-spacing:.05em; color:var(--gold2); padding:8px 18px; border:1px solid rgba(227,179,92,.45); border-radius:999px; white-space:nowrap; transition:background .3s, color .3s}
.shop:hover{background:var(--gold); color:#23180a}

/* ============ VIEWS ============ */
.body{position:relative; flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); isolation:isolate}
.view{display:none; min-height:0; min-width:0}
.app[data-view="tale"] .tale{display:block}
.app[data-view="residents"] .body{grid-template-columns:minmax(0,1fr) clamp(300px,27vw,400px)}
.app[data-view="residents"] .cast{display:flex}
.app[data-view="residents"] .board, .app[data-view="notes"] .board{display:flex}

/* ============ THE TALE ============ */
.tale{position:relative; height:100%}
.page{display:none; position:relative; height:100%; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,90px); align-items:center;
  padding:clamp(20px,4vh,56px) clamp(16px,7vw,120px) 112px}
.page.is-active{display:grid; animation:inky .8s ease both}
.side{position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center}
.num{font-style:italic; font-size:clamp(96px,13vw,210px); line-height:.82; padding-right:.1em;
  background:linear-gradient(180deg,var(--gold2),#a8741f); -webkit-background-clip:text; background-clip:text; color:transparent}
.ch{margin-top:18px; font-family:var(--sc); font-weight:400; font-size:clamp(22px,2.3vw,32px); letter-spacing:.08em}
.ch::after{content:""; display:block; width:64px; height:1px; margin-top:16px; background:var(--gold); opacity:.7}
.text{font-size:clamp(19px,1.72vw,27px); line-height:1.62; max-width:31em; text-wrap:pretty}
.text p + p{margin-top:.85em}
.drop::first-letter{float:left; font-size:3.4em; line-height:.8; padding:.06em .1em 0 0; color:var(--gold)}
.who{color:var(--gold2); border-bottom:1px dotted rgba(244,211,142,.6); transition:color .2s, border-color .2s}
.who:hover{color:#fff; border-bottom-color:#fff}
.boom{display:inline-block; font-family:var(--sc); font-size:1.5em; line-height:1; color:#fff3cf; text-shadow:0 0 22px rgba(255,214,120,.9); animation:pop .9s cubic-bezier(.2,1.6,.4,1) .75s both}
.fin{font-style:italic; letter-spacing:.04em; color:var(--gold2)}
.sig{display:inline-block; margin-top:6px; font-family:"Caveat", cursive; font-weight:700; font-size:clamp(40px,4vw,58px); line-height:1.1; color:var(--gold2); animation:write 2.2s steps(22) .6s both}
.all{display:block; font-style:italic; color:var(--dim); font-size:.8em}

/* turning pages */
.turn{position:absolute; left:clamp(16px,7vw,120px); right:clamp(16px,7vw,120px); bottom:30px; display:flex; align-items:center; justify-content:space-between; gap:18px}
.app[data-page="0"] .turn{display:none}
.prog{position:relative; flex:1; max-width:340px; padding-bottom:10px; text-align:center; font-style:italic; font-size:14px; color:var(--dim)}
.prog::before, .prog::after{content:""; position:absolute; left:0; bottom:0; height:2px; border-radius:2px}
.prog::before{right:0; background:rgba(244,234,211,.14)}
.prog::after{width:var(--p,0%); background:var(--gold); transition:width .6s}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:999px; border:1px solid rgba(244,234,211,.28); background:none; cursor:pointer;
  font-family:var(--sc); font-size:16px; letter-spacing:.06em; color:var(--cream); white-space:nowrap; transition:background .3s, color .3s, box-shadow .3s, transform .3s}
.btn:hover{background:rgba(244,234,211,.1); transform:translateY(-1px)}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#23180a}
.btn-gold:hover{background:var(--gold2); box-shadow:0 0 30px rgba(227,179,92,.45)}

/* the cover */
.page.cover{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; padding-bottom:40px}
.cover-inner{max-width:980px; display:flex; flex-direction:column; align-items:center}
.kicker{font-family:var(--sc); font-size:15px; letter-spacing:.32em; color:var(--gold)}
.title{margin:18px 0 20px; font-weight:400; font-size:clamp(58px,10.5vw,158px); line-height:.92; text-shadow:0 0 50px rgba(227,179,92,.3); animation:rise 1.2s ease .1s both}
.lede{font-style:italic; font-size:clamp(18px,1.7vw,24px); max-width:32em; color:var(--cream2); animation:rise 1.2s ease .35s both}
.ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; animation:rise 1.2s ease .55s both}
.meet{margin-top:44px; max-width:900px; text-wrap:balance; animation:rise 1.2s ease .75s both}
.meet > span{display:block; margin-bottom:10px; font-family:var(--sc); letter-spacing:.2em; font-size:12px; color:var(--dim)}
.meet a{display:inline-block; margin:3px 5px; padding:3px 12px; border-radius:999px; font-size:15px; font-style:italic; color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent); transition:background .25s, color .25s}
.meet a:hover{background:var(--c); color:var(--night)}

/* little moments on certain pages */
.m-bean .side::after{content:""; position:absolute; left:0; bottom:14%; width:36px; height:22px; border-radius:50%;
  background:linear-gradient(115deg,#ff6f91,#ffd166 40%,#7be0b5 70%,#7fa8ff); box-shadow:0 0 22px 6px rgba(255,209,102,.4);
  animation:bounce 3s cubic-bezier(.33,.66,.5,1) .4s both, glow 2.4s ease-in-out 3.4s infinite}
.page.m-giant.is-active{animation:inky .8s ease both, thud .7s ease .15s both}
.m-giant::after{content:""; position:absolute; top:10%; right:8%; width:200px; height:2px; border-radius:2px; rotate:-34deg; transform-origin:left center;
  background:linear-gradient(90deg,#fffbe8,rgba(255,240,200,0)); box-shadow:0 0 12px 2px rgba(255,240,200,.5); animation:fall 1.5s ease-in 1s both}
.m-boom::after{content:""; position:absolute; inset:-300px; z-index:3; pointer-events:none;
  background:radial-gradient(circle at 30% 50%, #fffbea 0%, rgba(255,240,200,.9) 25%, rgba(255,214,140,0) 65%); animation:flash 1.8s ease-out .7s both}
.wins{display:grid; grid-template-columns:repeat(6,22px); gap:14px 16px; margin-top:34px}
.wins b{display:block; height:32px; border-radius:11px 11px 2px 2px; background:rgba(255,214,120,.05); border:1px solid rgba(255,214,120,.18);
  animation:lit .9s ease forwards, flicker 4s ease-in-out infinite; animation-delay:var(--d,0s), calc(var(--d,0s) + 1s)}

/* ============ THE RESIDENTS ============ */
.cast{flex-direction:column; min-height:0}
.strip{display:flex; gap:26px; overflow-x:auto; padding:18px var(--gutter) 14px; border-bottom:1px solid rgba(244,234,211,.07); scrollbar-width:thin; scrollbar-color:rgba(244,234,211,.2) transparent}
.fam{flex:none}
.fam > p{margin-bottom:8px; font-family:var(--sc); font-size:12px; letter-spacing:.18em; color:var(--dim); white-space:nowrap}
.fam > div{display:flex; gap:8px}
.chip{display:flex; flex-direction:column; align-items:center; gap:6px; width:64px}
.chip span{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; overflow:hidden; font-style:italic; font-size:19px; color:var(--c);
  border:1.5px solid color-mix(in srgb, var(--c) 55%, transparent); background:rgba(255,255,255,.03); transition:all .35s cubic-bezier(.2,.8,.2,1)}
.chip span img{width:100%; height:100%; object-fit:cover}
.chip small{font-size:12.5px; color:var(--dim); white-space:nowrap; transition:color .3s}
.chip:hover span{translate:0 -3px; border-color:var(--c)}
.chip:hover small{color:var(--cream)}
.chip[aria-current="true"] span{background:var(--c); color:var(--night); box-shadow:0 0 26px 2px color-mix(in srgb, var(--c) 60%, transparent); scale:1.1}
.chip[aria-current="true"] small{color:var(--cream)}

.profile-wrap{position:relative; flex:1; min-height:0; overflow:auto}
.profile{min-height:100%; display:grid; grid-template-columns:clamp(200px,21vw,300px) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center;
  padding:clamp(18px,3.5vh,44px) var(--gutter); animation:inky .6s ease both;
  background:radial-gradient(55% 75% at 18% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 72%)}
.portrait{aspect-ratio:4/5; padding:8px; border-radius:999px 999px 20px 20px; border:1.5px solid color-mix(in srgb, var(--c) 55%, var(--gold));
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9), 0 0 80px -20px color-mix(in srgb, var(--c) 60%, transparent); animation:float 7s ease-in-out infinite}
.portrait > *{display:grid; place-items:center; width:100%; height:100%; border-radius:999px 999px 14px 14px; object-fit:cover;
  background:radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--c) 70%, #fff 15%), color-mix(in srgb, var(--c) 30%, var(--night)) 75%);
  font-style:italic; font-size:clamp(72px,8vw,128px); color:rgba(255,250,236,.94); text-shadow:0 6px 30px rgba(0,0,0,.35)}
.kin{font-family:var(--sc); font-size:13px; letter-spacing:.2em; color:var(--c)}
.name{margin:6px 0 8px; font-weight:400; font-size:clamp(42px,5vw,78px); line-height:1}
.name:focus{outline:none}
.role{font-style:italic; font-size:clamp(17px,1.4vw,20px); color:var(--cream2); max-width:32em}
.slip{position:relative; max-width:540px; margin:26px 0 24px 4px; padding:24px 26px 20px; background:#f8f0dc; color:var(--ink); rotate:-1.2deg; box-shadow:0 24px 40px -22px rgba(0,0,0,.9)}
.slip::before{content:""; position:absolute; top:-11px; left:50%; width:96px; height:24px; margin-left:-48px; rotate:2deg; background:color-mix(in srgb, var(--c) 55%, rgba(255,255,255,.5)); opacity:.8}
.slip.hand-gnome{background:#d9c49c}
.slip.hand-tulip{line-height:2}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:640px; padding-top:16px; border-top:1px solid rgba(244,234,211,.12)}
.facts dt{font-family:var(--sc); font-size:12px; letter-spacing:.16em; color:var(--c)}
.facts dd{margin-top:2px; font-size:15px; line-height:1.45; color:var(--cream2)}
.aside{margin-top:20px; max-width:560px; rotate:-.8deg}
.aside > span{display:block; margin-bottom:2px; font-family:var(--sc); font-size:12px; letter-spacing:.16em; color:var(--dim)}
.aside > p{color:var(--gold2)}
.aside > p.hand-tulip{font-size:14px}

/* ============ NOTES ============ */
.board{flex-direction:column; min-height:0}
.app[data-view="residents"] .board{border-left:1px solid rgba(244,234,211,.08); background:rgba(0,0,0,.16)}
.board-head{padding:22px var(--gutter) 6px}
.board-head h2{font-family:var(--sc); font-weight:400; font-size:clamp(24px,2.4vw,34px); letter-spacing:.05em}
.board-head p{margin-top:4px; font-style:italic; font-size:15px; color:var(--dim); max-width:46em}
.app[data-view="residents"] .board-head{padding:20px 26px 4px}
.app[data-view="residents"] .board-head h2{font-size:22px}
.app[data-view="residents"] .board-head p{font-size:14px}
.filters{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.app[data-view="residents"] .filters{display:none}
.filter{padding:5px 14px; border-radius:999px; border:1px solid rgba(244,234,211,.2); background:none; cursor:pointer; font-family:var(--sc); font-size:13px; letter-spacing:.06em; color:var(--cream2); transition:background .25s, color .25s}
.filter:hover{background:rgba(244,234,211,.08)}
.filter[aria-pressed="true"]{background:var(--cream); color:var(--night); border-color:var(--cream)}
.notes{flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); align-content:start; gap:30px 26px;
  padding:26px var(--gutter) 40px; scrollbar-width:thin; scrollbar-color:rgba(244,234,211,.2) transparent}
.app[data-view="residents"] .notes{grid-template-columns:minmax(0,1fr); padding:22px 26px 32px; gap:24px}
.empty{font-style:italic; color:var(--dim); padding:10px 0}

/* each writer's paper and hand */
.p-thistle{--paper:#f8f0dc; --hand:"Caveat", cursive; --hs:28px; --hw:500; --w:#b79be6; --inkc:#27407a}
.p-tulip{--paper:#f8f0dc; --hand:"Homemade Apple", cursive; --hs:17px; --hw:400; --w:#f2b447; --inkc:#2b2a4a}
.p-kids{--paper:#fffdf6; --hand:"Gochi Hand", cursive; --hs:24px; --hw:400; --w:#f28bab; --inkc:#3f3f46}
.p-gnomes{--paper:#d9c49c; --hand:"Amatic SC", cursive; --hs:32px; --hw:700; --w:#e5654b; --inkc:#3a2a1a}
.p-tupps{--paper:#efe4cc; --hand:"IM Fell English", Georgia, serif; --hs:22px; --hw:400; --w:#c9a27a; --inkc:#4a3b2c}
.p-other{--paper:#f1eee4; --hand:"Gochi Hand", cursive; --hs:24px; --hw:400; --w:#b8c2cc; --inkc:#33363b}

/* a folded note */
.fold{display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; position:relative;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.55)); rotate:var(--tilt,0deg); transition:rotate .35s ease, translate .35s ease; animation:rise .6s ease both; animation-delay:var(--in,0s)}
.fold:nth-child(4n+1){--tilt:-1.6deg} .fold:nth-child(4n+2){--tilt:1.2deg} .fold:nth-child(4n+3){--tilt:-.6deg} .fold:nth-child(4n+4){--tilt:1.8deg}
.fold:hover, .fold:focus-visible{rotate:0deg; translate:0 -5px; outline:none}
.fold:focus-visible .paper{outline:2px solid var(--gold2); outline-offset:4px}
.fold::before{content:""; position:absolute; z-index:2; top:9px; left:50%; width:13px; height:13px; margin-left:-6px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0, var(--w) 45%, color-mix(in srgb, var(--w) 60%, #000) 100%); box-shadow:0 3px 3px rgba(0,0,0,.45)}
.paper{display:flex; flex-direction:column; gap:10px; min-height:150px; padding:32px 20px 18px; background:var(--paper); color:var(--ink);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.paper::after{content:""; position:absolute; right:0; bottom:0; width:24px; height:24px; background:linear-gradient(315deg, transparent 50%, color-mix(in srgb, var(--paper) 72%, #000) 50%)}
.fold-title{font-family:var(--hand); font-size:var(--hs); font-weight:var(--hw); line-height:1.2; color:var(--inkc)}
.p-tulip .fold-title{line-height:1.7}
.fold-from{margin-top:auto; font-style:italic; font-size:13px; color:#7a6a55}
.tag{align-self:flex-start; display:inline-block; padding:1px 9px; border-radius:3px; font-family:var(--sc); font-size:12px; letter-spacing:.1em; background:#ece0c3; color:#6b4e2e}
.tag-adventure{background:#dbe8c8; color:#3a5a2a}
.tag-misadventure{background:#f3d5cc; color:#8a2f22}
.tag-letter{background:#dce2f2; color:#2d4378}

/* an unfolded note */
.letter{width:min(640px, calc(100vw - 32px)); max-width:none; max-height:calc(100svh - 48px); padding:0; border:0; background:transparent; color:var(--ink); overflow:visible}
.letter[open]{animation:unfold .5s cubic-bezier(.2,.9,.25,1) both}
.letter::backdrop{background:rgba(4,8,20,.76); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
.fold-away{position:absolute; right:0; bottom:calc(100% + 10px); padding:6px 4px; border:0; background:none; cursor:pointer; font-style:italic; font-size:15px; color:var(--cream2)}
.fold-away:hover{color:#fff}
.paper-open:focus{outline:none}
.paper-open{max-height:calc(100svh - 110px); overflow:auto; padding:40px 42px 34px; background:var(--paper); box-shadow:0 50px 90px -30px rgba(0,0,0,.95)}
.open-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; font-style:italic; font-size:13px; color:#7a6a55}
.paper-open h3{margin-bottom:10px; font-family:var(--sc); font-weight:400; font-size:26px; letter-spacing:.03em; line-height:1.2}
.read{font-family:var(--hand); font-size:var(--hs); font-weight:var(--hw); line-height:1.35; color:var(--inkc)}
.read > * + *{margin-top:.7em}
.read ol{padding-left:1.6em}
.read li{padding-left:.2em}
.p-tulip .read{font-size:15px; line-height:34px}
.p-tulip .read > * + *{margin-top:34px}
.p-tulip .paper-open{background-image:repeating-linear-gradient(180deg, transparent 0 33px, rgba(70,100,160,.16) 33px 34px); background-position:0 88px; background-attachment:local}
.p-tupps .read{font-style:italic; font-size:18px; line-height:1.55}
.p-other .read, .p-kids .read{font-size:21px}
.p-gnomes .read{font-size:27px; line-height:1.18}
.sign{margin-top:14px}

/* handwriting you can use anywhere */
.hand-tulip{font-family:"Homemade Apple", cursive; font-size:15px; line-height:1.9; font-weight:400; color:#2b2a4a}
.hand-thistle{font-family:"Caveat", cursive; font-weight:500; font-size:24px; line-height:1.3; color:#27407a}
.hand-kids{font-family:"Gochi Hand", cursive; font-size:21px; line-height:1.4; color:#3f3f46}
.hand-gnome{font-family:"Amatic SC", cursive; font-weight:700; font-size:28px; line-height:1.15; color:#3a2a1a}
.hand-tupps{font-family:"IM Fell English", Georgia, serif; font-style:italic; font-size:18px; line-height:1.55; color:#4a3b2c}
.big{font-size:1.35em; line-height:1.2}
.tiny{font-size:13px; letter-spacing:.05em}
.scribble{display:inline-block; font-family:"Amatic SC", cursive; font-weight:700; font-size:26px; line-height:1.1; color:#8a2a1a; rotate:-2deg}
.crawl{font-family:"Gochi Hand", cursive; font-size:16px; color:#5b5b66}
.right{display:block; text-align:right}
.under{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.up{display:inline-block; font-size:.7em; translate:0 -.7em; margin:0 .15em}
.reply{margin-top:30px !important; padding-top:18px; border-top:1px dashed rgba(60,40,20,.25)}
.noscript{position:fixed; inset:auto 16px 16px; padding:14px 18px; background:var(--cream); color:var(--ink); border-radius:8px}

/* ============ MOTION ============ */
@keyframes inky{from{opacity:0; filter:blur(6px)}to{opacity:1; filter:blur(0)}}
@keyframes rise{from{opacity:0; translate:0 18px}to{opacity:1; translate:0 0}}
@keyframes unfold{from{opacity:0; scale:.92; rotate:-3deg}to{opacity:1; scale:1; rotate:0deg}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes drift{from{translate:0 0}to{translate:3vw -6vh}}
@keyframes drift2{from{translate:0 0}to{translate:-4vw -5vh}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes bounce{0%{translate:0 -240px; rotate:0deg}16%{translate:60px 0}30%{translate:115px -120px}44%{translate:165px 0}56%{translate:200px -55px}68%{translate:230px 0}78%{translate:250px -20px}88%{translate:264px 0}100%{translate:272px 0; rotate:380deg}}
@keyframes glow{0%,100%{box-shadow:0 0 22px 6px rgba(255,209,102,.35)}50%{box-shadow:0 0 40px 14px rgba(255,209,102,.6)}}
@keyframes thud{0%,100%{translate:0 0}15%{translate:0 7px}30%{translate:-5px -3px}45%{translate:4px 3px}60%{translate:-2px -1px}75%{translate:1px 1px}}
@keyframes fall{0%{opacity:0; translate:0 0}8%{opacity:1}100%{opacity:0; translate:-520px 340px}}
@keyframes flash{0%{opacity:0}7%{opacity:1}100%{opacity:0}}
@keyframes pop{0%{opacity:0; scale:.3}100%{opacity:1; scale:1}}
@keyframes lit{to{background:#f5c56a; border-color:#f5c56a; box-shadow:0 0 18px 2px rgba(245,197,106,.55)}}
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.82}60%{opacity:.96}78%{opacity:.86}}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition:none !important}
}

/* ============ SMALLER SCREENS ============ */
@media (max-width:900px){
  body{font-size:16px}
  .app{height:auto; min-height:100svh; overflow:clip}
  .bar{flex-wrap:wrap; gap:12px; padding:14px 16px}
  .nav{order:3; width:100%; justify-content:space-between}
  .tab{flex:1; text-align:center; padding:8px 6px; font-size:14px}
  .shop{padding:6px 14px; font-size:13px}
  .body{display:block}
  .tale{height:auto}
  .page{height:auto; min-height:calc(100svh - 120px); grid-template-columns:minmax(0,1fr); align-content:center; gap:22px; padding:28px 16px 110px}
  .page.cover{padding-bottom:40px}
  .side{flex-direction:row; align-items:flex-end; gap:16px}
  .num{font-size:84px}
  .ch{margin:0 0 6px}
  .ch::after{display:none}
  .text{font-size:19px}
  .turn{position:fixed; left:0; right:0; bottom:0; z-index:5; padding:18px 16px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, rgba(10,19,40,0), #0a1328 40%)}
  .app:not([data-view="tale"]) .turn{display:none}
  .btn{padding:11px 18px; font-size:15px}
  .prog{font-size:13px}
  .wins{position:absolute; right:0; bottom:0; grid-template-columns:repeat(4,14px); gap:8px; margin:0}
  .wins b{height:20px; border-radius:7px 7px 2px 2px}
  .m-bean .side::after{bottom:auto; top:-24px; left:auto; right:280px}
  .app[data-view="residents"] .body{display:block}
  .app[data-view="residents"] .cast{display:block}
  .strip{gap:18px; padding:16px}
  .profile-wrap{overflow:visible}
  .profile{min-height:0; grid-template-columns:minmax(0,1fr); gap:18px; padding:24px 16px 30px;
    background:radial-gradient(90% 40% at 50% 12%, color-mix(in srgb, var(--c) 24%, transparent), transparent 75%)}
  .portrait{width:150px; justify-self:center}
  .portrait > *{font-size:64px}
  .me{text-align:center}
  .slip{text-align:left; margin:22px 4px}
  .facts{grid-template-columns:minmax(0,1fr); gap:10px; text-align:left}
  .aside{text-align:left}
  .app[data-view="residents"] .board{border-left:0; border-top:1px solid rgba(244,234,211,.08)}
  .board-head, .app[data-view="residents"] .board-head{padding:22px 16px 4px}
  .notes, .app[data-view="residents"] .notes{overflow:visible; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); padding:22px 16px 36px}
  .paper-open{padding:32px 24px 28px}
}