/* The Journal — posts index. Scoped .czj; reuses .cza tokens/hero from page-home-a.css. */
.cza-hero--short{min-height:62vh}
.cza-hero--short .cza-hero__media img{height:100%}

/* Category pills */
.czj-cats{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;padding:2.6rem max(var(--gut),calc((100% - var(--wrap))/2)) .5rem}
.czj-cats__pill{display:inline-flex;align-items:center;padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:999px;
	font-size:.82rem;letter-spacing:.06em;color:var(--txt);text-decoration:none;background:transparent;
	transition:background .3s ease,border-color .3s ease,color .3s ease}
.czj-cats__pill:hover,.czj-cats__pill:focus-visible{background:var(--plum-deep);border-color:var(--plum-deep);color:var(--ivory)}
.czj-cats__pill.is-active{background:color-mix(in srgb,var(--champ) 22%,transparent);border-color:color-mix(in srgb,var(--champ) 55%,transparent)}

/* Shared meta line (chip + date) */
.czj-meta{display:flex;align-items:center;gap:.7rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.czj-chip{color:var(--champ);font-weight:600}
.czj-date{position:relative;padding-left:.7rem}
.czj-date::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;background:var(--champ);transform:translateY(-50%)}

/* Lead feature */
.czj-lead{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;text-decoration:none;color:inherit;
	max-width:calc(var(--wrap) + 2*var(--gut));margin:1.5rem auto 0;padding:0 var(--gut);border-radius:0}
.czj-lead__media{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/3}
.czj-lead__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.czj-lead:hover .czj-lead__media img{transform:scale(1.04)}
.czj-lead__body{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:2.5rem 0 2.5rem 3rem}
.czj-lead__title{font-family:var(--serif);font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.12;color:var(--ivory);letter-spacing:-.01em}
.czj-lead__excerpt{font-size:1.02rem;line-height:1.65;color:var(--mut);max-width:46ch}
.czj-lead__go{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.czj-lead__go i{font-size:.7rem;color:var(--champ);transition:transform .3s ease}
.czj-lead:hover .czj-lead__go i{transform:translateX(4px)}

/* Grid of remaining posts */
.czj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 1.8rem;
	max-width:calc(var(--wrap) + 2*var(--gut));margin:3.5rem auto 0;padding:0 var(--gut)}
.czj-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;gap:1rem}
.czj-card__media{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/2;background:color-mix(in srgb,var(--plum) 6%,transparent)}
.czj-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.czj-card:hover .czj-card__media img{transform:scale(1.05)}
.czj-card__ph{position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--plum) 10%,transparent),transparent)}
.czj-card__body{display:flex;flex-direction:column;gap:.55rem}
.czj-card__title{font-family:var(--serif);font-size:1.28rem;line-height:1.2;color:var(--ivory)}
.czj-card__excerpt{font-size:.95rem;line-height:1.6;color:var(--mut)}

.czj-empty{padding:4.5rem max(var(--gut),calc((100% - var(--wrap))/2));text-align:center;max-width:640px;margin:0 auto}
.czj-empty .cz-eyebrow{justify-content:center}
.czj-empty .cza-h{margin-top:.7rem}

@media(max-width:900px){
	.czj-lead{grid-template-columns:1fr;gap:1.3rem}
	.czj-lead__body{padding:0}
	.czj-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem}
}
@media(max-width:560px){
	.czj-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
	.czj-lead__media img,.czj-card__media img,.czj-lead__go i{transition:none}
	.czj-lead:hover .czj-lead__media img,.czj-card:hover .czj-card__media img{transform:none}
}

/* ── Generic archives + search (archive.php) ──────────────────────────────────────────────────
   Categories, tags, dates, authors, catalogue taxonomies and search all previously fell through to
   index.php, which rendered raw <h2><a> links with no layout layer at all — a visitor clicking
   "Buying Advice" on the Journal landed on what looked like an unstyled document. These reuse the
   Journal's own .czj cards, so an archive is visibly the same product as the page that linked to
   it, and its header is the only thing that needs its own treatment. */
.czj--archive{padding-top:0}
.czj-archhead{padding:calc(80px + clamp(2.5rem,6vw,4.5rem)) 0 clamp(1.5rem,3vw,2.25rem);
  background:linear-gradient(180deg,var(--bg2),var(--bg))}
.czj-archhead__inner{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.czj-crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.76rem;letter-spacing:.04em;color:var(--mut)}
.czj-crumb a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.czj-crumb a:hover,.czj-crumb a:focus-visible{color:var(--champ);border-bottom-color:var(--champ)}
/* Element+class: base.css sets `.cz h1{font-size:var(--h1)}` at (0,1,1), which beats a class-only
   rule regardless of load order and would render this at homepage-hero scale. Same trap the Guide
   H1 hit; matching the element restores the tie so cascade order decides. */
h1.czj-archhead__h{margin:1rem 0 0;font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.06;letter-spacing:-.02em;color:var(--ivory);max-width:20ch}
.czj-archhead__lede{margin-top:.9rem;max-width:58ch;color:#B9AEB8;line-height:1.7}
.czj-archhead__lede p{margin:0}
.czj-archhead__count{margin:1rem 0 0;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--champ)}

.czj-pag{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:2.5rem max(var(--gut),calc((100% - var(--wrap))/2)) 1rem}
.czj-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .85rem;border:1px solid var(--line);border-radius:999px;
  font-size:.85rem;color:var(--txt);text-decoration:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.czj-pag .page-numbers:hover{border-color:var(--champ);color:var(--champ)}
.czj-pag .page-numbers.current{background:var(--champ);border-color:var(--champ);color:var(--plum-deep)}
.czj-pag .page-numbers:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
.czj-pag .dots{border-color:transparent}

.czj-empty{text-align:center;padding:clamp(3rem,7vw,5rem) max(var(--gut),calc((100% - var(--wrap))/2))}
.czj-empty .cza-sub{max-width:52ch;margin:1rem auto 1.8rem}
.czj-empty .cza-cta__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

@media(max-width:600px){
  .czj-archhead{padding-top:calc(72px + 2rem)}
  .czj-pag .page-numbers{min-width:44px}
}