/* ==========================================================================
   /brand-kit — brand resource centre. Uses main.css tokens only.
   ========================================================================== */

/* Hero */
.bk-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: var(--container); }
.bk-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.bk-hero__actions .btn { display: inline-flex; align-items: center; gap: .55rem; }
.bk-hero__size { font-size: .78rem; opacity: .85; font-weight: 500; }
.bk-hero__updated { margin: 1.1rem 0 0; font-size: .85rem; color: rgba(248, 243, 230, .7); }
.bk-hero__logo img { width: clamp(220px, 26vw, 340px); height: auto; display: block; }
@media (max-width: 880px) {
    .bk-hero__inner { grid-template-columns: 1fr; }
    .bk-hero__logo { display: none; }
}

/* Sticky in-page navigation */
.bk-toc {
    position: sticky; top: var(--header-h); z-index: 20;
    background: rgba(252, 250, 242, .94);
    backdrop-filter: blur(8px);
    border-bottom: var(--border);
}
.bk-toc ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: .55rem 0; overflow-x: auto; scrollbar-width: none; }
.bk-toc ul::-webkit-scrollbar { display: none; }
.bk-toc a { display: block; white-space: nowrap; padding: .45rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.bk-toc a:hover { background: var(--primary-soft); color: var(--primary); }
[id="overview"], [id="logos"], [id="usage"], [id="colours"], [id="typography"], [id="elements"], [id="social"], [id="downloads"], [id="faq"] { scroll-margin-top: calc(var(--header-h) + 3.5rem); }

.bk-sub { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink); margin: 2rem 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.bk-sub--spaced { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.bk-sub--ok svg { color: var(--primary); }
.bk-sub--no svg { color: var(--danger); }
.bk-narrow { max-width: 46rem; }
.bk-note { font-size: .88rem; color: var(--muted); margin-top: 1.2rem; }

/* Overview */
.bk-overview { align-items: start; }
.bk-facts { margin: 1.6rem 0 0; display: grid; gap: .9rem; }
.bk-facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-bottom: .9rem; border-bottom: var(--border); }
.bk-facts dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; padding-top: .15rem; }
.bk-facts dd { margin: 0; color: var(--ink-2); }
.bk-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.bk-values h4 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--primary); }
.bk-values p { margin: 0; color: var(--ink-3); }
@media (max-width: 520px) { .bk-facts div { grid-template-columns: 1fr; gap: .2rem; } }

/* Logo cards */
.bk-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 1000px) { .bk-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .bk-logos { grid-template-columns: 1fr; } }
.bk-logo { padding: 1rem 1rem 1.3rem; }
.bk-logo:hover { transform: none; }
.bk-logo__stage {
    display: grid; place-items: center; aspect-ratio: 16 / 10;
    background: #fff; border-radius: var(--radius-sm); border: var(--border);
    padding: 1.2rem;
}
.bk-logo__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.bk-logo__stage--primary img, .bk-logo__stage--horizontal img, .bk-logo__stage--wordmark img { width: 92%; }
.bk-logo__stage--vertical img, .bk-logo__stage--vertical-compact img { height: 88%; }
.bk-logo__stage--icon img { height: 74%; }
.bk-logo__name { font-family: var(--font-display); font-size: 1.2rem; margin: 1rem .3rem .25rem; color: var(--ink); }
.bk-logo__text { margin: 0 .3rem .9rem; font-size: .92rem; color: var(--ink-3); }
.bk-cw { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.bk-cw li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .42rem .3rem; border-top: var(--border); font-size: .86rem; }
.bk-cw__chip { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--chip-bg); border: var(--border); }
.bk-cw__chip img { width: 20px; height: 20px; }
.bk-cw__name { color: var(--ink-2); }
.bk-cw__links { display: flex; gap: .3rem; }
.bk-cw__links a, .bk-dl {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
    padding: .28rem .55rem; border-radius: 6px;
    color: var(--primary); background: var(--primary-soft); text-decoration: none;
}
.bk-cw__links a:hover, .bk-dl:hover { background: var(--primary); color: var(--paper); }

/* Clear-space diagram */
.bk-space { align-items: center; }
.bk-diagram { margin: 0; background: #fff; border: var(--border); border-radius: var(--radius); padding: 1rem; }
.bk-diagram svg { width: 100%; height: auto; display: block; }
.bk-diagram__zone { fill: rgba(168, 122, 38, .08); stroke: var(--gold-bright); stroke-width: 3; stroke-dasharray: 14 10; }
.bk-diagram__art { fill: none; stroke: rgba(10, 79, 60, .45); stroke-width: 2; stroke-dasharray: 6 6; }
.bk-diagram__measure line { stroke: var(--gold); stroke-width: 3; }
.bk-diagram__measure text, .bk-diagram__x text { font-family: var(--font-mono); font-size: 30px; fill: var(--gold); font-weight: 500; }
.bk-diagram__x circle { fill: none; stroke: var(--gold); stroke-width: 3; }
.bk-diagram figcaption { font-size: .84rem; color: var(--muted); text-align: center; margin-top: .6rem; }

/* Tables */
.bk-table-wrap { position: relative; overflow-x: auto; border-radius: var(--radius); border: var(--border); background: var(--surface); }
.bk-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bk-table th, .bk-table td { text-align: start; padding: .7rem .9rem; border-bottom: var(--border); vertical-align: middle; }
.bk-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; background: var(--surface-2); }
.bk-table tbody tr:last-child > * { border-bottom: 0; }
.bk-table tbody th { font-weight: 600; color: var(--ink); }
.bk-space .bk-table { background: var(--surface); border: var(--border); border-radius: var(--radius-sm); overflow: hidden; }

/* Colour versions strip */
.bk-versions { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.bk-versions li { background: var(--stage); border-radius: var(--radius-sm); border: var(--border); padding: 1.4rem 1rem .8rem; display: grid; gap: .9rem; justify-items: center; }
.bk-versions img { width: 100%; height: auto; }
.bk-versions span { text-align: center; font-size: .78rem; font-weight: 500; padding: .2rem .55rem; border-radius: 999px; background: rgba(252, 250, 242, .92); color: var(--ink-2); }
@media (max-width: 980px) { .bk-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Do / Don't */
.bk-dodont { margin-top: clamp(2.4rem, 5vw, 3.4rem); align-items: start; }
.bk-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.bk-rule p { margin: .5rem .1rem 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.bk-rule__stage {
    position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); border: var(--border);
    background: var(--stage, #fff); display: grid; place-items: center; overflow: hidden; padding: .8rem;
}
.bk-rule__img { width: 82%; height: auto; }
.bk-rule__img--icon { width: 30%; height: auto; }
.bk-rule__stage::after {
    content: ""; position: absolute; inset-block-start: .45rem; inset-inline-end: .45rem;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.bk-rule--no .bk-rule__stage::after {
    background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.bk-rule--no .bk-rule__stage { background: #fff; }
.bk-rule__stage--stretch .bk-rule__img  { transform: scaleX(1.35) scaleY(.7); }
.bk-rule__stage--rotate .bk-rule__img   { transform: rotate(-14deg) skewX(-10deg); width: 70%; }
.bk-rule__stage--recolour .bk-rule__img { filter: hue-rotate(150deg) saturate(1.8); }
.bk-rule__stage--effects .bk-rule__img  { filter: drop-shadow(5px 6px 0 rgba(13, 23, 20, .45)) drop-shadow(0 0 8px rgba(168, 122, 38, .9)); }
.bk-rule--no .bk-rule__stage--contrast  { background: var(--primary); }
.bk-rule--no .bk-rule__stage--busy {
    background:
        repeating-linear-gradient(45deg, rgba(168, 122, 38, .55) 0 10px, transparent 10px 20px),
        repeating-linear-gradient(-45deg, rgba(10, 79, 60, .45) 0 10px, #e9dcc0 10px 20px);
}
.bk-retype { font-family: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif; font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--primary); letter-spacing: .02em; }
.bk-rearrange { display: flex; align-items: center; gap: 4%; width: 86%; }
.bk-rearrange img:first-child { width: 72%; height: auto; }
.bk-rearrange img:last-child { width: 14%; height: auto; transform: translateY(-40%); }
@media (max-width: 680px) { .bk-rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .bk-rules { grid-template-columns: 1fr; } }

/* Backgrounds & contrast */
.bk-bgs { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.bk-bgs li { background: var(--stage); border-radius: var(--radius-sm); border: var(--border); padding: 1.6rem 1rem .8rem; display: grid; gap: 1rem; justify-items: center; }
.bk-bgs img { width: 88%; height: auto; }
.bk-bgs__tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; background: rgba(252, 250, 242, .95); }
.bk-bgs .is-ok .bk-bgs__tag { color: var(--primary); }
.bk-bgs .is-no .bk-bgs__tag { color: var(--danger); }
.bk-bgs__tag .mono { font-weight: 400; color: var(--muted); }
@media (max-width: 880px) { .bk-bgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Palette */
.bk-ratio { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-bottom: .6rem; font-size: 0; }
.bk-ratio span:nth-child(1) { background: var(--bg); box-shadow: inset 0 0 0 1px rgba(13, 23, 20, .08); }
.bk-ratio span:nth-child(2) { background: var(--primary); }
.bk-ratio span:nth-child(3) { background: var(--gold-bright); }
.bk-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 980px) { .bk-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .bk-swatches { grid-template-columns: 1fr; } }
.bk-swatch { background: var(--surface); border: var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.bk-swatch__chip { height: 110px; display: flex; align-items: flex-end; padding: .8rem 1rem; border-bottom: var(--border); }
.bk-swatches--core .bk-swatch__chip { height: 150px; }
.bk-swatch__chip span { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.bk-swatch__chip.is-dark span { color: var(--paper); }
.bk-swatch__vals { margin: 0; padding: .7rem 1rem 0; display: grid; gap: .15rem; }
.bk-swatch__vals div { display: grid; grid-template-columns: 3.4rem 1fr; align-items: center; }
.bk-swatch__vals dt { font-size: .7rem; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.bk-swatch__vals dd { margin: 0; }
.bk-copy {
    font-size: .84rem; color: var(--ink); background: none; border: 0; padding: .2rem .35rem; margin-inline-start: -.35rem;
    border-radius: 5px; cursor: copy; text-align: start;
}
.bk-copy:hover { background: var(--primary-soft); color: var(--primary); }
.bk-copy.is-copied { background: var(--primary); color: var(--paper); }
.bk-swatch__role { margin: .5rem 1rem 1rem; font-size: .82rem; color: var(--ink-3); line-height: 1.45; }
.bk-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bk-files li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: .9rem; color: var(--ink-3); }
.bk-files a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }

/* Typography */
.bk-type { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 980px) { .bk-type { grid-template-columns: 1fr; } }
.bk-font:hover { transform: none; }
.bk-font__name { font-size: 2rem; margin: .2rem 0 .3rem; color: var(--ink); font-weight: 600; line-height: 1.1; }
.bk-font--mono .bk-font__name { font-size: 1.6rem; }
.bk-font__glyphs { font-size: 1.35rem; color: var(--primary); margin: 0 0 .9rem; letter-spacing: .02em; }
.bk-font__sample { font-size: 1.08rem; color: var(--ink-2); margin: 0 0 1rem; padding: .8rem 0; border-block: var(--border); }
.bk-font--fraunces .bk-font__sample { font-size: 1.4rem; font-style: italic; line-height: 1.3; }
.bk-font--mono .bk-font__sample { font-size: .95rem; }
.bk-font__use { font-size: .9rem; color: var(--ink-3); margin: 0 0 .6rem; }
.bk-font__weights { font-size: .78rem; color: var(--muted); margin: 0 0 .9rem; }
.bk-font__link { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; }

/* Visual elements */
.bk-elements { list-style: none; padding: 0; margin: 0; }
.bk-elements .card:hover { transform: none; }
.bk-el { height: 88px; border-radius: var(--radius-sm); background: var(--paper); display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 1rem; color: var(--primary); overflow: hidden; position: relative; }
.bk-el__pattern { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 63.47,17.47 82.53,17.47 82.53,36.53 96,50 82.53,63.47 82.53,82.53 63.47,82.53 50,96 36.53,82.53 17.47,82.53 17.47,63.47 4,50 17.47,36.53 17.47,17.47 36.53,17.47' fill='none' stroke='%230a4f3c' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E"); background-size: 34px 34px; }
.bk-el__shape { width: 64px; height: 46px; border-radius: 14px; background: var(--surface); border: var(--border); box-shadow: var(--shadow-md); }
.bk-el__rule { width: 52px; height: 2px; background: var(--gold-bright); }
.bk-el__title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 .4rem; color: var(--ink); }
.bk-elements p { margin: 0; font-size: .9rem; color: var(--ink-3); }

/* Social table */
.bk-social__asset { display: inline-flex; align-items: center; gap: .7rem; }
.bk-social__thumb { height: 40px; width: auto; max-width: 140px; border-radius: 4px; border: var(--border); object-fit: cover; background: #fff; }
.bk-social__thumb.is-round { width: 40px; border-radius: 50%; }
.bk-social th[rowspan] { vertical-align: top; padding-top: 1rem; white-space: nowrap; }
.bk-social td:last-child { text-align: end; }

/* Downloads */
.bk-packages { list-style: none; margin: 0; padding: 0; }
.bk-package { display: flex; flex-direction: column; }
.bk-package:hover { transform: none; }
.bk-package p { color: var(--ink-3); font-size: .92rem; margin: .3rem 0 1.1rem; flex: 1; }
.bk-package .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; }
.bk-package__title { font-family: var(--font-display); font-size: 1.2rem; margin: 0; color: var(--ink); }
.bk-package--all { background: linear-gradient(160deg, var(--surface), var(--primary-soft)); border-color: rgba(10, 79, 60, .25); }
.bk-guidelines { margin-top: 1.2rem; }
.bk-guidelines a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.bk-terms { margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--paper); border: var(--border); border-inline-start: 3px solid var(--gold-bright); }
.bk-terms .bk-sub { margin-top: 0; }
.bk-terms p { margin: 0; color: var(--ink-2); }
.bk-faq { margin-top: 1.6rem; }

@media (prefers-reduced-motion: reduce) { .bk-copy { transition: none; } }