/* Shared with wombbloom.org/links: copied from links.py CSS. Keep the two in step. */

:root{--clay:#8A4B2A;--clay-d:#6E3A20;--sand:#F7F0E7;--paper:#FFFDF9;--blush:#EAD3C4;--rose:#D98C8C;--sage:#6F7F62;
--ink:#2B211C;--muted:#6B5D53;--line:#E6D9CB;--display:'Fraunces',Georgia,serif;--body:'Figtree',system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.55 var(--body);background:var(--sand);overflow-x:hidden}
img{max-width:100%;display:block}picture{display:block}a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:14px}
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
 radial-gradient(60vmax 60vmax at 85% -10%,rgba(217,140,140,.28),transparent 60%),
 radial-gradient(50vmax 50vmax at -10% 30%,rgba(111,127,98,.16),transparent 60%),
 radial-gradient(70vmax 50vmax at 50% 110%,rgba(234,211,196,.9),transparent 70%),var(--sand)}
.fall{position:absolute;top:-6vh;width:14px;height:18px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#E9A9A4,#C96F6F);opacity:.0;
 animation:drift 18s linear infinite;animation-delay:calc(var(--d) * -1s)}
@keyframes drift{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:.55}90%{opacity:.45}100%{transform:translate(var(--x),112vh) rotate(540deg);opacity:0}}
.page{max-width:520px;margin:0 auto;padding:34px 18px 40px}
.hero{text-align:center}
.arch{position:relative;width:212px;margin:8px auto 22px}
.arch .ph{aspect-ratio:4/5;border-radius:999px 999px 26px 26px;overflow:hidden;border:5px solid var(--paper);box-shadow:0 18px 44px rgba(110,58,32,.22);position:relative;z-index:1}
.arch .ph picture{height:100%}.arch .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.bloom{position:absolute;left:50%;top:-34px;width:84px;height:84px;margin-left:-42px;z-index:2}
.pt{position:absolute;left:50%;top:50%;width:26px;height:40px;margin:-40px 0 0 -13px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
 background:linear-gradient(180deg,#F3C1B8,#D98C8C);transform-origin:50% 100%;transform:rotate(calc(var(--i)*45deg)) scale(.2);opacity:0;
 animation:open 1.1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--i)*.07s);box-shadow:inset 0 -6px 10px rgba(138,75,42,.15)}
.bloom::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:radial-gradient(circle,#F6D58A,#D9A441);z-index:3;
 transform:scale(0);animation:core .5s .8s ease-out forwards}
@keyframes open{to{transform:rotate(calc(var(--i)*45deg)) scale(1);opacity:.95}}
@keyframes core{to{transform:scale(1)}}
.logo{width:118px;margin:0 auto 6px;opacity:.95}
h1{font-family:var(--display);font-weight:600;font-size:30px;line-height:1.1;margin:0 0 6px;letter-spacing:-.01em}
.role{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.note{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.4;color:var(--clay-d);margin:0 auto 22px;max-width:30ch}
.main{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 22px;border-radius:999px;background:var(--clay);color:#fff;
 font-weight:600;font-size:17px;box-shadow:0 12px 26px rgba(110,58,32,.3);position:relative;overflow:hidden;transition:transform .2s,background .2s}
.main:hover{background:var(--clay-d);transform:translateY(-1px)}
.main::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(217,140,140,.55);animation:pulse 2.6s 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,140,140,.55)}70%{box-shadow:0 0 0 14px rgba(217,140,140,0)}100%{box-shadow:0 0 0 0 rgba(217,140,140,0)}}
.main small{display:block;font-weight:400;font-size:12.5px;opacity:.85}
.sub{font-size:13px;color:var(--muted);margin:10px 0 28px}
.cards{display:grid;gap:12px}
.card{display:grid;grid-template-columns:86px 1fr 18px;gap:14px;align-items:center;background:rgba(255,253,249,.86);backdrop-filter:blur(6px);
 border:1px solid var(--line);border-radius:22px;padding:10px 14px 10px 10px;transition:transform .25s,box-shadow .25s,border-color .25s;
 opacity:0;transform:translateY(10px);animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.5s + var(--n)*.08s)}
@keyframes rise{to{opacity:1;transform:none}}
.card:hover{box-shadow:0 14px 30px rgba(110,58,32,.14);border-color:var(--blush)}
.card .th{width:86px;height:100px;border-radius:999px 999px 14px 14px;overflow:hidden}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .ey{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.card b{display:block;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2;margin:2px 0 3px}
.card span.l{font-size:13.5px;color:var(--muted);line-height:1.4}
.learn{margin-top:26px}.learn .all{display:block;text-align:center;margin-top:12px;font-weight:600;color:var(--clay);text-decoration:underline;text-underline-offset:3px}.learn h2{font-family:var(--display);font-weight:600;font-size:22px;text-align:center;margin:0 0 12px}
.card i{font-style:normal;color:var(--clay);font-size:18px;transition:transform .25s}.card:hover i{transform:translateX(3px)}
.help{margin:28px 0 8px;text-align:center}
.help h2{font-family:var(--display);font-weight:600;font-size:18px;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips a{padding:9px 15px;border-radius:999px;border:1px solid var(--blush);background:var(--paper);font-size:14px;color:var(--clay-d);transition:background .2s}
.chips a:hover{background:var(--blush)}
.more{display:flex;justify-content:center;gap:10px;margin:26px 0 6px;flex-wrap:wrap}
.more a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,253,249,.7);border:1px solid var(--line);font-size:14px}
.more svg{width:17px;height:17px;fill:var(--clay)}
.ft{text-align:center;font-size:11.5px;color:var(--muted);margin-top:30px;line-height:1.5}
.ft a{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.card{opacity:1;transform:none}.pt{opacity:.95;transform:rotate(calc(var(--i)*45deg))}.bloom::after{transform:none}.fall{display:none}}

/* Library page only (store.wombbloom.org/library): same look as wombbloom.org/links, its own job: browse everything. */
.library-page .top-line{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;margin:0 0 18px}
.library-page .top-line a{color:var(--clay-d);padding:6px 0}.library-page .top-line .me{border:1px solid var(--blush);border-radius:999px;padding:7px 14px;background:rgba(255,253,249,.75)}
.library-page .libhead{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;margin:0 0 8px}
.library-page .libhead .ph{width:92px;aspect-ratio:4/5;border-radius:999px 999px 16px 16px;overflow:hidden;border:4px solid var(--paper);box-shadow:0 12px 28px rgba(110,58,32,.2)}
.library-page .libhead .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.library-page .libhead h1{font-size:28px;margin:0 0 4px}.library-page .libhead p{margin:0;font-size:14px;color:var(--muted);line-height:1.45}
.library-page section{margin-top:26px}.library-page section h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 10px}
.library-page .card .pr{display:block;font-weight:600;color:var(--clay-d);font-size:14px;margin-top:4px}
.library-page .card .th{background:var(--blush)}
.library-page .drafts{margin-top:26px;border:1px dashed var(--line);border-radius:18px;padding:12px 14px;background:rgba(255,253,249,.6)}
.library-page .drafts summary{cursor:pointer;font-weight:600}
.library-page .ask{text-align:center;margin:28px 0 0;font-size:14px;color:var(--muted)}.library-page .ask a{color:var(--clay-d);text-decoration:underline}