@layer astro.images {
    :where([data-astro-image]) {
        height: auto
    }

    :where([data-astro-image=full-width]) {
        width: 100%
    }

    :where([data-astro-image=constrained]) {
        max-width: 100%
    }

    [data-astro-image-fit=fill] {
        object-fit: fill
    }

    [data-astro-image-fit=contain] {
        object-fit: contain
    }

    [data-astro-image-fit=cover] {
        object-fit: cover
    }

    [data-astro-image-fit=scale-down] {
        object-fit: scale-down
    }

    [data-astro-image-pos=top] {
        object-position: top
    }

    [data-astro-image-pos=bottom] {
        object-position: bottom
    }

    [data-astro-image-pos=left] {
        object-position: left
    }

    [data-astro-image-pos=right] {
        object-position: right
    }

    [data-astro-image-pos=center] {
        object-position: center
    }

    [data-astro-image-pos=top-bottom] {
        object-position: top bottom
    }

    [data-astro-image-pos=top-left] {
        object-position: top left
    }

    [data-astro-image-pos=top-right] {
        object-position: top right
    }

    [data-astro-image-pos=top-center] {
        object-position: top center
    }

    [data-astro-image-pos=bottom-top] {
        object-position: bottom top
    }

    [data-astro-image-pos=bottom-left] {
        object-position: bottom left
    }

    [data-astro-image-pos=bottom-right] {
        object-position: bottom right
    }

    [data-astro-image-pos=bottom-center] {
        object-position: bottom center
    }

    [data-astro-image-pos=left-top] {
        object-position: left top
    }

    [data-astro-image-pos=left-bottom] {
        object-position: left bottom
    }

    [data-astro-image-pos=left-right] {
        object-position: left right
    }

    [data-astro-image-pos=left-center] {
        object-position: left center
    }

    [data-astro-image-pos=right-top] {
        object-position: right top
    }

    [data-astro-image-pos=right-bottom] {
        object-position: right bottom
    }

    [data-astro-image-pos=right-left] {
        object-position: right left
    }

    [data-astro-image-pos=right-center] {
        object-position: right center
    }

    [data-astro-image-pos=center-top] {
        object-position: center top
    }

    [data-astro-image-pos=center-bottom] {
        object-position: center bottom
    }

    [data-astro-image-pos=center-left] {
        object-position: center left
    }

    [data-astro-image-pos=center-right] {
        object-position: center right
    }
}

*,
:before,
:after {
    box-sizing: border-box
}

* {
    margin: 0
}

html {
    text-size-adjust: 100%
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5
}

img,
picture,
svg,
video {
    max-width: 100%;
    display: block
}

source {
    display: none
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit
}

h1,
h2,
h3,
h4 {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance
}

p {
    text-wrap: pretty
}

ul,
ol {
    padding: 0;
    list-style: none
}

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

:focus-visible {
    outline: 2px solid var(--color-primaryLabel);
    outline-offset: 3px;
    border-radius: 2px
}

@media (prefers-reduced-motion:reduce) {

    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important
    }
}

:root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --fs-13: .8125rem;
    --lh-13: 1.125rem;
    --fs-15: .9375rem;
    --lh-15: 1.25rem;
    --fs-17: 1.0625rem;
    --lh-17: 1.375rem;
    --fs-20: 1.25rem;
    --lh-20: 1.625rem;
    --color-bg: #fff;
    --color-primaryLabel: #000;
    --color-secondaryLabel: #000000a3;
    --color-tertiaryLabel: #0000007a;
    --color-quaternaryLabel: #0000004d;
    --color-hover: #000000c2;
    --color-imageBg: #f7f7f7;
    --orb-bg-top: #d6d6d6;
    --orb-bg-bottom: #e0e0e0;
    --orb-bg-alpha: 1;
    --control-bg: linear-gradient(180deg, #edededcc 0%, #fcfcfccc 100%);
    --control-inside-stroke: linear-gradient(180deg, #fff 0%, #ffffff80 25%, #ffffff80 75%, #fff 100%);
    --control-blur: blur(16px) saturate(200%);
    --control-hairline: .6px;
    --control-shadow: inset 0 .5px 4px #fff, 0 0 0 var(--control-hairline) #0000001a, var(--control-hairline) 0 0 #00000029, calc(-1 * var(--control-hairline)) 0 0 #00000029;
    --control-drop: 0 4px 12px #00000008;
    --control-drop-hover: 0 4px 12px #0000000a;
    --menu-drop: 0 8px 40px #00000014;
    --color-fill-hover: #0000000f;
    --consent-button-bg: #0000000f;
    --consent-button-bg-hover: #0000000c;
    --icon-shadow-color: #00000014;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-44: 44px;
    --space-60: 60px;
    --space-68: 68px;
    --space-92: 92px;
    --gap-block: var(--space-60);
    --pad-page-end: var(--space-28);
    --measure: 33.75rem;
    --shell: 135rem;
    --pad: var(--space-24);
    --slomo: 1;
    --dur-hover: calc(.2s * var(--slomo));
    --dur-default: calc(.3s * var(--slomo));
    --dur-gentle: calc(.6s * var(--slomo));
    --dur-bouncy: calc(.7s * var(--slomo));
    --dur-snappy: calc(.45s * var(--slomo));
    --dur-snappy-reverse: calc(.5s * var(--slomo));
    --rise-distance: 32px;
    --rise-scale: .99;
    --rise-step: 20ms;
    --rise-cap: 32;
    --hover-scale: 1.04;
    --press-scale: .95;
    --dur-press-in: calc(.3s * var(--slomo));
    --dur-press-out: calc(.7s * var(--slomo));
    --orb-size: 96px;
    --orb-photo-h: 102px;
    --orb-head-x: .604;
    --orb-float-y: 6px;
    --orb-float-scale: 1.06;
    --dur-orb-rise: calc(8s * var(--slomo));
    --dur-orb-breathe: calc(9s * var(--slomo));
    --orb-breathe-offset: .25;
    --orb-shadow-y: 8px;
    --orb-shadow-blur: 24px;
    --orb-shadow-opacity: .1;
    --ease-orb: ease-in-out;
    --ease-hover: cubic-bezier(.2, 0, 0, 1);
    --ease-default: linear(0, .0193, .0684, .1368, .2162, .3004, .385, .4667, .5435, .6139, .6775, .7338, .783, .8254, .8615, .8919, .9172, .938, .9548, .9682, .9788, .987, .9933, .9979, 1.0012, 1.0035, 1);
    --ease-gentle: linear(0, .0172, .0611, .1224, .1939, .2703, .3476, .423, .4946, .5613, .6224, .6775, .7266, .77, .8079, .8407, .869, .893, .9134, .9305, .9448, .9566, .9663, .9742, .9805, .9857, 1);
    --ease-snappy: linear(0, .0216, .0778, .1571, .2502, .3495, .4494, .5455, .635, .7159, .7871, .8482, .8995, .9413, .9745, 1, 1.0188, 1.0318, 1.0401, 1.0445, 1.046, 1.0451, 1.0427, 1.0391, 1.0349, 1.0303, 1.0257, 1.0213, 1.0171, 1.0134, 1);
    --ease-snappy-reverse: linear(0, .0251, .09, .1812, .2874, .3995, .5107, .6158, .7115, .7957, .8674, .9265, .9735, 1.0093, 1.0353, 1.0527, 1.063, 1.0675, 1.0677, 1.0645, 1.0592, 1.0524, 1.0449, 1.0372, 1.0298, 1.023, 1.0168, 1.0115, 1.007, 1.0034, 1);
    --ease-snappy-reverse-y: linear(0, .0251, .09, .1812, .2874, .3995, .5107, .6158, .7115, .7957, .8674, .9265, .9735, 1.0221, 1.0834, 1.1245, 1.1489, 1.1597, 1.16, 1.1526, 1.1399, 1.1239, 1.1062, 1.0881, 1.0706, 1.0543, 1.0397, 1.0271, 1.0166, 1.008, 1);
    --ease-bouncy: linear(0, .0232, .0842, .1714, .2746, .3856, .4975, .6052, .7048, .794, .8711, .9357, .9878, 1.0281, 1.0576, 1.0775, 1.0893, 1.0943, 1.094, 1.0896, 1.0822, 1.0729, 1.0626, 1.052, 1.0416, 1.0318, 1.0229, 1.0151, 1.0085, 1.0031, .9988, .9956, .9933, .9919, 1)
}

@media (prefers-color-scheme:dark) {
    :root {
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        --color-bg: #000;
        --color-primaryLabel: #fff;
        --color-secondaryLabel: #ffffffb3;
        --color-tertiaryLabel: #ffffff8a;
        --color-quaternaryLabel: #ffffff5c;
        --color-hover: #ffffffd6;
        --color-imageBg: #141414;
        --orb-bg-top: #292929;
        --orb-bg-bottom: #3d3d3d;
        --orb-bg-alpha: .6;
        --orb-shadow-opacity: .4;
        --control-bg: linear-gradient(180deg, #1c1c1cb3 0%, #2b2b2bb3 100%);
        --control-inside-stroke: linear-gradient(180deg, #ffffff29 0%, #fff0 25%, #fff0 75%, #ffffff1a 100%);
        --control-blur: blur(16px) saturate(200%);
        --control-shadow: inset 0 .5px 4px #ffffff1a, 0 0 0 var(--control-hairline) #0003, var(--control-hairline) 0 0 #0003, calc(-1 * var(--control-hairline)) 0 0 #0003;
        --control-drop: 0 4px 12px #0000001f;
        --control-drop-hover: 0 4px 12px #00000029;
        --menu-drop: 0 8px 40px #00000014;
        --color-fill-hover: #ffffff14;
        --consent-button-bg: #ffffff14;
        --consent-button-bg-hover: #fff1;
        --icon-shadow-color: #0003
    }
}

html {
    background: var(--color-bg)
}

body {
    max-width: var(--shell);
    background: var(--color-bg);
    color: var(--color-primaryLabel);
    font-family: var(--font-sans);
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    margin-inline: auto;
    overflow-x: clip
}

.page {
    max-width: calc(var(--measure) + var(--pad) * 2);
    padding: var(--gap-block) var(--pad) var(--pad-page-end);
    gap: var(--gap-block);
    flex-direction: column;
    margin-inline: auto;
    display: flex
}

.page:has(.masthead--back) {
    gap: var(--space-24);
    padding-top: 0
}

@view-transition {
    navigation: auto
}

::view-transition-old(root) {
    animation-duration: var(--dur-default);
    animation-timing-function: var(--ease-default)
}

::view-transition-new(root) {
    animation-duration: var(--dur-default);
    animation-timing-function: var(--ease-default)
}

@keyframes rise {
    0% {
        opacity: 0;
        translate: 0 var(--rise-distance);
        scale: var(--rise-scale)
    }

    to {
        opacity: 1;
        translate: 0;
        scale: 1
    }
}

.rise {
    animation-name: rise;
    animation-duration: var(--dur-bouncy);
    animation-timing-function: var(--ease-bouncy);
    animation-fill-mode: backwards;
    animation-delay: calc(min(var(--order, 0), var(--rise-cap)) * var(--rise-step))
}

.masthead {
    align-items: flex-start;
    gap: var(--space-20);
    flex-direction: column;
    display: flex
}

.masthead--back {
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-12);
    flex-direction: row;
    position: relative
}

.masthead--back .identity__name {
    font-size: var(--fs-17);
    line-height: var(--lh-17);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%
}

.masthead--back {
    --back-inset: 20px;
    --back-size: 44px;
    --bleed: min(100vw, var(--shell));
    width: var(--bleed);
    margin-inline: calc((100% - var(--bleed)) / 2);
    padding-inline: var(--back-inset)
}

@media (min-width:48rem) {
    .masthead--back {
        width: auto;
        margin-inline: 0;
        padding-inline: 0
    }

    .masthead--back .identity__name {
        position: static;
        translate: none
    }

    .masthead--back .back {
        margin-left: calc(-1 * (var(--back-size) + var(--space-12)))
    }
}

@keyframes orb-rise {

    0%,
    to {
        translate: 0
    }

    50% {
        translate: 0 calc(-1 * var(--orb-float-y))
    }
}

@keyframes orb-breathe {

    0%,
    to {
        scale: 1
    }

    50% {
        scale: var(--orb-float-scale)
    }
}

.orb {
    --orb-r: calc(var(--orb-size) / 2);
    width: var(--orb-size);
    height: var(--orb-photo-h);
    animation-name: orb-rise, orb-breathe;
    animation-duration: var(--dur-orb-rise), var(--dur-orb-breathe);
    animation-delay: 0s, calc(-1 * var(--dur-orb-breathe) * var(--orb-breathe-offset));
    animation-timing-function: var(--ease-orb);
    animation-iteration-count: infinite;
    display: block;
    position: relative
}

.orb__disc,
.orb__clip {
    width: var(--orb-size);
    position: absolute;
    bottom: 0;
    left: 0
}

.orb__disc {
    height: var(--orb-size);
    background: linear-gradient(180deg, color-mix(in srgb, var(--orb-bg-top) calc(var(--orb-bg-alpha) * 100%), transparent) 0%, color-mix(in srgb, var(--orb-bg-bottom) calc(var(--orb-bg-alpha) * 100%), transparent) 100%);
    border-radius: var(--orb-r);
    box-shadow: 0 var(--orb-shadow-y) var(--orb-shadow-blur) rgb(0 0 0/var(--orb-shadow-opacity))
}

.orb__clip {
    height: var(--orb-photo-h);
    border-radius: 0 0 var(--orb-r) var(--orb-r);
    overflow: hidden
}

.orb__clip img {
    bottom: 0;
    left: calc(var(--orb-size) / 2 - var(--orb-photo-h) * var(--orb-head-x));
    height: var(--orb-photo-h);
    width: auto;
    max-width: none;
    display: block;
    position: absolute
}

.identity__orb {
    margin-left: -4px;
    margin-bottom: var(--space-12)
}

.identity {
    flex-direction: column;
    display: flex
}

.identity__name {
    font-size: var(--fs-20);
    line-height: var(--lh-20);
    font-weight: 500
}

.identity__name a {
    transition: color var(--dur-hover) var(--ease-hover)
}

.identity__name a:hover {
    color: var(--color-hover)
}

.identity__title,
.identity__location {
    color: var(--color-secondaryLabel)
}

main {
    gap: var(--gap-block);
    flex-direction: column;
    display: flex
}

.section {
    gap: var(--space-20);
    scroll-margin-top: var(--space-32);
    flex-direction: column;
    display: flex
}

.title {
    font-size: var(--fs-20);
    line-height: var(--lh-20);
    font-weight: 500
}

.summary {
    color: var(--color-secondaryLabel);
    text-wrap: pretty
}

.article__intro {
    gap: var(--space-16);
    flex-direction: column;
    display: flex
}

.article__intro>header {
    flex-direction: column;
    display: flex
}

.article__intro .summary {
    color: var(--color-primaryLabel)
}

.meta {
    color: var(--color-secondaryLabel)
}

.entries {
    gap: var(--space-24);
    flex-direction: column;
    display: flex
}

@media (min-width:36.75rem) {
    .entries--two {
        column-gap: var(--space-24);
        grid-template-columns: 1fr 1fr;
        display: grid
    }
}

.entry {
    flex-direction: column;
    display: flex
}

.entry__name {
    text-wrap: pretty;
    transition: color var(--dur-hover) var(--ease-hover);
    font-weight: 500
}

a.entry:hover .entry__name {
    color: var(--color-hover)
}

.entry__line {
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    color: var(--color-secondaryLabel)
}

.entry--icon {
    align-items: center;
    gap: var(--space-16);
    flex-direction: row
}

.entry__body {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.entry__drill {
    display: none
}

.entry__drill path {
    fill: var(--color-quaternaryLabel)
}

.icon {
    filter: var(--icon-shadow, none);
    flex: none
}

.icon img {
    width: var(--icon-size);
    height: var(--icon-size)
}

.entry .icon {
    --icon-shadow: drop-shadow(0 4px 20px #0000001f)
}

.contact__list .icon {
    --icon-shadow: drop-shadow(0 2px 6px var(--icon-shadow-color))
}

.gallery {
    --gallery-gap: var(--space-4);
    --bleed: min(100vw, var(--shell));
    gap: var(--gallery-gap);
    width: var(--bleed);
    margin-inline: calc((100% - var(--bleed)) / 2);
    grid-template-columns: 1fr;
    display: grid
}

@media (min-width:48rem) {
    .gallery {
        --gallery-gap: var(--space-8);
        grid-template-columns: 1fr 1fr
    }

    .gallery__item--wide {
        grid-column: span 2
    }
}

.gallery img {
    background: var(--color-imageBg);
    width: 100%;
    height: auto
}

.contact {
    --contact-fs: var(--fs-15);
    --contact-lh: var(--lh-15);
    --button-pad-y: 12px;
    --cell-pad-y: 8px;
    --cell-pad-right: var(--space-16);
    --menu-icon: 24px;
    --menu-icon-gap: 10px;
    --menu-pad: 10px;
    --button-h: calc(var(--contact-lh) + var(--button-pad-y) * 2);
    --cell-h: calc(max(var(--menu-icon), var(--contact-lh)) + var(--cell-pad-y) * 2);
    --button-radius: calc(var(--button-h) / 2);
    --cell-radius: calc(var(--cell-h) / 2);
    --menu-radius: calc(var(--cell-radius) + var(--menu-pad));
    --menu-h: calc(var(--cell-count) * var(--cell-h) + var(--menu-pad) * 2);
    --menu-w: 9.875rem;
    --button-w: 5.5rem;
    --pinch-scale-x-in: .65;
    --pinch-scale-y-in: .65;
    --pinch-scale-x-out: .5;
    --pinch-scale-y-out: .5;
    --fallback-scale-in: .5;
    --fallback-scale-out: .65;
    --pinch-x-in: .25;
    --pinch-y-in: .4;
    --pinch-x-out: .25;
    --pinch-y-out: .2;
    --pinch-shift-in: calc(var(--menu-w) * var(--pinch-x-in) - var(--button-w) / 2);
    --pinch-drop-in: calc(var(--menu-h) * var(--pinch-y-in) - var(--button-h) / 2);
    --pinch-shift-out: calc(var(--menu-w) * var(--pinch-x-out) - var(--button-w) / 2);
    --pinch-drop-out: calc(var(--menu-h) * var(--pinch-y-out) - var(--button-h) / 2);
    --settle: .75;
    --dur-out: calc(var(--dur-snappy-reverse) * var(--settle));
    --x-in: 1;
    --y-in: 1;
    --s-in: 1;
    --box-lead: .2;
    --x-out: 1;
    --y-out: 1;
    --s-out: 1;
    --stagger-lead: calc(.12s * var(--slomo));
    --stagger-step: calc(30ms * var(--slomo));
    --cell-rise: 20px;
    --cell-in-dur: calc(.3s * var(--slomo));
    --cell-out-dur: var(--dur-hover);
    --cell-out-delay: calc(.12s * var(--slomo));
    --ease-cell: var(--ease-hover);
    --label-in-delay: 0;
    --label-in-fade: .1;
    --label-out-delay: .5;
    --label-out-fade: .2;
    margin-left: -4px;
    display: flex
}

.contact__button,
.contact__surface,
.back,
.consent {
    background: var(--control-bg);
    -webkit-backdrop-filter: var(--control-blur);
    backdrop-filter: var(--control-blur)
}

.contact__button,
.back {
    box-shadow: var(--control-shadow);
    position: relative
}

.contact__button:after,
.back:after {
    content: "";
    border-radius: inherit;
    box-shadow: var(--control-drop);
    pointer-events: none;
    position: absolute;
    inset: 0
}

.contact__button:after {
    transition: box-shadow var(--dur-bouncy) var(--ease-bouncy), opacity 0s linear var(--dur-out)
}

.back:after {
    transition: box-shadow var(--dur-bouncy) var(--ease-bouncy)
}

.contact__surface {
    box-shadow: var(--control-shadow), var(--menu-drop)
}

.contact__button:before,
.contact__surface:before,
.back:before,
.consent:before {
    content: "";
    border-radius: inherit;
    background: var(--control-inside-stroke);
    -webkit-mask-composite: xor;
    pointer-events: none;
    padding: .75px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}

.contact__button {
    anchor-name: --contact-button;
    min-width: var(--button-w);
    padding: var(--button-pad-y) var(--space-16);
    border-radius: var(--button-radius);
    color: var(--color-primaryLabel);
    font-size: var(--contact-fs);
    line-height: var(--contact-lh);
    cursor: pointer;
    --press-dur: var(--dur-press-out);
    transition: color calc(var(--dur-snappy-reverse) * var(--label-out-fade)) linear calc(var(--dur-snappy-reverse) * var(--label-out-delay)), background 0s linear var(--dur-out), box-shadow 0s linear var(--dur-out), backdrop-filter 0s linear var(--dur-out), scale var(--press-dur) var(--ease-bouncy);
    transition-behavior: normal, allow-discrete, allow-discrete, allow-discrete, normal;
    border: 0;
    font-weight: 500
}

.contact__button:hover,
.back:hover {
    --press-dur: var(--dur-bouncy);
    scale: var(--hover-scale)
}

.contact__button:hover:after,
.back:hover:after {
    box-shadow: var(--control-drop-hover)
}

.contact__button:active,
.back:active {
    --press-dur: var(--dur-press-in);
    scale: var(--press-scale)
}

.back {
    --back-icon-h: 22px;
    --back-icon-w: calc(var(--back-icon-h) * 18 / 22);
    --back-pad-y: calc((var(--back-size) - var(--back-icon-h)) / 2);
    --back-pad-x: calc((var(--back-size) - var(--back-icon-w)) / 2);
    --back-radius: calc(var(--back-size) / 2);
    padding: var(--back-pad-y) var(--back-pad-x);
    border-radius: var(--back-radius);
    color: var(--color-primaryLabel);
    --press-dur: var(--dur-press-out);
    transition: scale var(--press-dur) var(--ease-bouncy);
    display: flex
}

@media (min-width:48rem) {
    .masthead--back {
        --back-size: 36px
    }

    .back {
        --back-icon-h: 18px
    }
}

.back svg {
    width: var(--back-icon-w);
    height: var(--back-icon-h);
    display: block
}

.back svg path {
    fill: currentColor
}

.contact__surface {
    position-anchor: --contact-button;
    top: anchor(top);
    left: anchor(left);
    pointer-events: none;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s var(--dur-out), opacity 0s var(--dur-out), background 0s var(--dur-out), -webkit-backdrop-filter 0s var(--dur-out), backdrop-filter 0s var(--dur-out), box-shadow 0s var(--dur-out);
    transition-behavior: allow-discrete;
    position: absolute
}

:root:not(:has(.contact__menu:popover-open)) .contact__surface {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    background: 0 0
}

.contact__surface:before {
    transition: opacity 0s var(--dur-out)
}

:root:not(:has(.contact__menu:popover-open)) .contact__surface:before {
    opacity: 0
}

.contact__list {
    position-anchor: --contact-button;
    top: anchor(top);
    left: anchor(left);
    z-index: 3;
    box-sizing: border-box;
    padding: var(--menu-pad);
    flex-direction: column;
    display: flex;
    position: absolute;
    overflow: hidden
}

.contact__surface,
.contact__list {
    width: var(--button-w);
    height: var(--button-h);
    border-radius: var(--button-radius);
    transform-origin: 50%;
    animation-name: contact-box-out, contact-scale-out, contact-drop-out, contact-shift-out;
    animation-duration: var(--dur-out), calc(var(--dur-out) * var(--s-out)), calc(var(--dur-out) * var(--y-out)), calc(var(--dur-out) * var(--x-out));
    animation-fill-mode: backwards
}

.contact__list {
    visibility: hidden;
    transition: visibility 0s var(--dur-out)
}

:is(:root:has(.contact__menu:popover-open) .contact__surface, :root:has(.contact__menu:popover-open) .contact__list) {
    visibility: visible;
    opacity: 1;
    width: var(--menu-w);
    height: var(--menu-h);
    border-radius: var(--menu-radius);
    animation-name: contact-box-in, contact-scale-in, contact-drop-in, contact-shift-in;
    animation-duration: var(--dur-snappy), calc(var(--dur-snappy) * var(--s-in)), calc(var(--dur-snappy) * var(--y-in)), calc(var(--dur-snappy) * var(--x-in));
    transition: visibility, opacity;
    animation-fill-mode: backwards
}

.contact__menu {
    position-anchor: --contact-button;
    top: anchor(top);
    left: anchor(left);
    pointer-events: none;
    width: 0;
    height: 0;
    box-shadow: none;
    z-index: 2;
    transition: display var(--dur-snappy-reverse) allow-discrete, overlay var(--dur-snappy-reverse) allow-discrete;
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: auto;
    right: auto
}

.contact__menu:popover-open {
    transition: display var(--dur-snappy) allow-discrete, overlay var(--dur-snappy) allow-discrete;
    display: block
}

@keyframes contact-box-in {
    0% {
        width: var(--button-w);
        height: var(--button-h);
        border-radius: var(--button-radius);
        animation-timing-function: cubic-bezier(.3, .12, .7, .6)
    }

    24% {
        width: calc(var(--button-w) + (var(--menu-w) - var(--button-w)) * var(--box-lead));
        height: calc(var(--menu-h) * var(--box-lead) + var(--button-h) * (1 - var(--box-lead)));
        border-radius: calc(var(--menu-radius) * var(--box-lead) + var(--button-radius) * (1 - var(--box-lead)));
        animation-timing-function: linear(0, .0216, .0778, .1571, .2502, .3495, .4494, .5455, .635, .7159, .7871, .8482, .8995, .9413, .9745, 1, 1.0188, 1.0318, 1.0401, 1.0445, 1.046, 1.0451, 1.0427, 1.0391, 1.0349, 1.0303, 1.0257, 1.0213, 1.0171, 1.0134, 1)
    }

    to {
        width: var(--menu-w);
        height: var(--menu-h);
        border-radius: var(--menu-radius)
    }
}

@keyframes contact-scale-in {
    0% {
        animation-timing-function: cubic-bezier(.45, .2, .55, 1);
        scale: 1
    }

    24% {
        scale: var(--pinch-scale-x-in) var(--pinch-scale-y-in);
        animation-timing-function: linear(0, .0216, .0778, .1571, .2502, .3495, .4494, .5455, .635, .7159, .7871, .8482, .8995, .9413, .9745, 1, 1.0188, 1.0318, 1.0401, 1.0445, 1.046, 1.0451, 1.0427, 1.0391, 1.0349, 1.0303, 1.0257, 1.0213, 1.0171, 1.0134, 1)
    }

    to {
        scale: 1
    }
}

@keyframes contact-drop-in {
    0% {
        animation-timing-function: cubic-bezier(.45, .2, .55, 1);
        translate: 0
    }

    24% {
        translate: 0 var(--pinch-drop-in);
        animation-timing-function: linear(0, .0216, .0778, .1571, .2502, .3495, .4494, .5455, .635, .7159, .7871, .8482, .8995, .9413, .9745, 1, 1.0188, 1.0318, 1.0401, 1.0445, 1.046, 1.0451, 1.0427, 1.0391, 1.0349, 1.0303, 1.0257, 1.0213, 1.0171, 1.0134, 1)
    }

    to {
        translate: 0
    }
}

@keyframes contact-shift-in {
    0% {
        margin-left: 0;
        animation-timing-function: cubic-bezier(.45, .2, .55, 1)
    }

    24% {
        margin-left: var(--pinch-shift-in);
        animation-timing-function: linear(0, .0216, .0778, .1571, .2502, .3495, .4494, .5455, .635, .7159, .7871, .8482, .8995, .9413, .9745, 1, 1.0188, 1.0318, 1.0401, 1.0445, 1.046, 1.0451, 1.0427, 1.0391, 1.0349, 1.0303, 1.0257, 1.0213, 1.0171, 1.0134, 1)
    }

    to {
        margin-left: 0
    }
}

@keyframes contact-box-out {
    0% {
        width: var(--menu-w);
        height: var(--menu-h);
        border-radius: var(--menu-radius);
        animation-timing-function: linear(0, .0251, .09, .1812, .2874, .3995, .5107, .6158, .7115, .7957, .8674, .9265, .9735, 1.0093, 1.0353, 1.0527, 1.063, 1.0675, 1.0677, 1.0645, 1.0592, 1.0524, 1.0449, 1.0372, 1.0298, 1.023, 1.0168, 1.0115, 1.007, 1.0034, 1)
    }

    to {
        width: var(--button-w);
        height: var(--button-h);
        border-radius: var(--button-radius)
    }
}

@keyframes contact-scale-out {
    0% {
        animation-timing-function: cubic-bezier(.45, .2, .55, 1);
        scale: 1
    }

    50% {
        scale: var(--pinch-scale-x-out) var(--pinch-scale-y-out);
        animation-timing-function: linear(0, .0251, .09, .1812, .2874, .3995, .5107, .6158, .7115, .7957, .8674, .9265, .9735, 1.0093, 1.0353, 1.0527, 1.063, 1.0675, 1.0677, 1.0645, 1.0592, 1.0524, 1.0449, 1.0372, 1.0298, 1.023, 1.0168, 1.0115, 1.007, 1.0034, 1)
    }

    to {
        scale: 1
    }
}

@keyframes contact-drop-out {
    0% {
        animation-timing-function: cubic-bezier(.45, .2, .55, 1);
        translate: 0
    }

    50% {
        translate: 0 var(--pinch-drop-out);
        animation-timing-function: linear(0, .0251, .09, .1812, .2874, .3995, .5107, .6158, .7115, .7957, .8674, .9265, .9735, 1.0221, 1.0834, 1.1245, 1.1489, 1.1597, 1.16, 1.1526, 1.1399, 1.1239, 1.1062, 1.0881, 1.0706, 1.0543, 1.0397, 1.0271, 1.0166, 1.008, 1)
    }

    to {
        translate: 0
    }
}

@keyframes contact-shift-out {
    0% {
        margin-left: 0;
        animation-timing-function: cubic-bezier(.45, .2, .55, 1)
    }

    50% {
        margin-left: var(--pinch-shift-out);
        animation-timing-function: cubic-bezier(.2, 0, 0, 1)
    }

    to {
        margin-left: 0
    }
}

.contact:has(.contact__menu:popover-open) .contact__button {
    color: #0000;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    transition: opacity var(--dur-hover) var(--ease-hover), color calc(var(--dur-snappy) * var(--label-in-fade)) linear calc(var(--dur-snappy) * var(--label-in-delay)), background 0s, box-shadow 0s, backdrop-filter 0s;
    background: 0 0;
    scale: 1
}

.contact:has(.contact__menu:popover-open) .contact__button:before {
    opacity: 0;
    transition: opacity
}

.contact:has(.contact__menu:popover-open) .contact__button:after {
    opacity: 0;
    transition: opacity
}

.contact__button:before {
    transition: opacity 0s linear var(--dur-out)
}

.contact__list a {
    align-items: center;
    gap: var(--menu-icon-gap);
    padding: var(--cell-pad-y) var(--cell-pad-right) var(--cell-pad-y) var(--cell-pad-y);
    border-radius: var(--cell-radius);
    color: var(--color-primaryLabel);
    font-size: var(--contact-fs);
    line-height: var(--contact-lh);
    white-space: nowrap;
    opacity: 0;
    translate: 0 calc(var(--cell-rise) * -1);
    transition: opacity var(--cell-out-dur) var(--ease-cell) var(--cell-out-delay), translate var(--cell-out-dur) var(--ease-cell) var(--cell-out-delay), background-color var(--dur-hover) var(--ease-hover);
    display: flex
}

@keyframes contact-cell-in {
    0% {
        opacity: 0;
        translate: 0 var(--cell-rise)
    }

    to {
        opacity: 1;
        translate: 0
    }
}

:root:has(.contact__menu:popover-open) .contact__list a {
    opacity: 1;
    animation-name: contact-cell-in;
    animation-duration: var(--cell-in-dur);
    animation-timing-function: var(--ease-cell);
    animation-delay: calc(var(--stagger-lead) + var(--i) * var(--stagger-step));
    transition: background-color var(--dur-hover) var(--ease-hover);
    animation-fill-mode: backwards;
    translate: 0
}

.contact__list a:hover {
    background: var(--color-fill-hover)
}

.contact__scrim {
    z-index: 1;
    pointer-events: none;
    transition-property: pointer-events;
    transition-duration: 0s;
    transition-delay: var(--dur-hover);
    transition-behavior: allow-discrete;
    position: fixed;
    inset: 0
}

:root:has(.contact__menu:popover-open) .contact__scrim {
    pointer-events: auto;
    transition-delay: 0s
}

@media (prefers-reduced-motion:reduce) {
    .contact__scrim {
        transition-delay: var(--dur-hover) !important
    }

    :root:has(.contact__menu:popover-open) .contact__scrim {
        transition-delay: 0s !important
    }
}

@keyframes contact-fallback-in {
    0% {
        opacity: 0;
        scale: var(--fallback-scale-in)
    }

    to {
        opacity: 1;
        scale: 1
    }
}

@keyframes contact-fallback-out {
    0% {
        opacity: 1;
        scale: 1
    }

    to {
        opacity: 0;
        scale: var(--fallback-scale-out)
    }
}

@supports not (anchor-name:--a) {
    .contact {
        position: relative
    }

    .contact__surface,
    .contact__list {
        margin-top: var(--space-8);
        width: var(--menu-w);
        height: var(--menu-h);
        border-radius: var(--menu-radius);
        transform-origin: 0 0;
        animation-name: contact-fallback-out;
        animation-duration: var(--dur-snappy-reverse);
        animation-timing-function: var(--ease-hover);
        animation-fill-mode: backwards;
        top: 100%;
        left: 0
    }

    :is(:root:has(.contact__menu:popover-open) .contact__surface, :root:has(.contact__menu:popover-open) .contact__list) {
        width: var(--menu-w);
        height: var(--menu-h);
        border-radius: var(--menu-radius);
        animation-name: contact-fallback-in;
        animation-duration: var(--dur-snappy);
        animation-timing-function: var(--ease-bouncy);
        animation-fill-mode: backwards
    }

    .contact:has(.contact__menu:popover-open) .contact__button {
        color: inherit;
        background: var(--control-bg);
        box-shadow: var(--control-shadow);
        transition: none
    }

    .contact:has(.contact__menu:popover-open) .contact__button:before {
        opacity: 1
    }

    .contact:has(.contact__menu:popover-open) .contact__button:after {
        opacity: 1
    }
}

.consent {
    --consent-pad: 14px;
    --consent-button-pad-y: 7px;
    --consent-button-pad-x: 10px;
    --consent-button-h: calc(var(--lh-13) + var(--consent-button-pad-y) * 2);
    --consent-button-radius: calc(var(--consent-button-h) / 2);
    --consent-radius: calc(var(--consent-button-radius) + var(--consent-pad));
    --consent-inset: 20px;
    left: var(--consent-inset);
    right: var(--consent-inset);
    bottom: var(--consent-inset);
    z-index: 10;
    gap: var(--space-12);
    padding: var(--consent-pad);
    border-radius: var(--consent-radius);
    box-shadow: var(--control-shadow), var(--menu-drop);
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-default) var(--ease-hover), visibility 0s linear var(--dur-default);
    flex-direction: column;
    display: flex;
    position: fixed
}

.consent[data-open] {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur-snappy) var(--ease-hover), visibility 0s
}

@media (min-width:48rem) {
    .consent {
        left: auto;
        right: var(--space-24);
        bottom: var(--space-24)
    }
}

.consent__text {
    padding-inline: var(--space-8)
}

.consent__text a,
.article__intro a {
    text-underline-offset: 2px;
    text-decoration: underline;
    text-decoration-thickness: from-font
}

.consent__text a:hover,
.article__intro a:hover {
    color: var(--color-hover);
    transition: color var(--dur-hover) var(--ease-hover)
}

.consent__actions {
    gap: var(--space-8);
    display: flex
}

.consent button {
    padding: var(--consent-button-pad-y) var(--consent-button-pad-x);
    border-radius: var(--consent-button-radius);
    background-color: var(--consent-button-bg);
    color: var(--color-primaryLabel);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
    border: 0;
    flex: 1
}

.consent button:hover {
    background-color: var(--consent-button-bg-hover);
    color: var(--color-hover)
}

@media (max-width:47.99rem) {
    .page {
        --pad: var(--space-28)
    }

    :root {
        --gap-block: var(--space-44);
        --pad-page-end: var(--space-68)
    }

    .entry__name,
    .summary {
        font-size: var(--fs-17);
        line-height: var(--lh-17)
    }

    .masthead {
        gap: var(--space-16)
    }

    .entry__drill {
        --drill-h: 22px;
        width: calc(var(--drill-h) * 14 / 22);
        height: var(--drill-h);
        flex: none;
        margin-left: auto;
        display: none
    }

    .icon img {
        width: var(--icon-size-mobile, var(--icon-size));
        height: var(--icon-size-mobile, var(--icon-size))
    }

    .masthead--back {
        min-height: calc(var(--back-size) + var(--space-12) * 2)
    }

    .back {
        top: var(--space-12);
        left: var(--back-inset);
        z-index: 2;
        position: fixed
    }

    .contact {
        --contact-fs: var(--fs-17);
        --contact-lh: var(--lh-17);
        --button-pad-y: 11px;
        --menu-icon: 28px;
        --menu-icon-gap: 12px;
        --button-w: 5.875rem;
        --menu-w: 13.0625rem
    }
}

@media print {
    .contact {
        display: none
    }
}