/* ============================================================================
   Purpose Research blog, /wdprs
   Generated by build/make_blog_theme.py. Do not edit in the theme.

   Loads after site.css, which carries the palette, the header band and the
   footer. This file adds what only the blog has: the masthead, the reading
   column, the post list and the sidebar.

   The blog is a reading site before it is a brand surface. One post draws 200+
   readers a month and runs 1,500 words of statistical argument, so the
   typography below is the point and the palette is second.
   ========================================================================== */

/* ---- masthead ------------------------------------------------------------
   Indigo band under the site header, carrying the blog's own name, its tagline
   and the Vienna banner. Weaver absolutely positioned the title and tagline ON
   TOP of the header photograph, which made their legibility depend on whichever
   image was loaded — against the pale lecture-hall walls the tagline
   disappeared. Here they sit on the band above the photograph, where contrast is
   fixed and measured: 13.5:1 and 8.5:1. Changing the image cannot break the
   type. */
.blog-head{background:var(--band); padding:30px 0 0}
/* The one line in the band, so it is set as a heading rather than as a caption. It was
   17px under a 41px site name that repeated the wordmark above it; with the name gone
   it carries the band alone and is sized to. Still italic and still in the book face:
   it is a sentence about the blog, not a label. */
.blog-tag{margin:0 0 20px; font-family:var(--book); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.8vw,26px); line-height:1.3; color:#C9C6D8; max-width:34ch}
/* Never stretched past the width it was cut for. The source is 1880 wide so it
   renders at 940 and stays sharp on a 2x display; scaled up it would show the
   softness of the crop. See build/make_blog_header.py. */
.blog-banner{display:block; width:100%; max-width:940px; height:auto; margin:0 auto}
/* Under 700px the <picture> swaps in the 2:1 frame. It is a different picture, not
   the same one scaled, so the 940 cap that keeps the wide frame from softening does
   not apply to it. */
@media (max-width:700px){ .blog-banner{max-width:none} }

/* ---- reading -------------------------------------------------------------
   Leading and measure are set together, not separately. At 19px EB Garamond a
   66ch line is roughly 630px, the comfortable end of the 60-70ch range; longer
   lines need more leading so the eye reliably finds the next one. 1.7 is toward
   the open end of the 1.6-1.75 band that suits serif long-form, chosen because
   this measure is long and because EB Garamond has a modest x-height, which
   makes tight leading read as cramped. It also clears WCAG 1.4.12, which
   requires text to survive a reader forcing 1.5.

   The blog ran at 125% line-height, which was the single worst thing on the
   page. */
.blog-main{padding:clamp(30px,4vw,52px) 0 clamp(40px,6vw,72px)}
.blog-cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(28px,4vw,56px);
  align-items:start}
.post-body{font-family:var(--book); font-size:19px; line-height:1.7; color:var(--text)}
.post-body p{margin:0 0 1.3em; max-width:66ch}
/* The measure has to reach everything in the reading column, not just
   paragraphs. Capping p alone left lists and block quotations running the full
   width, so the eye had to re-learn the line length every time the content
   changed shape. */
.post-body li, .post-body blockquote, .post-body dd{max-width:66ch}
.post-body ul, .post-body ol{margin:0 0 1.3em; padding-left:1.3em}
.post-body li{margin:0 0 .4em}
.post-body h2{font-family:var(--book); font-weight:400; color:var(--heading); font-size:25px;
  line-height:1.22; margin:1.8em 0 .45em}
.post-body h3{font-family:var(--display); font-weight:500; color:var(--text); font-size:18px;
  margin:1.5em 0 .35em}
/* Block quotations, which this blog uses to quote the studies it examines. */
.post-body blockquote{border-left:2px solid var(--brand); margin:1.5em 0;
  padding:.2em 0 .2em 1.1em; font-style:normal; color:var(--text-2)}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body img{max-width:100%; height:auto}
/* Border only on images actually inserted into a post. WordPress stamps those
   with wp-image-N, which excludes avatars, smilies and theme furniture that were
   all picking up a frame they did not want. */
.post-body img[class*="wp-image-"]{border:1px solid var(--rule)}
/* Alignment and caption classes come from the posts, not from this theme. The
   editor wrote them in 2010-2013 and no rename here can reach them, so they are
   styled rather than ignored. */
.post-body .aligncenter{display:block; margin-left:auto; margin-right:auto}
.post-body .alignleft{float:left; margin:.3em 1.4em .8em 0}
.post-body .alignright{float:right; margin:.3em 0 .8em 1.4em}
.post-body .alignnone{display:block}
.post-body .wp-caption{max-width:100%; margin:0 0 1.3em}
.post-body .wp-caption img{margin:0}
.post-body .wp-caption-text{font-family:var(--display); font-size:13.5px; color:var(--muted);
  line-height:1.5; margin:.5em 0 0}
/* A float has to be released before the next heading, or a short paragraph beside
   a tall image pulls the following section up alongside it. */
.post-body h2, .post-body h3, .post-foot{clear:both}
@media (max-width:620px){
  /* A floated image in a 320px column leaves a two-word measure beside it. */
  .post-body .alignleft, .post-body .alignright{float:none; display:block; margin:0 0 1.1em}
}
.post-body table{border-collapse:collapse; margin:0 0 1.3em}
.post-body td, .post-body th{border:1px solid var(--rule); padding:6px 10px; text-align:left}

/* Links in running text. This was colour plus a --rule hairline, and neither
   carried the link: --link measures 1.37:1 against the body text beside it,
   where colour alone needs 3:1, and the hairline is 1.29:1 on paper, a value
   this palette files as decorative. A real underline in --brand is 10.66:1; the
   offset drops it clear of EB Garamond's descenders, and it survives a link
   wrapping across two lines, which a border-bottom on an inline element does not
   reliably do. */
.post-body a{color:var(--link); text-decoration:underline; text-decoration-color:var(--brand);
  text-decoration-thickness:1px; text-underline-offset:.18em}
.post-body a:hover{text-decoration-thickness:2px}

/* ---- titles and meta ---------------------------------------------------- */
.post-title{font-family:var(--book); font-weight:400; color:var(--heading); font-size:31px;
  line-height:1.18; letter-spacing:-0.005em; margin:0 0 .25em; max-width:32ch}
.post-title a{color:inherit; text-decoration:none}
.post-title a:hover{text-decoration:underline; text-decoration-color:var(--brand);
  text-underline-offset:.12em}
/* Dates, bylines, categories: utility type, quiet, in the sans. */
.post-meta{font-family:var(--display); font-size:13px; letter-spacing:.04em; color:var(--muted);
  line-height:1.6; margin:0 0 1.1em}
.post-meta a{color:var(--link); text-decoration:none}
.post-meta a:hover{text-decoration:underline}
.post-foot{font-family:var(--display); font-size:13px; letter-spacing:.04em; color:var(--muted);
  line-height:1.7; margin:2em 0 0; padding-top:1em; border-top:1px solid var(--rule);
  max-width:66ch}
.post-foot a{color:var(--link); text-decoration:none}
.post-foot a:hover{text-decoration:underline}

/* ---- the index ---------------------------------------------------------- */
/* Seventeen posts over thirteen years, so the list is the archive as much as it
   is a front page. Each entry gives the title, the date and enough of the
   opening to decide by. */
.post-list{list-style:none; margin:0; padding:0}
.post-list > li{margin:0 0 clamp(30px,4vw,44px); padding:0 0 clamp(30px,4vw,44px);
  border-bottom:1px solid var(--rule)}
.post-list > li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.post-list .post-title{font-size:26px}
.post-excerpt{font-family:var(--book); font-size:18px; line-height:1.62; color:var(--text-2)}
.post-excerpt p{max-width:66ch; margin:0 0 .7em}
.more-link{font-family:var(--display); font-size:14px; font-weight:500; color:var(--link);
  text-decoration:none}
.more-link:hover{text-decoration:underline; text-underline-offset:.16em}

/* Between-page and between-post navigation. */
.pager{display:flex; justify-content:space-between; gap:20px; margin:clamp(32px,5vw,54px) 0 0;
  font-family:var(--display); font-size:14px}
.pager a{color:var(--link); text-decoration:none}
.pager a:hover{text-decoration:underline; text-underline-offset:.16em}
/* Both halves carry a post title, and two long titles side by side will meet in
   the middle without a cap. .pager-next also has to hold the right-hand edge when
   it is the only one present, which happens at both ends of the archive. */
.pager-prev, .pager-next{max-width:46%}
.pager .pager-next{margin-left:auto; text-align:right}

/* ---- sidebar ------------------------------------------------------------
   Rendered by sidebar.php rather than by widgets. On the old install these were
   five drag-and-drop widgets, two of which earned nothing: Recent Comments was
   empty because comments require an account, and Meta advertised the login URL
   that WPS Hide Login exists to hide. */
/* 16.5px, up from 14.5. The sidebar is not decoration here: the categories are the
   real index of a blog that files by method rather than by topic, and a reader
   scanning thirty terms for the one they want is reading, not glancing. Jost has a
   large x-height, so 16.5 sits close to the 19px EB Garamond beside it without
   competing with it. */
.blog-side{font-family:var(--display); font-size:16.5px; color:var(--text-2); line-height:1.5}
.blog-side section{margin:0 0 30px}
/* Uppercase at .13em tracking is legible a step lower than running text, but 12.5px
   was below where that holds. */
.side-title{font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule);
  padding-bottom:7px; margin:0 0 12px}
.blog-side ul{list-style:none; margin:0; padding:0}
.blog-side li{margin:0 0 9px}
.blog-side a{color:var(--link); text-decoration:none}
.blog-side a:hover{text-decoration:underline; text-underline-offset:.14em}
/* Categories run to about thirty terms, which is a wall as a list and reads as a
   set inline. Ordered by name, not by count, so it stays alphabetical and
   findable. */
.side-terms{display:flex; flex-wrap:wrap; gap:7px 13px}
.side-terms li{margin:0}

.side-search label{display:block; margin:0 0 6px}
.side-search input[type="search"]{width:100%; box-sizing:border-box; font:inherit;
  font-size:16px; padding:9px 11px; border:1px solid var(--rule); border-radius:2px;
  background:#FFFFFF; color:var(--text)}
.side-search input[type="search"]:focus-visible{outline:2px solid var(--brand); outline-offset:1px}

/* ---- comments ------------------------------------------------------------
   Registration is required to comment and none have been left, so this is
   rendered only when there is something to render. */
.comments{margin:clamp(36px,5vw,56px) 0 0; max-width:66ch}
.comments h2{font-family:var(--book); font-weight:400; color:var(--heading); font-size:22px;
  margin:0 0 .8em}
.comment-list{list-style:none; margin:0; padding:0}
.comment-list li{margin:0 0 1.4em; padding:0 0 1.4em; border-bottom:1px solid var(--rule)}
.comment-note{font-family:var(--display); font-size:14px; color:var(--muted)}

/* ---- search and 404 ----------------------------------------------------- */
.page-head{margin:0 0 clamp(24px,3vw,36px)}
.page-head h1{font-family:var(--book); font-weight:400; color:var(--heading); font-size:31px;
  line-height:1.18; margin:0 0 .2em}
.page-head p{font-family:var(--display); font-size:14px; color:var(--muted); margin:0}

/* ---- small screens ------------------------------------------------------ */
@media (max-width:860px){
  .blog-cols{grid-template-columns:minmax(0,1fr)}
  /* The sidebar becomes an appendix rather than a column: it is reference, and
     on a phone the post is what was asked for. */
  .blog-side{border-top:1px solid var(--rule); padding-top:26px}
}
@media (max-width:700px){
  .post-body{font-size:18px; line-height:1.65}
  .post-title{font-size:26px}
  .post-list .post-title{font-size:23px}
  .blog-head{padding-top:22px}
}