/* home.antlers.html — moved out of the template on 2026-10-21 (owner: "move inline css and js to cached files"); edit here, the template loads it with {{ zz_asset:css }} */
/* --- home page (design: Claude Design canvas 2026-09-18) --- */
.home-hero{position:relative}
.home-hero .in{position:relative;padding:38px 21.5px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:560px}
/* copy sits directly on the emotion picture (owner 2026-09-28: no paper boxes); a soft layered,
neutral text shadow (ui-skills "beautiful shadows" layering: several low-alpha layers, small to
large) lifts it off the photo without a hard edge */
.home-hero h1{font:900 44px/1.02 'Libre Franklin',sans-serif;letter-spacing:-.03em;margin:0;text-wrap:balance;border:none;color:#2b2620;
text-shadow:0 1px 1px rgba(0,0,0,.05),0 2px 3px rgba(0,0,0,.06),0 6px 8px rgba(0,0,0,.07),0 14px 22px rgba(0,0,0,.08)}
.home-hero h1 .hand{font:600 40px 'Caveat',cursive;color:#a33d2e;white-space:nowrap;letter-spacing:0}
.home-hero .sub{font:500 15px/1.6 'Libre Franklin',sans-serif;color:#3a342c;margin:0;max-width:470px;
text-shadow:0 1px 1px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.06),0 6px 12px rgba(0,0,0,.07)}
.home-hero .sub strong{color:#2b2620}
.home-hero .btns{display:flex;margin-top:6px}
.cat-page .home-hero .btns .go{background:#a33d2e;color:#fff;font:700 15px 'Libre Franklin',sans-serif;padding:14px 24px;border-radius:var(--r-ctl);box-shadow:3px 3px 0 #2b2620}
@media(max-width:600px){
.home-hero .in{padding:28px 16px 14px;gap:12px}
.home-hero h1{font-size:38px}
.home-hero h1 .hand{font-size:35px}
}
.home-body{padding:0 20px}
/* top 3 categories — the category page's "Our top 3" podium sheets, same headline */
.home-top3{margin-top:26px;scroll-margin-top:90px}
.home-podium{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:end}
.home-podium li{display:block;min-width:0}
.home-podium .pi-1{order:2}.home-podium .pi-2{order:1}.home-podium .pi-3{order:3}
/* every paper sheet (home top 3, test winners, field notes, category top 3, alternatives) is whitish #fdfbf7, clearly lighter than the cream page (owner 2026-10-13 "you did not take over that white-ish background color") */
.cat-page .home-podium .pd{position:relative;isolation:isolate;display:block;background:#fdfbf7;border-radius:var(--r-card);padding:26px 16px 16px;color:#2b2620;cursor:pointer;
box-shadow:0 1px 1px rgba(43,38,32,.07),0 2px 2px rgba(43,38,32,.07),0 4px 4px rgba(43,38,32,.07),0 8px 8px rgba(43,38,32,.07),0 16px 16px -6px rgba(43,38,32,.1),inset 0 -30px 36px -30px rgba(43,38,32,.16);
transition:rotate .26s cubic-bezier(.23,1,.32,1),translate .26s cubic-bezier(.23,1,.32,1),box-shadow .26s ease}
.home-podium .pd::before{content:"";position:absolute;inset:0;border-radius:var(--r-card);z-index:-1;background:none}
.home-podium .pi-2 .pd{rotate:-1.4deg}.home-podium .pi-3 .pd{rotate:1.2deg}
.cat-page .home-podium .pi-1 .pd{translate:0 -8px;z-index:1;
box-shadow:0 1px 1px rgba(43,38,32,.08),0 2px 2px rgba(43,38,32,.08),0 4px 4px rgba(43,38,32,.08),0 8px 8px rgba(43,38,32,.08),0 16px 16px rgba(43,38,32,.08),0 32px 32px -8px rgba(43,38,32,.12),inset 0 -30px 36px -30px rgba(43,38,32,.16)}
@media(hover:hover){.cat-page .home-podium .pd:hover{rotate:0deg;translate:0 -3px;opacity:1}.cat-page .home-podium .pi-1 .pd:hover{translate:0 -11px}}
.home-podium .pd-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1.5deg);background:#a33d2e;color:#fff;font:600 17.5px 'Caveat',cursive;padding:3px 13px;white-space:nowrap;box-shadow:0 2px 4px -1px rgba(43,38,32,.3);z-index:3}
.home-podium .pd-name{display:block;text-align:center;font:800 17.5px 'Libre Franklin',sans-serif;overflow-wrap:anywhere;margin-bottom:10px}
.home-podium .pd-ph{display:block;position:relative;height:120px;overflow:hidden;border-radius:var(--r-ctl);cursor:zoom-in}
.home-podium .pd-ph picture,.home-podium .pd-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.home-podium .pd-desc{display:block;font:400 13px/1.5 'Libre Franklin',sans-serif;color:#443d34;margin-top:10px;text-align:center}
.cat-page .home-podium .pd-cta{display:block;text-align:center;background:#a33d2e;color:#fff;font:700 14.5px 'Libre Franklin',sans-serif;padding:11px 8.5px;border-radius:var(--r-ctl);margin-top:13px;white-space:nowrap}
@media(max-width:639px){
.home-podium{display:flex;flex-direction:column;gap:18px}
.home-podium .pi-1,.home-podium .pi-2,.home-podium .pi-3{order:0}
.cat-page .home-podium .pi-1 .pd{translate:0 0}
.home-podium .pi-2 .pd,.home-podium .pi-3 .pd{rotate:0deg}
}
/* test winners — podium sheets like the top 3 categories (owner 2026-10-13), the logo in place of the picture */
.home-winners-sec{margin-top:30px}
.home-podium.home-winners{margin-top:42px;align-items:stretch} /* room for the "We recommend" tape; one row height, buttons on the bottom edge */
.home-winners li{display:flex;flex-direction:column}
.cat-page .home-winners .pd{display:flex;flex-direction:column;flex:1 1 auto}
.home-winners .pd-logo{display:flex;align-items:center;justify-content:center;height:48px;width:184px;max-width:100%;margin:2px auto 0;overflow:hidden}
.home-winners .pd-logo img{display:block;max-width:100%;max-height:100%;height:100%;width:auto;object-fit:contain}
.home-winners .pd-logo.sq{height:72px}
.home-winners .pd-stars{display:block;text-align:center;margin-top:8px;font-size:15px;letter-spacing:1px}
.home-winners .pd-stars .on{color:#a33d2e}.home-winners .pd-stars .off{color:#d9c9a7}
.home-winners .pd-desc{margin-bottom:13px}
.home-winners .pd-desc b{color:#2b2620}
.cat-page .home-winners .pd-cta{margin-top:auto}
.cat-page .home-winners .pd-cta.named{white-space:normal} /* "Visit Zooook.org" may wrap (Clickout::sellName) */
.cat-page .home-winners .pd-rev{display:block;text-align:center;font:600 12.5px 'Libre Franklin',sans-serif;color:#a33d2e;text-decoration:underline;text-underline-offset:3px;margin-top:8px}
.home-h2{font:800 28px/1.05 'Libre Franklin',sans-serif;letter-spacing:-.03em;color:#000;margin:0;padding:0;border:0;text-transform:none}
.home-h2 .hand{font:600 1.013em 'Caveat',cursive;color:#a33d2e;white-space:nowrap;letter-spacing:0}
/* latest articles: the magazine's cards (articles/_magazine_styles), scoped to the home */
.home-articles{margin-top:30px}
.home-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:13px;margin:0 0 22px}
.cat-page .home-more{font:600 15px 'Caveat',cursive;color:#a33d2e;white-space:nowrap}
/* the three articles as the top 3 categories' paper sheets (owner 2026-10-13 "make these 3 boxes … look in this style"):
no border, light paper + layered shadow, outer sheets tilted, the middle one raised, the category as the red tape,
the picture inset with round corners, centred text, "read on →" as the red button */
.home-articles .mag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:stretch;padding-top:14px}
.cat-page .home-articles .mag-card{position:relative;isolation:isolate;display:flex;flex-direction:column;background:#fdfbf7;border-radius:var(--r-card);padding:26px 16px 16px;color:#2b2620;text-decoration:none;
box-shadow:0 1px 1px rgba(43,38,32,.07),0 2px 2px rgba(43,38,32,.07),0 4px 4px rgba(43,38,32,.07),0 8px 8px rgba(43,38,32,.07),0 16px 16px -6px rgba(43,38,32,.1),inset 0 -30px 36px -30px rgba(43,38,32,.16);
transition:rotate .26s cubic-bezier(.23,1,.32,1),translate .26s cubic-bezier(.23,1,.32,1)}
.home-articles .mag-card:nth-child(1){rotate:-1.4deg}.home-articles .mag-card:nth-child(3){rotate:1.2deg}
.home-articles .mag-card:nth-child(2){translate:0 -8px;z-index:1}
@media(hover:hover){.cat-page .home-articles .mag-card:hover{rotate:0deg;translate:0 -3px}.cat-page .home-articles .mag-card:nth-child(2):hover{translate:0 -11px}}
.home-articles .mag-card .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1.5deg);background:#a33d2e;color:#fff;font:600 17.5px 'Caveat',cursive;padding:3px 13px;white-space:nowrap;box-shadow:0 2px 4px -1px rgba(43,38,32,.3);z-index:3}
.home-articles .mag-card .shot{position:relative;height:130px;overflow:hidden;background:#e8ddc8;border-radius:var(--r-ctl)}
.home-articles .mag-card .shot picture,.home-articles .mag-card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.home-articles .mag-card .body{display:flex;flex-direction:column;flex:1 1 auto;text-align:center}
.home-articles .mag-card .t{font:800 16px/1.3 'Libre Franklin',sans-serif;margin-top:12px;text-wrap:balance}
.home-articles .mag-card .d{font:400 13px/1.5 'Libre Franklin',sans-serif;color:#443d34;margin:6px 0 13px}
.home-articles .mag-card .go{margin-top:auto;background:#a33d2e;color:#fff;font:700 14.5px 'Libre Franklin',sans-serif;padding:11px 8.5px;border-radius:var(--r-ctl)}
@media(max-width:639px){
.home-articles .mag-grid{grid-template-columns:1fr;gap:26px}
.home-articles .mag-card:nth-child(n){rotate:0deg;translate:0 0}
}
/* why trust us: three counters */
.home-trust-sec{margin-top:30px;scroll-margin-top:calc(var(--hdr-h,74px) + 56px)}
.home-trust{border:2.5px solid #2b2620;border-radius:var(--r-card);padding:18px;margin-top:22px;position:relative}
.home-trust .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:4px}
.home-trust .fact{display:flex;gap:10px}
.home-trust .fact .n{font:700 24px/1.1 'Caveat',cursive;color:#a33d2e;flex-shrink:0}
.home-trust .fact .l{font:400 13px/1.5 'Libre Franklin',sans-serif;color:#443d34}
/* author: handwritten quote, then the shared production-style author box (round portrait,
owner 2026-09-28: no polaroid photograph anywhere) */
.home-author{margin:26px 0 30px}
.home-author .quote{font:600 20px/1.4 'Caveat',cursive;color:#2b2620;max-width:560px}
.home-author .author-card{margin:14px 0 0}
/* --- the restored text sections under the field notes (home_sections, 2026-10-21): the reading column, prose at
--fs-prose like the review's user-content, two columns from 900px for the two "advantages" blocks --- */
.home-about-sec{max-width:860px;margin:44px auto 0;padding:0 4px}
.home-about-block{margin:0 0 30px}
.home-about-block .home-h2{margin:0 0 12px}
.home-about-sec .user-content{font-size:var(--fs-prose);line-height:1.6;color:#2b2620}
.home-about-sec .user-content p{margin:0 0 12px}
.home-about-sec .user-content ul{margin:0 0 12px 20px}
.home-about-sec .user-content a{color:#9b2226;text-decoration:underline}