/* ==========================================================================
   Blog section. Added with the first post.
   No new hex, no new type step, no new font stack: everything below resolves
   to custom properties already declared in style.css. Montserrat stays second
   in every stack it touches, because Roboto has no U+02BB glyph.
   Gold (--gold) is never used to carry a word; text uses --gold-text on paper.
   ========================================================================== */

/* --- Blog index head ----------------------------------------------------- */
.bloghead { padding-block: clamp(2.25rem, 5vw, 4rem) 0; }
.bloghead__h1 { font-size: var(--fs-600); letter-spacing: -0.03em; }
.bloghead__lede { margin: 1rem 0 0; font-size: var(--fs-400); max-width: 52ch; }

.blog--index { padding-block: clamp(1.75rem, 3.5vw, 3rem) var(--band); }

/* The index reuses .posts from style.css. It caps at three so a card never
   exceeds the 1408px source and starts upscaling. */
@media (min-width: 1000px) {
  .posts--index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs { padding-block: clamp(1.25rem, 3vw, 2rem) 0; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem;
  margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-200);
}
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--body); }
.crumbs [aria-current="page"] { color: var(--body); }

/* --- Article ------------------------------------------------------------- */
.entry { padding-bottom: var(--band); }
.entry__shell { max-width: 78rem; }

.entry__head { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; max-width: 34ch; }
.entry__head { max-width: none; }
.entry__h1 {
  font-size: var(--fs-600); letter-spacing: -0.03em; max-width: 24ch;
}
.entry__meta {
  display: flex; flex-wrap: wrap; gap: 0.15rem 1rem;
  margin: 1.1rem 0 0; padding-top: 1rem;
  border-top: 2px solid var(--ink);
  font-family: var(--display); font-weight: 600; font-size: var(--fs-200);
  color: var(--ink);
}
.entry__meta time { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--body); font-family: var(--sans); }

.entry__lead { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.entry__lead img {
  width: 100%; height: clamp(220px, 42vw, 520px); object-fit: cover;
  border-radius: var(--r-lg);
}

.entry__back { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* --- Prose --------------------------------------------------------------- */
/* One reading measure, set on the children rather than the container, so a
   table can break out to full width while paragraphs stay readable. */
.prose { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3 { max-width: 68ch; }

.prose > h2 {
  font-size: var(--fs-500); margin: clamp(2rem, 3.5vw, 2.75rem) 0 0.85rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose > h3 { font-size: var(--fs-400); margin: 1.75rem 0 0.6rem; }

.prose p { margin: 0 0 1.1em; }
.prose strong { font-weight: 700; color: var(--ink); }

.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5em; padding-left: 0.2rem; }
.prose li::marker { color: var(--ocean-text); }

.prose a {
  color: var(--blue);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose a:hover { color: var(--blue-dark); text-decoration-thickness: 2px; }

/* A button inside prose is still a button. `.prose a` is (0,1,1) and `.btn` is
   only (0,1,0), so without this the prose link colour and underline outrank the
   button's own and a solid button paints --blue text on a --blue ground: 1:1,
   invisible. Shipped as soon as the first page put a CTA inside .prose rather
   than in a section band. This restores the button as style.css already draws
   it; it introduces no colour, and the pairs are written so the cascade does
   not depend on where this block sits in the file. */
.prose a.btn { text-decoration: none; }
.prose a.btn--solid,
.prose a.btn--solid:hover { color: var(--paper); }
.prose a.btn--paper,
.prose a.btn--paper:hover { color: var(--blue); }

/* --- Tables ------------------------------------------------------------- */
/* Wrapped so a wide comparison table scrolls inside its own box instead of
   pushing the page sideways on a phone. The site had a sideways-scroll defect
   once already; not repeating it here. */
.tablewrap {
  margin: 0 0 1.6em; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.prose table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-200); min-width: 34rem;
}
.prose thead th {
  text-align: left; vertical-align: bottom;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: var(--fs-100);
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.85rem 1rem; line-height: 1.35;
}
.prose tbody td {
  padding: 0.8rem 1rem; vertical-align: top;
  border-top: 1px solid var(--line); line-height: 1.55;
}
.prose tbody tr:nth-child(even) td { background: rgba(36, 39, 45, 0.03); }
.prose tbody td:first-child { color: var(--ink); }

@media (min-width: 1080px) {
  .entry__shell { max-width: 72rem; }
}