@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: a right-aligned arrow link closing a post teaser, sharing
   the row with tags on the main blog and 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. */
.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;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* 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 {
    margin-left: auto;
    white-space: nowrap;
    text-decoration: none;
}
.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) {
    .main-article footer > a,
    .yashchique-main-article footer > a {
        margin-left: 0;
    }
}
.footer-tags {
    margin-top: 0;
    font-size: 0.8em;
    display: flex;
    justify-content: flex-start;
    gap: 0.5em;
    flex-wrap: wrap;
}
.footer-tags a:is(:link, :visited) {
    background-color: rgba(73, 214, 200, 0.12);
    color: #49D6C8;
    border: 1px solid transparent;
    padding: 0.35em 0.7em;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-tags a:hover {
    background-color: rgba(73, 214, 200, 0.28);
    color: #6EF0E4;
    text-shadow: none;
}
.footer-tags a:focus-visible {
    background-color: rgba(73, 214, 200, 0.28);
    color: #6EF0E4;
    outline: 2px solid #49D6C8;
    outline-offset: 2px;
}
.footer-tags a:active {
    box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.6) inset;
    background-color: rgba(73, 214, 200, 0.35);
    color: #9CF7EE;
    text-shadow: none;
    top: 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);
}
/* 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; }
.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;
}