/*
Theme Name: MHMatar Notes WP
Theme URI:
Author: Kotko Develop
Author URI: https://github.com/kotkodevelop
Description: Editable WordPress theme with static M. H. Matar content import, style navigation, archive, tags and collections.
Version: 2.4.0-static-complete-pages
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: bclennox-wp
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

article,aside,figure,footer,header,hgroup,nav,section {
    display: block
}

html {
    background-color: #f8f8f8
}

html body {
    padding: 3.6em 0;
    font-size: 62.5%;
    font-family: Helvetica Neue,Helvetica,sans-serif;
    color: #000
}

html body a {
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif;
    font-weight: 700;
    text-decoration: none;
    color: #d6008b
}

html body a:hover {
    text-decoration: underline
}

html body a:visited {
    font-family: Helvetica Neue,Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #e266b7
}

html body a:hover,html body a:focus,html body a:active {
    color: #85c700
}

html body h1,html body h2,html body h3 {
    font-family: Helvetica Neue,Helvetica,sans-serif;
    color: #000
}

html body h1 a,html body h2 a,html body h3 a {
    font-family: Helvetica Neue,Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000!important
}

html body h1 a:hover,html body h2 a:hover,html body h3 a:hover {
    color: #85c700!important
}

html body h1 {
    font-size: 3.6em;
    line-height: 1
}

html body h1.main {
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif;
    padding-bottom: 20px;
    border-bottom: 1px black solid
}

html body h1.main+p {
    margin: 10.5px 0
}

html body h2 {
    font-size: 2.4em;
    line-height: 1.3125;
    margin-bottom: .4375em
}

html body h3 {
    font-size: 1.8em;
    line-height: 2.3333333333
}

html body h4 {
    font-size: 1.6em;
    line-height: 2.625
}

html body p,html body li,html body td,html body th {
    font-size: 1.4em;
    line-height: 1.5;
    margin-bottom: 1.5em
}

html body p em,html body li em,html body td em,html body th em {
    font-family: HelveticaNeue-Italic,Helvetica Neue Italic,Helvetica Neue,Helvetica,sans-serif;
    font-style: italic
}

html body p strong,html body li strong,html body td strong,html body th strong {
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif;
    font-weight: 700
}

html body ul {
    list-style-type: square
}

html body ol {
    list-style-type: decimal
}

html body ul.tight,html body ol.tight {
    margin-bottom: 2.1em
}

html body ul.tight li,html body ol.tight li {
    margin-bottom: 0
}

html body table {
    border-collapse: collapse
}

html body table caption {
    font-size: 1.8em;
    line-height: 2.3333333333;
    text-align: center
}

html body table th,html body table td {
    padding: 10.5px 5px 9.5px
}

html body table th {
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif;
    font-weight: 700
}

html body table td {
    border-top: 1px #cccccc solid;
    border-bottom: 1px #cccccc solid
}

html body table.hoverable tbody tr .actions * {
    visibility: hidden
}

html body table.hoverable tbody tr:hover .actions * {
    visibility: visible
}

html body hr {
    margin-top: 20px;
    background-color: transparent;
    color: transparent;
    border: 0;
    border-bottom: 1px black solid
}

html body abbr {
    cursor: help
}

html body q {
    quotes: "\201c" "\201d" "\2018" "\2019"
}

html body q:before {
    content: open-quote;
    content: "\201c"
}

html body q:after {
    content: close-quote;
    content: "\201d"
}

html body q q:before {
    content: "\2018"
}

html body q q:after {
    content: "\2019"
}

html body blockquote {
    padding-left: 25px
}

html body blockquote ol li,html body blockquote ul li,html body blockquote p {
    font-family: HelveticaNeue-Italic,Helvetica Neue Italic,Helvetica Neue,Helvetica,sans-serif;
    font-style: italic
}

html body blockquote p cite {
    display: block;
    margin-top: 21px;
    text-align: right
}

html body blockquote p cite.single-line {
    display: inline
}

html body code {
    font-family: Menlo,Andale Mono,Consolas,monospace;
    font-size: 11px;
    line-height: 21px
}

html body ins {
    text-decoration: none
}

html body ins em {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
    font-weight: 700
}

html body .caps {
    text-transform: uppercase
}

html body p.see-more {
    text-align: right;
    margin-bottom: 0
}

html body pre.code {
    font-size: 1.4em;
    line-height: 1.5;
    margin-bottom: 1.5em;
    position: relative;
    padding-left: 15px
}

html body pre.code.growable-code .growable-code-mask {
    position: absolute;
    z-index: 250;
    right: 0;
    top: 0;
    width: 35px;
    background: url(assets/site/assets/code-mask-MZO2YXHQ-7ef129188822b6b58494572ac2921278df043ed9e774639bf08c6df2f1d41374.png) left top repeat-y
}

html body pre.code.growable-code-clone {
    padding-right: 15px;
    background-color: #f8f8f8
}

html body pre.code.growable-code-clone .growable-code-mask {
    display: none
}

html body pre.code .growable-code-handle {
    position: absolute;
    z-index: 500;
    right: 0;
    top: 0;
    display: none;
    font-size: 1.2em;
    line-height: 1em;
    padding: .1em;
    cursor: pointer;
    background-color: #d6008b;
    color: #fff
}

html body pre.code .growable-code-handle:hover {
    background-color: #85c700
}

html body pre.code:hover .growable-code-handle {
    display: block
}

html body form.formtastic {
    margin-top: 2.1em
}

html body form.formtastic fieldset.buttons ol li {
    float: left
}

html body form.formtastic fieldset.buttons ol li.cancel {
    margin: 2px 0 0 2px
}

html body form.formtastic ol {
    list-style-type: none
}

html body form.formtastic ol li label,html body form.formtastic ol li .label {
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif
}

html body form.formtastic ol li.stringish label,html body form.formtastic ol li.stringish .label,html body form.formtastic ol li.text label,html body form.formtastic ol li.text .label {
    display: block
}

html body form.formtastic ol li.stringish input,html body form.formtastic ol li.text input {
    width: 20em
}

html body form.formtastic ol li.select label {
    display: block;
    float: left;
    width: 6em;
    margin-top: 2px
}

html body form.formtastic ol li.boolean label {
    display: inline;
    cursor: pointer
}

html body form.formtastic ol li.date ol li,html body form.formtastic ol li.datetime ol li {
    float: left
}

html body form.formtastic ol li.date ol li label,html body form.formtastic ol li.datetime ol li label {
    display: none
}

html body .screenreader {
    position: absolute;
    top: -9999em
}

html body #outer {
    width: 945px;
    margin: 0
}

html body #branding {
    display: inline;
    float: left;
    margin-right: 15px;
    width: 265px;
    padding-left: 40px;
    padding-right: 160px
}

* html html body #branding {
    overflow-x: hidden
}

html body #content {
    display: inline;
    float: left;
    margin-right: 0;
    width: 465px;
    padding-bottom: 6.3em
}

* html html body #content {
    overflow-x: hidden
}

html body #about {
    display: inline;
    float: left;
    margin-right: 15px;
    width: 225px;
    padding-left: 40px;
    padding-right: 40px
}

* html html body #about {
    overflow-x: hidden
}

html body #branding {
    font-family: Helvetica Neue,Helvetica,sans-serif
}

html body #branding a {
    font-family: Helvetica Neue,Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000
}

html body #branding a:hover {
    color: #85c700
}

html body #branding #logo {
    font-size: 2.1em;
    line-height: 2
}

html body #branding nav ul {
    list-style-type: none;
    margin: 0
}

html body #branding nav ul li {
    font-size: 1.4em;
    line-height: 1.5;
    float: left;
    margin-right: 10px
}

html body #branding nav ul li:before {
    content: "\2022";
    padding-right: 10px
}

html body #branding nav ul li:first-child:before {
    content: "";
    padding: 0
}

html body #branding nav ul li a {
    text-transform: lowercase
}

html body .flash {
    background-color: #fff;
    border: 1px #cccccc solid;
    position: absolute;
    left: 40px;
    top: 14.7em;
    padding: 1.05em
}

html body .flash p {
    margin-bottom: 0;
    font-family: HelveticaNeue-Italic,Helvetica Neue Italic,Helvetica Neue,Helvetica,sans-serif;
    font-style: italic
}

html body footer#about {
    background-color: #fff;
    border: 1px #cccccc solid;
    position: absolute;
    left: 0;
    top: 21em;
    padding-top: 2.1em;
    padding-bottom: 2.1em
}

html body footer#about #footer-hider {
    font-size: 1.6em;
    line-height: 1.3125;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    cursor: pointer;
    text-align: center;
    display: none
}

html body footer#about #footer-hider:hover {
    background-color: #ccc
}

html body footer#about:hover #footer-hider {
    display: block
}

html body footer#about.is-peeking #footer-hider,
html body footer#about.is-open #footer-hider {
    display: block
}

html body footer#about .about {
    border-bottom: 1px #cccccc solid
}

html body footer#about .about img {
    display: block;
    width: 100%;
    margin-bottom: 9px
}

html body footer#about .contact ul {
    overflow: hidden;
    list-style-type: none;
    margin: 0
}

html body footer#about .contact ul li {
    display: inline;
    float: left;
    width: 145px;
    margin: 18px 0 0;
    font-size: 1.2em
}

* html html body footer#about .contact ul li {
    overflow-x: hidden
}

html body footer#about .contact ul li:nth-child(2n) {
    width: 80px;
    margin-right: 0
}

html body footer#about .contact ul li:last-child {
    margin-bottom: 0
}

html body footer#about .contact ul li a {
    font-family: Helvetica Neue,Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    display: block;
    min-height: 36px;
    padding-left: 36px;
    color: #d6008b;
    background-image: url('assets/site/assets/elsewhere-sprites-OB3VPHLQ-73d72f059a4faf480d3415678a6821d1c08600a7e56506b9cf579a75b153ea9a.png');
    background-repeat: no-repeat;
    background-size: 72px 144px
}

html body footer#about .contact ul li a:hover {
    color: #85c700
}

html body footer#about .contact ul li a span {
    display: block;
    padding: 9px 0 9px 5px;
    background-color: #fff
}

html body footer#about .contact ul li a.email {
    background-position: 0 0
}

html body footer#about .contact ul li a.email:hover {
    background-position: -36px 0
}

html body footer#about .contact ul li a.github {
    background-position: 0 -108px
}

html body footer#about .contact ul li a.github:hover {
    background-position: -36px -108px
}

html body footer#about .contact ul li a.stack-overflow {
    background-position: 0 -72px
}

html body footer#about .contact ul li a.stack-overflow:hover {
    background-position: -36px -72px
}

html body footer#about .contact ul li a.micro {
    background-position: 0 -36px
}

html body footer#about .contact ul li a.micro:hover {
    background-position: -36px -36px
}


html body footer#about .contact ul li a.no-icon {
    padding-left: 0;
    background-image: none;
    min-height: 0
}


html body footer#about .contact ul li a.bcl-social-link.email {
    background-position: 0 0
}

html body footer#about .contact ul li a.bcl-social-link.email:hover {
    background-position: -36px 0
}

html body footer#about .contact ul li a.bcl-social-link.github {
    background-position: 0 -108px
}

html body footer#about .contact ul li a.bcl-social-link.github:hover {
    background-position: -36px -108px
}

html body footer#about .contact ul li a.bcl-social-link.stack-overflow {
    background-position: 0 -72px
}

html body footer#about .contact ul li a.bcl-social-link.stack-overflow:hover {
    background-position: -36px -72px
}

html body footer#about .contact ul li a.bcl-social-link.micro {
    background-position: 0 -36px
}

html body footer#about .contact ul li a.bcl-social-link.micro:hover {
    background-position: -36px -36px
}

html body footer#about .contact ul li a.bcl-social-link.no-icon {
    padding-left: 0;
    background-image: none;
    min-height: 0
}

html body.articles.list .title {
    text-align: left
}

html body.articles.list .micro {
    text-align: center
}

html body.articles.list .date {
    text-align: right
}

html body .articles article {
    position: relative;
    margin-top: 6.3em
}

html body .articles article h1 a:after,html body .articles article h2 a:after {
    content: "\a0\2192";
    visibility: hidden;
    font-size: .8em;
    line-height: 0
}

html body .articles article:hover h1 a:after,html body .articles article:hover h2 a:after {
    visibility: visible
}

html body .articles article>h1 {
    font-size: 2.4em;
    line-height: 1.3125;
    margin-bottom: .4375em
}

html body .articles article .body h2 {
    font-size: 1.8em;
    line-height: 2.3333333333;
    margin-bottom: 0
}

html body .articles article>time {
    position: absolute;
    display: block;
    top: 0;
    right: 480px;
    font-family: HelveticaNeue-UltraLight,Helvetica Neue UltraLight,Helvetica Neue,Helvetica,sans-serif;
    font-weight: 100;
    text-align: right;
    text-transform: uppercase;
    color: #999;
    font-size: 2.4em;
    line-height: 1.3125
}

html body .articles article.micropost>time {
    font-size: 1.4em;
    line-height: 1.5
}

html body .articles article>p:last-child {
    margin-bottom: 0
}

html body .articles article p.image img,html body .articles article .sunlit_image {
    display: block;
    max-width: 100%
}

html body .articles article .sunlit_image {
    margin-top: 21px;
    margin-bottom: 21px
}

html body .articles article p.image {
    text-align: center;
    margin-top: 42px;
    margin-bottom: 42px
}

html body .articles article p.image img {
    margin: 0 auto
}

html body .articles article p.image .caption {
    display: block;
    text-align: center;
    font-style: italic;
    font-family: HelveticaNeue-Italic,Helvetica Neue Italic,Helvetica Neue,Helvetica,sans-serif
}

html body .articles article p.audio {
    text-align: center
}

html body .articles article p.edit {
    margin-top: 21px
}

html body .articles article .unpublished p {
    font-size: 1.6em;
    line-height: 1.3125;
    margin-bottom: 1.3125em;
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif;
    font-weight: 700;
    color: #c00
}

html body .articles article ol,html body .articles article ul {
    margin-bottom: 2.1em
}

html body .articles article ol li,html body .articles article ul li {
    margin-bottom: 0
}

html body .articles article ol li ul,html body .articles article ol li ol,html body .articles article ul li ul,html body .articles article ul li ol {
    margin-left: 1.2em;
    margin-bottom: 0;
    list-style-type: circle
}

html body .articles article ol li ul li,html body .articles article ol li ol li,html body .articles article ul li ul li,html body .articles article ul li ol li {
    font-size: 1em
}

html body .articles article section h1 {
    font-size: 1.8em;
    line-height: 2.3333333333;
    margin-top: 2.3333333333em
}

html body .articles article footer {
    margin-top: 2.1em
}

html body .articles article footer h1 {
    font-size: 1.6em;
    line-height: 1.3125;
    margin-bottom: 1.3125em;
    margin-top: 2.625em
}

html body .articles article a.footnote {
    font-size: .75em;
    line-height: 0;
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif;
    font-weight: 700;
    vertical-align: super;
    text-decoration: none;
    color: #d6008b
}

html body .articles article ol.footnote-popup {
    position: absolute;
    width: 300px
}

html body .articles article ol.footnote-popup li.footnote-container {
    position: relative;
    padding: 1.05em;
    margin-bottom: 21px;
    background-color: #fff;
    border: 1px #cccccc solid
}

html body.articles #content {
    position: relative
}

html body.articles #content p.quick-pagination {
    font-size: 2.1em;
    line-height: 3;
    position: absolute;
    right: 0;
    top: 0
}

html body.articles #content p.quick-pagination a:hover {
    text-decoration: none
}

html body.articles #content p.pagination {
    overflow: hidden;
    font-size: 1.8em;
    line-height: 1.1666666667;
    margin-bottom: 0;
    margin-top: 2.3333333333em;
    text-align: right
}

html body.articles #content p.pagination .previous-page {
    float: left
}

html body.articles #content p.pagination .disabled {
    display: none
}

html body.articles #content p.date-range {
    font-size: 1.4em;
    line-height: 1.5
}

html body.articles.read .articles article,html body.articles.show .articles article {
    margin-top: 0
}

html body.articles.read .articles article>h1,html body.articles.read .articles article>time,html body.articles.show .articles article>h1,html body.articles.show .articles article>time {
    font-size: 3.6em;
    line-height: 1.1666666667;
    margin-bottom: .5833333333em
}

html body.articles.read .articles article .body h2,html body.articles.show .articles article .body h2 {
    font-size: 2.4em;
    line-height: 1.3125;
    margin-bottom: .4375em
}

html body.articles.read .articles article section h1,html body.articles.show .articles article section h1 {
    font-size: 2.4em;
    line-height: 1.3125;
    margin-bottom: .4375em;
    margin-top: 1.75em
}

html body.articles.form #content form.formtastic #article_title_input input {
    font-size: 1.8em;
    line-height: 1
}

html body.articles.form #content form.formtastic ol li.text textarea {
    width: 95%
}

html body.articles.list #branding {
    padding-right: 0
}

html body.articles.list #content {
    display: inline;
    float: left;
    margin-right: 0;
    width: 625px
}

* html html body.articles.list #content {
    overflow-x: hidden
}

html body.articles.list #content table#articles a {
    font-family: Helvetica Neue,Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000
}

html body.articles.list #content table#articles a:hover {
    color: #85c700
}

html body.articles.list #content table#articles td,html body.articles.list #content table#articles th {
    vertical-align: top
}

html body.articles.list #content table#articles .actions {
    width: 7%
}

html body.articles.list #content table#articles tr.draft .title a {
    font-family: HelveticaNeue-Medium,Helvetica Neue Medium,Helvetica Neue,Helvetica,sans-serif;
    font-weight: 700
}

html body.error #content h1.main+p {
    font-size: 1.4em;
    line-height: 1.5;
    margin-bottom: 1.5em;
    margin-top: 1.5em
}

html body .projects .project-screenshot {
    margin-bottom: 2.1em
}

html body .projects .project-screenshot img {
    height: 288px
}

html body .projects section {
    position: relative;
    margin-top: 6.3em
}

html body .projects section h1 a:after,html body .projects section h2 a:after {
    content: "\a0\2192";
    visibility: hidden;
    font-size: .8em;
    line-height: 0
}

html body .projects section:hover h1 a:after,html body .projects section:hover h2 a:after {
    visibility: visible
}

html body .projects section>h1 {
    font-size: 2.4em;
    line-height: 1.3125;
    margin-bottom: .4375em
}

html body .projects section ul {
    margin-top: 2.1em;
    margin-bottom: 2.1em
}

html body .projects section p.see-more {
    font-size: 1.8em;
    line-height: 1.1666666667;
    margin-bottom: 0;
    margin-top: 2.3333333333em
}

html body .projects section .project-description ul strong {
    display: block
}

html body .projects section .download {
    position: absolute;
    right: 480px;
    top: 0
}

html body .projects section .download p {
    font-size: 2.1em;
    line-height: 2;
    margin-bottom: 0;
    text-align: center
}

html body .projects section .download p a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    color: #f8f8f8;
    background-color: #d6008b
}

html body .projects section .download p a:hover {
    background-color: #85c700
}

html body.projects.show .projects section {
    margin-top: 0
}

html body.projects.form #content form.formtastic #project_name {
    font-size: 1.8em;
    line-height: 1
}

html body.projects.form #content form.formtastic ol li.text textarea {
    width: 95%
}

body.site.index #content p.see-more {
    font-size: 1.8em;
    line-height: 1.1666666667;
    margin-bottom: 0;
    margin-top: 2.3333333333em
}

body.site.index #content .portfolio {
    background-color: #fff;
    border: 1px #cccccc solid;
    padding: 1.05em;
    margin-bottom: 40px
}

body.site.index #content .portfolio h1 {
    font-size: 1.8em;
    line-height: 1.75
}

body.site.index #content .portfolio p {
    margin-bottom: 0
}

body.site.index #content .articles {
    margin-bottom: 10.5em
}

body.site.index #content .projects h1 a:after,body.site.index #content .projects h2 a:after {
    content: "\a0\2192";
    visibility: hidden;
    font-size: .8em;
    line-height: 0
}

body.site.index #content .projects:hover h1 a:after,body.site.index #content .projects:hover h2 a:after {
    visibility: visible
}

body.site.index #content .projects h2 {
    margin-top: 63px
}

html body.user_sessions.new #content form label {
    display: none
}

html body.user_sessions.new #content form #user_session_email,html body.user_sessions.new #content form #user_session_password {
    font-size: 1.8em;
    line-height: 1.1666666667;
    width: 15em
}

/*# sourceMappingURL=application.css.map */

/* MHMatar structure adjustments */
html body #branding nav.lr-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 640px;
}

html body #branding nav.lr-nav a {
    font-size: 1.4em;
    line-height: 1.5;
    text-transform: lowercase;
}

html body #branding nav.lr-nav a:not(:first-child)::before {
    content: "•";
    display: inline-block;
    padding-right: 10px;
    color: #000;
    font-weight: 400;
}

html body #content .page-intro,
html body #content .collection-list,
html body #content .archive-index,
html body #content .tag-list {
    margin-bottom: 2.1em;
}

html body #content .archive-year {
    font-size: 1.8em;
    line-height: 1.1666666667;
    margin: 1.1666666667em 0 .5833333333em;
    font-weight: 700;
}

html body #content .archive-row {
    margin-bottom: .7em;
}

html body #content .archive-row time {
    display: inline-block;
    min-width: 58px;
    color: #777;
}

html body #content .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

html body #content .tag-list a {
    font-size: 1.4em;
    line-height: 1.5;
}

html body #content .tag-list span {
    color: #777;
    font-weight: 400;
}

html body #content .collection-item {
    margin-bottom: 2.1em;
}

html body #content .collection-item h2 {
    font-size: 1.8em;
    line-height: 1.1666666667;
    margin-bottom: .35em;
}

html body #content .collection-item h2 span,
html body #content .collection-item .main span {
    color: #777;
    font-weight: 400;
}

html body #content .item-subtitle {
    color: #555;
    font-style: italic;
}

html body #content .intro .body,
html body #content .collections .body {
    font-size: 1em;
}

@media (max-width: 640px) {
    html body #branding nav.lr-nav {
        display: block;
    }

    html body #branding nav.lr-nav a {
        display: inline-block;
        margin-right: 10px;
    }

    html body #branding nav.lr-nav a:not(:first-child)::before {
        padding-right: 10px;
    }
}


/* MHMatar imported static pages */
html body .mhmatar-static-content .lr-article,
html body .mhmatar-page .lr-article {
    max-width: 760px;
}

html body .lr-article h1 {
    font-family: HelveticaNeue-Medium, Helvetica Neue Medium, Helvetica Neue, Helvetica, sans-serif;
    font-size: 3.6em;
    line-height: 1;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
}

html body .lr-article h2 {
    margin-top: 28px;
    margin-bottom: 12px;
}

html body .lr-article h3 {
    margin-top: 10px;
    margin-bottom: 4px;
    line-height: 1.35;
    font-family: HelveticaNeue-Medium, Helvetica Neue Medium, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 700;
}

html body .lr-article p,
html body .lr-article li {
    font-size: 1.4em;
    line-height: 1.55;
}

html body .lr-article ul,
html body .lr-article ol {
    margin-left: 22px;
    margin-bottom: 21px;
}

html body .lr-article li {
    margin-bottom: 9px;
}

html body .lr-portrait {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 0 21px;
    border-radius: 2px;
}

html body .lr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 18px;
}

html body .lr-tags a {
    display: inline-block;
    border: 1px solid #d8d8d8;
    padding: 5px 8px;
    background: #fff;
    font-size: 1.3em;
}

html body .bbs-post-item {
    margin-bottom: 32px;
}

html body .bbs-post-item .flex {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

html body .bbs-post-date {
    color: #777;
    font-size: 1.4em;
    min-width: 92px;
}

html body .bbs-post-link {
    font-size: 1.4em;
}

html body .bbs-post-item p {
    color: #666;
    margin-top: 8px;
    white-space: pre-line;
}

html body .lr-article figure img {
    max-width: 100%;
}

@media (max-width: 640px) {
    html body .bbs-post-item .flex {
        display: block;
    }

    html body .bbs-post-date {
        display: block;
        min-width: 0;
        margin-bottom: 4px;
    }
}

/* MHMatar editable sections v2 */
html body #branding nav.lr-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}

html body #branding nav.lr-nav a::before,
html body #branding nav.lr-nav a::after,
html body #branding nav.lr-nav a:not(:first-child)::before {
    content: none !important;
    display: none !important;
}

html body #branding nav.lr-nav .lr-nav-separator {
    display: inline-block;
    color: #000;
    font-size: 1.15em;
    line-height: 1;
    opacity: .75;
}

html body .mh-structured-article .mh-page-lead,
html body .mh-structured-article .mh-page-block,
html body .mhmatar-collection .mh-collection-list,
html body .mhmatar-archive-list .archive-index,
html body .mhmatar-tags-page .tag-list {
    max-width: 760px;
}

html body .mh-page-block {
    margin: 24px 0;
}

html body .mh-simple-list,
html body .mh-card-list,
html body .mh-collection-section {
    margin: 0 0 26px;
    padding-left: 22px;
}

html body .mh-card-list {
    list-style: none;
    padding-left: 0;
}

html body .mh-card-list li {
    margin-bottom: 16px;
}

html body .mh-simple-list li,
html body .mh-collection-section li {
    margin-bottom: 10px;
}

html body .mh-item-text {
    display: inline;
}

html body .mh-item-text::before {
    content: " — ";
}

html body .mh-page-figure {
    margin: 32px 0;
}

html body .mh-page-figure img {
    display: block;
    width: 100%;
    height: auto;
}

html body .mh-page-figure figcaption {
    font-size: 14px;
    opacity: .7;
    margin-top: 8px;
}

html body .mh-collection-list h2 {
    margin-top: 28px;
}

html body .mh-collection-row .mh-collection-description,
html body .mh-collection-row .mh-collection-meta,
html body .mh-collection-row .mh-collection-year {
    color: #555;
}

html body .bbs-post-item {
    margin-bottom: 32px;
}

html body .bbs-post-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 12px;
}

html body .bbs-post-date {
    color: #555;
    white-space: nowrap;
}

html body .bbs-post-excerpt {
    color: #666;
    margin-top: 8px;
    white-space: pre-line;
}

@media (max-width: 640px) {
    html body #branding nav.lr-nav {
        display: flex;
        gap: 0 8px;
    }

    html body #branding nav.lr-nav a {
        margin-right: 0;
    }

    html body #branding nav.lr-nav .lr-nav-separator {
        margin: 0;
    }

    html body .bbs-post-heading {
        display: block;
    }

    html body .bbs-post-date {
        display: block;
        margin-bottom: 2px;
    }
}

/* MHMatar editor/photo/nav polish v3 */
html body #branding nav.lr-nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .55em;
    row-gap: 0;
    max-width: 760px;
}

html body #branding nav.lr-nav a,
html body #branding nav.lr-nav .lr-nav-item,
html body #branding nav.lr-nav .lr-nav-separator {
    font-size: 1.4em;
    line-height: 1.5;
}

html body #branding nav.lr-nav .lr-nav-item {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

html body #branding nav.lr-nav .lr-nav-item a {
    font-size: 1em;
    line-height: inherit;
    margin: 0 !important;
}

html body #branding nav.lr-nav .lr-nav-separator {
    display: inline-block !important;
    margin-left: 8.2px;
    color: #000;
    opacity: .72;
    transform: translateY(3px);
    line-height: 24px;
}

html body #branding nav.lr-nav a::before,
html body #branding nav.lr-nav a::after,
html body #branding nav.lr-nav a:not(:first-child)::before,
html body #branding nav.lr-nav .lr-nav-separator::before,
html body #branding nav.lr-nav .lr-nav-separator::after {
    content: none !important;
    display: none !important;
}

html body .mh-collection-row.has-image,
html body .bbs-post-item.has-preview {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

html body .mh-collection-thumb,
html body .bbs-post-preview,
html body .mh-single-hero {
    margin: 0 0 16px;
}

html body .mh-collection-thumb img,
html body .bbs-post-preview img {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 2px;
}

html body .mh-single-hero img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}

html body .mh-collection-copy {
    min-width: 0;
}

@media (max-width: 640px) {
    html body #branding nav.lr-nav {
        display: flex !important;
        column-gap: .5em;
    }

    html body #branding nav.lr-nav .lr-nav-separator {
        margin-left: .5em;
    }

    html body .mh-collection-row.has-image,
    html body .bbs-post-item.has-preview {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
    }

    html body .mh-collection-thumb img,
    html body .bbs-post-preview img {
        width: 72px;
        height: 72px;
    }
}

html body .mh-article-image {
    margin: 16px 0 21px;
}

html body .mh-article-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}