{"version":3,"file":"app_styles.min.css","mappings":"AAAA,iBCoBA,2BAeA,wBAWA,YAWA,kBACA,oBACA,qBACA,kBACA,oBACA,oBAWA,mBAWA,wBAaA,kBACE,qBACA,cACA,SACA,iBACA,gDAcF,aACE,CACA,eADA,qBAEA,sBAeF,WACE,OAaF,eAWA,sBAWA,sFAWA,aACE,8BAaF,qBAEE,UACA,GCnLF,cACE,kBACA,oBACA,SACA,UACA,OAMF,oECgHE,eD7GA,6BACA,gBACA,UAOF,sBACE,KAUF,cACE,kBAOF,wBACE,CARA,YAOF,wBACE,MAOF,wBACE,qBACA,kBACA,4BAWA,aACE,8BACA,kCACA,CADA,yBACA,gDAEE,yCAIJ,aACE,mCACA,KCgDF,eDpCA,cACA,gBACA,UALF,2JAmBE,CAdA,KCkCA,kBDpBA,UAEA,aACE,gBACA,YASJ,0BE1FE,iCACA,WACA,gBACA,oBACA,kBACA,UACA,aCuIO,kBCvJT,UDuJS,UCpJP,2BAOF,WD6IS,yCCrIT,aDqIS,oBEnLT,2BC8CU,2CClDV,iBACE,eCWF,UACE,mBAQF,YACE,sBACA,YACA,cACA,iBACA,UACA,yBASF,YACE,cACA,kBACA,wBC2IA,wBD9IF,wBAMI,uBEvBJ,+BCQE,uCACA,cACA,kBACA,WACA,wDAIE,8BACA,CADA,wBACA,CADA,2BACA,CCcF,UAFU,CDZR,QACA,kBACA,SACA,4BACA,6BCtBF,UDyBsB,eACpB,4CACA,4BAGmB,qBACnB,CCfF,UDcqB,CACnB,2CACA,sBEwBF,kBHnDA,aACA,eALF,SAME,gBAcF,oBACE,aACA,iBACA,kBACA,eAUF,0BACE,gBACA,oBACA,qBACA,0CAEA,oBACE,kBT+EF,aSjEA,CAHF,oEToEE,CSjEA,2BACA,mBAaF,aACE,eACA,wBDwFA,kBC1FF,kBAKI,oBACA,yBDoFF,kBC1FF,YAUI,gHAGF,aAEE,UACA,mBG9BF,mBChDA,CAKA,wBC4Ga,YDjHb,YACA,sBACA,eACA,mBACA,WACA,CARF,SCuHE,gEC/EE,aACE,2BPuEJ,kBKhHF,uCAaI,iBACA,kBACA,4BACA,yBACA,uCAEA,uBACE,yBLuIJ,kBK3JF,aAyBI,qBGtCJ,SJgEE,wBJwGA,mBQxKF,eAII,cASJ,2BACE,kBACA,aCoBF,cACE,2FAEA,YAME,6DAGF,aAIE,6LAGE,iCACE,yRAGF,kCACE,iJAIJ,YAEE,gBAIJ,0BACE,oBACA,+BAGF,iBAEE,uDAKA,YACE,gBAIJ,0BACE,oBACA,gBAGF,2BACE,gBACA,oBACA,+BAGF,qBAEE,+BAGF,uBAEE,kBAIA,cACE,wBAIJ,gCACE,4BACA,oBACA,qBACA,2CAGE,iBACE,kGNnFI,cAEV,WMoFQ,iDN7EN,WACE,6BMiFF,aACE,eACA,kBACA,uBAgBN,wBHnBe,WAGb,wEC/EE,aACE,oBG9DN,kBACE,WACA,CH4DI,cG9DN,kBACE,WACA,OAGF,eACE,yBACA,cACA,gBACA,qBACA,uBACA,WACA,aAEA,yBACE,UACA,iBChBJ,0BACE,cAGF,2JnBqIE,iBmBjIF,eACE,gBAGF,4BACE,8BAGF,aACE,sBCVF,eACE,iBAOF,aACE,8BAEA,aACE,2BAGF,oBACE,kBACA,mBACA,WAQJ,2BACE,gBACA,kBACA,YAOF,oBACE,kBACA,gBACA,sBACA,oBACA,WAOF,eACE,gBACA,oCAaA,2DACE,CAMA,0BACA,CAPA,qBAMA,CACA,UACA,gBACA,uBACA,qBACA,yCAEE,CAKF,+OAIA,wBAEE,gBCtEN,4BACE,kBACA,cACA,gBACA,mBACA,mBACA,qBAEA,aACE,gBACA,mBACA,wCAOF,aACE,WACA,oBACA,wCAOF,eACE,kCACA,2DAGF,kCACE,aChDJ,kBACE,kCACA,mDAEA,oBAGE,gBCjBJ,YACE,yBACA,iBACA,wBf4KA,ee/KF,eAMI,qBAIJ,YACE,gBACA,uCAEA,iBACE,0CAKF,wBACE,qBACA,sBACA,kBACA,qBACA,gCACA,8DAGF,wBT2Ga,WAGb,OU5IF,kCACE,qBAGF,oBACE,+EAIA,mBAEE,aAIJ,0BACE,gBAGF,+BACE,cACA,gBACA,oBACA,qBAGF,oBACE,yBACA,4CbIA,YaDuB,2BxB0GvB,gBwBnGA,oBACA,0EAJF,2JAaE,CATA,+CxBkGA,oBwBzFA,+CAGF,aAIE,qBACA,gBACA,QAGF,aACE,kBACA,cAGF,iBACE,mBACA,aAGF,mBACE,cAGF,aACE,4BACA,gBAGF,iBACE,wBhBgGA,egBjGF,kBAII,ChB6FF,kBgBvFF,YAEI,qBACA,uCAEA,YACE,gBACA,eACA,mDAEA,mBACE,CAjBJ,CAiBI,0BC/FR,aAEE,iDAKF,aAGE,gGAKF,aAME,6EAKF,aAKE,sGAKF,aAME,gIAKF,aAQE,+BAKF,aAEE,eAIF,kBACE,gBAIF,iBACE,cAIF,kBACE,aCzEF,mBACE,aACA,cACA,sBACA,mBACA,eACA,gBACA,cAMF,wBZmHe,cAGb,cYnHA,gBACA,0BfVA,aeiBsB,2BAMxB,wBAEE,yBACA,cACA,cACA,eACA,qCAEA,aACE,UChDJ,oBACE,eAGF,mBACE,aACA,eACA,gBACA,iBAGF,wBACE,aACA,cACA,6BCdF,YACE,0DACA,gBACA,qBAGF,mBACE,eACA,iCAEA,uB1B2KO,2C0BxKL,0BAIJ,eACE","sources":["webpack:///../../scss/main.scss","webpack:///../../node_modules/cssremedy/css/remedy.css","webpack:///../../scss/initial/_root.scss","webpack:///../../node_modules/accoutrement/sass/type/_fonts.scss","webpack:///../../node_modules/accoutrement/sass/type/_a11y.scss","webpack:///../../node_modules/accoutrement/sass/scale/_size.scss","webpack:///../../scss/initial/_icons.scss","webpack:///../../scss/initial/_sample-previews.scss","webpack:///../../node_modules/accoutrement/sass/tokens/_vars.scss","webpack:///../../scss/layout/_root.scss","webpack:///../../scss/layout/_regions.scss","webpack:///../../node_modules/accoutrement/sass/layout/_queries.scss","webpack:///../../scss/layout/_banner.scss","webpack:///../../scss/config/_banner.scss","webpack:///../../node_modules/accoutrement/sass/type/_pseudo-elements.scss","webpack:///../../node_modules/accoutrement/sass/layout/_z-index.scss","webpack:///../../scss/layout/_nav.scss","webpack:///../../node_modules/accoutrement/sass/color/_contrast.scss","webpack:///../../scss/config/_type.scss","webpack:///../../scss/layout/_main.scss","webpack:///../../scss/patterns/_type.scss","webpack:///../../scss/patterns/_forms.scss","webpack:///../../scss/component/_search.scss","webpack:///../../scss/component/_nav.scss","webpack:///../../scss/component/_footer.scss","webpack:///../../scss/component/_breadcrumb.scss","webpack:///../../scss/component/_project-meta.scss","webpack:///../../scss/component/_item.scss","webpack:///../../scss/previews/_highlight.scss","webpack:///../../scss/previews/_code.scss","webpack:///../../scss/previews/_examples.scss","webpack:///../../scss/previews/_icon.scss"],"sourcesContent":["*,::before,::after{box-sizing:border-box}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%}img,svg,video,canvas{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}*{border:solid 0 currentcolor;font-size:inherit;line-height:inherit;margin:0;padding:0}:root{font-family:\"Source Sans 3\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:18px;font-size:calc(1em + .125vw);line-height:1.4}[hidden]{display:none !important}img{display:revert}::selection{background-color:hsl(195,45.7692307692%,87%)}mark{background-color:hsl(195,45.7692307692%,87%);display:inline-block;padding:0 .175rem}[href]:link,[href]:visited{color:rgb(184.6678125,29.77921875,108.1996875);text-decoration-color:rgb(237.416953125,198.6948046875,218.299921875);text-decoration-skip:auto;transition:text-decoration-color 250ms,color 200ms}[href]:hover,[href]:focus,[href]:active{color:hsl(195,85%,35%);text-decoration-color:currentcolor}pre{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;font-size:.9rem;overflow:auto;white-space:pre}code{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;font-weight:bolder}pre code{display:block;font-weight:normal}.is-hidden{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(1px 1px 1px 1px);height:1px;overflow:hidden;pointer-events:none;position:absolute;width:1px}[data-icon]{height:1em;width:1em;fill:currentcolor}[data-icon-size=nav-icon]{height:28px;width:28px}[data-icon-size=footer-logo]{height:2.8rem;width:2.8rem}:root{--herman-brand-blue:hsl(195,85%,35%);--herman-brand-pink:hsl(330,85%,48%)}[data-herman]{overflow-x:hidden}[data-region]{width:100%}[data-region=app]{display:flex;flex-direction:column;height:100%;margin:0 auto;min-height:100vh;padding:0}[data-region=container]{display:flex;flex:1 1 auto;position:relative}@media(min-width: 50em){[data-region=container]{justify-content:flex-end}}[data-region=banner]{border-bottom:8px solid hsl(195,85%,35%);box-shadow:0 2px 2px hsla(195,5%,35%,.5);display:block;position:relative;width:100%}[data-region=banner]::before,[data-region=banner]::after{content:\"\";border:.7rem solid rgba(0,0,0,0);border-top-color:hsl(195,85%,35%);border-width:.7rem 1.4rem 0;left:50%;position:absolute;top:100%;transition:border-width 200ms}[data-region=banner]::before{content:\"\";margin-top:8px;transform:translateX(-50%) translateY(-2px)}[data-region=banner]::after{content:\"\";border-top-color:#fff;transform:translateX(-50%) translateY(-4px)}[data-region=banner]{z-index:3;align-items:center;display:flex;padding:.7rem}.project-title{align-items:baseline;display:flex;margin-left:auto;margin-right:auto}.project-name{font-size:calc(1rem + 2vw);font-weight:bold;padding-left:.35rem;padding-right:.35rem}.project-name:link,.project-name:visited{text-decoration:none}.project-version{font-family:\"Source Sans 3\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;color:hsl(195,5%,35%);font-size:calc(1rem + .5vw)}[data-nav-toggle]{color:rgb(184.6678125,29.77921875,108.1996875);padding:.35rem}@media(min-width: 50em){[data-nav-toggle]{padding-left:.7rem;padding-right:.7rem}}@media(min-width: 65em){[data-nav-toggle]{display:none}}[data-nav-toggle]:hover,[data-nav-toggle]:focus,[data-nav-toggle]:active,[data-nav-toggle][aria-pressed=true]{color:hsl(195,85%,35%);outline:0}[data-region=nav]{z-index:2;align-items:stretch;display:flex;flex-direction:column;padding:1.4rem;white-space:nowrap;width:auto;background-color:hsl(195,85%,35%);color:#fff}[data-region=nav] [href]:link,[data-region=nav] [href]:visited{color:inherit}@media(max-width: 64.99em){[data-region=nav]{box-shadow:0 0 .35rem hsla(195,5%,35%,.5);inset:0 auto 0 0;position:absolute;transform:translateX(-102%);transition:transform .4s}[data-region=nav][aria-expanded=true]{transform:translateX(0)}}@media(min-width: 65em){[data-region=nav]{flex:0 0 auto}}[data-region=main]{z-index:1}@media(min-width: 50em){[data-region=main]{overflow:hidden}}[data-page]{padding:calc(0.7rem + 2.5vw);position:relative}.text-block{max-width:80ch}.text-block h1,.text-block h2,.text-block h3,.text-block h4,.text-block h5,.text-block h6{margin-top:0}.text-block h1,.text-block h2,.text-block h3,.text-block h4{color:hsl(195,5%,24.5%)}.text-block h1 a:link,.text-block h1 a:visited,.text-block h2 a:link,.text-block h2 a:visited,.text-block h3 a:link,.text-block h3 a:visited,.text-block h4 a:link,.text-block h4 a:visited{text-decoration-color:rgba(0,0,0,0)}.text-block h1 a:hover,.text-block h1 a:focus,.text-block h1 a:active,.text-block h2 a:hover,.text-block h2 a:focus,.text-block h2 a:active,.text-block h3 a:hover,.text-block h3 a:focus,.text-block h3 a:active,.text-block h4 a:hover,.text-block h4 a:focus,.text-block h4 a:active{text-decoration-color:currentcolor}.text-block h1+h2,.text-block h1+h3,.text-block h2+h2,.text-block h2+h3,.text-block h3+h2,.text-block h3+h3,.text-block h4+h2,.text-block h4+h3{margin-top:0}.text-block h1{font-size:calc(1rem + 2vw);margin-bottom:.7rem}.text-block h2,.text-block h3{margin-top:2.1rem}.text-block>h2:first-child,.text-block>h3:first-child{margin-top:0}.text-block h2{font-size:calc(1rem + 1vw);margin-bottom:.7rem}.text-block h3{font-size:calc(1rem + .5vw);font-weight:normal;margin-bottom:.7rem}.text-block p,.text-block pre{margin-bottom:1.05rem}.text-block ol,.text-block ul{margin:0 1.4rem 1.05rem}.text-block li>p{margin:.7rem 0}.text-block blockquote{border-left:.35rem solid hsl(0,0%,87%);font-size:calc(1rem + .5vw);margin-left:-1.4rem;padding-left:1.05rem}.text-block blockquote>p:not(:last-child){text-indent:-0.4em}.text-block blockquote>p:not(:last-child)::before,.text-block blockquote>p:not(:last-child)::after{content:\"“\";color:hsl(195,85%,35%)}.text-block blockquote>p:not(:last-child)::after{content:\"”\"}.text-block blockquote cite{display:block;font-size:1rem;font-style:normal}.config.invert-colors{background-color:hsl(195,85%,35%);color:#fff}.config.invert-colors [href]:link,.config.invert-colors [href]:visited{color:inherit}::placeholder{color:currentcolor;opacity:.5}input{background:none;border:1px solid hsl(0,0%,87%);color:inherit;font-size:.9rem;margin-bottom:.35rem;padding:.175rem .35rem;width:100%}input:focus{border-color:currentcolor;outline:0}.search-heading{font-size:calc(1rem + 2vw)}.search-term{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif}.search-results{list-style:none}.search-result{margin:calc(0.7rem + 2.5vw) 0}[data-result-field=contents]{color:hsl(195,5%,35%)}[data-region=nav] ul{list-style:none}.nav-subsection{flex:0 0 auto}.nav-subsection:last-of-type{flex:1 0 auto}.nav-subsection+.nav-item{border-top:1px solid;margin-top:2.8rem;padding-top:1.4rem}.nav-home{font-size:calc(1rem + .5vw);font-weight:bold;margin-top:2.1rem}.nav-title{border-top:1px solid;font-size:inherit;font-weight:bold;margin:2.1rem 0 .7rem;padding-top:.175rem}.nav-item{list-style:none;margin:.35rem 0}[data-nav]:link,[data-nav]:visited{background:linear-gradient(to right, rgb(206.6775, 229.43625, 237.0225), rgb(206.6775, 229.43625, 237.0225)) no-repeat;background-size:0 4px;background-position:bottom left;color:#fff;line-height:1.1;padding-bottom:.175rem;text-decoration:none;transition:color .4s,background-size .4s}[data-nav]:hover,[data-nav]:focus,[data-nav]:active{background-size:100% 4px}[data-nav][data-nav=is-active]:link,[data-nav][data-nav=is-active]:visited,[data-nav][data-nav=is-active]:hover,[data-nav][data-nav=is-active]:focus,[data-nav][data-nav=is-active]:active{background-size:100% 4px}.footer-credit{border-top:1px solid hsl(195,45.7692307692%,87%);display:flow-root;flex:0 0 auto;font-size:.9rem;line-height:1.4rem;padding-top:1.4rem}.footer-credit span{display:block;overflow:hidden;white-space:nowrap}.footer-icon:link,.footer-icon:visited{color:inherit;float:left;margin-right:.35rem}.footer-link:link,.footer-link:visited{font-weight:bold;text-decoration-color:rgba(0,0,0,0)}.footer-link:hover,.footer-link:focus,.footer-link:active{text-decoration-color:currentcolor}.breadcrumb{background:hsl(195,45.7692307692%,87%);padding:.7rem calc(0.7rem + 2.5vw)}.breadcrumb a,.breadcrumb span,.breadcrumb strong{display:inline-block}.project-links{display:flex;justify-content:flex-end;margin:0 0 .7rem}@media(min-width: 50em){.project-links{margin-bottom:0}}.project-link-item{display:flex;list-style:none}.project-link-item+.project-link-item{margin-left:.7rem}.project-link:link,.project-link:visited{border:1px solid rgb(184.6678125,29.77921875,108.1996875);border-radius:1.4rem;padding:.35rem 1.4rem;text-align:center;text-decoration:none;transition:background-color .4s}.project-link:hover,.project-link:focus,.project-link:active{background-color:rgb(184.6678125,29.77921875,108.1996875);color:#fff}.item{margin-bottom:calc(4.2rem + 2.5vw)}[data-item-section]{margin-bottom:2.1rem}[data-item-section=header] .code-block,[data-item-section=header] .text-block{margin-bottom:.7rem}.item-title{font-size:calc(1rem + 1vw)}.item-subtitle{border-bottom:1px solid hsl(0,0%,87%);color:hsl(195,5%,35%);font-weight:normal;margin-bottom:.7rem}.item-subtitle-main{letter-spacing:.05em;text-transform:uppercase}.item-subtitle-main:not(:last-child)::after{content:\": \"}.item-subtitle-supplement{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;letter-spacing:0;padding-left:.35rem}.item-type,.item-name,.item-value,.alias-title{font-family:\"Source Code Pro\",Consolas,Menlo,Monaco,\"Lucida Console\",\"Liberation Mono\",\"DejaVu Sans Mono\",\"Bitstream Vera Sans Mono\",\"Courier New\",monospace,sans-serif;display:inline-block}.item-type,.item-value,.value-type,.item-note{color:hsl(195,5%,35%);display:inline-block;font-weight:normal}.alias{color:hsl(195,5%,35%);font-style:italic}.alias-title{font-style:normal;font-weight:bolder}.param-list{margin-bottom:.7rem}.param-title{color:hsl(195,5%,35%);font-size:calc(1rem + .5vw)}.param-details{margin-top:.35rem}@media(min-width: 40em){.param-details{margin-left:1.4rem}}@media(min-width: 40em){.requires-wrapper{display:flex;margin-bottom:2.1rem}.requires-wrapper [data-item-section]{flex:1 1 40%;margin-bottom:0;max-width:100%}.requires-wrapper [data-item-section]:first-child{margin-right:1.4rem}}.hljs-comment,.hljs-quote{color:#93a1a1}.hljs-keyword,.hljs-selector-tag,.hljs-addition{color:#859900}.hljs-number,.hljs-string,.hljs-meta .hljs-meta-string,.hljs-literal,.hljs-doctag,.hljs-regexp{color:#2aa198}.hljs-title,.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:#268bd2}.hljs-attribute,.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-class .hljs-title,.hljs-type{color:#b58900}.hljs-symbol,.hljs-bullet,.hljs-subst,.hljs-meta,.hljs-meta .hljs-keyword,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-link{color:#cb4b16}.hljs-built_in,.hljs-deletion{color:#dc322f}.hljs-formula{background:#eee8d5}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bolder}.code-block{align-items:stretch;display:flex;flex:1 1 20em;flex-direction:column;max-height:16.8rem;max-width:100%;overflow:hidden}.code-header{background-color:hsl(195,45.7692307692%,87%);color:hsl(195,5%,24.5%);flex:0 0 auto;padding:0 .7rem}.code-description::before{content:\" – \"}.hljs-pre,.text-block pre{background-color:hsl(195,45.7692307692%,98.7%);border:1px solid hsl(195,45.7692307692%,87%);color:hsl(195,85%,35%);flex:1 1 auto;flex-wrap:wrap}.hljs-pre code,.text-block pre code{padding:.7rem}.example{margin-bottom:1.4rem}.example-code{align-items:stretch;display:flex;flex-wrap:wrap;overflow:hidden}.example-render{border:1px solid hsl(0,0%,87%);border-top:0;padding:.7rem}[data-sassdoc=icon-preview]{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));margin:0 -0.7rem}[data-sassdoc-icon]{margin:1.4rem .7rem;min-width:7rem}[data-sassdoc-icon] [data-icon]{height:calc(1rem + 2vw);width:calc(1rem + 2vw);margin-bottom:.7rem}[data-sassdoc=icon-info]{font-size:.9rem}","/* @docs\nlabel: Core Remedies\nversion: 0.1.0-beta.2\n\nnote: |\n  These remedies are recommended\n  as a starter for any project.\n\ncategory: file\n*/\n\n\n/* @docs\nlabel: Box Sizing\n\nnote: |\n  Use border-box by default, globally.\n\ncategory: global\n*/\n*, ::before, ::after { box-sizing: border-box; }\n\n\n/* @docs\nlabel: Line Sizing\n\nnote: |\n  Consistent line-spacing,\n  even when inline elements have different line-heights.\n\nlinks:\n  - https://drafts.csswg.org/css-inline-3/#line-sizing-property\n\ncategory: global\n*/\nhtml { line-sizing: normal; }\n\n\n/* @docs\nlabel: Body Margins\n\nnote: |\n  Remove the tiny space around the edge of the page.\n\ncategory: global\n*/\nbody { margin: 0; }\n\n\n/* @docs\nlabel: Heading Sizes\n\nnote: |\n  Switch to rem units for headings\n\ncategory: typography\n*/\nh1 { font-size: 2rem; }\nh2 { font-size: 1.5rem; }\nh3 { font-size: 1.17rem; }\nh4 { font-size: 1.00rem; }\nh5 { font-size: 0.83rem; }\nh6 { font-size: 0.67rem; }\n\n\n/* @docs\nlabel: H1 Margins\n\nnote: |\n  Keep h1 margins consistent, even when nested.\n\ncategory: typography\n*/\nh1 { margin: 0.67em 0; }\n\n\n/* @docs\nlabel: Pre Wrapping\n\nnote: |\n  Overflow by default is bad...\n\ncategory: typography\n*/\npre { white-space: pre-wrap; }\n\n\n/* @docs\nlabel: Horizontal Rule\n\nnote: |\n  1. Solid, thin horizontal rules\n  2. Remove Firefox `color: gray`\n  3. Remove default `1px` height, and common `overflow: hidden`\n\ncategory: typography\n*/\nhr {\n  border-style: solid;\n  border-width: 1px 0 0;\n  color: inherit;\n  height: 0;\n  overflow: visible;\n}\n\n\n/* @docs\nlabel: Responsive Embeds\n\nnote: |\n  1. Block display is usually what we want\n  2. Remove strange space-below when inline\n  3. Responsive by default\n\ncategory: embedded elements\n*/\nimg, svg, video, canvas, audio, iframe, embed, object {\n  display: block;\n  vertical-align: middle;\n  max-width: 100%;\n}\n\n\n/* @docs\nlabel: Aspect Ratios\n\nnote: |\n  Maintain intrinsic aspect ratios when `max-width` is applied.\n  `iframe`, `embed`, and `object` are also embedded,\n  but have no intrinsic ratio,\n  so their `height` needs to be set explicitly.\n\ncategory: embedded elements\n*/\nimg, svg, video, canvas {\n  height: auto;\n}\n\n\n/* @docs\nlabel: Audio Width\n\nnote: |\n  There is no good reason elements default to 300px,\n  and audio files are unlikely to come with a width attribute.\n\ncategory: embedded elements\n*/\naudio { width: 100%; }\n\n\n/* @docs\nlabel: Image Borders\n\nnote: |\n  Remove the border on images inside links in IE 10 and earlier.\n\ncategory: legacy browsers\n*/\nimg { border-style: none; }\n\n\n/* @docs\nlabel: SVG Overflow\n\nnote: |\n  Hide the overflow in IE 10 and earlier.\n\ncategory: legacy browsers\n*/\nsvg { overflow: hidden; }\n\n\n/* @docs\nlabel: HTML5 Elements\n\nnote: |\n  Default block display on HTML5 elements\n\ncategory: legacy browsers\n*/\narticle, aside, figcaption, figure, footer, header, hgroup, main, nav, section {\n  display: block;\n}\n\n\n/* @docs\nlabel: Checkbox & Radio Inputs\n\nnote: |\n  1. Add the correct box sizing in IE 10\n  2. Remove the padding in IE 10\n\ncategory: legacy browsers\n*/\n[type='checkbox'],\n[type='radio'] {\n  box-sizing: border-box;\n  padding: 0;\n}\n","// Root Typography\n// ===============\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n/// # Herman Typography\n/// Initial styling for typographic elements in Herman.\n///\n/// @link https://www.oddbird.net/accoutrement/ Accoutrement\n/// @group style-typography\n\n// Block Reset\n// -----------\n/// Since this was initially built with accoutrement/init --\n/// a more opinionated reset --\n/// this simplified block reset\n/// helps cover the basic assumptions of the code-base\n/// @group style-typography\n* {\n  border: solid 0 currentcolor;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/// The root typographic styles provide a default font,\n/// responsive font-size, fallback font-size, and line-height.\n/// @group style-typography\n:root {\n  @include tools.font-family('sans');\n\n  font-size: tools.size('root');\n  font-size: tools.size('responsive');\n  line-height: tools.ratio('line-height');\n}\n\n// Hidden\n// ------\n/// Selected text uses a light color from the Herman color palette.\n/// @group style-typography\n[hidden] {\n  display: none !important; /* stylelint-disable-line declaration-no-important */\n}\n\n// Images\n// ------\n/// Undo the block image display\n/// caused by changing our reset\n/// from accoutrement/init to cssremedy -\n/// since that would be a noticeable user-facing change.\n/// @group style-typography\nimg {\n  display: revert;\n}\n\n// Selection\n// ---------\n/// Selected text uses a light color from the Herman color palette.\n/// @group style-typography\n::selection {\n  background-color: tools.color('callout');\n}\n\n// Mark\n// ----\n/// For search-results, we mark target text with a background color.\n/// @group style-typography\nmark {\n  background-color: tools.color('callout');\n  display: inline-block;\n  padding: 0 tools.size('quarter-shim');\n}\n\n// Links\n// -----\n/// Default links use both color and text-underline\n/// to stand out from basic text.\n/// @group style-typography\n/// @see $link\n/// @see $focus\n[href] {\n  #{config.$link} {\n    color: tools.color('action');\n    text-decoration-color: tools.color('underline');\n    text-decoration-skip: auto;\n    transition:\n      text-decoration-color 250ms,\n      color 200ms;\n  }\n\n  #{config.$focus} {\n    color: tools.color('focus');\n    text-decoration-color: currentcolor;\n  }\n}\n\n// Pre\n// ---\n/// Pre-formatted blocks use our monospace `code` font-stack,\n/// and a smaller font-size.\n/// @group style-typography\npre {\n  @include tools.font-family('code');\n\n  font-size: tools.size('code');\n  overflow: auto;\n  white-space: pre;\n}\n\n// Code\n// ----\n/// Code uses a monospace font-stack,\n/// and slightly bolder text when inline -\n/// but allows for syntax-highlighting in a block context.\n///\n/// @group style-typography\n/// @see {css} Code Blocks\ncode {\n  @include tools.font-family('code');\n\n  font-weight: bolder;\n\n  pre & {\n    display: block;\n    font-weight: normal;\n  }\n}\n\n// Is Hidden\n// ---------\n/// Text that is provided for screen-reader accessibility only,\n/// can be visually hidden without removing from the DOM.\n/// @group style-typography\n.is-hidden {\n  @include tools.is-hidden;\n}\n","@use 'sass:list';\n@use 'sass:string';\n@use 'sass:map';\n@use 'sass:meta';\n@use '../tokens';\n@use '../tokens/api';\n@use './config';\n@use './normalize';\n@use './helpers';\n@use '../tokens/inspect';\n\n/// ### Using WebFonts\n///\n/// Once you've configured your webfont data into a map,\n/// these tools will help you access the data in various ways:\n/// from creating `@font-face` imports,\n/// to calling font-families by any given alias.\n///\n/// @group type-fonts\n\n// Font [function]\n// ---------------\n/// Retrieve and normalize font data from the `$fonts` map\n///\n/// @since 2.0.0 -\n/// - BREAKING: Non-map fonts are interpreted as font-stacks\n/// - BREAKING: Normalized font-data uses proper name-quotation,\n///   and ignores missing or private names/stacks\n/// @since 1.0.0 -\n/// - NEW: Provided to access and normalize a map of font data\n///   for any key in your global `$fonts` map\n/// - NEW: Accepts `$source` map argument,\n///   for custom source-palette\n///\n/// @group type-fonts\n/// @param {*} $font -\n///   A key for accessing the desired font in `$fonts`\n/// @param {map} $source [$fonts] -\n///   Optional Accoutrement-format map of fonts\n///   to use as the origin palette\n/// @return {map} -\n///   A parsed and normalized map of font-data\n@function font($font, $source: config.$fonts) {\n  $data: api.get($source, $font);\n  $normal: normalize.font($data, $font, $source);\n\n  @return $normal;\n}\n\n// Compile Fonts\n// -------------\n/// Compile all the tokens in a font map.\n/// This is particularly useful for exporting\n/// a static version of the token map\n/// with all the Accoutrement syntax removed --\n/// e.g. for use in javascript or documentation.\n///\n/// @since 4.0.0 -\n/// - NEW: Provides an export option for font token maps\n///\n/// @group type-fonts\n///\n/// @param {map} $map [$fonts] -\n///   The map to be compiled\n/// @param {map | null} $source [$fonts] -\n///   A map of reference tokens that can be used\n///   for resolving fonts.\n///   (defaults to the global `$fonts` map)\n/// @return {map} -\n///   A copy of the original map,\n///   with all token values resolved\n@function compile-fonts($map: config.$fonts, $source: config.$fonts) {\n  $source: map.merge($source or (), $map);\n\n  @return tokens.map-compile-with($map, meta.get-function('font'), $source);\n}\n\n// Font Family [function]\n// ----------------------\n/// Access a font-family from your `$fonts` map,\n/// with name and font-stack.\n///\n/// @since 1.0.0 -\n/// - NEW: Accepts `$source` map argument,\n///   for custom source-palette\n/// @since type-4.0.0 -\n/// - BUGFIX: Provides the correct name for fonts when an alias is given\n///\n/// @group type-fonts\n/// @example scss\n///   $fonts: (\n///     'sans': (\n///       'name': 'FranklinGothic',\n///       'stack': (Helvetica, Arial, sans-serif),\n///     ),\n///   );\n///\n///   html {\n///     font-family: tools.font-family('sans');\n///   }\n///\n/// @param {string} $key -\n///   The key-name of a font in your `$fonts` map.\n/// @param {map} $source [$fonts] -\n///   Optional Accoutrement-format map of fonts\n///   to use as the origin palette\n/// @return {String} -\n///   The full font-stack for the given font,\n///   ready for output with the `font-family` property.\n@function font-family($key, $source: config.$fonts) {\n  $font: font($key, $source);\n\n  @return map.get($font, 'stack');\n}\n\n// Font Family [mixin]\n// -------------------\n/// Output a font-stack to font-family based on your `$fonts` configuration.\n///\n/// @since 1.0.0 -\n/// - NEW: Accepts `$source` map argument,\n///   for custom source-palette\n///\n/// @group type-fonts\n/// @example scss\n///   $fonts: (\n///     'FranklinGothic': (\n///       'stack': (Helvetica, Arial, sans-serif),\n///     ),\n///     'sans': '#FranklinGothic',\n///   );\n///\n///   html {\n///     @include tools.font-family('sans');\n///   }\n///\n/// @param {string} $key -\n///   The key-name of a font in your `$fonts` map.\n/// @param {map} $source [$fonts] -\n///   Optional Accoutrement-format map of fonts\n///   to use as the origin palette\n@mixin font-family($key, $source: config.$fonts) {\n  font-family: font-family($key, $source);\n}\n\n// Font Face [mixin]\n// -----------------\n/// Import any local webfont defined in your `$fonts` configuration\n/// (variants without a path will not be imported).\n///\n/// @since 3.0.0 -\n/// - NEW: Supports `display` setting in font-maps\n/// @since 1.0.0 -\n/// - NEW: Accepts `$source` map argument,\n///   for custom source-palette\n/// @since type-4.0.0 -\n/// - BREAKING: No longer accepts the `$formats` parameter\n///\n/// @group type-fonts\n/// @example scss\n///   $fonts: (\n///     'body-font': (\n///       'name': 'Source Sans Pro',\n///       'formats': 'woff2' 'woff' 'eot',\n///       'normal': 'sans/sourcesanspro-regular-webfont',\n///       'italic': 'sans/sourcesanspro-italic-webfont',\n///       'bold': 'sans/sourcesanspro-bold-webfont',\n///     ),\n///   );\n///   @include tools.font-face('body-font');\n///\n/// @param {string} $key -\n///   The key-name of a font in your `$fonts` map\n/// @param {map} $source [$fonts] -\n///   Optional Accoutrement-format map of fonts\n///   to use as the origin palette\n/// @output `@font-face` import blocks for any defined font-variants.\n@mixin font-face($key, $source: config.$fonts) {\n  $font: font($key, $source);\n  $variants: helpers.font-get-variants($font);\n  $name: map.get($font, 'name');\n\n  @if (list.length($variants) > 0) {\n    $unicode: map.get($font, 'unicode-range');\n    $display: map.get($font, 'display');\n\n    @each $variant, $data in $variants {\n      $weight: list.nth($variant, 1);\n      $style: list.nth($variant, 2);\n\n      @include helpers.import-font-face(\n        $name,\n        $weight,\n        $style,\n        $data,\n        $unicode,\n        $display\n      );\n    }\n  }\n}\n\n// Import WebFonts [mixin]\n// -----------------------\n/// Find all the fonts that include data for imports,\n/// and generate `@font-face` blocks for each individual font and variant.\n///\n/// @since 2.0.0 -\n/// - NEW: Accepts `$source` parameter,\n///   which uses global `$fonts` by default\n/// - BREAKING: No longer imports private fonts,\n///   but will import a direct alias of the private font\n/// @since 1.0.0 -\n/// - BREAKING: No longer accepts the `$fonts` parameter\n/// @since type-4.0.0 -\n/// - BREAKING: No longer accepts the `$formats` parameter\n///\n/// @group type-fonts\n/// @example scss\n///   $fonts: (\n///     'body-font': (\n///       'name': 'Source Sans Pro',\n///       'formats': 'woff2' 'woff' 'eot',\n///       'normal': 'sans/sourcesanspro-regular-webfont',\n///       'italic': 'sans/sourcesanspro-italic-webfont',\n///       'bold': 'sans/sourcesanspro-bold-webfont',\n///     ),\n///     // alias keys, and fonts without path data will be ignored…\n///     'alias': '#body-font',\n///     'google-font': (\n///       'source': 'https://fonts.google.com/',\n///     ),\n///   );\n///   @include tools.import-webfonts;\n///\n/// @param {map} $source [$fonts] -\n///   Optional Accoutrement-format map of fonts\n///   to use as the origin palette\n/// @output Any number of `@font-face` blocks.\n@mixin import-webfonts($source: config.$fonts) {\n  @each $key, $font in $source {\n    @if not\n      inspect.is-alias-for($source, $key) and not\n      inspect.is-private-token($key)\n    {\n      @include font-face($key);\n    }\n  }\n}\n","// Hidden\n// ======\n\n/// # Accessibility\n///\n/// A simple set of utilities\n/// for handling text-visibility\n/// and screen-reader accessibility\n/// across your site.\n///\n/// @group type-a11y\n\n// Is Hidden\n// ---------\n/// Hide an element using either the `clip` or `position` method.\n/// @group type-a11y\n/// @param {'clip' | 'position'} $method ['clip'] -\n///   The hiding method to use.\n@mixin is-hidden($method: 'clip') {\n  @if $method == 'position' {\n    @include _is-hidden-position;\n  } @else {\n    @include _is-hidden-clip;\n  }\n}\n\n// Is Hidden -- Position\n// ---------------------\n/// Hide an element by positioning it off the page.\n/// @group type-a11y\n/// @access private\n@mixin _is-hidden-position {\n  left: -9999px;\n  pointer-events: none;\n  position: absolute;\n  top: -9999px;\n}\n\n// Is Hidden -- Clip\n// -----------------\n/// Hide an element by clipping it in place.\n/// @group type-a11y\n/// @access private\n@mixin _is-hidden-clip {\n  /* stylelint-disable-next-line property-no-deprecated */\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(1px 1px 1px 1px);\n  height: 1px;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  width: 1px;\n}\n","@use 'sass:meta';\n@use 'sass:map';\n@use 'sass:string';\n@use './config';\n@use '../tokens';\n@use '../tokens/api';\n\n/// # Accessing Sizes\n/// @group scale-sizes\n\n// Size [function]\n// ---------------\n/// Access a named size in your `$sizes` map,\n/// using any comparable units.\n///\n/// @since 1.0.0 -\n/// - BREAKING: The previous `$units…` vararg\n///   has been replaced with `$do` map argument,\n///   for flexible on-the-fly adjustments.\n///   Non-map `$do` values are converted to\n///   `('convert-units': $do)` before processing,\n///   to provide a shortcut for unit-conversions.\n///   `size('root', 'cm')` will continue to work,\n///   but `size('root', 'em', 10px)` should be changed to\n///   `size('root', 'em' 10px)` (with all unit args in a single list)\n/// - NEW: Accepts `$source` map argument,\n///   for custom source-palette\n///\n/// @group scale-sizes\n///\n/// @param {string} $size -\n///   The name of any size in your configuration\n/// @param {map | unit-args | null} $do [null] -\n///   A map of function/ratio adjustments to run on the returned value,\n///   or a unit followed by any necessary arguments\n///   for conversion\n/// @param {map} $source [$sizes] -\n///   Optional Accoutrement-format map of sizes to use as the origin palette\n/// @return {length} -\n///   The calculated length, in the requested units.\n@function size($size, $do: null, $source: config.$sizes) {\n  @if ($do) and (meta.type-of($do) != 'map') {\n    $do: (\n      'to': $do,\n    );\n  }\n\n  $return: $size;\n\n  @if (meta.type-of($size) == 'number') {\n    // apply adjustments\n    @if $do {\n      $return: api.compile($source, $size $do);\n    }\n  } @else {\n    // get the desired token\n    $return: api.get($source, $size, $do);\n  }\n\n  @return if(\n    sass((meta.type-of($return) == 'string')): string.unquote($return);\n    else: $return\n  );\n}\n\n// Compile Sizes\n// -------------\n/// Compile all the tokens in a size map.\n/// This is particularly useful for exporting\n/// a static version of the token map\n/// with all the Accoutrement syntax removed --\n/// e.g. for use in javascript or documentation.\n///\n/// @since 4.0.0 -\n/// - NEW: Provides an export option for size token maps\n///\n/// @group scale-sizes\n///\n/// @param {map} $map [$sizes] -\n///   The map to be compiled\n/// @param {map | null} $source [$sizes] -\n///   A map of reference tokens that can be used\n///   for resolving sizes.\n///   (defaults to the global `$sizes` map)\n/// @return {map} -\n///   A copy of the original map,\n///   with all token values resolved\n@function compile-sizes($map: config.$sizes, $source: config.$sizes) {\n  $source: map.merge($source or (), $map);\n\n  @return tokens.map-compile-with(\n    $map,\n    meta.get-function('size'),\n    null,\n    $source\n  );\n}\n\n// Negative [function]\n// -------------------\n/// Return the inverse value of any length,\n/// in comparable units.\n///\n/// @since 1.0.0 -\n/// - BREAKING: The previous `$units…` vararg\n///   has been replaced with `$do` map argument,\n///   for flexible on-the-fly adjustments.\n///   Non-map `$do` values are converted to\n///   `('convert-units': $do)` before processing,\n///   to provide a shortcut for unit-conversions.\n///   `size('root', 'cm')` will continue to work,\n///   but `size('root', 'em', 10px)` should be changed to\n///   `size('root', 'em' 10px)` (with all unit args in a single list)\n/// - NEW: Accepts `$source` map argument,\n///   for custom source-palette\n///\n/// @group scale-sizes\n///\n/// @param {string | length | list} $size -\n///   The name of a size in your configuration (e.g. `line-height`),\n///   or a length to be converted into different units (e.g. `24px`),\n///   or a base-size and adjustments to be made\n///   (e.g. `24px (scale: '_minor-third' 2)`).\n///   For the sake of consistent documentation,\n///   I recommend keeping adjustments in the configuration\n///   whenever possible.\n/// @param {map | unit-args | null} $do [null] -\n///   A map of function/ratio adjustments to run on the returned value,\n///   or a unit followed by any necessary arguments\n///   for conversion\n/// @param {map} $source [$sizes] -\n///   Optional Accoutrement-format map of sizes to use as the origin palette\n/// @return {length} -\n///   The calculated negative length, in the requested units.\n@function negative($size, $do: null, $source: config.$sizes) {\n  $size: size($size, $do, $source);\n\n  @if (meta.type-of($size) == 'string') {\n    @if (string.index($size, 'calc(') == 1) {\n      $size: string.slice($size, 6, -2);\n    }\n\n    @return 'calc(-1 * (#{$size}))';\n  }\n\n  @return -1 * $size;\n}\n\n// Square [mixin]\n// --------------\n/// Create a square by setting equal CSS `height` and `width` properties\n/// with the given size & unit value.\n///\n/// @since 1.0.0 -\n/// - BREAKING: The previous `$units…` vararg\n///   has been replaced with `$do` map argument,\n///   for flexible on-the-fly adjustments.\n///   Non-map `$do` values are converted to\n///   `('convert-units': $do)` before processing,\n///   to provide a shortcut for unit-conversions.\n///   `size('root', 'cm')` will continue to work,\n///   but `size('root', 'em', 10px)` should be changed to\n///   `size('root', 'em' 10px)` (with all unit args in a single list)\n/// - NEW: Accepts `$source` map argument,\n///   for custom source-palette\n///\n/// @group scale-sizes\n///\n/// @param {string | length | list} $size -\n///   The name of a size in your configuration (e.g. `line-height`),\n///   or a length to be converted into different units (e.g. `24px`),\n///   or a base-size and adjustments to be made\n///   (e.g. `24px ('_minor-third': 2)`).\n///   For the sake of consistent documentation,\n///   I recommend keeping adjustments in the configuration\n///   whenever possible.\n/// @param {map | unit-args | null} $do [null] -\n///   A map of function/ratio adjustments to run on the returned value,\n///   or a unit followed by any necessary arguments\n///   for conversion\n/// @param {map} $source [$sizes] -\n///   Optional Accoutrement-format map of sizes to use as the origin palette\n/// @output -\n///   Equal CSS height and width properties,\n///   set to the given size and units.\n@mixin square($size, $do: null, $source: config.$sizes) {\n  $size: size($size, $do, $source);\n\n  height: $size;\n  width: $size;\n}\n","// Icons\n// =====\n\n@use 'pkg:accoutrement' as tools;\n\n/// # Herman Icons\n/// Herman doesn't use very many icons internally…\n/// @icons assets/svg/\n/// @group style-icons\n\n/// ## macro `icon()`\n/// Icons should be added to the html using our\n/// `icon()` utility macro in Nunjucks.\n///\n/// - `name` :: {`string`}<br/>\n///   The string ID used to identify the icon desired.\n/// - `alt=none` :: {`string` | `none`}<br/>\n///   Alternate text for the icon will be visually hidden,\n///   but available to screen-readers.\n/// - `size=none` :: {`string` | `none`}<br/>\n///   Currently supported icon sizes include\n///   `'nav-icon'` and `'footer-logo'`.\n/// - `class=none` :: {`string` | `none`}<br/>\n///   Any classes that should be applied to the icon.\n///\n/// @group style-icons\n/// @example njk\n///   {% import 'utility.macros.njk' as utility %}\n///   {{ utility.icon('menu', size='nav-icon') }}\n\n// Data-Icon\n// ---------\n/// Icons inherit the color of their surroundings,\n/// and default to a `1em` square if no other dimensions are provided.\n/// @group style-icons\n[data-icon] {\n  @include tools.square(1em);\n\n  fill: currentcolor;\n}\n\n// Icon-Size: Nav\n// --------------\n/// Used for the menu-bar icon.\n/// @group style-icons\n[data-icon-size='nav-icon'] {\n  @include tools.square('nav-icon');\n}\n\n// Icon-Size: Footer Logo\n// ----------------------\n/// Used for the footer Herman logo.\n/// @group style-icons\n[data-icon-size='footer-logo'] {\n  @include tools.square('footer-logo');\n}\n","// Sample Previews\n// ===============\n\n@use 'pkg:accoutrement' as tools;\n@use '../samples/colors';\n\n// Add color sample CSS custom properties\n:root {\n  @include tools.colors--(colors.$demo-colors);\n}\n","@use 'api';\n@use 'inspect';\n@use '../vars';\n@use 'sass:map';\n\n/// # Tokens » Custom Properties\n/// There are many cases where it can be useful\n/// to convert a Sass token map into CSS custom properties.\n/// Here are some tools to help.\n/// @group token-vars\n\n// Token--\n// -------\n/// Set a single custom property based on a map-token,\n/// with optional alias, fallback, and prefixing\n///\n/// @since 2.0.0 -\n/// - NEW: Initial release\n///\n/// @group token-vars\n/// @example scss\n///   $colors: (\n///     '_brand': hsl(120, 50%, 50%),\n///     'text': '#_brand' ('color.scale': ('lightness': -50%)),\n///     'border': '#text',\n///   );\n///   .example {\n///     @include tools.token--($colors, 'border');\n///     @include tools.token--($colors, 'outline', 'border', red);\n///   }\n///\n/// @param {map} $map -\n///   Accoutrement map of tokens to use as source\n/// @param {*} $token -\n///   Token name available in the source `$map`\n/// @param {string | null} $value [null] -\n///   Optional new value for the given token\n/// @param {*} $fallback [true] -\n///   The optional fallback value for a `var()` function:\n///   - `true` will generate a fallback based on the token value\n///   - A token name will fallback to the value of that\n///     CSS variable and then to the token's calculated value\n///   - Any other fallback will be passed through unchanged\n/// @param {string | null} $prefix [null] -\n///   Optional prefix used for naming token variables\n@mixin token--($map, $token, $value: null, $fallback: true, $prefix: null) {\n  $prop: vars.ident($token, $prefix);\n  $val: $value or $token;\n  $ref: $value or inspect.is-alias-for($map, $val);\n\n  @if ($ref) {\n    $val: var-token($map, $ref, $fallback, $prefix);\n  } @else {\n    $val: api.get($map, $val);\n  }\n\n  #{$prop}: $val;\n}\n\n// Tokens--\n// --------\n/// Convert any Accoutrement Tokens map\n/// into CSS custom properties (aka variables).\n///\n/// - Token names that start with `_` or `-` are considered \"private\"\n///   and will not be output as variables\n/// - Tokens that contain a simple alias with no adjustments\n///   will be output with a `var()` value,\n///   keeping the alias relationship intact\n///\n/// @since 2.0.0 -\n/// - NEW: Initial release\n///\n/// @group token-vars\n/// @example scss\n///   $colors: (\n///     '_brand': hsl(120, 50%, 50%),\n///     'text': '#_brand' ('color.scale': ('lightness': -50%)),\n///     'border': '#text',\n///   );\n///   html {\n///     @include tools.tokens--($colors, 'color-');\n///   }\n///\n/// @param {map} $map -\n///   Accoutrement map of tokens to set as CSS variables\n/// @param {string | null} $prefix [null] -\n///   Optional prefix for naming token variables\n/// @output\n///   Custom properties for all public tokens in the map\n@mixin tokens--($map, $prefix: null) {\n  @each $token in map.keys($map) {\n    @if not inspect.is-private-token($token) {\n      @include token--($map, $token, $prefix: $prefix);\n    }\n  }\n}\n\n// As-Var\n// ------\n/// Access the CSS variable associated with a given token,\n/// along with a fallback value based on the token itself\n///\n/// @since 2.0.0 -\n///   - NEW: Initial release\n///\n/// @group token-vars\n/// @example scss\n///   $colors: (\n///     '_brand': hsl(120, 50%, 50%),\n///     'text': '#_brand' ('color.scale': ('lightness': -50%)),\n///     'border': '#text',\n///   );\n///   .example {\n///     border-color: tools.var-token($colors, 'border');\n///     color: tools.var-token($colors, 'text', black);\n///   }\n///\n/// @param {map} $map -\n///   Accoutrement map of tokens to use as source\n/// @param {*} $token -\n///   Token name available in the source `$map`\n/// @param {*} $fallback [true] -\n///   The optional fallback value for a `var()` function:\n///   - `true` will try to generate a fallback based on the color value\n///   - A color name will fallback to the value of that\n///     CSS variable and then to the color's calculated value\n///   - Any other fallback will be passed through unchanged\n/// @param {string | null} $prefix [null] -\n///   Optional prefix used for naming token variables\n/// @return {string} -\n///   CSS variable call, in the format:\n///   `var(--<color>, <fallback>)`\n@function var-token($map, $token, $fallback: true, $prefix: null) {\n  $var: vars.ident($token, $prefix);\n\n  @if ($fallback == true) {\n    @if map.has-key($map, $token) {\n      @return var($var, api.get($map, $token));\n    }\n  } @else if map.has-key($map, $fallback) {\n    @return var($var, var-token($map, $fallback, true, $prefix));\n  } @else if $fallback {\n    @return var($var, $fallback);\n  }\n\n  @return var($var);\n}\n","// Root Layout\n// ===========\n\n[data-herman] {\n  overflow-x: hidden;\n}\n","// Layout Regions\n// ==============\n/// # Herman Layout Regions\n/// The Herman layout is comprised of several \"regions\" --\n/// such as the banner, nav, and main areas --\n/// as well as the `app` and `container` wrapping regions.\n/// @group style-regions\n\n@use 'pkg:accoutrement' as tools;\n\n// General\n// -------\n/// All regions are full-width by default.\n///\n/// @group style-regions\n[data-region] {\n  width: 100%;\n}\n\n// App\n// ---\n/// The `app` region contains the entire application.\n///\n/// @group style-regions\n[data-region='app'] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  margin: 0 auto;\n  min-height: 100vh;\n  padding: 0;\n}\n\n// Container\n// ---------\n/// The `container` region acts as a layout wrapper\n/// for the navigation and main content.\n///\n/// @group style-regions\n[data-region='container'] {\n  display: flex;\n  flex: 1 1 auto;\n  position: relative;\n\n  @include tools.above('page-break') {\n    justify-content: flex-end;\n  }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\n@use '../scale';\n@use '../../sass/tokens';\n@use '../internal/throw';\n@use 'query-utils' as utils;\n\n/// # Media Queries\n/// @group layout-queries\n\n// Breakpoints\n// -----------\n/// Establish a map of named breakpoints.\n///\n/// If using [Accoutrement Scale](https://www.oddbird.net/accoutrement/docs/scale.html),\n/// you can use the scale syntax\n/// for describing size-relationships and adjustments –\n/// and even reference `$sizes` as though they are `$breakpoints`.\n/// Otherwise, the map should contain only valid CSS length values.\n///\n/// @since 0.1.0 -\n/// - BREAKING: Uses the new [shared](tokens.html) map syntax,\n///   for internal references and adjustments\n///\n/// @group layout-queries\n/// @link https://zellwk.com/blog/media-query-units/\n///   PX, EM, or REM Media Queries?\n/// @example scss - defining breakpoints\n///   tools.$breakpoints: (\n///     'small': 30em,\n///     'medium': 45em,\n///   );\n/// @example scss - using Accoutrement-scale\n///   tools.$breakpoints: (\n///     'small': 30em ('convert-units': 'browser-ems'),\n///     'medium': '#small' ('times': 1.5),\n///   );\n///\n/// @type map\n$breakpoints: () !default;\n\n// Break [function]\n// ----------------\n/// Return a breakpoint from the `$breakpoint` map,\n/// or the Accoutrement-scale `$sizes` map if it's available.\n///\n/// @since 1.0.0 -\n/// - NEW: Accepts `$do` map argument,\n///   for on-the-fly adjustments\n/// - NEW: Accepts `$source` map argument,\n///   for custom breakpoint source-palette\n/// - NEW: Accepts `$scale` boolean argument,\n///   to turn off access to [scale](scale.html) plugin `$sizes` map\n///\n/// @group layout-queries\n///\n/// @param {string} $break -\n///   The name or value of a breakpoint\n/// @param {map | null} $do [null] -\n///   A map of function/ratio adjustments to run on the returned value\n/// @param {map} $source [$breakpoints] -\n///   Optional Accoutrement-format map of breakpoints\n///   to use as the origin palette\n/// @param {boolean} $scale [true] -\n///   By default, we merge in any `$sizes` available\n///   from the [scale](scale.html) plugin --\n///   making both `$breakpoints` and `$sizes` keys available\n/// @return {length} -\n///   The retrieved value of a named breakpoint\n/// @throws `$break` is not a valid length or keyword\n@function break($break, $do: null, $source: $breakpoints, $scale: true) {\n  @if ($scale) {\n    $source: map.merge(scale.$sizes, $source);\n  }\n\n  @if (meta.type-of($break) == 'number') and (math.unit($break)) {\n    // apply adjustments\n    @if $do {\n      @return tokens.compile($source, $break $do);\n    }\n\n    // return color without changes\n    @return $break;\n  }\n\n  // get breakpoint\n  $return: tokens.get($source, $break, $do);\n\n  // validate\n  @if (meta.type-of($return) != 'number') or (math.is-unitless($return)) {\n    @return throw.error(\n      '`#{$break}` is not a valid length or keyword for $break',\n      'break'\n    );\n  }\n\n  @return $return;\n}\n\n// Below [mixin]\n// -------------\n/// Generate a max–<`width`/`height`> query,\n/// for styling elements below the given viewport width.\n///\n/// To help with overlapping min/max queries,\n/// we remove `1px` (or `0.01em`) from every max value by default.\n/// You can adjust that setting\n/// to adjust min values\n/// or avoid adjustments\n/// using the global `$adjust-query-overlap` setting.\n///\n/// @since 2.0.0 -\n/// - BREAKING: min/max adjustments applied to all units (not only px/em/rem)\n/// - NEW: min/max adjustments respect `$adjust-query-overlap` global setting\n///\n/// @group layout-queries\n/// @example scss\n///   @include tools.below(30em) {\n///     html { background: red; }\n///   }\n/// @example scss\n///   tools.$breakpoints: ('red': 30em);\n///\n///   @include tools.below('red') {\n///     html { background: red; }\n///   }\n///\n/// @param {length | string} $max -\n///   The name of a documented breakpoint/size,\n///   or an arbitarty length to use in the query.\n/// @param {'width' | 'height'} $prop ['width'] -\n///   The property (width or height) to test against,\n///   for a result of e.g. `(max-width: 30em)`.\n@mixin below($max, $prop: 'width') {\n  $value: break($max);\n  $value: utils.nudge-query($value, 'max');\n\n  @media (max-#{$prop}: #{$value}) {\n    @content;\n  }\n}\n\n// Above [mixin]\n// -------------\n/// Generate a min-<`width`/`height`> query,\n/// for styling elements above the given viewport width.\n///\n/// To help with overlapping min/max queries,\n/// we remove `1px` (or `0.01em`) from max values by default.\n/// You can adjust that setting\n/// to adjust min values\n/// or avoid adjustments\n/// using the global `$adjust-query-overlap` setting.\n///\n/// @since 2.0.0 -\n/// - BREAKING: min/max adjustments applied to all units (not only px/em/rem)\n/// - NEW: min/max adjustments respect `$adjust-query-overlap` global setting\n///\n/// @group layout-queries\n/// @example scss\n///   @include tools.above(50em) {\n///     html { background: green; }\n///   }\n/// @example scss\n///   tools.$breakpoints: ('green': 50em);\n///\n///   @include tools.above('green') {\n///     html { background: green; }\n///   }\n///\n/// @param {length | string} $min -\n///   The name of a documented breakpoint/size,\n///   or an arbitrary length to use in the query.\n/// @param {'width' | 'height'} $prop ['width'] -\n///   The property (width or height) to test against,\n///   for a result of e.g. `(min-width: 30em)`.\n@mixin above($min, $prop: 'width') {\n  $value: break($min);\n  $value: utils.nudge-query($value, 'min');\n\n  @media (min-#{$prop}: #{$value}) {\n    @content;\n  }\n}\n\n// Between [mixin]\n// ---------------\n/// Generate a min-and-max-<`width`/`height`> query,\n/// for styling elements between given viewport widths.\n///\n/// To help with overlapping min/max queries,\n/// we remove `1px` (or `0.01em`) from every max value by default.\n/// You can adjust that setting\n/// to adjust min values\n/// or avoid adjustments\n/// using the global `$adjust-query-overlap` setting.\n///\n/// @since 2.0.0 -\n/// - BREAKING: min/max adjustments applied to all units (not only px/em/rem)\n/// - NEW: min/max adjustments respect `$adjust-query-overlap` global setting\n///\n/// @group layout-queries\n/// @example scss\n///   @include tools.between(30em, 50em) {\n///     html { background: yellow; }\n///   }\n/// @example scss\n///   tools.$breakpoints: (\n///     'red': 30em,\n///     'green': 50em,\n///   );\n///\n///   @include tools.between('red', 'green') {\n///     html { background: yellow; }\n///   }\n///\n/// @param {length | string} $min -\n///   The name of a documented breakpoint/size,\n///   or an arbitarty length to use as a minimum in the query.\n/// @param {length | string} $max -\n///   The name of a documented breakpoint/size,\n///   or an arbitarty length to use as a maximum in the query.\n/// @param {'width' | 'height'} $prop ['width'] -\n///   The property (width or height) to test against,\n///   for a result of e.g. `(min-width: 30em)`.\n@mixin between($min, $max, $prop: 'width') {\n  $value-min: break($min);\n  $value-max: utils.nudge-query($value-min, 'min');\n  $value-max: break($max);\n  $value-max: utils.nudge-query($value-max, 'max');\n\n  @media (min-#{$prop}: #{$value-min}) and (max-#{$prop}: #{$value-max}) {\n    @content;\n  }\n}\n","// Banner Styles\n// =============\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n// Banner Region\n// -------------\n/// Layout styles for Herman's top-banner region.\n///\n/// @group style-banner\n/// @example njk\n///   {% import 'utility.macros.njk' as utility %}\n///   <header data-region=\"banner\">\n///     <button data-nav-toggle>\n///       {{ utility.icon('menu', size='nav-icon') }}\n///     </button>\n///     <div class=\"project-title\">\n///       <a href=\"index.html\" rel=\"home\" class=\"project-name\">Herman</a>\n///       <span class=\"project-version\">1.0.0</span>\n///     </div>\n///   </header>\n[data-region='banner'] {\n  @include config.banner-arrow;\n  @include tools.z-index('banner');\n\n  align-items: center;\n  display: flex;\n  padding: tools.size('shim');\n}\n\n// Project Title\n// -------------\n/// Used for the top-banner project title,\n/// including both the name and version of the project.\n///\n/// @group style-banner\n/// @example html\n///   <div class=\"project-title\">\n///     <a href=\"index.html\" rel=\"home\" class=\"project-name\">Herman</a>\n///     <span class=\"project-version\">1.0.0</span>\n///   </div>\n.project-title {\n  align-items: baseline;\n  display: flex;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n// Project Name\n// ------------\n/// Specific styling for the top-banner project name.\n///\n/// @group style-banner\n/// @example html\n///   <a href=\"index.html\" rel=\"home\" class=\"project-name\">Herman</a>\n.project-name {\n  font-size: tools.size('h1');\n  font-weight: bold;\n  padding-left: tools.size('half-shim');\n  padding-right: tools.size('half-shim');\n\n  #{config.$link} {\n    text-decoration: none;\n  }\n}\n\n// Project Title\n// -------------\n/// Less prominent text for the top-banner project version.\n///\n/// @group style-banner\n/// @example html\n///   <span class=\"project-version\">1.0.0</span>\n.project-version {\n  @include tools.font-family('sans');\n\n  color: tools.color('text-light');\n  font-size: tools.size('h3');\n}\n\n// Nav Toggle\n// ----------\n/// The navigation-menu toggle is only visible on small screens.\n///\n/// @group style-banner\n/// @example njk\n///   {% import 'utility.macros.njk' as utility %}\n///   <button data-nav-toggle>\n///     {{ utility.icon('menu', size='nav-icon') }}\n///   </button>\n[data-nav-toggle] {\n  color: tools.color('action');\n  padding: tools.size('half-shim');\n\n  @include tools.above('page-break') {\n    padding-left: tools.size('shim');\n    padding-right: tools.size('shim');\n  }\n\n  @include tools.above('nav-break') {\n    display: none;\n  }\n\n  #{config.$focus},\n  &[aria-pressed='true'] {\n    color: tools.color('focus');\n    outline: 0;\n  }\n}\n","// Section Arrow\n// =============\n/// # Herman Banner Region\n/// Styles related to the top banner in generated Herman docs.\n/// @group style-banner\n\n@use 'pkg:accoutrement' as tools;\n\n// Banner Arrow\n// ------------\n/// Apply a bottom-border with centered down-arrow triangle,\n/// for use as a divider between the banner and main content.\n///\n/// @group style-banner\n///\n/// @parameter {color | string} $color ['theme-dark'] -\n///   The color of the border/arrow line\n/// @parameter {color | string} $background ['background'] -\n///   The background color above the border/arrow,\n///   used to make it an arrow-outline rather than a solid triangle\n///\n/// @example scss\n///   [data-region='banner'] {\n///     @include config.banner-arrow;\n///   }\n/// @example html\n///   <header data-region=\"banner\">\n///     Hello World\n///   </header>\n@mixin banner-arrow($color: 'theme-dark', $background: 'background') {\n  border-bottom: tools.size('arrow-border') solid tools.color($color);\n  box-shadow: 0 2px 2px tools.color('shadow');\n  display: block;\n  position: relative;\n  width: 100%;\n\n  @include tools.wrap-content('') {\n    border: tools.size('arrow-depth') solid transparent;\n    border-top-color: tools.color($color);\n    border-width: tools.size('arrow-depth') tools.size('arrow-side') 0;\n    left: 50%;\n    position: absolute;\n    top: 100%;\n    transition: border-width 200ms;\n  }\n\n  @include tools.before('') {\n    margin-top: tools.size('arrow-border');\n    transform: translateX(-50%) translateY(-2px);\n  }\n\n  @include tools.after('') {\n    border-top-color: tools.color($background);\n    transform: translateX(-50%) translateY(-4px);\n  }\n}\n","@use 'sass:list';\n\n// Pseudo Elements\n// ===============\n\n/// # Pseudo-Elements\n///\n/// Some shortcuts for creating `::before` and `::after` pseudo-elements.\n///\n/// @group type-pseudo\n\n// Before\n// ------\n/// Add generated content `:before` an element.\n///\n/// @since 4.0.0 -\n/// - NEW: The default value for `$content` is an empty string\n/// @group type-pseudo\n/// @param {String} $content [''] -\n///   A value for the `content` property.\n@mixin before($content: '') {\n  &::before {\n    content: $content;\n    @content;\n  }\n}\n\n// After\n// -----\n/// Add generated content `:after` an element.\n///\n/// @since 4.0.0 -\n/// - NEW: The default value for `$content` is an empty string\n/// @group type-pseudo\n/// @param {String} $content [''] -\n///   A value for the `content` property.\n@mixin after($content: '') {\n  &::after {\n    content: $content;\n    @content;\n  }\n}\n\n// Wrap Content\n// ------------\n/// Add generated content `:before` and `:after` an element.\n/// @group type-pseudo\n/// @param {List} $content -\n///   One or two values to be used for the `content` property.\n///   A single string will be used `:before` and `:after`.\n@mixin wrap-content($content: '“' '”') {\n  $_before: list.nth($content, 1);\n\n  &::before,\n  &::after {\n    content: $_before;\n    @content;\n  }\n\n  @if list.length($content) > 1 {\n    &::after {\n      content: list.nth($content, 2);\n    }\n  }\n}\n","@use 'sass:meta';\n@use 'sass:list';\n\n// Z-Index\n// =======\n\n// Z-Index\n// -------\n/// A list of named z-index layers, from lowest to highest index.\n/// Nest lists (one level only) to establish a new z-index context:\n/// The first item will be indexed based on top-level list position,\n/// while additional values are indexed\n/// by their position in the nested list.\n///\n/// @group layout-z-index\n/// @example scss\n///   $z-index: (\n///     'main', // 1\n///     'sidebar', // 2\n///     'banner' 'active-nav' 'dropdown', // 3 1 2\n///     'message', // 4\n///     'modal', // 5\n///   );\n///\n/// @type list\n$z-index: () !default;\n\n// Z-Index [function]\n// ------------------\n/// Return the numeric index of a named layer in your `$z-index` variable.\n///\n/// @since 1.0.0 -\n/// No longer type-check output,\n/// to allow CSS variables and other non-number values\n///\n/// @group layout-z-index\n///\n/// @param {string} $layer -\n///   The name of a z-index layer in your configuration.\n/// @require {variable} $z-index\n/// @return {number} -\n///   The z-index value associated with the given layer in your configuration.\n@function z-index($layer) {\n  $index: list.index($z-index, $layer);\n  $nested: null;\n\n  @if $index {\n    @return $index;\n  } @else {\n    @for $i from 1 through list.length($z-index) {\n      $stack: list.nth($z-index, $i);\n      $index: $i;\n      $nested: list.index($stack, $layer);\n\n      @if meta.type-of($nested) == 'number' {\n        @if $nested == 1 {\n          @return $index;\n        } @else if $nested > 1 {\n          @return $nested - 1;\n        }\n      }\n    }\n  }\n\n  @return $layer;\n}\n\n// Z-Index [mixin]\n// ---------------\n/// Output the `z-index` property and value of a given layer\n/// in your `$z-index` configuration.\n/// @group layout-z-index\n/// @param {string} $layer -\n///   The name of a z-index layer in your configuration.\n/// @output -\n///   The z-index property with a value based on your configuration.\n@mixin z-index($layer) {\n  z-index: z-index($layer);\n}\n","// Navigation Layout\n// =================\n/// # Herman Navigation Region\n/// Styles related to the navigation sidebar in generated Herman docs.\n/// @group style-nav\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n// Nav Region\n// ==========\n/// Layout and styles for the navigation region.\n///\n/// @group style-nav\n/// @example html\n///   <div data-region=\"container\" style=\"min-height: 12em;\">\n///     <nav data-region=\"nav\" aria-expanded=\"true\">\n///       Navigation Region…\n///     </nav>\n///     <main data-region=\"main\">\n///       Pellentesque habitant morbi tristique\n///       senectus et netus et malesuada fames ac turpis egestas.\n///       Vestibulum tortor quam, feugiat vitae, ultricies eget,\n///       tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.\n///     </main>\n///   </div>\n[data-region='nav'] {\n  @include tools.z-index('sidebar');\n\n  align-items: stretch;\n  display: flex;\n  flex-direction: column;\n  padding: tools.size('gutter');\n  white-space: nowrap;\n  width: auto;\n\n  @include config.invert-colors;\n\n  @include tools.below('nav-break') {\n    box-shadow: 0 0 tools.size('half-shim') tools.color('shadow');\n    inset: 0 auto 0 0;\n    position: absolute;\n    transform: translateX(-102%);\n    transition: transform 0.4s;\n\n    &[aria-expanded='true'] {\n      transform: translateX(0);\n    }\n  }\n\n  @include tools.above('nav-break') {\n    flex: 0 0 auto;\n  }\n}\n","@use '../internal/function';\n@use '../internal/type';\n@use '../internal/throw';\n@use '../tokens' as api;\n@use '../utils';\n@use 'config';\n@use 'tokens';\n@use 'sass:color';\n@use 'sass:list';\n@use 'sass:math';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n\n/// # Contrast & Accessibility\n/// @group color-contrast\n\n// WCAG Contrast\n// -------------\n/// These named contrast-ratios are defined by the [WCAG][WCAG].\n///\n/// [WCAG]: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast\n///\n/// @access private\n$_wcag-contrast: (\n  'aa-large': 3,\n  'aa': 4.5,\n  'aaa': 7,\n);\n\n// Contrast\n// --------\n/// For any color, select the best contrast among a set of options.\n/// For best results, pass in a combination of light and dark colors\n/// to contrast against –\n/// or define default `contrast-light` and `contrast-dark` values\n/// (with or without a private `_` prefix)\n/// in your global `$colors` map.\n///\n/// @group color-contrast\n/// @example scss - max contrast\n///   tools.$colors: (\n///     'background': blue,\n///     'light': #eee,\n///     'dark': #111,\n///   );\n///   html {\n///     color: tools.contrast(\n///       'background',\n///       'light', 'dark', black, white\n///     );\n///   }\n/// @example scss - min contrast\n///   tools.$colors: (\n///     'background': blue,\n///     'light': #eee,\n///     'dark': #111,\n///   );\n///   html {\n///     color: tools.contrast(\n///       'background',\n///       'light', 'dark', black, white,\n///       'AAA'\n///     );\n///   }\n///\n/// @param {string | list} $color -\n///   The name or value of a color.\n/// @param {colors | min-contrast} $options... -\n///   List of colors to contrast against.\n///   This function will choose the best contrast\n///   of all the options provided,\n///   or the `contrast-light` and `contrast-dark` defaults\n///   defined in your color palette or the factory settings.\n///\n///   - Any  `{'AA' | 'AA-large' | 'AAA' | 0-21 }` values\n///     will be treated as a minimum color-contrast ratio –\n///     and will return the minimum accessible option,\n///     rather than the maximum contrast.\n/// @return {color} -\n///   Whichever color-option has the highest contrast-ratio to `$color`,\n///   or the minimum needed contrast to meet a given accessibility ratio.\n@function contrast($color, $options...) {\n  @return best-contrast($color, $options, 'color');\n}\n\n@include function.internal(meta.get-function('contrast'), 'contrast');\n\n// Contrasted\n// ----------\n/// Apply any background color,\n/// along with the highest-contrast text color from a set of options.\n/// This works the same as the `contrast` function,\n/// but applies the resulting values to `background-color`\n/// and text `color` properties.\n///\n/// @group color-contrast\n/// @example scss - max contrast\n///   tools.$colors: (\n///     'background': blue,\n///     'light': #eee,\n///     'dark': #111,\n///   );\n///   html {\n///     @include tools.contrasted(\n///       'background',\n///       'light', 'dark', black, white\n///     );\n///   }\n/// @example scss - min contrast\n///   tools.$colors: (\n///     'background': blue,\n///     'light': #eee,\n///     'dark': #111,\n///   );\n///   html {\n///     @include tools.contrasted(\n///       'background',\n///       'light', 'dark', black, white,\n///       'AAA'\n///     );\n///   }\n///\n/// @param {string | list} $background -\n///   The name or value of your desired background color.\n/// @param {colors | min-contrast} $options... -\n///   List of colors to contrast against.\n///   This function will choose the best contrast\n///   of all the options provided,\n///   or the `contrast-light` and `contrast-dark` defaults\n///   defined in your color palette or the factory settings.\n///\n///   - Any  `{'AA' | 'AA-large' | 'AAA' | 0-21 }` values\n///     will be treated as a minimum color-contrast ratio –\n///     and will return the minimum accessible option,\n///     rather than the maximum contrast.\n/// @output -\n///   Sets the `background-color` to `$background`\n///   and `color` to the option with\n///   highest contrast against that background,\n///   or minimum contrast that still meets a given accessibility ratio.\n@mixin contrasted($background, $options...) {\n  $background: tokens.color($background);\n\n  background-color: $background;\n  color: contrast($background, $options...);\n}\n\n// Contrast Ratio\n// --------------\n/// Compare two colors using the WCAG comparison algorithm,\n/// and return the resulting contrast-ratio.\n/// Optionally pass in a standard (AA, AAA, AA-large)\n/// and return `false` when the contrast-check fails.\n///\n/// - 'AA-large' == `3:1`\n/// - 'AA' == `4.5:1`\n/// - 'AAA' == `7:1`\n///\n/// @group color-contrast\n/// @link https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef WCAG Contrast Definition\n/// @example scss\n///   /* black and white: #{tools.contrast-ratio(white, black)} */\n///   /* failed 'AAA': #{tools.contrast-ratio(white, #999, 'AAA')} */\n///\n/// @param {color | number} $base -\n///   Color value, color token name,\n///   or pre-calculated numeric luminance\n///   for the base color.\n/// @param {color | number} $contrast -\n///   Color value, color token name,\n///   or pre-calculated numeric luminance\n///   for a contrast color to compare against the base.\n/// @param {'AA' | 'AA-large' | 'AAA' | number | false} $require [false] -\n///   An optional WCAG contrast ratio to require.\n///   The function will return `false` if the required ratio is not met.\n/// @return {number} -\n///   The WCAG-defined contrast-ratio of two colors.\n@function contrast-ratio($base, $contrast, $require: false) {\n  $base-lumin: $base;\n\n  @if (meta.type-of($base) != 'number') {\n    $base-lumin: luminance($base);\n  }\n\n  $contrast-lumin: if(\n    sass((meta.type-of($contrast) == 'number')): $contrast;\n    else: luminance($contrast)\n  );\n  $darker: math.min($base-lumin, $contrast-lumin);\n  $lighter: math.max($base-lumin, $contrast-lumin);\n  $ratio: math.div(($lighter + 0.05), ($darker + 0.05));\n\n  @if $require {\n    $require: valid-contrast($require);\n\n    @if not type.check($require, 'number') {\n      @return type.error(\n        $require,\n        'number',\n        'color.contrast-ratio',\n        '$require'\n      );\n    }\n\n    @if ($ratio < $require) {\n      @return false;\n    }\n  }\n\n  @return $ratio;\n}\n\n// Luminance\n// ---------\n/// Get the WCAG luminance of a color in your palette.\n///\n/// @group color-contrast\n/// @link https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef WCAG Relative Luminance\n///\n/// @param {string | list} $color -\n///   A color value or color token name.\n/// @return {number} -\n///   WCAG-defined numeric luminance value.\n@function luminance($color) {\n  $color: tokens.color($color);\n  $check: type.check($color, 'color', true, 'color.luminance', '$color');\n  $luminance: 0;\n  $rgb: (\n    'r': math.div(color.channel($color, 'red', $space: rgb), 255),\n    'g': math.div(color.channel($color, 'green', $space: rgb), 255),\n    'b': math.div(color.channel($color, 'blue', $space: rgb), 255),\n  );\n\n  @each $channel, $value in $rgb {\n    $function: $channel;\n\n    @if ($value < 0.03928) {\n      $value: math.div($value, 12.92);\n    } @else {\n      $base: math.div(($value + 0.055), 1.055);\n      $value: math.pow($base, 2.4);\n    }\n\n    @if ($channel == 'r') {\n      $value: $value * 0.2126;\n    } @else if ($channel == 'g') {\n      $value: $value * 0.7152;\n    } @else {\n      $value: $value * 0.0722;\n    }\n\n    $luminance: $luminance + $value;\n  }\n\n  @return $luminance;\n}\n\n// Default Contrast\n// ----------------\n/// Access the user or system default contrast values.\n///\n/// @access private\n/// @since 2.1.0 -\n/// - NEW: Allows for either private or public defaults\n///\n/// @param {'light' | 'dark' | 'values' | 'map'} $return ['map'] -\n///   Return the light value, dark value, both values, or a map\n/// @return {color-name | map} -\n///   Light or dark color-name string,\n///   or map with `light` and `dark` keys.\n@function default-contrast($return: 'map') {\n  $both: (\n    'light': config.$contrast-light,\n    'dark': config.$contrast-dark,\n  );\n\n  @each $color in map.keys($both) {\n    $public: 'contrast-#{$color}';\n    $private: '_#{$public}';\n    $token: if(sass(api.has-token(tokens.$colors, $public)): $public; else: null);\n    $token: $token or\n      if(sass(api.has-token(tokens.$colors, $private)): $private; else: null);\n    $both: if(sass($token): map.set($both, $color, $token); else: $both);\n  }\n\n  @if ($return == 'values') {\n    @return map.values($both);\n  }\n\n  @return map.get($both, $return) or $both;\n}\n\n// Best Contrast\n// -------------\n/// For any color, select the best contrast among a set of options.\n/// Returns the highest contrast by default,\n/// or the minimum contrast to meet a particular ratio cutoff.\n///\n/// Unlike the `contrast` function,\n/// `best-contrast` can return the color name,\n/// output value, ratio, or all three.\n///\n/// @access private\n/// @since 2.1.0 -\n/// - NEW: Provides access to both name and value of result\n/// - NEW: Provides a smart default for comparison against a single option\n///\n/// @param {string | list} $color -\n///   The name or value of a color.\n/// @param {list} $options [null] -\n///   Any number of colors to contrast against.\n///   This function will choose the best contrast of all the options provided,\n///   or use the `contrast-light` and `contrast-dark` defaults.\n/// @param {'map' | 'name' | 'color' | 'ratio'} $return ['map'] -\n///   Return either a token name, color value, best-ratio\n///   or all three together in a map.\n/// @return {color} -\n///   Whichever color-option has the highest contrast-ratio to `$color`.\n@function best-contrast($color, $options: null, $return: 'map') {\n  $options: if(sass(list.length($options) > 0): $options; else: null);\n  $min-ratio: list.nth($options, -1);\n\n  @if valid-contrast($min-ratio, false) {\n    $options: utils.list-remove-nth($options, -1);\n  } @else {\n    $min-ratio: false;\n  }\n\n  // Establish default options if they are missing\n  @if (list.length($options) == 0) or (not $options) {\n    $options: default-contrast('values');\n  } @else if (list.length($options) == 1) {\n    $use: best-contrast(list.nth($options, 1), $return: 'name');\n    $options: list.append($options, $use);\n  }\n\n  // Get the colors and their contrasts\n  $color-val: tokens.color($color);\n  $color-lum: luminance($color-val);\n  $best: (\n    'name': null,\n    'color': null,\n    'ratio': null,\n  );\n\n  @each $name in $options {\n    // 22 is above the highest possible, 0 is below the lowest\n    $best-ratio: map.get($best, 'ratio') or if(sass($min-ratio): 22; else: 0);\n    $better: false;\n    $value: tokens.color($name);\n    $lum: luminance($value);\n    $ratio: contrast-ratio($color-lum, $lum, $min-ratio);\n\n    @if $min-ratio and $ratio {\n      $better: ($ratio < $best-ratio);\n    } @else if $ratio {\n      $better: ($ratio > $best-ratio);\n    }\n\n    @if $better {\n      $best: (\n        'name': $name,\n        'color': $value,\n        'ratio': $ratio,\n      );\n    }\n  }\n\n  @if (map.get($best, 'name')) {\n    @return map.get($best, $return) or $best;\n  }\n\n  @return false;\n}\n\n// Valid Contrast\n// --------------\n/// Return a valid contrast ratio or `false`\n///\n/// @access private\n/// @param {'AA' | 'AA-large' | 'AAA' | 0-21} $ratio -\n///   WCAG or 0-21 contrast ratios will pass validation,\n///   all other values will return false\n@function valid-contrast($ratio, $throw: true) {\n  @if (meta.type-of($ratio) == 'string') {\n    $ratio: map.get($_wcag-contrast, string.to-lower-case($ratio)) or $ratio;\n  }\n\n  @if not type.check($ratio, 'number') {\n    @if $throw {\n      @return type.error($ratio, 'number', 'color.valid-contrast', '$ratio');\n    }\n\n    @return false;\n  }\n\n  @if ($ratio >= 0) and ($ratio <= 21) {\n    @return $ratio;\n  }\n\n  @if $throw {\n    @return throw.error(\n      'Contrast ratio must be a number between 0 and 21',\n      'color.valid-contrast'\n    );\n  }\n\n  @return false;\n}\n","// Typography Config\n// =================\n\n@use 'pkg:accoutrement' as tools;\n\n/// ## macro `link_if()`\n/// This Nunjucks utility macro returns either\n/// an anchor tag, or span, depending on\n/// the truthyness of the `url` argument.\n///\n/// - `content` :: {`string`}<br/>\n///   The text/html contents of the link.\n/// - `url=none` :: {`string` | `none`}<br/>\n///   The link-target URL, if any is available.\n///   When there is no URL provided, we return a span.\n/// - `attrs={}` :: {`dictionary`}<br/>\n///   A dictionary of arbitrary html attributes\n///   to include on the returned link or span.\n///\n/// @group config-utils\n///\n/// @example njk\n///   {% import 'utility.macros.njk' as utility %}\n///   {{ utility.link_if(content='stacy', url='#', attrs={'data-sassdoc': 'font-name'} ) }}\n///   {{ utility.link_if(content='not stacy', url=none) }}\n\n// Link\n// ----\n/// Shortcut for `link` and `visited` pseudo-classes.\n/// @group config-utils\n/// @example scss\n///   a {\n///     #{config.$link} {\n///       color: blue;\n///     }\n///   }\n$link: '&:link, &:visited';\n\n// Focus\n// -----\n/// Shortcut for `hover`, `focus`, and `active` pseudo-classes.\n/// @group config-utils\n/// @example scss\n///   a {\n///     #{config.$focus} {\n///       color: red;\n///     }\n///   }\n$focus: '&:hover, &:focus, &:active';\n\n// Invert Colors\n// -------------\n/// Invert the colors of a block, creating light-on-dark text and links.\n/// @group config-utils\n/// @example scss\n///   .invert-colors {\n///     @include config.invert-colors;\n///   }\n/// @example html\n///   <div class=\"invert-colors\" style=\"padding: 1em;\">\n///     You shall sojourn at <a href=\"#\">Paris, Rome, and Naples</a>.\n///   </div>\n@mixin invert-colors {\n  @include tools.contrasted('theme-dark');\n\n  [href] {\n    #{$link} {\n      color: inherit;\n    }\n  }\n}\n","// Main Layout\n// ===========\n/// # Herman Main-Content Region\n/// Styles related to the main content area in generated Herman docs.\n/// @group style-main\n\n@use 'pkg:accoutrement' as tools;\n\n// Main Region\n// -----------\n/// Layout and styles for the main content region.\n///\n/// @group style-main\n[data-region='main'] {\n  @include tools.z-index('main');\n\n  @include tools.above('page-break') {\n    overflow: hidden;\n  }\n}\n\n// Page\n// ----\n/// Generic wrapper for page-specific content.\n///\n/// @group style-main\n[data-page] {\n  padding: tools.size('flex-gutter');\n  position: relative;\n}\n","// Typography Patterns\n// ===================\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n// Text Blocks\n// -----------\n/// There are some typographic elements\n/// that can't be applied globally,\n/// but will be generated in markdown-rendered html-text blocks.\n/// The `text-block` class can be used to provide\n/// max line-length and other typographic features --\n/// headings, blockquotes, lists, code, emphasis, etc.\n///\n/// @group style-typography\n///\n/// @example html\n///   <div class=\"text-block\">\n///     <h1>HTML Ipsum Presents</h1>\n///\n///     <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href=\"#\">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>\n///\n///     <h2>Header Level 2</h2>\n///\n///     <ol>\n///        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n///        <li>Aliquam tincidunt mauris eu risus.</li>\n///     </ol>\n///\n///     <blockquote>\n///       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n///       <cite>—Anonymous</cite>\n///     </blockquote>\n///\n///     <h3>Header Level 3</h3>\n///\n///     <ul>\n///        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n///        <li>Aliquam tincidunt mauris eu risus.</li>\n///     </ul>\n///\n///     <pre><code>#header h1 a {\n///     display: block;\n///     width: 300px;\n///     height: 80px;\n///   }</code></pre>\n///   </div>\n.text-block {\n  max-width: 80ch;\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-top: 0;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4 {\n    color: tools.color('text');\n\n    a {\n      #{config.$link} {\n        text-decoration-color: transparent;\n      }\n\n      #{config.$focus} {\n        text-decoration-color: currentcolor;\n      }\n    }\n\n    + h2,\n    + h3 {\n      margin-top: 0;\n    }\n  }\n\n  h1 {\n    font-size: tools.size('h1');\n    margin-bottom: tools.size('shim');\n  }\n\n  h2,\n  h3 {\n    margin-top: tools.size('gutter-plus');\n  }\n\n  > h2,\n  > h3 {\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    font-size: tools.size('h2');\n    margin-bottom: tools.size('shim');\n  }\n\n  h3 {\n    font-size: tools.size('h3');\n    font-weight: normal;\n    margin-bottom: tools.size('shim');\n  }\n\n  p,\n  pre {\n    margin-bottom: tools.size('gutter-minus');\n  }\n\n  ol,\n  ul {\n    margin: 0 tools.size('gutter') tools.size('gutter-minus');\n  }\n\n  li {\n    > p {\n      margin: tools.size('shim') 0;\n    }\n  }\n\n  blockquote {\n    border-left: tools.size('half-shim') solid tools.color('border-light');\n    font-size: tools.size('quote');\n    margin-left: tools.negative('gutter');\n    padding-left: tools.size('shim') + tools.size('half-shim');\n\n    > p {\n      &:not(:last-child) {\n        text-indent: -0.4em;\n\n        @include tools.wrap-content {\n          color: tools.color('theme-dark');\n        }\n      }\n    }\n\n    cite {\n      display: block;\n      font-size: tools.size('reset');\n      font-style: normal;\n    }\n  }\n}\n\n// Invert Colors\n// -------------\n/// Invert the colors of a block, creating a light-on-dark area.\n///\n/// @group style-typography\n/// @require {mixin} invert-colors\n///\n/// @example html\n///   <div class=\"invert-colors\" style=\"padding: 1em;\">\n///     You shall sojourn at <a href=\"#\">Paris, Rome, and Naples</a>.\n///   </div>\n.config.invert-colors {\n  @include config.invert-colors;\n}\n","// Forms\n// =====\n\n@use 'pkg:accoutrement' as tools;\n\n::placeholder {\n  color: currentcolor;\n  opacity: 0.5;\n}\n\ninput {\n  background: none;\n  border: 1px solid tools.color('border-light');\n  color: inherit;\n  font-size: tools.size('search');\n  margin-bottom: tools.size('half-shim');\n  padding: tools.size('quarter-shim') tools.size('half-shim');\n  width: 100%;\n\n  &:focus {\n    border-color: currentcolor;\n    outline: 0;\n  }\n}\n","// Search\n// ======\n\n@use 'pkg:accoutrement' as tools;\n\n.search-heading {\n  font-size: tools.size('h1');\n}\n\n.search-term {\n  @include tools.font-family('code');\n}\n\n.search-results {\n  list-style: none;\n}\n\n.search-result {\n  margin: tools.size('flex-gutter') 0;\n}\n\n[data-result-field='contents'] {\n  color: tools.color('text-light');\n}\n","// Navigation Styles\n// =================\n/// # Herman Navigation Components\n/// @group component-nav\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n// Nav Lists\n// ---------\n/// Remove list styles from navigation lists\n/// @group component-nav\n[data-region='nav'] ul {\n  list-style: none;\n}\n\n// Nav Subsections\n// ---------------\n/// Group the main navigation into sub-sections…\n/// @group component-nav\n.nav-subsection {\n  flex: 0 0 auto;\n\n  &:last-of-type {\n    flex: 1 0 auto;\n  }\n\n  & + .nav-item {\n    border-top: 1px solid;\n    margin-top: tools.size('double-gutter');\n    padding-top: tools.size('gutter');\n  }\n}\n\n// Nav Home\n// --------\n/// There is a home link at the top of the navigation…\n/// @group component-nav\n.nav-home {\n  font-size: tools.size('large');\n  font-weight: bold;\n  margin-top: tools.size('gutter-plus');\n}\n\n// Nav Titles\n// ----------\n/// Each subsection may optionally have a title…\n/// @group component-nav\n.nav-title {\n  border-top: 1px solid;\n  font-size: inherit;\n  font-weight: bold;\n  margin: tools.size('gutter-plus') 0 tools.size('shim');\n  padding-top: tools.size('quarter-shim');\n}\n\n// Nav Items\n// ---------\n/// Each list-item in the navigation menus…\n/// @group component-nav\n.nav-item {\n  list-style: none;\n  margin: tools.size('half-shim') 0;\n}\n\n// Nav Links\n// ---------\n/// Navigation items, with inactive and active states.\n/// @group component-nav\n/// @example html\n///   <div class=\"invert-colors\" style=\"padding: 1em;\">\n///     <a href=\"#\" data-nav=\"is-not-active\">not active</a><br />\n///     <a href=\"#\" data-nav=\"is-active\">active</a>\n///   </div>\n[data-nav] {\n  #{config.$link} {\n    background: linear-gradient(\n        to right,\n        tools.color('theme-light'),\n        tools.color('theme-light')\n      )\n      no-repeat;\n    background-size: 0 tools.size('nav-underline');\n    background-position: bottom left;\n    color: tools.color('background');\n    line-height: 1.1;\n    padding-bottom: tools.size('quarter-shim');\n    text-decoration: none;\n    transition:\n      color 0.4s,\n      background-size 0.4s;\n  }\n\n  #{config.$focus} {\n    background-size: 100% tools.size('nav-underline');\n  }\n\n  &[data-nav='is-active'] {\n    #{config.$link},\n    #{config.$focus} {\n      background-size: 100% tools.size('nav-underline');\n    }\n  }\n}\n","// Footer Credit\n// =============\n/// The OddBird credit in the navigation footer can be toggled\n/// using the [SassDoc `display.watermark` configuration setting](http://sassdoc.com/customising-the-view/#watermark-display).\n/// @group component-footer\n/// @example njk\n///   {% import 'utility.macros.njk' as utility %}\n///   <aside class=\"footer-credit\">\n///     <a href=\"https://www.oddbird.net/herman/\" class=\"footer-icon\">\n///       {{ utility.icon('logo', size='footer-logo') }}\n///     </a>\n///     <span>\n///       Documented with\n///       <a href=\"https://www.oddbird.net/herman/\" class=\"footer-link\">\n///         Herman\n///       </a>\n///     </span>\n///     <span>\n///       by\n///       <a href=\"https://www.oddbird.net/\" class=\"footer-link\">\n///         OddBird\n///       </a>\n///     </span>\n///   </aside>\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n/// Layout for the footer credit.\n/// @group component-footer\n.footer-credit {\n  border-top: 1px solid tools.color('theme-light');\n  display: flow-root;\n  flex: 0 0 auto;\n  font-size: tools.size('footer');\n  line-height: tools.size('rhythm');\n  padding-top: tools.size('gutter');\n\n  span {\n    display: block;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n}\n\n/// Layout for the footer logo-icon.\n/// @group component-footer\n.footer-icon {\n  #{config.$link} {\n    color: inherit;\n    float: left;\n    margin-right: tools.size('half-shim');\n  }\n}\n\n/// Special styles for the footer links.\n/// @group component-footer\n.footer-link {\n  #{config.$link} {\n    font-weight: bold;\n    text-decoration-color: transparent;\n  }\n\n  #{config.$focus} {\n    text-decoration-color: currentcolor;\n  }\n}\n","// Breadcrumb Styles\n// =================\n/// # Herman Breadcrumb Component\n/// So you always know where you are…\n/// @group component-breadcrumb\n\n@use 'pkg:accoutrement' as tools;\n\n// Breadcrumb\n// ----------\n/// @group component-breadcrumb\n/// @example html\n///   <nav class=\"breadcrumb\">\n///     <a href=\"index.html\">Herman</a> »\n///     <strong>_Component: Breadcrumb</strong>\n///   </nav>\n.breadcrumb {\n  background: tools.color('callout');\n  padding: tools.size('shim') tools.size('flex-gutter');\n\n  a,\n  span,\n  strong {\n    display: inline-block;\n  }\n}\n","// Project Meta Styles\n// ===================\n\n@use 'pkg:accoutrement' as tools;\n@use '../config';\n\n.project-links {\n  display: flex;\n  justify-content: flex-end;\n  margin: 0 0 tools.size('shim');\n\n  @include tools.above('page-break') {\n    margin-bottom: 0;\n  }\n}\n\n.project-link-item {\n  display: flex;\n  list-style: none;\n\n  & + & {\n    margin-left: tools.size('shim');\n  }\n}\n\n.project-link {\n  #{config.$link} {\n    border: 1px solid tools.color('action');\n    border-radius: tools.size('gutter');\n    padding: tools.size('half-shim') tools.size('gutter');\n    text-align: center;\n    text-decoration: none;\n    transition: background-color 0.4s;\n  }\n\n  #{config.$focus} {\n    @include tools.contrasted('action');\n  }\n}\n","// Item Styles\n// ===========\n\n@use 'pkg:accoutrement' as tools;\n\n.item {\n  margin-bottom: tools.size('spacer');\n}\n\n[data-item-section] {\n  margin-bottom: tools.size('gutter-plus');\n}\n\n[data-item-section='header'] {\n  .code-block,\n  .text-block {\n    margin-bottom: tools.size('shim');\n  }\n}\n\n.item-title {\n  font-size: tools.size('h2');\n}\n\n.item-subtitle {\n  border-bottom: 1px solid tools.color('border-light');\n  color: tools.color('text-light');\n  font-weight: normal;\n  margin-bottom: tools.size('shim');\n}\n\n.item-subtitle-main {\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n\n  &:not(:last-child) {\n    @include tools.after(': ');\n  }\n}\n\n.item-subtitle-supplement {\n  @include tools.font-family('code');\n\n  letter-spacing: 0;\n  padding-left: tools.size('half-shim');\n}\n\n.item-type,\n.item-name,\n.item-value,\n.alias-title {\n  @include tools.font-family('code');\n\n  display: inline-block;\n}\n\n.item-type,\n.item-value,\n.value-type,\n.item-note {\n  color: tools.color('text-light');\n  display: inline-block;\n  font-weight: normal;\n}\n\n.alias {\n  color: tools.color('text-light');\n  font-style: italic;\n}\n\n.alias-title {\n  font-style: normal;\n  font-weight: bolder;\n}\n\n.param-list {\n  margin-bottom: tools.size('shim');\n}\n\n.param-title {\n  color: tools.color('text-light');\n  font-size: tools.size('h3');\n}\n\n.param-details {\n  margin-top: tools.size('half-shim');\n\n  @include tools.above('item-break') {\n    margin-left: tools.size('gutter');\n  }\n}\n\n// Requires\n// --------\n.requires-wrapper {\n  @include tools.above('item-break') {\n    display: flex;\n    margin-bottom: tools.size('gutter-plus');\n\n    [data-item-section] {\n      flex: 1 1 40%;\n      margin-bottom: 0;\n      max-width: 100%;\n\n      &:first-child {\n        margin-right: tools.size('gutter');\n      }\n    }\n  }\n}\n","@use 'pkg:accoutrement' as tools;\n\n/// ## Syntax Highlighting\n///\n/// Orginal Style from ethanschoonover.com/solarized\n/// (c) Jeremy Hull <sourdrums@gmail.com>\n/// @group style-code\n/// @see $hljs-colors\n\n/// @group style-code\n.hljs-comment,\n.hljs-quote {\n  color: tools.color('hljs-comment');\n}\n\n// Solarized Green\n/// @group style-code\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-addition {\n  color: tools.color('hljs-green');\n}\n\n// Solarized Cyan\n/// @group style-code\n.hljs-number,\n.hljs-string,\n.hljs-meta .hljs-meta-string,\n.hljs-literal,\n.hljs-doctag,\n.hljs-regexp {\n  color: tools.color('hljs-cyan');\n}\n\n// Solarized Blue\n/// @group style-code\n.hljs-title,\n.hljs-section,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class {\n  color: tools.color('hljs-blue');\n}\n\n// Solarized Yellow\n/// @group style-code\n.hljs-attribute,\n.hljs-attr,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-class .hljs-title,\n.hljs-type {\n  color: tools.color('hljs-yellow');\n}\n\n// Solarized Orange\n/// @group style-code\n.hljs-symbol,\n.hljs-bullet,\n.hljs-subst,\n.hljs-meta,\n.hljs-meta .hljs-keyword,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-link {\n  color: tools.color('hljs-orange');\n}\n\n// Solarized Red\n/// @group style-code\n.hljs-built_in,\n.hljs-deletion {\n  color: tools.color('hljs-red');\n}\n\n/// @group style-code\n.hljs-formula {\n  background: tools.color('hljs-formula');\n}\n\n/// @group style-code\n.hljs-emphasis {\n  font-style: italic;\n}\n\n/// @group style-code\n.hljs-strong {\n  font-weight: bolder;\n}\n","// Code Previews\n// =============\n/// # Herman Code-Block Styles\n/// Code-block styles and syntax highlighting,\n/// for both user and machine-generated code samples.\n/// @group style-code\n/// @link https://highlightjs.org/ Highlight.JS\n\n@use 'pkg:accoutrement' as tools;\n\n// Code Blocks\n// -----------\n/// @name Code Blocks\n/// @group style-code\n.code-block {\n  align-items: stretch;\n  display: flex;\n  flex: 1 1 20em;\n  flex-direction: column;\n  max-height: tools.size('rhythm') * 12;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n// Code Header\n// -----------\n/// @group style-code\n.code-header {\n  @include tools.contrasted('theme-light');\n\n  flex: 0 0 auto;\n  padding: 0 tools.size('shim');\n}\n\n// Code Description\n// ----------------\n/// @group style-code\n.code-description {\n  @include tools.before(' – ');\n}\n\n// Pre\n// ---\n/// @group style-code\n.hljs-pre,\n.text-block pre {\n  background-color: tools.color('slight');\n  border: 1px solid tools.color('callout');\n  color: tools.color('code');\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n\n  code {\n    padding: tools.size('shim');\n  }\n}\n","// Examples\n// ========\n\n@use 'pkg:accoutrement' as tools;\n\n.example {\n  margin-bottom: tools.size('gutter');\n}\n\n.example-code {\n  align-items: stretch;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden;\n}\n\n.example-render {\n  border: 1px solid tools.color('border-light');\n  border-top: 0;\n  padding: tools.size('shim');\n}\n","// Icon Preview\n// ============\n\n@use 'pkg:accoutrement' as tools;\n\n[data-sassdoc='icon-preview'] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  margin: 0 tools.negative('shim');\n}\n\n[data-sassdoc-icon] {\n  margin: tools.size('gutter') tools.size('shim');\n  min-width: tools.size('rhythm') * 5;\n\n  [data-icon] {\n    @include tools.square('h1');\n\n    margin-bottom: tools.size('shim');\n  }\n}\n\n[data-sassdoc='icon-info'] {\n  font-size: tools.size('code');\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}