/* =====================================================
   Simple blue-and-white blog
   Colours & fonts live in the variables right below.
   ===================================================== */
:root {
  --bg:     #ffffff;
  --text:   #000000;
  --muted:  #777777;
  --link:   #0000ee;   /* classic hyperlink blue */
  --line:   #0000ee;
  --hair:   #dddddd;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;

  --width:  620px;     /* text column */
  --gutter: 8px;       /* space between side-by-side images */

  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
}
a, a:visited { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { background: var(--link); color: var(--bg); text-decoration: none; }
img { border: 0; max-width: 100%; height: auto; }

#page { max-width: var(--width); margin: 0 auto; padding: 32px 0; }

/* ---------- header ---------- */
#header { margin-bottom: 40px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
#blog-title { margin: 0; font-size: 22px; font-weight: bold; line-height: 1.2; }
#blog-description { margin: 4px 0 0; color: var(--muted); }

/* ---------- posts ---------- */
.post { margin: 0 0 48px; padding-bottom: 48px; border-bottom: 1px solid var(--hair); }
.post:last-child { border-bottom: 0; padding-bottom: 0; }
.post-date { margin: 0; font-size: 13px; color: var(--muted); }
.post-title { margin: 2px 0 16px; font-size: 20px; font-weight: bold; line-height: 1.25; }
.post-title a:hover { background: var(--link); }

.cover { display: block; margin: 0 0 16px; }

.post-body p, .post-body ul, .post-body ol { margin: 0 0 1em; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { margin: 1.5em 0 .5em; line-height: 1.25; }
.post-body h1 { font-size: 20px; }
.post-body h2 { font-size: 18px; }
.post-body h3 { font-size: 16px; }
.post-body h4 { font-size: 15px; }
.post-body ul { padding-left: 1.3em; }
.post-body ol { padding-left: 1.6em; }
.post-body li { margin-bottom: .2em; }
.post-body blockquote { margin: 1em 0; padding-left: 12px; border-left: 2px solid var(--line); }
.post-body code { font: 14px var(--mono); }
.post-body pre { font: 13px/1.4 var(--mono); padding: 8px 0; overflow-x: auto; }
.post-body hr { border: 0; border-top: 1px solid var(--hair); margin: 2em 0; }
.post-body table { border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.post-body th, .post-body td { border: 1px solid var(--hair); padding: 4px 8px; text-align: left; vertical-align: top; }
.post-body video, .post-body iframe { display: block; width: 100%; margin: 1em 0; border: 0; }

.post-footer { margin: 1em 0 0; font-size: 13px; color: var(--muted); }
.post-nav { margin: 0; font-size: 14px; }

/* ---------- images ----------
   Size presets — start the image's alt text with a keyword
   (in the editor: click the image -> alt text):
     "small: ..."  1/3 of the column, up to 3 side by side, then wrap
     "medium: ..." 2/3 of the column, fits next to one small image
     "large: ..." / "wide: ..."  full column
   Images with no keyword keep their natural size (max. column width). */
.prose { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--gutter); }
.prose > * { flex: 0 0 100%; min-width: 0; }

.prose img { display: block; width: auto; max-width: 100%; margin: .5em 0; }
.prose > p:has(> img[alt^="small" i])  { flex-basis: calc((100% - 2 * var(--gutter)) / 3); }
.prose > p:has(> img[alt^="medium" i]) { flex-basis: calc((100% - 2 * var(--gutter)) / 3 * 2 + var(--gutter)); }
.prose img[alt^="small" i], .prose img[alt^="medium" i],
.prose img[alt^="large" i], .prose img[alt^="wide" i] { width: 100%; }
.prose img + em { display: block; font-size: 13px; font-style: normal; color: var(--muted); margin-top: -.25em; }

/* ---------- footer ---------- */
#footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
#footer p { margin: 0; }

/* ---------- lightbox (see _includes/lightbox.html) ---------- */
.zoomable { cursor: zoom-in; }
.lightbox {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
  font: 13px var(--font);
  color: #ffffff;
}
.lightbox::backdrop { background: rgba(255, 255, 255, .96); }
.lightbox img { display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); width: auto; height: auto; }
.lightbox .lb-caption { margin: 8px 0 0; padding-right: 4em; color: var(--muted); }
.lightbox .lb-count { position: absolute; right: 0; bottom: 0; color: var(--muted); }

/* ---------- phones ---------- */
@media (max-width: 480px) {
  #page { padding-top: 20px; }
  .prose > p:has(> img[alt^="small" i])  { flex-basis: calc((100% - var(--gutter)) / 2); }
  .prose > p:has(> img[alt^="medium" i]) { flex-basis: 100%; }
}