/* =============================================================================
   Press release — LiteGear joins Kino Flo   (_migration/press)
   =============================================================================
   This file is DELIBERATELY SMALL. The design language it sits in already exists in kf-about.css,
   which functions.php loads first as a dependency: the token set on `.kf-sec`, the type scale
   (.kf-display / .kf-h1 / .kf-h2 36-44 / .kf-h4), .kf-container, .kf-band, .kf-eyebrow, .kf-sub,
   .kf-btn, .kf-cards/.kf-card, .kf-stats, .kf-quote. The press page uses those components; the
   range and proof grids are aliased onto .kf-card and .kf-stat IN kf-about.css so each declaration
   lives in exactly one place.

   Do not restate a colour, a type size or a measure here that kf-about.css already sets. The first
   pass of this file did, and drifted immediately: it invented .kf-h2 at 40/48 against the system's
   36/44, set eyebrows in #846C01 — the exact olive kf-about.css documents rejecting — and redefined
   --kf-body, which is a FONT FAMILY there, as a colour.

   Two traps this file still answers, both in DEPLOY-DEV.md §8.6:
     * `* + .uk-margin { margin-top: 20px !important }` — spacing on a native element is set with
       its own margin_remove_* props and expressed here as PADDING, which those utilities do not
       touch.
     * A full-bleed band needs `kf-bleed` ON THE SECTION.
   ========================================================================== */

/* ---- case -------------------------------------------------------------------
   The system uppercases its display faces. This page's design does NOT: the Figma sets every
   headline and the pull quote in sentence case, and only the range card names are uppercase —
   and those are uppercase in the SOURCE COPY, so turning the transform off renders each headline
   exactly as it is authored and leaves the card names alone. */
[class*="kf-press-"] :is(.kf-display, .kf-h1, .kf-h2, .kf-h4, .kf-quote) { text-transform: none; }

/* ---- band rhythm -----------------------------------------------------------
   `.kf-band` sets this on the About page, but a Builder section's padding lives on its own
   `.uk-container`, which is not a node this page authors. Same token, same 140px — the value is
   not restated. */
/* The rhythm goes on the SECTION, and the container is zeroed. `.uk-section` already contributes
   its own 70px, so setting --kf-pad-lg on the container as well produced 210px a side — half a band
   deeper than the About page it is supposed to match. */
.kf-sec[class*="kf-press-"] { padding-block: var(--kf-pad-lg); }
.kf-sec[class*="kf-press-"] > .uk-container,
.kf-sec[class*="kf-press-"] > * > .uk-container { padding-block: 0; }


/* ---- release bar ----------------------------------------------------------
   A dateline strip, not a band: it keeps its own compact rhythm rather than --kf-pad-lg. */
.kf-sec.kf-press-bar { background: var(--kf-ink); padding-block: 0; }
.kf-sec.kf-press-bar > .uk-container { padding-block: 0; }
/* Qualified with .uk-panel: the Builder wraps a text element in one, and theme.1.css sets
   `display: flow-root` on .uk-panel at equal specificity and later source order — which flattened
   this flex row into one unspaced run of text. Same trap as .uk-h2 vs .kf-h2. */
.uk-panel.kf-pbar {
    display: flex; align-items: center; gap: 28px; min-height: 72px;
    font-family: var(--kf-display); font-size: 11px; line-height: 14px;
    font-weight: 700; letter-spacing: 1.2px;
}
.kf-pbar__flag { color: var(--kf-yellow); }
.kf-pbar__date { color: #fff; }
/* A link, not a button — the header's Contact Us pill is the page's only real button. The tap
   target still has to clear 44px: the responsive audit flagged it at 121x13, a real miss on a bar
   a journalist taps to get the release. */
.kf-pbar__pdf {
    margin-left: auto; color: var(--kf-yellow); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 44px;
}
.kf-pbar__pdf:hover { color: #fff; }

/* ---- hero -----------------------------------------------------------------
   .kf-display carries the face, weight and case; only the two-line split and the second colour
   are particular to this headline. */
.kf-sec.kf-press-hero { padding-block: 200px 140px; }
/* The hero headline runs far larger than the system's 56px display — it is the one place on the
   page carrying the announcement itself. clamp() so it survives the whole range rather than
   needing a step at every breakpoint. Both lines are WHITE: the yellow second line competed with
   the eyebrow and the CTA, which are the two things on this band that should read as accent. */
.kf-press-hero .kf-display {
    margin-bottom: 48px;
    font-size: clamp(34px, 5.6vw, 96px);
    line-height: 1.04;
}
.kf-press-hero .kf-display__a,
.kf-press-hero .kf-display__b { display: block; color: #fff; }

/* The deck sits between the headline and the CTA, so the headline's own 48px bottom margin
   would double up against it. Measure held tighter than .kf-sub's 46em: over a moving reel a
   long line is harder to hold than it is on paper. */
.kf-press-hero .kf-display { margin-bottom: 24px; }
.kf-press-hero__deck {
    max-width: 34em; margin: 0 0 40px;
    font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, .88);
}
@media (max-width: 639px) {
    .kf-press-hero__deck { font-size: 15px; line-height: 25px; margin-bottom: 32px; }
}

/* Short rule over the eyebrow — the design's marker for the top of the band. */
.kf-hero__rule {
    display: block; width: 72px; height: 4px; background: var(--kf-yellow); margin-bottom: 26px;
}

/* ---- lede + at a glance ---------------------------------------------------- */
.kf-lede__body {
    font-family: var(--kf-body); font-size: 21px; line-height: 34px;
    color: var(--kf-ink-3); margin: 0 0 28px;
}
.kf-lede__emph span,
.kf-lede__emph b {
    display: block; font-family: var(--kf-body); font-size: 21px; line-height: 34px;
    font-weight: 700; color: var(--kf-ink);
}
/* the highlighter stroke, same treatment as the rest of the site */
.kf-lede__emph b {
    display: inline;
    background-image: linear-gradient(var(--kf-yellow), var(--kf-yellow));
    background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 42%;
}
.kf-facts {
    background: var(--kf-paper); border-top: 3px solid var(--kf-yellow);
    padding: 36px 40px 40px;
}
.kf-fact + .kf-fact { margin-top: 22px; }
.kf-fact__k {
    /* 11px, not 10: `.kf-eyebrow` is the system's smallest label and this was the only text on the
       page below it. */
    display: block; font-family: var(--kf-body); font-size: 11px; line-height: 14px;
    font-weight: 500; letter-spacing: .8px; color: var(--kf-mute); margin-bottom: 6px;
}
.kf-fact__v {
    display: block; font-family: var(--kf-display); font-size: 14px; line-height: 20px;
    font-weight: 700; color: var(--kf-ink);
}

/* ---- the release ----------------------------------------------------------
   Set tighter than .kf-sub: this is a two-column release body, read in full, not a deck. */
.kf-release__col p {
    font-family: var(--kf-body); font-size: 15px; line-height: 26px;
    color: var(--kf-ink-3); margin: 0 0 20px;
}
.kf-release__col p:last-child { margin-bottom: 0; }

/* ---- native grid_item: kill the stamped margins ----------------------------
   grid_item stamps `uk-margin-top` on EVERY part it renders (meta, title, content), and UIkit's
   utility is `!important`. All of this page's card spacing is expressed as padding — in .kf-card
   for the range band, and below for the rest — so those margins are pure addition: 20px under the
   image on top of the kicker's 20, 20 between kicker and name on top of 6, 20 between name and
   copy on top of 8. Sixty pixels per card, which is why they stood taller than the design. */
.kf-range__grid .el-item > *,
.kf-cs__grid .el-item > *,
.kf-proof__grid .el-item > * { margin-top: 0 !important; }

/* ---- 01 ecosystem ----------------------------------------------------------
   Three reel tiles. The rule sits BETWEEN the reel and the copy and is yellow — it reads as the
   band's own divider. It was a grey rule ABOVE the media, which read as a card border and cut the
   tile off from the section instead of joining its two halves. */
.kf-eco__reel video,
.kf-eco__reel img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    background: var(--kf-slate);
}
.kf-eco__n {
    margin: 0; padding-top: 14px; border-top: 3px solid var(--kf-yellow);
    font-family: var(--kf-body); font-size: 11px; line-height: 15px; font-weight: 500;
    letter-spacing: 1.2px; color: var(--kf-mute);
}
.kf-eco__grid .kf-eco__t { margin: 0; padding-top: 10px; }
.kf-eco__c {
    margin: 0; padding-top: 8px;
    font-family: var(--kf-body); font-size: 15px; line-height: 24px; color: var(--kf-ink-3);
}
/* the reel and the rule are separate elements now, so the stamped margins have to go here too */
.kf-eco__grid .uk-margin,
.kf-eco__grid [class*="uk-margin-top"] { margin-top: 0 !important; }

/* ---- 03 color science ---------------------------------------
   Not the card component — these are rules-and-copy blocks, so they get their own light treatment
   rather than being forced into .kf-card. */
.kf-cs__grid .el-item { height: 100%; }
.kf-cs__media video,
.kf-cs__media img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px;
    background: var(--kf-slate);
}
/* A row, not a card in a 3-up: the name and line sit left, the affordance right, so the three
   systems read as a list you can scan down beside the image. */
.kf-cs__row {
    display: flex; align-items: center; gap: 24px;
    background: #fff; border-radius: 4px; padding: 24px 26px;
}
.kf-cs__row + .kf-cs__row { margin-top: 16px; }
.kf-cs__body { flex: 1 1 auto; }
.kf-cs__n {
    margin: 0; font-family: var(--kf-display); font-size: 19px; line-height: 26px;
    font-weight: 700; color: var(--kf-ink);
}
.kf-cs__c {
    margin: 6px 0 0; font-family: var(--kf-body); font-size: 15px; line-height: 23px;
    color: var(--kf-ink-3);
}
/* The release link under the lede. Only the gap is defined here — the link itself reuses
   .kf-cs__more, the page's existing "Learn more →" treatment, rather than restating it. */
.kf-lede__more { margin: 26px 0 0; }

.kf-cs__more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-family: var(--kf-display); font-size: 14px; line-height: 20px; font-weight: 700;
    color: var(--kf-ink); text-decoration: none;
}
.kf-cs__more:hover { color: var(--kf-ink); text-decoration: underline;
    text-decoration-color: var(--kf-yellow); text-decoration-thickness: 2px;
    text-underline-offset: 4px; }
/* Spacing as PADDING, not margin — the element's own uk-margin utilities carry !important. */
.kf-cs__grid .el-title {
    font-family: var(--kf-display); font-size: 22px; line-height: 28px; font-weight: 700;
    color: var(--kf-ink); margin: 0; padding: 18px 0 6px;
}
.kf-cs__grid .el-title { padding-top: 0; }
.kf-cs__grid .el-content p {
    font-family: var(--kf-body); font-size: 15px; line-height: 24px;
    color: var(--kf-ink-3); margin: 0;
}

/* ---- 02 the range ----------------------------------------------------------
   The card itself is .kf-card, aliased in kf-about.css. Only the badge is press-specific:
   NEW TO THE RANGE is a state of the card, and grid_item renders one meta line which is already
   carrying the kicker — so it cannot be a second meta. */
/* `.el-image` is a single <img>, so it plays the well's role as well as the image's: the 16/9 comes
   from here because the .kf-card__well wrapper does not exist in native grid_item markup. */
.kf-range__grid .el-image { aspect-ratio: 16 / 9; height: auto; }
.kf-range__grid .el-item { position: relative; }
.kf-range__grid .kf-rcard--new::after {
    content: "NEW TO THE RANGE";
    position: absolute; right: 12px; top: 15px; z-index: 1;
    background: var(--kf-yellow); color: var(--kf-ink); border-radius: 11px;
    font-family: var(--kf-body); font-size: 9px; line-height: 22px; font-weight: 500;
    letter-spacing: .8px; padding-inline: 10px;
}

/* ---- quote -----------------------------------------------------------------
   .kf-quote already sets 46/56 white on the display face; the band only supplies its ground. */
/* Black, not --kf-ink: the portrait is shot on black and any near-black leaves a seam
   down the middle of the band where the two meet. */
.kf-sec.kf-press-quote { background: #000; padding-block: 0; }
.kf-press-quote blockquote.kf-quote { border: 0; padding: 0; margin: 0; max-width: 100%; }
.kf-quote__mark {
    display: block; font-family: var(--kf-display); font-size: 92px; line-height: .7;
    font-weight: 700; color: var(--kf-yellow);
}
/* The attribution is set off by a short rule rather than by a dash, and takes the accent — it is
   the only place on this band where a name appears.

   The rule is a pseudo-element on the FOOTER, not a border on both the footer and the cite: styling
   both drew it twice, and because the theme puts an em-dash in `.el-footer::before` the page ended
   up with rule / dash / rule / name stacked down the band. Overriding that pseudo-element with the
   rule itself removes the dash and the duplicate in one move. */
.kf-press-quote .el-footer {
    position: relative; margin-top: 34px; padding-top: 22px;
}
.kf-press-quote .el-footer::before {
    content: ""; position: absolute; top: 0; left: 0; width: 76px; height: 3px;
    background: var(--kf-yellow);
}
.kf-press-quote .el-author {
    display: block; font-family: var(--kf-display); font-size: 15px; line-height: 22px;
    font-weight: 700; font-style: normal; color: var(--kf-yellow);
}

/* ---- proof (yellow) ---------------------------------------------------------
   .kf-stat__big/__small carry the sizes. Yellow is the one ground the shared palette does not
   cover, so only the colours are restated. */
.kf-sec.kf-press-proof { background: var(--kf-yellow); }
.kf-press-proof .kf-h2,
.kf-press-proof .kf-sub,
.kf-proof__grid .el-title { color: var(--kf-ink); }
.kf-press-proof .kf-eyebrow { color: rgba(22, 22, 22, .62); }
.kf-proof__grid .el-content p { color: rgba(22, 22, 22, .7); }
.kf-proof__grid .el-item { border-top: 3px solid var(--kf-ink); padding-top: 18px; }

/* ---- network ---------------------------------------------------------------- */
/* The band renders builder/kf_dealer_map, which is the live GeoDirectory locator — NOT a plate.
   These rules used to style a dashed placeholder, and they were still being applied to the real
   element: `display:flex` plus `aspect-ratio: 740/274` collapsed a 380px map into a centred grey
   box with the "find a dealer" link floating in the middle of it. The component sizes itself from
   the shortcode's own height, so the only thing needed here is the footer line. */
.kf-net__map .kf-map__foot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin: 12px 0 0;
}
.kf-net__map .kf-map__note {
    font-family: var(--kf-body); font-size: 12px; line-height: 17px; color: var(--kf-mute);
}
/* ---- globe -----------------------------------------------------------------
   Decorative backdrop for the network band, sitting behind the copy on the right and running off
   the page edge. Light grey on purpose: it has to lose against body text at every width, so it is
   pitched below the type's contrast rather than beside it.

   `position: absolute` inside a `position: relative` SECTION, not inside the container — the point
   is for it to escape the 1200 measure. `pointer-events: none` so it never eats a click meant for
   the search field or the CTAs sitting over it. */
.kf-sec.kf-press-net { position: relative; overflow: hidden; }
/* `.uk-panel` is `position: relative` in UIkit, so an absolutely positioned child anchors to the
   PANEL — here a 1px-tall wrapper around an empty div — not to the band. The canvas came out
   744x1. Making the column and its panel static hands the job back to the container. */
.kf-net__globewrap,
.kf-net__globewrap .uk-panel { position: static; }
.kf-net__globe {
    position: absolute; top: 0; bottom: 0; left: auto;
    /* Out to the PAGE edge, not the container's: the container is the 1200 measure and the sphere
       is meant to run past it. The section clips it with overflow: hidden. */
    right: calc((100% - 100vw) / 2);
    width: min(58vw, 860px);
    z-index: 0; pointer-events: none;
    --kf-globe-grid: rgba(22, 22, 22, .34);
    --kf-globe-dot:  rgba(22, 22, 22, .50);
    /* Chauvet offices, in brand yellow. Split into a hex and an rgb triplet because the halo is a
       canvas gradient and needs to build rgba() strings at varying alpha. */
    --kf-globe-hub: #fed208;
    --kf-globe-hub-rgb: 254, 210, 8;
    /* the sphere's edge — with only land drawn, nothing else says where the globe ends */
    --kf-globe-rim: rgba(22, 22, 22, .10);
    /* seconds per revolution — was effectively 126s, which read as static at a glance */
    --kf-globe-secs: 55;
}
.kf-net__globe canvas { display: block; }
/* Everything the band actually says sits above it. */
.kf-sec.kf-press-net > .uk-container { position: relative; z-index: 1; }
/* Below the l breakpoint the copy takes the full width and the globe would sit directly under it,
   so it goes. A backdrop that competes with the text it is behind is worse than no backdrop. */
@media (max-width: 1199px) {
    .kf-net__globe { display: none; }
}

/* ---- dealer search ---------------------------------------------------------
   Sits above the support list: it is the one thing in this band a reader is likely to have come
   for, and the list below it explains what they get once they find someone. */
/* `width: 100%` because `.uk-search` is inline-block at a fixed width by default. */
.kf-net__search { display: block; width: 100%; margin-bottom: 28px; }
.kf-net__searchlabel {
    display: block; font-family: var(--kf-body); font-size: 11px; line-height: 14px;
    font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--kf-mute);
    margin-bottom: 10px;
}
.kf-net__searchrow { display: flex; gap: 10px; width: 100%; }
.kf-net__searchrow .uk-search-input {
    /* `flex: 1 1 0` + `min-width: 0`, not `1 1 auto`: UIkit's `.uk-search-default` sets a fixed
       240px width, which an `auto` basis adopts — the field came out truncating its own
       placeholder while empty space sat beside it. */
    flex: 1 1 0; min-width: 0; width: auto; min-height: 52px; padding-inline: 18px;
    border: 1px solid var(--kf-line); border-radius: 30px; background: #fff;
    font-family: var(--kf-body); font-size: 15px; color: var(--kf-ink);
}
.kf-net__searchrow .uk-search-input::placeholder { color: var(--kf-mute); }
.kf-net__searchrow .uk-search-input:focus {
    outline: none; border-color: var(--kf-ink);
}
.kf-net__searchrow .uk-button { flex: 0 0 auto; }

.kf-net__item { padding: 18px 0; }
.kf-net__item + .kf-net__item { border-top: 1px solid var(--kf-line); }
.kf-net__k {
    display: block; font-family: var(--kf-display); font-size: 12px; line-height: 15px;
    font-weight: 700; letter-spacing: 1.2px; color: var(--kf-ink); margin-bottom: 6px;
}
.kf-net__v {
    display: block; font-family: var(--kf-body); font-size: 15px; line-height: 22px;
    color: var(--kf-ink-3);
}

/* ---- what comes next --------------------------------------------------------- */
/* `padding-block: 0` on the SECTION. A section carrying a background image puts the image on an
   inner `.uk-background-cover` wrapper, so the section's own 140px band padding sits OUTSIDE it —
   and paints --kf-ink as a grey bar above and below the photo. The wrapper carries its own padding;
   the band's height comes from the copy column's min-height. */
.kf-sec.kf-press-next { background: var(--kf-ink); padding-block: 0; }
.kf-press-next .uk-grid > :first-child {
    display: flex; flex-direction: column; justify-content: center; min-height: 460px;
}
/* The export is 1600x640 and composed with its own black left half. `cover` + right-anchored
   keeps the fixtures in frame while the black side stretches under the copy at any width. */
.kf-sec.kf-press-next .uk-background-cover { background-position: center right; }
/* The copy column keeps the house measure on its own; the image column runs to the page edge,
   which is the whole reason this band is `kf-bleed`. */
/* ---- split bands -------------------------------------------------------------
   Two bands put copy at the house measure on one side and let the image run to the page edge on
   the other: the quote (portrait right) and what-comes-next (its export is a background). One
   pattern, both consumers.

   Written at kf-bleed's own depth on purpose: `.kf-bleed > .uk-container > .uk-grid > *` in
   custom.css zeroes child padding — correct for a band whose CONTENT reaches the edges, but here
   only the image does. Matching that shape makes this read as a deliberate exception to the
   utility rather than a rule that mysteriously loses. */
.kf-bleed.kf-press-quote > .uk-container > .uk-grid > :first-child {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--kf-pad-lg);
    /* Percentage of the GRID, not of the viewport: the band is already inset by the page's own
       body margin, so a 100vw calculation lands one margin too far in. A padding percentage
       resolves against the containing block's width, which is exactly the band's own measure —
       so this tracks the house 1200 at every width without knowing the margin. */
    padding-left: max(40px, calc((100% - 1200px) / 2));
    padding-right: 40px;
}
/* The portrait fills its half and bleeds off the right edge, as in the design.
   `height: 100%` alone does nothing here: the column is a grid child with no definite height, so
   the percentage has nothing to resolve against and the image collapsed to its own aspect ratio —
   which made `cover` crop a tight band across his eyes. The chain of `display: flex` from the grid
   down to the image is what gives it a height to fill. */
.kf-bleed.kf-press-quote > .uk-container > .uk-grid { align-items: stretch; }
.kf-bleed.kf-press-quote > .uk-container > .uk-grid > :last-child,
.kf-bleed.kf-press-quote > .uk-container > .uk-grid > :last-child > * {
    display: flex; flex-direction: column;
}
.kf-quote__portrait { flex: 1 1 auto; }
.kf-quote__portrait img {
    display: block; width: 100%; height: 100%; min-height: 420px;
    /* Anchored high: a centred crop on a head-and-shoulders portrait cuts the forehead first. */
    object-fit: cover; object-position: 50% 18%;
}
.kf-next__line {
    font-family: var(--kf-display); font-size: 26px; line-height: 34px; font-weight: 700;
    color: #fff; margin: 28px 0 0;
}
.kf-next__kicker {
    font-family: var(--kf-display); font-size: 30px; line-height: 38px; font-weight: 700;
    color: var(--kf-yellow); margin: 10px 0 0;
}

/* ---- media contact ----------------------------------------------------------- */
.kf-sec.kf-press-contact { background: var(--kf-ink); }
.kf-contact__body {
    font-family: var(--kf-body); font-size: 16px; line-height: 28px; color: #fff; margin: 0;
}
.kf-dl__row { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.kf-dl__row + .kf-dl__row { border-top: 1px solid #333; }
.kf-dl__t { font-family: var(--kf-body); font-size: 14px; line-height: 20px; color: #fff; }
/* the row is a download, so it should look like one rather than like body copy */
.kf-dl__chip {
    margin-left: auto; border: 1px solid #4a4a4a; border-radius: 3px; padding: 3px 9px;
    font-family: var(--kf-display); font-size: 10px; line-height: 13px; font-weight: 700;
    letter-spacing: .8px; color: var(--kf-on-dark-mute);
}
/* press convention: the release ends with a centred end mark */
.kf-end {
    text-align: center; font-family: var(--kf-display); font-size: 13px; line-height: 18px;
    font-weight: 700; letter-spacing: 2px; color: var(--kf-on-dark-mute); margin: 40px 0 0;
}

/* ---- reflow -------------------------------------------------------------------
   .kf-band and .kf-h2 reflow with the system in kf-about.css; only the hero's outsized top pad and
   the press-only type need their own steps. */
@media (max-width: 959px) {
    .kf-sec.kf-press-hero { padding-block: 140px 88px; }
    .kf-bleed.kf-press-quote > .uk-container > .uk-grid > :first-child {
        padding-left: 40px; padding-right: 40px; padding-block: var(--kf-pad);
    }
    .kf-quote__portrait img { min-height: 320px; }
    .kf-cs__row { flex-wrap: wrap; gap: 12px; }
    .kf-lede__body,
    .kf-lede__emph span,
    .kf-lede__emph b { font-size: 18px; line-height: 29px; }
}
@media (max-width: 639px) {
    .kf-pbar { flex-wrap: wrap; gap: 10px 18px; padding-block: 18px; min-height: 0; }
    .kf-pbar__pdf { margin-left: 0; width: 100%; }
}