/* Project page layout, 2026-07-31.
   Card top-left, the words to its right at two thirds, a structured link table
   below. Written against the ported rmarkdown.css rather than replacing it. */

.workHeader {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}

.workCard img {
  width: 100%;
  max-width: 170px;
  border: 1px solid var(--rule-color, #E2DCD2);
  display: block;
}

.workBody h1.workTitle {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.7rem;
  line-height: 1.2;
}

.workBody .workCitation {
  font-size: 0.95rem;
  color: var(--muted-color, #5C554B);
  margin-bottom: 1.1rem;
}

.workBody .workAbstract {
  margin-bottom: 0;
}

/* The links table. Grouped by what a reader wants to DO, so it reads as a
   route to the paper rather than as an undifferentiated list. */
table.workLinks {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 2rem 0;
  font-size: 0.95rem;
}

table.workLinks th {
  text-align: left;
  width: 9rem;
  padding: 0.5rem 0.9rem 0.5rem 0;
  vertical-align: baseline;
  white-space: nowrap;
  font-weight: 600;
  border-bottom: 1px solid var(--rule-color, #E2DCD2);
  border-top: none;
}

table.workLinks td {
  padding: 0.5rem 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule-color, #E2DCD2);
  border-top: none;
}

table.workLinks td a + a::before {
  content: " · ";
  color: var(--muted-color, #5C554B);
}

.workFigure, .workFigure-landscape, .workFigure-portrait {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule-color, #E2DCD2);
  padding-top: 1.5rem;
}

.workFigure img, .workFigure-landscape img, .workFigure-portrait img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem auto;
}

.workFigure .workGloss, .workFigure-landscape .workGloss, .workFigure-portrait .workGloss {
  font-size: 0.95rem;
  color: var(--muted-color, #5C554B);
  max-width: 60ch;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .workHeader { grid-template-columns: 1fr; }
  .workCard img { max-width: 150px; }
}

.workFigure .workGloss .figureLabel {
  font-weight: 600;
  color: var(--body-color, #2E2A25);
}

/* Gallery cards, 2026-07-31.
   The cards are 1000x1000 and rmarkdown.css sets `width: auto` on them with no
   cap. Bootstrap 3 supplied the missing ceiling; Bootstrap 5's Reboot does not
   set max-width on a bare img, so under the new theme every card rendered at
   its full 1000px and burst out of the 24% column. Capped here explicitly
   rather than depending on any framework's baseline, which is what let this
   regress twice. */
.gallerySection .galleryItems {
  display: grid;
  /* Four per row, which at the 1140px band puts each card near 255px:
     about 150% of the auto-fill size it replaced. */
  /* minmax(0, 1fr), not 1fr: a bare 1fr will not shrink below its content
     width, so the long citations forced unequal columns (measured at
     81px / 250px / 72px / 72px). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  justify-content: start;
}

.gallerySection .galleryItems .galleryItem {
  width: auto;
}

.gallerySection .galleryItems .galleryItem .galleryItemImage {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* No hex yet: a placeholder of the same footprint keeps the grid even and
   makes the missing artwork legible rather than invisible. */
.softwareTile.noHex {
  justify-content: center;
  min-height: 150px;
  border: 1px dashed var(--rule-color, #E2DCD2);
  border-radius: 2px;
}

@media (max-width: 800px) {
  .softwareGrid { grid-template-columns: repeat(2, 1fr); }
  .gallerySection .galleryItems { grid-template-columns: repeat(2, 1fr); }
}

/* Square boxes and +20%, 2026-07-31.
   Two of the hand-made hexes are not square (DeclareDesign 988x1143,
   randomizr 1276x1272), which is what made the tiles sit at slightly different
   heights. An explicit 1:1 box fixes the geometry at the layout level, so a
   future asset of any dimension cannot reintroduce it. `contain` for hexes,
   which must not be cropped; `cover` for paper cards, which are already square
   and should fill their box. */
.gallerySection .galleryItems .galleryItem .galleryItemImage {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.softwareTile img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  max-width: 180px;
}

.softwareTile.noHex {
  min-height: 180px;
}

/* Four per row still, but on a wider band than the 1140px text column, which
   is what buys the extra 20% without dropping to three. */
.band.full .bandContent.gallerySection,
.softwareGrid {
  max-width: 1360px;
}

/* Quarto caps its article content column at 612px (measured), and this site
   does its own banding, so the cap has to go or every band is squeezed into a
   sixth of the window. */
main.content {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* The gallery and software grids get a wider band than the 1140px text column.
   Scoped with :has() so reading pages keep their measure. */
.standardPadding .articleBandContent:has(.gallerySection),
.standardPadding .articleBandContent:has(.softwareGrid) {
  max-width: 1360px;
}

/* Quarto lays the page out as a grid with margin columns, so main.content sits
   in a fixed track (measured at 1135px even under page-layout: full). The site
   bands do their own centring and capping, so the track is released here. */
body .page-columns {
  display: block;
}

main.content {
  width: 100%;
  max-width: none;
}

/* First-page thumbnail. Portrait, so it reads as a paper rather than a swatch,
   and the whole image is the link to the PDF. */
.workCard img {
  max-width: 100%;
  aspect-ratio: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.workHeader {
  grid-template-columns: 220px 1fr;
}

/* Links as one quiet row rather than a table. No taxonomy to argue with, and
   the order runs from the paper itself outwards to the apparatus. */
.workLinks {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  align-items: baseline;
  margin: 1.5rem 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-color, #E2DCD2);
  font-size: 0.95rem;
}

.workLinks a:first-child {
  font-weight: 600;
}

/* The links row already closes with a rule, so the figure block must not open
   with a second one. */
.workFigure, .workFigure-landscape, .workFigure-portrait {
  border-top: none;
  padding-top: 0;
  margin-top: 1rem;
}

/* A display figure is an illustration, not a poster: centred so it does not
   dwarf the words above it. The CAP is set by orientation below, not here:
   two rules setting max-width on the same element meant the base one kept
   winning and landscape figures rendered at 720px instead of 820px. */
.workFigure img, .workFigure-landscape img, .workFigure-portrait img {
  margin-left: auto;
  margin-right: auto;
}

/* A correction notice must be impossible to skim past: the point of merging the
   corrigendum into the article is that nobody reads the 2014 result as current. */
.correctionNotice {
  border-left: 3px solid var(--primary, #8C3A2E);
  background: var(--code-bg, #F4F0E8);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-size: 0.95rem;
}

.correctionNotice p:last-child {
  margin-bottom: 0;
}

/* ---- style pass, 2026-07-31 ---- */

/* No underlines. brand.scss styles main links with an offset underline, which
   reads as citation-like in prose but as clutter in the nav and the link row.
   Underline on hover only, so the affordance survives. */
.menuItem,
.galleryItemLabel,
.workLinks a,
.workCitation a,
.galleryItemDescription a,
.softwareTile,
.productName {
  text-decoration: none;
}

.menuItem:hover,
.galleryItemLabel:hover,
.workLinks a:hover,
.workCitation a:hover,
.galleryItemDescription a:hover {
  text-decoration: underline;
}

/* brand.scss balances heading lines, which suits a short display heading and
   works against a long paper title: it was wrapping far narrower than the
   citation and abstract beneath it. The title should run the same measure as
   the rest of the column. */
.workBody h1.workTitle {
  /* `wrap`, not `normal`: text-wrap takes wrap | nowrap | balance | pretty |
     stable, so `normal` was invalid, silently dropped, and brand.scss's
     `balance` kept evening the lines out into a short second row. */
  text-wrap: wrap;
  max-width: none;
}

/* One size cannot suit a wide panel plot and a tall multi-panel column, so the
   cap follows the figure's own orientation: landscape is limited by width,
   portrait by height, and both stay inside the text column. */
.workFigure-landscape img {
  max-width: 820px;
  width: auto;
  max-height: none;
}

.workFigure-portrait img {
  max-width: 100%;
  width: auto;
  max-height: 900px;
}

/* Captions carry the paper's full Note: apparatus now, so they need room. */
.workFigure .workGloss, .workFigure-landscape .workGloss, .workFigure-portrait .workGloss {
  max-width: none;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.9rem;
}

/* ---- 2026-07-31, small notes ---- */

/* The gallery caption (galleryItemDescription) was 12px, too small to read the
   bolded title or the DOI that the original site styled so well. */
.gallerySection .galleryItems .galleryItem .galleryItemDescription {
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.6rem 0.75rem 0.9rem 0.75rem;
}

.gallerySection .galleryItems .galleryItem .galleryItemDescription b {
  font-weight: 600;
}

/* A slim pipe between links, drawn as a border on the element rather than a
   pseudo-element: a 1px pseudo in a light warm grey rendered so faintly it read
   as no separator at all. */
/* Space, not pipes (2026-08-01). The pipes were a border-right on each link,
   so a separator BELONGED to its link and rendered at the end of a wrapped
   line with nothing after it. They also cost 2.3rem per link in padding, which
   is what forced the wrap in the first place: at ten links the same row fits on
   one line without them. Alex asked for the pipes when a row held four or five
   links, where they read well and never wrapped.

   The spacing is margin on the anchors, NOT flex `column-gap`. Pandoc wraps a
   raw HTML div's contents in a <p>, so .workLinks holds exactly one flex child
   and a column-gap applies between nothing: the links rendered a single space
   apart. The old pipes hid this, being padding on each <a> and so indifferent
   to the structure.

   A label is a unit: without `nowrap`, "Pre-analysis plan 2" breaks across
   lines as "Pre-" and "analysis plan 2", which reads as two broken links. */
.workLinks a {
  white-space: nowrap;
  margin-right: 1.5rem;
}

.workLinks a:last-child {
  margin-right: 0;
}

/* Note card titles are links too. */
.noteCardTitle a {
  text-decoration: none;
}

.noteCardTitle a:hover {
  text-decoration: underline;
}

/* One gallery pattern for papers, software and notes (Alex, 2026-07-31).
   The shared rules are keyed on .galleryItems rather than on .gallerySection,
   so every gallery inherits the same square card and caption. */
.galleryItems {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  justify-content: start;
}

.galleryItems .galleryItem {
  width: auto;
  border: 1px solid #f0f0f0;
}

.galleryItems .galleryItemImage {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.galleryItems .galleryItemDescription b {
  font-weight: 600;
}

.galleryItems .galleryItemDescription {
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.6rem 0.75rem 0.9rem 0.75rem;
}

/* A package with no hex yet gets a square of the same footprint carrying its
   name, so the grid stays even and the gap is legible rather than being a
   short label floating in white space. */
.galleryItems .galleryItemLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  font-weight: 600;
  font-size: 1.15rem;
  background: var(--code-bg, #F4F0E8);
  border-bottom: 1px solid var(--rule-color, #E2DCD2);
}

/* A hex must not be cropped, and a note's first page is portrait, so both are
   fitted inside the square rather than filled to it. */
.softwareGallery .galleryItemImage,
.noteGallery .galleryItemImage {
  object-fit: contain;
  object-position: top center;
  background: #fff;
}

.softwareGallery .galleryItems,
.noteGallery .galleryItems {
  max-width: 1360px;
}

@media (max-width: 800px) {
  .galleryItems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Home bands, 2026-07-31. The old band blue (#75aadb) with gold links belonged
   to the cosmo palette and fought everything once the brand changed. Teal is
   the second colour from Alex's own presentation template, so the site and his
   slides now agree. */
#homeContent .band.blue {
  background-color: #004c6d;
  color: #FBFAF7;
}

/* The magenta only reads against teal at 2px, and at 2px with bold text it
   shouts. A hairline in the band's own text colour says "link" as clearly and
   matches how links behave on every other page. */
#homeContent .blue a {
  color: #FBFAF7;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: rgba(251, 250, 247, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

#homeContent .blue a:hover {
  text-decoration-color: #FBFAF7;
}

/* The footer band carried the same blue. */
#rStudioFooter.band.full {
  background-color: #FBFAF7;
  color: #5C554B;
  border-top: 1px solid #E4E0D8;
  font-size: 15.2px;
}

/* The copyright line is gone, so the logo row centres rather than being
   pushed to one side by space-between. */
#rStudioFooter .bandContent {
  justify-content: center;
}

#rStudioFooter .footerLogo {
  filter: brightness(0) saturate(100%);
  opacity: 0.5;
}

#rStudioFooter .footerLogo:hover {
  opacity: 0.85;
}

/* The header carried a near-white background of its own, so it sat as a white
   strip above the parchment page. */
/* The header now matches the pkgdown bar: parchment ground, a hairline rule,
   the name in the heading serif and the nav in quiet sans. Teal chrome made
   the site and the packages look like two different projects, which was the
   opposite of the point. */
#rStudioHeader,
#rStudioHeader.shrunk {
  background-color: #FBFAF7;
  border-bottom: 1px solid #E4E0D8;
}

/* Measured off a built pkgdown site rather than approximated: the brand is
   Source Serif 4 at 19.2px weight 600, the nav links Source Sans 3 at 15.2px
   weight 400. Teal instead of the near-black, which is Alex's second colour
   and ties the chrome to the identity without shouting. */
#rStudioHeader .productName {
  font-family: "Source Serif 4", Georgia, serif !important;
  font-size: 19.2px;
  font-weight: 600;
  color: #3C444C !important;
}

#rStudioHeader #menu .menuItem {
  font-family: "Source Sans 3", -apple-system, sans-serif;
  font-size: 15.2px;
  font-weight: 400;
  color: #5C554B !important;
  opacity: 1;
}

/* pkgdown lifts a nav item to the primary colour on hover. */
#rStudioHeader #menu .menuItem:hover,
#rStudioHeader .productName:hover {
  color: #a72f5b !important;
}

/* On the home page the band sits directly under the header, so the sliver of
   parchment between two teal blocks reads as a mistake. Flush, and full width,
   which is what "band full" was always meant to be. */
/* The home band goes flush to the header and edge to edge. `#homeContent`
   exists only on the home page, so it is the hook; my earlier `.template-index`
   selector matched nothing, because Quarto's body class is just `quarto-light`.
   The 80px comes from .standardPadding, and the width breakout is the standard
   full-bleed trick for an element inside a centred column. */
#homeContent .band.full {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

#homeContent .band.full .bandContent {
  max-width: 1140px;
  margin: 0 auto;
}

/* (An earlier version of these rules lived here and, having the same
   specificity but appearing later in the file, silently overrode the measured
   pkgdown metrics below. Removed 2026-07-31.) */

/* The home page bibliography, 2026-07-31. The gallery answers "show me the
   work"; this answers "what has he written", which is a scanning task that
   plain text does better than 44 thumbnails. All 44 entries are 21 KB of HTML,
   about a tenth of one card image, so they all render at once: there is nothing
   for lazy loading to save. */
.bibliography {
  max-width: 860px;
  margin: 0 auto;
  padding: 70px 5% 90px;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* reset.css sets `font: inherit` on every element, which silently takes the
   slant off <i> along with everything else. */
.bibEntry i {
  font-style: italic;
}

/* Two levels, as in the CV: the section takes the rule so it reads as the
   heavier break, and the year sits under it without one. */
.bibSection {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  border-bottom: 1px solid #E4E0D8;
  padding-bottom: 5px;
  margin: 46px 0 16px;
}

.bibliography .bibSection:first-child {
  margin-top: 0;
}

/* The year carries what a CV puts in the left margin, so the entries beneath
   it never repeat it. */
.bibYear {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #6B7078;
  margin: 24px 0 9px;
}

/* A hanging indent, so the author name that starts each entry is the only
   thing on the left edge and the list scans down the surnames. */
.bibEntry {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 11px;
  padding-left: 1.6em;
  text-indent: -1.6em;
}

.bibTitle {
  color: #a72f5b;
  text-decoration: none;
}

.bibTitle:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.bibDoi {
  font-size: 0.85em;
  color: #6B7078;
  text-decoration: none;
}

.bibDoi:hover {
  color: #a72f5b;
}

/* The project page is the third destination and the least urgent of the three,
   so it is a marker rather than a fourth run of link text. */
.bibMore {
  color: #D6D1C6;
  text-decoration: none;
  padding-left: 0.15em;
}

.bibMore:hover {
  color: #a72f5b;
}

@media (max-width: 600px) {
  .bibliography { padding: 0 6% 60px; }
  .bibEntry { font-size: 15px; }
}

/* Mobile, 2026-07-31. Measured at a true 390px viewport rather than in headless
   Chrome, which floors its window at 500px and so had been hiding all of this.
   Three things were wrong: the galleries ran two columns that overflowed the
   screen, the project header never collapsed so titles ran off the right edge,
   and the menu button did nothing. */

/* A bare `1fr` will not shrink below its content width, which is why the
   two-column breakpoint overflowed by 30px while the desktop grid, which
   already used minmax(0, 1fr), did not. */
@media (max-width: 800px) {
  .gallerySection .galleryItems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .gallerySection .galleryItems { grid-template-columns: minmax(0, 1fr); }
  .gallerySection .galleryItems .galleryItemDescription { font-size: 15px; }
}

/* The card sits above the text rather than beside it. At 390px a 170px column
   left barely 150px for a title, a citation and an abstract. */
@media (max-width: 700px) {
  .workHeader {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }

  .workCard img {
    max-width: 150px;
  }

  .workBody h1.workTitle {
    font-size: 1.4rem;
  }

  /* The links row wraps to several lines on a narrow screen, and the pipes
     then fall at the start of a line. */
  .workLinksRow {
    row-gap: 0.35rem;
  }
}

/* The open menu is a stack under the bar, not an inline run that overflows it. */
@media (max-width: 1023px) {
  #rStudioHeader #menu #menuItems.showMenu {
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #FBFAF7;
    border: 1px solid #E4E0D8;
    border-top: none;
    padding: 8px 20px 12px;
    min-width: 190px;
    z-index: 50;
  }

  #rStudioHeader #menu {
    position: relative;
  }

  #rStudioHeader .innards {
    position: relative;
  }
}

/* Prose-only pages: the 404 and the redirect stubs. They were using
   .workHeader with no .workCard, so the body landed in the 170px card column
   and wrapped at about 215px. A single class, because pandoc keeps only the
   first class of a raw HTML div. */
.workProse {
  max-width: 640px;
  margin-bottom: 3rem;
}

.workProse h1 {
  margin-top: 0;
  margin-bottom: 0.7rem;
  font-size: 1.7rem;
  line-height: 1.2;
}

/* The abstract is paragraphs now, not one interpolated string. Only the book
   has more than one, but the last must not add a margin under the block. */
.workAbstract p {
  margin-bottom: 0.8rem;
}

.workAbstract p:last-child {
  margin-bottom: 0;
}

/* Notices on a note card. The closed call for proposals must read as closed at
   a glance: someone who skims the card and downloads the PDF should not draft a
   proposal for a call that ended. */
.noteClosed,
.noteSuperseded {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.noteClosed {
  color: #a72f5b;
}

.noteSuperseded {
  color: #6B7078;
}