:root {
  /* Accent — the only brand colour */
  --bb-accent: #255af7;
  --bb-accent-soft: #DCE5FF;      /* highlighter band, avatar placeholder, card border */
  --bb-accent-tint: #EEF2FF;      /* date pills */
  --bb-accent-underline: rgba(37, 90, 247, .35);
  --bb-accent-ring: rgba(37, 90, 247, .18);
  --bb-selection: #dbe4fe;

  /* Ink scale */
  --bb-ink: #111111;              /* headings, strong, hover target for blue */
  --bb-body: #1f1f1f;             /* article body copy */
  --bb-secondary: #3F3F3F;        /* intros, subheads, nav */
  --bb-muted: #5C5C59;            /* meta, captions, dates, icons */
  --bb-faint: #8A8A86;            /* placeholders, "Built with Kit" */
  --bb-divider-slash: #C9CCD6;    /* "/" between email meta items */

  /* Lines */
  --bb-rule: #E4E6EE;             /* dividers, list rows, header/footer */
  --bb-rule-header: #E8EAF2;
  --bb-border-button: #E2E2DF;
  --bb-border-input: #D6D9E4;

  /* Surfaces */
  --bb-page: #FFFFFF;
  --bb-page-soft: #FAFAFC;        /* blog index background */
  --bb-surface: #F6F7FB;          /* comment cards, newsletter, stat boxes */
  --bb-avatar-bg: #F2F2F0;

  /* Diagram palette ("sketchbook paper") */
  --bb-paper: #F3EDE2;
  --bb-paper-edge: #E2D9C8;
  --bb-paper-fill-1: #D9D3C6;
  --bb-paper-fill-2: #B5B5AF;
  --bb-paper-ink-soft: #6B6B66;
  --bb-paper-ink-dark: #1A1A18;

  /* Semantic aliases */
  --text-heading: var(--bb-ink);
  --text-body: var(--bb-body);
  --text-secondary: var(--bb-secondary);
  --text-meta: var(--bb-muted);
  --text-placeholder: var(--bb-faint);
  --text-link: var(--bb-accent);
  --text-link-hover: var(--bb-ink);
  --text-on-accent: #FFFFFF;
  --surface-page: var(--bb-page);
  --surface-card: var(--bb-surface);
  --surface-highlight: var(--bb-accent-soft);
  --border-default: var(--bb-rule);
  --border-control: var(--bb-border-button);
  --border-field: var(--bb-border-input);
  --action-primary: var(--bb-accent);
  --action-primary-hover: var(--bb-ink);
}

:root {
  --font-sans: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand: Caveat, cursive;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Blog / posts */
  --type-post-title-size: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* @kind other */
  --type-post-title-lh: 1.1;
  --type-post-title-ls: -.025em;
  --type-h2-size: 1.7rem;
  --type-h2-lh: 1.2;
  --type-h3-size: 1.35rem;
  --type-h3-lh: 1.25;
  --type-heading-ls: -.02em;
  --type-lede-size: 1.375rem;   /* 22px */
  --type-lede-lh: 1.55;
  --type-body-size: 1.25rem;    /* 20px; 18px on mobile */
  --type-body-size-mobile: 1.125rem;
  --type-body-lh: 1.65;
  --type-meta-size: .9375rem;   /* 15px */
  --type-caption-size: .875rem; /* 14px */
  --type-caption-lh: 1.45;
  --type-index-title-size: 1.3125rem; /* 21px */
  --type-index-title-ls: -.015em;
  --type-site-title-size: 19px;
  --type-site-title-ls: -.4px;
  --type-eyebrow-size: 12px;
  --type-eyebrow-ls: .1em;

  /* Home & booking (lighter, personal) */
  --type-home-h1-size: clamp(2.15rem, 8vw, 3rem);
  --type-home-h1-lh: 1.125;
  --type-home-h1-ls: -.1px;
  --type-booking-h1-size: clamp(1.85rem, 6vw, 2.5rem);
  --type-home-intro-size: clamp(1.125rem, 3.6vw, 1.375rem);
  --type-home-intro-lh: 1.4;
  --type-home-button-size: clamp(1.0625rem, 3.4vw, 1.125rem);

  /* Email */
  --type-email-title-size: 38px;
  --type-email-body-size: 18px;
  --type-email-body-lh: 1.7;
  --type-email-h2-size: 26px;
  --type-email-h3-size: 20px;
}

:root {
  --col-reading: 680px;
  --col-home: 520px;
  --col-booking: 940px;
  --col-email: 600px;
  --col-diagram: 1200px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 18px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 44px;
  --space-10: 64px;

  --gap-paragraph: 1.6rem;
  --gap-heading-above: 2.75rem;
  --gap-heading-above-h3: 2.25rem;
  --gap-heading-below: .9rem;
  --gap-list-item: .5rem;
  --gutter: 20px;
  --section-pad-home: clamp(32px, 7vw, 64px) 20px clamp(48px, 8vw, 80px);

  --button-height-home: 64px;
  --button-height-tab: 60px;
}

:root {
  --radius-pill: 999px;
  --radius-image: 10px;
  --radius-card: 12px;
  --radius-newsletter: 16px;

  --shadow-soft: 0 1px 0 #E4E6EE, 0 12px 30px -18px rgba(37, 90, 247, .35);
  --shadow-newsletter: 0 1px 0 #E4E6EE, 0 16px 40px -28px rgba(37, 90, 247, .45);
  --focus-ring: 0 0 0 3px rgba(37, 90, 247, .18);

  --highlight-band: linear-gradient(transparent 62%, #DCE5FF 62%); /* @kind other */

  --ease: ease; /* @kind other */
  --dur: .18s; /* @kind other */
  --lift: translateY(-1px); /* @kind other */

  --stroke-diagram: 2.5px;
}

html { -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--font-sans); color: var(--bb-ink); background: var(--bb-page); }
a { color: var(--bb-accent); text-underline-offset: .18em; text-decoration-color: var(--bb-accent-underline); }
a:hover { color: var(--bb-ink); text-decoration-color: currentColor; }
::selection { background: var(--bb-selection); }
h1, h2, h3, p { text-wrap: pretty; }


/* ===== Site styles: design system "Blog CSS" layer + the Site project's page designs ===== */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bb-page); }
body { color: var(--bb-body); font-weight: var(--fw-regular); }
img, iframe, video { max-width: 100%; }
img { height: auto; }
:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: var(--space-3); background: var(--bb-page); padding: var(--space-2) var(--space-4); z-index: 100; }

/* ---- Buttons ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7rem 1.4rem; border-radius: var(--radius-pill);
  background: var(--action-primary); color: var(--text-on-accent);
  font-weight: var(--fw-semibold); line-height: 1.4; text-decoration: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.button:hover { background: var(--action-primary-hover); color: var(--text-on-accent); transform: var(--lift); }
.button--ink { background: var(--bb-ink); padding: 9px 18px; font-size: 14px; }
.button--ink:hover { background: var(--bb-accent); }
.button--large { min-height: 56px; padding: 16px 24px; font-size: 17px; letter-spacing: -.1px; }
.button--large span { font-size: .95rem; opacity: .75; }

/* ---- Header ---- */
.site-header {
  position: relative; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 22px 30px;
  border-bottom: 1px solid var(--bb-rule-header); background: var(--bb-page);
}
.site-title {
  font-size: var(--type-site-title-size); font-weight: var(--fw-bold); line-height: 1;
  letter-spacing: var(--type-site-title-ls); color: var(--bb-ink);
  text-decoration: none; white-space: nowrap;
}
.site-title span, .footer-mark span, .mobile-menu-nav span { color: var(--bb-accent); }
.site-title:hover { color: var(--bb-ink); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 15px; }
.site-nav a:not(.button) { color: var(--bb-secondary); font-weight: var(--fw-medium); text-decoration: none; transition: color var(--dur) var(--ease); }
.site-nav a:not(.button):hover, .site-nav a[aria-current] { color: var(--bb-accent); }
.site-nav a[aria-current] { font-weight: var(--fw-semibold); }
.site-nav .button { padding: .55rem 1.15rem; }

.menu-toggle, .mobile-menu { display: none; }

/* Mobile header: only with JS, so the plain nav stays usable without it. */
@media (max-width: 960px) {
  .js body { padding-top: 60px; }
  .js .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: 60px; padding: 0 10px 0 20px; flex-wrap: nowrap;
    border-bottom-color: var(--bb-page);
    transition: transform .24s ease, border-color var(--dur) var(--ease);
  }
  .js[data-scrolled] .site-header, .js[data-menu-open] .site-header { border-bottom-color: var(--bb-rule-header); }
  .js[data-header-hidden] .site-header { transform: translateY(-100%); }
  .js .site-title { font-size: 18px; }
  .js .site-nav { display: none; }

  .js .menu-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
    color: var(--bb-ink); transition: color var(--dur) var(--ease);
  }
  .js .menu-toggle:hover { color: var(--bb-accent); }
  .menu-toggle span { display: block; width: 20px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .24s ease; }
  .js[data-menu-open] .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .js[data-menu-open] .menu-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .js .mobile-menu {
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 59;
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: 24px 20px 32px; overflow-y: auto; background: var(--bb-page);
    opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease;
  }
  .js[data-menu-open] .mobile-menu { opacity: 1; visibility: visible; }
  .mobile-menu-nav { display: flex; flex-direction: column; }
  .mobile-menu-nav a, .mobile-menu-foot {
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, color var(--dur) var(--ease);
  }
  .mobile-menu-nav a {
    display: block; padding: 8px 0; color: var(--bb-ink); text-decoration: none;
    font-size: 40px; font-weight: var(--fw-semibold); letter-spacing: -.03em; line-height: 1.15;
  }
  .mobile-menu-nav a:hover { color: var(--bb-accent); }
  .js[data-menu-open] .mobile-menu-nav a { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 45ms), calc(60ms + var(--i) * 45ms), 0s; }
  .mobile-menu-foot { display: flex; flex-direction: column; gap: 20px; }
  .js[data-menu-open] .mobile-menu-foot { opacity: 1; transform: none; transition-delay: .24s; }
  .mobile-menu-social { display: flex; justify-content: center; gap: 24px; }
  .mobile-menu-social a { color: var(--bb-muted); font-size: 15px; font-weight: var(--fw-medium); text-decoration: none; }
  .mobile-menu-social a:hover { color: var(--bb-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .mobile-menu, .mobile-menu-nav a, .mobile-menu-foot, .menu-toggle span { transition: none !important; }
}

/* ---- Main column ---- */
.site-main { padding: var(--space-10) 30px var(--space-10); }
.site-main > :not(.entry, .post-layout), .entry > :not(.entry-content), .entry-content > * { max-width: var(--col-reading); margin-inline: auto; }
.entry-content > :where(#bb-tree, #bb-cal) { max-width: none; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--bb-rule); background: var(--bb-page); }
.site-footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 24px 30px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-mark { color: var(--bb-ink); font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -.4px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.footer-links a { color: var(--bb-muted); font-size: 14px; text-decoration: none; transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: var(--bb-accent); }

/* ---- Headings ---- */
h1, h2, h3, h4 { color: var(--bb-ink); font-weight: var(--fw-bold); letter-spacing: var(--type-heading-ls); line-height: 1.1; }

/* ---- Post / page ---- */
.entry-title {
  margin: 0 0 1rem; font-size: var(--type-post-title-size);
  line-height: var(--type-post-title-lh); letter-spacing: var(--type-post-title-ls);
}
.entry-meta { margin: 0 0 var(--space-7); color: var(--bb-muted); font-size: var(--type-meta-size); line-height: 1.4; }
.entry-meta .dot { color: var(--bb-accent); margin-inline: .35em; }
.entry-meta a { font-weight: var(--fw-medium); text-decoration: none; }
.entry-meta .entry-author { color: var(--bb-ink); font-weight: var(--fw-semibold); transition: color var(--dur) var(--ease); }
.entry-meta .entry-author:hover { color: var(--bb-accent); }
.entry-meta:has(+ .entry-dates) { margin-bottom: var(--space-2); }

.entry-content { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--bb-body); }
.entry-content > * { margin-block: var(--gap-paragraph) 0; }
.entry-content > :first-child { margin-block-start: 0; }
.entry-content > p:first-child { font-size: var(--type-lede-size); line-height: var(--type-lede-lh); }
.entry-content h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); margin-block-start: var(--gap-heading-above); }
.entry-content h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); margin-block-start: var(--gap-heading-above-h3); }
.entry-content h2 + *, .entry-content h3 + * { margin-block-start: var(--gap-heading-below); }
.entry-content p > strong { font-weight: var(--fw-bold); color: var(--bb-ink); background: var(--highlight-band); }
.entry-content :where(ul, ol) { padding-inline-start: 1.4em; }
.entry-content li { margin-top: var(--gap-list-item); }
.entry-content li::marker { color: var(--bb-accent); font-weight: var(--fw-bold); }
.entry-content figure { margin-block: 2rem; margin-inline: auto; }
.entry-content .wp-block-image img { display: block; margin-inline: auto; border-radius: var(--radius-image); box-shadow: var(--shadow-soft); }
.entry-content figcaption { margin-top: .75rem; color: var(--bb-muted); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); text-align: center; }
.entry-content blockquote { margin-inline: auto; padding-left: 1.25rem; border-left: 3px solid var(--bb-accent-soft); color: var(--bb-secondary); }
.entry-content .has-text-align-center { text-align: center; }
.entry-content hr, .entry-content .wp-block-separator { border: 0; height: auto; margin-block: 2.5rem; text-align: center; overflow: visible; }
.entry-content hr::before, .entry-content .wp-block-separator::before { content: "•  •  •"; white-space: pre; color: var(--bb-accent); font-size: 1.1rem; letter-spacing: .3em; }

.embed--spotify iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: var(--radius-card); }
.embed--video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-image); }
.embed--link a { font-weight: var(--fw-semibold); }

.footnotes { font-size: var(--type-meta-size); color: var(--bb-muted); border-top: 1px solid var(--bb-rule); padding-top: var(--space-6); }
.footnotes a { overflow-wrap: anywhere; }

/* Simple page (Privacy): smaller reading type */
.entry--simple .entry-content { font-size: 1.125rem; }
.entry--simple .entry-content > p:first-child { font-size: 1.125rem; line-height: var(--type-body-lh); }
.entry--simple .entry-content h2 { font-size: 1.5rem; }

/* ---- Post page layout: reading column + sticky newsletter sidebar on wide screens ---- */
.post-layout > * { max-width: var(--col-reading); margin-inline: auto; }
@media (min-width: 1100px) {
  .post-layout {
    display: grid; justify-content: center; column-gap: 54px;
    grid-template-columns: minmax(0, var(--col-reading)) 260px;
  }
  .post-layout > * { max-width: none; margin-inline: 0; }
  .post-layout > .post { grid-column: 1; grid-row: 1; }
  .post-layout > .comments { grid-column: 1; grid-row: 2; }
  .post-layout > .post-newsletter { grid-column: 2; grid-row: 1 / span 2; margin-top: 8px; }
  .post-newsletter-inner { position: sticky; top: 32px; }
  .post-newsletter .formkit-form [data-style="minimal"] { padding: 28px 24px 20px !important; }
}

.read-next { margin-top: var(--space-9); }
.read-next h2, .comments-title { margin: 0 0 20px; font-size: 22px; letter-spacing: -.015em; line-height: 1.25; }
.read-next-card {
  display: flex; flex-direction: column; gap: 10px; padding: 28px;
  background: var(--bb-surface); border-radius: var(--radius-card);
  color: var(--bb-ink); text-decoration: none; transition: transform var(--dur) var(--ease);
}
.read-next-card:hover { color: var(--bb-ink); transform: var(--lift); }
.read-next-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: var(--fw-semibold); }
.read-next-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--bb-avatar-bg); }
.read-next-title { font-size: 24px; font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.read-next-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--bb-muted); font-size: 14px; line-height: 1.4; }
.read-next-foot span { font-size: 16px; }

.author-box { display: flex; flex-direction: column; gap: 16px; margin-top: var(--space-7); padding: 40px 0 8px; border-top: 1px solid var(--bb-rule); }
.author-photo { align-self: flex-start; display: block; border-radius: 50%; transition: transform var(--dur) var(--ease); }
.author-photo:hover { transform: var(--lift); }
.author-photo img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--bb-avatar-bg); }
.author-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.author-text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; min-width: 0; }
.author-name { color: var(--bb-ink); font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -.015em; line-height: 1.25; text-decoration: none; transition: color var(--dur) var(--ease); }
.author-name:hover { color: var(--bb-accent); }
.author-bio { margin: 0; color: var(--bb-muted); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.author-links { display: flex; align-items: center; gap: 2px; margin: 6px 0 0 -10px; }
.author-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--bb-muted); transition: color var(--dur) var(--ease); }
.author-links a:hover { color: var(--bb-accent); }
.author-row .button { flex: none; }

.post-newsletter { margin-top: var(--space-6); scroll-margin-top: 80px; }

/* ---- Blog index and category pages ---- */
body.is-archive { background: var(--bb-page-soft); }
.archive-title { margin: 0 auto 12px; font-size: 2.125rem; letter-spacing: var(--type-post-title-ls); }
.archive-intro { margin: 0 auto var(--space-7); color: var(--bb-secondary); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.archive-title + .post-list { margin-top: var(--space-6); }
.post-list { list-style: none; padding: 0; margin-top: 0; }
.post-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-7);
  padding: 22px 0; border-bottom: 1px solid var(--bb-rule); text-decoration: none;
}
.post-list-title {
  flex: 1 1 auto; min-width: 0; color: var(--bb-ink);
  font-size: var(--type-index-title-size); font-weight: var(--fw-semibold);
  line-height: 1.3; letter-spacing: var(--type-index-title-ls); text-wrap: pretty;
  transition: color var(--dur) var(--ease);
}
.post-list a:hover .post-list-title { color: var(--bb-accent); }
.post-list-num { color: var(--bb-faint); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.date-pill {
  flex: none; white-space: nowrap; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--bb-accent-tint); color: var(--bb-accent);
  font-size: .8125rem; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}

.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: 36px; font-size: 15px; font-weight: var(--fw-medium); color: var(--bb-muted); }
.pagination-numbers { display: flex; gap: var(--space-2); }
.pagination-numbers a, .pagination-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-pill); color: var(--bb-muted); text-decoration: none;
}
.pagination-numbers a:hover { color: var(--bb-accent); }
.pagination-numbers [aria-current] { background: var(--bb-accent); color: var(--text-on-accent); }
.pagination-step { color: var(--bb-accent); font-weight: var(--fw-semibold); text-decoration: none; }
.pagination-step:hover { color: var(--bb-ink); }

/* ---- Comments ---- */
.comments { margin-top: var(--space-7); padding-top: 40px; border-top: 1px solid var(--bb-rule); }
.comments-closed { margin: 0 0 var(--space-7); color: var(--bb-muted); font-size: var(--type-meta-size); }
.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; }
.comment-list > li { padding: 24px 0; border-top: 1px solid var(--bb-rule); }
.comment-list > li:last-child { border-bottom: 1px solid var(--bb-rule); }
.comment-replies { margin: 20px 0 0 15px; padding-left: 24px; border-left: 1px solid var(--bb-rule); }
.comment-replies > li + li { margin-top: 20px; }
.comment { display: flex; flex-direction: column; gap: 12px; }
.comment-head { display: flex; align-items: center; gap: 10px; }
.comment-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bb-avatar-bg); }
.comment-avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--bb-rule); color: var(--bb-muted); font-size: 14px; font-weight: var(--fw-semibold); line-height: 1; }
.comment-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.comment-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comment-name { color: var(--bb-ink); font-size: 14px; font-weight: var(--fw-semibold); text-decoration: none; }
a.comment-name:hover { color: var(--bb-accent); }
.comment-badge { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bb-accent-tint); color: var(--bb-accent); font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.6; }
.comment-date { color: var(--bb-muted); font-size: 13px; text-decoration: none; }
.comment-date:hover { color: var(--bb-accent); }
.comment-body { color: var(--bb-body); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }

/* ---- Kit forms: outer card per the design. Kit's Style panel sets inline styles, hence !important. ---- */
.kit-form .formkit-form[data-format="inline"] {
  max-width: none !important;
  background: var(--bb-surface) !important;
  border: 1px solid var(--bb-accent-soft) !important;
  border-radius: var(--radius-newsletter) !important;
  box-shadow: var(--shadow-newsletter);
}
.kit-form .formkit-background { display: none !important; }

@media (max-width: 640px) {
  .site-header { padding: 18px var(--gutter); }
  .site-main { padding: var(--space-8) var(--gutter); }
  .site-footer-inner { padding: 24px var(--gutter); }
  .entry-content { font-size: var(--type-body-size-mobile); }
  .entry-content > p:first-child { font-size: 1.1875rem; }
  .entry-title { font-size: 1.85rem; }
  .post-list a { flex-direction: column; gap: var(--space-3); }
  .read-next-card { padding: 22px; }
  .comment-replies { margin-left: 8px; padding-left: 16px; }
}

/* ---- Comment form (interim, Formspree) ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.comment-form { display: flex; flex-direction: column; gap: 10px; margin: 0 0 28px; }
.comment-form-trap { position: absolute; left: -9999px; }
.comment-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.comment-form :is(input, textarea) {
  font: inherit; font-size: 15px; line-height: 1.4; color: var(--bb-ink);
  background: var(--bb-surface); border: 1px solid transparent; outline: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.comment-form input { flex: 1 1 200px; min-width: 0; padding: 12px 20px; border-radius: var(--radius-pill); }
.comment-form textarea { width: 100%; padding: 14px 20px; border-radius: var(--radius-card); line-height: 1.55; resize: vertical; }
.comment-form :is(input, textarea):focus { background: var(--bb-page); border-color: var(--bb-accent); box-shadow: var(--focus-ring); }
.comment-form :is(input, textarea)::placeholder { color: var(--bb-faint); }
.comment-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.comment-form-note { margin: 0; color: var(--bb-muted); font-size: 13px; }
.comment-form-note.is-error { color: #B42318; }
.comment-form .button { padding: 10px 22px; font-size: 15px; border: 0; cursor: pointer; }
.comment-form .button:disabled { opacity: .6; cursor: wait; transform: none; }
.comment-form-replying { margin: 0; color: var(--bb-muted); font-size: 14px; }
.comment-form-replying strong { color: var(--bb-ink); font-weight: var(--fw-semibold); }
.comment-form-replying button { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--bb-accent); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.comment-reply { align-self: flex-start; color: var(--bb-muted); font-size: 14px; font-weight: var(--fw-medium); text-decoration: none; transition: color var(--dur) var(--ease); }
.comment-reply:hover { color: var(--bb-accent); }
/* Keep anchor targets clear of the fixed mobile header. */
#comments, #respond, [id^="comment-"] { scroll-margin-top: 80px; }
.comment-form.is-reply { margin: 16px 0 0; }