/* One tip as its own page (/tips/lc-NN/, 7 Nov 2026): pictures left, the whole post right; one column on phones. */
.tip-page { padding-top: clamp(96px, 12vw, 140px); padding-bottom: clamp(56px, 8vw, 96px); }
.tip-page .crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.tip-page .crumbs a { color: inherit; }
.tip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.tip-pics { display: grid; gap: 14px; }
.tip-pics img { width: 100%; height: auto; border-radius: var(--r-md); background: var(--stage); }
.tip-body { position: sticky; top: 96px; }
.tip-meta { font-size: 14px; color: var(--ink-3); }
.tip-meta time::before { content: "· "; }
.tip-body h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.3; margin-top: 8px; }
.tip-note { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.tip-text { margin-top: 20px; max-width: 68ch; }
.tip-text p { font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.tip-text p + p { margin-top: 14px; }
.tip-tags { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.tip-body .hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.tip-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.tip-pager a { color: var(--ink-2); max-width: 48%; }
.tip-pager a[rel="next"] { text-align: right; margin-left: auto; }
.tip-pager a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .tip-grid { grid-template-columns: 1fr; }
  .tip-body { position: static; order: -1; } /* the heading and text first on phones, the pictures after */
}