/* ==========================================================================
   Kodbel DMOZ — design system
   --------------------------------------------------------------------------
   One ink. #0642F0 is lifted straight from the logo and the whole site commits
   to it rather than introducing accent hues. Loaded after the Bootstrap theme
   in base.html, and everything is namespaced .kd* so the two never fight.

   Contents
     1. Tokens
     2. Page shell + section chrome
     3. Breadcrumb
     4. Two-column layout
     5. Link rows (the core listing component)
     6. Chips, tags, sub-category buttons
     7. Sidebar panels
     8. Pagination
     9. Detail panels + prose
    10. Forms
    11. Empty states + errors
    12. Site chrome (navbar, footer)
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
    --kd-electric: #0642F0;
    --kd-electric-deep: #0526A0;
    /* --kd-sky is decorative only. Text on the blue field uses --kd-sky-text,
       the lightest tint that still clears 4.5:1 on #0642F0 — measured. */
    --kd-sky: #A8C0FF;
    --kd-sky-text: #CBD9FF;
    --kd-ink: #08122E;
    --kd-ink-soft: #4A5878;
    --kd-ink-faint: #7A8BB2;
    --kd-paper: #F5F7FC;
    --kd-surface: #FFFFFF;
    --kd-rule: #DBE2F4;
    --kd-track: #E6EBF9;
    --kd-tint: #EAEFFD;

    --kd-display: "Bricolage Grotesque", "Kanit", system-ui, sans-serif;
    --kd-body: "Mulish", system-ui, -apple-system, sans-serif;
    --kd-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    --kd-nav-h: 4.5rem;
}

/* ── 2. Page shell ───────────────────────────────────────────────────────── */
.kd {
    background: var(--kd-paper);
    color: var(--kd-ink);
    font-family: var(--kd-body);
    display: block;
    min-height: 60vh;
    /* clears the fixed-top navbar */
    padding-top: var(--kd-nav-h);
}
.kd *, .kd *::before, .kd *::after { box-sizing: border-box; }

.kd-wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.kd-eyebrow {
    font-family: var(--kd-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kd-ink-soft);
    margin: 0 0 .75rem;
}

/* Section heading with a rule under it — used on every page. */
.kd-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 2px solid var(--kd-ink);
    padding-bottom: .85rem;
    margin-bottom: .5rem;
}
.kd-head h2 {
    font-family: var(--kd-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    letter-spacing: -.02em;
    margin: 0;
}
.kd-head p {
    font-family: var(--kd-mono);
    font-size: .78rem;
    color: var(--kd-ink-soft);
    margin: 0;
    letter-spacing: .04em;
}

/* Page title block, sits under the breadcrumb. */
.kd-title {
    padding: 1.5rem 0 2rem;
}
.kd-title h1 {
    font-family: var(--kd-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 5vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    margin: 0;
    text-wrap: balance;
}
.kd-title .kd-sub {
    font-size: 1.02rem;
    color: var(--kd-ink-soft);
    margin: .85rem 0 0;
    max-width: 60ch;
    line-height: 1.55;
}
.kd-title .kd-sub b { color: var(--kd-ink); font-variant-numeric: tabular-nums; }

/* ── 3. Breadcrumb ───────────────────────────────────────────────────────── */
.kd-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    font-family: var(--kd-mono);
    font-size: .76rem;
    letter-spacing: .03em;
}
.kd-crumb li { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.kd-crumb li::after { content: "/"; color: var(--kd-ink-faint); }
.kd-crumb li:last-child::after { content: none; }
.kd-crumb a { color: var(--kd-ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.kd-crumb a:hover { color: var(--kd-electric); border-bottom-color: currentColor; }
.kd-crumb .kd-crumb-now {
    color: var(--kd-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(46ch, 60vw);
}

/* ── 4. Two-column layout ────────────────────────────────────────────────── */
.kd-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.kd-cols-wide { grid-template-columns: minmax(0, 1fr) 21rem; }
/* Narrow column first. The panel is also the first child in the DOM, so on a
   phone the logo and "Visit website" land above the description without any
   source-order trickery. */
.kd-cols-lead { grid-template-columns: 21rem minmax(0, 1fr); }
@media (max-width: 900px) {
    .kd-cols, .kd-cols-wide, .kd-cols-lead { grid-template-columns: minmax(0, 1fr); }
}

/* ── 5. Link rows ────────────────────────────────────────────────────────── */
.kd-list { margin: 0; padding: 0; list-style: none; }

.kd-item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem .8rem;
    margin-inline: -.8rem;
    border-bottom: 1px solid var(--kd-rule);
    border-radius: 5px;
    color: var(--kd-ink);
    text-decoration: none;
    transition: background .16s ease;
}
.kd-item:hover, .kd-item:focus-visible { background: var(--kd-tint); color: var(--kd-ink); }
.kd-item:focus-visible { outline: 2px solid var(--kd-electric); outline-offset: -2px; }

/* Same normalising frame as the homepage index: source logos vary wildly, the
   frame is what makes them read as a set. */
.kd-item-logo {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    background: var(--kd-surface);
    border: 1px solid var(--kd-rule);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .16s ease;
}
.kd-item-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.kd-item:hover .kd-item-logo { border-color: var(--kd-electric); }

/* These are <span>s so the whole row can stay a single <a>. Without an explicit
   display they inherit inline and the title runs straight into the description. */
.kd-item-title {
    display: block;
    font-family: var(--kd-display);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: -.012em;
    line-height: 1.3;
    margin: 0 0 .3rem;
    overflow-wrap: anywhere;
}
.kd-item-desc {
    display: block;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--kd-ink-soft);
    margin: 0;
    overflow-wrap: anywhere;
}
.kd-item-host {
    display: block;
    font-family: var(--kd-mono);
    font-size: .74rem;
    /* --kd-ink-faint only clears 3.18:1 on paper, which is fine for the
       breadcrumb separator but not for a URL people actually read. */
    color: var(--kd-ink-soft);
    margin: .4rem 0 0;
    overflow-wrap: anywhere;
}

/* ── 6. Chips ────────────────────────────────────────────────────────────── */
.kd-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.kd-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--kd-surface);
    border: 1px solid var(--kd-rule);
    border-radius: 999px;
    padding: .5rem .9rem;
    font-size: .92rem;
    color: var(--kd-ink);
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}
.kd-chip:hover, .kd-chip:focus-visible { border-color: var(--kd-electric); background: var(--kd-tint); color: var(--kd-ink); }
.kd-chip:focus-visible { outline: 2px solid var(--kd-electric); outline-offset: 2px; }
.kd-chip b {
    font-family: var(--kd-mono);
    font-size: .74rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--kd-ink-soft);
}
.kd-chip-tag { border-radius: 4px; padding: .35rem .7rem; font-size: .85rem; }

/* ── 7. Sidebar ──────────────────────────────────────────────────────────── */
.kd-panel {
    background: var(--kd-surface);
    border: 1px solid var(--kd-rule);
    border-radius: 8px;
    padding: 1.35rem;
}
.kd-panel + .kd-panel { margin-top: 1.25rem; }
.kd-panel h3 {
    font-family: var(--kd-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kd-ink-soft);
    margin: 0 0 1rem;
}
.kd-panel ul { list-style: none; margin: 0; padding: 0; }
.kd-panel li + li { margin-top: .2rem; padding-top: .2rem; }
.kd-panel li a {
    display: block;
    color: var(--kd-ink);
    text-decoration: none;
    font-size: .94rem;
    line-height: 1.4;
    padding: .45rem .5rem;
    margin-inline: -.5rem;
    border-radius: 4px;
    overflow-wrap: anywhere;
}
.kd-panel li a:hover, .kd-panel li a:focus-visible { background: var(--kd-tint); color: var(--kd-electric); }

/* ── 8. Pagination ───────────────────────────────────────────────────────── */
.kd-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kd-rule);
}
.kd-pager a, .kd-pager span {
    font-family: var(--kd-mono);
    font-size: .78rem;
    letter-spacing: .04em;
    padding: .6rem .9rem;
    border-radius: 4px;
    text-decoration: none;
}
.kd-pager a { color: var(--kd-ink); border: 1px solid var(--kd-rule); background: var(--kd-surface); }
.kd-pager a:hover, .kd-pager a:focus-visible { border-color: var(--kd-electric); color: var(--kd-electric); }
.kd-pager .kd-pager-now { color: var(--kd-ink-soft); margin-inline: auto 0; }

/* ── 9. Detail panels + prose ────────────────────────────────────────────── */
.kd-profile { text-align: center; }
.kd-profile-logo {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.1rem;
    display: grid;
    place-items: center;
    background: var(--kd-surface);
    border: 1px solid var(--kd-rule);
    border-radius: 10px;
    overflow: hidden;
}
.kd-profile-logo img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }

.kd-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

.kd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--kd-electric);
    color: #fff;
    font-family: var(--kd-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .8rem 1.25rem;
    border: 1px solid var(--kd-electric);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.kd-btn:hover, .kd-btn:focus-visible { background: var(--kd-electric-deep); border-color: var(--kd-electric-deep); color: #fff; }
.kd-btn:focus-visible { outline: 2px solid var(--kd-ink); outline-offset: 2px; }
.kd-btn-ghost { background: var(--kd-surface); color: var(--kd-ink); border-color: var(--kd-rule); }
.kd-btn-ghost:hover, .kd-btn-ghost:focus-visible { background: var(--kd-tint); color: var(--kd-electric); border-color: var(--kd-electric); }
.kd-btn-block { width: 100%; }

/* Definition-style list for a site's outbound links. */
.kd-links { list-style: none; margin: 0; padding: 0; }
.kd-links li + li { border-top: 1px solid var(--kd-rule); }
.kd-links a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .5rem;
    margin-inline: -.5rem;
    color: var(--kd-ink);
    text-decoration: none;
    font-size: .94rem;
    border-radius: 4px;
    overflow-wrap: anywhere;
}
.kd-links a:hover, .kd-links a:focus-visible { background: var(--kd-tint); color: var(--kd-electric); }
.kd-links svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--kd-ink-faint); }
.kd-links a:hover svg { color: var(--kd-electric); }

/* Long-form body copy: descriptions, blog posts, static pages. */
.kd-prose { font-size: 1.02rem; line-height: 1.68; color: var(--kd-ink); overflow-wrap: anywhere; }
.kd-prose > * + * { margin-top: 1.1rem; }
.kd-prose h2, .kd-prose h3, .kd-prose h4 {
    font-family: var(--kd-display);
    font-weight: 700;
    letter-spacing: -.015em;
    margin-top: 2rem;
}
.kd-prose h2 { font-size: 1.6rem; }
.kd-prose h3 { font-size: 1.3rem; }
.kd-prose h4 { font-size: 1.1rem; }
.kd-prose a { color: var(--kd-electric); text-decoration: underline; text-underline-offset: 2px; }
.kd-prose img { max-width: 100%; height: auto; border-radius: 6px; }
.kd-prose ul, .kd-prose ol { padding-left: 1.35rem; }
.kd-prose li + li { margin-top: .4rem; }
.kd-prose blockquote {
    border-left: 3px solid var(--kd-electric);
    padding-left: 1.1rem;
    color: var(--kd-ink-soft);
    font-style: italic;
}
.kd-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.kd-prose td, .kd-prose th { border: 1px solid var(--kd-rule); padding: .5rem .7rem; }
.kd-prose pre { overflow-x: auto; background: var(--kd-tint); padding: 1rem; border-radius: 6px; }

/* ── 10. Forms ───────────────────────────────────────────────────────────── */
.kd-form { max-width: 42rem; }
.kd-form label {
    display: block;
    font-family: var(--kd-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kd-ink-soft);
    margin-bottom: .4rem;
}
.kd-form input[type="text"], .kd-form input[type="email"], .kd-form input[type="url"],
.kd-form input[type="tel"], .kd-form input[type="number"], .kd-form input[type="password"],
.kd-form textarea, .kd-form select {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--kd-ink);
    background: var(--kd-surface);
    border: 1px solid var(--kd-rule);
    border-radius: 5px;
    padding: .75rem .9rem;
}
.kd-form textarea { min-height: 8rem; resize: vertical; }
.kd-form input:focus, .kd-form textarea:focus, .kd-form select:focus {
    outline: 2px solid var(--kd-electric);
    outline-offset: 1px;
    border-color: var(--kd-electric);
}
.kd-form .form-group, .kd-form .mb-3 { margin-bottom: 1.15rem; }
.kd-form .asteriskField { color: var(--kd-electric); margin-left: .2rem; }
.kd-form .helptext, .kd-form .form-text {
    display: block;
    font-size: .82rem;
    color: var(--kd-ink-soft);
    margin-top: .35rem;
}
.kd-form .invalid-feedback, .kd-form .errorlist {
    color: #B3261E;
    font-size: .85rem;
    list-style: none;
    padding: 0;
    margin: .35rem 0 0;
}
.kd-form img { border-radius: 5px; }

/* ── 11. Empty states + errors ───────────────────────────────────────────── */
.kd-empty {
    border: 1px dashed var(--kd-rule);
    border-radius: 8px;
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    color: var(--kd-ink-soft);
}
.kd-empty h2 {
    font-family: var(--kd-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--kd-ink);
    margin: 0 0 .6rem;
    letter-spacing: -.015em;
}
.kd-empty p { margin: 0 0 1.5rem; }

.kd-status { padding: clamp(3rem, 9vw, 7rem) 0 clamp(4rem, 10vw, 8rem); text-align: center; }
.kd-status .kd-code {
    font-family: var(--kd-mono);
    font-size: .8rem;
    letter-spacing: .2em;
    color: var(--kd-electric);
    margin: 0 0 1rem;
}
.kd-status h1 {
    font-family: var(--kd-display);
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 3.5rem);
    letter-spacing: -.03em;
    line-height: 1.05;
    margin: 0 0 1rem;
}
.kd-status p { color: var(--kd-ink-soft); max-width: 46ch; margin: 0 auto 2rem; line-height: 1.6; }

/* ── 12. Site chrome ─────────────────────────────────────────────────────── */
#mainNav.kd-nav {
    background: var(--kd-surface);
    border-bottom: 1px solid var(--kd-rule);
    padding-block: .8rem;
    box-shadow: none !important;
}
#mainNav.kd-nav .navbar-brand img { height: 26px; width: auto; }
.kd-nav-search { display: flex; background: var(--kd-paper); border: 1px solid var(--kd-rule); border-radius: 5px; padding: 3px; }
.kd-nav-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .94rem;
    color: var(--kd-ink);
    padding: .45rem .7rem;
}
.kd-nav-search input::placeholder { color: #65718F; }
.kd-nav-search input:focus { outline: 2px solid var(--kd-electric); outline-offset: 0; border-radius: 3px; }
.kd-nav-search button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--kd-ink);
    color: #fff;
    border-radius: 3px;
    padding: 0 .8rem;
    cursor: pointer;
    transition: background .16s ease;
}
.kd-nav-search button:hover { background: var(--kd-electric); }
.kd-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--kd-electric);
    color: #fff;
    font-family: var(--kd-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .7rem 1.1rem;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease;
}
.kd-nav-cta:hover, .kd-nav-cta:focus-visible { background: var(--kd-electric-deep); color: #fff; }

.kd-foot { background: var(--kd-ink); color: #fff; padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; }
.kd-foot-top {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
/* The brand mark is a single blue; knocking it out to white keeps one asset
   working on the dark footer instead of shipping a second file. */
.kd-foot-top img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.kd-foot nav { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.kd-foot nav a {
    color: var(--kd-sky-text);
    text-decoration: none;
    font-size: .92rem;
    border-bottom: 1px solid transparent;
}
.kd-foot nav a:hover, .kd-foot nav a:focus-visible { color: #fff; border-bottom-color: #fff; }
.kd-foot-note {
    font-family: var(--kd-mono);
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--kd-sky-text);
    margin: 1.5rem 0 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .kd-item { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .8rem; padding: 1rem .7rem; }
    .kd-item-logo { width: 2.5rem; height: 2.5rem; }
    .kd-item-title { font-size: 1rem; }
    .kd-profile-logo { width: 6.5rem; height: 6.5rem; }
    .kd-pager { gap: .4rem; }
    .kd-pager a, .kd-pager span { padding: .55rem .7rem; font-size: .74rem; }
    .kd-pager .kd-pager-now { width: 100%; margin: .25rem 0 0; text-align: center; }
}

/* ==========================================================================
   13. Homepage
   Moved out of an inline <style> in index.html so the whole site draws from
   one stylesheet. Everything below is specific to the homepage; the shared
   pieces above (.kd-wrap, .kd-head, .kd-btn) are reused as-is.
   ========================================================================== */
/* The hero supplies its own navbar clearance, so the shell's does not apply. */
.kd-home { padding-top: 0; }

.kd-hero {
    position: relative;
    overflow: hidden;
    background: var(--kd-electric);
    color: #fff;
    padding: clamp(7.5rem, 14vw, 10.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.kd-hero .kd-wrap { position: relative; z-index: 1; }
.kd-hero-inner { max-width: 40rem; }
.kd-hero .kd-eyebrow { color: var(--kd-sky-text); margin-bottom: 1.5rem; }
.kd-hero h1 {
    font-family: var(--kd-display);
    font-weight: 800;
    font-size: clamp(2.75rem, 7.5vw, 5.25rem);
    line-height: .94;
    letter-spacing: -.035em;
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.kd-lede {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 34rem;
    margin: 0 0 2.25rem;
}
.kd-lede b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* The globe from the logo, redrawn as a graticule and cropped off the edge. */
.kd-globe {
    position: absolute;
    top: 50%;
    right: -6rem;
    translate: 0 -50%;
    width: min(46vw, 34rem);
    color: var(--kd-sky);
    opacity: .38;
    pointer-events: none;
}

.kd-search { display: flex; max-width: 34rem; background: #fff; border-radius: 6px; padding: 5px; gap: 5px; }
.kd-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--kd-ink);
    padding: .85rem 1rem;
    border-radius: 3px;
}
.kd-search input::placeholder { color: #65718F; }
.kd-search input:focus { outline: 2px solid var(--kd-electric); outline-offset: 0; }
.kd-search button {
    flex: 0 0 auto;
    border: 0;
    background: var(--kd-ink);
    color: #fff;
    font-family: var(--kd-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0 1.4rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background .18s ease;
}
.kd-search button:hover { background: var(--kd-electric-deep); }

/* The same field on a paper ground rather than the blue hero — it needs a
   border to hold its shape. */
.kd-search-inline { border: 1px solid var(--kd-rule); margin-bottom: 2.5rem; }

.kd-hero-jump {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
    font-family: var(--kd-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--kd-sky-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(203, 217, 255, .5);
    padding-bottom: 2px;
}
.kd-hero-jump:hover { color: #fff; border-bottom-color: #fff; }

/* scroll-margin keeps the "browse the index" jump clear of the fixed navbar. */
.kd-index { padding: clamp(3.5rem, 7vw, 5.5rem) 0; scroll-margin-top: 5.5rem; }

.kd-row {
    display: grid;
    /* icon · name · measure · count · arrow. The name column is fixed rather
       than fluid so every bar starts at the same x — a shared baseline is what
       makes the lengths comparable — and the measure takes the room left over. */
    grid-template-columns: 2rem clamp(8rem, 20vw, 15rem) minmax(0, 1fr) 6rem 1rem;
    align-items: center;
    gap: clamp(.9rem, 2.5vw, 2rem);
    padding: .78rem .8rem;
    margin-inline: -.8rem;
    border-bottom: 1px solid var(--kd-rule);
    border-radius: 4px;
    color: var(--kd-ink);
    text-decoration: none;
    transition: background .16s ease;
}
.kd-row:hover, .kd-row:focus-visible { background: var(--kd-tint); color: var(--kd-ink); }
.kd-row:focus-visible { outline: 2px solid var(--kd-electric); outline-offset: -2px; }

/* The category icons vary a lot in weight, colour and padding. The frame is
   what makes them sit as a set. It renders even when an icon is missing, so
   the grid never shifts. */
.kd-row-icon {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--kd-rule);
    border-radius: 5px;
    overflow: hidden;
    transition: border-color .16s ease;
}
.kd-row-icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.kd-row:hover .kd-row-icon { border-color: var(--kd-electric); }

.kd-row-name {
    font-family: var(--kd-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    letter-spacing: -.015em;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* One hue for every row: these categories have no natural order, so bar length
   is the only thing encoding magnitude. Square at the baseline, 4px rounded at
   the data end. */
.kd-measure { height: 8px; background: var(--kd-track); border-radius: 2px; overflow: hidden; }
.kd-measure i {
    display: block;
    height: 100%;
    min-width: 3px;
    background: var(--kd-electric);
    border-radius: 0 4px 4px 0;
    transform-origin: left center;
}
.kd-count {
    font-family: var(--kd-mono);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--kd-ink-soft);
}
.kd-row:hover .kd-count { color: var(--kd-ink); }
.kd-arrow { font-family: var(--kd-mono); color: #7A8BB2; transition: translate .16s ease; }
.kd-row:hover .kd-arrow { translate: 3px 0; color: var(--kd-electric); }

.kd-fresh { padding: 0 0 clamp(3.5rem, 7vw, 5.5rem); }
.kd-fresh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--kd-rule);
    border: 1px solid var(--kd-rule);
    margin-top: 1.75rem;
}
.kd-fresh-item {
    display: block;
    background: var(--kd-paper);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--kd-ink);
    transition: background .16s ease;
}
.kd-fresh-item:hover { background: var(--kd-tint); color: var(--kd-ink); }
.kd-fresh-item span {
    display: block;
    font-family: var(--kd-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kd-electric);
    margin-bottom: .5rem;
}
.kd-fresh-item strong {
    font-family: var(--kd-display);
    font-weight: 500;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    line-height: 1.3;
    display: block;
}

.kd-submit { background: var(--kd-electric); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.kd-submit-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; }
.kd-submit h2 {
    font-family: var(--kd-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    letter-spacing: -.025em;
    line-height: 1.05;
    margin: 0;
    max-width: 22ch;
}
.kd-submit p { color: rgba(255, 255, 255, .8); margin: .75rem 0 0; max-width: 40ch; }

/* White button, for use on the blue field. */
.kd-btn-invert { background: #fff; color: var(--kd-electric-deep); border-color: #fff; }
.kd-btn-invert:hover, .kd-btn-invert:focus-visible { background: var(--kd-sky-text); color: var(--kd-electric-deep); border-color: var(--kd-sky-text); }
.kd-btn-invert:focus-visible { outline: 3px solid var(--kd-sky-text); outline-offset: 3px; }

/* One orchestrated moment, on load, in CSS only. There is deliberately no
   scroll-triggered animation: a reveal-on-scroll left some measures empty
   whenever the observer missed a row, and an unreliably-drawn chart is a worse
   trade than a static one. The homepage needs no JavaScript at all. */
@media (prefers-reduced-motion: no-preference) {
    .kd-hero .kd-rise { animation: kd-rise .62s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes kd-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 640px) {
    .kd-globe { opacity: .18; right: -30%; }
    /* Icon, name and count share the first line; the measure spans the full
       width beneath them, so the bars still line up down the page. */
    .kd-row {
        grid-template-columns: 1.75rem minmax(0, 1fr) 5rem;
        column-gap: .75rem;
        row-gap: .55rem;
        padding-block: .95rem;
    }
    .kd-row-icon { grid-area: 1 / 1; width: 1.75rem; height: 1.75rem; }
    .kd-row-name { grid-area: 1 / 2; }
    .kd-count { grid-area: 1 / 3; }
    .kd-measure { grid-area: 2 / 1 / 3 / 4; height: 6px; }
    .kd-arrow { display: none; }
    .kd-search { flex-wrap: wrap; }
    .kd-search button { width: 100%; padding: .9rem; }
}

/* ==========================================================================
   14. Cards + articles (blog, static pages)
   ========================================================================== */
.kd-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.5rem;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.kd-card {
    display: flex;
    flex-direction: column;
    background: var(--kd-surface);
    border: 1px solid var(--kd-rule);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--kd-ink);
    transition: border-color .16s ease, transform .16s ease;
}
.kd-card:hover, .kd-card:focus-visible { border-color: var(--kd-electric); color: var(--kd-ink); transform: translateY(-2px); }
.kd-card:focus-visible { outline: 2px solid var(--kd-electric); outline-offset: 2px; }
.kd-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--kd-track);
    overflow: hidden;
}
.kd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-card-body { display: block; padding: 1.25rem; }
.kd-card-date {
    display: block;
    font-family: var(--kd-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kd-electric);
    margin-bottom: .55rem;
}
.kd-card-title {
    display: block;
    font-family: var(--kd-display);
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin-bottom: .5rem;
}
.kd-card-excerpt { display: block; font-size: .92rem; line-height: 1.55; color: var(--kd-ink-soft); }

/* Long-form pages get a measured column — prose past ~70 characters a line is
   hard to track back from. */
.kd-article { max-width: 44rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.kd-figure { margin: 0 0 2rem; }
.kd-figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
.kd-figure figcaption {
    font-family: var(--kd-mono);
    font-size: .75rem;
    color: var(--kd-ink-soft);
    margin-top: .6rem;
}

/* Sibling listings on a link detail page. Two columns of plain links: the job
   is internal linking and a bit of unique content, not decoration. */
.kd-related {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    columns: 2;
    column-gap: 2rem;
}
.kd-related li { break-inside: avoid; margin-bottom: .1rem; }
.kd-related a {
    display: block;
    color: var(--kd-ink);
    text-decoration: none;
    font-size: .94rem;
    line-height: 1.4;
    padding: .45rem .5rem;
    margin-inline: -.5rem;
    border-radius: 4px;
    overflow-wrap: anywhere;
}
.kd-related a:hover, .kd-related a:focus-visible { background: var(--kd-tint); color: var(--kd-electric); }
@media (max-width: 640px) { .kd-related { columns: 1; } }