/* =============================================================================
   BLOG SINGLE POST
   Board approved by Victor 2026-09-28: https://claude.ai/artifact/Shhe3KMpENmeEb39drvNYp
   Pairs with blog-post.html.

   Built on the existing blog language, read off live `blog_archive.css`:
   accent #6272c3, cards #fff with 14px radius and a rgba(0,0,0,.06) hairline,
   titles #111, body #333, description #777, meta #8f95a3, buttons 8px radius.
   No new palette, no new type scale, no libraries.

   Mobile first: every rule is written for 390 and desktop only widens the
   measure. Breakpoints match the archive's own, 768 and 980.

   HEADINGS CARRY TWO CLASSES. The theme's `.site h2 { font-size: clamp(…) }` is
   (0,1,1) and beats a single class. That already cost us once on the buy-box
   card, at phone width, where nobody was looking.
   ========================================================================== */

.al-post {
  --po-ink: #111;
  --po-body: #333;
  --po-muted: #8f95a3;
  --po-desc: #777;
  --po-line: rgba(0, 0, 0, .06);
  --po-accent: #6272c3;
  --po-accent-ink: #5060b5;
  --po-tint: #6272c314;
  --po-surface: #fff;

  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 20px 48px;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--po-body);
}

/* ---- Header -------------------------------------------------------------- */
.al-post__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--po-tint);
  color: var(--po-accent-ink);
  text-decoration: none;
}
.al-post .al-post__h1 {
  margin: 9px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--po-ink);
  text-wrap: balance;
}
/* "Updated" is the only date on the page, so it gets the weight. */
.al-post__updated {
  margin: 9px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
}
.al-post__byline {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--po-muted);
}

/* ---- Body: the measure --------------------------------------------------- */
/* ~65 characters at every width. A post that widens to 1200px is a post nobody
   finishes. The container stays wide so the contents rail has somewhere to sit. */
.al-post__body { max-width: 65ch; }
/* 24px against a 25.5px line-height: just under one blank line between blocks.
   Measured on the live post at 390, the first build sat at 19px with 13.5px
   copy, which read as a wall. */
.al-post__body > * + * { margin-top: 24px; }
/* The header is a separate element from the body, so the between-blocks rule
   above never reaches across the boundary and the byline sat directly on the
   opening paragraph. Set on the first child rather than on .al-post__body,
   because at desktop the body becomes `display: contents` and loses its box.
   14px, not 24: the board puts the byline and the opening line closer together
   than two paragraphs, and this keeps that proportion at the larger type. */
.al-post__body > *:first-child { margin-top: 14px; }

/* 15px, not 13.5. A long read on a phone is not a UI label. At 390 this gives
   about 44 characters a line, which is the comfortable band for a phone. */
.al-post__body p,
.al-post__body li { font-size: 15px; line-height: 1.7; color: var(--po-body); }

/* The opening paragraph, set a step up. The board shows it and my first CSS
   did not, which is a real gap between the artifact and the build. No markup
   needed: the writer outputs a plain <p> and this styles the first one. */
.al-post__body > p:first-of-type {
  font-size: 16px;
  line-height: 1.65;
  color: #444;
}
.al-post__body ul,
.al-post__body ol { padding-left: 20px; }
.al-post__body li + li { margin-top: 5px; }

/* 34px above a section heading, which is more than the 24px between blocks, so
   a new section reads as a new section rather than another paragraph. */
.al-post .al-post__body h2 {
  margin: 34px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--po-ink);
  line-height: 1.3;
}
.al-post .al-post__body h3 {
  margin: 26px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--po-ink);
}
.al-post__body blockquote {
  margin: 16px 0 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--po-line);
  color: #555;
  font-style: normal;
}
/* In-game terms read as terms, not as body copy. A dark chip, which is how the
   board renders them, and it stays legible inside every callout tint. */
.al-post__body code {
  background: #1E2233;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  color: #E8EAF4;
  white-space: nowrap;
}
.al-post__body a { color: var(--po-accent-ink); }

/* ---- Featured image ------------------------------------------------------ */
/* Sits between the header and the body, outside both, so at desktop it needs
   the same indent as the header or it hangs into the contents rail. */
.al-post__feature { margin: 16px 0 0; }
.al-post__feature img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ---- Key takeaways ------------------------------------------------------- */
/* The most lifted block on the page, so it is the most legible one. */
.al-post__body .al-takeaways {
  border: 1px solid var(--po-line);
  border-left: 3px solid var(--po-accent);
  border-radius: 12px;
  background: #fbfbff;
  padding: 13px 14px;
}
.al-post .al-takeaways h2 {
  margin: 0 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--po-accent-ink);
}
.al-post__body .al-takeaways ul { margin: 0; }

/* ---- Contents ------------------------------------------------------------ */
.al-post__toc {
  border: 1px solid var(--po-line);
  border-radius: 12px;
  background: var(--po-surface);
  overflow: hidden;
}
.al-post__toc-sum {
  padding: 11px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--po-ink);
  background: #f7f8fc;
  cursor: pointer;
  list-style: none;
}
.al-post__toc-sum::-webkit-details-marker { display: none; }
.al-post__toc-sum::after { content: "\25BE"; float: right; color: var(--po-muted); }
.al-post__toc[open] .al-post__toc-sum::after { content: "\25B4"; }
.al-post__toc-list {
  margin: 0;
  padding: 10px 13px 12px 30px;
  font-size: 12.5px;
  line-height: 1.85;
}
.al-post__toc-list a { color: var(--po-accent-ink); text-decoration: none; }
.al-post__toc-list a:hover { text-decoration: underline; }

/* ---- Callouts ------------------------------------------------------------ */
/* THE LABEL IS THE POINT AND MY FIRST CSS DID NOT HAVE IT.
   The board shows TIP / WORTH KNOWING / WHAT WE GUARANTEE above each callout.
   Sam's markup is `<div class="al-callout al-callout--tip"><p>…</p></div>` with
   no label element, so the label is generated here. Nothing changes for the
   writer.
   Note for Sam: generated content is not in the HTML, so if the label ever has
   to be readable by a crawler or a screen reader it becomes a <strong> in the
   writer's output and these three rules go. Today it is a visual tag on a box
   whose colour already carries the same meaning, so generated is the right call. */
.al-post__body .al-callout {
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 14px;
  line-height: 1.6;
}
.al-post__body .al-callout::before {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.al-post__body .al-callout--tip::before       { content: "Tip";               color: #4d5aa1; }
.al-post__body .al-callout--warning::before   { content: "Worth knowing";     color: #96631a; }
.al-post__body .al-callout--guarantee::before { content: "What we guarantee"; color: #2f7d57; }
.al-post__body .al-callout p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.al-post__body .al-callout p + p { margin-top: 7px; }
.al-post__body .al-callout--tip { background: #f2f5ff; color: #33406e; }
.al-post__body .al-callout--warning { background: #fcf3e3; color: #6b4a12; }
.al-post__body .al-callout--guarantee { background: #e8f3ec; color: #20573c; }

/* ---- Tables -------------------------------------------------------------- */
/* The writer outputs a bare <table>. The template's script wraps each one in
   .al-post__tablewrap on load, which keeps the table's semantics intact.
   See HANDOFF.md: the no-script fallback is the last rule in this block and
   trades semantics for legibility only for people without JavaScript. */
.al-post__tablewrap {
  overflow-x: auto;
  border: 1px solid var(--po-line);
  border-radius: 12px;
}
.al-post__body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 380px;
  font-size: 12.5px;
}
.al-post__body th,
.al-post__body td {
  padding: 8px 11px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  color: var(--po-body);
}
.al-post__body th {
  background: #f7f8fc;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--po-muted);
  font-weight: 700;
}
/* Numbers line up in a pity table or they are not worth printing. */
.al-post__body td { font-variant-numeric: tabular-nums; }
.al-post__body tr:last-child td { border-bottom: 0; }

html:not(.js) .al-post__body table {
  display: block;
  overflow-x: auto;
  min-width: 0;
}

/* ---- Figures ------------------------------------------------------------- */
.al-post__body figure { margin: 15px 0 0; }
.al-post__body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
}
.al-post__body figcaption {
  font-size: 11.5px;
  color: var(--po-muted);
  margin-top: 6px;
  line-height: 1.45;
}

/* ---- FAQ ----------------------------------------------------------------- */
.al-post__body h2 + details { margin-top: 10px; }
.al-post__body details:not(.al-post__toc) {
  border: 1px solid var(--po-line);
  border-radius: 12px;
  background: var(--po-surface);
  padding: 0;
}
.al-post__body details:not(.al-post__toc) + details { margin-top: 8px; }
.al-post__body details:not(.al-post__toc) summary {
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--po-ink);
  cursor: pointer;
  list-style: none;
}
.al-post__body details:not(.al-post__toc) summary::-webkit-details-marker { display: none; }
.al-post__body details:not(.al-post__toc) summary::after {
  content: "\25BE"; float: right; color: var(--po-muted);
}
.al-post__body details[open]:not(.al-post__toc) summary::after { content: "\25B4"; }
.al-post__body details:not(.al-post__toc) p { padding: 0 13px 12px; font-size: 12.5px; color: #555; }
.al-post__body summary:focus-visible {
  outline: 2px solid var(--po-accent-ink);
  outline-offset: -3px;
  border-radius: 8px;
}

/* ---- The one CTA --------------------------------------------------------- */
/* Victor, 28 Sep: one card per post, not two. Help, not a banner, so it is a
   quiet card rather than a coloured block. The price line is OPTIONAL and off
   by default: prices resolve client-side because pages are cached, so a
   server-printed price is wrong for EU and UK visitors. See HANDOFF.md. */
.al-post__body .al-cta {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--po-line);
  border-radius: 12px;
  background: #fbfbff;
  padding: 13px;
  text-decoration: none;
}
.al-cta__img {
  width: 50px; height: 50px;
  flex: none;
  border-radius: 9px;
  overflow: hidden;
  background: #eef0fa;
}
.al-cta__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The card is: optional image span, text column, Browse. The image span is
   omitted when the category has no photo, so the text column must not depend
   on it existing. */
.al-cta__txt { display: flex; flex-direction: column; min-width: 0; }
.al-cta__t { font-size: 13px; font-weight: 700; color: var(--po-ink); line-height: 1.3; }
.al-cta__d { font-size: 11.5px; color: var(--po-desc); margin-top: 2px; }
.al-cta__b {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--po-accent);
  border-radius: 8px;
  padding: 9px 13px;
  white-space: nowrap;
}

/* ---- Read next ----------------------------------------------------------- */
/* These reuse .al-blog__post, the archive's own card, so the tag chip has to be
   styled in that context too. Same treatment, one colour. */
.al-blog__post-info .al-post__tag {
  font-size: 10.5px;
  padding: 2px 8px;
  margin-bottom: 5px;
}

.al-post__related { max-width: 65ch; margin-top: 30px; }
.al-post .al-post__related-h {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--po-ink);
}

/* ---- Desktop ------------------------------------------------------------- */
/* The contents moves to a sticky rail on the left. The body keeps its measure,
   so the only thing that changes is where the contents lives. */
@media (min-width: 980px) {
  /* THE WHOLE ARTICLE IS THE GRID, not just the body.
     The header is a sibling of .al-post__body in the markup, so an earlier
     attempt only indented it by 234px. That lined it up horizontally but left
     the contents rail starting 136px BELOW the header, which is not the design:
     the board has the contents beginning level with the tag and title.
     Making .al-post the grid and dissolving .al-post__body with
     `display: contents` promotes every block into one grid, so the rail sits
     beside the header from the first row. Measured after: header and first
     paragraph share a left edge, and the rail's top offset from the header is 0. */
  .al-post {
    display: grid;
    grid-template-columns: 200px minmax(0, 640px);
    column-gap: 34px;
    row-gap: 0;
    justify-content: center;
    max-width: 914px;
    padding-inline: 20px;
    padding-block: 28px 64px;
  }

  .al-post .al-post__h1 { font-size: 31px; }
  .al-post__updated { font-size: 13.5px; }

  /* Dissolves so its children become items of the grid above. */
  .al-post__body { display: contents; }

  .al-post__head,
  .al-post__feature,
  .al-post__related,
  .al-post__body > * { grid-column: 2; }

  .al-post__toc {
    grid-column: 1;
    grid-row: 1 / span 999;
    position: sticky;
    top: 104px;              /* clears the 92px sticky header */
    align-self: start;
    margin: 0;
  }
  /* Always open on desktop, so it is not a control and must not look like one. */
  .al-post__toc-sum { pointer-events: none; }
  .al-post__toc-sum::after { display: none; }

  .al-post__related { max-width: none; margin-left: 0; margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .al-post__toc { scroll-behavior: auto; }
}