/* Uthando shared chrome: the pattern band and the phone menu. Loaded after each page's own styles.
   Pattern art: site/assets/art/, a blend of Ndebele (the band) and Sotho litema (the weave), drawn by tools/brand/pattern_art.py. */
.u-band{height:12px;background:url(/assets/art/band-dark.svg) 0 0/auto 12px repeat-x}
.u-band.lg{height:18px;background-size:auto 18px}
.u-band.light{background-image:url(/assets/art/band-light.svg)}
header.bar::after{content:"";display:block;height:10px;background:url(/assets/art/band-dark.svg) 0 0/auto 10px repeat-x}
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:url(/assets/art/band-dark.svg) 0 0/auto 14px repeat-x}
footer{padding-top:calc(40px + 14px) !important}
/* The emblem beside the wordmark, as on the home page. */
header.bar .brand{display:flex !important;align-items:center;gap:10px}
header.bar .brand::after{content:"";flex:none;width:21px;height:24px;background:#B8913A;-webkit-mask:url(/assets/emblem.svg) center/contain no-repeat;mask:url(/assets/emblem.svg) center/contain no-repeat}
/* A woven ground behind every dark hero, fading out under the words. */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/art/weave-gilt.svg) 0 0/64px repeat;opacity:.11;
  -webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 75%);mask-image:linear-gradient(115deg,transparent 30%,#000 75%)}
@media (max-width:760px){.hero::before{opacity:.17;-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}}
.u-menu-btn{display:none}
nav.main .u-ask{display:none}

@media (max-width:760px){
  /* Without the script the menu stays a single row you can swipe. */
  nav.main{flex-wrap:nowrap !important;overflow-x:auto;gap:20px !important;font-size:14px !important;width:100%;padding:4px 0 6px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{flex:none}

  /* With the script: one MENU button, like the home page. */
  .u-js .bar-in{flex-wrap:wrap}
  .u-js .u-menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:none;border:1px solid #3A4668;border-radius:3px;color:#F5F0E6;
    font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;cursor:pointer}
  .u-js .u-menu-btn:focus-visible{outline:2px solid #B8913A;outline-offset:2px}
  .u-js nav.main{display:none !important}
  .u-js .bar-in.u-open nav.main{display:flex !important;flex-direction:column;align-items:stretch;gap:0 !important;width:100%;overflow:auto;max-height:calc(100dvh - 90px);
    -webkit-mask-image:none;mask-image:none;padding:4px 0 18px;border-top:1px solid #1A2647}
  .u-js .bar-in.u-open nav.main a{display:block;padding:13px 0;border-bottom:1px solid #1A2647 !important;color:#F5F0E6;font:500 24px/1.15 'Cormorant Garamond',Georgia,serif}
  .u-js .bar-in.u-open nav.main a[aria-current="page"]{color:#B8913A}
  .u-js .bar-in.u-open nav.main a.btn{margin-top:14px;font:500 15px/1 Inter,system-ui,sans-serif;text-align:center;border:1px solid #F5F0E6 !important;padding:15px;background:#F5F0E6 !important;color:#070B18 !important;border-radius:3px}
  .u-js .bar-in.u-open nav.main .u-ask{margin-top:18px;border:1px solid #B8913A !important;border-radius:3px;padding:14px 16px;font-size:21px}
}
@media print{header.bar::after,footer::before{display:none}}