/* Condei — condei.app
 * The blog: /blog, /blog/<slug>, /blog/topics/<topic> (docs/blog-plan.md §5).
 * Loaded after assets/styles.css and assets/doc.css, and built only from their
 * tokens; it is the only home of the .blog-* rules. The markup is written by
 * scripts/build-blog.mjs.
 *
 * A post is set like the legal pages — parchment masthead, paper body,
 * doc.css's prose rules — on one column: the title, the meta line, the text,
 * the share row and "More on" all start at the same left edge, with the
 * contents rail (when a post has one) in the margin to its left. The index is
 * a masthead, the latest post as a 7/5 spread, and a hairline list.
 * No cards but the one that is an object, no capitals, no fade-ins; the only
 * motion is the copy-link confirmation.
 */

/* ------------------------------------------------------------- the column */

.blog {
  --blog-rail: 13.5rem;                         /* the contents rail, 216px */
  --blog-gap: clamp(40px, 4.4vw, 88px);
  --blog-indent: 0px;                           /* where the reading column starts */
  --blog-measure: 66ch;                         /* doc.css's .doc-body measure */
  --blog-hair: color-mix(in srgb, var(--ink) 22%, transparent);
}
@media (min-width: 900px) {
  .blog-post { --blog-indent: calc(var(--blog-rail) + var(--blog-gap)); }
}

/* "Blog" in the header and footer while reading a post or a topic page:
   the current section, drawn like the current page. */
.blog .nav a[aria-current="true"]:not(.nav-cta) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
@media (max-width: 759px) {
  .blog.has-nav-js .nav a[aria-current="true"]:not(.nav-cta),
  .has-nav-js .blog .nav a[aria-current="true"]:not(.nav-cta) { text-decoration: none; color: var(--brass-text); }
}
.blog .footer-col a[aria-current="true"] { color: var(--ink); font-weight: 700; }

/* Runs of items with a short hairline between them: meta lines, topics.
   Every item carries the hairline before it and the run is shifted left by
   one gap and clipped, so the hairline of whichever item starts a line —
   the first, or one that wrapped — falls outside and is never drawn. A line
   never starts or ends on a separator. The middle-dot spans the build
   writes are only for a reader without this stylesheet. */
.blog-meta,
.blog-item-meta,
.blog-hero-topics,
.blog-topics ul {
  --run-gap: 1.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: calc(-1 * var(--run-gap));
  clip-path: inset(-24px -24px -24px calc(var(--run-gap) - 6px));
}
.blog-topics ul { --run-gap: 33px; }
.blog-meta > :not(.blog-sep),
.blog-item-meta > :not(.blog-sep),
.blog-hero-topics > :not(.blog-sep),
.blog-topics li {
  position: relative;
  margin-left: var(--run-gap);
}
.blog-meta > :not(.blog-sep)::before,
.blog-item-meta > :not(.blog-sep)::before,
.blog-hero-topics > :not(.blog-sep)::before,
.blog-topics li::before {
  content: "";
  position: absolute;
  left: calc(var(--run-gap) / -2);
  top: 50%;
  width: 1px;
  height: 0.95em;
  transform: translateY(-50%);
  background: var(--blog-hair);
  pointer-events: none;
}
.blog-sep { display: none; }

.blog-icon { flex: none; width: 20px; height: 20px; }

/* Quiet links in meta lines and mastheads: muted, ink and a brass underline on hover. */
.blog-hero-topics a,
.blog-item-meta a,
.blog-crumb a,
.blog-topics a,
.blog-feed-link a {
  color: var(--muted);
  text-decoration: none;
}
.blog-hero-topics a:hover,
.blog-item-meta a:hover,
.blog-crumb a:hover,
.blog-topics a:hover,
.blog-feed-link a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}

/* ------------------------------------------------------- masthead (lists) */

.blog-masthead .wrap {
  padding-block: clamp(48px, 1.5rem + 5.5vw, 120px) clamp(28px, 1rem + 2.5vw, 56px);
}
.blog-masthead h1 { max-width: 16ch; }
.blog-crumb {
  margin-bottom: var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
}
.blog-crumb a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.blog-lede {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* Topics and the feed share one line under a hairline; the feed sits right. */
.blog-masthead-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  margin-top: clamp(32px, 1rem + 3vw, 64px);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.blog-topics a {
  display: inline-block;
  padding-block: 11px;           /* 44px targets */
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}
.blog-topics a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.blog-feed-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: var(--t-small);
  font-weight: 600;
}
.blog-feed-link .blog-icon { width: 18px; height: 18px; }

/* ------------------------------------------------------- the latest post */

.blog-index { padding-block: clamp(40px, 1.5rem + 4vw, 96px) var(--s-section); }

.blog-lead {
  display: grid;
  gap: var(--s-5);
}
/* The latest post's picture. Its hero sits on a parchment stage of a fixed
   shape (so a portrait phone and a wide composite both fit, and nothing
   shifts as it loads); without a hero, its OG card fills the frame. */
.blog-lead-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--parchment);
}
.blog-lead-media img {
  position: absolute;
  inset: 7% 6%;
  width: 88%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(27, 42, 65, 0.22));
}
.blog-lead-media.is-card { aspect-ratio: auto; box-shadow: var(--shadow-shot); }
.blog-lead-media.is-card img { position: static; width: 100%; height: auto; filter: none; }
@media (prefers-color-scheme: dark) {
  .blog-lead-media img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)); }
  /* The OG card is parchment by design; at night it sits back a step. */
  .blog-lead-media.is-card img { opacity: 0.9; filter: none; }
}

.blog-lead-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 64, "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
/* Titles underline in brass on hover — instantly: only transform and opacity animate. */
.blog-lead-title a,
.blog-item-title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.blog-lead-title a:hover,
.blog-lead:has(.blog-lead-media:hover) .blog-lead-title a,
.blog-item-title a:hover { text-decoration-color: var(--brass); }
.blog-lead .blog-item-desc { margin-top: var(--s-4); font-size: var(--t-lede); line-height: 1.55; max-width: 40ch; }
.blog-lead .blog-item-meta { margin-top: var(--s-5); }

@media (min-width: 760px) {
  .blog-lead {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(32px, 4.5vw, 80px);
  }
}

/* ---------------------------------------------------------- post lists */

.blog-archive {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(64px, 2rem + 6vw, 144px);
}
.blog-lead + .blog-archive { margin-top: clamp(72px, 2rem + 7vw, 160px); }
.blog-index > .blog-archive:first-child { margin-top: 0; }
.blog-archive-h {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);   /* 24 → 34 */
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.016em;
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
}
@media (min-width: 900px) {
  /* The support page's rhythm: the label in a narrow left column. */
  .blog-archive { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(48px, 6vw, 120px); }
  .blog-archive-h { position: sticky; top: 104px; align-self: start; }
}

.blog-list { border-top: 1px solid var(--ink); }
.blog-item {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-5) calc(var(--s-5) + 2px);
  border-bottom: 1px solid var(--line);
}
.blog-item-title {
  max-width: 34em;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.blog-item-desc {
  margin-top: var(--s-2);
  max-width: 60ch;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.blog-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}
/* In a list the meta line sits above the title, like a dateline. */
.blog-item .blog-item-meta { order: -1; margin-bottom: var(--s-2); }
.blog-item-meta a { font-weight: 600; color: var(--ink); }
.blog-item-meta a,
.blog-hero-topics a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* --------------------------------------------------------------- a post */

.blog-hero .wrap {
  padding-block: clamp(44px, 1.5rem + 5vw, 112px) clamp(36px, 1.2rem + 3.5vw, 80px);
}
.blog-hero .wrap > * { margin-left: var(--blog-indent); }
.blog-hero .wrap > .blog-hero-topics,
.blog-hero .wrap > .blog-meta { margin-left: calc(var(--blog-indent) - var(--run-gap)); }
.blog-hero-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--s-4);
  font-size: var(--t-small);
  font-weight: 600;
}
.blog-hero-topics a { color: var(--ink); }
.blog-title {
  max-width: 20ch;
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  text-wrap: balance;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--s-2);
  margin-top: clamp(20px, 1rem + 1vw, 32px);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
.blog-by { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.blog-mark { width: 24px; height: 24px; border-radius: 6px; }
@media (prefers-color-scheme: dark) {
  /* The ink tile would vanish into the warm near-black; a hairline holds its edge. */
  .blog-mark { box-shadow: 0 0 0 1px var(--line); }
}

/* The hero image sits across the seam: parchment above its middle, paper below. */
.blog-seam {
  background: linear-gradient(to bottom, var(--parchment) 0 50%, var(--paper) 50% 100%);
}
.blog-post.has-hero .blog-hero .wrap { padding-bottom: clamp(32px, 1rem + 3vw, 64px); }
.blog-hero-figure {
  margin-left: var(--blog-indent);
  width: min(100% - var(--blog-indent), var(--hero-w, 1040px), 1040px);
}
/* A device image with its own transparent corners: the .shot treatment, a
   soft ink shadow that follows the device's shape, never a frame. */
.blog-hero-figure img {
  width: 100%;
  filter: drop-shadow(0 2px 3px rgba(27, 42, 65, 0.08)) drop-shadow(0 28px 34px rgba(27, 42, 65, 0.24));
}
@media (prefers-color-scheme: dark) {
  .blog-hero-figure img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.12)) drop-shadow(0 28px 34px rgba(0, 0, 0, 0.6)); }
}
.blog-hero-figure.is-portrait { width: min(72%, var(--hero-w), 340px); }

/* The reading column, with the contents rail in the margin at 900px and up. */
@media (min-width: 900px) {
  .blog .blog-layout,
  .blog .blog-layout.has-toc {
    display: grid;
    grid-template-columns: var(--blog-rail) minmax(0, 1fr);
    column-gap: var(--blog-gap);
    align-items: start;
  }
  .blog-layout > .doc-toc { grid-column: 1; grid-row: 1; width: auto; }
  .blog-layout > .doc-body { grid-column: 2; grid-row: 1; }
}
.blog-layout { padding-bottom: 0; }
.blog-post.has-hero .blog-layout { padding-top: clamp(40px, 1.5rem + 3.5vw, 88px); }
.blog .doc-body { max-width: var(--blog-measure); }
.blog .doc-toc { top: 104px; }

/* ------------------------------------------------ what posts have, legal pages don't */

.blog-body > p:first-child {
  font-size: var(--t-lede);
  line-height: 1.6;
}

.blog-figure {
  margin-block: var(--s-7);
}
/* An <img> fills the column; an inline <svg> sizes itself (each carries its
   own width, aspect-ratio and narrow layout) and is only kept inside it. */
.blog-figure > img { width: 100%; max-width: 100%; height: auto; }
.blog-figure > svg { max-width: 100%; height: auto; }
.blog-figure > img {
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--raised);
}
.blog-figure figcaption {
  margin-top: var(--s-3);
  max-width: 60ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.blog-figure figcaption a { color: inherit; }
.blog-body h2 + .blog-figure, .blog-body h3 + .blog-figure { margin-top: var(--s-5); }

/* Code: a sheet of its own with the language named on its top edge. */
.blog-code {
  margin-top: var(--s-5);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  overflow: hidden;
}
.blog-code-lang {
  display: block;
  padding: 7px var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}
.blog-body .blog-code pre {
  margin: 0;
  padding: var(--s-4);
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.875rem;
  line-height: 1.65;
  tab-size: 2;
}
.blog-body .blog-code pre:focus-visible { outline-offset: -3px; border-radius: 8px; }

/* The blockquote is the pull-quote: Fraunces at display size, on a brass rule. */
.blog-body blockquote {
  margin-block: var(--s-7);
  padding: 0 0 0 clamp(18px, 1rem + 1vw, 28px);
  border-left: 2px solid var(--brass);
}
.blog-body blockquote p {
  margin-top: var(--s-4);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 1.32rem + 0.6vw, 1.875rem);   /* 24 → 30 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
  color: var(--ink);
  text-wrap: balance;
}
.blog-body blockquote p:first-child { margin-top: 0; }
.blog-body blockquote strong { font-weight: 600; }

/* The callout: the one thing not to miss. */
.blog-callout {
  margin-block: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--parchment);
  border-left: 3px solid var(--brass);
  border-radius: 0 10px 10px 0;
}
.blog-body .blog-callout p { margin-top: var(--s-3); }
.blog-body .blog-callout p:first-child { margin-top: 0; }
.blog-callout strong:first-child { color: var(--ink); }

.blog-hr {
  display: block;
  height: 0;
  margin-block: var(--s-7);
  border: 0;
  border-top: 1px solid var(--line);
}
.blog-body .table-scroll { margin-block: var(--s-5) var(--s-2); }

/* ------------------------------------------------------- after the text */

.blog-post-footer {
  padding-block: clamp(48px, 2rem + 3vw, 80px) var(--s-section);
}
.blog-post-footer > * {
  margin-left: var(--blog-indent);
  max-width: var(--blog-measure);
}
.blog-post-footer > :first-child {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.blog-share:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.blog-share-btn {
  display: inline-grid;          /* the two faces share one cell: no width jump */
  align-items: center;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-spring);
}
.blog-share-btn[hidden] { display: none; }
.blog-share-btn:hover { border-color: var(--ink); }
.blog-share-btn:active { transform: scale(0.97); }
.blog-share-face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  transition: opacity var(--dur-micro) var(--ease-spring), transform var(--dur-micro) var(--ease-spring);
}
/* Copied: the label gives way and the confirmation springs in (120 ms, the
   Micro spring); Reduce Motion lands on the end state. */
.blog-share-done { opacity: 0; transform: scale(0.86); }
.blog-share-copy.is-done .blog-share-face:first-child { opacity: 0; transform: scale(0.94); }
.blog-share-copy.is-done .blog-share-done { opacity: 1; transform: none; }
.blog-share-done .blog-icon { color: var(--brass-text); }

/* No clipboard: the address, selected, to copy by hand. */
.blog-share-url {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
}

.blog-more { margin-top: clamp(48px, 2rem + 3vw, 80px); }
.blog-more-h {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);   /* 24 → 32 */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.016em;
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
}
.blog-more-h a {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.blog-more-h a:hover { text-decoration-thickness: 3px; }
.blog-more .blog-list { margin-top: var(--s-5); }
.blog-list--compact .blog-item { padding-block: var(--s-4); }

.blog-post-footer > .blog-feed-link { margin-top: var(--s-6); padding-top: 0; border-top: 0; }
.blog-post-footer > .blog-feed-link:first-child { padding-top: var(--s-5); border-top: 1px solid var(--line); }