/* =====================================================================
   DarkControl Blog.

   The token block, base type, header, footer and button styles are taken
   verbatim from the marketing site (darkcontrol/index.php) so the two
   render as one system. Everything below "Blog" is new: listing grids,
   the article measure, and one rule per content block type.

   Crimson stays reserved for CTAs and accents. The single addition is
   .article-body strong, which is crimson: that is the bold treatment the
   editor gives authors.
   ===================================================================== */

:root {
  --ink:         #101218;
  --body:        #3d4350;
  --muted:       #636a78;
  --faint:       #878d9b;
  --line:        #e8eaee;
  --line-strong: #d7dae1;
  --bg:          #ffffff;
  --bg-soft:     #f7f8f9;
  --crimson:     #a90f2d;
  --crimson-dark:#8c0c25;
  --green:       #15803d;
  --green-soft:  #e9f5ee;
  --amber:       #a16207;
  --amber-soft:  #faf3e3;
  --red:         #b42318;
  --red-soft:    #fdecea;
  --dark:        #101218;
  --dark-2:      #16181f;
  --dark-line:   rgba(255, 255, 255, 0.1);
  --dark-text:   #c2c7d1;
  --dark-muted:  #8d93a1;
  --font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 44px);
  --measure: 720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: light; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html, body { overflow-x: hidden; overflow-x: clip; }
/* height:auto is load-bearing, not tidiness.
   blog_img_tag() emits width= and height= attributes so the browser can
   reserve the right box before the file arrives, which is what stops the
   page jumping as images load. But those attributes also SET the rendered
   size. Any rule that then constrains the width (the cover, .b-fig, or
   just max-width on a narrow screen) changes the width and leaves the
   height at the attribute value, so the image renders stretched. A
   1672x941 cover in the 1040px column came out 1040x941: squashed by 38%.
   height:auto lets the height follow the width and preserve the ratio. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 0.88em; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); font-weight: 600; }
h4, h5 { color: var(--ink); font-weight: 600; }

.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;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; border-radius: 3px; }

.eyebrow {
  display: block;
  font: 600 12px/1.4 var(--font);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section-alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 500 15px/1 var(--font);
  padding: 14px 24px; border-radius: 5px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-dark); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); }

/* ---- Header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 40px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo img { width: 40px; height: 40px; }
.logo .logo-text { font: 600 21px/1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.logo-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 2px; }
.logo-kicker {
  font: 600 11.5px/1 var(--font); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--crimson); padding-top: 1px;
}
.nav-links { display: flex; gap: 30px; }
.nav-links a { font: 500 14.5px/1 var(--font); color: var(--body); padding: 8px 0; transition: color .15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-cta .btn-primary { padding: 11px 18px; font-size: 14px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 8px; margin-right: -8px; }
.nav-toggle svg { width: 22px; height: 22px; }

.navsearch { position: relative; display: flex; align-items: center; }
.navsearch svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.navsearch input {
  font: 400 14px/1 var(--font); color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 14px 9px 32px; width: 180px;
  transition: width .18s ease, border-color .15s ease, background .15s ease;
}
.navsearch input:focus { outline: none; width: 230px; background: #fff; border-color: var(--line-strong); }
.navsearch input::placeholder { color: var(--faint); }

/* ---- Footer -------------------------------------------------------- */
.site-footer { background: var(--dark); padding: 72px 0 40px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.site-footer .logo .logo-text { color: #fff; }
.footer-brand p { margin-top: 18px; font-size: 14px; line-height: 1.65; color: var(--dark-muted); max-width: 320px; }
.footer-col h5 {
  font: 600 11.5px/1.5 var(--font); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dark-muted); margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col ul a { font-size: 14px; color: var(--dark-text); }
.footer-col ul a:hover { color: #fff; }
.footer-bottom {
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--dark-line);
  font-size: 13px; color: var(--dark-muted);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
}

/* =====================================================================
   Blog : index
   ===================================================================== */

.bloghero { padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 52px); position: relative; overflow: hidden; }
.bloghero > .container { position: relative; }
.bloghero::before {
  content: ""; position: absolute; top: 50%; right: 0;
  width: clamp(420px, 48vw, 700px); aspect-ratio: 1 / 1;
  transform: translate(44%, -50%);
  background: url("/assets/img/darkcontrol_mark.png") center / contain no-repeat;
  opacity: 0.13; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 92%);
          mask-image: linear-gradient(to left, #000 35%, transparent 92%);
}
.bloghero h1 {
  max-width: 900px; margin-top: 24px;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.03em;
}
.bloghero h1 .accent { color: var(--crimson); }
.bloghero .lead {
  max-width: 620px; margin-top: 22px;
  font-size: clamp(16px, 1.7vw, 18px); line-height: 1.62; color: var(--muted);
}

/* Topic pills */
.tagbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.tagpill {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 13px/1 var(--font); color: var(--body);
  background: #fff; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 8px 14px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tagpill:hover { border-color: var(--ink); color: var(--ink); }
.tagpill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tagpill .n { font: 500 11px/1 var(--mono); color: var(--faint); }
.tagpill.is-on .n { color: rgba(255,255,255,.6); }

/* Listing grid: hairline structure, matching the marketing site cards.
   The rules are drawn on the cards themselves rather than as grid gaps
   over a tinted background, so a part-filled last row leaves white space
   instead of a grey block. */
.postgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; background: #fff;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin-top: 8px;
}
.pcard {
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pcard__link { display: flex; flex-direction: column; height: 100%; }
.pcard__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pcard:hover .pcard__img img { transform: scale(1.03); }
/* A post with no cover shows no image area rather than an empty frame. */
.pcard--nocover .pcard__body { padding-top: 30px; }
.pcard--nocover .pcard__tag { margin-bottom: 14px; }
.pcard__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.pcard__tag {
  display: inline-block; align-self: flex-start;
  font: 600 10.5px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 12px;
}
.pcard__t { font-size: 19px; line-height: 1.28; letter-spacing: -0.015em; }
.pcard:hover .pcard__t { color: var(--crimson); }
.pcard__x { margin-top: 10px; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.pcard__m { margin-top: auto; padding-top: 18px; font-size: 12.5px; color: var(--faint); }
.pcard__m .sep { margin: 0 7px; color: var(--line-strong); }

/* Featured, first item spans two columns */
.pcard--wide { grid-column: span 2; }
.pcard--wide .pcard__link { flex-direction: row; }
.pcard--wide .pcard__img { aspect-ratio: auto; width: 46%; flex: none; border-bottom: 0; border-right: 1px solid var(--line); }
.pcard--wide .pcard__t { font-size: 26px; letter-spacing: -0.022em; }
.pcard--wide .pcard__x { font-size: 15.5px; }
.pcard--wide .pcard__body { padding: 34px 36px; justify-content: center; }

.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; }
.sechead h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.sechead a { font: 500 14px/1 var(--font); color: var(--crimson); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.pager__i { font: 400 13.5px/1 var(--font); color: var(--faint); }
.pager__n { display: flex; gap: 10px; }
.pager__n a, .pager__n span {
  font: 500 14px/1 var(--font); padding: 11px 18px; border-radius: 5px;
  border: 1px solid var(--line-strong); color: var(--ink);
}
.pager__n span { color: var(--faint); border-color: var(--line); }

.empty { padding: 64px 0; text-align: center; color: var(--muted); }
.empty h2 { font-size: 22px; margin-bottom: 10px; }
.err-h { margin-top: 16px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.03em; }
.err-p { margin-top: 14px; font-size: 17px; color: var(--muted); }

/* Search */
.searchwrap { max-width: 640px; margin-top: 28px; }
.searchform { display: flex; gap: 10px; }
.searchform input {
  flex: 1; font: 400 16px/1 var(--font); color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; padding: 15px 16px;
}
.searchform input:focus { outline: none; border-color: var(--ink); }
.searchmeta { margin-top: 18px; font-size: 14px; color: var(--muted); }
.searchmeta strong { color: var(--ink); font-weight: 600; }

/* =====================================================================
   Blog : article
   ===================================================================== */

.article { padding: clamp(40px, 5vw, 64px) 0 0; }
.article-head { max-width: var(--measure); margin: 0 auto; }
.article-head .crumbs { font-size: 13px; color: var(--faint); margin-bottom: 20px; }
.article-head .crumbs a:hover { color: var(--crimson); }
.article-head .kicker {
  font: 600 12px/1.4 var(--font); letter-spacing: 0.11em; text-transform: uppercase; color: var(--crimson);
}
.article-head h1 {
  margin-top: 16px;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.03em;
}
.article-head .sub { margin-top: 18px; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; color: var(--muted); }

.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 30px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.article-meta .who { font-weight: 600; color: var(--ink); }
.article-meta .sep { color: var(--line-strong); }

.article-cover { margin: 36px auto 0; max-width: 1040px; }
.article-cover img {
  width: 100%;
  height: auto;              /* never distort, whatever gets uploaded */
  /* A portrait cover would otherwise be taller than the screen and push
     the article below the fold. Cap it and crop from the centre rather
     than letterboxing, so the hero stays a consistent band. Inert for
     any landscape image, where height:auto lands well under the cap. */
  max-height: 82vh;
  object-fit: cover;
  object-position: center;
  border-radius: 8px; border: 1px solid var(--line);
}
.article-cover figcaption { margin-top: 12px; font-size: 13px; color: var(--faint); text-align: center; }

/* The measure. Blocks that break out do so with explicit widths below. */
.article-body { max-width: var(--measure); margin: 0 auto; padding: 40px 0 0; }
.article-body > * + * { margin-top: 26px; }
.article-body p { font-size: 17.5px; line-height: 1.78; color: var(--body); }

/* Bold in body copy is the author's emphasis treatment: crimson. */
.article-body strong { color: var(--crimson); font-weight: 600; }

/* Author-chosen text colour, from the {name|text} construct in
   blog/inc/blocks.php. The dialect carries a NAME, so the colour value
   lives here and nothing an author writes reaches a style attribute.
   Contrast checked against the article background; the three accent
   colours are darkened from their UI equivalents to clear 4.5:1 on
   white at body size. */
.b-c { font-weight: inherit; }
.b-c--crimson { color: var(--crimson); }
.b-c--ink     { color: var(--ink); }
.b-c--muted   { color: var(--muted); }
.b-c--green   { color: #16704a; }
.b-c--amber   { color: #8a5800; }
.b-c--blue    { color: #14509e; }

/* Bold inside a coloured run keeps the run's colour rather than snapping
   back to crimson, otherwise colouring a sentence that contains bold
   silently does nothing to the bold part. */
.article-body .b-c strong { color: inherit; }
.article-body em { font-style: italic; }
.article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--crimson); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article-body a:hover { color: var(--crimson); }
.article-body code {
  font-family: var(--mono); font-size: 0.87em;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink);
}

.article-body h2.b-h { margin-top: 52px; font-size: clamp(24px, 2.8vw, 31px); line-height: 1.2; letter-spacing: -0.022em; }
.article-body h3.b-h { margin-top: 42px; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.26; letter-spacing: -0.016em; }
.article-body h4.b-h { margin-top: 34px; font-size: 17.5px; line-height: 1.3; font-family: var(--display); }

/* Lists */
/* list-style:none must cover <ol> too: the global reset only clears
   <ul>, so a numbered list would show the native marker AND the
   counter, printing "1. 1." */
.b-list { padding-left: 4px; display: grid; gap: 11px; list-style: none; }
.b-list li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.72; }
.b-list--bullet li::before {
  content: ""; position: absolute; left: 6px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--crimson);
}
ol.b-list { counter-reset: b; }
.b-list--number li { counter-increment: b; }
.b-list--number li::before {
  content: counter(b) "."; position: absolute; left: 0; top: 0;
  font: 600 14px/1.72 var(--mono); color: var(--crimson);
}
.b-list--check li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 11px; height: 6px; border-left: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson);
  transform: rotate(-45deg);
}

/* Images: size and placement are set per block by the editor. */
.b-fig { margin-left: auto; margin-right: auto; }
.b-fig img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.b-fig figcaption { margin-top: 11px; font-size: 13px; line-height: 1.6; color: var(--faint); }
.b-fig--small  { max-width: 320px; }
.b-fig--medium { max-width: 520px; }
.b-fig--large  { max-width: 100%; }
.b-fig--wide   { max-width: 1040px; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.b-fig--full   { max-width: none; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.b-fig--full img { border-radius: 0; border-left: 0; border-right: 0; }
.b-fig--wide figcaption, .b-fig--full figcaption { text-align: center; }
/* Float only applies to the two narrow sizes (enforced in the renderer). */
.b-fig--small.b-fig--left,  .b-fig--medium.b-fig--left  { float: left;  margin: 6px 30px 18px 0; }
.b-fig--small.b-fig--right, .b-fig--medium.b-fig--right { float: right; margin: 6px 0 18px 30px; }
.article-body::after { content: ""; display: block; clear: both; }

/* Gallery */
.b-gallery { display: grid; gap: 14px; }
.b-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.b-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.b-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.b-gallery figcaption { margin-top: 8px; font-size: 12.5px; color: var(--faint); }

/* Embeds */
.b-embed { margin-left: auto; margin-right: auto; }
.b-embed__frame { position: relative; padding-top: 56.25%; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); }
.b-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-embed figcaption { margin-top: 11px; font-size: 13px; color: var(--faint); text-align: center; }
.b-embed--x  { display: flex; flex-direction: column; align-items: center; }
.b-embed--x .twitter-tweet { margin: 0 auto !important; }
.b-embed--linkedin iframe { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }

/* Quote */
.b-quote { border-left: 3px solid var(--crimson); padding: 4px 0 4px 26px; }
.b-quote p { font-family: var(--display); font-size: clamp(20px, 2.3vw, 25px); line-height: 1.42; letter-spacing: -0.018em; color: var(--ink); font-weight: 500; }
.b-quote cite { display: block; margin-top: 14px; font-size: 13.5px; font-style: normal; color: var(--faint); }

/* Callouts */
.b-callout { border: 1px solid var(--line-strong); border-radius: 8px; padding: 22px 24px; background: var(--bg-soft); }
.b-callout__t { font: 600 13px/1.4 var(--font) !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 9px; }
.b-callout__b p { font-size: 16px; line-height: 1.7; }
.b-callout--insight { background: var(--green-soft); border-color: rgba(21,128,61,.24); }
.b-callout--insight .b-callout__t { color: var(--green); }
.b-callout--warning { background: var(--amber-soft); border-color: rgba(161,98,7,.26); }
.b-callout--warning .b-callout__t { color: var(--amber); }
.b-callout--crimson { background: var(--red-soft); border-color: rgba(169,15,45,.22); }
.b-callout--crimson .b-callout__t { color: var(--crimson); }

/* Key takeaways */
.b-takeaways { border: 1px solid var(--line-strong); border-top: 3px solid var(--crimson); border-radius: 4px 4px 8px 8px; padding: 26px 28px; background: #fff; }
.b-takeaways__t { font: 600 12px/1.4 var(--font) !important; letter-spacing: 0.11em; text-transform: uppercase; color: var(--crimson); margin-bottom: 16px; }
.b-takeaways ul { display: grid; gap: 12px; list-style: none; }
.b-takeaways li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.65; }
.b-takeaways li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 5px; border-left: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); transform: rotate(-45deg); }

/* Code */
.b-code { border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--dark); }
.b-code__l { display: block; padding: 9px 16px; border-bottom: 1px solid var(--dark-line); font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-muted); }
.b-code pre { padding: 18px 20px; overflow-x: auto; }
.b-code code { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--dark-text); background: none; border: 0; padding: 0; }

.b-btnwrap { padding: 6px 0; }
/* A button inside an article is a button, not a link.
   `.article-body a` is more specific than `.btn-primary` AND lands later
   in the file, so it won both ways: the label came out ink-black and
   underlined inside a crimson pill. These restore the marketing site's
   treatment verbatim (darkcontrol/index.php, .btn-primary). */
.article-body a.btn { text-decoration: none; }
.article-body a.btn-primary { color: #fff; }
.article-body a.btn-primary:hover { color: #fff; background: var(--crimson-dark); }
.article-body a.btn-secondary { color: var(--ink); }
.article-body a.btn-secondary:hover { color: var(--ink); border-color: var(--ink); }
.b-rule { border: 0; border-top: 1px solid var(--line); margin: 44px auto; width: 96px; }

/* ---- Article footer: tags, like, share ----------------------------- */
.article-foot { max-width: var(--measure); margin: 56px auto 0; padding-top: 30px; border-top: 1px solid var(--line); }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.article-tags a {
  font: 500 12.5px/1 var(--font); color: var(--body);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
}
.article-tags a:hover { border-color: var(--ink); color: var(--ink); }

.engage { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.likebtn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14.5px/1 var(--font); color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 12px 20px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.likebtn:hover { border-color: var(--crimson); color: var(--crimson); }
.likebtn svg { width: 17px; height: 17px; transition: transform .2s ease; }
.likebtn.is-liked { background: var(--crimson); border-color: var(--crimson); color: #fff; cursor: default; }
.likebtn.is-liked svg { fill: currentColor; transform: scale(1.08); }
.likebtn[disabled] { opacity: 1; }
.likebtn .n { font-family: var(--mono); font-size: 13px; }

.share { display: flex; align-items: center; gap: 10px; }
.share span { font-size: 13px; color: var(--faint); }
.share a, .share button {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--body);
  background: #fff; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.share a:hover, .share button:hover { border-color: var(--ink); color: var(--ink); }
.share svg { width: 16px; height: 16px; }

/* Author card */
.authorcard { display: flex; gap: 18px; align-items: flex-start; margin-top: 34px; padding: 24px 26px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.authorcard .av { width: 46px; height: 46px; border-radius: 50%; flex: none; background: url("/assets/img/darkcontrol_mark.png") center / 74% no-repeat #fff; border: 1px solid var(--line-strong); }
.authorcard .nm { font: 600 15.5px/1.3 var(--display); color: var(--ink); }
.authorcard .rl { font-size: 12.5px; color: var(--crimson); margin-top: 3px; }
.authorcard .bo { margin-top: 9px; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* Related */
.related { margin-top: 72px; padding-top: 0; }
.related .postgrid { margin-top: 0; }

/* Reading progress */
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--crimson); width: 0; z-index: 70; transition: width .1s linear; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  .postgrid { grid-template-columns: repeat(2, 1fr); }
  .pcard--wide { grid-column: span 2; }
}
@media (max-width: 960px) {
  .nav { gap: 16px; }
  .nav-toggle { display: block; }
  .navsearch input { width: 150px; }
  .nav-links {
    position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff;
    border-bottom: 1px solid var(--line); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 13px var(--gutter); font-size: 16px; }
}
@media (max-width: 760px) {
  .postgrid { grid-template-columns: 1fr; }
  .pcard--wide, .pcard--wide .pcard__link { grid-column: span 1; flex-direction: column; }
  .pcard--wide .pcard__img { width: 100%; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .navsearch { display: none; }
  .b-fig--small.b-fig--left, .b-fig--small.b-fig--right,
  .b-fig--medium.b-fig--left, .b-fig--medium.b-fig--right { float: none; margin: 0 auto; max-width: 100%; }
  .b-gallery--2, .b-gallery--3 { grid-template-columns: 1fr; }
  .b-fig--wide, .b-fig--full { width: auto; margin-left: auto; transform: none; }
  .engage { flex-direction: column; align-items: stretch; }
  .share { justify-content: space-between; }
}
@media (max-width: 520px) {
  .article-body p, .b-list li { font-size: 16.5px; }
  .b-code pre { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pcard__img img, .likebtn svg, .progress { transition: none; }
}

@media print {
  .site-header, .site-footer, .engage, .related, .progress, .skip { display: none; }
  .article-body { max-width: none; }
}

/* =====================================================================
   Mobile refinements.

   Driven by a real audit at 360, 390, 768 and 1024 px: comfortable tap
   targets on anything finger-operated, and no body text below 12px.
   The small-caps labels are a deliberate design device, so they are
   nudged up on small screens rather than redesigned.
   ===================================================================== */

@media (max-width: 760px) {
  /* Footer links are the densest tap targets on the site. Give each one
     a full row so a thumb cannot miss. */
  .footer-col ul { gap: 2px; }
  .footer-col ul a {
    display: block;
    padding: 13px 0;
    min-height: 44px;
    line-height: 18px;
  }
  .footer-bottom { gap: 8px 20px; line-height: 1.7; }

  /* Breadcrumbs and other inline navigation links. */
  .chero > .container > p a,
  .article-head .crumbs a,
  .learnbar__back,
  .learn__test {
    display: inline-block;
    padding: 11px 0;
    min-height: 44px;
  }

  /* Nothing readable drops below 12px on a phone. */
  .logo-kicker { font-size: 12px; }
  .course__lvl span { font-size: 11.5px; }
  .parthead__n { font-size: 12px; padding: 9px 15px; }
  .l-callout__k, .l-card__k, .l-check__k, .l-reveal__k,
  .l-cmp__t, .l-flip__hint { font-size: 12px; }
  .eyebrow { font-size: 12px; }

  /* Comfortable reading measure and rhythm on a narrow screen. */
  .l-body p, .l-list li { font-size: 16.5px; }
  .l-body > * + * { margin-top: 22px; }
  .learn__nav { flex-direction: column; align-items: stretch; }
  .learn__nav .btn { width: 100%; }

  /* Interactive cards need room for their content once stacked. */
  .l-card, .l-card__in { min-height: 150px; }
  .l-card__f, .l-card__b { padding: 18px 18px; }

  /* Wide content must scroll inside itself, never the page. */
  .l-tablewrap, .l-code pre, .b-code pre { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 430px) {
  /* Buttons go full width so they are unmissable and never wrap oddly. */
  .hero-ctas .btn, .namerow .btn, .verifyform .btn, .searchform .btn { width: 100%; }
  .namerow, .verifyform, .searchform { flex-direction: column; }
  .namerow input, .verifyform input, .searchform input { width: 100%; }
  .certacts { flex-direction: column; align-items: stretch; }
  .certacts a, .certacts button { justify-content: center; }
  .examfoot { flex-direction: column; align-items: stretch; }
  .examfoot .btn { width: 100%; }
  .opt { padding: 14px 15px; }
}

/* ---- Blog-specific mobile refinements ------------------------------ */
@media (max-width: 760px) {
  /* Topic pills and article tags are primary navigation on a phone, so
     they get a full 44px touch height rather than the desktop chip size. */
  .tagpill {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }
  .tagbar { gap: 10px; }
  .tagpill .n { font-size: 12px; }

  .article-tags a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 12px 15px;
    font-size: 13.5px;
  }
  .article-tags { gap: 10px; }

  /* Card labels and code captions stay legible. */
  .pcard__tag { font-size: 12px; }
  .b-code__l { font-size: 12px; }
  .pcard__m { font-size: 13px; }

  /* Share controls are round icon buttons: keep them thumb-sized. */
  .share a, .share button { width: 44px; height: 44px; }
  .likebtn { min-height: 48px; padding: 13px 22px; }

  /* Pager buttons go full width so they are easy to hit. */
  .pager { flex-direction: column; align-items: stretch; gap: 14px; }
  .pager__n { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pager__n a, .pager__n span { text-align: center; min-height: 44px; display: grid; place-items: center; }

  /* Section-header links ("All articles" beside Related reading). */
  .sechead a { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 0; }

  /* Article body measure on a narrow screen. */
  .article-body p, .b-list li { font-size: 16.5px; }
}

/* ---- Narrow-phone header ------------------------------------------- */
/* Same cause as certify: overflow-x:clip hides the overflow, so the CTA
   was cropped rather than reported. */
@media (max-width: 620px) {
  .nav-cta .btn-primary { display: none; }   /* still in the footer */
  .nav { gap: 12px; }
  .logo .logo-text { font-size: 19px; }
}
@media (max-width: 380px) {
  .logo-sep, .logo-kicker { display: none; }
}