/*
  Blog listing + single-post styles. Loaded only on /blog routes.
  Namespaced under .xrt-blog- so nothing here can leak into, or be affected
  by, questionnaire-v6.html, Leaflet, or the header/footer (layout.css).

  The listing grid (card badges, pager, TOC hover) still reuses the site's
  --xrt-* tokens (Manrope/DM Sans, teal/lime) from layout.css, matching the
  header/footer around it. The single-post article itself (title, byline,
  TOC, body copy and every rich content block below) uses its own type and
  color system instead, the --art-* tokens defined here, so it reads as one
  coherent editorial page: Fraunces for headings, IBM Plex Sans for body
  copy, IBM Plex Mono for labels/data, and a sage-green/earth palette.
*/

/* This post's article template (title/byline/TOC/content and every rich
   content block below) commits to a single dark reading theme, matching
   the standalone artifact's dark-mode palette exactly. It's a deliberate
   choice for this template, not a light/dark toggle, so the values are
   the artifact's dark tokens directly: --art-surface reads as slightly
   lighter than --art-bg (the standard dark-UI "elevation" cue), and every
   accent got the brighter dark-mode variant so it still reads on a dark
   ground. The rest of the site (header/footer/nav, the /blog listing)
   is untouched and keeps its own light --xrt-* tokens. */
:root {
  --art-bg: #0f1610;
  --art-surface: #161f16;
  --art-surface-alt: #1c271c;
  --art-ink: #e7eee1;
  --art-muted: #a6b39b;
  --art-muted-2: #8a9880;
  --art-green: #71ce93;
  --art-green-deep: #4fae72;
  --art-blue: #84b7e0;
  --art-amber: #e3a94a;
  --art-border: #2a3427;
  --art-border-light: #26301f;
  --art-stripe: #1a241a;
  --art-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --art-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --art-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

.xrt-blog-page {
  font-family: var(--xrt-font-b);
  color: var(--xrt-ink);
}

.xrt-blog-page,
.xrt-blog-page * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------- */
/* Shared: page heading                                                    */
/* ---------------------------------------------------------------------- */

.xrt-blog-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 8px;
}

.xrt-blog-head__eyebrow {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xrt-teal);
  margin: 0 0 10px;
}

.xrt-blog-head__title {
  font-family: var(--xrt-font-h);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--xrt-ink);
  margin: 0 0 12px;
}

.xrt-blog-head__sub {
  font-size: 15px;
  color: #5b6b63;
  max-width: 620px;
  margin: 0;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* Card grid (listing page + "recent posts" on single-post page)          */
/* ---------------------------------------------------------------------- */

.xrt-blog-grid-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 16px;
}

.xrt-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.xrt-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--xrt-border);
  border-radius: var(--xrt-r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--xrt-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .xrt-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--xrt-shadow-md);
  }
}

.xrt-blog-card:focus-visible {
  outline: 2px solid var(--xrt-teal);
  outline-offset: 2px;
}

.xrt-blog-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--xrt-cream);
  overflow: hidden;
  flex-shrink: 0;
}

.xrt-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xrt-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
  gap: 10px;
}

.xrt-blog-card__badge {
  align-self: flex-start;
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xrt-lime-ink);
  background: var(--xrt-lime);
  border-radius: 999px;
  padding: 4px 10px;
}

.xrt-blog-card__title {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--xrt-ink);
  margin: 0;
  /* Clamp to 2 lines so titles of varying length don't unbalance card height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xrt-blog-card__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: #5b6b63;
  margin: 0;
  flex: 1 1 auto;
  /* Truncate to 3 lines with an ellipsis, regardless of source length. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xrt-blog-card__date {
  font-size: 12.5px;
  color: #8b968f;
  margin: 4px 0 0;
}

/* Compact variant used for the "Recent posts" row on the single-post page. */
.xrt-blog-card--compact .xrt-blog-card__title {
  font-size: 15.5px;
}

.xrt-blog-card--compact .xrt-blog-card__excerpt {
  display: none;
}

.xrt-blog-grid--empty {
  color: #6b7873;
  font-size: 15px;
  grid-column: 1 / -1;
  padding: 24px 0;
}

/* ---------------------------------------------------------------------- */
/* Single post page                                                        */
/* ---------------------------------------------------------------------- */

/* Full-bleed dark reading pane: the box-shadow spread + clip-path pair
   paints --art-bg edge-to-edge behind this centered, max-width column
   without needing an extra full-width wrapper element. Ends where this
   element ends, so the header above and the "recent posts" grid below
   stay on the site's normal light background. */
.xrt-blog-post {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  font-family: var(--art-font-body);
  background: var(--art-bg);
  box-shadow: 0 0 0 100vmax var(--art-bg);
  clip-path: inset(0 -100vmax);
  position: relative;
  z-index: 0;
}

.xrt-blog-breadcrumb {
  font-family: var(--art-font-mono);
  font-size: 12.5px;
  color: var(--art-muted-2);
  margin: 0 0 20px;
}

.xrt-blog-breadcrumb a {
  color: var(--art-muted-2);
  text-decoration: none;
}

.xrt-blog-breadcrumb a:hover {
  color: var(--art-green-deep);
}

.xrt-blog-breadcrumb__current {
  color: var(--art-muted);
}

.xrt-blog-post__hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--xrt-r-lg);
  overflow: hidden;
  background: var(--art-surface-alt);
  margin-bottom: 24px;
}

.xrt-blog-post__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xrt-blog-post__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--art-green-deep);
  background: var(--art-surface-alt);
  border: 1px solid var(--art-border);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}

.xrt-blog-post__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--art-amber);
}

.xrt-blog-post__title {
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--art-ink);
  margin: 0 0 16px;
  max-width: 900px;
}

.xrt-blog-post__byline {
  font-family: var(--art-font-mono);
  font-size: 13px;
  color: var(--art-muted-2);
  margin: 0 0 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.xrt-blog-post__byline-sep {
  color: var(--art-border);
}

/* Content layout: comfortable reading column + optional TOC sidebar. */
.xrt-blog-post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.xrt-blog-post__layout--with-toc {
  grid-template-columns: 240px minmax(0, 760px);
}

.xrt-blog-toc {
  order: -1;
}

.xrt-blog-post__layout--with-toc .xrt-blog-toc {
  position: sticky;
  top: 88px;
  order: 0;
}

.xrt-blog-toc__box {
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  background: var(--art-surface);
  box-shadow: var(--xrt-shadow-sm);
  padding: 18px 18px;
}

.xrt-blog-toc__title {
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--art-green-deep);
  margin: 0 0 10px;
}

.xrt-blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xrt-blog-toc__link {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--art-ink);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  border-radius: 6px;
  padding: 2px 8px;
}

.xrt-blog-toc__link:hover {
  background: var(--art-surface-alt);
  color: var(--art-green-deep);
}

.xrt-blog-toc__link--h3 {
  padding-left: 20px;
  font-size: 13px;
  color: var(--art-muted);
}

/* Collapsible <details> version of the TOC, shown above the content on
   touch/mobile widths instead of the sticky sidebar. */
.xrt-blog-toc--mobile {
  display: none;
}

.xrt-blog-toc--mobile.xrt-blog-toc {
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  background: var(--art-surface);
  padding: 14px 18px;
}

.xrt-blog-toc__summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-green-deep);
}

.xrt-blog-toc--mobile .xrt-blog-toc__list {
  margin-top: 8px;
}

.xrt-blog-post__content {
  max-width: 760px;
  font-family: var(--art-font-body);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--art-ink);
}

.xrt-blog-post__content h2 {
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--art-ink);
  margin: 44px 0 14px;
  scroll-margin-top: 88px;
}

.xrt-blog-post__content h3 {
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--art-ink);
  margin: 28px 0 12px;
  scroll-margin-top: 88px;
}

.xrt-blog-post__content h4 {
  font-family: var(--art-font-display);
  font-weight: 600;
  color: var(--art-ink);
}

.xrt-blog-post__content p {
  margin: 0 0 18px;
}

.xrt-blog-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--xrt-r-md);
  display: block;
  margin: 20px 0;
}

.xrt-blog-post__content ul,
.xrt-blog-post__content ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.xrt-blog-post__content li {
  margin-bottom: 6px;
}

/* "Key takeaways" callout — authors opt in per-post by writing
   <div class="xrt-key-takeaways">...</div> directly in the post HTML. */
.xrt-key-takeaways {
  background: var(--art-surface-alt);
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  padding: 18px 22px;
  margin: 28px 0;
  font-family: var(--art-font-body);
}

.xrt-key-takeaways__title {
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-green-deep);
  margin: 0 0 10px;
}

.xrt-key-takeaways ul {
  margin: 0;
  padding-left: 20px;
}

.xrt-key-takeaways li {
  margin-bottom: 6px;
}

.xrt-key-takeaways p:last-child {
  margin-bottom: 0;
}

/* CTA box — authors opt in with <div class="xrt-blog-cta">...</div>.
   Buttons visually match .xrt-nav__cta / v6's .cta (not new button styles),
   redeclared here (not reused directly) so header-only responsive rules
   in layout.css can't hide/alter them inside blog content. */
.xrt-blog-cta {
  background: linear-gradient(135deg, var(--art-green-deep), var(--art-green));
  border-radius: var(--xrt-r-lg);
  padding: 32px 28px;
  margin: 40px 0 8px;
  color: #f4f8f1;
  font-family: var(--art-font-body);
}

.xrt-blog-cta__title {
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 8px;
  color: #f4f8f1;
}

.xrt-blog-cta__text {
  font-size: 14.5px;
  color: #dcebdf;
  margin: 0 0 20px;
  line-height: 1.6;
}

.xrt-blog-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.xrt-blog-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: var(--art-font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.xrt-blog-cta__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.xrt-blog-cta__btn--primary {
  background: #f4f8f1;
  color: var(--art-green-deep);
}

.xrt-blog-cta__btn--secondary {
  background: transparent;
  color: #f4f8f1;
  border: 1px solid rgba(244, 248, 241, 0.4);
}

/* ---------------------------------------------------------------------- */
/* Recent posts (bottom of single-post page)                              */
/* ---------------------------------------------------------------------- */

.xrt-blog-recent {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 40px 24px 64px;
  border-top: 1px solid var(--xrt-border);
}

.xrt-blog-recent__title {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 20px;
  color: var(--xrt-ink);
  margin: 0 0 20px;
}

.xrt-blog-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* ---------------------------------------------------------------------- */
/* Breakpoints                                                             */
/* Mobile: <480px  Large mobile: 480-767px  Tablet: 768-1199px  Desktop: 1200px+ */
/* ---------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .xrt-blog-grid,
  .xrt-blog-recent__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xrt-blog-post__layout--with-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sidebar TOC doesn't fit below desktop width — swap to the collapsible
     version above the content instead, per spec (never a floating sidebar
     on tablet/mobile). */
  .xrt-blog-post__layout--with-toc .xrt-blog-toc {
    display: none;
  }

  .xrt-blog-toc--mobile {
    display: block;
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .xrt-blog-grid,
  .xrt-blog-recent__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xrt-blog-head,
  .xrt-blog-grid-wrap,
  .xrt-blog-post,
  .xrt-blog-recent {
    padding-left: 16px;
    padding-right: 16px;
  }

  .xrt-blog-cta {
    padding: 22px 18px;
  }

  .xrt-blog-cta__actions {
    flex-direction: column;
  }

  .xrt-blog-cta__btn {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .xrt-blog-head {
    padding-top: 32px;
  }

  .xrt-blog-post__hero {
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------------------------- */
/* Rich content blocks, opt-in per post via the classes below, same tokens*/
/* as the rest of the page (no new colors/fonts introduced).              */
/* ---------------------------------------------------------------------- */

/* "Quick answer" callout, a snippet/AI-overview-style direct answer meant
   to sit right under the intro paragraph. */
.xrt-quick-answer {
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  padding: 18px 22px;
  margin: 28px 0;
  box-shadow: var(--xrt-shadow-sm);
  font-family: var(--art-font-body);
}

.xrt-quick-answer__label {
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--art-blue);
  margin: 0 0 8px;
}

.xrt-quick-answer p:last-child {
  margin-bottom: 0;
}

/* Pillar intro paragraph, sits directly under the pillar's H2 headline.
   No separate "Ways N to M" label above it: that line duplicated what the
   heading and the TOC already say, and its two-span markup had no real
   space character between the spans, so copying the page or reading its
   raw text (screen readers, search engines, TOC extraction) ran them
   together as one word. Removed rather than patched. */
.xrt-pillar-intro {
  color: var(--art-muted);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 66ch;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* Individual "way" card: plain uniform border and shadow, matching the
   artifact's card style exactly (no colored accent rail). The number is
   real text in the heading (a genuine space character sits between the
   closing </span> and the heading words in the HTML source), not CSS-
   generated content, so it stays in the raw text: readable by screen
   readers, included in the auto-built table of contents, present in a
   copy/paste, and indexable by search engines and AI answer engines. */
.xrt-way {
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-lg);
  box-shadow: var(--xrt-shadow-sm);
  padding: 24px 28px;
  margin: 24px 0;
}

.xrt-way h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* The number is real text in the heading (a genuine space character sits
   between the closing </span> and the heading words in the HTML source),
   not CSS-generated content, so it stays in the raw text: readable by
   screen readers, included in the auto-built table of contents, present
   in a copy/paste, and indexable by search engines and AI answer engines,
   none of which reliably read ::before/::after generated content. */
.xrt-way__num {
  display: inline-block;
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--art-green-deep);
  margin-right: 4px;
}

.xrt-way p {
  margin-bottom: 14px !important;
}

.xrt-way__spec {
  font-family: var(--art-font-mono);
  font-size: 12.5px;
  color: var(--art-muted);
  background: var(--art-surface-alt);
  border: 1px solid var(--art-border-light);
  border-radius: var(--xrt-r-sm);
  padding: 10px 14px;
  margin-top: 16px !important;
  line-height: 1.7;
}

.xrt-way__spec b {
  color: var(--art-ink);
}

/* Figure captions under inline content images. */
.xrt-blog-post__content figure {
  margin: 24px 0;
}

.xrt-blog-post__content figure img {
  margin: 0 0 10px;
}

.xrt-blog-post__content figcaption {
  font-family: var(--art-font-mono);
  font-size: 12.5px;
  color: var(--art-muted-2);
  line-height: 1.55;
  padding: 0 2px;
}

/* Data tables (satellite specs, index library, comparison). Column widths
   come from <colgroup> on the wider tables so text wraps predictably
   instead of every column fighting for space. */
.xrt-table-wrap {
  overflow: auto;
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  margin: 24px 0;
  background: var(--art-surface);
}

.xrt-blog-post__content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 600px;
  font-size: 14px;
  font-family: var(--art-font-body);
}

.xrt-blog-post__content caption {
  caption-side: top;
  text-align: left;
  font-family: var(--art-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-muted-2);
  padding: 14px 18px 0;
}

.xrt-blog-post__content th,
.xrt-blog-post__content td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--art-border-light);
  vertical-align: middle;
  line-height: 1.5;
}

.xrt-blog-post__content thead th {
  font-family: var(--art-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-green-deep);
  background: var(--art-surface-alt);
  border-bottom: 2px solid var(--art-border);
}

.xrt-blog-post__content thead th:first-child {
  border-top-left-radius: var(--xrt-r-md);
}

.xrt-blog-post__content thead th:last-child {
  border-top-right-radius: var(--xrt-r-md);
}

.xrt-blog-post__content tbody tr:last-child td,
.xrt-blog-post__content tbody tr:last-child th {
  border-bottom: none;
}

.xrt-blog-post__content tbody tr:nth-child(even) {
  background: var(--art-stripe);
}

.xrt-blog-post__content tbody th[scope='row'] {
  font-family: var(--art-font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--art-ink);
  background: var(--art-surface-alt);
  white-space: nowrap;
}

/* Vegetation index card grid. */
.xrt-idx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.xrt-idx-card {
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  overflow: hidden;
  box-shadow: var(--xrt-shadow-sm);
}

.xrt-idx-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
}

.xrt-idx-card__body {
  padding: 14px 16px 16px;
}

.xrt-idx-card__body h4 {
  font-size: 15px;
  margin: 0 0 4px;
}

.xrt-idx-card__formula {
  font-family: var(--art-font-mono);
  font-size: 12px;
  color: var(--art-blue);
}

.xrt-idx-card__body p {
  font-size: 13.5px;
  color: var(--art-muted);
  margin: 6px 0 0 !important;
}

/* Industry-benchmark panel: a bordered card of its own, distinct from the
   case-study cards above it, so a reader doesn't scan two back-to-back
   stat grids and read them as the same data repeated. */
.xrt-benchmark-panel {
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-lg);
  padding: 22px 26px 26px;
  margin: 24px 0;
  box-shadow: var(--xrt-shadow-sm);
}

.xrt-benchmark-panel__label {
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--art-green-deep);
  margin: 0 0 8px !important;
}

.xrt-benchmark-panel > p:nth-of-type(2) {
  color: var(--art-muted);
  margin-bottom: 18px !important;
}

.xrt-benchmark-panel .xrt-stat-grid {
  margin: 0;
}

/* Stat / benchmark grid. */
.xrt-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.xrt-stat {
  background: var(--art-surface-alt);
  border-radius: var(--xrt-r-md);
  padding: 18px 20px;
}

.xrt-stat__num {
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 21px;
  color: var(--art-blue);
  display: block;
  line-height: 1.2;
}

.xrt-stat p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--art-muted);
  margin: 6px 0 0 !important;
}

/* Case study card: image on the left, text on the right, matching the
   reference layout. Stacks on narrow widths (mobile, and the tablet
   breakpoint where the sidebar TOC also drops out). */
.xrt-case {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-lg);
  overflow: hidden;
  margin: 24px 0;
  box-shadow: var(--xrt-shadow-sm);
}

/* Text-only variant for a case study with no matching screenshot on hand:
   a mismatched or off-topic image is worse than none, so this drops the
   image column rather than force one in. */
.xrt-case--noimg {
  grid-template-columns: minmax(0, 1fr);
}

.xrt-case--noimg .xrt-case__body {
  padding: 26px 28px;
}

.xrt-case img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
}

.xrt-case__body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.xrt-case__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--art-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--art-green-deep);
  background: var(--art-surface-alt);
  border-radius: 999px;
  padding: 4px 10px;
}

.xrt-case__body h3 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.xrt-case__body p {
  margin-bottom: 12px !important;
}

.xrt-case__body ul {
  font-size: 14px;
  margin-bottom: 4px !important;
}

.xrt-case__body .xrt-stat-grid {
  margin: 16px 0 0;
}

/* Limitation / workaround list: plain uniform border, matching the
   artifact's card style. */
.xrt-limit {
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  padding: 18px 22px;
  margin: 16px 0;
  background: var(--art-surface);
}

.xrt-limit__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--art-ink);
}

.xrt-limit__tag {
  font-family: var(--art-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-muted-2);
}

.xrt-limit p {
  font-size: 14.5px !important;
}

.xrt-limit__fix {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--art-border);
  font-size: 14px;
}

.xrt-limit__fix-label {
  font-family: var(--art-font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-green-deep);
  margin-right: 6px;
}

/* FAQ accordion. */
.xrt-faq {
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--xrt-r-md);
  padding: 2px 22px;
  margin: 12px 0;
}

.xrt-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-family: var(--art-font-body);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--art-ink);
}

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

.xrt-faq summary::after {
  content: '+';
  color: var(--art-green-deep);
  font-size: 20px;
  flex: none;
}

.xrt-faq[open] summary::after {
  content: '\2212';
}

.xrt-faq p {
  padding-bottom: 14px;
  margin: 0 !important;
  color: var(--art-muted);
  font-size: 14.5px !important;
}

.xrt-sources {
  font-size: 14px;
  color: var(--art-muted);
}

.xrt-sources li {
  margin-bottom: 6px;
}

@media (max-width: 760px) {
  .xrt-case {
    grid-template-columns: minmax(0, 1fr);
  }

  .xrt-case img {
    min-height: 180px;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {
  .xrt-idx-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xrt-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xrt-way {
    padding: 20px 20px;
  }
}