/* Blog (/blog/, /sl/blog/): on top of legal.css, feature articles, the latest
   first. The front page and an article are one centred column; an article's
   screenshots get more room than its text. Pages are built by tools/blog/. */

:root {
  --chip: #ffffff0a;
  --shot-shadow: 0 0 0 1px #ffffff17, 0 40px 90px -46px #000;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --chip: #1a16250a;
    --shot-shadow: 0 0 0 1px #1a16251a, 0 30px 70px -40px #1a162566;
  }
}
:root[data-theme='light'] {
  --chip: #1a16250a;
  --shot-shadow: 0 0 0 1px #1a16251a, 0 30px 70px -40px #1a162566;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.blog { padding: 32px 0 64px; }
.blog img { display: block; max-width: 100%; height: auto; }
.label { color: var(--soft); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.empty { padding: 32px 0 80px; color: var(--muted); }

/* Front page: a list under month headings, a row per article: its title and
   day, then its summary on one line (two on phones). */
.list, .article { max-width: 720px; }
.month + .month { margin-top: 56px; }
.month h2 { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.month ul { margin: 0; padding: 0; list-style: none; }
.month li { border-bottom: 1px solid var(--line); }
.month a { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 22px 0; }
.month h3, .month time { align-self: baseline; }
.month h3 { font-size: 20px; font-weight: 620; line-height: 1.3; letter-spacing: -.02em; transition: color .2s; }
.month time { color: var(--soft); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; white-space: nowrap; }
.month p { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 15.5px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }

/* Article: screenshots are up to 960px wide, the text 720px. */
.hero, .prose figure { --wide: max(100%, min(960px, 100vw - 64px)); width: var(--wide); margin-inline: calc((100% - var(--wide)) / 2); }

.crumbs { color: var(--muted); font-size: 14.5px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.article h1 { margin-top: 22px; font-size: clamp(38px, 4.4vw, 56px); font-weight: 650; line-height: 1.02; letter-spacing: -.05em; }
.post-note { margin-top: 14px; color: var(--soft); font-size: 14.5px; }
.lead { margin-top: 18px; color: var(--muted); font-size: 19px; line-height: 1.55; }
/* Where it shipped, one line: the apps, then the version and the day. */
.shipped { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 20px; color: var(--soft); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; }
.shipped > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.shipped b, .shipped > span > span { white-space: nowrap; }
.shipped b { color: var(--ink); font-family: 'Geist', system-ui, sans-serif; font-size: 14.5px; font-weight: 600; }
.hero { margin-top: 36px; margin-bottom: 0; }
.hero img { width: auto; max-height: 640px; margin-inline: auto; border-radius: 16px; box-shadow: var(--shot-shadow); }

.prose { margin-top: 44px; color: var(--muted); font-size: 17.5px; line-height: 1.72; }
/* Each ## section is a <section>: the gap before a heading sits on its section. */
.prose > * + *, .prose section > * + * { margin-top: 18px; }
.prose > section { margin-top: 52px; }
.prose h2 { margin-top: 52px; color: var(--ink); font-size: clamp(24px, 2.4vw, 30px); font-weight: 650; line-height: 1.15; letter-spacing: -.035em; scroll-margin-top: 24px; }
.prose > :first-child, .prose section > h2 { margin-top: 0; }
.prose h3 { margin-top: 30px; color: var(--ink); font-size: 18.5px; font-weight: 620; line-height: 1.35; letter-spacing: -.015em; }
.prose h2 + *, .prose h3 + * { margin-top: 10px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--soft); }
/* Numbered lists are steps. */
.prose ol { padding: 0; list-style: none; counter-reset: step; }
.prose ol > li { position: relative; padding-left: 46px; counter-increment: step; }
.prose ol > li + li { margin-top: 14px; }
.prose ol > li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; }
.prose figure { margin-block: 30px; }
/* A tall (phone) screenshot stays a screen high at most, centred. */
.prose figure img, .prose p img { width: auto; max-height: 640px; margin-inline: auto; border-radius: 14px; box-shadow: var(--shot-shadow); }
.prose figure video { display: block; width: auto; max-width: 100%; height: auto; max-height: 640px; margin-inline: auto; border-radius: 14px; box-shadow: var(--shot-shadow); background: #000; }
.prose figcaption { margin-top: 12px; color: var(--soft); font-size: 14px; line-height: 1.5; text-align: center; }
.prose blockquote { margin: 24px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--violet); color: var(--ink); }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.prose :not(pre) > code { padding: 1px 5px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.55; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--ink); font-weight: 600; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.pager a { display: block; padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 16px; font-weight: 600; transition: box-shadow .2s; }
.pager .label { display: block; margin-bottom: 6px; }
.pager .next { text-align: right; }

.post-cta { margin-top: 56px; padding: 32px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
.post-cta h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 650; line-height: 1.1; letter-spacing: -.035em; }
.post-cta p { margin-top: 10px; color: var(--muted); font-size: 16px; }

@media (hover: hover) {
  .pager a:hover { box-shadow: inset 0 0 0 1px var(--violet), var(--card-shadow); }
  .month a:hover h3 { color: var(--accent); }
  .crumbs a:hover { color: var(--strong); }
}
@media (max-width: 700px) {
  .month a { grid-template-columns: 1fr; padding: 18px 0; }
  .month h3 { font-size: 18px; }
  .month time { order: 3; }
  .month p { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .lead { font-size: 18px; }
  .prose { font-size: 17px; }
  .pager { grid-template-columns: 1fr; }
  .post-cta { padding: 24px; }
}