/* The SlopCop blog. Everything here is layout for the blog's own pages, on top of the design system
   (assets/system/tokens.css and components.css, copied in by make.py). Classes start blog-; anything
   that would be useful elsewhere belongs in the system instead. */

body { margin: 0; }
.blog-skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--sc-white); color: var(--sc-night); }
.blog-skip:focus { top: 12px; }

/* ---- The bar ---- */
.blog-bar .blog-links { display: flex; gap: 30px; margin-right: 6px; }
.blog-search { display: grid; place-items: center; width: 42px; height: 42px; margin-right: -12px; }
@media (pointer: coarse) { .blog-search { width: 44px; height: 44px; } .blog-tags .sc-chip { height: 36px; } }
.blog-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---- The index's opening: the name of the blog, and the detective at his notebook. ---- */
/* Short enough that the newest post's title is on the first screen of a small laptop; the picture is smaller than
   the band is tall, so the hat stands clear of the bar. */
.sc-band.blog-head .sc-frame { min-height: 452px; }
.blog-head-copy { padding: 56px var(--sc-pad) 0; }
.blog-head-copy .sc-lead { margin-top: var(--sc-6); max-width: 21em; }
.sc-band.blog-head.is-plain .sc-frame { min-height: 0; padding-bottom: var(--sc-2); }   /* later pages: the bar and nothing else; the edge follows it */

/* ---- Paper sections ---- */
.blog-sect { padding: var(--sc-9) var(--sc-pad) var(--sc-11); }

/* A note: a post in a list. The whole thing is the link. */
.blog-note { position: relative; }
.blog-note h2 a::after, .blog-note h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.blog-note:hover :is(h2, h3) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.blog-note :is(h2, h3) a:focus-visible { outline: none; }
.blog-note:has(a:focus-visible) { outline: 2px solid var(--sc-fg); outline-offset: 2px; }   /* inside the 5 px the tag's clip leaves */
.blog-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--sc-quiet); font-size: var(--sc-t-note); line-height: 24px; }
.blog-who { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.blog-who a { display: inline-flex; align-items: center; gap: 8px; color: var(--sc-fg); }   /* a face and a name */
.blog-by a { position: relative; z-index: 3; }   /* above the note's own link, so a name leads to its author */
.blog-by a:hover { color: var(--sc-fg); text-decoration: underline; text-underline-offset: 3px; }
.blog-opening { color: var(--sc-quiet); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 3; }

/* The notes: every post is a tag with its picture. The newest runs the width, words left and picture
   right like the opening above it; the next two stand side by side; the rest go three across. Pictures
   are 3 by 2, the shape they are made in, so each shows whole. */
.blog-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
.blog-pair, .blog-grid { display: grid; gap: var(--sc-7); }
.blog-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-card { display: flex; flex-direction: column; }
.blog-card .sc-cover, .blog-lead .sc-cover { aspect-ratio: 3 / 2; }
.blog-card-body { display: grid; align-content: start; gap: var(--sc-2); padding: 18px 22px 24px; }
.blog-card :is(h2, h3) { margin-top: 4px; font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.blog-card .blog-opening { font-size: var(--sc-t-note); line-height: 1.45; }
.blog-pair .blog-card-body { padding: 22px 26px 28px; }
.blog-pair .blog-card :is(h2, h3) { font-size: 26px; line-height: 1.15; letter-spacing: -.018em; }
.blog-pair .blog-opening { font-size: var(--sc-t-small); max-width: 36em; }

.blog-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.blog-lead > .sc-cover { order: 1; margin: 1px 1px 1px 0; aspect-ratio: 16 / 9; }   /* the picture takes the tag's cut corner; wider than it is made, to keep the tag short */
.blog-lead-body { display: flex; flex-direction: column; gap: var(--sc-4); padding: 30px 40px 36px 34px; }
.blog-lead-body .sc-title { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.06; letter-spacing: -.026em; }
.blog-lead .blog-opening { max-width: 30em; font-size: 18px; line-height: 1.42; -webkit-line-clamp: 3; line-clamp: 3; }
.blog-lead .blog-tags { margin-top: auto; padding-top: var(--sc-2); }      /* the title stands at the top of the tag, where a small screen still shows it */

/* A list's own heading: a tag, an author, a later page. */
.blog-list-head { padding-bottom: var(--sc-5); }
.blog-list-head .sc-heading { margin-top: var(--sc-3); }
.blog-person { display: flex; align-items: center; gap: var(--sc-6); margin-top: var(--sc-3); }
.blog-person .sc-heading { margin-top: 0; }
.blog-list-head p:not(.blog-crumbs) { margin-top: var(--sc-4); color: var(--sc-quiet); max-width: 30em; }
.blog-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-4); margin-top: var(--sc-6); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hair); color: var(--sc-quiet); font-size: var(--sc-t-note); }
.blog-pager > div { display: flex; gap: var(--sc-3); }

/* ---- The close: subscribe, in the night, and the foot. ---- */
.blog-close .blog-close-main { padding-bottom: 0; min-height: 696px; display: flex; flex-direction: column; align-items: flex-end; }
.blog-close-copy { width: min(520px, 44%); margin-block: auto; padding-bottom: var(--sc-10); }   /* level with the figure, not hung from the top */
.blog-close-copy .sc-lead { margin-top: var(--sc-5); max-width: 22em; }
.blog-form { display: flex; gap: var(--sc-3); margin-top: var(--sc-7); }
.blog-form .sc-input { height: 46px; font-size: 16px; flex: 1; }
.blog-form-note { margin-top: var(--sc-3); min-height: 20px; color: var(--sc-quiet); font-size: var(--sc-t-note); line-height: 20px; }
.blog-form-note [data-members-error] { color: var(--sc-mark-text); }
.blog-form .is-done, .blog-form.success .is-idle, .blog-form.loading .is-idle { display: none; }
.blog-form.success .is-done { display: inline; }
/* The foot is a strip under a rule that runs the window's width: the picture stands on the rule. */
.blog-footbar { border-top: 1px solid var(--sc-hair); }
.blog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-7); padding: var(--sc-6) var(--sc-pad) var(--sc-7); font-size: 16px; }
.blog-foot .sc-wordmark { font-size: 24px; margin-right: var(--sc-2); }
.blog-foot .blog-legal { margin-left: auto; color: var(--sc-quiet); font-size: var(--sc-t-note); }

/* ---- A post ---- */
.sc-band.blog-post-head .sc-frame { padding-bottom: var(--sc-7); }   /* the edge follows the band; it does not lie over it */
.blog-post-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8) var(--sc-9); align-items: center; padding: 36px var(--sc-pad) 0; }
.blog-post-top.is-bare { grid-template-columns: minmax(0, 1fr); }
.blog-crumbs { color: var(--sc-quiet); }
.blog-crumbs a:hover { color: var(--sc-fg); }
.blog-post-title { margin-top: var(--sc-5); font-size: clamp(36px, 4.5vw, 66px); line-height: 1.02; max-width: 13em; }
.blog-post-top .blog-by { margin-top: var(--sc-6); }
.blog-post-cover .sc-cover { aspect-ratio: 3 / 2; }    /* no box: the picture stands on the band's own night */
.blog-post-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-8) var(--sc-10); align-items: start; padding: var(--sc-8) var(--sc-pad) var(--sc-11); }
.blog-aside { position: sticky; top: var(--sc-6); display: grid; gap: var(--sc-5); font-size: var(--sc-t-note); line-height: 20px; }
.blog-aside dt { color: var(--sc-quiet); font-weight: 400; }
.blog-aside dd { margin-top: 2px; font-size: var(--sc-t-small); line-height: 1.45; }
.blog-aside dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-aside .blog-tags { margin-top: 6px; }

/* What Ghost puts in a post. The column is wider than the reading measure, so text keeps the measure and
   a wide or full card takes the column. */
@property --blog-measure { syntax: "<length>"; inherits: true; initial-value: 608px; }   /* the measure as a length, so code set smaller is not set narrower */
.blog-content { max-width: none; --blog-measure: var(--sc-measure); }
.blog-content > * { max-width: var(--blog-measure); }
.blog-content > .kg-width-wide, .blog-content > .kg-width-full, .blog-content > .kg-gallery-card, .blog-content > .kg-embed-card, .blog-content > table { max-width: 100%; }   /* code keeps the measure and scrolls: one right edge */
.blog-content .kg-card { margin-top: 1.6em; margin-bottom: 1.6em; }
.blog-content .kg-image { margin-inline: 0; }
.blog-content .kg-image-card img, .blog-content .kg-gallery-image img { box-shadow: 0 0 0 1px var(--sc-hair); }   /* a screenshot on white needs an edge */
.blog-content figcaption { text-align: left; }
.blog-content iframe { max-width: 100%; }
.blog-content .kg-embed-card { display: block; }
.blog-content .kg-bookmark-container { border-radius: 0; box-shadow: inset 0 0 0 1px var(--sc-line); color: inherit; }
.blog-content .kg-bookmark-thumbnail img { border-radius: 0; }
.blog-content .kg-callout-card { border-radius: 0; background: var(--sc-well); }
.blog-content .kg-btn { border-radius: 0; background: var(--sc-fg); color: var(--sc-bg); }
.blog-content .kg-toggle-card, .blog-content .kg-video-container, .blog-content .kg-audio-card, .blog-content .kg-product-card-container { border-radius: 0; }
/* A file to download: a line, the title and what is in it, the name and size in the mono, and a small arrow.
   Written out in full, so it holds with or without Ghost's own card styles. */
.blog-content .kg-file-card-container { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); padding: 16px 18px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--sc-line); color: inherit; text-decoration: none; }
.blog-content .kg-file-card-container:hover { background: var(--sc-tint); }
.blog-content .kg-file-card-contents { display: grid; gap: 4px; min-width: 0; margin: 0; }
.blog-content .kg-file-card-title { font-size: 18px; line-height: 1.3; font-weight: 600; }
.blog-content .kg-file-card-caption { color: var(--sc-quiet); font-size: var(--sc-t-small); line-height: 1.45; }
.blog-content .kg-file-card-metadata { display: flex; flex-wrap: wrap; gap: 0 var(--sc-4); margin-top: 4px; font: 400 var(--sc-t-mono)/21px var(--sc-mono); color: var(--sc-quiet); }
.blog-content .kg-file-card-filename, .blog-content .kg-file-card-filesize { font: inherit; color: inherit; }
.blog-content .kg-file-card-filesize::before { content: none; }
.blog-content .kg-file-card-icon { flex: none; position: static; width: 28px; height: 28px; }
.blog-content .kg-file-card-icon::before { content: none; }
.blog-content .kg-file-card-icon svg { display: block; position: static; width: 28px; height: 28px; }
/* Code is as wide as the prose at least, and as wide as its longest line up to the column: it scrolls only past that. */
.blog-content > pre, .blog-content > .kg-code-card { width: fit-content; min-width: min(100%, var(--blog-measure)); max-width: 100%; }
.blog-content .kg-code-card pre { max-width: 100%; }
.blog-content pre { tab-size: 2; font-size: 14px; line-height: 22px; }
.blog-content pre code { font: inherit; padding: 0; background: none; }
.blog-post-end { grid-column: 2; display: grid; gap: var(--sc-7); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hair); }
.blog-post-end .blog-grid { gap: var(--sc-5); }
/* Keep reading: a picture, a title and a date. */
.blog-post-end .blog-card-body { padding: 14px 16px 16px; gap: 6px; }
.blog-post-end .blog-card h3 { order: -1; margin-top: 0; font-size: 18px; }
.blog-post-end .blog-who { display: none; }

/* ---- A tag, an author, a page ---- */
.blog-page { padding: var(--sc-9) var(--sc-pad) var(--sc-11); }
.blog-page .sc-heading { margin-bottom: var(--sc-7); }

@media (max-width: 1099px) {
  .blog-post-body { grid-template-columns: minmax(0, 1fr); }
  /* The lead stands up: picture, then words. Two across below it. */
  .blog-lead { grid-template-columns: minmax(0, 1fr); }
  .blog-lead > .sc-cover { margin: 0 1px 1px; clip-path: none; }        /* words first, so the title is high on the screen; the picture under them */
  .blog-lead-body { padding: 24px 26px 28px; }
  .blog-lead .blog-tags { margin-top: 0; padding-top: 0; }
  .blog-post-cover { max-width: 520px; }
  .blog-post-title { font-size: clamp(34px, 6vw, 56px); }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-pair .blog-card :is(h2, h3) { font-size: 21px; line-height: 1.22; letter-spacing: -.012em; }
  .blog-pair .blog-card-body { padding: 18px 22px 24px; }
  .blog-pair .blog-opening { font-size: var(--sc-t-note); }
  /* An odd one out at the end takes the row: picture left, words right. */
  .blog-notes > .blog-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-notes > .blog-grid > :last-child:nth-child(odd) > .sc-cover { margin: 1px 0 1px 1px; clip-path: none; }
  .blog-notes > .blog-grid > :last-child:nth-child(odd) > .blog-card-body { align-content: center; padding-left: var(--sc-7); }
  .sc-band.blog-head .sc-frame { min-height: 380px; }
  .blog-head-copy { padding-top: 44px; }
  .blog-head-copy .sc-lead { max-width: 15em; }
  .blog-close .blog-close-main { align-items: stretch; min-height: 0; }
  .blog-close-copy { width: auto; max-width: 34em; margin-block: 0; padding: 0 var(--sc-pad); }
  .blog-close .sc-art { position: relative; inset: auto; height: 520px; margin: var(--sc-6) calc(-1 * var(--sc-gutter)) 0; order: 2; }
  .blog-post-top { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  /* The post comes first; who wrote it and where it is filed follow it. */
  .blog-content { order: 0; }
  .blog-aside { order: 1; position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hair); }
  .blog-post-end { order: 2; grid-column: 1; }
}
@media (max-width: 820px) {
  .blog-bar .blog-links, .blog-bar .blog-signin { display: none; }
}
@media (max-width: 640px) {
  .blog-sect { padding-top: var(--sc-8); padding-bottom: var(--sc-9); }
  .blog-grid .blog-opening { display: none; }                         /* after the third post a phone shows picture, name and title: two to a screen */
  .blog-notes, .blog-pair, .blog-grid { gap: var(--sc-5); }
  .blog-pair, .blog-grid, .blog-post-end .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-notes > .blog-grid > :last-child:nth-child(odd) { display: flex; }
  .blog-notes > .blog-grid > :last-child:nth-child(odd) > .sc-cover { margin: 1px 1px 0; clip-path: polygon(0 0, calc(100% - var(--cut) + .586px) 0, 100% calc(var(--cut) - .586px), 100% 100%, 0 100%); }
  .blog-notes > .blog-grid > :last-child:nth-child(odd) > .blog-card-body { align-content: start; padding-left: 16px; }
  .blog-lead > .sc-cover { aspect-ratio: 3 / 2; }
  .blog-lead-body { padding: 18px 16px 22px; gap: var(--sc-3); }
  .blog-card-body, .blog-pair .blog-card-body { padding: 14px 16px 20px; }
  .blog-card :is(h2, h3), .blog-pair .blog-card :is(h2, h3) { font-size: 20px; }
  .blog-close .sc-art { height: 380px; }
  .blog-form { flex-direction: column; }
  .blog-form .sc-input { flex: none; }
  .blog-post-title { font-size: 34px; }
  .blog-post-top .blog-who { flex-basis: 100%; }      /* the name on its own line; the date and the reading time share the next */
}
@media (max-width: 700px) {
  /* The picture stands under the words, and is kept short. */
  .sc-band.blog-head .sc-frame { min-height: 0; padding-bottom: calc(var(--sc-edge-h) + 200px); }
  .blog-head-copy .sc-lead { max-width: 21em; }
}
@media (min-width: 1100px) {
  /* One card left over at the end of three across takes the row: picture left, words right. */
  .blog-notes > .blog-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .blog-notes > .blog-grid > :last-child:nth-child(3n + 1) > .sc-cover { margin: 1px 0 1px 1px; clip-path: none; }
  .blog-notes > .blog-grid > :last-child:nth-child(3n + 1) > .blog-card-body { align-content: center; padding-left: var(--sc-8); }
}

/* Ghost lets the owner pick fonts under Design, Brand, Typography. Left on "theme default" (as it should
   be) these are unset and the system's faces apply. */
.sc { font-family: var(--gh-font-body, var(--sc-sans)); }
.sc-heading, .sc-title { font-family: var(--gh-font-heading, var(--sc-sans)); }