/* ==========================================================================
   Reading pages: content pages, blog posts, product sheets (entries/show,
   entries/product, fire entries/case_study). The long-form layer on top of
   the foundation (01-tokens, 02-components, pages/editorial, site, theme).

   Named zz-* so it loads after every other pages/*.css file; selectors are
   scoped to .site + the article classes so they win without !important.
   Markup comes from EntriesHelper#entry_body (media-cards, img-run, ids on h2).
   ========================================================================== */

.site {
  --read-size: 1.125rem;            /* 18px body */
  --read-lh: 1.65;
  --read-measure: 40rem;            /* ≈ 66 characters of Switzer at 18px */
  --read-ink: #2b2b2b;              /* body copy: softer than headings, still 13:1 */
  --read-panel: #f5f5f3;            /* soft surface for cut-outs, stats, asides */
  --read-radius: 10px;
  --read-rule: #e5e5e2;             /* hairlines (the parent theme sets --rule transparent) */
}

/* ---------- 1. Head: breadcrumb, kicker, title, meta ---------------------- */
.site .entry .article-head { row-gap: var(--s-4); padding-block: clamp(28px, 3.6vw, 56px) clamp(28px, 3vw, 44px); }
.site .entry .article-head__kicker { grid-column: 1 / span 2; padding-top: 0.7em; font-size: var(--t-s); }
.site .entry .article-head__title {
  grid-column: 3 / span 8; max-width: 22em;
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3.125rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
.site .entry .article-meta {
  grid-column: 3 / span 8; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--grey-text);
}
.site .entry .article-meta > span + span::before { content: "·"; margin-inline: 10px; color: var(--grey); }
.site .entry .article-meta a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--read-rule); text-underline-offset: 3px; }
.site .entry .article-meta a:hover { text-decoration-color: var(--accent); }

/* ---------- 2. Lead image: aligned to the reading column + aside --------- */
.site .entry .article-figure { margin-block-end: clamp(32px, 4vw, 56px); }
.site .entry .entry-hero { grid-column: 3 / -1; margin: 0; }
.site .entry :is(.entry-hero--column, .entry-hero--panel) { grid-column: 3 / span 7; }
.site .entry .entry-hero img { display: block; border-radius: var(--read-radius); }
.site .entry :is(.entry-hero--wide, .entry-hero--column) img { width: 100%; height: auto; object-fit: cover; background: var(--read-panel); }
.site .entry .entry-hero--wide img { max-height: 640px; }
.site .entry .entry-hero--column img { max-height: 32rem; }
.site .entry .entry-hero--panel {
  display: grid; place-items: center; padding: clamp(20px, 3.5vw, 48px);
  border-radius: var(--read-radius); background: var(--read-panel);
}
.site .entry .entry-hero--panel img { width: auto; max-width: 100%; height: auto; max-height: 26rem; object-fit: contain; border-radius: 6px; }
.site .entry .entry-hero--product img { mix-blend-mode: multiply; border-radius: 0; background: none; }

/* ---------- 3. Body grid: byline 1–2 · reading column 3–9 · aside 10–12 --- */
.site .entry .article-body { row-gap: var(--s-6); column-gap: var(--col-gap); align-items: start; }
.site .entry .article-body--plain { padding-block-start: var(--s-6); }
.site .entry .article-byline { grid-column: 1 / span 2; font-size: 0.8125rem; line-height: 1.45; }
.site .entry .article-byline > div { padding-block: 10px 11px; }
.site .entry .article-byline dt { margin-block-end: 2px; }
.site .entry .article-byline a { overflow-wrap: anywhere; }

.site .article-body > .article-prose { grid-column: 3 / span 7; }
.site .article-prose {
  max-width: none; min-width: 0;
  font-size: var(--read-size); line-height: var(--read-lh); letter-spacing: 0; color: var(--read-ink);
  overflow-wrap: break-word;
}
/* Text keeps the measure; grids, tables, embeds and figures use the full column. */
.site .article-prose > :not(.media-cards, .img-run, .img-cards, .svc-grid, .product-grid, .table-scroll, .embed, figure, .stats, .faq-list, .link-list) { max-width: min(100%, var(--read-measure)); }

/* ---------- 4. Rhythm and headings ---------------------------------------- */
.site .article-prose > * + * { margin-block-start: 1.15em; }
.site .article-prose > :first-child { margin-block-start: 0; }
.site .article-prose :is(h2, h3, h4, h5, h6) { color: var(--ink); text-wrap: balance; scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.site .article-prose h2 { margin-block-start: 2.1em; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; }
.site .article-prose h3 { margin-block-start: 1.9em; font-size: 1.3125rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.006em; }
.site .article-prose h4 { margin-block-start: 1.7em; font-size: 1.125rem; line-height: 1.4; font-weight: 500; letter-spacing: 0; }
.site .article-prose :is(h5, h6) { margin-block-start: 1.6em; font-size: 0.9375rem; line-height: 1.4; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.site .article-prose h2 + * { margin-block-start: 0.65em; }
.site .article-prose :is(h3, h4, h5, h6) + * { margin-block-start: 0.5em; }
.site .article-prose :is(h2, h3) + :is(h3, h4) { margin-block-start: 0.9em; }
.site .article-prose strong, .site .article-prose b { font-weight: 500; color: var(--ink); }
.site .article-prose :is(h2, h3, h4) strong { font-weight: inherit; }

/* Lead: the opening paragraph (or the page-builder's opening h4) reads a size up. */
.site .article-prose > p:first-child { font-size: inherit; line-height: inherit; letter-spacing: 0; }
.site .article-prose > .lead:first-child { font-size: 1.3125rem; line-height: 1.5; font-weight: 400; letter-spacing: -0.003em; color: var(--ink); }
.site .article-prose > p.eyebrow { margin-block: 2.4em 0; font-size: var(--t-s); font-weight: 500; letter-spacing: 0.02em; color: var(--accent-ink); }

/* ---------- 5. Links, lists, quotes, rules, code --------------------------- */
.site .article-prose a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: 3px; transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease); }
.site .article-prose a:not([class]):hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.site .article-prose :is(ul, ol):not([class]) { padding-inline-start: 1.3em; }
.site .article-prose li { padding-inline-start: 0.2em; }
.site .article-prose li + li { margin-block-start: 0.5em; }
.site .article-prose li > :is(ul, ol) { margin-block-start: 0.5em; }
.site .article-prose li > p { margin: 0; }
.site .article-prose ul:not([class]) > li::marker { color: var(--accent); font-size: 0.9em; }
.site .article-prose ol:not([class]) > li::marker { color: var(--grey-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.site .article-prose blockquote {
  margin-block: 2em; padding: 2px 0 2px 1.25em; border-inline-start: 3px solid var(--accent);
  font-size: 1.25rem; line-height: 1.5; color: var(--ink);
}
.site .article-prose blockquote > * + * { margin-block-start: 0.6em; }
.site .article-prose hr { height: 0; margin-block: 2.75em 0; border: 0; border-top: 1px solid var(--read-rule); }
.site .article-prose hr + * { margin-block-start: 2.25em; }
.site .article-prose hr + :is(h2, h3) { margin-block-start: 1.5em; }
.site .article-prose :is(code, pre) { font-size: 0.875em; white-space: pre-wrap; overflow-wrap: anywhere; }
.site .article-prose pre { padding: var(--s-4); border-radius: var(--read-radius); background: var(--read-panel); }

/* ---------- 6. Figures, single images, embeds ------------------------------ */
.site .article-prose figure { margin-inline: 0; }
.site .article-prose > figure, .site .article-prose > p > img:only-child { margin-block: 2em; }
.site .article-prose img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.site .article-prose > figure img, .site .article-prose > img, .site .article-prose > p > img, .site .article-prose > p > a > img { width: auto; max-height: 34rem; object-fit: contain; }
.site .article-prose figcaption { margin-block-start: 0.6em; font-size: var(--t-s); line-height: 1.45; color: var(--grey-text); }
.site .article-prose .embed { margin-block: 2em; }

/* ---------- 7. Tables: hairline, lightly striped, scroll on small screens -- */
.site .article-prose .table-scroll { margin-block: 2em; overflow-x: auto; border: 1px solid var(--read-rule); border-radius: var(--read-radius); -webkit-overflow-scrolling: touch; }
.site .article-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.site .article-prose .table-scroll table:has(tr > :nth-child(3)) { min-width: 34rem; }
.site .article-prose :is(th, td) { padding: 12px 16px; border: 0; border-top: 1px solid var(--read-rule); text-align: start; vertical-align: top; background: none; }
.site .article-prose tr:first-child > :is(th, td) { border-top: 0; }
.site .article-prose thead th, .site .article-prose tr:first-child > th { background: var(--read-panel); font-weight: 500; color: var(--ink); }
.site .article-prose tbody tr:nth-child(even) > td { background: #fafaf9; }
.site .article-prose td > * + * { margin-block-start: 0.5em; }

/* ---------- 8. Card grid: picture + linked title/caption blocks ----------- */
.site .article-prose .media-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-6) var(--s-4); margin-block: 1.5em 2.25em; padding: 0;
}
.site .article-prose .media-card { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
.site .article-prose .media-card > * { margin: 0; }
.site .article-prose .media-card :is(figure, a):has(img) { display: block; margin: 0; overflow: hidden; border-radius: 8px; }
.site .article-prose .media-card img {
  width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; border-radius: 8px;
  transition: transform 400ms var(--ease);
}
.site .article-prose .media-cards--photo .media-card img { object-fit: cover; background: var(--read-panel); }
.site .article-prose .media-cards--contain .media-card img { object-fit: contain; padding: 10%; background: var(--read-panel); mix-blend-mode: multiply; }
.site .article-prose .media-card :is(figcaption, h3, h4, h5, h6) {
  margin: 0; font-size: 0.9375rem; line-height: 1.4; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: pretty;
}
.site .article-prose .media-card figure > figcaption { margin-block-start: 12px; }
.site .article-prose .media-card figcaption strong { font-weight: inherit; }
.site .article-prose .media-card a { color: inherit; text-decoration: none; }
.site .article-prose .media-card :is(figcaption, h3, h4, h5, h6) a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.site .article-prose .media-card:has(a):hover :is(figcaption, h3, h4, h5, h6) { color: var(--accent-ink); }
.site .article-prose .media-card:has(a):hover img { transform: scale(1.025); }
.site .article-prose .media-card :is(figcaption, h3, h4, h5, h6) a:focus-visible { outline: none; }
.site .article-prose .media-card:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }

/* ---------- 9. Picture runs: logo walls and photo galleries ---------------- */
.site .article-prose .img-run { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s-3); margin-block: 1.25em 2em; }
.site .article-prose .img-run > * { margin: 0; min-width: 0; }
.site .article-prose .img-run :is(figure, article, a, p) { display: block; margin: 0; height: 100%; }
.site .article-prose .img-run img { width: 100%; height: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: contain; padding: 6%; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--read-rule); }
.site .article-prose .img-run--photos img { object-fit: cover; padding: 0; background: var(--read-panel); box-shadow: none; }
.site .article-prose .img-run--logos { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 10px; }
.site .article-prose .img-run--logos img { aspect-ratio: 3 / 2; object-fit: contain; padding: 14% 16%; background: #fff; box-shadow: inset 0 0 0 1px var(--read-rule); }
.site .article-prose .img-run figcaption { display: none; }

/* ---------- 10. FAQ accordions (entry FAQs, page-builder details, fire .faq-item) */
.site .article-prose .faq-list { margin-block-start: 3.25em; }
.site .article-prose .faq-list > h2 { margin-block-end: 0.6em; }
.site .article-prose .faq { border-top: 0; }
.site .article-prose details,
.site .article-prose details[open],
.site .article-prose details.faq-item,
.site .article-prose details.faq-item[open] {
  margin: 0; padding: 0; border: 0; border-top: 1px solid var(--read-rule); border-radius: 0; background: none;
}
.site .article-prose details + details { margin-block-start: 0; }
.site .article-prose details:last-child,
.site .article-prose details:has(+ :not(details)),
.site .article-prose details.faq-item:last-child,
.site .article-prose details.faq-item:has(+ :not(details)) { border-bottom: 1px solid var(--read-rule); }
.site .article-prose details > summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4);
  min-height: 0; margin: 0; padding-block: 18px; list-style: none; cursor: pointer;
  font-size: 1.0625rem; line-height: 1.45; font-weight: 500; color: var(--ink);
}
.site .article-prose details > summary::-webkit-details-marker { display: none; }
.site .article-prose details > summary::after {
  content: "+"; flex: none; width: 1em; margin-top: -0.05em; text-align: center;
  font-size: 1.375rem; line-height: 1; font-weight: 400; color: var(--accent); transition: transform var(--dur) var(--ease);
}
.site .article-prose details[open] > summary::after { transform: rotate(45deg); }
.site .article-prose details > summary:hover { color: var(--accent-ink); }
.site .article-prose details > :not(summary) { max-width: var(--read-measure); margin: 0; padding: 0 2.25em 20px 0; font-size: 1rem; line-height: 1.6; color: var(--read-ink); }
.site .article-prose details > :not(summary) > * + * { margin-block-start: 0.7em; }

/* Stats rows and link lists produced from page-builder markup */
.site .article-prose ul.stats li { border-radius: var(--read-radius); background: var(--read-panel); }
.site .article-prose .prose-cta-row { margin-block: 2em; }

/* ---------- 11. Aside: sticky, compact, useful ----------------------------- */
.site .entry .article-aside {
  grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + var(--s-5));
  display: grid; gap: var(--s-6); align-content: start;
  max-height: calc(100vh - var(--header-h) - var(--s-7)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.site .entry .article-aside__title {
  margin: 0 0 10px; font-size: 0.75rem; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-text);
}
.site .entry .article-aside__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--read-rule); }
.site .entry .article-aside__list a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  min-height: 44px; padding-block: 10px; border-bottom: 1px solid var(--read-rule);
  font-size: 0.9375rem; line-height: 1.35; font-weight: 500; letter-spacing: 0; color: var(--ink);
}
.site .entry .article-aside__list a:hover { color: var(--accent-ink); }
.site .entry .article-aside__list .icon { flex: none; width: 14px; height: 14px; color: var(--grey); transition: transform 200ms var(--ease), color 200ms var(--ease); }
.site .entry .article-aside__list a:hover .icon { color: var(--accent); transform: translateX(3px); }
.site .entry .article-aside__more { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 12px; font-size: var(--t-s); font-weight: 500; color: var(--grey-text); }
.site .entry .article-aside__more:hover { color: var(--ink); }
.site .entry .article-aside__more .icon { width: 12px; height: 12px; }

.site .entry .article-toc__list { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--read-rule); }
.site .entry .article-toc__list a {
  display: block; margin-inline-start: -1px; padding: 6px 0 6px 14px; border-inline-start: 2px solid transparent;
  font-size: 0.875rem; line-height: 1.4; color: var(--grey-text); transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.site .entry .article-toc__list a:hover { color: var(--ink); border-inline-start-color: var(--accent); }

.site .entry .entry-aside__cta {
  display: grid; gap: 10px; margin: 0; padding: var(--s-5); border: 0; border-radius: var(--read-radius); background: var(--read-panel);
}
.site .entry .entry-aside__cta p { margin: 0 0 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.site .entry .entry-aside__cta .btn { width: 100%; min-height: 44px; }
.site .entry .entry-aside__cta .btn:not(.btn--accent) { background: #fff; }

/* ---------- 12. Below the article: child pages and related reading ------- */
.site .entry + .row, .site .entry ~ .row { border-top: 1px solid var(--read-rule); }

/* ---------- 13. Product sheet (/product/<slug>/) -------------------------- */
.site .product-sheet { padding-block: clamp(24px, 3vw, 48px) var(--row-end); }
.site .product-sheet__media { border-radius: var(--read-radius); background: var(--read-panel); }
.site .product-sheet__media img { mix-blend-mode: multiply; }
.site .product-sheet__title { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.625rem); line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance; }
.site .product-sheet__prose { font-size: 1.0625rem; line-height: 1.6; }
.site .product-sheet__prose > p:first-child:not(:has(img)) { font-size: 1.1875rem; }
.site .product-sheet .btn-row { flex-wrap: wrap; }
.site .product-sheet > * { min-width: 0; }
.site .product-sheet__text { grid-template-columns: minmax(0, 1fr); }
.site .product-sheet .btn-row .btn { white-space: normal; text-align: center; }
@media (max-width: 63.99rem) { .site .product-sheet__media, .site .product-sheet__text { grid-column: 1 / -1; } }

/* ---------- 14. Tablet and phone ------------------------------------------ */
@media (max-width: 63.99rem) {
  .site .entry .article-head__title, .site .entry .article-meta { grid-column: 1 / -1; }
  .site .entry .article-head__kicker { grid-column: 1 / -1; padding-top: 0; }
  .site .entry .entry-hero { grid-column: 1 / -1; }
  .site .entry .article-byline {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); padding-block: 2px;
    border-top: 1px solid var(--read-rule); border-bottom: 1px solid var(--read-rule);
  }
  .site .entry .article-byline > div { padding-block: 8px; border: 0; }
  .site .article-body > .article-prose { grid-column: 1 / -1; }
  .site .entry .article-aside { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
  .site .entry .article-toc { display: none; }
}
@media (max-width: 47.99rem) {
  .site { --read-size: 1.0625rem; }
  .site .entry .article-head { padding-block: 20px 24px; row-gap: var(--s-3); }
  .site .entry .article-head__title { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); line-height: 1.12; }
  .site .entry .article-meta { gap: 2px 14px; }
  .site .entry .article-meta > span + span::before { content: none; }
  .site .entry .article-figure { margin-block-end: var(--s-6); }
  .site .entry .entry-hero--panel { padding: 20px; }
  .site .entry .entry-hero--panel img { max-height: 18rem; }
  .site .entry .entry-hero--wide img { max-height: 320px; }
  .site .article-prose > .lead:first-child { font-size: 1.1875rem; }
  .site .article-prose h2 { margin-block-start: 1.9em; font-size: 1.4375rem; }
  .site .article-prose h3 { font-size: 1.1875rem; }
  .site .article-prose blockquote { font-size: 1.125rem; }
  .site .article-prose .media-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) 12px; }
  .site .article-prose .media-card :is(figcaption, h3, h4, h5, h6) { font-size: 0.875rem; }
  .site .article-prose .img-run:not(.img-run--logos) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .article-prose .img-run--logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .site .article-prose :is(th, td) { padding: 10px 12px; }
  .site .article-prose details > :not(summary) { padding-inline-end: 0; }
  .site .product-sheet { padding-block-start: var(--s-4); }
}