/* Generated by scripts/build_art.py (CHROME_CSS): the menu bar and footer on every page. Edit it there. */
.kk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kk-nav { position: sticky; top: 0; z-index: 50; text-align: left; background: var(--bg); border-bottom: 2px solid var(--line); }
@supports (backdrop-filter: blur(6px)) { .kk-nav { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(6px); } }
.kk-nav-in { position: relative; max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; }
.kk-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--accent); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.kk-logo img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); }
.kk-menu > ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kk-menu a, .kk-shop summary { display: block; padding: 7px 14px; border-radius: 999px; color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; }
.kk-menu a:hover, .kk-shop summary:hover, .kk-shop[open] summary { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.kk-menu a[aria-current="page"] { background: var(--accent); color: var(--bg); }
.kk-shop { position: relative; }
.kk-shop summary { list-style: none; }
.kk-shop summary::-webkit-details-marker { display: none; }
.kk-shop summary::after { content: "▾"; margin-left: 6px; font-size: .8em; }
.kk-shop ul { position: absolute; right: 0; top: calc(100% + 10px); z-index: 2; min-width: 270px; margin: 0; padding: 8px; list-style: none; background: var(--card); border: 3px solid var(--line); border-radius: 12px; box-shadow: 5px 5px 0 var(--pink); }
.kk-shop ul a { border-radius: 8px; padding: 8px 12px; }
.kk-shop small { display: block; font-weight: 500; font-size: .85rem; opacity: .8; }
.kk-nav .theme { position: static; flex: none; width: 40px; height: 40px; margin: 0; }
.kk-burger { display: none; flex: none; place-items: center; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.kk-menu a:focus-visible, .kk-shop summary:focus-visible, .kk-burger:focus-visible, .kk-logo:focus-visible, .kk-foot a:focus-visible, .kk-navsocial a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* The socials in the menu bar (content/platforms.json, minus "header": false): small brand-coloured icons. The bar's
   copy (.kk-barsocial) shows from 900px, shrinking the icons and then the menu words up to 1060px; the ☰ menu's copy
   (.kk-menusocial) is a row at its bottom on phones. Between 761 and 899px there are none (the footer has them).
   In the bar they sit centred between the name and the menu (Paul and Beth, 2026-10-27). */
.kk-navsocial { --kk-si: 26px; display: none; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kk-navsocial a { display: grid; place-items: center; width: var(--kk-si); height: var(--kk-si); border: 2px solid var(--line); border-radius: 50%; box-shadow: 2px 2px 0 var(--line); }
.kk-navsocial img { width: calc(var(--kk-si) * .5); height: calc(var(--kk-si) * .5); }
.kk-navsocial a.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .kk-navsocial a.fb { background: #0866ff; }
.kk-navsocial a.tt, .kk-navsocial a.th { background: #000; } .kk-navsocial a.yt { background: #ff0033; } .kk-navsocial a.pin { background: #e60023; }
.kk-menu > .kk-menusocial { display: none; }
@media (min-width: 900px) {
  .kk-barsocial { display: flex; flex: none; margin: 0 auto; }
}
@media (min-width: 900px) and (max-width: 1060px) {
  .kk-barsocial { --kk-si: 22px; gap: 5px; }
  .kk-menu a, .kk-shop summary { padding: 7px 11px; font-size: .96rem; }
}
@media (max-width: 760px) {
  .kk-nav-in { padding: 8px 12px; }
  .kk-burger { display: grid; order: 3; }
  .kk-nav .theme { order: 2; }
  [data-kkjs] .kk-menu { display: none; }
  [data-kkjs] .kk-nav.open .kk-menu { display: block; }
  .kk-menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 64px); overflow: auto; padding: 8px 16px 18px; background: var(--bg); border-bottom: 3px solid var(--line); box-shadow: 0 10px 18px rgba(0, 0, 0, .18); }
  :root:not([data-kkjs]) .kk-nav-in { flex-wrap: wrap; }
  :root:not([data-kkjs]) .kk-menu { position: static; flex-basis: 100%; padding: 0; border: 0; box-shadow: none; }
  :root:not([data-kkjs]) .kk-burger { display: none; }
  .kk-menu > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .kk-menu a, .kk-shop summary { padding: 12px 14px; font-size: 1.1rem; border-radius: 10px; }
  .kk-shop ul { position: static; min-width: 0; margin: 4px 0 0; box-shadow: none; border-width: 2px; }
  .kk-menu > .kk-menusocial { --kk-si: 40px; display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 12px 0 0; padding: 14px 14px 0; border-top: 2px dashed var(--line); }
  .kk-menu .kk-menusocial a { display: grid; padding: 0; border-radius: 50%; }
}
.kk-foot { margin-top: 56px; padding: 26px 0 6px; text-align: center; font-size: .9rem; }
.kk-foot p { margin: 0 0 8px; }
.kk-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.kk-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--line); border-radius: 50%; box-shadow: 3px 3px 0 var(--line); }
.kk-social img { width: 20px; height: 20px; }
.kk-social .ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .kk-social .fb { background: #0866ff; }
.kk-social .tt, .kk-social .th { background: #000; } .kk-social .yt { background: #ff0033; } .kk-social .pin { background: #e60023; } .kk-social .etsy { background: #f6a57d; }
.kk-links a { color: var(--accent); font-weight: 700; }
.kk-copy { opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .kk-social a { transition: transform .1s, box-shadow .1s; }
  .kk-social a:hover, .kk-social a:focus-visible { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
  .kk-navsocial a { transition: transform .1s, box-shadow .1s; }
  .kk-navsocial a:hover, .kk-navsocial a:focus-visible { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
}