/* churchfathers.css — the /churchfathers/ landing page (the Early Church Fathers Writings series).
   Every class is cf-prefixed so nothing here can collide with style.css. Colours and fonts come
   from the site's own variables, so light and dark mode follow the rest of the site. */
.cf-page{padding:0 32px 48px}
.cf-page a{text-decoration:none}
.cf-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 36px;align-items:center;margin:20px 0 8px;padding:34px 36px;border-radius:12px;background:linear-gradient(135deg,#3f121c 0%,#5a1d2a 55%,#4a2150 100%);color:#f4ead3;overflow:hidden}
.cf-kick{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#d4ae5a;margin-bottom:8px}
.cf-hero h1{font-family:var(--fs);font-weight:500;font-size:2.35rem;line-height:1.12;margin:0 0 12px;color:#f4ead3;letter-spacing:.01em}
.cf-lead{font-family:var(--fs);font-size:1.12rem;line-height:1.6;margin:0 0 12px;color:#efe3c6;max-width:60ch}
.cf-stats{font-size:.9rem;color:#d9c9a3;margin:0 0 18px}
.cf-stats b{color:#f4ead3}
.cf-cta{display:flex;flex-wrap:wrap;gap:10px}
.cf-btn{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--main);color:#fff;font-weight:700;font-size:.88rem;line-height:1.2;border:1px solid var(--main)}
.cf-btn:hover{background:var(--olive);border-color:var(--olive);color:#fff}
.cf-btn.cf-alt{background:transparent;color:var(--main);border-color:var(--gray)}
.cf-btn.cf-alt:hover{border-color:var(--main);background:var(--light);color:var(--main)}
html.dark .cf-btn{background:var(--accent);border-color:var(--accent);color:#222}
html.dark .cf-btn.cf-alt{background:transparent;color:var(--accent);border-color:var(--gray)}
html.dark .cf-btn.cf-alt:hover{border-color:var(--accent);background:var(--light)}
.cf-hero .cf-btn{background:#d4ae5a;border-color:#d4ae5a;color:#2a1418}
.cf-hero .cf-btn:hover{background:#e3c06f;border-color:#e3c06f;color:#2a1418}
.cf-hero .cf-btn.cf-alt{background:transparent;color:#f4ead3;border-color:rgba(244,234,211,.55)}
.cf-hero .cf-btn.cf-alt:hover{background:rgba(244,234,211,.12);border-color:#f4ead3;color:#fff}
html.dark .cf-hero .cf-btn{background:#d4ae5a;border-color:#d4ae5a;color:#2a1418}
html.dark .cf-hero .cf-btn.cf-alt{background:transparent;color:#f4ead3;border-color:rgba(244,234,211,.55)}

/* fan of covers */
.cf-fan{position:relative;height:310px;min-width:0}
.cf-fan img{position:absolute;bottom:0;width:150px;height:auto;aspect-ratio:2/3;border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.45);background:#222}
.cf-fan-0{left:0%;transform:rotate(-9deg) translateY(6px);z-index:1}
.cf-fan-1{left:16%;transform:rotate(-4deg) translateY(-2px);z-index:2}
.cf-fan-2{left:30%;transform:rotate(0deg) translateY(-10px);z-index:5;width:170px!important}
.cf-fan-3{left:50%;transform:rotate(4deg) translateY(-2px);z-index:3}
.cf-fan-4{left:66%;transform:rotate(9deg) translateY(6px);z-index:2}

.cf-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 6px}
.cf-how-item{padding:14px 16px;border:1px solid var(--gray);border-top:3px solid var(--accent);border-radius:6px;background:var(--light)}
.cf-how-item h2{font-size:.95rem;margin:0 0 6px;color:var(--text)}
.cf-how-item p{font-size:.88rem;line-height:1.6;color:var(--text2);margin:0}

.cf-jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.cf-pill{font-size:.82rem;padding:6px 13px;border:1px solid var(--gray);border-radius:999px;color:var(--text2);background:var(--light)}
.cf-pill small{opacity:.75;margin-left:4px}
.cf-pill:hover{border-color:var(--main);color:var(--main)}
html.dark .cf-pill:hover{border-color:var(--accent);color:var(--accent)}

.cf-h2{font-family:var(--fs);font-size:1.45rem;font-weight:500;margin:34px 0 4px;color:var(--text);padding-bottom:6px;border-bottom:2px solid var(--accent)}
.cf-sub{color:var(--text2);max-width:78ch;line-height:1.6;margin:8px 0 16px}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:18px}
.cf-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px;border:1px solid var(--gray);border-radius:8px;background:var(--card-bg)}
.cf-card:target{outline:2px solid var(--accent)}
.cf-cover{display:block;align-self:start}
.cf-cover img{display:block;width:150px;height:auto;aspect-ratio:2/3;border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.28);background:var(--gray)}
.cf-cover:hover img{box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cf-body{min-width:0;display:flex;flex-direction:column}
.cf-vol{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--main)}
html.dark .cf-vol{color:var(--accent)}
.cf-body h3{font-family:var(--fs);font-size:1.02rem;font-weight:600;line-height:1.35;margin:4px 0 6px}
.cf-body h3 a{color:var(--text)}
.cf-body h3 a:hover{color:var(--main)}
html.dark .cf-body h3 a:hover{color:var(--accent)}
.cf-meta{font-size:.8rem;color:var(--text3,var(--text2));margin-bottom:6px}
.cf-names{font-size:.8rem;line-height:1.55;color:var(--text2);margin:0 0 12px}
.cf-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.cf-links .cf-btn{padding:6px 12px;font-size:.8rem}

.cf-more,.cf-note{margin-top:34px}
.cf-more p,.cf-note p{color:var(--text2);line-height:1.65;max-width:80ch}
.cf-note{padding:16px 18px;border:1px solid var(--gray);border-left:4px solid var(--accent);border-radius:6px;background:var(--light)}
.cf-note h2{font-size:.95rem;margin:0 0 8px;color:var(--text)}
.cf-note p{font-size:.86rem;margin:0 0 8px}
.cf-note a{color:var(--main);text-decoration:underline}
html.dark .cf-note a{color:var(--accent)}

@media (max-width:900px){
  .cf-hero{grid-template-columns:1fr;padding:26px 22px}
  .cf-fan{height:250px;max-width:460px;margin:0 auto;width:100%}
  .cf-fan img{width:120px}.cf-fan-2{width:136px!important}
  .cf-how{grid-template-columns:1fr}
  .cf-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cf-page{padding:0 14px 36px}
  .cf-hero h1{font-size:1.8rem}
  .cf-card{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px}
  .cf-cover img{width:104px}
  .cf-fan{height:200px}.cf-fan img{width:96px}.cf-fan-2{width:110px!important}
}

.cf-card[hidden],.cf-group[hidden]{display:none!important}
.cf-viewmore{text-align:center;margin:8px 0 40px}
.cf-vm-count{color:var(--text3,#777);font-size:.9rem;margin:0 0 12px}
.cf-vm-btn{cursor:pointer;font:inherit;padding:12px 28px;font-size:1rem;border:0}
.cf-pill-off{opacity:.8}