/* ==========================================================================
   RESEARCH — the editorial surface.

   Ported from the LensBI prototype, where the layout was built out of Tailwind
   utilities. What survived the port is the language, not the classes: hairline
   rules instead of shadows, one accent used sparingly, a long measure, generous
   leading, and a display serif that appears only at the sizes it is good at.

   The rule the whole sheet obeys: an editorial page is mostly type, so
   everything that is not type stays out of its way. There is almost no colour
   here and almost no shadow — the structure is carried by 1px lines and
   whitespace, which is why it reads as considered rather than decorated.

   Colours come from tokens.css. Nothing in this file invents one.
   ========================================================================== */

.ka-research {
  background: hsl(var(--ka-background));
  color: hsl(var(--ka-foreground));
  font-family: var(--ka-font-body);
  font-size: 1rem;
  line-height: 1.6;
  padding-bottom: clamp(64px, 9vw, 112px);
}

.ka-research__shell {
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  max-width: 1120px;
}
.ka-research__shell--narrow { max-width: 760px; }
.ka-research__shell--article { max-width: 820px; }
.ka-research__shell--wide { max-width: 1180px; }

/* Clear of the fixed application nav. */
.ka-research__top { padding-top: clamp(104px, 12vw, 152px); }

.ka-research__display,
.ka-research h1,
.ka-research h2,
.ka-research h3 {
  font-family: var(--ka-font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  margin: 0;
}

/* The eyebrow. Small, wide-tracked, accent-coloured — the one repeated device
   that tells a reader which kind of page they are on. */
.ka-research__eyebrow {
  margin: 0;
  color: hsl(var(--ka-primary));
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ka-research__title {
  margin-top: 16px;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 300;
  line-height: 1.08;
}

.ka-research__lede {
  margin: 20px 0 0;
  max-width: 34em;
  color: hsl(var(--ka-muted-foreground));
  font-size: 1.0625rem;
  line-height: 1.75;
}

.ka-research__meta {
  margin: 24px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* The hairline that does most of the structural work. */
.ka-research hr,
.ka-rule-warm { border: 0; border-top: 1px solid hsl(var(--ka-foreground) / 0.14); }

/* --------------------------------------------------------------- search */

.ka-research__search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 40px;
  padding: var(--ka-field-pad-y) var(--ka-field-pad-right) var(--ka-field-pad-y) var(--ka-field-pad-left);
  max-width: 560px;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-card));
  box-shadow: var(--ka-shadow-raised);
  transition: border-color var(--ka-dur) var(--ka-ease), box-shadow var(--ka-dur) var(--ka-ease);
}
.ka-research__search:hover { border-color: hsl(var(--ka-border-strong)); }
/* One focus treatment for every control on the site: the ring, not a
   bespoke border-plus-glow that only this field had. */
.ka-research__search:focus-within {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}
/* Understated, per the reference: the glyph labels the field, it is not an
   ornament. It was the accent brown and read as a second button. */
.ka-research__search svg { flex: 0 0 auto; color: hsl(var(--ka-muted-foreground)); }
.ka-research__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-body);
  line-height: var(--ka-leading-snug);
}
.ka-research__search input:focus { outline: none; }
.ka-research__search input::placeholder { color: hsl(var(--ka-muted-foreground)); }
.ka-research__search button {
  flex: 0 0 auto;
  min-height: var(--ka-tap-min);
  padding: 0 var(--ka-control-pad-x);
  border: 0;
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  cursor: pointer;
  transition: background-color var(--ka-dur) var(--ka-ease);
}
.ka-research__search button:hover { background: hsl(var(--ka-espresso) / 0.88); }

/* Topic pills. */
.ka-research__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.ka-research__pill {
  display: inline-block;
  padding: var(--ka-control-pad-y-sm) var(--ka-control-pad-x-sm);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  color: hsl(var(--ka-muted-foreground));
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  text-decoration: none;
  transition: border-color var(--ka-dur) var(--ka-ease), color var(--ka-dur) var(--ka-ease), background-color var(--ka-dur) var(--ka-ease);
}
.ka-research__pill:hover {
  border-color: hsl(var(--ka-primary) / 0.4);
  color: hsl(var(--ka-foreground));
}
.ka-research__pill[aria-current="true"] {
  border-color: hsl(var(--ka-espresso));
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
}

.ka-research__count {
  margin: 48px 0 8px;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- the cards */

/* The list card: a row, not a tile. Editorial archives are read as a column
   of headlines, and a grid of equal boxes flattens the hierarchy that ordering
   them was supposed to express. */
.ka-finding {
  display: flex;
  gap: clamp(20px, 3vw, 32px);
  padding: 26px 0;
  border-bottom: 1px solid hsl(var(--ka-foreground) / 0.14);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.ka-finding:first-of-type { padding-top: 0; }
.ka-finding:hover { background: hsl(var(--ka-secondary) / 0.5); }
.ka-finding:focus-visible {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset);
}

.ka-finding__thumb {
  flex: 0 0 auto;
  overflow: hidden;
  width: clamp(140px, 18vw, 208px);
  border-radius: var(--ka-radius-sm);
  background: hsl(var(--ka-secondary));
  aspect-ratio: 3 / 2;
}
.ka-finding__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ka-finding:hover .ka-finding__thumb img { transform: scale(1.04); }

.ka-finding__body { min-width: 0; flex: 1 1 auto; }
.ka-finding__topline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ka-finding__topic {
  margin: 0;
  color: hsl(var(--ka-primary));
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ka-finding__title {
  margin: 8px 0 0;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}
.ka-finding__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.9rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.ka-finding__meta {
  margin: 12px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.75rem;
}
.ka-finding__reason {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: hsl(var(--ka-primary));
  font-size: 0.75rem;
}
.ka-finding__reason::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(var(--ka-primary) / 0.6);
}
.ka-finding__go {
  flex: 0 0 auto;
  margin-top: 6px;
  color: hsl(var(--ka-muted-foreground) / 0.6);
  transition: transform 0.2s ease, color 0.2s ease;
}
.ka-finding:hover .ka-finding__go {
  transform: translate(2px, -2px);
  color: hsl(var(--ka-primary));
}

@media (max-width: 640px) {
  .ka-finding__thumb { display: none; }
  .ka-finding__go { display: none; }
}

/* The lead card: the one finding the archive opens with. */
.ka-finding--lead {
  display: grid;
  gap: 0;
  overflow: hidden;
  margin-top: 40px;
  padding: 0;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-card));
  transition: box-shadow 0.3s ease;
}
.ka-finding--lead:hover {
  background: hsl(var(--ka-card));
  box-shadow: 0 12px 40px hsl(var(--ka-primary) / 0.08);
}
@media (min-width: 860px) {
  .ka-finding--lead { grid-template-columns: 1fr 1fr; }
}
.ka-finding--lead .ka-finding__thumb {
  width: 100%;
  border-radius: 0;
  aspect-ratio: 16 / 10;
}
@media (min-width: 860px) {
  .ka-finding--lead .ka-finding__thumb { height: 100%; aspect-ratio: auto; }
}
.ka-finding--lead .ka-finding__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}
.ka-finding--lead .ka-finding__title {
  margin-top: 16px;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12;
}
.ka-finding--lead .ka-finding__excerpt {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  font-size: 1rem;
}
.ka-finding--lead .ka-finding__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  color: hsl(var(--ka-primary));
  font-size: 0.875rem;
  font-weight: 500;
}

/* The sample tag. Present wherever a sample is, without exception — a badge
   that appears only on the detail page would be a badge that misleads on the
   archive. */
.ka-research__sample {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid hsl(var(--ka-primary) / 0.3);
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-primary) / 0.06);
  color: hsl(var(--ka-primary));
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ka-research__notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 32px;
  padding: 18px 22px;
  border: 1px solid hsl(var(--ka-primary) / 0.2);
  border-radius: var(--ka-radius-md);
  background: hsl(var(--ka-primary) / 0.05);
}
.ka-research__notice p {
  margin: 0;
  color: hsl(var(--ka-foreground) / 0.8);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* --------------------------------------------------------- empty states */

.ka-research__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
  padding: 72px 24px;
  border: 1px dashed hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-card) / 0.5);
  text-align: center;
}
.ka-research__empty h2 { margin-top: 20px; font-size: 1.5rem; font-weight: 500; }
.ka-research__empty p {
  margin: 12px 0 0;
  max-width: 34ch;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.9rem;
  line-height: 1.65;
}
.ka-research__empty a {
  margin-top: 24px;
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-card));
  color: inherit;
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  text-decoration: none;
}
.ka-research__empty a:hover { border-color: hsl(var(--ka-primary) / 0.5); color: hsl(var(--ka-primary)); }

/* ------------------------------------------------------- the article */

.ka-research__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  text-decoration: none;
}
.ka-research__back:hover { color: hsl(var(--ka-foreground)); }

.ka-article__standfirst {
  margin: 24px 0 0;
  max-width: 30em;
  color: hsl(var(--ka-muted-foreground));
  font-family: var(--ka-font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}

.ka-article__disclosure {
  margin: 16px 0 0;
  max-width: 46em;
  color: hsl(var(--ka-muted-foreground) / 0.9);
  font-size: 0.75rem;
  line-height: 1.65;
}

.ka-article__hero {
  overflow: hidden;
  margin: 48px auto 0;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
}
.ka-article__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.ka-article__section { margin-top: clamp(48px, 7vw, 72px); }

/* The numbered heading. The number is the same display serif in italic at
   caption size — it reads as a printed section mark rather than a UI counter. */
.ka-article__heading { display: flex; align-items: baseline; gap: 16px; }
.ka-article__number {
  color: hsl(var(--ka-primary));
  font-family: var(--ka-font-display);
  font-size: 0.875rem;
  font-style: italic;
}
.ka-article__heading h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 500;
}

.ka-article__prose { margin-top: 24px; }
.ka-article__prose p {
  margin: 0 0 20px;
  color: hsl(var(--ka-foreground) / 0.85);
  font-size: 1rem;
  line-height: 1.85;
}
.ka-article__prose p:last-child { margin-bottom: 0; }

.ka-article__note {
  margin: 16px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  line-height: 1.65;
}

/* What matters: numbered rows separated by hairlines. */
.ka-article__matters { margin: 32px 0 0; padding: 0; list-style: none; }
.ka-article__matters li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
}
.ka-article__matters li:last-child { border-bottom: 1px solid hsl(var(--ka-foreground) / 0.14); }
.ka-article__matters .ka-article__number { flex: 0 0 auto; color: hsl(var(--ka-muted-foreground) / 0.6); }
.ka-article__matters h3 { font-family: var(--ka-font-body); font-size: 1rem; font-weight: 600; }
.ka-article__matters p {
  margin: 6px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.9rem;
  line-height: 1.65;
}

/* The solution profile sits on its own plate: it is the standard the product
   is about to be judged against, and it was written first. */
.ka-article__profile {
  margin-top: clamp(48px, 7vw, 72px);
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-secondary) / 0.5);
}

.ka-article__checklist { margin: 24px 0 0; padding: 0; list-style: none; }
.ka-article__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  line-height: 1.65;
}
.ka-article__checklist li:last-child { margin-bottom: 0; }
.ka-article__checklist svg { flex: 0 0 auto; margin-top: 3px; color: hsl(var(--ka-primary)); }

.ka-article__checklist--ruled li {
  padding-top: 16px;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
}
.ka-article__checklist--muted svg { color: hsl(var(--ka-muted-foreground) / 0.7); }

/* ----------------------------------------------------- the closest match */

.ka-match {
  display: grid;
  overflow: hidden;
  margin-top: 32px;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-card));
}
@media (min-width: 720px) {
  .ka-match { grid-template-columns: 300px 1fr; }
}
.ka-match__media { background: hsl(var(--ka-secondary)); aspect-ratio: 1; }
@media (min-width: 720px) { .ka-match__media { height: 100%; aspect-ratio: auto; } }
.ka-match__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ka-match__body { padding: clamp(24px, 4vw, 36px); }
.ka-match__topline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ka-match__name {
  margin: 12px 0 0;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 500;
}
.ka-match__brand { margin: 4px 0 0; color: hsl(var(--ka-muted-foreground)); font-size: 0.875rem; }
.ka-match__note {
  margin: 16px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.95rem;
  line-height: 1.7;
}

.ka-match__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid hsl(var(--ka-primary) / 0.3);
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-primary) / 0.05);
  color: hsl(var(--ka-primary));
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ka-match__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* A partial match must not wear the confident colour. */
.ka-match__badge--partial {
  border-color: hsl(30 45% 38% / 0.35);
  background: hsl(30 45% 38% / 0.06);
  color: hsl(30 45% 30%);
}

.ka-match__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  min-height: var(--ka-tap-min);
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  border: 0;
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  text-decoration: none;
  transition: background-color var(--ka-dur) var(--ka-ease), transform var(--ka-dur-fast) var(--ka-ease);
}
.ka-match__cta:hover { background: hsl(var(--ka-espresso) / 0.88); }
.ka-match__cta:active { transform: scale(0.98); }
.ka-match__cta:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }

/*
 * PHASE 2 — what an offer actually said, and when.
 *
 * Quiet by design. It sits under the button as a qualification, not as a
 * second claim competing with it, and it must never read like a price tag.
 */
.ka-match__observed {
  margin: 10px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: var(--ka-type-sm);
  line-height: 1.5;
}

/*
 * No usable offer. Deliberately NOT a disabled button — a greyed-out control
 * is a promise the page cannot keep, and a reader will click it anyway.
 */
.ka-match__unavailable {
  margin: 24px 0 0;
  padding: 12px 16px;
  border-left: 2px solid hsl(var(--ka-border));
  color: hsl(var(--ka-muted-foreground));
  font-size: var(--ka-type-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------- sources */

.ka-article__sources { margin: 24px 0 0; padding: 0; list-style: none; }
.ka-article__sources li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  line-height: 1.65;
}
.ka-article__sources svg { flex: 0 0 auto; margin-top: 3px; color: hsl(var(--ka-muted-foreground) / 0.6); }
.ka-article__sources a {
  color: hsl(var(--ka-foreground) / 0.85);
  text-decoration: underline;
  text-decoration-color: hsl(var(--ka-border));
  text-underline-offset: 4px;
}
.ka-article__sources a:hover { color: hsl(var(--ka-primary)); text-decoration-color: currentColor; }
.ka-article__sources em { font-style: italic; }

.ka-article__credit {
  margin: 32px 0 0;
  padding: 20px;
  border-radius: var(--ka-radius-md);
  background: hsl(var(--ka-secondary) / 0.6);
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.75rem;
  line-height: 1.7;
}

/* ------------------------------------------- editorial rendering additions */

/* Last reviewed — a restrained freshness note in the hero. */
.ka-article__reviewed {
  margin: 10px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Solution Profile — the single tier is labelled, not left to inference. */
.ka-article__profile-group { margin-top: 24px; }
.ka-article__profile-label {
  margin: 0 0 2px;
  color: hsl(var(--ka-primary));
  font-family: var(--ka-font-display);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ka-article__profile-group .ka-article__checklist { margin-top: 12px; }

/* Alternatives considered — a conditional module, subordinate to the spine. */
.ka-article__section--alternatives {
  margin-top: clamp(40px, 6vw, 56px);
  padding: clamp(24px, 3.5vw, 32px);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-secondary) / 0.35);
}
.ka-article__section--alternatives .ka-article__heading h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
}
.ka-article__alternatives { margin: 20px 0 0; padding: 0; list-style: none; }
.ka-article__alternatives li {
  padding: 16px 0;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
}
.ka-article__alternatives li:first-child { border-top: 0; padding-top: 0; }
.ka-article__alt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ka-article__alt-name { font-weight: 600; font-size: 0.95rem; }
.ka-article__alt-brand { color: hsl(var(--ka-muted-foreground)); font-size: 0.8rem; }
.ka-article__alt-reason {
  margin: 6px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Provenance tag — a clean editorial label, never a raw slug. */
.ka-article__source-type {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.68rem;
  line-height: 1.5;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ------------------------------------------------------------- keep going */

.ka-research__more {
  margin-top: clamp(56px, 8vw, 80px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
  background: hsl(var(--ka-card) / 0.6);
}
.ka-research__more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}
.ka-research__more-head h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 300; }
.ka-research__more-head a {
  color: hsl(var(--ka-primary));
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* --------------------------------------------------------- topic header */

.ka-topic__head {
  border-bottom: 1px solid hsl(var(--ka-foreground) / 0.14);
  background: hsl(var(--ka-secondary) / 0.4);
  padding-bottom: clamp(40px, 6vw, 64px);
}
/*
 * The topic hero.
 *
 * "Research Topic", then the photograph, and the topic's own words sitting on
 * the photograph. Centred, and narrower than the shell so the picture reads as
 * a plate rather than a banner.
 *
 * Words over a photograph are only legible if something guarantees the
 * contrast, and no photograph can. A scrim does it instead: dark enough at the
 * bottom to hold body copy on the brightest art, light enough at the top to
 * leave the picture recognisable. That is why the text is bottom-anchored —
 * it sits where the scrim is strongest.
 *
 * The frame carries the ratio and the image fills it with object-fit, which is
 * what the finding thumbnails do: 3/2 art that has to fit a different box is
 * cropped from the centre rather than distorted. Phones get a taller crop,
 * because three lines of copy across 300px needs the height.
 */
.ka-topic__hero { margin-top: 40px; text-align: center; }
.ka-topic__hero .ka-research__eyebrow { margin-bottom: 20px; }

.ka-topic__figure {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: min(100%, 1120px);
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-secondary));
  aspect-ratio: 4 / 5;
}
/*
 * 80% of the SCREEN, not 80% of the shell. The shell caps at 1120px, so a
 * percentage width here would have stopped well short of what the hero is
 * meant to be. The negative margins let the picture out of that cap and
 * re-centre it on the viewport; the words above it stay in the shell.
 */
@media (min-width: 640px) {
  .ka-topic__figure {
    width: 80vw;
    max-width: 80vw;
    margin-inline: calc(50% - 40vw);
    aspect-ratio: 3 / 2;
  }
}
.ka-topic__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The scrim. Sits between the picture and the words, never over the words. */
.ka-topic__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    hsl(0 0% 0% / 0.76) 0%,
    hsl(0 0% 0% / 0.52) 30%,
    hsl(0 0% 0% / 0.16) 58%,
    hsl(0 0% 0% / 0) 85%
  );
}
/*
 * A phone shows a tall slice of a wide photograph, and dead centre is where
 * editorial interiors tend to put their emptiest, brightest surface — a wall,
 * a window, a glazed panel. Cropped there and then scrimmed enough to hold
 * white text, the picture flattens to grey.
 *
 * Biasing the crop off-centre keeps something with structure in the frame.
 */
@media (max-width: 639px) {
  .ka-topic__figure img { object-position: 34% center; }
}

.ka-topic__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 64px);
}
/*
 * Centred with flex, not auto margins: .ka-topic__tagline and friends set a
 * `margin` shorthand further down this sheet, which would quietly reset any
 * margin-inline: auto set here and leave the copy sitting left of the picture.
 */
.ka-topic__caption { display: flex; flex-direction: column; align-items: center; }
.ka-topic__caption > * { max-width: 46rem; }
/*
 * Light type on a dark scrim. Scoped to the caption so the shared title, lede
 * and tagline classes keep their own colours everywhere else on the site.
 */
.ka-topic__figure .ka-research__title { color: hsl(0 0% 100%); }
.ka-topic__figure .ka-topic__tagline { color: hsl(0 0% 100% / 0.88); }
.ka-topic__figure .ka-research__lede { color: hsl(0 0% 100% / 0.82); }
.ka-topic__figure .ka-research__title,
.ka-topic__figure .ka-topic__tagline,
.ka-topic__figure .ka-research__lede {
  text-shadow: 0 1px 24px hsl(0 0% 0% / 0.45);
}

/* No picture, no scrim: the same words in the page's own ink. */
.ka-topic__caption--plain {
  position: static;
  padding: 0;
}
.ka-topic__caption--plain > * { max-width: 42rem; }
.ka-topic__tagline {
  margin: 12px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-family: var(--ka-font-display);
  font-size: 1.2rem;
  font-style: italic;
}
.ka-topic__open { margin: 0; padding: 0; list-style: none; }
.ka-topic__open li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
  font-family: var(--ka-font-display);
  font-size: 1.1rem;
  line-height: 1.4;
}
.ka-topic__open li::before {
  content: "";
  flex: 0 0 auto;
  margin-top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--ka-primary));
}

.ka-research__othertopics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 32px;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
}
.ka-research__othertopics > span {
  margin-right: 8px;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ topic grid */

.ka-research__topics {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .ka-research__topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ka-research__topics { grid-template-columns: repeat(3, 1fr); } }
.ka-research__topics a {
  display: block;
  height: 100%;
  padding: 24px;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-md);
  background: hsl(var(--ka-card));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ka-research__topics a:hover {
  border-color: hsl(var(--ka-primary) / 0.4);
  transform: translateY(-2px);
}
.ka-research__topics h3 { margin-top: 10px; font-size: 1.15rem; font-weight: 500; }
.ka-research__topics p {
  margin: 6px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.85rem;
  line-height: 1.6;
}
.ka-research__topics span {
  display: block;
  margin-top: 14px;
  color: hsl(var(--ka-muted-foreground) / 0.8);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   THE RESEARCH HOME.

   The landing page's own sections, ported from the prototype's homepage. Two
   things about it are load-bearing and easy to lose in a later edit:

   1. IT IS ONE COLUMN OF ALTERNATING BANDS, not a grid of modules. Plain,
      tinted, plain, band, plain, accent — the rhythm is what makes a long
      editorial page readable while scrolling, and it disappears the moment two
      adjacent sections share a background.
   2. THE ACCENT SURFACE APPEARS EXACTLY ONCE, at the transparency band. It is
      the only place on the page where the brown is a background rather than
      an accent, which is why the disclosure reads as a statement rather than
      as another section.
   ========================================================================== */

.ka-research--landing { padding-bottom: 0; }

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

/*
 * The prototype's hero is a full-height <video> with a poster and no source
 * yet, so what it renders today is the still under a gradient. That is what is
 * reproduced — an <img>, not an empty <video>.
 *
 * 100dvh, not 100vh: on iOS Safari the address bar makes vh taller than the
 * visible viewport, so the ask field would sit under the browser chrome on
 * first paint and appear only after the first scroll.
 */
.ka-rhero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 100vh;
}
/* dvh where it exists, vh as the floor. Written as an upgrade rather than as
   the base value because dvh is not supported everywhere and an unsupported
   unit makes the whole declaration invalid — the hero would collapse to the
   height of its own text. */
@supports (min-height: 100dvh) {
  .ka-rhero { min-height: 100dvh; }
}
/*
 * THE HERO IS GIVEN ITS OWN COMPOSITING LAYER, AND THAT IS NOT AN OPTIMISATION.
 *
 * The ask field below sits on this photograph with a backdrop-filter. Without
 * these two declarations the browser re-samples a full-viewport, million-pixel
 * backdrop on every scroll frame, and it does not keep up: the page rendered
 * correctly, reported correct geometry for every element, and then painted
 * NOTHING. A blank page with a healthy DOM, which is the hardest kind of bug
 * to be told about, because the reporter has nothing to describe.
 *
 * `contain: paint` bounds what the hero can affect; translateZ promotes the
 * still to a layer of its own so the blur samples a stable texture instead of
 * forcing the whole document to repaint. Reproduced and fixed in a browser —
 * removing either line brings the blank page back.
 */
.ka-rhero { contain: paint; }
.ka-rhero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
}
/* Dark at the foot where the words are, clearing towards the top so the
   photograph is still a photograph. */
.ka-rhero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 10, 9, 0.85) 0%,
    rgba(12, 10, 9, 0.4) 55%,
    rgba(12, 10, 9, 0.3) 100%
  );
}
.ka-rhero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(120px, 16vw, 160px) clamp(20px, 4vw, 32px) clamp(72px, 9vw, 112px);
}
.ka-rhero__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.ka-rhero__title {
  margin: 20px 0 0;
  max-width: 16ch;
  color: #fff;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
}
.ka-rhero__title em { color: rgba(255, 255, 255, 0.9); font-style: italic; }
.ka-rhero__lede {
  margin: 24px 0 0;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
}
.ka-rhero__ask { margin-top: 36px; }
.ka-rhero__note {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------- ask field */

.ka-ask { width: 100%; }
.ka-ask__field {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 580px;
  padding: var(--ka-field-pad-y) var(--ka-field-pad-right) var(--ka-field-pad-y) 1.5rem;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-card));
  box-shadow: var(--ka-shadow-panel);
  transition: border-color var(--ka-dur) var(--ka-ease);
}
.ka-ask__field:focus-within {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}
/*
 * DIRECT CHILD, and the > is the whole point.
 *
 * The field holds two icons: the search glyph beside the input, and the arrow
 * inside the submit button. A descendant selector coloured both — so the arrow
 * was painted the accent colour on an accent-coloured button, and white-on-70%
 * on a white one. In both cases it vanished, and on a phone (where the button's
 * label is hidden and the arrow is all that is left) the button rendered as an
 * empty circle. Seen at 375px before this line was scoped.
 */
.ka-ask__field > svg { flex: 0 0 auto; color: hsl(var(--ka-primary)); }
.ka-ask__field button svg { color: inherit; }
.ka-ask__field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6875rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-lede);
  line-height: var(--ka-leading-snug);
}
.ka-ask__field input:focus { outline: none; }
.ka-ask__field input::placeholder { color: hsl(var(--ka-muted-foreground)); }
.ka-ask__field button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: var(--ka-tap-min);
  padding: 0 var(--ka-control-pad-x);
  border: 0;
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  cursor: pointer;
  transition: background-color var(--ka-dur) var(--ka-ease), transform var(--ka-dur-fast) var(--ka-ease);
}
.ka-ask__field button:hover { background: hsl(var(--ka-espresso) / 0.88); }
.ka-ask__field button:active { transform: scale(0.98); }
.ka-ask__help {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.75rem;
}

/*
 * THE ONE LIQUID-GLASS SURFACE THE IMPORTED DESIGN USES.
 *
 * Over the hero photograph the field is a white hairline on a 10% white fill
 * with the background blurred behind it. The fallback matters: where
 * backdrop-filter is unsupported the fill alone would leave white placeholder
 * text on a bright part of the photograph, so the unsupported branch takes a
 * heavier fill instead of a transparent one.
 */
.ka-ask--dark .ka-ask__field {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .ka-ask--dark .ka-ask__field {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
/* The one place the focus ring is NOT the shared brown: on a dark
   photograph a brown ring is invisible, and a focus state that cannot be
   seen is not a focus state. Same width, same offset, white. */
.ka-ask--dark .ka-ask__field:focus-within {
  border-color: rgba(255, 255, 255, 0.5);
  outline-color: #fff;
}
.ka-ask--dark .ka-ask__field > svg { color: rgba(255, 255, 255, 0.7); }
.ka-ask--dark .ka-ask__field input { color: #fff; }
.ka-ask--dark .ka-ask__field input::placeholder { color: rgba(255, 255, 255, 0.6); }
.ka-ask--dark .ka-ask__field button { background: #fff; color: hsl(var(--ka-espresso)); }
.ka-ask--dark .ka-ask__help { color: rgba(255, 255, 255, 0.55); }

@media (max-width: 560px) {
  /* The label goes, the arrow stays: the button is still a button, and the
     helper line under the field already says what it does. */
  .ka-ask__label { display: none; }
  .ka-ask__field button { padding: 0 14px; }
}

/* ---------------------------------------------------------- the sections */

.ka-rsection { padding: clamp(64px, 9vw, 112px) 0; }
.ka-rsection--tinted {
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
  background: hsl(var(--ka-card) / 0.6);
}
.ka-rsection--band {
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
  background: hsl(var(--ka-secondary) / 0.4);
}

.ka-rsection__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.ka-rsection__title {
  margin: 12px 0 0;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
}
/* The two headings the prototype holds to a narrower measure, at the same
   42rem it uses. Measured in rem rather than ch so the line breaks land in the
   same places the reference does — ch tracks the font's zero-width, which is
   not the width the type is actually set at. */
.ka-rsection__title--measured { max-width: 42rem; }
.ka-rsection__more {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: hsl(var(--ka-primary));
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ka-rsection__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.ka-rsection__more--standalone { margin-top: clamp(32px, 5vw, 48px); }
@media (max-width: 720px) {
  /* Every section head carries the same link further down the page, so
     dropping it here loses no route and buys the headline its full measure. */
  .ka-rsection__head .ka-rsection__more { display: none; }
}

.ka-rsection__list { margin-top: 8px; }

.ka-rbutton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-card));
  color: inherit;
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ka-rbutton:hover { border-color: hsl(var(--ka-primary) / 0.5); color: hsl(var(--ka-primary)); }

/* ------------------------------------------------ problems we're exploring */

.ka-rexploring {
  display: grid;
  gap: 0 clamp(24px, 4vw, 48px);
  margin: clamp(32px, 5vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) { .ka-rexploring { grid-template-columns: 1fr 1fr; } }
.ka-rexploring a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
  color: inherit;
  text-decoration: none;
}
.ka-rexploring__body { flex: 1 1 auto; min-width: 0; }
.ka-rexploring__q {
  display: block;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.35;
}
.ka-rexploring__topic {
  display: block;
  margin-top: 8px;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ka-rexploring__go {
  flex: 0 0 auto;
  margin-top: 4px;
  color: hsl(var(--ka-muted-foreground) / 0.4);
  transition: transform 0.2s ease, color 0.2s ease;
}
.ka-rexploring a:hover .ka-rexploring__go {
  transform: translate(2px, -2px);
  color: hsl(var(--ka-primary));
}

/* ------------------------------------------------------ how we research */

.ka-rsteps {
  display: grid;
  gap: clamp(28px, 4vw, 32px);
  margin-top: clamp(40px, 6vw, 56px);
}
@media (min-width: 720px) { .ka-rsteps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ka-rsteps { grid-template-columns: repeat(4, 1fr); } }
/* The 2px accent rule above each step is the only heavy line on the page, and
   it is what makes four columns read as a sequence rather than four cards. */
.ka-rsteps__item {
  padding-top: 24px;
  border-top: 2px solid hsl(var(--ka-primary) / 0.7);
}
.ka-rsteps__item h3 { margin-top: 12px; font-size: 1.2rem; font-weight: 500; }
.ka-rsteps__item p {
  margin: 12px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  line-height: 1.65;
}
.ka-rsteps__item .ka-article__number { margin: 0; }

/* --------------------------------------------------------- topic cards */

.ka-rtopics {
  display: grid;
  gap: 20px;
  margin: clamp(40px, 6vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .ka-rtopics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ka-rtopics { grid-template-columns: repeat(3, 1fr); } }
.ka-rtopics a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-card));
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ka-rtopics a:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--ka-primary) / 0.35);
  box-shadow: 0 14px 40px hsl(var(--ka-primary) / 0.08);
}
.ka-rtopics__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(var(--ka-secondary));
  color: hsl(var(--ka-primary));
}
.ka-rtopics a h3 { margin-top: 20px; font-size: 1.4rem; font-weight: 500; }
.ka-rtopics__tagline {
  margin: 6px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  font-style: italic;
}
.ka-rtopics__body {
  flex: 1 1 auto;
  margin: 16px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  line-height: 1.65;
}
.ka-rtopics__count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  color: hsl(var(--ka-primary));
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ------------------------------------------------------ transparency band */

.ka-rtransparency {
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
  background: hsl(var(--ka-primary));
  color: hsl(var(--ka-primary-foreground));
  padding: clamp(56px, 8vw, 80px) 0;
}
.ka-rtransparency__grid {
  display: grid;
  align-items: center;
  gap: 32px;
}
@media (min-width: 860px) { .ka-rtransparency__grid { grid-template-columns: 1.5fr 1fr; } }
.ka-rtransparency h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.2;
}
.ka-rtransparency p {
  margin: 16px 0 0;
  max-width: 44em;
  color: hsl(var(--ka-primary-foreground) / 0.8);
  font-size: 0.95rem;
  line-height: 1.7;
}
.ka-rtransparency__action { justify-self: start; }
@media (min-width: 860px) { .ka-rtransparency__action { justify-self: end; } }
.ka-rtransparency__action a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ka-tap-min);
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  border: 1px solid hsl(var(--ka-primary-foreground) / 0.4);
  border-radius: var(--ka-radius-pill);
  color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ka-rtransparency__action a:hover {
  background: hsl(var(--ka-primary-foreground));
  color: hsl(var(--ka-primary));
}

/* ------------------------------------------------------- how we research */

.ka-rmethod { margin: clamp(32px, 5vw, 40px) 0 0; padding: 0; list-style: none; }
.ka-rmethod li {
  display: flex;
  gap: clamp(20px, 4vw, 40px);
  padding: 28px 0;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
}
.ka-rmethod li:last-child { border-bottom: 1px solid hsl(var(--ka-foreground) / 0.14); }
.ka-rmethod .ka-article__number { flex: 0 0 auto; font-size: 1.05rem; }
.ka-rmethod h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 500; }
.ka-rmethod p {
  margin: 8px 0 0;
  max-width: 36em;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.95rem;
  line-height: 1.7;
}

.ka-rprinciples { margin: clamp(32px, 5vw, 40px) 0 0; padding: 0; list-style: none; }
.ka-rprinciples li {
  padding: 28px 0;
  border-top: 1px solid hsl(var(--ka-foreground) / 0.14);
}
.ka-rprinciples li:last-child { border-bottom: 1px solid hsl(var(--ka-foreground) / 0.14); }
.ka-rprinciples h3 { font-family: var(--ka-font-body); font-size: 1.05rem; font-weight: 600; }
.ka-rprinciples p {
  margin: 8px 0 0;
  max-width: 44em;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.95rem;
  line-height: 1.7;
}

.ka-rdisclosure {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-lg);
  background: hsl(var(--ka-card));
  /* The transparency band links to #disclosure; without this the anchor lands
     under the fixed application bar. */
  scroll-margin-top: 96px;
}
.ka-rdisclosure h2 { margin-top: 14px; font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 300; }
.ka-rdisclosure__lead {
  margin: 18px 0 0;
  color: hsl(var(--ka-foreground) / 0.85);
  font-size: 1rem;
  line-height: 1.85;
}
.ka-rdisclosure__note {
  margin: 18px 0 0;
  color: hsl(var(--ka-muted-foreground));
  font-size: 0.875rem;
  line-height: 1.65;
}

.ka-rclosing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: clamp(56px, 8vw, 80px);
}
.ka-rclosing h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 300; }
.ka-rclosing .ka-rsection__more--standalone { margin-top: 0; }

/* ------------------------------------------------------------- reveal */

/* The prototype animated sections in as they were reached. Kept, because it
   paces a long read.

   Note which way round this is written. The hidden state is gated on
   .ka-reveal-ready, which the script adds to <html> as its first act — so a
   browser that never runs the script, or runs it and throws, shows the whole
   article. Hiding by default and revealing with JavaScript is how an article
   becomes a blank page for the one reader whose network dropped the file. */
.ka-reveal-ready .ka-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ka-reveal-ready .ka-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ka-reveal-ready .ka-reveal { opacity: 1; transform: none; transition: none; }
  .ka-finding__thumb img,
  .ka-finding__go { transition: none; }
}

/*
 * Whether a reader can actually buy the Closest Match, and what an outside
 * source measured. Quiet by design: these are qualifications on an editorial
 * judgement, not claims competing with it.
 */
.ka-match__path {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: hsl(var(--ka-primary));
}
.ka-match__evidence {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: hsl(var(--ka-muted-foreground));
}