/* ===================================================================
   Articles listings (design: articles.html) — posts page, categories,
   tags, authors, search, 404: featured article + table of contents.
   Shared featured card lives in base.css; only the design's
   article-specific differences are here.
   =================================================================== */

.page-head .lede{font-size:16px; line-height:1.6; opacity:.65; max-width:56ch; margin-top:12px;}
.page-head .lede > * + *{margin-top:.6em;}

/* ---- featured article: mirrored lavender sibling ---- */
.article-feature{margin-bottom:120px;}
.article-feature .feature-photo{aspect-ratio:16/7;}
.article-feature .feature-tag{background:var(--lavender-strong); color:var(--paper);}
.article-feature .feature-card{box-shadow:-8px 8px 0 var(--lavender-strong);}
.article-feature .feature-card:hover{transform:rotate(1.4deg) translate(3px,-3px); box-shadow:-11px 11px 0 var(--lavender-strong);}

/* recipe featured on a mixed listing (tags) */
.recipe-feature{margin-bottom:120px;}

/* ---- table of contents ---- */
.toc-list{border-top:2px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; column-gap:44px;}

.toc-item{position:relative; display:grid; grid-template-columns:92px 1fr 28px; align-items:center; gap:18px; padding:22px 4px; border-bottom:1.5px solid var(--ink); text-decoration:none; overflow:hidden;}

.toc-item .thumb{width:92px; height:70px; overflow:hidden; border:1.5px solid var(--ink); position:relative; z-index:1;}
.toc-item .thumb img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .35s ease;}

.toc-item .info{min-width:0;}
.toc-item .eyebrow{display:block; margin-bottom:6px;}
.toc-item .toc-title{font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1.28; transition:transform .18s ease; overflow-wrap:break-word;}
.toc-item .price{display:block; margin-top:6px; font-size:14px;}

.toc-item .arrow{font-size:18px; font-family:var(--font-display); font-weight:700; opacity:.3; transition:opacity .18s ease, transform .18s ease;}

.toc-item:hover{background:var(--paper);}
.toc-item:hover .thumb img{transform:scale(1.08);}
.toc-item:hover .toc-title{transform:translateX(6px);}
.toc-item:hover .arrow{opacity:1; transform:translateX(6px);}
.toc-item:focus-visible{outline-offset:-2px;}

@media (max-width:1080px){
  .article-feature,.recipe-feature{margin-bottom:44px;}
  .article-feature .feature-photo{aspect-ratio:16/9;}
  .article-feature .feature-card:hover{transform:none;}
}

@media (max-width:900px){
  .toc-list{grid-template-columns:1fr;}
  .toc-item{grid-template-columns:92px 1fr 28px; gap:18px; padding:20px 2px;}
}

@media (max-width:560px){
  .toc-item{grid-template-columns:1fr; row-gap:12px;}
  .toc-item .thumb{width:100%; height:180px;}
  .toc-item .arrow{display:none;}
}