@view-transition { navigation: none; }

.vc-guide-hero {
  background: radial-gradient(ellipse at 62% 6%, #633144, var(--velvet) 78%);
  padding-block: clamp(22px, 4.5vw, 62px) clamp(40px, 6.6vw, 88px);
}

.vc-guide-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 11px;
  list-style: none;
  margin: 0 0 clamp(23px, 3.4vw, 47px);
  padding: 0;
  color: var(--muted);
  font-size: .84rem;
}

.vc-guide-breadcrumb li + li::before {
  content: '›' / '';
  margin-inline-end: 11px;
  color: var(--champagne);
}

.vc-guide-breadcrumb [aria-current] { color: var(--ivory); }
.vc-guide-breadcrumb a, .vc-guide-copy a, .vc-guide-toc a { text-underline-offset: .25em; }

.vc-guide-hero h1 {
  max-width: 19ch;
  font-size: clamp(3rem, 7.4vw, 6.8rem);
  letter-spacing: -.045em;
  line-height: .99;
  text-wrap: initial;
}

.vc-guide-hero p {
  max-width: 56ch;
  margin-top: clamp(16px, 2.2vw, 28px);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ivory);
}

.vc-guide-library, .vc-guide-reading { padding-block: clamp(32px, 6vw, 85px); }
.vc-guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 42px); }

.vc-guide-card { border-top: 1px solid var(--paper-line); padding-top: 16px; }
.vc-guide-card img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 36%;
  border-radius: 48% 48% 4px 4px / 38% 38% 4px 4px;
  background-color: #e6d4c5;
  margin-bottom: 16px;
}

.vc-guide-card h2 { font-size: clamp(1.85rem, 3vw, 2.85rem); line-height: 1.03; text-wrap: initial; }
.vc-guide-card h2 a { text-decoration-thickness: 1px; text-underline-offset: .12em; }
.vc-guide-card p { margin-top: 10px; color: var(--paper-muted); }

.vc-guide-layout {
  display: grid;
  grid-template-columns: minmax(12rem, .7fr) minmax(0, 44rem);
  gap: clamp(26px, 6.5vw, 94px);
  align-items: start;
}

.vc-guide-toc {
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  padding-block: 15px 17px;
}

.vc-guide-toc p { font-weight: 600; }
.vc-guide-toc ol, .vc-guide-copy ul { padding-inline-start: 1.3em; margin-block: 7px 0; }
.vc-guide-toc li + li, .vc-guide-copy li + li { margin-top: 5px; }
.vc-guide-toc a { display: inline-block; padding-block: 4px; }

.vc-guide-copy { min-width: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; }
.vc-guide-copy h2 { font-size: clamp(2rem, 3.7vw, 3.4rem); line-height: 1.04; text-wrap: initial; scroll-margin-top: 20px; }
.vc-guide-copy p { margin-top: 11px; max-width: 66ch; }
.vc-guide-copy section + section { margin-top: clamp(26px, 4.5vw, 50px); }
.vc-guide-copy :is(.vc-guide-sources, .vc-guide-next) { border-top: 1px solid var(--paper-line); padding-top: 21px; }
.vc-guide-sources a { overflow-wrap: anywhere; }
.vc-guide-next .vc-actions { margin-top: 8px; }
.vc-guide-next .vc-text-link { justify-content: flex-start; text-align: left; }

@media (max-width: 720px) {
  .vc-guide-cards, .vc-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .vc-guide-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 14px; align-items: start; }
  .vc-guide-card img { aspect-ratio: 8 / 9; margin-bottom: 0; }
  .vc-guide-card h2 { font-size: clamp(1.65rem, 6vw, 2.5rem); }
}