/* Alexander H. Williams - weblog stylesheet
   Pale canvas, white sheet, ruled panorama, black menu bar, showcase stage,
   format-styled stream, ephemera rail. */
:root{
  --canvas:#e2e2e2; --sheet:#ffffff; --ink:#1b1b1b; --meta:#767676;
  --accent:#1982d1; --rule:#dddddd; --footer:#f4f4f4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font:17px/1.65 "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a{color:var(--accent)}
a:hover{color:#0f5f9c}
img{max-width:100%;height:auto}

.canvas{padding:32px 24px}
.sheet{max-width:1100px;margin:0 auto;background:var(--sheet);border:1px solid #cfcfcf}

/* masthead ---------------------------------------------------------------- */
.masthead{padding:34px 40px 26px}
.site-title{margin:0;font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.site-title a{color:var(--ink);text-decoration:none}
.site-title a:hover{color:var(--accent)}
.site-tagline{
  margin:8px 0 0;font-size:14px;color:var(--meta);
  text-transform:uppercase;letter-spacing:.14em;
}

/* rotating panorama pool -------------------------------------------------- */
.panorama{
  position:relative;height:240px;overflow:hidden;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.panorama::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(27,27,27,0) 0%,rgba(27,27,27,.34) 100%);
}
/* three ruled band treatments rotate by route, standing in for the theme's
   rotating photographic header pool; no source panorama survived */
.pano-a{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 1px,transparent 1px 46px),
  linear-gradient(180deg,#eaf0f4 0%,#c2d2dd 34%,#7f9db2 66%,#41627c 100%)}
.pano-b{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 22px),
  linear-gradient(180deg,#f2ece0 0%,#dcc9a8 38%,#b4936a 70%,#6f5539 100%)}
.pano-c{background:
  repeating-linear-gradient(90deg,rgba(27,27,27,.10) 0 1px,transparent 1px 30px),
  linear-gradient(180deg,#e6ece8 0%,#bccfc4 36%,#7fa08c 68%,#3f5a4c 100%)}
.pano-a::before,.pano-b::before,.pano-c::before{
  content:"";position:absolute;left:0;right:0;top:62%;height:1px;
  background:rgba(255,255,255,.55);
}

/* black menu bar ---------------------------------------------------------- */
.menubar{
  display:flex;align-items:stretch;justify-content:space-between;
  background:var(--ink);flex-wrap:wrap;
}
.menu{display:flex;margin:0;padding:0 24px;list-style:none;flex-wrap:wrap}
.menu li a{
  display:block;padding:14px 16px;color:#f2f2f2;text-decoration:none;
  font-size:14px;text-transform:uppercase;letter-spacing:.08em;
}
.menu li a:hover{background:#2c2c2c;color:#fff}
.menu li.current a{box-shadow:inset 0 -3px 0 var(--accent);color:#fff}
.menu-utility{
  margin:0;padding:14px 32px;color:#8d8d8d;font-size:13px;
  text-transform:uppercase;letter-spacing:.1em;
}
.menu-utility a{color:#d8d8d8;text-decoration:none}
.menu-utility a:hover{color:#fff;text-decoration:underline}

/* shell ------------------------------------------------------------------- */
.shell{display:flex;align-items:flex-start;gap:40px;padding:36px 40px 44px}
.stream{flex:1 1 auto;min-width:0}
.shell.no-rail{justify-content:center}
.shell.no-rail .stream{max-width:680px}
.rail{flex:0 0 30%;max-width:300px}

/* date plate motif -------------------------------------------------------- */
.date-plate{
  display:block;float:left;width:64px;margin:4px 20px 12px 0;padding:6px 0 7px;
  text-align:center;border-top:3px solid #cccccc;border-bottom:1px solid var(--rule);
}
.plate-month{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--meta);
}
.plate-day{display:block;font-size:22px;font-weight:700;line-height:1.15;color:var(--ink)}
.date-plate.small{
  float:none;display:inline-block;width:46px;margin:0 12px 0 0;padding:3px 0 4px;
  vertical-align:middle;border-top-width:2px;
}
.date-plate.small .plate-month{font-size:9px;letter-spacing:.1em}
.date-plate.small .plate-day{font-size:14px}

/* showcase stage ---------------------------------------------------------- */
.showcase{padding-bottom:4px}
.stage{overflow:hidden}
.stage-title{margin:0 0 6px;font-size:38px;line-height:1.15;letter-spacing:-.015em}
.stage-title a{color:var(--ink);text-decoration:none}
.stage-title a:hover{color:var(--accent)}
.stage-body p{margin:14px 0 0;max-width:66ch}
.entry-main{overflow:hidden}

.recent-list{
  display:block;margin-top:30px;padding:18px 0 8px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.recent-list h2{
  margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--meta);
}
.recent-list ul{margin:0;padding:0;list-style:none}
.recent-list li{
  display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:7px 0;border-bottom:1px solid #efefef;font-size:19px;line-height:1.35;
}
.recent-list li a{text-decoration:none}
.recent-list li a:hover{text-decoration:underline}
.recent-date{
  flex:0 0 auto;font-size:11px;color:var(--meta);
  text-transform:uppercase;letter-spacing:.1em;
}

/* stream entries ---------------------------------------------------------- */
.entry{padding:26px 0;border-bottom:1px solid var(--rule);overflow:hidden}
.entry-title{margin:0 0 6px;font-size:26px;line-height:1.2}
.entry-title a{color:var(--ink);text-decoration:none}
.entry-title a:hover{color:var(--accent)}
.entry-meta{margin:0 0 10px;font-size:12px;color:var(--meta);
  text-transform:uppercase;letter-spacing:.11em}
.format-label{
  display:inline-block;margin-right:12px;padding:2px 7px;
  border:1px solid var(--rule);color:var(--meta);
}
.entry-excerpt{margin:0;max-width:66ch}
.entry-compact{font-size:15px;line-height:1.6;max-width:66ch}
.entry-compact p{margin:0 0 10px}
.entry .entry-more{margin:12px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.11em}
.entry .entry-more a{text-decoration:none}
.entry .entry-more a:hover{text-decoration:underline}
.format-quote blockquote,.single.format-quote blockquote{margin:0;padding:0 0 0 18px}
.format-quote blockquote p{
  font:italic 22px/1.5 Georgia,"Times New Roman",serif;margin:0 0 10px;max-width:60ch;
}
/* quote pulls: the leading paragraph of a quote entry carries the italic pull */
.format-quote .entry-pull{
  font:italic 22px/1.5 Georgia,"Times New Roman",serif;margin:0 0 12px;max-width:60ch;
}
.entry-source{margin:6px 0 14px;font-size:13px;line-height:1.5;color:var(--meta)}
.entry-source a{color:var(--meta)}
.entry-caption{margin:0 0 10px}
blockquote{
  margin:0 0 16px;padding:0 0 0 18px;border-left:2px solid var(--ink);
  font-style:italic;color:#333;
}

/* rail widgets ------------------------------------------------------------ */
.widget{margin-bottom:30px}
.widget h2{
  margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);
}
.widget ul{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.45}
.widget-list li{display:flex;align-items:center;padding:7px 0;border-bottom:1px solid #f0f0f0}
.widget-list li a{text-decoration:none}
.widget-list li a:hover{text-decoration:underline}
.widget-months li,.widget-formats li{
  display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f0f0f0;
}
.widget-months li a{text-decoration:none}
.tally{color:var(--meta);font-size:12px}

/* single entry ------------------------------------------------------------ */
.single-head{overflow:hidden;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.single-headings{overflow:hidden}
.single-title{margin:0;font-size:30px;line-height:1.2;letter-spacing:-.01em}
.single-body{font-size:17px;line-height:1.7;max-width:66ch}
.single-body p{margin:0 0 18px}
.single-body ul,.single-body ol{margin:0 0 18px;padding-left:22px}
.single.format-quote .single-title{
  font:italic 22px/1.5 Georgia,"Times New Roman",serif;letter-spacing:0;
}
.entry-nav{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;
}
.entry-nav a{display:block;max-width:46%;text-decoration:none}
.entry-nav a:hover{text-decoration:underline}
.entry-nav a.next{text-align:right;margin-left:auto}
.entry-nav span{
  display:block;font-size:11px;color:var(--meta);
  text-transform:uppercase;letter-spacing:.12em;
}
.entry-return{margin-top:22px;font-size:12px;text-transform:uppercase;letter-spacing:.11em}
.entry-return a{text-decoration:none}
.entry-return a:hover{text-decoration:underline}

/* archive ----------------------------------------------------------------- */
.page-title{margin:0 0 24px;font-size:34px;line-height:1.15}
.archive-month{margin-bottom:30px}
.archive-month h2{
  margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule);
  font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--meta);
}
.archive-rows{margin:0;padding:0;list-style:none}
.archive-rows li{
  display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid #f0f0f0;
  font-size:16px;line-height:1.4;
}
.day-plate{
  flex:0 0 auto;width:46px;padding:3px 0 4px;text-align:center;
  border-top:2px solid #cccccc;border-bottom:1px solid var(--rule);
  font-size:15px;font-weight:700;color:var(--ink);
}
.archive-rows li a{flex:1 1 auto;text-decoration:none;min-width:0}
.archive-rows li a:hover{text-decoration:underline}
.row-format{
  flex:0 0 auto;font-size:11px;color:var(--meta);
  text-transform:uppercase;letter-spacing:.1em;
}

/* footer ------------------------------------------------------------------ */
.site-footer{background:var(--footer);border-top:1px solid var(--rule);padding:30px 40px 22px}
.footer-areas{display:flex;gap:40px;flex-wrap:wrap}
.footer-area{flex:1 1 180px;min-width:0}
.footer-area h2{
  margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--meta);
}
.footer-area ul{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.8}
.footer-area a{text-decoration:none}
.footer-area a:hover{text-decoration:underline}
.footer-credit{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--rule);text-align:center;
  font-size:11px;color:var(--meta);text-transform:uppercase;letter-spacing:.14em;
}

/* mobile transformations -------------------------------------------------- */
@media (max-width:860px){
  .canvas{padding:14px 12px}
  .masthead{padding:24px 20px 18px}
  .site-title{font-size:30px}
  .panorama{height:150px}
  .menubar{flex-direction:column}
  .menu{padding:4px 8px}
  .menu li a{padding:11px 12px;font-size:13px}
  .menu-utility{padding:10px 20px 14px;border-top:1px solid #333}
  .shell{flex-direction:column;gap:32px;padding:24px 20px 30px}
  .rail{flex:1 1 auto;max-width:none;width:100%;border-top:1px solid var(--rule);padding-top:24px}
  .shell.no-rail .stream{max-width:none}
  /* un-float the date plate so the reading column keeps its full width */
  .date-plate{
    float:none;display:flex;align-items:baseline;gap:8px;width:auto;
    margin:0 0 10px;padding:4px 0 5px;text-align:left;
  }
  .plate-month{font-size:10px}
  .plate-day{font-size:16px}
  .stage-title{font-size:27px}
  .single-title{font-size:24px}
  .single-body,.entry-excerpt,.entry-compact,.stage-body p{max-width:none;font-size:16px}
  .recent-list li{flex-direction:column;gap:2px;font-size:17px}
  .format-quote blockquote p{font-size:19px}
  .entry-nav{flex-direction:column;gap:14px}
  .entry-nav a{max-width:none}
  .entry-nav a.next{text-align:left;margin-left:0}
  .site-footer{padding:24px 20px 18px}
  .footer-areas{flex-direction:column;gap:22px}
  .archive-rows li{flex-wrap:wrap}
}