/* ============================================================================
   KNOWLEDGE CENTRE
   ----------------------------------------------------------------------------
   Loaded only on /knowledge-centre. Self-contained so it cannot affect the
   marketplace, and namespaced under .kc so nothing here leaks into tl.css.

   THE PROBLEM THIS SOLVES
   An article rendered in the listing template reads as a product: a card with an
   image, a badge, a price and an Enquire button. "Why Social Media Should Be a
   Business Priority" arrived on site priced Price on Application. Nobody enquires
   about a blog post.

   So the fix is not cosmetic. Cards, badges and prices are the vernacular of
   shopping; a reader recognises them instantly and reads the page as a thing for
   sale. Reading has its own vernacular — a measure you can follow, a serif at a
   size meant for prose, a headline that behaves like a headline, and restraint
   with images. This stylesheet commits to the second one.

   DECISIONS
   Body face is a system serif stack. Not nostalgia: it costs zero network
   requests (the site already loads seven third-party origins), it renders long
   prose better than Inter at 19px, and it makes the Knowledge Centre feel like a
   different room from the marketplace without a rebrand.

   Gold is a rule and a marker, never body text. Measured 2.10:1 on white — it
   fails AA badly for text. #8C7424 is the darkest gold at the same hue that
   passes (4.53:1) and is used for labels and links; #D4AF37 stays for hairlines,
   spine fills and markers, where contrast rules do not apply.

   THE SIGNATURE
   The jurisdiction spine: a fixed vertical rail down the left of every article
   carrying the content type, the jurisdictions the piece touches, and reading
   progress. Cross-border work is defined by which jurisdictions it touches, so
   the rail encodes something true about the content rather than decorating it.
   ========================================================================== */

.kc {
    /* Palette — extends the brand rather than replacing it */
    --kc-ink:        #1A1A1D;   /* headings, body at full strength */
    --kc-slate:      #4A4A4A;   /* body prose — 8.86:1 on paper */
    --kc-quiet:      #6B6B6B;   /* metadata */
    --kc-paper:      #FBFAF7;   /* warmer and lighter than marketplace cream, so
                                 the two zones read as different rooms */
    --kc-mist:       #E7E3D8;   /* hairlines */
    --kc-gold:       #D4AF37;   /* rules, markers, spine fill — never text */
    --kc-gold-deep:  #8C7424;   /* labels and links on light — AA at 4.53:1 */

    --kc-measure:    68ch;      /* the line length prose is actually readable at */
    --kc-rail:       clamp(0px, 6vw, 96px);
    --kc-spine-w:    6.5rem;    /* wide enough for "United Kingdom" on one or two lines */

    --kc-display: 'Manrope', system-ui, sans-serif;
    --kc-body: 'Iowan Old Style', 'Charter', 'Bitstream Charter',
    'Sitka Text', Cambria, Georgia, serif;
    --kc-utility: 'Inter', system-ui, sans-serif;

    background: var(--kc-paper);
    color: var(--kc-slate);
}

/* ---- Type scale -----------------------------------------------------------
   Four sizes, not ten. Editorial pages need a clear hierarchy more than a
   granular one. */
.kc h1, .kc h2, .kc h3 { font-family: var(--kc-display); color: var(--kc-ink); }

.kc-hed        { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06;
    letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
.kc-hed--lead  { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12; }
.kc-hed--row   { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.25;
    font-weight: 700; letter-spacing: -.012em; }
.kc-sub        { font-family: var(--kc-body); font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.5; color: var(--kc-quiet); max-width: 58ch; }

/* Type label. Deliberately typographic, not a pill — a pill is a badge, and a
   badge is what a product wears. */
.kc-kicker {
    font-family: var(--kc-utility);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--kc-gold-deep);
    display: inline-flex; align-items: center; gap: .55rem;
}
.kc-kicker::before {
    content: ''; width: 1.6rem; height: 2px;
    background: var(--kc-gold); flex: none;
}
.kc-meta {
    font-family: var(--kc-utility); font-size: .8rem;
    color: var(--kc-quiet); letter-spacing: .01em;
}

/* ---- Masthead ------------------------------------------------------------- */
.kc-masthead { padding: clamp(3rem, 8vw, 6rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.kc-masthead .kc-hed { max-width: 18ch; }
.kc-masthead-rule {
    height: 3px; background: var(--kc-ink);
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}
.kc-masthead-rule::after {
    content: ''; display: block; width: 22%; height: 3px;
    background: var(--kc-gold); transform: translateY(0);
}

/* ---- Filter chips --------------------------------------------------------- */
.kc-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; }
.kc-chip {
    font-family: var(--kc-utility); font-size: .82rem; font-weight: 600;
    padding: .4rem .9rem; border: 1px solid var(--kc-mist);
    border-radius: 100px; color: var(--kc-slate);
    background: transparent; text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}
.kc-chip:hover { border-color: var(--kc-gold); color: var(--kc-ink); }
.kc-chip[aria-current='true'] {
    background: var(--kc-ink); border-color: var(--kc-ink); color: var(--kc-paper);
}
.kc-chip-count { color: var(--kc-quiet); margin-left: .35rem; }
.kc-chip[aria-current='true'] .kc-chip-count { color: rgba(251,250,247,.6); }

/* ---- Lead + briefing ------------------------------------------------------
   One story gets the image. Everything else earns attention on its headline,
   which is how a reader decides what to read. */
.kc-top {
    display: grid; gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: 1fr;
    padding: clamp(2rem, 5vw, 3rem) 0;
    border-top: 1px solid var(--kc-mist);
}
@media (min-width: 992px) { .kc-top { grid-template-columns: 1.65fr 1fr; } }

.kc-lead-media {
    display: block; overflow: hidden; margin-bottom: 1.5rem;
    background: var(--kc-mist); aspect-ratio: 16 / 9;
}
.kc-lead-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.kc-lead:hover .kc-lead-media img { transform: scale(1.03); }
.kc-lead a { color: inherit; text-decoration: none; }
.kc-lead a:hover .kc-hed--lead { text-decoration: underline;
    text-decoration-color: var(--kc-gold); text-underline-offset: 5px;
    text-decoration-thickness: 2px; }

.kc-briefing { border-left: 1px solid var(--kc-mist); padding-left: clamp(1rem, 3vw, 2rem); }
@media (max-width: 991px) { .kc-briefing { border-left: 0; padding-left: 0; } }
.kc-briefing-title {
    font-family: var(--kc-utility); font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--kc-ink);
    padding-bottom: .75rem; border-bottom: 2px solid var(--kc-ink); margin-bottom: 1.25rem;
}
.kc-brief-item { padding: .95rem 0; border-bottom: 1px solid var(--kc-mist); }
.kc-brief-item:last-child { border-bottom: 0; }
.kc-brief-item a {
    font-family: var(--kc-display); font-weight: 700; font-size: 1rem;
    line-height: 1.3; color: var(--kc-ink); text-decoration: none;
    display: block; margin: .3rem 0 .35rem;
}
.kc-brief-item a:hover { color: var(--kc-gold-deep); }

/* ---- Reading list ---------------------------------------------------------
   Rows, not cards. A card with an image and a badge is a product; a row with a
   label and a headline is something to read. This is the whole point. */
.kc-list { border-top: 2px solid var(--kc-ink); }
.kc-row {
    display: grid; gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: 1fr;
    padding: clamp(1.4rem, 3vw, 2rem) 0;
    border-bottom: 1px solid var(--kc-mist);
}
@media (min-width: 768px) {
    .kc-row { grid-template-columns: 7rem 1fr; align-items: start; }
    .kc-row--media { grid-template-columns: 7rem 1fr 12rem; }
}
.kc-row-rail { font-family: var(--kc-utility); }
.kc-row-body a { color: inherit; text-decoration: none; }
.kc-row-body a:hover .kc-hed--row {
    text-decoration: underline; text-decoration-color: var(--kc-gold);
    text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.kc-dek {
    font-family: var(--kc-body); font-size: 1rem; line-height: 1.55;
    color: var(--kc-slate); margin: .5rem 0 .6rem; max-width: 62ch;
}
.kc-row-media { overflow: hidden; background: var(--kc-mist); aspect-ratio: 4 / 3; }
.kc-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Jurisdiction spine — the signature -----------------------------------
   Fixed rail carrying content type, jurisdictions touched, and reading progress.
   Hidden below 1200px, where the width is better spent on the measure. */
.kc-article { position: relative; }
.kc-spine {
    position: fixed; left: max(1.5rem, calc(50vw - 47rem)); top: 50%;
    transform: translateY(-50%);
    width: var(--kc-spine-w); display: none; z-index: 3;
    font-family: var(--kc-utility);
}
/* Needs a wider viewport now that the rail itself is wider — below this the space
   is better spent on the measure than on a margin ornament. */
@media (min-width: 1280px) { .kc-spine { display: block; } }

.kc-spine-type {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: .68rem; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--kc-gold-deep);
    margin-bottom: 1rem;
}
.kc-spine-track {
    width: 2px; height: 9rem; background: var(--kc-mist);
    margin: 0 0 1rem 2px; position: relative; overflow: hidden;
}
.kc-spine-fill {
    position: absolute; inset: 0 0 auto 0; height: 0;
    background: var(--kc-gold); transition: height .1s linear;
}
.kc-spine-juris { display: flex; flex-direction: column; gap: .4rem; }
.kc-spine-juris span {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; color: var(--kc-quiet);
    /* Tighter tracking and a real line-height, so a two-word jurisdiction wraps
       cleanly instead of running out of the rail. */
    letter-spacing: .06em; line-height: 1.35;
    overflow-wrap: break-word; hyphens: auto;
}
.kc-spine-iso {
    color: var(--kc-gold-deep);
    letter-spacing: .16em;
}
.kc-spine-name { max-width: 100%; }

/* ---- Article body ---------------------------------------------------------
   19px serif on a 68ch measure. Not a style preference — it is the range long
   prose is actually read at, and the marketplace's 16px sans is not. */
.kc-body { font-family: var(--kc-body); max-width: var(--kc-measure); }
.kc-body p {
    font-size: 1.1875rem; line-height: 1.72; color: var(--kc-slate);
    margin: 0 0 1.45em;
}
.kc-body > p:first-of-type::first-letter {
    float: left; font-family: var(--kc-display); font-weight: 800;
    font-size: 3.9em; line-height: .82; padding: .06em .09em 0 0;
    color: var(--kc-ink);
}
.kc-body h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2;
    margin: 2.4rem 0 .9rem; letter-spacing: -.015em;
}
.kc-body a { color: var(--kc-gold-deep); text-decoration: underline;
    text-underline-offset: 3px; }
.kc-body a:hover { color: var(--kc-ink); }

/* Elements introduced when an article body is authored as HTML (headings below h2, lists,
   inline emphasis and editorial callouts). Styled to the same measure and rhythm as the
   paragraphs above so an imported HTML article reads as one typeset piece. */
.kc-body h3 {
    font-family: var(--kc-display); font-weight: 800;
    font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25;
    margin: 2rem 0 .7rem; letter-spacing: -.01em; color: var(--kc-ink);
}
.kc-body h4 {
    font-weight: 700; font-size: 1.1rem; line-height: 1.3;
    margin: 1.6rem 0 .5rem; color: var(--kc-ink);
}
.kc-body strong, .kc-body b { font-weight: 700; color: var(--kc-ink); }
.kc-body em, .kc-body i { font-style: italic; }
.kc-body ul, .kc-body ol {
    font-size: 1.1875rem; line-height: 1.7; color: var(--kc-slate);
    margin: 0 0 1.45em; padding-left: 1.4em;
}
.kc-body li { margin: 0 0 .5em; padding-left: .2em; }
.kc-body li::marker { color: var(--kc-gold-deep); }
.kc-body hr { border: none; border-top: 1px solid var(--kc-line, #E3E7EE); margin: 2.2rem 0; }
/* An editorial callout — the whitelisted <blockquote> from an article body. The pull quote
   (.kc-pull) keeps its own distinct treatment defined elsewhere. */
.kc-body blockquote:not(.kc-pull) {
    margin: 1.8rem 0; padding: 1rem 1.3rem; border-left: 3px solid var(--kc-gold-deep);
    background: rgba(201,162,39,.06); border-radius: 0 8px 8px 0;
    font-size: 1.1rem; line-height: 1.6; color: var(--kc-ink);
}
.kc-body blockquote:not(.kc-pull) p:last-child { margin-bottom: 0; }
/* The drop cap suits a plain-text lead paragraph; when an HTML article opens with a heading
   it would land on a mid-article paragraph, so it is disabled for HTML bodies. */
.kc-body:has(> h2:first-child) > p:first-of-type::first-letter,
.kc-body:has(> h3:first-child) > p:first-of-type::first-letter {
    float: none; font-size: inherit; font-family: inherit; font-weight: inherit;
    padding: 0; color: inherit;
}

.kc-pull {
    font-family: var(--kc-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.32; font-weight: 700; color: var(--kc-ink);
    border-left: 3px solid var(--kc-gold);
    padding-left: clamp(1rem, 2.5vw, 1.6rem);
    margin: 2.2rem 0; max-width: 46ch;
}

/* Key points — a definition list, because these are claims with substance,
   not a feature list with ticks. Ticks are what a product page uses. */
.kc-points { border-top: 1px solid var(--kc-mist); margin: 2.5rem 0; max-width: var(--kc-measure); }
.kc-point {
    display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem;
    padding: 1.1rem 0; border-bottom: 1px solid var(--kc-mist);
}
.kc-point-n {
    font-family: var(--kc-utility); font-size: .78rem; font-weight: 700;
    color: var(--kc-gold-deep); letter-spacing: .06em; padding-top: .28rem;
}
.kc-point p { font-family: var(--kc-body); font-size: 1.05rem;
    line-height: 1.6; margin: 0; }

.kc-figure { margin: 2.2rem 0; }
.kc-figure img { width: 100%; height: auto; display: block; }
.kc-credit {
    font-family: var(--kc-utility); font-size: .74rem; color: var(--kc-quiet);
    padding-top: .5rem; border-top: 1px solid var(--kc-mist); margin-top: .5rem;
}
.kc-credit a { color: var(--kc-quiet); }

.kc-faq { border-top: 1px solid var(--kc-mist); max-width: var(--kc-measure); }
.kc-faq details { border-bottom: 1px solid var(--kc-mist); padding: 1.1rem 0; }
.kc-faq summary {
    font-family: var(--kc-display); font-weight: 700; font-size: 1.05rem;
    color: var(--kc-ink); cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: 1rem;
}
.kc-faq summary::-webkit-details-marker { display: none; }
.kc-faq summary::after { content: '+'; color: var(--kc-gold-deep); font-weight: 400; }
.kc-faq details[open] summary::after { content: '−'; }
.kc-faq p { font-family: var(--kc-body); margin: .8rem 0 0; line-height: 1.65; }

/* ---- Sidebar --------------------------------------------------------------
   Related READING only. An article that ends in four company formations for sale
   is an advert wearing the clothes of a recommendation, and readers can tell. */
.kc-aside-title {
    font-family: var(--kc-utility); font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--kc-ink);
    padding-bottom: .7rem; border-bottom: 2px solid var(--kc-ink); margin-bottom: 1rem;
}
.kc-related a {
    display: block; padding: .85rem 0; border-bottom: 1px solid var(--kc-mist);
    font-family: var(--kc-display); font-weight: 700; font-size: .95rem;
    line-height: 1.32; color: var(--kc-ink); text-decoration: none;
}
.kc-related a:hover { color: var(--kc-gold-deep); }

.kc-advice {
    margin-top: 2rem; padding: 1.6rem; background: var(--kc-ink); color: var(--kc-paper);
}
.kc-advice h3 { font-size: 1.15rem; color: var(--kc-paper); margin: 0 0 .5rem; }
.kc-advice p { font-family: var(--kc-body); font-size: .95rem; line-height: 1.55;
    color: rgba(251,250,247,.82); margin: 0 0 1.1rem; }
.kc-advice .btn { background: var(--kc-gold); color: var(--kc-ink);
    border: 0; font-family: var(--kc-utility); font-weight: 700;
    padding: .7rem 1.4rem; display: inline-block; text-decoration: none; }
.kc-advice .btn:hover { background: #C9A430; color: var(--kc-ink); }

/* ---- Live feed ------------------------------------------------------------ */
.kc-wire { border-top: 2px solid var(--kc-ink); padding-top: 1rem; }
.kc-wire-item { padding: .8rem 0; border-bottom: 1px solid var(--kc-mist); }
.kc-wire-item:last-child { border-bottom: 0; }
.kc-wire-item a { font-family: var(--kc-display); font-weight: 700; font-size: .93rem;
    line-height: 1.3; color: var(--kc-ink); text-decoration: none; display: block; }
.kc-wire-item a:hover { color: var(--kc-gold-deep); }
.kc-wire-src { font-family: var(--kc-utility); font-size: .7rem; color: var(--kc-quiet);
    text-transform: uppercase; letter-spacing: .1em; }

/* ---- Empty state — an invitation, not an apology -------------------------- */
.kc-empty { padding: clamp(3rem, 8vw, 5rem) 0; max-width: 48ch; }
.kc-empty h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.kc-empty p { font-family: var(--kc-body); font-size: 1.05rem; line-height: 1.6; }

/* ---- Quality floor -------------------------------------------------------- */
.kc a:focus-visible,
.kc button:focus-visible,
.kc summary:focus-visible {
    outline: 2px solid var(--kc-gold-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kc *, .kc *::before, .kc *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .kc-lead:hover .kc-lead-media img { transform: none; }
}

@media print {
    .kc-spine, .kc-advice, .kc-filters { display: none; }
    .kc-body { max-width: none; }
}

/* ---- Search bar (search results page) -------------------------------------
   Lives here rather than in nav.css because it belongs to the results page, not
   the header. Same gold rule: a charcoal label on a gold surface, never white —
   white on #D4AF37 measures 2.10:1 and fails AA. */
.kc-searchbar { display: flex; max-width: 640px; margin-top: 1.5rem; }
.kc-searchbar input {
    flex: 1; min-width: 0;
    font-family: var(--kc-utility); font-size: 1rem;
    padding: .85rem 1.1rem;
    border: 1px solid var(--kc-mist); border-right: 0;
    border-radius: 8px 0 0 8px; background: #fff; color: var(--kc-ink);
}
.kc-searchbar input:focus {
    outline: none; border-color: var(--kc-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,.16);
}
.kc-searchbar button {
    flex: none; border: 0; cursor: pointer;
    padding: 0 1.6rem; border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, #D4AF37 0%, #B8902B 100%);
    color: #1A1A1D;
    font-family: var(--kc-utility); font-weight: 700; font-size: .95rem;
}
.kc-searchbar button:hover { filter: brightness(1.06); }

.kc-aside-title .kc-meta { float: right; font-weight: 400; }