/*
  The blog (index and articles).

  Loaded after the shared <style> block in pages.py, so it restates the landing page's design tokens
  (the form pages carry an older, smaller set) and overrides the bare element rules there (h1, p,
  ul, a) inside .blog-wrap. System fonts and no third-party requests, for the same reason as the
  landing page: this site's headline is that nothing leaves your phone.
*/

:root {
  color-scheme: light;
  --ink: #101227;
  --ink-2: #3A4059;
  --dim: #666C82;
  --line: #E4E8F3;
  --bg: #FAFBFE;
  --bg-2: #F1F4FB;
  --card: #FFFFFF;
  --primary: #4A56D2;
  --primary-2: #7A5AE0;
  --primary-soft: #EEF0FE;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(16, 18, 39, .05), 0 4px 14px rgba(16, 18, 39, .05);
  --shadow-lg: 0 2px 6px rgba(16, 18, 39, .05), 0 24px 50px rgba(16, 18, 39, .10);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F3F5FC;
  --ink-2: #C4CADC;
  --dim: #939AB1;
  --line: #262C42;
  --bg: #0A0C15;
  --bg-2: #10131F;
  --card: #141828;
  --primary: #7C87F0;
  --primary-2: #A98CF5;
  --primary-soft: #1B2040;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 50px rgba(0, 0, 0, .5);
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- header (shared slim header, widened) */

.site-header-in { max-width: 1080px; padding: 16px 24px 0; }
.site-link { font-weight: 600; }

/* ---------------------------------------------------------------- page frame */

.blog-wrap { max-width: 1080px; margin: 0 auto; padding: 20px 24px 96px; }
.blog-wrap a { color: var(--primary); text-decoration: none; }
.blog-wrap a:hover { text-decoration: underline; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 28px; padding: 0;
             font-size: 14px; color: var(--dim); }
.crumbs li + li::before { content: "\203A"; margin: 0 9px; opacity: .6; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--primary); text-decoration: none; }
.crumbs [aria-current] { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
                         white-space: nowrap; max-width: 46ch; }

/* ---------------------------------------------------------------- index */

.blog-head { margin: 8px 0 40px; }
.blog-head h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.1; letter-spacing: -.03em;
                margin: 0 0 12px; }
.blog-head p { color: var(--ink-2); font-size: 19px; margin: 0 0 14px; max-width: 52ch; }
.blog-wrap .rss { font-size: 14.5px; font-weight: 600; }

.empty { padding: 56px 28px; text-align: center; color: var(--ink-2); font-size: 18px;
         background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-lg); }

.post-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- article header */

.post { max-width: 68ch; margin: 0 auto; }
.post .crumbs { max-width: none; }
.post-head { margin: 4px 0 28px; }
.post-head .tag { margin: 0 6px 14px 0; }
.post-head h1 { font-size: clamp(32px, 5.2vw, 46px); line-height: 1.12; letter-spacing: -.03em;
                margin: 0 0 14px; color: var(--ink); text-wrap: balance; }
.byline { margin: 0; color: var(--dim); font-size: 15px; }

.cover { margin: 0 0 32px; }
.cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
             border-radius: var(--radius); border: 1px solid var(--line);
             background: linear-gradient(135deg, var(--primary-soft), var(--bg-2) 55%, var(--primary-soft));
             box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------- table of contents */

.toc { margin: 0 0 36px; padding: 20px 24px; background: var(--bg-2); border: 1px solid var(--line);
       border-radius: var(--radius); }
.toc h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
          color: var(--dim); }
.toc ol { margin: 0; padding-left: 1.3em; color: var(--dim); }
.toc li { margin: 5px 0; }
.toc a { color: var(--ink-2); font-weight: 500; }
.toc a:hover { color: var(--primary); }

/* ---------------------------------------------------------------- article body */

.prose { color: var(--ink-2); font-size: 18px; line-height: 1.7; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.3em; color: var(--ink-2); }
.prose h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.02em; color: var(--ink);
            margin: 2.1em 0 .6em; scroll-margin-top: 24px; }
.prose h3 { font-size: 21px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
            margin: 1.8em 0 .5em; scroll-margin-top: 24px; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
           text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--primary); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.4em; color: var(--ink-2); }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--primary); }
.prose li > ul, .prose li > ol { margin: .4em 0 0; }

.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--primary);
                    color: var(--ink); font-size: 1.06em; font-style: italic; }
.prose blockquote p { color: inherit; margin: 0 0 .6em; }
.prose blockquote > :last-child { margin-bottom: 0; }

.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }

.prose img { display: block; max-width: 100%; height: auto; margin: 1.8em auto; border-radius: 14px;
             border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.prose figure { margin: 1.8em 0; }
.prose figure img { margin: 0 auto; }
.prose figcaption { margin-top: 10px; text-align: center; color: var(--dim); font-size: 14.5px; }

.prose code { font-family: var(--mono); font-size: .88em; padding: .15em .4em; border-radius: 6px;
              background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); }
.prose pre { margin: 1.6em 0; padding: 16px 20px; overflow-x: auto; background: var(--bg-2);
             border: 1px solid var(--line); border-radius: 14px; font-size: 15px; line-height: 1.6; }
.prose pre code { padding: 0; border: 0; background: none; font-size: inherit; }

.prose .table-wrap { margin: 1.8em 0; overflow-x: auto; border: 1px solid var(--line);
                     border-radius: 14px; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; margin: 0; font-size: 16px; }
.prose th, .prose td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line);
                       vertical-align: top; }
.prose th { white-space: nowrap; }
.prose td { min-width: 12ch; }
.prose th { color: var(--ink); font-size: 14px; font-weight: 650; background: var(--bg-2); }
.prose tbody tr:nth-child(even) td { background: var(--bg-2); }
.prose tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- call to action */

.cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
       margin: 56px 0 0; padding: 32px 34px; border-radius: var(--radius-lg); color: #fff;
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
       box-shadow: 0 18px 40px -18px rgba(74, 86, 210, .65); }
:root[data-theme="dark"] .cta { color: #0A0C15; }
.cta > div { flex: 1 1 280px; }
.cta h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; color: inherit; }
.cta p { margin: 0; color: inherit; opacity: .92; font-size: 16.5px; line-height: 1.55; }

/* ---------------------------------------------------------------- related */

.related { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.related h2 { margin: 0 0 24px; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }

/* ---------------------------------------------------------------- small screens, motion */

@media (max-width: 600px) {
  .site-header-in { padding: 14px 16px 0; }
  .blog-wrap { padding: 16px 16px 72px; }
  .prose { font-size: 17.5px; }
  .prose h2 { font-size: 25px; }
  .cta { padding: 26px 22px; }
  .crumbs [aria-current] { max-width: 22ch; }
}

/* ---------------------------------------------------------------- about / faq / footer */

.prose .definition { font-size: 21px; line-height: 1.55; color: var(--ink); padding: 18px 22px;
                     background: var(--primary-soft); border-radius: var(--radius);
                     border-left: 4px solid var(--primary); margin-bottom: 1.6em; }
.prose h2:first-child, .prose > .definition + h2 { margin-top: 1.6em; }