/* --------------------------------------------------------------------------- * Cezar Babin — blog. * Visual tokens ported from the Pentalist /submits/new page (custom.css.scss): * - Open Sans, weight 300 ("lighter") * - 12px body, black text (#000) * - 1px hairline divider rgba(89,104,93,0.17) — "where the content ends" * - Links #2d993e green, no underline; hover #057c4c + underline * Container widened from 370px → 560px (slightly wider per request). * ------------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 350; /* variable-font weight: 300 felt too faint, 400 too heavy */ font-size: 14px; line-height: 1.7; color: #000; background: #fff; text-align: center; /* mirrors Pentalist body */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Local-only content (test posts / drafts) ----------------- */ /* Elements marked .local-only are hidden by default and revealed only when the page is served from a local hostname (see the early script in index.html that sets ). */ .local-only { display: none !important; } .is-local .local-only { display: list-item !important; } .is-local section.local-only, .is-local div.local-only { display: block !important; } /* The hairline divider that bounds the content top + bottom. */ .divider { border: 0; height: 0; border-top: 1px solid rgba(89, 104, 93, 0.17); border-bottom: 1px solid rgba(255, 255, 255, 0.3); width: 100%; max-width: 560px; margin: 0 auto; } /* Main column. Inline-block + body{text-align:center} centers the column; inside the column text aligns left, matching Pentalist's pattern. */ .site { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 20px; text-align: left; } /* ---------- Header / nav --------------------------------------------- */ .site-header { text-align: center; padding: 32px 0 14px; } .site-header h1 { margin: 0 0 14px; font-size: inherit; font-weight: inherit; letter-spacing: normal; } .site-header h1 a { color: #000; text-decoration: none; display: inline-block; } .site-header h1 a:hover { color: #057c4c; text-decoration: none; } .site-header h1 a:hover .ascii-banner { color: #057c4c; } /* ASCII figlet banner. Sits inside

; the visible name is in a visually-hidden for screen readers, and the

 is aria-hidden so assistive tech doesn't read out the glyphs. */
.ascii-banner {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.0;
  color: #000;
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: pre;
  text-align: left;
}
@media (max-width: 520px) { .ascii-banner { font-size: 9px; } }
@media (max-width: 400px) { .ascii-banner { font-size: 7.5px; } }
@media (max-width: 340px) { .ascii-banner { font-size: 6.5px; } }

/* Visually hidden, screen-reader-only. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.site-nav {
  font-size: 15px;
  letter-spacing: -1px;
  padding-bottom: 14px;
}
.site-nav a { padding: 0 10px; }
.site-nav a.active { text-decoration: underline; }

/* ---------- Links (global) ------------------------------------------- */
a {
  color: #2d993e;
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
}
a:hover {
  color: #057c4c;
  text-decoration: underline;
}

/* ---------- Content area --------------------------------------------- */
.content {
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 28px 0 36px;
}
.section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5d5d5d;
  margin: 0 0 18px;
}

/* ---------- Post list (essays + projects) ---------------------------- */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list > li { margin: 0 0 26px; }

.post-list h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 1.35;
}
.post-list h2 a { color: #000; }
.post-list h2 a:hover { color: #057c4c; text-decoration: underline; }

.post-list .meta {
  color: #5d5d5d;
  font-size: 11px;
  margin: 0 0 8px;
  letter-spacing: 0;
}
.post-list .excerpt { font-size: 14px; line-height: 1.7; color: #000; }

/* ---------- Long-form post page -------------------------------------- */
.post h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: #000;
}
.post .meta {
  color: #5d5d5d;
  font-size: 11px;
  margin: 0 0 24px;
}
.post p {
  margin: 0 0 14px;
  font-size: 14px;          /* +2px */
  line-height: 1.75;
}
.post h2 {
  font-size: 16px;          /* +2px */
  font-weight: 600;
  margin: 26px 0 8px;
  letter-spacing: -0.2px;
}
.post h3 { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }   /* +2px */
.post em { font-style: italic; }
.post strong { font-weight: 600; }
.post ul, .post ol { padding-left: 22px; margin: 0 0 14px; }
.post li { margin-bottom: 6px; }
.post blockquote {
  border-left: 2px solid rgba(89,104,93,0.25);
  margin: 16px 0;
  padding: 2px 0 2px 14px;
  color: #333;
  font-style: italic;
}
.post hr.in-post {
  border: 0;
  border-top: 1px solid rgba(89,104,93,0.17);
  margin: 28px auto;
  width: 80px;
}
.post-nav {
  margin-top: 36px;
  font-size: 12px;
  color: #5d5d5d;
}

/* ---------- About + Projects intro paragraphs ------------------------ */
.prose p { font-size: 14px; line-height: 1.75; margin: 0 0 14px; }    /* +2px */
.prose ul { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }

/* ---------- Footer --------------------------------------------------- */
.site-footer {
  padding: 22px 0 36px;
  text-align: center;
  font-size: 11px;
  color: #5d5d5d;
}
.site-footer .links a { margin: 0 8px; }
.site-footer small { display: block; margin-top: 8px; }

/* ---------- Tweet embeds --------------------------------------------- */
/* Twitter's widgets.js replaces the .twitter-tweet blockquote with an iframe.
   We center it in the column and let the widget pick its own max-width. */
.twitter-tweet { margin: 18px auto !important; }

/* ---------- Inline media --------------------------------------------- */
/* Images shrink to the column and never overflow on mobile. */
.post img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
  border-radius: 2px;
}
/* Caption pattern: … */
.post figure { margin: 18px 0; text-align: center; }
.post figure img { margin: 0 auto 6px; }
.post figcaption {
  font-size: 11px;
  color: #5d5d5d;
  text-align: center;
  line-height: 1.5;
}

/* YouTube / video embed: keeps 16:9 at every viewport width. */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 18px 0;
  overflow: hidden;
  background: #000;
  border-radius: 2px;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Nested list spacing tightening --------------------------- */
.post li > ul, .post li > ol {
  margin: 4px 0 0;
}

/* ---------- Code ----------------------------------------------------- */
/* Inline : monospaced, slightly smaller, subtle tinted background. */
.post code {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  background: rgba(89, 104, 93, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: #000;
}

/* Block : padded panel with a hairline border, horizontal scroll
   for long lines so the column never breaks on mobile. */
.post pre {
  background: #f7f7f5;
  border: 1px solid rgba(89, 104, 93, 0.15);
  border-radius: 3px;
  padding: 14px 16px;
  margin: 18px 0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
}
.post pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #000;
  white-space: pre;
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Tables --------------------------------------------------- */
.post table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 13px;
}
.post th, .post td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(89, 104, 93, 0.15);
  vertical-align: top;
}
.post th { font-weight: 600; }

/* ---------- Details / Summary collapsibles --------------------------- */
.post details {
  margin: 14px 0;
  border: 1px solid rgba(89, 104, 93, 0.15);
  border-radius: 3px;
  padding: 8px 12px;
}
.post details[open] summary { margin-bottom: 6px; }
.post summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.post summary::-webkit-details-marker { display: none; }
.post summary::before {
  content: "▸ ";
  color: #5d5d5d;
  transition: transform 0.2s;
  display: inline-block;
}
.post details[open] summary::before { content: "▾ "; }

/* ---------- Inline JS widgets ---------------------------------------- */
/* Wrapper for in-post interactive widgets that contain their own