:root{
  /* matched to the main paulabbott.com Art Deco theme (dark navy + gold) */
  --bg:#090d17; --panel:#0f1524; --panel2:#161e33; --line:#1e2a44;
  --text:#f0e8d5; --dim:#9a9080; --accent:#c8a84b; --accent2:#e2c270;
  --ink:#c8a84b; --ink2:#e2c270; --nav-h:56px;
  --ok:#6f9b6a; --err:#c98a86; --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,'Iowan Old Style',Cambria,'Times New Roman',serif;color:var(--text);line-height:1.6;background:var(--bg)}
.sans,nav,.btn,.badge,.table,input,button,.meta,.sub,.muted,.readline{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent2);text-decoration:underline}

nav{display:flex;align-items:center;gap:16px;height:var(--nav-h);padding:0 22px;background:rgba(9,13,23,.85);
  backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
nav .brand{font-family:system-ui,sans-serif;font-weight:600;font-size:15px;white-space:nowrap;display:flex;align-items:center;min-width:0}
nav .brand a{color:var(--accent)}
nav .brand a:hover{color:var(--accent2);text-decoration:none}
nav .brand .brand-sep{opacity:.45;padding:0 7px;color:var(--accent)}
nav .brand .brand-cur{color:var(--text);opacity:.85;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){ nav .brand .brand-cur{max-width:120px} }
/* centered search: absolutely centered in the nav, brand left + links right stay in flow */
.navsearch{position:absolute;left:50%;transform:translateX(-50%);width:min(440px,42vw);max-width:none;flex:none}
.navsearch input{width:100%;padding-right:40px}
.navsearch-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--dim);cursor:pointer;padding:5px;border-radius:6px;line-height:0}
.navsearch-btn:hover{color:var(--accent)}
.navsearch-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:720px){
  .navsearch{position:static;transform:none;width:auto;flex:1;max-width:420px}
}
nav .links{display:flex;align-items:center;gap:16px;margin-left:auto}
nav .links a{font-family:system-ui,sans-serif;color:var(--dim);font-size:14px;font-weight:500}
nav .links a:hover{color:var(--ink);text-decoration:none}
nav .who{font-family:system-ui,sans-serif;font-size:13px;color:var(--dim)}

.wrap{max-width:880px;margin:0 auto;padding:30px 22px 40px}
.narrow{max-width:460px}
.wrap.wide{max-width:1180px}

/* article + table-of-contents sidebar layout */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
@media (min-width:1000px){ .article-layout{grid-template-columns:240px minmax(0,1fr)} }
.toc{min-width:0}
.toc-d{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px}
.toc-head{font-family:system-ui,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);
  cursor:pointer;padding:4px 0;list-style:none}
.toc-head::-webkit-details-marker{display:none}
.toc-head::before{content:"▾ ";color:var(--accent)}
.toc-d:not([open]) .toc-head::before{content:"▸ "}
.toc-list{display:flex;flex-direction:column;margin-top:6px;font-family:system-ui,sans-serif;font-size:13.5px}
.toc-list a{color:var(--dim);padding:4px 8px;border-left:2px solid transparent;line-height:1.35;border-radius:0 4px 4px 0}
.toc-list a:hover{color:var(--ink);background:var(--panel2);text-decoration:none}
.toc-list a.lvl-3{padding-left:22px;font-size:12.5px}
.toc-list a.lvl-top{color:var(--dim);font-style:italic}
.toc-list a.active{color:var(--ink2);border-left-color:var(--accent);background:var(--panel2)}
@media (min-width:1000px){
  /* Full-length left rail that scrolls WITH the page (not sticky) so no links are
     cut off. Panel sits slightly lighter than the content background, with no
     divider line between "Contents" and the links. */
  .toc-d{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px 16px;width:100%}
  .toc-head{display:block;padding:2px 8px 10px;margin-bottom:0}
  .toc-list a{display:block}
}
.article h2,.article h3,.article h4{scroll-margin-top:74px}
h1{font-size:30px;line-height:1.2;margin:0 0 6px} h2{font-size:21px;margin:24px 0 10px}
.sub{color:var(--dim);font-size:15px;margin:0 0 22px}
.muted{color:var(--dim);font-size:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:18px;box-shadow:var(--shadow)}
.center{text-align:center}

input[type=text],input[type=search],input[type=password]{
  width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px 13px;font-size:15px}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--gold-glow,rgba(200,168,75,.18))}

.btn{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#14110a;border:1px solid var(--ink);border-radius:9px;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s}
.btn:hover{background:var(--ink2);border-color:var(--ink2);text-decoration:none;color:#14110a}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--line)}
.btn.secondary:hover{background:var(--panel2);color:var(--text);border-color:var(--accent)}
.btn.small{padding:6px 12px;font-size:13px}
.btn.big{padding:13px 22px;font-size:16px}

.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14px;border:1px solid;font-family:system-ui,sans-serif}
.flash.success{background:rgba(111,155,106,.13);border-color:rgba(111,155,106,.4);color:#a9cba2}
.flash.error{background:rgba(201,138,134,.13);border-color:rgba(201,138,134,.4);color:#e0b3af}
.flash.info{background:rgba(200,168,75,.1);border-color:rgba(200,168,75,.35);color:#ddc98a}
.flash.info code{background:var(--panel2);padding:1px 5px;border-radius:4px;border:1px solid var(--line)}

.badge{display:inline-block;font-family:system-ui,sans-serif;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px}
.badge.read{background:rgba(111,155,106,.16);color:#9fc098}
.badge.saved{background:rgba(200,168,75,.15);color:var(--accent2)}

/* search */
.bigsearch{display:flex;gap:10px;margin-bottom:24px}
.bigsearch input{flex:1}
.results{list-style:none;margin:0;padding:0}
.result{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none;background:var(--panel2)}
.result-body{flex:1;min-width:0}
.result-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.result-title{font-size:18px;font-weight:600}
.result-desc{margin:2px 0}
.result-excerpt{font-size:14px;color:#b3aa98;margin-top:4px}
.result-excerpt .searchmatch{color:var(--accent2);font-weight:700;font-style:normal}
.saveform{flex:none}

/* this day in history */
.otd .sec-head{align-items:baseline;margin-bottom:6px}
.otd-date{font-family:system-ui,sans-serif;font-size:14px}
.otd-list{list-style:none;margin:6px 0 0;padding:0}
.otd-list li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.otd-list li:last-child{border-bottom:none}
.otd-year{flex:none;width:48px;font-family:system-ui,sans-serif;font-weight:700;font-size:14px;color:var(--accent2);text-align:right;padding-top:1px}
.otd-text{flex:1;font-size:15.5px}
.otd-link{font-family:system-ui,sans-serif;font-size:13px;white-space:nowrap}

/* lists on home */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:680px){.cols{grid-template-columns:1fr}}
.sec-head{display:flex;align-items:baseline;justify-content:space-between}
.sec-head h2{margin:0 0 10px}
.pagelist{list-style:none;margin:0;padding:0}
.pagelist li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pagelist .meta{font-family:system-ui,sans-serif;font-size:12px;white-space:nowrap}

/* table (history) */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);padding:8px 10px;border-bottom:1px solid var(--line)}
.table td{padding:9px 10px;border-bottom:1px solid var(--line)}

/* article */
.article-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.article-actions{display:flex;gap:8px;flex:none}
.readline{font-size:13px;color:var(--ok);margin:4px 0 0}
.article{font-size:17px;line-height:1.72}
.article p{margin:0 0 16px}
.article h2,.article h3,.article h4{font-family:system-ui,sans-serif;line-height:1.3;margin:26px 0 10px}
.article h2{font-size:22px;border-bottom:1px solid var(--line);padding-bottom:5px}
.article h3{font-size:18px}
.article a{color:var(--accent)}
.article a.ext::after{content:" ↗";font-size:.8em;color:var(--dim)}
.article img{max-width:100%;height:auto}
.article ul,.article ol{margin:0 0 16px;padding-left:26px}
.article li{margin:4px 0}
.article figure{margin:0 0 16px}
.article figure.mw-halign-right,.article .infobox{float:right;clear:right;max-width:300px;margin:6px 0 14px 20px}
.article figure.mw-halign-left{float:left;clear:left;margin:6px 20px 14px 0}
@media (max-width:640px){.article figure.mw-halign-right,.article figure.mw-halign-left,.article .infobox{float:none;max-width:100%;margin:0 0 16px}}
.article figure img{border-radius:6px;border:1px solid var(--line)}
.article figcaption{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--dim);margin-top:5px}
.article table{border-collapse:collapse;font-size:13.5px;font-family:system-ui,sans-serif;max-width:100%}
.article .infobox{font-size:13px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px}
.article .infobox img{border:none}
.article table.wikitable{width:100%;margin:0 0 18px}
.article table.wikitable th,.article table.wikitable td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.article table.wikitable th{background:var(--panel2)}
.article blockquote{margin:0 0 16px;padding:4px 16px;border-left:3px solid var(--accent);color:var(--dim)}
.article sup{font-size:.7em}
.article .reflist,.article ol.references{font-size:13px;font-family:system-ui,sans-serif;color:var(--dim)}
.article code,.article pre{font-family:ui-monospace,monospace;background:var(--panel2);border-radius:5px}
.article code{padding:1px 5px;font-size:.9em}
.article pre{padding:12px;overflow:auto}
.article .thumbcaption{font-size:12.5px;color:var(--dim)}

/* link hover-preview card */
.preview-card{position:absolute;z-index:60;width:320px;max-width:92vw;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.45);overflow:hidden;font-family:system-ui,sans-serif;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.preview-card.show{opacity:1;visibility:visible;transform:translateY(0)}
.preview-thumb{width:100%;height:158px;object-fit:cover;display:block;background:var(--panel2)}
.preview-body{padding:12px 14px}
.preview-title{font-weight:700;font-size:15px;color:var(--text);margin-bottom:2px}
.preview-desc{font-size:12px;color:var(--dim);margin-bottom:6px}
.preview-extract{font-size:13.5px;color:#c9c2b2;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.preview-loading{padding:18px;text-align:center;color:var(--dim)}

.foot{max-width:880px;margin:0 auto;padding:18px 22px 50px;border-top:1px solid var(--line)}
.foot .muted{font-family:system-ui,sans-serif;font-size:12.5px}