.guide-body { background: var(--white); }
.guide-header-shell { color: var(--white); background: var(--ink); }
.guide-site-header { position: relative; }
.guide-site-header .desktop-nav a[aria-current="page"] { color: #ffd58d; }

.guide-masthead {
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7,26,36,.95), rgba(7,26,36,.78) 58%, rgba(7,26,36,.32)),
    url("../assets/china-helper-hero.png") center 42% / cover no-repeat;
}
.guide-masthead-inner { width: min(100% - 3rem, var(--content)); margin: 0 auto; padding: 6.5rem 0 5rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.3rem; color: #bfd0d8; font-size: .84rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.guide-masthead h1 { max-width: 900px; margin-bottom: 1rem; font-size: 6.3rem; line-height: .95; }
.guide-masthead .lede { max-width: 760px; margin: 0; color: rgba(255,255,255,.9); font-size: 1.18rem; }

.guide-hub { width: min(100% - 3rem, var(--content)); margin: 0 auto; padding: 5rem 0 7rem; }
.guide-hub-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 3rem; }
.guide-hub-intro p { color: var(--muted); }
.guide-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.guide-card { min-height: 280px; padding: 1.6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-card:first-child { grid-column: span 2; color: var(--white); background: var(--ink); }
.guide-card h2, .guide-card h3 { margin-bottom: .9rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; line-height: 1.15; }
.guide-card:first-child h2 { font-size: 2.25rem; }
.guide-card a { text-decoration: none; }
.guide-card a:hover { text-decoration: underline; text-underline-offset: 4px; }
.guide-card p { color: var(--muted); }
.guide-card:first-child p { color: #bfd0d8; }
.guide-card .guide-meta { margin-bottom: 2rem; }
.guide-card:first-child .guide-meta { color: #90ddd6; }

.article-masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.article-masthead-inner { width: min(100% - 3rem, 940px); margin: 0 auto; padding: 5.5rem 0 3.5rem; }
.article-masthead h1 { max-width: 920px; margin-bottom: 1.2rem; color: var(--ink); font-size: 5.8rem; line-height: .96; }
.article-masthead .lede { max-width: 780px; color: var(--ink-soft); font-size: 1.2rem; }
.article-byline { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: .85rem; }

.article-layout { width: min(100% - 3rem, 1060px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 740px) 240px; gap: 5rem; padding: 4.5rem 0 7rem; }
.article-content { min-width: 0; }
.article-content h2 { margin: 4rem 0 1rem; font-size: clamp(2rem, 4vw, 3.15rem); }
.article-content h3 { margin: 2.2rem 0 .65rem; font-size: 1.3rem; }
.article-content p, .article-content li { color: var(--ink-soft); }
.article-content a { color: var(--red-dark); font-weight: 750; }
.article-content section { scroll-margin-top: 1rem; }
.article-note { padding: 1.1rem 1.2rem; border-inline-start: 4px solid var(--gold); background: #fff8e8; }
.article-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; margin: 1.5rem 0 2.5rem; padding: 1.4rem; background: var(--paper); border: 1px solid var(--line); }
.article-checklist li { list-style: none; position: relative; padding-inline-start: 1.55rem; }
.article-checklist li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--jade); font-weight: 900; }
.article-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2.5rem; }
.article-table th, .article-table td { padding: .85rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.article-table th { color: var(--ink); background: var(--paper); }
.article-faq details { border-bottom: 1px solid var(--line); }
.article-faq summary { padding: 1rem 0; font-weight: 850; cursor: pointer; }
.article-toc { position: sticky; top: 1.5rem; align-self: start; padding-inline-start: 1.2rem; border-inline-start: 1px solid var(--line); }
.article-toc p { margin-bottom: .7rem; color: var(--red); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.article-toc a { display: block; padding: .35rem 0; color: var(--muted); font-size: .86rem; text-decoration: none; }
.article-toc a:hover { color: var(--ink); }
.article-cta { margin-top: 4rem; padding: 2rem; color: var(--white); background: var(--ink); }
.article-cta p { color: #bfd0d8; }
.article-cta .button { background: var(--red); color: var(--white); }

@media (max-width: 900px) {
  .guide-masthead h1, .article-masthead h1 { font-size: 4.5rem; }
  .guide-hub-intro, .article-layout { grid-template-columns: 1fr; }
  .guide-card-grid { grid-template-columns: 1fr 1fr; }
  .guide-card:first-child { grid-column: 1 / -1; }
  .article-toc { position: static; order: -1; padding: 0 0 1rem; border-inline-start: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .guide-masthead-inner, .guide-hub, .article-masthead-inner, .article-layout { width: calc(100% - 2rem); }
  .guide-masthead-inner { padding: 4.5rem 0 3.5rem; }
  .guide-masthead h1, .article-masthead h1 { font-size: 3.15rem; }
  .guide-hub { padding: 3.5rem 0 5rem; }
  .guide-hub-intro, .guide-card-grid { grid-template-columns: 1fr; }
  .guide-card:first-child { grid-column: auto; }
  .article-layout { gap: 2.5rem; padding: 3rem 0 5rem; }
  .article-checklist { grid-template-columns: 1fr; }
  .article-table { display: block; overflow-x: auto; }
}