/* Stage D: visual refinement shared by every page. Loaded after the page's own stylesheet and a11y.css.
   Keeps the site's character (brain-slice banner, grey framed cards, quiet dark navbar, generous white space)
   and removes what looked dated: heavy gradients, cramped small text, a banner that cropped on phones. */

:root {
  --font-body: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --font-post: var(--font-body);
  --font-heading: var(--font-body);
}

/* ---- Type: one sans-serif stack everywhere, so every device shows the same face (Arial metrics) ------------ */
body, h1, h2, h3, h4, h5, h6, .navbar-brand, .blog-post-title,
button, input, select, textarea {
  font-family: var(--font-body);
}

/* ---- Banner: scales down as a whole instead of being cropped, so all six brains show on phones ---------- */
.brain {
  height: auto;
  aspect-ratio: 1000 / 379;
  background-size: 100% 100%;
}
@media (max-width: 767px) {
  .brain {
    margin-top: 3.75em;
  }
}

/* ---- Flat navbar and buttons (the Bootstrap 3 theme adds gradients and shadows) --------------------------- */
.navbar-inverse {
  background-image: none;
  background-color: #222;
  border-color: #111;
  box-shadow: none;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .open > a {
  background-image: none;
  background-color: #000;
  box-shadow: none;
}
.navbar-inverse .navbar-toggle {
  background-image: none;
}
.btn-default,
.btn-primary {
  background-image: none;
  text-shadow: none;
  box-shadow: none;
}
.btn-default {
  background-color: #fff;
  border-color: #c4c4c4;
}
.btn-default:hover,
.btn-default:focus {
  background-color: #ececec;
  border-color: #adadad;
}
.btn-primary {
  background-color: #337ab7;
  border-color: #2b6aa1;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #286090;
  border-color: #204d74;
}

/* ---- Reading comfort -------------------------------------------------------------------------------------- */
.blog-post p,
.blog-post li {
  font-family: var(--font-post);
  font-size: 17px;
  line-height: 1.65;
}
.blog-post p {
  margin-bottom: 1.1em;
}
main p,
main li {
  line-height: 1.6;
}
.blog-post p,
.blog-post li,
main p {
  text-wrap: pretty;
}
h1, h2, h3, h4, .blog-post-title {
  text-wrap: balance;
}
@media (max-width: 767px) {
  .blog-post p,
  .blog-post li {
    font-size: 17px;
    line-height: 1.6;
  }
}

/* ---- Print: just the content ------------------------------------------------------------------------------ */
@media print {
  .navbar, .brain, .blog-sidebar, .skip-link, .pager, .share-row, #sharerow_top, .social-buttons, .cv-download {
    display: none !important;
  }
  body {
    padding-top: 0 !important;
    color: #000;
  }
  .container {
    width: auto !important;
    max-width: 100% !important;
  }
  .blog-main {
    width: 100% !important;
  }
  main :is(p, li, dd, td) a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  img, svg {
    max-width: 100% !important;
    break-inside: avoid;
  }
  .cv-frame {
    display: block !important;
  }
}