.a-head { max-width: 1060px; margin: 0 auto; padding: 22px var(--gutter) 0; }
.a-head h1 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 8px 0 10px; max-width: 24ch; }
.a-dek { font-size: 16px; color: var(--text-2); margin: 0 0 14px; max-width: 62ch; line-height: 1.55; }
.a-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 12.5px; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.a-meta .av { width: 26px; height: 26px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.a-meta b { color: var(--text-2); font-weight: 600; }
.a-meta .share { margin-left: auto; display: flex; gap: 6px; }
.a-body { max-width: 1060px; margin: 0 auto; padding: 22px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 680px) 1fr; gap: 44px; align-items: start; }
.a-hero { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 25%; border-radius: 12px; margin-bottom: 6px; }
.a-cap { font-size: 12px; color: var(--muted); margin-bottom: 22px; }
.prose2 { font-size: 16px; line-height: 1.72; color: rgba(255, 255, 255, .82); }
.prose2 p { margin: 0 0 1.05em; }
.prose2 h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: #fff; margin: 34px 0 10px; scroll-margin-top: calc(var(--hdr-total) + 16px); }
.prose2 a { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.prose2 strong { color: #fff; }
.answer { padding: 16px 18px; border-radius: 12px; background: linear-gradient(110deg, rgba(232, 20, 42, .12), rgba(232, 20, 42, .03)); border: 1px solid rgba(232, 20, 42, .3); margin-bottom: 24px; }
.answer .lbl { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.answer ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; color: #fff; }
.answer li + li { margin-top: 4px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 6px 0 24px; }
.cmp th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); padding: 10px 12px; }
.cmp td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.cmp tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.cmp td:first-child { font-weight: 700; color: #fff; white-space: nowrap; }
.cmp .ok { color: var(--deal); } .cmp .warn { color: var(--gold); }
.vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 26px; }
.vcard { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.vcard:hover { border-color: var(--line-2); }
.vcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vcard div { padding: 9px 10px; }
.vcard b { display: block; font-size: 13.5px; }
.vcard span { color: var(--muted); font-size: 12px; }
.tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface); border-left: 3px solid var(--gold); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; color: rgba(255, 255, 255, .85); }
.check { list-style: none; padding: 0; margin: 0 0 18px; }
.check li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.check li::before { content: '✓'; color: var(--deal); font-weight: 900; }
.a-aside { position: sticky; top: calc(var(--hdr-total) + 18px); display: flex; flex-direction: column; gap: 14px; }
.toc2 { padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.toc2 h3, .side-v h3 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc2 a { display: block; padding: 6px 0 6px 10px; border-left: 2px solid var(--line); font-size: 13px; color: var(--text-2); line-height: 1.35; }
.toc2 a.on { border-color: var(--red); color: #fff; font-weight: 600; }
.side-v { padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.side-v a { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.side-v img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.feedback { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin: 30px 0; font-size: 14px; flex-wrap: wrap; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related a { display: flex; flex-direction: column; gap: 6px; }
.related img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.related b { font-size: 14px; line-height: 1.3; }
.progress { position: fixed; top: var(--hdr-total); left: 0; height: 2px; background: var(--red); z-index: 59; width: 0; }
@media (max-width: 960px) { .a-body { grid-template-columns: 1fr; } .a-aside { display: none; } }
@media (max-width: 600px) { .vcards, .related { grid-template-columns: 1fr 1fr; } .prose2 { font-size: 15.5px; } .cmp { font-size: 13px; } .cmp td:first-child { white-space: normal; } .a-meta .share { margin-left: 0; } .a-hero { aspect-ratio: 16 / 9; } }
/* Rails: article body comes from the blog editor — style its plain tags like the mockup's blocks */
.prose2 table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.prose2 th, .prose2 td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose2 th { color: var(--text); font-weight: 700; background: var(--surface); }
.prose2 img { max-width: 100%; height: auto; border-radius: var(--r); }
.prose2 blockquote { margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--surface); border-radius: 0 12px 12px 0; color: var(--text-2); }
.prose2 iframe { max-width: 100%; }