/* ==========================================================================
   Long-form typography — legal pages, blog posts.
   Shared by page.php, single.php and home.php.
   ========================================================================== */

.kxp-doc { padding-block: clamp(6.5rem, 12vh, 9rem) clamp(4rem, 9vw, 7rem); }
.kxp-doc__head {
    padding-bottom: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--kxp-grey-100);
}
.kxp-doc__meta {
    margin-top: 1rem;
    font-size: var(--kxp-step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kxp-grey-500);
}

/* ── Prose ──────────────────────────────────────────────────────────────────
   A single measure, generous leading. Legal text is read reluctantly — the
   job here is to make it scannable, not decorative. */
.kxp-prose {
    max-width: 68ch;
    color: var(--kxp-grey-700);
    font-size: var(--kxp-step-0);
    line-height: 1.75;
}
.kxp-prose > * + * { margin-top: 1.2em; }

.kxp-prose h1, .kxp-prose h2, .kxp-prose h3, .kxp-prose h4 {
    color: var(--kxp-black);
    text-transform: none;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.kxp-prose h2 { font-size: var(--kxp-step-2); margin-top: 2.5em; }
.kxp-prose h3 { font-size: var(--kxp-step-1); margin-top: 2em; }
.kxp-prose h4 { font-size: var(--kxp-step-0); margin-top: 1.8em; }
/* First heading shouldn't push away from the page title. */
.kxp-prose > :first-child { margin-top: 0; }

.kxp-prose a {
    color: var(--kxp-black);
    border-bottom: 1px solid var(--kxp-grey-300);
    transition: color 0.3s var(--kxp-ease), border-color 0.3s var(--kxp-ease);
}
.kxp-prose a:hover { color: var(--kxp-accent); border-bottom-color: var(--kxp-accent); }
.kxp-prose strong { color: var(--kxp-black); font-weight: 700; }

.kxp-prose ul, .kxp-prose ol { padding-left: 1.4em; }
.kxp-prose li + li { margin-top: 0.5em; }
.kxp-prose li::marker { color: var(--kxp-accent); }

.kxp-prose blockquote {
    margin-inline: 0;
    padding: 0.2em 0 0.2em 1.4em;
    border-left: 2px solid var(--kxp-accent);
    color: var(--kxp-black);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    line-height: 1.4;
}
.kxp-prose img { margin-block: 2em; }
.kxp-prose hr { margin-block: 2.5em; border: 0; border-top: 1px solid var(--kxp-grey-100); }
.kxp-prose code {
    background: var(--kxp-grey-50);
    padding: 0.15em 0.4em;
    font-size: 0.9em;
}
.kxp-prose table { width: 100%; border-collapse: collapse; font-size: var(--kxp-step--1); }
.kxp-prose th, .kxp-prose td { padding: 0.75em 0; border-bottom: 1px solid var(--kxp-grey-100); text-align: left; }
.kxp-prose th { color: var(--kxp-black); font-weight: 700; }

/* ── Blog index ─────────────────────────────────────────────────────────── */
.kxp-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kxp-post-row { border-bottom: 1px solid var(--kxp-grey-100); }
.kxp-post-row:first-child { border-top: 1px solid var(--kxp-grey-100); }
.kxp-post-row a {
    display: grid;
    gap: 0.4rem 2rem;
    grid-template-columns: 1fr;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    transition: padding-left 0.4s var(--kxp-ease);
}
@media (min-width: 760px) {
    .kxp-post-row a { grid-template-columns: 160px 1fr auto; align-items: baseline; }
}
.kxp-post-row a:hover { padding-left: 1rem; }
.kxp-post-row__date {
    font-size: var(--kxp-step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kxp-grey-500);
}
.kxp-post-row__title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    transition: color 0.3s var(--kxp-ease);
}
.kxp-post-row a:hover .kxp-post-row__title { color: var(--kxp-accent); }
.kxp-post-row__cue {
    font-size: var(--kxp-step--1);
    color: var(--kxp-accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.4s var(--kxp-ease), transform 0.4s var(--kxp-ease);
}
.kxp-post-row a:hover .kxp-post-row__cue { opacity: 1; transform: none; }

.kxp-empty {
    padding-block: clamp(3rem, 8vw, 6rem);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    color: var(--kxp-grey-500);
}

/* ── Enixytil page ──────────────────────────────────────────────────────── */
.kxp-enx__lead { margin-top: 1.4rem; }
/* Two columns on desktop: "Why we developed it" left, "Designed around
   performance" right — the page read as too narrow/left-aligned in one column. */
.kxp-enx__cols {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: 1fr;
}
@media (min-width: 860px) {
    .kxp-enx__cols { grid-template-columns: 1fr 1fr; align-items: start; }
}
.kxp-enx__cols .kxp-enx__block { margin-top: 0; }
.kxp-enx__block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.kxp-enx__block .kxp-h3 { margin-bottom: 1.2rem; }
.kxp-enx__block .kxp-prose { margin-top: 0; }
.kxp-enx__list {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--kxp-grey-100);
    max-width: var(--kxp-max-text);
}
.kxp-enx__list li {
    display: flex; align-items: baseline; gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--kxp-grey-100);
    font-size: var(--kxp-step-0);
}
.kxp-enx__num {
    font-family: var(--kxp-font-display);
    font-weight: 700;
    font-size: var(--kxp-step--1);
    color: var(--kxp-accent);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.kxp-enx__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ── Single post ────────────────────────────────────────────────────────── */
.kxp-post__hero {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--kxp-grey-50);
    clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.kxp-post__hero img { width: 100%; height: 100%; object-fit: cover; }
.kxp-post__nav {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 2rem;
    border-top: 1px solid var(--kxp-grey-100);
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: var(--kxp-step--1);
}
.kxp-post__nav a { transition: color 0.3s var(--kxp-ease); }
.kxp-post__nav a:hover { color: var(--kxp-accent); }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.kxp-pagination {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.kxp-pagination .page-numbers {
    display: grid; place-items: center;
    min-width: 40px; height: 40px;
    padding-inline: 0.5rem;
    border: 1px solid var(--kxp-grey-300);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 600;
    transition: border-color 0.3s var(--kxp-ease), background 0.3s var(--kxp-ease), color 0.3s var(--kxp-ease);
}
.kxp-pagination .page-numbers:hover { border-color: var(--kxp-black); }
.kxp-pagination .page-numbers.current {
    background: var(--kxp-black); border-color: var(--kxp-black); color: var(--kxp-white);
}

/* Enixytil points carry a heading and a qualifier, not a bare phrase. */
.kxp-enx__pt strong {
    display: block;
    font-family: var(--kxp-font-display);
    font-weight: 700;
    color: var(--kxp-black);
}
.kxp-enx__pt em {
    display: block;
    font-style: normal;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-700);
    margin-top: .15rem;
}
.kxp-enx__list li { align-items: flex-start; }

/* The two formulas, stated side by side. */
.kxp-enx__split {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) { .kxp-enx__split { grid-template-columns: 1fr 1fr; } }
.kxp-enx__split p {
    margin: 0;
    padding: 1.1rem 1.3rem;
    background: var(--kxp-grey-50);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0);
    color: var(--kxp-grey-700);
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
}
.kxp-enx__split strong { color: var(--kxp-black); font-weight: 800; }
.kxp-enx__split span { color: var(--kxp-accent); margin-inline: .35rem; }

/* ── Enixytil closing band (client artwork, #121) ───────────────────────────
   Black, because the emblems are drawn with their own red glow and on white
   they read as three logos on an empty page. Each emblem trims to its own
   proportions, so they are sized by height and centred, not stretched. */
/* The band is the last thing on the page, so the document's own bottom padding
   would leave a white strip between it and the footer. */
.kxp-doc:has(> .kxp-enx__band) { padding-bottom: 0; }

.kxp-enx__band {
    position: relative;
    overflow: hidden;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding-block: clamp(3.5rem, 8vw, 6rem);
    background: var(--kxp-black);
    color: var(--kxp-white);
    text-align: center;
}
/* A faint glow behind the row, so the band has depth instead of flat black. */
.kxp-enx__band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 70% at 50% 45%, rgba(225, 6, 0, 0.20), transparent 70%);
    pointer-events: none;
}
.kxp-enx__band > .kxp-shell { position: relative; }
/* Brand red is only 4.2:1 on black; this is the lifted red used on the other
   dark sections. */
.kxp-enx__band-label { color: #ff3b30; }

.kxp-enx__emblems {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    padding: 0;
    list-style: none;
}
.kxp-enx__emblems li { display: flex; justify-content: center; }
@media (min-width: 760px) {
    .kxp-enx__emblems li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); }
}
.kxp-enx__emblems img {
    width: auto;
    height: clamp(8rem, 16vw, 11rem);
    object-fit: contain;
}
/* Centred under the emblems — it used to sit alone on the left. */
.kxp-enx__cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }