.ls-article .ls-hero { grid-template-columns: 1fr 1fr; align-items: end; }
.ls-hero h1 { font-size: clamp(64px, 7.6vw, 116px); }
.ls-hero-copy { max-width: 36em; padding-bottom: 4px; }
.ls-hero-copy .article-deck { max-width: none; }
.ls-preview-note { margin: 18px 0 0; max-width: 43em; font-size: 12px !important; line-height: 1.7 !important; color: var(--muted); }
.ls-shot { margin: 30px 0 40px; }
.ls-shot > a { display: block; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.ls-shot img { display: block; width: 100%; height: auto; background: #242424; }
.ls-shot figcaption { max-width: 80em; }
.ls-section { scroll-margin-top: 160px; row-gap: 4px; }
.ls-section > .ls-shot { grid-column: 1 / -1; margin-bottom: 0; }
.ls-note { padding: 22px 26px; border-left: 2px solid var(--foreground); background: var(--surface); margin: 28px 0; }
.ls-note p { font-size: 16px; margin: 0; }
.ls-check-example { border-block: 1px solid var(--rule); margin: -28px 0 70px; padding: 16px 0; }
.ls-check-example summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-size: 15px; }
.ls-check-example > p { max-width: 740px; font-size: 17px; line-height: 1.8; margin: 24px 0; }
.ls-check-example .ls-shot { margin-bottom: 16px; }
.ls-article code { font-size: .85em; overflow-wrap: anywhere; }
@media(max-width:700px) {
  .ls-article .ls-hero { grid-template-columns: 1fr; gap: 32px; }
  .ls-hero h1 { font-size: clamp(58px, 14vw, 88px); }
  .ls-section > .ls-shot { grid-column: auto; margin-top: 24px; }
  .ls-note { padding: 18px 20px; }
}