/* ===========================================================
   retro.css — tasteful Web 1.0 theme for the static builder
   =========================================================== */
body{
  margin:0; padding:24px 12px 44px; color:#211d16; font-size:17px; line-height:1.55;
  font-family:"Times New Roman",Times,Georgia,serif;
  background-color:#d8d2c0;
  background-image:
    repeating-linear-gradient(0deg, rgba(70,60,40,.045) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(70,60,40,.045) 0 1px, transparent 1px 9px);
}
a{color:#1a3fae}
a:visited{color:#5a2a8a}
a:hover{color:#a02000}

table.page{width:100%; max-width:1100px; margin:0 auto; border:3px ridge #cfcabb;
  background:#c9c4b4; border-collapse:separate}
table.page > tbody > tr > td{vertical-align:top}

/* masthead — terminal-prompt style on the same cream tone as content */
.masthead{background:#fbf8ef; border:2px groove #efe8d6; padding:14px 20px}
pre.term{margin:0; font-family:"Courier New",Courier,monospace; font-size:15px; line-height:1.45;
  color:#211d16; white-space:pre; overflow-x:auto}
pre.term .prompt{color:#2f6b2f; font-weight:bold; margin-right:4px}
pre.term .out{color:#3a352a}
pre.term .cursor{color:#211d16; background:#211d16; animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{background:transparent; color:transparent}}
.sub{font-family:"Courier New",monospace; font-size:12px; color:#6a6354; text-align:center; margin:4px 0 0}
/* legacy ASCII style (kept for any old refs) */
pre.ascii{margin:0; text-align:center; color:#27314f; font-family:"Courier New",Courier,monospace;
  font-size:14px; line-height:1.15; overflow-x:auto; white-space:pre}

/* sidebar nav */
td.nav{width:180px; background:#efe9d8; border:2px groove #fff; padding:14px 12px}
.navhd{font-family:"Courier New",monospace; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:#8a5a1a; margin:0 0 6px; border-bottom:1px solid #c9bfa6; padding-bottom:3px}
td.nav ul{list-style:none; margin:0 0 16px; padding:0}
td.nav li{margin:5px 0}
td.nav li::before{content:"\25BA\00a0"; color:#a05a20; font-size:11px}
td.nav li.here::before{color:#1c2e5a}
td.nav a{text-decoration:none; font-size:15px}
td.nav a:hover{text-decoration:underline}
td.nav .here span{font-weight:bold; color:#1c2e5a; font-size:15px}
.lang-toggle{font-family:"Courier New",monospace; font-size:13px; margin:2px 0 12px}
.lang-toggle a{text-decoration:none}
.lang-toggle .here{font-weight:bold; color:#1c2e5a}

/* main content */
td.main{background:#fffdf6; border:2px groove #fff; padding:16px 22px 22px}
h1{font-family:"Times New Roman",serif; color:#1c2e5a; font-size:27px; margin:4px 0 12px;
  border-bottom:2px solid #1c2e5a; padding-bottom:4px}
h2{font-family:"Times New Roman",serif; color:#1c2e5a; font-size:23px; margin:18px 0 10px;
  border-bottom:2px solid #1c2e5a; padding-bottom:3px}
h3{font-family:"Times New Roman",serif; color:#1c2e5a; font-size:19px; margin:14px 0 4px}
h1:first-child, h2:first-child{margin-top:0}
.muted{color:#6a6354; font-style:italic}
.role{font-weight:bold; color:#2f6b2f}
.role.night{color:#7a3b7a}

p{margin:0 0 12px}
ul,ol{margin:6px 0 14px}
li{margin:5px 0}
hr{border:0; border-top:2px groove #c9bfa6; margin:16px 0}

blockquote{border-left:4px groove #c9bfa6; background:#fbf8ef; margin:12px 0; padding:6px 14px; color:#3a352a}

/* code */
code{background:#f2eedf; padding:1px 4px; font-family:"Courier New",monospace; font-size:.92em; color:#7a3b7a}
pre{border:2px groove #e6dfca; background:#fbf8ef; padding:12px 14px; overflow-x:auto}
pre code{background:none; padding:0; color:#2a2620}

/* tables in content */
table{border-collapse:collapse; margin:10px 0 16px}
th,td{border:1px solid #c9bfa6; padding:6px 10px; text-align:left}
th{background:#efe9d8; font-family:"Times New Roman",serif}

/* images */
img{max-width:100%}

/* links row */
.links a{font-weight:bold}
.new{color:#a02000; font-family:"Courier New",monospace; font-size:13px; font-weight:bold}

/* ---- blog listing ---- */
.filters{margin:10px 0 16px}
.filters .cat{font-family:"Courier New",monospace; font-size:12.5px; color:#1c2e5a;
  background:#efe9d8; border:2px outset #d8d2c0; padding:3px 9px; margin:0 5px 6px 0; cursor:pointer}
.filters .cat:hover{color:#a02000}
.filters .cat.active{border-style:inset; background:#e4ddc8; color:#a02000; font-weight:bold}

ul.listing{list-style:none; margin:0; padding:0}
ul.listing li{margin:0; padding:9px 2px; border-bottom:1px dotted #b7ad94}
ul.listing li::before{content:"\25BA\00a0"; color:#a05a20; font-size:12px}
.listing-title{font-family:"Times New Roman",serif; font-weight:bold; color:#1c2e5a; text-decoration:none; font-size:17px}
.listing-title:hover{text-decoration:underline; color:#a02000}
.listing-meta{display:block; margin-left:1.4em; font-family:"Courier New",monospace; font-size:12px; color:#8a3a10}

/* ---- single post ---- */
.entry-meta{font-family:"Courier New",monospace; font-size:12.5px; color:#8a3a10; margin:-4px 0 16px}
.post-body{font-size:17px}

/* ---- KaTeX math ---- */
.katex-display{overflow-x:auto; overflow-y:hidden; padding:6px 0}
.katex{font-size:1.04em}

/* ---- TR (technical report) page: contain wide math inside the cell ----
   Scoped to body.tr only so other pages keep their natural layout.
   The colgroup pins col widths so table-layout:fixed doesn't collapse them. */
body.tr table.page{table-layout:fixed}
body.tr .col-nav{width:180px}
body.tr .col-main{width:auto}
body.tr td.main{overflow:hidden; word-wrap:break-word; overflow-wrap:break-word}

/* footer */
.foot{background:#efe9d8; border:2px groove #fff; padding:12px; text-align:center;
  font-family:"Courier New",monospace; font-size:12.5px; color:#5a5446; line-height:1.8}

/* ---- responsive breakpoints ---- */

/* tablet: 720-960px — slim sidebar, smaller body padding */
@media (max-width:960px){
  body{padding:14px 8px 32px}
  td.nav{width:150px; padding:12px 10px}
  td.main{padding:14px 18px 18px}
  body.tr .col-nav{width:150px}
  pre.term{font-size:13.5px}
}

/* phone: <720px — stack nav above content */
@media (max-width:720px){
  body{padding:10px 6px 24px; font-size:16px}
  table.page, table.page > tbody, table.page > tbody > tr, table.page > tbody > tr > td{
    display:block; width:auto}
  table.page > tbody > tr > td.nav{
    width:auto; border-bottom:2px groove #fff; padding:10px 14px}
  table.page > tbody > tr > td.nav ul{margin-bottom:8px}
  /* on phone the colgroup widths shouldn't matter, but force unfix */
  table.page{table-layout:auto}
  body.tr td.main{overflow-x:auto}      /* let math scroll horizontally */
  .masthead{padding:10px 12px}
  pre.term{font-size:12.5px; line-height:1.4}
  h1{font-size:23px}
  h2{font-size:20px}
}

/* very small (<420px): shrink masthead text further */
@media (max-width:420px){
  pre.term{font-size:11.5px}
  pre.ascii{font-size:11px}
  body{font-size:15.5px}
}