/* Written by scripts/blog/chrome.mjs to /blog/blog.css. Palette tokens come
   from /landing.css; nothing here redefines them. */

/* The container -----------------------------------------------------------
   landing.css sizes .wrap for a single reading column — max-width 760px — and
   every page on this site inherits it. An index with a 320px sidebar inside
   that leaves about 380px for the articles, which is the two-words-per-line
   column this replaced, with the real width of the window empty on both sides.
   blog.css only loads on blog pages, so widening .wrap here affects nothing
   else. The ARTICLE page goes back to a reading measure below: 1200px of body
   text is unreadable for the opposite reason. */
.wrap { max-width: 1280px; padding: 28px 24px 40px; }
/* A phone has no width to give away to gutters. */
@media (max-width: 560px) { .wrap { padding: 20px 16px 56px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header ------------------------------------------------------------------ */
.site-header {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 0; margin-bottom: 28px; border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  /* Brand and actions on one line, sections on their own — four links squeezed
     between them wrap into a ragged block that is hard to hit with a thumb. */
  .site-header { gap: 10px; row-gap: 14px; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: 16px; overflow-x: auto; padding-bottom: 2px; }
  .nav__link { white-space: nowrap; padding: 4px 0; }
  .header-actions { margin-left: auto; gap: 12px; }
  /* Everything on that first row has to fit inside 390px minus the gutters:
     mark, wordmark, Login and the button. Unshrunk it does not, and the button
     ends up hard against the edge of the screen. */
  .brand__name { font-size: 17px; }
  .brand__mark { width: 28px; height: 28px; }
  .header-login { font-size: 14px; }
  .header-cta { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 380px) {
  /* Below this the wordmark and the button cannot share a row honestly. The
     button is the one that has to survive. */
  .brand__name { font-size: 16px; }
  .header-login { display: none; }
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { border-radius: 8px; }
.brand__name { font-weight: 700; color: var(--ink); letter-spacing: -0.2px; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.nav__link { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav__link:hover { color: var(--ink); }
.nav__link.is-active { color: var(--brand); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-login { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.header-login:hover { color: var(--brand); }
.header-cta {
  /* The app's Get Started button: violet gradient, pill, white label. */
  background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.header-cta:hover { filter: brightness(1.08); }
.brand__name { font-size: 20px; }

/* Footer, matching the app's -----------------------------------------------
   Its own palette rather than the page tokens: this band is dark on every
   theme, exactly as it is on the home page, so it cannot borrow --bg/--ink. */
.site-footer { background: #0f172a; color: #cbd5e1; margin-top: 64px; }
.foot-inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px 28px; }
.foot-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
@media (max-width: 1040px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: minmax(0, 1fr); } .foot-inner { padding: 40px 16px 24px; } }
.site-footer .brand__name { color: #fff; }
.foot-blurb { color: #94a3b8; font-size: 15px; margin: 14px 0 12px; max-width: 34ch; }
.foot-marks { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 18px; color: #94a3b8; font-size: 14px; }
.foot-col__title { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-list a, .foot-popular__links a, .foot-legal a { color: #cbd5e1; text-decoration: none; font-size: 15px; }
.foot-list a:hover, .foot-popular__links a:hover, .foot-legal a:hover { color: #fff; }
.foot-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-badge img { display: block; height: 40px; width: auto; }
.foot-popular { border-top: 1px solid #1e293b; margin-top: 40px; padding-top: 26px; }
.foot-popular__links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-legal {
  border-top: 1px solid #1e293b; margin-top: 26px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  color: #94a3b8; font-size: 14px;
}
.foot-legal p { margin: 0; }
.foot-legal__links { display: flex; flex-wrap: wrap; gap: 22px; }

/* Index hero and search --------------------------------------------------- */
.blog-hero { margin: 8px 0 24px; max-width: 760px; }
.blog-hero .lede { max-width: 68ch; }
/* clamp, not 40px flat: landing.css sizes every other h1 on the site with
   clamp(28px, 5vw, 40px), and a fixed 40px headline on a 360px phone is four
   words a line. */
.blog-hero h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 40px); letter-spacing: -1px; }
.blog-search { margin: 0 0 28px; }
.blog-search__input {
  width: 100%; padding: 12px 16px; font-size: 16px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.blog-search__input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font: inherit; font-size: 14px; cursor: pointer; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted);
}
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.blog-search__count { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
@media (pointer: coarse) {
  /* A 32px chip is a miss on a touch screen. */
  .chip { padding: 10px 16px; }
  .page-link { padding: 11px 14px; }
}

/* Two-column layout -------------------------------------------------------
   ~780px of articles beside a 320px rail at the full container width, which
   is the proportion every blog that reads well settles on. The sidebar drops
   underneath before the article column gets narrow enough to hurt. */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
@media (max-width: 1040px) {
  /* Stacked, the rail is no longer a rail — it is what comes after the
     articles, so it needs a separator's worth of space, not a column's. */
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sidebar { padding-top: 4px; }
}

/* Cards ------------------------------------------------------------------- */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.post-card {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px;
  padding: 0 0 26px; border-bottom: 1px solid var(--line);
}
.post-card[hidden] { display: none; }
/* Nothing in a card may push the page sideways. */
.post-card img, .related img, .post-hero { max-width: 100%; }
.post-card__img { width: 100%; height: 172px; border-radius: 10px; object-fit: cover; background: var(--panel); }
/* Titles are links and have to look like links. Rendered in --ink they read
   as static headings, so nobody clicks them. */
.post-card__title {
  display: block; font-size: 21px; line-height: 1.3; margin-bottom: 6px;
  color: var(--brand); font-weight: 600; text-decoration: none; max-width: 30ch;
}
.post-card__title:hover, .post-card__title:focus-visible { text-decoration: underline; }
.post-card__excerpt { color: var(--muted); margin: 0 0 8px; }

/* After the base rules, not before them. Same specificity means source order
   decides, so a media query above the rule it is meant to override does
   nothing at all — the phone was still getting the 21px title and the 30ch
   cap this block exists to remove. */
@media (max-width: 620px) {
  .post-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .post-card__img { height: 200px; }
  .post-card__title { font-size: 20px; max-width: none; }
}
/* Goes to the article. It used to expand a longer excerpt in place, which
   left the reader with more text and still no article. */
.post-card__more {
  display: inline-block; margin: 0 0 8px;
  color: var(--brand); font-size: 14px; font-weight: 600; text-decoration: none;
}
.post-card__more:hover, .post-card__more:focus-visible { text-decoration: underline; }
.blog-empty { color: var(--muted); padding: 24px 0; }

/* Pagination -------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 28px 0 0; }
.page-link {
  min-width: 38px; text-align: center; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px;
}
.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link.is-current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.page-link--edge { color: var(--muted); }

/* Sidebar ----------------------------------------------------------------- */
.sidebar { display: grid; gap: 18px; position: sticky; top: 20px; }
@media (max-width: 900px) { .sidebar { position: static; } }
.side-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
.side-card__kicker { margin: 0 0 4px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.side-card__title { margin: 0 0 10px; font-size: 17px; }
.side-card__text { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.side-card__cta { display: inline-block; background: var(--brand); color: #fff; text-decoration: none; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.promo__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.promo__badge img { display: block; height: 40px; width: auto; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-list__link { display: flex; justify-content: space-between; gap: 12px; color: var(--brand); text-decoration: none; font-size: 15px; }
.side-list__link:hover, .side-list__link:focus-visible { text-decoration: underline; }
.side-list__link.is-active { color: var(--brand); font-weight: 600; }
.side-list__count { color: var(--muted); font-size: 13px; }

/* Article -----------------------------------------------------------------
   Back to a reading measure, centred. The index needs the width; a paragraph
   1,200px wide is unreadable for the opposite reason. */
.breadcrumb { color: var(--muted); font-size: 14px; margin: 0 0 14px; max-width: 760px; margin-inline: auto; }
.breadcrumb a { color: var(--muted); }
.article-layout { max-width: 760px; margin: 0 auto; }
.related { max-width: 760px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid var(--line); }
.related h2 { font-size: 20px; margin: 0 0 16px; }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.related__card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.related__img { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--panel); }
.related__body { padding: 12px 14px 16px; }
.related__title { font-size: 16px; font-weight: 600; color: var(--brand); text-decoration: none; line-height: 1.35; }
.related__title:hover, .related__title:focus-visible { text-decoration: underline; }