@font-face {
    font-family: "Realtime";
    src: url("./fonts/realtimetest-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("./fonts/Merriweather-Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


:root {
    --page-blue: #1a4678;
    --text-white: #f7f9fc;
    --text-soft: rgba(247, 249, 252, 0.72);
    --anchor-accent: #ffffff;
    --anchor-route: rgba(255, 255, 255, 0.66);
    --aside-accent: #ff9b6b;
    --aside-accent-2: #d8ff7a;
    --ink-blue: #102f54;
    --measure: 52.8rem;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page-blue);
    color: var(--text-white);
    font-family: "Realtime", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--page-blue);
}

.heading {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: "Merriweather", Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 3.5rem!important;
    line-height: 4rem!important;
}

.heading-reset {
    cursor: pointer;
}

.heading-reset:hover,
.heading-reset:focus-visible {
    color: #ffffff;
}

.page-shell {
    position: relative;
    width: min(100%, 100rem);
    min-height: 100svh;
    margin: 0 auto;
    padding:
            clamp(1.175rem, 3.5vw, 3.25rem)
            clamp(1.05rem, 5vw, 5rem)
            clamp(2.35rem, 7vw, 6.5rem)
            clamp(2.85rem, 8vw, 5rem);
}

.anchor-routes {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    min-height: 100%;
    overflow: visible;
    pointer-events: none;
}

.anchor-routes path {
    fill: none;
    stroke: var(--anchor-route);
    stroke-width: 1;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.anchor-routes marker path {
    fill: var(--anchor-route);
    stroke: none;
}

.text-flow {
    position: relative;
    z-index: 1;
    width: min(100%, var(--measure));
}

.site-footer {
    position: relative;
    z-index: 1;
    width: min(100%, var(--measure));
}

.site-footer p {
    margin: 0;
    color: var(--text-soft);
    font-family: "Merriweather", Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 1rem!important;
    line-height: 2rem!important;
}

.text-flow p {
    margin: 0 0 1.55em;
    color: var(--text-white);
    font-size: clamp(1rem, 0.96rem + 0.25vw, 1.22rem);
    line-height: 1.64;
}

.text-flow p:last-child {
    margin-bottom: 0;
}

.text-flow .content-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
    margin-bottom: 0;
}

.text-flow .content-tools {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.68em;
    margin-top: 1.64em;
}

.text-flow .text-control {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.text-flow .text-control:hover,
.text-flow .text-control:focus-visible {
    color: #ffffff;
}

.text-flow .icon-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.text-flow .icon-control:hover,
.text-flow .icon-control:focus-visible {
    color: #ffffff;
}

.text-flow .tag-filter {
    position: relative;
    display: inline-flex;
    align-items: baseline;
}

.text-flow .tag-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.34em;
    min-width: 4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

.text-flow .tag-filter-label {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

.text-flow .tag-filter-arrow {
    width: 0;
    height: 0;
    border-left: 0.24em solid transparent;
    border-right: 0.24em solid transparent;
    border-top: 0.32em solid currentColor;
}

.text-flow .tag-filter-toggle:hover,
.text-flow .tag-filter-toggle:focus-visible,
.text-flow .tag-filter-option:hover,
.text-flow .tag-filter-option:focus-visible,
.text-flow .tag-filter-option[aria-selected="true"] {
    color: #ffffff;
    -webkit-text-fill-color: currentColor;
}

.text-flow .tag-filter-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.28rem);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    min-width: 8rem;
    max-width: min(18rem, calc(100vw - 2rem));
    max-height: min(14rem, 48vh);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.28rem 0;
    background: var(--page-blue);
    scrollbar-width: thin;
}

.text-flow .tag-filter-menu[hidden] {
    display: none;
}

.text-flow .tag-filter-option {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.08rem 0.5rem 0.08rem 0.5rem;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    -webkit-text-fill-color: currentColor;
    font: inherit;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-decoration: none;
    cursor: pointer;
}

.text-flow .tag-filter-option::selection {
    background: rgba(247, 249, 252, 0.24);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.text-flow .tag-filter-menu::-webkit-scrollbar {
    width: 0.3rem;
}

.text-flow .tag-filter-menu::-webkit-scrollbar-thumb {
    background: rgba(247, 249, 252, 0.38);
}

.text-flow .entry {
    margin: 0 0 1.55em;
}

.text-flow .entry[hidden] {
    display: none;
}

.text-flow .entry > p {
    margin-bottom: 0;
}

.text-flow .social-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.34em;
    vertical-align: -0.14em;
}

.text-flow .social-icon-link,
.text-flow .social-icons .link-external {
    display: inline-flex;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    border: 0;
    color: inherit;
    text-decoration: none;
}

.text-flow .social-icon-link:hover,
.text-flow .social-icon-link:focus-visible {
    color: #ffffff;
}

.text-flow .icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.text-flow .icon-mail {
    -webkit-mask-image: url("./img/icons/mail.svg");
    mask-image: url("./img/icons/mail.svg");
}

.text-flow .icon-linkedin {
    -webkit-mask-image: url("./img/icons/linkedin.svg");
    mask-image: url("./img/icons/linkedin.svg");
}

.text-flow .icon-instagram {
    -webkit-mask-image: url("./img/icons/instagram.svg");
    mask-image: url("./img/icons/instagram.svg");
}

.text-flow .icon-twitter {
    -webkit-mask-image: url("./img/icons/twitter.svg");
    mask-image: url("./img/icons/twitter.svg");
}

.text-flow .icon-substack {
    -webkit-mask-image: url("./img/icons/substack.svg");
    mask-image: url("./img/icons/substack.svg");
}

.text-flow .icon-shuffle {
    -webkit-mask-image: url("./img/icons/shuffle.svg");
    mask-image: url("./img/icons/shuffle.svg");
}

.text-flow .icon-clock {
    -webkit-mask-image: url("./img/icons/clock.svg");
    mask-image: url("./img/icons/clock.svg");
}

.text-flow a {
    color: inherit;
    text-decoration: none;
}

.text-flow a[href^="https://blog.mattasher.com/"],
.text-flow a[href$=".pdf"] {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--anchor-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.text-flow a[href^="https://blog.mattasher.com/"]:hover,
.text-flow a[href^="https://blog.mattasher.com/"]:focus-visible,
.text-flow a[href$=".pdf"]:hover,
.text-flow a[href$=".pdf"]:focus-visible {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

.text-flow .tag-filter-menu .tag-filter-option {
    color: var(--text-white);
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
}

.text-flow .tag-filter-menu .tag-filter-option[aria-selected="false"] {
    color: var(--text-soft);
    -webkit-text-fill-color: currentColor;
}

.text-flow .link-anchor {
    color: var(--text-white);
    font-size: calc(1em - 1px);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--anchor-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition:
            color 160ms ease,
            text-decoration-color 160ms ease;
}

.text-flow .link-anchor:hover,
.text-flow .link-anchor:focus-visible {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

.text-flow .link-external {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

/*
.text-flow .link-external::after {
    content: "↗";
    font-size: 0.82em;
}
 */

.text-flow .link-external:hover,
.text-flow .link-external:focus-visible {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

.text-flow .link-aside {
    position: relative;
    display: inline-block;
    margin: 0 0.05em;
    padding: 0.02em 0.36em 0.1em;
    border: 1px solid rgba(255, 155, 107, 0.82);
    background: transparent;
    color: var(--text-white);
    line-height: 1.28;
    box-shadow: none;
}

.text-flow .link-aside::after {
    content: attr(data-route);
    display: inline-block;
    margin-left: 0.42em;
    color: var(--aside-accent-2);
    font-size: 0.62em;
    line-height: 1;
    vertical-align: super;
}

.text-flow .link-aside:hover,
.text-flow .link-aside:focus-visible {
    border-color: rgba(216, 255, 122, 0.9);
    background:
            linear-gradient(90deg, rgba(255, 155, 107, 0.32), rgba(216, 255, 122, 0.18)),
            rgba(255, 255, 255, 0.06);
}

.text-flow .link-aside[aria-expanded="true"] {
    border-color: rgba(216, 255, 122, 0.9);
}

.aside-note {
    position: relative;
    margin: 1.25rem 0 2.35rem clamp(1.25rem, 4vw, 3.4rem);
    padding: 1.25rem clamp(1.05rem, 3.5vw, 1.6rem) 1.3rem;
    border: 1px solid rgba(255, 155, 107, 0.72);
    border-left-width: 2px;
    background: rgba(16, 47, 84, 0.52);
    box-shadow: 0.45rem 0.45rem 0 rgba(9, 27, 48, 0.18);
}

.aside-note[hidden] {
    display: none;
}

.aside-note p {
    margin-bottom: 0.95em;
    color: var(--text-soft);
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.06rem);
    line-height: 1.52;
}

.aside-note p:last-child {
    margin-bottom: 0;
}

.aside-media {
    margin: 0;
}

.aside-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.aside-media audio {
    display: block;
    width: 100%;
}

.aside-media-light img {
    padding: 0.85rem;
    background: #ffffff;
}

.aside-media figcaption {
    margin-top: 0.65rem;
    color: var(--text-soft);
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.06rem);
    line-height: 1.4;
}

.aside-note-nested {
    margin-top: 0.9rem;
    margin-bottom: 0.25rem;
    border-color: rgba(216, 255, 122, 0.68);
    background: rgba(12, 38, 69, 0.62);
}

.aside-note-nested::before {
    border-color: rgba(216, 255, 122, 0.76);
}

@media (min-width: 760px) {
    .text-flow,
    .site-footer {
        margin-left: clamp(0rem, 6vw, 7rem);
    }
}

@media (max-width: 520px) {
    .aside-note {
        margin-left: 0.85rem;
        padding-right: 0.85rem;
    }
}