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

/* ── Rules from styles.css used only by this page ── */

/* ── The page's own rules, from its <style> block ── */

:root{
--parchment:#f7f1e2;
--parchment-deep:#eee4cd;
--ink:#241a10;
--ink-brand:#1a120b;
--rubric:#8e2b1a;        /* vermilion of manuscript rubrication */
--gold:#a17c33;
--faded:#6b5a44;
--line:rgba(36,26,16,.16);
--line-strong:rgba(36,26,16,.34);
--serif-display:"Cormorant Garamond",Georgia,serif;
--serif-body:"EB Garamond",Georgia,serif;
--sans-utility:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{
background:var(--parchment);
background-image:radial-gradient(ellipse at 50% -10%,rgba(161,124,51,.10),transparent 55%);
color:var(--ink);
font-family:var(--serif-body);
font-size:1.1875rem;
line-height:1.5;
}
:where(main, footer) img{max-width:100%;display:block}
:where(main, footer) a{color:var(--rubric)}
:where(main, footer) a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
:where(main, footer) .wrap{max-width:1040px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.skip{position:absolute;left:-999px;top:0;background:var(--rubric);color:var(--parchment);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}

/* ---------- utility type ---------- */
.kicker{
font-family:var(--display);
font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--rubric);font-weight:600;
}
.kicker--gold{color:var(--gold)}

/* ---------- site header ---------- */
.site-head{background:var(--ink-brand);color:#e9ddc6}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;padding-block:.85rem}
.brand{display:flex;align-items:baseline;gap:.6rem;color:#e9ddc6;text-decoration:none}
.brand-name{font-family:var(--serif-display);font-weight:600;letter-spacing:.14em;font-size:1.05rem;text-transform:uppercase}
.brand-motto{font-style:italic;color:var(--gold);font-size:.85rem}
.site-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:.25rem .35rem;font-family:var(--sans-utility);font-size:.78rem;letter-spacing:.06em}
.site-nav a{color:#cdbfa2;text-decoration:none;padding:.35rem .55rem;border-radius:3px}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.07)}

/* ---------- hero ---------- */
.hero{
position:relative;overflow:hidden;
padding:0 1.5rem 3rem;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);
}
/* Pacher's altarpiece of the four Latin Doctors, behind the title */
.hero-art{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:url("/images/doctors-of-the-church/church-fathers-masthead.webp") center 35% / cover no-repeat;
filter:saturate(.8);
}
/* veil holding the small champagne type legible over the painting */
.hero::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
  linear-gradient(90deg,rgba(18,11,6,.50),transparent 22%,transparent 78%,rgba(18,11,6,.50)),
  radial-gradient(ellipse at 50% 15%,rgba(201,168,90,.16),rgba(26,18,11,.26) 55%),
  linear-gradient(180deg,rgba(26,18,11,.78) 0%,rgba(26,18,11,.80) 70%,rgba(26,18,11,.90) 100%);
}
.hero .wrap{max-width:820px;position:relative;z-index:2}
.hero .hero-emblem{
width:auto;height:52px;margin:0 auto 25px;
filter:drop-shadow(0 7px 18px rgba(201,168,90,.25));
}
.hero .kicker{
font-family:var(--display);font-size:11px;font-weight:600;
letter-spacing:.32em;color:var(--champagne);
}
.hero h1{
margin:15px 0 8px;color:#f5ecd6;
font-family:var(--display);font-weight:600;
font-size:clamp(28px,4.6vw,46px);line-height:1.12;letter-spacing:.05em;
}
.hero .dek{
max-width:38em;margin:0 auto;
color:var(--muted-dark);font-family:var(--head);
font-style:italic;font-size:20px;line-height:1.35;
}
.hero .quickline{
margin-top:1.6rem;font-family:var(--display);font-size:10px;
letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);
}
.hero .quickline b{color:#f5ecd6;font-weight:600}

/* ---------- sticky index bar ---------- */
.index-bar{
position:sticky;top:var(--nav-h);z-index:40;
background:var(--parchment-deep);
border-bottom:1px solid var(--line-strong);
box-shadow:0 1px 0 rgba(161,124,51,.25);
}
.index-bar .wrap{display:flex;align-items:center;gap:.25rem;overflow-x:auto;padding-block:.4rem}
.index-bar a.jump{
font-family:var(--sans-utility);font-size:.74rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
color:var(--ink);padding:.45rem .65rem;border-radius:3px;white-space:nowrap;
}
.index-bar a.jump:hover{color:var(--rubric);background:rgba(142,43,26,.08)}
.name-index{margin-left:auto;position:relative}
.name-index>summary{
list-style:none;cursor:pointer;font-family:var(--sans-utility);
font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--parchment);background:var(--rubric);
padding:.45rem .8rem;border-radius:3px;white-space:nowrap;user-select:none;
}
.name-index>summary::-webkit-details-marker{display:none}
.name-index>summary:hover{background:#a53a24}
.name-index-panel{
position:absolute;right:0;top:calc(100% + .5rem);
width:min(88vw,620px);max-height:min(60vh,430px);overflow:auto;
background:var(--parchment);border:1px solid var(--line-strong);
box-shadow:0 12px 30px rgba(26,18,11,.25);border-radius:4px;
padding:1rem 1.2rem;
columns:3;column-gap:1.5rem;
}
.name-index-panel a{
display:block;text-decoration:none;color:var(--ink);
font-size:.95rem;padding:.18rem 0;break-inside:avoid;
}
.name-index-panel a:hover{color:var(--rubric)}
.name-index-panel a small{color:var(--faded);font-size:.78em}

/* ---------- sections ---------- */
section{padding-block:clamp(2.5rem,6vw,4rem)}
.section-head{margin-bottom:1.6rem}
.section-head h2{
font-family:var(--serif-display);font-weight:600;
font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.15;margin-top:.35rem;
}
.prose{max-width:44em}
.prose p+p{margin-top:0}
.prose em,.prose i{font-style:italic}

/* ---------- pull-quote bookends ---------- */
.bookend{
text-align:center;padding-block:clamp(2rem,5vw,3.2rem);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bookend blockquote{
font-family:var(--serif-display);font-style:italic;font-weight:500;
font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.45;
max-width:34em;margin-inline:auto;color:var(--ink);
}
.bookend blockquote::before{content:"❧";display:block;color:var(--rubric);font-style:normal;font-size:1.3rem;margin-bottom:.8rem}
.bookend cite{
display:block;margin-top:.9rem;font-family:var(--sans-utility);font-style:normal;
font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}

/* ---------- criteria cards ---------- */
.criteria{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.criterion{
border:1px solid var(--line);border-top:3px solid var(--rubric);
background:rgba(255,255,255,.35);padding:1.4rem 1.4rem 1.5rem;border-radius:3px;
}
.criterion .numeral{
font-family:var(--serif-display);font-weight:600;font-size:2rem;
color:var(--rubric);line-height:1;
}
.criterion h3{font-family:var(--serif-display);font-weight:600;font-size:1.25rem;margin-top:.6rem;line-height:1.3}
.criterion h3 em{display:block;font-size:.85em;color:var(--gold);font-weight:500}
.criterion p{font-size:1rem;color:var(--faded);margin-top:.6rem;line-height:1.55}

/* ---------- roll toolbar ---------- */
.toolbar{
display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
border:1px solid var(--line);background:rgba(255,255,255,.35);
padding:.85rem 1rem;border-radius:4px;margin-top:1.8rem;
}
.toolbar .group{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.toolbar .group-label{
font-family:var(--sans-utility);font-size:.68rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-right:.2rem;
}
.chip{
font-family:var(--sans-utility);font-size:.74rem;font-weight:600;letter-spacing:.04em;
border:1px solid var(--line-strong);background:transparent;color:var(--ink);
padding:.35rem .75rem;border-radius:999px;cursor:pointer;
}
.chip:hover{border-color:var(--rubric);color:var(--rubric)}
.chip[aria-pressed="true"]{background:var(--rubric);border-color:var(--rubric);color:var(--parchment)}
.count-line{
margin-left:auto;font-family:var(--sans-utility);font-size:.74rem;
letter-spacing:.06em;color:var(--faded);
}
.roll-hint{font-size:.92rem;font-style:italic;color:var(--faded);margin-top:.8rem;max-width:46em}

/* ---------- era bands ---------- */
.era-band{
margin-top:3.2rem;padding:1.6rem 1.5rem 1.7rem;
background:linear-gradient(180deg,var(--parchment-deep),rgba(238,228,205,.35));
border-top:2px solid var(--gold);border-bottom:1px solid var(--line);
display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;align-items:baseline;
border-radius:2px;
}
.era-band .versal{
grid-row:1/span 3;
font-family:var(--serif-display);font-weight:700;color:var(--rubric);
font-size:clamp(3.2rem,7vw,4.6rem);line-height:.9;
}
.era-band .kicker{grid-column:2}
.era-band h3{grid-column:2;font-family:var(--serif-display);font-weight:600;font-size:clamp(1.6rem,3.5vw,2.1rem);line-height:1.1}
.era-band .era-note{grid-column:2;font-style:italic;color:var(--faded);font-size:1.02rem}

/* ---------- doctor entries ---------- */
.doctor{
display:grid;grid-template-columns:2.6rem 256px 1fr;gap:1.8rem;
padding-block:2.2rem;border-bottom:1px solid var(--line);
}
.doctor[hidden]{display:none}
.d-num{
font-family:var(--serif-display);font-weight:600;font-size:1.45rem;
color:var(--rubric);text-align:right;line-height:1;padding-top:.3rem;
}
.d-fig{position:relative;width:256px}
.d-fig img{
width:256px;height:320px;object-fit:cover;object-position:top;
border:1px solid var(--line-strong);outline:4px solid rgba(161,124,51,.14);
background:var(--parchment-deep);filter:sepia(.12) saturate(.92);
}
.d-mono{display:none}
.d-fig.no-img img{display:none}
.d-fig.no-img .d-mono{
display:flex;align-items:center;justify-content:center;
width:256px;height:320px;border:1px solid var(--line-strong);
outline:4px solid rgba(161,124,51,.14);background:var(--parchment-deep);
font-family:var(--serif-display);font-weight:700;font-size:3rem;color:var(--rubric);
}
.epithet{
font-family:var(--serif-display);font-style:italic;font-weight:500;
color:var(--gold);font-size:1.02rem;letter-spacing:.02em;
}
.d-name{font-family:var(--serif-display);font-weight:600;font-size:clamp(1.5rem,3vw,1.85rem);line-height:1.15;margin-top:.15rem}
.d-name a{color:inherit;text-decoration:none}
.d-name a:hover{color:var(--rubric)}
.badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.badge{
font-family:var(--sans-utility);font-size:.66rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--rubric);
border:1px solid rgba(142,43,26,.45);padding:.16rem .55rem;border-radius:999px;
}
.badge--gold{color:var(--gold);border-color:rgba(161,124,51,.55)}
.meta{
display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;margin-top:.85rem;
border-block:1px solid var(--line);padding-block:.55rem;
}
.meta>div{display:flex;gap:.45rem;align-items:baseline}
.meta dt{
font-family:var(--sans-utility);font-size:.66rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--rubric);
}
.meta dd{font-size:.98rem;color:var(--ink)}
.d-bio{margin-top:.9rem;max-width:52em}
.note{
margin-top:.9rem;max-width:48em;
border-left:3px solid var(--rubric);padding:.35rem 0 .35rem .9rem;
font-size:.98rem;font-style:italic;color:var(--faded);
}
.roll.flat .era-band{display:none}
.roll.flat .doctor{border-top:none}

/* ---------- statistics ---------- */
.stats{background:var(--parchment-deep);border-block:1px solid var(--line)}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2rem}
.stat-card{
background:var(--parchment);border:1px solid var(--line);border-radius:3px;
padding:1.1rem 1rem 1.2rem;text-align:center;
}
.stat-card .num{font-family:var(--serif-display);font-weight:600;font-size:2.5rem;line-height:1;color:var(--rubric)}
.stat-card .num small{font-size:.45em;color:var(--gold);font-weight:600;letter-spacing:.02em}
.stat-card .lbl{
margin-top:.5rem;font-family:var(--sans-utility);font-size:.7rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--faded);line-height:1.5;
}
.bar-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:2.6rem}
.bar-group h3{font-family:var(--serif-display);font-weight:600;font-size:1.3rem;border-bottom:2px solid var(--gold);padding-bottom:.4rem}
.bar-row{margin-top:.95rem}
.bar-row .bar-label{
display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--sans-utility);font-size:.78rem;letter-spacing:.05em;color:var(--ink);
}
.bar-row .bar-label b{font-family:var(--serif-display);font-size:1.05rem;color:var(--rubric)}
.bar-track{height:9px;background:rgba(36,26,16,.1);border-radius:99px;margin-top:.3rem;overflow:hidden}
.bar-fill{height:100%;background:var(--rubric);border-radius:99px;min-width:6px}
.bar-fill--gold{background:var(--gold)}
.bar-group .bar-note{font-size:.92rem;font-style:italic;color:var(--faded);margin-top:1rem;line-height:1.5}

/* ---------- further study & footer ---------- */
.study-list{margin-top:1.4rem;max-width:44em}
.study-list li{list-style:none;padding:.75rem 0;border-bottom:1px solid var(--line)}
.study-list a{font-family:var(--serif-display);font-weight:600;font-size:1.15rem;text-decoration:none}
.study-list a:hover{text-decoration:underline}
.study-list p{font-size:.95rem;color:var(--faded);margin-top:.15rem}
.colophon{text-align:center;font-style:italic;color:var(--faded);padding-bottom:2.5rem}
.site-foot{background:var(--ink-brand);color:#cdbfa2;margin-top:0}
.site-foot .wrap{padding-block:2.2rem;text-align:center}
.site-foot .brand-name{color:#e9ddc6}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem .4rem;margin-top:1rem;font-family:var(--sans-utility);font-size:.76rem}
.site-foot nav a{color:#cdbfa2;text-decoration:none;padding:.3rem .5rem}
.site-foot nav a:hover{color:#fff}
.site-foot .legal{margin-top:1.4rem;font-size:.85rem;color:#8f8067}
.back-link{display:inline-block;margin-top:1.5rem}

/* ---------- back to top ---------- */
.to-top{
position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;
width:2.9rem;height:2.9rem;border-radius:50%;border:none;cursor:pointer;
background:var(--rubric);color:var(--parchment);font-size:1.2rem;
box-shadow:0 4px 14px rgba(26,18,11,.35);
opacity:0;pointer-events:none;transition:opacity .25s;
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:#a53a24}

/* ---------- responsive ---------- */
@media (max-width:820px){
.criteria{grid-template-columns:1fr}
.bar-groups{grid-template-columns:1fr;gap:1.8rem}
.name-index-panel{columns:2}
}
@media (max-width:640px){
body{font-size:1.1rem}
.doctor{grid-template-columns:1fr;gap:.9rem}
.d-num{text-align:left;padding-top:0}
.d-num::before{content:"№ ";color:var(--gold);font-size:.75em}
.d-fig,.d-fig img,.d-fig.no-img .d-mono{width:208px;height:260px}
.meta{flex-direction:column;gap:.35rem}
.name-index-panel{columns:1;width:86vw}
.site-nav{display:none}
}

/* Keep the shared footer matching the rest of the project. The page's own
   .wrap, a and img rules are scoped to main and footer, so the header needs
   no reset of its own. */
footer .wrap{max-width:var(--wide);padding-inline:32px}
footer a{text-decoration:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.to-top{transition:none}
}

/* ── 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-2rem{margin-top:2rem;}
.u-w-89pc{width:89%;}
.u-w-11pc{width:11%;}
.u-w-50pc{width:50%;}
.u-w-32pc{width:32%;}
.u-w-5pc{width:5%;}
.u-w-3pc{width:3%;}
.u-w-74pc{width:74%;}
.u-w-18pc{width:18%;}
.u-w-8pc{width:8%;}
.u-mt-2p5rem{margin-top:2.5rem;}