/* =============================================================
   Football Kicking Tees Magazine — design system
   Loaded after the parent's theme.css and tools.css.

   Scopes
   - body.fkm-light : editorial pages (home, articles, archives, pages)
   - body.fkm-dark  : interactive tool pages, which keep the parent look
   - .fkm-on-navy   : navy bands (header, hero, tools, footer)

   Contrast (WCAG 2.x, normal text needs 4.5:1)
   - #25313D on #FFFFFF 13.3:1 · on #F4F6F8 12.2:1
   - #5A6876 on #FFFFFF  5.7:1 · on #F4F6F8  5.3:1
   - #146B44 on #FFFFFF  6.5:1 (link green, darkened from #18794E for text)
   - #E6B84A on #0B1F33  9.0:1 · #EEF2F7 on #0B1F33 14.9:1
   ============================================================= */

:root {
    --fkm-navy: #0B1F33;
    --fkm-navy-2: #12304D;
    --fkm-green: #18794E;
    --fkm-green-text: #146B44;
    --fkm-gold: #E6B84A;
    --fkm-white: #FFFFFF;
    --fkm-bg: #F4F6F8;
    --fkm-text: #25313D;
    --fkm-muted: #5A6876;
    --fkm-line: #DDE3EA;
    --fkm-on-navy: #EEF2F7;
    --fkm-on-navy-muted: rgba(238, 242, 247, .76);

    --fkm-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
    --fkm-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fkm-radius: 8px;
    --fkm-shadow: 0 1px 2px rgba(11, 31, 51, .06), 0 4px 14px rgba(11, 31, 51, .06);
    --fkm-wrap: 1200px;
    --fkm-measure: 740px;
    --fkm-header-h: 64px;
}

/* ---------- Scopes: retune the parent's variables ---------- */
body.fkm-light {
    --fkt-bg: var(--fkm-bg);
    --fkt-surface: var(--fkm-white);
    --fkt-surface-2: var(--fkm-white);
    --fkt-line: var(--fkm-line);
    --fkt-text: var(--fkm-text);
    --fkt-muted: var(--fkm-muted);
    --fkt-teal: var(--fkm-green-text);
    --fkt-shadow: var(--fkm-shadow);
    background: var(--fkm-bg);
    color: var(--fkm-text);
}
.fkm-on-navy {
    --fkt-bg: var(--fkm-navy);
    --fkt-surface: rgba(255, 255, 255, .05);
    --fkt-surface-2: rgba(255, 255, 255, .04);
    --fkt-line: rgba(255, 255, 255, .13);
    --fkt-text: var(--fkm-on-navy);
    --fkt-muted: var(--fkm-on-navy-muted);
    --fkt-teal: #4FC3A1;
    background: var(--fkm-navy);
    color: var(--fkm-on-navy);
}
body.fkm { font-family: var(--fkm-sans); font-size: 1rem; line-height: 1.65; }
body.fkm-light .fkt-section-title, body.fkm-light h1, body.fkm-light h2, body.fkm-light h3 { color: var(--fkm-navy); }
.fkm-on-navy h1, .fkm-on-navy h2, .fkm-on-navy h3, .fkm-on-navy .fkt-section-title,
body.fkm .fkm-on-navy h1, body.fkm .fkm-on-navy h2, body.fkm .fkm-on-navy h3, body.fkm .fkm-on-navy .fkt-section-title { color: #fff; }
body.fkm .fkm-hero-start h2 { color: var(--fkm-gold); }

/* ---------- Layout primitives ---------- */
.fkm-wrap { max-width: var(--fkm-wrap); margin: 0 auto; padding: 0 20px; }
.fkm-measure { max-width: calc(var(--fkm-measure) + 40px); }
.fkm-measure-wide { max-width: 1040px; }
.fkm-narrow { max-width: 840px; }
.fkm-center { text-align: center; margin-top: 2rem; }
.fkm-section { padding: clamp(40px, 6vw, 72px) 0; }
.fkm-section--tint { background: var(--fkm-white); border-top: 1px solid var(--fkm-line); border-bottom: 1px solid var(--fkm-line); }
.fkm-section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; margin-bottom: 28px; }
.fkm-section-head > :not(.fkm-more) { grid-column: 1; }
.fkm-section-title {
    font-family: var(--fkm-display); font-weight: 400; letter-spacing: .02em;
    font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1; margin: 0;
}
.fkm-section-title::after { content: ""; display: block; width: 48px; height: 4px; background: var(--fkm-gold); margin-top: 10px; }
.fkm-section-dek { margin: 8px 0 0; color: var(--fkm-muted); max-width: 640px; }
.fkm-on-navy .fkm-section-dek { color: var(--fkm-on-navy-muted); }
.fkm-more { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--fkm-green-text); text-decoration: none; white-space: nowrap; }
.fkm-more::after { content: " \2192"; }
.fkm-more:hover { text-decoration: underline; }
.fkm-eyebrow { font-family: var(--fkm-display); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fkm-gold); margin: 0 0 .4rem; }
.fkm-eyebrow--green { color: var(--fkm-green-text); }

/* ---------- Buttons ---------- */
.fkm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 44px; padding: .7rem 1.25rem; border-radius: var(--fkm-radius);
    font-weight: 700; font-size: .98rem; line-height: 1.2; text-decoration: none;
    border: 2px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.fkm-btn--sm { min-height: 38px; padding: .45rem .9rem; font-size: .9rem; white-space: nowrap; }
.fkm-btn--gold { background: var(--fkm-gold); color: var(--fkm-navy); }
.fkm-btn--gold:hover { background: #F0C962; }
.fkm-btn--navy { background: var(--fkm-navy); color: #fff; }
.fkm-btn--navy:hover { background: var(--fkm-navy-2); }
.fkm-btn--outline { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.fkm-btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Focus (visible everywhere, including the parent's tools) ---------- */
body.fkm a:focus-visible, body.fkm button:focus-visible, body.fkm input:focus-visible,
body.fkm select:focus-visible, body.fkm summary:focus-visible, body.fkm [tabindex]:focus-visible {
    outline: 3px solid var(--fkm-gold); outline-offset: 2px; border-radius: 4px;
}
body.fkm-light .fkm-section a:focus-visible, body.fkm-light .fkm-article a:focus-visible { outline-color: var(--fkm-green); }
.fkm-main:focus { outline: none; }

/* ---------- Header ---------- */
.fkm-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.admin-bar .fkm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fkm-header { top: 0; position: relative; } }
.fkm-header-inner { position: relative; display: flex; align-items: center; gap: 16px; min-height: var(--fkm-header-h); }
.fkm-brand { display: flex; flex-direction: column; flex-shrink: 0; text-decoration: none; color: #fff; line-height: 1; margin-right: auto; white-space: nowrap; }
.fkm-brand-name { font-family: var(--fkm-display); font-size: 1.7rem; letter-spacing: .03em; color: #fff; margin: 0; }
.fkm-brand-tag { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fkm-gold); margin-top: 3px; }
.fkm-brand img { max-height: 44px; width: auto; }

.fkm-header .fkm-nav { display: flex; align-items: center; gap: 18px; position: static; transform: none; padding: 0; background: none; border: 0; backdrop-filter: none; flex-direction: row; }
.fkm-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.fkm-menu > li { position: relative; }
.fkm-menu a { display: block; padding: 10px 8px; color: var(--fkm-on-navy); text-decoration: none; font-weight: 600; font-size: .9rem; border-radius: 6px; white-space: nowrap; }
.fkm-menu a:hover, .fkm-menu .current-menu-item > a, .fkm-menu .current-menu-ancestor > a, .fkm-menu .current-post-ancestor > a { color: var(--fkm-gold); }
.fkm-menu > .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: .7; }
.fkm-menu .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 240px; list-style: none; margin: 0; padding: 8px;
    background: var(--fkm-white); border: 1px solid var(--fkm-line); border-radius: var(--fkm-radius); box-shadow: 0 12px 32px rgba(11, 31, 51, .18);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 120;
}
.fkm-menu > li:hover > .sub-menu, .fkm-menu > li:focus-within > .sub-menu, .fkm-menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.fkm-menu .sub-menu a { color: var(--fkm-text); font-weight: 500; padding: 9px 12px; }
.fkm-menu .sub-menu a:hover { background: var(--fkm-bg); color: var(--fkm-green-text); }
.fkm-nav-actions { display: flex; align-items: center; gap: 10px; }
.fkm-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; cursor: pointer; }
.fkm-search-toggle:hover { border-color: var(--fkm-gold); color: var(--fkm-gold); }
.fkm-search { background: var(--fkm-navy-2); padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.fkm-search-form { display: flex; gap: 10px; }
.fkm-search-form input[type="search"] { flex: 1; min-height: 44px; padding: 0 14px; border-radius: var(--fkm-radius); border: 1px solid var(--fkm-line); font: inherit; color: var(--fkm-text); background: #fff; }
.fkm-search-form--inline { max-width: 560px; margin-top: 18px; }
.fkm-menu-toggle { display: none; color: #fff; border-color: rgba(255, 255, 255, .3); }
.fkm-burger, .fkm-burger::before, .fkm-burger::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: ""; }
.fkm-burger::before { position: absolute; top: -6px; } .fkm-burger::after { position: absolute; top: 6px; }

@media (max-width: 1240px) {
    .fkm-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .fkm-header .fkm-nav {
        position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch;
        gap: 0; padding: 8px 20px 20px; background: var(--fkm-navy); border-bottom: 1px solid rgba(255, 255, 255, .12);
        max-height: calc(100vh - var(--fkm-header-h)); overflow-y: auto;
    }
    .fkm-header .fkm-nav.is-open { display: flex; }
    .fkm-menu { flex-direction: column; align-items: stretch; }
    .fkm-menu a { padding: 12px 4px; font-size: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
    .fkm-menu > .menu-item-has-children > a::after { display: none; }
    .fkm-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 6px 14px; min-width: 0; }
    .fkm-menu .sub-menu a { color: var(--fkm-on-navy-muted); font-size: .94rem; }
    .fkm-nav-actions { padding-top: 14px; }
}

/* ---------- Breadcrumbs ---------- */
.fkm-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 16px 0 0; font-size: .86rem; color: var(--fkm-muted); }
.fkm-crumbs li + li::before { content: "/"; margin: 0 6px 0 2px; opacity: .6; }
.fkm-crumbs a { color: var(--fkm-muted); text-decoration: none; }
.fkm-crumbs a:hover { color: var(--fkm-green-text); text-decoration: underline; }
.fkm-crumbs [aria-current] { color: var(--fkm-text); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fkm-dark .fkm-crumbs ol, body.fkm-dark .fkm-crumbs a, body.fkm-dark .fkm-crumbs [aria-current] { color: var(--fkm-on-navy-muted); }

/* ---------- Hero ---------- */
.fkm-hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0; background: radial-gradient(ellipse at 85% 0%, rgba(24, 121, 78, .35), transparent 55%), var(--fkm-navy); }
.fkm-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, .045) calc(10% - 1px) 10%); pointer-events: none; }
.fkm-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.fkm-hero.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 31, 51, .94) 0%, rgba(11, 31, 51, .78) 45%, rgba(11, 31, 51, .35) 100%); }
.fkm-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 48px; align-items: center; }
.fkm-hero-title { font-family: var(--fkm-display); font-weight: 400; font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: .95; letter-spacing: .01em; margin: 0 0 18px; color: #fff; }
.fkm-hero-dek { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--fkm-on-navy-muted); max-width: 560px; margin: 0 0 28px; }
.fkm-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.fkm-hero-start { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--fkm-radius); padding: 22px 22px 10px; }
.fkm-hero-start h2 { font-family: var(--fkm-display); font-weight: 400; font-size: 1.6rem; letter-spacing: .04em; margin: 0 0 8px; color: var(--fkm-gold); }
.fkm-hero-start ol { list-style: none; margin: 0; padding: 0; }
.fkm-hero-start li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.fkm-hero-start a { display: block; padding: 12px 0; color: var(--fkm-on-navy-muted); text-decoration: none; font-size: .95rem; line-height: 1.45; }
.fkm-hero-start a strong { display: block; color: #fff; }
.fkm-hero-start a:hover strong { color: var(--fkm-gold); }

/* ---------- Cards ---------- */
.fkm-grid { display: grid; gap: 24px; }
.fkm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fkm-card { display: flex; flex-direction: column; background: var(--fkm-white); border: 1px solid var(--fkm-line); border-radius: var(--fkm-radius); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.fkm-card:hover { border-color: #C4CED9; box-shadow: var(--fkm-shadow); }
.fkm-card-media { display: block; aspect-ratio: 3 / 2; background: var(--fkm-navy); overflow: hidden; }
.fkm-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.fkm-card:hover .fkm-card-media img { transform: scale(1.03); }
.fkm-card-art { position: relative; display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 16px; background: linear-gradient(135deg, var(--fkm-navy) 0%, var(--fkm-navy-2) 100%); }
.fkm-card-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(255, 255, 255, .07) calc(20% - 1px) 20%); }
.fkm-card-art::after { content: ""; position: absolute; right: 18px; top: 18px; width: 54px; height: 34px; border: 3px solid rgba(230, 184, 74, .55); border-radius: 50%; }
.fkm-card-art span { position: relative; font-family: var(--fkm-display); font-size: 1.5rem; letter-spacing: .05em; color: rgba(255, 255, 255, .9); }
.fkm-cat--kicker-equipment .fkm-card-art, .fkm-cat--kicking-tees .fkm-card-art, .fkm-cat--kicking-tee-guides .fkm-card-art, .fkm-cat--kicking-tee-types .fkm-card-art { background: linear-gradient(135deg, #0E3B2A 0%, var(--fkm-green) 100%); }
.fkm-cat--kicker-tips-guides .fkm-card-art, .fkm-cat--football-rules .fkm-card-art { background: linear-gradient(135deg, #2A2414 0%, #6A5420 100%); }
.fkm-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.fkm-kicker { align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fkm-green-text); text-decoration: none; }
.fkm-kicker:hover { text-decoration: underline; }
.fkm-card-title { margin: 0; font-size: 1.14rem; line-height: 1.32; font-weight: 700; letter-spacing: -.005em; }
.fkm-card-title a { color: var(--fkm-navy); text-decoration: none; }
.fkm-card-title a:hover { color: var(--fkm-green-text); text-decoration: underline; text-underline-offset: 3px; }
.fkm-card-excerpt { margin: 0; color: var(--fkm-muted); font-size: .94rem; line-height: 1.55; }
.fkm-card-meta { margin: auto 0 0; padding-top: 6px; font-size: .8rem; color: var(--fkm-muted); }

.fkm-card--lead .fkm-card-media { aspect-ratio: 16 / 10; }
/* Until a post has a featured image, its typographic panel stays short */
.fkm-card-media:has(.fkm-card-art) { aspect-ratio: 16 / 7; }
.fkm-card--lead .fkm-card-media:has(.fkm-card-art) { aspect-ratio: 16 / 8; }
.fkm-card--lead .fkm-card-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.18; }
.fkm-card--lead .fkm-card-excerpt { font-size: 1.02rem; }
.fkm-card--lead .fkm-card-art span { font-size: 2.2rem; }
.fkm-card--compact { border: 0; border-bottom: 1px solid var(--fkm-line); border-radius: 0; background: none; }
.fkm-card--compact:hover { box-shadow: none; }
.fkm-card--compact .fkm-card-body { padding: 16px 0; }

.fkm-featured { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; }
.fkm-featured-side { display: grid; gap: 16px; }
.fkm-featured-side .fkm-card { flex-direction: row; }
.fkm-featured-side .fkm-card-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 120px; }
.fkm-featured-side .fkm-card-art span { font-size: 1.05rem; }
.fkm-featured-side .fkm-card-art::after { display: none; }
.fkm-featured-side .fkm-card-excerpt { display: none; }
.fkm-featured-side .fkm-card-body { padding: 14px 16px; }
.fkm-featured-side .fkm-card-title { font-size: 1.02rem; }

.fkm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; align-items: start; }
.fkm-split .fkm-section-head { display: block; }
.fkm-list .fkm-card--compact:first-child { border-top: 1px solid var(--fkm-line); }

.fkm-disclosure { margin: 24px 0 0; padding: 12px 16px; font-size: .86rem; color: var(--fkm-muted); background: var(--fkm-bg); border-left: 3px solid var(--fkm-gold); border-radius: 0 6px 6px 0; }

/* ---------- Tools band ---------- */
.fkm-tools { padding: clamp(40px, 6vw, 72px) 0; }
.fkm-tools .fkt-section { padding: 8px 0 32px; }
.fkm-toolgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fkm-toolgrid a { display: block; height: 100%; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--fkm-radius); text-decoration: none; background: rgba(255, 255, 255, .03); transition: border-color .15s, background-color .15s; }
.fkm-toolgrid a:hover { border-color: var(--fkm-gold); background: rgba(255, 255, 255, .06); }
.fkm-toolgrid strong { display: block; color: #fff; margin-bottom: 4px; }
.fkm-toolgrid span { color: var(--fkm-on-navy-muted); font-size: .9rem; line-height: 1.45; }

/* ---------- FAQ ---------- */
.fkm-faq details { background: var(--fkm-bg); border: 1px solid var(--fkm-line); border-radius: var(--fkm-radius); margin-bottom: 10px; }
.fkm-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--fkm-navy); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.fkm-faq summary::-webkit-details-marker { display: none; }
.fkm-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--fkm-green-text); }
.fkm-faq details[open] summary::after { content: "\2212"; }
.fkm-faq details p { margin: 0; padding: 0 20px 18px; color: var(--fkm-text); }

/* ---------- Trust ---------- */
.fkm-trust-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fkm-trust-links a { display: block; height: 100%; padding: 16px; background: var(--fkm-white); border: 1px solid var(--fkm-line); border-top: 3px solid var(--fkm-green); border-radius: var(--fkm-radius); text-decoration: none; }
.fkm-trust-links strong { display: block; color: var(--fkm-navy); margin-bottom: 4px; }
.fkm-trust-links span { color: var(--fkm-muted); font-size: .88rem; line-height: 1.45; }
.fkm-trust-links a:hover strong { color: var(--fkm-green-text); text-decoration: underline; }
.fkm-trust-note { margin: 20px 0 0; font-size: .85rem; color: var(--fkm-muted); }

/* ---------- Single article ---------- */
.fkm-article { padding-bottom: 32px; }
.fkm-article-head { padding-top: 22px; padding-bottom: 8px; }
.fkm-article-title { font-size: clamp(1.9rem, 4.2vw, 2.7rem); line-height: 1.14; font-weight: 800; letter-spacing: -.015em; margin: 10px 0 14px; color: var(--fkm-navy); }
.fkm-article-dek { font-size: 1.16rem; line-height: 1.55; color: var(--fkm-muted); margin: 0 0 16px; }
.fkm-byline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 12px 0; border-top: 1px solid var(--fkm-line); border-bottom: 1px solid var(--fkm-line); font-size: .88rem; color: var(--fkm-muted); }
.fkm-byline a { color: var(--fkm-text); font-weight: 600; text-decoration: none; }
.fkm-byline a:hover { text-decoration: underline; }
.fkm-article-figure { margin: 24px auto; }
.fkm-article-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--fkm-radius); }
.fkm-article-figure figcaption { font-size: .82rem; color: var(--fkm-muted); margin-top: 8px; }
.fkm-article-body { padding-top: 20px; }
.fkm-affnote { font-size: .88rem; line-height: 1.5; color: var(--fkm-text); background: #FFF8E6; border: 1px solid #EED9A4; border-radius: var(--fkm-radius); padding: 12px 16px; margin: 0 0 24px; }
.fkm-affnote a { color: var(--fkm-green-text); }
.fkm-prose { font-size: 1.075rem; line-height: 1.75; color: var(--fkm-text); }
.fkm-prose a { color: var(--fkm-green-text); text-decoration: underline; text-underline-offset: 2px; }
.fkm-editorial-note { margin: 36px 0 0; padding: 18px 20px; background: var(--fkm-white); border: 1px solid var(--fkm-line); border-left: 4px solid var(--fkm-green); border-radius: var(--fkm-radius); font-size: .92rem; }
.fkm-editorial-note p { margin: 0; }
.fkm-editorial-note a { color: var(--fkm-green-text); }
.fkm-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.fkm-postnav a { display: block; padding: 14px 16px; border: 1px solid var(--fkm-line); border-radius: var(--fkm-radius); background: var(--fkm-white); color: var(--fkm-navy); font-weight: 600; text-decoration: none; line-height: 1.35; }
.fkm-postnav a:hover { border-color: var(--fkm-green); color: var(--fkm-green-text); }
.fkm-postnav span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fkm-muted); margin-bottom: 4px; }
.fkm-postnav-next { text-align: right; grid-column: 2; }
.fkm-nextstep { padding: 28px 0; }
.fkm-nextstep-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fkm-nextstep p { margin: 0; max-width: 680px; color: var(--fkm-on-navy-muted); }
.fkm-nextstep strong { color: #fff; }

/* Anchor targets (in-article TOCs) clear the sticky header */
body.fkm [id] { scroll-margin-top: calc(var(--fkm-header-h) + 16px); }

/* ---------- Embedded article stylesheet (.fkg) on light pages ----------
   Every post embeds a stylesheet written for the old dark background
   (white headings, near-white body text). These rules out-specify it and
   re-assert light text only inside the components that stay dark. */
body.fkm .fkg { font-family: inherit; font-size: inherit; }
body.fkm-light .fkg { color: var(--fkm-text); }
body.fkm-light .fkg h2 { color: var(--fkm-navy); font-size: 1.65rem; letter-spacing: -.01em; }
body.fkm-light .fkg h3 { color: var(--fkm-green-text); }
body.fkm-light .fkg > ul, body.fkm-light .fkg > ol, body.fkm-light .fkg > ul > li, body.fkm-light .fkg > ol > li, body.fkm-light .fkg-steps li { color: var(--fkm-text); }
body.fkm-light .fkg-steps li strong { color: var(--fkm-navy); }
body.fkm-light .fkg a { color: var(--fkm-green-text); }
body.fkm-light .fkg-disc { color: var(--fkm-muted); }
body.fkm-light .fkg-box-body h3, body.fkm-light .fkg-toc h2 { color: var(--fkm-navy); }
body.fkm-light .fkg-next a { color: #12263f; }
body.fkm-light .fkg .fkg-btn { color: var(--fkm-navy) !important; }
/* components that remain dark */
body.fkm-light .fkg-hero, body.fkm-light .fkg-box-top, body.fkm-light .fkg-check, body.fkm-light .fkg blockquote, body.fkm-light .fkg th { color: #fff; }
body.fkm-light .fkg-check h2, body.fkm-light .fkg-box-top h3 { color: #fff; }
body.fkm-light .fkg-check li { color: #E8EEF6; }
body.fkm-light .fkg-hero a, body.fkm-light .fkg-check a, body.fkm-light .fkg blockquote a { color: var(--fkm-gold); }
body.fkm-light .fkg-hero { border-radius: var(--fkm-radius); }
/* Two grey labels in the embedded CSS (#5d7891 on #f4f7fb) measure 4.29:1; darken to pass 4.5:1 */
body.fkm-light .fkg-spec span, body.fkm-light .fkg-next a span { color: #4A6177; }
/* Badges and spec labels render at 11.5px in the embedded CSS; keep body-adjacent text at 12px+ */
body.fkm .fkg-award, body.fkm .fkg-badge, body.fkm .fkg-spec span { font-size: max(.78rem, 12px); }
/* Authoring notes ("Image suggestion…") were never meant to be visible */
body.fkm .fkg-img { display: none; }

/* ---------- Listings ---------- */
.fkm-listing { padding-bottom: 64px; }
.fkm-listing-head { padding: 28px 0 32px; max-width: 760px; }
.fkm-listing-title { font-family: var(--fkm-display); font-weight: 400; font-size: clamp(2.6rem, 5.5vw, 3.8rem); line-height: 1; letter-spacing: .01em; margin: 0; color: var(--fkm-navy); }
.fkm-listing-desc { color: var(--fkm-muted); font-size: 1.05rem; margin-top: 12px; }
.fkm-listing-desc p { margin: 0 0 .6em; }
.fkm-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.fkm-chips a { display: inline-block; padding: 7px 13px; border: 1px solid var(--fkm-line); border-radius: 99px; background: #fff; color: var(--fkm-text); font-size: .88rem; font-weight: 600; text-decoration: none; }
.fkm-chips a:hover { border-color: var(--fkm-green); color: var(--fkm-green-text); }
.fkm-chips span { color: var(--fkm-muted); font-weight: 400; }
.fkm-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 36px; }
.fkm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--fkm-line); border-radius: 6px; background: #fff; color: var(--fkm-navy); font-weight: 600; text-decoration: none; }
.fkm-pagination .page-numbers.current { background: var(--fkm-navy); border-color: var(--fkm-navy); color: #fff; }
.fkm-pagination a.page-numbers:hover { border-color: var(--fkm-green); color: var(--fkm-green-text); }
.fkm-empty { padding: 40px; text-align: center; background: #fff; border: 1px solid var(--fkm-line); border-radius: var(--fkm-radius); }

/* ---------- Plain pages (About, legal) and 404 on the light scope ---------- */
body.fkm-light .fkt-page { display: block; max-width: calc(var(--fkm-measure) + 40px); padding: 24px 20px 64px; }
body.fkm-light .fkt-page-title { font-size: clamp(2rem, 4.4vw, 2.8rem); font-weight: 800; letter-spacing: -.015em; color: var(--fkm-navy); }
body.fkm-light .fkt-prose a { color: var(--fkm-green-text); }

/* ---------- Footer ---------- */
.fkm-footer { margin-top: 0; }
.fkm-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 36px; }
.fkm-footer-about p { color: var(--fkm-on-navy-muted); font-size: .92rem; margin: 0 0 12px; max-width: 380px; }
.fkm-footer-about .fkm-brand-name { font-size: 1.6rem; color: #fff; }
.fkm-footer-aa { color: var(--fkm-gold) !important; font-weight: 600; }
.fkm-footer-col h2 { font-family: var(--fkm-sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fkm-gold); margin: 4px 0 12px; }
.fkm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.fkm-footer-col a { display: inline-block; padding: 5px 0; color: var(--fkm-on-navy-muted); font-size: .92rem; text-decoration: none; }
.fkm-footer-col a:hover { color: #fff; text-decoration: underline; }
.fkm-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; }
.fkm-footer-bottom small { color: var(--fkm-on-navy-muted); font-size: .82rem; }

/* ---------- Parent components: remove fabricated scores ----------
   The parent's product cards render 1–10 "durability/performance" bars and
   five-star ratings that were never measured. */
body.fkm .fkt-product-meters, body.fkm .fkt-stars { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .fkm-trust-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .fkm-hero-inner, .fkm-featured, .fkm-split { grid-template-columns: 1fr; }
    .fkm-grid--3, .fkm-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fkm-footer-grid { grid-template-columns: 1fr 1fr; }
    .fkm-footer-about { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .fkm-grid--3, .fkm-toolgrid, .fkm-trust-links { grid-template-columns: 1fr; }
    .fkm-section-head { grid-template-columns: 1fr; }
    .fkm-more { grid-column: 1; grid-row: auto; }
    .fkm-featured-side .fkm-card { flex-direction: column; }
    .fkm-featured-side .fkm-card-media { flex-basis: auto; aspect-ratio: 3 / 2; }
    .fkm-hero-ctas .fkm-btn { flex: 1 1 100%; }
    .fkm-postnav { grid-template-columns: 1fr; }
    .fkm-postnav-next { grid-column: 1; text-align: left; }
    .fkm-footer-grid { grid-template-columns: 1fr; }
    .fkm-brand-tag { display: none; }
    .fkm-crumbs [aria-current] { max-width: 28ch; }
    body.fkm-light .fkg h2 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fkm-card-media img, .fkm-menu .sub-menu, .fkm-btn { transition: none; }
}
@media print {
    .fkm-header, .fkm-footer, .fkm-nextstep, .fkm-postnav, .fkm-section--tint { display: none; }
}

/* ---------- Tool page header (H1) ---------- */
.fkm-toolhead { background: var(--fkm-navy); border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 22px; }
.fkm-toolhead-title { font-family: var(--fkm-display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.2rem); line-height: 1; letter-spacing: .01em; color: #fff; margin: 10px 0 6px; }
.fkm-toolhead-note { margin: 0; font-size: .88rem; color: var(--fkm-on-navy-muted); }
body.fkm-dark .fkm-toolhead + * .fkt-section:first-child, body.fkm-dark .fkm-toolhead ~ .fkt-section:first-of-type { padding-top: 40px; }

/* ---------- Photo credits ---------- */
.fkm-article-figure figcaption a { color: var(--fkm-muted); text-decoration: underline; }