/* Public site chrome, ported from the Jekyll minima "callahanrts" skin
   (One Dark palette). Scoped to body.site so it never touches the admin or
   the Tailwind-styled auth pages, which load the same bundle. */
:root {
  --site-text: #abb2bf;
  --site-background: #282c34;
  --site-brand: #61afef;
  --site-grey: #5c6370;
  --site-grey-light: #3e4451;
  --site-grey-dark: #abb2bf;
  --site-spacing: 30px;
  --site-content-width: 800px;
  --site-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body.site {
  margin: 0;
  font: 400 16px/1.5 var(--site-font);
  color: var(--site-text);
  background-color: var(--site-background);
  font-kerning: normal;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

/* Fixed top accent bar */
body.site::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--site-brand);
  z-index: 9999;
}

body.site a {
  color: var(--site-brand);
  text-decoration: none;
}

body.site img { max-width: 100%; vertical-align: middle; }

body.site .wrapper {
  /* Tailwind's preflight makes everything border-box, so the padding lives
     inside this width. The content column still works out to 740px. */
  max-width: var(--site-content-width);
  margin: 0 auto;
  padding: 0 var(--site-spacing);
}

body.site .wrapper::after { content: ""; display: table; clear: both; }

@media screen and (max-width: 800px) {
  body.site .wrapper { padding: 0 calc(var(--site-spacing) * 0.5); }
}

/* Header */
body.site .site-header {
  border-bottom: 1px solid var(--site-grey-light);
  min-height: calc(var(--site-spacing) * 1.865);
  position: relative;
}

body.site .site-title {
  font-size: 26px;
  font-weight: 300;
  line-height: 54px;
  letter-spacing: -1px;
  float: left;
  color: var(--site-grey-dark);
}

body.site .site-nav {
  float: right;
  line-height: 54px;
}

body.site .site-nav .page-link {
  color: var(--site-text);
  line-height: 1.5;
}

body.site .site-nav .page-link:not(:last-child) { margin-right: 20px; }

/* Content */
body.site .page-content {
  display: block;
  padding: var(--site-spacing) 0;
  flex: 1;
}

body.site .page-content a:hover { text-decoration: underline; }

/* Rendered document bodies, matching the Jekyll base typography. Preflight
   zeroes headings, margins and list markers, so each one is restated here. */
.document__body h1,
.document__body h2,
.document__body h3,
.document__body h4,
.document__body h5,
.document__body h6,
.document__body p,
.document__body blockquote,
.document__body pre,
.document__body ul,
.document__body ol,
.document__body figure { margin: 0 0 calc(var(--site-spacing) * 0.5); }

body.site h1, body.site h2, body.site h3,
body.site h4, body.site h5, body.site h6 { font-weight: 400; }

.document__body h1 { font-size: 2em; }
.document__body h2 { font-size: 1.5em; }
.document__body h3 { font-size: 1.17em; }
.document__body h4 { font-size: 1em; }

.document__body ul,
.document__body ol { margin-left: var(--site-spacing); }
.document__body ul { list-style: disc; }
.document__body ol { list-style: decimal; }
.document__body li > ul,
.document__body li > ol { margin-bottom: 0; }

.document__body strong { font-weight: 700; }
.document__body em { font-style: italic; }

.document__body blockquote {
  color: var(--site-grey);
  background: #21252b;
  border-left: 4px solid #c678dd;
  border-radius: 0 8px 8px 0;
  padding: calc(var(--site-spacing) * 0.5);
  font-size: 18px;
  letter-spacing: -1px;
  font-style: italic;
}

.document__body blockquote > :last-child { margin-bottom: 0; }

.document__body code {
  font-size: 15px;
  background: #2c313a;
  border: 1px solid var(--site-grey-light);
  border-radius: 4px;
  padding: 2px 6px;
  color: #e5c07b;
}

.document__body pre {
  font-size: 15px;
  background: #21252b;
  border-left: 3px solid var(--site-brand);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  overflow-x: auto;
}

.document__body pre > code {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
}

.document__body img,
.document__body video { max-width: 100%; height: auto; }

/* Markdown tables. The wrapper scrolls rather than widening the page. */
.document__body table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  font-size: 15px;
}

.document__body th,
.document__body td {
  border: 1px solid var(--site-grey-light);
  padding: 6px 12px;
  text-align: left;
}

.document__body th { background: #21252b; font-weight: 600; }

.document__body > :last-child { margin-bottom: 0; }

/* Home */
body.site .home-intro {
  display: flex;
  gap: calc(var(--site-spacing) * 1.5);
  align-items: flex-start;
  padding: var(--site-spacing) 0;
}

body.site .home-intro-image { flex-shrink: 0; }

body.site .home-intro-image img {
  /* content-box so the border sits outside the 160px, as it does in Jekyll */
  box-sizing: content-box;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--site-grey-light);
}

body.site .home-intro-links {
  display: flex;
  gap: calc(var(--site-spacing) * 0.75);
  margin-top: calc(var(--site-spacing) * 0.75);
  align-items: center;
}

@media screen and (max-width: 600px) {
  body.site .home-intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body.site .home-intro-links { justify-content: center; }
}

/* Social icons, shared by the home intro and the footer */
body.site .social-links { display: flex; gap: calc(var(--site-spacing) * 0.75); align-items: center; }

body.site .social-links a {
  display: flex;
  color: var(--site-grey);
  transition: color 0.15s ease;
}

body.site .social-links a:hover { color: var(--site-brand); text-decoration: none; }
body.site .social-links svg { width: 24px; height: 24px; fill: currentColor; }

/* Documents and category indexes */
body.site .breadcrumb { font-size: 14px; margin-bottom: calc(var(--site-spacing) * 0.5); }
body.site .document > h1,
body.site .category > h1 { font-size: 32px; margin: 0 0 calc(var(--site-spacing) * 0.25); }
body.site .document__description { color: var(--site-grey-dark); margin-top: 0; }
body.site .document .document__body { margin-top: var(--site-spacing); }
body.site .home-intro-content .document__body h1 { margin-bottom: calc(var(--site-spacing) * 0.25); }

body.site .document-list { list-style: none; padding: 0; margin: var(--site-spacing) 0 0; }
body.site .document-list > li {
  padding: calc(var(--site-spacing) * 0.5) 0;
  border-bottom: 1px solid var(--site-grey-light);
}
body.site .document-list > li:last-child { border-bottom: none; }
body.site .document-list h2 { font-size: 20px; margin: 0 0 4px; }
body.site .document-list h2 a { color: var(--site-text); }
body.site .document-list p { margin: 0; color: var(--site-grey); }

body.site .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--site-grey-light);
  color: var(--site-grey-dark);
}

body.site .attachments {
  margin-top: calc(var(--site-spacing) * 1.5);
  display: grid;
  gap: var(--site-spacing);
}
body.site .attachment { margin: 0; }
body.site .attachment img,
body.site .attachment video { max-width: 100%; height: auto; border-radius: 6px; }
body.site .attachment figcaption { font-size: 14px; color: var(--site-grey); margin-top: 6px; }

/* Footer */
body.site .site-footer {
  border-top: 1px solid var(--site-grey-light);
  padding: var(--site-spacing) 0;
  font-size: 15px;
  color: var(--site-grey);
}

body.site .footer-col-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--site-spacing) * 0.5);
  margin-bottom: var(--site-spacing);
}

body.site .footer-col { flex: 1 1 240px; }

body.site .footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-spacing);
}

body.site .site-categories { display: flex; gap: 20px; }
body.site .site-categories .nav-item { color: var(--site-text); }

/* Tags */
body.site .tag-list,
body.site .tag-cloud {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: calc(var(--site-spacing) * 0.5) 0 0;
}

body.site .tag-cloud { margin-top: var(--site-spacing); }

body.site .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--site-grey-light);
  border-radius: 999px;
  font-size: 14px;
  color: var(--site-text);
}

body.site .page-content .tag:hover {
  border-color: var(--site-brand);
  color: var(--site-brand);
  text-decoration: none;
}

body.site .tag__count { color: var(--site-grey); font-size: 12px; }

/* Search: an icon in the header, a field on its own page */
/* Not a .page-link: it carries no words, and the category links are counted
   by that class. Its own left margin, since it is always last. */
body.site .site-nav .search-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 20px;
  color: var(--site-text);
}

body.site .site-nav .search-link:hover { color: var(--site-brand); }
body.site .site-nav .search-link svg { width: 18px; height: 18px; }

body.site .search-form { display: flex; gap: 10px; margin: 0 0 var(--site-spacing); }

/* The field is labelled for a screen reader; the placeholder says the same
   thing to everyone else. */
body.site .search-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.site .search-form__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font: inherit;
  color: var(--site-text);
  background: #21252b;
  border: 1px solid var(--site-grey-light);
  border-radius: 6px;
}

body.site .search-form__field::placeholder { color: var(--site-grey); }
body.site .search-form__field:focus { outline: none; border-color: var(--site-brand); }

body.site .search-form__submit {
  padding: 10px 18px;
  font: inherit;
  color: var(--site-background);
  background: var(--site-brand);
  border: 1px solid var(--site-brand);
  border-radius: 6px;
  cursor: pointer;
}

body.site .search-form__submit:hover { filter: brightness(1.1); }

body.site .search__count,
body.site .search__hint { margin: 0; color: var(--site-grey); }

body.site .search__count strong,
body.site .search__hint strong { color: var(--site-text); }

/* Subscribing: the same field and button, in a box under a post and on a page
   of its own. */
body.site .subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: calc(var(--site-spacing) * 0.5) 0 0;
}

body.site .subscribe-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.site .subscribe-form__field {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 10px 14px;
  font: inherit;
  color: var(--site-text);
  background: #21252b;
  border: 1px solid var(--site-grey-light);
  border-radius: 6px;
}

body.site .subscribe-form__field::placeholder { color: var(--site-grey); }
body.site .subscribe-form__field:focus { outline: none; border-color: var(--site-brand); }

body.site .subscribe-form__submit {
  padding: 10px 18px;
  font: inherit;
  color: var(--site-background);
  background: var(--site-brand);
  border: 1px solid var(--site-brand);
  border-radius: 6px;
  cursor: pointer;
}

body.site .subscribe-form__submit:hover { filter: brightness(1.1); }

/* Turnstile draws itself in here. It is empty until somebody starts filling in
   the form, so it takes up no room until then. */
body.site .turnstile:not(:empty) { flex: 1 0 100%; margin-top: 4px; }

/* The box under a post, set apart from the prose above it. */
body.site .subscribe--inline {
  margin: var(--site-spacing) auto 0;
  padding: calc(var(--site-spacing) * 0.75);
  max-width: 44rem;
  background: #21252b;
  border: 1px solid var(--site-grey-light);
  border-radius: 8px;
}

body.site .subscribe--inline h2 { font-size: 20px; margin: 0 0 4px; }
body.site .subscribe--inline p { margin: 0; color: var(--site-grey); }

body.site .subscribe__done { margin: calc(var(--site-spacing) * 0.5) 0 0; color: var(--site-brand); }
body.site .subscribe__error { margin: 8px 0 0; color: #e06c75; }
body.site .subscribe__note { margin: var(--site-spacing) 0 0; color: var(--site-grey); }

body.site .subscribe__terms {
  list-style: disc;
  margin: var(--site-spacing) 0 0 var(--site-spacing);
  padding: 0;
  color: var(--site-grey);
}

body.site .subscribe__terms li { margin-bottom: 6px; }

/* Flash messages on the public site */
body.site .site-flash {
  margin: 0 0 var(--site-spacing);
  padding: 10px 14px;
  border: 1px solid var(--site-grey-light);
  border-left-width: 4px;
  border-radius: 0 6px 6px 0;
  background: #21252b;
}

body.site .site-flash--notice { border-left-color: #98c379; }
body.site .site-flash--alert { border-left-color: #e06c75; }

body.site .footer-subscribe { color: var(--site-text); }

/* Click to enlarge */
.document__body a.lightbox-link { display: inline-block; cursor: zoom-in; }
body.site .page-content a.lightbox-link:hover { text-decoration: none; }

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(16, 18, 22, 0.92);
  cursor: zoom-out;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 4px;
  cursor: default;
  transition: opacity 0.15s ease;
}

.lightbox.is-loading .lightbox__image { opacity: 0.6; }

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--site-text);
  background: rgba(40, 44, 52, 0.9);
  border: 1px solid var(--site-grey-light);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__close:hover { color: #fff; border-color: var(--site-grey-dark); }

@media (prefers-reduced-motion: reduce) {
  .lightbox__image { transition: none; }
}

/* Repository links, from the Jekyll site's github-repo include */
.document__body .repo-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--site-grey-light);
  border-radius: 6px;
  background: #21252b;
  color: var(--site-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

.document__body .repo-card a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  /* GitHub mark, as a mask so it follows the link colour. */
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}

body.site .page-content .repo-card a:hover {
  border-color: var(--site-brand);
  color: var(--site-brand);
  text-decoration: none;
}

/* Dates and index page intros */
body.site .post-meta {
  margin: 0 0 calc(var(--site-spacing) * 0.5);
  color: var(--site-grey);
  font-size: 14px;
}

body.site .post-meta__updated::before { content: " · "; }

body.site .document-list .post-meta { margin: 2px 0 4px; }

body.site .category__description {
  color: var(--site-grey-dark);
  margin: 0 0 var(--site-spacing);
}

/* Previous and next within a category */
body.site .post-nav {
  display: flex;
  gap: var(--site-spacing);
  margin: 0 auto;
  padding: var(--site-spacing) 0 0;
  max-width: 44rem;
  border-top: 1px solid var(--site-grey-light);
}

body.site .post-nav__side { flex: 1 1 0; min-width: 0; }
body.site .post-nav__side--next { text-align: right; }

body.site .post-nav__label {
  display: block;
  color: var(--site-grey);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

@media screen and (max-width: 600px) {
  body.site .post-nav { flex-direction: column; gap: calc(var(--site-spacing) * 0.75); }
  body.site .post-nav__side--next { text-align: left; }
}