.crumbs { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crumbs a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.page-head { padding-block: clamp(36px, 6vw, 72px) clamp(20px, 3vw, 36px); }
.page-head h1 { font-size: clamp(32px, 5vw, 60px); max-width: 20ch; margin-top: 18px; }
.page-head .lead { margin-top: 18px; max-width: 62ch; }
.meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 14px; color: var(--muted); }
.tag { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 750; }
.tag--g { background: var(--mint); }
.tag--c { background: #ffd2c8; }
.art { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; padding-bottom: clamp(48px, 7vw, 96px); }
.art h2 { font-size: clamp(24px, 3vw, 34px); margin: clamp(32px, 5vw, 52px) 0 14px; letter-spacing: -.03em; line-height: 1.12; }
.art h3 { font-size: clamp(19px, 2vw, 22px); margin: 24px 0 8px; }
.art p, .art li { font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.65; color: var(--ink-2); font-weight: 460; }
.art p { margin: 0 0 16px; }
.art ul, .art ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.art b, .art strong { color: var(--ink); font-weight: 750; }
.art a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.art code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: #fffbe0; border: 1.5px solid var(--ink); border-radius: 6px; padding: 1px 6px; color: var(--ink); overflow-wrap: anywhere; }
.box { margin: 26px 0; background: var(--mint); border: var(--bd); border-radius: 20px; padding: 18px 22px; box-shadow: var(--sh-s); }
.box h3 { margin: 0 0 8px; font-size: 19px; }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
.box--y { background: #fffbe0; }
.plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0 26px; }
.plat { background: var(--white); border: var(--bd); border-radius: 18px; padding: 16px 18px 18px; box-shadow: var(--sh-s); display: grid; gap: 8px; align-content: start; }
.plat h3 { margin: 0; font-size: 19px; }
.plat dl { margin: 0; display: grid; gap: 6px; font-size: 15px; }
.plat dt { font-weight: 800; color: var(--ink); }
.plat dd { margin: 0 0 6px; color: var(--ink-2); font-weight: 470; overflow-wrap: anywhere; }
.src-list { font-size: 14.5px; }
.src-list li { font-size: 14.5px; }
.art-cta { margin: clamp(36px, 5vw, 56px) 0 0; background: var(--green); border: var(--bd); border-radius: 24px; box-shadow: var(--sh); padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 12px; }
.art-cta h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
.art-cta p { margin: 0; color: var(--ink); font-weight: 520; }
.art-cta .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.related { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-bottom: clamp(48px, 7vw, 96px); }
.related h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 20px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: grid; gap: 10px; align-content: start; background: var(--white); border: var(--bd); border-radius: 22px; padding: 22px; box-shadow: var(--sh-s); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.card h3 { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.card .more { font-weight: 800; margin-top: 4px; }
.hub-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hub-top { padding-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 900px) { .cards, .plats { grid-template-columns: 1fr; } }
@media (min-width: 620px) and (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.top .nav a.on { background: var(--yellow); }
.top__in .top__login { margin-left: auto; margin-right: -4px; }
.top__in .nav { margin-left: 28px; }
@media (max-width: 520px) { .top__login { display: none; } }