/* project.css — layout for hand-written project pages (loaded after site.css).
   The generated PCa hub carries its own styles; this is for pages authored here. */
:root{--hubtop:52px;--hubside:232px}

.hubbar{position:fixed;top:var(--sitebar);left:0;right:0;height:var(--hubtop);z-index:40;
  display:flex;align-items:center;gap:12px;padding:0 18px;background:#fff;border-bottom:2px solid #111}
.hubbar .ht{font-weight:800;font-size:14.5px;letter-spacing:-.2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hubbar .ht span{font-weight:400;color:var(--mut)}

.hubside{position:fixed;top:calc(var(--sitebar) + var(--hubtop));left:0;bottom:0;width:var(--hubside);
  overflow-y:auto;padding:14px 10px;background:#fbfbfa;border-right:1px solid var(--line)}
.hubside a{display:block;color:var(--ink2);padding:8px 13px;font-size:13.5px;font-weight:600;
  text-decoration:none;border-left:3px solid transparent}
.hubside a:hover{background:#f2f2f0;color:var(--ink)}
.hubside .sidefoot{margin-top:16px;padding:14px 13px 0;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:var(--mut)}

main.hub{margin-left:var(--hubside);max-width:1160px;
  padding:calc(var(--sitebar) + var(--hubtop) + 22px) clamp(16px,4vw,60px) 60px}
.hub .sec{padding:26px 0 8px;scroll-margin-top:calc(var(--sitebar) + var(--hubtop) + 10px);
  border-top:1px solid var(--line)}
.hub .sec:first-of-type{border-top:0;padding-top:8px}
.hub h2{font-family:var(--serif);font-size:clamp(22px,3vw,29px);margin:0 0 10px;letter-spacing:-.01em}
.hub h2 .snap{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin-left:10px;vertical-align:middle}
.hub h3{font-family:var(--serif);font-size:18px;margin:26px 0 8px}
.hub p{font-size:15.4px;max-width:74ch}
.hub .secintro{color:var(--ink2);margin-top:0}

.masthead2{border-top:2px solid #111;border-bottom:1px solid var(--line);padding:22px 0 26px}
.masthead2 .tag{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);font-weight:700}
.masthead2 h1{font-family:var(--serif);font-size:clamp(28px,4.4vw,42px);line-height:1.08;margin:10px 0 8px}
.masthead2 .authors{font-size:14px;color:var(--mut);margin:0 0 14px}
.masthead2 .lede{font-size:16.5px;max-width:74ch;margin:0}

.statrow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #111;margin:22px 0 4px;background:#fff}
.statrow .stat{padding:16px 18px;border-right:1px solid var(--line)}
.statrow .stat:last-child{border-right:0}
.statrow .statv{font-family:var(--serif);font-size:27px;line-height:1;font-variant-numeric:tabular-nums}
.statrow .statl{font-size:12.5px;font-weight:700;margin-top:7px}
.statrow .stats{font-size:11.5px;color:var(--mut);margin-top:3px}
@media(max-width:860px){.statrow{grid-template-columns:1fr 1fr}
  .statrow .stat:nth-child(2){border-right:0}}

.callout{background:#f6f6f4;border:1px solid var(--line);border-left:4px solid #111;
  padding:13px 17px;margin:18px 0;font-size:13.8px;color:var(--ink2)}
.keybox{background:#fff;border:1px solid var(--line);border-top:3px solid #111;padding:18px 20px;margin:16px 0}
.keybox h3{margin-top:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.two{grid-template-columns:1fr}}

.hub figure{margin:18px 0;background:#fff;border:1px solid var(--line);padding:14px 16px}
.hub figure img{width:100%;height:auto;display:block}
.hub figcaption{font-size:12.3px;color:var(--mut);margin-top:9px;line-height:1.45}
.hub figcaption b{color:var(--ink)}

.tblwrap{overflow-x:auto;margin:16px 0;background:#fff;border:1px solid #111}
.hub table{border-collapse:collapse;width:100%;font-size:12.7px;font-variant-numeric:tabular-nums}
.hub th{background:#111;color:#fff;text-align:left;padding:8px 11px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hub td{border-bottom:1px solid var(--line);padding:7px 11px;vertical-align:top}
.hub tbody tr:last-child td{border-bottom:0}
.hub td.n{text-align:right;white-space:nowrap}
.hub tr.up td{background:#f5faf6}
.hub tr.down td{background:#faf6f5}
.tblnote{font-size:12px;color:var(--mut);margin:-8px 0 22px;line-height:1.45;max-width:80ch}

.pitfalls{margin:0;padding-left:20px;font-size:14.8px;color:var(--ink2);max-width:76ch}
.pitfalls li{margin:9px 0}
.pitfalls b{color:var(--ink)}
.reftbl td:first-child{width:34px;text-align:center;font-weight:700}
.reftbl .rjour{display:block;font-size:11.4px;color:var(--mut);margin-top:2px}
.gate{background:#fff;border:1px solid #111;border-bottom-width:3px;padding:16px 18px;margin:18px 0}
.gate h3{margin:0 0 6px;font-family:var(--serif);font-size:17px}
.gate p{margin:0;font-size:13.6px;color:var(--ink2)}
.pgfoot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mut);text-align:center}

@media(max-width:820px){
  .hubside{position:static;width:auto;height:auto;bottom:auto;display:flex;gap:4px;
    overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--line);
    margin-top:calc(var(--sitebar) + var(--hubtop))}
  .hubside a{white-space:nowrap;border-left:0;padding:6px 10px;font-size:12.5px}
  .hubside .sidefoot{display:none}
  main.hub{margin-left:0;padding-top:18px}
}
@media print{.sitebar,.hubbar,.hubside{display:none}main.hub{margin:0;padding:0}}