/* Blue Horizon blog: reading layout on paper, uses the tokens from /styles.css */

.blog-hero { padding-top: clamp(120px, 16vh, 168px); padding-bottom: var(--s7); }
.blog-hero h1 { font-size: var(--t-3xl); letter-spacing: var(--track-display); line-height: 0.95; max-width: 12em; }
.blog-hero .lead { margin-top: var(--s5); }

/* index cards */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--s5); padding-bottom: var(--s10); }
.post-card { display: flex; flex-direction: column; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--card-pad); gap: var(--s4); text-decoration: none; color: inherit; transition: transform var(--spring-dur) var(--spring); }
@media (hover: hover) { .post-card:hover { transform: translateY(-6px); } }
.post-card img { border-radius: var(--card-inner-r); aspect-ratio: 1200 / 630; object-fit: cover; width: 100%; }
.post-card h2 { font-size: var(--t-xl); letter-spacing: var(--track-heading); line-height: 1.1; }
.post-card p { color: var(--muted); }
.post-card .meta { font-size: var(--t-xs); letter-spacing: var(--track-small); color: var(--muted); margin-top: auto; }

/* article */
.post { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
.post-head { padding-top: clamp(120px, 16vh, 168px); }
.crumbs { font-size: var(--t-xs); letter-spacing: var(--track-small); color: var(--muted); margin-bottom: var(--s5); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.post-head h1 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: var(--track-title); line-height: 1.02; }
.post-head .dek { margin-top: var(--s5); font-size: var(--t-lg); line-height: 1.5; color: var(--muted); }
.byline { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); font-size: var(--t-sm); color: var(--muted); }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.byline b { color: var(--ink); font-weight: 500; }
.post-cover { max-width: 1040px; margin: var(--s7) auto 0; padding-inline: var(--gutter); }
.post-cover img { border-radius: var(--r4); width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }

.post-body { padding-block: var(--s8) var(--s9); font-size: 19px; line-height: 1.65; }
.post-body > * + * { margin-top: var(--s5); }
.post-body h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: var(--track-heading); line-height: 1.12; margin-top: var(--s8); }
.post-body h3 { font-size: var(--t-lg); letter-spacing: var(--track-heading); line-height: 1.2; margin-top: var(--s6); }
.post-body ul, .post-body ol { padding-left: 1.2em; }
.post-body li + li { margin-top: var(--s2); }
.post-body a { color: var(--blue-ink); }
.post-body strong { font-weight: 600; }
.post-body blockquote { margin-inline: 0; padding-left: var(--s5); border-left: 2px solid var(--blue); font-size: var(--t-lg); line-height: 1.45; }
.post-body sup a { text-decoration: none; font-size: 0.75em; }

.takeaways { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--card-pad); }
.takeaways h2 { margin-top: 0; font-size: var(--t-lg); }
.takeaways ul { margin: var(--s4) 0 0; }

/* figures and diagrams */
.fig { margin-inline: 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--card-r); padding: var(--card-pad); }
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption { margin-top: var(--s4); font-size: var(--t-xs); letter-spacing: var(--track-small); color: var(--muted); line-height: 1.5; }
.fig.dark { background: var(--night); border-color: var(--night); color: var(--on-night); }
.fig.dark figcaption { color: var(--on-night-muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
.stat { background: var(--paper); border-radius: var(--card-inner-r); padding: var(--s5); }
.fig.dark .stat { background: var(--night-2); }
.stat b { display: block; font-size: clamp(36px, 4vw, 52px); font-weight: 600; letter-spacing: var(--track-title); line-height: 1; font-variant-numeric: tabular-nums; }
.fig.dark .stat b { color: var(--ice); }
.stat span { display: block; margin-top: var(--s3); font-size: var(--t-sm); line-height: 1.4; color: var(--muted); }
.fig.dark .stat span { color: var(--on-night-muted); }

.sources { border-top: 1px solid var(--line); padding-top: var(--s6); font-size: var(--t-sm); color: var(--muted); }
.sources h2 { font-size: var(--t-lg); margin-top: 0; color: var(--ink); }
.sources ol { margin-top: var(--s4); }
.sources a { color: var(--muted); word-break: break-word; }

.related { padding-bottom: var(--s9); }
.related h2 { font-size: var(--t-xl); letter-spacing: var(--track-heading); margin-bottom: var(--s5); }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.related a { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }

/* diagrams: plain HTML so they reflow on phones */
.fig-title { font-weight: 600; font-size: var(--t-md); letter-spacing: var(--track-heading); margin-bottom: var(--s4); }
.bp-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); counter-reset: step; }
.bp-flow .bp-step { background: var(--paper); border-radius: var(--card-inner-r); padding: var(--s4); }
.bp-flow .bp-step b { display: block; font-size: var(--t-xs); letter-spacing: var(--track-small); color: var(--muted); font-weight: 500; }
.bp-flow .bp-step span { display: block; margin-top: var(--s2); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; }
.bp-flow .bp-step small { display: block; margin-top: var(--s2); font-size: 14px; color: var(--muted); line-height: 1.4; }
.bp-flow .bp-step.on { background: var(--blue); color: #fff; }
.bp-flow .bp-step.on b, .bp-flow .bp-step.on small { color: rgba(255,255,255,.82); }
.fig.dark .bp-flow .bp-step { background: var(--night-2); }
.fig.dark .bp-flow .bp-step b, .fig.dark .bp-flow .bp-step small { color: var(--on-night-muted); }

.bars { display: grid; grid-template-columns: minmax(84px, max-content) 1fr max-content; gap: var(--s4) var(--s3); align-items: center; font-size: var(--t-sm); line-height: 1.3; }
.bar { display: contents; }
.bar .track { height: 26px; background: var(--paper); border-radius: var(--pill); overflow: hidden; }
.bar .fill { height: 100%; min-width: 6px; background: var(--muted); border-radius: var(--pill); }
.bar .fill.hi { background: var(--blue); }
.bar .val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.tl { list-style: none; padding: 0; margin: 0; }
.tl li { position: relative; padding: 0 0 var(--s5) 36px; }
.tl li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blue); background: var(--paper-2); }
.tl li:first-child::before { background: var(--blue); }
.tl li::after { content: ""; position: absolute; left: 8px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::after { display: none; }
.tl b { display: block; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.3; }
.tl span { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }

.journey .track { position: relative; height: 34px; background: var(--paper); border-radius: var(--pill); overflow: hidden; }
.journey .fill { height: 100%; background: var(--blue); }
.journey .labels { display: grid; grid-template-columns: 61fr 39fr; gap: var(--s3); margin-top: var(--s3); font-size: var(--t-sm); line-height: 1.4; }
.journey .labels b { display: block; font-weight: 600; font-size: var(--t-md); }
.journey .labels span { color: var(--muted); }

.pair { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }
.bp-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--card-inner-r); background: linear-gradient(135deg, #18233d, var(--night)); overflow: hidden; color: #fff; }
.bp-thumb .face { position: absolute; right: 8%; bottom: 0; width: 38%; aspect-ratio: 1 / 1.15; border-radius: 50% 50% 0 0; background: #2a3a5e; }
.bp-thumb .face::before { content: ""; position: absolute; left: 50%; top: 14%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #41557f; }
.bp-thumb .words { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); width: 52%; font-weight: 600; font-size: clamp(18px, 3vw, 28px); line-height: 1.05; letter-spacing: -0.03em; }
.pair .bp-yt b { display: block; font-size: var(--t-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.pair .bp-yt span { display: block; margin-top: var(--s2); font-size: var(--t-xs); color: var(--muted); }
.pair .note { margin-top: var(--s4); font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.strike { text-decoration: line-through; color: var(--muted); }

.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); counter-reset: rung; }
.ladder li { counter-increment: rung; display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: center; background: var(--paper); border-radius: var(--card-inner-r); padding: var(--s3) var(--s4); font-weight: 500; }
.ladder li::before { content: counter(rung); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }
.ladder li:first-child::before { background: var(--blue); color: #fff; }
.ladder li small { display: block; color: var(--muted); font-weight: 400; font-size: 14px; }

.post-body .tl, .post-body .ladder { padding-left: 0; }
.ladder li > span { line-height: 1.3; }