/* Blog archive.
 *
 * Built from the Figma frame "Kino Flo — Blog Archive" (342:120), which was designed after two
 * build-first attempts were rejected. Every value below is measured from that frame rather than
 * chosen here: 1200 container, 880 main column, 280 rail, 40 gutter, cards 272 wide.
 *
 * Tokens come from the .kf-sec block in kf-about.css, which ajax-blog-filters.php enqueues as a
 * dependency. Nothing here redeclares them.
 */

/* --- hero ------------------------------------------------------------------
 * kf_blog_hero renders its own background, scrim and two-column inner, so this file no longer has
 * to fight YOOtheme's wrappers for the stacking. The earlier version positioned .uk-container to
 * lift the copy, which quietly made the container the video's containing block and cropped the
 * background to a band; then the sign-up card, in the other column, painted underneath it. Owning
 * the markup in one element removes both problems rather than patching around them. */

/* The section is the background's containing block. Without this the absolutely positioned
   background finds the page instead and covers the whole document. */
.kf-sec.kf-blog-hero { position: relative; padding: 0; overflow: hidden; }

.kf-blog-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 48px;
    align-items: center;
    min-height: 420px;
    padding-block: 76px 92px;
}

@media (max-width: 959px) {
    .kf-blog-hero__inner { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding-block: 56px 64px; }
}

.kf-blog-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--kf-ink); }
.kf-blog-hero__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.kf-blog-hero__scrim { position: absolute; inset: 0; background: #000; }

/* A background video is decoration; a reader who has asked for less motion should get the poster. */
@media (prefers-reduced-motion: reduce) {
    .kf-blog-hero__media { display: none; }
}

.kf-blog-hero__rule { display: block; width: 64px; height: 3px; background: var(--kf-yellow); margin-bottom: 29px; }

.kf-blog-hero__eyebrow {
    display: block;
    margin-bottom: 13px;
    font-family: var(--kf-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kf-yellow);
}

.kf-blog-hero__title {
    margin: 0;
    font-family: var(--kf-display);
    font-size: clamp(32px, 4.6vw, 46px);
    line-height: 1.17;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.kf-blog-hero__sub {
    margin: 20px 0 0;
    max-width: 42ch;
    font-family: var(--kf-body);
    font-size: 17px;
    line-height: 27px;
    color: var(--kf-on-dark);
}

.kf-blog-hero__optin {
    background: rgba(42, 43, 44, .28);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 2px;
    padding: 26px 28px;
    backdrop-filter: blur(2px);
}

.kf-blog-hero__optin-head {
    margin: 0 0 18px;
    font-family: var(--kf-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.kf-blog-hero__optin .gform_wrapper label,
.kf-blog-hero__optin .gform_wrapper legend { color: var(--kf-on-dark); }
.kf-blog-hero__optin-note { margin: 12px 0 0; font-size: 11px; color: var(--kf-on-dark-mute); }

/* --- the opt-in field, as one pill ----------------------------------------- */

/*
 * Gravity Forms' orbital theme stacks label, input and button down the page. The
 * home page's signup is a single pill, and this is the same act on the same site,
 * so it gets the same shape rather than a second treatment.
 *
 * Geometry is copied from .kf-signup__row in kf-home.css deliberately: 524x56
 * outer, 6px padding, a 44px control inside, and a 100px radius so the outer
 * curve stays concentric with the button's pill at any height. Changing one of
 * these without the other is what makes the corners visibly disagree.
 *
 * The form element itself becomes the pill. GF wraps the input in .gform-body and
 * the button in .gform-footer, so those two are the flex children.
 */
.kf-blog-hero__optin .gform_wrapper form {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 524px;
    max-width: 100%;
    height: 56px;
    margin: 0;
    padding: 6px;
    background: #fff;
    border-radius: 100px;
}

.kf-blog-hero__optin .gform_wrapper .gform-body,
.kf-blog-hero__optin .gform_wrapper .gform_body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* .gform_fields is a CSS grid with row gaps; both have to go or the single field
   still sits in a grid track with space reserved beneath it. */
.kf-blog-hero__optin .gform_wrapper .gform_fields {
    display: block;
    grid-template-columns: none;
    grid-row-gap: 0;
    row-gap: 0;
}

.kf-blog-hero__optin .gform_wrapper .gfield {
    padding: 0;
    margin: 0;
}

/* The label is the visible "Email (Required)" line the design does not have.
   Hidden from sight, kept for screen readers - the input has no other name. */
.kf-blog-hero__optin .gform_wrapper .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kf-blog-hero__optin .gform_wrapper .ginput_container {
    margin: 0;
}

/* GF ships `.gform_wrapper form .gform_body input[...]` (0,3,2) inline and
   `#tm-main .gform_button` (1,1,0) from the theme. Both outrank a plain
   `.kf-blog-hero__optin .gform_wrapper …` chain, so the rules that have to win are
   anchored on #tm-main, the YOOtheme main wrapper this band always sits inside.
   Verified as an ancestor rather than assumed. */
#tm-main .kf-blog-hero__optin .gform_wrapper input[type="email"],
#tm-main .kf-blog-hero__optin .gform_wrapper input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 18px;   /* 6 row padding + 18 = the 24px text inset */
    /* Gravity Forms ships `border: 1px solid #ccc !important` and a box-shadow on
       these inputs from its inline stylesheet. !important cannot be outranked by
       specificity alone, so it is answered in kind - the ID above keeps this the
       more specific of the two important declarations. Both have to go: the input
       has no edge of its own inside the pill. */
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
    border-radius: 0;
    color: #212c34;
    font: 400 14px/18px "Roboto", sans-serif;
}

.kf-blog-hero__optin .gform_wrapper input::placeholder {
    color: #212c34;
    opacity: 1;               /* Firefox dims placeholders by default */
}

/* Focus belongs on the pill, not the input: the input has no edge of its own, so
   an outline there would draw a rectangle floating inside the white one. */
.kf-blog-hero__optin .gform_wrapper form:focus-within {
    outline: 2px solid var(--kf-yellow, #FED208);
    outline-offset: 2px;
}
.kf-blog-hero__optin .gform_wrapper input:focus,
.kf-blog-hero__optin .gform_wrapper input:focus-visible {
    outline: none;
}

#tm-main .kf-blog-hero__optin .gform_wrapper .gform-footer,
#tm-main .kf-blog-hero__optin .gform_wrapper .gform_footer {
    flex: 0 0 150px;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: 0;
}

#tm-main .kf-blog-hero__optin .gform_wrapper .gform_button {
    box-sizing: border-box;
    flex: 1 1 auto;
    align-self: center;
    width: 100%;
    height: 44px;
    /* GF's framework floors buttons at 38px and the theme adds 0 25px padding;
       both have to be answered or the pill grows past the 44px it is inset for. */
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: var(--kf-yellow, #FED208);
    color: var(--kf-ink, #161616);
    cursor: pointer;
    font: 700 15px/20px "Roboto Condensed", sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

/* Validation has to land somewhere that is not inside a 56px pill. Pull the
   messages out of the flex row and under it, still in the band. */
.kf-blog-hero__optin .gform_wrapper .gform_validation_errors,
.kf-blog-hero__optin .gform_wrapper .gfield_validation_message,
.kf-blog-hero__optin .gform_wrapper .validation_message {
    position: absolute;
    left: 0;
    margin: 6px 0 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 12px;
    color: #ffd7d7;
}
.kf-blog-hero__optin .gform_wrapper { position: relative; }

@media (max-width: 480px) {
    .kf-blog-hero__optin .gform_wrapper .gform-footer,
    .kf-blog-hero__optin .gform_wrapper .gform_footer { flex-basis: 112px; }
    .kf-blog-hero__optin .gform_wrapper input[type="email"] { padding-left: 14px; }
}

/* --- where to start strip -------------------------------------------------- */

.kf-sec.kf-blog-strip {
    background: #f9f9f9;
    padding-block: 44px 46px;
    border-bottom: 1px solid var(--kf-line);
}

.kf-blog-strip__eyebrow {
    display: block;
    margin-bottom: 16px;
    font-family: var(--kf-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kf-mute);
}

.kf-blog-strip__head {
    margin: 0 0 6px;
    font-family: var(--kf-display);
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kf-ink);
}

.kf-blog-strip__desc {
    margin: 0;
    font-family: var(--kf-body);
    font-size: 13px;
    line-height: 20px;
    color: var(--kf-ink-3);
}

.kf-blog-strip__grid {
    display: grid;
    grid-template-columns: repeat(var(--kf-strip-cols, 4), minmax(0, 1fr));
    gap: 32px;
    /* The card is taller than the three copy columns, so stretching left their text pinned to the
       top of a 186px row with a lot of air under it. Centring reads as one row. */
    align-items: center;
}
.kf-blog-strip__grid[data-cols="3"] { --kf-strip-cols: 3; }
.kf-blog-strip__grid[data-cols="2"] { --kf-strip-cols: 2; }

@media (max-width: 959px) { .kf-blog-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .kf-blog-strip__grid { grid-template-columns: 1fr; } }

a.kf-blog-strip__item { text-decoration: none; color: inherit; }
a.kf-blog-strip__item:hover .kf-blog-strip__head { text-decoration: underline; text-decoration-color: var(--kf-yellow); text-underline-offset: 3px; }

.kf-blog-strip__card {
    background: var(--kf-slate);
    border-radius: 6px;
    padding: 24px;
    /* This element inherits content-box from somewhere in the cascade, so a min-height here is
       height PLUS 48px of padding. It is sized by its own content instead: a fixed 138px made the
       row twice the height of the copy beside it, and once that copy was centred the dead space
       moved to the top and left the eyebrow floating well clear of everything. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kf-blog-strip__card-head {
    margin: 0 0 8px;
    font-family: var(--kf-display);
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.kf-blog-strip__card-link { font-size: 13px; color: var(--kf-yellow); text-decoration: none; }
.kf-blog-strip__card-link:hover { text-decoration: underline; }

/* --- controls: pill, count and sort share one baseline ---------------------
 * The filter button, the count/sort bar and the active-filter pills are three separate elements
 * stacked by the column. In the Figma they are one row with a rule under it, which is most of why
 * the built version read as unfinished: three controls at three different heights with dead space
 * between them.
 *
 * The column is made a two-column grid and the first two elements are placed on row one. The
 * others span, so nothing else in the column is disturbed. */

.kf-sec.kf-blog .kf-blog__results {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Stretch, not center: the two cells of the controls row each draw half of one continuous
       underline, and centering them leaves the two halves at different heights. */
    align-items: stretch;
    /* No column gap: the rule under this row is drawn by both cells, and a gap between them
       leaves a visible break in the middle of the line. The spacing is padding instead. */
    column-gap: 0;
}

.kf-sec.kf-blog .kf-blog__results > * { grid-column: 1 / -1; }

/* The lead spans the column above the controls. It reads as filterable if it sits below them,
   because filters and sort only ever act on the grid. */
.kf-sec.kf-blog .kf-blog__results > .kf-blog-featured { grid-column: 1 / -1; margin: 0 0 40px; }

.kf-sec.kf-blog .kf-blog__results > .kf-blog__filterbar {
    grid-column: 1;
    display: flex;
    align-items: center;
    margin: 0;
}

/* The count-and-sort bar is the element carrying .result-count; it has no class of its own. */
.kf-sec.kf-blog .kf-blog__results > .uk-flex.uk-flex-between { grid-column: 2; margin: 0; }

/* One rule under the whole row rather than one per element. */
.kf-sec.kf-blog .kf-blog__results > .kf-blog__filterbar,
.kf-sec.kf-blog .kf-blog__results > .uk-flex.uk-flex-between {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--kf-line);
}

/* The count is plain type; the sort is a control and should look like one.
 *
 * It stays a native <select>: it keeps keyboard behaviour, opens the system picker on a phone, and
 * the filter script already reads it. Only its chrome changes, to the same pill as the Filters
 * button so the two read as a pair rather than a button next to a bare caret. */
.kf-sec.kf-blog .kf-blog__results > .uk-flex.uk-flex-between > * {
    border: 0;
    background: transparent;
    padding: 0;
}

.kf-sec.kf-blog .result-count { font-size: 13px; color: var(--kf-mute); }

/* Active-filter pills sit under the row, tight to it, and take no space when there are none. */
.kf-sec.kf-blog .kf-blog__results > div:not([class]) { margin: 16px 0 0; }
.kf-sec.kf-blog .kf-blog__results > div:not([class]):empty { display: none; margin: 0; }

.kf-blog__filterbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 24px;
}

.kf-blog__filterbtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--kf-ink);
    border-radius: 22px;
    background: #fff;
    color: var(--kf-ink);
    font-family: var(--kf-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    flex: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.kf-blog__filterbtn:hover { background: var(--kf-ink); color: #fff; }
.kf-blog__filterbtn:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: 2px; }

.kf-blog__filterbtn-icon {
    width: 14px; height: 10px; flex: none;
    background:
        linear-gradient(currentColor, currentColor) 0 0   / 14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 4px / 10px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 8px / 6px  2px no-repeat;
}

.kf-blog__count { font-size: 13px; color: var(--kf-mute); }
.kf-blog__sort  { margin-left: auto; font-size: 13px; color: var(--kf-ink); }

/* --- featured lead --------------------------------------------------------
 * Measured from the Figma: media 424x238 at 6px, copy in a 424 column beside it, 32 gutter. */

.kf-blog-featured {
    padding-bottom: 40px;
    border-bottom: 1px solid var(--kf-line);
    margin-bottom: 44px;
}

.kf-blog-featured__eyebrow {
    display: block;
    margin-bottom: 18px;
    font-family: var(--kf-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kf-mute);
}

.kf-blog-featured__link {
    display: grid;
    grid-template-columns: minmax(0, 424fr) minmax(0, 424fr);
    gap: 32px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 767px) {
    .kf-blog-featured__link { grid-template-columns: 1fr; gap: 18px; }
}

.kf-blog-featured__media {
    display: block;
    aspect-ratio: 424 / 238;
    border-radius: 6px;
    overflow: hidden;
    background: var(--kf-paper);
}

.kf-blog-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease-out;
}

.kf-blog-featured__link:hover .kf-blog-featured__img { transform: scale(1.03); }

.kf-blog-featured__body { display: block; min-width: 0; }

.kf-blog-featured__cat {
    display: block;
    margin-bottom: 10px;
    font-family: var(--kf-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kf-slate);
}

/* Bigger than a card title and smaller than the hero: this is the one story being led with. */
.kf-blog-featured__title {
    display: block;
    margin-bottom: 16px;
    font-family: var(--kf-display);
    font-size: 28px;
    line-height: 32px;
    font-weight: 700;
    color: var(--kf-ink);
    text-wrap: balance;
}

.kf-blog-featured__link:hover .kf-blog-featured__title {
    text-decoration: underline;
    text-decoration-color: var(--kf-yellow);
    text-underline-offset: 4px;
}

.kf-blog-featured__excerpt {
    display: block;
    margin-bottom: 20px;
    font-family: var(--kf-body);
    font-size: 14px;
    line-height: 22px;
    color: var(--kf-ink-3);
}

.kf-blog-featured__meta { display: block; font-size: 12px; color: var(--kf-mute); }

.kf-blog-featured__link:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: 4px; }

/* --- the grid: every card the same shape ---------------------------------- */

.kf-blog-grid__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.kf-blog-grid__title {
    margin: 0;
    font-family: var(--kf-display);
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kf-ink);
}

.kf-blog-grid__all { font-size: 13px; color: var(--kf-ink); text-decoration: none; }
.kf-blog-grid__all:hover { text-decoration: underline; text-decoration-color: var(--kf-yellow); }

/* --- load more: full width of the column, ink with the yellow label -------- */

.kf-sec.kf-blog .load-more-container { width: 100%; max-width: none; margin-top: 44px; }

.kf-sec.kf-blog .load-more-button,
.kf-blog__loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    margin-top: 44px;
    border: 0;
    border-radius: 22px;
    background: var(--kf-ink);
    color: var(--kf-yellow);
    font-family: var(--kf-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.kf-blog__loadmore:hover { background: var(--kf-ink-2); }
.kf-blog__loadmore:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: 2px; }

/* --- sidebar --------------------------------------------------------------- */

.kf-blog__aside { display: flex; flex-direction: column; gap: 50px; min-width: 0; }

@media (min-width: 960px) {
    /* follows the reader down a long archive instead of scrolling away at post three */
    .kf-blog__aside { position: sticky; top: 24px; align-self: start; }
}

.kf-aside__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--kf-ink);
    margin-bottom: 16px;
}

.kf-aside__title,
.kf-band__title {
    margin: 0;
    font-family: var(--kf-display);
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kf-ink);
}

.kf-band__more { flex: none; font-size: 11px; color: var(--kf-mute); text-decoration: none; }
.kf-band__more:hover { color: var(--kf-ink); }

.kf-band__grid { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.kf-band__grid > li::before { content: none; }
.kf-band__item { margin: 0; }

.kf-band__link {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}

/* The card is a two-column grid, so the eyebrow and title must be ONE child. Left loose they
   become the second and third children and the title wraps back under the thumbnail. */
.kf-band__text { display: block; min-width: 0; }

.kf-band__media {
    display: block;
    width: 72px;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--kf-paper);
}

.kf-band__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease-out; }
.kf-band__media--product { background: #fff; }
.kf-band__img--contain { object-fit: contain; }
.kf-band__link:hover .kf-band__img { transform: scale(1.04); }

.kf-band__eyebrow {
    display: block;
    margin-bottom: 3px;
    font-family: var(--kf-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kf-mute);
}

.kf-band__name {
    display: block;
    font-family: var(--kf-display);
    font-size: 13px;
    line-height: 17px;
    font-weight: 700;
    color: var(--kf-ink);
}

.kf-band__link:hover .kf-band__name {
    text-decoration: underline;
    text-decoration-color: var(--kf-yellow);
    text-underline-offset: 3px;
}
.kf-band__link:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: 3px; }

/* browse chips: a pivot without opening the drawer */
.kf-aside__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kf-aside__chips > li::before { content: none; }

.kf-aside__chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--kf-line);
    border-radius: 15px;
    font-family: var(--kf-body);
    font-size: 12px;
    color: var(--kf-ink-3);
    text-decoration: none;
    transition: border-color .15s ease-out, color .15s ease-out;
}

.kf-aside__chip:hover { border-color: var(--kf-ink); color: var(--kf-ink); }
.kf-aside__chip[aria-current="true"] { background: var(--kf-yellow); border-color: var(--kf-yellow); color: var(--kf-ink); }

/* --- filter drawer --------------------------------------------------------- */
/* Matched to the product filter drawer: dark ground, 480 wide, in from the left, facet counts
 * right-aligned, and a reset / apply pair pinned at the bottom. The blog and the catalogue should
 * not teach two different filtering interfaces.
 *
 * The filter column keeps its place in the markup because kf-blog-filters.js addresses each facet
 * by id and replaces the results on change. Only its presentation becomes a drawer. */

.kf-sec.kf-blog .kf-blog__drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: min(480px, 92vw);
    height: 100dvh;
    padding: 0;
    background: var(--kf-ink);
    color: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, .4);
    transform: translateX(-100%);
    transition: transform .28s ease-out, visibility .28s;
    visibility: hidden;
}

.kf-sec.kf-blog .kf-blog__drawer.is-open { transform: translateX(0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
    .kf-sec.kf-blog .kf-blog__drawer { transition: none; }
}

/* the scrollable middle, so reset/apply stay reachable on a phone */
.kf-sec.kf-blog .kf-blog__drawer > * { padding-inline: 42px; }
.kf-sec.kf-blog .kf-blog__drawer .kf-blog__drawer-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 0 24px;
}

.kf-blog__drawer-title {
    margin: 0;
    padding-top: 44px;
    padding-bottom: 34px;
    font-family: var(--kf-display);
    font-size: 32px;
    line-height: 38px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.kf-blog__drawer-close {
    position: absolute;
    top: 44px;
    right: 42px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.kf-blog__drawer-close::before,
.kf-blog__drawer-close::after {
    content: "";
    position: absolute;
    left: 3px; top: 13px;
    width: 22px; height: 2px;
    background: #fff;
}
.kf-blog__drawer-close::before { transform: rotate(45deg); }
.kf-blog__drawer-close::after  { transform: rotate(-45deg); }
.kf-blog__drawer-close:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: 3px; }

/* Reserve the close button's corner so a long title cannot run under it.
   Needs the extra class: the `.kf-blog__drawer > *` padding-inline shorthand above ties on
   specificity and, coming later, was resetting the right padding back to 42px. */
.kf-blog__drawer .kf-blog__drawer-title {
    padding-right: 68px;
    font-size: clamp(24px, 6.4vw, 32px);
    line-height: 1.18;
}

/* facets, restyled onto the dark ground the catalogue drawer uses.
 *
 * .filter-name carries its own ink colour from kf-blog-filters.css, which is correct for the light
 * sidebar that file was written for and invisible here. It has to be named directly; colouring the
 * wrapper does nothing because the span overrides it. */
.kf-blog__drawer .filter-name {
    color: #fff;
    font-family: var(--kf-display);
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.kf-blog__drawer .filter-toggle { color: #fff; }
.kf-blog__drawer .filter-item-label { color: #fff; }
.kf-blog__drawer .uk-search-input { color: #fff; }
.kf-blog__drawer .uk-search-icon { color: var(--kf-on-dark-mute); }

.kf-blog__drawer .filter-group { border-bottom: 1px solid rgba(255,255,255,.14); padding-block: 22px; }
.kf-blog__drawer .filter-group:first-of-type { padding-top: 0; }

.kf-blog__drawer .filter-label,
.kf-blog__drawer .filter-group > label {
    font-family: var(--kf-display);
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
}

.kf-blog__drawer label,
.kf-blog__drawer .filter-option { color: #fff; font-size: 15px; }

.kf-blog__drawer .filter-input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 2px;
    background: transparent;
    accent-color: var(--kf-yellow);
}

/* the per-facet count sits hard right, as it does in the catalogue */
.kf-blog__drawer .filter-count,
.kf-blog__drawer .facet-count { margin-left: auto; color: var(--kf-on-dark-mute); font-size: 14px; }

.kf-blog__drawer input[type="search"],
.kf-blog__drawer .kf-blog-search__input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    color: #fff;
}

.kf-blog__drawer input[type="search"]::placeholder { color: var(--kf-on-dark-mute); }

/* reset / apply, pinned */
.kf-blog__drawer-actions {
    flex: none;
    display: flex;
    gap: 14px;
    padding-block: 22px 30px;
    border-top: 1px solid rgba(255,255,255,.14);
    background: var(--kf-ink);
}

.kf-blog__drawer-actions > * {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 26px;
    font-family: var(--kf-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

.kf-blog__drawer-reset { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; }
.kf-blog__drawer-reset:hover { background: #fff; color: var(--kf-ink); }
.kf-blog__drawer-apply { border: 0; background: var(--kf-yellow); color: var(--kf-ink); }
.kf-blog__drawer-apply:hover { background: #D9B201; }

.kf-blog-drawer-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .45);
}
.kf-blog-drawer-open { overflow: hidden; }

/* --- column widths --------------------------------------------------------- */

@media (min-width: 960px) {
    .kf-sec.kf-blog .uk-grid > .kf-blog__results { width: 73.3%; }   /* 880 of 1200 */
    .kf-sec.kf-blog .uk-grid > .kf-blog__aside   { width: 26.7%; }   /* 280 of 1200 */
    .kf-sec.kf-blog .uk-grid > .kf-blog__drawer  { width: auto; }
}

/* --- the post grid --------------------------------------------------------
 * kf_blog_catalogue renders the cards and is shared with other archives, so its own stylesheet is
 * left alone and the Figma treatment is applied here, scoped to the blog section. Values measured
 * from frame 342:120: 272 wide, 153 tall media at 6px radius, 10/16/13/11 type, 32 gutter.
 *
 * The excerpt is clamped to two lines. Unclamped excerpts were the single ugliest thing on the
 * previous build: three columns ending at three different depths. */

.kf-sec.kf-blog .content-grid,
.kf-sec.kf-blog .content-grid__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 32px;
}

@media (max-width: 1199px) { .kf-sec.kf-blog .content-grid,
                             .kf-sec.kf-blog .content-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .kf-sec.kf-blog .content-grid,
                             .kf-sec.kf-blog .content-grid__items { grid-template-columns: 1fr; } }

 /* The item carries its own width from the card stylesheet, which was sized for a different
    layout; inside this grid the column already decides the width, so the item has to fill it or
    the cards come out around 75px wide with one word per line. */
.kf-sec.kf-blog .content-grid__item {
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    flex: none;
}

/* No plate, no border: the card is the image and the type under it. */
.kf-sec.kf-blog .content-card,
.kf-sec.kf-blog .content-card--article {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    height: 100%;
}

.kf-sec.kf-blog .content-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.kf-sec.kf-blog .content-card__media {
    aspect-ratio: 272 / 153;
    border-radius: 6px;
    overflow: hidden;
    background: var(--kf-paper);
    margin-bottom: 14px;
}

.kf-sec.kf-blog .content-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease-out;
}

.kf-sec.kf-blog .content-card__link:hover .content-card__img { transform: scale(1.03); }

.kf-sec.kf-blog .content-card__body { padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; }

.kf-sec.kf-blog .content-card__eyebrow {
    margin-bottom: 6px;
    font-family: var(--kf-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kf-mute);
}

.kf-sec.kf-blog .content-card__title {
    margin: 0 0 8px;
    font-family: var(--kf-display);
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    color: var(--kf-ink);
    text-transform: none;
}

.kf-sec.kf-blog .content-card__link:hover .content-card__title {
    text-decoration: underline;
    text-decoration-color: var(--kf-yellow);
    text-underline-offset: 3px;
}

/* Two lines, always. This is what makes a row of cards end level.
   The card's own stylesheet sets display: flow-root on this element, so the box display that the
   clamp depends on has to out-specify it; -webkit-line-clamp alone is inert without it. */
.kf-sec.kf-blog .content-card--article .content-card__excerpt,
.kf-sec.kf-blog .content-card__excerpt {
    margin: 0 0 14px;
    font-family: var(--kf-body);
    font-size: 13px;
    line-height: 20px;
    color: var(--kf-ink-3);
    /* Height-based rather than -webkit-line-clamp: the clamp needs display:-webkit-box, and the
       card's own styling keeps that element at flow-root. Two lines at 20px line-height is 40px,
       and it holds without depending on a display value something else owns. */
    max-height: 40px;
    overflow: hidden;
}

.kf-sec.kf-blog .content-card__foot {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.kf-sec.kf-blog .content-card__meta { font-size: 11px; color: var(--kf-mute); }

/* The date carries the meta row on its own in the design; the read affordance is the card. */
.kf-sec.kf-blog .content-card__read { display: none; }

/* --- grid head ------------------------------------------------------------- */

.kf-blog-grid__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}

.kf-blog-grid__title {
    margin: 0;
    font-family: var(--kf-display);
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kf-ink);
}

.kf-blog-grid__all { font-size: 13px; color: var(--kf-ink); text-decoration: none; }
.kf-blog-grid__all:hover { text-decoration: underline; text-decoration-color: var(--kf-yellow); }


/* ------------------------------------------------------------------ sort control

   kf-blog-filters.css is ported from LynTec, where .content-sort is one third of a
   search / filter / sort toolbar: a 52px full-width segment with an invisible <select>
   over it and the word "Sort" drawn in ::after, all of it !important. This page has no
   such toolbar — it has the Filters pill and this control — so those rules have to be
   undone rather than out-specified. Every override below therefore carries the ID and
   !important, matching the weight of what it is unwinding. */

.kf-sec.kf-blog #query-controls .content-sort {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* The segment divider and the "↕ Sort" text belong to the toolbar, not here. */
.kf-sec.kf-blog #query-controls .content-sort::before,
.kf-sec.kf-blog #query-controls .content-sort::after { content: none !important; }

/* No-JS fallback: the select is the control, styled as the pill. With JS the button
   below takes over and this is hidden. */
.kf-sec.kf-blog #query-controls .content-sort select.orderby {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 42px 0 22px !important;
    opacity: 1 !important;
    font-size: 12px !important;
    color: var(--kf-ink) !important;
    background: #fff !important;
    border: 1px solid var(--kf-line-dark, #2A2B2C) !important;
    border-radius: 22px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
}

.kf-sec.kf-blog #query-controls .kf-sort select.orderby {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%);
}

/* The toggle is the same pill as the Filters button so the two read as a pair. */
.kf-sec.kf-blog .kf-sort__toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 20px 0 22px;
    background: #fff;
    border: 1px solid var(--kf-line-dark, #2A2B2C);
    border-radius: 22px;
    font-family: var(--kf-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kf-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.kf-sec.kf-blog .kf-sort__toggle:hover { background: var(--kf-wash, #F5F5F5); }
.kf-sec.kf-blog .kf-sort__toggle:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: 2px; }

/* Drawn, so it cannot go missing with an icon font. */
.kf-sec.kf-blog .kf-sort__caret {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease-out;
}

.kf-sec.kf-blog .kf-sort__toggle[aria-expanded="true"] .kf-sort__caret {
    margin-top: 2px;
    transform: rotate(-135deg);
}

.kf-sec.kf-blog .kf-sort__drop {
    width: 230px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--kf-line, #E3E3E3);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.kf-sec.kf-blog .kf-sort__list { margin: 0; padding: 0; list-style: none; }

.kf-sec.kf-blog .kf-sort__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-family: var(--kf-body);
    font-size: 13px;
    text-align: left;
    color: var(--kf-ink);
    cursor: pointer;
}

.kf-sec.kf-blog .kf-sort__opt:hover { background: var(--kf-wash, #F5F5F5); }
.kf-sec.kf-blog .kf-sort__opt:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: -2px; }

.kf-sec.kf-blog .kf-sort__opt.is-selected { font-weight: 600; }
.kf-sec.kf-blog .kf-sort__opt.is-selected::after {
    content: "";
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--kf-ink);
    border-bottom: 2px solid var(--kf-ink);
    transform: rotate(45deg) translate(-1px, -1px);
}

/* ------------------------------------------------------- full-colour card imagery

   kf-blog-filters.css (ported from LynTec) desaturates every content-card image and
   restores it on hover. Scoped off here rather than deleted at source, because the same
   rule dresses the Learning Library, which is not being changed. */
.kf-sec.kf-blog #content .content-card img,
.kf-sec.kf-blog #content .content-card:hover img,
.kf-sec.kf-blog .content-card img,
.kf-sec.kf-blog .content-card:hover img { filter: none; }

.kf-sec.kf-blog .content-card video,
.kf-sec.kf-blog .content-card:hover video { filter: none; }

/* ============================================================================
   Catalogue · single-column list
   ============================================================================
   Set by the element's Layout field, which puts .kf-blog-grid--list on the ROOT.
   Everything below is CSS only, keyed off that root class, so cards appended by
   kf-blog-filters.js on filter and load-more inherit the layout without the
   script knowing anything about it.

   The trade this makes: about 3 posts above the fold instead of 6, in exchange
   for a real standfirst on each. Right for long-form explainers, wrong for a
   high-volume feed — hence a field rather than a rewrite.
   ============================================================================ */

/* The three-up is not a CSS grid at all — it is UIkit's `uk-child-width-1-3@m` on .content-grid,
   a flex row with a negative gutter margin and per-child padding. So the list has to unwind that
   rather than change a grid-template. */
.kf-sec.kf-blog .kf-blog-grid--list .content-grid {
    display: block;
    margin-left: 0;
    margin-top: 0;
}
.kf-sec.kf-blog .kf-blog-grid--list .content-grid > .content-grid__item {
    width: 100%;
    max-width: none;
    flex: none;
    padding-left: 0;
    margin: 0;
}

/* Each row: thumbnail beside the copy, with a hairline between rows. A list wants
   rules, not card chrome. */
.kf-sec.kf-blog .kf-blog-grid--list .content-card__link {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 36px;
    align-items: start;
    padding: 28px 0;
    border-top: 1px solid var(--kf-line);
}
.kf-sec.kf-blog .kf-blog-grid--list .content-grid__item:first-child .content-card__link { border-top: 0; padding-top: 0; }

.kf-sec.kf-blog .kf-blog-grid--list .content-card__media {
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
    /* Images are square on this site; only buttons and pills round. The three-up
       carries 6px from the card stylesheet, which reads as a card — a list row is
       not a card. */
    border-radius: 0;
}

.kf-sec.kf-blog .kf-blog-grid--list .content-card__title {
    font-size: 24px;
    line-height: 30px;
    margin-top: 6px;
}

/* The whole point of the layout: the excerpt stops being a clamped teaser. */
.kf-sec.kf-blog .kf-blog-grid--list .content-card__excerpt {
    max-height: none;
    -webkit-line-clamp: none;
    font-size: 14px;
    line-height: 23px;
    margin-top: 12px;
}

.kf-sec.kf-blog .kf-blog-grid--list .content-card__foot { margin-top: 16px; }
/* There is room for it now. */
.kf-sec.kf-blog .kf-blog-grid--list .content-card__read { display: inline; }

@media (max-width: 767px) {
    .kf-sec.kf-blog .kf-blog-grid--list .content-card__link { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .kf-sec.kf-blog .kf-blog-grid--list .content-card__title { font-size: 20px; line-height: 26px; }
}


/* The drawer's facet labels sit in a .filter-item-name span INSIDE the label, and
   kf-blog-filters.css colours that span --kf-ink-3. On this drawer's near-black ground that is
   dark grey on black. The rules above only ever reached the <label>, which is why they looked
   applied and the text stayed unreadable. */
.kf-sec.kf-blog .kf-blog__drawer .filter-item-name { color: #fff; }
.kf-sec.kf-blog .kf-blog__drawer .filter-item-count { color: var(--kf-on-dark-mute); }
.kf-sec.kf-blog .kf-blog__drawer .filter-item-label:hover .filter-item-name { color: var(--kf-yellow); }