/* Pip's Feelings Club. The page is Pip's kindy folder: tabbed dividers, paper sheets, a reply card.
   Colours and fonts come from SHOW_BIBLE.md. Five type sizes only (the --t-* steps). */
@font-face{font-family:Sniglet;font-weight:400;font-display:swap;src:url(fonts/sniglet-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Sniglet;font-weight:800;font-display:swap;src:url(fonts/sniglet-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Andika;font-weight:400;font-display:swap;src:url(fonts/andika-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Andika;font-weight:700;font-display:swap;src:url(fonts/andika-latin-700-normal.woff2) format("woff2")}

:root{
  --pink:#FF9AA2; --orange:#FFC88C; --yellow:#FFEC96; --green:#AAE1AA; --blue:#A0C8F5;
  --plum:#5B3A9B; --ink:#222; --paper:#FFFCF0; --paper-2:#F3ECD6; --muted:#55506A;
  --m:clamp(16px,2.5vw,36px);            /* the one pair of page margins */
  --gap:clamp(96px,11vw,176px);          /* between sections */
  --t-display:clamp(40px,6.4vw,124px); --t-h2:clamp(34px,4.4vw,68px); --t-lead:clamp(21px,1.9vw,28px); --t-body:18px; --t-small:15px;
  --r:14px; --ease:cubic-bezier(.2,.7,.2,1);
  --tab-cut:polygon(16px 0,calc(100% - 16px) 0,100% 100%,0 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.55 Andika,system-ui,sans-serif}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2{font-family:Sniglet,system-ui,sans-serif;font-weight:800;line-height:1;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-h2)}
h3{font:400 var(--t-lead)/1.15 Sniglet,system-ui,sans-serif}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:2px}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
.hero :focus-visible,.lib-head :focus-visible,.watch-head :focus-visible,.join :focus-visible{outline-color:var(--paper)}
::selection{background:var(--yellow);color:var(--ink)}
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);padding:10px 16px;z-index:9}
.skip:focus{left:8px}
.bg-pink{background-color:var(--pink)} .bg-orange{background-color:var(--orange)} .bg-yellow{background-color:var(--yellow)}
.bg-green{background-color:var(--green)} .bg-blue{background-color:var(--blue)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);
  font:400 var(--t-body)/1 Sniglet,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-3px);background:var(--plum)}
.btn:active{transform:translateY(1px)}
.btn-quiet{background:var(--paper);color:var(--ink)}
.btn-quiet:hover{background:var(--ink);color:var(--paper)}

/* ---------- top row ---------- */
.topnav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);min-height:72px;font-size:17px}
.topnav a{text-decoration:none;padding:8px 0}
.topnav a:hover{text-decoration:underline}
.topnav-end{margin-left:auto}
.wordmark{font:800 var(--t-lead)/1 Sniglet,system-ui,sans-serif;margin-right:auto}
.wordmark + a{margin-left:0}
.wordmark ~ .topnav-end{margin-left:0}

/* ---------- hero: the folder stack ---------- */
.hero,.lib-head,.watch-head{background:var(--plum);color:var(--paper);padding:0 var(--m)}
.hero h1,.lib-head h1{text-align:center;margin-top:clamp(20px,4.5vh,56px);animation:rise .7s var(--ease) both}
.hero-lead{font-size:var(--t-lead);line-height:1.4}
.hero .hero-lead,.lib-head .hero-lead{text-align:center;max-width:46ch;margin:22px auto 0;animation:rise .7s .08s var(--ease) both}
.stack{position:relative;width:min(86vw,1400px);margin:clamp(88px,11vh,124px) auto 0;display:flex;flex-direction:column}
.folder{position:relative;display:flex;align-items:center;justify-content:flex-end;width:100%;height:64px;padding:0 28px;border:0;color:var(--ink);font:inherit;
  text-decoration:none;text-align:right;cursor:pointer;animation:rise .6s var(--ease) both;transition:transform .25s var(--ease)}
.folder:nth-child(1){animation-delay:.16s} .folder:nth-child(2){animation-delay:.23s} .folder:nth-child(3){animation-delay:.3s}
.folder:nth-child(4){animation-delay:.37s} .folder:nth-child(5){animation-delay:.44s}
.tab{position:absolute;bottom:calc(100% - 1px);left:var(--x);display:flex;align-items:center;height:40px;padding:0 32px;background:inherit;clip-path:var(--tab-cut);
  font:400 var(--t-body)/1 Sniglet,system-ui,sans-serif;white-space:nowrap}
.folder-line{font-size:16px;line-height:1.25}
a.folder:hover,button.folder:hover{transform:translateY(-8px)}
a.folder:hover .tab,button.folder:hover .tab{text-decoration:underline}
.folder.front{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:start;height:auto;padding:40px 28px 0;text-align:left;cursor:default}
.front-title{font:400 var(--t-lead)/1.15 Sniglet,system-ui,sans-serif;margin-bottom:10px}
.front-copy .btn{margin:22px 0 40px}
.front-video{display:block;align-self:end}
.front-video video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r) var(--r) 0 0;transition:transform .5s var(--ease);transform-origin:50% 100%}
.front-video:hover video{transform:scale(1.02)}
/* the birds stand on the top edge of the back folder */
.perch{position:absolute;bottom:calc(100% + 256px - 6px);z-index:2;pointer-events:none;animation:hop .7s .7s var(--ease) both}
.perch-pip{right:3%;width:clamp(80px,9.6vw,150px)}
.perch-rory{right:calc(3% + clamp(86px,10.4vw,162px));width:clamp(58px,6.8vw,106px);animation-delay:.85s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes hop{0%{opacity:0;transform:translateY(-60px)}60%{opacity:1;transform:translateY(0)}78%{transform:translateY(-12px)}100%{transform:translateY(0)}}

/* ---------- our story ---------- */
main > section{padding:var(--gap) var(--m)}
.story-top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
.story-top h2{grid-column:1 / 8}
.story-note{grid-column:9 / 13}
.facts{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(64px,8vw,112px)}
.facts strong{display:block;font:400 clamp(26px,3vw,44px)/1.1 Sniglet,system-ui,sans-serif}
.facts span{display:block;margin-top:8px;font-size:var(--t-small);color:var(--muted)}
.story-body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start;margin-top:clamp(64px,8vw,112px)}
.story-text{grid-column:1 / 7;font-size:var(--t-lead);line-height:1.45}
.story-text p + p{margin-top:1em}
.story-pic{grid-column:8 / 13}
.story-pic img{width:100%;border-radius:var(--r)}
.story-pic figcaption{margin-top:10px;font-size:var(--t-small);color:var(--muted)}

/* ---------- how an episode goes: a row to drag ---------- */
main > section.how{padding-left:0;padding-right:0}
.how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--m)}
.how-btns{display:flex;gap:8px}
.sq{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);cursor:pointer;transition:transform .18s var(--ease),background-color .18s}
.sq:hover{transform:translateY(-3px);background:var(--plum)}
.sq:active{transform:translateY(1px)}
.how-bar{height:6px;margin:28px var(--m) 0;background:#E9D36F;border-radius:3px;overflow:hidden}
.how-bar span{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,.2));transition:transform .2s linear}
.how-row{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--m);padding:40px var(--m) 8px;scrollbar-width:none;cursor:grab}
.how-row::-webkit-scrollbar{display:none}
.moment{flex:0 0 clamp(264px,26vw,360px);scroll-snap-align:start;display:flex;flex-direction:column}
.moment h3{font:700 var(--t-body)/1.3 Andika,system-ui,sans-serif}
.moment p{margin-top:8px;font-size:16px;line-height:1.5;min-height:4.5em}
.moment img{margin-top:var(--gap);width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}

/* ---------- all 25: the shelf of spines ---------- */
.shelf-head{display:flex;align-items:baseline;gap:clamp(24px,5vw,80px);flex-wrap:wrap}
.shelf-head p{max-width:44ch}
.shelf-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;margin-top:56px}
.spines{display:flex;gap:6px;height:460px}
.spines li{flex:1 1 0;min-width:0;max-width:40px}
.spine{display:flex;align-items:center;gap:12px;width:100%;height:100%;padding:14px 0 0;writing-mode:vertical-rl;background:var(--paper-2);color:var(--ink);
  font:400 17px/1 Sniglet,system-ui,sans-serif;white-space:nowrap;text-decoration:none;overflow:hidden;transition:background-color .2s,color .2s,transform .25s var(--ease)}
.spine-tool{padding:10px 3px;font:400 var(--t-small)/1 Andika,system-ui,sans-serif;color:var(--ink)}
.spine.is-out{background:var(--plum);color:var(--paper)}
.spine:hover,.spine:focus-visible,.spine.is-on{background:var(--ink);color:var(--paper);transform:translateY(-10px)}
.preview{display:flex;flex-direction:column;gap:6px;height:460px;padding:24px;border-radius:var(--r);color:var(--ink);text-decoration:none;overflow:hidden;transition:background-color .24s}
.preview > *{transition:opacity .24s}
.preview.is-swapping > *{opacity:0}
.preview img{width:auto;height:190px;object-fit:contain;object-position:0 100%;margin-bottom:auto}
.preview-status{font-size:var(--t-small)}
.preview-title{font:800 var(--t-lead)/1.1 Sniglet,system-ui,sans-serif}
.preview-when{line-height:1.35}
.preview-say{font-size:var(--t-small);line-height:1.35}
.shelf-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:48px}

/* ---------- the packs: sheets standing along the edge ---------- */
main > section.packs{position:relative;overflow:hidden;padding-bottom:0;color:var(--paper)}
.packs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.packs-top{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.packs-copy{grid-column:1 / 7;padding:clamp(24px,3vw,44px);background:rgba(34,34,34,.84);border-radius:var(--r)}
.packs-copy > p{margin-top:20px;font-size:var(--t-lead);line-height:1.4}
.namer{margin-top:28px}
.namer label{display:block;font-size:16px;margin-bottom:10px}
.namer-row{display:flex;flex-wrap:wrap;gap:12px}
.namer input{flex:1 1 200px;min-width:0;height:56px;padding:0 24px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:400 20px/1 Andika,system-ui,sans-serif}
.namer input::placeholder{color:#6B6680}
.packs .btn{background:var(--yellow);color:var(--ink)}
.packs .btn:hover{background:var(--paper)}
.namer-note{margin-top:12px;font-size:var(--t-small)}
.live{grid-column:8 / 13;--s:.6}
.live-sheet,.live-badge,.sheet-live{position:relative;overflow:hidden;background:#fff;border-radius:var(--r)}
.live-sheet{height:calc(600px * var(--s))}
.live-badge{height:calc(96px * var(--s));margin-top:12px}
.sheet-live{aspect-ratio:794/1123;--s:.3}
iframe[data-sheet]{position:absolute;left:0;top:0;width:794px;height:1123px;border:0;transform-origin:0 0;transform:scale(var(--s));pointer-events:none}
.live-badge iframe{transform:scale(var(--s)) translateY(-1012px)}
.slips{position:relative;display:flex;align-items:flex-end;gap:12px;margin:clamp(48px,6vw,88px) calc(var(--m) * -1) 0;padding:0 12px}
.slips li{flex:1 1 0;min-width:0;aspect-ratio:1 / var(--h);overflow:hidden;background:#fff;transform:rotate(var(--tilt));transform-origin:50% 100%;margin-bottom:-10px;transition:transform .35s var(--ease)}
.slips li:hover{transform:rotate(0deg) translateY(-14px)}
.slips img{width:100%}

/* ---------- what's hard right now ---------- */
.helps-head{display:flex;align-items:baseline;gap:clamp(24px,5vw,80px);flex-wrap:wrap}
.helps-head p{max-width:40ch}
.deck{display:flex;gap:6px;height:380px;margin-top:56px}
.hcard{position:relative;flex:0 0 clamp(52px,6vw,84px);min-width:0;overflow:hidden;transition:flex-basis .45s var(--ease),flex-grow .45s var(--ease)}
.hcard.is-open{flex:1 1 320px}
.tone-0{background:#AAE1AA} .tone-1{background:#C6EDC6} .tone-2{background:#8ED68E}
.hcard-tab{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:24px 0 0;border:0;background:none;color:var(--ink);cursor:pointer;
  font:400 var(--t-body)/1 Sniglet,system-ui,sans-serif;writing-mode:vertical-rl;white-space:nowrap}
.hcard.is-open .hcard-tab{display:none}
.hcard-tab:hover{text-decoration:underline}
.hcard-body{display:none;width:max(320px,36vw);padding:32px}
.hcard.is-open .hcard-body{display:block;animation:rise .45s var(--ease) both}
.hcard-body h3{font:800 var(--t-lead)/1.1 Sniglet,system-ui,sans-serif}
.hcard-body ul{margin-top:24px;display:grid;gap:14px}
.hcard-body a{font:400 var(--t-lead)/1.15 Sniglet,system-ui,sans-serif}
.hcard-body li span{display:block;font-size:16px}
.helps-foot{margin-top:40px}

/* ---------- questions: index cards in a drawer ---------- */
.faq h2,.faq .cards{margin-left:16.66%;margin-right:16.66%}
.cards{margin-top:clamp(96px,9vw,128px);display:flex;flex-direction:column}
.qcard{position:relative}
.qcard summary{background-color:inherit;display:flex;align-items:center;min-height:96px;padding:12px 32px;list-style:none;cursor:pointer;font-size:var(--t-lead);line-height:1.2}
.qcard summary::-webkit-details-marker{display:none}
.qcard summary:hover .q{text-decoration:underline}
.qcard > p{max-width:50ch;padding:0 32px 72px}
.qcard:last-child > p{padding-bottom:40px}

/* ---------- join: the reply card ---------- */
main > section.join{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;min-height:80svh;
  padding-bottom:0;background:var(--plum);color:var(--paper)}
.join-side{grid-column:1 / 5;padding-bottom:64px}
.join-side img{width:clamp(150px,16vw,240px);margin-bottom:24px}
.join-side p{font-size:var(--t-lead);line-height:1.4}
.reply{grid-column:6 / 13;min-height:min(31vw,460px);padding:clamp(28px,4vw,56px);background:var(--paper);color:var(--ink);text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:20px;rotate:2deg;margin-bottom:-60px;padding-bottom:calc(clamp(28px,4vw,56px) + 84px)}
.reply p{max-width:34ch;margin:0 auto}
.reply-bar{display:flex;align-items:center;justify-content:center;min-height:60px;background:var(--ink);color:var(--paper);text-decoration:none;
  font:400 var(--t-lead)/1 Sniglet,system-ui,sans-serif;transition:background-color .18s}
.reply-bar:hover{background:var(--plum)}

.joinform{display:grid;gap:10px;text-align:left}
.joinform label{font-size:16px}
.joinform input[type=email]{width:100%;height:56px;padding:0 20px;border:3px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:400 var(--t-body)/1 Andika,system-ui,sans-serif}
.joinform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.joinform .reply-bar{width:100%;border:0;cursor:pointer}
.joinform .reply-bar[disabled]{background:var(--muted);cursor:default}
.join-msg{max-width:none;margin:0;font-size:var(--t-small);text-align:center}
.join-msg.is-ok{font-size:var(--t-body);font-weight:700}
.join-msg.is-bad{color:#A3261B;font-weight:700}

/* ---------- small message pages: check your inbox, welcome, leaving ---------- */
body.note{min-height:100svh;display:grid;place-items:center;padding:var(--m);background:var(--plum)}
.note-card{width:min(100%,560px);padding:clamp(28px,5vw,56px);background:var(--paper);text-align:center}
.note-card img{width:130px;margin:0 auto 20px}
.note-card h1{font-size:var(--t-h2)}
.note-card p{margin-top:18px}
.note-card form p{margin-top:18px}

/* ---------- footer: the back of the card ---------- */
.foot{background:var(--blue);padding:clamp(96px,10vw,150px) var(--m) 56px}
.postcard{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:32px clamp(32px,6vw,96px);width:min(100%,1180px);margin:0 auto;padding:clamp(28px,4vw,56px);background:var(--paper)}
.postcard::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:49px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='49'%3E%3Ccircle cx='49' cy='49' r='49' fill='%23FFFCF0'/%3E%3C/svg%3E") 0 0/98px 49px repeat-x}
.signoff{font:800 var(--t-lead)/1.1 Sniglet,system-ui,sans-serif;margin-bottom:14px}
.postcard-msg p + p{margin-top:12px}
.fine{font-size:var(--t-small);color:var(--muted)}
.postcard-address{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-right:110px}
.stamp{position:absolute;right:0;top:0;width:88px;height:auto;padding:6px;background:var(--paper-2)}
.imprint{grid-column:1 / -1;text-align:center;font-size:13px;color:var(--muted)}

/* ---------- the episodes library ---------- */
.stack-filter{margin-top:clamp(88px,11vh,124px)}
button.folder[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lib{padding:72px var(--m) var(--gap)}
.finder{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px}
.finder-field{flex:1 1 260px;max-width:420px}
.finder label{display:block;font:400 var(--t-lead)/1.1 Sniglet,system-ui,sans-serif;margin-bottom:10px}
.finder select,.finder input{width:100%;height:56px;padding:0 24px;border:0;border-radius:999px;background:var(--paper-2);color:var(--ink);font:400 var(--t-body)/1 Andika,system-ui,sans-serif}
.finder .btn-quiet{background:var(--paper-2)}
.finder .btn-quiet:hover{background:var(--ink)}
.finder-count{margin-top:16px;color:var(--muted)}
main > section.block,.lib .block{padding:0;margin-top:clamp(64px,8vw,112px)}
.rows{margin-top:28px;display:grid;gap:10px}
.row{display:grid;grid-template-columns:112px minmax(0,1.15fr) minmax(0,1fr) 170px;gap:clamp(16px,2.4vw,36px);align-items:center;scroll-margin-top:24px;transition:transform .25s var(--ease)}
.row:target .row-art{outline:6px solid var(--ink)}
.row-art{display:grid;place-items:center;width:112px;height:112px;border-radius:var(--r);overflow:hidden}
.row-art img{width:78%;height:78%;object-fit:contain;transition:transform .3s var(--ease)}
.row:hover .row-art img{transform:scale(1.1) rotate(-4deg)}
.row-main p,.row-tool p{line-height:1.4}
.row-go{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:6px;font-size:var(--t-small)}
.soon{color:var(--muted)}
.finder-count,.row-main p,.row-tool p,.block h2 + .rows p{max-width:60ch}
.lib-empty{margin-top:56px;font-size:var(--t-lead)}
[hidden]{display:none !important}

/* ---------- the privacy page ---------- */
.doc-head{padding-bottom:clamp(48px,7vw,104px)}
.doc-body{padding:clamp(56px,7vw,104px) var(--m) var(--gap)}
main.doc-body > section{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:0}
main.doc-body > section + section{margin-top:clamp(48px,6vw,88px)}
.doc-body h2{grid-column:1 / 5;font:800 var(--t-lead)/1.15 Sniglet,system-ui,sans-serif;letter-spacing:0}
.doc-body section > div{grid-column:5 / 12;max-width:62ch}
.doc-body p + p{margin-top:14px}

/* ---------- the watch page ---------- */
.watch-head{padding-bottom:clamp(32px,5vw,72px)}
.watch-stage{width:min(100%,calc((100svh - 300px) * 16 / 9),1180px);min-width:min(100%,560px);margin:0 auto}
.watch-stage video{width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r)}
.watch-info{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.watch-title{grid-column:1 / 8}
.watch-head h1{font-size:var(--t-h2);text-align:center;margin-top:clamp(12px,2vh,28px)}
.watch-head .hero-lead{text-align:center;margin:14px auto 28px;max-width:46ch}
.watch-title p{margin-top:18px;max-width:46ch}
.toolcard{grid-column:9 / 13;padding:28px;border-radius:var(--r)}
.toolcard img{height:170px;width:auto;object-fit:contain;margin-bottom:20px}
.toolcard .say{font:400 var(--t-lead)/1.2 Sniglet,system-ui,sans-serif}
.watch-pack-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.watch-pack-head h2{grid-column:1 / 6}
.watch-pack-head .namer{grid-column:7 / 13;margin-top:0}
.watch-pack .btn-quiet:hover{background:var(--ink)}
.sheets{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.sheets img{border-radius:var(--r)}
.sheets p{margin-top:10px}
.watch-next .rows{margin-bottom:40px}

/* ---------- arriving on scroll (only when script is running) ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.in,.rv-all .rv{opacity:1;transform:none}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .folder-line{display:none}
  .shelf-body{grid-template-columns:1fr;gap:28px}
  .spines{display:flex;flex-wrap:wrap;gap:8px;height:auto}
  .spines li{flex:none;max-width:none}
  .spine{writing-mode:horizontal-tb;height:44px;padding:0 16px;border-radius:999px}
  .spine-tool{display:none}
  .spine:hover,.spine:focus-visible,.spine.is-on{transform:none}
  .preview{height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 20px}
  .preview img{height:120px;margin:0}
  .preview-title{flex-basis:60%}
  .faq h2,.faq .cards{margin-left:0;margin-right:0}
}
@media (max-width:820px){
  .topnav{flex-wrap:wrap;gap:4px 18px;padding-top:10px}
  .folder{height:56px;padding:0 16px}
  .folder .tab{left:var(--xm);height:34px;padding:0 22px;font-size:16px}
  .folder-line{display:none}
  .folder.front{grid-template-columns:1fr;gap:8px;padding:28px 16px 0}
  .front-copy .btn{width:100%;margin:18px 0 24px}
  .perch{bottom:calc(100% + 224px - 4px)}
  .stack{width:100%}
  .hero,.lib-head{padding-left:var(--m);padding-right:var(--m)}
  .story-top,.story-body,.packs-top,.watch-info,.watch-pack-head,main.doc-body > section{display:block}
  .doc-body h2{margin-bottom:14px}
  .story-note{margin-top:20px}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px}
  .story-pic{margin-top:40px}
  .moment{flex-basis:72vw}
  .moment img{margin-top:clamp(32px,var(--gap),64px)}
  .moment:nth-child(even) img{margin-top:56px}
  .how-btns{display:none}
  .how-row{gap:16px}
  .live{margin-top:24px}
  .slips{overflow-x:auto;scrollbar-width:none}
  .slips li{flex:0 0 30vw}
  .deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));height:auto;gap:12px}
  .hcard,.hcard.is-open{flex:none}
  .hcard-tab{display:none}
  .hcard-body{display:block;width:auto;padding:24px}
  .qcard summary{padding:12px 20px;min-height:88px}
  .qcard > p{padding:0 20px 64px}
  .qcard .tab{left:var(--xm);height:34px;padding:0 22px;font-size:16px}
  main > section.join{display:block;min-height:0}
  .join-side{padding-bottom:40px}
  .reply{width:92%;margin:0 auto -40px;rotate:1deg;aspect-ratio:auto;padding:36px 22px 76px}
  .postcard{grid-template-columns:1fr}
  .row{grid-template-columns:84px 1fr;gap:6px 16px;align-items:start;padding:8px 0}
  .row-art{width:84px;height:84px;grid-row:1 / span 3}
  .row-go{flex-direction:row;align-items:center;text-align:left;gap:12px}
  .toolcard{margin-top:40px}
  .watch-pack-head .namer{margin-top:28px}
  .sheets{grid-template-columns:1fr 1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv{opacity:1;transform:none}
}