html {
    overflow-y: scroll
}

body {
    color: var(--color--foreground-100)
}

body .app-header {
    color: var(--color--foreground--100);
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .77) 67%, rgba(255, 255, 255, 0) 100%)
}

body .section {
    color: var(--color--foreground--100)
}

.app-header {
    position: fixed;
    width: 100%;
    padding: 0 var(--grid--app-margin);
    z-index: 100;
    -webkit-user-select: none;
    user-select: none
}

.app-header>.content {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.app-header .brand {
    padding: 12px 0
}

.app-header .brand:hover {
    cursor: pointer
}

.app-header .brand h3 {
    margin-left: var(--font--margin-left);
    font-size: var(--font--size-medium);
    line-height: 1
}

.app-header .brand h3 span:nth-child(n+2) {
    margin-left: var(--font--margin-left);
    margin-left: -.25em;
    opacity: 0;
    transition: margin-left .3s ease-in, opacity .3s ease-in
}

.app-header .brand:hover h3 span:nth-child(n+2) {
    margin-left: -.18em;
    opacity: 1;
    transition: margin-left .3s ease-out, opacity .3s ease-out
}

.app-header .brand h3 span:nth-child(6) {
    margin-left: var(--font--margin-left);
    margin-left: -2em;
    opacity: 1;
    transition: margin-left .3s ease-in, opacity .3s ease-in
}

.app-header .brand:hover h3 span:nth-child(6) {
    margin-left: -.18em;
    opacity: 1;
    transition: margin-left .3s ease-out, opacity .3s ease-out
}

.app-header .brand:hover h3 span:nth-child(2) {
    transition-delay: .02s
}

.app-header .brand:hover h3 span:nth-child(3) {
    transition-delay: .03s
}

.app-header .brand:hover h3 span:nth-child(4) {
    transition-delay: .04s
}

.app-header .brand:hover h3 span:nth-child(5) {
    transition-delay: .05s
}

.app-header .brand:hover h3 span:nth-child(6) {
    transition-delay: 0s
}

.app-header .brand:hover h3 span:nth-child(7) {
    transition-delay: .06s
}

.app-header .brand:hover h3 span:nth-child(8) {
    transition-delay: .07s
}

.app-header .brand:hover h3 span:nth-child(9) {
    transition-delay: .08s
}

.app-header .brand:hover h3 span:nth-child(10) {
    transition-delay: .09s
}

.app-header .brand:hover h3 span:nth-child(11) {
    transition-delay: .1s
}

.app-header .brand:hover h3 span:nth-child(12) {
    transition-delay: .11s
}

.app-header .brand:hover h3 span:nth-child(13) {
    transition-delay: .12s
}

.app-header .brand:hover h3 span:nth-child(14) {
    transition-delay: .13s
}

.app-header .brand:hover h3 span:nth-child(15) {
    transition-delay: .14s
}

.app-header .brand:hover h3 span:nth-child(16) {
    transition-delay: .15s
}

.app-header .brand:hover h3 span:nth-child(17) {
    transition-delay: .16s
}

.app-header .brand h3 span:nth-child(2) {
    transition-delay: .16s
}

.app-header .brand h3 span:nth-child(3) {
    transition-delay: .15s
}

.app-header .brand h3 span:nth-child(4) {
    transition-delay: .14s
}

.app-header .brand h3 span:nth-child(5) {
    transition-delay: .13s
}

.app-header .brand h3 span:nth-child(6) {
    transition-delay: .12s
}

.app-header .brand h3 span:nth-child(7) {
    transition-delay: .11s
}

.app-header .brand h3 span:nth-child(8) {
    transition-delay: .1s
}

.app-header .brand h3 span:nth-child(9) {
    transition-delay: .09s
}

.app-header .brand h3 span:nth-child(10) {
    transition-delay: .08s
}

.app-header .brand h3 span:nth-child(11) {
    transition-delay: .07s
}

.app-header .brand h3 span:nth-child(12) {
    transition-delay: .06s
}

.app-header .brand h3 span:nth-child(13) {
    transition-delay: .05s
}

.app-header .brand h3 span:nth-child(14) {
    transition-delay: .04s
}

.app-header .brand h3 span:nth-child(15) {
    transition-delay: .03s
}

.app-header .brand h3 span:nth-child(16) {
    transition-delay: .02s
}

.app-header .brand h3 span:nth-child(17) {
    transition-delay: .01s
}

.app-header .actions {
    display: flex;
    align-items: center;
    gap: 16px
}

.app-header .myname a {
    color: var(--color--foreground--100)
}

.app-header .myname a:hover {
    border-bottom: 1px solid var(--color--foreground--25)
}

.app-nav {
    position: fixed;
    top: var(--grid--app-xheight);
    left: var(--grid--app-margin);
    z-index: 100;
    -webkit-user-select: none;
    user-select: none
}

.app-nav .content:hover {
    cursor: pointer
}

.app-nav .item {
    font-size: var(--font--size-regular);
    padding: 1px 0;
    color: var(--color--foreground--33)
}

.app-nav .item:hover {
    color: var(--color--foreground--100);
    cursor: pointer
}

.app-nav .item.is--active {
    color: var(--color--foreground--100)
}

.app-nav .item a.active {
    color: var(--color--foreground--100)
}

.app-main a {
    border-bottom: 1px solid var(--color--foreground--25)
}

.app-main a:hover {
    border-bottom-color: var(--color--foreground--100);
    cursor: pointer
}

.section {
    padding: 0 var(--grid--app-margin);
    display: grid;
    grid-template-columns: var(--grid--app-columns);
    gap: var(--grid--app-gutter)
}

.section>.content {
    grid-column: 5/-1
}

.section h1 {
    margin-left: var(--font--margin-left);
    font-size: var(--font--size-huge);
    line-height: .975;
    letter-spacing: -.02em
}

.section h2 {
    margin-left: var(--font--margin-left);
    font-size: var(--font--size-large);
    line-height: 1.16;
    letter-spacing: -.01em
}

.section h3 {
    font-size: var(--font--size-regular);
    line-height: var(--font--size-regular-line-height);
    color: var(--color--foreground--50)
}

.section.projects>.content {
    padding: calc(var(--grid--app-xheight) - 40px)0 80px;
    position: relative
}

.section.projects .options {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-user-select: none;
    user-select: none
}

.section.projects .options::-webkit-scrollbar {
    display: none
}

.section.projects .options:hover {
    cursor: pointer
}

.section.projects .options .option {
    font-size: var(--font--size-regular);
    line-height: 20px;
    padding: 12px 10px;
    color: var(--color--foreground--33);
    white-space: nowrap
}

.section.projects .options .option:hover {
    color: var(--color--foreground--100);
    cursor: pointer
}

.section.projects .options .option:first-child {
    padding-left: 0
}

.section.projects .options .option:last-child {
    padding-right: 80px
}

.section.projects .options .option.is--active {
    color: var(--color--foreground--100)
}

.section.projects .gradient-mask {
    width: 80px;
    height: 44px;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    transition: opacity .3s ease
}

.section.projects .gradient-mask.left {
    left: 0;
    background: linear-gradient(to right, var(--color--background--100) 2%, var(--color--background--0) 100%)
}

.section.projects .gradient-mask.right {
    right: 0;
    background: linear-gradient(to left, var(--color--background--100) 2%, var(--color--background--0) 100%)
}

.section.projects .gradient-mask.left.is--visible,
.section.projects .gradient-mask.right.is--visible {
    opacity: 1
}

.section.projects .text {
    min-height: calc(1em * .975 * 7);
    display: none
}

.section.projects .text.is--visible {
    display: block
}

.section.projects .text span {
    white-space: nowrap
}

.section h1 a {
    border-bottom: 2px solid var(--color--foreground--25);
    display: inline-block;
    line-height: .88
}

.section.about>.content {
    padding: calc(var(--grid--app-xheight) - 11px)0 80px;
    position: relative;
    grid-column: 5/-3
}

.section.about p {
    margin: 20px 0
}

.section .thumbnail_card {
    margin-bottom: 1em
}

.section .thumbnail_card .thumbnail_title {
    display: flex;
    gap: 10%;
    padding: 1px 0 9px;
    align-items: baseline
}

.section .thumbnail_card .thumbnail_title h2 {
    font-size: var(--font--size-medium-small)
}

.section .thumbnail_card .thumbnail_title h2.date-year {
    font-size: var(--font--size-regular);
    color: var(--color--foreground--50)
}

.section .thumbnail_card .thumbnail_images {
    display: flex
}

.section .thumbnail_card .thumbnail_images>div {
    flex: 1 1;
    background-size: cover;
    background-position: 50%;
    height: 100px
}

.section img.hero {
    width: 100%
}

.section.about .image_secondary {
    position: absolute;
    width: 30%;
    bottom: 25%;
    left: -25%;
    z-index: -80
}

.section.about .image_secondary img {
    width: 100%;
    border-radius: 40% 40% 60% 60%
}

.section.about .image_overlay {
    position: absolute;
    width: 10%;
    bottom: 0%;
    right: -5%;
    z-index: -100
}

.section.about .image_overlay img {
    width: 100%;
    border-radius: 50%
}

.tags-container-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 0 .5em
}

.tags-container-wrapper .year-container {
    display: flex;
    gap: 16px
}

.tags-container-wrapper ul {
    display: flex;
    flex-direction: flex-end;
    list-style: none;
    gap: 10px
}

.tags-container-wrapper ul .tags-item {
    font-size: var(--font--size-tiny)
}

.tags-item a {
    text-decoration: none;
    color: var(--color--foreground--33);
    border-bottom: none
}

.projects .description_container {
    margin: 20px 0
}

.description_container>p {
    margin: 20px 0;
    font-size: var(--font--size-medium-small)
}

.project-nav {
    position: absolute;
    top: var(--grid--app-xheight);
    right: 0%;
    transform: translate(calc(var(--grid--app-margin)*-1), -20px);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding-top: .5em
}

.project-nav-item a {
    display: block;
    border-bottom: none;
    font-size: var(--font--size-medium);
    color: var(--color--foreground--50)
}

.project-nav-item a:hover {
    color: var(--color--foreground--100)
}

.project-nav-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.project-nav-bottom .project-nav-item a {
    font-size: var(--font--size-regular)
}

.project-nav-bottom .project-nav-item a:hover {
    border-bottom: 1px solid var(--color--foreground--50)
}

footer {
    position: fixed;
    bottom: calc(var(--grid--app-margin)*3)
}

footer>.item {
    writing-mode: vertical-lr;
    margin: 20px var(--grid--app-margin)
}

footer>.item>a {
    color: var(--color--foreground--50);
    font-size: var(--font--size-tiny)
}

footer>.item>a:hover {
    color: var(--color--foreground--100);
    cursor: pointer
}

.landing {
    height: 100vh;
    width: 100%;
    margin: 0
}

.landing-bg {
    background-color: #111;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative
}

.landing-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.landing-overlay h1 {
    font-size: 3rem;
    margin-bottom: 1rem
}

.landing-button {
    display: inline-block;
    margin: .5rem;
    padding: .75rem 1.5rem;
    border: none;
    background: #111;
    color: #fff;
    text-decoration: none;
    transition: all .3s ease-in-out;
    border-radius: 2px
}

.landing-secondary {
    display: inline-block;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    text-align: right;
    padding: .75rem 1.5rem;
    text-shadow: #111 1px 1px 40px;
    border: none;
    color: var(--color--foreground--100);
    font-size: small;
    transition: all .1s ease
}

.landing-button:hover {
    color: var(--color--background--100);
    background-color: var(--color--foreground--100)
}

.landing-secondary:hover {
    text-decoration: underline;
    bottom: 1.2rem
}

.app-main a.landing-secondary,
.app-main a.landing-button {
    border: none
}

.projects-by-tag .project-grid {
    padding-top: 1rem;
    padding-left: .2rem
}

.projects-by-tag .project-grid h2 {
    font-size: var(--font--size-medium-small)
}

.projects-by-tag h1 {
    font-size: var(--font--size-medium)
}

.project-grid .thumbnail_card {
    display: flex;
    justify-content: space-between
}

.project-grid .thumbnail_images>div {
    width: 200px;
    height: 100px
}