/* Roots & Fruit site CSS. Built from the kit files. Do not edit. */
/* Roots & Fruit — Knile + Nunito Sans.
   The Studio theme keeps the files in ../fonts/ so the static export
   carries them. Do not point this file at /wp-content/uploads/. Those
   URLs 404, and this public kit does not store the Knile binaries.
   Do not load Google Fonts. */

@font-face {
  font-family: "Knile";
  src: url("https://rootsandfruit.com/wp-content/themes/rf/assets/fonts/knile-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Knile";
  src: url("https://rootsandfruit.com/wp-content/themes/rf/assets/fonts/knile-semibold-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Knile";
  src: url("https://rootsandfruit.com/wp-content/themes/rf/assets/fonts/knile-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Nunito Sans: latin, weight axis only (400–700 on the site; file range is 200–1000). */
@font-face {
  font-family: "Nunito Sans";
  src: url("https://rootsandfruit.com/wp-content/themes/rf/assets/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("https://rootsandfruit.com/wp-content/themes/rf/assets/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("https://rootsandfruit.com/wp-content/themes/rf/assets/fonts/nunito-sans-latin-wght-italic.woff2") format("woff2-variations"),
       url("https://rootsandfruit.com/wp-content/themes/rf/assets/fonts/nunito-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roots & Fruit — design tokens
   Shared CSS custom properties for brand color, type, space, and shape. */

:root {
  /* Paper & ink */
  --rf-cream: #faf6ee;
  --rf-cream-deep: #f3ede2;
  --rf-white: #ffffff;
  --rf-ink: #2c2922;
  --rf-ink-deep: #1a1a1a;
  --rf-ink-muted: #6b6560;
  --rf-ink-soft: #9a948c;
  --rf-brown: #40352a;
  --rf-rule: rgba(44, 41, 34, 0.14);

  /* Brand accents */
  --rf-green: #62744d;
  --rf-green-logo: #505a49; /* designer logo olive, RGB 80 90 73 */
  --rf-green-deep: #4b5e2e;
  --rf-green-mid: #6d7d5d;
  --rf-green-soft: #e4eadc;
  --rf-green-1: #c5d4b8;
  --rf-green-2: #9aaf86;
  --rf-green-3: #7a9268;
  --rf-green-4: #62744d;
  --rf-green-5: #4a5a38;
  --rf-green-6: #2f3a24;

  --rf-orange: #d4844e;
  --rf-orange-soft: #f0d5c0;
  --rf-orange-web: #e28b56; /* alternate warmer orange if a host palette requires it */
  --rf-orange-deep: color-mix(in srgb, var(--rf-orange) 68%, var(--rf-brown)); /* meta / eyebrow accent */

  /* Chart series — high contrast on cream (not adjacent soft greens) */
  --rf-chart-1: var(--rf-green-deep);
  --rf-chart-2: var(--rf-orange);
  --rf-chart-3: var(--rf-blue);
  --rf-chart-4: var(--rf-brown);

  /* Surfaces */
  --rf-panel: #ebe4d8;
  --rf-panel-deep: #dfd6c6;
  --rf-panel-soft: #f3ece2;
  --rf-tan: #c4a882;
  --rf-tan-soft: #f0e8dc;

  /* Product UI */
  --rf-blue: #1a5276;
  --rf-blue-mid: #245f8c;
  --rf-blue-nav: #2a5f8f;
  --rf-blue-soft: #d6e6f2;
  --rf-blue-muted: #b8d0e4; /* quieter blue border / focus companion */

  /* Semantic */
  --rf-success: var(--rf-green);
  --rf-success-bg: var(--rf-green-soft);
  --rf-warning: var(--rf-orange);
  --rf-warning-bg: var(--rf-orange-soft);
  --rf-danger: #ad3a22; /* brick — warmed to sit with terracotta/brown, still clearly redder than warning orange */
  --rf-danger-bg: #f7e4dc;
  --rf-info: var(--rf-blue);
  --rf-info-bg: var(--rf-blue-soft);

  /* Type */
  --rf-font-serif: "Knile", Georgia, "Times New Roman", serif;
  --rf-font-sans: "Nunito Sans", system-ui, sans-serif;

  /* Type scale — sm (16px) is the floor; no xs */
  --rf-text-sm: 1rem;      /* 16 · compact UI, labels, meta */
  --rf-text-md: 1.125rem;  /* 18 · default body / long-form */
  --rf-text-lg: 1.375rem;  /* 22 · lead */
  --rf-text-xl: 1.75rem;   /* 28 · display-sm */
  --rf-text-2xl: 2.25rem;  /* 36 · display-md */
  --rf-text-3xl: 3rem;     /* 48 · display-lg */
  --rf-text-4xl: 3.5rem;   /* 56 · display-xl */

  /* Optical type (not fluid size ranges) */
  --rf-leading-display: 1.1;   /* Knile large display */
  --rf-leading-snug: 1.15;     /* Knile subheads / short titles */
  --rf-leading-body: 1.65;     /* Nunito: high x-height needs air */
  --rf-leading-callout: 1.55;  /* Contained notes / cards */
  --rf-leading-ui: 1.35;       /* Compact UI at sm (16px) */

  /* Weights — Knile: 400 / 600 / 700 only (no italic faces). Nunito: same + italic. */
  --rf-weight-regular: 400;
  --rf-weight-semibold: 600;
  --rf-weight-bold: 700;

  /* Tracking */
  --rf-tracking-display: -0.02em; /* Knile titles */
  --rf-tracking-meta: 0.06em;     /* uppercase eyebrows */

  /* Comfortable reading length. 65ch is the top of the 60–70 character band. */
  --rf-measure: 65ch;
  /* Report narrative: slightly wider measure + pair with --rf-text-lg so the
     column fills more of --rf-max without dropping the measure axiom */
  --rf-measure-report: 64ch;

  /* Modular space ratio (Every Layout: seed rhythm from text, multiply by one ratio) */
  --rf-ratio: 1.5;

  /* Space: fine steps below 1rem for UI chrome; from s0 up, prefer modular * ratio */
  --rf-space-1: 0.25rem;
  --rf-space-2: 0.5rem;
  --rf-space-3: 0.75rem;
  --rf-space-4: 1rem; /* s0 · text base */
  --rf-space-5: calc(var(--rf-space-4) * var(--rf-ratio)); /* 1.5 · one line @ lh 1.5 */
  --rf-space-6: calc(var(--rf-space-5) * var(--rf-ratio)); /* 2.25 */
  --rf-space-7: calc(var(--rf-space-6) * var(--rf-ratio)); /* 3.375 */
  --rf-space-8: calc(var(--rf-space-7) * var(--rf-ratio)); /* 5.0625 */

  --rf-gutter: var(--rf-space-5); /* default inset for .rf-center--gutter */

  /* Shape */
  --rf-radius-sm: 0.55rem;
  --rf-radius: 0.75rem;
  --rf-radius-lg: 1.25rem;
  --rf-radius-pill: 999px;
  --rf-shadow: 0 2px 12px rgba(44, 41, 34, 0.06);
  --rf-shadow-md: 0 8px 28px rgba(44, 41, 34, 0.1);

  /* Dark surface (headers, callout cards on cream pages) */
  --rf-surface-dark: #4b5e2e;
  --rf-on-dark: #ffffff;
  --rf-on-dark-muted: rgba(255, 255, 255, 0.78);

  /* Text on filled brand surfaces (pair with primary / info / tertiary fills) */
  --rf-on-primary: #ffffff; /* on primary / primary-deep moss fills */
  --rf-on-info: #ffffff; /* on info / blue-nav fills */
  --rf-on-tertiary: #1a1a1a; /* on orange CTA — never white on orange */

  /* Code (warm paper chrome; syntax base is moss-teal, not cool cyan) */
  --rf-code-bg: #f3ece2;
  --rf-code-fg: #3d5c4e;
  --rf-code-border: rgba(44, 41, 34, 0.12); /* block chrome / quiet hairline if needed */
  --rf-code-label-border: rgba(44, 41, 34, 0.28); /* .inline-label outline */
  --rf-code-meta: #9a948c;
  --rf-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Layout */
  --rf-max: 56rem; /* outer shell / grid / docs */
  /* Tool / product reading column (Phloem, dashboards): share one edge for chrome + body.
     Do not nest --rf-measure inside a wider surface of the same component. */
  --rf-content-max: 52rem;
  /* Article prose: --rf-measure; report prose: --rf-measure-report */
  --rf-focus: 0 0 0 3px color-mix(in srgb, var(--rf-green) 35%, transparent);

  /* Gap jobs (kit parity: one gap per job, aliasing the space scale — not a second scale) */
  --rf-cluster-gap: var(--rf-space-3); /* buttons, pills, tags — tight chrome */
  --rf-copy-gap: var(--rf-space-5);    /* mixed marketing copy (proximity) */
  --rf-grid-gap: var(--rf-space-5);    /* equal tiles; same step as stack until tiles need more air */
  --rf-section-gap: var(--rf-space-6); /* between page jobs */
  --rf-split-gap: var(--rf-space-7);   /* copy vs media (Switcher, Sidebar) */

  /* Intrinsic layout minima (kit parity: suggestion over prescription) */
  --rf-grid-min: 14.5rem;      /* default tile floor; --tight drops it */
  --rf-grid-min-tight: 11rem;
  --rf-split-min: 18rem;       /* Switcher wrap threshold */
  --rf-sidebar-side: 16rem;    /* fixed side while adjacent */
  --rf-sidebar-min: 50%;       /* fluid track floor before wrapping */
  --rf-frame-ratio: 4 / 3;     /* media frames — object-fit cover */

  /* Personality knobs (one line each — kit parity) */
  --rf-button-radius: var(--rf-radius-pill);
  --rf-heading-font: var(--rf-font-serif);

  /* Atmosphere (illustrations as text background — not logos).
     PDS vendors a copy via company-docs/03-Marketing/social/pds/sync-cds-tokens.ps1. */
  --rf-atmosphere: 0.1; /* roots watermark on most surfaces */
  --rf-atmosphere-quiet: 0.065; /* roots under dense title/hero text */
  --rf-atmosphere-spot: 0.45; /* apples / corner spot art */
}

/* Roots & Fruit — layout primitives
   Inspired by Every Layout (Pickering & Bell): suggest size, compose with gap,
   keep vertical rhythm stable. Prefer these over one-off margin stacks. */

/* —— Stack: vertical flow with even gap (2nd ed uses gap) —— */
.rf-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--rf-stack-space, var(--rf-space-5));
}

.rf-stack > * {
  margin-block: 0;
}

/* Beat component/docs margins so gap owns vertical rhythm */
.rf-stack > :is(h1, h2, h3, h4, p, .alert, .ds-lede, .ds-type-meta, .ds-footer, .ds-caption, .rf-prose) {
  margin-block: 0;
}

.rf-stack--sm {
  --rf-stack-space: var(--rf-space-3);
}

.rf-stack--md {
  --rf-stack-space: var(--rf-space-5);
}

.rf-stack--lg {
  --rf-stack-space: var(--rf-space-7);
}

/* —— Center: measured reading column, auto side margins, optional gutter —— */
.rf-center {
  box-sizing: content-box;
  max-inline-size: var(--rf-measure);
  margin-inline: auto;
  padding-inline: var(--rf-gutter, 0);
}

.rf-center--gutter {
  --rf-gutter: var(--rf-space-5);
}

/* —— Cluster: horizontal wrap group (buttons, pills, tags) —— */
.rf-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-cluster-space, var(--rf-space-3));
  justify-content: flex-start;
  align-items: center;
}

.rf-cluster--center {
  justify-content: center;
}

.rf-cluster--end {
  justify-content: flex-end;
}

/* —— Copy: Gestalt proximity, not one gap (kit parity) —— */
/* Mixed marketing column: eyebrow hugs the title, title hugs the lede, the
   action gets more air, proof meta tucks under the button. One gap would make
   the whole column a list. */
.rf-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.rf-copy > * {
  margin-block: 0;
}

.rf-copy > :is(h1, h2, h3, h4, .ds-h2, .ds-h3),
.surface.rf-copy > :is(h1, h2, h3, h4, .ds-h2, .ds-h3) {
  margin-block: 0;
}

.rf-copy > .field {
  align-self: stretch;
}

.rf-copy > * + * {
  margin-block-start: var(--rf-copy-gap, var(--rf-space-5));
}

.rf-copy > :is(.pill, .rf-meta, .ds-type-meta) + :is(h1, h2, h3, h4, .ds-h2, .ds-h3) {
  margin-block-start: var(--rf-space-3);
}

.rf-copy > .pill + .rf-byline {
  margin-block-start: var(--rf-space-3);
}

.rf-copy > :is(h1, h2, h3, h4, .ds-h2, .ds-h3) + :is(.rf-lede, p) {
  margin-block-start: var(--rf-space-3);
}

/* A credit line belongs to the title, tighter than the lede under it. */
.rf-copy > :is(h1, h2, h3, h4, .ds-h2, .ds-h3) + .rf-byline {
  margin-block-start: var(--rf-space-2);
}

.rf-copy > img + :is(h1, h2, h3, h4, .ds-h2, .ds-h3) {
  margin-block-start: var(--rf-space-3);
}

.rf-copy > .rf-meta + :is(p, .rf-lede) {
  margin-block-start: var(--rf-space-3);
}

/* .rf-lede { margin: 0 } loads later. This weight keeps the hug. */
.rf-copy > * + .rf-lede {
  margin-block-start: var(--rf-space-3);
}

/* The byline belongs to the title. The excerpt is the next group, so it steps away. */
.rf-copy > .rf-byline + .rf-lede {
  margin-block-start: var(--rf-space-6);
}

.rf-copy > :is(p, .rf-lede) + .field,
.rf-copy > .field + .field {
  margin-block-start: var(--rf-space-3);
}

.rf-copy > .field + :is(.btn, .rf-cluster) {
  margin-block-start: var(--rf-space-5);
}

.rf-copy > :is(.rf-lede, p, h1, h2, h3, h4, .ds-h2, .ds-h3) + :is(.rf-cluster, .btn, a) {
  margin-block-start: var(--rf-space-6);
}

.rf-copy > :is(.rf-cluster, .btn) + :is(.rf-cluster, .rf-meta, .ds-type-meta) {
  margin-block-start: var(--rf-space-4);
}

/* —— Box: even inset on all sides (paint sits on this) —— */
.rf-box {
  box-sizing: border-box;
  padding: var(--rf-space-6);
}

/* —— Grid: responsive tiles, no media queries (kit parity) —— */
/* Tiles grow to fill the row and wrap when they cannot hold --rf-grid-min. */
.rf-grid {
  display: grid;
  gap: var(--rf-grid-gap, var(--rf-space-5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--rf-grid-min, 14.5rem), 100%), 1fr));
}

.rf-grid--tight {
  --rf-grid-min: var(--rf-grid-min-tight);
  --rf-grid-gap: var(--rf-space-3);
}

/* Center each tile's content in its track. Proof stats, not cards. */
.rf-grid--center {
  justify-items: center;
  text-align: center;
}

.rf-grid--center > * {
  text-align: center;
}

/* Five even tracks on wide. Named exception: auto-fitting five into
   four-plus-one leaves a leftover tile — one breakpoint is the override. */
.rf-grid--five {
  display: grid;
  gap: var(--rf-grid-gap, var(--rf-space-3));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  text-align: center;
}

.rf-grid--five > * {
  text-align: center;
}

@media (max-width: 40rem) {
  .rf-grid--five {
    grid-template-columns: 1fr;
  }
}

/* —— Named even tracks: grids are symmetrical by contract —— */
/* Two and three even tracks for pairs, triples, and 2×2 rows. Use these
   instead of letting auto-fit strand a leftover tile (4 items in a 3-up
   auto-fit renders 3+1 — that is the bug this prevents). */
.rf-grid--two,
.rf-grid--three {
  display: grid;
  gap: var(--rf-grid-gap, var(--rf-space-5));
}

.rf-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rf-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A card's longest word (a title like theme.json) is its min-content size.
   The default min-width: auto then grows that one track and the gaps go uneven.
   Stretch every tile to its column, and cancel the left-edge margin that would
   shrink a card back to its text. */
.rf-grid > .rf-card,
.rf-grid > .wp-block-group.rf-card {
  min-inline-size: 0;
  max-inline-size: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch;
}

/* The prose column caps children at 65ch of their own font, so a grid renders
   narrower on the front than in the editor. Fill the column instead. */
.wp-block-post-content.rf-prose > .rf-grid,
.editor-styles-wrapper .rf-grid {
  max-inline-size: none;
  inline-size: 100%;
}

@media (max-width: 40rem) {
  .rf-grid--two,
  .rf-grid--three {
    grid-template-columns: 1fr;
  }
}

/* —— Symmetric rows of three, for odd counts (5, 7, …) —— */
/* Flex, not grid: every row centers, including the last, so 5 renders 3+2 and
   7 renders 3+3+1 with the remainder centered — a deliberate row, not a
   hanging tile. The 11rem floor makes narrow containers wrap to centered
   rows of 2 or 1 instead of shrinking items to slivers. */
.rf-grid--sym {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rf-grid-gap, var(--rf-space-5));
}

.rf-grid--sym > * {
  flex: 0 1 calc((100% - 2 * var(--rf-grid-gap, var(--rf-space-5))) / 3);
  min-inline-size: min(100%, 11rem);
}

/* —— Split: two equal tracks that wrap (Every Layout Switcher) —— */
.rf-split {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--rf-split-gap, var(--rf-space-7));
}

.rf-split > * {
  flex-grow: 1;
  flex-basis: var(--rf-split-min, 18rem);
  min-inline-size: min(100%, var(--rf-split-min, 18rem));
}

.rf-split img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rf-radius-lg);
}

/* Screenshot stays a thumbnail. The copy takes the rest of the row. */
.rf-split--shot > .rf-copy {
  flex-grow: 1;
  flex-basis: 0;
  max-inline-size: none;
}

.rf-split--shot > :not(.rf-copy) {
  flex-grow: 0;
  flex-basis: 16rem;
  max-inline-size: min(100%, 18rem);
}

.rf-split--shot {
  align-items: center;
  padding: var(--rf-space-6);
  background: var(--rf-white);
}

/* Image is the first child on a flipped row, so a normal row puts it on the left. */
.rf-split--shot.rf-split--flip {
  flex-direction: row;
  background: var(--rf-panel);
}

.rf-shot-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.rf-split--shot img {
  width: 100%;
  max-inline-size: 18rem;
}

/* Media on the other side. Narrow screens stack in source order. */
.rf-split--flip {
  flex-direction: row-reverse;
}

@media (max-width: 40rem) {
  .rf-split--flip,
  .rf-split--shot.rf-split--flip {
    flex-direction: column;
  }
}

/* —— Sidebar: one fixed track plus a fluid one —— */
/* Side stays --rf-sidebar-side while adjacent; both wrap when the content
   track cannot hold --rf-sidebar-min. */
.rf-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--rf-split-gap, var(--rf-space-7));
}

.rf-sidebar > :first-child {
  flex-grow: 1;
  flex-basis: var(--rf-sidebar-side, 16rem);
}

.rf-sidebar > :last-child {
  flex-grow: 999;
  flex-basis: 0;
  min-inline-size: min(100%, var(--rf-sidebar-min, 50%));
}

/* —— Frame: media holds a ratio without prescribed px (kit parity) —— */
/* —— Wash: a stripe across the pane. Copy stays in the column. —— */
/* On a marketing page the pane is the window. The docs shell overrides this
   so the stripe stops at the sidebar (see docs.css). */
.rf-wash {
  --rf-wash: var(--rf-cream-deep);
  box-sizing: border-box;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--rf-space-6);
  background: var(--rf-wash);
  color: var(--rf-ink);
}

.rf-wash--panel {
  --rf-wash: var(--rf-panel);
}

.rf-wash--dark {
  --rf-wash: var(--rf-surface-dark);
  color: var(--rf-on-dark);
}

.rf-wash--dark :is(h1, h2, h3, h4, .ds-h2, .ds-h3) {
  color: var(--rf-on-dark);
}

.rf-wash--dark :is(p, .rf-meta, .ds-caption) {
  color: var(--rf-on-dark-muted);
}

.rf-wash--dark .field label,
.rf-wash--dark strong {
  color: var(--rf-on-dark);
}

.rf-wash--dark a.link-text {
  color: var(--rf-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.rf-wash--dark a.link-text:hover {
  color: var(--rf-cream);
}

.rf-wash__inner {
  box-sizing: border-box;
  width: min(100%, var(--rf-max));
  margin-inline: auto;
  padding-inline: var(--rf-gutter, 1rem);
}

.rf-frame img,
img.rf-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--rf-frame-ratio, 4 / 3);
  object-fit: cover;
  border-radius: var(--rf-radius-lg);
}

img.rf-frame--square {
  aspect-ratio: 1;
  object-fit: cover;
}

img.rf-frame--wide {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Whole image, at its real ratio. A large portrait and admin screenshots
   use this. The plain frame still holds the 4/3 crop. */
.rf-frame--fit img,
img.rf-frame--fit {
  box-sizing: border-box;
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
  border: 1px solid var(--rf-rule);
}

img.rf-frame.rf-frame--round {
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  max-inline-size: 18rem;
}

@media (max-width: 40rem) {
  img.rf-frame.rf-frame--round {
    max-inline-size: 14rem;
  }
}

/* Caption follows whatever frame it sits under, so a large portrait and a
   square crop share one stack. Compact is for the smaller crops. */
.rf-figure {
  display: flex;
  flex-direction: column;
  gap: var(--rf-space-3);
  margin: 0;
  min-inline-size: 0;
}

.rf-caption {
  margin: 0;
}

.rf-caption__name {
  margin: 0;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-semibold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-snug);
  color: var(--rf-green-logo);
}

.rf-caption__role {
  margin: var(--rf-space-2) 0 0;
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-body);
}

.rf-figure--compact .rf-caption__name {
  font-size: var(--rf-text-lg);
}

/* Roots & Fruit — shared UI components.
   Load after tokens.css (and fonts.css when Knile is not already available). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-md);
  line-height: var(--rf-leading-body);
  color: var(--rf-ink);
  background: var(--rf-cream);
}

/* Prose utilities (brand-level counterparts to the docs chrome .ds-lede .ds-type-meta) */
.rf-lede {
  box-sizing: content-box;
  max-inline-size: var(--rf-measure);
  font-size: var(--rf-text-lg); /* 22px short lead / intro emphasis */
  line-height: var(--rf-leading-callout);
  color: var(--rf-ink-muted);
  margin: 0;
}

/* Floor. Labels, helper text, table cells. An eyebrow is .rf-meta, not this. */
.rf-small {
  margin: 0;
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-ui);
  color: var(--rf-ink-muted);
}

.rf-meta,
.rf-disclosure__label,
.rf-toggle__state,
.rf-offer__eyebrow,
.ds-sidebar__subtitle,
.ds-nav__page--group,
.ds-type-meta {
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-meta);
  text-transform: uppercase;
}

.rf-meta {
  font-size: var(--rf-text-sm);
  color: var(--rf-ink-muted);
  margin: 0;
}

/* Knile display. Always pair the base with a size. xl is a full-column
   page title, lg is a title inside a split, md is a section, sm is a subhead. */
.rf-display,
.ds-section > h2:not(.ds-h2),
.ds-panel > h2:not(.ds-h2),
.ds-hero h1 {
  margin: 0;
  font-family: var(--rf-font-serif);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-display);
  color: var(--rf-ink-deep);
}

.rf-display--xl,
.ds-hero h1 { font-size: var(--rf-text-4xl); }
.rf-display--lg,
.ds-panel > h2:not(.ds-h2) { font-size: var(--rf-text-3xl); }
.rf-display--md,
.ds-section > h2:not(.ds-h2) { font-size: var(--rf-text-2xl); }

.rf-display--sm {
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-semibold);
  line-height: var(--rf-leading-snug);
}

/* Long-form reading: measure + lead size + paragraph rhythm.
   content-box so --rf-measure (ch) describes text width, not padding+text
   (Every Layout: measure the content, suggest max size, don’t prescribe). */
.rf-prose {
  box-sizing: content-box;
  max-inline-size: var(--rf-measure);
  font-size: var(--rf-text-md); /* 18px long-form; sm (16) is the floor */
  line-height: var(--rf-leading-body);
}

/* Analytical reports: keep a real measure, but widen slightly and bump type
   so the reading column fills more of the shell next to full-width tables.
   Default .rf-prose stays at 65ch / body-md for articles and marketing. */
.rf-prose--wide {
  box-sizing: content-box;
  max-inline-size: var(--rf-measure-report); /* 64ch */
  font-size: var(--rf-text-lg); /* 22px — larger ch → wider physical column */
  line-height: var(--rf-leading-body);
}

/* Every direct child gets the paragraph gap. Headings keep a little more
   air above them. Margins on the children are cleared so a div, a figure,
   a list, or a card cannot sit flush against its neighbor. */
.rf-prose > * {
  margin-block: 0;
  margin-inline: 0;
}

.rf-prose > * + * {
  margin-block-start: var(--rf-space-5);
}

.rf-prose > * + :is(h1, h2, h3, h4) {
  margin-block-start: var(--rf-space-6);
}

.rf-prose > :is(h1, h2, h3, h4) {
  font-family: var(--rf-font-serif);
  font-weight: var(--rf-weight-bold);
  line-height: var(--rf-leading-display);
  letter-spacing: var(--rf-tracking-display);
  color: var(--rf-ink-deep);
}

.rf-prose em {
  font-style: italic;
  font-family: var(--rf-font-sans);
}

.rf-prose strong {
  font-weight: var(--rf-weight-semibold);
}

.rf-prose > :is(h1, h2, h3, h4):first-child {
  margin-block-start: 0;
}

.rf-prose > .rf-card {
  max-inline-size: none;
}

/* A bare table in an essay can be wider than the column. Scroll it inside
   the prose measure instead of widening the page. Long URL links wrap. */
.rf-prose > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.wp-block-post-content a {
  overflow-wrap: anywhere;
}

/* Core pulls alignfull out by the root padding. Article prose padding is 0,
   so that pull sticks the block past the screen. */
.rf-prose.has-global-padding > .alignfull {
  margin-left: 0;
  margin-right: 0;
}

a {
  color: var(--rf-green);
}

a:hover {
  color: var(--rf-green-deep);
}

/* Never remove focus affordances. Restyle them instead.
   Lives here, not brand.css, because the WordPress compiler copies this file. */
:focus-visible {
  outline: none;
  box-shadow: var(--rf-focus);
}


/* Portable elements live in elements.css (imported via rf.css). */

/* —— Atmosphere (thin CDS primitives; PDS adds slide positioning) —— */
.rf-atmosphere {
  opacity: var(--rf-atmosphere);
  pointer-events: none;
  user-select: none;
}

.rf-atmosphere--quiet {
  opacity: var(--rf-atmosphere-quiet);
}

.rf-atmosphere--spot {
  opacity: var(--rf-atmosphere-spot);
}

/* Supporting copy sitting on roots / line art — weight before frosting */
.rf-lede-over-atmosphere {
  font-family: var(--rf-font-sans);
  font-weight: 600;
  color: var(--rf-ink-muted);
}

/* —— Forms —— */
.field {
  display: grid;
  gap: var(--rf-space-1);
}

.field label {
  font-size: var(--rf-text-sm);
  font-weight: 600;
  color: var(--rf-ink);
}

.field .hint,
.field .error {
  font-size: var(--rf-text-sm);
  color: var(--rf-ink-soft);
}

.field .error {
  color: var(--rf-danger);
}

.input,
.select,
.textarea {
  font: inherit;
  color: var(--rf-ink);
  background: var(--rf-white);
  border: 1.5px solid color-mix(in srgb, var(--rf-ink) 18%, transparent);
  border-radius: var(--rf-radius-sm);
  padding-block: 0.65rem;
  padding-inline: 0.8rem;
  display: block;
  inline-size: 100%; /* form fields: fill the field column (suggestion to parent width) */
}

.textarea {
  min-block-size: 6rem;
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: color-mix(in srgb, var(--rf-ink) 32%, transparent);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--rf-green);
  box-shadow: var(--rf-focus);
}

.field--error .input {
  border-color: var(--rf-danger);
}

.check,
.radio {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: var(--rf-text-sm);
  color: var(--rf-ink-muted);
}

.check input,
.radio input {
  margin-top: 0.2rem;
  accent-color: var(--rf-green);
}


/* —— Feedback motion —— */
.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2.5px solid var(--rf-green-soft);
  border-top-color: var(--rf-green);
  border-radius: 50%;
  animation: rf-spin 0.7s linear infinite;
}

@keyframes rf-spin {
  to {
    transform: rotate(360deg);
  }
}

.progress {
  height: 0.4rem;
  background: var(--rf-panel);
  border-radius: var(--rf-radius-pill);
  overflow: hidden;
  max-width: 16rem;
}

.progress > span {
  display: block;
  height: 100%;
  background: var(--rf-green);
  border-radius: inherit;
}

/* Quote. One attribution. Omit the avatar, the role, or both.
   White card, the same 4px cream-deep edge as a white surface.
   The Knile mark sits in the top corner. The words start beside it. */
.rf-quote {
  margin: 0;
  max-inline-size: none;
  padding: var(--rf-space-5);
}

.rf-quote blockquote {
  margin: 0;
  padding: 0;
}

.rf-quote blockquote::before,
.rf-quote blockquote::after {
  content: none;
}

.rf-quote blockquote p {
  position: relative;
  margin: 0;
  padding-inline-start: 5.75rem;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-lg);
  line-height: var(--rf-leading-callout);
  color: var(--rf-ink);
}

.rf-quote blockquote p::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: 0;
  top: var(--rf-space-2);
  display: block;
  margin: 0;
  font-family: var(--rf-font-serif);
  font-size: 9.5rem;
  font-weight: var(--rf-weight-bold);
  line-height: 0.8;
  color: var(--rf-cream-deep);
}

.rf-quote figcaption {
  margin-block-start: var(--rf-space-5);
  padding-inline-start: 5.75rem;
  font-style: normal;
}

.rf-quote__who {
  display: flex;
  align-items: center;
  gap: var(--rf-space-3);
}

.rf-quote__id {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rf-quote__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--rf-cream-deep);
}

.rf-quote__name,
.rf-review__name {
  font-weight: var(--rf-weight-bold);
  color: var(--rf-ink);
}

.rf-quote__role,
.rf-review__role,
.rf-review__date {
  font-size: var(--rf-text-sm);
  color: var(--rf-ink-muted);
  text-decoration: none;
}

a.rf-quote__role:hover {
  text-decoration: underline;
}

/* Citation. A document excerpt, not a person. The rule hangs left of the words. */
.rf-cite {
  position: relative;
  left: -38px;
  overflow: visible;
  max-width: 40rem;
  margin: 0;
  background: transparent;
  border: 0;
  border-left: 4px solid var(--rf-orange);
  border-radius: 0;
  padding: var(--rf-space-6);
}

.rf-cite::after {
  content: "\201D";
  position: absolute;
  z-index: 1;
  inset-inline-start: calc(100% + var(--rf-space-3));
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-family: var(--rf-font-serif);
  font-size: 32rem;
  line-height: 0.7;
  color: var(--rf-orange);
  opacity: 0.28;
  pointer-events: none;
}

.rf-cite p,
.rf-cite cite {
  position: relative;
  z-index: 1;
}

.rf-cite p {
  margin: 0;
  color: var(--rf-ink);
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-lg);
  font-weight: var(--rf-weight-regular);
  line-height: var(--rf-leading-callout);
}

.rf-cite cite,
.rf-cite cite a {
  font-size: var(--rf-text-md);
}

.rf-cite cite {
  display: block;
  margin-block-start: var(--rf-space-5);
  font-family: var(--rf-font-sans);
  font-style: normal;
  line-height: var(--rf-leading-body);
}

/* Review card. Sits in the card grid. Role line is optional. */
.rf-review {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  margin: 0;
  padding: var(--rf-space-5);
}

.rf-review > * + * {
  margin-block-start: var(--rf-space-3);
}

.rf-review__rating + .rf-review__title {
  margin-block-start: var(--rf-space-2);
}

.rf-review__rating {
  position: relative;
  margin: 0;
}

.rf-review__stars {
  display: flex;
  gap: 0.2rem;
}

.rf-review__star {
  width: 1rem;
  height: 1rem;
  background: color-mix(in srgb, var(--rf-orange) 28%, var(--rf-cream));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.rf-review__star--on {
  background: var(--rf-orange);
}

.rf-review__score {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rf-review__title {
  margin: 0;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-semibold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-snug);
  color: var(--rf-ink);
}

.rf-review__title + .rf-review__body {
  margin-block-start: var(--rf-space-3);
}

.rf-review__body {
  margin-block-end: 0;
  margin-inline: 0;
  color: var(--rf-ink);
  font-size: var(--rf-text-md);
}

.rf-review__by {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rf-space-3);
  margin-block-start: var(--rf-space-5);
}

.rf-review__who {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

a.rf-review__role:hover {
  text-decoration: underline;
}

.rf-review__platform a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.rf-review__platform .rf-icon--wordpress {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: #8c8f94;
}

/* Gallery. The stage and the thumbs are white surfaces. The picture
   keeps a steady height. Gaps use the footer panel. */
.rf-gallery__frame {
  position: relative;
  overflow: hidden;
}

.rf-gallery__stage {
  margin: 0;
}

.rf-gallery__stage.surface,
.rf-gallery__thumb.surface {
  padding: 0;
  overflow: hidden;
}

.rf-gallery__open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(12rem, 46vw, 28rem);
  padding: 0;
  border: 0;
  background: var(--rf-panel);
  cursor: zoom-in;
}

.rf-gallery__open:focus-visible,
.rf-gallery__thumb:focus-visible,
.rf-gallery__float:focus-visible,
.rf-gallery__step:focus-visible,
.rf-gallery__close:focus-visible,
.rf-gallery__expand:focus-visible {
  outline: none;
  box-shadow: var(--rf-focus);
}

.rf-gallery__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.rf-gallery__caption {
  margin: 0;
  font-style: normal;
  color: var(--rf-ink);
}

.rf-gallery__count {
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  color: var(--rf-ink-muted);
}

.rf-gallery__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-space-3);
  margin: var(--rf-space-5) 0 0;
  padding: 2px;
  list-style: none;
}

.rf-gallery__item {
  flex: 1 1 0;
  min-width: 0;
}

.rf-gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.rf-gallery__thumb[aria-current="true"] {
  border-color: var(--rf-green);
}

.rf-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.rf-gallery:not(:has(.rf-gallery__item + .rf-gallery__item)) .rf-gallery__strip,
.rf-gallery:not(:has(.rf-gallery__item + .rf-gallery__item)) .rf-gallery__count {
  display: none;
}

.rf-gallery__dialog {
  width: fit-content;
  max-width: min(72rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  color: var(--rf-ink);
  overflow: hidden;
}

.rf-gallery__dialog[open] {
  display: flex;
  flex-direction: column;
}

.rf-gallery__dialog::backdrop {
  background: color-mix(in srgb, var(--rf-ink) 62%, transparent);
}

.rf-gallery__dialog-stage {
  position: relative;
  min-height: 0;
  background: var(--rf-white);
}

.rf-gallery__dialog-scroll img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(72rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 8rem);
}

.rf-gallery__float {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rf-white);
  color: var(--rf-ink);
  box-shadow: var(--rf-shadow-md);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 500ms ease, transform 500ms ease;
}

.rf-gallery__float[hidden] {
  display: none;
}

.rf-gallery__float.rf-gallery__prev {
  inset-inline-start: 0;
  transform: translateY(-50%) translateX(-100%);
}

.rf-gallery__float.rf-gallery__next {
  inset-inline-end: 0;
  transform: translateY(-50%) translateX(100%);
}

.rf-gallery__dialog-stage:hover .rf-gallery__float,
.rf-gallery__frame:hover > .rf-gallery__float,
.rf-gallery__frame:focus-within > .rf-gallery__float {
  opacity: 1;
  pointer-events: auto;
}

.rf-gallery__dialog-stage:hover .rf-gallery__float.rf-gallery__prev,
.rf-gallery__frame:hover > .rf-gallery__float.rf-gallery__prev,
.rf-gallery__frame:focus-within > .rf-gallery__float.rf-gallery__prev {
  transform: translateY(-50%) translateX(var(--rf-space-4));
}

.rf-gallery__dialog-stage:hover .rf-gallery__float.rf-gallery__next,
.rf-gallery__frame:hover > .rf-gallery__float.rf-gallery__next,
.rf-gallery__frame:focus-within > .rf-gallery__float.rf-gallery__next {
  transform: translateY(-50%) translateX(calc(var(--rf-space-4) * -1));
}

@media (prefers-reduced-motion: reduce) {
  .rf-gallery__float {
    transition: none;
  }
}

.rf-gallery__dialog-foot,
.rf-gallery__caption,
.rf-gallery__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rf-space-3);
  padding: 0.7rem var(--rf-space-4);
  background: var(--rf-panel);
}

.rf-gallery__head,
.rf-gallery__caption {
  block-size: 3.25rem;
}

.rf-gallery__stage.surface .rf-gallery__name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-lg);
  font-weight: var(--rf-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--rf-tracking-display);
  color: var(--rf-green);
}

.rf-gallery__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-gallery__dialog-foot {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  flex: none;
}

.rf-gallery__dialog-actions {
  display: flex;
  grid-column: 1;
  justify-self: start;
  gap: 0.4rem;
}

.rf-gallery__step,
.rf-gallery__close,
.rf-gallery__expand {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: 500;
  color: var(--rf-ink);
  cursor: pointer;
}

.rf-gallery__step {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rf-rule);
  border-radius: 0.3rem;
  background: var(--rf-white);
}

.rf-gallery__step[hidden] {
  display: none;
}

.rf-gallery__step:hover {
  border-color: var(--rf-green-2);
}

.rf-gallery__close,
.rf-gallery__expand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
  padding: 0.3rem 0.15rem;
  border: 0;
  background: transparent;
}

.rf-gallery__dialog-foot > .rf-gallery__close {
  grid-column: 3;
}

.rf-gallery__close-icon {
  flex: none;
}

.rf-gallery__close:hover,
.rf-gallery__expand:hover {
  color: var(--rf-green);
}

.rf-gallery__dialog-caption {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  line-height: 1.4;
  color: var(--rf-ink);
}

.rf-gallery__dialog-count {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 40rem) {
  .rf-gallery__item {
    flex: 1 0 calc((100% - 2 * var(--rf-space-3)) / 3);
  }

  .rf-gallery__dialog-foot:has(.rf-gallery__dialog-actions) {
    grid-template-columns: 1fr auto;
  }

  .rf-gallery__dialog-foot:has(.rf-gallery__dialog-actions) .rf-gallery__close {
    grid-column: 2;
    grid-row: 1;
  }

  .rf-gallery__dialog-foot:has(.rf-gallery__dialog-actions) .rf-gallery__dialog-caption {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* —— Atoms: number, slider, card, divider, badge, avatar, time —— */

.rf-number {
  display: flex;
  align-items: stretch;
  max-inline-size: 12rem;
}

.rf-number .input {
  text-align: center;
  border-radius: 0;
  -moz-appearance: textfield;
}

.rf-number .input::-webkit-outer-spin-button,
.rf-number .input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rf-number__step {
  font: inherit;
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-semibold);
  inline-size: 2.6rem;
  background: var(--rf-panel);
  color: var(--rf-ink);
  border: 1.5px solid color-mix(in srgb, var(--rf-ink) 18%, transparent);
  cursor: pointer;
}

.rf-number__step:first-child {
  border-start-start-radius: var(--rf-radius-sm);
  border-end-start-radius: var(--rf-radius-sm);
  border-inline-end: 0;
}

.rf-number__step:last-child {
  border-start-end-radius: var(--rf-radius-sm);
  border-end-end-radius: var(--rf-radius-sm);
  border-inline-start: 0;
}

.rf-number__step:hover {
  background: var(--rf-cream);
}

.rf-number__step:focus-visible {
  outline: none;
  box-shadow: var(--rf-focus);
  position: relative;
  z-index: 1;
}

.rf-slider {
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: 0.4rem;
  margin: 0.65rem 0 0;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-panel);
  accent-color: var(--rf-green);
  cursor: pointer;
}

.rf-slider:focus-visible {
  outline: none;
  box-shadow: var(--rf-focus);
}

.rf-slider__value {
  font-variant-numeric: tabular-nums;
  color: var(--rf-ink-muted);
}

.rf-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-inline-size: 22rem;
  padding: var(--rf-space-5);
}

.rf-card > * + * {
  margin-block-start: var(--rf-space-3);
}

.rf-card__title {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-semibold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-snug);
  margin: 0;
}

.rf-card > .rf-card__title + p {
  margin-block-start: var(--rf-space-3);
}

.rf-card p {
  margin-block-end: 0;
  margin-inline: 0;
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
}

.rf-card > .rf-card__foot {
  margin-block-start: var(--rf-space-5);
  padding-top: var(--rf-space-3);
  border-top: 1px solid var(--rf-rule);
}

/* A card in a row of links. Same edge and type. Less padding, a smaller title. */
.rf-card--tight {
  max-inline-size: 18rem;
  padding: var(--rf-space-4);
}

.rf-card--tight > .rf-card__title,
.rf-card--tight .rf-card__title {
  font-size: var(--rf-text-lg);
}

.rf-card--tight > .rf-card__foot {
  margin-block-start: var(--rf-space-4);
}

.rf-divider {
  border: 0;
  block-size: 1px;
  margin: var(--rf-space-4) 0;
  background: var(--rf-rule);
}

.rf-divider--vertical {
  inline-size: 1px;
  block-size: 1.25rem;
  margin: 0;
  align-self: center;
}

.rf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.75rem;
  min-block-size: 1.75rem;
  padding-inline: 0.35rem;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-green);
  color: var(--rf-on-primary);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rf-badge--danger {
  background: var(--rf-danger-bg);
  color: var(--rf-danger);
}

.rf-badge--dot {
  min-inline-size: 0.7rem;
  min-block-size: 0.7rem;
  padding: 0;
  background: var(--rf-green);
}

.rf-badge-host {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-semibold);
}

.rf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-green-soft);
  color: var(--rf-green-deep);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-semibold);
  overflow: hidden;
}

img.rf-avatar {
  object-fit: cover;
  background: var(--rf-panel);
}

.rf-avatar--mark {
  object-fit: contain;
  padding: 0.45rem;
  background: var(--rf-cream);
}

.rf-time {
  font-size: var(--rf-text-sm);
  color: var(--rf-ink-muted);
}

.rf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--rf-text-sm);
}

.rf-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rf-breadcrumb li + li::before {
  content: "";
  flex-shrink: 0;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  box-sizing: border-box;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-green-soft);
  border: 1.5px solid var(--rf-green-deep);
}

.rf-breadcrumb [aria-current="page"] {
  color: var(--rf-ink);
  font-weight: var(--rf-weight-semibold);
}

/* Primary nav. A row of links. The bar that holds it stays site chrome. */
.rf-nav {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.rf-nav a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: var(--rf-space-5);
  border-left: 1px solid var(--rf-rule);
  color: var(--rf-ink-deep);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-regular);
  letter-spacing: var(--rf-tracking-meta);
  text-decoration: none;
  text-transform: uppercase;
  background-color: transparent;
  background-image: linear-gradient(var(--rf-panel), var(--rf-panel));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%;
  transition: background-size 250ms ease, color 250ms ease;
}

.rf-nav a:hover,
.rf-nav a:focus-visible {
  background-size: 100% 100%;
  color: var(--rf-green-deep);
}

.rf-nav a[aria-current="page"],
.rf-nav a[aria-current="page"]:hover,
.rf-nav a[aria-current="page"]:focus-visible {
  background: var(--rf-cream);
  color: var(--rf-green-deep);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .rf-nav a {
    transition: none;
  }
}

/* Brand marks from Simple Icons (CC0), in icons/. They inherit the link color.
   The link is a fixed square. YouTube's artwork sits inside padding, so that
   mark is drawn larger to match the others. X is a letter, so it stays lighter. */
.rf-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--rf-ink);
  text-decoration: none;
}

.rf-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.rf-icon--youtube {
  width: 1.9rem;
  height: 1.9rem;
}

/* Stroke marks. The shared icon rule fills the shape, which would turn these solid. */
.rf-icon--globe,
.rf-icon--microphone {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.rf-icon-link:hover,
.rf-icon-link:focus-visible {
  color: var(--rf-green);
}

.rf-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-space-2);
  align-items: center;
}

.rf-skeleton-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--rf-space-3);
  max-inline-size: 22rem;
  align-items: center;
}

.rf-skeleton-card .rf-skeleton--line {
  grid-column: 2;
}

.rf-skeleton-card .rf-skeleton--avatar {
  grid-row: 1 / span 2;
}

.rf-skeleton {
  display: block;
  background: var(--rf-panel);
  border-radius: var(--rf-radius-sm);
  block-size: 1rem;
  animation: rf-skeleton 1.4s ease-in-out infinite;
}

.rf-skeleton--short {
  inline-size: 60%;
}

.rf-skeleton--avatar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--rf-radius-pill);
}

@keyframes rf-skeleton {
  50% {
    opacity: 0.5;
  }
}

.rf-tooltip {
  position: relative;
  display: inline-flex;
}

.rf-tooltip__bubble {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(100% + 0.45rem);
  inset-inline-start: 0;
  inline-size: max-content;
  max-inline-size: 16rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--rf-radius-sm);
  background: var(--rf-ink);
  color: var(--rf-cream);
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-snug);
  opacity: 0;
  pointer-events: none;
}

.rf-tooltip:hover .rf-tooltip__bubble,
.rf-tooltip:focus-within .rf-tooltip__bubble {
  opacity: 1;
}

.rf-dialog {
  border: 0;
  padding: var(--rf-space-5);
  border-radius: var(--rf-radius);
  background: var(--rf-white);
  color: var(--rf-ink);
  box-shadow: var(--rf-shadow-md);
  max-inline-size: min(28rem, calc(100% - 2rem));
}

.rf-dialog::backdrop {
  background: color-mix(in srgb, var(--rf-ink) 45%, transparent);
}

.rf-dialog p {
  margin: 0;
}

.rf-dialog form {
  display: flex;
  flex-direction: column;
}

.rf-dialog form > * {
  margin-block: 0;
}

.rf-dialog form > * + * {
  margin-block-start: var(--rf-space-3);
}

.rf-dialog form > .rf-cluster {
  margin-block-start: var(--rf-space-5);
}

.rf-dialog form :is(h2, h3, .ds-h2, .ds-h3) {
  margin-block: 0;
}

.rf-toast-stage {
  position: relative;
  min-block-size: 8rem;
  padding: var(--rf-space-4);
  border: 1px solid var(--rf-rule);
  border-radius: var(--rf-radius);
  background: var(--rf-cream);
}

.rf-toast {
  position: absolute;
  inset-block-start: var(--rf-space-3);
  inset-inline-end: var(--rf-space-3);
  display: flex;
  align-items: center;
  gap: var(--rf-space-3);
  max-inline-size: min(22rem, calc(100% - 1.5rem));
  padding: 0.7rem 0.85rem;
  background: var(--rf-white);
  border: 1px solid color-mix(in srgb, var(--rf-green) 35%, var(--rf-rule));
  border-inline-start: 3px solid var(--rf-green);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow);
}

.rf-toast[hidden] {
  display: none;
}

.rf-toast p {
  margin: 0;
  font-size: var(--rf-text-sm);
}

/* Service offer. One full-width card: copy and price, then a quote band.
   White, beige, and dark moss. The edge matches .surface. */
.rf-offer {
  --rf-surface-fill: var(--rf-white);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.rf-offer--panel {
  --rf-surface-fill: var(--rf-panel);
}

.rf-offer--dark {
  --rf-surface-fill: var(--rf-surface-dark);
  color: var(--rf-on-dark);
}

.rf-offer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16.25rem;
  column-gap: var(--rf-space-6);
  align-items: start;
  padding: var(--rf-space-6) var(--rf-space-7) var(--rf-space-5);
}

.rf-offer__eyebrow {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0 0 var(--rf-space-3);
  padding: var(--rf-space-3) var(--rf-space-6);
  border-radius: var(--rf-radius-pill);
  background: var(--rf-panel);
  color: var(--rf-brown);
  font-size: 0.875rem;
  line-height: 1;
}

.rf-offer--panel .rf-offer__eyebrow {
  background: var(--rf-surface-dark);
  color: var(--rf-on-dark);
}

.rf-offer--dark .rf-offer__eyebrow {
  background: var(--rf-panel);
  color: var(--rf-brown);
}

.rf-offer__copy {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.rf-offer__title,
.rf-offer__amount {
  margin: 0;
  font-family: var(--rf-font-serif);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-display);
  color: var(--rf-green-logo);
}

.rf-offer__title {
  font-size: var(--rf-text-xl);
  line-height: var(--rf-leading-snug);
}

.rf-offer__lede,
.rf-offer__copy li {
  margin: 0;
  font-size: var(--rf-text-lg);
  line-height: var(--rf-leading-callout);
  color: var(--rf-brown);
}

.rf-offer__lede {
  margin-top: var(--rf-space-4);
}

.rf-offer__copy ul {
  margin: var(--rf-space-4) 0 0;
  padding-inline-start: var(--rf-space-5);
}

.rf-offer__copy li + li {
  margin-top: var(--rf-space-2);
}

.rf-offer__price {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rf-space-2);
}

.rf-offer__amount {
  font-size: var(--rf-text-lg);
  line-height: 1.2;
  letter-spacing: 0;
}

.rf-offer__cadence {
  margin: 0 0 var(--rf-space-3);
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-ui);
  color: var(--rf-brown);
}

.rf-offer--dark .rf-offer__title,
.rf-offer--dark .rf-offer__amount {
  color: var(--rf-on-dark);
}

.rf-offer--dark .rf-offer__lede,
.rf-offer--dark .rf-offer__copy li,
.rf-offer--dark .rf-offer__cadence {
  color: var(--rf-on-dark-muted);
}

.rf-offer__band {
  display: flex;
  align-items: center;
  gap: var(--rf-space-6);
  padding: var(--rf-space-5) var(--rf-space-7);
  background: var(--rf-green-soft);
  color: var(--rf-brown);
}

.rf-offer__band a {
  color: var(--rf-brown);
}

.rf-offer__band a:hover {
  color: var(--rf-ink-deep);
}

.rf-offer__portrait {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--rf-radius-pill);
  object-fit: cover;
  flex: none;
}

.rf-offer__words {
  margin: 0;
  min-width: 0;
}

.rf-offer__quote,
.rf-offer__by {
  margin: 0;
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-callout);
  color: var(--rf-brown);
}

.rf-offer__quote {
  font-style: italic;
}

.rf-offer__by {
  margin-top: var(--rf-space-3);
}

.rf-offer__name {
  font-weight: var(--rf-weight-bold);
}

@media (max-width: 40rem) {
  .rf-offer__main {
    grid-template-columns: 1fr;
    padding: var(--rf-space-5);
  }

  .rf-offer__eyebrow {
    padding-inline: var(--rf-space-4);
  }

  .rf-offer__price {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--rf-space-4);
  }

  .rf-offer__band {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rf-space-4);
    padding: var(--rf-space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-skeleton {
    animation: none;
  }
}

/* Glyphs are masks so a pattern can show an icon without inline SVG.
   .rf-icon stays the inline social mark. These three are the marketing set. */
.rf-glyph {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: var(--rf-glyph) center / contain no-repeat;
  mask: var(--rf-glyph) center / contain no-repeat;
}

.rf-glyph--check { --rf-glyph: url("https://rootsandfruit.com/wp-content/themes/rf/assets/icons/check.svg"); }
.rf-glyph--arrow { --rf-glyph: url("https://rootsandfruit.com/wp-content/themes/rf/assets/icons/arrow.svg"); }
.rf-glyph--mail { --rf-glyph: url("https://rootsandfruit.com/wp-content/themes/rf/assets/icons/mail.svg"); }

.rf-glyph-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rf-space-7);
  height: var(--rf-space-7);
  background: var(--rf-green-soft);
  color: var(--rf-green-deep);
}

.rf-icon-card .rf-glyph-tile {
  margin-block-end: var(--rf-space-4);
}

.rf-glyph-list {
  display: grid;
  gap: var(--rf-space-5);
  max-inline-size: 36rem;
}

.rf-glyph-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--rf-space-4);
  align-items: start;
}

.rf-glyph-row__copy {
  display: grid;
  gap: var(--rf-space-2);
}

.rf-glyph-row__copy :is(h1, h2, h3, h4, p) {
  margin: 0;
}

.rf-glyph-row__copy :is(h1, h2, h3, h4) {
  font-family: var(--rf-font-serif);
  color: var(--rf-ink-deep);
}

/* A fact list beside a case study. The cream edge comes from elements.css. */
.rf-facts {
  width: 22rem;
  max-inline-size: 100%;
  margin: 0;
  overflow: hidden;
}

.rf-facts__title {
  margin: 0;
  padding: var(--rf-space-3) var(--rf-space-4);
  background: var(--rf-green);
  color: var(--rf-on-primary);
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-lg);
  line-height: var(--rf-leading-snug);
}

.rf-facts dl,
dl.rf-facts {
  margin: 0;
}

.rf-facts dl > div,
dl.rf-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--rf-space-4);
  align-items: baseline;
  padding: var(--rf-space-3) var(--rf-space-4);
  border-block-start: 1px solid var(--rf-rule);
}

.rf-facts > div:first-child,
dl.rf-facts > div:first-child {
  border-block-start: 0;
}

.rf-facts dt {
  margin: 0;
  color: var(--rf-ink-muted);
}

.rf-facts dd {
  margin: 0;
  font-weight: var(--rf-weight-bold);
  color: var(--rf-ink-deep);
  text-align: end;
}

.rf-facts a {
  color: var(--rf-green);
}

/* Three stats. Five uses .rf-grid--five. Four is a leftover tile. */
.rf-stats {
  display: grid;
  gap: var(--rf-grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rf-space-2);
  text-align: center;
}

.rf-stat__value {
  margin: 0;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-3xl);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-display);
  color: var(--rf-green-logo);
}

/* A sequence with a mark column. Takeaways keep the orange rule. */
.rf-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf-step {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
  gap: var(--rf-space-6);
  align-items: start;
  padding-block: var(--rf-space-5);
  border-block-start: 1px solid var(--rf-rule);
}

.rf-step__mark {
  margin: 0;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-bold);
  line-height: var(--rf-leading-snug);
  color: var(--rf-green-deep);
}

.rf-step__title {
  margin: 0 0 var(--rf-space-2);
  font-family: var(--rf-font-serif);
  color: var(--rf-ink-deep);
}

.rf-step p {
  margin: 0;
}

.rf-people {
  display: grid;
  gap: var(--rf-grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rf-person {
  display: flex;
  flex-direction: column;
  gap: var(--rf-space-3);
  min-inline-size: 0;
}

.rf-person img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid var(--rf-cream-deep);
  border-radius: 0;
}

.rf-person__name {
  margin: 0;
  font-family: var(--rf-font-serif);
  color: var(--rf-ink-deep);
}

.rf-person__role {
  margin: 0;
  color: var(--rf-ink-muted);
}

.rf-shots {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--rf-space-4);
  align-items: stretch;
}

.rf-shots img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 4px solid var(--rf-cream-deep);
  border-radius: 0;
}

.rf-shots__side {
  display: grid;
  gap: var(--rf-space-4);
}

.rf-shots__side img {
  aspect-ratio: 16 / 9;
  height: auto;
}

.rf-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--rf-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf-logo-row figure,
.rf-logo-row li {
  margin: 0;
}

.rf-logo-row img {
  display: block;
  width: auto;
  height: 2.25rem;
  max-width: 9rem;
}

@media (max-width: 40rem) {
  .rf-stats,
  .rf-people,
  .rf-shots,
  .rf-step {
    grid-template-columns: 1fr;
  }

  .rf-step {
    gap: var(--rf-space-2);
  }
}

/* Roots & Fruit — disclosure (single expandable section).
   Native <details>/<summary>. Prefer this over inventing accordion JS.
   The mark is an inline arrow that points right. Open rotates it 90° so it points down. */

.rf-disclosure {
  --rf-disclosure-label: 0.8rem;
  --rf-disclosure-leaf: 1rem;
  --rf-disclosure-motion: 0.28s ease;
  margin-block: var(--rf-space-5) 0;
  margin-inline: 0;
  border: 1.5px solid var(--rf-cream-deep);
  border-radius: var(--rf-radius);
  background: var(--rf-white);
  overflow: clip;
}

.rf-disclosure + .rf-disclosure {
  margin-block-start: var(--rf-space-3);
}

.rf-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-space-3);
  list-style: none;
  cursor: pointer;
  min-block-size: calc(var(--rf-space-3) * 2 + var(--rf-text-sm) * var(--rf-leading-ui));
  padding-block: var(--rf-space-3);
  padding-inline: var(--rf-space-4);
  box-sizing: border-box;
  font-family: var(--rf-font-sans);
  color: var(--rf-ink);
}

.rf-disclosure__summary:hover,
.rf-disclosure__summary:focus-visible,
.rf-disclosure[open] > .rf-disclosure__summary {
  --rf-disclosure-label: 0.9rem;
  --rf-disclosure-leaf: 1.1rem;
}

.rf-disclosure__summary::-webkit-details-marker {
  display: none;
}

.rf-disclosure__summary::marker {
  content: '';
}

.rf-disclosure__label {
  font-size: var(--rf-disclosure-label);
  color: var(--rf-ink-muted);
  line-height: var(--rf-leading-ui);
  transition:
    font-size var(--rf-disclosure-motion),
    color 0.2s ease;
}

.rf-disclosure__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none;
  transition: transform var(--rf-disclosure-motion);
}

.rf-disclosure[open] > .rf-disclosure__summary .rf-disclosure__icon {
  transform: rotate(90deg);
}

.rf-disclosure__arrow {
  display: block;
  inline-size: var(--rf-disclosure-leaf);
  block-size: var(--rf-disclosure-leaf);
  overflow: visible;
}

.rf-disclosure__summary:hover .rf-disclosure__label,
.rf-disclosure__summary:focus-visible .rf-disclosure__label,
.rf-disclosure[open] > .rf-disclosure__summary .rf-disclosure__label {
  color: var(--rf-ink);
}

.rf-disclosure__summary:focus-visible {
  outline: 2px solid var(--rf-blue);
  outline-offset: -2px;
}

.rf-disclosure__panel {
  padding-block: var(--rf-space-5) var(--rf-space-6);
  padding-inline: var(--rf-space-5);
  background: var(--rf-cream);
  border-block-start: 1px solid var(--rf-cream-deep);
  color: var(--rf-ink);
}

.rf-disclosure__panel > :first-child {
  margin-block-start: 0;
}

.rf-disclosure__panel > :last-child {
  margin-block-end: 0;
}

/* Roots & Fruit — portable CDS elements (buttons, pills, alerts, surfaces, takeaways, code, tables).
   Loaded by brand rf.css and vendored into PDS as cds-elements.css.
   Do not put page resets or form chrome here. */

/* —— Buttons & links —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: 0.7rem 1.15rem;
  border-radius: var(--rf-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--rf-green);
  color: var(--rf-on-primary);
}

.btn--primary:hover:not(:disabled) {
  background: var(--rf-green-deep);
  color: var(--rf-on-primary);
}

.btn--secondary {
  background: var(--rf-panel);
  color: var(--rf-ink);
  border-color: var(--rf-panel-deep);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--rf-panel-deep);
  color: var(--rf-ink);
}

.btn--tertiary {
  background: transparent;
  color: var(--rf-green);
  border-color: var(--rf-green);
}

.btn--tertiary:hover:not(:disabled) {
  background: var(--rf-green-soft);
}

.btn--cta {
  background: var(--rf-orange);
  color: var(--rf-ink-deep);
}

.btn--cta:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rf-orange) 85%, var(--rf-cream));
  color: var(--rf-ink-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--rf-ink-muted);
  border-color: transparent;
  padding-inline: 0.65rem;
}

.btn--ghost:hover:not(:disabled) {
  color: var(--rf-green);
  background: var(--rf-green-soft);
}

/* Product UI — app chrome / tool nav (not marketing) */
.btn--product {
  background: var(--rf-blue-nav);
  color: var(--rf-white);
  border-color: var(--rf-blue-nav);
}

.btn--product:hover:not(:disabled) {
  background: var(--rf-blue);
  border-color: var(--rf-blue);
  color: var(--rf-white);
}

.btn--product:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-blue) 35%, transparent);
}

.btn--product-quiet {
  background: var(--rf-white);
  color: var(--rf-ink-muted);
  border-color: var(--rf-cream-deep);
}

.btn--product-quiet:hover:not(:disabled) {
  color: var(--rf-blue);
  border-color: var(--rf-blue-muted);
  background: var(--rf-white);
}

.btn--product-quiet:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-blue) 35%, transparent);
}

.btn--product-quiet[aria-current="page"],
.btn--product-quiet[aria-pressed="true"],
.btn--product-quiet.is-active {
  background: var(--rf-blue-nav);
  border-color: var(--rf-blue-nav);
  color: var(--rf-white);
}

/* Size modifier — after color variants so padding/type win over .btn--ghost etc.
   Compose with a color variant (e.g. .btn.btn--tertiary.btn--sm). */
.btn.btn--sm {
  font-size: 0.875rem; /* 14px control label — not a type-scale step */
  line-height: 1.25;
  padding: 0.28rem 0.7rem;
  gap: 0.25rem;
  border-width: 1px;
}

.btn.btn--sm.btn--ghost {
  padding-block: 0.28rem;
  padding-inline: 0.5rem;
}

.link-text {
  font-weight: 600;
  text-underline-offset: 0.15em;
}

/* —— Badges —— */
.pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.25;
  font-size: var(--rf-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-panel);
  color: var(--rf-ink);
}

/* Selected chip and the green status chip are the same soft-green recipe. */
.pill--green,
.pill--active,
.pill.is-active {
  background: var(--rf-green-soft);
  color: var(--rf-green-deep);
}

.pill--orange {
  background: var(--rf-orange-soft);
  color: var(--rf-brown);
}

.pill--blue {
  background: var(--rf-blue-soft);
  color: var(--rf-blue);
}

.pill--danger {
  background: var(--rf-danger-bg);
  color: var(--rf-danger);
}

/* Text accents — same intents as .pill--* (color only, no chrome) */
.text-muted { color: var(--rf-ink-muted); }
.text-green { color: var(--rf-green-deep); }
.text-orange { color: var(--rf-orange); }
.text-blue { color: var(--rf-blue); }
.text-danger { color: var(--rf-danger); }

/* —— Alerts —— */
/* flow-root (not grid/flex): mixed text + inline <code> must stay in prose flow.
   Grid/flex promote each <code> to a full-width item. */
.alert {
  display: flow-root;
  padding-block: var(--rf-space-3);
  padding-inline: var(--rf-space-4);
  border-radius: var(--rf-radius);
  border: 1px solid var(--rf-rule);
  font-size: var(--rf-text-sm);
  margin-block-end: var(--rf-space-3);
}

.alert strong {
  display: block;
  margin-block-end: var(--rf-space-1);
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-md);
  letter-spacing: -0.01em;
}

.alert--info {
  background: var(--rf-info-bg);
  border-color: color-mix(in srgb, var(--rf-blue) 25%, transparent);
}

.alert--success {
  background: var(--rf-success-bg);
  border-color: color-mix(in srgb, var(--rf-green) 30%, transparent);
}

.alert--warning {
  background: var(--rf-warning-bg);
  border-color: color-mix(in srgb, var(--rf-orange) 35%, transparent);
}

.alert--danger {
  background: var(--rf-danger-bg);
  border-color: color-mix(in srgb, var(--rf-danger) 30%, transparent);
}

/* Instructional callout (how-to / guidance), distinct from status alerts */
.alert--note {
  background: var(--rf-panel-soft);
  border: 0;
  border-inline-start: 3px solid var(--rf-green);
  border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
  padding-block: var(--rf-space-5);
  padding-inline: var(--rf-space-5);
  color: var(--rf-ink-muted);
  line-height: var(--rf-leading-callout);
  box-sizing: content-box;
  max-inline-size: var(--rf-measure);
}

.alert--note strong {
  color: var(--rf-ink);
}

/* —— Surfaces —— */
/* One white edge. Card, quote, review, offer, the fact list, and the gallery dialog share it.
   They do not become .surface, so they do not inherit surface type.
   .rf-edge--thick only changes the width. Cards stay 4px. */
.surface,
.rf-card,
.rf-quote,
.rf-review,
.rf-offer,
.rf-gallery__dialog,
.rf-facts {
  background: var(--rf-surface-fill, var(--rf-white));
  border: 4px solid var(--rf-cream-deep);
  border-radius: 0;
  box-shadow: none;
}

.rf-edge--thick {
  border-width: 6px;
}

/* Square 4px edge, one step darker than the fill. White uses cream-deep
   because the next token, cream, is the page wash. A fill with a hue keeps it. */
.surface {
  --rf-surface-fill: var(--rf-white);
  padding: var(--rf-space-5);
}

.surface h3 {
  font-family: var(--rf-font-serif);
  margin-block: 0 var(--rf-space-2);
  margin-inline: 0;
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-semibold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-snug);
}

.surface p {
  margin-block: 0;
  margin-inline: 0;
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
}

.surface p + p {
  margin-block-start: var(--rf-space-3);
}

/* The title rule above clears its top margin. An eyebrow needs that gap back. */
.surface > .rf-meta + h3,
.rf-card > .rf-meta + .rf-card__title {
  margin-block-start: var(--rf-space-3);
}

.surface p + :is(.btn, .rf-cluster) {
  margin-block-start: var(--rf-space-5);
}

.surface--panel {
  --rf-surface-fill: var(--rf-panel);
}

/* Brand green on the panel is 4.03:1. Deep green is 5.65:1. */
.surface--panel a.link-text {
  color: var(--rf-green-deep);
}

.surface--panel a.link-text:hover,
.surface--panel a.link-text:focus-visible {
  color: var(--rf-green-6);
}

.surface--cream {
  --rf-surface-fill: var(--rf-cream-deep);
}

/* Soft moss tint: the kit's primary-soft tile. One per marketing tile row —
   text stays ink (muted fails AA on moss). The outline button inverts on
   hover so the fill is not the tile colour (kit parity). */
.surface--tint {
  --rf-surface-fill: var(--rf-green-soft);
}

.surface--tint p {
  color: var(--rf-ink);
}

.surface--tint .btn--tertiary:hover:not(:disabled),
.surface--tint .btn--tertiary:focus-visible {
  background: var(--rf-green-deep);
  color: var(--rf-on-primary);
  border-color: var(--rf-green-deep);
}

.surface--dark {
  --rf-surface-fill: var(--rf-surface-dark);
  color: var(--rf-on-dark);
}

/* Footer olive. Same card edge as a white surface. Type follows the dark surface. */
.surface.surface--logo {
  --rf-surface-fill: var(--rf-green-logo);
  color: var(--rf-on-dark);
}

.surface--panel,
.surface--cream,
.surface--tint,
.surface--dark,
.rf-offer--panel,
.rf-offer--dark {
  border-color: oklch(from var(--rf-surface-fill) calc(l - 0.03) c h);
}

.surface--dark h3,
.surface--logo h3,
.surface--dark h4,
.surface--logo h4 {
  color: var(--rf-on-dark);
  font-family: var(--rf-font-serif);
  letter-spacing: -0.02em;
}

.surface--dark p,
.surface--logo p,
.surface--dark li,
.surface--logo li {
  color: var(--rf-on-dark-muted);
}

.surface--dark > .rf-meta,
.surface--logo > .rf-meta {
  color: var(--rf-orange-soft);
}

.surface--dark .btn--cta,
.surface--logo .btn--cta {
  background: var(--rf-orange);
  color: var(--rf-ink-deep);
}

.surface--dark .btn--primary,
.surface--logo .btn--primary,
.rf-offer--dark .btn--primary {
  background: var(--rf-white);
  color: var(--rf-green-deep);
}

.surface--dark .btn--primary:hover:not(:disabled),
.surface--logo .btn--primary:hover:not(:disabled),
.rf-offer--dark .btn--primary:hover:not(:disabled) {
  background: var(--rf-cream);
  color: var(--rf-green-deep);
}

/* Outline (tertiary) on moss inverts so it is not a green-on-green ghost. */
.surface--dark .btn--tertiary,
.surface--logo .btn--tertiary {
  color: var(--rf-on-dark);
  border-color: var(--rf-on-dark);
}

.surface--dark .btn--tertiary:hover:not(:disabled),
.surface--logo .btn--tertiary:hover:not(:disabled),
.surface--dark .btn--tertiary:focus-visible,
.surface--logo .btn--tertiary:focus-visible {
  background: var(--rf-white);
  color: var(--rf-green-deep);
  border-color: var(--rf-white);
}

/* —— Key takeaways —— */
.rf-takeaways {
  margin: 0;
}

.rf-takeaways > :is(h2, h3),
.rf-takeaways__title {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rf-green);
  margin: 0 0 var(--rf-space-3);
}

.rf-takeaways > ol,
ol.rf-keytakeaways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rf-space-4);
}

.rf-takeaways > ol > li,
ol.rf-keytakeaways > li {
  /* Block + absolute number (not a 2-col grid). A grid turns <strong> +
     following text into separate columns and breaks title/body pairs. */
  display: block;
  position: relative;
  margin: 0;
  padding: 0 0 0 calc(var(--rf-space-3) + 1.75rem);
  border-left: 2px solid var(--rf-orange);
  color: var(--rf-ink);
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-callout);
}

.rf-takeaways > ol > li > strong:first-child,
ol.rf-keytakeaways > li > strong:first-child {
  display: block;
  font-weight: var(--rf-weight-semibold);
  color: var(--rf-ink-deep);
  margin-block-end: var(--rf-space-1);
}

.rf-takeaways__num {
  position: absolute;
  inset-inline-start: var(--rf-space-3);
  inset-block-start: 0;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  color: var(--rf-orange);
  letter-spacing: 0.02em;
  line-height: var(--rf-leading-callout);
}

/* Auto 01 / 02 when site markup uses ol.rf-keytakeaways without manual nums */
ol.rf-keytakeaways {
  counter-reset: rf-takeaway;
}

ol.rf-keytakeaways > li {
  counter-increment: rf-takeaway;
}

ol.rf-keytakeaways > li::before {
  content: counter(rf-takeaway, decimal-leading-zero);
  position: absolute;
  inset-inline-start: var(--rf-space-3);
  inset-block-start: 0;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  color: var(--rf-orange);
  letter-spacing: 0.02em;
  line-height: var(--rf-leading-callout);
}

/* Manual numbers: suppress auto ::before */
ol.rf-keytakeaways > li:has(.rf-takeaways__num)::before {
  content: none;
}

/* —— Inline + block code ——
   Quiet <code>: terms in flow (commands, short identifiers).
   .inline-label / .rf-inline-label: named objects (files, paths) — outlined. */
:not(pre) > code {
  display: inline;
  font-family: var(--rf-font-mono);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--rf-code-fg);
  background: var(--rf-code-bg);
  border: 0;
  border-radius: 0.3rem;
  padding: 0.08em 0.35em;
}

.inline-label,
.rf-inline-label {
  font-family: var(--rf-font-mono);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--rf-code-fg);
  background: var(--rf-code-bg);
  border: 1px solid var(--rf-code-label-border);
  border-radius: 0.35rem;
  padding: 0.1em 0.45em;
  white-space: nowrap;
}

/* Label may wrap a code node from the editor — keep one chrome only */
.inline-label > code,
.rf-inline-label > code {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.rf-code {
  margin: 0 0 var(--rf-space-5);
  background: var(--rf-code-bg);
  border: 1px solid var(--rf-code-border);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow);
  overflow: hidden;
}

.rf-code__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-space-3);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rf-code-border);
}

.rf-code__dots {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.rf-code__dots span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: block;
}

.rf-code__dots span:nth-child(1) {
  background: #ff5f56;
  box-shadow: inset 0 0 0 0.5px #e0443e;
}

.rf-code__dots span:nth-child(2) {
  background: #ffbd2e;
  box-shadow: inset 0 0 0 0.5px #dea123;
}

.rf-code__dots span:nth-child(3) {
  background: #27c93f;
  box-shadow: inset 0 0 0 0.5px #1aab29;
}

.rf-code__copy {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rf-code-meta);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: var(--rf-radius-sm);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: 600;
  transition: color 0.15s ease, background 0.15s ease;
}

.rf-code__copy:hover {
  color: var(--rf-ink-muted);
  background: color-mix(in srgb, var(--rf-ink) 6%, transparent);
}

.rf-code__copy:focus-visible {
  box-shadow: var(--rf-focus);
}

.rf-code__copy::after {
  content: "Copied";
  font-size: var(--rf-text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--rf-green-deep);
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.2s ease, opacity 0.18s ease;
}

.rf-code__copy[data-copied] {
  color: var(--rf-green-deep);
  background: color-mix(in srgb, var(--rf-green) 14%, transparent);
}

.rf-code__copy[data-copied]::after {
  max-width: 4.5rem;
  opacity: 1;
}

.rf-code__body {
  margin: 0;
  padding: var(--rf-space-4) var(--rf-space-4) 1.75rem;
  overflow-x: hidden; /* soft-wrap; no horizontal scrollbar */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: var(--rf-font-mono);
  font-size: var(--rf-text-sm);
  line-height: 1.55;
  color: var(--rf-code-fg);
  background: transparent;
}

.rf-code__body code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.rf-code__lang {
  display: block;
  text-align: right;
  padding: 0 var(--rf-space-4) 0.65rem;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  color: var(--rf-code-meta);
}

/* —— Tables —— */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rf-rule);
  border-radius: var(--rf-radius);
  background: var(--rf-white);
}

table.rf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rf-text-sm);
}

.rf-table th,
.rf-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rf-rule);
}

.rf-table th {
  font-family: var(--rf-font-serif);
  font-weight: 600;
  color: var(--rf-ink);
  background: var(--rf-panel-soft);
}

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

.rf-table td {
  color: var(--rf-ink-muted);
}

/* R&F block styles — maps is-style-rf-* onto kit tokens.
   Theme-owned. Not generated by the compiler. */

/* Core Grid layout inlines a tiny gap. Tile rows use the kit grid job. */
.wp-block-group.is-layout-grid.wp-block-group-is-layout-grid {
  gap: var(--rf-grid-gap);
}


/* Main's section margin is for unlike siblings (a last card vs the footer).
   A last alignfull wash is the next band — flush it. Do not put that
   margin on the template as an inline style; it would win over this. */
main.wp-block-group {
  margin-block-end: var(--rf-section-gap);
}

main.wp-block-group:has(
    > .wp-block-post-content
      > .alignfull:last-child:is(.is-style-rf-dark, .has-paper-deep-background-color)
  ) {
  margin-block-end: 0;
}

/* A featured photo is opt-in from the post editor (rf_hero_featured).
   The compiler-owned template and site chrome own the hero colors. */
.rf-article-hero.has-rf-featured-hero {
  background-image: linear-gradient(
      color-mix(in srgb, var(--rf-paper) 68%, transparent),
      color-mix(in srgb, var(--rf-paper) 68%, transparent)
    ),
    var(--rf-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rf-article-hero .wp-block-group.is-layout-flex {
  align-items: center;
}
  margin-inline: 0;
  max-inline-size: none;
  width: 100%;
}

.rf-article-hero .wp-block-post-excerpt,
.rf-article-hero .wp-block-post-excerpt p {
  font-size: var(--rf-text-lg);
  line-height: var(--rf-leading-callout);
  max-inline-size: var(--rf-measure);
}

.rf-article-hero .wp-block-avatar {
  line-height: 0;
}

.rf-article-hero .wp-block-avatar img {
  display: block;
  width: var(--rf-space-6);
  height: var(--rf-space-6);
  border-radius: var(--rf-radius-sm);
  object-fit: cover;
}

/* Posts index: one column, section gap. Not card-grid. */
.wp-block-query .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: var(--rf-section-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}


.wp-block-group.is-style-rf-tint .wp-block-button.is-style-rf-outline .wp-block-button__link:hover,
.wp-block-group.is-style-rf-tint .wp-block-button.is-style-rf-outline .wp-block-button__link:focus {
  background-color: var(--rf-primary-deep);
  color: var(--rf-on-primary);
  border-color: var(--rf-primary-deep);
}

/* Group styles are printed as :where(.is-style-rf-logo--2). That loses to
   .rf-card's white fill, so a Logo olive card goes blank (white type on white). */
.wp-block-group.is-style-rf-logo {
  background-color: var(--wp--preset--color--logo);
  color: var(--wp--custom--on--dark);
  padding: var(--wp--preset--spacing--space-6);
}

.wp-block-group.is-style-rf-tint {
  background-color: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--ink);
  padding: var(--wp--preset--spacing--space-6);
}

.wp-block-group.is-style-rf-dark {
  background-color: var(--wp--preset--color--surface-dark);
  color: var(--wp--custom--on--dark);
  padding: var(--wp--preset--spacing--space-6);
}

.wp-block-group.is-style-rf-panel {
  background-color: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--ink);
  padding: var(--wp--preset--spacing--space-6);
}

/* Dark fills. Kit takeaways pin ink and solid orange, which fail on moss.
   Body and titles stay white. Numbers and the rule use soft orange. */
.wp-block-group:is(.is-style-rf-dark, .is-style-rf-logo) :is(h1, h2, h3, h4, h5, h6, p, li, a) {
  color: var(--rf-on-dark);
}

.wp-block-group:is(.is-style-rf-dark, .is-style-rf-logo) ol.rf-keytakeaways > li {
  border-left-color: var(--rf-orange-soft);
}

.wp-block-group:is(.is-style-rf-dark, .is-style-rf-logo) ol.rf-keytakeaways > li::before {
  color: var(--rf-orange-soft);
}

.wp-block-group.alignfull.is-style-rf-dark {
  border-radius: 0;
}

.wp-block-group.is-style-rf-dark .wp-block-button:not([class*="is-style-rf"]) .wp-block-button__link {
  background-color: var(--rf-surface);
  color: var(--rf-primary-deep);
}

.wp-block-group.is-style-rf-dark .wp-block-button:not([class*="is-style-rf"]) .wp-block-button__link:hover,
.wp-block-group.is-style-rf-dark .wp-block-button:not([class*="is-style-rf"]) .wp-block-button__link:focus {
  background-color: var(--rf-primary-soft);
  color: var(--rf-primary-deep);
}

.wp-block-group.is-style-rf-dark > .is-style-rf-pill {
  background-color: var(--rf-surface);
  color: var(--rf-ink-deep);
}

.wp-block-group.is-style-rf-dark .wp-block-button.is-style-rf-outline .wp-block-button__link {
  color: var(--rf-on-dark);
  border-color: var(--rf-on-dark);
}

.wp-block-group.is-style-rf-dark .wp-block-button.is-style-rf-outline .wp-block-button__link:hover,
.wp-block-group.is-style-rf-dark .wp-block-button.is-style-rf-outline .wp-block-button__link:focus {
  background-color: var(--rf-surface);
  color: var(--rf-primary-deep);
  border-color: var(--rf-surface);
}

/* Site chrome. Identity comes from WP options; this only paints the frame. */
.wp-block-group.rf-identity {
  gap: 0 var(--rf-space-2);
  align-items: stretch;
}

.rf-identity > .wp-block-group {
  gap: 0;
}

.rf-identity .wp-block-site-title,
.rf-identity .wp-block-site-tagline,
.rf-identity .wp-block-site-title a {
  margin: 0;
}

.rf-identity .wp-block-site-title a {
  display: block;
  line-height: inherit;
}

.rf-identity .wp-block-site-title,
.rf-identity .wp-block-site-title a {
  line-height: 1;
}

.rf-identity .wp-block-site-tagline {
  line-height: var(--rf-leading-snug);
}

.rf-identity .wp-block-site-logo {
  position: relative;
  margin: 0;
  align-self: stretch;
  flex: 0 0 auto;
  width: calc(
    (var(--rf-identity-title, var(--rf-text-lg)) * 1)
    + (var(--rf-text-sm) * var(--rf-leading-snug))
  );
}

header .rf-identity {
  --rf-identity-title: var(--rf-text-lg);
}

footer .rf-identity {
  --rf-identity-title: var(--rf-text-sm);
}

.rf-identity .wp-block-site-logo.is-default-size {
  width: calc(
    (var(--rf-identity-title, var(--rf-text-lg)) * 1)
    + (var(--rf-text-sm) * var(--rf-leading-snug))
  );
}

.rf-identity .wp-block-site-logo a {
  position: absolute;
  inset: 0;
  display: block;
}

.rf-identity .wp-block-site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 0;
}

header .wp-block-site-title,
header .wp-block-site-title a {
  font-family: var(--rf-font-display);
  font-size: var(--rf-text-lg);
  font-weight: var(--rf-weight-bold);
  color: var(--rf-ink-deep);
  text-decoration: none;
  letter-spacing: var(--rf-tracking-display);
  line-height: 1;
}

header .wp-block-site-title a:hover {
  color: var(--rf-primary);
  text-decoration: none;
}

header .wp-block-navigation a {
  color: var(--rf-ink);
  font-weight: var(--rf-weight-semibold);
  text-decoration: none;
}

header .wp-block-navigation a:hover,
header .wp-block-navigation a:focus {
  color: var(--rf-primary);
  text-decoration: underline;
}

header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--rf-paper);
  border: 1px solid var(--rf-rule);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow);
  padding-block: var(--rf-space-2);
  min-inline-size: 12rem;
  z-index: 20;
}

header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
  padding-inline: var(--rf-space-4);
}

header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation__submenu-container {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  inset-inline-start: 100%;
  inset-block-start: 0;
}

.wp-block-site-logo img {
  display: block;
  border-radius: var(--rf-radius-sm);
}

footer .wp-block-site-title,
footer .wp-block-site-title a {
  font-family: var(--rf-font-body);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  color: var(--rf-ink-deep);
  text-decoration: none;
}

footer .wp-block-site-title a:hover {
  color: var(--rf-primary);
}

footer .rf-footer-grid.is-layout-grid {
  align-items: start;
  grid-template-columns: minmax(12rem, 1.4fr) repeat(3, minmax(8rem, 1fr));
}

@media (max-width: 48rem) {
  footer .rf-footer-grid.is-layout-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  footer .rf-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 32rem) {
  footer .rf-footer-grid.is-layout-grid {
    grid-template-columns: 1fr;
  }
}

footer .rf-footer-col .wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .rf-footer-col .wp-block-list li {
  margin: 0;
}

footer .rf-footer-col .wp-block-list li + li {
  margin-block-start: var(--rf-space-2);
}

footer .rf-footer-col a {
  color: var(--rf-ink);
  font-size: var(--rf-text-sm);
  text-decoration: none;
}

footer .rf-footer-col a:hover,
footer .rf-footer-col a:focus {
  color: var(--rf-primary);
  text-decoration: underline;
}

footer .rf-footer-brand .wp-block-social-links {
  margin: 0;
  padding: 0;
  gap: var(--rf-space-3);
  font-size: 32px;
}

footer .wp-block-social-links .wp-social-link {
  background: none;
}

footer .wp-block-social-links .wp-social-link a {
  padding: 0;
}

footer .wp-block-social-links .wp-block-social-link.wp-social-link:hover,
footer .wp-block-social-links .wp-block-social-link.wp-social-link:focus-within {
  transform: none;
  color: var(--rf-ink-muted);
}

footer .wp-block-social-links .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor,
footer .wp-block-social-links .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor:hover,
footer .wp-block-social-links .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor:active,
footer .wp-block-social-links .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor:visited,
footer .wp-block-social-links .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor svg,
footer .wp-block-social-links .wp-block-social-link.wp-social-link:focus-within .wp-block-social-link-anchor,
footer .wp-block-social-links .wp-block-social-link.wp-social-link:focus-within .wp-block-social-link-anchor svg {
  color: var(--rf-ink-muted);
  fill: var(--rf-ink-muted);
}

/* Mirror css/components.css .rf-table / .rf-details onto Core blocks. */
.wp-block-table {
  overflow-x: auto;
  background: var(--rf-surface);
  border: 1px solid var(--rf-rule);
  border-radius: var(--rf-radius);
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rf-text-sm);
  border: 0;
}

.wp-block-table table :is(th, td) {
  text-align: left;
  padding: 0.7rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--rf-rule);
}

.wp-block-table table th {
  font-family: var(--rf-heading-font);
  font-weight: var(--rf-weight-semibold);
  color: var(--rf-ink);
  background: var(--rf-panel-soft);
}

.wp-block-table table td {
  color: var(--rf-ink-muted);
}

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

.wp-block-table figcaption {
  padding: 0.5rem 1rem 0.7rem;
}

.wp-block-details {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--rf-max);
  min-inline-size: 0;
  background: var(--rf-surface);
  border: 1px solid var(--rf-rule);
  border-radius: var(--rf-radius);
}

/* Post-content is a flex column. WP constrained `margin-inline: auto` then
   shrink-wraps children, so `inline-size: 100%` follows the summary. Size
   from the post-content container instead. */
@container (min-width: 1px) {
  .wp-block-details {
    inline-size: min(var(--rf-max), 100cqi);
    max-inline-size: min(var(--rf-max), 100cqi);
  }
}

.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: var(--rf-space-2);
  margin: 0;
  padding: 0.7rem 1rem;
  min-inline-size: 0;
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-semibold);
  line-height: var(--rf-leading-ui);
  color: var(--rf-ink-deep);
  cursor: pointer;
  list-style: none;
  border-radius: var(--rf-radius);
}

.wp-block-details > summary::-webkit-details-marker,
.wp-block-details > summary::marker {
  display: none;
  content: "";
}

.wp-block-details > summary::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  border-inline-end: 2px solid var(--rf-ink);
  border-block-end: 2px solid var(--rf-ink);
  transform: rotate(-45deg);
  translate: 0 -0.05rem;
}

.wp-block-details[open] > summary {
  border-bottom: 1px solid var(--rf-rule);
  border-radius: var(--rf-radius) var(--rf-radius) 0 0;
  background: var(--rf-panel-soft);
}

.wp-block-details[open] > summary::before {
  transform: rotate(45deg);
  translate: 0 0.05rem;
}

.wp-block-details > summary:focus-visible {
  outline: none;
  box-shadow: var(--rf-focus);
}

.wp-block-details > :not(summary) {
  margin: 0;
  padding: 0.7rem 1rem 1rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--rf-ink);
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-body);
  overflow-wrap: break-word;
}

/* Stacked details. Editor spaces .wp-block wrappers; the front spaces the
   details themselves. Same token as Group blockGap (stack / space-5). */
.wp-block-details + .wp-block-details {
  margin-block-start: var(--wp--style--block-gap, var(--rf-space-5));
}

.wp-block-quote {
  margin: 0;
  font-size: var(--rf-text-lg);
  line-height: var(--rf-leading-callout);
  color: var(--rf-ink);
}

.rf-quote .wp-block-quote {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.rf-quote .wp-block-quote cite {
  display: block;
  margin-block-start: var(--rf-space-5);
  padding-inline-start: 5.75rem;
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
  font-style: normal;
  font-weight: var(--rf-weight-bold);
}

.rf-quote__who > .wp-block-html {
  flex: none;
  margin: 0;
}

.rf-quote__id p,
.rf-review__who p,
.rf-review__date {
  margin: 0;
}

.wp-block-button.btn {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.wp-block-button.btn .wp-block-button__link {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: 0.7rem 1.15rem;
  border-radius: var(--rf-radius-pill);
  border: 1.5px solid transparent;
}

.wp-block-button.btn.btn--primary .wp-block-button__link {
  background-color: var(--rf-green);
  color: var(--rf-on-primary);
}

.wp-block-button.btn.btn--primary .wp-block-button__link:hover,
.wp-block-button.btn.btn--primary .wp-block-button__link:focus-visible {
  background-color: var(--rf-green-deep);
  color: var(--rf-on-primary);
}

.wp-block-button.btn.btn--cta .wp-block-button__link {
  background-color: var(--rf-orange);
  color: var(--rf-ink-deep);
}

.wp-block-button.btn.btn--cta .wp-block-button__link:hover,
.wp-block-button.btn.btn--cta .wp-block-button__link:focus-visible {
  background-color: color-mix(in srgb, var(--rf-orange) 85%, var(--rf-cream));
  color: var(--rf-ink-deep);
}

.wp-block-button.btn.btn--tertiary .wp-block-button__link {
  background-color: transparent;
  color: var(--rf-green);
  border-color: var(--rf-green);
}

.wp-block-button.btn.btn--tertiary .wp-block-button__link:hover,
.wp-block-button.btn.btn--tertiary .wp-block-button__link:focus-visible {
  background-color: var(--rf-green-soft);
  color: var(--rf-green);
}

.wp-block-button.btn.btn--sm .wp-block-button__link {
  font-size: 0.875rem;
  line-height: 1.25;
  padding: 0.28rem 0.7rem;
  border-width: 1px;
}

/* Compat: older recipes used Columns + is-style-rf-split. New recipes use
   Group Switcher. Keep this so saved content does not snap. */
.wp-block-columns.is-style-rf-split {
  align-items: center;
}

.wp-block-columns.is-style-rf-split img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rf-radius-lg);
}

/* Research studies. The markup comes from the published reports.
   Colors, type, and spacing are the kit tokens. */
.rf-research-study {
  color: var(--rf-ink);
  background: var(--rf-paper);
}

.rf-research-study .shell {
  box-sizing: border-box;
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
}

.rf-research-study .hero {
  position: relative;
  overflow: hidden;
  background: var(--rf-panel);
  border-bottom: 4px solid var(--rf-panel-deep);
  padding-block: var(--rf-space-7);
}

.rf-research-study .hero__roots {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(34rem, 46vw);
  height: auto;
  opacity: 0.12;
  pointer-events: none;
}

.rf-research-study .study-deck {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.8fr);
  gap: var(--rf-space-6);
  align-items: start;
}

.rf-research-study .study-deck__abstract-title,
.rf-research-study h2,
.rf-research-study h3 {
  font-family: var(--rf-font-serif);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-display);
  color: var(--rf-green-logo);
}

.rf-research-study h2 {
  font-size: var(--rf-text-2xl);
  margin: 0 0 var(--rf-space-4);
}

.rf-research-study h3 {
  font-size: var(--rf-text-xl);
  margin: var(--rf-space-5) 0 var(--rf-space-3);
}

.rf-research-study .prose,
.rf-research-study p {
  font-size: var(--rf-text-md);
  line-height: var(--rf-leading-body);
}

.rf-research-study .prose {
  max-inline-size: 65ch;
  margin-block: 0 var(--rf-space-4);
}

.rf-research-study .cite-box__abstract {
  margin-top: 0;
}

.rf-research-study .cite-box__biblio {
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
}

.rf-research-study .meta-rail {
  display: grid;
  gap: var(--rf-space-4);
  margin: 0;
}

.rf-research-study .meta-rail dt {
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-meta);
  text-transform: uppercase;
  color: var(--rf-ink-muted);
}

.page-hero.page-hero--research::before {
  content: none;
}

.page-hero--research .rf-byline .rf-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.page-hero--research .rf-byline .wp-block-post-date {
  margin: 0;
}

.rf-research-study .page-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--rf-space-2);
}

.rf-research-study .page-footer__brand img {
  width: 1em;
  height: 1em;
  flex: none;
}

.rf-research-study .meta-rail dd {
  margin: 0.15rem 0 0;
}

.rf-research-study .meta-rail__split {
  display: flex;
  gap: var(--rf-space-5);
}

.rf-research-study section {
  padding-block: var(--rf-space-6);
}

.rf-research-study .band,
.rf-research-study .rf-analysis-band {
  background: var(--rf-panel-soft);
}

.rf-research-study .rf-analysis-callout {
  max-inline-size: 65ch;
}

.rf-research-study .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rf-space-4);
  margin-top: var(--rf-space-5);
}

.rf-research-study .stat__value {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-2xl);
  line-height: 1;
  color: var(--rf-green);
}

.rf-research-study .stat__label {
  margin-top: var(--rf-space-2);
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
}

.rf-research-study .chart-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 3.5rem;
  gap: var(--rf-space-3);
  align-items: center;
  margin-block: var(--rf-space-2);
}

.rf-research-study .chart-row__label,
.rf-research-study .chart-row__value {
  font-size: var(--rf-text-sm);
}

.rf-research-study .chart-row__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rf-research-study .chart-row__track {
  display: block;
  height: 0.7rem;
  background: var(--rf-panel);
  border-radius: var(--rf-radius-pill);
  overflow: hidden;
}

.rf-research-study .chart-row__bar {
  display: block;
  height: 100%;
  background: var(--rf-green);
  border-radius: inherit;
}

.rf-research-study .bar--1 { background: var(--rf-orange); }
.rf-research-study .bar--2 { background: var(--rf-brown); }
.rf-research-study .bar--3 { background: var(--rf-green); }
.rf-research-study .bar--4 { background: var(--rf-green-deep); }

.rf-research-study .quote {
  margin: 0;
  padding: var(--rf-space-3) var(--rf-space-4);
  color: var(--rf-ink);
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-md);
}

.rf-research-study .download-card h3 {
  margin-top: 0;
}

.rf-research-study .download-card + .download-card,
.rf-research-study .finding + .finding {
  margin-top: var(--rf-space-4);
}

.rf-research-study code {
  font-size: 0.92em;
}

@media (max-width: 50rem) {
  .rf-research-study .study-deck,
  .rf-research-study .stats,
  .rf-research-study .chart-row {
    grid-template-columns: 1fr;
  }

  .rf-research-study .chart-row__value {
    text-align: left;
  }
}


/* 404. Column and grid only. Each essay is a Surface group. */
.rf-not-found .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rf-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rf-not-found .wp-block-post {
  min-inline-size: 0;
  height: 100%;
}

.rf-not-found .wp-block-post > .is-style-rf-surface {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.rf-not-found .rf-card__title {
  font-size: var(--rf-text-lg);
}

.rf-not-found .wp-block-post-excerpt__more-text {
  display: none;
}

.rf-not-found .is-style-rf-surface .wp-block-post-date {
  margin-block-start: auto;
}

@media (max-width: 50rem) {
  .rf-not-found .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}

/* Term body. Article prose clears its own measure so a story can fill a custom
   column. Here the post content is the column, so it uses the site content width. */
body.single-term main.wp-block-group > .wp-block-post-content.rf-prose {
  max-inline-size: var(--wp--style--global--content-size);
  margin-inline: auto;
}
body.rf-editing-term .is-root-container > :is(h1, h2, h3, h4, h5, h6) {
  max-width: var(--wp--style--global--content-size);
}

@media (max-width: 40rem) {
  .rf-grid--three.is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Code window inside the editor. The block's own chrome stays out of the way. */
.rf-code--editor > .wp-block-code {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--rf-code-fg);
  padding: var(--rf-space-4) var(--rf-space-4) 1.75rem;
  font-family: var(--rf-font-mono);
  font-size: var(--rf-text-sm);
  line-height: 1.55;
}

.rf-code--editor > .wp-block-code code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}

/* Glossary sidebar. Theme headings are display size, which wraps these labels. */
.cat-term-panel__heading {
  font-size: var(--rf-text-xl);
  line-height: var(--rf-leading-snug);
}

.cat-term-panel__section-heading {
  font-size: var(--rf-text-lg);
  line-height: var(--rf-leading-snug);
}

/* Term hero. Same panel, border, title, lede, and roots drawing as the page
   hero, without the 31rem minimum height. */
.page-hero.page-hero--term {
  min-height: 0;
  justify-content: flex-start;
}

.page-hero--term .rf-split {
  --rf-split-gap: var(--rf-space-5);
}

.page-hero--term .rf-lede {
  max-inline-size: none;
  margin: 0;
}

.page-hero--term .cat-term-panel__section-heading {
  margin: 0;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-meta);
  text-transform: uppercase;
  color: var(--rf-ink-muted);
  line-height: var(--rf-leading-body);
}

.page-hero--term .rf-term-refs :is(ul, li) {
  margin-block: 0;
}

.page-hero--term .rf-term-refs ul {
  padding-inline-start: 1.1rem;
}

.page-hero--term .rf-term-source__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rf-space-1);
}

.page-hero--term .rf-term-source__meta,
.page-hero--term .rf-term-source__meta .rf-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rf-space-2);
  margin: 0;
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-body);
}

.page-hero--term .rf-term-source__meta .rf-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.page-hero--term .wp-block-cat-toolkit-cat-cite-this,
.page-hero--term .cat-cite-this {
  margin: 0;
}

.page-hero--term .cat-cite-this__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: 0.7rem 1.15rem;
  border-radius: var(--rf-radius-pill);
  border: 1.5px solid var(--rf-green);
  background: transparent;
  color: var(--rf-green);
  cursor: pointer;
}

.page-hero--term .cat-cite-this__button:hover,
.page-hero--term .cat-cite-this__button:focus-visible {
  background: var(--rf-green-soft);
  color: var(--rf-green);
}

/* Case-study pieces. Core flow layout is a column and beats a single kit class. */
.wp-block-group.rf-stats,
.wp-block-group.rf-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rf-grid-gap);
}

.wp-block-group.rf-shots {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--rf-space-4);
  align-items: stretch;
}

.wp-block-group.rf-shots__side,
.wp-block-group.rf-glyph-list {
  display: grid;
  gap: var(--rf-space-4);
}

.wp-block-group.rf-glyph-list {
  gap: var(--rf-space-5);
  max-inline-size: 36rem;
}

.wp-block-group.rf-glyph-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--rf-space-4);
  align-items: start;
}

.wp-block-group.rf-logo-row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--rf-space-6);
}

@media (max-width: 40rem) {
  .wp-block-group.rf-stats,
  .wp-block-group.rf-people,
  .wp-block-group.rf-shots {
    grid-template-columns: 1fr;
  }
}

/* Product hero. The page-hero tree is painted on the right, which is where
   the screenshot sits, so this hero drops it. Copy is 60%, the shot 40%. */
.page-hero.page-hero--product::before {
  content: none;
}

.page-hero--product .wp-block-group.rf-product-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rf-space-6);
}

.page-hero--product .rf-product-hero > .rf-copy {
  flex: 1 1 18rem;
  width: calc(60% - var(--rf-space-6) / 2);
  max-inline-size: 60%;
}

.page-hero--product .rf-product-hero > img {
  flex: 1 1 16rem;
  width: calc(40% - var(--rf-space-6) / 2);
  max-inline-size: 40%;
  height: auto;
}

.wp-block-column .rf-facts {
  width: 100%;
}

@media (max-width: 40rem) {
  .page-hero--product .rf-product-hero > .rf-copy,
  .page-hero--product .rf-product-hero > img {
    width: 100%;
    max-inline-size: 100%;
  }
}

/* HydroKE's TOC is 13px. This site's type floor is 16px. */
.hydroke-doc .hydroke-doc-toc {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-text-sm);
  color: var(--rf-ink);
  border-left-color: var(--rf-rule);
}

.rf-doc-sidebar-search {
  margin-block-end: var(--rf-space-5);
}

.hydroke-doc .hydroke-doc-toc-title,
.hydroke-doc .hydroke-doc-toc-title-text {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-md);
  font-weight: var(--rf-weight-semibold);
  color: var(--rf-ink-deep);
}

.hydroke-doc .hydroke-doc-toc-top-link,
.hydroke-doc .hydroke-doc-toc-top-link-text {
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-regular, 400);
  color: var(--rf-ink-muted);
}

.hydroke-doc .hydroke-doc-toc-list a,
.hydroke-doc .hydroke-doc-toc-level-3 a {
  font-size: var(--rf-text-sm);
  color: var(--rf-ink);
}

.hydroke-doc .hydroke-doc-toc-list a:hover,
.hydroke-doc .hydroke-doc-toc-list a.is-active {
  color: var(--rf-green);
  background: var(--rf-green-soft);
}

.hydroke-doc .hydroke-doc-related {
  border-top-color: var(--rf-rule);
}

.hydroke-doc .hydroke-doc-related-title {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-semibold);
  letter-spacing: var(--rf-tracking-display);
  color: var(--rf-ink-deep);
}

.hydroke-doc .hydroke-doc-related-grid {
  gap: var(--rf-space-4);
}

.hydroke-doc a.hydroke-doc-related-card {
  gap: 0;
  max-inline-size: none;
  padding: var(--rf-space-4);
  background: var(--rf-white);
  border: 4px solid var(--rf-cream-deep);
  border-radius: 0;
  box-shadow: none;
  color: var(--rf-ink);
  text-decoration: none;
  transform: none;
}

.hydroke-doc a.hydroke-doc-related-card:hover,
.hydroke-doc a.hydroke-doc-related-card:focus-visible {
  border-color: var(--rf-cream-deep);
  transform: none;
  text-decoration: none;
}

.hydroke-doc .hydroke-doc-related-card-title {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-lg);
  font-weight: var(--rf-weight-semibold);
  letter-spacing: var(--rf-tracking-display);
  line-height: var(--rf-leading-snug);
  color: var(--rf-ink-deep);
}

.hydroke-doc .hydroke-doc-related-card-excerpt {
  margin-block-start: var(--rf-space-3);
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-body);
  color: var(--rf-ink-muted);
}

/* Site chrome written by the compiler. The kit does not own the header bar or footer. */

.site-header {
  background: var(--rf-white);
  border-bottom: 4px solid var(--rf-cream-deep);
}

.site-header__inner {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  width: min(1200px, calc(100% - 2rem));
  min-height: calc(4.75rem + var(--rf-space-4));
  margin-inline: auto;
  padding-block: var(--rf-space-2);
}

.site-header .rf-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin: 0;
}

@media (min-width: 600px) {
  .site-header .rf-nav .wp-block-navigation__responsive-container,
  .site-header .rf-nav .wp-block-navigation__responsive-close,
  .site-header .rf-nav .wp-block-navigation__responsive-dialog,
  .site-header .rf-nav .wp-block-navigation__responsive-container-content,
  .site-header .rf-nav .wp-block-navigation__container,
  .site-header .rf-nav .wp-block-navigation-item,
  .site-header .rf-nav a.wp-block-navigation-item__content {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0;
  }
}

@media (max-width: 599px) {
  .site-header .rf-nav:has(.is-menu-open) {
    overflow: visible;
  }

  .site-header .wp-block-navigation.rf-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: var(--rf-panel-soft);
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: var(--rf-space-4);
    right: var(--rf-space-4);
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    box-sizing: border-box;
    width: 100%;
    align-items: stretch;
    gap: var(--rf-space-3);
    padding: var(--rf-space-7) var(--rf-gutter) var(--rf-space-6);
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: stretch;
    width: 100%;
    gap: var(--rf-space-3);
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    justify-content: flex-end;
    padding: var(--rf-space-3) var(--rf-space-4);
    border-left: 0;
    border-bottom: 1px solid var(--rf-rule);
    background-image: none;
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content:hover {
    background: var(--rf-cream);
    color: var(--rf-green-deep);
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content:focus-visible {
    outline: 2px solid var(--rf-green-deep);
    outline-offset: 2px;
  }

  .site-header .rf-nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content[aria-current="page"] {
    background: var(--rf-green-soft);
    color: var(--rf-green-deep);
  }
}
.site-header .wp-block-site-logo {
  align-self: center;
}

.site-header .custom-logo,
.site-header .site-logo img {
  display: block;
  width: 6.7rem;
  height: auto;
}

.site-header .rf-nav .wp-block-navigation__container {
  gap: 0;
  padding: 0;
  list-style: none;
}

.site-header .rf-nav a.wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  background-image: linear-gradient(var(--rf-panel), var(--rf-panel));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%;
  color: var(--rf-ink-deep);
  transition: background-size 250ms ease, color 250ms ease;
}

.site-header .rf-nav a.wp-block-navigation-item__content:hover,
.site-header .rf-nav a.wp-block-navigation-item__content:focus-visible {
  background-size: 100% 100%;
  color: var(--rf-green-deep);
  text-decoration: none;
}

.site-header .rf-nav a.wp-block-navigation-item__content[aria-current="page"] {
  background: var(--rf-cream);
  color: var(--rf-green-deep);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .rf-nav a.wp-block-navigation-item__content {
    transition: none;
  }
}

.wp-block-group.rf-quote,
.wp-block-group.rf-review {
  max-inline-size: 100%;
}

/* WordPress centers a constrained child with margin: auto. A piece
   narrower than the column (a 36rem list, a 65ch line) then starts
   in the middle. Keep the column's left edge for every child.
   Center only with .rf-center or an alignment class. */
.is-layout-constrained > :where(
  :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide):not(.aligncenter):not(.rf-center)
),
.wp-block-group.rf-quote,
.wp-block-group.rf-card,
.wp-block-group.rf-review {
  margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
  margin-right: auto !important;
}

.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 31.25rem;
  overflow: hidden;
  border-bottom: 4px solid var(--rf-panel-deep);
  background: var(--rf-panel);
}

.page-hero > .wp-block-post-title,
.page-hero > .rf-display--lg,
.page-hero > .rf-lede,
.page-hero > .wp-block-buttons,
.page-hero > .rf-display--md,
.page-hero > .rf-split {
  margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
  margin-right: auto !important;
}

.page-hero > .wp-block-post-title,
.page-hero > .rf-display--lg,
.page-hero > .rf-lede,
.page-hero > .rf-split {
  max-width: 1200px;
}

.page-hero .rf-display--lg {
  color: var(--rf-green-logo);
}

.page-hero .rf-display--md {
  max-inline-size: 36.7rem;
  color: var(--rf-green);
  font-weight: var(--rf-weight-semibold);
}

.page-hero .rf-lede {
  max-inline-size: 1200px;
  color: var(--rf-brown);
}

.page-hero .wp-block-buttons {
  width: fit-content;
}

.page-hero--articles {
  min-height: 0;
}

.page-hero--articles.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}

.page-hero--articles .article-wide,
.articles-list {
  box-sizing: border-box;
  width: min(1200px, calc(100% - 2rem));
  max-width: none;
  margin-inline: auto;
}

/* The constrained-column rule pins this child to the left below 1200px,
   which leaves the hero flush while the article list stays inset. */
.page-hero--articles .article-wide {
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-hero--articles .wp-block-query-title {
  max-inline-size: 36.7rem;
  margin-inline: 0;
}

.page-hero--articles .rf-lede {
  max-inline-size: var(--rf-measure);
  margin-inline: 0;
}

.page-hero--articles .page-hero__optin {
  margin-left: 0;
  margin-right: auto;
}

/* Docs hub: HydroKE blocks do not always pick up group blockGap. */
.page-hero--articles:has(.hydroke-docs-search) .article-wide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rf-space-5);
}

.page-hero--articles:has(.hydroke-docs-search) .article-wide > * {
  margin-block: 0;
}

.page-hero--articles:has(.hydroke-docs-search) .article-wide .hydroke-doc-breadcrumbs {
  margin-block-start: var(--rf-space-1);
}

/* The page step (space-7) is for a hero followed by a band. The docs
   list already has its own padding, so that step opens a hole. */
.wp-block-post-content.is-layout-constrained:not(.rf-prose) > .page-hero--articles + .hydroke-docs-landing {
  margin-block-start: 0;
}

.articles-list.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}

.articles-list {
  padding-block: var(--rf-space-7) var(--rf-space-8);
}

.articles-list .wp-block-post-template {
  gap: var(--rf-space-7);
}

.articles-list .wp-block-post {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.articles-list .wp-block-post > * {
  margin-block: 0;
}

.articles-list .pill {
  margin-block-end: var(--rf-space-3);
}

.articles-list .wp-block-post-title {
  margin-block-start: 0;
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-2xl);
  font-weight: var(--rf-weight-semibold);
  line-height: var(--rf-leading-snug);
  letter-spacing: 0;
}

.articles-list .wp-block-post-title a {
  color: var(--rf-green-deep);
  font-weight: var(--rf-weight-semibold);
  text-decoration: none;
}

.articles-list .wp-block-post-date {
  margin-block-start: var(--rf-space-2);
  font-size: var(--rf-text-sm);
  color: var(--rf-ink-muted);
}

.articles-list .wp-block-post-excerpt {
  margin-block-start: var(--rf-space-4);
  max-inline-size: 42rem;
}

.articles-list .wp-block-post-excerpt__more-text {
  margin-block-start: var(--rf-space-3);
}

.page-hero__optin {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
}

.page-hero__optin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rf-space-3);
}

.page-hero__optin-row .input {
  flex: 1 1 14rem;
  inline-size: auto;
  min-inline-size: 0;
}

.page-hero__optin-row .btn {
  flex: none;
}

/* Section blocks (a hero, then a band) keep a wide step.
   Running text uses the prose rhythm: space-5 between paragraphs,
   space-6 before a heading. Articles already opt into .rf-prose. */
.wp-block-post-content.is-layout-constrained:not(.rf-prose) > * + * {
  margin-block-start: var(--rf-space-7);
}

.wp-block-post-content.is-layout-constrained:not(.rf-prose) > * + :is(p, ul, ol) {
  margin-block-start: var(--rf-space-5);
}

.wp-block-post-content.is-layout-constrained:not(.rf-prose) > * + :is(h1, h2, h3, h4) {
  margin-block-start: var(--rf-space-6);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://rootsandfruit.com/wp-content/themes/rf/assets/illustrations/roots-1.svg") no-repeat 75% 100% / 600px auto;
  opacity: 0.1;
  pointer-events: none;
}

.page-hero--about::before {
  background: url("https://rootsandfruit.com/wp-content/themes/rf/assets/illustrations/apples-1.svg") no-repeat 0% 100% / 28rem auto;
  opacity: 0.16;
}

.wp-block-group.rf-stack.is-layout-flow > * + * {
  margin-block-start: 0;
}

.wp-block-group.rf-split.is-layout-flow > *,
.wp-block-group.rf-grid--two.is-layout-flow > *,
.wp-block-group.rf-grid--three.is-layout-flow > * {
  margin-block: 0;
}

.wp-block-group.rf-prose.is-layout-flow > * + * {
  margin-block-start: var(--rf-space-5);
}

.wp-block-group.rf-prose.is-layout-flow > * + :is(h1, h2, h3, h4) {
  margin-block-start: var(--rf-space-6);
}

.home-brands {
  text-align: center;
}

.home-brands :is(h2, h3) {
  color: var(--rf-on-dark);
}

.home-brands :is(p, em) {
  color: var(--rf-on-dark-muted);
}

.home-brands img {
  display: block;
  width: 100%;
  height: auto;
}

.about-hero__split {
  align-items: center;
}

.about-hero__split > .rf-copy {
  flex: 1 1 20rem;
  max-inline-size: 34rem;
}

.about-hero__split > .wp-block-html,
.about-hero__split > .rf-figure {
  flex: 1 1 28rem;
  max-inline-size: 36rem;
}

.about-story > .rf-prose,
.case-study__split > .rf-prose {
  flex: 1 1 26rem;
  max-inline-size: none;
}

.about-story > .about-path {
  flex: 0 1 22rem;
  max-inline-size: 22rem;
}

.about-path {
  display: flex;
  flex-direction: column;
  gap: var(--rf-space-4);
}

.about-stop {
  display: flex;
  align-items: flex-start;
  gap: var(--rf-space-4);
}

.about-stop > .wp-block-html,
.case-study__title > .wp-block-html {
  flex: none;
}

img.about-stop__mark,
img.case-study__mark {
  height: 2.25rem;
  width: auto;
  max-width: 6.5rem;
  flex: none;
  margin-top: 0.15rem;
  border-radius: 0;
  object-fit: contain;
}

.case-study__title {
  display: flex;
  align-items: flex-start;
  gap: var(--rf-space-4);
  align-self: stretch;
}

.case-study .rf-copy > .rf-meta + .case-study__title {
  margin-block-start: var(--rf-space-3);
}

.case-study__title .rf-display {
  min-inline-size: 0;
}

.case-study__split > .rf-quote {
  flex: 0 1 26rem;
  max-inline-size: 26rem;
  width: auto;
}

@media (max-width: 50rem) {
  .page-hero--articles::before {
    background-size: 16rem auto;
    background-position: 80% 100%;
  }

  .page-hero__optin-row .btn {
    flex: 1 1 100%;
  }

  .page-hero--about::before {
    background-size: 14rem auto;
  }

  .about-story > .about-path {
    max-inline-size: none;
  }
}

.services-close {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding-block: var(--rf-space-7);
  border-top: 4px solid var(--rf-panel-deep);
  background-color: var(--rf-panel);
}

.services-close::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: max(1rem, calc((100% - 1200px) / 2));
  width: 18rem;
  aspect-ratio: 623 / 386;
  transform: translateY(-50%);
  background: url("https://rootsandfruit.com/wp-content/themes/rf/assets/illustrations/apples-1.svg") no-repeat center / contain;
  opacity: var(--rf-atmosphere-spot);
  pointer-events: none;
}

.services-close > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 50rem) {
  .services-close::before {
    width: min(14rem, 42%);
  }
}

.services-close .wp-block-button__link {
  background: var(--rf-orange);
  color: var(--rf-ink);
  border-radius: var(--rf-radius-pill);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.book-call {
  width: min(72rem, calc(100vw - 2rem));
  height: min(52rem, calc(100dvh - 3rem));
}

.book-call__frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--rf-white);
}

.rf-article-hero {
  background-color: var(--rf-green-logo);
  color: var(--rf-on-dark);
}

.rf-article-hero :is(h1, h2, p, a, time) {
  color: var(--rf-on-dark);
}

.rf-article-hero h1 {
  font-size: var(--rf-text-3xl);
  font-weight: var(--rf-weight-bold);
  line-height: var(--rf-leading-display);
  letter-spacing: var(--rf-tracking-display);
}

.rf-article-hero .rf-lede {
  max-inline-size: none;
  color: var(--rf-on-dark);
}

.rf-article-hero .wp-block-post-terms a,
.rf-article-hero .rf-meta {
  /* #fac9a3 is 4.81:1 on --rf-green-logo. --rf-orange-web is 2.77:1. */
  color: var(--rf-orange-on-dark, #fac9a3);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-meta);
  text-decoration: none;
  text-transform: uppercase;
}

/* HydroKE docs: same olive hero as essays. The inner column shares the
   1200px shell with the body + TOC, so the title lines up with the copy. */
.hydroke-doc-hero {
  margin-bottom: var(--rf-space-6);
  padding-block: var(--rf-space-7);
}

.hydroke-doc-hero .hydroke-doc-header {
  box-sizing: border-box;
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
  max-inline-size: none;
}

.hydroke-doc-hero .hydroke-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rf-space-2) var(--rf-space-4);
  margin: 0 0 var(--rf-space-4);
  font-size: var(--rf-text-sm);
}

.hydroke-doc-hero .hydroke-doc-meta-label {
  color: var(--rf-on-dark-muted);
}

.hydroke-doc-hero .hydroke-doc-meta-updated {
  color: var(--rf-on-dark);
  font-variant-numeric: tabular-nums;
}

.hydroke-doc-hero .hydroke-doc-meta-chip {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  /* ~4.8:1 on --rf-green-logo; --rf-orange-web fails small-type AA on olive */
  color: var(--rf-orange-on-dark, #fac9a3);
  font-size: var(--rf-text-sm);
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-meta);
  line-height: var(--rf-leading-snug);
  text-decoration: none;
  text-transform: uppercase;
}

.hydroke-doc-hero .hydroke-doc-meta-chip:hover,
.hydroke-doc-hero .hydroke-doc-meta-chip:focus-visible {
  color: var(--rf-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hydroke-doc-hero .hydroke-doc-breadcrumbs {
  margin: var(--rf-space-5) 0 0;
  font-size: var(--rf-text-sm);
  line-height: var(--rf-leading-snug);
}

.hydroke-doc-hero .hydroke-doc-breadcrumbs-list a {
  color: var(--rf-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hydroke-doc-hero .hydroke-doc-breadcrumbs-list a:hover,
.hydroke-doc-hero .hydroke-doc-breadcrumbs-list a:focus-visible {
  color: var(--rf-on-dark);
}

.hydroke-doc-hero .hydroke-doc-breadcrumbs-list [aria-current="page"] {
  color: var(--rf-on-dark-muted);
  font-weight: var(--rf-weight-semibold);
}

.hydroke-doc-hero .hydroke-doc-breadcrumbs-sep {
  color: var(--rf-on-dark-muted);
}

/* One 1200px shell. Root padding on main would inset the body and leave
   the full-bleed hero on a different left edge. */
main.hydroke-doc,
main.hydroke-scope-archive {
  margin-top: 0;
}

main.hydroke-doc.has-global-padding,
main.hydroke-scope-archive.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}

.hydroke-doc .hydroke-doc-layout {
  box-sizing: border-box;
}

.hydroke-doc-content-col .wp-block-post-content.rf-prose {
  padding-inline: 0;
  max-inline-size: none;
}

.rf-article-byline {
  align-items: center;
}

.rf-article-byline p,
.rf-article-byline .wp-block-post-author-name,
.rf-article-byline .wp-block-post-date {
  margin: 0;
}

.rf-article-byline a {
  color: var(--rf-on-dark);
  text-decoration: none;
}

.rf-article-byline img {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--rf-radius-pill);
  object-fit: cover;
}

.rf-article-copy {
  display: flex;
  flex-direction: column;
  gap: var(--rf-space-6);
  min-inline-size: 0;
}

@property --rf-prose-column {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.wp-block-post-content.rf-prose,
.editor-styles-wrapper {
  /* 70% of the 1200px article shell. A ch length tracks the heading font
     and the column drifts. This length does not. */
  --rf-prose-column: 52.5rem;
}

.wp-block-post-content.rf-prose {
  box-sizing: border-box;
  max-inline-size: none;
  /* Root padding is for the page shell. This element is already the article
     column, and the extra inset makes the front narrower than the editor. */
  padding-inline: 0;
}

/* A heading's own font used to widen a ch measure past the body. The length
   is resolved on the prose wrapper, then inherited. */
.wp-block-post-content.rf-prose > :is(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .is-root-container > :is(h1, h2, h3, h4, h5, h6) {
  max-width: var(--rf-prose-column);
}

/* Body copy owns the vertical rhythm. A component's margin: 0 must not
   erase the gap, and the previous element stays at 0 so the gap is not doubled. */
.wp-block-post-content.rf-prose > * + * {
  margin-block-start: var(--rf-space-5);
}

.wp-block-post-content.rf-prose > * + :is(h1, h2, h3, h4) {
  margin-block-start: var(--rf-space-6);
}

.rf-article-rail {
  display: flex;
  flex-direction: column;
  gap: var(--rf-space-6);
}

.rf-article-rail .is-style-rf-logo .wp-block-button.btn--primary .wp-block-button__link {
  background-color: var(--rf-white);
  color: var(--rf-green-deep);
  border-radius: var(--rf-radius-pill);
}

.rf-article-close .wp-block-button.btn--cta .wp-block-button__link {
  background-color: var(--rf-orange);
  color: var(--rf-ink-deep);
  border-radius: var(--rf-radius-pill);
}

.rf-article-author {
  align-items: center;
  text-align: center;
}

.rf-article-author img {
  width: 5rem;
  height: 5rem;
  border-radius: var(--rf-radius-pill);
  object-fit: cover;
}

.rf-article-author h2 {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-text-xl);
  font-weight: var(--rf-weight-semibold);
  line-height: var(--rf-leading-snug);
}

.rf-article-author h2 a {
  color: var(--rf-ink-deep);
  text-decoration: none;
}

.rf-article-author .rf-icon-link {
  color: var(--rf-ink);
}

.rf-updated {
  color: var(--rf-ink-muted);
  font-size: var(--rf-text-sm);
}

.rf-updated .rf-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.rf-updated .rf-meta,
.rf-updated .wp-block-post-date {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: var(--rf-weight-bold);
  letter-spacing: var(--rf-tracking-meta);
  text-transform: uppercase;
}

.rf-article-frame {
  display: grid;
  /* Copy is 70% of the shell. The rail keeps a 16rem floor and takes the rest. */
  grid-template-columns: minmax(0, 70%) minmax(16rem, 1fr);
  column-gap: 4.5rem;
  align-items: start;
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
}

.rf-article-frame > :last-child {
  position: sticky;
  top: var(--rf-space-5);
  align-self: start;
}

@media (max-width: 880px) {
  .rf-article-frame {
    grid-template-columns: 1fr;
  }

  .rf-article-frame > :last-child {
    position: static;
  }
}

.rf-back-top {
  position: fixed;
  z-index: 20;
  bottom: 1.25rem;
  left: max(0.75rem, calc((100vw - min(1200px, 100vw - 2rem)) / 2 - 6.5rem));
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--rf-cream-deep);
  border-radius: 50%;
  background: var(--rf-green-logo);
  color: var(--rf-on-dark);
  text-decoration: none;
  visibility: hidden;
}

.rf-back-top.is-visible {
  visibility: visible;
}

.rf-back-top svg {
  width: 1.15rem;
  height: 1.15rem;
}

.rf-back-top:hover {
  background: var(--rf-green-deep);
  color: var(--rf-on-dark);
}

@media (max-width: 767px) {
  .rf-back-top {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.rf-back-top) {
    scroll-behavior: smooth;
  }
}

.site-footer {
  background: var(--rf-green-logo);
  color: var(--rf-on-dark);
  text-align: center;
  padding: var(--rf-space-6) var(--rf-gutter) var(--rf-space-5);
  margin: 0;
}

.site-footer a {
  color: var(--rf-on-dark);
  font-size: var(--rf-text-sm);
  text-decoration: none;
}

.site-footer p {
  margin: var(--rf-space-4) 0 0;
  font-size: var(--rf-text-sm);
}

main.wp-block-group {
  padding-block-end: var(--rf-space-8);
}

@media (max-width: 800px) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header .rf-nav {
    width: 100%;
    overflow-x: auto;
  }
}

/* The overlay menu is the hamburger below 600px. A full-width nav wraps
   that button onto its own row. Keep it beside the logo. */
@media (max-width: 599px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-header .rf-nav {
    width: auto;
    overflow: visible;
  }
}