/* Blog styles — Claudiu Nicola
   Minimal, clean, professional CSS for the /posts blog.
   Fonts: Montserrat (headings/nav), Open Sans (body) — same as resume page.
   ------------------------------------------------------------------ */

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  /* Colors */
  --color-text:            #333;
  --color-text-strong:     #111;
  --color-text-muted:      #555;
  --color-text-faint:      #888;
  --color-text-link:       #0055cc;
  --color-text-link-hover: #0040a0;
  --color-bg:              #fff;
  --color-bg-subtle:       #fafafa;
  --color-bg-hover:        #f5f5f5;
  --color-border:          #eee;
  --color-border-strong:   #111;
  --color-accent:          #222;

  /* Typography — full font stacks with web-safe fallbacks */
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
                  'DejaVu Sans Mono', monospace;

  /* Layout */
  --max-width-content: 720px;
  --max-width-header:  760px;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  3rem;

  /* Borders & radii */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-pill: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   TYPOGRAPHY SYSTEM — base declarations
   ----------------------------------------------------------------
   Font stacks:
     Body (prose):    'Open Sans', 'Helvetica Neue', Arial, sans-serif
     Headings / UI:   'Montserrat', 'Helvetica Neue', Arial, sans-serif
     Monospace:       'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
                      'DejaVu Sans Mono', monospace

   Type scale (base 16 px = 1 rem, fluid via clamp() for h1-h3):
     h1   2.00 rem  (~32 px)  — page / post title
     h2   1.45 rem  (~23 px)  — major section
     h3   1.20 rem  (~19 px)  — subsection
     h4   1.05 rem  (~17 px)  — sub-subsection
     h5   0.95 rem  (~15 px)  — minor heading
     h6   0.875 rem (~14 px)  — label / aside heading
     body 1.00 rem  ( 16 px)  — base prose
     small / meta  ~0.875 rem

   Line-height:
     Prose body    1.80  (spacious, optimised for long-form reading)
     Headings      1.25  (tight; headings are short phrases)
     Lead / intro  1.65
     Code blocks   1.55

   Measure (optimal characters per line):
     Article prose body: capped at 68 ch (~65-75 chars)
   ============================================================ */

/* ── Root font baseline ─────────────────────────────────────── */
/* Use 100% so we inherit the user's browser font-size preference.
   Never hard-code a px value here. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ── Selection highlight ────────────────────────────────────── */
::selection      { background: #cce4ff; color: #111; }
::-moz-selection { background: #cce4ff; color: #111; }

/* ============================================================
   Skip-to-content (accessibility)
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: 9999;
  padding: 0.6em 1.2em;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--color-text-link);
  outline-offset: 2px;
}

/* ── Base body ──────────────────────────────────────────────── */
body {
  /* Full font stack: web font → system humanist → generic sans */
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;          /* 16 px — explicit rem anchor */
  color: #333;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Sticky footer: footer is always pushed to viewport bottom on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   Site header / navigation
   ============================================================ */
.site-header {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  border-bottom: 2px solid #111;
  background: #fff;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 760px;
  margin: 0 auto;
  padding: 1em 1.5em;
}

.site-header .brand {
  color: #111;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.site-header .brand:hover { color: #333; }

.site-header nav {
  display: flex;
  gap: 0;
}

.site-header nav a {
  color: #666;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.site-header nav a:hover {
  color: #111;
  background: #f5f5f5;
}

.site-header nav a[aria-current="page"] {
  color: #111;
  background: #f0f0f0;
}

/* ============================================================
   Focus styles (accessibility)
   ============================================================ */

/* Ensure keyboard navigation is always clearly visible */
:focus-visible {
  outline: 2px solid var(--color-text-link);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Suppress focus ring for mouse users on items that have custom hover states */
.site-header nav a:focus:not(:focus-visible),
.tag-badge:focus:not(:focus-visible),
.back-link:focus:not(:focus-visible),
.rss-link:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   Layout containers
   ============================================================ */

/*
 * <main> is the direct flex child of the body that grows to fill available
 * vertical space, pushing the footer to the viewport bottom (sticky footer).
 */
main {
  flex: 1 1 auto;
  width: 100%;
}

/* .container — applied to <main> on index and tag pages */
.container {
  max-width: 720px;
  margin: 2.5em auto;
  padding: 0 1.5em;
}

/* <article> — nested inside <main> on individual post pages */
article {
  max-width: 720px;
  margin: 2.5em auto;
  padding: 0 1.5em;
}

/* ============================================================
   Page headings
   ============================================================ */
h1 {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25em;
  color: #111;
}

article h1 { margin-bottom: 0.2em; }

h1 .tag-label {
  background: #111;
  color: #fff;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 0.85em;
}

article h2, article h3, article h4,
article h5, article h6 {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  color: #111;
  line-height: 1.25;   /* tight — headings are short phrases */
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  font-weight: 700;
}

/* Type scale — body context */
article h2 { font-size: 1.45em; }
article h3 { font-size: 1.20em; }
article h4 { font-size: 1.05em; }
article h5 { font-size: 0.95em; letter-spacing: 0.02em; }
article h6 {
  font-size: 0.875em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #555;          /* slightly muted — lowest heading level */
  font-weight: 700;
}

/* ============================================================
   Breadcrumb navigation (tag pages)
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78em;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.2em;
}

.breadcrumb a {
  color: #777;
  text-decoration: none;
  transition: color var(--transition-fast, 0.15s ease);
}

.breadcrumb a:hover {
  color: var(--color-text-strong, #111);
  text-decoration: underline;
}

.breadcrumb-sep {
  color: #ccc;
  font-weight: 400;
  user-select: none;
}

/* ============================================================
   Blog intro / lead text
   ============================================================ */
.blog-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5em;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}

.lead {
  color: #555;
  font-size: 1.05em;
  margin: 0 0 2em;
  max-width: 560px;
  line-height: 1.65;
}

.post-count-badge {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 0.2em;
  flex-shrink: 0;
}

/* ============================================================
   Tags cloud (blog index page)
   ============================================================ */
.tags-section {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1.1em 1.4em 1.3em;
  margin-bottom: 2.5em;
}

.tags-section h2 {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 0.9em;
}

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-cloud li { display: inline-block; }

.tag-badge {
  display: inline-flex;
  align-items: center;
  background: #222;
  color: #fff;
  padding: 5px 13px;
  font-size: 0.8em;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.tag-badge:hover { background: #555; }

.tag-count {
  opacity: 0.55;
  font-size: 0.88em;
  margin-left: 4px;
  font-weight: 400;
}

/* ============================================================
   Post list (index + tag pages)
   ============================================================ */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  border-bottom: 1px solid #eee;
}

.post-list li:last-child { border-bottom: none; }

.post-list a {
  display: block;
  color: #222;
  text-decoration: none;
  padding: 1.5em 0.6em 1.5em 0;
  border-radius: 6px;
  transition: background 0.15s ease, padding-left 0.15s ease;
  position: relative;
}

.post-list a:hover {
  padding-left: 0.6em;
  background: #fafafa;
}

/* Read-more arrow that appears on hover */
.post-list h2::after {
  content: " \2192";
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.post-list a:hover h2::after { opacity: 1; }

.post-list h2 {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.25em;
  font-weight: 700;
  margin: 0.3em 0 0.4em;
  color: #111;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.post-list a:hover h2 { color: #0055cc; }

/* Meta row: date, reading-time, tags */
.post-list .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.8em;
  color: #999;
  margin-bottom: 0.35em;
}

.post-list .meta time {
  font-weight: 600;
  color: #888;
}

.post-list .meta .meta-sep {
  color: #ccc;
}

.post-list .meta .reading-time {
  color: #bbb;
}

/* Inline tag pills — lighter/outlined style, distinct from topic cloud */
.post-list .meta .tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3em;
  align-items: center;
}

.post-list .meta .tags a {
  text-decoration: none;
}

.post-list .meta .tags a span {
  display: inline-block;
  background: #f2f2f2;
  color: #666;
  border: 1px solid #e0e0e0;
  padding: 1px 8px;
  font-size: 0.88em;
  border-radius: 10px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.post-list .meta .tags a:hover span {
  background: #222;
  color: #fff;
  border-color: #222;
}

.post-list .summary {
  color: #555;
  font-size: 0.95em;
  margin: 0;
  line-height: 1.65;
}

/* ============================================================
   Post meta (individual post pages)
   ============================================================ */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em 0.7em;
  color: #888;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.85em;
  margin-bottom: 2.2em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid #eee;
}

.post-meta time {
  font-weight: 600;
  color: #777;
}

/* Tag badge row inside post meta — uses the shared .tag-badge class */
.post-meta .post-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35em;
  align-items: center;
}

/* Slightly smaller badges to fit comfortably in the meta line */
.post-meta .post-tags .tag-badge {
  padding: 2px 10px;
  font-size: 0.82em;
}

/* ============================================================
   RSS link
   ============================================================ */
.rss-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 2.5em;
  padding: 0.45em 1.1em;
  background: #fff8f0;
  border: 1px solid #e87d0d;
  color: #c96a00;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.rss-link:hover {
  background: #e87d0d;
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   Back link (individual post & tag pages)
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 2.5em;
  margin-bottom: 3em;
  color: #555;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.88em;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.back-link:hover { color: #111; text-decoration: none; }

/* ============================================================
   Empty state
   ============================================================ */
.empty {
  color: #aaa;
  font-style: italic;
  margin-top: 2em;
  font-size: 0.95em;
}

/* ============================================================
   Post header — visual separator between title+meta and body
   ============================================================ */
.post-header {
  margin-bottom: 2.2em;
  padding-bottom: 0;    /* post-meta already has padding-bottom + border */
}

/* ============================================================
   Article body content
   ============================================================ */

/* ── Article font baseline ──────────────────────────────────── */
/* Explicit 1rem re-anchor prevents em drift when article is
   nested inside other components (e.g. section, main, etc.). */
article {
  font-size: 1rem;
}

/* ── Paragraphs ─────────────────────────────────────────────── */
article p {
  margin: 1.1em 0;
  line-height: 1.80;    /* comfortable for long-form prose reading */
}

/* Remove extraneous margin on first/last paragraphs in containers */
blockquote > p:first-child,
article > p:first-child { margin-top: 0; }

/* ── Links ──────────────────────────────────────────────────── */
article a {
  color: #0055cc;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s ease, color 0.15s ease;
}

article a:hover {
  color: #0040a0;
  text-decoration-thickness: 2px;
}

/* Keyboard / screen-reader :focus — explicit visible outline (WCAG 2.4.7) */
article a:focus-visible {
  outline: 3px solid #0055cc;
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: none;
}

/* Images */
article img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin: 1em 0;
}

/* Figures & captions */
article figure {
  margin: 1.8em 0;
  text-align: center;
}
article figure img { margin: 0; }
article figcaption {
  color: #999;
  font-size: 0.875em;
  margin-top: 0.5em;
  font-style: italic;
  line-height: 1.5;
}

/* ============================================================
   Code blocks
   ============================================================ */
pre {
  position: relative;   /* anchor for the language label pseudo-element */
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 1em 1.2em;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.55;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}

/* Language label — pandoc emits class="yaml", class="go", etc. */
pre[class]:not([class=""])::before {
  content: attr(class);
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 10px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.72em;
  font-weight: 600;
  color: #999;
  background: #eaecef;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  line-height: 1.9;
  pointer-events: none;
  user-select: none;
}

/* pandoc wraps sourceCode class — hide its redundant label */
pre.sourceCode::before { display: none; }

/*
 * Extra top padding on labelled blocks so the first line of code
 * doesn't visually overlap with the absolute-positioned language badge.
 * The badge is ~1.5em tall; 2.4em gives a comfortable clear zone.
 */
pre[class]:not([class=""]):not(.sourceCode) {
  padding-top: 2.4em;
}

code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
}

/* Inline code */
p code, li code, td code,
h1 code, h2 code, h3 code, h4 code, dt code {
  background: #f0f2f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.875em;
  border: 1px solid #e1e4e8;
  color: #c0392b;
  word-break: break-word;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  border: none;
  word-break: normal;
}

/* Keyboard shortcuts */
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.82em;
  line-height: 1.5;
  color: #333;
  background: #fafafa;
  border: 1px solid #c6cbd1;
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 #c6cbd1;
}

/* ============================================================
   Blockquotes
   ============================================================ */
blockquote {
  border-left: 3px solid #333;
  margin: 1.6em 0;
  padding: 0.7em 1.3em;
  color: #555;
  background: #fafafa;
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

blockquote p:first-child { margin-top: 0; }
blockquote p:last-child  { margin-bottom: 0; }
blockquote strong { font-style: normal; color: #333; }

/* Attribution / cite */
blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-size: 0.88em;
  color: #999;
}
blockquote cite::before { content: "— "; }

/* ============================================================
   Lists
   ============================================================ */
ul, ol { padding-left: 1.5em; }
li { margin-bottom: 0.3em; }

article ul, article ol { padding-left: 1.6em; margin: 0.9em 0; }
article li { margin-bottom: 0.4em; line-height: 1.75; }
article li > ul, article li > ol { margin-top: 0.3em; margin-bottom: 0.3em; }

/* Definition lists */
article dl  { margin: 1em 0; }
article dt  { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; margin-top: 0.8em; }
article dd  { margin-left: 1.5em; color: #555; }

/* ============================================================
   Inline semantic elements
   ============================================================ */
article mark {
  background: #fff3cd;
  padding: 1px 3px;
  border-radius: 2px;
  color: #333;
}
article abbr[title] {
  cursor: help;
  text-decoration: underline dotted;
}
article s, article del { color: #aaa; }
article ins {
  text-decoration: none;
  background: #d4f5e2;
  padding: 0 3px;
  border-radius: 2px;
  color: #1a7a40;
}
article sup, article sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
article sup { top: -0.5em; }
article sub { bottom: -0.25em; }

/* ============================================================
   Tables
   ============================================================ */
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.93em;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

article th, article td {
  padding: 0.6em 0.9em;
  border: 1px solid #e1e4e8;
  text-align: left;
  vertical-align: top;
}

article th {
  background: #f6f8fa;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.88em;
  color: #444;
  white-space: nowrap;
}

article tr:nth-child(even) { background: #fafafa; }
article tr:hover { background: #f0f4f8; }

/* Horizontal rules */
hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 2.5em 0;
}

/* ============================================================
   Footer
   ============================================================ */
footer {
  text-align: center;
  padding: 2em 1em;
  color: #bbb;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  border-top: 1px solid #eee;
  margin-top: 3em;
}

/* ============================================================
   Fluid typography — clamp() scales smoothly between viewports
   Viewport range: 320px (min) → 760px (max)
   ============================================================ */
h1 {
  /* 1.6em @ 320px  →  2em @ 760px */
  font-size: clamp(1.6rem, 1.13rem + 2.05vw, 2rem);
}

article h2 {
  /* 1.25em @ 320px  →  1.45em @ 760px */
  font-size: clamp(1.25rem, 1.03rem + 0.97vw, 1.45rem);
}

article h3 {
  /* 1.1em @ 320px  →  1.2em @ 760px */
  font-size: clamp(1.1rem, 0.99rem + 0.51vw, 1.2rem);
}

/* ============================================================
   Responsive — tablet / mid-size screens  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Tighten outer container */
  .container, article {
    padding: 0 1.25em;
    margin-top: 2em;
  }

  /* Reduce h4 slightly */
  article h4 { font-size: 1em; }

  /* Post list — ensure minimum touch target height */
  .post-list a {
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    min-height: 44px;
  }

  /* Slightly smaller tags section */
  .tags-section {
    padding: 0.9em 1.1em 1.1em;
  }

  /* Tag badges — comfortable tap targets */
  .tag-badge {
    padding: 6px 14px;
    min-height: 36px;
  }

  /* Breadcrumb */
  .breadcrumb { margin-bottom: 1em; }
}

/* ============================================================
   Responsive — mobile phones  (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  /* Body text — bump base slightly for readability */
  body { font-size: 17px; }

  /* Post list headings */
  .post-list h2 { font-size: 1.1em; }

  /* Header layout: stack brand + nav vertically */
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    padding: 0.9em 1em;
  }

  .site-header .brand { font-size: 1em; }

  /* Nav: full-width row, touch-friendly tap targets */
  .site-header nav {
    gap: 0;
    width: 100%;
  }

  .site-header nav a {
    padding: 0.45em 0.7em;
    font-size: 0.75em;
    min-height: 44px;          /* WCAG touch target */
    display: inline-flex;
    align-items: center;
  }

  /* Containers */
  .container, article {
    padding: 0 1em;
    margin-top: 1.75em;
  }

  /* Code blocks — smaller font, less padding, keeps -webkit-scroll */
  pre {
    padding: 0.8em 0.9em;
    font-size: 0.8em;
    border-radius: 4px;
  }

  /* Inline code */
  p code, li code, td code,
  h1 code, h2 code, h3 code, h4 code, dt code {
    font-size: 0.82em;
    padding: 2px 5px;
  }

  /* Blockquote: tighten indent */
  blockquote {
    padding: 0.6em 1em;
    margin: 1.2em 0;
  }

  /* Blog intro row: stack vertically */
  .blog-intro { flex-direction: column; gap: 0.3em; }
  .post-count-badge { display: none; }

  /* Tags cloud: tighter gap */
  .tags-cloud { gap: 0.4em; }

  /* Tag badge: comfortable mobile tap target */
  .tag-badge {
    padding: 7px 14px;
    font-size: 0.82em;
    min-height: 40px;
  }

  /* Post meta: smaller font on mobile */
  .post-meta { font-size: 0.8em; gap: 0.3em 0.5em; }

  /* Back/RSS links: full-width on mobile for easier tapping */
  .back-link, .rss-link {
    padding: 0.6em 1em;
    min-height: 44px;
    align-items: center;
  }

  /* Tags section heading */
  .tags-section h2 { font-size: 0.68em; }

  /* Tags aggregation section */
  .tags-aggregation { margin-top: 2em; padding-top: 1.5em; }
  .tags-aggregation > h2 { font-size: 0.68em; }
  .tag-group-title { font-size: 0.9em; }

  /* Table: already scrollable via display:block, reduce cell padding */
  article th, article td { padding: 0.5em 0.7em; }

  /* Reduce top/bottom margins on headings */
  article h2, article h3, article h4 { margin-top: 1.4em; }

  /* Footer */
  footer { padding: 1.5em 1em; font-size: 0.75em; }
}

/* ============================================================
   Responsive — small phones  (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {
  .container, article { padding: 0 0.85em; }

  .site-header-inner { padding: 0.75em 0.85em; }

  /* On very small screens nav links fill width evenly */
  .site-header nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .site-header nav a {
    text-align: center;
    justify-content: center;
  }

  /* Tighter list items */
  .post-list a { padding-top: 1em; padding-bottom: 1em; }

  /* Pre font even tighter */
  pre { font-size: 0.76em; }

  /* Don't show read-more arrow animation on touch (hover not reliable) */
  .post-list h2::after { display: none; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .site-header, footer, .back-link, .rss-link,
  .skip-to-content { display: none; }
  body { color: #000; min-height: unset; }
  main, article { max-width: 100%; }
  a { color: #000; }
  pre { border: 1px solid #ccc; }
}

/* Post meta separators and reading time (individual post pages) */
.post-meta .meta-sep {
  color: #ccc;
}

.post-meta .reading-time {
  color: #bbb;
}

/* ============================================================
   Tags aggregation section (blog index page)
   Groups posts under each tag heading for easy browsing.
   ============================================================ */
.tags-aggregation {
  margin-top: 3em;
  border-top: 1px solid #eee;
  padding-top: 2em;
}

.tags-aggregation > h2 {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 1.5em;
}

.tag-group {
  margin-bottom: 1.8em;
}

.tag-group-title {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95em;
  font-weight: 700;
  margin: 0 0 0.5em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.tag-group-title .tag-count {
  opacity: 0.55;
  font-size: 0.88em;
  font-weight: 400;
}

.tag-group-link {
  display: inline-block;
  background: #222;
  color: #fff;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  text-decoration: none;
  transition: background 0.15s ease;
}

.tag-group-link:hover {
  background: #555;
}

.tag-group-posts {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0.5em;
  border-left: 2px solid #eee;
  padding-left: 1em;
}

.tag-group-posts li {
  margin-bottom: 0.35em;
}

.tag-group-posts a {
  color: #444;
  font-size: 0.92em;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tag-group-posts a:hover {
  color: #0055cc;
  text-decoration: underline;
}