/* blog.duxels.com: the page shell and the reading styles. The header, the footer, the buttons, the flags and the tokens (:root) are the package's
   chrome.css (duxels-shared, copied by tools/build_blog.py to /shared/<version>/chrome/chrome.css, loaded before this file); nothing is loaded from
   duxels.com. Source of public/blog.css (the build copies it with a content hash in the ?v=). No scripts needed to read. */

/* page shell: what a page of the blog needs of the page base the stylesheet of duxels.com used to give (the rules are the same ones, kept here so that
   the blog does not depend on another site's stylesheet) */
html { scroll-behavior: auto; background: var(--bg); color-scheme: dark; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: transparent; color: var(--fg); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
main { position: relative; z-index: 1; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; }
.skip:focus, .skip:focus-visible { left: 12px; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.privacy-page { background: radial-gradient(ellipse at 70% 0%, var(--bg2), var(--bg) 42%) fixed; }
/* the header 2 is fixed and the <body> already leaves its room (margin-top: var(--dxh-h), margin-left: var(--dxh-side-w), duxels-shared header2.css), so the page starts at its own air */
.privacy-main { width: min(100% - 40px, 860px); margin: 0 auto; padding: 40px 0 max(64px, env(safe-area-inset-bottom)); }
.privacy-heading { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.privacy-eyebrow { color: var(--mut); font-size: .9rem; letter-spacing: .12em; margin-bottom: 12px; }
.privacy-heading h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.035em; line-height: 1.12; overflow-wrap: anywhere; }
.privacy-intro { font-size: 1.12rem; margin-top: 24px; }
.status-main { text-align: center; }
.status-main .privacy-intro { max-width: 46ch; margin-left: auto; margin-right: auto; }
.status-main h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.03em; line-height: 1.12; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
@media (max-width: 600px) {
  .privacy-main { width: calc(100% - 32px); padding-top: 28px; }
  .privacy-heading { padding-bottom: 24px; }
  .privacy-intro { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.blog-main { width: min(100% - 40px, 1040px); }
.blog-heading { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-main > .blog-heading { max-width: none; }
.blog-main > .blog-grid, .blog-main > .blog-soon, .blog-main > .blog-pager { margin-top: 32px; }
.blog-feed { margin-top: 14px; font-size: .88rem; }
.blog-feed a, .blog-byline a, .privacy-eyebrow a { color: #9bc7ff; text-underline-offset: 3px; }
.blog-page a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* the floating chat bubble of Duxels (the loader, 52 px at the bottom right, 14 px from the edges) sits over the last 66 px of the window: the common footer leaves it
   room, on the right on a computer (the ES | EN switch would be under it) and below the content on a phone (the footer is stacked and centered) */
@media (min-width: 801px) { .blog-page .foot.dxf { padding-right: max(80px, env(safe-area-inset-right)); } }
@media (max-width: 800px) { .blog-page .foot.dxf { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* index: cards */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(17, 26, 50, .62); }
.blog-card-img { display: block; aspect-ratio: 1200 / 630; background: var(--bg2); }
.blog-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.blog-date { color: var(--mut); font-size: .82rem; margin: 0; }
.blog-card h2 { font-size: 1.12rem; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.blog-card h2 a { text-decoration: none; }
.blog-card h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-card p { color: #c4cce0; font-size: .95rem; line-height: 1.6; margin: 0; }
.blog-card .blog-date { color: var(--mut); font-size: .82rem; }
.blog-more { margin-top: auto; padding-top: 4px; color: #9bc7ff; font-size: .9rem; text-underline-offset: 3px; }
.blog-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--mut); font-size: .92rem; }
.blog-pager a { color: #9bc7ff; text-underline-offset: 3px; }
.blog-soon { padding: 40px 0; text-align: center; }
.blog-soon h2 { font-size: 1.5rem; margin-bottom: 10px; }
.blog-soon p { color: #c4cce0; }

/* an article */
.blog-article { max-width: 760px; margin: 0 auto; }
.blog-byline { color: var(--mut); font-size: .92rem; margin-top: 16px; }
.blog-cover { margin: 28px 0 8px; }
.blog-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); }
.blog-body { font-size: 1.06rem; }
.blog-body h2 { font-size: 1.45rem; line-height: 1.3; letter-spacing: -.01em; margin-top: 44px; overflow-wrap: anywhere; }
.blog-body p { color: #c4cce0; line-height: 1.8; margin-top: 16px; }
.blog-body ul { list-style: disc; padding-left: 1.4em; margin-top: 14px; color: #c4cce0; }
.blog-body li { line-height: 1.75; margin-top: 8px; }
.blog-body li::marker { color: var(--ia); }
.blog-body a, .blog-about a:not(.btn) { color: #9bc7ff; text-underline-offset: 3px; overflow-wrap: anywhere; }
.blog-faq { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); }
.blog-q { margin-top: 22px; }
.blog-q h3 { font-size: 1.08rem; line-height: 1.4; }
.blog-q p { margin-top: 8px; }
.blog-cta { margin-top: 48px; padding: 24px 24px 26px; border: 1px solid color-mix(in srgb, var(--ia) 42%, var(--line)); border-radius: 14px; background: rgba(17, 31, 59, .58); }
.blog-body .blog-cta h2 { margin-top: 0; font-size: 1.25rem; }
.blog-cta p { margin-top: 8px; }
.blog-cta .btn { color: var(--bg); text-decoration: none; }
.blog-ai-note { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--mut) !important; font-size: .85rem !important; line-height: 1.6 !important; }
.blog-related { max-width: 1040px; margin: 64px auto 0; }
.blog-related > h2 { font-size: 1.25rem; margin-bottom: 16px; }
.blog-sample { max-width: 760px; margin: 0 auto 20px; padding: 10px 14px; border: 1px solid #b8842b; border-radius: 10px; background: rgba(184, 132, 43, .16); color: #f2d9a3; font-size: .9rem; }
.blog-about h2 { font-size: 1.3rem; margin-top: 36px; }
.blog-about p { color: #c4cce0; line-height: 1.8; margin-top: 12px; }
.blog-about .btn { margin-top: 28px; }

@media (max-width: 600px) {
  .blog-main { width: calc(100% - 32px); }
  .blog-body { font-size: 1rem; }
  .blog-body h2 { font-size: 1.28rem; margin-top: 36px; }
  .blog-cta { padding: 18px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { .blog-page * { scroll-behavior: auto !important; } }