/* THE COMMUNITY ZONE'S FRONT PAGE AND SEARCH (zone-front.js, BL-54) */
.zf-lede{margin:-6px 0 18px}
.zf-une{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;max-width:1120px;align-items:start}
.zf-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.zf-lead,.zf-disc,.zf-tip,.zf-piece{background:var(--warm,#fff);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.zf-lead{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.zf-lead:hover{text-decoration:none;border-color:var(--zone-line,#E4D9FC)}
.zf-lead-i{position:relative;display:block;aspect-ratio:1200/630;background:var(--deep,#F1EAFE)}
.zf-lead-i img{display:block;width:100%;height:100%;object-fit:cover}
.zf-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--deep,#F1EAFE);color:var(--accent-ink,#6D28D9)}
.zf-tag.is-article{background:var(--tint-yes);color:var(--yes)}.zf-tag.is-tool{background:var(--gold-wash,#FFF6D6);color:var(--gold-ink,#7A5A00)}
.zf-tag.is-ov{position:absolute;left:14px;top:14px;background:var(--warm,#fff);font-size:12px;padding:4px 10px}
.zf-lead-min{position:absolute;left:14px;bottom:14px;font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.zf-lead-b{display:block;padding:20px 22px 22px}
.zf-kick{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-muted,var(--gray))}
.zf-lead-t{display:block;font-family:var(--display);font-size:26px;line-height:1.15;letter-spacing:-.015em;margin:8px 0 10px}
.zf-lead-d{display:block;font-size:15px;color:var(--ink);opacity:.85}
.zf-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:15px;font-weight:600}
.zf-h a{flex:none;font-size:13px;font-weight:600;color:var(--accent-ink,#6D28D9);text-decoration:none}
.zf-h a:hover{text-decoration:underline}
.zf-disc{padding:16px 18px}
/* The card's head keeps the card's own rhythm, whatever the page's heading rule says (Mathieu, 5 November,
   note 74ea2a422f7c: the space above it was larger than in the other cards). */
.zf-une .zf-disc h2.zf-h,.zf-grp h2.zf-h{margin-top:0;font-size:15px;line-height:1.3}
h2.zf-h-row{font-size:17px}
.zf-thrs{list-style:none;margin:0;padding:0}
.zf-thrs li+li{border-top:1px solid var(--line)}
.zf-thr{display:block;padding:9px 0;color:var(--ink);text-decoration:none}
.zf-thr:hover .zf-thr-t{color:var(--accent-ink,#6D28D9)}
/* The kinds in the feed's own colours (community.css .cm-kind). */
.zf-k{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:1px 7px;border-radius:999px;margin-right:6px;vertical-align:1px;background:var(--sunken);color:var(--ink-muted)}
.zf-k.is-question{background:var(--tint-orange);color:var(--accent-ink,var(--orange))}.zf-k.is-win{background:var(--tint-yes);color:var(--yes)}.zf-k.is-tip{background:var(--gold-wash,#FFF6D6);color:var(--gold-ink,#7A5A00)}.zf-k.is-poll{background:var(--tint-green);color:var(--green)}.zf-k.is-prompt{background:var(--deep,#F1EAFE);color:var(--accent-ink,#6D28D9)}
.zf-thr-t{font-weight:500;font-size:14.5px;line-height:1.3}
.zf-thr-m{display:block;font-size:12.5px;color:var(--ink-muted,var(--gray));margin-top:3px}
.zf-quiet{margin:0;font-size:14px;color:var(--ink-muted,var(--gray))}
.zf-quiet a{color:var(--accent-ink,#6D28D9);font-weight:600}
/* The tip of the day in the tips' gold, the one warm note on the page. */
.zf-tip{padding:16px 18px;background:var(--gold-wash,#FFF6D6);border-color:transparent}
.zf-tip .zf-kick{color:var(--gold-ink,#7A5A00)}.zf-tip-t{display:block;font-size:16px;margin:6px 0 4px;color:var(--ink)}.zf-tip-d{margin:0;font-size:14px;color:var(--ink);opacity:.85}
.zf-h-row{max-width:1120px;margin:28px 0 12px;font-size:17px}
.zf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1120px}
.zf-piece{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.zf-piece:hover{text-decoration:none;border-color:var(--zone-line,#E4D9FC)}
.zf-piece-i{display:block;aspect-ratio:2/1;min-width:0;overflow:hidden;background:var(--deep,#F1EAFE)}
.zf-piece-i img{display:block;width:100%;height:100%;object-fit:cover}
.zf-piece-b{display:block;min-width:0;padding:12px 14px 14px}
.zf-piece-t{display:block;font-family:var(--display);font-size:15px;line-height:1.3;margin:6px 0 6px}
.zf-piece-m{display:block;font-size:12.5px;color:var(--ink-muted,var(--gray))}
.zf-join{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 0;padding:18px 20px;border-radius:16px;background:var(--deep,#F1EAFE);max-width:1120px}
.zf-join b{display:block;font-size:16px}.zf-join small{display:block;font-size:13.5px;color:var(--ink-muted,var(--gray))}
.zf-join-go{flex:none;border:0;padding:11px 18px;border-radius:999px;background:var(--action,#6322F0);color:#fff;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:720px){.zf-join{flex-direction:column;align-items:flex-start}}
.zf-foot{margin:26px 0 0;font-size:13px}
.zf-foot a{color:var(--ink-muted,var(--gray));text-decoration:none}.zf-foot a:hover{color:var(--ink)}
.zf-foot svg{vertical-align:-2px}
.zf-search{max-width:560px;margin:0 0 18px;padding:10px 14px}
.zf-search input{font-size:15px}
.zf-count{margin:0 0 18px;font-size:14px;color:var(--ink-muted,var(--gray))}
.zf-grp{margin:0 0 26px;max-width:1120px}
.zf-grp .zf-thrs{background:var(--warm,#fff);border:1px solid var(--line);border-radius:16px;padding:6px 18px}
.zf-grp[id]{scroll-margin-top:84px}
.zf-h-n{flex:none;font-size:12.5px;font-weight:500;color:var(--ink-muted,var(--gray))}
.zf-more{margin:10px 0 0;font-size:14px}
.zf-more a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-ink,#6D28D9);font-weight:600;text-decoration:none}
.zf-more a:hover{text-decoration:underline}
.zf-tips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.zf-tipr{background:var(--warm,#fff);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.zf-tipr strong{display:block;font-size:14.5px}.zf-tipr span{display:block;font-size:13px;color:var(--ink-muted,var(--gray));margin-top:3px}
@media (max-width:900px){
  /* Nothing under 12px on a phone (check-phone). */
  .zf-k,.zf-tag,.zf-kick,.zf-thr-m,.zf-piece-m,.zf-lead-min{font-size:12px}
  .zf-une{grid-template-columns:minmax(0,1fr);gap:14px}
  .zf-lead-t{font-size:20px}.zf-lead-b{padding:14px 16px 16px}
  .zf-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .zf-piece{flex-direction:row;align-items:stretch}.zf-piece-i{flex:0 0 118px;width:118px;aspect-ratio:auto;min-height:88px}.zf-piece-i img{height:100%}.zf-piece-b{flex:1 1 auto;padding:10px 12px}
}
@media (min-width:901px) and (max-width:1180px){.zf-une{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.zf-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
