/* =============================================================================
   blog.css — /blog index + article pages. "Editorial" direction.
   Loaded after style.css, on blog pages only (body class="blog").

   THREE THINGS THIS SHEET OWNS, and why each is here rather than in style.css:

   1. THE CANVAS. Blog pages sit on the checkout's own page gradient
      (#F4F7F5 -> #EAF1EE), taken from checkout-arc-classic.css, whose file
      header describes itself as "#F4F7F5 to #EAF1EE canvas, white cards,
      #0F7A5A accent". The rest of the site stays on its warm cream, so this
      is scoped to body.blog and cannot reach another page.

   2. THE TYPE SCALE. Editorial pairs Newsreader for display with Geist for
      running text.

      ⚠️ EVERY PROSE RULE IS SCOPED TO AN ELEMENT INSIDE .prose, NEVER TO A
      WRAPPER CLASS. The prototype scoped its typography to .e-art while the
      markup used .t3-art, so the rules matched nothing: body copy fell back to
      16px/line-height:normal and the serif headings rendered as plain bold
      sans, on a page that otherwise looked finished. A wrapper rename must not
      be able to silently unstyle a page, so wrapper names carry LAYOUT only.

   3. THE STICKY CONTENTS BAR. Sits under the site nav, which is
      position:sticky/top:0/70px tall and only auto-hides on the homepage hero
      demo, so on a blog page it is always present and the offset is constant.

   PROSE SIZES: exactly two. Body (17.5px) and one deliberate step down for
   card decks (16px). Callouts are NOT smaller than body: they are the same
   reading text, just marked, and shrinking them is what reads as accidental.
   ============================================================================= */

body.blog {
  /* Canvas from the checkout. Sized to one viewport then settling onto flat
     #EAF1EE, because a gradient stretched over a 4000px article is invisible
     at the top and the checkout's look lives in that first screen. */
  --bg-blog:   #EAF1EE;
  --bg-blog-2: #F4F7F5;
  --ink-1:     #1A211D;   /* headings */
  --ink-body:  #2B332E;   /* running text */
  /* ⚠️ NOT the checkout's #6A716B. That value is ~5:1 on WHITE, and on the
     checkout this ink only ever sits on white cards. Here it sits on the
     canvas, which is darker, and #6A716B measures 4.37:1 (under AA).
     #666D67 is 4.64:1 on the canvas and 5.32:1 on white. */
  --ink-mute:  #666D67;
  --line-w:    #E6E3DA;   /* warm hairline: the checkout genuinely pairs a cool
                             canvas with warm lines, and it is what keeps this
                             from reading as clinical */
  --tint:      #E7F4EF;
  --tint-2:    #D2EBE0;
  --serif:     "Newsreader", Georgia, "Times New Roman", serif;

  background: var(--bg-blog);
  background-image: linear-gradient(180deg, var(--bg-blog-2), var(--bg-blog));
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  color: var(--ink-1);
}

/* Shared chrome has to join the canvas or the page reads as two designs.
   The nav keeps its translucency, just tinted to the canvas rather than cream. */
body.blog .nav { background: rgba(244, 247, 245, .84); }
body.blog .footer { background: #E3ECE7; border-top-color: #D3E0DA; }

/* ---------------------------------------------------------------- breadcrumb */
.crumbs { font-size: 13px; color: var(--ink-mute); margin: 0 0 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.crumbs__sep { color: #C3CFC9; }
.crumbs [aria-current="page"] { color: var(--ink-body); }

/* ============================================================ /blog index === */
.masthead { padding: 54px 0 28px; border-bottom: 2px solid var(--ink-1); }
.masthead h1 { font-family: var(--serif); font-weight: 500;
  font-size: clamp(38px, 6vw, 66px); line-height: .99; letter-spacing: -.02em;
  margin: 0 0 14px; color: var(--ink-1); }
.masthead p { max-width: 58ch; color: var(--ink-body); font-size: 17px;
  line-height: 1.55; margin: 0; }

.kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 13px; }

/* the lead story */
/* NO LEAD IMAGE, deliberately. What was here was a 1440px admin screenshot
   rendered at ~600px, where it read as a smudge rather than as a picture of
   anything, and it still showed the pre-rename "WCCheckout" brand and a
   testsite.local URL bar. It was also decoration: it illustrated the product,
   not the lead story, and the lead story rotates. A journal front page can
   carry its lead on the headline, so the type does the work instead: single
   column, larger, with the measure held so the dek does not run to 1112px. */
.lead { padding: 44px 0 40px; border-bottom: 1px solid var(--line-w); }
.lead h2 { font-family: var(--serif); font-weight: 500;
  font-size: clamp(31px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 16px; max-width: 21ch; }
.lead h2 a { color: var(--ink-1); text-decoration: none; }
.lead h2 a:hover { color: var(--accent-ink); }
.lead p { color: var(--ink-body); font-size: 18.5px; line-height: 1.6;
  margin: 0 0 18px; max-width: 60ch; }

/* the well */
/* Section label above each group of the well. A flat list stopped working at
   nine pieces: a reader arrives with one of three jobs (change how it looks,
   earn more per order, decide what to run) and a single column of headlines
   makes them read all nine to find out which pile is theirs. */
.well__head { font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin: 46px 0 0;
  padding-bottom: 12px; border-bottom: 2px solid var(--ink-1); }

.well { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 52px; }
.well__item { padding: 32px 0; border-bottom: 1px solid var(--line-w); }
.well__item h2 { font-family: var(--serif); font-weight: 500; font-size: 24px;
  line-height: 1.16; letter-spacing: -.01em; margin: 0 0 10px; }
.well__item h2 a { color: var(--ink-1); text-decoration: none; }
.well__item h2 a:hover { color: var(--accent-ink); }
.well__item p { color: var(--ink-body); font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }

.pmeta { font-size: 13px; color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: 4px 16px; }

.blog-tail { padding: 50px 0 76px; }

@media (max-width: 880px) {
  .masthead { padding: 34px 0 20px; }
  /* grid-template-columns dropped with the lead image: .lead is a plain block now. */
  .lead { padding: 30px 0 28px; }
  .lead h2 { max-width: none; }
  .well { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================ contents bar ===
   Sticky under the site nav. The nav is position:sticky, top:0, 70px tall, and
   only auto-hides on the homepage hero demo, so on a blog page this offset is
   a constant rather than something that has to track the nav's state. */
.tocbar { position: sticky; top: 70px; z-index: 40;
  background: rgba(244, 247, 245, .94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-w); }
.tocbar__inner { max-width: 768px; margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; height: 50px; }
.tocbar__btn { appearance: none; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; font: inherit; color: var(--ink-1); display: flex;
  align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left; }
.tocbar__lab { font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); flex: none; }
.tocbar__cur { font-family: var(--serif); font-size: 17px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tocbar__chev { flex: none; margin-left: auto; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.tocbar__btn[aria-expanded="true"] .tocbar__chev { transform: rotate(-135deg) translateY(1px); }

/* reading progress, painted on the bar's own bottom edge */
.tocbar__prog { height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; }

.tocbar__panel { border-top: 1px solid var(--line-w); background: var(--bg-blog-2);
  max-height: 62vh; overflow-y: auto; }
.tocbar__panel[hidden] { display: none; }
.tocbar__panel nav { max-width: 768px; margin-inline: auto; padding: 6px 24px 16px; }
.tocbar__panel a { display: flex; gap: 14px; align-items: baseline; padding: 11px 0;
  border-bottom: 1px solid var(--line-w); font-family: var(--serif); font-size: 18px;
  line-height: 1.3; color: var(--ink-1); text-decoration: none; }
.tocbar__panel a:last-child { border-bottom: 0; }
.tocbar__panel a:hover, .tocbar__panel a.is-on { color: var(--accent-ink); }
.tocbar__panel .n { font-family: var(--font); font-size: 11px; font-weight: 700;
  color: var(--ink-mute); font-variant-numeric: tabular-nums; flex: none; padding-top: 3px; }
.tocbar__panel a.is-on .n { color: var(--accent); }

@media (max-width: 760px) {
  .tocbar__inner, .tocbar__panel nav { padding-inline: 20px; }
  .tocbar__cur { font-size: 16px; }
}

/* ================================================================ article === */
.article { max-width: 768px; margin-inline: auto; padding: 44px 24px 84px; }
.article__head { margin-bottom: 34px; }
.article__head h1 { font-family: var(--serif); font-weight: 500;
  font-size: clamp(32px, 5vw, 50px); line-height: 1.06; letter-spacing: -.022em;
  margin: 0 0 20px; color: var(--ink-1); }
.dek { font-family: var(--serif); font-size: 21px; line-height: 1.5;
  color: var(--ink-body); margin: 0 0 26px; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px;
  color: var(--ink-mute); margin: 0; padding-bottom: 26px;
  border-bottom: 1px solid var(--line-w); }
.byline strong { color: var(--ink-body); font-weight: 600; }

/* ---- prose. ELEMENT-scoped, never wrapper-scoped. See the header note. ---- */
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: 30px;
  line-height: 1.15; letter-spacing: -.012em; color: var(--ink-1);
  margin: 1.9em 0 .5em; scroll-margin-top: 136px; }
.prose > section:first-child h2 { margin-top: 0; }
.prose h3 { font-family: var(--font); font-weight: 600; font-size: 19px;
  line-height: 1.3; color: var(--ink-1); margin: 1.7em 0 .45em; }
.prose p, .prose li { font-size: 17.5px; line-height: 1.72; color: var(--ink-body); }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.4em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--ink-mute); }
/* Prose link colour lives in style.css, where .prose itself is defined, and it
   carries the :not(.btn):not(.readnext__item) exclusion. Deliberately NOT
   redeclared here: a second copy is what let the button bug survive one fix. */
.prose strong { color: var(--ink-1); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line-w); margin: 2.2em 0; }

/* inline code: mono at .85em measures ~13px against 17.5px body, which is what
   reads as "tiny". .92em holds its own without shouting. */
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--tint); border-radius: 5px; padding: 1px 5px;
  color: var(--ink-1); overflow-wrap: break-word; }

/* a bare list of identifiers reads as a set of names, not prose points */
.prose .list-code { list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.prose .list-code li { margin-bottom: .4em; }

/* ---------------------------------------------------------------- code block */
/* ⚠️ min-width:0 IS LOAD BEARING. A grid/flex item's automatic minimum is its
   MIN-CONTENT size and overflow-x:auto does NOT opt out, so one white-space:pre
   line can pin an ancestor open and scroll the whole PAGE sideways at 390px.
   Kept even though .article is currently a plain block, because that is one
   layout change away from being true again. */
.code { background: var(--ink-1); border-radius: 13px; padding: 20px 22px;
  overflow-x: auto; min-width: 0; margin: 0 0 1.6em; -webkit-overflow-scrolling: touch; }
.code pre { margin: 0; }
.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.62; color: #DCE7E2; white-space: pre; display: block;
  background: none; border: 0; padding: 0; }
.code .c { color: #7F9A90; }
.code .k { color: #7FD1AE; }
.code .s { color: #E8C98A; }
.code__cap { font-size: 13px; color: var(--ink-mute); margin: -1.1em 0 1.8em; }

/* ------------------------------------------------------------------ callouts */
/* NO SIDE LINES. Both are enclosed panels: a spine reads as an editing mark
   rather than a considered container, and the amber border here is the
   .buy-notice pattern the live site already uses. */
.tldr { background: var(--tint); border: 1px solid var(--tint-2);
  border-radius: 13px; padding: 20px 22px; margin: 0 0 2em; }
.tldr h2 { font-family: var(--font) !important; font-size: 10.5px !important;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 12px !important; font-weight: 700; }
.tldr ul { margin: 0; padding-left: 1.15em; }
.tldr li:last-child { margin-bottom: 0; }

/* .warn was amber (#FBF3E2 on #ECD9B0). Merchant's call, 2026-08-24: every
   callout paints as the same white panel, so a warning reads as part of the
   article rather than as a different species of box shouting from the margin.
   The two class NAMES stay distinct in the markup: they mean different things,
   there are 24 .warn boxes across the articles, and a future restyle that wants
   to tell them apart again should not have to re-classify all of them by hand. */
.answer, .warn { background: #fff; border: 1px solid var(--line-w); border-radius: 13px;
  padding: 18px 22px; margin: 0 0 1.6em; box-shadow: 0 1px 2px rgba(26,33,29,.05); }
.answer p:last-child, .warn p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- data tables */
.tbl-wrap { overflow-x: auto; margin: 0 0 1.8em; border: 1px solid var(--line-w);
  border-radius: 13px; background: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--line-w); vertical-align: top; color: var(--ink-body); }
.tbl thead th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; background: var(--bg-blog-2); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody th { color: var(--ink-1); font-weight: 600; }
.tbl code { font-size: .9em; }
.tbl__cap { font-size: 13px; color: var(--ink-mute); margin: -1.4em 0 1.8em; }

/* ------------------------------------------------------------------- the CTA */
.post-cta { background: var(--tint); border: 1px solid var(--tint-2);
  border-radius: 16px; padding: 26px 28px; margin: 2.6em 0 0; }
.post-cta h2 { font-family: var(--font) !important; font-size: 20px !important;
  margin: 0 0 8px !important; font-weight: 650; }
.post-cta p { margin-bottom: 16px; }

/* ------------------------------------------------------------- author + next */
.post-author { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--line-w);
  font-size: 14.5px; line-height: 1.65; color: var(--ink-mute); }
.post-author strong { color: var(--ink-body); }
.post-author a { color: var(--accent-ink); }

.readnext { margin: 3.2em 0 0; padding-top: 1.6em; border-top: 2px solid var(--ink-1); }
.readnext h2 { font-family: var(--font) !important; font-size: 10.5px !important;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 6px !important; font-weight: 700; }
.readnext__item { display: block; padding: 20px 0; border-bottom: 1px solid var(--line-w);
  text-decoration: none; }
.readnext__item:last-child { border-bottom: 0; }
.readnext__item .k { display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 7px; }
.readnext__item h3 { font-family: var(--serif); font-weight: 500; font-size: 23px;
  line-height: 1.18; letter-spacing: -.01em; color: var(--ink-1); margin: 0 0 7px; }
.readnext__item:hover h3 { color: var(--accent-ink); }
.readnext__item p { font-size: 16px; line-height: 1.6; color: var(--ink-body);
  margin: 0 0 8px; max-width: 58ch; }
.readnext__item .m { font-size: 13px; color: var(--ink-mute); }

@media (max-width: 760px) {
  .article { padding: 30px 20px 60px; }
  .article__head h1 { letter-spacing: -.018em; }
  .dek { font-size: 19px; }
  .prose h2 { font-size: 25px; scroll-margin-top: 128px; }
  .prose h3 { font-size: 17.5px; }
  .prose p, .prose li { font-size: 17px; }
  .code { padding: 16px 18px; }
  .code code { font-size: 13px; }
  .post-cta { padding: 22px 20px; }
  .readnext__item h3 { font-size: 20px; }
}