/* ============================================================
   early-church-fathers.css — early-church-fathers's own styles, moved out of the <style>
   block that followed styles.css in early-church-fathers.html.
   Linked from the same place in the page, so the order is unchanged.
   ============================================================ */

:root{
--ecf-ink:#241a10;
--ecf-panel:#fbf8ef;
--ecf-panel-2:#f3ead8;
--ecf-line:#ddd0b4;
--ecf-gold:#9a7a2e;
--ecf-gold-dim:#7d6224;
--ecf-parchment:#241a10;
--ecf-tan:#241a10;
--ecf-muted:#655740;
--ecf-council:#657687;
--ecf-martyr:#8b4c3f;
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
background:
  radial-gradient(circle at 78% 6%, rgba(201,168,90,.08), transparent 36%),
  #f6f1e6;
color:var(--ecf-tan);
font-family:var(--body);
font-size:20px;
line-height:1.5;
}
.fathers-content a{color:var(--ecf-gold);text-decoration:none}
.fathers-content a:focus-visible{outline:2px solid var(--ecf-gold);outline-offset:3px}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;max-width:none;margin:0;padding:66px 24px 48px;text-align:center;background:radial-gradient(ellipse at 50% 15%,rgba(201,168,90,.16),transparent 55%),linear-gradient(180deg,#26190e,#1a120b);border-bottom:1px solid rgba(201,168,90,.34)}
/* Michael Pacher, Altarpiece of the Church Fathers (c.1483) - Jerome, Augustine, Gregory, Ambrose */
.hero::before{content:"";position:absolute;inset:-2%;pointer-events:none;background:linear-gradient(180deg,rgba(26,18,11,.62) 0%,rgba(26,18,11,.78) 70%,rgba(26,18,11,.93) 100%),radial-gradient(ellipse at 50% 28%,rgba(201,168,90,.08),rgba(26,18,11,.34) 68%),url("/images/early-church-fathers-masthead.webp") center 32% / cover no-repeat;filter:saturate(.72) sepia(.12) contrast(1.08);transform:scale(1.025)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(18,11,6,.54),transparent 25%,transparent 75%,rgba(18,11,6,.54)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")}
.hero .hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.hero .hero-emblem{display:block;width:auto;height:52px;margin:0 auto 25px;filter:drop-shadow(0 0 26px rgba(201,168,90,.44)) brightness(1.08)}
.hero h1{font-family:var(--display);font-size:clamp(28px,4.6vw,46px);font-weight:600;color:#f5ecd6;margin:15px 0 8px;letter-spacing:.05em;text-shadow:0 3px 24px rgba(0,0,0,.42)}
.hero .epigraph{margin:28px auto 0;max-width:640px;padding:18px 26px;border-top:1px solid rgba(201,168,90,.3);border-bottom:1px solid rgba(201,168,90,.3)}
@media(max-width:700px){.hero{padding:52px 24px 38px}.hero::before{background-position:center 34%}}
.section h3{font-family:var(--display);font-size:16px;font-weight:600;color:var(--gold-deep);letter-spacing:.16em;text-transform:uppercase;margin:38px 0 14px}
.section p:last-child{margin-bottom:0}
.rule{max-width:820px;margin:0 auto;padding:0 24px}
.rule hr{border:none;border-top:1px solid var(--ecf-line)}
blockquote{padding:16px 22px;border-left:2px solid var(--gold);background:rgba(251,248,239,.72);border-radius:0;margin:22px 0;color:var(--espresso);font-family:var(--head);font-size:23px;font-style:italic;line-height:1.32}
.mark{background:rgba(251,248,239,.78);border:1px solid var(--ecf-line);border-radius:0;padding:20px 22px;box-shadow:none}
.mark h4{font-family:var(--display);color:var(--gold-deep);font-size:11px;font-weight:600;letter-spacing:.18em;line-height:1.25;text-transform:uppercase;margin-bottom:8px}
.mark p{font-size:18px;line-height:1.38;margin:0;color:var(--ink)}

/* ============ LIFESPAN CHART (pure CSS, server-rendered) ============ */
.chart{background:radial-gradient(circle at 14% 8%,rgba(201,168,90,.1),transparent 34%),linear-gradient(180deg,#2b1d11,#17100a);border:1px solid rgba(201,168,90,.42);border-radius:2px;padding:30px 28px 22px;position:relative;overflow:hidden;box-shadow:0 22px 50px rgba(45,28,14,.18)}
.chart-scale{position:relative;height:22px;border-bottom:1px solid rgba(201,168,90,.32);margin:0 0 14px;font-size:10px;color:#cbbd9f;font-family:var(--display);letter-spacing:.17em;text-transform:uppercase}
.chart-rows{position:relative;padding-bottom:18px}
.chart-row{position:relative;height:26px;margin-bottom:5px}
.chart-bar{position:absolute;top:4px;height:18px;border-radius:9px;background:linear-gradient(90deg,#9f7b2d,#d3ad52);min-width:6px}
.chart-bar.golden{background:linear-gradient(90deg,#ad7921,#d4a33c)}
.chart-bar.late{background:linear-gradient(90deg,#665942,#9d8355)}
.chart-name{position:absolute;top:3px;font-size:11px;font-weight:600;color:#f4ead4;font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 2px #0f0a06}
.chart-name .m{color:#d88b7c}
.council-line{position:absolute;top:0;bottom:0;width:2px;background:#849ab0;opacity:.78}
.council-label{position:absolute;transform:translateX(-50%);font-size:10px;color:#a9bdd0;font-family:var(--display);letter-spacing:.17em;text-transform:uppercase;background:#1d140c;padding:0 6px;bottom:-4px}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#cbbd9f}
.chart-legend .chip{display:inline-block;width:26px;height:10px;border-radius:5px;margin-right:7px;vertical-align:baseline}
@media (max-width:640px){.chart-name{font-size:11px}.chart{padding:20px 12px 14px}}
.pcard{background:rgba(251,248,239,.82);border:1px solid var(--ecf-line);border-radius:0;padding:22px 24px;box-shadow:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.pcard .order{font-family:var(--display);font-size:11px;font-weight:600;color:var(--gold-deep);letter-spacing:.18em;line-height:1.25;text-transform:uppercase}
.pcard h4 span.alt{font-family:var(--head);font-size:17px;color:var(--gold-deep);font-weight:500;letter-spacing:0;font-style:italic}
.pcard .meaning{font-family:var(--head);font-style:italic;color:var(--gold-deep);font-size:19px;line-height:1.35;margin-bottom:8px}
.pcard .years{font-size:11px;color:var(--muted);font-family:var(--display);font-weight:600;letter-spacing:.18em;line-height:1.4;text-transform:uppercase;margin-bottom:12px}
.pcard .years .m{color:var(--ecf-martyr)}
.pcard p{font-size:18px;line-height:1.38;color:var(--ink);margin-bottom:10px}
.pcard .ref{font-size:10px;color:var(--gold-deep);font-family:var(--display);font-weight:600;letter-spacing:.17em;line-height:1.45;text-transform:uppercase}
.pcard.writer{border-style:dashed}
.edict .sun{color:var(--gold);letter-spacing:8px;font-size:20px}
.edict h3{font-family:var(--display);color:var(--gold-deep);letter-spacing:.08em;font-size:24px;margin:10px 0 6px}
.edict p{color:var(--muted);font-family:var(--head);font-size:19px;font-style:italic;line-height:1.35;max-width:580px;margin:0 auto}

/* ============ DISTINCTION BOX ============ */
.distinct{background:rgba(251,248,239,.8);border:1px solid var(--ecf-line);border-radius:0;padding:24px 26px;margin-top:22px;box-shadow:none}
.distinct h4{font-family:var(--display);color:var(--ink);letter-spacing:.05em;font-size:24px;margin-bottom:8px}
.distinct p{font-size:18px;line-height:1.38;color:var(--ink)}
.crosslinks a{display:block;background:rgba(251,248,239,.78);border:1px solid var(--ecf-line);border-radius:0;padding:16px 18px;color:var(--ecf-parchment);box-shadow:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.crosslinks a:hover{border-color:var(--ecf-gold);box-shadow:0 8px 22px rgba(60,37,18,.08);text-decoration:none;transform:translateY(-2px)}
.crosslinks a .cl-desc{font-size:18px;color:var(--ink);margin-top:7px;line-height:1.38}

/* ── Single-element styles, once written inline on the page ──
   Each class carries what one style="" attribute said. They sit last in
   the page's cascade, as the attributes did; where a rule elsewhere
   matched the same element more specifically, the class is doubled so it
   still wins, exactly as the attribute won. */
.u-mt-16.u-mt-16{margin-top:16px;}
.u-maxw-820{max-width:820px;}
.u-early-church-fathers-3{left:9.6%;}
.u-early-church-fathers-4{left:23.3%;}
.u-early-church-fathers-5{left:37.0%;}
.u-early-church-fathers-6{left:50.7%;}
.u-early-church-fathers-7{left:64.4%;}
.u-early-church-fathers-8{left:78.1%;}
.u-early-church-fathers-9{left:91.8%;}
.u-early-church-fathers-10{left:38.8%;}
.u-early-church-fathers-11{left:40.4%;}
.u-early-church-fathers-12{left:57.7%;}
.u-early-church-fathers-13{left:0.7%;width:8.8%;}
.u-early-church-fathers-14{left:10.5%;}
.u-early-church-fathers-15{left:0.7%;width:9.9%;}
.u-early-church-fathers-16{left:11.6%;}
.u-early-church-fathers-17{left:5.3%;width:11.8%;}
.u-early-church-fathers-18{left:18.1%;}
.u-early-church-fathers-19{left:9.6%;width:8.9%;}
.u-early-church-fathers-20{left:19.5%;}
.u-early-church-fathers-21{left:13.7%;width:9.9%;}
.u-early-church-fathers-22{left:24.6%;}
.u-early-church-fathers-23{left:17.8%;width:8.2%;}
.u-early-church-fathers-24{left:27%;}
.u-early-church-fathers-25{left:21.1%;width:9.5%;}
.u-early-church-fathers-26{left:31.6%;}
.u-early-church-fathers-27{left:23.3%;width:7.9%;}
.u-early-church-fathers-28{left:32.2%;}
.u-early-church-fathers-29{left:36.4%;width:10.5%;}
.u-early-church-fathers-30{left:47.9%;}
.u-early-church-fathers-31{left:38.4%;width:7.8%;}
.u-early-church-fathers-32{left:47.2%;}
.u-early-church-fathers-33{left:41.0%;width:8.4%;}
.u-early-church-fathers-34{left:50.4%;}
.u-early-church-fathers-35{left:41.1%;width:6.7%;}
.u-early-church-fathers-36{left:48.8%;}
.u-early-church-fathers-37{left:41.8%;width:8.2%;}
.u-early-church-fathers-38{left:51%;}
.u-early-church-fathers-39{left:42.5%;width:7.8%;}
.u-early-church-fathers-40{left:51.3%;}
.u-early-church-fathers-41{left:43.4%;width:8.2%;}
.u-early-church-fathers-42{left:52.6%;}
.u-early-church-fathers-43{left:43.4%;width:10.0%;}
.u-early-church-fathers-44{left:54.4%;}
.u-early-church-fathers-45{left:44.4%;width:10.4%;}
.u-early-church-fathers-46{left:55.8%;}
.u-early-church-fathers-47{left:47.4%;width:9.3%;}
.u-early-church-fathers-48{left:50.7%;width:8.4%;}
.u-early-church-fathers-49{left:60.1%;}
.u-early-church-fathers-50{left:69.9%;width:8.8%;}
.u-early-church-fathers-51{left:79.7%;}
.u-early-church-fathers-52{left:72.6%;width:10.4%;}
.u-early-church-fathers-53{left:83.9%;}
.u-mb-0{margin-bottom:0;}
.u-early-church-fathers-55{left:88.4%;width:10.1%;}
.u-early-church-fathers-56{left:70%;}
.u-early-church-fathers-57{left:38.8%;bottom:14px;}
.u-early-church-fathers-58{left:47%;bottom:-2px;}
.u-early-church-fathers-59{left:57.7%;bottom:14px;}
.u-mt-22{margin-top:22px;}
.u-early-church-fathers-61{background:linear-gradient(90deg,var(--ecf-gold-dim),var(--ecf-gold));}
.u-early-church-fathers-62{background:linear-gradient(90deg,#7a6a3a,#b09248);}
.u-early-church-fathers-63{background:linear-gradient(90deg,#8a5a20,var(--ecf-gold));}
.u-early-church-fathers-64{background:linear-gradient(90deg,#5e5340,#8f7d55);}
.u-c-ecf-martyr{color:var(--ecf-martyr);}
.u-bg-ecf-council{background:var(--ecf-council);}
.u-mt-14.u-mt-14{margin-top:14px;}
.u-mt-0.u-mt-0{margin-top:0;}