/*
Theme Name: Quick Save Spot
Theme URI: https://quicksavespot.com/
Author: Quick Save Spot
Description: Bookmarking theme for Quick Save Spot. Playful pink and teal design with colour bands, white-framed story cards showing live website previews (website initials when a preview is missing), a profile-card story page whose title links to the bookmarked site, and category and sitemap pages that hide empty categories.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: quicksavespot
*/

/* Quick Save Spot redesign. Look and motion follow the Hubhood Pets reference: playful Poppins,
   pink and teal two-tone headings, colour bands, white-framed cards, pill buttons and round icon badges.
   Content is from quicksavespot.com. */
:root{
  --pink:#F26080; --teal:#01BCB6; --crimson:#C2395E; --deep:#085365; --mustard:#BC990B; --ink:#252525; --text:#5B6166; --bg:#F9F9F9; --line:#E8E8E8;
  --font:"Poppins",system-ui,sans-serif; --wrap:1200px; --ease:cubic-bezier(.2,.75,.2,1); --sh:0 8px 30px rgba(37,37,37,.1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.7;color:var(--text);background:var(--bg)}
main{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;color:var(--ink);line-height:1.2}
p{margin:0 0 1em}ul,ol{margin:0;padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.sec{padding:80px 0;position:relative}
.white{background:#fff}
.t{text-align:center;margin-bottom:40px}
.t .ico{font-size:44px;color:var(--teal);margin-bottom:14px;display:inline-block;transition:transform .6s var(--ease)}
.t:hover .ico{transform:rotate(-10deg) scale(1.1)}
.t h2{font-size:clamp(22px,2.4vw,28px);color:var(--pink)}
.t h2 em{font-style:normal;color:var(--teal)}
.t p{margin:8px auto 0;max-width:520px;font-size:14px;color:#8A9096}
.band .t h2,.band .t h2 em,.band .t .ico{color:#fff}.band .t p{color:rgba(255,255,255,.82)}
.crimson{background:var(--crimson)}.deep{background:var(--deep)}.mustard{background:var(--mustard)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 24px;border-radius:50px;background:var(--teal);color:#fff;font-weight:600;font-size:14.5px;border:0;cursor:pointer;transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.btn:hover{background:var(--pink);transform:translateY(-3px);box-shadow:0 10px 22px rgba(242,96,128,.35)}
.btn.white{background:#fff;color:var(--ink);box-shadow:var(--sh)}.btn.white:hover{background:var(--ink);color:#fff}
.btn.pink{background:var(--pink)}.btn.pink:hover{background:var(--teal);box-shadow:0 10px 22px rgba(1,188,182,.35)}
.show{display:flex;justify-content:center;gap:10px;margin-top:30px}
.show a{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:50px;padding:8px 18px;font-weight:600;font-size:13.5px;color:var(--ink);box-shadow:var(--sh);transition:.3s var(--ease)}
.show a:first-child{width:40px;padding:0;justify-content:center;font-size:17px}
.show a:hover{background:var(--teal);color:#fff;transform:translateY(-3px)}
.show a svg{transition:transform .3s}.show a:hover svg{transform:translateX(4px)}

/* header (over hero / solid when stuck) */
.head{position:absolute;left:0;right:0;top:0;z-index:60;color:#fff;transition:background .3s,box-shadow .3s}
.head.solid{position:sticky;background:var(--deep)}
.head.stuck{position:fixed;background:rgba(8,83,101,.96);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(8,83,101,.3);animation:drop .5s var(--ease)}
@keyframes drop{from{transform:translateY(-100%)}}
.head .wrap{display:flex;align-items:center;gap:26px;min-height:76px;width:min(1320px,100% - 40px)}
.logo{display:inline-flex;align-items:center;line-height:1}
.logo svg{height:34px;width:auto;overflow:visible}
.logo svg circle{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.logo:hover svg circle:nth-of-type(1){transform:scale(1.18)}
.logo:hover svg circle:nth-of-type(3){transform:scale(1.5)}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav>a,.dd>button{background:none;border:0;padding:8px 14px;border-radius:50px;font-weight:500;font-size:14.5px;color:#fff;cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:background .25s}
.nav>a:hover,.nav>a.on,.dd:hover>button{background:rgba(255,255,255,.18)}
.dd{position:relative}
.dd .menu{position:absolute;top:calc(100% + 10px);right:-120px;width:min(720px,calc(100vw - 40px));columns:3;column-gap:0;background:#fff;border-radius:18px;padding:12px 6px;box-shadow:0 24px 60px rgba(37,37,37,.22);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s var(--ease)}
.dd .menu::before{content:"";position:absolute;inset:-12px 0 100% 0}
.dd:hover .menu,.dd:focus-within .menu{opacity:1;visibility:visible;transform:none}
.dd .menu a{break-inside:avoid;display:flex;justify-content:space-between;gap:12px;padding:8px 16px;border-radius:50px;color:var(--ink);font-size:14px;font-weight:500;transition:background .2s,color .2s}
.dd .menu a span{color:#9AA0A6}
.dd .menu a:hover{background:var(--teal);color:#fff}.dd .menu a:hover span{color:#fff}
.head .tools{display:flex;gap:10px;align-items:center}
.rb{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;font-size:17px;cursor:pointer;flex:none;transition:.3s var(--ease)}
.rb:hover{background:var(--pink);transform:rotate(-12deg) scale(1.08)}
.burger{display:none}
.finder{position:fixed;inset:0;z-index:120;background:rgba(8,83,101,.96);display:grid;place-items:center;overflow:hidden;opacity:0;visibility:hidden;transition:.3s}
.finder.open{opacity:1;visibility:visible}
.finder form{width:min(680px,88%);display:flex;gap:8px;background:#fff;border-radius:50px;padding:8px 8px 8px 26px}
.finder input{flex:1;min-width:0;border:0;outline:0;font-size:18px;color:var(--ink)}
.finder .x{position:absolute;top:22px;right:22px}

/* hero */
.hero{position:relative;color:#fff;padding:170px 0 120px;overflow:hidden;isolation:isolate;text-align:center;background:var(--deep)}
.hero .bg{position:absolute;inset:-4%;background:center/cover;z-index:-3;animation:slow 26s ease-in-out infinite alternate}
@keyframes slow{to{transform:scale(1.1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(60,66,72,.82) 0 50%,rgba(1,150,146,.72) 50% 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,83,101,.55),transparent 55%)}
.burst{position:absolute;z-index:-1;color:#fff;opacity:.85;animation:spin 40s linear infinite;pointer-events:none}
.burst.b1{width:300px;right:12%;top:60px}.burst.b2{width:150px;left:9%;bottom:150px;animation-direction:reverse;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1{color:#fff;font-size:clamp(38px,5.6vw,72px);letter-spacing:-.01em;margin-bottom:10px}
.hero .sub{font-weight:500;font-size:clamp(15px,1.500vw,18px);max-width:620px;margin:0 auto 26px}
.rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .rise .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:calc(var(--n)*90ms + .2s)}
.js.loaded .rise .w>span{transform:none}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:50px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);font-weight:500;font-size:13.5px;color:#fff;transition:.3s var(--ease)}
.tabs a:first-child,.tabs a:hover{background:#fff;color:var(--ink)}
.tabs a:hover{transform:translateY(-3px)}
.js .tabs a{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease),background .3s,color .3s;transition-delay:calc(var(--k)*60ms + .7s)}
.js.loaded .tabs a{opacity:1;transform:none}
.searchbar{position:relative;z-index:5;width:min(1000px,100% - 40px);margin:-36px auto 0;background:#fff;border-radius:50px;box-shadow:0 14px 40px rgba(37,37,37,.14);padding:10px 10px 10px 26px;display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;align-items:center}
.searchbar label{display:flex;align-items:center;gap:10px;color:var(--teal);font-size:18px}
.searchbar label+label{border-left:1px solid var(--line);padding-left:16px}
.searchbar input,.searchbar select{flex:1;min-width:0;border:0;outline:0;background:none;padding:10px 0;font-size:15px;font-weight:500;color:var(--ink)}
.searchbar button{width:52px;height:52px;border-radius:50%;border:0;background:var(--pink);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease)}
.searchbar button:hover{background:var(--teal);transform:rotate(-12deg) scale(1.08)}

/* reveals */
.js [data-up]{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .7s var(--ease),transform .8s cubic-bezier(.3,1.3,.5,1);transition-delay:var(--d,0ms)}
.js [data-up].in{opacity:1;transform:none}

/* two columns: latest stories / popular categories */
.two{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.pairc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc{position:relative;background:#fff;border-radius:18px;box-shadow:var(--sh);padding:22px 18px;text-align:center;transition:transform .45s var(--ease),box-shadow .45s}
.sc:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(37,37,37,.16)}
.sc .th{width:76px;height:76px;border-radius:50%;overflow:hidden;margin:0 auto 14px;border:4px solid #fff;box-shadow:0 0 0 3px var(--teal);background:var(--bg);transition:transform .5s var(--ease)}
.sc:hover .th{transform:scale(1.1) rotate(-6deg)}
.sc .th img{width:100%;height:100%;object-fit:cover;object-position:top}
.sc h3{font-size:14.5px;font-weight:600;line-height:1.4;margin-bottom:8px}
.sc h3 a::after{content:"";position:absolute;inset:0}
.sc small{color:#8A9096;font-size:12.5px;display:block}
.sc small b{color:var(--teal);font-weight:600}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini{display:flex;align-items:center;gap:12px;background:#fff;border-radius:50px;padding:8px 18px 8px 8px;box-shadow:var(--sh);transition:transform .4s var(--ease),background .3s,color .3s}
.mini i{width:46px;height:46px;border-radius:50%;background:var(--bg);color:var(--pink);display:grid;place-items:center;font-size:20px;font-style:normal;flex:none;transition:.3s}
.mini b{display:block;font-weight:600;color:var(--ink);font-size:14px;line-height:1.25;transition:color .3s}
.mini small{font-size:12px;color:#8A9096;transition:color .3s}
.mini:hover{transform:translateX(6px);background:var(--teal)}.mini:hover b,.mini:hover small{color:#fff}.mini:hover i{background:#fff;transform:rotate(-12deg)}

/* teal pills (explore) */
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pl{display:flex;align-items:center;gap:14px;background:var(--teal);color:#fff;border-radius:50px;padding:8px;transition:transform .4s var(--ease),background .3s,box-shadow .3s}
.pl .ab{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--deep);display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;transition:transform .5s var(--ease)}
.pl .nm{flex:1;min-width:0}.pl b{display:block;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pl small{font-size:12px;opacity:.85}
.pl .ct{min-width:44px;height:44px;padding:0 10px;border-radius:50px;border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none}
.pl:hover{transform:translateY(-5px);background:var(--deep);box-shadow:0 14px 30px rgba(8,83,101,.3)}.pl:hover .ab{transform:rotate(360deg)}

/* circle categories */
.circs{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.circ{display:grid;justify-items:center;gap:12px;width:130px;text-align:center}
.circ i{width:112px;height:112px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;font-size:44px;color:var(--pink);font-style:normal;transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.circ:hover i{transform:translateY(-10px) scale(1.06);background:var(--pink);color:#fff}
.circ b{font-weight:700;color:var(--ink);font-size:13px}.circ span{font-weight:600;font-size:14px;color:var(--ink);line-height:1.3}

/* framed story cards (on colour bands) */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card{position:relative;background:#fff;border-radius:18px;padding:6px 6px 16px;box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s}
.card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 24px 50px rgba(0,0,0,.28)}
.card .im{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,var(--teal),var(--deep));display:grid;place-items:center}
.card .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s var(--ease)}
.card:hover .im img{transform:scale(1.08)}
.card .im b{font-size:40px;color:rgba(255,255,255,.35)}
.card .flag{position:absolute;left:0;top:0;z-index:2;width:38px;height:38px;background:var(--teal);color:#fff;border-radius:14px 0 14px 0;display:grid;place-items:center;font-size:15px}
.card .dom{position:absolute;left:10px;bottom:10px;z-index:2;background:rgba(255,255,255,.94);border-radius:50px;padding:3px 12px;font-size:11.5px;font-weight:600;color:var(--ink);max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{font-size:14.5px;font-weight:600;line-height:1.4;margin:14px 10px 8px}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card .meta{margin:auto 10px 0;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#8A9096}
.card .meta svg{color:var(--teal);font-size:14px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.plain .card{box-shadow:var(--sh)}

/* CTA pills */
.ctas{display:grid;gap:14px;max-width:520px;margin:0 auto}
.cta{display:grid;grid-template-columns:54px 1fr 44px;gap:14px;align-items:center;background:#fff;border:2px solid var(--pink);border-radius:50px;padding:8px;text-align:center;box-shadow:var(--sh);transition:transform .4s var(--ease),background .3s}
.cta i{width:54px;height:54px;border-radius:50%;border:2px solid var(--pink);color:var(--pink);display:grid;place-items:center;font-size:22px;font-style:normal;transition:.3s}
.cta b{display:block;color:var(--ink);font-weight:700;font-size:14.5px;line-height:1.3}.cta small{font-size:12.5px;color:#8A9096}
.cta .go{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:18px;transition:transform .4s var(--ease),background .3s}
.cta:hover{transform:scale(1.03)}.cta:hover i{background:var(--pink);color:#fff}.cta:hover .go{background:var(--pink);transform:translateX(4px)}

/* numbered feature cards */
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:940px;margin:0 auto}
.nc{position:relative;background:#fff;border-radius:18px;box-shadow:var(--sh);padding:26px 90px 26px 26px;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
.nc:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(37,37,37,.14)}
.nc i{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--pink),#F9A0B4);color:#fff;display:grid;place-items:center;font-size:28px;font-style:normal;transition:transform .5s var(--ease)}
.nc:nth-child(even) i{background:linear-gradient(135deg,var(--teal),#6FE0DC)}
.nc:hover i{transform:rotate(-10deg) scale(1.1)}
.nc h3{font-size:16px;margin-bottom:4px}.nc p{margin:0;font-size:13.5px;line-height:1.55}
.nc .n{position:absolute;right:16px;top:50%;translate:0 -50%;font-weight:800;font-size:84px;line-height:1;color:rgba(1,188,182,.16);transition:color .4s,transform .5s var(--ease)}
.nc:hover .n{color:rgba(242,96,128,.3);transform:scale(1.12)}

/* promo boxes */
.promos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.promo{position:relative;border-radius:18px;overflow:hidden;color:#fff;padding:40px 46% 40px 34px;min-height:260px;display:flex;flex-direction:column;justify-content:center;isolation:isolate;transition:transform .45s var(--ease)}
.promo:hover{transform:translateY(-6px)}
.promo.m{background:var(--mustard)}.promo.c{background:var(--crimson)}
.promo img{position:absolute;right:0;top:0;width:44%;height:100%;object-fit:cover;z-index:-1;transition:transform 1s var(--ease);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.promo:hover img{transform:scale(1.08)}
.promo h3{color:#fff;font-size:26px;text-transform:uppercase;margin-bottom:10px}
.promo p{font-size:13.5px;margin-bottom:18px;color:rgba(255,255,255,.92)}
.promo .go{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:17px;transition:.35s var(--ease)}
.promo:hover .go{background:var(--ink);color:#fff;transform:translateX(6px)}

/* stat circles */
.stats{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.st{width:150px;height:150px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-content:center;text-align:center;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.st:hover{transform:scale(1.1) rotate(-4deg)}
.st b{font-weight:800;font-size:26px;color:var(--pink);line-height:1.1}.st:nth-child(even) b{color:var(--teal)}
.st span{font-size:12px;font-weight:600;color:var(--ink);max-width:110px;line-height:1.3;margin:4px auto 0}

/* footer */
.foot{background:#fff;text-align:center;padding:60px 0 34px;border-top:1px solid var(--line)}
.foot .logo svg{height:40px}
.foot p{max-width:560px;margin:18px auto 22px;font-size:14px}
.foot .links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.foot .links a{padding:7px 16px;border-radius:50px;background:var(--bg);font-weight:500;font-size:13.5px;color:var(--ink);transition:.25s var(--ease)}
.foot .links a:hover{background:var(--teal);color:#fff;transform:translateY(-3px)}
.copy{font-size:13.5px;color:#8A9096}.copy a{color:var(--pink);font-weight:600}
.totop{position:fixed;right:18px;bottom:18px;z-index:50;background:var(--pink);opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s var(--ease)}
.totop.show{opacity:1;visibility:visible;transform:none}

/* inner page head */
.phead{position:relative;color:#fff;padding:150px 0 70px;overflow:hidden;isolation:isolate;background:var(--deep)}
.phead .pbg{position:absolute;inset:-4%;background:center top/cover;z-index:-3;opacity:.5;animation:slow 26s ease-in-out infinite alternate}
.phead::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(8,83,101,.94),rgba(1,150,146,.72))}
.phead.shot::before{background:linear-gradient(90deg,rgba(8,83,101,.93) 0%,rgba(8,83,101,.72) 55%,rgba(194,57,94,.5) 100%)}
.phead .burst{width:220px;right:8%;top:70px;opacity:.5}
.phead h1{color:#fff;font-size:clamp(28px,4.4vw,54px);max-width:100%}
.phead h1.long{font-size:clamp(22px,3vw,38px);max-width:100%;line-height:1.25}
.phead h1 a.lines{display:block;color:inherit}
.phead h1 a.lines .l>span{background:linear-gradient(var(--pink),var(--pink)) 0 100%/0 3px no-repeat;padding-bottom:4px;transition:transform 1s var(--ease),background-size .5s var(--ease);transition-delay:calc(var(--n)*110ms + .15s),0s}
.phead h1 a.lines:hover .l>span{background-size:100% 3px}
.lines .l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.js .lines .l>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--n)*110ms + .15s)}
.js.loaded .lines .l>span{transform:none}
.trail{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.trail a,.trail span{background:rgba(255,255,255,.18);border-radius:50px;padding:4px 14px;font-size:13px;font-weight:500;transition:.25s}
.trail a:hover{background:#fff;color:var(--ink)}
.trail span{background:none;padding-left:2px;opacity:.85}
.phead .meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-weight:500}
.phead .meta span{display:inline-flex;gap:8px;align-items:center}
.opens{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border-radius:50px;padding:6px 16px;font-size:13.5px;font-weight:500}

/* toolbar + pager */
.toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:36px}
.find{display:flex;flex:1;min-width:260px;background:#fff;border-radius:50px;box-shadow:var(--sh);padding:6px 6px 6px 24px}
.find input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink)}
.find button{width:42px;height:42px;border-radius:50%;border:0;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:17px;cursor:pointer;transition:.3s}
.find button:hover{background:var(--teal)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips a{padding:8px 16px;border-radius:50px;background:#fff;box-shadow:var(--sh);font-weight:500;font-size:13.5px;color:var(--ink);transition:.25s}
.chips a:hover,.chips a.on{background:var(--teal);color:#fff}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:44px;font-weight:600}
.pager a,.pager span{min-width:46px;height:46px;padding:0 16px;border-radius:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;box-shadow:var(--sh);color:var(--ink);transition:.25s}
.pager a:hover{background:var(--teal);color:#fff}
.pager .on{background:var(--pink);color:#fff}
.pager .gap{background:none;box-shadow:none;min-width:14px;padding:0}

/* story page */
.story{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:start}
.panel{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:28px;margin-bottom:22px}
.panel>h2{font-size:17px;color:var(--pink);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.panel>h2 svg{color:var(--teal);font-size:22px}
.prose{font-size:16px;color:#444B50}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:22px}
.like{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:50px;border:2px solid var(--pink);background:#fff;color:var(--pink);font-weight:600;cursor:pointer;transition:.3s var(--ease)}
.like:hover,.like.on{background:var(--pink);color:#fff}
.like.on svg{fill:currentColor;animation:pop .5s var(--ease)}
@keyframes pop{40%{transform:scale(1.5) rotate(-12deg)}}
.tagl{background:var(--bg);border-radius:50px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--ink)}
.below{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.below .panel{margin-bottom:0}
.sd{text-align:center;padding-top:0;overflow:hidden}
.sdtop{position:relative;height:96px;margin:0 -28px 52px;background:linear-gradient(120deg,var(--pink),var(--teal));background-size:200% 200%;animation:sheen 8s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 100%}}
.sdtop svg.burst2{position:absolute;right:14px;top:8px;width:74px;color:#fff;opacity:.6;animation:spin 20s linear infinite}
.av{position:absolute;left:50%;bottom:-42px;translate:-50% 0;width:88px;height:88px;border-radius:50%;background:#fff;display:grid;place-items:center}
.av::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--teal),var(--pink),transparent 70%,var(--teal));animation:spin 5s linear infinite;z-index:-1}
.av span{width:76px;height:76px;border-radius:50%;background:var(--deep);display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff}
.sd .lbl{display:block;font-size:12.5px;color:#8A9096}
.sd .who{font-size:18px;color:var(--ink);margin-bottom:18px;display:block}
.site{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;text-align:left;background:var(--bg);border-radius:14px;padding:12px;color:var(--ink);font-weight:500;font-size:14px;overflow-wrap:anywhere;transition:transform .4s var(--ease)}
.site:hover{transform:translateY(-3px)}
.site i{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center;font-size:19px;font-style:normal;box-shadow:var(--sh)}
.site small{display:block;color:#8A9096;font-weight:400;font-size:12px}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sgrid a,.sgrid button{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:50px;border:0;background:var(--bg);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;transition:background .3s,color .3s,transform .35s var(--ease)}
.sgrid svg{font-size:18px;color:var(--teal);transition:transform .4s var(--ease),color .3s}
.sgrid svg.f{fill:currentColor;stroke:none}
.sgrid a:hover,.sgrid button:hover{background:var(--pink);color:#fff;transform:translateY(-4px)}
.sgrid a:hover svg,.sgrid button:hover svg{color:#fff;transform:rotate(-12deg) scale(1.25)}
.aside{position:sticky;top:96px}
.js .aside [data-up]{transform:translateX(50px)}.js .aside [data-up].in{transform:none}
.rlist{counter-reset:r}
.rlist li{counter-increment:r;border-top:1px solid var(--line)}
.rlist li:first-child{border:0}
.rlist a{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;padding:11px 0;transition:padding .35s var(--ease)}
.rlist .th{position:relative;width:54px;height:54px;border-radius:50%;overflow:hidden;background:var(--bg);display:grid;place-items:center;color:var(--teal);font-size:20px;box-shadow:0 0 0 2px var(--teal)}
.rlist .th img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--ease)}
.rlist .tt{color:var(--ink);font-weight:500;font-size:14px;line-height:1.4;transition:color .25s}
.rlist a:hover{padding-left:8px}.rlist a:hover .tt{color:var(--pink)}.rlist a:hover img{transform:scale(1.2)}
.bars li{margin-bottom:14px}.bars li:last-child{margin:0}
.bars .nm{display:flex;justify-content:space-between;gap:12px;color:var(--ink);font-weight:500;font-size:14px;margin-bottom:6px}
.bars .nm b{color:var(--teal);font-weight:700;font-size:13px}
.bars .bar{display:block;height:8px;border-radius:8px;background:var(--bg);overflow:hidden}
.bars .bar i{display:block;height:100%;width:var(--w);border-radius:8px;background:linear-gradient(90deg,var(--pink),var(--teal));transform-origin:left;transition:transform 1.4s var(--ease)}
.js [data-up] .bars .bar i{transform:scaleX(0)}.js [data-up].in .bars .bar i{transform:none}
.bars li:nth-child(2) .bar i{transition-delay:.12s}.bars li:nth-child(3) .bar i{transition-delay:.24s}.bars li:nth-child(4) .bar i{transition-delay:.36s}.bars li:nth-child(5) .bar i{transition-delay:.48s}.bars li:nth-child(6) .bar i{transition-delay:.6s}
.bars a:hover .nm{color:var(--pink)}
.js [data-up] .rlist li,.js [data-up] .sgrid>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease),background .3s,color .3s,padding .35s var(--ease)}
.js [data-up].in .rlist li,.js [data-up].in .sgrid>*{opacity:1;transform:none}
.rlist li:nth-child(2),.sgrid>*:nth-child(2){transition-delay:.1s}.rlist li:nth-child(3),.sgrid>*:nth-child(3){transition-delay:.2s}.rlist li:nth-child(4),.sgrid>*:nth-child(4){transition-delay:.3s}.rlist li:nth-child(5){transition-delay:.4s}
.subh{font-size:22px;color:var(--pink);margin:44px 0 24px}.subh em{font-style:normal;color:var(--teal)}

/* categories index */
.az{position:sticky;top:76px;z-index:20;display:flex;flex-wrap:wrap;gap:5px;background:rgba(249,249,249,.94);backdrop-filter:blur(8px);padding:12px 0;margin-bottom:10px}
.az a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--sh);color:var(--ink);font-weight:600;font-size:14px;transition:.2s}
.az a:hover{background:var(--teal);color:#fff}.az a.on{background:var(--pink);color:#fff}
.letter{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding:26px 0;border-top:2px dashed var(--line);scroll-margin-top:140px}
.letter>b{width:84px;height:84px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:36px;box-shadow:var(--sh)}
.letter:nth-of-type(even)>b{background:var(--pink)}
.lchips{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;align-content:flex-start}
.lchips a{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:50px;background:#fff;box-shadow:0 3px 12px rgba(37,37,37,.07);color:var(--ink);font-size:14px;font-weight:500;transition:background .2s,color .2s,transform .3s var(--ease)}
.lchips a span{min-width:26px;height:26px;padding:0 8px;border-radius:50px;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:600}
.lchips a:hover{background:var(--teal);color:#fff;transform:translateY(-3px)}
.none{display:none;text-align:center;padding:50px 0;font-weight:700;color:var(--ink);font-size:18px}

/* sitemap */
.smap{display:grid;grid-template-columns:1fr 2fr;gap:22px;margin-bottom:60px}
.smap .panel{margin:0}
.tree li{border-top:1px solid var(--line)}
.tree li:first-child{border:0}
.tree a{display:flex;justify-content:space-between;gap:14px;padding:10px 0;color:var(--ink);font-weight:500;font-size:14px;transition:padding .3s var(--ease),color .2s}
.tree a span{color:#8A9096;font-size:12.5px;white-space:nowrap}
.tree a:hover{color:var(--pink);padding-left:8px}
.cols{columns:4;column-gap:26px}
.cols li{break-inside:avoid;padding:3px 0;font-size:14px}
.cols li.h{font-weight:800;font-size:22px;color:var(--teal);margin-top:16px;break-after:avoid}
.cols a{color:var(--ink)}.cols a:hover{color:var(--pink)}
.cols small{color:#9AA0A6}

@media(max-width:1100px){
  .two,.story{grid-template-columns:minmax(0,1fr)}.aside{position:static}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pills{grid-template-columns:repeat(2,1fr)}.cols{columns:3}
  .dd .menu{right:auto;left:-200px}
}
@media(max-width:860px){
  .sec{padding:60px 0}
  .burger{display:grid}.head .tools .btn{display:none}.head .tools{margin-left:auto}
  .nav{position:fixed;inset:76px 0 0 0;background:var(--deep);flex-direction:column;align-items:stretch;gap:2px;padding:16px 22px;margin:0;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease),visibility .45s;overflow:auto}
  .nav.open{clip-path:inset(0);visibility:visible}
  .nav>a,.dd>button{font-size:17px;padding:14px 16px;width:100%;justify-content:space-between}
  .dd .menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;columns:1;width:auto;display:none;background:rgba(255,255,255,.08);margin:4px 0}
  .dd.open .menu{display:block}.dd .menu a{color:#fff}.dd .menu a span{color:rgba(255,255,255,.7)}
  .hero{padding:130px 0 100px}.burst.b1{width:180px;right:-30px}
  .searchbar{grid-template-columns:1fr auto;border-radius:26px;padding:12px 12px 12px 20px}.searchbar label+label{display:none}
  .nums,.promos,.smap,.below{grid-template-columns:minmax(0,1fr)}
  .letter{grid-template-columns:1fr;gap:12px}.letter>b{width:60px;height:60px;font-size:26px}
  .cols{columns:2}.phead{padding:120px 0 50px}
}
@media(max-width:560px){
  .pairc,.minis,.pills,.cards.two{grid-template-columns:minmax(0,1fr)}
  .cards,.cards.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .card h3{font-size:13px;margin:10px 6px 6px}.card .meta{margin:auto 6px 0;font-size:11.5px}
  .circ{width:96px}.circ i{width:84px;height:84px;font-size:34px}
  .nc{padding:20px 60px 20px 18px;grid-template-columns:52px 1fr}.nc i{width:52px;height:52px;font-size:24px}.nc .n{font-size:60px;right:8px}
  .promo{padding:30px 40% 30px 22px}.promo h3{font-size:21px}
  .st{width:124px;height:124px}.st b{font-size:22px}
  .cols{columns:1}.logo svg{height:28px}
  .tabs a:nth-child(n+5){display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-up],.js .rise .w>span,.js .lines .l>span,.js .tabs a,.js [data-up] .rlist li,.js [data-up] .sgrid>*,.js [data-up] .bars .bar i{opacity:1!important;transform:none!important}
}

/* ---------- website initials when a screenshot is missing ---------- */
.card .im{background:linear-gradient(135deg,var(--teal),var(--deep))}
.card:nth-child(3n+2) .im{background:linear-gradient(135deg,var(--pink),var(--crimson))}
.card:nth-child(3n) .im{background:linear-gradient(135deg,#D8B524,var(--mustard))}
.card .im b{font-weight:800;font-size:clamp(34px,4vw,54px);letter-spacing:.02em;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.18)}
.th,.pth{position:relative;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--deep))}
.th b,.pth b{font-weight:800;color:#fff;font-size:20px;letter-spacing:.02em;line-height:1}
.th img,.pth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.sc .th b{font-size:24px}
li:nth-child(even) .th,.sc:nth-child(even) .th{background:linear-gradient(135deg,var(--pink),var(--crimson))}
.rlist .th{color:#fff}

/* ---------- story page: profile card layout ---------- */
.phead.tall{padding:140px 0 150px}
.pcard{position:relative;z-index:3;background:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(8,83,101,.18);padding:0 40px 34px;margin-top:-110px}
.pc-top{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:end;margin-bottom:26px}
.pth{width:150px;height:150px;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 0 0 4px var(--teal),0 14px 30px rgba(8,83,101,.25);margin-top:-54px;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.pth b{font-size:46px}
.pcard:hover .pth{transform:rotate(-5deg) scale(1.04)}
.js .pth{animation:popin .9s cubic-bezier(.3,1.5,.5,1) .2s both}
@keyframes popin{from{transform:scale(0) rotate(-40deg)}}
.pc-ti{padding-top:30px}
.pcard h1.long{color:var(--ink);font-size:clamp(21px,2.6vw,34px);max-width:100%;line-height:1.25}
.pcard h1 a.lines{display:block;color:inherit;transition:color .3s}
.pcard h1 a.lines:hover{color:var(--pink)}
.pcard h1 a.lines .l>span{background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 3px no-repeat;padding-bottom:4px;transition:transform 1s var(--ease),background-size .5s var(--ease);transition-delay:calc(var(--n)*110ms + .15s),0s}
.pcard h1 a.lines:hover .l>span{background-size:100% 3px}
.pcard .opens{background:var(--bg);color:var(--ink);backdrop-filter:none;margin-top:14px}
.pcard .opens svg{color:var(--teal)}
.pcard .prose{font-size:16.500px;border-top:2px dashed var(--line);padding-top:24px}
.trio{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:16px;margin-top:28px}
.tr{display:flex;align-items:center;gap:14px;background:var(--bg);border-radius:18px;padding:16px 18px;min-width:0;transition:transform .4s var(--ease),box-shadow .4s}
.tr:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.tr>i{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center;font-size:22px;font-style:normal;flex:none;box-shadow:var(--sh)}
.tr>i.avs{background:var(--deep);color:#fff;font-weight:800;font-size:17px;position:relative;isolation:isolate}
.tr>i.avs::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--teal),var(--pink),transparent 70%,var(--teal));animation:spin 5s linear infinite;z-index:-2}
.tr>i.avs::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--deep);z-index:-1}
.tr>span{min-width:0;flex:1}
.tr small{display:block;font-size:12px;color:#8A9096}
.tr b{display:block;color:var(--ink);font-weight:600;font-size:15px;line-height:1.35}
.tr b.url{font-weight:500;font-size:13.500px;overflow-wrap:anywhere}
.shb{display:flex;gap:8px;margin-top:6px}
.shb a,.shb button{width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--teal);display:grid;place-items:center;font-size:16px;cursor:pointer;box-shadow:var(--sh);transition:.3s var(--ease)}
.shb svg.f{fill:currentColor;stroke:none}
.shb a:hover,.shb button:hover{background:var(--pink);color:#fff;transform:translateY(-4px) rotate(-10deg)}
.duo{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:50px}
.duo .panel{margin:0}
.rlist.two{display:grid;grid-template-columns:1fr 1fr;column-gap:26px}
.rlist.two li:nth-child(2){border-top:0}
@media(max-width:1000px){.trio{grid-template-columns:1fr 1fr}.tr.sh{grid-column:1/-1}.duo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
  .pcard{padding:0 20px 24px}.pc-top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}.pc-ti{padding-top:0}
  .pth{width:120px;height:120px}.pth b{font-size:36px}
  .trio{grid-template-columns:1fr}.rlist.two{grid-template-columns:1fr}.rlist.two li:nth-child(2){border-top:1px solid var(--line)}
}
.rlist .th,.sc .th{background:linear-gradient(135deg,var(--teal),var(--deep))}
.rlist li:nth-child(even) .th,.sc:nth-child(even) .th{background:linear-gradient(135deg,var(--pink),var(--crimson))}
.rlist .th b{font-size:17px}
.rlist.two{align-items:start}
.rlist.two a{min-height:76px}
.rlist.two{align-content:start}.duo{align-items:start}

/* home: one row of four popular categories; hero without tabs */
.minis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero{padding-bottom:110px}.hero .sub{margin-bottom:0}
.foot p{margin-bottom:18px}
@media(max-width:1000px){.minis.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.minis.four{grid-template-columns:minmax(0,1fr)}}

/* ---------- WordPress additions ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logo img{max-height:40px;width:auto}
.nav li{list-style:none;display:contents}
.prose a{color:var(--pink);text-decoration:underline}
.prose p:last-child{margin-bottom:0}
.prose img{height:auto;border-radius:12px}
.pagebody{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:32px;color:#444B50}
.pagebody a{color:var(--pink);text-decoration:underline}
.pagebody h2,.pagebody h3{margin:1.2em 0 .5em;font-size:20px}
.pagebody ul{list-style:disc;padding-left:1.3em;margin-bottom:1em}
.empty{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:50px 20px;text-align:center;font-weight:600;color:var(--ink);grid-column:1/-1}
.pager .current{background:var(--pink);color:#fff}
.pager .dots{background:none;box-shadow:none;min-width:14px;padding:0}
a.tagl{transition:.25s}a.tagl:hover{background:var(--teal);color:#fff}
/* a screenshot that is still being generated stays hidden so the website initials show */
img[data-snap].wait{opacity:0}
img[data-snap]{transition:opacity .5s}
/* Posts Like Dislike plugin, restyled to match */
.pld-like-dislike-wrap{display:inline-flex;gap:10px;margin:14px 0 0}
.pld-common-wrap{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:50px;border:2px solid var(--pink);color:var(--pink);font-weight:600}
.pld-common-wrap a{color:var(--pink);display:inline-flex}

/* 1.0.2: header menu. Custom menu items get the same spacing and hover as the built-in links,
   whether they are printed as plain links or inside list items. */
.nav{flex-wrap:nowrap;gap:4px}
.nav>a,.nav>li>a,.dd>button{white-space:nowrap}
.nav>li>a{background:none;border:0;padding:8px 14px;border-radius:50px;font-weight:500;font-size:14.5px;color:#fff;display:inline-flex;gap:6px;align-items:center;transition:background .25s,color .25s,transform .25s var(--ease)}
.nav>a,.dd>button{transition:background .25s,color .25s,transform .25s var(--ease)}
.nav>a:hover,.nav>li>a:hover,.dd:hover>button{background:#fff;color:var(--ink);transform:translateY(-2px)}
.nav>a.on,.nav>li.current-menu-item>a{background:rgba(255,255,255,.22);color:#fff}
.nav>a.on:hover,.nav>li.current-menu-item>a:hover{background:#fff;color:var(--ink)}
@media(max-width:1280px){.nav>a,.nav>li>a,.dd>button{padding:8px 10px;font-size:13.500px}.head .wrap{gap:14px}}
@media(max-width:1120px){.head .tools .btn{display:none}}
/* long menus switch to the mobile menu earlier */
@media(max-width:1000px){
  .burger{display:grid}.head .tools{margin-left:auto}
  .nav{position:fixed;inset:76px 0 0 0;background:var(--deep);flex-direction:column;align-items:stretch;gap:2px;padding:16px 22px;margin:0;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease),visibility .45s;overflow:auto}
  .nav.open{clip-path:inset(0);visibility:visible}
  .nav>a,.nav>li>a,.dd>button{font-size:17px;padding:14px 16px;width:100%;justify-content:space-between}
  .nav>a:hover,.nav>li>a:hover,.dd:hover>button{transform:none;background:rgba(255,255,255,.16);color:#fff}
  .dd .menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;columns:1;width:auto;display:none;background:rgba(255,255,255,.08);margin:4px 0}
  .dd.open .menu{display:block}.dd .menu a{color:#fff}.dd .menu a span{color:rgba(255,255,255,.7)}
}