/* Chasing Myths: the 2014 blog, rebuilt.
   2014 was Blogger's "Minima" template turned white: black Trebuchet text,
   small spaced-out capitals for headings, dotted rules, photos in a thin
   grey frame. Values come from that template; the widths are narrowed so a
   line of text is readable, and it folds to one column on a phone. */

:root {
  --cm-ink: #000;
  --cm-paper: #fff;
  --cm-rule: #777;
  --cm-quiet: #555;
  --cm-font: "Trebuchet MS", Trebuchet, "Ubuntu", "Noto Sans", Verdana, sans-serif;
  --cm-wide: 1100px;
  --cm-side: 240px;
  --cm-gap: 48px;
}

html { background: var(--cm-paper); }
body {
  margin: 0;
  background: var(--cm-paper);
  color: var(--cm-ink);
  font-family: var(--cm-font);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--cm-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* Header: James's logo, centred where the banner was, on the white page with
   no border (Adam chose it on 23 Oct 2026, option 2 in Mockup/logo-options/).
   340px tall on a desktop, and never more than 70% of a phone's width. */
.cm-header { max-width: var(--cm-wide); margin: 0 auto; padding: 24px 16px 8px; }
.cm-header .wp-block-image { margin: 0; padding: 20px 16px; text-align: center; }
.cm-header img { display: block; width: 340px; max-width: 70vw; height: auto; margin: 0 auto; }

/* Two columns: posts, then the sidebar on the right */
.cm-wrap {
  max-width: var(--cm-wide);
  margin: 0 auto;
  padding: 0 16px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cm-side);
  gap: var(--cm-gap);
  align-items: start;
}
.cm-main { min-width: 0; }

/* Posts */
.cm-post { padding: 0 0 2em; margin: 0 0 2em; border-bottom: 1px dotted var(--cm-rule); }
.cm-post:last-child { border-bottom: 0; }
.cm-date,
.wp-block-post-date {
  margin: 1.5em 0 .4em;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cm-quiet);
}
.wp-block-post-title { margin: 0 0 .6em; font-size: 1.4em; font-weight: bold; line-height: 1.3; }
.wp-block-post-title a { color: var(--cm-ink); }
.wp-block-post-content > p { margin: 0 0 1em; }
.wp-block-post-content h3 { font-size: 1.1em; margin: 1.5em 0 .5em; }

/* Photos in a post: the full width of the text, a thin grey frame, the
   caption under it. Small copies the archive kept are stretched to match. */
.wp-block-post-content .wp-block-image { display: block; margin: 1.5em 0; text-align: center; }
.wp-block-post-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  padding: 4px;
  border: 1px solid var(--cm-rule);
  background: var(--cm-paper);
  box-sizing: border-box;
}
.wp-block-post-content .wp-block-image figcaption {
  margin: .5em auto 0;
  max-width: 36em;
  font-size: 14px;
  color: var(--cm-quiet);
}
.wp-block-post-content blockquote { margin: 1em 20px; line-height: 1.4; }

/* Photography: each gallery under its heading, photos in their own shape,
   three across, framed like the photos in a post */
.cm-gallery-title { margin: 1.5em 0 .6em; font-size: 1.2em; font-weight: bold; line-height: 1.3; }
.cm-gallery { columns: 3 200px; column-gap: 16px; margin: 0 0 2em; }
.cm-gallery .wp-block-image { break-inside: avoid; margin: 0 0 16px; }
.cm-gallery img {
  display: block;
  width: 100%;
  height: auto;
  padding: 4px;
  border: 1px solid var(--cm-rule);
  background: var(--cm-paper);
  box-sizing: border-box;
}

/* Older and newer posts */
.cm-pager { display: flex; justify-content: space-between; gap: 16px; padding: 1em 0; font-size: 14px; }
.cm-pager .cm-home { text-align: center; flex: 1; }

/* Sidebar */
.cm-side { font-size: 14px; line-height: 1.5; }
.cm-side .wp-block-group { padding: 0 0 1.5em; margin: 0 0 1.5em; border-bottom: 1px dotted var(--cm-rule); }
.cm-side h2 {
  margin: 1.5em 0 .75em;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cm-side p { margin: 0 0 .75em; }
.cm-side .wp-block-image { margin: 0 0 .75em; }
.cm-side ul { list-style: none; margin: 0; padding: 0; }
.cm-side li { margin: 0 0 .3em; }
.cm-side details summary { cursor: pointer; }
.cm-side details ul { margin: .3em 0 .5em 1em; }

/* Footer */
.cm-footer {
  clear: both;
  padding: 16px 16px 40px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cm-quiet);
}

/* A phone: one column, the sidebar after the posts */
@media (max-width: 800px) {
  .cm-wrap { grid-template-columns: 1fr; gap: 0; }
  .cm-side { border-top: 1px dotted var(--cm-rule); padding-top: 1em; }
}

/* WordPress's own wrappers, so the theme draws exactly as the approved mockup.
   Everything above this line is the mockup's stylesheet, unchanged. */

.wp-site-blocks { padding: 0; }

/* The logo: its shape held while it loads so the page does not jump.
   build-theme.py stops if logo.png's shape is not this. */
.cm-header .cm-logo img { aspect-ratio: 680 / 681; }

/* WordPress centres a photo as a table, which shrinks it to its own width;
   here a photo is a block the width of the text, its caption under it. */
.wp-block-post-content .wp-block-image.aligncenter { display: block; margin-left: 0; margin-right: 0; }
.wp-block-post-content .wp-block-image.aligncenter > figcaption,
.wp-block-post-content .wp-block-image .aligncenter > figcaption { display: block; }

/* A query loop is a list; here it is just posts, one after another. */
.wp-block-post-template { list-style: none; margin: 0; padding: 0; }

/* Each post ends on a dotted rule, the last one too, before the pager. */
.cm-post:last-child { border-bottom: 1px dotted var(--cm-rule); }

/* Newer on the left, Home in the middle, Older on the right, whichever exist. */
.cm-pager,
.cm-pagerow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  padding: 1em 0;
  font-size: 14px;
}
.cm-pagerow .wp-block-query-pagination { display: contents; }
.cm-pager .post-navigation-link-next,
.cm-pagerow .wp-block-query-pagination-previous { grid-column: 1; justify-self: start; }
.cm-pager .cm-home,
.cm-pagerow .cm-home { grid-column: 2; grid-row: 1; margin: 0; text-align: center; }
.cm-pager .post-navigation-link-previous,
.cm-pagerow .wp-block-query-pagination-next { grid-column: 3; grid-row: 1; justify-self: end; }
.cm-pager .post-navigation-link-next,
.cm-pagerow .wp-block-query-pagination-previous { grid-row: 1; }

/* A year's page: every post that year, title and month. */
.cm-archive-title { margin: 1.5em 0 .6em; font-size: 1.4em; font-weight: bold; line-height: 1.3; }
.cm-year .wp-block-post-template > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1em;
  padding: .5em 0;
  border-bottom: 1px dotted var(--cm-rule);
}
.cm-year .wp-block-post-title { margin: 0; font-size: 1em; }
.cm-year .wp-block-post-date { margin: 0; white-space: nowrap; }

/* The sidebar's archive list: the year, then how many posts in brackets. */
.cm-side .wp-block-archives { list-style: none; margin: 0; padding: 0; }

/* A gallery: WordPress lays one out as a row of cropped tiles; here the photos
   keep their shape and flow in three columns, as the mockup. WordPress's own
   rule carries an id selector, so this one matches it. */
.wp-block-gallery.has-nested-images.cm-gallery { display: block; columns: 3 200px; column-gap: 16px; }
.wp-block-gallery.has-nested-images.cm-gallery figure.wp-block-image:not(#individual-image) {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  break-inside: avoid;
}
.wp-block-gallery.has-nested-images.cm-gallery figure.wp-block-image img { width: 100%; height: auto; object-fit: initial; }

/* The Instagram feed at the foot of the sidebar, drawn by Smash Balloon's
   plugin to the mockup in Mockup/instagram-feed/: nine square photos, three
   across at every width, 4px apart (load.php sets those), straight under the
   heading. The plugin's own 12px above and below the grid is taken out. */
.cm-insta #sb_instagram { margin: 0 0 .75em; }
.cm-insta #sb_instagram #sbi_images { padding: 0; }
.cm-insta .sbi_photo:hover img { opacity: .85; }

/* With no photos to show (before James connects his account, or if Instagram
   stops answering and nothing is held) the empty grid is left out, and the
   heading and the follow link stay: since Follow Me went (Adam, 23 Oct 2026)
   this is the sidebar's only Instagram link. An administrator still sees the
   plugin's own message saying why, and the plugin emails the site's admin
   when a feed has a problem. */
.cm-insta #sb_instagram:not(:has(.sbi_item, #sbi_mod_error)) { display: none; }