/* Hallmark · macrostructure: field guide · tone: quiet editorial · anchor hue: Inkive clay */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 */
@import url("tokens.css");

.guide-page { background: var(--color-paper); }
.guide-page h3 { font-family: var(--font-display); font-style: normal; font-weight: 500; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.guide-page:lang(en) h3 { font-family: var(--font-display-en); }
.guide-page:lang(zh-CN) h3 { text-wrap: balance; }
.guide-page [id] { scroll-margin-top: var(--space-xl); }
.guide-page .story-nav__brand { scroll-margin-top: 0; }

.guide-hero { padding: clamp(4rem, 8vw, 8rem) var(--page-gutter) clamp(5rem, 9vw, 9rem); background: var(--color-paper-2); border-bottom: var(--rule-fine) solid var(--color-rule-strong); }
.guide-hero__inner { max-width: var(--page-max); margin: 0 auto; }
.guide-breadcrumb { color: var(--color-muted); font-size: var(--text-sm); }
.guide-breadcrumb a:hover { color: var(--color-accent-press); }
.guide-breadcrumb span { padding-inline: var(--space-xs); }
.guide-version { margin-top: var(--space-3xl); color: var(--color-accent-press); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); }
.guide-hero h1 { max-width: 13ch; margin-top: var(--space-lg); font-size: clamp(3.2rem, 6.5vw, 6.8rem); }
.guide-hero__lede { max-width: 55ch; margin-top: var(--space-xl); font-size: clamp(1.06rem, 1.55vw, 1.28rem); line-height: 1.8; }
.guide-hero__jump { display: inline-block; margin-top: var(--space-xl); padding-bottom: var(--space-xs); border-bottom: var(--rule-fine) solid var(--color-accent-press); color: var(--color-accent-press); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.guide-hero__jump:hover { color: var(--color-ink); border-color: var(--color-ink); }

.guide-steps { padding: clamp(5rem, 9vw, 9rem) var(--page-gutter); }
.guide-section-head { display: flex; align-items: baseline; gap: var(--space-xl); max-width: var(--page-max); margin: 0 auto var(--space-3xl); }
.guide-section-head > p { flex: none; color: var(--color-accent-press); font-size: var(--text-sm); font-weight: 700; }
.guide-section-head h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.guide-steps__list { display: grid; max-width: var(--page-max); margin: 0 auto; }
.guide-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .45fr); align-items: center; gap: clamp(2rem, 8vw, 8rem); min-height: 370px; padding: var(--space-2xl) 0; border-top: var(--rule-fine) solid var(--color-rule-strong); }
.guide-step:last-child { border-bottom: var(--rule-fine) solid var(--color-rule-strong); }
.guide-step__copy { min-width: 0; }
.guide-step__label { margin-bottom: var(--space-lg); color: var(--color-accent-press); font-size: var(--text-sm); font-weight: 700; }
.guide-step h3 { max-width: 16ch; font-size: clamp(2rem, 3vw, 3rem); }
.guide-step__copy > p:last-child { max-width: 57ch; margin-top: var(--space-lg); line-height: 1.8; }
.guide-step figure { justify-self: center; width: min(100%, 178px); }
.guide-step img { width: 100%; filter: drop-shadow(0 18px 24px var(--color-product-shadow)); }

.guide-faq { padding: clamp(5rem, 9vw, 9rem) var(--page-gutter); background: var(--color-paper-2); }
.guide-faq__intro { max-width: var(--page-max); margin: 0 auto; }
.guide-faq__intro .guide-version { margin-top: 0; }
.guide-faq__intro h2 { margin-top: var(--space-lg); font-size: clamp(2.7rem, 5vw, 5.5rem); }
.guide-faq__intro > p:last-child { max-width: 45ch; margin-top: var(--space-lg); line-height: 1.75; }
.guide-faq__layout { display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, .68fr); gap: clamp(2rem, 7vw, 7rem); max-width: var(--page-max); margin: var(--space-3xl) auto 0; }
.guide-faq__nav { position: sticky; top: var(--space-xl); align-self: start; display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-fine) solid var(--color-rule-strong); }
.guide-faq__nav a { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.guide-faq__nav a:hover { color: var(--color-accent-press); }
.guide-faq__groups { min-width: 0; }
.guide-faq-group + .guide-faq-group { margin-top: var(--space-3xl); }
.guide-faq-group h3 { margin-bottom: var(--space-lg); font-size: clamp(1.7rem, 2.5vw, 2.5rem); }
.guide-question { border-top: var(--rule-fine) solid var(--color-rule-strong); }
.guide-question:last-child { border-bottom: var(--rule-fine) solid var(--color-rule-strong); }
.guide-question summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding: var(--space-lg) 0; cursor: pointer; list-style: none; font-size: clamp(1rem, 1.25vw, 1.15rem); font-weight: 600; line-height: 1.5; }
.guide-question summary::-webkit-details-marker { display: none; }
.guide-question summary::after { content: "+"; flex: none; color: var(--color-accent-press); font: 400 var(--text-xl) / 1 var(--font-body); }
.guide-question[open] summary::after { content: "−"; }
.guide-question summary:hover { color: var(--color-accent-press); }
.guide-question > div { padding: 0 var(--space-xl) var(--space-xl) 0; }
.guide-question > div p { max-width: 65ch; color: var(--color-ink-2); line-height: 1.85; }

.guide-end { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: var(--space-3xl) var(--page-gutter); background: var(--color-paper-deep); }
.guide-end p { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1.3; }
.guide-page:lang(en) .guide-end p { font-family: var(--font-display-en); }

@media (max-width: 820px) {
  .guide-faq__layout { grid-template-columns: minmax(0, 1fr); }
  .guide-faq__nav { position: static; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
}
@media (max-width: 620px) {
  .guide-hero { padding-block: var(--space-2xl) var(--space-3xl); }
  .guide-version { margin-top: var(--space-2xl); }
  .guide-hero h1 { font-size: clamp(3rem, 12vw, 4.4rem); }
  .guide-section-head { display: block; margin-bottom: var(--space-2xl); }
  .guide-section-head h2 { margin-top: var(--space-md); }
  .guide-step { grid-template-columns: minmax(0, 1fr) minmax(0, .32fr); gap: var(--space-sm); min-height: 0; padding-block: var(--space-2xl); }
  .guide-step h3 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .guide-step__copy > p:last-child { font-size: var(--text-sm); }
  .guide-step figure { align-self: center; width: 100%; }
  .guide-faq__layout { margin-top: var(--space-2xl); }
  .guide-faq-group + .guide-faq-group { margin-top: var(--space-2xl); }
  .guide-question summary { min-height: 64px; }
  .guide-end { display: block; }
  .guide-end .story-button { margin-top: var(--space-xl); }
}