/* One persistent masthead, with a palette belonging to each edition. */
:root{--header-height:88px}
html{scroll-padding-top:calc(var(--header-height) + env(safe-area-inset-top,0px));scrollbar-gutter:stable}
html:has(.site-header--burgundy){background:#370B17}
.site-header{
  --nav-ink:#241A15;--nav-accent:#90192D;--nav-line:rgba(102,44,58,.18);
  --nav-ground:rgba(231,220,201,.96);--nav-solid:#E7DCC9;
  position:fixed;inset:0 0 auto;z-index:80;color:var(--nav-ink);
  padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;
  transition:background-color .25s,border-color .25s,box-shadow .25s;
}
.site-header--burgundy{
  --nav-ink:#F6EEE2;--nav-accent:#ECAAB8;--nav-line:rgba(246,238,226,.2);
  --nav-ground:rgba(55,11,23,.96);--nav-solid:#370B17;
}
.site-header.is-scrolled,.site-header.is-open{
  background:var(--nav-ground);border-color:var(--nav-line);
  box-shadow:0 6px 28px rgba(24,8,12,.06);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.site-header-inner{
  width:min(calc(100% - 2 * var(--gut)),1280px);height:var(--header-height);
  margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.site-brand{display:flex;align-items:center;flex:none;width:240px;min-height:44px}
.site-brand img{display:block;width:100%;height:auto;margin:0}
.site-header-menu{display:flex;align-items:center;gap:30px}
.site-header-menu[hidden]{display:none!important}
.site-header .chapter-nav{position:static;display:block;transform:none;opacity:1;pointer-events:auto}
.site-header .chapter-nav ol{display:flex;align-items:center;list-style:none;gap:28px;margin:0;padding:0}
.site-header .chapter-nav a,.site-language{
  display:flex;align-items:center;min-height:44px;color:var(--nav-ink);
  font:600 12px/1.5 var(--ui);text-decoration:none;white-space:nowrap;
  transition:color .2s;
}
.site-header .chapter-nav a{position:relative}
.site-header .chapter-nav a::after{
  content:"";position:absolute;inset:auto 0 7px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:center;transition:transform .2s;
}
.site-header .chapter-nav a:hover,.site-language:hover{color:var(--nav-accent)}
.site-header .chapter-nav a.is-here::after{transform:scaleX(1)}
.site-header .chapter-nav li:last-child a{border:1px solid var(--nav-line);padding-inline:20px;border-radius:2px}
.site-header .chapter-nav li:last-child a::after{inset-inline:20px}
.site-language{padding-left:24px;border-left:1px solid var(--nav-line)}
.site-language[lang="ar"]{font-family:'Mug AR Label',var(--ui);font-size:15px}
html[lang="ar"] .site-header .chapter-nav a{font-family:'Mug AR Label',var(--ui);font-size:14px}
.site-header :is(a,button):focus-visible{outline:2px solid var(--nav-accent);outline-offset:5px}
.menu-toggle{display:none}
.menu-backdrop{display:none}
.header-space{height:calc(var(--header-height) + env(safe-area-inset-top,0px) - 32px)}
.skip:focus{position:fixed;z-index:100}
@media(max-width:1000px){
  .site-header-inner{gap:20px}.site-brand{width:220px}
  .site-header-menu{gap:20px}.site-header .chapter-nav ol{gap:18px}
}
@media(max-width:900px){
  :root{--header-height:76px}
  .site-header-inner{width:calc(100% - 48px);gap:20px}
  .site-brand{width:210px;max-width:calc(100% - 64px)}
  .site-header.nav-ready .menu-toggle{
    display:flex;position:relative;flex:none;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;width:44px;height:44px;padding:0;
    border:1px solid var(--nav-line);border-radius:50%;background:transparent;color:inherit;cursor:pointer;
  }
  .menu-toggle span{display:block;width:18px;height:1px;background:currentColor;transition:transform .2s,opacity .2s}
  .is-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .is-open .menu-toggle span:nth-child(2){opacity:0}
  .is-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .site-header-menu{
    position:absolute;top:100%;inset-inline:0;display:block;padding:12px 24px 28px;
    max-height:calc(100dvh - var(--header-height) - env(safe-area-inset-top,0px));overflow-y:auto;
    background:var(--nav-solid);border-bottom:1px solid var(--nav-line);
    box-shadow:0 18px 24px rgba(24,8,12,.07);
  }
  .site-header .chapter-nav ol{display:block;counter-reset:chapter 1}
  .site-header .chapter-nav li{counter-increment:chapter;border-bottom:1px solid var(--nav-line)}
  .site-header .chapter-nav a,html[lang="ar"] .site-header .chapter-nav a{
    min-height:58px;justify-content:space-between;font-size:18px;font-weight:500;
  }
  .site-header .chapter-nav a::before{content:"0" counter(chapter);font:500 10px/1 var(--ui);color:var(--nav-accent);order:1}
  .site-header .chapter-nav a::after{content:none}
  .site-header .chapter-nav a.is-here{color:var(--nav-accent)}
  .site-header .chapter-nav li:last-child a{border:0;padding:0}
  .site-language{border:0;padding:20px 0 0;min-height:54px;width:fit-content}
  .site-header:not(.nav-ready) .site-header-menu{position:static;box-shadow:none}
  .site-header:not(.nav-ready) .site-header-inner{height:auto;flex-wrap:wrap}
  .site-header:not(.nav-ready){position:relative;background:var(--nav-solid)}
  .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:79;background:rgba(24,8,12,.28)}
  html.menu-open{overflow:hidden}
}
@media(max-width:720px){
  .header-space{height:calc(var(--header-height) + env(safe-area-inset-top,0px) - 24px)}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header *,.site-header *::after{transition:none!important}
}
