/* ============================================================================
   Blog — listing + article.
   Layered on top of style.css, reusing its tokens (--ink, --emerald, --paper…).
   Nothing here redefines a brand colour; if the site palette changes, so does
   the blog.

   The reading measure, size and leading below are the whole point of the page.
   They follow published typography guidance rather than taste:
     - 66ch measure (comfortable range 50–75; BDA recommends 60–70)
     - 19px body (16px is the floor; 18–21px is the long-form norm)
     - 1.75 leading (1.5 is the minimum for long text; more suits wide measures)
   Please do not "tidy" them into the site's default 16px/1.6.
   ========================================================================== */

/* ------------------------------------------------------------------ listing */
.blog-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--text-on-dark);
  padding: clamp(56px, 8vw, 96px) 24px clamp(44px, 6vw, 72px);
}
/* a soft emerald wash so the dark band is not a flat slab */
.blog-hero::after {
  content: ""; position: absolute; right: -12%; top: -40%;
  width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0,196,112,.20), transparent 62%);
}
.blog-hero__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.blog-hero__eyebrow {
  margin: 0 0 16px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--emerald-bright);
}
.blog-hero__title {
  margin: 0 0 16px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.02em;
}
.blog-hero__lede {
  margin: 0; max-width: 54ch;
  font-size: clamp(1.02rem, 1rem + .25vw, 1.14rem);
  line-height: 1.65; color: var(--text-on-dark-dim);
}

/* category filter */
.blog-filter {
  background: var(--paper); border-bottom: 1px solid var(--border);
  padding: 18px 24px;
}
.blog-filter__inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.chip {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  color: var(--text-secondary); background: var(--white);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px;
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { color: var(--text-primary); border-color: #CFD3DB; }
.chip[aria-pressed="true"] {
  color: #fff; background: var(--ink); border-color: var(--ink);
}

.blog-list { background: var(--paper); padding: clamp(34px, 5vw, 60px) 24px clamp(64px, 9vw, 104px); }
.blog-list__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
}

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-3px); border-color: #CFD3DB;
  box-shadow: 0 2px 4px rgba(10,14,20,.04), 0 22px 44px -26px rgba(10,14,20,.34);
}
.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

/* No post images yet, so each card gets a generated band keyed to its category.
   Gives the grid rhythm without inventing stock photography. */
.card__band {
  position: relative; height: 128px; flex: none; overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, #16304a 55%, var(--emerald-deep) 140%);
}
.card__band::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 22%, rgba(22,224,133,.42), transparent 52%),
    radial-gradient(circle at 18% 88%, rgba(124,92,252,.30), transparent 55%);
}
.card__band span {
  position: absolute; left: 22px; bottom: 16px; z-index: 1;
  font-family: var(--font-serif); font-size: 2.4rem; line-height: 1;
  color: rgba(255,255,255,.20);
}
/* real featured image, when a post supplies one */
.card__band--img { background: var(--paper-2); }
.card__band--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__band--img::after { content: none; }

.card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }

.card__cat {
  align-self: flex-start; margin-bottom: 12px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--emerald-deep); background: var(--emerald-tint);
  border-radius: 999px; padding: 5px 12px;
}
.card__title {
  margin: 0 0 10px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: 1.42rem; line-height: 1.22; letter-spacing: -.015em;
  color: var(--text-primary);
}
.card:hover .card__title { color: var(--emerald-deep); }
.card__excerpt {
  margin: 0 0 18px; max-width: 52ch;
  font-size: 0.95rem; line-height: 1.62; color: var(--text-secondary);
}
.card__meta { margin-top: auto; font-size: 0.81rem; color: var(--text-light); }
.card__meta i { font-style: normal; margin: 0 7px; opacity: .6; }

/* newest post spans the row and goes side-by-side */
.card--feature { grid-column: 1 / -1; }
.card--feature .card__link { flex-direction: row; align-items: stretch; }
.card--feature .card__band { height: auto; width: 38%; min-height: 260px; }
.card--feature .card__band span { font-size: 4rem; left: 30px; bottom: 24px; }
.card--feature .card__body { padding: 38px 40px 34px; justify-content: center; }
.card--feature .card__title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.card--feature .card__excerpt { font-size: 1.05rem; max-width: 60ch; }

.blog__empty { grid-column: 1/-1; color: var(--text-light); text-align: center; padding: 60px 0; }
.card[hidden] { display: none; }

/* closing CTA so the page does not just stop */
.blog-cta { background: var(--ink); color: var(--text-on-dark); padding: clamp(54px, 8vw, 88px) 24px; }
.blog-cta__inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.blog-cta h2 {
  margin: 0 0 8px; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em;
}
.blog-cta p { margin: 0; max-width: 48ch; color: var(--text-on-dark-dim); font-size: 1rem; line-height: 1.6; }

/* --------------------------------------------------------------- progress */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 200; background: transparent; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--emerald); transition: width .08s linear; }

.draft-banner {
  background: var(--gold-tint); color: #6b4a00; border-bottom: 1px solid #F0DCA8;
  text-align: center; padding: 9px 16px; font-size: .82rem; font-weight: 600;
}

/* ----------------------------------------------------------------- article */
/* ONE column width for the whole article. Header, contents, body and footer all
   use it, so their left edges line up. They previously had three different
   widths and the column looked ragged.
   680px minus 2x24px padding = ~632px of text. At 19px Inter that is ~66
   characters, the target measure. NOTE: do not express this in `ch` - the ch
   unit is the width of "0", which is wider than an average glyph, so 66ch
   actually renders nearer 78 characters and reads too wide. */
:root { --post-w: 680px; }

.post { background: var(--white); }
.post__head {
  max-width: var(--post-w); margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) 24px clamp(26px, 3vw, 38px);
}
.post__back {
  display: inline-block; margin-bottom: 26px;
  font-size: .84rem; font-weight: 600; color: var(--text-light); text-decoration: none;
}
.post__back:hover { color: var(--emerald-deep); }
.post__cat {
  margin: 0 0 14px;
  font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--emerald-deep);
}
.post__title {
  margin: 0 0 20px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem);
  line-height: 1.1; letter-spacing: -.022em; color: var(--text-primary);
}
.post__lede {
  margin: 0 0 30px; max-width: 62ch;
  font-size: clamp(1.12rem, 1.05rem + .4vw, 1.32rem);
  line-height: 1.6; color: var(--text-secondary);
}
.post__byline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  padding-top: 22px; border-top: 1px solid var(--border);
  font-size: .88rem; color: var(--text-secondary);
}
.post__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; margin-right: 3px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .95rem;
}
.post__by { display: flex; flex-direction: column; line-height: 1.3; }
.post__by b { font-weight: 600; color: var(--text-primary); }
.post__by i { font-style: normal; font-size: .8rem; color: var(--text-light); }
.post__dot { opacity: .5; }
/* link across to the other language, shown only when that translation is live */
.post__lang {
  margin-left: auto; font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--emerald-deep); background: var(--emerald-tint);
  border-radius: 999px; padding: 5px 12px;
}
.post__lang:hover { background: #C4F0DA; }

/* on this page */
.toc {
  max-width: var(--post-w); margin: 0 auto clamp(28px, 4vw, 44px);
  padding: 22px 24px; background: var(--paper-2);
  border-radius: 12px; border: 1px solid var(--border);
}
.toc__h {
  margin: 0 0 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-light);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li + li { margin-top: 7px; }
.toc__l3 { padding-left: 18px; }
.toc a {
  font-size: .95rem; color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc a:hover { color: var(--emerald-deep); border-bottom-color: currentColor; }

/* featured image at the top of an article */
.post__hero {
  max-width: 1020px; margin: 0 auto clamp(30px, 4vw, 48px);
  padding: 0 24px;
}
.post__hero img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2);
}

/* ---- the reading column ---- */
.post__body {
  max-width: var(--post-w);     /* THE measure. See note above. */
  margin: 0 auto;
  padding: 0 24px clamp(40px, 6vw, 72px);
  font-size: 1.1875rem;         /* 19px */
  line-height: 1.75;
  color: #1B2028;               /* softer than pure ink over long stretches */
  overflow-wrap: break-word;
}
.post__body > * { margin: 0 0 1.5em; }
.post__body > *:last-child { margin-bottom: 0; }

.post__body h2, .post__body h3, .post__body h4 {
  font-family: var(--font-serif); font-weight: 400;
  color: var(--text-primary); letter-spacing: -.015em;
  /* more space above than below, so a heading belongs to what follows it */
  margin-top: 2.1em; margin-bottom: .55em; line-height: 1.22;
}
.post__body h2 { font-size: 1.85rem; }
.post__body h3 { font-size: 1.4rem; }
.post__body h4 { font-size: 1.15rem; font-family: var(--font-sans); font-weight: 700; }
.post__body > h2:first-child, .post__body > h3:first-child { margin-top: 0; }

.post__body a { color: var(--emerald-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post__body a:hover { text-decoration-thickness: 2px; }
.post__body strong { font-weight: 650; color: var(--text-primary); }

/* style.css:115 sets `ul, ol { list-style: none }` site-wide, which strips the
   markers from article prose too. Put them back for body copy only. */
.post__body ul { list-style: disc; padding-left: 1.35em; }
.post__body ol { list-style: decimal; padding-left: 1.45em; }
.post__body ul ul { list-style: circle; }
.post__body li { margin-bottom: .6em; padding-left: .2em; }
.post__body li::marker { color: var(--emerald-deep); }

.post__body blockquote {
  margin-left: 0; margin-right: 0;
  padding: 4px 0 4px 26px; border-left: 3px solid var(--emerald);
}
.post__body blockquote p {
  margin: 0; font-family: var(--font-serif); font-size: 1.35rem;
  line-height: 1.45; color: var(--text-primary);
}

.post__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .87em; background: var(--paper-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}
.post__body pre {
  background: var(--ink); color: #E6E9EE; border-radius: 12px;
  padding: 20px 22px; overflow-x: auto; font-size: .92rem; line-height: 1.6;
}
.post__body pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

.post__body figure { margin-left: 0; margin-right: 0; }
.post__body img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.post__body figcaption { margin-top: 10px; font-size: .85rem; color: var(--text-light); }
.post__body hr { border: 0; border-top: 1px solid var(--border); margin: 2.6em 0; }

/* divider drawn inside the padding box so it lines up with the text column,
   matching the byline rule above rather than running 24px wider each side */
.post__foot {
  max-width: var(--post-w); margin: 0 auto;
  padding: 0 24px clamp(48px, 7vw, 84px);
}
.post__foot::before {
  content: ""; display: block; border-top: 1px solid var(--border); margin-bottom: 4px;
}
.post__back--end { margin: 26px 0 0; }

/* ---------------------------------------------------------------------- FAQ */
.faq {
  max-width: var(--post-w); margin: 0 auto;
  padding: 0 24px clamp(30px, 4vw, 48px);
}
.faq__h {
  margin: 0 0 16px; font-family: var(--font-serif); font-weight: 400;
  font-size: 1.6rem; letter-spacing: -.015em; line-height: 1.2;
}
.faq__i {
  border-bottom: 1px solid var(--border);
}
.faq__i:first-of-type { border-top: 1px solid var(--border); }
.faq__i summary {
  cursor: pointer; list-style: none;
  padding: 16px 34px 16px 0; position: relative;
  font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: var(--text-primary);
}
.faq__i summary::-webkit-details-marker { display: none; }
/* chevron, rotated when the item is open */
.faq__i summary::after {
  content: ""; position: absolute; right: 6px; top: 24px;
  width: 9px; height: 9px; border-right: 2px solid var(--emerald-deep);
  border-bottom: 2px solid var(--emerald-deep);
  transform: translateY(-50%) rotate(45deg); transition: transform .18s ease;
}
.faq__i[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq__i summary:hover { color: var(--emerald-deep); }
.faq__a {
  padding: 0 34px 18px 0;
  font-size: 1.0625rem; line-height: 1.72; color: #1B2028;
}
.faq__a a { color: var(--emerald-deep); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- keep reading */
.more { background: var(--paper); padding: clamp(48px, 7vw, 84px) 24px; }
.more__inner { max-width: 1180px; margin: 0 auto; }
.more__h {
  margin: 0 0 22px; font-family: var(--font-serif); font-weight: 400;
  font-size: 1.7rem; letter-spacing: -.015em;
}
.more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.more__card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Thumbnail, when the post has one. Fixed ratio so a row of cards lines up
   whatever shape the source images are. */
.more__band { display: block; aspect-ratio: 16 / 9; background: var(--paper-2); position: relative; overflow: hidden; }
.more__band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.more__band--none {
  background: linear-gradient(135deg, var(--ink) 0%, #16304a 55%, var(--emerald-deep) 140%);
}
.more__band--none::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 22%, rgba(22,224,133,.42), transparent 52%),
    radial-gradient(circle at 18% 88%, rgba(124,92,252,.30), transparent 55%);
}
.more__band--none i {
  position: absolute; left: 20px; bottom: 12px; z-index: 1; font-style: normal;
  font-family: var(--font-serif); font-size: 2.4rem; line-height: 1;
  color: rgba(255,255,255,.20);
}
.more__txt { display: block; padding: 22px 24px 22px; }
.more__card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(10,14,20,.34); }
.more__cat {
  display: block; margin-bottom: 9px;
  font-size: .68rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--emerald-deep);
}
.more__title {
  display: block; margin-bottom: 10px;
  font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.25;
  color: var(--text-primary);
}
.more__meta { font-size: .8rem; color: var(--text-light); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 640px) {
  .blog-list__inner { grid-template-columns: 1fr; gap: 18px; }
  .card__link, .card--feature .card__link { padding: 24px 20px 22px; }
  .card--feature .card__title { font-size: 1.7rem; }
  .post__head { padding-left: 20px; padding-right: 20px; }
  .post__body { padding-left: 20px; padding-right: 20px; font-size: 1.125rem; }
  .post__body h2 { font-size: 1.55rem; }
  .post__body h3 { font-size: 1.28rem; }
  .post__body blockquote p { font-size: 1.2rem; }
  .toc { margin-left: 20px; margin-right: 20px; }
  .post__hero { padding-left: 20px; padding-right: 20px; }
  .post__hero img { border-radius: 12px; aspect-ratio: 3 / 2; }
  .card--feature .card__link { flex-direction: column; }
  .card--feature .card__band { width: 100%; min-height: 0; height: 190px; }
  .post__foot { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .more__card { transition: none; }
  .card:hover, .more__card:hover { transform: none; }
  .progress span { transition: none; }
}

@media print {
  .nav, .footer, .progress, .toc, .more, .post__back { display: none !important; }
  .post__body { max-width: none; font-size: 11pt; color: #000; }
}

/* ===========================================================================
   ARTICLE LAYOUT: centred column, sidebar in the right gutter

   Three tracks: gutter, article, gutter. The article sits in the MIDDLE one,
   so it is centred in the viewport exactly as it was before a sidebar existed.
   The sidebar lives in the right-hand gutter and takes no width from the text.

   Earlier the article and the sidebar shared one centred block, which meant the
   article itself was pushed left of centre to make room. That is the thing
   being fixed here.

   Rows matter as much as columns. The masthead (breadcrumb, title, lede,
   byline, hero, contents) owns row 1 alone; the body owns row 2, and the
   sidebar is pinned to row 2 with it. That is what starts the sidebar level
   with the body copy instead of level with the breadcrumb.
   =========================================================================== */
:root { --side-w: 300px; --side-gap: 40px; }

.post__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--post-w)) minmax(0, 1fr);
  column-gap: 0;
}
.post__top  { grid-column: 2; grid-row: 1; min-width: 0; }
.post__main { grid-column: 2; grid-row: 2; min-width: 0; }
.post__side { grid-column: 3; grid-row: 2; min-width: 0; }

/* The article's own parts no longer centre themselves: the track already is
   the measure, and centring inside it a second time is what knocked the header
   out of line with the body. */
.post__top > *, .post__main > * { max-width: none; margin-left: 0; margin-right: 0; }

.post__side-in {
  position: sticky; top: 92px;
  max-width: var(--side-w);
  margin-left: var(--side-gap);
  display: flex; flex-direction: column; gap: 22px;
}

/* The sidebar only sits beside the article when the gutter can actually hold
   it. Below that the grid collapses to one column and it follows the article,
   which is the correct reading order anyway. Centring the article is what sets
   this threshold: both gutters must be wide enough, not just the right one. */
@media (max-width: 1359px) {
  .post__cols { grid-template-columns: minmax(0, 1fr); }
  .post__top  { grid-column: 1; grid-row: auto; }
  .post__main { grid-column: 1; grid-row: auto; }
  .post__side { grid-column: 1; grid-row: auto; }
  .post__top > *, .post__main > * {
    max-width: var(--post-w); margin-left: auto; margin-right: auto;
  }
  .post__side-in { position: static; margin-left: auto; margin-right: auto; }
  .post__side { max-width: var(--post-w); margin: 0 auto; padding: 0 24px clamp(30px, 5vw, 48px); }
}

/* ===========================================================================
   ARTICLE SIDEBAR
   Categories and recent posts beside the reading column, so there is somewhere
   to go next without scrolling to the very end of the article first.

   The measure is protected. --post-w still governs the reading column exactly
   as before; the sidebar is a separate track that only appears once there is
   room for it beside that column, never by taking width from it.
   =========================================================================== */
.side__box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
}
.side__h {
  margin: 0 0 14px;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-light);
}

/* ---- categories ---- */
.side__cats { list-style: none; margin: 0; padding: 0; }
.side__cats li + li { border-top: 1px solid var(--border); }
.side__cats a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; text-decoration: none; color: var(--text-primary);
  font-size: .95rem; transition: color .18s ease;
}
.side__cats a:hover { color: var(--emerald-deep); }
.side__cats i {
  font-style: normal; flex: none;
  font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-light);
  background: var(--paper-2); border-radius: 999px; padding: 2px 9px;
}

/* ---- recent posts ---- */
.side__posts { list-style: none; margin: 0; padding: 0; }
.side__posts li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.side__posts a {
  display: flex; gap: 12px; align-items: flex-start;
  text-decoration: none; color: inherit;
}
.side__thumb {
  flex: none; width: 64px; height: 52px; border-radius: 9px; overflow: hidden;
  background: var(--paper-2); display: block;
}
.side__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side__thumb--none {
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 1.4rem; color: rgba(10,14,20,.22);
  background: linear-gradient(135deg, var(--paper-2) 0%, #e6ecf2 100%);
}
.side__txt { min-width: 0; }
.side__title {
  display: block; font-family: var(--font-serif); font-size: 1rem; line-height: 1.28;
  color: var(--text-primary); margin-bottom: 5px;
  transition: color .18s ease;
}
.side__posts a:hover .side__title { color: var(--emerald-deep); }
.side__meta { display: block; font-size: .74rem; color: var(--text-light); }