/*
Theme Name: Zachary Echlin
Theme URI: https://zacharyechlin.com/
Author: Zachary Echlin
Author URI: https://zacharyechlin.com/
Description: A fast, dependency-free personal theme for infrastructure writing. Hand-written CSS, no build step, no CDN, no page builder. Dark and light, optimized for long technical posts with code.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zacharyechlin
Tags: blog, one-column, custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready, dark-mode
*/

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* Palette — light is the default. */
  --bg:            #ffffff;
  --bg-subtle:     #f6f8fa;
  --bg-inset:      #f0f3f6;
  --text:          #1f2328;
  --text-muted:    #59636e;
  --text-faint:    #818b98;
  --border:        #d1d9e0;
  --border-strong: #afb8c1;
  --accent:        #0969da;
  --accent-hover:  #0550ae;
  --accent-subtle: #ddf4ff;
  --code-bg:       #f6f8fa;
  --code-text:     #1f2328;
  --shadow:        0 1px 2px rgba(31, 35, 40, .06), 0 3px 8px rgba(31, 35, 40, .04);
  --mark-bg:       #fff8c5;
  --mark-text:     #1f2328;
    /* Interactive control boundaries.
       WCAG 1.4.11 wants 3:1 between a control's boundary and its adjacent
       background. --border is a decorative hairline at 1.43:1 light / 1.55:1
       dark: fine for cards and table rules, but an input drawn with it
       dissolves into the page, which is what made the solid Search button
       read as misaligned against an invisible box. Measured: #8b949e is
       3.08:1 on white, #6e7681 is 4.12:1 on #0d1117. */
  --border-control: #8b949e;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
               Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Roboto Mono", monospace;

  --size-prose: 1.0625rem;   /* 17px */
  --lh-prose:  1.75;
  --measure:   42rem;        /* ~68ch — long-form reading measure */

  /* Space */
  --gap:   1.5rem;
  --pad:   clamp(1.25rem, 4vw, 2.5rem);
  --radius: 8px;
  --maxw:  46rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0d1117;
    --bg-subtle:     #161b22;
    --bg-inset:      #010409;
    --text:          #e6edf3;
    --text-muted:    #9198a1;
    --text-faint:    #6e7681;
    --border:        #30363d;
    --border-strong: #444c56;
    --accent:        #4493f8;
    --accent-hover:  #58a6ff;
    --accent-subtle: #121d2f;
    --code-bg:       #161b22;
    --code-text:     #e6edf3;
    --shadow:        0 1px 2px rgba(1, 4, 9, .4), 0 3px 8px rgba(1, 4, 9, .3);
    --mark-bg:       #4a3c00;
    --mark-text:     #f5e6a8;
    --border-control: #6e7681;
  }
}

/* Explicit light override (user toggled while OS is dark) */
:root[data-theme="light"] {
  --bg:            #ffffff;
  --bg-subtle:     #f6f8fa;
  --bg-inset:      #f0f3f6;
  --text:          #1f2328;
  --text-muted:    #59636e;
  --text-faint:    #818b98;
  --border:        #d1d9e0;
  --border-strong: #afb8c1;
  --accent:        #0969da;
  --accent-hover:  #0550ae;
  --accent-subtle: #ddf4ff;
  --code-bg:       #f6f8fa;
  --code-text:     #1f2328;
  --shadow:        0 1px 2px rgba(31, 35, 40, .06), 0 3px 8px rgba(31, 35, 40, .04);
  --mark-bg:       #fff8c5;
  --mark-text:     #1f2328;
  --border-control: #8b949e;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--size-prose);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--accent); color: #fff; }

/* ============================================================
   3. LAYOUT
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.site-main { padding-block: clamp(2rem, 6vw, 3.5rem) 4rem; min-height: 55vh; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---- Header ---- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 4rem;
  padding-block: .75rem;
}

.site-brand { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; }

.site-brand__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
  line-height: 1.3;
}
.site-brand__name:hover { color: var(--accent); }

.site-brand__tag {
  font-size: .75rem;
  color: var(--text-muted);
  letter-spacing: .02em;
  line-height: 1.3;
}

.site-header__actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.site-nav { display: flex; align-items: center; gap: .35rem; }

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  padding: .4rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.site-nav a:hover { color: var(--text); background: var(--bg-subtle); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  margin-left: .35rem;
  padding: 0;
  background: var(--bg-subtle);
  border: 1px solid var(--border-control);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 560px) {
  .site-brand__tag { display: none; }
  .site-nav { gap: 0; }
  .site-nav a { padding: .4rem .5rem; font-size: .875rem; }
}

/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding-block: 2.5rem;
  font-size: .875rem;
  color: var(--text-muted);
}

.site-footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ============================================================
   4. PROSE
   ============================================================ */

.prose { overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.25em; }

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-top: 2.25em;
  margin-bottom: -.6em;
  scroll-margin-top: 5rem;
}
.prose h2 { font-size: 1.5rem; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.0625rem; }
.prose > :first-child { margin-top: 0; }

.prose p, .prose li { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: .4em; }
.prose li > ul, .prose li > ol { margin-top: .4em; }

.prose blockquote {
  margin-inline: 0;
  padding: .1rem 0 .1rem 1.25rem;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
  font-style: italic;
}

.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 2.5em; }

.prose mark { background: var(--mark-bg); color: var(--mark-text); padding: .1em .25em; border-radius: 3px; }

.prose abbr[title] { text-decoration: underline dotted; cursor: help; }
.prose .footnotes { font-size: .9375rem; color: var(--text-muted); }

/* ---- Code ---- */

.prose code, .prose kbd, .prose samp, .prose pre {
  font-family: var(--font-mono);
  font-size: .875em;
  font-variant-ligatures: none;
}

.prose :not(pre) > code {
  background: var(--bg-inset);
  color: var(--text);
  padding: .15em .4em;
  border-radius: 5px;
  border: 1px solid var(--border);
  word-break: break-word;
}

.prose pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  line-height: 1.6;
  tab-size: 4;
  position: relative;
}
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 1em;
  color: var(--code-text);
  white-space: pre;
}

/* Preserve the language hint as a small label. */
.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0; right: 0;
  padding: .1rem .55rem;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-inset);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 var(--radius) 0 6px;
  pointer-events: none;
}

.prose kbd {
  background: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: .1em .4em;
  font-size: .8em;
}

/* ---- Tables ---- */

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  display: block;
  overflow-x: auto;
}
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: .55rem .8rem;
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--bg-subtle); font-weight: 700; }
.prose tbody tr:nth-child(even) { background: var(--bg-subtle); }

/* ---- Figures / media ---- */

.prose figure { margin-inline: 0; }
.prose figcaption { font-size: .875rem; color: var(--text-muted); margin-top: .6em; }

/* ============================================================
   5. POST LIST
   ============================================================ */

.page-header { margin-bottom: 2.5rem; }
.page-header__title {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0 0 .5rem;
}
.page-header__desc { color: var(--text-muted); margin: 0; font-size: 1rem; }

.post-list { display: flex; flex-direction: column; gap: 2.5rem; }

.post-card { padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
.post-list .post-card:last-child { border-bottom: 0; padding-bottom: 0; }

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--text-faint);
  margin-bottom: .6rem;
}
.post-card__meta a { color: var(--text-muted); text-decoration: none; }
.post-card__meta a:hover { color: var(--accent); text-decoration: underline; }

/* The clock glyph is an inline SVG with no intrinsic size; without an
   explicit box it takes the flex line's full height and shoves "min read"
   onto three lines. */
.post-card__meta .post-meta__readtime,
.post-meta__readtime {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.post-card__meta svg,
.post-meta__readtime svg {
  width: .875rem;
  height: .875rem;
  flex: none;
  opacity: .7;
}

.post-card__title {
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a:hover { color: var(--accent); }

.post-card__excerpt { color: var(--text-muted); margin: 0 0 .85rem; }

.post-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.5;
}
.tag:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-subtle); }

.cat-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.cat-badge:hover { text-decoration: underline; }

/* ============================================================
   6. SINGLE POST
   ============================================================ */

.single-header { margin-bottom: 2.5rem; }
.single-header__cat {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: .75rem;
}
.single-header__cat:hover { text-decoration: underline; }

.single-header__title {
  font-size: clamp(1.875rem, 5.5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 .75rem;
}

.single-header__excerpt {
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  font-size: .875rem;
  color: var(--text-faint);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.post-meta__readtime { display: inline-flex; align-items: center; gap: .35rem; }
.post-meta svg { width: .9rem; height: .9rem; opacity: .7; }
.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.5rem; }

/* ---- Post footer nav ---- */

.post-nav {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.post-nav__item {
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--bg-subtle);
  transition: border-color .15s, transform .15s;
}
.post-nav__item:hover { border-color: var(--accent); transform: translateY(-1px); }
.post-nav__label {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: .3rem;
}
.post-nav__title { font-weight: 600; color: var(--text); font-size: .9375rem; line-height: 1.4; }
.post-nav__item--next { text-align: right; }

/* ============================================================
   7. SEARCH & 404
   ============================================================ */

.search-form {
  display: flex;
  /* stretch, not center: forces the field and the button to the SAME height
     instead of each deriving its own from its own padding. They happened to
     agree at 46px, but only by coincidence of equal padding values; one
     font-size change apart and the row visibly breaks. */
  align-items: stretch;
  gap: .5rem;
  margin: 1.5rem 0 0;
  max-width: 28rem;
}
.search-form input[type="search"] {
  flex: 1;
  font: inherit;
  font-size: .9375rem;
  padding: .55rem .8rem;
  border: 1px solid var(--border-control);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.search-form input[type="search"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-subtle); }
.search-form button {
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.search-form button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Compact search sitting in the header nav. The header cannot afford the
   block form's padding, so this variant shrinks the field and turns the
   button into an icon-only submit. */
.search-form--nav { display: flex; gap: .25rem; margin: 0 0 0 .35rem; max-width: none; align-items: center; }
.search-form--nav input[type="search"] {
  width: 11rem;
  font-size: .875rem;
  padding: .4rem .6rem;
  transition: width .18s ease, border-color .15s;
}
.search-form--nav input[type="search"]:focus { width: 14rem; }
.search-form--nav button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border-control);
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  transition: color .15s, background-color .15s, border-color .15s;
}
.search-form--nav button:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-subtle); }
.search-form--nav button svg { width: 1rem; height: 1rem; }

/* Below the nav breakpoint the field would crowd the links, so it drops to
   its own full-width row instead of disappearing. The toggle stays on the
   nav row because it comes before the field in source order. */
@media (max-width: 720px) {
  /* The header must wrap for the actions group to claim its own full-width
     row. Without this the group competes with the brand on one line and
     flex-shrink squeezes the search field back to its intrinsic width. */
  .site-header__inner { flex-wrap: wrap; }
  .site-header__actions { flex-wrap: wrap; width: 100%; justify-content: flex-start; }
  .search-form--nav { order: 3; flex-basis: 100%; margin: .5rem 0 0; }
  .search-form--nav input[type="search"],
  .search-form--nav input[type="search"]:focus { width: 100%; }
}

.error-page { text-align: center; padding-block: 3rem; }
.error-page__code {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text-faint);
  line-height: 1;
  margin: 0 0 1rem;
}
.error-page__title { font-size: 1.5rem; margin: 0 0 .75rem; letter-spacing: -.02em; }
.error-page__text { color: var(--text-muted); margin: 0 auto 2rem; max-width: 32rem; }

/* ---- Pagination ---- */

.pagination { margin-top: 3rem; display: flex; justify-content: center; gap: .5rem; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   8. COMMENTS
   ============================================================ */

.comments-area { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.comments-title { font-size: 1.25rem; margin: 0 0 1.5rem; letter-spacing: -.015em; }

.comment-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.comment-list .children { list-style: none; margin: 0 0 0 1.5rem; padding: 0; border-left: 1px solid var(--border); padding-left: 1.25rem; }

.comment-body {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9375rem;
}
.comment-author { font-weight: 600; }
.comment-author .avatar { border-radius: 50%; vertical-align: middle; margin-right: .5rem; }
.comment-metadata { font-size: .8125rem; color: var(--text-faint); margin: .25rem 0 .75rem; }
.comment-content { max-width: var(--measure); }
.comment-respond { margin-top: 1.5rem; }

input[type="text"], input[type="email"], input[type="url"], textarea {
  font: inherit;
  font-size: .9375rem;
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--border-control);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-subtle); }
textarea { min-height: 9rem; resize: vertical; }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .35rem; }
.comment-form p { margin-bottom: 1rem; }

input[type="submit"], .wp-block-button__link {
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  padding: .6rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
input[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.wp-block-button { margin-block: 1.5rem; }

/* ============================================================
   9. ACCESSIBILITY HELPERS
   ============================================================ */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  color: var(--bg);
  background: var(--accent);
  display: block;
  font-size: .875rem;
  font-weight: 600;
  height: auto;
  left: .5rem;
  line-height: normal;
  padding: .75rem 1.25rem;
  text-decoration: none;
  top: .5rem;
  width: auto;
  z-index: 100000;
}

.alignleft { float: left; margin: .25rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .25rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide { width: min(100%, 60rem); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: .875rem; color: var(--text-muted); text-align: center; margin-top: .5rem; }

.sticky, .gallery-caption, .bypostauthor { }

/* ---- Print ---- */

@media print {
  .site-header, .site-footer, .post-nav, .comments-area, .pagination, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose pre { border: 1px solid #ccc; page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}