/* The blog on G-Technica's blog recipe: a ruled sheet, the blog intro, rows and the article layout. The
   editorial illustrations stay on the featured card, the post hero and each row. */
.blog-page .blog-sheet { padding-inline:0; }
.blog-page .gt-blog-intro h1 { margin:0; }
.blog-intro p { margin:0; max-width:52ch; color:var(--gt-color-ink-2); font-size:18px; line-height:1.65; }

/* Featured post */
.blog-feature { padding:32px 48px 48px; border-bottom:1px solid var(--gt-color-rule); }
.blog-card { display:block; min-width:0; color:var(--gt-color-ink); text-decoration:none; }
.blog-card-featured { display:grid; grid-template-columns:1.15fr 1fr; border:1px solid var(--gt-color-rule); background:var(--gt-color-raised); }
.blog-card-copy { display:flex; flex-direction:column; justify-content:center; gap:16px; padding:36px; }
.blog-page .blog-card h2 { margin:0; font-size:clamp(30px,3.2vw,44px); line-height:1.15; letter-spacing:-.04em; text-wrap:balance; }
.blog-card-copy>p { margin:0; max-width:46ch; font-size:16px; line-height:1.7; color:var(--gt-color-ink-2); }
.blog-card:hover h2 { color:var(--gt-color-green-800); }
.blog-card:focus-visible,.blog-row a:focus-visible { outline:3px solid var(--gt-color-green-700); outline-offset:4px; }
.blog-art { overflow:hidden; aspect-ratio:4/3; background:var(--gt-color-surface-tint); }
.blog-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.blog-card:hover .blog-art img,.blog-row:hover .blog-art img { transform:scale(1.025); }

/* Rows */
.blog-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:32px 48px 8px; }
.blog-page .blog-section-heading h2 { margin:0; font-size:28px; letter-spacing:-.04em; }
.blog-section-heading>a { color:var(--gt-color-green-800); text-decoration:none; font-size:13px; }
.blog-row { grid-template-columns:var(--gt-layout-sidebar) minmax(0,1fr) 220px; align-items:start; }
.blog-row:last-child { border-bottom:0; }
.blog-page .blog-row h2 { margin:0; }
.blog-row .gt-blog-post-link p { margin:0; }
.blog-row-art { display:block; }

/* Article */
.blog-back { padding:12px 48px; border-bottom:1px solid var(--gt-color-rule); }
.blog-post-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; padding:44px 48px; border-bottom:1px solid var(--gt-color-rule); }
.blog-page .blog-post-heading h1 { margin:24px 0 20px; line-height:1.1; letter-spacing:-.05em; text-wrap:balance; }
.blog-deck { margin:0; max-width:40ch; font-size:18px; line-height:1.65; color:var(--gt-color-ink-2); }
.gt-blog-article-layout.blog-no-toc { grid-template-columns:minmax(0,1fr); }
.blog-page .blog-no-toc .gt-blog-prose { margin-inline:auto; }
.blog-page .gt-blog-toc { position:sticky; top:var(--site-header-height); align-self:start; }
.gt-blog-toc a { gap:12px; color:var(--gt-color-ink-2); text-decoration:none; border-bottom:1px solid var(--gt-color-rule-soft); }
.gt-blog-toc a span { font:10px/1.9 var(--gt-font-mono); color:var(--gt-color-green-800); }
.gt-blog-toc a:hover { color:var(--gt-color-green-800); }
.blog-page .gt-blog-prose { max-width:816px; }
.blog-page .gt-blog-prose p,.blog-page .gt-blog-prose li { font-size:18px; line-height:1.85; }
.blog-page .gt-blog-prose h2 { margin:48px 0 20px; font-size:30px; line-height:1.25; letter-spacing:-.035em; scroll-margin-top:calc(var(--site-header-height) + 24px); }
.blog-page .gt-blog-prose h2:first-child { margin-top:0; }
.gt-blog-prose pre { margin-block:24px; font-size:13px; }
.gt-blog-prose img { display:block; max-width:100%; height:auto; margin-block:32px; }
.gt-blog-article-end a { color:inherit; text-decoration:none; }
.blog-more { border-top:1px solid var(--gt-color-rule); }

@media(max-width:1000px) {
  .blog-row { grid-template-columns:180px minmax(0,1fr) 160px; gap:32px; }
  .blog-post-hero { gap:28px; }
}
@media(max-width:760px) {
  .blog-feature { padding:24px 20px 32px; }
  .blog-card-featured,.blog-post-hero { grid-template-columns:1fr; }
  .blog-card-copy { padding:24px; }
  .blog-section-heading { padding:28px 20px 4px; }
  .blog-page .blog-section-heading h2 { font-size:23px; }
  .blog-row { grid-template-columns:1fr; gap:16px; padding:28px 20px; }
  .blog-row .gt-blog-meta { flex-direction:row; }
  .blog-row-art { order:-1; }
  .blog-back { padding-inline:20px; }
  .blog-post-hero { gap:28px; padding:28px 20px; }
  .blog-post-hero .blog-art { order:2; }
  .gt-blog-article-layout { grid-template-columns:1fr; }
  .blog-page .gt-blog-toc { position:static; padding:24px 20px; border-right:0; border-bottom:1px solid var(--gt-color-rule); }
  .blog-page .gt-blog-prose { padding:28px 20px; }
  .blog-page .gt-blog-prose p,.blog-page .gt-blog-prose li { font-size:17px; }
}
@media(max-width:700px) { .blog-page .gt-blog-intro { padding:40px 20px 32px; } }
@media(prefers-reduced-motion:reduce) { .blog-art img { transition:none; } }

/* Tags under the post deck, and the author block at the end of the article. */
.blog-page .blog-tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.blog-page .blog-tags li { padding:2px 8px; border:1px solid var(--gt-color-rule); border-radius:999px; }

/* Share controls. One button shape (blog-share-item), three layouts: an icon row in the hero, a sticky icon rail
   beside the text on wide screens, labelled buttons in the end card. Icons inherit currentColor. */
.share-icon { width:16px; height:16px; flex:none; fill:currentColor; }
/* Hacker News has no mark: "HN" in mono where the other networks show an icon. In labelled buttons the full name
   shows instead, and "HN" returns where phones drop the labels. */
.blog-page .share-text-mark { font:600 .8125rem/1 var(--gt-font-mono); letter-spacing:.02em; }
.blog-page .blog-share-end .share-text-mark { display:none; }
.blog-page .blog-share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.blog-page .blog-share-item { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--gt-color-rule); border-radius:999px; background:var(--gt-color-raised); color:var(--gt-color-ink-2); font:500 .875rem/1 var(--gt-font-sans); text-decoration:none; cursor:pointer; transition:color .15s ease, border-color .15s ease, background-color .15s ease; }
.blog-page .blog-share-item:hover { color:var(--gt-color-green-800); border-color:var(--gt-color-green-700); background:var(--gt-color-hover-tint); }
.blog-page .blog-share-item:focus-visible { outline:3px solid var(--gt-color-green-700); outline-offset:2px; }
.blog-page .blog-share-item[hidden] { display:none; }
.blog-page .blog-share-item:not(:has(.share-text)) { width:40px; padding:0; }
.blog-page .blog-share-item .share-done { display:none; }
.blog-page .blog-share-item[data-state="copied"] { color:var(--gt-color-green-800); border-color:var(--gt-color-green-700); background:var(--gt-color-chip); }
.blog-page .blog-share-item[data-state="copied"] .share-idle { display:none; }
.blog-page .blog-share-item[data-state="copied"] .share-done { display:inline; }
.blog-page .blog-share-item[data-state="copied"] svg.share-done { display:block; }
@media(pointer:coarse) { .blog-page .blog-share-item { height:44px; min-width:44px; } .blog-page .blog-share-item:not(:has(.share-text)) { width:44px; } }

.blog-page .blog-share-hero { margin:24px 0 0; }
.blog-page .blog-share-hero .blog-share-copy { padding:0 14px; }

/* The rail: a sticky column in the empty space left of a centred post, from 1180px. */
.blog-page .blog-rail { display:none; }
@media(min-width:1180px) {
  .blog-page .gt-blog-article-layout.blog-no-toc { grid-template-columns:minmax(0,1fr) minmax(0,816px) minmax(0,1fr); }
  .blog-page .blog-no-toc .gt-blog-prose { grid-column:2; margin-inline:0; }
  .blog-page .blog-rail { display:block; grid-column:1; grid-row:1; justify-self:end; padding:48px 32px 48px 0; }
  .blog-page .blog-share-rail { position:sticky; top:calc(var(--site-header-height) + 32px); flex-direction:column; gap:8px; }
  .blog-page .blog-share-label { font:500 11px/1 var(--gt-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gt-color-ink-3); margin-bottom:4px; }
}

/* Reading progress: a 2px bar under the site header, driven by scroll position where the browser supports it. */
.blog-progress { display:none; }
@supports (animation-timeline: scroll()) {
  .blog-progress { display:block; position:fixed; top:var(--site-header-height); left:0; right:0; z-index:20; height:2px; background:var(--gt-color-green-700); transform-origin:0 50%; transform:scaleX(0); animation:blog-progress linear both; animation-timeline:scroll(root); }
  @keyframes blog-progress { to { transform:scaleX(1); } }
}
@media(prefers-reduced-motion:reduce) { .blog-progress { display:none; } .blog-page .blog-share-item { transition:none; } }

/* Tag links on the index and posts, the series list, and previous/next under a post. */
.blog-page .blog-tags a { color:inherit; text-decoration:none; }
.blog-page .blog-tags li:has(a:hover) { background:var(--gt-color-rule-soft); }
.blog-page .blog-topics { margin-top:20px; }
.blog-series-list { list-style:none; margin:0; padding:8px 48px 32px; display:grid; gap:10px; }
.blog-series-list a { color:var(--gt-color-green-800); }
.blog-page .blog-pager { margin:40px 0 0; }
.blog-page .blog-pager a { text-decoration:none; }
@media(max-width:760px) { .blog-series-list { padding:8px 20px 28px; } }

/* Data stories: the chart figure, the key number and the method box. A chart stays in the text column. A post
   without headings has no Contents rail, and a chart pulled wider than the column there was clipped by the sheet. */
.blog-page .blog-chart { margin:40px 0; }
.blog-page .blog-chart-title { font-weight:600; font-size:1.125rem; margin-bottom:12px; }
.blog-page .chart-svg { display:block; width:100%; height:auto; }
@media(max-width:700px) { .blog-page .blog-chart-plot { overflow-x:auto; } .blog-page .chart-svg { min-width:640px; } }
.chart-grid { stroke:var(--gt-color-rule); stroke-width:1; }
.chart-axis, .chart-value, .chart-legend { font:12px var(--gt-font-mono); fill:var(--gt-color-ink-2); }
.chart-value { fill:var(--gt-color-ink); }
.chart-line { fill:none; stroke-width:2.5; }
.chart-series-0 { fill:var(--gt-color-category-driver); stroke:var(--gt-color-category-driver); }
.chart-series-1 { fill:var(--gt-color-category-iron); stroke:var(--gt-color-category-iron); }
.chart-series-2 { fill:var(--gt-color-category-fairway); stroke:var(--gt-color-category-fairway); }
.chart-series-3 { fill:var(--gt-color-category-wedge); stroke:var(--gt-color-category-wedge); }
.chart-series-4 { fill:var(--gt-color-category-hybrid); stroke:var(--gt-color-category-hybrid); }
.chart-series-5 { fill:var(--gt-color-category-putter); stroke:var(--gt-color-category-putter); }
.chart-series-6 { fill:var(--gt-color-category-mini-driver); stroke:var(--gt-color-category-mini-driver); }
.chart-series-7 { fill:var(--gt-color-category-shaft); stroke:var(--gt-color-category-shaft); }
.chart-series-8 { fill:var(--gt-color-category-grip); stroke:var(--gt-color-category-grip); }
path.chart-line { fill:none; }
.blog-page .blog-chart-summary { margin:12px 0 8px; }
.blog-page .blog-chart-data summary { display:flex; align-items:center; min-height:44px; cursor:pointer; font:500 .8125rem var(--gt-font-mono); color:var(--gt-color-green-800); }
.blog-page .blog-chart-caption { margin:0 0 8px; color:var(--gt-color-ink-2); font-size:15px; line-height:1.6; }
.blog-page .blog-request { margin:24px 0; }
.chart-gap { font:12px var(--gt-font-mono); fill:var(--gt-color-ink-3); }
.blog-page .prose .blog-chart-source { font:500 .8125rem/1.5 var(--gt-font-mono); color:var(--gt-color-ink-2); margin:12px 0 8px; }
/* Data post, on G-Technica's data post recipe: key number in mono with tabular numerals, ruled, no fill; the method
   note ruled above with no fill. */
.blog-page .blog-key-number { display:grid; gap:8px; margin:32px 0; padding:24px 0; border-top:1px solid var(--gt-color-rule-strong); border-bottom:1px solid var(--gt-color-rule); }
.blog-page .blog-key-number strong { font:600 44px/1 var(--gt-font-mono); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.blog-page .blog-key-number span { max-width:52ch; color:var(--gt-color-ink-2); }
.blog-page .blog-method { display:grid; gap:8px; margin:40px 0 32px; padding:20px 0 0; border-top:1px solid var(--gt-color-rule-strong); }
.blog-page .blog-method .gt-label { color:var(--gt-color-ink-3); }
.blog-page .blog-method p { margin:0; color:var(--gt-color-ink-2); }
@media(max-width:700px) { .blog-page .blog-key-number strong { font-size:32px; } }
.blog-page .blog-cta { margin-block:32px; padding:24px; border-radius:5px; }
.blog-page .blog-cta h2 { margin:0 0 8px; font-size:20px; }
.blog-page .blog-cta p { margin:0 0 8px; }
.blog-page .blog-cta .blog-cta-note { font-size:14px; margin-bottom:16px; }

/* End of a post: the Up next card, then the share card (link preview, figure, labelled share buttons) and follow
   links. Ruled, no fill, so the plan box below stays the page's one tinted band. */
.blog-page .post-next { display:grid; gap:6px; margin:40px 0 0; padding:20px 0; border-top:1px solid var(--gt-color-rule-strong); border-bottom:1px solid var(--gt-color-rule); }
.blog-page .post-next .gt-label { color:var(--gt-color-ink-3); }
.blog-page .prose .post-next-title, .blog-page .post-next-title { display:flex; align-items:center; gap:10px; margin:0; font:600 22px/1.3 var(--gt-font-sans); letter-spacing:-.02em; color:var(--gt-color-ink); text-decoration:none; text-wrap:balance; }
.blog-page a.post-next-title:hover { color:var(--gt-color-green-800); }
.blog-page .post-next-title .share-icon { width:20px; height:20px; }
.blog-page .prose .post-next-note { margin:0; font-size:15px; line-height:1.6; color:var(--gt-color-ink-2); }
.blog-page .post-next-note a { color:var(--gt-color-green-800); }

.blog-page .post-insights { margin:40px 0 0; }
.blog-page .post-share-card { display:grid; gap:12px; padding:20px 0 0; border-top:1px solid var(--gt-color-rule-strong); }
.blog-page .post-share-body { min-width:0; }
.blog-page .prose .post-insights-title { margin:0 0 12px; font:600 17px/1.3 var(--gt-font-sans); letter-spacing:-.01em; }
.blog-page .blog-share-end { display:flex; flex-wrap:wrap; gap:8px; }
.blog-page .blog-share-end .blog-share-item { justify-content:flex-start; padding:0 12px; white-space:nowrap; }
.blog-page .blog-share-end .blog-share-copy { color:var(--gt-color-ink); border-color:var(--gt-color-rule-strong); font-weight:600; }
.blog-page .prose .post-insights-follow { display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; margin:16px 0 0; font-size:14px; line-height:1.5; }
.blog-page .post-insights-follow span { color:var(--gt-color-ink-3); font:500 11px/1 var(--gt-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.blog-page .post-insights-follow a { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--gt-color-green-800); text-decoration:none; }
.blog-page .post-insights-follow a:hover { text-decoration:underline; }
@media(max-width:760px) {
  .blog-page .blog-share-end { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .blog-page .blog-share-end .blog-share-copy, .blog-page .blog-share-end .blog-share-native:not([hidden]) { grid-column:1 / -1; justify-content:center; }
  .blog-page .blog-share-end .blog-share-item:not(.blog-share-copy):not(.blog-share-native) .share-text { display:none; }
  .blog-page .blog-share-end .share-text-mark { display:inline; }
  .blog-page .blog-share-end .blog-share-item:not(.blog-share-copy):not(.blog-share-native) { width:auto; justify-content:center; padding:0; }
  .blog-page .blog-share-hero .blog-share-copy .share-text { display:none; }
  .blog-page .blog-share-hero .blog-share-copy { width:44px; padding:0; }
}

/* A method note set smaller than the body so it reads as a footnote. */
.blog-page .prose .blog-method p { font-size:15px; line-height:1.7; }

/* Code in posts: the language label and Copy sit in a header inside the code surface (G-Technica CodeBlock title). */
.gt-code-head { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:4px 8px 4px 20px; border-bottom:1px solid var(--gt-color-code-divider); }
.gt-code-title { font:500 12px/1 var(--gt-font-mono); color:var(--gt-color-on-ink-muted); }
.prose .gt-code-head + pre { padding-top:16px; }

/* Critique round: the follow links as the share card's footer, a one-sided pager spanning the row, the hero row
   hidden where the rail shows the same actions, and 44px rail buttons. */
.blog-page .post-share-card .post-insights-follow { margin:0; padding-top:4px; }
.blog-page .post-next { margin-top:32px; }
.blog-page .blog-cta { margin-top:40px; }
.blog-page .blog-pager:has(> span:first-child:empty) { grid-template-columns:minmax(0,1fr); }
.blog-page .blog-pager:has(> span:first-child:empty) > span:first-child { display:none; }
.blog-page .blog-pager:has(> span:first-child:empty) > a { border-left:0; }
.blog-page .blog-pager:has(> span:last-child:empty) { grid-template-columns:minmax(0,1fr); }
.blog-page .blog-pager:has(> span:last-child:empty) > span:last-child { display:none; }
@media(min-width:1180px) {
  .blog-page:has(.blog-rail) .blog-share-hero { display:none; }
  .blog-page .blog-share-rail .blog-share-item { width:44px; height:44px; min-width:44px; }
}

/* Fixes round: a data post's hero is its heading alone, so the key number and chart reach the first screen; a chart's
   request collapses under "Reproduce this chart". */
.blog-post-hero.blog-post-hero-data { grid-template-columns:minmax(0,816px); justify-content:center; padding-block:40px 32px; }
.blog-post-hero-data .blog-deck { max-width:60ch; }
.blog-page .blog-request { margin:16px 0 24px; border-top:1px solid var(--gt-color-rule); border-bottom:1px solid var(--gt-color-rule); }
.blog-page .blog-request > summary { display:flex; align-items:center; min-height:44px; cursor:pointer; font:500 .8125rem var(--gt-font-mono); color:var(--gt-color-green-800); }
.blog-page .prose .blog-request-note { margin:0 0 12px; font-size:14px; line-height:1.6; color:var(--gt-color-ink-3); }