/* Site-wide overrides layered on top of the theme's style.css, which lives in
   the academimal submodule and is therefore left untouched. */

/* The sidebar does not stick.

   The theme pins the title at top:0 and the nav at top:75px, both with an
   opaque white background and a z-index above the page. Every arrangement
   that keeps that stickiness breaks something, because the portrait lives in
   the same narrow column:
     - portrait inside the sticky box, pinned by its top: the box grows past
       the viewport on a short window and the portrait is stranded below the
       fold for good;
     - pinned by its bottom instead: the portrait is reachable, but the whole
       nav is pushed off the top of the screen;
     - portrait outside the box, nav sticky: the portrait scrolls underneath
       the opaque pinned nav and vanishes behind it.
   The third is what a sticky, opaque element above scrolling content in one
   column will always do. Letting the column scroll normally costs a pinned
   nav and fixes all three at once, at every window size and zoom level. */
.headx {
  position: static;
}


header img.portrait {
  display: block;
  margin-top: 23px;
  max-width: 100%;
  height: auto;
}



/* The secondary nav links (Posts / Policy / Resources / Archive) sit on one
   wrapped line under a quiet label, rather than one per line. */
.navgroup-label {
  margin: 14px 0 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  line-height: 1.07;
}

.navgroup {
  line-height: 1.45;
  margin: 0;
}

.navgroup-sep {
  color: #ccc;
}

/* [PDF] hangs off the venue line; keep it quieter than the title link. */
a.pdflink {
  font-size: 0.9em;
  white-space: nowrap;
}

/* Keep the sidebar a fixed column and let the text take the rest.

   .wrapper is a flex row of header (270px + padding) and section (700px),
   1058px in all. Below that the two must shrink, and a flex item's automatic
   minimum size is its min-content width -- which, for the sidebar, is driven
   by the portrait: the file is 3192px wide and max-width:100% is cyclic, so
   the browser falls back on the intrinsic width. The sidebar therefore
   refused to shrink and ate the text column instead. At a 1024px viewport
   the sidebar stood at 583px and the text at 310px, with the portrait
   blown up to 495px; at 1164px the same page was a correct 351/682 with a
   263px portrait. That is the jump between 110% and 125% zoom.

   min-width:0 removes the intrinsic floor, the fixed basis holds the sidebar
   at its intended width, and the portrait is capped in pixels so it can
   never drive the column again. */
.wrapper > header {
  flex: 0 0 270px;   /* an explicit basis: 'auto' would size it to the short
                        bio on one line, which is ~900px of max-content */
  min-width: 0;
}

.wrapper > section {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 700px;
}

header img.portrait {
  width: 270px;
  max-width: 100%;
}