/* AvoLingo — Blog (bar-blog.md, built to lattice.com/articles and /articles/<post>).
   Loaded after tokens.css / styles.css / site.css on blog pages only
   (blog/build.py writes the <link>). Every size is a token or a rem on the
   fluid root (§1) — no type size changes at a breakpoint; colours come from the
   ramp through theme slots (§3.3).

   Client exclusion: NO green underline anywhere on the blog. §8.5's inline
   link underline is switched off below; links in text are ink + weight with a
   colour change on hover, and cards lift (§8.2) — that is the only card hover. */

.blog-page {
  --blog-sidebar: 11.5rem;               /* ~208px at 1440: no topic/audience label wraps at 961–1440 */
  --blog-ring: 0 0 0 1px var(--rung);              /* the card's own ring (§6 rung 8) */
  --blog-ring-hover: 0 0 0 1px var(--color--grey-600);
  --blog-inner-radius: calc(var(--radius--l) - var(--sp-4));   /* photo inset in a card: concentric, 0.8rem */
  --blog-tap: 44px;                      /* minimum touch target */
  --_theme---blog--ink: var(--color--grey-1000);
  --_theme---blog--text: var(--color--grey-800);
  --_theme---blog--muted: var(--color--grey-600);
  --_theme---blog--faint: var(--color--grey-400);
  --_theme---blog--rule: var(--color--grey-100);
  --_theme---blog--control: var(--color--white);
  --_theme---blog--check: var(--color--brand-600);
  /* Ruling R7b: in-text links join the single green accent family (the same
     brand green as the primary/secondary pair); the client excluded only the
     underline. brand-800 on white 5.8:1; hover/focus brand-1000 on a brand-50 fill. */
  --_theme---blog--link: var(--color--brand-800);
  --_theme---blog--link-hover: var(--color--brand-1000);
}

/* §8.5 off in blog CONTENT (client). Ruling R4c: the exclusion covers the blog's
   own content only — <main> — so the footer renders exactly as on every other
   page. The id in :not() lifts this above styles.css's
   `li a:not(.btn):not(.nav__link):not(.arrow-link)` without !important. */
.blog-page main :is(p, li, blockquote, label) a:not(#blog-no-underline),
.blog-page main :is(p, li, blockquote, label) a:not(#blog-no-underline):hover,
.blog-page main :is(p, li, blockquote, label) a:not(#blog-no-underline):focus-visible {
  background-image: none;
  background-size: auto;
}

/* §9.6 tag, exactly: padding 0.2/0.4rem, radius 1rem (styles.css's .tag uses 3em). */
.blog-page .tag { padding: 0.2rem 0.4rem; border-radius: var(--radius--tag); line-height: 1.3; }

/* Current page in the mobile menu: the same grey-50 fill the nav dropdown
   gives its current item (site.css .nav__dropitem[aria-current]). */
.nav__mobile > a[aria-current] {
  margin-inline: -0.4rem;
  padding-inline: 0.6rem;
  border-radius: var(--radius--s);
  background: var(--color--grey-50);
  color: var(--color--grey-1000);
}

/* ============ Breadcrumb (index + article) ============ */

.blog-crumb ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-8); }
.blog-crumb--start ol { justify-content: flex-start; }
.blog-crumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-body-2xs);
  line-height: 1.3;
  color: var(--_theme---blog--muted);
}
.blog-crumb li + li::before { content: '/'; color: var(--color--grey-200); }
.blog-crumb a { color: var(--_theme---blog--muted); transition: color var(--dur) var(--ease-global); }
.blog-crumb a:hover, .blog-crumb a:focus-visible { color: var(--_theme---blog--ink); }   /* §10.2 */
.blog-crumb [aria-current] { color: var(--_theme---blog--text); }

/* ============ 1 · Index opener + featured band — one plain section ============
   Centred by ruling: bar-blog.md (lattice.com/articles, the client's golden
   standard for the blog) overrides §9.3's left-aligned hero here. Ruling R3:
   the breadcrumb sits above the pill, as in the reference, over §5.4's order.
   One plain section (§5.3): 4rem top and bottom. Every gap in the opener is
   sp-24 (2.4rem, ~43px at 1440), inside the reference's 40–48px. */

.blog-intro { padding-block: var(--section-gap); }
.blog-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }

.blog-announce { margin-top: var(--sp-24); max-width: 100%; text-align: start; }
/* The site's own lime pill with styles.css's .pill__arrow: on hover/focus the
   arrow travels one full arrow width and its circle scales 1.2 (§8.3).
   One line at every width: phones show the short label ("New article"). */
.blog-announce__long { white-space: nowrap; }
.blog-announce__short { display: none; white-space: nowrap; }

.blog-hero__title {
  margin-top: var(--sp-24);
  font-size: var(--fs-headline);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: var(--kern-headline);
  color: var(--_theme---blog--ink);
}
.blog-hero__lede {
  margin-top: var(--sp-24);
  max-width: 34rem;
  font-size: var(--fs-body-l);
  line-height: 1.3;
  color: var(--_theme---blog--text);
  text-wrap: balance;
}

/* ============ Cards — §9.4 + §8.2 ============ */

.bpost {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius--l);
  background: var(--_theme---cards--background);
  color: var(--_theme---blog--text);
  box-shadow: var(--shadow--card);
  transition: var(--transition);
}
.bpost:hover, .bpost:focus-visible {
  box-shadow: var(--shadow--card-large);
  transform: perspective(1200px) translateZ(8px);
  z-index: 1;
}
.bpost:focus-visible { border-radius: var(--radius--l); }

/* The photo is positioned inside its box so its intrinsic size never sizes the
   card: the box's shape comes from aspect-ratio (grid, lead) or the row. */
.bpost__media {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--blog-inner-radius);
  background: var(--color--sand-100);
}
.bpost__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

.bpost .tag { align-self: flex-start; }
.bpost__title {
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--kern-heading);
  color: var(--_theme---blog--ink);
}
.bpost__body { display: flex; flex-direction: column; gap: var(--sp-8); }
.bpost__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
  font-size: var(--fs-body-2xs);
  line-height: 1.3;
  color: var(--_theme---blog--muted);
}

/* ============ 2 · Featured band — 1 large + 3 stacked ============ */

.blog-featured { margin-top: var(--sp-24); }
/* §5.2: asymmetric is the house pattern — the lead takes ~55%. */
.blog-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  grid-template-rows: minmax(25rem, auto);
  gap: var(--sp-12);
  align-items: stretch;
}
/* min-width/height 0: a grid item's automatic minimum would otherwise take the
   aspect-ratio photo's size and stretch the card past its track. */
.blog-featured__grid > *, .blog-featured__stack > * { min-width: 0; min-height: 0; }

/* width:100% + flex:none: the ratio resolves from a definite width. */
/* Desktop: the band has a minimum height; the lead's text takes only what it
   needs (title + a ≤3-line excerpt, no dead band) and the photo fills the rest.
   The stacked column matches the height. */
.bpost--lead .bpost__media { width: 100%; flex: 1 1 auto; min-height: 14rem; }
.bpost__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16);
  padding: var(--sp-8);
}
.bpost__head { display: flex; flex-direction: column; gap: var(--sp-8); }
/* §4.1 h5 (1.2rem / 1.2 / -0.016em): the heading rank nearest the reference's ~25px. */
.bpost--lead .bpost__title { font-size: var(--fs-h5); line-height: 1.2; }
.bpost__excerpt {
  align-self: start;
  padding-top: var(--sp-4);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--_theme---blog--text);
}   /* never clamped: no "…" mid-word anywhere on the index */

.blog-featured__stack { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }   /* = the column gap (§5.2) */
.bpost--row { flex-direction: row; align-items: stretch; gap: var(--sp-12); }
.bpost--row .bpost__media { flex: 0 0 40%; min-height: 6.4rem; }
/* A side-card photo is never wider than 16:9 at any width: an in-flow 16:9
   spacer gives the photo box a minimum height of width / 1.78, and the card's
   stretch can only make it taller (narrower than 16:9), never a wide strip. */
.bpost--row .bpost__media::before { content: ''; display: block; aspect-ratio: 16 / 9; }
.bpost--row .bpost__body { flex: 1 1 auto; min-width: 0; padding-block: var(--sp-8); padding-inline: 0 var(--sp-8); }
/* Stacked cards on desktop: tag + title, centred in the card (no clipped excerpt).
   The excerpt appears in full only where the cards run full-width (≤960). */
.bpost--row .bpost__body { justify-content: center; }
.bpost__excerpt--row { display: none; padding-top: 0; }

/* ============ 3 · Library — the site's .box panel (§5.3), header row, sidebar + grid ============
   The section carries styles.css's own .box class: sand-100, margin-inline
   0.8rem, radius 2.4rem, 5.6rem / 6.4rem padding (4rem both at ≤960) — exactly
   the homepage panel. Nothing here overrides it. */

/* The panel's top padding steps down to 2.4rem so the separator row is the
   first thing in the tint (~64px to the label), not ~124px of empty band. */
.blog-library.box { padding-top: var(--sp-24); }
.blog-library__head {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-16);
  /* reserved = the .btn's own height (0.9rem × 1.2 line + 2 × 0.72rem + 2px border),
     so the reset appearing never moves the grid */
  min-height: max(var(--blog-tap), calc(var(--fs-body-s) * 1.2 + 1.44rem + 2px));
  margin-bottom: var(--sp-16);
}
/* §9.10 separator label (verbatim mechanism): the label, then a hairline in
   currentcolor at 24% that runs to the count. `.is-left` drops the leading rule. */
.blog-library__head { align-items: center; }
.label {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  color: var(--_theme---blog--text);
}
.label.is-separator { display: flex; align-items: center; gap: var(--sp-12); flex: 1 1 0; min-width: 0; }
.label.is-separator::before, .label.is-separator::after {
  content: ''; position: relative; width: 100%; height: 1px;
  background-color: currentcolor; opacity: 0.24; flex: 1 1 0;
}
.label.is-separator.is-left::before { display: none; }
.blog-library__label { white-space: nowrap; }
.blog-library__status { display: flex; align-items: center; gap: var(--sp-12); }
/* Phones: label + rule and the count share line 1; "Reset all filters" takes
   line 2 at full width (§10.3), so the rule never shrinks below ~a third. */
@media (max-width: 640px) {
  .blog-library__head { flex-wrap: wrap; }
  .blog-library__status { display: contents; }
  .blog-library__head .label.blog-library__label { flex: 1 1 48%; }
  .blog-library__head .blog-reset { flex: 1 1 100%; width: 100%; }   /* §10.3: full width at ≤640, own line */
}
.blog-library__layout {
  display: grid;
  grid-template-columns: var(--blog-sidebar) minmax(0, 1fr);
  gap: var(--sp-24);
  align-items: start;
}

/* Sidebar */
.blog-filter {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-12));
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  font-size: var(--fs-body-xs);
}
.no-js .blog-filter { display: none; }
.no-js .blog-library__layout { grid-template-columns: minmax(0, 1fr); }

.blog-search { position: relative; }
.blog-search__input {
  width: 100%;
  min-height: 2.4rem;
  padding-block: 0.6rem;
  padding-inline: 0.8rem 2.2rem;
  border: 0;
  border-radius: var(--radius--m);
  background: var(--_theme---blog--control);
  box-shadow: var(--blog-ring);
  font-size: var(--fs-body-xs);
  color: var(--_theme---blog--ink);
  transition: box-shadow var(--dur) var(--ease-global);
  -webkit-appearance: none;
  appearance: none;
}
.blog-search__input::placeholder { color: var(--color--grey-600); opacity: 1; }   /* 4.59:1 on white */
.blog-search__input::-webkit-search-cancel-button { cursor: pointer; }
.blog-search__input:hover, .blog-search__input:focus { box-shadow: var(--blog-ring-hover); }
.blog-search__icon {
  position: absolute;
  inset-inline-end: 0.8rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  transform: translateY(-50%);
  color: var(--color--grey-800);   /* the glyph identifies the field: 8.1:1 */
  pointer-events: none;
}

/* Ruling R14 (sidebar, replaces R7/h there): the search field and the
   accordions follow the reference — white fill, the card's own 1px ring
   (rung 8 of --shadow--card: grey-50), ONE radius (--radius--m, 0.8rem); the
   text, glyph and chevrons carry the identification (≥4.5:1 / grey-800).
   Hover = focus-visible: the ring darkens to grey-600; the blue focus ring stays.
   ONE accordion component for the blog (§9.9): index Topics / Audience and the
   article's "On this page" on phones. --radius--m container; the trigger label
   0.8rem / 500 / grey-1000; hover fill = focus-visible (§10.2); the open state
   is pastel-filled in the NEUTRAL grey family (grey-50 surface, grey-1000 ink,
   hover grey-100) so green stays on tags, focus and the primary button. */
.blog-acc {
  border-radius: var(--radius--m);
  background: var(--_theme---blog--control);
  box-shadow: var(--blog-ring);
  transition: box-shadow var(--dur) var(--ease-global);
}
/* Closed or open, hover = focus-visible also darkens the ring to grey-600. */
.blog-acc:has(> .blog-acc__summary:hover), .blog-acc:has(> .blog-acc__summary:focus-visible) { box-shadow: var(--blog-ring-hover); }
.blog-acc > .blog-acc__summary { border-radius: var(--radius--m); }
.blog-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: 2.4rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius--l);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--_theme---blog--ink);
  transition: background-color var(--dur) var(--ease-global);
}
.blog-acc__summary:hover, .blog-acc__summary:focus-visible { background: var(--color--grey-50); }
.blog-acc[open] > .blog-acc__summary {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  background: var(--color--grey-50);
  color: var(--color--grey-1000);
}
.blog-acc[open] > .blog-acc__summary .blog-acc__chev { color: var(--color--grey-800); }
.blog-acc[open] > .blog-acc__summary:hover,
.blog-acc[open] > .blog-acc__summary:focus-visible { background: var(--color--grey-100); color: var(--color--grey-1000); }
.blog-acc__summary::-webkit-details-marker { display: none; }
.blog-acc__chev { width: 0.6rem; height: 0.6rem; flex: none; color: var(--color--grey-800); transition: transform var(--dur) var(--ease-global); }
.blog-acc[open] .blog-acc__chev { transform: rotate(180deg); }
.blog-acc__body {
  margin: 0;
  padding: var(--sp-8) 0.8rem 0.8rem;
  border: 0;
  border-top: 1px solid var(--_theme---blog--rule);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* A long label may wrap: its second line hangs under the label text (the label
   is its own flex item), and the box and the count stay level with line 1. */
.blog-check {
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
  gap: var(--sp-8);
  padding-block: 0.2rem;
  cursor: pointer;
  color: var(--_theme---blog--text);
  transition: color var(--dur) var(--ease-global);
}
.blog-check:hover { color: var(--_theme---blog--ink); }
.blog-check input {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  margin: calc(var(--fs-body-xs) * 0.15) 0 0;   /* centred on the label's first line (0.8rem × 1.3) */
  border: 1px solid var(--color--grey-600);   /* 4.6:1 on white — WCAG 1.4.11 */
  border-radius: var(--radius--xs);
  background: var(--color--white) center / 70% no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-global), border-color var(--dur) var(--ease-global);
}
/* §10.2: keyboard focus gets the same change as hover (box border grey-1000,
   label ink grey-1000), plus the accent ring. */
.blog-check:hover input:not(:disabled):not(:checked),
.blog-check input:focus-visible:not(:checked) { border-color: var(--color--grey-1000); }
.blog-check:has(input:focus-visible) { color: var(--_theme---blog--ink); }
.blog-check input:checked {
  border-color: var(--_theme---blog--check);
  background-color: var(--_theme---blog--check);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* §10.1: the same 2px accent ring with a 3px offset as every other control. */
.blog-check input:focus-visible { outline: 2px solid var(--color--accent); outline-offset: 3px; }
.blog-check__label { flex: 1 1 auto; min-width: 0; }
.blog-check__count { flex: none; line-height: calc(var(--fs-body-xs) * 1.3); align-self: flex-start; font-size: var(--fs-body-2xs); color: var(--_theme---blog--muted); font-variant-numeric: tabular-nums; }
.blog-check.is-empty { color: var(--_theme---blog--faint); cursor: default; }
.blog-check.is-empty .blog-check__count { color: var(--_theme---blog--faint); }
.blog-check.is-empty input { border-color: var(--color--grey-100); cursor: default; }

/* grey-800 on sand-100: well over 4.5:1. */
/* Both ends of the separator row sit on the §4.1 label row (0.7rem / 500 / 1.3). */
.blog-results { font-size: var(--fs-label); font-weight: 500; line-height: 1.3; color: var(--_theme---blog--text); white-space: nowrap; }

/* ONE button: "Reset all filters" and "Load more" are the site's .btn (§9.5
   geometry: 0.72/1.44rem padding, 0.72rem radius, 0.9rem / 500) in a neutral
   variant — rulings R6/R7: a neutral bordered control, green stays on tags,
   focus and the primary/secondary pair. White at rest and on hover; the cue is
   the border (grey-600 → grey-800: 4.25:1 → 7.52:1 on sand-100) and ink. */
.btn.btn--neutral {
  min-height: var(--blog-tap);
  border: 1px solid var(--color--grey-600);
  background: var(--color--white);
  color: var(--color--grey-800);
  transition: border-color 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease);
}
.btn.btn--neutral:hover, .btn.btn--neutral:focus-visible {
  border-color: var(--color--grey-800);
  background: var(--color--white);
  color: var(--color--grey-1000);
}
.btn.btn--neutral:active { transform: translateY(0.08em); }
.btn.btn--neutral[hidden] { display: none; }
.blog-reset svg { width: 0.8em; height: 0.8em; flex: none; }

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-12);
}
.blog-grid[hidden], .blog-grid__item[hidden] { display: none; }
.blog-grid__item { display: flex; min-width: 0; }
.bpost--grid { flex: 1 1 auto; min-width: 0; }
.bpost--grid .bpost__media { width: 100%; flex: none; aspect-ratio: 16 / 9; }
.bpost--grid .bpost__body { padding: var(--sp-8) var(--sp-8) var(--sp-12); }

.blog-empty {
  padding: var(--sp-40) var(--sp-16);
  border-radius: var(--radius--l);
  background: var(--_theme---cards--background);
  box-shadow: var(--shadow--card-xsmall);
  text-align: center;
}
.blog-empty[hidden] { display: none; }
.blog-empty__title { font-size: var(--fs-h6); font-weight: 500; color: var(--_theme---blog--ink); }
.blog-empty__body { margin-top: var(--sp-4); font-size: var(--fs-body-s); color: var(--_theme---blog--text); }

/* "Load more": the neutral .btn above, alone (ruling R2: a utility, not a CTA pair). */
.blog-more { display: flex; justify-content: center; margin-top: var(--sp-24); }
.blog-more:not(:has(> :not([hidden]))) { display: none; }
.blog-more__btn svg { width: 0.8em; height: 0.8em; transition: transform 300ms var(--ease-spring); }
/* §8.3: the arrow travels its full size, on the spring, like every blog arrow. */
.blog-more__btn:hover svg, .blog-more__btn:focus-visible svg { transform: translateY(100%); }
.blog-more__btn { overflow: hidden; }

/* ============ 4 · Article page — split hero + three columns ============ */

.article-hero { padding-block: var(--sp-40) 0; }   /* §9.3: 4rem top; the body section's own 4rem follows */
.article-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);   /* §5.2's asymmetric house split */
  gap: var(--sp-20);   /* §9.3 hero grid gap, 2.0rem */
  align-items: stretch;  /* copy column = photo height: top level with its top, author row on its bottom */
}
/* Ruling R4a: the topic is the standard §9.6 green tag (one tag style on the
   blog), linking to the index filtered by that topic. */
/* §4.3 rhythm: crumb → tag 1.2rem (as p + .pill-link), tag → H1 0.8rem (the
   label → heading pair), H1 → author row 1.6rem (as .quote + .author). */
.article-hero__tag { margin-top: var(--sp-12); transition: background-color var(--dur) var(--ease-global); }
.article-hero__tag:hover, .article-hero__tag:focus-visible { background: var(--color--green-200); }
/* §4.1 h2: 2.6rem (46.9px at 1440) / 1.0 / -0.024em */
.article-hero__title {
  margin-top: var(--sp-8);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: var(--kern-headline);
  color: var(--_theme---blog--ink);
}
.article-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.article-author { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-16); }
@media (min-width: 961px) { .article-author { margin-top: auto; padding-top: var(--sp-16); } }
/* The team byline: AVO, Isabelle and Brad as an overlapping row of face crops. */
.article-author__avatars { display: flex; flex: none; }
.article-author__avatars img {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius--circle);   /* §7: avatars are circles */
  background: var(--color--white);
  box-shadow: 0 0 0 2px var(--color--white);   /* separates the overlapping faces */
  outline: 1px solid var(--_theme---blog--rule);   /* white backdrops still read as circles */
  outline-offset: -1px;
}
.article-author__avatars img + img { margin-inline-start: -0.7rem; }
.article-author__text { display: flex; flex-direction: column; gap: 0.15rem; }
.article-author__name { font-size: var(--fs-body-s); font-weight: 500; color: var(--_theme---blog--ink); }
.article-author__meta { display: flex; flex-wrap: wrap; gap: 0 0.3em; font-size: var(--fs-body-xs); color: var(--_theme---blog--muted); }

.article-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 1.9;   /* ≤960 overrides below; ≥961: see the media query after this rule */
  overflow: hidden;
  border-radius: var(--radius--l);
  background: var(--color--sand-100);
}
.article-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* ≥961: the photo is exactly its track's width (the 46/54 split holds) and its
   height follows the copy column (author row on the photo's bottom edge), with
   a floor so short titles keep a good photo. object-fit: cover + each photo's
   focal point (content JSON image_position) keep faces in frame. Never an
   aspect-ratio here: with a stretched height it would widen the photo past
   its track. */
@media (min-width: 961px) {
  .article-hero__media { aspect-ratio: auto; width: 100%; min-width: 0; min-height: 19rem; }
}

.article-layout {
  display: grid;
  grid-template-columns: 10rem minmax(0, 38rem) 16rem;   /* ~180 / ~686 / ~289px at 1440 */
  justify-content: space-between;
  gap: var(--sp-32) var(--sp-24);   /* 10 + 38 + 16 + 2 × 2.4 = 68.8rem: exactly the container */
  align-items: start;
  padding-block: var(--section-gap);   /* plain section, §5.3: 4rem */
}

/* Table of contents. It IS the blog accordion (.blog-acc); above 960 it is
   restyled as a sticky caption list (no box, label as an uppercase caption). */
.article-toc__list a { display: block; }
@media (min-width: 961px) {
  .article-toc.blog-acc { position: sticky; top: calc(var(--nav-h) + var(--sp-24)); border: 0; border-radius: 0; background: none; box-shadow: none; }
  .article-toc .blog-acc__summary,
  .article-toc .blog-acc__summary:hover,
  .article-toc[open] > .blog-acc__summary,
  .article-toc[open] > .blog-acc__summary:hover {
    min-height: 0;
    padding: 0 0 var(--sp-8);
    border-radius: 0;
    border-bottom: 1px solid var(--_theme---blog--rule);
    background: none;
    cursor: default;
    font-size: var(--fs-label);
    letter-spacing: 0;   /* §4.1 label row: 0.7rem / 500 / 1.3 / tracking 0 — not the tag */
    text-transform: none;
    color: var(--_theme---blog--muted);
  }
  .article-toc .blog-acc__chev { display: none; }
  /* A plain label here: not a tab stop (js/blog.js sets tabindex -1), not clickable. */
  .article-toc .blog-acc__summary { pointer-events: none; }
  .article-toc .blog-acc__summary:focus, .article-toc .blog-acc__summary:focus-visible { outline: none; }
}
.article-toc__list { margin-top: var(--sp-8); display: flex; flex-direction: column; }
.article-toc__list a {
  display: block;
  padding: 0.35rem 0.4rem 0.35rem 0.7rem;
  border-inline-start: 2px solid var(--_theme---blog--rule);
  border-start-end-radius: var(--radius--s);
  border-end-end-radius: var(--radius--s);
  font-size: var(--fs-body-xs);
  line-height: 1.3;
  color: var(--_theme---blog--muted);
  transition: color var(--dur) var(--ease-global), border-color var(--dur) var(--ease-global), background-color var(--dur) var(--ease-global);
}
/* §10.2: every TOC link, the current one included, gets the same hover and
   focus-visible change: ink colour + a grey-50 fill (radius-s on the right; the
   left bar stays square). */
.article-toc__list a:hover, .article-toc__list a:focus-visible {
  color: var(--_theme---blog--ink);
  background-color: var(--color--grey-50);
}
.article-toc__list a[aria-current] { color: var(--_theme---blog--ink); font-weight: 500; border-color: var(--_theme---blog--ink); }

/* Text column — rich text §4.1: 1rem / 1.4; H2 = h4 rank (1.6rem ≈ 29px) */
.article-body {
  min-width: 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-prose);
  color: var(--_theme---blog--text);
}
.article-body > * + * { margin-top: var(--sp-12); }
.article-body__lede { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--_theme---blog--text); }
.article-body h2 {
  margin-top: var(--sp-32);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--kern-heading);
  color: var(--_theme---blog--ink);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-24));
}
.article-body ul, .article-body ol { padding-inline-start: 1.2em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--_theme---blog--muted); }
.article-body li + li { margin-top: var(--sp-4); }
.article-body strong { font-weight: 500; color: var(--_theme---blog--ink); }
/* In-text links: brand-800 at 500 (distinct from grey-1000 <strong> lead-ins and
   grey-800 body text, with no underline); hover = focus-visible: brand-1000 on a
   grey-50 fill. Same treatment for the try-card link and "Back to all articles". */
.article-body p a, .article-body li a, .try-card__link, .article-back {
  font-weight: 500;
  color: var(--_theme---blog--link);
  border-radius: var(--radius--2xs);
  transition: color var(--dur) var(--ease-global), background-color var(--dur) var(--ease-global), box-shadow var(--dur) var(--ease-global);
}
.blog-page main .article-body p a:not(#blog-no-underline):hover, .blog-page main .article-body li a:not(#blog-no-underline):hover,
.blog-page main .article-body p a:not(#blog-no-underline):focus-visible, .blog-page main .article-body li a:not(#blog-no-underline):focus-visible,
.try-card__link:hover, .try-card__link:focus-visible,
.article-back:hover, .article-back:focus-visible {
  color: var(--_theme---blog--link-hover);
  background-color: var(--color--brand-50);
  box-shadow: 0 0 0 0.15em var(--color--brand-50);   /* the fill reaches a hair past the glyphs */
}

/* Sub-heading (### in the Markdown): one rank below the section H2, not in the TOC. */
.article-body h3 {
  margin-top: var(--sp-24);
  font-size: var(--fs-h6, 1.2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--kern-heading);
  color: var(--_theme---blog--ink);
}
.article-body h3 + * { margin-top: var(--sp-8); }

/* Summary box ("> " lines at the top of an article): the short answer that
   search engines and AI assistants quote. A tinted panel, no border. */
.article-body > .article-summary {
  margin-top: var(--sp-24);
  padding: var(--sp-20) var(--sp-24);
  border-radius: var(--radius--m);
  background: var(--color--grey-50);
  color: var(--_theme---blog--text);
}
.article-summary > * + * { margin-top: var(--sp-8); }
.article-summary ul, .article-summary ol { padding-inline-start: 1.2em; }
.article-summary ul { list-style: disc; }

/* Tables (rubrics, comparisons): the panel scrolls sideways on phones instead of
   squeezing the columns. Header row and first column are the reading anchors. */
.article-body > .article-table {
  margin-top: var(--sp-20);
  overflow-x: auto;
  border: 1px solid var(--_theme---blog--rule);
  border-radius: var(--radius--m);
  -webkit-overflow-scrolling: touch;
}
.article-table:focus-visible { outline: 2px solid var(--color--brand-600); outline-offset: 2px; }
.article-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-body-s); line-height: 1.45; }
.article-table th, .article-table td { padding: var(--sp-12) var(--sp-16); text-align: start; vertical-align: top; }
.article-table thead th { background: var(--color--grey-50); font-weight: 500; color: var(--_theme---blog--ink); }
.article-table tbody th { font-weight: 500; color: var(--_theme---blog--ink); }
.article-table tbody tr + tr > * { border-top: 1px solid var(--_theme---blog--rule); }
.article-table a { font-weight: 500; color: var(--_theme---blog--link); }

/* How the article was made (AI use note), under the CTA. */
.article-body > .article-note {
  margin-top: var(--sp-24);
  font-size: var(--fs-label, 0.8125rem);
  line-height: var(--lh-body);
  color: var(--_theme---blog--muted);
}

/* Ruling R7: the closing CTA's primary + secondary pair is the §9.5 button pair;
   its brand-green secondary belongs to the green set (tags, focus, the
   primary/secondary pair, the checked checkbox). */
/* A brand-50 panel with Isabelle on the right: an upper-body
   cut-out that stands on the panel's bottom edge and lifts its head above the
   top edge, so the banner reads as the end of the article. */
.article-body > .article-cta {
  --cta-figure-h: 14rem;
  --cta-figure-lift: 2.4rem;   /* how far the head rises above the panel */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-16);
  margin-top: calc(var(--sp-40) + var(--cta-figure-lift));
  padding: var(--card-pad);
  border-radius: var(--radius--l);
  background: var(--color--brand-50);
}
.article-cta__copy { align-self: center; }
.article-cta__figure {
  align-self: end;
  display: block;
  width: auto;
  height: var(--cta-figure-h);
  margin-block: calc(-1 * var(--cta-figure-lift)) calc(-1 * var(--card-pad));
  margin-inline-end: calc(var(--sp-8) - var(--card-pad) * 0.25);
  pointer-events: none;
  user-select: none;
}
.article-body .article-cta__title {
  margin: 0;
  font-size: var(--fs-h5);
  line-height: 1.2;
  letter-spacing: var(--kern-heading);
  scroll-margin-top: 0;
}
.article-cta__body { margin-top: var(--sp-8); font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--_theme---blog--text); }
.article-cta__buttons { margin-top: var(--sp-16); }

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--blog-tap);
  /* At rest the arrow sits on the text column's left edge (no leading padding,
     no negative offset), so the hover fill and ring never enter the gutter. */
  padding-inline: 0 0.3em;
  font-size: var(--fs-body-s);
}
.article-body > .article-back { margin-top: var(--sp-16); }

/* The site's clipped arrow swap (as .acircle on the pills): two glyphs in one
   fixed box with overflow hidden. On hover / focus-visible (§10.2) the first
   travels out one full width (§8.3, spring) and the second slides in from the
   other side, so the arrow never leaves its own box. */
.arrow-swap {
  display: inline-grid;
  flex: none;
  width: 0.85em;
  height: 0.85em;
  overflow: hidden;
}
.arrow-swap svg { grid-area: 1 / 1; width: 100%; height: 100%; transition: transform 300ms var(--ease-spring); }
.arrow-swap--next svg:nth-child(2) { transform: translateX(-110%); }
.arrow-swap--back svg:nth-child(2) { transform: translateX(110%); }
a:hover > .arrow-swap--next svg:nth-child(1), a:focus-visible > .arrow-swap--next svg:nth-child(1) { transform: translateX(110%); }
a:hover > .arrow-swap--back svg:nth-child(1), a:focus-visible > .arrow-swap--back svg:nth-child(1) { transform: translateX(-110%); }
a:hover > .arrow-swap svg:nth-child(2), a:focus-visible > .arrow-swap svg:nth-child(2) { transform: translateX(0); }
[dir="rtl"] .arrow-swap { transform: scaleX(-1); }
/* The back link has its own 0.3em padding for the fill: no outer spread, so the
   fill starts exactly on the text column's edge and never enters the gutter. */
.article-back:hover, .article-back:focus-visible { box-shadow: none; }

/* "Try this in AvoLingo" — one per article, mid-body, ONE treatment on every
   article: the site's sand-100 panel surface, grey-1000 / grey-800 type (no
   brown, no per-article tint), and the link styled like the blog's other
   in-content links (ink + weight, colour on hover, no underline). The
   screenshot is the same unaltered file the homepage shows. */
.article-body > .try-card { margin-block: var(--sp-32); }
.try-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  align-items: end;
  column-gap: var(--sp-20);
  padding: var(--card-pad) var(--card-pad) 0;   /* same as .article-cta: 1.6rem, 1.2rem at ≤640 (§10.3) */
  overflow: hidden;                              /* the card's rounded bottom crops the screen */
  border-radius: var(--radius--l);
  background: var(--_theme---panels--background);
}
.try-card__copy { align-self: center; padding-bottom: var(--card-pad); }
.try-card__eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;   /* §4.1 label row: 0.7rem / 500 / 1.3 / tracking 0 — not the tag */
  text-transform: none;
  color: var(--_theme---blog--text);
}
.try-card__text {
  margin-top: var(--sp-8);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--kern-heading);
  color: var(--_theme---blog--ink);
}
/* The trailing padding holds the arrow's full travel (§8.3, one arrow width):
   at hover the arrow stays inside the link's own fill. */
.try-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--sp-16);
  padding-inline-end: 0.15em;
  font-size: var(--fs-body-s);
}
/* The app screen sits straight on the panel: a window onto the screen only
   (no phone bezel, no studio ground), top corners rounded like a phone screen,
   running off the panel's bottom edge. Same top inset on every article.
   The image is the unaltered file; the window crops it (build.py crop_style). */
.try-card__media {
  position: relative;
  margin: 0;
  overflow: hidden;   /* aspect-ratio is set inline per screen (build.py crop_style) */
  border-radius: var(--radius--xl) var(--radius--xl) 0 0;
  background: var(--color--white);
  box-shadow: var(--shadow--card-xsmall);
}
.try-card__media img {
  position: absolute;
  top: 0;
  left: var(--img-x, 0%);
  width: var(--img-w, 100%);
  max-width: none;
  height: auto;
  margin-top: var(--img-y, 0%);
}

/* Related rail */
.article-rail__title {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--_theme---blog--rule);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;   /* §4.1 label row: 0.7rem / 500 / 1.3 / tracking 0 — not the tag */
  text-transform: none;
  color: var(--_theme---blog--muted);
}
.article-rail__cards { display: grid; gap: var(--sp-12); margin-top: var(--sp-12); }
.bpost--mini .bpost__media { width: 100%; flex: none; aspect-ratio: 16 / 9; }
.bpost--mini .bpost__body { padding: var(--sp-8) var(--sp-8) var(--sp-12); }
.bpost--mini .bpost__title { font-size: var(--fs-h6); }   /* §4.1 h6, wraps freely */

/* ============ Hangul (§4.1.2) and right-to-left ============ */

/* Ruling R-L1: every blog text style follows the site's per-language rules
   (§4.1.2 for Hangul; css/i18n.css, generated from the ko rules, for ja).
   Display ranks: 1.2 / -0.016em. Body ranks (ledes, excerpts, card copy): 1.7. */
:is(:lang(ko), :lang(ja)) :is(.blog-hero__title, .bpost__title, .article-hero__title, .article-body h2,
  .article-cta__title, .try-card__text, .blog-empty__title) {
  line-height: var(--lh-heading);
  letter-spacing: var(--kern-heading);
}
:is(:lang(ko), :lang(ja)) :is(.blog-hero__lede, .bpost__excerpt, .article-body, .article-body__lede,
  .article-cta__body, .blog-empty__body) { line-height: var(--lh-ko-body); }

/* Vietnamese: stacked diacritics (ngũ, tuyến) need taller display lines than the
   0.9–1.2 Latin leading; i18n.css's 1.12 still let the 2.6rem title's ink
   overlap, so the blog's display ranks use 1.24 (measured on rendered ink). */
:lang(vi) :is(.blog-hero__title, .bpost__title, .article-hero__title, .article-body h2,
  .article-cta__title, .try-card__text, .blog-empty__title) { line-height: 1.24; }
/* Accented capitals (Ü, İ, É, Ç) under a descender touched at the 1.0 title
   leading in German (3.6px ink overlap at 375); the same small lift for the
   other Latin languages with capital diacritics. */
:is(:lang(de), :lang(tr), :lang(fr), :lang(es)) .article-hero__title { line-height: 1.08; }

/* German: hyphenate body copy only (as i18n.css does for p/li); never the
   display text, ledes, excerpts or the narrow table of contents. */
:lang(de) :is(.blog-hero__lede, .article-body__lede, .bpost__excerpt, .bpost__title, .article-hero__title,
  .article-body h2, .article-toc__list, .article-toc__list li, .article-toc__list a, .blog-check,
  .blog-check__label, .try-card__text, .article-cta__title, .article-cta__body) { hyphens: manual; }
:lang(ko) .blog { word-break: keep-all; }
/* Japanese display text: blog/build.py puts BudouX <wbr> between phrases in
   every title, lede, excerpt, label, button and TOC entry; css/i18n.css keeps
   headings to those points and so does this rule for the rest. */
:lang(ja) .blog :is(.blog-hero__lede, .article-body__lede, .bpost__excerpt, .blog-check__label,
  .article-toc__list a, .try-card__text, .article-cta__title, .blog-empty__title) { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* Ruling R-L2: Japanese body copy uses standard Japanese line breaking — any
   character, with kinsoku (line-break: strict) — not phrase breaks, so the
   right edge stays even. */
:lang(ja) .article-body :is(p:not(.article-body__lede):not(.try-card__text):not(.try-card__eyebrow), li) { word-break: normal; line-break: strict; overflow-wrap: normal; }
/* Arabic: taller lines than the 0.9–1.2 Latin display leading, as css/i18n.css
   gives the site's Arabic headings (1.3) and body copy (1.7). */
/* i18n.css's 1.3 still let hamza and the dots above/below touch the next line
   (up to 3px of ink overlap measured on the blog's titles), so 1.4. */
:lang(ar) :is(.blog-hero__title, .bpost__title, .article-hero__title, .article-body h2, .article-cta__title, .try-card__text) { line-height: 1.4; }
:lang(ar) :is(.blog-hero__lede, .bpost__excerpt, .article-body, .article-body__lede, .article-cta__body) { line-height: 1.7; }

/* ---- Right-to-left (ar) ---- */
/* Arabic small text (tags): no uppercase or tracking (i18n.css), and one step up
   in size (0.6rem, §9.6's nested-tag size) so the joined letters stay legible. */
:lang(ar) .tag { text-transform: none; font-size: 0.6rem; }
/* The "+n" counts are numbers: isolate them so RTL keeps "+1", not "1+". */
.blog-check__count { unicode-bidi: isolate; direction: ltr; }
/* The announce pill: the text sits at the start (right), the arrow circle at
   the end (left) pointing left, and its hover travel runs left too (the
   container is mirrored, so styles.css's translateX(100%) on the glyph moves
   it toward the left). */
[dir="rtl"] .blog-announce { padding: 0.4em 1.2em 0.4em 0.4em; }
[dir="rtl"] .blog-announce .pill__arrow { transform: scaleX(-1); }
[dir="rtl"] a.blog-announce:hover .pill__arrow,
[dir="rtl"] a.blog-announce:focus-visible .pill__arrow { transform: scale(-1.2, 1.2); }
/* Search: the magnifier at the inline start (right), text after it. */
[dir="rtl"] .blog-search__icon { inset-inline-end: auto; inset-inline-start: 0.8rem; }
[dir="rtl"] .blog-search__input { padding-inline: 2.2rem 0.8rem; }
/* i18n.css mirrors every .btn svg; "Load more" points down, so undo that and
   keep its downward travel. */
[dir="rtl"] .btn.blog-more__btn svg { transform: none; }
[dir="rtl"] .btn.blog-more__btn:hover svg,
[dir="rtl"] .btn.blog-more__btn:focus-visible svg { transform: translateY(100%); }

/* ============ Responsive — §10.3 (layout only; no type-size changes) ============ */

@media (max-width: 1080px) {
  .blog-page { --blog-sidebar: 11.5rem; }
  .bpost__foot { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }

  /* Article: the related rail drops under the text. */
  .article-layout { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-24) var(--sp-32); }
  .article-rail { grid-column: 2; }
  .article-rail__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .blog-featured__grid { grid-template-columns: minmax(0, 1fr); }
  .blog-featured__grid { grid-template-rows: none; }
  .blog-featured__stack { grid-template-rows: none; grid-auto-rows: 1fr; }   /* equal heights */
  .bpost__excerpt--row { display: block; }
  .bpost--lead .bpost__media { flex: none; min-height: 0; aspect-ratio: 1.9; }

  /* The sidebar folds above the grid: search across the top, the two
     accordions side by side, the count and reset under them. */
  .blog-library__layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .blog-filter {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--sp-8);
  }
  .blog-search { grid-column: 1 / -1; }
  /* Touch layouts: ≥44px targets for the search field and every accordion trigger. */
  .blog-search__input, .blog-acc__summary { min-height: var(--blog-tap); }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpost--row .bpost__media { flex-basis: 36%; }
}

@media (max-width: 960px) {
  /* §10.3: at ≤960, with the site's heroes and nav, the article goes to one
     column; the table of contents becomes a folding block above the text. */
  /* Hero and body share one centred column, so their left edges line up. */
  .article-hero__grid { grid-template-columns: minmax(0, 43rem); justify-content: center; gap: var(--sp-24); }
  .article-hero__media { aspect-ratio: 16 / 9; }
  /* One column, capped at the desktop text measure (~690px) and centred. */
  .article-layout { grid-template-columns: minmax(0, 43rem); justify-content: center; }
  .article-rail { grid-column: auto; }
  .article-toc .blog-acc__summary { min-height: var(--blog-tap); }
  .article-cta .btn { min-height: var(--blog-tap); }
  .article-toc__list { margin: 0; padding: var(--sp-4) 0.8rem 0.8rem; border-top: 1px solid var(--_theme---blog--rule); }
  .article-toc__list a { padding-block: 0.55rem; }
}

@media (max-width: 640px) {
  .bpost--lead .bpost__foot { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .bpost--lead .bpost__media { aspect-ratio: 4 / 3; }
  .bpost--row .bpost__media { min-height: 5.6rem; flex-basis: 40%; }
  .bpost__excerpt--row { display: none; }
  .blog-announce__long { display: none; }
  .blog-announce__short { display: inline; }
  .blog-filter { grid-template-columns: minmax(0, 1fr); }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-more__btn { width: 100%; }
  /* Phones: the panel runs full width so its content keeps the page gutter
     (~18px) inside it and the cards line up with the featured cards above. */
  .blog-library.box { margin-inline: 0; border-radius: 0; }   /* edge to edge: square corners */
  .article-rail__cards { grid-template-columns: minmax(0, 1fr); }
  .try-card { grid-template-columns: minmax(0, 1fr); }
  .try-card__copy { padding-bottom: var(--sp-16); }
  .try-card__media { width: min(100%, 14rem); justify-self: center; }
  .article-cta .btn { white-space: normal; }
  /* Phones: the character peeks over the panel from behind it. The panel is
     drawn by ::before, starting --cta-peek down, so it covers the figure's
     lower half; the copy then runs the full width of the panel. */
  .article-body > .article-cta {
    --cta-peek: 7rem;   /* head, shoulders and the gesturing hand stay above the panel */
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--sp-40);
    padding-top: calc(var(--cta-peek) + var(--card-pad));
    background: none;
  }
  .article-body > .article-cta::before {
    content: "";
    position: absolute;
    inset: var(--cta-peek) 0 0;
    z-index: -1;
    border-radius: var(--radius--l);
    background: var(--color--brand-50);
  }
  .article-cta__figure {
    position: absolute;
    top: 0;
    inset-inline-end: var(--card-pad);
    z-index: -2;
    height: 10rem;
    margin: 0;
  }
}

/* Reduced motion: styles.css §10.4 makes every transition instant; hover and
   focus still change state (the lift snaps instead of easing). */

/* Wide variant for dashboard screenshots (screens with "wide": true): the copy on
   top, the screenshot below at the card's full width, still cropped by the
   card's rounded bottom. */
.try-card--wide { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
.try-card--wide .try-card__media { width: 100%; justify-self: stretch; border-radius: var(--radius--m) var(--radius--m) 0 0; }
.try-card--wide .try-card__copy { padding-bottom: var(--sp-16); }