/* The x.ai-news restyle (Oct 2026), renamed news.css → blog-layout.css →
   pocket-blog.css → pocket-theme.css → pocket-style.css, each time to a fresh URL because an uploaded one
   pinned stale after its first upload: listings, the post page, and the
   utility pages.

   Lives in its own fresh file, with fresh nx-* class names, because the
   main.css asset URL pins stale at the origin (see docs). Linked by hand
   from partials/nav.html, after every other sheet, so it wins.

   Flat selectors only — the upload pipeline has dropped nested (&) rules.

   Palette: near-black ink on white, one muted step at 60%, a cool grey
   rule, and a warm off-white behind pictures. Type is Inter at 500 for
   every heading, tracked in slightly. */

:root {
    --nx-ink: #0a0a0a;
    --nx-mute: rgba(10, 10, 10, 0.6);
    --nx-faint: rgba(10, 10, 10, 0.25);
    --nx-rule: #d9dce4;
    --nx-card: #f9f8f6;
    --nx-edge: rgba(10, 10, 10, 0.06);
    --nx-edge-hover: rgba(10, 10, 10, 0.2);
    --nx-soft: #f3f2f0;
    --nx-soft-hover: #ebeae8;
    --nx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Every button and input, matched to the header's Buy now button
       (.pkth-nav__cta in partials/nav.html) so the two never disagree. */
    --nx-radius-btn: 6px;
}

body {
    color: var(--nx-ink);
    background: #fff;
    letter-spacing: normal;
}

/* Letter spacing is tuned per size for Inter, which sets wider than the
   reference's face: display sizes tighten most, body text a little, small
   labels barely at all. Headings get kerning and Inter's open digits, so
   numbers sit tight in titles like "10 Reasons". */
.nx-head-title, .nx-lead-title, .nx-post-title, .nx-all-title,
.nx-card-title, .nx-row-title, .nx-prose h2, .nx-prose h3 {
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "calt", "ss01";
}

/* ── The column ─────────────────────────────────────────────────
   80rem wide at most, 16px gutters, 24px from 1024px up. */
.nx-wrap {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 1024px) {
    .nx-wrap { padding: 0 1.5rem; }
}

/* The header is sticky, not fixed, so this is the gap below it, not the
   header's own height. */
.nx-page { padding-top: 4rem; }
@media (min-width: 640px) {
    .nx-page { padding-top: 6rem; }
}

/* ── Archive header (category, tag, author, search) ─────────── */
.nx-head { margin-bottom: 3rem; }
.nx-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--nx-mute);
}
.nx-head-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.032em;
    text-wrap: balance;
}
.nx-head-caption {
    margin: 1.5rem 0 0;
    max-width: 36rem;
    font-size: 1.125rem;
    line-height: 1.625;
    letter-spacing: -0.014em;
}
@media (min-width: 640px) { .nx-head-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .nx-head-title { font-size: 3rem; } }

/* ── Shared picture frame ───────────────────────────────────────
   Off-white, a hairline edge that darkens on hover, 1200×630. */
.nx-shot,
.nx-lead-shot {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1200 / 630;
    border: 1px solid var(--nx-edge);
    border-radius: 0.75rem;
    background: var(--nx-card);
    transition: border-color 0.3s ease;
}
.nx-shot img,
.nx-lead-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--nx-ease);
}

/* ── The lead ───────────────────────────────────────────────────
   Picture left, copy right on desktop (1.2fr / 0.8fr, 64px apart);
   picture first, copy under it, on mobile. */
.nx-lead {
    display: block;
    color: inherit;
    text-decoration: none;
}
.nx-lead:hover .nx-lead-shot { border-color: var(--nx-edge-hover); }
.nx-lead:hover .nx-lead-shot img { transform: scale(1.02); }
.nx-lead-shot img { transition-duration: 0.5s; transition-timing-function: ease-out; }

.nx-lead-copy { display: block; margin-top: 1.5rem; }
.nx-lead-date {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--nx-mute);
    letter-spacing: -0.006em;
}
.nx-lead-title {
    display: block;
    margin-top: 1rem;
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.032em;
    text-wrap: balance;
    transition: color 0.3s ease;
}
.nx-lead:hover .nx-lead-title { color: rgba(10, 10, 10, 0.9); }
.nx-lead-excerpt {
    display: block;
    margin-top: 1.5rem;
    max-width: 36rem;
    font-size: 1.125rem;
    line-height: 1.625;
    letter-spacing: -0.014em;
}

/* "Read article": a plain text button in Pocket blue, no fill. A faint
   blue hairline sits under the words; on hover a solid one draws across
   it from the left and the arrow nudges on. Based on "Drawn line" in
   preview/read-more-lab.html. */
.nx-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2rem;
    padding: 6px 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.01em;
    color: rgb(1, 113, 228);
}
.nx-more::after,
.nx-more::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
}
.nx-more::after { background: rgba(1, 113, 228, 0.25); }
.nx-more::before {
    z-index: 1;
    background: rgb(1, 113, 228);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--nx-ease);
}
.nx-more svg { width: 1em; height: 1em; transition: transform 0.45s var(--nx-ease); }
.nx-lead:hover .nx-more::before { transform: scaleX(1); }
.nx-lead:hover .nx-more svg { transform: translateX(4px); }

@media (min-width: 640px) {
    .nx-lead-title { font-size: 2.25rem; }
    .nx-more { font-size: 0.9375rem; }
}
@media (min-width: 1024px) {
    .nx-lead {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        align-items: center;
        gap: 4rem;
    }
    .nx-lead-shot { border-radius: 1rem; }
    .nx-lead-copy { margin-top: 0; }
    .nx-lead-title { font-size: 3rem; }
}

/* ── Four-up cards ──────────────────────────────────────────── */
.nx-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 4rem;
}
.nx-grid:empty { display: none; }
@media (min-width: 640px) {
    .nx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 5rem; }
}
@media (min-width: 1024px) {
    .nx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Archive pages have no lead above the cards on page 1 when the list is
   short; the header's margin is the gap then. */
.nx-head + .nx-wrap .nx-lead + .nx-grid { margin-top: 4rem; }

.nx-card {
    display: block;
    color: inherit;
    text-decoration: none;
}
.nx-card:hover .nx-shot { border-color: var(--nx-edge-hover); }
.nx-card:hover .nx-shot img { transform: scale(1.03); }

.nx-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
}
.nx-card-cat { font-weight: 500; }
.nx-dot { color: var(--nx-faint); }

.nx-card-title {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.375;
    letter-spacing: -0.014em;
    text-wrap: pretty;
}
.nx-arrow {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-left: 0.25rem;
    vertical-align: -0.1em;
    color: var(--nx-mute);
}

/* ── All posts: the ruled list ──────────────────────────────── */
.nx-all { margin-top: 4rem; padding-bottom: 5rem; }
@media (min-width: 640px) {
    .nx-all { margin-top: 5rem; padding-bottom: 7rem; }
}
.nx-all-title {
    margin: 0 0 2.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.024em;
}
@media (min-width: 640px) {
    .nx-all-title { font-size: 1.875rem; line-height: 2.25rem; }
}

.nx-list > * + * { border-top: 1px solid var(--nx-rule); }
.nx-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 -0.75rem;
    padding: 1.25rem 0.75rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.nx-row:hover { background: rgba(10, 10, 10, 0.02); }
.nx-row-copy { display: block; flex: 1; min-width: 0; }
.nx-row-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.375;
    letter-spacing: -0.012em;
}
.nx-row-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: -0.006em;
    color: var(--nx-mute);
    transition: color 0.3s ease;
}
.nx-row-date {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--nx-mute);
    transition: color 0.3s ease;
}
.nx-row:hover .nx-row-excerpt,
.nx-row:hover .nx-row-date { color: var(--nx-ink); }
@media (min-width: 640px) {
    .nx-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
    .nx-row-title { font-size: 1rem; }
}

/* ── Pager ──────────────────────────────────────────────────── */
.nx-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6rem;
    font-size: 0.875rem;
}
.nx-pager a {
    padding: 0.625rem 1.125rem;
    border-radius: var(--nx-radius-btn);
    background: var(--nx-soft);
    color: var(--nx-ink);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.nx-pager a:hover { background: var(--nx-soft-hover); }
.nx-pager-count { color: var(--nx-mute); font-size: 0.75rem; }
/* The list above already carries its own bottom padding. */
.nx-all + .nx-pager { margin-top: -2rem; }

/* ── Buttons ────────────────────────────────────────────────── */
.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: var(--nx-radius-btn);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, filter 0.15s ease;
}
.nx-btn--solid { background: var(--nx-ink); color: #fff; }
.nx-btn--solid:hover { filter: brightness(0.9); }
.nx-btn--soft { background: var(--nx-soft); color: var(--nx-ink); }
.nx-btn--soft:hover { background: var(--nx-soft-hover); }
@media (min-width: 640px) {
    .nx-btn { font-size: 1rem; }
}

/* ── The post ───────────────────────────────────────────────────
   A 64rem header column, a 48rem reading column. */
.nx-post {
    padding: 4rem 0 4rem;
    color: var(--nx-ink);
}
@media (min-width: 640px) { .nx-post { padding-bottom: 8rem; } }

.nx-post-head,
.nx-post-body {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}
.nx-post-head { max-width: 64rem; }
.nx-post-body { max-width: 48rem; }
@media (min-width: 1024px) {
    .nx-post-head, .nx-post-body { padding: 0 1.5rem; }
}

.nx-post-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--nx-mute);
    letter-spacing: -0.006em;
}
@media (min-width: 640px) { .nx-post-bar { margin-bottom: 5rem; } }
.nx-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--nx-mute);
    text-decoration: none;
    transition: color 0.15s ease;
}
.nx-back:hover { color: var(--nx-ink); }
.nx-back svg { width: 1rem; height: 1rem; }

.nx-post-intro { text-align: center; }
.nx-post-title {
    margin: 0 auto;
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.032em;
    text-wrap: balance;
}
@media (min-width: 640px) { .nx-post-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .nx-post-title { font-size: 3rem; } }

.nx-post-standfirst {
    margin: 1.5rem auto 0;
    max-width: 36rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: -0.014em;
    text-wrap: pretty;
}
.nx-post-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2.5rem 0;
}
@media (min-width: 1024px) { .nx-post-ctas { margin: 3rem 0; } }

.nx-post-cover {
    position: relative;
    overflow: hidden;
    margin-bottom: 3.5rem;
    border: 1px solid var(--nx-edge);
    border-radius: 1rem;
    background: var(--nx-card);
}
.nx-post-cover { aspect-ratio: 1200 / 630; }
.nx-post-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 640px) { .nx-post-cover { margin-bottom: 4.5rem; } }
/* A page has no buttons; give its title room before the copy. */
.nx-post-intro:last-child { margin-bottom: 3.5rem; }

/* ── Reading column ─────────────────────────────────────────────
   16px at 1.75, headings at 500 with wide air above them. Keeps .prose
   on the element so the offer banner and pull quotes still apply. */
.nx-prose { color: var(--nx-ink); font-size: 1rem; line-height: 1.75; letter-spacing: -0.011em; }
.nx-prose p {
    margin: 1.25em 0;
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: -0.011em;
}
.nx-prose > :first-child { margin-top: 0; }
.nx-prose h2 {
    margin: 3rem 0 1rem;
    color: var(--nx-ink);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.022em;
}
.nx-prose h3 {
    margin: 2.5rem 0 0.75rem;
    color: var(--nx-ink);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.75rem;
    letter-spacing: -0.018em;
}
.nx-prose h4 {
    margin: 1.5rem 0 0.5rem;
    color: var(--nx-ink);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}
.nx-prose :is(h2, h3, h4) { scroll-margin-top: 7rem; }
.nx-prose :is(ul, ol) { margin: 1.25em 0; padding-left: 1.625em; }
.nx-prose li { margin: 0.5em 0; padding-left: 0.375em; }
.nx-prose li::marker { color: var(--nx-mute); }
.nx-prose strong { color: var(--nx-ink); font-weight: 600; }

/* Links: no underline, a faint rule beneath that darkens on hover. */
.nx-prose a {
    color: var(--nx-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 10, 10, 0.2);
    padding-bottom: 1px;
    transition: border-color 0.15s ease;
}
.nx-prose a:hover { border-bottom-color: rgba(10, 10, 10, 0.5); }

.nx-prose hr { margin: 3em 0; border: 0; border-top: 1px solid var(--nx-rule); }
.nx-prose img { border-radius: 0.75rem; }
.nx-prose code {
    padding: 1px 0.25rem;
    border-radius: 0.25rem;
    background: rgba(10, 10, 10, 0.03);
    box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08), 0 1px 2px rgba(10, 10, 10, 0.06);
    font-size: 0.9em;
    color: rgba(10, 10, 10, 0.75);
}
.nx-prose pre {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: #111;
    color: #eee;
    font-size: 0.875rem;
    line-height: 1.7;
}
.nx-prose pre code { padding: 0; background: none; box-shadow: none; color: inherit; }
.nx-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.nx-prose th { padding: 0.5rem 0.75rem 0.5rem 0; font-weight: 500; text-align: left; border-bottom: 1px solid var(--nx-rule); }
.nx-prose td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--nx-rule); }

/* Pull quotes keep the Pocket design from main.css (see post-quote
   convention); only the colours move onto the new ink. */
.nx-prose blockquote { color: var(--nx-ink); }
.nx-prose blockquote::before { color: var(--nx-ink); }
.nx-prose blockquote p + p { color: var(--nx-mute); }

/* The offer banner's CTA is a heypocket.com link; it has its own button
   look, so it must not pick up the text-link rule above. */
.nx-prose div:has(> div > img) > div > p > a[href^="https://heypocket.com/"] { border-bottom: 0; padding-bottom: 0; }

/* ── Lead form under a post ─────────────────────────────────── */
.nx-leadform {
    max-width: 48rem;
    margin: 0 auto 6rem;
    padding: 2.5rem 1.5rem 0;
    border-top: 1px solid var(--nx-rule);
}
.nx-leadform h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.nx-leadform input { border-radius: var(--nx-radius-btn); }

/* ── Search and 404 ─────────────────────────────────────────── */
.nx-search { max-width: 32rem; margin: 0; }
.nx-search input {
    width: 100%;
    height: 2.75rem;
    padding: 0 1.125rem;
    border: 1px solid var(--nx-rule);
    border-radius: var(--nx-radius-btn);
    background: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--nx-ink);
    outline: none;
}
.nx-search input:focus { border-color: rgba(10, 10, 10, 0.4); outline: none; }
.nx-results { max-width: none; margin-bottom: 3rem; }
.nx-results li { padding: 1.25rem 0; border-bottom: 1px solid var(--nx-rule); }
.nx-results a { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.nx-results p { color: var(--nx-mute); }
.search-page.nx-wrap { padding-bottom: 6rem; }
.search-page .nx-all-title { margin-top: 4rem; }

@media (prefers-reduced-motion: reduce) {
    .nx-more::before, .nx-more svg { transition: none; }
    .nx-shot img, .nx-lead-shot img { transition: none; }
    .nx-card:hover .nx-shot img, .nx-lead:hover .nx-lead-shot img { transform: none; }
}