/* ============================================================================
   Tenancy Pilot - blog centre + guide article.

   Layout ported from the prenup-agreement site's blog: a dark hero carrying
   breadcrumb, title and a glass search pill; a 1fr/320px body grid; centred
   editorial cards with a top accent strip and clamped title/excerpt; and, on
   an article, a full-bleed dark masthead over a sticky sidebar holding a
   numbered table of contents.

   Recoloured to this site's strict black/white palette (the source is navy +
   gold) and typeset in Inter/JetBrains Mono rather than Poppins, so it reads
   as one system with the rest of the site.

   Loaded only by templates/blog/*, on top of site.css - it reuses that file's
   tokens, .prose, .eyebrow and .waitlist-form, and scopes every override to a
   blog wrapper so no other page moves.
   ========================================================================== */

:root {
  --blog-line: rgba(0, 0, 0, .10);
  --blog-line-soft: rgba(0, 0, 0, .06);
  --blog-wash: #fafafa;
  --blog-faint: #8a8a8a;
  --blog-radius: 18px;
  --blog-ease: cubic-bezier(.2, .8, .2, 1);
  --blog-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  --blog-shadow-hover: 0 20px 44px rgba(0, 0, 0, .13);
}

/* ---------------------------------------------------------------------------
   Hero - the dark band at the top of the blog centre and each topic hub.
   ------------------------------------------------------------------------- */
.blog-hero {
  background: linear-gradient(135deg, #000 0%, #161616 100%);
  color: #fff;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(2rem, 4.5vw, 2.75rem);
}

.blog-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
}

/* Breadcrumb, centred on the hero, mirrors the BreadcrumbList schema. */
.blog-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.blog-crumbs li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .6);
}

.blog-crumbs li + li::before {
  content: '\203A';
  color: rgba(255, 255, 255, .35);
  font-size: .95rem;
  line-height: 1;
}

.blog-crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; transition: color var(--dur-fast) ease; }
.blog-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.blog-crumbs li[aria-current="page"] { color: #fff; font-weight: 700; }

.blog-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  letter-spacing: -.03em;
  margin: .25rem 0 0;
}

.blog-hero-lede {
  color: rgba(255, 255, 255, .72);
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 620px;
  margin: 0;
}

.blog-hero-actions {
  margin-top: .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  width: 100%;
}

/* Glass search pill */
.blog-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 480px);
  /* Vertical padding lives on the input, not here: the wrapper is a div, so
     with `padding: 14px 20px` the pill measured 55.6px tall on touch but only
     the input's 25.6px was tappable - the top and bottom 15px of what looks
     like a search field did nothing. Same painted box, the padding now belongs
     to the control. */
  padding: 0 20px;
  background: var(--white-08);
  border: 1px solid var(--white-10);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.blog-search:focus-within { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); }
.blog-search svg { flex: 0 0 auto; color: rgba(255, 255, 255, .55); }
.blog-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 0;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 1rem;
  color: #fff;
}
.blog-search input::placeholder { color: rgba(255, 255, 255, .5); }
.blog-search input:focus { outline: none; box-shadow: none; }

/* Topics dropdown - the sidebar's topic list, folded into the hero on phones
   where the sidebar is hidden. */
.blog-topics-drop { display: none; position: relative; }

.blog-topics-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 24px;
  background: var(--white-08);
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.blog-topics-btn:hover,
.blog-topics-drop.open .blog-topics-btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.blog-topics-btn svg { transition: transform var(--dur-base) ease; opacity: .8; }
.blog-topics-drop.open .blog-topics-btn svg { transform: rotate(180deg); }

.blog-topics-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  min-width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  text-align: left;
}

.blog-topics-drop.open .blog-topics-menu { display: block; }

.blog-topics-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--neutral-800);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-topics-menu a:hover { background: var(--neutral-100); color: var(--ink); }
.blog-topics-menu a.active { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------------------
   Body - light wash behind the two-column grid, so white cards lift off it.
   ------------------------------------------------------------------------- */
.blog-shell {
  background: var(--blog-wash);
  border-bottom: 1px solid var(--blog-line-soft);
}

.blog-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) var(--container-pad) clamp(2.5rem, 5vw, 4rem);
}

.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}

.blog-main { min-width: 0; }

.blog-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.4rem;
}

.blog-section-title { font-size: 1.55rem; letter-spacing: -.02em; margin: 0 0 .25rem; }
.blog-muted { color: var(--text-body); font-size: .95rem; margin: 0; }

/* ---------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  overflow: hidden;
  box-shadow: var(--blog-shadow);
  transition: transform var(--dur-base) var(--blog-ease),
              border-color var(--dur-base) var(--blog-ease),
              box-shadow var(--dur-base) var(--blog-ease);
}

.blog-card:hover { transform: translateY(-6px); border-color: var(--ink); box-shadow: var(--blog-shadow-hover); }

/* The search filter hides cards with the `hidden` attribute, which the UA
   stylesheet cannot enforce over the author `display` above. */
.blog-card[hidden] { display: none; }

/* Accent strip standing in for a hero image */
.blog-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ink);
  opacity: .18;
  z-index: 2;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--blog-ease);
}

.blog-card:hover::before { opacity: 1; }

/* The whole card is one click target. The stretched overlay sits on the title
   link and the clamp lives on the inner span, so overflow never crops it. */
.blog-card-link { display: block; }
.blog-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.blog-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  flex: 1;
  padding: 28px 26px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blog-faint);
}

.blog-card-cat { position: relative; z-index: 2; color: var(--ink); text-decoration: none; }
.blog-card-cat:hover { text-decoration: underline; text-underline-offset: 3px; }

.blog-title { margin: 0; font-size: 1.22rem; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--neutral-900); }
.blog-title a { color: inherit; text-decoration: none; }
.blog-card:hover .blog-title a { color: var(--ink); }

/* 2-line clamp with reserved height so cards in a row align */
.blog-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 2);
}

.blog-excerpt {
  margin: 0;
  color: var(--text-body);
  font-size: .92rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-foot {
  margin-top: auto;
  padding-top: .3rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.blog-no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-body);
  background: #fff;
  border: 1px dashed var(--neutral-300);
  border-radius: var(--blog-radius);
}

.blog-no-posts h3 { margin-bottom: .5rem; }
.blog-linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------- */
.blog-aside {
  position: sticky;
  top: calc(var(--nav-height) + 16px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-panel {
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  padding: 24px;
  box-shadow: var(--blog-shadow);
}

.blog-panel h3 {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

.blog-filter-list { display: flex; flex-direction: column; gap: 6px; }

.blog-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: 11px 14px;
  border: 1px solid var(--blog-line-soft);
  border-radius: var(--radius-sm);
  background: var(--neutral-50);
  color: var(--neutral-800);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) var(--blog-ease),
              border-color var(--dur-fast) var(--blog-ease),
              background var(--dur-fast) var(--blog-ease);
}

/* The topics fold.

   This replaces a 420px inner scrollbar with a mask fade. That existed because
   22 topics ran the sidebar past the viewport and killed the sticky; at 14 the
   full stack is still ~620px, which puts the sidebar at ~1,190px against a
   900px viewport, so the constraint is real — but a scroll region nested inside
   a scrolling page is a poor way to meet it. The template now renders six
   chips and folds the rest into a <details>, which needs no JS and no mask. */
.blog-topics-more { margin-top: 6px; }

.blog-topics-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 9px 14px;
  border: 1px dashed var(--blog-line-soft);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--blog-ease),
              border-color var(--dur-fast) var(--blog-ease);
}

/* Both the WebKit and the standards way of killing the default disclosure
   triangle; the label already says which way the fold goes. */
.blog-topics-more > summary::-webkit-details-marker { display: none; }
.blog-topics-more > summary::marker { content: ""; }

.blog-topics-more > summary:hover { color: var(--ink); border-color: var(--ink); }
.blog-topics-more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.blog-topics-more .blog-filter-list { margin-top: 6px; }

/* Swap the label on state, so one <summary> serves both directions. */
.blog-topics-more .blog-topics-more-shut { display: none; }
.blog-topics-more[open] .blog-topics-more-open { display: none; }
.blog-topics-more[open] .blog-topics-more-shut { display: inline; }

/* "Other topics" block under a hub's cards - pills, not a stacked list. */
.blog-panel-more { margin-top: 2.5rem; }
.blog-panel-more .blog-filter-list { flex-direction: row; flex-wrap: wrap; }

.blog-chip:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.blog-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

.blog-chip-count {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  color: var(--text-body);
  background: #fff;
  border: 1px solid var(--blog-line-soft);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.blog-chip.active .blog-chip-count { background: var(--white-10); border-color: transparent; color: rgba(255, 255, 255, .85); }

/* About / CTA panel - black, centred, carrying the waitlist form */
.blog-panel-about { background: var(--ink); border-color: var(--ink); color: #fff; text-align: center; }
.blog-panel-about h3 { color: #fff; }
.blog-panel-about .eyebrow { justify-content: center; color: rgba(255, 255, 255, .6); margin-bottom: .7rem; }
.blog-panel-about p { margin: 0 0 1rem; font-size: .88rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.blog-panel-about .waitlist-form {
  flex-direction: column;
  align-items: stretch;
  max-width: none;
  background: var(--white-08);
  border-color: var(--white-10);
  box-shadow: none;
}
.blog-panel-about .waitlist-form input[type="email"] { color: #fff; text-align: center; }
.blog-panel-about .waitlist-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .5); }
.blog-panel-about .waitlist-form .btn-primary { border-radius: 0; box-shadow: none; background: #fff; color: #000; justify-content: center; }
.blog-panel-about .waitlist-form .btn-primary:hover { background: #f1f1f1; }

.blog-panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 1rem;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.blog-panel-link:hover { background: var(--ink-hover); transform: translateY(-2px); }
.blog-panel-about .blog-panel-link { background: #fff; color: #000; }
.blog-panel-about .blog-panel-link:hover { background: #f1f1f1; }

/* Numbered list panel (latest guides / more in this topic) */
.blog-list { display: flex; flex-direction: column; }

.blog-list-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--blog-line-soft);
  text-decoration: none;
}

.blog-list-item:first-child { border-top: 0; padding-top: 0; }

.blog-list-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
}

.blog-list-title { font-size: .88rem; font-weight: 500; line-height: 1.45; color: var(--neutral-800); }
.blog-list-item:hover .blog-list-title { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.blog-list-item:hover .blog-list-num { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------------------
   Inline pagination (sits opposite the section heading)
   ------------------------------------------------------------------------- */
.blog-pagination { display: inline-flex; align-items: center; gap: 8px; }
.blog-pagination[hidden] { display: none; }

.blog-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.blog-page-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--neutral-100); transform: translateY(-1px); }
.blog-page-btn:disabled { opacity: .32; cursor: default; }
.blog-page-info { font-size: .82rem; font-weight: 600; color: var(--text-body); white-space: nowrap; }
.blog-pagination-bottom { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ---------------------------------------------------------------------------
   Article - masthead
   ------------------------------------------------------------------------- */
.article-crumbs {
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 13px 0;
}

.article-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.article-crumbs li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .6); }
.article-crumbs li + li::before { content: '\203A'; color: rgba(255, 255, 255, .3); font-size: .95rem; line-height: 1; }
.article-crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.article-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.article-crumbs li[aria-current="page"] { color: #fff; font-weight: 700; }

.article-masthead {
  background: linear-gradient(135deg, #000 0%, #161616 100%);
  color: #fff;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(2rem, 4.5vw, 2.75rem);
  text-align: center;
}

.article-cat {
  display: inline-block;
  padding: 5px 14px;
  margin-bottom: 18px;
  background: var(--white-10);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-fast) ease;
}

.article-cat:hover { background: rgba(255, 255, 255, .22); }

.article-masthead h1 {
  max-width: 860px;
  margin: 0 auto 20px;
  color: #fff;
  font-size: clamp(1.9rem, 4.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.article-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.article-meta > span:not(:last-child)::after { content: '\00b7'; margin-left: 14px; color: rgba(255, 255, 255, .35); }
.article-meta svg { color: rgba(255, 255, 255, .5); }
.article-meta a { color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 3px; }
.article-meta a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   Article - body grid
   ------------------------------------------------------------------------- */
.article-body { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem); }

/* 1180 - padding - gap - sidebar leaves the reading column at ~744px, the
   measure site.css sets for .prose, so every block in the column lines up. */
.article-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--container-pad); }

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 3rem;
  align-items: start;
}

.article-main { min-width: 0; }

/* Headings sit clear of the fixed nav when the TOC jumps to them. */
.article-main .prose :where(h2, h3, h4) { scroll-margin-top: calc(var(--nav-height) + 20px); }

/* Editorial touches from the source design, in black and white: a short rule
   under each H2, drawn list markers, a solid table header. */
.article-main .prose h2 { position: relative; padding-bottom: .5rem; }
.article-main .prose h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--ink); }

.article-main .prose ul { list-style: none; margin-left: 0; padding-left: 0; }
.article-main .prose ul > li { position: relative; padding-left: 1.6rem; }
.article-main .prose ul > li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.article-main .prose ol { list-style: none; margin-left: 0; padding-left: 0; counter-reset: prose-ol; }
.article-main .prose ol > li { position: relative; padding-left: 2.2rem; counter-increment: prose-ol; }
.article-main .prose ol > li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  top: .18em;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
}

/* Nested lists step down to hollow markers so the hierarchy still reads. */
.article-main .prose ul ul > li::before { background: #fff; border: 2px solid var(--ink); width: 8px; height: 8px; }

/* Wide comparison tables scroll inside the column instead of pushing the
   page sideways (body is overflow-x: hidden, so they would otherwise clip). */
.article-main .prose table { display: block; max-width: 100%; overflow-x: auto; }
.article-main .prose thead th { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.article-main .prose tbody tr:nth-child(even) { background: var(--blog-wash); }
.article-main .prose tbody td:first-child { font-weight: 600; color: var(--neutral-900); }

/* Tags + share row under the article */
.article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--blog-wash);
  border: 1px solid var(--blog-line-soft);
  border-radius: var(--blog-radius);
}

.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.article-tag {
  display: inline-block;
  padding: .38rem .85rem;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-pill);
  color: var(--neutral-800);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.article-tag:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-1px); }

.article-share { display: flex; align-items: center; gap: .55rem; }

.article-share-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-body);
}

.article-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: 50%;
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.article-share-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.article-share-btn.is-copied { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Author card */
.article-author {
  position: relative;
  margin-top: 2rem;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-shadow);
  text-align: center;
  overflow: hidden;
}

.article-author::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ink); }

.article-author-label {
  margin: 0 0 .3rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-body);
}

.article-author-name { margin: 0 0 .7rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.article-author-bio { max-width: 600px; margin: 0 auto 1.25rem; font-size: .9rem; line-height: 1.7; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Article - sidebar
   ------------------------------------------------------------------------- */
.article-side {
  position: sticky;
  top: calc(var(--nav-height) + 16px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-widget {
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.side-widget-title {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.side-widget-body { padding: .85rem 1.15rem 1.1rem; }

/* Table of contents. The markup is python-markdown's nested <ul>; the rail,
   dots and section numbers are drawn here so it needs no JS to render - the
   script only tracks which entry is in view. */
/* `isolation: isolate` makes this a stacking context so the rail's z-index:-1
   below stays inside the TOC and cannot slide behind the panel's own
   background. */
.side-toc .toc { position: relative; isolation: isolate; font-size: .84rem; }
.side-toc .toc ul { list-style: none; margin: 0; padding: 0; }
.side-toc .toc > ul { counter-reset: toc; }

/* The rail.

   z-index:-1 is load-bearing, not decoration. This is `position: absolute`
   while the dots are static flex items, and positioned elements paint ABOVE
   non-positioned in-flow content - so without it the rail draws on top of the
   dots and their opaque white fill cannot mask it. The visible symptom is a
   line running straight through the middle of every circle, the active marker
   included.

   left:5px, not 6px: the rail is 2px wide so its centre is left+1, and the
   12px dots start at x=0 of the row, putting their centre at 6px. */
.side-toc .toc > ul::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--neutral-200);
}

.side-toc .toc a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .5rem .4rem 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--neutral-800);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

/* Dot on the rail, then the section number, then the text. Both pseudo
   elements are flex items, so `order` puts them ahead of the label. */
.side-toc .toc a::before {
  content: "";
  order: -2;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--neutral-300);
  transition: var(--transition);
}

.side-toc .toc > ul > li { counter-increment: toc; }

.side-toc .toc > ul > li > a::after {
  content: counter(toc);
  order: -1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--neutral-100);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  transition: var(--transition);
}

/* Nested rows sit on the SAME rail as their parents - the indent is carried by
   the label, not by pushing the dot off the spine. The old .5rem paddings on
   both the list and the link put the small dot's centre at 23px against a rail
   at 6px, leaving it stranded in open space beside the line.

   Its 8px dot is centred on the rail by 2px side margins, which also makes the
   dot box 12px wide - identical to a top-level dot - so both rows measure the
   same up to the label. */
.side-toc .toc ul ul { padding-left: 0; }
.side-toc .toc ul ul a { font-weight: 400; font-size: .82rem; color: var(--text-body); padding-left: 0; }
.side-toc .toc ul ul a::before { width: 8px; height: 8px; border-width: 1.5px; margin: 0 2px; }

/* An empty stand-in occupying the 20px the numbered chip takes on a top-level
   row, so nested labels line up with numbered labels instead of hanging to
   their left. Invisible: no background, no content. */
.side-toc .toc ul ul > li > a::after {
  content: "";
  order: -1;
  flex: 0 0 auto;
  width: 20px;
}

.side-toc .toc a:hover { background: var(--black-05); color: var(--ink); }
.side-toc .toc a:hover::before { border-color: var(--ink); transform: scale(1.15); }
.side-toc .toc a:hover::after { background: var(--ink); color: #fff; }

.side-toc .toc a.active { background: var(--black-05); color: var(--ink); font-weight: 700; }
.side-toc .toc a.active::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px var(--black-08); }
.side-toc .toc a.active::after { background: var(--ink); color: #fff; }

/* Sidebar CTA card */
.side-cta-card {
  background: var(--ink);
  border-radius: var(--radius-md);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
}

.side-cta-head { padding: 1.75rem 1.5rem 0; text-align: center; }
.side-cta-head .eyebrow { justify-content: center; color: rgba(255, 255, 255, .6); margin-bottom: .65rem; }
.side-cta-title { margin: 0 0 .6rem; color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.side-cta-sub { margin: 0; font-size: .86rem; line-height: 1.55; color: rgba(255, 255, 255, .7); }

.side-cta-divider { height: 1px; margin: 1.25rem 1.5rem 1.1rem; background: rgba(255, 255, 255, .12); }

.side-cta-features { list-style: none; margin: 0 0 1.35rem; padding: 0 1.5rem; }

.side-cta-features li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, .92);
}

.side-cta-features li:last-child { border-bottom: 0; }

.side-cta-features svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 4px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--white-10);
  color: #fff;
}

.side-cta-form { padding: 0 1.5rem 1.35rem; }
.side-cta-form .waitlist-form {
  flex-direction: column;
  align-items: stretch;
  max-width: none;
  background: var(--white-08);
  border-color: var(--white-10);
  box-shadow: none;
}
.side-cta-form .waitlist-form input[type="email"] { color: #fff; text-align: center; }
.side-cta-form .waitlist-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .5); }
.side-cta-form .waitlist-form .btn-primary { border-radius: 0; box-shadow: none; background: #fff; color: #000; justify-content: center; }
.side-cta-form .waitlist-form .btn-primary:hover { background: #f1f1f1; }

.side-cta-trust {
  padding: .9rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .74rem;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, .68);
}

/* "More in this topic" links */
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li + li { border-top: 1px solid var(--blog-line-soft); }
.side-links a { display: block; padding: .7rem 0; color: var(--neutral-800); font-size: .87rem; font-weight: 500; line-height: 1.45; text-decoration: none; }
.side-links li:first-child a { padding-top: .2rem; }
.side-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.side-widget-foot {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.side-widget-foot:hover { text-decoration: underline; text-underline-offset: 3px; }

/* site.css centres these on a 720px measure for the one-column pages; in this
   grid the column already sets the measure, so they fill it and stay aligned
   with the tags row and author card below. */
.article-main .prose,
.article-main .disclaimer,
.article-main .cta-card { max-width: none; margin-left: 0; margin-right: 0; }

/* ---------------------------------------------------------------------------
   Article - prev/next and "keep reading"
   ------------------------------------------------------------------------- */
.article-nav { padding: clamp(2rem, 4vw, 3rem) 0; }
.article-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.article-nav-link {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: var(--transition);
}

.article-nav-link:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.article-nav-next { text-align: right; align-items: flex-end; }

.article-nav-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-body);
}

.article-nav-label svg { transition: transform var(--dur-base) ease; }
.article-nav-link:hover .article-nav-label { color: var(--ink); }
.article-nav-prev:hover .article-nav-label svg { transform: translateX(-3px); }
.article-nav-next:hover .article-nav-label svg { transform: translateX(3px); }

.article-nav-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--neutral-900);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-related { background: var(--blog-wash); border-top: 1px solid var(--blog-line-soft); padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4rem); }
.blog-related .blog-wrap { max-width: 1180px; padding-top: 0; padding-bottom: 0; }

.blog-related-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.blog-related-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }

.blog-related-all {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--black-05);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.blog-related-all:hover { background: var(--ink); color: #fff; }
.blog-related .blog-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Reading progress bar, pinned under the fixed nav. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}

.reading-progress-fill { height: 100%; width: 0; background: var(--ink); transition: width .1s linear; }

/* ---------------------------------------------------------------------------
   Responsive. Mirrors the source: the sidebar drops below the cards on
   tablet, then the topic list moves into the hero dropdown on phones.
   ------------------------------------------------------------------------- */

/* Small laptop: two cards beside a 320px sidebar squeeze the titles - give the
   cards one full-width reading column instead. */
@media (min-width: 981px) and (max-width: 1180px) {
  .blog-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 2.25rem; }
}

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .blog-aside { position: static; }
  .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sidebar sits below the cards, so the topic rows read better as pills. */
  .blog-filter-list { flex-direction: row; flex-wrap: wrap; }
  /* 0 1 auto + max-width so a long topic name wraps inside the rail
     instead of setting the page's scroll width - at 360px the longest
     is 359px of max-content against a 308px container. */
  .blog-chip { flex: 0 1 auto; max-width: 100%; }

  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .article-side { position: static; }
  .side-toc { display: none; }
  .blog-related .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .blog-topics-drop { display: block; }
  /* The hero dropdown now carries the topic list. */
  .blog-panel-topics { display: none; }
  .article-nav-grid { grid-template-columns: 1fr; }
  .article-nav-next { text-align: left; align-items: flex-start; }
  .article-foot { flex-direction: column; align-items: flex-start; }
  .article-main .prose h2::after { width: 38px; }

  /* Touch targets. The pagination arrows measured 34x34 and the share buttons
     38x38, both under the 44px minimum, and the arrows are the only route to
     pages 2-9 of the guide list on a phone. Grow the box; the border and icon
     are unchanged, and .article-share is already full-width at <=620 so three
     44px circles plus the 0.55rem gaps and the label fit in 328px at 360. */
  .blog-page-btn { width: 44px; height: 44px; }
  .article-share-btn { width: 44px; height: 44px; }

  /* The rest of the discrete controls, measured at 390: .blog-list-item 39px,
     .blog-panel-link 41.5px, .blog-related-all 37.5px, .article-tag 34.1px and
     .side-widget-foot 17.9px. Each is a standalone control, not a run of
     sentence text (WCAG 2.5.8 exempts inline links), so each needs the 44px
     minimum. min-height on the flex ones keeps their existing padding and row
     spacing intact; .article-tag is display:block, so it takes padding instead.
     .blog-card-cat is deliberately left alone - it sits inside a card whose
     whole surface is already the link. */
  .blog-list-item { min-height: 44px; }
  .blog-panel-link { min-height: 44px; }
  .blog-related-all { min-height: 44px; }
  .side-widget-foot { min-height: 44px; align-items: center; }
  .article-tag { padding-top: 11px; padding-bottom: 11px; }
}

@media (max-width: 620px) {
  .blog-cards, .blog-related .blog-cards { grid-template-columns: minmax(0, 1fr); }
  /* One card per row has the width for left-aligned text and longer titles. */
  .blog-card-content { align-items: flex-start; text-align: left; padding: 24px 22px; }
  .blog-card-meta { justify-content: flex-start; }
  .blog-title { font-size: 1.12rem; }
  .blog-title-text { -webkit-line-clamp: 3; line-clamp: 3; min-height: 0; }
  .blog-head-row { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .blog-related-head { flex-direction: column; align-items: flex-start; }
  .article-share { width: 100%; }
}

@media (max-width: 480px) {
  /* site.css's stacked-phone waitlist rule gives every .waitlist-form email
     input a solid `background: #fff`, and exempts only the two dark contexts
     it knows about (.cta-band, .global-footer). These two blog panels are
     black and set `color: #fff` above, so at 360 the input measured
     background rgb(255,255,255) against color rgb(255,255,255): a blank
     278x57.6 white slab with an invisible placeholder and invisible typing.
     Take the same exemption site.css gives its own dark panels. */
  .blog-panel-about .waitlist-form input[type="email"],
  .side-cta-form .waitlist-form input[type="email"] {
    background: var(--white-08);
    border-color: var(--white-10);
  }
}