/* Blog styles, loaded after /styles.css on blog pages only. Every value here comes from the
   tokens defined there so the blog and the marketing pages stay one design. */

:root {
  /* One reading measure, in px rather than ch: each child of .post-body has its own font-size
     and ch would resolve against that instead of the prose. This is ~68ch at the body size. */
  --measure: 660px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   Post hero
   --------------------------------------------------------------------------- */

.post-hero,
.blog-index {
  padding-top: clamp(146px, 15vw, 184px);
}

.post-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.post-eyebrow > * + *::before {
  margin-right: 12px;
  color: var(--muted);
  content: "·";
}

.post-hero h1,
.blog-index-heading h1 {
  max-width: 880px;
  margin: 15px 0 0;
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 580;
  line-height: 1.03;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.post-byline {
  display: flex;
  /* The rule divides the hero from the body, so it matches the widest thing in the hero, the h1.
     Unconstrained it spanned the full 1140px container and overshot everything above it. */
  max-width: 880px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 12px;
}

.post-byline img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: 0 0 auto;
  background: var(--ink);
  object-fit: cover;
  object-position: 50% 28%;
}

.post-byline > span {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.post-byline strong {
  font-size: 12.5px;
  font-weight: 640;
}

.post-byline small {
  margin-top: 2px;
  color: var(--quiet);
  font-size: 11px;
}

.answer-block {
  max-width: 760px;
  margin-top: 28px;
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 32px);
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--soft);
}

.answer-block .section-label {
  margin-bottom: 13px;
}

.answer-block p:not(.section-label) {
  margin: 0;
  color: var(--ink);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: -0.032em;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Post body
   --------------------------------------------------------------------------- */

.post-body {
  padding-block: clamp(34px, 5vw, 48px) 0;
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.72;
  letter-spacing: -0.021em;
}

/* The renderer wraps this in .container, so widths here only set the reading measure. Flush left,
   not centred: the h1 above and the FAQ below both start at the container's left edge, and
   centring only the prose pushed it 240px right of its own headline. */
.post-body > * {
  width: min(var(--measure), 100%);
  margin-inline: 0;
}

.post-body h2,
.post-body h3 {
  color: var(--ink);
  scroll-margin-top: 90px;
  text-wrap: balance;
}

.post-body h2 {
  margin-block: 1.75em 0.5em;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 585;
  line-height: 1.12;
  letter-spacing: -0.048em;
}

.post-body h3 {
  margin-block: 1.9em 0.45em;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 630;
  line-height: 1.24;
  letter-spacing: -0.036em;
}

.post-body > :first-child {
  margin-top: 0;
}

.post-body p {
  margin-block: 0 1.3em;
  color: var(--quiet);
  text-wrap: pretty;
}

.post-body ul,
.post-body ol {
  margin-block: 0 1.4em;
  padding-left: 1.35em;
  color: var(--quiet);
}

.post-body li {
  margin-bottom: 0.55em;
  padding-left: 0.2em;
}

.post-body li::marker {
  color: var(--muted);
  font-weight: 620;
}

.post-body strong {
  color: var(--ink);
  font-weight: 640;
}

/* Only the roman Geist face is loaded and font-synthesis is off site-wide, so emphasis would
   otherwise render identically to body text. */
.post-body em {
  font-style: italic;
  font-synthesis: style;
}

.post-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.19em;
  transition: text-decoration-thickness 160ms ease;
}

.post-body a:hover {
  text-decoration-thickness: 2px;
}

.post-body blockquote {
  margin-block: 0 1.5em;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--soft-strong);
  color: var(--muted);
}

.post-body hr {
  height: 1px;
  margin-block: clamp(38px, 5vw, 54px);
  border: 0;
  background: var(--line);
}

/* ---------------------------------------------------------------------------
   Code and tables
   --------------------------------------------------------------------------- */

.post-body code,
.post-faq code,
.answer-block code {
  padding: 2px 5px;
  border-radius: 9px;
  color: var(--ink);
  background: var(--soft);
  font-family: var(--mono);
  font-size: 0.87em;
  letter-spacing: 0;
}

.post-body > pre,
.post-body > .table-scroll {
  width: min(calc(var(--measure) + 120px), 100%);
}

.post-body pre {
  position: relative;
  margin-block: 0 1.6em;
  padding: 34px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  overflow: hidden;
}

/* The scroll sits on the code, not the pre, so the language label stays put while it moves. */
.post-body pre code {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.post-body pre:has(code[class*="language-"])::before {
  position: absolute;
  top: 13px;
  right: 17px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  content: "code";
}

.post-body pre:has(code.language-bash)::before {
  content: "bash";
}

.post-body pre:has(code.language-python)::before {
  content: "python";
}

.post-body pre:has(code.language-json)::before {
  content: "json";
}

.post-body pre:has(code.language-yaml)::before {
  content: "yaml";
}

.table-scroll {
  margin-block: 0 1.6em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.table-scroll table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
}

.table-scroll th,
.table-scroll td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table-scroll th {
  color: var(--ink);
  background: var(--soft);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table-scroll td {
  color: var(--quiet);
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Contents and FAQ
   --------------------------------------------------------------------------- */

.post-toc {
  margin-block: 0 clamp(30px, 4vw, 42px);
  padding: 17px 20px 19px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.post-toc ol {
  margin: 11px 0 0;
  padding-left: 1.2em;
  font-size: 12.5px;
  line-height: 1.9;
}

.post-toc a {
  color: var(--quiet);
  text-decoration: none;
  transition: color 160ms ease;
}

.post-toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.post-faq {
  padding-block: clamp(48px, 6vw, 68px) 0;
}

/* .post-faq is also a .container, and a container centres itself. Putting the reading measure on
   the section therefore centred it, leaving the questions indented 240px to the right of the prose
   directly above them. The measure belongs on the children so the section stays a full container. */
.post-faq > * {
  max-width: var(--measure);
}

.post-faq h2,
.post-related h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 580;
  line-height: 1.1;
  letter-spacing: -0.048em;
}

.post-faq details {
  border-bottom: 1px solid var(--line);
}

.post-faq summary {
  display: flex;
  padding: 19px 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.028em;
  list-style: none;
  cursor: pointer;
}

.post-faq summary::-webkit-details-marker {
  display: none;
}

.post-faq summary::after {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  flex: 0 0 auto;
  color: var(--muted);
  transform: rotate(45deg);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  content: "";
}

.post-faq details[open] summary::after {
  transform: translateY(3px) rotate(225deg);
}

.post-faq details p {
  margin: 0 0 20px;
  padding-right: 27px;
  color: var(--quiet);
  font-size: 14.5px;
  line-height: 1.66;
}

/* ---------------------------------------------------------------------------
   Call to action and related posts
   --------------------------------------------------------------------------- */

/* Every section on a note carries top padding only, so they stack tightly against each other. That
   leaves whichever section happens to be last sitting flush against the footer, with no gap at all.
   It is most visible on .post-cta, which shares --inverse-bg with .footer: the two merge into one
   slab and the card loses its bottom corners. .post-related has the same problem whenever a note
   has related links. Spacing the region rather than any one component means it holds no matter
   which section ends the page. The main site does not need this because .section pads both ends. */
#content {
  padding-bottom: clamp(56px, 7vw, 80px);
}

/* A quiet in-body pointer, deliberately not styled like the CTA card below it: it is a reference
   the reader can follow mid-note, not a second pitch competing with the offer. */
.post-inline-offer {
  max-width: var(--measure);
  margin-top: clamp(32px, 4vw, 44px);
  padding: 16px 20px;
  border-left: 2px solid var(--line);
  color: var(--quiet);
  font-size: 14.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.post-inline-offer a {
  color: var(--ink);
  font-weight: 560;
}

.post-cta {
  display: flex;
  margin-top: clamp(56px, 7vw, 80px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 26px;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 56px);
  color: var(--inverse-text);
  background: var(--inverse-bg);
}

.post-cta .section-label {
  color: var(--inverse-subtle);
}

.post-cta h2 {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 575;
  line-height: 1.06;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.post-cta p:not(.section-label) {
  max-width: 540px;
  margin: 16px 0 0;
  color: var(--inverse-muted);
  font-size: 13.5px;
  line-height: 1.62;
}

.post-cta .button {
  flex: 0 0 auto;
}

.post-related {
  padding-block: clamp(48px, 6vw, 68px) 0;
}

.post-related h2 {
  margin-bottom: 22px;
}

.post-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.post-related-card {
  display: flex;
  min-height: 176px;
  padding: 24px;
  border-radius: var(--radius);
  flex-direction: column;
  background: var(--soft);
  transition: background 160ms ease;
}

.post-related-card:hover {
  background: var(--soft-strong);
}

.post-related-card h3 {
  margin: 30px 0 0;
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.post-related-card p {
  margin: 9px 0 0;
  color: var(--quiet);
  font-size: 12.5px;
  line-height: 1.56;
}

/* ---------------------------------------------------------------------------
   Index
   --------------------------------------------------------------------------- */

.blog-index {
  padding-bottom: clamp(88px, 9vw, 122px);
}

.blog-index-heading {
  max-width: 760px;
  margin-bottom: clamp(38px, 5vw, 54px);
}

.blog-index-heading p:not(.eyebrow) {
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--quiet);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.58;
}

.blog-layer-label {
  margin-block: 0 15px;
}

.post-grid + .blog-layer-label {
  margin-top: clamp(40px, 5vw, 58px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.post-card {
  display: flex;
  padding: clamp(22px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  flex-direction: column;
  background: var(--paper);
  transition:
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card:hover {
  box-shadow: 0 14px 40px var(--shadow);
  transform: translateY(-2px);
}

.post-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.post-card-top span {
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--quiet);
  background: var(--soft);
  font-size: 10px;
  font-weight: 600;
}

.post-card-top time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 570;
  white-space: nowrap;
}

.post-card h2,
.post-card h3 {
  margin: 30px 0 0;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 590;
  line-height: 1.12;
  letter-spacing: -0.046em;
  text-wrap: balance;
}

.post-card:hover a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.post-card p {
  max-width: 520px;
  margin: 13px 0 0;
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.6;
}

.post-card-meta {
  margin-top: auto;
  padding-top: 24px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 570;
}

/* ---------------------------------------------------------------------------
   Responsive, print, reduced motion
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .post-hero,
  .blog-index {
    padding-top: 116px;
  }

  .post-hero h1 {
    font-size: clamp(30px, 8.5vw, 40px);
  }

  .answer-block {
    padding: 21px 20px;
  }

  .post-body pre code {
    font-size: 12.5px;
  }

  .post-cta {
    padding: 26px 22px;
    border-radius: 22px;
    align-items: flex-start;
    flex-direction: column;
  }

  .post-cta .button,
  .post-cta .contact-picker,
  .post-cta .contact-trigger {
    width: 100%;
  }

  .post-grid,
  .post-related-grid {
    grid-template-columns: 1fr;
  }

  .post-related-card {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .post-body pre {
    padding-inline: 16px;
  }

  .post-card-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

@media print {
  .post-cta,
  .post-related,
  .post-toc,
  .footer,
  .post-faq summary::after {
    display: none !important;
  }

  .post-hero,
  .blog-index {
    padding-top: 0;
  }

  .post-body > *,
  .post-body > pre,
  .post-body > .table-scroll {
    width: 100%;
  }

  /* A printed copy has no disclosure to open, so the answers have to be on the page. */
  .post-faq details::details-content {
    content-visibility: visible;
  }

  .post-body a::after {
    color: var(--muted);
    font-size: 0.82em;
    word-break: break-all;
    content: " (" attr(href) ")";
  }
}

/* The site-wide block already collapses transition durations; these are the movements that
   would still land as a jump cut. */
@media (prefers-reduced-motion: reduce) {
  .post-card:hover {
    transform: none;
  }
}