:root {
    --color-background: #fcf6f3;
    --color-surface: #fff;
    --color-text: #28262c;
    --color-text-dimmed: #7b7065;
    --color-link: #5a5249;
    --color-border: #d6d1cc;
    --color-border-strong: #b7ada4;
    --color-border-dimmed: #e4e0dd;
    --color-accent: #e9503f;
    --color-secondary: #fcc440;
    --color-tertiary: #2194e9;
    --color-pixels: #f6ece5;
    --color-hover: #fcf9f7;
    --color-error: #fdeeed;
    --font-size-1000: 3.25rem;
    --font-size-900: 2.75rem;
    --font-size-800: 2.25rem;
    --font-size-700: 2rem;
    --font-size-600: 1.625rem;
    --font-size-500: 1.5rem;
    --font-size-400: 1.25rem;
    --font-size-300: 1.0625rem;
    --font-size-200: 0.9375rem;
    --font-size-100: 0.875rem;
    --line-height: 1.5;
    --line-height-aside: 2.25;
    --line-height-code: 1.5;
    --line-height-heading: 1.3;
    --line-height-tooltip: 1.2;
    --line-height-small: 1;
    --font-weight: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --font-family: "AlteHaasGrotesk", -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-family-code: Monaco, "Panic Sans", Menlo, Consolas, "Lucida Console", monospace, monospace;
    --border-radius: 0.25rem;
    --border-radius-circle: 50%;
    --border-radius-icon: 0.5rem;
    --box-shadow: 0 1px 0.188rem 0 rgba(15, 60, 14, 0.06), 0 0.625rem 0.875rem rgba(15, 60, 14, 0.08);
    --box-shadow-dimmed: 1px 0.188rem 0.625rem rgba(0, 0, 0, 0.03), 1px 1px 1px rgba(0, 0, 0, 0.04)
}

@media(max-width: 1650px) {
    :root {
        --font-size-1000: 3.14vw;
        --font-size-900: 2.616vw;
        --font-size-800: 2.2vw;
        --font-size-700: 1.9vw;
        --font-size-600: 1.58vw;
        --font-size-500: 1.44vw;
        --font-size-400: 1.2vw;
        --font-size-300: 1vw
    }
}

@media(max-width: 1500px) {
    :root {
        --font-size-400: 1.27vw;
        --font-size-300: 0.9375rem;
        --font-size-200: 0.875rem;
        --font-size-100: 0.8125rem
    }
}

@media(max-width: 1440px) {
    :root {
        --font-size-1000: 3vw;
        --font-size-900: 2.5vw;
        --font-size-800: 2rem;
        --font-size-700: 1.75rem;
        --font-size-600: 1.4375rem;
        --font-size-500: 1.3125rem;
        --font-size-400: 1.125rem
    }
}

@media(max-width: 1360px) {
    :root {
        --font-size-600: 1.3125rem;
        --font-size-500: 1.25rem
    }
}

@media(max-width: 1300px) {
    :root {
        --font-size-1000: 2.5rem;
        --font-size-900: 2.375rem;
        --font-size-800: 1.875rem;
        --font-size-700: 1.625rem
    }
}

@media(max-width: 1250px) {
    :root {
        --font-size-1000: 2.25rem;
        --font-size-900: 2.25rem;
        --font-size-800: 1.875rem;
        --font-size-700: 1.625rem
    }
}

@media(max-width: 750px) {
    :root {
        --font-size-800: 1.5rem;
        --font-size-700: 1.25rem
    }
}

@media(max-width: 700px) {
    :root {
        --font-size-1000: 2rem
    }
}

@media(max-width: 600px) {
    :root {
        --font-size-1000: 1.5rem;
        --font-size-900: 1.5rem;
        --font-size-600: 1.125rem;
        --font-size-500: 1rem;
        --font-size-400: 1rem;
        --font-size-300: 0.8125rem;
        --font-size-200: 0.8125rem;
        --font-size-100: 0.75rem
    }
}

@media(max-width: 360px) {
    :root {
        --font-size-1000: 1.4375rem;
        --font-size-900: 1.4375rem;
        --font-size-600: 1.0625rem;
        --font-size-500: 0.9375rem;
        --font-size-400: 0.9375rem;
        --font-size-300: 0.75rem;
        --font-size-200: 0.75rem;
        --font-size-100: 0.6875rem
    }
}

@media(max-width: 350px) {
    :root {
        --font-size-1000: 1.375rem;
        --font-size-900: 1.375rem
    }
}

@media(max-width: 340px) {
    :root {
        --font-size-1000: 1.3125rem;
        --font-size-900: 1.3125rem
    }
}

@font-face {
    font-family: "AlteHaasGrotesk";
    src: url("../fonts/AlteHaasGroteskRegular.ttf") format("ttf");
    font-style: normal;
    font-display: swap;
    font-weight: 900
}

@font-face {
    font-family: "AlteHaasGrotesk";
    src: url("../fonts/AlteHaasGroteskBold.ttf") format("ttf");
    font-style: normal;
    font-display: swap;
    font-weight: 700
}

@font-face {
    font-family: "AlteHaasGrotesk";
    src: url("../fonts/AlteHaasGroteskRegular.ttf") format("ttf");
    font-style: italic;
    font-display: swap;
    font-weight: 400
}

@font-face {
    font-family: "AlteHaasGrotesk";
    src: url("../fonts/AlteHaasGroteskRegular.ttf") format("ttf");
    font-style: normal;
    font-display: swap;
    font-weight: 400
}

@font-face {
    font-family: "AlteHaasGrotesk-fallback";
    size-adjust:93%;ascent-override:117%;src: local("Arial")
}

@font-face {
    font-family: "AlteHaasGrotesk-fallback";
    size-adjust:93%;ascent-override:117%;font-weight: 700;
    src: local("Arial Bold")
}

* {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

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

@-ms-viewport {
    inline-size: device-width
}

@viewport {
    inline-size: device-width
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 100%;
    text-size-adjust: 100%
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    accent-color: var(--color-accent)
}

*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background),0 0 0 5px var(--color-accent);
    border-radius: var(--border-radius)
}

::selection {
    background: var(--color-accent);
    color: var(--color-surface);
    text-shadow: none
}

.visually-hidden {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    block-size: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    inset-block-start: 0;
    inline-size: 1px !important
}

@view-transition {
    navigation: auto
}

@keyframes fadeIn {
    0% {
        opacity: .001;
        transform: translateY(-0.5rem) translateZ(0)
    }

    100% {
        transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

@keyframes fadeIn2 {
    0% {
        opacity: .001;
        transform: translateY(-1rem) translateZ(0)
    }

    100% {
        transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

@keyframes fadeIn3 {
    0% {
        opacity: .001
    }

    100% {
        opacity: .5
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes thickness {
    0% {
        transform: scaleY(0) translateY(-0.8em);
        opacity: 0
    }

    100% {
        transform: scaleY(1) translateY(0);
        opacity: 1
    }
}

@keyframes shine {
    100% {
        inset-inline-start: 140%
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes float {
    0% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }

    70% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(0)
    }
}

html,body {
    block-size: 100%
}

@media(min-width: 768px) {
    .content {
        min-block-size:calc(100% - 330px)
    }
}

@media(min-width: 1100px) {
    .content {
        min-block-size:calc(100% - 350px)
    }
}

@media(min-width: 1200px) {
    .content {
        min-block-size:calc(100% - 360px)
    }
}

@media(min-width: 1400px) {
    .content {
        min-block-size:calc(100% - 370px)
    }
}

@media(min-width: 1440px) {
    .content {
        min-block-size:calc(100% - 350px)
    }
}

@media(min-width: 1500px) {
    .content {
        min-block-size:calc(100% - 380px)
    }
}

@media(min-width: 1600px) {
    .content {
        min-block-size:calc(100% - 410px)
    }
}

@media(max-width: 1300px) {
    .section-with-aside:not(.section-archive) {
        max-inline-size:1040px;
        margin-inline-start:auto;margin-inline-end:auto}
}

html {
    min-inline-size: 320px;
    background: var(--color-background) url("../img/dust.webp") repeat;
    background-size: 28.125rem 28.125rem;
    position: relative;
    scroll-behavior: smooth
}

@media(max-width: 1700px) {
    html {
        padding:0 8%
    }
}

@media(max-width: 1440px) {
    html {
        padding:0 7.5rem
    }
}

@media(max-width: 1300px) {
    html {
        padding:0 3.75rem
    }
}

@media(max-width: 1100px) {
    html {
        padding:0 8%
    }
}

@media(max-width: 360px) {
    html {
        padding:0 1.25rem
    }
}

html::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 60vh;
    z-index: -1;
    background: radial-gradient(ellipse 60% 30rem at 50% 0, var(--color-surface) 0%, transparent 100%);
    opacity: .5
}

@media(max-height: 700px) {
    html::before {
        block-size:30rem
    }
}

.main::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -10rem;
    background: radial-gradient(ellipse 24rem 20rem at 20rem 20rem, var(--color-surface), transparent);
    inline-size: 100%;
    block-size: 100vh;
    opacity: .7;
    z-index: -1
}

@media(max-width: 1024px) {
    .main::after {
        background:radial-gradient(ellipse 25% 25% at 50% 20rem, var(--color-surface), transparent)
    }
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--font-size-500);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--line-height);
    color: var(--color-text);
    max-inline-size: 1400px;
    position: relative;
    margin: 0 auto;
    font-feature-settings: "liga","clig","onum"
}

h1,h2,h3,h4,h5,h6 {
    text-rendering: optimizeLegibility;
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-1000);
    line-height: var(--line-height-heading);
    letter-spacing: -0.01em;
    margin: 0 0 2.2%
}

@media(min-width: 768px) {
    h1,h2 {
        mask-image:url("../img/mask.webp");
        mask-size: 10rem
    }
}

h1 a {
    color: var(--color-text);
    text-decoration: none;
    background-image: url("../img/underline.png");
    background-size: 110% .2em;
    background-repeat: no-repeat;
    background-position: -15px 1.16em;
    text-shadow: 0 .1em var(--color-background),.1em .08em var(--color-background),-0.15em .08em var(--color-background),.1em .06em var(--color-background),-0.15em .06em var(--color-background);
    transition: color .3s ease,text-decoration .3s ease
}

h1 a:hover,h1 a:focus-visible {
    background: none;
    text-decoration-thickness: .118em !important;
    text-decoration-skip-ink: all;
    text-underline-offset: .13em;
    text-decoration-color: currentColor;
    text-decoration: underline;
    transition: color .1s ease;
    color: var(--color-accent)
}

h1 a:focus-visible {
    text-shadow: none
}

@media(max-width: 600px) {
    h1 a {
        background-position:-15px 1.2em
    }

    h1 a:hover {
        text-underline-offset: .17em
    }
}

em {
    color: var(--color-text);
    font-style: normal;
    font-weight: var(--font-weight)
}

h1:focus-within {
    mask-image: none
}

h1 a:hover,h1 a:focus-visible {
    color: var(--color-accent)
}

h2 {
    max-inline-size: none;
    font-size: var(--font-size-1000);
    margin: 0 0 .48em
}

h3 {
    max-inline-size: none;
    font-size: var(--font-size-700);
    margin: 0 0 1rem
}

h4 {
    max-inline-size: none;
    font-size: var(--font-size-800);
    color: var(--color-link);
    font-weight: var(--font-weight);
    margin: 0 0 1rem
}

@media(max-width: 1100px) {
    h4 {
        font-size:var(--font-size-700);
        text-align: center
    }
}

p,.time {
    margin: 0 0 2rem;
    color: var(--color-link)
}

a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: .07em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor
}

a:hover,a:focus-visible {
    color: var(--color-accent)
}

a:active {
    transition: none;
    opacity: .8;
    transform: scale(0.99)
}

p.intro {
    font-size: var(--font-size-700);
    color: var(--color-text);
    text-wrap: pretty
}

@media(max-width: 1249px) {
    p.intro.intro-subpage {
        font-size:var(--font-size-700)
    }
}

@media(max-width: 749px) {
    p.intro.intro-subpage {
        font-size:var(--font-size-600)
    }
}

ul[class],ol[class] {
    list-style: none
}

header {
    -webkit-user-select: none;
    user-select: none;
    margin-inline-start:-3.813rem;inline-size: calc(100% + 7.625rem);
    min-block-size: 8vw;
    display: flex;
    align-items: center;
    margin-block-end:10.3%;justify-content: space-between
}

@media(min-width: 1728px) {
    header {
        min-block-size:8.75rem
    }
}

@media(max-width: 1440px) {
    header {
        min-block-size:7.25rem
    }
}

@media(max-width: 1300px) {
    header {
        margin-inline-start:0;
        margin-block-end:9%;inline-size: 100%
    }
}

@media(max-width: 1100px) {
    header {
        margin-inline-start:-1.875rem;
        inline-size: calc(100% + 3.75rem)
    }
}

@media(max-width: 800px) {
    header {
        margin-inline-start:-1.25rem;
        inline-size: calc(100% + 2.5rem)
    }
}

@media(max-width: 650px) {
    header {
        margin-inline-start:0;
        inline-size: 100%;
        flex-direction: column;
        margin-block-end:2.5rem}
}

.logo h2 {
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    margin: 0 0 0 .8rem;
    letter-spacing: .1em;
    color: var(--color-link);
    mask-image: none
}

@media(max-width: 980px) {
    .logo h2 {
        display:none
    }
}

.logo {
    display: block;
    max-inline-size: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    cursor: pointer
}

@media(max-width: 650px) {
    .logo {
        margin:3rem auto 0
    }
}

.logo svg {
    block-size: 3.125rem;
    inline-size: 3.125rem;
    display: block;
    border: 0
}

@media(max-width: 650px) {
    .logo svg {
        block-size:13vw;
        inline-size: 13vw
    }
}

@media(max-width: 500px) {
    .logo svg {
        block-size:4.375rem;
        inline-size: 4.375rem
    }
}

.logo-circle {
    fill: var(--color-accent)
}

@media(max-width: 650px) {
    nav {
        margin:1rem auto 0
    }
}

nav ul {
    list-style: none;
    display: flex;
    gap: .3rem
}

@media(max-width: 650px) {
    nav ul {
        gap:0
    }
}

nav li {
    display: inline-block;
    position: relative
}

nav a .label-hidden {
    visibility: hidden;
    font-weight: var(--font-weight-black);
    margin: 0;
    padding: 0
}

nav a .label {
    border-radius: var(--border-radius);
    transition: color .1s ease,background-color .1s ease;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    padding: .438rem 0;
    vertical-align: middle
}

nav a,nav button {
    text-decoration: none;
    cursor: pointer;
    color: var(--color-link);
    transition: color .1s ease,background-color .1s ease;
    text-transform: uppercase;
    background: rgba(0,0,0,0);
    display: block;
    border-radius: var(--border-radius);
    mask-image: none !important;
    margin-block-start:0;font-weight: var(--font-weight-bold);
    block-size: 100%;
    font-size: var(--font-size-200);
    padding: .438rem .75rem;
    letter-spacing: .1em
}

@media(max-width: 550px) {
    nav a {
        padding:.438rem .5rem;
        letter-spacing: .1em
    }
}

nav a:hover .label,nav a:hover,nav button:hover,nav a:focus-visible .label,nav a:focus-visible,nav button:focus-visible {
    color: var(--color-text) !important;
    background-color: var(--color-surface) !important
}

nav a:active,nav button:active {
    transform: scale(0.96)
}

nav .active a:hover,nav .active a .label,nav .active a:hover .label {
    color: var(--color-accent) !important;
    background-color: rgba(0,0,0,0) !important;
    text-decoration: none;
    font-weight: var(--font-weight-black)
}

nav .active a .label::after {
    content: "";
    display: block;
    inline-size: calc(100% - 1.5rem);
    block-size: .2em;
    will-change: transform,opacity;
    background-color: var(--color-accent);
    position: absolute;
    bottom: .21rem;
    left: .75rem;
    animation-name: thickness;
    animation-duration: .4s;
    animation-delay: .1s;
    transition-timing-function: ease-out;
    animation-fill-mode: both
}

@media(max-width: 550px) {
    nav .active a .label::after {
        inline-size:calc(100% - 1rem);
        left: .5rem
    }
}

nav svg {
    fill: var(--color-link);
    inline-size: .813rem;
    block-size: .813rem
}

nav a em {
    display: none;
    font-weight: var(--font-weight-bold);
    color: var(--color-link);
    font-style: normal
}

.nav-search svg {
    transform: translateY(0.5px);
    pointer-events: none
}

.nav-feed svg {
    inline-size: .75rem;
    block-size: .75rem
}

@media(max-width: 750px) {
    .nav-feed,.nav-search {
        display:none
    }
}

@media(max-width: 415px) {
    nav a[href="/services/"] {
        display:none
    }
}

nav a:hover svg {
    fill: var(--color-text)
}

footer {
    font-size: var(--font-size-300);
    display: flex;
    justify-content: space-between;
    border-block-start:1px solid var(--color-border);align-items: center;
    min-block-size: 6vw;
    position: relative
}

@media(min-width: 1728px) {
    footer {
        min-block-size:7.5rem
    }
}

@media(max-width: 1440px) {
    footer {
        min-block-size:7.5rem
    }
}

@media(max-width: 1050px) {
    footer {
        min-block-size:0;
        padding: 2rem 0
    }
}

footer::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 6vw;
    z-index: -1;
    background: radial-gradient(ellipse 60% 30rem at 50% 0, var(--color-pixels) 0%, transparent 100%);
    opacity: .2
}

@media(min-width: 1728px) {
    footer::before {
        block-size:7.5rem
    }
}

footer p {
    color: var(--color-link);
    margin: 0
}

footer a {
    text-decoration-thickness: 1px;
    text-underline-offset: .188em
}

.copyright {
    text-align: right
}

@media(max-width: 1050px) {
    footer {
        flex-direction:column
    }

    .copyright,.connect {
        text-align: center;
        inline-size: 100%
    }
}

@media(max-width: 1100px) {
    .shortcuts-container {
        display:none
    }
}

@media(max-width: 1200px) {
    footer p span {
        display:none
    }
}

.button,button,input[type=submit] {
    margin-block-start:3%;display: inline-block;
    background-color: var(--color-text);
    color: var(--color-surface);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--font-family);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border: 0;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-300);
    letter-spacing: .1em;
    padding: .8em 1.4em;
    transition: color .1s ease,background-color .1s ease,transform .1s ease;
    will-change: transform,color,background-color
}

@media(min-width: 768px) {
    .button,button,input[type=submit] {
        mask-image:url("../img/mask.webp");
        mask-size: 10rem
    }
}

@media(max-width: 650px) {
    .button,button,input[type=submit] {
        padding:.8em 1.2em
    }
}

.button-small {
    font-size: var(--font-size-200);
    padding: .625rem 1rem
}

.button-small svg,.button-has-svg svg {
    display: inline-block;
    margin-inline-start:.4rem;transform: translateY(-1px);
    inline-size: .625rem;
    block-size: .625rem
}

.button:hover,.button:focus-visible,button:hover,input[type=submit]:hover {
    background-color: var(--color-accent);
    color: var(--color-surface)
}

.button:hover,button:hover,input[type=submit]:hover {
    transform: scale(1.02)
}

.button:focus-visible {
    mask-image: none
}

.button:active,button:active,input[type=submit]:active {
    opacity: .8;
    transition: none !important
}

.readmore {
    text-decoration: none !important;
    color: var(--color-link);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .8em 1.4em;
    margin-inline-start:.5rem;border-radius: var(--border-radius);
    display: inline-block;
    transition: color .1s ease,background-color .1s ease,transform .1s ease;
    will-change: transform,color,background-color
}

@media(max-width: 650px) {
    .readmore {
        padding:.8em 1.2em
    }
}

.readmore:hover,.readmore:focus-visible {
    color: var(--color-text);
    background-color: var(--color-surface)
}

.readmore:hover {
    transform: scale(1.02)
}

.skip-to-content {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    background-color: var(--color-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-300);
    color: var(--color-surface);
    border-radius: var(--border-radius);
    text-decoration: none;
    padding: 1rem
}

.skip-to-content:not(:focus) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    border: 0 !important
}

.skip-to-content:focus {
    color: var(--color-surface);
    z-index: 999
}

.section {
    text-align: center;
    padding: 8.8% 0 10%;
    position: relative
}

@media(max-width: 700px) {
    .section {
        padding:3rem 0
    }
}

.section::after,.archive-year::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    background-color: rgba(0,0,0,0);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9Ii05LjM1MzU1IiB5MT0iMTEuNjQ2NCIgeDI9IjAuNjQ2NDQ2IiB5Mj0iMS42NDY0NSIgc3Ryb2tlPSIjYjdhZGE0Ii8+CjxsaW5lIHgxPSItMy4zNTM1NSIgeTE9IjExLjY0NjQiIHgyPSI2LjY0NjQ1IiB5Mj0iMS42NDY0NSIgc3Ryb2tlPSIjYjdhZGE0Ii8+CjxsaW5lIHgxPSIyLjY0NjQ1IiB5MT0iMTEuNjQ2NCIgeDI9IjEyLjY0NjQiIHkyPSIxLjY0NjQ1IiBzdHJva2U9IiNiN2FkYTQiLz4KPGxpbmUgeDE9IjguNjQ2NDUiIHkxPSIxMS42NDY0IiB4Mj0iMTcuNjQ2NCIgeTI9IjIuNjQ2NDUiIHN0cm9rZT0iI2I3YWRhNCIvPgo8bGluZSB4MT0iMTUuNjEzIiB5MT0iMTMuMzE2NiIgeDI9IjYuNjEzMDIiIHkyPSIyLjMxNjYyIiBzdHJva2U9IiNiN2FkYTQiLz4KPGxpbmUgeDE9IjguNjA5NTciIHkxPSIxMi4zMTIzIiB4Mj0iMC42MDk1NjYiIHkyPSIyLjMxMjM1IiBzdHJva2U9IiNiN2FkYTQiLz4KPGxpbmUgeDE9IjIuNTkwMzgiIHkxPSIxMi4yODY3IiB4Mj0iLTQuNDA5NjIiIHkyPSIyLjI4NjczIiBzdHJva2U9IiNiN2FkYTQiLz4KPC9zdmc+Cg==");
    background-repeat: repeat-x;
    opacity: .5;
    block-size: 1.188rem
}

.section:last-of-type::after {
    display: none
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

@media(min-width: 768px) {
    .section-full-height {
        min-block-size:100%
    }
}

@media(max-width: 700px) {
    .section-intro.section-full-height {
        padding-block-end:1rem
    }
}

.section-intro {
    padding-block-start:0;padding-block-end:13.6%;text-align: left
}

@media(max-width: 1100px) {
    .section-intro {
        padding-block-end:15%
    }
}

@media(max-width: 800px) {
    .section-intro {
        padding-block-end:20%
    }
}

@media(max-width: 600px) {
    .section-intro {
        padding-block-end:5rem
    }
}

.section-intro::before {
    display: none
}

.section-intro::after {
    animation-name: fadeIn3;
    animation-duration: .6s;
    animation-delay: .7s;
    transition-timing-function: ease-out;
    animation-fill-mode: both;
    transform: translateZ(0)
}

.section-intro-animate {
    animation-name: fadeIn2;
    animation-duration: .7s;
    animation-delay: .3s;
    transition-timing-function: ease-out;
    animation-fill-mode: both;
    transform: translateZ(0)
}

@media(prefers-reduced-motion: reduce) {
    .section-intro-animate,.section-intro::after {
        animation: none
    }
}

@media(max-width: 1100px) {
    .section-intro-animate,.section-intro::after {
        animation:none
    }
}

@media(max-width: 1100px) {
    .section-intro-animate,.section-intro-wrapper {
        display:flex;
        flex-direction: column;
        align-items: center
    }

    .section-intro-wrapper .button {
        margin-block-end:3rem}
}

.section-intro h1 {
    max-inline-size: 75%
}

@media(max-width: 1300px) {
    .section-intro h1 {
        max-inline-size:68%
    }
}

@media(max-width: 1300px)and (min-width: 1251px) {
    .section-home h1 {
        --font-size-1000: 2.375rem
    }
}

@media(max-width: 1200px) {
    .section-intro h1 {
        max-inline-size:75%;
        margin: 0 0 1.5rem
    }
}

@media(max-width: 1100px) {
    .section-intro h1 {
        text-align:center;
        max-inline-size: 80%
    }
}

@media(max-width: 1000px) {
    .section-intro h1 {
        max-inline-size:90%
    }
}

@media(max-width: 900px) {
    .section-intro h1 {
        max-inline-size:100%
    }
}

.section-intro p {
    color: var(--color-link);
    max-inline-size: 64%;
    display: block
}

.section-intro-wrapper p {
    max-inline-size: 60%;
    inline-size: 100%
}

.section-intro-wrapper h1 {
    margin-block-end:.61em}

@media(max-width: 1400px) {
    .section-intro p {
        max-inline-size:68%
    }
}

@media(max-width: 1300px) {
    .section-intro p {
        max-inline-size:60%
    }
}

@media(max-width: 1250px) {
    .section-intro p {
        max-inline-size:64%;
        font-size: var(--font-size-400)
    }
}

@media(max-width: 1100px) {
    .section-intro p {
        text-align:center;
        margin: 0 0 1.5rem;
        max-inline-size: 80%
    }

    .section-intro-wrapper p:not(.intro) {
        text-align: left
    }

    .section-intro-animate .button {
        margin-inline-start:1.15rem}
}

@media(max-width: 768px) {
    .section-intro p {
        max-inline-size:100%
    }
}

@media(max-width: 650px) {
    .section-intro .home-intro span {
        display:none
    }
}

.section-intro p a {
    transition: color .1s ease;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: .06em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor
}

.section-intro p a:hover,.section-intro p a:focus-visible {
    color: var(--color-accent)
}

.illustrations {
    animation-name: fadeIn;
    animation-duration: .6s;
    animation-delay: .55s;
    transition-timing-function: ease-out;
    animation-fill-mode: both;
    transform: translateZ(0);
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 100%
}

@media(prefers-reduced-motion: reduce) {
    .illustrations {
        animation: none
    }
}

.section-intro figure {
    inline-size: 22.5%;
    min-inline-size: 12.5rem;
    block-size: auto;
    position: absolute;
    inset-block-start: -0.7rem;
    inset-inline-end: -1rem;
    border: .625rem solid var(--color-surface);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-surface);
    transform: rotate(4deg) perspective(25rem) rotate3d(var(--r, 1, -1), 0, 0deg);
    box-shadow: var(--box-shadow);
    transition: transform .5s ease
}

.illustrations a {
    display: block;
    animation: float 10s ease-in-out infinite
}

@media(prefers-reduced-motion: reduce) {
    .illustrations a {
        animation: none
    }
}

.section-intro figure img {
    -webkit-user-select: none;
    user-select: none
}

@media(max-width: 1300px) {
    .section-intro figure {
        inline-size:21.8%;
        inset-block-start: -0.4rem;
        inset-inline-end: 4.5%
    }
}

@media(max-width: 1150px) {
    .section-intro figure {
        inset-inline-end:.5rem
    }
}

@media(max-width: 1100px) {
    .section-intro figure {
        display:none
    }
}

.section-intro figure::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    content: "";
    display: block;
    block-size: 100%;
    inset-inline-start: -100%;
    position: absolute;
    inset-block-start: 0;
    transform: skewX(-25deg);
    inline-size: 50%;
    z-index: 2
}

.section-intro figure:hover::before {
    animation: shine .8s
}

.section-intro figure:hover {
    transform: rotate(4deg) perspective(25rem) rotate3d(var(--r, 1, -1), 0, -6deg)
}

@media(prefers-reduced-motion: reduce) {
    .section-intro figure:hover::before {
        animation: none
    }

    .section-intro figure:hover {
        transform: rotate(4deg) perspective(25rem) rotate3d(var(--r, 1, -1), 0, 0deg)
    }
}

.section-intro figcaption {
    font-size: var(--font-size-100);
    font-weight: var(--font-weight);
    color: var(--color-link);
    white-space: nowrap;
    text-align: center;
    margin: .8rem 0 .4rem
}

.section-intro figcaption span {
    font-style: italic
}

@media(max-width: 1100px) {
    .section-intro figcaption {
        font-size:var(--font-size-100)
    }
}

.section-intro figure img {
    display: block;
    position: relative;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--border-radius)
}

.section-intro figcaption img,.icon-email {
    transform: translateY(-0.1em);
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    width: 1.25em;
    height: 1.25em
}

.icon-email {
    width: 1em;
    height: 1em
}

.section-intro .button,.section-intro .learnmore {
    margin-block-start:.4rem}

.section-work {
    text-align: left;
    display: flex;
    justify-content: space-between
}

@media(max-width: 1100px) {
    .section-work {
        flex-direction:column
    }
}

.section-work h2 {
    font-size: var(--font-size-900);
    margin: -0.5rem 0 0
}

@media(max-width: 1100px) {
    .section-work h2 {
        font-size:var(--font-size-1000);
        margin: 0 auto 2rem
    }
}

.section-work h3 {
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold)
}

.section-work p {
    font-size: var(--font-size-400)
}

.section-work .summary-intro {
    font-size: var(--font-size-400);
    color: var(--color-link);
    display: block
}

.works {
    inline-size: 60%;
    display: flex;
    flex-direction: column
}

@media(max-width: 1650px) {
    .works {
        inline-size:64%
    }
}

@media(max-width: 1300px) {
    .works {
        inline-size:62%
    }
}

@media(max-width: 1200px) {
    .works {
        inline-size:74%
    }
}

@media(max-width: 1100px) {
    .works {
        margin:0 auto;
        inline-size: 80%
    }
}

@media(max-width: 768px) {
    .works {
        inline-size:100%
    }
}

summary {
    text-decoration: none;
    list-style: none;
    overflow: hidden;
    cursor: pointer;
    margin-block-end:0;gap: 1.4rem;
    transform: scale(1.0001);
    padding: 0 0 0 4.713rem
}

summary::before {
    content: "";
    display: block;
    background-color: var(--color-text);
    inline-size: 3.313rem;
    block-size: 3.313rem;
    flex-shrink: 0;
    margin: .3rem 0 0 0;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    border-radius: var(--border-radius-icon)
}

summary.work-dod::before {
    background-image: url("../img/clientLogos/ausDoD.png");
	border: 3px solid #122D55;
}

summary.work-army::before {
    background-image: url("../img/clientLogos/army.png");
	border: 3px solid #122D55;
}

summary.work-hermes::before {
    background-image: url("../img/clientLogos/hermes.png");
	border: 3px solid #FF710E;
}

summary.work-roads::before {
    background-image: url("../img/clientLogos/austroads.jpeg");
	border: 3px solid #E9702C;
}

@media(max-width: 1100px) {
    summary::before {
        margin:.2rem 0 0 0;
        inline-size: 2.313rem;
        block-size: 2.313rem
    }
}

@media(max-width: 800px) {
    summary::before {
        margin:.1rem 0 0 0;
        inline-size: 2rem;
        block-size: 2rem
    }
}

@media(max-width: 1100px) {
    summary {
        gap:1rem;
        padding: 0 0 0 3.313rem
    }
}

@media(max-width: 800px) {
    summary {
        gap:.8rem;
        padding: 0 0 0 2.8rem
    }
}

summary p {
    margin: 0
}

summary:active {
    opacity: .8;
    transform: scale(0.99)
}

.details {
    margin: 0 0 0 4.713rem
}

@media(max-width: 1100px) {
    .details {
        margin:0 0 0 3.313rem
    }
}

@media(max-width: 800px) {
    .details {
        margin:0 0 0 2.8rem
    }
}

.details p {
    margin: 1rem 0 0
}

summary::-webkit-details-marker {
    display: none
}

summary::marker {
    content: ""
}

summary h3 {
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-decoration: underline;
    margin-block-end:.6rem;text-decoration-thickness: .07em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    vertical-align: middle;
    gap: .8rem;
    position: relative;
    transition: color .1s ease
}

summary h3 span {
    display: block
}

@media(max-width: 800px) {
    summary h3 {
        gap:.5rem
    }
}

summary:hover h3 {
    color: var(--color-accent)
}

summary * {
    pointer-events: none
}

.button-expand,.button-collapse {
    box-shadow: 0 1px .188rem 0 rgba(15,60,14,.06),0 .313rem .875rem rgba(15,60,14,.04);
    block-size: 1.5rem;
    inline-size: 1.5rem;
    transform: translateY(0.12em);
    margin: 0;
    color: var(--color-link);
    background-color: var(--color-surface);
    border: 1px dashed var(--color-link);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    mask-image: none;
    pointer-events: none
}

@media(max-width: 800px) {
    .button-expand,.button-collapse {
        block-size:1.25rem;
        inline-size: 1.25rem
    }
}

.button-collapse {
    display: none
}

details {
    -webkit-user-select: none;
    user-select: none;
    margin: 0 0 2rem;
    scroll-margin-block-start: 2rem
}

details .button-small {
    margin: 2rem 0 1.5rem
}

details[open] .button-collapse {
    display: inline-flex
}

details[open] .button-expand {
    display: none
}

details[open] {
    -webkit-user-select: inherit;
    user-select: inherit
}

.button-expand svg,.button-collapse svg {
    transition: transform .7s ease;
    block-size: .625rem;
    inline-size: .625rem
}

summary:hover .button-expand,summary:hover .button-collapse {
    background: var(--color-surface);
    border: 1px solid var(--color-text);
    color: var(--color-text)
}

.section-orgs {
    text-align: center
}

.section-orgs img {
    inline-size: 100%;
    margin: 0
}

.section-orgs p {
    margin: 0
}

.section-orgs h2 {
    margin-block-start:0}

.logos {
    margin: 3rem auto 2rem;
    max-inline-size: 70%
}

@media(max-width: 1440px) {
    .logos {
        max-inline-size:80%
    }
}

@media(max-width: 1200px) {
    .logos {
        max-inline-size:90%
    }
}

@media(max-width: 1000px) {
    .logos {
        margin:1.5rem auto;
        max-inline-size: 100%
    }
}

.logos img {
    block-size: 5.79vw;
    inline-size: auto;
    transition: transform .5s ease
}

@media(min-width: 1728px) {
    .logos img {
        block-size:6.25rem
    }
}

@media(max-width: 1440px) {
    .logos img {
        block-size:5.313rem
    }
}

@media(max-width: 1100px) {
    .logos img {
        block-size:4.063rem
    }
}

@media(max-width: 600px) {
    .logos img {
        block-size:3.125rem
    }
}

.logos img:hover {
    transform: scale(1.1) rotate(-2deg) perspective(5rem) rotate3d(var(--r, 1, -1), 0, -3deg);
    cursor: default
}

@media(prefers-reduced-motion: reduce) {
    .logos img:hover {
        transform: perspective(25rem) rotate3d(var(--r, 1, -1), 0, 0deg)
    }
}

.section-quotes .author {
    font-size: var(--font-size-300);
    font-style: normal;
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: var(--line-height-heading);
    transform: translateX(0.375rem);
    gap: 1rem
}

.section-quotes .author-img {
    inline-size: 2.813rem;
    block-size: 2.813rem;
    border-radius: var(--border-radius-circle);
    vertical-align: middle;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--color-border-strong)
}

.section-quotes .author-name {
    display: block;
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-bold);
    letter-spacing: .025em;
    text-transform: uppercase
}

.section-quotes .author-title {
    display: block;
    color: var(--color-link)
}

.section-quotes h2 {
    margin: 0
}

.section-quotes blockquote {
    font-style: italic;
    font-size: var(--font-size-700);
    text-wrap: balance;
    max-inline-size: 68%;
    margin: 2.3% auto 3.4%;
    text-align: center;
    text-wrap: pretty
}

@media(max-width: 1200px) {
    .section-quotes blockquote {
        max-inline-size:80%
    }
}

@media(max-width: 750px) {
    .section-quotes blockquote {
        max-inline-size:100%;
        margin: 1.2rem 0 1.5rem
    }
}

.section-quotes blockquote p {
    margin: 0
}

.section-quotes blockquote+p {
    font-weight: bold
}

.pagination {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 4rem 0 0
}

.button-load {
    box-shadow: 0 1px .188rem 0 rgba(15,60,14,.06),0 .313rem .875rem rgba(15,60,14,.04);
    block-size: 2.25rem;
    inline-size: 2.25rem;
    transform: translateY(-1.125rem);
    color: var(--color-link);
    background-color: var(--color-surface);
    border: 1px dashed var(--color-link);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    mask-image: none
}

@media(max-width: 1100px) {
    .button-load {
        transform:translateY(-0.7em);
        block-size: 1.75rem;
        inline-size: 1.75rem
    }
}

@media(max-width: 750px) {
    .button-load {
        transform:translateY(-0.5em)
    }
}

.button-load svg {
    block-size: 1rem;
    inline-size: 1rem
}

@media(max-width: 1100px) {
    .button-load svg {
        block-size:.75rem;
        inline-size: .75rem
    }
}

.animate .button-load svg {
    animation: rotate .5s linear infinite
}

.button-load:hover,.button-load:focus-visible {
    background: var(--color-surface);
    border: 1px solid var(--color-text);
    color: var(--color-text)
}

.button-load:focus-visible {
    box-shadow: 0 0 0 2px var(--color-background),0 0 0 5px var(--color-accent)
}

.slideshow {
    position: relative;
    border: 1px solid rgba(0,0,0,0);
    margin: 0 0 2rem;
    z-index: 1
}

.slide {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 100%;
    transition: height .3s ease,transform .3s ease,visibility .3s ease,opacity .3s ease;
    transform: scale(0.95) translateZ(0);
    visibility: hidden;
    opacity: 0
}

.slide-active {
    position: relative;
    transition: height .7s ease,transform .7s ease,visibility .7s ease,opacity .7s ease;
    visibility: visible;
    transform: scale(1) translateZ(0);
    opacity: 1
}

.section-quotes:hover {
    cursor: pointer
}

.section-quotes:hover .button-load {
    background: var(--color-surface);
    border: 1px solid var(--color-text);
    color: var(--color-text)
}

.section-quotes.animate {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.section-quotes.animate .button-load {
    background: var(--color-surface);
    border: 1px solid var(--color-surface);
    color: var(--color-text);
    opacity: .5
}

.posts {
    display: flex;
    flex-wrap: wrap;
    margin: 3% auto 1.5rem;
    max-inline-size: 80%;
    justify-content: center;
    gap: .75rem
}

@media(max-width: 1100px) {
    .posts {
        max-inline-size:100%
    }
}

@media(max-width: 800px) {
    .posts {
        max-inline-size:25rem
    }
}

.post {
    display: block;
    overflow: hidden;
    text-decoration: none;
    font-size: var(--font-size-300);
    border-radius: var(--border-radius);
    line-height: var(--line-height-tooltip);
    text-align: left;
    padding: .95em 1.6em;
    inline-size: calc(50% - .75rem)
}

.post:nth-child(odd) {
    text-align: right
}

@media(max-width: 1000px) {
    .post {
        padding:.5em .75em
    }
}

@media(max-width: 800px) {
    .post,.post:nth-child(odd) {
        inline-size:100%;
        text-align: center
    }

    .section-posts h2 {
        margin-block-end:1rem}
}

.post h3 {
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-decoration: underline;
    margin-block-end:.6rem;text-decoration-thickness: .07em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor;
    position: relative;
    transition: color .1s ease
}

.time {
    margin: 0 0 .5rem
}

.post:hover h3 {
    color: var(--color-accent)
}

.section-contact p {
    max-inline-size: 66%;
    margin: 0 auto
}

.section-contact h2 {
    position: relative
}

@media(max-width: 1250px) {
    .section-contact p {
        font-size:var(--font-size-400)
    }
}

@media(max-width: 1000px) {
    .section-contact p {
        margin-block-end:1rem
    }
}

@media(max-width: 750px) {
    .section-contact p {
        max-inline-size:100%
    }
}

.section-contact .button {
    margin-inline-start:.4rem}

.nav-search {
    position: relative;
    z-index: 9999
}

.search {
    inline-size: 35.625rem;
    position: absolute;
    inset-block-start: calc(100% + .813rem);
    transform: scale(0.96) translateY(-0.625rem);
    opacity: 0;
    visibility: hidden;
    inset-inline-end: -2.5rem;
    transition: all .2s ease
}

.active .search {
    transform: scale(1) translateY(0);
    opacity: 1 !important;
    visibility: visible !important
}

.search .input {
    background: var(--color-surface);
    font-size: var(--font-size-400);
    font-family: var(--font-family);
    border-radius: var(--border-radius);
    color: var(--color-text);
    box-shadow: 0 1px 0 rgba(183,173,164,.3),var(--box-shadow);
    border: 0;
    line-height: var(--line-height);
    display: block;
    position: relative;
    padding: .75rem 3.125rem 1rem;
    inline-size: 100%;
    z-index: 1
}

.search .input:focus {
    outline: 0
}

.search svg {
    block-size: 1rem;
    inset-inline-start: 1rem;
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1rem;
    fill: var(--color-link)
}

.search .close {
    cursor: pointer;
    inset-inline-start: auto;
    inline-size: 3.438rem;
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 999;
    margin: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    transition: opacity .2s ease,visibility .2s ease
}

.search .close svg {
    position: relative;
    transform: none;
    inset-inline-start: auto;
    inset-block-start: auto;
    pointer-events: none
}

.search .close:hover {
    transform: none
}

.search .close:active {
    opacity: .8
}

svg.search-icon {
    position: absolute;
    inline-size: 1rem;
    block-size: 1rem;
    inset-inline-start: 1.5rem;
    z-index: 2
}

.search-results-container {
    position: absolute;
    inset-block-start: 100%;
    opacity: 0;
    transform: scale(0.9) translateY(-0.625rem);
    transition: opacity .1s ease,visibility .1s ease,transform .2s ease;
    border: 1px solid var(--color-border-dimmed);
    box-shadow: var(--box-shadow);
    background: var(--color-surface);
    border-end-start-radius: calc(var(--border-radius)*2);
    border-end-end-radius: calc(var(--border-radius)*2);
    min-block-size: 31.6rem;
    inline-size: calc(100% + 1px);
    block-size: 100%;
    inset-inline-start: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: 999
}

.search-results-container.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0)
}

.search-results {
    display: block;
    font-size: 1.0625rem;
    inline-size: 100%;
    block-size: calc(100% - 2.6rem);
    overflow-y: auto;
    position: relative
}

.search-results::-webkit-scrollbar {
    scrollbar-width: none;
    inline-size: 0 !important
}

.search-results h2 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    mask-image: none
}

.search-results p {
    color: var(--color-link);
    font-size: .9375rem;
    text-wrap: initial;
    margin: 0;
    hyphens: auto
}

.search-results li {
    border-block-end:1px solid var(--color-border-dimmed);inline-size: 100%;
    padding: 1rem 3rem 1.2rem 1.5rem;
    cursor: pointer;
    display: block
}

.search-results li * {
    pointer-events: none
}

.search-results li:active {
    transition: none;
    opacity: .8;
    transform: scale(0.99)
}

.search-results li:last-child {
    border-block-end:0}

.search-results li kbd {
    position: absolute;
    min-inline-size: 1.8rem;
    inset-block-start: calc(50% - .7rem);
    pointer-events: none;
    inset-inline-end: 1rem;
    opacity: 0;
    visibility: hidden
}

.search-results li.no-results,.search-results li.no-results:hover,.search-results li.no-results:active {
    background: var(--color-surface);
    cursor: default;
    padding: 1rem 1.5rem;
    border: 0;
    opacity: 1;
    transform: none
}

.search-results li.click {
    pointer-events: none;
    transition: none !important;
    opacity: .6
}

.search-results .active,.search-results .active:hover {
    background: var(--color-pixels);
    color: var(--color-text);
    text-decoration: none
}

.search-results .active kbd,.search-results .active:hover kbd {
    opacity: 1;
    visibility: visible
}

.search-results .active h2,.search-results .active p {
    color: var(--color-text)
}

.search-results li:hover {
    background: var(--color-hover);
    color: var(--color-text);
    text-decoration: none
}

.search-results li:hover h2,.search-results li:hover p {
    color: var(--color-text)
}

.search-help {
    color: var(--color-link);
    font-size: .875rem;
    inline-size: 100%;
    background: var(--color-background);
    padding: .5rem 1.2rem;
    border: 0;
    border: 0;
    border-block-start:1px solid var(--color-border-dimmed);height: 2.6rem;
    overflow: hidden
}

.search-help kbd {
    min-inline-size: 1.8rem
}

.search-help i {
    color: var(--color-border-strong);
    font-style: normal;
    margin: 0 .625rem
}

.nav-search.active>button {
    position: relative;
    background: rgba(0,0,0,0) !important
}

.nav-search.active>button::before {
    content: "";
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: -1;
    border-radius: var(--border-radius);
    background: var(--color-pixels);
    box-shadow: inset 0 1px .188rem 0 rgba(15,60,14,.14)
}

.search-results-container ul li.search-loading {
    position: absolute;
    pointer-events: none;
    display: block;
    inset-block-start: calc(50% - 2rem);
    inset-inline-start: calc(50% - 1rem);
    inline-size: 2rem;
    block-size: 2rem;
    border: .25rem solid var(--color-border-dimmed);
    border-radius: var(--border-radius-circle);
    padding: 0;
    border-block-start-color:var(--color-accent);animation: spin .7s linear infinite
}

pre,code {
    color: var(--color-text);
    font-family: var(--font-family-code);
    font-feature-settings: normal
}

p code,li code {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-dimmed);
    padding: .188rem .5rem;
    font-size: 75%
}

pre code {
    color: var(--color-surface)
}

pre {
    background: var(--color-text);
    color: var(--color-surface);
    overflow-x: auto;
    padding: 2em 4em 2em 2em;
    font-size: .75em;
    white-space: pre;
    border-radius: var(--border-radius);
    line-height: var(--line-height-code);
    inline-size: 100%;
    margin: 1em auto 2em
}

pre::-webkit-scrollbar {
    background-color: rgba(0,0,0,0);
    block-size: 1px;
    inline-size: 1px
}

pre::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0)
}

@media(max-width: 1100px) {
    pre {
        margin:0 auto 2em
    }
}

.code {
    position: relative;
    inline-size: 100%;
    z-index: 1
}

.article .button.button-clipboard {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    background-color: #46403d;
    color: #d5ccc4;
    padding: 0;
    mask-image: none;
    overflow: visible;
    border: 1px solid hsla(0,0%,100%,.15);
    box-shadow: 1px .188rem .625rem rgba(0,0,0,.23),1px 1px 1px rgba(0,0,0,.24);
    transition: background-color .1s ease,transform .1s ease;
    z-index: 2
}

.article .button.button-clipboard span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem
}

@media(max-width: 768px) {
    .article .button.button-clipboard span {
        padding:.5rem
    }
}

.article .button.button-clipboard span::after {
    transition: opacity .2s 0s ease,visibility .2s 0s ease;
    background-color: #46403d;
    color: #d5ccc4
}

@media(max-width: 768px) {
    .article .button.button-clipboard span::after {
        display:none
    }
}

.article .button.button-clipboard span:hover::after {
    transition: opacity .2s .3s ease,visibility .2s .3s ease;
    visibility: visible;
    opacity: 1
}

.article .button.button-clipboard:hover {
    background-color: #534c49;
    transform: none
}

.article .button.button-clipboard:focus-visible {
    background-color: #534c49;
    color: var(--color-surface);
    box-shadow: 0 0 0 2px #272320,0 0 0 5px var(--color-accent)
}

.article .button.button-clipboard:focus-visible span::after {
    transition: opacity .2s .3s ease,visibility .2s .3s ease;
    visibility: visible;
    opacity: 1
}

.article .button.button-clipboard svg {
    margin: 0;
    inline-size: .8rem;
    block-size: .8rem
}

@media(max-width: 768px) {
    .article .button.button-clipboard svg {
        inline-size:.7rem;
        block-size: .7rem
    }
}

.article .button.button-clipboard .copied {
    display: none
}

.article .button.button-clipboard.active {
    cursor: default
}

.article .button.button-clipboard.active .clipboard {
    display: none
}

.article .button.button-clipboard.active span::after {
    transition: opacity .1s ease,visibility .1s ease;
    content: "Copied!"
}

.article .button.button-clipboard.active .copied {
    display: flex
}

code[class*=language-],pre[class*=language-] {
    color: #b6aca4;
    background: #272320;
    font-family: var(--font-family-code);
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

pre>code[class*=language-] {
    font-size: 1em
}

pre[class*=language-] {
    overflow: auto
}

:not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: .3em
}

.token.comment,.token.prolog,.token.doctype,.token.cdata {
    color: #6a5f58
}

.token.punctuation {
    color: #9e928a
}

.token.namespace {
    opacity: .7
}

.token.tag,.token.operator,.token.number {
    color: #bfa05a
}

.token.property,.token.function {
    color: #a09288
}

.token.tag-id,.token.selector,.token.atrule-id {
    color: #fff3eb
}

code.language-javascript,.token.attr-name {
    color: #cdbcb2
}

code.language-css,code.language-scss,.token.boolean,.token.string,.token.entity,.token.url,.language-css .token.string,.language-scss .token.string,.style .token.string,.token.attr-value,.token.keyword,.token.control,.token.directive,.token.unit,.token.statement,.token.regex,.token.atrule {
    color: var(--color-secondary)
}

.token.placeholder,.token.variable {
    color: var(--color-secondary)
}

.token.deleted {
    text-decoration: line-through
}

.token.inserted {
    border-bottom: 1px dotted #fff3eb;
    text-decoration: none
}

.token.italic {
    font-style: italic
}

.token.important,.token.bold {
    font-weight: bold
}

.token.important {
    color: #a48774
}

.token.entity {
    cursor: help
}

pre>code.highlight {
    outline: .4em solid #816d5f;
    outline-offset: .4em
}

.line-numbers.line-numbers .line-numbers-rows {
    border-right-color: #35302b
}

.line-numbers .line-numbers-rows>span:before {
    color: #46403d
}

.line-highlight.line-highlight {
    background: rgba(191,160,90,.2);
    background: -webkit-linear-gradient(left, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0));
    background: linear-gradient(to right, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0))
}

table {
    color: var(--color-link);
    border: 0;
    margin: 1.5em 0 1.7em;
    border-radius: var(--border-radius);
    width: 100%
}

table td,table th {
    padding: 0 1em 0 0
}

table thead {
    color: var(--color-text);
    text-transform: uppercase;
    font-style: normal;
    letter-spacing: .12em;
    text-align: left;
    font-size: 75%
}

table thead th {
    border: 0;
    border-bottom-color: var(--color-border);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: .25em .8em .4em
}

table tr:first-child td {
    padding-top: .5em
}

table td {
    padding: 0 .5em .25em;
    border-bottom: 1px solid var(--color-border-dimmed)
}

table tr:last-of-type td {
    border-bottom: 0
}

.section-with-aside {
    gap: 14.8%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

@media(max-width: 1100px) {
    .section-with-aside {
        flex-direction:column;
        align-items: center;
        gap: 0
    }
}

.section-with-aside .section-intro-wrapper {
    inline-size: 100%;
    max-inline-size: 56%
}

.section-with-aside .section-intro-wrapper .intro {
    inline-size: 108%;
    max-inline-size: 108%
}

@media(max-width: 1400px) {
    .section-with-aside .section-intro-wrapper {
        max-inline-size:60%
    }

    .section-with-aside .section-intro-wrapper .intro {
        inline-size: 100%;
        max-inline-size: 100%
    }
}

@media(max-width: 1300px) {
    .section-with-aside .section-intro-wrapper {
        max-inline-size:64%
    }
}

@media(max-width: 1100px) {
    .section-with-aside .section-intro-wrapper {
        max-inline-size:80%
    }
}

@media(max-width: 768px) {
    .section-with-aside .section-intro-wrapper {
        max-inline-size:100%
    }
}

.section-with-aside .section-intro-wrapper p {
    max-inline-size: 100%
}

.section-with-aside .section-intro-wrapper h1 {
    max-inline-size: 90%
}

aside {
    text-align: left;
    flex-grow: 1;
    inline-size: 30%;
    margin-block-start:4.7em;justify-self: flex-end
}

@media(max-width: 1300px) {
    aside {
        margin-block-start:4.25em
    }
}

@media(min-width: 1100px) {
    aside {
        position:sticky;
        inset-block-start: 4rem;
        transform: translateZ(0);
        z-index: 2
    }
}

@media(max-width: 1100px) {
    aside {
        inline-size:80%;
        justify-self: flex-start;
        margin-block-start:2em}
}

@media(max-width: 768px) {
    aside {
        margin-block-start:0;
        inline-size: 100%
    }
}

@media(max-width: 700px) {
    aside {
        margin-block-end:2rem
    }
}

aside ul {
    list-style: none
}

aside h2 {
    text-decoration: none;
    color: var(--color-text);
    transition: color .1s ease,background-color .1s ease;
    text-transform: uppercase;
    display: block;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-200);
    mask-image: none;
    letter-spacing: .1em;
    margin-block-end:1.25em}

aside p {
    color: var(--color-link);
    font-size: var(--font-size-300);
    text-align: left !important;
    margin: 0 0 3em !important;
    font-weight: var(--font-weight)
}

aside ul+h2 {
    margin-block-start:3em !important}

aside a,aside span,aside p a.email {
    color: var(--color-link);
    font-size: var(--font-size-300);
    font-weight: var(--font-weight);
    text-decoration: underline;
    text-decoration-thickness: .065em;
    text-decoration-skip-ink: all;
    text-underline-offset: .2em;
    text-decoration-color: currentColor;
    transition: color .1s ease
}

.contacts .location,.contacts .pronouns {
    text-decoration: none
}

aside a:hover {
    color: var(--color-accent)
}

.contacts .location:hover,.contacts .pronouns:hover {
    color: var(--color-link)
}

aside s {
    text-decoration: underline;
    text-underline-offset: -0.3em;
    text-decoration-skip-ink: none;
    text-decoration-color: currentColor
}

.socials a,.socials span,.contacts a {
    padding-inline-start:1.5em;position: relative;
    line-height: var(--line-height-aside)
}

.socials a::before,.socials span::before,.contacts a::before {
    background-image: url("../img/icons/linkedin.svg");
    background-repeat: no-repeat;
    background-size: cover;
    inset-inline-start: 0;
    inset-block-start: .25em;
    content: "";
    block-size: 1em;
    position: absolute;
    inline-size: 1em
}

.contacts a::before {
    font-size: 1.1em;
    inset-block-start: .15em;
    inset-inline-start: -0.1em;
    content: "";
    background-image: url("../img/icons/email.webp")
}

.contacts .location::before {
    content: "";
    background-image: url("../img/icons/location.webp")
}

.contacts .pronouns::before {
    content: "";
    background-image: url("../img/icons/pronouns.webp")
}

.contacts .photo::before {
    content: "";
    background-image: url("../img/icons/pronouns.webp")
}

.contacts .bio::before {
    content: "";
    background-image: url("../img/icons/bio.webp")
}

.contacts .resume::before {
    content: "";
    background-image: url("../img/icons/resume.webp")
}

.socials a.bluesky::before {
    background-image: url("../img/icons/bluesky.svg")
}

.socials a.mastodon::before {
    background-image: url("../img/icons/mastodon.svg")
}

.socials a.github::before {
    background-image: url("../img/icons/github.svg")
}

.socials a.feed::before {
    background-image: url("../img/icons/feed.svg")
}

.socials span.instagram::before {
    background-image: url("../img/icons/instagram.svg")
}

.socials span.twitter::before {
    background-image: url("../img/icons/twitter.svg")
}

.socials a:hover::before,.socials a:focus-visible::before {
    filter: invert(25%) sepia(87%) saturate(5090%) hue-rotate(350deg) brightness(120%) contrast(80%)
}

.stamp {
    --size: 10rem;
    inline-size: var(--size);
    block-size: var(--size);
    aspect-ratio: 1;
    border-radius: var(--border-radius-circle);
    border: 1px dashed var(--color-border-strong);
    display: grid;
    margin: -1.25rem 0 3em -5%;
    place-content: center;
    transform: rotate(-8deg);
    position: relative;
    background: hsla(0,0%,100%,.3) radial-gradient(ellipse 60% 10rem at 50% 0, var(--color-pixels) 0%, transparent 100%);
    text-align: center
}

.stamp:active {
    transform: rotate(-8deg)
}

@media(max-width: 1300px) {
    .stamp {
        inset-inline-end:0
    }
}

@media(max-width: 1100px) {
    .stamp {
        display:none
    }
}

.stamp::before {
    content: "";
    position: fixed;
    inset-block-start: calc(50% - var(--size)/3 - 1px);
    inset-inline-start: calc(50% - var(--size)/3 - 1px);
    border-radius: var(--border-radius-circle);
    inline-size: calc(var(--size)/1.5);
    block-size: calc(var(--size)/1.5);
    border: 1px solid var(--color-border-strong);
    background: rgba(0,0,0,0);
    opacity: .7
}

.stamp em {
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-small);
    position: absolute;
    font-size: 1.5rem;
    inline-size: 100%;
    transition: all .3s ease;
    color: var(--color-link);
    inset-block-start: 3.3rem
}

.ring {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: calc(100% + .125rem);
    block-size: calc(100% + .125rem);
    transform-origin: calc(var(--size)/2 - 1px) calc(var(--size)/2 - 1px);
    animation: rotate 30s linear infinite;
    animation-direction: reverse
}

@media(prefers-reduced-motion: reduce) {
    .ring {
        animation: none
    }
}

.ring span {
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    position: fixed;
    transform: scale(0.96) translate(-0.7ch, -0.4rem) rotate(calc(var(--i) * 6.7deg)) translateY(calc(var(--size) / -2 + 0.7rem));
    inset-block-start: calc(var(--size)/2);
    inset-inline-start: calc(var(--size)/2);
    color: var(--color-link);
    line-height: var(--line-height-small);
    text-decoration: none;
    opacity: .8;
    z-index: 9;
    font-size: .6rem;
    position: absolute
}

.ring .i {
    transform: scale(0.96) translate(-0.4ch, -0.35rem) rotate(calc(var(--i) * 6.7deg)) translateY(calc(var(--size) / -2 + 0.7rem))
}

.tooltip {
    position: relative
}

.tooltip::after {
    transform: translate3d(0, 0, 0);
    outline: none;
    backface-visibility: hidden;
    will-change: transform;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
    position: absolute;
    z-index: 10;
    transform-origin: top
}

.tooltip::after {
    border-radius: var(--border-radius);
    content: attr(data-tooltip);
    text-transform: none;
    padding: .3rem .6rem .4rem;
    white-space: nowrap;
    box-sizing: content-box;
    -webkit-font-smoothing: subpixel-antialiased;
    background-color: var(--color-text);
    color: var(--color-surface);
    font-family: var(--font-family);
    font-size: .813rem;
    font-weight: var(--font-weight);
    letter-spacing: 0
}

li.nav-search:not(.active) .tooltip:hover::after,li:not(.active)+.nav-feed .tooltip:hover::after {
    transition: all .3s ease-in-out .1s;
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.tooltip:active::after {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important
}

.tooltip::after {
    margin-top: 8px;
    transform: translate3d(-50%, 0, 0);
    top: 100%;
    left: 50%
}

form {
    margin: 3rem 0 0;
    max-inline-size: 95%;
    inline-size: 100%;
    transition: opacity .2s ease
}

@media(max-width: 1100px) {
    form {
        margin-block-start:2rem;
        max-inline-size: 100%
    }
}

@media(max-width: 600px) {
    form {
        margin-block-start:1rem
    }
}

form input,form textarea {
    background: var(--color-surface);
    font-size: var(--font-size-400);
    font-family: var(--font-family);
    border-radius: var(--border-radius);
    color: var(--color-text);
    box-shadow: 0 1px 0 rgba(183,173,164,.3),var(--box-shadow-dimmed),var(--box-shadow-dimmed);
    border: 0;
    line-height: var(--line-height);
    display: block;
    position: relative;
    padding: .813rem 1rem .938rem;
    margin-block-end:1.5rem;inline-size: 100%;
    z-index: 1
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: var(--color-link);
    opacity: .4 !important
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: var(--color-link) !important;
    opacity: .4 !important
}

form input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder {
    opacity: .2 !important
}

form input:focus::-moz-placeholder,form textarea:focus::-moz-placeholder {
    opacity: .2 !important
}

form input:focus,form textarea:focus {
    box-shadow: var(--box-shadow-dimmed),var(--box-shadow-dimmed),0 0 0 .188rem var(--color-accent);
    outline: 0
}

form input:focus:user-invalid,form textarea:focus:user-invalid {
    background: var(--color-error)
}

form input:focus:user-invalid::-webkit-input-placeholder,textarea:focus:user-invalid::-webkit-input-placeholder {
    color: var(--color-accent) !important;
    opacity: .4 !important
}

form input:focus:user-invalid::-moz-placeholder,form textarea:focus:user-invalid::-moz-placeholder {
    color: var(--color-accent) !important;
    opacity: .4 !important
}

form textarea {
    min-block-size: 15.625rem;
    resize: block
}

form ul {
    list-style: none
}

form .button {
    padding: 1rem 2.5rem 1.063rem
}

label {
    text-decoration: none;
    color: var(--color-link);
    transition: color .1s ease,background-color .1s ease;
    text-transform: uppercase;
    display: block;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-200);
    letter-spacing: .1em;
    margin-block-end:.75rem;cursor: pointer
}

.has-icon {
    position: relative
}

.has-icon input {
    padding-inline-start:2.75rem}

.has-icon svg {
    position: absolute;
    color: var(--color-link);
    pointer-events: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    inset-block-end: 1.25rem;
    inset-inline-start: 1rem;
    z-index: 2
}

@media(max-width: 800px) {
    .has-icon svg {
        inset-block-end:1.1rem
    }
}

input[type=reset] {
    text-decoration: none;
    color: var(--color-link);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .8em 1.4em;
    margin-inline-start:.5rem;display: inline;
    inline-size: auto;
    background: rgba(0,0,0,0);
    box-shadow: none;
    transition: color .1s ease,background-color .1s ease;
    border-radius: var(--border-radius)
}

input[type=reset]:hover,input[type=reset]:focus-visible {
    color: var(--color-text);
    background-color: var(--color-surface)
}

input[type=reset]:active {
    opacity: .8
}

.validate {
    visibility: hidden;
    position: absolute;
    opacity: 0
}

.errors {
    scroll-margin-block-start: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-accent);
    background: rgba(233,80,63,.1);
    margin-block-end:2em;font-size: var(--font-size-300);
    padding: 1em 1.5em;
    color: var(--color-accent);
    display: none
}

.errors.active {
    display: block
}

form .button {
    position: relative
}

.loading {
    opacity: .7;
    pointer-events: none
}

.loading .button {
    color: rgba(0,0,0,0);
    background: var(--color-accent)
}

.loading .button span {
    content: "";
    position: absolute;
    display: block;
    inset-block-start: calc(50% - .813rem);
    inset-inline-start: calc(50% - .813rem);
    inline-size: 1.625rem;
    block-size: 1.625rem;
    border: .25rem solid hsla(0,0%,100%,.3);
    border-radius: var(--border-radius-circle);
    border-block-start-color:#fff;animation: spin .7s linear infinite
}

.article .message {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    text-decoration: none;
    border-radius: var(--border-radius-icon);
    background-color: var(--color-surface);
    box-shadow: var(--box-shadow);
    margin: 3rem 0 0;
    transform: perspective(25rem) rotate3d(var(--r, 1, -1), 0, 0deg);
    transition: transform .5s ease;
    overflow: hidden
}

@media(max-width: 1100px) {
    .article .message {
        margin:2rem 0
    }
}

@media(max-width: 768px) {
    .article .message {
        margin:0 0 3.8rem;
        padding: 0
    }
}

.article .message:hover {
    transform: perspective(25rem) rotate3d(var(--r, 1, -1), 0, -1deg)
}

.article .message:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background),0 0 0 5px var(--color-accent)
}

.article .message:focus-visible h2 {
    color: var(--color-accent)
}

@media(prefers-reduced-motion: reduce) {
    .article .message:hover {
        transform: none
    }
}

.article .message .message-img {
    box-shadow: inset 0 0 16px rgba(0,0,0,.1);
    min-inline-size: 9.5rem;
    position: relative;
    overflow: hidden
}

@media(max-width: 420px) {
    .article .message .message-img {
        min-inline-size:6.5rem
    }
}

.article .message .message-img img {
    position: absolute;
    max-inline-size: 115%;
    min-inline-size: 115%;
    object-fit: cover;
    z-index: -1;
    top: 0;
    left: 0;
    inline-size: 115%;
    block-size: auto;
    border-radius: 0;
    box-shadow: none;
    margin: 0
}

@media(max-width: 420px) {
    .article .message .message-img img {
        max-inline-size:130%;
        min-inline-size: 130%;
        inline-size: 130%
    }
}

.article .message .message-txt {
    padding: 2rem
}

@media(max-width: 1470px) {
    .article .message .message-txt {
        padding:2rem 1.5rem
    }
}

@media(max-width: 768px) {
    .article .message .message-txt {
        padding:1rem 1.5rem
    }
}

.article .message h2 {
    font-size: var(--font-size-text);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    margin-block-end:.6rem;text-decoration-thickness: .07em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor;
    position: relative;
    transition: color .1s ease;
    margin: 0 0 .5em
}

@media(max-width: 768px) {
    .article .message h2 {
        margin:0 0 .8em
    }
}

.article .message p {
    font-size: var(--font-size-300);
    margin: 0 0 .5rem
}

@media(max-width: 500px) {
    .article .message p span {
        display:none
    }
}

.signature {
    -webkit-user-select: none;
    user-select: none;
    margin-block-start:.5rem;align-self: flex-start;
    inline-size: 8.125rem;
    block-size: auto;
    pointer-events: none
}

@media(max-width: 1400px) {
    .signature {
        inline-size:6.875rem
    }
}

@media(max-width: 1200px) {
    .signature {
        margin-block-start:0;
        inline-size: 6.25rem
    }
}

@media(max-width: 800px) {
    .signature {
        margin-block-end:2rem
    }
}

.section-archive {
    padding-block-end:1.5rem;min-block-size: 0
}

.archive {
    margin-block-end:5rem}

.archive h4 {
    position: sticky;
    inset-block-start: 0;
    background: var(--color-background) url("../img/dust.webp") repeat;
    box-shadow: 0 10px 20px var(--color-background);
    transform: translateZ(0);
    inline-size: calc(100% + 4.5rem);
    margin-block-start:-0.5rem;margin-block-end:-0.5rem;margin-inline-start:-1rem;padding: .5rem 1rem;
    z-index: 2
}

@media(max-width: 1100px) {
    .archive h4 {
        position:relative
    }
}

.archive li:first-of-type h4 {
    position: relative;
    background: rgba(0,0,0,0);
    box-shadow: none
}

@media(max-width: 1100px) {
    .archive h4 {
        margin-inline-start:0;
        inline-size: 100%
    }
}

.archive ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(12em, 1fr));
    grid-gap: 0 5%;
    margin-block-start:2rem;position: relative;
    z-index: 1
}

@media(max-width: 1200px) {
    .archive ol {
        grid-template-columns:repeat(3, minmax(12em, 1fr))
    }
}

@media(max-width: 950px) {
    .archive ol {
        grid-template-columns:repeat(2, minmax(12em, 1fr))
    }
}

@media(max-width: 600px) {
    .archive ol {
        grid-template-columns:repeat(1, minmax(12em, 1fr))
    }
}

.archive-year {
    padding-block-end:7.8%;margin-block-end:7%;position: relative
}

.archive li:last-of-type .archive-year {
    padding-block-end:0}

@media(max-width: 700px) {
    .archive-year {
        padding-block-end:3rem;
        margin-block-end:3rem}
}

.archive li:last-of-type .archive-year::after {
    display: none
}

.archive-post {
    text-decoration: none;
    margin-block-end:3rem;display: block
}

@media(max-width: 600px) {
    .archive-post {
        text-align:center
    }
}

.archive-post h3 {
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-decoration: underline;
    margin-block-end:.4em;text-decoration-thickness: .07em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor;
    text-wrap: pretty;
    position: relative;
    transition: color .1s ease;
    text-wrap: balance
}

@media(max-width: 600px) {
    .archive-post h3 {
        margin-block-end:.3em
    }
}

.archive-post:hover h3 {
    color: var(--color-accent)
}

.archive-post time {
    margin: 0 0 1em;
    font-size: var(--font-size-300);
    font-style: italic;
    color: var(--color-link);
    display: block
}

.archive-post p {
    font-size: var(--font-size-400);
    text-wrap: balance
}

@media(max-width: 600px) {
    .archive-post time {
        margin:0 0 .8em
    }
}

.article h1,.article .intro {
    inline-size: 100%
}

.article h1 {
    text-wrap: balance
}

@media(max-width: 1100px) {
    .article h1 {
        margin-block-end:1em;
        margin-inline-start:auto;margin-inline-end:auto;text-align: center !important;
        inline-size: 70%
    }
}

.article .intro {
    text-wrap: pretty
}

.article .button,.article .button:hover {
    transition: color .1s ease,background-color .1s ease;
    color: var(--color-surface);
    text-decoration: none
}

.article ol,.article ul {
    color: var(--color-link);
    margin: 0 0 2em 2em;
    text-wrap: pretty;
    inline-size: calc(100% - 2em)
}

@media(max-width: 1100px) {
    .article ol,.article ul {
        margin-block-end:1.5rem
    }
}

.article ul {
    list-style-type: none
}

.article ul li {
    position: relative
}

.article ul li::before {
    content: "";
    inline-size: .4rem;
    block-size: .4rem;
    background: var(--color-border-strong);
    display: inline-block;
    inset-inline-start: 0;
    inset-block-start: .6em;
    margin: 0 1rem 0 -1em;
    position: absolute
}

@media(max-width: 1100px) {
    .article ul li::before {
        transform:none
    }
}

.article h2 {
    max-inline-size: none;
    font-size: var(--font-size-700);
    margin: 2em 0 .7em;
    inline-size: 100%
}

@media(max-width: 1100px) {
    .article h2 {
        margin-block-start:1em
    }
}

.article p+h2 {
    margin-block-start:1.5em}

@media(max-width: 1100px) {
    .article p+h2 {
        margin-block-start:.5em
    }
}

.article h3 {
    max-inline-size: none;
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    margin: 2em 0 .8em;
    inline-size: 100%
}

@media(max-width: 1100px) {
    .article h3 {
        margin-block-start:1em
    }
}

.article p+h3 {
    margin-block-start:1em}

@media(max-width: 1100px) {
    .article p+h3 {
        margin-block-start:0
    }
}

.article em,.article i {
    font-style: italic;
    color: var(--color-link)
}

.article b,.article strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-link)
}

.article>a {
    display: block;
    text-align: center
}

.article img:not(.signature) {
    inline-size: 100%;
    max-inline-size: 79%;
    margin: .5em auto 1.5em;
    justify-self: center;
    display: block;
    block-size: auto
}

@media(max-width: 1100px) {
    .article img:not(.signature) {
        max-inline-size:100%
    }
}

.article iframe {
    inline-size: 100%;
    max-inline-size: 43.75rem;
    display: block;
    margin: .5em auto 1.5em;
    background: var(--color-surface);
    box-shadow: var(--box-shadow-dimmed);
    border-radius: var(--border-radius)
}

.article img:not(.signature)+h2,.article img:not(.signature)+h3 {
    margin-block-start:2.5em}

@media(max-width: 1100px) {
    .article img:not(.signature)+h2,.article img:not(.signature)+h3 {
        margin-block-start:1em
    }
}

.article ul+p:has(.signature),.article ol+p:has(.signature) {
    margin-block-start:1em}

.article img:not(.signature,.transparent) {
    background: var(--color-surface);
    box-shadow: var(--box-shadow-dimmed);
    border-radius: var(--border-radius)
}

.article blockquote {
    font-style: italic;
    font-size: var(--font-size-500);
    color: var(--color-link);
    max-inline-size: 100%;
    font-feature-settings: "liga","clig","swsh";
    text-align: left;
    border-left-width: .25rem;
    border-left-style: solid;
    border-color: var(--color-border);
    text-wrap: balance;
    padding-inline-start:1em;margin-inline-start:2em;margin-block-start:2em;margin-block-end:2em}

@media(max-width: 1100px) {
    .article blockquote {
        margin-block-start:0;
        margin-block-end:1em}
}

.image-padding {
    padding: 2em
}

.n-badge {
    background: var(--color-surface);
    border-radius: 6.25rem;
    color: var(--color-text);
    box-shadow: var(--box-shadow-dimmed);
    font-size: var(--font-size-200);
    font-family: var(--font-family-code);
    font-weight: var(--font-weight);
    text-transform: uppercase;
    margin-inline-start:.313rem;padding: .188rem .875rem;
    position: relative;
    vertical-align: middle
}

.article .button,.article button,.article input[type=submit] {
    margin: 0 0 1.5em
}

.article input[type=submit] {
    inline-size: auto
}

.article pre+form {
    margin-block-start:0}

.desc {
    font-style: italic;
    color: var(--color-text-dimmed);
    font-size: var(--font-size-400);
    margin-block-start:-1em;inline-size: 100%;
    display: block;
    text-align: center
}

.desc+p {
    margin-block-start:2em}

@media(max-width: 1100px) {
    .desc+p {
        margin-block-start:1em
    }
}

.article sup {
    font-size: 65%;
    color: var(--color-text-dimmed);
    margin-inline-start:.188rem}

.article sup a {
    color: var(--color-text-dimmed)
}

.section-id {
    background-image: url("data:image/svg+xml,%3Csvg height='80' width='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%237B7065' d='M29.3 63.5l-4 4a9.1 9.1 0 01-12.8 0c-1.7-1.7-2.6-4-2.6-6.3s.8-4.6 2.5-6.2l15-14.8c3-3 8.8-7.6 13-3.4 2 2 5 2 7 0s2-5 0-7c-7.2-7.2-17.8-5.8-27 3.4L5.4 48C2 51.4 0 56 0 61s2 10 5.5 13.5a18.8 18.8 0 0026.7 0l4-4c2-2 2-5 0-7-1.8-2-5-2-7 0zM74.5 6C66.7-1.6 56-2 48.8 5l-5 5c-2 2-2 5 0 7 1.8 2 5 2 7 0l5-5c3.7-3.6 8.5-2 11.7 1a9.1 9.1 0 01.1 12.6l-16 15.8c-7.2 7.2-10.6 3.8-12 2.4-2-2-5-2-7 0s-2 5 0 7c3.3 3.3 7 5 11 5 5 0 10-2.5 15-7.4l16-15.8A19 19 0 0074.5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 70% auto;
    display: inline-block;
    position: absolute;
    visibility: hidden;
    height: 1em;
    width: .9em;
    margin-left: .4rem;
    opacity: 0;
    text-indent: -999px;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    color: rgba(0,0,0,0) !important
}

h2:hover .section-id,h3:hover .section-id {
    visibility: visible;
    opacity: .5
}

h2:hover .section-id:hover,h3:hover .section-id:hover {
    opacity: 1
}

@media(max-width: 1024px) {
    .section-id {
        visibility:visible;
        opacity: .5
    }

    .section-id:hover {
        opacity: 1
    }
}

.article .original {
    text-decoration: none;
    color: var(--color-link);
    display: block;
    text-align: left;
    text-decoration: none;
    border-radius: var(--border-radius-icon);
    background-color: rgba(214,209,204,.2);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-300);
    padding: 2rem;
    margin: 3rem 0 0
}

@media(max-width: 800px) {
    .article .original {
        padding:1.5rem;
        margin-block-start:0rem}
}

@media(max-width: 768px) {
    .article .original {
        margin-block-start:0rem;
        margin-block-end:2rem}
}

.article p+.faq,.article ul+.faq {
    margin-block-start:2.5em}

h3.faq+p+p .signature {
    margin-block-start:1em}

@media(max-width: 800px) {
    .article p+.faq,.article ul+.faq {
        margin-block-start:1em
    }
}

.article .image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-block-end:2rem;gap: 1rem
}

.article .image-grid img {
    margin: 0;
    padding: 1rem;
    max-inline-size: 100%
}

.cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(16em, 1fr));
    grid-gap: 3rem;
    margin-block-start:4rem}

@media(max-width: 1400px) {
    .cards {
        margin-block-start:3rem;
        grid-gap: 2rem
    }
}

@media(max-width: 1100px) {
    .cards {
        margin-block-start:1.5rem;
        grid-template-columns: repeat(1, minmax(16em, 1fr))
    }
}

@media(max-width: 700px) {
    .cards {
        margin-block-end:3rem
    }
}

.card {
    padding: 2.5rem 3rem 3rem 4rem;
    border-radius: var(--border-radius-icon);
    box-shadow: var(--box-shadow);
    background-color: var(--color-surface);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    transition: transform .5s ease;
    gap: 3.25rem
}

.card:hover {
    transform: perspective(25rem) rotate3d(var(--r, 1, -1), 0, -1deg)
}

.card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background),0 0 0 5px var(--color-accent)
}

.card:focus-visible h2,.card:focus-visible svg {
    color: var(--color-accent)
}

@media(prefers-reduced-motion: reduce) {
    .card:hover {
        transform: none
    }
}

@media(max-width: 1480px) {
    .card {
        padding:2rem 2rem 2.5rem 3rem;
        gap: 2.5rem
    }
}

@media(max-width: 768px) {
    .card {
        padding:2rem 1.5rem 2.5rem 2rem;
        gap: 1.5rem
    }
}

.card h2 {
    margin: 0;
    margin-block-end:.6em;mask-image: none;
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: .07em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor;
    transition: color .1s ease
}

.card:hover h2 {
    color: var(--color-accent)
}

.card p {
    font-size: var(--font-size-400);
    font-weight: var(--font-weight);
    margin: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    text-wrap: pretty
}

.card svg,.card img {
    color: var(--color-link);
    transition: color .1s ease;
    inline-size: 100%;
    min-inline-size: 3.75rem;
    max-inline-size: 3.75rem;
    margin-inline-start:0;margin-block-start:-0.3rem;align-self: center;
    block-size: auto
}

.card:hover svg {
    color: var(--color-accent)
}

@media(max-width: 1400px) {
    .card svg,.card img {
        min-inline-size:3.125rem;
        max-inline-size: 3.125rem
    }
}

@media(max-width: 768px) {
    .card svg,.card img {
        align-self:flex-start;
        margin-block-start:.3rem;min-inline-size: 2.5rem;
        max-inline-size: 2.5rem
    }
}

.section-webrings {
    text-align: center
}

.section-webrings h1,.section-webrings .intro {
    text-wrap: balance;
    max-inline-size: 52rem;
    margin-inline:auto}

@media(max-width: 800px) {
    .section-webrings h1 br,.section-webrings .intro br {
        display:none
    }
}

.webrings {
    margin-block-start:4.5rem;display: flex;
    flex-direction: column;
    max-inline-size: 53.5rem;
    margin-inline:auto;gap: 1.5rem
}

@media(max-width: 1100px) {
    .webrings {
        margin-block-start:2rem
    }
}

@media(max-width: 750px) {
    .webrings {
        margin-block-start:1rem
    }
}

@media(max-width: 650px) {
    .webrings {
        margin-block-start:0rem;
        gap: 0;
        width: calc(100% + 1rem);
        margin-inline:-0.5rem}
}

.webring {
    border-radius: var(--border-radius-icon);
    box-shadow: 0 1px 0 rgba(183,173,164,.1),1px .188rem .625rem rgba(0,0,0,.05),1px 1px 1px rgba(0,0,0,.07);
    background-color: var(--color-surface);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    transition: transform .5s ease;
    align-items: stretch;
    inline-size: 100%;
    background-color: var(--color-surface);
    position: relative
}

.webring::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0rem;
    background: radial-gradient(ellipse 14rem 10rem at 50% 50%, var(--color-surface), transparent);
    transition: opacity .5s ease;
    inline-size: 100%;
    block-size: 100%;
    opacity: .3;
    z-index: 1
}

.webring:nth-child(1) {
    background-color: #faecd6
}

.webring:nth-child(2) {
    background-color: #fce9e8
}

.webring:nth-child(3) {
    background-color: #f4ebfa
}

.webring:nth-child(4) {
    background-color: #ebf0fa
}

.webring h2 {
    margin-block-end:.3em;mask-image: none;
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-transform: none;
    text-decoration: underline;
    text-decoration-thickness: .07em;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
    text-decoration-color: currentColor;
    transition: color .1s ease
}

.webring p {
    font-size: var(--font-size-400);
    font-weight: var(--font-weight);
    color: var(--color-link);
    line-height: var(--line-height-heading);
    letter-spacing: 0;
    text-transform: none;
    text-align: center !important;
    text-wrap: pretty;
    margin: 0;
    inline-size: 100%;
    max-inline-size: 100%
}

.webring p,.webring h2 {
    transition: transform .5s ease
}

.webring a:hover,.webring a:focus-visible {
    background-color: rgba(0,0,0,.02) !important;
    backdrop-filter: saturate(140%)
}

.webring a:hover p,.webring a:hover h2,.webring a:focus-visible p,.webring a:focus-visible h2 {
    transform: perspective(25rem) rotate3d(var(--r, 1, -1), 0, -2deg)
}

.webring a:hover p,.webring a:focus-visible p {
    color: var(--color-text)
}

.webring a:focus-visible {
    box-shadow: 0 0 0 2px var(--color-background),0 0 0 5px var(--color-accent);
    border-radius: var(--border-radius)
}

.webring-link {
    padding: 2rem 3rem 2.3rem;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: center;
    flex-grow: 1
}

@media(max-width: 768px) {
    .webring-link {
        padding:1.5rem 1rem 1.8rem
    }
}

.webring .previous,.webring .next {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-indent: -9999px;
    position: relative;
    z-index: 2;
    height: auto;
    overflow: hidden;
    display: flex;
    border-radius: 0;
    min-inline-size: 4rem;
    backdrop-filter: saturate(130%);
    transition: background-color .2s ease,backdrop-filter .2s ease,max-inline-size .3s ease
}

.webring .previous:hover,.webring .next:hover {
    background-color: rgba(0,0,0,.03) !important;
    backdrop-filter: saturate(160%)
}

.webring .previous:hover svg,.webring .next:hover svg {
    color: rgba(0,0,0,.6)
}

@media(max-width: 768px) {
    .webring .previous,.webring .next {
        min-inline-size:2.7rem
    }
}

.webring .previous svg,.webring .next svg {
    color: rgba(0,0,0,.5);
    block-size: 1rem;
    inline-size: 1rem;
    pointer-events: none
}

@media(max-width: 768px) {
    .webring .previous svg,.webring .next svg {
        block-size:.8rem;
        inline-size: .8rem
    }
}

.previous {
    border-inline-end:1px solid hsla(0,0%,100%,.3);box-shadow: inset -10px 0 30px rgba(0,0,0,.02),inset -1px 0 0 rgba(0,0,0,.07)
}

.next {
    border-inline-start:1px solid hsla(0,0%,100%,.3);box-shadow: inset 10px 0 30px rgba(0,0,0,.02),inset 1px 0 0 rgba(0,0,0,.07)
}

.section-intro .sup {
    text-decoration: none;
    color: var(--color-border-strong);
    font-weight: var(--font-weight-bold)
}

.section-webrings p.footnote {
    font-size: var(--font-size-300);
    color: var(--color-text-dimmed);
    line-height: var(--line-height-tooltip);
    text-wrap: balance;
    text-align: center;
    font-style: italic;
    margin-inline:auto;margin-block-start:2.5rem;margin-block-end:0}

@media(max-width: 768px) {
    .section-webrings p.footnote {
        margin-inline:auto;
        text-align: center;
        margin-block-start:2.5rem}
}

@media(max-width: 700px) {
    .section-webrings p.footnote {
        margin-block-end:3rem
    }
}

@media(max-width: 650px) {
    .section-webrings p.footnote {
        margin-block-start:2rem
    }
}

.footnote sup {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-400);
    margin-inline-end:.25em;vertical-align: middle
}

.universe {
    inline-size: 100%;
    block-size: 50vw;
    margin: .5rem auto 2rem;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
    overflow: hidden
}

@media(min-width: 700px) {
    .universe {
        inline-size:500px;
        block-size: 250px;
        margin-block-start:2rem;margin-block-end:0}
}

@media(min-width: 1100px) {
    .universe {
        inline-size:650px;
        block-size: 325px;
        margin-block-end:0;position: absolute;
        transform: translateY(-13%);
        inset-block-start: 0;
        inset-inline-end: 5%
    }
}

@media(min-width: 1300px) {
    .universe {
        inset-inline-end:0
    }
}

@media(min-width: 1400px) {
    .universe {
        inset-inline-end:5%
    }
}

@media(min-width: 1500px) {
    .universe {
        inline-size:750px;
        block-size: 375px
    }
}

.universe.universe-relative {
    position: relative;
    inline-size: 100%;
    block-size: 44vw;
    margin: 1rem auto 2rem;
    transform: none;
    inset-inline-start: 0;
    inset-inline-end: 0
}

@media(min-width: 700px) {
    .universe.universe-relative {
        margin-block-start:0
    }
}

@media(min-width: 1100px) {
    .universe.universe-relative {
        margin-block-start:2rem;
        block-size: 22rem
    }
}

@media(min-width: 1500px) {
    .universe.universe-relative {
        inline-size:750px;
        block-size: 375px
    }
}

.universe.universe-relative canvas {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    inset-inline-start: 0
}

canvas {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    outline: none
}

@media(min-width: 1100px) {
    canvas {
        inset-inline-start:25%
    }
}

.section-error .button-group {
    display: none
}

@media(min-width: 1100px) {
    .section-error .button-group {
        display:block
    }
}

@media print {
    header,footer,aside,.message,.signature,.button {
        display: none !important
    }

    * {
        text-shadow: none !important;
        mask-image: none !important;
        color: #000 !important;
        box-shadow: none !important
    }

    body {
        margin: 6em 4em 0 !important;
        font-size: 75% !important
    }

    .section {
        margin: 0 0 1em !important
    }

    p {
        margin: 0 0 1em !important
    }

    code {
        background-color: var(--color-border-dimmed) !important
    }

    h1 {
        font-size: 2em !important
    }

    h2 {
        font-size: 1.5em !important
    }

    h3,p.intro {
        font-size: 1.25em !important
    }

    .desc {
        font-size: .75em !important
    }

    ul {
        list-style: disc !important
    }

    blockquote {
        font-size: 1em !important;
        margin: 0 0 1em !important
    }

    header {
        margin: 0;
        padding: 0
    }
}

.grid-active *,.grid-active *::before,.grid-active *::after {
    outline: 1px solid var(--color-tertiary);
    mask-image: none
}

.guides {
    position: fixed;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    padding: 0;
    z-index: 99999;
    pointer-events: none;
    transition: opacity .3s .2s;
    opacity: 0
}

.grid-active .guides {
    opacity: 1;
    transition: opacity .3s 0s
}

@media(max-width: 1700px) {
    .guides {
        padding:0 8%
    }
}

@media(max-width: 1440px) {
    .guides {
        padding:0 7.5rem
    }
}

@media(max-width: 1300px) {
    .guides {
        padding:0 3.75rem
    }
}

@media(max-width: 1100px) {
    .guides {
        padding:0 8%
    }
}

@media(max-width: 360px) {
    .guides {
        padding:0 1.25rem
    }
}

.guides-container {
    display: grid;
    grid: 1fr/repeat(4, 1fr);
    position: relative;
    inline-size: 100%;
    max-inline-size: 87.5rem;
    block-size: 100%;
    margin: 0 auto
}

@media(max-width: 1100px) {
    .guides-container {
        grid:1fr/repeat(3, 1fr)
    }
}

@media(max-width: 768px) {
    .guides-container {
        grid:1fr/repeat(2, 1fr)
    }
}

.guide {
    inline-size: 2px;
    background-image: linear-gradient(180deg, var(--color-tertiary), var(--color-tertiary) 50%, transparent 0, transparent);
    box-shadow: 0 0 0 0 rgba(33,148,233,0);
    opacity: .8;
    transition: box-shadow .2s ease-in-out;
    background-size: 1px 14px
}

.grid-active .guide {
    box-shadow: 0 0 0 1rem rgba(33,148,233,.1);
    outline: 0
}

.guide:last-of-type {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%
}

.mode-colorblind {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.mode-lowvision {
    -webkit-filter: blur(2px);
    filter: blur(2px)
}

.mode-invert {
    -webkit-filter: invert(100%);
    filter: invert(100%)
}

.mode-lowvision.mode-colorblind {
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px)
}

.mode-invert.mode-colorblind {
    -webkit-filter: invert(100%) grayscale(100%);
    filter: invert(100%) grayscale(100%)
}

.mode-invert.mode-lowvision {
    -webkit-filter: invert(100%) blur(2px);
    filter: invert(100%) blur(2px)
}

.mode-invert.mode-lowvision.mode-colorblind {
    -webkit-filter: invert(100%) blur(2px) grayscale(100%);
    filter: invert(100%) blur(2px) grayscale(100%)
}

dialog::backdrop {
    background: var(--color-text);
    opacity: .75
}

body:has(dialog[open]) {
    filter: blur(4px)
}

html:has(dialog[open]) {
    overflow: hidden;
    scrollbar-gutter: stable
}

dialog {
    border: 0;
    border-radius: var(--border-radius-icon);
    background: var(--color-background);
    padding: 3rem 3.5rem;
    inline-size: 35rem;
    text-align: left;
    margin: auto;
    box-shadow: var(--box-shadow),var(--box-shadow)
}

dialog h3 {
    font-weight: 900;
    color: var(--color-text);
    font-size: 1.5rem;
    position: relative
}

dialog ul {
    font-size: var(--font-size-300);
    list-style-type: none;
    line-height: 1.8;
    margin: 0 0 0 1.25rem !important
}

dialog li {
    position: relative
}

dialog li::before {
    content: "";
    inline-size: .35rem;
    block-size: .35rem;
    background: var(--color-border-strong);
    display: inline-block;
    inset-inline-start: 0;
    inset-block-start: .7em;
    margin: 0 1rem 0 -1em;
    position: absolute
}

dialog form {
    margin: 1.5rem 0 0;
    max-inline-size: 100%
}

dialog .button {
    padding: .625rem 1rem;
    margin: 0
}

dialog .button:focus {
    box-shadow: 0 0 0 2px var(--color-background),0 0 0 5px var(--color-accent);
    outline: 0
}

kbd {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--box-shadow-dimmed),var(--box-shadow-dimmed);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-family: var(--font-family);
    min-inline-size: 2.2rem;
    cursor: default;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--color-link);
    padding: .2rem .4rem;
    margin-inline:.2em;line-height: 1;
    font-size: .85rem
}

.notice {
    background-color: var(--color-error);
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-icon);
    margin: 0 0 2.5em;
    padding: 1.5rem 2rem 1.5rem 1.5rem
}

.notice h2 {
    margin: 0 0 .75em
}

.notice p {
    max-inline-size: 100%;
    margin: 0 !important
}

/*==================================================*/
.photo-full {
	width: 100%;
	border-radius: 15px;
	max-width: 600px;
}