.rk-ri-feature,
.rk-ri-page-hero,
.rk-ri-method,
.rk-ri-sources {
  padding-block: clamp(42px, 7vw, 106px);
}

.rk-ri-feature { background: var(--rk-paper); }

.rk-ri-feature-intro,
.rk-ri-page-grid,
.rk-ri-method-grid,
.rk-ri-sources-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 82px);
  align-items: center;
}

.rk-site :is(.rk-ri-feature-intro h2, .rk-ri-page-grid h1) {
  margin: 7px 0 0;
  color: inherit;
  font: 500 clamp(44px, 6.8vw, 103px)/.96 "Rekon Serif", Georgia, serif;
  letter-spacing: -.059em;
  text-wrap: balance;
}

.rk-site :is(.rk-ri-feature-intro, .rk-ri-page-grid, .rk-ri-sources-grid) p:not(.rk-kicker) {
  max-width: 49ch;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.5;
}

.rk-site .rk-ri-feature-intro .rk-button { margin-top: 17px; }
.rk-site .rk-ri-page-grid h1 + p { margin-top: 18px; }
.rk-ri-skills { margin-top: clamp(32px, 5vw, 70px); }

.rk-site :is(.rk-ri-skills > h3, .rk-ri-method h2, .rk-ri-sources h2) {
  margin: 0 0 18px;
  color: inherit;
  font: 500 clamp(30px, 4vw, 64px)/1.02 "Rekon Serif", Georgia, serif;
  letter-spacing: -.045em;
}

.rk-site .rk-ri-skills > h3 { font-size: clamp(27px, 3vw, 46px); }

.rk-ri-gallery {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(20px, 3vw, 45px);
}

.rk-ri-skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(13px, 1.65vw, 26px);
  align-items: center;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rk-line);
}

.rk-ri-skill-print {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
}

.rk-site .rk-ri-skill figure { margin: 0; }
.rk-ri-skill img,
.rk-ri-example > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #17191c;
}

.rk-ri-skill-print img { aspect-ratio: 16 / 9; object-fit: contain; }
.rk-ri-skill-web img { object-fit: contain; }
.rk-ri-skill-tools img { object-fit: contain; background: #ded7c3; }

.rk-site :is(.rk-ri-skill h4, .rk-ri-example h3, .rk-ri-phases h3) {
  margin: 5px 0 8px;
  color: inherit;
  font: 500 clamp(25px, 2.65vw, 44px)/1.08 "Rekon Serif", Georgia, serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.rk-site .rk-ri-skill p:not(.rk-kicker),
.rk-site .rk-ri-example p:not(.rk-kicker),
.rk-site .rk-ri-phases p {
  margin: 0 0 8px;
  max-width: 50ch;
  color: var(--rk-muted);
}

.rk-site :is(.rk-ri-skill, .rk-ri-example) .rk-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rk-rust);
  font-weight: 600;
  line-height: 1.28;
}

.rk-ri-page-hero { background: var(--rk-canvas); }
.rk-site .rk-ri-page-hero .rk-art-figure img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.rk-ri-method-grid { align-items: start; margin-top: clamp(20px, 4vw, 56px); }
.rk-ri-phases { margin: 0; padding-inline-start: clamp(24px, 3vw, 43px); }
.rk-ri-phases li { border-top: 1px solid var(--rk-line); padding: 14px 0; }
.rk-ri-phases li::marker { color: var(--rk-rust); font-weight: 600; }
.rk-site .rk-ri-phases h3 { font-size: clamp(23px, 2.6vw, 35px); }
.rk-ri-example > img { aspect-ratio: 16 / 9; }
.rk-ri-example > div { border-top: 1px solid var(--rk-line); margin-top: 13px; padding-top: 13px; }

.rk-ri-sources { background: var(--rk-navy); color: #eff3ff; }
.rk-site .rk-ri-sources :is(.rk-kicker,.rk-text-link) { color: #d9e2ff; }
.rk-site .rk-ri-sources a:focus-visible { outline-color: #d9e2ff; }
.rk-ri-sources h2 { margin-top: 8px; }
.rk-ri-sources .rk-art-figure img { aspect-ratio: 8 / 5; }

@media (max-width: 1090px) {
  .rk-ri-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-ri-skill { display: flex; flex-direction: column; align-items: stretch; justify-content: start; }
  .rk-ri-skill-print { grid-row: auto; }
  .rk-ri-skill img { aspect-ratio: 4 / 3; }
}

@media (max-width: 740px) {
  .rk-ri-gallery,
  .rk-ri-feature-intro,
  .rk-ri-page-grid,
  .rk-ri-method-grid,
  .rk-ri-sources-grid { grid-template-columns: minmax(0, 1fr); }
  .rk-ri-skill img { aspect-ratio: 16 / 10; }
  .rk-site :is(.rk-ri-feature-intro h2, .rk-ri-page-grid h1) {
    font-size: clamp(40px, 11vw, 72px);
    text-wrap: wrap;
  }
}