/* Christ Early Church Archive — static page stylesheet. Mobile-first, one URL per document. */
:root{
  --pg:#ece0c8; --ink:#2a2318; --ink-d:#241c10; --ink-m:#584b34; --ink-l:#7a6a4f;
  --gold:#d9bd7a; --gold-d:#8a6d3f; --gold-m:#93805c; --line:#ddcfab; --line-d:#d6c8a4;
  --card:#f8f1df; --card-2:#fbf5e6; --link:#7a4a21; --link-h:#a3651f; --bar:rgba(36,28,16,.97);
  /* era accents, matching ERAS[*].color in the archive data */
  --ap:#a34e2e; --af:#96742a; --apol:#6c7d33; --an:#3f6a86; --ni:#7c4a6e;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;background:var(--pg);}
body{
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;color:var(--ink);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 520px at 50% -120px,#f7efdc,rgba(247,239,220,0)),linear-gradient(#efe4cd,#e8dbc0);
  background-attachment:fixed;min-height:100vh;
}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--link-h);}
::selection{background:#d9c38f;color:var(--ink-d);}
img{max-width:100%;height:auto;-webkit-user-drag:none;}
h1,h2,h3{font-family:'Cinzel',Georgia,serif;color:var(--ink-d);letter-spacing:.5px;margin:0;text-wrap:pretty;}
p{margin:0 0 1em;text-wrap:pretty;}
blockquote{margin:0;}

/* ---------- nav ----------
   The wordmark sits in the middle with the sections arranged around it. Below 1180px the
   wordmark takes its own line and the sections wrap across as many rows as the screen
   needs, so the bar can carry a growing number of sections without ever colliding with
   the title. Above 1180px the two groups sit either side of the wordmark. */
.nav{position:sticky;top:0;z-index:50;background:var(--bar);border-bottom:1px solid rgba(217,189,122,.55);box-shadow:0 6px 22px rgba(20,14,4,.30);}
.nav-in{max-width:1240px;margin:0 auto;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;}
.nav-t{display:inline-flex;align-items:center;gap:9px;font-family:'Cinzel',serif;font-size:11.5px;font-weight:700;letter-spacing:2.4px;color:#f4ead4;text-decoration:none;text-align:center;order:-1;}
.nav-t b{font-weight:700;}
.nav-t:hover{color:#fff;}
.nav-t span{color:var(--gold);font-size:11px;}
.nav-l{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;list-style:none;margin:0;padding:0;}
.nav-l a{display:block;font-family:'EB Garamond',serif;font-size:14px;letter-spacing:.6px;color:#cbb98d;text-decoration:none;padding:7px 10px;border-radius:7px;min-height:36px;line-height:22px;white-space:nowrap;}
.nav-l a:hover{color:#f4ead4;background:rgba(217,189,122,.13);}
.nav-l a[aria-current]{color:#f4ead4;background:rgba(217,189,122,.20);}
/* Under 1180px the two groups read as one continuous wrapping band under the wordmark. */
@media (max-width:1179px){
  .nav-a{padding-bottom:0;}
  .nav-b{margin-top:-3px;}
}
@media (max-width:420px){
  .nav-l a{font-size:13.5px;padding-left:8px;padding-right:8px;}
  .nav-t{font-size:10px;letter-spacing:1.6px;}
  .nav-t span{font-size:9.5px;}
}

/* ---------- shell ---------- */
.wrap{max-width:900px;margin:0 auto;padding:22px 16px 64px;}

/* ---------- places served, on a profile ----------
   The figure's own journey, in the order the sources move through it. Deliberately not a
   script-driven map: /person/** is served under script-src 'none', so this has to be real
   markup. Each stop links into /atlas/, where the geometry is drawn. */
.jrny{list-style:none;margin:16px 0 0;padding:0;counter-reset:none;}
.jrny li{display:flex;align-items:baseline;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);}
.jrny li:last-child{border-bottom:none;}
.jrny .jn{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.2px;color:var(--gold-d);
  min-width:1.9em;text-align:right;flex:none;}
.jrny a{text-decoration:none;color:var(--link);}
.jrny a:hover{color:var(--link-h);}
.jrny b{font-family:'Cinzel',serif;font-size:15.5px;font-weight:600;}
.jrny i{font-style:italic;font-size:13.5px;color:var(--gold-m);margin-left:auto;flex:none;
  padding-left:12px;text-align:right;}
/* the stop's own gloss and citation. Added 27 August 2026 with the journey rewrite: the
   list used to be bare place names because journeyOf() parsed the prose field and had
   nothing else to show. `with the company` marks a stop inferred from a source that moves
   this figure's company rather than naming the figure — "his disciples followed him". */
.jrny li{flex-wrap:wrap;}
.jrny .jd{flex:1 1 100%;order:3;font-size:14px;line-height:1.5;color:var(--ink-m);
  margin:3px 0 0 34px;text-wrap:pretty;}
.jrny .jd .inf{display:inline-block;font-family:'Cinzel',serif;font-style:normal;font-size:9px;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--gold-d);border:1px solid var(--line-d);
  border-radius:999px;padding:1px 7px;margin-left:8px;vertical-align:1px;white-space:nowrap;}
@media (pointer:coarse){ .jrny li{padding-top:13px;padding-bottom:13px;} }
.wrap-w{max-width:1180px;}
.crumb{font-size:13.5px;color:var(--gold-d);margin:0 0 18px;letter-spacing:.3px;}
.crumb a{color:var(--gold-d);}
.crumb i{font-style:normal;opacity:.55;padding:0 6px;}
.kick{font-size:11.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--gold-d);font-weight:600;}
h1{font-size:clamp(27px,7vw,44px);font-weight:700;line-height:1.15;margin:9px 0 0;}
.sub{font-style:italic;font-size:16px;color:#5c4f38;margin-top:7px;line-height:1.45;}
.alt{font-size:14.5px;color:var(--gold-m);margin-top:5px;font-style:italic;}
.rule{font-family:'Cinzel',serif;font-size:14px;letter-spacing:3px;color:var(--gold-d);text-align:center;margin:34px 0 18px;}
h2{font-size:clamp(19px,4.4vw,25px);font-weight:700;margin:34px 0 12px;}
h2:first-of-type{margin-top:26px;}
h3{font-size:16.5px;font-weight:600;}
.lede{font-style:italic;font-size:17.5px;line-height:1.6;color:var(--ink-m);}
.bio{font-size:17.5px;line-height:1.72;}
.bio a{color:var(--link);}
/* glossary auto-links inside biographies and definitions */
a.gl{color:var(--ink);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px;}
a.gl:hover{color:var(--link-h);text-decoration-color:var(--link-h);}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none;}
.chip{display:inline-block;font-size:13.5px;padding:6px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--link);text-decoration:none;min-height:34px;line-height:21px;}
.chip:hover{background:#fdf8ec;border-color:#b98f5f;}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:999px;color:#fff;}

/* cards */
.card{background:var(--card-2);border:1px solid #e2d5b2;border-radius:11px;padding:15px 17px;margin:0 0 12px;}
.card-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;}
/* .card-t is an <h3>, so it would otherwise inherit Cinzel from the heading
   rule above — and Cinzel has no italic, which browsers fake as a skewed
   oblique. Titles of works are EB Garamond italic throughout this design. */
.card-t{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:16.5px;color:var(--ink-d);font-style:italic;min-width:0;overflow-wrap:break-word;}
.card-d{font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:1px;color:var(--gold-m);margin-left:auto;}
.card q,.card blockquote{display:block;font-style:italic;color:#4a3d28;font-size:16px;line-height:1.6;margin:9px 0 0;padding-left:13px;border-left:2px solid var(--gold);quotes:none;}
.card cite{display:block;font-style:normal;font-size:13px;color:var(--gold-m);margin-top:7px;letter-spacing:.3px;}
.card cite a{color:var(--gold-d);}
.meta{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-m);margin-top:10px;}

/* callout */
.note{background:#B5C99A;border:1px solid #93ab74;border-radius:11px;padding:16px 18px;margin:20px 0;}
.note b{font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:#25301b;display:block;margin-bottom:6px;}
.note p{margin:0;color:#1d2616;font-size:15.5px;}

/* depictions */
.figs{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0 0;}
.figs figure{margin:0;border-radius:11px;overflow:hidden;border:1px solid var(--gold);background:linear-gradient(#e9dcbf,#dcc9a0);box-shadow:0 8px 22px rgba(60,44,16,.14);}
.figs img{display:block;width:100%;height:210px;object-fit:cover;}
.figs figcaption{font-size:12px;color:#6d5c3c;padding:7px 10px;background:#f3ead8;line-height:1.4;}

/* lists / directory */
.dir{list-style:none;margin:0;padding:0;}
.dir li{border-bottom:1px solid var(--line-d);}
.dir a{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:11px 2px;text-decoration:none;color:var(--ink-d);min-height:44px;}
.dir a:hover{background:rgba(251,245,230,.75);}
.dir .n{font-family:'Cinzel',serif;font-size:15.5px;font-weight:700;}
.dir .y{font-size:12.5px;color:var(--gold-m);margin-left:auto;letter-spacing:.5px;}
.dir .r{flex:1 0 100%;font-style:italic;font-size:14px;color:#5c4f38;}

/* era band */
.band{border-radius:10px;padding:16px 18px;margin:26px 0 14px;color:#fff2dc;}
.band .bn{font-family:'Cinzel',serif;font-size:19px;font-weight:700;letter-spacing:1.3px;}
.band .by{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2.4px;opacity:.85;margin-top:3px;}
.band p{font-style:italic;font-size:14.5px;opacity:.95;margin:8px 0 0;line-height:1.45;}

/* prev / next */
.pn{display:grid;grid-template-columns:1fr;gap:10px;margin:34px 0 0;border-top:1px solid var(--line-d);padding-top:18px;}
.pn a{display:block;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;text-decoration:none;}
.pn a:hover{border-color:#b98f5f;}
.pn span.l{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-m);text-decoration:none;}
.pn b{display:block;font-family:'Cinzel',serif;font-size:15.5px;color:var(--ink-d);margin-top:3px;}

/* interlinear */
.il{background:#f3ead8;border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:0 0 12px;}
.il .ref{font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-d);margin-bottom:9px;}
.il-w{display:flex;flex-wrap:wrap;gap:5px 11px;}
.il-w span{display:block;text-align:center;}
.il-w i{display:block;font-style:normal;font-size:17px;color:var(--ink-d);line-height:1.3;}
.il-w em{display:block;font-style:normal;font-size:11.5px;color:var(--gold-m);line-height:1.3;}

/* footer */
.foot{border-top:1px solid var(--line-d);margin-top:44px;padding:24px 16px 70px;text-align:center;color:var(--ink-l);font-size:14px;}
.foot-l{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 16px;padding:0;list-style:none;}
.foot-l a{font-size:13.5px;padding:7px 12px;border-radius:999px;background:#f4ebd6;border:1px solid var(--line);text-decoration:none;min-height:34px;line-height:20px;display:block;}
.foot p{max-width:660px;margin:0 auto 10px;font-size:13.5px;line-height:1.6;}
.app{display:inline-block;margin:20px 0 0;padding:12px 22px;background:#2a2318;color:#f4ead4;border-radius:999px;text-decoration:none;font-family:'Cinzel',serif;font-size:13px;letter-spacing:1.6px;}
.app:hover{background:#3d3320;color:#fff;}

/* ---------- About: the one prose page on the site, so it is centred, mirroring
   the app's About view — centred header and prose, cards left-aligned inside
   because centred body copy stops being readable past two or three lines ---------- */
.about{max-width:740px;}
.about .kick,.about h1{text-align:center;}
.about .lede{text-align:center;font-style:normal;font-size:16.5px;line-height:1.68;max-width:620px;margin:0 auto;color:#4a3d28;}
.about h2{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:clamp(12.5px,2.8vw,14px);letter-spacing:2.4px;text-transform:uppercase;
  font-weight:700;color:#4a3d28;margin:48px 0 18px;
}
.about h2::before,.about h2::after{content:"";height:1px;flex:1 1 auto;max-width:110px;background:var(--line-d);}
.about > p{text-align:center;max-width:600px;margin-left:auto;margin-right:auto;}
/* the welcome runs to three paragraphs set as one continuous voice: roman, at
   body size. The base .lede rule is italic at 21px, which read as a pull-quote
   bolted onto the top of the page rather than the first thing the author says. */
.about .lede{margin-bottom:0;}
.about .intro{text-align:center;font-size:16.5px;line-height:1.68;max-width:620px;margin:15px auto 0;color:#4a3d28;}
.about .chips{justify-content:center;}
.about .note{text-align:center;}
.about .cards{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch;}
.about .cards .card{margin:0;}
.about .cards .card-t{font-style:normal;font-weight:600;font-size:16px;letter-spacing:.3px;}
.about .cards .card p{text-align:left;}
@media (min-width:640px){ .about .cards{grid-template-columns:1fr 1fr;} }

/* ---------- ≥600px ---------- */
@media (min-width:600px){
  .wrap{padding:30px 26px 80px;}
  .figs{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
  .figs img{height:220px;}
  .pn{grid-template-columns:1fr 1fr;}
  .dir .r{flex:1 1 auto;order:3;}
}
@media (min-width:1180px){
  /* wide enough for the sections to flank the wordmark */
  .nav-in{flex-direction:row;align-items:center;justify-content:center;gap:6px 14px;padding:9px 22px;}
  .nav-t{font-size:13px;letter-spacing:2.8px;order:0;flex:none;}
  .nav-a{flex:1 1 0;justify-content:flex-end;}
  .nav-b{flex:1 1 0;justify-content:flex-start;margin-top:0;}
}
@media (min-width:1360px){
  .nav-t{font-size:13.5px;letter-spacing:3px;}
}
@media (min-width:1100px){
  .wrap{padding:38px 28px 90px;}
}
@media (prefers-reduced-motion:no-preference){
  .wrap{animation:ecfade .3s ease;}
  @keyframes ecfade{from{opacity:0}to{opacity:1}}
}
/* Touch devices only: Apple asks for 44px minimum hit targets, Material for 48.
   The chips and footer links sit at 34px, which is fine for a mouse and too
   small for a thumb — so raise them where the pointer is coarse and leave the
   desktop density alone. */
@media (pointer:coarse){
  .chip,.foot-l a{min-height:44px;padding-top:11px;padding-bottom:11px;}
  .nav-l a{min-height:44px;padding-top:11px;padding-bottom:11px;}
  .dir a{min-height:48px;}
}
@media print{
  .nav,.foot-l,.app,.pn{display:none;}
  body{background:#fff;}
}

/* succession lists */
.succ{list-style:none;margin:14px 0 6px;padding:0;counter-reset:none;}
.succ li{display:grid;grid-template-columns:2.1rem 1fr auto;gap:2px 10px;align-items:baseline;
  padding:9px 11px;border-bottom:1px solid #e8dcc0;}
.succ li:first-child{border-top:1px solid #e8dcc0;}
.succ li:nth-child(odd){background:rgba(255,252,244,.55);}
.succ .n{grid-row:span 2;font:700 13px/1.5 'Cinzel',Georgia,serif;color:#9a8358;
  text-align:right;font-variant-numeric:tabular-nums;}
.succ b{font-weight:600;}
.succ .y{font-size:14.5px;color:#7a6a4c;white-space:nowrap;font-variant-numeric:tabular-nums;}
.succ .r{grid-column:2/4;font-size:14.5px;color:#6f6248;}
.succ .flag{grid-column:2/4;justify-self:start;margin-top:3px;font:700 11px/1 'Cinzel',Georgia,serif;
  letter-spacing:.06em;text-transform:uppercase;color:#8a5a2b;background:#f6ecd8;
  border:1px solid #e3cfa6;border-radius:3px;padding:3px 6px;}
.succ li.rival b{color:#6f6248;}
.succ li.rival{background:rgba(246,236,216,.5);}
.note-s{font-size:15px;color:#6f6248;margin:10px 0 22px;}
@media(max-width:520px){.succ li{grid-template-columns:1.8rem 1fr;}.succ .y{grid-column:2;}}

/* ---------- the printed index ----------
   Added 20 August 2026 with the restructure. The archive reads as a printed reference
   work: a ruled masthead, a ledger of what the corpus holds, and the gateways set as
   columns with visible column rules. No photographs above the fold on any of these
   pages — the ornament is the type and the rules. */
.idx{max-width:1180px;}
.mast{border-top:3px double var(--ink-d);border-bottom:1px solid var(--ink-d);padding:26px 4px 22px;text-align:center;}
.mast h1{font-size:clamp(29px,6.2vw,50px);margin:12px 0 0;}
.mast .mast-s{font-style:italic;font-size:17.5px;line-height:1.55;color:var(--ink-m);max-width:44em;margin:13px auto 0;}
.mast .mast-r{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-d);margin:15px 0 0;}

/* the ledger of counts */
.led{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--ink-d);}
.led a{display:block;padding:17px 18px;text-decoration:none;border-bottom:1px solid var(--line-d);}
.led a:last-child{border-bottom:none;}
.led a:hover{background:rgba(251,245,230,.8);}
.led b{display:block;font-family:'Cinzel',serif;font-size:clamp(27px,4.4vw,38px);font-weight:700;
  color:var(--ink-d);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.5px;}
.led span{display:block;font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--gold-d);margin-top:9px;}
.led i{display:block;font-size:14px;font-style:italic;color:var(--ink-l);margin-top:6px;line-height:1.45;}
@media(min-width:660px){
  .led{grid-template-columns:repeat(3,1fr);}
  .led a{border-bottom:none;border-left:1px solid var(--line-d);}
  .led a:first-child{border-left:none;}
}

/* the gateways, as ruled columns */
.gates{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--ink-d);}
.gate{padding:19px 2px 22px;border-top:1px solid var(--line-d);}
.gate:first-child{border-top:none;}
.gate .gno{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold-d);}
.gate h2{font-size:21px;margin:7px 0 0;}
.gate h2 a{color:var(--ink-d);text-decoration:none;}
.gate h2 a:hover{color:var(--link-h);}
.gate .gs{font-size:15px;color:var(--ink-m);margin:8px 0 12px;line-height:1.5;font-style:italic;}
.gate ul{list-style:none;margin:0;padding:0;}
.gate li{border-top:1px solid var(--line);}
.gate li a{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:10px 2px;
  text-decoration:none;font-size:15.5px;min-height:42px;color:var(--link);}
.gate li a:hover{background:rgba(251,245,230,.8);color:var(--link-h);}
.gate li em{font-style:normal;margin-left:auto;font-family:'Cinzel',serif;font-size:10.5px;
  letter-spacing:1.2px;color:var(--gold-m);flex:none;}
@media(min-width:720px){
  .gates{grid-template-columns:1fr 1fr;}
  .gate{padding-left:22px;padding-right:22px;border-left:1px solid var(--line-d);}
  .gate:nth-child(odd){border-left:none;}
  .gate:nth-child(-n+2){border-top:none;}
}
@media(min-width:1080px){
  .gates{grid-template-columns:repeat(4,1fr);}
  .gate{border-top:none;border-left:1px solid var(--line-d);padding-left:19px;padding-right:19px;}
  .gate:nth-child(odd){border-left:1px solid var(--line-d);}
  .gate:first-child{border-left:none;padding-left:2px;}
  .gate:last-child{padding-right:2px;}
}

/* the quiet fifth line, and the ruled link rows under a running head */
.quiet{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding:15px 2px 0;
  border-bottom:1px solid var(--line-d);font-size:15.5px;}
.quiet b{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--gold-d);font-weight:700;}
.quiet a{padding:8px 0;display:inline-block;}

/* running head: what the section is, and how much of it there is */
.rh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;border-bottom:2px solid var(--ink-d);
  padding-bottom:7px;margin:40px 0 0;}
.rh h2,.rh h3{margin:0;font-size:clamp(17px,3.4vw,21px);}
.rh span{margin-left:auto;font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-d);}
.rh + p{margin-top:12px;}

/* the year gutter: the people timeline, and any dated ledger */
.yg{list-style:none;margin:14px 0 0;padding:0;}
.yg li{display:grid;grid-template-columns:3.4rem 1fr;gap:1px 12px;padding:7px 2px;
  border-bottom:1px solid var(--line);}
.yg li.d0{border-top:1px solid var(--line-d);}
.yg .yy{font-family:'Cinzel',serif;font-size:12.5px;color:var(--gold-d);text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:.4px;}
.yg .nn{min-width:0;}
.yg .nn a{font-family:'Cinzel',serif;font-size:15px;font-weight:600;color:var(--ink-d);text-decoration:none;}
.yg .nn a:hover{color:var(--link-h);}
/* the record's own date phrase, under the name: "fl. c. AD 180" carries more than a sort year */
.yg .nn .dt{display:block;font-size:13px;font-style:italic;color:var(--ink-l);margin-top:2px;}
.yg .rr{grid-column:2;font-size:13.5px;color:var(--ink-l);line-height:1.45;text-wrap:pretty;}
.yg .xt{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.1px;text-transform:uppercase;
  color:#9c4a2e;border:1px solid #d8b3a4;border-radius:999px;padding:1px 6px;margin-left:7px;white-space:nowrap;}
@media(min-width:820px){
  .yg li{grid-template-columns:4rem 1fr 40%;}
  .yg .rr{grid-column:3;text-align:right;font-size:13.5px;}
}
@media (pointer:coarse){ .yg li{padding-top:11px;padding-bottom:11px;} }

/* the source library, as a ruled table */
.srct{width:100%;border-collapse:collapse;font-size:15.5px;margin:14px 0 0;}
.srct th{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-d);text-align:left;padding:9px 10px 9px 2px;border-bottom:1px solid var(--ink-d);font-weight:700;}
.srct td{padding:10px 10px 10px 2px;border-bottom:1px solid var(--line);vertical-align:top;}
.srct tr:hover td{background:rgba(251,245,230,.8);}
.srct .dd{font-family:'Cinzel',serif;font-size:12.5px;color:var(--gold-d);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.srct .tt a{font-style:italic;font-weight:600;color:var(--ink-d);text-decoration:none;}
.srct .tt a:hover{color:var(--link-h);}
.srct .tt i{display:block;font-size:13.5px;color:var(--ink-l);font-style:normal;margin-top:3px;line-height:1.45;}
.srct .aa{font-size:14px;color:var(--ink-l);}
.srct .kk{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-m);white-space:nowrap;}
@media(max-width:760px){.srct .aa,.srct th.aa{display:none;}}
@media(max-width:520px){.srct .kk,.srct th.kk{display:none;}}

/* the network, rendered as markup */
.riv{list-style:none;margin:14px 0 0;padding:0;}
.riv li{padding:9px 2px;border-bottom:1px solid var(--line);font-size:15.5px;}
.riv b{font-family:'Cinzel',serif;font-weight:600;font-size:15px;}
.riv b a{color:var(--ink-d);text-decoration:none;}
.riv b a:hover{color:var(--link-h);}
.riv i{display:block;font-size:13.5px;color:var(--ink-l);margin-top:3px;}
@media(min-width:820px){.riv{columns:2;column-gap:34px;}.riv li{break-inside:avoid;}}
.net{list-style:none;margin:14px 0 0;padding:0;}
.net li{padding:10px 2px;border-bottom:1px solid var(--line);}
.net .who{font-family:'Cinzel',serif;font-size:15px;font-weight:600;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:3px 10px;}
.net .who a{color:var(--ink-d);text-decoration:none;}
.net .who a:hover{color:var(--link-h);}
.net .who em{font-style:normal;margin-left:auto;font-family:'Cinzel',serif;font-size:10.5px;
  letter-spacing:1.2px;color:var(--gold-m);}
.net .with{font-size:14.5px;color:var(--ink-m);margin-top:4px;line-height:1.55;text-wrap:pretty;}
.net .with a{color:var(--link);text-decoration:none;}
.net .with a:hover{color:var(--link-h);text-decoration:underline;}
.net .with s{text-decoration:none;color:#9c4a2e;}

/* ---------- the network picture, at the head of /people/ ----------
   Restored 20 August 2026 from the retired app. The canvas is sized by its box, not the
   other way round: it is the one element on the site that needs its container measured, so
   the box owns the height and ec-network.js reads it. */
.netwrap{margin:8px 0 34px;}
.netlede{font-size:15.5px;line-height:1.6;color:var(--ink-m);margin:12px 0 0;max-width:52em;
  text-wrap:pretty;}
.netbox{position:relative;margin:16px 0 0;height:clamp(420px,68vh,720px);
  border:1px solid var(--line-d);border-radius:14px;overflow:hidden;background:#f3ead8;
  box-shadow:0 14px 34px rgba(70,50,20,.13);touch-action:none;}
.netbox canvas.netcv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;
  touch-action:none;}
.netbox canvas.netcv:focus-visible{outline:2px solid #b98f5f;outline-offset:-2px;}
/* the read-out follows the pointer; it is HTML so a long role wraps instead of running off */
.nettip{position:absolute;z-index:3;max-width:min(300px,72%);pointer-events:none;
  background:rgba(36,28,16,.95);border:1px solid rgba(217,189,122,.5);border-radius:9px;
  padding:9px 13px;color:#e9dcc0;font-size:13.5px;line-height:1.45;
  box-shadow:0 10px 26px rgba(16,10,2,.4);}
.nettip[hidden]{display:none;}
.nettip b{display:block;font-family:'Cinzel',serif;font-size:13.5px;font-weight:700;color:#f4ead4;}
.nettip i{display:block;color:#d9c8a0;margin-top:2px;}
.nettip u{display:block;text-decoration:none;color:#e89a9a;margin-top:3px;}
.nettip em{display:block;font-size:12px;color:#9c8c68;margin-top:4px;}
.nethint{position:absolute;left:12px;bottom:10px;z-index:2;pointer-events:none;
  font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-d);background:rgba(246,238,218,.82);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;}
.netnone{padding:22px 24px;font-size:15.5px;line-height:1.6;color:var(--ink-m);max-width:44em;}
.netkey{display:flex;flex-wrap:wrap;gap:8px 18px;margin:13px 0 0;font-size:14px;color:var(--ink-l);}
.netkey span{display:inline-flex;align-items:center;gap:7px;}
.netkey i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none;}
.netkey i.ring{background:none;border:2px solid;}
.netkey i.line{width:20px;height:0;border-radius:0;border-top:2px solid #b89b62;}
.netkey i.line.riv{border-top-color:#d93838;}
@media(max-width:719px){
  .netbox{height:clamp(340px,56vh,480px);}
  /* on a phone the hint costs a line of a small map and says what a tap already teaches */
  .nethint{display:none;}
  .nettip{max-width:82%;}
}

/* ---------- light chrome ----------
   The same bar in parchment rather than ink. One word in build/gen.js (CHROME) and the
   twin in assets/ec-nav.js switch between them; both are kept so the choice can be
   seen on the real site rather than argued about. */
.nav.lt{background:#fbf5e6;border-bottom:1px solid var(--line-d);box-shadow:0 5px 16px rgba(70,50,20,.10);}
.nav.lt .nav-t{color:var(--ink-d);}
.nav.lt .nav-t:hover{color:#000;}
.nav.lt .nav-t span{color:var(--gold-d);}
.nav.lt .nav-l a{color:#6b5a3c;}
.nav.lt .nav-l a:hover{color:var(--ink-d);background:rgba(217,189,122,.24);}
.nav.lt .nav-l a[aria-current]{color:var(--ink-d);background:rgba(217,189,122,.34);}

/* ---------- the spine ----------
   The timeline, in the shape the app drew it: era bands, a central rule, dated dots, and
   the figures alternating either side of it. Cards open a preview panel and the preview
   opens the profile. No script anywhere in it — the panel is a :target, which is why the
   page can stay under script-src 'none' like the rest of the archive. */
.tl-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:15px 0 0;font-size:14px;color:var(--ink-l);}
.tl-legend span{display:inline-flex;align-items:center;gap:7px;}
.tl-legend i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none;}
.tl-legend i.ev{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);}
.tl-eras{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0;padding:0;list-style:none;}
.tl-eras a{display:inline-flex;align-items:baseline;gap:9px;padding:8px 15px;min-height:42px;
  border:1px solid var(--line-d);border-radius:999px;background:var(--card-2);text-decoration:none;
  font-family:'Cinzel',serif;font-size:13px;color:var(--ink-d);}
.tl-eras a:hover{border-color:#b98f5f;background:#fdf8ec;}
.tl-eras a[aria-current]{border-color:#b98f5f;background:#f6edd8;}
.tl-eras b{width:10px;height:10px;border-radius:50%;display:inline-block;align-self:center;flex:none;}
.tl-eras em{font-style:normal;font-family:'EB Garamond',Georgia,serif;font-size:12.5px;color:var(--gold-m);}
.tl-stat{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 9px;margin:15px 0 0;
  font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-d);}
.tl-stat b{color:var(--ink-d);font-size:12px;letter-spacing:1px;}
/* the events link sits in the legend, where a reader looking at the blue diamonds is */
.tl-legend .tl-ev{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--link);text-decoration:none;}
.tl-legend .tl-ev:hover{color:var(--link-h);}
/* the spine is one page again, so an era band is a scroll target: keep it clear of the bar */
.band[id]{scroll-margin-top:80px;}
.tl-foot{margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--line);text-align:center;}
.tl-foot p{font-size:14.5px;line-height:1.65;color:var(--ink-m);max-width:46em;margin:0 auto;
  text-wrap:pretty;}

.spine{list-style:none;margin:22px 0 0;padding:0;position:relative;}
.spine::before{content:"";position:absolute;top:6px;bottom:6px;left:22px;width:1px;background:var(--line-d);}
.sp{display:grid;grid-template-columns:46px 1fr;align-items:start;}
.sp .mid{grid-column:1;text-align:right;padding:14px 9px 0 0;}
.sp .dy{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.1px;color:var(--gold-d);white-space:nowrap;}
.sp .dot{width:13px;height:13px;border-radius:50%;background:var(--gold-d);border:2px solid #f3ead8;
  display:block;margin:5px 0 0 auto;position:relative;left:9px;}
.sp.ev .dot{width:11px;height:11px;border-radius:2px;transform:rotate(45deg);background:#3f6a86;}
/* The whole card is one anchor, so the browser's underline has to come off it and off
   everything it contains — the name carries the affordance instead. */
.tcard{grid-column:2;display:block;text-decoration:none;color:inherit;background:var(--card-2);
  border:1px solid #e2d5b2;border-radius:12px;padding:13px 15px;margin:0 0 16px;
  box-shadow:0 4px 14px rgba(70,50,20,.07);}
.tcard,.tcard *{text-decoration:none;}
.tcard:hover{border-color:#b98f5f;}
.tcard:hover .tn b{color:var(--link-h);}
.tcard-h,.tcard .tt,.tcard .tn,.tcard .tr,.tcard .tmeta,.tcard .av{display:flex;}
.tcard .tt{display:block;}
.tcard .tr{display:block;}
.tcard.x{background:#fbeee7;border-color:#e7cfc2;}
/* Era colour is carried by one class on the spine, not by an inline style on every dot and
   chip: at 431 figures on the Nicene page that repetition was 40 KB of markup on a page
   with a 500 KB ceiling. */
.spine.e-ap .dot,.spine.e-ap .tera{background:var(--ap);}
.spine.e-af .dot,.spine.e-af .tera{background:var(--af);}
.spine.e-apol .dot,.spine.e-apol .tera{background:var(--apol);}
.spine.e-an .dot,.spine.e-an .tera{background:var(--an);}
.spine.e-ni .dot,.spine.e-ni .tera{background:var(--ni);}
.spine .sp.x .dot,.spine .tcard.x .tera{background:#9c4a2e;}
.spine .sp.ev .dot{background:#3f6a86;}
.tcard.evc{background:#eef2f5;border-color:#cddae3;}
.tcard-h{display:flex;gap:13px;align-items:flex-start;}
.av{width:60px;height:60px;border-radius:50%;flex:none;overflow:hidden;background:#e9dcbf;
  border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:23px;color:var(--gold-d);}
.av img{width:100%;height:100%;object-fit:cover;display:block;}
.tcard .tt{min-width:0;flex:1 1 auto;}
.tcard .tn{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;}
.tcard .tn b{font-family:'Cinzel',serif;font-size:16.5px;font-weight:700;color:var(--ink-d);
  line-height:1.22;text-wrap:pretty;min-width:0;}
.tcard .td{font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:.5px;color:var(--gold-d);
  margin-left:auto;text-align:right;}
.tcard .tr{font-style:italic;font-size:14px;color:#584b34;margin:5px 0 0;line-height:1.4;text-wrap:pretty;}
.tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:7px 0 0;}
.tera{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:#fff;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.tpl{font-size:13px;color:var(--gold-m);}
.tfoot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:10px 0 0;padding-top:9px;
  border-top:1px solid #eadfc4;font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--gold-m);}
.tfoot a{margin-left:auto;font-family:'EB Garamond',Georgia,serif;font-size:14.5px;letter-spacing:0;
  text-transform:none;text-decoration:none;color:var(--link);}
.tfoot a:hover{color:var(--link-h);}
@media(min-width:900px){
  .spine::before{left:50%;}
  .sp{grid-template-columns:1fr 96px 1fr;}
  .sp .mid{grid-column:2;text-align:center;padding:16px 0 0;}
  .sp .dot{margin:6px auto 0;left:0;}
  .tcard{grid-column:1;}
  .sp.r .tcard{grid-column:3;}
}
@media (pointer:coarse){ .tfoot a{padding:6px 0;} }

/* the preview panel: a :target, so it needs no script */
.tprev{display:none;}
.tprev:target{display:block;position:fixed;inset:0;z-index:90;}
.tprev-back{position:absolute;inset:0;display:block;background:rgba(28,20,8,.62);}
.tprev-p{position:relative;margin:4vh auto;width:min(960px,94vw);max-height:92vh;overflow:auto;
  -webkit-overflow-scrolling:touch;background:var(--card-2);border:1px solid #cdbc98;border-radius:14px;
  box-shadow:0 24px 62px rgba(28,18,4,.46);display:grid;grid-template-columns:1fr;}
.tprev-im{background:#241c10;position:relative;min-height:190px;max-height:42vh;overflow:hidden;}
.tprev-im img{width:100%;height:100%;object-fit:cover;display:block;}
.tprev-im .lb{position:absolute;top:10px;left:13px;font-family:'Cinzel',serif;font-size:9.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:#e8d9b6;}
.tprev-b{padding:19px 21px 23px;}
.tprev-b h2{font-size:clamp(21px,4vw,29px);margin:9px 0 0;}
.tprev-b .pd{font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold-d);margin:7px 0 0;}
.tprev-b .pr{font-style:italic;font-size:16px;color:#584b34;margin:9px 0 0;line-height:1.45;}
.tprev-b .pl{font-size:14.5px;color:var(--ink-m);margin:11px 0 0;line-height:1.55;}
.tprev-b .pl b{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gold-d);display:block;margin-bottom:3px;font-weight:700;}
.tprev-x{position:absolute;top:9px;right:11px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:var(--card-2);border:1px solid #cdbc98;color:var(--gold-d);text-decoration:none;
  font-size:20px;line-height:36px;text-align:center;}
.tprev-x:hover{color:var(--ink-d);background:#f6edd8;}
.pchips{display:flex;flex-wrap:wrap;gap:7px;}
.dive{display:inline-block;margin:15px 0 0;padding:13px 23px;background:#2a2318;color:#f4ead4;
  border-radius:999px;text-decoration:none;font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:1.5px;}
.dive:hover{background:#3d3320;color:#fff;}
@media(min-width:820px){ .tprev-p{grid-template-columns:42% 1fr;} .tprev-im{max-height:none;} }
@media print{ .tprev{display:none !important;} }

/* ---------- the timeline call ----------
   Added 27 August 2026. /timeline/ is the archive's largest view and was reachable only as
   one line of running text; it gets a door. Same double-rule and Cinzel vocabulary as the
   mastheads, centred, and it is an ordinary internal link — no redirect. */
.tlcall{margin:36px 0 8px;padding:30px 16px 28px;text-align:center;
  border-top:3px double var(--ink-d);border-bottom:1px solid var(--ink-d);}
.tlcall-b{display:inline-block;font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(17px,3.6vw,26px);letter-spacing:clamp(2px,.9vw,5px);text-transform:uppercase;
  color:#f4ead4;background:var(--ink-d);text-decoration:none;
  padding:17px clamp(24px,5vw,54px);border:1px solid var(--ink-d);
  box-shadow:0 0 0 1px var(--bg) inset,0 0 0 4px rgba(217,189,122,.28) inset;
  min-height:44px;transition:background .18s ease,color .18s ease;}
.tlcall-b:hover,.tlcall-b:focus-visible{background:#3d3320;color:#fff;}
.tlcall-g{max-width:44em;margin:18px auto 0;font-size:16px;line-height:1.6;font-style:italic;
  color:var(--ink-m);text-wrap:pretty;}
.tlcall-m{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--gold-d);margin:14px 0 0;}
@media print{ .tlcall{break-inside:avoid;} .tlcall-b{color:var(--ink-d);background:none;box-shadow:none;} }