/* ==========================================================================
   Site chrome (global header, Build mega menu, mobile menu, footer) — Pen
   redesign. Loaded on every page from layouts/website. Rules are scoped to
   .bk-header / .bk-mega / .bk-mobile / .bk-footer, and fonts use chrome-only
   family names, so page styles (including .ed pages and Connect's .cx) are
   unaffected. The header keeps --site-header-height (76px) so no page offset
   changes.
   ========================================================================== */

@font-face { font-family: "BK Chrome Sans"; src: url("../fonts/Satoshi-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BK Chrome Sans"; src: url("../fonts/Satoshi-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "BK Chrome Sans"; src: url("../fonts/Satoshi-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
/* JetBrains Mono — SIL Open Font License 1.1, see ../fonts/jetbrains-mono/OFL.txt */
@font-face { font-family: "BK Chrome Mono"; src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

.bk-header, .bk-footer {
    --bk-c-paper: #FBFAF8;
    --bk-c-paper-2: #F3F2EE;
    --bk-c-ink: #0C0C0E;
    --bk-c-red: #F92C4D;
    --bk-c-muted: #57554F;
    --bk-c-line: rgba(12, 12, 14, 0.12);
    --bk-c-sans: "BK Chrome Sans", "Satoshi", system-ui, -apple-system, sans-serif;
    --bk-c-mono: "BK Chrome Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --bk-c-ease: cubic-bezier(0.22, 1, 0.36, 1);
    font-family: var(--bk-c-sans);
    color: var(--bk-c-ink);
    -webkit-font-smoothing: antialiased;
}
.bk-header *, .bk-footer * { box-sizing: border-box; }
.bk-header a, .bk-footer a { color: inherit; text-decoration: none; }
.bk-header :focus-visible, .bk-footer :focus-visible { outline: 2px solid var(--bk-c-ink); outline-offset: 3px; }
.bk-header .bk-mono, .bk-footer .bk-mono { font-family: var(--bk-c-mono); font-size: 12px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }
.bk-header ul, .bk-footer ul { list-style: none; margin: 0; padding: 0; }
.bk-header p, .bk-footer p { margin: 0; }
body.menu-open { overflow: hidden; }

/* ── Header bar ──────────────────────────────────────────────────────────── */
/* The hairline is an inset shadow so the bar stays exactly --bk-header-h tall (pages offset by it). */
.bk-header { --bk-header-h: var(--site-header-height, 76px); position: fixed; top: 0; left: 0; z-index: 50; width: 100%; background: var(--bk-c-paper); box-shadow: inset 0 -1px 0 var(--bk-c-line); transition: box-shadow .25s var(--bk-c-ease); }
.bk-header.is-scrolled { box-shadow: inset 0 -1px 0 var(--bk-c-line), 0 10px 30px -18px rgba(12, 12, 14, 0.25); }
.bk-header__bar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--bk-header-h); }
.bk-header__logo { display: flex; align-items: center; color: #14141A; }
.bk-header__logo a { display: inline-flex; }
.bk-header__nav { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 500; }
.bk-header__link { position: relative; padding-block: 6px; transition: opacity .2s var(--bk-c-ease); }
.bk-header__link:hover { opacity: 0.7; }
.bk-header__link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--bk-c-red); }
.bk-header__build { display: flex; align-items: center; gap: 2px; }
.bk-header__chevron { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--bk-c-ink); cursor: pointer; }
.bk-header__chevron svg { transition: transform .2s var(--bk-c-ease); }
.bk-header__chevron svg.is-open { transform: rotate(180deg); color: var(--bk-c-red); }
.bk-header__actions { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.bk-header__signin { font-size: 15px; font-weight: 500; transition: opacity .2s var(--bk-c-ease); }
.bk-header__signin:hover { opacity: 0.7; }
.bk-header a.bk-header__start { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 100px; background: var(--bk-c-ink); color: var(--bk-c-paper); font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color .2s var(--bk-c-ease); }
.bk-header a.bk-header__start:hover { background: #2A2A2E; }
.bk-header__start svg { transition: transform .25s var(--bk-c-ease); }
.bk-header__start:hover svg { transform: translate(2px, -2px); }
.bk-header__burger { display: none; justify-self: end; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.bk-header__burger .hamburger-line { display: block; width: 24px; height: 2px; background: var(--bk-c-ink); transition: transform .3s var(--bk-c-ease), opacity .2s; }
.bk-header__burger.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bk-header__burger.active .hamburger-line:nth-child(2) { opacity: 0; }
.bk-header__burger.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Build mega menu ─────────────────────────────────────────────────────── */
.bk-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; background: var(--bk-c-paper); border-top: 1px solid var(--bk-c-line); border-bottom: 1px solid var(--bk-c-line); }
.bk-mega-enter, .bk-mega-leave { transition: opacity .18s var(--bk-c-ease), transform .18s var(--bk-c-ease); }
.bk-mega-from { opacity: 0; transform: translateY(-6px); }
.bk-mega-to { opacity: 1; transform: translateY(0); }
.bk-mega__main { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 612px) minmax(0, 300px); justify-content: space-between; gap: 48px; padding-block: 48px 40px; }
.bk-mega__intro { display: flex; flex-direction: column; gap: 20px; }
.bk-header .bk-mega__kicker { color: var(--bk-c-muted); }
.bk-mega__title { font-family: "Druk Super", Impact, sans-serif; font-weight: 900; font-size: 64px; line-height: 0.9; text-transform: uppercase; }
.bk-mega__body { color: var(--bk-c-muted); font-size: 15px; line-height: 1.55; }
.bk-mega__links { border-top: 1.5px solid var(--bk-c-ink); }
.bk-mega__link { display: grid; grid-template-columns: 24px minmax(0, 1fr) 22px; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--bk-c-line); }
.bk-header .bk-mega__num { color: var(--bk-c-muted); }
.bk-mega__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: transform .25s var(--bk-c-ease); }
.bk-mega__label { font-family: "Druk Text Bold", Impact, sans-serif; font-weight: 700; font-size: 40px; line-height: 0.95; text-transform: uppercase; color: rgba(12, 12, 14, 0.72); transition: color .2s var(--bk-c-ease); }
.bk-mega__desc { color: var(--bk-c-muted); font-size: 15px; line-height: 1.3; }
.bk-mega__go { display: inline-grid; place-items: center; color: rgba(12, 12, 14, 0.35); transition: color .2s var(--bk-c-ease), transform .25s var(--bk-c-ease); }
.bk-mega__go svg { width: 22px; height: 22px; }
.bk-mega__link:hover .bk-mega__label, .bk-mega__link:focus-visible .bk-mega__label { color: var(--bk-c-ink); }
.bk-mega__link:hover .bk-mega__text { transform: translateX(8px); }
.bk-mega__link:hover .bk-mega__go { color: var(--bk-c-red); transform: translate(2px, -2px); }
.bk-header .bk-mega__link:hover .bk-mega__num { color: var(--bk-c-ink); }
.bk-mega__featured { display: flex; flex-direction: column; gap: 14px; }
.bk-mega__preview { position: relative; display: block; height: 240px; overflow: hidden; border-radius: 4px; background: var(--bk-c-paper-2); }
.bk-mega__preview img { position: absolute; top: 28px; width: 132px; height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(12, 12, 14, 0.25); transition: transform .35s var(--bk-c-ease); }
.bk-mega__preview img:first-child { left: 34px; transform: rotate(-6deg); }
.bk-mega__preview img:last-child { left: 140px; top: 22px; transform: rotate(5deg); }
.bk-mega__featured:hover .bk-mega__preview img:first-child { transform: rotate(-8deg) translateY(-4px); }
.bk-mega__featured:hover .bk-mega__preview img:last-child { transform: rotate(7deg) translateY(-4px); }
.bk-mega__caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bk-mega__caption > span { display: flex; flex-direction: column; gap: 2px; }
.bk-header .bk-mega__featured-kicker { font-size: 11px; color: var(--bk-c-ink); }
.bk-mega__featured-title { font-size: 15px; font-weight: 700; }
.bk-mega__secondary { background: var(--bk-c-paper-2); }
.bk-mega__secondary-row { display: flex; align-items: center; gap: 32px; padding-block: 18px; font-size: 14px; font-weight: 500; }
.bk-mega__secondary-row > .bk-mono:first-child { color: var(--bk-c-muted); }
.bk-mega__secondary-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-header .bk-mega__esc { margin-left: auto; font-size: 11px; color: var(--bk-c-muted); }
.bk-mega-scrim { position: fixed; inset: var(--bk-header-h) 0 0 0; z-index: -1; background: rgba(251, 250, 248, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── Mobile menu (no Pen design: light restyle of the existing overlay) ──── */
.bk-mobile { position: fixed; inset: 0; z-index: 1; overflow-y: auto; padding-top: var(--bk-header-h); background: var(--bk-c-paper); transition: opacity .3s var(--bk-c-ease), visibility .3s; }
.bk-mobile__inner { display: flex; flex-direction: column; gap: 40px; padding-block: 32px 48px; }
.bk-mobile__nav { display: flex; flex-direction: column; border-top: 1.5px solid var(--bk-c-ink); }
.bk-header .bk-mobile__link { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--bk-c-line); background: none; color: var(--bk-c-ink); font-family: "Druk Text Bold", Impact, sans-serif; font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; text-align: left; cursor: pointer; opacity: 0; transform: translateY(12px); }
.bk-mobile.active .bk-mobile__link { animation: bk-mobile-in .45s var(--bk-c-ease) forwards; }
.bk-mobile.active .bk-mobile__nav > :nth-child(2) .bk-mobile__link { animation-delay: .05s; }
.bk-mobile.active .bk-mobile__nav > :nth-child(3) { animation-delay: .1s; }
.bk-mobile.active .bk-mobile__nav > :nth-child(4) { animation-delay: .15s; }
.bk-mobile__link.active { color: var(--bk-c-red); }
.bk-mobile__toggle svg { transition: transform .2s var(--bk-c-ease); }
.bk-mobile__toggle svg.is-open { transform: rotate(180deg); }
.bk-mobile__sub { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 18px; border-bottom: 1px solid var(--bk-c-line); }
.bk-mobile__sub a { padding: 8px 0; font-size: 19px; font-weight: 500; color: var(--bk-c-muted); }
.bk-mobile__sub a:hover { color: var(--bk-c-ink); }
.bk-mobile__actions { display: flex; flex-direction: column; gap: 12px; }
.bk-header a.bk-mobile__start, .bk-header a.bk-mobile__signin { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 24px; border-radius: 100px; font-size: 17px; font-weight: 700; }
.bk-header a.bk-mobile__start { background: var(--bk-c-ink); color: var(--bk-c-paper); }
.bk-header a.bk-mobile__signin { border: 1px solid var(--bk-c-ink); }
@keyframes bk-mobile-in { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1023px) {
    /* Same 64px bar height as the previous mobile header, so page offsets don't change. */
    .bk-header { --bk-header-h: 64px; }
    .bk-header__bar { grid-template-columns: 1fr auto auto; }
    .bk-header__nav, .bk-header__actions, .bk-mega, .bk-mega-scrim { display: none !important; }
    .bk-header__burger { display: flex; }
}
@media (min-width: 1024px) {
    .bk-mobile { display: none; }
}
@media (max-width: 1199px) and (min-width: 1024px) {
    .bk-header__nav { gap: 24px; }
    .bk-mega__main { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 240px); gap: 32px; }
    .bk-mega__title { font-size: 52px; }
    .bk-mega__preview img { width: 110px; }
    .bk-mega__preview img:last-child { left: 116px; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.bk-footer { overflow: hidden; background: var(--bk-c-paper); border-top: 1px solid var(--bk-c-line); }
.bk-public-grid footer.bk-footer > .container { padding-block: 96px 0; }
.bk-footer__columns { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(6, minmax(0, 1fr)); gap: 32px; }
.bk-footer__tagline { font-size: clamp(26px, 2.22vw, 32px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; max-width: 280px; }
.bk-footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bk-footer .bk-footer__heading { color: var(--bk-c-muted); }
.bk-footer__col ul { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.3; }
.bk-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 80px; padding-block: 20px; border-top: 1px solid var(--bk-c-line); color: var(--bk-c-muted); }
.bk-footer__credit { display: inline-flex; align-items: center; gap: 6px; }
.bk-footer__credit svg { color: var(--bk-c-red); }
.bk-footer__credit a { color: var(--bk-c-ink); }
.bk-footer__credit a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-footer__wordmark { margin: 0; padding-inline: 12px; font-family: "Druk Super", Impact, sans-serif; font-weight: 900; font-size: 24.4vw; line-height: 0.78; letter-spacing: -0.005em; text-align: center; white-space: nowrap; color: var(--bk-c-ink); transform: translateY(8%); user-select: none; }
@media (min-width: 1440px) { .bk-footer__wordmark { font-size: 352px; } }

@media (max-width: 1023px) {
    .bk-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
    .bk-footer__tagline { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 760px) {
    .bk-public-grid footer.bk-footer > .container { padding-block: 64px 0; }
    .bk-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
    .bk-footer__bar { margin-top: 56px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .bk-header *, .bk-header *::before, .bk-header *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}