/* John Pratt Archive v2 — celestial theme, fully offline */
:root{
  --sky:#0b1026; --sky2:#141b3c; --ink:#241f18; --paper:#faf6ee; --paper2:#f3ecdd;
  --gold:#c9a227; --gold-dk:#96761a; --accent:#31456e; --line:#ddd3bd; --muted:#6d6353;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Georgia,'Iowan Old Style','Times New Roman',serif;background:var(--paper);color:var(--ink);line-height:1.65}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
a{color:var(--accent)}
a:hover{color:var(--gold-dk)}
/* header */
.site-head{background:linear-gradient(160deg,var(--sky),var(--sky2));background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22><circle cx=%2220%22 cy=%2230%22 r=%221.1%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%22120%22 cy=%2270%22 r=%22.8%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%2270%22 cy=%22140%22 r=%221.3%22 fill=%22white%22 opacity=%22.9%22/><circle cx=%22180%22 cy=%2240%22 r=%22.7%22 fill=%22white%22 opacity=%22.6%22/><circle cx=%22200%22 cy=%22180%22 r=%221%22 fill=%22white%22 opacity=%22.7%22/><circle cx=%2240%22 cy=%22200%22 r=%22.9%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%22150%22 cy=%22150%22 r=%22.6%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%2290%22 cy=%2210%22 r=%22.8%22 fill=%22white%22 opacity=%22.6%22/></svg>'),linear-gradient(160deg,var(--sky),var(--sky2));color:#eee;padding:10px 0;border-bottom:3px solid var(--gold)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.brand{font-size:1.25rem;color:#fff;text-decoration:none;letter-spacing:.02em}
.brand-star{color:var(--gold)}
.brand-sub{color:var(--gold);font-variant:small-caps;letter-spacing:.12em}
.site-head nav{display:flex;gap:14px;flex-wrap:wrap}
.site-head nav a{color:#cfd6ea;text-decoration:none;font-size:.95rem;padding:2px 0;border-bottom:2px solid transparent}
.site-head nav a.on,.site-head nav a:hover{color:#fff;border-bottom-color:var(--gold)}
.head-search{margin-left:auto;display:flex}
.head-search input{border:1px solid #3a4472;background:#0e1430;color:#eee;border-radius:6px 0 0 6px;padding:6px 10px;font-size:.9rem;width:190px}
.head-search button{border:1px solid var(--gold-dk);background:var(--gold);border-radius:0 6px 6px 0;padding:6px 10px;cursor:pointer}
/* hero */
.hero{background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 70%,#1d2650 100%);background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22><circle cx=%2220%22 cy=%2230%22 r=%221.1%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%22120%22 cy=%2270%22 r=%22.8%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%2270%22 cy=%22140%22 r=%221.3%22 fill=%22white%22 opacity=%22.9%22/><circle cx=%22180%22 cy=%2240%22 r=%22.7%22 fill=%22white%22 opacity=%22.6%22/><circle cx=%22200%22 cy=%22180%22 r=%221%22 fill=%22white%22 opacity=%22.7%22/><circle cx=%2240%22 cy=%22200%22 r=%22.9%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%22150%22 cy=%22150%22 r=%22.6%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%2290%22 cy=%2210%22 r=%22.8%22 fill=%22white%22 opacity=%22.6%22/></svg>'),linear-gradient(180deg,var(--sky) 0%,var(--sky2) 70%,#1d2650 100%);color:#e8e4d8;padding:44px 0 36px}
.hero h1{font-size:2rem;margin:0 0 6px;color:#fff;font-weight:normal}
.hero .tagline{color:#b8c0dc;max-width:60ch;margin:0 0 4px}
.hero-cols{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap}
.hero-cols>.txt{flex:1 1 380px}
.portrait{border-radius:8px;border:2px solid var(--gold);width:130px}
.today-card{flex:0 1 330px;background:rgba(250,246,238,.06);border:1px solid rgba(201,162,39,.55);border-radius:12px;padding:16px 20px;backdrop-filter:blur(2px)}
.today-card h2{margin:0 0 8px;font-size:1.02rem;color:var(--gold);font-variant:small-caps;letter-spacing:.1em;font-weight:normal}
.today-card .srday{font-size:1.5rem;color:#fff}
.today-card img{vertical-align:middle;border-radius:6px;margin-right:6px}
.today-card p{margin:8px 0 0;font-size:.9rem;color:#c4cade}
.today-card a{color:var(--gold)}
.big-search{margin:26px 0 4px;display:flex;max-width:560px}
.big-search input{flex:1;border:1px solid #3a4472;background:#0e1430;color:#eee;border-radius:8px 0 0 8px;padding:12px 16px;font-size:1.05rem}
.big-search button{border:1px solid var(--gold-dk);background:var(--gold);color:#241f18;border-radius:0 8px 8px 0;padding:12px 20px;font-size:1rem;cursor:pointer}
/* main */
main{padding:30px 0 50px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:18px}
.card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--ink);display:block}
.card:hover{box-shadow:0 3px 14px rgba(20,27,60,.12);color:var(--ink)}
.card h3{margin:0 0 6px;font-size:1.05rem;color:var(--accent)}
.card .n{color:var(--gold-dk);font-size:.85rem}
.card p{margin:4px 0 0;font-size:.88rem;color:var(--muted)}
.about{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin-top:34px;display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.about img{width:110px;border-radius:8px;border:2px solid var(--gold)}
.about div{flex:1 1 300px}
.about h2{margin:0 0 8px;font-variant:small-caps;letter-spacing:.06em;font-weight:normal;color:var(--accent)}
.about p{margin:0 0 10px;font-size:.95rem}
h1.pg{font-weight:normal;color:var(--accent);margin:0 0 4px}
.pg-sub{color:var(--muted);margin:0 0 22px}
/* article */
.art-head{background:linear-gradient(160deg,var(--sky),var(--sky2));background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22><circle cx=%2220%22 cy=%2230%22 r=%221.1%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%22120%22 cy=%2270%22 r=%22.8%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%2270%22 cy=%22140%22 r=%221.3%22 fill=%22white%22 opacity=%22.9%22/><circle cx=%22180%22 cy=%2240%22 r=%22.7%22 fill=%22white%22 opacity=%22.6%22/><circle cx=%22200%22 cy=%22180%22 r=%221%22 fill=%22white%22 opacity=%22.7%22/><circle cx=%2240%22 cy=%22200%22 r=%22.9%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%22150%22 cy=%22150%22 r=%22.6%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%2290%22 cy=%2210%22 r=%22.8%22 fill=%22white%22 opacity=%22.6%22/></svg>'),linear-gradient(160deg,var(--sky),var(--sky2));color:#e8e4d8;padding:34px 0 26px;border-bottom:3px solid var(--gold)}
.art-head h1{font-size:1.7rem;margin:0 0 10px;color:#fff;font-weight:normal;line-height:1.3}
.art-meta{font-size:.92rem;color:#b8c0dc}
.art-meta a{color:var(--gold)}
.crumb{font-size:.85rem;margin-bottom:14px}
.crumb a{color:#9aa5c8;text-decoration:none}
.crumb a:hover{color:var(--gold)}
.article{max-width:760px;margin:0 auto;padding:28px 18px 10px;font-size:1.06rem}
.article img{max-width:100%;height:auto;border-radius:6px}
.article table{border-collapse:collapse;max-width:100%;overflow-x:auto;display:block}
.article td,.article th{border:1px solid var(--line);padding:5px 9px;font-size:.95rem}
.article h2,.article h3{color:var(--accent);font-weight:normal}
.article blockquote{border-left:3px solid var(--gold);margin-left:0;padding-left:16px;color:#4a4438}
.fnref{text-decoration:none;font-weight:bold}
.fnref sup{color:var(--gold-dk)}
/* footnotes: first-class content */
.notes-h{border-top:2px solid var(--gold);padding-top:18px;margin-top:34px;font-variant:small-caps;letter-spacing:.08em}
ol.footnotes{background:var(--paper2);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:16px 16px 16px 40px;font-size:.97rem}
ol.footnotes li{margin-bottom:12px}
ol.footnotes li:target{background:#fdf3d1;border-radius:4px;padding:4px 6px}
.fnback{text-decoration:none;color:var(--gold-dk);font-weight:bold}
.footnotes-p{background:var(--paper2);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:6px 18px;font-size:.97rem}
.footnotes-p .fnitem:target{background:#fdf3d1;border-radius:4px;padding:4px 6px}
a.ext::after{content:"\2197";font-size:.75em;color:var(--gold-dk);margin-left:2px}
/* prev/next */
.pn{display:flex;justify-content:space-between;gap:14px;max-width:760px;margin:30px auto 0;padding:0 18px;flex-wrap:wrap}
.pn a{flex:1 1 240px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;text-decoration:none;font-size:.92rem}
.pn a span{display:block;color:var(--muted);font-size:.8rem}
.pn a.next{text-align:right}
.art-foot{max-width:760px;margin:18px auto 0;padding:0 18px;font-size:.9rem;color:var(--muted)}
/* browse */
.topic{margin-bottom:34px}
.topic h2{color:var(--accent);font-weight:normal;border-bottom:2px solid var(--gold);padding-bottom:4px}
.topic h3{color:var(--gold-dk);font-variant:small-caps;font-weight:normal;margin:18px 0 6px}
.alist{list-style:none;padding:0;margin:0;columns:2 340px;column-gap:38px}
.alist li{margin:0 0 9px;break-inside:avoid}
.alist a{text-decoration:none}
.alist .d{color:var(--muted);font-size:.83rem}
/* search page */
.results{list-style:none;padding:0;max-width:760px}
.results li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:12px 16px;margin-bottom:12px}
.results h3{margin:0 0 4px;font-size:1.05rem}
.results .m{color:var(--gold-dk);font-size:.83rem}
.results p{margin:6px 0 0;font-size:.92rem;color:#4a4438}
.results mark{background:#fdf3d1}
#searchbox{width:100%;max-width:560px;padding:12px 16px;font-size:1.1rem;border:2px solid var(--accent);border-radius:8px}
/* calendar */
.cal-tool{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin-bottom:24px}
.cal-tool h2{margin-top:0;color:var(--accent);font-weight:normal}
.cal-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cal-form input,.cal-form select{padding:9px 10px;font-size:1.05rem;border:1px solid var(--line);border-radius:6px;font-family:inherit}
#c_day{width:70px}#c_year{width:110px}
.cal-form button{padding:9px 16px;font-size:1rem;border:1px solid var(--gold-dk);background:var(--gold);border-radius:6px;cursor:pointer}
.cal-form button.ghost{background:#fff;border-color:var(--line)}
.sr-out{margin-top:18px;font-size:1.15rem}
.sr-out .glyphs img{height:44px;border-radius:4px;margin-right:4px;vertical-align:middle}
.sr-out .big{font-size:1.5rem}
.holy0{color:var(--ink)}.holy1{color:#1a49b5}.holy2{color:#b3261e}
.panel{margin-top:16px;background:var(--paper2);border:1px solid var(--line);border-radius:8px;padding:14px 18px;font-size:.97rem}
.panel h3{margin:0 0 8px;color:var(--accent);font-weight:normal;font-variant:small-caps}
.panel img{max-width:160px;height:auto;border-radius:6px;margin:0 12px 6px 0}
.panel table{float:none!important;margin:0 12px 6px 0}
.srgrid{width:100%;border-collapse:collapse;margin-top:12px}
.srgrid th{background:var(--sky);color:#eee;padding:5px;font-size:.85rem}
.srgrid td{border:1px solid var(--line);vertical-align:top;padding:5px;font-size:.85rem;min-width:60px}
.srgrid td .g{font-size:1rem;font-weight:bold}
.srgrid td img{height:22px;vertical-align:middle}
/* footer */
.site-foot{background:var(--sky);background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22><circle cx=%2220%22 cy=%2230%22 r=%221.1%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%22120%22 cy=%2270%22 r=%22.8%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%2270%22 cy=%22140%22 r=%221.3%22 fill=%22white%22 opacity=%22.9%22/><circle cx=%22180%22 cy=%2240%22 r=%22.7%22 fill=%22white%22 opacity=%22.6%22/><circle cx=%22200%22 cy=%22180%22 r=%221%22 fill=%22white%22 opacity=%22.7%22/><circle cx=%2240%22 cy=%22200%22 r=%22.9%22 fill=%22white%22 opacity=%22.5%22/><circle cx=%22150%22 cy=%22150%22 r=%22.6%22 fill=%22white%22 opacity=%22.8%22/><circle cx=%2290%22 cy=%2210%22 r=%22.8%22 fill=%22white%22 opacity=%22.6%22/></svg>'),linear-gradient(160deg,var(--sky),var(--sky2));color:#9aa5c8;margin-top:40px;padding:20px 0;border-top:3px solid var(--gold);font-size:.88rem}
.site-foot a{color:#cfd6ea}
.mono{font-family:monospace}
@media(max-width:640px){
  .head-search{margin-left:0;width:100%}
  .head-search input{flex:1}
  .hero h1{font-size:1.5rem}
  .alist{columns:1}
}