/* Drawing Dead - Blogger Simple era journal */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#eceae4;color:#22201d;
  font:17px/1.65 Georgia,"Times New Roman",serif}
a{color:#7a2b2b}
a:focus{outline:3px solid #7a2b2b;outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#7a2b2b;
  padding:10px 16px;z-index:20}
.skip:focus{left:8px;top:8px}
.shell{max-width:1000px;margin:0 auto;background:#fff;padding:32px 40px 40px}

/* 1 blog title */
.masthead{padding-bottom:18px}
.masthead h1,.masthead .bt{margin:0;font-size:40px;line-height:1.15;
  letter-spacing:.02em;font-weight:normal;color:#22201d}
.masthead a{color:inherit;text-decoration:none}
.masthead .logline{margin:10px 0 0;font:15px/1.5 Arial,Helvetica,sans-serif;
  color:#6b665e;max-width:56em}

/* 2 page links */
.pagelinks{border-top:1px solid #d8d4cb;border-bottom:1px solid #d8d4cb;
  padding:9px 0;margin-bottom:28px}
.pagelinks ul{list-style:none;margin:0;padding:0}
.pagelinks li{display:inline-block;margin:0 22px 0 0}
.pagelinks a{font:12px/2.4 Arial,Helvetica,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;color:#7a2b2b}
.pagelinks a:hover,.pagelinks a[aria-current="page"]{text-decoration:underline}

.cols{display:flex;gap:44px;align-items:flex-start}
.stream{flex:1 1 auto;min-width:0;max-width:41em}
.rail{flex:0 0 27%;max-width:27%}

/* posts */
.datehead{font:12px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;
  color:#6b665e;text-transform:uppercase;border-bottom:1px solid #d8d4cb;
  padding-bottom:7px;margin:0 0 14px}
.post{margin:0 0 42px}
.post+.post{border-top:1px solid #eeece7;padding-top:34px}
.post h2.pt,.post h1.pt{margin:0 0 8px;font-size:27px;line-height:1.25;
  font-weight:normal}
.post h2.pt a{text-decoration:none}
.post h2.pt a:hover{text-decoration:underline}
.pmeta{font:12px/1.6 Arial,Helvetica,sans-serif;color:#6b665e;margin:0 0 16px}
.pmeta a{color:#7a2b2b}
.post p{margin:0 0 15px}
.post h2{font-size:20px;line-height:1.3;font-weight:normal;margin:26px 0 10px}
.entry h2{font-size:20px;line-height:1.3;font-weight:normal;margin:28px 0 10px}
.entry p{margin:0 0 16px}
.readmore{font:12px/1.6 Arial,Helvetica,sans-serif}

/* pager */
.pager{border-top:1px solid #d8d4cb;padding-top:14px;margin-top:8px;
  font:12px/1.7 Arial,Helvetica,sans-serif;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pager span.lbl{display:block;color:#6b665e;letter-spacing:.09em;
  text-transform:uppercase}
.pager .nx{text-align:right}
.pager em{font-style:normal}

/* rail */
.widget{margin:0 0 30px}
.widget h2{font:12px/1 Arial,Helvetica,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6b665e;font-weight:bold;
  border-bottom:1px solid #d8d4cb;padding-bottom:7px;margin:0 0 12px}
.widget p{font:13px/1.6 Arial,Helvetica,sans-serif;color:#4a463f;margin:0 0 10px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{font:13px/1.55 Arial,Helvetica,sans-serif;padding:4px 0;
  border-bottom:1px solid #f0eee9}
.widget li:last-child{border-bottom:0}
.widget .ct{color:#8b857b}
details.arc{margin:0}
details.arc>summary{font:13px/1.6 Arial,Helvetica,sans-serif;cursor:pointer;
  padding:4px 0;color:#7a2b2b;list-style:none}
details.arc>summary::-webkit-details-marker{display:none}
details.arc>summary::before{content:"\25B8 ";color:#8b857b}
details.arc[open]>summary::before{content:"\25BE ";color:#8b857b}
details.arc .yr{padding-left:14px}
details.arc .mo{padding-left:14px;margin:0;list-style:none}
details.arc .mo li{font-size:12.5px;border-bottom:0;padding:3px 0}

/* footer */
.foot{border-top:1px solid #d8d4cb;margin-top:14px;padding-top:18px;
  text-align:center;font:12px/1.8 Arial,Helvetica,sans-serif;color:#6b665e}
.foot a{color:#7a2b2b}

.pagehead h1{font-size:32px;line-height:1.2;font-weight:normal;margin:0 0 8px}
.pagesub{font:12px/1.6 Arial,Helvetica,sans-serif;color:#6b665e;
  border-bottom:1px solid #d8d4cb;padding-bottom:12px;margin:0 0 26px;
  letter-spacing:.09em;text-transform:uppercase}
.idxlist{list-style:none;margin:0;padding:0}
.idxlist li{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid #eeece7}
.idxlist li:last-child{border-bottom:0}
.idxlist h2{font-size:22px;line-height:1.3;font-weight:normal;margin:6px 0 6px}
.idxlist h2 a{text-decoration:none}
.idxlist h2 a:hover{text-decoration:underline}
.arcpage h2{font-size:22px;font-weight:normal;margin:30px 0 4px;
  border-bottom:1px solid #d8d4cb;padding-bottom:8px}
.arcpage h3{font:12px/1.6 Arial,Helvetica,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6b665e;margin:20px 0 6px}
.arcpage ul{list-style:none;margin:0;padding:0}
.arcpage li{padding:5px 0;border-bottom:1px solid #f0eee9}
.arcpage li span{font:12px Arial,Helvetica,sans-serif;color:#8b857b;
  margin-right:10px}
img{max-width:100%;height:auto}

@media (max-width:760px){
  .shell{padding:20px 16px 28px}
  .masthead h1,.masthead .bt{font-size:30px}
  .cols{display:block}
  .rail{max-width:100%;margin-top:38px;border-top:2px solid #d8d4cb;
    padding-top:8px}
  .widget h2{border-top:1px solid #d8d4cb;padding-top:14px;font-weight:bold}
  .stream{max-width:100%}
  body{font-size:16px}
  .post h2.pt,.post h1.pt{font-size:22px}
  .pagelinks li{margin-right:18px}
  .pagelinks a{line-height:2.8}
  .pager{display:block}
  .pager .nx{text-align:left;margin-top:14px}
}
