/* The blog — index and post.
 *
 * One sheet for both pages, loaded through $SITE_CSS. It used to be two <style>
 * blocks inlined in blog.php and blog-post.php, which meant the card and the
 * article could not share a token and neither could be cached.
 *
 * Everything here builds on landing.css: same palette, same 999px pills, same
 * cyan-tinted shadow. Nothing redefines a custom property.
 */

/* ---- index hero -------------------------------------------------- */
.blog-count {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cyan-d); background: var(--cyan-w); border: 1px solid rgba(37,168,203,.24);
  border-radius: 999px; padding: 6px 14px;
}

/* ---- shared card furniture --------------------------------------- */
.blog-card, .blog-lead {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}
.blog-card:hover, .blog-lead:hover {
  transform: translateY(-4px); border-color: rgba(37,168,203,.35);
  box-shadow: 0 22px 46px -26px rgba(20,115,143,.45);
}
.blog-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }

.blog-cover { aspect-ratio: 16/9; background: var(--paper-2); overflow: hidden; }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.blog-card-link:hover .blog-cover img { transform: scale(1.04); }
/* A post with no cover still needs a shape. A tinted panel with the mark on it
   reads as a deliberate blank; a grey box reads as an image that failed. */
.blog-cover-blank {
  display: grid; place-items: center; color: var(--cyan); font-size: 1.9rem;
  background:
    radial-gradient(60% 70% at 76% 22%, rgba(37,168,203,.20) 0%, rgba(37,168,203,0) 70%),
    linear-gradient(135deg, #E8F6FA, #F6F9FA);
}

/* ---- the lead post ----------------------------------------------- */
/* The newest post runs full width. With one or two posts published, a plain
   grid leaves a single card marooned at the left of a 1180px row. */
.blog-lead { margin-bottom: 30px; }
.blog-lead .blog-card-link { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.blog-lead .blog-cover { aspect-ratio: auto; height: 100%; min-height: 300px; }
.blog-lead .blog-body { padding: 34px 38px; align-self: center; }
.blog-lead .blog-body h2 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.24; }
.blog-lead .blog-body p { font-size: 1rem; }
@media (max-width: 860px) {
  .blog-lead .blog-card-link { grid-template-columns: 1fr; }
  .blog-lead .blog-cover { aspect-ratio: 16/9; min-height: 0; }
  .blog-lead .blog-body { padding: 22px 24px 26px; }
}

/* ---- the grid ---------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px; }
.blog-card { display: flex; }
.blog-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; }
.blog-body h2 { font-size: 1.14rem; line-height: 1.34; margin: 0; color: var(--ink); font-weight: 600; }
.blog-body p { margin: 0; font-size: .93rem; line-height: 1.62; color: var(--ink-2); font-weight: 300; }

.blog-tag {
  align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cyan-d); background: var(--cyan-w);
  border-radius: 999px; padding: 4px 11px;
}
.blog-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .8rem; color: var(--ink-3); margin-top: auto; padding-top: 6px;
}
.blog-meta .dot, .blog-byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); flex: none; }
.blog-more { font-size: .87rem; font-weight: 600; color: var(--cyan-d); display: inline-flex; align-items: center; gap: 7px; }
.blog-more i { transition: transform .2s; }
.blog-card-link:hover .blog-more i, .blog-lead .blog-card-link:hover .blog-more i { transform: translateX(4px); }

/* ---- empty ------------------------------------------------------- */
.blog-none { text-align: center; padding: 70px 20px; color: var(--ink-2); }
.blog-none i { font-size: 2rem; color: var(--cyan); opacity: .5; }
.blog-none h2 { font-size: 1.25rem; margin: 16px 0 6px; color: var(--ink); }
.blog-none p { margin: 0; font-weight: 300; }

/* ---- reading progress -------------------------------------------- */
/* Long-form on a phone gives no sense of how much is left; the scrollbar is a
   hairline and on iOS it is not there at all until you move. */
.blog-prog { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: transparent; pointer-events: none; }
.blog-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--cyan-d)); transition: width .1s linear; }

/* ---- the article ------------------------------------------------- */
.blog-head { position: relative; padding: 44px 0 0; overflow: hidden; }
.blog-head::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 520px; z-index: 0;
  background: radial-gradient(44% 58% at 72% 16%, rgba(37,168,203,.16) 0%, rgba(37,168,203,0) 70%);
}
.blog-head .tv-wrap { position: relative; z-index: 1; max-width: 760px; }
.blog-title {
  font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.16; letter-spacing: -.02em;
  margin: 16px 0 0; color: var(--ink); font-weight: 700;
}

/* The byline. An initial rather than an avatar: there is no photo to show and a
   generic silhouette says less than the letter does. */
.blog-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 22px 0 0; font-size: .87rem; color: var(--ink-3); }
.blog-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--cyan-w); color: var(--cyan-d); font-weight: 700; font-size: .9rem;
}
.blog-byline b { color: var(--ink); font-weight: 600; }

.blog-hero { border-radius: 18px; overflow: hidden; margin: 30px 0 0; border: 1px solid var(--line); }
.blog-hero img { width: 100%; display: block; }

.blog-article { padding: 30px 0 80px; }
.blog-article .tv-wrap { max-width: 760px; }

/* Long-form defaults, so an author who only types paragraphs still gets a
   readable article rather than a wall. */
.blog-prose { font-size: 1.06rem; line-height: 1.78; color: var(--ink-2); font-weight: 300; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose h2 { font-size: 1.5rem; line-height: 1.28; margin: 44px 0 14px; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.blog-prose h3 { font-size: 1.2rem; margin: 34px 0 10px; color: var(--ink); font-weight: 600; }
.blog-prose h4 { font-size: 1.04rem; margin: 26px 0 8px; color: var(--ink); font-weight: 600; }
.blog-prose p { margin: 0 0 20px; }
/* The opening paragraph carries the reader in; a touch more size does the work
   a drop cap would, without the alignment problems one brings. */
.blog-prose > p:first-of-type { font-size: 1.14rem; line-height: 1.7; color: var(--ink); }
.blog-prose ul, .blog-prose ol { margin: 0 0 20px; padding-left: 24px; }
.blog-prose li { margin-bottom: 9px; }
.blog-prose li::marker { color: var(--cyan); }
.blog-prose img { max-width: 100%; height: auto; border-radius: 14px; margin: 26px 0; border: 1px solid var(--line); }
.blog-prose a { color: var(--cyan-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blog-prose a:hover { color: var(--ink); }
.blog-prose blockquote {
  margin: 26px 0; padding: 18px 22px; border-left: 3px solid var(--cyan);
  background: var(--paper-2); border-radius: 0 12px 12px 0;
  color: var(--ink); font-style: italic; font-size: 1.06rem;
}
.blog-prose blockquote p:last-child { margin-bottom: 0; }
.blog-prose hr { border: 0; border-top: 1px solid var(--line); margin: 38px 0; }
/* A table on a phone is wider than the screen. Scrolling it inside its own box
   beats scrolling the whole page sideways. */
.blog-prose .blog-scroll { overflow-x: auto; margin: 26px 0; border-radius: 12px; border: 1px solid var(--line); }
.blog-prose table { width: 100%; border-collapse: collapse; margin: 0; font-size: .94rem; }
.blog-prose th, .blog-prose td { border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.blog-prose thead th { background: var(--paper-2); font-weight: 600; color: var(--ink); }
.blog-prose tr:last-child td { border-bottom: 0; }
.blog-prose pre { background: var(--ink); color: #E6EDF3; padding: 16px 18px; border-radius: 12px; overflow-x: auto; font-size: .88rem; line-height: 1.6; margin: 24px 0; }
.blog-prose code { font-size: .9em; background: var(--paper-2); padding: 2px 6px; border-radius: 5px; }
.blog-prose pre code { background: none; padding: 0; }

/* ---- share ------------------------------------------------------- */
.blog-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.blog-share span { font-size: .85rem; color: var(--ink-3); margin-right: 4px; }
.blog-share a, .blog-share button {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2);
  font: inherit; font-size: .95rem; cursor: pointer; text-decoration: none;
  transition: color .18s, border-color .18s, transform .16s;
}
.blog-share a:hover, .blog-share button:hover { color: var(--cyan-d); border-color: var(--cyan); transform: translateY(-2px); }

/* ---- more posts + CTA -------------------------------------------- */
.blog-next { background: var(--paper-2); border-top: 1px solid var(--line); padding: 66px 0; }
.blog-next h2 { font-size: 1.4rem; margin: 0 0 24px; color: var(--ink); font-weight: 600; }
.blog-next .blog-card { background: #fff; }

.blog-cta {
  margin-top: 46px; border: 1px solid rgba(37,168,203,.28); border-radius: 20px;
  padding: 34px 36px; text-align: center;
  background: radial-gradient(70% 120% at 50% 0%, rgba(37,168,203,.13) 0%, rgba(37,168,203,0) 72%), #fff;
}
.blog-cta h2 { font-size: 1.35rem; margin: 0 0 8px; color: var(--ink); font-weight: 600; }
.blog-cta h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--cyan); }
.blog-cta p { margin: 0 0 20px; color: var(--ink-2); font-weight: 300; font-size: .98rem; }
@media (max-width: 560px) { .blog-cta { padding: 26px 22px; } }

@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-lead, .blog-cover img, .blog-more i, .blog-prog i { transition: none; }
  .blog-card:hover, .blog-lead:hover { transform: none; }
}