/* ============================================================
   BLOG THEME — styles owned by the blog team.
   Layer 1: brand tokens come from design-system/tokens.css (font, brand colours, spacing, radii).
   Layer 2: this file — the blog's own reading scale and article-block styles.
   Changing this file never affects the main site, and vice versa.
   Values marked "live" were measured on bir.ch/blog on 28 Sep 2026.

   UNITS FOLLOW THE LIVE BLOG (decision 01.10.2026). The site root size is fluid
   (design-system/fluid-root.css). On the live blog only some things follow it —
   section headings, pills, date, list spacing — while the title, body text, quotes,
   tables and the CTA are fixed pixels in Webflow. So here:
     rem = grows and shrinks with the site, as on live;
     px  = fixed on live; px on purpose, against the usual no-px rule.
   The mix is Webflow's and is revisited together with the fluid root (docs/tech-debt.md).
   Check with scripts/blog/style_audit.py, never by eye.
   ============================================================ */

@font-face {
  font-family: "PP Pangaia Variable";
  src: url("https://cdn.prod.website-files.com/6716718ea408f53194adf9a9/67bd872743007488e1a62da7_PPPangaia-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blog-font-serif: "PP Pangaia Variable", Georgia, serif;

  /* Colours: brand tokens where they exist; blog-only values (live) otherwise */
  --blog-ink: var(--color-text-inverted);
  --blog-rule: var(--color-border-hairline);
  --blog-table-head: var(--color-surface);
  /* Table text as on the live blog (user's decision 29 Sep 2026): no tokens for these greys */
  --blog-table-text: #222222;
  --blog-table-head-text: #111111;
  /* CTA card plate as on the live blog (#EEEEEE); no token for this grey yet */
  --blog-cta-card-bg: #EEEEEE;
  --blog-table-wide: 1232px;     /* tables break out of the text column (live, fixed) */
  --blog-link: var(--color-accent-indigo);
  --blog-quote-bg: var(--color-surface);

  /* Layout */
  --blog-column: 720px;          /* text column (live, fixed) */
  --blog-wide: 920px;            /* big quote, tables (fixed) */
  --blog-hero: 1100px;           /* title (fixed) */

  /* Reading scale (live) */
  --blog-title-size: 77px;       /* on every width from 768 up (live, fixed); 44px on phones */
  --blog-title-max: 1100px;      /* title box incl. 50px side fields; ~1000px of text (live: 998–1100) */
  --blog-title-lh: 1;
  --blog-text-size: 22px;        /* fixed on live */
  --blog-text-lh: 1.4;
  --blog-text-weight: 500;
  --blog-h2-size: 2.75rem;       /* 44px at root 16; follows the fluid root like live (design-system/fluid-root.css) */
  --blog-h2-lh: 1;
  --blog-h2-ls: -0.033em;
  --blog-h3-size: 1.8rem;        /* 28.8px at root 16; follows the fluid root */
  --blog-h3-lh: 1.3;
  --blog-bigquote-size: clamp(1.75rem, 4.7vw, 3rem);        /* 48px @1024 */
  --blog-meta-size: 0.9rem;      /* 14.4px at root 16: date, author, captions — grows with the site */
  --blog-table-size: 14px;       /* table text (live, fixed) */
  --blog-cta-size: 28px;         /* fixed on live */
}

@media (max-width: 767px) {
  :root {
    --blog-title-size: 44px;
    --blog-cta-size: 22px;       /* live */
  }
}

/* ---------- page ---------- */
body.blog {
  margin: 0;
  background: var(--color-bg-white);
  color: var(--blog-ink);
  font-family: var(--font);
  font-variation-settings: "slnt" var(--slnt, 0);
}
.blog em, .blog i { --slnt: 10; }

/* Font axes (live blog, see docs/typography-fonts.md): headings are narrowed on the wdth axis.
   The list is declared on every element so each one resolves its own --wdth / --slnt;
   an inherited font-variation-settings would carry the parent's resolved values instead. */
.blog, .blog * { font-variation-settings: "slnt" var(--slnt, 0), "wdth" var(--wdth, 100); }

.post { padding: var(--space-xl) var(--pad-horizontal); }
@media (min-width: 768px) {
  /* live: 40px under the menu at root 16 (2.8em of the 14.4px body), sides 24px — both grow with the site */
  .post { padding-top: 2.52rem; padding-inline: 1.5rem; }
}

.post-hero {
  max-width: var(--blog-hero);
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.post-hero__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 2.52rem;  /* live, measured against bir.ch 01.10.2026: pill → date 63px at root 16 */
}
.post-pill {
  display: inline-block;
  padding: 1em 1.5em;  /* live: 14.4 / 21.6 at 14.4px */
  border: 0.125rem solid var(--blog-ink);
  border-radius: 0.5556em;  /* live: 8 at 14.4px */
  font-weight: 600;
  font-size: var(--blog-meta-size);
  line-height: 1.2;
}
@media (min-width: 1440px) {
  .post-pill { font-size: 17px; }  /* live: Webflow's 1440 breakpoint pins the pill at 17px */
}
.post-hero__date { font-size: var(--blog-meta-size); font-weight: 600; line-height: 1.2; margin: 0 0 0.3rem; padding: 0.45rem 0; }  /* date → title 11.6px (live) */
.post-hero__title {
  max-width: var(--blog-title-max);
  margin: 0 auto 0.67rem;  /* title → author 10.7px (live) */
  font-family: var(--blog-font-serif);
  font-size: var(--blog-title-size);
  line-height: var(--blog-title-lh);
  letter-spacing: 0.01em;
  font-weight: 600;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .post-hero__title { padding-inline: 50px; }  /* side fields around the title (live .title-wrap, fixed) */
}
.post-hero__author { font-size: var(--blog-meta-size); font-weight: 600; margin: 0; }
.post-hero__author span { color: var(--color-text-grey); font-weight: 400; }

.post-cover {
  max-width: var(--blog-hero);
  margin: 0 auto var(--space-xl);
}
.post-cover img { width: 100%; height: auto; border-radius: var(--radius-lg); }

/* ---------- article body ---------- */
.post-body {
  max-width: var(--blog-column);
  margin: 0 auto;
  font-size: var(--blog-text-size);
  line-height: var(--blog-text-lh);
  font-weight: var(--blog-text-weight);
}
/* Vertical rhythm = live bir.ch/blog (measured 29 Sep 2026). Neighbouring margins collapse to the larger one,
   so the gap between two elements is max(bottom of the first, top of the second):
   p→p 30, heading→text 30, text→heading 40, text→list 20, list→text 30, text→table/CTA 60, table→text 30. */
.post-body > * { margin: 0 0 20px; }
.post-body .a-group { margin: 0; }  /* a run of text edited as one CMS block; children keep their own margins */
.post-body p { margin: 30px 0 20px; }
.post-body ul, .post-body ol { margin: 0 0 10px; }
.post-body a { color: var(--blog-link); text-decoration: underline; }
.post-body a:hover { text-decoration: underline; }
.post-body strong { font-weight: 700; }

.post-body h2, .post-body h3, .post-body h4 { font-weight: 600; text-wrap: balance; }
.post-body h2, .post-faq h2 { --wdth: 89.2; font-weight: 700; }  /* live: "wdth" 89.2, "wght" 700 */
.post-body h3 { --wdth: 86.5; font-weight: 630; }                  /* live: "wdth" 86.5, "wght" 630 */
.post-body h2 {
  margin: 40px 0 18px;
  font-size: var(--blog-h2-size);
  line-height: var(--blog-h2-lh);
  letter-spacing: var(--blog-h2-ls);
}
.post-body h3 { margin: 40px 0 12px; font-size: var(--blog-h3-size); line-height: var(--blog-h3-lh); }
.post-body h4 { margin: 2rem 0 0.5rem; font-size: 1.5rem; line-height: 1.3; }
.post-body p { text-wrap: pretty; }

.post-body ul, .post-body ol { padding-left: 25px; }
.post-body li { margin: 0.5rem 0; }

/* Small quote — native rich-text blockquote */
.post-body .a-quote {
  margin: 22px 0;
  padding: 30px 40px;
  background: var(--blog-quote-bg);
  border-radius: 12px;  /* live 11, fixed */
}

.post-body .a-image { margin: 1.25rem 0; }
.a-image img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-body .a-video-figure { margin: 1.25rem 0; }
.post-body .a-video-figure .a-video { margin: 0; }
.a-table__caption { margin: 0.75rem 0 0; font-size: var(--blog-meta-size); color: var(--color-text-grey); }
.a-video-figure figcaption,
.a-image figcaption { margin-top: var(--space-xs); font-size: var(--blog-meta-size); color: var(--color-text-grey); }

.a-video { position: relative; aspect-ratio: 16 / 9; }
.post-body .a-video { margin: 1.25rem 0; }
.a-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.a-video--spotify { aspect-ratio: auto; height: 22rem; }

/* CTA — colours come from variants (blog/variants.json → generated/variants.css) */
.post-body .a-cta { margin: 60px auto 40px; max-width: 740px; }
/* CTA card layout (live .cta-25-content): grey plate, centred line of text, gradient button with an arrow */
.post-body .a-cta--card {
  max-width: none;
  margin: 0.9rem 0;
  padding: 1.44rem 1.5rem 2.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  background: var(--blog-cta-card-bg);
  border-radius: var(--radius-xl);
}
.a-cta__heading { margin: 1.875rem 0 0; font-size: var(--blog-text-size); line-height: var(--blog-text-lh); font-weight: 500; text-align: center; text-wrap: balance; }
.post-body .a-cta--card .a-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 1.25em;
  padding: 0.76em 1.39em 0.9em 2.78em;
  border-radius: 0.5em;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}
.post-body .a-cta--card .a-cta__button:hover { background: var(--cta-bg); color: var(--cta-text); filter: brightness(1.08); }
.a-cta__arrow { width: 0.6em; height: 0.6em; flex: none; }
@media (min-width: 768px) {
  .post-body .a-cta--card { margin-inline: 0; }
  .post-body .a-cta:not(.a-cta--card) { margin-inline: -10px; }  /* live: 740px button, 10px wider than the text column on each side */
}
.a-cta__button {
  display: block;
  padding: 24px 40px;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: var(--blog-cta-size);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.post-body .a-cta__button { color: var(--cta-text); text-decoration: none; }
.post-body .a-cta__button:hover { background: var(--cta-bg-hover); color: var(--cta-text-hover); text-decoration: none; }
@media (max-width: 767px) {
  .a-cta__button { padding: 1.25rem 1.5rem; }
}

/* Big quote — wider than the text column */
.a-bigquote {
  width: min(var(--blog-wide), calc(100vw - 2 * var(--pad-horizontal)));
  margin: 2rem 0;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 4rem 0;
  text-align: center;
}
.a-bigquote blockquote {
  margin: 0 0 var(--space);
  font-size: var(--blog-bigquote-size);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: balance;
}
.a-bigquote figcaption { font-size: var(--blog-meta-size); letter-spacing: -0.02em; }

/* Table — one data set; desktop grid, mobile cards (same markup, CSS only) */
.a-table { font-size: var(--blog-table-size); line-height: 1.5; font-weight: 400; }
.post-body .a-table { margin: 3.75rem 0 1.875rem; }
.post-body .a-table__title { margin: 0 0 1rem; font-size: 20px; font-weight: 630; line-height: 1.3; }
.a-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
  /* Live blog: the table spans the page container while its title stays in the text column */
  .a-table__scroll {
    width: min(var(--blog-table-wide), calc(100vw - 3rem));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
.a-table table { width: 100%; border-collapse: collapse; }
.a-table th, .a-table td {
  padding: 14px 16px;
  border: 0.0625rem solid var(--blog-rule);
  text-align: left;
  vertical-align: top;
  color: var(--blog-table-text);
  font-weight: 600;
  background: var(--color-bg-white);
}
.a-table th { background: var(--blog-table-head); color: var(--blog-table-head-text); }

@media (max-width: 767px) {
  /* mobileView: scroll — keep the grid and let it scroll sideways */
  .a-table--scroll table { min-width: 43.75rem; }

  /* mobileView: cards — one card per row, column names as labels */
  .a-table--cards thead { display: none; }
  .a-table--cards table, .a-table--cards tbody, .a-table--cards tr, .a-table--cards td { display: block; }
  .a-table--cards tr {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 0.0625rem solid var(--blog-rule);
    border-radius: var(--radius-sm);
  }
  .a-table--cards td { padding: 0; border: 0; }
  .a-table--cards td + td { margin-top: 0.5rem; }
  .a-table--cards td::before { content: attr(data-label) ": "; font-weight: 600; }
}

/* Raw HTML — exceptions only; styles come with the fragment itself */
.a-html { margin: 2.5rem 0; }

/* ---------- FAQ ---------- */
.post-faq { max-width: var(--blog-column); margin: var(--space-xl) auto 0; }
.post-faq h2 {
  margin: 0 0 var(--space);
  font-size: var(--blog-h2-size);
  line-height: var(--blog-h2-lh);
  letter-spacing: var(--blog-h2-ls);
  font-weight: 700;
}
.post-faq details { border-top: 0.0625rem solid var(--blog-rule); padding: var(--space) 0; }
.post-faq details:last-child { border-bottom: 0.0625rem solid var(--blog-rule); }
.post-faq summary { cursor: pointer; font-size: 1.375rem; font-weight: 600; line-height: 1.3; }
.post-faq p { margin: var(--space-sm) 0 0; font-size: 1.125rem; line-height: 1.5; }

/* ---------- pilot banner (not part of the future site) ---------- */
.pilot-note {
  /* pinned to the bottom, under the menu layer (z 1000): the fixed menu owns the top of the page */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  margin: 0;
  padding: var(--space-xs) var(--pad-horizontal);
  background: var(--color-primary);
  font-size: var(--blog-meta-size);
  font-weight: 600;
  text-align: center;
}

/* ---------- phones (live blog, measured 29 Sep 2026) ---------- */
@media (max-width: 767px) {
  .post-hero { text-align: left; }
  .post-hero__nav { justify-content: flex-start; margin-bottom: 1.9rem; }  /* pills → date 53.6px (live) */
  .post-pill { font-size: 0.9375rem; }  /* live: 15px on phones */
  .post-body .a-quote { padding: 1.25rem; }
  .a-image img { border-radius: var(--radius-xs); }
}