/* Mela Keela shared shell.
   Loaded BEFORE each page's inline <style> so existing page rules keep winning.
   Everything here is namespaced mk- and cannot collide with existing selectors. */

.mk-skip{position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--mk-gold);color:#101412;padding:12px 18px;
  font:700 13px/1 var(--mk-font-body);letter-spacing:.06em;
  text-decoration:none;border-radius:0 0 3px 0}
.mk-skip:focus{left:0}

/* One persistent global header. Replaces the two colliding sticky bars. */
.mk-header{position:sticky;top:0;z-index:9000;
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  background:color-mix(in srgb,var(--mk-shell-bg) 94%,transparent);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--mk-shell-edge);
  padding:10px clamp(14px,3.5vw,34px)}
.mk-header__home{display:flex;align-items:center;min-height:var(--mk-tap);flex:0 0 auto}
.mk-header__home img{display:block;width:clamp(104px,13vw,150px);height:auto}
.mk-nav{display:flex;gap:clamp(10px,1.6vw,20px);flex-wrap:wrap}
.mk-nav a{display:inline-flex;align-items:center;min-height:var(--mk-tap);
  font:400 12px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.1em;
  color:var(--mk-shell-dim);text-decoration:none;text-transform:uppercase}
.mk-nav a:hover,.mk-nav a:focus-visible{color:var(--mk-shell-ink)}
.mk-nav a[aria-current="page"]{color:var(--mk-gold)}
.mk-header__search{margin-left:auto;display:flex}
.mk-header__search input{background:rgba(255,255,255,.05);
  border:1px solid var(--mk-shell-edge);border-radius:3px;color:var(--mk-shell-ink);
  font:300 13px/1.2 var(--mk-font-body);
  padding:9px 12px;min-height:var(--mk-tap);width:clamp(120px,20vw,240px);outline:none}
.mk-header__search input::placeholder{color:rgba(243,239,229,.45)}
.mk-header__search input:focus{border-color:var(--mk-gold)}
@media(max-width:720px){
  .mk-header{flex-wrap:wrap;row-gap:4px;padding:8px 14px}
  .mk-header__home{flex:1 1 100%}
  .mk-header__home img{width:120px}
  .mk-header__search{display:none}
  .mk-nav{flex:1 1 100%;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .mk-nav::-webkit-scrollbar{display:none}
  .mk-nav a{min-height:38px;font-size:11px;white-space:nowrap}
}

/* Contextual exhibit trail. Subordinate to the global header at every width:
   one scrollable row, never a wall of links, never a full mobile viewport. TR-004. */
.mk-context{border-bottom:1px solid var(--mk-shell-edge);
  background:color-mix(in srgb,var(--mk-shell-bg) 82%,transparent);
  padding:7px clamp(14px,3.5vw,34px);
  display:flex;align-items:center;gap:0 14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  font:400 11px/1.5 var(--mk-font-technical);letter-spacing:.06em}
.mk-context::-webkit-scrollbar{display:none}
.mk-context>div,.mk-context .pf-links{display:flex;flex-wrap:nowrap;align-items:center;gap:0 14px}
.mk-context a{color:rgba(243,239,229,.46);text-decoration:none;white-space:nowrap;
  padding:3px 0;min-height:30px;display:inline-flex;align-items:center}
.mk-context a:hover,.mk-context a:focus-visible{color:var(--mk-shell-ink);text-decoration:underline}
.mk-context .pf-home{color:rgba(201,164,71,.8);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;position:sticky;left:0;
  background:linear-gradient(90deg,var(--mk-shell-bg) 80%,transparent);padding-right:10px}
@media(max-width:760px){.mk-context{padding:6px 14px;font-size:10.5px}}

/* Visible focus everywhere. */
.mk-header a:focus-visible,.mk-context a:focus-visible,.mk-skip:focus-visible,
.mk-status a:focus-visible,.mk-footer a:focus-visible{
  outline:2px solid var(--mk-focus);outline-offset:3px;border-radius:2px}

.mk-footer{border-top:1px solid var(--mk-shell-edge);
  padding:26px clamp(14px,3.5vw,34px);
  font:300 13px/1.6 var(--mk-font-body);color:var(--mk-shell-dim)}
.mk-footer a{color:var(--mk-shell-dim)}

/* Accessible visually-hidden heading, for the threshold H1. */
.mk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  .mk-header,.mk-context,.mk-nav a{transition:none!important;animation:none!important}
  /* Transitions only. Page reveal animations are left to each page's own
     prefers-reduced-motion rules, so nothing can be stranded mid-reveal. */
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important}
}