/* A chapter dock for the night studio. The reserved header height stays fixed. */
html{scroll-padding-top:112px}
.header-spacer{display:none;pointer-events:none;overflow-anchor:none}.header-spacer.is-active{display:block}
.site-header{--header-row-height:94px;--dock-row-height:80px;--dock-offset:12px;height:calc(var(--header-row-height) + 1px);transition:background .24s,border-color .24s;z-index:50}
.site-header:after{display:none}
.site-header .header-inner{position:relative;top:0;isolation:isolate;height:var(--header-row-height);min-height:var(--header-row-height);padding-inline:0;pointer-events:auto;transition:width .28s cubic-bezier(.2,.7,.3,1),height .28s,min-height .28s,padding .28s,top .28s,box-shadow .28s}
.header-inner:before,.header-inner:after{content:'';position:absolute;inset:0;z-index:-2;opacity:0;pointer-events:none;transition:opacity .24s;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px)}
.header-inner:before{background:#a48c5a}
.header-inner:after{inset:2px;z-index:-1;background:#242320;clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px),0 6px,3px 6px,3px 3px,6px 3px)}
.site-header.is-floating{position:fixed;top:0;left:0;right:0;width:100%;background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;pointer-events:none;overflow-anchor:none}
.site-header.is-floating .header-inner{width:min(1180px,calc(100% - 96px));height:var(--dock-row-height);min-height:var(--dock-row-height);padding-inline:23px;top:var(--dock-offset);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.site-header.is-floating .header-inner:before,.site-header.is-floating .header-inner:after{opacity:1}
.brand-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0}
.wordmark{transition:font-size .24s}
.site-header.is-floating .wordmark{font-size:36px}
.brand-avatar{transform-origin:50% 80%;will-change:auto}
.header-chapter{display:flex;align-items:center;max-height:0;opacity:0;overflow:hidden;white-space:nowrap;color:#d0c5b2;font:500 11px/13px var(--pixel);letter-spacing:.3px;transform:translateY(-3px);transition:max-height .24s,opacity .24s,transform .24s,margin .24s}
.is-floating .header-chapter{max-height:15px;opacity:1;transform:none;margin-top:3px}
.header-chapter-number{color:var(--amber);white-space:pre}
.header-chapter-trail{display:none}
.site-header .main-nav>a:after{display:none}
.site-header .main-nav>a{transition:color .2s}
.site-header .main-nav>a[aria-current]{color:var(--amber)}
.site-header .main-nav>a.is-complete{color:#d9ccb4}
.site-header .main-nav>a .nav-progress{position:absolute;bottom:4px;left:0;right:0;height:3px;display:block;margin:0;background:#4b4334;opacity:0;pointer-events:none;transition:opacity .24s}
.nav-progress b{display:block;height:100%;width:var(--chapter-fill,0%);background:var(--amber);box-shadow:1px 0 0 #f7d88c}
.main-nav>a.is-complete .nav-progress b{background:#ad8641;box-shadow:none}
.is-floating .main-nav>a .nav-progress{opacity:1}
.site-header .main-nav>a:hover .nav-progress{background:#706044}

@media(min-width:741px) and (max-width:1150px){
  .site-header{--header-row-height:78px;--dock-row-height:74px;--dock-offset:10px}
  .site-header.is-floating .header-inner{padding-inline:18px}
  .site-header.is-floating .wordmark{font-size:31px}
  .site-header.is-floating .brand-lockup{gap:10px}
  .site-header.is-floating .main-nav{gap:18px}
  .header-chapter{font-size:10px}
}
@media(max-width:740px){
  html{scroll-padding-top:106px}
  .site-header{--header-row-height:72px;--dock-row-height:74px;--dock-offset:8px}
  .site-header.is-floating .header-inner{width:calc(100% - 24px);padding-inline:13px}
  .site-header.is-floating .wordmark{font-size:30px}
  .site-header.is-floating .brand-lockup{gap:9px}
  .header-chapter{font-size:10px;line-height:12px;letter-spacing:.15px}
  .header-chapter-number{display:none}
  .header-chapter-trail{display:inline-flex;align-items:center;gap:3px;margin-left:8px;height:6px}
  .chapter-node{display:block;width:7px;height:4px;background:#5c5140;transition:width .2s,background .2s}
  .chapter-node.is-done{background:#b48b44}
  .chapter-node.is-current{width:13px;background:var(--amber)}
  .site-header .main-nav{max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b48b44 #242320}
  .site-header.is-floating .main-nav{top:calc(100% + 10px);left:0;right:0;padding:12px 17px 17px;border:1px solid #a48c5a;background:#242320;box-shadow:0 4px 0 rgba(0,0,0,.4);clip-path:polygon(5px 0,calc(100% - 5px) 0,calc(100% - 5px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 5px) calc(100% - 3px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 3px),0 calc(100% - 3px),0 3px,5px 3px)}
  .site-header .main-nav>a{padding:15px 4px 17px}
  .site-header .main-nav>a .nav-progress{left:4px;right:4px;bottom:7px;height:2px}
  .site-header.is-menu-open .main-nav>a .nav-progress{opacity:1}
}
@media(max-width:370px){
  .site-header.is-floating .header-inner{padding-inline:12px}
  .site-header.is-floating .wordmark{font-size:29px}
  .header-chapter-trail{gap:3px;margin-left:6px}
  .chapter-node{width:6px}.chapter-node.is-current{width:11px}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header .header-inner,.header-inner:before,.header-inner:after,.wordmark,.header-chapter,.chapter-node,.site-header .main-nav>a,.site-header .main-nav>a .nav-progress{transition:none}
}