/* Brain Bytes — blog-only styles (Ben-Day / pop-art sub-brand).
   Shared chrome/tokens live in site.css, loaded BEFORE this file.
   Ink is brand-tinted (deep navy #2d5a7b) rather than pure black, so the
   comic zone reads as the same brand as the rest of the site. */
:root{ --accent:#4682b4; --ink:#2d5a7b; }

/* Ubuntu Condensed — brand display face for blog titles (self-hosted). */
@font-face{
  font-family:'Ubuntu Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/ubuntu-condensed.ttf') format('truetype');
}
.blog-title, .blog-card h2, .e-content h2{
  font-family:'Ubuntu Condensed','Ubuntu',sans-serif; letter-spacing:.01em;
}
.blog-title{ color:var(--ink); font-size:2.4rem; line-height:1.05; }

/* Comic-panel framing: bold ink border + hard offset shadow (no blur). */
.comic-frame{ border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:#fff; }

/* Ben-Day halftone divider (brand-tinted dots). */
.halftone-rule{ height:12px; margin:1.6em 0;
   background-image:radial-gradient(rgba(45,90,123,.30) 1.3px, transparent 1.6px);
   background-size:8px 8px; }

/* Comic narration / caption box (dek + figure captions). */
.comic-caption{ background:#fff3b0; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
   padding:.7em 1em; margin:1.3em 0; font-style:italic; color:#3a3a2a; }

/* Full-width article splash. */
.blog-splash{ display:block; width:100%; height:auto; margin:1.4em 0; }

/* Post list as comic-panel cards. */
/* min(100%,300px) so a single card never forces a min-width wider than the
   viewport at 320px (SC 1.4.10 reflow). */
.blog-grid{ list-style:none; padding:0; margin:1.5em 0 0;
   display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:2em; }
.blog-card{ background:#fff; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
   transition:transform .08s ease, box-shadow .08s ease; }
.blog-card:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.blog-card a{ display:block; text-decoration:none; color:inherit; }
.blog-card .thumb{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
   border-bottom:4px solid var(--ink); background:#eee; }
.blog-card .thumb.placeholder{ background-color:#dfe7ee;
   background-image:radial-gradient(rgba(70,130,180,.45) 2px, transparent 2.4px); background-size:12px 12px; }
.blog-card .card-body{ padding:.9em 1.1em 1.2em; }
.blog-card h2{ margin:.1em 0 .3em; font-size:1.35em; line-height:1.1; color:var(--ink); }
.blog-card .date{ color:#5b6672; font-size:.85em; margin:0 0 .5em; }
.blog-card .dek{ margin:0; color:#555; }

/* ===== Article body ===== */
.e-content{ line-height:1.75; font-size:1.05em; color:#34404a; }
.e-content h2{ margin-top:1.9em; color:var(--ink); font-size:1.6em; }
.e-content h3{ color:var(--ink); }
.e-content p{ margin:1em 0; }
/* Prose links: darker steel-blue (AA contrast) + underline so links are
   distinguishable without relying on colour (SC 1.4.1 / 1.4.3). */
.e-content a{ color:#3a6d96; text-decoration:underline; }
.e-content img{ display:block; max-width:100%; height:auto; margin:1.5em auto;
   border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
.e-content ul, .e-content ol{ margin:1em 0; padding-left:1.4em; }
.e-content li{ margin:.35em 0; }
.e-content blockquote{ border-left:4px solid var(--ink); margin:1.5em 0; padding:.2em 0 .2em 1.2em;
   color:#4a5560; font-style:italic; }
.e-content pre{ background:#f6f8fa; padding:1em; border-radius:6px; overflow:auto; }
.e-content code{ background:#f6f8fa; padding:.1em .35em; border-radius:3px; font-size:.95em; }
.e-content pre code{ background:none; padding:0; }
.e-content figure{ margin:1.6em 0; }
.e-content figcaption{ color:#5b6672; font-size:.9em; text-align:center; margin-top:.4em; }

/* Citations (org-cite superscript numeric) + bibliography (citeproc CSL). */
.e-content sup a, .e-content .citation a{ color:#3a6d96; text-decoration:none; font-weight:500; }
.e-content .csl-bib-body{ margin:1em 0 0; font-size:.92em; color:#4a5560; }
.e-content .csl-entry{ margin:.55em 0; padding-left:1.8em; text-indent:-1.8em; line-height:1.5; }
.e-content .csl-entry a{ word-break:break-word; }

/* Mastodon (and similar) embed fallback → a comic "discuss" panel. */
.mastodon-thread{ display:inline-block; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
   background:#fff; padding:.55em 1em; margin:1.5em 0; font-weight:500;
   color:var(--ink); text-decoration:none; }
.mastodon-thread:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
/* Once emfed hydrates <a.mastodon-thread> into an <ol class="toots">, hand the
   embed back to emfed's own toots.css: strip the article's Ben-Day list-indent,
   list/paragraph margins, image frame, and inflated typography so it renders as
   on ianfitzpatrick.eu.  Selectors out-specify .e-content ol/li/img/p; emfed's
   own rules (loaded after) still win where they apply. */
.e-content ol.toots{ margin:1.5em 0; padding:0; list-style:none; max-width:80%;
                     font-size:.95rem; line-height:1.45; color:#242424; }
.e-content .toots li{ margin:0; }
.e-content .toots p{ margin:.4em 0; }
.e-content .toots img{ border:0; box-shadow:none; margin:0; }
/* Avatar must stay 46x46 (our .e-content img{height:auto} was stretching it to
   the source image's size); boost avatars are 23x23. */
.e-content .toots .avatar{ width:46px; height:46px; object-fit:cover; max-width:none; }
.e-content .toots .boost .avatar{ width:23px; height:23px; }
/* Small screens: emfed floats the timestamp right, where it overlaps the name
   column. Float the avatar left instead and stack timestamp / name / @user
   beside it, with the toot body cleared below. */
@media (max-width:640px){
  /* Flex column so the header can be re-ordered name / timestamp / @user
     (emfed's DOM has the timestamp first).  display:contents flattens .user so
     the avatar, name and @user share the toot's flex flow; the avatar is
     absolutely placed so it spans the three header lines. */
  .e-content .toots .toot{
    position:relative; display:flex; flex-direction:column;
    padding-left:calc(1rem + 46px + .7rem);
  }
  .e-content .toots .toot .user{ display:contents; }
  .e-content .toots .toot .avatar{ position:absolute; left:1rem; top:1rem; margin:0; }
  .e-content .toots .toot .display-name{ order:1; }
  .e-content .toots .toot .permalink{ order:2; float:none; }
  .e-content .toots .toot .username{ order:3; }
  /* body + media go full-width below the header (pull back past the avatar). */
  .e-content .toots .toot .body{ order:4; margin-left:calc(-46px - .7rem); }
  .e-content .toots .toot .attachment{ order:5; margin-left:calc(-46px - .7rem); }
}