:root{--red:#8b1e1e;--ink:#2a2118;--paper:#f4ecdc;--card:#fffaf0;--rule:#bfae8a;--blue:#1d4f8f}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input{font:inherit}
.paper{background:var(--paper);background-image:radial-gradient(rgba(120,90,40,.07) 1px,transparent 1px);background-size:4px 4px;min-height:100vh}
.kick{font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--red);font-weight:700}
.rub{color:var(--red)}
.sc{font-variant:small-caps}
.center{text-align:center}
.mark{background:var(--red);padding:10px 14px;border-radius:4px;display:inline-block}
.mark img{height:58px;display:block}
footer{padding:26px 44px 60px;font-size:14px;color:#7a6a52;text-align:center;font-style:italic}

/* header */
header.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:22px 44px;border-bottom:3px double var(--red)}
header.top h1{font-size:36px;margin:0;font-weight:400}
.sbox{position:relative}
.srch{border:0;border-bottom:2px solid var(--ink);background:transparent;font-size:21px;padding:8px 2px;width:320px;outline:none;font-family:inherit}
.res{position:absolute;right:0;top:48px;width:min(560px,90vw);background:var(--card);border:1px solid var(--rule);display:none;z-index:20;box-shadow:0 20px 40px -10px rgba(60,35,5,.4);max-height:70vh;overflow:auto}
.res.on{display:block}
.res a,.res div{display:flex;gap:10px;padding:10px 14px;text-decoration:none;border-bottom:1px dotted #d5c6a6}
.res a:hover{background:#efe3c8}
.res i{color:var(--red);font-style:normal;font-weight:700;min-width:74px}
.res small{margin-left:auto;color:#9a8a6e;font-style:italic}
.res .hit{display:flex;align-items:center;padding:0;gap:0}
.res .hit .pdf{flex:1;display:flex;gap:10px;padding:10px 14px;border:0;text-decoration:none;min-width:0}
.res .hit a.pdf:hover{background:#efe3c8}
.res .hit .yt{flex-shrink:0;margin:0 12px;border:0;padding:6px 11px;background:#e62117;color:#fff;border-radius:4px;font:800 13px -apple-system,sans-serif;text-decoration:none}

/* photo strip + layout */
.strip{display:flex;height:150px;overflow:hidden;border-bottom:1px solid #d5c6a6}
.strip div{flex:1;background-size:cover;background-position:center;filter:sepia(.5);transition:.5s}
.strip div:hover{filter:none;flex:1.7}
main{display:grid;grid-template-columns:210px minmax(0,1fr)}
aside{border-right:1px solid #d5c6a6;padding:22px 20px;position:sticky;top:0;align-self:start}
aside h5{margin:16px 0 6px}
aside a{display:block;padding:5px 0;font-size:17px;text-decoration:none}
aside a.on{color:var(--red);font-weight:700}
aside a.dim{opacity:.6}
.sheet{padding:30px 40px;min-width:0}
.sheet h2{font-size:30px;margin:0}

/* welcome */
.wel{display:grid;grid-template-columns:1.3fr 1fr;min-height:calc(100vh - 110px)}
.wel .ph{position:relative;overflow:hidden;border-right:3px double var(--red);min-height:360px}
.fade{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s}
.fade.on{opacity:1}
.wel .tx{padding:60px 50px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.wel h2{font-size:44px;margin:0;font-weight:400;line-height:1.05}
.wel p{font-size:19px;line-height:1.55;margin:0}
.login{display:flex;gap:10px}
.pw{border:1px solid var(--rule);background:#fff;border-radius:4px;padding:13px 14px;font-size:18px;flex:1;min-width:0}
.btnred{background:var(--red);color:#fff;border:0;border-radius:4px;padding:12px 20px;font-family:-apple-system,sans-serif;font-weight:700;font-size:16px;cursor:pointer}
.err{color:#b3161b;font-weight:700}

/* John's grid */
.tw{overflow-x:auto;margin-top:18px}
table.js{width:100%;border-collapse:collapse;background:var(--card);box-shadow:0 2px 0 #d5c6a6,0 20px 40px -20px rgba(80,50,10,.35)}
.js th,.js td{border:1px solid var(--rule);padding:11px 8px;text-align:center;vertical-align:middle;font-size:17px}
.js th{font-variant:small-caps;font-size:20px;background:#efe3c8}
.js td.rowh{text-align:left;font-variant:small-caps;font-weight:700;font-size:18px;width:140px;background:#f7efdc}
.js td.cel{color:var(--blue);font-style:italic}
.js .reh{color:#b3161b;font-style:normal;font-weight:700;display:block}
.js .lk{display:inline-block;text-decoration:none;border-radius:6px;padding:4px;transition:.15s}
.js a.lk:hover{background:var(--red);color:#fff}
.js a.lk:hover b{color:#fff}
.js .lk b{display:block}
.js .missing{opacity:.75}
.js .yt{display:inline-block;vertical-align:top;margin:4px 0 0 2px;font:800 10px -apple-system,sans-serif;background:#e62117;color:#fff;border-radius:3px;padding:3px 6px;text-decoration:none}
.js .sep{opacity:.4;margin:0 2px}
.js .grp{display:inline-block;padding:4px}
.js .grp b{display:block}
.js a.num{text-decoration:none;border-radius:4px;padding:2px 5px}
.js a.num:hover{background:var(--red);color:#fff}
.newr{color:#b3161b;font-weight:800;font-family:-apple-system,sans-serif;font-size:12px;display:block}
.off{color:#999;letter-spacing:.2em;font-weight:700}
.dl{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.dl a{border:1px solid var(--red);background:#fff;color:var(--red);border-radius:4px;font:700 12px -apple-system,sans-serif;padding:6px 8px;text-decoration:none}
.dl a:hover{background:var(--red);color:#fff}

/* book pages */
.bk-h{display:flex;align-items:baseline;gap:18px;border-bottom:3px double var(--red);padding-bottom:10px;margin-bottom:16px}
.bk-h h2{font-size:34px;margin:0;font-weight:400}
.cnt{color:#7a6a52;font-style:italic}
.jump{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px}
.jump a{border:1px solid var(--rule);background:#fff;padding:6px 10px;font:14px -apple-system,sans-serif;border-radius:3px;text-decoration:none}
.jump a:hover{background:var(--red);color:#fff}
.bA{columns:2;column-gap:40px;column-rule:1px solid #d5c6a6}
.bA>div{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:7px 0;border-bottom:1px dotted #d5c6a6;break-inside:avoid;font-size:17px;position:relative;scroll-margin-top:10px}
.bA b{color:var(--red);min-width:44px;text-align:right;flex-shrink:0}
.bA .t{flex:1;min-width:9em;overflow-wrap:break-word;text-decoration:none}
.bA a.t:hover{color:var(--red);text-decoration:underline}
.bA .cr{color:#9a8a6e;font-style:italic;font-size:13px;flex-shrink:0;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsinfo{border:0;background:none;color:#9a8a6e;font-size:16px;padding:0 4px;cursor:pointer;flex-shrink:0}
.lspop{position:absolute;right:0;bottom:100%;background:#2a2118;color:#fff;font:13px -apple-system,sans-serif;padding:7px 11px;border-radius:4px;white-space:nowrap;z-index:5}
.ic{display:inline-flex;gap:4px;flex-shrink:0;margin-left:auto}   /* drops under the title when the row is tight */
.ic a{font:800 11px -apple-system,sans-serif;color:#fff;border-radius:3px;padding:5px 7px;text-decoration:none}
.ic .p{background:#c0392b}.ic .m{background:#2c7be5}.ic .y{background:#e62117}.ic .d{background:#2b579a}.ic .more{background:#7a6a52}
.menu{position:absolute;right:0;top:100%;background:var(--card);border:1px solid var(--rule);z-index:6;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.menu a{display:block;padding:9px 14px;text-decoration:none;border-bottom:1px dotted #d5c6a6;font-size:15px}
.menu a:hover{background:#efe3c8}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#2a2118;color:#fff;padding:12px 20px;border-radius:6px;font:15px -apple-system,sans-serif;z-index:120;opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1}

/* tablets held upright / phones */
@media (max-width:1000px){
  header.top{grid-template-columns:auto 1fr;padding:16px 20px}
  header.top .sbox{grid-column:1/-1}
  .srch{width:100%}
  main{grid-template-columns:1fr}
  aside{position:static;border-right:0;border-bottom:1px solid #d5c6a6;display:flex;flex-wrap:wrap;gap:0 16px;padding:12px 20px}
  aside h5{width:100%;margin:8px 0 2px}
  .sheet{padding:20px}
  .bA{columns:1}
  .wel{grid-template-columns:1fr}
  .wel .ph{border-right:0;border-bottom:3px double var(--red)}
  .wel .tx{padding:30px 24px}
}

/* archive */
.yr{font-variant:small-caps;font-weight:400;font-size:26px;color:var(--red);border-bottom:1px solid var(--rule);margin:26px 0 8px}
.arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 24px}
.arch>div{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dotted #d5c6a6;flex-wrap:wrap}
.arch .mo{font-size:19px;text-decoration:none;flex:1}
.arch .mo:hover{color:var(--red);text-decoration:underline}
.arch .dlk{font:700 12px -apple-system,sans-serif;color:var(--red);border:1px solid var(--red);border-radius:3px;padding:3px 7px;text-decoration:none}
.arch.old .mo{font-size:17px}