/* Blog: the illustrated journal index, the illustrated essay article and the author pages.
   Generated by scripts/build-blog.js from blog/index-template.html, blog/template.html and authors/template.html. */

.blog-wrap { width: min(1169px, 100%); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-3); }
.meta time { white-space: nowrap; }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--av, var(--postit-blue)); font: 600 14px var(--sans); color: var(--ink); }
.by { display: flex; align-items: center; gap: 12px; text-decoration: none; text-align: left; }
.by b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.by .small { display: block; }
a.by:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* masthead */
.mast { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 80px 0 48px; }
.mast .lede { max-width: 42ch; margin-inline: auto; }
.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.topics button { border: 0; cursor: pointer; font: 600 14px/1 var(--sans); padding: 11px 16px; border-radius: 999px; background: rgba(31, 28, 25, .06); color: var(--ink-2); corner-shape: round; transition: background-color .18s ease, color .18s ease; }
.topics button:hover { background: rgba(31, 28, 25, .1); }
.topics button.on { background: var(--ink); color: #fff; }
[data-topic][hidden] { display: none !important; }

/* featured post */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: clamp(28px, 5vw, 72px); border-radius: var(--r-xl); text-decoration: none; }
.feat-txt { display: grid; gap: 20px; align-content: center; }
.feat h2 { font-family: var(--serif); font-weight: var(--serif-weight); font-size: clamp(36px, 4vw, 52px); line-height: 1.04; letter-spacing: var(--serif-track); }
.feat h2 em, .post h3 em { font-style: italic; }
.feat .body { font-size: 17px; max-width: 46ch; }

/* artefacts drawn as illustrations */
.art { position: relative; min-height: 340px; display: grid; place-items: center; }
/* the post's own hero image fills the art area */
.jl .art:has(> .post-img), .jl .hero-art:has(> .post-img) { padding: 0; min-height: 0; height: auto; place-items: stretch; background-color: #2C2825; }
.post-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.feat .art:has(> .post-img) { align-self: center; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 20px 40px -28px rgba(31, 28, 25, .45); }
.art-mark { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 12px 24px -18px rgba(31, 28, 25, .3); corner-shape: round; }
.art-mark .mi { width: 76px; height: 76px; }
.hit { position: relative; }

/* post cards */
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.post { display: grid; grid-template-rows: auto 1fr; border-radius: 36px; overflow: hidden; text-decoration: none; box-shadow: 0 20px 40px -32px rgba(31, 28, 25, .25); }
.post .art { min-height: 0; height: 250px; border-bottom: 1px solid var(--hair); padding: 16px; overflow: hidden; }
.post .txt { display: grid; gap: 12px; align-content: start; padding: 28px 32px 32px; background: rgba(255, 255, 255, .55); }
.post h3 { font-family: var(--serif); font-weight: var(--serif-weight); font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; }
.post:hover h3, .feat:hover h2 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.posts.sm .art { height: 230px; }
.posts.sm .txt { gap: 10px; padding: 24px 28px 28px; }
.posts.sm h3 { font-size: 26px; line-height: 1.12; }
.posts-sec { padding-top: 24px; }

/* what's new in Jules */
.upd-sec { padding: 24px 0 16px; }
.upd { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; padding: clamp(28px, 4vw, 48px); border-radius: 36px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31, 28, 25, .08); }
.upd-head { display: grid; gap: 12px; align-content: start; }
.upd-head .link { justify-self: start; }
.upd-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid rgba(31, 28, 25, .08); text-decoration: none; }
.upd-row:first-child { border-top: 0; padding-top: 0; }
.upd-row time { font-family: var(--serif); font-weight: var(--serif-weight); font-size: 22px; line-height: 1.1; color: var(--ink-3); }
.upd-row b { font-size: 16px; }
.jl .upd-row p { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
.upd-row:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* article header */
.art-head { width: min(900px, 100%); padding-top: 80px; padding-bottom: 48px; display: grid; gap: 20px; justify-items: center; text-align: center; }
.art-head .meta { justify-content: center; }
.crumb { text-decoration: none; font-weight: 600; color: var(--ink-2); }
.crumb:hover { color: var(--ink); }
.art-head h1 { max-width: 15ch; }
.art-head h1.long { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; max-width: 20ch; }
.art-head .lede { max-width: 50ch; margin-inline: auto; }
.hero-wrap { width: min(1169px, 100%); padding-bottom: 72px; }
.jl .hero-art { height: 460px; border-radius: var(--r-xl); display: grid; place-items: center; overflow: hidden; }

/* article body: a rail of contents, the essay, and an empty gutter that keeps it centred */
.body-grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 680px) minmax(0, 200px); gap: 56px; justify-content: center; align-items: start; }
.rail { position: sticky; top: 100px; display: grid; gap: 4px; font-size: 14px; }
.jl .rail .eyebrow { margin-bottom: 8px; }
.rail a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; text-decoration: none; color: var(--ink-3); line-height: 1.35; }
.rail a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; transform: translateY(-1px); corner-shape: round; }
.rail a:hover { color: var(--ink-2); }
.rail a.on { color: var(--ink); font-weight: 600; }
.rail a.on::before { background: var(--ink); }

.ed { font-size: 19px; line-height: 1.75; color: #33302C; min-width: 0; }
.jl .ed > * + * { margin-top: 1.15em; }
.jl .ed h2 { margin-top: 2.1em; font-family: var(--serif); font-style: italic; font-weight: var(--serif-weight); font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 100px; }
.jl .ed h3 { margin-top: 1.7em; font: 600 19px/1.35 var(--sans); color: var(--ink); }
.jl .ed h2 + *, .jl .ed h3 + * { margin-top: .7em; }
.ed a { color: var(--pen); text-decoration-color: rgba(47, 91, 211, .4); text-underline-offset: 3px; }
.ed ul:not([class]), .ed ol:not([class]) { padding-left: 1.2em; }
.jl .ed .quote { display: block; white-space: normal; margin: 2em -24px; padding: 30px 36px 32px; font: italic var(--serif-weight) 31px/1.25 var(--serif); letter-spacing: -0.01em; color: var(--ink); transform: rotate(-1deg); }
.jl .ed .quote p { margin: 0; }
/* where Jules fits (and the older posts' call-to-action box, drawn the same way) */
.fits, .ed .cta-box { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31, 28, 25, .08); font-size: 15.5px; line-height: 1.55; }
.fits b, .ed .cta-box h3 { display: block; font: 600 15.5px/1.45 var(--sans); color: var(--ink); }
.jl .fits p, .jl .ed .cta-box p { margin-top: 4px; color: var(--ink-2); }
.fits .link, .ed .cta-box .cta-button { display: inline-block; margin-top: 10px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(31, 28, 25, .3); }
.ed .cta-box { grid-template-columns: minmax(0, 1fr); gap: 0; }
.jl .ed .cta-box h3 { margin: 0; }
/* comparison tables in older posts */
.ed table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; background: #fff; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ed th, .ed td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.ed thead th { font-weight: 600; background: var(--sunk); }
.ed tbody th { font-weight: 600; color: var(--ink); }
.ed td { color: var(--ink-2); }
.ed tr:last-child th, .ed tr:last-child td { border-bottom: 0; }
.jl .ed div[style*="overflow-x"] { margin: 32px 0 !important; }

/* after the article: the author, then two more to read */
.after { width: min(1169px, 100%); padding-top: 96px; display: grid; gap: 22px; }
.jl .author-card { width: min(680px, 100%); margin: 0 auto 40px; padding: 22px 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.author-card .avatar { width: 52px; height: 52px; font-size: 16px; }
.author-card > div { flex: 1 1 260px; }
.author-card b { display: block; font-weight: 600; }
.after .d3 { text-align: center; }

/* author pages */
.author-head { gap: 16px; }
.author-head .avatar { width: 84px; height: 84px; font-size: 26px; margin-bottom: 6px; }
.author-head .lede { max-width: 52ch; }
.author-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.author-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.author-posts { padding-bottom: 16px; }
.jl .author-posts .sec-head { margin-bottom: 32px; }

@media (max-width: 1100px) {
  .body-grid { grid-template-columns: minmax(0, 680px); }
  .rail, .gutter { display: none; }
  .jl .ed .quote { margin: 2em 0; }
}
@media (max-width: 900px) {
  .feat, .posts, .upd { grid-template-columns: minmax(0, 1fr); }
  .feat { gap: 32px; }
  .art { min-height: 260px; }
  .upd { gap: 24px; }
}
@media (max-width: 700px) {
  .jl .hero-art { height: 400px; border-radius: 36px; }
  .hero-wrap { padding-bottom: 48px; }
  .jl .ed .quote { font-size: 25px; padding: 24px 24px 26px; }
  .ed { font-size: 18px; }
  .mast, .art-head { padding-top: 56px; }
  .post { border-radius: 30px; }
  .post .txt { padding: 24px 24px 28px; }
  .post h3 { font-size: 27px; }
  .upd-row { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .upd-row time { font-size: 19px; }
  .after { padding-top: 72px; }
}
@media (max-width: 420px) {
}