/* ==========================================================================
   The Hog Report — shared stylesheet for resumehog.com/blog
   Referenced by every article (blog/posts/*.html), blog/hog-desk.html and
   blog/main-blog-page.html. A restyle of the blog is a change to THIS file.

   1. Tokens            brand_guideline.md section 3, verbatim
   2. Site chrome v1.1  canonical header, mobile menu, footer (verbatim copy)
   3. Shared helpers    skip link, focus ring, breadcrumb, buttons
   4. Article theme     scoped to body.hr-article
   5. Publication band  the blog-only strip above the canonical footer

   Emitted by blog-autopublisher/article-page-theme.js (template v3). Markup
   and class names here are a contract with that module: change them together.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;

  /* Backgrounds — near-black with solid graphite panels (no glass except header) */
  --bg-color:      #05050A;
  --panel:         #0A0A10;
  --panel-raised:  #0E0E16;

  /* High-contrast text ramp (AA on dark) */
  --text-primary:   #F8F9FA;
  --text-secondary: #8B949E;
  --text-muted:     #767E8A;

  /* The ONLY accent — keep scarce. No purple. */
  --accent-primary: #00f5d4;

  /* Hairlines + restrained glow */
  --border-color:  rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.14);
  --border-glow:   rgba(0,245,212,0.30);
  --glow-color:    rgba(0,245,212,0.25);
  --shadow-color:  rgba(0,0,0,0.80);

  /* Motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  /* Long-form reading ink. A neutral step between --text-primary and
     --text-secondary, carried over from article template v2: 1,500 words of
     --text-secondary on near-black is tiring to read. Not an accent. */
  --article-text: #C8CDD3;
  /* Reading column: 40rem is about 68 characters of Share Tech Mono at the
     article body size. Set in rem so a late web-font swap cannot move it. */
  --article-measure: 40rem;
}

/* ---------- 2. Site chrome v1.1 (canonical, verbatim) ---------- */
/* ==========================================================================
   ResumeHog SITE CHROME v1.2 — canonical skip link, header, mobile menu, footer.
   Copy this block VERBATIM into each surface's <style>. Do not restyle per page.
   Requires the brand tokens in :root (see brand_guideline.md §3) and the
   Orbitron 700/900 + Share Tech Mono font link.
   ========================================================================== */
.rh-icon { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }

/* First focusable element on every page. Off-canvas until it receives focus. */
.skip-link {
  position: absolute; z-index: 100; top: 8px; left: 8px;
  padding: 12px 16px; border: 1px solid var(--accent-primary); border-radius: 6px;
  background: var(--panel-raised); color: var(--text-primary);
  font-family: 'Share Tech Mono', monospace; font-size: 0.82rem; line-height: 1; text-decoration: none;
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
.skip-link:focus { clip-path: none; width: auto; height: auto; overflow: visible; }
/* The page behind an open mobile menu must not scroll. Set by the chrome script. */
html.nav-open { overflow: hidden; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: rgba(5, 7, 10, 0.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  transition: background-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
}
.site-header.is-scrolled { background-color: rgba(5, 7, 10, 0.88); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.34); }
.site-header__inner {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
  min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-brand {
  display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1;
  letter-spacing: 0; color: var(--text-primary); text-decoration: none;
}
.site-brand img { width: 30px; height: 30px; display: block; filter: drop-shadow(0 0 5px rgba(0, 245, 212, 0.55)); }
.site-brand:hover { color: #fff; text-decoration: none; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.74rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap;
  color: var(--text-secondary); text-decoration: none;
  transition: color .2s var(--ease-premium);
}
.site-nav__link:hover { color: var(--text-primary); text-decoration: none; }
.site-nav__link[aria-current="page"] { color: var(--text-primary); }
.site-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1px; background: var(--accent-primary);
}
.site-nav__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; margin-left: 12px;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.74rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  color: #021b18; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #7df6ff 0%, #00f5d4 56%, #00c9b3 100%);
  border: 1px solid rgba(180, 255, 246, 0.7); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform .22s var(--ease-premium), filter .22s var(--ease-premium);
}
.site-nav__cta:hover { transform: translateY(-1px); filter: saturate(1.06) brightness(1.03); color: #021b18; text-decoration: none; }

.site-menu-btn {
  display: none; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 6px; color: var(--text-primary); font-size: 1.35rem; cursor: pointer;
}
.site-menu-btn .icon-close { display: none; }
.site-menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.site-menu-btn[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1040px) {
  .site-header__inner { min-height: 60px; padding: 0 16px; gap: 12px; }
  .site-brand { font-size: 1.05rem; gap: 10px; }
  .site-brand img { width: 26px; height: 26px; }
  /* No-JS fallback: links stay reachable as one scrollable row. JS adds .nav-ready to <html>. */
  .site-nav { overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .nav-ready .site-menu-btn { display: inline-flex; }
  .nav-ready .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0; overflow: visible;
    padding: 8px 16px 20px; background: #07070D; /* solid — glass is header-only */
    border-bottom: 1px solid var(--border-strong); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    height: calc(100vh - 60px); height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-ready .site-nav.is-open { display: flex; }
  .nav-ready .site-nav__link {
    min-height: 52px; padding: 0 4px; font-size: 0.82rem; border-bottom: 1px solid var(--border-color);
  }
  .nav-ready .site-nav__link[aria-current="page"]::after { left: 4px; right: auto; width: 24px; bottom: 12px; }
  .nav-ready .site-nav__cta { min-height: 48px; margin: 18px 0 0; font-size: 0.82rem; }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 96px; border-top: 1px solid var(--border-color); background: var(--panel); }
.site-footer__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 64px 24px 0; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.site-footer__brand p { margin: 16px 0 0; max-width: 34ch; font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary); }
.site-footer__heading {
  margin: 0 0 18px; font-family: 'Share Tech Mono', monospace; font-weight: 400; font-size: 0.78rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer__list a, .site-footer__list span { font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); text-decoration: none; }
.site-footer__list a { transition: color .2s var(--ease-premium); }
.site-footer__list a:hover { color: var(--text-primary); text-decoration: none; }
.site-footer__bar {
  margin-top: 56px; padding: 24px 0 32px; border-top: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-muted);
}
.site-footer__social { display: flex; align-items: center; gap: 4px; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: var(--text-secondary); border-radius: 6px; transition: color .2s var(--ease-premium);
}
.site-footer__social a:hover { color: var(--text-primary); }
.site-footer__social svg { width: 18px; height: 18px; display: block; fill: currentColor; }
@media (max-width: 920px) {
  .site-footer { margin-top: 72px; }
  .site-footer__inner { padding: 48px 16px 0; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bar { margin-top: 40px; }
}
/* Touch screens get full-size targets; pointer devices keep the compact footer. */
@media (pointer: coarse) {
  .site-footer__list { gap: 0; }
  .site-footer__list a, .site-footer__list span { display: flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-nav__link, .site-nav__cta, .site-footer__list a { transition: none; }
}
/* ---------- end of canonical chrome ---------- */

/* ---------- 3. Shared helpers ---------- */
.site-header :focus-visible,
.site-footer :focus-visible,
.hr-article :focus-visible,
.publication-band :focus-visible {
  outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 2px;
}

/* ---------- 4. Article theme ---------- */
.hr-article *,
.hr-article *::before,
.hr-article *::after { box-sizing: border-box; }

html:has(> .hr-article) { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.hr-article {
  min-height: 100vh; margin: 0; padding: 0;
  background: var(--bg-color); color: var(--article-text);
  font-family: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 1rem; line-height: 1.7; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
/* Atmosphere: faint masked grid. Texture, never wallpaper. */
.hr-article::before {
  content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 245, 212, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 212, 0.02) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 640px);
  mask-image: linear-gradient(to bottom, #000 0, transparent 640px);
}
.hr-article ::selection { background: rgba(0, 245, 212, 0.22); color: var(--text-primary); }
.hr-article [hidden] { display: none !important; }

.article-shell {
  width: min(100% - 48px, var(--article-measure));
  margin: 0 auto; padding: 32px 0 0;
}

/* Breadcrumb: Home / The Hog Report / Title */
.breadcrumb { margin: 0 0 48px; }
.breadcrumb ol {
  display: flex; align-items: center; gap: 0; min-width: 0;
  margin: 0; padding: 0; list-style: none;
  font-size: 0.82rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--text-muted);
}
.breadcrumb li { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin: 0 12px; color: var(--border-strong); }
.breadcrumb li:last-child { flex: 0 1 36ch; color: var(--text-secondary); }
.breadcrumb li:last-child > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: color .2s var(--ease-premium);
}
.breadcrumb a:hover { color: var(--text-primary); }

/* Article header */
.article-shell article { margin: 0; padding: 0; }

.article-shell .article-kicker {
  margin: 0 0 16px; max-width: none;
  color: var(--accent-primary);
  font-size: 0.75rem; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase;
}

.article-shell h1,
.article-shell h2,
.article-shell h3,
.article-shell h4 {
  color: var(--text-primary);
  font-family: 'Orbitron', sans-serif;
  text-shadow: none; text-transform: none; text-wrap: balance;
}

/* Article headlines run 50 to 100 characters, so they sit below the site's
   page-title scale (which is tuned for two or three words). */
.article-shell h1 {
  margin: 0;
  font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.75rem);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.1;
}

.article-shell .standfirst,
.article-shell article > h1 + p:not([class]) {
  margin: 24px 0 0;
  color: var(--article-text);
  font-size: 1.125rem; line-height: 1.65;
}
/* An article with no byline row: the body starts a full step below the header. */
.article-shell .standfirst + :not(.post-meta),
.article-shell article > h1 + p:not([class]) + :not(.post-meta),
.article-shell article > h1 + :not(p):not(.post-meta) { margin-top: 48px; }

.article-shell .post-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 0;
  margin: 32px 0 48px; padding: 16px 0;
  overflow: hidden; /* clips the rule in front of the first item on every row */
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.82rem; line-height: 1.5; letter-spacing: 0.02em;
}
/* Items are divided by a hairline that belongs to the item on its right and
   sits outside the row's left edge, so a wrapped row never starts with one. */
.article-shell .post-meta > * {
  margin: 0 33px 0 -17px; padding: 0 0 0 16px;
  border-left: 1px solid var(--border-strong);
  color: var(--text-muted); font-size: inherit; font-style: normal;
}
.article-shell .post-author a {
  color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease-premium);
}
.article-shell .post-author a:hover { border-bottom-color: var(--accent-primary); }

/* Media. Every image is a full-column frame: the picture is fitted inside it,
   never cropped, so square, portrait and landscape art all share the column's
   two edges. Only art taller than the cap (portrait resume previews) is inset. */
.article-shell article img {
  display: block; width: 100%; height: auto; max-height: 44rem;
  margin: 0 0 32px;
  object-fit: contain; object-position: center;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--panel); box-shadow: none;
}
.article-shell .post-illustration { margin: 0 0 48px; padding: 0; }
.article-shell .post-illustration img { margin: 0; filter: grayscale(1) contrast(1.04); }
.article-shell article > img.article-image,
.article-shell article > img.featured-image { margin: 0 0 48px; }
.article-shell figure { margin: 32px 0; padding: 0; }
.article-shell figcaption {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem; line-height: 1.5; letter-spacing: 0.02em;
}

.article-shell .video-container {
  position: relative; height: 0; margin: 32px 0; padding: 0 0 56.25%;
  overflow: hidden; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel);
}
.article-shell .video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }

/* Prose */
.article-shell article { font-size: 1.0625rem; line-height: 1.75; }

.article-shell article h2 {
  margin: 56px 0 16px; padding: 0; border: 0;
  font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.25;
}
.article-shell article h3 {
  margin: 40px 0 12px; padding: 0; border: 0;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
}
.article-shell article h4 {
  margin: 32px 0 8px;
  font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.35;
}
.article-shell article h2 a,
.article-shell article h3 a { color: inherit; }

.article-shell article p { margin: 0 0 24px; color: inherit; }
.article-shell article ul,
.article-shell article ol { margin: 0 0 24px; padding: 0 0 0 1.5rem; }
.article-shell article li { margin: 0 0 12px; padding: 0 0 0 4px; }
.article-shell article li:last-child { margin-bottom: 0; }
.article-shell article li > ul,
.article-shell article li > ol { margin: 12px 0 0; }
.article-shell article li::marker { color: var(--text-muted); }
.article-shell article strong,
.article-shell article b { color: var(--text-primary); font-weight: 400; }
.article-shell article em { font-style: italic; }

.article-shell article a,
.article-shell .page-intro a,
.article-shell .cta-box a:not(.cta-button),
.article-shell .related-posts a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-shadow: none;
  transition: text-decoration-color .2s var(--ease-premium), color .2s var(--ease-premium);
}
.article-shell article a:hover,
.article-shell .page-intro a:hover,
.article-shell .cta-box a:not(.cta-button):hover,
.article-shell .related-posts a:hover {
  color: #fff; text-decoration-color: var(--accent-primary);
}

.article-shell article blockquote {
  margin: 40px 0; padding: 4px 0 4px 24px;
  border: 0; border-left: 2px solid var(--border-strong); border-radius: 0;
  background: none;
  color: var(--text-primary);
  font-size: 1.125rem; font-style: normal; line-height: 1.65;
}
.article-shell article blockquote p:last-child { margin-bottom: 0; }

.article-shell article hr {
  height: 0; margin: 48px 0; border: 0; border-top: 1px solid var(--border-color);
}

.article-shell article code,
.article-shell article kbd {
  padding: 2px 6px; border: 1px solid var(--border-color); border-radius: 4px;
  background: var(--panel-raised); color: var(--text-primary);
  font-family: inherit; font-size: 0.9em;
}
.article-shell article pre {
  margin: 0 0 24px; padding: 16px; overflow-x: auto;
  border: 1px solid var(--border-color); border-radius: 6px; background: var(--panel);
  font-size: 0.9rem; line-height: 1.6;
}
.article-shell article pre code { padding: 0; border: 0; background: none; font-size: inherit; }

/* Tables scroll inside their own box; the page never scrolls sideways. */
.article-shell .compare-wrap,
.article-shell .table-wrap {
  margin: 32px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-strong); border-radius: 6px;
  /* Scroll cue: a soft edge appears on whichever side has more table to show. */
  background:
    linear-gradient(to right, var(--panel) 40%, rgba(10, 10, 16, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 40%, rgba(10, 10, 16, 0)) right center / 48px 100% no-repeat local,
    linear-gradient(to right, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0)) left center / 20px 100% no-repeat scroll,
    linear-gradient(to left, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0)) right center / 20px 100% no-repeat scroll,
    var(--panel);
}
.article-shell article table {
  width: 100%; margin: 32px 0; border-collapse: collapse; border-spacing: 0;
  font-size: 0.9rem; line-height: 1.55;
}
.article-shell .compare-wrap table,
.article-shell .table-wrap table { margin: 0; min-width: 34rem; }
.article-shell article caption {
  padding: 16px; caption-side: top; text-align: left;
  color: var(--text-muted); font-size: 0.82rem; letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border-color);
}
.article-shell article th,
.article-shell article td {
  padding: 12px 16px; text-align: left; vertical-align: top;
  border: 0; border-bottom: 1px solid var(--border-color);
}
.article-shell article thead th {
  color: var(--text-secondary); background: none;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.article-shell article tbody th { color: var(--text-primary); font-weight: 400; }
.article-shell article tbody tr:last-child > * { border-bottom: 0; }

/* Panels inside an article. These blocks ship their own inline <style>
   (publisher refresh blocks, SEO updates, hand-built callouts); the selectors
   below out-rank those so every panel follows the brand surface rules. */
.article-shell article .refresh-update,
.article-shell article .recovery-update,
.article-shell article .try-block,
.article-shell article .tldr,
.article-shell article .ph-sample,
.article-shell article .inline-cta {
  margin: 40px 0; padding: 24px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--panel); box-shadow: none;
  overflow-wrap: anywhere;
}
.article-shell article .refresh-update > :first-child,
.article-shell article .recovery-update > :first-child,
.article-shell article .try-block > :first-child,
.article-shell article .tldr > :first-child,
.article-shell article .ph-sample > :first-child,
.article-shell article .inline-cta > :first-child { margin-top: 0; }
.article-shell article .refresh-update > :last-child,
.article-shell article .recovery-update > :last-child,
.article-shell article .try-block > :last-child,
.article-shell article .tldr > :last-child,
.article-shell article .ph-sample > :last-child,
.article-shell article .inline-cta > :last-child { margin-bottom: 0; }
.article-shell article .refresh-update h2,
.article-shell article .recovery-update h2,
.article-shell article .try-block h2,
.article-shell article .inline-cta h2 { margin: 0 0 16px; font-size: 1.25rem; }
.article-shell article .refresh-update .refresh-note,
.article-shell article .ph-note,
.article-shell article p.note {
  color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6;
}
.article-shell article .refresh-update .refresh-note .rh-icon { color: var(--accent-primary); }
.article-shell article .refresh-history { font-size: 0.9rem; color: var(--text-secondary); }
.article-shell article .ph-sample h3 {
  margin: 24px 0 8px; color: var(--text-secondary);
  font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.article-shell article .ph-sample p,
.article-shell article .ph-sample li { margin-bottom: 8px; }
.article-shell article .ph-sample .ph-name { color: var(--text-primary); font-size: 1.125rem; font-weight: 400; }
.article-shell article .ph-pair {
  margin: 0 0 24px; padding: 0 0 0 16px; border-left: 2px solid var(--border-strong);
}
.article-shell article .ph-pair p { margin-bottom: 8px; }
.article-shell article .sources-list { font-size: 0.9rem; color: var(--text-secondary); }

/* In-article action links keep the link treatment; only real CTAs are buttons. */
.article-shell article a.try-link,
.article-shell article a.ph-inline-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0;
  color: var(--text-primary); font-weight: 400;
}

/* Buttons */
.article-shell .cta-button,
.article-shell article a.cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; margin: 8px 0 0;
  border: 1px solid rgba(180, 255, 246, 0.7); border-radius: 6px;
  background: linear-gradient(180deg, #7df6ff 0%, #00f5d4 56%, #00c9b3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 38px -10px rgba(0, 245, 212, 0.45);
  color: #021b18;
  font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.06em; text-align: center; text-decoration: none; text-shadow: none; text-transform: uppercase;
  transition: transform .22s var(--ease-premium), filter .22s var(--ease-premium);
}
.article-shell .cta-button:hover,
.article-shell article a.cta-button:hover {
  color: #021b18; text-decoration: none;
  transform: translateY(-2px); filter: saturate(1.06) brightness(1.02);
}

/* Closing call to action: a Layer 2 panel, one per article. */
.article-shell .cta-box {
  margin: 64px 0 0; padding: 32px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--panel-raised);
  text-align: left;
}
.article-shell .cta-box::before {
  content: "From the Resume Lab"; display: block; margin: 0 0 16px;
  color: var(--accent-primary);
  font-size: 0.75rem; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase;
}
.article-shell .cta-box h2 {
  margin: 0 0 12px; padding: 0; border: 0;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25;
}
.article-shell .cta-box p { margin: 0 0 24px; color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
.article-shell .cta-box .cta-button { margin: 0; }
.article-shell .cta-box .cta-button + p {
  margin: 24px 0 0 !important;
  font-size: 0.82rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--text-muted);
}

/* Related reading. The block is machine-managed (add-related-links.js) and
   carries an inline max-width/margin, hence the two !important overrides. */
.article-shell .related-posts {
  max-width: none !important; margin: 64px 0 0 !important; padding: 32px 0 0;
  border-top: 1px solid var(--border-strong);
}
.article-shell .related-posts h2 {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; font-weight: 400; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.article-shell .related-posts ul { margin: 0; padding: 0; list-style: none; }
.article-shell .related-posts li { margin: 0; padding: 0; border-bottom: 1px solid var(--border-color); }
.article-shell .related-posts li a {
  display: block; padding: 16px 0;
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35;
  text-decoration-color: transparent;
}
.article-shell .related-posts p {
  margin: 24px 0 0; color: var(--text-muted);
  font-size: 0.82rem; line-height: 1.6; letter-spacing: 0.02em;
}

/* Plain publication pages (blog/hog-desk.html) reuse the article column. The
   list is addressed by id: three publishing tools find it by the exact tag
   <ul id="hogDeskNotesList">, so it cannot carry a class. */
.article-shell .page-intro { margin: 24px 0 48px; color: var(--article-text); font-size: 1.125rem; line-height: 1.65; }
.article-shell #hogDeskNotesList { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.article-shell #hogDeskNotesList li { margin: 0; padding: 0; border-bottom: 1px solid var(--border-color); }
.article-shell #hogDeskNotesList a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding: 16px 0;
  color: var(--text-primary); text-decoration: none;
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35;
  transition: color .2s var(--ease-premium);
}
.article-shell #hogDeskNotesList a::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-top: 1px solid var(--text-muted); border-right: 1px solid var(--text-muted);
  transform: rotate(45deg); transition: border-color .2s var(--ease-premium), transform .2s var(--ease-premium);
}
.article-shell #hogDeskNotesList a:hover { color: #fff; }
.article-shell #hogDeskNotesList a:hover::after { border-color: var(--accent-primary); transform: translateX(2px) rotate(45deg); }

/* The header is 60px tall below its collapse breakpoint (1040px). */
@media (max-width: 1040px) {
  html:has(> .hr-article) { scroll-padding-top: 76px; }
}

@media (max-width: 920px) {
  .article-shell { width: min(100% - 32px, var(--article-measure)); padding-top: 16px; }
  .breadcrumb { margin-bottom: 32px; }
  .article-shell .post-meta { margin: 24px 0 32px; }
  .article-shell .post-illustration { margin-bottom: 32px; }
  .article-shell article > img.article-image,
  .article-shell article > img.featured-image { margin-bottom: 32px; }
  .article-shell .standfirst + :not(.post-meta),
  .article-shell article > h1 + p:not([class]) + :not(.post-meta),
  .article-shell article > h1 + :not(p):not(.post-meta) { margin-top: 32px; }
  .article-shell article h2 { margin-top: 48px; }
  .article-shell .cta-box { margin-top: 48px; padding: 24px; }
  .article-shell .related-posts { margin-top: 48px !important; }
  .article-shell article .refresh-update,
  .article-shell article .recovery-update,
  .article-shell article .try-block,
  .article-shell article .tldr,
  .article-shell article .ph-sample,
  .article-shell article .inline-cta { margin: 32px 0; padding: 20px 16px; }
}

@media (max-width: 480px) {
  .article-shell article { font-size: 1rem; line-height: 1.7; }
  .article-shell .standfirst,
  .article-shell article > h1 + p:not([class]),
  .article-shell .page-intro { font-size: 1.0625rem; }
  /* The byline and date stack on a phone. */
  .article-shell .post-meta { display: grid; gap: 4px; }
  .article-shell .post-meta > * { margin: 0; padding: 0; border: 0; }
  .article-shell .cta-box .cta-button { display: flex; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(> .hr-article) { scroll-behavior: auto; }
  .hr-article *,
  .hr-article *::before,
  .hr-article *::after { transition: none !important; animation: none !important; }
}

/* ---------- 5. Publication band (blog pages only, above the canonical footer) ---------- */
.publication-band { margin-top: 96px; border-top: 1px solid var(--border-strong); }
.publication-band + .site-footer { margin-top: 0; }
.publication-band__inner {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px 48px;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 24px;
  font-family: 'Share Tech Mono', monospace; color: var(--text-secondary);
}
.publication-band__name {
  margin: 0; color: var(--text-primary);
  font-family: 'Orbitron', sans-serif; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
}
.publication-band__copy { margin: 8px 0 0; max-width: 56ch; font-size: 0.88rem; line-height: 1.7; }
.publication-band__links { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.publication-band__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-secondary); font-size: 0.88rem; text-decoration: none;
  transition: color .2s var(--ease-premium);
}
.publication-band__links a:hover { color: var(--text-primary); }
@media (max-width: 920px) {
  .publication-band { margin-top: 72px; }
  .publication-band__inner { padding: 32px 16px; }
}