/* ==========================================================================
   Blog styles — The AI Web Mechanic

   Shared by the blog index and every post, so a new post is one HTML file and
   nothing else. The tokens are the same ones the main site uses; if you ever
   change the brand colour on index.html, change it here too and the blog
   follows.
   ========================================================================== */

:root {
  --ink:        #12181b;
  --ink-soft:   #1a2226;
  --panel:      #1f292e;
  --line-dark:  #2d3a40;
  --steel:      #93a5a2;
  --paper:      #eef1ef;
  --card:       #ffffff;
  --line:       #d7ded8;
  --txt:        #22302d;
  --mut:        #5c6b67;
  --green:      #14966a;
  --green-deep: #0d7452;
  --green-hi:   #33cf90;
  --amber:      #edb440;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --shadow-card: 0 1px 2px rgba(18,24,27,.05), 0 8px 24px -12px rgba(18,24,27,.18);
  --shadow-lift: 0 2px 4px rgba(18,24,27,.06), 0 20px 40px -16px rgba(18,24,27,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
/* The home page widens its gutter on a desktop; matching it here keeps every
   section on every page lined up to the same edges. */
@media (min-width: 1024px) { .wrap { padding: 0 40px; } }
.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; background: var(--green);
  color: #fff; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ----------------------------------------------------------------- header */
/* Byte for byte what index.html and public.css declare, so the header is the
   same height, the same inset and the same logo on every page. The blog had
   its own: a 40px inset from .wrap that the other two cancel, a taller bar and
   a logo sized by width instead of height. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,24,27,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
  color: #fff;
}
.site-header nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0;
}
.brand img { height: 56px; width: auto; }
@media (min-width: 640px) { .brand img { height: 64px; } }

/* One line or the hamburger, never a cramped two rows. The eight items, the
   logo and the button need more room than .wrap ever hands out below this
   width, so the breakpoint sits above that rather than below it. */
.nav-links { display: none; gap: 22px; font-size: 14.5px; font-weight: 600; }
.nav-links a { color: #cfdad7; text-decoration: none; white-space: nowrap; transition: color .18s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--green-hi); }
.nav-check { color: var(--green-hi) !important; }
@media (min-width: 1160px) { .nav-links { display: flex; } }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: transform .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); }
/* --green is a fine accent but a poor background for white text: the two
   only reach 3.75:1, under the 4.5:1 needed to read comfortably. --green-deep
   is the same brand green a shade further down and reaches 5.77:1. */
.btn--green { background: var(--green-deep); color: #fff; }
.btn--green:hover { background: #0b6a4a; }
.btn--ghost { background: transparent; color: #dfe8e5; border-color: #3c4a50; }
.btn--ghost:hover { border-color: var(--green-hi); color: var(--green-hi); }
.btn--sm { padding: 9px 16px; font-size: 14px; }

/* ------------------------------------------------------------- the dark hero */
.blueprint {
  background:
    linear-gradient(rgba(18,24,27,.97), rgba(18,24,27,.97)),
    repeating-linear-gradient(0deg, #2d3a40 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, #2d3a40 0 1px, transparent 1px 40px);
  background-color: var(--ink);
  color: #fff;
  position: relative;
}
.blueprint > * { position: relative; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green-hi);
}
.tag::before { content: ''; width: 22px; height: 1px; background: currentColor; }

/* --------------------------------------------------------------- post hero */
.postHero { padding: clamp(40px, 6vw, 76px) 0 clamp(36px, 5vw, 60px); }
.postHero h1 {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.12; margin: 16px 0 0;
  font-stretch: 108%; letter-spacing: -.015em; max-width: 20ch;
}
.postHero .standfirst {
  margin-top: 18px; font-size: clamp(17px, 2vw, 20px);
  color: #a9b8b4; max-width: 58ch;
}
.postMeta {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--steel);
}
.postMeta .dot { color: #3c4a50; }

/* ------------------------------------------------------------- the article */
.postBody { padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 7vw, 96px); }
.prose { max-width: 68ch; margin: 0 auto; }
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  font-size: clamp(23px, 3vw, 31px); line-height: 1.22; margin-top: 2em;
  font-stretch: 106%; letter-spacing: -.01em;
}
.prose h3 {
  font-size: clamp(18px, 2.2vw, 21px); line-height: 1.3; margin-top: 1.7em;
  font-stretch: 104%;
}
.prose p { font-size: 17.5px; }
.prose strong { font-weight: 700; }
.prose a { color: var(--green-deep); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--green); }

.prose figure { margin: 2.2em 0; }
.prose figure img, .prose figure svg { border-radius: 12px; }

/* Two drawings that sit side by side when there is room and stack when
   there is not. Each keeps its own viewBox so its text renders at the
   size it was drawn at instead of being scaled down to nothing. */
.twoUp { display: grid; gap: 18px; align-items: start; }
.twoUp > svg { width: 100%; height: auto; display: block; }
@media (min-width: 620px) { .twoUp { grid-template-columns: 1fr 1fr; } }
.prose figure img { box-shadow: var(--shadow-card); }
.prose figcaption {
  margin-top: 10px; font-size: 14px; color: var(--mut); font-family: var(--mono);
}

/* A line worth stopping on. Use sparingly — one a post, at most. */
.pull {
  margin: 2em 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--green);
  font-size: clamp(20px, 2.6vw, 25px); line-height: 1.35;
  font-weight: 600; font-stretch: 104%; letter-spacing: -.01em;
}

/* An aside: a definition, a caveat, something worth boxing off. */
.note {
  margin: 2em 0; padding: 20px 24px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-card); font-size: 16px;
}
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note .noteLabel {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep);
  display: block; margin-bottom: 8px;
}

.prose pre {
  margin: 2em 0; padding: 18px 20px; border-radius: 12px; overflow-x: auto;
  background: var(--ink); color: #dfe8e5;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6;
}
.prose pre > code { display: block; width: max-content; min-width: 100%; }
.prose :not(pre) > code {
  font-family: var(--mono); font-size: .88em;
  background: #e3e9e5; padding: 2px 6px; border-radius: 5px;
}
.prose hr { margin: 2.6em 0; border: 0; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ end-of-post */
.postCta {
  margin-top: 3em; padding: 30px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.postCta h2 { margin: 0 0 10px; font-size: 22px; }
.postCta p { margin: 0 0 18px; color: var(--mut); font-size: 16px; }
/* A button inside the article is still an <a>, and `.prose a` is the more
   specific selector, so the link colour was overriding the button's own and
   painting dark green text on a green background. These put it back. */
.prose a.btn--green { color: #fff; }
.prose a.btn--green:hover { color: #fff; }
.postCta .btn--ghost, .prose a.btn--ghost { color: var(--txt); border-color: var(--line); }
.postCta .btn--ghost:hover, .prose a.btn--ghost:hover { border-color: var(--green-deep); color: var(--green-deep); }

.byline {
  margin-top: 2.4em; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; gap: 16px; align-items: center;
}
.byline img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.byline p { margin: 0; font-size: 15px; color: var(--mut); }
.byline strong { color: var(--txt); display: block; font-size: 16px; }

/* ------------------------------------------------------------ index listing */
.listHero { padding: clamp(46px, 7vw, 84px) 0 clamp(30px, 4vw, 48px); }
.listHero h1 { font-size: clamp(34px, 5.4vw, 58px); margin: 16px 0 0; font-stretch: 108%; letter-spacing: -.015em; }
.listHero .lede { margin-top: 18px; font-size: clamp(17px, 2vw, 20px); color: #a9b8b4; max-width: 56ch; }

.postList { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 92px); }
.postGrid { display: grid; gap: 24px; }
@media (min-width: 760px)  { .postGrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .postGrid { grid-template-columns: repeat(3, 1fr); } }

.postCard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.postCard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #bfcdc6; }
.postCard .kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep);
}
.postCard h2 { margin: 12px 0 0; font-size: 21px; line-height: 1.28; font-stretch: 104%; }
.postCard p { margin: 10px 0 0; color: var(--mut); font-size: 15.5px; }
.postCard .when {
  margin-top: auto; padding-top: 18px;
  font-family: var(--mono); font-size: 12.5px; color: var(--mut);
}

/* ------------------------------------------------------------ mobile menu */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-dark); border-radius: 8px;
  color: #fff; padding: 9px; cursor: pointer;
  transition: background-color .18s ease;
}
.menu-btn:hover { background: rgba(255,255,255,.07); }
.headerActions { display: flex; align-items: center; gap: 12px; }
.header-cta { display: none; padding: 9px 16px; font-size: 14px; white-space: nowrap; }
@media (min-width: 600px)  { .header-cta { display: inline-flex; } }
@media (min-width: 1160px) { .menu-btn { display: none; } }

.mobile-menu { border-top: 1px solid var(--line-dark); background: var(--ink); }
@media (min-width: 1160px) { .mobile-menu { display: none !important; } }
.mobile-menu .inner { display: flex; flex-direction: column; gap: 2px; padding: 14px 0 18px; }
.mobile-menu a {
  text-decoration: none; color: #cfd9d6; font-weight: 600; font-size: 15px;
  padding: 11px 12px; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.mobile-menu a:hover { background: rgba(255,255,255,.06); color: var(--green-hi); }
.mobile-menu a[aria-current="page"] { color: var(--green-hi); }
.mobile-menu .btn { margin-top: 10px; color: #fff; }
.hidden { display: none !important; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: #0d1214; color: #8a9a96; border-top: 1px solid var(--line-dark); }
.footer-grid { display: grid; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.site-footer .brand-name { font-weight: 800; font-size: 18px; color: #fff; font-stretch: 112%; }
.site-footer .small { margin-top: 8px; font-size: 14px; }
.site-footer a { color: inherit; text-decoration: none; transition: color .18s ease; }
.site-footer a:hover { color: var(--green-hi); }
.footer-nav { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; font-weight: 600; }

@media print {
  .site-header, .site-footer, .postCta, .skip { display: none; }
  body { background: #fff; }
}

/* A portrait in the middle of an article. Left full width it would swallow
   the page, so it is held narrow and centred, the way the home page treats
   the same picture. */
.prose figure.portrait { max-width: 340px; margin-left: auto; margin-right: auto; }
.prose figure.portrait figcaption { text-align: center; }

/* ------------------------------------------------------------- the promo */
/* Two columns where there is room — the words on the left, the photograph
   circular on the right — and stacked on a phone. The photo is a square
   source file rather than a CSS crop of the tall portrait, because cropping
   that to a circle in CSS alone centres on the chest, not the face. */
.prose .promo {
  margin: 2.6em 0;
  padding: 26px 28px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 24px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
@media (min-width: 560px) {
  .prose .promo { grid-template-columns: 1fr auto; text-align: left; justify-items: start; }
}
.prose .promo > * + * { margin-top: 0; }
.prose .promo > div > * + * { margin-top: .8em; }

.prose .promo img {
  width: 168px; height: 168px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}
@media (min-width: 560px) { .prose .promo img { width: 184px; height: 184px; } }

.promoKicker {
  margin: 0;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep);
}
.prose .promo h3 { margin-top: .5em; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.25; }
.prose .promo p { font-size: 16px; color: var(--mut); }
.promoActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (min-width: 560px) { .promoActions { justify-content: flex-start; } }
.prose .promo .btn { font-size: 14.5px; padding: 11px 18px; }
.prose a.promoGhost, .prose .promo a.btn--ghost { color: var(--txt); border-color: var(--line); }
.prose .promo a.btn--ghost:hover { border-color: var(--green-deep); color: var(--green-deep); }

/* The second footer column, the same one the home page carries, so the footer
   is laid out identically wherever it appears. */
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.footer-net { text-align: left; }
@media (min-width: 768px) { .footer-net { text-align: right; } }
.footer-net .lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--green-hi);
}
.footer-net .links { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
@media (min-width: 768px) { .footer-net .links { align-items: flex-end; } }