@font-face {
    font-family: "Fixel";
    src: url('/FixelDisplay-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} 
@font-face {
    font-family: "Fixel";
    src: url('/FixelDisplay-RegularItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
} 
@font-face {
    font-family: "Fixel";
    src: url('/FixelDisplay-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel";
    src: url('/FixelDisplay-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Fixel";
    src: url('/FixelDisplay-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
:root {
    --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: auto; 
    --link-color: #FF9933; 
    --link-hover-color: #FFB84D; 
    --link-underline-color: rgba(255, 153, 51, 0.45);
    --link-underline-hover-color: rgba(255, 184, 77, 0.7); 
    --main-font-color: #EAE6E2;
    --supporting-text: #AAA4A0; 
    --tag-color: #4f9c85;
    --tag-hover-color: #6bc4a8;
    --sidenotes-content-width: 700px;
}
html {
    scroll-behavior: smooth;
    background-color:#181B1A;
    color-scheme: dark;
    }
body {
    font-family: "Fixel", var(--system-ui);
    color: var(--main-font-color); 
    max-width: 1000px;
    font-size: 19px;
    line-height: 1.5em;
    margin: 0 auto;
    background-color:#181B1A;
}
@media (max-width: 1024px) {
    body {
        max-width: 90%;
    }
}
@media (max-width: 768px) {
    body {
        max-width: 95%;
    }
}
@media (max-width: 480px) {
    body {
        max-width: 100%;
        padding: 0 20px;
    }
}
img {
    max-width: 100%;
    height: auto;
}
.content-img {
    text-align: center;
    margin-bottom: 1em; 
}
.content-img:has(.with-shadow) {
    margin-bottom: 1.5em;
}
.media {
    display: block;  
    margin-bottom: 1em;
}
.media img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.mediav2 {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.media-cntr {
    display: block;
    margin: 0 auto 1.5em;
    text-align: center;
    width: 100%;
}
.media-inline {
    display: inline-block;
    margin: 0 0 1.5em 0;
    vertical-align: top;
}
.rounded-corners {
    display: inline-block; 
    border-radius: 8px; 
    overflow: hidden;
}
.with-shadow {
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}
.rounded-corners img, .with-shadow img {
    display: block; 
    width: 100%;
    height: auto; 
}
.site-header {
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
    margin-bottom: 3.5em;
    align-items: flex-start;
}
.site-header a,
.site-header a:hover,
.site-header a:active,
.site-header a:visited {
    text-decoration: none;
}
/* Nav links and the logo opt out of the global press-down: the logo has its
   own scale, and nav is chrome. Covers the logo, whose <a> lives in here. */
.site-header a:active {
    top: 0;
}
.site-header-sidenotes {
    height: 115px;
}
.topnav {
    font-size: 0.90em;
    display: flex;
}
.topnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 1.5em 1em;
    flex-wrap: wrap;
}
.topnav ul a {
    text-decoration: none;
}
@media (max-width : 700px) {
    .site-header {
        flex-direction: column;
        gap: 0.55em;
    }
    .topnav {
        justify-content: flex-start;
        gap: 0.5em 1em;
        font-size: 0.75em;
    }
}
h1 {
    line-height: 1.1em;
}
h2, .full-post header h1,
.yashchique-article header h1,
.single-page header h1 {
    font-size: 2.1em;
    line-height: 1.1em;
    font-weight: bold;
    margin-bottom: 0.1em;
    margin-block-start: 0;
    margin-block-end: 0;
}
.sidenotes-article header h1 {
    font-size: 1.75em;
    font-weight: 800;
    padding-top: 1.35em;
    padding-bottom: 0.1em;
    margin: 0;
}
.yashchique-article header h1,
.yashchique-main-article header h2 {
    padding-top: 0.85em;
    padding-bottom: 0.1em;
    margin: 0;
}
h3 {
    font-size: 1.35em; 
    line-height: 1.2em;
    font-weight: bold;
}
h4 {
    font-size: 1.5em;
    font-weight: normal;
    padding-top: 1em;
    margin-block-start: 0;
    margin-block-end: 0.7em;
    display: block;
}
.h4-description { 
    display: block; 
    text-align: center;
    font-size: 1.25em;
    margin-bottom: 1em;
    color: var(--supporting-text);
}
h5 {
    font-size: 1.25em;
    font-weight: normal;
    padding-top: 1em;
    margin-block-start: 0;
    margin-block-end: 1em;
    display: block;
}
.centered-element {
    text-align: center;
}
.h4-centered {
    text-align: center;
}
.section-heading {
    text-align: center;
    font-size: 1.5em;
    font-weight: normal;
    padding-top: 1em;
    margin-block-start: 0;
    margin-block-end: 0.7em;
    display: block;
}
.no-bottom-margin {
    margin-block-end: 0;
}
.footnotes-heading {
    text-align: center;
    font-size: 1.25em;
    font-weight: normal;
    padding-top: 1em;
    margin-block-start: 0;
    margin-block-end: 1em;
    display: block;
}
:is(.h4-centered, .section-heading, .footnotes-heading) a:is(:link, :visited, :hover, :focus, :active) {
    text-decoration: none;
    color: inherit;
    text-shadow: none;
}
.centered-element {
    text-align: center;
}
.fragment {
    position: relative;
}
.fragment::before {
    content: '#';
    font-size: 0.8em;
    color: lightgrey;
    position: absolute;
    left: -1em;
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* Show the # on hover */
.fragment:hover::before {
    opacity: 1;
}
/* Hide the # fragment on small screens */
@media screen and (max-width: 480px) {
    .fragment::before {
        display: none;
    }
}
a.post-header:link, 
a.post-header:visited, 
.yashchique-main-article header h2 a:is(:link, :visited) { 
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}
a.post-header:hover,
.yashchique-main-article header h2 a:hover {
    text-shadow: 0px 0px 7px rgba(234, 230, 226, 0.7);
}
a.post-header:active,
.yashchique-main-article header h2 a:active {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.main-article,
.full-post,
.single-page {
    padding-top: 1.8em;
}
.full-post header, 
.main-article header, 
.sidenotes-article header,
.yashchique-main-article header,
.yashchique-article header,
.single-page header {
    text-align: center;
    margin-bottom: 0.75em;
    padding-top: 2.0em;
}
.main-article header h2,
.full-post header h1,
.yashchique-main-article header h2,
.yashchique-article header h1,
.single-page header h1 {
    padding-bottom: 0.1em;
}
.full-post header time, 
.main-article header time, 
.sidenotes-article header time,
.yashchique-main-article header time,
.yashchique-article header time {
    font-size: 0.85em;
    color: var(--supporting-text);
}
a, a:link, a:visited {
    color: var(--link-color);
    text-decoration: underline; 
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    text-decoration-color: var(--link-underline-color);
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
a:hover, a:focus {
    color: var(--link-hover-color); 
    text-decoration-color: var(--link-underline-hover-color);
    text-shadow: 0 0 6px rgba(245, 166, 35, 0.6);
}
a:active {
    position: relative;
    top: 2px;
    text-decoration: none;
    text-shadow: none;
}
article {
    margin-bottom: 4.5em;
}
.full-post {
    margin-bottom: 5.5em;
}
/* The entry footer: an arrow link closing a post teaser, alone on the main
   blog and sharing the row with stamps in Ящик. Both article types are listed
   here rather than duplicated per section - the same way the header, heading
   and time rules above already cover both. What differs between the sections
   is only what sits inside the bar, so Ящик keeps just its purple stamp pills
   in yashchique.css, and only Ящик pushes its link to the far end. */
.main-article footer,
.yashchique-main-article footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75em 1.5em;
    padding-top: 0.75em;
    /* Dotted rather than solid, and pitched low deliberately: the rule is
       there to mark the end of the teaser, not to draw attention to itself. */
    border-top: 1px dotted rgba(255, 255, 255, 0.12);
}
/* The one genuine divergence: Ящик sits tighter under its teaser. */
.main-article footer {
    margin-top: 2.25em;
}
.main-article footer > a,
.yashchique-main-article footer > a {
    white-space: nowrap;
    text-decoration: none;
}
/* Only Ящик pushes the arrow link to the far end of the bar, because there it
   shares the row with stamp pills. The main blog footer holds nothing but the
   link, so it sits where the flex row starts. */
.yashchique-main-article footer > a {
    margin-left: auto;
}
.main-article footer > a::after,
.yashchique-main-article footer > a::after {
    content: "\2192";
    display: inline-block;
    transition: transform 0.2s ease;
    margin-left: 0.3em;
}
.main-article footer > a:hover::after,
.main-article footer > a:focus::after,
.yashchique-main-article footer > a:hover::after,
.yashchique-main-article footer > a:focus::after {
    transform: translateX(0.2em);
}
/* This link has no underline to sink into, but it does have an arrow to its
   right - so it opts out of the global press-down and presses sideways
   instead, into the space the arrow opened up on hover. */
.main-article footer > a:active,
.yashchique-main-article footer > a:active {
    top: 0;
    left: 3px;
}
@media (max-width: 480px) {
    .yashchique-main-article footer > a {
        margin-left: 0;
    }
}
.tag-container {
    padding-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em 15px;
    justify-content: center;
    align-items: center;
}
.tag-container a:is(:link, :visited),
.all-tags-container a:is(:link, :visited) {
    display: inline-block;
    border-radius: 4px; 
    padding: 8px 15px;
    border: 1px solid rgba(73, 214, 200, 0.4); 
    background-color: rgba(73, 214, 200, 0.12);
    color: #49d6c8; 
    text-decoration: none;
    transition: background-color 0.23s ease-in, color 0.23s ease-in, border-color 0.23s ease-in;
} 
.tag-container a:hover,
.all-tags-container a:hover {
    background-color: rgba(73, 214, 200, 0.25);
    border-color: #49d6c8;
    color: #6ef0e4; 
    text-shadow: none;
}
.tag-container a:active,
.all-tags-container a:active {
    box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.6) inset;
    background-color: rgba(73, 214, 200, 0.35);
    top: 0;
}
.metadata { 
    font-size: 0.85em;
    display: flex;
    gap: 20px; 
    align-items: center;
    margin-bottom: 1.25em;
    padding-top: 1em;
}
@media (max-width : 400px) {
    .metadata {
        flex-direction: column;
    }
}
.metadata .icon {
    display: inline-block;
    width: 45px;
    height: auto;
    overflow: visible;
    fill: var(--main-font-color);
    flex-shrink: 0;
}
.metadata-container {
    padding-bottom: 1.5em; 
}
.footer {
    border-top: 1px solid rgba(234, 230, 226, 0.3);
    padding-top: 2em;
    padding-bottom: 2.5em;
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    gap: 25px 1.5em;
}
.footer a {
    text-decoration: none;
}
.paginator {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 4.5em;
}
@media (max-width : 500px) {
    .paginator {
        display: flex; 
        flex-direction: column;
        text-align: center;
        gap: 1.5em;
    }
}
.paginator a {
    text-decoration: none;
}
.bottomnav {
    display: flex;
    flex-wrap: nowrap;
    gap: 25px;
}
@media (max-width : 635px) {
    .footer {
    flex-wrap: wrap; 
    flex-direction: column;
    justify-content: center;
    text-align: center;
    }
    .bottomnav {
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5em 1em;
    }
}
/* CSS for the /posts page */
.page-list {
    display: flex; 
    flex-wrap: wrap;
    gap: 1.55em 30px;
    align-items: center;
    justify-content: center;
    padding-top: 1.5em;
    margin-bottom: 2.5em;
}
a.post-page-item:link, a.post-page-item:visited {
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 1 300px;
    height: 125px;  
    padding: 0.5em;
    box-sizing: border-box;
    word-break: break-word;
    border-radius: 5px;
    border: 1px solid rgba(255, 153, 51, 0.4);
    text-decoration: none;
    background-color: rgba(255, 153, 51, 0.12);
    color: #FF9933;
    transition: background-color 0.23s ease-in, color 0.23s ease-in, border-color 0.23s ease-in;
}
a.post-page-item:hover {
    background-color: rgba(255, 153, 51, 0.25);
    border-color: #FF9933;
    color: #ffbb66;
}
a.post-page-item:active {
    box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.6) inset;
    background-color: rgba(255, 153, 51, 0.35);
    top: 0;
}
.post-page-item-title { 
    font-weight: bold;
    text-align: center;
}
.post-page-post-date {
    font-size: 0.9em;
}
.emojiheader { 
    font-weight: normal;
    margin-block-start: 0;
    font-family: var(--system-ui);
    font-size: 36px;
    line-height: 36px;
    text-align: center;
    padding-top: 0.5em;
    margin-block-end: 19px;
}
.emojiheader a:is(:link, :visited, :hover, :active) {
    text-decoration: none;
    color: inherit;
}
.emojiheader:has(.with-context) {
    margin-block-end: 0px;
}
.emojiheader a {
    display: inline-block;
    position: relative; 
    color: inherit;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    text-shadow: none;
}
.emojiheader a:hover {
    transform: scale(1.05);
    text-shadow: none; 
}
.emojiheader a:active {
    transform: scale(1.15);
    text-shadow: none;
    top: 0;
}
.context:link,
.context:hover,
.context:active,
.context:visited {
    text-decoration: none;
    text-shadow: none;
    font-size: 0.9em;
    color: var(--supporting-text);
}
.context:active {
    top: 0;
}
.context-container {
    display: block;
    text-align: center;
    margin-bottom: 1em;
}
li {
    margin-bottom: 0.45em;
}
ul, ol {
    padding-inline-start: 1em;
}
/* styles for a tagged posts page */ 
.h1-tag-page {
    text-align: center;
    margin-top: 2.0em;
}
.highlighted-tag {
    color: var(--supporting-text);
}
/* A term page is one chronological run of posts and sidenotes together. The
   list keeps the body's measure, so post excerpts render exactly as they do
   on the homepage; sidenotes, which are written for the narrower column the
   sidenotes section uses, are narrowed to that same token and centred inside
   the list. The class comes from the item's own section in tag/term.html. */
.term-list {
    max-width: 1000px;
    margin-inline: auto;
}
.term-list .is-sidenotes {
    max-width: var(--sidenotes-content-width);
    margin-inline: auto;
}
/* styles for the page with all tags */ 
.all-tags-container { 
    display: flex; 
    flex-wrap: wrap;
    gap: 1.5em 35px; 
    justify-content: center;
    padding-top: 1.5em;
    padding-bottom: 2.5em;
}
.not-found {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 5em;
}
/* Self-contained so the heading level can change: these were inherited from
   the generic h2 rule, and h1's UA defaults differ in all three. */
.not-found h1 {
    font-size: 2.1em;
    font-weight: bold;
    line-height: 1.1em;
    margin: 0;
}
/* 404 page only. No bottom padding: the sentence ends in a colon and leads
   straight into the .page-list below, which brings its own padding-top. */
.suggestion-block {
    text-align: center;
    font-weight: 500;
    font-size: 1.1em;
}
.full-post footer,
.sidenotes-article footer,
.yashchique-article footer {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 0.5em 20px 0.7em;
    margin: 3em auto 2.5em;
    font-size: 0.85em;
    color: #D4D0CC;  
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
@media (max-width : 500px) {
    .full-post footer,
    .sidenotes-article footer,
    .yashchique-article footer {
        flex-direction: column;
        gap: 1em;
        padding: 1em 10px 0.7em;
    }
    .full-post footer p,
    .sidenotes-article footer p,
    .yashchique-article footer p {
        text-align: center;
    }
}
.full-post footer > svg,
.sidenotes-article footer > svg,
.yashchique-article footer > svg {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: #FF9999;
}
.footnotes {
    border-bottom: 1px solid rgba(234, 230, 226, 0.15);
    padding-bottom: 1.5em;
    font-size: 0.9em;
}
.footnotes hr {
  display: none;
}
.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25em;
    flex-wrap: wrap;
    font-size: 0.9em;
}
.post-navigation .next-post {
    flex: 1 1 auto;
    text-align: left;
}
.post-navigation .prev-post {
    flex: 1 1 auto; 
    text-align: right;
}
/* When they wrap, center both */
@media (max-width: 768px) {
    .post-navigation {
        flex-direction: column;
        gap: 1.1em;
        margin-bottom: 2em;
    }
    .post-navigation .next-post,
    .post-navigation .prev-post {
        text-align: center; 
        flex: 1 1 100%;
    }
}
.post-navigation a {
    text-decoration: none;
} 
sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
} 
sub {
   bottom: -0.25em;
} 
sup {
   top: -0.5em;
}
/* styles for About page */ 
.description {
	color: var(--supporting-text);
}
/* styles for sidenotes page */
.sidenotes-content { 
    margin-inline: auto;
    max-width: var(--sidenotes-content-width);
}
.year-block {
    margin-bottom: 3rem;
}
/* Self-contained so the element can be any heading level: line-height and
   margin-top were previously inherited from h3 and its UA default. */
.year-label {
    color: #fbeade;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2em;
    margin-top: 1em;
    margin-bottom: 1rem;
}
.year-posts {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.year-posts li {
    line-height: 1.1;
    margin-bottom: 0.15em;
}
.post-title-link:is(:link, :visited) {
    font-size: 1.3rem;
    font-weight: 800;
    color: #A5B4FC;
    text-decoration: underline; 
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: rgba(165, 180, 252, 0.2);
    transition: all 0.1s ease;
}
.post-title-link:hover {
    color: #49D6C8;
    text-decoration-color: rgba(73, 214, 200, 0.6);
    text-shadow: 0 0 8px rgba(73, 214, 200, 0.3);
}
.post-title-link:active {
    color: #38AD9F;
    text-decoration: none;
}
a.rss-link {
    display: inline-flex;
    align-items: baseline;
    gap: 1px; 
    color: var(--supporting-text);
    text-decoration: none;
    transition: none;
    text-shadow: none;
}  
a.rss-link::before {
    content: "";
    display: inline-block;
    position: relative;
    top: 2px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A9A39F' viewBox='0 0 32 32'%3E%3Ccircle cx='6.566' cy='25.434' r='3.566'/%3E%3Cpath d='M20.234,29h-5.051c0-6.728-5.454-12.183-12.183-12.183h0v-5.051c9.518,0,17.234,7.716,17.234,17.234Z'/%3E%3Cpath d='M23.8,29c0-11.488-9.312-20.8-20.8-20.8V3c14.359,0,26,11.641,26,26h-5.2Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}  
a.rss-link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF6600' viewBox='0 0 32 32'%3E%3Ccircle cx='6.566' cy='25.434' r='3.566'/%3E%3Cpath d='M20.234,29h-5.051c0-6.728-5.454-12.183-12.183-12.183h0v-5.051c9.518,0,17.234,7.716,17.234,17.234Z'/%3E%3Cpath d='M23.8,29c0-11.488-9.312-20.8-20.8-20.8V3c14.359,0,26,11.641,26,26h-5.2Z'/%3E%3C/svg%3E");
}
a.rss-link:hover {
    color: #FF6600; 
}
.post-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
@media (max-width: 500px) {
    .post-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .year-posts li {
        margin-bottom: 0.25em;
    }
}
.post-tags {
    display: inline-flex;
    gap: 5px;
    position: relative;
    top: 2px;
}
.tag-link:is(:link, :visited) {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--tag-color);
}
.tag-link:is(:hover) {
    text-shadow: none;
    color: var(--tag-hover-color);
}
.tag-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
@media (min-width: 640px) {
  .year-block {
    display: grid;
    grid-template-columns: var(--year-col, 4rem) 1fr;
    column-gap: 1.25rem;
    align-items: baseline;
  }
  .year-label {
    margin: 0;
    line-height: 1.1;
    text-align: left;
  }
  .year-posts {
    margin: 0;
  }
}
.sidenotes-section-logo,
.yashchique-section-logo {
    display: block;
    padding-top: 0.30em;
    text-align: center;
    font-size: 2em;
    font-family: var(--system-ui);
    line-height: 1em;
    margin: 0;
}
.sidenotes-body {
    max-width: var(--sidenotes-content-width);
    width: 100%;
    display: block;
    margin: 0 auto;
}
.sidenotes-list-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}
.sidenotes-description {
    font-size: 0.85em;
    color: var(--supporting-text);
    margin: 0 auto;
    margin-top: 1.6em;
    margin-bottom: 6.0em;
    padding: 0;
    max-width: 700px;
}
.site-header div {
    margin-block-start: 0;
    margin-block-end: 0;
}
.site-logo {
    width: 200;
    height: auto;
    fill: var(--main-font-color);
    transition: transform 0.1s ease;
}
.site-logo:active {
    transform: scale(1.03); 
}
.logo-fill {
    fill: transparent;
    transition: fill 0.3s ease;
}
.section-fill {
    transition: fill 0.3s ease;
}
.site-logo.hover-color-1:hover .logo-fill,
.site-logo.hover-color-1:hover .section-fill { fill: #cc00ff; }
.site-logo.hover-color-2:hover .logo-fill,
.site-logo.hover-color-2:hover .section-fill { fill: #00ffcc; }
.site-logo.hover-color-2:hover .logo-contour { fill: #ff0077; }
.site-logo.hover-color-3:hover .logo-fill,
.site-logo.hover-color-3:hover .section-fill { fill: #ffcc00; }
.site-logo.hover-color-3:hover .logo-contour { fill: #9900ff; }
.site-logo.hover-color-4:hover .logo-fill,
.site-logo.hover-color-4:hover .section-fill { fill: #ff00cc; }
.site-logo.hover-color-5:hover .logo-fill,
.site-logo.hover-color-5:hover .section-fill { fill: #00ff00; }
.site-logo.hover-color-5:hover .logo-contour { fill: #ff00ff; }
.site-logo.hover-color-6:hover .logo-fill,
.site-logo.hover-color-6:hover .section-fill { fill: #00bfff; }
.site-logo.hover-color-7:hover .logo-fill,
.site-logo.hover-color-7:hover .section-fill { fill: #ff0066; }
.site-logo.hover-color-7:hover .logo-contour { fill: #ffff00; }
.site-logo.hover-color-8:hover .logo-fill,
.site-logo.hover-color-8:hover .section-fill { fill: #ff3300; }
.site-logo.hover-color-8:hover .logo-contour { fill: #00ccff; }
.site-logo.hover-color-9:hover .logo-fill,
.site-logo.hover-color-9:hover .section-fill { fill: #66ff00; }
.site-logo.hover-color-9:hover .logo-contour { fill: #00b3ff; }
.site-logo.hover-color-10:hover .logo-fill,
.site-logo.hover-color-10:hover .section-fill { fill: #00ffff; }
.site-logo.hover-color-10:hover .logo-contour { fill: #ff3399; }
hr {
    border: none; 
    height: 1px;
    background: rgba(0, 0, 0, 0.1); 
    margin: 20px 0;
    border-radius: 1px; 
}
a.goback:link,
a.goback:hover, 
a.goback:active,
a.goback:visited,
a.goback:focus,
a.goforward {
    text-decoration: none;
}
sup a {
    text-decoration: none !important;
}
.table-of-contents li a {
    text-decoration-style: dotted;
} 
.sidenotes-section-logo a:is(:link, :visited, :hover, :active),
.yashchique-section-logo a:is(:link, :visited, :hover, :active) {
    text-decoration: none;
    color: inherit;
}
.sidenotes-section-logo a,
.yashchique-section-logo a {
    display: inline-block; 
    position: relative; 
    color: inherit;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.sidenotes-section-logo a:hover,
.yashchique-section-logo a:hover {
    transform: scale(1.05); 
    text-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.2),  /* Subtle main shadow */
        0 4px 10px rgba(0, 0, 0, 0.15), /* Secondary shadow layer */
        0 8px 12px rgba(0, 0, 0, 0.1); /* Fading trail */
}
.sidenotes-section-logo a:active,
.yashchique-section-logo a:active {
    transform: scale(1.15); 
    text-shadow: 
        0 2px 5px rgba(32, 25, 25, 0.3), /* More condensed shadow */
        0 4px 8px rgba(0, 0, 0, 0.2); /* Softer secondary shadow */
    top: 0;
}
a.bsk-link {
    display: inline-flex;
    align-items: baseline;
    gap: 3px; /* Space between icon and text */
}  
a.bsk-link::before {
    content: "";
    display: inline-block;
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 32 32'%3E%3Cpath d='M23.931,5.298c-3.21,2.418-6.663,7.32-7.931,9.951-1.267-2.631-4.721-7.533-7.931-9.951-2.316-1.744-6.069-3.094-6.069,1.201,0,.857,.49,7.206,.778,8.237,.999,3.583,4.641,4.497,7.881,3.944-5.663,.967-7.103,4.169-3.992,7.372,5.908,6.083,8.492-1.526,9.154-3.476,.123-.36,.179-.527,.179-.379,0-.148,.057,.019,.179,.379,.662,1.949,3.245,9.558,9.154,3.476,3.111-3.203,1.671-6.405-3.992-7.372,3.24,.553,6.882-.361,7.881-3.944,.288-1.031,.778-7.38,.778-8.237,0-4.295-3.753-2.945-6.069-1.201Z' fill='%23cccccc'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}  
a.bsk-link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 32 32'%3E%3Cpath d='M23.931,5.298c-3.21,2.418-6.663,7.32-7.931,9.951-1.267-2.631-4.721-7.533-7.931-9.951-2.316-1.744-6.069-3.094-6.069,1.201,0,.857,.49,7.206,.778,8.237,.999,3.583,4.641,4.497,7.881,3.944-5.663,.967-7.103,4.169-3.992,7.372,5.908,6.083,8.492-1.526,9.154-3.476,.123-.36,.179-.527,.179-.379,0-.148,.057,.019,.179,.379,.662,1.949,3.245,9.558,9.154,3.476,3.111-3.203,1.671-6.405-3.992-7.372,3.24,.553,6.882-.361,7.881-3.944,.288-1.031,.778-7.38,.778-8.237,0-4.295-3.753-2.945-6.069-1.201Z' fill='%231185FE'/%3E%3C/svg%3E");
}
a.mstdn-link {
    display: inline-flex;
    align-items: baseline;
    gap: 3px; /* Space between icon and text */
}  
a.mstdn-link::before {
    content: "";
    display: inline-block;
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 32 32'%3E%3Cpath d='M30.116,7.642c-.438-3.223-3.278-5.764-6.645-6.256-.568-.083-2.72-.386-7.705-.386h-.037c-4.987,0-6.056,.303-6.624,.386-3.273,.479-6.262,2.761-6.987,6.023-.349,1.606-.386,3.387-.321,5.02,.092,2.343,.11,4.681,.325,7.014,.149,1.55,.408,3.087,.776,4.601,.689,2.795,3.48,5.121,6.214,6.07,2.927,.99,6.075,1.154,9.091,.474,.332-.076,.66-.165,.984-.266,.732-.23,1.591-.488,2.222-.941,.009-.006,.016-.015,.021-.024,.005-.009,.008-.02,.008-.031v-2.261c0-.01-.003-.02-.007-.029-.004-.009-.011-.017-.019-.023-.008-.006-.017-.01-.027-.013-.01-.002-.02-.002-.03,0-1.932,.457-3.913,.685-5.899,.682-3.419,0-4.339-1.605-4.602-2.273-.212-.577-.346-1.18-.4-1.792,0-.01,.001-.021,.006-.03,.004-.009,.011-.018,.019-.024,.008-.006,.018-.011,.028-.013,.01-.002,.021-.002,.031,0,1.9,.453,3.848,.682,5.803,.682,.47,0,.939,0,1.409-.012,1.966-.055,4.038-.154,5.972-.528,.048-.01,.097-.018,.138-.03,3.051-.579,5.954-2.398,6.249-7.004,.011-.181,.039-1.899,.039-2.088,.001-.64,.208-4.536-.03-6.931Zm-4.696,11.493h-3.208v-7.772c0-1.636-.689-2.471-2.091-2.471-1.541,0-2.313,.987-2.313,2.937v4.254h-3.189v-4.254c0-1.95-.773-2.937-2.315-2.937-1.394,0-2.09,.834-2.091,2.471v7.772h-3.205V11.127c0-1.636,.422-2.936,1.267-3.9,.871-.961,2.014-1.455,3.433-1.455,1.642,0,2.883,.624,3.71,1.872l.798,1.325,.8-1.325c.827-1.248,2.068-1.872,3.707-1.872,1.417,0,2.56,.494,3.434,1.455,.845,.963,1.267,2.263,1.267,3.9l-.003,8.008Z' fill='%23cccccc'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}  
a.mstdn-link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 32 32'%3E%3Cpath d='M30.116,7.642c-.438-3.223-3.278-5.764-6.645-6.256-.568-.083-2.72-.386-7.705-.386h-.037c-4.987,0-6.056,.303-6.624,.386-3.273,.479-6.262,2.761-6.987,6.023-.349,1.606-.386,3.387-.321,5.02,.092,2.343,.11,4.681,.325,7.014,.149,1.55,.408,3.087,.776,4.601,.689,2.795,3.48,5.121,6.214,6.07,2.927,.99,6.075,1.154,9.091,.474,.332-.076,.66-.165,.984-.266,.732-.23,1.591-.488,2.222-.941,.009-.006,.016-.015,.021-.024,.005-.009,.008-.02,.008-.031v-2.261c0-.01-.003-.02-.007-.029-.004-.009-.011-.017-.019-.023-.008-.006-.017-.01-.027-.013-.01-.002-.02-.002-.03,0-1.932,.457-3.913,.685-5.899,.682-3.419,0-4.339-1.605-4.602-2.273-.212-.577-.346-1.18-.4-1.792,0-.01,.001-.021,.006-.03,.004-.009,.011-.018,.019-.024,.008-.006,.018-.011,.028-.013,.01-.002,.021-.002,.031,0,1.9,.453,3.848,.682,5.803,.682,.47,0,.939,0,1.409-.012,1.966-.055,4.038-.154,5.972-.528,.048-.01,.097-.018,.138-.03,3.051-.579,5.954-2.398,6.249-7.004,.011-.181,.039-1.899,.039-2.088,.001-.64,.208-4.536-.03-6.931Zm-4.696,11.493h-3.208v-7.772c0-1.636-.689-2.471-2.091-2.471-1.541,0-2.313,.987-2.313,2.937v4.254h-3.189v-4.254c0-1.95-.773-2.937-2.315-2.937-1.394,0-2.09,.834-2.091,2.471v7.772h-3.205V11.127c0-1.636,.422-2.936,1.267-3.9,.871-.961,2.014-1.455,3.433-1.455,1.642,0,2.883,.624,3.71,1.872l.798,1.325,.8-1.325c.827-1.248,2.068-1.872,3.707-1.872,1.417,0,2.56,.494,3.434,1.455,.845,.963,1.267,2.263,1.267,3.9l-.003,8.008Z' fill='%236361F2'/%3E%3C/svg%3E");
}
a.tlgrm-link {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}  
a.tlgrm-link::before {
    content: "";
    display: inline-block;
    position: relative;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 32 32'%3E%3Cpath d='M16,2c-7.732,0-14,6.268-14,14s6.268,14,14,14,14-6.268,14-14S23.732,2,16,2Zm6.489,9.521c-.211,2.214-1.122,7.586-1.586,10.065-.196,1.049-.583,1.401-.957,1.435-.813,.075-1.43-.537-2.218-1.053-1.232-.808-1.928-1.311-3.124-2.099-1.382-.911-.486-1.412,.302-2.23,.206-.214,3.788-3.472,3.858-3.768,.009-.037,.017-.175-.065-.248-.082-.073-.203-.048-.29-.028-.124,.028-2.092,1.329-5.905,3.903-.559,.384-1.065,.571-1.518,.561-.5-.011-1.461-.283-2.176-.515-.877-.285-1.574-.436-1.513-.92,.032-.252,.379-.51,1.042-.773,4.081-1.778,6.803-2.95,8.164-3.517,3.888-1.617,4.696-1.898,5.222-1.907,.116-.002,.375,.027,.543,.163,.142,.115,.181,.27,.199,.379,.019,.109,.042,.357,.023,.551Z' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
a.tlgrm-link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2352a4e2' viewBox='0 0 32 32'%3E%3Cpath d='M16,2c-7.732,0-14,6.268-14,14s6.268,14,14,14,14-6.268,14-14S23.732,2,16,2Zm6.489,9.521c-.211,2.214-1.122,7.586-1.586,10.065-.196,1.049-.583,1.401-.957,1.435-.813,.075-1.43-.537-2.218-1.053-1.232-.808-1.928-1.311-3.124-2.099-1.382-.911-.486-1.412,.302-2.23,.206-.214,3.788-3.472,3.858-3.768,.009-.037,.017-.175-.065-.248-.082-.073-.203-.048-.29-.028-.124,.028-2.092,1.329-5.905,3.903-.559,.384-1.065,.571-1.518,.561-.5-.011-1.461-.283-2.176-.515-.877-.285-1.574-.436-1.513-.92,.032-.252,.379-.51,1.042-.773,4.081-1.778,6.803-2.95,8.164-3.517,3.888-1.617,4.696-1.898,5.222-1.907,.116-.002,.375,.027,.543,.163,.142,.115,.181,.27,.199,.379,.019,.109,.042,.357,.023,.551Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}
a.rss-link-post {
    display: inline-flex;
    align-items: baseline;
    gap: 3px; 
}  
a.rss-link-post::before {
    content: "";
    display: inline-block;
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 32 32'%3E%3Ccircle cx='6.566' cy='25.434' r='3.566'/%3E%3Cpath d='M20.234,29h-5.051c0-6.728-5.454-12.183-12.183-12.183h0v-5.051c9.518,0,17.234,7.716,17.234,17.234Z'/%3E%3Cpath d='M23.8,29c0-11.488-9.312-20.8-20.8-20.8V3c14.359,0,26,11.641,26,26h-5.2Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}  
a.rss-link-post:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF6600' viewBox='0 0 32 32'%3E%3Ccircle cx='6.566' cy='25.434' r='3.566'/%3E%3Cpath d='M20.234,29h-5.051c0-6.728-5.454-12.183-12.183-12.183h0v-5.051c9.518,0,17.234,7.716,17.234,17.234Z'/%3E%3Cpath d='M23.8,29c0-11.488-9.312-20.8-20.8-20.8V3c14.359,0,26,11.641,26,26h-5.2Z'/%3E%3C/svg%3E");
}
a.email-link {
    display: inline-flex;
    align-items: baseline;
    gap: 4px; 
}  
a.email-link::before {
    content: "";
    display: inline-block;
    position: relative;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 512 512'%3E%3Cpath d='M256 352c-16.53 0-33.06-5.422-47.16-16.41L0 173.2V400C0 426.5 21.49 448 48 448h416c26.51 0 48-21.49 48-48V173.2l-208.8 162.5C289.1 346.6 272.5 352 256 352zM16.29 145.3l212.2 165.1c16.19 12.6 38.87 12.6 55.06 0l212.2-165.1C505.1 137.3 512 125 512 112C512 85.49 490.5 64 464 64h-416C21.49 64 0 85.49 0 112C0 125 6.01 137.3 16.29 145.3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}  
a.email-link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232ECC71' viewBox='0 0 512 512'%3E%3Cpath d='M256 352c-16.53 0-33.06-5.422-47.16-16.41L0 173.2V400C0 426.5 21.49 448 48 448h416c26.51 0 48-21.49 48-48V173.2l-208.8 162.5C289.1 346.6 272.5 352 256 352zM16.29 145.3l212.2 165.1c16.19 12.6 38.87 12.6 55.06 0l212.2-165.1C505.1 137.3 512 125 512 112C512 85.49 490.5 64 464 64h-416C21.49 64 0 85.49 0 112C0 125 6.01 137.3 16.29 145.3z'/%3E%3C/svg%3E");
}
.no-underline {
    text-decoration: none;
    display: inline-block;
}
.no-wrap {
    white-space: nowrap; 
}
/* styles for city page */
.flag-svg-icon {
    border-radius: 3px; 
    width: 55px;
    height: auto;
    display: block;
}
.city-plaque {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 0.75em 1em 0.75em 1.75em; 
    margin: 2em 0;
    border-radius: 8px;
    font-size: 0.85em;
    line-height: 1.45;
    color: #D4D0CC;  
    background-color: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 370px) {
  .city-plaque {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0.9em 1em;
  }
  .flag-svg-icon {
    margin: 0; 
  }
}
blockquote {
  position: relative;
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: rgb(234, 230, 226);
}
blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: rgba(234, 230, 226, 0.45); 
  box-shadow: 0 0 4px rgba(234, 230, 226, 0.25);
  border-radius: 1px;
}
.yeargrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
  align-items:start;
}
.yeargrid-item{ margin:0; }
.yeargrid-link{ display:block; }
/* Photos are not text links: opt out of the global `a:active` press-down.
   The opt-out has to carry `:active` itself, or it ties on specificity. */
.yeargrid-link:active{ top: 0; }
.yeargrid-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.yeargrid-cap{
  margin-top:8px;
  font-size:0.95rem;
  line-height:1.35;
  opacity:0.85;
}
.grid-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}
a.external-link::after {
  content: "↗";
  display: inline-block;
  transform: translateY(-0.45em);
  margin-left: 0.2em;
  right: 0;
  font-size: 0.7em;
  line-height: 1;
  color: var(--link-underline-color);
  text-decoration: none;
  pointer-events: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
a.external-link:hover::after {
  color: var(--link-underline-hover-color);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gearinfo {
  font-size: 0.85em;
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 1.2em 20px;
  align-items: center;
  margin-bottom: 1.25em;
  padding-top: 1em;
}
.gearinfo dt {
  display: flex;
  margin: 0;
}
.gearinfo dd {
  margin: 0;
}
.gearinfo dd p { margin: 0; }
.gearinfo svg {
  display: block;
  width: 45px;
  height: auto;
  overflow: visible;
  color: var(--main-font-color);
}
@media (max-width: 400px) {
  .gearinfo {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .gearinfo dd {
    margin-bottom: 0.6em;
  }
}
.gearinfo .kit { display: block; }
/* ---- Footnote popovers ---------------------------------------------- */
/* The UA stylesheet centres [popover] with `inset: 0; margin: auto`.
   Both have to be reset before JS positioning has any effect. */
.fn-popover {
  flex-direction: column;
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 100;
  box-sizing: border-box;
  width: max-content;
  max-width: min(24em, calc(100vw - 20px));
  padding: 0.9em 1.1em;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--main-font-color);
  background: #2A2F2C;
  border: 1px solid currentColor;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  overflow: visible;
  max-height: min(60vh, 32em);
}
.fn-popover > * {
}
.fn-popover:popover-open {
  display: flex;
  opacity: 1;
  translate: 0 0;
}
.fn-popover-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fn-popover-body > :first-child { margin-top: 0; }
.fn-popover-body > :last-child { margin-bottom: 0; }
.fn-popover:focus {
  outline: none;
}
/* Bare URLs in footnotes have no break opportunities inside the path
   (underscores don't count), so they overflow the fixed-width popover. */
.fn-popover-body {
  overflow-wrap: anywhere;
}
.fn-popover :first-child {
  margin-top: 0;
}
.fn-popover :last-child {
  margin-bottom: 0;
}
/* Marks the reference that opened the currently visible popover. */
/* --- badge ------------------------------------------------------- */
sup:has(.footnote-ref) {
  font-size: 1em;
  line-height: 0;
  vertical-align: middle;
  position: relative; 
  top: -0.15em
}
.footnote-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.35em;
  margin-left: 0.25em;
  box-sizing: border-box;
  font-size: 0.7em;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: #EAE6E2;
  background: #3A403C;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
.footnote-ref:hover { background: #454B47; }
.footnote-ref[data-fn-open] { background: #545B56; }
/* A badge with its own hover and open states, and it sits in a <sup> that is
   already offset with top - so no press-down. */
.footnote-ref:active { top: 0; }
/* --- caret ------------------------------------------------------- */
.fn-popover::after {
  content: "";
  position: absolute;
  left: var(--caret-x, 50%);
  margin-left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.fn-popover:not(.fn-popover--above)::after {
  bottom: 100%;
  border-bottom: 8px solid #EAE6E2;
}
.fn-popover--above::after {
  top: 100%;
  border-top: 8px solid #EAE6E2;
}
.fn-popover--sheet::after { display: none; }
.fn-popover {
  overflow: visible;
}
/* Narrow screens: a bottom sheet reads better than a tooltip. */
.fn-popover--sheet {
  left: 10px;
  right: 10px;
  bottom: 10px;
  top: auto;
  width: auto;
  max-width: none;
}
@media (prefers-reduced-motion: no-preference) {
  .fn-popover {
    transition: opacity 140ms ease, translate 140ms ease;
  }
  .fn-popover:popover-open { opacity: 1; translate: 0 0; }
  .fn-popover:not(:popover-open) { opacity: 0; translate: 0 -4px; }

  @starting-style {
    .fn-popover:popover-open { opacity: 0; translate: 0 -4px; }
  }
}
.topnav a {
  display: inline-block;
  position: relative;
}
.topnav a::after {
  content: attr(data-label);
  display: block;
  font-weight: 700;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.topnav a[aria-current] {
  font-weight: 700;
}