/* Public guide hub and article. Shared framing remains in inner-page.css. */
body:not(.home) :is(.guide-hub, .guide-article)#main-content {
  padding: 0;
}

.guide-hub,
.guide-article {
  overflow: clip;
}

.guide-hub__body p,
.guide-hub__body ol,
.guide-hub__body ul,
.guide-article__body p,
.guide-article__body ol,
.guide-article__body ul {
  margin-block: 0;
}

.guide-page__eyebrow {
  color: var(--guide-accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .15em;
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

/* Hub masthead. */
.guide-hub__body,
.guide-article__body {
  /* Resolve the border colors against this light surface, as on the FAQ. */
  --color-border: color-mix(in srgb, var(--color-text), transparent 87%);
  --color-border-strong: color-mix(in srgb, var(--color-text), transparent 74%);
}

.guide-hub__intro {
  position: relative;
  overflow: clip;
}

.guide-hub__intro-content {
  position: relative;
  z-index: 1;
}

.guide-hub__intro-art {
  display: none;
}

.guide-hub__body {
  --guide-accent-text: color-mix(in srgb, var(--palette-15) 75%, var(--palette-12));
  --guide-muted-text: color-mix(in srgb, var(--palette-14) 76%, var(--palette-12));
  padding-block: clamp(4.5rem, 3.5rem + 4vw, 8rem);
  color: var(--color-text);
  background: var(--color-bg);
}

.guide-hub__body > .container-wide {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: clamp(3.5rem, 2rem + 4vw, 7rem) clamp(1.25rem, 2.3vw, 2.75rem);
}

.guide-hub__heading {
  grid-column: 1 / span 4;
  display: grid;
  gap: var(--space-md);
}

.guide-hub__heading h2 {
  max-width: 14ch;
  font-size: var(--text-h3);
  line-height: 1.12;
}

.guide-hub__heading > p:last-child {
  max-width: 39ch;
  color: var(--color-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.guide-hub__chapters {
  grid-column: 5 / -1;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-hub__chapter {
  border-top: 1px solid var(--color-border-strong);
}

.guide-hub__chapter:last-child {
  border-bottom: 1px solid var(--color-border-strong);
}

.guide-hub__chapter-link {
  display: grid;
  grid-template-columns: clamp(3rem, 4vw, 4.5rem) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-lg);
  padding-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.5rem);
  color: var(--color-text);
  text-decoration: none;
}

.guide-hub__chapter-number {
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.65rem + 1.8vw, 3.6rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .88;
}

.guide-hub__chapter-copy {
  display: grid;
  gap: var(--space-xs);
}

.guide-hub__topic {
  color: var(--guide-accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.guide-hub__chapter-title {
  max-width: 27ch;
  font-size: var(--text-h5);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.24;
  text-wrap: balance;
}

.guide-hub__chapter-summary {
  max-width: 68ch;
  color: var(--color-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.guide-hub__chapter-action {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid transparent;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-ui);
  white-space: nowrap;
}

.guide-hub__chapter-action span {
  color: var(--color-accent);
  font-size: 1.25em;
}

.guide-hub__chapter-link:is(:hover, :focus-visible) .guide-hub__chapter-action {
  border-bottom-color: var(--color-accent);
}

.guide-hub__chapter-link:is(:hover, :focus-visible) .guide-hub__chapter-title {
  color: var(--guide-accent-text);
}

.guide-hub__chapter--featured {
  margin-bottom: var(--space-lg);
  border: 0;
  border-radius: var(--radius-panel);
  color: var(--palette-4);
  background:
    radial-gradient(circle at 100% 0%, rgb(221 189 120 / 12%), transparent 34%),
    linear-gradient(145deg, var(--palette-1), var(--palette-2));
  box-shadow: var(--shadow-md);
}

.guide-hub__chapter--featured + .guide-hub__chapter {
  border-top: 0;
}

.guide-hub__chapter--featured .guide-hub__chapter-link {
  grid-template-columns: clamp(3.5rem, 5vw, 5.5rem) minmax(0, 1fr) auto;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3.2rem);
  color: var(--palette-4);
}

.guide-hub__chapter--featured .guide-hub__chapter-number,
.guide-hub__chapter--featured .guide-hub__topic,
.guide-hub__chapter--featured .guide-hub__chapter-action span {
  color: var(--palette-8);
}

.guide-hub__chapter--featured .guide-hub__chapter-number {
  font-size: clamp(3.2rem, 2.35rem + 2.7vw, 5.5rem);
}

.guide-hub__chapter--featured .guide-hub__chapter-title {
  max-width: 21ch;
  color: var(--palette-4);
  font-size: var(--text-h4);
  line-height: 1.12;
}

.guide-hub__chapter--featured .guide-hub__chapter-summary {
  color: var(--palette-5);
  font-size: var(--text-body);
}

.guide-hub__chapter--featured .guide-hub__chapter-action {
  color: var(--palette-4);
}

.guide-hub__chapter--featured .guide-hub__chapter-link:is(:hover, :focus-visible) .guide-hub__chapter-title {
  color: var(--palette-8);
}

.guide-hub__empty {
  grid-column: 5 / -1;
  padding: var(--space-xl);
  border-radius: var(--radius-card);
  color: var(--color-body);
  background: var(--color-surface);
}

/* Article masthead. */
.guide-article__masthead {
  padding-block: calc(clamp(5.4rem, 5.8vw, 6.1rem) + var(--space-lg)) var(--space-2xl);
  color: var(--color-text);
  background:
    radial-gradient(circle at 88% 26%, rgb(221 189 120 / 8%), transparent 24rem),
    var(--color-bg);
}

.guide-article__masthead > .container-wide {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(13rem, 1fr);
  column-gap: clamp(3rem, 6vw, 8rem);
  align-items: end;
}

.guide-article__breadcrumb,
.guide-article__topic,
.guide-article__masthead h1,
.guide-article__dek {
  grid-column: 1;
}

.guide-article__breadcrumb {
  margin-bottom: var(--space-xl);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.guide-article__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article__breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.guide-article__breadcrumb li:not(:last-child)::after {
  color: var(--color-accent-soft);
  content: '/';
}

.guide-article__breadcrumb a {
  color: var(--color-body);
  text-decoration-color: transparent;
  text-underline-offset: .25em;
}

.guide-article__breadcrumb a:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-accent-soft);
}

.guide-article__topic {
  margin-bottom: var(--space-sm);
  color: var(--color-accent-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.guide-article__masthead h1 {
  max-width: 21ch;
  font-size: var(--text-h2);
  line-height: 1.05;
}

.guide-article__dek {
  max-width: 64ch;
  margin-top: var(--space-md);
  color: var(--color-body);
  font-size: var(--text-lead);
  line-height: 1.62;
}

.guide-article__meta {
  grid-column: 2;
  grid-row: 3 / span 3;
  display: grid;
  align-self: end;
  margin: 0;
  border-top: 1px solid rgb(208 205 197 / 16%);
}

.guide-article__meta > div {
  display: grid;
  grid-template-columns: minmax(7rem, .8fr) minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid rgb(208 205 197 / 16%);
}

.guide-article__meta dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.guide-article__meta dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-ui);
}

.guide-article__meta a {
  text-decoration-color: var(--color-accent-soft);
  text-underline-offset: .25em;
}

/* Article reading frame. */
.guide-article__body {
  --guide-accent-text: color-mix(in srgb, var(--palette-15) 75%, var(--palette-12));
  --guide-muted-text: color-mix(in srgb, var(--palette-14) 76%, var(--palette-12));
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem) clamp(5rem, 3.4rem + 5vw, 9rem);
  color: var(--color-text);
  background: var(--color-bg);
}

.guide-article__layout {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 68ch) minmax(13rem, 17rem);
  grid-template-areas: 'chapters article contents';
  justify-content: center;
  align-items: start;
  gap: clamp(2rem, 3.5vw, 4.75rem);
}

.guide-article__chapters {
  grid-area: chapters;
  position: sticky;
  top: calc(7rem + var(--wp-admin--admin-bar--height, 0px));
}

.guide-article__contents {
  grid-area: contents;
  position: sticky;
  top: calc(7rem + var(--wp-admin--admin-bar--height, 0px));
}

.guide-article__chapters-desktop,
.guide-article__contents-desktop {
  position: static;
}

.guide-article__mobile-menu {
  display: none;
}

.guide-article__nav-inner > p,
.guide-article__contents-inner > p {
  margin-bottom: var(--space-md);
  color: var(--guide-muted-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.guide-article__nav-inner ol,
.guide-article__contents-inner ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article__nav-inner li,
.guide-article__contents-inner li {
  border-top: 1px solid var(--color-border);
}

.guide-article__nav-inner li:last-child,
.guide-article__contents-inner li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.guide-article__nav-inner a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-xs);
  padding-block: .8rem;
  color: var(--color-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.55;
  text-decoration: none;
}

.guide-article__nav-inner a span {
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: 1.2em;
  font-style: italic;
}

.guide-article__nav-inner a[aria-current='page'] {
  color: var(--color-text);
  font-weight: 700;
}

.guide-article__nav-inner a[aria-current='page'] span {
  color: var(--color-accent);
}

.guide-article__nav-inner a:is(:hover, :focus-visible),
.guide-article__contents-inner a:is(:hover, :focus-visible) {
  color: var(--guide-accent-text);
}

.guide-article__contents-inner a {
  position: relative;
  display: block;
  padding-block: .8rem;
  padding-inline-start: 1.05rem;
  color: var(--color-body);
  font-size: var(--text-xs);
  line-height: 1.55;
  text-decoration: none;
}

.guide-article__contents-inner a[aria-current='location'] {
  color: var(--color-text);
  font-weight: 700;
}

.guide-article__contents-inner a[aria-current='location']::before {
  position: absolute;
  inset-inline-start: 0;
  top: calc(.8rem + .775em - .225rem);
  width: .45rem;
  height: .45rem;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  content: '';
}

.guide-article__main {
  grid-area: article;
  min-width: 0;
}

.guide-article__prose {
  color: var(--color-body);
  font-size: var(--text-body);
  line-height: 1.82;
}

.guide-article__prose > :first-child {
  margin-top: 0;
}

.guide-article__prose > p:first-child {
  color: var(--color-text);
  font-size: var(--text-lead);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.7;
}

.guide-article__prose :is(p, ul, ol, blockquote, .knowledge-example, .wp-block-table, table) {
  margin-block: 0 var(--space-lg);
}

.guide-article__prose h2 {
  max-width: 24ch;
  margin: clamp(3.5rem, 3rem + 2vw, 5.25rem) 0 var(--space-lg);
  color: var(--color-text);
  font-size: var(--text-h4);
  letter-spacing: -.035em;
  line-height: 1.14;
  scroll-margin-top: 7rem;
}

.guide-article__prose h3 {
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--color-text);
  font-size: var(--text-h5);
  line-height: 1.2;
  scroll-margin-top: 7rem;
}

.guide-article__prose :is(ul, ol) {
  display: grid;
  gap: var(--space-xs);
  padding-left: 1.35em;
}

.guide-article__prose li::marker {
  color: var(--color-accent);
  font-weight: 700;
}

.guide-article__prose a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.guide-article__prose a:hover {
  color: var(--color-accent);
}

.guide-article__prose blockquote,
.guide-article__prose .knowledge-example {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-left: .25rem solid var(--color-accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  color: var(--color-text);
  background: var(--color-surface);
}

.guide-article__prose .knowledge-example p:last-child,
.guide-article__prose blockquote > :last-child {
  margin-bottom: 0;
}

.guide-article__prose .wp-block-table,
.guide-article__table-flow {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--color-accent) var(--color-surface);
}

.guide-article__table-flow:focus-visible {
  border-radius: var(--radius-control);
}

.guide-article__prose table {
  width: max-content;
  min-width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.guide-article__table-flow > table {
  margin-bottom: 0;
}

.guide-article__prose :is(th, td) {
  min-width: 9rem;
  padding: .8rem 1rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.guide-article__prose tr > :first-child {
  border-left: 1px solid var(--color-border);
}

.guide-article__prose thead th {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.guide-article__prose tbody tr:nth-child(odd) > :is(th, td) {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
}

.guide-article__prose :is(thead, table:not(:has(thead)) > tbody) tr:first-child > :first-child {
  border-start-start-radius: var(--radius-card);
}

.guide-article__prose :is(thead, table:not(:has(thead)) > tbody) tr:first-child > :last-child {
  border-start-end-radius: var(--radius-card);
}

.guide-article__prose tbody:last-child tr:last-child > :first-child {
  border-end-start-radius: var(--radius-card);
}

.guide-article__prose tbody:last-child tr:last-child > :last-child {
  border-end-end-radius: var(--radius-card);
}

.guide-article__prose caption {
  padding-bottom: var(--space-sm);
  color: var(--color-body);
  font-size: var(--text-xs);
  text-align: left;
}

.guide-article__sources,
.guide-article__related,
.guide-article__faqs {
  padding-top: clamp(3.5rem, 3rem + 2vw, 5rem);
  margin-top: clamp(3.5rem, 3rem + 2vw, 5rem);
  border-top: 1px solid var(--color-border-strong);
}

.guide-article__sources header,
.guide-article__related header,
.guide-article__faqs header {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.guide-article__sources h2,
.guide-article__related h2,
.guide-article__faqs h2 {
  max-width: 20ch;
  font-size: var(--text-h4);
  line-height: 1.15;
}

.guide-article__sources ol,
.guide-article__faqs ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article__sources li,
.guide-article__faqs li {
  border-top: 1px solid var(--color-border);
}

.guide-article__sources li:last-child,
.guide-article__faqs li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.guide-article__sources a,
.guide-article__faqs a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
}

.guide-article__sources a span,
.guide-article__faqs a span {
  flex: none;
  color: var(--color-accent);
}

.guide-article__sources a:is(:hover, :focus-visible),
.guide-article__faqs a:is(:hover, :focus-visible) {
  color: var(--guide-accent-text);
}

.guide-article__related ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article__related li {
  border-top: 1px solid var(--color-border);
}

.guide-article__related li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.guide-article__related a {
  position: relative;
  display: grid;
  gap: .45rem;
  padding: var(--space-md) 2.5rem var(--space-md) 0;
  color: var(--color-text);
  text-decoration: none;
}

.guide-article__related a > span {
  color: var(--guide-accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.guide-article__related strong {
  max-width: 29ch;
  font-size: var(--text-h5);
  letter-spacing: -.025em;
  line-height: 1.25;
}

.guide-article__related small {
  max-width: 65ch;
  color: var(--color-body);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.guide-article__related i {
  position: absolute;
  top: 50%;
  right: .25rem;
  color: var(--color-accent);
  font-size: 1.25rem;
  font-style: normal;
  transform: translateY(-50%);
}

.guide-article__related a:is(:hover, :focus-visible) strong {
  color: var(--guide-accent-text);
}

.guide-article__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  margin-top: var(--space-xl);
  padding-block: .5rem;
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-ui);
  text-decoration: none;
}

.guide-article__back span {
  color: var(--color-accent);
  font-size: 1.25em;
}

.guide-article__back:hover {
  border-bottom-color: var(--color-text);
}

@media (min-width: 60.001rem) {
  .guide-hub__intro .inner-page-intro__title {
    max-width: 47%;
  }

  .guide-hub__intro .inner-page-intro__lead {
    max-width: 46%;
  }

  .guide-hub__intro-art {
    position: absolute;
    top: 50%;
    right: calc(max(var(--gutter), (100% - var(--container-wide)) / 2) - 9rem);
    display: block;
    width: min(59vw, 64rem);
    aspect-ratio: 4 / 3;
    transform: translateY(-43%) scale(1.04);
    pointer-events: none;
  }

  .guide-hub__intro-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (max-width: 86rem) {
  .guide-hub__heading {
    grid-column: 1 / span 3;
  }

  .guide-hub__chapters,
  .guide-hub__empty {
    grid-column: 4 / -1;
  }

  .guide-article__layout {
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 68ch);
    grid-template-areas: 'chapters article';
  }

  .guide-article__contents {
    grid-column: 2;
    grid-row: 1;
    position: static;
    margin-bottom: var(--space-xl);
  }

  .guide-article__main {
    grid-row: 2;
  }

  .guide-article__chapters {
    grid-row: 1 / span 2;
  }

  .guide-article__contents-desktop {
    position: static;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .guide-article__contents-inner ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-lg);
  }
}

@media (max-width: 68.75rem) {
  .guide-hub__body > .container-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-hub__heading,
  .guide-hub__chapters,
  .guide-hub__empty {
    grid-column: 1;
  }

  .guide-hub__heading {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--space-md) var(--space-xl);
  }

  .guide-hub__heading .guide-page__eyebrow {
    grid-column: 1 / -1;
  }

  .guide-hub__heading h2 {
    max-width: 16ch;
  }

  .guide-hub__heading > p:last-child {
    align-self: end;
  }

  .guide-article__masthead > .container-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-article__meta {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-xl);
  }

  .guide-article__meta > div {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    border-bottom: 1px solid rgb(208 205 197 / 16%);
  }

  .guide-article__meta > div + div {
    padding-left: var(--space-md);
    border-left: 1px solid rgb(208 205 197 / 16%);
  }
}

@media (max-width: 48rem) {
  .guide-hub__body {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .guide-hub__body > .container-wide {
    gap: var(--space-2xl);
  }

  .guide-hub__heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-hub__heading .guide-page__eyebrow,
  .guide-hub__heading h2,
  .guide-hub__heading > p:last-child {
    grid-column: 1;
  }

  .guide-hub__chapter-link,
  .guide-hub__chapter--featured .guide-hub__chapter-link {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--space-md);
  }

  .guide-hub__chapter-action {
    grid-column: 2;
    justify-self: start;
    margin-top: var(--space-xs);
  }

  .guide-hub__chapter--featured {
    border-radius: var(--radius-card);
  }

  .guide-hub__chapter--featured .guide-hub__chapter-link {
    padding: var(--space-lg);
  }

  .guide-hub__chapter--featured .guide-hub__chapter-number {
    font-size: 3.2rem;
  }

  .guide-hub__chapter-summary {
    line-height: 1.65;
  }

  .guide-article__masthead {
    padding-top: calc(4.8rem + var(--space-xl));
    padding-bottom: var(--space-xl);
  }

  .guide-article__breadcrumb li[aria-current='page'] {
    display: none;
  }

  .guide-article__breadcrumb li:nth-last-child(2)::after {
    content: none;
  }

  .guide-article__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-article__meta > div {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .guide-article__meta > div + div {
    padding-left: 0;
    border-left: 0;
  }

  .guide-article__body {
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .guide-article__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'chapters'
      'contents'
      'article';
    gap: var(--space-md);
  }

  .guide-article__chapters,
  .guide-article__contents,
  .guide-article__main {
    grid-column: 1;
    grid-row: auto;
  }

  .guide-article__chapters,
  .guide-article__contents {
    position: static;
  }

  .guide-article__main {
    margin-top: var(--space-lg);
  }

  .guide-article__chapters-desktop,
  .guide-article__contents-desktop {
    display: none;
  }

  .guide-article__mobile-menu {
    display: block;
    position: static;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .guide-article__mobile-menu summary {
    display: list-item;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-ui);
    cursor: pointer;
  }

  .guide-article__nav-inner,
  .guide-article__contents-inner {
    padding-top: var(--space-md);
  }

  .guide-article__contents-inner ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-article__prose {
    line-height: 1.76;
  }

  .guide-article__prose > p:first-child {
    line-height: 1.62;
  }
}

@media (max-width: 32rem) {
  .guide-hub__chapter-link,
  .guide-hub__chapter--featured .guide-hub__chapter-link {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    padding-block: var(--space-lg);
  }

  .guide-hub__chapter--featured .guide-hub__chapter-link {
    padding-inline: var(--space-md);
  }

  .guide-hub__chapter-number {
    font-size: 2.3rem;
  }

  .guide-hub__chapter--featured .guide-hub__chapter-number {
    font-size: 2.7rem;
  }

  .guide-hub__chapter-action {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-hub__chapter-link,
  .guide-article__nav-inner a,
  .guide-article__contents-inner a {
    transition: none;
  }
}